Add design overhaul plan + partial icon work

TODO: Comprehensive design plan for fitness app feel
- Dark theme color palette
- Professional typography guidelines
- SVG icons to replace ALL emojis
- UI component standards
- Inspiration from Nike/FITBOD/Strong

Partial work from Claude Code:
- Icons.jsx component (SVG icons)
- Dashboard.jsx updates (some emoji removal)

frontend/src/components/Icons.jsx

@@ -0,0 +1,276 @@
+// Clean SVG icons for the Gravl app
+// Replaces emojis with professional vector icons
+
+export const Icons = {
+  // Navigation & UI
+  home: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+      <polyline points="9 22 9 12 15 12 15 22"/>
+    </svg>
+  ),
+  chart: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <line x1="18" y1="20" x2="18" y2="10"/>
+      <line x1="12" y1="20" x2="12" y2="4"/>
+      <line x1="6" y1="20" x2="6" y2="14"/>
+    </svg>
+  ),
+  user: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
+      <circle cx="12" cy="7" r="4"/>
+    </svg>
+  ),
+  logout: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+      <polyline points="16 17 21 12 16 7"/>
+      <line x1="21" y1="12" x2="9" y2="12"/>
+    </svg>
+  ),
+  arrowLeft: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <line x1="19" y1="12" x2="5" y2="12"/>
+      <polyline points="12 19 5 12 12 5"/>
+    </svg>
+  ),
+  arrowRight: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <line x1="5" y1="12" x2="19" y2="12"/>
+      <polyline points="12 5 19 12 12 19"/>
+    </svg>
+  ),
+  chevronLeft: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <polyline points="15 18 9 12 15 6"/>
+    </svg>
+  ),
+  chevronRight: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <polyline points="9 18 15 12 9 6"/>
+    </svg>
+  ),
+  chevronDown: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <polyline points="6 9 12 15 18 9"/>
+    </svg>
+  ),
+  plus: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <line x1="12" y1="5" x2="12" y2="19"/>
+      <line x1="5" y1="12" x2="19" y2="12"/>
+    </svg>
+  ),
+  check: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+      <polyline points="20 6 9 17 4 12"/>
+    </svg>
+  ),
+
+  // Workout types
+  dumbbell: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M6.5 6.5a2 2 0 0 0-3 0L2 8l6 6 1.5-1.5a2 2 0 0 0 0-3L6.5 6.5z"/>
+      <path d="M17.5 17.5a2 2 0 0 0 3 0L22 16l-6-6-1.5 1.5a2 2 0 0 0 0 3l3 3z"/>
+      <line x1="8" y1="8" x2="16" y2="16"/>
+    </svg>
+  ),
+  arm: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M12 3c-1.5 0-2.5 1-3 2.5-.5 1.5-.5 3 0 4.5.5 1.5 1 3 1 4.5 0 1.5-.5 3-1.5 4.5"/>
+      <path d="M8 8c0-1 .5-2 1.5-2.5"/>
+      <path d="M16 8c0-1-.5-2-1.5-2.5"/>
+      <path d="M9 14c1.5 0 3 .5 4.5 1.5s3 1.5 4.5 1.5"/>
+    </svg>
+  ),
+  leg: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M12 3v7"/>
+      <path d="M9 10c0 2-.5 4-1.5 5.5S5 18 5 20v1"/>
+      <path d="M15 10c0 2 .5 4 1.5 5.5S19 18 19 20v1"/>
+      <ellipse cx="12" cy="4" rx="3" ry="1"/>
+    </svg>
+  ),
+  back: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M12 2v6"/>
+      <path d="M6 8c0 3 2 6 6 8 4-2 6-5 6-8"/>
+      <path d="M6 8c0-2 2.5-4 6-4s6 2 6 4"/>
+      <path d="M9 16v4a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-4"/>
+    </svg>
+  ),
+  chest: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M6 8c0-3 2.5-5 6-5s6 2 6 5c0 4-3 8-6 10-3-2-6-6-6-10z"/>
+      <path d="M12 8v5"/>
+      <path d="M9 9.5h6"/>
+    </svg>
+  ),
+  shoulder: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="6" r="3"/>
+      <path d="M5 17c0-4 3-7 7-7s7 3 7 7"/>
+      <path d="M8 12l-3 5"/>
+      <path d="M16 12l3 5"/>
+    </svg>
+  ),
+  core: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="6" y="4" width="12" height="16" rx="2"/>
+      <line x1="12" y1="8" x2="12" y2="16"/>
+      <line x1="9" y1="10" x2="15" y2="10"/>
+      <line x1="9" y1="14" x2="15" y2="14"/>
+    </svg>
+  ),
+  fullBody: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="4" r="2"/>
+      <path d="M12 6v5"/>
+      <path d="M8 8l-3 3"/>
+      <path d="M16 8l3 3"/>
+      <path d="M12 11l-3 9"/>
+      <path d="M12 11l3 9"/>
+    </svg>
+  ),
+
+  // Activity & rest
+  walking: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="4" r="2"/>
+      <path d="M14 10l2 7-3 3"/>
+      <path d="M10 10l-2 7 3 3"/>
+      <path d="M10 10h4l2-2"/>
+      <path d="M10 10l-2-2"/>
+    </svg>
+  ),
+  yoga: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="4" r="2"/>
+      <path d="M12 6v5"/>
+      <path d="M4 14l8-3 8 3"/>
+      <path d="M9 20l3-9 3 9"/>
+    </svg>
+  ),
+  swimming: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="8" cy="6" r="2"/>
+      <path d="M10 6h8"/>
+      <path d="M4 18c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/>
+      <path d="M4 14c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/>
+    </svg>
+  ),
+  cycling: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="6" cy="17" r="3"/>
+      <circle cx="18" cy="17" r="3"/>
+      <path d="M6 17l4-7h4l3 5"/>
+      <circle cx="12" cy="7" r="2"/>
+    </svg>
+  ),
+  sleep: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+    </svg>
+  ),
+
+  // Stats & metrics
+  fire: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M12 22c4-2 7-6 7-10 0-3-2-5-4-7l-3 4-3-4c-2 2-4 4-4 7 0 4 3 8 7 10z"/>
+      <path d="M12 22c-2-1-3-3-3-5 0-1.5.5-2.5 1.5-3.5l1.5 2 1.5-2c1 1 1.5 2 1.5 3.5 0 2-1 4-3 5z"/>
+    </svg>
+  ),
+  calendar: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
+      <line x1="16" y1="2" x2="16" y2="6"/>
+      <line x1="8" y1="2" x2="8" y2="6"/>
+      <line x1="3" y1="10" x2="21" y2="10"/>
+    </svg>
+  ),
+  target: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="10"/>
+      <circle cx="12" cy="12" r="6"/>
+      <circle cx="12" cy="12" r="2"/>
+    </svg>
+  ),
+  trophy: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M6 9H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h2"/>
+      <path d="M18 9h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-2"/>
+      <path d="M6 3v6a6 6 0 0 0 12 0V3"/>
+      <path d="M12 15v4"/>
+      <path d="M8 21h8"/>
+    </svg>
+  ),
+
+  // Coach avatar (silhouette)
+  coach: (
+    <svg viewBox="0 0 24 24" fill="currentColor">
+      <circle cx="12" cy="7" r="4" opacity="0.9"/>
+      <path d="M12 13c-5 0-8 2.5-8 5v2h16v-2c0-2.5-3-5-8-5z" opacity="0.7"/>
+      <circle cx="17" cy="5" r="1.5" opacity="0.5"/>
+      <path d="M18 4l1.5-1.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" opacity="0.5"/>
+    </svg>
+  ),
+
+  // Brand
+  gravl: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M6.5 6.5a2 2 0 0 0-3 0L2 8l6 6 1.5-1.5a2 2 0 0 0 0-3L6.5 6.5z"/>
+      <path d="M17.5 17.5a2 2 0 0 0 3 0L22 16l-6-6-1.5 1.5a2 2 0 0 0 0 3l3 3z"/>
+      <line x1="8" y1="8" x2="16" y2="16"/>
+    </svg>
+  ),
+}
+
+// Icon component wrapper
+export function Icon({ name, size = 24, className = '', style = {} }) {
+  const icon = Icons[name]
+  if (!icon) return null
+
+  return (
+    <span
+      className={`icon ${className}`}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: size,
+        height: size,
+        ...style
+      }}
+    >
+      {icon}
+    </span>
+  )
+}
+
+// Helper to get workout icon name based on workout name
+export function getWorkoutIconName(name) {
+  const lower = name.toLowerCase()
+  if (lower.includes('push') || lower.includes('bröst') || lower.includes('chest')) return 'chest'
+  if (lower.includes('pull') || lower.includes('rygg') || lower.includes('back')) return 'back'
+  if (lower.includes('ben') || lower.includes('leg') || lower.includes('lower')) return 'leg'
+  if (lower.includes('axlar') || lower.includes('shoulder')) return 'shoulder'
+  if (lower.includes('arm')) return 'arm'
+  if (lower.includes('core') || lower.includes('mage')) return 'core'
+  if (lower.includes('helkropp') || lower.includes('full')) return 'fullBody'
+  if (lower.includes('överkropp') || lower.includes('upper')) return 'chest'
+  if (lower.includes('underkropp')) return 'leg'
+  return 'dumbbell'
+}
+
+// Helper to get activity icon name
+export function getActivityIconName(activity) {
+  const lower = activity.toLowerCase()
+  if (lower.includes('promenad') || lower.includes('walk')) return 'walking'
+  if (lower.includes('yoga') || lower.includes('stretch')) return 'yoga'
+  if (lower.includes('sim') || lower.includes('swim')) return 'swimming'
+  if (lower.includes('cyk') || lower.includes('bike')) return 'cycling'
+  return 'walking'
+}
+
+export default Icon

