diff --git a/src/components/PasswordReset.vue b/src/components/PasswordReset.vue
index 3213f94..60bf508 100644
--- a/src/components/PasswordReset.vue
+++ b/src/components/PasswordReset.vue
@@ -1,139 +1,192 @@
 <template>
   <div class="password-reset-container">
-    <div class="reset-card">
-      <div class="card-header">
+    <div class="card-modern auth-card">
+      <div class="auth-header">
         <div class="logo-wrapper">
           <svg viewBox="0 0 24 24" fill="none">
             <path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
-            <circle cx="12" cy="13" r="2" fill="currentColor"/>
+            <path v-if="!resetLinkSent" d="M12 13V17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            <circle v-if="!resetLinkSent" cx="12" cy="10" r="1" fill="currentColor"/>
+            <path v-else d="m9 13 2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </div>
-        <h1>{{ resetLinkSent ? 'Check Your Email' : 'Reset Password' }}</h1>
+        <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'
+          {{ resetLinkSent
+            ? 'We\'ve sent you instructions to reset your password'
+            : 'No worries! Enter your email and we\'ll send you reset instructions'
           }}
         </p>
       </div>
 
-      <form v-if="!resetLinkSent" @submit.prevent="handleRequestReset" class="reset-form">
+      <form v-if="!resetLinkSent" @submit.prevent="handleRequestReset" class="form-modern">
         <!-- Email Field -->
-        <div class="form-group">
-          <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">
+        <div class="form-group-modern">
+          <label for="email" class="form-label-modern">
+            <svg class="label-icon" viewBox="0 0 24 24" fill="none">
               <rect x="2" y="4" width="20" height="16" rx="2" stroke="currentColor" stroke-width="2"/>
               <path d="M2 6L12 13L22 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
             </svg>
-          </div>
-          <small class="helper-text">We'll never share your email with anyone else.</small>
+            Email Address
+          </label>
+          <input
+            id="email"
+            v-model="email"
+            type="email"
+            class="form-input-modern"
+            placeholder="your@email.com"
+            required
+            :disabled="auth.loading"
+            autocomplete="email"
+          />
+          <span class="form-helper-text">Enter the email address associated with your account</span>
         </div>
 
-        <!-- Submit Button -->
-        <button type="submit" :disabled="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>
-            Sending...
-          </span>
-          <span v-else>Send Reset Link</span>
-        </button>
-      </form>
-
-      <!-- Success Section -->
-      <div v-else class="success-section">
-        <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">
+        <!-- Info Box -->
+        <div class="info-box info-box-info">
           <svg viewBox="0 0 24 24" fill="none">
             <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
             <line x1="12" y1="8" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
             <line x1="12" y1="16" x2="12.01" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
           </svg>
-          <p><strong>Tip:</strong> Didn't receive the email? Check your spam folder or try again in a few minutes.</p>
+          <div>
+            <strong>Security Note:</strong> For your protection, we'll only send a reset link if this email is registered with RideAware.
+          </div>
         </div>
