diff --git a/app/globals.css b/app/globals.css
index 4aa6ec3..a0b2d38 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -158,12 +158,12 @@
 .docs-sidebar-scroll {
   scrollbar-gutter: stable;
   scrollbar-width: thin;
-  scrollbar-color: color-mix(in oklab, var(--foreground) 24%, transparent)
+  scrollbar-color: color-mix(in oklab, var(--sidebar-foreground) 20%, transparent)
     transparent;
 }
 
 .docs-sidebar-scroll::-webkit-scrollbar {
-  width: 0.5rem;
+  width: 0.375rem;
 }
 
 .docs-sidebar-scroll::-webkit-scrollbar-track {
@@ -171,13 +171,13 @@
 }
 
 .docs-sidebar-scroll::-webkit-scrollbar-thumb {
-  border: 2px solid var(--background);
+  border: 2px solid var(--sidebar);
   border-radius: 999px;
-  background: color-mix(in oklab, var(--foreground) 18%, transparent);
+  background: color-mix(in oklab, var(--sidebar-foreground) 16%, transparent);
 }
 
 .docs-sidebar-scroll::-webkit-scrollbar-thumb:hover {
-  background: color-mix(in oklab, var(--foreground) 30%, transparent);
+  background: color-mix(in oklab, var(--sidebar-foreground) 28%, transparent);
 }
 
 .docs-content [data-rehype-pretty-code-figure] {
diff --git a/components/docs-shell.tsx b/components/docs-shell.tsx
index e3582d5..1c2e83e 100644
--- a/components/docs-shell.tsx
+++ b/components/docs-shell.tsx
@@ -26,22 +26,22 @@ export function DocsShell({
         brand={
           <Link
             href="/"
-            className="flex items-center justify-center gap-2"
+            className="flex items-center gap-2 text-sidebar-foreground transition-opacity hover:opacity-80"
           >
             <Image
               src="/logo.png"
               alt="EvilButtons"
               width={288}
               height={192}
-              className="h-auto w-8 sm:w-10"
+              className="h-auto w-7"
             />
-            <h1 className="text-lg font-doto font-black tracking-tighter">
+            <span className="font-doto text-sm font-black tracking-tighter">
               EvilButtons
-            </h1>
+            </span>
           </Link>
         }
       />
-      <main className="min-w-0 flex-1 m-1 border border-border overflow-y-auto">{children}</main>
+      <main className="min-w-0 flex-1 overflow-y-auto">{children}</main>
     </div>
   );
 }
diff --git a/components/docs-sidebar.tsx b/components/docs-sidebar.tsx
index 79fbd75..c0b7c4e 100644
--- a/components/docs-sidebar.tsx
+++ b/components/docs-sidebar.tsx
@@ -42,30 +42,32 @@ function DocsNavGroup({
   }
 
   return (
-    <div className="flex flex-col gap-1 border-t border-border pt-4">
-      <p className="px-2 text-xs uppercase text-muted-foreground">{title}</p>
-      <nav className="flex flex-col gap-0.5">
-        {pages.map((page) => (
-          <Link
-            key={page.url}
-            href={page.url}
-            aria-current={
-              isPageActive(pathname, page.url) ||
-              (pathname === "/docs" && page.url === defaultPageUrl)
-                ? "page"
-                : undefined
-            }
-            className={cn(
-              "block px-2 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              isPageActive(pathname, page.url) ||
-                (pathname === "/docs" && page.url === defaultPageUrl)
-                ? "bg-muted text-foreground"
-                : "text-muted-foreground hover:text-foreground",
-            )}
-          >
-            {page.title}
-          </Link>
-        ))}
+    <div className="flex flex-col gap-1.5">
+      <p className="px-2.5 text-[11px] font-medium tracking-wide text-sidebar-foreground/50">
+        {title}
+      </p>
+      <nav className="flex flex-col gap-px">
+        {pages.map((page) => {
+          const active =
+            isPageActive(pathname, page.url) ||
+            (pathname === "/docs" && page.url === defaultPageUrl);
+
+          return (
+            <Link
+              key={page.url}
+              href={page.url}
+              aria-current={active ? "page" : undefined}
+              className={cn(
+                "rounded-md px-2.5 py-1.5 text-[13px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+                active
+                  ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
+                  : "text-sidebar-foreground/65 hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground",
+              )}
+            >
+              {page.title}
+            </Link>
+          );
+        })}
       </nav>
     </div>
   );
@@ -91,48 +93,48 @@ export function DocsSidebar({
     <>
       <aside
         className={cn(
-          "docs-sidebar-scroll fixed inset-y-0 left-0 z-50 w-64 shrink-0 overflow-y-auto bg-background p-3 transition-transform duration-200 ease-out md:static md:z-auto md:h-full md:w-56 md:translate-x-0 border-y-0 md:ml-1 md:border md:border-border",
+          "docs-sidebar-scroll fixed inset-y-0 left-0 z-50 w-64 shrink-0 overflow-y-auto bg-sidebar p-4 text-sidebar-foreground transition-transform duration-200 ease-out md:static md:z-auto md:h-full md:w-52 md:translate-x-0 md:border-r md:border-sidebar-border",
           open ? "translate-x-0" : "-translate-x-full md:translate-x-0",
         )}
       >
-        <div className="flex flex-col gap-4">
-          <div className="flex items-center justify-between px-2 pt-1">
+        <div className="flex flex-col gap-6">
+          <div className="flex items-center justify-between px-0.5">
             {brand}
             <button
               type="button"
-              className="inline-flex size-8 items-center justify-center border border-border bg-background text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:hidden"
+              className="inline-flex size-7 items-center justify-center rounded-md text-sidebar-foreground/60 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring md:hidden"
               onClick={() => setOpen(false)}
               aria-label="Close menu"
             >
               <XIcon size={16} />
             </button>
           </div>
-          <div className="flex items-center gap-2 px-1">
+          <div className="flex items-center gap-1 px-0.5">
             <a
               href="https://github.com/radiumcoders/evil-buttons"
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex size-8 items-center justify-center text-muted-foreground transition-colors hover:text-foreground"
+              className="inline-flex size-7 items-center justify-center rounded-md text-sidebar-foreground/50 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
               aria-label="GitHub"
             >
-              <GithubLogoIcon size={16} />
+              <GithubLogoIcon size={15} />
             </a>
             <a
               href="https://x.com/radiumcoders"
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex size-8 items-center justify-center text-muted-foreground transition-colors hover:text-foreground"
+              className="inline-flex size-7 items-center justify-center rounded-md text-sidebar-foreground/50 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
               aria-label="X (Twitter)"
             >
-              <XLogoIcon size={16} />
+              <XLogoIcon size={15} />
             </a>
             <a
               href="https://github.com/sponsors/radiumcoders"
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium text-pink-600 transition-colors hover:text-foreground dark:text-pink-400"
+              className="ml-auto inline-flex items-center gap-1 rounded-md px-2 py-1 text-[11px] font-medium text-sidebar-foreground/50 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
             >
-              <HeartIcon size={12} />
+              <HeartIcon size={11} weight="fill" className="text-rose-500 dark:text-rose-400" />
               Sponsor
             </a>
           </div>
@@ -146,7 +148,7 @@ export function DocsSidebar({
       {open ? (
         <button
           type="button"
-          className="fixed inset-0 z-40 bg-black/30 md:hidden"
+          className="fixed inset-0 z-40 bg-foreground/15 backdrop-blur-[2px] md:hidden dark:bg-foreground/25"
           onClick={() => setOpen(false)}
           aria-label="Close sidebar"
         />
@@ -154,7 +156,7 @@ export function DocsSidebar({
       <div className={cn("fixed top-4 left-4 z-50 md:hidden", open && "hidden")}>
         <button
           type="button"
-          className="inline-flex size-8 items-center justify-center border border-border bg-background text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="inline-flex size-8 items-center justify-center rounded-md bg-sidebar text-sidebar-foreground/70 shadow-sm ring-1 ring-sidebar-border transition-colors hover:text-sidebar-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring"
           onClick={() => setOpen((value) => !value)}
           aria-expanded={open}
           aria-label="Open menu"