diff --git a/apps/docs/layouts/guides/index.tsx b/apps/docs/layouts/guides/index.tsx
index b0af7dfd509..4b1fd8046dd 100644
--- a/apps/docs/layouts/guides/index.tsx
+++ b/apps/docs/layouts/guides/index.tsx
@@ -107,50 +107,7 @@ const Layout: FC<Props> = (props) => {
         }}
       />
       <LayoutMainContent className="pb-0">
-      <div className={['grid grid-cols-12 relative gap-4'].join(' ')}>
-        <div
-          className={[
-            'relative',
-            !props.hideToc ? 'col-span-12 md:col-span-9' : 'col-span-12',
-            'transition-all ease-out',
-            'duration-100',
-          ].join(' ')}
-        >
-          {props.meta.breadcrumb && (
-            <p className="text-brand-900 tracking-wider mb-3">{props.meta.breadcrumb}</p>
-          )}
-          <article
-            ref={articleRef}
-            className={`${
-              props.meta?.hide_table_of_contents || !hasTableOfContents ? '' : ''
-            } prose dark:prose-dark max-w-none`}
-          >
-            <h1 className="mb-0">{props.meta.title}</h1>
-            {props.meta.subtitle && (
-              <h2 className="mt-3 text-xl text-scale-1100">{props.meta.subtitle}</h2>
-            )}
-            <div className="w-full h-[1px] bg-scale-500 my-8"></div>
-            <MDXProvider components={components}>{props.children}</MDXProvider>
-
-            {EDIT_BUTTON_EXCLUDE_LIST.includes(router.route) ? (
-              <></>
-            ) : (
-              <div className="mt-16 not-prose">
-                <div>
-                  <Link
-                    href={`https://github.com/supabase/supabase/edit/master/apps/docs/pages${router.asPath}.mdx`}
-                    passHref
-                  >
-                    <a className="text-sm transition flex items-center gap-1 text-scale-1000 hover:text-scale-1200">
-                      Edit this page on GitHub <IconExternalLink size={14} strokeWidth={1.5} />
-                    </a>
-                  </Link>
-                </div>
-              </div>
-            )}
-          </article>
-        </div>
-        {!props.hideToc && hasTableOfContents && !props.meta?.hide_table_of_contents && (
+        <div className={['grid grid-cols-12 relative gap-4'].join(' ')}>
           <div
             className={[
               'relative',
@@ -172,7 +129,7 @@ const Layout: FC<Props> = (props) => {
               {props.meta.subtitle && (
                 <h2 className="mt-3 text-xl text-scale-1100">{props.meta.subtitle}</h2>
               )}
-              <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-800 to-brand-900 my-8"></div>
+              <div className="w-full h-[1px] bg-scale-500 my-8"></div>
               <MDXProvider components={components}>{props.children}</MDXProvider>
 
               {EDIT_BUTTON_EXCLUDE_LIST.includes(router.route) ? (
@@ -196,19 +153,45 @@ const Layout: FC<Props> = (props) => {
           {!props.hideToc && hasTableOfContents && !props.meta?.hide_table_of_contents && (
             <div
               className={[
-                'col-span-3',
-                'border-scale-400 dark:bg-scale-200 table-of-contents-height',
-                'thin-scrollbar overflow-y-auto sticky hidden md:block md:col-span-3 px-2',
+                'relative',
+                !props.hideToc ? 'col-span-12 md:col-span-9' : 'col-span-12',
                 'transition-all ease-out',
                 'duration-100',
               ].join(' ')}
             >
-              <div className="border-l">
-                <span className="block font-mono text-xs uppercase text-scale-1200 px-5 mb-6">
-                  On this page
-                </span>
-                <GuidesTableOfContents list={tocList} />
-              </div>
+              {props.meta.breadcrumb && (
+                <p className="text-brand-900 tracking-wider mb-3">{props.meta.breadcrumb}</p>
+              )}
+              <article
+                ref={articleRef}
+                className={`${
+                  props.meta?.hide_table_of_contents || !hasTableOfContents ? '' : ''
+                } prose dark:prose-dark max-w-none`}
+              >
+                <h1 className="mb-0">{props.meta.title}</h1>
+                {props.meta.subtitle && (
+                  <h2 className="mt-3 text-xl text-scale-1100">{props.meta.subtitle}</h2>
+                )}
+                <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-800 to-brand-900 my-8"></div>
+                <MDXProvider components={components}>{props.children}</MDXProvider>
+
+                {EDIT_BUTTON_EXCLUDE_LIST.includes(router.route) ? (
+                  <></>
+                ) : (
+                  <div className="mt-16 not-prose">
+                    <div>
+                      <Link
+                        href={`https://github.com/supabase/supabase/edit/master/apps/docs/pages${router.asPath}.mdx`}
+                        passHref
+                      >
+                        <a className="text-sm transition flex items-center gap-1 text-scale-1000 hover:text-scale-1200">
+                          Edit this page on GitHub <IconExternalLink size={14} strokeWidth={1.5} />
+                        </a>
+                      </Link>
+                    </div>
+                  </div>
+                )}
+              </article>
             </div>
           )}
         </div>