-        <button @click="resetForm" class="btn-secondary">
+
+        <!-- Error Message -->
+        <div v-if="auth.error" class="info-box info-box-danger">
+          <svg viewBox="0 0 24 24" fill="none">
+            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+            <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
+            <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
+          </svg>
+          <div>
+            <div class="form-error-text">
+              <strong>Error:</strong> {{ auth.error }}
+            </div>
+          </div>
+        </div>
+
+        <!-- Submit Button -->
+        <button type="submit" :disabled="auth.loading" class="btn-modern btn-modern-primary btn-modern-large">
+          <span v-if="auth.loading" class="loading-content">
+            <svg class="spinner" viewBox="0 0 24 24">
+              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" opacity="0.25"/>
+              <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 reset link...
+          </span>
+          <span v-else>
+            <svg viewBox="0 0 24 24" fill="none" style="width: 20px; height: 20px;">
+              <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>
+            Send Reset Link
+          </span>
+        </button>
+      </form>
+
+      <!-- Success Section -->
+      <div v-else class="success-section">
+        <div class="info-box info-box-success mb-lg">
+          <svg viewBox="0 0 24 24" fill="none">
+            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+            <path d="m9 12 2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <div>
+            <strong>Email Sent Successfully!</strong>
+          </div>
+        </div>
+
+        <div class="email-display">
+          <svg 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>
+          {{ email }}
+        </div>
+
+        <div class="instructions">
+          <h3>What's Next?</h3>
+          <div class="instruction-step">
+            <div class="step-number">1</div>
+            <div class="step-content">
+              <strong>Check your inbox</strong>
+              <p>Look for an email from RideAware with your password reset link</p>
+            </div>
+          </div>
+          <div class="instruction-step">
+            <div class="step-number">2</div>
+            <div class="step-content">
+              <strong>Click the reset link</strong>
+              <p>The link will take you to a secure page to create your new password</p>
+            </div>
+          </div>
+          <div class="instruction-step">
+            <div class="step-number">3</div>
+            <div class="step-content">
+              <strong>Log in with new password</strong>
+              <p>Use your new password to securely access your account</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="info-box info-box-warning">
+          <svg viewBox="0 0 24 24" fill="none">
+            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" stroke="currentColor" stroke-width="2"/>
+            <line x1="12" y1="9" x2="12" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            <line x1="12" y1="17" x2="12.01" y2="17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+          <div>
+            <strong>Didn't receive the email?</strong> Check your spam folder, or click below to try a different email address. Reset links expire after 24 hours.
+          </div>
+        </div>
+
+        <button @click="resetForm" class="btn-modern btn-modern-secondary">
+          <svg viewBox="0 0 24 24" fill="none" style="width: 20px; height: 20px;">
+            <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M21 3v5h-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M3 21v-5h5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
           Try Another Email
         </button>
       </div>
 
-      <!-- Error Message -->
-      <div v-if="auth.error" class="error-message">
-        <svg viewBox="0 0 24 24" fill="none">
-          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-          <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
-          <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
-        </svg>
-        <div>
-          <p class="error-title">Error</p>
-          <p class="error-text">{{ auth.error }}</p>
+      <!-- Divider -->
+      <div v-if="!resetLinkSent" class="auth-divider">
+        <span>Remember your password?</span>
+      </div>
+
+      <!-- Links Section -->
+      <div v-if="!resetLinkSent" class="auth-footer">
+        <RouterLink to="/login" class="btn-modern btn-modern-secondary">
+          <svg viewBox="0 0 24 24" fill="none" style="width: 20px; height: 20px;">
+            <path d="M15 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M10 17L15 12L10 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M15 12H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          Back to Login
+        </RouterLink>
+
+        <div class="signup-prompt">
+          <p>New to RideAware?</p>
+          <RouterLink to="/signup" class="link-text">
+            Create a free account
+          </RouterLink>
         </div>
       </div>
-    </div>
 
-    <!-- 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"/>
+      <!-- Success Links -->
+      <div v-else class="auth-footer">
+        <RouterLink to="/login" class="btn-modern btn-modern-primary">
+          <svg viewBox="0 0 24 24" fill="none" style="width: 20px; height: 20px;">
+            <path d="M15 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M10 17L15 12L10 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M15 12H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
+          Return to Login
         </RouterLink>
       </div>
     </div>
@@ -144,6 +197,16 @@
       <div class="decoration-blob blob-2"></div>
       <div class="decoration-blob blob-3"></div>
     </div>
+
+    <!-- Bottom Link -->
+    <div class="bottom-link">
+      <RouterLink to="/" class="btn-modern btn-modern-secondary">
+        <svg viewBox="0 0 24 24" fill="none" style="width: 16px; height: 16px;">
+          <path d="M19 12H5M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        Back to Home
+      </RouterLink>
+    </div>
   </div>
 </template>
 
