diff --git a/src/pages/sicp/Sicp.tsx b/src/pages/sicp/Sicp.tsx
index b1362d2eb6..c3674bcc33 100644
--- a/src/pages/sicp/Sicp.tsx
+++ b/src/pages/sicp/Sicp.tsx
@@ -5,7 +5,6 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 import { RouteComponentProps, useParams } from 'react-router';
-import ContentDisplay from 'src/commons/ContentDisplay';
 import Constants from 'src/commons/utils/Constants';
 import { resetWorkspace, toggleUsingSubst } from 'src/commons/workspace/WorkspaceActions';
 import { parseArr, ParseJsonError } from 'src/features/sicp/parser/ParseJson';
@@ -33,17 +32,7 @@ export const mathjaxConfig = {
   }
 };
 
-const sicpDisplayProps = {
-  fullWidth: false,
-  loadContentDispatch: () => {}
-};
-
-const loadingComponent = (
-  <ContentDisplay
-    {...sicpDisplayProps}
-    display={<NonIdealState title="Loading Content" icon={<Spinner />} />}
-  />
-);
+const loadingComponent = <NonIdealState title="Loading Content" icon={<Spinner />} />;
 
 const unexpectedError = (
   <div>
@@ -163,7 +152,11 @@ const Sicp: React.FC<SicpProps> = props => {
       <CodeSnippetContext.Provider value={{ active: active, setActive: handleSnippetEditorOpen }}>
         <div ref={topRef} />
         <MathJaxContext version={3} config={mathjaxConfig}>
-          {loading ? loadingComponent : <ContentDisplay {...sicpDisplayProps} display={data} />}
+          {loading ? (
+            <div className="sicp-content">{loadingComponent}</div>
+          ) : (
+            <div className="sicp-content">{data}</div>
+          )}
         </MathJaxContext>
       </CodeSnippetContext.Provider>
     </div>
diff --git a/src/pages/sicp/__tests__/Sicp.tsx b/src/pages/sicp/__tests__/Sicp.tsx
index 8bfcc4b994..658eba16e5 100644
--- a/src/pages/sicp/__tests__/Sicp.tsx
+++ b/src/pages/sicp/__tests__/Sicp.tsx
@@ -1,7 +1,6 @@
 import { mount, shallow } from 'enzyme';
 import { Provider } from 'react-redux';
 import ReactRouter from 'react-router';
-import ContentDisplay from 'src/commons/ContentDisplay';
 import { mockInitialStore } from 'src/commons/mocks/StoreMocks';
 
 import Sicp from '../Sicp';
@@ -36,7 +35,7 @@ describe('Sicp renders', () => {
       </Provider>
     );
     const wrapper = mount(sicp);
-    const display = wrapper.find(ContentDisplay);
-    expect(display.prop('display')).toEqual(<SicpIndexPage />);
+    const display = wrapper.find('.sicp-content');
+    expect(display.prop('children')).toEqual(<SicpIndexPage />);
   });
 });
diff --git a/src/styles/_sicp.scss b/src/styles/_sicp.scss
index 268f4e1b4f..a43cf3e010 100644
--- a/src/styles/_sicp.scss
+++ b/src/styles/_sicp.scss
@@ -6,6 +6,7 @@ $sicp-background-color: #ffffff;
   text-align: justify;
   color: $sicp-text-color;
   overflow: auto;
+  background-color: $sicp-background-color;
 
   @media only screen and (max-width: 768px) {
     font-size: 1em;
@@ -31,18 +32,25 @@ $sicp-background-color: #ffffff;
     background-color: $sicp-background-color;
   }
 
-  .ContentDisplay {
-    margin: 0 auto;
+  .sicp-content {
+    margin: 1em auto;
+    padding: 0 5em;
+    max-width: 1300px;
+
     height: fit-content;
-    text-align: left;
+    background-color: $sicp-background-color;
 
-    .bp3-card {
-      background-color: $sicp-background-color;
+    h1 {
+      text-align: left;
     }
 
     p {
       display: inline;
     }
+
+    @media only screen and (max-width: 768px) {
+      padding: 0 1em;
+    }
   }
 
   .bp3-heading {
@@ -184,11 +192,10 @@ $sicp-background-color: #ffffff;
 }
 
 .sicp-toc-drawer {
-  background-color: $cadet-color-2;
-  width: 500px;
+  width: 500px !important;
 
   .sicp-toc-tree {
-    color: $cadet-color-4;
+    color: $sicp-text-color;
     font-size: larger;
 
     .bp3-tree-node-content {