diff --git a/app/(admin)/_components/AdminCard.tsx b/app/(admin)/_components/AdminCard.tsx
new file mode 100644
index 0000000..c0daa42
--- /dev/null
+++ b/app/(admin)/_components/AdminCard.tsx
@@ -0,0 +1,139 @@
+import React from "react";
+import { cn } from "./utils";
+
+type CardProps = {
+  title?: string;
+  subtitle?: string;
+  className?: string;
+  children: React.ReactNode;
+};
+
+export function Card({ title, subtitle, className, children }: CardProps) {
+  return (
+    <section
+      className={cn(
+        "rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900",
+        className,
+      )}
+    >
+      {title ? (
+        <h3 className="text-sm font-semibold text-slate-900 dark:text-slate-100">
+          {title}
+        </h3>
+      ) : null}
+      {subtitle ? (
+        <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
+          {subtitle}
+        </p>
+      ) : null}
+      <div className={title || subtitle ? "mt-4" : ""}>{children}</div>
+    </section>
+  );
+}
+
+type StatCardProps = {
+  label: string;
+  value: string;
+  trend?: string;
+};
+
+export function StatCard({ label, value, trend }: StatCardProps) {
+  return (
+    <Card className="p-4 sm:p-5">
+      <p className="text-xs font-medium uppercase tracking-wide text-slate-500 dark:text-slate-400">
+        {label}
+      </p>
+      <p className="mt-2 text-2xl font-semibold text-slate-900 dark:text-slate-100">
+        {value}
+      </p>
+      {trend ? (
+        <p className="mt-2 text-xs text-slate-500 dark:text-slate-400">
+          {trend}
+        </p>
+      ) : null}
+    </Card>
+  );
+}
+
+export function PageTitle({
+  title,
+  description,
+}: {
+  title: string;
+  description?: string;
+}) {
+  return (
+    <div>
+      <h1 className="text-xl font-semibold text-slate-900 dark:text-slate-100 sm:text-2xl">
+        {title}
+      </h1>
+      {description ? (
+        <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
+          {description}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+const statusStyles: Record<
+  "success" | "warning" | "danger" | "neutral",
+  string
+> = {
+  success:
+    "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-300",
+  warning:
+    "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-300",
+  danger:
+    "border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-300",
+  neutral:
+    "border-slate-200 bg-slate-100 text-slate-700 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-300",
+};
+
+export function StatusBadge({
+  label,
+  tone,
+}: {
+  label: string;
+  tone: "success" | "warning" | "danger" | "neutral";
+}) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium",
+        statusStyles[tone],
+      )}
+    >
+      {label}
+    </span>
+  );
+}
+
+export function ActionButton({
+  children,
+  variant = "secondary",
+}: {
+  children: React.ReactNode;
+  variant?: "primary" | "secondary" | "danger";
+}) {
+  const variants: Record<typeof variant, string> = {
+    primary:
+      "border-slate-900 bg-slate-900 text-white hover:bg-slate-800 dark:border-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600",
+    secondary:
+      "border-slate-200 bg-white text-slate-700 hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700",
+    danger:
+      "border-rose-200 bg-rose-50 text-rose-700 hover:bg-rose-100 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-300 dark:hover:bg-rose-900",
+  };
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        "inline-flex items-center rounded-lg border px-2.5 py-1.5 text-xs font-medium transition-colors duration-200",
+        variants[variant],
+      )}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/app/(admin)/_components/AdminNavbar.tsx b/app/(admin)/_components/AdminNavbar.tsx
new file mode 100644
index 0000000..b76e8b8
--- /dev/null
+++ b/app/(admin)/_components/AdminNavbar.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import {
+  Bell,
+  Menu,
+  Moon,
+  PanelLeftClose,
+  PanelLeftOpen,
+  Search,
+  Sun,
+} from "lucide-react";
+import { usePathname } from "next/navigation";
+
+const titleMap: Record<string, string> = {
+  "/admin": "Dashboard",
+  "/admin/incident-reports": "Incident Reports",
+  "/admin/agencies": "Agencies",
+  "/admin/users": "Users",
+  "/admin/notifications": "Notifications",
+  "/admin/analytics": "Analytics",
+  "/admin/data-export": "Data Export",
+  "/admin/subscriptions": "Subscriptions",
+  "/admin/settings": "Settings",
+};
+
+export default function AdminNavbar({
+  onMenuClick,
+  isDesktopCollapsed,
+  onToggleDesktopCollapse,
+  theme,
+  onToggleTheme,
+}: {
+  onMenuClick: () => void;
+  isDesktopCollapsed: boolean;
+  onToggleDesktopCollapse: () => void;
+  theme: "light" | "dark";
+  onToggleTheme: () => void;
+}) {
+  const pathname = usePathname();
+  const title = titleMap[pathname] || "Admin";
+
+  return (
+    <header className="sticky top-0 z-20 border-b border-slate-200 bg-white/90 backdrop-blur dark:border-slate-800 dark:bg-slate-900/90">
+      <div className="flex h-16 items-center gap-3 px-4 sm:px-6">
+        <button
+          type="button"
+          onClick={onMenuClick}
+          className="rounded-lg border border-slate-200 p-2 text-slate-600 transition-colors hover:bg-slate-100 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800 lg:hidden"
+          aria-label="Open sidebar"
+        >
+          <Menu className="h-4 w-4" />
+        </button>
+
+        <button
+          type="button"
+          onClick={onToggleDesktopCollapse}
+          className="hidden rounded-lg border border-slate-200 p-2 text-slate-600 transition-colors hover:bg-slate-100 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800 lg:inline-flex"
+          aria-label="Toggle desktop sidebar"
+        >
+          {isDesktopCollapsed ? (
+            <PanelLeftOpen className="h-4 w-4" />
+          ) : (
+            <PanelLeftClose className="h-4 w-4" />
+          )}
+        </button>
+
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm font-semibold text-slate-900 dark:text-slate-100">
+            {title}
+          </p>
+          <p className="hidden text-xs text-slate-500 dark:text-slate-400 sm:block">
+            Disaster response management
+          </p>
+        </div>
+
+        <label className="hidden w-full max-w-md items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 md:flex">
+          <Search className="h-4 w-4" />
+          <input
+            type="search"
+            placeholder="Search incidents, agencies, users..."
+            className="w-full bg-transparent outline-none placeholder:text-slate-400 dark:placeholder:text-slate-500"
+          />
+        </label>
+
+        <button
+          type="button"
+          onClick={onToggleTheme}
+          className="rounded-lg border border-slate-200 p-2 text-slate-600 transition-colors hover:bg-slate-100 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
+          aria-label="Toggle theme"
+        >
+          {theme === "dark" ? (
+            <Sun className="h-4 w-4" />
+          ) : (
+            <Moon className="h-4 w-4" />
+          )}
+        </button>
+
+        <button
+          type="button"
+          className="relative rounded-lg border border-slate-200 p-2 text-slate-600 transition-colors hover:bg-slate-100 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
+          aria-label="Notifications"
+        >
+          <Bell className="h-4 w-4" />
+          <span className="absolute right-1.5 top-1.5 h-2 w-2 rounded-full bg-rose-500" />
+        </button>
+
+        <button
+          type="button"
+          className="flex items-center gap-2 rounded-full border border-slate-200 p-1 pr-3 hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800"
+        >
+          <span className="flex h-8 w-8 items-center justify-center rounded-full bg-slate-900 text-xs font-semibold text-white">
+            AD
+          </span>
+          <span className="hidden text-sm font-medium text-slate-700 dark:text-slate-200 sm:block">
+            Admin
+          </span>
+        </button>
+      </div>
+    </header>
+  );
+}
diff --git a/app/(admin)/_components/AdminSidebar.tsx b/app/(admin)/_components/AdminSidebar.tsx
new file mode 100644
index 0000000..c88b859
--- /dev/null
+++ b/app/(admin)/_components/AdminSidebar.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { X } from "lucide-react";
+import { navItems } from "./adminData";
+import { cn } from "./utils";
+
+type AdminSidebarProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  isDesktopCollapsed: boolean;
+};
+
+export default function AdminSidebar({
+  isOpen,
+  onClose,
+  isDesktopCollapsed,
+}: AdminSidebarProps) {
+  const pathname = usePathname();
+
+  return (
+    <>
+      {/* Mobile overlay */}
+      <div
+        className={cn(
+          "fixed inset-0 z-30 bg-slate-900/40 backdrop-blur-sm transition-opacity duration-200 lg:hidden",
+          isOpen ? "opacity-100" : "pointer-events-none opacity-0",
+        )}
+        onClick={onClose}
+      />
+
+      {/* Sidebar */}
+      <aside
+        className={cn(
+          "fixed inset-y-0 left-0 z-40 border-r border-slate-200 bg-white p-4 transition-all duration-300 dark:border-slate-800 dark:bg-slate-900 lg:static lg:z-0 lg:translate-x-0",
+          isDesktopCollapsed ? "lg:w-20" : "lg:w-72",
+          "w-72",
+          isOpen ? "translate-x-0" : "-translate-x-full",
+        )}
+      >
+        {/* Header section - hidden on desktop collapse */}
+        <div className={cn(isDesktopCollapsed && "lg:hidden")}>
+          <p className="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+            Disaster Response
+          </p>
+          <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
+            Admin Panel
+          </h2>
+        </div>
+
+        {/* Collapsed badge - shown only when desktop collapsed */}
+        <div
+          className={cn(
+            "hidden h-9 w-9 items-center justify-center rounded-xl bg-slate-900 text-xs font-semibold text-white lg:flex",
+            !isDesktopCollapsed && "lg:hidden",
+          )}
+        >
+          AD
+        </div>
+
+        {/* Close button - mobile only */}
+        <button
+          type="button"
+          className="rounded-lg border border-slate-200 p-2 text-slate-500 dark:border-slate-700 dark:text-slate-400 lg:hidden"
+          onClick={onClose}
+          aria-label="Close sidebar"
+        >
+          <X className="h-4 w-4" />
+        </button>
+
+        {/* Navigation */}
+        <nav className="space-y-1">
+          {navItems.map(({ label, href, icon: Icon }) => {
+            const isActive =
+              href === "/admin"
+                ? pathname === href
+                : pathname === href || pathname.startsWith(href + "/");
+
+            return (
+              <Link
+                key={href}
+                href={href}
+                className={cn(
+                  "flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition-all duration-200",
+                  isDesktopCollapsed && "lg:justify-center lg:px-2",
+                  isActive
+                    ? "bg-slate-900 text-white shadow-sm dark:bg-slate-800"
+                    : "text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-slate-100",
+                )}
+                title={isDesktopCollapsed ? label : undefined}
+              >
+                <Icon className="h-4 w-4" />
+                <span className={cn(isDesktopCollapsed && "lg:hidden")}>
+                  {label}
+                </span>
+              </Link>
+            );
+          })}
+        </nav>
+      </aside>
+    </>
+  );
+}
diff --git a/app/(admin)/_components/AdminTable.tsx b/app/(admin)/_components/AdminTable.tsx
new file mode 100644
index 0000000..d431c8f
--- /dev/null
+++ b/app/(admin)/_components/AdminTable.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+
+type Column<T> = {
+  key: string;
+  title: string;
+  className?: string;
+  render: (row: T) => React.ReactNode;
+};
+
+export function AdminTable<T>({
+  columns,
+  rows,
+}: {
+  columns: Column<T>[];
+  rows: T[];
+}) {
+  return (
+    <div className="overflow-x-auto">
+      <table className="min-w-full divide-y divide-slate-200 dark:divide-slate-800">
+        <thead>
+          <tr>
+            {columns.map((column) => (
+              <th
+                key={column.key}
+                scope="col"
+                className={`px-3 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400 ${column.className || ""}`}
+              >
+                {column.title}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-slate-100 dark:divide-slate-800">
+          {rows.map((row, index) => (
+            <tr
+              key={index}
+              className="transition-colors duration-200 hover:bg-slate-50 dark:hover:bg-slate-800"
+            >
+              {columns.map((column) => (
+                <td
+                  key={column.key}
+                  className="px-3 py-3 text-sm text-slate-700 dark:text-slate-300"
+                >
+                  {column.render(row)}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/app/(admin)/_components/adminData.ts b/app/(admin)/_components/adminData.ts
new file mode 100644
index 0000000..267b158
--- /dev/null
+++ b/app/(admin)/_components/adminData.ts
@@ -0,0 +1,27 @@
+import {
+  Bell,
+  ChartSpline,
+  Database,
+  FileUp,
+  LayoutDashboard,
+  Settings,
+  ShieldAlert,
+  Users,
+  UserCog,
+} from "lucide-react";
+
+export const navItems = [
+  { label: "Dashboard", href: "/admin", icon: LayoutDashboard },
+  {
+    label: "Incident Reports",
+    href: "/admin/incident-reports",
+    icon: ShieldAlert,
+  },
+  { label: "Agencies", href: "/admin/agencies", icon: UserCog },
+  { label: "Users", href: "/admin/users", icon: Users },
+  { label: "Notifications", href: "/admin/notifications", icon: Bell },
+  { label: "Analytics", href: "/admin/analytics", icon: ChartSpline },
+  { label: "Data Export", href: "/admin/data-export", icon: FileUp },
+  { label: "Subscriptions", href: "/admin/subscriptions", icon: Database },
+  { label: "Settings", href: "/admin/settings", icon: Settings },
+];
diff --git a/app/(admin)/_components/utils.ts b/app/(admin)/_components/utils.ts
new file mode 100644
index 0000000..737ea7e
--- /dev/null
+++ b/app/(admin)/_components/utils.ts
@@ -0,0 +1,3 @@
+export function cn(...classes: Array<string | false | null | undefined>) {
+  return classes.filter(Boolean).join(" ");
+}
diff --git a/app/(admin)/admin/agencies/page.tsx b/app/(admin)/admin/agencies/page.tsx
new file mode 100644
index 0000000..bc82513
--- /dev/null
+++ b/app/(admin)/admin/agencies/page.tsx
@@ -0,0 +1,99 @@
+import {
+  ActionButton,
+  Card,
+  PageTitle,
+  StatusBadge,
+} from "../../_components/AdminCard";
+import { AdminTable } from "../../_components/AdminTable";
+
+const agencies = [
+  {
+    name: "Rapid Medical Unit",
+    category: "Medical",
+    contact: "rmu@agency.org",
+    status: "Active",
+    activeIncidents: 13,
+  },
+  {
+    name: "Urban Fire Service",
+    category: "Fire",
+    contact: "ufs@agency.org",
+    status: "Trial",
+    activeIncidents: 21,
+  },
+  {
+    name: "Flood Response Team",
+    category: "Flood",
+    contact: "frt@agency.org",
+    status: "Inactive",
+    activeIncidents: 4,
+  },
+];
+
+export default function AgenciesPage() {
+  return (
+    <div className="space-y-6">
+      <PageTitle
+        title="Agencies"
+        description="Monitor partner agencies and response capacities."
+      />
+
+      <Card title="Agency Directory">
+        <AdminTable
+          rows={agencies}
+          columns={[
+            {
+              key: "name",
+              title: "Agency Name",
+              render: (row) => (
+                <span className="font-medium text-slate-900">{row.name}</span>
+              ),
+            },
+            {
+              key: "category",
+              title: "Category",
+              render: (row) => row.category,
+            },
+            {
+              key: "contact",
+              title: "Contact Info",
+              render: (row) => row.contact,
+            },
+            {
+              key: "status",
+              title: "Subscription Status",
+              render: (row) => (
+                <StatusBadge
+                  label={row.status}
+                  tone={
+                    row.status === "Active"
+                      ? "success"
+                      : row.status === "Trial"
+                        ? "warning"
+                        : "danger"
+                  }
+                />
+              ),
+            },
+            {
+              key: "activeIncidents",
+              title: "Active Incident Count",
+              render: (row) => row.activeIncidents,
+            },
+            {
+              key: "actions",
+              title: "Actions",
+              render: () => (
+                <div className="flex flex-wrap gap-2">
+                  <ActionButton>View</ActionButton>
+                  <ActionButton>Edit</ActionButton>
+                  <ActionButton variant="danger">Deactivate</ActionButton>
+                </div>
+              ),
+            },
+          ]}
+        />
+      </Card>
+    </div>
+  );
+}
diff --git a/app/(admin)/admin/analytics/page.tsx b/app/(admin)/admin/analytics/page.tsx
new file mode 100644
index 0000000..bd62873
--- /dev/null
+++ b/app/(admin)/admin/analytics/page.tsx
@@ -0,0 +1,60 @@
+import { Card, PageTitle, StatCard } from "../../_components/AdminCard";
+
+export default function AnalyticsPage() {
+  return (
+    <div className="space-y-6">
+      <PageTitle
+        title="Analytics"
+        description="Operational trends, distribution heat, and response performance."
+      />
+
+      <section className="grid gap-4 lg:grid-cols-2">
+        <Card title="Incident Categories" subtitle="Bar chart placeholder">
+          <div className="flex h-52 items-end gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-800">
+            {[42, 65, 28, 54, 36, 71].map((height, index) => (
+              <div
+                key={index}
+                className="flex-1 rounded-t-lg bg-slate-900/80"
+                style={{ height: `${height}%` }}
+              />
+            ))}
+          </div>
+        </Card>
+
+        <Card title="Trend Graph" subtitle="Timeline placeholder">
+          <div className="h-52 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-800">
+            <div className="relative h-full w-full overflow-hidden rounded-lg border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900">
+              <svg viewBox="0 0 400 160" className="h-full w-full">
+                <polyline
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="3"
+                  className="text-slate-900 dark:text-slate-300"
+                  points="0,120 40,110 80,116 120,90 160,95 200,72 240,84 280,60 320,66 360,44 400,52"
+                />
+              </svg>
+            </div>
+          </div>
+        </Card>
+      </section>
+
+      <Card title="Heatmap" subtitle="Grid placeholder">
+        <div className="grid grid-cols-6 gap-2 sm:grid-cols-8 lg:grid-cols-12">
+          {Array.from({ length: 48 }).map((_, i) => (
+            <div
+              key={i}
+              className={`h-8 rounded-md ${i % 5 === 0 ? "bg-rose-200 dark:bg-rose-900" : i % 3 === 0 ? "bg-amber-200 dark:bg-amber-900" : "bg-emerald-200 dark:bg-emerald-900"}`}
+            />
+          ))}
+        </div>
+      </Card>
+
+      <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        <StatCard label="Avg. Response Time" value="12m 40s" />
+        <StatCard label="Median Dispatch" value="6m 12s" />
+        <StatCard label="Escalation Rate" value="14%" />
+        <StatCard label="Resolved in 24h" value="89%" />
+      </section>
+    </div>
+  );
+}
diff --git a/app/(admin)/admin/data-export/page.tsx b/app/(admin)/admin/data-export/page.tsx
new file mode 100644
index 0000000..b78ef83
--- /dev/null
+++ b/app/(admin)/admin/data-export/page.tsx
@@ -0,0 +1,42 @@
+import { Card, PageTitle } from "../../_components/AdminCard";
+
+export default function DataExportPage() {
+  return (
+    <div className="space-y-6">
+      <PageTitle
+        title="Data Export"
+        description="Generate exports for reporting and external analysis."
+      />
+
+      <Card title="Export Filters">
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+          <input type="date" className="admin-input" />
+          <input type="date" className="admin-input" />
+          <select className="admin-select">
+            <option>All Categories</option>
+            <option>Fire</option>
+            <option>Flood</option>
+            <option>Storm</option>
+          </select>
+        </div>
+      </Card>
+
+      <Card title="Export Format">
+        <div className="flex flex-wrap gap-3">
+          <button
+            type="button"
+            className="rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700"
+          >
+            Export CSV
+          </button>
+          <button
+            type="button"
+            className="rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-slate-800 dark:bg-slate-700 dark:hover:bg-slate-600"
+          >
+            Export JSON
+          </button>
+        </div>
+      </Card>
+    </div>
+  );
+}
diff --git a/app/(admin)/admin/incident-reports/page.tsx b/app/(admin)/admin/incident-reports/page.tsx
new file mode 100644
index 0000000..55fc058
--- /dev/null
+++ b/app/(admin)/admin/incident-reports/page.tsx
@@ -0,0 +1,129 @@
+import {
+  ActionButton,
+  Card,
+  PageTitle,
+  StatusBadge,
+} from "../../_components/AdminCard";
+import { AdminTable } from "../../_components/AdminTable";
+
+const rows = [
+  {
+    id: "IR-3021",
+    title: "Bridge Fire Alert",
+    category: "Fire",
+    location: "Lake Bridge",
+    status: "Active",
+    timestamp: "2026-03-17 10:22",
+  },
+  {
+    id: "IR-3022",
+    title: "Flash Flood Warning",
+    category: "Flood",
+    location: "South Basin",
+    status: "Pending",
+    timestamp: "2026-03-17 09:54",
+  },
+  {
+    id: "IR-3023",
+    title: "Power Grid Failure",
+    category: "Infrastructure",
+    location: "Central City",
+    status: "Resolved",
+    timestamp: "2026-03-16 21:04",
+  },
+];
+
+export default function IncidentReportsPage() {
+  return (
+    <div className="space-y-6">
+      <PageTitle
+        title="Incident Reports"
+        description="Review, approve, and manage all incoming reports."
+      />
+
+      <Card title="Filters">
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
+          <select className="admin-select">
+            <option>All Categories</option>
+            <option>Fire</option>
+            <option>Flood</option>
+            <option>Storm</option>
+          </select>
+          <select className="admin-select">
+            <option>All Status</option>
+            <option>Active</option>
+            <option>Pending</option>
+            <option>Resolved</option>
+          </select>
+          <input type="date" className="admin-input" />
+          <input type="date" className="admin-input" />
+          <input
+            type="search"
+            placeholder="Search reports..."
+            className="admin-input"
+          />
+        </div>
+      </Card>
+
+      <Card title="All Incident Reports">
+        <AdminTable
+          rows={rows}
+          columns={[
+            {
+              key: "id",
+              title: "Report ID",
+              render: (row) => (
+                <span className="font-medium text-slate-900">{row.id}</span>
+              ),
+            },
+            { key: "title", title: "Title", render: (row) => row.title },
+            {
+              key: "category",
+              title: "Category",
+              render: (row) => row.category,
+            },
+            {
+              key: "location",
+              title: "Location",
+              render: (row) => row.location,
+            },
+            {
+              key: "status",
+              title: "Status",
+              render: (row) => (
+                <StatusBadge
+                  label={row.status}
+                  tone={
+                    row.status === "Resolved"
+                      ? "success"
+                      : row.status === "Pending"
+                        ? "warning"
+                        : "danger"
+                  }
+                />
+              ),
+            },
+            {
+              key: "timestamp",
+              title: "Timestamp",
+              render: (row) => row.timestamp,
+            },
+            {
+              key: "actions",
+              title: "Actions",
+              render: () => (
+                <div className="flex flex-wrap gap-2">
+                  <ActionButton>View</ActionButton>
+                  <ActionButton>Edit</ActionButton>
+                  <ActionButton variant="danger">Delete</ActionButton>
+                  <ActionButton variant="primary">Approve</ActionButton>
+                  <ActionButton variant="danger">Reject</ActionButton>
+                </div>
+              ),
+            },
+          ]}
+        />
+      </Card>
+    </div>
+  );
+}
diff --git a/app/(admin)/admin/notifications/page.tsx b/app/(admin)/admin/notifications/page.tsx
new file mode 100644
index 0000000..61e3128
--- /dev/null
+++ b/app/(admin)/admin/notifications/page.tsx
@@ -0,0 +1,82 @@
+import { Card, PageTitle, StatCard } from "../../_components/AdminCard";
+
+export default function NotificationsPage() {
+  return (
+    <div className="space-y-6">
+      <PageTitle
+        title="Notifications"
+        description="Compose and broadcast messages to your target audience."
+      />
+
+      <Card title="Broadcast Message">
+        <form className="space-y-4">
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-1.5 md:col-span-2">
+              <label className="text-sm font-medium text-slate-700 dark:text-slate-300">
+                Title
+              </label>
+              <input
+                className="w-full admin-input"
+                placeholder="Enter notification title"
+              />
+            </div>
+            <div className="space-y-1.5 md:col-span-2">
+              <label className="text-sm font-medium text-slate-700 dark:text-slate-300">
+                Message
+              </label>
+              <textarea
+                rows={4}
+                className="w-full admin-textarea"
+                placeholder="Enter message details"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <label className="text-sm font-medium text-slate-700 dark:text-slate-300">
+                Target Audience
+              </label>
+              <select className="w-full admin-select">
+                <option>All</option>
+                <option>Agencies</option>
+                <option>Users</option>
+              </select>
+            </div>
+            <div className="space-y-1.5">
+              <label className="text-sm font-medium text-slate-700 dark:text-slate-300">
+                Delivery Method
+              </label>
+              <select className="w-full admin-select">
+                <option>Email</option>
+                <option>In-App</option>
+              </select>
+            </div>
+          </div>
+          <button
+            type="button"
+            className="rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-slate-800 dark:bg-slate-700 dark:hover:bg-slate-600"
+          >
+            Send Broadcast
+          </button>
+        </form>
+      </Card>
+
+      <Card title="Broadcast Progress">
+        <div className="space-y-3">
+          <div className="flex items-center justify-between text-sm text-slate-600">
+            <span>Delivery in progress</span>
+            <span>72%</span>
+          </div>
+          <div className="h-2 overflow-hidden rounded-full bg-slate-200">
+            <div className="h-full w-[72%] rounded-full bg-slate-900" />
+          </div>
+        </div>
+      </Card>
+
+      <section className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <StatCard label="Total Targets" value="12,400" />
+        <StatCard label="Delivered" value="8,915" />
+        <StatCard label="Pending" value="2,601" />
+        <StatCard label="Failed" value="884" />
+      </section>
+    </div>
+  );
+}
diff --git a/app/(admin)/admin/page.tsx b/app/(admin)/admin/page.tsx
index 8303c8e..46d8ac8 100644
--- a/app/(admin)/admin/page.tsx
+++ b/app/(admin)/admin/page.tsx
@@ -1,38 +1,147 @@
-'use client'
-import React from 'react'
-import { useIncidents } from '../../../hooks/useIncidents'
+import {
+  ActionButton,
+  Card,
+  PageTitle,
+  StatCard,
+  StatusBadge,
+} from "../_components/AdminCard";
+import { AdminTable } from "../_components/AdminTable";
 
-export default function AdminPage() {
-  const { incidents, fetchIncidents, updateIncident } = useIncidents()
-  React.useEffect(() => { fetchIncidents() }, [fetchIncidents])
-
-  const total = incidents.length
-  const active = incidents.filter(i => i.status === 'active').length
-  const resolved = incidents.filter(i => i.status === 'resolved').length
+const reports = [
+  {
+    id: "IR-1024",
+    title: "River Flooding in East Zone",
+    category: "Flood",
+    location: "East Zone",
+    status: "Active",
+    time: "08:12 AM",
+  },
+  {
+    id: "IR-1025",
+    title: "Wildfire Near Hill Valley",
+    category: "Fire",
+    location: "Hill Valley",
+    status: "Pending",
+    time: "08:45 AM",
+  },
+  {
+    id: "IR-1026",
+    title: "Road Collapse on A-24",
+    category: "Infrastructure",
+    location: "A-24 Corridor",
+    status: "Resolved",
+    time: "09:30 AM",
+  },
+  {
+    id: "IR-1027",
+    title: "Storm Damage in North District",
+    category: "Storm",
+    location: "North District",
+    status: "Active",
+    time: "10:02 AM",
+  },
+];
 
+export default function AdminPage() {
   return (
-    <div>
-      <div className="grid grid-cols-3 gap-4 mb-6">
-        <div className="p-4 bg-white rounded shadow">Total<br/><span className="text-2xl font-bold">{total}</span></div>
-        <div className="p-4 bg-white rounded shadow">Active<br/><span className="text-2xl font-bold">{active}</span></div>
-        <div className="p-4 bg-white rounded shadow">Resolved<br/><span className="text-2xl font-bold">{resolved}</span></div>
-      </div>
+    <div className="space-y-6">
+      <PageTitle
+        title="Operations Dashboard"
+        description="High-level view of incident activity and report flow."
+      />
 
-      <div className="bg-white rounded shadow p-4">
-        <h3 className="font-semibold mb-2">Incidents</h3>
-        <table className="w-full text-left">
-          <thead>
-            <tr className="text-sm text-gray-500"><th>Title</th><th>Status</th><th>Action</th></tr>
-          </thead>
-          <tbody>
-            {incidents.map(i => (
-              <tr key={i.id} className="border-t"><td>{i.title}</td><td>{i.status}</td><td>
-                <button className="px-2 py-1 bg-blue-600 text-white rounded" onClick={() => updateIncident(i.id, { status: 'verified' })}>Verify</button>
-              </td></tr>
+      <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        <StatCard
+          label="Total Incidents"
+          value="1,248"
+          trend="+12% vs last week"
+        />
+        <StatCard
+          label="Active Incidents"
+          value="84"
+          trend="Needs immediate triage"
+        />
+        <StatCard
+          label="Resolved Incidents"
+          value="1,009"
+          trend="81% resolution rate"
+        />
+        <StatCard
+          label="New Reports Today"
+          value="73"
+          trend="+8 since last hour"
+        />
+      </section>
+
+      <Card title="Live Incident Map" subtitle="Geospatial monitor placeholder">
+        <div className="relative h-72 overflow-hidden rounded-xl border border-slate-200 bg-gradient-to-br from-slate-100 to-slate-200 dark:border-slate-800 dark:from-slate-800 dark:to-slate-900 sm:h-80">
+          <div className="absolute inset-0 grid grid-cols-6 grid-rows-4 gap-px opacity-50">
+            {Array.from({ length: 24 }).map((_, i) => (
+              <div key={i} className="bg-white/50 dark:bg-slate-700/50" />
             ))}
-          </tbody>
-        </table>
-      </div>
+          </div>
+          <div className="absolute left-1/2 top-1/2 flex h-16 w-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-rose-200 bg-rose-50 text-xs font-semibold text-rose-700 shadow-sm dark:border-rose-900 dark:bg-rose-950 dark:text-rose-300">
+            LIVE
+          </div>
+        </div>
+      </Card>
+
+      <Card
+        title="Recent Reports"
+        subtitle="Latest submissions awaiting review"
+      >
+        <AdminTable
+          rows={reports}
+          columns={[
+            {
+              key: "id",
+              title: "ID",
+              render: (row) => (
+                <span className="font-medium text-slate-900">{row.id}</span>
+              ),
+            },
+            { key: "title", title: "Title", render: (row) => row.title },
+            {
+              key: "category",
+              title: "Category",
+              render: (row) => row.category,
+            },
+            {
+              key: "location",
+              title: "Location",
+              render: (row) => row.location,
+            },
+            {
+              key: "status",
+              title: "Status",
+              render: (row) => (
+                <StatusBadge
+                  label={row.status}
+                  tone={
+                    row.status === "Resolved"
+                      ? "success"
+                      : row.status === "Pending"
+                        ? "warning"
+                        : "danger"
+                  }
+                />
+              ),
+            },
+            { key: "time", title: "Time", render: (row) => row.time },
+            {
+              key: "actions",
+              title: "Actions",
+              render: () => (
+                <div className="flex flex-wrap gap-2">
+                  <ActionButton>View</ActionButton>
+                  <ActionButton variant="primary">Approve</ActionButton>
+                  <ActionButton variant="danger">Reject</ActionButton>
+                </div>
+              ),
+            },
+          ]}
+        />
+      </Card>
     </div>
-  )
+  );
 }
diff --git a/app/(admin)/admin/settings/page.tsx b/app/(admin)/admin/settings/page.tsx
new file mode 100644
index 0000000..a69ab63
--- /dev/null
+++ b/app/(admin)/admin/settings/page.tsx
@@ -0,0 +1,92 @@
+import { Card, PageTitle } from "../../_components/AdminCard";
+
+export default function AdminSettingsPage() {
+  return (
+    <div className="space-y-6">
+      <PageTitle
+        title="Settings"
+        description="Configure categories, routing, and notification behavior."
+      />
+
+      <section className="grid gap-4 lg:grid-cols-3">
+        <Card title="Incident Categories">
+          <div className="space-y-2 text-sm text-slate-700 dark:text-slate-300">
+            <label className="flex items-center justify-between rounded-lg border border-slate-200 px-3 py-2 dark:border-slate-700 dark:bg-slate-800">
+              <span>Flood</span>
+              <input
+                type="checkbox"
+                defaultChecked
+                className="h-4 w-4 rounded border-slate-300 dark:border-slate-600"
+              />
+            </label>
+            <label className="flex items-center justify-between rounded-lg border border-slate-200 px-3 py-2 dark:border-slate-700 dark:bg-slate-800">
+              <span>Fire</span>
+              <input
+                type="checkbox"
+                defaultChecked
+                className="h-4 w-4 rounded border-slate-300 dark:border-slate-600"
+              />
+            </label>
+            <label className="flex items-center justify-between rounded-lg border border-slate-200 px-3 py-2 dark:border-slate-700 dark:bg-slate-800">
+              <span>Infrastructure</span>
+              <input
+                type="checkbox"
+                defaultChecked
+                className="h-4 w-4 rounded border-slate-300 dark:border-slate-600"
+              />
+            </label>
+          </div>
+        </Card>
+
+        <Card title="Agency Routing Rules">
+          <div className="space-y-3 text-sm text-slate-700 dark:text-slate-300">
+            <div className="rounded-lg border border-slate-200 p-3 dark:border-slate-700 dark:bg-slate-800">
+              <p className="font-medium text-slate-900 dark:text-slate-100">
+                Flood category
+              </p>
+              <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
+                Route to Flood Response Team and Water Safety Unit.
+              </p>
+            </div>
+            <div className="rounded-lg border border-slate-200 p-3 dark:border-slate-700 dark:bg-slate-800">
+              <p className="font-medium text-slate-900 dark:text-slate-100">
+                Fire category
+              </p>
+              <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
+                Route to Urban Fire Service and medical backup.
+              </p>
+            </div>
+          </div>
+        </Card>
+
+        <Card title="Notification Settings">
+          <div className="space-y-2 text-sm text-slate-700 dark:text-slate-300">
+            <label className="flex items-center justify-between rounded-lg border border-slate-200 px-3 py-2 dark:border-slate-700 dark:bg-slate-800">
+              <span>Email alerts</span>
+              <input
+                type="checkbox"
+                defaultChecked
+                className="h-4 w-4 rounded border-slate-300 dark:border-slate-600"
+              />
+            </label>
+            <label className="flex items-center justify-between rounded-lg border border-slate-200 px-3 py-2 dark:border-slate-700 dark:bg-slate-800">
+              <span>In-app alerts</span>
+              <input
+                type="checkbox"
+                defaultChecked
+                className="h-4 w-4 rounded border-slate-300 dark:border-slate-600"
+              />
+            </label>
+            <label className="flex items-center justify-between rounded-lg border border-slate-200 px-3 py-2 dark:border-slate-700 dark:bg-slate-800">
+              <span>Escalation reminders</span>
+              <input
+                type="checkbox"
+                className="h-4 w-4 rounded border-slate-300 dark:border-slate-600"
+              />
+            </label>
+          </div>
+        </Card>
+      </section>
+    </div>
+  );
+}
diff --git a/app/(admin)/admin/subscriptions/page.tsx b/app/(admin)/admin/subscriptions/page.tsx
new file mode 100644
index 0000000..dd40512
--- /dev/null
+++ b/app/(admin)/admin/subscriptions/page.tsx
@@ -0,0 +1,87 @@
+import {
+  ActionButton,
+  Card,
+  PageTitle,
+  StatusBadge,
+} from "../../_components/AdminCard";
+import { AdminTable } from "../../_components/AdminTable";
+
+const subscriptions = [
+  {
+    agency: "Rapid Medical Unit",
+    plan: "Enterprise",
+    billing: "Annual",
+    status: "Active",
+  },
+  {
+    agency: "Urban Fire Service",
+    plan: "Growth",
+    billing: "Monthly",
+    status: "Suspended",
+  },
+  {
+    agency: "Flood Response Team",
+    plan: "Starter",
+    billing: "Monthly",
+    status: "Pending",
+  },
+];
+
+export default function SubscriptionsPage() {
+  return (
+    <div className="space-y-6">
+      <PageTitle
+        title="Subscriptions"
+        description="Track and manage agency billing plans."
+      />
+
+      <Card title="Agency Plans">
+        <AdminTable
+          rows={subscriptions}
+          columns={[
+            {
+              key: "agency",
+              title: "Agency",
+              render: (row) => (
+                <span className="font-medium text-slate-900">{row.agency}</span>
+              ),
+            },
+            { key: "plan", title: "Plan", render: (row) => row.plan },
+            {
+              key: "billing",
+              title: "Billing Cycle",
+              render: (row) => row.billing,
+            },
+            {
+              key: "status",
+              title: "Status",
+              render: (row) => (
+                <StatusBadge
+                  label={row.status}
+                  tone={
+                    row.status === "Active"
+                      ? "success"
+                      : row.status === "Pending"
+                        ? "warning"
+                        : "danger"
+                  }
+                />
+              ),
+            },
+            {
+              key: "actions",
+              title: "Actions",
+              render: () => (
+                <div className="flex flex-wrap gap-2">
+                  <ActionButton variant="primary">Upgrade</ActionButton>
+                  <ActionButton>Activate</ActionButton>
+                  <ActionButton variant="danger">Suspend</ActionButton>
+                </div>
+              ),
+            },
+          ]}
+        />
+      </Card>
+    </div>
+  );
+}
diff --git a/app/(admin)/admin/users/page.tsx b/app/(admin)/admin/users/page.tsx
new file mode 100644
index 0000000..7916b7d
--- /dev/null
+++ b/app/(admin)/admin/users/page.tsx
@@ -0,0 +1,90 @@
+import {
+  ActionButton,
+  Card,
+  PageTitle,
+  StatusBadge,
+} from "../../_components/AdminCard";
+import { AdminTable } from "../../_components/AdminTable";
+
+const users = [
+  {
+    id: "USR-901",
+    name: "Sarah Adebayo",
+    email: "sarah@example.com",
+    reports: 17,
+    status: "Active",
+  },
+  {
+    id: "USR-902",
+    name: "Daniel Mensah",
+    email: "daniel@example.com",
+    reports: 3,
+    status: "Flagged",
+  },
+  {
+    id: "USR-903",
+    name: "Eleanor Grant",
+    email: "eleanor@example.com",
+    reports: 9,
+    status: "Suspended",
+  },
+];
+
+export default function UsersPage() {
+  return (
+    <div className="space-y-6">
+      <PageTitle
+        title="Users"
+        description="Manage user accounts and moderation actions."
+      />
+
+      <Card title="User Accounts">
+        <AdminTable
+          rows={users}
+          columns={[
+            {
+              key: "id",
+              title: "User ID",
+              render: (row) => (
+                <span className="font-medium text-slate-900">{row.id}</span>
+              ),
+            },
+            { key: "name", title: "Name", render: (row) => row.name },
+            { key: "email", title: "Email", render: (row) => row.email },
+            {
+              key: "reports",
+              title: "Reports Submitted",
+              render: (row) => row.reports,
+            },
+            {
+              key: "status",
+              title: "Account Status",
+              render: (row) => (
+                <StatusBadge
+                  label={row.status}
+                  tone={
+                    row.status === "Active"
+                      ? "success"
+                      : row.status === "Flagged"
+                        ? "warning"
+                        : "danger"
+                  }
+                />
+              ),
+            },
+            {
+              key: "actions",
+              title: "Actions",
+              render: () => (
+                <div className="flex flex-wrap gap-2">
+                  <ActionButton variant="danger">Suspend</ActionButton>
+                  <ActionButton variant="danger">Delete</ActionButton>
+                </div>
+              ),
+            },
+          ]}
+        />
+      </Card>
+    </div>
+  );
+}
diff --git a/app/(admin)/layout.tsx b/app/(admin)/layout.tsx
index 7a4e780..79afecc 100644
--- a/app/(admin)/layout.tsx
+++ b/app/(admin)/layout.tsx
@@ -1,26 +1,70 @@
+"use client";
+
 import React from "react";
-import Link from "next/link";
+import AdminNavbar from "./_components/AdminNavbar";
+import AdminSidebar from "./_components/AdminSidebar";
 
 export default function AdminLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const [isSidebarOpen, setSidebarOpen] = React.useState(false);
+  const [isDesktopCollapsed, setDesktopCollapsed] = React.useState(false);
+  const [theme, setTheme] = React.useState<"light" | "dark">("light");
+
+  React.useEffect(() => {
+    const savedTheme = localStorage.getItem("admin-theme") as
+      | "light"
+      | "dark"
+      | null;
+    const savedSidebar = localStorage.getItem("admin-sidebar-collapsed");
+
+    if (savedTheme === "dark" || savedTheme === "light") {
+      setTheme(savedTheme);
+    }
+
+    if (savedSidebar === "true") {
+      setDesktopCollapsed(true);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    document.documentElement.classList.toggle("dark", theme === "dark");
+    localStorage.setItem("admin-theme", theme);
+  }, [theme]);
+
+  React.useEffect(() => {
+    localStorage.setItem("admin-sidebar-collapsed", String(isDesktopCollapsed));
+  }, [isDesktopCollapsed]);
+
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
-      <header className="w-full bg-white border-b dark:bg-gray-800">
-        <div className="flex items-center justify-between max-w-6xl px-4 py-3 mx-auto">
-          <Link href="/" className="font-bold">
-            DRM Admin
-          </Link>
-          <nav className="flex gap-3">
-            <Link href="/admin" className="px-3 py-1 rounded">
-              Overview
-            </Link>
-          </nav>
+    <div className="relative min-h-screen bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100">
+      <div className="fixed inset-0 -z-10 bg-slate-50 dark:bg-slate-950" />
+      <div className="flex min-h-screen">
+        <AdminSidebar
+          isOpen={isSidebarOpen}
+          onClose={() => setSidebarOpen(false)}
+          isDesktopCollapsed={isDesktopCollapsed}
+        />
+
+        <div className="flex min-w-0 flex-1 flex-col">
+          <AdminNavbar
+            onMenuClick={() => setSidebarOpen(true)}
+            isDesktopCollapsed={isDesktopCollapsed}
+            onToggleDesktopCollapse={() =>
+              setDesktopCollapsed((previous) => !previous)
+            }
+            theme={theme}
+            onToggleTheme={() =>
+              setTheme((previous) => (previous === "dark" ? "light" : "dark"))
+            }
+          />
+          <main className="flex-1 p-4 sm:p-6">
+            <div className="mx-auto w-full max-w-7xl">{children}</div>
+          </main>
         </div>
-      </header>
-      <main className="max-w-6xl px-4 py-6 mx-auto">{children}</main>
+      </div>
     </div>
   );
 }
diff --git a/styles/globals.css b/styles/globals.css
index 11cc33a..16c6d02 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -13,6 +13,21 @@ body,
   color-scheme: light dark;
 }
 
+/* Admin form inputs dark mode support */
+@layer components {
+  .admin-input {
+    @apply rounded-xl border border-slate-200 px-3 py-2 text-sm text-slate-700 outline-none focus:border-slate-400 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:placeholder:text-slate-500 dark:focus:border-slate-600;
+  }
+
+  .admin-select {
+    @apply rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 outline-none focus:border-slate-400 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:focus:border-slate-600;
+  }
+
+  .admin-textarea {
+    @apply rounded-xl border border-slate-200 px-3 py-2 text-sm text-slate-700 outline-none focus:border-slate-400 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:placeholder:text-slate-500 dark:focus:border-slate-600;
+  }
+}
+
 /* Hard suppression of Sonner default icons */
 [data-sonner-toast] [data-icon] {
   display: none !important;
@@ -25,19 +40,28 @@ body,
 }
 
 @keyframes autoCollapseDescription {
-  0%, 5% { /* Start: Title only */
+
+  0%,
+  5% {
+    /* Start: Title only */
     max-height: 0;
     opacity: 0;
     margin-top: 0;
     padding-bottom: 0;
   }
-  15%, 45% { /* Animate in and show both for ~2s */
+
+  15%,
+  45% {
+    /* Animate in and show both for ~2s */
     max-height: 200px;
     opacity: 1;
     margin-top: 4px;
     padding-bottom: 16px;
   }
-  60%, 100% { /* Hide description again */
+
+  60%,
+  100% {
+    /* Hide description again */
     max-height: 0;
     opacity: 0;
     margin-top: 0;
@@ -58,7 +82,7 @@ body,
 }
 
 /* Smooth transition for the container height */
-[data-sonner-toast] > div {
+[data-sonner-toast]>div {
   transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
 }
 
@@ -69,4 +93,4 @@ body,
 
 [data-sonner-toast][data-type="error"] [data-title] {
   color: #ef4444 !important;
-}
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index ee5b4f1..920d30a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,24 +1,18 @@
 {
   "compilerOptions": {
     "target": "ES2020",
-    "lib": [
-      "DOM",
-      "ES2020"
-    ],
+    "lib": ["DOM", "ES2020"],
     "allowJs": false,
     "skipLibCheck": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
     "incremental": true,
     "esModuleInterop": true,
-    "types": [
-      "node"
-    ],
+    "types": ["node"],
     "noEmit": true,
     "plugins": [
       {
@@ -26,9 +20,7 @@
       }
     ]
   },
-  "exclude": [
-    "node_modules"
-  ],
+  "exclude": ["node_modules"],
   "include": [
     "next-env.d.ts",
     "**/*.ts",