diff --git a/src/components/Header.astro b/src/components/Header.astro
index e09ba42..24942c4 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,7 +1,7 @@
 ---
 import { ThemeSelect } from "@components/hooks/ThemeSwitch";
 import { getTypeData } from "@config/io/generateTypeData";
-import Nav from "@components/navigation/sidebars/nav/index.astro";
+import Nav from "@components/navigation/sidebars/Nav.astro";
 import TOC from "@components/navigation/sidebars/TOC.astro";
 import type { TypeTOC } from "./navigation/sidebars/types";
 import Search from "./navigation/Search.astro";
diff --git a/src/components/navigation/sidebars/nav/NavCollapsible.astro b/src/components/NavCollapsible.astro
similarity index 90%
rename from src/components/navigation/sidebars/nav/NavCollapsible.astro
rename to src/components/NavCollapsible.astro
index aa45d63..cc71c89 100644
--- a/src/components/navigation/sidebars/nav/NavCollapsible.astro
+++ b/src/components/NavCollapsible.astro
@@ -1,5 +1,5 @@
 ---
-import Accordion from "@components/Accordion.astro";
+import Accordion from "./Accordion.astro";
 import navMarker from "@icons/nav-marker.svg?raw";
 
 interface Props {
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
index 6be7fb3..d5a6c29 100644
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -94,6 +94,53 @@ export const MenuToX: VoidComponent<{
   );
 };
 
+export const ShevronSmallDown: VoidComponent<{
+  class?: string;
+}> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      class={props.class}
+    >
+      <title>Open</title>
+      <g transform="rotate(-90 12 12)">
+        <path
+          stroke="currentColor"
+          stroke-dasharray="8"
+          stroke-dashoffset="0"
+          stroke-linecap="round"
+          stroke-width="2"
+          d="M9 12L14 7M9 12L14 17"
+          fill="currentColor"
+        ></path>
+      </g>
+    </svg>
+  );
+};
+
+export const CaretCircleRight: VoidComponent<{
+  class?: string;
+}> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+      class={props.class}
+    >
+      <title>Open</title>
+      <path
+        fill="currentColor"
+        d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m29.66-93.66a8 8 0 0 1 0 11.32l-40 40a8 8 0 0 1-11.32-11.32L140.69 128l-34.35-34.34a8 8 0 0 1 11.32-11.32Z"
+      />
+    </svg>
+  );
+};
+
 export const Clipboard: VoidComponent<{
   class?: string;
 }> = props => {
diff --git a/src/components/navigation/sidebars/nav/index.astro b/src/components/navigation/sidebars/Nav.astro
similarity index 85%
rename from src/components/navigation/sidebars/nav/index.astro
rename to src/components/navigation/sidebars/Nav.astro
index 8dd5d51..9001700 100644
--- a/src/components/navigation/sidebars/nav/index.astro
+++ b/src/components/navigation/sidebars/Nav.astro
@@ -1,6 +1,6 @@
 ---
-import SidebarWrapper from "./SidebarWrapper.tsx";
-import RootNav from "./RootNav.astro";
+import SidebarWrapper from "./nav/SidebarWrapper.tsx";
+import RootNav from "./nav/RootNav.astro";
 
 const url = Astro.url.pathname.split("/");
 const currentRoute = url[2];
diff --git a/src/components/navigation/sidebars/nav/Tree.astro b/src/components/navigation/sidebars/nav/Tree.astro
index 35c4135..d3cb288 100644
--- a/src/components/navigation/sidebars/nav/Tree.astro
+++ b/src/components/navigation/sidebars/nav/Tree.astro
@@ -1,5 +1,5 @@
 ---
-import NavCollapsible from "./NavCollapsible.astro";
+import NavCollapsible from "@components/NavCollapsible.astro";
 import Self from "./Tree.astro";
 import Link from "./Link.astro";
 
diff --git a/src/layouts/DocsLayout.astro b/src/layouts/DocsLayout.astro
index d35c255..4f33454 100644
--- a/src/layouts/DocsLayout.astro
+++ b/src/layouts/DocsLayout.astro
@@ -6,7 +6,7 @@ import CreateCopyButtons from "@components/hooks/CreateCopyButtons.astro";
 import PreTheme from "@config/PreTheme.astro";
 import Header from "@components/Header.astro";
 import Head from "@config/Head.astro";
-import Nav from "@components/navigation/sidebars/nav/index.astro";
+import Nav from "@components/navigation/sidebars/Nav.astro";
 import type { ConfigHeading } from "@src/components/navigation/sidebars/types";
 import Footer from "@src/components/Footer.astro";
 
diff --git a/src/pages/docs/types/[type]/index.astro b/src/pages/docs/types/[type]/index.astro
index ff3480c..cdf191c 100644
--- a/src/pages/docs/types/[type]/index.astro
+++ b/src/pages/docs/types/[type]/index.astro
@@ -31,7 +31,7 @@ const details = route.data.details
 ---
 
 <DocsLayout
-  title={route.type + " Module Types"}
+  title={route.type + " Type Documentation"}
   description="Quickshell Type Documentation"
 >
   <div class="docs-content">
diff --git a/src/pages/docs/types/index.astro b/src/pages/docs/types/index.astro
index e72f7d4..cda2394 100644
--- a/src/pages/docs/types/index.astro
+++ b/src/pages/docs/types/index.astro
@@ -6,26 +6,20 @@ const routes = await getTypeData();
 
 const modules = [...new Set(routes.map(route => route.type))];
 ---
-<DocsLayout title="Quickshell Module Listing" description="Quickshell Type Documentation">
-  <div class="docs-content">
-    <hr/>
-    <h2>Module Listing</h2>
-    <section>
-      <span>All modules included with Quickshell</span>
-      <div class="root-nav" data-pagefind-ignore>
-        {modules.map(moduleEntry => {
-          const indexData = routes.filter(route => route.name === "index")
-          const indexSingled = indexData.filter(indexEntry => indexEntry.type === moduleEntry)[0]
-          const description = indexSingled.data.description
-          return (
-          <div class="root-nav-entry">
-            <a class="root-nav-link" href={`/docs/types/${moduleEntry}`}>
-              {moduleEntry}
-            </a>
-            <span class="root-nav-desc">{description}</span>
-          </div>)
-        })}
-      </div>
-    </section>
+<DocsLayout title="Quickshell Type Definitions" description="Quickshell Type Documentation">
+  <h2>Type Definitions</h2>
+  <div class="root-nav">
+    {modules.map(moduleEntry => {
+      const indexData = routes.filter(route => route.name === "index")
+      const indexSingled = indexData.filter(indexEntry => indexEntry.type === moduleEntry)[0]
+      const description = indexSingled.data.description
+      return (
+      <div class="root-nav-entry">
+        <a class="root-nav-link" href={`/docs/types/${moduleEntry}`}>
+          {moduleEntry}
+        </a>
+        <span class="root-nav-desc">{description}</span>
+      </div>)
+    })}
   </div>
 </DocsLayout>
diff --git a/src/styles/docs/docs-types.css b/src/styles/docs/docs-types.css
index 00c9984..8be9bac 100644
--- a/src/styles/docs/docs-types.css
+++ b/src/styles/docs/docs-types.css
@@ -19,6 +19,29 @@
     &:not(:last-child) {
       border-bottom: 1px solid hsla(var(--blue) 10 15 / 0.6);
     }
+
+    & .root-nav-link {
+      font-size: 1.137rem;
+      max-height: 2rem;
+      position: relative;
+      text-decoration: none;
+      text-align: center;
+
+      &::before {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        background: linear-gradient(
+          90deg,
+          transparent 25%,
+          hsla(var(--accent-500) / 0.88) 50%,
+          transparent 75%
+        );
+      }
+    }
   }
 }
 
