diff --git a/src/components/shell/header.tsx b/src/components/shell/header.tsx
new file mode 100644
index 0000000..54d1f0e
--- /dev/null
+++ b/src/components/shell/header.tsx
@@ -0,0 +1,215 @@
+"use client";
+
+import Link from "next/link";
+import { useQuery } from "@tanstack/react-query";
+import {
+ Bell,
+ CircleHelp,
+ Command,
+ LogOut,
+ Menu,
+ MonitorCog,
+ Moon,
+ Search,
+ Sun,
+ UserCircle,
+} from "lucide-react";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { panelService } from "@/api/services/panel-service";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { Logo } from "@/components/common/logo";
+import { cn } from "@/lib/utils";
+import { useUiStore } from "@/stores/ui-store";
+
+export function Header() {
+ const { data } = useQuery({
+ queryKey: ["dashboard-summary"],
+ queryFn: () => panelService.dashboard.summary(),
+ });
+ const setCommandOpen = useUiStore((state) => state.setCommandOpen);
+ const setTheme = useUiStore((state) => state.setTheme);
+ const setDensity = useUiStore((state) => state.setDensity);
+ const setMobileSidebarOpen = useUiStore((state) => state.setMobileSidebarOpen);
+ const collapsed = useUiStore((state) => state.sidebarCollapsed);
+ const summary = data?.data;
+
+ return (
+
+ );
+}
+
+function HeaderMenu({
+ icon,
+ label,
+ items,
+}: {
+ icon: React.ReactNode;
+ label: string;
+ items: string[];
+}) {
+ return (
+
+
+
+
+
+
+ {label}
+
+ {items.map((item) => (
+
+ {item}
+
+ ))}
+
+
+ );
+}