diff --git a/frontend/app/attendance/page.tsx b/frontend/app/attendance/page.tsx
new file mode 100644
index 0000000..1e4114d
--- /dev/null
+++ b/frontend/app/attendance/page.tsx
@@ -0,0 +1,156 @@
+'use client';
+
+import { useState } from 'react';
+import { useSearchParams, useRouter } from 'next/navigation';
+import Image from 'next/image';
+import { useAttendanceSummary } from '@/lib/react-query/hooks/workspace-tracking/useAttendanceSummary';
+import { useAttendanceHistory } from '@/lib/react-query/hooks/workspace-tracking/useAttendanceHistory';
+import MonthlyActivityChart from '@/components/attendance/MonthlyActivityChart';
+import { DatePicker } from '@/components/ui/date-picker';
+import { Button } from '@/components/ui/button';
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableHead,
+  TableRow,
+  TableCell,
+} from '@/components/ui/table';
+import { Pagination } from '@/components/ui/Pagination';
+import { apiClient } from '@/lib/apiClient';
+import { format } from 'date-fns';
+import { saveAs } from 'file-saver';
+
+export default function AttendancePage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const page = Number(searchParams.get('page')) || 1;
+  const limit = Number(searchParams.get('limit')) || 10;
+  const [from, setFrom] = useState<Date | undefined>(
+    searchParams.get('from') ? new Date(searchParams.get('from')!) : undefined
+  );
+  const [to, setTo] = useState<Date | undefined>(
+    searchParams.get('to') ? new Date(searchParams.get('to')!) : undefined
+  );
+
+  const { data: summaryData, isLoading: summaryIsLoading } = useAttendanceSummary();
+  const { data: historyData, isLoading: historyIsLoading } = useAttendanceHistory({
+    page,
+    limit,
+    from: from?.toISOString(),
+    to: to?.toISOString(),
+  });
+
+  const handleDateChange = () => {
+    const params = new URLSearchParams(searchParams);
+    if (from) {
+      params.set('from', from.toISOString());
+    } else {
+      params.delete('from');
+    }
+    if (to) {
+      params.set('to', to.toISOString());
+    } else {
+      params.delete('to');
+    }
+    params.set('page', '1');
+    router.push(`?${params.toString()}`);
+  };
+
+  const handleExport = async () => {
+    try {
+      const response = await apiClient.get('/workspace-tracking/history?format=csv', {
+        responseType: 'blob',
+      });
+      const blob = new Blob([response.data], { type: 'text/csv;charset=utf-8;' });
+      saveAs(blob, `attendance-history-${format(new Date(), 'yyyy-MM-dd')}.csv`);
+    } catch (error) {
+      console.error('Failed to export CSV', error);
+    }
+  };
+
+  const records = historyData?.data.records ?? [];
+  const totalPages = historyData?.data.totalPages ?? 1;
+
+  return (
+    <div className="space-y-8">
+      <h1 className="text-2xl font-bold">Attendance</h1>
+
+      {/* Summary Cards */}
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+        {summaryIsLoading ? (
+          <p>Loading summary...</p>
+        ) : (
+          <>
+            <div className="rounded-lg border bg-card p-6 text-card-foreground shadow-sm">
+              <h3 className="text-sm font-medium text-muted-foreground">Total Hours This Month</h3>
+              <p className="text-2xl font-bold">{summaryData?.data.totalHoursThisMonth ?? 0}</p>
+            </div>
+            <div className="rounded-lg border bg-card p-6 text-card-foreground shadow-sm">
+              <h3 className="text-sm font-medium text-muted-foreground">Days Visited This Month</h3>
+              <p className="text-2xl font-bold">{summaryData?.data.daysVisitedThisMonth ?? 0}</p>
+            </div>
+            <div className="rounded-lg border bg-card p-6 text-card-foreground shadow-sm">
+              <h3 className="text-sm font-medium text-muted-foreground">Current Streak</h3>
+              <p className="text-2xl font-bold">{summaryData?.data.currentStreak ?? 0} days</p>
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* Monthly Chart */}
+      <MonthlyActivityChart data={records} />
+
+      {/* History Table */}
+      <div className="rounded-lg border bg-card p-6 text-card-foreground shadow-sm">
+        <div className="flex flex-wrap items-center justify-between gap-4 mb-4">
+          <h3 className="font-semibold">History</h3>
+          <div className="flex flex-wrap items-center gap-2">
+            <DatePicker date={from} setDate={setFrom} />
+            <DatePicker date={to} setTo={setTo} />
+            <Button onClick={handleDateChange}>Filter</Button>
+            <Button variant="outline" onClick={handleExport}>Export</Button>
+          </div>
+        </div>
+        {historyIsLoading ? (
+          <p>Loading history...</p>
+        ) : records.length === 0 ? (
+          <div className="text-center py-16">
+            <Image src="/window.svg" alt="No check-ins yet" width={150} height={150} className="mx-auto mb-4" />
+            <h3 className="text-lg font-semibold">No check-ins yet</h3>
+            <p className="text-muted-foreground mb-4">Book a workspace to get started.</p>
+            <Button asChild>
+              <a href="/workspaces">Browse Workspaces</a>
+            </Button>
+          </div>
+        ) : (
+          <>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Date</TableHead>
+                  <TableHead>Workspace</TableHead>
+                  <TableHead>Check-in</TableHead>
+                  <TableHead>Check-out</TableHead>
+                  <TableHead>Duration</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {records.map((record) => (
+                  <TableRow key={record.id}>
+                    <TableCell>{format(new Date(record.checkInTime), 'PPP')}</TableCell>
+                    <TableCell>{record.workspaceName}</TableCell>
+                    <TableCell>{format(new Date(record.checkInTime), 'p')}</TableCell>
+                    <TableCell>{format(new Date(record.checkOutTime), 'p')}</TableCell>
+                    <TableCell>{(record.duration / 3600).toFixed(2)} hours</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+            <Pagination currentPage={page} totalPages={totalPages} />
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index e69f6cb..46afe92 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -3,6 +3,48 @@
 /* White-label primary colour — overridden at runtime by BrandingProvider */
 :root {
   --color-primary: #111827;
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 84% 4.9%;
+  --radius: 0.5rem;
+}
+
+[data-theme="dark"] {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 212.7 26.8% 83.9%;
 }
 
 /* Scrollbar — WebKit */
@@ -80,4 +122,4 @@
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
   background-repeat: repeat;
   background-size: 256px 256px;
-}
+}
\ No newline at end of file
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 360f040..3425afe 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -3,7 +3,7 @@ import { Geist, Geist_Mono } from "next/font/google";
 import Providers from "@/providers/Providers";
 import "./globals.css";
 import { Toaster } from "sonner";
-import { ThemeProvider } from "@/components/theme-provider";
+import { ThemeManager } from "@/components/ThemeManager";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -114,13 +114,13 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-50`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background text-foreground`}
       >
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+        <ThemeManager>
           <Providers>{children}</Providers>
           <Toaster richColors position="top-right" />
-        </ThemeProvider>
+        </ThemeManager>
       </body>
     </html>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/components/ThemeManager.tsx b/frontend/components/ThemeManager.tsx
new file mode 100644
index 0000000..44eaeb2
--- /dev/null
+++ b/frontend/components/ThemeManager.tsx
@@ -0,0 +1,16 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useThemeStore } from '@/lib/store/themeStore';
+
+export function ThemeManager({ children }: { children: React.ReactNode }) {
+  const { theme } = useThemeStore();
+
+  useEffect(() => {
+    const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const resolvedTheme = theme === 'system' ? (isDarkMode ? 'dark' : 'light') : theme;
+    document.documentElement.setAttribute('data-theme', resolvedTheme);
+  }, [theme]);
+
+  return <>{children}</>;
+}
\ No newline at end of file
diff --git a/frontend/components/attendance/MonthlyActivityChart.tsx b/frontend/components/attendance/MonthlyActivityChart.tsx
new file mode 100644
index 0000000..88781df
--- /dev/null
+++ b/frontend/components/attendance/MonthlyActivityChart.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+import { AttendanceRecord } from "@/lib/react-query/hooks/workspace-tracking/useAttendanceHistory";
+
+interface MonthlyActivityChartProps {
+  data: AttendanceRecord[];
+}
+
+export default function MonthlyActivityChart({ data }: MonthlyActivityChartProps) {
+  const processDataForChart = (records: AttendanceRecord[]) => {
+    const daysInMonth = new Date(
+      new Date().getFullYear(),
+      new Date().getMonth() + 1,
+      0
+    ).getDate();
+    const chartData = Array.from({ length: daysInMonth }, (_, i) => ({
+      day: i + 1,
+      hours: 0,
+    }));
+
+    records.forEach((record) => {
+      const checkInDate = new Date(record.checkInTime);
+      const dayOfMonth = checkInDate.getDate();
+      chartData[dayOfMonth - 1].hours += record.duration / 3600; // Assuming duration is in seconds
+    });
+
+    return chartData;
+  };
+
+  const chartData = processDataForChart(data);
+
+  if (!data.length) {
+    return (
+      <div className="rounded-lg border bg-card p-6 text-card-foreground shadow-sm">
+        <h3 className="font-semibold">Monthly Activity</h3>
+        <div className="h-80 flex items-center justify-center">
+          <p className="text-muted-foreground">No check-ins yet — book a workspace to get started</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-lg border bg-card p-6 text-card-foreground shadow-sm">
+      <h3 className="font-semibold mb-4">Monthly Activity</h3>
+      <div className="h-80">
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart data={chartData}>
+            <CartesianGrid strokeDasharray="3 3" vertical={false} />
+            <XAxis
+              dataKey="day"
+              axisLine={false}
+              tickLine={false}
+              tick={{ fill: "hsl(var(--muted-foreground))", fontSize: 12 }}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tick={{ fill: "hsl(var(--muted-foreground))", fontSize: 12 }}
+              allowDecimals={false}
+              unit="h"
+            />
+            <Tooltip
+              contentStyle={{
+                borderRadius: "var(--radius)",
+                border: "1px solid hsl(var(--border))",
+                background: "hsl(var(--card))",
+              }}
+              labelStyle={{ color: "hsl(var(--foreground))" }}
+              itemStyle={{ color: "hsl(var(--foreground))" }}
+              formatter={(value: number) => [\`\${value.toFixed(2)} hours\`, "Duration"]}
+            />
+            <Bar dataKey="hours" fill="hsl(var(--primary))" radius={[4, 4, 0, 0]} />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/components/dashboard/DashboardSidebar.tsx b/frontend/components/dashboard/DashboardSidebar.tsx
index d3ac567..f4d221d 100644
--- a/frontend/components/dashboard/DashboardSidebar.tsx
+++ b/frontend/components/dashboard/DashboardSidebar.tsx
@@ -7,7 +7,7 @@ import {
   Building2, LayoutDashboard, User, Settings, LogOut, Users, Mail,
   Menu, X, BookOpen, FileText, BriefcaseBusiness, LogIn, Bell,
   BarChart3, CreditCard, Boxes, Calendar, MapPin, Wrench, Lock,
-  MessageSquare, Palette,
+  MessageSquare, Palette, Clock,
 } from "lucide-react";
 import { useState } from "react";
 import { useAuthState, useAuthActions } from "@/lib/store/authStore";
@@ -20,6 +20,7 @@ const navItems = [
   { label: "Resources",      href: "/resources",     icon: Boxes },
   { label: "My Bookings",    href: "/bookings",      icon: BookOpen },
   { label: "Check In / Out", href: "/check-in",      icon: LogIn },
+  { label: "Attendance",     href: "/attendance",    icon: Clock },
   { label: "Messages",       href: "/messages",      icon: MessageSquare },
   { label: "Notifications",  href: "/notifications", icon: Bell },
   { label: "Invoices",       href: "/invoices",      icon: FileText },
diff --git a/frontend/components/ui/Hero.tsx b/frontend/components/ui/Hero.tsx
index d9842e3..2a6e51b 100644
--- a/frontend/components/ui/Hero.tsx
+++ b/frontend/components/ui/Hero.tsx
@@ -2,17 +2,17 @@ import Link from "next/link";
 
 export function Hero() {
   return (
-    <section className="relative min-h-[90vh] flex items-center bg-[#faf9f7] px-6 pt-28 pb-20 overflow-hidden grain">
+    <section className="relative min-h-[90vh] flex items-center bg-background px-6 pt-28 pb-20 overflow-hidden grain">
       <div className="max-w-7xl mx-auto w-full grid lg:grid-cols-[1.1fr_0.9fr] gap-16 items-center">
         {/* Text — left side */}
         <div className="fade-in-up max-w-xl">
-          <h1 className="text-4xl sm:text-5xl md:text-6xl leading-[1.1] tracking-tight text-gray-900 mb-6">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl leading-[1.1] tracking-tight text-foreground mb-6">
             <span className="font-light">Workspace management</span>
             <br />
             <span className="font-bold">that just works.</span>
           </h1>
 
-          <p className="text-lg text-gray-500 mb-10 max-w-md">
+          <p className="text-lg text-muted-foreground mb-10 max-w-md">
             One place for bookings, billing, and access control — so you can
             focus on what matters.
           </p>
@@ -20,13 +20,13 @@ export function Hero() {
           <div className="flex flex-wrap gap-4">
             <Link
               href="/register"
-              className="px-7 py-3.5 rounded-full bg-gray-900 text-white text-sm font-medium hover:bg-gray-800 transition-colors shadow-sm"
+              className="px-7 py-3.5 rounded-full bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors shadow-sm"
             >
               Get started free
             </Link>
             <Link
               href="#how-it-works"
-              className="px-7 py-3.5 rounded-full border border-gray-300 text-sm font-medium text-gray-700 hover:border-gray-400 transition-colors"
+              className="px-7 py-3.5 rounded-full border border-border text-sm font-medium text-foreground hover:border-foreground/50 transition-colors"
             >
               See how it works
             </Link>
@@ -37,13 +37,13 @@ export function Hero() {
         <div className="fade-in-up-delay-2 relative hidden lg:block">
           <div className="relative ml-8 -mr-12">
             {/* Main card */}
-            <div className="bg-white rounded-2xl shadow-xl border border-gray-100 p-7">
+            <div className="bg-card rounded-2xl shadow-xl border border-border p-7">
               <div className="flex items-center justify-between mb-6">
                 <div>
-                  <p className="text-xs text-gray-400 uppercase tracking-wider">
+                  <p className="text-xs text-muted-foreground uppercase tracking-wider">
                     Your workspace
                   </p>
-                  <p className="text-lg font-semibold text-gray-900 mt-1">
+                  <p className="text-lg font-semibold text-card-foreground mt-1">
                     Acme HQ
                   </p>
                 </div>
@@ -59,11 +59,11 @@ export function Hero() {
                   { label: "Desks booked", value: "84%" },
                   { label: "Revenue", value: "$12.4k" },
                 ].map((s) => (
-                  <div key={s.label} className="bg-gray-50 rounded-xl p-4">
-                    <p className="text-2xl font-bold text-gray-900">
+                  <div key={s.label} className="bg-muted rounded-xl p-4">
+                    <p className="text-2xl font-bold text-foreground">
                       {s.value}
                     </p>
-                    <p className="text-xs text-gray-400 mt-1">{s.label}</p>
+                    <p className="text-xs text-muted-foreground mt-1">{s.label}</p>
                   </div>
                 ))}
               </div>
@@ -73,7 +73,7 @@ export function Hero() {
                 {[40, 65, 50, 80, 60, 90, 75].map((h, i) => (
                   <div
                     key={i}
-                    className="flex-1 rounded-md bg-gray-900"
+                    className="flex-1 rounded-md bg-primary"
                     style={{ height: `${h}%`, opacity: 0.15 + i * 0.1 }}
                   />
                 ))}
@@ -81,13 +81,13 @@ export function Hero() {
             </div>
 
             {/* Floating accent card */}
-            <div className="absolute -bottom-6 -left-8 bg-white rounded-xl shadow-lg border border-gray-100 px-5 py-4 flex items-center gap-3">
+            <div className="absolute -bottom-6 -left-8 bg-card rounded-xl shadow-lg border border-border px-5 py-4 flex items-center gap-3">
               <span className="w-9 h-9 rounded-full bg-blue-100 flex items-center justify-center text-sm">
                 +3
               </span>
               <div>
-                <p className="text-sm font-medium text-gray-900">New members</p>
-                <p className="text-xs text-gray-400">Joined today</p>
+                <p className="text-sm font-medium text-card-foreground">New members</p>
+                <p className="text-xs text-muted-foreground">Joined today</p>
               </div>
             </div>
           </div>
@@ -95,4 +95,4 @@ export function Hero() {
       </div>
     </section>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/components/ui/HowItWorks.tsx b/frontend/components/ui/HowItWorks.tsx
index 3ac209c..beb7e2c 100644
--- a/frontend/components/ui/HowItWorks.tsx
+++ b/frontend/components/ui/HowItWorks.tsx
@@ -18,35 +18,35 @@ const steps = [
 
 export default function HowItWorks() {
   return (
-    <section id="how-it-works" className="px-6 py-28 bg-white">
+    <section id="how-it-works" className="px-6 py-28 bg-background">
       <div className="max-w-5xl mx-auto">
-        <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+        <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
           How it works
         </h2>
-        <p className="text-gray-500 mb-16 max-w-md">
+        <p className="text-muted-foreground mb-16 max-w-md">
           Three steps. No onboarding calls, no week-long setup.
         </p>
 
         <div className="relative grid md:grid-cols-3 gap-12 md:gap-8">
           {/* connecting line — desktop only */}
-          <div className="hidden md:block absolute top-5 left-[16.6%] right-[16.6%] h-px bg-gray-200" />
+          <div className="hidden md:block absolute top-5 left-[16.6%] right-[16.6%] h-px bg-border" />
 
           {steps.map((s, i) => (
             <div
               key={s.number}
               className={`fade-in-up-delay-${i + 1} relative`}
             >
-              <span className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-gray-900 text-white text-sm font-bold mb-5 relative z-10">
+              <span className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-primary text-primary-foreground text-sm font-bold mb-5 relative z-10">
                 {s.number}
               </span>
-              <h3 className="text-xl font-semibold text-gray-900 mb-2">
+              <h3 className="text-xl font-semibold text-foreground mb-2">
                 {s.title}
               </h3>
-              <p className="text-gray-500 leading-relaxed">{s.desc}</p>
+              <p className="text-muted-foreground leading-relaxed">{s.desc}</p>
             </div>
           ))}
         </div>
       </div>
     </section>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/components/ui/Input.tsx b/frontend/components/ui/Input.tsx
index 2eb8b22..eec0543 100644
--- a/frontend/components/ui/Input.tsx
+++ b/frontend/components/ui/Input.tsx
@@ -13,24 +13,24 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     return (
       <div className='space-y-1 relative'>
         {icon && (
-          <div className='absolute left-3 top-1/2 text-gray-500  -translate-y-1/2'>
+          <div className='absolute left-3 top-1/2 text-muted-foreground  -translate-y-1/2'>
             {icon}
           </div>
         )}
         <input
           type={type}
           className={cn(
-            'flex h-12 w-full rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm placeholder:text-gray-500 transition-colors focus:border-[#2563EB] focus:outline-none focus:ring-2 focus:ring-[#2563EB]/20 disabled:cursor-not-allowed disabled:opacity-50',
+            'flex h-12 w-full rounded-lg border border-input bg-background px-4 py-3 text-sm placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50',
             icon && 'pl-8',
             error &&
-              'border-red-500 focus:border-red-500 focus:ring-red-500/20',
+              'border-destructive focus:border-destructive focus:ring-destructive/20',
             className
           )}
           ref={ref}
           {...props}
         />
 
-        {error && <p className='text-sm text-red-600'>{error}</p>}
+        {error && <p className='text-sm text-destructive'>{error}</p>}
       </div>
     );
   }
@@ -38,4 +38,4 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 
 Input.displayName = 'Input';
 
-export { Input };
+export { Input };
\ No newline at end of file
diff --git a/frontend/components/ui/Navbar.tsx b/frontend/components/ui/Navbar.tsx
index fe715c4..46df6b2 100644
--- a/frontend/components/ui/Navbar.tsx
+++ b/frontend/components/ui/Navbar.tsx
@@ -1,12 +1,22 @@
-"use client";
-
-import { Building2, Menu, X } from "lucide-react";
-import Image from "next/image";
-import Link from "next/link";
-import { useState } from "react";
-import { useAuthStore } from "@/lib/store/authStore";
-import { LocationSwitcher } from "./LocationSwitcher";
-import { useBranding } from "@/lib/branding/BrandingContext";
+'use client';
+
+import { Building2, Menu, X } from 'lucide-react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useState } from 'react';
+import { useAuthStore } from '@/lib/store/authStore';
+import { LocationSwitcher } from './LocationSwitcher';
+import { useBranding } from '@/lib/branding/BrandingContext';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { ThemeToggle } from './ThemeToggle';
 
 type NavItem = {
   label: string;
@@ -14,9 +24,9 @@ type NavItem = {
 };
 
 const NAV_ITEMS: NavItem[] = [
-  { label: "Features", href: "#features" },
-  { label: "How it works", href: "#how-it-works" },
-  { label: "Resources", href: "/resources" },
+  { label: 'Features', href: '#features' },
+  { label: 'How it works', href: '#how-it-works' },
+  { label: 'Resources', href: '/resources' },
 ];
 
 export function Navbar({
@@ -71,18 +81,33 @@ export function Navbar({
 
           <div className="flex items-center gap-3 border-l border-gray-200/60 pl-6">
             {user ? (
-              <>
-                <span className="text-sm text-gray-600">
-                  {user.name}
-                </span>
-
-                <button
-                  onClick={logout}
-                  className="text-sm text-gray-500 transition-colors hover:text-gray-900"
-                >
-                  Sign out
-                </button>
-              </>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <button className="flex items-center gap-2">
+                    <Avatar className="h-8 w-8">
+                      <AvatarImage src={user.avatar_url} />
+                      <AvatarFallback>
+                        {user.name.charAt(0)}
+                      </AvatarFallback>
+                    </Avatar>
+                  </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuLabel>{user.name}</DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem asChild>
+                    <Link href="/profile">Profile</Link>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={logout}>
+                    Sign out
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <div className="flex items-center justify-between px-2 py-1.5">
+                    <span className="text-sm">Theme</span>
+                    <ThemeToggle />
+                  </div>
+                </DropdownMenuContent>
+              </DropdownMenu>
             ) : (
               <>
                 <Link
diff --git a/frontend/components/ui/PageTitle.tsx b/frontend/components/ui/PageTitle.tsx
index 061393f..2039ac7 100644
--- a/frontend/components/ui/PageTitle.tsx
+++ b/frontend/components/ui/PageTitle.tsx
@@ -11,10 +11,10 @@ interface PageTitleProps {
 export function PageTitle({ title, subtitle, className }: PageTitleProps) {
   return (
     <div className={cn('mb-6', className)}>
-      <h1 className="text-2xl font-semibold text-gray-900">{title}</h1>
+      <h1 className="text-2xl font-semibold text-foreground">{title}</h1>
       {subtitle && (
-        <p className="mt-1 text-sm text-gray-600">{subtitle}</p>
+        <p className="mt-1 text-sm text-muted-foreground">{subtitle}</p>
       )}
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/components/ui/ThemeToggle.tsx b/frontend/components/ui/ThemeToggle.tsx
index cf2bdca..34f9a8d 100644
--- a/frontend/components/ui/ThemeToggle.tsx
+++ b/frontend/components/ui/ThemeToggle.tsx
@@ -1,23 +1,43 @@
-"use client";
+'use client';
 
-import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
+import * as React from 'react';
+import { Moon, Sun, Monitor } from 'lucide-react';
+import { useThemeStore } from '@/lib/store/themeStore';
 
-export default function ThemeToggle() {
-  const { theme, setTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 
-  useEffect(() => setMounted(true), []);
-
-  if (!mounted) return null;
+export function ThemeToggle() {
+  const { setTheme } = useThemeStore();
 
   return (
-    <button
-      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-      className="fixed top-4 right-4 z-50 p-1 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-blue-500"
-      aria-label="Toggle theme"
-    >
-      {theme === "light" ? "🌙" : "☀️"}
-    </button>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme('light')}>
+          <Sun className="mr-2 h-4 w-4" />
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>
+          <Moon className="mr-2 h-4 w-4" />
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')}>
+          <Monitor className="mr-2 h-4 w-4" />
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }
\ No newline at end of file
diff --git a/frontend/components/ui/ToggleBar.tsx b/frontend/components/ui/ToggleBar.tsx
index 8be6b6e..0704c51 100644
--- a/frontend/components/ui/ToggleBar.tsx
+++ b/frontend/components/ui/ToggleBar.tsx
@@ -16,7 +16,7 @@ interface ToggleBarProps {
 export function ToggleBar({ options, value, onChange, className }: ToggleBarProps) {
   return (
     <div
-      className={cn('flex rounded-lg bg-gray-100 p-1', className)}
+      className={cn('flex rounded-lg bg-muted p-1', className)}
       role="tablist"
       aria-label="Login method selection"
     >
@@ -30,8 +30,8 @@ export function ToggleBar({ options, value, onChange, className }: ToggleBarProp
           className={cn(
             'flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2.5 text-sm font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2',
             value === option.id
-              ? 'bg-[#2563EB] text-white shadow-sm focus:ring-[#3b82f6]'
-              : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:ring-gray-400'
+              ? 'bg-primary text-primary-foreground shadow-sm focus:ring-primary'
+              : 'text-muted-foreground hover:text-foreground hover:bg-muted/50 focus:ring-ring'
           )}
         >
           {option.icon}
@@ -40,4 +40,4 @@ export function ToggleBar({ options, value, onChange, className }: ToggleBarProp
       ))}
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/components/ui/avatar.tsx b/frontend/components/ui/avatar.tsx
new file mode 100644
index 0000000..8ac3957
--- /dev/null
+++ b/frontend/components/ui/avatar.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+import { cn } from '@/lib/utils';
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn('aspect-square h-full w-full', className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'flex h-full w-full items-center justify-center rounded-full bg-muted',
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };
\ No newline at end of file
diff --git a/frontend/components/ui/calendar.tsx b/frontend/components/ui/calendar.tsx
new file mode 100644
index 0000000..194c2d0
--- /dev/null
+++ b/frontend/components/ui/calendar.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import * as React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { DayPicker } from 'react-day-picker';
+
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn('p-3', className)}
+      classNames={{
+        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+        month: 'space-y-4',
+        caption: 'flex justify-center pt-1 relative items-center',
+        caption_label: 'text-sm font-medium',
+        nav: 'space-x-1 flex items-center',
+        nav_button: cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'
+        ),
+        nav_button_previous: 'absolute left-1',
+        nav_button_next: 'absolute right-1',
+        table: 'w-full border-collapse space-y-1',
+        head_row: 'flex',
+        head_cell: 'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
+        row: 'flex w-full mt-2',
+        cell: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
+        day: cn(buttonVariants({ variant: 'ghost' }), 'h-9 w-9 p-0 font-normal aria-selected:opacity-100'),
+        day_selected:
+          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+        day_today: 'bg-accent text-accent-foreground',
+        day_outside: 'text-muted-foreground opacity-50',
+        day_disabled: 'text-muted-foreground opacity-50',
+        day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
+        day_hidden: 'invisible',
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = 'Calendar';
+
+export { Calendar };
\ No newline at end of file
diff --git a/frontend/components/ui/date-picker.tsx b/frontend/components/ui/date-picker.tsx
new file mode 100644
index 0000000..758e8b6
--- /dev/null
+++ b/frontend/components/ui/date-picker.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+import { format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+interface DatePickerProps {
+  date: Date | undefined;
+  setDate: (date: Date | undefined) => void;
+}
+
+export function DatePicker({ date, setDate }: DatePickerProps) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "w-[280px] justify-start text-left font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
\ No newline at end of file
diff --git a/frontend/components/ui/dropdown-menu.tsx b/frontend/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..b59f9a8
--- /dev/null
+++ b/frontend/components/ui/dropdown-menu.tsx
@@ -0,0 +1,201 @@
+'use client';
+
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+        'animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-2 py-1.5 text-sm font-semibold',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};
\ No newline at end of file
diff --git a/frontend/components/ui/popover.tsx b/frontend/components/ui/popover.tsx
new file mode 100644
index 0000000..ec42c03
--- /dev/null
+++ b/frontend/components/ui/popover.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }
\ No newline at end of file
diff --git a/frontend/lib/react-query/hooks/workspace-tracking/useAttendanceHistory.ts b/frontend/lib/react-query/hooks/workspace-tracking/useAttendanceHistory.ts
new file mode 100644
index 0000000..54e4e1c
--- /dev/null
+++ b/frontend/lib/react-query/hooks/workspace-tracking/useAttendanceHistory.ts
@@ -0,0 +1,46 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { apiClient } from "@/lib/apiClient";
+import { queryKeys } from "@/lib/react-query/keys/queryKeys";
+
+export interface AttendanceRecord {
+  id: string;
+  workspaceName: string;
+  checkInTime: string;
+  checkOutTime: string;
+  duration: number;
+}
+
+interface AttendanceHistoryResponse {
+  success: boolean;
+  data: {
+    records: AttendanceRecord[];
+    totalPages: number;
+    currentPage: number;
+  };
+}
+
+interface HistoryParams {
+  page?: number;
+  limit?: number;
+  from?: string;
+  to?: string;
+}
+
+export const useAttendanceHistory = (params: HistoryParams = {}) => {
+  return useQuery({
+    queryKey: queryKeys.workspaceTracking.history(params),
+    queryFn: () => {
+      const queryParams = new URLSearchParams();
+      if (params.page) queryParams.append("page", String(params.page));
+      if (params.limit) queryParams.append("limit", String(params.limit));
+      if (params.from) queryParams.append("from", params.from);
+      if (params.to) queryParams.append("to", params.to);
+
+      return apiClient.get<AttendanceHistoryResponse>(
+        `/workspace-tracking/history?${queryParams.toString()}`
+      );
+    },
+  });
+};
\ No newline at end of file
diff --git a/frontend/lib/react-query/hooks/workspace-tracking/useAttendanceSummary.ts b/frontend/lib/react-query/hooks/workspace-tracking/useAttendanceSummary.ts
new file mode 100644
index 0000000..9f460ab
--- /dev/null
+++ b/frontend/lib/react-query/hooks/workspace-tracking/useAttendanceSummary.ts
@@ -0,0 +1,24 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { apiClient } from "@/lib/apiClient";
+import { queryKeys } from "@/lib/react-query/keys/queryKeys";
+
+interface AttendanceSummary {
+  totalHoursThisMonth: number;
+  daysVisitedThisMonth: number;
+  currentStreak: number;
+}
+
+interface AttendanceSummaryResponse {
+  success: boolean;
+  data: AttendanceSummary;
+}
+
+export const useAttendanceSummary = () => {
+  return useQuery({
+    queryKey: queryKeys.workspaceTracking.summary,
+    queryFn: () =>
+      apiClient.get<AttendanceSummaryResponse>("/workspace-tracking/summary"),
+  });
+};
\ No newline at end of file
diff --git a/frontend/lib/react-query/keys/queryKeys.ts b/frontend/lib/react-query/keys/queryKeys.ts
index b643f2b..9f96414 100644
--- a/frontend/lib/react-query/keys/queryKeys.ts
+++ b/frontend/lib/react-query/keys/queryKeys.ts
@@ -32,6 +32,7 @@ export const queryKeys = {
     active: ["workspace-tracking", "active"] as const,
     history: (params?: unknown) =>
       ["workspace-tracking", "history", params] as const,
+    summary: ["workspace-tracking", "summary"] as const,
   },
   dashboard: {
     member: ["dashboard", "member"] as const,
@@ -72,4 +73,4 @@ export const queryKeys = {
       list: (params?: unknown) => ["admin", "payments", "list", params] as const,
     },
   },
-} as const;
+} as const;
\ No newline at end of file
diff --git a/frontend/lib/store/themeStore.ts b/frontend/lib/store/themeStore.ts
new file mode 100644
index 0000000..8fa33b4
--- /dev/null
+++ b/frontend/lib/store/themeStore.ts
@@ -0,0 +1,19 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+type ThemeState = {
+  theme: 'light' | 'dark' | 'system';
+  setTheme: (theme: 'light' | 'dark' | 'system') => void;
+};
+
+export const useThemeStore = create<ThemeState>()(
+  persist(
+    (set) => ({
+      theme: 'system',
+      setTheme: (theme) => set({ theme }),
+    }),
+    {
+      name: 'theme-storage', // name of the item in the storage (must be unique)
+    }
+  )
+);
\ No newline at end of file
diff --git a/frontend/lib/utils.ts b/frontend/lib/utils.ts
index bd0c391..04b43bf 100644
--- a/frontend/lib/utils.ts
+++ b/frontend/lib/utils.ts
@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
+import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
-
+ 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
-}
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..98ac8c4
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,82 @@
+{
+  "name": "ManageHub",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "date-fns": "^4.4.0",
+        "file-saver": "^2.0.5",
+        "react-day-picker": "^10.0.1"
+      },
+      "devDependencies": {
+        "@types/file-saver": "^2.0.7"
+      }
+    },
+    "node_modules/@date-fns/tz": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.5.0.tgz",
+      "integrity": "sha512-lwYN/vDPeNRULcepoE/LO2Pgx+7/RV+S9ARfbc9lr2DtGkOD7pAiruHvbR1RX3Qyf6ja47EWJDMsNK5vK08DJg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz",
+      "integrity": "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/date-fns": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.4.0.tgz",
+      "integrity": "sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==",
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz",
+      "integrity": "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-day-picker": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-10.0.1.tgz",
+      "integrity": "sha512-eNh6BlwcYInWaJtRv18mXQ06Ys/H6rdTZAnTaSdOYJuTpwP1JMCHNd1FDRadA+gbeinq+psdULN5Xnowy9mV8w==",
+      "license": "MIT",
+      "dependencies": {
+        "@date-fns/tz": "^1.4.1",
+        "date-fns": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/gpbl"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..ec9d2db
--- /dev/null
+++ b/package.json
@@ -0,0 +1,10 @@
+{
+  "dependencies": {
+    "date-fns": "^4.4.0",
+    "file-saver": "^2.0.5",
+    "react-day-picker": "^10.0.1"
+  },
+  "devDependencies": {
+    "@types/file-saver": "^2.0.7"
+  }
+}