feat: integrate theme and i18n across all screens

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-21 00:05:14 +01:00
parent f17125e231
commit f80798069b
17 changed files with 3127 additions and 2402 deletions
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@@ -2,39 +2,50 @@
 * TabataFit Tab Layout
 * Native iOS tabs with liquid glass effect
 * 5 tabs: Home, Workouts, Activity, Browse, Profile
+ * Redirects to onboarding if not completed
 */

+import { Redirect } from 'expo-router'
 import { NativeTabs, Icon, Label } from 'expo-router/unstable-native-tabs'
+import { useTranslation } from 'react-i18next'
 import { BRAND } from '@/src/shared/constants/colors'
+import { useUserStore } from '@/src/shared/stores'

 export default function TabLayout() {
+  const { t } = useTranslation('screens')
+  const onboardingCompleted = useUserStore((s) => s.profile.onboardingCompleted)
+
+  if (!onboardingCompleted) {
+    return <Redirect href="/onboarding" />
+  }
+
  return (
    <NativeTabs
      tintColor={BRAND.PRIMARY}
    >
      <NativeTabs.Trigger name="index">
        <Icon sf={{ default: 'house', selected: 'house.fill' }} />
-        <Label>Home</Label>
+        <Label>{t('tabs.home')}</Label>
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="workouts">
        <Icon sf={{ default: 'flame', selected: 'flame.fill' }} />
-        <Label>Workouts</Label>
+        <Label>{t('tabs.workouts')}</Label>
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="activity">
        <Icon sf={{ default: 'chart.bar', selected: 'chart.bar.fill' }} />
-        <Label>Activity</Label>
+        <Label>{t('tabs.activity')}</Label>
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="browse">
        <Icon sf={{ default: 'square.grid.2x2', selected: 'square.grid.2x2.fill' }} />
-        <Label>Browse</Label>
+        <Label>{t('tabs.browse')}</Label>
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="profile">
        <Icon sf={{ default: 'person', selected: 'person.fill' }} />
-        <Label>Profile</Label>
+        <Label>{t('tabs.profile')}</Label>
      </NativeTabs.Trigger>
    </NativeTabs>
  )
--- a/app/(tabs)/activity.tsx
+++ b/app/(tabs)/activity.tsx
@@ -1,62 +1,181 @@
 /**
 * TabataFit Activity Screen
- * React Native + SwiftUI Islands — wired to shared data
+ * Premium stats dashboard — streak, rings, weekly chart, history
 */

-import { View, StyleSheet, ScrollView, Dimensions, Text as RNText } from 'react-native'
+import { View, StyleSheet, ScrollView, Dimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { LinearGradient } from 'expo-linear-gradient'
 import { BlurView } from 'expo-blur'
 import Ionicons from '@expo/vector-icons/Ionicons'
-import {
-  Host,
-  Gauge,
-  Text,
-  HStack,
-  VStack,
-  Chart,
-  List,
-} from '@expo/ui/swift-ui'

 import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useActivityStore, getWeeklyActivity } from '@/src/shared/stores'
 import { getWorkoutById } from '@/src/shared/data'
 import { ACHIEVEMENTS } from '@/src/shared/data'
 import { StyledText } from '@/src/shared/components/StyledText'

-import {
-  BRAND,
-  DARK,
-  TEXT as TEXT_COLORS,
-  GLASS,
-  GRADIENTS,
-} from '@/src/shared/constants/colors'
+import { useThemeColors, BRAND, PHASE, GRADIENTS } from '@/src/shared/theme'
+import type { ThemeColors } from '@/src/shared/theme/types'
 import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
 import { RADIUS } from '@/src/shared/constants/borderRadius'

 const { width: SCREEN_WIDTH } = Dimensions.get('window')

-const FONTS = {
-  LARGE_TITLE: 34,
-  TITLE_2: 22,
-  SUBHEADLINE: 15,
-  CAPTION_1: 12,
+// ═══════════════════════════════════════════════════════════════════════════
+// STAT RING — Custom circular progress (pure RN, no SwiftUI)
+// ═══════════════════════════════════════════════════════════════════════════
+
+function StatRing({
+  value,
+  max,
+  color,
+  size = 64,
+}: {
+  value: number
+  max: number
+  color: string
+  size?: number
+}) {
+  const colors = useThemeColors()
+  const strokeWidth = 5
+  const radius = (size - strokeWidth) / 2
+  const circumference = 2 * Math.PI * radius
+  const progress = Math.min(value / max, 1)
+  const strokeDashoffset = circumference * (1 - progress)
+
+  // We'll use a View-based ring since SVG isn't available
+  // Use border trick for a circular progress indicator
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      {/* Track */}
+      <View
+        style={{
+          position: 'absolute',
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          borderWidth: strokeWidth,
+          borderColor: colors.bg.overlay2,
+        }}
+      />
+      {/* Fill — simplified: show a colored ring proportional to progress */}
+      <View
+        style={{
+          position: 'absolute',
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderTopColor: progress > 0.25 ? color : 'transparent',
+          borderRightColor: progress > 0.5 ? color : 'transparent',
+          borderBottomColor: progress > 0.75 ? color : 'transparent',
+          borderLeftColor: progress > 0 ? color : 'transparent',
+          transform: [{ rotate: '-90deg' }],
+          opacity: progress > 0 ? 1 : 0.3,
+        }}
+      />
+    </View>
+  )
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// STAT CARD
+// ═══════════════════════════════════════════════════════════════════════════
+
+function StatCard({
+  label,
+  value,
+  max,
+  color,
+  icon,
+}: {
+  label: string
+  value: number
+  max: number
+  color: string
+  icon: keyof typeof Ionicons.glyphMap
+}) {
+  const colors = useThemeColors()
+  const styles = useMemo(() => createStyles(colors), [colors])
+  return (
+    <View style={styles.statCard}>
+      <BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
+      <View style={styles.statCardInner}>
+        <StatRing value={value} max={max} color={color} size={52} />
+        <View style={{ flex: 1, marginLeft: SPACING[3] }}>
+          <StyledText size={24} weight="bold" color={colors.text.primary}>
+            {String(value)}
+          </StyledText>
+          <StyledText size={12} color={colors.text.tertiary}>
+            {label}
+          </StyledText>
+        </View>
+        <Ionicons name={icon} size={18} color={color} />
+      </View>
+    </View>
+  )
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// WEEKLY BAR
+// ═══════════════════════════════════════════════════════════════════════════
+
+function WeeklyBar({
+  day,
+  completed,
+  isToday,
+}: {
+  day: string
+  completed: boolean
+  isToday: boolean
+}) {
+  const colors = useThemeColors()
+  const styles = useMemo(() => createStyles(colors), [colors])
+  return (
+    <View style={styles.weekBarColumn}>
+      <View style={[styles.weekBar, completed && styles.weekBarFilled]}>
+        {completed && (
+          <LinearGradient
+            colors={[BRAND.PRIMARY, BRAND.PRIMARY_LIGHT]}
+            style={[StyleSheet.absoluteFill, { borderRadius: 4 }]}
+          />
+        )}
+      </View>
+      <StyledText
+        size={11}
+        weight={isToday ? 'bold' : 'regular'}
+        color={isToday ? colors.text.primary : colors.text.hint}
+      >
+        {day}
+      </StyledText>
+    </View>
+  )
 }

 // ═══════════════════════════════════════════════════════════════════════════
 // MAIN SCREEN
 // ═══════════════════════════════════════════════════════════════════════════

+const DAY_KEYS = ['days.sun', 'days.mon', 'days.tue', 'days.wed', 'days.thu', 'days.fri', 'days.sat'] as const
+
 export default function ActivityScreen() {
+  const { t } = useTranslation()
  const insets = useSafeAreaInsets()
+  const colors = useThemeColors()
+  const styles = useMemo(() => createStyles(colors), [colors])
  const streak = useActivityStore((s) => s.streak)
  const history = useActivityStore((s) => s.history)
  const totalWorkouts = history.length
  const totalMinutes = useMemo(() => history.reduce((sum, r) => sum + r.durationMinutes, 0), [history])
  const totalCalories = useMemo(() => history.reduce((sum, r) => sum + r.calories, 0), [history])
-  const recentWorkouts = useMemo(() => history.slice(0, 3), [history])
+  const recentWorkouts = useMemo(() => history.slice(0, 5), [history])
  const weeklyActivity = useMemo(() => getWeeklyActivity(history), [history])

+  const today = new Date().getDay() // 0=Sun
+
  // Check achievements
  const unlockedAchievements = ACHIEVEMENTS.filter(a => {
    switch (a.type) {
@@ -67,18 +186,17 @@ export default function ActivityScreen() {
      default: return false
    }
  })
-  const displayAchievements = ACHIEVEMENTS.slice(0, 5).map(a => ({
+  const displayAchievements = ACHIEVEMENTS.slice(0, 4).map(a => ({
    ...a,
    unlocked: unlockedAchievements.some(u => u.id === a.id),
  }))

-  // Format recent workout dates
  const formatDate = (timestamp: number) => {
    const now = Date.now()
    const diff = now - timestamp
-    if (diff < 86400000) return 'Today'
-    if (diff < 172800000) return 'Yesterday'
-    return Math.floor(diff / 86400000) + ' days ago'
+    if (diff < 86400000) return t('screens:activity.today')
+    if (diff < 172800000) return t('screens:activity.yesterday')
+    return t('screens:activity.daysAgo', { count: Math.floor(diff / 86400000) })
  }

  return (
@@ -89,7 +207,14 @@ export default function ActivityScreen() {
        showsVerticalScrollIndicator={false}
      >
        {/* Header */}
-        <StyledText size={FONTS.LARGE_TITLE} weight="bold" color={TEXT_COLORS.PRIMARY}>Activity</StyledText>
+        <StyledText
+          size={34}
+          weight="bold"
+          color={colors.text.primary}
+          style={{ marginBottom: SPACING[6] }}
+        >
+          {t('screens:activity.title')}
+        </StyledText>

        {/* Streak Banner */}
        <View style={styles.streakBanner}>
@@ -99,119 +224,154 @@ export default function ActivityScreen() {
            end={{ x: 1, y: 1 }}
            style={StyleSheet.absoluteFill}
          />
-          <View style={styles.streakContent}>
-            <Ionicons name="flame" size={32} color={TEXT_COLORS.PRIMARY} />
-            <View style={styles.streakText}>
-              <StyledText size={FONTS.TITLE_2} weight="bold" color={TEXT_COLORS.PRIMARY}>
-                {(streak.current || 0) + ' Day Streak'}
+          <View style={styles.streakRow}>
+            <View style={styles.streakIconWrap}>
+              <Ionicons name="flame" size={28} color="#FFFFFF" />
+            </View>
+            <View style={{ flex: 1 }}>
+              <StyledText size={28} weight="bold" color="#FFFFFF">
+                {String(streak.current || 0)}
              </StyledText>
-              <StyledText size={FONTS.SUBHEADLINE} color={TEXT_COLORS.SECONDARY}>
-                {streak.current > 0 ? 'Keep it going!' : 'Start your streak today!'}
+              <StyledText size={13} color="rgba(255,255,255,0.8)">
+                {t('screens:activity.dayStreak')}
+              </StyledText>
+            </View>
+            <View style={styles.streakMeta}>
+              <StyledText size={11} color="rgba(255,255,255,0.6)">
+                {t('screens:activity.longest')}
+              </StyledText>
+              <StyledText size={20} weight="bold" color="#FFFFFF">
+                {String(streak.longest)}
              </StyledText>
            </View>
          </View>
        </View>

-        {/* SwiftUI Island: Stats Gauges */}
-        <Host matchContents useViewportSizeMeasurement colorScheme="dark" style={styles.statsIsland}>
-          <HStack spacing={12}>
-            <VStack spacing={4}>
-              <Gauge
-                type="circularCapacity"
-                current={{ value: Math.min(totalWorkouts / 100, 1), label: String(totalWorkouts) }}
-                color={BRAND.PRIMARY}
-              />
-              <Text size={11} color={TEXT_COLORS.TERTIARY}>Workouts</Text>
-            </VStack>
-            <VStack spacing={4}>
-              <Gauge
-                type="circularCapacity"
-                current={{ value: Math.min(totalMinutes / 300, 1), label: String(totalMinutes) }}
-                color="#5AC8FA"
-              />
-              <Text size={11} color={TEXT_COLORS.TERTIARY}>Minutes</Text>
-            </VStack>
-            <VStack spacing={4}>
-              <Gauge
-                type="circularCapacity"
-                current={{ value: Math.min(totalCalories / 5000, 1), label: String(totalCalories) }}
-                color="#FFD60A"
-              />
-              <Text size={11} color={TEXT_COLORS.TERTIARY}>Calories</Text>
-            </VStack>
-            <VStack spacing={4}>
-              <Gauge
-                type="circularCapacity"
-                current={{ value: Math.min(streak.longest / 30, 1), label: String(streak.longest) }}
-                color="#30D158"
-              />
-              <Text size={11} color={TEXT_COLORS.TERTIARY}>Best Streak</Text>
-            </VStack>
-          </HStack>
-        </Host>
-
-        {/* SwiftUI Island: This Week Chart */}
-        <View style={styles.section}>
-          <StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT_COLORS.PRIMARY}>This Week</StyledText>
-          <Host matchContents useViewportSizeMeasurement colorScheme="dark" style={styles.chartIsland}>
-            <Chart
-              type="bar"
-              data={weeklyActivity.map(d => ({
-                x: d.date,
-                y: d.completed ? 1 : 0,
-                color: d.completed ? BRAND.PRIMARY : '#333333',
-              }))}
-              barStyle={{ cornerRadius: 4 }}
-              style={{ height: 160 }}
-            />
-          </Host>
+        {/* Stats Grid — 2x2 */}
+        <View style={styles.statsGrid}>
+          <StatCard
+            label={t('screens:activity.workouts')}
+            value={totalWorkouts}
+            max={100}
+            color={BRAND.PRIMARY}
+            icon="barbell-outline"
+          />
+          <StatCard
+            label={t('screens:activity.minutes')}
+            value={totalMinutes}
+            max={300}
+            color={PHASE.REST}
+            icon="time-outline"
+          />
+          <StatCard
+            label={t('screens:activity.calories')}
+            value={totalCalories}
+            max={5000}
+            color={BRAND.SECONDARY}
+            icon="flash-outline"
+          />
+          <StatCard
+            label={t('screens:activity.bestStreak')}
+            value={streak.longest}
+            max={30}
+            color={BRAND.SUCCESS}
+            icon="trending-up-outline"
+          />
        </View>

-        {/* SwiftUI Island: Recent Workouts */}
+        {/* This Week */}
+        <View style={styles.section}>
+          <StyledText size={20} weight="semibold" color={colors.text.primary} style={{ marginBottom: SPACING[4] }}>
+            {t('screens:activity.thisWeek')}
+          </StyledText>
+          <View style={styles.weekCard}>
+            <BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
+            <View style={styles.weekBarsRow}>
+              {weeklyActivity.map((d, i) => (
+                <WeeklyBar
+                  key={i}
+                  day={t(DAY_KEYS[i])}
+                  completed={d.completed}
+                  isToday={i === today}
+                />
+              ))}
+            </View>
+            <View style={styles.weekSummary}>
+              <StyledText size={13} color={colors.text.tertiary}>
+                {t('screens:activity.ofDays', { completed: weeklyActivity.filter(d => d.completed).length })}
+              </StyledText>
+            </View>
+          </View>
+        </View>
+
+        {/* Recent Workouts */}
        {recentWorkouts.length > 0 && (
          <View style={styles.section}>
-            <StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT_COLORS.PRIMARY}>Recent</StyledText>
-            <Host useViewportSizeMeasurement colorScheme="dark" style={{ height: 44 * recentWorkouts.length + 55 }}>
-              <List listStyle="insetGrouped" scrollEnabled={false}>
-                {recentWorkouts.map((result) => {
-                  const workout = getWorkoutById(result.workoutId)
-                  return (
-                    <HStack key={result.id} spacing={12}>
-                      <Text color={BRAND.PRIMARY} weight="bold">{workout?.title ?? 'Workout'}</Text>
-                      <Text size={13} color={TEXT_COLORS.TERTIARY}>{formatDate(result.completedAt)}</Text>
-                      <Text size={13} color={TEXT_COLORS.PRIMARY}>{result.durationMinutes + ' min'}</Text>
-                      <Text size={13} color={BRAND.PRIMARY}>{result.calories + ' cal'}</Text>
-                    </HStack>
-                  )
-                })}
-              </List>
-            </Host>
+            <StyledText size={20} weight="semibold" color={colors.text.primary} style={{ marginBottom: SPACING[4] }}>
+              {t('screens:activity.recent')}
+            </StyledText>
+            <View style={styles.recentCard}>
+              <BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
+              {recentWorkouts.map((result, idx) => {
+                const workout = getWorkoutById(result.workoutId)
+                const workoutTitle = workout ? t(`content:workouts.${workout.id}`, { defaultValue: workout.title }) : t('screens:activity.workouts')
+                return (
+                  <View key={result.id}>
+                    <View style={styles.recentRow}>
+                      <View style={styles.recentDot}>
+                        <View style={[styles.dot, { backgroundColor: BRAND.PRIMARY }]} />
+                      </View>
+                      <View style={{ flex: 1 }}>
+                        <StyledText size={15} weight="semibold" color={colors.text.primary}>
+                          {workoutTitle}
+                        </StyledText>
+                        <StyledText size={12} color={colors.text.tertiary}>
+                          {formatDate(result.completedAt) + ' \u00B7 ' + t('units.minUnit', { count: result.durationMinutes })}
+                        </StyledText>
+                      </View>
+                      <StyledText size={14} weight="semibold" color={BRAND.PRIMARY}>
+                        {t('units.calUnit', { count: result.calories })}
+                      </StyledText>
+                    </View>
+                    {idx < recentWorkouts.length - 1 && <View style={styles.recentDivider} />}
+                  </View>
+                )
+              })}
+            </View>
          </View>
        )}

        {/* Achievements */}
        <View style={styles.section}>
-          <StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT_COLORS.PRIMARY}>Achievements</StyledText>
-          <View style={styles.achievementsGrid}>
-            {displayAchievements.map((achievement) => (
-              <View
-                key={achievement.id}
-                style={[styles.achievementBadge, !achievement.unlocked && styles.achievementLocked]}
-              >
-                <BlurView intensity={GLASS.BLUR_LIGHT} tint="dark" style={StyleSheet.absoluteFill} />
-                <View style={[styles.achievementIcon, !achievement.unlocked && styles.achievementIconLocked]}>
+          <StyledText size={20} weight="semibold" color={colors.text.primary} style={{ marginBottom: SPACING[4] }}>
+            {t('screens:activity.achievements')}
+          </StyledText>
+          <View style={styles.achievementsRow}>
+            {displayAchievements.map((a) => (
+              <View key={a.id} style={styles.achievementCard}>
+                <BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
+                <View
+                  style={[
+                    styles.achievementIcon,
+                    a.unlocked
+                      ? { backgroundColor: 'rgba(255, 107, 53, 0.15)' }
+                      : { backgroundColor: 'rgba(255, 255, 255, 0.04)' },
+                  ]}
+                >
                  <Ionicons
-                    name={achievement.unlocked ? 'trophy' : 'lock-closed'}
-                    size={24}
-                    color={achievement.unlocked ? BRAND.PRIMARY : TEXT_COLORS.TERTIARY}
+                    name={a.unlocked ? 'trophy' : 'lock-closed'}
+                    size={22}
+                    color={a.unlocked ? BRAND.PRIMARY : colors.text.hint}
                  />
                </View>
                <StyledText
-                  size={FONTS.CAPTION_1}
-                  weight={achievement.unlocked ? 'semibold' : 'regular'}
-                  color={TEXT_COLORS.PRIMARY}
+                  size={11}
+                  weight="semibold"
+                  color={a.unlocked ? colors.text.primary : colors.text.hint}
+                  numberOfLines={1}
+                  style={{ marginTop: SPACING[2], textAlign: 'center' }}
                >
-                  {achievement.title}
+                  {t(`content:achievements.${a.id}.title`, { defaultValue: a.title })}
                </StyledText>
              </View>
            ))}
@@ -226,81 +386,168 @@ export default function ActivityScreen() {
 // STYLES
 // ═══════════════════════════════════════════════════════════════════════════

-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: DARK.BASE,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  scrollContent: {
-    paddingHorizontal: LAYOUT.SCREEN_PADDING,
-  },
+const CARD_HALF = (SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2 - SPACING[3]) / 2

-  // Streak Banner
-  streakBanner: {
-    height: 80,
-    borderRadius: RADIUS.GLASS_CARD,
-    overflow: 'hidden',
-    marginBottom: SPACING[6],
-    marginTop: SPACING[4],
-  },
-  streakContent: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: SPACING[5],
-    gap: SPACING[4],
-  },
-  streakText: {
-    flex: 1,
-  },
+function createStyles(colors: ThemeColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.bg.base,
+    },
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {
+      paddingHorizontal: LAYOUT.SCREEN_PADDING,
+    },

-  // Stats Island
-  statsIsland: {
-    marginBottom: SPACING[8],
-  },
+    // Streak
+    streakBanner: {
+      borderRadius: RADIUS.GLASS_CARD,
+      overflow: 'hidden',
+      marginBottom: SPACING[5],
+      ...colors.shadow.md,
+    },
+    streakRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: SPACING[5],
+      paddingVertical: SPACING[5],
+      gap: SPACING[4],
+    },
+    streakIconWrap: {
+      width: 48,
+      height: 48,
+      borderRadius: 24,
+      backgroundColor: 'rgba(255,255,255,0.15)',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    streakMeta: {
+      alignItems: 'center',
+      backgroundColor: 'rgba(255,255,255,0.1)',
+      paddingHorizontal: SPACING[4],
+      paddingVertical: SPACING[2],
+      borderRadius: RADIUS.MD,
+    },

-  // Chart Island
-  chartIsland: {
-    marginTop: SPACING[2],
-  },
+    // Stats 2x2
+    statsGrid: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: SPACING[3],
+      marginBottom: SPACING[6],
+    },
+    statCard: {
+      width: CARD_HALF,
+      borderRadius: RADIUS.LG,
+      overflow: 'hidden',
+      borderWidth: 1,
+      borderColor: colors.bg.overlay2,
+    },
+    statCardInner: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: SPACING[4],
+    },

-  // Section
-  section: {
-    marginBottom: SPACING[6],
-  },
+    // Section
+    section: {
+      marginBottom: SPACING[6],
+    },

-  // Achievements
-  achievementsGrid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: SPACING[3],
-  },
-  achievementBadge: {
-    width: (SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2 - SPACING[3] * 2) / 3,
-    aspectRatio: 1,
-    borderRadius: RADIUS.LG,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.1)',
-    overflow: 'hidden',
-  },
-  achievementLocked: {
-    opacity: 0.5,
-  },
-  achievementIcon: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    backgroundColor: 'rgba(255, 107, 53, 0.15)',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: SPACING[2],
-  },
-  achievementIconLocked: {
-    backgroundColor: 'rgba(255, 255, 255, 0.05)',
-  },
-})
+    // Weekly
+    weekCard: {
+      borderRadius: RADIUS.LG,
+      overflow: 'hidden',
+      borderWidth: 1,
+      borderColor: colors.bg.overlay2,
+      paddingTop: SPACING[5],
+      paddingBottom: SPACING[4],
+    },
+    weekBarsRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-around',
+      alignItems: 'flex-end',
+      paddingHorizontal: SPACING[4],
+      height: 100,
+    },
+    weekBarColumn: {
+      alignItems: 'center',
+      flex: 1,
+      gap: SPACING[2],
+    },
+    weekBar: {
+      width: 24,
+      height: 60,
+      borderRadius: 4,
+      backgroundColor: colors.border.glassLight,
+      overflow: 'hidden',
+    },
+    weekBarFilled: {
+      backgroundColor: BRAND.PRIMARY,
+    },
+    weekSummary: {
+      alignItems: 'center',
+      marginTop: SPACING[3],
+      paddingTop: SPACING[3],
+      borderTopWidth: StyleSheet.hairlineWidth,
+      borderTopColor: colors.bg.overlay2,
+      marginHorizontal: SPACING[4],
+    },
+
+    // Recent
+    recentCard: {
+      borderRadius: RADIUS.LG,
+      overflow: 'hidden',
+      borderWidth: 1,
+      borderColor: colors.bg.overlay2,
+      paddingVertical: SPACING[2],
+    },
+    recentRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: SPACING[4],
+      paddingVertical: SPACING[3],
+    },
+    recentDot: {
+      width: 24,
+      alignItems: 'center',
+      marginRight: SPACING[3],
+    },
+    dot: {
+      width: 8,
+      height: 8,
+      borderRadius: 4,
+    },
+    recentDivider: {
+      height: StyleSheet.hairlineWidth,
+      backgroundColor: colors.border.glassLight,
+      marginLeft: SPACING[4] + 24 + SPACING[3],
+    },
+
+    // Achievements
+    achievementsRow: {
+      flexDirection: 'row',
+      gap: SPACING[3],
+    },
+    achievementCard: {
+      flex: 1,
+      aspectRatio: 0.9,
+      borderRadius: RADIUS.LG,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderWidth: 1,
+      borderColor: colors.bg.overlay2,
+      overflow: 'hidden',
+      paddingHorizontal: SPACING[1],
+    },
+    achievementIcon: {
+      width: 44,
+      height: 44,
+      borderRadius: 22,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  })
+}
--- a/app/(tabs)/browse.tsx
+++ b/app/(tabs)/browse.tsx
@@ -10,6 +10,8 @@ import { LinearGradient } from 'expo-linear-gradient'
 import { BlurView } from 'expo-blur'
 import Ionicons from '@expo/vector-icons/Ionicons'

