LifeManager

+ Description +

setFormData({ ...formData, description: e.target.value })}
+              rows={2}
+            />
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="all_day"
+              checked={formData.all_day}
+              onChange={(e) => {
+                const checked = (e.target as HTMLInputElement).checked;
+                setFormData({
+                  ...formData,
+                  all_day: checked,
+                  start_datetime: formatForInput(formData.start_datetime, checked, '09:00'),
+                  end_datetime: formatForInput(formData.end_datetime, checked, '10:00'),
+                });
+              }}
+            />
+            <Label htmlFor="all_day">All day event</Label>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="start">Start</Label>
+              <Input
+                id="start"
+                type={formData.all_day ? 'date' : 'datetime-local'}
+                value={formData.start_datetime}
+                onChange={(e) => setFormData({ ...formData, start_datetime: e.target.value })}
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="end">End</Label>
+              <Input
+                id="end"
+                type={formData.all_day ? 'date' : 'datetime-local'}
+                value={formData.end_datetime}
+                onChange={(e) => setFormData({ ...formData, end_datetime: e.target.value })}
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="location">Location</Label>
+            <Select
+              id="location"
+              value={formData.location_id}
+              onChange={(e) => setFormData({ ...formData, location_id: e.target.value })}
+            >
+              <option value="">None</option>
+              {locations.map((loc) => (
+                <option key={loc.id} value={loc.id}>
+                  {loc.name}
+                </option>
+              ))}
+            </Select>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="color">Color</Label>
+            <Select
+              id="color"
+              value={formData.color}
+              onChange={(e) => setFormData({ ...formData, color: e.target.value })}
+            >
+              {colorPresets.map((preset) => (
+                <option key={preset.name} value={preset.value}>
+                  {preset.name}
+                </option>
+              ))}
+            </Select>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="recurrence">Recurrence</Label>
+            <Select
+              id="recurrence"
+              value={formData.recurrence_rule}
+              onChange={(e) => setFormData({ ...formData, recurrence_rule: e.target.value })}
+            >
+              <option value="">None</option>
+              <option value="daily">Daily</option>
+              <option value="weekly">Weekly</option>
+              <option value="monthly">Monthly</option>
+            </Select>
+          </div>
+
+          <DialogFooter>
+            {event && (
+              <Button
+                type="button"
+                variant="destructive"
+                onClick={() => deleteMutation.mutate()}
+                disabled={deleteMutation.isPending}
+                className="mr-auto"
+              >
+                Delete
+              </Button>
+            )}
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={mutation.isPending}>
+              {mutation.isPending ? 'Saving...' : event ? 'Update' : 'Create'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/components/dashboard/CalendarWidget.tsx b/frontend/src/components/dashboard/CalendarWidget.tsx
new file mode 100644
index 0000000..b0c3975
--- /dev/null
+++ b/frontend/src/components/dashboard/CalendarWidget.tsx
@@ -0,0 +1,63 @@
+import { format } from 'date-fns';
+import { Calendar, Clock } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
+interface DashboardEvent {
+  id: number;
+  title: string;
+  start_datetime: string;
+  end_datetime: string;
+  all_day: boolean;
+  color?: string;
+}
+
+interface CalendarWidgetProps {
+  events: DashboardEvent[];
+}
+
+export default function CalendarWidget({ events }: CalendarWidgetProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Calendar className="h-5 w-5" />
+          Today's Events
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {events.length === 0 ? (
+          <p className="text-sm text-muted-foreground text-center py-8">
+            No events scheduled for today
+          </p>
+        ) : (
+          <div className="space-y-3">
+            {events.map((event) => (
+              <div
+                key={event.id}
+                className="flex items-start gap-3 p-3 rounded-lg border bg-card hover:bg-accent/5 transition-colors"
+              >
+                <div
+                  className="w-1 h-full min-h-[2rem] rounded-full"
+                  style={{ backgroundColor: event.color || 'hsl(var(--primary))' }}
+                />
+                <div className="flex-1 min-w-0">
+                  <p className="font-medium">{event.title}</p>
+                  {!event.all_day && (
+                    <div className="flex items-center gap-1 text-sm text-muted-foreground mt-1">
+                      <Clock className="h-3 w-3" />
+                      {format(new Date(event.start_datetime), 'h:mm a')}
+                      {event.end_datetime && ` - ${format(new Date(event.end_datetime), 'h:mm a')}`}
+                    </div>
+                  )}
+                  {event.all_day && (
+                    <p className="text-sm text-muted-foreground mt-1">All day</p>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/dashboard/DashboardPage.tsx b/frontend/src/components/dashboard/DashboardPage.tsx
new file mode 100644
index 0000000..028ff40
--- /dev/null
+++ b/frontend/src/components/dashboard/DashboardPage.tsx
@@ -0,0 +1,113 @@
+import { useQuery } from '@tanstack/react-query';
+import { format } from 'date-fns';
+import { Bell } from 'lucide-react';
+import api from '@/lib/api';
+import type { DashboardData, UpcomingResponse } from '@/types';
+import { useSettings } from '@/hooks/useSettings';
+import StatsWidget from './StatsWidget';
+import TodoWidget from './TodoWidget';
+import CalendarWidget from './CalendarWidget';
+import UpcomingWidget from './UpcomingWidget';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { DashboardSkeleton } from '@/components/ui/skeleton';
+
+export default function DashboardPage() {
+  const { settings } = useSettings();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['dashboard'],
+    queryFn: async () => {
+      const today = new Date().toISOString().split('T')[0];
+      const { data } = await api.get<DashboardData>(`/dashboard?client_date=${today}`);
+      return data;
+    },
+  });
+
+  const { data: upcomingData } = useQuery({
+    queryKey: ['upcoming', settings?.upcoming_days],
+    queryFn: async () => {
+      const days = settings?.upcoming_days || 7;
+      const { data } = await api.get<UpcomingResponse>(`/upcoming?days=${days}`);
+      return data;
+    },
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-col h-full">
+        <div className="border-b bg-card px-6 py-4">
+          <h1 className="text-3xl font-bold">Dashboard</h1>
+          <p className="text-muted-foreground mt-1">Welcome back. Here's your overview.</p>
+        </div>
+        <div className="flex-1 overflow-y-auto p-6">
+          <DashboardSkeleton />
+        </div>
+      </div>
+    );
+  }
+
+  if (!data) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-muted-foreground">Failed to load dashboard</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="border-b bg-card px-6 py-4">
+        <h1 className="text-3xl font-bold">Dashboard</h1>
+        <p className="text-muted-foreground mt-1">Welcome back. Here's your overview.</p>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-6">
+        <div className="space-y-6">
+          <StatsWidget
+            projectStats={data.project_stats}
+            totalPeople={data.total_people}
+            totalLocations={data.total_locations}
+          />
+
+          {upcomingData && upcomingData.items.length > 0 && (
+            <UpcomingWidget items={upcomingData.items} days={upcomingData.days} />
+          )}
+
+          <div className="grid gap-6 lg:grid-cols-2">
+            <TodoWidget todos={data.upcoming_todos} />
+            <CalendarWidget events={data.todays_events} />
+          </div>
+
+          {data.active_reminders.length > 0 && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Bell className="h-5 w-5" />
+                  Active Reminders
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-3">
+                  {data.active_reminders.map((reminder) => (
+                    <div
+                      key={reminder.id}
+                      className="flex items-center gap-3 p-3 rounded-lg border bg-card hover:bg-accent/5 transition-colors"
+                    >
+                      <Bell className="h-4 w-4 text-accent" />
+                      <div className="flex-1">
+                        <p className="font-medium">{reminder.title}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {format(new Date(reminder.remind_at), 'MMM d, yyyy h:mm a')}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/dashboard/ProjectsWidget.tsx b/frontend/src/components/dashboard/ProjectsWidget.tsx
new file mode 100644
index 0000000..05ea75b
--- /dev/null
+++ b/frontend/src/components/dashboard/ProjectsWidget.tsx
@@ -0,0 +1,72 @@
+import { useNavigate } from 'react-router-dom';
+import type { Project } from '@/types';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+
+interface ProjectsWidgetProps {
+  projects: Project[];
+}
+
+const statusColors = {
+  not_started: 'bg-gray-500/10 text-gray-500 border-gray-500/20',
+  in_progress: 'bg-accent/10 text-accent border-accent/20',
+  completed: 'bg-green-500/10 text-green-500 border-green-500/20',
+};
+
+export default function ProjectsWidget({ projects }: ProjectsWidgetProps) {
+  const navigate = useNavigate();
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Active Projects</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {projects.length === 0 ? (
+          <p className="text-sm text-muted-foreground text-center py-8">
+            No active projects. Create one to get started!
+          </p>
+        ) : (
+          <div className="space-y-3">
+            {projects.map((project) => {
+              const completedTasks = project.tasks?.filter((t) => t.status === 'completed').length || 0;
+              const totalTasks = project.tasks?.length || 0;
+              const progress = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0;
+
+              return (
+                <div
+                  key={project.id}
+                  className="p-3 rounded-lg border bg-card hover:bg-accent/5 transition-colors cursor-pointer"
+                  onClick={() => navigate(`/projects/${project.id}`)}
+                >
+                  <div className="flex items-start justify-between mb-2">
+                    <p className="font-medium">{project.name}</p>
+                    <Badge className={statusColors[project.status]}>
+                      {project.status.replace('_', ' ')}
+                    </Badge>
+                  </div>
+                  {totalTasks > 0 && (
+                    <div>
+                      <div className="flex justify-between text-xs text-muted-foreground mb-1">
+                        <span>Progress</span>
+                        <span>
+                          {completedTasks}/{totalTasks} tasks
+                        </span>
+                      </div>
+                      <div className="h-2 bg-secondary rounded-full overflow-hidden">
+                        <div
+                          className="h-full bg-accent transition-all"
+                          style={{ width: `${progress}%` }}
+                        />
+                      </div>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/dashboard/StatsWidget.tsx b/frontend/src/components/dashboard/StatsWidget.tsx
new file mode 100644
index 0000000..7204bdd
--- /dev/null
+++ b/frontend/src/components/dashboard/StatsWidget.tsx
@@ -0,0 +1,58 @@
+import { FolderKanban, Users, MapPin } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+
+interface StatsWidgetProps {
+  projectStats: {
+    total: number;
+    by_status: Record<string, number>;
+  };
+  totalPeople: number;
+  totalLocations: number;
+}
+
+export default function StatsWidget({ projectStats, totalPeople, totalLocations }: StatsWidgetProps) {
+  const statCards = [
+    {
+      label: 'Total Projects',
+      value: projectStats.total,
+      icon: FolderKanban,
+      color: 'text-blue-500',
+    },
+    {
+      label: 'In Progress',
+      value: projectStats.by_status['in_progress'] || 0,
+      icon: FolderKanban,
+      color: 'text-purple-500',
+    },
+    {
+      label: 'People',
+      value: totalPeople,
+      icon: Users,
+      color: 'text-green-500',
+    },
+    {
+      label: 'Locations',
+      value: totalLocations,
+      icon: MapPin,
+      color: 'text-orange-500',
+    },
+  ];
+
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+      {statCards.map((stat) => (
+        <Card key={stat.label}>
+          <CardContent className="p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-muted-foreground">{stat.label}</p>
+                <p className="text-3xl font-bold mt-2">{stat.value}</p>
+              </div>
+              <stat.icon className={`h-8 w-8 ${stat.color}`} />
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/src/components/dashboard/TodoWidget.tsx b/frontend/src/components/dashboard/TodoWidget.tsx
new file mode 100644
index 0000000..b281cf6
--- /dev/null
+++ b/frontend/src/components/dashboard/TodoWidget.tsx
@@ -0,0 +1,75 @@
+import { format, isPast } from 'date-fns';
+import { Calendar, CheckCircle2 } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+
+interface DashboardTodo {
+  id: number;
+  title: string;
+  due_date: string;
+  priority: string;
+  category?: string;
+}
+
+interface TodoWidgetProps {
+  todos: DashboardTodo[];
+}
+
+const priorityColors: Record<string, string> = {
+  low: 'bg-green-500/10 text-green-500 border-green-500/20',
+  medium: 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20',
+  high: 'bg-red-500/10 text-red-500 border-red-500/20',
+};
+
+export default function TodoWidget({ todos }: TodoWidgetProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <CheckCircle2 className="h-5 w-5" />
+          Upcoming Todos
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {todos.length === 0 ? (
+          <p className="text-sm text-muted-foreground text-center py-8">
+            No upcoming todos. You're all caught up!
+          </p>
+        ) : (
+          <div className="space-y-3">
+            {todos.slice(0, 5).map((todo) => {
+              const isOverdue = isPast(new Date(todo.due_date));
+              return (
+                <div
+                  key={todo.id}
+                  className="flex items-center gap-3 p-3 rounded-lg border bg-card hover:bg-accent/5 transition-colors"
+                >
+                  <div className="flex-1 min-w-0">
+                    <p className="font-medium">{todo.title}</p>
+                    <div className="flex items-center gap-2 mt-1">
+                      <div className={cn(
+                        "flex items-center gap-1 text-xs",
+                        isOverdue ? "text-destructive" : "text-muted-foreground"
+                      )}>
+                        <Calendar className="h-3 w-3" />
+                        {format(new Date(todo.due_date), 'MMM d, yyyy')}
+                        {isOverdue && <span className="font-medium">(Overdue)</span>}
+                      </div>
+                      {todo.category && (
+                        <Badge variant="outline" className="text-xs">{todo.category}</Badge>
+                      )}
+                    </div>
+                  </div>
+                  <Badge className={priorityColors[todo.priority] || priorityColors.medium}>
+                    {todo.priority}
+                  </Badge>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/dashboard/UpcomingWidget.tsx b/frontend/src/components/dashboard/UpcomingWidget.tsx
new file mode 100644
index 0000000..dd06c84
--- /dev/null
+++ b/frontend/src/components/dashboard/UpcomingWidget.tsx
@@ -0,0 +1,76 @@
+import { format } from 'date-fns';
+import { CheckSquare, Calendar, Bell } from 'lucide-react';
+import type { UpcomingItem } from '@/types';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+
+interface UpcomingWidgetProps {
+  items: UpcomingItem[];
+  days?: number;
+}
+
+const priorityColors: Record<string, string> = {
+  low: 'bg-green-500/10 text-green-500 border-green-500/20',
+  medium: 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20',
+  high: 'bg-red-500/10 text-red-500 border-red-500/20',
+};
+
+export default function UpcomingWidget({ items, days = 7 }: UpcomingWidgetProps) {
+  const getIcon = (type: string) => {
+    switch (type) {
+      case 'todo':
+        return <CheckSquare className="h-5 w-5 text-blue-500" />;
+      case 'event':
+        return <Calendar className="h-5 w-5 text-purple-500" />;
+      case 'reminder':
+        return <Bell className="h-5 w-5 text-orange-500" />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Upcoming ({days} days)</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {items.length === 0 ? (
+          <p className="text-sm text-muted-foreground text-center py-8">
+            No upcoming items in the next few days
+          </p>
+        ) : (
+          <ScrollArea className="h-[300px]">
+            <div className="space-y-3">
+              {items.map((item, index) => (
+                <div
+                  key={`${item.type}-${item.id}-${index}`}
+                  className="flex items-start gap-3 p-3 rounded-lg border bg-card hover:bg-accent/5 transition-colors"
+                >
+                  {getIcon(item.type)}
+                  <div className="flex-1 min-w-0">
+                    <p className="font-medium">{item.title}</p>
+                    <p className="text-sm text-muted-foreground">
+                      {item.datetime
+                        ? format(new Date(item.datetime), 'MMM d, yyyy h:mm a')
+                        : format(new Date(item.date), 'MMM d, yyyy')}
+                    </p>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Badge variant="outline" className="capitalize">
+                      {item.type}
+                    </Badge>
+                    {item.priority && (
+                      <Badge className={priorityColors[item.priority]}>{item.priority}</Badge>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/layout/AppLayout.tsx b/frontend/src/components/layout/AppLayout.tsx
new file mode 100644
index 0000000..045e837
--- /dev/null
+++ b/frontend/src/components/layout/AppLayout.tsx
@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import { Outlet } from 'react-router-dom';
+import { Menu } from 'lucide-react';
+import { useTheme } from '@/hooks/useTheme';
+import { Button } from '@/components/ui/button';
+import Sidebar from './Sidebar';
+
+export default function AppLayout() {
+  useTheme();
+  const [collapsed, setCollapsed] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  return (
+    <div className="flex h-screen overflow-hidden bg-background">
+      <Sidebar
+        collapsed={collapsed}
+        onToggle={() => setCollapsed(!collapsed)}
+        mobileOpen={mobileOpen}
+        onMobileClose={() => setMobileOpen(false)}
+      />
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {/* Mobile header */}
+        <div className="flex md:hidden items-center h-14 border-b bg-card px-4">
+          <Button variant="ghost" size="icon" onClick={() => setMobileOpen(true)}>
+            <Menu className="h-5 w-5" />
+          </Button>
+          <h1 className="text-lg font-bold text-accent ml-3">LifeManager</h1>
+        </div>
+        <main className="flex-1 overflow-y-auto">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
new file mode 100644
index 0000000..1140f58
--- /dev/null
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -0,0 +1,114 @@
+import { NavLink } from 'react-router-dom';
+import {
+  LayoutDashboard,
+  CheckSquare,
+  Calendar,
+  Bell,
+  FolderKanban,
+  Users,
+  MapPin,
+  Settings,
+  ChevronLeft,
+  ChevronRight,
+  X,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+
+const navItems = [
+  { to: '/dashboard', icon: LayoutDashboard, label: 'Dashboard' },
+  { to: '/todos', icon: CheckSquare, label: 'Todos' },
+  { to: '/calendar', icon: Calendar, label: 'Calendar' },
+  { to: '/reminders', icon: Bell, label: 'Reminders' },
+  { to: '/projects', icon: FolderKanban, label: 'Projects' },
+  { to: '/people', icon: Users, label: 'People' },
+  { to: '/locations', icon: MapPin, label: 'Locations' },
+];
+
+interface SidebarProps {
+  collapsed: boolean;
+  onToggle: () => void;
+  mobileOpen: boolean;
+  onMobileClose: () => void;
+}
+
+export default function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose }: SidebarProps) {
+  const navLinkClass = ({ isActive }: { isActive: boolean }) =>
+    cn(
+      'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+      isActive
+        ? 'bg-accent text-accent-foreground'
+        : 'text-muted-foreground hover:bg-accent/10 hover:text-accent'
+    );
+
+  const sidebarContent = (
+    <>
+      <div className="flex h-16 items-center justify-between border-b px-4">
+        {!collapsed && <h1 className="text-xl font-bold text-accent">LifeManager</h1>}
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={mobileOpen ? onMobileClose : onToggle}
+          className="ml-auto"
+        >
+          {mobileOpen ? (
+            <X className="h-5 w-5" />
+          ) : collapsed ? (
+            <ChevronRight className="h-5 w-5" />
+          ) : (
+            <ChevronLeft className="h-5 w-5" />
+          )}
+        </Button>
+      </div>
+
+      <nav className="flex-1 space-y-1 p-2">
+        {navItems.map((item) => (
+          <NavLink
+            key={item.to}
+            to={item.to}
+            onClick={mobileOpen ? onMobileClose : undefined}
+            className={navLinkClass}
+          >
+            <item.icon className="h-5 w-5 shrink-0" />
+            {(!collapsed || mobileOpen) && <span>{item.label}</span>}
+          </NavLink>
+        ))}
+      </nav>
+
+      <div className="border-t p-2">
+        <NavLink
+          to="/settings"
+          onClick={mobileOpen ? onMobileClose : undefined}
+          className={navLinkClass}
+        >
+          <Settings className="h-5 w-5 shrink-0" />
+          {(!collapsed || mobileOpen) && <span>Settings</span>}
+        </NavLink>
+      </div>
+    </>
+  );
+
+  return (
+    <>
+      {/* Desktop sidebar */}
+      <aside
+        className={cn(
+          'hidden md:flex flex-col border-r bg-card transition-all duration-300',
+          collapsed ? 'w-16' : 'w-64'
+        )}
+      >
+        {sidebarContent}
+      </aside>
+
+      {/* Mobile overlay */}
+      {mobileOpen && (
+        <div className="fixed inset-0 z-40 md:hidden">
+          <div className="absolute inset-0 bg-background/80" onClick={onMobileClose} />
+          <aside className="relative z-50 flex flex-col w-64 h-full bg-card border-r">
+            {sidebarContent}
+          </aside>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/frontend/src/components/locations/LocationCard.tsx b/frontend/src/components/locations/LocationCard.tsx
new file mode 100644
index 0000000..0599843
--- /dev/null
+++ b/frontend/src/components/locations/LocationCard.tsx
@@ -0,0 +1,75 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { MapPin, Trash2, Edit } from 'lucide-react';
+import api from '@/lib/api';
+import type { Location } from '@/types';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+
+interface LocationCardProps {
+  location: Location;
+  onEdit: (location: Location) => void;
+}
+
+const categoryColors: Record<string, string> = {
+  home: 'bg-blue-500/10 text-blue-500 border-blue-500/20',
+  work: 'bg-purple-500/10 text-purple-500 border-purple-500/20',
+  restaurant: 'bg-orange-500/10 text-orange-500 border-orange-500/20',
+  shop: 'bg-green-500/10 text-green-500 border-green-500/20',
+  other: 'bg-gray-500/10 text-gray-500 border-gray-500/20',
+};
+
+export default function LocationCard({ location, onEdit }: LocationCardProps) {
+  const queryClient = useQueryClient();
+
+  const deleteMutation = useMutation({
+    mutationFn: async () => {
+      await api.delete(`/locations/${location.id}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['locations'] });
+      toast.success('Location deleted');
+    },
+    onError: () => {
+      toast.error('Failed to delete location');
+    },
+  });
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-start justify-between">
+          <div className="flex-1">
+            <CardTitle className="text-xl flex items-center gap-2">
+              <MapPin className="h-5 w-5" />
+              {location.name}
+            </CardTitle>
+            <Badge className={categoryColors[location.category]} style={{ marginTop: '0.5rem' }}>
+              {location.category}
+            </Badge>
+          </div>
+          <div className="flex gap-1">
+            <Button variant="ghost" size="icon" onClick={() => onEdit(location)}>
+              <Edit className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => deleteMutation.mutate()}
+              disabled={deleteMutation.isPending}
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-muted-foreground mb-2">{location.address}</p>
+        {location.notes && (
+          <p className="text-sm text-muted-foreground line-clamp-2">{location.notes}</p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/locations/LocationForm.tsx b/frontend/src/components/locations/LocationForm.tsx
new file mode 100644
index 0000000..cd9154b
--- /dev/null
+++ b/frontend/src/components/locations/LocationForm.tsx
@@ -0,0 +1,124 @@
+import { useState, FormEvent } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import api, { getErrorMessage } from '@/lib/api';
+import type { Location } from '@/types';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Select } from '@/components/ui/select';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+
+interface LocationFormProps {
+  location: Location | null;
+  onClose: () => void;
+}
+
+export default function LocationForm({ location, onClose }: LocationFormProps) {
+  const queryClient = useQueryClient();
+  const [formData, setFormData] = useState({
+    name: location?.name || '',
+    address: location?.address || '',
+    category: location?.category || 'other',
+    notes: location?.notes || '',
+  });
+
+  const mutation = useMutation({
+    mutationFn: async (data: typeof formData) => {
+      if (location) {
+        const response = await api.put(`/locations/${location.id}`, data);
+        return response.data;
+      } else {
+        const response = await api.post('/locations', data);
+        return response.data;
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['locations'] });
+      toast.success(location ? 'Location updated' : 'Location created');
+      onClose();
+    },
+    onError: (error) => {
+      toast.error(getErrorMessage(error, location ? 'Failed to update location' : 'Failed to create location'));
+    },
+  });
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    mutation.mutate(formData);
+  };
+
+  return (
+    <Dialog open={true} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogClose onClick={onClose} />
+        <DialogHeader>
+          <DialogTitle>{location ? 'Edit Location' : 'New Location'}</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="address">Address</Label>
+            <Input
+              id="address"
+              value={formData.address}
+              onChange={(e) => setFormData({ ...formData, address: e.target.value })}
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="category">Category</Label>
+            <Select
+              id="category"
+              value={formData.category}
+              onChange={(e) => setFormData({ ...formData, category: e.target.value as any })}
+            >
+              <option value="home">Home</option>
+              <option value="work">Work</option>
+              <option value="restaurant">Restaurant</option>
+              <option value="shop">Shop</option>
+              <option value="other">Other</option>
+            </Select>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="notes">Notes</Label>
+            <Textarea
+              id="notes"
+              value={formData.notes}
+              onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
+              rows={3}
+            />
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={mutation.isPending}>
+              {mutation.isPending ? 'Saving...' : location ? 'Update' : 'Create'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/components/locations/LocationsPage.tsx b/frontend/src/components/locations/LocationsPage.tsx
new file mode 100644
index 0000000..6ceba20
--- /dev/null
+++ b/frontend/src/components/locations/LocationsPage.tsx
@@ -0,0 +1,92 @@
+import { useState } from 'react';
+import { Plus, MapPin } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
+import api from '@/lib/api';
+import type { Location } from '@/types';
+import { Button } from '@/components/ui/button';
+import { Select } from '@/components/ui/select';
+import { Label } from '@/components/ui/label';
+import { GridSkeleton } from '@/components/ui/skeleton';
+import { EmptyState } from '@/components/ui/empty-state';
+import LocationCard from './LocationCard';
+import LocationForm from './LocationForm';
+
+export default function LocationsPage() {
+  const [showForm, setShowForm] = useState(false);
+  const [editingLocation, setEditingLocation] = useState<Location | null>(null);
+  const [categoryFilter, setCategoryFilter] = useState('');
+
+  const { data: locations = [], isLoading } = useQuery({
+    queryKey: ['locations'],
+    queryFn: async () => {
+      const { data } = await api.get<Location[]>('/locations');
+      return data;
+    },
+  });
+
+  const filteredLocations = categoryFilter
+    ? locations.filter((loc) => loc.category === categoryFilter)
+    : locations;
+
+  const handleEdit = (location: Location) => {
+    setEditingLocation(location);
+    setShowForm(true);
+  };
+
+  const handleCloseForm = () => {
+    setShowForm(false);
+    setEditingLocation(null);
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="border-b bg-card px-6 py-4">
+        <div className="flex items-center justify-between mb-4">
+          <h1 className="text-3xl font-bold">Locations</h1>
+          <Button onClick={() => setShowForm(true)}>
+            <Plus className="mr-2 h-4 w-4" />
+            Add Location
+          </Button>
+        </div>
+
+        <div className="flex items-center gap-4">
+          <Label htmlFor="category-filter">Filter by category:</Label>
+          <Select
+            id="category-filter"
+            value={categoryFilter}
+            onChange={(e) => setCategoryFilter(e.target.value)}
+          >
+            <option value="">All</option>
+            <option value="home">Home</option>
+            <option value="work">Work</option>
+            <option value="restaurant">Restaurant</option>
+            <option value="shop">Shop</option>
+            <option value="other">Other</option>
+          </Select>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-6">
+        {isLoading ? (
+          <GridSkeleton cards={6} />
+        ) : filteredLocations.length === 0 ? (
+          <EmptyState
+            icon={MapPin}
+            title="No locations yet"
+            description="Add locations to organise your favourite places, workspaces, and more."
+            actionLabel="Add Location"
+            onAction={() => setShowForm(true)}
+          />
+        ) : (
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            {filteredLocations.map((location) => (
+              <LocationCard key={location.id} location={location} onEdit={handleEdit} />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {showForm && <LocationForm location={editingLocation} onClose={handleCloseForm} />}
+    </div>
+  );
+}
diff --git a/frontend/src/components/people/PeoplePage.tsx b/frontend/src/components/people/PeoplePage.tsx
new file mode 100644
index 0000000..57301e7
--- /dev/null
+++ b/frontend/src/components/people/PeoplePage.tsx
@@ -0,0 +1,82 @@
+import { useState } from 'react';
+import { Plus, Users } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
+import api from '@/lib/api';
+import type { Person } from '@/types';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { GridSkeleton } from '@/components/ui/skeleton';
+import { EmptyState } from '@/components/ui/empty-state';
+import PersonCard from './PersonCard';
+import PersonForm from './PersonForm';
+
+export default function PeoplePage() {
+  const [showForm, setShowForm] = useState(false);
+  const [editingPerson, setEditingPerson] = useState<Person | null>(null);
+  const [search, setSearch] = useState('');
+
+  const { data: people = [], isLoading } = useQuery({
+    queryKey: ['people'],
+    queryFn: async () => {
+      const { data } = await api.get<Person[]>('/people');
+      return data;
+    },
+  });
+
+  const filteredPeople = people.filter((person) =>
+    person.name.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const handleEdit = (person: Person) => {
+    setEditingPerson(person);
+    setShowForm(true);
+  };
+
+  const handleCloseForm = () => {
+    setShowForm(false);
+    setEditingPerson(null);
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="border-b bg-card px-6 py-4">
+        <div className="flex items-center justify-between mb-4">
+          <h1 className="text-3xl font-bold">People</h1>
+          <Button onClick={() => setShowForm(true)}>
+            <Plus className="mr-2 h-4 w-4" />
+            Add Person
+          </Button>
+        </div>
+
+        <Input
+          placeholder="Search people..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="max-w-md"
+        />
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-6">
+        {isLoading ? (
+          <GridSkeleton cards={6} />
+        ) : filteredPeople.length === 0 ? (
+          <EmptyState
+            icon={Users}
+            title="No contacts yet"
+            description="Add people to your directory to keep track of contacts and relationships."
+            actionLabel="Add Person"
+            onAction={() => setShowForm(true)}
+          />
+        ) : (
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            {filteredPeople.map((person) => (
+              <PersonCard key={person.id} person={person} onEdit={handleEdit} />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {showForm && <PersonForm person={editingPerson} onClose={handleCloseForm} />}
+    </div>
+  );
+}
diff --git a/frontend/src/components/people/PersonCard.tsx b/frontend/src/components/people/PersonCard.tsx
new file mode 100644
index 0000000..016a264
--- /dev/null
+++ b/frontend/src/components/people/PersonCard.tsx
@@ -0,0 +1,91 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { Mail, Phone, MapPin, Calendar, Trash2, Edit } from 'lucide-react';
+import { format } from 'date-fns';
+import api from '@/lib/api';
+import type { Person } from '@/types';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+
+interface PersonCardProps {
+  person: Person;
+  onEdit: (person: Person) => void;
+}
+
+
+export default function PersonCard({ person, onEdit }: PersonCardProps) {
+  const queryClient = useQueryClient();
+
+  const deleteMutation = useMutation({
+    mutationFn: async () => {
+      await api.delete(`/people/${person.id}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['people'] });
+      toast.success('Person deleted');
+    },
+    onError: () => {
+      toast.error('Failed to delete person');
+    },
+  });
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-start justify-between">
+          <div className="flex-1">
+            <CardTitle className="text-xl">{person.name}</CardTitle>
+            {person.relationship && (
+              <Badge variant="outline" style={{ marginTop: '0.5rem' }}>
+                {person.relationship}
+              </Badge>
+            )}
+          </div>
+          <div className="flex gap-1">
+            <Button variant="ghost" size="icon" onClick={() => onEdit(person)}>
+              <Edit className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => deleteMutation.mutate()}
+              disabled={deleteMutation.isPending}
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        {person.email && (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Mail className="h-4 w-4" />
+            <span className="truncate">{person.email}</span>
+          </div>
+        )}
+        {person.phone && (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Phone className="h-4 w-4" />
+            {person.phone}
+          </div>
+        )}
+        {person.address && (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <MapPin className="h-4 w-4" />
+            <span className="truncate">{person.address}</span>
+          </div>
+        )}
+        {person.birthday && (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Calendar className="h-4 w-4" />
+            Birthday: {format(new Date(person.birthday), 'MMM d, yyyy')}
+          </div>
+        )}
+        {person.notes && (
+          <p className="text-sm text-muted-foreground mt-2 line-clamp-2">{person.notes}</p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/people/PersonForm.tsx b/frontend/src/components/people/PersonForm.tsx
new file mode 100644
index 0000000..2a003d2
--- /dev/null
+++ b/frontend/src/components/people/PersonForm.tsx
@@ -0,0 +1,154 @@
+import { useState, FormEvent } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import api, { getErrorMessage } from '@/lib/api';
+import type { Person } from '@/types';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+
+interface PersonFormProps {
+  person: Person | null;
+  onClose: () => void;
+}
+
+export default function PersonForm({ person, onClose }: PersonFormProps) {
+  const queryClient = useQueryClient();
+  const [formData, setFormData] = useState({
+    name: person?.name || '',
+    email: person?.email || '',
+    phone: person?.phone || '',
+    address: person?.address || '',
+    birthday: person?.birthday || '',
+    relationship: person?.relationship || '',
+    notes: person?.notes || '',
+  });
+
+  const mutation = useMutation({
+    mutationFn: async (data: typeof formData) => {
+      if (person) {
+        const response = await api.put(`/people/${person.id}`, data);
+        return response.data;
+      } else {
+        const response = await api.post('/people', data);
+        return response.data;
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['people'] });
+      toast.success(person ? 'Person updated' : 'Person created');
+      onClose();
+    },
+    onError: (error) => {
+      toast.error(getErrorMessage(error, person ? 'Failed to update person' : 'Failed to create person'));
+    },
+  });
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    mutation.mutate(formData);
+  };
+
+  return (
+    <Dialog open={true} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogClose onClick={onClose} />
+        <DialogHeader>
+          <DialogTitle>{person ? 'Edit Person' : 'New Person'}</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              required
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                value={formData.email}
+                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="phone">Phone</Label>
+              <Input
+                id="phone"
+                type="tel"
+                value={formData.phone}
+                onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="address">Address</Label>
+            <Input
+              id="address"
+              value={formData.address}
+              onChange={(e) => setFormData({ ...formData, address: e.target.value })}
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="birthday">Birthday</Label>
+              <Input
+                id="birthday"
+                type="date"
+                value={formData.birthday}
+                onChange={(e) => setFormData({ ...formData, birthday: e.target.value })}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="relationship">Relationship</Label>
+              <Input
+                id="relationship"
+                value={formData.relationship}
+                onChange={(e) => setFormData({ ...formData, relationship: e.target.value })}
+                placeholder="e.g., Friend, Family, Colleague"
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="notes">Notes</Label>
+            <Textarea
+              id="notes"
+              value={formData.notes}
+              onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
+              rows={3}
+            />
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={mutation.isPending}>
+              {mutation.isPending ? 'Saving...' : person ? 'Update' : 'Create'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/components/projects/ProjectCard.tsx b/frontend/src/components/projects/ProjectCard.tsx
new file mode 100644
index 0000000..a4a5455
--- /dev/null
+++ b/frontend/src/components/projects/ProjectCard.tsx
@@ -0,0 +1,66 @@
+import { useNavigate } from 'react-router-dom';
+import { format } from 'date-fns';
+import { Calendar } from 'lucide-react';
+import type { Project } from '@/types';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+
+interface ProjectCardProps {
+  project: Project;
+  onEdit: (project: Project) => void;
+}
+
+const statusColors = {
+  not_started: 'bg-gray-500/10 text-gray-500 border-gray-500/20',
+  in_progress: 'bg-accent/10 text-accent border-accent/20',
+  completed: 'bg-green-500/10 text-green-500 border-green-500/20',
+};
+
+export default function ProjectCard({ project }: ProjectCardProps) {
+  const navigate = useNavigate();
+
+  const completedTasks = project.tasks?.filter((t) => t.status === 'completed').length || 0;
+  const totalTasks = project.tasks?.length || 0;
+  const progress = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0;
+
+  return (
+    <Card
+      className="cursor-pointer transition-colors hover:bg-accent/5"
+      onClick={() => navigate(`/projects/${project.id}`)}
+    >
+      <CardHeader>
+        <div className="flex items-start justify-between">
+          <CardTitle className="text-xl">{project.name}</CardTitle>
+          <Badge className={statusColors[project.status]}>{project.status.replace('_', ' ')}</Badge>
+        </div>
+        {project.description && (
+          <CardDescription className="line-clamp-2">{project.description}</CardDescription>
+        )}
+      </CardHeader>
+      <CardContent>
+        {totalTasks > 0 && (
+          <div className="mb-3">
+            <div className="flex justify-between text-sm mb-1">
+              <span className="text-muted-foreground">Progress</span>
+              <span className="font-medium">
+                {completedTasks}/{totalTasks} tasks
+              </span>
+            </div>
+            <div className="h-2 bg-secondary rounded-full overflow-hidden">
+              <div
+                className="h-full bg-accent transition-all"
+                style={{ width: `${progress}%` }}
+              />
+            </div>
+          </div>
+        )}
+        {project.due_date && (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Calendar className="h-4 w-4" />
+            Due {format(new Date(project.due_date), 'MMM d, yyyy')}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/projects/ProjectDetail.tsx b/frontend/src/components/projects/ProjectDetail.tsx
new file mode 100644
index 0000000..3c90b38
--- /dev/null
+++ b/frontend/src/components/projects/ProjectDetail.tsx
@@ -0,0 +1,197 @@
+import { useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { ArrowLeft, Plus, Trash2 } from 'lucide-react';
+import api from '@/lib/api';
+import type { Project, ProjectTask } from '@/types';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import TaskForm from './TaskForm';
+import ProjectForm from './ProjectForm';
+
+const statusColors = {
+  not_started: 'bg-gray-500/10 text-gray-500 border-gray-500/20',
+  in_progress: 'bg-accent/10 text-accent border-accent/20',
+  completed: 'bg-green-500/10 text-green-500 border-green-500/20',
+};
+
+const taskStatusColors = {
+  pending: 'bg-gray-500/10 text-gray-500 border-gray-500/20',
+  in_progress: 'bg-blue-500/10 text-blue-500 border-blue-500/20',
+  completed: 'bg-green-500/10 text-green-500 border-green-500/20',
+};
+
+const priorityColors = {
+  low: 'bg-green-500/10 text-green-500 border-green-500/20',
+  medium: 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20',
+  high: 'bg-red-500/10 text-red-500 border-red-500/20',
+};
+
+export default function ProjectDetail() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const [showTaskForm, setShowTaskForm] = useState(false);
+  const [showProjectForm, setShowProjectForm] = useState(false);
+  const [editingTask, setEditingTask] = useState<ProjectTask | null>(null);
+
+  const { data: project, isLoading } = useQuery({
+    queryKey: ['projects', id],
+    queryFn: async () => {
+      const { data } = await api.get<Project>(`/projects/${id}`);
+      return data;
+    },
+  });
+
+  const toggleTaskMutation = useMutation({
+    mutationFn: async ({ taskId, status }: { taskId: number; status: string }) => {
+      const newStatus = status === 'completed' ? 'pending' : 'completed';
+      const { data } = await api.put(`/projects/${id}/tasks/${taskId}`, { status: newStatus });
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['projects', id] });
+    },
+  });
+
+  const deleteTaskMutation = useMutation({
+    mutationFn: async (taskId: number) => {
+      await api.delete(`/projects/${id}/tasks/${taskId}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['projects', id] });
+      toast.success('Task deleted');
+    },
+  });
+
+  const deleteProjectMutation = useMutation({
+    mutationFn: async () => {
+      await api.delete(`/projects/${id}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['projects'] });
+      toast.success('Project deleted');
+      navigate('/projects');
+    },
+    onError: () => {
+      toast.error('Failed to delete project');
+    },
+  });
+
+  if (isLoading) {
+    return <div className="p-6 text-center text-muted-foreground">Loading project...</div>;
+  }
+
+  if (!project) {
+    return <div className="p-6 text-center text-muted-foreground">Project not found</div>;
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="border-b bg-card px-6 py-4">
+        <div className="flex items-center gap-4 mb-4">
+          <Button variant="ghost" size="icon" onClick={() => navigate('/projects')}>
+            <ArrowLeft className="h-5 w-5" />
+          </Button>
+          <h1 className="text-3xl font-bold flex-1">{project.name}</h1>
+          <Badge className={statusColors[project.status]}>{project.status.replace('_', ' ')}</Badge>
+          <Button variant="outline" onClick={() => setShowProjectForm(true)}>
+            Edit Project
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={() => deleteProjectMutation.mutate()}
+            disabled={deleteProjectMutation.isPending}
+          >
+            Delete Project
+          </Button>
+        </div>
+        {project.description && (
+          <p className="text-muted-foreground mb-4">{project.description}</p>
+        )}
+        <Button onClick={() => setShowTaskForm(true)}>
+          <Plus className="mr-2 h-4 w-4" />
+          Add Task
+        </Button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-6">
+        {!project.tasks || project.tasks.length === 0 ? (
+          <div className="text-center py-12">
+            <p className="text-muted-foreground">No tasks yet. Add one to get started!</p>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {project.tasks.map((task) => (
+              <Card key={task.id}>
+                <CardHeader>
+                  <div className="flex items-start gap-3">
+                    <Checkbox
+                      checked={task.status === 'completed'}
+                      onChange={() =>
+                        toggleTaskMutation.mutate({ taskId: task.id, status: task.status })
+                      }
+                      disabled={toggleTaskMutation.isPending}
+                      className="mt-1"
+                    />
+                    <div className="flex-1 min-w-0">
+                      <CardTitle className="text-lg">{task.title}</CardTitle>
+                      {task.description && (
+                        <CardDescription className="mt-1">{task.description}</CardDescription>
+                      )}
+                      <div className="flex items-center gap-2 mt-2">
+                        <Badge className={taskStatusColors[task.status]}>
+                          {task.status.replace('_', ' ')}
+                        </Badge>
+                        <Badge className={priorityColors[task.priority]}>{task.priority}</Badge>
+                      </div>
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => {
+                        setEditingTask(task);
+                        setShowTaskForm(true);
+                      }}
+                    >
+                      Edit
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => deleteTaskMutation.mutate(task.id)}
+                      disabled={deleteTaskMutation.isPending}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </CardHeader>
+              </Card>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {showTaskForm && (
+        <TaskForm
+          projectId={parseInt(id!)}
+          task={editingTask}
+          onClose={() => {
+            setShowTaskForm(false);
+            setEditingTask(null);
+          }}
+        />
+      )}
+
+      {showProjectForm && (
+        <ProjectForm
+          project={project}
+          onClose={() => setShowProjectForm(false)}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/projects/ProjectForm.tsx b/frontend/src/components/projects/ProjectForm.tsx
new file mode 100644
index 0000000..ee1eeff
--- /dev/null
+++ b/frontend/src/components/projects/ProjectForm.tsx
@@ -0,0 +1,138 @@
+import { useState, FormEvent } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import api, { getErrorMessage } from '@/lib/api';
+import type { Project } from '@/types';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Select } from '@/components/ui/select';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+
+interface ProjectFormProps {
+  project: Project | null;
+  onClose: () => void;
+}
+
+export default function ProjectForm({ project, onClose }: ProjectFormProps) {
+  const queryClient = useQueryClient();
+  const [formData, setFormData] = useState({
+    name: project?.name || '',
+    description: project?.description || '',
+    status: project?.status || 'not_started',
+    color: project?.color || '',
+    due_date: project?.due_date || '',
+  });
+
+  const mutation = useMutation({
+    mutationFn: async (data: typeof formData) => {
+      if (project) {
+        const response = await api.put(`/projects/${project.id}`, data);
+        return response.data;
+      } else {
+        const response = await api.post('/projects', data);
+        return response.data;
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['projects'] });
+      if (project) {
+        queryClient.invalidateQueries({ queryKey: ['projects', project.id.toString()] });
+      }
+      toast.success(project ? 'Project updated' : 'Project created');
+      onClose();
+    },
+    onError: (error) => {
+      toast.error(getErrorMessage(error, project ? 'Failed to update project' : 'Failed to create project'));
+    },
+  });
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    mutation.mutate(formData);
+  };
+
+  return (
+    <Dialog open={true} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogClose onClick={onClose} />
+        <DialogHeader>
+          <DialogTitle>{project ? 'Edit Project' : 'New Project'}</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="description">Description</Label>
+            <Textarea
+              id="description"
+              value={formData.description}
+              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+              rows={4}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="status">Status</Label>
+            <Select
+              id="status"
+              value={formData.status}
+              onChange={(e) => setFormData({ ...formData, status: e.target.value as any })}
+            >
+              <option value="not_started">Not Started</option>
+              <option value="in_progress">In Progress</option>
+              <option value="completed">Completed</option>
+            </Select>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="color">Color</Label>
+              <Input
+                id="color"
+                type="color"
+                value={formData.color}
+                onChange={(e) => setFormData({ ...formData, color: e.target.value })}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="due_date">Due Date</Label>
+              <Input
+                id="due_date"
+                type="date"
+                value={formData.due_date}
+                onChange={(e) => setFormData({ ...formData, due_date: e.target.value })}
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={mutation.isPending}>
+              {mutation.isPending ? 'Saving...' : project ? 'Update' : 'Create'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/components/projects/ProjectsPage.tsx b/frontend/src/components/projects/ProjectsPage.tsx
new file mode 100644
index 0000000..f2e7fca
--- /dev/null
+++ b/frontend/src/components/projects/ProjectsPage.tsx
@@ -0,0 +1,90 @@
+import { useState } from 'react';
+import { Plus, FolderKanban } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
+import api from '@/lib/api';
+import type { Project } from '@/types';
+import { Button } from '@/components/ui/button';
+import { Select } from '@/components/ui/select';
+import { Label } from '@/components/ui/label';
+import { GridSkeleton } from '@/components/ui/skeleton';
+import { EmptyState } from '@/components/ui/empty-state';
+import ProjectCard from './ProjectCard';
+import ProjectForm from './ProjectForm';
+
+export default function ProjectsPage() {
+  const [showForm, setShowForm] = useState(false);
+  const [editingProject, setEditingProject] = useState<Project | null>(null);
+  const [statusFilter, setStatusFilter] = useState('');
+
+  const { data: projects = [], isLoading } = useQuery({
+    queryKey: ['projects'],
+    queryFn: async () => {
+      const { data } = await api.get<Project[]>('/projects');
+      return data;
+    },
+  });
+
+  const filteredProjects = statusFilter
+    ? projects.filter((p) => p.status === statusFilter)
+    : projects;
+
+  const handleEdit = (project: Project) => {
+    setEditingProject(project);
+    setShowForm(true);
+  };
+
+  const handleCloseForm = () => {
+    setShowForm(false);
+    setEditingProject(null);
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="border-b bg-card px-6 py-4">
+        <div className="flex items-center justify-between mb-4">
+          <h1 className="text-3xl font-bold">Projects</h1>
+          <Button onClick={() => setShowForm(true)}>
+            <Plus className="mr-2 h-4 w-4" />
+            New Project
+          </Button>
+        </div>
+
+        <div className="flex items-center gap-4">
+          <Label htmlFor="status-filter">Filter by status:</Label>
+          <Select
+            id="status-filter"
+            value={statusFilter}
+            onChange={(e) => setStatusFilter(e.target.value)}
+          >
+            <option value="">All</option>
+            <option value="not_started">Not Started</option>
+            <option value="in_progress">In Progress</option>
+            <option value="completed">Completed</option>
+          </Select>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-6">
+        {isLoading ? (
+          <GridSkeleton cards={6} />
+        ) : filteredProjects.length === 0 ? (
+          <EmptyState
+            icon={FolderKanban}
+            title="No projects yet"
+            description="Create your first project to start tracking tasks and progress."
+            actionLabel="New Project"
+            onAction={() => setShowForm(true)}
+          />
+        ) : (
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            {filteredProjects.map((project) => (
+              <ProjectCard key={project.id} project={project} onEdit={handleEdit} />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {showForm && <ProjectForm project={editingProject} onClose={handleCloseForm} />}
+    </div>
+  );
+}
diff --git a/frontend/src/components/projects/TaskForm.tsx b/frontend/src/components/projects/TaskForm.tsx
new file mode 100644
index 0000000..9220117
--- /dev/null
+++ b/frontend/src/components/projects/TaskForm.tsx
@@ -0,0 +1,168 @@
+import { useState, FormEvent } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import api, { getErrorMessage } from '@/lib/api';
+import type { ProjectTask, Person } from '@/types';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Select } from '@/components/ui/select';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+
+interface TaskFormProps {
+  projectId: number;
+  task: ProjectTask | null;
+  onClose: () => void;
+}
+
+export default function TaskForm({ projectId, task, onClose }: TaskFormProps) {
+  const queryClient = useQueryClient();
+  const [formData, setFormData] = useState({
+    title: task?.title || '',
+    description: task?.description || '',
+    status: task?.status || 'pending',
+    priority: task?.priority || 'medium',
+    due_date: task?.due_date || '',
+    person_id: task?.person_id?.toString() || '',
+  });
+
+  const { data: people = [] } = useQuery({
+    queryKey: ['people'],
+    queryFn: async () => {
+      const { data } = await api.get<Person[]>('/people');
+      return data;
+    },
+  });
+
+  const mutation = useMutation({
+    mutationFn: async (data: typeof formData) => {
+      const payload = {
+        ...data,
+        person_id: data.person_id ? parseInt(data.person_id) : null,
+      };
+      if (task) {
+        const response = await api.put(`/projects/${projectId}/tasks/${task.id}`, payload);
+        return response.data;
+      } else {
+        const response = await api.post(`/projects/${projectId}/tasks`, payload);
+        return response.data;
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['projects', projectId.toString()] });
+      toast.success(task ? 'Task updated' : 'Task created');
+      onClose();
+    },
+    onError: (error) => {
+      toast.error(getErrorMessage(error, task ? 'Failed to update task' : 'Failed to create task'));
+    },
+  });
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    mutation.mutate(formData);
+  };
+
+  return (
+    <Dialog open={true} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogClose onClick={onClose} />
+        <DialogHeader>
+          <DialogTitle>{task ? 'Edit Task' : 'New Task'}</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="title">Title</Label>
+            <Input
+              id="title"
+              value={formData.title}
+              onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="description">Description</Label>
+            <Textarea
+              id="description"
+              value={formData.description}
+              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+              rows={3}
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="status">Status</Label>
+              <Select
+                id="status"
+                value={formData.status}
+                onChange={(e) => setFormData({ ...formData, status: e.target.value as any })}
+              >
+                <option value="pending">Pending</option>
+                <option value="in_progress">In Progress</option>
+                <option value="completed">Completed</option>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="priority">Priority</Label>
+              <Select
+                id="priority"
+                value={formData.priority}
+                onChange={(e) => setFormData({ ...formData, priority: e.target.value as any })}
+              >
+                <option value="low">Low</option>
+                <option value="medium">Medium</option>
+                <option value="high">High</option>
+              </Select>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="due_date">Due Date</Label>
+            <Input
+              id="due_date"
+              type="date"
+              value={formData.due_date}
+              onChange={(e) => setFormData({ ...formData, due_date: e.target.value })}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="person">Assign To</Label>
+            <Select
+              id="person"
+              value={formData.person_id}
+              onChange={(e) => setFormData({ ...formData, person_id: e.target.value })}
+            >
+              <option value="">Unassigned</option>
+              {people.map((person) => (
+                <option key={person.id} value={person.id}>
+                  {person.name}
+                </option>
+              ))}
+            </Select>
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={mutation.isPending}>
+              {mutation.isPending ? 'Saving...' : task ? 'Update' : 'Create'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/components/reminders/ReminderForm.tsx b/frontend/src/components/reminders/ReminderForm.tsx
new file mode 100644
index 0000000..0bf37f5
--- /dev/null
+++ b/frontend/src/components/reminders/ReminderForm.tsx
@@ -0,0 +1,124 @@
+import { useState, FormEvent } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import api, { getErrorMessage } from '@/lib/api';
+import type { Reminder } from '@/types';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Select } from '@/components/ui/select';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+
+interface ReminderFormProps {
+  reminder: Reminder | null;
+  onClose: () => void;
+}
+
+export default function ReminderForm({ reminder, onClose }: ReminderFormProps) {
+  const queryClient = useQueryClient();
+  const [formData, setFormData] = useState({
+    title: reminder?.title || '',
+    description: reminder?.description || '',
+    remind_at: reminder?.remind_at || '',
+    recurrence_rule: reminder?.recurrence_rule || '',
+  });
+
+  const mutation = useMutation({
+    mutationFn: async (data: typeof formData) => {
+      if (reminder) {
+        const response = await api.put(`/reminders/${reminder.id}`, data);
+        return response.data;
+      } else {
+        const response = await api.post('/reminders', data);
+        return response.data;
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['reminders'] });
+      toast.success(reminder ? 'Reminder updated' : 'Reminder created');
+      onClose();
+    },
+    onError: (error) => {
+      toast.error(getErrorMessage(error, reminder ? 'Failed to update reminder' : 'Failed to create reminder'));
+    },
+  });
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    mutation.mutate(formData);
+  };
+
+  return (
+    <Dialog open={true} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogClose onClick={onClose} />
+        <DialogHeader>
+          <DialogTitle>{reminder ? 'Edit Reminder' : 'New Reminder'}</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="title">Title</Label>
+            <Input
+              id="title"
+              value={formData.title}
+              onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="description">Description</Label>
+            <Textarea
+              id="description"
+              value={formData.description}
+              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+              rows={3}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="remind_at">Remind At</Label>
+            <Input
+              id="remind_at"
+              type="datetime-local"
+              value={formData.remind_at}
+              onChange={(e) => setFormData({ ...formData, remind_at: e.target.value })}
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="recurrence">Recurrence</Label>
+            <Select
+              id="recurrence"
+              value={formData.recurrence_rule}
+              onChange={(e) => setFormData({ ...formData, recurrence_rule: e.target.value })}
+            >
+              <option value="">None</option>
+              <option value="daily">Daily</option>
+              <option value="weekly">Weekly</option>
+              <option value="monthly">Monthly</option>
+            </Select>
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={mutation.isPending}>
+              {mutation.isPending ? 'Saving...' : reminder ? 'Update' : 'Create'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/components/reminders/ReminderList.tsx b/frontend/src/components/reminders/ReminderList.tsx
new file mode 100644
index 0000000..d94097d
--- /dev/null
+++ b/frontend/src/components/reminders/ReminderList.tsx
@@ -0,0 +1,114 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { format, isPast } from 'date-fns';
+import { Bell, BellOff, Trash2, Calendar } from 'lucide-react';
+import api from '@/lib/api';
+import type { Reminder } from '@/types';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
+interface ReminderListProps {
+  reminders: Reminder[];
+  onEdit: (reminder: Reminder) => void;
+}
+
+export default function ReminderList({ reminders, onEdit }: ReminderListProps) {
+  const queryClient = useQueryClient();
+
+  const dismissMutation = useMutation({
+    mutationFn: async (id: number) => {
+      const { data } = await api.patch(`/reminders/${id}/dismiss`);
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['reminders'] });
+      toast.success('Reminder dismissed');
+    },
+    onError: () => {
+      toast.error('Failed to dismiss reminder');
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: async (id: number) => {
+      await api.delete(`/reminders/${id}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['reminders'] });
+      toast.success('Reminder deleted');
+    },
+    onError: () => {
+      toast.error('Failed to delete reminder');
+    },
+  });
+
+  if (reminders.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-muted-foreground">No reminders found.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {reminders.map((reminder) => {
+        const isOverdue = !reminder.is_dismissed && isPast(new Date(reminder.remind_at));
+        return (
+          <Card
+            key={reminder.id}
+            className={cn(
+              'cursor-pointer transition-colors hover:bg-accent/5',
+              isOverdue && 'border-destructive'
+            )}
+            onClick={() => onEdit(reminder)}
+          >
+            <CardHeader>
+              <div className="flex items-start justify-between">
+                <div className="flex items-center gap-2">
+                  {reminder.is_dismissed ? (
+                    <BellOff className="h-5 w-5 text-muted-foreground" />
+                  ) : (
+                    <Bell className={cn('h-5 w-5', isOverdue && 'text-destructive')} />
+                  )}
+                  <CardTitle className="text-lg">{reminder.title}</CardTitle>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent>
+              {reminder.description && (
+                <p className="text-sm text-muted-foreground mb-3">{reminder.description}</p>
+              )}
+              <div className="flex items-center gap-2 text-sm text-muted-foreground mb-3">
+                <Calendar className="h-4 w-4" />
+                {format(new Date(reminder.remind_at), 'MMM d, yyyy h:mm a')}
+                {isOverdue && <span className="text-destructive font-medium">(Overdue)</span>}
+              </div>
+              <div className="flex gap-2" onClick={(e) => e.stopPropagation()}>
+                {!reminder.is_dismissed && (
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => dismissMutation.mutate(reminder.id)}
+                    disabled={dismissMutation.isPending}
+                  >
+                    Dismiss
+                  </Button>
+                )}
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => deleteMutation.mutate(reminder.id)}
+                  disabled={deleteMutation.isPending}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/frontend/src/components/reminders/RemindersPage.tsx b/frontend/src/components/reminders/RemindersPage.tsx
new file mode 100644
index 0000000..57f2aaf
--- /dev/null
+++ b/frontend/src/components/reminders/RemindersPage.tsx
@@ -0,0 +1,84 @@
+import { useState } from 'react';
+import { Plus } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
+import api from '@/lib/api';
+import type { Reminder } from '@/types';
+import { Button } from '@/components/ui/button';
+import { GridSkeleton } from '@/components/ui/skeleton';
+import ReminderList from './ReminderList';
+import ReminderForm from './ReminderForm';
+
+export default function RemindersPage() {
+  const [showForm, setShowForm] = useState(false);
+  const [editingReminder, setEditingReminder] = useState<Reminder | null>(null);
+  const [filter, setFilter] = useState<'all' | 'active' | 'dismissed'>('active');
+
+  const { data: reminders = [], isLoading } = useQuery({
+    queryKey: ['reminders'],
+    queryFn: async () => {
+      const { data } = await api.get<Reminder[]>('/reminders');
+      return data;
+    },
+  });
+
+  const filteredReminders = reminders.filter((reminder) => {
+    if (filter === 'active') return !reminder.is_dismissed;
+    if (filter === 'dismissed') return reminder.is_dismissed;
+    return true;
+  });
+
+  const handleEdit = (reminder: Reminder) => {
+    setEditingReminder(reminder);
+    setShowForm(true);
+  };
+
+  const handleCloseForm = () => {
+    setShowForm(false);
+    setEditingReminder(null);
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="border-b bg-card px-6 py-4">
+        <div className="flex items-center justify-between mb-4">
+          <h1 className="text-3xl font-bold">Reminders</h1>
+          <Button onClick={() => setShowForm(true)}>
+            <Plus className="mr-2 h-4 w-4" />
+            Add Reminder
+          </Button>
+        </div>
+
+        <div className="flex gap-2">
+          <Button
+            variant={filter === 'active' ? 'default' : 'outline'}
+            onClick={() => setFilter('active')}
+          >
+            Active
+          </Button>
+          <Button
+            variant={filter === 'dismissed' ? 'default' : 'outline'}
+            onClick={() => setFilter('dismissed')}
+          >
+            Dismissed
+          </Button>
+          <Button
+            variant={filter === 'all' ? 'default' : 'outline'}
+            onClick={() => setFilter('all')}
+          >
+            All
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-6">
+        {isLoading ? (
+          <GridSkeleton cards={6} />
+        ) : (
+          <ReminderList reminders={filteredReminders} onEdit={handleEdit} />
+        )}
+      </div>
+
+      {showForm && <ReminderForm reminder={editingReminder} onClose={handleCloseForm} />}
+    </div>
+  );
+}
diff --git a/frontend/src/components/settings/SettingsPage.tsx b/frontend/src/components/settings/SettingsPage.tsx
new file mode 100644
index 0000000..65979dc
--- /dev/null
+++ b/frontend/src/components/settings/SettingsPage.tsx
@@ -0,0 +1,193 @@
+import { useState, FormEvent, CSSProperties } from 'react';
+import { toast } from 'sonner';
+import { useSettings } from '@/hooks/useSettings';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
+import { cn } from '@/lib/utils';
+
+const accentColors = [
+  { name: 'cyan', label: 'Cyan', color: '#06b6d4' },
+  { name: 'blue', label: 'Blue', color: '#3b82f6' },
+  { name: 'purple', label: 'Purple', color: '#8b5cf6' },
+  { name: 'orange', label: 'Orange', color: '#f97316' },
+  { name: 'green', label: 'Green', color: '#22c55e' },
+];
+
+export default function SettingsPage() {
+  const { settings, updateSettings, changePin, isUpdating, isChangingPin } = useSettings();
+  const [selectedColor, setSelectedColor] = useState(settings?.accent_color || 'cyan');
+  const [upcomingDays, setUpcomingDays] = useState(settings?.upcoming_days || 7);
+  const [pinForm, setPinForm] = useState({
+    oldPin: '',
+    newPin: '',
+    confirmPin: '',
+  });
+
+  const handleColorChange = async (color: string) => {
+    setSelectedColor(color);
+    try {
+      await updateSettings({ accent_color: color });
+      toast.success('Accent color updated');
+    } catch (error) {
+      toast.error('Failed to update accent color');
+    }
+  };
+
+  const handleUpcomingDaysSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    try {
+      await updateSettings({ upcoming_days: upcomingDays });
+      toast.success('Settings updated');
+    } catch (error) {
+      toast.error('Failed to update settings');
+    }
+  };
+
+  const handlePinSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (pinForm.newPin !== pinForm.confirmPin) {
+      toast.error('New PINs do not match');
+      return;
+    }
+    if (pinForm.newPin.length < 4) {
+      toast.error('PIN must be at least 4 characters');
+      return;
+    }
+    try {
+      await changePin({ oldPin: pinForm.oldPin, newPin: pinForm.newPin });
+      toast.success('PIN changed successfully');
+      setPinForm({ oldPin: '', newPin: '', confirmPin: '' });
+    } catch (error: any) {
+      toast.error(error.response?.data?.detail || 'Failed to change PIN');
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="border-b bg-card px-6 py-4">
+        <h1 className="text-3xl font-bold">Settings</h1>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-6">
+        <div className="max-w-2xl space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Appearance</CardTitle>
+              <CardDescription>Customize the look and feel of your application</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div>
+                <Label>Accent Color</Label>
+                <div className="flex gap-3 mt-3">
+                  {accentColors.map((color) => (
+                    <button
+                      key={color.name}
+                      type="button"
+                      onClick={() => handleColorChange(color.name)}
+                      className={cn(
+                        'h-12 w-12 rounded-full border-2 transition-all hover:scale-110',
+                        selectedColor === color.name
+                          ? 'border-white ring-2 ring-offset-2 ring-offset-background'
+                          : 'border-transparent'
+                      )}
+                      style={
+                        {
+                          backgroundColor: color.color,
+                          '--tw-ring-color': color.color,
+                        } as CSSProperties
+                      }
+                      title={color.label}
+                    />
+                  ))}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Dashboard</CardTitle>
+              <CardDescription>Configure your dashboard preferences</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form onSubmit={handleUpcomingDaysSubmit} className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="upcoming_days">Upcoming Days Range</Label>
+                  <div className="flex gap-3 items-center">
+                    <Input
+                      id="upcoming_days"
+                      type="number"
+                      min="1"
+                      max="30"
+                      value={upcomingDays}
+                      onChange={(e) => setUpcomingDays(parseInt(e.target.value))}
+                      className="w-24"
+                    />
+                    <span className="text-sm text-muted-foreground">days</span>
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    How many days ahead to show in the upcoming items widget
+                  </p>
+                </div>
+                <Button type="submit" disabled={isUpdating}>
+                  {isUpdating ? 'Saving...' : 'Save'}
+                </Button>
+              </form>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Security</CardTitle>
+              <CardDescription>Change your PIN</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form onSubmit={handlePinSubmit} className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="old_pin">Current PIN</Label>
+                  <Input
+                    id="old_pin"
+                    type="password"
+                    value={pinForm.oldPin}
+                    onChange={(e) => setPinForm({ ...pinForm, oldPin: e.target.value })}
+                    required
+                    className="max-w-xs"
+                  />
+                </div>
+                <Separator />
+                <div className="space-y-2">
+                  <Label htmlFor="new_pin">New PIN</Label>
+                  <Input
+                    id="new_pin"
+                    type="password"
+                    value={pinForm.newPin}
+                    onChange={(e) => setPinForm({ ...pinForm, newPin: e.target.value })}
+                    required
+                    className="max-w-xs"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="confirm_pin">Confirm New PIN</Label>
+                  <Input
+                    id="confirm_pin"
+                    type="password"
+                    value={pinForm.confirmPin}
+                    onChange={(e) => setPinForm({ ...pinForm, confirmPin: e.target.value })}
+                    required
+                    className="max-w-xs"
+                  />
+                </div>
+                <Button type="submit" disabled={isChangingPin}>
+                  {isChangingPin ? 'Changing...' : 'Change PIN'}
+                </Button>
+              </form>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/todos/TodoForm.tsx b/frontend/src/components/todos/TodoForm.tsx
new file mode 100644
index 0000000..7a40665
--- /dev/null
+++ b/frontend/src/components/todos/TodoForm.tsx
@@ -0,0 +1,150 @@
+import { useState, FormEvent } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import api, { getErrorMessage } from '@/lib/api';
+import type { Todo } from '@/types';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Select } from '@/components/ui/select';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+
+interface TodoFormProps {
+  todo: Todo | null;
+  onClose: () => void;
+}
+
+export default function TodoForm({ todo, onClose }: TodoFormProps) {
+  const queryClient = useQueryClient();
+  const [formData, setFormData] = useState({
+    title: todo?.title || '',
+    description: todo?.description || '',
+    priority: todo?.priority || 'medium',
+    due_date: todo?.due_date || '',
+    category: todo?.category || '',
+    recurrence_rule: todo?.recurrence_rule || '',
+  });
+
+  const mutation = useMutation({
+    mutationFn: async (data: typeof formData) => {
+      if (todo) {
+        const response = await api.put(`/todos/${todo.id}`, data);
+        return response.data;
+      } else {
+        const response = await api.post('/todos', data);
+        return response.data;
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['todos'] });
+      toast.success(todo ? 'Todo updated' : 'Todo created');
+      onClose();
+    },
+    onError: (error) => {
+      toast.error(getErrorMessage(error, todo ? 'Failed to update todo' : 'Failed to create todo'));
+    },
+  });
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    mutation.mutate(formData);
+  };
+
+  return (
+    <Dialog open={true} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogClose onClick={onClose} />
+        <DialogHeader>
+          <DialogTitle>{todo ? 'Edit Todo' : 'New Todo'}</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="title">Title</Label>
+            <Input
+              id="title"
+              value={formData.title}
+              onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="description">Description</Label>
+            <Textarea
+              id="description"
+              value={formData.description}
+              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+              rows={3}
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="priority">Priority</Label>
+              <Select
+                id="priority"
+                value={formData.priority}
+                onChange={(e) => setFormData({ ...formData, priority: e.target.value as any })}
+              >
+                <option value="low">Low</option>
+                <option value="medium">Medium</option>
+                <option value="high">High</option>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="due_date">Due Date</Label>
+              <Input
+                id="due_date"
+                type="date"
+                value={formData.due_date}
+                onChange={(e) => setFormData({ ...formData, due_date: e.target.value })}
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="category">Category</Label>
+            <Input
+              id="category"
+              value={formData.category}
+              onChange={(e) => setFormData({ ...formData, category: e.target.value })}
+              placeholder="e.g., Work, Personal, Shopping"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="recurrence">Recurrence</Label>
+            <Select
+              id="recurrence"
+              value={formData.recurrence_rule}
+              onChange={(e) => setFormData({ ...formData, recurrence_rule: e.target.value })}
+            >
+              <option value="">None</option>
+              <option value="daily">Daily</option>
+              <option value="weekly">Weekly</option>
+              <option value="monthly">Monthly</option>
+            </Select>
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={mutation.isPending}>
+              {mutation.isPending ? 'Saving...' : todo ? 'Update' : 'Create'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/components/todos/TodoItem.tsx b/frontend/src/components/todos/TodoItem.tsx
new file mode 100644
index 0000000..c1751e0
--- /dev/null
+++ b/frontend/src/components/todos/TodoItem.tsx
@@ -0,0 +1,93 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { Trash2, Calendar } from 'lucide-react';
+import { format } from 'date-fns';
+import api from '@/lib/api';
+import type { Todo } from '@/types';
+import { cn } from '@/lib/utils';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+
+interface TodoItemProps {
+  todo: Todo;
+  onEdit: (todo: Todo) => void;
+}
+
+const priorityColors = {
+  low: 'bg-green-500/10 text-green-500 border-green-500/20',
+  medium: 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20',
+  high: 'bg-red-500/10 text-red-500 border-red-500/20',
+};
+
+export default function TodoItem({ todo, onEdit }: TodoItemProps) {
+  const queryClient = useQueryClient();
+
+  const toggleMutation = useMutation({
+    mutationFn: async () => {
+      const { data } = await api.patch(`/todos/${todo.id}/toggle`);
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['todos'] });
+      toast.success(todo.completed ? 'Todo marked incomplete' : 'Todo completed!');
+    },
+    onError: () => {
+      toast.error('Failed to update todo');
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: async () => {
+      await api.delete(`/todos/${todo.id}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['todos'] });
+      toast.success('Todo deleted');
+    },
+    onError: () => {
+      toast.error('Failed to delete todo');
+    },
+  });
+
+  return (
+    <div className="flex items-center gap-3 rounded-lg border bg-card p-4 hover:bg-accent/5 transition-colors">
+      <Checkbox
+        checked={todo.completed}
+        onChange={() => toggleMutation.mutate()}
+        disabled={toggleMutation.isPending}
+      />
+      <div className="flex-1 min-w-0 cursor-pointer" onClick={() => onEdit(todo)}>
+        <h3
+          className={cn(
+            'font-medium',
+            todo.completed && 'line-through text-muted-foreground'
+          )}
+        >
+          {todo.title}
+        </h3>
+        {todo.description && (
+          <p className="text-sm text-muted-foreground mt-1 line-clamp-1">{todo.description}</p>
+        )}
+        <div className="flex items-center gap-2 mt-2">
+          <Badge className={priorityColors[todo.priority]}>{todo.priority}</Badge>
+          {todo.category && <Badge variant="outline">{todo.category}</Badge>}
+          {todo.due_date && (
+            <div className="flex items-center gap-1 text-xs text-muted-foreground">
+              <Calendar className="h-3 w-3" />
+              {format(new Date(todo.due_date), 'MMM d, yyyy')}
+            </div>
+          )}
+        </div>
+      </div>
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={() => deleteMutation.mutate()}
+        disabled={deleteMutation.isPending}
+      >
+        <Trash2 className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}
diff --git a/frontend/src/components/todos/TodoList.tsx b/frontend/src/components/todos/TodoList.tsx
new file mode 100644
index 0000000..9c3ddfe
--- /dev/null
+++ b/frontend/src/components/todos/TodoList.tsx
@@ -0,0 +1,25 @@
+import type { Todo } from '@/types';
+import TodoItem from './TodoItem';
+
+interface TodoListProps {
+  todos: Todo[];
+  onEdit: (todo: Todo) => void;
+}
+
+export default function TodoList({ todos, onEdit }: TodoListProps) {
+  if (todos.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-muted-foreground">No todos found. Create one to get started!</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {todos.map((todo) => (
+        <TodoItem key={todo.id} todo={todo} onEdit={onEdit} />
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/src/components/todos/TodosPage.tsx b/frontend/src/components/todos/TodosPage.tsx
new file mode 100644
index 0000000..5dc19ca
--- /dev/null
+++ b/frontend/src/components/todos/TodosPage.tsx
@@ -0,0 +1,110 @@
+import { useState } from 'react';
+import { Plus } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
+import api from '@/lib/api';
+import type { Todo } from '@/types';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Select } from '@/components/ui/select';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { ListSkeleton } from '@/components/ui/skeleton';
+import TodoList from './TodoList';
+import TodoForm from './TodoForm';
+
+export default function TodosPage() {
+  const [showForm, setShowForm] = useState(false);
+  const [editingTodo, setEditingTodo] = useState<Todo | null>(null);
+  const [filters, setFilters] = useState({
+    priority: '',
+    category: '',
+    showCompleted: true,
+    search: '',
+  });
+
+  const { data: todos = [], isLoading } = useQuery({
+    queryKey: ['todos'],
+    queryFn: async () => {
+      const { data } = await api.get<Todo[]>('/todos');
+      return data;
+    },
+  });
+
+  const filteredTodos = todos.filter((todo) => {
+    if (filters.priority && todo.priority !== filters.priority) return false;
+    if (filters.category && todo.category !== filters.category) return false;
+    if (!filters.showCompleted && todo.completed) return false;
+    if (filters.search && !todo.title.toLowerCase().includes(filters.search.toLowerCase()))
+      return false;
+    return true;
+  });
+
+  const handleEdit = (todo: Todo) => {
+    setEditingTodo(todo);
+    setShowForm(true);
+  };
+
+  const handleCloseForm = () => {
+    setShowForm(false);
+    setEditingTodo(null);
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="border-b bg-card px-6 py-4">
+        <div className="flex items-center justify-between mb-4">
+          <h1 className="text-3xl font-bold">Todos</h1>
+          <Button onClick={() => setShowForm(true)}>
+            <Plus className="mr-2 h-4 w-4" />
+            Add Todo
+          </Button>
+        </div>
+
+        <div className="flex flex-wrap gap-4">
+          <div className="flex-1 min-w-[200px]">
+            <Input
+              placeholder="Search todos..."
+              value={filters.search}
+              onChange={(e) => setFilters({ ...filters, search: e.target.value })}
+            />
+          </div>
+          <Select
+            value={filters.priority}
+            onChange={(e) => setFilters({ ...filters, priority: e.target.value })}
+          >
+            <option value="">All Priorities</option>
+            <option value="low">Low</option>
+            <option value="medium">Medium</option>
+            <option value="high">High</option>
+          </Select>
+          <Input
+            placeholder="Filter by category..."
+            value={filters.category}
+            onChange={(e) => setFilters({ ...filters, category: e.target.value })}
+            className="w-48"
+          />
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="show-completed"
+              checked={filters.showCompleted}
+              onChange={(e) =>
+                setFilters({ ...filters, showCompleted: (e.target as HTMLInputElement).checked })
+              }
+            />
+            <Label htmlFor="show-completed">Show completed</Label>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-6">
+        {isLoading ? (
+          <ListSkeleton rows={6} />
+        ) : (
+          <TodoList todos={filteredTodos} onEdit={handleEdit} />
+        )}
+      </div>
+
+      {showForm && <TodoForm todo={editingTodo} onClose={handleCloseForm} />}
+    </div>
+  );
+}
diff --git a/frontend/src/components/ui/badge.tsx b/frontend/src/components/ui/badge.tsx
new file mode 100644
index 0000000..892b48f
--- /dev/null
+++ b/frontend/src/components/ui/badge.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-accent text-accent-foreground',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
new file mode 100644
index 0000000..643041c
--- /dev/null
+++ b/frontend/src/components/ui/button.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-accent text-accent-foreground hover:bg-accent/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent/10 hover:text-accent',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent/10 hover:text-accent',
+        link: 'text-accent underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx
new file mode 100644
index 0000000..1a2c86c
--- /dev/null
+++ b/frontend/src/components/ui/card.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+      {...props}
+    />
+  )
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  )
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
diff --git a/frontend/src/components/ui/checkbox.tsx b/frontend/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..3343c9a
--- /dev/null
+++ b/frontend/src/components/ui/checkbox.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Check } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div className="relative inline-flex items-center">
+        <input
+          type="checkbox"
+          className={cn(
+            'peer h-4 w-4 shrink-0 rounded-sm border border-input ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 appearance-none checked:bg-accent checked:border-accent',
+            className
+          )}
+          ref={ref}
+          {...props}
+        />
+        <Check className="absolute left-0 h-4 w-4 text-accent-foreground opacity-0 peer-checked:opacity-100 pointer-events-none" />
+      </div>
+    );
+  }
+);
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..9e83cb7
--- /dev/null
+++ b/frontend/src/components/ui/dialog.tsx
@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface DialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: React.ReactNode;
+}
+
+const Dialog: React.FC<DialogProps> = ({ open, onOpenChange, children }) => {
+  React.useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onOpenChange(false);
+    };
+    if (open) {
+      document.addEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'hidden';
+    }
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+      document.body.style.overflow = '';
+    };
+  }, [open, onOpenChange]);
+
+  if (!open) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div
+        className="fixed inset-0 bg-background/80 backdrop-blur-sm"
+        onClick={() => onOpenChange(false)}
+      />
+      <div className="relative z-50">{children}</div>
+    </div>,
+    document.body
+  );
+};
+
+const DialogContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'relative grid w-full max-w-lg gap-4 border bg-card p-6 shadow-lg rounded-lg',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+);
+DialogContent.displayName = 'DialogContent';
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h2
+      ref={ref}
+      className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+DialogTitle.displayName = 'DialogTitle';
+
+const DialogDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+));
+DialogDescription.displayName = 'DialogDescription';
+
+const DialogClose = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ className, ...props }, ref) => (
+    <button
+      ref={ref}
+      className={cn(
+        'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none',
+        className
+      )}
+      {...props}
+    >
+      <X className="h-4 w-4" />
+      <span className="sr-only">Close</span>
+    </button>
+  )
+);
+DialogClose.displayName = 'DialogClose';
+
+export { Dialog, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose };
diff --git a/frontend/src/components/ui/dropdown-menu.tsx b/frontend/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..2907700
--- /dev/null
+++ b/frontend/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+interface DropdownMenuProps {
+  children: React.ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+const DropdownMenu: React.FC<DropdownMenuProps> = ({ children }) => {
+  return <div className="relative inline-block">{children}</div>;
+};
+
+const DropdownMenuTrigger = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, children, ...props }, ref) => (
+  <button ref={ref} className={cn(className)} {...props}>
+    {children}
+  </button>
+));
+DropdownMenuTrigger.displayName = 'DropdownMenuTrigger';
+
+const DropdownMenuContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'absolute right-0 z-50 mt-2 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+);
+DropdownMenuContent.displayName = 'DropdownMenuContent';
+
+const DropdownMenuItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+DropdownMenuItem.displayName = 'DropdownMenuItem';
+
+const DropdownMenuSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />
+  )
+);
+DropdownMenuSeparator.displayName = 'DropdownMenuSeparator';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+};
diff --git a/frontend/src/components/ui/empty-state.tsx b/frontend/src/components/ui/empty-state.tsx
new file mode 100644
index 0000000..4ae63ff
--- /dev/null
+++ b/frontend/src/components/ui/empty-state.tsx
@@ -0,0 +1,29 @@
+import type { LucideIcon } from 'lucide-react';
+import { Button } from './button';
+import { Plus } from 'lucide-react';
+
+interface EmptyStateProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  actionLabel?: string;
+  onAction?: () => void;
+}
+
+export function EmptyState({ icon: Icon, title, description, actionLabel, onAction }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center py-16 px-4">
+      <div className="rounded-full bg-muted p-4 mb-4">
+        <Icon className="h-8 w-8 text-muted-foreground" />
+      </div>
+      <h3 className="text-lg font-semibold mb-1">{title}</h3>
+      <p className="text-sm text-muted-foreground text-center max-w-sm mb-4">{description}</p>
+      {actionLabel && onAction && (
+        <Button onClick={onAction}>
+          <Plus className="mr-2 h-4 w-4" />
+          {actionLabel}
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
new file mode 100644
index 0000000..04db187
--- /dev/null
+++ b/frontend/src/components/ui/input.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/frontend/src/components/ui/label.tsx b/frontend/src/components/ui/label.tsx
new file mode 100644
index 0000000..6153ac7
--- /dev/null
+++ b/frontend/src/components/ui/label.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {}
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Label.displayName = 'Label';
+
+export { Label };
diff --git a/frontend/src/components/ui/scroll-area.tsx b/frontend/src/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..85a3c52
--- /dev/null
+++ b/frontend/src/components/ui/scroll-area.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const ScrollArea = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => (
+    <div ref={ref} className={cn('relative overflow-auto', className)} {...props}>
+      {children}
+    </div>
+  )
+);
+ScrollArea.displayName = 'ScrollArea';
+
+export { ScrollArea };
diff --git a/frontend/src/components/ui/select.tsx b/frontend/src/components/ui/select.tsx
new file mode 100644
index 0000000..6f771df
--- /dev/null
+++ b/frontend/src/components/ui/select.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}
+
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div className="relative">
+        <select
+          className={cn(
+            'flex h-10 w-full appearance-none rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </select>
+        <ChevronDown className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 opacity-50 pointer-events-none" />
+      </div>
+    );
+  }
+);
+Select.displayName = 'Select';
+
+export { Select };
diff --git a/frontend/src/components/ui/separator.tsx b/frontend/src/components/ui/separator.tsx
new file mode 100644
index 0000000..d315901
--- /dev/null
+++ b/frontend/src/components/ui/separator.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical';
+  decorative?: boolean;
+}
+
+const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
+  ({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+    <div
+      ref={ref}
+      role={decorative ? 'none' : 'separator'}
+      aria-orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = 'Separator';
+
+export { Separator };
diff --git a/frontend/src/components/ui/skeleton.tsx b/frontend/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..e626de9
--- /dev/null
+++ b/frontend/src/components/ui/skeleton.tsx
@@ -0,0 +1,81 @@
+import { cn } from '@/lib/utils';
+
+interface SkeletonProps {
+  className?: string;
+}
+
+export function Skeleton({ className }: SkeletonProps) {
+  return (
+    <div
+      className={cn(
+        'animate-pulse rounded-md bg-muted',
+        className
+      )}
+    />
+  );
+}
+
+export function CardSkeleton() {
+  return (
+    <div className="rounded-lg border bg-card p-6 space-y-3">
+      <Skeleton className="h-5 w-2/3" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-1/2" />
+    </div>
+  );
+}
+
+export function ListSkeleton({ rows = 5 }: { rows?: number }) {
+  return (
+    <div className="space-y-3">
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="flex items-center gap-3 rounded-lg border bg-card p-4">
+          <Skeleton className="h-5 w-5 rounded" />
+          <div className="flex-1 space-y-2">
+            <Skeleton className="h-4 w-1/3" />
+            <Skeleton className="h-3 w-1/2" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function GridSkeleton({ cards = 6 }: { cards?: number }) {
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {Array.from({ length: cards }).map((_, i) => (
+        <CardSkeleton key={i} />
+      ))}
+    </div>
+  );
+}
+
+export function DashboardSkeleton() {
+  return (
+    <div className="space-y-6">
+      <div className="grid gap-4 md:grid-cols-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} className="rounded-lg border bg-card p-6 space-y-2">
+            <Skeleton className="h-4 w-20" />
+            <Skeleton className="h-8 w-12" />
+          </div>
+        ))}
+      </div>
+      <div className="grid gap-6 lg:grid-cols-2">
+        <div className="rounded-lg border bg-card p-6 space-y-3">
+          <Skeleton className="h-5 w-32" />
+          {Array.from({ length: 3 }).map((_, i) => (
+            <Skeleton key={i} className="h-10 w-full" />
+          ))}
+        </div>
+        <div className="rounded-lg border bg-card p-6 space-y-3">
+          <Skeleton className="h-5 w-32" />
+          {Array.from({ length: 3 }).map((_, i) => (
+            <Skeleton key={i} className="h-10 w-full" />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/ui/textarea.tsx b/frontend/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..dcb60fb
--- /dev/null
+++ b/frontend/src/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
diff --git a/frontend/src/hooks/useAuth.ts b/frontend/src/hooks/useAuth.ts
new file mode 100644
index 0000000..b983116
--- /dev/null
+++ b/frontend/src/hooks/useAuth.ts
@@ -0,0 +1,56 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import api from '@/lib/api';
+import type { AuthStatus } from '@/types';
+
+export function useAuth() {
+  const queryClient = useQueryClient();
+
+  const authQuery = useQuery({
+    queryKey: ['auth'],
+    queryFn: async () => {
+      const { data } = await api.get<AuthStatus>('/auth/status');
+      return data;
+    },
+    retry: false,
+  });
+
+  const loginMutation = useMutation({
+    mutationFn: async (pin: string) => {
+      const { data } = await api.post('/auth/login', { pin });
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['auth'] });
+    },
+  });
+
+  const setupMutation = useMutation({
+    mutationFn: async (pin: string) => {
+      const { data } = await api.post('/auth/setup', { pin });
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['auth'] });
+    },
+  });
+
+  const logoutMutation = useMutation({
+    mutationFn: async () => {
+      const { data } = await api.post('/auth/logout');
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['auth'] });
+    },
+  });
+
+  return {
+    authStatus: authQuery.data,
+    isLoading: authQuery.isLoading,
+    login: loginMutation.mutateAsync,
+    setup: setupMutation.mutateAsync,
+    logout: logoutMutation.mutateAsync,
+    isLoginPending: loginMutation.isPending,
+    isSetupPending: setupMutation.isPending,
+  };
+}
diff --git a/frontend/src/hooks/useSettings.ts b/frontend/src/hooks/useSettings.ts
new file mode 100644
index 0000000..84ecdb4
--- /dev/null
+++ b/frontend/src/hooks/useSettings.ts
@@ -0,0 +1,41 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import api from '@/lib/api';
+import type { Settings } from '@/types';
+
+export function useSettings() {
+  const queryClient = useQueryClient();
+
+  const settingsQuery = useQuery({
+    queryKey: ['settings'],
+    queryFn: async () => {
+      const { data } = await api.get<Settings>('/settings');
+      return data;
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: async (updates: Partial<Settings>) => {
+      const { data } = await api.put<Settings>('/settings', updates);
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['settings'] });
+    },
+  });
+
+  const changePinMutation = useMutation({
+    mutationFn: async ({ oldPin, newPin }: { oldPin: string; newPin: string }) => {
+      const { data } = await api.put('/settings/pin', { old_pin: oldPin, new_pin: newPin });
+      return data;
+    },
+  });
+
+  return {
+    settings: settingsQuery.data,
+    isLoading: settingsQuery.isLoading,
+    updateSettings: updateMutation.mutateAsync,
+    changePin: changePinMutation.mutateAsync,
+    isUpdating: updateMutation.isPending,
+    isChangingPin: changePinMutation.isPending,
+  };
+}
diff --git a/frontend/src/hooks/useTheme.ts b/frontend/src/hooks/useTheme.ts
new file mode 100644
index 0000000..9ca6961
--- /dev/null
+++ b/frontend/src/hooks/useTheme.ts
@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import { useSettings } from './useSettings';
+
+const ACCENT_PRESETS: Record<string, { h: number; s: number; l: number }> = {
+  cyan: { h: 187, s: 85.7, l: 53.3 },
+  blue: { h: 217, s: 91.2, l: 59.8 },
+  purple: { h: 258, s: 89.5, l: 66.3 },
+  orange: { h: 21, s: 94.6, l: 53.3 },
+  green: { h: 142, s: 70.6, l: 45.3 },
+};
+
+export function useTheme() {
+  const { settings } = useSettings();
+
+  useEffect(() => {
+    if (!settings?.accent_color) return;
+
+    const preset = ACCENT_PRESETS[settings.accent_color];
+    if (preset) {
+      document.documentElement.style.setProperty('--accent-h', preset.h.toString());
+      document.documentElement.style.setProperty('--accent-s', `${preset.s}%`);
+      document.documentElement.style.setProperty('--accent-l', `${preset.l}%`);
+    }
+  }, [settings?.accent_color]);
+
+  return {
+    accentColor: settings?.accent_color || 'cyan',
+    presets: ACCENT_PRESETS,
+  };
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
new file mode 100644
index 0000000..bc3ca2a
--- /dev/null
+++ b/frontend/src/index.css
@@ -0,0 +1,109 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 5%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 5%;
+    --popover-foreground: 0 0% 98%;
+    --primary: var(--accent-h) var(--accent-s) var(--accent-l);
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 10%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 10%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent-color: var(--accent-h) var(--accent-s) var(--accent-l);
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: var(--accent-h) var(--accent-s) var(--accent-l);
+    --radius: 0.5rem;
+
+    /* Default accent: cyan */
+    --accent-h: 187;
+    --accent-s: 85.7%;
+    --accent-l: 53.3%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
+/* FullCalendar Dark Theme Overrides */
+.fc {
+  --fc-border-color: hsl(0 0% 14.9%);
+  --fc-button-bg-color: hsl(0 0% 10%);
+  --fc-button-border-color: hsl(0 0% 14.9%);
+  --fc-button-hover-bg-color: hsl(0 0% 15%);
+  --fc-button-hover-border-color: hsl(0 0% 20%);
+  --fc-button-active-bg-color: hsl(var(--accent-color));
+  --fc-button-active-border-color: hsl(var(--accent-color));
+  --fc-event-bg-color: hsl(var(--accent-color));
+  --fc-event-border-color: hsl(var(--accent-color));
+  --fc-event-text-color: hsl(0 0% 98%);
+  --fc-page-bg-color: hsl(0 0% 3.9%);
+  --fc-neutral-bg-color: hsl(0 0% 5%);
+  --fc-neutral-text-color: hsl(0 0% 98%);
+  --fc-list-event-hover-bg-color: hsl(0 0% 10%);
+}
+
+.fc .fc-button-primary {
+  background-color: var(--fc-button-bg-color);
+  border-color: var(--fc-button-border-color);
+  color: hsl(0 0% 98%);
+}
+
+.fc .fc-button-primary:hover {
+  background-color: var(--fc-button-hover-bg-color);
+  border-color: var(--fc-button-hover-border-color);
+}
+
+.fc .fc-button-primary:not(:disabled).fc-button-active,
+.fc .fc-button-primary:not(:disabled):active {
+  background-color: var(--fc-button-active-bg-color);
+  border-color: var(--fc-button-active-border-color);
+}
+
+.fc .fc-daygrid-day.fc-day-today {
+  background-color: hsl(0 0% 8%) !important;
+}
+
+.fc .fc-col-header-cell {
+  background-color: hsl(0 0% 5%);
+  border-color: var(--fc-border-color);
+}
+
+.fc-theme-standard td,
+.fc-theme-standard th {
+  border-color: var(--fc-border-color);
+}
+
+.fc-theme-standard .fc-scrollgrid {
+  border-color: var(--fc-border-color);
+}
+
+.fc .fc-daygrid-day-number,
+.fc .fc-col-header-cell-cushion {
+  color: hsl(0 0% 98%);
+}
+
+.fc .fc-timegrid-slot {
+  border-color: var(--fc-border-color);
+}
+
+.fc .fc-timegrid-slot-label {
+  color: hsl(0 0% 63.9%);
+}
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
new file mode 100644
index 0000000..05d05cf
--- /dev/null
+++ b/frontend/src/lib/api.ts
@@ -0,0 +1,29 @@
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: '/api',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      window.location.href = '/login';
+    }
+    return Promise.reject(error);
+  }
+);
+
+export function getErrorMessage(error: unknown, fallback: string): string {
+  if (axios.isAxiosError(error) && error.response?.data?.detail) {
+    const detail = error.response.data.detail;
+    if (typeof detail === 'string') return detail;
+    if (Array.isArray(detail)) return detail.map((d: { msg?: string }) => d.msg || '').join(', ');
+  }
+  return fallback;
+}
+
+export default api;
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
new file mode 100644
index 0000000..9ad0df4
--- /dev/null
+++ b/frontend/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
new file mode 100644
index 0000000..1ba378e
--- /dev/null
+++ b/frontend/src/main.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Toaster } from 'sonner';
+import App from './App';
+import './index.css';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 1,
+      staleTime: 5 * 60 * 1000,
+    },
+  },
+});
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <App />
+        <Toaster position="top-right" theme="dark" />
+      </BrowserRouter>
+    </QueryClientProvider>
+  </React.StrictMode>
+);
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
new file mode 100644
index 0000000..7daed90
--- /dev/null
+++ b/frontend/src/types/index.ts
@@ -0,0 +1,149 @@
+export interface Settings {
+  id: number;
+  accent_color: string;
+  upcoming_days: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface Todo {
+  id: number;
+  title: string;
+  description?: string;
+  completed: boolean;
+  completed_at?: string;
+  priority: 'low' | 'medium' | 'high';
+  due_date?: string;
+  category?: string;
+  recurrence_rule?: string;
+  project_id?: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CalendarEvent {
+  id: number;
+  title: string;
+  description?: string;
+  start_datetime: string;
+  end_datetime: string;
+  all_day: boolean;
+  location_id?: number;
+  color?: string;
+  recurrence_rule?: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface Reminder {
+  id: number;
+  title: string;
+  description?: string;
+  remind_at: string;
+  is_active: boolean;
+  is_dismissed: boolean;
+  recurrence_rule?: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface Project {
+  id: number;
+  name: string;
+  description?: string;
+  status: 'not_started' | 'in_progress' | 'completed';
+  color?: string;
+  due_date?: string;
+  created_at: string;
+  updated_at: string;
+  tasks: ProjectTask[];
+}
+
+export interface ProjectTask {
+  id: number;
+  project_id: number;
+  title: string;
+  description?: string;
+  status: 'pending' | 'in_progress' | 'completed';
+  priority: 'low' | 'medium' | 'high';
+  due_date?: string;
+  person_id?: number;
+  sort_order: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface Person {
+  id: number;
+  name: string;
+  email?: string;
+  phone?: string;
+  address?: string;
+  birthday?: string;
+  relationship?: string;
+  notes?: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface Location {
+  id: number;
+  name: string;
+  address: string;
+  category: string;
+  notes?: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface AuthStatus {
+  authenticated: boolean;
+  setup_required: boolean;
+}
+
+export interface DashboardData {
+  todays_events: Array<{
+    id: number;
+    title: string;
+    start_datetime: string;
+    end_datetime: string;
+    all_day: boolean;
+    color?: string;
+  }>;
+  upcoming_todos: Array<{
+    id: number;
+    title: string;
+    due_date: string;
+    priority: string;
+    category?: string;
+  }>;
+  active_reminders: Array<{
+    id: number;
+    title: string;
+    remind_at: string;
+  }>;
+  project_stats: {
+    total: number;
+    by_status: Record<string, number>;
+  };
+  total_people: number;
+  total_locations: number;
+}
+
+export interface UpcomingItem {
+  type: 'todo' | 'event' | 'reminder';
+  id: number;
+  title: string;
+  date: string;
+  datetime?: string;
+  priority?: string;
+  category?: string;
+  all_day?: boolean;
+  color?: string;
+}
+
+export interface UpcomingResponse {
+  items: UpcomingItem[];
+  days: number;
+  cutoff_date: string;
+}
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
new file mode 100644
index 0000000..db3f7d2
--- /dev/null
+++ b/frontend/tailwind.config.ts
@@ -0,0 +1,54 @@
+import type { Config } from 'tailwindcss';
+
+export default {
+  darkMode: ['class'],
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent-color))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000..c20738e
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
new file mode 100644
index 0000000..42872c5
--- /dev/null
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
new file mode 100644
index 0000000..c4cecdd
--- /dev/null
+++ b/frontend/vite.config.ts
@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+    },
+  },
+});
diff --git a/progress.md b/progress.md
new file mode 100644
index 0000000..91ff8ed
--- /dev/null
+++ b/progress.md
@@ -0,0 +1,277 @@
+# LifeManager - Project Progress
+
+## Overview
+Personal life administration web app with dark theme, accent color customization, and Docker deployment.
+
+**Stack:** React + TypeScript | FastAPI + SQLAlchemy | PostgreSQL | Docker Compose
+
+---
+
+## Milestone Tracker
+
+### Phase 1: Scaffolding & Infrastructure
+- [x] `docker-compose.yaml` - 3-service architecture (db, backend, frontend)
+- [x] `.env` / `.env.example` - Environment configuration
+- [x] `.gitignore` - Root gitignore
+- [x] Backend: FastAPI app skeleton (`app/main.py`, `config.py`, `database.py`)
+- [x] Backend: `requirements.txt` with all Python dependencies
+- [x] Backend: Alembic migration setup (`alembic.ini`, `env.py`, initial migration)
+- [x] Backend: `start.sh` startup script
+- [x] Backend: `Dockerfile` - Python 3.12-slim
+- [x] Frontend: Vite + React scaffold (`package.json`, `vite.config.ts`, `tsconfig.json`)
+- [x] Frontend: Tailwind CSS + PostCSS configuration
+- [x] Frontend: `index.html` entry point
+- [x] Frontend: `nginx.conf` - SPA serving + API proxy
+- [x] Frontend: `Dockerfile` - Multi-stage node build + nginx serve
+- [x] Verify `docker-compose up --build` boots all services
+
+### Phase 2: Auth & Layout
+- [x] Backend: Settings model + schema
+- [x] Backend: Auth router (PIN setup, login, logout, status with bcrypt + itsdangerous)
+- [x] Frontend: `LockScreen.tsx` - PIN setup/login UI
+- [x] Frontend: `useAuth.ts` hook (TanStack Query)
+- [x] Frontend: `AppLayout.tsx` + `Sidebar.tsx` - Main layout with navigation
+- [x] Frontend: Accent color theming system (`useTheme.ts`, CSS custom properties)
+- [x] Frontend: 12 shadcn/ui components (button, card, input, dialog, select, badge, etc.)
+
+### Phase 3: Core Features
+- [x] Backend: Todo model, schema, router (CRUD + toggle + filters)
+- [x] Frontend: `TodosPage`, `TodoList`, `TodoItem`, `TodoForm`
+- [x] Backend: Calendar Event model, schema, router (CRUD + date range filter)
+- [x] Frontend: `CalendarPage` (FullCalendar integration), `EventForm`
+- [x] Frontend: FullCalendar dark theme CSS overrides in `index.css`
+- [x] Backend: Reminder model, schema, router (CRUD + dismiss)
+- [x] Frontend: `RemindersPage`, `ReminderList`, `ReminderForm`
+
+### Phase 4: Project Management
+- [x] Backend: Project model with tasks relationship + cascade delete
+- [x] Backend: ProjectTask model, schema, router (nested CRUD under projects)
+- [x] Frontend: `ProjectsPage`, `ProjectCard`, `ProjectDetail`, `ProjectForm`, `TaskForm`
+
+### Phase 5: People & Locations
+- [x] Backend: Person model, schema, router (CRUD + search)
+- [x] Frontend: `PeoplePage`, `PersonCard`, `PersonForm`
+- [x] Backend: Location model, schema, router (CRUD + category filter)
+- [x] Frontend: `LocationsPage`, `LocationCard`, `LocationForm`
+
+### Phase 6: Dashboard & Upcoming
+- [x] Backend: Dashboard aggregation endpoint (stats, events, todos, reminders)
+- [x] Backend: Upcoming endpoint (unified items sorted by date)
+- [x] Frontend: `DashboardPage` with all widgets + upcoming integration
+- [x] Frontend: `StatsWidget` (projects, people, locations counts)
+- [x] Frontend: `UpcomingWidget` (unified timeline with type icons)
+- [x] Frontend: `TodoWidget` (upcoming todos with priority badges)
+- [x] Frontend: `CalendarWidget` (today's events with color indicators)
+- [x] Frontend: Active reminders section in dashboard
+
+### Phase 7: Settings & Polish
+- [x] Backend: Settings router (get/update settings, change PIN)
+- [x] Frontend: `SettingsPage` (accent color picker, upcoming range, PIN change)
+- [x] Integration fixes: All frontend API paths match backend routes
+- [x] Integration fixes: HTTP methods (PUT for updates, PATCH for toggle/dismiss)
+- [x] Integration fixes: Type definitions match backend response schemas
+- [ ] Integration testing (end-to-end CRUD verification) <-- POST-BUILD
+- [ ] Final styling pass <-- POST-BUILD
+
+---
+
+## Integration Fixes Applied
+These were caught during review and fixed:
+
+| Issue | Fix |
+|-------|-----|
+| Settings field `upcoming_days_range` | Renamed to `upcoming_days` |
+| CalendarEvent fields `start`/`end` | Renamed to `start_datetime`/`end_datetime` |
+| Reminder field `dismissed` | Renamed to `is_dismissed`, added `is_active` |
+| Project status values | Changed from `active/on_hold` to `not_started/in_progress/completed` |
+| Calendar API path `/calendar/events` | Fixed to `/events` |
+| All update forms using `api.patch` | Fixed to `api.put` (backend uses PUT) |
+| Todo toggle using generic PATCH | Fixed to `api.patch('/todos/{id}/toggle')` |
+| Reminder dismiss using generic PATCH | Fixed to `api.patch('/reminders/{id}/dismiss')` |
+| Settings update using PATCH | Fixed to `api.put` |
+| PIN change path `/auth/change-pin` | Fixed to `/settings/pin` |
+| Dashboard data shape mismatch | Aligned TodoWidget, CalendarWidget with actual API response |
+| Missing UpcomingWidget in dashboard | Added with `/api/upcoming` fetch |
+
+## Post-Build Fixes Applied
+These were found during first Docker build and integration testing:
+
+| Issue | Fix |
+|-------|-----|
+| `Person.relationship` column shadowed SQLAlchemy's `relationship()` function | Aliased import to `sa_relationship` in `person.py` |
+| Missing `backend/app/__init__.py` | Created empty `__init__.py` for Python package recognition |
+| Backend port 8000 not exposed in `docker-compose.yaml` | Added `ports`, `healthcheck`, and `condition: service_healthy` |
+| `get_db()` redundant `session.close()` inside `async with` | Removed `finally: await session.close()` |
+| `datetime.utcnow()` deprecated in Python 3.12 | Replaced with `datetime.now(timezone.utc)` in `todos.py` |
+| Calendar date selection wiped start/end fields | Added `formatInitialDate()` to convert date-only to `datetime-local` format |
+| Dashboard "today's events" used server UTC time | Added `client_date` query param so frontend sends its local date |
+| Calendar drag-and-drop didn't persist | Added `eventDrop` handler with backend PUT call |
+| Timed event drag-and-drop sent timezone-aware datetimes to naive DB column | Used `toLocalDatetime()` helper instead of `.toISOString()` |
+| All-day event dates empty when editing (datetime vs date format mismatch) | Added `formatForInput()` to normalize values for `date` vs `datetime-local` inputs |
+| Project create/update `MissingGreenlet` error (lazy load in async context) | Re-fetch with `selectinload(Project.tasks)` after commit in `projects.py` |
+| Generic error toasts gave no useful information | Added `getErrorMessage()` helper to `api.ts`, updated all 8 form components |
+
+---
+
+## Outstanding Items (Resume Here If Halted)
+
+### Critical (blocks deployment):
+1. ~~**Docker build verification**~~ - DONE: All 3 services boot successfully
+2. ~~**npm install verification**~~ - DONE: Frontend packages install correctly
+
+### Important (blocks functionality):
+3. ~~**Alembic migration test**~~ - DONE: Tables create correctly on first boot
+4. **Auth flow test** - PIN setup -> login -> session persistence -> logout
+5. **End-to-end CRUD test** - Partially verified: Calendar (create/edit/drag/delete), Projects (create), Dashboard (today's events). Remaining: Todos, Reminders, People, Locations, Settings
+
+### Nice to have (polish):
+6. **Responsive sidebar** - Collapse behavior on mobile
+7. ~~**Toast notifications**~~ - DONE: All forms now show meaningful error messages via `getErrorMessage()`
+8. **Empty states** - Good UX for pages with no data yet
+9. **Loading skeletons** - Better loading states than plain text
+
+---
+
+## File Inventory (100+ files total)
+
+### Backend (40 files)
+```
+backend/
+├── Dockerfile
+├── requirements.txt
+├── start.sh
+├── .gitignore
+├── alembic.ini
+├── alembic/
+│   ├── env.py
+│   ├── script.py.mako
+│   └── versions/
+│       └── 001_initial_migration.py
+└── app/
+    ├── main.py
+    ├── config.py
+    ├── database.py
+    ├── models/
+    │   ├── __init__.py
+    │   ├── settings.py
+    │   ├── todo.py
+    │   ├── calendar_event.py
+    │   ├── reminder.py
+    │   ├── project.py
+    │   ├── project_task.py
+    │   ├── person.py
+    │   └── location.py
+    ├── schemas/
+    │   ├── __init__.py
+    │   ├── settings.py
+    │   ├── todo.py
+    │   ├── calendar_event.py
+    │   ├── reminder.py
+    │   ├── project.py
+    │   ├── project_task.py
+    │   ├── person.py
+    │   └── location.py
+    └── routers/
+        ├── __init__.py
+        ├── auth.py
+        ├── dashboard.py
+        ├── todos.py
+        ├── events.py
+        ├── reminders.py
+        ├── projects.py
+        ├── people.py
+        ├── locations.py
+        └── settings.py
+```
+
+### Frontend (60+ files)
+```
+frontend/
+├── Dockerfile
+├── nginx.conf
+├── package.json
+├── vite.config.ts
+├── tsconfig.json
+├── tsconfig.node.json
+├── postcss.config.js
+├── tailwind.config.ts
+├── components.json
+├── index.html
+├── .gitignore
+└── src/
+    ├── main.tsx
+    ├── App.tsx
+    ├── index.css (includes FullCalendar dark overrides)
+    ├── lib/
+    │   ├── utils.ts
+    │   └── api.ts
+    ├── hooks/
+    │   ├── useAuth.ts
+    │   ├── useSettings.ts
+    │   └── useTheme.ts
+    ├── types/
+    │   └── index.ts
+    └── components/
+        ├── ui/ (12 components)
+        ├── layout/ (AppLayout, Sidebar)
+        ├── auth/ (LockScreen)
+        ├── dashboard/ (DashboardPage, StatsWidget, UpcomingWidget, TodoWidget, CalendarWidget, ProjectsWidget)
+        ├── todos/ (TodosPage, TodoList, TodoItem, TodoForm)
+        ├── calendar/ (CalendarPage, EventForm)
+        ├── reminders/ (RemindersPage, ReminderList, ReminderForm)
+        ├── projects/ (ProjectsPage, ProjectCard, ProjectDetail, ProjectForm, TaskForm)
+        ├── people/ (PeoplePage, PersonCard, PersonForm)
+        ├── locations/ (LocationsPage, LocationCard, LocationForm)
+        └── settings/ (SettingsPage)
+```
+
+### Root
+```
+docker-compose.yaml
+.env / .env.example
+.gitignore
+progress.md
+```
+
+---
+
+## How to Resume Development
+
+If development is halted, pick up from the **Outstanding Items** section above:
+
+1. Check which items are still marked incomplete in the Milestone Tracker
+2. Address **Critical** items first (Docker build verification)
+3. Then **Important** items (auth flow, CRUD testing)
+4. Finally **Polish** items (responsive, loading states)
+
+### Quick Start Commands
+```bash
+# Build and run everything
+docker-compose up --build
+
+# Rebuild just backend after changes
+docker-compose up --build backend
+
+# Rebuild just frontend after changes
+docker-compose up --build frontend
+
+# View logs
+docker-compose logs -f
+
+# View specific service logs
+docker-compose logs -f backend
+docker-compose logs -f frontend
+
+# Reset database (destructive)
+docker-compose down -v && docker-compose up --build
+
+# Stop everything
+docker-compose down
+```
+
+### First-Time Setup
+1. Run `docker-compose up --build`
+2. Navigate to `http://localhost`
+3. You'll see the PIN setup screen (first run)
+4. Create a PIN and you'll be redirected to the dashboard
+5. Use the sidebar to navigate between features