diff --git a/app/sidebar.tsx b/app/sidebar.tsx
index aca959a..f1ad266 100644
--- a/app/sidebar.tsx
+++ b/app/sidebar.tsx
@@ -6,6 +6,7 @@ import { useTheme } from "next-themes"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { useEffect, useState } from "react"
+import { Laptop, Moon, Sun } from "lucide-react"
 import {
   Sidebar,
   SidebarContent,
@@ -91,11 +92,14 @@ function ButtonThemeCycleToggle() {
       type="button"
       onClick={handleClick}
       className={cn(
-        "hover:bg-sidebar-accent/50 active:bg-sidebar-accent/50 hover:text-primary w-auto text-lg transition-all duration-150 md:text-sm"
+        "hover:bg-sidebar-accent/50 active:bg-sidebar-accent/50 hover:text-primary w-full text-lg transition-all duration-200 ease-in-out md:text-sm flex items-center gap-2"
       )}
       aria-label={`Theme: ${label}. Click to switch to ${next}`}
     >
-      {label}
+      {current === "light" && <Sun className="h-4 w-4 text-amber-500 shrink-0" />}
+      {current === "dark" && <Moon className="h-4 w-4 text-blue-400 shrink-0" />}
+      {current === "system" && <Laptop className="h-4 w-4 text-zinc-500 dark:text-zinc-400 shrink-0" />}
+      <span className="capitalize">{label}</span>
     </SidebarMenuButton>
   )
 }
@@ -130,14 +134,16 @@ export function AppSidebar() {
           <SidebarHeader className="hidden items-start px-5 pt-8 md:flex">
             <Link
               href="/"
-              className="flex items-center gap-2 pl-2 text-xl font-medium tracking-tighter"
+              className="flex items-center gap-2.5 pl-1 text-xl font-semibold tracking-tight transition-opacity hover:opacity-90"
             >
-              <PromptKitLogo className="size-6 fill-black dark:fill-white" />
-              <h1 className="leading-none">prompt-kit</h1>
+              <PromptKitLogo className="size-5.5 text-zinc-950 dark:text-zinc-50" />
+              <h1 className="bg-gradient-to-r from-zinc-900 to-zinc-600 dark:from-zinc-100 dark:to-zinc-400 bg-clip-text text-transparent font-semibold leading-none">
+                prompt-kit
+              </h1>
             </Link>
           </SidebarHeader>
           <SidebarGroup className="border-none pr-0 pl-2 md:px-5 md:pt-[3.6rem]">
-            <SidebarGroupLabel className="text-lg md:text-sm">
+            <SidebarGroupLabel className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60 px-2 mt-4 mb-1">
               Get Started
             </SidebarGroupLabel>
             <SidebarGroupContent>
@@ -150,9 +156,9 @@ export function AppSidebar() {
                       <SidebarMenuButton
                         asChild
                         className={cn(
-                          "hover:bg-sidebar-accent/50 active:bg-sidebar-accent/50 hover:text-primary w-auto text-lg transition-all duration-150 md:text-sm",
+                          "hover:bg-sidebar-accent/50 active:bg-sidebar-accent/50 hover:text-primary w-full text-lg transition-all duration-200 ease-in-out md:text-sm",
                           isActive &&
-                          "text-primary bg-sidebar-accent hover:bg-sidebar-accent font-medium"
+                          "text-primary bg-primary/[0.04] dark:bg-primary/[0.06] border-l-2 border-primary pl-2.5 rounded-r-md font-medium rounded-l-none"
                         )}
                       >
                         <Link href={item.url}>{item.title}</Link>
@@ -162,7 +168,8 @@ export function AppSidebar() {
                 })}
               </SidebarMenu>
             </SidebarGroupContent>
-            <SidebarGroupLabel className="mt-8 text-lg md:text-sm">
+
+            <SidebarGroupLabel className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60 px-2 mt-6 mb-1">
               Components
             </SidebarGroupLabel>
             <SidebarGroupContent>