+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useHaptics } from '@/src/shared/hooks'
 import {
  COLLECTIONS,
@@ -17,17 +19,12 @@ import {
  getFeaturedCollection,
  COLLECTION_COLORS,
  WORKOUTS,
-  getTrainerById,
 } from '@/src/shared/data'
+import { useTranslatedCollections, useTranslatedPrograms, useTranslatedWorkouts } from '@/src/shared/data/useTranslatedData'
 import { StyledText } from '@/src/shared/components/StyledText'

-import {
-  BRAND,
-  DARK,
-  TEXT,
-  GLASS,
-  SHADOW,
-} from '@/src/shared/constants/colors'
+import { useThemeColors, BRAND } from '@/src/shared/theme'
+import type { ThemeColors } from '@/src/shared/theme/types'
 import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
 import { RADIUS } from '@/src/shared/constants/borderRadius'

@@ -61,11 +58,17 @@ const NEW_RELEASES = WORKOUTS.slice(-4)
 // ═══════════════════════════════════════════════════════════════════════════

 export default function BrowseScreen() {
+  const { t } = useTranslation()
  const insets = useSafeAreaInsets()
  const router = useRouter()
  const haptics = useHaptics()
+  const colors = useThemeColors()
+  const styles = useMemo(() => createStyles(colors), [colors])

  const featuredCollection = getFeaturedCollection()
+  const translatedCollections = useTranslatedCollections(COLLECTIONS)
+  const translatedPrograms = useTranslatedPrograms(PROGRAMS)
+  const translatedNewReleases = useTranslatedWorkouts(NEW_RELEASES)

  const handleWorkoutPress = (id: string) => {
    haptics.buttonTap()
@@ -85,7 +88,7 @@ export default function BrowseScreen() {
        showsVerticalScrollIndicator={false}
      >
        {/* Header */}
-        <StyledText size={FONTS.LARGE_TITLE} weight="bold" color={TEXT.PRIMARY}>Browse</StyledText>
+        <StyledText size={FONTS.LARGE_TITLE} weight="bold" color={colors.text.primary}>{t('screens:browse.title')}</StyledText>

        {/* Featured Collection */}
        {featuredCollection && (
@@ -98,18 +101,18 @@ export default function BrowseScreen() {
            />

            <View style={styles.featuredBadge}>
-              <Ionicons name="star" size={12} color={TEXT.PRIMARY} />
-              <RNText style={styles.featuredBadgeText}>FEATURED</RNText>
+              <Ionicons name="star" size={12} color="#FFFFFF" />
+              <RNText style={styles.featuredBadgeText}>{t('screens:browse.featured')}</RNText>
            </View>

            <View style={styles.featuredInfo}>
-              <StyledText size={FONTS.TITLE} weight="bold" color={TEXT.PRIMARY}>{featuredCollection.title}</StyledText>
-              <StyledText size={FONTS.HEADLINE} color={TEXT.SECONDARY}>{featuredCollection.description}</StyledText>
+              <StyledText size={FONTS.TITLE} weight="bold" color="#FFFFFF">{t(`content:collections.${featuredCollection.id}.title`, { defaultValue: featuredCollection.title })}</StyledText>
+              <StyledText size={FONTS.HEADLINE} color="rgba(255,255,255,0.8)">{t(`content:collections.${featuredCollection.id}.description`, { defaultValue: featuredCollection.description })}</StyledText>

              <View style={styles.featuredStats}>
                <View style={styles.featuredStat}>
-                  <Ionicons name="fitness" size={14} color={TEXT.PRIMARY} />
-                  <StyledText size={FONTS.CAPTION_1} color={TEXT.PRIMARY}>{featuredCollection.workoutIds.length + ' workouts'}</StyledText>
+                  <Ionicons name="fitness" size={14} color="#FFFFFF" />
+                  <StyledText size={FONTS.CAPTION_1} color="#FFFFFF">{t('plurals.workout', { count: featuredCollection.workoutIds.length })}</StyledText>
                </View>
              </View>
            </View>
@@ -118,9 +121,9 @@ export default function BrowseScreen() {

        {/* Collections Grid */}
        <View style={styles.section}>
-          <StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>Collections</StyledText>
+          <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>{t('screens:browse.collections')}</StyledText>
          <View style={styles.collectionsGrid}>
-            {COLLECTIONS.map((collection) => {
+            {translatedCollections.map((collection) => {
              const color = COLLECTION_COLORS[collection.id] ?? BRAND.PRIMARY
              return (
                <Pressable
@@ -128,15 +131,15 @@ export default function BrowseScreen() {
                  style={styles.collectionCard}
                  onPress={() => handleCollectionPress(collection.id)}
                >
-                  <BlurView intensity={GLASS.BLUR_LIGHT} tint="dark" style={StyleSheet.absoluteFill} />
+                  <BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
                  <View style={[styles.collectionIconBg, { backgroundColor: `${color}20` }]}>
                    <RNText style={styles.collectionEmoji}>{collection.icon}</RNText>
                  </View>
-                  <StyledText size={FONTS.SUBHEADLINE} weight="semibold" color={TEXT.PRIMARY} numberOfLines={1}>
+                  <StyledText size={FONTS.SUBHEADLINE} weight="semibold" color={colors.text.primary} numberOfLines={1}>
                    {collection.title}
                  </StyledText>
                  <StyledText size={FONTS.CAPTION_1} color={color}>
-                    {collection.workoutIds.length + ' workouts'}
+                    {t('plurals.workout', { count: collection.workoutIds.length })}
                  </StyledText>
                </Pressable>
              )
@@ -147,34 +150,34 @@ export default function BrowseScreen() {
        {/* Programs */}
        <View style={styles.section}>
          <View style={styles.sectionHeader}>
-            <StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>Programs</StyledText>
-            <TextButton>See All</TextButton>
+            <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>{t('screens:browse.programs')}</StyledText>
+            <TextButton>{t('seeAll')}</TextButton>
          </View>
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            contentContainerStyle={styles.programsScroll}
          >
-            {PROGRAMS.map((program) => (
+            {translatedPrograms.map((program) => (
              <View key={program.id} style={styles.programCard}>
-                <BlurView intensity={GLASS.BLUR_MEDIUM} tint="dark" style={StyleSheet.absoluteFill} />
+                <BlurView intensity={colors.glass.blurMedium} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />

                <View style={styles.programHeader}>
                  <View style={styles.programLevelBadge}>
-                    <StyledText size={FONTS.CAPTION_2} weight="semibold" color={TEXT.PRIMARY}>{program.level}</StyledText>
+                    <StyledText size={FONTS.CAPTION_2} weight="semibold" color={colors.text.primary}>{t(`levels.${program.level.toLowerCase()}`)}</StyledText>
                  </View>
                </View>

-                <StyledText size={FONTS.HEADLINE} weight="semibold" color={TEXT.PRIMARY}>{program.title}</StyledText>
+                <StyledText size={FONTS.HEADLINE} weight="semibold" color={colors.text.primary}>{program.title}</StyledText>

                <View style={styles.programMeta}>
                  <View style={styles.programMetaItem}>
-                    <Ionicons name="calendar" size={14} color={TEXT.TERTIARY} />
-                    <StyledText size={FONTS.CAPTION_1} color={TEXT.TERTIARY}>{program.weeks + ' weeks'}</StyledText>
+                    <Ionicons name="calendar" size={14} color={colors.text.tertiary} />
+                    <StyledText size={FONTS.CAPTION_1} color={colors.text.tertiary}>{t('screens:browse.weeksCount', { count: program.weeks })}</StyledText>
                  </View>
                  <View style={styles.programMetaItem}>
-                    <Ionicons name="repeat" size={14} color={TEXT.TERTIARY} />
-                    <StyledText size={FONTS.CAPTION_1} color={TEXT.TERTIARY}>{program.workoutsPerWeek + 'x /week'}</StyledText>
+                    <Ionicons name="repeat" size={14} color={colors.text.tertiary} />
+                    <StyledText size={FONTS.CAPTION_1} color={colors.text.tertiary}>{t('screens:browse.timesPerWeek', { count: program.workoutsPerWeek })}</StyledText>
                  </View>
                </View>
              </View>
@@ -185,29 +188,26 @@ export default function BrowseScreen() {
        {/* New Releases */}
        <View style={styles.section}>
          <View style={styles.sectionHeader}>
-            <StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>New Releases</StyledText>
+            <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>{t('screens:browse.newReleases')}</StyledText>
          </View>
-          {NEW_RELEASES.map((workout) => {
-            const trainer = getTrainerById(workout.trainerId)
-            return (
-              <Pressable
-                key={workout.id}
-                style={styles.releaseRow}
-                onPress={() => handleWorkoutPress(workout.id)}
-              >
-                <View style={[styles.releaseAvatar, { backgroundColor: trainer?.color ?? BRAND.PRIMARY }]}>
-                  <RNText style={styles.releaseInitial}>{trainer?.name[0] ?? 'T'}</RNText>
-                </View>
-                <View style={styles.releaseInfo}>
-                  <StyledText size={FONTS.HEADLINE} weight="semibold" color={TEXT.PRIMARY}>{workout.title}</StyledText>
-                  <StyledText size={FONTS.CAPTION_1} color={TEXT.TERTIARY}>
-                    {(trainer?.name ?? '') + ' \u00B7 ' + workout.duration + ' min \u00B7 ' + workout.level}
-                  </StyledText>
-                </View>
-                <Ionicons name="play-circle" size={32} color={BRAND.PRIMARY} />
-              </Pressable>
-            )
-          })}
+          {translatedNewReleases.map((workout) => (
+            <Pressable
+              key={workout.id}
+              style={styles.releaseRow}
+              onPress={() => handleWorkoutPress(workout.id)}
+            >
+              <View style={[styles.releaseAvatar, { backgroundColor: BRAND.PRIMARY }]}>
+                <Ionicons name="flame" size={20} color="#FFFFFF" />
+              </View>
+              <View style={styles.releaseInfo}>
+                <StyledText size={FONTS.HEADLINE} weight="semibold" color={colors.text.primary}>{workout.title}</StyledText>
+                <StyledText size={FONTS.CAPTION_1} color={colors.text.tertiary}>
+                  {t('durationLevel', { duration: workout.duration, level: t(`levels.${workout.level.toLowerCase()}`) })}
+                </StyledText>
+              </View>
+              <Ionicons name="play-circle" size={32} color={BRAND.PRIMARY} />
+            </Pressable>
+          ))}
        </View>
      </ScrollView>
    </View>
@@ -220,160 +220,162 @@ export default function BrowseScreen() {

 const COLLECTION_CARD_WIDTH = (SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2 - SPACING[3]) / 2

-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: DARK.BASE,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  scrollContent: {
-    paddingHorizontal: LAYOUT.SCREEN_PADDING,
-  },
+function createStyles(colors: ThemeColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.bg.base,
+    },
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {
+      paddingHorizontal: LAYOUT.SCREEN_PADDING,
+    },

-  // Featured Collection
-  featuredCard: {
-    height: 200,
-    borderRadius: RADIUS.GLASS_CARD,
-    overflow: 'hidden',
-    marginBottom: SPACING[8],
-    marginTop: SPACING[4],
-    ...SHADOW.lg,
-  },
-  featuredBadge: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-    paddingHorizontal: SPACING[2],
-    paddingVertical: SPACING[1],
-    borderRadius: RADIUS.SM,
-    alignSelf: 'flex-start',
-    margin: SPACING[4],
-    gap: SPACING[1],
-  },
-  featuredBadgeText: {
-    fontSize: 11,
-    fontWeight: 'bold',
-    color: TEXT.PRIMARY,
-  },
-  featuredInfo: {
-    position: 'absolute',
-    bottom: SPACING[5],
-    left: SPACING[5],
-    right: SPACING[5],
-  },
-  featuredStats: {
-    flexDirection: 'row',
-    gap: SPACING[4],
-    marginTop: SPACING[3],
-  },
-  featuredStat: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[1],
-  },
+    // Featured Collection
+    featuredCard: {
+      height: 200,
+      borderRadius: RADIUS.GLASS_CARD,
+      overflow: 'hidden',
+      marginBottom: SPACING[8],
+      marginTop: SPACING[4],
+      ...colors.shadow.lg,
+    },
+    featuredBadge: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: 'rgba(0, 0, 0, 0.3)',
+      paddingHorizontal: SPACING[2],
+      paddingVertical: SPACING[1],
+      borderRadius: RADIUS.SM,
+      alignSelf: 'flex-start',
+      margin: SPACING[4],
+      gap: SPACING[1],
+    },
+    featuredBadgeText: {
+      fontSize: 11,
+      fontWeight: 'bold',
+      color: '#FFFFFF',
+    },
+    featuredInfo: {
+      position: 'absolute',
+      bottom: SPACING[5],
+      left: SPACING[5],
+      right: SPACING[5],
+    },
+    featuredStats: {
+      flexDirection: 'row',
+      gap: SPACING[4],
+      marginTop: SPACING[3],
+    },
+    featuredStat: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: SPACING[1],
+    },

-  // Section
-  section: {
-    marginBottom: SPACING[6],
-  },
-  sectionHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: SPACING[4],
-  },
+    // Section
+    section: {
+      marginBottom: SPACING[6],
+    },
+    sectionHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: SPACING[4],
+    },

-  // Collections Grid
-  collectionsGrid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: SPACING[3],
-    marginTop: SPACING[3],
-  },
-  collectionCard: {
-    width: COLLECTION_CARD_WIDTH,
-    paddingVertical: SPACING[4],
-    paddingHorizontal: SPACING[3],
-    borderRadius: RADIUS.LG,
-    overflow: 'hidden',
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.1)',
-    gap: SPACING[1],
-  },
-  collectionIconBg: {
-    width: 44,
-    height: 44,
-    borderRadius: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: SPACING[2],
-  },
-  collectionEmoji: {
-    fontSize: 22,
-  },
+    // Collections Grid
+    collectionsGrid: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: SPACING[3],
+      marginTop: SPACING[3],
+    },
+    collectionCard: {
+      width: COLLECTION_CARD_WIDTH,
+      paddingVertical: SPACING[4],
+      paddingHorizontal: SPACING[3],
+      borderRadius: RADIUS.LG,
+      overflow: 'hidden',
+      borderWidth: 1,
+      borderColor: colors.border.glass,
+      gap: SPACING[1],
+    },
+    collectionIconBg: {
+      width: 44,
+      height: 44,
+      borderRadius: 12,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginBottom: SPACING[2],
+    },
+    collectionEmoji: {
+      fontSize: 22,
+    },

-  // Programs
-  programsScroll: {
-    gap: SPACING[3],
-  },
-  programCard: {
-    width: 200,
-    height: 140,
-    borderRadius: RADIUS.LG,
-    overflow: 'hidden',
-    padding: SPACING[4],
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.1)',
-  },
-  programHeader: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    marginBottom: SPACING[2],
-  },
-  programLevelBadge: {
-    backgroundColor: 'rgba(255, 107, 53, 0.2)',
-    paddingHorizontal: SPACING[2],
-    paddingVertical: SPACING[1],
-    borderRadius: RADIUS.SM,
-  },
-  programMeta: {
-    flexDirection: 'row',
-    gap: SPACING[3],
-    marginTop: SPACING[3],
-  },
-  programMetaItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[1],
-  },
+    // Programs
+    programsScroll: {
+      gap: SPACING[3],
+    },
+    programCard: {
+      width: 200,
+      height: 140,
+      borderRadius: RADIUS.LG,
+      overflow: 'hidden',
+      padding: SPACING[4],
+      borderWidth: 1,
+      borderColor: colors.border.glass,
+    },
+    programHeader: {
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      marginBottom: SPACING[2],
+    },
+    programLevelBadge: {
+      backgroundColor: 'rgba(255, 107, 53, 0.2)',
+      paddingHorizontal: SPACING[2],
+      paddingVertical: SPACING[1],
+      borderRadius: RADIUS.SM,
+    },
+    programMeta: {
+      flexDirection: 'row',
+      gap: SPACING[3],
+      marginTop: SPACING[3],
+    },
+    programMetaItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: SPACING[1],
+    },

-  // New Releases
-  releaseRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: SPACING[3],
-    paddingHorizontal: SPACING[4],
-    backgroundColor: DARK.SURFACE,
-    borderRadius: RADIUS.LG,
-    marginBottom: SPACING[2],
-    gap: SPACING[3],
-  },
-  releaseAvatar: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  releaseInitial: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: TEXT.PRIMARY,
-  },
-  releaseInfo: {
-    flex: 1,
-    gap: 2,
-  },
-})
+    // New Releases
+    releaseRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: SPACING[3],
+      paddingHorizontal: SPACING[4],
+      backgroundColor: colors.bg.surface,
+      borderRadius: RADIUS.LG,
+      marginBottom: SPACING[2],
+      gap: SPACING[3],
+    },
+    releaseAvatar: {
+      width: 44,
+      height: 44,
+      borderRadius: 22,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    releaseInitial: {
+      fontSize: 18,
+      fontWeight: '700',
+      color: '#FFFFFF',
+    },
+    releaseInfo: {
+      flex: 1,
+      gap: 2,
+    },
+  })
+}
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -11,25 +11,20 @@ import { BlurView } from 'expo-blur'
 import Ionicons from '@expo/vector-icons/Ionicons'

 import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useHaptics } from '@/src/shared/hooks'
 import { useUserStore, useActivityStore } from '@/src/shared/stores'
 import {
  getFeaturedWorkouts,
  getPopularWorkouts,
-  getTrainerById,
  COLLECTIONS,
  WORKOUTS,
 } from '@/src/shared/data'
+import { useTranslatedWorkouts, useTranslatedCollections } from '@/src/shared/data/useTranslatedData'
 import { StyledText } from '@/src/shared/components/StyledText'

-import {
-  BRAND,
-  DARK,
-  TEXT,
-  GLASS,
-  SHADOW,
-  GRADIENTS,
-} from '@/src/shared/constants/colors'
+import { useThemeColors, BRAND, GRADIENTS } from '@/src/shared/theme'
+import type { ThemeColors } from '@/src/shared/theme/types'
 import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
 import { RADIUS } from '@/src/shared/constants/borderRadius'

@@ -51,23 +46,20 @@ const FONTS = {
 // HELPERS
 // ═══════════════════════════════════════════════════════════════════════════

-function getGreeting() {
-  const hour = new Date().getHours()
-  if (hour < 12) return 'Good morning'
-  if (hour < 18) return 'Good afternoon'
-  return 'Good evening'
-}
-
 function PrimaryButton({ children, onPress }: { children: string; onPress?: () => void }) {
+  const colors = useThemeColors()
+  const styles = useMemo(() => createStyles(colors), [colors])
  return (
    <Pressable style={styles.primaryButton} onPress={onPress}>
-      <Ionicons name="play" size={16} color={TEXT.PRIMARY} style={styles.buttonIcon} />
+      <Ionicons name="play" size={16} color="#FFFFFF" style={styles.buttonIcon} />
      <RNText style={styles.primaryButtonText}>{children}</RNText>
    </Pressable>
  )
 }

 function PlainButton({ children, onPress }: { children: string; onPress?: () => void }) {
+  const colors = useThemeColors()
+  const styles = useMemo(() => createStyles(colors), [colors])
  return (
    <Pressable onPress={onPress}>
      <RNText style={styles.plainButtonText}>{children}</RNText>
@@ -80,16 +72,29 @@ function PlainButton({ children, onPress }: { children: string; onPress?: () =>
 // ═══════════════════════════════════════════════════════════════════════════

 export default function HomeScreen() {
+  const { t } = useTranslation()
  const insets = useSafeAreaInsets()
  const router = useRouter()
  const haptics = useHaptics()
+  const colors = useThemeColors()
+  const styles = useMemo(() => createStyles(colors), [colors])
  const userName = useUserStore((s) => s.profile.name)
  const history = useActivityStore((s) => s.history)
  const recentWorkouts = useMemo(() => history.slice(0, 3), [history])

  const featured = getFeaturedWorkouts()[0] ?? WORKOUTS[0]
-  const featuredTrainer = getTrainerById(featured.trainerId)
  const popular = getPopularWorkouts(4)
+  const translatedPopular = useTranslatedWorkouts(popular)
+  const translatedCollections = useTranslatedCollections(COLLECTIONS)
+
+  const greeting = (() => {
+    const hour = new Date().getHours()
+    if (hour < 12) return t('greetings.morning')
+    if (hour < 18) return t('greetings.afternoon')
+    return t('greetings.evening')
+  })()
+
+  const featuredTitle = t(`content:workouts.${featured.id}`, { defaultValue: featured.title })

  const handleWorkoutPress = (id: string) => {
    haptics.buttonTap()
@@ -105,11 +110,21 @@ export default function HomeScreen() {
      >
        {/* Header */}
        <View style={styles.header}>
-          <StyledText size={FONTS.LARGE_TITLE} weight="semibold" color={TEXT.PRIMARY}>
-            {getGreeting() + ', ' + userName}
-          </StyledText>
+          <View style={{ flex: 1, marginRight: SPACING[3] }}>
+            <StyledText size={FONTS.SUBHEADLINE} color={colors.text.tertiary}>
+              {greeting}
+            </StyledText>
+            <StyledText
+              size={FONTS.LARGE_TITLE}
+              weight="bold"
+              color={colors.text.primary}
+              numberOfLines={1}
+            >
+              {userName}
+            </StyledText>
+          </View>
          <Pressable style={styles.profileButton}>
-            <Ionicons name="person-circle-outline" size={32} color={TEXT.PRIMARY} />
+            <Ionicons name="person-circle-outline" size={32} color={colors.text.primary} />
          </Pressable>
        </View>

@@ -136,21 +151,21 @@ export default function HomeScreen() {
          />

          <View style={styles.featuredBadge}>
-            <RNText style={styles.featuredBadgeText}>🔥 FEATURED</RNText>
+            <RNText style={styles.featuredBadgeText}>{'🔥 ' + t('screens:home.featured')}</RNText>
          </View>

          <View style={styles.featuredContent}>
-            <StyledText size={FONTS.TITLE} weight="bold" color={TEXT.PRIMARY}>
-              {featured.title}
+            <StyledText size={FONTS.TITLE} weight="bold" color="#FFFFFF">
+              {featuredTitle}
            </StyledText>
-            <StyledText size={FONTS.SUBHEADLINE} color={TEXT.SECONDARY}>
-              {featured.duration + ' min • ' + featured.level + ' • ' + (featuredTrainer?.name ?? '')}
+            <StyledText size={FONTS.SUBHEADLINE} color="rgba(255,255,255,0.8)">
+              {t('workoutMeta', { duration: featured.duration, level: t(`levels.${featured.level.toLowerCase()}`), calories: featured.calories })}
            </StyledText>

            <View style={styles.featuredButtons}>
-              <PrimaryButton onPress={() => handleWorkoutPress(featured.id)}>START</PrimaryButton>
+              <PrimaryButton onPress={() => handleWorkoutPress(featured.id)}>{t('start')}</PrimaryButton>
              <Pressable style={styles.saveButton}>
-                <Ionicons name="heart-outline" size={24} color={TEXT.PRIMARY} />
+                <Ionicons name="heart-outline" size={24} color="#FFFFFF" />
              </Pressable>
            </View>
          </View>
@@ -160,8 +175,8 @@ export default function HomeScreen() {
        {recentWorkouts.length > 0 && (
          <View style={styles.section}>
            <View style={styles.sectionHeader}>
-              <StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>Recent</StyledText>
-              <PlainButton>See All</PlainButton>
+              <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>{t('screens:home.recent')}</StyledText>
+              <PlainButton>{t('seeAll')}</PlainButton>
            </View>
            <ScrollView
              horizontal
@@ -171,7 +186,7 @@ export default function HomeScreen() {
              {recentWorkouts.map((result) => {
                const workout = WORKOUTS.find(w => w.id === result.workoutId)
                if (!workout) return null
-                const trainer = getTrainerById(workout.trainerId)
+                const workoutTitle = t(`content:workouts.${workout.id}`, { defaultValue: workout.title })
                return (
                  <Pressable
                    key={result.id}
@@ -180,16 +195,14 @@ export default function HomeScreen() {
                  >
                    <View style={styles.continueThumb}>
                      <LinearGradient
-                        colors={[trainer?.color ?? BRAND.PRIMARY, BRAND.PRIMARY_LIGHT]}
+                        colors={[BRAND.PRIMARY, BRAND.PRIMARY_LIGHT]}
                        style={StyleSheet.absoluteFill}
                      />
-                      <StyledText size={FONTS.LARGE_TITLE} weight="bold" color={TEXT.PRIMARY}>
-                        {trainer?.name[0] ?? 'T'}
-                      </StyledText>
+                      <Ionicons name="flame" size={32} color="#FFFFFF" />
                    </View>
-                    <StyledText size={FONTS.SUBHEADLINE} weight="semibold" color={TEXT.PRIMARY}>{workout.title}</StyledText>
-                    <StyledText size={FONTS.CAPTION_2} color={TEXT.TERTIARY}>
-                      {result.calories + ' cal • ' + result.durationMinutes + ' min'}
+                    <StyledText size={FONTS.SUBHEADLINE} weight="semibold" color={colors.text.primary}>{workoutTitle}</StyledText>
+                    <StyledText size={FONTS.CAPTION_2} color={colors.text.tertiary}>
+                      {t('calMin', { calories: result.calories, duration: result.durationMinutes })}
                    </StyledText>
                  </Pressable>
                )
@@ -200,13 +213,13 @@ export default function HomeScreen() {

        {/* Popular This Week */}
        <View style={styles.section}>
-          <StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>Popular This Week</StyledText>
+          <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>{t('screens:home.popularThisWeek')}</StyledText>
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            contentContainerStyle={styles.horizontalScroll}
          >
-            {popular.map((item) => (
+            {translatedPopular.map((item) => (
              <Pressable
                key={item.id}
                style={styles.popularCard}
@@ -215,8 +228,8 @@ export default function HomeScreen() {
                <View style={styles.popularThumb}>
                  <Ionicons name="flame" size={24} color={BRAND.PRIMARY} />
                </View>
-                <StyledText size={FONTS.SUBHEADLINE} weight="medium" color={TEXT.PRIMARY}>{item.title}</StyledText>
-                <StyledText size={FONTS.CAPTION_2} color={TEXT.TERTIARY}>{item.duration + ' min'}</StyledText>
+                <StyledText size={FONTS.SUBHEADLINE} weight="medium" color={colors.text.primary}>{item.title}</StyledText>
+                <StyledText size={FONTS.CAPTION_2} color={colors.text.tertiary}>{t('units.minUnit', { count: item.duration })}</StyledText>
              </Pressable>
            ))}
          </ScrollView>
@@ -224,19 +237,19 @@ export default function HomeScreen() {

        {/* Collections */}
        <View style={styles.section}>
-          <StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>Collections</StyledText>
-          {COLLECTIONS.map((item) => (
+          <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>{t('screens:home.collections')}</StyledText>
+          {translatedCollections.map((item) => (
            <Pressable key={item.id} style={styles.collectionCard} onPress={() => { haptics.buttonTap(); router.push(`/collection/${item.id}`) }}>
-              <BlurView intensity={GLASS.BLUR_MEDIUM} tint="dark" style={StyleSheet.absoluteFill} />
+              <BlurView intensity={colors.glass.blurMedium} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
              <View style={styles.collectionContent}>
                <RNText style={styles.collectionIcon}>{item.icon}</RNText>
                <View style={styles.collectionText}>
-                  <StyledText size={FONTS.HEADLINE} weight="semibold" color={TEXT.PRIMARY}>{item.title}</StyledText>
-                  <StyledText size={FONTS.CAPTION_1} color={TEXT.TERTIARY}>
-                    {item.workoutIds.length + ' workouts • ' + item.description}
+                  <StyledText size={FONTS.HEADLINE} weight="semibold" color={colors.text.primary}>{item.title}</StyledText>
+                  <StyledText size={FONTS.CAPTION_1} color={colors.text.tertiary}>
+                    {t('plurals.workout', { count: item.workoutIds.length }) + ' \u00B7 ' + item.description}
                  </StyledText>
                </View>
-                <Ionicons name="chevron-forward" size={20} color={TEXT.TERTIARY} />
+                <Ionicons name="chevron-forward" size={20} color={colors.text.tertiary} />
              </View>
            </Pressable>
          ))}
@@ -250,167 +263,169 @@ export default function HomeScreen() {
 // STYLES
 // ═══════════════════════════════════════════════════════════════════════════

-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: DARK.BASE,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  scrollContent: {
-    paddingHorizontal: LAYOUT.SCREEN_PADDING,
-  },
+function createStyles(colors: ThemeColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.bg.base,
+    },
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {
+      paddingHorizontal: LAYOUT.SCREEN_PADDING,
+    },

-  // Header
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: SPACING[6],
-  },
-  profileButton: {
-    width: 40,
-    height: 40,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
+    // Header
+    header: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: SPACING[6],
+    },
+    profileButton: {
+      width: 40,
+      height: 40,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },

-  // Buttons
-  primaryButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: BRAND.PRIMARY,
-    paddingHorizontal: SPACING[4],
-    paddingVertical: SPACING[3],
-    borderRadius: RADIUS.SM,
-  },
-  buttonIcon: {
-    marginRight: SPACING[2],
-  },
-  primaryButtonText: {
-    fontSize: 14,
-    fontWeight: '600',
-    color: TEXT.PRIMARY,
-  },
-  plainButtonText: {
-    fontSize: FONTS.BODY,
-    color: BRAND.PRIMARY,
-  },
+    // Buttons
+    primaryButton: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: BRAND.PRIMARY,
+      paddingHorizontal: SPACING[4],
+      paddingVertical: SPACING[3],
+      borderRadius: RADIUS.SM,
+    },
+    buttonIcon: {
+      marginRight: SPACING[2],
+    },
+    primaryButtonText: {
+      fontSize: 14,
+      fontWeight: '600',
+      color: '#FFFFFF',
+    },
+    plainButtonText: {
+      fontSize: FONTS.BODY,
+      color: BRAND.PRIMARY,
+    },

-  // Featured
-  featuredCard: {
-    width: CARD_WIDTH,
-    height: 220,
-    borderRadius: RADIUS.GLASS_CARD,
-    overflow: 'hidden',
-    marginBottom: SPACING[8],
-    ...SHADOW.lg,
-  },
-  featuredBadge: {
-    position: 'absolute',
-    top: SPACING[4],
-    left: SPACING[4],
-    backgroundColor: 'rgba(255, 255, 255, 0.15)',
-    paddingHorizontal: SPACING[3],
-    paddingVertical: SPACING[1],
-    borderRadius: RADIUS.SM,
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.2)',
-  },
-  featuredBadgeText: {
-    fontSize: 11,
-    fontWeight: 'bold',
-    color: TEXT.PRIMARY,
-  },
-  featuredContent: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    padding: SPACING[5],
-  },
-  featuredButtons: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[3],
-    marginTop: SPACING[4],
-  },
-  saveButton: {
-    width: 44,
-    height: 44,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
-    borderRadius: 22,
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.15)',
-  },
+    // Featured
+    featuredCard: {
+      width: CARD_WIDTH,
+      height: 220,
+      borderRadius: RADIUS.GLASS_CARD,
+      overflow: 'hidden',
+      marginBottom: SPACING[8],
+      ...colors.shadow.lg,
+    },
+    featuredBadge: {
+      position: 'absolute',
+      top: SPACING[4],
+      left: SPACING[4],
+      backgroundColor: 'rgba(255, 255, 255, 0.15)',
+      paddingHorizontal: SPACING[3],
+      paddingVertical: SPACING[1],
+      borderRadius: RADIUS.SM,
+      borderWidth: 1,
+      borderColor: 'rgba(255, 255, 255, 0.2)',
+    },
+    featuredBadgeText: {
+      fontSize: 11,
+      fontWeight: 'bold',
+      color: '#FFFFFF',
+    },
+    featuredContent: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      padding: SPACING[5],
+    },
+    featuredButtons: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: SPACING[3],
+      marginTop: SPACING[4],
+    },
+    saveButton: {
+      width: 44,
+      height: 44,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: 'rgba(255, 255, 255, 0.1)',
+      borderRadius: 22,
+      borderWidth: 1,
+      borderColor: 'rgba(255, 255, 255, 0.15)',
+    },

-  // Sections
-  section: {
-    marginBottom: SPACING[8],
-  },
-  sectionHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: SPACING[4],
-  },
-  horizontalScroll: {
-    gap: SPACING[3],
-  },
+    // Sections
+    section: {
+      marginBottom: SPACING[8],
+    },
+    sectionHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: SPACING[4],
+    },
+    horizontalScroll: {
+      gap: SPACING[3],
+    },

-  // Continue Card
-  continueCard: {
-    width: 140,
-  },
-  continueThumb: {
-    width: 140,
-    height: 200,
-    borderRadius: RADIUS.LG,
-    overflow: 'hidden',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: SPACING[2],
-  },
+    // Continue Card
+    continueCard: {
+      width: 140,
+    },
+    continueThumb: {
+      width: 140,
+      height: 200,
+      borderRadius: RADIUS.LG,
+      overflow: 'hidden',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginBottom: SPACING[2],
+    },

-  // Popular Card
-  popularCard: {
-    width: 120,
-  },
-  popularThumb: {
-    width: 120,
-    height: 120,
-    borderRadius: RADIUS.LG,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: SPACING[2],
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.1)',
-    backgroundColor: 'rgba(255, 255, 255, 0.05)',
-  },
+    // Popular Card
+    popularCard: {
+      width: 120,
+    },
+    popularThumb: {
+      width: 120,
+      height: 120,
+      borderRadius: RADIUS.LG,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginBottom: SPACING[2],
+      borderWidth: 1,
+      borderColor: colors.border.glass,
+      backgroundColor: colors.bg.overlay1,
+    },

-  // Collection Card
-  collectionCard: {
-    height: 80,
-    borderRadius: RADIUS.LG,
-    overflow: 'hidden',
-    marginBottom: SPACING[3],
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.1)',
-  },
-  collectionContent: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: SPACING[5],
-  },
-  collectionIcon: {
-    fontSize: 28,
-    marginRight: SPACING[4],
-  },
-  collectionText: {
-    flex: 1,
-  },
-})
+    // Collection Card
+    collectionCard: {
+      height: 80,
+      borderRadius: RADIUS.LG,
+      overflow: 'hidden',
+      marginBottom: SPACING[3],
+      borderWidth: 1,
+      borderColor: colors.border.glass,
+    },
+    collectionContent: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: SPACING[5],
+    },
+    collectionIcon: {
+      fontSize: 28,
+      marginRight: SPACING[4],
+    },
+    collectionText: {
+      flex: 1,
+    },
+  })
+}
--- a/app/(tabs)/profile.tsx
+++ b/app/(tabs)/profile.tsx
@@ -15,19 +15,18 @@ import {
  Switch,
  Text,
  LabeledContent,
+  DateTimePicker,
+  Button,
 } from '@expo/ui/swift-ui'

+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useUserStore } from '@/src/shared/stores'
+import { requestNotificationPermissions, usePurchases } from '@/src/shared/hooks'
 import { StyledText } from '@/src/shared/components/StyledText'

-import {
-  BRAND,
-  DARK,
-  TEXT,
-  GLASS,
-  SHADOW,
-  GRADIENTS,
-} from '@/src/shared/constants/colors'
+import { useThemeColors, BRAND, GRADIENTS } from '@/src/shared/theme'
+import type { ThemeColors } from '@/src/shared/theme/types'
 import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
 import { RADIUS } from '@/src/shared/constants/borderRadius'

@@ -44,14 +43,44 @@ const FONTS = {
 // ═══════════════════════════════════════════════════════════════════════════

 export default function ProfileScreen() {
+  const { t } = useTranslation('screens')
  const insets = useSafeAreaInsets()
+  const colors = useThemeColors()
+  const styles = useMemo(() => createStyles(colors), [colors])
  const profile = useUserStore((s) => s.profile)
  const settings = useUserStore((s) => s.settings)
  const updateSettings = useUserStore((s) => s.updateSettings)
+  const { restorePurchases } = usePurchases()

  const isPremium = profile.subscription !== 'free'
  const planLabel = isPremium ? 'TabataFit+' : 'Free'

+  const handleRestore = async () => {
+    await restorePurchases()
+  }
+
+  const handleReminderToggle = async (enabled: boolean) => {
+    if (enabled) {
+      const granted = await requestNotificationPermissions()
+      if (!granted) return
+    }
+    updateSettings({ reminders: enabled })
+  }
+
+  const handleTimeChange = (date: Date) => {
+    const hh = String(date.getHours()).padStart(2, '0')
+    const mm = String(date.getMinutes()).padStart(2, '0')
+    updateSettings({ reminderTime: `${hh}:${mm}` })
+  }
+
+  // Build initial date string for the picker (today at reminderTime)
+  const today = new Date()
+  const [rh, rm] = settings.reminderTime.split(':').map(Number)
+  const pickerDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), rh, rm)
+  const pickerInitial = pickerDate.toISOString()
+
+  const settingsHeight = settings.reminders ? 430 : 385
+
  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <ScrollView
@@ -60,32 +89,32 @@ export default function ProfileScreen() {
        showsVerticalScrollIndicator={false}
      >
        {/* Header */}
-        <StyledText size={FONTS.LARGE_TITLE} weight="bold" color={TEXT.PRIMARY}>
-          Profile
+        <StyledText size={FONTS.LARGE_TITLE} weight="bold" color={colors.text.primary}>
+          {t('profile.title')}
        </StyledText>

        {/* Profile Card */}
        <View style={styles.profileCard}>
-          <BlurView intensity={GLASS.BLUR_MEDIUM} tint="dark" style={StyleSheet.absoluteFill} />
+          <BlurView intensity={colors.glass.blurMedium} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
          <View style={styles.avatarContainer}>
            <LinearGradient
              colors={GRADIENTS.CTA}
              style={StyleSheet.absoluteFill}
            />
-            <StyledText size={FONTS.LARGE_TITLE} weight="bold" color={TEXT.PRIMARY}>
+            <StyledText size={FONTS.LARGE_TITLE} weight="bold" color="#FFFFFF">
              {profile.name[0]}
            </StyledText>
          </View>
-          <StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>
+          <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>
            {profile.name}
          </StyledText>
-          <StyledText size={FONTS.SUBHEADLINE} color={TEXT.TERTIARY}>
+          <StyledText size={FONTS.SUBHEADLINE} color={colors.text.tertiary}>
            {profile.email}
          </StyledText>
          {isPremium && (
            <View style={styles.premiumBadge}>
              <Ionicons name="star" size={12} color={BRAND.PRIMARY} />
-              <StyledText size={FONTS.CAPTION_1} weight="semibold" color={TEXT.PRIMARY}>
+              <StyledText size={FONTS.CAPTION_1} weight="semibold" color={colors.text.primary}>
                {planLabel}
              </StyledText>
            </View>
@@ -102,59 +131,82 @@ export default function ProfileScreen() {
              style={StyleSheet.absoluteFill}
            />
            <View style={styles.subscriptionContent}>
-              <Ionicons name="ribbon" size={24} color={TEXT.PRIMARY} />
+              <Ionicons name="ribbon" size={24} color="#FFFFFF" />
              <View style={styles.subscriptionInfo}>
-                <StyledText size={FONTS.HEADLINE} weight="bold" color={TEXT.PRIMARY}>
+                <StyledText size={FONTS.HEADLINE} weight="bold" color="#FFFFFF">
                  {planLabel}
                </StyledText>
-                <StyledText size={FONTS.CAPTION_1} color={TEXT.SECONDARY}>
-                  {'Member since ' + profile.joinDate}
+                <StyledText size={FONTS.CAPTION_1} color="rgba(255,255,255,0.8)">
+                  {t('profile.memberSince', { date: profile.joinDate })}
                </StyledText>
              </View>
            </View>
          </View>
        )}

-        {/* SwiftUI Island: Settings */}
-        <Host useViewportSizeMeasurement colorScheme="dark" style={{ height: 385 }}>
+        {/* SwiftUI Island: Subscription Section */}
+        <Host useViewportSizeMeasurement colorScheme={colors.colorScheme} style={{ height: 60, marginTop: -20 }}>
          <List listStyle="insetGrouped" scrollEnabled={false}>
-            <Section title="WORKOUT">
+            <Section title={t('profile.sectionSubscription')}>
+              <Button
+                variant="borderless"
+                onPress={handleRestore}
+                color={colors.text.primary}
+              >
+                {t('profile.restorePurchases')}
+              </Button>
+            </Section>
+          </List>
+        </Host>
+
+        {/* SwiftUI Island: Settings */}
+        <Host useViewportSizeMeasurement colorScheme={colors.colorScheme} style={{ height: settingsHeight }}>
+          <List listStyle="insetGrouped" scrollEnabled={false}>
+            <Section title={t('profile.sectionWorkout')}>
              <Switch
-                label="Haptic Feedback"
+                label={t('profile.hapticFeedback')}
                value={settings.haptics}
                onValueChange={(v) => updateSettings({ haptics: v })}
                color={BRAND.PRIMARY}
              />
              <Switch
-                label="Sound Effects"
+                label={t('profile.soundEffects')}
                value={settings.soundEffects}
                onValueChange={(v) => updateSettings({ soundEffects: v })}
                color={BRAND.PRIMARY}
              />
              <Switch
-                label="Voice Coaching"
+                label={t('profile.voiceCoaching')}
                value={settings.voiceCoaching}
                onValueChange={(v) => updateSettings({ voiceCoaching: v })}
                color={BRAND.PRIMARY}
              />
            </Section>
-            <Section title="NOTIFICATIONS">
+            <Section title={t('profile.sectionNotifications')}>
              <Switch
-                label="Daily Reminders"
+                label={t('profile.dailyReminders')}
                value={settings.reminders}
-                onValueChange={(v) => updateSettings({ reminders: v })}
+                onValueChange={handleReminderToggle}
                color={BRAND.PRIMARY}
              />
-              <LabeledContent label="Reminder Time">
-                <Text color={TEXT.TERTIARY}>{settings.reminderTime.replace(':00', ':00 AM')}</Text>
-              </LabeledContent>
+              {settings.reminders && (
+                <LabeledContent label={t('profile.reminderTime')}>
+                  <DateTimePicker
+                    displayedComponents="hourAndMinute"
+                    variant="compact"
+                    initialDate={pickerInitial}
+                    onDateSelected={handleTimeChange}
+                    color={BRAND.PRIMARY}
+                  />
+                </LabeledContent>
+              )}
            </Section>
          </List>
        </Host>

        {/* Version */}
-        <StyledText size={FONTS.CAPTION_1} color={TEXT.TERTIARY} style={styles.versionText}>
-          TabataFit v1.0.0
+        <StyledText size={FONTS.CAPTION_1} color={colors.text.tertiary} style={styles.versionText}>
+          {t('profile.version')}
        </StyledText>
      </ScrollView>
    </View>
@@ -165,72 +217,74 @@ export default function ProfileScreen() {
 // STYLES
 // ═══════════════════════════════════════════════════════════════════════════

-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: DARK.BASE,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  scrollContent: {
-    paddingHorizontal: LAYOUT.SCREEN_PADDING,
-  },
+function createStyles(colors: ThemeColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.bg.base,
+    },
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {
+      paddingHorizontal: LAYOUT.SCREEN_PADDING,
+    },

-  // Profile Card
-  profileCard: {
-    borderRadius: RADIUS.GLASS_CARD,
-    overflow: 'hidden',
-    marginBottom: SPACING[6],
-    marginTop: SPACING[4],
-    alignItems: 'center',
-    paddingVertical: SPACING[6],
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.1)',
-    ...SHADOW.md,
-  },
-  avatarContainer: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: SPACING[3],
-    overflow: 'hidden',
-  },
-  premiumBadge: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: 'rgba(255, 107, 53, 0.15)',
-    paddingHorizontal: SPACING[3],
-    paddingVertical: SPACING[1],
-    borderRadius: RADIUS.FULL,
-    marginTop: SPACING[3],
-    gap: SPACING[1],
-  },
+    // Profile Card
+    profileCard: {
+      borderRadius: RADIUS.GLASS_CARD,
+      overflow: 'hidden',
+      marginBottom: SPACING[6],
+      marginTop: SPACING[4],
+      alignItems: 'center',
+      paddingVertical: SPACING[6],
+      borderWidth: 1,
+      borderColor: colors.border.glass,
+      ...colors.shadow.md,
+    },
+    avatarContainer: {
+      width: 80,
+      height: 80,
+      borderRadius: 40,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginBottom: SPACING[3],
+      overflow: 'hidden',
+    },
+    premiumBadge: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: 'rgba(255, 107, 53, 0.15)',
+      paddingHorizontal: SPACING[3],
+      paddingVertical: SPACING[1],
+      borderRadius: RADIUS.FULL,
+      marginTop: SPACING[3],
+      gap: SPACING[1],
+    },

-  // Subscription Card
-  subscriptionCard: {
-    height: 80,
-    borderRadius: RADIUS.LG,
-    overflow: 'hidden',
-    marginBottom: SPACING[6],
-    ...SHADOW.BRAND_GLOW,
-  },
-  subscriptionContent: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: SPACING[4],
-    gap: SPACING[3],
-  },
-  subscriptionInfo: {
-    flex: 1,
-  },
+    // Subscription Card
+    subscriptionCard: {
+      height: 80,
+      borderRadius: RADIUS.LG,
+      overflow: 'hidden',
+      marginBottom: SPACING[6],
+      ...colors.shadow.BRAND_GLOW,
+    },
+    subscriptionContent: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: SPACING[4],
+      gap: SPACING[3],
+    },
+    subscriptionInfo: {
+      flex: 1,
+    },

-  // Version Text
-  versionText: {
-    textAlign: 'center',
-    marginTop: SPACING[6],
-  },
-})
+    // Version Text
+    versionText: {
+      textAlign: 'center',
+      marginTop: SPACING[6],
+    },
+  })
+}
--- a/app/(tabs)/workouts.tsx
+++ b/app/(tabs)/workouts.tsx
@@ -1,40 +1,134 @@
 /**
 * TabataFit Workouts Screen
- * React Native + SwiftUI Islands — wired to shared data
+ * Premium workout browser — scrollable category pills, trainers, workout grid
 */

-import { useState } from 'react'
-import { View, StyleSheet, ScrollView, Pressable, Dimensions, Text as RNText } from 'react-native'
+import { useState, useRef, useMemo } from 'react'
+import { View, StyleSheet, ScrollView, Pressable, Dimensions, Animated } from 'react-native'
 import { useRouter } from 'expo-router'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { LinearGradient } from 'expo-linear-gradient'
 import { BlurView } from 'expo-blur'
 import Ionicons from '@expo/vector-icons/Ionicons'
-import { Host, Picker } from '@expo/ui/swift-ui'

+import { useTranslation } from 'react-i18next'
 import { useHaptics } from '@/src/shared/hooks'
-import { WORKOUTS, TRAINERS, CATEGORIES, getTrainerById } from '@/src/shared/data'
+import { WORKOUTS } from '@/src/shared/data'
+import { useTranslatedCategories, useTranslatedWorkouts } from '@/src/shared/data/useTranslatedData'
 import { StyledText } from '@/src/shared/components/StyledText'

-import {
-  BRAND,
-  DARK,
-  TEXT,
-  GLASS,
-  SHADOW,
-} from '@/src/shared/constants/colors'
+import { useThemeColors, BRAND, GRADIENTS } from '@/src/shared/theme'
+import type { ThemeColors } from '@/src/shared/theme/types'
 import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
 import { RADIUS } from '@/src/shared/constants/borderRadius'

 const { width: SCREEN_WIDTH } = Dimensions.get('window')
 const CARD_WIDTH = (SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2 - SPACING[3]) / 2

-const FONTS = {
-  LARGE_TITLE: 34,
-  TITLE_2: 22,
-  HEADLINE: 17,
-  SUBHEADLINE: 15,
-  CAPTION_1: 12,
-  CAPTION_2: 11,
+// ═══════════════════════════════════════════════════════════════════════════
+// CATEGORY PILL
+// ═══════════════════════════════════════════════════════════════════════════
+
+function CategoryPill({
+  label,
+  selected,
+  onPress,
+}: {
+  label: string
+  selected: boolean
+  onPress: () => void
+}) {
+  const colors = useThemeColors()
+  const styles = useMemo(() => createStyles(colors), [colors])
+  return (
+    <Pressable
+      style={[styles.pill, selected && styles.pillSelected]}
+      onPress={onPress}
+    >
+      {selected && (
+        <LinearGradient
+          colors={GRADIENTS.CTA}
+          style={[StyleSheet.absoluteFill, { borderRadius: 20 }]}
+        />
+      )}
+      <StyledText
+        size={14}
+        weight={selected ? 'semibold' : 'regular'}
+        color={selected ? '#FFFFFF' : colors.text.tertiary}
+      >
+        {label}
+      </StyledText>
+    </Pressable>
+  )
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// WORKOUT CARD
+// ═══════════════════════════════════════════════════════════════════════════
+
+function WorkoutCard({
+  title,
+  duration,
+  level,
+  levelLabel,
+  onPress,
+}: {
+  title: string
+  duration: number
+  level: string
+  levelLabel: string
+  onPress: () => void
+}) {
+  const colors = useThemeColors()
+  const styles = useMemo(() => createStyles(colors), [colors])
+  return (
+    <Pressable style={styles.workoutCard} onPress={onPress}>
+      <BlurView intensity={colors.glass.blurMedium} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
+
+      {/* Subtle gradient accent at top */}
+      <LinearGradient
+        colors={[levelColor(level, colors) + '30', 'transparent']}
+        style={styles.cardGradient}
+      />
+
+      {/* Duration badge */}
+      <View style={styles.durationBadge}>
+        <Ionicons name="time-outline" size={10} color={colors.text.secondary} />
+        <StyledText size={11} weight="semibold" color={colors.text.secondary} style={{ marginLeft: 3 }}>
+          {duration + ' min'}
+        </StyledText>
+      </View>
+
+      {/* Play button */}
+      <View style={styles.playArea}>
+        <View style={styles.playCircle}>
+          <Ionicons name="play" size={18} color={colors.text.primary} />
+        </View>
+      </View>
+
+      {/* Info */}
+      <View style={styles.workoutInfo}>
+        <StyledText size={14} weight="semibold" color={colors.text.primary} numberOfLines={2}>
+          {title}
+        </StyledText>
+        <View style={styles.levelRow}>
+          <View style={[styles.levelDot, { backgroundColor: levelColor(level, colors) }]} />
+          <StyledText size={11} color={colors.text.tertiary}>
+            {levelLabel}
+          </StyledText>
+        </View>
+      </View>
+    </Pressable>
+  )
+}
+
+function levelColor(level: string, colors: ThemeColors): string {
+  switch (level.toLowerCase()) {
+    case 'beginner': return BRAND.SUCCESS
+    case 'intermediate': return BRAND.SECONDARY
+    case 'advanced': return BRAND.DANGER
+    default: return colors.text.tertiary
+  }
 }

 // ═══════════════════════════════════════════════════════════════════════════
@@ -42,22 +136,28 @@ const FONTS = {
 // ═══════════════════════════════════════════════════════════════════════════

 export default function WorkoutsScreen() {
+  const { t } = useTranslation()
  const insets = useSafeAreaInsets()
  const router = useRouter()
  const haptics = useHaptics()
-  const [selectedCategoryIndex, setSelectedCategoryIndex] = useState(0)
-
-  const selectedCategory = CATEGORIES[selectedCategoryIndex].id
+  const colors = useThemeColors()
+  const styles = useMemo(() => createStyles(colors), [colors])
+  const [selectedCategory, setSelectedCategory] = useState('all')
+  const categories = useTranslatedCategories()

  const filteredWorkouts = selectedCategory === 'all'
    ? WORKOUTS
    : WORKOUTS.filter(w => w.category === selectedCategory)

+  const translatedFiltered = useTranslatedWorkouts(filteredWorkouts)
+
  const handleWorkoutPress = (id: string) => {
    haptics.buttonTap()
    router.push(`/workout/${id}`)
  }

+  const selectedLabel = categories.find(c => c.id === selectedCategory)?.label ?? t('screens:workouts.allWorkouts')
+
  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <ScrollView
@@ -67,89 +167,57 @@ export default function WorkoutsScreen() {
      >
        {/* Header */}
        <View style={styles.header}>
-          <StyledText size={FONTS.LARGE_TITLE} weight="bold" color={TEXT.PRIMARY}>Workouts</StyledText>
-          <StyledText size={FONTS.SUBHEADLINE} color={TEXT.TERTIARY}>{WORKOUTS.length + ' workouts available'}</StyledText>
+          <StyledText size={34} weight="bold" color={colors.text.primary}>
+            {t('screens:workouts.title')}
+          </StyledText>
+          <StyledText size={15} color={colors.text.tertiary}>
+            {t('screens:workouts.available', { count: WORKOUTS.length })}
+          </StyledText>
        </View>

-        {/* SwiftUI Island: Category Picker */}
-        <Host matchContents useViewportSizeMeasurement colorScheme="dark" style={styles.pickerIsland}>
-          <Picker
-            variant="segmented"
-            options={CATEGORIES.map(c => c.label)}
-            selectedIndex={selectedCategoryIndex}
-            onOptionSelected={(e) => {
-              haptics.selection()
-              setSelectedCategoryIndex(e.nativeEvent.index)
-            }}
-            color={BRAND.PRIMARY}
-          />
-        </Host>
-
-        {/* Trainers */}
-        <View style={styles.section}>
-          <StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>Trainers</StyledText>
-          <ScrollView
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            contentContainerStyle={styles.trainersScroll}
-          >
-            {TRAINERS.map((trainer) => (
-              <Pressable key={trainer.id} style={styles.trainerCard}>
-                <BlurView intensity={GLASS.BLUR_MEDIUM} tint="dark" style={StyleSheet.absoluteFill} />
-                <View style={[styles.trainerAvatar, { backgroundColor: trainer.color }]}>
-                  <StyledText size={FONTS.TITLE_2} weight="bold" color={TEXT.PRIMARY}>{trainer.name[0]}</StyledText>
-                </View>
-                <StyledText size={FONTS.SUBHEADLINE} weight="semibold" color={TEXT.PRIMARY}>{trainer.name}</StyledText>
-                <StyledText size={FONTS.CAPTION_2} color={TEXT.TERTIARY}>{trainer.specialty}</StyledText>
-              </Pressable>
-            ))}
-          </ScrollView>
-        </View>
+        {/* Category Pills — horizontal scroll, no truncation */}
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.pillsRow}
+          style={styles.pillsScroll}
+        >
+          {categories.map((cat) => (
+            <CategoryPill
+              key={cat.id}
+              label={cat.label}
+              selected={selectedCategory === cat.id}
+              onPress={() => {
+                haptics.selection()
+                setSelectedCategory(cat.id)
+              }}
+            />
+          ))}
+        </ScrollView>

        {/* Workouts Grid */}
        <View style={styles.section}>
          <View style={styles.sectionHeader}>
-            <StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>
-              {selectedCategory === 'all' ? 'All Workouts' : (CATEGORIES.find(c => c.id === selectedCategory)?.label ?? 'All Workouts')}
+            <StyledText size={20} weight="semibold" color={colors.text.primary}>
+              {selectedCategory === 'all' ? t('screens:workouts.allWorkouts') : selectedLabel}
            </StyledText>
            {selectedCategory !== 'all' && (
              <Pressable onPress={() => { haptics.buttonTap(); router.push(`/workout/category/${selectedCategory}`) }}>
-                <StyledText size={FONTS.SUBHEADLINE} color={BRAND.PRIMARY} weight="medium">See All</StyledText>
+                <StyledText size={14} color={BRAND.PRIMARY} weight="medium">{t('seeAll')}</StyledText>
              </Pressable>
            )}
          </View>
          <View style={styles.workoutsGrid}>
-            {filteredWorkouts.map((workout) => {
-              const trainer = getTrainerById(workout.trainerId)
-              return (
-                <Pressable
-                  key={workout.id}
-                  style={styles.workoutCard}
-                  onPress={() => handleWorkoutPress(workout.id)}
-                >
-                  <BlurView intensity={GLASS.BLUR_MEDIUM} tint="dark" style={StyleSheet.absoluteFill} />
-
-                  <View style={styles.durationBadge}>
-                    <StyledText size={FONTS.CAPTION_2} weight="semibold" color={TEXT.PRIMARY}>{workout.duration + ' min'}</StyledText>
-                  </View>
-
-                  <View style={[styles.workoutTrainerBadge, { backgroundColor: trainer?.color }]}>
-                    <StyledText size={FONTS.CAPTION_1} weight="bold" color={TEXT.PRIMARY}>{trainer?.name[0] ?? 'T'}</StyledText>
-                  </View>
-
-                  <View style={styles.playOverlay}>
-                    <View style={styles.playCircle}>
-                      <Ionicons name="play" size={20} color={TEXT.PRIMARY} />
-                    </View>
-                  </View>
-
-                  <View style={styles.workoutInfo}>
-                    <StyledText size={FONTS.SUBHEADLINE} weight="semibold" color={TEXT.PRIMARY}>{workout.title}</StyledText>
-                    <StyledText size={FONTS.CAPTION_1} color={BRAND.PRIMARY}>{workout.level}</StyledText>
-                  </View>
-                </Pressable>
-              )
-            })}
+            {translatedFiltered.map((workout) => (
+              <WorkoutCard
+                key={workout.id}
+                title={workout.title}
+                duration={workout.duration}
+                level={workout.level}
+                levelLabel={t(`levels.${workout.level.toLowerCase()}`)}
+                onPress={() => handleWorkoutPress(workout.id)}
+              />
+            ))}
          </View>
        </View>
      </ScrollView>
@@ -161,119 +229,126 @@ export default function WorkoutsScreen() {
 // STYLES
 // ═══════════════════════════════════════════════════════════════════════════

-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: DARK.BASE,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  scrollContent: {
-    paddingHorizontal: LAYOUT.SCREEN_PADDING,
-  },
+function createStyles(colors: ThemeColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.bg.base,
+    },
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {
+      paddingHorizontal: LAYOUT.SCREEN_PADDING,
+    },

-  // Header
-  header: {
-    marginBottom: SPACING[6],
-  },
+    // Header
+    header: {
+      marginBottom: SPACING[4],
+    },

-  // Picker Island
-  pickerIsland: {
-    marginBottom: SPACING[6],
-  },
+    // Pills
+    pillsScroll: {
+      marginHorizontal: -LAYOUT.SCREEN_PADDING,
+      marginBottom: SPACING[6],
+    },
+    pillsRow: {
+      paddingHorizontal: LAYOUT.SCREEN_PADDING,
+      gap: SPACING[2],
+    },
+    pill: {
+      paddingHorizontal: SPACING[4],
+      paddingVertical: SPACING[2],
+      borderRadius: 20,
+      backgroundColor: colors.bg.surface,
+      borderWidth: 1,
+      borderColor: colors.border.glassLight,
+    },
+    pillSelected: {
+      borderColor: BRAND.PRIMARY,
+      backgroundColor: 'transparent',
+    },

-  // Section
-  section: {
-    marginBottom: SPACING[8],
-  },
-  sectionHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: SPACING[2],
-  },
+    // Section
+    section: {
+      marginBottom: SPACING[6],
+    },
+    sectionHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: SPACING[4],
+    },

-  // Trainers
-  trainersScroll: {
-    gap: SPACING[3],
-  },
-  trainerCard: {
-    width: 100,
-    alignItems: 'center',
-    paddingVertical: SPACING[4],
-    borderRadius: RADIUS.LG,
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.1)',
-    overflow: 'hidden',
-  },
-  trainerAvatar: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: SPACING[2],
-  },
-
-  // Workouts Grid
-  workoutsGrid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: SPACING[3],
-  },
-  workoutCard: {
-    width: CARD_WIDTH,
-    height: 180,
-    borderRadius: RADIUS.GLASS_CARD,
-    overflow: 'hidden',
-    ...SHADOW.md,
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.1)',
-  },
-  durationBadge: {
-    position: 'absolute',
-    top: SPACING[2],
-    right: SPACING[2],
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    paddingHorizontal: SPACING[2],
-    paddingVertical: SPACING[1],
-    borderRadius: RADIUS.SM,
-  },
-  workoutTrainerBadge: {
-    position: 'absolute',
-    top: SPACING[2],
-    left: SPACING[2],
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  playOverlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 60,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  playCircle: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
-    backgroundColor: 'rgba(255, 255, 255, 0.2)',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.3)',
-  },
-  workoutInfo: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    padding: SPACING[3],
-  },
-})
+    // Workouts Grid
+    workoutsGrid: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: SPACING[3],
+    },
+    workoutCard: {
+      width: CARD_WIDTH,
+      height: 190,
+      borderRadius: RADIUS.GLASS_CARD,
+      overflow: 'hidden',
+      borderWidth: 1,
+      borderColor: colors.bg.overlay2,
+    },
+    cardGradient: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      height: 80,
+    },
+    durationBadge: {
+      position: 'absolute',
+      top: SPACING[3],
+      right: SPACING[3],
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      paddingHorizontal: SPACING[2],
+      paddingVertical: 3,
+      borderRadius: RADIUS.SM,
+    },
+    playArea: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 64,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    playCircle: {
+      width: 40,
+      height: 40,
+      borderRadius: 20,
+      backgroundColor: colors.border.glassStrong,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderWidth: 1,
+      borderColor: 'rgba(255, 255, 255, 0.25)',
+    },
+    workoutInfo: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      padding: SPACING[3],
+      paddingTop: SPACING[2],
+    },
+    levelRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginTop: 3,
+      gap: 5,
+    },
+    levelDot: {
+      width: 6,
+      height: 6,
+      borderRadius: 3,
+    },
+  })
+}
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,13 +1,18 @@
 /**
 * TabataFit Root Layout
 * Expo Router v3 + Inter font loading
+ * Waits for font + store hydration before rendering
 */

