diff --git a/.gitignore b/.gitignore
index 403adbc..6c976e9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,7 @@ node_modules
 # local env files
 .env.local
 .env.*.local
+.env
 
 # Log files
 npm-debug.log*
diff --git a/src/components/LoggedinPage.vue b/src/components/LoggedinPage.vue
index 422fc78..943c599 100644
--- a/src/components/LoggedinPage.vue
+++ b/src/components/LoggedinPage.vue
@@ -1,19 +1,259 @@
 <template>
-    <div class="logged-in">
-      <h2>You have successfully logged in!</h2>
-      <p>Welcome back to RideAware!</p>
+  <div class="logged-in-container">
+    <div class="success-card">
+      <div class="success-icon">
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <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>
+      <h1>Login Successful!</h1>
+      <p class="welcome-message">Welcome back to RideAware</p>
+      <p class="subtitle">You have successfully logged in. Get ready to train with focus and ride with awareness.</p>
+      
+      <div class="action-buttons">
+        <RouterLink to="/dashboard" class="btn-primary">
+          Go to Dashboard
+        </RouterLink>
+        <RouterLink to="/profile" class="btn-secondary">
+          Update Profile
+        </RouterLink>
+      </div>
     </div>
-  </template>
-  
-  <script>
-  export default {
-    name: 'LoggedInPage',
-  };
-  </script>
-  
-  <style scoped>
-  .logged-in {
-    text-align: center;
+    
+    <div class="background-decoration">
+      <div class="decoration-circle circle-1"></div>
+      <div class="decoration-circle circle-2"></div>
+      <div class="decoration-circle circle-3"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LoggedInPage',
+}
+</script>
+
+<style scoped>
+.logged-in-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  position: relative;
+  overflow: hidden;
+  padding: 2rem;
+}
+
+.success-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 2rem;
+  padding: 3rem;
+  text-align: center;
+  max-width: 500px;
+  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 ease-out;
+  position: relative;
+  z-index: 10;
+}
+
+.success-icon {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 2rem;
+  padding: 1.5rem;
+  background: linear-gradient(135deg, #34d399, #10b981);
+  border-radius: 50%;
+  color: white;
+  animation: checkmark 0.8s ease-out 0.3s both;
+  transform: scale(0);
+}
+
+.success-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+h1 {
+  margin: 0 0 1rem 0;
+  color: #1f2937;
+  font-size: 2.5rem;
+  font-weight: 800;
+  animation: fadeInUp 0.6s ease-out 0.4s both;
+  opacity: 0;
+}
+
+.welcome-message {
+  margin: 0 0 0.5rem 0;
+  color: #667eea;
+  font-size: 1.25rem;
+  font-weight: 600;
+  animation: fadeInUp 0.6s ease-out 0.5s both;
+  opacity: 0;
+}
+
+.subtitle {
+  margin: 0 0 2rem 0;
+  color: #6b7280;
+  font-size: 1rem;
+  line-height: 1.6;
+  animation: fadeInUp 0.6s ease-out 0.6s both;
+  opacity: 0;
+}
+
+.action-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  animation: fadeInUp 0.6s ease-out 0.7s both;
+  opacity: 0;
+}
+
+.btn-primary {
+  display: inline-block;
+  padding: 1rem 2rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  text-decoration: none;
+  border-radius: 1rem;
+  font-weight: 600;
+  font-size: 1.1rem;
+  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 {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+}
+
+.btn-secondary {
+  display: inline-block;
+  padding: 1rem 2rem;
+  background: rgba(102, 126, 234, 0.1);
+  color: #667eea;
+  text-decoration: none;
+  border-radius: 1rem;
+  font-weight: 600;
+  font-size: 1rem;
+  transition: all 0.3s ease;
+  border: 2px solid rgba(102, 126, 234, 0.2);
+}
+
+.btn-secondary:hover {
+  background: rgba(102, 126, 234, 0.2);
+  transform: translateY(-2px);
+}
+
+.background-decoration {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.decoration-circle {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  animation: float 6s ease-in-out infinite;
+}
+
+.circle-1 {
+  width: 200px;
+  height: 200px;
+  top: 10%;
+  left: -5%;
+  animation-delay: 0s;
+}
+
+.circle-2 {
+  width: 150px;
+  height: 150px;
+  top: 60%;
+  right: -10%;
+  animation-delay: 2s;
+}
+
+.circle-3 {
+  width: 100px;
+  height: 100px;
+  bottom: 10%;
+  left: 20%;
+  animation-delay: 4s;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(50px);
+    opacity: 0;
   }
-  </style>
-  
\ No newline at end of file
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    transform: translateY(30px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes checkmark {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+@media (max-width: 640px) {
+  .success-card {
+    padding: 2rem;
+    border-radius: 1.5rem;
+  }
+
+  h1 {
+    font-size: 2rem;
+  }
+
+  .success-icon {
+    width: 60px;
+    height: 60px;
+    margin-bottom: 1.5rem;
+  }
+
+  .action-buttons {
+    gap: 0.75rem;
+  }
+
+  .btn-primary,
+  .btn-secondary {
+    padding: 0.875rem 1.5rem;
+    font-size: 1rem;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ModernNavbar.vue b/src/components/ModernNavbar.vue
new file mode 100644
index 0000000..67fe145
--- /dev/null
+++ b/src/components/ModernNavbar.vue
@@ -0,0 +1,502 @@
+<template>
+  <nav class="modern-navbar">
+    <div class="navbar-container">
+      <RouterLink to="/dashboard" class="navbar-brand">
+        <h1>RideAware</h1>
+        <span class="tagline">Train Smart. Ride Aware.</span>
+      </RouterLink>
+      
+      <button class="mobile-menu-toggle" @click="toggleMobileMenu" :class="{ active: mobileMenuOpen }">
+        <span></span>
+        <span></span>
+        <span></span>
+      </button>
+      
+      <div class="navbar-menu" :class="{ active: mobileMenuOpen }">
+        <div class="nav-links">
+          <RouterLink to="/dashboard" class="nav-link" @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">
+            <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">
+            <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">
+            <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"/>
+            </svg>
+            <span>Zones</span>
+          </RouterLink>
+          <RouterLink to="/calendar" class="nav-link" @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"/>
+              <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"/>
+            </svg>
+            <span>Calendar</span>
+          </RouterLink>
+        </div>
+        
+        <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">
+              <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"/>
+              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              <line x1="1" y1="12" x2="3" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              <line x1="21" y1="12" x2="23" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              <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">
+              <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>
+          </button>
+          <div class="user-menu">
+            <button class="user-avatar" @click="toggleUserMenu">
+              <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"/>
+              </svg>
+            </button>
+            <div class="user-dropdown" :class="{ active: userMenuOpen }">
+              <div class="user-info">
+                <p class="username">{{ auth.user?.username || 'User' }}</p>
+                <small>{{ auth.user?.email || 'user@example.com' }}</small>
+              </div>
+              <hr>
+              <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
+              </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"/>
+                </svg>
+                Training Zones
+              </RouterLink>
+              <button @click="handleLogout" class="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
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuth } from '@/composables/useAuth'
+
+const router = useRouter()
+const auth = useAuth()
+
+const mobileMenuOpen = ref(false)
+const userMenuOpen = ref(false)
+const isDarkMode = ref(false)
+
+function toggleMobileMenu() {
+  mobileMenuOpen.value = !mobileMenuOpen.value
+  if (mobileMenuOpen.value) {
+    userMenuOpen.value = false
+  }
+}
+
+function closeMobileMenu() {
+  mobileMenuOpen.value = false
+}
+
+function closeMenus() {
+  mobileMenuOpen.value = false
+  userMenuOpen.value = false
+}
+
+function toggleUserMenu() {
+  userMenuOpen.value = !userMenuOpen.value
+}
+
+function toggleTheme() {
+  isDarkMode.value = !isDarkMode.value
+  document.documentElement.classList.toggle('dark', isDarkMode.value)
+}
+
+function handleLogout() {
+  auth.logout()
+  closeMenus()
+  router.push('/login')
+}
+</script>
+
+<style scoped>
+.modern-navbar {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.navbar-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0.75rem 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.navbar-brand {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.navbar-brand h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.tagline {
+  font-size: 0.75rem;
+  color: #6b7280;
+  font-weight: 500;
+  margin-top: -2px;
+}
+
+.mobile-menu-toggle {
+  display: none;
+  flex-direction: column;
+  gap: 5px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem;
+}
+
+.mobile-menu-toggle span {
+  width: 24px;
+  height: 2px;
+  background: #1f2937;
+  border-radius: 1px;
+  transition: all 0.3s ease;
+}
+
+.mobile-menu-toggle.active span:nth-child(1) {
+  transform: rotate(45deg) translate(8px, 8px);
+}
+
+.mobile-menu-toggle.active span:nth-child(2) {
+  opacity: 0;
+}
+
+.mobile-menu-toggle.active span:nth-child(3) {
+  transform: rotate(-45deg) translate(7px, -7px);
+}
+
+.navbar-menu {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+}
+
+.nav-links {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.nav-link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: 0.75rem;
+  text-decoration: none;
+  color: #374151;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  font-size: 0.95rem;
+}
+
+.nav-link svg {
+  width: 16px;
+  height: 16px;
+}
+
+.nav-link:hover {
+  background: rgba(102, 126, 234, 0.1);
+  color: #667eea;
+  transform: translateY(-1px);
+}
+
+.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);
+}
+
+.nav-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.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;
+}
+
+.theme-toggle svg {
+  width: 18px;
+  height: 18px;
+}
+
+.theme-toggle:hover {
+  background: #e5e7eb;
+  transform: rotate(20deg);
+}
+
+.user-menu {
+  position: relative;
+}
+
+.user-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 0.75rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border: none;
+  color: white;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.user-avatar svg {
+  width: 20px;
+  height: 20px;
+}
+
+.user-avatar:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+.user-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 0.5rem;
+  background: white;
+  border-radius: 1rem;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+  padding: 0;
+  min-width: 250px;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-10px);
+  transition: all 0.3s ease;
+  z-index: 1000;
+}
+
+.user-dropdown.active {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.user-info {
+  padding: 1rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.user-info .username {
+  margin: 0;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.user-info small {
+  display: block;
+  color: #6b7280;
+  margin-top: 0.25rem;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  color: #374151;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.dropdown-item svg {
+  width: 16px;
+  height: 16px;
+  color: #667eea;
+}
+
+.dropdown-item:hover {
+  background: #f8fafc;
+  color: #667eea;
+}
+
+.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;
+}
+
+.logout-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+.logout-btn:hover {
+  background: #fef2f2;
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+  .navbar-container {
+    padding: 0.75rem 1rem;
+  }
+
+  .mobile-menu-toggle {
+    display: flex;
+  }
+
+  .navbar-menu {
+    position: fixed;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(20px);
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1.5rem;
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
+    transform: translateY(-100%);
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+    max-height: calc(100vh - 60px);
+    overflow-y: auto;
+  }
+
+  .navbar-menu.active {
+    transform: translateY(0);
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .nav-links {
+    flex-direction: column;
+    gap: 0.5rem;
+    width: 100%;
+  }
+
+  .nav-link {
+    width: 100%;
+    justify-content: flex-start;
+    padding: 1rem;
+  }
+
+  .nav-actions {
+    flex-direction: column;
+    width: 100%;
+    gap: 1rem;
+  }
+
+  .theme-toggle {
+    width: 100%;
+    justify-content: flex-start;
+    background: #f3f4f6;
+  }
+
+  .user-menu {
+    width: 100%;
+  }
+
+  .user-avatar {
+    width: 100%;
+    justify-content: flex-start;
+    padding: 0 1rem;
+  }
+
+  .user-dropdown {
+    position: static;
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+    margin: 0;
+    box-shadow: none;
+    background: #f9fafb;
+    border-top: 1px solid #e5e7eb;
+    border-bottom: 1px solid #e5e7eb;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/PasswordReset.vue b/src/components/PasswordReset.vue
index e37571a..070ef9b 100644
--- a/src/components/PasswordReset.vue
+++ b/src/components/PasswordReset.vue
@@ -1,40 +1,149 @@
 <template>
   <div class="password-reset-container">
-    <div class="password-reset-card">
-      <h1>Reset Password</h1>
-      <p class="subtitle">Enter your email to receive a reset link</p>
+    <div class="reset-card">
+      <div class="card-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>{{ resetLinkSent ? 'Check Your Email' : 'Reset Password' }}</h1>
+        <p class="subtitle">
+          {{ resetLinkSent 
+            ? 'We\'ve sent password reset instructions to your email'
+            : 'Enter your email address and we\'ll send you a reset link'
+          }}
+        </p>
+      </div>
 
-      <form v-if="!resetLinkSent" @submit.prevent="handleRequestReset">
+      <form v-if="!resetLinkSent" @submit.prevent="handleRequestReset" class="reset-form">
+        <!-- Email Field -->
         <div class="form-group">
-          <label for="email">Email</label>
-          <input
-            id="email"
-            v-model="email"
-            type="email"
-            placeholder="Enter your email"
-            required
-          />
+          <label for="email">Email Address</label>
+          <div class="input-wrapper">
+            <input
+              id="email"
+              v-model="email"
+              type="email"
+              placeholder="Enter your email address"
+              required
+              :disabled="auth.loading"
+              autocomplete="email"
+            />
+            <svg class="input-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>
+          <small class="helper-text">We'll never share your email with anyone else.</small>
         </div>
 
+        <!-- Submit Button -->
         <button type="submit" :disabled="auth.loading" class="btn-primary">
-          {{ auth.loading ? 'Sending...' : 'Send Reset Link' }}
+          <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>
+            Sending...
+          </span>
+          <span v-else>Send Reset Link</span>
         </button>
       </form>
 
+      <!-- Success Section -->
       <div v-else class="success-section">
-        <h3>Check your email!</h3>
-        <p>We've sent a password reset link to {{ email }}</p>
-        <p class="small-text">Click the link in the email to reset your password</p>
+        <div class="check-animation">
+          <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>
+        <h3>Email Sent Successfully!</h3>
+        <p class="success-message">We've sent a password reset link to:</p>
+        <p class="email-display">{{ email }}</p>
+        <div class="instructions">
+          <div class="instruction-step">
+            <div class="step-number">1</div>
+            <div class="step-content">
+              <p><strong>Check your email</strong></p>
+              <p>Look for an email from RideAware with the reset link</p>
+            </div>
+          </div>
+          <div class="instruction-step">
+            <div class="step-number">2</div>
+            <div class="step-content">
+              <p><strong>Click the link</strong></p>
+              <p>Follow the link to create your new password</p>
+            </div>
+          </div>
+          <div class="instruction-step">
+            <div class="step-number">3</div>
+            <div class="step-content">
+              <p><strong>Log in again</strong></p>
+              <p>Use your new password to access your account</p>
+            </div>
+          </div>
+        </div>
+        <div class="spam-notice">
+          <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>
+          <p><strong>Tip:</strong> Didn't receive the email? Check your spam folder or try again in a few minutes.</p>
+        </div>
+        <button @click="resetForm" class="btn-secondary">
+          Try Another Email
+        </button>
       </div>
 
+      <!-- Error Message -->
       <div v-if="auth.error" class="error-message">
-        {{ auth.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>
+        <div>
+          <p class="error-title">Error</p>
+          <p class="error-text">{{ auth.error }}</p>
+        </div>
       </div>
+    </div>
 
-      <div class="links">
-        <RouterLink to="/login">Back to login</RouterLink>
+    <!-- Divider -->
+    <div v-if="!resetLinkSent" class="divider">
+      <span>Or</span>
+    </div>
+
+    <!-- Links Section -->
+    <div class="links-section" :class="{ 'success-mode': resetLinkSent }">
+      <RouterLink to="/login" class="back-link">
+        <svg viewBox="0 0 24 24" fill="none">
+          <path d="M19 12H5M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        Back to Login
+      </RouterLink>
+      <div v-if="!resetLinkSent" class="signup-prompt">
+        <p>Don't have an account?</p>
+        <RouterLink to="/signup" class="signup-link">
+          Create one now
+          <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"/>
+          </svg>
+        </RouterLink>
       </div>
     </div>
+
+    <!-- Background Decorations -->
+    <div class="background-decoration">
+      <div class="decoration-blob blob-1"></div>
+      <div class="decoration-blob blob-2"></div>
+      <div class="decoration-blob blob-3"></div>
+    </div>
   </div>
 </template>
 
@@ -54,54 +163,124 @@ async function handleRequestReset() {
     console.error('Password reset request failed:', error)
   }
 }
+
+function resetForm() {
+  resetLinkSent.value = false
+  email.value = ''
+  auth.error = ''
+}
 </script>
 
 <style scoped>
 .password-reset-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 1rem;
+  position: relative;
+  overflow: hidden;
 }
 
-.password-reset-card {
-  background: white;
-  padding: 2rem;
-  border-radius: 8px;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+/* ============================================
+   RESET CARD
+   ============================================ */
+.reset-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 2rem;
+  max-width: 480px;
   width: 100%;
-  max-width: 400px;
+  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);
+  position: relative;
+  z-index: 10;
+}
+
+/* ============================================
+   CARD HEADER
+   ============================================ */
+.card-header {
+  padding: 2.5rem 2rem 1rem;
+  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;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: iconBounce 0.6s ease-out 0.2s both;
+}
+
+.logo-wrapper svg {
+  width: 100%;
+  height: 100%;
 }
 
 h1 {
-  margin: 0 0 0.5rem 0;
-  color: #2c3e50;
-  font-size: 1.8rem;
+  margin: 0 0 0.75rem 0;
+  color: #1f2937;
+  font-size: 2rem;
+  font-weight: 800;
+  animation: titleSlide 0.6s ease-out 0.3s both;
 }
 
 .subtitle {
-  color: #7f8c8d;
-  margin-bottom: 1.5rem;
+  color: #6b7280;
+  font-size: 1rem;
+  line-height: 1.6;
+  margin: 0;
+  animation: subtitleFade 0.6s ease-out 0.4s both;
+}
+
+/* ============================================
+   RESET FORM
+   ============================================ */
+.reset-form {
+  padding: 1rem 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  animation: formSlide 0.6s ease-out 0.5s both;
 }
 
 .form-group {
-  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
 }
 
 label {
-  display: block;
-  margin-bottom: 0.5rem;
-  color: #2c3e50;
-  font-weight: 500;
+  font-weight: 600;
+  color: #374151;
+  font-size: 0.95rem;
+}
+
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
 }
 
 input {
   width: 100%;
-  padding: 0.75rem;
-  border: 1px solid #bdc3c7;
-  border-radius: 4px;
+  padding: 1rem 1rem 1rem 3rem;
+  border: 2px solid #e5e7eb;
+  border-radius: 1rem;
   font-size: 1rem;
+  font-family: inherit;
+  transition: all 0.3s ease;
+  background: white;
   box-sizing: border-box;
 }
 
@@ -109,69 +288,705 @@ 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 {
+  position: absolute;
+  left: 1rem;
+  width: 20px;
+  height: 20px;
+  color: #9ca3af;
+  pointer-events: none;
+}
+
+.helper-text {
+  font-size: 0.8rem;
+  color: #6b7280;
+  margin: 0;
+}
+
+/* ============================================
+   SUBMIT BUTTON
+   ============================================ */
 .btn-primary {
   width: 100%;
-  padding: 0.75rem;
+  padding: 1.125rem;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   border: none;
-  border-radius: 4px;
+  border-radius: 1rem;
   font-size: 1rem;
-  font-weight: 600;
+  font-weight: 700;
   cursor: pointer;
-  transition: transform 0.2s;
+  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(-2px);
+  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;
 }
 
+.loading-content {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  animation: spin 1s linear infinite;
+}
+
+/* ============================================
+   SUCCESS SECTION
+   ============================================ */
 .success-section {
+  padding: 1rem 2rem 2rem;
   text-align: center;
+  animation: formSlide 0.6s 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;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: checkBounce 0.6s ease-out;
+}
+
+.check-animation svg {
+  width: 100%;
+  height: 100%;
 }
 
 .success-section h3 {
-  margin: 0 0 0.5rem 0;
-  color: #27ae60;
+  margin: 0 0 1rem 0;
+  color: #065f46;
+  font-size: 1.5rem;
+  font-weight: 700;
 }
 
-.success-section p {
+.success-message {
   margin: 0.5rem 0;
-  color: #2c3e50;
+  color: #6b7280;
+  line-height: 1.6;
+  font-size: 0.95rem;
 }
 
-.small-text {
-  font-size: 0.9rem;
-  color: #7f8c8d;
-}
-
-.error-message {
-  margin-top: 1rem;
+.email-display {
+  color: #667eea !important;
+  font-weight: 600;
+  font-size: 1.1rem;
+  background: rgba(102, 126, 234, 0.1);
   padding: 0.75rem;
-  background-color: #fee;
-  color: #c33;
-  border-radius: 4px;
+  border-radius: 0.75rem;
+  margin: 1rem 0 !important;
+  word-break: break-all;
 }
 
-.links {
-  margin-top: 1.5rem;
-  text-align: center;
+/* ============================================
+   INSTRUCTIONS
+   ============================================ */
+.instructions {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin: 1.5rem 0;
+  text-align: left;
 }
 
-.links a {
+.instruction-step {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+  background: #f8fafc;
+  border-radius: 0.75rem;
+  border-left: 4px solid #667eea;
+}
+
+.step-number {
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  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;
+}
+
+.step-content p {
+  margin: 0;
+  color: #374151;
+  font-size: 0.9rem;
+  line-height: 1.4;
+}
+
+.step-content p:first-child {
+  font-weight: 600;
+  color: #1f2937;
+  margin-bottom: 0.25rem;
+}
+
+/* ============================================
+   SPAM NOTICE
+   ============================================ */
+.spam-notice {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+  background: #fef3c7;
+  border: 1px solid #fcd34d;
+  border-radius: 0.75rem;
+  margin: 1rem 0;
+}
+
+.spam-notice svg {
+  width: 20px;
+  height: 20px;
+  color: #92400e;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.spam-notice p {
+  margin: 0;
+  color: #92400e;
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.spam-notice strong {
+  color: #78350f;
+}
+
+/* ============================================
+   SECONDARY BUTTON
+   ============================================ */
+.btn-secondary {
+  padding: 0.875rem 1.5rem;
+  background: rgba(102, 126, 234, 0.1);
   color: #667eea;
+  border: 2px solid rgba(102, 126, 234, 0.2);
+  border-radius: 0.75rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-top: 1rem;
+}
+
+.btn-secondary:hover {
+  background: rgba(102, 126, 234, 0.2);
+  transform: translateY(-1px);
+}
+
+/* ============================================
+   ERROR MESSAGE
+   ============================================ */
+.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;
+  font-size: 0.9rem;
+  animation: shakeError 0.5s ease-out;
+}
+
+.error-message 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;
+}
+
+/* ============================================
+   DIVIDER
+   ============================================ */
+.divider {
+  position: relative;
+  text-align: center;
+  margin: 2rem 0 1.5rem;
+  z-index: 10;
+}
+
+.divider::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: -100px;
+  right: -100px;
+  height: 1px;
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.divider span {
+  position: relative;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 0 1rem;
+  color: white;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+/* ============================================
+   LINKS SECTION
+   ============================================ */
+.links-section {
+  text-align: center;
+  padding: 0 2rem 2rem;
+  z-index: 10;
+  position: relative;
+}
+
+.links-section.success-mode {
+  padding: 0;
+}
+
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  color: rgba(255, 255, 255, 0.9);
   text-decoration: none;
   font-weight: 600;
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.75rem;
+  background: rgba(255, 255, 255, 0.1);
+  transition: all 0.2s ease;
+  margin-bottom: 1rem;
 }
 
-.links a:hover {
+.back-link svg {
+  width: 16px;
+  height: 16px;
+}
+
+.back-link:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: translateY(-1px);
+}
+
+.signup-prompt {
+  margin-top: 1rem;
+}
+
+.signup-prompt p {
+  margin: 0 0 0.5rem 0;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.95rem;
+}
+
+.signup-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: white;
+  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 {
+  gap: 0.75rem;
   text-decoration: underline;
 }
+
+/* ============================================
+   BACKGROUND DECORATIONS
+   ============================================ */
+.background-decoration {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.decoration-blob {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  animation: float 8s ease-in-out infinite;
+}
+
+.blob-1 {
+  width: 400px;
+  height: 400px;
+  top: -10%;
+  left: -10%;
+  animation-delay: 0s;
+}
+
+.blob-2 {
+  width: 300px;
+  height: 300px;
+  bottom: -5%;
+  right: -5%;
+  animation-delay: 2s;
+}
+
+.blob-3 {
+  width: 200px;
+  height: 200px;
+  top: 50%;
+  left: -5%;
+  animation-delay: 4s;
+}
+
+/* ============================================
+   ANIMATIONS
+   ============================================ */
+@keyframes slideUp {
+  from {
+    transform: translateY(50px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes iconBounce {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes titleSlide {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes subtitleFade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes formSlide {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes checkBounce {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes shakeError {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-5px); }
+  75% { transform: translateX(5px); }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-30px) rotate(180deg);
+  }
+}
+
+/* ============================================
+   RESPONSIVE DESIGN
+   ============================================ */
+@media (max-width: 640px) {
+  .password-reset-container {
+    padding: 1rem;
+  }
+
+  .reset-card {
+    border-radius: 1.5rem;
+  }
+
+  .card-header {
+    padding: 2rem 1.5rem 1rem;
+  }
+
+  .reset-form {
+    padding: 1rem 1.5rem;
+  }
+
+  .success-section {
+    padding: 1rem 1.5rem 1.5rem;
+  }
+
+  .links-section {
+    padding: 0 1.5rem 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.75rem;
+  }
+
+  .subtitle {
+    font-size: 0.95rem;
+  }
+
+  .logo-wrapper {
+    width: 64px;
+    height: 64px;
+    margin-bottom: 1rem;
+    padding: 1rem;
+  }
+
+  .instructions {
+    gap: 0.75rem;
+  }
+
+  .instruction-step {
+    gap: 0.75rem;
+    padding: 0.75rem;
+  }
+
+  .step-number {
+    width: 32px;
+    height: 32px;
+    font-size: 0.9rem;
+  }
+
+  .step-content p {
+    font-size: 0.85rem;
+  }
+
+  .spam-notice {
+    gap: 0.75rem;
+    padding: 0.75rem;
+  }
+
+  .spam-notice svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .spam-notice p {
+    font-size: 0.85rem;
+  }
+
+  .email-display {
+    font-size: 1rem;
+    word-break: break-word;
+  }
+
+  input {
+    padding: 0.875rem 0.875rem 0.875rem 2.75rem;
+    font-size: 16px;
+  }
+
+  .input-icon {
+    left: 0.75rem;
+  }
+
+  .divider {
+    margin: 1.5rem 0 1rem;
+  }
+
+  .divider::before {
+    left: -50px;
+    right: -50px;
+  }
+
+  .back-link {
+    width: 100%;
+    margin-bottom: 1rem;
+  }
+
+  .signup-prompt p {
+    font-size: 0.9rem;
+  }
+
+  .blob-1 {
+    width: 300px;
+    height: 300px;
+  }
+
+  .blob-2 {
+    width: 200px;
+    height: 200px;
+  }
+
+  .blob-3 {
+    width: 150px;
+    height: 150px;
+  }
+}
+
+@media (max-width: 480px) {
+  .reset-card {
+    border-radius: 1.25rem;
+  }
+
+  .card-header {
+    padding: 1.5rem 1rem 0.75rem;
+  }
+
+  .reset-form {
+    padding: 0.75rem 1rem;
+    gap: 1rem;
+  }
+
+  .success-section {
+    padding: 0.75rem 1rem 1rem;
+  }
+
+  .links-section {
+    padding: 0 1rem 1rem;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+  }
+
+  .logo-wrapper {
+    width: 56px;
+    height: 56px;
+  }
+
+  .check-animation {
+    width: 64px;
+    height: 64px;
+    margin-bottom: 1rem;
+    padding: 1rem;
+  }
+
+  label {
+    font-size: 0.9rem;
+  }
+
+  .btn-primary {
+    padding: 1rem;
+    font-size: 0.95rem;
+  }
+
+  .btn-secondary {
+    padding: 0.75rem 1rem;
+    font-size: 0.9rem;
+  }
+
+  .error-message {
+    gap: 0.5rem;
+    padding: 0.75rem;
+    font-size: 0.85rem;
+  }
+
+  .error-message svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .divider span {
+    font-size: 0.85rem;
+  }
+
+  .signup-prompt {
+    margin-top: 0.75rem;
+  }
+
+  .signup-prompt p {
+    font-size: 0.85rem;
+    margin-bottom: 0.375rem;
+  }
+
+  .back-link {
+    padding: 0.625rem 1rem;
+    font-size: 0.9rem;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/TrainingZones.vue b/src/components/TrainingZones.vue
index 6501192..9cb1d7c 100644
--- a/src/components/TrainingZones.vue
+++ b/src/components/TrainingZones.vue
@@ -1,91 +1,391 @@
 <template>
   <div class="zones-page">
-    <nav class="navbar">
-      <div class="navbar-brand">
-        <h1>RideAware</h1>
-      </div>
-      <div class="navbar-menu">
-        <RouterLink to="/dashboard">Dashboard</RouterLink>
-        <RouterLink to="/profile">Profile</RouterLink>
-        <button @click="handleLogout" class="btn-logout">Logout</button>
-      </div>
-    </nav>
+    <!-- Use the shared navbar -->
+    <ModernNavbar />
 
     <div class="zones-content">
-      <h2>Training Zones</h2>
-      <p class="subtitle">Your personalized training zones based on FTP and Max HR</p>
-
-      <div v-if="!profile.profile?.ftp && !profile.profile?.max_hr" class="empty-state">
-        <p>Set your FTP and Max Heart Rate in your profile to see training zones</p>
-        <RouterLink to="/profile" class="btn-primary">Go to Profile</RouterLink>
+      <!-- Page Header -->
+      <div class="page-header">
+        <div class="header-content">
+          <h2>Training Zones</h2>
+          <p class="page-description">Your personalized training zones based on FTP and Max HR</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>
+          <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>
+        </div>
       </div>
 
+      <!-- Empty State -->
+      <div v-if="!profile.profile?.ftp && !profile.profile?.max_hr" class="empty-state">
+        <div class="empty-icon">
+          <svg viewBox="0 0 24 24" fill="none">
+            <circle cx="12" cy="12" r="10" 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>
+        </div>
+        <h3>No Training Data Available</h3>
+        <p>Set your FTP and Max Heart Rate in your profile to see personalized training zones</p>
+        <RouterLink to="/profile" class="btn-primary">
+          <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>
+          Complete Profile Setup
+        </RouterLink>
+      </div>
+
+      <!-- Zones Container -->
       <div v-else class="zones-container">
-        <!-- HR Zones -->
+        <!-- Heart Rate Zones -->
         <div v-if="profile.profile?.max_hr" class="zones-section">
-          <h3>Heart Rate Zones</h3>
-          <p class="zone-info">
-            <strong>Max HR:</strong> {{ profile.profile.max_hr }} bpm | 
-            <strong>Resting HR:</strong> {{ profile.profile.resting_hr || '??' }} bpm
-          </p>
+          <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>
+          </div>
 
           <div class="zones-grid">
-            <div v-for="(zone, index) in hrZones" :key="index" class="zone-card" :style="{ borderLeftColor: zone.color }">
-              <h4>{{ zone.name }}</h4>
-              <div class="zone-range">{{ zone.min }} - {{ zone.max }} bpm</div>
+            <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>
+              <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>
                 <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>
+              </div>
             </div>
           </div>
         </div>
 
         <!-- Power Zones -->
         <div v-if="profile.profile?.ftp" class="zones-section">
-          <h3>Power Zones (Watts)</h3>
-          <p class="zone-info">
-            <strong>FTP:</strong> {{ profile.profile.ftp }}W
-          </p>
+          <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>
+          </div>
 
           <div class="zones-grid">
-            <div v-for="(zone, index) in powerZones" :key="index" class="zone-card" :style="{ borderLeftColor: zone.color }">
-              <h4>{{ zone.name }}</h4>
-              <div class="zone-range">{{ zone.min }} - {{ zone.max }}W</div>
+            <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>
+              <div class="zone-range">
+                <span class="range-value">{{ zone.min }} - {{ zone.max }}</span>
+                <span class="range-unit">W</span>
+              </div>
               <div class="zone-percentage">
-                {{ calculatePercentage(zone.min) }}% - {{ calculatePercentage(zone.max) }}% FTP
+                <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>
               </div>
             </div>
           </div>
         </div>
       </div>
 
-      <!-- Zone Guides -->
+      <!-- Training Guide -->
       <div class="guides-section">
-        <h3>Training Guide</h3>
+        <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>
+          <p class="section-description">Learn how to effectively use each training zone</p>
+        </div>
+        
         <div class="guide-cards">
-          <div class="guide-card">
-            <h4>Recovery Rides</h4>
-            <p>Zone 1 - Low intensity recovery work. Focus on technique and breathing.</p>
+          <div class="guide-card" data-zone="1">
+            <div class="guide-header">
+              <div class="guide-icon recovery">
+                <svg 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"/>
+                  <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>
+              </div>
+              <div class="header-text">
+                <h4>Recovery Rides</h4>
+                <span class="zone-badge">Zone 1</span>
+              </div>
+            </div>
+            <p>Very light intensity for active recovery. Focus on easy spinning and improving pedal technique. You should be able to carry on a conversation easily.</p>
+            <div class="guide-benefits">
+              <div class="benefit-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>Promotes recovery</span>
+              </div>
+              <div class="benefit-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>Improves technique</span>
+              </div>
+            </div>
           </div>
-          <div class="guide-card">
-            <h4>Endurance Builds Base</h4>
-            <p>Zone 2 - Sustainable pace for building aerobic base. Should be able to hold conversation.</p>
+
+          <div class="guide-card" data-zone="2">
+            <div class="guide-header">
+              <div class="guide-icon endurance">
+                <svg 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>
+              </div>
+              <div class="header-text">
+                <h4>Endurance Base</h4>
+                <span class="zone-badge">Zone 2</span>
+              </div>
+            </div>
+            <p>Sustainable aerobic pace for building your engine. The foundation of all cycling fitness. Should feel comfortable for hours.</p>
+            <div class="guide-benefits">
+              <div class="benefit-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>Builds aerobic base</span>
+              </div>
+              <div class="benefit-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>Increases fat burning</span>
+              </div>
+            </div>
           </div>
-          <div class="guide-card">
-            <h4>Tempo Improves Efficiency</h4>
-            <p>Zone 3 - Comfortably hard. Improves lactate threshold and sustainable power.</p>
+
+          <div class="guide-card" data-zone="3">
+            <div class="guide-header">
+              <div class="guide-icon tempo">
+                <svg 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>
+              </div>
+              <div class="header-text">
+                <h4>Tempo Training</h4>
+                <span class="zone-badge">Zone 3</span>
+              </div>
+            </div>
+            <p>Comfortably hard pace that improves muscular endurance. Breathing becomes more noticeable but still controlled.</p>
+            <div class="guide-benefits">
+              <div class="benefit-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>Improves efficiency</span>
+              </div>
+              <div class="benefit-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>Builds strength</span>
+              </div>
+            </div>
           </div>
-          <div class="guide-card">
-            <h4>Threshold Builds Power</h4>
-            <p>Zone 4 - Hard efforts around your FTP. Key for improving functional threshold power.</p>
+
+          <div class="guide-card" data-zone="4">
+            <div class="guide-header">
+              <div class="guide-icon threshold">
+                <svg 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>
+              </div>
+              <div class="header-text">
+                <h4>Threshold Power</h4>
+                <span class="zone-badge">Zone 4</span>
+              </div>
+            </div>
+            <p>Hard sustainable effort around your FTP. This is where the magic happens for improving your power output and racing ability.</p>
+            <div class="guide-benefits">
+              <div class="benefit-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>Increases FTP</span>
+              </div>
+              <div class="benefit-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>Improves racing power</span>
+              </div>
+            </div>
           </div>
-          <div class="guide-card">
-            <h4>VO2 Max Builds Capacity</h4>
-            <p>Zone 5 - Max efforts. Improves aerobic capacity and power output.</p>
+
+          <div class="guide-card" data-zone="5">
+            <div class="guide-header">
+              <div class="guide-icon vo2max">
+                <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"/>
+                  <polyline points="16,16 12,12 8,16" stroke="currentColor" stroke-width="2" fill="none"/>
+                </svg>
+              </div>
+              <div class="header-text">
+                <h4>VO2 Max Power</h4>
+                <span class="zone-badge">Zone 5</span>
+              </div>
+            </div>
+            <p>Very hard efforts that improve your aerobic capacity. Short intervals with significant rest periods. Breathing is very hard.</p>
+            <div class="guide-benefits">
+              <div class="benefit-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>Boosts VO2 max</span>
+              </div>
+              <div class="benefit-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>Increases capacity</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="guide-card" data-zone="6">
+            <div class="guide-header">
+              <div class="guide-icon anaerobic">
+                <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"/>
+                </svg>
+              </div>
+              <div class="header-text">
+                <h4>Anaerobic Power</h4>
+                <span class="zone-badge">Zone 6</span>
+              </div>
+            </div>
+            <p>Severe intensity efforts above VO2 Max. Use sparingly for peak performance and developing maximum power production.</p>
+            <div class="guide-benefits">
+              <div class="benefit-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>Peak performance</span>
+              </div>
+              <div class="benefit-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>Max power output</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="guide-card" data-zone="7">
+            <div class="guide-header">
+              <div class="guide-icon sprint">
+                <svg viewBox="0 0 24 24" fill="none">
+                  <path d="M3 12C3 12 8 4 12 4S21 12 21 12" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>
+                  <path d="M3 12C3 12 8 20 12 20S21 12 21 12" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>
+                </svg>
+              </div>
+              <div class="header-text">
+                <h4>Sprint Power</h4>
+                <span class="zone-badge">Zone 7</span>
+              </div>
+            </div>
+            <p>Maximum intensity efforts lasting seconds. Develops explosive power and neuromuscular strength for competitive racing.</p>
+            <div class="guide-benefits">
+              <div class="benefit-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>Explosive power</span>
+              </div>
+              <div class="benefit-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>Racing strength</span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -95,35 +395,31 @@
 
 <script setup>
 import { ref, onMounted, computed } from 'vue'
-import { useRouter } from 'vue-router'
-import { useAuth } from '@/composables/useAuth'
 import api from '@/services/api'
-
-const router = useRouter()
-const auth = useAuth()
+import ModernNavbar from '@/components/ModernNavbar.vue'
 
 const profile = ref({ profile: null })
 const zones = ref({})
 
 const hrZones = computed(() => {
   return zones.value.hr_zones ? [
-    zones.value.hr_zones.zone_1,
-    zones.value.hr_zones.zone_2,
-    zones.value.hr_zones.zone_3,
-    zones.value.hr_zones.zone_4,
-    zones.value.hr_zones.zone_5,
+    { ...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' },
   ] : []
 })
 
 const powerZones = computed(() => {
   return zones.value.power_zones ? [
-    zones.value.power_zones.zone_1,
-    zones.value.power_zones.zone_2,
-    zones.value.power_zones.zone_3,
-    zones.value.power_zones.zone_4,
-    zones.value.power_zones.zone_5,
-    zones.value.power_zones.zone_6,
-    zones.value.power_zones.zone_7,
+    { ...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_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' },
+    { ...zones.value.power_zones.zone_6, name: 'Anaerobic', color: '#ef4444' },
+    { ...zones.value.power_zones.zone_7, name: 'Sprint', color: '#8b5cf6' },
   ] : []
 })
 
@@ -142,212 +438,719 @@ onMounted(async () => {
 function calculatePercentage(watts) {
   return Math.round((watts / profile.value.profile.ftp) * 100)
 }
-
-function handleLogout() {
-  auth.logout()
-  router.push('/login')
-}
 </script>
 
 <style scoped>
 .zones-page {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
 }
 
-.navbar {
-  background: white;
-  padding: 1rem 2rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+/* ============================================
+   ZONES CONTENT
+   ============================================ */
+.zones-content {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.page-header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  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;
 }
 
-.navbar-brand h1 {
+.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;
+}
+
+.page-description {
   margin: 0;
-  color: #667eea;
-  font-size: 1.5rem;
+  font-size: 1.1rem;
+  color: #6b7280;
+  font-weight: 500;
 }
 
-.navbar-menu {
+.zone-stats {
   display: flex;
   gap: 1.5rem;
+}
+
+.stat-card {
+  display: flex;
+  flex-direction: column;
   align-items: center;
-}
-
-.navbar-menu a {
-  color: #2c3e50;
-  text-decoration: none;
-  font-weight: 500;
-  transition: color 0.3s;
-}
-
-.navbar-menu a:hover {
-  color: #667eea;
-}
-
-.btn-logout {
-  padding: 0.5rem 1rem;
-  background: #e74c3c;
+  padding: 1.5rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 1.5rem;
   color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 600;
-  transition: background 0.3s;
+  min-width: 140px;
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
 }
 
-.btn-logout:hover {
-  background: #c0392b;
+.stat-value {
+  font-size: 1.75rem;
+  font-weight: 800;
+  margin-bottom: 0.25rem;
 }
 
-.zones-content {
-  max-width: 1200px;
-  margin: 2rem auto;
-  padding: 0 1rem;
-}
-
-.zones-content h2 {
-  margin-top: 0;
-  color: #2c3e50;
-}
-
-.subtitle {
-  color: #7f8c8d;
-  margin-bottom: 2rem;
-}
-
-.empty-state {
-  background: white;
-  padding: 3rem;
-  border-radius: 8px;
+.stat-label {
+  font-size: 0.8rem;
   text-align: center;
-  color: #7f8c8d;
+  opacity: 0.9;
+}
+
+/* ============================================
+   EMPTY STATE
+   ============================================ */
+.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);
+}
+
+.empty-icon {
+  width: 120px;
+  height: 120px;
+  margin: 0 auto 2rem;
+  padding: 2rem;
+  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
+  border-radius: 50%;
+  color: #6b7280;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.empty-state h3 {
+  margin: 0 0 1rem 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+.empty-state p {
+  margin: 0 0 2rem 0;
+  color: #6b7280;
+  font-size: 1.1rem;
+  line-height: 1.6;
 }
 
 .btn-primary {
-  display: inline-block;
-  margin-top: 1rem;
-  padding: 0.75rem 1.5rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem 2rem;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   text-decoration: none;
-  border-radius: 4px;
-  cursor: pointer;
+  border-radius: 1rem;
   font-weight: 600;
-  transition: transform 0.2s;
+  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: none;
+  cursor: pointer;
+}
+
+.btn-primary svg {
+  width: 20px;
+  height: 20px;
 }
 
 .btn-primary:hover {
-  transform: translateY(-2px);
+  transform: translateY(-3px);
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
 }
 
+/* ============================================
+   ZONES CONTAINER
+   ============================================ */
 .zones-container {
-  display: grid;
-  gap: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
 }
 
 .zones-section {
-  background: white;
+  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;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
   padding: 2rem;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  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%);
 }
 
-.zones-section h3 {
-  margin-top: 0;
-  color: #2c3e50;
-  border-bottom: 2px solid #667eea;
-  padding-bottom: 0.5rem;
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 }
 
-.zone-info {
-  color: #555;
-  margin: 1rem 0;
-  font-size: 0.95rem;
+.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(200px, 1fr));
-  gap: 1rem;
-  margin-top: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+  padding: 2rem;
 }
 
 .zone-card {
-  background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
+  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-radius: 8px;
-  border-left: 5px solid #667eea;
-  transition: transform 0.2s;
+  border-left: 5px solid var(--zone-color);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  animation: slideInUp 0.6s ease-out;
+}
+
+.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(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transform: translateY(-4px);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
 }
 
-.zone-card h4 {
-  margin: 0 0 0.75rem 0;
-  color: #2c3e50;
+.zone-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+}
+
+.zone-header h4 {
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.zone-name {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: #1f2937;
 }
 
 .zone-range {
-  font-size: 1.25rem;
-  font-weight: bold;
-  color: #667eea;
-  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.range-value {
+  font-size: 1.5rem;
+  font-weight: 800;
+  color: var(--zone-color);
+}
+
+.range-unit {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #6b7280;
 }
 
 .zone-percentage {
   font-size: 0.85rem;
-  color: #7f8c8d;
+  color: #6b7280;
+  margin-bottom: 1rem;
 }
 
 .zone-description {
+  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;
+}
+
+.description-icon {
+  width: 24px;
+  height: 24px;
+  color: var(--zone-color);
+  flex-shrink: 0;
+}
+
+.description-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.zone-description span {
   font-size: 0.9rem;
-  color: #555;
-  font-style: italic;
-  margin-top: 0.5rem;
+  color: #4b5563;
+  font-weight: 500;
 }
 
+.zone-progress {
+  margin-top: 1rem;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 6px;
+  background: #e5e7eb;
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: all 0.3s ease;
+}
+
+/* ============================================
+   TRAINING GUIDE
+   ============================================ */
 .guides-section {
-  background: white;
-  padding: 2rem;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  margin-top: 2rem;
-}
-
-.guides-section h3 {
-  margin-top: 0;
-  color: #2c3e50;
+  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;
 }
 
 .guide-cards {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 1.5rem;
-  margin-top: 1rem;
+  padding: 2rem;
 }
 
 .guide-card {
-  background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
-  padding: 1.5rem;
-  border-radius: 8px;
-  border-left: 4px solid #667eea;
+  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);
+  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);
+}
+
+.guide-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.guide-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: white;
+}
+
+.guide-icon.recovery {
+  background: linear-gradient(135deg, #10b981, #059669);
+}
+
+.guide-icon.endurance {
+  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+}
+
+.guide-icon.tempo {
+  background: linear-gradient(135deg, #f59e0b, #d97706);
+}
+
+.guide-icon.threshold {
+  background: linear-gradient(135deg, #ef4444, #dc2626);
+}
+
+.guide-icon.vo2max {
+  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
+}
+
+.guide-icon.anaerobic {
+  background: linear-gradient(135deg, #ec4899, #be185d);
+}
+
+.guide-icon.sprint {
+  background: linear-gradient(135deg, #06b6d4, #0891b2);
+}
+
+.guide-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.header-text {
+  flex: 1;
 }
 
 .guide-card h4 {
   margin: 0 0 0.5rem 0;
-  color: #2c3e50;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+.zone-badge {
+  padding: 0.25rem 0.75rem;
+  background: rgba(102, 126, 234, 0.1);
+  color: #667eea;
+  border-radius: 1rem;
+  font-size: 0.8rem;
+  font-weight: 600;
 }
 
 .guide-card p {
-  margin: 0;
-  color: #555;
+  margin: 0 0 1.5rem 0;
+  color: #4b5563;
+  line-height: 1.6;
   font-size: 0.95rem;
-  line-height: 1.5;
+}
+
+.guide-benefits {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.benefit-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: rgba(16, 185, 129, 0.05);
+  border-radius: 0.5rem;
+}
+
+.benefit-item svg {
+  width: 16px;
+  height: 16px;
+  color: #10b981;
+  flex-shrink: 0;
+}
+
+.benefit-item span {
+  font-size: 0.9rem;
+  color: #374151;
+  font-weight: 500;
+}
+
+/* ============================================
+   RESPONSIVE DESIGN
+   ============================================ */
+@media (max-width: 1024px) {
+  .page-header {
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .zone-stats {
+    align-self: stretch;
+    justify-content: center;
+  }
+
+  .zones-grid {
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  }
+
+  .guide-cards {
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .zones-content {
+    padding: 1rem;
+  }
+
+  .page-header {
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1.5rem;
+  }
+
+  .header-content h2 {
+    font-size: 2rem;
+  }
+
+  .zones-grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+    padding: 1.5rem;
+  }
+
+  .guide-cards {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+    padding: 1.5rem;
+  }
+
+  .section-header {
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1.5rem;
+  }
+
+  .zone-info-pill {
+    align-self: flex-start;
+  }
+
+  .stat-card {
+    min-width: auto;
+    width: 100%;
+  }
+}
+
+@media (max-width: 640px) {
+  .zones-content {
+    padding: 1rem;
+  }
+
+  .page-header {
+    padding: 1rem;
+  }
+
+  .header-content h2 {
+    font-size: 1.5rem;
+  }
+
+  .page-description {
+    font-size: 1rem;
+  }
+
+  .zone-stats {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .zones-grid {
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
+    padding: 1rem;
+  }
+
+  .zone-card {
+    padding: 1.25rem;
+  }
+
+  .guide-cards {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+    padding: 1rem;
+  }
+
+  .guide-card {
+    padding: 1.5rem;
+  }
+
+  .guide-header {
+    flex-direction: column;
+    text-align: center;
+    gap: 1rem;
+  }
+
+  .zone-badge {
+    align-self: center;
+  }
+
+  .section-header {
+    padding: 1rem;
+  }
+
+  .section-icon {
+    width: 28px;
+    height: 28px;
+  }
+
+  .section-title h3 {
+    font-size: 1.25rem;
+  }
+}
+
+/* ============================================
+   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) .zones-page {
+  background: linear-gradient(135deg, #0f172a 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) .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) .section-title h3 {
+  color: #f1f5f9;
+}
+
+:global(.dark) .header-content h2 {
+  color: #f1f5f9;
+}
+
+: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) .zone-card:hover,
+:global(.dark) .guide-card:hover {
+  border-color: rgba(102, 126, 234, 0.3);
+}
+
+: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 h3 {
+  color: #f1f5f9;
+}
+
+:global(.dark) .empty-state p {
+  color: #cbd5e1;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/UserDashboard.vue b/src/components/UserDashboard.vue
index 7cc0f5d..d3ab213 100644
--- a/src/components/UserDashboard.vue
+++ b/src/components/UserDashboard.vue
@@ -1,208 +1,1035 @@
 <template>
-  <div class="dashboard">
-    <nav class="navbar">
-      <div class="navbar-brand">
-        <h1>RideAware</h1>
-      </div>
-      <div class="navbar-menu">
-        <RouterLink to="/dashboard">Dashboard</RouterLink>
-        <RouterLink to="/profile">Profile</RouterLink>
-        <RouterLink to="/equipment">Equipment</RouterLink>
-        <RouterLink to="/zones">Zones</RouterLink>
-        <button @click="handleLogout" class="btn-logout">Logout</button>
-      </div>
-    </nav>
+  <div class="dashboard-container">
+    <!-- Use the shared navbar -->
+    <ModernNavbar />
 
+    <!-- Main Dashboard Content -->
     <div class="dashboard-content">
-      <div class="welcome">
-        <h2>Welcome back, {{ auth.user?.username }}!</h2>
-        <p>You have successfully logged in to RideAware</p>
-      </div>
-
-      <div class="stats-grid">
-        <div class="stat-card">
-          <h3>Total Rides</h3>
-          <p class="stat-value">0</p>
+      <!-- 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>
         </div>
-        <div class="stat-card">
-          <h3>Total Distance</h3>
-          <p class="stat-value">0 km</p>
-        </div>
-        <div class="stat-card">
-          <h3>Total Time</h3>
-          <p class="stat-value">0 hrs</p>
+        <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"/>
+          </svg>
+          <span>{{ currentDate }}</span>
         </div>
       </div>
 
-      <div class="quick-actions">
-        <RouterLink to="/equipment" class="action-card">
-          <h4>🚴 Manage Equipment</h4>
-          <p>Track your bikes and gear</p>
-        </RouterLink>
-        <RouterLink to="/zones" class="action-card">
-          <h4>⚡ Training Zones</h4>
-          <p>View your personalized zones</p>
-        </RouterLink>
-        <RouterLink to="/profile" class="action-card">
-          <h4>👤 Edit Profile</h4>
-          <p>Update your stats and info</p>
-        </RouterLink>
+      <!-- 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>
+
+        <!-- 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">
+              <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"/>
+              </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` }"
+              />
+            </svg>
+            <div class="ring-content">
+              <span class="ring-percentage">{{ todayProgress }}%</span>
+              <span class="ring-label">Complete</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Small: Next Workout -->
+        <div class="bento-item small">
+          <h3>Next Workout</h3>
+          <div v-if="nextWorkout" class="next-workout">
+            <div class="next-workout-time">
+              {{ 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>
+          </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">
+                <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
+            </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>
+            </RouterLink>
+            <RouterLink to="/equipment" class="action-button">
+              <div class="action-icon">🚴</div>
+              <span>Manage Gear</span>
+            </RouterLink>
+            <RouterLink to="/zones" class="action-button">
+              <div class="action-icon">⚡</div>
+              <span>Training Zones</span>
+            </RouterLink>
+            <button @click="startQuickWorkout" class="action-button">
+              <div class="action-icon">🏃</div>
+              <span>Quick Start</span>
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuth } from '@/composables/useAuth'
+import api from '@/services/api'
+import ModernNavbar from '@/components/ModernNavbar.vue'
 
 const router = useRouter()
 const auth = useAuth()
 
-async function handleLogout() {
-  auth.logout()
-  router.push('/login')
+const activePeriod = ref('week')
+const todayProgress = ref(65)
+
+const stats = ref({
+  totalRides: 0,
+  totalDistance: '0 km',
+  totalTime: '0h',
+  elevationGain: '0m'
+})
+
+const recentWorkouts = ref([])
+const nextWorkout = ref(null)
+
+const currentDate = computed(() => {
+  const now = new Date()
+  return now.toLocaleDateString('en-US', { 
+    weekday: 'long', 
+    year: 'numeric', 
+    month: 'long', 
+    day: 'numeric' 
+  })
+})
+
+onMounted(async () => {
+  try {
+    await loadRecentWorkouts()
+    loadNextWorkout()
+  } catch (error) {
+    console.error('Failed to load dashboard data:', error)
+  }
+})
+
+async function loadRecentWorkouts() {
+  try {
+    const { data } = await api.get('/api/protected/workouts')
+    recentWorkouts.value = data || []
+  } catch (error) {
+    console.error('Failed to load workouts:', error)
+  }
+}
+
+function loadNextWorkout() {
+  if (recentWorkouts.value.length > 0) {
+    const upcomingWorkouts = recentWorkouts.value
+      .filter(w => new Date(w.scheduled_date) >= new Date())
+      .sort((a, b) => new Date(a.scheduled_date) - new Date(b.scheduled_date))
+    
+    if (upcomingWorkouts.length > 0) {
+      nextWorkout.value = upcomingWorkouts[0]
+    }
+  }
+}
+
+function startQuickWorkout() {
+  router.push('/calendar')
+}
+
+function getWorkoutColor(type) {
+  const colors = {
+    'Cycling': '#667eea',
+    'Running': '#ef4444',
+    'Swim': '#06b6d4',
+    'Strength': '#f59e0b',
+    'Recovery': '#10b981'
+  }
+  return colors[type] || '#667eea'
+}
+
+function getWorkoutEmoji(type) {
+  const emojis = {
+    'Cycling': '🚴',
+    'Running': '🏃',
+    'Swim': '🏊',
+    'Strength': '💪',
+    'Recovery': '😌'
+  }
+  return emojis[type] || '🏋️'
+}
+
+function formatWorkoutDate(dateStr) {
+  const date = new Date(dateStr)
+  const today = new Date()
+  const yesterday = new Date(today)
+  yesterday.setDate(yesterday.getDate() - 1)
+
+  if (date.toDateString() === today.toDateString()) {
+    return 'Today'
+  } else if (date.toDateString() === yesterday.toDateString()) {
+    return 'Yesterday'
+  } else {
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+  }
+}
+
+function formatNextWorkoutTime(workout) {
+  const date = new Date(workout.scheduled_date)
+  return date.toLocaleDateString('en-US', { 
+    weekday: 'short', 
+    month: 'short', 
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
 }
 </script>
 
 <style scoped>
-.dashboard {
+.dashboard-container {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
 }
 
-.navbar {
-  background: white;
-  padding: 1rem 2rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+/* ============================================
+   DASHBOARD CONTENT
+   ============================================ */
+.dashboard-content {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.welcome-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-}
-
-.navbar-brand h1 {
-  margin: 0;
-  color: #667eea;
-  font-size: 1.5rem;
-}
-
-.navbar-menu {
-  display: flex;
-  gap: 1.5rem;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.navbar-menu a {
-  color: #2c3e50;
-  text-decoration: none;
-  font-weight: 500;
-  transition: color 0.3s;
-}
-
-.navbar-menu a:hover {
-  color: #667eea;
-}
-
-.btn-logout {
-  padding: 0.5rem 1rem;
-  background: #e74c3c;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 600;
-  transition: background 0.3s;
-}
-
-.btn-logout:hover {
-  background: #c0392b;
-}
-
-.dashboard-content {
-  max-width: 1200px;
-  margin: 2rem auto;
-  padding: 0 1rem;
-}
-
-.welcome {
-  background: white;
-  padding: 2rem;
-  border-radius: 8px;
   margin-bottom: 2rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  text-align: center;
+  animation: slideInDown 0.6s ease-out;
 }
 
-.welcome h2 {
+.welcome-content h1 {
   margin: 0 0 0.5rem 0;
-  color: #2c3e50;
+  font-size: 2.5rem;
+  font-weight: 800;
+  color: #1f2937;
 }
 
-.welcome p {
+.username-highlight {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.welcome-subtitle {
   margin: 0;
-  color: #7f8c8d;
+  font-size: 1.1rem;
+  color: #6b7280;
+  font-weight: 500;
 }
 
-.stats-grid {
+.date-info {
+  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(auto-fit, minmax(250px, 1fr));
+  grid-template-columns: repeat(12, 1fr);
+  grid-template-rows: auto;
   gap: 1.5rem;
-  margin-bottom: 2rem;
+  margin-top: 2rem;
 }
 
-.stat-card {
-  background: white;
+.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;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  text-align: center;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: slideInUp 0.6s ease-out;
 }
 
-.stat-card h3 {
-  margin: 0 0 1rem 0;
-  color: #7f8c8d;
+.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;
+}
+
+.period-btn {
+  padding: 0.5rem 1rem;
+  background: none;
+  border: none;
+  border-radius: 0.375rem;
+  color: #6b7280;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.period-btn.active {
+  background: white;
+  color: #667eea;
+  box-shadow: 0 1px 2px 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;
+}
+
+.view-all-link:hover {
+  color: #764ba2;
+  transform: translateX(2px);
+}
+
+/* Chart Container */
+.chart-container {
+  height: 200px;
+  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;
+  color: white;
+}
+
+.stat-icon.rides {
+  background: linear-gradient(135deg, #667eea, #764ba2);
+}
+
+.stat-icon.distance {
+  background: linear-gradient(135deg, #10b981, #059669);
+}
+
+.stat-icon.time {
+  background: linear-gradient(135deg, #f59e0b, #d97706);
+}
+
+.stat-icon.elevation {
+  background: linear-gradient(135deg, #ef4444, #dc2626);
+}
+
+.stat-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.stat-details {
+  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;
-  font-size: 2rem;
-  color: #667eea;
+  margin: 0.25rem 0 0 0;
+  font-size: 1.5rem;
   font-weight: 700;
+  color: #1f2937;
 }
 
-.quick-actions {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 1.5rem;
+/* Recent Workouts */
+.recent-workouts {
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
 }
 
-.action-card {
-  background: white;
-  padding: 1.5rem;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  text-decoration: none;
-  color: inherit;
-  transition: transform 0.2s, box-shadow 0.2s;
-  border-left: 4px solid #667eea;
+.workouts-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
-.action-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+.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;
 }
 
-.action-card h4 {
-  margin: 0 0 0.5rem 0;
-  color: #2c3e50;
+.workout-item:hover {
+  background: rgba(248, 250, 252, 1);
+  transform: translateX(4px);
 }
 
-.action-card p {
+.workout-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  flex-shrink: 0;
+}
+
+.workout-details {
+  flex: 1;
+}
+
+.workout-name {
   margin: 0;
-  color: #7f8c8d;
+  font-weight: 600;
+  color: #1f2937;
   font-size: 0.95rem;
 }
+
+.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 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 1rem;
+  color: #6b7280;
+}
+
+.empty-message svg {
+  width: 48px;
+  height: 48px;
+  opacity: 0.5;
+}
+
+/* Progress Ring */
+.progress-ring {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 160px;
+}
+
+.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;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.ring-percentage {
+  font-size: 1.75rem;
+  font-weight: 800;
+  color: #667eea;
+}
+
+.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-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;
+  align-items: center;
+  color: #667eea;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 0.9rem;
+  transition: all 0.2s ease;
+  margin-top: 0.5rem;
+}
+
+.view-btn:hover {
+  color: #764ba2;
+  transform: translateX(2px);
+}
+
+.no-upcoming {
+  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);
+}
+
+/* Quick Actions */
+.action-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.action-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1.5rem 1rem;
+  background: rgba(248, 250, 252, 0.5);
+  border-radius: 1rem;
+  text-decoration: none;
+  color: #374151;
+  font-weight: 600;
+  transition: all 0.2s ease;
+  border: 2px solid transparent;
+  cursor: pointer;
+}
+
+.action-button:hover {
+  background: rgba(248, 250, 252, 1);
+  border-color: #667eea;
+  transform: translateY(-2px);
+}
+
+.action-icon {
+  font-size: 2rem;
+}
+
+/* ============================================
+   RESPONSIVE DESIGN
+   ============================================ */
+@media (max-width: 1024px) {
+  .bento-item.large {
+    grid-column: span 12;
+  }
+
+  .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;
+  }
+}
+
+@media (max-width: 768px) {
+  .dashboard-content {
+    padding: 1rem;
+  }
+
+  .bento-item {
+    grid-column: span 12 !important;
+  }
+
+  .action-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .welcome-header {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .header-content h1 {
+    font-size: 1.75rem;
+  }
+
+  .date-info {
+    align-self: stretch;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 640px) {
+  .welcome-content h1 {
+    font-size: 1.5rem;
+  }
+
+  .welcome-subtitle {
+    font-size: 1rem;
+  }
+
+  .bento-item {
+    padding: 1.25rem;
+    border-radius: 1rem;
+  }
+
+  .stats-list {
+    gap: 0.75rem;
+  }
+
+  .stat-item {
+    padding: 0.75rem;
+  }
+
+  .stat-icon {
+    width: 40px;
+    height: 40px;
+  }
+
+  .stat-value {
+    font-size: 1.25rem;
+  }
+
+  .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 4fc2513..f91721b 100644
--- a/src/components/UserEquipment.vue
+++ b/src/components/UserEquipment.vue
@@ -1,136 +1,285 @@
 <template>
   <div class="equipment-page">
-    <nav class="navbar">
-      <div class="navbar-brand">
-        <h1>RideAware</h1>
-      </div>
-      <div class="navbar-menu">
-        <RouterLink to="/dashboard">Dashboard</RouterLink>
-        <RouterLink to="/profile">Profile</RouterLink>
-        <button @click="handleLogout" class="btn-logout">Logout</button>
-      </div>
-    </nav>
+    <!-- Use the shared navbar -->
+    <ModernNavbar />
 
     <div class="equipment-content">
-      <div class="header">
-        <h2>Equipment Management</h2>
-        <button @click="showAddForm = true" class="btn-primary">Add Equipment</button>
+      <!-- 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>
+        </div>
+        <button @click="showAddForm = true" class="btn-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"/>
+          </svg>
+          Add Equipment
+        </button>
       </div>
 
-      <!-- Add Equipment Form -->
-      <div v-if="showAddForm" class="equipment-form-card">
-        <h3>Add New Equipment</h3>
-        <form @submit.prevent="handleAddEquipment">
-          <div class="form-row">
-            <div class="form-group">
-              <label>Name *</label>
-              <input v-model="newEquipment.name" type="text" required />
-            </div>
-            <div class="form-group">
-              <label>Type *</label>
-              <select v-model="newEquipment.type" required>
-                <option value="">Select 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>
-
-          <div class="form-row">
-            <div class="form-group">
-              <label>Brand</label>
-              <input v-model="newEquipment.brand" type="text" />
-            </div>
-            <div class="form-group">
-              <label>Model</label>
-              <input v-model="newEquipment.model" type="text" />
-            </div>
-          </div>
-
-          <div class="form-row">
-            <div class="form-group">
-              <label>Weight (grams)</label>
-              <input v-model.number="newEquipment.weight" type="number" step="0.1" />
-            </div>
-          </div>
-
-          <div class="form-group">
-            <label>Notes</label>
-            <textarea v-model="newEquipment.notes" placeholder="Any notes about this equipment"></textarea>
-          </div>
-
-          <div class="form-actions">
-            <button type="submit" :disabled="auth.loading" class="btn-primary">
-              {{ auth.loading ? 'Adding...' : 'Add Equipment' }}
-            </button>
-            <button type="button" @click="showAddForm = false" class="btn-secondary">
-              Cancel
+      <!-- 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">
+              <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>
 
-        <div v-if="auth.error" class="error-message">
-          {{ auth.error }}
+          <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>
+
+            <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>
       </div>
 
-      <!-- Equipment List -->
+      <!-- Equipment Grid -->
       <div v-if="equipment.length > 0" class="equipment-grid">
-        <div v-for="item in equipment" :key="item.id" class="equipment-card">
-          <div class="equipment-header">
-            <h4>{{ item.name }}</h4>
-            <span class="equipment-type">{{ item.type }}</span>
-          </div>
+        <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">
-            <p v-if="item.brand"><strong>Brand:</strong> {{ item.brand }}</p>
-            <p v-if="item.model"><strong>Model:</strong> {{ item.model }}</p>
-            <p v-if="item.weight"><strong>Weight:</strong> {{ item.weight }}g</p>
-            <p v-if="item.notes"><strong>Notes:</strong> {{ item.notes }}</p>
-          </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="editingId = item.id" class="btn-edit">Edit</button>
-            <button @click="handleDeleteEquipment(item.id)" class="btn-danger">Delete</button>
+            <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>
           </div>
 
           <!-- Edit Form -->
-          <div v-if="editingId === item.id" class="edit-form">
-            <form @submit.prevent="handleUpdateEquipment(item.id)">
-              <div class="form-group">
-                <label>Name</label>
-                <input v-model="editForm.name" type="text" />
-              </div>
-              <div class="form-group">
+          <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-group">
+              <div class="form-section">
                 <label>Model</label>
                 <input v-model="editForm.model" type="text" />
               </div>
-              <div class="form-group">
+            </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-group">
-                <label>Notes</label>
-                <textarea v-model="editForm.notes"></textarea>
+              <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 class="form-actions">
-                <button type="submit" class="btn-primary">Save</button>
-                <button type="button" @click="editingId = null" class="btn-secondary">Cancel</button>
-              </div>
-            </form>
-          </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>
       </div>
 
-      <div v-else-if="!showAddForm" class="empty-state">
-        <p>No equipment yet. Add your first bike or gear!</p>
+      <!-- Empty State -->
+      <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"/>
+          </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">
+          <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"/>
+          </svg>
+          Add Your First Equipment
+        </button>
+      </div>
+
+      <!-- Success Message -->
+      <div v-if="successMessage" class="success-message" @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"/>
+        </svg>
+        {{ successMessage }}
+      </div>
+
+      <!-- Error Message -->
+      <div v-if="generalError" class="error-notification" @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"/>
+          <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
+        </svg>
+        {{ generalError }}
       </div>
     </div>
   </div>
@@ -138,17 +287,16 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { useAuth } from '@/composables/useAuth'
 import api from '@/services/api'
-
-const router = useRouter()
-const auth = useAuth()
+import ModernNavbar from '@/components/ModernNavbar.vue'
 
 const equipment = ref([])
 const showAddForm = ref(false)
 const editingId = ref(null)
-const editForm = ref({})
+const loading = ref(false)
+const error = ref('')
+const successMessage = ref('')
+const generalError = ref('')
 
 const newEquipment = ref({
   name: '',
@@ -157,25 +305,67 @@ const newEquipment = ref({
   model: '',
   weight: 0,
   notes: '',
+  condition: '',
+  purchase_date: ''
+})
+
+const editForm = ref({
+  name: '',
+  brand: '',
+  model: '',
+  weight: 0,
+  notes: '',
+  condition: ''
 })
 
 onMounted(async () => {
   try {
     const { data } = await api.get('/api/protected/equipment')
-    equipment.value = data
-  } catch (error) {
-    console.error('Failed to load equipment:', error)
+    equipment.value = data || []
+  } catch (err) {
+    console.error('Failed to load equipment:', err)
+    generalError.value = 'Failed to load equipment'
   }
 })
 
 async function handleAddEquipment() {
+  loading.value = true
+  error.value = ''
+
   try {
     const { data } = await api.post('/api/protected/equipment', newEquipment.value)
     equipment.value.push(data)
-    newEquipment.value = { name: '', type: '', brand: '', model: '', weight: 0, notes: '' }
+    newEquipment.value = {
+      name: '',
+      type: '',
+      brand: '',
+      model: '',
+      weight: 0,
+      notes: '',
+      condition: '',
+      purchase_date: ''
+    }
     showAddForm.value = false
-  } catch (error) {
-    console.error('Failed to add equipment:', error)
+    successMessage.value = 'Equipment added successfully!'
+    setTimeout(() => {
+      successMessage.value = ''
+    }, 3000)
+  } catch (err) {
+    error.value = err.response?.data?.error || 'Failed to add equipment'
+  } finally {
+    loading.value = false
+  }
+}
+
+function startEdit(item) {
+  editingId.value = item.id
+  editForm.value = {
+    name: item.name,
+    brand: item.brand,
+    model: item.model,
+    weight: item.weight,
+    notes: item.notes,
+    condition: item.condition
   }
 }
 
@@ -187,8 +377,13 @@ async function handleUpdateEquipment(id) {
       equipment.value[index] = data
     }
     editingId.value = null
-  } catch (error) {
-    console.error('Failed to update equipment:', error)
+    successMessage.value = 'Equipment updated successfully!'
+    setTimeout(() => {
+      successMessage.value = ''
+    }, 3000)
+  } catch (err) {
+    console.error('Failed to update equipment:', err)
+    generalError.value = 'Failed to update equipment'
   }
 }
 
@@ -197,133 +392,193 @@ async function handleDeleteEquipment(id) {
     try {
       await api.delete(`/api/protected/equipment?id=${id}`)
       equipment.value = equipment.value.filter(e => e.id !== id)
-    } catch (error) {
-      console.error('Failed to delete equipment:', error)
+      successMessage.value = 'Equipment deleted successfully!'
+      setTimeout(() => {
+        successMessage.value = ''
+      }, 3000)
+    } catch (err) {
+      console.error('Failed to delete equipment:', err)
+      generalError.value = 'Failed to delete equipment'
     }
   }
 }
 
-function handleLogout() {
-  auth.logout()
-  router.push('/login')
+function closeModal() {
+  showAddForm.value = false
+  error.value = ''
+}
+
+function formatEquipmentType(type) {
+  const types = {
+    bike: 'Bike',
+    shoes: 'Shoes',
+    helmet: 'Helmet',
+    wetsuit: 'Wetsuit',
+    other: 'Other'
+  }
+  return types[type] || type
+}
+
+function formatDate(dateStr) {
+  return new Date(dateStr).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  })
 }
 </script>
 
 <style scoped>
 .equipment-page {
   min-height: 100vh;
-  background: #f5f5f5;
-}
-
-.navbar {
-  background: white;
-  padding: 1rem 2rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.navbar-brand h1 {
-  margin: 0;
-  color: #667eea;
-  font-size: 1.5rem;
-}
-
-.navbar-menu {
-  display: flex;
-  gap: 1.5rem;
-  align-items: center;
-}
-
-.navbar-menu a {
-  color: #2c3e50;
-  text-decoration: none;
-  font-weight: 500;
-  transition: color 0.3s;
-}
-
-.navbar-menu a:hover {
-  color: #667eea;
-}
-
-.btn-logout {
-  padding: 0.5rem 1rem;
-  background: #e74c3c;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 600;
-  transition: background 0.3s;
-}
-
-.btn-logout:hover {
-  background: #c0392b;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
 }
 
+/* ============================================
+   EQUIPMENT CONTENT
+   ============================================ */
 .equipment-content {
-  max-width: 1200px;
-  margin: 2rem auto;
-  padding: 0 1rem;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 2rem;
 }
 
-.header {
+.page-header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   margin-bottom: 2rem;
+  gap: 2rem;
+  animation: slideInDown 0.6s ease-out;
 }
 
-.header h2 {
+.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;
+}
+
+.page-description {
   margin: 0;
-  color: #2c3e50;
+  font-size: 1.1rem;
+  color: #6b7280;
+  font-weight: 500;
 }
 
 .btn-primary {
-  padding: 0.75rem 1.5rem;
+  display: inline-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: 4px;
-  cursor: pointer;
+  border-radius: 1rem;
   font-weight: 600;
-  transition: transform 0.2s;
+  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;
+}
+
+.btn-primary svg {
+  width: 20px;
+  height: 20px;
 }
 
 .btn-primary:hover {
-  transform: translateY(-2px);
+  transform: translateY(-3px);
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
 }
 
-.btn-secondary {
-  padding: 0.75rem 1.5rem;
-  background: #95a5a6;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 600;
+.btn-primary:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
 }
 
-.btn-secondary:hover {
-  background: #7f8c8d;
+/* ============================================
+   MODAL
+   ============================================ */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.2s ease;
+  padding: 1rem;
+  overflow-y: auto;
 }
 
-.equipment-form-card {
+.modern-modal {
   background: white;
+  border-radius: 1.5rem;
+  max-width: 600px;
+  width: 100%;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  animation: slideUp 0.3s ease;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   padding: 2rem;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  margin-bottom: 2rem;
+  border-bottom: 1px solid #e5e7eb;
 }
 
-.equipment-form-card h3 {
-  margin-top: 0;
-  color: #2c3e50;
+.modal-header h3 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #1f2937;
 }
 
-.form-group {
-  margin-bottom: 1rem;
+.close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: #f3f4f6;
+  border-radius: 0.75rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: #374151;
+}
+
+.close-btn:hover {
+  background: #e5e7eb;
+  transform: rotate(90deg);
+}
+
+.close-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+.equipment-form {
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.form-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
 .form-row {
@@ -332,34 +587,33 @@ function handleLogout() {
   gap: 1rem;
 }
 
-label {
-  display: block;
-  margin-bottom: 0.5rem;
-  color: #2c3e50;
-  font-weight: 500;
+.form-section label {
+  font-weight: 600;
+  color: #374151;
+  font-size: 0.9rem;
 }
 
-input,
-select,
-textarea {
-  width: 100%;
+.form-section input,
+.form-section select,
+.form-section textarea {
   padding: 0.75rem;
-  border: 1px solid #bdc3c7;
-  border-radius: 4px;
+  border: 2px solid #e5e7eb;
+  border-radius: 0.75rem;
   font-size: 1rem;
   font-family: inherit;
-  box-sizing: border-box;
+  transition: all 0.2s ease;
+  background: white;
 }
 
-input:focus,
-select:focus,
-textarea:focus {
+.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);
 }
 
-textarea {
+.form-section textarea {
   resize: vertical;
   min-height: 80px;
 }
@@ -367,116 +621,588 @@ textarea {
 .form-actions {
   display: flex;
   gap: 1rem;
-  margin-top: 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(300px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
   gap: 1.5rem;
 }
 
 .equipment-card {
-  background: white;
-  padding: 1.5rem;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  transition: transform 0.2s;
+  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 {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+.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: start;
-  margin-bottom: 1rem;
-  border-bottom: 2px solid #ecf0f1;
-  padding-bottom: 0.5rem;
+  align-items: flex-start;
+  margin-bottom: 1.5rem;
+  gap: 1rem;
 }
 
 .equipment-header h4 {
-  margin: 0;
-  color: #2c3e50;
+  margin: 0 0 0.25rem 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #1f2937;
 }
 
-.equipment-type {
-  background: #667eea;
+.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;
-  padding: 0.25rem 0.75rem;
-  border-radius: 20px;
+  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 {
-  margin-bottom: 1rem;
-  color: #555;
-  font-size: 0.95rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
 }
 
-.equipment-details p {
-  margin: 0.5rem 0;
+.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.5rem;
+  gap: 0.75rem;
 }
 
 .btn-edit {
   flex: 1;
-  padding: 0.5rem;
-  background: #3498db;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: #3b82f6;
   color: white;
   border: none;
-  border-radius: 4px;
+  border-radius: 0.75rem;
   cursor: pointer;
-  font-weight: 500;
+  font-weight: 600;
+  font-size: 0.9rem;
+  transition: all 0.2s ease;
+}
+
+.btn-edit svg {
+  width: 16px;
+  height: 16px;
 }
 
 .btn-edit:hover {
-  background: #2980b9;
+  background: #2563eb;
+  transform: translateY(-1px);
 }
 
 .btn-danger {
   flex: 1;
-  padding: 0.5rem;
-  background: #e74c3c;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: #ef4444;
   color: white;
   border: none;
-  border-radius: 4px;
+  border-radius: 0.75rem;
   cursor: pointer;
-  font-weight: 500;
+  font-weight: 600;
+  font-size: 0.9rem;
+  transition: all 0.2s ease;
+}
+
+.btn-danger svg {
+  width: 16px;
+  height: 16px;
 }
 
 .btn-danger:hover {
-  background: #c0392b;
+  background: #dc2626;
+  transform: translateY(-1px);
 }
 
-.edit-form {
-  background: #f9f9f9;
-  padding: 1rem;
-  border-radius: 4px;
-  margin-top: 1rem;
-}
-
-.error-message {
-  margin-top: 1rem;
-  padding: 0.75rem;
-  background-color: #fee;
-  color: #c33;
-  border-radius: 4px;
+.card-edit {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
+/* ============================================
+   EMPTY STATE
+   ============================================ */
 .empty-state {
   text-align: center;
-  padding: 3rem;
-  background: white;
-  border-radius: 8px;
-  color: #7f8c8d;
+  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;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.empty-state h3 {
+  margin: 0 0 1rem 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+.empty-state p {
+  margin: 0 0 2rem 0;
+  color: #6b7280;
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+/* ============================================
+   MESSAGES
+   ============================================ */
+.success-message {
+  position: fixed;
+  top: 2rem;
+  right: 2rem;
+  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);
+  animation: slideInDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 1000;
+  cursor: pointer;
+}
+
+.success-message 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;
+}
+
+.error-notification svg {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+/* ============================================
+   RESPONSIVE DESIGN
+   ============================================ */
+@media (max-width: 1024px) {
+  .equipment-grid {
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  }
+
+  .page-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .btn-primary {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 768px) {
+  .equipment-content {
+    padding: 1rem;
+  }
+
+  .page-header {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .header-content h2 {
+    font-size: 2rem;
+  }
+
+  .equipment-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+
+  .modal-overlay {
+    padding: 1rem;
+  }
+
+  .modern-modal {
+    max-width: none;
+  }
+
+  .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 {
+    flex-direction: column;
+  }
+
+  .btn-edit,
+  .btn-danger {
+    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 {
+    width: 100%;
+  }
+
+  .empty-icon {
+    width: 100px;
+    height: 100px;
+    margin-bottom: 1.5rem;
+    padding: 1.5rem;
+  }
+
+  .empty-state {
+    padding: 2rem 1.5rem;
+  }
+
+  .success-message,
+  .error-notification {
+    gap: 0.75rem;
+    padding: 0.875rem 1rem;
+    font-size: 0.9rem;
+  }
+}
+
+/* ============================================
+   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;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-5px); }
+  75% { transform: translateX(5px); }
+}
+
+/* Dark Mode Support */
+:global(.dark) .equipment-page {
+  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+}
+
+:global(.dark) .equipment-card,
+:global(.dark) .empty-state,
+:global(.dark) .modal-overlay .modern-modal {
+  background: rgba(30, 41, 59, 0.7);
+  border-color: rgba(148, 163, 184, 0.1);
+}
+
+:global(.dark) .equipment-card:hover {
+  border-color: rgba(102, 126, 234, 0.3);
+}
+
+:global(.dark) .equipment-header h4,
+:global(.dark) .empty-state h3 {
+  color: #f1f5f9;
+}
+
+:global(.dark) .equipment-meta,
+:global(.dark) .detail-row,
+:global(.dark) .empty-state p {
+  color: #cbd5e1;
+}
+
+:global(.dark) .modal-header h3 {
+  color: #f1f5f9;
+}
+
+:global(.dark) .form-section label {
+  color: #e2e8f0;
+}
+
+:global(.dark) .form-section input,
+:global(.dark) .form-section select,
+:global(.dark) .form-section 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 {
+  border-color: #667eea;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/UserLogin.vue b/src/components/UserLogin.vue
index 2a21048..7a2265c 100644
--- a/src/components/UserLogin.vue
+++ b/src/components/UserLogin.vue
@@ -1,174 +1,875 @@
 <template>
   <div class="login-container">
     <div class="login-card">
-      <h1>Login to RideAware</h1>
-      <p class="subtitle">Train with Focus. Ride with Awareness</p>
+      <div class="card-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>
+      </div>
 
-      <form @submit.prevent="handleLogin">
+      <form @submit.prevent="handleLogin" class="login-form">
+        <!-- Username Field -->
         <div class="form-group">
           <label for="username">Username</label>
-          <input
-            id="username"
-            v-model="form.username"
-            type="text"
-            placeholder="Enter your username"
-            required
-          />
+          <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">
+              <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>
         </div>
 
+        <!-- Password Field -->
         <div class="form-group">
           <label for="password">Password</label>
-          <input
-            id="password"
-            v-model="form.password"
-            type="password"
-            placeholder="Enter your password"
-            required
-          />
+          <div class="input-wrapper">
+            <input
+              id="password"
+              v-model="form.password"
+              :type="showPassword ? 'text' : 'password'"
+              placeholder="Enter your password"
+              required
+              :disabled="auth.loading"
+              autocomplete="current-password"
+            />
+            <button
+              type="button"
+              @click="showPassword = !showPassword"
+              class="password-toggle"
+              :title="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"/>
+                <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
+              </svg>
+              <svg v-else viewBox="0 0 24 24" fill="none">
+                <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20C7 20 2.73 16.46 1 11.64M9.9 4.24C10.94 4.09 11.97 4 12 4C17 4 21.27 7.54 23 12.35" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                <line x1="1" y1="1" x2="23" y2="23" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              </svg>
+            </button>
+          </div>
         </div>
 
+        <!-- Remember Me & Forgot Password -->
+        <div class="form-options">
+          <label class="remember-me">
+            <input v-model="rememberMe" type="checkbox" />
+            <span>Remember me</span>
+          </label>
+          <RouterLink to="/password-reset" class="forgot-password">
+            Forgot password?
+          </RouterLink>
+        </div>
+
+        <!-- Login Button -->
         <button type="submit" :disabled="auth.loading" class="btn-primary">
-          {{ auth.loading ? 'Logging in...' : 'Login' }}
+          <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>
+            Logging in...
+          </span>
+          <span v-else>Login</span>
         </button>
       </form>
 
+      <!-- Error Message -->
       <div v-if="auth.error" class="error-message">
-        {{ auth.error }}
+        <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>
 
-      <div class="links">
-        <RouterLink to="/signup">Don't have an account? Sign up</RouterLink>
-        <RouterLink to="/password-reset">Forgot password?</RouterLink>
+      <!-- Divider -->
+      <div class="divider">
+        <span>Or</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">
+            <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>
+        </RouterLink>
+      </div>
+    </div>
+
+    <!-- Background Decorations -->
+    <div class="background-decoration">
+      <div class="decoration-blob blob-1"></div>
+      <div class="decoration-blob blob-2"></div>
+      <div class="decoration-blob blob-3"></div>
+    </div>
+
+    <!-- Bottom Link -->
+    <div class="bottom-link">
+      <RouterLink to="/">Back to Home</RouterLink>
     </div>
   </div>
 </template>
 
 <script setup>
-import { reactive } from 'vue';
-import { useRouter } from 'vue-router';
-import { useAuth } from '@/composables/useAuth';
+import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuth } from '@/composables/useAuth'
 
-const router = useRouter();
-const auth = useAuth();
+const router = useRouter()
+const auth = useAuth()
+
+const showPassword = ref(false)
+const rememberMe = ref(false)
 
 const form = reactive({
   username: '',
-  password: '',
-});
+  password: ''
+})
 
 async function handleLogin() {
   try {
-    await auth.login(form.username, form.password);
-    router.push('/dashboard');
+    await auth.login(form.username, form.password)
+    if (rememberMe.value) {
+      localStorage.setItem('rememberMe', 'true')
+      localStorage.setItem('username', form.username)
+    } else {
+      localStorage.removeItem('rememberMe')
+      localStorage.removeItem('username')
+    }
+    router.push('/dashboard')
   } catch (error) {
-    console.error('Login error:', error);
+    console.error('Login error:', error)
   }
 }
 </script>
 
 <style scoped>
 .login-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 1rem;
+  position: relative;
+  overflow: hidden;
 }
 
+/* ============================================
+   LOGIN CARD
+   ============================================ */
 .login-card {
-  background: white;
-  padding: 2rem;
-  border-radius: 8px;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 2rem;
+  padding: 3rem;
+  max-width: 480px;
   width: 100%;
-  max-width: 400px;
+  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);
+  position: relative;
+  z-index: 10;
+}
+
+/* ============================================
+   CARD HEADER
+   ============================================ */
+.card-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.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;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: logoFloat 0.8s ease-out 0.2s both;
+}
+
+.logo-wrapper svg {
+  width: 100%;
+  height: 100%;
 }
 
 h1 {
-  margin: 0 0 0.5rem 0;
-  color: #2c3e50;
-  font-size: 1.8rem;
+  margin: 0 0 0.75rem 0;
+  font-size: 2rem;
+  font-weight: 800;
+  color: #1f2937;
+  animation: titleSlide 0.6s ease-out 0.3s both;
 }
 
 .subtitle {
-  color: #7f8c8d;
-  margin-bottom: 1.5rem;
+  margin: 0;
+  font-size: 1rem;
+  color: #6b7280;
+  font-weight: 500;
   font-style: italic;
+  animation: subtitleFade 0.6s ease-out 0.4s both;
+}
+
+/* ============================================
+   LOGIN FORM
+   ============================================ */
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  animation: formSlide 0.6s ease-out 0.5s both;
 }
 
 .form-group {
-  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
 }
 
 label {
+  font-weight: 600;
+  color: #374151;
+  font-size: 0.95rem;
   display: block;
-  margin-bottom: 0.5rem;
-  color: #2c3e50;
-  font-weight: 500;
+}
+
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
 }
 
 input {
   width: 100%;
-  padding: 0.75rem;
-  border: 1px solid #bdc3c7;
-  border-radius: 4px;
+  padding: 1rem 1rem 1rem 3rem;
+  border: 2px solid #e5e7eb;
+  border-radius: 1rem;
   font-size: 1rem;
-  transition: border-color 0.3s;
+  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 {
+  position: absolute;
+  left: 1rem;
+  width: 20px;
+  height: 20px;
+  color: #9ca3af;
+  pointer-events: none;
+}
+
+.password-toggle {
+  position: absolute;
+  right: 1rem;
+  width: 24px;
+  height: 24px;
+  background: none;
+  border: none;
+  color: #9ca3af;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.password-toggle svg {
+  width: 100%;
+  height: 100%;
+}
+
+.password-toggle:hover {
+  color: #667eea;
+}
+
+/* ============================================
+   FORM OPTIONS
+   ============================================ */
+.form-options {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.9rem;
+}
+
+.remember-me {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  color: #374151;
+  font-weight: 500;
+  user-select: none;
+}
+
+.remember-me input {
+  width: auto;
+  padding: 0;
+  border: 2px solid #e5e7eb;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  accent-color: #667eea;
+  margin: 0;
+}
+
+.remember-me input:checked {
+  background: #667eea;
+}
+
+.forgot-password {
+  color: #667eea;
+  text-decoration: none;
+  font-weight: 600;
+  transition: all 0.2s ease;
+}
+
+.forgot-password:hover {
+  color: #764ba2;
+  text-decoration: underline;
+}
+
+/* ============================================
+   SUBMIT BUTTON
+   ============================================ */
 .btn-primary {
   width: 100%;
-  padding: 0.75rem;
+  padding: 1.125rem;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   border: none;
-  border-radius: 4px;
+  border-radius: 1rem;
   font-size: 1rem;
-  font-weight: 600;
+  font-weight: 700;
   cursor: pointer;
-  transition: transform 0.2s;
+  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(-2px);
+  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;
 }
 
-.error-message {
-  margin-top: 1rem;
-  padding: 0.75rem;
-  background-color: #fee;
-  color: #c33;
-  border-radius: 4px;
-  font-size: 0.9rem;
-}
-
-.links {
+.loading-content {
   display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin-top: 1.5rem;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  animation: spin 1s linear infinite;
+}
+
+/* ============================================
+   ERROR MESSAGE
+   ============================================ */
+.error-message {
+  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);
+}
+
+.error-message svg {
+  width: 24px;
+  height: 24px;
+  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;
+}
+
+/* ============================================
+   DIVIDER
+   ============================================ */
+.divider {
+  position: relative;
+  text-align: center;
+  margin: 1.5rem 0;
+}
+
+.divider::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: #e5e7eb;
+}
+
+.divider span {
+  position: relative;
+  background: white;
+  padding: 0 1rem;
+  color: #9ca3af;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+/* ============================================
+   SIGNUP SECTION
+   ============================================ */
+.signup-section {
   text-align: center;
 }
 
-.links a {
-  color: #667eea;
-  text-decoration: none;
-  font-size: 0.9rem;
+.signup-section p {
+  margin: 0 0 0.75rem 0;
+  color: #6b7280;
+  font-size: 0.95rem;
 }
 
-.links a:hover {
+.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;
+}
+
+/* ============================================
+   BACKGROUND DECORATIONS
+   ============================================ */
+.background-decoration {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.decoration-blob {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  animation: float 8s ease-in-out infinite;
+}
+
+.blob-1 {
+  width: 400px;
+  height: 400px;
+  top: -10%;
+  left: -10%;
+  animation-delay: 0s;
+}
+
+.blob-2 {
+  width: 300px;
+  height: 300px;
+  bottom: -5%;
+  right: -5%;
+  animation-delay: 2s;
+}
+
+.blob-3 {
+  width: 200px;
+  height: 200px;
+  top: 50%;
+  left: -5%;
+  animation-delay: 4s;
+}
+
+/* ============================================
+   BOTTOM LINK
+   ============================================ */
+.bottom-link {
+  position: absolute;
+  bottom: 2rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+}
+
+.bottom-link a {
+  color: white;
+  text-decoration: none;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  opacity: 0.8;
+}
+
+.bottom-link a:hover {
+  opacity: 1;
   text-decoration: underline;
 }
+
+/* ============================================
+   ANIMATIONS
+   ============================================ */
+@keyframes slideUp {
+  from {
+    transform: translateY(50px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes logoFloat {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes titleSlide {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes subtitleFade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@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);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-30px) rotate(180deg);
+  }
+}
+
+/* ============================================
+   RESPONSIVE DESIGN
+   ============================================ */
+@media (max-width: 640px) {
+  .login-container {
+    padding: 1rem;
+  }
+
+  .login-card {
+    padding: 2rem;
+    border-radius: 1.5rem;
+  }
+
+  .card-header {
+    margin-bottom: 1.5rem;
+  }
+
+  .logo-wrapper {
+    width: 64px;
+    height: 64px;
+    margin-bottom: 1rem;
+    padding: 1rem;
+  }
+
+  h1 {
+    font-size: 1.75rem;
+  }
+
+  .subtitle {
+    font-size: 0.9rem;
+  }
+
+  .login-form {
+    gap: 1.25rem;
+  }
+
+  .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;
+  }
+
+  .blob-1 {
+    width: 300px;
+    height: 300px;
+  }
+
+  .blob-2 {
+    width: 200px;
+    height: 200px;
+  }
+
+  .blob-3 {
+    width: 150px;
+    height: 150px;
+  }
+
+  .bottom-link a {
+    font-size: 0.9rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .login-card {
+    padding: 1.5rem;
+    border-radius: 1.25rem;
+  }
+
+  .card-header {
+    margin-bottom: 1.25rem;
+  }
+
+  .logo-wrapper {
+    width: 56px;
+    height: 56px;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+  }
+
+  .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;
+  }
+
+  .bottom-link {
+    bottom: 1rem;
+  }
+
+  .bottom-link a {
+    font-size: 0.85rem;
+  }
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .login-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 9fae1a8..5c875cf 100644
--- a/src/components/UserProfile.vue
+++ b/src/components/UserProfile.vue
@@ -1,70 +1,184 @@
 <template>
   <div class="profile-page">
-    <nav class="navbar">
-      <div class="navbar-brand">
-        <h1>RideAware</h1>
-      </div>
-      <div class="navbar-menu">
-        <RouterLink to="/dashboard">Dashboard</RouterLink>
-        <RouterLink to="/equipment">Equipment</RouterLink>
-        <RouterLink to="/zones">Zones</RouterLink>
-        <button @click="handleLogout" class="btn-logout">Logout</button>
-      </div>
-    </nav>
+    <!-- Use the shared navbar -->
+    <ModernNavbar />
 
+    <!-- Profile Content -->
     <div class="profile-content">
-      <div class="profile-card">
-        <h2>User Profile</h2>
+      <!-- Page Header -->
+      <div class="page-header">
+        <h2>Profile Settings</h2>
+        <p class="page-description">Manage your personal information and training metrics</p>
+      </div>
 
-        <form @submit.prevent="handleUpdateProfile">
-          <div class="form-row">
-            <div class="form-group">
-              <label>First Name</label>
-              <input v-model="form.first_name" type="text" />
+      <!-- Profile Tabs -->
+      <div class="profile-tabs">
+        <button
+          v-for="tab in tabs"
+          :key="tab.id"
+          class="tab-button"
+          :class="{ active: activeTab === tab.id }"
+          @click="activeTab = tab.id"
+        >
+          <svg v-if="tab.id === 'personal'" 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>
+          <svg v-else 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>
+          <span>{{ tab.name }}</span>
+        </button>
+      </div>
+
+      <!-- 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>Last Name</label>
-              <input v-model="form.last_name" type="text" />
+              <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>
           </div>
 
-          <div class="form-group">
-            <label>Bio</label>
-            <textarea v-model="form.bio" placeholder="Tell us about yourself"></textarea>
+          <div class="form-actions">
+            <button type="submit" :disabled="loading" class="btn-primary">
+              <span v-if="loading">
+                <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>
+                Saving...
+              </span>
+              <span v-else>Save Changes</span>
+            </button>
           </div>
-
-          <div class="form-row">
-            <div class="form-group">
-              <label>FTP (watts)</label>
-              <input v-model.number="form.ftp" type="number" step="1" />
-            </div>
-            <div class="form-group">
-              <label>Max HR (bpm)</label>
-              <input v-model.number="form.max_hr" type="number" step="1" />
-            </div>
-            <div class="form-group">
-              <label>Resting HR (bpm)</label>
-              <input v-model.number="form.resting_hr" type="number" step="1" />
-            </div>
-          </div>
-
-          <div class="form-group">
-            <label>Weight (kg)</label>
-            <input v-model.number="form.weight" type="number" step="0.1" />
-          </div>
-
-          <button type="submit" :disabled="loading" class="btn-primary">
-            {{ loading ? 'Saving...' : 'Save Profile' }}
-          </button>
         </form>
+      </div>
 
-        <div v-if="error" class="error-message">
-          {{ error }}
-        </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">
+                    <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 v-if="successMessage" class="success-message">
-          {{ successMessage }}
-        </div>
+              <div class="metric-card">
+                <div class="metric-icon hr">
+                  <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-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-card">
+                <div class="metric-icon rhr">
+                  <svg viewBox="0 0 24 24" fill="none">
+                    <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>
+          </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>
+            </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">
+                  <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>
+      </div>
+
+      <!-- Success Message -->
+      <div v-if="successMessage" class="success-message" @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"/>
+        </svg>
+        {{ successMessage }}
+      </div>
+
+      <!-- Error Message -->
+      <div v-if="error" class="error-message" @click="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>
   </div>
@@ -72,24 +186,29 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { useAuth } from '@/composables/useAuth'
-import api from '@/services/api'
 
-const router = useRouter()
-const auth = useAuth()
+import api from '@/services/api'
+import ModernNavbar from '@/components/ModernNavbar.vue'
+
+const activeTab = ref('personal')
 const loading = ref(false)
 const error = ref('')
 const successMessage = ref('')
 
+const tabs = ref([
+  { id: 'personal', name: 'Personal Info' },
+  { id: 'metrics', name: 'Training Metrics' }
+])
+
 const form = ref({
   first_name: '',
   last_name: '',
   bio: '',
+  email: '',
   ftp: 0,
   max_hr: 0,
   resting_hr: 0,
-  weight: 0,
+  weight: 0
 })
 
 onMounted(async () => {
@@ -100,10 +219,11 @@ onMounted(async () => {
         first_name: data.profile.first_name || '',
         last_name: data.profile.last_name || '',
         bio: data.profile.bio || '',
+        email: data.profile.email || '',
         ftp: data.profile.ftp || 0,
         max_hr: data.profile.max_hr || 0,
         resting_hr: data.profile.resting_hr || 0,
-        weight: data.profile.weight || 0,
+        weight: data.profile.weight || 0
       }
     }
   } catch (err) {
@@ -118,8 +238,6 @@ async function handleUpdateProfile() {
   successMessage.value = ''
 
   try {
-    console.log('Sending profile update:', form.value)
-    
     const { data } = await api.put('/api/protected/profile', {
       first_name: form.value.first_name,
       last_name: form.value.last_name,
@@ -127,27 +245,26 @@ async function handleUpdateProfile() {
       ftp: parseInt(form.value.ftp) || 0,
       max_hr: parseInt(form.value.max_hr) || 0,
       resting_hr: parseInt(form.value.resting_hr) || 0,
-      weight: parseFloat(form.value.weight) || 0,
+      weight: parseFloat(form.value.weight) || 0
     })
 
-    console.log('Update response:', data)
-    
     if (data && data.profile) {
       form.value = {
         first_name: data.profile.first_name || '',
         last_name: data.profile.last_name || '',
         bio: data.profile.bio || '',
+        email: data.profile.email || '',
         ftp: data.profile.ftp || 0,
         max_hr: data.profile.max_hr || 0,
         resting_hr: data.profile.resting_hr || 0,
-        weight: data.profile.weight || 0,
+        weight: data.profile.weight || 0
       }
     }
 
     successMessage.value = 'Profile updated successfully!'
     setTimeout(() => {
       successMessage.value = ''
-    }, 3000)
+    }, 4000)
   } catch (err) {
     console.error('Failed to update profile:', err)
     error.value = err.response?.data?.error || 'Failed to update profile'
@@ -155,111 +272,157 @@ async function handleUpdateProfile() {
     loading.value = false
   }
 }
-
-function handleLogout() {
-  auth.logout()
-  router.push('/login')
-}
 </script>
 
 <style scoped>
 .profile-page {
   min-height: 100vh;
-  background: #f5f5f5;
-}
-
-.navbar {
-  background: white;
-  padding: 1rem 2rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.navbar-brand h1 {
-  margin: 0;
-  color: #667eea;
-  font-size: 1.5rem;
-}
-
-.navbar-menu {
-  display: flex;
-  gap: 1.5rem;
-  align-items: center;
-}
-
-.navbar-menu a {
-  color: #2c3e50;
-  text-decoration: none;
-  font-weight: 500;
-  transition: color 0.3s;
-}
-
-.navbar-menu a:hover {
-  color: #667eea;
-}
-
-.btn-logout {
-  padding: 0.5rem 1rem;
-  background: #e74c3c;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 600;
-  transition: background 0.3s;
-}
-
-.btn-logout:hover {
-  background: #c0392b;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
 }
 
+/* ============================================
+   PROFILE CONTENT
+   ============================================ */
 .profile-content {
-  max-width: 600px;
-  margin: 2rem auto;
-  padding: 0 1rem;
-}
-
-.profile-card {
-  background: white;
+  max-width: 1000px;
+  margin: 0 auto;
   padding: 2rem;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.profile-card h2 {
-  margin: 0 0 1.5rem 0;
-  color: #2c3e50;
+.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 TABS
+   ============================================ */
+.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);
+}
+
+.tab-button {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1.5rem;
+  background: none;
+  border: 2px solid transparent;
+  border-radius: 1rem;
+  color: #6b7280;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: nowrap;
+}
+
+.tab-button svg {
+  width: 18px;
+  height: 18px;
+}
+
+.tab-button:hover {
+  background: rgba(248, 250, 252, 0.5);
+  color: #667eea;
+}
+
+.tab-button.active {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border-color: rgba(102, 126, 234, 0.2);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 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;
 }
 
 .form-row {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1.5rem;
 }
 
 .form-group {
-  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
 }
 
 label {
-  display: block;
-  margin-bottom: 0.5rem;
-  color: #2c3e50;
-  font-weight: 500;
+  font-weight: 600;
+  color: #374151;
+  font-size: 0.95rem;
 }
 
 input,
 textarea {
-  width: 100%;
-  padding: 0.75rem;
-  border: 1px solid #bdc3c7;
-  border-radius: 4px;
+  padding: 0.875rem;
+  border: 2px solid #e5e7eb;
+  border-radius: 1rem;
   font-size: 1rem;
   font-family: inherit;
-  transition: border-color 0.3s;
-  box-sizing: border-box;
+  transition: all 0.3s ease;
+  background: white;
 }
 
 input:focus,
@@ -267,6 +430,14 @@ 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 {
@@ -274,42 +445,445 @@ textarea {
   min-height: 100px;
 }
 
-.btn-primary {
-  width: 100%;
-  padding: 0.75rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border: none;
-  border-radius: 4px;
-  font-size: 1rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: transform 0.2s;
+small {
+  font-size: 0.8rem;
+  color: #6b7280;
+}
+
+/* ============================================
+   METRICS GRID
+   ============================================ */
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1.5rem;
   margin-top: 1rem;
 }
 
-.btn-primary:hover:not(:disabled) {
+.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-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);
+}
+
+.metric-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: white;
+}
+
+.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;
+}
+
+/* ============================================
+   INFO BOX
+   ============================================ */
+.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;
+}
+
+.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;
+}
+
+/* ============================================
+   FORM ACTIONS
+   ============================================ */
+.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
+   ============================================ */
+.success-message {
+  position: fixed;
+  top: 2rem;
+  right: 2rem;
+  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);
+  animation: slideInDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 1000;
+  cursor: pointer;
+}
+
+.success-message svg {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
 }
 
 .error-message {
-  margin-top: 1rem;
-  padding: 0.75rem;
-  background-color: #fee;
-  color: #c33;
-  border-radius: 4px;
+  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;
 }
 
-.success-message {
-  margin-top: 1rem;
-  padding: 0.75rem;
-  background-color: #efe;
-  color: #3c3;
-  border-radius: 4px;
+.error-message svg {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+/* ============================================
+   RESPONSIVE DESIGN
+   ============================================ */
+@media (max-width: 1024px) {
+  .metrics-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .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;
+  }
+
+  .form-actions {
+    flex-direction: column;
+  }
+
+  .btn-primary {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .info-box {
+    flex-direction: column;
+  }
+
+  .info-box svg {
+    margin-top: 0;
+  }
+
+  .success-message,
+  .error-message {
+    right: 1rem;
+    left: 1rem;
+  }
+}
+
+@media (max-width: 640px) {
+  .page-header h2 {
+    font-size: 1.5rem;
+  }
+
+  .profile-tabs {
+    gap: 0.25rem;
+    padding: 0.25rem;
+  }
+
+  .tab-button {
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+  }
+
+  .profile-form {
+    padding: 1.25rem;
+  }
+
+  .form-section h3 {
+    font-size: 1.1rem;
+  }
+
+  .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;
+  }
+
+  .success-message,
+  .error-message {
+    gap: 0.75rem;
+    padding: 0.875rem 1rem;
+    font-size: 0.9rem;
+  }
+}
+
+/* ============================================
+   ANIMATIONS
+   ============================================ */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInDown {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@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;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/UserSignup.vue b/src/components/UserSignup.vue
index c0a859e..66eef42 100644
--- a/src/components/UserSignup.vue
+++ b/src/components/UserSignup.vue
@@ -1,89 +1,242 @@
 <template>
   <div class="signup-container">
     <div class="signup-card">
-      <h1>Join RideAware</h1>
-      <p class="subtitle">Train with Focus. Ride with Awareness</p>
+      <div class="card-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"/>
+            <line x1="9" y1="13" x2="15" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            <line x1="12" y1="10" x2="12" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+        </div>
+        <h1>Join RideAware</h1>
+        <p class="subtitle">Train with Focus. Ride with Awareness.</p>
+      </div>
 
-      <form @submit.prevent="handleSignup">
+      <form @submit.prevent="handleSignup" class="signup-form">
+        <!-- Username Field -->
         <div class="form-group">
-          <label for="username">Username</label>
-          <input
-            id="username"
-            v-model="form.username"
-            type="text"
-            placeholder="Choose a username"
-            required
-          />
+          <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">
+              <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>
         </div>
 
+        <!-- Email Field -->
         <div class="form-group">
-          <label for="email">Email</label>
-          <input
-            id="email"
-            v-model="form.email"
-            type="email"
-            placeholder="Enter your email"
-            required
-          />
+          <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">
+              <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>
         </div>
 
-        <div class="form-group">
-          <label for="firstName">First Name</label>
-          <input
-            id="firstName"
-            v-model="form.firstName"
-            type="text"
-            placeholder="Your first name"
-          />
+        <!-- Name Fields -->
+        <div class="form-row">
+          <div class="form-group">
+            <label for="firstName">First Name</label>
+            <input
+              id="firstName"
+              v-model="form.firstName"
+              type="text"
+              placeholder="John"
+              :disabled="auth.loading"
+              autocomplete="given-name"
+            />
+          </div>
+          <div class="form-group">
+            <label for="lastName">Last Name</label>
+            <input
+              id="lastName"
+              v-model="form.lastName"
+              type="text"
+              placeholder="Doe"
+              :disabled="auth.loading"
+              autocomplete="family-name"
+            />
+          </div>
         </div>
 
+        <!-- Password Field -->
         <div class="form-group">
-          <label for="lastName">Last Name</label>
-          <input
-            id="lastName"
-            v-model="form.lastName"
-            type="text"
-            placeholder="Your last name"
-          />
+          <label for="password">Password *</label>
+          <div class="input-wrapper">
+            <input
+              id="password"
+              v-model="form.password"
+              :type="showPassword ? 'text' : 'password'"
+              placeholder="At least 8 characters"
+              required
+              :disabled="auth.loading"
+              autocomplete="new-password"
+            />
+            <button
+              type="button"
+              @click="showPassword = !showPassword"
+              class="password-toggle"
+              :title="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"/>
+                <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
+              </svg>
+              <svg v-else viewBox="0 0 24 24" fill="none">
+                <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20C7 20 2.73 16.46 1 11.64M9.9 4.24C10.94 4.09 11.97 4 12 4C17 4 21.27 7.54 23 12.35" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                <line x1="1" y1="1" x2="23" y2="23" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              </svg>
+            </button>
+          </div>
+          <div class="password-strength">
+            <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>
+          </div>
         </div>
 
+        <!-- Confirm Password Field -->
         <div class="form-group">
-          <label for="password">Password</label>
-          <input
-            id="password"
-            v-model="form.password"
-            type="password"
-            placeholder="At least 8 characters"
-            required
-          />
-          <small v-if="form.password.length < 8" class="password-hint">
-            Password must be at least 8 characters
+          <label for="confirmPassword">Confirm Password *</label>
+          <div class="input-wrapper">
+            <input
+              id="confirmPassword"
+              v-model="form.confirmPassword"
+              :type="showConfirmPassword ? 'text' : 'password'"
+              placeholder="Confirm your password"
+              required
+              :disabled="auth.loading"
+              autocomplete="new-password"
+            />
+            <button
+              type="button"
+              @click="showConfirmPassword = !showConfirmPassword"
+              class="password-toggle"
+              :title="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"/>
+                <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
+              </svg>
+              <svg v-else viewBox="0 0 24 24" fill="none">
+                <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20C7 20 2.73 16.46 1 11.64M9.9 4.24C10.94 4.09 11.97 4 12 4C17 4 21.27 7.54 23 12.35" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                <line x1="1" y1="1" x2="23" y2="23" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              </svg>
+            </button>
+          </div>
+          <small v-if="form.password && form.confirmPassword && form.password !== form.confirmPassword" class="error">
+            Passwords do not match
           </small>
         </div>
 
-        <button type="submit" :disabled="auth.loading || form.password.length < 8" class="btn-primary">
-          {{ auth.loading ? 'Creating account...' : 'Sign Up' }}
+        <!-- Terms Checkbox -->
+        <div class="terms-checkbox">
+          <input
+            id="terms"
+            v-model="agreedToTerms"
+            type="checkbox"
+            required
+          />
+          <label for="terms">
+            I agree to the
+            <a href="#" @click.prevent>Terms of Service</a>
+            and
+            <a href="#" @click.prevent>Privacy Policy</a>
+          </label>
+        </div>
+
+        <!-- Sign Up Button -->
+        <button
+          type="submit"
+          :disabled="!isFormValid || auth.loading"
+          class="btn-primary"
+        >
+          <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...
+          </span>
+          <span v-else>Create Account</span>
         </button>
       </form>
 
+      <!-- Error Message -->
       <div v-if="auth.error" class="error-message">
-        {{ auth.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>
+        <div>
+          <p class="error-title">Signup Failed</p>
+          <p class="error-text">{{ auth.error }}</p>
+        </div>
       </div>
 
-      <div class="links">
-        <p>Already have an account? <RouterLink to="/login">Login here</RouterLink></p>
+      <!-- Divider -->
+      <div class="divider">
+        <span>Or</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"/>
+          </svg>
+        </RouterLink>
+      </div>
+    </div>
+
+    <!-- Background Decorations -->
+    <div class="background-decoration">
+      <div class="decoration-blob blob-1"></div>
+      <div class="decoration-blob blob-2"></div>
+      <div class="decoration-blob blob-3"></div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { reactive } from 'vue';
-import { useRouter } from 'vue-router';
-import { useAuth } from '@/composables/useAuth';
+import { reactive, ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuth } from '@/composables/useAuth'
 
-const router = useRouter();
-const auth = useAuth();
+const router = useRouter()
+const auth = useAuth()
+
+const showPassword = ref(false)
+const showConfirmPassword = ref(false)
+const agreedToTerms = ref(false)
 
 const form = reactive({
   username: '',
@@ -91,9 +244,45 @@ const form = reactive({
   firstName: '',
   lastName: '',
   password: '',
-});
+  confirmPassword: ''
+})
+
+const isFormValid = computed(() => {
+  return (
+    form.username.length >= 3 &&
+    form.email.includes('@') &&
+    form.password.length >= 8 &&
+    form.password === form.confirmPassword &&
+    agreedToTerms.value
+  )
+})
+
+function getPasswordStrength(password) {
+  if (!password) {
+    return { text: '', width: '0%', class: '' }
+  }
+
+  let strength = 0
+  if (password.length >= 8) strength++
+  if (password.length >= 12) strength++
+  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++
+  if (/[0-9]/.test(password)) strength++
+  if (/[^a-zA-Z0-9]/.test(password)) strength++
+
+  if (strength <= 2) {
+    return { text: 'Weak', width: '33%', class: 'weak' }
+  } else if (strength <= 3) {
+    return { text: 'Fair', width: '66%', class: 'fair' }
+  } else if (strength <= 4) {
+    return { text: 'Good', width: '83%', class: 'good' }
+  } else {
+    return { text: 'Strong', width: '100%', class: 'strong' }
+  }
+}
 
 async function handleSignup() {
+  if (!isFormValid.value) return
+
   try {
     await auth.signup(
       form.username,
@@ -101,62 +290,133 @@ async function handleSignup() {
       form.email,
       form.firstName,
       form.lastName
-    );
-    router.push('/dashboard');
+    )
+    router.push('/dashboard')
   } catch (error) {
-    console.error('Signup error:', error);
+    console.error('Signup error:', error)
   }
 }
 </script>
 
 <style scoped>
 .signup-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 1rem;
+  position: relative;
+  overflow: hidden;
 }
 
+/* ============================================
+   SIGNUP CARD
+   ============================================ */
 .signup-card {
-  background: white;
-  padding: 2rem;
-  border-radius: 8px;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 2rem;
+  padding: 3rem;
+  max-width: 520px;
   width: 100%;
-  max-width: 400px;
+  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);
+  position: relative;
+  z-index: 10;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+/* ============================================
+   CARD HEADER
+   ============================================ */
+.card-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.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;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: logoFloat 0.8s ease-out 0.2s both;
+}
+
+.logo-wrapper svg {
+  width: 100%;
+  height: 100%;
 }
 
 h1 {
-  margin: 0 0 0.5rem 0;
-  color: #2c3e50;
-  font-size: 1.8rem;
+  margin: 0 0 0.75rem 0;
+  font-size: 2rem;
+  font-weight: 800;
+  color: #1f2937;
+  animation: titleSlide 0.6s ease-out 0.3s both;
 }
 
 .subtitle {
-  color: #7f8c8d;
-  margin-bottom: 1.5rem;
+  margin: 0;
+  font-size: 1rem;
+  color: #6b7280;
+  font-weight: 500;
   font-style: italic;
+  animation: subtitleFade 0.6s ease-out 0.4s both;
+}
+
+/* ============================================
+   SIGNUP FORM
+   ============================================ */
+.signup-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  animation: formSlide 0.6s ease-out 0.5s both;
 }
 
 .form-group {
-  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
 }
 
 label {
+  font-weight: 600;
+  color: #374151;
+  font-size: 0.95rem;
   display: block;
-  margin-bottom: 0.5rem;
-  color: #2c3e50;
-  font-weight: 500;
+}
+
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
 }
 
 input {
   width: 100%;
-  padding: 0.75rem;
-  border: 1px solid #bdc3c7;
-  border-radius: 4px;
+  padding: 1rem 1rem 1rem 3rem;
+  border: 2px solid #e5e7eb;
+  border-radius: 1rem;
   font-size: 1rem;
-  transition: border-color 0.3s;
+  font-family: inherit;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: white;
   box-sizing: border-box;
 }
 
@@ -164,59 +424,561 @@ input:focus {
   outline: none;
   border-color: #667eea;
   box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-}
-
-.password-hint {
-  display: block;
-  margin-top: 0.25rem;
-  color: #e74c3c;
-  font-size: 0.85rem;
-}
-
-.btn-primary {
-  width: 100%;
-  padding: 0.75rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border: none;
-  border-radius: 4px;
-  font-size: 1rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: transform 0.2s;
-}
-
-.btn-primary:hover:not(:disabled) {
   transform: translateY(-2px);
 }
 
-.btn-primary:disabled {
-  opacity: 0.7;
+input:disabled {
+  background: #f9fafb;
   cursor: not-allowed;
+  opacity: 0.6;
 }
 
-.error-message {
-  margin-top: 1rem;
-  padding: 0.75rem;
-  background-color: #fee;
-  color: #c33;
-  border-radius: 4px;
-  font-size: 0.9rem;
+input::placeholder {
+  color: #9ca3af;
 }
 
-.links {
-  margin-top: 1.5rem;
-  text-align: center;
-  color: #7f8c8d;
+.input-icon {
+  position: absolute;
+  left: 1rem;
+  width: 20px;
+  height: 20px;
+  color: #9ca3af;
+  pointer-events: none;
 }
 
-.links a {
+.password-toggle {
+  position: absolute;
+  right: 1rem;
+  width: 24px;
+  height: 24px;
+  background: none;
+  border: none;
+  color: #9ca3af;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.password-toggle svg {
+  width: 100%;
+  height: 100%;
+}
+
+.password-toggle:hover {
   color: #667eea;
-  text-decoration: none;
+}
+
+/* ============================================
+   PASSWORD STRENGTH
+   ============================================ */
+.password-strength {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.strength-meter {
+  width: 100%;
+  height: 4px;
+  background: #e5e7eb;
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.strength-bar {
+  height: 100%;
+  border-radius: 2px;
+  transition: all 0.3s ease;
+}
+
+.strength-bar.weak {
+  background: #ef4444;
+}
+
+.strength-bar.fair {
+  background: #f59e0b;
+}
+
+.strength-bar.good {
+  background: #3b82f6;
+}
+
+.strength-bar.strong {
+  background: #10b981;
+}
+
+.password-strength small {
+  font-size: 0.8rem;
   font-weight: 600;
 }
 
-.links a:hover {
+.password-strength small.weak {
+  color: #ef4444;
+}
+
+.password-strength small.fair {
+  color: #f59e0b;
+}
+
+.password-strength small.good {
+  color: #3b82f6;
+}
+
+.password-strength small.strong {
+  color: #10b981;
+}
+
+.password-strength small.error {
+  color: #ef4444;
+}
+
+/* ============================================
+   TERMS CHECKBOX
+   ============================================ */
+.terms-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.terms-checkbox input {
+  width: auto;
+  padding: 0;
+  border: 2px solid #e5e7eb;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  accent-color: #667eea;
+  margin: 0;
+}
+
+.terms-checkbox input:checked {
+  background: #667eea;
+}
+
+.terms-checkbox label {
+  margin: 0;
+  font-weight: 500;
+  font-size: 0.9rem;
+  color: #374151;
+  cursor: pointer;
+  user-select: none;
+}
+
+.terms-checkbox a {
+  color: #667eea;
+  text-decoration: none;
+  font-weight: 600;
+  transition: all 0.2s ease;
+}
+
+.terms-checkbox a:hover {
+  color: #764ba2;
   text-decoration: underline;
 }
+
+/* ============================================
+   SUBMIT BUTTON
+   ============================================ */
+.btn-primary {
+  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;
+}
+
+.loading-content {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  animation: spin 1s linear infinite;
+}
+
+/* ============================================
+   ERROR MESSAGE
+   ============================================ */
+.error-message {
+  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);
+}
+
+.error-message svg {
+  width: 24px;
+  height: 24px;
+  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;
+}
+
+/* ============================================
+   DIVIDER
+   ============================================ */
+.divider {
+  position: relative;
+  text-align: center;
+  margin: 1rem 0;
+}
+
+.divider::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: #e5e7eb;
+}
+
+.divider span {
+  position: relative;
+  background: white;
+  padding: 0 1rem;
+  color: #9ca3af;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+/* ============================================
+   LOGIN SECTION
+   ============================================ */
+.login-section {
+  text-align: center;
+}
+
+.login-section p {
+  margin: 0 0 0.75rem 0;
+  color: #6b7280;
+  font-size: 0.95rem;
+}
+
+.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;
+}
+
+/* ============================================
+   BACKGROUND DECORATIONS
+   ============================================ */
+.background-decoration {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.decoration-blob {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  animation: float 8s ease-in-out infinite;
+}
+
+.blob-1 {
+  width: 400px;
+  height: 400px;
+  top: -10%;
+  left: -10%;
+  animation-delay: 0s;
+}
+
+.blob-2 {
+  width: 300px;
+  height: 300px;
+  bottom: -5%;
+  right: -5%;
+  animation-delay: 2s;
+}
+
+.blob-3 {
+  width: 200px;
+  height: 200px;
+  top: 50%;
+  left: -5%;
+  animation-delay: 4s;
+}
+
+/* ============================================
+   ANIMATIONS
+   ============================================ */
+@keyframes slideUp {
+  from {
+    transform: translateY(50px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes logoFloat {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes titleSlide {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes subtitleFade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@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);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-30px) rotate(180deg);
+  }
+}
+
+/* ============================================
+   RESPONSIVE DESIGN
+   ============================================ */
+@media (max-width: 640px) {
+  .signup-container {
+    padding: 1rem;
+  }
+
+  .signup-card {
+    padding: 2rem;
+    border-radius: 1.5rem;
+    max-height: none;
+  }
+
+  .card-header {
+    margin-bottom: 1.5rem;
+  }
+
+  .logo-wrapper {
+    width: 64px;
+    height: 64px;
+    margin-bottom: 1rem;
+    padding: 1rem;
+  }
+
+  h1 {
+    font-size: 1.75rem;
+  }
+
+  .subtitle {
+    font-size: 0.9rem;
+  }
+
+  .signup-form {
+    gap: 1rem;
+  }
+
+  .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;
+  }
+
+  .blob-1 {
+    width: 300px;
+    height: 300px;
+  }
+
+  .blob-2 {
+    width: 200px;
+    height: 200px;
+  }
+
+  .blob-3 {
+    width: 150px;
+    height: 150px;
+  }
+}
+
+@media (max-width: 480px) {
+  .signup-card {
+    padding: 1.5rem;
+    border-radius: 1.25rem;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+  }
+
+  .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;
+  }
+}
+
+/* Scrollbar styling for long forms */
+.signup-card::-webkit-scrollbar {
+  width: 6px;
+}
+
+.signup-card::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.signup-card::-webkit-scrollbar-thumb {
+  background: #e5e7eb;
+  border-radius: 3px;
+}
+
+.signup-card::-webkit-scrollbar-thumb:hover {
+  background: #d1d5db;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/WorkoutCalendar.vue b/src/components/WorkoutCalendar.vue
new file mode 100644
index 0000000..abe186c
--- /dev/null
+++ b/src/components/WorkoutCalendar.vue
@@ -0,0 +1,677 @@
+<template>
+  <div class="calendar-page">
+    <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>
+        </div>
+      </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>
+
+          <form @submit.prevent="handleAddWorkout" class="workout-form">
+            <div class="form-group">
+              <label>Title *</label>
+              <input v-model="newWorkout.title" type="text" required />
+            </div>
+
+            <div class="form-row">
+              <div class="form-group">
+                <label>Date *</label>
+                <input v-model="newWorkout.scheduled_date" type="date" required />
+              </div>
+              <div class="form-group">
+                <label>Type</label>
+                <select v-model="newWorkout.type">
+                  <option value="">Select type</option>
+                  <option v-for="type in workoutTypes" :key="type.id" :value="type.name">
+                    {{ type.icon }} {{ type.name }}
+                  </option>
+                </select>
+              </div>
+            </div>
+
+            <div class="form-row">
+              <div class="form-group">
+                <label>Duration (minutes)</label>
+                <input v-model.number="newWorkout.duration" type="number" step="5" />
+              </div>
+            </div>
+
+            <div class="form-group">
+              <label>Description</label>
+              <textarea v-model="newWorkout.description" placeholder="Workout details..."></textarea>
+            </div>
+
+            <div class="form-group">
+              <label>File Upload (ZWO/FIT/TCX/GPX)</label>
+              <input @change="handleFileUpload" type="file" accept=".zwo,.fit,.tcx,.gpx" />
+            </div>
+
+            <div class="form-actions">
+              <button type="submit" :disabled="loading" class="btn-primary">
+                {{ loading ? 'Adding...' : 'Add Workout' }}
+              </button>
+              <button type="button" @click="showAddWorkout = false" class="btn-secondary">
+                Cancel
+              </button>
+            </div>
+          </form>
+
+          <div v-if="error" class="error-message">{{ 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="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>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Workout Details Component -->
+      <WorkoutDetail 
+        v-if="selectedWorkout" 
+        :workout="selectedWorkout"
+        @close="selectedWorkout = null"
+        @updated="loadWorkouts"
+        @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">
+            <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>
+          </div>
+        </div>
+        <div v-else class="empty-state">
+          No upcoming workouts
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import api from '@/services/api'
+import ModernNavbar from '@/components/ModernNavbar.vue'
+import WorkoutDetail from './WorkoutDetail.vue'
+
+const currentDate = ref(new Date())
+const workouts = ref([])
+const selectedWorkout = ref(null)
+const showAddWorkout = ref(false)
+const loading = ref(false)
+const error = ref('')
+const workoutTypes = ref([])
+
+const newWorkout = ref({
+  title: '',
+  description: '',
+  type: '',
+  scheduled_date: new Date().toISOString().split('T')[0],
+  duration: 60,
+})
+
+const monthYear = computed(() => {
+  return currentDate.value.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
+})
+
+const calendarDays = computed(() => {
+  const year = currentDate.value.getFullYear()
+  const month = currentDate.value.getMonth()
+
+  const firstDay = new Date(year, month, 1)
+  const lastDay = new Date(year, month + 1, 0)
+  const startDate = new Date(firstDay)
+  startDate.setDate(startDate.getDate() - firstDay.getDay())
+
+  const days = []
+  let currentDay = new Date(startDate)
+
+  while (currentDay <= lastDay || currentDay.getDay() !== 0) {
+    const dateStr = currentDay.toISOString().split('T')[0]
+    const dayWorkouts = workouts.value.filter(w => 
+      w.scheduled_date.split('T')[0] === dateStr
+    )
+
+    days.push({
+      date: dateStr,
+      day: currentDay.getDate(),
+      isCurrentMonth: currentDay.getMonth() === month,
+      isToday: isToday(currentDay),
+      workouts: dayWorkouts,
+    })
+
+    currentDay.setDate(currentDay.getDate() + 1)
+  }
+
+  return days
+})
+
+const upcomingWorkouts = computed(() => {
+  return workouts.value
+    .filter(w => new Date(w.scheduled_date) >= new Date())
+    .sort((a, b) => new Date(a.scheduled_date) - new Date(b.scheduled_date))
+})
+
+onMounted(async () => {
+  await loadWorkouts()
+  await loadWorkoutTypes()
+})
+
+async function loadWorkouts() {
+  try {
+    const { data } = await api.get('/api/protected/workouts')
+    workouts.value = data || []
+  } catch (err) {
+    console.error('Failed to load workouts:', err)
+  }
+}
+
+async function loadWorkoutTypes() {
+  try {
+    const { data } = await api.get('/api/protected/workout-types')
+    workoutTypes.value = data || []
+  } catch (err) {
+    console.error('Failed to load workout types:', err)
+  }
+}
+
+async function handleAddWorkout() {
+  loading.value = true
+  error.value = ''
+
+  try {
+    const { data } = await api.post('/api/protected/workouts', {
+      title: newWorkout.value.title,
+      description: newWorkout.value.description,
+      type: newWorkout.value.type,
+      scheduled_date: newWorkout.value.scheduled_date,
+      duration: newWorkout.value.duration,
+    })
+
+    workouts.value.push(data)
+    showAddWorkout.value = false
+    newWorkout.value = {
+      title: '',
+      description: '',
+      type: '',
+      scheduled_date: new Date().toISOString().split('T')[0],
+      duration: 60,
+    }
+  } catch (err) {
+    error.value = err.response?.data?.error || 'Failed to add workout'
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleFileUpload(event) {
+  const file = event.target.files[0]
+  if (file) {
+    newWorkout.value.file_name = file.name
+    newWorkout.value.file_type = file.name.split('.').pop().toLowerCase()
+  }
+}
+
+function previousMonth() {
+  currentDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() - 1)
+}
+
+function nextMonth() {
+  currentDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() + 1)
+}
+
+function selectWorkout(workout) {
+  selectedWorkout.value = workout
+}
+
+function isToday(date) {
+  const today = new Date()
+  return date.getDate() === today.getDate() &&
+    date.getMonth() === today.getMonth() &&
+    date.getFullYear() === today.getFullYear()
+}
+
+function formatDate(dateStr) {
+  return new Date(dateStr).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  })
+}
+
+function getWorkoutColor(type) {
+  const typeObj = workoutTypes.value.find(t => t.name === type)
+  return typeObj?.color || '#667eea'
+}
+</script>
+
+<style scoped>
+.calendar-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+}
+
+.calendar-content {
+  max-width: 1400px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+}
+
+.calendar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.calendar-header h2 {
+  margin: 0;
+  color: #2c3e50;
+}
+
+.header-controls {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.current-month {
+  font-weight: 600;
+  color: #2c3e50;
+  min-width: 150px;
+  text-align: center;
+}
+
+.btn-nav {
+  padding: 0.5rem 1rem;
+  background: #ecf0f1;
+  color: #2c3e50;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.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);
+}
+
+.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: 1000;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 8px;
+  padding: 2rem;
+  max-width: 500px;
+  width: 100%;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.modal-header h3 {
+  margin: 0;
+  color: #2c3e50;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #7f8c8d;
+}
+
+.workout-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+label {
+  margin-bottom: 0.5rem;
+  color: #2c3e50;
+  font-weight: 500;
+}
+
+input,
+select,
+textarea {
+  padding: 0.75rem;
+  border: 1px solid #bdc3c7;
+  border-radius: 4px;
+  font-size: 1rem;
+  font-family: inherit;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+.form-actions {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.btn-secondary {
+  flex: 1;
+  padding: 0.75rem;
+  background: #95a5a6;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.btn-secondary:hover {
+  background: #7f8c8d;
+}
+
+.error-message {
+  margin-top: 1rem;
+  padding: 0.75rem;
+  background: #fee;
+  color: #c33;
+  border-radius: 4px;
+}
+
+.calendar-grid {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 1rem;
+  margin-bottom: 2rem;
+}
+
+.calendar-header-row,
+.calendar-days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 1px;
+  background: #ecf0f1;
+}
+
+.day-header {
+  background: #667eea;
+  color: white;
+  padding: 1rem;
+  text-align: center;
+  font-weight: 600;
+}
+
+.calendar-day {
+  background: white;
+  padding: 1rem;
+  min-height: 120px;
+  border: 1px solid #ecf0f1;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.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;
+}
+
+.day-workouts {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.workout-badge {
+  padding: 0.25rem 0.5rem;
+  border-radius: 3px;
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.workout-badge:hover {
+  opacity: 0.8;
+}
+
+.workouts-list {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 2rem;
+}
+
+.workouts-list h3 {
+  margin-top: 0;
+  color: #2c3e50;
+}
+
+.workouts {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.workout-item {
+  padding: 1rem;
+  border-left: 4px solid #667eea;
+  background: #f9f9f9;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.workout-item:hover {
+  background: #f0f4ff;
+}
+
+.workout-item-header {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 0.5rem;
+  align-items: center;
+}
+
+.workout-date {
+  font-weight: 600;
+  color: #667eea;
+  min-width: 100px;
+}
+
+.workout-title {
+  flex: 1;
+  color: #2c3e50;
+  font-weight: 500;
+}
+
+.workout-type {
+  background: #667eea;
+  color: white;
+  padding: 0.25rem 0.75rem;
+  border-radius: 20px;
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.workout-item-footer {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.9rem;
+}
+
+.workout-duration {
+  color: #7f8c8d;
+}
+
+.workout-status {
+  padding: 0.25rem 0.5rem;
+  border-radius: 3px;
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
+.workout-status.planned {
+  background: #FBBC04;
+  color: #333;
+}
+
+.workout-status.completed {
+  background: #34A853;
+  color: white;
+}
+
+.workout-status.skipped {
+  background: #EA4335;
+  color: white;
+}
+
+.empty-state {
+  text-align: center;
+  color: #7f8c8d;
+  padding: 2rem;
+}
+
+@media (max-width: 768px) {
+  .calendar-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .header-controls {
+    flex-direction: column;
+  }
+
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/WorkoutDetail.vue b/src/components/WorkoutDetail.vue
new file mode 100644
index 0000000..a100596
--- /dev/null
+++ b/src/components/WorkoutDetail.vue
@@ -0,0 +1,461 @@
+<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) }}
+            </p>
+          </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>
+              </div>
+              <div class="info-item">
+                <span class="label">Duration</span>
+                <span class="value">{{ formatDuration(workout.duration) }}</span>
+              </div>
+              <div class="info-item">
+                <span class="label">Status</span>
+                <span class="value status" :class="workout.status">{{ workout.status }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Workout Segments (if parsed from ZWO) -->
+          <div v-if="workout.workout_data && workout.workout_data.segments" class="segments-section">
+            <h3>Workout Segments</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" class="detail-row">
+                    <span>Power:</span>
+                    <strong>{{ (segment.power * 100).toFixed(0) }}% FTP</strong>
+                  </div>
+                  <div v-if="segment.power_low && segment.power_high" 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" class="detail-row">
+                    <span>Cadence:</span>
+                    <strong>{{ segment.cadence }} RPM</strong>
+                  </div>
+                </div>
+              </div>
+            </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>
+              <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>
+              <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>
+              <div v-if="workout.calories_burned" class="metric">
+                <span class="metric-label">Calories</span>
+                <span class="metric-value">{{ workout.calories_burned }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Description -->
+          <div v-if="workout.description" class="description-section">
+            <h3>Description</h3>
+            <p>{{ workout.description }}</p>
+          </div>
+
+          <!-- Author/Source -->
+          <div v-if="workout.workout_data && workout.workout_data.author" class="source-section">
+            <small>Source: {{ workout.workout_data.author }}</small>
+          </div>
+        </div>
+
+        <div class="detail-footer">
+          <select @change="updateStatus($event.target.value)" 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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue'
+import api from '@/services/api'
+
+const props = defineProps({
+  workout: Object,
+})
+
+const emit = defineEmits(['close', 'updated', 'deleted'])
+
+function closeModal() {
+  emit('close')
+}
+
+async function updateStatus(newStatus) {
+  try {
+    await api.put(`/api/protected/workouts?id=${props.workout.id}`, {
+      status: newStatus,
+    })
+    emit('updated')
+  } catch (error) {
+    console.error('Failed to update workout:', error)
+  }
+}
+
+async function deleteWorkout() {
+  if (!confirm('Delete this workout?')) return
+  try {
+    await api.delete(`/api/protected/workouts?id=${props.workout.id}`)
+    emit('deleted')
+    emit('close')
+  } catch (error) {
+    console.error('Failed to delete workout:', error)
+  }
+}
+
+function formatDate(dateStr) {
+  return new Date(dateStr).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  })
+}
+
+function formatDuration(seconds) {
+  const hours = Math.floor(seconds / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+  if (hours > 0) {
+    return `${hours}h ${minutes}m`
+  }
+  return `${minutes}m`
+}
+
+function formatSegmentType(type) {
+  return type.charAt(0).toUpperCase() + type.slice(1)
+}
+</script>
+
+<style scoped>
+.workout-detail-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2000;
+}
+
+.modal-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow-y: auto;
+  padding: 1rem;
+}
+
+.modal-window {
+  background: white;
+  border-radius: 8px;
+  width: 100%;
+  max-width: 600px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 2rem;
+  border-bottom: 1px solid #ecf0f1;
+  background: white;
+}
+
+.header-info h2 {
+  margin: 0 0 0.5rem 0;
+  color: #2c3e50;
+  font-size: 1.5rem;
+}
+
+.workout-meta {
+  margin: 0;
+  color: #7f8c8d;
+  font-size: 0.9rem;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #7f8c8d;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.detail-body {
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.info-section {
+  background: #f9f9f9;
+  padding: 1rem;
+  border-radius: 6px;
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.info-item .label {
+  font-size: 0.8rem;
+  color: #7f8c8d;
+  text-transform: uppercase;
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+.info-item .value {
+  font-size: 1rem;
+  color: #2c3e50;
+  font-weight: 600;
+}
+
+.value.status {
+  display: inline-block;
+  padding: 0.25rem 0.75rem;
+  border-radius: 4px;
+  font-size: 0.85rem;
+}
+
+.value.status.planned {
+  background: #FBBC04;
+  color: #333;
+}
+
+.value.status.completed {
+  background: #34A853;
+  color: white;
+}
+
+.value.status.skipped {
+  background: #EA4335;
+  color: white;
+}
+
+.segments-section h3,
+.metrics-section h3,
+.description-section h3 {
+  margin: 0 0 1rem 0;
+  color: #2c3e50;
+  font-size: 1.1rem;
+  border-bottom: 2px solid #667eea;
+  padding-bottom: 0.5rem;
+}
+
+.segments-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.segment-card {
+  background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
+  border: 1px solid #e0e6ed;
+  border-left: 4px solid #667eea;
+  padding: 1rem;
+  border-radius: 4px;
+}
+
+.segment-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.segment-type {
+  display: inline-block;
+  background: #667eea;
+  color: white;
+  padding: 0.25rem 0.75rem;
+  border-radius: 3px;
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.segment-duration {
+  color: #2c3e50;
+  font-weight: 600;
+}
+
+.segment-details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.9rem;
+}
+
+.detail-row span {
+  color: #7f8c8d;
+}
+
+.detail-row strong {
+  color: #2c3e50;
+}
+
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 1rem;
+}
+
+.metric {
+  background: #f9f9f9;
+  padding: 1rem;
+  border-radius: 4px;
+  text-align: center;
+}
+
+.metric-label {
+  display: block;
+  font-size: 0.8rem;
+  color: #7f8c8d;
+  text-transform: uppercase;
+  margin-bottom: 0.5rem;
+}
+
+.metric-value {
+  display: block;
+  font-size: 1.25rem;
+  color: #667eea;
+  font-weight: 700;
+}
+
+.description-section p {
+  margin: 0;
+  color: #2c3e50;
+  line-height: 1.6;
+}
+
+.source-section {
+  color: #95a5a6;
+  font-style: italic;
+}
+
+.detail-footer {
+  display: flex;
+  gap: 0.5rem;
+  padding: 1.5rem 2rem;
+  border-top: 1px solid #ecf0f1;
+  background: #f9f9f9;
+}
+
+.status-select {
+  flex: 1;
+  padding: 0.75rem;
+  border: 1px solid #bdc3c7;
+  border-radius: 4px;
+  font-size: 0.9rem;
+}
+
+.btn-danger {
+  padding: 0.75rem 1.5rem;
+  background: #e74c3c;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.btn-danger:hover {
+  background: #c0392b;
+}
+
+.btn-secondary {
+  padding: 0.75rem 1.5rem;
+  background: #95a5a6;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.btn-secondary:hover {
+  background: #7f8c8d;
+}
+
+@media (max-width: 640px) {
+  .modal-window {
+    max-width: 100%;
+  }
+
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .detail-footer {
+    flex-direction: column;
+  }
+
+  .detail-footer button,
+  .detail-footer select {
+    width: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index e863f5d..5b8b320 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,6 +7,7 @@ import UserDashboard from '@/components/UserDashboard.vue'
 import UserProfile from '@/components/UserProfile.vue'
 import UserEquipment from '@/components/UserEquipment.vue'
 import TrainingZones from '@/components/TrainingZones.vue'
+import WorkoutCalendar from '@/components/WorkoutCalendar.vue'
 import PasswordReset from '@/components/PasswordReset.vue'
 
 const routes = [
@@ -52,6 +53,12 @@ const routes = [
     component: TrainingZones,
     meta: { requiresAuth: true },
   },
+  {
+    path: '/calendar',
+    name: 'Calendar',
+    component: WorkoutCalendar,
+    meta: { requiresAuth: true },
+  },
   {
     path: '/',
     redirect: '/dashboard',