@@ -185,27 +248,22 @@ function resetForm() {
 }
 
 /* ============================================
-   RESET CARD
+   AUTH CARD
    ============================================ */
-.reset-card {
-  background: var(--glass-background);
-  backdrop-filter: var(--glass-blur);
-  border-radius: var(--radius-2xl);
-  max-width: 480px;
+.auth-card {
+  max-width: 560px;
   width: 100%;
-  box-shadow: var(--shadow-2xl);
-  border: 1px solid var(--glass-border);
   animation: slideUp var(--transition-slower) cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   z-index: 10;
 }
 
 /* ============================================
-   CARD HEADER
+   AUTH HEADER
    ============================================ */
-.card-header {
-  padding: var(--spacing-2xl) var(--spacing-xl) var(--spacing-md);
+.auth-header {
   text-align: center;
+  margin-bottom: var(--spacing-2xl);
 }
 
 .logo-wrapper {
@@ -239,118 +297,29 @@ h1 {
   color: var(--color-text-secondary);
   font-size: var(--font-size-base);
   line-height: var(--line-height-relaxed);
-  margin: 0;
+  margin: var(--spacing-sm) 0 0 0;
   animation: subtitleFade var(--transition-slower) ease-out 0.4s both;
 }
 
 /* ============================================
-   RESET FORM
+   FORM ENHANCEMENTS
    ============================================ */
-.reset-form {
-  padding: var(--spacing-md) var(--spacing-xl);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-lg);
-  animation: formSlide var(--transition-slower) ease-out 0.5s both;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-}
-
-label {
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-secondary);
-  font-size: var(--font-size-sm);
-}
-
-.input-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-input {
-  width: 100%;
-  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) 3rem;
-  border: 2px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  font-size: var(--font-size-base);
-  font-family: inherit;
-  transition: all var(--transition-slow);
-  background: var(--color-surface);
-  color: var(--color-text-primary);
-  box-sizing: border-box;
-}
-
-input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-  transform: translateY(-2px);
-}
-
-input:disabled {
-  background: var(--color-surface-hover);
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-input::placeholder {
-  color: var(--color-text-tertiary);
-}
-
-.input-icon {
-  position: absolute;
-  left: var(--spacing-md);
-  width: 20px;
-  height: 20px;
-  color: var(--color-text-tertiary);
-  pointer-events: none;
-}
-
-.helper-text {
-  font-size: var(--font-size-xs);
-  color: var(--color-text-secondary);
-  margin: 0;
+.label-icon {
+  width: 18px;
+  height: 18px;
+  margin-right: var(--spacing-xs);
+  vertical-align: middle;
+  color: var(--color-primary);
 }
 
 /* ============================================
-   SUBMIT BUTTON
+   BUTTON ENHANCEMENTS
    ============================================ */
-.btn-primary {
+.btn-modern-large {
   width: 100%;
-  padding: var(--spacing-md);
-  background: var(--gradient-primary);
-  color: var(--color-text-inverse);
-  border: none;
-  border-radius: var(--radius-lg);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-bold);
-  cursor: pointer;
-  transition: all var(--transition-slow);
-  box-shadow: var(--shadow-md);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 52px;
-}
-
-.btn-primary:hover:not(:disabled) {
-  transform: translateY(-3px);
-  box-shadow: var(--shadow-lg);
-}
-
-.btn-primary:active:not(:disabled) {
-  transform: translateY(-1px);
-}
-
-.btn-primary:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-  transform: none;
+  padding: 16px 32px;
+  font-size: var(--font-size-lg);
+  min-height: 56px;
 }
 
 .loading-content {
@@ -360,73 +329,69 @@ input::placeholder {
 }
 
 .spinner {
+  width: 22px;
+  height: 22px;
+  animation: spin 1s linear infinite;
+}
+
+/* ============================================
+   INFO BOXES
+   ============================================ */
+.info-box {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-md);
+}
+
+.info-box svg {
   width: 20px;
   height: 20px;
-  animation: spin 1s linear infinite;
+  flex-shrink: 0;
+  margin-top: 2px;
 }
 
 /* ============================================
    SUCCESS SECTION
    ============================================ */
 .success-section {
-  padding: var(--spacing-md) var(--spacing-xl) var(--spacing-xl);
-  text-align: center;
   animation: formSlide var(--transition-slower) ease-out;
 }
 
-.check-animation {
-  width: 80px;
-  height: 80px;
-  margin: 0 auto var(--spacing-lg);
-  padding: var(--spacing-lg);
-  background: var(--gradient-secondary);
-  border-radius: var(--radius-full);
-  color: var(--color-text-inverse);
+.email-display {
   display: flex;
   align-items: center;
   justify-content: center;
-  animation: checkBounce var(--transition-slower) ease-out;
-}
-
-.check-animation svg {
-  width: 100%;
-  height: 100%;
-}
-
-.success-section h3 {
-  margin: 0 0 var(--spacing-md) 0;
-  color: var(--color-secondary);
-  font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-bold);
-}
-
-.success-message {
-  margin: var(--spacing-sm) 0;
-  color: var(--color-text-secondary);
-  line-height: var(--line-height-relaxed);
-  font-size: var(--font-size-sm);
-}
-
-.email-display {
-  color: var(--color-primary) !important;
+  gap: var(--spacing-sm);
+  color: var(--color-primary);
   font-weight: var(--font-weight-semibold);
   font-size: var(--font-size-lg);
-  background: rgba(102, 126, 234, 0.1);
-  padding: var(--spacing-sm);
-  border-radius: var(--radius-md);
-  margin: var(--spacing-md) 0 !important;
+  background: rgba(0, 102, 204, 0.1);
+  padding: var(--spacing-md);
+  border-radius: var(--radius-lg);
+  margin: var(--spacing-lg) 0;
   word-break: break-all;
+  border: 2px solid rgba(0, 102, 204, 0.2);
+}
+
+.email-display svg {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
 }
 
 /* ============================================
    INSTRUCTIONS
    ============================================ */
 .instructions {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-  margin: var(--spacing-lg) 0;
-  text-align: left;
+  margin: var(--spacing-xl) 0;
+}
+
+.instructions h3 {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  margin: 0 0 var(--spacing-lg) 0;
+  text-align: center;
 }
 
 .instruction-step {
@@ -434,14 +399,25 @@ input::placeholder {
   gap: var(--spacing-md);
   padding: var(--spacing-md);
   background: var(--color-surface-hover);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-lg);
   border-left: 4px solid var(--color-primary);
+  margin-bottom: var(--spacing-md);
+  transition: all var(--transition-base);
+}
+
+.instruction-step:hover {
+  transform: translateX(4px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.instruction-step:last-child {
+  margin-bottom: 0;
 }
 
 .step-number {
-  width: 36px;
-  height: 36px;
-  min-width: 36px;
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -449,205 +425,88 @@ input::placeholder {
   color: var(--color-text-inverse);
   border-radius: var(--radius-full);
   font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-lg);
+  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.3);
+}
+
+.step-content {
+  flex: 1;
+}
+
+.step-content strong {
+  display: block;
+  color: var(--color-text-primary);
   font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: var(--spacing-xs);
 }
 
 .step-content p {
   margin: 0;
   color: var(--color-text-secondary);
   font-size: var(--font-size-sm);
-  line-height: var(--line-height-normal);
-}
-
-.step-content p:first-child {
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-primary);
-  margin-bottom: 0.25rem;
-}
-
-/* ============================================
-   SPAM NOTICE
-   ============================================ */
-.spam-notice {
-  display: flex;
-  gap: var(--spacing-md);
-  padding: var(--spacing-md);
-  background: rgba(245, 158, 11, 0.1);
-  border: 1px solid var(--color-warning);
-  border-radius: var(--radius-md);
-  margin: var(--spacing-md) 0;
-}
-
-.spam-notice svg {
-  width: 20px;
-  height: 20px;
-  color: var(--color-warning);
-  flex-shrink: 0;
-  margin-top: 2px;
-}
-
-.spam-notice p {
-  margin: 0;
-  color: var(--color-warning);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-normal);
-}
-
-.spam-notice strong {
-  color: var(--color-warning);
-}
-
-/* ============================================
-   SECONDARY BUTTON
-   ============================================ */
-.btn-secondary {
-  padding: var(--spacing-sm) var(--spacing-lg);
-  background: rgba(102, 126, 234, 0.1);
-  color: var(--color-primary);
-  border: 2px solid rgba(102, 126, 234, 0.2);
-  border-radius: var(--radius-md);
-  font-weight: var(--font-weight-semibold);
-  cursor: pointer;
-  transition: all var(--transition-slow);
-  margin-top: var(--spacing-md);
-}
-
-.btn-secondary:hover {
-  background: rgba(102, 126, 234, 0.2);
-  transform: translateY(-1px);
-}
-
-/* ============================================
-   ERROR MESSAGE
-   ============================================ */
-.error-message {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  margin-top: var(--spacing-md);
-  padding: var(--spacing-md);
-  background: #fef2f2;
-  border: 1px solid #fecaca;
-  color: var(--color-danger);
-  border-radius: var(--radius-md);
-  font-size: var(--font-size-sm);
-  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: var(--font-weight-semibold);
-  font-size: var(--font-size-sm);
-}
-
-.error-text {
-  margin: 0;
-  font-size: var(--font-size-sm);
-  opacity: 0.9;
+  line-height: var(--line-height-relaxed);
 }
 
 /* ============================================
    DIVIDER
    ============================================ */
