diff --git a/apps/publisher-dashboard/package.json b/apps/publisher-dashboard/package.json
index 113ae9f..5e73db1 100644
--- a/apps/publisher-dashboard/package.json
+++ b/apps/publisher-dashboard/package.json
@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "@internationalized/date": "^3.10.1",
-    "@lucide/svelte": "^0.562.0",
+    "@lucide/svelte": "^0.561.0",
     "@macalinao/tsconfig": "catalog:",
     "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/kit": "^2.21.1",
diff --git a/apps/publisher-dashboard/src/app.css b/apps/publisher-dashboard/src/app.css
index ebd9704..48f3f72 100644
--- a/apps/publisher-dashboard/src/app.css
+++ b/apps/publisher-dashboard/src/app.css
@@ -1,83 +1,170 @@
 @import "tailwindcss";
-
 @import "tw-animate-css";
 
+/* Geist Sans - Modern, clean typeface */
+@font-face {
+  font-family: "Geist";
+  src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Regular.woff2")
+    format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Geist";
+  src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Medium.woff2")
+    format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Geist";
+  src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-SemiBold.woff2")
+    format("woff2");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Geist";
+  src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Bold.woff2")
+    format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Geist Mono";
+  src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Regular.woff2")
+    format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Geist Mono";
+  src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Medium.woff2")
+    format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
+  --radius: 0.5rem;
+
+  /* Refined zinc palette with subtle warmth */
+  --background: oklch(0.985 0.002 280);
+  --foreground: oklch(0.145 0.005 285);
+
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
+  --card-foreground: oklch(0.145 0.005 285);
+
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.145 0.005 285);
+
+  --primary: oklch(0.205 0.006 285);
   --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
+
+  --secondary: oklch(0.96 0.002 280);
+  --secondary-foreground: oklch(0.205 0.006 285);
+
+  --muted: oklch(0.96 0.002 280);
+  --muted-foreground: oklch(0.48 0.012 280);
+
+  --accent: oklch(0.96 0.002 280);
+  --accent-foreground: oklch(0.205 0.006 285);
+
   --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
-  --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.141 0.005 285.823);
-  --sidebar-primary: oklch(0.21 0.006 285.885);
+
+  --border: oklch(0.91 0.003 280);
+  --input: oklch(0.91 0.003 280);
+  --ring: oklch(0.65 0.015 280);
+
+  /* Accent colors for data viz */
+  --success: oklch(0.65 0.19 145);
+  --warning: oklch(0.75 0.18 65);
+
+  --chart-1: oklch(0.55 0.2 250);
+  --chart-2: oklch(0.6 0.15 175);
+  --chart-3: oklch(0.5 0.12 220);
+  --chart-4: oklch(0.7 0.16 85);
+  --chart-5: oklch(0.65 0.18 35);
+
+  --sidebar: oklch(0.98 0.001 280);
+  --sidebar-foreground: oklch(0.145 0.005 285);
+  --sidebar-primary: oklch(0.205 0.006 285);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
+  --sidebar-accent: oklch(0.94 0.002 280);
+  --sidebar-accent-foreground: oklch(0.205 0.006 285);
+  --sidebar-border: oklch(0.91 0.003 280);
+  --sidebar-ring: oklch(0.65 0.015 280);
 }
 
 .dark {
-  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.92 0.004 286.32);
-  --primary-foreground: oklch(0.21 0.006 285.885);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --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.552 0.016 285.938);
-  --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.21 0.006 285.885);
-  --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.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.552 0.016 285.938);
+  --background: oklch(0.12 0.005 280);
+  --foreground: oklch(0.96 0 0);
+
+  --card: oklch(0.16 0.005 280);
+  --card-foreground: oklch(0.96 0 0);
+
+  --popover: oklch(0.16 0.005 280);
+  --popover-foreground: oklch(0.96 0 0);
+
+  --primary: oklch(0.92 0.003 280);
+  --primary-foreground: oklch(0.12 0.005 280);
+
+  --secondary: oklch(0.22 0.005 280);
+  --secondary-foreground: oklch(0.96 0 0);
+
+  --muted: oklch(0.22 0.005 280);
+  --muted-foreground: oklch(0.6 0.01 280);
+
+  --accent: oklch(0.22 0.005 280);
+  --accent-foreground: oklch(0.96 0 0);
+
+  --destructive: oklch(0.65 0.2 25);
+
+  --border: oklch(0.26 0.005 280);
+  --input: oklch(0.26 0.005 280);
+  --ring: oklch(0.5 0.01 280);
+
+  --success: oklch(0.7 0.2 145);
+  --warning: oklch(0.8 0.18 65);
+
+  --chart-1: oklch(0.6 0.22 250);
+  --chart-2: oklch(0.65 0.17 175);
+  --chart-3: oklch(0.7 0.18 85);
+  --chart-4: oklch(0.6 0.2 310);
+  --chart-5: oklch(0.65 0.22 25);
+
+  --sidebar: oklch(0.14 0.005 280);
+  --sidebar-foreground: oklch(0.96 0 0);
+  --sidebar-primary: oklch(0.6 0.22 250);
+  --sidebar-primary-foreground: oklch(0.96 0 0);
+  --sidebar-accent: oklch(0.22 0.005 280);
+  --sidebar-accent-foreground: oklch(0.96 0 0);
+  --sidebar-border: oklch(0.26 0.005 280);
+  --sidebar-ring: oklch(0.5 0.01 280);
 }
 
 @theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, monospace;
+
+  --radius-sm: calc(var(--radius) - 2px);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) + 2px);
+  --radius-xl: calc(var(--radius) + 6px);
+
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -96,6 +183,8 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);
   --color-chart-3: var(--chart-3);
@@ -113,13 +202,57 @@
 
 @layer base {
   * {
-    @apply border-border outline-ring/50;
+    @apply border-border;
   }
+
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background font-sans text-foreground;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
   }
+
   button,
   [role="button"] {
     @apply cursor-pointer;
   }
