diff --git a/website/src/components/Header/Header.astro b/website/src/components/Header/Header.astro
index ed89ccb4c..5f5b65569 100644
--- a/website/src/components/Header/Header.astro
+++ b/website/src/components/Header/Header.astro
@@ -14,11 +14,11 @@ const { currentPage } = Astro.props as Props;
 // const lang = getLanguageFromURL(currentPage);
 ---
 
-<nav class="flex justify-between py-2" title="Top Navigation">
+<nav class="flex justify-between py-2 items-center h-full" title="Top Navigation">
   <!--     <div class="menu-toggle">
       <SidebarToggle client:idle />
     </div> -->
-  <div class="flex overflow-visible" style="overflow:visible">
+  <div class="flex overflow-visible items-center" style="overflow:visible">
     <a href="/" class="flex items-center text-2xl space-x-2">
       <div>🌀</div>
       <h1>{CONFIG.SITE.title ?? 'Documentation'}</h1>
diff --git a/website/src/components/RightSidebar/TableOfContents.tsx b/website/src/components/RightSidebar/TableOfContents.tsx
index d9a8d4afb..3c787b529 100644
--- a/website/src/components/RightSidebar/TableOfContents.tsx
+++ b/website/src/components/RightSidebar/TableOfContents.tsx
@@ -63,19 +63,22 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
   const onLinkClick = (e: any) => {
     setCurrentID(e.target.getAttribute('href').replace('#', ''));
   };
+  const minDepth = 1;
 
   return (
     <>
       <ul ref={toc}>
         {headings
-          .filter(({ depth }) => depth > 0 && depth < 4)
+          .filter(({ depth }) => depth >= minDepth && depth < 4)
           .map((heading) => (
-            <li
-              className={`border-l-4 border-slate-900 ${['pl-4', 'pl-8', 'pl-12'][heading.depth - 1]} ${
-                currentID === heading.slug ? 'bg-slate-900' : ''
-              }`.trim()}
-            >
-              <a href={`#${heading.slug}`} onClick={onLinkClick}>
+            <li className={`w-full`}>
+              <a
+                href={`#${heading.slug}`}
+                onClick={onLinkClick}
+                className={`py-0.5 block cursor-pointer w-full border-l-4 border-gray-900 hover:bg-gray-900 ${
+                  ['pl-4', 'pl-9', 'pl-12'][heading.depth - minDepth]
+                } ${currentID === heading.slug ? 'bg-gray-900' : ''}`.trim()}
+              >
                 {unescape(heading.text)}
               </a>
             </li>
diff --git a/website/src/layouts/MainLayout.astro b/website/src/layouts/MainLayout.astro
index 250848a57..dcc617015 100644
--- a/website/src/layouts/MainLayout.astro
+++ b/website/src/layouts/MainLayout.astro
@@ -30,23 +30,23 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
     </title>
   </head>
 
-  <body class="h-screen text-gray-50 bg-gradient-to-t from-stone-800 to-gray-800">
+  <body class="h-screen text-gray-50 bg-gray-800">
     <div class="max-w-full m-auto h-full space-y-4 flex flex-col">
-      <header class="max-w-full px-4">
+      <header class="max-w-full px-4 fixed h-16 top-0 w-full z-[100]">
         <Header currentPage={currentPage} />
       </header>
-      <main class="flex space-x-4 overflow-hidden relative">
-        <aside title="Site Navigation" class="min-w-[300px] px-4">
+      <main class="relative pt-16">
+        <aside title="Site Navigation" class="fixed w-[300px] px-4">
           <LeftSidebar currentPage={currentPage} />
         </aside>
-        <div class="h-full grow overflow-auto px-2">
+        <aside class="w-2xl fixed right-0 h-full overflow-auto pr-8 pl-0 pb-16" title="Table of Contents">
+          <RightSidebar headings={headings} githubEditUrl={githubEditUrl} />
+        </aside>
+        <div class="h-full w-full top-0 pl-[300px] grow overflow-auto px-2">
           <PageContent frontmatter={frontmatter} headings={headings} githubEditUrl={githubEditUrl}>
             <slot />
           </PageContent>
         </div>
-        <aside class="w-2xl flex-none h-full overflow-auto pr-8 pl-0" title="Table of Contents">
-          <RightSidebar headings={headings} githubEditUrl={githubEditUrl} />
-        </aside>
       </main>
       <!--     <Footer path={currentFile} /> -->
     </div>