@@ -176,9 +183,9 @@ export function AppSidebar() {
                       <SidebarMenuButton
                         asChild
                         className={cn(
-                          "hover:bg-sidebar-accent/50 active:bg-sidebar-accent/50 hover:text-primary w-auto text-lg transition-all duration-150 md:text-sm",
+                          "hover:bg-sidebar-accent/50 active:bg-sidebar-accent/50 hover:text-primary w-full text-lg transition-all duration-200 ease-in-out md:text-sm",
                           isActive &&
-                          "text-primary bg-sidebar-accent hover:bg-sidebar-accent font-medium"
+                          "text-primary bg-primary/[0.04] dark:bg-primary/[0.06] border-l-2 border-primary pl-2.5 rounded-r-md font-medium rounded-l-none"
                         )}
                       >
                         <Link
@@ -190,7 +197,7 @@ export function AppSidebar() {
                         >
                           <span>{item.title}</span>
                           {showNewBadge && (
-                            <span className="text-primary text-xs leading-none">
+                            <span className="bg-primary/10 dark:bg-primary/20 text-primary text-[10px] font-medium px-1.5 py-0.5 rounded-full scale-90 leading-none">
                               new
                             </span>
                           )}
@@ -201,38 +208,47 @@ export function AppSidebar() {
                 })}
               </SidebarMenu>
             </SidebarGroupContent>
+
+            <SidebarGroupLabel className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60 px-2 mt-6 mb-1">
+              Advanced
+            </SidebarGroupLabel>
             <SidebarGroupContent>
-              <SidebarGroupLabel className="mt-8 flex text-lg md:text-sm">
-                <SidebarMenuButton
-                  asChild
-                  className={cn(
-                    "hover:bg-sidebar-accent/50 active:bg-sidebar-accent/50 hover:text-primary w-auto text-lg transition-all duration-150 md:text-sm",
-                    pathname.includes("/blocks") &&
-                    "text-primary bg-sidebar-accent hover:bg-sidebar-accent font-medium"
-                  )}
-                >
-                  <Link href="/blocks" className="-m-2">
-                    Blocks
-                  </Link>
-                </SidebarMenuButton>
-              </SidebarGroupLabel>
-              <SidebarGroupLabel className="mt-8 flex text-lg md:text-sm">
-                <SidebarMenuButton
-                  asChild
-                  className={cn(
-                    "hover:bg-sidebar-accent/50 active:bg-sidebar-accent/50 hover:text-primary w-auto text-lg transition-all duration-150 md:text-sm",
-                    pathname.includes("/primitives") &&
-                    "text-primary bg-sidebar-accent hover:bg-sidebar-accent font-medium"
-                  )}
-                >
-                  <Link href="/primitives" className="relative -m-2 gap-2">
-                    Primitives
-                    <div className="text-primary text-xs leading-none">new</div>
-                  </Link>
-                </SidebarMenuButton>
-              </SidebarGroupLabel>
+              <SidebarMenu>
+                <SidebarMenuItem className="flex">
+                  <SidebarMenuButton
+                    asChild
+                    className={cn(
+                      "hover:bg-sidebar-accent/50 active:bg-sidebar-accent/50 hover:text-primary w-full text-lg transition-all duration-200 ease-in-out md:text-sm",
+                      pathname.includes("/blocks") &&
+                      "text-primary bg-primary/[0.04] dark:bg-primary/[0.06] border-l-2 border-primary pl-2.5 rounded-r-md font-medium rounded-l-none"
+                    )}
+                  >
+                    <Link href="/blocks">
+                      Blocks
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+                <SidebarMenuItem className="flex">
+                  <SidebarMenuButton
+                    asChild
+                    className={cn(
+                      "hover:bg-sidebar-accent/50 active:bg-sidebar-accent/50 hover:text-primary w-full text-lg transition-all duration-200 ease-in-out md:text-sm",
+                      pathname.includes("/primitives") &&
+                      "text-primary bg-primary/[0.04] dark:bg-primary/[0.06] border-l-2 border-primary pl-2.5 rounded-r-md font-medium rounded-l-none"
+                    )}
+                  >
+                    <Link href="/primitives" className="flex items-center gap-2">
+                      <span>Primitives</span>
+                      <span className="bg-primary/10 dark:bg-primary/20 text-primary text-[10px] font-medium px-1.5 py-0.5 rounded-full scale-90 leading-none">
+                        new
+                      </span>
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
             </SidebarGroupContent>
-            <SidebarGroupLabel className="mt-8 text-lg md:text-sm">
+
+            <SidebarGroupLabel className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60 px-2 mt-6 mb-1">
               Integrations
             </SidebarGroupLabel>
             <SidebarGroupContent>