frontend/src/pages/Dashboard.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
 import { useAuth } from '../context/AuthContext'
+import { Icon, getActivityIconName } from '../components/Icons'
 
 const API_URL = '/api'
 
@@ -11,9 +12,9 @@ const getCoachGreeting = (user, todayWorkout) => {
   if (todayWorkout) {
     // There's a workout today
     if (hour < 10) {
-      return `Godmorgon ${name}! Idag kör vi ${todayWorkout.name.toLowerCase()}. Redo? 💪`
+      return `Godmorgon ${name}! Idag kör vi ${todayWorkout.name.toLowerCase()}. Redo?`
     } else if (hour < 14) {
-      return `${todayWorkout.name} står på schemat idag. Dags att köra! 🏋️`
+      return `${todayWorkout.name} står på schemat idag. Dags att köra!`
     } else if (hour < 18) {
       return `Eftermiddagspass? ${todayWorkout.name} väntar på dig.`
     } else {
@@ -22,23 +23,23 @@ const getCoachGreeting = (user, todayWorkout) => {
   } else {
     // Rest day
     if (hour < 10) {
-      return `Godmorgon ${name}! Vilodag idag – perfekt för återhämtning. 🧘`
+      return `Godmorgon ${name}! Vilodag idag – perfekt för återhämtning.`
     } else if (hour < 14) {
-      return `Ingen träning schemalagd. Ta en promenad eller stretcha lite? 🚶`
+      return `Ingen träning schemalagd. Ta en promenad eller stretcha lite?`
     } else if (hour < 18) {
-      return `Vila är också träning! Lätt rörelse eller mobilitet idag? 🧘`
+      return `Vila är också träning! Lätt rörelse eller mobilitet idag?`
     } else {
-      return `Lugn kväll ${name}. Ladda batterierna till nästa pass! 😴`
+      return `Lugn kväll ${name}. Ladda batterierna till nästa pass!`
     }
   }
 }
 
 // Rest day tips
 const restDayTips = [
-  { icon: '🚶', text: '30 min promenad' },
+  { iconName: 'walking', text: 'Promenad' },
-  { icon: '🧘', text: 'Yoga/stretching' },
+  { iconName: 'yoga', text: 'Stretching' },
-  { icon: '🏊', text: 'Simning' },
+  { iconName: 'swimming', text: 'Simning' },
-  { icon: '🚴', text: 'Lätt cykling' },
+  { iconName: 'cycling', text: 'Cykling' },
 ]
 
 // Get weekday names
@@ -89,12 +90,12 @@ function Dashboard({ onStartWorkout, onNavigate }) {
     <div className="dashboard">
       <header className="dashboard-header">
         <div className="header-top">
-          <h1>🏋️ Gravl</h1>
+          <h1 className="brand-title"><Icon name="gravl" size={22} /> Gravl</h1>
           <nav className="nav-menu">
-            <button className="nav-btn active">Hem</button>
+            <button className="nav-btn active"><Icon name="home" size={18} /></button>
-            <button className="nav-btn" onClick={() => onNavigate('progress')}>📊</button>
+            <button className="nav-btn" onClick={() => onNavigate('progress')}><Icon name="chart" size={18} /></button>
-            <button className="nav-btn" onClick={() => onNavigate('profile')}>👤</button>
+            <button className="nav-btn" onClick={() => onNavigate('profile')}><Icon name="user" size={18} /></button>
-            <button className="nav-btn logout" onClick={logout}>↪</button>
+            <button className="nav-btn logout" onClick={logout}><Icon name="logout" size={18} /></button>
           </nav>
         </div>
       </header>
@@ -107,7 +108,7 @@ function Dashboard({ onStartWorkout, onNavigate }) {
               className="calendar-nav"
               onClick={() => setCurrentWeekStart(addDays(currentWeekStart, -7))}
             >
-              ←
+              <Icon name="chevronLeft" size={16} />
             </button>
             <span className="calendar-title">
               {formatWeekRange(currentWeekStart)}
@@ -116,7 +117,7 @@ function Dashboard({ onStartWorkout, onNavigate }) {
               className="calendar-nav"
               onClick={() => setCurrentWeekStart(addDays(currentWeekStart, 7))}
             >
-              →
+              <Icon name="chevronRight" size={16} />
             </button>
           </div>
           <div className="calendar-days">
@@ -135,7 +136,7 @@ function Dashboard({ onStartWorkout, onNavigate }) {
                 >
                   <span className="day-name">{name}</span>
                   <span className="day-date">{date.getDate()}</span>
-                  {hasWorkout && <span className="day-dot">●</span>}
+                  {hasWorkout && <span className="day-dot"></span>}
                 </div>
               )
             })}
@@ -145,7 +146,9 @@ function Dashboard({ onStartWorkout, onNavigate }) {
         {/* Coach Section with Today's Action */}
         <section className="coach-section">
           <div className="coach-greeting">
-            <div className="coach-avatar">🧔‍♂️</div>
+            <div className="coach-avatar">
+              <Icon name="coach" size={36} />
+            </div>
             <div className="coach-message">
               <p>{getCoachGreeting(user, todayWorkout)}</p>
             </div>
@@ -163,7 +166,7 @@ function Dashboard({ onStartWorkout, onNavigate }) {
                   </span>
                 </div>
                 <div className="workout-action">
-                  <span className="action-arrow">→</span>
+                  <Icon name="arrowRight" size={24} />
                 </div>
               </div>
             ) : (
@@ -171,14 +174,17 @@ function Dashboard({ onStartWorkout, onNavigate }) {
               <div className="rest-day-section">
                 <div className="rest-tips">
                   {restDayTips.map((tip, i) => (
-                    <span key={i} className="tip-badge">{tip.icon} {tip.text}</span>
+                    <span key={i} className="tip-badge">
+                      <Icon name={tip.iconName} size={16} />
+                      {tip.text}
+                    </span>
                   ))}
                 </div>
                 <button
                   className="add-workout-btn"
                   onClick={() => onNavigate('select-workout')}
                 >
-                  <span className="add-icon">+</span>
+                  <Icon name="plus" size={20} />
                   <span>Lägg till pass</span>
                 </button>
               </div>
@@ -197,7 +203,7 @@ function Dashboard({ onStartWorkout, onNavigate }) {
             <span className="stat-label">Denna vecka</span>
           </div>
           <div className="stat-card">
-            <span className="stat-value">💪</span>
+            <span className="stat-value stat-icon"><Icon name="fire" size={28} /></span>
             <span className="stat-label">Streak: 5</span>
           </div>
         </section>

frontend/src/pages/WorkoutSelectPage.jsx

@@ -1,32 +1,18 @@
 import { useState, useEffect } from 'react'
+import { Icon, getWorkoutIconName } from '../components/Icons'
 
 const API_URL = '/api'
 
-// Workout icons based on type/name
+// Workout color based on type - more subtle/muted palette
-const getWorkoutIcon = (name) => {
-  const lower = name.toLowerCase()
-  if (lower.includes('push') || lower.includes('bröst') || lower.includes('chest')) return '💪'
-  if (lower.includes('pull') || lower.includes('rygg') || lower.includes('back')) return '🏋️'
-  if (lower.includes('ben') || lower.includes('leg') || lower.includes('lower')) return '🦵'
-  if (lower.includes('axlar') || lower.includes('shoulder')) return '🎯'
-  if (lower.includes('arm')) return '💪'
-  if (lower.includes('core') || lower.includes('mage')) return '🔥'
-  if (lower.includes('helkropp') || lower.includes('full')) return '⚡'
-  if (lower.includes('överkropp') || lower.includes('upper')) return '💪'
-  if (lower.includes('underkropp') || lower.includes('lower')) return '🦵'
-  return '🏋️'
-}
-
-// Workout color based on type
 const getWorkoutColor = (name) => {
   const lower = name.toLowerCase()
-  if (lower.includes('push') || lower.includes('bröst')) return '#ef4444' // Red
+  if (lower.includes('push') || lower.includes('bröst')) return 'var(--workout-push)'
-  if (lower.includes('pull') || lower.includes('rygg')) return '#3b82f6' // Blue
+  if (lower.includes('pull') || lower.includes('rygg')) return 'var(--workout-pull)'
-  if (lower.includes('ben') || lower.includes('leg')) return '#8b5cf6' // Purple
+  if (lower.includes('ben') || lower.includes('leg')) return 'var(--workout-legs)'
-  if (lower.includes('axlar')) return '#f59e0b' // Orange
+  if (lower.includes('axlar')) return 'var(--workout-shoulders)'
-  if (lower.includes('överkropp') || lower.includes('upper')) return '#10b981' // Green
+  if (lower.includes('överkropp') || lower.includes('upper')) return 'var(--workout-upper)'
-  if (lower.includes('underkropp') || lower.includes('lower')) return '#6366f1' // Indigo
+  if (lower.includes('underkropp') || lower.includes('lower')) return 'var(--workout-lower)'
-  return '#6366f1' // Default indigo
+  return 'var(--workout-default)'
 }
 
 function WorkoutSelectPage({ onBack, onSelectWorkout }) {
@@ -72,7 +58,9 @@ function WorkoutSelectPage({ onBack, onSelectWorkout }) {
   return (
     <div className="select-page">
       <header className="page-header">
-        <button className="back-btn" onClick={onBack}>← Tillbaka</button>
+        <button className="back-btn" onClick={onBack}>
+          <Icon name="arrowLeft" size={18} /> Tillbaka
+        </button>
         <h1>Välj pass</h1>
         <div style={{ width: 40 }}></div>
       </header>
@@ -84,7 +72,7 @@ function WorkoutSelectPage({ onBack, onSelectWorkout }) {
 
         <div className="workout-grid">
           {program?.days?.map((workout) => {
-            const icon = getWorkoutIcon(workout.name)
+            const iconName = getWorkoutIconName(workout.name)
             const color = getWorkoutColor(workout.name)
             const isSelected = selectedWorkout?.id === workout.id
             const exerciseCount = workout.exercises?.filter(e => e.name).length || 0
@@ -97,7 +85,7 @@ function WorkoutSelectPage({ onBack, onSelectWorkout }) {
                 onClick={() => handleSelect(workout)}
               >
                 <div className="workout-icon" style={{ background: color }}>
-                  {icon}
+                  <Icon name={iconName} size={28} />
                 </div>
                 <div className="workout-details">
                   <h3>{workout.name}</h3>
@@ -114,7 +102,9 @@ function WorkoutSelectPage({ onBack, onSelectWorkout }) {
                   </div>
                 </div>
                 {isSelected && (
-                  <div className="selected-indicator">✓</div>
+                  <div className="selected-indicator">
+                    <Icon name="check" size={16} />
+                  </div>
                 )}
               </div>
             )