diff --git a/components/layout.jsx b/components/layout.jsx
index 5a6091c4..7f2068af 100644
--- a/components/layout.jsx
+++ b/components/layout.jsx
@@ -25,7 +25,7 @@ const contentStyle = {
 export default function Layout({ children }) {
     console.log('fuck everything')
     return (
-          <div className='d-flex container fluid'>
+          <div className='container'>
             <Head>
               <meta charSet="utf-8" />
             </Head>
@@ -49,18 +49,16 @@ export default function Layout({ children }) {
                   </div>
                 </div>
               </div>
-            <div className="container-fluid Content" style={contentStyle}>
+            <div className="container">
                 <div className='d-flex row justify-content-between position-relative d-none d-sm-block'>
                   <div className='col-2 justify-content-start position-fixed top-10 start-0 '>
                     <nav className="nav align-items-stretch">
                       <NavBar { ...MainPage.args } />
                     </nav>
                   </div>
-                  {/* <div className='col-8'></div> */}
-                  <div className='col-2 position-fixed top-10 end-0'><OnThisPage></OnThisPage></div>
                 </div>
-                <div className='row position-static justify-content-around'>
-                  <div className='col-10'>{children}</div>
+                <div className='d-flex row position-static justify-content-xs-start justify-content-sm-around'>
+                  <div className='col-12 col-sm-10'>{children}</div>
 
                 </div>
                 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossOrigin="anonymous"></script>
diff --git a/data/site-pages.json b/data/site-pages.json
index 8655df33..8baa8973 100644
--- a/data/site-pages.json
+++ b/data/site-pages.json
@@ -139,7 +139,7 @@
     },
     {
         "name": "Documentation",
-        "url": "/specs",
+        "url": "/documentation",
         "title": "Documentation",
         "pages": [
             {
diff --git a/overview/overview.md b/overview/overview.md
index e660595d..fda9fcf6 100644
--- a/overview/overview.md
+++ b/overview/overview.md
@@ -3,6 +3,7 @@ title: Overview
 section: Overview
 toc: []
 ---
+<div align='center'>
 
 # SSZ Overview
 
diff --git a/pages/implementations/[id].jsx b/pages/implementations/[id].jsx
index 07d381b6..a4afc657 100644
--- a/pages/implementations/[id].jsx
+++ b/pages/implementations/[id].jsx
@@ -17,8 +17,8 @@ export default function ImplementationsPage({ implementationsPageData }) {
             {implementationsPageData.title}
             {implementationsPageData.id}
         </Head>
-            <div className='d-flex row justify-content-start'>
-                <div className='d-flex col-9'>
+            <div className='d-flex row justify-content-center'>
+                <div className='d-flex col-12'>
                     <div dangerouslySetInnerHTML={{ __html: implementationsPageData.contentHtml}} />
                 </div>
             </div>
diff --git a/pages/merkle-proofs.jsx b/pages/merkle-proofs.jsx
index a85907f9..de8c67fc 100644
--- a/pages/merkle-proofs.jsx
+++ b/pages/merkle-proofs.jsx
@@ -48,8 +48,8 @@ export default function Specs({ MerkleProofsData }) {
     return (
     <div className='row '>
       <div className='col'>
-        <div className='row'>
-          <div className='col-8'>
+        <div className='row justify-content-center'>
+          <div className='col-12 col-sm-10'>
             <div className='row'>
               <h1>Merkle Proofs</h1>
               <div><p>from Ethereum 2.0</p></div>
@@ -62,7 +62,7 @@ export default function Specs({ MerkleProofsData }) {
           </div>
 
         <div className={`row justify-content-end fixed-top overflow-y-scroll ${styles.toc}`}>
-          <div className={`col-4 position-fixed ${styles.scroll}`}>         
+          <div className={`col-3 d-none d-sm-block position-fixed ${styles.scroll}`}>         
             {scrollspy}
           </div>
         </div> 
diff --git a/pages/overview/[id].jsx b/pages/overview/[id].jsx
index 1cbeb473..9ce95c18 100644
--- a/pages/overview/[id].jsx
+++ b/pages/overview/[id].jsx
@@ -31,8 +31,8 @@ export default function OverviewPage({ overviewPageData }) {
 
   return (
   <div className='container'>
-      <div className='row'>
-        <div className='col-8' dangerouslySetInnerHTML={{ __html: overviewPageData.contentHtml}} />
+      <div className='row justify-content-center'>
+        <div className='col-12 col-sm-10' dangerouslySetInnerHTML={{ __html: overviewPageData.contentHtml}} />
       </div> 
       <div className='row justify-content-between'>
           <div className='col-2'>
@@ -43,7 +43,7 @@ export default function OverviewPage({ overviewPageData }) {
           </div>
       </div>
       <div className='d-flex row justify-content-end position-fixed fixed-top'>
-        <div className='col-4'>
+        <div className='col-2'>
         <br /><br /><br /><br />
           <div className='row d-none d-sm-block'>
             <PageTOC { ...Sections.args } />
diff --git a/pages/specs.jsx b/pages/specs.jsx
index 4d8c4787..26d9370d 100644
--- a/pages/specs.jsx
+++ b/pages/specs.jsx
@@ -48,8 +48,8 @@ export default function Specs({ SpecsData }) {
     return (
       <div className='row '>
       <div className='col'>
-        <div className='row'>
-          <div className='col-8'>
+        <div className='row justify-content-center'>
+          <div className='col-12 col-sm-10'>
             <div className='row'>
               <h1>Simple Serialize Specs</h1>
               <div><p>from Ethereum 2.0</p></div>
@@ -62,7 +62,7 @@ export default function Specs({ SpecsData }) {
         </div> 
           
         <div className={`row justify-content-end fixed-top overflow-y-scroll ${styles.toc}`}>
-          <div className={`col-4 position-fixed ${styles.scroll}`}>         
+          <div className={`col-3 d-none d-sm-block position-fixed ${styles.scroll}`}>         
             {scrollspy}
           </div>
         </div> 
