diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
new file mode 100644
index 0000000..d92cb41
--- /dev/null
+++ b/src/components/Sidebar.tsx
@@ -0,0 +1,105 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { Separator } from "@/components/ui/separator";
+import {
+  LayoutDashboard, BarChart3, Users, FileText, Settings,
+  User, LogOut, ChevronLeft, Activity
+} from "lucide-react";
+import { useAuth } from "@/hooks/use-tygarun";
+
+interface SidebarProps {
+  activePath: string;
+}
+
+const navItems = [
+  { label: "Dashboard", icon: LayoutDashboard, path: "/" },
+  { label: "Analytics", icon: BarChart3, path: "/analytics" },
+  { label: "Users", icon: Users, path: "/users" },
+  { label: "Reports", icon: FileText, path: "/reports" },
+  { label: "Settings", icon: Settings, path: "/settings" },
+  { label: "Profile", icon: User, path: "/profile" },
+];
+
+function SidebarContent({ activePath }: SidebarProps) {
+  const { user, isSignedIn, signin, signout } = useAuth();
+  const displayName = user?.name || user?.email || "Sarah Mitchell";
+  const displayRole = user?.role || "Admin";
+  const initials = displayName.split(" ").map((p) => p[0]).join("").slice(0, 2).toUpperCase();
+  return (
+    <div className="relative flex flex-col h-full bg-slate-900/95 backdrop-blur-xl text-white">
+      <div className="absolute left-0 top-0 bottom-0 w-px bg-gradient-to-b from-primary/50 via-primary/20 to-transparent" />
+      {/* ── Logo ── */}
+      <div className="p-6 pb-4">
+        <Link to="/" className="flex items-center gap-3">
+          <div className="h-9 w-9 rounded-xl bg-sky-500 flex items-center justify-center">
+            <Activity className="h-5 w-5 text-white" />
+          </div>
+          <div>
+            <h1 className="text-lg font-bold tracking-tight">MetricFlow</h1>
+            <p className="text-[11px] text-slate-400 -mt-0.5">Analytics Dashboard</p>
+          </div>
+        </Link>
+      </div>
+
+      <Separator className="bg-slate-800 mx-4" />
+
+      {/* ── Navigation ── */}
+      <nav className="flex-1 p-4 space-y-1">
+        {navItems.map((item) => {
+          const isActive = activePath === item.path;
+          return (
+            <Link
+              key={item.path}
+              to={item.path}
+              className={`relative flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors duration-200 \${
+                isActive
+                  ? "bg-sky-500/15 text-sky-400 shadow-sm before:absolute before:left-0 before:top-0 before:bottom-0 before:w-0.5 before:bg-primary before:rounded-r"
+                  : "text-slate-400 hover:text-white hover:bg-muted/80"
+              }`}
+            >
+              <item.icon className="h-5 w-5" />
+              {item.label}
+            </Link>
+          );
+        })}
+      </nav>
+
+      <Separator className="bg-slate-800 mx-4" />
+
+      {/* ── User + Logout ── */}
+      <div className="p-4 space-y-2">
+        <div className="flex items-center gap-3 px-3 py-2">
+          <div className="h-8 w-8 rounded-full bg-sky-500/20 flex items-center justify-center">
+            <span className="text-xs font-semibold text-sky-400">{initials}</span>
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium text-white truncate">{displayName}</p>
+            <p className="text-xs text-slate-500 truncate">{displayRole}</p>
+          </div>
+        </div>
+        <button
+          onClick={() => (isSignedIn ? signout() : signin())}
+          className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-400 hover:text-red-400 hover:bg-slate-800 transition-colors w-full"
+        >
+          <LogOut className="h-5 w-5" />
+          {isSignedIn ? "Log Out" : "Sign In"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default function Sidebar({ activePath }: SidebarProps) {
+  return (
+    <>
+      {/* Desktop Sidebar */}
+      <aside className="hidden lg:flex lg:fixed lg:inset-y-0 lg:left-0 lg:w-64 lg:z-50">
+        <SidebarContent activePath={activePath} />
+      </aside>
+    </>
+  );
+}
+
+export { SidebarContent };