diff --git a/apps/temp-docs/layouts/Default.tsx b/apps/temp-docs/layouts/Default.tsx
index bb716b2acfa..b08d002085b 100644
--- a/apps/temp-docs/layouts/Default.tsx
+++ b/apps/temp-docs/layouts/Default.tsx
@@ -1,16 +1,34 @@
+import { useEffect } from 'react'
 import Head from 'next/head'
 import NavBar from '../components/nav/NavBar'
+import SideBar from '../components/nav/SideBar'
 import Footer from '../components/Footer'
 
 const Layout = ({
-  children,
   meta,
+  children,
+  toc,
+  menuItems,
   currentPage,
 }: {
   meta: { title: string; description: string }
-  children: React.ReactNode
+  children: JSX.Element
+  toc?: any
+  menuItems: any
   currentPage: string
 }) => {
+  const theme = 'okaidia'
+  console.log('Layout')
+  useEffect(() => {
+    const key = localStorage.getItem('supabaseDarkMode')
+    if (!key) {
+      // Default to dark mode if no preference config
+      document.documentElement.className = 'dark'
+    } else {
+      document.documentElement.className = key === 'true' ? 'dark' : ''
+    }
+  }, [])
+
   return (
     <>
       <Head>
@@ -22,12 +40,40 @@ const Layout = ({
         <meta property="og:site_name" content={meta?.title} />
         <meta property="og:description" content={meta?.description} />
         <meta property="og:title" content={meta?.title} />
+        <link
+          rel="preload"
+          href="https://unpkg.com/prismjs@0.0.1/themes/prism-okaidia.css"
+          as="script"
+        />
+        <link href={`https://unpkg.com/prismjs@0.0.1/themes/prism-${theme}.css`} rel="stylesheet" />
       </Head>
+
       <main>
         <NavBar currentPage={currentPage} />
-        <article className="text-scale-1200 mx-4 md:mx-8 xl:mx-auto xl:max-w-7xl">
-          {children}
-        </article>
+        <div className="flex w-full flex-row">
+          <SideBar menuItems={menuItems} />
+          <div className="docs-width flex w-full grid-cols-12 justify-between p-4 pb-8">
+            <div className="w-full p-4">
+              <article className="prose dark:prose-dark dark:bg-scale-200 width-full">
+                {children}
+              </article>
+            </div>
+            {toc && (
+              <div className="prose border-scale-400 dark:bg-scale-200 thin-scrollbar table-of-contents-height w-1/4 border-l px-4">
+                <h5>On this page</h5>
+                <ul className="list-none pl-2 text-[0.8rem]">
+                  {toc.json.map((item: any, i: number) => {
+                    return (
+                      <li key={i}>
+                        <a href={`#${item.slug}`}>{item.content}</a>
+                      </li>
+                    )
+                  })}
+                </ul>
+              </div>
+            )}
+          </div>
+        </div>
         <Footer />
       </main>
     </>
diff --git a/apps/temp-docs/layouts/DocsLayout.tsx b/apps/temp-docs/layouts/DocsLayout.tsx
deleted file mode 100644
index 1b86306e9b8..00000000000
--- a/apps/temp-docs/layouts/DocsLayout.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { useEffect } from 'react'
-import Head from 'next/head'
-import NavBar from '../components/nav/NavBar'
-import SideBar from '../components/nav/SideBar'
-import Footer from '../components/Footer'
-
-const DocsLayout = ({
-  meta,
-  children,
-  toc,
-  menuItems,
-  currentPage,
-}: {
-  meta: { title: string; description: string }
-  children: JSX.Element
-  toc?: any
-  menuItems: any
-  currentPage: string
-}) => {
-  const theme = 'okaidia'
-
-  useEffect(() => {
-    const key = localStorage.getItem('supabaseDarkMode')
-    if (!key) {
-      // Default to dark mode if no preference config
-      document.documentElement.className = 'dark'
-    } else {
-      document.documentElement.className = key === 'true' ? 'dark' : ''
-    }
-  }, [])
-
-  return (
-    <>
-      <Head>
-        <title>{meta?.title} | Supabase</title>
-        <meta name="description" content={meta?.description} />
-        <meta content="width=device-width, initial-scale=1" name="viewport" />
-        <link rel="icon" href="/favicon.ico" />
-        <meta property="og:type" content="website" />
-        <meta property="og:site_name" content={meta?.title} />
-        <meta property="og:description" content={meta?.description} />
-        <meta property="og:title" content={meta?.title} />
-        <link
-          rel="preload"
-          href="https://unpkg.com/prismjs@0.0.1/themes/prism-okaidia.css"
-          as="script"
-        />
-        <link href={`https://unpkg.com/prismjs@0.0.1/themes/prism-${theme}.css`} rel="stylesheet" />
-      </Head>
-
-      <main>
-        <NavBar currentPage={currentPage} />
-        <div className="flex w-full flex-row">
-          <SideBar menuItems={menuItems} />
-          <div className="docs-width flex w-full grid-cols-12 justify-between p-4 pb-8">
-            <div className="w-full p-4">
-              <article className="prose dark:prose-dark dark:bg-scale-200 width-full">
-                {children}
-              </article>
-            </div>
-            {toc && (
-              <div className="prose border-scale-400 dark:bg-scale-200 thin-scrollbar table-of-contents-height w-1/4 border-l px-4">
-                <h5>On this page</h5>
-                <ul className="list-none pl-2 text-[0.8rem]">
-                  {toc.json.map((item: any, i: number) => {
-                    return (
-                      <li key={i}>
-                        <a href={`#${item.slug}`}>{item.content}</a>
-                      </li>
-                    )
-                  })}
-                </ul>
-              </div>
-            )}
-          </div>
-        </div>
-        <Footer />
-      </main>
-    </>
-  )
-}
-
-export default DocsLayout
diff --git a/apps/temp-docs/layouts/Guide.tsx b/apps/temp-docs/layouts/Guide.tsx
index 470809c87ac..b21b00b38dd 100644
--- a/apps/temp-docs/layouts/Guide.tsx
+++ b/apps/temp-docs/layouts/Guide.tsx
@@ -2,7 +2,7 @@ import { MDXProvider } from '@mdx-js/react'
 import { NextSeo } from 'next-seo'
 import { useRouter } from 'next/router'
 import menuItems from '~/components/nav/menu-items.json'
-import Layout from '~/layouts/DocsLayout'
+import Layout from '~/layouts/Default'
 import { getPageType } from '~/lib/helpers'
 import getComponents from '~/lib/mdx/getComponents'
 
diff --git a/apps/temp-docs/pages/index.tsx b/apps/temp-docs/pages/index.tsx
index 0b4909f831c..f2e81ba28f0 100644
--- a/apps/temp-docs/pages/index.tsx
+++ b/apps/temp-docs/pages/index.tsx
@@ -3,7 +3,7 @@ import { MDXRemote } from 'next-mdx-remote'
 import { serialize } from 'next-mdx-remote/serialize'
 import components from '~/components'
 import menuItems from '~/components/nav/menu-items.json'
-import Layout from '~/layouts/DocsLayout'
+import Layout from '~/layouts/Default'
 import { getDocsBySlug } from '../lib/docs'
 export default function Home({
   meta,