diff --git a/src/components/TrainingZones.vue b/src/components/TrainingZones.vue
new file mode 100644
index 0000000..6501192
--- /dev/null
+++ b/src/components/TrainingZones.vue
@@ -0,0 +1,353 @@
+<template>
+  <div class="zones-page">
+    <nav class="navbar">
+      <div class="navbar-brand">
+        <h1>RideAware</h1>
+      </div>
+      <div class="navbar-menu">
+        <RouterLink to="/dashboard">Dashboard</RouterLink>
+        <RouterLink to="/profile">Profile</RouterLink>
+        <button @click="handleLogout" class="btn-logout">Logout</button>
+      </div>
+    </nav>
+
+    <div class="zones-content">
+      <h2>Training Zones</h2>
+      <p class="subtitle">Your personalized training zones based on FTP and Max HR</p>
+
+      <div v-if="!profile.profile?.ftp && !profile.profile?.max_hr" class="empty-state">
+        <p>Set your FTP and Max Heart Rate in your profile to see training zones</p>
+        <RouterLink to="/profile" class="btn-primary">Go to Profile</RouterLink>
+      </div>
+
+      <div v-else class="zones-container">
+        <!-- HR Zones -->
+        <div v-if="profile.profile?.max_hr" class="zones-section">
+          <h3>Heart Rate Zones</h3>
+          <p class="zone-info">
+            <strong>Max HR:</strong> {{ profile.profile.max_hr }} bpm | 
+            <strong>Resting HR:</strong> {{ profile.profile.resting_hr || '??' }} bpm
+          </p>
+
+          <div class="zones-grid">
+            <div v-for="(zone, index) in hrZones" :key="index" class="zone-card" :style="{ borderLeftColor: zone.color }">
+              <h4>{{ zone.name }}</h4>
+              <div class="zone-range">{{ zone.min }} - {{ zone.max }} bpm</div>
+              <div class="zone-description">
+                <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>
+          </div>
+        </div>
+
+        <!-- Power Zones -->
+        <div v-if="profile.profile?.ftp" class="zones-section">
+          <h3>Power Zones (Watts)</h3>
+          <p class="zone-info">
+            <strong>FTP:</strong> {{ profile.profile.ftp }}W
+          </p>
+
+          <div class="zones-grid">
+            <div v-for="(zone, index) in powerZones" :key="index" class="zone-card" :style="{ borderLeftColor: zone.color }">
+              <h4>{{ zone.name }}</h4>
+              <div class="zone-range">{{ zone.min }} - {{ zone.max }}W</div>
+              <div class="zone-percentage">
+                {{ calculatePercentage(zone.min) }}% - {{ calculatePercentage(zone.max) }}% FTP
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Zone Guides -->
+      <div class="guides-section">
+        <h3>Training Guide</h3>
+        <div class="guide-cards">
+          <div class="guide-card">
+            <h4>Recovery Rides</h4>
+            <p>Zone 1 - Low intensity recovery work. Focus on technique and breathing.</p>
+          </div>
+          <div class="guide-card">
+            <h4>Endurance Builds Base</h4>
+            <p>Zone 2 - Sustainable pace for building aerobic base. Should be able to hold conversation.</p>
+          </div>
+          <div class="guide-card">
+            <h4>Tempo Improves Efficiency</h4>
+            <p>Zone 3 - Comfortably hard. Improves lactate threshold and sustainable power.</p>
+          </div>
+          <div class="guide-card">
+            <h4>Threshold Builds Power</h4>
+            <p>Zone 4 - Hard efforts around your FTP. Key for improving functional threshold power.</p>
+          </div>
+          <div class="guide-card">
+            <h4>VO2 Max Builds Capacity</h4>
+            <p>Zone 5 - Max efforts. Improves aerobic capacity and power output.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuth } from '@/composables/useAuth'
+import api from '@/services/api'
+
+const router = useRouter()
+const auth = useAuth()
+
+const profile = ref({ profile: null })
+const zones = ref({})
+
+const hrZones = computed(() => {
+  return zones.value.hr_zones ? [
+    zones.value.hr_zones.zone_1,
+    zones.value.hr_zones.zone_2,
+    zones.value.hr_zones.zone_3,
+    zones.value.hr_zones.zone_4,
+    zones.value.hr_zones.zone_5,
+  ] : []
+})
+
+const powerZones = computed(() => {
+  return zones.value.power_zones ? [
+    zones.value.power_zones.zone_1,
+    zones.value.power_zones.zone_2,
+    zones.value.power_zones.zone_3,
+    zones.value.power_zones.zone_4,
+    zones.value.power_zones.zone_5,
+    zones.value.power_zones.zone_6,
+    zones.value.power_zones.zone_7,
+  ] : []
+})
+
+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)
+}
+
+function handleLogout() {
+  auth.logout()
+  router.push('/login')
+}
+</script>
+
+<style scoped>
+.zones-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+}
+
+.navbar {
+  background: white;
+  padding: 1rem 2rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.navbar-brand h1 {
+  margin: 0;
+  color: #667eea;
+  font-size: 1.5rem;
+}
+
+.navbar-menu {
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+}
+
+.navbar-menu a {
+  color: #2c3e50;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.3s;
+}
+
+.navbar-menu a:hover {
+  color: #667eea;
+}
+
+.btn-logout {
+  padding: 0.5rem 1rem;
+  background: #e74c3c;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: background 0.3s;
+}
+
+.btn-logout:hover {
+  background: #c0392b;
+}
+
+.zones-content {
+  max-width: 1200px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+}
+
+.zones-content h2 {
+  margin-top: 0;
+  color: #2c3e50;
+}
+
+.subtitle {
+  color: #7f8c8d;
+  margin-bottom: 2rem;
+}
+
+.empty-state {
+  background: white;
+  padding: 3rem;
+  border-radius: 8px;
+  text-align: center;
+  color: #7f8c8d;
+}
+
+.btn-primary {
+  display: inline-block;
+  margin-top: 1rem;
+  padding: 0.75rem 1.5rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  text-decoration: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: transform 0.2s;
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+}
+
+.zones-container {
+  display: grid;
+  gap: 2rem;
+}
+
+.zones-section {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.zones-section h3 {
+  margin-top: 0;
+  color: #2c3e50;
+  border-bottom: 2px solid #667eea;
+  padding-bottom: 0.5rem;
+}
+
+.zone-info {
+  color: #555;
+  margin: 1rem 0;
+  font-size: 0.95rem;
+}
+
+.zones-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.zone-card {
+  background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
+  padding: 1.5rem;
+  border-radius: 8px;
+  border-left: 5px solid #667eea;
+  transition: transform 0.2s;
+}
+
+.zone-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.zone-card h4 {
+  margin: 0 0 0.75rem 0;
+  color: #2c3e50;
+}
+
+.zone-range {
+  font-size: 1.25rem;
+  font-weight: bold;
+  color: #667eea;
+  margin-bottom: 0.5rem;
+}
+
+.zone-percentage {
+  font-size: 0.85rem;
+  color: #7f8c8d;
+}
+
+.zone-description {
+  font-size: 0.9rem;
+  color: #555;
+  font-style: italic;
+  margin-top: 0.5rem;
+}
+
+.guides-section {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-top: 2rem;
+}
+
+.guides-section h3 {
+  margin-top: 0;
+  color: #2c3e50;
+}
+
+.guide-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+  margin-top: 1rem;
+}
+
+.guide-card {
+  background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
+  padding: 1.5rem;
+  border-radius: 8px;
+  border-left: 4px solid #667eea;
+}
+
+.guide-card h4 {
+  margin: 0 0 0.5rem 0;
+  color: #2c3e50;
+}
+
+.guide-card p {
+  margin: 0;
+  color: #555;
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/UserDashboard.vue b/src/components/UserDashboard.vue
index e77a754..7cc0f5d 100644
--- a/src/components/UserDashboard.vue
+++ b/src/components/UserDashboard.vue
@@ -5,7 +5,10 @@
         <h1>RideAware</h1>
       </div>
       <div class="navbar-menu">
+        <RouterLink to="/dashboard">Dashboard</RouterLink>
         <RouterLink to="/profile">Profile</RouterLink>
+        <RouterLink to="/equipment">Equipment</RouterLink>
+        <RouterLink to="/zones">Zones</RouterLink>
         <button @click="handleLogout" class="btn-logout">Logout</button>
       </div>
     </nav>
@@ -30,20 +33,35 @@
           <p class="stat-value">0 hrs</p>
         </div>
       </div>
+
+      <div class="quick-actions">
+        <RouterLink to="/equipment" class="action-card">
+          <h4>🚴 Manage Equipment</h4>
+          <p>Track your bikes and gear</p>
+        </RouterLink>
+        <RouterLink to="/zones" class="action-card">
+          <h4>⚡ Training Zones</h4>
+          <p>View your personalized zones</p>
+        </RouterLink>
+        <RouterLink to="/profile" class="action-card">
+          <h4>👤 Edit Profile</h4>
+          <p>Update your stats and info</p>
+        </RouterLink>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router';
-import { useAuth } from '@/composables/useAuth';
+import { useRouter } from 'vue-router'
+import { useAuth } from '@/composables/useAuth'
 
-const router = useRouter();
-const auth = useAuth();
+const router = useRouter()
+const auth = useAuth()
 
 async function handleLogout() {
-  auth.logout();
-  router.push('/login');
+  auth.logout()
+  router.push('/login')
 }
 </script>
 
@@ -70,8 +88,9 @@ async function handleLogout() {
 
 .navbar-menu {
   display: flex;
-  gap: 1rem;
+  gap: 1.5rem;
   align-items: center;
+  flex-wrap: wrap;
 }
 
 .navbar-menu a {
@@ -129,6 +148,7 @@ async function handleLogout() {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 1.5rem;
+  margin-bottom: 2rem;
 }
 
 .stat-card {
@@ -152,4 +172,37 @@ async function handleLogout() {
   color: #667eea;
   font-weight: 700;
 }
+
+.quick-actions {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+}
+
+.action-card {
+  background: white;
+  padding: 1.5rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  text-decoration: none;
+  color: inherit;
+  transition: transform 0.2s, box-shadow 0.2s;
+  border-left: 4px solid #667eea;
+}
+
+.action-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.action-card h4 {
+  margin: 0 0 0.5rem 0;
+  color: #2c3e50;
+}
+
+.action-card p {
+  margin: 0;
+  color: #7f8c8d;
+  font-size: 0.95rem;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/UserEquipment.vue b/src/components/UserEquipment.vue
new file mode 100644
index 0000000..4fc2513
--- /dev/null
+++ b/src/components/UserEquipment.vue
@@ -0,0 +1,482 @@
+<template>
+  <div class="equipment-page">
+    <nav class="navbar">
+      <div class="navbar-brand">
+        <h1>RideAware</h1>
+      </div>
+      <div class="navbar-menu">
+        <RouterLink to="/dashboard">Dashboard</RouterLink>
+        <RouterLink to="/profile">Profile</RouterLink>
+        <button @click="handleLogout" class="btn-logout">Logout</button>
+      </div>
+    </nav>
+
+    <div class="equipment-content">
+      <div class="header">
+        <h2>Equipment Management</h2>
+        <button @click="showAddForm = true" class="btn-primary">Add Equipment</button>
+      </div>
+
+      <!-- Add Equipment Form -->
+      <div v-if="showAddForm" class="equipment-form-card">
+        <h3>Add New Equipment</h3>
+        <form @submit.prevent="handleAddEquipment">
+          <div class="form-row">
+            <div class="form-group">
+              <label>Name *</label>
+              <input v-model="newEquipment.name" type="text" required />
+            </div>
+            <div class="form-group">
+              <label>Type *</label>
+              <select v-model="newEquipment.type" required>
+                <option value="">Select type</option>
+                <option value="bike">Bike</option>
+                <option value="shoes">Shoes</option>
+                <option value="helmet">Helmet</option>
+                <option value="wetsuit">Wetsuit</option>
+                <option value="other">Other</option>
+              </select>
+            </div>
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label>Brand</label>
+              <input v-model="newEquipment.brand" type="text" />
+            </div>
+            <div class="form-group">
+              <label>Model</label>
+              <input v-model="newEquipment.model" type="text" />
+            </div>
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label>Weight (grams)</label>
+              <input v-model.number="newEquipment.weight" type="number" step="0.1" />
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label>Notes</label>
+            <textarea v-model="newEquipment.notes" placeholder="Any notes about this equipment"></textarea>
+          </div>
+
+          <div class="form-actions">
+            <button type="submit" :disabled="auth.loading" class="btn-primary">
+              {{ auth.loading ? 'Adding...' : 'Add Equipment' }}
+            </button>
+            <button type="button" @click="showAddForm = false" class="btn-secondary">
+              Cancel
+            </button>
+          </div>
+        </form>
+
+        <div v-if="auth.error" class="error-message">
+          {{ auth.error }}
+        </div>
+      </div>
+
+      <!-- Equipment List -->
+      <div v-if="equipment.length > 0" class="equipment-grid">
+        <div v-for="item in equipment" :key="item.id" class="equipment-card">
+          <div class="equipment-header">
+            <h4>{{ item.name }}</h4>
+            <span class="equipment-type">{{ item.type }}</span>
+          </div>
+
+          <div class="equipment-details">
+            <p v-if="item.brand"><strong>Brand:</strong> {{ item.brand }}</p>
+            <p v-if="item.model"><strong>Model:</strong> {{ item.model }}</p>
+            <p v-if="item.weight"><strong>Weight:</strong> {{ item.weight }}g</p>
+            <p v-if="item.notes"><strong>Notes:</strong> {{ item.notes }}</p>
+          </div>
+
+          <div class="equipment-actions">
+            <button @click="editingId = item.id" class="btn-edit">Edit</button>
+            <button @click="handleDeleteEquipment(item.id)" class="btn-danger">Delete</button>
+          </div>
+
+          <!-- Edit Form -->
+          <div v-if="editingId === item.id" class="edit-form">
+            <form @submit.prevent="handleUpdateEquipment(item.id)">
+              <div class="form-group">
+                <label>Name</label>
+                <input v-model="editForm.name" type="text" />
+              </div>
+              <div class="form-group">
+                <label>Brand</label>
+                <input v-model="editForm.brand" type="text" />
+              </div>
+              <div class="form-group">
+                <label>Model</label>
+                <input v-model="editForm.model" type="text" />
+              </div>
+              <div class="form-group">
+                <label>Weight (grams)</label>
+                <input v-model.number="editForm.weight" type="number" step="0.1" />
+              </div>
+              <div class="form-group">
+                <label>Notes</label>
+                <textarea v-model="editForm.notes"></textarea>
+              </div>
+              <div class="form-actions">
+                <button type="submit" class="btn-primary">Save</button>
+                <button type="button" @click="editingId = null" class="btn-secondary">Cancel</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+
+      <div v-else-if="!showAddForm" class="empty-state">
+        <p>No equipment yet. Add your first bike or gear!</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuth } from '@/composables/useAuth'
+import api from '@/services/api'
+
+const router = useRouter()
+const auth = useAuth()
+
+const equipment = ref([])
+const showAddForm = ref(false)
+const editingId = ref(null)
+const editForm = ref({})
+
+const newEquipment = ref({
+  name: '',
+  type: '',
+  brand: '',
+  model: '',
+  weight: 0,
+  notes: '',
+})
+
+onMounted(async () => {
+  try {
+    const { data } = await api.get('/api/protected/equipment')
+    equipment.value = data
+  } catch (error) {
+    console.error('Failed to load equipment:', error)
+  }
+})
+
+async function handleAddEquipment() {
+  try {
+    const { data } = await api.post('/api/protected/equipment', newEquipment.value)
+    equipment.value.push(data)
+    newEquipment.value = { name: '', type: '', brand: '', model: '', weight: 0, notes: '' }
+    showAddForm.value = false
+  } catch (error) {
+    console.error('Failed to add equipment:', error)
+  }
+}
+
+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
+  } catch (error) {
+    console.error('Failed to update equipment:', error)
+  }
+}
+
+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)
+    } catch (error) {
+      console.error('Failed to delete equipment:', error)
+    }
+  }
+}
+
+function handleLogout() {
+  auth.logout()
+  router.push('/login')
+}
+</script>
+
+<style scoped>
+.equipment-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+}
+
+.navbar {
+  background: white;
+  padding: 1rem 2rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.navbar-brand h1 {
+  margin: 0;
+  color: #667eea;
+  font-size: 1.5rem;
+}
+
+.navbar-menu {
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+}
+
+.navbar-menu a {
+  color: #2c3e50;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.3s;
+}
+
+.navbar-menu a:hover {
+  color: #667eea;
+}
+
+.btn-logout {
+  padding: 0.5rem 1rem;
+  background: #e74c3c;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: background 0.3s;
+}
+
+.btn-logout:hover {
+  background: #c0392b;
+}
+
+.equipment-content {
+  max-width: 1200px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.header h2 {
+  margin: 0;
+  color: #2c3e50;
+}
+
+.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-secondary {
+  padding: 0.75rem 1.5rem;
+  background: #95a5a6;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.btn-secondary:hover {
+  background: #7f8c8d;
+}
+
+.equipment-form-card {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 2rem;
+}
+
+.equipment-form-card h3 {
+  margin-top: 0;
+  color: #2c3e50;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.5rem;
+  color: #2c3e50;
+  font-weight: 500;
+}
+
+input,
+select,
+textarea {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid #bdc3c7;
+  border-radius: 4px;
+  font-size: 1rem;
+  font-family: inherit;
+  box-sizing: border-box;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+.form-actions {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.equipment-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.5rem;
+}
+
+.equipment-card {
+  background: white;
+  padding: 1.5rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s;
+}
+
+.equipment-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.equipment-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+  margin-bottom: 1rem;
+  border-bottom: 2px solid #ecf0f1;
+  padding-bottom: 0.5rem;
+}
+
+.equipment-header h4 {
+  margin: 0;
+  color: #2c3e50;
+}
+
+.equipment-type {
+  background: #667eea;
+  color: white;
+  padding: 0.25rem 0.75rem;
+  border-radius: 20px;
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.equipment-details {
+  margin-bottom: 1rem;
+  color: #555;
+  font-size: 0.95rem;
+}
+
+.equipment-details p {
+  margin: 0.5rem 0;
+}
+
+.equipment-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.btn-edit {
+  flex: 1;
+  padding: 0.5rem;
+  background: #3498db;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.btn-edit:hover {
+  background: #2980b9;
+}
+
+.btn-danger {
+  flex: 1;
+  padding: 0.5rem;
+  background: #e74c3c;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.btn-danger:hover {
+  background: #c0392b;
+}
+
+.edit-form {
+  background: #f9f9f9;
+  padding: 1rem;
+  border-radius: 4px;
+  margin-top: 1rem;
+}
+
+.error-message {
+  margin-top: 1rem;
+  padding: 0.75rem;
+  background-color: #fee;
+  color: #c33;
+  border-radius: 4px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 3rem;
+  background: white;
+  border-radius: 8px;
+  color: #7f8c8d;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/UserProfile.vue b/src/components/UserProfile.vue
index 04ab741..9fae1a8 100644
--- a/src/components/UserProfile.vue
+++ b/src/components/UserProfile.vue
@@ -6,6 +6,8 @@
       </div>
       <div class="navbar-menu">
         <RouterLink to="/dashboard">Dashboard</RouterLink>
+        <RouterLink to="/equipment">Equipment</RouterLink>
+        <RouterLink to="/zones">Zones</RouterLink>
         <button @click="handleLogout" class="btn-logout">Logout</button>
       </div>
     </nav>
@@ -18,11 +20,11 @@
           <div class="form-row">
             <div class="form-group">
               <label>First Name</label>
-              <input v-model="form.firstName" type="text" />
+              <input v-model="form.first_name" type="text" />
             </div>
             <div class="form-group">
               <label>Last Name</label>
-              <input v-model="form.lastName" type="text" />
+              <input v-model="form.last_name" type="text" />
             </div>
           </div>
 
@@ -34,15 +36,15 @@
           <div class="form-row">
             <div class="form-group">
               <label>FTP (watts)</label>
-              <input v-model.number="form.ftp" type="number" />
+              <input v-model.number="form.ftp" type="number" step="1" />
             </div>
             <div class="form-group">
               <label>Max HR (bpm)</label>
-              <input v-model.number="form.maxHr" type="number" />
+              <input v-model.number="form.max_hr" type="number" step="1" />
             </div>
             <div class="form-group">
               <label>Resting HR (bpm)</label>
-              <input v-model.number="form.restingHr" type="number" />
+              <input v-model.number="form.resting_hr" type="number" step="1" />
             </div>
           </div>
 
@@ -51,13 +53,13 @@
             <input v-model.number="form.weight" type="number" step="0.1" />
           </div>
 
-          <button type="submit" :disabled="auth.loading" class="btn-primary">
-            {{ auth.loading ? 'Saving...' : 'Save Profile' }}
+          <button type="submit" :disabled="loading" class="btn-primary">
+            {{ loading ? 'Saving...' : 'Save Profile' }}
           </button>
         </form>
 
-        <div v-if="auth.error" class="error-message">
-          {{ auth.error }}
+        <div v-if="error" class="error-message">
+          {{ error }}
         </div>
 
         <div v-if="successMessage" class="success-message">
@@ -69,64 +71,94 @@
 </template>
 
 <script setup>
-import { reactive, onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { useAuth } from '@/composables/useAuth';
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuth } from '@/composables/useAuth'
+import api from '@/services/api'
 
-const router = useRouter();
-const auth = useAuth();
-const successMessage = ref('');
+const router = useRouter()
+const auth = useAuth()
+const loading = ref(false)
+const error = ref('')
+const successMessage = ref('')
 
-const form = reactive({
-  firstName: '',
-  lastName: '',
+const form = ref({
+  first_name: '',
+  last_name: '',
   bio: '',
   ftp: 0,
-  maxHr: 0,
-  restingHr: 0,
+  max_hr: 0,
+  resting_hr: 0,
   weight: 0,
-});
+})
 
 onMounted(async () => {
   try {
-    const profile = await auth.fetchProfile();
-    if (profile.profile) {
-      form.firstName = profile.profile.first_name;
-      form.lastName = profile.profile.last_name;
-      form.bio = profile.profile.bio;
-      form.ftp = profile.profile.ftp;
-      form.maxHr = profile.profile.max_hr;
-      form.restingHr = profile.profile.resting_hr;
-      form.weight = profile.profile.weight;
+    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 || '',
+        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 (error) {
-    console.error('Failed to load profile:', error);
+  } 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 {
-    await auth.updateProfile({
-      first_name: form.firstName,
-      last_name: form.lastName,
-      bio: form.bio,
-      ftp: form.ftp,
-      max_hr: form.maxHr,
-      resting_hr: form.restingHr,
-      weight: form.weight,
-    });
-    successMessage.value = 'Profile updated successfully!';
+    console.log('Sending profile update:', form.value)
+    
+    const { data } = await api.put('/api/protected/profile', {
+      first_name: form.value.first_name,
+      last_name: form.value.last_name,
+      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,
+    })
+
+    console.log('Update response:', data)
+    
+    if (data && data.profile) {
+      form.value = {
+        first_name: data.profile.first_name || '',
+        last_name: data.profile.last_name || '',
+        bio: data.profile.bio || '',
+        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 = '';
-    }, 3000);
-  } catch (error) {
-    console.error('Failed to update profile:', error);
+      successMessage.value = ''
+    }, 3000)
+  } catch (err) {
+    console.error('Failed to update profile:', err)
+    error.value = err.response?.data?.error || 'Failed to update profile'
+  } finally {
+    loading.value = false
   }
 }
 
 function handleLogout() {
-  auth.logout();
-  router.push('/login');
+  auth.logout()
+  router.push('/login')
 }
 </script>
 
@@ -153,7 +185,7 @@ function handleLogout() {
 
 .navbar-menu {
   display: flex;
-  gap: 1rem;
+  gap: 1.5rem;
   align-items: center;
 }
 
@@ -253,6 +285,7 @@ textarea {
   font-weight: 600;
   cursor: pointer;
   transition: transform 0.2s;
+  margin-top: 1rem;
 }
 
 .btn-primary:hover:not(:disabled) {
diff --git a/src/router/index.js b/src/router/index.js
index 7586f0b..e863f5d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,6 +5,8 @@ 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 PasswordReset from '@/components/PasswordReset.vue'
 
 const routes = [
@@ -38,6 +40,18 @@ const routes = [
     component: UserProfile,
     meta: { requiresAuth: true },
   },
+  {
+    path: '/equipment',
+    name: 'Equipment',
+    component: UserEquipment,
+    meta: { requiresAuth: true },
+  },
+  {
+    path: '/zones',
+    name: 'Zones',
+    component: TrainingZones,
+    meta: { requiresAuth: true },
+  },
   {
     path: '/',
     redirect: '/dashboard',