From 03954099632349bb2cdfe837a87d0216febd1e3f Mon Sep 17 00:00:00 2001
From: Blake Ridgway <blake@blakeridgway.com>
Date: Mon, 9 Feb 2026 22:22:32 -0600
Subject: [PATCH] tailwind, complete overhaul. remove dead code, clean strcut

---
 package-lock.json                  |  658 ++++++++++++++-
 package.json                       |    5 +-
 postcss.config.js                  |    5 +
 public/index.html                  |    8 +-
 src/App.vue                        |   33 +-
 src/assets/css/design-system.css   |  134 +++
 src/assets/logo.png                |  Bin 6849 -> 0 bytes
 src/components/LoggedinPage.vue    |  259 ------
 src/components/ModernNavbar.vue    |  529 +++---------
 src/components/PasswordReset.vue   |  992 -----------------------
 src/components/TrainingZones.vue   | 1156 --------------------------
 src/components/UserDashboard.vue   | 1035 ------------------------
 src/components/UserEquipment.vue   | 1208 ----------------------------
 src/components/UserLogin.vue       |  875 --------------------
 src/components/UserProfile.vue     |  889 --------------------
 src/components/UserSignup.vue      |  984 ----------------------
 src/components/WorkoutCalendar.vue |  930 ---------------------
 src/components/WorkoutDetail.vue   |  568 +++----------
 src/composables/useAuth.js         |   19 -
 src/main.js                        |    1 +
 src/router/index.js                |   16 +-
 src/stores/theme.js                |   25 +
 src/views/PasswordReset.vue        |   93 +++
 src/views/TrainingZones.vue        |  318 ++++++++
 src/views/UserDashboard.vue        |  216 +++++
 src/views/UserEquipment.vue        |  477 +++++++++++
 src/views/UserLogin.vue            |   95 +++
 src/views/UserProfile.vue          |  288 +++++++
 src/views/UserSignup.vue           |  170 ++++
 src/views/WorkoutCalendar.vue      |  509 ++++++++++++
 30 files changed, 3194 insertions(+), 9301 deletions(-)
 create mode 100644 postcss.config.js
 create mode 100644 src/assets/css/design-system.css
 delete mode 100644 src/assets/logo.png
 delete mode 100644 src/components/LoggedinPage.vue
 delete mode 100644 src/components/PasswordReset.vue
 delete mode 100644 src/components/TrainingZones.vue
 delete mode 100644 src/components/UserDashboard.vue
 delete mode 100644 src/components/UserEquipment.vue
 delete mode 100644 src/components/UserLogin.vue
 delete mode 100644 src/components/UserProfile.vue
 delete mode 100644 src/components/UserSignup.vue
 delete mode 100644 src/components/WorkoutCalendar.vue
 delete mode 100644 src/composables/useAuth.js
 create mode 100644 src/stores/theme.js
 create mode 100644 src/views/PasswordReset.vue
 create mode 100644 src/views/TrainingZones.vue
 create mode 100644 src/views/UserDashboard.vue
 create mode 100644 src/views/UserEquipment.vue
 create mode 100644 src/views/UserLogin.vue
 create mode 100644 src/views/UserProfile.vue
 create mode 100644 src/views/UserSignup.vue
 create mode 100644 src/views/WorkoutCalendar.vue

diff --git a/package-lock.json b/package-lock.json
index 09eae36..d914c14 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,12 @@
       "name": "rideaware-ui",
       "version": "0.1.0",
       "dependencies": {
+        "@tailwindcss/postcss": "^4.1.18",
         "axios": "^1.12.0",
         "core-js": "^3.8.3",
+        "pinia": "^2.1.0",
+        "postcss": "^8.5.6",
+        "tailwindcss": "^4.1.18",
         "vue": "^3.2.13",
         "vue-router": "^4.5.0"
       },
@@ -38,6 +42,18 @@
         "node": "8 || 9 || 10 || 11 || 12 || 13 || 14 || 15 || 16 || 17 || 18 || 19 || 20 || 21 || 22"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -1865,7 +1881,6 @@
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
       "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
@@ -1876,11 +1891,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1890,7 +1914,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1908,16 +1931,15 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -2049,6 +2071,262 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.18.tgz",
+      "integrity": "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.4",
+        "enhanced-resolve": "^5.18.3",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.30.2",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.18"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.18.tgz",
+      "integrity": "sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.18",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.18",
+        "@tailwindcss/oxide-darwin-x64": "4.1.18",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.18",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.18",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.18",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.18",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.18",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.18",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.18",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.18",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.18"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.18.tgz",
+      "integrity": "sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.18.tgz",
+      "integrity": "sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.18.tgz",
+      "integrity": "sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.18.tgz",
+      "integrity": "sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.18.tgz",
+      "integrity": "sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.18.tgz",
+      "integrity": "sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.18.tgz",
+      "integrity": "sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.18.tgz",
+      "integrity": "sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.18.tgz",
+      "integrity": "sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.18.tgz",
+      "integrity": "sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.1.0",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.18.tgz",
+      "integrity": "sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.18.tgz",
+      "integrity": "sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.18.tgz",
+      "integrity": "sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.1.18",
+        "@tailwindcss/oxide": "4.1.18",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.1.18"
+      }
+    },
     "node_modules/@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -5104,6 +5382,15 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/detect-node": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
@@ -5340,14 +5627,13 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.17.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
-      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
-      "dev": true,
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.19.0.tgz",
+      "integrity": "sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==",
       "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
+        "tapable": "^2.3.0"
       },
       "engines": {
         "node": ">=10.13.0"
@@ -6663,7 +6949,6 @@
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/gzip-size": {
@@ -7399,6 +7684,15 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/joi": {
       "version": "17.13.3",
       "resolved": "https://registry.npmjs.org/joi/-/joi-17.13.3.tgz",
@@ -7583,6 +7877,255 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.30.2",
+        "lightningcss-darwin-arm64": "1.30.2",
+        "lightningcss-darwin-x64": "1.30.2",
+        "lightningcss-freebsd-x64": "1.30.2",
+        "lightningcss-linux-arm-gnueabihf": "1.30.2",
+        "lightningcss-linux-arm64-gnu": "1.30.2",
+        "lightningcss-linux-arm64-musl": "1.30.2",
+        "lightningcss-linux-x64-gnu": "1.30.2",
+        "lightningcss-linux-x64-musl": "1.30.2",
+        "lightningcss-win32-arm64-msvc": "1.30.2",
+        "lightningcss-win32-x64-msvc": "1.30.2"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
+      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
+      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
+      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
+      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
+      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
+      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
+      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
+      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
+      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
+      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -7895,12 +8438,12 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.17",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
-      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.0"
+        "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
     "node_modules/make-dir": {
@@ -8255,9 +8798,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
-      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
       "funding": [
         {
           "type": "github",
@@ -8853,6 +9396,28 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.3.1.tgz",
+      "integrity": "sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.4.4",
+        "vue": "^2.7.0 || ^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -8892,9 +9457,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.49",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
-      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "funding": [
         {
           "type": "opencollective",
@@ -8911,7 +9476,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.7",
+        "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -10899,14 +11464,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tailwindcss": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
+      "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
+      "license": "MIT"
+    },
     "node_modules/tapable": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
-      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
-      "dev": true,
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
     "node_modules/terser": {
@@ -11166,7 +11740,7 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true,
+      "devOptional": true,
       "license": "0BSD"
     },
     "node_modules/type-check": {
@@ -11401,6 +11975,32 @@
         }
       }
     },
+    "node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
diff --git a/package.json b/package.json
index 44e0333..b712499 100644
--- a/package.json
+++ b/package.json
@@ -8,9 +8,12 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
     "axios": "^1.12.0",
     "core-js": "^3.8.3",
     "pinia": "^2.1.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
     "vue": "^3.2.13",
     "vue-router": "^4.5.0"
   },
@@ -43,4 +46,4 @@
     "not dead",
     "not ie 11"
   ]
-}
\ No newline at end of file
+}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..52b9b4b
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
diff --git a/public/index.html b/public/index.html
index 27e73bf..3686c82 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,11 +1,15 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="en" class="dark">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>DEV - RideAware</title>
+    <title>RideAware</title>
+    <meta name="theme-color" content="#09090b">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index 48f8df3..b1f9d92 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,31 +1,10 @@
 <template>
-  <router-view />
+  <div class="min-h-screen bg-zinc-100 dark:bg-surface-950 text-zinc-900 dark:text-zinc-100 transition-colors">
+    <router-view />
+  </div>
 </template>
 
-<script>
-export default {
-  name: 'App',
-}
+<script setup>
+import { useThemeStore } from '@/stores/theme'
+useThemeStore()
 </script>
