diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..2da85d2
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,134 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import {
+  DropdownMenu, DropdownMenuContent, DropdownMenuItem,
+  DropdownMenuSeparator, DropdownMenuTrigger
+} from "@/components/ui/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import {
+  Menu, Search, Bell, User, Settings, LogOut, ShoppingCart, UserPlus, AlertCircle
+} from "lucide-react";
+import { ThemeToggle } from "@/components/ThemeToggle";
+import { SidebarContent } from "@/components/Sidebar";
+
+export default function Header() {
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  return (
+    <header className="sticky top-0 z-40 bg-white/80 backdrop-blur-lg border-b border-slate-100">
+      <div className="flex items-center justify-between h-16 px-6">
+        {/* Mobile menu */}
+        <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
+          <SheetTrigger asChild>
+            <Button variant="ghost" size="sm" className="lg:hidden h-9 w-9 p-0">
+              <Menu className="h-5 w-5 text-slate-600" />
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="left" className="w-64 p-0">
+            <SidebarContent activePath="/" />
+          </SheetContent>
+        </Sheet>
+
+        {/* Search */}
+        <div className="hidden sm:flex relative flex-1 max-w-md">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
+          <Input
+            placeholder="Search anything..."
+            className="pl-10 bg-slate-50 border-slate-200 focus:bg-white"
+          />
+        </div>
+
+        {/* Right side */}
+        <div className="flex items-center gap-3 ml-auto">
+          <ThemeToggle />
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="ghost" size="sm" className="relative h-9 w-9 p-0">
+                <Bell className="h-5 w-5 text-slate-600" />
+                <span className="absolute -top-0.5 -right-0.5 h-4 w-4 rounded-full bg-red-500 text-[10px] font-bold text-white flex items-center justify-center">
+                  3
+                </span>
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="end" className="w-80 p-0">
+              <div className="p-3 border-b border-slate-100">
+                <p className="text-sm font-semibold text-slate-900">Notifications</p>
+              </div>
+              <div className="divide-y divide-slate-100">
+                <div className="flex items-start gap-3 p-3 hover:bg-muted/50 transition-colors">
+                  <div className="h-8 w-8 rounded-full bg-sky-100 flex items-center justify-center shrink-0 mt-0.5">
+                    <ShoppingCart className="h-4 w-4 text-sky-600" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium text-slate-900">New order received</p>
+                    <p className="text-xs text-slate-500">Order #ORD-7291 for $234.50</p>
+                    <p className="text-xs text-slate-400 mt-1">2 minutes ago</p>
+                  </div>
+                </div>
+                <div className="flex items-start gap-3 p-3 hover:bg-muted/50 transition-colors">
+                  <div className="h-8 w-8 rounded-full bg-emerald-100 flex items-center justify-center shrink-0 mt-0.5">
+                    <UserPlus className="h-4 w-4 text-emerald-600" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium text-slate-900">New user signed up</p>
+                    <p className="text-xs text-slate-500">James Cooper joined as Editor</p>
+                    <p className="text-xs text-slate-400 mt-1">15 minutes ago</p>
+                  </div>
+                </div>
+                <div className="flex items-start gap-3 p-3 hover:bg-muted/50 transition-colors">
+                  <div className="h-8 w-8 rounded-full bg-amber-100 flex items-center justify-center shrink-0 mt-0.5">
+                    <AlertCircle className="h-4 w-4 text-amber-600" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium text-slate-900">Usage limit warning</p>
+                    <p className="text-xs text-slate-500">API requests at 84% of limit</p>
+                    <p className="text-xs text-slate-400 mt-1">1 hour ago</p>
+                  </div>
+                </div>
+              </div>
+              <Separator />
+              <div className="p-2">
+                <Button variant="ghost" size="sm" className="w-full text-xs text-sky-600 hover:text-sky-700">
+                  View all notifications
+                </Button>
+              </div>
+            </PopoverContent>
+          </Popover>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button className="flex items-center gap-2 hover:opacity-80 transition-opacity">
+                <Avatar className="h-8 w-8">
+                  <AvatarFallback className="bg-sky-100 text-sky-700 text-xs font-semibold">SM</AvatarFallback>
+                </Avatar>
+                <span className="hidden md:block text-sm font-medium text-slate-700">Sarah M.</span>
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-48">
+              <DropdownMenuItem asChild>
+                <Link to="/profile" className="flex items-center gap-2 cursor-pointer">
+                  <User className="h-4 w-4" /> Profile
+                </Link>
+              </DropdownMenuItem>
+              <DropdownMenuItem asChild>
+                <Link to="/settings" className="flex items-center gap-2 cursor-pointer">
+                  <Settings className="h-4 w-4" /> Settings
+                </Link>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem className="text-red-600 cursor-pointer">
+                <LogOut className="h-4 w-4 mr-2" /> Log Out
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    </header>
+  );
+}