-import { useCallback } from 'react'
+import '@/src/shared/i18n'
+import '@/src/shared/i18n/types'
+
+import { useState, useEffect, useCallback } from 'react'
 import { Stack } from 'expo-router'
 import { StatusBar } from 'expo-status-bar'
 import { View } from 'react-native'
 import * as SplashScreen from 'expo-splash-screen'
+import * as Notifications from 'expo-notifications'
 import {
  useFonts,
  Inter_400Regular,
@@ -17,11 +22,29 @@ import {
  Inter_900Black,
 } from '@expo-google-fonts/inter'

-import { DARK } from '@/src/shared/constants/colors'
+import { PostHogProvider } from 'posthog-react-native'
+
+import { ThemeProvider, useThemeColors } from '@/src/shared/theme'
+import { useUserStore } from '@/src/shared/stores'
+import { useNotifications } from '@/src/shared/hooks'
+import { initializePurchases } from '@/src/shared/services/purchases'
+import { initializeAnalytics, getPostHogClient } from '@/src/shared/services/analytics'
+
+Notifications.setNotificationHandler({
+  handleNotification: async () => ({
+    shouldShowAlert: false,
+    shouldPlaySound: false,
+    shouldSetBadge: false,
+    shouldShowBanner: false,
+    shouldShowList: false,
+  }),
+})

 SplashScreen.preventAutoHideAsync()

-export default function RootLayout() {
+function RootLayoutInner() {
+  const colors = useThemeColors()
+
  const [fontsLoaded] = useFonts({
    Inter_400Regular,
    Inter_500Medium,
@@ -30,59 +53,106 @@ export default function RootLayout() {
    Inter_900Black,
  })

+  useNotifications()
+
+  // Wait for persisted store to hydrate from AsyncStorage
+  const [hydrated, setHydrated] = useState(useUserStore.persist.hasHydrated())
+
+  useEffect(() => {
+    const unsub = useUserStore.persist.onFinishHydration(() => setHydrated(true))
+    return unsub
+  }, [])
+
+  // Initialize RevenueCat + PostHog after hydration
+  useEffect(() => {
+    if (hydrated) {
+      initializePurchases().catch((err) => {
+        console.error('Failed to initialize RevenueCat:', err)
+      })
+      initializeAnalytics().catch((err) => {
+        console.error('Failed to initialize PostHog:', err)
+      })
+    }
+  }, [hydrated])
+
  const onLayoutRootView = useCallback(async () => {
-    if (fontsLoaded) {
+    if (fontsLoaded && hydrated) {
      await SplashScreen.hideAsync()
    }
-  }, [fontsLoaded])
+  }, [fontsLoaded, hydrated])

-  if (!fontsLoaded) {
+  if (!fontsLoaded || !hydrated) {
    return null
  }

+  const content = (
+      <View style={{ flex: 1, backgroundColor: colors.bg.base }} onLayout={onLayoutRootView}>
+        <StatusBar style={colors.statusBarStyle} />
+        <Stack
+            screenOptions={{
+              headerShown: false,
+              contentStyle: { backgroundColor: colors.bg.base },
+              animation: 'slide_from_right',
+            }}
+          >
+            <Stack.Screen name="(tabs)" />
+            <Stack.Screen
+              name="onboarding"
+              options={{
+                animation: 'fade',
+              }}
+            />
+            <Stack.Screen
+              name="workout/[id]"
+              options={{
+                animation: 'slide_from_bottom',
+              }}
+            />
+            <Stack.Screen
+              name="workout/category/[id]"
+              options={{
+                animation: 'slide_from_right',
+              }}
+            />
+            <Stack.Screen
+              name="collection/[id]"
+              options={{
+                animation: 'slide_from_right',
+              }}
+            />
+            <Stack.Screen
+              name="player/[id]"
+              options={{
+                presentation: 'fullScreenModal',
+                animation: 'fade',
+              }}
+            />
+            <Stack.Screen
+              name="complete/[id]"
+              options={{
+                animation: 'fade',
+              }}
+            />
+          </Stack>
+      </View>
+  )
+
+  // Skip PostHogProvider in dev to avoid SDK errors without a real API key
+  if (__DEV__) {
+    return content
+  }
+
  return (
-    <View style={{ flex: 1, backgroundColor: DARK.BASE }} onLayout={onLayoutRootView}>
-      <StatusBar style="light" />
-      <Stack
-          screenOptions={{
-            headerShown: false,
-            contentStyle: { backgroundColor: DARK.BASE },
-            animation: 'slide_from_right',
-          }}
-        >
-          <Stack.Screen name="(tabs)" />
-          <Stack.Screen
-            name="workout/[id]"
-            options={{
-              animation: 'slide_from_bottom',
-            }}
-          />
-          <Stack.Screen
-            name="workout/category/[id]"
-            options={{
-              animation: 'slide_from_right',
-            }}
-          />
-          <Stack.Screen
-            name="collection/[id]"
-            options={{
-              animation: 'slide_from_right',
-            }}
-          />
-          <Stack.Screen
-            name="player/[id]"
-            options={{
-              presentation: 'fullScreenModal',
-              animation: 'fade',
-            }}
-          />
-          <Stack.Screen
-            name="complete/[id]"
-            options={{
-              animation: 'fade',
-            }}
-          />
-        </Stack>
-    </View>
+    <PostHogProvider client={getPostHogClient() ?? undefined} autocapture={{ captureScreens: true }}>
+      {content}
+    </PostHogProvider>
+  )
+}
+
+export default function RootLayout() {
+  return (
+    <ThemeProvider>
+      <RootLayoutInner />
+    </ThemeProvider>
  )
 }
--- a/app/collection/[id].tsx
+++ b/app/collection/[id].tsx
@@ -10,15 +10,15 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { LinearGradient } from 'expo-linear-gradient'
 import Ionicons from '@expo/vector-icons/Ionicons'

+import { useTranslation } from 'react-i18next'
+
 import { useHaptics } from '@/src/shared/hooks'
-import { getCollectionById, getCollectionWorkouts, getTrainerById, COLLECTION_COLORS } from '@/src/shared/data'
+import { getCollectionById, getCollectionWorkouts, COLLECTION_COLORS } from '@/src/shared/data'
+import { useTranslatedCollections, useTranslatedWorkouts } from '@/src/shared/data/useTranslatedData'
 import { StyledText } from '@/src/shared/components/StyledText'

-import {
-  BRAND,
-  DARK,
-  TEXT,
-} from '@/src/shared/constants/colors'
+import { useThemeColors, BRAND } from '@/src/shared/theme'
+import type { ThemeColors } from '@/src/shared/theme/types'
 import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
 import { RADIUS } from '@/src/shared/constants/borderRadius'

@@ -26,13 +26,20 @@ export default function CollectionDetailScreen() {
  const insets = useSafeAreaInsets()
  const router = useRouter()
  const haptics = useHaptics()
+  const { t } = useTranslation()
  const { id } = useLocalSearchParams<{ id: string }>()

-  const collection = id ? getCollectionById(id) : null
-  const workouts = useMemo(
-    () => id ? getCollectionWorkouts(id) : [],
+  const colors = useThemeColors()
+  const styles = useMemo(() => createStyles(colors), [colors])
+
+  const rawCollection = id ? getCollectionById(id) : null
+  const translatedCollections = useTranslatedCollections(rawCollection ? [rawCollection] : [])
+  const collection = translatedCollections.length > 0 ? translatedCollections[0] : null
+  const rawWorkouts = useMemo(
+    () => id ? getCollectionWorkouts(id).filter((w): w is NonNullable<typeof w> => w != null) : [],
    [id]
  )
+  const workouts = useTranslatedWorkouts(rawWorkouts)
  const collectionColor = COLLECTION_COLORS[id ?? ''] ?? BRAND.PRIMARY

  const handleBack = () => {
@@ -48,7 +55,7 @@ export default function CollectionDetailScreen() {
  if (!collection) {
    return (
      <View style={[styles.container, { paddingTop: insets.top, alignItems: 'center', justifyContent: 'center' }]}>
-        <RNText style={{ color: TEXT.PRIMARY, fontSize: 17 }}>Collection not found</RNText>
+        <RNText style={{ color: colors.text.primary, fontSize: 17 }}>{t('screens:collection.notFound')}</RNText>
      </View>
    )
  }
@@ -63,7 +70,7 @@ export default function CollectionDetailScreen() {
        contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
        showsVerticalScrollIndicator={false}
      >
-        {/* Hero Header */}
+        {/* Hero Header — on gradient, text stays white */}
        <View style={styles.hero}>
          <LinearGradient
            colors={collection.gradient ?? [collectionColor, BRAND.PRIMARY_DARK]}
@@ -73,36 +80,35 @@ export default function CollectionDetailScreen() {
          />

          <Pressable onPress={handleBack} style={styles.backButton}>
-            <Ionicons name="chevron-back" size={24} color={TEXT.PRIMARY} />
+            <Ionicons name="chevron-back" size={24} color="#FFFFFF" />
          </Pressable>

          <View style={styles.heroContent}>
            <RNText style={styles.heroIcon}>{collection.icon}</RNText>
-            <StyledText size={28} weight="bold" color={TEXT.PRIMARY}>{collection.title}</StyledText>
-            <StyledText size={15} color={TEXT.SECONDARY}>{collection.description}</StyledText>
+            <StyledText size={28} weight="bold" color="#FFFFFF">{collection.title}</StyledText>
+            <StyledText size={15} color="rgba(255, 255, 255, 0.8)">{collection.description}</StyledText>

            <View style={styles.heroStats}>
              <View style={styles.heroStat}>
-                <Ionicons name="fitness" size={14} color={TEXT.PRIMARY} />
-                <StyledText size={13} color={TEXT.PRIMARY}>{workouts.length + ' workouts'}</StyledText>
+                <Ionicons name="fitness" size={14} color="#FFFFFF" />
+                <StyledText size={13} color="#FFFFFF">{t('plurals.workout', { count: workouts.length })}</StyledText>
              </View>
              <View style={styles.heroStat}>
-                <Ionicons name="time" size={14} color={TEXT.PRIMARY} />
-                <StyledText size={13} color={TEXT.PRIMARY}>{totalMinutes + ' min total'}</StyledText>
+                <Ionicons name="time" size={14} color="#FFFFFF" />
+                <StyledText size={13} color="#FFFFFF">{t('screens:collection.minTotal', { count: totalMinutes })}</StyledText>
              </View>
              <View style={styles.heroStat}>
-                <Ionicons name="flame" size={14} color={TEXT.PRIMARY} />
-                <StyledText size={13} color={TEXT.PRIMARY}>{totalCalories + ' cal'}</StyledText>
+                <Ionicons name="flame" size={14} color="#FFFFFF" />
+                <StyledText size={13} color="#FFFFFF">{t('units.calUnit', { count: totalCalories })}</StyledText>
              </View>
            </View>
          </View>
        </View>

-        {/* Workout List */}
+        {/* Workout List — on base bg, use theme tokens */}
        <View style={styles.workoutList}>
          {workouts.map((workout, index) => {
            if (!workout) return null
-            const trainer = getTrainerById(workout.trainerId)
            return (
              <Pressable
                key={workout.id}
@@ -113,13 +119,13 @@ export default function CollectionDetailScreen() {
                  <RNText style={[styles.workoutNumberText, { color: collectionColor }]}>{index + 1}</RNText>
                </View>
                <View style={styles.workoutInfo}>
-                  <StyledText size={17} weight="semibold" color={TEXT.PRIMARY}>{workout.title}</StyledText>
-                  <StyledText size={13} color={TEXT.TERTIARY}>
-                    {trainer?.name + ' \u00B7 ' + workout.duration + ' min \u00B7 ' + workout.level}
+                  <StyledText size={17} weight="semibold" color={colors.text.primary}>{workout.title}</StyledText>
+                  <StyledText size={13} color={colors.text.tertiary}>
+                    {t('durationLevel', { duration: workout.duration, level: t(`levels.${workout.level.toLowerCase()}`) })}
                  </StyledText>
                </View>
                <View style={styles.workoutMeta}>
-                  <StyledText size={13} color={BRAND.PRIMARY}>{workout.calories + ' cal'}</StyledText>
+                  <StyledText size={13} color={BRAND.PRIMARY}>{t('units.calUnit', { count: workout.calories })}</StyledText>
                  <Ionicons name="play-circle" size={28} color={collectionColor} />
                </View>
              </Pressable>
@@ -131,81 +137,83 @@ export default function CollectionDetailScreen() {
  )
 }

-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: DARK.BASE,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  scrollContent: {},
+function createStyles(colors: ThemeColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.bg.base,
+    },
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {},

-  // Hero
-  hero: {
-    height: 260,
-    overflow: 'hidden',
-  },
-  backButton: {
-    width: 44,
-    height: 44,
-    alignItems: 'center',
-    justifyContent: 'center',
-    margin: SPACING[3],
-  },
-  heroContent: {
-    position: 'absolute',
-    bottom: SPACING[5],
-    left: SPACING[5],
-    right: SPACING[5],
-  },
-  heroIcon: {
-    fontSize: 40,
-    marginBottom: SPACING[2],
-  },
-  heroStats: {
-    flexDirection: 'row',
-    gap: SPACING[4],
-    marginTop: SPACING[3],
-  },
-  heroStat: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[1],
-  },
+    // Hero
+    hero: {
+      height: 260,
+      overflow: 'hidden',
+    },
+    backButton: {
+      width: 44,
+      height: 44,
+      alignItems: 'center',
+      justifyContent: 'center',
+      margin: SPACING[3],
+    },
+    heroContent: {
+      position: 'absolute',
+      bottom: SPACING[5],
+      left: SPACING[5],
+      right: SPACING[5],
+    },
+    heroIcon: {
+      fontSize: 40,
+      marginBottom: SPACING[2],
+    },
+    heroStats: {
+      flexDirection: 'row',
+      gap: SPACING[4],
+      marginTop: SPACING[3],
+    },
+    heroStat: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: SPACING[1],
+    },

-  // Workout List
-  workoutList: {
-    paddingHorizontal: LAYOUT.SCREEN_PADDING,
-    paddingTop: SPACING[4],
-    gap: SPACING[2],
-  },
-  workoutCard: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: SPACING[3],
-    paddingHorizontal: SPACING[4],
-    backgroundColor: DARK.SURFACE,
-    borderRadius: RADIUS.LG,
-    gap: SPACING[3],
-  },
-  workoutNumber: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  workoutNumberText: {
-    fontSize: 15,
-    fontWeight: '700',
-  },
-  workoutInfo: {
-    flex: 1,
-    gap: 2,
-  },
-  workoutMeta: {
-    alignItems: 'flex-end',
-    gap: 4,
-  },
-})
+    // Workout List
+    workoutList: {
+      paddingHorizontal: LAYOUT.SCREEN_PADDING,
+      paddingTop: SPACING[4],
+      gap: SPACING[2],
+    },
+    workoutCard: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: SPACING[3],
+      paddingHorizontal: SPACING[4],
+      backgroundColor: colors.bg.surface,
+      borderRadius: RADIUS.LG,
+      gap: SPACING[3],
+    },
+    workoutNumber: {
+      width: 32,
+      height: 32,
+      borderRadius: 16,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    workoutNumberText: {
+      fontSize: 15,
+      fontWeight: '700',
+    },
+    workoutInfo: {
+      flex: 1,
+      gap: 2,
+    },
+    workoutMeta: {
+      alignItems: 'flex-end',
+      gap: 4,
+    },
+  })
+}
--- a/app/complete/[id].tsx
+++ b/app/complete/[id].tsx
@@ -3,7 +3,7 @@
 * Celebration with real data from activity store
 */

-import { useRef, useEffect } from 'react'
+import { useRef, useEffect, useMemo } from 'react'
 import {
  View,
  Text as RNText,
@@ -20,17 +20,15 @@ import { BlurView } from 'expo-blur'
 import Ionicons from '@expo/vector-icons/Ionicons'

 import * as Sharing from 'expo-sharing'
+import { useTranslation } from 'react-i18next'
+
 import { useHaptics } from '@/src/shared/hooks'
 import { useActivityStore } from '@/src/shared/stores'
-import { getWorkoutById, getTrainerById, getPopularWorkouts } from '@/src/shared/data'
+import { getWorkoutById, getPopularWorkouts } from '@/src/shared/data'
+import { useTranslatedWorkout, useTranslatedWorkouts } from '@/src/shared/data/useTranslatedData'

-import {
-  BRAND,
-  DARK,
-  TEXT,
-  GLASS,
-  SHADOW,
-} from '@/src/shared/constants/colors'
+import { useThemeColors, BRAND } from '@/src/shared/theme'
+import type { ThemeColors } from '@/src/shared/theme/types'
 import { TYPOGRAPHY } from '@/src/shared/constants/typography'
 import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
 import { RADIUS } from '@/src/shared/constants/borderRadius'
@@ -51,6 +49,8 @@ function SecondaryButton({
  children: React.ReactNode
  icon?: keyof typeof Ionicons.glyphMap
 }) {
+  const colors = useThemeColors()
+  const styles = useMemo(() => createStyles(colors), [colors])
  const scaleAnim = useRef(new Animated.Value(1)).current

  const handlePressIn = () => {
@@ -77,7 +77,7 @@ function SecondaryButton({
      style={{ width: '100%' }}
    >
      <Animated.View style={[styles.secondaryButton, { transform: [{ scale: scaleAnim }] }]}>
-        {icon && <Ionicons name={icon} size={18} color={TEXT.PRIMARY} style={styles.buttonIcon} />}
+        {icon && <Ionicons name={icon} size={18} color={colors.text.primary} style={styles.buttonIcon} />}
        <RNText style={styles.secondaryButtonText}>{children}</RNText>
      </Animated.View>
    </Pressable>
@@ -91,6 +91,8 @@ function PrimaryButton({
  onPress: () => void
  children: React.ReactNode
 }) {
+  const colors = useThemeColors()
+  const styles = useMemo(() => createStyles(colors), [colors])
  const scaleAnim = useRef(new Animated.Value(1)).current

  const handlePressIn = () => {
@@ -134,6 +136,8 @@ function PrimaryButton({
 // ═══════════════════════════════════════════════════════════════════════════

 function CelebrationRings() {
+  const colors = useThemeColors()
+  const styles = useMemo(() => createStyles(colors), [colors])
  const ring1Anim = useRef(new Animated.Value(0)).current
  const ring2Anim = useRef(new Animated.Value(0)).current
  const ring3Anim = useRef(new Animated.Value(0)).current
@@ -190,6 +194,8 @@ function StatCard({
  icon: keyof typeof Ionicons.glyphMap
  delay?: number
 }) {
+  const colors = useThemeColors()
+  const styles = useMemo(() => createStyles(colors), [colors])
  const scaleAnim = useRef(new Animated.Value(0)).current

  useEffect(() => {
@@ -205,7 +211,7 @@ function StatCard({

  return (
    <Animated.View style={[styles.statCard, { transform: [{ scale: scaleAnim }] }]}>
-      <BlurView intensity={GLASS.BLUR_MEDIUM} tint="dark" style={StyleSheet.absoluteFill} />
+      <BlurView intensity={colors.glass.blurMedium} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
      <Ionicons name={icon} size={24} color={BRAND.PRIMARY} />
      <RNText style={styles.statValue}>{value}</RNText>
      <RNText style={styles.statLabel}>{label}</RNText>
@@ -214,6 +220,9 @@ function StatCard({
 }

 function BurnBarResult({ percentile }: { percentile: number }) {
+  const { t } = useTranslation()
+  const colors = useThemeColors()
+  const styles = useMemo(() => createStyles(colors), [colors])
  const barAnim = useRef(new Animated.Value(0)).current

  useEffect(() => {
@@ -232,8 +241,8 @@ function BurnBarResult({ percentile }: { percentile: number }) {

  return (
    <View style={styles.burnBarContainer}>
-      <RNText style={styles.burnBarTitle}>Burn Bar</RNText>
-      <RNText style={styles.burnBarResult}>You beat {percentile}% of users!</RNText>
+      <RNText style={styles.burnBarTitle}>{t('screens:complete.burnBar')}</RNText>
+      <RNText style={styles.burnBarResult}>{t('screens:complete.burnBarResult', { percentile })}</RNText>
      <View style={styles.burnBarTrack}>
        <Animated.View style={[styles.burnBarFill, { width: barWidth }]} />
      </View>
@@ -249,9 +258,14 @@ export default function WorkoutCompleteScreen() {
  const insets = useSafeAreaInsets()
  const router = useRouter()
  const haptics = useHaptics()
+  const { t } = useTranslation()
  const { id } = useLocalSearchParams<{ id: string }>()

-  const workout = getWorkoutById(id ?? '1')
+  const colors = useThemeColors()
+  const styles = useMemo(() => createStyles(colors), [colors])
+
+  const rawWorkout = getWorkoutById(id ?? '1')
+  const workout = useTranslatedWorkout(rawWorkout)
  const streak = useActivityStore((s) => s.streak)
  const history = useActivityStore((s) => s.history)
  const recentWorkouts = history.slice(0, 1)
@@ -262,7 +276,8 @@ export default function WorkoutCompleteScreen() {
  const resultMinutes = latestResult?.durationMinutes ?? workout?.duration ?? 4

  // Recommended workouts (different from current)
-  const recommended = getPopularWorkouts(4).filter(w => w.id !== id).slice(0, 3)
+  const rawRecommended = getPopularWorkouts(4).filter(w => w.id !== id).slice(0, 3)
+  const recommended = useTranslatedWorkouts(rawRecommended)

  const handleGoHome = () => {
    haptics.buttonTap()
@@ -274,7 +289,7 @@ export default function WorkoutCompleteScreen() {
    const isAvailable = await Sharing.isAvailableAsync()
    if (isAvailable) {
      await Sharing.shareAsync('https://tabatafit.app', {
-        dialogTitle: `I just completed ${workout?.title ?? 'a workout'}! 🔥 ${resultCalories} calories in ${resultMinutes} minutes.`,
+        dialogTitle: t('screens:complete.shareText', { title: workout?.title ?? 'a workout', calories: resultCalories, duration: resultMinutes }),
      })
    }
  }
@@ -297,15 +312,15 @@ export default function WorkoutCompleteScreen() {
        {/* Celebration */}
        <View style={styles.celebrationSection}>
          <RNText style={styles.celebrationEmoji}>🎉</RNText>
-          <RNText style={styles.celebrationTitle}>WORKOUT COMPLETE</RNText>
+          <RNText style={styles.celebrationTitle}>{t('screens:complete.title')}</RNText>
          <CelebrationRings />
        </View>

        {/* Stats Grid */}
        <View style={styles.statsGrid}>
-          <StatCard value={resultCalories} label="CALORIES" icon="flame" delay={100} />
-          <StatCard value={resultMinutes} label="MINUTES" icon="time" delay={200} />
-          <StatCard value="100%" label="COMPLETE" icon="checkmark-circle" delay={300} />
+          <StatCard value={resultCalories} label={t('screens:complete.caloriesLabel')} icon="flame" delay={100} />
+          <StatCard value={resultMinutes} label={t('screens:complete.minutesLabel')} icon="time" delay={200} />
+          <StatCard value="100%" label={t('screens:complete.completeLabel')} icon="checkmark-circle" delay={300} />
        </View>

        {/* Burn Bar */}
@@ -319,8 +334,8 @@ export default function WorkoutCompleteScreen() {
            <Ionicons name="flame" size={32} color={BRAND.PRIMARY} />
          </View>
          <View style={styles.streakInfo}>
-            <RNText style={styles.streakTitle}>{streak.current} Day Streak!</RNText>
-            <RNText style={styles.streakSubtitle}>Keep the momentum going!</RNText>
+            <RNText style={styles.streakTitle}>{t('screens:complete.streakTitle', { count: streak.current })}</RNText>
+            <RNText style={styles.streakSubtitle}>{t('screens:complete.streakSubtitle')}</RNText>
          </View>
        </View>

@@ -329,7 +344,7 @@ export default function WorkoutCompleteScreen() {
        {/* Share Button */}
        <View style={styles.shareSection}>
          <SecondaryButton onPress={handleShare} icon="share-outline">
-            Share Your Workout
+            {t('screens:complete.shareWorkout')}
          </SecondaryButton>
        </View>

@@ -337,39 +352,36 @@ export default function WorkoutCompleteScreen() {

        {/* Recommended */}
        <View style={styles.recommendedSection}>
-          <RNText style={styles.recommendedTitle}>Recommended Next</RNText>
+          <RNText style={styles.recommendedTitle}>{t('screens:complete.recommendedNext')}</RNText>
          <View style={styles.recommendedGrid}>
-            {recommended.map((w) => {
-              const trainer = getTrainerById(w.trainerId)
-              return (
-                <Pressable
-                  key={w.id}
-                  onPress={() => handleWorkoutPress(w.id)}
-                  style={styles.recommendedCard}
-                >
-                  <BlurView intensity={GLASS.BLUR_LIGHT} tint="dark" style={StyleSheet.absoluteFill} />
-                  <View style={styles.recommendedThumb}>
-                    <LinearGradient
-                      colors={[trainer?.color ?? BRAND.PRIMARY, BRAND.PRIMARY_LIGHT]}
-                      style={StyleSheet.absoluteFill}
-                    />
-                    <RNText style={styles.recommendedInitial}>{trainer?.name[0] ?? 'T'}</RNText>
-                  </View>
-                  <RNText style={styles.recommendedTitleText} numberOfLines={1}>{w.title}</RNText>
-                  <RNText style={styles.recommendedDurationText}>{w.duration} min</RNText>
-                </Pressable>
-              )
-            })}
+            {recommended.map((w) => (
+              <Pressable
+                key={w.id}
+                onPress={() => handleWorkoutPress(w.id)}
+                style={styles.recommendedCard}
+              >
+                <BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
+                <View style={styles.recommendedThumb}>
+                  <LinearGradient
+                    colors={[BRAND.PRIMARY, BRAND.PRIMARY_LIGHT]}
+                    style={StyleSheet.absoluteFill}
+                  />
+                  <Ionicons name="flame" size={24} color="#FFFFFF" />
+                </View>
+                <RNText style={styles.recommendedTitleText} numberOfLines={1}>{w.title}</RNText>
+                <RNText style={styles.recommendedDurationText}>{t('units.minUnit', { count: w.duration })}</RNText>
+              </Pressable>
+            ))}
          </View>
        </View>
      </ScrollView>

      {/* Fixed Bottom Button */}
      <View style={[styles.bottomBar, { paddingBottom: insets.bottom + SPACING[4] }]}>
-        <BlurView intensity={GLASS.BLUR_HEAVY} tint="dark" style={StyleSheet.absoluteFill} />
+        <BlurView intensity={colors.glass.blurHeavy} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
        <View style={styles.homeButtonContainer}>
          <PrimaryButton onPress={handleGoHome}>
-            Back to Home
+            {t('screens:complete.backToHome')}
          </PrimaryButton>
        </View>
      </View>
@@ -381,246 +393,248 @@ export default function WorkoutCompleteScreen() {
 // STYLES
 // ═══════════════════════════════════════════════════════════════════════════

-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: DARK.BASE,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  scrollContent: {
-    paddingHorizontal: LAYOUT.SCREEN_PADDING,
-  },
+function createStyles(colors: ThemeColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.bg.base,
+    },
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {
+      paddingHorizontal: LAYOUT.SCREEN_PADDING,
+    },

-  // Buttons
-  secondaryButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: SPACING[3],
-    paddingHorizontal: SPACING[4],
-    borderRadius: RADIUS.LG,
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.3)',
-    backgroundColor: 'transparent',
-  },
-  secondaryButtonText: {
-    ...TYPOGRAPHY.BODY,
-    color: TEXT.PRIMARY,
-    fontWeight: '600',
-  },
-  primaryButton: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: SPACING[4],
-    paddingHorizontal: SPACING[6],
-    borderRadius: RADIUS.LG,
-    overflow: 'hidden',
-  },
-  primaryButtonText: {
-    ...TYPOGRAPHY.HEADLINE,
-    color: TEXT.PRIMARY,
-    fontWeight: '700',
-  },
-  buttonIcon: {
-    marginRight: SPACING[2],
-  },
+    // Buttons
+    secondaryButton: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: SPACING[3],
+      paddingHorizontal: SPACING[4],
+      borderRadius: RADIUS.LG,
+      borderWidth: 1,
+      borderColor: colors.border.glassStrong,
+      backgroundColor: 'transparent',
+    },
+    secondaryButtonText: {
+      ...TYPOGRAPHY.BODY,
+      color: colors.text.primary,
+      fontWeight: '600',
+    },
+    primaryButton: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: SPACING[4],
+      paddingHorizontal: SPACING[6],
+      borderRadius: RADIUS.LG,
+      overflow: 'hidden',
+    },
+    primaryButtonText: {
+      ...TYPOGRAPHY.HEADLINE,
+      color: '#FFFFFF',
+      fontWeight: '700',
+    },
+    buttonIcon: {
+      marginRight: SPACING[2],
+    },

-  // Celebration
-  celebrationSection: {
-    alignItems: 'center',
-    paddingVertical: SPACING[8],
-  },
-  celebrationEmoji: {
-    fontSize: 64,
-    marginBottom: SPACING[4],
-  },
-  celebrationTitle: {
-    ...TYPOGRAPHY.TITLE_1,
-    color: TEXT.PRIMARY,
-    letterSpacing: 2,
-  },
-  ringsContainer: {
-    flexDirection: 'row',
-    marginTop: SPACING[6],
-    gap: SPACING[4],
-  },
-  ring: {
-    width: 64,
-    height: 64,
-    borderRadius: 32,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 2,
-    borderColor: 'rgba(255, 255, 255, 0.2)',
-  },
-  ring1: {
-    borderColor: BRAND.PRIMARY,
-    backgroundColor: 'rgba(255, 107, 53, 0.15)',
-  },
-  ring2: {
-    borderColor: '#30D158',
-    backgroundColor: 'rgba(48, 209, 88, 0.15)',
-  },
-  ring3: {
-    borderColor: '#5AC8FA',
-    backgroundColor: 'rgba(90, 200, 250, 0.15)',
-  },
-  ringEmoji: {
-    fontSize: 28,
-  },
+    // Celebration
+    celebrationSection: {
+      alignItems: 'center',
+      paddingVertical: SPACING[8],
+    },
+    celebrationEmoji: {
+      fontSize: 64,
+      marginBottom: SPACING[4],
+    },
+    celebrationTitle: {
+      ...TYPOGRAPHY.TITLE_1,
+      color: colors.text.primary,
+      letterSpacing: 2,
+    },
+    ringsContainer: {
+      flexDirection: 'row',
+      marginTop: SPACING[6],
+      gap: SPACING[4],
+    },
+    ring: {
+      width: 64,
+      height: 64,
+      borderRadius: 32,
+      backgroundColor: colors.border.glass,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderWidth: 2,
+      borderColor: colors.border.glassStrong,
+    },
+    ring1: {
+      borderColor: BRAND.PRIMARY,
+      backgroundColor: 'rgba(255, 107, 53, 0.15)',
+    },
+    ring2: {
+      borderColor: '#30D158',
+      backgroundColor: 'rgba(48, 209, 88, 0.15)',
+    },
+    ring3: {
+      borderColor: '#5AC8FA',
+      backgroundColor: 'rgba(90, 200, 250, 0.15)',
+    },
+    ringEmoji: {
+      fontSize: 28,
+    },

-  // Stats Grid
-  statsGrid: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: SPACING[6],
-  },
-  statCard: {
-    width: (SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2 - SPACING[4]) / 3,
-    padding: SPACING[3],
-    borderRadius: RADIUS.LG,
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.1)',
-    overflow: 'hidden',
-  },
-  statValue: {
-    ...TYPOGRAPHY.TITLE_1,
-    color: TEXT.PRIMARY,
-    marginTop: SPACING[2],
-  },
-  statLabel: {
-    ...TYPOGRAPHY.CAPTION_2,
-    color: TEXT.TERTIARY,
-    marginTop: SPACING[1],
-  },
+    // Stats Grid
+    statsGrid: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginBottom: SPACING[6],
+    },
+    statCard: {
+      width: (SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2 - SPACING[4]) / 3,
+      padding: SPACING[3],
+      borderRadius: RADIUS.LG,
+      alignItems: 'center',
+      borderWidth: 1,
+      borderColor: colors.border.glass,
+      overflow: 'hidden',
+    },
+    statValue: {
+      ...TYPOGRAPHY.TITLE_1,
+      color: colors.text.primary,
+      marginTop: SPACING[2],
+    },
+    statLabel: {
+      ...TYPOGRAPHY.CAPTION_2,
+      color: colors.text.tertiary,
+      marginTop: SPACING[1],
+    },

-  // Burn Bar
-  burnBarContainer: {
-    marginBottom: SPACING[6],
-  },
-  burnBarTitle: {
-    ...TYPOGRAPHY.HEADLINE,
-    color: TEXT.PRIMARY,
-  },
-  burnBarResult: {
-    ...TYPOGRAPHY.BODY,
-    color: BRAND.PRIMARY,
-    marginTop: SPACING[1],
-    marginBottom: SPACING[3],
-  },
-  burnBarTrack: {
-    height: 8,
-    backgroundColor: DARK.SURFACE,
-    borderRadius: 4,
-    overflow: 'hidden',
-  },
-  burnBarFill: {
-    height: '100%',
-    backgroundColor: BRAND.PRIMARY,
-    borderRadius: 4,
-  },
+    // Burn Bar
+    burnBarContainer: {
+      marginBottom: SPACING[6],
+    },
+    burnBarTitle: {
+      ...TYPOGRAPHY.HEADLINE,
+      color: colors.text.tertiary,
+    },
+    burnBarResult: {
+      ...TYPOGRAPHY.BODY,
+      color: BRAND.PRIMARY,
+      marginTop: SPACING[1],
+      marginBottom: SPACING[3],
+    },
+    burnBarTrack: {
+      height: 8,
+      backgroundColor: colors.bg.surface,
+      borderRadius: 4,
+      overflow: 'hidden',
+    },
+    burnBarFill: {
+      height: '100%',
+      backgroundColor: BRAND.PRIMARY,
+      borderRadius: 4,
+    },

-  // Divider
-  divider: {
-    height: 1,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
-    marginVertical: SPACING[2],
-  },
+    // Divider
+    divider: {
+      height: 1,
+      backgroundColor: colors.border.glass,
+      marginVertical: SPACING[2],
+    },

-  // Streak
-  streakSection: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: SPACING[4],
-    gap: SPACING[4],
-  },
-  streakBadge: {
-    width: 64,
-    height: 64,
-    borderRadius: 32,
-    backgroundColor: 'rgba(255, 107, 53, 0.15)',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  streakInfo: {
-    flex: 1,
-  },
-  streakTitle: {
-    ...TYPOGRAPHY.TITLE_2,
-    color: TEXT.PRIMARY,
-  },
-  streakSubtitle: {
-    ...TYPOGRAPHY.BODY,
-    color: TEXT.TERTIARY,
-    marginTop: SPACING[1],
-  },
+    // Streak
+    streakSection: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: SPACING[4],
+      gap: SPACING[4],
+    },
+    streakBadge: {
+      width: 64,
+      height: 64,
+      borderRadius: 32,
+      backgroundColor: 'rgba(255, 107, 53, 0.15)',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    streakInfo: {
+      flex: 1,
+    },
+    streakTitle: {
+      ...TYPOGRAPHY.TITLE_2,
+      color: colors.text.primary,
+    },
+    streakSubtitle: {
+      ...TYPOGRAPHY.BODY,
+      color: colors.text.tertiary,
+      marginTop: SPACING[1],
+    },

-  // Share
-  shareSection: {
-    paddingVertical: SPACING[4],
-    alignItems: 'center',
-  },
+    // Share
+    shareSection: {
+      paddingVertical: SPACING[4],
+      alignItems: 'center',
+    },

-  // Recommended
-  recommendedSection: {
-    paddingVertical: SPACING[4],
-  },
-  recommendedTitle: {
-    ...TYPOGRAPHY.HEADLINE,
-    color: TEXT.PRIMARY,
-    marginBottom: SPACING[4],
-  },
-  recommendedGrid: {
-    flexDirection: 'row',
-    gap: SPACING[3],
-  },
-  recommendedCard: {
-    flex: 1,
-    padding: SPACING[3],
-    borderRadius: RADIUS.LG,
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.1)',
-    overflow: 'hidden',
-  },
-  recommendedThumb: {
-    width: '100%',
-    aspectRatio: 1,
-    borderRadius: RADIUS.MD,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: SPACING[2],
-    overflow: 'hidden',
-  },
-  recommendedInitial: {
-    ...TYPOGRAPHY.TITLE_1,
-    color: TEXT.PRIMARY,
-  },
-  recommendedTitleText: {
-    ...TYPOGRAPHY.CARD_TITLE,
-    color: TEXT.PRIMARY,
-  },
-  recommendedDurationText: {
-    ...TYPOGRAPHY.CARD_METADATA,
-    color: TEXT.TERTIARY,
-  },
+    // Recommended
+    recommendedSection: {
+      paddingVertical: SPACING[4],
+    },
+    recommendedTitle: {
+      ...TYPOGRAPHY.HEADLINE,
+      color: colors.text.primary,
+      marginBottom: SPACING[4],
+    },
+    recommendedGrid: {
+      flexDirection: 'row',
+      gap: SPACING[3],
+    },
+    recommendedCard: {
+      flex: 1,
+      padding: SPACING[3],
+      borderRadius: RADIUS.LG,
+      borderWidth: 1,
+      borderColor: colors.border.glass,
+      overflow: 'hidden',
+    },
+    recommendedThumb: {
+      width: '100%',
+      aspectRatio: 1,
+      borderRadius: RADIUS.MD,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginBottom: SPACING[2],
+      overflow: 'hidden',
+    },
+    recommendedInitial: {
+      ...TYPOGRAPHY.TITLE_1,
+      color: colors.text.primary,
+    },
+    recommendedTitleText: {
+      ...TYPOGRAPHY.CARD_TITLE,
+      color: colors.text.primary,
+    },
+    recommendedDurationText: {
+      ...TYPOGRAPHY.CARD_METADATA,
+      color: colors.text.tertiary,
+    },

-  // Bottom Bar
-  bottomBar: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    paddingHorizontal: LAYOUT.SCREEN_PADDING,
-    paddingTop: SPACING[4],
-    borderTopWidth: 1,
-    borderTopColor: 'rgba(255, 255, 255, 0.1)',
-  },
-  homeButtonContainer: {
-    height: 56,
-    justifyContent: 'center',
-  },
-})
+    // Bottom Bar
+    bottomBar: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      paddingHorizontal: LAYOUT.SCREEN_PADDING,
+      paddingTop: SPACING[4],
+      borderTopWidth: 1,
+      borderTopColor: colors.border.glass,
+    },
+    homeButtonContainer: {
+      height: 56,
+      justifyContent: 'center',
+    },
+  })
+}
--- a/app/onboarding.tsx
+++ b/app/onboarding.tsx
--- a/app/player/[id].tsx
+++ b/app/player/[id].tsx
@@ -2,18 +2,21 @@
 * TabataFit Player Screen
 * Full-screen workout player with timer overlay
 * Wired to shared data + useTimer hook
+ * FORCE DARK — always uses darkColors regardless of system theme
 */

-import React, { useRef, useEffect, useCallback, useState } from 'react'
+import React, { useRef, useEffect, useCallback, useState, useMemo } from 'react'
 import {
  View,
  Text,
  StyleSheet,
  Pressable,
  Animated,
+  Easing,
  Dimensions,
  StatusBar,
 } from 'react-native'
+import Svg, { Circle } from 'react-native-svg'
 import { useRouter, useLocalSearchParams } from 'expo-router'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { LinearGradient } from 'expo-linear-gradient'
@@ -21,25 +24,22 @@ import { BlurView } from 'expo-blur'
 import { useKeepAwake } from 'expo-keep-awake'
 import Ionicons from '@expo/vector-icons/Ionicons'

+import { useTranslation } from 'react-i18next'
+
 import { useTimer } from '@/src/shared/hooks/useTimer'
 import { useHaptics } from '@/src/shared/hooks/useHaptics'
 import { useAudio } from '@/src/shared/hooks/useAudio'
 import { useActivityStore } from '@/src/shared/stores'
-import { getWorkoutById, getTrainerById } from '@/src/shared/data'
+import { getWorkoutById } from '@/src/shared/data'
+import { useTranslatedWorkout } from '@/src/shared/data/useTranslatedData'

-import {
-  BRAND,
-  DARK,
-  TEXT,
-  GLASS,
-  SHADOW,
-  PHASE_COLORS,
-  GRADIENTS,
-} from '@/src/shared/constants/colors'
+import { track } from '@/src/shared/services/analytics'
+import { BRAND, PHASE_COLORS, GRADIENTS, darkColors } from '@/src/shared/theme'
+import type { ThemeColors } from '@/src/shared/theme/types'
 import { TYPOGRAPHY } from '@/src/shared/constants/typography'
 import { SPACING } from '@/src/shared/constants/spacing'
 import { RADIUS } from '@/src/shared/constants/borderRadius'
-import { DURATION, EASE, SPRING } from '@/src/shared/constants/animations'
+import { SPRING } from '@/src/shared/constants/animations'

 const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window')

@@ -49,6 +49,8 @@ const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window')

 type TimerPhase = 'PREP' | 'WORK' | 'REST' | 'COMPLETE'

+const AnimatedCircle = Animated.createAnimatedComponent(Circle)
+
 function TimerRing({
  progress,
  phase,
@@ -58,48 +60,78 @@ function TimerRing({
  phase: TimerPhase
  size?: number
 }) {
+  const colors = darkColors
  const strokeWidth = 12
+  const radius = (size - strokeWidth) / 2
+  const circumference = 2 * Math.PI * radius
  const phaseColor = PHASE_COLORS[phase].fill

+  const animatedProgress = useRef(new Animated.Value(0)).current
+  const prevProgress = useRef(0)
+
+  useEffect(() => {
+    // If progress jumped backwards (new phase started), snap instantly
+    if (progress < prevProgress.current - 0.05) {
+      animatedProgress.setValue(progress)
+    } else {
+      Animated.timing(animatedProgress, {
+        toValue: progress,
+        duration: 1000,
+        easing: Easing.linear,
+        useNativeDriver: false,
+      }).start()
+    }
+    prevProgress.current = progress
+  }, [progress])
+
+  const strokeDashoffset = animatedProgress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [circumference, 0],
+  })
+
+  const timerStyles = useMemo(() => createTimerStyles(colors), [colors])
+
  return (
    <View style={[timerStyles.timerRingContainer, { width: size, height: size }]}>
-      <View
-        style={[
-          timerStyles.timerRingBg,
-          {
-            width: size,
-            height: size,
-            borderRadius: size / 2,
-            borderWidth: strokeWidth,
-          },
-        ]}
-      />
-      <View style={timerStyles.timerRingContent}>
-        <View
-          style={[
-            timerStyles.timerProgressRing,
-            {
-              width: size - strokeWidth * 2,
-              height: size - strokeWidth * 2,
-              borderRadius: (size - strokeWidth * 2) / 2,
-              borderColor: phaseColor,
-              borderTopWidth: strokeWidth,
-              opacity: progress,
-            },
-          ]}
+      <Svg width={size} height={size}>
+        {/* Background track */}
+        <Circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke={colors.border.glass}
+          strokeWidth={strokeWidth}
+          fill="none"
        />
-      </View>
+        {/* Progress arc */}
+        <AnimatedCircle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke={phaseColor}
+          strokeWidth={strokeWidth}
+          fill="none"
+          strokeLinecap="round"
+          strokeDasharray={circumference}
+          strokeDashoffset={strokeDashoffset}
+          rotation="-90"
+          origin={`${size / 2}, ${size / 2}`}
+        />
+      </Svg>
    </View>
  )
 }

 function PhaseIndicator({ phase }: { phase: TimerPhase }) {
+  const { t } = useTranslation()
+  const colors = darkColors
+  const timerStyles = useMemo(() => createTimerStyles(colors), [colors])
  const phaseColor = PHASE_COLORS[phase].fill
  const phaseLabels: Record<TimerPhase, string> = {
-    PREP: 'GET READY',
-    WORK: 'WORK',
-    REST: 'REST',
-    COMPLETE: 'COMPLETE',
+    PREP: t('screens:player.phases.prep'),
+    WORK: t('screens:player.phases.work'),
+    REST: t('screens:player.phases.rest'),
+    COMPLETE: t('screens:player.phases.complete'),
  }

  return (
@@ -116,13 +148,16 @@ function ExerciseDisplay({
  exercise: string
  nextExercise?: string
 }) {
+  const { t } = useTranslation()
+  const colors = darkColors
+  const timerStyles = useMemo(() => createTimerStyles(colors), [colors])
  return (
    <View style={timerStyles.exerciseDisplay}>
-      <Text style={timerStyles.currentExerciseLabel}>Current</Text>
+      <Text style={timerStyles.currentExerciseLabel}>{t('screens:player.current')}</Text>
      <Text style={timerStyles.currentExercise}>{exercise}</Text>
      {nextExercise && (
        <View style={timerStyles.nextExerciseContainer}>
-          <Text style={timerStyles.nextExerciseLabel}>Next: </Text>
+          <Text style={timerStyles.nextExerciseLabel}>{t('screens:player.next')}</Text>
          <Text style={timerStyles.nextExercise}>{nextExercise}</Text>
        </View>
      )}
@@ -131,10 +166,13 @@ function ExerciseDisplay({
 }

 function RoundIndicator({ current, total }: { current: number; total: number }) {
+  const { t } = useTranslation()
+  const colors = darkColors
+  const timerStyles = useMemo(() => createTimerStyles(colors), [colors])
  return (
    <View style={timerStyles.roundIndicator}>
      <Text style={timerStyles.roundText}>
-        Round <Text style={timerStyles.roundCurrent}>{current}</Text>/{total}
+        {t('screens:player.round')} <Text style={timerStyles.roundCurrent}>{current}</Text>/{total}
      </Text>
    </View>
  )
@@ -151,6 +189,8 @@ function ControlButton({
  size?: number
  variant?: 'primary' | 'secondary' | 'danger'
 }) {
+  const colors = darkColors
+  const timerStyles = useMemo(() => createTimerStyles(colors), [colors])
  const scaleAnim = useRef(new Animated.Value(1)).current

  const handlePressIn = () => {
@@ -174,7 +214,7 @@ function ControlButton({
      ? BRAND.PRIMARY
      : variant === 'danger'
      ? '#FF3B30'
-      : 'rgba(255, 255, 255, 0.1)'
+      : colors.border.glass

  return (
    <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
@@ -185,7 +225,7 @@ function ControlButton({
        style={[timerStyles.controlButton, { width: size, height: size, borderRadius: size / 2 }]}
      >
        <View style={[timerStyles.controlButtonBg, { backgroundColor }]} />
-        <Ionicons name={icon} size={size * 0.4} color={TEXT.PRIMARY} />
+        <Ionicons name={icon} size={size * 0.4} color={colors.text.primary} />
      </Pressable>
    </Animated.View>
  )
@@ -198,19 +238,22 @@ function BurnBar({
  currentCalories: number
  avgCalories: number
 }) {
+  const { t } = useTranslation()
+  const colors = darkColors
+  const timerStyles = useMemo(() => createTimerStyles(colors), [colors])
  const percentage = Math.min((currentCalories / avgCalories) * 100, 100)

  return (
    <View style={timerStyles.burnBar}>
      <View style={timerStyles.burnBarHeader}>
-        <Text style={timerStyles.burnBarLabel}>Burn Bar</Text>
-        <Text style={timerStyles.burnBarValue}>{currentCalories} cal</Text>
+        <Text style={timerStyles.burnBarLabel}>{t('screens:player.burnBar')}</Text>
+        <Text style={timerStyles.burnBarValue}>{t('units.calUnit', { count: currentCalories })}</Text>
      </View>
      <View style={timerStyles.burnBarTrack}>
        <View style={[timerStyles.burnBarFill, { width: `${percentage}%` }]} />
        <View style={[timerStyles.burnBarAvg, { left: '50%' }]} />
      </View>
-      <Text style={timerStyles.burnBarAvgLabel}>Community avg: {avgCalories} cal</Text>
+      <Text style={timerStyles.burnBarAvgLabel}>{t('screens:player.communityAvg', { calories: avgCalories })}</Text>
    </View>
  )
 }
@@ -225,44 +268,57 @@ export default function PlayerScreen() {
  const { id } = useLocalSearchParams<{ id: string }>()
  const insets = useSafeAreaInsets()
  const haptics = useHaptics()
+  const { t } = useTranslation()
  const addWorkoutResult = useActivityStore((s) => s.addWorkoutResult)

-  const workout = getWorkoutById(id ?? '1')
-  const trainer = workout ? getTrainerById(workout.trainerId) : null
+  const colors = darkColors
+  const styles = useMemo(() => createStyles(colors), [colors])
+  const timerStyles = useMemo(() => createTimerStyles(colors), [colors])

-  const timer = useTimer(workout ?? null)
+  const rawWorkout = getWorkoutById(id ?? '1')
+  const workout = useTranslatedWorkout(rawWorkout)
+  const timer = useTimer(rawWorkout ?? null)
  const audio = useAudio()

  const [showControls, setShowControls] = useState(true)

  // Animation refs
  const timerScaleAnim = useRef(new Animated.Value(0.8)).current
-  const glowAnim = useRef(new Animated.Value(0)).current
-
  const phaseColor = PHASE_COLORS[timer.phase].fill

  // Format time
  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
-    return mins > 0 ? `${mins}:${secs.toString().padStart(2, '0')}` : `${secs}`
+    return `${mins}:${secs.toString().padStart(2, '0')}`
  }

  // Start timer
  const startTimer = useCallback(() => {
    timer.start()
    haptics.buttonTap()
-  }, [timer, haptics])
+    if (workout) {
+      track('workout_started', {
+        workout_id: workout.id,
+        workout_title: workout.title,
+        duration: workout.duration,
+        level: workout.level,
+      })
+    }
+  }, [timer, haptics, workout])

  // Pause/Resume
  const togglePause = useCallback(() => {
+    const workoutId = workout?.id ?? id ?? ''
    if (timer.isPaused) {
      timer.resume()
+      track('workout_resumed', { workout_id: workoutId })
    } else {
      timer.pause()
+      track('workout_paused', { workout_id: workoutId })
    }
    haptics.selection()
-  }, [timer, haptics])
+  }, [timer, haptics, workout, id])

  // Stop workout
  const stopWorkout = useCallback(() => {
@@ -274,6 +330,15 @@ export default function PlayerScreen() {
  // Complete workout - go to celebration screen
  const completeWorkout = useCallback(() => {
    haptics.workoutComplete()
+    if (workout) {
+      track('workout_completed', {
+        workout_id: workout.id,
+        workout_title: workout.title,
+        calories: timer.calories,
+        duration: workout.duration,
+        rounds: workout.rounds,
+      })
+    }
    if (workout) {
      addWorkoutResult({
        id: Date.now().toString(),
@@ -301,30 +366,12 @@ export default function PlayerScreen() {

  // Entrance animation
  useEffect(() => {
-    Animated.parallel([
-      Animated.spring(timerScaleAnim, {
-        toValue: 1,
-        friction: 6,
-        tension: 100,
-        useNativeDriver: true,
-      }),
-      Animated.loop(
-        Animated.sequence([
-          Animated.timing(glowAnim, {
-            toValue: 1,
-            duration: DURATION.BREATH,
-            easing: EASE.EASE_IN_OUT,
-            useNativeDriver: false,
-          }),
-          Animated.timing(glowAnim, {
-            toValue: 0,
-            duration: DURATION.BREATH,
-            easing: EASE.EASE_IN_OUT,
-            useNativeDriver: false,
-          }),
-        ])
-      ),
-    ]).start()
+    Animated.spring(timerScaleAnim, {
+      toValue: 1,
+      friction: 6,
+      tension: 100,
+      useNativeDriver: true,
+    }).start()
  }, [])

  // Phase change animation + audio
@@ -351,28 +398,18 @@ export default function PlayerScreen() {
    }
  }, [timer.timeRemaining])

-  const glowOpacity = glowAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0.3, 0.6],
-  })
-
  return (
    <View style={styles.container}>
      <StatusBar hidden />

      {/* Background gradient */}
      <LinearGradient
-        colors={[DARK.BASE, DARK.SURFACE]}
+        colors={[colors.bg.base, colors.bg.surface]}
        style={StyleSheet.absoluteFill}
      />

-      {/* Phase glow */}
-      <Animated.View
-        style={[
-          styles.phaseGlow,
-          { opacity: glowOpacity, backgroundColor: phaseColor },
-        ]}
-      />
+      {/* Phase background color */}
+      <View style={[styles.phaseBackground, { backgroundColor: phaseColor }]} />

      {/* Main content */}
      <Pressable style={styles.content} onPress={toggleControls}>
@@ -380,12 +417,12 @@ export default function PlayerScreen() {
        {showControls && (
          <View style={[styles.header, { paddingTop: insets.top + SPACING[4] }]}>
            <Pressable onPress={stopWorkout} style={styles.closeButton}>
-              <BlurView intensity={GLASS.BLUR_LIGHT} tint="dark" style={StyleSheet.absoluteFill} />
-              <Ionicons name="close" size={24} color={TEXT.PRIMARY} />
+              <BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
+              <Ionicons name="close" size={24} color={colors.text.primary} />
            </Pressable>
            <View style={styles.headerCenter}>
              <Text style={styles.workoutTitle}>{workout?.title ?? 'Workout'}</Text>
-              <Text style={styles.workoutTrainer}>with {trainer?.name ?? 'Coach'}</Text>
+              <Text style={styles.workoutTrainer}>{t('durationLevel', { duration: workout?.duration ?? 0, level: t(`levels.${(workout?.level ?? 'beginner').toLowerCase()}`) })}</Text>
            </View>
            <View style={styles.closeButton} />
          </View>
@@ -418,20 +455,20 @@ export default function PlayerScreen() {
        {/* Complete state */}
        {timer.isComplete && (
          <View style={styles.completeContainer}>
-            <Text style={styles.completeTitle}>Workout Complete!</Text>
-            <Text style={styles.completeSubtitle}>Great job!</Text>
+            <Text style={styles.completeTitle}>{t('screens:player.workoutComplete')}</Text>
+            <Text style={styles.completeSubtitle}>{t('screens:player.greatJob')}</Text>
            <View style={styles.completeStats}>
              <View style={styles.completeStat}>
                <Text style={styles.completeStatValue}>{timer.totalRounds}</Text>
-                <Text style={styles.completeStatLabel}>Rounds</Text>
+                <Text style={styles.completeStatLabel}>{t('screens:player.rounds')}</Text>
              </View>
              <View style={styles.completeStat}>
                <Text style={styles.completeStatValue}>{timer.calories}</Text>
-                <Text style={styles.completeStatLabel}>Calories</Text>
+                <Text style={styles.completeStatLabel}>{t('screens:player.calories')}</Text>
              </View>
              <View style={styles.completeStat}>
                <Text style={styles.completeStatValue}>{workout?.duration ?? 4}</Text>
-                <Text style={styles.completeStatLabel}>Minutes</Text>
+                <Text style={styles.completeStatLabel}>{t('screens:player.minutes')}</Text>
              </View>
            </View>
          </View>
@@ -484,7 +521,7 @@ export default function PlayerScreen() {
        {/* Burn Bar */}
        {showControls && timer.isRunning && !timer.isComplete && (
          <View style={[styles.burnBarContainer, { bottom: insets.bottom + 140 }]}>
-            <BlurView intensity={GLASS.BLUR_MEDIUM} tint="dark" style={StyleSheet.absoluteFill} />
+            <BlurView intensity={colors.glass.blurMedium} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
            <BurnBar currentCalories={timer.calories} avgCalories={workout?.calories ?? 45} />
          </View>
        )}
@@ -497,260 +534,250 @@ export default function PlayerScreen() {
 // STYLES
 // ═══════════════════════════════════════════════════════════════════════════

-const timerStyles = StyleSheet.create({
-  timerRingContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  timerRingBg: {
-    borderColor: 'rgba(255, 255, 255, 0.1)',
-    position: 'absolute',
-  },
-  timerRingContent: {
-    position: 'absolute',
-  },
-  timerProgressRing: {
-    position: 'absolute',
-  },
-  timerTextContainer: {
-    position: 'absolute',
-    alignItems: 'center',
-  },
-  phaseIndicator: {
-    paddingHorizontal: SPACING[4],
-    paddingVertical: SPACING[1],
-    borderRadius: RADIUS.FULL,
-    marginBottom: SPACING[2],
-  },
-  phaseText: {
-    ...TYPOGRAPHY.CALLOUT,
-    fontWeight: '700',
-    letterSpacing: 1,
-  },
-  timerTime: {
-    ...TYPOGRAPHY.TIMER_NUMBER,
-    color: TEXT.PRIMARY,
-  },
-  roundIndicator: {
-    marginTop: SPACING[2],
-  },
-  roundText: {
-    ...TYPOGRAPHY.BODY,
-    color: TEXT.TERTIARY,
-  },
-  roundCurrent: {
-    color: TEXT.PRIMARY,
-    fontWeight: '700',
-  },
+function createTimerStyles(colors: ThemeColors) {
+  return StyleSheet.create({
+    timerRingContainer: {
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    timerTextContainer: {
+      position: 'absolute',
+      alignItems: 'center',
+    },
+    phaseIndicator: {
+      paddingHorizontal: SPACING[4],
+      paddingVertical: SPACING[1],
+      borderRadius: RADIUS.FULL,
+      marginBottom: SPACING[2],
+    },
+    phaseText: {
+      ...TYPOGRAPHY.CALLOUT,
+      fontWeight: '700',
+      letterSpacing: 1,
+    },
+    timerTime: {
+      ...TYPOGRAPHY.TIMER_NUMBER,
+      color: colors.text.primary,
+    },
+    roundIndicator: {
+      marginTop: SPACING[2],
+    },
+    roundText: {
+      ...TYPOGRAPHY.BODY,
+      color: colors.text.tertiary,
+    },
+    roundCurrent: {
+      color: colors.text.primary,
+      fontWeight: '700',
+    },

-  // Exercise
-  exerciseDisplay: {
-    alignItems: 'center',
-    marginTop: SPACING[6],
-    paddingHorizontal: SPACING[6],
-  },
-  currentExerciseLabel: {
-    ...TYPOGRAPHY.CAPTION_1,
-    color: TEXT.TERTIARY,
-    textTransform: 'uppercase',
-    letterSpacing: 1,
-  },
-  currentExercise: {
-    ...TYPOGRAPHY.TITLE_1,
-    color: TEXT.PRIMARY,
-    textAlign: 'center',
-    marginTop: SPACING[1],
-  },
-  nextExerciseContainer: {
-    flexDirection: 'row',
-    marginTop: SPACING[2],
-  },
-  nextExerciseLabel: {
-    ...TYPOGRAPHY.BODY,
-    color: TEXT.TERTIARY,
-  },
-  nextExercise: {
-    ...TYPOGRAPHY.BODY,
-    color: BRAND.PRIMARY,
-  },
+    // Exercise
+    exerciseDisplay: {
+      alignItems: 'center',
+      marginTop: SPACING[6],
+      paddingHorizontal: SPACING[6],
+    },
+    currentExerciseLabel: {
+      ...TYPOGRAPHY.CAPTION_1,
+      color: colors.text.tertiary,
+      textTransform: 'uppercase',
+      letterSpacing: 1,
+    },
+    currentExercise: {
+      ...TYPOGRAPHY.TITLE_1,
+      color: colors.text.primary,
+      textAlign: 'center',
+      marginTop: SPACING[1],
+    },
+    nextExerciseContainer: {
+      flexDirection: 'row',
+      marginTop: SPACING[2],
+    },
+    nextExerciseLabel: {
+      ...TYPOGRAPHY.BODY,
+      color: colors.text.tertiary,
+    },
+    nextExercise: {
+      ...TYPOGRAPHY.BODY,
+      color: BRAND.PRIMARY,
+    },

-  // Controls
-  controlButton: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  controlButtonBg: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    borderRadius: 100,
-  },
+    // Controls
+    controlButton: {
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    controlButtonBg: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      borderRadius: 100,
+    },

-  // Burn Bar
-  burnBar: {},
-  burnBarHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: SPACING[2],
-  },
-  burnBarLabel: {
-    ...TYPOGRAPHY.CAPTION_1,
-    color: TEXT.TERTIARY,
-  },
-  burnBarValue: {
-    ...TYPOGRAPHY.CALLOUT,
-    color: BRAND.PRIMARY,
-    fontWeight: '600',
-  },
-  burnBarTrack: {
-    height: 6,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
-    borderRadius: 3,
-    overflow: 'hidden',
-  },
-  burnBarFill: {
-    height: '100%',
-    backgroundColor: BRAND.PRIMARY,
-    borderRadius: 3,
-  },
-  burnBarAvg: {
-    position: 'absolute',
-    top: -2,
-    width: 2,
-    height: 10,
-    backgroundColor: TEXT.TERTIARY,
-  },
-  burnBarAvgLabel: {
-    ...TYPOGRAPHY.CAPTION_2,
-    color: TEXT.TERTIARY,
-    marginTop: SPACING[1],
-    textAlign: 'right',
-  },
-})
+    // Burn Bar
+    burnBar: {},
+    burnBarHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginBottom: SPACING[2],
+    },
+    burnBarLabel: {
+      ...TYPOGRAPHY.CAPTION_1,
+      color: colors.text.tertiary,
+    },
+    burnBarValue: {
+      ...TYPOGRAPHY.CALLOUT,
+      color: BRAND.PRIMARY,
+      fontWeight: '600',
+    },
+    burnBarTrack: {
+      height: 6,
+      backgroundColor: colors.border.glass,
+      borderRadius: 3,
+      overflow: 'hidden',
+    },
+    burnBarFill: {
+      height: '100%',
+      backgroundColor: BRAND.PRIMARY,
+      borderRadius: 3,
+    },
+    burnBarAvg: {
+      position: 'absolute',
+      top: -2,
+      width: 2,
+      height: 10,
+      backgroundColor: colors.text.tertiary,
+    },
+    burnBarAvgLabel: {
+      ...TYPOGRAPHY.CAPTION_2,
+      color: colors.text.tertiary,
+      marginTop: SPACING[1],
+      textAlign: 'right',
+    },
+  })
+}

-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: DARK.BASE,
-  },
-  phaseGlow: {
-    position: 'absolute',
-    top: -100,
-    left: -100,
-    right: -100,
-    bottom: -100,
-    borderRadius: 500,
-  },
-  content: {
-    flex: 1,
-  },
+function createStyles(colors: ThemeColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.bg.base,
+    },
+    phaseBackground: {
+      ...StyleSheet.absoluteFillObject,
+      opacity: 0.15,
+    },
+    content: {
+      flex: 1,
+    },

-  // Header
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: SPACING[4],
-  },
-  closeButton: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden',
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.1)',
-  },
-  headerCenter: {
-    alignItems: 'center',
-  },
-  workoutTitle: {
-    ...TYPOGRAPHY.HEADLINE,
-    color: TEXT.PRIMARY,
-  },
-  workoutTrainer: {
-    ...TYPOGRAPHY.CAPTION_1,
-    color: TEXT.TERTIARY,
-  },
+    // Header
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: SPACING[4],
+    },
+    closeButton: {
+      width: 44,
+      height: 44,
+      borderRadius: 22,
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden',
+      borderWidth: 1,
+      borderColor: colors.border.glass,
+    },
+    headerCenter: {
+      alignItems: 'center',
+    },
+    workoutTitle: {
+      ...TYPOGRAPHY.HEADLINE,
+      color: colors.text.primary,
+    },
+    workoutTrainer: {
+      ...TYPOGRAPHY.CAPTION_1,
+      color: colors.text.tertiary,
+    },

-  // Timer
-  timerContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginTop: SPACING[8],
-  },
+    // Timer
+    timerContainer: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: SPACING[8],
+    },

-  // Controls
-  controls: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    alignItems: 'center',
-  },
-  controlsRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[6],
-  },
+    // Controls
+    controls: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      alignItems: 'center',
+    },
+    controlsRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: SPACING[6],
+    },

-  // Burn Bar
-  burnBarContainer: {
-    position: 'absolute',
-    left: SPACING[4],
-    right: SPACING[4],
-    height: 72,
-    borderRadius: RADIUS.LG,
-    overflow: 'hidden',
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.1)',
-    padding: SPACING[3],
-  },
+    // Burn Bar
+    burnBarContainer: {
+      position: 'absolute',
+      left: SPACING[4],
+      right: SPACING[4],
+      height: 72,
+      borderRadius: RADIUS.LG,
+      overflow: 'hidden',
+      borderWidth: 1,
+      borderColor: colors.border.glass,
+      padding: SPACING[3],
+    },

-  // Complete
-  completeContainer: {
-    alignItems: 'center',
-    marginTop: SPACING[8],
-  },
-  completeTitle: {
-    ...TYPOGRAPHY.LARGE_TITLE,
-    color: TEXT.PRIMARY,
-  },
-  completeSubtitle: {
-    ...TYPOGRAPHY.TITLE_3,
-    color: BRAND.PRIMARY,
-    marginTop: SPACING[1],
-  },
-  completeStats: {
-    flexDirection: 'row',
-    marginTop: SPACING[6],
-    gap: SPACING[8],
-  },
-  completeStat: {
-    alignItems: 'center',
-  },
-  completeStatValue: {
-    ...TYPOGRAPHY.TITLE_1,
-    color: TEXT.PRIMARY,
-  },
-  completeStatLabel: {
-    ...TYPOGRAPHY.CAPTION_1,
-    color: TEXT.TERTIARY,
-    marginTop: SPACING[1],
-  },
-  doneButton: {
-    width: 200,
-    height: 56,
-    borderRadius: RADIUS.GLASS_BUTTON,
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden',
-    ...SHADOW.BRAND_GLOW,
-  },
-  doneButtonText: {
-    ...TYPOGRAPHY.BUTTON_MEDIUM,
-    color: TEXT.PRIMARY,
-    letterSpacing: 1,
-  },
-})
+    // Complete
+    completeContainer: {
+      alignItems: 'center',
+      marginTop: SPACING[8],
+    },
+    completeTitle: {
+      ...TYPOGRAPHY.LARGE_TITLE,
+      color: colors.text.primary,
+    },
+    completeSubtitle: {
+      ...TYPOGRAPHY.TITLE_3,
+      color: BRAND.PRIMARY,
+      marginTop: SPACING[1],
+    },
+    completeStats: {
+      flexDirection: 'row',
+      marginTop: SPACING[6],
+      gap: SPACING[8],
+    },
+    completeStat: {
+      alignItems: 'center',
+    },
+    completeStatValue: {
+      ...TYPOGRAPHY.TITLE_1,
+      color: colors.text.primary,
+    },
+    completeStatLabel: {
+      ...TYPOGRAPHY.CAPTION_1,
+      color: colors.text.tertiary,
+      marginTop: SPACING[1],
+    },
+    doneButton: {
+      width: 200,
+      height: 56,
+      borderRadius: RADIUS.GLASS_BUTTON,
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden',
+      ...colors.shadow.BRAND_GLOW,
+    },
+    doneButtonText: {
+      ...TYPOGRAPHY.BUTTON_MEDIUM,
+      color: colors.text.primary,
+      letterSpacing: 1,
+    },
+  })
+}
--- a/app/workout/[id].tsx
+++ b/app/workout/[id].tsx
@@ -3,25 +3,23 @@
 * Dynamic data via route params
 */

-import { useState } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import { View, Text as RNText, StyleSheet, ScrollView, Pressable } from 'react-native'
 import { useRouter, useLocalSearchParams } from 'expo-router'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { LinearGradient } from 'expo-linear-gradient'
 import { BlurView } from 'expo-blur'
 import Ionicons from '@expo/vector-icons/Ionicons'
+import { useTranslation } from 'react-i18next'

 import { useHaptics } from '@/src/shared/hooks'
-import { getWorkoutById, getTrainerById } from '@/src/shared/data'
+import { track } from '@/src/shared/services/analytics'
+import { getWorkoutById } from '@/src/shared/data'
+import { useTranslatedWorkout, useMusicVibeLabel } from '@/src/shared/data/useTranslatedData'
 import { VideoPlayer } from '@/src/shared/components/VideoPlayer'

-import {
-  BRAND,
-  DARK,
-  TEXT,
-  GLASS,
-  SHADOW,
-} from '@/src/shared/constants/colors'
+import { useThemeColors, BRAND } from '@/src/shared/theme'
+import type { ThemeColors } from '@/src/shared/theme/types'
 import { TYPOGRAPHY } from '@/src/shared/constants/typography'
 import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
 import { RADIUS } from '@/src/shared/constants/borderRadius'
@@ -34,20 +32,36 @@ export default function WorkoutDetailScreen() {
  const insets = useSafeAreaInsets()
  const router = useRouter()
  const haptics = useHaptics()
+  const { t } = useTranslation()
  const { id } = useLocalSearchParams<{ id: string }>()
  const [isSaved, setIsSaved] = useState(false)

-  const workout = getWorkoutById(id ?? '1')
+  const colors = useThemeColors()
+  const styles = useMemo(() => createStyles(colors), [colors])
+
+  const rawWorkout = getWorkoutById(id ?? '1')
+  const workout = useTranslatedWorkout(rawWorkout)
+  const musicVibeLabel = useMusicVibeLabel(rawWorkout?.musicVibe ?? '')
+
+  useEffect(() => {
+    if (workout) {
+      track('workout_detail_viewed', {
+        workout_id: workout.id,
+        workout_title: workout.title,
+        level: workout.level,
+        duration: workout.duration,
+      })
+    }
+  }, [workout?.id])
+
  if (!workout) {
    return (
      <View style={[styles.container, { paddingTop: insets.top, alignItems: 'center', justifyContent: 'center' }]}>
-        <RNText style={{ color: TEXT.PRIMARY, fontSize: 17 }}>Workout not found</RNText>
+        <RNText style={{ color: colors.text.primary, fontSize: 17 }}>{t('screens:workout.notFound')}</RNText>
      </View>
    )
  }

-  const trainer = getTrainerById(workout.trainerId)
-
  const handleStartWorkout = () => {
    haptics.phaseChange()
    router.push(`/player/${workout.id}`)
@@ -76,7 +90,7 @@ export default function WorkoutDetailScreen() {
        <View style={styles.videoPreview}>
          <VideoPlayer
            videoUrl={workout.videoUrl}
-            gradientColors={[trainer?.color ?? BRAND.PRIMARY, BRAND.PRIMARY_DARK]}
+            gradientColors={[BRAND.PRIMARY, BRAND.PRIMARY_DARK]}
            mode="preview"
            style={StyleSheet.absoluteFill}
          />
@@ -85,33 +99,33 @@ export default function WorkoutDetailScreen() {
            style={StyleSheet.absoluteFill}
          />

-          {/* Header overlay */}
+          {/* Header overlay — on video, keep white */}
          <View style={styles.headerOverlay}>
            <Pressable onPress={handleGoBack} style={styles.headerButton}>
-              <BlurView intensity={GLASS.BLUR_LIGHT} tint="dark" style={StyleSheet.absoluteFill} />
-              <Ionicons name="chevron-back" size={24} color={TEXT.PRIMARY} />
+              <BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
+              <Ionicons name="chevron-back" size={24} color="#FFFFFF" />
            </Pressable>

            <View style={styles.headerRight}>
              <Pressable onPress={toggleSave} style={styles.headerButton}>
-                <BlurView intensity={GLASS.BLUR_LIGHT} tint="dark" style={StyleSheet.absoluteFill} />
+                <BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
                <Ionicons
                  name={isSaved ? 'heart' : 'heart-outline'}
                  size={24}
-                  color={isSaved ? '#FF3B30' : TEXT.PRIMARY}
+                  color={isSaved ? '#FF3B30' : '#FFFFFF'}
                />
              </Pressable>
              <Pressable style={styles.headerButton}>
-                <BlurView intensity={GLASS.BLUR_LIGHT} tint="dark" style={StyleSheet.absoluteFill} />
-                <Ionicons name="ellipsis-horizontal" size={24} color={TEXT.PRIMARY} />
+                <BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
+                <Ionicons name="ellipsis-horizontal" size={24} color="#FFFFFF" />
              </Pressable>
            </View>
          </View>

-          {/* Trainer preview */}
+          {/* Workout icon — on brand bg, keep white */}
          <View style={styles.trainerPreview}>
-            <View style={[styles.trainerAvatarLarge, { backgroundColor: trainer?.color ?? BRAND.PRIMARY }]}>
-              <RNText style={styles.trainerInitial}>{trainer?.name[0] ?? 'T'}</RNText>
+            <View style={[styles.trainerAvatarLarge, { backgroundColor: BRAND.PRIMARY }]}>
+              <Ionicons name="flame" size={36} color="#FFFFFF" />
            </View>
          </View>
        </View>
@@ -122,24 +136,19 @@ export default function WorkoutDetailScreen() {

          {/* Quick stats */}
          <View style={styles.quickStats}>
-            <View style={styles.statItem}>
-              <Ionicons name="person" size={16} color={BRAND.PRIMARY} />
-              <RNText style={styles.statText}>{trainer?.name ?? ''}</RNText>
-            </View>
-            <RNText style={styles.statDot}>•</RNText>
            <View style={styles.statItem}>
              <Ionicons name="barbell" size={16} color={BRAND.PRIMARY} />
-              <RNText style={styles.statText}>{workout.level}</RNText>
+              <RNText style={styles.statText}>{t(`levels.${workout.level.toLowerCase()}`)}</RNText>
            </View>
            <RNText style={styles.statDot}>•</RNText>
            <View style={styles.statItem}>
              <Ionicons name="time" size={16} color={BRAND.PRIMARY} />
-              <RNText style={styles.statText}>{workout.duration} min</RNText>
+              <RNText style={styles.statText}>{t('units.minUnit', { count: workout.duration })}</RNText>
            </View>
            <RNText style={styles.statDot}>•</RNText>
            <View style={styles.statItem}>
              <Ionicons name="flame" size={16} color={BRAND.PRIMARY} />
-              <RNText style={styles.statText}>{workout.calories} cal</RNText>
+              <RNText style={styles.statText}>{t('units.calUnit', { count: workout.calories })}</RNText>
            </View>
          </View>
        </View>
@@ -148,7 +157,7 @@ export default function WorkoutDetailScreen() {

        {/* Equipment */}
        <View style={styles.section}>
-          <RNText style={styles.sectionTitle}>What You'll Need</RNText>
+          <RNText style={styles.sectionTitle}>{t('screens:workout.whatYoullNeed')}</RNText>
          {workout.equipment.map((item, index) => (
            <View key={index} style={styles.equipmentItem}>
              <Ionicons name="checkmark-circle" size={20} color="#30D158" />
@@ -161,7 +170,7 @@ export default function WorkoutDetailScreen() {

        {/* Exercises */}
        <View style={styles.section}>
-          <RNText style={styles.sectionTitle}>Exercises ({workout.rounds} rounds)</RNText>
+          <RNText style={styles.sectionTitle}>{t('screens:workout.exercises', { count: workout.rounds })}</RNText>
          <View style={styles.exercisesList}>
            {workout.exercises.map((exercise, index) => (
              <View key={index} style={styles.exerciseRow}>
@@ -173,8 +182,8 @@ export default function WorkoutDetailScreen() {
              </View>
            ))}
            <View style={styles.repeatNote}>
-              <Ionicons name="repeat" size={16} color={TEXT.TERTIARY} />
-              <RNText style={styles.repeatText}>Repeat × {repeatCount} rounds</RNText>
+              <Ionicons name="repeat" size={16} color={colors.text.tertiary} />
+              <RNText style={styles.repeatText}>{t('screens:workout.repeatRounds', { count: repeatCount })}</RNText>
            </View>
          </View>
        </View>
@@ -183,14 +192,14 @@ export default function WorkoutDetailScreen() {

        {/* Music */}
        <View style={styles.section}>
-          <RNText style={styles.sectionTitle}>Music</RNText>
+          <RNText style={styles.sectionTitle}>{t('screens:workout.music')}</RNText>
          <View style={styles.musicCard}>
            <View style={styles.musicIcon}>
              <Ionicons name="musical-notes" size={24} color={BRAND.PRIMARY} />
            </View>
            <View style={styles.musicInfo}>
-              <RNText style={styles.musicName}>{workout.musicVibe.charAt(0).toUpperCase() + workout.musicVibe.slice(1)} Mix</RNText>
-              <RNText style={styles.musicDescription}>Curated for your workout</RNText>
+              <RNText style={styles.musicName}>{t('screens:workout.musicMix', { vibe: musicVibeLabel })}</RNText>
+              <RNText style={styles.musicDescription}>{t('screens:workout.curatedForWorkout')}</RNText>
            </View>
          </View>
        </View>
@@ -198,7 +207,7 @@ export default function WorkoutDetailScreen() {

      {/* Fixed Start Button */}
      <View style={[styles.bottomBar, { paddingBottom: insets.bottom + SPACING[4] }]}>
-        <BlurView intensity={GLASS.BLUR_HEAVY} tint="dark" style={StyleSheet.absoluteFill} />
+        <BlurView intensity={colors.glass.blurHeavy} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
        <View style={styles.startButtonContainer}>
          <Pressable
            style={({ pressed }) => [
@@ -207,7 +216,7 @@ export default function WorkoutDetailScreen() {
            ]}
            onPress={handleStartWorkout}
          >
-            <RNText style={styles.startButtonText}>START WORKOUT</RNText>
+            <RNText style={styles.startButtonText}>{t('screens:workout.startWorkout')}</RNText>
          </Pressable>
        </View>
      </View>
@@ -219,231 +228,233 @@ export default function WorkoutDetailScreen() {
 // STYLES
 // ═══════════════════════════════════════════════════════════════════════════

-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: DARK.BASE,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  scrollContent: {
-    paddingHorizontal: LAYOUT.SCREEN_PADDING,
-  },
+function createStyles(colors: ThemeColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.bg.base,
+    },
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {
+      paddingHorizontal: LAYOUT.SCREEN_PADDING,
+    },

-  // Video Preview
-  videoPreview: {
-    height: 280,
-    marginHorizontal: -LAYOUT.SCREEN_PADDING,
-    marginBottom: SPACING[4],
-    backgroundColor: DARK.SURFACE,
-  },
-  headerOverlay: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: SPACING[4],
-  },
-  headerButton: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden',
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.1)',
-  },
-  headerRight: {
-    flexDirection: 'row',
-    gap: SPACING[2],
-  },
-  trainerPreview: {
-    position: 'absolute',
-    bottom: SPACING[4],
-    left: 0,
-    right: 0,
-    alignItems: 'center',
-  },
-  trainerAvatarLarge: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 3,
-    borderColor: TEXT.PRIMARY,
-  },
-  trainerInitial: {
-    ...TYPOGRAPHY.HERO,
-    color: TEXT.PRIMARY,
-  },
+    // Video Preview
+    videoPreview: {
+      height: 280,
+      marginHorizontal: -LAYOUT.SCREEN_PADDING,
+      marginBottom: SPACING[4],
+      backgroundColor: colors.bg.surface,
+    },
+    headerOverlay: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      padding: SPACING[4],
+    },
+    headerButton: {
+      width: 44,
+      height: 44,
+      borderRadius: 22,
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden',
+      borderWidth: 1,
+      borderColor: 'rgba(255, 255, 255, 0.1)',
+    },
+    headerRight: {
+      flexDirection: 'row',
+      gap: SPACING[2],
+    },
+    trainerPreview: {
+      position: 'absolute',
+      bottom: SPACING[4],
+      left: 0,
+      right: 0,
+      alignItems: 'center',
+    },
+    trainerAvatarLarge: {
+      width: 80,
+      height: 80,
+      borderRadius: 40,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderWidth: 3,
+      borderColor: '#FFFFFF',
+    },
+    trainerInitial: {
+      ...TYPOGRAPHY.HERO,
+      color: '#FFFFFF',
+    },

-  // Title Section
-  titleSection: {
-    marginBottom: SPACING[4],
-  },
-  title: {
-    ...TYPOGRAPHY.LARGE_TITLE,
-    color: TEXT.PRIMARY,
-    marginBottom: SPACING[3],
-  },
-  quickStats: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flexWrap: 'wrap',
-    gap: SPACING[2],
-  },
-  statItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[1],
-  },
-  statText: {
-    ...TYPOGRAPHY.BODY,
-    color: TEXT.SECONDARY,
-  },
-  statDot: {
-    color: TEXT.TERTIARY,
-  },
+    // Title Section
+    titleSection: {
+      marginBottom: SPACING[4],
+    },
+    title: {
+      ...TYPOGRAPHY.LARGE_TITLE,
+      color: colors.text.primary,
+      marginBottom: SPACING[3],
+    },
+    quickStats: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      gap: SPACING[2],
+    },
+    statItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: SPACING[1],
+    },
+    statText: {
+      ...TYPOGRAPHY.BODY,
+      color: colors.text.secondary,
+    },
+    statDot: {
+      color: colors.text.tertiary,
+    },

-  // Divider
-  divider: {
-    height: 1,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
-    marginVertical: SPACING[2],
-  },
+    // Divider
+    divider: {
+      height: 1,
+      backgroundColor: colors.border.glass,
+      marginVertical: SPACING[2],
+    },

-  // Section
-  section: {
-    paddingVertical: SPACING[4],
-  },
-  sectionTitle: {
-    ...TYPOGRAPHY.HEADLINE,
-    color: TEXT.PRIMARY,
-    marginBottom: SPACING[3],
-  },
+    // Section
+    section: {
+      paddingVertical: SPACING[4],
+    },
+    sectionTitle: {
+      ...TYPOGRAPHY.HEADLINE,
+      color: colors.text.primary,
+      marginBottom: SPACING[3],
+    },

-  // Equipment
-  equipmentItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[3],
-    marginBottom: SPACING[2],
-  },
-  equipmentText: {
-    ...TYPOGRAPHY.BODY,
-    color: TEXT.SECONDARY,
-  },
+    // Equipment
+    equipmentItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: SPACING[3],
+      marginBottom: SPACING[2],
+    },
+    equipmentText: {
+      ...TYPOGRAPHY.BODY,
+      color: colors.text.secondary,
+    },

-  // Exercises
-  exercisesList: {
-    gap: SPACING[2],
-  },
-  exerciseRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: SPACING[3],
-    paddingHorizontal: SPACING[4],
-    backgroundColor: DARK.SURFACE,
-    borderRadius: RADIUS.LG,
-    gap: SPACING[3],
-  },
-  exerciseNumber: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    backgroundColor: 'rgba(255, 107, 53, 0.15)',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  exerciseNumberText: {
-    ...TYPOGRAPHY.CALLOUT,
-    color: BRAND.PRIMARY,
-    fontWeight: '700',
-  },
-  exerciseName: {
-    ...TYPOGRAPHY.BODY,
-    color: TEXT.PRIMARY,
-    flex: 1,
-  },
-  exerciseDuration: {
-    ...TYPOGRAPHY.CAPTION_1,
-    color: TEXT.TERTIARY,
-  },
-  repeatNote: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[2],
-    marginTop: SPACING[2],
-    paddingHorizontal: SPACING[2],
-  },
-  repeatText: {
-    ...TYPOGRAPHY.CAPTION_1,
-    color: TEXT.TERTIARY,
-  },
+    // Exercises
+    exercisesList: {
+      gap: SPACING[2],
+    },
+    exerciseRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: SPACING[3],
+      paddingHorizontal: SPACING[4],
+      backgroundColor: colors.bg.surface,
+      borderRadius: RADIUS.LG,
+      gap: SPACING[3],
+    },
+    exerciseNumber: {
+      width: 28,
+      height: 28,
+      borderRadius: 14,
+      backgroundColor: 'rgba(255, 107, 53, 0.15)',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    exerciseNumberText: {
+      ...TYPOGRAPHY.CALLOUT,
+      color: BRAND.PRIMARY,
+      fontWeight: '700',
+    },
+    exerciseName: {
+      ...TYPOGRAPHY.BODY,
+      color: colors.text.primary,
+      flex: 1,
+    },
+    exerciseDuration: {
+      ...TYPOGRAPHY.CAPTION_1,
+      color: colors.text.tertiary,
+    },
+    repeatNote: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: SPACING[2],
+      marginTop: SPACING[2],
+      paddingHorizontal: SPACING[2],
+    },
+    repeatText: {
+      ...TYPOGRAPHY.CAPTION_1,
+      color: colors.text.tertiary,
+    },

-  // Music
-  musicCard: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: SPACING[4],
-    backgroundColor: DARK.SURFACE,
-    borderRadius: RADIUS.LG,
-    gap: SPACING[3],
-  },
-  musicIcon: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    backgroundColor: 'rgba(255, 107, 53, 0.15)',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  musicInfo: {
-    flex: 1,
-  },
-  musicName: {
-    ...TYPOGRAPHY.HEADLINE,
-    color: TEXT.PRIMARY,
-  },
-  musicDescription: {
-    ...TYPOGRAPHY.CAPTION_1,
-    color: TEXT.TERTIARY,
-    marginTop: 2,
-  },
+    // Music
+    musicCard: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: SPACING[4],
+      backgroundColor: colors.bg.surface,
+      borderRadius: RADIUS.LG,
+      gap: SPACING[3],
+    },
+    musicIcon: {
+      width: 48,
+      height: 48,
+      borderRadius: 24,
+      backgroundColor: 'rgba(255, 107, 53, 0.15)',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    musicInfo: {
+      flex: 1,
+    },
+    musicName: {
+      ...TYPOGRAPHY.HEADLINE,
+      color: colors.text.primary,
+    },
+    musicDescription: {
+      ...TYPOGRAPHY.CAPTION_1,
+      color: colors.text.tertiary,
+      marginTop: 2,
+    },

-  // Bottom Bar
-  bottomBar: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    paddingHorizontal: LAYOUT.SCREEN_PADDING,
-    paddingTop: SPACING[4],
-    borderTopWidth: 1,
-    borderTopColor: 'rgba(255, 255, 255, 0.1)',
-  },
-  startButtonContainer: {
-    height: 56,
-    justifyContent: 'center',
-  },
+    // Bottom Bar
+    bottomBar: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      paddingHorizontal: LAYOUT.SCREEN_PADDING,
+      paddingTop: SPACING[4],
+      borderTopWidth: 1,
+      borderTopColor: colors.border.glass,
+    },
+    startButtonContainer: {
+      height: 56,
+      justifyContent: 'center',
+    },

-  // Start Button
-  startButton: {
-    height: 56,
-    borderRadius: RADIUS.LG,
-    backgroundColor: BRAND.PRIMARY,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  startButtonPressed: {
-    backgroundColor: BRAND.PRIMARY_DARK,
-    transform: [{ scale: 0.98 }],
-  },
-  startButtonText: {
-    ...TYPOGRAPHY.HEADLINE,
-    color: TEXT.PRIMARY,
-    letterSpacing: 1,
-  },
-})
+    // Start Button
+    startButton: {
+      height: 56,
+      borderRadius: RADIUS.LG,
+      backgroundColor: BRAND.PRIMARY,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    startButtonPressed: {
+      backgroundColor: BRAND.PRIMARY_DARK,
+      transform: [{ scale: 0.98 }],
+    },
+    startButtonText: {
+      ...TYPOGRAPHY.HEADLINE,
+      color: '#FFFFFF',
+      letterSpacing: 1,
+    },
+  })
+}
--- a/app/workout/category/[id].tsx
+++ b/app/workout/category/[id].tsx
@@ -13,36 +13,44 @@ import {
  Picker,
 } from '@expo/ui/swift-ui'

+import { useTranslation } from 'react-i18next'
+
 import { useHaptics } from '@/src/shared/hooks'
-import { getWorkoutsByCategory, getTrainerById, CATEGORIES } from '@/src/shared/data'
+import { getWorkoutsByCategory, CATEGORIES } from '@/src/shared/data'
+import { useTranslatedCategories, useTranslatedWorkouts } from '@/src/shared/data/useTranslatedData'
 import { StyledText } from '@/src/shared/components/StyledText'
 import type { WorkoutCategory, WorkoutLevel } from '@/src/shared/types'

-import {
-  BRAND,
-  DARK,
-  TEXT,
-} from '@/src/shared/constants/colors'
+import { useThemeColors, BRAND } from '@/src/shared/theme'
+import type { ThemeColors } from '@/src/shared/theme/types'
 import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
 import { RADIUS } from '@/src/shared/constants/borderRadius'

-const LEVELS: { id: WorkoutLevel | 'all'; label: string }[] = [
-  { id: 'all', label: 'All Levels' },
-  { id: 'Beginner', label: 'Beginner' },
-  { id: 'Intermediate', label: 'Intermediate' },
-  { id: 'Advanced', label: 'Advanced' },
-]
+const LEVEL_IDS: (WorkoutLevel | 'all')[] = ['all', 'Beginner', 'Intermediate', 'Advanced']

 export default function CategoryDetailScreen() {
  const insets = useSafeAreaInsets()
  const router = useRouter()
  const haptics = useHaptics()
+  const { t } = useTranslation()
  const { id } = useLocalSearchParams<{ id: string }>()

+  const colors = useThemeColors()
+  const styles = useMemo(() => createStyles(colors), [colors])
+
  const [selectedLevelIndex, setSelectedLevelIndex] = useState(0)

-  const selectedLevel = LEVELS[selectedLevelIndex].id
-  const category = CATEGORIES.find(c => c.id === id)
+  const translatedCategories = useTranslatedCategories()
+
+  const levelLabels = [
+    t('screens:category.allLevels'),
+    t('levels.beginner'),
+    t('levels.intermediate'),
+    t('levels.advanced'),
+  ]
+
+  const selectedLevel = LEVEL_IDS[selectedLevelIndex]
+  const category = translatedCategories.find(c => c.id === id)
  const categoryLabel = category?.label ?? id ?? 'Category'

  const allWorkouts = useMemo(
@@ -55,6 +63,8 @@ export default function CategoryDetailScreen() {
    return allWorkouts.filter(w => w.level === selectedLevel)
  }, [allWorkouts, selectedLevel])

+  const translatedWorkouts = useTranslatedWorkouts(filteredWorkouts)
+
  const handleBack = () => {
    haptics.selection()
    router.back()
@@ -70,15 +80,15 @@ export default function CategoryDetailScreen() {
      {/* Header */}
      <View style={styles.header}>
        <Pressable onPress={handleBack} style={styles.backButton}>
-          <Ionicons name="chevron-back" size={24} color={TEXT.PRIMARY} />
+          <Ionicons name="chevron-back" size={24} color={colors.text.primary} />
        </Pressable>
-        <StyledText size={22} weight="bold" color={TEXT.PRIMARY}>{categoryLabel}</StyledText>
+        <StyledText size={22} weight="bold" color={colors.text.primary}>{categoryLabel}</StyledText>
        <View style={styles.backButton} />
      </View>

      {/* Level Filter */}
      <View style={styles.filterContainer}>
-        <Host matchContents useViewportSizeMeasurement colorScheme="dark">
+        <Host matchContents useViewportSizeMeasurement colorScheme={colors.colorScheme}>
          <Picker
            selectedIndex={selectedLevelIndex}
            onOptionSelected={(e) => {
@@ -86,7 +96,7 @@ export default function CategoryDetailScreen() {
              setSelectedLevelIndex(e.nativeEvent.index)
            }}
            variant="segmented"
-            options={LEVELS.map(l => l.label)}
+            options={levelLabels}
            color={BRAND.PRIMARY}
          />
        </Host>
@@ -94,10 +104,10 @@ export default function CategoryDetailScreen() {

      <StyledText
        size={13}
-        color={TEXT.TERTIARY}
+        color={colors.text.tertiary}
        style={{ paddingHorizontal: LAYOUT.SCREEN_PADDING, marginBottom: SPACING[3] }}
      >
-        {filteredWorkouts.length + ' workouts'}
+        {t('plurals.workout', { count: translatedWorkouts.length })}
      </StyledText>

      <ScrollView
@@ -105,35 +115,32 @@ export default function CategoryDetailScreen() {
        contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
        showsVerticalScrollIndicator={false}
      >
-        {filteredWorkouts.map((workout) => {
-          const trainer = getTrainerById(workout.trainerId)
-          return (
+        {translatedWorkouts.map((workout) => (
            <Pressable
              key={workout.id}
              style={styles.workoutCard}
              onPress={() => handleWorkoutPress(workout.id)}
            >
-              <View style={[styles.workoutAvatar, { backgroundColor: trainer?.color ?? BRAND.PRIMARY }]}>
-                <RNText style={styles.workoutInitial}>{trainer?.name[0] ?? 'T'}</RNText>
+              <View style={[styles.workoutAvatar, { backgroundColor: BRAND.PRIMARY }]}>
+                <Ionicons name="flame" size={20} color="#FFFFFF" />
              </View>
              <View style={styles.workoutInfo}>
-                <StyledText size={17} weight="semibold" color={TEXT.PRIMARY}>{workout.title}</StyledText>
-                <StyledText size={13} color={TEXT.TERTIARY}>
-                  {trainer?.name + ' \u00B7 ' + workout.duration + ' min \u00B7 ' + workout.level}
+                <StyledText size={17} weight="semibold" color={colors.text.primary}>{workout.title}</StyledText>
+                <StyledText size={13} color={colors.text.tertiary}>
+                  {t('durationLevel', { duration: workout.duration, level: t(`levels.${workout.level.toLowerCase()}`) })}
                </StyledText>
              </View>
              <View style={styles.workoutMeta}>
-                <StyledText size={13} color={BRAND.PRIMARY}>{workout.calories + ' cal'}</StyledText>
-                <Ionicons name="chevron-forward" size={16} color={TEXT.TERTIARY} />
+                <StyledText size={13} color={BRAND.PRIMARY}>{t('units.calUnit', { count: workout.calories })}</StyledText>
+                <Ionicons name="chevron-forward" size={16} color={colors.text.tertiary} />
              </View>
            </Pressable>
-          )
-        })}
+        ))}

-        {filteredWorkouts.length === 0 && (
+        {translatedWorkouts.length === 0 && (
          <View style={styles.emptyState}>
-            <Ionicons name="barbell-outline" size={48} color={TEXT.TERTIARY} />
-            <StyledText size={17} color={TEXT.TERTIARY} style={{ marginTop: SPACING[3] }}>
+            <Ionicons name="barbell-outline" size={48} color={colors.text.tertiary} />
+            <StyledText size={17} color={colors.text.tertiary} style={{ marginTop: SPACING[3] }}>
              No workouts found
            </StyledText>
          </View>
@@ -143,67 +150,69 @@ export default function CategoryDetailScreen() {
  )
 }

-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: DARK.BASE,
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: LAYOUT.SCREEN_PADDING,
-    paddingVertical: SPACING[3],
-  },
-  backButton: {
-    width: 44,
-    height: 44,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  filterContainer: {
-    paddingHorizontal: LAYOUT.SCREEN_PADDING,
-    marginBottom: SPACING[4],
-  },
-  scrollView: {
-    flex: 1,
-  },
-  scrollContent: {
-    paddingHorizontal: LAYOUT.SCREEN_PADDING,
-  },
-  workoutCard: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: SPACING[3],
-    paddingHorizontal: SPACING[4],
-    backgroundColor: DARK.SURFACE,
-    borderRadius: RADIUS.LG,
-    marginBottom: SPACING[2],
-    gap: SPACING[3],
-  },
-  workoutAvatar: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  workoutInitial: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: TEXT.PRIMARY,
-  },
-  workoutInfo: {
-    flex: 1,
-    gap: 2,
-  },
-  workoutMeta: {
-    alignItems: 'flex-end',
-    gap: 4,
-  },
-  emptyState: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: SPACING[12],
-  },
-})
+function createStyles(colors: ThemeColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.bg.base,
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: LAYOUT.SCREEN_PADDING,
+      paddingVertical: SPACING[3],
+    },
+    backButton: {
+      width: 44,
+      height: 44,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    filterContainer: {
+      paddingHorizontal: LAYOUT.SCREEN_PADDING,
+      marginBottom: SPACING[4],
+    },
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {
+      paddingHorizontal: LAYOUT.SCREEN_PADDING,
+    },
+    workoutCard: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: SPACING[3],
+      paddingHorizontal: SPACING[4],
+      backgroundColor: colors.bg.surface,
+      borderRadius: RADIUS.LG,
+      marginBottom: SPACING[2],
+      gap: SPACING[3],
+    },
+    workoutAvatar: {
+      width: 44,
+      height: 44,
+      borderRadius: 22,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    workoutInitial: {
+      fontSize: 18,
+      fontWeight: '700',
+      color: colors.text.primary,
+    },
+    workoutInfo: {
+      flex: 1,
+      gap: 2,
+    },
+    workoutMeta: {
+      alignItems: 'flex-end',
+      gap: 4,
+    },
+    emptyState: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: SPACING[12],
+    },
+  })
+}