diff --git a/app/(tabs)/explore.tsx b/app/(tabs)/explore.tsx
index 7c26189..101d3a3 100644
--- a/app/(tabs)/explore.tsx
+++ b/app/(tabs)/explore.tsx
@@ -15,7 +15,7 @@ export default function SettingsScreen() {
   return (
     <ScrollView style={[styles.container, { backgroundColor: colors.bg }]}>
       <View style={styles.header}>
-        <Text style={[styles.headerTitle, { color: colors.text }]}>Settings</Text>
+        <Text style={[styles.headerTitle, { color: colors.textPrimary }]}>Settings</Text>
         <Text style={[styles.headerSubtitle, { color: colors.textSecondary }]}>
           Manage your preferences
         </Text>
@@ -27,7 +27,7 @@ export default function SettingsScreen() {
 
         <View style={[styles.card, { backgroundColor: colors.card }]}>
           <View style={styles.accountInfo}>
-            <View style={[styles.avatar, { backgroundColor: colors.accent }]}>
+            <View style={[styles.avatar, { backgroundColor: colors.primary }]}>
               <Text style={styles.avatarText}>
                 {user?.name
                   ?.split(' ')
@@ -36,11 +36,11 @@ export default function SettingsScreen() {
               </Text>
             </View>
             <View style={styles.accountDetails}>
-              <Text style={[styles.accountName, { color: colors.text }]}>{user?.name}</Text>
+              <Text style={[styles.accountName, { color: colors.textPrimary }]}>{user?.name}</Text>
               <Text style={[styles.accountEmail, { color: colors.textSecondary }]}>
                 {user?.email}
               </Text>
-              <Text style={[styles.accountRole, { color: colors.accent }]}>{user?.role}</Text>
+              <Text style={[styles.accountRole, { color: colors.primary }]}>{user?.role}</Text>
             </View>
           </View>
         </View>
@@ -53,8 +53,8 @@ export default function SettingsScreen() {
         <View style={[styles.card, { backgroundColor: colors.card }]}>
           <View style={styles.settingRow}>
             <View style={styles.settingInfo}>
-              <IconSymbol name="moon.fill" size={20} color={colors.text} />
-              <Text style={[styles.settingLabel, { color: colors.text }]}>Dark Mode</Text>
+              <IconSymbol name="moon.fill" size={20} color={colors.textPrimary} />
+              <Text style={[styles.settingLabel, { color: colors.textPrimary }]}>Dark Mode</Text>
             </View>
             <Text style={[styles.settingValue, { color: colors.textSecondary }]}>
               {themeMode === 'system' ? 'Auto' : themeMode === 'dark' ? 'On' : 'Off'}
@@ -65,45 +65,45 @@ export default function SettingsScreen() {
             <TouchableOpacity
               style={[
                 styles.themeOption,
-                themeMode === 'light' && { backgroundColor: colors.accent + '20' },
+                themeMode === 'light' && { backgroundColor: colors.primary + '20' },
               ]}
               onPress={() => handleThemeChange('light')}
               activeOpacity={0.7}
             >
-              <IconSymbol name="sun.max.fill" size={24} color={colors.text} />
-              <Text style={[styles.themeOptionText, { color: colors.text }]}>Light</Text>
+              <IconSymbol name="sun.max.fill" size={24} color={colors.textPrimary} />
+              <Text style={[styles.themeOptionText, { color: colors.textPrimary }]}>Light</Text>
               {themeMode === 'light' && (
-                <View style={[styles.activeIndicator, { backgroundColor: colors.accent }]} />
+                <View style={[styles.activeIndicator, { backgroundColor: colors.primary }]} />
               )}
             </TouchableOpacity>
 
             <TouchableOpacity
               style={[
                 styles.themeOption,
-                themeMode === 'dark' && { backgroundColor: colors.accent + '20' },
+                themeMode === 'dark' && { backgroundColor: colors.primary + '20' },
               ]}
               onPress={() => handleThemeChange('dark')}
               activeOpacity={0.7}
             >
-              <IconSymbol name="moon.fill" size={24} color={colors.text} />
-              <Text style={[styles.themeOptionText, { color: colors.text }]}>Dark</Text>
+              <IconSymbol name="moon.fill" size={24} color={colors.textPrimary} />
+              <Text style={[styles.themeOptionText, { color: colors.textPrimary }]}>Dark</Text>
               {themeMode === 'dark' && (
-                <View style={[styles.activeIndicator, { backgroundColor: colors.accent }]} />
+                <View style={[styles.activeIndicator, { backgroundColor: colors.primary }]} />
               )}
             </TouchableOpacity>
 
             <TouchableOpacity
               style={[
                 styles.themeOption,
-                themeMode === 'system' && { backgroundColor: colors.accent + '20' },
+                themeMode === 'system' && { backgroundColor: colors.primary + '20' },
               ]}
               onPress={() => handleThemeChange('system')}
               activeOpacity={0.7}
             >
-              <IconSymbol name="sparkles" size={24} color={colors.text} />
-              <Text style={[styles.themeOptionText, { color: colors.text }]}>Auto</Text>
+              <IconSymbol name="sparkles" size={24} color={colors.textPrimary} />
+              <Text style={[styles.themeOptionText, { color: colors.textPrimary }]}>Auto</Text>
               {themeMode === 'system' && (
-                <View style={[styles.activeIndicator, { backgroundColor: colors.accent }]} />
+                <View style={[styles.activeIndicator, { backgroundColor: colors.primary }]} />
               )}
             </TouchableOpacity>
           </View>
@@ -117,13 +117,15 @@ export default function SettingsScreen() {
         <View style={[styles.card, { backgroundColor: colors.card }]}>
           <View style={styles.settingRow}>
             <View style={styles.settingInfo}>
-              <Text style={[styles.settingLabel, { color: colors.text }]}>Blocking Alerts</Text>
+              <Text style={[styles.settingLabel, { color: colors.textPrimary }]}>
+                Blocking Alerts
+              </Text>
             </View>
             <Switch
               value={user?.preferences.notifications.blockingAlerts}
-              trackColor={{ false: colors.border, true: colors.accent + '60' }}
+              trackColor={{ false: colors.border, true: colors.primary + '60' }}
               thumbColor={
-                user?.preferences.notifications.blockingAlerts ? colors.accent : colors.card
+                user?.preferences.notifications.blockingAlerts ? colors.primary : colors.card
               }
               ios_backgroundColor={colors.border}
             />
@@ -131,13 +133,15 @@ export default function SettingsScreen() {
 
           <View style={[styles.settingRow, { borderTopColor: colors.border }]}>
             <View style={styles.settingInfo}>
-              <Text style={[styles.settingLabel, { color: colors.text }]}>Review Requests</Text>
+              <Text style={[styles.settingLabel, { color: colors.textPrimary }]}>
+                Review Requests
+              </Text>
             </View>
             <Switch
               value={user?.preferences.notifications.reviewRequests}
-              trackColor={{ false: colors.border, true: colors.accent + '60' }}
+              trackColor={{ false: colors.border, true: colors.primary + '60' }}
               thumbColor={
-                user?.preferences.notifications.reviewRequests ? colors.accent : colors.card
+                user?.preferences.notifications.reviewRequests ? colors.primary : colors.card
               }
               ios_backgroundColor={colors.border}
             />
@@ -145,13 +149,15 @@ export default function SettingsScreen() {
 
           <View style={[styles.settingRow, { borderTopColor: colors.border }]}>
             <View style={styles.settingInfo}>
-              <Text style={[styles.settingLabel, { color: colors.text }]}>Session Updates</Text>
+              <Text style={[styles.settingLabel, { color: colors.textPrimary }]}>
+                Session Updates
+              </Text>
             </View>
             <Switch
               value={user?.preferences.notifications.sessionUpdates}
-              trackColor={{ false: colors.border, true: colors.accent + '60' }}
+              trackColor={{ false: colors.border, true: colors.primary + '60' }}
               thumbColor={
-                user?.preferences.notifications.sessionUpdates ? colors.accent : colors.card
+                user?.preferences.notifications.sessionUpdates ? colors.primary : colors.card
               }
               ios_backgroundColor={colors.border}
             />
@@ -159,13 +165,15 @@ export default function SettingsScreen() {
 
           <View style={[styles.settingRow, { borderTopColor: colors.border }]}>
             <View style={styles.settingInfo}>
-              <Text style={[styles.settingLabel, { color: colors.text }]}>Features & News</Text>
+              <Text style={[styles.settingLabel, { color: colors.textPrimary }]}>
+                Features & News
+              </Text>
             </View>
             <Switch
               value={user?.preferences.notifications.featuresAndNews}
-              trackColor={{ false: colors.border, true: colors.accent + '60' }}
+              trackColor={{ false: colors.border, true: colors.primary + '60' }}
               thumbColor={
-                user?.preferences.notifications.featuresAndNews ? colors.accent : colors.card
+                user?.preferences.notifications.featuresAndNews ? colors.primary : colors.card
               }
               ios_backgroundColor={colors.border}
             />
@@ -178,11 +186,11 @@ export default function SettingsScreen() {
         <Text style={[styles.sectionTitle, { color: colors.textSecondary }]}>ACCOUNT</Text>
 
         <TouchableOpacity
-          style={[styles.card, styles.dangerButton, { backgroundColor: colors.error + '10' }]}
+          style={[styles.card, styles.dangerButton, { backgroundColor: colors.danger + '10' }]}
           onPress={logout}
           activeOpacity={0.7}
         >
-          <Text style={[styles.dangerButtonText, { color: colors.error }]}>Sign Out</Text>
+          <Text style={[styles.dangerButtonText, { color: colors.danger }]}>Sign Out</Text>
         </TouchableOpacity>
       </View>
 
diff --git a/app/(tabs)/inbox.tsx b/app/(tabs)/inbox.tsx
index 180506d..ef80a80 100644
--- a/app/(tabs)/inbox.tsx
+++ b/app/(tabs)/inbox.tsx
@@ -31,7 +31,7 @@ export default function InboxScreen() {
     <ScrollView
       style={[styles.container, { backgroundColor: colors.bg }]}
       refreshControl={
-        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={colors.accent} />
+        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={colors.primary} />
       }
       showsVerticalScrollIndicator={false}
     >
diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
index 764bb49..38a8e6c 100644
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -16,7 +16,6 @@ import { useOffline } from '@/hooks/useOffline'
 import { useRealtimeSession } from '@/hooks/useRealtimeSession'
 import { useNotifications } from '@/hooks/useNotifications'
 import { Header } from '@/components/layout/Header'
-import { FAB } from '@/components/layout/FAB'
 import { SessionCard } from '@/components/session/SessionCard'
 import { ErrorMessage } from '@/components/ui/ErrorMessage'
 import { OfflineBanner } from '@/components/ui/OfflineBanner'
@@ -49,7 +48,7 @@ const QuickActionButton = memo<QuickActionButtonProps>(
       <TouchableOpacity
         style={[
           styles.quickActionButton,
-          { backgroundColor: action.disabled ? colors.card : colors.accent },
+          { backgroundColor: action.disabled ? colors.card : colors.primary },
         ]}
         onPress={action.onPress}
         activeOpacity={0.8}
@@ -159,10 +158,6 @@ export default function DashboardScreen() {
         count: unreadCount > 0 ? unreadCount : undefined,
         onPress: () => router.push('/notifications'),
       },
-      { id: 'lucky', icon: 'dice.fill', text: "I'm Feeling Lucky" },
-      { id: 'inspire', icon: 'lightbulb.fill', text: 'Inspire Me' },
-      { id: 'invent', icon: 'sparkles', text: 'Go Invent' },
-      { id: 'add', icon: 'plus.circle.fill', text: 'Add Action', disabled: true, badge: 'Soon' },
     ],
     [runningSessions.length, unreadCount, router]
   )
@@ -170,7 +165,7 @@ export default function DashboardScreen() {
   if (authLoading) {
     return (
       <View style={[styles.container, { backgroundColor: colors.bg }]}>
-        <Text style={[styles.loadingText, { color: colors.text }]}>Loading...</Text>
+        <Text style={[styles.loadingText, { color: colors.textPrimary }]}>Loading...</Text>
       </View>
     )
   }
@@ -201,7 +196,7 @@ export default function DashboardScreen() {
           <View
             style={[
               styles.connectionBanner,
-              { backgroundColor: isError ? colors.error + '20' : colors.warning + '20' },
+              { backgroundColor: isError ? colors.danger + '20' : colors.warning + '20' },
             ]}
           >
             <View style={styles.connectionContent}>
@@ -209,12 +204,12 @@ export default function DashboardScreen() {
                 style={[
                   styles.connectionDot,
                   {
-                    backgroundColor: isError ? colors.error : colors.warning,
+                    backgroundColor: isError ? colors.danger : colors.warning,
                   },
                 ]}
               />
               <Text
-                style={[styles.connectionText, { color: isError ? colors.error : colors.warning }]}
+                style={[styles.connectionText, { color: isError ? colors.danger : colors.warning }]}
               >
                 {isError ? 'Real-time updates unavailable' : 'Connecting to updates...'}
               </Text>
@@ -227,7 +222,7 @@ export default function DashboardScreen() {
                 accessibilityLabel="Retry connection"
                 accessibilityHint="Double tap to retry real-time connection"
               >
-                <Text style={[styles.retryText, { color: colors.error }]}>Retry</Text>
+                <Text style={[styles.retryText, { color: colors.danger }]}>Retry</Text>
               </TouchableOpacity>
             )}
           </View>
@@ -235,7 +230,7 @@ export default function DashboardScreen() {
 
         {/* Quick Actions - 2 rows of 3 */}
         <View style={styles.section}>
-          <Text style={[styles.sectionTitle, { color: colors.text }]}>Quick Actions</Text>
+          <Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>Quick Actions</Text>
           <View style={styles.quickActionsGrid}>
             {quickActions.map((action) => (
               <View key={action.id} style={styles.quickActionWrapper}>
@@ -249,7 +244,7 @@ export default function DashboardScreen() {
         {awaitingReview.length > 0 && (
           <View style={styles.section}>
             <View style={styles.sectionHeader}>
-              <Text style={[styles.sectionTitle, { color: colors.text }]}>My Reviews</Text>
+              <Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>My Reviews</Text>
               <View
                 style={[
                   styles.badge,
@@ -278,7 +273,9 @@ export default function DashboardScreen() {
         {/* Active Sessions */}
         <View style={styles.section}>
           <View style={styles.sectionHeader}>
-            <Text style={[styles.sectionTitle, { color: colors.text }]}>Active Sessions</Text>
+            <Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>
+              Active Sessions
+            </Text>
             {runningSessions.length > 0 && (
               <TouchableOpacity
                 onPress={handleViewAllSessions}
@@ -286,7 +283,7 @@ export default function DashboardScreen() {
                 accessibilityLabel="View all sessions"
                 accessibilityHint="Double tap to view all active sessions"
               >
-                <Text style={[styles.viewAllText, { color: colors.accent }]}>View All</Text>
+                <Text style={[styles.viewAllText, { color: colors.primary }]}>View All</Text>
               </TouchableOpacity>
             )}
           </View>
@@ -319,9 +316,6 @@ export default function DashboardScreen() {
 
         <View style={{ height: 40 }} />
       </ScrollView>
-
-      {/* Floating Action Button */}
-      <FAB />
     </View>
   )
 }
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 262f338..d8748ab 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -84,7 +84,7 @@ function RootLayoutNav() {
           headerStyle: {
             backgroundColor: colors.bg,
           },
-          headerTintColor: colors.text,
+          headerTintColor: colors.textPrimary,
           headerShadowVisible: false,
           headerBackTitle: '',
           contentStyle: {
diff --git a/app/announcements/index.tsx b/app/announcements/index.tsx
index 0134186..3f0af43 100644
--- a/app/announcements/index.tsx
+++ b/app/announcements/index.tsx
@@ -90,7 +90,7 @@ export default function AnnouncementsScreen() {
             styles.announcementCard,
             {
               backgroundColor: colors.card,
-              borderColor: unread ? colors.accent : colors.border,
+              borderColor: unread ? colors.primary : colors.border,
             },
           ]}
           onPress={() => handleAnnouncementPress(item)}
@@ -98,11 +98,13 @@ export default function AnnouncementsScreen() {
         >
           <View style={styles.cardHeader}>
             <View style={styles.titleRow}>
-              <Text style={[styles.title, { color: colors.text }, unread && styles.titleUnread]}>
+              <Text
+                style={[styles.title, { color: colors.textPrimary }, unread && styles.titleUnread]}
+              >
                 {item.title}
               </Text>
               {unread && (
-                <View style={[styles.newBadge, { backgroundColor: colors.accent }]}>
+                <View style={[styles.newBadge, { backgroundColor: colors.primary }]}>
                   <Text style={styles.newBadgeText}>NEW</Text>
                 </View>
               )}
@@ -124,7 +126,7 @@ export default function AnnouncementsScreen() {
   if (isLoading) {
     return (
       <View style={[styles.container, styles.centered, { backgroundColor: colors.bg }]}>
-        <ActivityIndicator size="large" color={colors.accent} />
+        <ActivityIndicator size="large" color={colors.primary} />
       </View>
     )
   }
@@ -133,8 +135,8 @@ export default function AnnouncementsScreen() {
     <View style={[styles.container, { backgroundColor: colors.bg }]}>
       {/* Header */}
       <View style={styles.header}>
-        <IconSymbol name="gift.fill" size={28} color={colors.accent} />
-        <Text style={[styles.headerTitle, { color: colors.text }]}>Announcements</Text>
+        <IconSymbol name="gift.fill" size={28} color={colors.primary} />
+        <Text style={[styles.headerTitle, { color: colors.textPrimary }]}>Announcements</Text>
       </View>
 
       {/* Announcements List */}
@@ -146,7 +148,7 @@ export default function AnnouncementsScreen() {
         ListEmptyComponent={
           <View style={[styles.emptyState, { backgroundColor: colors.card }]}>
             <IconSymbol name="gift" size={48} color={colors.textSecondary} />
-            <Text style={[styles.emptyStateText, { color: colors.text }]}>
+            <Text style={[styles.emptyStateText, { color: colors.textPrimary }]}>
               No announcements yet
             </Text>
             <Text style={[styles.emptyStateSubtext, { color: colors.textSecondary }]}>
diff --git a/app/chat.tsx b/app/chat.tsx
index 68916c9..68fcd03 100644
--- a/app/chat.tsx
+++ b/app/chat.tsx
@@ -78,13 +78,15 @@ export default function ChatModal() {
         {/* Loading state */}
         {isLoading ? (
           <View style={styles.centerContent}>
-            <ActivityIndicator size="large" color={colors.accent} />
+            <ActivityIndicator size="large" color={colors.primary} />
           </View>
         ) : messages.length === 0 ? (
           /* Empty state */
           <View style={styles.centerContent}>
             <IconSymbol name="message.fill" size={56} color={colors.textSecondary} />
-            <Text style={[styles.emptyText, { color: colors.text }]}>Ask Claude anything</Text>
+            <Text style={[styles.emptyText, { color: colors.textPrimary }]}>
+              Ask Claude anything
+            </Text>
             <Text style={[styles.emptySubtext, { color: colors.textSecondary }]}>
               Your conversation will be saved locally
             </Text>
diff --git a/app/decisions/[id].tsx b/app/decisions/[id].tsx
index 69c82e1..7916ac6 100644
--- a/app/decisions/[id].tsx
+++ b/app/decisions/[id].tsx
@@ -26,7 +26,7 @@ export default function ReviewDecisionScreen() {
   if (!decision?.details) {
     return (
       <View style={[styles.error, { backgroundColor: colors.bg }]}>
-        <Text style={{ color: colors.text }}>Decision not found</Text>
+        <Text style={{ color: colors.textPrimary }}>Decision not found</Text>
       </View>
     )
   }
@@ -79,7 +79,7 @@ export default function ReviewDecisionScreen() {
             <View
               style={[
                 styles.stepCircle,
-                { backgroundColor: currentStep >= step ? colors.accent : colors.card },
+                { backgroundColor: currentStep >= step ? colors.primary : colors.card },
               ]}
             >
               <Text
@@ -95,7 +95,7 @@ export default function ReviewDecisionScreen() {
               <View
                 style={[
                   styles.stepLine,
-                  { backgroundColor: currentStep > step ? colors.accent : colors.card },
+                  { backgroundColor: currentStep > step ? colors.primary : colors.card },
                 ]}
               />
             )}
@@ -106,20 +106,26 @@ export default function ReviewDecisionScreen() {
       {/* Step 1: Summary */}
       {currentStep === 1 && (
         <View style={styles.stepContent}>
-          <Text style={[styles.sectionTitle, { color: colors.text }]}>Question</Text>
-          <Text style={[styles.sectionText, { color: colors.text }]}>{details.question}</Text>
+          <Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>Question</Text>
+          <Text style={[styles.sectionText, { color: colors.textPrimary }]}>
+            {details.question}
+          </Text>
 
-          <Text style={[styles.sectionTitle, { color: colors.text }]}>Context</Text>
-          <Text style={[styles.sectionText, { color: colors.text }]}>{details.context}</Text>
+          <Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>Context</Text>
+          <Text style={[styles.sectionText, { color: colors.textPrimary }]}>{details.context}</Text>
 
-          <Text style={[styles.sectionTitle, { color: colors.text }]}>Analysis</Text>
-          <Text style={[styles.sectionText, { color: colors.text }]}>{details.analysis}</Text>
+          <Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>Analysis</Text>
+          <Text style={[styles.sectionText, { color: colors.textPrimary }]}>
+            {details.analysis}
+          </Text>
 
-          <Text style={[styles.sectionTitle, { color: colors.text }]}>Recommendation</Text>
-          <Text style={[styles.sectionText, { color: colors.text }]}>{details.recommendation}</Text>
+          <Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>Recommendation</Text>
+          <Text style={[styles.sectionText, { color: colors.textPrimary }]}>
+            {details.recommendation}
+          </Text>
 
           <TouchableOpacity
-            style={[styles.button, { backgroundColor: colors.accent }]}
+            style={[styles.button, { backgroundColor: colors.primary }]}
             onPress={() => setCurrentStep(2)}
           >
             <Text style={styles.buttonText}>Next →</Text>
@@ -130,7 +136,7 @@ export default function ReviewDecisionScreen() {
       {/* Step 2: Key Sections */}
       {currentStep === 2 && (
         <View style={styles.stepContent}>
-          <Text style={[styles.title, { color: colors.text }]}>Key Sections</Text>
+          <Text style={[styles.title, { color: colors.textPrimary }]}>Key Sections</Text>
 
           {details.sections.map((section) => (
             <View key={section.id} style={[styles.accordionItem, { backgroundColor: colors.card }]}>
@@ -138,11 +144,11 @@ export default function ReviewDecisionScreen() {
                 style={styles.accordionHeader}
                 onPress={() => handleExpandSection(section.id)}
               >
-                <Text style={[styles.accordionTitle, { color: colors.text }]}>
+                <Text style={[styles.accordionTitle, { color: colors.textPrimary }]}>
                   {viewedSections.has(section.id) ? '✓ ' : ''}
                   {section.title}
                 </Text>
-                <Text style={{ color: colors.text }}>
+                <Text style={{ color: colors.textPrimary }}>
                   {expandedSections.has(section.id) ? '▼' : '▶'}
                 </Text>
               </TouchableOpacity>
@@ -163,7 +169,7 @@ export default function ReviewDecisionScreen() {
           <TouchableOpacity
             style={[
               styles.button,
-              { backgroundColor: allSectionsViewed ? colors.accent : colors.card },
+              { backgroundColor: allSectionsViewed ? colors.primary : colors.card },
             ]}
             onPress={() => allSectionsViewed && setCurrentStep(3)}
             disabled={!allSectionsViewed}
@@ -183,7 +189,7 @@ export default function ReviewDecisionScreen() {
       {/* Step 3: Comment + Complete */}
       {currentStep === 3 && (
         <View style={styles.stepContent}>
-          <Text style={[styles.title, { color: colors.text }]}>Your Feedback</Text>
+          <Text style={[styles.title, { color: colors.textPrimary }]}>Your Feedback</Text>
 
           <View style={styles.quickChips}>
             {['Looks good', 'Needs discussion', 'Try different approach'].map((chip) => (
@@ -192,8 +198,8 @@ export default function ReviewDecisionScreen() {
                 style={[
                   styles.chip,
                   {
-                    backgroundColor: quickResponse === chip ? colors.accent : colors.card,
-                    borderColor: colors.accent,
+                    backgroundColor: quickResponse === chip ? colors.primary : colors.card,
+                    borderColor: colors.primary,
                   },
                 ]}
                 onPress={() => handleQuickResponse(chip)}
@@ -201,7 +207,7 @@ export default function ReviewDecisionScreen() {
                 <Text
                   style={[
                     styles.chipText,
-                    { color: quickResponse === chip ? '#FFF' : colors.text },
+                    { color: quickResponse === chip ? '#FFF' : colors.textPrimary },
                   ]}
                 >
                   {chip}
@@ -213,7 +219,7 @@ export default function ReviewDecisionScreen() {
           <TextInput
             style={[
               styles.textInput,
-              { backgroundColor: colors.card, color: colors.text, borderColor: colors.card },
+              { backgroundColor: colors.card, color: colors.textPrimary, borderColor: colors.card },
             ]}
             placeholder="Add your comment..."
             placeholderTextColor={colors.textSecondary}
@@ -224,7 +230,7 @@ export default function ReviewDecisionScreen() {
           />
 
           <TouchableOpacity
-            style={[styles.button, { backgroundColor: colors.accent }]}
+            style={[styles.button, { backgroundColor: colors.primary }]}
             onPress={handleComplete}
           >
             <Text style={styles.buttonText}>Complete Review</Text>
diff --git a/app/decisions/index.tsx b/app/decisions/index.tsx
index 3aed153..411ada3 100644
--- a/app/decisions/index.tsx
+++ b/app/decisions/index.tsx
@@ -29,7 +29,7 @@ export default function DecisionQueueScreen() {
       style={[styles.container, { backgroundColor: colors.bg }]}
       contentContainerStyle={styles.content}
       refreshControl={
-        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={colors.accent} />
+        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={colors.primary} />
       }
     />
   )
diff --git a/app/login.tsx b/app/login.tsx
index c9a98f8..db370f2 100644
--- a/app/login.tsx
+++ b/app/login.tsx
@@ -64,7 +64,7 @@ export default function LoginScreen() {
   if (isLoading) {
     return (
       <View style={[styles.container, { backgroundColor: colors.bg }]}>
-        <ActivityIndicator size="large" color={colors.accent} />
+        <ActivityIndicator size="large" color={colors.primary} />
         <Text style={[styles.loadingText, { color: colors.textSecondary }]}>
           Checking authentication...
         </Text>
@@ -76,10 +76,10 @@ export default function LoginScreen() {
     <View style={[styles.container, { backgroundColor: colors.bg }]}>
       {/* Logo Section */}
       <View style={styles.logoContainer}>
-        <View style={[styles.logoCircle, { backgroundColor: colors.accent + '20' }]}>
-          <IconSymbol name="terminal.fill" size={60} color={colors.accent} />
+        <View style={[styles.logoCircle, { backgroundColor: colors.primary + '20' }]}>
+          <IconSymbol name="terminal.fill" size={60} color={colors.primary} />
         </View>
-        <Text style={[styles.title, { color: colors.text }]}>ACP Mobile</Text>
+        <Text style={[styles.title, { color: colors.textPrimary }]}>ACP Mobile</Text>
         <Text style={[styles.subtitle, { color: colors.textSecondary }]}>
           Ambient Code Platform
         </Text>
@@ -95,7 +95,7 @@ export default function LoginScreen() {
         <TouchableOpacity
           style={[
             styles.loginButton,
-            { backgroundColor: colors.accent },
+            { backgroundColor: colors.primary },
             isLoggingIn && styles.loginButtonDisabled,
           ]}
           onPress={handleLogin}
diff --git a/app/notifications/history.tsx b/app/notifications/history.tsx
index c6c57cb..1c8643e 100644
--- a/app/notifications/history.tsx
+++ b/app/notifications/history.tsx
@@ -59,7 +59,7 @@ export default function NotificationHistoryScreen() {
             <View key={notif.id} style={[styles.item, { backgroundColor: colors.card }]}>
               <AgentAvatar agentName={notif.agentName} size="small" />
               <View style={styles.content}>
-                <Text style={[styles.title, { color: colors.text }]} numberOfLines={2}>
+                <Text style={[styles.title, { color: colors.textPrimary }]} numberOfLines={2}>
                   {notif.title}
                 </Text>
                 <Text style={[styles.time, { color: colors.textSecondary }]}>
@@ -73,7 +73,7 @@ export default function NotificationHistoryScreen() {
                 <NotificationStatusBadge status={notif.status} />
                 {notif.status === 'dismissed' && (
                   <TouchableOpacity
-                    style={[styles.restoreButton, { backgroundColor: colors.accent }]}
+                    style={[styles.restoreButton, { backgroundColor: colors.primary }]}
                     onPress={() => handleRestore(notif.id)}
                   >
                     <Text style={styles.restoreText}>Restore</Text>
diff --git a/app/notifications/index.tsx b/app/notifications/index.tsx
index bf0c8f7..45b6dc3 100644
--- a/app/notifications/index.tsx
+++ b/app/notifications/index.tsx
@@ -90,7 +90,7 @@ export default function NotificationsScreen() {
 
       {/* Header with Mark All Read button */}
       <View style={styles.header}>
-        <Text style={[styles.headerTitle, { color: colors.text }]}>Notifications</Text>
+        <Text style={[styles.headerTitle, { color: colors.textPrimary }]}>Notifications</Text>
         {unreadCount > 0 && (
           <TouchableOpacity
             style={[styles.markAllButton, { backgroundColor: colors.card }]}
@@ -100,8 +100,8 @@ export default function NotificationsScreen() {
             accessibilityLabel="Mark all notifications as read"
             accessibilityHint={`Mark all ${unreadCount} unread notification${unreadCount === 1 ? '' : 's'} as read`}
           >
-            <Feather name="check-circle" size={16} color={colors.accent} />
-            <Text style={[styles.markAllText, { color: colors.accent }]}>Mark all read</Text>
+            <Feather name="check-circle" size={16} color={colors.primary} />
+            <Text style={[styles.markAllText, { color: colors.primary }]}>Mark all read</Text>
           </TouchableOpacity>
         )}
       </View>
@@ -121,8 +121,8 @@ export default function NotificationsScreen() {
               style={[
                 styles.filterChip,
                 {
-                  backgroundColor: isActive ? colors.accent : colors.card,
-                  borderColor: isActive ? colors.accent : colors.border,
+                  backgroundColor: isActive ? colors.primary : colors.card,
+                  borderColor: isActive ? colors.primary : colors.border,
                 },
               ]}
               onPress={() => setFilter(f.value)}
@@ -132,14 +132,14 @@ export default function NotificationsScreen() {
               accessibilityState={{ selected: isActive }}
               accessibilityHint={`Double tap to show ${f.label.toLowerCase()} notifications`}
             >
-              <Text style={[styles.filterText, { color: isActive ? '#fff' : colors.text }]}>
+              <Text style={[styles.filterText, { color: isActive ? '#fff' : colors.textPrimary }]}>
                 {f.label}
               </Text>
               {f.badge !== undefined && f.badge > 0 && (
                 <View
-                  style={[styles.badge, { backgroundColor: isActive ? '#fff' : colors.accent }]}
+                  style={[styles.badge, { backgroundColor: isActive ? '#fff' : colors.primary }]}
                 >
-                  <Text style={[styles.badgeText, { color: isActive ? colors.accent : '#fff' }]}>
+                  <Text style={[styles.badgeText, { color: isActive ? colors.primary : '#fff' }]}>
                     {f.badge > 99 ? '99+' : f.badge}
                   </Text>
                 </View>
@@ -164,8 +164,8 @@ export default function NotificationsScreen() {
               style={[
                 styles.filterChip,
                 {
-                  backgroundColor: isActive ? colors.accent : colors.card,
-                  borderColor: isActive ? colors.accent : colors.border,
+                  backgroundColor: isActive ? colors.primary : colors.card,
+                  borderColor: isActive ? colors.primary : colors.border,
                 },
               ]}
               onPress={() => setSourceFilter(f.value)}
@@ -177,9 +177,9 @@ export default function NotificationsScreen() {
               <Feather
                 name={f.icon as keyof typeof Feather.glyphMap}
                 size={14}
-                color={isActive ? '#fff' : colors.text}
+                color={isActive ? '#fff' : colors.textPrimary}
               />
-              <Text style={[styles.filterText, { color: isActive ? '#fff' : colors.text }]}>
+              <Text style={[styles.filterText, { color: isActive ? '#fff' : colors.textPrimary }]}>
                 {f.label}
               </Text>
             </TouchableOpacity>
@@ -206,7 +206,9 @@ export default function NotificationsScreen() {
           ) : (
             <View style={[styles.emptyState, { backgroundColor: colors.card }]}>
               <Feather name="bell-off" size={48} color={colors.textSecondary} />
-              <Text style={[styles.emptyStateText, { color: colors.text }]}>No notifications</Text>
+              <Text style={[styles.emptyStateText, { color: colors.textPrimary }]}>
+                No notifications
+              </Text>
               <Text style={[styles.emptyStateSubtext, { color: colors.textSecondary }]}>
                 {filter === 'unread'
                   ? 'All caught up! No unread notifications.'
diff --git a/app/rfe/create.tsx b/app/rfe/create.tsx
index 147928b..d137753 100644
--- a/app/rfe/create.tsx
+++ b/app/rfe/create.tsx
@@ -98,20 +98,24 @@ export default function CreateRFEScreen() {
           accessibilityRole="button"
           accessibilityLabel="Go back"
         >
-          <Feather name="arrow-left" size={24} color={colors.text} />
+          <Feather name="arrow-left" size={24} color={colors.textPrimary} />
         </TouchableOpacity>
-        <Text style={[styles.headerTitle, { color: colors.text }]}>Create RFE</Text>
+        <Text style={[styles.headerTitle, { color: colors.textPrimary }]}>Create RFE</Text>
         <View style={{ width: 24 }} />
       </View>
 
       <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
         {/* Title Input */}
         <View style={styles.section}>
-          <Text style={[styles.label, { color: colors.text }]}>Title</Text>
+          <Text style={[styles.label, { color: colors.textPrimary }]}>Title</Text>
           <TextInput
             style={[
               styles.input,
-              { backgroundColor: colors.card, borderColor: colors.border, color: colors.text },
+              {
+                backgroundColor: colors.card,
+                borderColor: colors.border,
+                color: colors.textPrimary,
+              },
             ]}
             value={title}
             onChangeText={setTitle}
@@ -122,11 +126,15 @@ export default function CreateRFEScreen() {
 
         {/* Description Input */}
         <View style={styles.section}>
-          <Text style={[styles.label, { color: colors.text }]}>Description</Text>
+          <Text style={[styles.label, { color: colors.textPrimary }]}>Description</Text>
           <TextInput
             style={[
               styles.textArea,
-              { backgroundColor: colors.card, borderColor: colors.border, color: colors.text },
+              {
+                backgroundColor: colors.card,
+                borderColor: colors.border,
+                color: colors.textPrimary,
+              },
             ]}
             value={description}
             onChangeText={setDescription}
@@ -140,7 +148,7 @@ export default function CreateRFEScreen() {
 
         {/* Sources Section */}
         <View style={styles.section}>
-          <Text style={[styles.label, { color: colors.text }]}>Sources & Context</Text>
+          <Text style={[styles.label, { color: colors.textPrimary }]}>Sources & Context</Text>
           <Text style={[styles.helperText, { color: colors.textSecondary }]}>
             Add Google Docs, URLs, or Jira tickets as context for your RFE
           </Text>
@@ -153,7 +161,7 @@ export default function CreateRFEScreen() {
                 style={[
                   styles.typeButton,
                   {
-                    backgroundColor: newSourceType === type ? colors.accent : colors.card,
+                    backgroundColor: newSourceType === type ? colors.primary : colors.card,
                     borderColor: colors.border,
                   },
                 ]}
@@ -164,12 +172,12 @@ export default function CreateRFEScreen() {
                 <Feather
                   name={SOURCE_ICONS[type]}
                   size={16}
-                  color={newSourceType === type ? '#fff' : colors.text}
+                  color={newSourceType === type ? '#fff' : colors.textPrimary}
                 />
                 <Text
                   style={[
                     styles.typeButtonText,
-                    { color: newSourceType === type ? '#fff' : colors.text },
+                    { color: newSourceType === type ? '#fff' : colors.textPrimary },
                   ]}
                 >
                   {type.toUpperCase()}
@@ -183,7 +191,11 @@ export default function CreateRFEScreen() {
             <TextInput
               style={[
                 styles.sourceInput,
-                { backgroundColor: colors.card, borderColor: colors.border, color: colors.text },
+                {
+                  backgroundColor: colors.card,
+                  borderColor: colors.border,
+                  color: colors.textPrimary,
+                },
               ]}
               value={newSourceValue}
               onChangeText={setNewSourceValue}
@@ -193,7 +205,7 @@ export default function CreateRFEScreen() {
               autoCorrect={false}
             />
             <TouchableOpacity
-              style={[styles.addButton, { backgroundColor: colors.accent }]}
+              style={[styles.addButton, { backgroundColor: colors.primary }]}
               onPress={addSource}
               accessibilityRole="button"
               accessibilityLabel="Add source"
@@ -213,12 +225,15 @@ export default function CreateRFEScreen() {
                     { backgroundColor: colors.card, borderColor: colors.border },
                   ]}
                 >
-                  <Feather name={SOURCE_ICONS[source.type]} size={16} color={colors.accent} />
+                  <Feather name={SOURCE_ICONS[source.type]} size={16} color={colors.primary} />
                   <View style={styles.sourceContent}>
                     <Text style={[styles.sourceType, { color: colors.textSecondary }]}>
                       {source.type.toUpperCase()}
                     </Text>
-                    <Text style={[styles.sourceValue, { color: colors.text }]} numberOfLines={2}>
+                    <Text
+                      style={[styles.sourceValue, { color: colors.textPrimary }]}
+                      numberOfLines={2}
+                    >
                       {source.value}
                     </Text>
                   </View>
@@ -228,7 +243,7 @@ export default function CreateRFEScreen() {
                     accessibilityRole="button"
                     accessibilityLabel="Remove source"
                   >
-                    <Feather name="x" size={18} color={colors.error} />
+                    <Feather name="x" size={18} color={colors.danger} />
                   </TouchableOpacity>
                 </View>
               ))}
@@ -237,9 +252,9 @@ export default function CreateRFEScreen() {
         </View>
 
         {/* Batch Mode Info */}
-        <View style={[styles.infoBanner, { backgroundColor: colors.accent + '20' }]}>
-          <Feather name="info" size={20} color={colors.accent} />
-          <Text style={[styles.infoText, { color: colors.text }]}>
+        <View style={[styles.infoBanner, { backgroundColor: colors.primary + '20' }]}>
+          <Feather name="info" size={20} color={colors.primary} />
+          <Text style={[styles.infoText, { color: colors.textPrimary }]}>
             This RFE will be created in batch mode. Attach your Google Doc design document to the
             session for processing.
           </Text>
@@ -249,7 +264,7 @@ export default function CreateRFEScreen() {
         <TouchableOpacity
           style={[
             styles.submitButton,
-            { backgroundColor: colors.accent, opacity: !title.trim() ? 0.5 : 1 },
+            { backgroundColor: colors.primary, opacity: !title.trim() ? 0.5 : 1 },
           ]}
           onPress={handleSubmit}
           disabled={!title.trim()}
diff --git a/app/sessions/[id]/index.tsx b/app/sessions/[id]/index.tsx
index 5e42888..e7258e4 100644
--- a/app/sessions/[id]/index.tsx
+++ b/app/sessions/[id]/index.tsx
@@ -25,7 +25,7 @@ export default function SessionDetailScreen() {
   if (isLoading) {
     return (
       <View style={[styles.container, styles.centered, { backgroundColor: colors.bg }]}>
-        <ActivityIndicator size="large" color={colors.accent} />
+        <ActivityIndicator size="large" color={colors.primary} />
         <Text style={[styles.loadingText, { color: colors.textSecondary }]}>
           Loading session...
         </Text>
@@ -36,7 +36,7 @@ export default function SessionDetailScreen() {
   if (error || !session) {
     return (
       <View style={[styles.container, styles.centered, { backgroundColor: colors.bg }]}>
-        <Text style={[styles.errorText, { color: colors.error }]}>
+        <Text style={[styles.errorText, { color: colors.danger }]}>
           Failed to load session details
         </Text>
       </View>
@@ -58,12 +58,12 @@ export default function SessionDetailScreen() {
     >
       {/* Header with Current Task */}
       <View style={[styles.card, { backgroundColor: colors.card }]}>
-        <Text style={[styles.sessionName, { color: colors.text }]}>{session.name}</Text>
+        <Text style={[styles.sessionName, { color: colors.textPrimary }]}>{session.name}</Text>
 
         <View style={styles.metaRow}>
           <StatusBadge status={session.status} />
-          <View style={[styles.modelBadge, { backgroundColor: colors.accent + '20' }]}>
-            <Text style={[styles.modelText, { color: colors.accent }]}>
+          <View style={[styles.modelBadge, { backgroundColor: colors.primary + '20' }]}>
+            <Text style={[styles.modelText, { color: colors.primary }]}>
               {getSimpleModelName(session.model)}
             </Text>
           </View>
@@ -74,7 +74,7 @@ export default function SessionDetailScreen() {
             <Text style={[styles.currentTaskLabel, { color: colors.textSecondary }]}>
               Currently working on:
             </Text>
-            <Text style={[styles.currentTaskText, { color: colors.text }]}>
+            <Text style={[styles.currentTaskText, { color: colors.textPrimary }]}>
               {session.currentTask}
             </Text>
           </View>
@@ -83,7 +83,7 @@ export default function SessionDetailScreen() {
         <View style={styles.progressSection}>
           <View style={styles.progressHeader}>
             <Text style={[styles.progressLabel, { color: colors.textSecondary }]}>Progress</Text>
-            <Text style={[styles.progressValue, { color: colors.accent }]}>
+            <Text style={[styles.progressValue, { color: colors.primary }]}>
               {session.progress}%
             </Text>
           </View>
@@ -96,11 +96,11 @@ export default function SessionDetailScreen() {
         <View
           style={[
             styles.card,
-            { backgroundColor: colors.error + '10', borderColor: colors.error, borderWidth: 1 },
+            { backgroundColor: colors.danger + '10', borderColor: colors.danger, borderWidth: 1 },
           ]}
         >
-          <Text style={[styles.cardTitle, { color: colors.error }]}>Error</Text>
-          <Text style={[styles.errorMessageText, { color: colors.error }]}>
+          <Text style={[styles.cardTitle, { color: colors.danger }]}>Error</Text>
+          <Text style={[styles.errorMessageText, { color: colors.danger }]}>
             {session.errorMessage}
           </Text>
         </View>
@@ -119,12 +119,12 @@ export default function SessionDetailScreen() {
             },
           ]}
         >
-          <Text style={[styles.cardTitle, { color: colors.text }]}>Review Required</Text>
+          <Text style={[styles.cardTitle, { color: colors.textPrimary }]}>Review Required</Text>
           <Text style={[styles.reviewPrompt, { color: colors.textSecondary }]}>
             This session has completed and is ready for your review.
           </Text>
           <TouchableOpacity
-            style={[styles.startReviewButton, { backgroundColor: colors.accent }]}
+            style={[styles.startReviewButton, { backgroundColor: colors.primary }]}
             onPress={() => router.push(`/sessions/${session.id}/review`)}
             activeOpacity={0.8}
           >
@@ -141,7 +141,7 @@ export default function SessionDetailScreen() {
             onPress={() => setTasksExpanded(!tasksExpanded)}
             activeOpacity={0.7}
           >
-            <Text style={[styles.cardTitle, { color: colors.text, marginBottom: 0 }]}>
+            <Text style={[styles.cardTitle, { color: colors.textPrimary, marginBottom: 0 }]}>
               Tasks Completed ({session.tasksCompleted.length})
             </Text>
             <Text style={[styles.accordionIcon, { color: colors.textSecondary }]}>
@@ -169,7 +169,9 @@ export default function SessionDetailScreen() {
           onPress={() => setDetailsExpanded(!detailsExpanded)}
           activeOpacity={0.7}
         >
-          <Text style={[styles.cardTitle, { color: colors.text, marginBottom: 0 }]}>Details</Text>
+          <Text style={[styles.cardTitle, { color: colors.textPrimary, marginBottom: 0 }]}>
+            Details
+          </Text>
           <Text style={[styles.accordionIcon, { color: colors.textSecondary }]}>
             {detailsExpanded ? '▼' : '▶'}
           </Text>
@@ -181,31 +183,31 @@ export default function SessionDetailScreen() {
               <Text style={[styles.metadataLabel, { color: colors.textSecondary }]}>
                 Repository:
               </Text>
-              <Text style={[styles.metadataValue, { color: colors.accent }]}>
+              <Text style={[styles.metadataValue, { color: colors.primary }]}>
                 {session.repository.name}
               </Text>
             </View>
             <View style={styles.metadataRow}>
               <Text style={[styles.metadataLabel, { color: colors.textSecondary }]}>Branch:</Text>
-              <Text style={[styles.metadataValue, { color: colors.text }]}>
+              <Text style={[styles.metadataValue, { color: colors.textPrimary }]}>
                 {session.repository.branch}
               </Text>
             </View>
             <View style={styles.metadataRow}>
               <Text style={[styles.metadataLabel, { color: colors.textSecondary }]}>Workflow:</Text>
-              <Text style={[styles.metadataValue, { color: colors.text }]}>
+              <Text style={[styles.metadataValue, { color: colors.textPrimary }]}>
                 {session.workflowType}
               </Text>
             </View>
             <View style={styles.metadataRow}>
               <Text style={[styles.metadataLabel, { color: colors.textSecondary }]}>Created:</Text>
-              <Text style={[styles.metadataValue, { color: colors.text }]}>
+              <Text style={[styles.metadataValue, { color: colors.textPrimary }]}>
                 {session.createdAt.toLocaleDateString()} at {session.createdAt.toLocaleTimeString()}
               </Text>
             </View>
             <View style={styles.metadataRow}>
               <Text style={[styles.metadataLabel, { color: colors.textSecondary }]}>Updated:</Text>
-              <Text style={[styles.metadataValue, { color: colors.text }]}>
+              <Text style={[styles.metadataValue, { color: colors.textPrimary }]}>
                 {session.updatedAt.toLocaleDateString()} at {session.updatedAt.toLocaleTimeString()}
               </Text>
             </View>
diff --git a/app/sessions/[id]/review.tsx b/app/sessions/[id]/review.tsx
index 85d2a3d..6575b17 100644
--- a/app/sessions/[id]/review.tsx
+++ b/app/sessions/[id]/review.tsx
@@ -106,7 +106,7 @@ export default function SessionReviewScreen() {
   if (isLoading || !session) {
     return (
       <View style={[styles.container, styles.centered, { backgroundColor: colors.bg }]}>
-        <ActivityIndicator size="large" color={colors.accent} />
+        <ActivityIndicator size="large" color={colors.primary} />
       </View>
     )
   }
@@ -116,7 +116,7 @@ export default function SessionReviewScreen() {
       <View style={styles.content}>
         {/* Session Info */}
         <View style={[styles.card, { backgroundColor: colors.card }]}>
-          <Text style={[styles.sessionName, { color: colors.text }]}>{session.name}</Text>
+          <Text style={[styles.sessionName, { color: colors.textPrimary }]}>{session.name}</Text>
           <Text style={[styles.subtitle, { color: colors.textSecondary }]}>
             Review the changes and provide feedback
           </Text>
@@ -124,25 +124,25 @@ export default function SessionReviewScreen() {
 
         {/* Tasks Completed */}
         <View style={[styles.card, { backgroundColor: colors.card }]}>
-          <Text style={[styles.sectionTitle, { color: colors.text }]}>Changes Made</Text>
+          <Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>Changes Made</Text>
           {session.tasksCompleted.map((task, index) => (
             <View key={index} style={styles.taskItem}>
               <Text style={[styles.bullet, { color: colors.success }]}>✓</Text>
-              <Text style={[styles.taskText, { color: colors.text }]}>{task}</Text>
+              <Text style={[styles.taskText, { color: colors.textPrimary }]}>{task}</Text>
             </View>
           ))}
         </View>
 
         {/* Comment Box */}
         <View style={[styles.card, { backgroundColor: colors.card }]}>
-          <Text style={[styles.sectionTitle, { color: colors.text }]}>Your Feedback</Text>
+          <Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>Your Feedback</Text>
           <Text style={[styles.helperText, { color: colors.textSecondary }]}>
             Add comments to guide the next iteration. Be specific about what needs to change.
           </Text>
           <TextInput
             style={[
               styles.commentInput,
-              { backgroundColor: colors.bg, color: colors.text, borderColor: colors.border },
+              { backgroundColor: colors.bg, color: colors.textPrimary, borderColor: colors.border },
             ]}
             placeholder="e.g., 'Please add error handling for the API call' or 'The button color should match our brand'"
             placeholderTextColor={colors.textSecondary}
diff --git a/app/sessions/index.tsx b/app/sessions/index.tsx
index 70d3c94..7417ef6 100644
--- a/app/sessions/index.tsx
+++ b/app/sessions/index.tsx
@@ -5,8 +5,9 @@ import { useOffline } from '@/hooks/useOffline'
 import { useSessions } from '@/hooks/useSessions'
 import { SessionCard } from '@/components/session/SessionCard'
 import { OfflineBanner } from '@/components/ui/OfflineBanner'
+import { EmptyState } from '@/components/design-system/EmptyState'
 import { SessionStatus, type Session } from '@/types/session'
-import { useLocalSearchParams } from 'expo-router'
+import { useLocalSearchParams, useRouter } from 'expo-router'
 
 type FilterType = 'all' | SessionStatus
 
@@ -14,6 +15,7 @@ export default function SessionsListScreen() {
   const { colors } = useTheme()
   const { isOffline } = useOffline()
   const { filter: urlFilter } = useLocalSearchParams()
+  const router = useRouter()
   const [filter, setFilter] = useState<FilterType>('all')
 
   // Set initial filter from URL parameter
@@ -61,8 +63,8 @@ export default function SessionsListScreen() {
               style={[
                 styles.filterChip,
                 {
-                  backgroundColor: isActive ? colors.accent : colors.card,
-                  borderColor: isActive ? colors.accent : colors.border,
+                  backgroundColor: isActive ? colors.primary : colors.card,
+                  borderColor: isActive ? colors.primary : colors.border,
                 },
               ]}
               onPress={() => setFilter(f.value)}
@@ -72,7 +74,7 @@ export default function SessionsListScreen() {
               accessibilityState={{ selected: isActive }}
               accessibilityHint={`Double tap to show ${f.label.toLowerCase()} sessions`}
             >
-              <Text style={[styles.filterText, { color: isActive ? '#fff' : colors.text }]}>
+              <Text style={[styles.filterText, { color: isActive ? '#fff' : colors.textPrimary }]}>
                 {f.label}
               </Text>
             </TouchableOpacity>
@@ -97,11 +99,13 @@ export default function SessionsListScreen() {
               Loading sessions...
             </Text>
           ) : (
-            <View style={[styles.emptyState, { backgroundColor: colors.card }]}>
-              <Text style={[styles.emptyStateText, { color: colors.textSecondary }]}>
-                No sessions found
-              </Text>
-            </View>
+            <EmptyState
+              icon="briefcase"
+              title="No sessions found"
+              description="You don't have any sessions matching this filter. Start a new workflow to get started."
+              actionLabel="Create Session"
+              onAction={() => router.push('/chat')}
+            />
           )
         }
         ListFooterComponent={<View style={{ height: 40 }} />}
diff --git a/app/settings/appearance.tsx b/app/settings/appearance.tsx
index 0f82373..bd48169 100644
--- a/app/settings/appearance.tsx
+++ b/app/settings/appearance.tsx
@@ -4,6 +4,7 @@ import { useTheme } from '../../hooks/useTheme'
 import { useOffline } from '../../hooks/useOffline'
 import { OfflineBanner } from '../../components/ui/OfflineBanner'
 import { PreferencesService } from '../../services/storage/preferences'
+import { TOKENS } from '../../utils/constants'
 
 type ThemeMode = 'light' | 'dark' | 'system'
 
@@ -84,15 +85,15 @@ function ThemeOption({ label, description, selected, onSelect }: ThemeOptionProp
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#f9fafb',
+    backgroundColor: TOKENS.bg,
   },
   description: {
     fontSize: 14,
-    color: '#6b7280',
+    color: TOKENS.textSecondary,
     padding: 16,
   },
   section: {
-    backgroundColor: '#fff',
+    backgroundColor: TOKENS.card,
     borderRadius: 12,
     marginHorizontal: 16,
     overflow: 'hidden',
@@ -102,7 +103,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     padding: 16,
     borderBottomWidth: 1,
-    borderBottomColor: '#f3f4f6',
+    borderBottomColor: TOKENS.border,
   },
   optionContent: {
     flex: 1,
@@ -110,29 +111,29 @@ const styles = StyleSheet.create({
   optionLabel: {
     fontSize: 16,
     fontWeight: '600',
-    color: '#1a1a1a',
+    color: TOKENS.textPrimary,
     marginBottom: 2,
   },
   optionDescription: {
     fontSize: 13,
-    color: '#6b7280',
+    color: TOKENS.textSecondary,
   },
   radio: {
     width: 24,
     height: 24,
     borderRadius: 12,
     borderWidth: 2,
-    borderColor: '#d1d5db',
+    borderColor: TOKENS.border,
     justifyContent: 'center',
     alignItems: 'center',
   },
   radioSelected: {
-    borderColor: '#8b5cf6',
+    borderColor: TOKENS.primary,
   },
   radioInner: {
     width: 12,
     height: 12,
     borderRadius: 6,
-    backgroundColor: '#8b5cf6',
+    backgroundColor: TOKENS.primary,
   },
 })
diff --git a/app/settings/index.tsx b/app/settings/index.tsx
index 3b92f4c..71f3de3 100644
--- a/app/settings/index.tsx
+++ b/app/settings/index.tsx
@@ -9,6 +9,7 @@ import { useOffline } from '../../hooks/useOffline'
 import { userApi } from '../../services/api/user'
 import { PreferencesService } from '../../services/storage/preferences'
 import type { User } from '../../types/user'
+import { TOKENS } from '../../utils/constants'
 
 const FEEDBACK_FORM_URL =
   'https://docs.google.com/forms/d/e/1FAIpQLScQwBV4ZH2b3Fm_D0IDzIwKyCa-B8AnKhAOXZj3_F5cN0Gm8Q/viewform'
@@ -137,8 +138,6 @@ export default function SettingsScreen() {
           icon="git-branch-outline"
           onPress={() => router.push('/settings/repos')}
         />
-        <SettingsRow label="GitHub Integration" icon="logo-github" badge="Soon" disabled />
-        <SettingsRow label="API Keys" icon="key-outline" badge="Soon" disabled />
       </View>
 
       {/* Preferences Section */}
@@ -167,7 +166,7 @@ export default function SettingsScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#f9fafb',
+    backgroundColor: TOKENS.bg,
   },
   loading: {
     flex: 1,
@@ -180,7 +179,7 @@ const styles = StyleSheet.create({
   sectionHeader: {
     fontSize: 13,
     fontWeight: '600',
-    color: '#6b7280',
+    color: TOKENS.textMuted,
     textTransform: 'uppercase',
     letterSpacing: 0.5,
     paddingHorizontal: 16,
diff --git a/app/settings/notifications.tsx b/app/settings/notifications.tsx
index 4955f12..0382872 100644
--- a/app/settings/notifications.tsx
+++ b/app/settings/notifications.tsx
@@ -6,6 +6,7 @@ import { useOffline } from '../../hooks/useOffline'
 import { userApi } from '../../services/api/user'
 import { PreferencesService } from '../../services/storage/preferences'
 import type { NotificationPreferences } from '../../types/user'
+import { TOKENS } from '../../utils/constants'
 
 export default function NotificationsSettingsScreen() {
   const { isOffline } = useOffline()
@@ -113,7 +114,7 @@ export default function NotificationsSettingsScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#f9fafb',
+    backgroundColor: TOKENS.bg,
   },
   loading: {
     flex: 1,
@@ -122,11 +123,11 @@ const styles = StyleSheet.create({
   },
   description: {
     fontSize: 14,
-    color: '#6b7280',
+    color: TOKENS.textSecondary,
     padding: 16,
   },
   section: {
-    backgroundColor: '#fff',
+    backgroundColor: TOKENS.card,
     borderRadius: 12,
     marginHorizontal: 16,
     overflow: 'hidden',
diff --git a/app/settings/privacy.tsx b/app/settings/privacy.tsx
index c91a1df..85995e0 100644
--- a/app/settings/privacy.tsx
+++ b/app/settings/privacy.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { View, Text, Switch, StyleSheet, ScrollView } from 'react-native'
 import { getTelemetryEnabled, setTelemetryEnabled } from '@/services/telemetry'
+import { TOKENS } from '@/utils/constants'
 
 export default function PrivacySettingsScreen() {
   const [telemetryEnabled, setTelemetryEnabledState] = useState(true)
@@ -51,29 +52,23 @@ export default function PrivacySettingsScreen() {
             value={telemetryEnabled}
             onValueChange={handleToggle}
             disabled={isLoading}
-            trackColor={{ false: '#d1d5db', true: '#a78bfa' }}
-            thumbColor={telemetryEnabled ? '#8b5cf6' : '#f4f3f4'}
-            ios_backgroundColor="#d1d5db"
+            trackColor={{ false: TOKENS.border, true: TOKENS.primary }}
+            thumbColor={telemetryEnabled ? '#fff' : '#f4f3f4'}
+            ios_backgroundColor={TOKENS.border}
           />
         </View>
       </View>
 
       <View style={styles.infoSection}>
         <Text style={styles.infoTitle}>What data is collected?</Text>
-        <Text style={styles.infoText}>When analytics are enabled, we collect:</Text>
         <View style={styles.bulletList}>
+          <Text style={styles.bulletPoint}>• Anonymous usage patterns and performance metrics</Text>
           <Text style={styles.bulletPoint}>
-            • App usage patterns (screens viewed, features used)
+            • We never collect your code, messages, or credentials
+          </Text>
+          <Text style={styles.bulletPoint}>
+            • All data is anonymized and used only for improvements
           </Text>
-          <Text style={styles.bulletPoint}>• Performance metrics (app crashes, errors)</Text>
-          <Text style={styles.bulletPoint}>• Device information (OS version, model)</Text>
-        </View>
-
-        <Text style={styles.infoText}>We never collect:</Text>
-        <View style={styles.bulletList}>
-          <Text style={styles.bulletPoint}>• Your code or repository content</Text>
-          <Text style={styles.bulletPoint}>• Personal messages or chat conversations</Text>
-          <Text style={styles.bulletPoint}>• Passwords or authentication tokens</Text>
         </View>
 
         <Text style={styles.noteText}>
@@ -87,15 +82,15 @@ export default function PrivacySettingsScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#f9fafb',
+    backgroundColor: TOKENS.bg,
   },
   description: {
     fontSize: 14,
-    color: '#6b7280',
+    color: TOKENS.textSecondary,
     padding: 16,
   },
   section: {
-    backgroundColor: '#fff',
+    backgroundColor: TOKENS.card,
     borderRadius: 12,
     marginHorizontal: 16,
     overflow: 'hidden',
@@ -113,12 +108,12 @@ const styles = StyleSheet.create({
   settingLabel: {
     fontSize: 16,
     fontWeight: '600',
-    color: '#1a1a1a',
+    color: TOKENS.textPrimary,
     marginBottom: 4,
   },
   settingDescription: {
     fontSize: 13,
-    color: '#6b7280',
+    color: TOKENS.textSecondary,
     lineHeight: 18,
   },
   infoSection: {
@@ -129,12 +124,12 @@ const styles = StyleSheet.create({
   infoTitle: {
     fontSize: 16,
     fontWeight: '600',
-    color: '#1a1a1a',
+    color: TOKENS.textPrimary,
     marginBottom: 12,
   },
   infoText: {
     fontSize: 14,
-    color: '#374151',
+    color: TOKENS.textSecondary,
     marginTop: 16,
     marginBottom: 8,
   },
@@ -143,13 +138,13 @@ const styles = StyleSheet.create({
   },
   bulletPoint: {
     fontSize: 14,
-    color: '#6b7280',
+    color: TOKENS.textSecondary,
     lineHeight: 22,
     marginBottom: 4,
   },
   noteText: {
     fontSize: 13,
-    color: '#9ca3af',
+    color: TOKENS.textMuted,
     fontStyle: 'italic',
     marginTop: 16,
   },
diff --git a/components/ErrorBoundary.tsx b/components/ErrorBoundary.tsx
index 2e9194d..8987772 100644
--- a/components/ErrorBoundary.tsx
+++ b/components/ErrorBoundary.tsx
@@ -74,9 +74,9 @@ function ErrorFallback({ error, onReset }: { error: Error | null; onReset: () =>
   return (
     <View style={[styles.container, { backgroundColor: colors.bg }]}>
       <View style={[styles.card, { backgroundColor: colors.card }]}>
-        <Text style={[styles.title, { color: colors.error }]}>Something went wrong</Text>
+        <Text style={[styles.title, { color: colors.danger }]}>Something went wrong</Text>
 
-        <Text style={[styles.message, { color: colors.text }]}>
+        <Text style={[styles.message, { color: colors.textPrimary }]}>
           {error?.message || 'An unexpected error occurred'}
         </Text>
 
@@ -90,7 +90,7 @@ function ErrorFallback({ error, onReset }: { error: Error | null; onReset: () =>
         )}
 
         <TouchableOpacity
-          style={[styles.button, { backgroundColor: colors.accent }]}
+          style={[styles.button, { backgroundColor: colors.primary }]}
           onPress={onReset}
           activeOpacity={0.8}
         >
diff --git a/components/PerformanceMonitor.tsx b/components/PerformanceMonitor.tsx
index 64bb2b0..24413fe 100644
--- a/components/PerformanceMonitor.tsx
+++ b/components/PerformanceMonitor.tsx
@@ -65,27 +65,27 @@ export function PerformanceMonitor() {
     <View style={[styles.container, { backgroundColor: colors.bg }]}>
       {/* Header */}
       <View style={[styles.header, { borderBottomColor: colors.border }]}>
-        <Text style={[styles.title, { color: colors.text }]}>Performance Monitor</Text>
+        <Text style={[styles.title, { color: colors.textPrimary }]}>Performance Monitor</Text>
         <TouchableOpacity onPress={() => setIsVisible(false)} style={styles.closeButton}>
-          <Text style={[styles.closeText, { color: colors.text }]}>✕</Text>
+          <Text style={[styles.closeText, { color: colors.textPrimary }]}>✕</Text>
         </TouchableOpacity>
       </View>
 
       <ScrollView style={styles.content}>
         {/* Memory Stats */}
         <View style={styles.section}>
-          <Text style={[styles.sectionTitle, { color: colors.text }]}>Memory</Text>
+          <Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>Memory</Text>
           {metrics.memory ? (
             <>
               <View style={styles.row}>
                 <Text style={[styles.label, { color: colors.textSecondary }]}>Used:</Text>
-                <Text style={[styles.value, { color: colors.text }]}>
+                <Text style={[styles.value, { color: colors.textPrimary }]}>
                   {formatBytes(metrics.memory.usedJSHeapSize)}
                 </Text>
               </View>
               <View style={styles.row}>
                 <Text style={[styles.label, { color: colors.textSecondary }]}>Total:</Text>
-                <Text style={[styles.value, { color: colors.text }]}>
+                <Text style={[styles.value, { color: colors.textPrimary }]}>
                   {formatBytes(metrics.memory.totalJSHeapSize)}
                 </Text>
               </View>
@@ -123,7 +123,7 @@ export function PerformanceMonitor() {
 
         {/* FPS Stats */}
         <View style={styles.section}>
-          <Text style={[styles.sectionTitle, { color: colors.text }]}>Frame Rate</Text>
+          <Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>Frame Rate</Text>
           {metrics.fps ? (
             <>
               <View style={styles.row}>
@@ -140,19 +140,19 @@ export function PerformanceMonitor() {
               </View>
               <View style={styles.row}>
                 <Text style={[styles.label, { color: colors.textSecondary }]}>Average:</Text>
-                <Text style={[styles.value, { color: colors.text }]}>
+                <Text style={[styles.value, { color: colors.textPrimary }]}>
                   {metrics.fps.average.toFixed(1)} FPS
                 </Text>
               </View>
               <View style={styles.row}>
                 <Text style={[styles.label, { color: colors.textSecondary }]}>Min / Max:</Text>
-                <Text style={[styles.value, { color: colors.text }]}>
+                <Text style={[styles.value, { color: colors.textPrimary }]}>
                   {metrics.fps.min.toFixed(0)} / {metrics.fps.max.toFixed(0)}
                 </Text>
               </View>
               <View style={styles.row}>
                 <Text style={[styles.label, { color: colors.textSecondary }]}>Slow Frames:</Text>
-                <Text style={[styles.value, { color: colors.text }]}>
+                <Text style={[styles.value, { color: colors.textPrimary }]}>
                   {metrics.fps.slowFrameCount} (
                   {((metrics.fps.slowFrameCount / metrics.fps.totalFrames) * 100).toFixed(1)}
                   %)
@@ -168,7 +168,9 @@ export function PerformanceMonitor() {
 
         {/* Render Stats */}
         <View style={styles.section}>
-          <Text style={[styles.sectionTitle, { color: colors.text }]}>Top Rendered Components</Text>
+          <Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>
+            Top Rendered Components
+          </Text>
           {metrics.renders.length > 0 ? (
             metrics.renders.map((stat, index) => (
               <View key={stat.componentName} style={styles.renderRow}>
@@ -176,7 +178,10 @@ export function PerformanceMonitor() {
                   {index + 1}.
                 </Text>
                 <View style={styles.renderInfo}>
-                  <Text style={[styles.componentName, { color: colors.text }]} numberOfLines={1}>
+                  <Text
+                    style={[styles.componentName, { color: colors.textPrimary }]}
+                    numberOfLines={1}
+                  >
                     {stat.componentName}
                   </Text>
                   <Text style={[styles.renderCount, { color: colors.textSecondary }]}>
@@ -196,7 +201,7 @@ export function PerformanceMonitor() {
         {/* Actions */}
         <View style={styles.section}>
           <TouchableOpacity
-            style={[styles.button, { backgroundColor: colors.accent }]}
+            style={[styles.button, { backgroundColor: colors.primary }]}
             onPress={() => {
               if (typeof global !== 'undefined' && (global as any).performance?.report) {
                 ;(global as any).performance.report()
@@ -214,7 +219,7 @@ export function PerformanceMonitor() {
               console.log('🔄 Performance metrics reset')
             }}
           >
-            <Text style={[styles.buttonText, { color: colors.text }]}>Reset Metrics</Text>
+            <Text style={[styles.buttonText, { color: colors.textPrimary }]}>Reset Metrics</Text>
           </TouchableOpacity>
         </View>
       </ScrollView>
@@ -222,7 +227,7 @@ export function PerformanceMonitor() {
       {/* Toggle button - always visible in dev */}
       {!isVisible && (
         <TouchableOpacity
-          style={[styles.floatingButton, { backgroundColor: colors.accent }]}
+          style={[styles.floatingButton, { backgroundColor: colors.primary }]}
           onPress={() => setIsVisible(true)}
         >
           <Text style={styles.floatingButtonText}>📊</Text>
@@ -246,7 +251,7 @@ export function PerformanceToggle() {
       {isVisible && <PerformanceMonitor />}
       {!isVisible && (
         <TouchableOpacity
-          style={[styles.floatingButton, { backgroundColor: colors.accent }]}
+          style={[styles.floatingButton, { backgroundColor: colors.primary }]}
           onPress={() => setIsVisible(true)}
         >
           <Text style={styles.floatingButtonText}>📊</Text>
diff --git a/components/chat/ChatBubble.tsx b/components/chat/ChatBubble.tsx
index fc53801..3a609c9 100644
--- a/components/chat/ChatBubble.tsx
+++ b/components/chat/ChatBubble.tsx
@@ -35,7 +35,7 @@ function ChatBubbleComponent({ message }: ChatBubbleProps) {
     <View style={[styles.container, isUser ? styles.userContainer : styles.assistantContainer]}>
       {/* Claude avatar for assistant messages */}
       {!isUser && (
-        <View style={[styles.avatar, { backgroundColor: colors.accent }]}>
+        <View style={[styles.avatar, { backgroundColor: colors.primary }]}>
           <Text style={styles.avatarText}>C</Text>
         </View>
       )}
@@ -45,7 +45,7 @@ function ChatBubbleComponent({ message }: ChatBubbleProps) {
         style={[
           styles.bubble,
           {
-            backgroundColor: isUser ? colors.accent : colors.card,
+            backgroundColor: isUser ? colors.primary : colors.card,
             maxWidth: '75%',
           },
         ]}
@@ -54,7 +54,7 @@ function ChatBubbleComponent({ message }: ChatBubbleProps) {
           style={[
             styles.content,
             {
-              color: isUser ? '#fff' : colors.text,
+              color: isUser ? '#fff' : colors.textPrimary,
             },
           ]}
         >
diff --git a/components/chat/ChatHeader.tsx b/components/chat/ChatHeader.tsx
index 3485f72..1a44852 100644
--- a/components/chat/ChatHeader.tsx
+++ b/components/chat/ChatHeader.tsx
@@ -27,14 +27,14 @@ export function ChatHeader({ onClose }: ChatHeaderProps) {
     >
       <View style={styles.titleSection}>
         <View style={styles.titleRow}>
-          <Text style={[styles.title, { color: colors.text }]}>Claude</Text>
+          <Text style={[styles.title, { color: colors.textPrimary }]}>Claude</Text>
           <View style={[styles.statusDot, { backgroundColor: colors.success }]} />
         </View>
         <Text style={[styles.subtitle, { color: colors.textSecondary }]}>sonnet-4.5</Text>
       </View>
 
       <TouchableOpacity onPress={onClose} style={styles.closeButton} activeOpacity={0.7}>
-        <IconSymbol name="xmark" size={24} color={colors.text} />
+        <IconSymbol name="xmark" size={24} color={colors.textPrimary} />
       </TouchableOpacity>
     </View>
   )
diff --git a/components/chat/ChatInput.tsx b/components/chat/ChatInput.tsx
index ed322d0..83121a2 100644
--- a/components/chat/ChatInput.tsx
+++ b/components/chat/ChatInput.tsx
@@ -42,7 +42,7 @@ export function ChatInput({ onSend, disabled = false }: ChatInputProps) {
       style={[styles.container, { backgroundColor: colors.card, borderTopColor: colors.border }]}
     >
       <TextInput
-        style={[styles.input, { color: colors.text }]}
+        style={[styles.input, { color: colors.textPrimary }]}
         placeholder="Message Claude..."
         placeholderTextColor={colors.textSecondary}
         value={text}
@@ -57,7 +57,7 @@ export function ChatInput({ onSend, disabled = false }: ChatInputProps) {
         style={[
           styles.sendButton,
           {
-            backgroundColor: canSend ? colors.accent : colors.border,
+            backgroundColor: canSend ? colors.primary : colors.border,
           },
         ]}
         onPress={handleSend}
diff --git a/components/decisions/DecisionCard.tsx b/components/decisions/DecisionCard.tsx
index 361827a..f11b321 100644
--- a/components/decisions/DecisionCard.tsx
+++ b/components/decisions/DecisionCard.tsx
@@ -17,7 +17,7 @@ export function DecisionCard({ decision, onStartReview }: DecisionCardProps) {
       <View style={styles.header}>
         <AgentAvatar agentName={decision.agentName} size="medium" />
         <View style={styles.headerText}>
-          <Text style={[styles.title, { color: colors.text }]} numberOfLines={2}>
+          <Text style={[styles.title, { color: colors.textPrimary }]} numberOfLines={2}>
             {decision.title}
           </Text>
           <Text style={[styles.context, { color: colors.textSecondary }]}>
@@ -27,7 +27,7 @@ export function DecisionCard({ decision, onStartReview }: DecisionCardProps) {
       </View>
 
       <TouchableOpacity
-        style={[styles.button, { backgroundColor: colors.accent }]}
+        style={[styles.button, { backgroundColor: colors.primary }]}
         onPress={onStartReview}
         accessibilityRole="button"
         accessibilityLabel={`Start review for ${decision.title}`}
diff --git a/components/design-system/ControlButton.tsx b/components/design-system/ControlButton.tsx
new file mode 100644
index 0000000..19e045f
--- /dev/null
+++ b/components/design-system/ControlButton.tsx
@@ -0,0 +1,60 @@
+import { Pressable, Text, StyleSheet, StyleProp, ViewStyle } from 'react-native'
+import { TOKENS } from '@/utils/constants'
+
+interface ControlButtonProps {
+  label: string
+  isActive?: boolean
+  onPress: () => void
+  disabled?: boolean
+  style?: StyleProp<ViewStyle>
+}
+
+export function ControlButton({
+  label,
+  isActive = false,
+  onPress,
+  disabled = false,
+  style,
+}: ControlButtonProps) {
+  return (
+    <Pressable
+      style={({ pressed }) => [
+        styles.button,
+        isActive && styles.buttonActive,
+        disabled && styles.buttonDisabled,
+        { opacity: pressed ? 0.7 : 1 },
+        style,
+      ]}
+      onPress={onPress}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityState={{ disabled }}
+    >
+      <Text style={[styles.label, { color: isActive ? TOKENS.textPrimary : TOKENS.textSecondary }]}>
+        {label}
+      </Text>
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: TOKENS.card,
+    borderRadius: TOKENS.radius12,
+    paddingVertical: TOKENS.spacing12,
+    paddingHorizontal: TOKENS.spacing16,
+    minHeight: 44, // Touch target
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonActive: {
+    backgroundColor: TOKENS.primary,
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+  },
+  label: {
+    fontSize: TOKENS.labelSize,
+    fontWeight: TOKENS.labelWeight,
+  },
+})
diff --git a/components/design-system/EmptyState.tsx b/components/design-system/EmptyState.tsx
new file mode 100644
index 0000000..feac787
--- /dev/null
+++ b/components/design-system/EmptyState.tsx
@@ -0,0 +1,54 @@
+import { View, Text, StyleSheet } from 'react-native'
+import { MaterialCommunityIcons } from '@expo/vector-icons'
+import { TOKENS } from '@/utils/constants'
+import { ControlButton } from './ControlButton'
+
+interface EmptyStateProps {
+  icon: string
+  title: string
+  description: string
+  actionLabel?: string
+  onAction?: () => void
+}
+
+export function EmptyState({ icon, title, description, actionLabel, onAction }: EmptyStateProps) {
+  return (
+    <View style={styles.container}>
+      <MaterialCommunityIcons name={icon as any} size={64} color={TOKENS.textMuted} />
+
+      <Text style={[styles.title, { color: TOKENS.textPrimary }]}>{title}</Text>
+
+      <Text style={[styles.description, { color: TOKENS.textSecondary }]}>{description}</Text>
+
+      {actionLabel && onAction && (
+        <ControlButton label={actionLabel} onPress={onAction} style={styles.action} />
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: TOKENS.spacing32,
+    paddingVertical: TOKENS.spacing32,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '700',
+    marginTop: TOKENS.spacing16,
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: TOKENS.bodySize,
+    marginTop: TOKENS.spacing8,
+    textAlign: 'center',
+    lineHeight: 24,
+  },
+  action: {
+    marginTop: TOKENS.spacing24,
+    minWidth: 200,
+  },
+})
diff --git a/components/design-system/ProgressBar.tsx b/components/design-system/ProgressBar.tsx
new file mode 100644
index 0000000..3636088
--- /dev/null
+++ b/components/design-system/ProgressBar.tsx
@@ -0,0 +1,43 @@
+import { View, StyleSheet } from 'react-native'
+import { TOKENS } from '@/utils/constants'
+
+interface ProgressBarProps {
+  progress: number // 0-1
+  color?: string
+}
+
+export function ProgressBar({ progress, color = TOKENS.primary }: ProgressBarProps) {
+  const percentage = Math.max(0, Math.min(1, progress)) * 100
+
+  return (
+    <View style={styles.track}>
+      <View
+        style={[
+          styles.fill,
+          {
+            width: `${percentage}%`,
+            backgroundColor: color,
+            shadowColor: color,
+          },
+        ]}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  track: {
+    height: 8,
+    backgroundColor: TOKENS.card,
+    borderRadius: TOKENS.radius8,
+    overflow: 'hidden',
+  },
+  fill: {
+    height: '100%',
+    borderRadius: TOKENS.radius8,
+    shadowRadius: 4,
+    shadowOpacity: 0.6,
+    shadowOffset: { width: 0, height: 0 },
+    elevation: 2,
+  },
+})
diff --git a/components/design-system/ScreenLayout.tsx b/components/design-system/ScreenLayout.tsx
new file mode 100644
index 0000000..6205494
--- /dev/null
+++ b/components/design-system/ScreenLayout.tsx
@@ -0,0 +1,51 @@
+import { ReactNode, useState } from 'react'
+import { ScrollView, RefreshControl, StyleSheet } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import { TOKENS } from '@/utils/constants'
+
+interface ScreenLayoutProps {
+  children: ReactNode
+  onRefresh?: () => Promise<void>
+}
+
+export function ScreenLayout({ children, onRefresh }: ScreenLayoutProps) {
+  const [refreshing, setRefreshing] = useState(false)
+
+  const handleRefresh = async () => {
+    if (!onRefresh) return
+    setRefreshing(true)
+    await onRefresh()
+    setRefreshing(false)
+  }
+
+  return (
+    <SafeAreaView style={styles.container} edges={['top']}>
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={styles.content}
+        refreshControl={
+          onRefresh ? (
+            <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
+          ) : undefined
+        }
+      >
+        {children}
+      </ScrollView>
+    </SafeAreaView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: TOKENS.bg,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  content: {
+    paddingHorizontal: TOKENS.spacing16,
+    paddingTop: TOKENS.spacing24,
+    paddingBottom: 40,
+  },
+})
diff --git a/components/design-system/SectionHeader.tsx b/components/design-system/SectionHeader.tsx
new file mode 100644
index 0000000..6a3107f
--- /dev/null
+++ b/components/design-system/SectionHeader.tsx
@@ -0,0 +1,22 @@
+import { Text, StyleSheet, StyleProp, TextStyle } from 'react-native'
+import { TOKENS } from '@/utils/constants'
+
+interface SectionHeaderProps {
+  title: string
+  style?: StyleProp<TextStyle>
+}
+
+export function SectionHeader({ title, style }: SectionHeaderProps) {
+  return <Text style={[styles.header, style]}>{title}</Text>
+}
+
+const styles = StyleSheet.create({
+  header: {
+    fontSize: TOKENS.labelSize,
+    fontWeight: TOKENS.labelWeight,
+    color: TOKENS.textMuted,
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+    marginBottom: TOKENS.spacing12,
+  },
+})
diff --git a/components/design-system/StatCard.tsx b/components/design-system/StatCard.tsx
new file mode 100644
index 0000000..137626c
--- /dev/null
+++ b/components/design-system/StatCard.tsx
@@ -0,0 +1,60 @@
+import { View, Text, StyleSheet, StyleProp, ViewStyle } from 'react-native'
+import { MaterialCommunityIcons } from '@expo/vector-icons'
+import { TOKENS } from '@/utils/constants'
+
+type Variant = 'default' | 'success' | 'warning' | 'danger'
+
+const VARIANT_COLORS = {
+  default: TOKENS.primary,
+  success: TOKENS.success,
+  warning: TOKENS.warning,
+  danger: TOKENS.danger,
+}
+
+interface StatCardProps {
+  label: string
+  value: string
+  icon: string
+  variant?: Variant
+  style?: StyleProp<ViewStyle>
+}
+
+export function StatCard({ label, value, icon, variant = 'default', style }: StatCardProps) {
+  const color = VARIANT_COLORS[variant]
+
+  return (
+    <View style={[styles.container, style]}>
+      <MaterialCommunityIcons name={icon as any} size={20} color={color} />
+
+      <Text style={[styles.value, { color: TOKENS.textPrimary }]}>{value}</Text>
+
+      <Text style={[styles.label, { color: TOKENS.textMuted }]}>{label}</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: TOKENS.card,
+    borderRadius: TOKENS.radius12,
+    padding: TOKENS.spacing16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: TOKENS.spacing4,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  value: {
+    fontSize: 18,
+    fontWeight: '700',
+    marginTop: TOKENS.spacing4,
+  },
+  label: {
+    fontSize: 11,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+  },
+})
diff --git a/components/design-system/StatusBadge.tsx b/components/design-system/StatusBadge.tsx
new file mode 100644
index 0000000..38a4743
--- /dev/null
+++ b/components/design-system/StatusBadge.tsx
@@ -0,0 +1,96 @@
+import { View, Text, StyleSheet } from 'react-native'
+import { TOKENS } from '@/utils/constants'
+
+type Status = 'running' | 'done' | 'error' | 'paused' | 'awaiting_review'
+
+const STATUS_COLORS = {
+  running: TOKENS.success, // #22c55e
+  done: TOKENS.primary, // #3b82f6
+  error: TOKENS.danger, // #ef4444
+  paused: TOKENS.warning, // #eab308
+  awaiting_review: TOKENS.warning,
+}
+
+interface StatusBadgeProps {
+  status: Status
+  label: string
+  size?: 'small' | 'large'
+}
+
+export function StatusBadge({ status, label, size = 'small' }: StatusBadgeProps) {
+  const color = STATUS_COLORS[status]
+  const isLarge = size === 'large'
+
+  return (
+    <View
+      style={[
+        styles.container,
+        isLarge && styles.containerLarge,
+        {
+          backgroundColor: TOKENS.card,
+          shadowColor: color,
+          borderColor: color,
+        },
+      ]}
+    >
+      {/* Colored dot with glow */}
+      <View
+        style={[
+          styles.dot,
+          isLarge && styles.dotLarge,
+          {
+            backgroundColor: color,
+            shadowColor: color,
+          },
+        ]}
+      />
+
+      <Text style={[styles.label, isLarge && styles.labelLarge, { color: TOKENS.textPrimary }]}>
+        {label}
+      </Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: TOKENS.radius20,
+    borderWidth: 1,
+    shadowRadius: 4,
+    shadowOpacity: 0.5,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 3, // Android
+  },
+  containerLarge: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginRight: 8,
+    shadowRadius: 4,
+    shadowOpacity: 0.8,
+    shadowOffset: { width: 0, height: 0 },
+    elevation: 2,
+  },
+  dotLarge: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    marginRight: 12,
+  },
+  label: {
+    fontSize: TOKENS.labelSize,
+    fontWeight: TOKENS.labelWeight,
+  },
+  labelLarge: {
+    fontSize: TOKENS.bodySize,
+    fontWeight: TOKENS.headerWeight,
+  },
+})
diff --git a/components/inbox/DecisionQueueCard.tsx b/components/inbox/DecisionQueueCard.tsx
index 41d7578..5525766 100644
--- a/components/inbox/DecisionQueueCard.tsx
+++ b/components/inbox/DecisionQueueCard.tsx
@@ -24,15 +24,15 @@ export function DecisionQueueCard({ count, totalMinutes }: DecisionQueueCardProp
       accessibilityHint="Opens decision queue"
     >
       <View style={styles.header}>
-        <Text style={[styles.title, { color: colors.text }]}>Decision Queue</Text>
-        <View style={[styles.badge, { backgroundColor: colors.accent }]}>
+        <Text style={[styles.title, { color: colors.textPrimary }]}>Decision Queue</Text>
+        <View style={[styles.badge, { backgroundColor: colors.primary }]}>
           <Text style={styles.badgeText}>{count}</Text>
         </View>
       </View>
       <Text style={[styles.subtitle, { color: colors.textSecondary }]}>
         ~{totalMinutes} min to review
       </Text>
-      <View style={[styles.button, { backgroundColor: colors.accent }]}>
+      <View style={[styles.button, { backgroundColor: colors.primary }]}>
         <Text style={styles.buttonText}>Start Reviews →</Text>
       </View>
     </TouchableOpacity>
diff --git a/components/inbox/ForecastCard.tsx b/components/inbox/ForecastCard.tsx
index 64a7d3e..c01150d 100644
--- a/components/inbox/ForecastCard.tsx
+++ b/components/inbox/ForecastCard.tsx
@@ -16,25 +16,25 @@ export function ForecastCard({ forecast }: ForecastCardProps) {
 
   return (
     <View style={[styles.card, { backgroundColor: colors.card }]}>
-      <Text style={[styles.title, { color: colors.text }]}>Forecast</Text>
+      <Text style={[styles.title, { color: colors.textPrimary }]}>Forecast</Text>
 
       <View style={styles.section}>
         <Text style={[styles.label, { color: colors.textSecondary }]}>Deep Work Window</Text>
-        <Text style={[styles.value, { color: colors.text }]}>
+        <Text style={[styles.value, { color: colors.textPrimary }]}>
           {formatTime(forecast.deepWorkWindow.start)} - {formatTime(forecast.deepWorkWindow.end)}
         </Text>
       </View>
 
       <View style={styles.section}>
         <Text style={[styles.label, { color: colors.textSecondary }]}>Next Review Batch</Text>
-        <Text style={[styles.value, { color: colors.text }]}>
+        <Text style={[styles.value, { color: colors.textPrimary }]}>
           {formatTime(forecast.nextReviewBatch)}
         </Text>
       </View>
 
       <View style={styles.section}>
         <Text style={[styles.label, { color: colors.textSecondary }]}>Agent Hours in Progress</Text>
-        <Text style={[styles.value, { color: colors.accent }]}>
+        <Text style={[styles.value, { color: colors.primary }]}>
           {forecast.agentHoursInProgress} hours
         </Text>
       </View>
diff --git a/components/inbox/InboxHeader.tsx b/components/inbox/InboxHeader.tsx
index 9274364..bd09c58 100644
--- a/components/inbox/InboxHeader.tsx
+++ b/components/inbox/InboxHeader.tsx
@@ -20,7 +20,7 @@ export function InboxHeader({ userName, summary }: InboxHeaderProps) {
 
   return (
     <View style={styles.container}>
-      <Text style={[styles.greeting, { color: colors.text }]}>
+      <Text style={[styles.greeting, { color: colors.textPrimary }]}>
         {getGreeting()}, {userName}
       </Text>
 
@@ -37,8 +37,8 @@ export function InboxHeader({ userName, summary }: InboxHeaderProps) {
           <Text style={[styles.statLabel, { color: colors.textSecondary }]}>Stuck</Text>
         </View>
 
-        <View style={[styles.statCard, { backgroundColor: colors.accent + '20' }]}>
-          <Text style={[styles.statNumber, { color: colors.accent }]}>
+        <View style={[styles.statCard, { backgroundColor: colors.primary + '20' }]}>
+          <Text style={[styles.statNumber, { color: colors.primary }]}>
             {summary.pendingDecisions}
           </Text>
           <Text style={[styles.statLabel, { color: colors.textSecondary }]}>Decisions</Text>
diff --git a/components/inbox/OvernightResultsCard.tsx b/components/inbox/OvernightResultsCard.tsx
index 8936d7e..1d2bc3d 100644
--- a/components/inbox/OvernightResultsCard.tsx
+++ b/components/inbox/OvernightResultsCard.tsx
@@ -14,12 +14,12 @@ export function OvernightResultsCard({ results }: OvernightResultsCardProps) {
 
   return (
     <View style={[styles.card, { backgroundColor: colors.card }]}>
-      <Text style={[styles.title, { color: colors.text }]}>Overnight Results</Text>
+      <Text style={[styles.title, { color: colors.textPrimary }]}>Overnight Results</Text>
       <View style={styles.results}>
         {displayResults.map((result, index) => (
           <View key={index} style={styles.resultRow}>
             <AgentAvatar agentName={result.agentName} size="small" />
-            <Text style={[styles.task, { color: colors.text }]} numberOfLines={1}>
+            <Text style={[styles.task, { color: colors.textPrimary }]} numberOfLines={1}>
               {result.task}
             </Text>
             <Text
diff --git a/components/inbox/StuckAgentBanner.tsx b/components/inbox/StuckAgentBanner.tsx
index 2da40cd..436b89b 100644
--- a/components/inbox/StuckAgentBanner.tsx
+++ b/components/inbox/StuckAgentBanner.tsx
@@ -32,7 +32,7 @@ export function StuckAgentBanner({ agents }: StuckAgentBannerProps) {
     >
       <AgentAvatar agentName={agent.name} size="small" />
       <View style={styles.content}>
-        <Text style={[styles.title, { color: colors.text }]}>{agent.name} needs help</Text>
+        <Text style={[styles.title, { color: colors.textPrimary }]}>{agent.name} needs help</Text>
         <Text style={[styles.task, { color: colors.textSecondary }]} numberOfLines={1}>
           {agent.task}
         </Text>
diff --git a/components/layout/CreateFAB.tsx b/components/layout/CreateFAB.tsx
index 252c44c..83f79b7 100644
--- a/components/layout/CreateFAB.tsx
+++ b/components/layout/CreateFAB.tsx
@@ -49,7 +49,7 @@ export function CreateFAB() {
     <>
       {/* FAB Button */}
       <TouchableOpacity
-        style={[styles.fab, { backgroundColor: colors.accent }]}
+        style={[styles.fab, { backgroundColor: colors.primary }]}
         onPress={() => setModalVisible(true)}
         activeOpacity={0.8}
         accessibilityRole="button"
@@ -71,7 +71,7 @@ export function CreateFAB() {
             <View style={[styles.modalContainer, { backgroundColor: colors.card }]}>
               {/* Header */}
               <View style={styles.modalHeader}>
-                <Text style={[styles.modalTitle, { color: colors.text }]}>Create New</Text>
+                <Text style={[styles.modalTitle, { color: colors.textPrimary }]}>Create New</Text>
                 <TouchableOpacity
                   onPress={() => setModalVisible(false)}
                   style={styles.closeButton}
@@ -98,7 +98,7 @@ export function CreateFAB() {
                     activeOpacity={0.7}
                     disabled={option.soon}
                   >
-                    <View style={[styles.optionIconContainer, { backgroundColor: colors.accent }]}>
+                    <View style={[styles.optionIconContainer, { backgroundColor: colors.primary }]}>
                       <Feather
                         name={option.icon}
                         size={20}
@@ -109,7 +109,7 @@ export function CreateFAB() {
                       style={[
                         styles.optionLabel,
                         {
-                          color: option.soon ? colors.textSecondary : colors.text,
+                          color: option.soon ? colors.textSecondary : colors.textPrimary,
                         },
                       ]}
                     >
diff --git a/components/layout/FAB.tsx b/components/layout/FAB.tsx
index 6ce76dd..a81c976 100644
--- a/components/layout/FAB.tsx
+++ b/components/layout/FAB.tsx
@@ -1,5 +1,6 @@
 import { TouchableOpacity, StyleSheet } from 'react-native'
 import { Ionicons } from '@expo/vector-icons'
+import { TOKENS } from '@/utils/constants'
 import { router } from 'expo-router'
 
 export function FAB() {
@@ -22,7 +23,7 @@ const styles = StyleSheet.create({
     width: 56,
     height: 56,
     borderRadius: 28,
-    backgroundColor: '#6366f1', // Purple accent
+    backgroundColor: TOKENS.primary,
     justifyContent: 'center',
     alignItems: 'center',
     elevation: 4, // Android shadow
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index 68b45d7..dc67e12 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -138,7 +138,7 @@ export const Header = memo(({ isRefetching = false }: HeaderProps) => {
 
   return (
     <View style={[styles.container, { backgroundColor: colors.bg }]}>
-      <Text style={[styles.greeting, { color: colors.text }]} numberOfLines={1}>
+      <Text style={[styles.greeting, { color: colors.textPrimary }]} numberOfLines={1}>
         {greeting}, {firstName}
       </Text>
 
@@ -149,10 +149,10 @@ export const Header = memo(({ isRefetching = false }: HeaderProps) => {
           onPress={() => router.push('/announcements')}
           activeOpacity={0.7}
         >
-          <IconSymbol name="gift.fill" size={20} color={colors.text} />
+          <IconSymbol name="gift.fill" size={20} color={colors.textPrimary} />
           {/* Unread badge */}
           {unreadAnnouncementsCount > 0 && (
-            <View style={[styles.unreadBadge, { backgroundColor: colors.accent }]}>
+            <View style={[styles.unreadBadge, { backgroundColor: colors.primary }]}>
               <Text style={styles.unreadBadgeText}>{unreadAnnouncementsCount}</Text>
             </View>
           )}
@@ -164,9 +164,9 @@ export const Header = memo(({ isRefetching = false }: HeaderProps) => {
           onPress={openNotifications}
           activeOpacity={0.7}
         >
-          <IconSymbol name="bell.fill" size={20} color={colors.text} />
+          <IconSymbol name="bell.fill" size={20} color={colors.textPrimary} />
           {/* Unread badge */}
-          <View style={[styles.unreadBadge, { backgroundColor: colors.error }]}>
+          <View style={[styles.unreadBadge, { backgroundColor: colors.danger }]}>
             <Text style={styles.unreadBadgeText}>2</Text>
           </View>
         </TouchableOpacity>
@@ -174,7 +174,7 @@ export const Header = memo(({ isRefetching = false }: HeaderProps) => {
         {/* Avatar with refresh spinner */}
         <View style={styles.avatarContainer}>
           <TouchableOpacity
-            style={[styles.avatar, { backgroundColor: colors.accent }]}
+            style={[styles.avatar, { backgroundColor: colors.primary }]}
             activeOpacity={0.7}
             onPress={showUserMenu}
           >
@@ -182,7 +182,7 @@ export const Header = memo(({ isRefetching = false }: HeaderProps) => {
           </TouchableOpacity>
           {isRefetching && (
             <View style={styles.spinnerContainer}>
-              <ActivityIndicator size="large" color={colors.accent} />
+              <ActivityIndicator size="large" color={colors.primary} />
             </View>
           )}
         </View>
diff --git a/components/modals/NotificationsModal.tsx b/components/modals/NotificationsModal.tsx
index 04d6fb1..e29ecb4 100644
--- a/components/modals/NotificationsModal.tsx
+++ b/components/modals/NotificationsModal.tsx
@@ -101,12 +101,12 @@ export function NotificationsModal({ visible, onClose }: NotificationsModalProps
   const renderEmptyState = (type: 'notifications' | 'announcements') => (
     <View style={styles.emptyState}>
       <View style={[styles.quoteCard, { backgroundColor: colors.card }]}>
-        <IconSymbol name="sparkles" size={32} color={colors.accent} />
-        <Text style={[styles.quoteText, { color: colors.text }]}>
+        <IconSymbol name="sparkles" size={32} color={colors.primary} />
+        <Text style={[styles.quoteText, { color: colors.textPrimary }]}>
           &quot;{randomQuote.quote}&quot;
         </Text>
         <View style={styles.quoteAuthor}>
-          <Text style={[styles.authorName, { color: colors.accent }]}>{randomQuote.author}</Text>
+          <Text style={[styles.authorName, { color: colors.primary }]}>{randomQuote.author}</Text>
           <Text style={[styles.authorContext, { color: colors.textSecondary }]}>
             {randomQuote.context}
           </Text>
@@ -137,34 +137,34 @@ export function NotificationsModal({ visible, onClose }: NotificationsModalProps
         style={[
           styles.notificationCard,
           {
-            backgroundColor: isUnread ? colors.accent + '10' : colors.card,
-            borderLeftColor: isUnread ? colors.accent : colors.border,
+            backgroundColor: isUnread ? colors.primary + '10' : colors.card,
+            borderLeftColor: isUnread ? colors.primary : colors.border,
           },
         ]}
         activeOpacity={0.7}
       >
         <View style={styles.notificationContent}>
-          <View style={[styles.notificationIcon, { backgroundColor: colors.accent + '20' }]}>
-            <IconSymbol name={iconName} size={20} color={colors.accent} />
+          <View style={[styles.notificationIcon, { backgroundColor: colors.primary + '20' }]}>
+            <IconSymbol name={iconName} size={20} color={colors.primary} />
           </View>
           <View style={styles.notificationDetails}>
             <View style={styles.notificationHeader}>
               <Text
                 style={[
                   styles.notificationTitle,
-                  { color: colors.text, fontWeight: isUnread ? '700' : '600' },
+                  { color: colors.textPrimary, fontWeight: isUnread ? '700' : '600' },
                 ]}
               >
                 {notification.title}
               </Text>
-              {isUnread && <View style={[styles.unreadDot, { backgroundColor: colors.accent }]} />}
+              {isUnread && <View style={[styles.unreadDot, { backgroundColor: colors.primary }]} />}
             </View>
             <Text style={[styles.notificationMessage, { color: colors.textSecondary }]}>
               {notification.message}
             </Text>
             <View style={styles.notificationFooter}>
               {notification.author && (
-                <Text style={[styles.notificationAuthor, { color: colors.accent }]}>
+                <Text style={[styles.notificationAuthor, { color: colors.primary }]}>
                   {notification.author}
                 </Text>
               )}
@@ -188,9 +188,9 @@ export function NotificationsModal({ visible, onClose }: NotificationsModalProps
       <SafeAreaView style={[styles.container, { backgroundColor: colors.bg }]}>
         {/* Header */}
         <View style={[styles.header, { borderBottomColor: colors.border }]}>
-          <Text style={[styles.headerTitle, { color: colors.text }]}>Updates</Text>
+          <Text style={[styles.headerTitle, { color: colors.textPrimary }]}>Updates</Text>
           <TouchableOpacity onPress={onClose} activeOpacity={0.7}>
-            <Text style={[styles.closeButton, { color: colors.accent }]}>Done</Text>
+            <Text style={[styles.closeButton, { color: colors.primary }]}>Done</Text>
           </TouchableOpacity>
         </View>
 
@@ -200,19 +200,19 @@ export function NotificationsModal({ visible, onClose }: NotificationsModalProps
             style={[
               styles.tab,
               activeTab === 'notifications' && {
-                borderBottomColor: colors.accent,
+                borderBottomColor: colors.primary,
                 borderBottomWidth: 2,
               },
             ]}
             onPress={() => setActiveTab('notifications')}
             activeOpacity={0.7}
           >
-            <IconSymbol name="bell.fill" size={20} color={colors.text} />
+            <IconSymbol name="bell.fill" size={20} color={colors.textPrimary} />
             <Text
               style={[
                 styles.tabText,
                 {
-                  color: activeTab === 'notifications' ? colors.accent : colors.textSecondary,
+                  color: activeTab === 'notifications' ? colors.primary : colors.textSecondary,
                 },
               ]}
             >
@@ -224,19 +224,19 @@ export function NotificationsModal({ visible, onClose }: NotificationsModalProps
             style={[
               styles.tab,
               activeTab === 'announcements' && {
-                borderBottomColor: colors.accent,
+                borderBottomColor: colors.primary,
                 borderBottomWidth: 2,
               },
             ]}
             onPress={() => setActiveTab('announcements')}
             activeOpacity={0.7}
           >
-            <IconSymbol name="sparkles" size={20} color={colors.text} />
+            <IconSymbol name="sparkles" size={20} color={colors.textPrimary} />
             <Text
               style={[
                 styles.tabText,
                 {
-                  color: activeTab === 'announcements' ? colors.accent : colors.textSecondary,
+                  color: activeTab === 'announcements' ? colors.primary : colors.textSecondary,
                 },
               ]}
             >
diff --git a/components/notifications/NotificationCard.tsx b/components/notifications/NotificationCard.tsx
index 012ba8f..25cecf2 100644
--- a/components/notifications/NotificationCard.tsx
+++ b/components/notifications/NotificationCard.tsx
@@ -63,7 +63,7 @@ function NotificationCardComponent({ notification, onPress }: NotificationCardPr
         styles.container,
         {
           backgroundColor: colors.card,
-          borderLeftColor: notification.isUnread ? colors.accent : 'transparent',
+          borderLeftColor: notification.isUnread ? colors.primary : 'transparent',
         },
       ]}
       onPress={() => onPress(notification)}
@@ -74,7 +74,7 @@ function NotificationCardComponent({ notification, onPress }: NotificationCardPr
     >
       {/* Unread indicator dot */}
       {notification.isUnread && (
-        <View style={[styles.unreadDot, { backgroundColor: colors.accent }]} />
+        <View style={[styles.unreadDot, { backgroundColor: colors.primary }]} />
       )}
 
       {/* Icon */}
@@ -82,7 +82,7 @@ function NotificationCardComponent({ notification, onPress }: NotificationCardPr
         <Feather
           name={getNotificationIcon(notification.type)}
           size={20}
-          color={notification.isUnread ? colors.accent : colors.textSecondary}
+          color={notification.isUnread ? colors.primary : colors.textSecondary}
         />
       </View>
 
@@ -98,7 +98,7 @@ function NotificationCardComponent({ notification, onPress }: NotificationCardPr
           style={[
             styles.title,
             {
-              color: colors.text,
+              color: colors.textPrimary,
               fontWeight: notification.isUnread ? '600' : '400',
             },
           ]}
diff --git a/components/session/ApprovalActions.tsx b/components/session/ApprovalActions.tsx
index 8dc9474..2ae245c 100644
--- a/components/session/ApprovalActions.tsx
+++ b/components/session/ApprovalActions.tsx
@@ -114,7 +114,7 @@ export function ApprovalActions({ sessionId, sessionName, onSuccess }: ApprovalA
           style={[
             styles.button,
             styles.rejectButton,
-            { backgroundColor: colors.error },
+            { backgroundColor: colors.danger },
             isButtonDisabled && styles.buttonDisabled,
           ]}
           onPress={() => setRejectModalVisible(true)}
@@ -157,7 +157,7 @@ export function ApprovalActions({ sessionId, sessionName, onSuccess }: ApprovalA
       >
         <View style={styles.modalOverlay}>
           <View style={[styles.modalContent, { backgroundColor: colors.card }]}>
-            <Text style={[styles.modalTitle, { color: colors.text }]}>Approve Session?</Text>
+            <Text style={[styles.modalTitle, { color: colors.textPrimary }]}>Approve Session?</Text>
             <Text style={[styles.modalMessage, { color: colors.textSecondary }]}>
               This will mark &ldquo;{sessionName}&rdquo; as completed and merge the changes.
             </Text>
@@ -168,7 +168,7 @@ export function ApprovalActions({ sessionId, sessionName, onSuccess }: ApprovalA
                 onPress={() => setApproveModalVisible(false)}
                 activeOpacity={0.7}
               >
-                <Text style={[styles.modalButtonText, { color: colors.text }]}>Cancel</Text>
+                <Text style={[styles.modalButtonText, { color: colors.textPrimary }]}>Cancel</Text>
               </TouchableOpacity>
 
               <TouchableOpacity
@@ -196,7 +196,7 @@ export function ApprovalActions({ sessionId, sessionName, onSuccess }: ApprovalA
           style={styles.modalOverlay}
         >
           <View style={[styles.modalContent, { backgroundColor: colors.card }]}>
-            <Text style={[styles.modalTitle, { color: colors.text }]}>Reject Session?</Text>
+            <Text style={[styles.modalTitle, { color: colors.textPrimary }]}>Reject Session?</Text>
             <Text style={[styles.modalMessage, { color: colors.textSecondary }]}>
               Provide feedback for Claude to make changes. Feedback is optional.
             </Text>
@@ -204,7 +204,11 @@ export function ApprovalActions({ sessionId, sessionName, onSuccess }: ApprovalA
             <TextInput
               style={[
                 styles.feedbackInput,
-                { backgroundColor: colors.bg, color: colors.text, borderColor: colors.border },
+                {
+                  backgroundColor: colors.bg,
+                  color: colors.textPrimary,
+                  borderColor: colors.border,
+                },
               ]}
               placeholder="Describe what needs to be changed..."
               placeholderTextColor={colors.textSecondary}
@@ -228,11 +232,11 @@ export function ApprovalActions({ sessionId, sessionName, onSuccess }: ApprovalA
                 }}
                 activeOpacity={0.7}
               >
-                <Text style={[styles.modalButtonText, { color: colors.text }]}>Cancel</Text>
+                <Text style={[styles.modalButtonText, { color: colors.textPrimary }]}>Cancel</Text>
               </TouchableOpacity>
 
               <TouchableOpacity
-                style={[styles.modalButton, { backgroundColor: colors.error }]}
+                style={[styles.modalButton, { backgroundColor: colors.danger }]}
                 onPress={handleReject}
                 activeOpacity={0.7}
               >
diff --git a/components/session/ModelBadge.tsx b/components/session/ModelBadge.tsx
index 656dc1e..12cbfa1 100644
--- a/components/session/ModelBadge.tsx
+++ b/components/session/ModelBadge.tsx
@@ -15,8 +15,8 @@ export function ModelBadge({ model, size = 'small' }: ModelBadgeProps) {
   const description = model === ModelType.SONNET_4_5 ? 'Fast & efficient' : 'Most capable'
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.accent + '20' }]}>
-      <Text style={[styles.label, { color: colors.accent }]}>{label}</Text>
+    <View style={[styles.container, { backgroundColor: colors.primary + '20' }]}>
+      <Text style={[styles.label, { color: colors.primary }]}>{label}</Text>
       {size === 'medium' && (
         <Text style={[styles.description, { color: colors.textSecondary }]}>{description}</Text>
       )}
diff --git a/components/session/SessionCard.tsx b/components/session/SessionCard.tsx
index d860652..756c2c3 100644
--- a/components/session/SessionCard.tsx
+++ b/components/session/SessionCard.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useCallback, memo } from 'react'
-import { View, TouchableOpacity, StyleSheet, Animated } from 'react-native'
+import React, { useCallback, memo } from 'react'
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
 import type { Session } from '@/types/session'
 import { SessionProgress } from './SessionProgress'
 import { ModelBadge } from './ModelBadge'
@@ -14,78 +14,11 @@ interface SessionCardProps {
 function SessionCardComponent({ session }: SessionCardProps) {
   const { colors } = useTheme()
   const router = useRouter()
-  const progressFlashAnim = useRef(new Animated.Value(0)).current
-  const statusFlashAnim = useRef(new Animated.Value(0)).current
-  const prevProgressRef = useRef(session.progress)
-  const prevStatusRef = useRef(session.status)
-
-  // Detect progress changes and trigger flash animation
-  useEffect(() => {
-    if (prevProgressRef.current !== session.progress) {
-      // Progress changed - trigger flash animation
-
-      // Flash animation: 0 -> 1 (inverted) -> 0 (normal) over 3 seconds
-      Animated.sequence([
-        Animated.timing(progressFlashAnim, {
-          toValue: 1,
-          duration: 150,
-          useNativeDriver: false,
-        }),
-        Animated.timing(progressFlashAnim, {
-          toValue: 0,
-          duration: 2850,
-          useNativeDriver: false,
-        }),
-      ]).start()
-
-      prevProgressRef.current = session.progress
-    }
-  }, [session.progress, progressFlashAnim, session.id])
-
-  // Detect status changes and trigger flash animation
-  useEffect(() => {
-    if (prevStatusRef.current !== session.status) {
-      // Status changed - trigger flash animation
-
-      // Flash animation: 0 -> 1 (inverted) -> 0 (normal) over 3 seconds
-      Animated.sequence([
-        Animated.timing(statusFlashAnim, {
-          toValue: 1,
-          duration: 150,
-          useNativeDriver: false,
-        }),
-        Animated.timing(statusFlashAnim, {
-          toValue: 0,
-          duration: 2850,
-          useNativeDriver: false,
-        }),
-      ]).start()
-
-      prevStatusRef.current = session.status
-    }
-  }, [session.status, statusFlashAnim, session.id])
 
   const handlePress = useCallback(() => {
     router.push(`/sessions/${session.id}`)
   }, [router, session.id])
 
-  // Progress text color animation
-  const progressTextColor = progressFlashAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [colors.textSecondary, colors.card],
-  })
-
-  const progressBgColor = progressFlashAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['transparent', colors.text],
-  })
-
-  // Status badge flash animation (will wrap StatusBadge)
-  const statusBgColor = statusFlashAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['transparent', colors.text],
-  })
-
   return (
     <TouchableOpacity
       style={[styles.container, { backgroundColor: colors.card }]}
@@ -96,51 +29,27 @@ function SessionCardComponent({ session }: SessionCardProps) {
       accessibilityHint="Double tap to view session details"
     >
       <View style={styles.header}>
-        <Animated.Text style={[styles.name, { color: colors.text }]} numberOfLines={1}>
+        <Text style={[styles.name, { color: colors.textPrimary }]} numberOfLines={1}>
           {session.name}
-        </Animated.Text>
+        </Text>
         <ModelBadge model={session.model} />
       </View>
 
       <View style={styles.statusRow}>
-        <Animated.View
-          style={[
-            {
-              backgroundColor: statusBgColor,
-              borderRadius: 4,
-              paddingHorizontal: 4,
-              paddingVertical: 2,
-            },
-          ]}
-        >
+        <View style={styles.statusBadgeWrapper}>
           <StatusBadge status={session.status} />
-        </Animated.View>
-        <Animated.View
-          style={[
-            styles.progressContainer,
-            {
-              backgroundColor: progressBgColor,
-              borderRadius: 4,
-              paddingHorizontal: 6,
-              paddingVertical: 2,
-            },
-          ]}
-        >
-          <Animated.Text style={[styles.progress, { color: progressTextColor }]}>
-            {session.progress}%
-          </Animated.Text>
-        </Animated.View>
+        </View>
+        <View style={styles.progressWrapper}>
+          <Text style={[styles.progress, { color: colors.textPrimary }]}>{session.progress}%</Text>
+        </View>
       </View>
 
       <SessionProgress progress={session.progress} />
 
       {session.currentTask && (
-        <Animated.Text
-          style={[styles.currentTask, { color: colors.textSecondary }]}
-          numberOfLines={1}
-        >
+        <Text style={[styles.currentTask, { color: colors.textSecondary }]} numberOfLines={1}>
           {session.currentTask}
-        </Animated.Text>
+        </Text>
       )}
     </TouchableOpacity>
   )
@@ -174,8 +83,15 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
   },
-  progressContainer: {
-    // Container for progress percentage with flash effect
+  statusBadgeWrapper: {
+    borderRadius: 4,
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+  },
+  progressWrapper: {
+    borderRadius: 4,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
   },
   progress: {
     fontSize: 14,
diff --git a/components/session/SessionProgress.tsx b/components/session/SessionProgress.tsx
index 8cd1323..b3387dd 100644
--- a/components/session/SessionProgress.tsx
+++ b/components/session/SessionProgress.tsx
@@ -18,7 +18,7 @@ export function SessionProgress({ progress }: SessionProgressProps) {
           styles.fill,
           {
             width: `${clampedProgress}%`,
-            backgroundColor: colors.accent,
+            backgroundColor: colors.primary,
           },
         ]}
       />
diff --git a/components/settings/ProfileCard.tsx b/components/settings/ProfileCard.tsx
index 1f7a86b..745d772 100644
--- a/components/settings/ProfileCard.tsx
+++ b/components/settings/ProfileCard.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, Text, Image, StyleSheet } from 'react-native'
 import type { User } from '../../types/user'
+import { TOKENS } from '../../utils/constants'
 
 interface ProfileCardProps {
   user: User
@@ -38,7 +39,7 @@ const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
     padding: 24,
-    backgroundColor: '#fff',
+    backgroundColor: TOKENS.card,
     borderRadius: 12,
     marginBottom: 16,
   },
@@ -51,36 +52,36 @@ const styles = StyleSheet.create({
   name: {
     fontSize: 22,
     fontWeight: '700',
-    color: '#1a1a1a',
+    color: TOKENS.textPrimary,
     marginBottom: 8,
   },
   badge: {
     paddingHorizontal: 12,
     paddingVertical: 4,
     borderRadius: 12,
-    backgroundColor: '#f3f4f6',
+    backgroundColor: TOKENS.elevated,
     marginBottom: 4,
   },
   badgeText: {
     fontSize: 12,
     fontWeight: '600',
-    color: '#6b7280',
+    color: TOKENS.textSecondary,
   },
   ssoBadge: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: '#d1fae5',
+    backgroundColor: TOKENS.success + '20',
   },
   ssoIndicator: {
     width: 6,
     height: 6,
     borderRadius: 3,
-    backgroundColor: '#10b981',
+    backgroundColor: TOKENS.success,
     marginRight: 6,
   },
   ssoBadgeText: {
     fontSize: 12,
     fontWeight: '600',
-    color: '#059669',
+    color: TOKENS.success,
   },
 })
diff --git a/components/ui/ApiStatusIndicator.tsx b/components/ui/ApiStatusIndicator.tsx
index ed66326..69de3cc 100644
--- a/components/ui/ApiStatusIndicator.tsx
+++ b/components/ui/ApiStatusIndicator.tsx
@@ -135,7 +135,7 @@ export const ApiStatusIndicator = memo<ApiStatusIndicatorProps>(
               </Text>
             )}
             {error && size === 'large' && (
-              <Text style={[styles.errorText, { color: colors.error }]} numberOfLines={2}>
+              <Text style={[styles.errorText, { color: colors.danger }]} numberOfLines={2}>
                 {error}
               </Text>
             )}
diff --git a/components/ui/Badge.tsx b/components/ui/Badge.tsx
index daff6ac..f7dc137 100644
--- a/components/ui/Badge.tsx
+++ b/components/ui/Badge.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, Text, StyleSheet } from 'react-native'
 import { SessionStatus } from '@/types/session'
+import { TOKENS } from '@/utils/constants'
 import { useTheme } from '@/hooks/useTheme'
 
 interface StatusBadgeProps {
@@ -13,7 +14,7 @@ export function StatusBadge({ status }: StatusBadgeProps) {
   const getStatusColor = () => {
     switch (status) {
       case SessionStatus.RUNNING:
-        return colors.accent
+        return colors.primary
       case SessionStatus.PAUSED:
         return colors.warning
       case SessionStatus.DONE:
@@ -21,7 +22,7 @@ export function StatusBadge({ status }: StatusBadgeProps) {
       case SessionStatus.AWAITING_REVIEW:
         return colors.warning
       case SessionStatus.ERROR:
-        return colors.error
+        return colors.danger
       default:
         return colors.textSecondary
     }
@@ -60,7 +61,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingHorizontal: 8,
     paddingVertical: 4,
-    borderRadius: 12,
+    borderRadius: TOKENS.radius20,
     gap: 4,
   },
   dot: {
diff --git a/components/ui/ErrorMessage.tsx b/components/ui/ErrorMessage.tsx
index 7915fbc..f8a2973 100644
--- a/components/ui/ErrorMessage.tsx
+++ b/components/ui/ErrorMessage.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
 import { IconSymbol } from './icon-symbol'
+import { TOKENS } from '@/utils/constants'
 import { useTheme } from '@/hooks/useTheme'
 
 interface ErrorMessageProps {
@@ -19,22 +20,22 @@ export function ErrorMessage({ error, retry, showDetails = false }: ErrorMessage
   const { colors } = useTheme()
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.card }]}>
-      <IconSymbol name="exclamationmark.triangle.fill" size={48} color={colors.error} />
+    <View style={[styles.container, { backgroundColor: TOKENS.card }]}>
+      <IconSymbol name="exclamationmark.triangle.fill" size={48} color={TOKENS.danger} />
 
-      <Text style={[styles.title, { color: colors.text }]}>Something went wrong</Text>
+      <Text style={[styles.title, { color: TOKENS.textPrimary }]}>Something went wrong</Text>
 
-      <Text style={[styles.message, { color: colors.textSecondary }]}>
+      <Text style={[styles.message, { color: TOKENS.textSecondary }]}>
         {error.message || 'An unexpected error occurred'}
       </Text>
 
       {showDetails && error.stack && (
-        <Text style={[styles.details, { color: colors.textSecondary }]}>{error.stack}</Text>
+        <Text style={[styles.details, { color: TOKENS.textSecondary }]}>{error.stack}</Text>
       )}
 
       {retry && (
         <TouchableOpacity
-          style={[styles.retryButton, { backgroundColor: colors.accent }]}
+          style={[styles.retryButton, { backgroundColor: TOKENS.primary }]}
           onPress={retry}
           activeOpacity={0.7}
         >
@@ -80,7 +81,7 @@ const styles = StyleSheet.create({
     gap: 8,
     paddingHorizontal: 24,
     paddingVertical: 12,
-    borderRadius: 8,
+    borderRadius: TOKENS.radius12,
     marginTop: 8,
   },
   retryText: {
diff --git a/components/ui/OfflineBanner.tsx b/components/ui/OfflineBanner.tsx
index 2d8d68b..5070c83 100644
--- a/components/ui/OfflineBanner.tsx
+++ b/components/ui/OfflineBanner.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, Text, StyleSheet } from 'react-native'
 import { IconSymbol } from './icon-symbol'
+import { TOKENS } from '@/utils/constants'
 import { useTheme } from '@/hooks/useTheme'
 
 /**
@@ -13,9 +14,9 @@ export function OfflineBanner() {
   const { colors } = useTheme()
 
   return (
-    <View style={[styles.banner, { backgroundColor: colors.warning }]}>
-      <IconSymbol name="wifi.slash" size={16} color="#fff" />
-      <Text style={styles.text}>Offline - Using cached data</Text>
+    <View style={[styles.banner, { backgroundColor: TOKENS.danger + '33' }]}>
+      <IconSymbol name="wifi.slash" size={16} color={TOKENS.danger} />
+      <Text style={[styles.text, { color: TOKENS.textPrimary }]}>Offline - Using cached data</Text>
     </View>
   )
 }
@@ -29,7 +30,6 @@ const styles = StyleSheet.create({
     gap: 8,
   },
   text: {
-    color: '#fff',
     fontSize: 13,
     fontWeight: '600',
   },
diff --git a/components/ui/SettingsRow.tsx b/components/ui/SettingsRow.tsx
index 1a7ffeb..3d1d1ac 100644
--- a/components/ui/SettingsRow.tsx
+++ b/components/ui/SettingsRow.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { TouchableOpacity, View, Text, StyleSheet } from 'react-native'
 import { Ionicons } from '@expo/vector-icons'
+import { TOKENS } from '@/utils/constants'
 
 interface SettingsRowProps {
   label: string
@@ -23,7 +24,7 @@ export function SettingsRow({ label, icon, badge, onPress, disabled = false }: S
         <Ionicons
           name={icon}
           size={24}
-          color={disabled ? '#9ca3af' : '#6b7280'}
+          color={disabled ? TOKENS.textDisabled : TOKENS.textSecondary}
           style={styles.icon}
         />
       )}
@@ -39,7 +40,11 @@ export function SettingsRow({ label, icon, badge, onPress, disabled = false }: S
       )}
 
       {/* Chevron */}
-      <Ionicons name="chevron-forward" size={20} color={disabled ? '#d1d5db' : '#9ca3af'} />
+      <Ionicons
+        name="chevron-forward"
+        size={20}
+        color={disabled ? TOKENS.border : TOKENS.textMuted}
+      />
     </TouchableOpacity>
   )
 }
@@ -49,9 +54,9 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     padding: 16,
-    backgroundColor: '#fff',
+    backgroundColor: TOKENS.card,
     borderBottomWidth: 1,
-    borderBottomColor: '#f3f4f6',
+    borderBottomColor: TOKENS.border,
   },
   disabled: {
     opacity: 0.5,
@@ -63,21 +68,21 @@ const styles = StyleSheet.create({
     flex: 1,
     fontSize: 16,
     fontWeight: '500',
-    color: '#1a1a1a',
+    color: TOKENS.textPrimary,
   },
   disabledText: {
-    color: '#9ca3af',
+    color: TOKENS.textDisabled,
   },
   badge: {
     paddingHorizontal: 8,
     paddingVertical: 2,
     borderRadius: 8,
-    backgroundColor: '#f3f4f6',
+    backgroundColor: TOKENS.elevated,
     marginRight: 8,
   },
   badgeText: {
     fontSize: 11,
     fontWeight: '600',
-    color: '#6b7280',
+    color: TOKENS.textSecondary,
   },
 })
diff --git a/components/ui/Toast.tsx b/components/ui/Toast.tsx
index 75e6a2e..9842963 100644
--- a/components/ui/Toast.tsx
+++ b/components/ui/Toast.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useCallback } from 'react'
 import { View, Text, TouchableOpacity, StyleSheet, Animated } from 'react-native'
+import { TOKENS } from '@/utils/constants'
 import { useTheme } from '@/hooks/useTheme'
 import { IconSymbol } from '@/components/ui/icon-symbol'
 import { useRouter } from 'expo-router'
@@ -92,15 +93,15 @@ export function Toast({ notification, onDismiss }: ToastProps) {
   const getBackgroundColor = () => {
     switch (notification.type) {
       case 'review':
-        return colors.warning + 'E6'
+        return TOKENS.warning + 'E6'
       case 'session':
-        return colors.accent + 'E6'
+        return TOKENS.primary + 'E6'
       case 'success':
-        return colors.success + 'E6'
+        return TOKENS.success + 'E6'
       case 'error':
-        return colors.error + 'E6'
+        return TOKENS.danger + 'E6'
       default:
-        return colors.card + 'E6'
+        return TOKENS.elevated + 'E6'
     }
   }
 
diff --git a/components/ui/Toggle.tsx b/components/ui/Toggle.tsx
index cb23407..169ff9d 100644
--- a/components/ui/Toggle.tsx
+++ b/components/ui/Toggle.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { View, Text, Switch, StyleSheet } from 'react-native'
+import { TOKENS } from '@/utils/constants'
 
 interface ToggleProps {
   label: string
@@ -27,9 +28,9 @@ export function Toggle({
         value={value}
         onValueChange={onValueChange}
         disabled={disabled}
-        trackColor={{ false: '#d1d5db', true: '#a78bfa' }}
-        thumbColor={value ? '#8b5cf6' : '#f3f4f6'}
-        ios_backgroundColor="#d1d5db"
+        trackColor={{ false: TOKENS.border, true: TOKENS.primary }}
+        thumbColor={value ? TOKENS.primary : TOKENS.card}
+        ios_backgroundColor={TOKENS.border}
       />
     </View>
   )
@@ -40,9 +41,9 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     padding: 16,
-    backgroundColor: '#fff',
+    backgroundColor: TOKENS.card,
     borderBottomWidth: 1,
-    borderBottomColor: '#f3f4f6',
+    borderBottomColor: TOKENS.border,
   },
   textContainer: {
     flex: 1,
@@ -51,11 +52,11 @@ const styles = StyleSheet.create({
   label: {
     fontSize: 16,
     fontWeight: '500',
-    color: '#1a1a1a',
+    color: TOKENS.textPrimary,
     marginBottom: 2,
   },
   description: {
     fontSize: 13,
-    color: '#6b7280',
+    color: TOKENS.textSecondary,
   },
 })
diff --git a/hooks/useTheme.tsx b/hooks/useTheme.tsx
index 8d30e92..ab936bc 100644
--- a/hooks/useTheme.tsx
+++ b/hooks/useTheme.tsx
@@ -8,7 +8,7 @@ import React, {
   ReactNode,
 } from 'react'
 import { useColorScheme } from 'react-native'
-import { COLORS } from '@/utils/constants'
+import { COLORS, TOKENS } from '@/utils/constants'
 import { PreferencesService } from '@/services/storage/preferences'
 
 type ThemeMode = 'light' | 'dark' | 'system'
@@ -16,7 +16,7 @@ type ThemeMode = 'light' | 'dark' | 'system'
 interface ThemeContextType {
   theme: 'light' | 'dark'
   themeMode: ThemeMode
-  colors: typeof COLORS.light
+  colors: typeof TOKENS
   setThemeMode: (mode: ThemeMode) => void
 }
 
@@ -46,13 +46,15 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     [themeMode, systemColorScheme]
   )
 
-  // Memoize colors object to prevent recreation
-  const colors = useMemo(() => COLORS[theme], [theme])
+  // Force dark-first design: always return TOKENS
+  // Keep legacy colors for backward compatibility during migration
+  const colors = useMemo(() => TOKENS, [])
 
   // Memoize entire context value to prevent unnecessary re-renders
+  // Force theme to dark for dark-first design
   const contextValue = useMemo(
-    () => ({ theme, themeMode, colors, setThemeMode }),
-    [theme, themeMode, colors, setThemeMode]
+    () => ({ theme: 'dark' as const, themeMode, colors, setThemeMode }),
+    [themeMode, colors, setThemeMode]
   )
 
   return <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>
diff --git a/package-lock.json b/package-lock.json
index e9936f9..edff26e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -119,7 +119,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -1501,7 +1500,6 @@
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
       "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -3398,7 +3396,6 @@
       "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-2.2.0.tgz",
       "integrity": "sha512-gvRvjR5JAaUZF8tv2Kcq/Gbt3JHwbKFYfmb445rhOj6NUMx3qPLixmDx5pZAyb9at1bYvJ4/eTUipU5aki45xw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "merge-options": "^3.0.4"
       },
@@ -3755,7 +3752,6 @@
       "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-7.1.22.tgz",
       "integrity": "sha512-WuaS4iVFfuHIR6wIYcBA/ZF9/++bbtr0cEO7ohinc3PE+7PZuVJr7KgdrAFay3OI6GmqW0cmuUKZ0BPPDwQ7dw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@react-navigation/core": "^7.13.3",
         "escape-string-regexp": "^4.0.0",
@@ -4254,7 +4250,6 @@
       "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.11.tgz",
       "integrity": "sha512-3uyzz01D1fkTLXuxF3JfoJoHQMU2fxsfJwE+6N5hHy0dVNoZOvwKP8Z2k7k1KDeD54N20apcJnG75TBAStIrBA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@tanstack/query-core": "5.90.11"
       },
@@ -4290,7 +4285,6 @@
       "integrity": "sha512-wIn/lB1FjV2N4Q7i9PWVRck3Ehwq5pkhAef5X5/bmQ78J/NoOsGbVY2/DG5Y9Lxw+RfE+GvSEh/fe5Tz6sKSvw==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "jest-matcher-utils": "^29.7.0",
         "pretty-format": "^29.7.0",
@@ -4478,7 +4472,6 @@
       "integrity": "sha512-Qec1E3mhALmaspIrhWt9jkQMNdw6bReVu64mjvhbhq2NFPftLPVr+l1SZgmw/66WwBNpDh7ao5AT6gF5v41PFA==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -4564,7 +4557,6 @@
       "integrity": "sha512-jCzKdm/QK0Kg4V4IK/oMlRZlY+QOcdjv89U2NgKHZk1CYTj82/RVSx1mV/0gqCVMJ/DA+Zf/S4NBWNF8GQ+eqQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.48.0",
         "@typescript-eslint/types": "8.48.0",
@@ -5134,7 +5126,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5521,7 +5512,6 @@
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
       "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.4",
@@ -5908,7 +5898,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -7363,7 +7352,6 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -7560,7 +7548,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -7863,7 +7850,6 @@
       "resolved": "https://registry.npmjs.org/expo/-/expo-54.0.27.tgz",
       "integrity": "sha512-50BcJs8eqGwRiMUoWwphkRGYtKFS2bBnemxLzy0lrGVA1E6F4Q7L5h3WT6w1ehEZybtOVkfJu4Z6GWo2IJcpEA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.20.0",
         "@expo/cli": "54.0.18",
@@ -7958,7 +7944,6 @@
       "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-18.0.11.tgz",
       "integrity": "sha512-xnfrfZ7lHjb+03skhmDSYeFF7OU2K3Xn/lAeP+7RhkV2xp2f5RCKtOUYajCnYeZesvMrsUxOsbGOP2JXSOH3NA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@expo/config": "~12.0.11",
         "@expo/env": "~2.0.8"
@@ -7985,7 +7970,6 @@
       "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-19.0.20.tgz",
       "integrity": "sha512-Jr/nNvJmUlptS3cHLKVBNyTyGMHNyxYBKRph1KRe0Nb3RzZza1gZLZXMG5Ky//sO2azTn+OaT0dv/lAyL0vJNA==",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "expo": "*",
         "react-native": "*"
@@ -7996,7 +7980,6 @@
       "resolved": "https://registry.npmjs.org/expo-font/-/expo-font-14.0.10.tgz",
       "integrity": "sha512-UqyNaaLKRpj4pKAP4HZSLnuDQqueaO5tB1c/NWu5vh1/LF9ulItyyg2kF/IpeOp0DeOLk0GY0HrIXaKUMrwB+Q==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fontfaceobserver": "^2.1.0"
       },
@@ -8047,7 +8030,6 @@
       "resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-15.0.8.tgz",
       "integrity": "sha512-V2d8Wjn0VzhPHO+rrSBtcl+Fo+jUUccdlmQ6OoL9/XQB7Qk3d9lYrqKDJyccwDxmQT10JdST3Tmf2K52NLc3kw==",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "expo": "*",
         "react": "*",
@@ -8059,7 +8041,6 @@
       "resolved": "https://registry.npmjs.org/expo-linking/-/expo-linking-8.0.10.tgz",
       "integrity": "sha512-0EKtn4Sk6OYmb/5ZqK8riO0k1Ic+wyT3xExbmDvUYhT7p/cKqlVUExMuOIAt3Cx3KUUU1WCgGmdd493W/D5XjA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "expo-constants": "~18.0.11",
         "invariant": "^2.2.4"
@@ -10155,7 +10136,6 @@
       "integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/core": "^29.7.0",
         "@jest/types": "^29.6.3",
@@ -13784,7 +13764,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -13825,7 +13804,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -13862,7 +13840,6 @@
       "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.81.5.tgz",
       "integrity": "sha512-1w+/oSjEXZjMqsIvmkCRsOc8UBYv163bTWKTI8+1mxztvQPhCRYGTvZ/PL1w16xXHneIj/SLGfxWg2GWN2uexw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/create-cache-key-function": "^29.7.0",
         "@react-native/assets-registry": "0.81.5",
@@ -13956,7 +13933,6 @@
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.28.0.tgz",
       "integrity": "sha512-0msfJ1vRxXKVgTgvL+1ZOoYw3/0z1R+Ked0+udoJhyplC2jbVKIJ8Z1bzWdpQRCV3QcQ87Op0zJVE5DhKK2A0A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@egjs/hammerjs": "^2.0.17",
         "hoist-non-react-statics": "^3.3.0",
@@ -14046,7 +14022,6 @@
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-5.6.2.tgz",
       "integrity": "sha512-4XGqMNj5qjUTYywJqpdWZ9IG8jgkS3h06sfVjfw5yZQZfWnRFXczi0GnYyFyCc2EBps/qFmoCH8fez//WumdVg==",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "react": "*",
         "react-native": "*"
@@ -14057,7 +14032,6 @@
       "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-4.16.0.tgz",
       "integrity": "sha512-yIAyh7F/9uWkOzCi1/2FqvNvK6Wb9Y1+Kzn16SuGfN9YFJDTbwlzGRvePCNTOX0recpLQF3kc2FmvMUhyTCH1Q==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "react-freeze": "^1.0.0",
         "react-native-is-edge-to-edge": "^1.2.1",
@@ -14079,7 +14053,6 @@
       "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.12.1.tgz",
       "integrity": "sha512-vCuZJDf8a5aNC2dlMovEv4Z0jjEUET53lm/iILFnFewa15b4atjVxU6Wirm6O9y6dEsdjDZVD7Q3QM4T1wlI8g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "css-select": "^5.1.0",
         "css-tree": "^1.1.3",
@@ -14095,7 +14068,6 @@
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.21.2.tgz",
       "integrity": "sha512-SO2t9/17zM4iEnFvlu2DA9jqNbzNhoUP+AItkoCOyFmDMOhUnBBznBDCYN92fGdfAkfQlWzPoez6+zLxFNsZEg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.6",
         "@react-native/normalize-colors": "^0.74.1",
@@ -14215,7 +14187,6 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
       "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -14295,7 +14266,6 @@
       "integrity": "sha512-jXkSl3CpvPYEF+p/eGDLB4sPoDX8pKkYvRl9+rR8HxLY0X04vW7hCm1/0zHoUSjPZ3bDa+wXWNTDVIw/R8aDVw==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "react-is": "^19.1.0",
         "scheduler": "^0.26.0"
@@ -16364,7 +16334,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
diff --git a/utils/constants.ts b/utils/constants.ts
index 62b281f..ba29262 100644
--- a/utils/constants.ts
+++ b/utils/constants.ts
@@ -44,7 +44,7 @@ export const CACHE_TTL = {
   USER_PROFILE: 60 * 60 * 1000, // 1 hour
 }
 
-// Theme Colors
+// Theme Colors (Legacy - for backward compatibility during migration)
 export const COLORS = {
   light: {
     bg: '#f1f5f9',
@@ -70,6 +70,56 @@ export const COLORS = {
   },
 }
 
+// New Design Tokens (Dark-First Design System)
+export const TOKENS = {
+  // Backgrounds
+  bg: '#0a0a0a',
+  card: '#1a1a1a',
+  elevated: '#222',
+
+  // Semantic colors
+  primary: '#3b82f6',
+  success: '#22c55e',
+  warning: '#eab308',
+  danger: '#ef4444',
+
+  // Text (flattened, not nested)
+  textPrimary: '#fff',
+  textSecondary: '#ccc',
+  textMuted: '#888',
+  textDisabled: '#666',
+
+  // UI elements
+  border: '#333',
+
+  // Spacing (4px base)
+  spacing4: 4,
+  spacing8: 8,
+  spacing12: 12,
+  spacing16: 16,
+  spacing24: 24,
+  spacing32: 32,
+
+  // Border radius
+  radius8: 8,
+  radius10: 10,
+  radius12: 12,
+  radius14: 14,
+  radius20: 20,
+
+  // Typography
+  titleSize: 28,
+  titleWeight: '700' as const,
+  headerSize: 20,
+  headerWeight: '700' as const,
+  bodySize: 16,
+  bodyWeight: '400' as const,
+  labelSize: 14,
+  labelWeight: '600' as const,
+  hintSize: 12,
+  hintWeight: '400' as const,
+}
+
 // Workflow Types
 export const WORKFLOWS = [
   {
diff --git a/utils/mockData.ts b/utils/mockData.ts
index 963d746..b24392f 100644
--- a/utils/mockData.ts
+++ b/utils/mockData.ts
@@ -10,10 +10,38 @@ import { GitHubNotification, NotificationType } from '@/types/notification'
 import { NOTIFICATION_WORKFLOW_MAP } from '@/utils/constants'
 import { logger } from '@/utils/logger'
 
+/**
+ * Format a date as "MMM DD" (e.g., "Jan 11")
+ */
+function formatDateForSessionName(date: Date): string {
+  const months = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+  ]
+  return `${months[date.getMonth()]} ${date.getDate()}`
+}
+
+// Generate current dates for session names
+const now = new Date()
+const today = formatDateForSessionName(now)
+const yesterday = formatDateForSessionName(new Date(Date.now() - 86400000))
+const twoDaysAgo = formatDateForSessionName(new Date(Date.now() - 172800000))
+const threeDaysAgo = formatDateForSessionName(new Date(Date.now() - 259200000))
+
 export const MOCK_SESSIONS: Session[] = [
   {
     id: '1',
-    name: 'platform Review - Nov 26',
+    name: `platform Review - ${today}`,
     status: SessionStatus.RUNNING,
     progress: 67,
     model: ModelType.SONNET_4_5,
@@ -33,7 +61,7 @@ export const MOCK_SESSIONS: Session[] = [
   },
   {
     id: '2',
-    name: 'acp-mobile Bugfix - Nov 26',
+    name: `acp-mobile Bugfix - ${today}`,
     status: SessionStatus.AWAITING_REVIEW,
     progress: 100,
     model: ModelType.SONNET_4_5,
@@ -59,7 +87,7 @@ export const MOCK_SESSIONS: Session[] = [
   },
   {
     id: '3',
-    name: 'backend-api Research - Nov 25',
+    name: `backend-api Research - ${yesterday}`,
     status: SessionStatus.RUNNING,
     progress: 45,
     model: ModelType.OPUS_4_5,
@@ -79,7 +107,7 @@ export const MOCK_SESSIONS: Session[] = [
   },
   {
     id: '4',
-    name: 'feature-planner Plan - Nov 25',
+    name: `feature-planner Plan - ${yesterday}`,
     status: SessionStatus.ERROR,
     progress: 23,
     model: ModelType.SONNET_4_5,
@@ -99,7 +127,7 @@ export const MOCK_SESSIONS: Session[] = [
   },
   {
     id: '5',
-    name: 'docs-site Plan a Feature - Nov 24',
+    name: `docs-site Plan a Feature - ${threeDaysAgo}`,
     status: SessionStatus.DONE,
     progress: 100,
     model: ModelType.SONNET_4_5,
diff --git a/utils/mockInboxData.ts b/utils/mockInboxData.ts
index be1b809..0f253f7 100644
--- a/utils/mockInboxData.ts
+++ b/utils/mockInboxData.ts
@@ -21,7 +21,7 @@ export const mockInboxData = {
       name: 'Archie',
       task: 'Schema design',
       sessionId: 'session-archie-1',
-      stuckSince: new Date('2025-12-07T03:42:00'),
+      stuckSince: new Date(Date.now() - 6 * 3600000), // 6 hours ago (stuck since 3:42 AM)
     },
   ] as StuckAgent[],
   overnightResults: [
@@ -31,10 +31,10 @@ export const mockInboxData = {
   ] as OvernightResult[],
   forecast: {
     deepWorkWindow: {
-      start: new Date('2025-12-07T10:30:00'),
-      end: new Date('2025-12-07T13:00:00'),
+      start: new Date(new Date().setHours(10, 30, 0, 0)), // Today at 10:30 AM
+      end: new Date(new Date().setHours(13, 0, 0, 0)), // Today at 1:00 PM
     },
-    nextReviewBatch: new Date('2025-12-07T14:15:00'),
+    nextReviewBatch: new Date(new Date().setHours(14, 15, 0, 0)), // Today at 2:15 PM
     agentHoursInProgress: 14,
   } as Forecast,
 }
@@ -190,35 +190,35 @@ export const mockNotificationHistory: Notification[] = [
     id: 'n1',
     agentName: 'Parker',
     title: 'RFE #67 triage complete', // Easter egg!
-    createdAt: new Date('2025-12-07T12:52:00'),
+    createdAt: new Date(Date.now() - 3600000), // 1 hour ago
     status: 'dismissed',
   },
   {
     id: 'n2',
     agentName: 'Phoenix',
     title: 'Test suite ready for review',
-    createdAt: new Date('2025-12-07T11:47:00'),
+    createdAt: new Date(Date.now() - 2 * 3600000), // 2 hours ago
     status: 'reviewed',
   },
   {
     id: 'n3',
     agentName: 'Archie',
     title: 'Schema retry successful',
-    createdAt: new Date('2025-12-07T10:15:00'),
+    createdAt: new Date(Date.now() - 4 * 3600000), // 4 hours ago
     status: 'reviewed',
   },
   {
     id: 'n4',
     agentName: 'Taylor',
     title: 'PR #127 merged successfully',
-    createdAt: new Date('2025-12-06T16:30:00'),
+    createdAt: new Date(Date.now() - 18 * 3600000), // 18 hours ago (yesterday afternoon)
     status: 'reviewed',
   },
   {
     id: 'n5',
     agentName: 'Morgan',
     title: 'Build failed - Node version mismatch',
-    createdAt: new Date('2025-12-06T14:22:00'),
+    createdAt: new Date(Date.now() - 20 * 3600000), // 20 hours ago (yesterday afternoon)
     status: 'dismissed',
   },
 ]