-.divider {
+.auth-divider {
   position: relative;
   text-align: center;
-  margin: var(--spacing-xl) 0 var(--spacing-lg);
-  z-index: 10;
+  margin: var(--spacing-2xl) 0 var(--spacing-xl) 0;
 }
 
-.divider::before {
+.auth-divider::before {
   content: '';
   position: absolute;
   top: 50%;
-  left: -100px;
-  right: -100px;
-  height: 1px;
-  background: rgba(255, 255, 255, 0.3);
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--color-divider);
 }
 
-.divider span {
+.auth-divider span {
   position: relative;
-  background: var(--gradient-primary);
-  padding: 0 var(--spacing-md);
-  color: var(--color-text-inverse);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
+  background: var(--color-surface);
+  padding: 0 var(--spacing-lg);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
 }
 
 /* ============================================
-   LINKS SECTION
+   AUTH FOOTER
    ============================================ */
-.links-section {
+.auth-footer {
   text-align: center;
-  padding: 0 var(--spacing-xl) var(--spacing-xl);
-  z-index: 10;
-  position: relative;
 }
 
-.links-section.success-mode {
-  padding: 0;
-}
-
-.back-link {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-sm);
-  color: rgba(255, 255, 255, 0.9);
-  text-decoration: none;
-  font-weight: var(--font-weight-semibold);
-  padding: var(--spacing-sm) var(--spacing-lg);
-  border-radius: var(--radius-md);
-  background: rgba(255, 255, 255, 0.1);
-  transition: all var(--transition-base);
+.auth-footer .btn-modern {
+  width: 100%;
   margin-bottom: var(--spacing-md);
 }
 
-.back-link svg {
-  width: 16px;
-  height: 16px;
-}
-
-.back-link:hover {
-  background: rgba(255, 255, 255, 0.2);
-  transform: translateY(-1px);
-}
-
 .signup-prompt {
-  margin-top: var(--spacing-md);
+  margin-top: var(--spacing-lg);
 }
 
 .signup-prompt p {
   margin: 0 0 var(--spacing-sm) 0;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--color-text-secondary);
   font-size: var(--font-size-sm);
 }
 
-.signup-link {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  color: var(--color-text-inverse);
+.link-text {
+  color: var(--color-primary);
   text-decoration: none;
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
   transition: all var(--transition-base);
 }
 
-.signup-link svg {
-  width: 16px;
-  height: 16px;
-  transition: all var(--transition-base);
-}
-
-.signup-link:hover {
-  gap: var(--spacing-sm);
+.link-text:hover {
+  color: var(--color-primary-dark);
   text-decoration: underline;
 }
 
@@ -692,6 +551,29 @@ input::placeholder {
   animation-delay: 4s;
 }
 
+/* ============================================
+   BOTTOM LINK
+   ============================================ */
+.bottom-link {
+  position: absolute;
+  bottom: var(--spacing-2xl);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+}
+
+.bottom-link .btn-modern {
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(10px);
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.bottom-link .btn-modern:hover {
+  background: rgba(255, 255, 255, 0.25);
+  border-color: rgba(255, 255, 255, 0.5);
+}
+
 /* ============================================
    ANIMATIONS
    ============================================ */
@@ -749,24 +631,6 @@ input::placeholder {
   }
 }
 
-@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);
@@ -793,32 +657,12 @@ input::placeholder {
     padding: var(--spacing-md);
   }
 
-  .reset-card {
-    border-radius: var(--radius-xl);
+  .auth-card {
+    padding: var(--spacing-xl);
   }
 
-  .card-header {
-    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-md);
-  }
-
-  .reset-form {
-    padding: var(--spacing-md) var(--spacing-lg);
-  }
-
-  .success-section {
-    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
-  }
-
-  .links-section {
-    padding: 0 var(--spacing-lg) var(--spacing-lg);
-  }
-
-  h1 {
-    font-size: var(--font-size-3xl);
-  }
-
-  .subtitle {
-    font-size: var(--font-size-sm);
+  .auth-header {
+    margin-bottom: var(--spacing-lg);
   }
 
   .logo-wrapper {
@@ -828,8 +672,16 @@ input::placeholder {
     padding: var(--spacing-md);
   }
 
+  h1 {
+    font-size: var(--font-size-2xl);
+  }
+
+  .subtitle {
+    font-size: var(--font-size-sm);
+  }
+
   .instructions {
-    gap: var(--spacing-sm);
+    margin: var(--spacing-lg) 0;
   }
 
   .instruction-step {
@@ -838,27 +690,9 @@ input::placeholder {
   }
 
   .step-number {
-    width: 32px;
-    height: 32px;
-    font-size: var(--font-size-sm);
-  }
-
-  .step-content p {
-    font-size: var(--font-size-sm);
-  }
-
-  .spam-notice {
-    gap: var(--spacing-sm);
-    padding: var(--spacing-sm);
-  }
-
-  .spam-notice svg {
-    width: 18px;
-    height: 18px;
-  }
-
-  .spam-notice p {
-    font-size: var(--font-size-sm);
+    width: 36px;
+    height: 36px;
+    font-size: var(--font-size-base);
   }
 
   .email-display {
@@ -866,31 +700,8 @@ input::placeholder {
     word-break: break-word;
   }
 
-  input {
-    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 2.75rem;
-    font-size: 16px;
-  }
-
-  .input-icon {
-    left: var(--spacing-sm);
-  }
-
-  .divider {
-    margin: var(--spacing-lg) 0 var(--spacing-md);
-  }
-
-  .divider::before {
-    left: -50px;
-    right: -50px;
-  }
-
-  .back-link {
-    width: 100%;
-    margin-bottom: var(--spacing-md);
-  }
-
-  .signup-prompt p {
-    font-size: var(--font-size-sm);
+  .auth-divider {
+    margin: var(--spacing-xl) 0 var(--spacing-md) 0;
   }
 
   .blob-1 {
@@ -910,29 +721,12 @@ input::placeholder {
 }
 
 @media (max-width: 480px) {
-  .reset-card {
-    border-radius: var(--radius-lg);
+  .auth-card {
+    padding: var(--spacing-lg);
   }
 
-  .card-header {
-    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-sm);
-  }
-
-  .reset-form {
-    padding: var(--spacing-sm) var(--spacing-md);
-    gap: var(--spacing-md);
-  }
-
-  .success-section {
-    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
-  }
-
-  .links-section {
-    padding: 0 var(--spacing-md) var(--spacing-md);
-  }
-
-  h1 {
-    font-size: var(--font-size-2xl);
+  .auth-header {
+    margin-bottom: var(--spacing-md);
   }
 
   .logo-wrapper {
@@ -940,54 +734,32 @@ input::placeholder {
     height: 56px;
   }
 
-  .check-animation {
-    width: 64px;
-    height: 64px;
-    margin-bottom: var(--spacing-md);
-    padding: var(--spacing-md);
-  }
-
-  label {
+  .step-content strong {
     font-size: var(--font-size-sm);
   }
 
-  .btn-primary {
-    padding: var(--spacing-md);
-    font-size: var(--font-size-sm);
+  .step-content p {
+    font-size: var(--font-size-xs);
   }
 
-  .btn-secondary {
-    padding: var(--spacing-sm) var(--spacing-md);
-    font-size: var(--font-size-sm);
-  }
-
-  .error-message {
-    gap: var(--spacing-xs);
-    padding: var(--spacing-sm);
-    font-size: var(--font-size-sm);
-  }
-
-  .error-message svg {
-    width: 18px;
-    height: 18px;
-  }
-
-  .divider span {
-    font-size: var(--font-size-sm);
-  }
-
-  .signup-prompt {
-    margin-top: var(--spacing-sm);
-  }
-
-  .signup-prompt p {
-    font-size: var(--font-size-sm);
-    margin-bottom: var(--spacing-xs);
-  }
-
-  .back-link {
-    padding: var(--spacing-xs) var(--spacing-md);
-    font-size: var(--font-size-sm);
+  .bottom-link {
+    bottom: var(--spacing-md);
   }
 }
-</style>
\ No newline at end of file
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .auth-card,
+  .logo-wrapper,
+  h1,
+  .subtitle,
+  .decoration-blob,
+  .instruction-step {
+    animation: none;
+  }
+
+  .instruction-step:hover {
+    transform: none;
+  }
+}
+</style>
diff --git a/src/components/UserDashboard.vue b/src/components/UserDashboard.vue
index 671a723..52a85f5 100644
--- a/src/components/UserDashboard.vue
+++ b/src/components/UserDashboard.vue
@@ -304,7 +304,6 @@ import { useAuth } from '@/composables/useAuth'
 import api from '@/services/api'
 import ModernNavbar from '@/components/ModernNavbar.vue'
 
-const router = useRouter()
 const auth = useAuth()
 
 const activePeriod = ref('week')
@@ -322,11 +321,11 @@ const nextWorkout = ref(null)
 
 const currentDate = computed(() => {
   const now = new Date()
-  return now.toLocaleDateString('en-US', { 
-    weekday: 'long', 
-    year: 'numeric', 
-    month: 'long', 
-    day: 'numeric' 
+  return now.toLocaleDateString('en-US', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
   })
 })
 
@@ -353,17 +352,13 @@ function loadNextWorkout() {
     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',
diff --git a/src/components/WorkoutCalendar.vue b/src/components/WorkoutCalendar.vue
index 2006c51..c6deb3e 100644
--- a/src/components/WorkoutCalendar.vue
+++ b/src/components/WorkoutCalendar.vue
@@ -596,14 +596,6 @@ function isToday(date) {
     date.getFullYear() === today.getFullYear()
 }
 
-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)