19 changed files with 130 additions and 3807 deletions
--- a/backend/alembic/versions/003_add_preferred_name.py
+++ b/backend/alembic/versions/003_add_preferred_name.py
@ -1,26 +0,0 @@
-"""Add preferred_name to settings
-
-Revision ID: 003
-Revises: 002
-Create Date: 2026-02-20 00:00:00.000000
-
-"""
-from typing import Sequence, Union
-
-from alembic import op
-import sqlalchemy as sa
-
-
-# revision identifiers, used by Alembic.
-revision: str = '003'
-down_revision: Union[str, None] = '002'
-branch_labels: Union[str, Sequence[str], None] = None
-depends_on: Union[str, Sequence[str], None] = None
-
-
-def upgrade() -> None:
-    op.add_column('settings', sa.Column('preferred_name', sa.String(100), nullable=True))
-
-
-def downgrade() -> None:
-    op.drop_column('settings', 'preferred_name')
--- a/backend/app/models/settings.py
+++ b/backend/app/models/settings.py
@ -11,6 +11,5 @@ class Settings(Base):
    pin_hash: Mapped[str] = mapped_column(String(255), nullable=False)
    accent_color: Mapped[str] = mapped_column(String(20), default="cyan")
    upcoming_days: Mapped[int] = mapped_column(Integer, default=7)
-    preferred_name: Mapped[str | None] = mapped_column(String(100), nullable=True, default=None)
    created_at: Mapped[datetime] = mapped_column(default=func.now())
    updated_at: Mapped[datetime] = mapped_column(default=func.now(), onupdate=func.now())
--- a/backend/app/schemas/settings.py
+++ b/backend/app/schemas/settings.py
@ -25,14 +25,12 @@ class SettingsCreate(BaseModel):
 class SettingsUpdate(BaseModel):
    accent_color: Optional[AccentColor] = None
    upcoming_days: int | None = None
-    preferred_name: str | None = None


 class SettingsResponse(BaseModel):
    id: int
    accent_color: str
    upcoming_days: int
-    preferred_name: str | None = None
    created_at: datetime
    updated_at: datetime

--- a/frontend/index.html
+++ b/frontend/index.html
@ -4,9 +4,6 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>UMBRA</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" />
  </head>
  <body>
    <div id="root"></div>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/src/components/dashboard/CalendarWidget.tsx
