diff --git a/apps/web/public/marketing/.gitkeep b/apps/web/public/marketing/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/apps/web/public/marketing/journl-interface.png b/apps/web/public/marketing/journl-interface.png
deleted file mode 100644
index 965983c..0000000
Binary files a/apps/web/public/marketing/journl-interface.png and /dev/null differ
diff --git a/apps/web/src/app/(app)/@appSidebar/_components/app-sidebar-devtools.tsx b/apps/web/src/app/(app)/@appSidebar/_components/app-sidebar-devtools.tsx
index 4610041..80ce0a0 100644
--- a/apps/web/src/app/(app)/@appSidebar/_components/app-sidebar-devtools.tsx
+++ b/apps/web/src/app/(app)/@appSidebar/_components/app-sidebar-devtools.tsx
@@ -19,7 +19,12 @@ function ReactQueryDevtoolsDialog() {
       </DialogTrigger>
       <DialogContent className="flex h-full w-full max-w-screen-md! items-center justify-center border-none bg-transparent px-0 py-10">
         <ReactQueryDevtoolsPanel
-          style={{ borderRadius: "1rem", height: "100%", width: "100%" }}
+          style={{
+            backgroundColor: "transparent",
+            borderRadius: "1rem",
+            height: "100%",
+            width: "100%",
+          }}
         />
       </DialogContent>
     </Dialog>
diff --git a/apps/web/src/app/(app)/@appSidebar/_components/app-sidebar-pages.tsx b/apps/web/src/app/(app)/@appSidebar/_components/app-sidebar-pages.tsx
index 5a70226..6ab7854 100644
--- a/apps/web/src/app/(app)/@appSidebar/_components/app-sidebar-pages.tsx
+++ b/apps/web/src/app/(app)/@appSidebar/_components/app-sidebar-pages.tsx
@@ -84,7 +84,7 @@ export const AppSidebarPages = ({
 
       <CollapsibleContent className="flex h-full min-h-0 flex-col">
         <SidebarMenuSub className="mx-0 mr-0 flex-1 gap-0 overflow-scroll border-none px-0">
-          <CreatePageButton className="ml-3.5 border-sidebar-border border-l ps-2.5 pb-2" />
+          <CreatePageButton className="ml-3.5 border-sidebar-border border-l py-2 ps-2.5" />
           <Virtuoso
             className="h-full w-full"
             data={pages}
diff --git a/apps/web/src/app/(app)/@appSidebar/_components/create-page-button.tsx b/apps/web/src/app/(app)/@appSidebar/_components/create-page-button.tsx
index 74c607a..d0de595 100644
--- a/apps/web/src/app/(app)/@appSidebar/_components/create-page-button.tsx
+++ b/apps/web/src/app/(app)/@appSidebar/_components/create-page-button.tsx
@@ -81,17 +81,15 @@ export function CreatePageButton({ className }: CreatePageButtonProps) {
   return (
     <SidebarMenuSubItem className={className}>
       <SidebarMenuSubButton asChild>
-        <div className="border-2 border-sidebar-border border-dashed">
-          <Button
-            variant="ghost"
-            className="w-full flex-row justify-start"
-            onClick={handleCreatePage}
-            disabled={showLoading}
-          >
-            <Plus />
-            {showLoading ? "Creating..." : "New page"}
-          </Button>
-        </div>
+        <Button
+          variant="ghost"
+          className="w-full flex-row items-center justify-center border-2 border-sidebar-border border-dashed px-0!"
+          onClick={handleCreatePage}
+          disabled={showLoading}
+        >
+          <Plus className="-ms-4 size-4" />
+          <span>{showLoading ? "Creating..." : "New page"}</span>
+        </Button>
       </SidebarMenuSubButton>
     </SidebarMenuSubItem>
   );
diff --git a/apps/web/src/app/(app)/@chatSidebar/_components/chat-sidebar-trigger.tsx b/apps/web/src/app/(app)/@chatSidebar/_components/chat-sidebar-trigger.tsx
index a2d3506..279275a 100644
--- a/apps/web/src/app/(app)/@chatSidebar/_components/chat-sidebar-trigger.tsx
+++ b/apps/web/src/app/(app)/@chatSidebar/_components/chat-sidebar-trigger.tsx
@@ -27,7 +27,7 @@ export default function ChatSidebarTrigger() {
           <span className="sr-only">Toggle Chat Sidebar</span>
         </Button>
       </TooltipTrigger>
-      <TooltipContent side="top" align="center">
+      <TooltipContent className="font-bold" side="top" align="center">
         Open Journl assistant
       </TooltipContent>
     </Tooltip>
diff --git a/apps/web/src/app/(app)/globals.css b/apps/web/src/app/(app)/globals.css
index e8ab8a1..4f55045 100644
--- a/apps/web/src/app/(app)/globals.css
+++ b/apps/web/src/app/(app)/globals.css
@@ -46,9 +46,12 @@ The rest of the components are set by the Tailwind CSS classes, or by our editor
 }
 
 /* Tanstack Query Devtools */
+.tsqd-parent-container {
+  border: 1px solid var(--border) !important;
+}
 .tsqd-main-panel {
-  background: transparent;
+  background: transparent !important;
 }
 .tsqd-queries-container {
-  border-radius: 1rem;
+  border-radius: 1rem !important;
 }
diff --git a/apps/web/src/app/(app)/pages/_components/page-title-textarea.tsx b/apps/web/src/app/(app)/pages/_components/page-title-textarea.tsx
index 63285c8..96800ef 100644
--- a/apps/web/src/app/(app)/pages/_components/page-title-textarea.tsx
+++ b/apps/web/src/app/(app)/pages/_components/page-title-textarea.tsx
@@ -108,7 +108,7 @@ export function PageTitleTextarea({
       onKeyDown={handleKeyDown}
       placeholder={placeholder}
       className={cn(
-        "!bg-transparent !h-auto !outline-none !ring-0 !text-3xl !border-none !font-bold md:!text-4xl lg:!text-5xl placeholder:text-muted-foreground/60",
+        "!bg-transparent !h-auto !outline-none !ring-0 !text-3xl !border-none !font-bold md:!text-4xl lg:!text-5xl shadow-none placeholder:text-muted-foreground/60",
         className,
       )}
       {...rest}
diff --git a/apps/web/src/app/(dashboard)/account/[pathname]/_components/account-view.tsx b/apps/web/src/app/(dashboard)/account/[pathname]/_components/account-view.tsx
index 30028ea..37d33d1 100644
--- a/apps/web/src/app/(dashboard)/account/[pathname]/_components/account-view.tsx
+++ b/apps/web/src/app/(dashboard)/account/[pathname]/_components/account-view.tsx
@@ -23,9 +23,10 @@ export async function AuthView({ pathname }: { pathname: string }) {
         },
         sidebar: {
           base: "gap-y-2",
-          button: "cursor-pointer text-primary",
+          button:
+            "cursor-pointer bg-card text-card-foreground border-secondary",
           buttonActive:
-            "cursor-pointer border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+            "cursor-pointer border shadow-xs bg-secondary text-secondary-foreground border-primary",
         },
       }}
       pathname={pathname}
diff --git a/apps/web/src/app/(marketing)/_components/hero-floating-shapes.tsx b/apps/web/src/app/(marketing)/_components/hero-floating-shapes.tsx
index 6a4b158..2c39798 100644
--- a/apps/web/src/app/(marketing)/_components/hero-floating-shapes.tsx
+++ b/apps/web/src/app/(marketing)/_components/hero-floating-shapes.tsx
@@ -22,6 +22,7 @@ export function HeroFloatingShapes() {
     shapes.forEach((shape, index) => {
       const randomType = types[Math.floor(Math.random() * types.length)];
       const element = document.createElement("div");
+
       element.className = "absolute opacity-5 animate-pulse";
       element.style.left = `${shape.x}%`;
       element.style.top = `${shape.y}%`;
diff --git a/apps/web/src/app/(marketing)/_components/secondary-cta-button.tsx b/apps/web/src/app/(marketing)/_components/secondary-cta-button.tsx
deleted file mode 100644
index afd6226..0000000
--- a/apps/web/src/app/(marketing)/_components/secondary-cta-button.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import Link from "next/link";
-import { useAuthModal } from "~/components/auth/auth-modal-provider";
-import { Button } from "~/components/ui/button";
-
-const SECONDARY_CANCEL_URL = "/";
-
-export function SecondaryCtaButton() {
-  const { setCancelUrl } = useAuthModal();
-  return (
-    <Button
-      asChild
-      type="submit"
-      size="lg"
-      variant="outline"
-      className="relative z-10 w-full bg-black px-8 py-4 text-lg text-white transition-all duration-200 hover:scale-105 hover:bg-gray-800 sm:w-40"
-      onClick={() => {
-        setCancelUrl(SECONDARY_CANCEL_URL);
-      }}
-    >
-      <Link href="/auth/sign-in">
-        <span className="font-semibold">Sign in</span>
-      </Link>
-    </Button>
-  );
-}
diff --git a/apps/web/src/app/(marketing)/_components/sticky-journl-header.tsx b/apps/web/src/app/(marketing)/_components/sticky-journl-header.tsx
index d13c06b..fd1671a 100644
--- a/apps/web/src/app/(marketing)/_components/sticky-journl-header.tsx
+++ b/apps/web/src/app/(marketing)/_components/sticky-journl-header.tsx
@@ -32,20 +32,23 @@ export function StickyJournlHeader() {
     <nav
       ref={navRef}
       className={cn(
-        "sticky top-0 z-50 mb-4 flex w-full flex-row items-center justify-center gap-x-2 bg-white px-2 py-4 transition-all duration-300 ease-in-out",
+        "sticky top-0 z-50 mb-4 flex w-full flex-row items-center justify-center gap-x-2 bg-background px-2 py-4 transition-all duration-300 ease-in-out",
         isAtTop
-          ? "border-gray-300 border-b shadow-gray-200 shadow-sm"
+          ? "border-border border-b shadow-sm"
           : "border-none shadow-none",
       )}
     >
       <Button
         variant="ghost"
         size="sm"
-        className="rounded-lg bg-white text-black"
+        className="rounded-lg bg-background text-foreground"
       >
         Sign In
       </Button>
-      <Button size="sm" className="rounded-lg bg-black text-white">
+      <Button
+        size="sm"
+        className="rounded-lg bg-primary text-primary-foreground"
+      >
         Get Started
       </Button>
     </nav>
diff --git a/apps/web/src/app/(marketing)/layout.tsx b/apps/web/src/app/(marketing)/layout.tsx
index 5676c1f..e9696fe 100644
--- a/apps/web/src/app/(marketing)/layout.tsx
+++ b/apps/web/src/app/(marketing)/layout.tsx
@@ -7,7 +7,7 @@ type AppLayoutProps = {
 
 function MarketingLayout({ children }: AppLayoutProps) {
   return (
-    <ThemeProvider attribute="class" defaultTheme="marketing" enableSystem>
+    <ThemeProvider attribute="class" forcedTheme="dark" enableSystem>
       <TRPCReactProvider>{children}</TRPCReactProvider>
     </ThemeProvider>
   );
diff --git a/apps/web/src/app/(marketing)/page.tsx b/apps/web/src/app/(marketing)/page.tsx
index 05537a9..355c197 100644
--- a/apps/web/src/app/(marketing)/page.tsx
+++ b/apps/web/src/app/(marketing)/page.tsx
@@ -41,7 +41,7 @@ export default withoutAuth(function RootPage() {
   return (
     <HydrateClient>
       {/* Hero Section */}
-      <section className="relative flex min-h-screen flex-col items-center justify-center bg-black text-white">
+      <section className="relative flex min-h-screen flex-col items-center justify-center bg-background text-foreground">
         <HeroFloatingShapes />
         <div className="flex h-full w-full flex-col items-center justify-center gap-y-12 text-center">
           <HeroJournlParticles />
@@ -51,7 +51,7 @@ export default withoutAuth(function RootPage() {
           </h1>
           <div className="mt-12 flex flex-col gap-x-4 gap-y-4 sm:flex-row">
             <HeroCtaButton
-              className="border border-white bg-black text-white hover:bg-gray-800 sm:w-40"
+              className="border border-primary bg-background text-foreground hover:bg-background/50 sm:w-40"
               authCancelUrl={AUTH_CANCEL_URL}
             >
               <Link href="/auth/sign-in">
@@ -59,7 +59,7 @@ export default withoutAuth(function RootPage() {
               </Link>
             </HeroCtaButton>
             <HeroCtaButton
-              className="bg-white text-black hover:bg-gray-100 sm:w-40"
+              className="bg-primary text-primary-foreground hover:bg-primary/90 sm:w-40"
               authCancelUrl={AUTH_CANCEL_URL}
             >
               <Link href="/auth/sign-up">
@@ -71,42 +71,18 @@ export default withoutAuth(function RootPage() {
         </div>
       </section>
 
-      {/* TODO: When we have a video of Journl, we can add these sections back in. */}
-      {/* <StickyJournlHeader /> */}
-      {/* Product Showcase */}
-      {/* <section className="relative px-2 pt-4 pb-20">
-                    <div className="mb-6 text-center">
-                        <h2 className="mb-6 font-bold text-4xl text-black md:text-5xl">
-                            See Journl in action
-                        </h2>
-                        <p className="mx-auto max-w-2xl text-gray-600 text-xl">
-                            Experience the perfect blend of structured journaling and
-                            AI-powered insights
-                        </p>
-                    </div>
-                    <div className="rounded-lg border border-gray-200 bg-white p-2 shadow-2xl">
-                        <Image
-                            src="/marketing/journl-interface.png"
-                            alt="Journl Interface"
-                            width={1200}
-                            height={800}
-                            className="w-full rounded-lg"
-                        />
-                    </div>
-                </section> */}
-
       {/* Footer */}
-      <footer className="flex flex-col gap-y-6 bg-black px-2 py-8 text-white">
+      <footer className="flex flex-col gap-y-6 bg-background px-2 py-8 text-foreground">
         <div className="flex flex-col items-center justify-center md:flex-row">
           <div className="flex items-center gap-x-2">
-            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-white">
-              <BookOpen className="h-5 w-5 text-black" />
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary">
+              <BookOpen className="h-5 w-5 text-foreground" />
             </div>
-            <span className="font-bold text-white text-xl">Journl</span>
+            <span className="font-bold text-foreground text-xl">Journl</span>
           </div>
         </div>
-        <Separator className="mx-auto max-w-screen-lg bg-white/10 px-8" />
-        <div className="text-center text-sm text-white">
+        <Separator className="mx-auto max-w-screen-lg bg-primary/10 px-8" />
+        <div className="text-center text-foreground text-sm">
           <p>&copy; {year} Journl. All rights reserved.</p>
         </div>
       </footer>
diff --git a/apps/web/src/app/_components/app-providers.tsx b/apps/web/src/app/_components/app-providers.tsx
index f1b4904..6c31cd1 100644
--- a/apps/web/src/app/_components/app-providers.tsx
+++ b/apps/web/src/app/_components/app-providers.tsx
@@ -10,7 +10,7 @@ import { TRPCReactProvider } from "~/trpc/react";
 
 export function AppProviders({ children }: { children: React.ReactNode }) {
   return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
       <MantineProvider>
         <AppEventProvider>
           <JournlAgentAwarenessProvider>
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 35a8239..6227610 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -8,106 +8,93 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --radius: 0.65rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --background: oklch(0.9940 0 0);
+  --foreground: oklch(0 0 0);
+  --card: oklch(0.9940 0 0);
+  --card-foreground: oklch(0 0 0);
+  --popover: oklch(0.9911 0 0);
+  --popover-foreground: oklch(0 0 0);
+  --primary: oklch(0.5393 0.2713 286.7462);
+  --primary-foreground: oklch(1.0000 0 0);
+  --secondary: oklch(0.9540 0.0063 255.4755);
+  --secondary-foreground: oklch(0.1344 0 0);
+  --muted: oklch(0.9702 0 0);
+  --muted-foreground: oklch(0.4386 0 0);
+  --accent: oklch(0.9393 0.0288 266.3680);
+  --accent-foreground: oklch(0.5445 0.1903 259.4848);
+  --destructive: oklch(51.732% 0.21182 28.534);
+  --destructive-foreground: oklch(1.0000 0 0);
+  --border: oklch(0.9300 0.0094 286.2156);
+  --input: oklch(0.9401 0 0);
+  --ring: oklch(0 0 0);
+  --chart-1: oklch(0.7459 0.1483 156.4499);
+  --chart-2: oklch(0.5393 0.2713 286.7462);
+  --chart-3: oklch(0.7336 0.1758 50.5517);
+  --chart-4: oklch(0.5828 0.1809 259.7276);
+  --chart-5: oklch(0.5590 0 0);
+  --sidebar: oklch(0.9777 0.0051 247.8763);
+  --sidebar-foreground: oklch(0 0 0);
+  --sidebar-primary: oklch(0 0 0);
+  --sidebar-primary-foreground: oklch(1.0000 0 0);
+  --sidebar-accent: oklch(0.9401 0 0);
+  --sidebar-accent-foreground: oklch(0 0 0);
+  --sidebar-border: oklch(0.9401 0 0);
+  --sidebar-ring: oklch(0 0 0);
+  --radius: 0.625rem;
+  --shadow-2xs: 0px 6px 12px -3px hsl(0 0% 0% / 0.04);
+  --shadow-xs: 0px 6px 12px -3px hsl(0 0% 0% / 0.04);
+  --shadow-sm: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 1px 2px -4px hsl(0 0% 0% / 0.09);
+  --shadow: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 1px 2px -4px hsl(0 0% 0% / 0.09);
+  --shadow-md: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 2px 4px -4px hsl(0 0% 0% / 0.09);
+  --shadow-lg: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 4px 6px -4px hsl(0 0% 0% / 0.09);
+  --shadow-xl: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 8px 10px -4px hsl(0 0% 0% / 0.09);
+  --shadow-2xl: 0px 6px 12px -3px hsl(0 0% 0% / 0.22);
+  --tracking-normal: 0em;
+  --spacing: 0.25rem;
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.848 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
-
-.marketing {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.848 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --background: oklch(0.2598 0.0306 262.6666);
+  --foreground: oklch(0.9219 0 0);
+  --card: oklch(0.3106 0.0301 268.6365);
+  --card-foreground: oklch(0.9219 0 0);
+  --popover: oklch(0.2900 0.0249 268.3986);
+  --popover-foreground: oklch(0.9219 0 0);
+  --primary: oklch(57.272% 0.16548 35.9);
+  --primary-foreground: oklch(1.0000 0 0);
+  --secondary: oklch(0.3095 0.0266 266.7132);
+  --secondary-foreground: oklch(0.9219 0 0);
+  --muted: oklch(0.3095 0.0266 266.7132);
+  --muted-foreground: oklch(0.7155 0 0);
+  --accent: oklch(0.3380 0.0589 267.5867);
+  --accent-foreground: oklch(0.8823 0.0571 254.1284);
+  --destructive: oklch(0.6368 0.2078 25.3313);
+  --destructive-foreground: oklch(1.0000 0 0);
+  --border: oklch(0.3843 0.0301 269.7337);
+  --input: oklch(0.3843 0.0301 269.7337);
+  --ring: oklch(0.6397 0.1720 36.4421);
+  --chart-1: oklch(0.7156 0.0605 248.6845);
+  --chart-2: oklch(0.7693 0.0876 34.1875);
+  --chart-3: oklch(0.5778 0.0759 254.1573);
+  --chart-4: oklch(0.5016 0.0849 259.4902);
+  --chart-5: oklch(0.4241 0.0952 264.0306);
+  --sidebar: oklch(0.3100 0.0283 267.7408);
+  --sidebar-foreground: oklch(0.9219 0 0);
+  --sidebar-primary: oklch(0.6397 0.1720 36.4421);
+  --sidebar-primary-foreground: oklch(1.0000 0 0);
+  --sidebar-accent: oklch(0.3380 0.0589 267.5867);
+  --sidebar-accent-foreground: oklch(0.8823 0.0571 254.1284);
+  --sidebar-border: oklch(0.3843 0.0301 269.7337);
+  --sidebar-ring: oklch(0.6397 0.1720 36.4421);
+  --radius: 0.75rem;
+  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
 }
 
 @theme inline {
@@ -135,10 +122,6 @@
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
@@ -147,6 +130,20 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
 }
 
 @layer base {
diff --git a/apps/web/src/components/ui/sidebar.tsx b/apps/web/src/components/ui/sidebar.tsx
index 0f6c7a3..40b021c 100644
--- a/apps/web/src/components/ui/sidebar.tsx
+++ b/apps/web/src/components/ui/sidebar.tsx
@@ -488,7 +488,7 @@ function SidebarDragHandle({
       {/* Visual resize indicator - thin border highlight */}
       <div
         className={cn(
-          "h-full cursor-col-resize bg-transparent transition-colors",
+          "my-1.5 h-[calc(100%-1rem)] cursor-col-resize bg-transparent transition-colors",
           "group-hover/resize-border:bg-sidebar-border/70",
           side === "left" ? "ml-auto w-0.5" : "mr-auto w-0.5",
           className,