-
-<style>
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: #f5f5f5;
-}
-
-#app {
-  width: 100%;
-  min-height: 100vh;
-}
-</style>
\ No newline at end of file
diff --git a/src/assets/css/design-system.css b/src/assets/css/design-system.css
new file mode 100644
index 0000000..d271a1e
--- /dev/null
+++ b/src/assets/css/design-system.css
@@ -0,0 +1,134 @@
+@import "tailwindcss";
+
+/* Class-based dark mode */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Design Tokens */
+@theme {
+  --color-surface-0: #ffffff;
+  --color-surface-50: #fafafa;
+  --color-surface-100: #f4f4f5;
+  --color-surface-200: #e4e4e7;
+  --color-surface-700: #3f3f46;
+  --color-surface-800: #27272a;
+  --color-surface-900: #18181b;
+  --color-surface-950: #09090b;
+
+  --color-brand-50: #eef2ff;
+  --color-brand-100: #e0e7ff;
+  --color-brand-400: #818cf8;
+  --color-brand-500: #6366f1;
+  --color-brand-600: #4f46e5;
+  --color-brand-700: #4338ca;
+
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-card-hover: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
+}
+
+/* Base Styles */
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    overflow-x: hidden;
+  }
+
+  ::-webkit-scrollbar {
+    width: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #a1a1aa;
+    border-radius: 3px;
+  }
+  .dark ::-webkit-scrollbar-thumb {
+    background: #3f3f46;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: #71717a;
+  }
+
+  ::selection {
+    background: rgba(99, 102, 241, 0.3);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+    html {
+      scroll-behavior: auto;
+    }
+  }
+}
+
+/* Reusable Component Classes */
+@layer components {
+  .btn-primary {
+    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-semibold text-white bg-brand-600 rounded-lg hover:bg-brand-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .btn-secondary {
+    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-300 bg-zinc-100 dark:bg-zinc-800 rounded-lg hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors;
+  }
+
+  .btn-danger {
+    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors;
+  }
+
+  .input-field {
+    @apply w-full py-2 px-3 text-sm bg-white dark:bg-zinc-800/50 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-colors;
+  }
+
+  .card {
+    @apply bg-white dark:bg-surface-900 border border-zinc-200 dark:border-zinc-800 rounded-lg;
+  }
+
+  .modal-overlay {
+    @apply fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4;
+  }
+
+  .modal-panel {
+    @apply w-full bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-700 shadow-xl max-h-[90vh] overflow-y-auto;
+  }
+
+  .nav-link-item {
+    @apply flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-sm font-medium text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 hover:bg-zinc-100 dark:hover:bg-zinc-800/50 transition-colors no-underline relative;
+  }
+
+  .nav-link-item.router-link-active {
+    @apply text-zinc-900 dark:text-zinc-100;
+  }
+
+  .nav-link-item.router-link-active::after {
+    content: '';
+    @apply absolute bottom-0 left-2.5 right-2.5 h-0.5 bg-brand-500 rounded-full;
+  }
+
+  .mobile-nav-link {
+    @apply flex items-center gap-2 px-3 py-2.5 rounded-md text-sm font-medium text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-zinc-100 no-underline transition-colors;
+  }
+
+  .mobile-nav-link.router-link-active {
+    @apply bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100;
+  }
+}
+
+/* Spinner animation */
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
diff --git a/src/assets/logo.png b/src/assets/logo.png
deleted file mode 100644
index f3d2503fc2a44b5053b0837ebea6e87a2d339a43..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6849
zcmaKRcUV(fvo}bjDT-7nLI_nlK}sT_69H+`qzVWDA|yaU?}j417wLi^B1KB1SLsC&
zL0ag7$U(XW5YR7p&Ux?s<Na=)C)s<=p5LrlQ`Vj}i8j!?Lr2R_OGZXUr=_WGNV*Q3
zf2k=+zm;ZH`J@Y*r-qrQk(;BZj~xa<rsClC5CPOe**PH$5q1uK9)k!4GBOHYq_LT&
znXV4h-VG&gcg`d3i*hHS$;cFxeBJHrT@aqYhX^Mm8V1^F=>P$d4lvMt8C^+TcQu4F
zQqv!UF!I+kw)c0jhd6+g6oCr9P?7)?!qX1ui*iL{p}sKCAGuJ{{W)0z1pLF|=>h}&
zt(2Lr0Z`2ig8<5i%Zk}cO5Fm=LByqGWaS`oqChZdEFmc`0hSb#gg|Aap^{+WKOYcj
zHjINK)KDG%&s?Mt4CL(T=?;~U@bU2x_mLKN!#GJuK_CzbNw5SMEJorG!}_5;?R>@1
zSl)jns3WlU7^J%=(hUtfmuUCU&C3%8B5C^f5>W2Cy8jW3#{Od{lF1}|?c61##3dzA
zsPlFG;l_FzBK}8>|H_Ru_H#!_7$UH4UKo3lKOA}g1(R&|e@}GINYVzX?q=_WLZCgh
z)L|eJMce`D0EIwgRaNETDsr+?vQknSGAi=7H00r`QnI%oQnFxm`G2umXso9l+8*&Q
z7WqF|$p49js$mdzo^BXpH#gURy=UO;=IMrYc5?@+sR4y_?d*~0^YP7d+y0{}0)zBM
zIKVM(DBvICK#~7N0a+PY6)7;u=dutmNqK3AlsrUU9U`d;msiucB_|8|2kY=(7XA;G
zwDA8AR)VCA#JOkxm#6<Fk;3Qv_CIk;8vG~n5ol7lV@Ppr$`vO}M#g$eOI^j-clMjL
zOPuv5uLtX1JFT#MwySH_RJ4r>oHNS^YVuOU;8p$N)2{`;oF|rQ?B~K$%rHDxXs+_G
zF5|-uqHZvSzq}L;5Kcy_P+x0${33}Ofb6+TX&=y;;PkEOpz%<lxjl%Ocl~M2y2lP|
zbFM`Z-*dEp9W{5_I?FqgKOqcjrGzul_KvvA0B9o^)C&!8LQLB95vnvr20|)KwER)3
zg@AiPX~4f9{zIy9K63eeK%_eUy<Xj$!il}`M9Aai_i>+_bCw_<t<K-?r^}*l>{<&~
zeLV|!bP%l1qxywfVr9Z9JI+++EO^x>ZuCK);=$VIG1`kxK8F2M8AdC$iOe3cj<EWM
zKtfCf^Zg1tRdj=Xm)|^7J1pa)+-CDvXj&R?416f(tgg8|WBR8cdxDx?*Yn+_9!KKY
zYfc;GQgX!L+9q}en#aZ8FKqby@Ji7SuT!4)GFKidFyC9wMywvB3c%^>1fo(ce4l-9
z7*zKy3={MixvUk=enQE;ED~7tv%qh&3lR<0m??@w{ILF|e#QOyPkFYK!&Up7xWNtL
zOW%1QMC<3o;G9_S1;NkPB6bqbCOjeztEc6TsBM<(q9((JKiH{01+Ud=uw9B@{;(JJ
z-DxI2*{pMq`q1RQc;V8@gYAY44Z!%#W~M9pRxI(R?SJ7<UU2Y^EpY^fzuq-h_rtLL
zw8{`NN~<)$oMx`|^gGr>sy7em=Z5DbuDlr@*q|25V)($-f}9c#?D%dU^RS<(wz?{P
zFFHtCab*!rl(~j@0(Nadvwg8q|4!}L^>d?0al6}Rrv9$0M#^&@zjbfJy_n!%mVHK4
z6pLRIQ^Uq~dnyy$`ay51Us6WaP%&O;@49m&{G3z7xV3dLtt1VTOMYl3UW~Rm{Eq4m
zF?Zl_v;?7EFx1_+#WFUXxcK78IV)FO>42@cm@}2I%pVbZqQ}3;p;sDIm&knay03a^
zn$5}Q$G!@fTwD$e(x-~aWP0h+4N<q|;xEwzsU+0W)#|>Rz$Kln<bW)%U3n>O_H2c<
z(XX#lPuW_%H#Q+c&(nRyX1-Ia<yTsbNAz3PBfuh9@JU{>dKR-%$4FYC0fsCmL9ky3
zKpxyjd^JFR+vg2!=HWf}2Z?@Td`0EG`kU?{8zKrvtsm)|7>pPk9nu@2^z96aU2<#`
z2QhvH5w&V;wER?mopu+nqu*n8p~(%Q<o-E#HMmv_6Lr(S<y?zXl02$twV54+g=p_C
zbPW!;qljHcIPw~aX95_u!itzF%xKBH?y!MCRe^`1V@8<G!;_`~Q-@-mUm7r`3Jc*<
zW|jM!A9`X|osT!srEU-27h+^5j<OqNPj-EFHPokG&HB5WAG01lt!13`S9niUI^dz+
zrPE=GX-SXL@wqVGe*HT?V{#O~&~?uH#PoV2h;Vj@x`#d8)T&F})!(j^f1!z+l?Jjx
zylKosI<}}<nHbsk7I?v<<vXs6tPoozmJ}avD&{J7$vR$!Ni~Q@;tH>kwSs&*0eJwa
zMXR05`OSFpfyRb!<VB&Y0bEEVE$hSNXH(0mbzS-;?|O<AG)<R8gmLSuf>Y_+H@O%Y
z0=K^y6B8Gcbl?SA)qMP3Z+=C(?8zL@=74R=EVnE?vY!1BQy2@q*RUgRx4yJ$k}MnL
zs!?74QciNb-LcG*&o<9=DSL>1n}ZNd)w1z3-0Pd^4ED1{qd=9|!!N?xnXjM!EuylY
z5=!H>&hSofh8V?Jofyd!h`xDI1fYAuV(sZwwN~{$a}MX^=+0TH*SFp$vyxmUv7C*W
zv^3Gl0+eTFgBi3FVD;$nhcp)ka*4gSskYIqQ&+M}xP9yLAkWzBI^I%zR^l1e?bW_6
zIn{mo{dD=)9@V?s^fa55jh78rP*Ze<3`tRCN4*mpO$@7a^*2B*7N_|A(Ve2VB|)_o
z$=#_=aBkhe(ifX}MLT()@5?<tMQW)|T904`EDIN{(*~?7PZ%vrUEuUf@Om1Lh8V<U
zqvVYpe+tw_sKHyj#O-VCO5S%E1lshLO74De`Gk2E(7WE#<PpDtbvmnFnSOqG1oI3d
zYC<jZo_G~2KIE6{8;7bJFfC?E4zS>OV+~7cXC3r!%{QJxriXo9I%*3q4KT4Xxzyd{
z9;_%=W%q!Vw$Z7F3lUnY+1HZ*lO;4;VR2+i4+D(m#01OYq|L_fbnT;KN<^dkkCwtd
zF7n+O7KvAw8c`JUh6LmeIrk4`F3o|AagKSMK3))_5Cv~y2Bb2!Ibg9BO7Vkz?pAYX
zoI=B}+$R22&IL`NCYUYjrdhwjnM<dIpta11b@>x_v=-Qcx-jmtN>!Zqf|n1^SWrHy
zK|MwJ?Z#^>)rfT5YSY{qjZ&`Fjd;^vv&gF-Yj6$9-Dy$<6zeP4s+78gS2|t%Z309b
z0^fp~ue_}i`U9j!<|qF92_3oB09NqgAoehQ`)<)dSfKoJl_A6Ec#*Mx9Cpd-p#$Ez
z={AM*r-bQs6*z$!*V<pNyBZpFi*F}aPuOZk!oD1sov}{rrxFZa@)!5H(|DKR-T0B*
zk=XmkSgqtSP+yWN@0aMgOdP>A4|QE7bf@-4vb?Q+pPKLkY2{yKsw{&udv_2v8{Dbd
zm~8VAv!G~s)`O3|Q6vFUV%8%+?ZSVUa(;fhPNg#vab@J*9XE4#D%)$UU-T5`fwjz!
z6&gA^`OGu6aUk{l*h9eB?opVdrHK>Q@U>&JQ_2pR%}TyOXGq_6s56_`U(WoOaAb+K
zXQr#6H}>a-GYs9^bG<C4b$CvneP46N2fi^kmcJjoTXRGgd^g1b&uQ5spV5+b#%y`#
zrU;H~D)utn!YWIi=j;?C-zcJ^D5xZF+#(?rMdp;)?KT1xBnMkmoV;zh&S;rXW6QQx
zWTQ2K14`6wG0eo+=1oSxjIHJc9Zkw+()XT69~5<`ZtDM}Z2bxUwYy3m%<I&~-0+^1
zYtu2vJf--MIxlG~PPDn;z8t5-=$6>P2Y&hSP5gEtW+GVC4=wy0wQk=~%CSXj=GH6q
z-T#s!BV`xZVxm{~jr_ezYRpqqIcXC=Oq`b{lu`Rt(IYr4B91hhVC?yg{ol4WUr3v9
zOAk2LG>CIECZ-WIs0$N}F#eoIUEtZudc7DPYIjzGqDLWk_A4#(<oDDN)6%Ctygl~O
zyPZcr9YCj-jDP7@YK23SJG!MDFZ1)E9`{R$R<J$u)%oUM9#k)$atlYczfhesFXL-4
zvsoG-9l@uTA8QI2Z$HsSvPZlMpB!@DV{4Bs(b)t!a<<4O@H~uuN{fO$vY>LgacooD
z2K4IWs@N`Bddm-{%oy}!k0^i6Yh)uJ1S*90>|bm3TOZxcV|ywHUb(+CeX-o1|LTZM
zwU>dY3R&U)T(}5#Neh?-CWT~@{6Ke@sI)uSuzoah8COy)w)B)aslJmp`WUcjdia-0
zl2Y}&L~XfA`uYQboAJ1;J{XLhYjH){cObH3FDva+^8ioOQy%Z=xyjGLmWMrzfFoH;
zEi3AG`_v+%)&lDJE;iJWJDI@-X9K5O)LD~j*PBe(wu+|%ar~C+LK1+-+lK<ll>=t#
z+Xc+J7qp~5q=B~rD!x78)?1+KUIbYr^5rcl&tB-cTtj+e%{gpZZ4G~6r15+d|J(ky
zjg@@UzMW0k9@S#W(1H{u;Nq(7llJbq;;4t$awM;l&(2s+$l!Ay9^Ge|34CVhr7|BG
z?dAR83smef^frq9V(OH+a+ki#q&-7TkWfFM=5bsGbU(8mC;>QTCWL5ydz9s6k@?+V
zcjiH`VI=59P-(-DWXZ~5DH>B^_H~;4$)KUhnmGo*G!Tq8^LjfUDO)lASN*=#AY_yS
zqW9UX(VOCO&p@kHdUUgsBO0KhXxn1sprK5h8}+>IhX(nSXZKwlNsjk^M|RAaqmCZB
zHBol<PMLlw!1W2AX{4`0(aI-^)x1d_zq-0U*e!X=g^kk>OHYBas@&{PT=R+?d8pZu
zUHfyucQ`(umXSW7o?HQ3H21M`ZJal+%*)SH1B1j6rxTlG3hx1IGJN^M7{$j(9V;MZ
zRKybgVuxKo#XVM+?*yTy{W+XHaU5Jbt-UG33x{u(N-2wmw;zzPH&4DE103HV@ER86
z|FZEmQb|&1s5#`$4!Cm}&`^{(4V}OP$bk`}v6q6rm;P!H)W|2i^e{7lTk2W@jo_9q
z*aw|U7#+g59Fv(5qI`#O-qPj#@_P>PC#I(GSp3DLv7x-dmYK=C7lPF8a)bxb=@)B1
zUZ`EqpXV2dR}B&r`uM}N(TS99ZT0UB%IN|0H%DcVO#T%L_chrgn#m6%x4KE*IMfjX
zJ%4veCEqbXZ`H`F_+fELMC@wuy_ch%t*+Z+1I}wN#C+dRrf2X{1C8=yZ_%Pt6wL_~
zZ2NN-hXOT4P4n$QFO7yYHS-4wF1Xfr-meG9Pn;uK51?hfel`d38k{W)F*|gJLT2#T
z<~>spMu4(mul-8Q3*pf=N4DcI)zzjqAgbE2eOT7~&f1W3VsdD44Ffe;3mJp-V@8UC
z)|qnPc12o~$X-+U@L_lWqv-RtvB~%hLF($%Ew5w>^NR82qC_0F<zVqs?Raxz=2A>B
z)=hP1-OEx?lLi#jnLzH}a;Nvr@JDO-zQWd}#k^an$Kwml;MrD&)sC5b`s0ZkVyPkb
zt}-jOq^%_9>YZe7Y}PhW{a)c39G`kg(P4@kxjcYfgB4XOOcmezdUI7j-!gs7oAo2o
zx(Ph{G+YZ`a%~kzK!HTAA5NXE-7vOFRr5oqY$rH>WI6SFvWmahFav!CfRMM3%8J&c
z*p+%|-fNS_@QrFr(at!JY9jCg9F-%5{nb5Bo~z@Y9m&SHYV`49GAJjA5h~h4(G!Se
zZmK{Bo7ivCfvl}@A-ptkFGcWXAzj3xfl{evi-OG(TaCn1FAHxRc{}B|x+Ua1D=I6M
z!C^ZIvK6aS_c&(=OQDZfm>O`Nxsw{ta&yiYPA~@e#c%N>>#rq)k6Aru-qD4(D^v)y
z*>Rs;YUbD1S8^D(ps6Jbj0K3wJw>L4m)0e(6Pee3Y?gy9i0^bZO?$*sv+xKV?WBlh
zAp*;v6w!a8;A7sLB*g-^<$Z4L7|5jXxxP1}hQZ<55f9<^KJ>^mKlWSGaLcO0=$jem
zWyZkRwe~u{{tU63DlCaS9$Y4CP4f?+wwa(&1ou)b>72yd<aYLC-(YWFHR=3p2C;o@
zP>rFvm`R<qZaNijJ?9e0Ao@J0FQbg1c%wi*X&vhQIV{0-tqBevRs?R)1sbxUT&}HJ
z*KdKSzTFX7&Aa4>j-0`kBJgK@nd(*Eh!(NC{F-@=FnF&Y!q`7){YsLLHf0_B6aHc#
z>WIuHTyJwIH{BJ4)2RtEauC7Yq7Cytc|S<m;S)8!_N`GikUqEGHdRcGU-QPEbp3se
zE7LrqZLNv81NNuz!tDCc*XEM9tD}O}AA<wr-O|Mp0pzPgSb{6jitn>)4^*t8Va3HR
zg=~sN^tp9re@w=GTx$;zOWMjcg-7X3Wk^N$n;&Kf1RgVG2}2L-(0o)54C509C&77i
zrjSi{X*WV=%C17((N^6R4Ya*4#6s_L99RtQ>m(%#nQ#wrRC8Y%yxkH;d!MdY+Tw@r
zjpSnK`;C-U{ATcgaxoEpP0Gf+tx);buOM<s@Z}LbUcXA@TIG=Q@myo%l9hl^&h34x
zu6;dv<5;?t)>lK=01D|J+ROu37qc*rD(w`#O=3*O*w9?biwNoq3WN1`&Wp8TvKj3C
z3HR9ssH7a&Vr<6waJrU<Uz3;wi7<=4xfd1VLN$2P7x}BBS2io@ltlrnmzyIDtt<yX
zAPcqxp4#$=Z%yky_m)4l_cnk`*u)Ahtuv8K{6vhAKMH6ow@c&kpm#&qGLE(Nu?A^>
zdLg!ieYz%U^bmpn%;(V%%ugMk92&?_XX1K@mwnVSE6!&%P%Wdi7_h`CpScvspMx?N
zQUR>oadnG17#hNc$pkTp+9<O}Jes}mOYA)lX@8ntoYG-_HA4-;x|^l1dmnFbnH;3A
zo7RmzjAt!StB&)wt}}Vz$Tx7{+QOd#U@!|=V-Oy>lW+MBKHRZ~7<Tp{OpB;sNJVcO
zP9gJmH&Z2nt++Wk^~d|9`p`s~@#e4h2h+!@-1=fBDgb_osGReiQgZ>4XWUryd)4yd
zj98$%XmIL4(9OnoeO5Fnyn&fpQ9b0h4e6EHHw*l68j;>(ya`g^S&y2{O8U>1*>4zR
zq*WSI_2o$CHQ?x0!wl9bpx|Cm2+kFMR)oMud1%n2=qn5nE&t@Fgr#=Zv2?}wtEz^T
z9rrj=?I<GKR}2`GsAAn<o<uOC`pid<%}8(c`p&zgnk&0rnZ{7Rb)^0-DfYcASTQ0s
zKO0S&yqP5xyM1crewennx~2nl$+FH?k$&4izqT?3*7J(SmJOw`dZb5FYs=|K5XN*~
z@!QVYGRE&)UH{eRL^>H*qI5{G@Rn&}^Z{+TW}mQe<Ew(X_9Cg%_)${IZP(Sf(i}}#
zbP^Uyd)|N;rJ4rvPkN0$CN?X?Bu3o`sBkNx9e)Hk<|kZoor>b9=8b<_a`&Cm#n%n~
zU47MvCBsdXFB1+adOO)03+nczfWa#vwk<X*p?NEOGFg@VXR_YfNi3ZWGup*ZMYLrd
zivdVFWx1f#$rH$D0S;+?%}dLVO}~LftMC3)E?;ORtVD#gO@_oLGdOsk#uT@)CP$RI
z#-#zp;&|vD_rYnvw~2N0Wp+nQ+xVJ$IH9kk(&N_Uad`)ORc-o<^o9v_z)$2HD4jGQ
zI}WMPN93Rji|(>#r{o{dF)QWya9v2nv43Zp3%Ps}($lA02*_g25t;|T{A5snSY?3A
zrRQ~(Ygh_ebltHo1VC<XI}!-0hb>bJb*eOAr;4cnlXLvI>*$-#AVsGg6B1r7@;g^L
zFlJ_th0vxO7;-opU@WA<a+$A0VKV&CD~?Y9W`bM2k~*P|j8E*2CoV8)Cu!IV5;k=`
zm0lA9424u4MQ;9hkajM?rCu<5Nio0ru*d*6!O7wLB^>Fe;<}?!2q?RBrFK5U{<mA*
z;WN^+Hz{=MA9j{=Q!Qyy7=i0XTx(4nT94X=`8CIvSzRT*3@ox%j?(gLc30~Knc##R
z`(0eGu62$+sd#-(+!IS_v$FsA^Q8gK0r%Y15^&Pc`)3fzUE9X{;k8eN8;R}9b;E)`
zT8R>*ai@NLKZ^};Ul}beukveh?TQn;$%9=R+DX07m82gP$=}Uo_%&ngV`}Hyv8g{u
z3SWzTGV|cwQuFIs7ZDOqO_fGf8Q`8MwL}eUp>q?4eqCmOTcwQuXtQckPy|4F1on8l
zP*h>d+cH#XQf|+6c|S{7SF(Lg>bR~l(0uY?O{OEVlaxa5@e%T&xju=o1`=OD#qc16
zSvyH*my(dcp6~VqR;o(#@m44Lug@~_qw+HA=mS#Z^<V!az}@c{ARa+_X}NO~a$=9p
za)_Ly?(LOnFWV{rQbS?1K7hP~fC?!$z}<pP%6*k1O(nj^MX2}V?0EMJUI;+4&As(@
zxYB>4reBy8iV?H~I;{LQWk3aKK8$bLRyt$g?-<xQqj`npk`D=fcL`B%EgjfC99(LE
z!z(C4-ap+uQYSIckaE<2uA^ag^t_eaYn_Jfq@U?vzOdv%t*)||aVad7PZ((`gpV!x
rZ$0M!)qwuD?ff?h#CY04MnNVFTnmG)-+p%fr;?V2o_dw4E$;sThR3J6

diff --git a/src/components/LoggedinPage.vue b/src/components/LoggedinPage.vue
deleted file mode 100644
index 943c599..0000000
--- a/src/components/LoggedinPage.vue
+++ /dev/null
@@ -1,259 +0,0 @@
-<template>
-  <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>
-    
-    <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;
-  }
-  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
index 67fe145..030ff0b 100644
--- a/src/components/ModernNavbar.vue
+++ b/src/components/ModernNavbar.vue
@@ -1,116 +1,116 @@
 <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>
+  <nav class="fixed top-0 left-0 right-0 z-50 h-12 bg-white dark:bg-surface-950 border-b border-zinc-200 dark:border-zinc-800 transition-colors">
+    <div class="max-w-7xl mx-auto px-4 flex items-center justify-between h-full">
+      <RouterLink to="/dashboard" class="text-base font-bold text-zinc-900 dark:text-zinc-100 no-underline">
+        RideAware
       </RouterLink>
-      
-      <button class="mobile-menu-toggle" @click="toggleMobileMenu" :class="{ active: mobileMenuOpen }">
-        <span></span>
-        <span></span>
-        <span></span>
+
+      <!-- Mobile menu toggle -->
+      <button class="md:hidden flex flex-col justify-center items-center gap-1 w-9 h-9 rounded-md border border-zinc-200 dark:border-zinc-700 bg-transparent cursor-pointer" @click="toggleMobileMenu">
+        <span class="w-4 h-0.5 bg-zinc-500 dark:bg-zinc-400 rounded-full transition-transform" :class="{ 'translate-y-[6px] rotate-45': mobileMenuOpen }"></span>
+        <span class="w-4 h-0.5 bg-zinc-500 dark:bg-zinc-400 rounded-full transition-opacity" :class="{ 'opacity-0': mobileMenuOpen }"></span>
+        <span class="w-4 h-0.5 bg-zinc-500 dark:bg-zinc-400 rounded-full transition-transform" :class="{ '-translate-y-[6px] -rotate-45': mobileMenuOpen }"></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>
+
+      <!-- Desktop nav -->
+      <div class="hidden md:flex items-center gap-6">
+        <div class="flex items-center gap-0.5">
+          <RouterLink to="/dashboard" class="nav-link-item" @click="closeMobileMenu">
+            <svg class="w-4 h-4" 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>
+          <RouterLink to="/profile" class="nav-link-item" @click="closeMobileMenu">
+            <svg class="w-4 h-4" 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>
+          <RouterLink to="/equipment" class="nav-link-item" @click="closeMobileMenu">
+            <svg class="w-4 h-4" 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>
+          <RouterLink to="/zones" class="nav-link-item" @click="closeMobileMenu">
+            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none"><path d="M22 12H18L15 21L9 3L6 12H2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></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>
+          <RouterLink to="/calendar" class="nav-link-item" @click="closeMobileMenu">
+            <svg class="w-4 h-4" 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>
+
+        <div class="flex items-center gap-2">
+          <!-- Theme toggle -->
+          <button @click="themeStore.toggleTheme()" class="flex items-center justify-center w-8 h-8 rounded-md text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors cursor-pointer" title="Toggle theme">
+            <!-- Sun icon (shown in dark mode) -->
+            <svg v-if="themeStore.theme === 'dark'" class="w-4 h-4" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="5" 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>
+            <!-- Moon icon (shown in light mode) -->
+            <svg v-else class="w-4 h-4" viewBox="0 0 24 24" fill="none"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 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>
+
+          <!-- User menu -->
+          <div class="relative">
+            <button class="flex items-center justify-center w-8 h-8 rounded-md bg-brand-600 text-white cursor-pointer hover:bg-brand-700 transition-colors" @click="toggleUserMenu">
+              <svg class="w-4 h-4" 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>
             </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 v-show="userMenuOpen" class="absolute right-0 top-full mt-1 w-56 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 rounded-lg shadow-lg py-1 z-50">
+              <div class="px-3 py-2 border-b border-zinc-100 dark:border-zinc-800">
+                <p class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{{ auth.user?.username || 'User' }}</p>
+                <p class="text-xs text-zinc-500 mt-0.5">{{ auth.user?.email || 'user@example.com' }}</p>
               </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>
+              <RouterLink to="/profile" class="flex items-center gap-2 px-3 py-2 text-sm text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-zinc-100 no-underline transition-colors" @click="closeMenus">
+                <svg class="w-4 h-4" 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>
+              <RouterLink to="/zones" class="flex items-center gap-2 px-3 py-2 text-sm text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-zinc-100 no-underline transition-colors" @click="closeMenus">
+                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none"><path d="M22 12H18L15 21L9 3L6 12H2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></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 class="border-t border-zinc-100 dark:border-zinc-800 mt-1 pt-1">
+                <button @click="handleLogout" class="flex items-center gap-2 w-full px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors cursor-pointer bg-transparent border-none text-left font-[inherit]">
+                  <svg class="w-4 h-4" 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>
+
+      <!-- Mobile nav -->
+      <div v-show="mobileMenuOpen" class="md:hidden fixed top-12 left-0 right-0 bg-white dark:bg-surface-950 border-b border-zinc-200 dark:border-zinc-800 p-3 z-40">
+        <div class="flex flex-col gap-0.5">
+          <RouterLink to="/dashboard" class="mobile-nav-link" @click="closeMobileMenu">
+            <svg class="w-4 h-4" 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>
+            Dashboard
+          </RouterLink>
+          <RouterLink to="/profile" class="mobile-nav-link" @click="closeMobileMenu">
+            <svg class="w-4 h-4" 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>
+            Profile
+          </RouterLink>
+          <RouterLink to="/equipment" class="mobile-nav-link" @click="closeMobileMenu">
+            <svg class="w-4 h-4" 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>
+            Equipment
+          </RouterLink>
+          <RouterLink to="/zones" class="mobile-nav-link" @click="closeMobileMenu">
+            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none"><path d="M22 12H18L15 21L9 3L6 12H2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            Zones
+          </RouterLink>
+          <RouterLink to="/calendar" class="mobile-nav-link" @click="closeMobileMenu">
+            <svg class="w-4 h-4" 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>
+            Calendar
+          </RouterLink>
+        </div>
+        <div class="border-t border-zinc-200 dark:border-zinc-800 mt-2 pt-2 flex items-center justify-between">
+          <button @click="themeStore.toggleTheme()" class="flex items-center gap-2 px-3 py-2 text-sm text-zinc-600 dark:text-zinc-400 rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors cursor-pointer bg-transparent border-none font-[inherit]">
+            <svg v-if="themeStore.theme === 'dark'" class="w-4 h-4" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="5" 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>
+            <svg v-else class="w-4 h-4" viewBox="0 0 24 24" fill="none"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            {{ themeStore.theme === 'dark' ? 'Light mode' : 'Dark mode' }}
+          </button>
+          <button @click="handleLogout" class="flex items-center gap-2 px-3 py-2 text-sm text-red-600 dark:text-red-400 rounded-md hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors cursor-pointer bg-transparent border-none font-[inherit]">
+            <svg class="w-4 h-4" 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>
   </nav>
 </template>
@@ -118,14 +118,15 @@
 <script setup>
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { useAuth } from '@/composables/useAuth'
+import { useAuthStore } from '@/stores/auth'
+import { useThemeStore } from '@/stores/theme'
 
 const router = useRouter()
-const auth = useAuth()
+const auth = useAuthStore()
+const themeStore = useThemeStore()
 
 const mobileMenuOpen = ref(false)
 const userMenuOpen = ref(false)
-const isDarkMode = ref(false)
 
 function toggleMobileMenu() {
   mobileMenuOpen.value = !mobileMenuOpen.value
@@ -147,11 +148,6 @@ function toggleUserMenu() {
   userMenuOpen.value = !userMenuOpen.value
 }
 
-function toggleTheme() {
-  isDarkMode.value = !isDarkMode.value
-  document.documentElement.classList.toggle('dark', isDarkMode.value)
-}
-
 function handleLogout() {
   auth.logout()
   closeMenus()
@@ -159,344 +155,3 @@ function handleLogout() {
 }
 </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
deleted file mode 100644
index 070ef9b..0000000
--- a/src/components/PasswordReset.vue
+++ /dev/null
@@ -1,992 +0,0 @@
-<template>
-  <div class="password-reset-container">
-    <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" class="reset-form">
-        <!-- 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">
-              <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">
-          <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">
-          <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">
-        <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>
-
-    <!-- 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>
-
-<script setup>
-import { ref } from 'vue'
-import { useAuth } from '@/composables/useAuth'
-
-const auth = useAuth()
-const email = ref('')
-const resetLinkSent = ref(false)
-
-async function handleRequestReset() {
-  try {
-    await auth.requestPasswordReset(email.value)
-    resetLinkSent.value = true
-  } catch (error) {
-    console.error('Password reset request failed:', error)
-  }
-}
-
-function resetForm() {
-  resetLinkSent.value = false
-  email.value = ''
-  auth.error = ''
-}
-</script>
-
-<style scoped>
-.password-reset-container {
-  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;
-}
-
-/* ============================================
-   RESET CARD
-   ============================================ */
-.reset-card {
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(20px);
-  border-radius: 2rem;
-  max-width: 480px;
-  width: 100%;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-  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.75rem 0;
-  color: #1f2937;
-  font-size: 2rem;
-  font-weight: 800;
-  animation: titleSlide 0.6s ease-out 0.3s both;
-}
-
-.subtitle {
-  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 {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-label {
-  font-weight: 600;
-  color: #374151;
-  font-size: 0.95rem;
-}
-
-.input-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-input {
-  width: 100%;
-  padding: 1rem 1rem 1rem 3rem;
-  border: 2px solid #e5e7eb;
-  border-radius: 1rem;
-  font-size: 1rem;
-  font-family: inherit;
-  transition: all 0.3s ease;
-  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;
-}
-
-.helper-text {
-  font-size: 0.8rem;
-  color: #6b7280;
-  margin: 0;
-}
-
-/* ============================================
-   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.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 1rem 0;
-  color: #065f46;
-  font-size: 1.5rem;
-  font-weight: 700;
-}
-
-.success-message {
-  margin: 0.5rem 0;
-  color: #6b7280;
-  line-height: 1.6;
-  font-size: 0.95rem;
-}
-
-.email-display {
-  color: #667eea !important;
-  font-weight: 600;
-  font-size: 1.1rem;
-  background: rgba(102, 126, 234, 0.1);
-  padding: 0.75rem;
-  border-radius: 0.75rem;
-  margin: 1rem 0 !important;
-  word-break: break-all;
-}
-
-/* ============================================
-   INSTRUCTIONS
-   ============================================ */
-.instructions {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin: 1.5rem 0;
-  text-align: left;
-}
-
-.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;
-}
-
-.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
deleted file mode 100644
index 9cb1d7c..0000000
--- a/src/components/TrainingZones.vue
+++ /dev/null
@@ -1,1156 +0,0 @@
-<template>
-  <div class="zones-page">
-    <!-- Use the shared navbar -->
-    <ModernNavbar />
-
-    <div class="zones-content">
-      <!-- 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">
-        <!-- Heart Rate Zones -->
-        <div v-if="profile.profile?.max_hr" class="zones-section">
-          <div class="section-header">
-            <div class="section-title">
-              <svg class="section-icon" viewBox="0 0 24 24" fill="none">
-                <path d="M20.84 4.61C19.32 3.09 17.35 2.25 15.3 2.25C13.74 2.25 12.26 2.83 11.1 3.9C9.94 2.83 8.46 2.25 6.9 2.25C4.85 2.25 2.88 3.09 1.36 4.61C-0.64 6.61 -0.45 9.96 1.92 12.75L11.1 23.1L20.28 12.75C22.65 9.96 22.84 6.61 20.84 4.61Z" fill="currentColor"/>
-              </svg>
-              <h3>Heart Rate Zones</h3>
-            </div>
-            <div class="zone-info-pill">
-              <span class="info-label">Max HR:</span>
-              <span class="info-value">{{ profile.profile.max_hr }} bpm</span>
-              <span v-if="profile.profile.resting_hr" class="info-separator">•</span>
-              <span v-if="profile.profile.resting_hr" class="info-label">Rest HR:</span>
-              <span v-if="profile.profile.resting_hr" class="info-value">{{ profile.profile.resting_hr }} bpm</span>
-              <span v-else class="info-value">-- bpm</span>
-            </div>
-          </div>
-
-          <div class="zones-grid">
-            <div v-for="(zone, index) in hrZones" :key="index" class="zone-card heart-rate" :style="{ '--zone-color': zone.color }">
-              <div class="zone-header">
-                <h4>Zone {{ index + 1 }}</h4>
-                <div class="zone-name">{{ zone.name }}</div>
-              </div>
-              <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">
-          <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 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">
-                <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>
-
-      <!-- Training Guide -->
-      <div class="guides-section">
-        <div class="section-header">
-          <div class="section-title">
-            <svg class="section-icon" viewBox="0 0 24 24" fill="none">
-              <path d="M9 11H15M9 15H15M17 21L12 16L7 21V5C7 4.46957 7.21071 3.96086 7.58579 3.58579C7.96086 3.21071 8.46957 3 9 3H15C15.5304 3 16.0391 3.21071 16.4142 3.58579C16.7893 3.96086 17 4.46957 17 5V21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-            <h3>Training Guide</h3>
-          </div>
-          <p class="section-description">Learn how to effectively use each training zone</p>
-        </div>
-        
-        <div class="guide-cards">
-          <div class="guide-card" data-zone="1">
-            <div class="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" 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" 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" 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" 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>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, computed } from 'vue'
-import api from '@/services/api'
-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, 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, 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' },
-  ] : []
-})
-
-onMounted(async () => {
-  try {
-    const profileRes = await api.get('/api/protected/profile')
-    profile.value = profileRes.data
-
-    const zonesRes = await api.get('/api/protected/zones')
-    zones.value = zonesRes.data
-  } catch (error) {
-    console.error('Failed to load zones:', error)
-  }
-})
-
-function calculatePercentage(watts) {
-  return Math.round((watts / profile.value.profile.ftp) * 100)
-}
-</script>
-
-<style scoped>
-.zones-page {
-  min-height: 100vh;
-  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-}
-
-/* ============================================
-   ZONES CONTENT
-   ============================================ */
-.zones-content {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 2rem;
-}
-
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 3rem;
-  padding: 2rem;
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(20px);
-  border-radius: 2rem;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-  animation: slideInDown 0.6s ease-out;
-}
-
-.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;
-  font-size: 1.1rem;
-  color: #6b7280;
-  font-weight: 500;
-}
-
-.zone-stats {
-  display: flex;
-  gap: 1.5rem;
-}
-
-.stat-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 1.5rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 1.5rem;
-  color: white;
-  min-width: 140px;
-  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
-}
-
-.stat-value {
-  font-size: 1.75rem;
-  font-weight: 800;
-  margin-bottom: 0.25rem;
-}
-
-.stat-label {
-  font-size: 0.8rem;
-  text-align: center;
-  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-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: 1rem;
-  font-weight: 600;
-  font-size: 1rem;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-  border: none;
-  cursor: pointer;
-}
-
-.btn-primary svg {
-  width: 20px;
-  height: 20px;
-}
-
-.btn-primary:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
-}
-
-/* ============================================
-   ZONES CONTAINER
-   ============================================ */
-.zones-container {
-  display: flex;
-  flex-direction: column;
-  gap: 3rem;
-}
-
-.zones-section {
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(20px);
-  border-radius: 2rem;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  animation: slideInUp 0.6s ease-out;
-}
-
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: 2rem;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(248, 250, 252, 0.5) 100%);
-}
-
-.section-title {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.section-icon {
-  width: 32px;
-  height: 32px;
-  color: #667eea;
-}
-
-.section-title h3 {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #1f2937;
-}
-
-.zone-info-pill {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1.25rem;
-  background: rgba(102, 126, 234, 0.1);
-  border-radius: 2rem;
-  font-size: 0.9rem;
-  font-weight: 600;
-}
-
-.info-label {
-  color: #6b7280;
-}
-
-.info-value {
-  color: #667eea;
-}
-
-.info-separator {
-  color: #9ca3af;
-}
-
-.section-description {
-  margin: 0.5rem 0 0 0;
-  color: #6b7280;
-  font-size: 1rem;
-}
-
-/* ============================================
-   ZONES GRID
-   ============================================ */
-.zones-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 1.5rem;
-  padding: 2rem;
-}
-
-.zone-card {
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
-  border-radius: 1.5rem;
-  padding: 1.5rem;
-  border-left: 5px solid var(--zone-color);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  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(-4px);
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
-}
-
-.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 {
-  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: #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: #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: 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(300px, 1fr));
-  gap: 1.5rem;
-  padding: 2rem;
-}
-
-.guide-card {
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
-  border-radius: 1.5rem;
-  padding: 2rem;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  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;
-  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 0 1.5rem 0;
-  color: #4b5563;
-  line-height: 1.6;
-  font-size: 0.95rem;
-}
-
-.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
deleted file mode 100644
index d3ab213..0000000
--- a/src/components/UserDashboard.vue
+++ /dev/null
@@ -1,1035 +0,0 @@
-<template>
-  <div class="dashboard-container">
-    <!-- Use the shared navbar -->
-    <ModernNavbar />
-
-    <!-- Main Dashboard Content -->
-    <div class="dashboard-content">
-      <!-- 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="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>
-
-      <!-- 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()
-
-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-container {
-  min-height: 100vh;
-  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-}
-
-/* ============================================
-   DASHBOARD CONTENT
-   ============================================ */
-.dashboard-content {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 2rem;
-}
-
-.welcome-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 2rem;
-  animation: slideInDown 0.6s ease-out;
-}
-
-.welcome-content h1 {
-  margin: 0 0 0.5rem 0;
-  font-size: 2.5rem;
-  font-weight: 800;
-  color: #1f2937;
-}
-
-.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;
-  font-size: 1.1rem;
-  color: #6b7280;
-  font-weight: 500;
-}
-
-.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(12, 1fr);
-  grid-template-rows: auto;
-  gap: 1.5rem;
-  margin-top: 2rem;
-}
-
-.bento-item {
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(20px);
-  border-radius: 1.5rem;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-  padding: 1.5rem;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  animation: slideInUp 0.6s ease-out;
-}
-
-.bento-item:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
-  border-color: rgba(102, 126, 234, 0.2);
-}
-
-.bento-item.large {
-  grid-column: span 8;
-  grid-row: span 2;
-}
-
-.bento-item.medium {
-  grid-column: span 4;
-}
-
-.bento-item.small {
-  grid-column: span 4;
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.5rem;
-}
-
-.card-header h3 {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: #1f2937;
-}
-
-.card-actions {
-  display: flex;
-  gap: 0.5rem;
-  background: #f3f4f6;
-  padding: 0.25rem;
-  border-radius: 0.5rem;
-}
-
-.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.25rem 0 0 0;
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #1f2937;
-}
-
-/* Recent Workouts */
-.recent-workouts {
-  min-height: 200px;
-  display: flex;
-  flex-direction: column;
-}
-
-.workouts-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.workout-item {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem;
-  background: rgba(248, 250, 252, 0.5);
-  border-radius: 1rem;
-  transition: all 0.2s ease;
-}
-
-.workout-item:hover {
-  background: rgba(248, 250, 252, 1);
-  transform: translateX(4px);
-}
-
-.workout-icon {
-  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;
-  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
deleted file mode 100644
index f91721b..0000000
--- a/src/components/UserEquipment.vue
+++ /dev/null
@@ -1,1208 +0,0 @@
-<template>
-  <div class="equipment-page">
-    <!-- Use the shared navbar -->
-    <ModernNavbar />
-
-    <div class="equipment-content">
-      <!-- Page Header -->
-      <div class="page-header">
-        <div class="header-content">
-          <h2>Equipment Management</h2>
-          <p class="page-description">Track and manage your bikes, shoes, and gear</p>
-        </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 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 @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 Grid -->
-      <div v-if="equipment.length > 0" class="equipment-grid">
-        <div
-          v-for="item in equipment"
-          :key="item.id"
-          class="equipment-card"
-          :class="{ editing: editingId === item.id }"
-        >
-          <div v-if="editingId !== item.id" class="card-display">
-            <div class="equipment-header">
-              <div>
-                <h4>{{ item.name }}</h4>
-                <p class="equipment-meta">{{ item.brand }} {{ item.model }}</p>
-              </div>
-              <span class="equipment-badge" :data-type="item.type">
-                {{ formatEquipmentType(item.type) }}
-              </span>
-            </div>
-
-            <div class="equipment-details">
-              <div v-if="item.weight" class="detail-row">
-                <svg viewBox="0 0 24 24" fill="none">
-                  <circle cx="12" cy="5" r="3" stroke="currentColor" stroke-width="2"/>
-                  <path d="M12 8C12 8 7 12 7 18C7 20.2091 9.20101 22 12 22C14.7989 22 17 20.2091 17 18C17 12 12 8 12 8Z" stroke="currentColor" stroke-width="2"/>
-                </svg>
-                <span>{{ item.weight }}g</span>
-              </div>
-              <div v-if="item.condition" class="detail-row">
-                <svg viewBox="0 0 24 24" fill="none">
-                  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-                  <polyline points="16 12 12 8 8 12" stroke="currentColor" stroke-width="2" fill="none"/>
-                </svg>
-                <span class="condition-badge" :class="item.condition">{{ item.condition }}</span>
-              </div>
-              <div v-if="item.purchase_date" class="detail-row">
-                <svg viewBox="0 0 24 24" fill="none">
-                  <rect x="3" y="4" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
-                  <line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2"/>
-                  <line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2"/>
-                  <line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2"/>
-                </svg>
-                <span>{{ formatDate(item.purchase_date) }}</span>
-              </div>
-              <div v-if="item.notes" class="detail-row notes">
-                <svg viewBox="0 0 24 24" fill="none">
-                  <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V15H13V17ZM13 13H11V7H13V13Z" fill="currentColor"/>
-                </svg>
-                <span>{{ item.notes }}</span>
-              </div>
-            </div>
-
-            <div class="equipment-actions">
-              <button @click="startEdit(item)" class="btn-edit">
-                <svg viewBox="0 0 24 24" fill="none">
-                  <path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                  <path d="M18.5 2.5C18.8978 2.10217 19.4374 1.88086 20 1.88086C20.5626 1.88086 21.1022 2.10217 21.5 2.5C21.8978 2.89783 22.1191 3.4374 22.1191 4C22.1191 4.5626 21.8978 5.10217 21.5 5.5L12 15H9V12L18.5 2.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-                Edit
-              </button>
-              <button @click="handleDeleteEquipment(item.id)" class="btn-danger">
-                <svg viewBox="0 0 24 24" fill="none">
-                  <polyline points="3 6 5 6 21 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                  <path d="M19 6V20C19 21.1046 18.1046 22 17 22H7C5.89543 22 5 21.1046 5 20V6M8 6V4C8 2.89543 8.89543 2 10 2H14C15.1046 2 16 2.89543 16 4V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                  <line x1="10" y1="11" x2="10" y2="17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                  <line x1="14" y1="11" x2="14" y2="17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-                Delete
-              </button>
-            </div>
-          </div>
-
-          <!-- Edit Form -->
-          <form v-else @submit.prevent="handleUpdateEquipment(item.id)" class="card-edit">
-            <div class="form-section">
-              <label>Equipment Name</label>
-              <input v-model="editForm.name" type="text" />
-            </div>
-
-            <div class="form-row">
-              <div class="form-section">
-                <label>Brand</label>
-                <input v-model="editForm.brand" type="text" />
-              </div>
-              <div class="form-section">
-                <label>Model</label>
-                <input v-model="editForm.model" type="text" />
-              </div>
-            </div>
-
-            <div class="form-row">
-              <div class="form-section">
-                <label>Weight (grams)</label>
-                <input v-model.number="editForm.weight" type="number" step="0.1" />
-              </div>
-              <div class="form-section">
-                <label>Condition</label>
-                <select v-model="editForm.condition">
-                  <option value="">Select condition</option>
-                  <option value="new">New</option>
-                  <option value="excellent">Excellent</option>
-                  <option value="good">Good</option>
-                  <option value="fair">Fair</option>
-                  <option value="worn">Worn</option>
-                </select>
-              </div>
-            </div>
-
-            <div class="form-section">
-              <label>Notes</label>
-              <textarea v-model="editForm.notes" rows="2"></textarea>
-            </div>
-
-            <div class="form-actions">
-              <button type="button" @click="editingId = null" class="btn-secondary">
-                Cancel
-              </button>
-              <button type="submit" class="btn-primary">
-                Save Changes
-              </button>
-            </div>
-          </form>
-        </div>
-      </div>
-
-      <!-- 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>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import api from '@/services/api'
-import ModernNavbar from '@/components/ModernNavbar.vue'
-
-const equipment = ref([])
-const showAddForm = ref(false)
-const editingId = ref(null)
-const loading = ref(false)
-const error = ref('')
-const successMessage = ref('')
-const generalError = ref('')
-
-const newEquipment = ref({
-  name: '',
-  type: '',
-  brand: '',
-  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 (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: '',
-      condition: '',
-      purchase_date: ''
-    }
-    showAddForm.value = false
-    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
-  }
-}
-
-async function handleUpdateEquipment(id) {
-  try {
-    const { data } = await api.put(`/api/protected/equipment?id=${id}`, editForm.value)
-    const index = equipment.value.findIndex(e => e.id === id)
-    if (index !== -1) {
-      equipment.value[index] = data
-    }
-    editingId.value = null
-    successMessage.value = 'Equipment updated successfully!'
-    setTimeout(() => {
-      successMessage.value = ''
-    }, 3000)
-  } catch (err) {
-    console.error('Failed to update equipment:', err)
-    generalError.value = 'Failed to update equipment'
-  }
-}
-
-async function handleDeleteEquipment(id) {
-  if (confirm('Are you sure you want to delete this equipment?')) {
-    try {
-      await api.delete(`/api/protected/equipment?id=${id}`)
-      equipment.value = equipment.value.filter(e => e.id !== id)
-      successMessage.value = 'Equipment deleted successfully!'
-      setTimeout(() => {
-        successMessage.value = ''
-      }, 3000)
-    } catch (err) {
-      console.error('Failed to delete equipment:', err)
-      generalError.value = 'Failed to delete equipment'
-    }
-  }
-}
-
-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: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-}
-
-/* ============================================
-   EQUIPMENT CONTENT
-   ============================================ */
-.equipment-content {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 2rem;
-}
-
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 2rem;
-  gap: 2rem;
-  animation: slideInDown 0.6s ease-out;
-}
-
-.header-content h2 {
-  margin: 0 0 0.5rem 0;
-  font-size: 2.5rem;
-  font-weight: 800;
-  background: linear-gradient(135deg, #1f2937 0%, #4b5563 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.page-description {
-  margin: 0;
-  font-size: 1.1rem;
-  color: #6b7280;
-  font-weight: 500;
-}
-
-.btn-primary {
-  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: 1rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-  white-space: nowrap;
-}
-
-.btn-primary svg {
-  width: 20px;
-  height: 20px;
-}
-
-.btn-primary:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
-}
-
-.btn-primary:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-
-/* ============================================
-   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;
-}
-
-.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-bottom: 1px solid #e5e7eb;
-}
-
-.modal-header h3 {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #1f2937;
-}
-
-.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 {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1rem;
-}
-
-.form-section label {
-  font-weight: 600;
-  color: #374151;
-  font-size: 0.9rem;
-}
-
-.form-section input,
-.form-section select,
-.form-section textarea {
-  padding: 0.75rem;
-  border: 2px solid #e5e7eb;
-  border-radius: 0.75rem;
-  font-size: 1rem;
-  font-family: inherit;
-  transition: all 0.2s ease;
-  background: white;
-}
-
-.form-section input:focus,
-.form-section select:focus,
-.form-section textarea:focus {
-  outline: none;
-  border-color: #667eea;
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-}
-
-.form-section textarea {
-  resize: vertical;
-  min-height: 80px;
-}
-
-.form-actions {
-  display: flex;
-  gap: 1rem;
-  justify-content: flex-end;
-  padding-top: 1rem;
-  border-top: 1px solid #e5e7eb;
-}
-
-.btn-secondary {
-  padding: 0.75rem 1.5rem;
-  background: #f3f4f6;
-  color: #374151;
-  border: none;
-  border-radius: 0.75rem;
-  cursor: pointer;
-  font-weight: 600;
-  transition: all 0.2s ease;
-}
-
-.btn-secondary:hover {
-  background: #e5e7eb;
-}
-
-.error-message {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-top: 1rem;
-  padding: 1rem;
-  background: #fef2f2;
-  border: 1px solid #fecaca;
-  color: #dc2626;
-  border-radius: 0.75rem;
-  animation: shake 0.3s ease;
-}
-
-.error-message svg {
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-}
-
-/* ============================================
-   EQUIPMENT GRID & CARDS
-   ============================================ */
-.equipment-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-  gap: 1.5rem;
-}
-
-.equipment-card {
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(20px);
-  border-radius: 1.5rem;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  animation: slideInUp 0.6s ease-out;
-}
-
-.equipment-card:hover:not(.editing) {
-  transform: translateY(-4px);
-  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
-  border-color: rgba(102, 126, 234, 0.2);
-}
-
-.card-display {
-  padding: 1.5rem;
-}
-
-.equipment-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 1.5rem;
-  gap: 1rem;
-}
-
-.equipment-header h4 {
-  margin: 0 0 0.25rem 0;
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: #1f2937;
-}
-
-.equipment-meta {
-  margin: 0;
-  font-size: 0.85rem;
-  color: #6b7280;
-}
-
-.equipment-badge {
-  padding: 0.5rem 1rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border-radius: 0.75rem;
-  font-size: 0.85rem;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.equipment-badge[data-type="shoes"] {
-  background: linear-gradient(135deg, #f59e0b, #d97706);
-}
-
-.equipment-badge[data-type="helmet"] {
-  background: linear-gradient(135deg, #ef4444, #dc2626);
-}
-
-.equipment-badge[data-type="wetsuit"] {
-  background: linear-gradient(135deg, #06b6d4, #0891b2);
-}
-
-.equipment-badge[data-type="other"] {
-  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
-}
-
-.equipment-details {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  margin-bottom: 1.5rem;
-}
-
-.detail-row {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  font-size: 0.9rem;
-  color: #4b5563;
-}
-
-.detail-row svg {
-  width: 16px;
-  height: 16px;
-  color: #667eea;
-  flex-shrink: 0;
-}
-
-.detail-row.notes {
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 0.75rem;
-  background: rgba(248, 250, 252, 0.5);
-  border-radius: 0.5rem;
-  border-left: 3px solid #667eea;
-}
-
-.detail-row.notes svg {
-  display: none;
-}
-
-.condition-badge {
-  display: inline-block;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.375rem;
-  font-size: 0.8rem;
-  font-weight: 600;
-  text-transform: capitalize;
-}
-
-.condition-badge.new {
-  background: #dcfce7;
-  color: #166534;
-}
-
-.condition-badge.excellent {
-  background: #d1fae5;
-  color: #065f46;
-}
-
-.condition-badge.good {
-  background: #dbeafe;
-  color: #1e40af;
-}
-
-.condition-badge.fair {
-  background: #fed7aa;
-  color: #92400e;
-}
-
-.condition-badge.worn {
-  background: #fee2e2;
-  color: #991b1b;
-}
-
-.equipment-actions {
-  display: flex;
-  gap: 0.75rem;
-}
-
-.btn-edit {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  background: #3b82f6;
-  color: white;
-  border: none;
-  border-radius: 0.75rem;
-  cursor: pointer;
-  font-weight: 600;
-  font-size: 0.9rem;
-  transition: all 0.2s ease;
-}
-
-.btn-edit svg {
-  width: 16px;
-  height: 16px;
-}
-
-.btn-edit:hover {
-  background: #2563eb;
-  transform: translateY(-1px);
-}
-
-.btn-danger {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  background: #ef4444;
-  color: white;
-  border: none;
-  border-radius: 0.75rem;
-  cursor: pointer;
-  font-weight: 600;
-  font-size: 0.9rem;
-  transition: all 0.2s ease;
-}
-
-.btn-danger svg {
-  width: 16px;
-  height: 16px;
-}
-
-.btn-danger:hover {
-  background: #dc2626;
-  transform: translateY(-1px);
-}
-
-.card-edit {
-  padding: 1.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-/* ============================================
-   EMPTY STATE
-   ============================================ */
-.empty-state {
-  text-align: center;
-  padding: 4rem 2rem;
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(20px);
-  border-radius: 1.5rem;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-}
-
-.empty-icon {
-  width: 120px;
-  height: 120px;
-  margin: 0 auto 2rem;
-  padding: 2rem;
-  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
-  border-radius: 50%;
-  color: #6b7280;
-  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
deleted file mode 100644
index 7a2265c..0000000
--- a/src/components/UserLogin.vue
+++ /dev/null
@@ -1,875 +0,0 @@
-<template>
-  <div class="login-container">
-    <div class="login-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>Welcome Back</h1>
-        <p class="subtitle">Train with Focus. Ride with Awareness.</p>
-      </div>
-
-      <form @submit.prevent="handleLogin" class="login-form">
-        <!-- Username Field -->
-        <div class="form-group">
-          <label for="username">Username</label>
-          <div class="input-wrapper">
-            <input
-              id="username"
-              v-model="form.username"
-              type="text"
-              placeholder="Enter your username"
-              required
-              :disabled="auth.loading"
-              autocomplete="username"
-            />
-            <svg class="input-icon" viewBox="0 0 24 24" fill="none">
-              <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>
-          <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">
-          <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">
-        <svg viewBox="0 0 24 24" fill="none">
-          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-          <line x1="12" y1="8" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-          <line x1="12" y1="16" x2="12.01" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-        </svg>
-        <div>
-          <p class="error-title">Login Failed</p>
-          <p class="error-text">{{ auth.error }}</p>
-        </div>
-      </div>
-
-      <!-- Divider -->
-      <div class="divider">
-        <span>Or</span>
-      </div>
-
-      <!-- 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, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { useAuth } from '@/composables/useAuth'
-
-const router = useRouter()
-const auth = useAuth()
-
-const showPassword = ref(false)
-const rememberMe = ref(false)
-
-const form = reactive({
-  username: '',
-  password: ''
-})
-
-async function handleLogin() {
-  try {
-    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)
-  }
-}
-</script>
-
-<style scoped>
-.login-container {
-  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: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(20px);
-  border-radius: 2rem;
-  padding: 3rem;
-  max-width: 480px;
-  width: 100%;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-  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.75rem 0;
-  font-size: 2rem;
-  font-weight: 800;
-  color: #1f2937;
-  animation: titleSlide 0.6s ease-out 0.3s both;
-}
-
-.subtitle {
-  margin: 0;
-  font-size: 1rem;
-  color: #6b7280;
-  font-weight: 500;
-  font-style: italic;
-  animation: subtitleFade 0.6s ease-out 0.4s both;
-}
-
-/* ============================================
-   LOGIN FORM
-   ============================================ */
-.login-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  animation: formSlide 0.6s ease-out 0.5s both;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-label {
-  font-weight: 600;
-  color: #374151;
-  font-size: 0.95rem;
-  display: block;
-}
-
-.input-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-input {
-  width: 100%;
-  padding: 1rem 1rem 1rem 3rem;
-  border: 2px solid #e5e7eb;
-  border-radius: 1rem;
-  font-size: 1rem;
-  font-family: inherit;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  background: white;
-  box-sizing: border-box;
-}
-
-input:focus {
-  outline: none;
-  border-color: #667eea;
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-  transform: translateY(-2px);
-}
-
-input:disabled {
-  background: #f9fafb;
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-input::placeholder {
-  color: #9ca3af;
-}
-
-.input-icon {
-  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: 1.125rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border: none;
-  border-radius: 1rem;
-  font-size: 1rem;
-  font-weight: 700;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 52px;
-}
-
-.btn-primary:hover:not(:disabled) {
-  transform: translateY(-3px);
-  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
-}
-
-.btn-primary:active:not(:disabled) {
-  transform: translateY(-1px);
-}
-
-.btn-primary:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-  transform: none;
-}
-
-.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;
-}
-
-/* ============================================
-   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;
-}
-
-.signup-section p {
-  margin: 0 0 0.75rem 0;
-  color: #6b7280;
-  font-size: 0.95rem;
-}
-
-.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
deleted file mode 100644
index 5c875cf..0000000
--- a/src/components/UserProfile.vue
+++ /dev/null
@@ -1,889 +0,0 @@
-<template>
-  <div class="profile-page">
-    <!-- Use the shared navbar -->
-    <ModernNavbar />
-
-    <!-- Profile Content -->
-    <div class="profile-content">
-      <!-- Page Header -->
-      <div class="page-header">
-        <h2>Profile Settings</h2>
-        <p class="page-description">Manage your personal information and training metrics</p>
-      </div>
-
-      <!-- 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>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-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>
-        </form>
-      </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 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>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-
-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
-})
-
-onMounted(async () => {
-  try {
-    const { data } = await api.get('/api/protected/profile')
-    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
-      }
-    }
-  } catch (err) {
-    console.error('Failed to load profile:', err)
-    error.value = 'Failed to load profile'
-  }
-})
-
-async function handleUpdateProfile() {
-  loading.value = true
-  error.value = ''
-  successMessage.value = ''
-
-  try {
-    const { data } = await api.put('/api/protected/profile', {
-      first_name: form.value.first_name,
-      last_name: form.value.last_name,
-      bio: form.value.bio,
-      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
-    })
-
-    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
-      }
-    }
-
-    successMessage.value = 'Profile updated successfully!'
-    setTimeout(() => {
-      successMessage.value = ''
-    }, 4000)
-  } catch (err) {
-    console.error('Failed to update profile:', err)
-    error.value = err.response?.data?.error || 'Failed to update profile'
-  } finally {
-    loading.value = false
-  }
-}
-</script>
-
-<style scoped>
-.profile-page {
-  min-height: 100vh;
-  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-}
-
-/* ============================================
-   PROFILE CONTENT
-   ============================================ */
-.profile-content {
-  max-width: 1000px;
-  margin: 0 auto;
-  padding: 2rem;
-}
-
-.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(200px, 1fr));
-  gap: 1.5rem;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-label {
-  font-weight: 600;
-  color: #374151;
-  font-size: 0.95rem;
-}
-
-input,
-textarea {
-  padding: 0.875rem;
-  border: 2px solid #e5e7eb;
-  border-radius: 1rem;
-  font-size: 1rem;
-  font-family: inherit;
-  transition: all 0.3s ease;
-  background: white;
-}
-
-input:focus,
-textarea:focus {
-  outline: none;
-  border-color: #667eea;
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-  transform: translateY(-2px);
-}
-
-input:disabled,
-.disabled-input {
-  background: #f3f4f6;
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-textarea {
-  resize: vertical;
-  min-height: 100px;
-}
-
-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;
-}
-
-.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 {
-  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-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
deleted file mode 100644
index 66eef42..0000000
--- a/src/components/UserSignup.vue
+++ /dev/null
@@ -1,984 +0,0 @@
-<template>
-  <div class="signup-container">
-    <div class="signup-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"/>
-            <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" class="signup-form">
-        <!-- Username Field -->
-        <div class="form-group">
-          <label for="username">Username *</label>
-          <div class="input-wrapper">
-            <input
-              id="username"
-              v-model="form.username"
-              type="text"
-              placeholder="Choose your username"
-              required
-              :disabled="auth.loading"
-              autocomplete="username"
-            />
-            <svg class="input-icon" viewBox="0 0 24 24" fill="none">
-              <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>
-          <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>
-
-        <!-- 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="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="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>
-
-        <!-- 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">
-        <svg viewBox="0 0 24 24" fill="none">
-          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-          <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
-          <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
-        </svg>
-        <div>
-          <p class="error-title">Signup Failed</p>
-          <p class="error-text">{{ auth.error }}</p>
-        </div>
-      </div>
-
-      <!-- Divider -->
-      <div class="divider">
-        <span>Or</span>
-      </div>
-
-      <!-- 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, ref, computed } from 'vue'
-import { useRouter } from 'vue-router'
-import { useAuth } from '@/composables/useAuth'
-
-const router = useRouter()
-const auth = useAuth()
-
-const showPassword = ref(false)
-const showConfirmPassword = ref(false)
-const agreedToTerms = ref(false)
-
-const form = reactive({
-  username: '',
-  email: '',
-  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,
-      form.password,
-      form.email,
-      form.firstName,
-      form.lastName
-    )
-    router.push('/dashboard')
-  } catch (error) {
-    console.error('Signup error:', error)
-  }
-}
-</script>
-
-<style scoped>
-.signup-container {
-  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: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(20px);
-  border-radius: 2rem;
-  padding: 3rem;
-  max-width: 520px;
-  width: 100%;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-  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.75rem 0;
-  font-size: 2rem;
-  font-weight: 800;
-  color: #1f2937;
-  animation: titleSlide 0.6s ease-out 0.3s both;
-}
-
-.subtitle {
-  margin: 0;
-  font-size: 1rem;
-  color: #6b7280;
-  font-weight: 500;
-  font-style: italic;
-  animation: subtitleFade 0.6s ease-out 0.4s both;
-}
-
-/* ============================================
-   SIGNUP FORM
-   ============================================ */
-.signup-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-  animation: formSlide 0.6s ease-out 0.5s both;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.form-row {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-label {
-  font-weight: 600;
-  color: #374151;
-  font-size: 0.95rem;
-  display: block;
-}
-
-.input-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-input {
-  width: 100%;
-  padding: 1rem 1rem 1rem 3rem;
-  border: 2px solid #e5e7eb;
-  border-radius: 1rem;
-  font-size: 1rem;
-  font-family: inherit;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  background: white;
-  box-sizing: border-box;
-}
-
-input:focus {
-  outline: none;
-  border-color: #667eea;
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-  transform: translateY(-2px);
-}
-
-input:disabled {
-  background: #f9fafb;
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-input::placeholder {
-  color: #9ca3af;
-}
-
-.input-icon {
-  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;
-}
-
-/* ============================================
-   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;
-}
-
-.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
deleted file mode 100644
index a6fa4cf..0000000
--- a/src/components/WorkoutCalendar.vue
+++ /dev/null
@@ -1,930 +0,0 @@
-<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" placeholder="e.g., Morning Ride" 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="1" min="1" max="999" />
-              </div>
-            </div>
-            
-            <div class="form-group">
-              <label>Description</label>
-              <textarea v-model="newWorkout.description" placeholder="Workout details..."></textarea>
-            </div>
-
-            <div class="form-group">
-              <label>Import Workout File (FIT/ZWO)</label>
-              <div class="file-input-wrapper">
-                <input 
-                  @change="handleFileUpload" 
-                  type="file" 
-                  accept=".fit,.zwo"
-                  id="workout-file"
-                />
-                <label for="workout-file" class="file-label">
-                  <svg viewBox="0 0 24 24" fill="none">
-                    <path d="M21 15V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    <polyline points="17 8 12 3 7 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    <line x1="12" y1="3" x2="12" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                  </svg>
-                  {{ uploadedFileName || 'Click to upload FIT or ZWO file' }}
-                </label>
-              </div>
-              <div v-if="fileParseError" class="error-small">{{ fileParseError }}</div>
-              <div v-if="parsedFileData" class="parsed-data">
-                <p><strong>File parsed successfully!</strong></p>
-                <p v-if="parsedFileData.title">Title: {{ parsedFileData.title }}</p>
-                <p v-if="parsedFileData.duration">Duration: {{ formatDuration(parsedFileData.duration) }}</p>
-                <p v-if="parsedFileData.segments">Segments: {{ parsedFileData.segments.length }}</p>
-              </div>
-            </div>
-
-            <div class="form-actions">
-              <button type="submit" :disabled="loading" class="btn-primary">
-                {{ loading ? 'Adding...' : 'Add Workout' }}
-              </button>
-              <button type="button" @click="resetForm" class="btn-secondary">
-                Reset
-              </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" @click="selectWorkout(workout)">
-            <div class="workout-item-header">
-              <span class="workout-date">{{ formatDate(workout.scheduled_date) }}</span>
-              <span class="workout-title">{{ workout.title }}</span>
-              <span class="workout-type" v-if="workout.type">{{ workout.type }}</span>
-            </div>
-            <div class="workout-item-footer">
-              <span class="workout-duration">{{ workout.duration }}min</span>
-              <span :class="['workout-status', workout.status]">{{ workout.status }}</span>
-            </div>
-          </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'
-import { parseFITFile, parseZWOFile } from '@/utils/workoutFileParser'
-
-const currentDate = ref(new Date())
-const workouts = ref([])
-const selectedWorkout = ref(null)
-const showAddWorkout = ref(false)
-const loading = ref(false)
-const error = ref('')
-const fileParseError = ref('')
-const workoutTypes = ref([])
-const uploadedFileName = ref('')
-const parsedFileData = ref(null)
-
-const newWorkout = ref({
-  title: '',
-  description: '',
-  type: '',
-  scheduled_date: new Date().toISOString().split('T')[0],
-  duration: 60,
-  workout_data: null,
-  file_type: null,
-})
-
-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 () => {
-  // Debug logging
-  console.log('=== Frontend Debug Info ===')
-  console.log('Stored access_token:', localStorage.getItem('access_token'))
-  console.log('Stored refresh_token:', localStorage.getItem('refresh_token'))
-  console.log('API Base URL:', process.env.VUE_APP_API_URL)
-  console.log('NODE_ENV:', process.env.NODE_ENV)
-  console.log('========================')
-
-  await loadWorkoutTypes()
-  await loadWorkouts()
-})
-
-async function loadWorkouts() {
-  try {
-    const { data } = await api.get('/api/protected/workouts')
-    workouts.value = data || []
-  } catch (err) {
-    console.error('Failed to load workouts:', err)
-    error.value = 'Failed to load workouts'
-  }
-}
-
-async function loadWorkoutTypes() {
-  try {
-    const { data } = await api.get('/api/protected/workout-types')
-    console.log('Loaded workout types:', data)
-    workoutTypes.value = data || []
-  } catch (err) {
-    console.error('Failed to load workout types:', err)
-    // Set default types if API fails
-    workoutTypes.value = [
-      { id: 1, name: 'Cycling', icon: '🚴', color: '#667eea' },
-      { id: 2, name: 'Running', icon: '🏃', color: '#f59e0b' },
-      { id: 3, name: 'Swimming', icon: '🏊', color: '#06b6d4' },
-      { id: 4, name: 'Strength', icon: '💪', color: '#8b5cf6' },
-    ]
-  }
-}
-
-async function handleFileUpload(event) {
-  const file = event.target.files?.[0]
-  if (!file) return
-
-  fileParseError.value = ''
-  parsedFileData.value = null
-  uploadedFileName.value = file.name
-
-  try {
-    const fileExtension = file.name.split('.').pop()?.toLowerCase()
-    let parsed
-
-    if (fileExtension === 'fit') {
-      const fileBuffer = await file.arrayBuffer()
-      parsed = await parseFITFile(fileBuffer)
-    } else if (fileExtension === 'zwo') {
-      parsed = await parseZWOFile(file)
-    } else {
-      throw new Error('Unsupported file format. Please use FIT or ZWO files.')
-    }
-
-    if (parsed) {
-      parsedFileData.value = parsed
-      newWorkout.value.workout_data = parsed
-      newWorkout.value.file_type = fileExtension
-
-      // Auto-populate fields from file
-      if (parsed.title && !newWorkout.value.title) {
-        newWorkout.value.title = parsed.title
-      }
-      
-      // Update duration from parsed file (convert seconds to minutes)
-      if (parsed.duration) {
-        newWorkout.value.duration = Math.round(parsed.duration / 60)
-      }
-      
-      if (parsed.description && !newWorkout.value.description) {
-        newWorkout.value.description = parsed.description
-      }
-    }
-  } catch (err) {
-    console.error('File parsing error:', err)
-    fileParseError.value = `Error parsing file: ${err.message}`
-    uploadedFileName.value = ''
-    newWorkout.value.workout_data = null
-    newWorkout.value.file_type = null
-  }
-}
-
-async function handleAddWorkout() {
-  if (!newWorkout.value.title.trim()) {
-    error.value = 'Please enter a workout title'
-    return
-  }
-
-  if (!newWorkout.value.scheduled_date) {
-    error.value = 'Please select a date'
-    return
-  }
-
-  loading.value = true
-  error.value = ''
-
-  try {
-    const payload = {
-      title: newWorkout.value.title,
-      description: newWorkout.value.description,
-      type: newWorkout.value.type || null,
-      scheduled_date: newWorkout.value.scheduled_date,
-      duration: newWorkout.value.duration,
-      workout_data: newWorkout.value.workout_data,
-      file_type: newWorkout.value.file_type,
-    }
-
-    console.log('=== Sending Payload ===')
-    console.log('Payload:', payload)
-    console.log('API URL:', api.defaults.baseURL)
-    console.log('Full URL:', api.defaults.baseURL + '/api/protected/workouts')
-    console.log('======================')
-
-    const { data } = await api.post('/api/protected/workouts', payload)
-    workouts.value.push(data)
-    showAddWorkout.value = false
-    resetForm()
-  } catch (err) {
-    console.error('=== Full Error ===')
-    console.error('Error object:', err)
-    console.error('Response:', err.response)
-    console.error('Request:', err.request)
-    console.error('Message:', err.message)
-    console.error('=================')
-    
-    error.value = err.response?.data?.error || 'Failed to add workout'
-  } finally {
-    loading.value = false
-  }
-}
-
-function resetForm() {
-  newWorkout.value = {
-    title: '',
-    description: '',
-    type: '',
-    scheduled_date: new Date().toISOString().split('T')[0],
-    duration: 60,
-    workout_data: null,
-    file_type: null,
-  }
-  uploadedFileName.value = ''
-  parsedFileData.value = null
-  fileParseError.value = ''
-  error.value = ''
-  
-  // Reset file input
-  const fileInput = document.getElementById('workout-file')
-  if (fileInput) {
-    fileInput.value = ''
-  }
-}
-
-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 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 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;
-  font-size: 2rem;
-}
-
-.header-controls {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.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;
-  transition: background 0.2s;
-}
-
-.btn-nav:hover {
-  background: #bdc3c7;
-}
-
-.btn-primary {
-  padding: 0.75rem 1.5rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 600;
-  transition: transform 0.2s;
-}
-
-.btn-primary:hover {
-  transform: translateY(-2px);
-}
-
-.btn-primary:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.modal-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;
-  padding: 1rem;
-  overflow-y: auto;
-}
-
-.modal-content {
-  background: white;
-  border-radius: 8px;
-  padding: 2rem;
-  max-width: 600px;
-  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;
-  border-bottom: 1px solid #e5e7eb;
-  padding-bottom: 1rem;
-}
-
-.modal-header h3 {
-  margin: 0;
-  color: #2c3e50;
-  font-size: 1.5rem;
-}
-
-.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;
-  transition: transform 0.2s;
-}
-
-.btn-close:hover {
-  transform: rotate(90deg);
-  color: #2c3e50;
-}
-
-.workout-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.form-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-}
-
-label {
-  margin-bottom: 0.25rem;
-  color: #2c3e50;
-  font-weight: 600;
-  font-size: 0.95rem;
-}
-
-input,
-select,
-textarea {
-  padding: 0.75rem;
-  border: 2px solid #e5e7eb;
-  border-radius: 6px;
-  font-size: 1rem;
-  font-family: inherit;
-  transition: all 0.2s;
-  background: white;
-}
-
-input:focus,
-select:focus,
-textarea:focus {
-  outline: none;
-  border-color: #667eea;
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-}
-
-textarea {
-  resize: vertical;
-  min-height: 100px;
-}
-
-.file-input-wrapper {
-  position: relative;
-}
-
-#workout-file {
-  display: none;
-}
-
-.file-label {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.75rem;
-  padding: 2rem;
-  border: 2px dashed #667eea;
-  border-radius: 6px;
-  background: rgba(102, 126, 234, 0.05);
-  cursor: pointer;
-  transition: all 0.2s;
-  font-weight: 500;
-  color: #667eea;
-}
-
-.file-label:hover {
-  background: rgba(102, 126, 234, 0.1);
-  border-color: #764ba2;
-}
-
-.file-label svg {
-  width: 24px;
-  height: 24px;
-}
-
-.error-small {
-  padding: 0.75rem;
-  background: #fef2f2;
-  border: 1px solid #fecaca;
-  color: #dc2626;
-  border-radius: 4px;
-  font-size: 0.9rem;
-}
-
-.parsed-data {
-  padding: 1rem;
-  background: #f0f4ff;
-  border: 1px solid #c7d2fe;
-  border-radius: 4px;
-  color: #1e40af;
-  font-size: 0.9rem;
-}
-
-.parsed-data p {
-  margin: 0.25rem 0;
-}
-
-.parsed-data strong {
-  color: #1e3a8a;
-}
-
-.form-actions {
-  display: flex;
-  gap: 1rem;
-  justify-content: flex-end;
-  padding-top: 1rem;
-  border-top: 1px solid #e5e7eb;
-}
-
-.btn-secondary {
-  padding: 0.75rem 1.5rem;
-  background: #95a5a6;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 600;
-  transition: background 0.2s;
-}
-
-.btn-secondary:hover {
-  background: #7f8c8d;
-}
-
-.error-message {
-  margin-top: 1rem;
-  padding: 1rem;
-  background: #fee;
-  color: #c33;
-  border-radius: 4px;
-  border-left: 4px solid #c33;
-}
-
-.calendar-grid {
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  padding: 1rem;
-  margin-bottom: 2rem;
-  overflow-x: auto;
-}
-
-.calendar-header-row,
-.calendar-days {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 1px;
-  background: #ecf0f1;
-  min-width: 100%;
-}
-
-.day-header {
-  background: #667eea;
-  color: white;
-  padding: 1rem;
-  text-align: center;
-  font-weight: 600;
-  font-size: 0.9rem;
-}
-
-.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;
-  font-size: 1.1rem;
-}
-
-.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;
-  font-size: 1.3rem;
-}
-
-.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: all 0.2s;
-}
-
-.workout-item:hover {
-  background: #f0f4ff;
-  transform: translateX(4px);
-}
-
-.workout-item-header {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 0.5rem;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.workout-date {
-  font-weight: 600;
-  color: #667eea;
-  min-width: 100px;
-}
-
-.workout-title {
-  flex: 1;
-  color: #2c3e50;
-  font-weight: 500;
-}
-
-.workout-type {
-  background: #667eea;
-  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;
-  flex-wrap: wrap;
-}
-
-.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;
-  }
-
-  .modal-content {
-    max-width: 100%;
-    padding: 1.5rem;
-  }
-
-  .form-actions {
-    flex-direction: column;
-  }
-
-  .btn-primary,
-  .btn-secondary {
-    width: 100%;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/components/WorkoutDetail.vue b/src/components/WorkoutDetail.vue
index 81d19ab..53a35a0 100644
--- a/src/components/WorkoutDetail.vue
+++ b/src/components/WorkoutDetail.vue
@@ -1,88 +1,112 @@
 <template>
-  <div class="workout-detail-modal" v-if="workout">
+  <div v-if="workout" class="fixed inset-0 z-50">
     <div class="modal-overlay" @click.self="closeModal">
-      <div class="modal-window">
-        <div class="detail-header">
-          <div class="header-info">
-            <h2>{{ workout.title }}</h2>
-            <p class="workout-meta">
-              {{ formatDate(workout.scheduled_date) }} • {{ formatDuration(workout.duration * 60) }}
+      <div class="modal-panel max-w-lg">
+        <!-- Header -->
+        <div class="flex items-start justify-between p-4 border-b border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 rounded-t-xl">
+          <div>
+            <h2 class="text-lg font-bold text-zinc-900 dark:text-zinc-100">{{ workout.title }}</h2>
+            <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
+              {{ formatDate(workout.scheduled_date) }} &bull; {{ formatDuration(workout.duration * 60) }}
             </p>
           </div>
-          <button @click="closeModal" class="btn-close">✕</button>
+          <button
+            @click="closeModal"
+            class="flex items-center justify-center w-7 h-7 rounded text-zinc-400 dark:text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-200 hover:bg-zinc-200 dark:hover:bg-zinc-700"
+          >
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
         </div>
 
-        <div class="detail-body">
+        <!-- Body -->
+        <div class="p-4 space-y-4">
           <!-- 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 class="card p-3">
+            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
+              <div class="flex flex-col gap-1">
+                <span class="text-[10px] font-bold uppercase tracking-wide text-zinc-400 dark:text-zinc-500">Type</span>
+                <span class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{{ workout.type || 'Custom' }}</span>
               </div>
-              <div class="info-item">
-                <span class="label">Duration</span>
-                <span class="value">{{ formatDuration(workout.duration * 60) }}</span>
+              <div class="flex flex-col gap-1">
+                <span class="text-[10px] font-bold uppercase tracking-wide text-zinc-400 dark:text-zinc-500">Duration</span>
+                <span class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{{ formatDuration(workout.duration * 60) }}</span>
               </div>
-              <div class="info-item">
-                <span class="label">Status</span>
-                <span class="value status" :class="workout.status">{{ workout.status }}</span>
+              <div class="flex flex-col gap-1">
+                <span class="text-[10px] font-bold uppercase tracking-wide text-zinc-400 dark:text-zinc-500">Status</span>
+                <span
+                  class="inline-block w-fit px-2 py-0.5 rounded-full text-xs font-semibold"
+                  :class="{
+                    'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400': workout.status === 'planned',
+                    'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400': workout.status === 'completed',
+                    'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400': workout.status === 'skipped',
+                  }"
+                >{{ workout.status }}</span>
               </div>
-              <div v-if="workout.file_type" class="info-item">
-                <span class="label">Source</span>
-                <span class="value">{{ workout.file_type.toUpperCase() }} File</span>
+              <div v-if="workout.file_type" class="flex flex-col gap-1">
+                <span class="text-[10px] font-bold uppercase tracking-wide text-zinc-400 dark:text-zinc-500">Source</span>
+                <span class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{{ workout.file_type.toUpperCase() }} File</span>
+              </div>
+              <div v-if="equipmentName" class="flex flex-col gap-1">
+                <span class="text-[10px] font-bold uppercase tracking-wide text-zinc-400 dark:text-zinc-500">Equipment</span>
+                <span class="text-sm font-semibold text-brand-500">{{ equipmentName }}</span>
               </div>
             </div>
           </div>
 
           <!-- File Metadata -->
-          <div v-if="workout.workout_data && hasFileMetadata" class="metadata-section">
-            <h3>File Information</h3>
-            <div class="metadata-grid">
-              <div v-if="workout.workout_data.author" class="metadata-item">
-                <span class="label">Author</span>
-                <span class="value">{{ workout.workout_data.author }}</span>
+          <div v-if="workout.workout_data && hasFileMetadata" class="space-y-2">
+            <h3 class="text-sm font-bold text-zinc-900 dark:text-zinc-100 border-b-2 border-brand-500 pb-2">File Information</h3>
+            <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
+              <div v-if="workout.workout_data.author" class="card p-3">
+                <span class="block text-[10px] font-bold uppercase tracking-wide text-zinc-400 dark:text-zinc-500 mb-1">Author</span>
+                <span class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{{ workout.workout_data.author }}</span>
               </div>
-              <div v-if="workout.workout_data.sport" class="metadata-item">
-                <span class="label">Sport</span>
-                <span class="value">{{ workout.workout_data.sport }}</span>
+              <div v-if="workout.workout_data.sport" class="card p-3">
+                <span class="block text-[10px] font-bold uppercase tracking-wide text-zinc-400 dark:text-zinc-500 mb-1">Sport</span>
+                <span class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{{ workout.workout_data.sport }}</span>
               </div>
-              <div v-if="workout.workout_data.intensity_factor" class="metadata-item">
-                <span class="label">Intensity Factor</span>
-                <span class="value">{{ workout.workout_data.intensity_factor.toFixed(2) }}</span>
+              <div v-if="workout.workout_data.intensity_factor" class="card p-3">
+                <span class="block text-[10px] font-bold uppercase tracking-wide text-zinc-400 dark:text-zinc-500 mb-1">Intensity Factor</span>
+                <span class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{{ workout.workout_data.intensity_factor.toFixed(2) }}</span>
               </div>
-              <div v-if="workout.workout_data.tss" class="metadata-item">
-                <span class="label">TSS</span>
-                <span class="value">{{ workout.workout_data.tss.toFixed(1) }}</span>
+              <div v-if="workout.workout_data.tss" class="card p-3">
+                <span class="block text-[10px] font-bold uppercase tracking-wide text-zinc-400 dark:text-zinc-500 mb-1">TSS</span>
+                <span class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{{ workout.workout_data.tss.toFixed(1) }}</span>
               </div>
             </div>
           </div>
 
           <!-- Workout Segments -->
-          <div v-if="workout.workout_data && workout.workout_data.segments && workout.workout_data.segments.length > 0" class="segments-section">
-            <h3>Workout Segments ({{ workout.workout_data.segments.length }})</h3>
-            <div class="segments-list">
-              <div v-for="(segment, idx) in workout.workout_data.segments" :key="idx" class="segment-card">
-                <div class="segment-header">
-                  <span class="segment-type">{{ formatSegmentType(segment.type) }}</span>
-                  <span class="segment-duration">{{ formatDuration(segment.duration) }}</span>
+          <div v-if="workout.workout_data && workout.workout_data.segments && workout.workout_data.segments.length > 0" class="space-y-2">
+            <h3 class="text-sm font-bold text-zinc-900 dark:text-zinc-100 border-b-2 border-brand-500 pb-2">Workout Segments ({{ workout.workout_data.segments.length }})</h3>
+            <div class="space-y-2">
+              <div
+                v-for="(segment, idx) in workout.workout_data.segments"
+                :key="idx"
+                class="card p-3 border-l-4 border-l-brand-500"
+              >
+                <div class="flex items-center justify-between flex-wrap gap-2 mb-2">
+                  <span class="inline-block bg-brand-600 text-white px-2 py-0.5 rounded text-xs font-bold">{{ formatSegmentType(segment.type) }}</span>
+                  <span class="text-sm font-bold text-zinc-900 dark:text-zinc-100">{{ formatDuration(segment.duration) }}</span>
                 </div>
-                <div class="segment-details">
-                  <div v-if="segment.power !== undefined && segment.power !== 0" class="detail-row">
-                    <span>Power:</span>
-                    <strong>{{ (segment.power * 100).toFixed(0) }}% FTP</strong>
+                <div class="space-y-1.5">
+                  <div v-if="segment.power !== undefined && segment.power !== 0" class="flex items-center justify-between text-sm">
+                    <span class="text-zinc-500 dark:text-zinc-400">Power:</span>
+                    <span class="font-semibold text-zinc-900 dark:text-zinc-100">{{ (segment.power * 100).toFixed(0) }}% FTP</span>
                   </div>
-                  <div v-if="segment.power_low !== undefined && segment.power_high !== undefined && segment.power_low !== 0" class="detail-row">
-                    <span>Power Range:</span>
-                    <strong>{{ (segment.power_low * 100).toFixed(0) }}% - {{ (segment.power_high * 100).toFixed(0) }}% FTP</strong>
+                  <div v-if="segment.power_low !== undefined && segment.power_high !== undefined && segment.power_low !== 0" class="flex items-center justify-between text-sm">
+                    <span class="text-zinc-500 dark:text-zinc-400">Power Range:</span>
+                    <span class="font-semibold text-zinc-900 dark:text-zinc-100">{{ (segment.power_low * 100).toFixed(0) }}% - {{ (segment.power_high * 100).toFixed(0) }}% FTP</span>
                   </div>
-                  <div v-if="segment.cadence && segment.cadence !== 0" class="detail-row">
-                    <span>Cadence:</span>
-                    <strong>{{ segment.cadence }} RPM</strong>
+                  <div v-if="segment.cadence && segment.cadence !== 0" class="flex items-center justify-between text-sm">
+                    <span class="text-zinc-500 dark:text-zinc-400">Cadence:</span>
+                    <span class="font-semibold text-zinc-900 dark:text-zinc-100">{{ segment.cadence }} RPM</span>
                   </div>
-                  <div v-if="segment.tempo" class="detail-row">
-                    <span>Tempo:</span>
-                    <strong>{{ segment.tempo }}</strong>
+                  <div v-if="segment.tempo" class="flex items-center justify-between text-sm">
+                    <span class="text-zinc-500 dark:text-zinc-400">Tempo:</span>
+                    <span class="font-semibold text-zinc-900 dark:text-zinc-100">{{ segment.tempo }}</span>
                   </div>
                 </div>
               </div>
@@ -90,37 +114,38 @@
           </div>
 
           <!-- Completed Metrics -->
-          <div v-if="workout.status === 'completed'" class="metrics-section">
-            <h3>Completed Metrics</h3>
-            <div class="metrics-grid">
-              <div v-if="workout.distance" class="metric">
-                <span class="metric-label">Distance</span>
-                <span class="metric-value">{{ workout.distance }} km</span>
+          <div v-if="workout.status === 'completed'" class="space-y-2">
+            <h3 class="text-sm font-bold text-zinc-900 dark:text-zinc-100 border-b-2 border-brand-500 pb-2">Completed Metrics</h3>
+            <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
+              <div v-if="workout.distance" class="card p-3 text-center">
+                <span class="block text-[10px] font-bold uppercase tracking-wide text-zinc-400 dark:text-zinc-500 mb-1">Distance</span>
+                <span class="block text-lg font-extrabold text-brand-500">{{ 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 v-if="workout.avg_power" class="card p-3 text-center">
+                <span class="block text-[10px] font-bold uppercase tracking-wide text-zinc-400 dark:text-zinc-500 mb-1">Avg Power</span>
+                <span class="block text-lg font-extrabold text-brand-500">{{ 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 v-if="workout.avg_hr" class="card p-3 text-center">
+                <span class="block text-[10px] font-bold uppercase tracking-wide text-zinc-400 dark:text-zinc-500 mb-1">Avg HR</span>
+                <span class="block text-lg font-extrabold text-brand-500">{{ 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 v-if="workout.calories_burned" class="card p-3 text-center">
+                <span class="block text-[10px] font-bold uppercase tracking-wide text-zinc-400 dark:text-zinc-500 mb-1">Calories</span>
+                <span class="block text-lg font-extrabold text-brand-500">{{ workout.calories_burned }}</span>
               </div>
             </div>
           </div>
 
           <!-- Description -->
-          <div v-if="workout.description" class="description-section">
-            <h3>Description</h3>
-            <p>{{ workout.description }}</p>
+          <div v-if="workout.description" class="space-y-2">
+            <h3 class="text-sm font-bold text-zinc-900 dark:text-zinc-100 border-b-2 border-brand-500 pb-2">Description</h3>
+            <p class="card p-3 text-sm text-zinc-600 dark:text-zinc-300 leading-relaxed">{{ workout.description }}</p>
           </div>
         </div>
 
-        <div class="detail-footer">
-          <select v-model="selectedStatus" @change="updateStatus" class="status-select">
+        <!-- Footer -->
+        <div class="flex flex-wrap gap-2 p-4 border-t border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 rounded-b-xl">
+          <select v-model="selectedStatus" @change="updateStatus" class="input-field flex-1 min-w-[140px]">
             <option value="planned">Planned</option>
             <option value="completed">Completed</option>
             <option value="skipped">Skipped</option>
@@ -146,6 +171,19 @@ const props = defineProps({
 
 const emit = defineEmits(['close', 'updated', 'deleted'])
 const selectedStatus = ref(props.workout.status)
+const equipmentName = ref('')
+
+async function loadEquipmentName() {
+  if (!props.workout.equipment_id) return
+  try {
+    const { data } = await api.get('/api/protected/equipment')
+    const eq = (data || []).find(e => e.id === props.workout.equipment_id)
+    if (eq) equipmentName.value = eq.name
+  } catch (err) {
+    console.error('Failed to load equipment:', err)
+  }
+}
+loadEquipmentName()
 
 const hasFileMetadata = computed(() => {
   if (!props.workout.workout_data) return false
@@ -159,6 +197,8 @@ const hasFileMetadata = computed(() => {
 
 watch(() => props.workout, (newWorkout) => {
   selectedStatus.value = newWorkout.status
+  equipmentName.value = ''
+  loadEquipmentName()
 })
 
 function closeModal() {
@@ -210,375 +250,3 @@ function formatSegmentType(type) {
   return type.charAt(0).toUpperCase() + type.slice(1).replace(/_/g, ' ')
 }
 </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: 700px;
-  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: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
-}
-
-.header-info h2 {
-  margin: 0 0 0.5rem 0;
-  color: #2c3e50;
-  font-size: 1.75rem;
-  font-weight: 700;
-}
-
-.workout-meta {
-  margin: 0;
-  color: #7f8c8d;
-  font-size: 0.95rem;
-}
-
-.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;
-  transition: all 0.2s;
-  border-radius: 4px;
-}
-
-.btn-close:hover {
-  background: rgba(0, 0, 0, 0.1);
-  color: #2c3e50;
-}
-
-.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(auto-fit, minmax(150px, 1fr));
-  gap: 1.5rem;
-}
-
-.info-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.info-item .label {
-  font-size: 0.75rem;
-  color: #7f8c8d;
-  text-transform: uppercase;
-  font-weight: 700;
-  letter-spacing: 0.5px;
-}
-
-.info-item .value {
-  font-size: 1.1rem;
-  color: #2c3e50;
-  font-weight: 600;
-}
-
-.value.status {
-  display: inline-block;
-  padding: 0.4rem 0.75rem;
-  border-radius: 6px;
-  font-size: 0.9rem;
-  text-align: center;
-  width: fit-content;
-}
-
-.value.status.planned {
-  background: #fef3c7;
-  color: #92400e;
-}
-
-.value.status.completed {
-  background: #d1fae5;
-  color: #065f46;
-}
-
-.value.status.skipped {
-  background: #fee2e2;
-  color: #991b1b;
-}
-
-.metadata-section,
-.segments-section,
-.metrics-section,
-.description-section {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.metadata-section h3,
-.segments-section h3,
-.metrics-section h3,
-.description-section h3 {
-  margin: 0;
-  color: #2c3e50;
-  font-size: 1.2rem;
-  font-weight: 700;
-  border-bottom: 2px solid #667eea;
-  padding-bottom: 0.75rem;
-}
-
-.metadata-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 1rem;
-}
-
-.metadata-item {
-  background: #f0f4ff;
-  padding: 1rem;
-  border-radius: 6px;
-  border: 1px solid #dbeafe;
-}
-
-.metadata-item .label {
-  font-size: 0.75rem;
-  color: #7f8c8d;
-  text-transform: uppercase;
-  margin-bottom: 0.5rem;
-  display: block;
-  font-weight: 700;
-}
-
-.metadata-item .value {
-  font-size: 1rem;
-  color: #2c3e50;
-  font-weight: 600;
-}
-
-.segments-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.segment-card {
-  background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
-  border: 1px solid #e0e6ed;
-  border-left: 4px solid #667eea;
-  padding: 1rem;
-  border-radius: 6px;
-}
-
-.segment-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-}
-
-.segment-type {
-  display: inline-block;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  padding: 0.4rem 0.85rem;
-  border-radius: 6px;
-  font-size: 0.85rem;
-  font-weight: 700;
-}
-
-.segment-duration {
-  color: #2c3e50;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.segment-details {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.detail-row {
-  display: flex;
-  justify-content: space-between;
-  font-size: 0.95rem;
-  align-items: center;
-}
-
-.detail-row span {
-  color: #7f8c8d;
-}
-
-.detail-row strong {
-  color: #2c3e50;
-  font-weight: 600;
-}
-
-.metrics-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-  gap: 1rem;
-}
-
-.metric {
-  background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%);
-  padding: 1.25rem;
-  border-radius: 6px;
-  text-align: center;
-  border: 1px solid #dbeafe;
-}
-
-.metric-label {
-  display: block;
-  font-size: 0.8rem;
-  color: #7f8c8d;
-  text-transform: uppercase;
-  margin-bottom: 0.5rem;
-  font-weight: 700;
-}
-
-.metric-value {
-  display: block;
-  font-size: 1.4rem;
-  color: #667eea;
-  font-weight: 800;
-}
-
-.description-section p {
-  margin: 0;
-  color: #4b5563;
-  line-height: 1.7;
-  background: #f9f9f9;
-  padding: 1.25rem;
-  border-radius: 6px;
-  border: 1px solid #e5e7eb;
-}
-
-.detail-footer {
-  display: flex;
-  gap: 0.75rem;
-  padding: 1.5rem 2rem;
-  border-top: 1px solid #ecf0f1;
-  background: #f9f9f9;
-  flex-wrap: wrap;
-}
-
-.status-select {
-  flex: 1;
-  min-width: 150px;
-  padding: 0.75rem;
-  border: 2px solid #e5e7eb;
-  border-radius: 6px;
-  font-size: 0.95rem;
-  font-weight: 500;
-  background: white;
-  color: #2c3e50;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.status-select:focus {
-  outline: none;
-  border-color: #667eea;
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-}
-
-.btn-danger {
-  padding: 0.75rem 1.5rem;
-  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-weight: 600;
-  transition: all 0.2s;
-}
-
-.btn-danger:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
-}
-
-.btn-secondary {
-  padding: 0.75rem 1.5rem;
-  background: #95a5a6;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-weight: 600;
-  transition: all 0.2s;
-}
-
-.btn-secondary:hover {
-  background: #7f8c8d;
-}
-
-@media (max-width: 640px) {
-  .modal-window {
-    max-width: 100%;
-  }
-
-  .info-grid,
-  .metadata-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .detail-footer {
-    flex-direction: column;
-  }
-
-  .detail-footer button,
-  .detail-footer select {
-    width: 100%;
-  }
-
-  .header-info h2 {
-    font-size: 1.4rem;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/composables/useAuth.js b/src/composables/useAuth.js
deleted file mode 100644
index 39b5fb3..0000000
--- a/src/composables/useAuth.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useAuthStore } from '@/stores/auth'
-
-export function useAuth() {
-  const authStore = useAuthStore()
-
-  return {
-    user: authStore.user,
-    isAuthenticated: authStore.isAuthenticated,
-    error: authStore.error,
-    loading: authStore.loading,
-    signup: authStore.signup,
-    login: authStore.login,
-    logout: authStore.logout,
-    requestPasswordReset: authStore.requestPasswordReset,
-    resetPassword: authStore.resetPassword,
-    fetchProfile: authStore.fetchProfile,
-    updateProfile: authStore.updateProfile,
-  }
-}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 33f7c05..16bb209 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,3 +1,4 @@
+import './assets/css/design-system.css'
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
diff --git a/src/router/index.js b/src/router/index.js
index 5b8b320..ee21f5f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,14 +1,14 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 
-import UserLogin from '@/components/UserLogin.vue'
-import UserSignup from '@/components/UserSignup.vue'
-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'
+import UserLogin from '@/views/UserLogin.vue'
+import UserSignup from '@/views/UserSignup.vue'
+import UserDashboard from '@/views/UserDashboard.vue'
+import UserProfile from '@/views/UserProfile.vue'
+import UserEquipment from '@/views/UserEquipment.vue'
+import TrainingZones from '@/views/TrainingZones.vue'
+import WorkoutCalendar from '@/views/WorkoutCalendar.vue'
+import PasswordReset from '@/views/PasswordReset.vue'
 
 const routes = [
   {
diff --git a/src/stores/theme.js b/src/stores/theme.js
new file mode 100644
index 0000000..e72e456
--- /dev/null
+++ b/src/stores/theme.js
@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useThemeStore = defineStore('theme', () => {
+  const theme = ref(localStorage.getItem('rideaware-theme') || 'dark')
+
+  function setTheme(newTheme) {
+    theme.value = newTheme
+    localStorage.setItem('rideaware-theme', newTheme)
+    applyTheme(newTheme)
+  }
+
+  function toggleTheme() {
+    setTheme(theme.value === 'dark' ? 'light' : 'dark')
+  }
+
+  function applyTheme(t) {
+    document.documentElement.classList.toggle('dark', t === 'dark')
+  }
+
+  // Apply on initialization
+  applyTheme(theme.value)
+
+  return { theme, setTheme, toggleTheme }
+})
diff --git a/src/views/PasswordReset.vue b/src/views/PasswordReset.vue
new file mode 100644
index 0000000..52a1088
--- /dev/null
+++ b/src/views/PasswordReset.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="min-h-screen flex items-center justify-center bg-zinc-100 dark:bg-surface-950 p-4">
+    <div class="w-full max-w-sm card p-6">
+      <div class="text-center mb-5">
+        <h1 class="text-xl font-bold text-zinc-900 dark:text-zinc-100">{{ resetLinkSent ? 'Check Your Email' : 'Reset Password' }}</h1>
+        <p class="text-sm text-zinc-500 mt-1">
+          {{ resetLinkSent
+            ? 'We\'ve sent password reset instructions to your email'
+            : 'Enter your email address and we\'ll send you a reset link'
+          }}
+        </p>
+      </div>
+
+      <!-- Request Form -->
+      <form v-if="!resetLinkSent" @submit.prevent="handleRequestReset" class="flex flex-col gap-3">
+        <div>
+          <label for="email" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">Email Address</label>
+          <input id="email" v-model="email" type="email" placeholder="Enter your email address" required :disabled="auth.loading" autocomplete="email" class="input-field" />
+          <p class="text-xs text-zinc-400 mt-1">We'll never share your email with anyone else.</p>
+        </div>
+
+        <button type="submit" :disabled="auth.loading" class="btn-primary w-full">
+          <span v-if="auth.loading" class="flex items-center gap-2">
+            <svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" opacity="0.25"/><path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="4" fill="none" stroke-linecap="round"/></svg>
+            Sending...
+          </span>
+          <span v-else>Send Reset Link</span>
+        </button>
+      </form>
+
+      <!-- Success State -->
+      <div v-else class="text-center">
+        <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 mb-3">
+          <svg class="w-6 h-6" 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>
+        <p class="text-sm text-zinc-600 dark:text-zinc-400">We've sent a reset link to:</p>
+        <p class="text-sm font-semibold text-brand-500 bg-brand-50 dark:bg-brand-500/10 rounded-md px-3 py-2 mt-2 break-all">{{ email }}</p>
+
+        <div class="flex items-start gap-2 p-2.5 mt-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800/40 rounded-lg text-left">
+          <svg class="w-4 h-4 text-amber-500 shrink-0 mt-0.5" 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 class="text-xs text-amber-700 dark:text-amber-400">Didn't receive the email? Check your spam folder or try again in a few minutes.</p>
+        </div>
+
+        <button @click="resetForm" class="btn-secondary mt-3">Try Another Email</button>
+      </div>
+
+      <!-- Error -->
+      <div v-if="auth.error" class="flex items-start gap-2.5 p-3 mt-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800/50 rounded-lg text-sm">
+        <svg class="w-4 h-4 text-red-500 shrink-0 mt-0.5" 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="font-semibold text-red-700 dark:text-red-400">Error</p>
+          <p class="text-red-600 dark:text-red-400/80 mt-0.5">{{ auth.error }}</p>
+        </div>
+      </div>
+
+      <!-- Links -->
+      <div class="mt-4 pt-4 border-t border-zinc-200 dark:border-zinc-700 text-center text-sm">
+        <RouterLink to="/login" class="inline-flex items-center gap-1 text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 no-underline font-medium">
+          <svg class="w-3.5 h-3.5" 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="mt-2">
+          <p class="text-zinc-500">Don't have an account?</p>
+          <RouterLink to="/signup" class="text-brand-500 hover:text-brand-600 font-semibold no-underline mt-0.5 inline-block">Create one now</RouterLink>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+
+const auth = useAuthStore()
+const email = ref('')
+const resetLinkSent = ref(false)
+
+async function handleRequestReset() {
+  try {
+    await auth.requestPasswordReset(email.value)
+    resetLinkSent.value = true
+  } catch (error) {
+    console.error('Password reset request failed:', error)
+  }
+}
+
+function resetForm() {
+  resetLinkSent.value = false
+  email.value = ''
+  auth.error = ''
+}
+</script>
diff --git a/src/views/TrainingZones.vue b/src/views/TrainingZones.vue
new file mode 100644
index 0000000..a69b7dd
--- /dev/null
+++ b/src/views/TrainingZones.vue
@@ -0,0 +1,318 @@
+<template>
+  <div class="min-h-screen bg-zinc-50 dark:bg-surface-950">
+    <!-- Use the shared navbar -->
+    <ModernNavbar />
+
+    <div class="max-w-6xl mx-auto pt-20 px-4 sm:px-6 pb-8">
+      <!-- Page Header -->
+      <div class="card p-4 sm:p-5 mb-6">
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+          <div>
+            <h2 class="text-xl font-bold text-zinc-900 dark:text-zinc-100 m-0">Training Zones</h2>
+            <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">Personalized zones based on FTP and Max HR</p>
+          </div>
+          <div class="flex gap-3">
+            <div v-if="profile.profile?.ftp" class="flex flex-col items-center px-4 py-2.5 bg-brand-600 rounded-lg text-white min-w-[110px]">
+              <span class="text-lg font-bold leading-tight">{{ profile.profile.ftp }}W</span>
+              <span class="text-[11px] opacity-90">FTP</span>
+            </div>
+            <div v-if="profile.profile?.max_hr" class="flex flex-col items-center px-4 py-2.5 bg-brand-600 rounded-lg text-white min-w-[110px]">
+              <span class="text-lg font-bold leading-tight">{{ profile.profile.max_hr }}</span>
+              <span class="text-[11px] opacity-90">Max HR</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Empty State -->
+      <div v-if="!profile.profile?.ftp && !profile.profile?.max_hr" class="card text-center py-12 px-6">
+        <div class="w-20 h-20 mx-auto mb-4 p-4 bg-zinc-100 dark:bg-zinc-800 rounded-full flex items-center justify-center text-zinc-400 dark:text-zinc-500">
+          <svg class="w-full h-full" 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 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-2">No Training Data Available</h3>
+        <p class="text-sm text-zinc-500 dark:text-zinc-400 mb-6 max-w-md mx-auto">Set your FTP and Max Heart Rate in your profile to see personalized training zones</p>
+        <RouterLink to="/profile" class="btn-primary gap-2">
+          <svg class="w-4 h-4" 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="flex flex-col gap-6">
+        <!-- Heart Rate Zones -->
+        <div v-if="profile.profile?.max_hr" class="card overflow-hidden">
+          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 px-4 py-3 border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-surface-900">
+            <div class="flex items-center gap-2.5">
+              <svg class="w-4 h-4 text-brand-500" 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 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100 m-0">Heart Rate Zones</h3>
+            </div>
+            <div class="flex items-center gap-1.5 text-xs font-medium">
+              <span class="text-zinc-400 dark:text-zinc-500">Max HR:</span>
+              <span class="text-brand-500 font-semibold">{{ profile.profile.max_hr }} bpm</span>
+              <template v-if="profile.profile.resting_hr">
+                <span class="text-zinc-300 dark:text-zinc-600 mx-1">|</span>
+                <span class="text-zinc-400 dark:text-zinc-500">Rest HR:</span>
+                <span class="text-brand-500 font-semibold">{{ profile.profile.resting_hr }} bpm</span>
+              </template>
+            </div>
+          </div>
+
+          <!-- Table header -->
+          <div class="hidden sm:grid grid-cols-[56px_1fr_1fr_1fr] gap-2 px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-zinc-400 dark:text-zinc-500 border-b border-zinc-100 dark:border-zinc-800/50">
+            <span>Zone</span>
+            <span>Name</span>
+            <span>Range</span>
+            <span>Intensity</span>
+          </div>
+
+          <!-- Zone rows -->
+          <div v-for="(zone, index) in hrZones" :key="index" class="grid grid-cols-[56px_1fr_1fr_1fr] items-center gap-2 py-2.5 px-3 border-b border-zinc-100 dark:border-zinc-800/50 last:border-b-0">
+            <span class="text-xs font-bold text-zinc-400 dark:text-zinc-500 uppercase tracking-wide">Z{{ index + 1 }}</span>
+            <span class="text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate">{{ zone.name }}</span>
+            <div class="flex items-baseline gap-1">
+              <span class="text-sm font-semibold" :style="{ color: zone.color }">{{ zone.min }}-{{ zone.max }}</span>
+              <span class="text-[11px] text-zinc-400 dark:text-zinc-500">bpm</span>
+            </div>
+            <div class="w-full">
+              <div class="w-full h-1.5 bg-zinc-100 dark:bg-zinc-800 rounded-full overflow-hidden">
+                <div class="h-full rounded-full" :style="{ width: `${(index + 1) * 20}%`, background: zone.color }"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Power Zones -->
+        <div v-if="profile.profile?.ftp" class="card overflow-hidden">
+          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 px-4 py-3 border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-surface-900">
+            <div class="flex items-center gap-2.5">
+              <svg class="w-4 h-4 text-brand-500" 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 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100 m-0">Power Zones</h3>
+            </div>
+            <div class="flex items-center gap-1.5 text-xs font-medium">
+              <span class="text-zinc-400 dark:text-zinc-500">FTP:</span>
+              <span class="text-brand-500 font-semibold">{{ profile.profile.ftp }}W</span>
+            </div>
+          </div>
+
+          <!-- Table header -->
+          <div class="hidden sm:grid grid-cols-[56px_1fr_100px_80px_1fr] gap-2 px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-zinc-400 dark:text-zinc-500 border-b border-zinc-100 dark:border-zinc-800/50">
+            <span>Zone</span>
+            <span>Name</span>
+            <span>Range</span>
+            <span>% FTP</span>
+            <span>Intensity</span>
+          </div>
+
+          <!-- Zone rows -->
+          <div v-for="(zone, index) in powerZones" :key="index" class="grid grid-cols-[56px_1fr_100px_80px_1fr] items-center gap-2 py-2.5 px-3 border-b border-zinc-100 dark:border-zinc-800/50 last:border-b-0">
+            <span class="text-xs font-bold text-zinc-400 dark:text-zinc-500 uppercase tracking-wide">Z{{ index + 1 }}</span>
+            <span class="text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate">{{ zone.name }}</span>
+            <div class="flex items-baseline gap-1">
+              <span class="text-sm font-semibold" :style="{ color: zone.color }">{{ zone.min }}-{{ zone.max }}</span>
+              <span class="text-[11px] text-zinc-400 dark:text-zinc-500">W</span>
+            </div>
+            <span class="text-xs text-zinc-500 dark:text-zinc-400">{{ calculatePercentage(zone.min) }}-{{ calculatePercentage(zone.max) }}%</span>
+            <div class="w-full">
+              <div class="w-full h-1.5 bg-zinc-100 dark:bg-zinc-800 rounded-full overflow-hidden">
+                <div class="h-full rounded-full" :style="{ width: `${calculatePercentage(zone.max)}%`, background: zone.color }"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Training Guide -->
+      <div class="card overflow-hidden mt-6">
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 px-4 py-3 border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-surface-900">
+          <div class="flex items-center gap-2.5">
+            <svg class="w-4 h-4 text-brand-500" 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 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100 m-0">Training Guide</h3>
+          </div>
+          <p class="text-xs text-zinc-500 dark:text-zinc-400 m-0">How to use each training zone effectively</p>
+        </div>
+
+        <div class="divide-y divide-zinc-100 dark:divide-zinc-800/50">
+          <!-- Zone 1: Recovery -->
+          <div class="flex items-start gap-3 py-3 px-4">
+            <div class="shrink-0 w-8 h-8 rounded-md bg-emerald-500/10 dark:bg-emerald-500/15 flex items-center justify-center text-emerald-600 dark:text-emerald-400">
+              <svg class="w-4 h-4" 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="min-w-0 flex-1">
+              <div class="flex items-center gap-2 mb-0.5">
+                <h4 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100 m-0">Recovery Rides</h4>
+                <span class="text-[10px] font-semibold px-1.5 py-0.5 rounded-full bg-brand-500/10 text-brand-500">Z1</span>
+              </div>
+              <p class="text-xs text-zinc-500 dark:text-zinc-400 m-0 leading-relaxed">Very light intensity for active recovery. Easy spinning, conversational pace. Promotes recovery and improves technique.</p>
+            </div>
+          </div>
+
+          <!-- Zone 2: Endurance -->
+          <div class="flex items-start gap-3 py-3 px-4">
+            <div class="shrink-0 w-8 h-8 rounded-md bg-blue-500/10 dark:bg-blue-500/15 flex items-center justify-center text-blue-600 dark:text-blue-400">
+              <svg class="w-4 h-4" 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="min-w-0 flex-1">
+              <div class="flex items-center gap-2 mb-0.5">
+                <h4 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100 m-0">Endurance Base</h4>
+                <span class="text-[10px] font-semibold px-1.5 py-0.5 rounded-full bg-brand-500/10 text-brand-500">Z2</span>
+              </div>
+              <p class="text-xs text-zinc-500 dark:text-zinc-400 m-0 leading-relaxed">Sustainable aerobic pace for building your engine. Foundation of cycling fitness. Builds aerobic base and increases fat burning.</p>
+            </div>
+          </div>
+
+          <!-- Zone 3: Tempo -->
+          <div class="flex items-start gap-3 py-3 px-4">
+            <div class="shrink-0 w-8 h-8 rounded-md bg-amber-500/10 dark:bg-amber-500/15 flex items-center justify-center text-amber-600 dark:text-amber-400">
+              <svg class="w-4 h-4" 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="min-w-0 flex-1">
+              <div class="flex items-center gap-2 mb-0.5">
+                <h4 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100 m-0">Tempo Training</h4>
+                <span class="text-[10px] font-semibold px-1.5 py-0.5 rounded-full bg-brand-500/10 text-brand-500">Z3</span>
+              </div>
+              <p class="text-xs text-zinc-500 dark:text-zinc-400 m-0 leading-relaxed">Comfortably hard pace that improves muscular endurance. Breathing more noticeable but controlled. Improves efficiency and builds strength.</p>
+            </div>
+          </div>
+
+          <!-- Zone 4: Threshold -->
+          <div class="flex items-start gap-3 py-3 px-4">
+            <div class="shrink-0 w-8 h-8 rounded-md bg-red-500/10 dark:bg-red-500/15 flex items-center justify-center text-red-600 dark:text-red-400">
+              <svg class="w-4 h-4" 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="min-w-0 flex-1">
+              <div class="flex items-center gap-2 mb-0.5">
+                <h4 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100 m-0">Threshold Power</h4>
+                <span class="text-[10px] font-semibold px-1.5 py-0.5 rounded-full bg-brand-500/10 text-brand-500">Z4</span>
+              </div>
+              <p class="text-xs text-zinc-500 dark:text-zinc-400 m-0 leading-relaxed">Hard sustainable effort around your FTP. Where gains happen for power output and racing ability. Increases FTP and improves racing power.</p>
+            </div>
+          </div>
+
+          <!-- Zone 5: VO2 Max -->
+          <div class="flex items-start gap-3 py-3 px-4">
+            <div class="shrink-0 w-8 h-8 rounded-md bg-violet-500/10 dark:bg-violet-500/15 flex items-center justify-center text-violet-600 dark:text-violet-400">
+              <svg class="w-4 h-4" 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="min-w-0 flex-1">
+              <div class="flex items-center gap-2 mb-0.5">
+                <h4 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100 m-0">VO2 Max Power</h4>
+                <span class="text-[10px] font-semibold px-1.5 py-0.5 rounded-full bg-brand-500/10 text-brand-500">Z5</span>
+              </div>
+              <p class="text-xs text-zinc-500 dark:text-zinc-400 m-0 leading-relaxed">Very hard efforts that improve aerobic capacity. Short intervals with significant rest. Boosts VO2 max and increases capacity.</p>
+            </div>
+          </div>
+
+          <!-- Zone 6: Anaerobic -->
+          <div class="flex items-start gap-3 py-3 px-4">
+            <div class="shrink-0 w-8 h-8 rounded-md bg-pink-500/10 dark:bg-pink-500/15 flex items-center justify-center text-pink-600 dark:text-pink-400">
+              <svg class="w-4 h-4" 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="min-w-0 flex-1">
+              <div class="flex items-center gap-2 mb-0.5">
+                <h4 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100 m-0">Anaerobic Power</h4>
+                <span class="text-[10px] font-semibold px-1.5 py-0.5 rounded-full bg-brand-500/10 text-brand-500">Z6</span>
+              </div>
+              <p class="text-xs text-zinc-500 dark:text-zinc-400 m-0 leading-relaxed">Severe intensity above VO2 Max. Use sparingly for peak performance and developing maximum power production.</p>
+            </div>
+          </div>
+
+          <!-- Zone 7: Sprint -->
+          <div class="flex items-start gap-3 py-3 px-4">
+            <div class="shrink-0 w-8 h-8 rounded-md bg-cyan-500/10 dark:bg-cyan-500/15 flex items-center justify-center text-cyan-600 dark:text-cyan-400">
+              <svg class="w-4 h-4" 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="min-w-0 flex-1">
+              <div class="flex items-center gap-2 mb-0.5">
+                <h4 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100 m-0">Sprint Power</h4>
+                <span class="text-[10px] font-semibold px-1.5 py-0.5 rounded-full bg-brand-500/10 text-brand-500">Z7</span>
+              </div>
+              <p class="text-xs text-zinc-500 dark:text-zinc-400 m-0 leading-relaxed">Maximum intensity efforts lasting seconds. Develops explosive power and neuromuscular strength for competitive racing.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import api from '@/services/api'
+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, 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, 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' },
+  ] : []
+})
+
+onMounted(async () => {
+  try {
+    const profileRes = await api.get('/api/protected/profile')
+    profile.value = profileRes.data
+
+    const zonesRes = await api.get('/api/protected/zones')
+    zones.value = zonesRes.data
+  } catch (error) {
+    console.error('Failed to load zones:', error)
+  }
+})
+
+function calculatePercentage(watts) {
+  return Math.round((watts / profile.value.profile.ftp) * 100)
+}
+</script>
diff --git a/src/views/UserDashboard.vue b/src/views/UserDashboard.vue
new file mode 100644
index 0000000..351f53d
--- /dev/null
+++ b/src/views/UserDashboard.vue
@@ -0,0 +1,216 @@
+<template>
+  <div>
+    <ModernNavbar />
+
+    <div class="max-w-7xl mx-auto pt-16 px-4 pb-6">
+      <!-- Header -->
+      <div class="flex items-center justify-between mb-4">
+        <div>
+          <h1 class="text-lg font-bold text-zinc-900 dark:text-zinc-100">Welcome back, <span class="text-brand-500">{{ auth.user?.username }}</span></h1>
+          <p class="text-sm text-zinc-500 mt-0.5">Here's your fitness overview for today</p>
+        </div>
+        <span class="text-xs font-medium text-zinc-500 hidden sm:block">{{ currentDate }}</span>
+      </div>
+
+      <!-- Stat Cards Row -->
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
+        <div class="card p-3">
+          <p class="text-xs font-medium uppercase tracking-wider text-zinc-500">Total Rides</p>
+          <p class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mt-0.5">{{ stats.totalRides }}</p>
+        </div>
+        <div class="card p-3">
+          <p class="text-xs font-medium uppercase tracking-wider text-zinc-500">Total Distance</p>
+          <p class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mt-0.5">{{ stats.totalDistance }}</p>
+        </div>
+        <div class="card p-3">
+          <p class="text-xs font-medium uppercase tracking-wider text-zinc-500">Total Time</p>
+          <p class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mt-0.5">{{ stats.totalTime }}</p>
+        </div>
+        <div class="card p-3">
+          <p class="text-xs font-medium uppercase tracking-wider text-zinc-500">Elevation Gain</p>
+          <p class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mt-0.5">{{ stats.elevationGain }}</p>
+        </div>
+      </div>
+
+      <!-- Main Grid -->
+      <div class="grid grid-cols-1 lg:grid-cols-3 gap-3 mb-4">
+        <!-- Activity Chart (2/3) -->
+        <div class="lg:col-span-2 card p-4">
+          <div class="flex items-center justify-between mb-3">
+            <h3 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">Activity Overview</h3>
+            <div class="inline-flex bg-zinc-100 dark:bg-zinc-800 rounded-md p-0.5">
+              <button class="px-2.5 py-1 text-xs font-medium rounded transition-colors cursor-pointer" :class="activePeriod === 'week' ? 'bg-white dark:bg-zinc-700 text-zinc-900 dark:text-zinc-100 shadow-sm' : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'" @click="activePeriod = 'week'">Week</button>
+              <button class="px-2.5 py-1 text-xs font-medium rounded transition-colors cursor-pointer" :class="activePeriod === 'month' ? 'bg-white dark:bg-zinc-700 text-zinc-900 dark:text-zinc-100 shadow-sm' : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'" @click="activePeriod = 'month'">Month</button>
+            </div>
+          </div>
+          <div class="h-40 flex items-center justify-center">
+            <div class="text-center text-zinc-400">
+              <svg class="w-8 h-8 mx-auto mb-2 opacity-50" viewBox="0 0 24 24" fill="none"><path d="M22 12H18L15 21L9 3L6 12H2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+              <p class="text-xs">No activity data yet</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Next Workout (1/3) -->
+        <div class="card p-4">
+          <h3 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100 mb-3">Next Workout</h3>
+          <div v-if="nextWorkout" class="flex flex-col gap-2">
+            <p class="text-xs text-zinc-500">{{ formatNextWorkoutTime(nextWorkout) }}</p>
+            <p class="text-base font-semibold text-zinc-900 dark:text-zinc-100">{{ nextWorkout.title }}</p>
+            <p class="text-xs font-medium text-brand-500">{{ nextWorkout.type }}</p>
+            <RouterLink to="/calendar" class="text-xs font-medium text-brand-500 hover:text-brand-600 no-underline mt-1">View Details →</RouterLink>
+          </div>
+          <div v-else class="text-center py-4">
+            <p class="text-xs text-zinc-400 mb-2">No upcoming workouts</p>
+            <RouterLink to="/calendar" class="btn-primary text-xs px-3 py-1.5 no-underline">Schedule One</RouterLink>
+          </div>
+
+          <!-- Today's Progress -->
+          <div class="mt-4 pt-3 border-t border-zinc-200 dark:border-zinc-800">
+            <div class="flex items-center justify-between mb-1.5">
+              <span class="text-xs font-medium text-zinc-500">Today's Goal</span>
+              <span class="text-xs font-bold text-brand-500">{{ todayProgress }}%</span>
+            </div>
+            <div class="w-full h-1.5 bg-zinc-200 dark:bg-zinc-700 rounded-full overflow-hidden">
+              <div class="h-full bg-brand-500 rounded-full transition-all" :style="{ width: todayProgress + '%' }"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Recent Workouts -->
+      <div class="card">
+        <div class="flex items-center justify-between px-4 py-3 border-b border-zinc-200 dark:border-zinc-800">
+          <h3 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">Recent Workouts</h3>
+          <RouterLink to="/calendar" class="text-xs font-medium text-brand-500 hover:text-brand-600 no-underline">View All →</RouterLink>
+        </div>
+        <div v-if="recentWorkouts.length > 0">
+          <div v-for="workout in recentWorkouts.slice(0, 5)" :key="workout.id" class="flex items-center gap-3 px-4 py-2.5 border-b border-zinc-100 dark:border-zinc-800/50 last:border-0 hover:bg-zinc-50 dark:hover:bg-zinc-800/30 cursor-pointer transition-colors" @click="selectedWorkout = workout">
+            <span class="text-lg shrink-0">{{ getWorkoutEmoji(workout.type) }}</span>
+            <div class="flex-1 min-w-0">
+              <p class="text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate">{{ workout.title }}</p>
+              <p class="text-xs text-zinc-500">{{ formatWorkoutDate(workout.scheduled_date) }}<span v-if="workout.duration" class="ml-1.5 text-zinc-400">· {{ workout.duration }}min</span></p>
+            </div>
+            <span class="text-xs font-medium px-2 py-0.5 rounded-full capitalize shrink-0" :class="{
+              'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400': workout.status === 'planned',
+              'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400': workout.status === 'completed',
+              'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400': workout.status === 'skipped'
+            }">{{ workout.status }}</span>
+          </div>
+        </div>
+        <div v-else class="py-8 text-center">
+          <p class="text-sm text-zinc-400">No workouts yet. Schedule your first one!</p>
+        </div>
+      </div>
+
+      <!-- Quick Actions -->
+      <div class="flex flex-wrap gap-2 mt-4">
+        <RouterLink to="/calendar" class="btn-secondary text-xs gap-1.5 no-underline">
+          <svg class="w-3.5 h-3.5" 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" 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>
+          Plan Workout
+        </RouterLink>
+        <RouterLink to="/equipment" class="btn-secondary text-xs gap-1.5 no-underline">
+          <svg class="w-3.5 h-3.5" 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>
+          Manage Gear
+        </RouterLink>
+        <RouterLink to="/zones" class="btn-secondary text-xs gap-1.5 no-underline">
+          <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none"><path d="M22 12H18L15 21L9 3L6 12H2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          Training Zones
+        </RouterLink>
+      </div>
+    </div>
+
+    <!-- Workout Detail Modal -->
+    <WorkoutDetail v-if="selectedWorkout" :workout="selectedWorkout" @close="selectedWorkout = null" @updated="handleWorkoutUpdated" @deleted="handleWorkoutDeleted" />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+import api from '@/services/api'
+import ModernNavbar from '@/components/ModernNavbar.vue'
+import WorkoutDetail from '@/components/WorkoutDetail.vue'
+
+const auth = useAuthStore()
+
+const activePeriod = ref('week')
+const todayProgress = ref(65)
+const selectedWorkout = ref(null)
+
+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 upcoming = 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 (upcoming.length > 0) {
+      nextWorkout.value = upcoming[0]
+    }
+  }
+}
+
+async function handleWorkoutUpdated() {
+  selectedWorkout.value = null
+  await loadRecentWorkouts()
+  loadNextWorkout()
+}
+
+async function handleWorkoutDeleted() {
+  selectedWorkout.value = null
+  await loadRecentWorkouts()
+  loadNextWorkout()
+}
+
+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'
+  if (date.toDateString() === yesterday.toDateString()) return 'Yesterday'
+  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>
diff --git a/src/views/UserEquipment.vue b/src/views/UserEquipment.vue
new file mode 100644
index 0000000..8bd7ab3
--- /dev/null
+++ b/src/views/UserEquipment.vue
@@ -0,0 +1,477 @@
+<template>
+  <div class="min-h-screen bg-zinc-50 dark:bg-surface-950">
+    <!-- Use the shared navbar -->
+    <ModernNavbar />
+
+    <div class="max-w-7xl mx-auto pt-16 px-4 pb-6">
+      <!-- Page Header -->
+      <div class="flex items-start justify-between mb-4 gap-3">
+        <div>
+          <h2 class="text-lg font-bold text-zinc-900 dark:text-zinc-100">Equipment Management</h2>
+          <p class="text-sm text-zinc-500 mt-0.5">Track and manage your bikes, shoes, and gear</p>
+        </div>
+        <button @click="showAddForm = true" class="btn-primary gap-1.5 whitespace-nowrap">
+          <svg class="w-4 h-4" 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 Modal -->
+      <div v-if="showAddForm" class="modal-overlay" @click.self="closeModal">
+        <div class="modal-panel max-w-xl">
+          <div class="flex items-center justify-between px-4 py-3 border-b border-zinc-200 dark:border-zinc-700">
+            <h3 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">Add New Equipment</h3>
+            <button @click="closeModal" class="p-1.5 rounded-md text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors">
+              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none">
+                <line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                <line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              </svg>
+            </button>
+          </div>
+
+          <form @submit.prevent="handleAddEquipment" class="p-4 flex flex-col gap-3">
+            <div class="flex flex-col gap-1">
+              <label class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Equipment Name *</label>
+              <input
+                v-model="newEquipment.name"
+                type="text"
+                placeholder="e.g., Trek FX 3"
+                required
+                class="input-field"
+              />
+            </div>
+
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              <div class="flex flex-col gap-1">
+                <label class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Type *</label>
+                <select v-model="newEquipment.type" required class="input-field">
+                  <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="flex flex-col gap-1">
+                <label class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Condition</label>
+                <select v-model="newEquipment.condition" class="input-field">
+                  <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="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              <div class="flex flex-col gap-1">
+                <label class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Brand</label>
+                <input v-model="newEquipment.brand" type="text" placeholder="e.g., Trek" class="input-field" />
+              </div>
+              <div class="flex flex-col gap-1">
+                <label class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Model</label>
+                <input v-model="newEquipment.model" type="text" placeholder="e.g., FX 3" class="input-field" />
+              </div>
+            </div>
+
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              <div class="flex flex-col gap-1">
+                <label class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Weight (grams)</label>
+                <input v-model.number="newEquipment.weight" type="number" step="0.1" placeholder="0" class="input-field" />
+              </div>
+              <div class="flex flex-col gap-1">
+                <label class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Purchase Date</label>
+                <input v-model="newEquipment.purchase_date" type="date" class="input-field" />
+              </div>
+            </div>
+
+            <div class="flex flex-col gap-1">
+              <label class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Notes</label>
+              <textarea
+                v-model="newEquipment.notes"
+                placeholder="Additional details about this equipment..."
+                rows="3"
+                class="input-field resize-y"
+              ></textarea>
+            </div>
+
+            <div class="flex gap-2 justify-end pt-2 border-t border-zinc-200 dark:border-zinc-700">
+              <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="flex items-center gap-2 mx-4 mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 rounded-lg text-sm">
+            <svg class="w-4 h-4 shrink-0" 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 Grid -->
+      <div v-if="equipment.length > 0" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+        <div
+          v-for="item in equipment"
+          :key="item.id"
+          class="card"
+        >
+          <div v-if="editingId !== item.id" class="p-3">
+            <div class="flex items-start justify-between gap-2 mb-2">
+              <div class="min-w-0">
+                <h4 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100 truncate">{{ item.name }}</h4>
+                <p class="text-xs text-zinc-400 dark:text-zinc-500 mt-0.5">{{ item.brand }} {{ item.model }}</p>
+              </div>
+              <span class="text-xs font-medium px-2 py-0.5 rounded-full whitespace-nowrap shrink-0" :class="{
+                'bg-brand-100 dark:bg-brand-500/20 text-brand-600 dark:text-brand-400': item.type === 'bike',
+                'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400': item.type === 'shoes',
+                'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400': item.type === 'helmet',
+                'bg-cyan-100 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-400': item.type === 'wetsuit',
+                'bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-400': item.type === 'other'
+              }">
+                {{ formatEquipmentType(item.type) }}
+              </span>
+            </div>
+
+            <div class="flex flex-col gap-1.5 mb-2">
+              <div v-if="item.weight" class="flex items-center gap-1.5 text-xs text-zinc-500 dark:text-zinc-400">
+                <svg class="w-4 h-4 text-brand-500 shrink-0" 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="flex items-center gap-1.5 text-xs text-zinc-500 dark:text-zinc-400">
+                <svg class="w-4 h-4 text-brand-500 shrink-0" 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="text-xs font-medium px-1.5 py-0.5 rounded capitalize" :class="{
+                  'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400': item.condition === 'new' || item.condition === 'excellent',
+                  'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400': item.condition === 'good',
+                  'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400': item.condition === 'fair',
+                  'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400': item.condition === 'worn'
+                }">{{ item.condition }}</span>
+              </div>
+              <div v-if="item.purchase_date" class="flex items-center gap-1.5 text-xs text-zinc-500 dark:text-zinc-400">
+                <svg class="w-4 h-4 text-brand-500 shrink-0" 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="mt-1 p-2 bg-zinc-50 dark:bg-zinc-800/50 rounded border-l-2 border-brand-500 text-xs text-zinc-500 dark:text-zinc-400">
+                {{ item.notes }}
+              </div>
+            </div>
+
+            <!-- Usage Stats -->
+            <div v-if="getStats(item.id)" class="flex gap-3 p-2 bg-brand-50 dark:bg-brand-500/10 border border-brand-200 dark:border-brand-500/20 rounded-lg mb-2">
+              <div class="flex items-center gap-1 text-xs font-medium text-zinc-600 dark:text-zinc-400">
+                <svg class="w-4 h-4 text-brand-500 shrink-0" 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>
+                <span>{{ getStats(item.id).total_rides }} rides</span>
+              </div>
+              <div class="flex items-center gap-1 text-xs font-medium text-zinc-600 dark:text-zinc-400">
+                <svg class="w-4 h-4 text-brand-500 shrink-0" 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>
+                <span>{{ getStats(item.id).total_distance.toFixed(1) }} km</span>
+              </div>
+              <div class="flex items-center gap-1 text-xs font-medium text-zinc-600 dark:text-zinc-400">
+                <svg class="w-4 h-4 text-brand-500 shrink-0" 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>
+                <span>{{ formatDuration(getStats(item.id).total_duration) }}</span>
+              </div>
+            </div>
+
+            <div class="flex gap-2">
+              <button @click="startEdit(item)" class="btn-secondary flex-1 gap-1">
+                <svg class="w-4 h-4" 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 flex-1 gap-1">
+                <svg class="w-4 h-4" 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 -->
+          <form v-else @submit.prevent="handleUpdateEquipment(item.id)" class="p-3 flex flex-col gap-3">
+            <div class="flex flex-col gap-1">
+              <label class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Equipment Name</label>
+              <input v-model="editForm.name" type="text" class="input-field" />
+            </div>
+
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              <div class="flex flex-col gap-1">
+                <label class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Brand</label>
+                <input v-model="editForm.brand" type="text" class="input-field" />
+              </div>
+              <div class="flex flex-col gap-1">
+                <label class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Model</label>
+                <input v-model="editForm.model" type="text" class="input-field" />
+              </div>
+            </div>
+
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              <div class="flex flex-col gap-1">
+                <label class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Weight (grams)</label>
+                <input v-model.number="editForm.weight" type="number" step="0.1" class="input-field" />
+              </div>
+              <div class="flex flex-col gap-1">
+                <label class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Condition</label>
+                <select v-model="editForm.condition" class="input-field">
+                  <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="flex flex-col gap-1">
+              <label class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Notes</label>
+              <textarea v-model="editForm.notes" rows="2" class="input-field resize-y"></textarea>
+            </div>
+
+            <div class="flex gap-2 justify-end pt-2 border-t border-zinc-200 dark:border-zinc-700">
+              <button type="button" @click="editingId = null" class="btn-secondary">
+                Cancel
+              </button>
+              <button type="submit" class="btn-primary">
+                Save Changes
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <!-- Empty State -->
+      <div v-else class="card text-center py-12 px-6">
+        <div class="w-16 h-16 mx-auto mb-4 p-3 bg-zinc-100 dark:bg-zinc-800 rounded-full flex items-center justify-center text-zinc-400 dark:text-zinc-500">
+          <svg class="w-full h-full" 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 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100 mb-1">No Equipment Yet</h3>
+        <p class="text-xs text-zinc-400 dark:text-zinc-500 mb-4">Start tracking your bikes, shoes, and gear to optimize your training</p>
+        <button @click="showAddForm = true" class="btn-primary gap-1.5">
+          <svg class="w-4 h-4" 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 (toast) -->
+      <div v-if="successMessage" @click="successMessage = ''" class="fixed bottom-4 right-4 z-50 flex items-center gap-2 px-3 py-2 bg-green-600 text-white text-sm font-medium rounded-lg shadow-lg cursor-pointer">
+        <svg class="w-4 h-4 shrink-0" 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 (toast) -->
+      <div v-if="generalError" @click="generalError = ''" class="fixed bottom-4 right-4 z-50 flex items-center gap-2 px-3 py-2 bg-red-600 text-white text-sm font-medium rounded-lg shadow-lg cursor-pointer">
+        <svg class="w-4 h-4 shrink-0" 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>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import api from '@/services/api'
+import ModernNavbar from '@/components/ModernNavbar.vue'
+
+const equipment = ref([])
+const showAddForm = ref(false)
+const editingId = ref(null)
+const loading = ref(false)
+const error = ref('')
+const successMessage = ref('')
+const generalError = ref('')
+const equipmentStats = ref({})
+
+const newEquipment = ref({
+  name: '',
+  type: '',
+  brand: '',
+  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 (err) {
+    console.error('Failed to load equipment:', err)
+    generalError.value = 'Failed to load equipment'
+  }
+
+  try {
+    const { data } = await api.get('/api/protected/workouts/equipment-stats')
+    const statsMap = {}
+    for (const stat of (data || [])) {
+      statsMap[stat.equipment_id] = stat
+    }
+    equipmentStats.value = statsMap
+  } catch (err) {
+    console.error('Failed to load equipment stats:', err)
+  }
+})
+
+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: '',
+      condition: '',
+      purchase_date: ''
+    }
+    showAddForm.value = false
+    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
+  }
+}
+
+async function handleUpdateEquipment(id) {
+  try {
+    const { data } = await api.put(`/api/protected/equipment?id=${id}`, editForm.value)
+    const index = equipment.value.findIndex(e => e.id === id)
+    if (index !== -1) {
+      equipment.value[index] = data
+    }
+    editingId.value = null
+    successMessage.value = 'Equipment updated successfully!'
+    setTimeout(() => {
+      successMessage.value = ''
+    }, 3000)
+  } catch (err) {
+    console.error('Failed to update equipment:', err)
+    generalError.value = 'Failed to update equipment'
+  }
+}
+
+async function handleDeleteEquipment(id) {
+  if (confirm('Are you sure you want to delete this equipment?')) {
+    try {
+      await api.delete(`/api/protected/equipment?id=${id}`)
+      equipment.value = equipment.value.filter(e => e.id !== id)
+      successMessage.value = 'Equipment deleted successfully!'
+      setTimeout(() => {
+        successMessage.value = ''
+      }, 3000)
+    } catch (err) {
+      console.error('Failed to delete equipment:', err)
+      generalError.value = 'Failed to delete equipment'
+    }
+  }
+}
+
+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'
+  })
+}
+
+function getStats(equipmentId) {
+  return equipmentStats.value[equipmentId] || null
+}
+
+function formatDuration(minutes) {
+  const hours = Math.floor(minutes / 60)
+  const mins = minutes % 60
+  if (hours > 0) return `${hours}h ${mins}m`
+  return `${mins}m`
+}
+</script>
diff --git a/src/views/UserLogin.vue b/src/views/UserLogin.vue
new file mode 100644
index 0000000..d266d41
--- /dev/null
+++ b/src/views/UserLogin.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="min-h-screen flex items-center justify-center bg-zinc-100 dark:bg-surface-950 p-4">
+    <div class="w-full max-w-sm card p-6">
+      <div class="text-center mb-6">
+        <h1 class="text-xl font-bold text-zinc-900 dark:text-zinc-100">Welcome Back</h1>
+        <p class="text-sm text-zinc-500 mt-1">Sign in to your RideAware account</p>
+      </div>
+
+      <form @submit.prevent="handleLogin" class="flex flex-col gap-3">
+        <div>
+          <label for="username" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">Username</label>
+          <input id="username" v-model="form.username" type="text" placeholder="Enter your username" required :disabled="auth.loading" autocomplete="username" class="input-field" />
+        </div>
+
+        <div>
+          <label for="password" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">Password</label>
+          <div class="relative">
+            <input id="password" v-model="form.password" :type="showPassword ? 'text' : 'password'" placeholder="Enter your password" required :disabled="auth.loading" autocomplete="current-password" class="input-field pr-10" />
+            <button type="button" @click="showPassword = !showPassword" class="absolute right-2.5 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 bg-transparent border-none cursor-pointer p-0.5" :title="showPassword ? 'Hide password' : 'Show password'">
+              <svg v-if="showPassword" class="w-4 h-4" 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 class="w-4 h-4" 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>
+
+        <div class="flex items-center justify-between text-sm">
+          <label class="flex items-center gap-1.5 text-zinc-600 dark:text-zinc-400 cursor-pointer select-none">
+            <input v-model="rememberMe" type="checkbox" class="accent-brand-500 w-auto p-0 m-0 cursor-pointer" />
+            <span>Remember me</span>
+          </label>
+          <RouterLink to="/password-reset" class="text-brand-500 hover:text-brand-600 font-medium no-underline">Forgot password?</RouterLink>
+        </div>
+
+        <button type="submit" :disabled="auth.loading" class="btn-primary w-full mt-1">
+          <span v-if="auth.loading" class="flex items-center gap-2">
+            <svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" opacity="0.25"/><path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="4" fill="none" stroke-linecap="round"/></svg>
+            Logging in...
+          </span>
+          <span v-else>Login</span>
+        </button>
+      </form>
+
+      <div v-if="auth.error" class="flex items-start gap-2.5 p-3 mt-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800/50 rounded-lg text-sm">
+        <svg class="w-4 h-4 text-red-500 shrink-0 mt-0.5" 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="font-semibold text-red-700 dark:text-red-400">Login Failed</p>
+          <p class="text-red-600 dark:text-red-400/80 mt-0.5">{{ auth.error }}</p>
+        </div>
+      </div>
+
+      <div class="relative my-4">
+        <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-zinc-200 dark:border-zinc-700"></div></div>
+        <div class="relative flex justify-center text-xs"><span class="px-2 bg-white dark:bg-surface-900 text-zinc-400">Or</span></div>
+      </div>
+
+      <div class="text-center text-sm">
+        <p class="text-zinc-500">Don't have an account?</p>
+        <RouterLink to="/signup" class="text-brand-500 hover:text-brand-600 font-semibold no-underline mt-1 inline-block">Sign up now</RouterLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+const router = useRouter()
+const auth = useAuthStore()
+
+const showPassword = ref(false)
+const rememberMe = ref(false)
+
+const form = reactive({
+  username: '',
+  password: ''
+})
+
+async function handleLogin() {
+  try {
+    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)
+  }
+}
+</script>
diff --git a/src/views/UserProfile.vue b/src/views/UserProfile.vue
new file mode 100644
index 0000000..d99cef2
--- /dev/null
+++ b/src/views/UserProfile.vue
@@ -0,0 +1,288 @@
+<template>
+  <div class="min-h-screen bg-zinc-50 dark:bg-surface-950">
+    <!-- Use the shared navbar -->
+    <ModernNavbar />
+
+    <!-- Profile Content -->
+    <div class="max-w-4xl mx-auto pt-20 px-4 sm:px-6 pb-6">
+      <!-- Page Header -->
+      <div class="mb-5">
+        <h2 class="text-lg font-bold text-zinc-900 dark:text-zinc-100">Profile Settings</h2>
+        <p class="text-sm text-zinc-500 dark:text-zinc-400 mt-0.5">Manage your personal information and training metrics</p>
+      </div>
+
+      <!-- Profile Tabs -->
+      <div class="inline-flex bg-zinc-100 dark:bg-zinc-800 rounded-lg p-0.5 mb-5">
+        <button
+          v-for="tab in tabs"
+          :key="tab.id"
+          :class="[
+            'inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md cursor-pointer',
+            activeTab === tab.id
+              ? 'bg-white dark:bg-zinc-700 shadow-sm text-zinc-900 dark:text-zinc-100'
+              : 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300'
+          ]"
+          @click="activeTab = tab.id"
+        >
+          <svg v-if="tab.id === 'personal'" class="w-4 h-4" 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 class="w-4 h-4" 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'">
+        <form @submit.prevent="handleUpdateProfile" class="card p-4 sm:p-5 flex flex-col gap-4">
+          <div class="flex flex-col gap-3">
+            <h3 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">Personal Information</h3>
+
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              <div class="flex flex-col gap-1">
+                <label class="text-xs font-medium text-zinc-500 dark:text-zinc-400">First Name</label>
+                <input v-model="form.first_name" type="text" placeholder="Your first name" class="input-field" />
+              </div>
+              <div class="flex flex-col gap-1">
+                <label class="text-xs font-medium text-zinc-500 dark:text-zinc-400">Last Name</label>
+                <input v-model="form.last_name" type="text" placeholder="Your last name" class="input-field" />
+              </div>
+            </div>
+
+            <div class="flex flex-col gap-1">
+              <label class="text-xs font-medium text-zinc-500 dark:text-zinc-400">Bio</label>
+              <textarea
+                v-model="form.bio"
+                placeholder="Tell us about yourself..."
+                rows="3"
+                class="input-field resize-y min-h-[80px]"
+              ></textarea>
+            </div>
+
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              <div class="flex flex-col gap-1">
+                <label class="text-xs font-medium text-zinc-500 dark:text-zinc-400">Email</label>
+                <input v-model="form.email" type="email" disabled class="input-field opacity-50 cursor-not-allowed" />
+                <small class="text-xs text-zinc-400 dark:text-zinc-500">Email cannot be changed</small>
+              </div>
+              <div class="flex flex-col gap-1">
+                <label class="text-xs font-medium text-zinc-500 dark:text-zinc-400">Weight (kg)</label>
+                <input v-model.number="form.weight" type="number" step="0.1" placeholder="0" class="input-field" />
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-end pt-3 border-t border-zinc-200 dark:border-zinc-800">
+            <button type="submit" :disabled="loading" class="btn-primary gap-1.5">
+              <span v-if="loading" class="inline-flex items-center gap-1.5">
+                <svg class="w-4 h-4 animate-spin" 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>
+        </form>
+      </div>
+
+      <!-- Training Metrics Tab -->
+      <div v-if="activeTab === 'metrics'">
+        <form @submit.prevent="handleUpdateProfile" class="card p-4 sm:p-5 flex flex-col gap-4">
+          <div class="flex flex-col gap-3">
+            <div>
+              <h3 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">Training Metrics</h3>
+              <p class="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5">These metrics are used to calculate your training zones</p>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-3 mt-1">
+              <!-- FTP Card -->
+              <div class="card p-3 flex flex-col gap-2">
+                <div class="flex items-center gap-2">
+                  <svg class="w-4 h-4 text-brand-500" 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>
+                  <label class="text-xs font-medium text-zinc-500 dark:text-zinc-400">Functional Threshold Power (FTP)</label>
+                </div>
+                <input v-model.number="form.ftp" type="number" step="1" placeholder="0" class="input-field" />
+                <small class="text-xs text-zinc-400 dark:text-zinc-500">Average power (watts) for a 20-min max effort</small>
+              </div>
+
+              <!-- Max HR Card -->
+              <div class="card p-3 flex flex-col gap-2">
+                <div class="flex items-center gap-2">
+                  <svg class="w-4 h-4 text-amber-500" 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>
+                  <label class="text-xs font-medium text-zinc-500 dark:text-zinc-400">Maximum Heart Rate</label>
+                </div>
+                <input v-model.number="form.max_hr" type="number" step="1" placeholder="0" class="input-field" />
+                <small class="text-xs text-zinc-400 dark:text-zinc-500">Max BPM during intense effort</small>
+              </div>
+
+              <!-- Resting HR Card -->
+              <div class="card p-3 flex flex-col gap-2">
+                <div class="flex items-center gap-2">
+                  <svg class="w-4 h-4 text-emerald-500" 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>
+                  <label class="text-xs font-medium text-zinc-500 dark:text-zinc-400">Resting Heart Rate</label>
+                </div>
+                <input v-model.number="form.resting_hr" type="number" step="1" placeholder="0" class="input-field" />
+                <small class="text-xs text-zinc-400 dark:text-zinc-500">Heart rate when you first wake up</small>
+              </div>
+            </div>
+          </div>
+
+          <!-- Info Box -->
+          <div class="flex gap-2.5 p-3 bg-brand-50 dark:bg-brand-500/5 border border-brand-100 dark:border-brand-500/10 rounded-lg">
+            <svg class="w-4 h-4 text-brand-500 flex-shrink-0 mt-0.5" 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 class="text-xs text-zinc-600 dark:text-zinc-400 leading-relaxed space-y-1.5">
+              <p><span class="font-semibold text-zinc-900 dark:text-zinc-200">How to test your FTP:</span> Perform a 20-minute max effort on the bike with a power meter, then subtract 5% from the average power.</p>
+              <p><span class="font-semibold text-zinc-900 dark:text-zinc-200">How to find your Max HR:</span> Do a very hard 5-minute effort followed by 3-minute sprint intervals while monitoring your heart rate.</p>
+            </div>
+          </div>
+
+          <div class="flex justify-end pt-3 border-t border-zinc-200 dark:border-zinc-800">
+            <button type="submit" :disabled="loading" class="btn-primary gap-1.5">
+              <span v-if="loading" class="inline-flex items-center gap-1.5">
+                <svg class="w-4 h-4 animate-spin" 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="fixed bottom-4 right-4 z-50 flex items-center gap-2 px-3 py-2.5 bg-green-50 dark:bg-green-900/30 text-green-800 dark:text-green-300 border border-green-200 dark:border-green-800 rounded-lg shadow-sm text-sm cursor-pointer"
+        @click="successMessage = ''"
+      >
+        <svg class="w-4 h-4 flex-shrink-0" 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="fixed bottom-4 right-4 z-50 flex items-center gap-2 px-3 py-2.5 bg-red-50 dark:bg-red-900/30 text-red-800 dark:text-red-300 border border-red-200 dark:border-red-800 rounded-lg shadow-sm text-sm cursor-pointer"
+        @click="error = ''"
+      >
+        <svg class="w-4 h-4 flex-shrink-0" 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>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+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
+})
+
+onMounted(async () => {
+  try {
+    const { data } = await api.get('/api/protected/profile')
+    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
+      }
+    }
+  } catch (err) {
+    console.error('Failed to load profile:', err)
+    error.value = 'Failed to load profile'
+  }
+})
+
+async function handleUpdateProfile() {
+  loading.value = true
+  error.value = ''
+  successMessage.value = ''
+
+  try {
+    const { data } = await api.put('/api/protected/profile', {
+      first_name: form.value.first_name,
+      last_name: form.value.last_name,
+      bio: form.value.bio,
+      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
+    })
+
+    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
+      }
+    }
+
+    successMessage.value = 'Profile updated successfully!'
+    setTimeout(() => {
+      successMessage.value = ''
+    }, 4000)
+  } catch (err) {
+    console.error('Failed to update profile:', err)
+    error.value = err.response?.data?.error || 'Failed to update profile'
+  } finally {
+    loading.value = false
+  }
+}
+</script>
diff --git a/src/views/UserSignup.vue b/src/views/UserSignup.vue
new file mode 100644
index 0000000..9c02867
--- /dev/null
+++ b/src/views/UserSignup.vue
@@ -0,0 +1,170 @@
+<template>
+  <div class="min-h-screen flex items-center justify-center bg-zinc-100 dark:bg-surface-950 p-4">
+    <div class="w-full max-w-md card p-6 max-h-[90vh] overflow-y-auto">
+      <div class="text-center mb-5">
+        <h1 class="text-xl font-bold text-zinc-900 dark:text-zinc-100">Join RideAware</h1>
+        <p class="text-sm text-zinc-500 mt-1">Create your training account</p>
+      </div>
+
+      <form @submit.prevent="handleSignup" class="flex flex-col gap-3">
+        <div>
+          <label for="username" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">Username *</label>
+          <input id="username" v-model="form.username" type="text" placeholder="Choose your username" required :disabled="auth.loading" autocomplete="username" class="input-field" />
+        </div>
+
+        <div>
+          <label for="email" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">Email *</label>
+          <input id="email" v-model="form.email" type="email" placeholder="your@email.com" required :disabled="auth.loading" autocomplete="email" class="input-field" />
+        </div>
+
+        <div class="grid grid-cols-2 gap-3">
+          <div>
+            <label for="firstName" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">First Name</label>
+            <input id="firstName" v-model="form.firstName" type="text" placeholder="John" :disabled="auth.loading" autocomplete="given-name" class="input-field" />
+          </div>
+          <div>
+            <label for="lastName" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">Last Name</label>
+            <input id="lastName" v-model="form.lastName" type="text" placeholder="Doe" :disabled="auth.loading" autocomplete="family-name" class="input-field" />
+          </div>
+        </div>
+
+        <div>
+          <label for="password" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">Password *</label>
+          <div class="relative">
+            <input id="password" v-model="form.password" :type="showPassword ? 'text' : 'password'" placeholder="At least 8 characters" required :disabled="auth.loading" autocomplete="new-password" class="input-field pr-10" />
+            <button type="button" @click="showPassword = !showPassword" class="absolute right-2.5 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 bg-transparent border-none cursor-pointer p-0.5">
+              <svg v-if="showPassword" class="w-4 h-4" 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 class="w-4 h-4" 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 v-if="form.password" class="mt-1.5">
+            <div class="w-full h-0.5 bg-zinc-200 dark:bg-zinc-700 rounded-full overflow-hidden">
+              <div class="h-full rounded-full transition-all" :class="strengthBarClass" :style="{ width: getPasswordStrength(form.password).width }"></div>
+            </div>
+            <p class="text-xs font-medium mt-1" :class="strengthTextClass">{{ getPasswordStrength(form.password).text }}</p>
+          </div>
+        </div>
+
+        <div>
+          <label for="confirmPassword" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">Confirm Password *</label>
+          <div class="relative">
+            <input id="confirmPassword" v-model="form.confirmPassword" :type="showConfirmPassword ? 'text' : 'password'" placeholder="Confirm your password" required :disabled="auth.loading" autocomplete="new-password" class="input-field pr-10" />
+            <button type="button" @click="showConfirmPassword = !showConfirmPassword" class="absolute right-2.5 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 bg-transparent border-none cursor-pointer p-0.5">
+              <svg v-if="showConfirmPassword" class="w-4 h-4" 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 class="w-4 h-4" 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>
+          <p v-if="form.password && form.confirmPassword && form.password !== form.confirmPassword" class="text-xs text-red-500 mt-1">Passwords do not match</p>
+        </div>
+
+        <label class="flex items-start gap-2 text-xs text-zinc-600 dark:text-zinc-400 cursor-pointer select-none">
+          <input id="terms" v-model="agreedToTerms" type="checkbox" required class="accent-brand-500 mt-0.5 w-auto p-0 cursor-pointer" />
+          <span>I agree to the <a href="#" @click.prevent class="text-brand-500 hover:text-brand-600 font-medium no-underline">Terms of Service</a> and <a href="#" @click.prevent class="text-brand-500 hover:text-brand-600 font-medium no-underline">Privacy Policy</a></span>
+        </label>
+
+        <button type="submit" :disabled="!isFormValid || auth.loading" class="btn-primary w-full mt-1">
+          <span v-if="auth.loading" class="flex items-center gap-2">
+            <svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" opacity="0.25"/><path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="4" fill="none" stroke-linecap="round"/></svg>
+            Creating account...
+          </span>
+          <span v-else>Create Account</span>
+        </button>
+      </form>
+
+      <div v-if="auth.error" class="flex items-start gap-2.5 p-3 mt-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800/50 rounded-lg text-sm">
+        <svg class="w-4 h-4 text-red-500 shrink-0 mt-0.5" 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="font-semibold text-red-700 dark:text-red-400">Signup Failed</p>
+          <p class="text-red-600 dark:text-red-400/80 mt-0.5">{{ auth.error }}</p>
+        </div>
+      </div>
+
+      <div class="relative my-4">
+        <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-zinc-200 dark:border-zinc-700"></div></div>
+        <div class="relative flex justify-center text-xs"><span class="px-2 bg-white dark:bg-surface-900 text-zinc-400">Or</span></div>
+      </div>
+
+      <div class="text-center text-sm">
+        <p class="text-zinc-500">Already have an account?</p>
+        <RouterLink to="/login" class="text-brand-500 hover:text-brand-600 font-semibold no-underline mt-1 inline-block">Login here</RouterLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+const router = useRouter()
+const auth = useAuthStore()
+
+const showPassword = ref(false)
+const showConfirmPassword = ref(false)
+const agreedToTerms = ref(false)
+
+const form = reactive({
+  username: '',
+  email: '',
+  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%', level: '' }
+  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%', level: 'weak' }
+  if (strength <= 3) return { text: 'Fair', width: '66%', level: 'fair' }
+  if (strength <= 4) return { text: 'Good', width: '83%', level: 'good' }
+  return { text: 'Strong', width: '100%', level: 'strong' }
+}
+
+const strengthBarClass = computed(() => {
+  const level = getPasswordStrength(form.password).level
+  return {
+    'bg-red-500': level === 'weak',
+    'bg-amber-500': level === 'fair',
+    'bg-blue-500': level === 'good',
+    'bg-green-500': level === 'strong',
+  }
+})
+
+const strengthTextClass = computed(() => {
+  const level = getPasswordStrength(form.password).level
+  return {
+    'text-red-500': level === 'weak',
+    'text-amber-500': level === 'fair',
+    'text-blue-500': level === 'good',
+    'text-green-500': level === 'strong',
+  }
+})
+
+async function handleSignup() {
+  if (!isFormValid.value) return
+  try {
+    await auth.signup(form.username, form.password, form.email, form.firstName, form.lastName)
+    router.push('/dashboard')
+  } catch (error) {
+    console.error('Signup error:', error)
+  }
+}
+</script>
diff --git a/src/views/WorkoutCalendar.vue b/src/views/WorkoutCalendar.vue
new file mode 100644
index 0000000..475a24c
--- /dev/null
+++ b/src/views/WorkoutCalendar.vue
@@ -0,0 +1,509 @@
+<template>
+  <div class="min-h-screen bg-surface-50 dark:bg-surface-950">
+    <ModernNavbar />
+
+    <div class="max-w-7xl mx-auto px-4 pt-20 pb-8">
+      <!-- Calendar Header -->
+      <div class="flex flex-wrap items-center justify-between gap-3 mb-5">
+        <h2 class="text-xl font-bold text-zinc-900 dark:text-zinc-100 m-0">Workout Calendar</h2>
+        <div class="flex flex-wrap items-center gap-2">
+          <button @click="previousMonth" class="btn-secondary text-xs px-3 py-1.5">
+            <svg class="w-4 h-4 mr-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
+            Prev
+          </button>
+          <span class="font-semibold text-sm text-zinc-900 dark:text-zinc-100 min-w-[140px] text-center">{{ monthYear }}</span>
+          <button @click="nextMonth" class="btn-secondary text-xs px-3 py-1.5">
+            Next
+            <svg class="w-4 h-4 ml-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>
+          </button>
+          <button @click="showAddWorkout = true" class="btn-primary text-xs px-3 py-1.5">
+            <svg class="w-4 h-4 mr-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/></svg>
+            Add Workout
+          </button>
+        </div>
+      </div>
+
+      <!-- Add Workout Modal -->
+      <div v-if="showAddWorkout" class="modal-overlay" @click.self="showAddWorkout = false">
+        <div class="modal-panel max-w-lg p-5">
+          <!-- Modal Header -->
+          <div class="flex items-center justify-between pb-3 mb-4 border-b border-zinc-200 dark:border-zinc-700">
+            <h3 class="text-base font-semibold text-zinc-900 dark:text-zinc-100 m-0">Add Workout</h3>
+            <button @click="showAddWorkout = false" class="w-7 h-7 flex items-center justify-center text-zinc-400 dark:text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-200 bg-transparent border-none cursor-pointer text-lg">
+              <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
+            </button>
+          </div>
+
+          <form @submit.prevent="handleAddWorkout" class="flex flex-col gap-3">
+            <!-- Title -->
+            <div class="flex flex-col gap-1">
+              <label class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Title *</label>
+              <input v-model="newWorkout.title" type="text" placeholder="e.g., Morning Ride" required class="input-field" />
+            </div>
+
+            <!-- Date + Type Row -->
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              <div class="flex flex-col gap-1">
+                <label class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Date *</label>
+                <input v-model="newWorkout.scheduled_date" type="date" required class="input-field" />
+              </div>
+              <div class="flex flex-col gap-1">
+                <label class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Type</label>
+                <select v-model="newWorkout.type" class="input-field">
+                  <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>
+
+            <!-- Duration + Equipment Row -->
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              <div class="flex flex-col gap-1">
+                <label class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Duration (minutes)</label>
+                <input v-model.number="newWorkout.duration" type="number" step="1" min="1" max="999" class="input-field" />
+              </div>
+              <div class="flex flex-col gap-1">
+                <label class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Equipment</label>
+                <select v-model="newWorkout.equipment_id" class="input-field">
+                  <option :value="null">No equipment</option>
+                  <option v-for="eq in equipmentList" :key="eq.id" :value="eq.id">
+                    {{ eq.name }}
+                  </option>
+                </select>
+              </div>
+            </div>
+
+            <!-- Description -->
+            <div class="flex flex-col gap-1">
+              <label class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Description</label>
+              <textarea v-model="newWorkout.description" placeholder="Workout details..." class="input-field min-h-[72px] resize-y"></textarea>
+            </div>
+
+            <!-- File Upload -->
+            <div class="flex flex-col gap-1">
+              <label class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Import Workout File (FIT/ZWO)</label>
+              <div class="relative">
+                <input
+                  @change="handleFileUpload"
+                  type="file"
+                  accept=".fit,.zwo"
+                  id="workout-file"
+                  class="hidden"
+                />
+                <label for="workout-file" class="flex items-center justify-center gap-2 py-4 px-3 border-2 border-dashed border-brand-400 dark:border-brand-500 rounded-lg bg-brand-50/50 dark:bg-brand-500/5 cursor-pointer hover:bg-brand-50 dark:hover:bg-brand-500/10 text-sm font-medium text-brand-600 dark:text-brand-400">
+                  <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none">
+                    <path d="M21 15V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    <polyline points="17 8 12 3 7 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    <line x1="12" y1="3" x2="12" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                  {{ uploadedFileName || 'Click to upload FIT or ZWO file' }}
+                </label>
+              </div>
+              <div v-if="fileParseError" class="mt-1 p-2 text-xs bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-400 rounded-lg">{{ fileParseError }}</div>
+              <div v-if="parsedFileData" class="mt-1 p-2 text-xs bg-brand-50 dark:bg-brand-500/10 border border-brand-200 dark:border-brand-500/20 rounded-lg text-brand-700 dark:text-brand-400">
+                <p class="my-0.5"><span class="font-bold text-zinc-900 dark:text-zinc-100">File parsed successfully!</span></p>
+                <p v-if="parsedFileData.title" class="my-0.5">Title: {{ parsedFileData.title }}</p>
+                <p v-if="parsedFileData.duration" class="my-0.5">Duration: {{ formatDuration(parsedFileData.duration) }}</p>
+                <p v-if="parsedFileData.segments" class="my-0.5">Segments: {{ parsedFileData.segments.length }}</p>
+              </div>
+            </div>
+
+            <!-- Form Actions -->
+            <div class="flex flex-col sm:flex-row gap-2 justify-end pt-3 border-t border-zinc-200 dark:border-zinc-700">
+              <button type="submit" :disabled="loading" class="btn-primary text-xs px-3 py-1.5">
+                {{ loading ? 'Adding...' : 'Add Workout' }}
+              </button>
+              <button type="button" @click="resetForm" class="btn-secondary text-xs px-3 py-1.5">
+                Reset
+              </button>
+              <button type="button" @click="showAddWorkout = false" class="btn-secondary text-xs px-3 py-1.5">
+                Cancel
+              </button>
+            </div>
+          </form>
+
+          <div v-if="error" class="mt-3 p-2.5 bg-red-50 dark:bg-red-500/10 text-red-600 dark:text-red-400 rounded-lg border-l-4 border-red-500 text-xs">{{ error }}</div>
+        </div>
+      </div>
+
+      <!-- Calendar Grid -->
+      <div class="card p-3 mb-5 overflow-x-auto">
+        <!-- Day Headers -->
+        <div class="grid grid-cols-7 gap-px min-w-full">
+          <div class="bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 py-2 text-center font-semibold text-xs">Sun</div>
+          <div class="bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 py-2 text-center font-semibold text-xs">Mon</div>
+          <div class="bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 py-2 text-center font-semibold text-xs">Tue</div>
+          <div class="bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 py-2 text-center font-semibold text-xs">Wed</div>
+          <div class="bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 py-2 text-center font-semibold text-xs">Thu</div>
+          <div class="bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 py-2 text-center font-semibold text-xs">Fri</div>
+          <div class="bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 py-2 text-center font-semibold text-xs">Sat</div>
+        </div>
+
+        <!-- Calendar Days -->
+        <div class="grid grid-cols-7 gap-px min-w-full">
+          <div
+            v-for="day in calendarDays"
+            :key="day.date"
+            class="min-h-[80px] p-2 border border-zinc-200 dark:border-zinc-800 cursor-pointer"
+            :class="{
+              'bg-zinc-50 dark:bg-surface-950': !day.isCurrentMonth,
+              'bg-white dark:bg-surface-900': day.isCurrentMonth && !day.isToday,
+              'bg-brand-50/60 dark:bg-brand-500/5 ring-2 ring-brand-500': day.isToday,
+            }"
+          >
+            <div
+              class="font-semibold text-xs mb-1"
+              :class="day.isCurrentMonth ? 'text-zinc-800 dark:text-zinc-200' : 'text-zinc-400 dark:text-zinc-600'"
+            >{{ day.day }}</div>
+            <div class="flex flex-col gap-0.5">
+              <div
+                v-for="workout in day.workouts"
+                :key="workout.id"
+                class="px-1.5 py-0.5 rounded text-white text-[10px] font-semibold truncate cursor-pointer"
+                :style="{ backgroundColor: getWorkoutColor(workout.type) }"
+                @click="selectWorkout(workout)"
+                :title="workout.title"
+              >
+                <span
+                  class="inline-block w-1.5 h-1.5 rounded-full mr-0.5 shrink-0"
+                  :class="{
+                    'bg-amber-400': workout.status === 'planned',
+                    'bg-green-400': workout.status === 'completed',
+                    'bg-red-400': workout.status === 'skipped',
+                  }"
+                ></span>
+                {{ 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="card p-4">
+        <div class="flex flex-wrap items-center justify-between gap-2 mb-3">
+          <h3 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100 m-0">Workouts</h3>
+          <div class="flex gap-0.5 bg-zinc-100 dark:bg-zinc-800 p-0.5 rounded-lg">
+            <button
+              v-for="filter in ['all', 'planned', 'completed', 'skipped']"
+              :key="filter"
+              class="px-2.5 py-1 text-xs font-medium rounded-md border-none cursor-pointer"
+              :class="activeFilter === filter
+                ? 'bg-white dark:bg-zinc-700 text-brand-600 dark:text-brand-400 shadow-sm'
+                : 'bg-transparent text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300'"
+              @click="activeFilter = filter"
+            >
+              {{ filter.charAt(0).toUpperCase() + filter.slice(1) }}
+            </button>
+          </div>
+        </div>
+
+        <div v-if="filteredWorkouts.length > 0" class="flex flex-col gap-2">
+          <div
+            v-for="workout in filteredWorkouts.slice(0, 10)"
+            :key="workout.id"
+            class="p-2.5 border-l-[3px] border-l-brand-500 bg-zinc-50 dark:bg-zinc-800/50 rounded-md cursor-pointer hover:bg-zinc-100 dark:hover:bg-zinc-800"
+            @click="selectWorkout(workout)"
+          >
+            <div class="flex flex-wrap items-center gap-2 mb-1">
+              <span class="text-xs font-semibold text-brand-600 dark:text-brand-400 min-w-[90px]">{{ formatDate(workout.scheduled_date) }}</span>
+              <span class="flex-1 text-xs font-medium text-zinc-800 dark:text-zinc-200">{{ workout.title }}</span>
+              <span v-if="workout.type" class="text-[10px] font-semibold text-white bg-brand-600 px-2 py-0.5 rounded-full">{{ workout.type }}</span>
+            </div>
+            <div class="flex flex-wrap items-center gap-2 text-xs">
+              <span class="text-zinc-400 dark:text-zinc-500">{{ workout.duration }}min</span>
+              <span
+                class="px-1.5 py-0.5 rounded-full text-[10px] font-semibold"
+                :class="{
+                  'bg-amber-100 dark:bg-amber-500/15 text-amber-600 dark:text-amber-400': workout.status === 'planned',
+                  'bg-green-100 dark:bg-green-500/15 text-green-600 dark:text-green-400': workout.status === 'completed',
+                  'bg-red-100 dark:bg-red-500/15 text-red-600 dark:text-red-400': workout.status === 'skipped',
+                }"
+              >{{ workout.status }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div v-else class="text-center text-zinc-400 dark:text-zinc-500 py-6 text-xs">
+          No {{ activeFilter === 'all' ? '' : activeFilter }} workouts found
+        </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 '@/components/WorkoutDetail.vue'
+import { parseFITFile, parseZWOFile } from '@/utils/workoutFileParser'
+
+const currentDate = ref(new Date())
+const workouts = ref([])
+const selectedWorkout = ref(null)
+const showAddWorkout = ref(false)
+const loading = ref(false)
+const error = ref('')
+const fileParseError = ref('')
+const workoutTypes = ref([])
+const uploadedFileName = ref('')
+const parsedFileData = ref(null)
+const activeFilter = ref('all')
+const equipmentList = ref([])
+
+const newWorkout = ref({
+  title: '',
+  description: '',
+  type: '',
+  scheduled_date: new Date().toISOString().split('T')[0],
+  duration: 60,
+  workout_data: null,
+  file_type: null,
+  equipment_id: null,
+})
+
+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 filteredWorkouts = computed(() => {
+  const sorted = [...workouts.value].sort((a, b) => new Date(b.scheduled_date) - new Date(a.scheduled_date))
+  if (activeFilter.value === 'all') return sorted
+  return sorted.filter(w => w.status === activeFilter.value)
+})
+
+onMounted(async () => {
+  await loadWorkoutTypes()
+  await loadWorkouts()
+  await loadEquipment()
+})
+
+async function loadWorkouts() {
+  try {
+    const { data } = await api.get('/api/protected/workouts')
+    workouts.value = data || []
+  } catch (err) {
+    console.error('Failed to load workouts:', err)
+    error.value = 'Failed to load workouts'
+  }
+}
+
+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)
+    // Set default types if API fails
+    workoutTypes.value = [
+      { id: 1, name: 'Cycling', icon: '🚴', color: '#6366f1' },
+      { id: 2, name: 'Running', icon: '🏃', color: '#f59e0b' },
+      { id: 3, name: 'Swimming', icon: '🏊', color: '#06b6d4' },
+      { id: 4, name: 'Strength', icon: '💪', color: '#8b5cf6' },
+    ]
+  }
+}
+
+async function loadEquipment() {
+  try {
+    const { data } = await api.get('/api/protected/equipment')
+    equipmentList.value = (data || []).filter(e => e.active)
+  } catch (err) {
+    console.error('Failed to load equipment:', err)
+  }
+}
+
+async function handleFileUpload(event) {
+  const file = event.target.files?.[0]
+  if (!file) return
+
+  fileParseError.value = ''
+  parsedFileData.value = null
+  uploadedFileName.value = file.name
+
+  try {
+    const fileExtension = file.name.split('.').pop()?.toLowerCase()
+    let parsed
+
+    if (fileExtension === 'fit') {
+      const fileBuffer = await file.arrayBuffer()
+      parsed = await parseFITFile(fileBuffer)
+    } else if (fileExtension === 'zwo') {
+      parsed = await parseZWOFile(file)
+    } else {
+      throw new Error('Unsupported file format. Please use FIT or ZWO files.')
+    }
+
+    if (parsed) {
+      parsedFileData.value = parsed
+      newWorkout.value.workout_data = parsed
+      newWorkout.value.file_type = fileExtension
+
+      // Auto-populate fields from file
+      if (parsed.title && !newWorkout.value.title) {
+        newWorkout.value.title = parsed.title
+      }
+
+      // Update duration from parsed file (convert seconds to minutes)
+      if (parsed.duration) {
+        newWorkout.value.duration = Math.round(parsed.duration / 60)
+      }
+
+      if (parsed.description && !newWorkout.value.description) {
+        newWorkout.value.description = parsed.description
+      }
+    }
+  } catch (err) {
+    console.error('File parsing error:', err)
+    fileParseError.value = `Error parsing file: ${err.message}`
+    uploadedFileName.value = ''
+    newWorkout.value.workout_data = null
+    newWorkout.value.file_type = null
+  }
+}
+
+async function handleAddWorkout() {
+  if (!newWorkout.value.title.trim()) {
+    error.value = 'Please enter a workout title'
+    return
+  }
+
+  if (!newWorkout.value.scheduled_date) {
+    error.value = 'Please select a date'
+    return
+  }
+
+  loading.value = true
+  error.value = ''
+
+  try {
+    const payload = {
+      title: newWorkout.value.title,
+      description: newWorkout.value.description,
+      type: newWorkout.value.type || null,
+      scheduled_date: newWorkout.value.scheduled_date,
+      duration: newWorkout.value.duration,
+      workout_data: newWorkout.value.workout_data,
+      file_type: newWorkout.value.file_type,
+      equipment_id: newWorkout.value.equipment_id || null,
+    }
+
+    const { data } = await api.post('/api/protected/workouts', payload)
+    workouts.value.push(data)
+    showAddWorkout.value = false
+    resetForm()
+  } catch (err) {
+    error.value = err.response?.data?.error || 'Failed to add workout'
+  } finally {
+    loading.value = false
+  }
+}
+
+function resetForm() {
+  newWorkout.value = {
+    title: '',
+    description: '',
+    type: '',
+    scheduled_date: new Date().toISOString().split('T')[0],
+    duration: 60,
+    workout_data: null,
+    file_type: null,
+    equipment_id: null,
+  }
+  uploadedFileName.value = ''
+  parsedFileData.value = null
+  fileParseError.value = ''
+  error.value = ''
+
+  // Reset file input
+  const fileInput = document.getElementById('workout-file')
+  if (fileInput) {
+    fileInput.value = ''
+  }
+}
+
+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 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 getWorkoutColor(type) {
+  const typeObj = workoutTypes.value.find(t => t.name === type)
+  return typeObj?.color || '#6366f1'
+}
+</script>