+++ b/frontend/src/components/dashboard/CalendarWidget.tsx
@ -20,38 +20,37 @@ export default function CalendarWidget({ events }: CalendarWidgetProps) {
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
-          <div className="p-1.5 rounded-md bg-purple-500/10">
-            <Calendar className="h-4 w-4 text-purple-400" />
-          </div>
+          <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-6">
-            No events today
+          <p className="text-sm text-muted-foreground text-center py-8">
+            No events scheduled for today
          </p>
        ) : (
-          <div className="space-y-2">
+          <div className="space-y-3">
            {events.map((event) => (
              <div
                key={event.id}
-                className="flex items-start gap-3 p-3 rounded-lg border border-transparent hover:border-border/50 hover:bg-card-elevated transition-all duration-200"
+                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 shrink-0"
+                  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 text-sm">{event.title}</p>
-                  {!event.all_day ? (
-                    <div className="flex items-center gap-1 text-xs text-muted-foreground mt-1">
+                  <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')}`}
+                      {event.end_datetime && ` - ${format(new Date(event.end_datetime), 'h:mm a')}`}
                    </div>
-                  ) : (
-                    <p className="text-xs text-muted-foreground mt-1">All day</p>
+                  )}
+                  {event.all_day && (
+                    <p className="text-sm text-muted-foreground mt-1">All day</p>
                  )}
                </div>
              </div>
--- a/frontend/src/components/dashboard/DashboardPage.tsx
+++ b/frontend/src/components/dashboard/DashboardPage.tsx
@ -8,21 +8,9 @@ import StatsWidget from './StatsWidget';
 import TodoWidget from './TodoWidget';
 import CalendarWidget from './CalendarWidget';
 import UpcomingWidget from './UpcomingWidget';
-import WeekTimeline from './WeekTimeline';
-import DayBriefing from './DayBriefing';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { DashboardSkeleton } from '@/components/ui/skeleton';

-function getGreeting(name?: string): string {
-  const hour = new Date().getHours();
-  const suffix = name ? `, ${name}.` : '.';
-  if (hour < 5) return `Good night${suffix}`;
-  if (hour < 12) return `Good morning${suffix}`;
-  if (hour < 17) return `Good afternoon${suffix}`;
-  if (hour < 21) return `Good evening${suffix}`;
-  return `Good night${suffix}`;
-}
-
 export default function DashboardPage() {
  const { settings } = useSettings();

@ -48,13 +36,11 @@ export default function DashboardPage() {
  if (isLoading) {
    return (
      <div className="flex flex-col h-full">
-        <div className="px-6 py-6">
-          <div className="animate-pulse space-y-2">
-            <div className="h-8 w-48 rounded bg-muted" />
-            <div className="h-4 w-32 rounded bg-muted" />
-          </div>
+        <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 px-6 pb-6">
+        <div className="flex-1 overflow-y-auto p-6">
          <DashboardSkeleton />
        </div>
      </div>
@ -71,87 +57,46 @@ export default function DashboardPage() {

  return (
    <div className="flex flex-col h-full">
-      {/* Header — greeting + date */}
-      <div className="px-6 pt-6 pb-2">
-        <h1 className="font-heading text-3xl font-bold tracking-tight animate-fade-in">
-          {getGreeting(settings?.preferred_name || undefined)}
-        </h1>
-        <p className="text-muted-foreground text-sm mt-1">
-          {format(new Date(), 'EEEE, MMMM d, yyyy')}
-        </p>
+      <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 px-6 pb-6">
-        <div className="space-y-5">
-          {/* Week Timeline */}
-          {upcomingData && (
-            <div className="animate-slide-up">
-              <WeekTimeline items={upcomingData.items} />
-            </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} />
          )}

-          {/* Smart Briefing */}
-          {upcomingData && (
-            <DayBriefing upcomingItems={upcomingData.items} dashboardData={data} />
-          )}
-
-          {/* Stats Row */}
-          <div className="animate-slide-up" style={{ animationDelay: '50ms', animationFillMode: 'backwards' }}>
-            <StatsWidget
-              projectStats={data.project_stats}
-              totalPeople={data.total_people}
-              totalLocations={data.total_locations}
-            />
+          <div className="grid gap-6 lg:grid-cols-2">
+            <TodoWidget todos={data.upcoming_todos} />
+            <CalendarWidget events={data.todays_events} />
          </div>

-          {/* Main Content — 2 columns */}
-          <div className="grid gap-5 lg:grid-cols-5 animate-slide-up" style={{ animationDelay: '100ms', animationFillMode: 'backwards' }}>
-            {/* Left: Upcoming feed (wider) */}
-            <div className="lg:col-span-3">
-              {upcomingData && upcomingData.items.length > 0 ? (
-                <UpcomingWidget items={upcomingData.items} days={upcomingData.days} />
-              ) : (
-                <Card className="h-full">
-                  <CardHeader>
-                    <CardTitle>Upcoming</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <p className="text-sm text-muted-foreground text-center py-8">
-                      Nothing upcoming. Enjoy the quiet.
-                    </p>
-                  </CardContent>
-                </Card>
-              )}
-            </div>
-
-            {/* Right: Today's events + todos stacked */}
-            <div className="lg:col-span-2 space-y-5">
-              <CalendarWidget events={data.todays_events} />
-              <TodoWidget todos={data.upcoming_todos} />
-            </div>
-          </div>
-
-          {/* Active Reminders */}
          {data.active_reminders.length > 0 && (
-            <Card className="animate-slide-up" style={{ animationDelay: '150ms', animationFillMode: 'backwards' }}>
+            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
-                  <div className="p-1.5 rounded-md bg-orange-500/10">
-                    <Bell className="h-4 w-4 text-orange-400" />
-                  </div>
+                  <Bell className="h-5 w-5" />
                  Active Reminders
                </CardTitle>
              </CardHeader>
              <CardContent>
-                <div className="space-y-2">
+                <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 border-transparent hover:border-border/50 hover:bg-card-elevated transition-all duration-200"
+                      className="flex items-center gap-3 p-3 rounded-lg border bg-card hover:bg-accent/5 transition-colors"
                    >
-                      <div className="w-1 h-8 rounded-full bg-orange-400" />
+                      <Bell className="h-4 w-4 text-accent" />
                      <div className="flex-1">
-                        <p className="font-medium text-sm">{reminder.title}</p>
+                        <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>
--- a/frontend/src/components/dashboard/DayBriefing.tsx
+++ b/frontend/src/components/dashboard/DayBriefing.tsx
@ -1,131 +0,0 @@
-import { useMemo } from 'react';
-import { format, isSameDay, startOfDay, addDays, isAfter } from 'date-fns';
-import type { UpcomingItem, DashboardData } from '@/types';
-
-interface DayBriefingProps {
-  upcomingItems: UpcomingItem[];
-  dashboardData: DashboardData;
-}
-
-function getItemTime(item: UpcomingItem): string {
-  if (item.datetime) {
-    return format(new Date(item.datetime), 'h:mm a');
-  }
-  return '';
-}
-
-export default function DayBriefing({ upcomingItems, dashboardData }: DayBriefingProps) {
-  const briefing = useMemo(() => {
-    const now = new Date();
-    const hour = now.getHours();
-    const today = startOfDay(now);
-    const tomorrow = addDays(today, 1);
-
-    const todayItems = upcomingItems.filter((item) => {
-      const d = item.datetime ? new Date(item.datetime) : new Date(item.date);
-      return isSameDay(startOfDay(d), today);
-    });
-
-    const tomorrowItems = upcomingItems.filter((item) => {
-      const d = item.datetime ? new Date(item.datetime) : new Date(item.date);
-      return isSameDay(startOfDay(d), tomorrow);
-    });
-
-    const todayEvents = dashboardData.todays_events;
-    const activeReminders = dashboardData.active_reminders;
-    const todayTodos = dashboardData.upcoming_todos.filter((t) => {
-      if (!t.due_date) return false;
-      return isSameDay(startOfDay(new Date(t.due_date)), today);
-    });
-
-    const parts: string[] = [];
-
-    // Night (9PM–5AM): Focus on tomorrow
-    if (hour >= 21 || hour < 5) {
-      if (tomorrowItems.length === 0) {
-        parts.push('Tomorrow is clear — nothing scheduled.');
-      } else {
-        const firstEvent = tomorrowItems.find((i) => i.type === 'event' && i.datetime);
-        if (firstEvent) {
-          parts.push(
-            `You have ${tomorrowItems.length} item${tomorrowItems.length > 1 ? 's' : ''} tomorrow, starting with ${firstEvent.title} at ${getItemTime(firstEvent)}.`
-          );
-        } else {
-          parts.push(
-            `You have ${tomorrowItems.length} item${tomorrowItems.length > 1 ? 's' : ''} lined up for tomorrow.`
-          );
-        }
-      }
-    }
-    // Morning (5AM–12PM)
-    else if (hour < 12) {
-      if (todayItems.length === 0) {
-        parts.push('Your day is wide open — no events or tasks scheduled.');
-      } else {
-        const eventCount = todayEvents.length;
-        const todoCount = todayTodos.length;
-        const segments: string[] = [];
-        if (eventCount > 0) segments.push(`${eventCount} event${eventCount > 1 ? 's' : ''}`);
-        if (todoCount > 0) segments.push(`${todoCount} task${todoCount > 1 ? 's' : ''} due`);
-        if (segments.length > 0) {
-          parts.push(`Today: ${segments.join(' and ')}.`);
-        }
-        const firstEvent = todayEvents.find((e) => {
-          const d = new Date(e.start_datetime);
-          return isAfter(d, now);
-        });
-        if (firstEvent) {
-          parts.push(`Up next is ${firstEvent.title} at ${format(new Date(firstEvent.start_datetime), 'h:mm a')}.`);
-        }
-      }
-    }
-    // Afternoon (12PM–5PM)
-    else if (hour < 17) {
-      const remainingEvents = todayEvents.filter((e) => isAfter(new Date(e.end_datetime), now));
-      const completedTodos = todayTodos.length === 0;
-      if (remainingEvents.length === 0 && completedTodos) {
-        parts.push('The rest of your afternoon is clear.');
-      } else {
-        if (remainingEvents.length > 0) {
-          parts.push(
-            `${remainingEvents.length} event${remainingEvents.length > 1 ? 's' : ''} remaining this afternoon.`
-          );
-        }
-        if (todayTodos.length > 0) {
-          parts.push(`${todayTodos.length} task${todayTodos.length > 1 ? 's' : ''} still due today.`);
-        }
-      }
-    }
-    // Evening (5PM–9PM)
-    else {
-      const eveningEvents = todayEvents.filter((e) => isAfter(new Date(e.end_datetime), now));
-      if (eveningEvents.length === 0 && tomorrowItems.length === 0) {
-        parts.push('Nothing left tonight, and tomorrow is clear too.');
-      } else {
-        if (eveningEvents.length > 0) {
-          parts.push(`${eveningEvents.length} event${eveningEvents.length > 1 ? 's' : ''} left this evening.`);
-        }
-        if (tomorrowItems.length > 0) {
-          parts.push(`Tomorrow has ${tomorrowItems.length} item${tomorrowItems.length > 1 ? 's' : ''} ahead.`);
-        }
-      }
-    }
-
-    // Reminder callout
-    if (activeReminders.length > 0) {
-      const nextReminder = activeReminders[0];
-      const remindTime = format(new Date(nextReminder.remind_at), 'h:mm a');
-      parts.push(`Don't forget: ${nextReminder.title} at ${remindTime}.`);
-    }
-
-    return parts.join(' ');
-  }, [upcomingItems, dashboardData]);
-
-  if (!briefing) return null;
-
-  return (
-    <p className="text-sm text-muted-foreground italic px-1">
-      {briefing}
-    </p>
-  );
-}
--- a/frontend/src/components/dashboard/StatsWidget.tsx
+++ b/frontend/src/components/dashboard/StatsWidget.tsx
@ -1,4 +1,4 @@
-import { FolderKanban, Users, MapPin, TrendingUp } from 'lucide-react';
+import { FolderKanban, Users, MapPin } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';

 interface StatsWidgetProps {
@ -13,52 +13,42 @@ interface StatsWidgetProps {
 export default function StatsWidget({ projectStats, totalPeople, totalLocations }: StatsWidgetProps) {
  const statCards = [
    {
-      label: 'PROJECTS',
+      label: 'Total Projects',
      value: projectStats.total,
      icon: FolderKanban,
-      color: 'text-blue-400',
-      glowBg: 'bg-blue-500/10',
+      color: 'text-blue-500',
    },
    {
-      label: 'IN PROGRESS',
+      label: 'In Progress',
      value: projectStats.by_status['in_progress'] || 0,
-      icon: TrendingUp,
-      color: 'text-purple-400',
-      glowBg: 'bg-purple-500/10',
+      icon: FolderKanban,
+      color: 'text-purple-500',
    },
    {
-      label: 'PEOPLE',
+      label: 'People',
      value: totalPeople,
      icon: Users,
-      color: 'text-emerald-400',
-      glowBg: 'bg-emerald-500/10',
+      color: 'text-green-500',
    },
    {
-      label: 'LOCATIONS',
+      label: 'Locations',
      value: totalLocations,
      icon: MapPin,
-      color: 'text-orange-400',
-      glowBg: 'bg-orange-500/10',
+      color: 'text-orange-500',
    },
  ];

  return (
-    <div className="grid gap-3 grid-cols-2 lg:grid-cols-4">
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      {statCards.map((stat) => (
-        <Card key={stat.label} className="bg-gradient-to-br from-accent/[0.03] to-transparent">
-          <CardContent className="p-4">
-            <div className="flex items-start justify-between">
-              <div className="space-y-2">
-                <p className="text-[11px] font-medium tracking-wider text-muted-foreground">
-                  {stat.label}
-                </p>
-                <p className="font-heading text-3xl font-bold tabular-nums leading-none">
-                  {stat.value}
-                </p>
-              </div>
-              <div className={`p-2 rounded-lg ${stat.glowBg}`}>
-                <stat.icon className={`h-5 w-5 ${stat.color}`} />
+        <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>
--- a/frontend/src/components/dashboard/TodoWidget.tsx
+++ b/frontend/src/components/dashboard/TodoWidget.tsx
@ -1,4 +1,4 @@
-import { format, isPast, endOfDay } from 'date-fns';
+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';
@ -17,9 +17,9 @@ interface TodoWidgetProps {
 }

 const priorityColors: Record<string, string> = {
-  low: 'bg-green-500/10 text-green-400 border-green-500/20',
-  medium: 'bg-yellow-500/10 text-yellow-400 border-yellow-500/20',
-  high: 'bg-red-500/10 text-red-400 border-red-500/20',
+  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) {
@ -27,45 +27,41 @@ export default function TodoWidget({ todos }: TodoWidgetProps) {
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
-          <div className="p-1.5 rounded-md bg-blue-500/10">
-            <CheckCircle2 className="h-4 w-4 text-blue-400" />
-          </div>
+          <CheckCircle2 className="h-5 w-5" />
          Upcoming Todos
        </CardTitle>
      </CardHeader>
      <CardContent>
        {todos.length === 0 ? (
-          <p className="text-sm text-muted-foreground text-center py-6">
-            All caught up.
+          <p className="text-sm text-muted-foreground text-center py-8">
+            No upcoming todos. You're all caught up!
          </p>
        ) : (
-          <div className="space-y-2">
+          <div className="space-y-3">
            {todos.slice(0, 5).map((todo) => {
-              const isOverdue = isPast(endOfDay(new Date(todo.due_date)));
+              const isOverdue = isPast(new Date(todo.due_date));
              return (
                <div
                  key={todo.id}
-                  className="flex items-center gap-3 p-3 rounded-lg border border-transparent hover:border-border/50 hover:bg-card-elevated transition-all duration-200"
+                  className="flex items-center gap-3 p-3 rounded-lg border bg-card hover:bg-accent/5 transition-colors"
                >
-                  <div className={cn(
-                    'w-1 h-8 rounded-full shrink-0',
-                    todo.priority === 'high' ? 'bg-red-400' :
-                    todo.priority === 'medium' ? 'bg-yellow-400' : 'bg-green-400'
-                  )} />
                  <div className="flex-1 min-w-0">
-                    <p className="font-medium text-sm truncate">{todo.title}</p>
+                    <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')}
-                        {isOverdue && <span className="font-medium">overdue</span>}
+                        {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={cn('text-[10px] shrink-0', priorityColors[todo.priority] || priorityColors.medium)}>
+                  <Badge className={priorityColors[todo.priority] || priorityColors.medium}>
                    {todo.priority}
                  </Badge>
                </div>
--- a/frontend/src/components/dashboard/UpcomingWidget.tsx
+++ b/frontend/src/components/dashboard/UpcomingWidget.tsx
@ -1,98 +1,72 @@
 import { format } from 'date-fns';
-import { CheckSquare, Calendar, Bell, ArrowRight } from 'lucide-react';
+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';
-import { cn } from '@/lib/utils';

 interface UpcomingWidgetProps {
  items: UpcomingItem[];
  days?: number;
 }

-const typeConfig: Record<string, { icon: typeof CheckSquare; color: string; borderColor: string; label: string }> = {
-  todo: {
-    icon: CheckSquare,
-    color: 'text-blue-400',
-    borderColor: 'border-l-blue-400',
-    label: 'Todo',
-  },
-  event: {
-    icon: Calendar,
-    color: 'text-purple-400',
-    borderColor: 'border-l-purple-400',
-    label: 'Event',
-  },
-  reminder: {
-    icon: Bell,
-    color: 'text-orange-400',
-    borderColor: 'border-l-orange-400',
-    label: 'Reminder',
-  },
+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 className="h-full">
+    <Card>
      <CardHeader>
-        <div className="flex items-center justify-between">
-          <CardTitle className="flex items-center gap-2">
-            <div className="p-1.5 rounded-md bg-accent/10">
-              <ArrowRight className="h-4 w-4 text-accent" />
-            </div>
-            Upcoming
-          </CardTitle>
-          <span className="text-xs text-muted-foreground">{days} days</span>
-        </div>
+        <CardTitle>Upcoming ({days} days)</CardTitle>
      </CardHeader>
      <CardContent>
        {items.length === 0 ? (
          <p className="text-sm text-muted-foreground text-center py-8">
-            Nothing upcoming
+            No upcoming items in the next few days
          </p>
        ) : (
-          <ScrollArea className="max-h-[400px] -mr-2 pr-2">
-            <div className="space-y-1.5">
-              {items.map((item, index) => {
-                const config = typeConfig[item.type] || typeConfig.todo;
-                const Icon = config.icon;
-                return (
-                  <div
-                    key={`${item.type}-${item.id}-${index}`}
-                    className={cn(
-                      'flex items-start gap-3 p-3 rounded-lg',
-                      'border-l-2 border border-transparent',
-                      config.borderColor,
-                      'hover:bg-card-elevated transition-all duration-200'
-                    )}
-                  >
-                    <Icon className={cn('h-4 w-4 mt-0.5 shrink-0', config.color)} />
-                    <div className="flex-1 min-w-0">
-                      <p className="font-medium text-sm">{item.title}</p>
-                      <div className="flex items-center gap-2 mt-1">
-                        <span className="text-xs text-muted-foreground">
-                          {item.datetime
-                            ? format(new Date(item.datetime), 'MMM d · h:mm a')
-                            : format(new Date(item.date), 'MMM d')}
-                        </span>
-                        <span className={cn('text-[10px] font-medium uppercase tracking-wider', config.color)}>
-                          {config.label}
-                        </span>
-                      </div>
-                    </div>
+          <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 && (
-                      <span className={cn(
-                        'text-[10px] font-medium px-1.5 py-0.5 rounded',
-                        item.priority === 'high' ? 'bg-red-500/10 text-red-400' :
-                        item.priority === 'medium' ? 'bg-yellow-500/10 text-yellow-400' :
-                        'bg-green-500/10 text-green-400'
-                      )}>
-                        {item.priority}
-                      </span>
+                      <Badge className={priorityColors[item.priority]}>{item.priority}</Badge>
                    )}
                  </div>
-                );
-              })}
+                </div>
+              ))}
            </div>
          </ScrollArea>
        )}
--- a/frontend/src/components/dashboard/WeekTimeline.tsx
+++ b/frontend/src/components/dashboard/WeekTimeline.tsx
@ -1,90 +0,0 @@
-import { useMemo } from 'react';
-import { format, startOfWeek, addDays, isSameDay, isBefore, startOfDay } from 'date-fns';
-import type { UpcomingItem } from '@/types';
-import { cn } from '@/lib/utils';
-
-interface WeekTimelineProps {
-  items: UpcomingItem[];
-}
-
-const typeColors: Record<string, string> = {
-  todo: 'bg-blue-400',
-  event: 'bg-purple-400',
-  reminder: 'bg-orange-400',
-};
-
-export default function WeekTimeline({ items }: WeekTimelineProps) {
-  const today = useMemo(() => startOfDay(new Date()), []);
-  const weekStart = useMemo(() => startOfWeek(today, { weekStartsOn: 1 }), [today]);
-
-  const days = useMemo(() => {
-    return Array.from({ length: 7 }, (_, i) => {
-      const date = addDays(weekStart, i);
-      const dayItems = items.filter((item) => {
-        const itemDate = item.datetime ? new Date(item.datetime) : new Date(item.date);
-        return isSameDay(startOfDay(itemDate), date);
-      });
-      return {
-        date,
-        key: format(date, 'yyyy-MM-dd'),
-        dayName: format(date, 'EEE'),
-        dayNum: format(date, 'd'),
-        isToday: isSameDay(date, today),
-        isPast: isBefore(date, today),
-        items: dayItems,
-      };
-    });
-  }, [weekStart, today, items]);
-
-  return (
-    <div className="flex items-stretch gap-2">
-      {days.map((day) => (
-        <div
-          key={day.key}
-          className={cn(
-            'flex-1 flex flex-col items-center gap-1.5 rounded-lg py-3 px-2 transition-all duration-200 border',
-            day.isToday
-              ? 'bg-accent/10 border-accent/30 shadow-[0_0_12px_hsl(var(--accent-color)/0.15)]'
-              : day.isPast
-                ? 'border-transparent opacity-50'
-                : 'border-transparent hover:border-border/50'
-          )}
-        >
-          <span
-            className={cn(
-              'text-[11px] font-medium uppercase tracking-wider',
-              day.isToday ? 'text-accent' : 'text-muted-foreground'
-            )}
-          >
-            {day.dayName}
-          </span>
-          <span
-            className={cn(
-              'font-heading text-lg font-semibold leading-none',
-              day.isToday ? 'text-accent' : 'text-foreground'
-            )}
-          >
-            {day.dayNum}
-          </span>
-          <div className="flex items-center gap-1 mt-0.5 min-h-[8px]">
-            {day.items.slice(0, 4).map((item) => (
-              <div
-                key={`${item.type}-${item.id}`}
-                className={cn(
-                  'w-1.5 h-1.5 rounded-full',
-                  !item.color && (typeColors[item.type] || 'bg-muted-foreground')
-                )}
-                style={item.color ? { backgroundColor: item.color } : undefined}
-              />
-            ))}
-            {day.items.length > 4 && (
-              <span className="text-[9px] text-muted-foreground font-medium">
-                +{day.items.length - 4}
-              </span>
-            )}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@ -45,16 +45,16 @@ export default function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose

  const navLinkClass = ({ isActive }: { isActive: boolean }) =>
    cn(
-      'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200',
+      'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
      isActive
-        ? 'bg-accent/15 text-accent border-l-2 border-accent'
-        : 'text-muted-foreground hover:bg-accent/10 hover:text-accent border-l-2 border-transparent'
+        ? '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="font-heading text-xl font-bold tracking-tight text-accent">UMBRA</h1>}
+        {!collapsed && <h1 className="text-xl font-bold text-accent">UMBRA</h1>}
        <Button
          variant="ghost"
          size="icon"
@ -120,7 +120,7 @@ export default function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose
      {/* Mobile overlay */}
      {mobileOpen && (
        <div className="fixed inset-0 z-40 md:hidden">
-          <div className="absolute inset-0 bg-background/80 backdrop-blur-sm" onClick={onMobileClose} />
+          <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>
--- a/frontend/src/components/settings/SettingsPage.tsx
+++ b/frontend/src/components/settings/SettingsPage.tsx
@ -20,24 +20,12 @@ 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 [preferredName, setPreferredName] = useState(settings?.preferred_name || '');
  const [pinForm, setPinForm] = useState({
    oldPin: '',
    newPin: '',
    confirmPin: '',
  });

-  const handleNameSave = async () => {
-    const trimmed = preferredName.trim();
-    if (trimmed === (settings?.preferred_name || '')) return;
-    try {
-      await updateSettings({ preferred_name: trimmed || null });
-      toast.success('Name updated');
-    } catch (error) {
-      toast.error('Failed to update name');
-    }
-  };
-
  const handleColorChange = async (color: string) => {
    setSelectedColor(color);
    try {
@ -85,34 +73,6 @@ export default function SettingsPage() {

      <div className="flex-1 overflow-y-auto p-6">
        <div className="max-w-2xl space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Profile</CardTitle>
-              <CardDescription>Personalize how UMBRA greets you</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-2">
-                <Label htmlFor="preferred_name">Preferred Name</Label>
-                <div className="flex gap-3 items-center">
-                  <Input
-                    id="preferred_name"
-                    type="text"
-                    placeholder="Enter your name"
-                    value={preferredName}
-                    onChange={(e) => setPreferredName(e.target.value)}
-                    onBlur={handleNameSave}
-                    onKeyDown={(e) => { if (e.key === 'Enter') handleNameSave(); }}
-                    className="max-w-xs"
-                    maxLength={100}
-                  />
-                </div>
-                <p className="text-sm text-muted-foreground">
-                  Used in the dashboard greeting, e.g. "Good morning, {preferredName || 'Kyle'}."
-                </p>
-              </div>
-            </CardContent>
-          </Card>
-
          <Card>
            <CardHeader>
              <CardTitle>Appearance</CardTitle>
--- a/frontend/src/components/ui/card.tsx
+++ b/frontend/src/components/ui/card.tsx
@ -5,12 +5,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
-      className={cn(
-        'rounded-lg border bg-card text-card-foreground shadow-sm',
-        'transition-all duration-200',
-        'hover:shadow-lg hover:shadow-accent/5 hover:border-accent/20',
-        className
-      )}
+      className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
      {...props}
    />
  )
@ -19,7 +14,7 @@ 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-5', className)} {...props} />
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
  )
 );
 CardHeader.displayName = 'CardHeader';
@ -28,7 +23,7 @@ const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HT
  ({ className, ...props }, ref) => (
    <h3
      ref={ref}
-      className={cn('font-heading text-lg font-semibold leading-none tracking-tight', className)}
+      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
      {...props}
    />
  )
@ -45,14 +40,14 @@ CardDescription.displayName = 'CardDescription';

 const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('p-5 pt-0', className)} {...props} />
+    <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-5 pt-0', className)} {...props} />
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
  )
 );
 CardFooter.displayName = 'CardFooter';
--- a/frontend/src/hooks/useSettings.ts
+++ b/frontend/src/hooks/useSettings.ts
@ -14,7 +14,7 @@ export function useSettings() {
  });

  const updateMutation = useMutation({
-    mutationFn: async (updates: Partial<Settings> & { preferred_name?: string | null }) => {
+    mutationFn: async (updates: Partial<Settings>) => {
      const { data } = await api.put<Settings>('/settings', updates);
      return data;
    },
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@ -8,7 +8,6 @@
    --foreground: 0 0% 98%;
    --card: 0 0% 5%;
    --card-foreground: 0 0% 98%;
-    --card-elevated: 0 0% 7%;
    --popover: 0 0% 5%;
    --popover-foreground: 0 0% 98%;
    --primary: var(--accent-h) var(--accent-s) var(--accent-l);
@ -30,14 +29,6 @@
    --accent-h: 187;
    --accent-s: 85.7%;
    --accent-l: 53.3%;
-
-    /* Transitions */
-    --transition-fast: 150ms;
-    --transition-normal: 250ms;
-
-    /* Fonts */
-    --font-heading: 'Sora', sans-serif;
-    --font-body: 'DM Sans', sans-serif;
  }
 }

@ -47,38 +38,8 @@
  }
  body {
    @apply bg-background text-foreground;
-    font-family: var(--font-body);
    font-feature-settings: "rlig" 1, "calt" 1;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
  }
-  h1, h2, h3, h4, h5, h6 {
-    font-family: var(--font-heading);
-  }
-}
-
-/* Custom Scrollbar */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: hsl(0 0% 20%) transparent;
-}
-
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: hsl(0 0% 20%);
-  border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: hsl(var(--accent-color) / 0.5);
 }

 /* FullCalendar Dark Theme Overrides */
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@ -2,7 +2,6 @@ export interface Settings {
  id: number;
  accent_color: string;
  upcoming_days: number;
-  preferred_name?: string;
  created_at: string;
  updated_at: string;
 }
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@ -8,10 +8,6 @@ export default {
  ],
  theme: {
    extend: {
-      fontFamily: {
-        heading: ['Sora', 'sans-serif'],
-        body: ['DM Sans', 'sans-serif'],
-      },
      colors: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
@ -45,7 +41,6 @@ export default {
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
-          elevated: 'hsl(var(--card-elevated))',
        },
      },
      borderRadius: {
@ -53,20 +48,6 @@ export default {
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
-      keyframes: {
-        'fade-in': {
-          '0%': { opacity: '0' },
-          '100%': { opacity: '1' },
-        },
-        'slide-up': {
-          '0%': { opacity: '0', transform: 'translateY(8px)' },
-          '100%': { opacity: '1', transform: 'translateY(0)' },
-        },
-      },
-      animation: {
-        'fade-in': 'fade-in 0.3s ease-out',
-        'slide-up': 'slide-up 0.4s ease-out',
-      },
    },
  },
  plugins: [],