-}
\ No newline at end of file
+
+  /* Refined focus styles */
+  :focus-visible {
+    @apply outline-none ring-2 ring-ring/40 ring-offset-2 ring-offset-background;
+  }
+
+  /* Smooth scrolling */
+  @media (prefers-reduced-motion: no-preference) {
+    html {
+      scroll-behavior: smooth;
+    }
+  }
+}
+
+/* Utility classes for consistent shadows */
+@layer utilities {
+  .shadow-card {
+    box-shadow:
+      0 1px 2px 0 oklch(0 0 0 / 0.03),
+      0 1px 3px 0 oklch(0 0 0 / 0.04);
+  }
+
+  .shadow-card-hover {
+    box-shadow:
+      0 2px 4px 0 oklch(0 0 0 / 0.04),
+      0 3px 6px 0 oklch(0 0 0 / 0.05);
+  }
+
+  .shadow-elevated {
+    box-shadow:
+      0 4px 6px -1px oklch(0 0 0 / 0.05),
+      0 2px 4px -2px oklch(0 0 0 / 0.05);
+  }
+}
diff --git a/apps/publisher-dashboard/src/lib/components/dashboard/frequent-filters.svelte b/apps/publisher-dashboard/src/lib/components/dashboard/frequent-filters.svelte
index 8ec9121..51e780c 100644
--- a/apps/publisher-dashboard/src/lib/components/dashboard/frequent-filters.svelte
+++ b/apps/publisher-dashboard/src/lib/components/dashboard/frequent-filters.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-import * as Card from "$lib/components/ui/card";
 import { cn } from "$lib/utils.js";
 
 interface Props {
@@ -9,24 +8,59 @@ interface Props {
 let { class: className }: Props = $props();
 
 const filters = [
-  { label: "For 9 countries, on weekends", href: "#" },
-  { label: "North America region", href: "#" },
+  { label: "9 countries, weekends", icon: "globe", href: "#" },
+  { label: "North America region", icon: "map", href: "#" },
+  { label: "Mobile devices only", icon: "mobile", href: "#" },
 ];
 </script>
 
-<Card.Root class={cn("", className)}>
-  <Card.Header class="pb-3">
-    <Card.Title class="text-sm font-medium text-muted-foreground">Frequent filters</Card.Title>
-  </Card.Header>
+<div
+  class={cn(
+    "overflow-hidden rounded-lg border border-border bg-card shadow-card",
+    className,
+  )}
+>
+  <div class="border-b border-border px-5 py-3">
+    <h3 class="text-sm font-semibold text-foreground">Saved Filters</h3>
+  </div>
 
-  <Card.Content class="space-y-2">
+  <div class="divide-y divide-border/50">
     {#each filters as filter}
       <a
         href={filter.href}
-        class="block text-sm font-medium text-foreground underline underline-offset-4 transition-colors hover:text-primary"
+        class="group flex items-center gap-3 px-5 py-3 transition-colors hover:bg-muted/30"
       >
-        {filter.label}
+        <div class="flex h-7 w-7 items-center justify-center rounded-md bg-muted text-muted-foreground transition-colors group-hover:bg-foreground/10 group-hover:text-foreground">
+          {#if filter.icon === "globe"}
+            <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+              <circle cx="12" cy="12" r="10" />
+              <path d="M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          {:else if filter.icon === "map"}
+            <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+              <path d="M1 6v16l7-4 8 4 7-4V2l-7 4-8-4-7 4zM8 2v16M16 6v16" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          {:else if filter.icon === "mobile"}
+            <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+              <rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
+              <path d="M12 18h.01" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          {/if}
+        </div>
+        <span class="text-[13px] font-medium text-foreground group-hover:text-foreground">{filter.label}</span>
+        <svg class="ml-auto h-4 w-4 text-muted-foreground/50 transition-transform group-hover:translate-x-0.5 group-hover:text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+          <path d="m9 18 6-6-6-6" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
       </a>
     {/each}
-  </Card.Content>
-</Card.Root>
+  </div>
+
+  <div class="border-t border-border px-5 py-3">
+    <button class="flex w-full items-center justify-center gap-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground">
+      <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M12 5v14M5 12h14" stroke-linecap="round" />
+      </svg>
+      Create new filter
+    </button>
+  </div>
+</div>
diff --git a/apps/publisher-dashboard/src/lib/components/dashboard/metric-card.svelte b/apps/publisher-dashboard/src/lib/components/dashboard/metric-card.svelte
index e4d1b3d..edec382 100644
--- a/apps/publisher-dashboard/src/lib/components/dashboard/metric-card.svelte
+++ b/apps/publisher-dashboard/src/lib/components/dashboard/metric-card.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-import * as Card from "$lib/components/ui/card";
 import { cn } from "$lib/utils.js";
 
 interface Props {
@@ -19,19 +18,17 @@ let {
 }: Props = $props();
 
 const isPositive = $derived(change >= 0);
-const changeColor = $derived(isPositive ? "text-emerald-600" : "text-red-500");
-const sparklineColor = $derived(isPositive ? "#10b981" : "#ef4444");
 
-// Generate SVG path from sparkline data
 function generateSparklinePath(data: number[]): string {
   if (data.length < 2) {
     return "";
   }
+
   const min = Math.min(...data);
   const max = Math.max(...data);
   const range = max - min || 1;
-  const width = 80;
-  const height = 32;
+  const width = 64;
+  const height = 28;
   const padding = 2;
 
   const points = data.map((val, i) => {
@@ -43,36 +40,102 @@ function generateSparklinePath(data: number[]): string {
   return `M${points.join(" L")}`;
 }
 
+function generateAreaPath(data: number[]): string {
+  if (data.length < 2) {
+    return "";
+  }
+
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const width = 64;
+  const height = 28;
+  const padding = 2;
+
+  const points = data.map((val, i) => {
+    const x = (i / (data.length - 1)) * width;
+    const y = height - padding - ((val - min) / range) * (height - padding * 2);
+    return `${x},${y}`;
+  });
+
+  return `M0,${height} L${points.join(" L")} L${width},${height} Z`;
+}
+
 const sparklinePath = $derived(generateSparklinePath(sparklineData));
+const areaPath = $derived(generateAreaPath(sparklineData));
 </script>
 
-<Card.Root class={cn("relative overflow-hidden", className)}>
-  <Card.Content class="p-4">
-    <div class="flex items-start justify-between">
-      <div class="space-y-1">
-        <p class="text-sm text-muted-foreground">{label}</p>
-        <div class="flex items-baseline gap-2">
-          <span class="text-2xl font-semibold tracking-tight">{value}</span>
-          <span class={cn("text-sm font-medium", changeColor)}>
-            {isPositive ? "+" : ""}{change.toFixed(2)}%
-          </span>
-        </div>
-      </div>
+<div
+  class={cn(
+    "group relative overflow-hidden rounded-lg border border-border bg-card p-5 shadow-card transition-all duration-200 hover:shadow-card-hover",
+    className,
+  )}
+>
+  <div class="flex items-start justify-between">
+    <div class="space-y-2">
+      <p class="text-[13px] font-medium text-muted-foreground">{label}</p>
 
-      {#if sparklineData.length > 0}
-        <div class="flex-shrink-0">
-          <svg width="80" height="32" class="overflow-visible">
-            <path
-              d={sparklinePath}
-              fill="none"
-              stroke={sparklineColor}
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
+      <div class="flex items-baseline gap-2.5">
+        <span class="text-2xl font-semibold tracking-tight text-foreground">{value}</span>
+        <span
+          class={cn(
+            "inline-flex items-center gap-0.5 text-xs font-medium",
+            isPositive ? "text-success" : "text-destructive",
+          )}
+        >
+          <svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            {#if isPositive}
+              <path d="M18 15l-6-6-6 6" stroke-linecap="round" stroke-linejoin="round" />
+            {:else}
+              <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
+            {/if}
           </svg>
-        </div>
-      {/if}
+          {Math.abs(change).toFixed(2)}%
+        </span>
+      </div>
     </div>
-  </Card.Content>
-</Card.Root>
+
+    {#if sparklineData.length > 0}
+      <div class="mt-1 flex-shrink-0 opacity-80 transition-opacity group-hover:opacity-100">
+        <svg width="64" height="28" class="overflow-visible">
+          <!-- Gradient definition -->
+          <defs>
+            <linearGradient id="sparkGradient-{label}" x1="0%" y1="0%" x2="0%" y2="100%">
+              <stop
+                offset="0%"
+                stop-color={isPositive ? "oklch(0.65 0.19 145)" : "oklch(0.577 0.245 27.325)"}
+                stop-opacity="0.15"
+              />
+              <stop
+                offset="100%"
+                stop-color={isPositive ? "oklch(0.65 0.19 145)" : "oklch(0.577 0.245 27.325)"}
+                stop-opacity="0"
+              />
+            </linearGradient>
+          </defs>
+
+          <!-- Area fill -->
+          <path d={areaPath} fill="url(#sparkGradient-{label})" />
+
+          <!-- Line -->
+          <path
+            d={sparklinePath}
+            fill="none"
+            stroke={isPositive ? "oklch(0.65 0.19 145)" : "oklch(0.577 0.245 27.325)"}
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+
+          <!-- End dot -->
+          <circle
+            cx="64"
+            cy={sparklinePath.split(" ").pop()?.split(",")[1] ?? 14}
+            r="2"
+            fill={isPositive ? "oklch(0.65 0.19 145)" : "oklch(0.577 0.245 27.325)"}
+          />
+        </svg>
+      </div>
+    {/if}
+  </div>
+</div>
diff --git a/apps/publisher-dashboard/src/lib/components/dashboard/peak-traffic-chart.svelte b/apps/publisher-dashboard/src/lib/components/dashboard/peak-traffic-chart.svelte
index 30769d8..ab172de 100644
--- a/apps/publisher-dashboard/src/lib/components/dashboard/peak-traffic-chart.svelte
+++ b/apps/publisher-dashboard/src/lib/components/dashboard/peak-traffic-chart.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-import * as Card from "$lib/components/ui/card";
 import { cn } from "$lib/utils.js";
 
 interface Props {
@@ -20,86 +19,88 @@ const hours = [
 ];
 const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 
-// Mock heatmap data - values from 0-100 representing traffic intensity
+// Traffic intensity data (0-100)
 const heatmapData = [
-  [20, 35, 45, 60, 75, 55, 30], // 0:00
-  [15, 25, 40, 55, 65, 45, 25], // 3:00
-  [25, 40, 55, 70, 80, 60, 35], // 6:00
-  [35, 50, 65, 80, 90, 70, 45], // 9:00
-  [40, 55, 70, 85, 95, 75, 50], // 12:00
-  [45, 60, 75, 90, 85, 70, 45], // 15:00
-  [50, 65, 80, 75, 70, 55, 40], // 18:00
-  [35, 50, 60, 55, 50, 40, 30], // 21:00
+  [20, 35, 45, 60, 75, 55, 30],
+  [15, 25, 40, 55, 65, 45, 25],
+  [25, 40, 55, 70, 80, 60, 35],
+  [35, 50, 65, 80, 90, 70, 45],
+  [40, 55, 70, 85, 95, 75, 50],
+  [45, 60, 75, 90, 85, 70, 45],
+  [50, 65, 80, 75, 70, 55, 40],
+  [35, 50, 60, 55, 50, 40, 30],
 ];
 
-function getBarHeight(value: number): number {
-  return (value / 100) * 40;
-}
-
-function getBarColor(value: number): string {
-  if (value >= 80) {
-    return "#374151";
-  }
-  if (value >= 60) {
-    return "#6b7280";
-  }
-  if (value >= 40) {
-    return "#9ca3af";
-  }
-  return "#d1d5db";
+function getCellOpacity(value: number): number {
+  return 0.15 + (value / 100) * 0.85;
 }
 </script>
 
-<Card.Root class={cn("", className)}>
-  <Card.Header class="pb-4">
-    <Card.Title class="text-base font-medium">Peak Traffic Hours</Card.Title>
-  </Card.Header>
+<div
+  class={cn(
+    "overflow-hidden rounded-lg border border-border bg-card shadow-card",
+    className,
+  )}
+>
+  <div class="border-b border-border px-5 py-3">
+    <h3 class="text-sm font-semibold text-foreground">Peak Traffic Hours</h3>
+  </div>
 
-  <Card.Content>
-    <div class="flex gap-4">
+  <div class="p-5">
+    <div class="flex gap-3">
       <!-- Y-axis labels -->
-      <div class="flex flex-col justify-between py-1 text-xs text-muted-foreground">
+      <div class="flex flex-col justify-between pr-1">
         {#each hours as hour}
-          <span class="flex h-[40px] items-end">{hour}</span>
+          <div class="flex h-6 items-center">
+            <span class="text-[11px] tabular-nums text-muted-foreground">{hour}</span>
+          </div>
         {/each}
       </div>
 
-      <!-- Chart area -->
+      <!-- Grid -->
       <div class="flex-1">
-        <div class="flex gap-2">
-          {#each days as _, dayIndex}
-            <div class="flex flex-1 flex-col gap-1">
-              {#each hours as __, hourIndex}
-                <div class="flex h-[40px] items-end justify-center">
-                  <div
-                    class="w-full max-w-[24px] rounded-sm transition-all"
-                    style="height: {getBarHeight(heatmapData[hourIndex][dayIndex])}px; background-color: {getBarColor(heatmapData[hourIndex][dayIndex])}"
-                  ></div>
+        <div class="grid grid-cols-7 gap-1">
+          {#each hours as _, hourIndex}
+            {#each days as _, dayIndex}
+              {@const value = heatmapData[hourIndex][dayIndex]}
+              <div
+                class="group relative h-6 rounded transition-all duration-150 hover:ring-2 hover:ring-foreground/20"
+                style="background-color: oklch(0.205 0.006 285 / {getCellOpacity(value)})"
+                title="{days[dayIndex]} {hours[hourIndex]}: {value}% traffic"
+              >
+                <!-- Tooltip -->
+                <div
+                  class="pointer-events-none absolute -top-8 left-1/2 z-10 -translate-x-1/2 whitespace-nowrap rounded bg-foreground px-2 py-1 text-[10px] font-medium text-background opacity-0 shadow-lg transition-opacity group-hover:opacity-100"
+                >
+                  {value}%
                 </div>
-              {/each}
-            </div>
+              </div>
+            {/each}
           {/each}
         </div>
 
         <!-- X-axis labels -->
-        <div class="mt-2 flex gap-2">
+        <div class="mt-2 grid grid-cols-7 gap-1">
           {#each days as day}
-            <div class="flex-1 text-center text-xs text-muted-foreground">{day}</div>
+            <div class="text-center text-[11px] text-muted-foreground">{day}</div>
           {/each}
         </div>
       </div>
     </div>
 
     <!-- Legend -->
-    <div class="mt-4 flex items-center justify-center gap-4 text-xs text-muted-foreground">
-      <div class="flex items-center gap-1.5">
-        <div class="h-3 w-3 rounded-sm bg-muted"></div>
-        <span>This month</span>
-      </div>
-      <div class="flex items-center gap-1.5">
-        <div class="h-3 w-3 rounded-sm bg-gray-300"></div>
-        <span>Last month</span>
+    <div class="mt-5 flex items-center justify-center gap-4">
+      <div class="flex items-center gap-2">
+        <div class="flex items-center gap-0.5">
+          {#each [0.2, 0.4, 0.6, 0.8, 1] as opacity}
+            <div
+              class="h-2 w-4 first:rounded-l last:rounded-r"
+              style="background-color: oklch(0.205 0.006 285 / {opacity})"
+            ></div>
+          {/each}
+        </div>
+        <span class="text-[11px] text-muted-foreground">Traffic intensity</span>
       </div>
     </div>
-  </Card.Content>
-</Card.Root>
+  </div>
+</div>
diff --git a/apps/publisher-dashboard/src/lib/components/dashboard/performance-table.svelte b/apps/publisher-dashboard/src/lib/components/dashboard/performance-table.svelte
index 7b318ed..1f5b3f5 100644
--- a/apps/publisher-dashboard/src/lib/components/dashboard/performance-table.svelte
+++ b/apps/publisher-dashboard/src/lib/components/dashboard/performance-table.svelte
@@ -1,9 +1,14 @@
 <script lang="ts">
-import { Badge } from "$lib/components/ui/badge";
-import * as Card from "$lib/components/ui/card";
-import * as Table from "$lib/components/ui/table";
-import * as Tabs from "$lib/components/ui/tabs";
+import { goto } from "$app/navigation";
+import { page } from "$app/stores";
 import { cn } from "$lib/utils.js";
+import {
+  AdUnitTable,
+  CountryTable,
+  DomainTable,
+  KeyValueTable,
+  SourceTable,
+} from "./tabs";
 
 interface Props {
   class?: string;
@@ -17,125 +22,89 @@ const tabs = [
   { id: "source", label: "Source", count: null },
   { id: "ad-unit", label: "Ad Unit", count: null },
   { id: "key-value", label: "Key Value", count: null },
-];
+] as const;
 
-let activeTab = $state("ad-unit");
+type TabId = (typeof tabs)[number]["id"];
 
-const tableData = [
-  {
-    id: 1,
-    name: "#ad-unitName",
-    revenue: "0,000,000",
-    revPercent: "22.00%",
-    impressions: "2,422,000",
-    impPercent: "####",
-  },
-  {
-    id: 2,
-    name: "#ad-unitName",
-    revenue: "0,000,000",
-    revPercent: "22.00%",
-    impressions: "2,422,000",
-    impPercent: "####",
-  },
-  {
-    id: 3,
-    name: "#ad-unitName",
-    revenue: "0,000,000",
-    revPercent: "22.00%",
-    impressions: "2,422,000",
-    impPercent: "####",
-  },
-  {
-    id: 4,
-    name: "#ad-unitName",
-    revenue: "0,000,000",
-    revPercent: "22.00%",
-    impressions: "2,422,000",
-    impPercent: "####",
-  },
-  {
-    id: 5,
-    name: "#ad-unitName",
-    revenue: "0,000,000",
-    revPercent: "22.00%",
-    impressions: "2,422,000",
-    impPercent: "####",
-  },
-  {
-    id: 6,
-    name: "#ad-unitName",
-    revenue: "0,000,000",
-    revPercent: "22.00%",
-    impressions: "2,422,000",
-    impPercent: "####",
-  },
-];
+const defaultTab: TabId = "ad-unit";
+
+const activeTab = $derived(
+  ($page.url.searchParams.get("tab") as TabId) || defaultTab,
+);
+
+function handleTabChange(tabId: string) {
+  const url = new URL($page.url);
+  if (tabId === defaultTab) {
+    url.searchParams.delete("tab");
+  } else {
+    url.searchParams.set("tab", tabId);
+  }
+  goto(url.toString(), { replaceState: true, noScroll: true });
+}
 </script>
 
-<Card.Root class={cn("", className)}>
-  <Card.Header class="pb-3">
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-2">
-        <Card.Title class="text-base font-medium">Performance by</Card.Title>
-        <svg class="h-4 w-4 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="m9 18 6-6-6-6" stroke-linecap="round" stroke-linejoin="round" />
-        </svg>
-      </div>
-
-      <Tabs.Root bind:value={activeTab}>
-        <Tabs.List class="h-auto gap-1 bg-transparent p-0">
-          {#each tabs as tab}
-            <Tabs.Trigger
-              value={tab.id}
-              class="gap-1.5 px-3 py-1.5 text-sm font-normal data-[state=active]:bg-transparent data-[state=active]:font-medium data-[state=active]:shadow-none"
-            >
-              {tab.label}
-              {#if tab.count}
-                <Badge variant="secondary" class="ml-1 h-5 min-w-5 rounded-full px-1.5 text-xs">
-                  {tab.count}
-                </Badge>
-              {/if}
-            </Tabs.Trigger>
-          {/each}
-        </Tabs.List>
-      </Tabs.Root>
+<div
+  class={cn(
+    "overflow-hidden rounded-lg border border-border bg-card shadow-card",
+    className,
+  )}
+>
+  <!-- Header with tabs -->
+  <div class="flex items-center justify-between border-b border-border px-5 py-3">
+    <div class="flex items-center gap-2">
+      <h3 class="text-sm font-semibold text-foreground">Performance by</h3>
+      <svg class="h-4 w-4 text-muted-foreground/60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="m9 18 6-6-6-6" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
     </div>
-  </Card.Header>
 
-  <Card.Content class="p-0">
-    <Table.Root>
-      <Table.Header>
-        <Table.Row class="hover:bg-transparent">
-          <Table.Head class="w-12"></Table.Head>
-          <Table.Head class="font-normal text-muted-foreground">Ad unit</Table.Head>
-          <Table.Head class="text-right font-normal text-muted-foreground">Total revenue</Table.Head>
-          <Table.Head class="text-right font-normal text-muted-foreground">
-            <div class="flex items-center justify-end gap-1">
-              % of rev.
-              <svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="m18 15-6-6-6 6" stroke-linecap="round" stroke-linejoin="round" />
-              </svg>
-            </div>
-          </Table.Head>
-          <Table.Head class="text-right font-normal text-muted-foreground">Total impressions</Table.Head>
-          <Table.Head class="text-right font-normal text-muted-foreground">% of impressions</Table.Head>
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
-        {#each tableData as row}
-          <Table.Row>
-            <Table.Cell class="w-12">
-              <div class="h-4 w-4 rounded border border-border bg-muted"></div>
-            </Table.Cell>
-            <Table.Cell class="font-mono text-sm text-muted-foreground">{row.name}</Table.Cell>
-            <Table.Cell class="text-right tabular-nums">{row.revenue}</Table.Cell>
-            <Table.Cell class="text-right font-semibold tabular-nums">{row.revPercent}</Table.Cell>
-            <Table.Cell class="text-right tabular-nums">{row.impressions}</Table.Cell>
-            <Table.Cell class="text-right tabular-nums text-muted-foreground">{row.impPercent}</Table.Cell>
-          </Table.Row>
-        {/each}
-      </Table.Body>
-    </Table.Root>
-  </Card.Content>
-</Card.Root>
+    <!-- Tab navigation -->
+    <div class="flex items-center gap-0.5" role="tablist">
+      {#each tabs as tab}
+        {@const isActive = activeTab === tab.id}
+        <button
+          role="tab"
+          aria-selected={isActive}
+          aria-controls="panel-{tab.id}"
+          onclick={() => handleTabChange(tab.id)}
+          class={cn(
+            "relative flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm transition-all duration-150",
+            isActive
+              ? "font-medium text-foreground"
+              : "font-normal text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+          )}
+        >
+          {tab.label}
+          {#if tab.count}
+            <span
+              class={cn(
+                "flex h-[18px] min-w-[18px] items-center justify-center rounded-full px-1 text-[10px] font-medium",
+                isActive ? "bg-foreground text-background" : "bg-muted text-muted-foreground",
+              )}
+            >
+              {tab.count}
+            </span>
+          {/if}
+          {#if isActive}
+            <span class="absolute inset-x-2 -bottom-[13px] h-0.5 rounded-full bg-foreground"></span>
+          {/if}
+        </button>
+      {/each}
+    </div>
+  </div>
+
+  <!-- Table content -->
+  <div id="panel-{activeTab}" role="tabpanel">
+    {#if activeTab === "domain"}
+      <DomainTable />
+    {:else if activeTab === "country"}
+      <CountryTable />
+    {:else if activeTab === "source"}
+      <SourceTable />
+    {:else if activeTab === "ad-unit"}
+      <AdUnitTable />
+    {:else if activeTab === "key-value"}
+      <KeyValueTable />
+    {/if}
+  </div>
+</div>
diff --git a/apps/publisher-dashboard/src/lib/components/dashboard/tabs/ad-unit-table.svelte b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/ad-unit-table.svelte
new file mode 100644
index 0000000..bba55ee
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/ad-unit-table.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+import * as Table from "$lib/components/ui/table";
+
+const tableData = [
+  {
+    id: 1,
+    name: "/header/leaderboard-728x90",
+    revenue: "$1,200,000",
+    revPercent: 22.0,
+    impressions: "2,422,000",
+    impPercent: 18.5,
+  },
+  {
+    id: 2,
+    name: "/sidebar/medium-rect-300x250",
+    revenue: "$980,000",
+    revPercent: 17.96,
+    impressions: "2,100,000",
+    impPercent: 16.04,
+  },
+  {
+    id: 3,
+    name: "/content/in-article-300x250",
+    revenue: "$850,000",
+    revPercent: 15.58,
+    impressions: "1,850,000",
+    impPercent: 14.13,
+  },
+  {
+    id: 4,
+    name: "/footer/billboard-970x250",
+    revenue: "$720,000",
+    revPercent: 13.2,
+    impressions: "1,600,000",
+    impPercent: 12.22,
+  },
+  {
+    id: 5,
+    name: "/mobile/sticky-320x50",
+    revenue: "$650,000",
+    revPercent: 11.92,
+    impressions: "1,450,000",
+    impPercent: 11.07,
+  },
+  {
+    id: 6,
+    name: "/interstitial/fullscreen",
+    revenue: "$520,000",
+    revPercent: 9.53,
+    impressions: "1,200,000",
+    impPercent: 9.16,
+  },
+];
+
+function getBarWidth(value: number, max: number): number {
+  return (value / max) * 100;
+}
+
+const maxRevPercent = Math.max(...tableData.map((d) => d.revPercent));
+</script>
+
+<Table.Root>
+  <Table.Header>
+    <Table.Row class="border-b border-border hover:bg-transparent">
+      <Table.Head class="h-10 w-10 pl-5"></Table.Head>
+      <Table.Head class="h-10 text-xs font-medium text-muted-foreground">Ad unit</Table.Head>
+      <Table.Head class="h-10 text-right text-xs font-medium text-muted-foreground">Revenue</Table.Head>
+      <Table.Head class="h-10 w-32 text-right text-xs font-medium text-muted-foreground">
+        <div class="flex items-center justify-end gap-1">
+          % of revenue
+          <svg class="h-3 w-3 text-muted-foreground/60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="m18 15-6-6-6 6" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </div>
+      </Table.Head>
+      <Table.Head class="h-10 text-right text-xs font-medium text-muted-foreground">Impressions</Table.Head>
+      <Table.Head class="h-10 pr-5 text-right text-xs font-medium text-muted-foreground">% of impr.</Table.Head>
+    </Table.Row>
+  </Table.Header>
+  <Table.Body>
+    {#each tableData as row, i}
+      <Table.Row class="group border-b border-border/50 transition-colors last:border-0 hover:bg-muted/30">
+        <Table.Cell class="w-10 py-3 pl-5">
+          <div class="flex h-4 w-4 items-center justify-center rounded border border-border bg-muted/50 text-[10px] font-medium text-muted-foreground">
+            {i + 1}
+          </div>
+        </Table.Cell>
+        <Table.Cell class="py-3">
+          <code class="font-mono text-[13px] text-foreground">{row.name}</code>
+        </Table.Cell>
+        <Table.Cell class="py-3 text-right font-medium tabular-nums text-foreground">{row.revenue}</Table.Cell>
+        <Table.Cell class="w-32 py-3">
+          <div class="flex items-center justify-end gap-2">
+            <div class="h-1.5 w-16 overflow-hidden rounded-full bg-muted">
+              <div
+                class="h-full rounded-full bg-foreground/70 transition-all duration-300"
+                style="width: {getBarWidth(row.revPercent, maxRevPercent)}%"
+              ></div>
+            </div>
+            <span class="w-12 text-right font-medium tabular-nums text-foreground">{row.revPercent.toFixed(2)}%</span>
+          </div>
+        </Table.Cell>
+        <Table.Cell class="py-3 text-right tabular-nums text-muted-foreground">{row.impressions}</Table.Cell>
+        <Table.Cell class="py-3 pr-5 text-right tabular-nums text-muted-foreground">{row.impPercent.toFixed(2)}%</Table.Cell>
+      </Table.Row>
+    {/each}
+  </Table.Body>
+</Table.Root>
diff --git a/apps/publisher-dashboard/src/lib/components/dashboard/tabs/country-table.svelte b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/country-table.svelte
new file mode 100644
index 0000000..ce5d8e1
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/country-table.svelte
@@ -0,0 +1,110 @@
+<script lang="ts">
+import * as Table from "$lib/components/ui/table";
+
+const tableData = [
+  {
+    id: 1,
+    name: "United States",
+    code: "US",
+    revenue: "$3,200,000",
+    revPercent: 44.8,
+    impressions: "15,800,000",
+    impPercent: 41.0,
+  },
+  {
+    id: 2,
+    name: "United Kingdom",
+    code: "GB",
+    revenue: "$1,100,000",
+    revPercent: 15.4,
+    impressions: "5,600,000",
+    impPercent: 14.55,
+  },
+  {
+    id: 3,
+    name: "Germany",
+    code: "DE",
+    revenue: "$850,000",
+    revPercent: 11.9,
+    impressions: "4,200,000",
+    impPercent: 10.9,
+  },
+  {
+    id: 4,
+    name: "Canada",
+    code: "CA",
+    revenue: "$620,000",
+    revPercent: 8.7,
+    impressions: "3,100,000",
+    impPercent: 8.05,
+  },
+  {
+    id: 5,
+    name: "Australia",
+    code: "AU",
+    revenue: "$480,000",
+    revPercent: 6.72,
+    impressions: "2,400,000",
+    impPercent: 6.24,
+  },
+  {
+    id: 6,
+    name: "France",
+    code: "FR",
+    revenue: "$350,000",
+    revPercent: 4.9,
+    impressions: "1,800,000",
+    impPercent: 4.68,
+  },
+];
+
+function getBarWidth(value: number, max: number): number {
+  return (value / max) * 100;
+}
+
+const maxRevPercent = Math.max(...tableData.map((d) => d.revPercent));
+</script>
+
+<Table.Root>
+  <Table.Header>
+    <Table.Row class="border-b border-border hover:bg-transparent">
+      <Table.Head class="h-10 w-10 pl-5"></Table.Head>
+      <Table.Head class="h-10 text-xs font-medium text-muted-foreground">Country</Table.Head>
+      <Table.Head class="h-10 text-right text-xs font-medium text-muted-foreground">Revenue</Table.Head>
+      <Table.Head class="h-10 w-32 text-right text-xs font-medium text-muted-foreground">% of revenue</Table.Head>
+      <Table.Head class="h-10 text-right text-xs font-medium text-muted-foreground">Impressions</Table.Head>
+      <Table.Head class="h-10 pr-5 text-right text-xs font-medium text-muted-foreground">% of impr.</Table.Head>
+    </Table.Row>
+  </Table.Header>
+  <Table.Body>
+    {#each tableData as row, i}
+      <Table.Row class="group border-b border-border/50 transition-colors last:border-0 hover:bg-muted/30">
+        <Table.Cell class="w-10 py-3 pl-5">
+          <div class="flex h-4 w-4 items-center justify-center rounded border border-border bg-muted/50 text-[10px] font-medium text-muted-foreground">
+            {i + 1}
+          </div>
+        </Table.Cell>
+        <Table.Cell class="py-3">
+          <div class="flex items-center gap-2">
+            <span class="rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] font-medium text-muted-foreground">{row.code}</span>
+            <span class="text-[13px] font-medium text-foreground">{row.name}</span>
+          </div>
+        </Table.Cell>
+        <Table.Cell class="py-3 text-right font-medium tabular-nums text-foreground">{row.revenue}</Table.Cell>
+        <Table.Cell class="w-32 py-3">
+          <div class="flex items-center justify-end gap-2">
+            <div class="h-1.5 w-16 overflow-hidden rounded-full bg-muted">
+              <div
+                class="h-full rounded-full bg-foreground/70 transition-all duration-300"
+                style="width: {getBarWidth(row.revPercent, maxRevPercent)}%"
+              ></div>
+            </div>
+            <span class="w-12 text-right font-medium tabular-nums text-foreground">{row.revPercent.toFixed(2)}%</span>
+          </div>
+        </Table.Cell>
+        <Table.Cell class="py-3 text-right tabular-nums text-muted-foreground">{row.impressions}</Table.Cell>
+        <Table.Cell class="py-3 pr-5 text-right tabular-nums text-muted-foreground">{row.impPercent.toFixed(2)}%</Table.Cell>
+      </Table.Row>
+    {/each}
+  </Table.Body>
+</Table.Root>
diff --git a/apps/publisher-dashboard/src/lib/components/dashboard/tabs/domain-table.svelte b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/domain-table.svelte
new file mode 100644
index 0000000..c653c92
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/domain-table.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+import * as Table from "$lib/components/ui/table";
+
+const tableData = [
+  {
+    id: 1,
+    name: "example.com",
+    revenue: "$2,500,000",
+    revPercent: 35.0,
+    impressions: "12,500,000",
+    impPercent: 32.5,
+  },
+  {
+    id: 2,
+    name: "news-site.org",
+    revenue: "$1,800,000",
+    revPercent: 25.2,
+    impressions: "9,200,000",
+    impPercent: 23.9,
+  },
+  {
+    id: 3,
+    name: "blog-network.net",
+    revenue: "$1,200,000",
+    revPercent: 16.8,
+    impressions: "7,100,000",
+    impPercent: 18.45,
+  },
+];
+
+function getBarWidth(value: number, max: number): number {
+  return (value / max) * 100;
+}
+
+const maxRevPercent = Math.max(...tableData.map((d) => d.revPercent));
+</script>
+
+<Table.Root>
+  <Table.Header>
+    <Table.Row class="border-b border-border hover:bg-transparent">
+      <Table.Head class="h-10 w-10 pl-5"></Table.Head>
+      <Table.Head class="h-10 text-xs font-medium text-muted-foreground">Domain</Table.Head>
+      <Table.Head class="h-10 text-right text-xs font-medium text-muted-foreground">Revenue</Table.Head>
+      <Table.Head class="h-10 w-32 text-right text-xs font-medium text-muted-foreground">% of revenue</Table.Head>
+      <Table.Head class="h-10 text-right text-xs font-medium text-muted-foreground">Impressions</Table.Head>
+      <Table.Head class="h-10 pr-5 text-right text-xs font-medium text-muted-foreground">% of impr.</Table.Head>
+    </Table.Row>
+  </Table.Header>
+  <Table.Body>
+    {#each tableData as row, i}
+      <Table.Row class="group border-b border-border/50 transition-colors last:border-0 hover:bg-muted/30">
+        <Table.Cell class="w-10 py-3 pl-5">
+          <div class="flex h-4 w-4 items-center justify-center rounded border border-border bg-muted/50 text-[10px] font-medium text-muted-foreground">
+            {i + 1}
+          </div>
+        </Table.Cell>
+        <Table.Cell class="py-3">
+          <span class="text-[13px] font-medium text-foreground">{row.name}</span>
+        </Table.Cell>
+        <Table.Cell class="py-3 text-right font-medium tabular-nums text-foreground">{row.revenue}</Table.Cell>
+        <Table.Cell class="w-32 py-3">
+          <div class="flex items-center justify-end gap-2">
+            <div class="h-1.5 w-16 overflow-hidden rounded-full bg-muted">
+              <div
+                class="h-full rounded-full bg-foreground/70 transition-all duration-300"
+                style="width: {getBarWidth(row.revPercent, maxRevPercent)}%"
+              ></div>
+            </div>
+            <span class="w-12 text-right font-medium tabular-nums text-foreground">{row.revPercent.toFixed(2)}%</span>
+          </div>
+        </Table.Cell>
+        <Table.Cell class="py-3 text-right tabular-nums text-muted-foreground">{row.impressions}</Table.Cell>
+        <Table.Cell class="py-3 pr-5 text-right tabular-nums text-muted-foreground">{row.impPercent.toFixed(2)}%</Table.Cell>
+      </Table.Row>
+    {/each}
+  </Table.Body>
+</Table.Root>
diff --git a/apps/publisher-dashboard/src/lib/components/dashboard/tabs/index.ts b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/index.ts
new file mode 100644
index 0000000..85e7ce5
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/index.ts
@@ -0,0 +1,5 @@
+export { default as AdUnitTable } from "./ad-unit-table.svelte";
+export { default as CountryTable } from "./country-table.svelte";
+export { default as DomainTable } from "./domain-table.svelte";
+export { default as KeyValueTable } from "./key-value-table.svelte";
+export { default as SourceTable } from "./source-table.svelte";
diff --git a/apps/publisher-dashboard/src/lib/components/dashboard/tabs/key-value-table.svelte b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/key-value-table.svelte
new file mode 100644
index 0000000..d82bb5d
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/key-value-table.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+import * as Table from "$lib/components/ui/table";
+
+const tableData = [
+  {
+    id: 1,
+    key: "device",
+    value: "desktop",
+    revenue: "$2,100,000",
+    revPercent: 38.5,
+    impressions: "10,500,000",
+    impPercent: 35.0,
+  },
+  {
+    id: 2,
+    key: "device",
+    value: "mobile",
+    revenue: "$1,800,000",
+    revPercent: 33.0,
+    impressions: "9,800,000",
+    impPercent: 32.67,
+  },
+  {
+    id: 3,
+    key: "device",
+    value: "tablet",
+    revenue: "$450,000",
+    revPercent: 8.25,
+    impressions: "2,400,000",
+    impPercent: 8.0,
+  },
+  {
+    id: 4,
+    key: "section",
+    value: "news",
+    revenue: "$680,000",
+    revPercent: 12.47,
+    impressions: "3,600,000",
+    impPercent: 12.0,
+  },
+  {
+    id: 5,
+    key: "section",
+    value: "sports",
+    revenue: "$420,000",
+    revPercent: 7.7,
+    impressions: "2,200,000",
+    impPercent: 7.33,
+  },
+];
+
+function getBarWidth(value: number, max: number): number {
+  return (value / max) * 100;
+}
+
+const maxRevPercent = Math.max(...tableData.map((d) => d.revPercent));
+</script>
+
+<Table.Root>
+  <Table.Header>
+    <Table.Row class="border-b border-border hover:bg-transparent">
+      <Table.Head class="h-10 w-10 pl-5"></Table.Head>
+      <Table.Head class="h-10 text-xs font-medium text-muted-foreground">Key</Table.Head>
+      <Table.Head class="h-10 text-xs font-medium text-muted-foreground">Value</Table.Head>
+      <Table.Head class="h-10 text-right text-xs font-medium text-muted-foreground">Revenue</Table.Head>
+      <Table.Head class="h-10 w-32 text-right text-xs font-medium text-muted-foreground">% of revenue</Table.Head>
+      <Table.Head class="h-10 text-right text-xs font-medium text-muted-foreground">Impressions</Table.Head>
+      <Table.Head class="h-10 pr-5 text-right text-xs font-medium text-muted-foreground">% of impr.</Table.Head>
+    </Table.Row>
+  </Table.Header>
+  <Table.Body>
+    {#each tableData as row, i}
+      <Table.Row class="group border-b border-border/50 transition-colors last:border-0 hover:bg-muted/30">
+        <Table.Cell class="w-10 py-3 pl-5">
+          <div class="flex h-4 w-4 items-center justify-center rounded border border-border bg-muted/50 text-[10px] font-medium text-muted-foreground">
+            {i + 1}
+          </div>
+        </Table.Cell>
+        <Table.Cell class="py-3">
+          <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] font-medium text-muted-foreground">{row.key}</code>
+        </Table.Cell>
+        <Table.Cell class="py-3">
+          <span class="text-[13px] font-medium text-foreground">{row.value}</span>
+        </Table.Cell>
+        <Table.Cell class="py-3 text-right font-medium tabular-nums text-foreground">{row.revenue}</Table.Cell>
+        <Table.Cell class="w-32 py-3">
+          <div class="flex items-center justify-end gap-2">
+            <div class="h-1.5 w-16 overflow-hidden rounded-full bg-muted">
+              <div
+                class="h-full rounded-full bg-foreground/70 transition-all duration-300"
+                style="width: {getBarWidth(row.revPercent, maxRevPercent)}%"
+              ></div>
+            </div>
+            <span class="w-12 text-right font-medium tabular-nums text-foreground">{row.revPercent.toFixed(2)}%</span>
+          </div>
+        </Table.Cell>
+        <Table.Cell class="py-3 text-right tabular-nums text-muted-foreground">{row.impressions}</Table.Cell>
+        <Table.Cell class="py-3 pr-5 text-right tabular-nums text-muted-foreground">{row.impPercent.toFixed(2)}%</Table.Cell>
+      </Table.Row>
+    {/each}
+  </Table.Body>
+</Table.Root>
diff --git a/apps/publisher-dashboard/src/lib/components/dashboard/tabs/source-table.svelte b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/source-table.svelte
new file mode 100644
index 0000000..ee400f1
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/source-table.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+import * as Table from "$lib/components/ui/table";
+
+const tableData = [
+  {
+    id: 1,
+    name: "Google AdX",
+    revenue: "$2,800,000",
+    revPercent: 39.2,
+    impressions: "14,000,000",
+    impPercent: 36.4,
+  },
+  {
+    id: 2,
+    name: "Amazon TAM",
+    revenue: "$1,500,000",
+    revPercent: 21.0,
+    impressions: "7,800,000",
+    impPercent: 20.28,
+  },
+  {
+    id: 3,
+    name: "OpenX",
+    revenue: "$980,000",
+    revPercent: 13.72,
+    impressions: "5,200,000",
+    impPercent: 13.52,
+  },
+  {
+    id: 4,
+    name: "Prebid",
+    revenue: "$720,000",
+    revPercent: 10.08,
+    impressions: "3,900,000",
+    impPercent: 10.14,
+  },
+  {
+    id: 5,
+    name: "Index Exchange",
+    revenue: "$550,000",
+    revPercent: 7.7,
+    impressions: "2,800,000",
+    impPercent: 7.28,
+  },
+];
+
+function getBarWidth(value: number, max: number): number {
+  return (value / max) * 100;
+}
+
+const maxRevPercent = Math.max(...tableData.map((d) => d.revPercent));
+</script>
+
+<Table.Root>
+  <Table.Header>
+    <Table.Row class="border-b border-border hover:bg-transparent">
+      <Table.Head class="h-10 w-10 pl-5"></Table.Head>
+      <Table.Head class="h-10 text-xs font-medium text-muted-foreground">Source</Table.Head>
+      <Table.Head class="h-10 text-right text-xs font-medium text-muted-foreground">Revenue</Table.Head>
+      <Table.Head class="h-10 w-32 text-right text-xs font-medium text-muted-foreground">% of revenue</Table.Head>
+      <Table.Head class="h-10 text-right text-xs font-medium text-muted-foreground">Impressions</Table.Head>
+      <Table.Head class="h-10 pr-5 text-right text-xs font-medium text-muted-foreground">% of impr.</Table.Head>
+    </Table.Row>
+  </Table.Header>
+  <Table.Body>
+    {#each tableData as row, i}
+      <Table.Row class="group border-b border-border/50 transition-colors last:border-0 hover:bg-muted/30">
+        <Table.Cell class="w-10 py-3 pl-5">
+          <div class="flex h-4 w-4 items-center justify-center rounded border border-border bg-muted/50 text-[10px] font-medium text-muted-foreground">
+            {i + 1}
+          </div>
+        </Table.Cell>
+        <Table.Cell class="py-3">
+          <span class="text-[13px] font-medium text-foreground">{row.name}</span>
+        </Table.Cell>
+        <Table.Cell class="py-3 text-right font-medium tabular-nums text-foreground">{row.revenue}</Table.Cell>
+        <Table.Cell class="w-32 py-3">
+          <div class="flex items-center justify-end gap-2">
+            <div class="h-1.5 w-16 overflow-hidden rounded-full bg-muted">
+              <div
+                class="h-full rounded-full bg-foreground/70 transition-all duration-300"
+                style="width: {getBarWidth(row.revPercent, maxRevPercent)}%"
+              ></div>
+            </div>
+            <span class="w-12 text-right font-medium tabular-nums text-foreground">{row.revPercent.toFixed(2)}%</span>
+          </div>
+        </Table.Cell>
+        <Table.Cell class="py-3 text-right tabular-nums text-muted-foreground">{row.impressions}</Table.Cell>
+        <Table.Cell class="py-3 pr-5 text-right tabular-nums text-muted-foreground">{row.impPercent.toFixed(2)}%</Table.Cell>
+      </Table.Row>
+    {/each}
+  </Table.Body>
+</Table.Root>
diff --git a/apps/publisher-dashboard/src/lib/components/layout/app-header.svelte b/apps/publisher-dashboard/src/lib/components/layout/app-header.svelte
index e4b72cc..b416185 100644
--- a/apps/publisher-dashboard/src/lib/components/layout/app-header.svelte
+++ b/apps/publisher-dashboard/src/lib/components/layout/app-header.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-import { Badge } from "$lib/components/ui/badge";
 import { Button } from "$lib/components/ui/button";
+import { Separator } from "$lib/components/ui/separator";
 import { cn } from "$lib/utils.js";
+import MobileNav from "./mobile-nav.svelte";
 
 interface Props {
   title: string;
@@ -12,57 +13,84 @@ let { title, class: className }: Props = $props();
 
 const filters = [
   { label: "This month", removable: true },
-  { label: "in 6 countries, in 3 domains", removable: true },
+  { label: "6 countries", removable: true },
+  { label: "3 domains", removable: true },
 ];
 </script>
 
 <header
   class={cn(
-    "flex h-16 items-center justify-between border-b border-border bg-card px-6",
-    className
+    "flex h-14 items-center justify-between border-b border-border bg-card px-4 lg:px-6",
+    className,
   )}
 >
-  <h1 class="text-xl font-semibold tracking-tight text-foreground">{title}</h1>
-
   <div class="flex items-center gap-3">
-    <!-- Filter Badges -->
-    {#each filters as filter}
-      <Badge variant="secondary" class="gap-1.5 px-3 py-1.5 text-sm font-normal">
-        {filter.label}
-        {#if filter.removable}
-          <button class="ml-1 rounded-full hover:bg-muted-foreground/20 p-0.5" aria-label="Remove filter">
-            <svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M18 6L6 18M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" />
-            </svg>
-          </button>
-        {/if}
-      </Badge>
-    {/each}
+    <!-- Mobile menu button -->
+    <MobileNav class="lg:hidden" />
 
+    <h1 class="text-base font-semibold tracking-tight text-foreground lg:text-lg">{title}</h1>
+
+    <!-- Filters - hidden on mobile -->
+    {#if filters.length > 0}
+      <div class="hidden items-center gap-4 lg:flex">
+        <Separator orientation="vertical" class="h-5" />
+
+        <div class="flex items-center gap-2">
+          {#each filters as filter}
+            <div
+              class="group flex items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors hover:border-muted-foreground/30"
+            >
+              <span>{filter.label}</span>
+              {#if filter.removable}
+                <button
+                  class="rounded-sm p-0.5 opacity-60 transition-opacity hover:opacity-100"
+                  aria-label="Remove filter"
+                >
+                  <svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M18 6L6 18M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" />
+                  </svg>
+                </button>
+              {/if}
+            </div>
+          {/each}
+        </div>
+      </div>
+    {/if}
+  </div>
+
+  <div class="flex items-center gap-1">
     <!-- Search -->
-    <Button variant="ghost" size="icon" class="h-9 w-9">
-      <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <Button variant="ghost" size="icon" class="h-8 w-8 text-muted-foreground hover:text-foreground">
+      <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
         <circle cx="11" cy="11" r="8" />
         <path d="m21 21-4.35-4.35" stroke-linecap="round" />
       </svg>
       <span class="sr-only">Search</span>
     </Button>
 
-    <!-- Settings -->
-    <Button variant="ghost" size="icon" class="h-9 w-9">
-      <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <circle cx="12" cy="12" r="3" />
-        <path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83" stroke-linecap="round" />
+    <!-- Notifications -->
+    <Button variant="ghost" size="icon" class="relative h-8 w-8 text-muted-foreground hover:text-foreground">
+      <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+        <path
+          d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
       </svg>
-      <span class="sr-only">Settings</span>
+      <span class="absolute right-1.5 top-1.5 h-1.5 w-1.5 rounded-full bg-chart-5"></span>
+      <span class="sr-only">Notifications</span>
     </Button>
 
-    <!-- Create New Button -->
-    <Button class="gap-2">
-      <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <path d="M12 5v14M5 12h14" stroke-linecap="round" />
-      </svg>
-      Create new
-    </Button>
+    <!-- Create button - hidden on small mobile -->
+    <div class="hidden items-center sm:flex">
+      <Separator orientation="vertical" class="mx-2 h-5" />
+
+      <Button size="sm" class="h-8 gap-1.5 px-3 text-xs font-medium">
+        <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M12 5v14M5 12h14" stroke-linecap="round" />
+        </svg>
+        <span class="hidden sm:inline">New report</span>
+      </Button>
+    </div>
   </div>
 </header>
diff --git a/apps/publisher-dashboard/src/lib/components/layout/app-sidebar.svelte b/apps/publisher-dashboard/src/lib/components/layout/app-sidebar.svelte
index 4294921..c4d8e1d 100644
--- a/apps/publisher-dashboard/src/lib/components/layout/app-sidebar.svelte
+++ b/apps/publisher-dashboard/src/lib/components/layout/app-sidebar.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+import { page } from "$app/stores";
+import { Separator } from "$lib/components/ui/separator";
 import { cn } from "$lib/utils.js";
 
 interface Props {
@@ -8,80 +10,84 @@ interface Props {
 let { class: className }: Props = $props();
 
 const navItems = [
-  { icon: "home", href: "/", label: "Home" },
-  { icon: "chart", href: "/performance", label: "Performance" },
-  { icon: "document", href: "/reports", label: "Reports" },
+  {
+    icon: "home",
+    href: "/",
+    label: "Home",
+  },
+  {
+    icon: "chart",
+    href: "/performance",
+    label: "Performance",
+  },
+  {
+    icon: "document",
+    href: "/reports",
+    label: "Reports",
+  },
+];
+
+const bottomItems = [
+  {
+    icon: "settings",
+    href: "/settings",
+    label: "Settings",
+  },
 ];
 </script>
 
 <aside
   class={cn(
-    "flex h-screen w-16 flex-col items-center border-r border-border bg-card py-4",
-    className
+    "flex h-screen w-[72px] flex-col items-center bg-sidebar py-5",
+    "border-r border-sidebar-border",
+    className,
   )}
 >
   <!-- Logo -->
   <a
     href="/"
     aria-label="Home"
-    class="mb-8 flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 shadow-md transition-transform hover:scale-105"
+    class="group flex h-10 w-10 items-center justify-center rounded-lg bg-foreground transition-all duration-200 hover:scale-[1.02]"
   >
     <svg
-      class="h-6 w-6 text-white"
+      class="h-5 w-5 text-background transition-transform duration-200 group-hover:scale-105"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
+      stroke-width="2.5"
     >
-      <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
+      <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke-linecap="round" stroke-linejoin="round" />
     </svg>
   </a>
 
-  <!-- Navigation -->
-  <nav class="flex flex-1 flex-col items-center gap-2">
+  <Separator class="my-5 w-8" />
+
+  <!-- Main Navigation -->
+  <nav class="flex flex-1 flex-col items-center gap-1">
     {#each navItems as item}
+      {@const isActive = $page.url.pathname === item.href || (item.href !== "/" && $page.url.pathname.startsWith(item.href))}
       <a
         href={item.href}
-        class="group relative flex h-10 w-10 items-center justify-center rounded-lg text-muted-foreground transition-all hover:bg-accent hover:text-foreground"
+        class={cn(
+          "group relative flex h-10 w-10 items-center justify-center rounded-lg transition-all duration-150",
+          isActive
+            ? "bg-sidebar-accent text-foreground"
+            : "text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground",
+        )}
         aria-label={item.label}
+        aria-current={isActive ? "page" : undefined}
       >
         {#if item.icon === "home"}
-          <svg
-            class="h-5 w-5"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-          >
-            <path
-              d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
+          <svg class="h-[18px] w-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+            <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" stroke-linecap="round" stroke-linejoin="round" />
             <path d="M9 22V12h6v10" stroke-linecap="round" stroke-linejoin="round" />
           </svg>
         {:else if item.icon === "chart"}
-          <svg
-            class="h-5 w-5"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-          >
-            <path
-              d="M18 20V10M12 20V4M6 20v-6"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
+          <svg class="h-[18px] w-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+            <path d="M18 20V10M12 20V4M6 20v-6" stroke-linecap="round" stroke-linejoin="round" />
           </svg>
         {:else if item.icon === "document"}
-          <svg
-            class="h-5 w-5"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-          >
+          <svg class="h-[18px] w-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
             <path
               d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z"
               stroke-linecap="round"
@@ -93,18 +99,59 @@ const navItems = [
 
         <!-- Tooltip -->
         <span
-          class="pointer-events-none absolute left-full ml-2 whitespace-nowrap rounded-md bg-foreground px-2 py-1 text-xs text-background opacity-0 shadow-lg transition-opacity group-hover:opacity-100"
+          class="pointer-events-none absolute left-full ml-3 whitespace-nowrap rounded-md bg-foreground px-2.5 py-1.5 text-xs font-medium text-background opacity-0 shadow-lg transition-all duration-150 group-hover:opacity-100"
+        >
+          {item.label}
+        </span>
+
+        <!-- Active indicator -->
+        {#if isActive}
+          <span class="absolute -left-[1px] h-5 w-[3px] rounded-r-full bg-foreground"></span>
+        {/if}
+      </a>
+    {/each}
+  </nav>
+
+  <!-- Bottom Navigation -->
+  <div class="flex flex-col items-center gap-1">
+    {#each bottomItems as item}
+      {@const isActive = $page.url.pathname === item.href}
+      <a
+        href={item.href}
+        class={cn(
+          "group relative flex h-10 w-10 items-center justify-center rounded-lg transition-all duration-150",
+          isActive
+            ? "bg-sidebar-accent text-foreground"
+            : "text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground",
+        )}
+        aria-label={item.label}
+        aria-current={isActive ? "page" : undefined}
+      >
+        {#if item.icon === "settings"}
+          <svg class="h-[18px] w-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+            <circle cx="12" cy="12" r="3" />
+            <path
+              d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        {/if}
+
+        <span
+          class="pointer-events-none absolute left-full ml-3 whitespace-nowrap rounded-md bg-foreground px-2.5 py-1.5 text-xs font-medium text-background opacity-0 shadow-lg transition-all duration-150 group-hover:opacity-100"
         >
           {item.label}
         </span>
       </a>
     {/each}
-  </nav>
 
-  <!-- User Avatar -->
-  <div class="mt-auto">
+    <Separator class="my-3 w-8" />
+
+    <!-- User Avatar -->
     <button
-      class="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-emerald-400 to-teal-500 text-sm font-medium text-white shadow-sm transition-transform hover:scale-105"
+      class="flex h-9 w-9 items-center justify-center rounded-full bg-gradient-to-br from-chart-1 to-chart-2 text-xs font-semibold text-white shadow-sm ring-2 ring-background transition-transform duration-150 hover:scale-105"
+      aria-label="User menu"
     >
       JD
     </button>
diff --git a/apps/publisher-dashboard/src/lib/components/layout/dashboard-layout.svelte b/apps/publisher-dashboard/src/lib/components/layout/dashboard-layout.svelte
index 661b3d0..8434a38 100644
--- a/apps/publisher-dashboard/src/lib/components/layout/dashboard-layout.svelte
+++ b/apps/publisher-dashboard/src/lib/components/layout/dashboard-layout.svelte
@@ -14,12 +14,15 @@ let { title, children, class: className }: Props = $props();
 </script>
 
 <div class="flex h-screen overflow-hidden bg-background">
-  <AppSidebar />
+  <!-- Desktop sidebar - hidden on mobile -->
+  <div class="hidden lg:block">
+    <AppSidebar />
+  </div>
 
   <div class="flex flex-1 flex-col overflow-hidden">
     <AppHeader {title} />
 
-    <main class={cn("flex-1 overflow-auto p-6", className)}>
+    <main class={cn("flex-1 overflow-auto p-4 lg:p-6", className)}>
       {@render children()}
     </main>
   </div>
diff --git a/apps/publisher-dashboard/src/lib/components/layout/index.ts b/apps/publisher-dashboard/src/lib/components/layout/index.ts
index d8bb3d5..5ff51f1 100644
--- a/apps/publisher-dashboard/src/lib/components/layout/index.ts
+++ b/apps/publisher-dashboard/src/lib/components/layout/index.ts
@@ -1,3 +1,4 @@
 export { default as AppHeader } from "./app-header.svelte";
 export { default as AppSidebar } from "./app-sidebar.svelte";
 export { default as DashboardLayout } from "./dashboard-layout.svelte";
+export { default as MobileNav } from "./mobile-nav.svelte";
diff --git a/apps/publisher-dashboard/src/lib/components/layout/mobile-nav.svelte b/apps/publisher-dashboard/src/lib/components/layout/mobile-nav.svelte
new file mode 100644
index 0000000..8c1c5a6
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/layout/mobile-nav.svelte
@@ -0,0 +1,140 @@
+<script lang="ts">
+import { page } from "$app/stores";
+import { Button } from "$lib/components/ui/button";
+import { Separator } from "$lib/components/ui/separator";
+import * as Sheet from "$lib/components/ui/sheet";
+import { cn } from "$lib/utils.js";
+
+interface Props {
+  class?: string;
+}
+
+let { class: className }: Props = $props();
+
+let open = $state(false);
+
+const navItems = [
+  { icon: "home", href: "/", label: "Home" },
+  { icon: "chart", href: "/performance", label: "Performance" },
+  { icon: "document", href: "/reports", label: "Reports" },
+];
+
+const bottomItems = [
+  { icon: "settings", href: "/settings", label: "Settings" },
+];
+
+function handleNavClick() {
+  open = false;
+}
+</script>
+
+<Sheet.Root bind:open>
+  <Sheet.Trigger asChild>
+    {#snippet child({ props })}
+      <Button variant="ghost" size="icon" class={cn("h-9 w-9 lg:hidden", className)} {...props}>
+        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+          <path d="M3 12h18M3 6h18M3 18h18" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+        <span class="sr-only">Open menu</span>
+      </Button>
+    {/snippet}
+  </Sheet.Trigger>
+
+  <Sheet.Content side="left" class="w-72 p-0">
+    <Sheet.Header class="border-b border-border px-6 py-4">
+      <div class="flex items-center gap-3">
+        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-foreground">
+          <svg class="h-5 w-5 text-background" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </div>
+        <Sheet.Title class="text-lg font-semibold">Publisher Dashboard</Sheet.Title>
+      </div>
+    </Sheet.Header>
+
+    <nav class="flex flex-1 flex-col p-4">
+      <div class="space-y-1">
+        {#each navItems as item}
+          {@const isActive =
+            $page.url.pathname === item.href ||
+            (item.href !== "/" && $page.url.pathname.startsWith(item.href))}
+          <a
+            href={item.href}
+            onclick={handleNavClick}
+            class={cn(
+              "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
+              isActive
+                ? "bg-accent text-foreground"
+                : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+            )}
+          >
+            {#if item.icon === "home"}
+              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+                <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M9 22V12h6v10" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+            {:else if item.icon === "chart"}
+              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+                <path d="M18 20V10M12 20V4M6 20v-6" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+            {:else if item.icon === "document"}
+              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+                <path
+                  d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+            {/if}
+            {item.label}
+          </a>
+        {/each}
+      </div>
+
+      <Separator class="my-4" />
+
+      <div class="space-y-1">
+        {#each bottomItems as item}
+          {@const isActive = $page.url.pathname === item.href}
+          <a
+            href={item.href}
+            onclick={handleNavClick}
+            class={cn(
+              "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
+              isActive
+                ? "bg-accent text-foreground"
+                : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+            )}
+          >
+            {#if item.icon === "settings"}
+              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+                <circle cx="12" cy="12" r="3" />
+                <path
+                  d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            {/if}
+            {item.label}
+          </a>
+        {/each}
+      </div>
+
+      <!-- User section at bottom -->
+      <div class="mt-auto pt-4">
+        <Separator class="mb-4" />
+        <div class="flex items-center gap-3 rounded-lg px-3 py-2">
+          <div class="flex h-9 w-9 items-center justify-center rounded-full bg-gradient-to-br from-chart-1 to-chart-2 text-xs font-semibold text-white">
+            JD
+          </div>
+          <div class="flex-1">
+            <p class="text-sm font-medium text-foreground">John Doe</p>
+            <p class="text-xs text-muted-foreground">john@example.com</p>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </Sheet.Content>
+</Sheet.Root>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/sheet/index.ts b/apps/publisher-dashboard/src/lib/components/ui/sheet/index.ts
new file mode 100644
index 0000000..d9d46fa
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/sheet/index.ts
@@ -0,0 +1,34 @@
+import Root from "./sheet.svelte";
+import Close from "./sheet-close.svelte";
+import Content from "./sheet-content.svelte";
+import Description from "./sheet-description.svelte";
+import Footer from "./sheet-footer.svelte";
+import Header from "./sheet-header.svelte";
+import Overlay from "./sheet-overlay.svelte";
+import Portal from "./sheet-portal.svelte";
+import Title from "./sheet-title.svelte";
+import Trigger from "./sheet-trigger.svelte";
+
+export {
+  Root,
+  Close,
+  Trigger,
+  Portal,
+  Overlay,
+  Content,
+  Header,
+  Footer,
+  Title,
+  Description,
+  //
+  Root as Sheet,
+  Close as SheetClose,
+  Trigger as SheetTrigger,
+  Portal as SheetPortal,
+  Overlay as SheetOverlay,
+  Content as SheetContent,
+  Header as SheetHeader,
+  Footer as SheetFooter,
+  Title as SheetTitle,
+  Description as SheetDescription,
+};
diff --git a/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-close.svelte b/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-close.svelte
new file mode 100644
index 0000000..d1d8d76
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-close.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+import { Dialog as SheetPrimitive } from "bits-ui";
+
+let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps =
+  $props();
+</script>
+
+<SheetPrimitive.Close bind:ref data-slot="sheet-close" {...restProps} />
diff --git a/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-content.svelte b/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-content.svelte
new file mode 100644
index 0000000..5c7befc
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-content.svelte
@@ -0,0 +1,62 @@
+<script lang="ts" module>
+import { tv, type VariantProps } from "tailwind-variants";
+export const sheetVariants = tv({
+  base: "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  variants: {
+    side: {
+      top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+      bottom:
+        "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+      left: "data-[state=closed]:slide-out-to-start data-[state=open]:slide-in-from-start inset-y-0 start-0 h-full w-3/4 border-e sm:max-w-sm",
+      right:
+        "data-[state=closed]:slide-out-to-end data-[state=open]:slide-in-from-end inset-y-0 end-0 h-full w-3/4 border-s sm:max-w-sm",
+    },
+  },
+  defaultVariants: {
+    side: "right",
+  },
+});
+
+export type Side = VariantProps<typeof sheetVariants>["side"];
+</script>
+
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import XIcon from "@lucide/svelte/icons/x";
+	import type { Snippet } from "svelte";
+	import SheetPortal from "./sheet-portal.svelte";
+	import SheetOverlay from "./sheet-overlay.svelte";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		side = "right",
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
+		side?: Side;
+		children: Snippet;
+	} = $props();
+</script>
+
+<SheetPortal {...portalProps}>
+	<SheetOverlay />
+	<SheetPrimitive.Content
+		bind:ref
+		data-slot="sheet-content"
+		class={cn(sheetVariants({ side }), className)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<SheetPrimitive.Close
+			class="ring-offset-background focus-visible:ring-ring absolute end-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none"
+		>
+			<XIcon class="size-4" />
+			<span class="sr-only">Close</span>
+		</SheetPrimitive.Close>
+	</SheetPrimitive.Content>
+</SheetPortal>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-description.svelte b/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-description.svelte
new file mode 100644
index 0000000..aba94c9
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+import { Dialog as SheetPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: SheetPrimitive.DescriptionProps = $props();
+</script>
+
+<SheetPrimitive.Description
+	bind:ref
+	data-slot="sheet-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-footer.svelte b/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-footer.svelte
new file mode 100644
index 0000000..d1bd913
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+import type { HTMLAttributes } from "svelte/elements";
+import { cn, type WithElementRef } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-footer"
+	class={cn("mt-auto flex flex-col gap-2 p-4", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-header.svelte b/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-header.svelte
new file mode 100644
index 0000000..a0f659a
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+import type { HTMLAttributes } from "svelte/elements";
+import { cn, type WithElementRef } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-header"
+	class={cn("flex flex-col gap-1.5 p-4", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-overlay.svelte b/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-overlay.svelte
new file mode 100644
index 0000000..5039e7f
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+import { Dialog as SheetPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: SheetPrimitive.OverlayProps = $props();
+</script>
+
+<SheetPrimitive.Overlay
+	bind:ref
+	data-slot="sheet-overlay"
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-portal.svelte b/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-portal.svelte
new file mode 100644
index 0000000..628f995
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Dialog as SheetPrimitive } from "bits-ui";
+
+let { ...restProps }: SheetPrimitive.PortalProps = $props();
+</script>
+
+<SheetPrimitive.Portal {...restProps} />
diff --git a/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-title.svelte b/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-title.svelte
new file mode 100644
index 0000000..ae089ce
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+import { Dialog as SheetPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: SheetPrimitive.TitleProps = $props();
+</script>
+
+<SheetPrimitive.Title
+	bind:ref
+	data-slot="sheet-title"
+	class={cn("text-foreground font-semibold", className)}
+	{...restProps}
+/>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-trigger.svelte b/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-trigger.svelte
new file mode 100644
index 0000000..31be069
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet-trigger.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+import { Dialog as SheetPrimitive } from "bits-ui";
+
+let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps =
+  $props();
+</script>
+
+<SheetPrimitive.Trigger bind:ref data-slot="sheet-trigger" {...restProps} />
diff --git a/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet.svelte b/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet.svelte
new file mode 100644
index 0000000..919fe41
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/sheet/sheet.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+import { Dialog as SheetPrimitive } from "bits-ui";
+
+let { open = $bindable(false), ...restProps }: SheetPrimitive.RootProps =
+  $props();
+</script>
+
+<SheetPrimitive.Root bind:open {...restProps} />
diff --git a/apps/publisher-dashboard/src/routes/performance/+page.svelte b/apps/publisher-dashboard/src/routes/performance/+page.svelte
index 18c8673..09fa1ab 100644
--- a/apps/publisher-dashboard/src/routes/performance/+page.svelte
+++ b/apps/publisher-dashboard/src/routes/performance/+page.svelte
@@ -39,30 +39,34 @@ const metrics = [
 
 <DashboardLayout title="SSP Network Performance">
   <div class="space-y-6">
-    <!-- Metric Cards Row -->
-    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
-      {#each metrics as metric}
-        <MetricCard
-          label={metric.label}
-          value={metric.value}
-          change={metric.change}
-          sparklineData={metric.sparklineData}
-        />
-      {/each}
-    </div>
-
-    <!-- Main Content Grid -->
-    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
-      <!-- Performance Table - 2 columns -->
-      <div class="lg:col-span-2">
-        <PerformanceTable />
+    <!-- Metric Cards -->
+    <section>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        {#each metrics as metric}
+          <MetricCard
+            label={metric.label}
+            value={metric.value}
+            change={metric.change}
+            sparklineData={metric.sparklineData}
+          />
+        {/each}
       </div>
+    </section>
 
-      <!-- Right Sidebar -->
-      <div class="space-y-6">
-        <PeakTrafficChart />
-        <FrequentFilters />
+    <!-- Main Content -->
+    <section>
+      <div class="grid grid-cols-1 gap-6 xl:grid-cols-12">
+        <!-- Performance Table -->
+        <div class="xl:col-span-8">
+          <PerformanceTable />
+        </div>
+
+        <!-- Sidebar widgets -->
+        <div class="space-y-6 xl:col-span-4">
+          <PeakTrafficChart />
+          <FrequentFilters />
+        </div>
       </div>
-    </div>
+    </section>
   </div>
 </DashboardLayout>
diff --git a/bun.lock b/bun.lock
index 21560d2..251b8ce 100644
--- a/bun.lock
+++ b/bun.lock
@@ -24,7 +24,7 @@
       },
       "devDependencies": {
         "@internationalized/date": "^3.10.1",
-        "@lucide/svelte": "^0.562.0",
+        "@lucide/svelte": "^0.561.0",
         "@macalinao/tsconfig": "catalog:",
         "@sveltejs/adapter-static": "^3.0.8",
         "@sveltejs/kit": "^2.21.1",
@@ -142,7 +142,7 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
-    "@lucide/svelte": ["@lucide/svelte@0.562.0", "", { "peerDependencies": { "svelte": "^5" } }, "sha512-wDMULwtTFN2Sc/TFBm6gfuVCNb4Y5P9LDrwxNnUbV52+IEU7NXZmvxwXoz+vrrpad6Xupq+Hw5eUlqIHEGhouw=="],
+    "@lucide/svelte": ["@lucide/svelte@0.561.0", "", { "peerDependencies": { "svelte": "^5" } }, "sha512-vofKV2UFVrKE6I4ewKJ3dfCXSV6iP6nWVmiM83MLjsU91EeJcEg7LoWUABLp/aOTxj1HQNbJD1f3g3L0JQgH9A=="],
 
     "@macalinao/biome-config": ["@macalinao/biome-config@0.1.7", "", { "peerDependencies": { "@biomejs/biome": "^2.3.10" } }, "sha512-JijaB/REJr6D3fGV36d1XGsf2WFofgnMS1WbOYcNJCQpic2XmFALV7GNL28z7rDCN3/DeSovPuW/1yImce7kPA=="],