@@ -245,9 +261,9 @@ export function AppSidebar() {
                       <SidebarMenuButton
                         asChild
                         className={cn(
-                          "hover:bg-sidebar-accent/50 active:bg-sidebar-accent/50 hover:text-primary w-auto text-lg transition-all duration-150 md:text-sm",
+                          "hover:bg-sidebar-accent/50 active:bg-sidebar-accent/50 hover:text-primary w-full text-lg transition-all duration-200 ease-in-out md:text-sm",
                           isActive &&
-                          "text-primary bg-sidebar-accent hover:bg-sidebar-accent font-medium"
+                          "text-primary bg-primary/[0.04] dark:bg-primary/[0.06] border-l-2 border-primary pl-2.5 rounded-r-md font-medium rounded-l-none"
                         )}
                       >
                         <Link href={item.url}>{item.title}</Link>
@@ -257,18 +273,22 @@ export function AppSidebar() {
                 })}
               </SidebarMenu>
             </SidebarGroupContent>
-            <SidebarGroupLabel className="mt-8 flex text-lg md:text-sm">
+
+            <SidebarGroupLabel className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60 px-2 mt-6 mb-1">
               LLMs
             </SidebarGroupLabel>
             <SidebarGroupContent>
               <SidebarMenu>
                 {llms.map((item) => {
+                  const isActive = currentPath === item.url
                   return (
-                    <SidebarMenuItem key={item.title}>
+                    <SidebarMenuItem key={item.title} className="flex">
                       <SidebarMenuButton
                         asChild
                         className={cn(
-                          "hover:bg-sidebar-accent/50 active:bg-sidebar-accent/50 hover:text-primary w-auto text-lg transition-all duration-150 md:text-sm"
+                          "hover:bg-sidebar-accent/50 active:bg-sidebar-accent/50 hover:text-primary w-full text-lg transition-all duration-200 ease-in-out md:text-sm",
+                          isActive &&
+                          "text-primary bg-primary/[0.04] dark:bg-primary/[0.06] border-l-2 border-primary pl-2.5 rounded-r-md font-medium rounded-l-none"
                         )}
                       >
                         <Link href={item.url}>{item.title}</Link>
@@ -278,32 +298,41 @@ export function AppSidebar() {
                 })}
               </SidebarMenu>
             </SidebarGroupContent>
-            <SidebarGroupLabel className="mt-8 flex text-lg md:text-sm">
-              <SidebarMenuButton
-                asChild
-                className={cn(
-                  "hover:bg-sidebar-accent/50 active:bg-sidebar-accent/50 hover:text-primary w-auto text-lg transition-all duration-150 md:text-sm",
-                  pathname.includes("/docs/showcase") &&
-                  "text-primary bg-sidebar-accent hover:bg-sidebar-accent font-medium"
-                )}
-              >
-                <Link href="/docs/showcase" className="-m-2">
-                  Showcase
-                </Link>
-              </SidebarMenuButton>
+
+            <SidebarGroupLabel className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60 px-2 mt-6 mb-1">
+              Gallery
             </SidebarGroupLabel>
-            <SidebarGroupLabel className="mt-8 flex text-lg md:text-sm">
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuItem className="flex">
+                  <SidebarMenuButton
+                    asChild
+                    className={cn(
+                      "hover:bg-sidebar-accent/50 active:bg-sidebar-accent/50 hover:text-primary w-full text-lg transition-all duration-200 ease-in-out md:text-sm",
+                      pathname.includes("/docs/showcase") &&
+                      "text-primary bg-primary/[0.04] dark:bg-primary/[0.06] border-l-2 border-primary pl-2.5 rounded-r-md font-medium rounded-l-none"
+                    )}
+                  >
+                    <Link href="/docs/showcase">
+                      Showcase
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroupContent>
+
+            <SidebarGroupLabel className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60 px-2 mt-6 mb-1">
               Social
             </SidebarGroupLabel>
             <SidebarGroupContent>
               <SidebarMenu>
                 {socialMenuItems.map((item) => {
                   return (
-                    <SidebarMenuItem key={item.title}>
+                    <SidebarMenuItem key={item.title} className="flex">
                       <SidebarMenuButton
                         asChild
                         className={cn(
-                          "hover:bg-sidebar-accent/50 active:bg-sidebar-accent/50 hover:text-primary w-auto text-lg transition-all duration-150 md:text-sm"
+                          "hover:bg-sidebar-accent/50 active:bg-sidebar-accent/50 hover:text-primary w-full text-lg transition-all duration-200 ease-in-out md:text-sm"
                         )}
                       >
                         <Link
@@ -319,7 +348,8 @@ export function AppSidebar() {
                 })}
               </SidebarMenu>
             </SidebarGroupContent>
-            <SidebarGroupLabel className="mt-8 flex text-lg md:text-sm">
+
+            <SidebarGroupLabel className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60 px-2 mt-6 mb-1">
               Theme
             </SidebarGroupLabel>
             <SidebarGroupContent className="pb-12">