diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 0000000..c82f863
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm run lint:*)"
+    ]
+  }
+}
diff --git a/src/App.vue b/src/App.vue
index 48f8df3..2ad9e4c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,6 +9,13 @@ export default {
 </script>
 
 <style>
+/* Import shared styles */
+@import './styles/tokens.css';
+@import './styles/components.css';
+@import './styles/modern-components.css';
+@import './styles/animations.css';
+
+/* Global reset and base styles */
 * {
   margin: 0;
   padding: 0;
@@ -16,12 +23,11 @@ export default {
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: var(--font-family);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #f5f5f5;
+  background-color: var(--color-background);
+  color: var(--color-text-primary);
 }
 
 #app {
diff --git a/src/components/ModernNavbar.vue b/src/components/ModernNavbar.vue
index 67fe145..4534954 100644
--- a/src/components/ModernNavbar.vue
+++ b/src/components/ModernNavbar.vue
@@ -1,48 +1,92 @@
 <template>
   <nav class="modern-navbar">
     <div class="navbar-container">
+      <!-- Enhanced Logo with Better Typography -->
       <RouterLink to="/dashboard" class="navbar-brand">
-        <h1>RideAware</h1>
-        <span class="tagline">Train Smart. Ride Aware.</span>
+        <div class="brand-logo">
+          <svg viewBox="0 0 32 32" class="logo-icon">
+            <circle cx="16" cy="16" r="14" fill="url(#logoGradient)" />
+            <path d="M12 10L16 6L20 10L16 14L12 10Z" fill="white" opacity="0.9" />
+            <circle cx="16" cy="22" r="3" fill="white" opacity="0.9" />
+            <defs>
+              <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                <stop offset="0%" style="stop-color:#0066cc;stop-opacity:1" />
+                <stop offset="100%" style="stop-color:#0052a3;stop-opacity:1" />
+              </linearGradient>
+            </defs>
+          </svg>
+          <div class="brand-text">
+            <h1>RideAware</h1>
+            <span class="tagline">Train Smart. Ride Aware.</span>
+          </div>
+        </div>
       </RouterLink>
-      
-      <button class="mobile-menu-toggle" @click="toggleMobileMenu" :class="{ active: mobileMenuOpen }">
+
+      <!-- Mobile Menu Toggle -->
+      <button
+        class="mobile-menu-toggle"
+        @click="toggleMobileMenu"
+        :class="{ active: mobileMenuOpen }"
+        aria-label="Toggle navigation menu"
+      >
         <span></span>
         <span></span>
         <span></span>
       </button>
-      
+
+      <!-- Navigation Menu -->
       <div class="navbar-menu" :class="{ active: mobileMenuOpen }">
+        <!-- Navigation Links with btn-modern-secondary -->
         <div class="nav-links">
-          <RouterLink to="/dashboard" class="nav-link" @click="closeMobileMenu">
+          <RouterLink
+            to="/dashboard"
+            class="nav-link btn-modern btn-modern-secondary"
+            @click="closeMobileMenu"
+          >
             <svg viewBox="0 0 24 24" fill="none">
               <path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
             <span>Dashboard</span>
           </RouterLink>
-          <RouterLink to="/profile" class="nav-link" @click="closeMobileMenu">
+          <RouterLink
+            to="/profile"
+            class="nav-link btn-modern btn-modern-secondary"
+            @click="closeMobileMenu"
+          >
             <svg viewBox="0 0 24 24" fill="none">
               <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
               <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
             <span>Profile</span>
           </RouterLink>
-          <RouterLink to="/equipment" class="nav-link" @click="closeMobileMenu">
+          <RouterLink
+            to="/equipment"
+            class="nav-link btn-modern btn-modern-secondary"
+            @click="closeMobileMenu"
+          >
             <svg viewBox="0 0 24 24" fill="none">
               <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
               <path d="M12 1V3M12 21V23M4.22 4.22L5.64 5.64M18.36 18.36L19.78 19.78M1 12H3M21 12H23M4.22 19.78L5.64 18.36M18.36 5.64L19.78 4.22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
             </svg>
             <span>Equipment</span>
           </RouterLink>
-          <RouterLink to="/zones" class="nav-link" @click="closeMobileMenu">
+          <RouterLink
+            to="/zones"
+            class="nav-link btn-modern btn-modern-secondary"
+            @click="closeMobileMenu"
+          >
             <svg viewBox="0 0 24 24" fill="none">
-              <circle cx="12" cy="12" r="1" fill="currentColor"/>
-              <circle cx="19" cy="12" r="1" fill="currentColor"/>
-              <circle cx="5" cy="12" r="1" fill="currentColor"/>
+              <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
             <span>Zones</span>
           </RouterLink>
-          <RouterLink to="/calendar" class="nav-link" @click="closeMobileMenu">
+          <RouterLink
+            to="/calendar"
+            class="nav-link btn-modern btn-modern-secondary"
+            @click="closeMobileMenu"
+          >
             <svg viewBox="0 0 24 24" fill="none">
               <rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
               <line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
@@ -52,10 +96,17 @@
             <span>Calendar</span>
           </RouterLink>
         </div>
-        
+
+        <!-- Navigation Actions -->
         <div class="nav-actions">
-          <button class="theme-toggle" @click="toggleTheme" :title="isDarkMode ? 'Light mode' : 'Dark mode'">
-            <svg v-if="isDarkMode" viewBox="0 0 24 24" fill="none">
+          <!-- Enhanced Dark Mode Toggle -->
+          <button
+            class="theme-toggle btn-modern btn-modern-secondary"
+            @click="toggleTheme"
+            :title="isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'"
+            aria-label="Toggle theme"
+          >
+            <svg v-if="isDarkMode" viewBox="0 0 24 24" fill="none" class="theme-icon">
               <circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2"/>
               <line x1="12" y1="1" x2="12" y2="3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
               <line x1="12" y1="21" x2="12" y2="23" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
@@ -66,46 +117,66 @@
               <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
               <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
             </svg>
-            <svg v-else viewBox="0 0 24 24" fill="none">
+            <svg v-else viewBox="0 0 24 24" fill="none" class="theme-icon">
               <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
+            <span class="theme-text">{{ isDarkMode ? 'Light' : 'Dark' }}</span>
           </button>
+
+          <!-- Enhanced User Menu -->
           <div class="user-menu">
-            <button class="user-avatar" @click="toggleUserMenu">
+            <button
+              class="user-avatar"
+              @click="toggleUserMenu"
+              aria-label="User menu"
+            >
               <svg viewBox="0 0 24 24" fill="none">
-                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-                <path d="M12 14C14.21 14 16 12.21 16 10C16 7.79 14.21 6 12 6C9.79 6 8 7.79 8 10C8 12.21 9.79 14 12 14Z" stroke="currentColor" stroke-width="2"/>
-                <path d="M12 14C10.5 15.5 8 16.5 8 18.5V20C8 20.5304 8.21071 21.0391 8.58579 21.4142C8.96086 21.7893 9.46957 22 10 22H14C14.5304 22 15.0391 21.7893 15.4142 21.4142C15.7893 21.0391 16 20.5304 16 20V18.5C16 16.5 13.5 15.5 12 14Z" stroke="currentColor" stroke-width="2"/>
+                <circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="2"/>
+                <path d="M6 21V19C6 17.3431 7.34315 16 9 16H15C16.6569 16 18 17.3431 18 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
               </svg>
             </button>
             <div class="user-dropdown" :class="{ active: userMenuOpen }">
               <div class="user-info">
+                <div class="user-avatar-large">
+                  <svg viewBox="0 0 24 24" fill="none">
+                    <circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="2"/>
+                    <path d="M6 21V19C6 17.3431 7.34315 16 9 16H15C16.6569 16 18 17.3431 18 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                  </svg>
+                </div>
                 <p class="username">{{ auth.user?.username || 'User' }}</p>
                 <small>{{ auth.user?.email || 'user@example.com' }}</small>
               </div>
-              <hr>
+              <div class="dropdown-divider"></div>
               <RouterLink to="/profile" class="dropdown-item" @click="closeMenus">
                 <svg viewBox="0 0 24 24" fill="none">
                   <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2"/>
                   <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
                 </svg>
-                Edit Profile
+                <span>Edit Profile</span>
+              </RouterLink>
+              <RouterLink to="/equipment" class="dropdown-item" @click="closeMenus">
+                <svg viewBox="0 0 24 24" fill="none">
+                  <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
+                  <path d="M12 1V3M12 21V23M4.22 4.22L5.64 5.64M18.36 18.36L19.78 19.78M1 12H3M21 12H23M4.22 19.78L5.64 18.36M18.36 5.64L19.78 4.22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                </svg>
+                <span>Equipment</span>
               </RouterLink>
               <RouterLink to="/zones" class="dropdown-item" @click="closeMenus">
                 <svg viewBox="0 0 24 24" fill="none">
-                  <circle cx="12" cy="12" r="1" fill="currentColor"/>
-                  <circle cx="19" cy="12" r="1" fill="currentColor"/>
-                  <circle cx="5" cy="12" r="1" fill="currentColor"/>
+                  <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
-                Training Zones
+                <span>Training Zones</span>
               </RouterLink>
-              <button @click="handleLogout" class="logout-btn">
+              <div class="dropdown-divider"></div>
+              <button @click="handleLogout" class="dropdown-item logout-btn">
                 <svg viewBox="0 0 24 24" fill="none">
                   <path d="M9 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                   <polyline points="16,17 21,12 16,7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                   <line x1="21" y1="12" x2="9" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                 </svg>
-                Logout
+                <span>Logout</span>
               </button>
             </div>
           </div>
@@ -160,50 +231,77 @@ function handleLogout() {
 </script>
 
 <style scoped>
+/* Modern Navbar with Enhanced Design */
 .modern-navbar {
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(20px);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  background: var(--glass-background);
+  backdrop-filter: var(--glass-blur);
+  border-bottom: 1px solid var(--color-border);
   position: sticky;
   top: 0;
-  z-index: 100;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: var(--z-sticky);
+  transition: all var(--transition-slow);
+  box-shadow: var(--shadow-sm);
 }
 
 .navbar-container {
   max-width: 1400px;
   margin: 0 auto;
-  padding: 0.75rem 2rem;
+  padding: var(--spacing-md) var(--spacing-xl);
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: var(--spacing-xl);
 }
 
+/* Enhanced Brand Logo */
 .navbar-brand {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
   text-decoration: none;
   cursor: pointer;
+  transition: opacity var(--transition-base);
 }
 
-.navbar-brand h1 {
+.navbar-brand:hover {
+  opacity: 0.9;
+}
+
+.brand-logo {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.logo-icon {
+  width: 42px;
+  height: 42px;
+  flex-shrink: 0;
+}
+
+.brand-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.brand-text h1 {
   margin: 0;
-  font-size: 1.5rem;
-  font-weight: 700;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-bold);
+  background: var(--gradient-primary);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
+  letter-spacing: -0.5px;
+  line-height: 1.2;
 }
 
 .tagline {
-  font-size: 0.75rem;
-  color: #6b7280;
-  font-weight: 500;
-  margin-top: -2px;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: 0.3px;
 }
 
+/* Mobile Menu Toggle */
 .mobile-menu-toggle {
   display: none;
   flex-direction: column;
@@ -211,100 +309,119 @@ function handleLogout() {
   background: none;
   border: none;
   cursor: pointer;
-  padding: 0.5rem;
+  padding: var(--spacing-xs);
+  z-index: calc(var(--z-sticky) + 1);
 }
 
 .mobile-menu-toggle span {
   width: 24px;
-  height: 2px;
-  background: #1f2937;
-  border-radius: 1px;
-  transition: all 0.3s ease;
+  height: 3px;
+  background: var(--color-text-primary);
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-base);
 }
 
 .mobile-menu-toggle.active span:nth-child(1) {
-  transform: rotate(45deg) translate(8px, 8px);
+  transform: rotate(45deg) translate(7px, 7px);
 }
 
 .mobile-menu-toggle.active span:nth-child(2) {
   opacity: 0;
+  transform: translateX(-10px);
 }
 
 .mobile-menu-toggle.active span:nth-child(3) {
   transform: rotate(-45deg) translate(7px, -7px);
 }
 
+/* Navigation Menu */
 .navbar-menu {
   display: flex;
   align-items: center;
-  gap: 2rem;
+  gap: var(--spacing-xl);
+  flex: 1;
+  justify-content: flex-end;
 }
 
+/* Navigation Links with btn-modern-secondary */
 .nav-links {
   display: flex;
-  gap: 1.5rem;
+  align-items: center;
+  gap: var(--spacing-sm);
 }
 
 .nav-link {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  border-radius: 0.75rem;
+  padding: var(--spacing-xs) var(--spacing-md);
+  font-size: var(--font-size-sm);
   text-decoration: none;
-  color: #374151;
-  font-weight: 500;
-  transition: all 0.2s ease;
-  font-size: 0.95rem;
+  white-space: nowrap;
+  position: relative;
 }
 
 .nav-link svg {
-  width: 16px;
-  height: 16px;
-}
-
-.nav-link:hover {
-  background: rgba(102, 126, 234, 0.1);
-  color: #667eea;
-  transform: translateY(-1px);
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
 }
 
+/* Active State Indicator */
 .nav-link.router-link-active {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+  background: var(--color-primary);
+  color: var(--color-text-inverse);
+  border-color: var(--color-primary);
+  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.25);
+  position: relative;
 }
 
+.nav-link.router-link-active::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60%;
+  height: 3px;
+  background: var(--color-primary);
+  border-radius: var(--radius-full);
+}
+
+.nav-link.router-link-active:hover {
+  background: var(--color-primary-dark);
+  border-color: var(--color-primary-dark);
+}
+
+/* Navigation Actions */
 .nav-actions {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: var(--spacing-sm);
+  padding-left: var(--spacing-lg);
+  border-left: 1px solid var(--color-border);
 }
 
+/* Enhanced Theme Toggle */
 .theme-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border-radius: 0.75rem;
-  background: #f3f4f6;
-  border: none;
-  color: #374151;
-  cursor: pointer;
-  transition: all 0.2s ease;
+  padding: var(--spacing-xs) var(--spacing-md);
+  min-width: auto;
+  position: relative;
 }
 
-.theme-toggle svg {
+.theme-toggle .theme-icon {
   width: 18px;
   height: 18px;
+  transition: transform var(--transition-base);
 }
 
-.theme-toggle:hover {
-  background: #e5e7eb;
+.theme-toggle .theme-text {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.theme-toggle:hover .theme-icon {
   transform: rotate(20deg);
 }
 
+/* User Menu */
 .user-menu {
   position: relative;
 }
@@ -313,41 +430,44 @@ function handleLogout() {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
-  border-radius: 0.75rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  width: 42px;
+  height: 42px;
+  border-radius: var(--radius-md);
+  background: var(--gradient-primary);
   border: none;
-  color: white;
+  color: var(--color-text-inverse);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all var(--transition-base);
+  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.2);
 }
 
 .user-avatar svg {
-  width: 20px;
-  height: 20px;
+  width: 22px;
+  height: 22px;
 }
 
 .user-avatar:hover {
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
 }
 
+/* Enhanced User Dropdown */
 .user-dropdown {
   position: absolute;
-  top: 100%;
+  top: calc(100% + var(--spacing-xs));
   right: 0;
-  margin-top: 0.5rem;
-  background: white;
-  border-radius: 1rem;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  border: 1px solid var(--color-border);
   padding: 0;
-  min-width: 250px;
+  min-width: 280px;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-10px);
-  transition: all 0.3s ease;
-  z-index: 1000;
+  transition: all var(--transition-slow);
+  z-index: var(--z-dropdown);
+  overflow: hidden;
 }
 
 .user-dropdown.active {
@@ -356,72 +476,121 @@ function handleLogout() {
   transform: translateY(0);
 }
 
+/* Enhanced User Info Section */
 .user-info {
-  padding: 1rem;
-  border-bottom: 1px solid #e5e7eb;
+  padding: var(--spacing-lg);
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
+  color: var(--color-text-inverse);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.user-avatar-large {
+  width: 56px;
+  height: 56px;
+  border-radius: var(--radius-full);
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+}
+
+.user-avatar-large svg {
+  width: 28px;
+  height: 28px;
+  stroke: white;
 }
 
 .user-info .username {
   margin: 0;
-  font-weight: 600;
-  color: #1f2937;
+  font-weight: var(--font-weight-bold);
+  color: white;
+  font-size: var(--font-size-lg);
+  text-align: center;
 }
 
 .user-info small {
-  display: block;
-  color: #6b7280;
-  margin-top: 0.25rem;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: var(--font-size-xs);
+  text-align: center;
 }
 
+.dropdown-divider {
+  height: 1px;
+  background: var(--color-border);
+  margin: 0;
+}
+
+/* Enhanced Dropdown Items */
 .dropdown-item {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  color: #374151;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md) var(--spacing-lg);
+  color: var(--color-text-primary);
   text-decoration: none;
-  transition: all 0.2s ease;
-  border-bottom: 1px solid #f3f4f6;
+  transition: all var(--transition-base);
+  cursor: pointer;
+  background: none;
+  border: none;
+  width: 100%;
+  text-align: left;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
 }
 
 .dropdown-item svg {
-  width: 16px;
-  height: 16px;
-  color: #667eea;
+  width: 20px;
+  height: 20px;
+  color: var(--color-primary);
+  transition: transform var(--transition-base);
+  flex-shrink: 0;
+}
+
+.dropdown-item span {
+  flex: 1;
 }
 
 .dropdown-item:hover {
-  background: #f8fafc;
-  color: #667eea;
+  background: var(--color-surface-hover);
+  color: var(--color-primary);
+  padding-left: calc(var(--spacing-lg) + 4px);
+}
+
+.dropdown-item:hover svg {
+  transform: translateX(2px);
 }
 
 .logout-btn {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  background: none;
-  border: none;
-  color: #ef4444;
-  text-align: left;
-  cursor: pointer;
-  transition: all 0.2s ease;
+  color: var(--color-danger);
 }
 
 .logout-btn svg {
-  width: 16px;
-  height: 16px;
+  color: var(--color-danger);
 }
 
 .logout-btn:hover {
-  background: #fef2f2;
+  background: rgba(230, 57, 70, 0.08);
+  color: var(--color-danger);
 }
 
-/* Mobile Responsive */
-@media (max-width: 768px) {
+/* Mobile Responsive Design */
+@media (max-width: 992px) {
   .navbar-container {
-    padding: 0.75rem 1rem;
+    padding: var(--spacing-sm) var(--spacing-lg);
+  }
+
+  .brand-text h1 {
+    font-size: var(--font-size-lg);
+  }
+
+  .logo-icon {
+    width: 36px;
+    height: 36px;
   }
 
   .mobile-menu-toggle {
@@ -430,21 +599,23 @@ function handleLogout() {
 
   .navbar-menu {
     position: fixed;
-    top: 100%;
+    top: 65px;
     left: 0;
     right: 0;
-    background: rgba(255, 255, 255, 0.98);
-    backdrop-filter: blur(20px);
+    background: var(--color-surface);
+    backdrop-filter: var(--glass-blur);
     flex-direction: column;
-    gap: 1rem;
-    padding: 1.5rem;
-    border-top: 1px solid rgba(0, 0, 0, 0.08);
-    transform: translateY(-100%);
+    gap: var(--spacing-md);
+    padding: var(--spacing-lg);
+    border-top: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border);
+    transform: translateY(-150%);
     opacity: 0;
     visibility: hidden;
-    transition: all 0.3s ease;
-    max-height: calc(100vh - 60px);
+    transition: all var(--transition-slow);
+    max-height: calc(100vh - 65px);
     overflow-y: auto;
+    box-shadow: var(--shadow-lg);
   }
 
   .navbar-menu.active {
@@ -455,26 +626,39 @@ function handleLogout() {
 
   .nav-links {
     flex-direction: column;
-    gap: 0.5rem;
+    gap: var(--spacing-xs);
     width: 100%;
   }
 
   .nav-link {
     width: 100%;
     justify-content: flex-start;
-    padding: 1rem;
+    padding: var(--spacing-md);
+    font-size: var(--font-size-base);
+  }
+
+  .nav-link.router-link-active::after {
+    display: none;
   }
 
   .nav-actions {
     flex-direction: column;
     width: 100%;
-    gap: 1rem;
+    gap: var(--spacing-xs);
+    padding-left: 0;
+    border-left: none;
+    padding-top: var(--spacing-md);
+    border-top: 1px solid var(--color-border);
   }
 
   .theme-toggle {
     width: 100%;
     justify-content: flex-start;
-    background: #f3f4f6;
+    padding: var(--spacing-md);
+  }
+
+  .theme-toggle .theme-text {
+    display: inline;
   }
 
   .user-menu {
@@ -484,7 +668,13 @@ function handleLogout() {
   .user-avatar {
     width: 100%;
     justify-content: flex-start;
-    padding: 0 1rem;
+    padding: var(--spacing-md);
+    border-radius: var(--radius-md);
+    height: auto;
+  }
+
+  .user-avatar svg {
+    margin-right: var(--spacing-sm);
   }
 
   .user-dropdown {
@@ -493,10 +683,39 @@ function handleLogout() {
     visibility: visible;
     transform: none;
     margin: 0;
+    margin-top: var(--spacing-xs);
     box-shadow: none;
-    background: #f9fafb;
-    border-top: 1px solid #e5e7eb;
-    border-bottom: 1px solid #e5e7eb;
+    border: 1px solid var(--color-border);
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height var(--transition-slow);
+  }
+
+  .user-dropdown.active {
+    max-height: 500px;
+  }
+
+  .dropdown-item {
+    font-size: var(--font-size-base);
+  }
+}
+
+@media (max-width: 480px) {
+  .navbar-container {
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+
+  .tagline {
+    display: none;
+  }
+
+  .brand-text h1 {
+    font-size: var(--font-size-base);
+  }
+
+  .logo-icon {
+    width: 32px;
+    height: 32px;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/PasswordReset.vue b/src/components/PasswordReset.vue
index 070ef9b..3213f94 100644
--- a/src/components/PasswordReset.vue
+++ b/src/components/PasswordReset.vue
@@ -178,8 +178,8 @@ function resetForm() {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 1rem;
+  background: var(--gradient-primary);
+  padding: var(--spacing-md);
   position: relative;
   overflow: hidden;
 }
@@ -188,14 +188,14 @@ function resetForm() {
    RESET CARD
    ============================================ */
 .reset-card {
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(20px);
-  border-radius: 2rem;
+  background: var(--glass-background);
+  backdrop-filter: var(--glass-blur);
+  border-radius: var(--radius-2xl);
   max-width: 480px;
   width: 100%;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: var(--shadow-2xl);
+  border: 1px solid var(--glass-border);
+  animation: slideUp var(--transition-slower) cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   z-index: 10;
 }
@@ -204,22 +204,22 @@ function resetForm() {
    CARD HEADER
    ============================================ */
 .card-header {
-  padding: 2.5rem 2rem 1rem;
+  padding: var(--spacing-2xl) var(--spacing-xl) var(--spacing-md);
   text-align: center;
 }
 
 .logo-wrapper {
   width: 80px;
   height: 80px;
-  margin: 0 auto 1.5rem;
-  padding: 1.5rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 2rem;
-  color: white;
+  margin: 0 auto var(--spacing-lg);
+  padding: var(--spacing-lg);
+  background: var(--gradient-primary);
+  border-radius: var(--radius-2xl);
+  color: var(--color-text-inverse);
   display: flex;
   align-items: center;
   justify-content: center;
-  animation: iconBounce 0.6s ease-out 0.2s both;
+  animation: iconBounce var(--transition-slower) ease-out 0.2s both;
 }
 
 .logo-wrapper svg {
@@ -228,42 +228,42 @@ function resetForm() {
 }
 
 h1 {
-  margin: 0 0 0.75rem 0;
-  color: #1f2937;
-  font-size: 2rem;
-  font-weight: 800;
-  animation: titleSlide 0.6s ease-out 0.3s both;
+  margin: 0 0 var(--spacing-sm) 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  animation: titleSlide var(--transition-slower) ease-out 0.3s both;
 }
 
 .subtitle {
-  color: #6b7280;
-  font-size: 1rem;
-  line-height: 1.6;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-relaxed);
   margin: 0;
-  animation: subtitleFade 0.6s ease-out 0.4s both;
+  animation: subtitleFade var(--transition-slower) ease-out 0.4s both;
 }
 
 /* ============================================
    RESET FORM
    ============================================ */
 .reset-form {
-  padding: 1rem 2rem;
+  padding: var(--spacing-md) var(--spacing-xl);
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
-  animation: formSlide 0.6s ease-out 0.5s both;
+  gap: var(--spacing-lg);
+  animation: formSlide var(--transition-slower) ease-out 0.5s both;
 }
 
 .form-group {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: var(--spacing-sm);
 }
 
 label {
-  font-weight: 600;
-  color: #374151;
-  font-size: 0.95rem;
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
 }
 
 .input-wrapper {
@@ -274,45 +274,46 @@ label {
 
 input {
   width: 100%;
-  padding: 1rem 1rem 1rem 3rem;
-  border: 2px solid #e5e7eb;
-  border-radius: 1rem;
-  font-size: 1rem;
+  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) 3rem;
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-base);
   font-family: inherit;
-  transition: all 0.3s ease;
-  background: white;
+  transition: all var(--transition-slow);
+  background: var(--color-surface);
+  color: var(--color-text-primary);
   box-sizing: border-box;
 }
 
 input:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--color-primary);
   box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
   transform: translateY(-2px);
 }
 
 input:disabled {
-  background: #f9fafb;
+  background: var(--color-surface-hover);
   cursor: not-allowed;
   opacity: 0.6;
 }
 
 input::placeholder {
-  color: #9ca3af;
+  color: var(--color-text-tertiary);
 }
 
 .input-icon {
   position: absolute;
-  left: 1rem;
+  left: var(--spacing-md);
   width: 20px;
   height: 20px;
-  color: #9ca3af;
+  color: var(--color-text-tertiary);
   pointer-events: none;
 }
 
 .helper-text {
-  font-size: 0.8rem;
-  color: #6b7280;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
   margin: 0;
 }
 
@@ -321,16 +322,16 @@ input::placeholder {
    ============================================ */
 .btn-primary {
   width: 100%;
-  padding: 1.125rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
+  padding: var(--spacing-md);
+  background: var(--gradient-primary);
+  color: var(--color-text-inverse);
   border: none;
-  border-radius: 1rem;
-  font-size: 1rem;
-  font-weight: 700;
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-bold);
   cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+  transition: all var(--transition-slow);
+  box-shadow: var(--shadow-md);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -339,7 +340,7 @@ input::placeholder {
 
 .btn-primary:hover:not(:disabled) {
   transform: translateY(-3px);
-  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+  box-shadow: var(--shadow-lg);
 }
 
 .btn-primary:active:not(:disabled) {
@@ -355,7 +356,7 @@ input::placeholder {
 .loading-content {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: var(--spacing-sm);
 }
 
 .spinner {
@@ -368,23 +369,23 @@ input::placeholder {
    SUCCESS SECTION
    ============================================ */
 .success-section {
-  padding: 1rem 2rem 2rem;
+  padding: var(--spacing-md) var(--spacing-xl) var(--spacing-xl);
   text-align: center;
-  animation: formSlide 0.6s ease-out;
+  animation: formSlide var(--transition-slower) ease-out;
 }
 
 .check-animation {
   width: 80px;
   height: 80px;
-  margin: 0 auto 1.5rem;
-  padding: 1.5rem;
-  background: linear-gradient(135deg, #10b981, #059669);
-  border-radius: 50%;
-  color: white;
+  margin: 0 auto var(--spacing-lg);
+  padding: var(--spacing-lg);
+  background: var(--gradient-secondary);
+  border-radius: var(--radius-full);
+  color: var(--color-text-inverse);
   display: flex;
   align-items: center;
   justify-content: center;
-  animation: checkBounce 0.6s ease-out;
+  animation: checkBounce var(--transition-slower) ease-out;
 }
 
 .check-animation svg {
@@ -393,27 +394,27 @@ input::placeholder {
 }
 
 .success-section h3 {
-  margin: 0 0 1rem 0;
-  color: #065f46;
-  font-size: 1.5rem;
-  font-weight: 700;
+  margin: 0 0 var(--spacing-md) 0;
+  color: var(--color-secondary);
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
 }
 
 .success-message {
-  margin: 0.5rem 0;
-  color: #6b7280;
-  line-height: 1.6;
-  font-size: 0.95rem;
+  margin: var(--spacing-sm) 0;
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-relaxed);
+  font-size: var(--font-size-sm);
 }
 
 .email-display {
-  color: #667eea !important;
-  font-weight: 600;
-  font-size: 1.1rem;
+  color: var(--color-primary) !important;
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-lg);
   background: rgba(102, 126, 234, 0.1);
-  padding: 0.75rem;
-  border-radius: 0.75rem;
-  margin: 1rem 0 !important;
+  padding: var(--spacing-sm);
+  border-radius: var(--radius-md);
+  margin: var(--spacing-md) 0 !important;
   word-break: break-all;
 }
 
@@ -423,18 +424,18 @@ input::placeholder {
 .instructions {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-  margin: 1.5rem 0;
+  gap: var(--spacing-md);
+  margin: var(--spacing-lg) 0;
   text-align: left;
 }
 
 .instruction-step {
   display: flex;
-  gap: 1rem;
-  padding: 1rem;
-  background: #f8fafc;
-  border-radius: 0.75rem;
-  border-left: 4px solid #667eea;
+  gap: var(--spacing-md);
+  padding: var(--spacing-md);
+  background: var(--color-surface-hover);
+  border-radius: var(--radius-md);
+  border-left: 4px solid var(--color-primary);
 }
 
 .step-number {
@@ -444,23 +445,23 @@ input::placeholder {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border-radius: 50%;
-  font-weight: 700;
-  font-size: 1rem;
+  background: var(--gradient-primary);
+  color: var(--color-text-inverse);
+  border-radius: var(--radius-full);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-base);
 }
 
 .step-content p {
   margin: 0;
-  color: #374151;
-  font-size: 0.9rem;
-  line-height: 1.4;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
 }
 
 .step-content p:first-child {
-  font-weight: 600;
-  color: #1f2937;
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
   margin-bottom: 0.25rem;
 }
 
@@ -469,46 +470,46 @@ input::placeholder {
    ============================================ */
 .spam-notice {
   display: flex;
-  gap: 1rem;
-  padding: 1rem;
-  background: #fef3c7;
-  border: 1px solid #fcd34d;
-  border-radius: 0.75rem;
-  margin: 1rem 0;
+  gap: var(--spacing-md);
+  padding: var(--spacing-md);
+  background: rgba(245, 158, 11, 0.1);
+  border: 1px solid var(--color-warning);
+  border-radius: var(--radius-md);
+  margin: var(--spacing-md) 0;
 }
 
 .spam-notice svg {
   width: 20px;
   height: 20px;
-  color: #92400e;
+  color: var(--color-warning);
   flex-shrink: 0;
   margin-top: 2px;
 }
 
 .spam-notice p {
   margin: 0;
-  color: #92400e;
-  font-size: 0.9rem;
-  line-height: 1.5;
+  color: var(--color-warning);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
 }
 
 .spam-notice strong {
-  color: #78350f;
+  color: var(--color-warning);
 }
 
 /* ============================================
    SECONDARY BUTTON
    ============================================ */
 .btn-secondary {
-  padding: 0.875rem 1.5rem;
+  padding: var(--spacing-sm) var(--spacing-lg);
   background: rgba(102, 126, 234, 0.1);
-  color: #667eea;
+  color: var(--color-primary);
   border: 2px solid rgba(102, 126, 234, 0.2);
-  border-radius: 0.75rem;
-  font-weight: 600;
+  border-radius: var(--radius-md);
+  font-weight: var(--font-weight-semibold);
   cursor: pointer;
-  transition: all 0.3s ease;
-  margin-top: 1rem;
+  transition: all var(--transition-slow);
+  margin-top: var(--spacing-md);
 }
 
 .btn-secondary:hover {
@@ -522,14 +523,14 @@ input::placeholder {
 .error-message {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  margin-top: 1rem;
-  padding: 1rem;
+  gap: var(--spacing-sm);
+  margin-top: var(--spacing-md);
+  padding: var(--spacing-md);
   background: #fef2f2;
   border: 1px solid #fecaca;
-  color: #dc2626;
-  border-radius: 0.75rem;
-  font-size: 0.9rem;
+  color: var(--color-danger);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
   animation: shakeError 0.5s ease-out;
 }
 
@@ -541,13 +542,13 @@ input::placeholder {
 
 .error-title {
   margin: 0 0 0.25rem 0;
-  font-weight: 600;
-  font-size: 0.95rem;
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm);
 }
 
 .error-text {
   margin: 0;
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm);
   opacity: 0.9;
 }
 
@@ -557,7 +558,7 @@ input::placeholder {
 .divider {
   position: relative;
   text-align: center;
-  margin: 2rem 0 1.5rem;
+  margin: var(--spacing-xl) 0 var(--spacing-lg);
   z-index: 10;
 }
 
@@ -573,11 +574,11 @@ input::placeholder {
 
 .divider span {
   position: relative;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 0 1rem;
-  color: white;
-  font-size: 0.9rem;
-  font-weight: 500;
+  background: var(--gradient-primary);
+  padding: 0 var(--spacing-md);
+  color: var(--color-text-inverse);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
 }
 
 /* ============================================
@@ -585,7 +586,7 @@ input::placeholder {
    ============================================ */
 .links-section {
   text-align: center;
-  padding: 0 2rem 2rem;
+  padding: 0 var(--spacing-xl) var(--spacing-xl);
   z-index: 10;
   position: relative;
 }
@@ -598,15 +599,15 @@ input::placeholder {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
+  gap: var(--spacing-sm);
   color: rgba(255, 255, 255, 0.9);
   text-decoration: none;
-  font-weight: 600;
-  padding: 0.75rem 1.5rem;
-  border-radius: 0.75rem;
+  font-weight: var(--font-weight-semibold);
+  padding: var(--spacing-sm) var(--spacing-lg);
+  border-radius: var(--radius-md);
   background: rgba(255, 255, 255, 0.1);
-  transition: all 0.2s ease;
-  margin-bottom: 1rem;
+  transition: all var(--transition-base);
+  margin-bottom: var(--spacing-md);
 }
 
 .back-link svg {
@@ -620,33 +621,33 @@ input::placeholder {
 }
 
 .signup-prompt {
-  margin-top: 1rem;
+  margin-top: var(--spacing-md);
 }
 
 .signup-prompt p {
-  margin: 0 0 0.5rem 0;
+  margin: 0 0 var(--spacing-sm) 0;
   color: rgba(255, 255, 255, 0.8);
-  font-size: 0.95rem;
+  font-size: var(--font-size-sm);
 }
 
 .signup-link {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
-  color: white;
+  gap: var(--spacing-sm);
+  color: var(--color-text-inverse);
   text-decoration: none;
-  font-weight: 700;
-  transition: all 0.2s ease;
+  font-weight: var(--font-weight-bold);
+  transition: all var(--transition-base);
 }
 
 .signup-link svg {
   width: 16px;
   height: 16px;
-  transition: all 0.2s ease;
+  transition: all var(--transition-base);
 }
 
 .signup-link:hover {
-  gap: 0.75rem;
+  gap: var(--spacing-sm);
   text-decoration: underline;
 }
 
@@ -662,7 +663,7 @@ input::placeholder {
 
 .decoration-blob {
   position: absolute;
-  border-radius: 50%;
+  border-radius: var(--radius-full);
   background: rgba(255, 255, 255, 0.1);
   animation: float 8s ease-in-out infinite;
 }
@@ -789,66 +790,66 @@ input::placeholder {
    ============================================ */
 @media (max-width: 640px) {
   .password-reset-container {
-    padding: 1rem;
+    padding: var(--spacing-md);
   }
 
   .reset-card {
-    border-radius: 1.5rem;
+    border-radius: var(--radius-xl);
   }
 
   .card-header {
-    padding: 2rem 1.5rem 1rem;
+    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-md);
   }
 
   .reset-form {
-    padding: 1rem 1.5rem;
+    padding: var(--spacing-md) var(--spacing-lg);
   }
 
   .success-section {
-    padding: 1rem 1.5rem 1.5rem;
+    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
   }
 
   .links-section {
-    padding: 0 1.5rem 1.5rem;
+    padding: 0 var(--spacing-lg) var(--spacing-lg);
   }
 
   h1 {
-    font-size: 1.75rem;
+    font-size: var(--font-size-3xl);
   }
 
   .subtitle {
-    font-size: 0.95rem;
+    font-size: var(--font-size-sm);
   }
 
   .logo-wrapper {
     width: 64px;
     height: 64px;
-    margin-bottom: 1rem;
-    padding: 1rem;
+    margin-bottom: var(--spacing-md);
+    padding: var(--spacing-md);
   }
 
   .instructions {
-    gap: 0.75rem;
+    gap: var(--spacing-sm);
   }
 
   .instruction-step {
-    gap: 0.75rem;
-    padding: 0.75rem;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm);
   }
 
   .step-number {
     width: 32px;
     height: 32px;
-    font-size: 0.9rem;
+    font-size: var(--font-size-sm);
   }
 
   .step-content p {
-    font-size: 0.85rem;
+    font-size: var(--font-size-sm);
   }
 
   .spam-notice {
-    gap: 0.75rem;
-    padding: 0.75rem;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm);
   }
 
   .spam-notice svg {
@@ -857,25 +858,25 @@ input::placeholder {
   }
 
   .spam-notice p {
-    font-size: 0.85rem;
+    font-size: var(--font-size-sm);
   }
 
   .email-display {
-    font-size: 1rem;
+    font-size: var(--font-size-base);
     word-break: break-word;
   }
 
   input {
-    padding: 0.875rem 0.875rem 0.875rem 2.75rem;
+    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 2.75rem;
     font-size: 16px;
   }
 
   .input-icon {
-    left: 0.75rem;
+    left: var(--spacing-sm);
   }
 
   .divider {
-    margin: 1.5rem 0 1rem;
+    margin: var(--spacing-lg) 0 var(--spacing-md);
   }
 
   .divider::before {
@@ -885,11 +886,11 @@ input::placeholder {
 
   .back-link {
     width: 100%;
-    margin-bottom: 1rem;
+    margin-bottom: var(--spacing-md);
   }
 
   .signup-prompt p {
-    font-size: 0.9rem;
+    font-size: var(--font-size-sm);
   }
 
   .blob-1 {
@@ -910,28 +911,28 @@ input::placeholder {
 
 @media (max-width: 480px) {
   .reset-card {
-    border-radius: 1.25rem;
+    border-radius: var(--radius-lg);
   }
 
   .card-header {
-    padding: 1.5rem 1rem 0.75rem;
+    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-sm);
   }
 
   .reset-form {
-    padding: 0.75rem 1rem;
-    gap: 1rem;
+    padding: var(--spacing-sm) var(--spacing-md);
+    gap: var(--spacing-md);
   }
 
   .success-section {
-    padding: 0.75rem 1rem 1rem;
+    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
   }
 
   .links-section {
-    padding: 0 1rem 1rem;
+    padding: 0 var(--spacing-md) var(--spacing-md);
   }
 
   h1 {
-    font-size: 1.5rem;
+    font-size: var(--font-size-2xl);
   }
 
   .logo-wrapper {
@@ -942,28 +943,28 @@ input::placeholder {
   .check-animation {
     width: 64px;
     height: 64px;
-    margin-bottom: 1rem;
-    padding: 1rem;
+    margin-bottom: var(--spacing-md);
+    padding: var(--spacing-md);
   }
 
   label {
-    font-size: 0.9rem;
+    font-size: var(--font-size-sm);
   }
 
   .btn-primary {
-    padding: 1rem;
-    font-size: 0.95rem;
+    padding: var(--spacing-md);
+    font-size: var(--font-size-sm);
   }
 
   .btn-secondary {
-    padding: 0.75rem 1rem;
-    font-size: 0.9rem;
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-sm);
   }
 
   .error-message {
-    gap: 0.5rem;
-    padding: 0.75rem;
-    font-size: 0.85rem;
+    gap: var(--spacing-xs);
+    padding: var(--spacing-sm);
+    font-size: var(--font-size-sm);
   }
 
   .error-message svg {
@@ -972,21 +973,21 @@ input::placeholder {
   }
 
   .divider span {
-    font-size: 0.85rem;
+    font-size: var(--font-size-sm);
   }
 
   .signup-prompt {
-    margin-top: 0.75rem;
+    margin-top: var(--spacing-sm);
   }
 
   .signup-prompt p {
-    font-size: 0.85rem;
-    margin-bottom: 0.375rem;
+    font-size: var(--font-size-sm);
+    margin-bottom: var(--spacing-xs);
   }
 
   .back-link {
-    padding: 0.625rem 1rem;
-    font-size: 0.9rem;
+    padding: var(--spacing-xs) var(--spacing-md);
+    font-size: var(--font-size-sm);
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/TrainingZones.vue b/src/components/TrainingZones.vue
index 9cb1d7c..e14d9d0 100644
--- a/src/components/TrainingZones.vue
+++ b/src/components/TrainingZones.vue
@@ -4,20 +4,67 @@
     <ModernNavbar />
 
     <div class="zones-content">
-      <!-- Page Header -->
-      <div class="page-header">
-        <div class="header-content">
+      <!-- Page Header with Info Box -->
+      <div class="section-header">
+        <div class="section-header-content">
           <h2>Training Zones</h2>
-          <p class="page-description">Your personalized training zones based on FTP and Max HR</p>
+          <p class="section-subtitle">Your personalized training zones for optimal performance</p>
         </div>
-        <div class="zone-stats">
-          <div v-if="profile.profile?.ftp" class="stat-card">
-            <span class="stat-value">{{ profile.profile.ftp }}W</span>
-            <span class="stat-label">Functional Threshold Power</span>
+      </div>
+
+      <!-- Info Box Explaining Zones -->
+      <div class="info-box-info">
+        <div class="info-box-icon">
+          <svg viewBox="0 0 24 24" fill="none">
+            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+            <path d="M12 16V12M12 8H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+        </div>
+        <div class="info-box-content">
+          <h3 class="info-box-title">What are Training Zones?</h3>
+          <p class="info-box-text">Training zones are intensity ranges that help you train more effectively. Heart rate zones are based on your maximum heart rate, while power zones are calculated from your Functional Threshold Power (FTP). Training in different zones targets specific physiological adaptations to improve your cycling performance.</p>
+        </div>
+      </div>
+
+      <!-- Metric Cards for FTP and Max HR -->
+      <div class="metric-cards-grid">
+        <div v-if="profile.profile?.ftp" class="metric-card">
+          <div class="metric-icon power-icon">
+            <svg viewBox="0 0 24 24" fill="none">
+              <polygon points="13,2 3,14 12,14 11,22 21,10 12,10 13,2" fill="currentColor"/>
+            </svg>
           </div>
-          <div v-if="profile.profile?.max_hr" class="stat-card">
-            <span class="stat-value">{{ profile.profile.max_hr }}</span>
-            <span class="stat-label">Maximum Heart Rate</span>
+          <div class="metric-content">
+            <div class="metric-label">Functional Threshold Power</div>
+            <div class="metric-value">{{ profile.profile.ftp }}<span class="metric-unit">W</span></div>
+            <div class="metric-description">Your sustainable 1-hour power output</div>
+          </div>
+        </div>
+
+        <div v-if="profile.profile?.max_hr" class="metric-card">
+          <div class="metric-icon heart-icon">
+            <svg viewBox="0 0 24 24" fill="none">
+              <path d="M20.84 4.61C19.32 3.09 17.35 2.25 15.3 2.25C13.74 2.25 12.26 2.83 11.1 3.9C9.94 2.83 8.46 2.25 6.9 2.25C4.85 2.25 2.88 3.09 1.36 4.61C-0.64 6.61 -0.45 9.96 1.92 12.75L11.1 23.1L20.28 12.75C22.65 9.96 22.84 6.61 20.84 4.61Z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="metric-content">
+            <div class="metric-label">Maximum Heart Rate</div>
+            <div class="metric-value">{{ profile.profile.max_hr }}<span class="metric-unit">bpm</span></div>
+            <div class="metric-description">Your highest recorded heart rate</div>
+          </div>
+        </div>
+
+        <div v-if="profile.profile?.resting_hr" class="metric-card">
+          <div class="metric-icon rest-icon">
+            <svg viewBox="0 0 24 24" fill="none">
+              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+              <path d="M12 6V12L16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            </svg>
+          </div>
+          <div class="metric-content">
+            <div class="metric-label">Resting Heart Rate</div>
+            <div class="metric-value">{{ profile.profile.resting_hr }}<span class="metric-unit">bpm</span></div>
+            <div class="metric-description">Your baseline heart rate at rest</div>
           </div>
         </div>
       </div>
@@ -48,65 +95,54 @@
         <!-- Heart Rate Zones -->
         <div v-if="profile.profile?.max_hr" class="zones-section">
           <div class="section-header">
-            <div class="section-title">
-              <svg class="section-icon" viewBox="0 0 24 24" fill="none">
-                <path d="M20.84 4.61C19.32 3.09 17.35 2.25 15.3 2.25C13.74 2.25 12.26 2.83 11.1 3.9C9.94 2.83 8.46 2.25 6.9 2.25C4.85 2.25 2.88 3.09 1.36 4.61C-0.64 6.61 -0.45 9.96 1.92 12.75L11.1 23.1L20.28 12.75C22.65 9.96 22.84 6.61 20.84 4.61Z" fill="currentColor"/>
-              </svg>
-              <h3>Heart Rate Zones</h3>
-            </div>
-            <div class="zone-info-pill">
-              <span class="info-label">Max HR:</span>
-              <span class="info-value">{{ profile.profile.max_hr }} bpm</span>
-              <span v-if="profile.profile.resting_hr" class="info-separator">•</span>
-              <span v-if="profile.profile.resting_hr" class="info-label">Rest HR:</span>
-              <span v-if="profile.profile.resting_hr" class="info-value">{{ profile.profile.resting_hr }} bpm</span>
-              <span v-else class="info-value">-- bpm</span>
+            <div class="section-header-content">
+              <div class="section-title-row">
+                <svg class="section-icon heart-rate-icon" viewBox="0 0 24 24" fill="none">
+                  <path d="M20.84 4.61C19.32 3.09 17.35 2.25 15.3 2.25C13.74 2.25 12.26 2.83 11.1 3.9C9.94 2.83 8.46 2.25 6.9 2.25C4.85 2.25 2.88 3.09 1.36 4.61C-0.64 6.61 -0.45 9.96 1.92 12.75L11.1 23.1L20.28 12.75C22.65 9.96 22.84 6.61 20.84 4.61Z" fill="currentColor"/>
+                </svg>
+                <h3>Heart Rate Zones</h3>
+              </div>
+              <p class="section-explanation">Train at the right intensity based on your cardiovascular capacity. Each zone targets specific fitness adaptations.</p>
             </div>
           </div>
 
           <div class="zones-grid">
-            <div v-for="(zone, index) in hrZones" :key="index" class="zone-card heart-rate" :style="{ '--zone-color': zone.color }">
-              <div class="zone-header">
-                <h4>Zone {{ index + 1 }}</h4>
-                <div class="zone-name">{{ zone.name }}</div>
+            <div v-for="(zone, index) in hrZones" :key="index" class="card-modern zone-visual-card" :style="{ '--zone-color': zone.color }">
+              <div class="zone-number-badge" :style="{ backgroundColor: zone.color }">
+                <span>Z{{ index + 1 }}</span>
               </div>
-              <div class="zone-range">
-                <span class="range-value">{{ zone.min }} - {{ zone.max }}</span>
-                <span class="range-unit">bpm</span>
-              </div>
-              <div class="zone-description">
-                <div class="description-icon">
-                  <svg v-if="index === 0" viewBox="0 0 24 24" fill="none">
-                    <circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="2"/>
-                    <path d="M8 14S9.5 16 12 16S16 14 16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                    <line x1="9" y1="9" x2="9.01" y2="9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                    <line x1="15" y1="9" x2="15.01" y2="9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                  </svg>
-                  <svg v-else-if="index === 1" viewBox="0 0 24 24" fill="none">
-                    <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2"/>
-                    <circle cx="12" cy="12" r="3" fill="currentColor"/>
-                  </svg>
-                  <svg v-else-if="index === 2" viewBox="0 0 24 24" fill="none">
-                    <polygon points="12,2 15,8 22,8 17,13 19,21 12,17 5,21 7,13 2,8 9,8" stroke="currentColor" stroke-width="2" fill="none"/>
-                  </svg>
-                  <svg v-else-if="index === 3" viewBox="0 0 24 24" fill="none">
-                    <polyline points="22,12 18,12 15,21 9,3 6,12 2,12" stroke="currentColor" stroke-width="2" fill="none"/>
-                  </svg>
-                  <svg v-else viewBox="0 0 24 24" fill="none">
-                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-                    <polyline points="16,12 12,8 8,12" stroke="currentColor" stroke-width="2" fill="none"/>
-                    <polyline points="16,16 12,12 8,16" stroke="currentColor" stroke-width="2" fill="none"/>
-                  </svg>
+
+              <div class="zone-main-content">
+                <div class="zone-name-section">
+                  <h4 class="zone-name-large">{{ zone.name }}</h4>
+                  <p class="zone-description-text">{{ getHRZoneDescription(index) }}</p>
                 </div>
-                <span v-if="index === 0">Light recovery</span>
-                <span v-else-if="index === 1">Endurance base</span>
-                <span v-else-if="index === 2">Tempo work</span>
-                <span v-else-if="index === 3">Lactate threshold</span>
-                <span v-else-if="index === 4">Max effort</span>
-              </div>
-              <div class="zone-progress">
-                <div class="progress-bar">
-                  <div class="progress-fill" :style="{ width: `${(index + 1) * 20}%`, background: zone.color }"></div>
+
+                <div class="zone-range-display">
+                  <div class="range-icon">
+                    <svg viewBox="0 0 24 24" fill="none">
+                      <path d="M20.84 4.61C19.32 3.09 17.35 2.25 15.3 2.25C13.74 2.25 12.26 2.83 11.1 3.9C9.94 2.83 8.46 2.25 6.9 2.25C4.85 2.25 2.88 3.09 1.36 4.61C-0.64 6.61 -0.45 9.96 1.92 12.75L11.1 23.1L20.28 12.75C22.65 9.96 22.84 6.61 20.84 4.61Z" fill="currentColor"/>
+                    </svg>
+                  </div>
+                  <div class="range-values">
+                    <span class="range-number">{{ zone.min }}</span>
+                    <span class="range-separator">-</span>
+                    <span class="range-number">{{ zone.max }}</span>
+                    <span class="range-unit">bpm</span>
+                  </div>
+                </div>
+
+                <div class="zone-bar-container">
+                  <div class="zone-bar-background">
+                    <div class="zone-bar-fill" :style="{
+                      width: `${((index + 1) / hrZones.length) * 100}%`,
+                      background: `linear-gradient(90deg, ${zone.color}dd, ${zone.color})`
+                    }"></div>
+                  </div>
+                  <div class="zone-bar-labels">
+                    <span class="zone-bar-label">{{ calculateHRPercentage(zone.min) }}%</span>
+                    <span class="zone-bar-label">{{ calculateHRPercentage(zone.max) }}%</span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -116,34 +152,54 @@
         <!-- Power Zones -->
         <div v-if="profile.profile?.ftp" class="zones-section">
           <div class="section-header">
-            <div class="section-title">
-              <svg class="section-icon" viewBox="0 0 24 24" fill="none">
-                <polygon points="13,2 3,14 12,14 11,22 21,10 12,10 13,2" stroke="currentColor" stroke-width="2" fill="none"/>
-              </svg>
-              <h3>Power Zones</h3>
-            </div>
-            <div class="zone-info-pill">
-              <span class="info-label">FTP:</span>
-              <span class="info-value">{{ profile.profile.ftp }}W</span>
+            <div class="section-header-content">
+              <div class="section-title-row">
+                <svg class="section-icon power-icon" viewBox="0 0 24 24" fill="none">
+                  <polygon points="13,2 3,14 12,14 11,22 21,10 12,10 13,2" fill="currentColor"/>
+                </svg>
+                <h3>Power Zones</h3>
+              </div>
+              <p class="section-explanation">Train with precision using power-based zones. These zones are calculated from your FTP and provide the most accurate training targets.</p>
             </div>
           </div>
 
           <div class="zones-grid">
-            <div v-for="(zone, index) in powerZones" :key="index" class="zone-card power" :style="{ '--zone-color': zone.color }">
-              <div class="zone-header">
-                <h4>Zone {{ index + 1 }}</h4>
-                <div class="zone-name">{{ zone.name }}</div>
+            <div v-for="(zone, index) in powerZones" :key="index" class="card-modern zone-visual-card" :style="{ '--zone-color': zone.color }">
+              <div class="zone-number-badge" :style="{ backgroundColor: zone.color }">
+                <span>Z{{ index + 1 }}</span>
               </div>
-              <div class="zone-range">
-                <span class="range-value">{{ zone.min }} - {{ zone.max }}</span>
-                <span class="range-unit">W</span>
-              </div>
-              <div class="zone-percentage">
-                <span>{{ calculatePercentage(zone.min) }}% - {{ calculatePercentage(zone.max) }}% FTP</span>
-              </div>
-              <div class="zone-progress">
-                <div class="progress-bar">
-                  <div class="progress-fill" :style="{ width: `${calculatePercentage(zone.max)}%`, background: zone.color }"></div>
+
+              <div class="zone-main-content">
+                <div class="zone-name-section">
+                  <h4 class="zone-name-large">{{ zone.name }}</h4>
+                  <p class="zone-description-text">{{ getPowerZoneDescription(index) }}</p>
+                </div>
+
+                <div class="zone-range-display">
+                  <div class="range-icon">
+                    <svg viewBox="0 0 24 24" fill="none">
+                      <polygon points="13,2 3,14 12,14 11,22 21,10 12,10 13,2" fill="currentColor"/>
+                    </svg>
+                  </div>
+                  <div class="range-values">
+                    <span class="range-number">{{ zone.min }}</span>
+                    <span class="range-separator">-</span>
+                    <span class="range-number">{{ zone.max }}</span>
+                    <span class="range-unit">W</span>
+                  </div>
+                </div>
+
+                <div class="zone-bar-container">
+                  <div class="zone-bar-background">
+                    <div class="zone-bar-fill" :style="{
+                      width: `${calculatePercentage(zone.max)}%`,
+                      background: `linear-gradient(90deg, ${zone.color}dd, ${zone.color})`
+                    }"></div>
+                  </div>
+                  <div class="zone-bar-labels">
+                    <span class="zone-bar-label">{{ calculatePercentage(zone.min) }}%</span>
+                    <span class="zone-bar-label">{{ calculatePercentage(zone.max) }}%</span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -154,17 +210,20 @@
       <!-- Training Guide -->
       <div class="guides-section">
         <div class="section-header">
-          <div class="section-title">
-            <svg class="section-icon" viewBox="0 0 24 24" fill="none">
-              <path d="M9 11H15M9 15H15M17 21L12 16L7 21V5C7 4.46957 7.21071 3.96086 7.58579 3.58579C7.96086 3.21071 8.46957 3 9 3H15C15.5304 3 16.0391 3.21071 16.4142 3.58579C16.7893 3.96086 17 4.46957 17 5V21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-            <h3>Training Guide</h3>
+          <div class="section-header-content">
+            <div class="section-title-row">
+              <svg class="section-icon" viewBox="0 0 24 24" fill="none">
+                <path d="M9 11H15M9 15H15M17 21L12 16L7 21V5C7 4.46957 7.21071 3.96086 7.58579 3.58579C7.96086 3.21071 8.46957 3 9 3H15C15.5304 3 16.0391 3.21071 16.4142 3.58579C16.7893 3.96086 17 4.46957 17 5V21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              <h3>Training Guide</h3>
+            </div>
+            <p class="section-explanation">Learn how to effectively use each training zone to reach your cycling goals</p>
           </div>
-          <p class="section-description">Learn how to effectively use each training zone</p>
         </div>
-        
+
+
         <div class="guide-cards">
-          <div class="guide-card" data-zone="1">
+          <div class="card-modern guide-card" data-zone="1">
             <div class="guide-header">
               <div class="guide-icon recovery">
                 <svg viewBox="0 0 24 24" fill="none">
@@ -198,7 +257,7 @@
             </div>
           </div>
 
-          <div class="guide-card" data-zone="2">
+          <div class="card-modern guide-card" data-zone="2">
             <div class="guide-header">
               <div class="guide-icon endurance">
                 <svg viewBox="0 0 24 24" fill="none">
@@ -230,7 +289,7 @@
             </div>
           </div>
 
-          <div class="guide-card" data-zone="3">
+          <div class="card-modern guide-card" data-zone="3">
             <div class="guide-header">
               <div class="guide-icon tempo">
                 <svg viewBox="0 0 24 24" fill="none">
@@ -261,7 +320,7 @@
             </div>
           </div>
 
-          <div class="guide-card" data-zone="4">
+          <div class="card-modern guide-card" data-zone="4">
             <div class="guide-header">
               <div class="guide-icon threshold">
                 <svg viewBox="0 0 24 24" fill="none">
@@ -292,7 +351,7 @@
             </div>
           </div>
 
-          <div class="guide-card" data-zone="5">
+          <div class="card-modern guide-card" data-zone="5">
             <div class="guide-header">
               <div class="guide-icon vo2max">
                 <svg viewBox="0 0 24 24" fill="none">
@@ -325,7 +384,7 @@
             </div>
           </div>
 
-          <div class="guide-card" data-zone="6">
+          <div class="card-modern guide-card" data-zone="6">
             <div class="guide-header">
               <div class="guide-icon anaerobic">
                 <svg viewBox="0 0 24 24" fill="none">
@@ -356,7 +415,7 @@
             </div>
           </div>
 
-          <div class="guide-card" data-zone="7">
+          <div class="card-modern guide-card" data-zone="7">
             <div class="guide-header">
               <div class="guide-icon sprint">
                 <svg viewBox="0 0 24 24" fill="none">
@@ -404,17 +463,17 @@ const zones = ref({})
 const hrZones = computed(() => {
   return zones.value.hr_zones ? [
     { ...zones.value.hr_zones.zone_1, name: 'Active Recovery', color: '#10b981' },
-    { ...zones.value.hr_zones.zone_2, name: 'Endurance', color: '#3b82f6' },
-    { ...zones.value.hr_zones.zone_3, name: 'Tempo', color: '#f59e0b' },
-    { ...zones.value.hr_zones.zone_4, name: 'Threshold', color: '#ef4444' },
-    { ...zones.value.hr_zones.zone_5, name: 'VO2 Max', color: '#8b5cf6' },
+    { ...zones.value.hr_zones.zone_2, name: 'Endurance', color: '#22c55e' },
+    { ...zones.value.hr_zones.zone_3, name: 'Tempo', color: '#3b82f6' },
+    { ...zones.value.hr_zones.zone_4, name: 'Threshold', color: '#f59e0b' },
+    { ...zones.value.hr_zones.zone_5, name: 'VO2 Max', color: '#ef4444' },
   ] : []
 })
 
 const powerZones = computed(() => {
   return zones.value.power_zones ? [
     { ...zones.value.power_zones.zone_1, name: 'Active Recovery', color: '#10b981' },
-    { ...zones.value.power_zones.zone_2, name: 'Endurance', color: '#059669' },
+    { ...zones.value.power_zones.zone_2, name: 'Endurance', color: '#22c55e' },
     { ...zones.value.power_zones.zone_3, name: 'Tempo', color: '#3b82f6' },
     { ...zones.value.power_zones.zone_4, name: 'Threshold', color: '#1d4ed8' },
     { ...zones.value.power_zones.zone_5, name: 'VO2 Max', color: '#f59e0b' },
@@ -438,12 +497,41 @@ onMounted(async () => {
 function calculatePercentage(watts) {
   return Math.round((watts / profile.value.profile.ftp) * 100)
 }
+
+function calculateHRPercentage(bpm) {
+  if (!profile.value.profile?.max_hr) return 0
+  return Math.round((bpm / profile.value.profile.max_hr) * 100)
+}
+
+function getHRZoneDescription(index) {
+  const descriptions = [
+    'Very light effort for active recovery and warm-up. Easy conversation pace.',
+    'Comfortable pace for building aerobic base. Can maintain for hours.',
+    'Moderately hard tempo pace. Controlled breathing, some discomfort.',
+    'Hard sustainable effort at lactate threshold. Heavy breathing.',
+    'Very hard efforts at VO2 Max. Short intervals only, maximum sustainable intensity.'
+  ]
+  return descriptions[index] || ''
+}
+
+function getPowerZoneDescription(index) {
+  const descriptions = [
+    'Very light spinning for recovery. Minimal fatigue, easy pedaling.',
+    'Steady endurance pace for base building. Fat burning zone.',
+    'Tempo efforts for muscular endurance. Comfortably hard.',
+    'Lactate threshold power around FTP. Key zone for racing fitness.',
+    'VO2 Max intervals for aerobic capacity. Very demanding efforts.',
+    'Anaerobic capacity work above VO2 Max. Severe intensity.',
+    'Maximum power sprints. Neuromuscular training, explosive efforts.'
+  ]
+  return descriptions[index] || ''
+}
 </script>
 
 <style scoped>
 .zones-page {
   min-height: 100vh;
-  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  background: linear-gradient(135deg, var(--color-background) 0%, #f8fafc 100%);
 }
 
 /* ============================================
@@ -452,67 +540,211 @@ function calculatePercentage(watts) {
 .zones-content {
   max-width: 1400px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: var(--spacing-xl);
 }
 
-.page-header {
+/* ============================================
+   SECTION HEADER
+   ============================================ */
+.section-header {
+  margin-bottom: var(--spacing-2xl);
+  animation: slideInDown var(--transition-slower) ease-out;
+}
+
+.section-header-content {
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 3rem;
-  padding: 2rem;
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(20px);
-  border-radius: 2rem;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-  animation: slideInDown 0.6s ease-out;
+  flex-direction: column;
+  gap: var(--spacing-sm);
 }
 
-.header-content h2 {
-  margin: 0 0 0.5rem 0;
-  font-size: 2.5rem;
-  font-weight: 800;
-  background: linear-gradient(135deg, #1f2937 0%, #4b5563 100%);
+.section-header-content h2 {
+  margin: 0;
+  font-size: var(--font-size-4xl);
+  font-weight: var(--font-weight-bold);
+  background: linear-gradient(135deg, var(--color-primary) 0%, #6366f1 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
-.page-description {
+.section-subtitle {
   margin: 0;
-  font-size: 1.1rem;
-  color: #6b7280;
-  font-weight: 500;
+  font-size: var(--font-size-lg);
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
 }
 
-.zone-stats {
+.section-title-row {
   display: flex;
-  gap: 1.5rem;
-}
-
-.stat-card {
-  display: flex;
-  flex-direction: column;
   align-items: center;
-  padding: 1.5rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 1.5rem;
+  gap: var(--spacing-md);
+  margin-bottom: var(--spacing-xs);
+}
+
+.section-icon {
+  width: 32px;
+  height: 32px;
+  color: var(--color-primary);
+}
+
+.section-icon.heart-rate-icon {
+  color: #ef4444;
+}
+
+.section-icon.power-icon {
+  color: #f59e0b;
+}
+
+.section-header-content h3 {
+  margin: 0;
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+}
+
+.section-explanation {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-relaxed);
+}
+
+/* ============================================
+   INFO BOX
+   ============================================ */
+.info-box-info {
+  display: flex;
+  gap: var(--spacing-lg);
+  padding: var(--spacing-xl);
+  background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
+  border: 1px solid #93c5fd;
+  border-radius: var(--radius-xl);
+  margin-bottom: var(--spacing-2xl);
+  animation: slideInUp var(--transition-slower) ease-out;
+}
+
+.info-box-icon {
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
+  color: #3b82f6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+}
+
+.info-box-icon svg {
+  width: 28px;
+  height: 28px;
+}
+
+.info-box-content {
+  flex: 1;
+}
+
+.info-box-title {
+  margin: 0 0 var(--spacing-sm) 0;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+  color: #1e40af;
+}
+
+.info-box-text {
+  margin: 0;
+  font-size: var(--font-size-base);
+  color: #1e3a8a;
+  line-height: var(--line-height-relaxed);
+}
+
+/* ============================================
+   METRIC CARDS
+   ============================================ */
+.metric-cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: var(--spacing-lg);
+  margin-bottom: var(--spacing-2xl);
+}
+
+.metric-card {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+  padding: var(--spacing-xl);
+  background: white;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-md);
+  transition: all var(--transition-normal);
+  animation: slideInUp var(--transition-slower) ease-out;
+}
+
+.metric-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-xl);
+}
+
+.metric-icon {
+  width: 56px;
+  height: 56px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-lg);
   color: white;
-  min-width: 140px;
-  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
 }
 
-.stat-value {
-  font-size: 1.75rem;
-  font-weight: 800;
-  margin-bottom: 0.25rem;
+.metric-icon.power-icon {
+  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
 }
 
-.stat-label {
-  font-size: 0.8rem;
-  text-align: center;
-  opacity: 0.9;
+.metric-icon.heart-icon {
+  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+}
+
+.metric-icon.rest-icon {
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+}
+
+.metric-icon svg {
+  width: 28px;
+  height: 28px;
+}
+
+.metric-content {
+  flex: 1;
+}
+
+.metric-label {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
+  margin-bottom: var(--spacing-xs);
+}
+
+.metric-value {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  line-height: 1;
+  margin-bottom: var(--spacing-xs);
+}
+
+.metric-unit {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  margin-left: var(--spacing-xs);
+}
+
+.metric-description {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  line-height: var(--line-height-relaxed);
 }
 
 /* ============================================
@@ -520,22 +752,22 @@ function calculatePercentage(watts) {
    ============================================ */
 .empty-state {
   text-align: center;
-  padding: 4rem 2rem;
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(20px);
-  border-radius: 2rem;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  padding: var(--spacing-4xl) var(--spacing-xl);
+  background: var(--glass-background);
+  backdrop-filter: var(--glass-blur);
+  border-radius: var(--radius-2xl);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--shadow-glass);
 }
 
 .empty-icon {
   width: 120px;
   height: 120px;
-  margin: 0 auto 2rem;
-  padding: 2rem;
-  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
-  border-radius: 50%;
-  color: #6b7280;
+  margin: 0 auto var(--spacing-xl);
+  padding: var(--spacing-xl);
+  background: linear-gradient(135deg, var(--color-surface-hover), var(--color-border));
+  border-radius: var(--radius-full);
+  color: var(--color-text-secondary);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -547,32 +779,32 @@ function calculatePercentage(watts) {
 }
 
 .empty-state h3 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #1f2937;
+  margin: 0 0 var(--spacing-md) 0;
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
 }
 
 .empty-state p {
-  margin: 0 0 2rem 0;
-  color: #6b7280;
-  font-size: 1.1rem;
-  line-height: 1.6;
+  margin: 0 0 var(--spacing-xl) 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-lg);
+  line-height: var(--line-height-relaxed);
 }
 
 .btn-primary {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 1rem 2rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-md) var(--spacing-xl);
+  background: var(--gradient-primary);
+  color: var(--color-text-inverse);
   text-decoration: none;
-  border-radius: 1rem;
-  font-weight: 600;
-  font-size: 1rem;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+  border-radius: var(--radius-lg);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-base);
+  transition: all var(--transition-slow);
+  box-shadow: var(--shadow-md);
   border: none;
   cursor: pointer;
 }
@@ -584,7 +816,7 @@ function calculatePercentage(watts) {
 
 .btn-primary:hover {
   transform: translateY(-3px);
-  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+  box-shadow: var(--shadow-lg);
 }
 
 /* ============================================
@@ -593,276 +825,250 @@ function calculatePercentage(watts) {
 .zones-container {
   display: flex;
   flex-direction: column;
-  gap: 3rem;
+  gap: var(--spacing-3xl);
 }
 
 .zones-section {
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(20px);
-  border-radius: 2rem;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  animation: slideInUp 0.6s ease-out;
+  margin-bottom: var(--spacing-2xl);
+  animation: slideInUp var(--transition-slower) ease-out;
 }
 
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: 2rem;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(248, 250, 252, 0.5) 100%);
-}
-
-.section-title {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.section-icon {
-  width: 32px;
-  height: 32px;
-  color: #667eea;
-}
-
-.section-title h3 {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #1f2937;
-}
-
-.zone-info-pill {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1.25rem;
-  background: rgba(102, 126, 234, 0.1);
-  border-radius: 2rem;
-  font-size: 0.9rem;
-  font-weight: 600;
-}
-
-.info-label {
-  color: #6b7280;
-}
-
-.info-value {
-  color: #667eea;
-}
-
-.info-separator {
-  color: #9ca3af;
-}
-
-.section-description {
-  margin: 0.5rem 0 0 0;
-  color: #6b7280;
-  font-size: 1rem;
-}
 
 /* ============================================
    ZONES GRID
    ============================================ */
 .zones-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 1.5rem;
-  padding: 2rem;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: var(--spacing-xl);
 }
 
-.zone-card {
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
-  border-radius: 1.5rem;
-  padding: 1.5rem;
-  border-left: 5px solid var(--zone-color);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+/* ============================================
+   ZONE VISUAL CARD
+   ============================================ */
+.zone-visual-card {
   position: relative;
-  overflow: hidden;
-  animation: slideInUp 0.6s ease-out;
+  overflow: visible;
+  transition: all var(--transition-normal);
 }
 
-.zone-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 100px;
-  height: 100px;
-  background: linear-gradient(135deg, var(--zone-color), transparent);
-  opacity: 0.1;
-  border-radius: 50%;
-  transform: translate(50%, -50%);
-}
-
-.zone-card:hover {
-  transform: translateY(-4px);
+.zone-visual-card:hover {
+  transform: translateY(-6px);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
 }
 
-.zone-header {
+.zone-number-badge {
+  position: absolute;
+  top: -12px;
+  right: var(--spacing-lg);
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-full);
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 1rem;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--shadow-lg);
+  z-index: 10;
 }
 
-.zone-header h4 {
-  margin: 0;
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: #6b7280;
-  text-transform: uppercase;
+.zone-number-badge span {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+  color: white;
   letter-spacing: 0.05em;
 }
 
-.zone-name {
-  font-size: 1.1rem;
-  font-weight: 700;
-  color: #1f2937;
+.zone-main-content {
+  padding-top: var(--spacing-md);
 }
 
-.zone-range {
+.zone-name-section {
+  margin-bottom: var(--spacing-xl);
+  padding-bottom: var(--spacing-lg);
+  border-bottom: 2px solid var(--color-border);
+}
+
+.zone-name-large {
+  margin: 0 0 var(--spacing-sm) 0;
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+}
+
+.zone-description-text {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-relaxed);
+}
+
+.zone-range-display {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+  margin-bottom: var(--spacing-xl);
+  padding: var(--spacing-lg);
+  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-hover) 100%);
+  border-radius: var(--radius-lg);
+  border-left: 4px solid var(--zone-color);
+}
+
+.range-icon {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  border-radius: var(--radius-md);
+  color: var(--zone-color);
+  box-shadow: var(--shadow-sm);
+}
+
+.range-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.range-values {
   display: flex;
   align-items: baseline;
-  gap: 0.5rem;
-  margin-bottom: 0.75rem;
+  gap: var(--spacing-sm);
+  flex: 1;
 }
 
-.range-value {
-  font-size: 1.5rem;
-  font-weight: 800;
+.range-number {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
   color: var(--zone-color);
+  line-height: 1;
+}
+
+.range-separator {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-tertiary);
+  margin: 0 var(--spacing-xs);
 }
 
 .range-unit {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: #6b7280;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
 }
 
-.zone-percentage {
-  font-size: 0.85rem;
-  color: #6b7280;
-  margin-bottom: 1rem;
-}
-
-.zone-description {
+/* ============================================
+   ZONE BAR
+   ============================================ */
+.zone-bar-container {
   display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-bottom: 1rem;
-  padding: 0.75rem;
-  background: rgba(102, 126, 234, 0.05);
-  border-radius: 0.75rem;
+  flex-direction: column;
+  gap: var(--spacing-sm);
 }
 
-.description-icon {
-  width: 24px;
+.zone-bar-background {
+  position: relative;
+  width: 100%;
   height: 24px;
-  color: var(--zone-color);
-  flex-shrink: 0;
+  background: var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.description-icon svg {
-  width: 100%;
+.zone-bar-fill {
   height: 100%;
-}
-
-.zone-description span {
-  font-size: 0.9rem;
-  color: #4b5563;
-  font-weight: 500;
-}
-
-.zone-progress {
-  margin-top: 1rem;
-}
-
-.progress-bar {
-  width: 100%;
-  height: 6px;
-  background: #e5e7eb;
-  border-radius: 3px;
+  border-radius: var(--radius-lg);
+  transition: all var(--transition-slow);
+  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);
+  position: relative;
   overflow: hidden;
 }
 
-.progress-fill {
-  height: 100%;
-  border-radius: 3px;
-  transition: all 0.3s ease;
+.zone-bar-fill::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, transparent 50%, rgba(0, 0, 0, 0.1) 100%);
+}
+
+.zone-bar-labels {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.zone-bar-label {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-tertiary);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--color-surface);
+  border-radius: var(--radius-sm);
 }
 
 /* ============================================
    TRAINING GUIDE
    ============================================ */
 .guides-section {
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(20px);
-  border-radius: 2rem;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  animation: slideInUp 0.6s ease-out;
+  margin-top: var(--spacing-3xl);
+  animation: slideInUp var(--transition-slower) ease-out;
 }
 
 .guide-cards {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 1.5rem;
-  padding: 2rem;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: var(--spacing-xl);
 }
 
 .guide-card {
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
-  border-radius: 1.5rem;
-  padding: 2rem;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-normal);
   border: 2px solid transparent;
   position: relative;
-  overflow: hidden;
 }
 
 .guide-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
-  border-color: rgba(102, 126, 234, 0.2);
+  border-color: rgba(102, 126, 234, 0.3);
 }
 
 .guide-header {
   display: flex;
   align-items: flex-start;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
+  gap: var(--spacing-md);
+  margin-bottom: var(--spacing-lg);
 }
 
 .guide-icon {
   width: 48px;
   height: 48px;
-  border-radius: 1rem;
+  border-radius: var(--radius-lg);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  color: white;
+  color: var(--color-text-inverse);
 }
 
 .guide-icon.recovery {
-  background: linear-gradient(135deg, #10b981, #059669);
+  background: var(--gradient-secondary);
 }
 
 .guide-icon.endurance {
-  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+  background: linear-gradient(135deg, var(--color-info), #1d4ed8);
 }
 
 .guide-icon.tempo {
-  background: linear-gradient(135deg, #f59e0b, #d97706);
+  background: linear-gradient(135deg, var(--color-warning), #d97706);
 }
 
 .guide-icon.threshold {
-  background: linear-gradient(135deg, #ef4444, #dc2626);
+  background: var(--gradient-danger);
 }
 
 .guide-icon.vo2max {
@@ -887,72 +1093,66 @@ function calculatePercentage(watts) {
 }
 
 .guide-card h4 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: #1f2937;
+  margin: 0 0 var(--spacing-xs) 0;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
 }
 
 .zone-badge {
-  padding: 0.25rem 0.75rem;
+  padding: 0.25rem var(--spacing-sm);
   background: rgba(102, 126, 234, 0.1);
-  color: #667eea;
-  border-radius: 1rem;
-  font-size: 0.8rem;
-  font-weight: 600;
+  color: var(--color-primary);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
 }
 
 .guide-card p {
-  margin: 0 0 1.5rem 0;
-  color: #4b5563;
-  line-height: 1.6;
-  font-size: 0.95rem;
+  margin: 0 0 var(--spacing-lg) 0;
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-relaxed);
+  font-size: var(--font-size-sm);
 }
 
 .guide-benefits {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: var(--spacing-sm);
 }
 
 .benefit-item {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm);
   background: rgba(16, 185, 129, 0.05);
-  border-radius: 0.5rem;
+  border-radius: var(--radius-sm);
 }
 
 .benefit-item svg {
   width: 16px;
   height: 16px;
-  color: #10b981;
+  color: var(--color-secondary);
   flex-shrink: 0;
 }
 
 .benefit-item span {
-  font-size: 0.9rem;
-  color: #374151;
-  font-weight: 500;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
 }
 
 /* ============================================
    RESPONSIVE DESIGN
    ============================================ */
 @media (max-width: 1024px) {
-  .page-header {
-    flex-direction: column;
-    gap: 1.5rem;
-  }
-
-  .zone-stats {
-    align-self: stretch;
-    justify-content: center;
+  .metric-cards-grid {
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   }
 
   .zones-grid {
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   }
 
   .guide-cards {
@@ -962,111 +1162,165 @@ function calculatePercentage(watts) {
 
 @media (max-width: 768px) {
   .zones-content {
-    padding: 1rem;
+    padding: var(--spacing-lg);
   }
 
-  .page-header {
-    flex-direction: column;
-    gap: 1rem;
-    padding: 1.5rem;
+  .section-header-content h2 {
+    font-size: var(--font-size-3xl);
   }
 
-  .header-content h2 {
-    font-size: 2rem;
+  .section-subtitle {
+    font-size: var(--font-size-base);
+  }
+
+  .metric-cards-grid {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-md);
   }
 
   .zones-grid {
     grid-template-columns: 1fr;
-    gap: 1rem;
-    padding: 1.5rem;
+    gap: var(--spacing-lg);
   }
 
   .guide-cards {
     grid-template-columns: 1fr;
-    gap: 1rem;
-    padding: 1.5rem;
+    gap: var(--spacing-lg);
   }
 
-  .section-header {
+  .info-box-info {
     flex-direction: column;
-    gap: 1rem;
-    padding: 1.5rem;
+    gap: var(--spacing-md);
   }
 
-  .zone-info-pill {
-    align-self: flex-start;
+  .zone-number-badge {
+    width: 40px;
+    height: 40px;
   }
 
-  .stat-card {
-    min-width: auto;
-    width: 100%;
+  .zone-number-badge span {
+    font-size: var(--font-size-base);
   }
 }
 
 @media (max-width: 640px) {
   .zones-content {
-    padding: 1rem;
+    padding: var(--spacing-md);
   }
 
-  .page-header {
-    padding: 1rem;
+  .section-header-content h2 {
+    font-size: var(--font-size-2xl);
   }
 
-  .header-content h2 {
-    font-size: 1.5rem;
+  .section-subtitle {
+    font-size: var(--font-size-sm);
   }
 
-  .page-description {
-    font-size: 1rem;
+  .section-header-content h3 {
+    font-size: var(--font-size-xl);
   }
 
-  .zone-stats {
-    flex-direction: column;
-    gap: 1rem;
+  .section-explanation {
+    font-size: var(--font-size-sm);
+  }
+
+  .section-icon {
+    width: 24px;
+    height: 24px;
+  }
+
+  .info-box-info {
+    padding: var(--spacing-lg);
+  }
+
+  .info-box-icon {
+    width: 40px;
+    height: 40px;
+  }
+
+  .info-box-icon svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  .info-box-title {
+    font-size: var(--font-size-base);
+  }
+
+  .info-box-text {
+    font-size: var(--font-size-sm);
+  }
+
+  .metric-card {
+    padding: var(--spacing-lg);
+  }
+
+  .metric-icon {
+    width: 48px;
+    height: 48px;
+  }
+
+  .metric-icon svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  .metric-value {
+    font-size: var(--font-size-2xl);
+  }
+
+  .metric-unit {
+    font-size: var(--font-size-base);
   }
 
   .zones-grid {
-    grid-template-columns: 1fr;
-    gap: 0.75rem;
-    padding: 1rem;
+    gap: var(--spacing-md);
   }
 
-  .zone-card {
-    padding: 1.25rem;
+  .zone-name-large {
+    font-size: var(--font-size-xl);
+  }
+
+  .zone-range-display {
+    padding: var(--spacing-md);
+  }
+
+  .range-icon {
+    width: 32px;
+    height: 32px;
+  }
+
+  .range-icon svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  .range-number {
+    font-size: var(--font-size-2xl);
+  }
+
+  .range-separator {
+    font-size: var(--font-size-xl);
+  }
+
+  .zone-bar-background {
+    height: 20px;
   }
 
   .guide-cards {
-    grid-template-columns: 1fr;
-    gap: 1rem;
-    padding: 1rem;
-  }
-
-  .guide-card {
-    padding: 1.5rem;
+    gap: var(--spacing-md);
   }
 
   .guide-header {
     flex-direction: column;
+    align-items: center;
     text-align: center;
-    gap: 1rem;
+    gap: var(--spacing-md);
   }
 
   .zone-badge {
     align-self: center;
   }
-
-  .section-header {
-    padding: 1rem;
-  }
-
-  .section-icon {
-    width: 28px;
-    height: 28px;
-  }
-
-  .section-title h3 {
-    font-size: 1.25rem;
-  }
 }
 
 /* ============================================
@@ -1094,63 +1348,70 @@ function calculatePercentage(watts) {
   }
 }
 
-/* Dark Mode Support */
+/* ============================================
+   DARK MODE SUPPORT
+   ============================================ */
 :global(.dark) .zones-page {
-  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+  background: linear-gradient(135deg, var(--color-background) 0%, #1e293b 100%);
 }
 
-:global(.dark) .zones-section,
-:global(.dark) .guides-section,
-:global(.dark) .page-header,
-:global(.dark) .empty-state {
-  background: rgba(30, 41, 59, 0.7);
-  border-color: rgba(148, 163, 184, 0.1);
+:global(.dark) .info-box-info {
+  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
+  border-color: #3b82f6;
 }
 
-:global(.dark) .section-header {
-  background: linear-gradient(135deg, rgba(51, 65, 85, 0.5) 0%, rgba(51, 65, 85, 0.3) 100%);
-  border-bottom-color: rgba(148, 163, 184, 0.1);
+:global(.dark) .info-box-icon {
+  background: rgba(59, 130, 246, 0.2);
 }
 
-:global(.dark) .section-title h3 {
-  color: #f1f5f9;
+:global(.dark) .info-box-title {
+  color: #93c5fd;
 }
 
-:global(.dark) .header-content h2 {
-  color: #f1f5f9;
+:global(.dark) .info-box-text {
+  color: #bfdbfe;
 }
 
-:global(.dark) .zone-card,
-:global(.dark) .guide-card {
-  background: linear-gradient(135deg, rgba(51, 65, 85, 0.5) 0%, rgba(51, 65, 85, 0.3) 100%);
+:global(.dark) .metric-card {
+  background: var(--color-surface);
+  border-color: var(--color-border);
+}
+
+:global(.dark) .card-modern {
+  background: var(--color-surface);
+  border-color: var(--color-border);
+}
+
+:global(.dark) .zone-range-display {
+  background: linear-gradient(135deg, var(--color-surface-hover) 0%, var(--color-surface) 100%);
+}
+
+:global(.dark) .range-icon {
+  background: var(--color-surface-hover);
+}
+
+:global(.dark) .zone-bar-background {
+  background: var(--color-surface-hover);
+}
+
+:global(.dark) .zone-bar-label {
+  background: var(--color-surface-hover);
 }
 
-:global(.dark) .zone-card:hover,
 :global(.dark) .guide-card:hover {
-  border-color: rgba(102, 126, 234, 0.3);
+  border-color: rgba(102, 126, 234, 0.5);
 }
 
-:global(.dark) .zone-header h4,
-:global(.dark) .zone-name,
-:global(.dark) .guide-card h4 {
-  color: #f1f5f9;
-}
-
-:global(.dark) .zone-description,
-:global(.dark) .zone-description span {
-  background: rgba(102, 126, 234, 0.1);
-  color: #e2e8f0;
-}
-
-:global(.dark) .guide-card p {
-  color: #cbd5e1;
+:global(.dark) .empty-state {
+  background: var(--color-surface);
+  border-color: var(--color-border);
 }
 
 :global(.dark) .empty-state h3 {
-  color: #f1f5f9;
+  color: var(--color-text-primary);
 }
 
 :global(.dark) .empty-state p {
-  color: #cbd5e1;
+  color: var(--color-text-secondary);
 }
 </style>
\ No newline at end of file
diff --git a/src/components/UserDashboard.vue b/src/components/UserDashboard.vue
index d3ab213..671a723 100644
--- a/src/components/UserDashboard.vue
+++ b/src/components/UserDashboard.vue
@@ -8,213 +8,288 @@
       <!-- Welcome Header -->
       <div class="welcome-header">
         <div class="welcome-content">
-          <h1>Welcome back, <span class="username-highlight">{{ auth.user?.username }}</span>! 👋</h1>
-          <p class="welcome-subtitle">Here's your fitness overview for today</p>
+          <h1>Welcome back, <span class="username-highlight">{{ auth.user?.username }}</span></h1>
+          <p class="welcome-subtitle">{{ currentDate }}</p>
         </div>
-        <div class="date-info">
-          <svg viewBox="0 0 24 24" fill="none">
-            <rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
-            <line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-            <line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-            <line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2"/>
+        <RouterLink to="/calendar" class="btn-modern btn-modern-primary btn-modern-large cta-add-workout">
+          <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
+            <line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            <line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
           </svg>
-          <span>{{ currentDate }}</span>
+          Add Workout
+        </RouterLink>
+      </div>
+
+      <!-- Weekly Summary Section -->
+      <div v-if="recentWorkouts.length > 0" class="card-modern weekly-summary">
+        <div class="card-modern-header">
+          <div>
+            <h2 class="card-modern-title">This Week</h2>
+            <p class="card-modern-subtitle">Your training progress</p>
+          </div>
+          <div class="week-selector">
+            <button class="period-btn" :class="{ active: activePeriod === 'week' }" @click="activePeriod = 'week'">
+              Week
+            </button>
+            <button class="period-btn" :class="{ active: activePeriod === 'month' }" @click="activePeriod = 'month'">
+              Month
+            </button>
+          </div>
+        </div>
+
+        <div class="weekly-progress">
+          <div class="progress-info">
+            <span class="progress-label">Weekly Goal Progress</span>
+            <span class="progress-percentage">{{ todayProgress }}%</span>
+          </div>
+          <div class="progress-bar-modern">
+            <div class="progress-bar-modern-fill" :style="{ width: todayProgress + '%' }"></div>
+          </div>
         </div>
       </div>
 
-      <!-- Bento Grid Layout -->
-      <div class="bento-grid">
-        <!-- Large: Activity Overview Chart -->
-        <div class="bento-item large">
-          <div class="card-header">
-            <h3>Activity Overview</h3>
-            <div class="card-actions">
-              <button class="period-btn" :class="{ active: activePeriod === 'week' }" @click="activePeriod = 'week'">
-                Week
-              </button>
-              <button class="period-btn" :class="{ active: activePeriod === 'month' }" @click="activePeriod = 'month'">
-                Month
-              </button>
-            </div>
-          </div>
-          <div class="chart-container">
-            <div class="empty-chart">
-              <svg viewBox="0 0 100 60" class="chart-placeholder">
-                <polyline points="5,50 20,30 35,45 50,20 65,35 80,15 95,25" fill="none" stroke="url(#gradient)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-                <defs>
-                  <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-                    <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
-                    <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
-                  </linearGradient>
-                </defs>
-              </svg>
-              <p>No activity data yet. Start tracking your workouts!</p>
-            </div>
-          </div>
-        </div>
+      <!-- Key Metrics Grid -->
+      <div class="section-header">
+        <h2 class="section-title">Your Stats</h2>
+      </div>
 
-        <!-- Medium: Quick Stats -->
-        <div class="bento-item medium stats-card">
-          <h3>Quick Stats</h3>
-          <div class="stats-list">
-            <div class="stat-item">
-              <div class="stat-icon rides">
-                <svg viewBox="0 0 24 24" fill="none">
-                  <circle cx="18" cy="5" r="3" stroke="currentColor" stroke-width="2"/>
-                  <path d="M6 9C7.65685 9 9 7.65685 9 6C9 4.34315 7.65685 3 6 3C4.34315 3 3 4.34315 3 6C3 7.65685 4.34315 9 6 9Z" stroke="currentColor" stroke-width="2"/>
-                  <path d="M6 9V22M18 8V22M3 19H9M15 19H21M6 22H18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                </svg>
-              </div>
-              <div class="stat-details">
-                <p class="stat-label">Total Rides</p>
-                <p class="stat-value">{{ stats.totalRides }}</p>
-              </div>
-            </div>
-
-            <div class="stat-item">
-              <div class="stat-icon distance">
-                <svg viewBox="0 0 24 24" fill="none">
-                  <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>
-                  <path d="M12 7V12L15 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                </svg>
-              </div>
-              <div class="stat-details">
-                <p class="stat-label">Total Distance</p>
-                <p class="stat-value">{{ stats.totalDistance }}</p>
-              </div>
-            </div>
-
-            <div class="stat-item">
-              <div class="stat-icon time">
-                <svg viewBox="0 0 24 24" fill="none">
-                  <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>
-                  <polyline points="12,6 12,12 16,14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                </svg>
-              </div>
-              <div class="stat-details">
-                <p class="stat-label">Total Time</p>
-                <p class="stat-value">{{ stats.totalTime }}</p>
-              </div>
-            </div>
-
-            <div class="stat-item">
-              <div class="stat-icon elevation">
-                <svg viewBox="0 0 24 24" fill="none">
-                  <path d="M2 22L4 12L8 18L12 4L16 14L20 8L22 22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-              </div>
-              <div class="stat-details">
-                <p class="stat-label">Elevation Gain</p>
-                <p class="stat-value">{{ stats.elevationGain }}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Medium: Recent Workouts -->
-        <div class="bento-item medium">
-          <div class="card-header">
-            <h3>Recent Workouts</h3>
-            <RouterLink to="/calendar" class="view-all-link">
-              View All →
-            </RouterLink>
-          </div>
-          <div class="recent-workouts">
-            <div v-if="recentWorkouts.length > 0" class="workouts-list">
-              <div v-for="workout in recentWorkouts.slice(0, 3)" :key="workout.id" class="workout-item">
-                <div class="workout-icon" :style="{ backgroundColor: getWorkoutColor(workout.type) }">
-                  {{ getWorkoutEmoji(workout.type) }}
-                </div>
-                <div class="workout-details">
-                  <p class="workout-name">{{ workout.title }}</p>
-                  <p class="workout-meta">{{ formatWorkoutDate(workout.scheduled_date) }}</p>
-                </div>
-                <div class="workout-status" :class="workout.status">
-                  {{ workout.status }}
-                </div>
-              </div>
-            </div>
-            <div v-else class="empty-message">
+      <div class="responsive-grid">
+        <div class="metric-card">
+          <div class="metric-icon-wrapper">
+            <div class="icon-badge icon-badge-rides">
               <svg viewBox="0 0 24 24" fill="none">
-                <path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2"/>
+                <circle cx="18" cy="5" r="3" stroke="currentColor" stroke-width="2"/>
+                <path d="M6 9C7.65685 9 9 7.65685 9 6C9 4.34315 7.65685 3 6 3C4.34315 3 3 4.34315 3 6C3 7.65685 4.34315 9 6 9Z" stroke="currentColor" stroke-width="2"/>
+                <path d="M6 9V22M18 8V22M3 19H9M15 19H21M6 22H18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
               </svg>
-              <p>No workouts yet. Schedule your first one!</p>
             </div>
           </div>
-        </div>
-
-        <!-- Small: Today's Goal Progress -->
-        <div class="bento-item small">
-          <h3>Today's Goal</h3>
-          <div class="progress-ring">
-            <svg viewBox="0 0 120 120" class="ring-svg">
-              <defs>
-                <linearGradient id="ringGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-                  <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
-                  <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
-                </linearGradient>
-              </defs>
-              <circle cx="60" cy="60" r="50" class="ring-background" />
-              <circle 
-                cx="60" 
-                cy="60" 
-                r="50" 
-                class="ring-progress"
-                :style="{ strokeDasharray: `${todayProgress * 3.14159} 314.159` }"
-              />
+          <div class="metric-label">Total Workouts</div>
+          <div class="metric-value">{{ stats.totalRides }}</div>
+          <div class="metric-change positive">
+            <svg viewBox="0 0 20 20" fill="currentColor" width="16" height="16">
+              <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
             </svg>
-            <div class="ring-content">
-              <span class="ring-percentage">{{ todayProgress }}%</span>
-              <span class="ring-label">Complete</span>
+            All time
+          </div>
+        </div>
+
+        <div class="metric-card">
+          <div class="metric-icon-wrapper">
+            <div class="icon-badge icon-badge-distance">
+              <svg viewBox="0 0 24 24" fill="none">
+                <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
+          </div>
+          <div class="metric-label">Distance Covered</div>
+          <div class="metric-value">{{ stats.totalDistance }}</div>
+          <div class="metric-change positive">
+            <svg viewBox="0 0 20 20" fill="currentColor" width="16" height="16">
+              <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
+            </svg>
+            Total distance
+          </div>
+        </div>
+
+        <div class="metric-card">
+          <div class="metric-icon-wrapper">
+            <div class="icon-badge icon-badge-time">
+              <svg viewBox="0 0 24 24" fill="none">
+                <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>
+                <polyline points="12,6 12,12 16,14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              </svg>
+            </div>
+          </div>
+          <div class="metric-label">Training Time</div>
+          <div class="metric-value">{{ stats.totalTime }}</div>
+          <div class="metric-change positive">
+            <svg viewBox="0 0 20 20" fill="currentColor" width="16" height="16">
+              <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
+            </svg>
+            Hours logged
+          </div>
+        </div>
+
+        <div class="metric-card">
+          <div class="metric-icon-wrapper">
+            <div class="icon-badge icon-badge-elevation">
+              <svg viewBox="0 0 24 24" fill="none">
+                <path d="M2 22L4 12L8 18L12 4L16 14L20 8L22 22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
+          </div>
+          <div class="metric-label">Elevation Climbed</div>
+          <div class="metric-value">{{ stats.elevationGain }}</div>
+          <div class="metric-change positive">
+            <svg viewBox="0 0 20 20" fill="currentColor" width="16" height="16">
+              <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
+            </svg>
+            Total gain
+          </div>
+        </div>
+      </div>
+
+      <!-- Recent Activity Section -->
+      <div class="activity-section">
+        <div class="section-header">
+          <div>
+            <h2 class="section-title">Recent Activity</h2>
+            <p class="section-description">Your latest workouts and training sessions</p>
+          </div>
+          <RouterLink to="/calendar" class="btn-modern btn-modern-secondary">
+            View Calendar
+          </RouterLink>
+        </div>
+
+        <div v-if="recentWorkouts.length > 0" class="card-modern">
+          <div class="workouts-list-modern">
+            <div v-for="workout in recentWorkouts.slice(0, 5)" :key="workout.id" class="workout-row">
+              <div class="workout-primary">
+                <div class="workout-icon-modern" :style="{ backgroundColor: getWorkoutColor(workout.type) }">
+                  <span class="workout-emoji">{{ getWorkoutEmoji(workout.type) }}</span>
+                </div>
+                <div class="workout-info">
+                  <h3 class="workout-title">{{ workout.title }}</h3>
+                  <p class="workout-date">{{ formatWorkoutDate(workout.scheduled_date) }}</p>
+                </div>
+              </div>
+              <div class="workout-actions">
+                <span class="status-pill" :class="`status-pill-${workout.status}`">
+                  {{ workout.status }}
+                </span>
+                <RouterLink to="/calendar" class="workout-detail-btn">
+                  <svg viewBox="0 0 20 20" fill="currentColor" width="20" height="20">
+                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
+                  </svg>
+                </RouterLink>
+              </div>
             </div>
           </div>
         </div>
 
-        <!-- Small: Next Workout -->
-        <div class="bento-item small">
-          <h3>Next Workout</h3>
-          <div v-if="nextWorkout" class="next-workout">
+        <!-- Enhanced Empty State -->
+        <div v-else class="empty-state-modern">
+          <div class="empty-state-icon">
+            <svg viewBox="0 0 64 64" fill="none" width="64" height="64">
+              <circle cx="32" cy="32" r="28" stroke="currentColor" stroke-width="2" opacity="0.3"/>
+              <path d="M20 32L28 40L44 24" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" opacity="0.3"/>
+            </svg>
+          </div>
+          <h3 class="empty-state-title">No workouts yet</h3>
+          <p class="empty-state-description">
+            Start your fitness journey by adding your first workout. Track your progress, set goals, and achieve more.
+          </p>
+          <RouterLink to="/calendar" class="btn-modern btn-modern-primary btn-modern-large">
+            <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
+              <line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              <line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            </svg>
+            Schedule Your First Workout
+          </RouterLink>
+        </div>
+      </div>
+
+      <!-- Upcoming & Quick Actions -->
+      <div class="bottom-grid">
+        <!-- Next Workout Card -->
+        <div class="card-modern next-workout-card">
+          <div class="card-modern-header">
+            <h3 class="card-modern-title">Coming Up Next</h3>
+          </div>
+
+          <div v-if="nextWorkout" class="next-workout-content">
+            <div class="next-workout-badge">
+              <div class="workout-icon-large" :style="{ backgroundColor: getWorkoutColor(nextWorkout.type) }">
+                {{ getWorkoutEmoji(nextWorkout.type) }}
+              </div>
+            </div>
+            <h3 class="next-workout-title">{{ nextWorkout.title }}</h3>
+            <p class="next-workout-type-label">{{ nextWorkout.type }}</p>
             <div class="next-workout-time">
+              <svg viewBox="0 0 20 20" fill="currentColor" width="16" height="16">
+                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
+              </svg>
               {{ formatNextWorkoutTime(nextWorkout) }}
             </div>
-            <p class="next-workout-name">{{ nextWorkout.title }}</p>
-            <p class="next-workout-type">{{ nextWorkout.type }}</p>
-            <RouterLink to="/calendar" class="view-btn">
-              View Details →
+            <RouterLink to="/calendar" class="btn-modern btn-modern-secondary" style="width: 100%; margin-top: 16px;">
+              View Details
             </RouterLink>
           </div>
-          <div v-else class="no-upcoming">
-            <p>No upcoming workouts</p>
-            <RouterLink to="/calendar" class="schedule-btn">
-              <svg viewBox="0 0 24 24" fill="none">
+
+          <div v-else class="next-workout-empty">
+            <svg viewBox="0 0 48 48" fill="none" width="48" height="48" style="opacity: 0.2; margin-bottom: 12px;">
+              <rect x="8" y="10" width="32" height="32" rx="4" stroke="currentColor" stroke-width="2"/>
+              <line x1="8" y1="18" x2="40" y2="18" stroke="currentColor" stroke-width="2"/>
+              <line x1="16" y1="6" x2="16" y2="14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              <line x1="32" y1="6" x2="32" y2="14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            </svg>
+            <p style="margin: 0 0 16px 0; color: var(--color-text-secondary);">No upcoming workouts scheduled</p>
+            <RouterLink to="/calendar" class="btn-modern btn-modern-primary" style="width: 100%;">
+              <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
                 <line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                 <line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
               </svg>
-              Schedule One
+              Schedule Workout
             </RouterLink>
           </div>
         </div>
 
-        <!-- Medium: Quick Actions -->
-        <div class="bento-item medium">
-          <h3>Quick Actions</h3>
-          <div class="action-grid">
-            <RouterLink to="/calendar" class="action-button">
-              <div class="action-icon">📅</div>
-              <span>Plan Workout</span>
+        <!-- Quick Actions Card -->
+        <div class="card-modern quick-actions-card">
+          <div class="card-modern-header">
+            <h3 class="card-modern-title">Quick Actions</h3>
+          </div>
+
+          <div class="quick-actions-list">
+            <RouterLink to="/calendar" class="quick-action-item">
+              <div class="quick-action-icon">
+                <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
+                  <rect x="3" y="4" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
+                  <line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2"/>
+                </svg>
+              </div>
+              <div class="quick-action-text">
+                <span class="quick-action-title">Plan Training</span>
+                <span class="quick-action-desc">Schedule and organize workouts</span>
+              </div>
+              <svg viewBox="0 0 20 20" fill="currentColor" width="20" height="20" style="color: var(--color-text-secondary);">
+                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
+              </svg>
             </RouterLink>
-            <RouterLink to="/equipment" class="action-button">
-              <div class="action-icon">🚴</div>
-              <span>Manage Gear</span>
+
+            <RouterLink to="/equipment" class="quick-action-item">
+              <div class="quick-action-icon">
+                <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
+                  <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>
+                  <path d="M12 3V12L16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                </svg>
+              </div>
+              <div class="quick-action-text">
+                <span class="quick-action-title">Equipment</span>
+                <span class="quick-action-desc">Manage bikes and gear</span>
+              </div>
+              <svg viewBox="0 0 20 20" fill="currentColor" width="20" height="20" style="color: var(--color-text-secondary);">
+                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
+              </svg>
             </RouterLink>
-            <RouterLink to="/zones" class="action-button">
-              <div class="action-icon">⚡</div>
-              <span>Training Zones</span>
+
+            <RouterLink to="/zones" class="quick-action-item">
+              <div class="quick-action-icon">
+                <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
+                  <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </div>
+              <div class="quick-action-text">
+                <span class="quick-action-title">Training Zones</span>
+                <span class="quick-action-desc">Configure power and HR zones</span>
+              </div>
+              <svg viewBox="0 0 20 20" fill="currentColor" width="20" height="20" style="color: var(--color-text-secondary);">
+                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
+              </svg>
             </RouterLink>
-            <button @click="startQuickWorkout" class="action-button">
-              <div class="action-icon">🏃</div>
-              <span>Quick Start</span>
-            </button>
           </div>
         </div>
       </div>
@@ -339,697 +414,417 @@ function formatNextWorkoutTime(workout) {
 </script>
 
 <style scoped>
+/* Dashboard Container */
 .dashboard-container {
   min-height: 100vh;
-  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  background: var(--color-background);
 }
 
-/* ============================================
-   DASHBOARD CONTENT
-   ============================================ */
 .dashboard-content {
   max-width: 1400px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: var(--spacing-2xl) var(--spacing-xl);
 }
 
+/* Welcome Header */
 .welcome-header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  margin-bottom: 2rem;
-  animation: slideInDown 0.6s ease-out;
+  align-items: flex-start;
+  margin-bottom: var(--spacing-2xl);
+  gap: var(--spacing-lg);
 }
 
 .welcome-content h1 {
-  margin: 0 0 0.5rem 0;
-  font-size: 2.5rem;
-  font-weight: 800;
-  color: #1f2937;
+  margin: 0 0 var(--spacing-xs) 0;
+  font-size: var(--font-size-4xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
 }
 
 .username-highlight {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  color: var(--color-primary);
 }
 
 .welcome-subtitle {
   margin: 0;
-  font-size: 1.1rem;
-  color: #6b7280;
-  font-weight: 500;
+  font-size: var(--font-size-base);
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-normal);
 }
 
-.date-info {
+.cta-add-workout {
+  flex-shrink: 0;
+}
+
+/* Weekly Summary */
+.weekly-summary {
+  margin-bottom: var(--spacing-2xl);
+}
+
+.week-selector {
   display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 1rem 1.5rem;
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(20px);
-  border-radius: 1rem;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  color: #6b7280;
-  font-weight: 500;
-}
-
-.date-info svg {
-  width: 20px;
-  height: 20px;
-  color: #667eea;
-}
-
-/* ============================================
-   BENTO GRID LAYOUT
-   ============================================ */
-.bento-grid {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  grid-template-rows: auto;
-  gap: 1.5rem;
-  margin-top: 2rem;
-}
-
-.bento-item {
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(20px);
-  border-radius: 1.5rem;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-  padding: 1.5rem;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  animation: slideInUp 0.6s ease-out;
-}
-
-.bento-item:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
-  border-color: rgba(102, 126, 234, 0.2);
-}
-
-.bento-item.large {
-  grid-column: span 8;
-  grid-row: span 2;
-}
-
-.bento-item.medium {
-  grid-column: span 4;
-}
-
-.bento-item.small {
-  grid-column: span 4;
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.5rem;
-}
-
-.card-header h3 {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: #1f2937;
-}
-
-.card-actions {
-  display: flex;
-  gap: 0.5rem;
-  background: #f3f4f6;
-  padding: 0.25rem;
-  border-radius: 0.5rem;
+  gap: var(--spacing-xs);
+  background: var(--color-surface-secondary);
+  padding: 4px;
+  border-radius: 8px;
 }
 
 .period-btn {
-  padding: 0.5rem 1rem;
-  background: none;
+  padding: 8px 16px;
+  background: transparent;
   border: none;
-  border-radius: 0.375rem;
-  color: #6b7280;
-  font-weight: 500;
+  border-radius: 6px;
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-sm);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all var(--transition-base);
 }
 
 .period-btn.active {
-  background: white;
-  color: #667eea;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  background: var(--color-surface);
+  color: var(--color-primary);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
-.view-all-link {
-  color: #667eea;
-  text-decoration: none;
-  font-weight: 600;
-  font-size: 0.9rem;
-  transition: all 0.2s ease;
+.weekly-progress {
+  margin-top: var(--spacing-lg);
 }
 
-.view-all-link:hover {
-  color: #764ba2;
-  transform: translateX(2px);
+.progress-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--spacing-sm);
 }
 
-/* Chart Container */
-.chart-container {
-  height: 200px;
+.progress-label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.progress-percentage {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-primary);
+}
+
+/* Section Styling */
+.section-header {
+  margin-bottom: var(--spacing-lg);
+}
+
+.activity-section {
+  margin-top: var(--spacing-2xl);
+}
+
+/* Metric Cards */
+.metric-icon-wrapper {
+  margin-bottom: var(--spacing-md);
+}
+
+.icon-badge {
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.empty-chart {
-  text-align: center;
-  color: #6b7280;
-}
-
-.chart-placeholder {
-  width: 100%;
-  height: 100%;
-  opacity: 0.7;
-}
-
-.empty-chart p {
-  margin: 1rem 0 0 0;
-  font-size: 0.95rem;
-}
-
-/* Stats Card */
-.stats-card {
-  grid-column: span 4;
-}
-
-.stats-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.stat-item {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem;
-  background: rgba(248, 250, 252, 0.5);
-  border-radius: 1rem;
-  transition: all 0.2s ease;
-}
-
-.stat-item:hover {
-  background: rgba(248, 250, 252, 1);
-}
-
-.stat-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+.icon-badge svg {
+  width: 28px;
+  height: 28px;
   color: white;
 }
 
-.stat-icon.rides {
+.icon-badge-rides {
   background: linear-gradient(135deg, #667eea, #764ba2);
 }
 
-.stat-icon.distance {
-  background: linear-gradient(135deg, #10b981, #059669);
+.icon-badge-distance {
+  background: linear-gradient(135deg, #00c853, #00a844);
 }
 
-.stat-icon.time {
+.icon-badge-time {
   background: linear-gradient(135deg, #f59e0b, #d97706);
 }
 
-.stat-icon.elevation {
-  background: linear-gradient(135deg, #ef4444, #dc2626);
+.icon-badge-elevation {
+  background: linear-gradient(135deg, #e63946, #d62828);
 }
 
-.stat-icon svg {
-  width: 24px;
-  height: 24px;
+/* Workouts List */
+.workouts-list-modern {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
 }
 
-.stat-details {
+.workout-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-lg);
+  border-bottom: 1px solid var(--color-border);
+  transition: all var(--transition-base);
+}
+
+.workout-row:last-child {
+  border-bottom: none;
+}
+
+.workout-row:hover {
+  background: var(--color-surface-hover);
+}
+
+.workout-primary {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
   flex: 1;
 }
 
-.stat-label {
-  margin: 0;
-  font-size: 0.85rem;
-  color: #6b7280;
-  text-transform: uppercase;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-}
-
-.stat-value {
-  margin: 0.25rem 0 0 0;
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #1f2937;
-}
-
-/* Recent Workouts */
-.recent-workouts {
-  min-height: 200px;
-  display: flex;
-  flex-direction: column;
-}
-
-.workouts-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.workout-item {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem;
-  background: rgba(248, 250, 252, 0.5);
-  border-radius: 1rem;
-  transition: all 0.2s ease;
-}
-
-.workout-item:hover {
-  background: rgba(248, 250, 252, 1);
-  transform: translateX(4px);
-}
-
-.workout-icon {
+.workout-icon-modern {
   width: 48px;
   height: 48px;
-  border-radius: 1rem;
+  border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 1.5rem;
   flex-shrink: 0;
 }
 
-.workout-details {
+.workout-emoji {
+  font-size: 24px;
+}
+
+.workout-info {
   flex: 1;
 }
 
-.workout-name {
+.workout-title {
+  margin: 0 0 4px 0;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.workout-date {
   margin: 0;
-  font-weight: 600;
-  color: #1f2937;
-  font-size: 0.95rem;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
 }
 
-.workout-meta {
-  margin: 0.25rem 0 0 0;
-  font-size: 0.85rem;
-  color: #6b7280;
-}
-
-.workout-status {
-  padding: 0.375rem 0.75rem;
-  border-radius: 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: capitalize;
-}
-
-.workout-status.planned {
-  background: #fef3c7;
-  color: #92400e;
-}
-
-.workout-status.completed {
-  background: #dcfce7;
-  color: #166534;
-}
-
-.workout-status.skipped {
-  background: #fee2e2;
-  color: #991b1b;
-}
-
-.empty-message {
+.workout-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+
+.workout-detail-btn {
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100%;
-  gap: 1rem;
-  color: #6b7280;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  color: var(--color-text-secondary);
+  transition: all var(--transition-base);
 }
 
-.empty-message svg {
-  width: 48px;
-  height: 48px;
-  opacity: 0.5;
+.workout-detail-btn:hover {
+  background: var(--color-surface-secondary);
+  color: var(--color-primary);
 }
 
-/* Progress Ring */
-.progress-ring {
-  position: relative;
+/* Bottom Grid */
+.bottom-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--spacing-lg);
+  margin-top: var(--spacing-2xl);
+}
+
+/* Next Workout Card */
+.next-workout-content {
+  text-align: center;
+  padding: var(--spacing-lg) 0;
+}
+
+.next-workout-badge {
   display: flex;
   justify-content: center;
-  align-items: center;
-  height: 160px;
+  margin-bottom: var(--spacing-lg);
 }
 
-.ring-svg {
-  transform: rotate(-90deg);
-  width: 140px;
-  height: 140px;
-}
-
-.ring-background {
-  fill: none;
-  stroke: #e5e7eb;
-  stroke-width: 8;
-}
-
-.ring-progress {
-  fill: none;
-  stroke: url(#ringGradient);
-  stroke-width: 8;
-  stroke-linecap: round;
-  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.ring-content {
-  position: absolute;
+.workout-icon-large {
+  width: 80px;
+  height: 80px;
+  border-radius: 16px;
   display: flex;
-  flex-direction: column;
   align-items: center;
+  justify-content: center;
+  font-size: 40px;
 }
 
-.ring-percentage {
-  font-size: 1.75rem;
-  font-weight: 800;
-  color: #667eea;
+.next-workout-title {
+  margin: 0 0 var(--spacing-xs) 0;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
 }
 
-.ring-label {
-  font-size: 0.8rem;
-  color: #6b7280;
-  margin-top: 0.25rem;
-}
-
-/* Next Workout */
-.next-workout {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+.next-workout-type-label {
+  margin: 0 0 var(--spacing-md) 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-primary);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
 .next-workout-time {
-  font-size: 0.9rem;
-  color: #6b7280;
-  font-weight: 600;
-}
-
-.next-workout-name {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: #1f2937;
-}
-
-.next-workout-type {
-  margin: 0;
-  font-size: 0.9rem;
-  color: #667eea;
-  font-weight: 600;
-}
-
-.view-btn {
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  color: #667eea;
-  text-decoration: none;
-  font-weight: 600;
-  font-size: 0.9rem;
-  transition: all 0.2s ease;
-  margin-top: 0.5rem;
+  justify-content: center;
+  gap: var(--spacing-xs);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-sm);
 }
 
-.view-btn:hover {
-  color: #764ba2;
-  transform: translateX(2px);
-}
-
-.no-upcoming {
+.next-workout-empty {
   text-align: center;
-  color: #6b7280;
-  padding: 1.5rem 0;
-}
-
-.no-upcoming p {
-  margin: 0 0 1rem 0;
-}
-
-.schedule-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  text-decoration: none;
-  border-radius: 0.75rem;
-  font-weight: 600;
-  transition: all 0.2s ease;
-}
-
-.schedule-btn svg {
-  width: 16px;
-  height: 16px;
-}
-
-.schedule-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+  padding: var(--spacing-xl) var(--spacing-lg);
 }
 
 /* Quick Actions */
-.action-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-.action-button {
+.quick-actions-list {
   display: flex;
   flex-direction: column;
+  gap: 0;
+}
+
+.quick-action-item {
+  display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 1.5rem 1rem;
-  background: rgba(248, 250, 252, 0.5);
-  border-radius: 1rem;
+  gap: var(--spacing-md);
+  padding: var(--spacing-md);
+  border-radius: 8px;
   text-decoration: none;
-  color: #374151;
-  font-weight: 600;
-  transition: all 0.2s ease;
-  border: 2px solid transparent;
-  cursor: pointer;
+  transition: all var(--transition-base);
 }
 
-.action-button:hover {
-  background: rgba(248, 250, 252, 1);
-  border-color: #667eea;
-  transform: translateY(-2px);
+.quick-action-item:hover {
+  background: var(--color-surface-hover);
 }
 
-.action-icon {
-  font-size: 2rem;
+.quick-action-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-surface-secondary);
+  color: var(--color-primary);
+  flex-shrink: 0;
+  transition: all var(--transition-base);
 }
 
-/* ============================================
-   RESPONSIVE DESIGN
-   ============================================ */
+.quick-action-item:hover .quick-action-icon {
+  background: var(--color-primary);
+  color: white;
+}
+
+.quick-action-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.quick-action-title {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.quick-action-desc {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+/* Responsive Design */
 @media (max-width: 1024px) {
-  .bento-item.large {
-    grid-column: span 12;
+  .responsive-grid {
+    grid-template-columns: repeat(2, 1fr);
   }
 
-  .bento-item.medium {
-    grid-column: span 6;
-  }
-
-  .bento-item.small {
-    grid-column: span 6;
-  }
-
-  .welcome-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1rem;
-  }
-
-  .welcome-content h1 {
-    font-size: 2rem;
+  .bottom-grid {
+    grid-template-columns: 1fr;
   }
 }
 
 @media (max-width: 768px) {
   .dashboard-content {
-    padding: 1rem;
-  }
-
-  .bento-item {
-    grid-column: span 12 !important;
-  }
-
-  .action-grid {
-    grid-template-columns: repeat(2, 1fr);
+    padding: var(--spacing-xl) var(--spacing-md);
   }
 
   .welcome-header {
     flex-direction: column;
-    gap: 1rem;
+    align-items: stretch;
   }
 
-  .header-content h1 {
-    font-size: 1.75rem;
+  .cta-add-workout {
+    width: 100%;
   }
 
-  .date-info {
-    align-self: stretch;
-    justify-content: center;
+  .responsive-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .bottom-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .section-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-md);
+  }
+
+  .workout-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-md);
+  }
+
+  .workout-actions {
+    width: 100%;
+    justify-content: space-between;
   }
 }
 
 @media (max-width: 640px) {
   .welcome-content h1 {
-    font-size: 1.5rem;
+    font-size: var(--font-size-3xl);
   }
 
-  .welcome-subtitle {
-    font-size: 1rem;
+  .metric-value {
+    font-size: 2rem;
   }
 
-  .bento-item {
-    padding: 1.25rem;
-    border-radius: 1rem;
-  }
-
-  .stats-list {
-    gap: 0.75rem;
-  }
-
-  .stat-item {
-    padding: 0.75rem;
-  }
-
-  .stat-icon {
+  .workout-icon-modern {
     width: 40px;
     height: 40px;
   }
 
-  .stat-value {
-    font-size: 1.25rem;
+  .workout-emoji {
+    font-size: 20px;
   }
-
-  .action-grid {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 0.75rem;
-  }
-
-  .action-button {
-    padding: 1rem 0.75rem;
-    font-size: 0.85rem;
-  }
-
-  .action-icon {
-    font-size: 1.5rem;
-  }
-
-  .chart-container {
-    height: 150px;
-  }
-}
-
-/* ============================================
-   ANIMATIONS
-   ============================================ */
-@keyframes slideInDown {
-  from {
-    transform: translateY(-20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes slideInUp {
-  from {
-    transform: translateY(20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-/* Dark Mode Support */
-:global(.dark) .dashboard-container {
-  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
-}
-
-:global(.dark) .bento-item {
-  background: rgba(30, 41, 59, 0.7);
-  border-color: rgba(148, 163, 184, 0.1);
-}
-
-:global(.dark) .card-header h3 {
-  color: #f1f5f9;
-}
-
-:global(.dark) .welcome-content h1 {
-  color: #f1f5f9;
-}
-
-:global(.dark) .stat-label {
-  color: #94a3b8;
-}
-
-:global(.dark) .stat-value {
-  color: #f1f5f9;
-}
-
-:global(.dark) .stat-item {
-  background: rgba(51, 65, 85, 0.5);
-}
-
-:global(.dark) .workout-item {
-  background: rgba(51, 65, 85, 0.5);
-}
-
-:global(.dark) .action-button {
-  background: rgba(51, 65, 85, 0.5);
-  color: #f1f5f9;
-}
-
-:global(.dark) .action-button:hover {
-  background: rgba(51, 65, 85, 0.8);
-}
-
-:global(.dark) .period-btn {
-  color: #94a3b8;
-}
-
-:global(.dark) .period-btn.active {
-  background: rgba(51, 65, 85, 0.5);
-  color: #667eea;
-}
-
-:global(.dark) .card-actions {
-  background: rgba(51, 65, 85, 0.5);
 }
 </style>
\ No newline at end of file
diff --git a/src/components/UserEquipment.vue b/src/components/UserEquipment.vue
index f91721b..88a43f4 100644
--- a/src/components/UserEquipment.vue
+++ b/src/components/UserEquipment.vue
@@ -4,13 +4,13 @@
     <ModernNavbar />
 
     <div class="equipment-content">
-      <!-- Page Header -->
-      <div class="page-header">
-        <div class="header-content">
-          <h2>Equipment Management</h2>
-          <p class="page-description">Track and manage your bikes, shoes, and gear</p>
+      <!-- Section Header with Description -->
+      <div class="section-header">
+        <div>
+          <h2 class="section-title">Equipment Management</h2>
+          <p class="section-description">Track your bikes, shoes, and gear to monitor usage, maintenance, and performance</p>
         </div>
-        <button @click="showAddForm = true" class="btn-primary">
+        <button @click="showAddForm = true" class="btn-modern btn-modern-primary">
           <svg viewBox="0 0 24 24" fill="none">
             <line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
             <line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
@@ -19,229 +19,150 @@
         </button>
       </div>
 
-      <!-- Add Equipment Modal -->
-      <div v-if="showAddForm" class="modal-overlay" @click.self="closeModal">
-        <div class="modern-modal">
-          <div class="modal-header">
-            <h3>Add New Equipment</h3>
-            <button @click="closeModal" class="close-btn">
+      <!-- Equipment Stats Overview -->
+      <div v-if="equipment.length > 0" class="stats-grid">
+        <div class="metric-card">
+          <div class="metric-icon-wrapper">
+            <div class="icon-badge icon-badge-primary">
               <svg viewBox="0 0 24 24" fill="none">
-                <line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                <line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                <circle cx="18" cy="5" r="3" stroke="currentColor" stroke-width="2"/>
+                <path d="M6 9C7.65685 9 9 7.65685 9 6C9 4.34315 7.65685 3 6 3C4.34315 3 3 4.34315 3 6C3 7.65685 4.34315 9 6 9Z" stroke="currentColor" stroke-width="2"/>
+                <path d="M6 9V22M18 8V22M3 19H9M15 19H21M6 22H18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
               </svg>
-            </button>
+            </div>
           </div>
+          <div class="metric-label">Total Equipment</div>
+          <div class="metric-value">{{ equipment.length }}</div>
+          <div class="metric-change neutral">Active items</div>
+        </div>
 
-          <form @submit.prevent="handleAddEquipment" class="equipment-form">
-            <div class="form-section">
-              <label>Equipment Name *</label>
-              <input
-                v-model="newEquipment.name"
-                type="text"
-                placeholder="e.g., Trek FX 3"
-                required
-              />
+        <div class="metric-card">
+          <div class="metric-icon-wrapper">
+            <div class="icon-badge icon-badge-bikes">
+              <svg viewBox="0 0 24 24" fill="none">
+                <circle cx="5.5" cy="17.5" r="3.5" stroke="currentColor" stroke-width="2"/>
+                <circle cx="18.5" cy="17.5" r="3.5" stroke="currentColor" stroke-width="2"/>
+                <polyline points="15 6 9 12 12 12 11 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M5.5 17.5L8 12L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M18.5 17.5L16 12L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
             </div>
-
-            <div class="form-row">
-              <div class="form-section">
-                <label>Type *</label>
-                <select v-model="newEquipment.type" required>
-                  <option value="">Select equipment type</option>
-                  <option value="bike">Bike</option>
-                  <option value="shoes">Shoes</option>
-                  <option value="helmet">Helmet</option>
-                  <option value="wetsuit">Wetsuit</option>
-                  <option value="other">Other</option>
-                </select>
-              </div>
-              <div class="form-section">
-                <label>Condition</label>
-                <select v-model="newEquipment.condition">
-                  <option value="">Select condition</option>
-                  <option value="new">New</option>
-                  <option value="excellent">Excellent</option>
-                  <option value="good">Good</option>
-                  <option value="fair">Fair</option>
-                  <option value="worn">Worn</option>
-                </select>
-              </div>
-            </div>
-
-            <div class="form-row">
-              <div class="form-section">
-                <label>Brand</label>
-                <input v-model="newEquipment.brand" type="text" placeholder="e.g., Trek" />
-              </div>
-              <div class="form-section">
-                <label>Model</label>
-                <input v-model="newEquipment.model" type="text" placeholder="e.g., FX 3" />
-              </div>
-            </div>
-
-            <div class="form-row">
-              <div class="form-section">
-                <label>Weight (grams)</label>
-                <input v-model.number="newEquipment.weight" type="number" step="0.1" placeholder="0" />
-              </div>
-              <div class="form-section">
-                <label>Purchase Date</label>
-                <input v-model="newEquipment.purchase_date" type="date" />
-              </div>
-            </div>
-
-            <div class="form-section">
-              <label>Notes</label>
-              <textarea
-                v-model="newEquipment.notes"
-                placeholder="Additional details about this equipment..."
-                rows="3"
-              ></textarea>
-            </div>
-
-            <div class="form-actions">
-              <button type="button" @click="closeModal" class="btn-secondary">
-                Cancel
-              </button>
-              <button type="submit" class="btn-primary" :disabled="loading">
-                <span v-if="loading">Adding...</span>
-                <span v-else>Add Equipment</span>
-              </button>
-            </div>
-          </form>
-
-          <div v-if="error" class="error-message">
-            <svg viewBox="0 0 24 24" fill="none">
-              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-              <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
-              <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
-            </svg>
-            {{ error }}
           </div>
+          <div class="metric-label">Bikes</div>
+          <div class="metric-value">{{ equipmentByType.bike || 0 }}</div>
+          <div class="metric-change neutral">In garage</div>
+        </div>
+
+        <div class="metric-card">
+          <div class="metric-icon-wrapper">
+            <div class="icon-badge icon-badge-shoes">
+              <svg viewBox="0 0 24 24" fill="none">
+                <path d="M2 16C2 16 4 17 8 17C12 17 13 15 15 15C17 15 18 16 22 16V6C22 6 20 5 16 5C12 5 11 7 9 7C7 7 6 6 2 6V16Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
+          </div>
+          <div class="metric-label">Shoes</div>
+          <div class="metric-value">{{ equipmentByType.shoes || 0 }}</div>
+          <div class="metric-change neutral">Pairs</div>
+        </div>
+
+        <div class="metric-card">
+          <div class="metric-icon-wrapper">
+            <div class="icon-badge icon-badge-other">
+              <svg viewBox="0 0 24 24" fill="none">
+                <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
+          </div>
+          <div class="metric-label">Other Gear</div>
+          <div class="metric-value">{{ (equipmentByType.helmet || 0) + (equipmentByType.wetsuit || 0) + (equipmentByType.other || 0) }}</div>
+          <div class="metric-change neutral">Items</div>
         </div>
       </div>
 
-      <!-- Equipment Grid -->
-      <div v-if="equipment.length > 0" class="equipment-grid">
-        <div
-          v-for="item in equipment"
-          :key="item.id"
-          class="equipment-card"
-          :class="{ editing: editingId === item.id }"
-        >
-          <div v-if="editingId !== item.id" class="card-display">
-            <div class="equipment-header">
-              <div>
-                <h4>{{ item.name }}</h4>
-                <p class="equipment-meta">{{ item.brand }} {{ item.model }}</p>
-              </div>
-              <span class="equipment-badge" :data-type="item.type">
-                {{ formatEquipmentType(item.type) }}
-              </span>
-            </div>
-
-            <div class="equipment-details">
-              <div v-if="item.weight" class="detail-row">
-                <svg viewBox="0 0 24 24" fill="none">
-                  <circle cx="12" cy="5" r="3" stroke="currentColor" stroke-width="2"/>
-                  <path d="M12 8C12 8 7 12 7 18C7 20.2091 9.20101 22 12 22C14.7989 22 17 20.2091 17 18C17 12 12 8 12 8Z" stroke="currentColor" stroke-width="2"/>
-                </svg>
-                <span>{{ item.weight }}g</span>
-              </div>
-              <div v-if="item.condition" class="detail-row">
-                <svg viewBox="0 0 24 24" fill="none">
-                  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-                  <polyline points="16 12 12 8 8 12" stroke="currentColor" stroke-width="2" fill="none"/>
-                </svg>
-                <span class="condition-badge" :class="item.condition">{{ item.condition }}</span>
-              </div>
-              <div v-if="item.purchase_date" class="detail-row">
-                <svg viewBox="0 0 24 24" fill="none">
-                  <rect x="3" y="4" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
-                  <line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2"/>
-                  <line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2"/>
-                  <line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2"/>
-                </svg>
-                <span>{{ formatDate(item.purchase_date) }}</span>
-              </div>
-              <div v-if="item.notes" class="detail-row notes">
-                <svg viewBox="0 0 24 24" fill="none">
-                  <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V15H13V17ZM13 13H11V7H13V13Z" fill="currentColor"/>
-                </svg>
-                <span>{{ item.notes }}</span>
-              </div>
-            </div>
-
-            <div class="equipment-actions">
-              <button @click="startEdit(item)" class="btn-edit">
-                <svg viewBox="0 0 24 24" fill="none">
-                  <path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                  <path d="M18.5 2.5C18.8978 2.10217 19.4374 1.88086 20 1.88086C20.5626 1.88086 21.1022 2.10217 21.5 2.5C21.8978 2.89783 22.1191 3.4374 22.1191 4C22.1191 4.5626 21.8978 5.10217 21.5 5.5L12 15H9V12L18.5 2.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-                Edit
-              </button>
-              <button @click="handleDeleteEquipment(item.id)" class="btn-danger">
-                <svg viewBox="0 0 24 24" fill="none">
-                  <polyline points="3 6 5 6 21 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                  <path d="M19 6V20C19 21.1046 18.1046 22 17 22H7C5.89543 22 5 21.1046 5 20V6M8 6V4C8 2.89543 8.89543 2 10 2H14C15.1046 2 16 2.89543 16 4V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                  <line x1="10" y1="11" x2="10" y2="17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                  <line x1="14" y1="11" x2="14" y2="17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-                Delete
-              </button>
-            </div>
+      <!-- Equipment Table -->
+      <div v-if="equipment.length > 0" class="card-modern">
+        <div class="card-modern-header">
+          <div>
+            <h3 class="card-modern-title">Your Equipment</h3>
+            <p class="card-modern-subtitle">Manage and track all your training gear</p>
           </div>
+        </div>
 
-          <!-- Edit Form -->
-          <form v-else @submit.prevent="handleUpdateEquipment(item.id)" class="card-edit">
-            <div class="form-section">
-              <label>Equipment Name</label>
-              <input v-model="editForm.name" type="text" />
-            </div>
-
-            <div class="form-row">
-              <div class="form-section">
-                <label>Brand</label>
-                <input v-model="editForm.brand" type="text" />
-              </div>
-              <div class="form-section">
-                <label>Model</label>
-                <input v-model="editForm.model" type="text" />
-              </div>
-            </div>
-
-            <div class="form-row">
-              <div class="form-section">
-                <label>Weight (grams)</label>
-                <input v-model.number="editForm.weight" type="number" step="0.1" />
-              </div>
-              <div class="form-section">
-                <label>Condition</label>
-                <select v-model="editForm.condition">
-                  <option value="">Select condition</option>
-                  <option value="new">New</option>
-                  <option value="excellent">Excellent</option>
-                  <option value="good">Good</option>
-                  <option value="fair">Fair</option>
-                  <option value="worn">Worn</option>
-                </select>
-              </div>
-            </div>
-
-            <div class="form-section">
-              <label>Notes</label>
-              <textarea v-model="editForm.notes" rows="2"></textarea>
-            </div>
-
-            <div class="form-actions">
-              <button type="button" @click="editingId = null" class="btn-secondary">
-                Cancel
-              </button>
-              <button type="submit" class="btn-primary">
-                Save Changes
-              </button>
-            </div>
-          </form>
+        <div class="table-modern-wrapper">
+          <table class="table-modern">
+            <thead>
+              <tr>
+                <th>Equipment</th>
+                <th>Type</th>
+                <th>Condition</th>
+                <th>Details</th>
+                <th>Purchase Date</th>
+                <th class="text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="item in equipment" :key="item.id" class="table-row-hover">
+                <td>
+                  <div class="equipment-cell">
+                    <div class="equipment-icon" :data-type="item.type">
+                      <component :is="getEquipmentIcon(item.type)" />
+                    </div>
+                    <div class="equipment-info">
+                      <div class="equipment-name">{{ item.name }}</div>
+                      <div v-if="item.brand || item.model" class="equipment-meta">
+                        {{ [item.brand, item.model].filter(Boolean).join(' ') }}
+                      </div>
+                    </div>
+                  </div>
+                </td>
+                <td>
+                  <span class="type-badge" :data-type="item.type">
+                    {{ formatEquipmentType(item.type) }}
+                  </span>
+                </td>
+                <td>
+                  <span v-if="item.condition" class="status-pill" :class="`status-pill-${getConditionStatus(item.condition)}`">
+                    {{ item.condition }}
+                  </span>
+                  <span v-else class="text-muted">-</span>
+                </td>
+                <td>
+                  <div class="details-cell">
+                    <div v-if="item.weight" class="detail-item">
+                      <svg viewBox="0 0 16 16" fill="none">
+                        <circle cx="8" cy="4" r="2" stroke="currentColor" stroke-width="1.5"/>
+                        <path d="M8 6C8 6 5 8.5 5 12C5 13.6569 6.34315 15 8 15C9.65685 15 11 13.6569 11 12C11 8.5 8 6 8 6Z" stroke="currentColor" stroke-width="1.5"/>
+                      </svg>
+                      {{ item.weight }}g
+                    </div>
+                  </div>
+                </td>
+                <td>
+                  <span v-if="item.purchase_date" class="date-text">{{ formatDate(item.purchase_date) }}</span>
+                  <span v-else class="text-muted">-</span>
+                </td>
+                <td class="text-right">
+                  <div class="action-buttons">
+                    <button @click="startEdit(item)" class="btn-icon btn-icon-primary" title="Edit">
+                      <svg viewBox="0 0 24 24" fill="none">
+                        <path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        <path d="M18.5 2.5C18.8978 2.10217 19.4374 1.88086 20 1.88086C20.5626 1.88086 21.1022 2.10217 21.5 2.5C21.8978 2.89783 22.1191 3.4374 22.1191 4C22.1191 4.5626 21.8978 5.10217 21.5 5.5L12 15H9V12L18.5 2.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                      </svg>
+                    </button>
+                    <button @click="confirmDelete(item)" class="btn-icon btn-icon-danger" title="Delete">
+                      <svg viewBox="0 0 24 24" fill="none">
+                        <polyline points="3 6 5 6 21 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        <path d="M19 6V20C19 21.1046 18.1046 22 17 22H7C5.89543 22 5 21.1046 5 20V6M8 6V4C8 2.89543 8.89543 2 10 2H14C15.1046 2 16 2.89543 16 4V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                      </svg>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </div>
 
@@ -249,12 +170,37 @@
       <div v-else class="empty-state">
         <div class="empty-icon">
           <svg viewBox="0 0 24 24" fill="none">
-            <path d="M13 2L3 14L12 14L11 22L21 10L12 10L13 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
+            <circle cx="18" cy="5" r="3" stroke="currentColor" stroke-width="2"/>
+            <path d="M6 9C7.65685 9 9 7.65685 9 6C9 4.34315 7.65685 3 6 3C4.34315 3 3 4.34315 3 6C3 7.65685 4.34315 9 6 9Z" stroke="currentColor" stroke-width="2"/>
+            <path d="M6 9V22M18 8V22M3 19H9M15 19H21M6 22H18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
           </svg>
         </div>
         <h3>No Equipment Yet</h3>
-        <p>Start tracking your bikes, shoes, and gear to optimize your training</p>
-        <button @click="showAddForm = true" class="btn-primary">
+        <p>Start tracking your bikes, shoes, and gear to monitor usage and optimize performance</p>
+        <div class="empty-state-tips">
+          <div class="tip-item">
+            <svg viewBox="0 0 16 16" fill="none">
+              <circle cx="8" cy="8" r="7" stroke="currentColor" fill="none"/>
+              <path d="M6 8L7.5 9.5L10 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            <span>Track maintenance schedules</span>
+          </div>
+          <div class="tip-item">
+            <svg viewBox="0 0 16 16" fill="none">
+              <circle cx="8" cy="8" r="7" stroke="currentColor" fill="none"/>
+              <path d="M6 8L7.5 9.5L10 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            <span>Monitor equipment usage</span>
+          </div>
+          <div class="tip-item">
+            <svg viewBox="0 0 16 16" fill="none">
+              <circle cx="8" cy="8" r="7" stroke="currentColor" fill="none"/>
+              <path d="M6 8L7.5 9.5L10 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            <span>Plan gear replacements</span>
+          </div>
+        </div>
+        <button @click="showAddForm = true" class="btn-modern btn-modern-primary btn-modern-large">
           <svg viewBox="0 0 24 24" fill="none">
             <line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
             <line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
@@ -263,8 +209,170 @@
         </button>
       </div>
 
+      <!-- Add/Edit Equipment Modal -->
+      <div v-if="showAddForm || editingId" class="modal-overlay" @click.self="closeModal">
+        <div class="modal-modern">
+          <div class="modal-header">
+            <h3>{{ editingId ? 'Edit Equipment' : 'Add New Equipment' }}</h3>
+            <button @click="closeModal" class="btn-close">
+              <svg viewBox="0 0 24 24" fill="none">
+                <line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                <line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              </svg>
+            </button>
+          </div>
+
+          <form @submit.prevent="editingId ? handleUpdateEquipment() : handleAddEquipment()" class="form-modern">
+            <div class="form-grid">
+              <div class="form-group form-group-full">
+                <label class="form-label required">Equipment Name</label>
+                <input
+                  v-model="formData.name"
+                  type="text"
+                  class="form-input"
+                  placeholder="e.g., Trek Domane SL 6, Nike Vaporfly Next%"
+                  required
+                />
+                <p class="form-help">Give your equipment a descriptive name</p>
+              </div>
+
+              <div class="form-group">
+                <label class="form-label required">Type</label>
+                <select v-model="formData.type" class="form-select" required>
+                  <option value="">Select equipment type</option>
+                  <option value="bike">Bike</option>
+                  <option value="shoes">Shoes</option>
+                  <option value="helmet">Helmet</option>
+                  <option value="wetsuit">Wetsuit</option>
+                  <option value="other">Other</option>
+                </select>
+              </div>
+
+              <div class="form-group">
+                <label class="form-label">Condition</label>
+                <select v-model="formData.condition" class="form-select">
+                  <option value="">Select condition</option>
+                  <option value="new">New</option>
+                  <option value="excellent">Excellent</option>
+                  <option value="good">Good</option>
+                  <option value="fair">Fair</option>
+                  <option value="worn">Worn</option>
+                </select>
+              </div>
+
+              <div class="form-group">
+                <label class="form-label">Brand</label>
+                <input
+                  v-model="formData.brand"
+                  type="text"
+                  class="form-input"
+                  placeholder="e.g., Trek, Nike, Specialized"
+                />
+              </div>
+
+              <div class="form-group">
+                <label class="form-label">Model</label>
+                <input
+                  v-model="formData.model"
+                  type="text"
+                  class="form-input"
+                  placeholder="e.g., Domane SL 6, Vaporfly"
+                />
+              </div>
+
+              <div class="form-group">
+                <label class="form-label">Weight (grams)</label>
+                <input
+                  v-model.number="formData.weight"
+                  type="number"
+                  step="0.1"
+                  class="form-input"
+                  placeholder="e.g., 8000 for bike, 200 for shoes"
+                />
+                <p class="form-help">Total weight in grams</p>
+              </div>
+
+              <div class="form-group">
+                <label class="form-label">Purchase Date</label>
+                <input
+                  v-model="formData.purchase_date"
+                  type="date"
+                  class="form-input"
+                />
+              </div>
+
+              <div class="form-group form-group-full">
+                <label class="form-label">Notes</label>
+                <textarea
+                  v-model="formData.notes"
+                  class="form-textarea"
+                  placeholder="Add any additional details, maintenance notes, or specifications..."
+                  rows="3"
+                ></textarea>
+              </div>
+            </div>
+
+            <div v-if="error" class="alert alert-error">
+              <svg viewBox="0 0 24 24" fill="none">
+                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
+                <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
+              </svg>
+              {{ error }}
+            </div>
+
+            <div class="form-actions">
+              <button type="button" @click="closeModal" class="btn-modern btn-modern-secondary">
+                Cancel
+              </button>
+              <button type="submit" class="btn-modern btn-modern-primary" :disabled="loading">
+                <span v-if="loading">{{ editingId ? 'Updating...' : 'Adding...' }}</span>
+                <span v-else>{{ editingId ? 'Update Equipment' : 'Add Equipment' }}</span>
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <!-- Delete Confirmation Modal -->
+      <div v-if="deleteConfirm" class="modal-overlay" @click.self="deleteConfirm = null">
+        <div class="modal-modern modal-confirm">
+          <div class="modal-header">
+            <h3>Delete Equipment</h3>
+            <button @click="deleteConfirm = null" class="btn-close">
+              <svg viewBox="0 0 24 24" fill="none">
+                <line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                <line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              </svg>
+            </button>
+          </div>
+
+          <div class="modal-body">
+            <div class="confirm-icon">
+              <svg viewBox="0 0 24 24" fill="none">
+                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                <line x1="12" y1="8" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                <line x1="12" y1="16" x2="12.01" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              </svg>
+            </div>
+            <p class="confirm-text">Are you sure you want to delete <strong>{{ deleteConfirm.name }}</strong>?</p>
+            <p class="confirm-subtext">This action cannot be undone.</p>
+          </div>
+
+          <div class="form-actions">
+            <button @click="deleteConfirm = null" class="btn-modern btn-modern-secondary">
+              Cancel
+            </button>
+            <button @click="handleDeleteEquipment(deleteConfirm.id)" class="btn-modern btn-modern-danger" :disabled="loading">
+              <span v-if="loading">Deleting...</span>
+              <span v-else>Delete Equipment</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
       <!-- Success Message -->
-      <div v-if="successMessage" class="success-message" @click="successMessage = ''">
+      <div v-if="successMessage" class="toast toast-success" @click="successMessage = ''">
         <svg viewBox="0 0 24 24" fill="none">
           <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
           <path d="m9 12 2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -273,7 +381,7 @@
       </div>
 
       <!-- Error Message -->
-      <div v-if="generalError" class="error-notification" @click="generalError = ''">
+      <div v-if="generalError" class="toast toast-error" @click="generalError = ''">
         <svg viewBox="0 0 24 24" fill="none">
           <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
           <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
@@ -286,19 +394,20 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed, h } from 'vue'
 import api from '@/services/api'
 import ModernNavbar from '@/components/ModernNavbar.vue'
 
 const equipment = ref([])
 const showAddForm = ref(false)
 const editingId = ref(null)
+const deleteConfirm = ref(null)
 const loading = ref(false)
 const error = ref('')
 const successMessage = ref('')
 const generalError = ref('')
 
-const newEquipment = ref({
+const formData = ref({
   name: '',
   type: '',
   brand: '',
@@ -309,13 +418,12 @@ const newEquipment = ref({
   purchase_date: ''
 })
 
-const editForm = ref({
-  name: '',
-  brand: '',
-  model: '',
-  weight: 0,
-  notes: '',
-  condition: ''
+// Computed property for equipment by type
+const equipmentByType = computed(() => {
+  return equipment.value.reduce((acc, item) => {
+    acc[item.type] = (acc[item.type] || 0) + 1
+    return acc
+  }, {})
 })
 
 onMounted(async () => {
@@ -325,6 +433,7 @@ onMounted(async () => {
   } catch (err) {
     console.error('Failed to load equipment:', err)
     generalError.value = 'Failed to load equipment'
+    setTimeout(() => { generalError.value = '' }, 3000)
   }
 })
 
@@ -333,23 +442,12 @@ async function handleAddEquipment() {
   error.value = ''
 
   try {
-    const { data } = await api.post('/api/protected/equipment', newEquipment.value)
+    const { data } = await api.post('/api/protected/equipment', formData.value)
     equipment.value.push(data)
-    newEquipment.value = {
-      name: '',
-      type: '',
-      brand: '',
-      model: '',
-      weight: 0,
-      notes: '',
-      condition: '',
-      purchase_date: ''
-    }
+    resetForm()
     showAddForm.value = false
     successMessage.value = 'Equipment added successfully!'
-    setTimeout(() => {
-      successMessage.value = ''
-    }, 3000)
+    setTimeout(() => { successMessage.value = '' }, 3000)
   } catch (err) {
     error.value = err.response?.data?.error || 'Failed to add equipment'
   } finally {
@@ -359,53 +457,80 @@ async function handleAddEquipment() {
 
 function startEdit(item) {
   editingId.value = item.id
-  editForm.value = {
+  formData.value = {
     name: item.name,
+    type: item.type,
     brand: item.brand,
     model: item.model,
     weight: item.weight,
     notes: item.notes,
-    condition: item.condition
+    condition: item.condition,
+    purchase_date: item.purchase_date
   }
 }
 
-async function handleUpdateEquipment(id) {
+async function handleUpdateEquipment() {
+  loading.value = true
+  error.value = ''
+
   try {
-    const { data } = await api.put(`/api/protected/equipment?id=${id}`, editForm.value)
-    const index = equipment.value.findIndex(e => e.id === id)
+    const { data } = await api.put(`/api/protected/equipment?id=${editingId.value}`, formData.value)
+    const index = equipment.value.findIndex(e => e.id === editingId.value)
     if (index !== -1) {
       equipment.value[index] = data
     }
+    resetForm()
     editingId.value = null
     successMessage.value = 'Equipment updated successfully!'
-    setTimeout(() => {
-      successMessage.value = ''
-    }, 3000)
+    setTimeout(() => { successMessage.value = '' }, 3000)
   } catch (err) {
     console.error('Failed to update equipment:', err)
-    generalError.value = 'Failed to update equipment'
+    error.value = err.response?.data?.error || 'Failed to update equipment'
+  } finally {
+    loading.value = false
   }
 }
 
+function confirmDelete(item) {
+  deleteConfirm.value = item
+}
+
 async function handleDeleteEquipment(id) {
-  if (confirm('Are you sure you want to delete this equipment?')) {
-    try {
-      await api.delete(`/api/protected/equipment?id=${id}`)
-      equipment.value = equipment.value.filter(e => e.id !== id)
-      successMessage.value = 'Equipment deleted successfully!'
-      setTimeout(() => {
-        successMessage.value = ''
-      }, 3000)
-    } catch (err) {
-      console.error('Failed to delete equipment:', err)
-      generalError.value = 'Failed to delete equipment'
-    }
+  loading.value = true
+
+  try {
+    await api.delete(`/api/protected/equipment?id=${id}`)
+    equipment.value = equipment.value.filter(e => e.id !== id)
+    deleteConfirm.value = null
+    successMessage.value = 'Equipment deleted successfully!'
+    setTimeout(() => { successMessage.value = '' }, 3000)
+  } catch (err) {
+    console.error('Failed to delete equipment:', err)
+    generalError.value = 'Failed to delete equipment'
+    setTimeout(() => { generalError.value = '' }, 3000)
+  } finally {
+    loading.value = false
   }
 }
 
 function closeModal() {
   showAddForm.value = false
+  editingId.value = null
   error.value = ''
+  resetForm()
+}
+
+function resetForm() {
+  formData.value = {
+    name: '',
+    type: '',
+    brand: '',
+    model: '',
+    weight: 0,
+    notes: '',
+    condition: '',
+    purchase_date: ''
+  }
 }
 
 function formatEquipmentType(type) {
@@ -426,78 +551,534 @@ function formatDate(dateStr) {
     day: 'numeric'
   })
 }
+
+function getConditionStatus(condition) {
+  const statusMap = {
+    new: 'success',
+    excellent: 'success',
+    good: 'info',
+    fair: 'warning',
+    worn: 'danger'
+  }
+  return statusMap[condition] || 'default'
+}
+
+function getEquipmentIcon(type) {
+  const icons = {
+    bike: () => h('svg', { viewBox: '0 0 24 24', fill: 'none' }, [
+      h('circle', { cx: '5.5', cy: '17.5', r: '3.5', stroke: 'currentColor', 'stroke-width': '2' }),
+      h('circle', { cx: '18.5', cy: '17.5', r: '3.5', stroke: 'currentColor', 'stroke-width': '2' }),
+      h('polyline', { points: '15 6 9 12 12 12 11 17', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }),
+      h('path', { d: 'M5.5 17.5L8 12L12 12', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }),
+      h('path', { d: 'M18.5 17.5L16 12L12 12', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' })
+    ]),
+    shoes: () => h('svg', { viewBox: '0 0 24 24', fill: 'none' }, [
+      h('path', { d: 'M2 16C2 16 4 17 8 17C12 17 13 15 15 15C17 15 18 16 22 16V6C22 6 20 5 16 5C12 5 11 7 9 7C7 7 6 6 2 6V16Z', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' })
+    ]),
+    helmet: () => h('svg', { viewBox: '0 0 24 24', fill: 'none' }, [
+      h('path', { d: 'M12 2C6.48 2 2 6.48 2 12C2 14.5 3 16.75 4.63 18.38', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round' }),
+      h('path', { d: 'M12 2C17.52 2 22 6.48 22 12C22 14.5 21 16.75 19.37 18.38', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round' }),
+      h('path', { d: 'M2 12H22', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round' })
+    ]),
+    wetsuit: () => h('svg', { viewBox: '0 0 24 24', fill: 'none' }, [
+      h('path', { d: 'M12 2L8 6V14L12 18L16 14V6L12 2Z', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }),
+      h('path', { d: 'M8 14L4 18V22L8 22', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }),
+      h('path', { d: 'M16 14L20 18V22L16 22', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' })
+    ]),
+    other: () => h('svg', { viewBox: '0 0 24 24', fill: 'none' }, [
+      h('path', { d: 'M12 2L2 7L12 12L22 7L12 2Z', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }),
+      h('path', { d: 'M2 17L12 22L22 17', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }),
+      h('path', { d: 'M2 12L12 17L22 12', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' })
+    ])
+  }
+  return icons[type] || icons.other
+}
 </script>
 
 <style scoped>
+/* ============================================
+   EQUIPMENT PAGE
+   ============================================ */
 .equipment-page {
   min-height: 100vh;
-  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  background: var(--color-background);
 }
 
-/* ============================================
-   EQUIPMENT CONTENT
-   ============================================ */
 .equipment-content {
   max-width: 1400px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: var(--spacing-xl);
 }
 
-.page-header {
+/* ============================================
+   SECTION HEADER
+   ============================================ */
+.section-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 2rem;
-  gap: 2rem;
+  margin-bottom: var(--spacing-xl);
+  gap: var(--spacing-xl);
   animation: slideInDown 0.6s ease-out;
 }
 
-.header-content h2 {
-  margin: 0 0 0.5rem 0;
-  font-size: 2.5rem;
-  font-weight: 800;
-  background: linear-gradient(135deg, #1f2937 0%, #4b5563 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+.section-title {
+  margin: 0 0 var(--spacing-sm) 0;
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
 }
 
-.page-description {
+.section-description {
   margin: 0;
-  font-size: 1.1rem;
-  color: #6b7280;
-  font-weight: 500;
+  font-size: var(--font-size-base);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-relaxed);
+  max-width: 600px;
 }
 
-.btn-primary {
-  display: inline-flex;
+/* ============================================
+   STATS GRID
+   ============================================ */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: var(--spacing-lg);
+  margin-bottom: var(--spacing-xl);
+}
+
+.metric-card {
+  background: var(--glass-background);
+  backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-lg);
+  box-shadow: var(--shadow-glass);
+  transition: all var(--transition-slow);
+  animation: slideInUp 0.6s ease-out;
+}
+
+.metric-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-glass-hover);
+}
+
+.metric-icon-wrapper {
+  margin-bottom: var(--spacing-md);
+}
+
+.icon-badge {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-lg);
+  display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 1rem 1.5rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border: none;
-  border-radius: 1rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-  white-space: nowrap;
+  justify-content: center;
+  background: var(--gradient-primary);
+  color: var(--color-text-inverse);
 }
 
-.btn-primary svg {
+.icon-badge svg {
+  width: 24px;
+  height: 24px;
+}
+
+.icon-badge-primary {
+  background: var(--gradient-primary);
+}
+
+.icon-badge-bikes {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.icon-badge-shoes {
+  background: linear-gradient(135deg, var(--color-warning), #d97706);
+}
+
+.icon-badge-other {
+  background: linear-gradient(135deg, #06b6d4, #0891b2);
+}
+
+.metric-label {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+.metric-value {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-xs);
+}
+
+.metric-change {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.metric-change.neutral {
+  color: var(--color-text-tertiary);
+}
+
+/* ============================================
+   CARD MODERN
+   ============================================ */
+.card-modern {
+  background: var(--glass-background);
+  backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-glass);
+  overflow: hidden;
+  animation: slideInUp 0.6s ease-out;
+}
+
+.card-modern-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: var(--spacing-xl);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.card-modern-title {
+  margin: 0 0 var(--spacing-xs) 0;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+}
+
+.card-modern-subtitle {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+/* ============================================
+   TABLE MODERN
+   ============================================ */
+.table-modern-wrapper {
+  overflow-x: auto;
+}
+
+.table-modern {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table-modern thead {
+  background: var(--color-surface-hover);
+  border-bottom: 2px solid var(--color-border);
+}
+
+.table-modern th {
+  padding: var(--spacing-md) var(--spacing-lg);
+  text-align: left;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.table-modern td {
+  padding: var(--spacing-lg);
+  border-bottom: 1px solid var(--color-border);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-primary);
+}
+
+.table-modern tbody tr {
+  transition: background-color var(--transition-base);
+}
+
+.table-row-hover:hover {
+  background: var(--color-surface-hover);
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-muted {
+  color: var(--color-text-tertiary);
+}
+
+/* Equipment Cell */
+.equipment-cell {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+
+.equipment-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.equipment-icon[data-type="bike"] {
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
+  color: #667eea;
+}
+
+.equipment-icon[data-type="shoes"] {
+  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.15));
+  color: var(--color-warning);
+}
+
+.equipment-icon[data-type="helmet"] {
+  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.15));
+  color: var(--color-danger);
+}
+
+.equipment-icon[data-type="wetsuit"] {
+  background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(8, 145, 178, 0.15));
+  color: #06b6d4;
+}
+
+.equipment-icon[data-type="other"] {
+  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(124, 58, 237, 0.15));
+  color: #8b5cf6;
+}
+
+.equipment-icon svg {
   width: 20px;
   height: 20px;
 }
 
-.btn-primary:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+.equipment-info {
+  flex: 1;
+  min-width: 0;
 }
 
-.btn-primary:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
+.equipment-name {
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.equipment-meta {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  margin-top: 0.125rem;
+}
+
+/* Type Badge */
+.type-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem var(--spacing-sm);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  text-transform: capitalize;
+}
+
+.type-badge[data-type="bike"] {
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
+  color: #667eea;
+}
+
+.type-badge[data-type="shoes"] {
+  background: rgba(245, 158, 11, 0.15);
+  color: var(--color-warning);
+}
+
+.type-badge[data-type="helmet"] {
+  background: rgba(239, 68, 68, 0.15);
+  color: var(--color-danger);
+}
+
+.type-badge[data-type="wetsuit"] {
+  background: rgba(6, 182, 212, 0.15);
+  color: #06b6d4;
+}
+
+.type-badge[data-type="other"] {
+  background: rgba(139, 92, 246, 0.15);
+  color: #8b5cf6;
+}
+
+/* Status Pills */
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem var(--spacing-sm);
+  border-radius: var(--radius-full);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  text-transform: capitalize;
+}
+
+.status-pill-success {
+  background: rgba(16, 185, 129, 0.15);
+  color: var(--color-secondary);
+}
+
+.status-pill-info {
+  background: rgba(59, 130, 246, 0.15);
+  color: var(--color-info);
+}
+
+.status-pill-warning {
+  background: rgba(245, 158, 11, 0.15);
+  color: var(--color-warning);
+}
+
+.status-pill-danger {
+  background: rgba(239, 68, 68, 0.15);
+  color: var(--color-danger);
+}
+
+/* Details Cell */
+.details-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.detail-item {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--color-text-secondary);
+}
+
+.detail-item svg {
+  width: 14px;
+  height: 14px;
+  color: var(--color-primary);
+  flex-shrink: 0;
+}
+
+.date-text {
+  color: var(--color-text-secondary);
+}
+
+/* Action Buttons */
+.action-buttons {
+  display: flex;
+  gap: var(--spacing-sm);
+  justify-content: flex-end;
+}
+
+.btn-icon {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--transition-base);
+}
+
+.btn-icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+.btn-icon-primary {
+  background: var(--color-info);
+  color: var(--color-text-inverse);
+}
+
+.btn-icon-primary:hover {
+  background: #2563eb;
+  transform: translateY(-2px);
+}
+
+.btn-icon-danger {
+  background: var(--color-danger);
+  color: var(--color-text-inverse);
+}
+
+.btn-icon-danger:hover {
+  background: #dc2626;
+  transform: translateY(-2px);
+}
+
+/* ============================================
+   EMPTY STATE
+   ============================================ */
+.empty-state {
+  text-align: center;
+  padding: var(--spacing-4xl) var(--spacing-xl);
+  background: var(--glass-background);
+  backdrop-filter: var(--glass-blur);
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--shadow-glass);
+}
+
+.empty-icon {
+  width: 120px;
+  height: 120px;
+  margin: 0 auto var(--spacing-xl);
+  padding: var(--spacing-xl);
+  background: var(--color-surface-hover);
+  border-radius: var(--radius-full);
+  color: var(--color-text-tertiary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.empty-state h3 {
+  margin: 0 0 var(--spacing-md) 0;
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+}
+
+.empty-state p {
+  margin: 0 0 var(--spacing-xl) 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-relaxed);
+}
+
+.empty-state-tips {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  max-width: 400px;
+  margin: 0 auto var(--spacing-xl);
+  text-align: left;
+}
+
+.tip-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+.tip-item svg {
+  width: 16px;
+  height: 16px;
+  color: var(--color-secondary);
+  flex-shrink: 0;
 }
 
 /* ============================================
@@ -514,595 +1095,386 @@ function formatDate(dateStr) {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
-  animation: fadeIn 0.2s ease;
-  padding: 1rem;
+  z-index: var(--z-modal-backdrop);
+  animation: fadeIn var(--transition-fast) ease;
+  padding: var(--spacing-md);
   overflow-y: auto;
 }
 
-.modern-modal {
-  background: white;
-  border-radius: 1.5rem;
-  max-width: 600px;
+.modal-modern {
+  background: var(--color-surface);
+  border-radius: var(--radius-xl);
+  max-width: 700px;
   width: 100%;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  animation: slideUp 0.3s ease;
+  box-shadow: var(--shadow-2xl);
+  animation: slideUp var(--transition-slow) ease;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.modal-confirm {
+  max-width: 500px;
 }
 
 .modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 2rem;
-  border-bottom: 1px solid #e5e7eb;
+  padding: var(--spacing-xl);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .modal-header h3 {
   margin: 0;
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #1f2937;
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
 }
 
-.close-btn {
+.btn-close {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   border: none;
-  background: #f3f4f6;
-  border-radius: 0.75rem;
+  background: var(--color-surface-hover);
+  border-radius: var(--radius-md);
   cursor: pointer;
-  transition: all 0.2s ease;
-  color: #374151;
+  transition: all var(--transition-base);
+  color: var(--color-text-secondary);
 }
 
-.close-btn:hover {
-  background: #e5e7eb;
+.btn-close:hover {
+  background: var(--color-border);
   transform: rotate(90deg);
 }
 
-.close-btn svg {
+.btn-close svg {
   width: 20px;
   height: 20px;
 }
 
-.equipment-form {
-  padding: 2rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
+.modal-body {
+  padding: var(--spacing-xl);
 }
 
-.form-section {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.form-row {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1rem;
-}
-
-.form-section label {
-  font-weight: 600;
-  color: #374151;
-  font-size: 0.9rem;
-}
-
-.form-section input,
-.form-section select,
-.form-section textarea {
-  padding: 0.75rem;
-  border: 2px solid #e5e7eb;
-  border-radius: 0.75rem;
-  font-size: 1rem;
-  font-family: inherit;
-  transition: all 0.2s ease;
-  background: white;
-}
-
-.form-section input:focus,
-.form-section select:focus,
-.form-section textarea:focus {
-  outline: none;
-  border-color: #667eea;
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-}
-
-.form-section textarea {
-  resize: vertical;
-  min-height: 80px;
-}
-
-.form-actions {
-  display: flex;
-  gap: 1rem;
-  justify-content: flex-end;
-  padding-top: 1rem;
-  border-top: 1px solid #e5e7eb;
-}
-
-.btn-secondary {
-  padding: 0.75rem 1.5rem;
-  background: #f3f4f6;
-  color: #374151;
-  border: none;
-  border-radius: 0.75rem;
-  cursor: pointer;
-  font-weight: 600;
-  transition: all 0.2s ease;
-}
-
-.btn-secondary:hover {
-  background: #e5e7eb;
-}
-
-.error-message {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-top: 1rem;
-  padding: 1rem;
-  background: #fef2f2;
-  border: 1px solid #fecaca;
-  color: #dc2626;
-  border-radius: 0.75rem;
-  animation: shake 0.3s ease;
-}
-
-.error-message svg {
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-}
-
-/* ============================================
-   EQUIPMENT GRID & CARDS
-   ============================================ */
-.equipment-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-  gap: 1.5rem;
-}
-
-.equipment-card {
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(20px);
-  border-radius: 1.5rem;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  animation: slideInUp 0.6s ease-out;
-}
-
-.equipment-card:hover:not(.editing) {
-  transform: translateY(-4px);
-  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
-  border-color: rgba(102, 126, 234, 0.2);
-}
-
-.card-display {
-  padding: 1.5rem;
-}
-
-.equipment-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 1.5rem;
-  gap: 1rem;
-}
-
-.equipment-header h4 {
-  margin: 0 0 0.25rem 0;
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: #1f2937;
-}
-
-.equipment-meta {
-  margin: 0;
-  font-size: 0.85rem;
-  color: #6b7280;
-}
-
-.equipment-badge {
-  padding: 0.5rem 1rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border-radius: 0.75rem;
-  font-size: 0.85rem;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.equipment-badge[data-type="shoes"] {
-  background: linear-gradient(135deg, #f59e0b, #d97706);
-}
-
-.equipment-badge[data-type="helmet"] {
-  background: linear-gradient(135deg, #ef4444, #dc2626);
-}
-
-.equipment-badge[data-type="wetsuit"] {
-  background: linear-gradient(135deg, #06b6d4, #0891b2);
-}
-
-.equipment-badge[data-type="other"] {
-  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
-}
-
-.equipment-details {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  margin-bottom: 1.5rem;
-}
-
-.detail-row {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  font-size: 0.9rem;
-  color: #4b5563;
-}
-
-.detail-row svg {
-  width: 16px;
-  height: 16px;
-  color: #667eea;
-  flex-shrink: 0;
-}
-
-.detail-row.notes {
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 0.75rem;
-  background: rgba(248, 250, 252, 0.5);
-  border-radius: 0.5rem;
-  border-left: 3px solid #667eea;
-}
-
-.detail-row.notes svg {
-  display: none;
-}
-
-.condition-badge {
-  display: inline-block;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.375rem;
-  font-size: 0.8rem;
-  font-weight: 600;
-  text-transform: capitalize;
-}
-
-.condition-badge.new {
-  background: #dcfce7;
-  color: #166534;
-}
-
-.condition-badge.excellent {
-  background: #d1fae5;
-  color: #065f46;
-}
-
-.condition-badge.good {
-  background: #dbeafe;
-  color: #1e40af;
-}
-
-.condition-badge.fair {
-  background: #fed7aa;
-  color: #92400e;
-}
-
-.condition-badge.worn {
-  background: #fee2e2;
-  color: #991b1b;
-}
-
-.equipment-actions {
-  display: flex;
-  gap: 0.75rem;
-}
-
-.btn-edit {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  background: #3b82f6;
-  color: white;
-  border: none;
-  border-radius: 0.75rem;
-  cursor: pointer;
-  font-weight: 600;
-  font-size: 0.9rem;
-  transition: all 0.2s ease;
-}
-
-.btn-edit svg {
-  width: 16px;
-  height: 16px;
-}
-
-.btn-edit:hover {
-  background: #2563eb;
-  transform: translateY(-1px);
-}
-
-.btn-danger {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  background: #ef4444;
-  color: white;
-  border: none;
-  border-radius: 0.75rem;
-  cursor: pointer;
-  font-weight: 600;
-  font-size: 0.9rem;
-  transition: all 0.2s ease;
-}
-
-.btn-danger svg {
-  width: 16px;
-  height: 16px;
-}
-
-.btn-danger:hover {
-  background: #dc2626;
-  transform: translateY(-1px);
-}
-
-.card-edit {
-  padding: 1.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-/* ============================================
-   EMPTY STATE
-   ============================================ */
-.empty-state {
-  text-align: center;
-  padding: 4rem 2rem;
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(20px);
-  border-radius: 1.5rem;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-}
-
-.empty-icon {
-  width: 120px;
-  height: 120px;
-  margin: 0 auto 2rem;
-  padding: 2rem;
-  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
-  border-radius: 50%;
-  color: #6b7280;
+.confirm-icon {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto var(--spacing-lg);
+  padding: var(--spacing-lg);
+  background: rgba(239, 68, 68, 0.1);
+  border-radius: var(--radius-full);
+  color: var(--color-danger);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.empty-icon svg {
+.confirm-icon svg {
   width: 100%;
   height: 100%;
 }
 
-.empty-state h3 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #1f2937;
+.confirm-text {
+  margin: 0 0 var(--spacing-sm) 0;
+  font-size: var(--font-size-base);
+  color: var(--color-text-primary);
+  line-height: var(--line-height-relaxed);
 }
 
-.empty-state p {
-  margin: 0 0 2rem 0;
-  color: #6b7280;
-  font-size: 1rem;
-  line-height: 1.6;
+.confirm-subtext {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-tertiary);
 }
 
 /* ============================================
-   MESSAGES
+   FORM MODERN
    ============================================ */
-.success-message {
-  position: fixed;
-  top: 2rem;
-  right: 2rem;
+.form-modern {
+  padding: var(--spacing-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--spacing-lg);
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.form-group-full {
+  grid-column: 1 / -1;
+}
+
+.form-label {
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.form-label.required::after {
+  content: ' *';
+  color: var(--color-danger);
+}
+
+.form-input,
+.form-select,
+.form-textarea {
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-base);
+  font-family: inherit;
+  transition: all var(--transition-base);
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+}
+
+.form-input:focus,
+.form-select:focus,
+.form-textarea:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.form-textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+.form-help {
+  margin: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.form-actions {
+  display: flex;
+  gap: var(--spacing-md);
+  justify-content: flex-end;
+  padding-top: var(--spacing-md);
+  border-top: 1px solid var(--color-border);
+}
+
+/* ============================================
+   BUTTONS
+   ============================================ */
+.btn-modern {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-lg);
+  border: none;
+  border-radius: var(--radius-lg);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  transition: all var(--transition-slow);
+  white-space: nowrap;
+}
+
+.btn-modern svg {
+  width: 18px;
+  height: 18px;
+}
+
+.btn-modern-large {
+  padding: var(--spacing-md) var(--spacing-xl);
+  font-size: var(--font-size-base);
+}
+
+.btn-modern-large svg {
+  width: 20px;
+  height: 20px;
+}
+
+.btn-modern-primary {
+  background: var(--gradient-primary);
+  color: var(--color-text-inverse);
+  box-shadow: var(--shadow-md);
+}
+
+.btn-modern-primary:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+
+.btn-modern-secondary {
+  background: var(--color-surface-hover);
+  color: var(--color-text-secondary);
+}
+
+.btn-modern-secondary:hover {
+  background: var(--color-border);
+}
+
+.btn-modern-danger {
+  background: var(--gradient-danger);
+  color: var(--color-text-inverse);
+  box-shadow: var(--shadow-md);
+}
+
+.btn-modern-danger:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+
+.btn-modern:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+/* ============================================
+   ALERTS
+   ============================================ */
+.alert {
   display: flex;
   align-items: center;
-  gap: 1rem;
-  padding: 1rem 1.5rem;
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-  color: white;
-  border-radius: 1rem;
-  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md);
+  border-radius: var(--radius-md);
+  animation: shake var(--transition-slow) ease;
+}
+
+.alert svg {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+.alert-error {
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  color: var(--color-danger);
+}
+
+/* ============================================
+   TOAST NOTIFICATIONS
+   ============================================ */
+.toast {
+  position: fixed;
+  top: var(--spacing-xl);
+  right: var(--spacing-xl);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
   animation: slideInDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  z-index: 1000;
+  z-index: var(--z-modal);
   cursor: pointer;
 }
 
-.success-message svg {
+.toast svg {
   width: 24px;
   height: 24px;
   flex-shrink: 0;
 }
 
-.error-notification {
-  position: fixed;
-  top: 2rem;
-  right: 2rem;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem 1.5rem;
-  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-  color: white;
-  border-radius: 1rem;
-  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
-  animation: slideInDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  z-index: 1000;
-  cursor: pointer;
+.toast-success {
+  background: var(--gradient-secondary);
+  color: var(--color-text-inverse);
 }
 
-.error-notification svg {
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
+.toast-error {
+  background: var(--gradient-danger);
+  color: var(--color-text-inverse);
 }
 
 /* ============================================
    RESPONSIVE DESIGN
    ============================================ */
 @media (max-width: 1024px) {
-  .equipment-grid {
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
   }
 
-  .page-header {
+  .section-header {
     flex-direction: column;
     align-items: stretch;
   }
 
-  .btn-primary {
+  .btn-modern {
     width: 100%;
-    justify-content: center;
   }
 }
 
 @media (max-width: 768px) {
   .equipment-content {
-    padding: 1rem;
+    padding: var(--spacing-md);
   }
 
-  .page-header {
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  .header-content h2 {
-    font-size: 2rem;
-  }
-
-  .equipment-grid {
+  .stats-grid {
     grid-template-columns: 1fr;
   }
 
-  .form-row {
+  .form-grid {
     grid-template-columns: 1fr;
   }
 
-  .modal-overlay {
-    padding: 1rem;
+  .table-modern th,
+  .table-modern td {
+    padding: var(--spacing-sm) var(--spacing-md);
   }
 
-  .modern-modal {
-    max-width: none;
+  .equipment-cell {
+    flex-direction: row;
   }
 
-  .equipment-form {
-    padding: 1.5rem;
-  }
-
-  .success-message,
-  .error-notification {
-    right: 1rem;
-    left: 1rem;
-  }
-}
-
-@media (max-width: 640px) {
-  .page-header {
-    padding: 0;
-    margin-bottom: 1.5rem;
-  }
-
-  .header-content h2 {
-    font-size: 1.5rem;
-  }
-
-  .page-description {
-    font-size: 1rem;
-  }
-
-  .btn-primary {
-    padding: 0.875rem 1rem;
-    font-size: 0.95rem;
-  }
-
-  .equipment-card {
-    border-radius: 1rem;
-  }
-
-  .card-display,
-  .card-edit {
-    padding: 1.25rem;
-  }
-
-  .equipment-header {
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-
-  .equipment-actions {
+  .action-buttons {
     flex-direction: column;
   }
 
-  .btn-edit,
-  .btn-danger {
+  .btn-icon {
     width: 100%;
   }
 
-  .modal-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1rem;
-  }
-
-  .close-btn {
-    align-self: flex-end;
-  }
-
   .form-actions {
     flex-direction: column;
   }
 
-  .btn-secondary,
-  .btn-primary {
+  .btn-modern {
     width: 100%;
   }
 
+  .toast {
+    right: var(--spacing-md);
+    left: var(--spacing-md);
+  }
+}
+
+@media (max-width: 640px) {
+  .section-title {
+    font-size: var(--font-size-2xl);
+  }
+
+  .section-description {
+    font-size: var(--font-size-sm);
+  }
+
   .empty-icon {
     width: 100px;
     height: 100px;
-    margin-bottom: 1.5rem;
-    padding: 1.5rem;
+    margin-bottom: var(--spacing-lg);
+    padding: var(--spacing-lg);
   }
 
   .empty-state {
-    padding: 2rem 1.5rem;
-  }
-
-  .success-message,
-  .error-notification {
-    gap: 0.75rem;
-    padding: 0.875rem 1rem;
-    font-size: 0.9rem;
+    padding: var(--spacing-xl) var(--spacing-lg);
   }
 }
 
@@ -1157,52 +1529,66 @@ function formatDate(dateStr) {
   75% { transform: translateX(5px); }
 }
 
-/* Dark Mode Support */
+/* ============================================
+   DARK MODE
+   ============================================ */
 :global(.dark) .equipment-page {
   background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
 }
 
-:global(.dark) .equipment-card,
+:global(.dark) .metric-card,
+:global(.dark) .card-modern,
 :global(.dark) .empty-state,
-:global(.dark) .modal-overlay .modern-modal {
+:global(.dark) .modal-modern {
   background: rgba(30, 41, 59, 0.7);
   border-color: rgba(148, 163, 184, 0.1);
 }
 
-:global(.dark) .equipment-card:hover {
+:global(.dark) .metric-card:hover,
+:global(.dark) .card-modern:hover {
   border-color: rgba(102, 126, 234, 0.3);
 }
 
-:global(.dark) .equipment-header h4,
+:global(.dark) .section-title,
+:global(.dark) .card-modern-title,
+:global(.dark) .metric-value,
+:global(.dark) .equipment-name,
 :global(.dark) .empty-state h3 {
   color: #f1f5f9;
 }
 
+:global(.dark) .section-description,
+:global(.dark) .card-modern-subtitle,
+:global(.dark) .metric-label,
 :global(.dark) .equipment-meta,
-:global(.dark) .detail-row,
 :global(.dark) .empty-state p {
   color: #cbd5e1;
 }
 
-:global(.dark) .modal-header h3 {
-  color: #f1f5f9;
+:global(.dark) .table-modern thead {
+  background: rgba(51, 65, 85, 0.5);
 }
 
-:global(.dark) .form-section label {
-  color: #e2e8f0;
+:global(.dark) .table-row-hover:hover {
+  background: rgba(51, 65, 85, 0.3);
 }
 
-:global(.dark) .form-section input,
-:global(.dark) .form-section select,
-:global(.dark) .form-section textarea {
+:global(.dark) .form-input,
+:global(.dark) .form-select,
+:global(.dark) .form-textarea {
   background: rgba(51, 65, 85, 0.5);
   border-color: rgba(148, 163, 184, 0.2);
   color: #f1f5f9;
 }
 
-:global(.dark) .form-section input:focus,
-:global(.dark) .form-section select:focus,
-:global(.dark) .form-section textarea:focus {
+:global(.dark) .form-input:focus,
+:global(.dark) .form-select:focus,
+:global(.dark) .form-textarea:focus {
   border-color: #667eea;
 }
-</style>
\ No newline at end of file
+
+:global(.dark) .alert-error {
+  background: rgba(220, 38, 38, 0.2);
+  border-color: rgba(239, 68, 68, 0.3);
+}
+</style>
diff --git a/src/components/UserLogin.vue b/src/components/UserLogin.vue
index 7a2265c..4d2976a 100644
--- a/src/components/UserLogin.vue
+++ b/src/components/UserLogin.vue
@@ -1,46 +1,55 @@
 <template>
   <div class="login-container">
-    <div class="login-card">
-      <div class="card-header">
+    <div class="card-modern auth-card">
+      <div class="auth-header">
         <div class="logo-wrapper">
           <svg viewBox="0 0 24 24" fill="none">
             <path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
             <circle cx="12" cy="13" r="2" fill="currentColor"/>
           </svg>
         </div>
-        <h1>Welcome Back</h1>
-        <p class="subtitle">Train with Focus. Ride with Awareness.</p>
+        <h1>Welcome Back!</h1>
+        <p class="subtitle">Ready to track your training? Log in to continue your journey.</p>
       </div>
 
-      <form @submit.prevent="handleLogin" class="login-form">
+      <form @submit.prevent="handleLogin" class="form-modern">
         <!-- Username Field -->
-        <div class="form-group">
-          <label for="username">Username</label>
-          <div class="input-wrapper">
-            <input
-              id="username"
-              v-model="form.username"
-              type="text"
-              placeholder="Enter your username"
-              required
-              :disabled="auth.loading"
-              autocomplete="username"
-            />
-            <svg class="input-icon" viewBox="0 0 24 24" fill="none">
+        <div class="form-group-modern">
+          <label for="username" class="form-label-modern">
+            <svg class="label-icon" viewBox="0 0 24 24" fill="none">
               <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
               <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
             </svg>
-          </div>
+            Username
+          </label>
+          <input
+            id="username"
+            v-model="form.username"
+            type="text"
+            class="form-input-modern"
+            placeholder="Enter your username"
+            required
+            :disabled="auth.loading"
+            autocomplete="username"
+          />
+          <span class="form-helper-text">Your unique account identifier</span>
         </div>
 
         <!-- Password Field -->
-        <div class="form-group">
-          <label for="password">Password</label>
+        <div class="form-group-modern">
+          <label for="password" class="form-label-modern">
+            <svg class="label-icon" viewBox="0 0 24 24" fill="none">
+              <rect x="5" y="11" width="14" height="10" rx="2" stroke="currentColor" stroke-width="2"/>
+              <path d="M8 11V7C8 5.93913 8.42143 4.92172 9.17157 4.17157C9.92172 3.42143 10.9391 3 12 3C13.0609 3 14.0783 3.42143 14.8284 4.17157C15.5786 4.92172 16 5.93913 16 7V11" stroke="currentColor" stroke-width="2"/>
+            </svg>
+            Password
+          </label>
           <div class="input-wrapper">
             <input
               id="password"
               v-model="form.password"
               :type="showPassword ? 'text' : 'password'"
+              class="form-input-modern"
               placeholder="Enter your password"
               required
               :disabled="auth.loading"
@@ -49,8 +58,9 @@
             <button
               type="button"
               @click="showPassword = !showPassword"
-              class="password-toggle"
+              class="password-toggle-btn"
               :title="showPassword ? 'Hide password' : 'Show password'"
+              :aria-label="showPassword ? 'Hide password' : 'Show password'"
             >
               <svg v-if="showPassword" viewBox="0 0 24 24" fill="none">
                 <path d="M1 12S6 4 12 4C18 4 23 12 23 12S18 20 12 20C6 20 1 12 1 12Z" stroke="currentColor" stroke-width="2"/>
@@ -62,21 +72,59 @@
               </svg>
             </button>
           </div>
+          <span class="form-helper-text">Keep your account secure</span>
         </div>
 
         <!-- Remember Me & Forgot Password -->
         <div class="form-options">
-          <label class="remember-me">
+          <label class="remember-checkbox">
             <input v-model="rememberMe" type="checkbox" />
-            <span>Remember me</span>
+            <span>Keep me logged in on this device</span>
           </label>
-          <RouterLink to="/password-reset" class="forgot-password">
-            Forgot password?
+          <RouterLink to="/password-reset" class="forgot-link">
+            Forgot your password?
           </RouterLink>
         </div>
 
+        <!-- Info Box -->
+        <div class="info-box info-box-info">
+          <svg viewBox="0 0 24 24" fill="none">
+            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+            <line x1="12" y1="8" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            <line x1="12" y1="16" x2="12.01" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+          <div>
+            <strong>Tip:</strong> For security, never share your login credentials. Use a strong, unique password.
+          </div>
+        </div>
+
+        <!-- Error Message -->
+        <div v-if="auth.error" class="info-box info-box-danger">
+          <svg viewBox="0 0 24 24" fill="none">
+            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+            <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
+            <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
+          </svg>
+          <div>
+            <div class="form-error-text">
+              <strong>Login Failed:</strong> {{ auth.error }}
+            </div>
+          </div>
+        </div>
+
+        <!-- Success State -->
+        <div v-if="loginSuccess" class="info-box info-box-success">
+          <svg viewBox="0 0 24 24" fill="none">
+            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+            <path d="m9 12 2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <div>
+            <strong>Success!</strong> Redirecting to your dashboard...
+          </div>
+        </div>
+
         <!-- Login Button -->
-        <button type="submit" :disabled="auth.loading" class="btn-primary">
+        <button type="submit" :disabled="auth.loading" class="btn-modern btn-modern-primary btn-modern-large">
           <span v-if="auth.loading" class="loading-content">
             <svg class="spinner" viewBox="0 0 24 24">
               <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" opacity="0.25"/>
@@ -84,34 +132,28 @@
             </svg>
             Logging in...
           </span>
-          <span v-else>Login</span>
+          <span v-else>
+            <svg viewBox="0 0 24 24" fill="none" style="width: 20px; height: 20px;">
+              <path d="M15 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M10 17L15 12L10 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M15 12H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            Log In
+          </span>
         </button>
       </form>
 
-      <!-- Error Message -->
-      <div v-if="auth.error" class="error-message">
-        <svg viewBox="0 0 24 24" fill="none">
-          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-          <line x1="12" y1="8" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-          <line x1="12" y1="16" x2="12.01" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-        </svg>
-        <div>
-          <p class="error-title">Login Failed</p>
-          <p class="error-text">{{ auth.error }}</p>
-        </div>
-      </div>
-
       <!-- Divider -->
-      <div class="divider">
-        <span>Or</span>
+      <div class="auth-divider">
+        <span>New to RideAware?</span>
       </div>
 
       <!-- Sign Up Link -->
-      <div class="signup-section">
-        <p>Don't have an account?</p>
-        <RouterLink to="/signup" class="signup-link">
-          Sign up now
-          <svg viewBox="0 0 24 24" fill="none">
+      <div class="auth-footer">
+        <p>Don't have an account yet? Join the community!</p>
+        <RouterLink to="/signup" class="btn-modern btn-modern-secondary">
+          Create Free Account
+          <svg viewBox="0 0 24 24" fill="none" style="width: 20px; height: 20px;">
             <line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
             <polyline points="12 5 19 12 12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
@@ -128,7 +170,12 @@
 
     <!-- Bottom Link -->
     <div class="bottom-link">
-      <RouterLink to="/">Back to Home</RouterLink>
+      <RouterLink to="/" class="btn-modern btn-modern-secondary">
+        <svg viewBox="0 0 24 24" fill="none" style="width: 16px; height: 16px;">
+          <path d="M19 12H5M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        Back to Home
+      </RouterLink>
     </div>
   </div>
 </template>
@@ -143,6 +190,7 @@ const auth = useAuth()
 
 const showPassword = ref(false)
 const rememberMe = ref(false)
+const loginSuccess = ref(false)
 
 const form = reactive({
   username: '',
@@ -159,9 +207,13 @@ async function handleLogin() {
       localStorage.removeItem('rememberMe')
       localStorage.removeItem('username')
     }
-    router.push('/dashboard')
+    loginSuccess.value = true
+    setTimeout(() => {
+      router.push('/dashboard')
+    }, 1000)
   } catch (error) {
     console.error('Login error:', error)
+    loginSuccess.value = false
   }
 }
 </script>
@@ -172,45 +224,39 @@ async function handleLogin() {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 1rem;
+  background: var(--gradient-primary);
+  padding: var(--spacing-md);
   position: relative;
   overflow: hidden;
 }
 
 /* ============================================
-   LOGIN CARD
+   AUTH CARD
    ============================================ */
-.login-card {
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(20px);
-  border-radius: 2rem;
-  padding: 3rem;
-  max-width: 480px;
+.auth-card {
+  max-width: 520px;
   width: 100%;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: slideUp var(--transition-slower) cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   z-index: 10;
 }
 
 /* ============================================
-   CARD HEADER
+   AUTH HEADER
    ============================================ */
-.card-header {
+.auth-header {
   text-align: center;
-  margin-bottom: 2rem;
+  margin-bottom: var(--spacing-2xl);
 }
 
 .logo-wrapper {
   width: 80px;
   height: 80px;
-  margin: 0 auto 1.5rem;
-  padding: 1.5rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 2rem;
-  color: white;
+  margin: 0 auto var(--spacing-lg);
+  padding: var(--spacing-lg);
+  background: var(--gradient-primary);
+  border-radius: var(--radius-2xl);
+  color: var(--color-text-inverse);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -223,43 +269,30 @@ async function handleLogin() {
 }
 
 h1 {
-  margin: 0 0 0.75rem 0;
-  font-size: 2rem;
-  font-weight: 800;
-  color: #1f2937;
-  animation: titleSlide 0.6s ease-out 0.3s both;
+  margin: 0 0 var(--spacing-sm) 0;
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  animation: titleSlide var(--transition-slower) ease-out 0.3s both;
 }
 
 .subtitle {
-  margin: 0;
-  font-size: 1rem;
-  color: #6b7280;
-  font-weight: 500;
-  font-style: italic;
-  animation: subtitleFade 0.6s ease-out 0.4s both;
+  margin: var(--spacing-sm) 0 0 0;
+  font-size: var(--font-size-base);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-relaxed);
+  animation: subtitleFade var(--transition-slower) ease-out 0.4s both;
 }
 
 /* ============================================
-   LOGIN FORM
+   FORM ENHANCEMENTS
    ============================================ */
-.login-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  animation: formSlide 0.6s ease-out 0.5s both;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-label {
-  font-weight: 600;
-  color: #374151;
-  font-size: 0.95rem;
-  display: block;
+.label-icon {
+  width: 18px;
+  height: 18px;
+  margin-right: var(--spacing-xs);
+  vertical-align: middle;
+  color: var(--color-primary);
 }
 
 .input-wrapper {
@@ -268,67 +301,31 @@ label {
   align-items: center;
 }
 
-input {
-  width: 100%;
-  padding: 1rem 1rem 1rem 3rem;
-  border: 2px solid #e5e7eb;
-  border-radius: 1rem;
-  font-size: 1rem;
-  font-family: inherit;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  background: white;
-  box-sizing: border-box;
-}
-
-input:focus {
-  outline: none;
-  border-color: #667eea;
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-  transform: translateY(-2px);
-}
-
-input:disabled {
-  background: #f9fafb;
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-input::placeholder {
-  color: #9ca3af;
-}
-
-.input-icon {
+.password-toggle-btn {
   position: absolute;
-  left: 1rem;
-  width: 20px;
-  height: 20px;
-  color: #9ca3af;
-  pointer-events: none;
-}
-
-.password-toggle {
-  position: absolute;
-  right: 1rem;
+  right: 12px;
   width: 24px;
   height: 24px;
   background: none;
   border: none;
-  color: #9ca3af;
+  color: var(--color-text-secondary);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all var(--transition-base);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0;
+  padding: 4px;
+  border-radius: 4px;
 }
 
-.password-toggle svg {
+.password-toggle-btn svg {
   width: 100%;
   height: 100%;
 }
 
-.password-toggle:hover {
-  color: #667eea;
+.password-toggle-btn:hover {
+  color: var(--color-primary);
+  background: rgba(0, 102, 204, 0.1);
 }
 
 /* ============================================
@@ -338,186 +335,124 @@ input::placeholder {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  font-size: 0.9rem;
+  font-size: var(--font-size-sm);
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
 }
 
-.remember-me {
+.remember-checkbox {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--spacing-sm);
   cursor: pointer;
-  color: #374151;
-  font-weight: 500;
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
   user-select: none;
 }
 
-.remember-me input {
-  width: auto;
-  padding: 0;
-  border: 2px solid #e5e7eb;
-  border-radius: 0.375rem;
+.remember-checkbox input {
+  width: 18px;
+  height: 18px;
   cursor: pointer;
-  accent-color: #667eea;
-  margin: 0;
+  accent-color: var(--color-primary);
+  border: 2px solid var(--color-border);
+  border-radius: 4px;
 }
 
-.remember-me input:checked {
-  background: #667eea;
-}
-
-.forgot-password {
-  color: #667eea;
+.forgot-link {
+  color: var(--color-primary);
   text-decoration: none;
-  font-weight: 600;
-  transition: all 0.2s ease;
+  font-weight: var(--font-weight-semibold);
+  transition: all var(--transition-base);
 }
 
-.forgot-password:hover {
-  color: #764ba2;
+.forgot-link:hover {
+  color: var(--color-primary-dark);
   text-decoration: underline;
 }
 
 /* ============================================
-   SUBMIT BUTTON
+   BUTTON ENHANCEMENTS
    ============================================ */
-.btn-primary {
+.btn-modern-large {
   width: 100%;
-  padding: 1.125rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border: none;
-  border-radius: 1rem;
-  font-size: 1rem;
-  font-weight: 700;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 52px;
-}
-
-.btn-primary:hover:not(:disabled) {
-  transform: translateY(-3px);
-  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
-}
-
-.btn-primary:active:not(:disabled) {
-  transform: translateY(-1px);
-}
-
-.btn-primary:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-  transform: none;
+  padding: 16px 32px;
+  font-size: var(--font-size-lg);
+  min-height: 56px;
 }
 
 .loading-content {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: var(--spacing-sm);
 }
 
 .spinner {
-  width: 20px;
-  height: 20px;
+  width: 22px;
+  height: 22px;
   animation: spin 1s linear infinite;
 }
 
 /* ============================================
-   ERROR MESSAGE
+   INFO BOXES
    ============================================ */
-.error-message {
+.info-box {
   display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem;
-  background: #fef2f2;
-  border: 2px solid #fecaca;
-  border-radius: 1rem;
-  color: #dc2626;
-  animation: slideInError 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  align-items: flex-start;
+  gap: var(--spacing-md);
 }
 
-.error-message svg {
-  width: 24px;
-  height: 24px;
+.info-box svg {
+  width: 20px;
+  height: 20px;
   flex-shrink: 0;
-}
-
-.error-title {
-  margin: 0 0 0.25rem 0;
-  font-weight: 600;
-  font-size: 0.95rem;
-}
-
-.error-text {
-  margin: 0;
-  font-size: 0.85rem;
-  opacity: 0.9;
+  margin-top: 2px;
 }
 
 /* ============================================
    DIVIDER
    ============================================ */
-.divider {
+.auth-divider {
   position: relative;
   text-align: center;
-  margin: 1.5rem 0;
+  margin: var(--spacing-2xl) 0 var(--spacing-xl) 0;
 }
 
-.divider::before {
+.auth-divider::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 0;
   right: 0;
-  height: 1px;
-  background: #e5e7eb;
+  height: 2px;
+  background: var(--color-divider);
 }
 
-.divider span {
+.auth-divider span {
   position: relative;
-  background: white;
-  padding: 0 1rem;
-  color: #9ca3af;
-  font-size: 0.9rem;
-  font-weight: 500;
+  background: var(--color-surface);
+  padding: 0 var(--spacing-lg);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
 }
 
 /* ============================================
-   SIGNUP SECTION
+   AUTH FOOTER
    ============================================ */
-.signup-section {
+.auth-footer {
   text-align: center;
 }
 
-.signup-section p {
-  margin: 0 0 0.75rem 0;
-  color: #6b7280;
-  font-size: 0.95rem;
+.auth-footer p {
+  margin: 0 0 var(--spacing-md) 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-relaxed);
 }
 
-.signup-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: #667eea;
-  text-decoration: none;
-  font-weight: 700;
-  transition: all 0.2s ease;
-}
-
-.signup-link svg {
-  width: 16px;
-  height: 16px;
-  transition: all 0.2s ease;
-}
-
-.signup-link:hover {
-  color: #764ba2;
-  gap: 0.75rem;
+.auth-footer .btn-modern {
+  width: 100%;
 }
 
 /* ============================================
@@ -532,7 +467,7 @@ input::placeholder {
 
 .decoration-blob {
   position: absolute;
-  border-radius: 50%;
+  border-radius: var(--radius-full);
   background: rgba(255, 255, 255, 0.1);
   animation: float 8s ease-in-out infinite;
 }
@@ -566,23 +501,22 @@ input::placeholder {
    ============================================ */
 .bottom-link {
   position: absolute;
-  bottom: 2rem;
+  bottom: var(--spacing-2xl);
   left: 50%;
   transform: translateX(-50%);
   z-index: 10;
 }
 
-.bottom-link a {
+.bottom-link .btn-modern {
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(10px);
   color: white;
-  text-decoration: none;
-  font-weight: 500;
-  transition: all 0.2s ease;
-  opacity: 0.8;
+  border: 1px solid rgba(255, 255, 255, 0.3);
 }
 
-.bottom-link a:hover {
-  opacity: 1;
-  text-decoration: underline;
+.bottom-link .btn-modern:hover {
+  background: rgba(255, 255, 255, 0.25);
+  border-color: rgba(255, 255, 255, 0.5);
 }
 
 /* ============================================
@@ -642,17 +576,6 @@ input::placeholder {
   }
 }
 
-@keyframes slideInError {
-  from {
-    transform: translateX(-20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
 @keyframes spin {
   from {
     transform: rotate(0deg);
@@ -676,81 +599,39 @@ input::placeholder {
    ============================================ */
 @media (max-width: 640px) {
   .login-container {
-    padding: 1rem;
+    padding: var(--spacing-md);
   }
 
-  .login-card {
-    padding: 2rem;
-    border-radius: 1.5rem;
+  .auth-card {
+    padding: var(--spacing-xl);
   }
 
-  .card-header {
-    margin-bottom: 1.5rem;
+  .auth-header {
+    margin-bottom: var(--spacing-lg);
   }
 
   .logo-wrapper {
     width: 64px;
     height: 64px;
-    margin-bottom: 1rem;
-    padding: 1rem;
+    margin-bottom: var(--spacing-md);
+    padding: var(--spacing-md);
   }
 
   h1 {
-    font-size: 1.75rem;
+    font-size: var(--font-size-3xl);
   }
 
   .subtitle {
-    font-size: 0.9rem;
-  }
-
-  .login-form {
-    gap: 1.25rem;
+    font-size: var(--font-size-sm);
   }
 
   .form-options {
     flex-direction: column;
-    gap: 1rem;
     align-items: flex-start;
   }
 
-  .remember-me {
-    width: 100%;
-  }
-
-  .forgot-password {
-    width: 100%;
-    text-align: center;
-  }
-
-  input {
-    padding: 0.875rem 0.875rem 0.875rem 2.75rem;
-    font-size: 16px;
-  }
-
-  .input-icon {
-    left: 0.75rem;
-  }
-
-  .password-toggle {
-    right: 0.75rem;
-  }
-
-  .error-message {
-    flex-direction: column;
-    text-align: center;
-  }
-
-  .divider {
-    margin: 1.25rem 0;
-  }
-
-  .divider::before {
-    left: -50px;
-    right: -50px;
-  }
-
-  .signup-section p {
-    font-size: 0.9rem;
+  .auth-divider {
+    margin: var(--spacing-xl) 0 var(--spacing-md) 0;
   }
 
   .blob-1 {
@@ -769,18 +650,17 @@ input::placeholder {
   }
 
   .bottom-link a {
-    font-size: 0.9rem;
+    font-size: var(--font-size-sm);
   }
 }
 
 @media (max-width: 480px) {
-  .login-card {
-    padding: 1.5rem;
-    border-radius: 1.25rem;
+  .auth-card {
+    padding: var(--spacing-lg);
   }
 
-  .card-header {
-    margin-bottom: 1.25rem;
+  .auth-header {
+    margin-bottom: var(--spacing-md);
   }
 
   .logo-wrapper {
@@ -789,87 +669,26 @@ input::placeholder {
   }
 
   h1 {
-    font-size: 1.5rem;
+    font-size: var(--font-size-2xl);
   }
 
   .subtitle {
-    font-size: 0.85rem;
-  }
-
-  label {
-    font-size: 0.9rem;
-  }
-
-  .btn-primary {
-    padding: 1rem;
-    font-size: 0.95rem;
-  }
-
-  .form-options {
-    font-size: 0.85rem;
-  }
-
-  .remember-me,
-  .forgot-password {
-    font-size: 0.85rem;
-  }
-
-  .divider span {
-    font-size: 0.85rem;
-    padding: 0 0.75rem;
-  }
-
-  .signup-section p {
-    margin-bottom: 0.5rem;
-  }
-
-  .signup-link {
-    font-size: 0.9rem;
-  }
-
-  .error-message {
-    gap: 0.75rem;
-    padding: 0.75rem;
-  }
-
-  .error-message svg {
-    width: 20px;
-    height: 20px;
-  }
-
-  .error-title {
-    font-size: 0.9rem;
-  }
-
-  .error-text {
-    font-size: 0.8rem;
+    font-size: var(--font-size-sm);
   }
 
   .bottom-link {
-    bottom: 1rem;
-  }
-
-  .bottom-link a {
-    font-size: 0.85rem;
+    bottom: var(--spacing-md);
   }
 }
 
 /* Accessibility */
 @media (prefers-reduced-motion: reduce) {
-  .login-card,
+  .auth-card,
   .logo-wrapper,
   h1,
   .subtitle,
-  .login-form,
-  .error-message,
   .decoration-blob {
     animation: none;
   }
-
-  input:focus,
-  .btn-primary:hover,
-  .password-toggle:hover {
-    transform: none;
-  }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/UserProfile.vue b/src/components/UserProfile.vue
index 5c875cf..ade33ff 100644
--- a/src/components/UserProfile.vue
+++ b/src/components/UserProfile.vue
@@ -6,9 +6,11 @@
     <!-- Profile Content -->
     <div class="profile-content">
       <!-- Page Header -->
-      <div class="page-header">
-        <h2>Profile Settings</h2>
-        <p class="page-description">Manage your personal information and training metrics</p>
+      <div class="section-header">
+        <div>
+          <h2 class="section-title">Profile Settings</h2>
+          <p class="section-description">Manage your personal information and training metrics</p>
+        </div>
       </div>
 
       <!-- Profile Tabs -->
@@ -33,152 +35,269 @@
 
       <!-- Personal Info Tab -->
       <div v-if="activeTab === 'personal'" class="tab-content">
-        <form @submit.prevent="handleUpdateProfile" class="profile-form">
-          <div class="form-section">
-            <h3>Personal Information</h3>
-            
-            <div class="form-row">
-              <div class="form-group">
-                <label>First Name</label>
-                <input v-model="form.first_name" type="text" placeholder="Your first name" />
-              </div>
-              <div class="form-group">
-                <label>Last Name</label>
-                <input v-model="form.last_name" type="text" placeholder="Your last name" />
-              </div>
-            </div>
-
-            <div class="form-group">
-              <label>Bio</label>
-              <textarea
-                v-model="form.bio"
-                placeholder="Tell us about yourself..."
-                rows="4"
-              ></textarea>
-            </div>
-
-            <div class="form-row">
-              <div class="form-group">
-                <label>Email</label>
-                <input v-model="form.email" type="email" disabled class="disabled-input" />
-                <small>Email cannot be changed</small>
-              </div>
-              <div class="form-group">
-                <label>Weight (kg)</label>
-                <input v-model.number="form.weight" type="number" step="0.1" placeholder="0" />
-              </div>
+        <div class="card-modern">
+          <div class="card-modern-header">
+            <div>
+              <h3 class="card-modern-title">Personal Information</h3>
+              <p class="card-modern-subtitle">Update your personal details</p>
             </div>
           </div>
 
-          <div class="form-actions">
-            <button type="submit" :disabled="loading" class="btn-primary">
-              <span v-if="loading">
-                <svg class="spinner" viewBox="0 0 24 24">
+          <form @submit.prevent="handleUpdateProfile" class="form-modern">
+            <div class="form-row">
+              <div class="form-group-modern">
+                <label class="form-label-modern">First Name</label>
+                <input
+                  v-model="form.first_name"
+                  type="text"
+                  class="form-input-modern"
+                  placeholder="Enter your first name"
+                />
+                <span class="form-helper-text">Your given name</span>
+              </div>
+              <div class="form-group-modern">
+                <label class="form-label-modern">Last Name</label>
+                <input
+                  v-model="form.last_name"
+                  type="text"
+                  class="form-input-modern"
+                  placeholder="Enter your last name"
+                />
+                <span class="form-helper-text">Your family name</span>
+              </div>
+            </div>
+
+            <div class="form-group-modern">
+              <label class="form-label-modern">Bio</label>
+              <textarea
+                v-model="form.bio"
+                class="form-input-modern"
+                placeholder="Tell us about yourself and your cycling goals..."
+                rows="4"
+              ></textarea>
+              <span class="form-helper-text">Share your cycling experience, goals, or achievements</span>
+            </div>
+
+            <div class="form-row">
+              <div class="form-group-modern">
+                <label class="form-label-modern">Email Address</label>
+                <input
+                  v-model="form.email"
+                  type="email"
+                  disabled
+                  class="form-input-modern"
+                />
+                <span class="form-helper-text">Email cannot be changed for security reasons</span>
+              </div>
+              <div class="form-group-modern">
+                <label class="form-label-modern">Weight (kg)</label>
+                <input
+                  v-model.number="form.weight"
+                  type="number"
+                  step="0.1"
+                  class="form-input-modern"
+                  placeholder="70.0"
+                />
+                <span class="form-helper-text">Used for power-to-weight ratio calculations</span>
+              </div>
+            </div>
+
+            <div class="form-actions">
+              <button type="submit" :disabled="loading" class="btn-modern btn-modern-primary btn-modern-large">
+                <svg v-if="loading" class="spinner" viewBox="0 0 24 24" width="20" height="20">
                   <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" opacity="0.25"/>
                   <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" stroke-dasharray="31.416" stroke-dashoffset="31.416" opacity="0.75"/>
                 </svg>
-                Saving...
-              </span>
-              <span v-else>Save Changes</span>
-            </button>
-          </div>
-        </form>
+                <span v-if="loading">Saving Changes...</span>
+                <span v-else>
+                  <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
+                    <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" stroke="currentColor" stroke-width="2"/>
+                    <polyline points="17 21 17 13 7 13 7 21" stroke="currentColor" stroke-width="2"/>
+                    <polyline points="7 3 7 8 15 8" stroke="currentColor" stroke-width="2"/>
+                  </svg>
+                  Save Personal Info
+                </span>
+              </button>
+            </div>
+          </form>
+        </div>
       </div>
 
       <!-- Training Metrics Tab -->
       <div v-if="activeTab === 'metrics'" class="tab-content">
-        <form @submit.prevent="handleUpdateProfile" class="profile-form">
-          <div class="form-section">
-            <h3>Training Metrics</h3>
-            <p class="section-description">These metrics are used to calculate your training zones</p>
-            
-            <div class="metrics-grid">
-              <div class="metric-card">
-                <div class="metric-icon ftp">
-                  <svg viewBox="0 0 24 24" fill="none">
+        <div class="card-modern">
+          <div class="card-modern-header">
+            <div>
+              <h3 class="card-modern-title">Training Metrics</h3>
+              <p class="card-modern-subtitle">Configure your training zones and thresholds</p>
+            </div>
+          </div>
+
+          <!-- Current Metrics Display -->
+          <div v-if="form.ftp > 0 || form.max_hr > 0" class="metrics-display">
+            <div class="metric-card" v-if="form.ftp > 0">
+              <div class="metric-icon-wrapper">
+                <div class="icon-badge icon-badge-power">
+                  <svg viewBox="0 0 24 24" fill="none" width="24" height="24">
                     <polygon points="13,2 3,14 12,14 11,22 21,10 12,10 13,2" stroke="currentColor" stroke-width="2" fill="none"/>
                   </svg>
                 </div>
-                <div class="metric-info">
-                  <label>Functional Threshold Power (FTP)</label>
-                  <input v-model.number="form.ftp" type="number" step="1" placeholder="0" />
-                  <small>Your average power (watts) for a 20-minute max effort</small>
-                </div>
               </div>
+              <div class="metric-label">Current FTP</div>
+              <div class="metric-value">{{ form.ftp }}W</div>
+              <div class="metric-change positive" v-if="form.weight > 0">
+                {{ (form.ftp / form.weight).toFixed(2) }} W/kg
+              </div>
+            </div>
 
-              <div class="metric-card">
-                <div class="metric-icon hr">
-                  <svg viewBox="0 0 24 24" fill="none">
+            <div class="metric-card" v-if="form.max_hr > 0">
+              <div class="metric-icon-wrapper">
+                <div class="icon-badge icon-badge-hr">
+                  <svg viewBox="0 0 24 24" fill="none" width="24" height="24">
                     <path d="M20.84 4.61C19.32 3.09 17.35 2.25 15.3 2.25C13.74 2.25 12.26 2.83 11.1 3.9C9.94 2.83 8.46 2.25 6.9 2.25C4.85 2.25 2.88 3.09 1.36 4.61C-0.64 6.61 -0.45 9.96 1.92 12.75L11.1 23.1L20.28 12.75C22.65 9.96 22.84 6.61 20.84 4.61Z" fill="currentColor"/>
                   </svg>
                 </div>
-                <div class="metric-info">
-                  <label>Maximum Heart Rate</label>
-                  <input v-model.number="form.max_hr" type="number" step="1" placeholder="0" />
-                  <small>Your maximum beats per minute during intense effort</small>
-                </div>
               </div>
+              <div class="metric-label">Max Heart Rate</div>
+              <div class="metric-value">{{ form.max_hr }} bpm</div>
+              <div class="metric-change positive" v-if="form.resting_hr > 0">
+                Reserve: {{ form.max_hr - form.resting_hr }} bpm
+              </div>
+            </div>
 
-              <div class="metric-card">
-                <div class="metric-icon rhr">
-                  <svg viewBox="0 0 24 24" fill="none">
+            <div class="metric-card" v-if="form.resting_hr > 0">
+              <div class="metric-icon-wrapper">
+                <div class="icon-badge icon-badge-rhr">
+                  <svg viewBox="0 0 24 24" fill="none" width="24" height="24">
                     <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                     <path d="M12 7V12L15 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                   </svg>
                 </div>
-                <div class="metric-info">
-                  <label>Resting Heart Rate</label>
-                  <input v-model.number="form.resting_hr" type="number" step="1" placeholder="0" />
-                  <small>Your heart rate when you first wake up</small>
-                </div>
+              </div>
+              <div class="metric-label">Resting HR</div>
+              <div class="metric-value">{{ form.resting_hr }} bpm</div>
+              <div class="metric-change positive">
+                Measured at rest
               </div>
             </div>
           </div>
 
-          <div class="info-box">
-            <svg viewBox="0 0 24 24" fill="none">
-              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-              <line x1="12" y1="8" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-              <line x1="12" y1="16" x2="12.01" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-            </svg>
-            <div>
-              <p><strong>How to test your FTP:</strong> Perform a 20-minute max effort on the bike with a power meter, then subtract 5% from the average power.</p>
-              <p><strong>How to find your Max HR:</strong> Do a very hard 5-minute effort followed by 3-minute sprint intervals while monitoring your heart rate.</p>
+          <!-- Empty State -->
+          <div v-else class="empty-state-modern">
+            <div class="empty-state-icon">
+              <svg viewBox="0 0 24 24" fill="none" width="64" height="64">
+                <polyline points="22,12 18,12 15,21 9,3 6,12 2,12" stroke="currentColor" stroke-width="2" fill="none"/>
+              </svg>
             </div>
+            <h4 class="empty-state-title">No Metrics Set</h4>
+            <p class="empty-state-description">
+              Add your training metrics below to unlock personalized training zones and better insights into your performance.
+            </p>
           </div>
 
-          <div class="form-actions">
-            <button type="submit" :disabled="loading" class="btn-primary">
-              <span v-if="loading">
-                <svg class="spinner" viewBox="0 0 24 24">
+          <!-- Metrics Form -->
+          <form @submit.prevent="handleUpdateProfile" class="form-modern" style="margin-top: var(--spacing-xl);">
+            <div class="form-group-modern">
+              <label class="form-label-modern">
+                <svg viewBox="0 0 24 24" fill="none" width="18" height="18" style="display: inline-block; vertical-align: middle; margin-right: 8px;">
+                  <polygon points="13,2 3,14 12,14 11,22 21,10 12,10 13,2" stroke="currentColor" stroke-width="2" fill="none"/>
+                </svg>
+                Functional Threshold Power (FTP)
+              </label>
+              <input
+                v-model.number="form.ftp"
+                type="number"
+                step="1"
+                class="form-input-modern"
+                placeholder="250"
+              />
+              <span class="form-helper-text">The average power (in watts) you can sustain for one hour. Typically measured with a 20-minute test and multiplied by 0.95.</span>
+            </div>
+
+            <div class="form-group-modern">
+              <label class="form-label-modern">
+                <svg viewBox="0 0 24 24" fill="none" width="18" height="18" style="display: inline-block; vertical-align: middle; margin-right: 8px;">
+                  <path d="M20.84 4.61C19.32 3.09 17.35 2.25 15.3 2.25C13.74 2.25 12.26 2.83 11.1 3.9C9.94 2.83 8.46 2.25 6.9 2.25C4.85 2.25 2.88 3.09 1.36 4.61C-0.64 6.61 -0.45 9.96 1.92 12.75L11.1 23.1L20.28 12.75C22.65 9.96 22.84 6.61 20.84 4.61Z" fill="currentColor"/>
+                </svg>
+                Maximum Heart Rate
+              </label>
+              <input
+                v-model.number="form.max_hr"
+                type="number"
+                step="1"
+                class="form-input-modern"
+                placeholder="185"
+              />
+              <span class="form-helper-text">Your highest heart rate achieved during maximum effort. Best measured during a hard 5-minute climb or interval session.</span>
+            </div>
+
+            <div class="form-group-modern">
+              <label class="form-label-modern">
+                <svg viewBox="0 0 24 24" fill="none" width="18" height="18" style="display: inline-block; vertical-align: middle; margin-right: 8px;">
+                  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                  <path d="M12 7V12L15 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                </svg>
+                Resting Heart Rate
+              </label>
+              <input
+                v-model.number="form.resting_hr"
+                type="number"
+                step="1"
+                class="form-input-modern"
+                placeholder="60"
+              />
+              <span class="form-helper-text">Measure your heart rate immediately after waking up, while still lying in bed, for the most accurate reading.</span>
+            </div>
+
+            <div class="info-box info-box-info">
+              <svg viewBox="0 0 24 24" fill="none" width="20" height="20" style="flex-shrink: 0;">
+                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                <line x1="12" y1="8" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                <line x1="12" y1="16" x2="12.01" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              </svg>
+              <div>
+                <p style="margin: 0;"><strong>Testing Tips:</strong> For best results, perform FTP and Max HR tests when well-rested and properly fueled. Retest every 4-6 weeks to track improvements and adjust your training zones.</p>
+              </div>
+            </div>
+
+            <div class="form-actions">
+              <button type="submit" :disabled="loading" class="btn-modern btn-modern-primary btn-modern-large">
+                <svg v-if="loading" class="spinner" viewBox="0 0 24 24" width="20" height="20">
                   <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" opacity="0.25"/>
                   <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" stroke-dasharray="31.416" stroke-dashoffset="31.416" opacity="0.75"/>
                 </svg>
-                Saving...
-              </span>
-              <span v-else>Save Metrics</span>
-            </button>
-          </div>
-        </form>
+                <span v-if="loading">Saving Metrics...</span>
+                <span v-else>
+                  <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
+                    <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" stroke="currentColor" stroke-width="2"/>
+                    <polyline points="17 21 17 13 7 13 7 21" stroke="currentColor" stroke-width="2"/>
+                    <polyline points="7 3 7 8 15 8" stroke="currentColor" stroke-width="2"/>
+                  </svg>
+                  Save Training Metrics
+                </span>
+              </button>
+            </div>
+          </form>
+        </div>
       </div>
 
       <!-- Success Message -->
       <div v-if="successMessage" class="success-message" @click="successMessage = ''">
-        <svg viewBox="0 0 24 24" fill="none">
+        <svg viewBox="0 0 24 24" fill="none" width="24" height="24">
           <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
           <path d="m9 12 2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
-        {{ successMessage }}
+        <span>{{ successMessage }}</span>
       </div>
 
       <!-- Error Message -->
       <div v-if="error" class="error-message" @click="error = ''">
-        <svg viewBox="0 0 24 24" fill="none">
+        <svg viewBox="0 0 24 24" fill="none" width="24" height="24">
           <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
           <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
           <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
         </svg>
-        {{ error }}
+        <span>{{ error }}</span>
       </div>
     </div>
   </div>
@@ -277,7 +396,7 @@ async function handleUpdateProfile() {
 <style scoped>
 .profile-page {
   min-height: 100vh;
-  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  background: linear-gradient(135deg, var(--color-background) 0%, #f1f5f9 100%);
 }
 
 /* ============================================
@@ -286,29 +405,11 @@ async function handleUpdateProfile() {
 .profile-content {
   max-width: 1000px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: var(--spacing-xl);
 }
 
-.page-header {
-  margin-bottom: 2rem;
-  animation: slideInDown 0.6s ease-out;
-}
-
-.page-header h2 {
-  margin: 0 0 0.5rem 0;
-  font-size: 2rem;
-  font-weight: 800;
-  background: linear-gradient(135deg, #1f2937 0%, #4b5563 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.page-description {
-  margin: 0;
-  font-size: 1.1rem;
-  color: #6b7280;
-  font-weight: 500;
+.profile-content .section-header {
+  animation: slideInDown var(--transition-slower) ease-out;
 }
 
 /* ============================================
@@ -316,462 +417,241 @@ async function handleUpdateProfile() {
    ============================================ */
 .profile-tabs {
   display: flex;
-  gap: 0.5rem;
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(20px);
-  border-radius: 1.5rem;
-  padding: 0.5rem;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  margin-bottom: 2rem;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  gap: var(--spacing-sm);
+  background: var(--color-surface);
+  border-radius: 12px;
+  padding: 6px;
+  border: 1px solid var(--color-border);
+  margin-bottom: var(--spacing-xl);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
 .tab-button {
+  flex: 1;
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1.5rem;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  padding: 12px 24px;
   background: none;
-  border: 2px solid transparent;
-  border-radius: 1rem;
-  color: #6b7280;
-  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-semibold);
   cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--transition-base);
   white-space: nowrap;
 }
 
 .tab-button svg {
-  width: 18px;
-  height: 18px;
+  width: 20px;
+  height: 20px;
 }
 
-.tab-button:hover {
-  background: rgba(248, 250, 252, 0.5);
-  color: #667eea;
+.tab-button:hover:not(.active) {
+  background: var(--color-surface-hover);
+  color: var(--color-primary);
 }
 
 .tab-button.active {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: var(--color-primary);
   color: white;
-  border-color: rgba(102, 126, 234, 0.2);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.3);
 }
 
 /* ============================================
    TAB CONTENT
    ============================================ */
 .tab-content {
-  animation: fadeIn 0.3s ease;
-}
-
-.profile-form {
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(20px);
-  border-radius: 1.5rem;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-  padding: 2rem;
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-}
-
-.form-section {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.form-section h3 {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: #1f2937;
-}
-
-.section-description {
-  margin: 0;
-  color: #6b7280;
-  font-size: 0.95rem;
+  animation: fadeIn var(--transition-base) ease;
 }
 
 .form-row {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: var(--spacing-lg);
 }
 
-.form-group {
+.form-actions {
   display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
+  gap: var(--spacing-md);
+  justify-content: flex-end;
+  padding-top: var(--spacing-lg);
+  border-top: 2px solid var(--color-divider);
+  margin-top: var(--spacing-lg);
 }
 
-label {
-  font-weight: 600;
-  color: #374151;
-  font-size: 0.95rem;
-}
-
-input,
-textarea {
-  padding: 0.875rem;
-  border: 2px solid #e5e7eb;
-  border-radius: 1rem;
-  font-size: 1rem;
-  font-family: inherit;
-  transition: all 0.3s ease;
-  background: white;
-}
-
-input:focus,
-textarea:focus {
-  outline: none;
-  border-color: #667eea;
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-  transform: translateY(-2px);
-}
-
-input:disabled,
-.disabled-input {
-  background: #f3f4f6;
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-textarea {
+textarea.form-input-modern {
   resize: vertical;
   min-height: 100px;
-}
-
-small {
-  font-size: 0.8rem;
-  color: #6b7280;
+  font-family: inherit;
 }
 
 /* ============================================
-   METRICS GRID
+   METRICS DISPLAY
    ============================================ */
-.metrics-grid {
+.metrics-display {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 1.5rem;
-  margin-top: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: var(--spacing-lg);
+  margin-bottom: var(--spacing-xl);
 }
 
-.metric-card {
-  display: flex;
-  gap: 1rem;
-  padding: 1.5rem;
-  background: rgba(248, 250, 252, 0.5);
-  border: 2px solid rgba(102, 126, 234, 0.1);
-  border-radius: 1.25rem;
-  transition: all 0.3s ease;
+.metric-icon-wrapper {
+  margin-bottom: var(--spacing-sm);
 }
 
-.metric-card:hover {
-  background: rgba(248, 250, 252, 1);
-  border-color: rgba(102, 126, 234, 0.2);
-  transform: translateY(-2px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+.icon-badge-power {
+  background: var(--gradient-primary);
 }
 
-.metric-icon {
-  width: 56px;
-  height: 56px;
-  border-radius: 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: white;
+.icon-badge-hr {
+  background: linear-gradient(135deg, #ef4444, #dc2626);
 }
 
-.metric-icon.ftp {
-  background: linear-gradient(135deg, #667eea, #764ba2);
-}
-
-.metric-icon.hr {
-  background: linear-gradient(135deg, #f59e0b, #d97706);
-}
-
-.metric-icon.rhr {
-  background: linear-gradient(135deg, #10b981, #059669);
-}
-
-.metric-icon svg {
-  width: 28px;
-  height: 28px;
-}
-
-.metric-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.metric-info label {
-  margin: 0;
-}
-
-.metric-info input {
-  padding: 0.75rem;
-  border: 2px solid #e5e7eb;
-  border-radius: 0.75rem;
-  font-size: 0.95rem;
+.icon-badge-rhr {
+  background: var(--gradient-secondary);
 }
 
 /* ============================================
-   INFO BOX
+   INFO BOX OVERRIDES
    ============================================ */
 .info-box {
   display: flex;
-  gap: 1rem;
-  padding: 1.5rem;
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
-  border: 2px solid rgba(102, 126, 234, 0.1);
-  border-radius: 1.25rem;
+  gap: var(--spacing-md);
 }
 
-.info-box svg {
-  width: 24px;
-  height: 24px;
-  color: #667eea;
-  flex-shrink: 0;
-  margin-top: 2px;
-}
-
-.info-box p {
-  margin: 0 0 0.75rem 0;
-  color: #4b5563;
-  font-size: 0.9rem;
-  line-height: 1.6;
-}
-
-.info-box p:last-child {
-  margin-bottom: 0;
-}
-
-.info-box strong {
-  color: #1f2937;
+.info-box p strong {
+  color: var(--color-text-primary);
 }
 
 /* ============================================
-   FORM ACTIONS
+   SPINNER ANIMATION
    ============================================ */
-.form-actions {
-  display: flex;
-  gap: 1rem;
-  justify-content: flex-end;
-  padding-top: 1rem;
-  border-top: 2px solid rgba(0, 0, 0, 0.05);
-}
-
-.btn-primary {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 1rem 2rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border: none;
-  border-radius: 1rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-}
-
-.btn-primary:hover:not(:disabled) {
-  transform: translateY(-3px);
-  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
-}
-
-.btn-primary:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-  transform: none;
-}
-
 .spinner {
-  width: 16px;
-  height: 16px;
   animation: spin 1s linear infinite;
 }
 
 /* ============================================
-   MESSAGES
+   TOAST MESSAGES
    ============================================ */
 .success-message {
   position: fixed;
-  top: 2rem;
-  right: 2rem;
+  top: 80px;
+  right: var(--spacing-xl);
   display: flex;
   align-items: center;
-  gap: 1rem;
-  padding: 1rem 1.5rem;
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  gap: var(--spacing-md);
+  padding: 16px 24px;
+  background: var(--color-secondary);
   color: white;
-  border-radius: 1rem;
-  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
-  animation: slideInDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 200, 83, 0.4);
+  animation: slideInRight 0.3s ease-out;
   z-index: 1000;
   cursor: pointer;
+  font-weight: var(--font-weight-semibold);
+  max-width: 400px;
 }
 
 .success-message svg {
-  width: 24px;
-  height: 24px;
   flex-shrink: 0;
 }
 
+.success-message:hover {
+  box-shadow: 0 8px 32px rgba(0, 200, 83, 0.5);
+}
+
 .error-message {
   position: fixed;
-  top: 2rem;
-  right: 2rem;
+  top: 80px;
+  right: var(--spacing-xl);
   display: flex;
   align-items: center;
-  gap: 1rem;
-  padding: 1rem 1.5rem;
-  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  gap: var(--spacing-md);
+  padding: 16px 24px;
+  background: var(--color-danger);
   color: white;
-  border-radius: 1rem;
-  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
-  animation: slideInDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(230, 57, 70, 0.4);
+  animation: slideInRight 0.3s ease-out;
   z-index: 1000;
   cursor: pointer;
+  font-weight: var(--font-weight-semibold);
+  max-width: 400px;
 }
 
 .error-message svg {
-  width: 24px;
-  height: 24px;
   flex-shrink: 0;
 }
 
+.error-message:hover {
+  box-shadow: 0 8px 32px rgba(230, 57, 70, 0.5);
+}
+
 /* ============================================
    RESPONSIVE DESIGN
    ============================================ */
-@media (max-width: 1024px) {
-  .metrics-grid {
-    grid-template-columns: 1fr;
+@media (max-width: 768px) {
+  .profile-content {
+    padding: var(--spacing-md);
   }
 
   .form-row {
     grid-template-columns: 1fr;
   }
 
-  .form-actions {
-    justify-content: center;
-  }
-}
-
-@media (max-width: 768px) {
-  .profile-content {
-    padding: 1rem;
-  }
-
-  .profile-tabs {
-    flex-wrap: wrap;
-  }
-
-  .tab-button {
-    flex: 1;
-    min-width: 150px;
-  }
-
-  .profile-form {
-    padding: 1.5rem;
-  }
-
-  .page-header h2 {
-    font-size: 1.75rem;
+  .metrics-display {
+    grid-template-columns: 1fr;
   }
 
   .form-actions {
     flex-direction: column;
   }
 
-  .btn-primary {
+  .form-actions .btn-modern {
     width: 100%;
-    justify-content: center;
   }
 
   .info-box {
     flex-direction: column;
   }
 
-  .info-box svg {
-    margin-top: 0;
-  }
-
   .success-message,
   .error-message {
-    right: 1rem;
-    left: 1rem;
+    right: var(--spacing-md);
+    left: var(--spacing-md);
+    max-width: none;
   }
 }
 
 @media (max-width: 640px) {
-  .page-header h2 {
-    font-size: 1.5rem;
-  }
-
   .profile-tabs {
-    gap: 0.25rem;
-    padding: 0.25rem;
+    gap: 4px;
+    padding: 4px;
   }
 
   .tab-button {
-    padding: 0.5rem 1rem;
-    font-size: 0.9rem;
+    padding: 10px 16px;
+    font-size: var(--font-size-sm);
   }
 
-  .profile-form {
-    padding: 1.25rem;
+  .tab-button span {
+    display: none;
   }
 
-  .form-section h3 {
-    font-size: 1.1rem;
+  .tab-button svg {
+    margin: 0;
   }
 
-  .metrics-grid {
-    gap: 1rem;
-  }
-
-  .metric-card {
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    gap: 0.75rem;
-  }
-
-  .metric-icon {
-    width: 48px;
-    height: 48px;
-  }
-
-  .metric-icon svg {
-    width: 24px;
-    height: 24px;
-  }
-
-  .form-group label {
-    font-size: 0.9rem;
-  }
-
-  input,
-  textarea {
-    padding: 0.75rem;
-    font-size: 16px;
+  .card-modern {
+    padding: var(--spacing-lg);
   }
 
   .success-message,
   .error-message {
-    gap: 0.75rem;
-    padding: 0.875rem 1rem;
-    font-size: 0.9rem;
+    padding: 12px 16px;
+    font-size: var(--font-size-sm);
   }
 }
 
@@ -800,6 +680,17 @@ small {
   }
 }
 
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
 @keyframes spin {
   from {
     transform: rotate(0deg);
@@ -809,81 +700,8 @@ small {
   }
 }
 
-@keyframes slideInDown {
-  from {
-    transform: translateY(-20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
 /* Dark Mode Support */
 :global(.dark) .profile-page {
-  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
-}
-
-:global(.dark) .profile-form,
-:global(.dark) .profile-tabs {
-  background: rgba(30, 41, 59, 0.7);
-  border-color: rgba(148, 163, 184, 0.1);
-}
-
-:global(.dark) .tab-button {
-  color: #94a3b8;
-}
-
-:global(.dark) .tab-button.active {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-}
-
-:global(.dark) .page-header h2 {
-  color: #f1f5f9;
-}
-
-:global(.dark) .form-section h3 {
-  color: #f1f5f9;
-}
-
-:global(.dark) input,
-:global(.dark) textarea {
-  background: rgba(51, 65, 85, 0.5);
-  border-color: rgba(148, 163, 184, 0.2);
-  color: #f1f5f9;
-}
-
-:global(.dark) input:focus,
-:global(.dark) textarea:focus {
-  border-color: #667eea;
-}
-
-:global(.dark) input:disabled {
-  background: rgba(51, 65, 85, 0.3);
-}
-
-:global(.dark) .metric-card {
-  background: rgba(51, 65, 85, 0.5);
-  border-color: rgba(102, 126, 234, 0.1);
-}
-
-:global(.dark) .metric-card:hover {
-  background: rgba(51, 65, 85, 0.7);
-  border-color: rgba(102, 126, 234, 0.2);
-}
-
-:global(.dark) .info-box {
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
-  border-color: rgba(102, 126, 234, 0.2);
-}
-
-:global(.dark) .info-box p {
-  color: #cbd5e1;
-}
-
-:global(.dark) label {
-  color: #e2e8f0;
+  background: linear-gradient(135deg, var(--color-background) 0%, #1e293b 100%);
 }
 </style>
\ No newline at end of file
diff --git a/src/components/UserSignup.vue b/src/components/UserSignup.vue
index 66eef42..fd3e060 100644
--- a/src/components/UserSignup.vue
+++ b/src/components/UserSignup.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="signup-container">
-    <div class="signup-card">
-      <div class="card-header">
+    <div class="card-modern auth-card">
+      <div class="auth-header">
         <div class="logo-wrapper">
           <svg viewBox="0 0 24 24" fill="none">
             <path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
@@ -10,69 +10,86 @@
           </svg>
         </div>
         <h1>Join RideAware</h1>
-        <p class="subtitle">Train with Focus. Ride with Awareness.</p>
+        <p class="subtitle">Start tracking your training today. Create your free account in seconds.</p>
       </div>
 
-      <form @submit.prevent="handleSignup" class="signup-form">
+      <form @submit.prevent="handleSignup" class="form-modern">
         <!-- Username Field -->
-        <div class="form-group">
-          <label for="username">Username *</label>
-          <div class="input-wrapper">
-            <input
-              id="username"
-              v-model="form.username"
-              type="text"
-              placeholder="Choose your username"
-              required
-              :disabled="auth.loading"
-              autocomplete="username"
-            />
-            <svg class="input-icon" viewBox="0 0 24 24" fill="none">
+        <div class="form-group-modern">
+          <label for="username" class="form-label-modern">
+            <svg class="label-icon" viewBox="0 0 24 24" fill="none">
               <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
               <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
             </svg>
-          </div>
+            Username *
+          </label>
+          <input
+            id="username"
+            v-model="form.username"
+            type="text"
+            class="form-input-modern"
+            placeholder="Choose a unique username"
+            required
+            :disabled="auth.loading"
+            autocomplete="username"
+            minlength="3"
+          />
+          <span class="form-helper-text">At least 3 characters, used for your profile</span>
+          <span v-if="form.username && form.username.length < 3" class="form-error-text">
+            Username must be at least 3 characters
+          </span>
         </div>
 
         <!-- Email Field -->
-        <div class="form-group">
-          <label for="email">Email *</label>
-          <div class="input-wrapper">
-            <input
-              id="email"
-              v-model="form.email"
-              type="email"
-              placeholder="your@email.com"
-              required
-              :disabled="auth.loading"
-              autocomplete="email"
-            />
-            <svg class="input-icon" viewBox="0 0 24 24" fill="none">
+        <div class="form-group-modern">
+          <label for="email" class="form-label-modern">
+            <svg class="label-icon" viewBox="0 0 24 24" fill="none">
               <rect x="2" y="4" width="20" height="16" rx="2" stroke="currentColor" stroke-width="2"/>
               <path d="M2 6L12 13L22 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
             </svg>
-          </div>
+            Email Address *
+          </label>
+          <input
+            id="email"
+            v-model="form.email"
+            type="email"
+            class="form-input-modern"
+            placeholder="your@email.com"
+            required
+            :disabled="auth.loading"
+            autocomplete="email"
+          />
+          <span class="form-helper-text">We'll send important updates to this address</span>
+          <span v-if="form.email && !isValidEmail(form.email)" class="form-error-text">
+            Please enter a valid email address
+          </span>
         </div>
 
         <!-- Name Fields -->
         <div class="form-row">
-          <div class="form-group">
-            <label for="firstName">First Name</label>
+          <div class="form-group-modern">
+            <label for="firstName" class="form-label-modern">
+              First Name
+            </label>
             <input
               id="firstName"
               v-model="form.firstName"
               type="text"
+              class="form-input-modern"
               placeholder="John"
               :disabled="auth.loading"
               autocomplete="given-name"
             />
           </div>
-          <div class="form-group">
-            <label for="lastName">Last Name</label>
+          <div class="form-group-modern">
+            <label for="lastName" class="form-label-modern">
+              Last Name
+            </label>
             <input
               id="lastName"
               v-model="form.lastName"
               type="text"
+              class="form-input-modern"
               placeholder="Doe"
               :disabled="auth.loading"
               autocomplete="family-name"
@@ -81,23 +98,32 @@
         </div>
 
         <!-- Password Field -->
-        <div class="form-group">
-          <label for="password">Password *</label>
+        <div class="form-group-modern">
+          <label for="password" class="form-label-modern">
+            <svg class="label-icon" viewBox="0 0 24 24" fill="none">
+              <rect x="5" y="11" width="14" height="10" rx="2" stroke="currentColor" stroke-width="2"/>
+              <path d="M8 11V7C8 5.93913 8.42143 4.92172 9.17157 4.17157C9.92172 3.42143 10.9391 3 12 3C13.0609 3 14.0783 3.42143 14.8284 4.17157C15.5786 4.92172 16 5.93913 16 7V11" stroke="currentColor" stroke-width="2"/>
+            </svg>
+            Password *
+          </label>
           <div class="input-wrapper">
             <input
               id="password"
               v-model="form.password"
               :type="showPassword ? 'text' : 'password'"
+              class="form-input-modern"
               placeholder="At least 8 characters"
               required
               :disabled="auth.loading"
               autocomplete="new-password"
+              minlength="8"
             />
             <button
               type="button"
               @click="showPassword = !showPassword"
-              class="password-toggle"
+              class="password-toggle-btn"
               :title="showPassword ? 'Hide password' : 'Show password'"
+              :aria-label="showPassword ? 'Hide password' : 'Show password'"
             >
               <svg v-if="showPassword" viewBox="0 0 24 24" fill="none">
                 <path d="M1 12S6 4 12 4C18 4 23 12 23 12S18 20 12 20C6 20 1 12 1 12Z" stroke="currentColor" stroke-width="2"/>
@@ -109,25 +135,31 @@
               </svg>
             </button>
           </div>
-          <div class="password-strength">
+          <div class="password-strength" v-if="form.password">
             <div class="strength-meter">
               <div class="strength-bar" :class="getPasswordStrength(form.password).class" :style="{ width: getPasswordStrength(form.password).width }"></div>
             </div>
-            <small :class="getPasswordStrength(form.password).class">
-              {{ getPasswordStrength(form.password).text }}
+            <small :class="'strength-text ' + getPasswordStrength(form.password).class">
+              Password strength: {{ getPasswordStrength(form.password).text }}
             </small>
           </div>
         </div>
 
         <!-- Confirm Password Field -->
-        <div class="form-group">
-          <label for="confirmPassword">Confirm Password *</label>
+        <div class="form-group-modern">
+          <label for="confirmPassword" class="form-label-modern">
+            <svg class="label-icon" viewBox="0 0 24 24" fill="none">
+              <path d="m9 12 2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            Confirm Password *
+          </label>
           <div class="input-wrapper">
             <input
               id="confirmPassword"
               v-model="form.confirmPassword"
               :type="showConfirmPassword ? 'text' : 'password'"
-              placeholder="Confirm your password"
+              class="form-input-modern"
+              placeholder="Re-enter your password"
               required
               :disabled="auth.loading"
               autocomplete="new-password"
@@ -135,8 +167,9 @@
             <button
               type="button"
               @click="showConfirmPassword = !showConfirmPassword"
-              class="password-toggle"
+              class="password-toggle-btn"
               :title="showConfirmPassword ? 'Hide password' : 'Show password'"
+              :aria-label="showConfirmPassword ? 'Hide password' : 'Show password'"
             >
               <svg v-if="showConfirmPassword" viewBox="0 0 24 24" fill="none">
                 <path d="M1 12S6 4 12 4C18 4 23 12 23 12S18 20 12 20C6 20 1 12 1 12Z" stroke="currentColor" stroke-width="2"/>
@@ -148,9 +181,12 @@
               </svg>
             </button>
           </div>
-          <small v-if="form.password && form.confirmPassword && form.password !== form.confirmPassword" class="error">
+          <span v-if="form.password && form.confirmPassword && form.password !== form.confirmPassword" class="form-error-text">
             Passwords do not match
-          </small>
+          </span>
+          <span v-else-if="form.password && form.confirmPassword && form.password === form.confirmPassword" class="form-success-text">
+            Passwords match!
+          </span>
         </div>
 
         <!-- Terms Checkbox -->
@@ -169,49 +205,82 @@
           </label>
         </div>
 
+        <!-- Info Box -->
+        <div class="info-box info-box-info">
+          <svg viewBox="0 0 24 24" fill="none">
+            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+            <line x1="12" y1="8" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            <line x1="12" y1="16" x2="12.01" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+          <div>
+            <strong>Getting Started:</strong> After signing up, you'll be able to track workouts, analyze your training, and monitor your progress over time.
+          </div>
+        </div>
+
+        <!-- Error Message -->
+        <div v-if="auth.error" class="info-box info-box-danger">
+          <svg viewBox="0 0 24 24" fill="none">
+            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+            <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
+            <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
+          </svg>
+          <div>
+            <div class="form-error-text">
+              <strong>Signup Failed:</strong> {{ auth.error }}
+            </div>
+          </div>
+        </div>
+
+        <!-- Success State -->
+        <div v-if="signupSuccess" class="info-box info-box-success">
+          <svg viewBox="0 0 24 24" fill="none">
+            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+            <path d="m9 12 2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <div>
+            <strong>Account Created!</strong> Welcome to RideAware. Redirecting to your dashboard...
+          </div>
+        </div>
+
         <!-- Sign Up Button -->
         <button
           type="submit"
           :disabled="!isFormValid || auth.loading"
-          class="btn-primary"
+          class="btn-modern btn-modern-primary btn-modern-large"
         >
           <span v-if="auth.loading" class="loading-content">
             <svg class="spinner" viewBox="0 0 24 24">
               <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" opacity="0.25"/>
               <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" stroke-dasharray="31.416" stroke-dashoffset="31.416" opacity="0.75"/>
             </svg>
-            Creating account...
+            Creating your account...
+          </span>
+          <span v-else>
+            <svg viewBox="0 0 24 24" fill="none" style="width: 20px; height: 20px;">
+              <path d="M16 21V19C16 17.9391 15.5786 16.9217 14.8284 16.1716C14.0783 15.4214 13.0609 15 12 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <circle cx="8.5" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
+              <line x1="20" y1="8" x2="20" y2="14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              <line x1="23" y1="11" x2="17" y2="11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            </svg>
+            Create Account
           </span>
-          <span v-else>Create Account</span>
         </button>
       </form>
 
-      <!-- Error Message -->
-      <div v-if="auth.error" class="error-message">
-        <svg viewBox="0 0 24 24" fill="none">
-          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-          <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
-          <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
-        </svg>
-        <div>
-          <p class="error-title">Signup Failed</p>
-          <p class="error-text">{{ auth.error }}</p>
-        </div>
-      </div>
-
       <!-- Divider -->
-      <div class="divider">
-        <span>Or</span>
+      <div class="auth-divider">
+        <span>Already have an account?</span>
       </div>
 
       <!-- Login Link -->
-      <div class="login-section">
-        <p>Already have an account?</p>
-        <RouterLink to="/login" class="login-link">
-          Login here
-          <svg viewBox="0 0 24 24" fill="none">
-            <line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-            <polyline points="12 5 19 12 12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <div class="auth-footer">
+        <p>Welcome back! Log in to access your training data.</p>
+        <RouterLink to="/login" class="btn-modern btn-modern-secondary">
+          Log In
+          <svg viewBox="0 0 24 24" fill="none" style="width: 20px; height: 20px;">
+            <path d="M15 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M10 17L15 12L10 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M15 12H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </RouterLink>
       </div>
@@ -223,6 +292,16 @@
       <div class="decoration-blob blob-2"></div>
       <div class="decoration-blob blob-3"></div>
     </div>
+
+    <!-- Bottom Link -->
+    <div class="bottom-link">
+      <RouterLink to="/" class="btn-modern btn-modern-secondary">
+        <svg viewBox="0 0 24 24" fill="none" style="width: 16px; height: 16px;">
+          <path d="M19 12H5M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        Back to Home
+      </RouterLink>
+    </div>
   </div>
 </template>
 
@@ -237,6 +316,7 @@ const auth = useAuth()
 const showPassword = ref(false)
 const showConfirmPassword = ref(false)
 const agreedToTerms = ref(false)
+const signupSuccess = ref(false)
 
 const form = reactive({
   username: '',
@@ -247,10 +327,14 @@ const form = reactive({
   confirmPassword: ''
 })
 
+function isValidEmail(email) {
+  return email.includes('@') && email.includes('.')
+}
+
 const isFormValid = computed(() => {
   return (
     form.username.length >= 3 &&
-    form.email.includes('@') &&
+    isValidEmail(form.email) &&
     form.password.length >= 8 &&
     form.password === form.confirmPassword &&
     agreedToTerms.value
@@ -291,9 +375,13 @@ async function handleSignup() {
       form.firstName,
       form.lastName
     )
-    router.push('/dashboard')
+    signupSuccess.value = true
+    setTimeout(() => {
+      router.push('/dashboard')
+    }, 1500)
   } catch (error) {
     console.error('Signup error:', error)
+    signupSuccess.value = false
   }
 }
 </script>
@@ -304,25 +392,19 @@ async function handleSignup() {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 1rem;
+  background: var(--gradient-primary);
+  padding: var(--spacing-2xl) var(--spacing-md);
   position: relative;
   overflow: hidden;
 }
 
 /* ============================================
-   SIGNUP CARD
+   AUTH CARD
    ============================================ */
-.signup-card {
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(20px);
-  border-radius: 2rem;
-  padding: 3rem;
-  max-width: 520px;
+.auth-card {
+  max-width: 580px;
   width: 100%;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: slideUp var(--transition-slower) cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   z-index: 10;
   max-height: 90vh;
@@ -330,21 +412,21 @@ async function handleSignup() {
 }
 
 /* ============================================
-   CARD HEADER
+   AUTH HEADER
    ============================================ */
-.card-header {
+.auth-header {
   text-align: center;
-  margin-bottom: 2rem;
+  margin-bottom: var(--spacing-2xl);
 }
 
 .logo-wrapper {
   width: 80px;
   height: 80px;
-  margin: 0 auto 1.5rem;
-  padding: 1.5rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 2rem;
-  color: white;
+  margin: 0 auto var(--spacing-lg);
+  padding: var(--spacing-lg);
+  background: var(--gradient-primary);
+  border-radius: var(--radius-2xl);
+  color: var(--color-text-inverse);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -357,49 +439,36 @@ async function handleSignup() {
 }
 
 h1 {
-  margin: 0 0 0.75rem 0;
-  font-size: 2rem;
-  font-weight: 800;
-  color: #1f2937;
-  animation: titleSlide 0.6s ease-out 0.3s both;
+  margin: 0 0 var(--spacing-sm) 0;
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  animation: titleSlide var(--transition-slower) ease-out 0.3s both;
 }
 
 .subtitle {
-  margin: 0;
-  font-size: 1rem;
-  color: #6b7280;
-  font-weight: 500;
-  font-style: italic;
-  animation: subtitleFade 0.6s ease-out 0.4s both;
+  margin: var(--spacing-sm) 0 0 0;
+  font-size: var(--font-size-base);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-relaxed);
+  animation: subtitleFade var(--transition-slower) ease-out 0.4s both;
 }
 
 /* ============================================
-   SIGNUP FORM
+   FORM ENHANCEMENTS
    ============================================ */
-.signup-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-  animation: formSlide 0.6s ease-out 0.5s both;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
+.label-icon {
+  width: 18px;
+  height: 18px;
+  margin-right: var(--spacing-xs);
+  vertical-align: middle;
+  color: var(--color-primary);
 }
 
 .form-row {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-label {
-  font-weight: 600;
-  color: #374151;
-  font-size: 0.95rem;
-  display: block;
+  gap: var(--spacing-lg);
 }
 
 .input-wrapper {
@@ -408,67 +477,31 @@ label {
   align-items: center;
 }
 
-input {
-  width: 100%;
-  padding: 1rem 1rem 1rem 3rem;
-  border: 2px solid #e5e7eb;
-  border-radius: 1rem;
-  font-size: 1rem;
-  font-family: inherit;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  background: white;
-  box-sizing: border-box;
-}
-
-input:focus {
-  outline: none;
-  border-color: #667eea;
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-  transform: translateY(-2px);
-}
-
-input:disabled {
-  background: #f9fafb;
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-input::placeholder {
-  color: #9ca3af;
-}
-
-.input-icon {
+.password-toggle-btn {
   position: absolute;
-  left: 1rem;
-  width: 20px;
-  height: 20px;
-  color: #9ca3af;
-  pointer-events: none;
-}
-
-.password-toggle {
-  position: absolute;
-  right: 1rem;
+  right: 12px;
   width: 24px;
   height: 24px;
   background: none;
   border: none;
-  color: #9ca3af;
+  color: var(--color-text-secondary);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all var(--transition-base);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0;
+  padding: 4px;
+  border-radius: 4px;
 }
 
-.password-toggle svg {
+.password-toggle-btn svg {
   width: 100%;
   height: 100%;
 }
 
-.password-toggle:hover {
-  color: #667eea;
+.password-toggle-btn:hover {
+  color: var(--color-primary);
+  background: rgba(0, 102, 204, 0.1);
 }
 
 /* ============================================
@@ -477,13 +510,14 @@ input::placeholder {
 .password-strength {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--spacing-xs);
+  margin-top: var(--spacing-xs);
 }
 
 .strength-meter {
   width: 100%;
   height: 4px;
-  background: #e5e7eb;
+  background: var(--color-border);
   border-radius: 2px;
   overflow: hidden;
 }
@@ -491,48 +525,54 @@ input::placeholder {
 .strength-bar {
   height: 100%;
   border-radius: 2px;
-  transition: all 0.3s ease;
+  transition: all var(--transition-slow);
 }
 
 .strength-bar.weak {
-  background: #ef4444;
+  background: var(--color-danger);
 }
 
 .strength-bar.fair {
-  background: #f59e0b;
+  background: var(--color-warning);
 }
 
 .strength-bar.good {
-  background: #3b82f6;
+  background: var(--color-info);
 }
 
 .strength-bar.strong {
-  background: #10b981;
+  background: var(--color-secondary);
 }
 
-.password-strength small {
-  font-size: 0.8rem;
-  font-weight: 600;
+.strength-text {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
 }
 
-.password-strength small.weak {
-  color: #ef4444;
+.strength-text.weak {
+  color: var(--color-danger);
 }
 
-.password-strength small.fair {
-  color: #f59e0b;
+.strength-text.fair {
+  color: var(--color-warning);
 }
 
-.password-strength small.good {
-  color: #3b82f6;
+.strength-text.good {
+  color: var(--color-info);
 }
 
-.password-strength small.strong {
-  color: #10b981;
+.strength-text.strong {
+  color: var(--color-secondary);
 }
 
-.password-strength small.error {
-  color: #ef4444;
+.form-success-text {
+  font-size: var(--font-size-xs);
+  color: var(--color-secondary);
+  margin-top: var(--spacing-xs);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-weight: var(--font-weight-medium);
 }
 
 /* ============================================
@@ -540,192 +580,125 @@ input::placeholder {
    ============================================ */
 .terms-checkbox {
   display: flex;
-  align-items: center;
-  gap: 0.75rem;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
 }
 
 .terms-checkbox input {
-  width: auto;
-  padding: 0;
-  border: 2px solid #e5e7eb;
-  border-radius: 0.375rem;
+  width: 18px;
+  height: 18px;
+  margin-top: 2px;
   cursor: pointer;
-  accent-color: #667eea;
-  margin: 0;
-}
-
-.terms-checkbox input:checked {
-  background: #667eea;
+  accent-color: var(--color-primary);
+  border: 2px solid var(--color-border);
+  border-radius: 4px;
+  flex-shrink: 0;
 }
 
 .terms-checkbox label {
   margin: 0;
-  font-weight: 500;
-  font-size: 0.9rem;
-  color: #374151;
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
   cursor: pointer;
   user-select: none;
+  line-height: var(--line-height-relaxed);
 }
 
 .terms-checkbox a {
-  color: #667eea;
+  color: var(--color-primary);
   text-decoration: none;
-  font-weight: 600;
-  transition: all 0.2s ease;
+  font-weight: var(--font-weight-semibold);
+  transition: all var(--transition-base);
 }
 
 .terms-checkbox a:hover {
-  color: #764ba2;
+  color: var(--color-primary-dark);
   text-decoration: underline;
 }
 
 /* ============================================
-   SUBMIT BUTTON
+   BUTTON ENHANCEMENTS
    ============================================ */
-.btn-primary {
+.btn-modern-large {
   width: 100%;
-  padding: 1.125rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border: none;
-  border-radius: 1rem;
-  font-size: 1rem;
-  font-weight: 700;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 52px;
-}
-
-.btn-primary:hover:not(:disabled) {
-  transform: translateY(-3px);
-  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
-}
-
-.btn-primary:active:not(:disabled) {
-  transform: translateY(-1px);
-}
-
-.btn-primary:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  transform: none;
+  padding: 16px 32px;
+  font-size: var(--font-size-lg);
+  min-height: 56px;
 }
 
 .loading-content {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: var(--spacing-sm);
 }
 
 .spinner {
-  width: 20px;
-  height: 20px;
+  width: 22px;
+  height: 22px;
   animation: spin 1s linear infinite;
 }
 
 /* ============================================
-   ERROR MESSAGE
+   INFO BOXES
    ============================================ */
-.error-message {
+.info-box {
   display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem;
-  background: #fef2f2;
-  border: 2px solid #fecaca;
-  border-radius: 1rem;
-  color: #dc2626;
-  animation: slideInError 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  align-items: flex-start;
+  gap: var(--spacing-md);
 }
 
-.error-message svg {
-  width: 24px;
-  height: 24px;
+.info-box svg {
+  width: 20px;
+  height: 20px;
   flex-shrink: 0;
-}
-
-.error-title {
-  margin: 0 0 0.25rem 0;
-  font-weight: 600;
-  font-size: 0.95rem;
-}
-
-.error-text {
-  margin: 0;
-  font-size: 0.85rem;
-  opacity: 0.9;
-}
-
-.error {
-  color: #ef4444;
-  font-size: 0.8rem;
-  font-weight: 500;
+  margin-top: 2px;
 }
 
 /* ============================================
    DIVIDER
    ============================================ */
-.divider {
+.auth-divider {
   position: relative;
   text-align: center;
-  margin: 1rem 0;
+  margin: var(--spacing-2xl) 0 var(--spacing-xl) 0;
 }
 
-.divider::before {
+.auth-divider::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 0;
   right: 0;
-  height: 1px;
-  background: #e5e7eb;
+  height: 2px;
+  background: var(--color-divider);
 }
 
-.divider span {
+.auth-divider span {
   position: relative;
-  background: white;
-  padding: 0 1rem;
-  color: #9ca3af;
-  font-size: 0.9rem;
-  font-weight: 500;
+  background: var(--color-surface);
+  padding: 0 var(--spacing-lg);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
 }
 
 /* ============================================
-   LOGIN SECTION
+   AUTH FOOTER
    ============================================ */
-.login-section {
+.auth-footer {
   text-align: center;
 }
 
-.login-section p {
-  margin: 0 0 0.75rem 0;
-  color: #6b7280;
-  font-size: 0.95rem;
+.auth-footer p {
+  margin: 0 0 var(--spacing-md) 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-relaxed);
 }
 
-.login-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: #667eea;
-  text-decoration: none;
-  font-weight: 700;
-  transition: all 0.2s ease;
-}
-
-.login-link svg {
-  width: 16px;
-  height: 16px;
-  transition: all 0.2s ease;
-}
-
-.login-link:hover {
-  color: #764ba2;
-  gap: 0.75rem;
+.auth-footer .btn-modern {
+  width: 100%;
 }
 
 /* ============================================
@@ -740,7 +713,7 @@ input::placeholder {
 
 .decoration-blob {
   position: absolute;
-  border-radius: 50%;
+  border-radius: var(--radius-full);
   background: rgba(255, 255, 255, 0.1);
   animation: float 8s ease-in-out infinite;
 }
@@ -769,6 +742,29 @@ input::placeholder {
   animation-delay: 4s;
 }
 
+/* ============================================
+   BOTTOM LINK
+   ============================================ */
+.bottom-link {
+  position: absolute;
+  bottom: var(--spacing-2xl);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+}
+
+.bottom-link .btn-modern {
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(10px);
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.bottom-link .btn-modern:hover {
+  background: rgba(255, 255, 255, 0.25);
+  border-color: rgba(255, 255, 255, 0.5);
+}
+
 /* ============================================
    ANIMATIONS
    ============================================ */
@@ -815,28 +811,6 @@ input::placeholder {
   }
 }
 
-@keyframes formSlide {
-  from {
-    transform: translateY(20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes slideInError {
-  from {
-    transform: translateX(-20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
 @keyframes spin {
   from {
     transform: rotate(0deg);
@@ -860,62 +834,39 @@ input::placeholder {
    ============================================ */
 @media (max-width: 640px) {
   .signup-container {
-    padding: 1rem;
+    padding: var(--spacing-md);
   }
 
-  .signup-card {
-    padding: 2rem;
-    border-radius: 1.5rem;
+  .auth-card {
+    padding: var(--spacing-xl);
     max-height: none;
   }
 
-  .card-header {
-    margin-bottom: 1.5rem;
+  .auth-header {
+    margin-bottom: var(--spacing-lg);
   }
 
   .logo-wrapper {
     width: 64px;
     height: 64px;
-    margin-bottom: 1rem;
-    padding: 1rem;
+    margin-bottom: var(--spacing-md);
+    padding: var(--spacing-md);
   }
 
   h1 {
-    font-size: 1.75rem;
+    font-size: var(--font-size-2xl);
   }
 
   .subtitle {
-    font-size: 0.9rem;
-  }
-
-  .signup-form {
-    gap: 1rem;
+    font-size: var(--font-size-sm);
   }
 
   .form-row {
     grid-template-columns: 1fr;
   }
 
-  input {
-    padding: 0.875rem 0.875rem 0.875rem 2.75rem;
-    font-size: 16px;
-  }
-
-  .input-icon {
-    left: 0.75rem;
-  }
-
-  .password-toggle {
-    right: 0.75rem;
-  }
-
-  .divider {
-    margin: 0.75rem 0;
-  }
-
-  .error-message {
-    flex-direction: column;
-    text-align: center;
+  .auth-divider {
+    margin: var(--spacing-xl) 0 var(--spacing-md) 0;
   }
 
   .blob-1 {
@@ -935,50 +886,50 @@ input::placeholder {
 }
 
 @media (max-width: 480px) {
-  .signup-card {
-    padding: 1.5rem;
-    border-radius: 1.25rem;
+  .auth-card {
+    padding: var(--spacing-lg);
   }
 
-  h1 {
-    font-size: 1.5rem;
+  .auth-header {
+    margin-bottom: var(--spacing-md);
   }
 
   .logo-wrapper {
     width: 56px;
     height: 56px;
-    margin-bottom: 0.75rem;
   }
 
-  label {
-    font-size: 0.9rem;
-  }
-
-  .btn-primary {
-    padding: 1rem;
-    font-size: 0.95rem;
-  }
-
-  .terms-checkbox label {
-    font-size: 0.85rem;
+  .bottom-link {
+    bottom: var(--spacing-md);
   }
 }
 
-/* Scrollbar styling for long forms */
-.signup-card::-webkit-scrollbar {
+/* Scrollbar styling */
+.auth-card::-webkit-scrollbar {
   width: 6px;
 }
 
-.signup-card::-webkit-scrollbar-track {
+.auth-card::-webkit-scrollbar-track {
   background: transparent;
 }
 
-.signup-card::-webkit-scrollbar-thumb {
-  background: #e5e7eb;
+.auth-card::-webkit-scrollbar-thumb {
+  background: var(--color-border);
   border-radius: 3px;
 }
 
-.signup-card::-webkit-scrollbar-thumb:hover {
-  background: #d1d5db;
+.auth-card::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-secondary);
 }
-</style>
\ No newline at end of file
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .auth-card,
+  .logo-wrapper,
+  h1,
+  .subtitle,
+  .decoration-blob {
+    animation: none;
+  }
+}
+</style>
diff --git a/src/components/WorkoutCalendar.vue b/src/components/WorkoutCalendar.vue
index a6fa4cf..2006c51 100644
--- a/src/components/WorkoutCalendar.vue
+++ b/src/components/WorkoutCalendar.vue
@@ -3,132 +3,252 @@
     <ModernNavbar />
 
     <div class="calendar-content">
-      <div class="calendar-header">
-        <h2>Workout Calendar</h2>
-        <div class="header-controls">
-          <button @click="previousMonth" class="btn-nav">← Previous</button>
-          <span class="current-month">{{ monthYear }}</span>
-          <button @click="nextMonth" class="btn-nav">Next →</button>
-          <button @click="showAddWorkout = true" class="btn-primary">+ Add Workout</button>
+      <!-- Page Header -->
+      <div class="section-header">
+        <div>
+          <h1 class="section-title">Workout Calendar</h1>
+          <p class="section-description">Plan and track your training schedule</p>
         </div>
+        <button @click="showAddWorkout = true" class="btn-modern btn-modern-primary btn-modern-large">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="12" y1="5" x2="12" y2="19"></line>
+            <line x1="5" y1="12" x2="19" y2="12"></line>
+          </svg>
+          Add Workout
+        </button>
+      </div>
+
+      <!-- Month Navigation -->
+      <div class="month-navigation">
+        <button @click="previousMonth" class="btn-modern btn-modern-secondary">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="15 18 9 12 15 6"></polyline>
+          </svg>
+          Previous
+        </button>
+        <h2 class="current-month-display">{{ monthYear }}</h2>
+        <button @click="nextMonth" class="btn-modern btn-modern-secondary">
+          Next
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="9 18 15 12 9 6"></polyline>
+          </svg>
+        </button>
       </div>
 
       <!-- Add Workout Modal -->
       <div v-if="showAddWorkout" class="modal-overlay" @click.self="showAddWorkout = false">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h3>Add Workout</h3>
-            <button @click="showAddWorkout = false" class="btn-close">✕</button>
+        <div class="modal-content-modern">
+          <div class="modal-header-modern">
+            <h3 class="modal-title">Add New Workout</h3>
+            <button @click="showAddWorkout = false" class="btn-close-modern">✕</button>
           </div>
 
-          <form @submit.prevent="handleAddWorkout" class="workout-form">
-            <div class="form-group">
-              <label>Title *</label>
-              <input v-model="newWorkout.title" type="text" placeholder="e.g., Morning Ride" required />
+          <form @submit.prevent="handleAddWorkout" class="form-modern">
+            <!-- Title -->
+            <div class="form-group-modern">
+              <label class="form-label-modern">Workout Title *</label>
+              <input
+                v-model="newWorkout.title"
+                type="text"
+                class="form-input-modern"
+                placeholder="e.g., Morning Endurance Ride, Tempo Run, etc."
+                required
+              />
+              <span class="form-helper-text">Give your workout a descriptive name</span>
             </div>
 
-            <div class="form-row">
-              <div class="form-group">
-                <label>Date *</label>
-                <input v-model="newWorkout.scheduled_date" type="date" required />
+            <!-- Date and Type Row -->
+            <div class="form-row-modern">
+              <div class="form-group-modern">
+                <label class="form-label-modern">Scheduled Date *</label>
+                <input
+                  v-model="newWorkout.scheduled_date"
+                  type="date"
+                  class="form-input-modern"
+                  required
+                />
+                <span class="form-helper-text">When do you plan to do this?</span>
               </div>
-              <div class="form-group">
-                <label>Type</label>
-                <select v-model="newWorkout.type">
+              <div class="form-group-modern">
+                <label class="form-label-modern">Workout Type</label>
+                <select v-model="newWorkout.type" class="form-input-modern">
                   <option value="">Select type</option>
                   <option v-for="type in workoutTypes" :key="type.id" :value="type.name">
                     {{ type.icon }} {{ type.name }}
                   </option>
                 </select>
+                <span class="form-helper-text">Choose activity type</span>
               </div>
             </div>
 
-            <div class="form-row">
-              <div class="form-group">
-                <label>Duration (minutes)</label>
-                <input v-model.number="newWorkout.duration" type="number" step="1" min="1" max="999" />
-              </div>
-            </div>
-            
-            <div class="form-group">
-              <label>Description</label>
-              <textarea v-model="newWorkout.description" placeholder="Workout details..."></textarea>
+            <!-- Duration -->
+            <div class="form-group-modern">
+              <label class="form-label-modern">Duration (minutes)</label>
+              <input
+                v-model.number="newWorkout.duration"
+                type="number"
+                class="form-input-modern"
+                step="1"
+                min="1"
+                max="999"
+                placeholder="60"
+              />
+              <span class="form-helper-text">How long will this workout take?</span>
             </div>
 
-            <div class="form-group">
-              <label>Import Workout File (FIT/ZWO)</label>
-              <div class="file-input-wrapper">
-                <input 
-                  @change="handleFileUpload" 
-                  type="file" 
+            <!-- Description -->
+            <div class="form-group-modern">
+              <label class="form-label-modern">Description</label>
+              <textarea
+                v-model="newWorkout.description"
+                class="form-input-modern"
+                placeholder="Add workout notes, intervals, goals, or any other details..."
+                rows="4"
+              ></textarea>
+              <span class="form-helper-text">Optional notes about your workout</span>
+            </div>
+
+            <!-- File Upload Section -->
+            <div class="form-group-modern">
+              <label class="form-label-modern">Import Workout File (Optional)</label>
+              <div class="info-box-info mb-sm">
+                <strong>Tip:</strong> Upload FIT or ZWO files from TrainerRoad, Zwift, or other platforms to automatically populate workout details and structure.
+              </div>
+              <div class="file-upload-area">
+                <input
+                  @change="handleFileUpload"
+                  type="file"
                   accept=".fit,.zwo"
                   id="workout-file"
+                  class="file-input-hidden"
                 />
-                <label for="workout-file" class="file-label">
-                  <svg viewBox="0 0 24 24" fill="none">
-                    <path d="M21 15V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    <polyline points="17 8 12 3 7 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    <line x1="12" y1="3" x2="12" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <label for="workout-file" class="file-upload-label">
+                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M21 15V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V15" stroke-linecap="round" stroke-linejoin="round"/>
+                    <polyline points="17 8 12 3 7 8" stroke-linecap="round" stroke-linejoin="round"/>
+                    <line x1="12" y1="3" x2="12" y2="15" stroke-linecap="round" stroke-linejoin="round"/>
                   </svg>
-                  {{ uploadedFileName || 'Click to upload FIT or ZWO file' }}
+                  <div class="file-upload-text">
+                    <strong>{{ uploadedFileName || 'Click to upload file' }}</strong>
+                    <span v-if="!uploadedFileName">or drag and drop</span>
+                  </div>
+                  <span class="file-upload-hint">Supports FIT and ZWO formats</span>
                 </label>
               </div>
-              <div v-if="fileParseError" class="error-small">{{ fileParseError }}</div>
-              <div v-if="parsedFileData" class="parsed-data">
-                <p><strong>File parsed successfully!</strong></p>
-                <p v-if="parsedFileData.title">Title: {{ parsedFileData.title }}</p>
-                <p v-if="parsedFileData.duration">Duration: {{ formatDuration(parsedFileData.duration) }}</p>
-                <p v-if="parsedFileData.segments">Segments: {{ parsedFileData.segments.length }}</p>
+
+              <div v-if="fileParseError" class="form-error-text">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <circle cx="12" cy="12" r="10"></circle>
+                  <line x1="12" y1="8" x2="12" y2="12"></line>
+                  <line x1="12" y1="16" x2="12.01" y2="16"></line>
+                </svg>
+                {{ fileParseError }}
+              </div>
+
+              <div v-if="parsedFileData" class="file-parse-success">
+                <div class="parse-success-header">
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                  </svg>
+                  <strong>File parsed successfully!</strong>
+                </div>
+                <div class="parse-success-details">
+                  <div v-if="parsedFileData.title" class="parse-detail">
+                    <span class="parse-label">Title:</span>
+                    <span class="parse-value">{{ parsedFileData.title }}</span>
+                  </div>
+                  <div v-if="parsedFileData.duration" class="parse-detail">
+                    <span class="parse-label">Duration:</span>
+                    <span class="parse-value">{{ formatDuration(parsedFileData.duration) }}</span>
+                  </div>
+                  <div v-if="parsedFileData.segments" class="parse-detail">
+                    <span class="parse-label">Segments:</span>
+                    <span class="parse-value">{{ parsedFileData.segments.length }}</span>
+                  </div>
+                </div>
               </div>
             </div>
 
-            <div class="form-actions">
-              <button type="submit" :disabled="loading" class="btn-primary">
-                {{ loading ? 'Adding...' : 'Add Workout' }}
+            <!-- Form Actions -->
+            <div class="form-actions-modern">
+              <button type="button" @click="showAddWorkout = false" class="btn-modern btn-modern-secondary">
+                Cancel
               </button>
-              <button type="button" @click="resetForm" class="btn-secondary">
+              <button type="button" @click="resetForm" class="btn-modern btn-modern-secondary">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <polyline points="1 4 1 10 7 10"></polyline>
+                  <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
+                </svg>
                 Reset
               </button>
-              <button type="button" @click="showAddWorkout = false" class="btn-secondary">
-                Cancel
+              <button type="submit" :disabled="loading" class="btn-modern btn-modern-primary">
+                <svg v-if="!loading" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <polyline points="20 6 9 17 4 12"></polyline>
+                </svg>
+                {{ loading ? 'Adding...' : 'Add Workout' }}
               </button>
             </div>
           </form>
 
-          <div v-if="error" class="error-message">{{ error }}</div>
+          <div v-if="error" class="error-message-modern">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10"></circle>
+              <line x1="12" y1="8" x2="12" y2="12"></line>
+              <line x1="12" y1="16" x2="12.01" y2="16"></line>
+            </svg>
+            {{ error }}
+          </div>
         </div>
       </div>
 
       <!-- Calendar Grid -->
-      <div class="calendar-grid">
-        <div class="calendar-header-row">
-          <div class="day-header">Sun</div>
-          <div class="day-header">Mon</div>
-          <div class="day-header">Tue</div>
-          <div class="day-header">Wed</div>
-          <div class="day-header">Thu</div>
-          <div class="day-header">Fri</div>
-          <div class="day-header">Sat</div>
-        </div>
+      <div class="card-modern calendar-card">
+        <div class="calendar-grid">
+          <div class="calendar-header-row">
+            <div class="day-header">Sunday</div>
+            <div class="day-header">Monday</div>
+            <div class="day-header">Tuesday</div>
+            <div class="day-header">Wednesday</div>
+            <div class="day-header">Thursday</div>
+            <div class="day-header">Friday</div>
+            <div class="day-header">Saturday</div>
+          </div>
 
-        <div class="calendar-days">
-          <div
-            v-for="day in calendarDays"
-            :key="day.date"
-            class="calendar-day"
-            :class="{ 'other-month': !day.isCurrentMonth, 'today': day.isToday }"
-          >
-            <div class="day-number">{{ day.day }}</div>
-            <div class="day-workouts">
-              <div
-                v-for="workout in day.workouts"
-                :key="workout.id"
-                class="workout-badge"
-                :style="{ backgroundColor: getWorkoutColor(workout.type) }"
-                @click="selectWorkout(workout)"
-                :title="workout.title"
-              >
-                {{ workout.title.substring(0, 10) }}
+          <div class="calendar-days-grid">
+            <div
+              v-for="day in calendarDays"
+              :key="day.date"
+              class="calendar-day-modern"
+              :class="{
+                'other-month': !day.isCurrentMonth,
+                'today': day.isToday,
+                'has-workouts': day.workouts.length > 0
+              }"
+            >
+              <div class="day-number-modern">
+                {{ day.day }}
+                <span v-if="day.isToday" class="today-badge">Today</span>
+              </div>
+              <div class="day-workouts-modern">
+                <div
+                  v-for="workout in day.workouts"
+                  :key="workout.id"
+                  class="workout-badge-modern"
+                  :style="{ borderLeftColor: getWorkoutColor(workout.type) }"
+                  @click="selectWorkout(workout)"
+                >
+                  <div class="workout-badge-header">
+                    <span class="workout-badge-icon">{{ getWorkoutIcon(workout.type) }}</span>
+                    <span class="workout-badge-title">{{ workout.title }}</span>
+                  </div>
+                  <div class="workout-badge-footer">
+                    <span class="workout-badge-duration">{{ workout.duration }}min</span>
+                    <span :class="['status-pill', `status-pill-${workout.status}`]">
+                      {{ workout.status }}
+                    </span>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -144,24 +264,83 @@
         @deleted="loadWorkouts"
       />
 
-      <!-- Workouts List -->
-      <div class="workouts-list">
-        <h3>Upcoming Workouts</h3>
-        <div v-if="upcomingWorkouts.length > 0" class="workouts">
-          <div v-for="workout in upcomingWorkouts.slice(0, 5)" :key="workout.id" class="workout-item" @click="selectWorkout(workout)">
-            <div class="workout-item-header">
-              <span class="workout-date">{{ formatDate(workout.scheduled_date) }}</span>
-              <span class="workout-title">{{ workout.title }}</span>
-              <span class="workout-type" v-if="workout.type">{{ workout.type }}</span>
-            </div>
-            <div class="workout-item-footer">
-              <span class="workout-duration">{{ workout.duration }}min</span>
-              <span :class="['workout-status', workout.status]">{{ workout.status }}</span>
-            </div>
+      <!-- Upcoming Workouts List -->
+      <div class="card-modern">
+        <div class="card-modern-header">
+          <div>
+            <h3 class="card-modern-title">Upcoming Workouts</h3>
+            <p class="card-modern-subtitle">Your next 5 scheduled workouts</p>
           </div>
         </div>
-        <div v-else class="empty-state">
-          No upcoming workouts
+
+        <div v-if="upcomingWorkouts.length > 0" class="upcoming-workouts-table">
+          <table class="table-modern">
+            <thead>
+              <tr>
+                <th>Date</th>
+                <th>Workout</th>
+                <th>Type</th>
+                <th>Duration</th>
+                <th>Status</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="workout in upcomingWorkouts.slice(0, 5)"
+                :key="workout.id"
+                class="workout-row"
+                @click="selectWorkout(workout)"
+              >
+                <td class="workout-date-cell">
+                  <div class="date-display">
+                    <span class="date-day">{{ formatDateDay(workout.scheduled_date) }}</span>
+                    <span class="date-month">{{ formatDateMonth(workout.scheduled_date) }}</span>
+                  </div>
+                </td>
+                <td>
+                  <div class="workout-title-cell">
+                    <span class="workout-icon">{{ getWorkoutIcon(workout.type) }}</span>
+                    <strong>{{ workout.title }}</strong>
+                  </div>
+                </td>
+                <td>
+                  <span v-if="workout.type" class="workout-type-badge">{{ workout.type }}</span>
+                  <span v-else class="text-secondary">-</span>
+                </td>
+                <td>
+                  <span class="duration-display">{{ workout.duration }} min</span>
+                </td>
+                <td>
+                  <span :class="['status-pill', `status-pill-${workout.status}`]">
+                    {{ workout.status }}
+                  </span>
+                </td>
+                <td>
+                  <button class="btn-action" @click.stop="selectWorkout(workout)">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <polyline points="9 18 15 12 9 6"></polyline>
+                    </svg>
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div v-else class="empty-state-modern">
+          <div class="empty-state-icon">📅</div>
+          <h3 class="empty-state-title">No Upcoming Workouts</h3>
+          <p class="empty-state-description">
+            You don't have any workouts scheduled yet. Click the "Add Workout" button to plan your first training session!
+          </p>
+          <button @click="showAddWorkout = true" class="btn-modern btn-modern-primary">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="12" y1="5" x2="12" y2="19"></line>
+              <line x1="5" y1="12" x2="19" y2="12"></line>
+            </svg>
+            Add Your First Workout
+          </button>
         </div>
       </div>
     </div>
@@ -438,493 +617,637 @@ function getWorkoutColor(type) {
   const typeObj = workoutTypes.value.find(t => t.name === type)
   return typeObj?.color || '#667eea'
 }
+
+function getWorkoutIcon(type) {
+  const typeObj = workoutTypes.value.find(t => t.name === type)
+  return typeObj?.icon || '🏋️'
+}
+
+function formatDateDay(dateStr) {
+  return new Date(dateStr).toLocaleDateString('en-US', { day: 'numeric' })
+}
+
+function formatDateMonth(dateStr) {
+  return new Date(dateStr).toLocaleDateString('en-US', { month: 'short' })
+}
 </script>
 
 <style scoped>
+/* Calendar Page - Modern TrainingPeaks/TrainerRoad Inspired Design */
 .calendar-page {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: var(--color-background);
 }
 
 .calendar-content {
-  max-width: 1400px;
-  margin: 2rem auto;
-  padding: 0 1rem;
-}
-
-.calendar-header {
+  max-width: 1600px;
+  margin: 0 auto;
+  padding: var(--spacing-2xl) var(--spacing-lg);
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 2rem;
-  flex-wrap: wrap;
-  gap: 1rem;
+  flex-direction: column;
+  gap: var(--spacing-2xl);
 }
 
-.calendar-header h2 {
-  margin: 0;
-  color: #2c3e50;
-  font-size: 2rem;
-}
-
-.header-controls {
+/* Month Navigation */
+.month-navigation {
   display: flex;
-  gap: 1rem;
+  justify-content: center;
   align-items: center;
-  flex-wrap: wrap;
+  gap: var(--spacing-xl);
+  margin: 0 auto;
+  padding: var(--spacing-lg);
 }
 
-.current-month {
-  font-weight: 600;
-  color: #2c3e50;
-  min-width: 150px;
+.current-month-display {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  min-width: 280px;
   text-align: center;
+  margin: 0;
 }
 
-.btn-nav {
-  padding: 0.5rem 1rem;
-  background: #ecf0f1;
-  color: #2c3e50;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 500;
-  transition: background 0.2s;
-}
-
-.btn-nav:hover {
-  background: #bdc3c7;
-}
-
-.btn-primary {
-  padding: 0.75rem 1.5rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 600;
-  transition: transform 0.2s;
-}
-
-.btn-primary:hover {
-  transform: translateY(-2px);
-}
-
-.btn-primary:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
+/* Modal - Modern Design */
 .modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(8px);
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
-  padding: 1rem;
+  z-index: var(--z-modal-backdrop);
+  padding: var(--spacing-lg);
   overflow-y: auto;
 }
 
-.modal-content {
-  background: white;
-  border-radius: 8px;
-  padding: 2rem;
-  max-width: 600px;
+.modal-content-modern {
+  background: var(--color-surface);
+  border-radius: 16px;
+  padding: var(--spacing-2xl);
+  max-width: 700px;
   width: 100%;
   max-height: 90vh;
   overflow-y: auto;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  position: relative;
+  z-index: var(--z-modal);
+  animation: slideUp 0.3s ease-out;
 }
 
-.modal-header {
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.modal-header-modern {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 1.5rem;
-  border-bottom: 1px solid #e5e7eb;
-  padding-bottom: 1rem;
+  margin-bottom: var(--spacing-2xl);
+  padding-bottom: var(--spacing-lg);
+  border-bottom: 2px solid var(--color-divider);
 }
 
-.modal-header h3 {
+.modal-title {
   margin: 0;
-  color: #2c3e50;
-  font-size: 1.5rem;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
 }
 
-.btn-close {
-  background: none;
+.btn-close-modern {
+  background: var(--color-surface-hover);
   border: none;
-  font-size: 1.5rem;
+  font-size: 24px;
   cursor: pointer;
-  color: #7f8c8d;
+  color: var(--color-text-secondary);
   padding: 0;
-  width: 32px;
-  height: 32px;
+  width: 40px;
+  height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: transform 0.2s;
+  border-radius: 8px;
+  transition: all var(--transition-base);
 }
 
-.btn-close:hover {
+.btn-close-modern:hover {
+  background: var(--color-danger);
+  color: white;
   transform: rotate(90deg);
-  color: #2c3e50;
 }
 
-.workout-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.form-row {
+/* Modern Form Layout */
+.form-row-modern {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 1rem;
+  gap: var(--spacing-lg);
 }
 
-label {
-  margin-bottom: 0.25rem;
-  color: #2c3e50;
-  font-weight: 600;
-  font-size: 0.95rem;
+.form-actions-modern {
+  display: flex;
+  gap: var(--spacing-md);
+  justify-content: flex-end;
+  padding-top: var(--spacing-xl);
+  border-top: 2px solid var(--color-divider);
+  margin-top: var(--spacing-lg);
 }
 
-input,
-select,
-textarea {
-  padding: 0.75rem;
-  border: 2px solid #e5e7eb;
-  border-radius: 6px;
-  font-size: 1rem;
-  font-family: inherit;
-  transition: all 0.2s;
-  background: white;
-}
-
-input:focus,
-select:focus,
-textarea:focus {
-  outline: none;
-  border-color: #667eea;
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-}
-
-textarea {
+/* Ensure textarea inherits form-input-modern styles */
+textarea.form-input-modern {
   resize: vertical;
   min-height: 100px;
+  font-family: var(--font-family);
 }
 
-.file-input-wrapper {
-  position: relative;
-}
-
-#workout-file {
+/* File Upload - Modern Design */
+.file-input-hidden {
   display: none;
 }
 
-.file-label {
+.file-upload-area {
+  margin-top: var(--spacing-sm);
+}
+
+.file-upload-label {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 0.75rem;
-  padding: 2rem;
-  border: 2px dashed #667eea;
-  border-radius: 6px;
-  background: rgba(102, 126, 234, 0.05);
+  gap: var(--spacing-md);
+  padding: var(--spacing-2xl);
+  border: 3px dashed var(--color-primary);
+  border-radius: 12px;
+  background: rgba(0, 102, 204, 0.03);
   cursor: pointer;
-  transition: all 0.2s;
-  font-weight: 500;
-  color: #667eea;
+  transition: all var(--transition-base);
 }
 
-.file-label:hover {
-  background: rgba(102, 126, 234, 0.1);
-  border-color: #764ba2;
+.file-upload-label:hover {
+  background: rgba(0, 102, 204, 0.08);
+  border-color: var(--color-primary-dark);
+  transform: translateY(-2px);
 }
 
-.file-label svg {
-  width: 24px;
-  height: 24px;
-}
-
-.error-small {
-  padding: 0.75rem;
-  background: #fef2f2;
-  border: 1px solid #fecaca;
-  color: #dc2626;
-  border-radius: 4px;
-  font-size: 0.9rem;
-}
-
-.parsed-data {
-  padding: 1rem;
-  background: #f0f4ff;
-  border: 1px solid #c7d2fe;
-  border-radius: 4px;
-  color: #1e40af;
-  font-size: 0.9rem;
-}
-
-.parsed-data p {
-  margin: 0.25rem 0;
-}
-
-.parsed-data strong {
-  color: #1e3a8a;
-}
-
-.form-actions {
+.file-upload-text {
   display: flex;
-  gap: 1rem;
-  justify-content: flex-end;
-  padding-top: 1rem;
-  border-top: 1px solid #e5e7eb;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-xs);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-base);
 }
 
-.btn-secondary {
-  padding: 0.75rem 1.5rem;
-  background: #95a5a6;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 600;
-  transition: background 0.2s;
+.file-upload-text strong {
+  color: var(--color-primary);
+  font-weight: var(--font-weight-bold);
 }
 
-.btn-secondary:hover {
-  background: #7f8c8d;
+.file-upload-text span {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
 }
 
-.error-message {
-  margin-top: 1rem;
-  padding: 1rem;
-  background: #fee;
-  color: #c33;
-  border-radius: 4px;
-  border-left: 4px solid #c33;
+.file-upload-hint {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xs);
 }
 
-.calendar-grid {
-  background: white;
+.file-parse-success {
+  margin-top: var(--spacing-md);
+  padding: var(--spacing-lg);
+  background: rgba(0, 200, 83, 0.08);
+  border: 2px solid rgba(0, 200, 83, 0.3);
+  border-radius: 10px;
+}
+
+.parse-success-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  color: var(--color-secondary);
+  font-size: var(--font-size-base);
+  margin-bottom: var(--spacing-md);
+}
+
+.parse-success-details {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.parse-detail {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--font-size-sm);
+}
+
+.parse-label {
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
+}
+
+.parse-value {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+.error-message-modern {
+  margin-top: var(--spacing-lg);
+  padding: var(--spacing-md) var(--spacing-lg);
+  background: rgba(230, 57, 70, 0.1);
+  color: var(--color-danger);
   border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  padding: 1rem;
-  margin-bottom: 2rem;
+  border-left: 4px solid var(--color-danger);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+/* Calendar Grid - Modern Design */
+.calendar-card {
+  padding: var(--spacing-xl);
   overflow-x: auto;
 }
 
-.calendar-header-row,
-.calendar-days {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 1px;
-  background: #ecf0f1;
+.calendar-grid {
   min-width: 100%;
 }
 
+.calendar-header-row {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+  margin-bottom: 2px;
+  background: var(--color-divider);
+  border-radius: 8px 8px 0 0;
+  overflow: hidden;
+}
+
 .day-header {
-  background: #667eea;
+  background: var(--color-primary);
   color: white;
-  padding: 1rem;
+  padding: var(--spacing-md) var(--spacing-sm);
   text-align: center;
-  font-weight: 600;
-  font-size: 0.9rem;
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
-.calendar-day {
-  background: white;
-  padding: 1rem;
-  min-height: 120px;
-  border: 1px solid #ecf0f1;
-  cursor: pointer;
-  transition: background 0.2s;
+.calendar-days-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+  background: var(--color-divider);
+  border-radius: 0 0 8px 8px;
+  overflow: hidden;
 }
 
-.calendar-day:hover {
-  background: #f9f9f9;
-}
-
-.calendar-day.other-month {
-  background: #fafafa;
-  color: #bdc3c7;
-}
-
-.calendar-day.today {
-  background: #f0f4ff;
-  border: 2px solid #667eea;
-}
-
-.day-number {
-  font-weight: 600;
-  color: #2c3e50;
-  margin-bottom: 0.5rem;
-  font-size: 1.1rem;
-}
-
-.day-workouts {
+.calendar-day-modern {
+  background: var(--color-surface);
+  padding: var(--spacing-md);
+  min-height: 140px;
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  transition: all var(--transition-base);
+  position: relative;
 }
 
-.workout-badge {
-  padding: 0.25rem 0.5rem;
-  border-radius: 3px;
+.calendar-day-modern:hover {
+  background: var(--color-surface-hover);
+  transform: scale(1.02);
+  z-index: 1;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.calendar-day-modern.other-month {
+  background: var(--color-surface-secondary);
+  opacity: 0.5;
+}
+
+.calendar-day-modern.today {
+  background: linear-gradient(135deg, rgba(0, 102, 204, 0.08) 0%, rgba(0, 102, 204, 0.02) 100%);
+  border: 2px solid var(--color-primary);
+}
+
+.calendar-day-modern.has-workouts {
+  border-left: 4px solid var(--color-secondary);
+}
+
+.day-number-modern {
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-xl);
+  margin-bottom: var(--spacing-sm);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.today-badge {
+  background: var(--color-primary);
   color: white;
-  font-size: 0.75rem;
-  font-weight: 600;
-  white-space: nowrap;
+  font-size: var(--font-size-xs);
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.day-workouts-modern {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  flex: 1;
+  overflow-y: auto;
+}
+
+.workout-badge-modern {
+  background: var(--color-surface-hover);
+  border-left: 4px solid var(--color-primary);
+  border-radius: 6px;
+  padding: var(--spacing-sm);
+  cursor: pointer;
+  transition: all var(--transition-base);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.workout-badge-modern:hover {
+  background: rgba(0, 102, 204, 0.08);
+  transform: translateX(4px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.workout-badge-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.workout-badge-icon {
+  font-size: var(--font-size-base);
+}
+
+.workout-badge-title {
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.workout-badge-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-size: var(--font-size-xs);
+}
+
+.workout-badge-duration {
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
+}
+
+/* Upcoming Workouts Table - Modern Design */
+.upcoming-workouts-table {
+  margin-top: var(--spacing-md);
+}
+
+.workout-row {
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: all var(--transition-base);
 }
 
-.workout-badge:hover {
-  opacity: 0.8;
+.workout-row:hover {
+  background: rgba(0, 102, 204, 0.05) !important;
 }
 
-.workouts-list {
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  padding: 2rem;
+.workout-date-cell {
+  padding: var(--spacing-md) !important;
 }
 
-.workouts-list h3 {
-  margin-top: 0;
-  color: #2c3e50;
-  font-size: 1.3rem;
-}
-
-.workouts {
+.date-display {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-}
-
-.workout-item {
-  padding: 1rem;
-  border-left: 4px solid #667eea;
-  background: #f9f9f9;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.workout-item:hover {
-  background: #f0f4ff;
-  transform: translateX(4px);
-}
-
-.workout-item-header {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 0.5rem;
   align-items: center;
-  flex-wrap: wrap;
-}
-
-.workout-date {
-  font-weight: 600;
-  color: #667eea;
-  min-width: 100px;
-}
-
-.workout-title {
-  flex: 1;
-  color: #2c3e50;
-  font-weight: 500;
-}
-
-.workout-type {
-  background: #667eea;
+  padding: var(--spacing-sm);
+  background: var(--color-primary);
+  border-radius: 8px;
+  min-width: 50px;
   color: white;
-  padding: 0.25rem 0.75rem;
-  border-radius: 20px;
-  font-size: 0.85rem;
-  font-weight: 600;
 }
 
-.workout-item-footer {
+.date-day {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  line-height: 1;
+}
+
+.date-month {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-top: 2px;
+}
+
+.workout-title-cell {
   display: flex;
-  gap: 1rem;
-  font-size: 0.9rem;
-  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-sm);
+  color: var(--color-text-primary);
 }
 
-.workout-duration {
-  color: #7f8c8d;
+.workout-icon {
+  font-size: var(--font-size-lg);
 }
 
-.workout-status {
-  padding: 0.25rem 0.5rem;
-  border-radius: 3px;
-  font-weight: 600;
-  font-size: 0.85rem;
+.workout-type-badge {
+  background: rgba(0, 102, 204, 0.1);
+  color: var(--color-primary);
+  padding: 6px 12px;
+  border-radius: 16px;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
 }
 
-.workout-status.planned {
-  background: #FBBC04;
-  color: #333;
+.duration-display {
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
 }
 
-.workout-status.completed {
-  background: #34A853;
-  color: white;
+.btn-action {
+  background: transparent;
+  border: none;
+  color: var(--color-primary);
+  cursor: pointer;
+  padding: var(--spacing-xs);
+  border-radius: 6px;
+  transition: all var(--transition-base);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.workout-status.skipped {
-  background: #EA4335;
-  color: white;
+.btn-action:hover {
+  background: rgba(0, 102, 204, 0.1);
 }
 
-.empty-state {
-  text-align: center;
-  color: #7f8c8d;
-  padding: 2rem;
+.text-secondary {
+  color: var(--color-text-secondary);
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .day-header {
+    font-size: var(--font-size-xs);
+    padding: var(--spacing-sm);
+  }
+
+  .calendar-day-modern {
+    min-height: 120px;
+    padding: var(--spacing-sm);
+  }
+
+  .day-number-modern {
+    font-size: var(--font-size-lg);
+  }
 }
 
 @media (max-width: 768px) {
-  .calendar-header {
-    flex-direction: column;
-    align-items: stretch;
+  .calendar-content {
+    padding: var(--spacing-lg) var(--spacing-md);
   }
 
-  .header-controls {
+  .section-header {
     flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-md);
   }
 
-  .form-row {
+  .month-navigation {
+    flex-wrap: wrap;
+    gap: var(--spacing-md);
+  }
+
+  .current-month-display {
+    font-size: var(--font-size-2xl);
+    min-width: auto;
+    width: 100%;
+  }
+
+  .form-row-modern {
     grid-template-columns: 1fr;
   }
 
-  .modal-content {
+  .modal-content-modern {
     max-width: 100%;
-    padding: 1.5rem;
+    padding: var(--spacing-xl);
   }
 
-  .form-actions {
-    flex-direction: column;
+  .form-actions-modern {
+    flex-direction: column-reverse;
   }
 
-  .btn-primary,
-  .btn-secondary {
+  .form-actions-modern .btn-modern {
     width: 100%;
   }
+
+  .day-header {
+    font-size: 10px;
+    padding: var(--spacing-xs);
+  }
+
+  .calendar-day-modern {
+    min-height: 100px;
+    padding: var(--spacing-xs);
+  }
+
+  .day-number-modern {
+    font-size: var(--font-size-base);
+  }
+
+  .workout-badge-modern {
+    padding: 6px;
+  }
+
+  .today-badge {
+    display: none;
+  }
+
+  /* Table becomes stacked cards on mobile */
+  .table-modern {
+    display: block;
+  }
+
+  .table-modern thead {
+    display: none;
+  }
+
+  .table-modern tbody,
+  .table-modern tr,
+  .table-modern td {
+    display: block;
+  }
+
+  .table-modern tr {
+    margin-bottom: var(--spacing-md);
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  .table-modern td {
+    padding: var(--spacing-sm) var(--spacing-md) !important;
+    border-bottom: 1px solid var(--color-border) !important;
+    text-align: left !important;
+  }
+
+  .table-modern td:last-child {
+    border-bottom: none !important;
+  }
+
+  .date-display {
+    width: fit-content;
+  }
+
+  .workout-title-cell {
+    font-size: var(--font-size-base);
+  }
+}
+
+@media (max-width: 480px) {
+  .calendar-card {
+    padding: var(--spacing-md);
+  }
+
+  .btn-modern-large {
+    padding: 12px 20px;
+    font-size: var(--font-size-base);
+  }
+
+  .modal-content-modern {
+    padding: var(--spacing-lg);
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/WorkoutDetail.vue b/src/components/WorkoutDetail.vue
index 81d19ab..9d70ee2 100644
--- a/src/components/WorkoutDetail.vue
+++ b/src/components/WorkoutDetail.vue
@@ -1,132 +1,253 @@
 <template>
   <div class="workout-detail-modal" v-if="workout">
     <div class="modal-overlay" @click.self="closeModal">
-      <div class="modal-window">
-        <div class="detail-header">
-          <div class="header-info">
-            <h2>{{ workout.title }}</h2>
-            <p class="workout-meta">
-              {{ formatDate(workout.scheduled_date) }} • {{ formatDuration(workout.duration * 60) }}
-            </p>
+      <div class="card-modern modal-container">
+        <!-- Header with Workout Type Icon -->
+        <div class="card-modern-header">
+          <div class="header-content">
+            <div class="icon-badge" :style="{ background: getWorkoutTypeColor(workout.type) }">
+              {{ getWorkoutTypeIcon(workout.type) }}
+            </div>
+            <div class="header-info">
+              <h2 class="card-modern-title">{{ workout.title }}</h2>
+              <p class="card-modern-subtitle">
+                {{ formatDate(workout.scheduled_date) }} • {{ formatDuration(workout.duration * 60) }}
+              </p>
+            </div>
           </div>
           <button @click="closeModal" class="btn-close">✕</button>
         </div>
 
         <div class="detail-body">
-          <!-- Workout Info -->
-          <div class="info-section">
-            <div class="info-grid">
-              <div class="info-item">
-                <span class="label">Type</span>
-                <span class="value">{{ workout.type || 'Custom' }}</span>
+          <!-- Primary Metrics -->
+          <div class="section-with-header">
+            <h3 class="section-header-title">Key Metrics</h3>
+            <div class="metrics-grid-primary">
+              <div class="metric-card">
+                <div class="metric-label">Duration</div>
+                <div class="metric-value">{{ formatDuration(workout.duration * 60) }}</div>
               </div>
-              <div class="info-item">
-                <span class="label">Duration</span>
-                <span class="value">{{ formatDuration(workout.duration * 60) }}</span>
+              <div class="metric-card">
+                <div class="metric-label">Type</div>
+                <div class="metric-value">{{ workout.type || 'Custom' }}</div>
               </div>
-              <div class="info-item">
-                <span class="label">Status</span>
-                <span class="value status" :class="workout.status">{{ workout.status }}</span>
+              <div class="metric-card">
+                <div class="metric-label">Status</div>
+                <div class="status-pill" :class="`status-pill-${workout.status}`">
+                  {{ workout.status }}
+                </div>
               </div>
-              <div v-if="workout.file_type" class="info-item">
-                <span class="label">Source</span>
-                <span class="value">{{ workout.file_type.toUpperCase() }} File</span>
+              <div v-if="workout.file_type" class="metric-card">
+                <div class="metric-label">Source</div>
+                <div class="metric-value">{{ workout.file_type.toUpperCase() }}</div>
               </div>
             </div>
           </div>
 
-          <!-- File Metadata -->
-          <div v-if="workout.workout_data && hasFileMetadata" class="metadata-section">
-            <h3>File Information</h3>
-            <div class="metadata-grid">
-              <div v-if="workout.workout_data.author" class="metadata-item">
-                <span class="label">Author</span>
-                <span class="value">{{ workout.workout_data.author }}</span>
+          <!-- Workout Completion Progress -->
+          <div v-if="workout.status !== 'skipped'" class="section-with-header">
+            <h3 class="section-header-title">Completion</h3>
+            <div class="progress-container">
+              <div class="progress-bar-modern">
+                <div
+                  class="progress-bar-modern-fill"
+                  :style="{ width: workoutProgress + '%' }"
+                ></div>
               </div>
-              <div v-if="workout.workout_data.sport" class="metadata-item">
-                <span class="label">Sport</span>
-                <span class="value">{{ workout.workout_data.sport }}</span>
-              </div>
-              <div v-if="workout.workout_data.intensity_factor" class="metadata-item">
-                <span class="label">Intensity Factor</span>
-                <span class="value">{{ workout.workout_data.intensity_factor.toFixed(2) }}</span>
-              </div>
-              <div v-if="workout.workout_data.tss" class="metadata-item">
-                <span class="label">TSS</span>
-                <span class="value">{{ workout.workout_data.tss.toFixed(1) }}</span>
+              <span class="progress-text">{{ workoutProgress }}% Complete</span>
+            </div>
+          </div>
+
+          <!-- File Information -->
+          <div v-if="workout.workout_data && hasFileMetadata" class="section-with-header">
+            <h3 class="section-header-title">📁 File Information</h3>
+            <div class="info-box info-box-info">
+              <div class="file-metadata-grid">
+                <div v-if="workout.workout_data.author" class="metadata-item">
+                  <span class="label">Author</span>
+                  <span class="value">{{ workout.workout_data.author }}</span>
+                </div>
+                <div v-if="workout.workout_data.sport" class="metadata-item">
+                  <span class="label">Sport</span>
+                  <span class="value">{{ workout.workout_data.sport }}</span>
+                </div>
+                <div v-if="workout.workout_data.intensity_factor" class="metadata-item">
+                  <span class="label">Intensity Factor</span>
+                  <span class="value">{{ workout.workout_data.intensity_factor.toFixed(2) }}</span>
+                </div>
+                <div v-if="workout.workout_data.tss" class="metadata-item">
+                  <span class="label">TSS</span>
+                  <span class="value">{{ workout.workout_data.tss.toFixed(1) }}</span>
+                </div>
               </div>
             </div>
           </div>
 
-          <!-- Workout Segments -->
-          <div v-if="workout.workout_data && workout.workout_data.segments && workout.workout_data.segments.length > 0" class="segments-section">
-            <h3>Workout Segments ({{ workout.workout_data.segments.length }})</h3>
-            <div class="segments-list">
-              <div v-for="(segment, idx) in workout.workout_data.segments" :key="idx" class="segment-card">
-                <div class="segment-header">
-                  <span class="segment-type">{{ formatSegmentType(segment.type) }}</span>
-                  <span class="segment-duration">{{ formatDuration(segment.duration) }}</span>
-                </div>
-                <div class="segment-details">
-                  <div v-if="segment.power !== undefined && segment.power !== 0" class="detail-row">
-                    <span>Power:</span>
-                    <strong>{{ (segment.power * 100).toFixed(0) }}% FTP</strong>
-                  </div>
-                  <div v-if="segment.power_low !== undefined && segment.power_high !== undefined && segment.power_low !== 0" class="detail-row">
-                    <span>Power Range:</span>
-                    <strong>{{ (segment.power_low * 100).toFixed(0) }}% - {{ (segment.power_high * 100).toFixed(0) }}% FTP</strong>
-                  </div>
-                  <div v-if="segment.cadence && segment.cadence !== 0" class="detail-row">
-                    <span>Cadence:</span>
-                    <strong>{{ segment.cadence }} RPM</strong>
-                  </div>
-                  <div v-if="segment.tempo" class="detail-row">
-                    <span>Tempo:</span>
-                    <strong>{{ segment.tempo }}</strong>
-                  </div>
-                </div>
-              </div>
+          <!-- Workout Segments Table -->
+          <div v-if="workout.workout_data && workout.workout_data.segments && workout.workout_data.segments.length > 0" class="section-with-header">
+            <h3 class="section-header-title">📊 Workout Segments ({{ workout.workout_data.segments.length }})</h3>
+            <div class="table-container">
+              <table class="table-modern">
+                <thead>
+                  <tr>
+                    <th>#</th>
+                    <th>Type</th>
+                    <th>Duration</th>
+                    <th>Power</th>
+                    <th>Cadence</th>
+                    <th>Zone</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(segment, idx) in workout.workout_data.segments" :key="idx">
+                    <td class="text-bold">{{ idx + 1 }}</td>
+                    <td>{{ formatSegmentType(segment.type) }}</td>
+                    <td>{{ formatDuration(segment.duration) }}</td>
+                    <td>
+                      <div v-if="segment.power !== undefined && segment.power !== 0" class="power-cell">
+                        <span class="power-value">{{ (segment.power * 100).toFixed(0) }}%</span>
+                        <div class="zone-bar">
+                          <div
+                            class="zone-bar-fill"
+                            :style="{ width: (segment.power * 100) + '%', background: getPowerZoneColor(segment.power) }"
+                          ></div>
+                        </div>
+                      </div>
+                      <div v-else-if="segment.power_low !== undefined && segment.power_high !== undefined && segment.power_low !== 0" class="power-cell">
+                        <span class="power-value">{{ (segment.power_low * 100).toFixed(0) }}%-{{ (segment.power_high * 100).toFixed(0) }}%</span>
+                        <div class="zone-bar">
+                          <div
+                            class="zone-bar-fill"
+                            :style="{ width: (segment.power_high * 100) + '%', background: getPowerZoneColor(segment.power_high) }"
+                          ></div>
+                        </div>
+                      </div>
+                      <span v-else class="text-muted">-</span>
+                    </td>
+                    <td>
+                      <span v-if="segment.cadence && segment.cadence !== 0">{{ segment.cadence }} RPM</span>
+                      <span v-else class="text-muted">-</span>
+                    </td>
+                    <td>
+                      <span v-if="segment.tempo" class="status-pill status-pill-active">{{ segment.tempo }}</span>
+                      <span v-else class="text-muted">-</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
             </div>
           </div>
 
           <!-- Completed Metrics -->
-          <div v-if="workout.status === 'completed'" class="metrics-section">
-            <h3>Completed Metrics</h3>
-            <div class="metrics-grid">
-              <div v-if="workout.distance" class="metric">
-                <span class="metric-label">Distance</span>
-                <span class="metric-value">{{ workout.distance }} km</span>
+          <div v-if="workout.status === 'completed'" class="section-with-header">
+            <h3 class="section-header-title">✓ Completed Metrics</h3>
+            <div class="metrics-grid-completed">
+              <div v-if="workout.distance" class="metric-card">
+                <div class="metric-label">Distance</div>
+                <div class="metric-value">{{ workout.distance }}</div>
+                <div class="metric-unit">km</div>
               </div>
-              <div v-if="workout.avg_power" class="metric">
-                <span class="metric-label">Avg Power</span>
-                <span class="metric-value">{{ workout.avg_power }}W</span>
+              <div v-if="workout.avg_power" class="metric-card">
+                <div class="metric-label">Avg Power</div>
+                <div class="metric-value">{{ workout.avg_power }}</div>
+                <div class="metric-unit">watts</div>
               </div>
-              <div v-if="workout.avg_hr" class="metric">
-                <span class="metric-label">Avg HR</span>
-                <span class="metric-value">{{ workout.avg_hr }} bpm</span>
+              <div v-if="workout.avg_hr" class="metric-card">
+                <div class="metric-label">Avg Heart Rate</div>
+                <div class="metric-value">{{ workout.avg_hr }}</div>
+                <div class="metric-unit">bpm</div>
               </div>
-              <div v-if="workout.calories_burned" class="metric">
-                <span class="metric-label">Calories</span>
-                <span class="metric-value">{{ workout.calories_burned }}</span>
+              <div v-if="workout.calories_burned" class="metric-card">
+                <div class="metric-label">Calories</div>
+                <div class="metric-value">{{ workout.calories_burned }}</div>
+                <div class="metric-unit">kcal</div>
               </div>
             </div>
           </div>
 
-          <!-- Description -->
-          <div v-if="workout.description" class="description-section">
-            <h3>Description</h3>
-            <p>{{ workout.description }}</p>
+          <!-- Notes/Description -->
+          <div v-if="workout.description" class="section-with-header">
+            <h3 class="section-header-title">📝 Notes</h3>
+            <div class="notes-display">
+              <p>{{ workout.description }}</p>
+            </div>
+          </div>
+
+          <!-- Edit Mode Form -->
+          <div v-if="isEditMode" class="section-with-header">
+            <h3 class="section-header-title">Edit Workout</h3>
+            <form class="form-modern" @submit.prevent="saveWorkout">
+              <div class="form-group-modern">
+                <label class="form-label-modern">Title</label>
+                <input
+                  v-model="editForm.title"
+                  type="text"
+                  class="form-input-modern"
+                  placeholder="Workout title"
+                />
+              </div>
+              <div class="form-group-modern">
+                <label class="form-label-modern">Description</label>
+                <textarea
+                  v-model="editForm.description"
+                  class="form-input-modern"
+                  rows="4"
+                  placeholder="Add workout notes..."
+                ></textarea>
+              </div>
+              <div class="form-actions">
+                <button type="submit" class="btn-modern btn-modern-primary">
+                  💾 Save Changes
+                </button>
+                <button type="button" @click="cancelEdit" class="btn-modern btn-modern-secondary">
+                  Cancel
+                </button>
+              </div>
+            </form>
           </div>
         </div>
 
+        <!-- Footer Actions -->
         <div class="detail-footer">
-          <select v-model="selectedStatus" @change="updateStatus" class="status-select">
-            <option value="planned">Planned</option>
-            <option value="completed">Completed</option>
-            <option value="skipped">Skipped</option>
-          </select>
-          <button @click="deleteWorkout" class="btn-danger">Delete</button>
-          <button @click="closeModal" class="btn-secondary">Close</button>
+          <div class="footer-left">
+            <label class="form-label-modern">Status:</label>
+            <select v-model="selectedStatus" @change="updateStatus" class="form-input-modern status-select-modern">
+              <option value="planned">📅 Planned</option>
+              <option value="completed">✓ Completed</option>
+              <option value="skipped">✕ Skipped</option>
+            </select>
+          </div>
+          <div class="footer-right">
+            <button v-if="!isEditMode" @click="enableEditMode" class="btn-modern btn-modern-secondary">
+              ✏️ Edit
+            </button>
+            <button @click="confirmDelete" class="btn-modern btn-modern-danger">
+              🗑️ Delete
+            </button>
+            <button @click="closeModal" class="btn-modern btn-modern-primary">
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Delete Confirmation Modal -->
+    <div v-if="showDeleteConfirm" class="confirmation-modal">
+      <div class="modal-overlay" @click.self="showDeleteConfirm = false">
+        <div class="card-modern confirmation-card">
+          <h3 class="confirmation-title">⚠️ Confirm Delete</h3>
+          <p class="confirmation-message">
+            Are you sure you want to delete "<strong>{{ workout.title }}</strong>"? This action cannot be undone.
+          </p>
+          <div class="confirmation-actions">
+            <button @click="deleteWorkout" class="btn-modern btn-modern-danger">
+              Delete Workout
+            </button>
+            <button @click="showDeleteConfirm = false" class="btn-modern btn-modern-secondary">
+              Cancel
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -134,7 +255,7 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits, ref, watch, computed } from 'vue'
+import { defineProps, defineEmits, ref, watch, computed, reactive } from 'vue'
 import api from '@/services/api'
 
 const props = defineProps({
@@ -146,6 +267,21 @@ const props = defineProps({
 
 const emit = defineEmits(['close', 'updated', 'deleted'])
 const selectedStatus = ref(props.workout.status)
+const showDeleteConfirm = ref(false)
+const isEditMode = ref(false)
+
+const editForm = reactive({
+  title: '',
+  description: '',
+})
+
+const workoutTypeMapping = {
+  'Cycling': { icon: '🚴', color: '#667eea' },
+  'Running': { icon: '🏃', color: '#f59e0b' },
+  'Swimming': { icon: '🏊', color: '#0ea5e9' },
+  'Strength': { icon: '💪', color: '#8b5cf6' },
+  'Custom': { icon: '🏋️', color: '#6b7280' },
+}
 
 const hasFileMetadata = computed(() => {
   if (!props.workout.workout_data) return false
@@ -157,14 +293,67 @@ const hasFileMetadata = computed(() => {
   )
 })
 
+const workoutProgress = computed(() => {
+  if (props.workout.status === 'completed') return 100
+  if (props.workout.status === 'skipped') return 0
+  // For planned workouts, show as ready to start
+  return 0
+})
+
 watch(() => props.workout, (newWorkout) => {
   selectedStatus.value = newWorkout.status
-})
+  editForm.title = newWorkout.title || ''
+  editForm.description = newWorkout.description || ''
+}, { immediate: true })
 
 function closeModal() {
   emit('close')
 }
 
+function getWorkoutTypeIcon(type) {
+  return workoutTypeMapping[type]?.icon || workoutTypeMapping['Custom'].icon
+}
+
+function getWorkoutTypeColor(type) {
+  return workoutTypeMapping[type]?.color || workoutTypeMapping['Custom'].color
+}
+
+function getPowerZoneColor(powerPercent) {
+  // Power zones based on FTP percentage
+  if (powerPercent < 0.55) return '#94a3b8' // Recovery (Z1)
+  if (powerPercent < 0.75) return '#60a5fa' // Endurance (Z2)
+  if (powerPercent < 0.90) return '#34d399' // Tempo (Z3)
+  if (powerPercent < 1.05) return '#fbbf24' // Threshold (Z4)
+  if (powerPercent < 1.20) return '#fb923c' // VO2 Max (Z5)
+  return '#ef4444' // Anaerobic (Z6+)
+}
+
+function enableEditMode() {
+  isEditMode.value = true
+  editForm.title = props.workout.title || ''
+  editForm.description = props.workout.description || ''
+}
+
+function cancelEdit() {
+  isEditMode.value = false
+  editForm.title = props.workout.title || ''
+  editForm.description = props.workout.description || ''
+}
+
+async function saveWorkout() {
+  try {
+    await api.put(`/api/protected/workouts?id=${props.workout.id}`, {
+      title: editForm.title,
+      description: editForm.description,
+    })
+    isEditMode.value = false
+    emit('updated')
+  } catch (error) {
+    console.error('Failed to update workout:', error)
+    alert('Failed to save workout. Please try again.')
+  }
+}
+
 async function updateStatus() {
   try {
     await api.put(`/api/protected/workouts?id=${props.workout.id}`, {
@@ -177,14 +366,19 @@ async function updateStatus() {
   }
 }
 
+function confirmDelete() {
+  showDeleteConfirm.value = true
+}
+
 async function deleteWorkout() {
-  if (!confirm('Are you sure you want to delete this workout?')) return
   try {
     await api.delete(`/api/protected/workouts?id=${props.workout.id}`)
+    showDeleteConfirm.value = false
     emit('deleted')
     emit('close')
   } catch (error) {
     console.error('Failed to delete workout:', error)
+    alert('Failed to delete workout. Please try again.')
   }
 }
 
@@ -218,367 +412,353 @@ function formatSegmentType(type) {
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 2000;
+  z-index: var(--z-modal);
 }
 
 .modal-overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
   justify-content: center;
   overflow-y: auto;
-  padding: 1rem;
+  padding: var(--spacing-md);
 }
 
-.modal-window {
-  background: white;
-  border-radius: 8px;
+.modal-container {
   width: 100%;
-  max-width: 700px;
+  max-width: 900px;
   max-height: 90vh;
   overflow-y: auto;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  animation: slideUp 0.3s ease-out;
 }
 
-.detail-header {
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.header-content {
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: 2rem;
-  border-bottom: 1px solid #ecf0f1;
-  background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
+  align-items: center;
+  gap: var(--spacing-lg);
+  flex: 1;
 }
 
-.header-info h2 {
-  margin: 0 0 0.5rem 0;
-  color: #2c3e50;
-  font-size: 1.75rem;
-  font-weight: 700;
-}
-
-.workout-meta {
-  margin: 0;
-  color: #7f8c8d;
-  font-size: 0.95rem;
+.header-info {
+  flex: 1;
 }
 
 .btn-close {
   background: none;
   border: none;
-  font-size: 1.5rem;
+  font-size: var(--font-size-2xl);
   cursor: pointer;
-  color: #7f8c8d;
+  color: var(--color-text-tertiary);
   padding: 0;
-  width: 32px;
-  height: 32px;
+  width: 40px;
+  height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s;
-  border-radius: 4px;
+  transition: all var(--transition-base);
+  border-radius: var(--radius-md);
 }
 
 .btn-close:hover {
   background: rgba(0, 0, 0, 0.1);
-  color: #2c3e50;
+  color: var(--color-text-primary);
+  transform: rotate(90deg);
 }
 
 .detail-body {
-  padding: 2rem;
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: var(--spacing-2xl);
 }
 
-.info-section {
-  background: #f9f9f9;
-  padding: 1rem;
-  border-radius: 6px;
-}
-
-.info-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 1.5rem;
-}
-
-.info-item {
+.section-with-header {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--spacing-md);
 }
 
-.info-item .label {
-  font-size: 0.75rem;
-  color: #7f8c8d;
-  text-transform: uppercase;
-  font-weight: 700;
-  letter-spacing: 0.5px;
-}
-
-.info-item .value {
-  font-size: 1.1rem;
-  color: #2c3e50;
-  font-weight: 600;
-}
-
-.value.status {
-  display: inline-block;
-  padding: 0.4rem 0.75rem;
-  border-radius: 6px;
-  font-size: 0.9rem;
-  text-align: center;
-  width: fit-content;
-}
-
-.value.status.planned {
-  background: #fef3c7;
-  color: #92400e;
-}
-
-.value.status.completed {
-  background: #d1fae5;
-  color: #065f46;
-}
-
-.value.status.skipped {
-  background: #fee2e2;
-  color: #991b1b;
-}
-
-.metadata-section,
-.segments-section,
-.metrics-section,
-.description-section {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.metadata-section h3,
-.segments-section h3,
-.metrics-section h3,
-.description-section h3 {
+.section-header-title {
   margin: 0;
-  color: #2c3e50;
-  font-size: 1.2rem;
-  font-weight: 700;
-  border-bottom: 2px solid #667eea;
-  padding-bottom: 0.75rem;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-bold);
+  border-bottom: 2px solid var(--color-primary);
+  padding-bottom: var(--spacing-sm);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
 }
 
-.metadata-grid {
+.metrics-grid-primary {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: var(--spacing-lg);
+}
+
+.metrics-grid-completed {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: var(--spacing-lg);
+}
+
+.metric-unit {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  text-transform: lowercase;
+  margin-top: var(--spacing-xs);
+}
+
+.progress-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.progress-text {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-semibold);
+}
+
+.file-metadata-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: var(--spacing-md);
 }
 
 .metadata-item {
-  background: #f0f4ff;
-  padding: 1rem;
-  border-radius: 6px;
-  border: 1px solid #dbeafe;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
 }
 
 .metadata-item .label {
-  font-size: 0.75rem;
-  color: #7f8c8d;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
   text-transform: uppercase;
-  margin-bottom: 0.5rem;
-  display: block;
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0.5px;
 }
 
 .metadata-item .value {
-  font-size: 1rem;
-  color: #2c3e50;
-  font-weight: 600;
+  font-size: var(--font-size-base);
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-semibold);
 }
 
-.segments-list {
+.table-container {
+  overflow-x: auto;
+  border-radius: 12px;
+}
+
+.power-cell {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--spacing-xs);
 }
 
-.segment-card {
-  background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
-  border: 1px solid #e0e6ed;
-  border-left: 4px solid #667eea;
-  padding: 1rem;
-  border-radius: 6px;
+.power-value {
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm);
 }
 
-.segment-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-  flex-wrap: wrap;
-  gap: 0.75rem;
+.text-muted {
+  color: var(--color-text-tertiary);
 }
 
-.segment-type {
-  display: inline-block;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  padding: 0.4rem 0.85rem;
-  border-radius: 6px;
-  font-size: 0.85rem;
-  font-weight: 700;
+.notes-display {
+  background: var(--color-surface-hover);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-lg);
 }
 
-.segment-duration {
-  color: #2c3e50;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.segment-details {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.detail-row {
-  display: flex;
-  justify-content: space-between;
-  font-size: 0.95rem;
-  align-items: center;
-}
-
-.detail-row span {
-  color: #7f8c8d;
-}
-
-.detail-row strong {
-  color: #2c3e50;
-  font-weight: 600;
-}
-
-.metrics-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-  gap: 1rem;
-}
-
-.metric {
-  background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%);
-  padding: 1.25rem;
-  border-radius: 6px;
-  text-align: center;
-  border: 1px solid #dbeafe;
-}
-
-.metric-label {
-  display: block;
-  font-size: 0.8rem;
-  color: #7f8c8d;
-  text-transform: uppercase;
-  margin-bottom: 0.5rem;
-  font-weight: 700;
-}
-
-.metric-value {
-  display: block;
-  font-size: 1.4rem;
-  color: #667eea;
-  font-weight: 800;
-}
-
-.description-section p {
+.notes-display p {
   margin: 0;
-  color: #4b5563;
-  line-height: 1.7;
-  background: #f9f9f9;
-  padding: 1.25rem;
-  border-radius: 6px;
-  border: 1px solid #e5e7eb;
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-relaxed);
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.form-actions {
+  display: flex;
+  gap: var(--spacing-sm);
+  margin-top: var(--spacing-md);
 }
 
 .detail-footer {
   display: flex;
-  gap: 0.75rem;
-  padding: 1.5rem 2rem;
-  border-top: 1px solid #ecf0f1;
-  background: #f9f9f9;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-lg);
+  padding-top: var(--spacing-xl);
+  border-top: 2px solid var(--color-divider);
   flex-wrap: wrap;
 }
 
-.status-select {
+.footer-left {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
   flex: 1;
-  min-width: 150px;
-  padding: 0.75rem;
-  border: 2px solid #e5e7eb;
-  border-radius: 6px;
-  font-size: 0.95rem;
-  font-weight: 500;
-  background: white;
-  color: #2c3e50;
+}
+
+.footer-right {
+  display: flex;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+}
+
+.status-select-modern {
+  min-width: 180px;
   cursor: pointer;
-  transition: all 0.2s;
 }
 
-.status-select:focus {
-  outline: none;
-  border-color: #667eea;
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-}
-
-.btn-danger {
-  padding: 0.75rem 1.5rem;
+.btn-modern-danger {
   background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
   color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-weight: 600;
-  transition: all 0.2s;
+  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
 }
 
-.btn-danger:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+.btn-modern-danger:hover:not(:disabled) {
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
+  transform: translateY(-1px);
 }
 
-.btn-secondary {
-  padding: 0.75rem 1.5rem;
-  background: #95a5a6;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-weight: 600;
-  transition: all 0.2s;
+/* Confirmation Modal */
+.confirmation-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: calc(var(--z-modal) + 1);
 }
 
-.btn-secondary:hover {
-  background: #7f8c8d;
+.confirmation-card {
+  max-width: 500px;
+  padding: var(--spacing-2xl);
+  animation: slideUp 0.2s ease-out;
 }
 
-@media (max-width: 640px) {
-  .modal-window {
+.confirmation-title {
+  margin: 0 0 var(--spacing-md) 0;
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.confirmation-message {
+  margin: 0 0 var(--spacing-xl) 0;
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-relaxed);
+}
+
+.confirmation-message strong {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+.confirmation-actions {
+  display: flex;
+  gap: var(--spacing-sm);
+  justify-content: flex-end;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .modal-container {
     max-width: 100%;
+    margin: 0;
   }
 
-  .info-grid,
-  .metadata-grid {
+  .header-content {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .metrics-grid-primary,
+  .metrics-grid-completed {
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  }
+
+  .file-metadata-grid {
     grid-template-columns: 1fr;
   }
 
   .detail-footer {
     flex-direction: column;
+    align-items: stretch;
   }
 
-  .detail-footer button,
-  .detail-footer select {
+  .footer-left,
+  .footer-right {
     width: 100%;
   }
 
-  .header-info h2 {
-    font-size: 1.4rem;
+  .footer-right {
+    flex-direction: column;
+  }
+
+  .footer-left {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .status-select-modern {
+    width: 100%;
+  }
+
+  .table-modern {
+    font-size: var(--font-size-xs);
+  }
+
+  .table-modern th,
+  .table-modern td {
+    padding: var(--spacing-sm);
+  }
+
+  .confirmation-actions {
+    flex-direction: column;
+  }
+
+  .form-actions {
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 480px) {
+  .modal-overlay {
+    padding: 0;
+  }
+
+  .modal-container {
+    border-radius: 0;
+    max-height: 100vh;
+  }
+
+  .metrics-grid-primary,
+  .metrics-grid-completed {
+    grid-template-columns: 1fr;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/styles/animations.css b/src/styles/animations.css
new file mode 100644
index 0000000..138e01b
--- /dev/null
+++ b/src/styles/animations.css
@@ -0,0 +1,218 @@
+/* Common Animations */
+
+/* Keyframe Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+/* Animation Classes */
+.animate-fadeIn {
+  animation: fadeIn var(--transition-slow) ease-out;
+}
+
+.animate-slideUp {
+  animation: slideUp var(--transition-slow) ease-out;
+}
+
+.animate-slideDown {
+  animation: slideDown var(--transition-slow) ease-out;
+}
+
+.animate-slideInLeft {
+  animation: slideInLeft var(--transition-slow) ease-out;
+}
+
+.animate-slideInRight {
+  animation: slideInRight var(--transition-slow) ease-out;
+}
+
+.animate-scaleIn {
+  animation: scaleIn var(--transition-slow) ease-out;
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+/* Animation Delays */
+.delay-100 {
+  animation-delay: 0.1s;
+}
+
+.delay-200 {
+  animation-delay: 0.2s;
+}
+
+.delay-300 {
+  animation-delay: 0.3s;
+}
+
+.delay-400 {
+  animation-delay: 0.4s;
+}
+
+.delay-500 {
+  animation-delay: 0.5s;
+}
+
+/* Transition Classes */
+.transition-all {
+  transition: all var(--transition-base);
+}
+
+.transition-transform {
+  transition: transform var(--transition-base);
+}
+
+.transition-opacity {
+  transition: opacity var(--transition-base);
+}
+
+.transition-colors {
+  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
+}
+
+/* Hover Effects */
+.hover-lift {
+  transition: transform var(--transition-base), box-shadow var(--transition-base);
+}
+
+.hover-lift:hover {
+  transform: translateY(-4px);
+}
+
+.hover-scale {
+  transition: transform var(--transition-base);
+}
+
+.hover-scale:hover {
+  transform: scale(1.05);
+}
+
+.hover-brightness:hover {
+  filter: brightness(1.1);
+}
+
+/* Loading States */
+.loading-skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--color-border) 0%,
+    var(--color-surface-hover) 50%,
+    var(--color-border) 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+  border-radius: var(--radius-md);
+}
+
+.loading-spinner {
+  border: 3px solid var(--color-border);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
diff --git a/src/styles/components.css b/src/styles/components.css
new file mode 100644
index 0000000..72e7b2a
--- /dev/null
+++ b/src/styles/components.css
@@ -0,0 +1,375 @@
+/* Shared Component Styles */
+
+/* Card Components */
+.glass-card {
+  background: var(--glass-background);
+  backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-glass);
+  transition: all var(--transition-base);
+}
+
+.glass-card:hover {
+  background: var(--glass-background-hover);
+  box-shadow: var(--shadow-glass-hover);
+  transform: translateY(-2px);
+}
+
+.card {
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-lg);
+  box-shadow: var(--shadow-md);
+  transition: all var(--transition-base);
+}
+
+.card:hover {
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-2px);
+}
+
+/* Button Components */
+.btn {
+  padding: var(--spacing-sm) var(--spacing-lg);
+  border-radius: var(--radius-md);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-base);
+  transition: all var(--transition-base);
+  cursor: pointer;
+  border: none;
+  outline: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: var(--gradient-primary);
+  color: var(--color-text-inverse);
+  box-shadow: var(--shadow-md);
+}
+
+.btn-primary:hover:not(:disabled) {
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-2px);
+}
+
+.btn-secondary {
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--color-surface-hover);
+  border-color: var(--color-border-hover);
+}
+
+.btn-danger {
+  background: var(--gradient-danger);
+  color: var(--color-text-inverse);
+}
+
+.btn-icon {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  cursor: pointer;
+  transition: all var(--transition-base);
+}
+
+.btn-icon:hover {
+  background: var(--color-surface-hover);
+  border-color: var(--color-border-hover);
+}
+
+/* Input Components */
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.input-label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+}
+
+.input-field {
+  width: 100%;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-base);
+  color: var(--color-text-primary);
+  background: var(--color-surface);
+  transition: all var(--transition-base);
+}
+
+.input-field:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.input-field::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.input-icon {
+  position: absolute;
+  left: var(--spacing-md);
+  color: var(--color-text-tertiary);
+  pointer-events: none;
+}
+
+.input-wrapper .input-field {
+  padding-left: 2.5rem;
+}
+
+/* Badge Components */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem var(--spacing-sm);
+  border-radius: var(--radius-full);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+.badge-success {
+  background: rgba(16, 185, 129, 0.1);
+  color: #10b981;
+}
+
+.badge-warning {
+  background: rgba(245, 158, 11, 0.1);
+  color: #f59e0b;
+}
+
+.badge-danger {
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+}
+
+.badge-info {
+  background: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
+}
+
+/* Gradient Text */
+.gradient-text {
+  background: var(--gradient-primary);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Page Header */
+.page-header {
+  margin-bottom: var(--spacing-xl);
+}
+
+.page-title {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-sm);
+}
+
+.page-subtitle {
+  font-size: var(--font-size-lg);
+  color: var(--color-text-secondary);
+}
+
+/* Modal/Overlay */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-modal-backdrop);
+  backdrop-filter: blur(4px);
+}
+
+.modal-content {
+  background: var(--color-surface);
+  border-radius: var(--radius-xl);
+  padding: var(--spacing-xl);
+  max-width: 90vw;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: var(--shadow-2xl);
+  position: relative;
+  z-index: var(--z-modal);
+}
+
+/* Tab Navigation */
+.tab-navigation {
+  display: flex;
+  gap: var(--spacing-md);
+  border-bottom: 2px solid var(--color-border);
+  margin-bottom: var(--spacing-xl);
+}
+
+.tab-button {
+  padding: var(--spacing-md) var(--spacing-lg);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: all var(--transition-base);
+  margin-bottom: -2px;
+}
+
+.tab-button:hover {
+  color: var(--color-text-primary);
+}
+
+.tab-button.active {
+  color: var(--color-primary);
+  border-bottom-color: var(--color-primary);
+}
+
+/* Progress Indicators */
+.progress-ring {
+  transition: stroke-dashoffset var(--transition-slow);
+}
+
+.progress-bar {
+  height: 8px;
+  background: var(--color-border);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+.progress-bar-fill {
+  height: 100%;
+  background: var(--gradient-primary);
+  border-radius: var(--radius-full);
+  transition: width var(--transition-slow);
+}
+
+/* Stat Cards */
+.stat-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.stat-label {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
+}
+
+.stat-value {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+}
+
+.stat-change {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.stat-change.positive {
+  color: var(--color-secondary);
+}
+
+.stat-change.negative {
+  color: var(--color-danger);
+}
+
+/* Utility Classes */
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-sm {
+  gap: var(--spacing-sm);
+}
+
+.gap-md {
+  gap: var(--spacing-md);
+}
+
+.gap-lg {
+  gap: var(--spacing-lg);
+}
+
+.text-sm {
+  font-size: var(--font-size-sm);
+}
+
+.text-base {
+  font-size: var(--font-size-base);
+}
+
+.text-lg {
+  font-size: var(--font-size-lg);
+}
+
+.font-medium {
+  font-weight: var(--font-weight-medium);
+}
+
+.font-semibold {
+  font-weight: var(--font-weight-semibold);
+}
+
+.font-bold {
+  font-weight: var(--font-weight-bold);
+}
+
+.text-primary {
+  color: var(--color-text-primary);
+}
+
+.text-secondary {
+  color: var(--color-text-secondary);
+}
+
+.text-tertiary {
+  color: var(--color-text-tertiary);
+}
diff --git a/src/styles/modern-components.css b/src/styles/modern-components.css
new file mode 100644
index 0000000..1dfd79c
--- /dev/null
+++ b/src/styles/modern-components.css
@@ -0,0 +1,541 @@
+/* Modern Component Styles - TrainingPeaks/TrainerRoad Inspired */
+
+/* Enhanced Cards */
+.card-modern {
+  background: var(--color-surface);
+  border-radius: 12px;
+  padding: var(--spacing-xl);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--color-border);
+  transition: all var(--transition-base);
+}
+
+.card-modern:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  transform: translateY(-1px);
+}
+
+.card-modern-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--spacing-lg);
+  padding-bottom: var(--spacing-md);
+  border-bottom: 2px solid var(--color-divider);
+}
+
+.card-modern-title {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+.card-modern-subtitle {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  margin: var(--spacing-xs) 0 0 0;
+}
+
+/* Metric Cards */
+.metric-card {
+  background: var(--color-surface);
+  border-radius: 12px;
+  padding: var(--spacing-lg);
+  border: 1px solid var(--color-border);
+  transition: all var(--transition-base);
+  position: relative;
+  overflow: hidden;
+}
+
+.metric-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: var(--gradient-primary);
+}
+
+.metric-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
+  transform: translateY(-2px);
+}
+
+.metric-label {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: var(--spacing-xs);
+}
+
+.metric-value {
+  font-size: 2.5rem;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  line-height: 1;
+  margin-bottom: var(--spacing-sm);
+}
+
+.metric-change {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.metric-change.positive {
+  color: var(--color-secondary);
+}
+
+.metric-change.negative {
+  color: var(--color-danger);
+}
+
+/* Enhanced Buttons */
+.btn-modern {
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-base);
+  transition: all var(--transition-base);
+  cursor: pointer;
+  border: none;
+  outline: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.btn-modern:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-modern-primary {
+  background: var(--color-primary);
+  color: white;
+  box-shadow: 0 2px 4px rgba(0, 102, 204, 0.2);
+}
+
+.btn-modern-primary:hover:not(:disabled) {
+  background: var(--color-primary-dark);
+  box-shadow: 0 4px 8px rgba(0, 102, 204, 0.3);
+  transform: translateY(-1px);
+}
+
+.btn-modern-secondary {
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  border: 2px solid var(--color-border);
+}
+
+.btn-modern-secondary:hover:not(:disabled) {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+  background: rgba(0, 102, 204, 0.05);
+}
+
+.btn-modern-success {
+  background: var(--color-secondary);
+  color: white;
+  box-shadow: 0 2px 4px rgba(0, 200, 83, 0.2);
+}
+
+.btn-modern-success:hover:not(:disabled) {
+  background: #00a844;
+  box-shadow: 0 4px 8px rgba(0, 200, 83, 0.3);
+}
+
+.btn-modern-large {
+  padding: 16px 32px;
+  font-size: var(--font-size-lg);
+}
+
+.btn-modern-small {
+  padding: 8px 16px;
+  font-size: var(--font-size-sm);
+}
+
+/* Status Pills */
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 12px;
+  border-radius: 16px;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.status-pill-completed {
+  background: rgba(0, 200, 83, 0.1);
+  color: #00a844;
+}
+
+.status-pill-planned {
+  background: rgba(255, 152, 0, 0.1);
+  color: #f57c00;
+}
+
+.status-pill-skipped {
+  background: rgba(230, 57, 70, 0.1);
+  color: #d62828;
+}
+
+.status-pill-active {
+  background: rgba(0, 102, 204, 0.1);
+  color: var(--color-primary);
+}
+
+/* Info Boxes */
+.info-box {
+  padding: var(--spacing-md);
+  border-radius: 8px;
+  border-left: 4px solid;
+  font-size: var(--font-size-sm);
+  margin: var(--spacing-md) 0;
+}
+
+.info-box-info {
+  background: rgba(0, 188, 212, 0.1);
+  border-color: var(--color-info);
+  color: #00838f;
+}
+
+.info-box-warning {
+  background: rgba(255, 152, 0, 0.1);
+  border-color: var(--color-warning);
+  color: #ef6c00;
+}
+
+.info-box-success {
+  background: rgba(0, 200, 83, 0.1);
+  border-color: var(--color-secondary);
+  color: #00a844;
+}
+
+.info-box-danger {
+  background: rgba(230, 57, 70, 0.1);
+  border-color: var(--color-danger);
+  color: #d62828;
+}
+
+/* Enhanced Forms */
+.form-modern {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+}
+
+.form-group-modern {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.form-label-modern {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-xs);
+}
+
+.form-input-modern {
+  padding: 12px 16px;
+  border: 2px solid var(--color-border);
+  border-radius: 8px;
+  font-size: var(--font-size-base);
+  color: var(--color-text-primary);
+  background: var(--color-surface);
+  transition: all var(--transition-base);
+  font-family: var(--font-family);
+}
+
+.form-input-modern:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
+}
+
+.form-input-modern::placeholder {
+  color: var(--color-text-muted);
+}
+
+.form-input-modern:disabled {
+  background: var(--color-surface-secondary);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.form-helper-text {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+  margin-top: var(--spacing-xs);
+}
+
+.form-error-text {
+  font-size: var(--font-size-xs);
+  color: var(--color-danger);
+  margin-top: var(--spacing-xs);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+/* Data Tables */
+.table-modern {
+  width: 100%;
+  border-collapse: collapse;
+  background: var(--color-surface);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.table-modern thead {
+  background: var(--color-surface-secondary);
+}
+
+.table-modern th {
+  padding: 16px;
+  text-align: left;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-bottom: 2px solid var(--color-divider);
+}
+
+.table-modern td {
+  padding: 16px;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-primary);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.table-modern tbody tr {
+  transition: background var(--transition-fast);
+}
+
+.table-modern tbody tr:hover {
+  background: var(--color-surface-hover);
+}
+
+.table-modern tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* Progress Bars */
+.progress-bar-modern {
+  width: 100%;
+  height: 8px;
+  background: var(--color-border);
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
+
+.progress-bar-modern-fill {
+  height: 100%;
+  background: var(--gradient-primary);
+  border-radius: 4px;
+  transition: width var(--transition-slow);
+  position: relative;
+  overflow: hidden;
+}
+
+.progress-bar-modern-fill::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.3),
+    transparent
+  );
+  animation: shimmer 2s infinite;
+}
+
+/* Tooltips */
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip-text {
+  visibility: hidden;
+  background: var(--color-text-primary);
+  color: white;
+  text-align: center;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: var(--font-size-xs);
+  position: absolute;
+  z-index: var(--z-tooltip);
+  bottom: 125%;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity var(--transition-base);
+}
+
+.tooltip:hover .tooltip-text {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* Empty States */
+.empty-state-modern {
+  text-align: center;
+  padding: var(--spacing-4xl) var(--spacing-xl);
+}
+
+.empty-state-icon {
+  font-size: 64px;
+  margin-bottom: var(--spacing-lg);
+  opacity: 0.3;
+}
+
+.empty-state-title {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-sm);
+}
+
+.empty-state-description {
+  font-size: var(--font-size-base);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-xl);
+  max-width: 400px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Loading States */
+.loading-spinner-modern {
+  width: 40px;
+  height: 40px;
+  border: 4px solid var(--color-border);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-modal);
+  border-radius: inherit;
+}
+
+/* Section Headers */
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--spacing-xl);
+}
+
+.section-title {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+.section-description {
+  font-size: var(--font-size-base);
+  color: var(--color-text-secondary);
+  margin-top: var(--spacing-xs);
+}
+
+/* Zone Color Bars */
+.zone-bar {
+  height: 6px;
+  border-radius: 3px;
+  background: var(--color-border);
+  position: relative;
+  overflow: hidden;
+  margin-top: var(--spacing-sm);
+}
+
+.zone-bar-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width var(--transition-slow);
+}
+
+/* Icon Badges */
+.icon-badge {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  background: var(--gradient-primary);
+  color: white;
+  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.2);
+}
+
+/* Responsive Grid */
+.responsive-grid {
+  display: grid;
+  gap: var(--spacing-lg);
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+
+/* Utility Classes */
+.text-large {
+  font-size: var(--font-size-lg);
+}
+
+.text-small {
+  font-size: var(--font-size-sm);
+}
+
+.text-bold {
+  font-weight: var(--font-weight-bold);
+}
+
+.text-semibold {
+  font-weight: var(--font-weight-semibold);
+}
+
+.text-center {
+  text-align: center;
+}
+
+.mb-sm { margin-bottom: var(--spacing-sm); }
+.mb-md { margin-bottom: var(--spacing-md); }
+.mb-lg { margin-bottom: var(--spacing-lg); }
+.mb-xl { margin-bottom: var(--spacing-xl); }
+
+.mt-sm { margin-top: var(--spacing-sm); }
+.mt-md { margin-top: var(--spacing-md); }
+.mt-lg { margin-top: var(--spacing-lg); }
+.mt-xl { margin-top: var(--spacing-xl); }
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
new file mode 100644
index 0000000..97d3dd0
--- /dev/null
+++ b/src/styles/tokens.css
@@ -0,0 +1,164 @@
+/* Design Tokens - Centralized CSS Variables */
+:root {
+  /* Color Palette - TrainingPeaks/TrainerRoad Inspired */
+  --color-primary: #0066cc;
+  --color-primary-dark: #0052a3;
+  --color-primary-light: #3385d6;
+  --color-secondary: #00c853;
+  --color-danger: #e63946;
+  --color-warning: #ff9800;
+  --color-info: #00bcd4;
+
+  /* Gradients */
+  --gradient-primary: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
+  --gradient-secondary: linear-gradient(135deg, #00c853 0%, #00a844 100%);
+  --gradient-danger: linear-gradient(135deg, #e63946 0%, #d62828 100%);
+  --gradient-accent: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+
+  /* Neutral Colors - Light Mode */
+  --color-background: #f5f7fa;
+  --color-surface: #ffffff;
+  --color-surface-hover: #f8f9fb;
+  --color-surface-secondary: #f9fafb;
+  --color-border: #dfe3e8;
+  --color-border-hover: #c4cdd5;
+  --color-divider: #ebeef2;
+
+  /* Text Colors - Light Mode */
+  --color-text-primary: #1a1f36;
+  --color-text-secondary: #697386;
+  --color-text-tertiary: #8898aa;
+  --color-text-muted: #a8b4c0;
+  --color-text-inverse: #ffffff;
+  --color-text-link: #0066cc;
+
+  /* Glassmorphism */
+  --glass-background: rgba(255, 255, 255, 0.7);
+  --glass-background-hover: rgba(255, 255, 255, 0.85);
+  --glass-border: rgba(255, 255, 255, 0.3);
+  --glass-blur: blur(20px);
+
+  /* Spacing Scale */
+  --spacing-xs: 0.5rem;
+  --spacing-sm: 0.75rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 2.5rem;
+  --spacing-3xl: 3rem;
+  --spacing-4xl: 4rem;
+
+  /* Border Radius */
+  --radius-sm: 0.5rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1.5rem;
+  --radius-2xl: 2rem;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+
+  /* Custom Shadows for Glassmorphism */
+  --shadow-glass: 0 8px 25px -5px rgba(0, 0, 0, 0.1),
+                  0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-glass-hover: 0 12px 40px -8px rgba(0, 0, 0, 0.15),
+                        0 15px 15px -8px rgba(0, 0, 0, 0.06);
+
+  /* Typography */
+  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+                 'Helvetica Neue', Arial, sans-serif;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+
+  /* Transitions */
+  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slower: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Z-Index Scale */
+  --z-dropdown: 1000;
+  --z-sticky: 1020;
+  --z-fixed: 1030;
+  --z-modal-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+
+  /* Workout Type Colors */
+  --workout-ride: #3b82f6;
+  --workout-run: #10b981;
+  --workout-swim: #06b6d4;
+  --workout-strength: #8b5cf6;
+  --workout-yoga: #ec4899;
+  --workout-other: #6b7280;
+
+  /* Training Zone Colors */
+  --zone-1: #3b82f6;
+  --zone-2: #10b981;
+  --zone-3: #f59e0b;
+  --zone-4: #f97316;
+  --zone-5: #ef4444;
+}
+
+/* Dark Mode Overrides */
+.dark {
+  /* Neutral Colors - Dark Mode */
+  --color-background: #111827;
+  --color-surface: #1f2937;
+  --color-surface-hover: #374151;
+  --color-border: #374151;
+  --color-border-hover: #4b5563;
+
+  /* Text Colors - Dark Mode */
+  --color-text-primary: #f9fafb;
+  --color-text-secondary: #d1d5db;
+  --color-text-tertiary: #9ca3af;
+
+  /* Glassmorphism - Dark Mode */
+  --glass-background: rgba(31, 41, 55, 0.7);
+  --glass-background-hover: rgba(31, 41, 55, 0.85);
+  --glass-border: rgba(255, 255, 255, 0.1);
+
+  /* Shadows - Dark Mode (lighter for visibility) */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
+
+  --shadow-glass: 0 8px 25px -5px rgba(0, 0, 0, 0.4),
+                  0 10px 10px -5px rgba(0, 0, 0, 0.2);
+  --shadow-glass-hover: 0 12px 40px -8px rgba(0, 0, 0, 0.5),
+                        0 15px 15px -8px rgba(0, 0, 0, 0.3);
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --transition-fast: 0.01ms;
+    --transition-base: 0.01ms;
+    --transition-slow: 0.01ms;
+    --transition-slower: 0.01ms;
+  }
+}