@@ -330,6 +353,27 @@ html.dark .typevariants {
       display: grid;
       grid-template-columns: 0.60fr 1.40fr;
 
+      & .root-nav-link {
+        justify-self: start;
+        height: max-content;
+
+        &::before {
+          width: 0;
+          background: linear-gradient(
+            to right,
+            hsla(var(--accent-400) / 0.5) var(--percent),
+            hsla(var(--accent-400) / 0) 100%
+          );
+          animation: percentToZero 250ms ease-in-out forwards;
+          transition: width 0.25s ease-in-out;
+        }
+
+        &:hover::before {
+          animation: percentToFifty 250ms ease-in-out forwards;
+          width: 100%;
+        }
+      }
+
       & .root-nav-desc {
         padding-left: 1rem;
         border-left: 1px solid hsl(var(--blue) 10 15 / 0.6);
diff --git a/src/styles/docs/nav/nav-tree.css b/src/styles/docs/nav/nav-tree.css
index 4a2f341..67a35b4 100644
--- a/src/styles/docs/nav/nav-tree.css
+++ b/src/styles/docs/nav/nav-tree.css
@@ -28,10 +28,6 @@
   &.nav-current {
     color: hsl(var(--nav-selected-text));
     background-color: hsl(var(--nav-selected-bkg));
-
-    &:hover {
-      background-color: hsl(var(--nav-selected-hovered-bkg));
-    }
   }
 }
 
@@ -83,16 +79,12 @@
   }
 
   & .accordion-container > div {
-    padding-left: 1.3em;
+    padding-left: 1.2em;
 
     & p:first-child {
       padding-top: 0;
       margin-top: 0;
     }
-
-    & :last-child {
-      margin-bottom: 0rem;
-    }
   }
 }