diff --git a/frontend/src/css/app.css b/frontend/src/css/app.css
index 5cf80e8..941386c 100644
--- a/frontend/src/css/app.css
+++ b/frontend/src/css/app.css
@@ -1 +1 @@
-.controls{display:flex;justify-content:space-between;width:100%;max-width:500px;margin-bottom:10px}.button{padding:6px 12px;background-color:#4f46e5;color:#fff;border:none;border-radius:4px;cursor:pointer}.visualization-container{position:relative;width:100%;height:calc(100vh - 86px);overflow:hidden}.gradient-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;background:linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2);background-size:200% 200%;animation:gradientAnimation 20s ease infinite}@keyframes gradientAnimation{0%{background-position:0% 0%}25%{background-position:100% 0%}50%{background-position:100% 100%}75%{background-position:0% 100%}100%{background-position:0% 0%}}.median{position:absolute;top:51%;left:0;right:0;height:2px;background-color:rgba(255,255,255,.3);z-index:10}.scroll-container{position:relative;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;min-height:400px;-ms-overflow-style:none;scrollbar-width:none}.scroll-container::-webkit-scrollbar{display:none}.smooth-scroll{scroll-behavior:smooth}.active{cursor:grabbing}.spacer{height:100vh}.dot-tooltip{pointer-events:none;opacity:1}.dot-tooltip .tooltip-background{fill:rgba(0,0,0,0)}.dot-tooltip .tooltip-content{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:100%;color:#fff}.dot-tooltip .image_container{margin-top:8px;box-shadow:0 0 20px 0 rgba(255,255,255,.25);transition:box-shadow .25s ease-in-out;width:80px;height:80px;overflow:hidden;border-radius:50%;border:2px solid #fff;display:flex;justify-content:center}.dot-tooltip .image_container:hover{box-shadow:0 0 30px 0 rgba(255,255,255,.8)}.dot-tooltip .tooltip-image{width:100%;height:auto;display:block;pointer-events:auto}.dot-tooltip .tooltip-title{font-size:14px;font-weight:400;margin-bottom:2px;text-align:center;text-wrap:balance;-webkit-hyphens:auto;hyphens:auto;line-height:1.1}.dot-tooltip .tooltip-description{font-size:12px;font-weight:300}.dot-tooltip .tooltip-arrow{width:1px;height:30px;background:linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent)}.dot{transition:r .2s ease,fill .2s ease;cursor:pointer}.dot:hover{fill:rgba(255,255,255,.9);filter:drop-shadow(0 0 5px rgba(255, 255, 255, 0.8))}.tooltip-img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:4px}
\ No newline at end of file
+.controls{display:flex;justify-content:space-between;width:100%;max-width:500px;margin-bottom:10px}.button{padding:6px 12px;background-color:#4f46e5;color:#fff;border:none;border-radius:4px;cursor:pointer}.visualization-container{position:relative;width:100%;height:calc(100vh - 86px);overflow:hidden}.gradient-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;background:linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2);background-size:200% 200%;animation:gradientAnimation 20s ease infinite}@keyframes gradientAnimation{0%{background-position:0% 0%}25%{background-position:100% 0%}50%{background-position:100% 100%}75%{background-position:0% 100%}100%{background-position:0% 0%}}.median{position:absolute;top:51.2%;left:0;right:0;height:1px;background-color:rgba(255,255,255,.3);z-index:0}.scroll-container{position:relative;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;min-height:400px;z-index:1;-ms-overflow-style:none;scrollbar-width:none}.scroll-container::-webkit-scrollbar{display:none}.smooth-scroll{scroll-behavior:smooth}.active{cursor:grabbing}.spacer{height:100vh}.dot-tooltip{pointer-events:none;opacity:1}.dot-tooltip .tooltip-background{fill:rgba(0,0,0,0)}.dot-tooltip .tooltip-content{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:100%;color:#fff}.dot-tooltip .image_container{margin-top:8px;box-shadow:0 0 20px 0 rgba(255,255,255,.25);transition:box-shadow .25s ease-in-out;width:80px;height:80px;overflow:hidden;border-radius:50%;border:2px solid #fff;display:flex;justify-content:center}.dot-tooltip .image_container:hover{box-shadow:0 0 30px 0 rgba(255,255,255,.8)}.dot-tooltip .tooltip-image{width:100%;height:auto;display:block;pointer-events:auto}.dot-tooltip .tooltip-title{font-size:14px;font-weight:400;margin-bottom:2px;text-align:center;text-wrap:balance;-webkit-hyphens:auto;hyphens:auto;line-height:1.1}.dot-tooltip .tooltip-description{font-size:12px;font-weight:300}.dot-tooltip .tooltip-arrow{width:1px;height:30px;background:linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent)}.dot{transition:r .2s ease,fill .2s ease;cursor:pointer}.dot:hover{fill:rgba(255,255,255,.9);filter:drop-shadow(0 0 5px rgba(255, 255, 255, 0.8))}.tooltip-img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:4px}
\ No newline at end of file
diff --git a/frontend/src/css/app.scss b/frontend/src/css/app.scss
index 4ddb09f..1688fd5 100644
--- a/frontend/src/css/app.scss
+++ b/frontend/src/css/app.scss
@@ -62,12 +62,12 @@ $image-size: 80px;
 
 .median {
   position: absolute;
-  top: 51%;
+  top: 51.2%;
   left: 0;
   right: 0;
-  height: 2px;
+  height: 1px;
   background-color: rgba(255,255,255,0.3);
-  z-index: 10;
+  z-index: 0;
 }
 
 .scroll-container {
@@ -77,6 +77,7 @@ $image-size: 80px;
   overflow-x: auto;
   overflow-y: hidden;
 	min-height:400px;
+	z-index: 1;
 	&::-webkit-scrollbar {
 		display: none;
 	}
diff --git a/frontend/src/pages/CategorySelector.vue b/frontend/src/pages/CategorySelector.vue
new file mode 100644
index 0000000..c03e179
--- /dev/null
+++ b/frontend/src/pages/CategorySelector.vue
@@ -0,0 +1,369 @@
+<template>
+  <q-page padding class="category-selector-page">
+    <div class="row justify-center">
+      <div class="col-12 col-md-8 col-lg-6">
+        <q-card>
+          <q-card-section>
+            <div class="text-h5">Select Categories</div>
+            <div class="text-subtitle2 text-grey">Choose categories that best describe this life event</div>
+          </q-card-section>
+
+          <q-card-section>
+            <!-- Search bar -->
+            <q-input
+              v-model="searchQuery"
+              label="Search categories..."
+              filled
+              clearable
+              class="q-mb-md"
+            >
+              <template v-slot:prepend>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+
+            <!-- Category list -->
+            <div class="category-list q-gutter-md">
+              <div
+                v-for="category in filteredCategories"
+                :key="category.id"
+                class="category-item"
+                :class="{ 'selected': isCategorySelected(category.id) }"
+                @click="toggleCategorySelection(category.id)"
+              >
+                <div class="category-icon">
+                  <q-icon :name="category.icon" size="32px" color="primary" />
+                </div>
+                
+                <div class="category-info">
+                  <div class="category-name">{{ category.label }}</div>
+                  <div v-if="category.description" class="category-description text-grey">{{ category.description }}</div>
+                </div>
+
+                <!-- Selection indicator -->
+                <q-icon
+                  v-if="isCategorySelected(category.id)"
+                  name="check_circle"
+                  color="positive"
+                  size="24px"
+                  class="selection-indicator"
+                />
+              </div>
+            </div>
+          </q-card-section>
+
+          <!-- Selected categories section -->
+          <q-card-section v-if="selectedCategories.length > 0" class="selected-section">
+            <q-separator class="q-mb-md" />
+            
+            <div class="text-subtitle2 q-mb-md">Selected Categories ({{ selectedCategories.length }})</div>
+            
+            <div class="selected-categories-container">
+              <div class="selected-categories-list">
+                <div
+                  v-for="category in selectedCategoriesData"
+                  :key="category.id"
+                  class="selected-category"
+                  @mouseenter="hoveredCategoryId = category.id"
+                  @mouseleave="hoveredCategoryId = null"
+                >
+                  <q-chip
+                    :removable="hoveredCategoryId === category.id"
+                    @remove="removeCategorySelection(category.id)"
+                    color="primary"
+                    text-color="white"
+                    :icon="category.icon"
+                    class="selected-category-chip"
+                  >
+                    {{ category.label }}
+                  </q-chip>
+                </div>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <!-- Fixed Footer with Action Buttons -->
+    <q-footer elevated class="bg-white text-dark selector-footer">
+      <q-toolbar class="justify-between">
+        <q-btn
+          icon="arrow_back"
+          color="grey"
+          flat
+          round
+          @click="onCancel"
+          class="q-ml-sm"
+        >
+          <q-tooltip class="bg-grey">Cancel</q-tooltip>
+        </q-btn>
+        
+        <q-btn
+          label="Add Categories"
+          color="primary"
+          unelevated
+          :disable="selectedCategories.length === 0"
+          @click="onAddCategories"
+          class="q-mr-sm"
+        />
+      </q-toolbar>
+    </q-footer>
+  </q-page>
+</template>
+
+<script>
+import { ref, computed, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { categoryStructure } from '../utils/editFormOptions.js'
+
+export default {
+  name: 'CategorySelector',
+  setup() {
+    const router = useRouter()
+    const route = useRoute()
+    
+    // State
+    const searchQuery = ref('')
+    const selectedCategories = ref([])
+    const hoveredCategoryId = ref(null)
+    
+    // Category icons mapping
+    const categoryIcons = {
+      'career': 'work',
+      'education': 'school',
+      'awards': 'emoji_events',
+      'personal-celebrations': 'celebration',
+      'relationships': 'favorite',
+      'parenthood': 'child_care',
+      'passing': 'sentiment_very_dissatisfied',
+      'festivities': 'party_mode',
+      'social-events': 'groups',
+      'community': 'volunteer_activism',
+      'health': 'health_and_safety',
+      'travel': 'flight',
+      'hobbies': 'palette',
+      'sports': 'sports_soccer',
+      'technology': 'computer',
+      'financial': 'attach_money',
+      'legal': 'gavel',
+      'spiritual': 'spa',
+      'creative': 'brush',
+      'learning': 'menu_book'
+    }
+    
+    // Convert category structure to flat list without subcategories
+    const categories = ref(
+      categoryStructure.map((cat, index) => ({
+        id: index + 1,
+        label: cat.label,
+        value: cat.value,
+        icon: categoryIcons[cat.value] || 'category',
+        description: null // Could be added later
+      }))
+    )
+    
+    // Computed
+    const filteredCategories = computed(() => {
+      if (!searchQuery.value) {
+        return categories.value
+      }
+      return categories.value.filter(category =>
+        category.label.toLowerCase().includes(searchQuery.value.toLowerCase())
+      )
+    })
+    
+    const selectedCategoriesData = computed(() => {
+      return categories.value.filter(category => selectedCategories.value.includes(category.id))
+    })
+    
+    // Methods
+    const isCategorySelected = (categoryId) => {
+      return selectedCategories.value.includes(categoryId)
+    }
+    
+    const toggleCategorySelection = (categoryId) => {
+      const index = selectedCategories.value.indexOf(categoryId)
+      if (index > -1) {
+        selectedCategories.value.splice(index, 1)
+      } else {
+        selectedCategories.value.push(categoryId)
+      }
+    }
+    
+    const removeCategorySelection = (categoryId) => {
+      const index = selectedCategories.value.indexOf(categoryId)
+      if (index > -1) {
+        selectedCategories.value.splice(index, 1)
+      }
+    }
+    
+    const onCancel = () => {
+      router.go(-1)
+    }
+    
+    const onAddCategories = () => {
+      // Pass selected categories back to the edit page
+      const selectedCategoriesLabels = selectedCategoriesData.value.map(category => category.label)
+      
+      // Navigate back with the selected categories data
+      router.push({
+        name: 'edit',
+        query: {
+          ...route.query,
+          selectedCategories: JSON.stringify(selectedCategoriesLabels)
+        }
+      })
+    }
+    
+    // Load previously selected categories from route query
+    onMounted(() => {
+      if (route.query.currentSelection) {
+        try {
+          const currentSelection = JSON.parse(route.query.currentSelection)
+          // Convert labels back to IDs
+          selectedCategories.value = categories.value
+            .filter(category => currentSelection.includes(category.label))
+            .map(category => category.id)
+        } catch (error) {
+          console.error('Error parsing current selection:', error)
+        }
+      }
+    })
+    
+    return {
+      searchQuery,
+      selectedCategories,
+      hoveredCategoryId,
+      categories,
+      filteredCategories,
+      selectedCategoriesData,
+      isCategorySelected,
+      toggleCategorySelection,
+      removeCategorySelection,
+      onCancel,
+      onAddCategories
+    }
+  }
+}
+</script>
+
+<style scoped>
+.category-selector-page {
+  min-height: 100vh;
+  padding-bottom: 80px; /* Space for footer */
+}
+
+.category-list {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.category-item {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 2px solid transparent;
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.category-item:hover {
+  background-color: rgba(25, 118, 210, 0.1);
+  transform: translateY(-1px);
+}
+
+.category-item.selected {
+  background-color: rgba(25, 118, 210, 0.15);
+  border-color: var(--q-primary);
+}
+
+.category-icon {
+  margin-right: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  background: rgba(25, 118, 210, 0.1);
+}
+
+.category-info {
+  flex: 1;
+}
+
+.category-name {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 1.2;
+  margin-bottom: 4px;
+}
+
+.category-description {
+  font-size: 14px;
+}
+
+.selection-indicator {
+  margin-left: 16px;
+}
+
+.selected-section {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.selected-categories-container {
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.selected-categories-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.selected-category {
+  position: relative;
+}
+
+.selected-category-chip {
+  font-size: 14px;
+  padding: 8px 16px;
+  min-height: 36px;
+}
+
+/* Responsive design */
+@media (max-width: 600px) {
+  .category-item {
+    padding: 12px;
+  }
+  
+  .category-icon {
+    margin-right: 12px;
+    width: 40px;
+    height: 40px;
+  }
+  
+  .selected-categories-list {
+    gap: 6px;
+  }
+}
+
+/* Footer styling */
+.selector-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  border-top: 1px solid #e0e0e0;
+}
+
+.selector-footer .q-toolbar {
+  min-height: 60px;
+  padding: 8px 16px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/pages/EditPage.vue b/frontend/src/pages/EditPage.vue
index fa18b7e..c44b8f6 100644
--- a/frontend/src/pages/EditPage.vue
+++ b/frontend/src/pages/EditPage.vue
@@ -1,15 +1,12 @@
 <template>
-  <q-page padding class="edit-page-container">
-    <div class="row justify-center">
-      <div class="col-12 col-md-8 col-lg-3">
-        <q-card>
-          <q-card-section>
-            <div class="text-h5">Entry</div>
-            <div class="text-subtitle2 text-grey">Modify your life event details</div>
-          </q-card-section>
+  <q-page class="edit-page-container full-height">
+    <div class="row justify-center full-height">
+      <div class="col-12 col-md-8 col-lg-4 full-height">
+        <q-card class="full-height-card">
 
-          <q-card-section>
-            <q-form @submit.prevent="onSave" class="q-gutter-md">
+
+          <q-card-section class="flex-1 scroll">
+            <q-form @submit.prevent="onSave" class="q-gutter-md full-height-form">
               
               <!-- Tab Panels (without tab navigation here) -->
               <q-tab-panels v-model="currentTab" animated>
@@ -65,6 +62,28 @@
                         </div>
                       </div>
                       
+                      <!-- Mobile-friendly image selection -->
+                      <div class="q-mb-sm">
+                        <q-btn-group spread class="full-width">
+                          <q-btn 
+                            icon="photo_camera" 
+                            label="Camera" 
+                            color="primary" 
+                            outline
+                            @click="openCamera"
+                            class="col"
+                          />
+                          <q-btn 
+                            icon="photo_library" 
+                            label="Gallery" 
+                            color="primary" 
+                            outline
+                            @click="openGallery"
+                            class="col"
+                          />
+                        </q-btn-group>
+                      </div>
+                      
                       <q-file
                         v-model="form.keyImage"
                         label="Select key image *"
@@ -74,11 +93,30 @@
                         @rejected="onImageRejected"
                         @update:model-value="onKeyImageSelected"
                         :rules="[val => !!val || !!form.keyImageUrl || 'Key image is required']"
+                        ref="keyImageInput"
+                        style="display: none;"
                       >
                         <template v-slot:prepend>
                           <q-icon name="attach_file" />
                         </template>
                       </q-file>
+                      
+                      <!-- Hidden file inputs for camera and gallery -->
+                      <input
+                        type="file"
+                        ref="cameraInput"
+                        accept="image/*"
+                        capture="environment"
+                        style="display: none;"
+                        @change="handleCameraInput"
+                      />
+                      <input
+                        type="file"
+                        ref="galleryInput"
+                        accept="image/*"
+                        style="display: none;"
+                        @change="handleGalleryInput"
+                      />
                     </div>
                     
                   </div>
@@ -138,7 +176,7 @@
                   <!-- Title (formerly Subheadline) - Now mandatory -->
                   <q-input
                     v-model="form.subheadline"
-                    label="Title *"
+                    label="Short title for the wave*"
                     filled
                     :rules="[val => !!val || 'Title is required']"
                   />
@@ -188,37 +226,98 @@
                     <!-- Additional Images -->
                     <div class="q-mb-md">
                       <q-label class="text-subtitle2 q-mb-sm">Additional Images</q-label>
-                      <q-file
-                        v-model="form.additionalImages"
-                        label="Select additional images"
-                        filled
-                        multiple
+                      
+                      <!-- Mobile-friendly buttons for additional images -->
+                      <q-btn-group unelevated class="full-width q-mb-md">
+                        <q-btn
+                          unelevated
+                          color="primary"
+                          icon="photo_camera"
+                          label="Camera"
+                          class="col"
+                          @click="openAdditionalCamera"
+                        />
+                        <q-btn
+                          unelevated
+                          color="primary"
+                          icon="photo_library"
+                          label="Gallery"
+                          class="col"
+                          @click="openAdditionalGallery"
+                        />
+                      </q-btn-group>
+
+                      <!-- Hidden file inputs for additional images -->
+                      <input
+                        type="file"
+                        id="additionalCameraInput"
                         accept="image/*"
-                        max-file-size="5242880"
-                        @rejected="onImageRejected"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon name="photo_library" />
-                        </template>
-                      </q-file>
+                        capture="environment"
+                        multiple
+                        style="display: none;"
+                        @change="handleAdditionalCameraInput"
+                      />
+                      <input
+                        type="file"
+                        id="additionalGalleryInput"
+                        accept="image/*"
+                        multiple
+                        style="display: none;"
+                        @change="handleAdditionalGalleryInput"
+                      />
                       
                       <!-- Preview additional images -->
-                      <div v-if="form.additionalImageUrls.length > 0" class="row q-gutter-sm q-mt-sm">
-                        <div v-for="(url, index) in form.additionalImageUrls" :key="index" class="relative-position">
-                          <q-img
-                            :src="url"
-                            style="height: 80px; width: 80px"
-                            class="rounded-borders"
-                          />
-                          <q-btn
-                            icon="close"
-                            size="xs"
-                            round
-                            color="negative"
-                            class="absolute-top-right"
-                            style="margin: 4px"
-                            @click="removeAdditionalImage(index)"
-                          />
+                      <div v-if="form.additionalImages && form.additionalImages.length > 0" class="q-mt-md">
+                        <div class="text-caption text-grey q-mb-sm">Selected Images ({{ form.additionalImages.length }})</div>
+                        <div class="additional-images-grid">
+                          <div 
+                            v-for="(image, index) in form.additionalImages" 
+                            :key="index" 
+                            class="additional-image-item"
+                            @mouseenter="hoveredAdditionalImageIndex = index"
+                            @mouseleave="hoveredAdditionalImageIndex = null"
+                          >
+                            <q-img
+                              :src="URL.createObjectURL(image)"
+                              class="additional-image-thumbnail"
+                              fit="cover"
+                            />
+                            <div 
+                              v-show="hoveredAdditionalImageIndex === index"
+                              class="additional-image-overlay"
+                              @click="removeAdditionalImageFile(index)"
+                            >
+                              <q-icon name="close" size="20px" color="white" />
+                            </div>
+                            <div class="additional-image-name">{{ image.name }}</div>
+                          </div>
+                        </div>
+                      </div>
+                      
+                      <!-- Preview additional image URLs (for existing entries) -->
+                      <div v-if="form.additionalImageUrls.length > 0" class="q-mt-md">
+                        <div class="text-caption text-grey q-mb-sm">Existing Images ({{ form.additionalImageUrls.length }})</div>
+                        <div class="additional-images-grid">
+                          <div 
+                            v-for="(url, index) in form.additionalImageUrls" 
+                            :key="'url-' + index" 
+                            class="additional-image-item"
+                            @mouseenter="hoveredAdditionalUrlIndex = index"
+                            @mouseleave="hoveredAdditionalUrlIndex = null"
+                          >
+                            <q-img
+                              :src="url"
+                              class="additional-image-thumbnail"
+                              fit="cover"
+                            />
+                            <div 
+                              v-show="hoveredAdditionalUrlIndex === index"
+                              class="additional-image-overlay"
+                              @click="removeAdditionalImage(index)"
+                            >
+                              <q-icon name="close" size="20px" color="white" />
+                            </div>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -226,19 +325,87 @@
                     <!-- Audio Recordings -->
                     <div class="q-mb-md">
                       <q-label class="text-subtitle2 q-mb-sm">Audio Recordings</q-label>
-                      <q-file
-                        v-model="form.audioFiles"
-                        label="Select audio files"
-                        filled
-                        multiple
+                      
+                      <!-- Mobile-friendly buttons for audio -->
+                      <q-btn-group unelevated class="full-width q-mb-md">
+                        <q-btn
+                          unelevated
+                          color="accent"
+                          icon="mic"
+                          label="Record"
+                          class="col"
+                          @click="toggleAudioRecording"
+                          :loading="isRecording"
+                        />
+                        <q-btn
+                          unelevated
+                          color="accent"
+                          icon="audiotrack"
+                          label="Files"
+                          class="col"
+                          @click="openAudioFiles"
+                        />
+                      </q-btn-group>
+
+                      <!-- Recording status -->
+                      <div v-if="isRecording" class="q-mb-md text-center">
+                        <q-circular-progress
+                          show-value
+                          :value="recordingProgress"
+                          size="60px"
+                          color="accent"
+                          class="q-mb-sm"
+                        >
+                          {{ recordingTime }}s
+                        </q-circular-progress>
+                        <div class="text-caption text-accent">Recording...</div>
+                        <q-btn
+                          icon="stop"
+                          label="Stop"
+                          color="negative"
+                          @click="stopAudioRecording"
+                          class="q-mt-sm"
+                        />
+                      </div>
+
+                      <!-- Hidden file input for audio -->
+                      <input
+                        type="file"
+                        id="audioFilesInput"
                         accept="audio/*"
-                        max-file-size="10485760"
-                        @rejected="onAudioRejected"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon name="audiotrack" />
-                        </template>
-                      </q-file>
+                        multiple
+                        style="display: none;"
+                        @change="handleAudioFilesInput"
+                      />
+                      
+                      <!-- List selected audio files -->
+                      <div v-if="form.audioFiles && form.audioFiles.length > 0" class="q-mt-md">
+                        <div class="text-caption text-grey q-mb-sm">Selected Audio Files ({{ form.audioFiles.length }})</div>
+                        <div class="audio-files-list">
+                          <div 
+                            v-for="(file, index) in form.audioFiles" 
+                            :key="index" 
+                            class="audio-file-item"
+                            @mouseenter="hoveredAudioFileIndex = index"
+                            @mouseleave="hoveredAudioFileIndex = null"
+                          >
+                            <q-icon name="audiotrack" size="24px" color="accent" class="q-mr-sm" />
+                            <div class="audio-file-info">
+                              <div class="audio-file-name">{{ file.name }}</div>
+                              <div class="audio-file-size">{{ formatFileSize(file.size) }}</div>
+                            </div>
+                            <q-btn
+                              v-show="hoveredAudioFileIndex === index"
+                              icon="close"
+                              size="sm"
+                              round
+                              color="negative"
+                              flat
+                              @click="removeAudioFile(index)"
+                            />
+                          </div>
+                        </div>
+                      </div>
                       
                       <!-- List existing audio recordings -->
                       <div v-if="form.audioRecordings.length > 0" class="q-mt-sm">
@@ -272,19 +439,74 @@
                     <!-- Video Recordings -->
                     <div class="q-mb-md">
                       <q-label class="text-subtitle2 q-mb-sm">Video Recordings</q-label>
-                      <q-file
-                        v-model="form.videoFiles"
-                        label="Select video files"
-                        filled
-                        multiple
+                      
+                      <!-- Mobile-friendly buttons for videos -->
+                      <q-btn-group unelevated class="full-width q-mb-md">
+                        <q-btn
+                          unelevated
+                          color="secondary"
+                          icon="videocam"
+                          label="Record"
+                          class="col"
+                          @click="openVideoCamera"
+                        />
+                        <q-btn
+                          unelevated
+                          color="secondary"
+                          icon="video_library"
+                          label="Gallery"
+                          class="col"
+                          @click="openVideoGallery"
+                        />
+                      </q-btn-group>
+
+                      <!-- Hidden file inputs for videos -->
+                      <input
+                        type="file"
+                        id="videoCameraInput"
                         accept="video/*"
-                        max-file-size="52428800"
-                        @rejected="onVideoRejected"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon name="videocam" />
-                        </template>
-                      </q-file>
+                        capture="environment"
+                        multiple
+                        style="display: none;"
+                        @change="handleVideoCameraInput"
+                      />
+                      <input
+                        type="file"
+                        id="videoGalleryInput"
+                        accept="video/*"
+                        multiple
+                        style="display: none;"
+                        @change="handleVideoGalleryInput"
+                      />
+                      
+                      <!-- List selected video files -->
+                      <div v-if="form.videoFiles && form.videoFiles.length > 0" class="q-mt-md">
+                        <div class="text-caption text-grey q-mb-sm">Selected Video Files ({{ form.videoFiles.length }})</div>
+                        <div class="video-files-list">
+                          <div 
+                            v-for="(file, index) in form.videoFiles" 
+                            :key="index" 
+                            class="video-file-item"
+                            @mouseenter="hoveredVideoFileIndex = index"
+                            @mouseleave="hoveredVideoFileIndex = null"
+                          >
+                            <q-icon name="videocam" size="24px" color="secondary" class="q-mr-sm" />
+                            <div class="video-file-info">
+                              <div class="video-file-name">{{ file.name }}</div>
+                              <div class="video-file-size">{{ formatFileSize(file.size) }}</div>
+                            </div>
+                            <q-btn
+                              v-show="hoveredVideoFileIndex === index"
+                              icon="close"
+                              size="sm"
+                              round
+                              color="negative"
+                              flat
+                              @click="removeVideoFile(index)"
+                            />
+                          </div>
+                        </div>
+                      </div>
                       
                       <!-- List existing video recordings -->
                       <div v-if="form.videoRecordings.length > 0" class="q-mt-sm">
@@ -342,45 +564,83 @@
                   <div class="q-gutter-md q-mt-md">
                     
                     <!-- Location -->
-                    <q-input
-                      v-model="form.location"
-                      label="Location"
-                      filled
-                    >
-                      <template v-slot:prepend>
-                        <q-icon name="place" />
-                      </template>
-                    </q-input>
+                    <div class="q-mb-md">
+                      <q-label class="text-subtitle2 q-mb-sm">Location</q-label>
+                      
+                      <!-- Location input with current location button -->
+                      <div class="row q-gutter-sm">
+                        <q-input
+                          v-model="form.location"
+                          label="Enter location or use current"
+                          filled
+                          class="col"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon name="place" />
+                          </template>
+                        </q-input>
+                        
+                        <q-btn
+                          icon="my_location"
+                          color="primary"
+                          @click="getCurrentLocation"
+                          :loading="loadingLocation"
+                          :disable="loadingLocation"
+                          class="col-auto"
+                        >
+                          <q-tooltip class="bg-primary">Get current location</q-tooltip>
+                        </q-btn>
+                      </div>
+                      
+                      <!-- Location status -->
+                      <div v-if="locationStatus" class="q-mt-xs">
+                        <div class="text-caption" :class="locationStatus.type === 'success' ? 'text-positive' : 'text-negative'">
+                          {{ locationStatus.message }}
+                        </div>
+                      </div>
+                      
+                      <!-- Coordinates display (optional) -->
+                      <div v-if="currentCoordinates" class="q-mt-xs">
+                        <div class="text-caption text-grey">
+                          Coordinates: {{ currentCoordinates.lat.toFixed(6) }}, {{ currentCoordinates.lng.toFixed(6) }}
+                        </div>
+                      </div>
+                    </div>
 
                     <!-- Related Persons -->
                     <div class="q-mb-md">
                       <q-separator class="q-mt-lg q-mb-lg" />
                       <q-label class="text-subtitle2 q-mb-sm">Related Persons</q-label>
-                      <v-select
-                        v-model="selectedPerson"
-                        :options="personOptions"
-                        placeholder="Add related persons"
-                        class="vue-select-custom"
-                        @option:selected="addPerson"
-                        clearable
+                      
+                      <!-- Person selector button -->
+                      <q-btn
+                        unelevated
+                        color="primary"
+                        icon="person_add"
+                        :label="form.relatedPersons.length > 0 ? `Edit Persons (${form.relatedPersons.length})` : 'Select Persons'"
+                        class="full-width q-mb-md"
+                        @click="goToPersonSelector"
                       />
                       
-                      <!-- Selected persons circles -->
-                      <div v-if="form.relatedPersons.length > 0" class="person-circles q-mt-md">
-                        <div 
-                          v-for="(person, index) in form.relatedPersons" 
-                          :key="index"
-                          class="person-circle"
-                          @mouseenter="hoveredPersonIndex = index"
-                          @mouseleave="hoveredPersonIndex = null"
-                        >
-                          <div class="person-initials">{{ getInitials(person) }}</div>
+                      <!-- Selected persons display -->
+                      <div v-if="form.relatedPersons.length > 0" class="selected-persons-display">
+                        <div class="person-circles">
                           <div 
-                            v-if="hoveredPersonIndex === index"
-                            class="person-delete"
-                            @click="removePerson(index)"
+                            v-for="(person, index) in form.relatedPersons" 
+                            :key="index"
+                            class="person-circle"
+                            @mouseenter="hoveredPersonIndex = index"
+                            @mouseleave="hoveredPersonIndex = null"
                           >
-                            ×
+                            <div class="person-initials">{{ getInitials(person) }}</div>
+                            <div class="person-name-tooltip">{{ person }}</div>
+                            <div 
+                              v-if="hoveredPersonIndex === index"
+                              class="person-delete"
+                              @click="removePerson(index)"
+                            >
+                              ×
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -389,71 +649,72 @@
                     <!-- Category Selection -->
                     <div class="q-mb-md">
                       <q-separator class="q-mb-md" />
-                      <q-label class="text-subtitle2 q-mb-sm">Category</q-label>
+                      <q-label class="text-subtitle2 q-mb-sm">Categories</q-label>
                       
-                      <!-- Main Category Selection with vue-select -->
-                      <div class="q-mb-md">
-                        <label class="text-caption text-grey q-mb-xs block">Main category</label>
-                        <v-select
-                          v-model="selectedMainCategory"
-                          :options="mainCategoryOptions"
-                          label="label"
-                          :reduce="option => option.value"
-                          placeholder="Select main category"
-                          :clearable="true"
-                          @update:modelValue="onMainCategoryChange"
-                          class="vue-select-custom"
-                        />
-                      </div>
-                      
-                      <!-- Subcategory Selection -->
-                      <q-select
-                        v-model="form.category"
-                        label="Subcategory"
-                        filled
-                        :options="availableSubcategories"
-                        emit-value
-                        map-options
-                        clearable
-                        :disable="!selectedMainCategory || availableSubcategories.length === 0"
+                      <!-- Category selector button -->
+                      <q-btn
+                        unelevated
+                        color="primary"
+                        icon="category"
+                        :label="form.categories && form.categories.length > 0 ? `Edit Categories (${form.categories.length})` : 'Select Categories'"
+                        class="full-width q-mb-md"
+                        @click="goToCategorySelector"
                       />
                       
-                      <div v-if="selectedMainCategory && availableSubcategories.length === 0" class="text-caption text-grey q-mt-xs">
-                        This category has no subcategories
+                      <!-- Selected categories display -->
+                      <div v-if="form.categories && form.categories.length > 0" class="selected-categories-display">
+                        <div class="category-chips">
+                          <q-chip
+                            v-for="(category, index) in form.categories"
+                            :key="index"
+                            :removable="hoveredCategoryIndex === index"
+                            @remove="removeCategory(index)"
+                            @mouseenter="hoveredCategoryIndex = index"
+                            @mouseleave="hoveredCategoryIndex = null"
+                            color="primary"
+                            text-color="white"
+                            icon="category"
+                            class="category-chip"
+                          >
+                            {{ category }}
+                          </q-chip>
+                        </div>
                       </div>
                     </div>
 
                     <!-- Tags -->
                     <div class="q-mb-md">
                       <q-label class="text-subtitle2 q-mb-sm">Tags</q-label>
-                      <q-select
-                        v-model="form.tags"
-                        label="Add tags"
-                        filled
-                        multiple
-                        use-input
-                        use-chips
-                        new-value-mode="add-unique"
-                        :options="tagOptions"
-                        @filter="filterTags"
-                      />
-                    </div>
-
-                    <!-- Delete Entry Section -->
-                    <div class="q-mb-md q-mt-lg">
-                      <q-separator class="q-mb-md" />
-                      <q-label class="text-subtitle2 q-mb-sm text-negative">Danger Zone</q-label>
-                      <p class="text-caption text-grey q-mb-md">
-                        Once you delete this entry, it cannot be recovered. Please be certain.
-                      </p>
+                      
+                      <!-- Tag selector button -->
                       <q-btn
-                        label="Delete Entry"
-                        icon="delete"
-                        color="negative"
-                        outline
-                        @click="confirmDelete"
-                        class="full-width"
+                        unelevated
+                        color="secondary"
+                        icon="tag"
+                        :label="form.tags && form.tags.length > 0 ? `Edit Tags (${form.tags.length})` : 'Select Tags'"
+                        class="full-width q-mb-md"
+                        @click="goToTagSelector"
                       />
+                      
+                      <!-- Selected tags display -->
+                      <div v-if="form.tags && form.tags.length > 0" class="selected-tags-display">
+                        <div class="tag-chips">
+                          <q-chip
+                            v-for="(tag, index) in form.tags"
+                            :key="index"
+                            :removable="hoveredTagIndex === index"
+                            @remove="removeTag(index)"
+                            @mouseenter="hoveredTagIndex = index"
+                            @mouseleave="hoveredTagIndex = null"
+                            color="secondary"
+                            text-color="white"
+                            icon="tag"
+                            class="tag-chip"
+                          >
+                            {{ tag }}
+                          </q-chip>
+                        </div>
+                      </div>
                     </div>
 
                   </div>
@@ -512,10 +773,10 @@
         align="justify"
         narrow-indicator
       >
-        <q-tab name="basics" icon="event" label="Event" />
-        <q-tab name="content" icon="article" label="Content" />
-        <q-tab name="media" icon="perm_media" label="Media" />
-        <q-tab name="details" icon="info" label="Details" />
+        <q-tab name="basics" icon="event" />
+        <q-tab name="content" icon="article"  />
+        <q-tab name="media" icon="perm_media" />
+        <q-tab name="details" icon="info"  />
       </q-tabs>
     </q-footer>
   </q-page>
@@ -525,15 +786,10 @@
 import { ref, reactive, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useQuasar } from 'quasar'
-import vSelect from 'vue-select'
-import 'vue-select/dist/vue-select.css'
 import { tagOptions, personOptions, defaultFormData, getMainCategories, getSubcategories } from '../utils/editFormOptions.js'
 
 export default {
   name: 'EditPage',
-  components: {
-    'v-select': vSelect
-  },
   setup() {
     const $q = useQuasar()
     const router = useRouter()
@@ -570,9 +826,29 @@ export default {
     const selectedPerson = ref(null)
     const hoveredPersonIndex = ref(null)
 
+    // Category and tag hover states
+    const hoveredCategoryIndex = ref(null)
+    const hoveredTagIndex = ref(null)
+
     // Media file hover states
     const hoveredAudioIndex = ref(null)
     const hoveredVideoIndex = ref(null)
+    const hoveredAdditionalImageIndex = ref(null)
+    const hoveredAdditionalUrlIndex = ref(null)
+    const hoveredAudioFileIndex = ref(null)
+    const hoveredVideoFileIndex = ref(null)
+
+    // Audio recording state
+    const isRecording = ref(false)
+    const recordingTime = ref(0)
+    const recordingProgress = ref(0)
+    const mediaRecorder = ref(null)
+    const recordingInterval = ref(null)
+
+    // Location state
+    const loadingLocation = ref(false)
+    const locationStatus = ref(null)
+    const currentCoordinates = ref(null)
 
     // Options for selects - imported from external file
     const tagOptionsRef = ref([...tagOptions])
@@ -594,6 +870,39 @@ export default {
       }
     }
 
+    const goToPersonSelector = () => {
+      // Navigate to person selector with current selection
+      router.push({
+        name: 'person-selector',
+        query: {
+          currentSelection: JSON.stringify(form.relatedPersons),
+          returnTo: 'edit'
+        }
+      })
+    }
+
+    const goToCategorySelector = () => {
+      // Navigate to category selector with current selection
+      router.push({
+        name: 'category-selector',
+        query: {
+          currentSelection: JSON.stringify(form.categories || []),
+          returnTo: 'edit'
+        }
+      })
+    }
+
+    const goToTagSelector = () => {
+      // Navigate to tag selector with current selection
+      router.push({
+        name: 'tag-selector',
+        query: {
+          currentSelection: JSON.stringify(form.tags || []),
+          returnTo: 'edit'
+        }
+      })
+    }
+
     // Methods
     const loadEntry = () => {
       // TODO: Load entry data based on route params
@@ -634,6 +943,320 @@ export default {
       router.push('/wave')
     }
 
+    // Mobile image selection methods
+    const openCamera = () => {
+      const cameraInput = document.getElementById('cameraInput')
+      if (cameraInput) {
+        cameraInput.click()
+      }
+    }
+
+    const openGallery = () => {
+      const galleryInput = document.getElementById('galleryInput')
+      if (galleryInput) {
+        galleryInput.click()
+      }
+    }
+
+    const handleCameraInput = (event) => {
+      const files = event.target.files
+      if (files && files.length > 0) {
+        form.keyImage = files[0]
+      }
+    }
+
+    const handleGalleryInput = (event) => {
+      const files = event.target.files
+      if (files && files.length > 0) {
+        form.keyImage = files[0]
+      }
+    }
+
+    // Additional Images Methods
+    const openAdditionalCamera = () => {
+      const input = document.getElementById('additionalCameraInput')
+      if (input) input.click()
+    }
+
+    const openAdditionalGallery = () => {
+      const input = document.getElementById('additionalGalleryInput')
+      if (input) input.click()
+    }
+
+    const handleAdditionalCameraInput = (event) => {
+      const files = event.target.files
+      if (files && files.length > 0) {
+        const newImages = Array.from(files)
+        if (form.additionalImages) {
+          form.additionalImages = [...form.additionalImages, ...newImages]
+        } else {
+          form.additionalImages = newImages
+        }
+      }
+    }
+
+    const handleAdditionalGalleryInput = (event) => {
+      const files = event.target.files
+      if (files && files.length > 0) {
+        const newImages = Array.from(files)
+        if (form.additionalImages) {
+          form.additionalImages = [...form.additionalImages, ...newImages]
+        } else {
+          form.additionalImages = newImages
+        }
+      }
+    }
+
+    // Video Methods
+    const openVideoCamera = () => {
+      const input = document.getElementById('videoCameraInput')
+      if (input) input.click()
+    }
+
+    const openVideoGallery = () => {
+      const input = document.getElementById('videoGalleryInput')
+      if (input) input.click()
+    }
+
+    const handleVideoCameraInput = (event) => {
+      const files = event.target.files
+      if (files && files.length > 0) {
+        const newVideos = Array.from(files)
+        if (form.videoFiles) {
+          form.videoFiles = [...form.videoFiles, ...newVideos]
+        } else {
+          form.videoFiles = newVideos
+        }
+      }
+    }
+
+    const handleVideoGalleryInput = (event) => {
+      const files = event.target.files
+      if (files && files.length > 0) {
+        const newVideos = Array.from(files)
+        if (form.videoFiles) {
+          form.videoFiles = [...form.videoFiles, ...newVideos]
+        } else {
+          form.videoFiles = newVideos
+        }
+      }
+    }
+
+    // Audio Methods
+    const openAudioFiles = () => {
+      const input = document.getElementById('audioFilesInput')
+      if (input) input.click()
+    }
+
+    const handleAudioFilesInput = (event) => {
+      const files = event.target.files
+      if (files && files.length > 0) {
+        const newAudio = Array.from(files)
+        if (form.audioFiles) {
+          form.audioFiles = [...form.audioFiles, ...newAudio]
+        } else {
+          form.audioFiles = newAudio
+        }
+      }
+    }
+
+    const toggleAudioRecording = async () => {
+      if (isRecording.value) {
+        stopAudioRecording()
+      } else {
+        startAudioRecording()
+      }
+    }
+
+    const startAudioRecording = async () => {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+        mediaRecorder.value = new MediaRecorder(stream)
+        
+        const chunks = []
+        mediaRecorder.value.ondataavailable = (event) => {
+          chunks.push(event.data)
+        }
+        
+        mediaRecorder.value.onstop = () => {
+          const blob = new Blob(chunks, { type: 'audio/wav' })
+          const file = new File([blob], `recording-${Date.now()}.wav`, { type: 'audio/wav' })
+          
+          if (form.audioFiles) {
+            form.audioFiles = [...form.audioFiles, file]
+          } else {
+            form.audioFiles = [file]
+          }
+          
+          // Cleanup
+          stream.getTracks().forEach(track => track.stop())
+        }
+        
+        isRecording.value = true
+        recordingTime.value = 0
+        recordingProgress.value = 0
+        
+        mediaRecorder.value.start()
+        
+        // Update recording time
+        recordingInterval.value = setInterval(() => {
+          recordingTime.value += 1
+          recordingProgress.value = (recordingTime.value / 60) * 100 // Max 60 seconds
+          
+          if (recordingTime.value >= 60) {
+            stopAudioRecording()
+          }
+        }, 1000)
+        
+      } catch (error) {
+        console.error('Error accessing microphone:', error)
+        $q.notify({
+          type: 'negative',
+          message: 'Could not access microphone. Please check permissions.'
+        })
+      }
+    }
+
+    const stopAudioRecording = () => {
+      if (mediaRecorder.value && isRecording.value) {
+        mediaRecorder.value.stop()
+        isRecording.value = false
+        
+        if (recordingInterval.value) {
+          clearInterval(recordingInterval.value)
+          recordingInterval.value = null
+        }
+      }
+    }
+
+    // Location Methods
+    const getCurrentLocation = () => {
+      if (!navigator.geolocation) {
+        locationStatus.value = {
+          type: 'error',
+          message: 'Geolocation is not supported by this browser.'
+        }
+        return
+      }
+
+      loadingLocation.value = true
+      locationStatus.value = null
+
+      navigator.geolocation.getCurrentPosition(
+        async (position) => {
+          const { latitude, longitude } = position.coords
+          currentCoordinates.value = { lat: latitude, lng: longitude }
+          
+          try {
+            // Try to get human-readable address using reverse geocoding
+            const locationName = await reverseGeocode(latitude, longitude)
+            form.location = locationName
+            
+            locationStatus.value = {
+              type: 'success',
+              message: 'Location updated successfully!'
+            }
+          } catch {
+            // Fallback to coordinates if reverse geocoding fails
+            form.location = `${latitude.toFixed(6)}, ${longitude.toFixed(6)}`
+            locationStatus.value = {
+              type: 'success',
+              message: 'Coordinates added (address lookup failed)'
+            }
+          }
+          
+          loadingLocation.value = false
+          
+          // Clear status after 3 seconds
+          setTimeout(() => {
+            locationStatus.value = null
+          }, 3000)
+        },
+        (error) => {
+          loadingLocation.value = false
+          let message = 'Failed to get location: '
+          
+          switch (error.code) {
+            case error.PERMISSION_DENIED:
+              message += 'Location access denied by user.'
+              break
+            case error.POSITION_UNAVAILABLE:
+              message += 'Location information unavailable.'
+              break
+            case error.TIMEOUT:
+              message += 'Location request timed out.'
+              break
+            default:
+              message += 'Unknown error occurred.'
+              break
+          }
+          
+          locationStatus.value = {
+            type: 'error',
+            message: message
+          }
+          
+          // Clear status after 5 seconds
+          setTimeout(() => {
+            locationStatus.value = null
+          }, 5000)
+        },
+        {
+          enableHighAccuracy: true,
+          timeout: 10000,
+          maximumAge: 60000
+        }
+      )
+    }
+
+    // Simple reverse geocoding using a free service
+    const reverseGeocode = async (lat, lng) => {
+      try {
+        // Using OpenStreetMap Nominatim service (free, no API key required)
+        const response = await fetch(
+          `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&zoom=16&addressdetails=1`,
+          {
+            headers: {
+              'User-Agent': 'ThatsMe-App/1.0'
+            }
+          }
+        )
+        
+        if (!response.ok) {
+          throw new Error('Geocoding service unavailable')
+        }
+        
+        const data = await response.json()
+        
+        if (data.display_name) {
+          // Extract useful parts of the address
+          const address = data.address || {}
+          const parts = []
+          
+          if (address.house_number && address.road) {
+            parts.push(`${address.house_number} ${address.road}`)
+          } else if (address.road) {
+            parts.push(address.road)
+          }
+          
+          if (address.city || address.town || address.village) {
+            parts.push(address.city || address.town || address.village)
+          }
+          
+          if (address.country) {
+            parts.push(address.country)
+          }
+          
+          return parts.length > 0 ? parts.join(', ') : data.display_name
+        }
+        
+        throw new Error('No address found')
+      } catch (error) {
+        console.error('Reverse geocoding failed:', error)
+        throw error
+      }
+    }
+
     const onImageRejected = (rejectedEntries) => {
       $q.notify({
         type: 'negative',
@@ -659,6 +1282,24 @@ export default {
       form.additionalImageUrls.splice(index, 1)
     }
 
+    const removeAdditionalImageFile = (index) => {
+      if (form.additionalImages) {
+        form.additionalImages.splice(index, 1)
+      }
+    }
+
+    const removeAudioFile = (index) => {
+      if (form.audioFiles) {
+        form.audioFiles.splice(index, 1)
+      }
+    }
+
+    const removeVideoFile = (index) => {
+      if (form.videoFiles) {
+        form.videoFiles.splice(index, 1)
+      }
+    }
+
     // Key image handling functions
     const getKeyImagePreview = () => {
       if (form.keyImage) {
@@ -737,6 +1378,18 @@ export default {
       form.relatedPersons.splice(index, 1)
     }
 
+    const removeCategory = (index) => {
+      if (form.categories) {
+        form.categories.splice(index, 1)
+      }
+    }
+
+    const removeTag = (index) => {
+      if (form.tags) {
+        form.tags.splice(index, 1)
+      }
+    }
+
     const onMainCategoryChange = (newMainCategory) => {
       selectedMainCategory.value = newMainCategory
       form.category = '' // Reset subcategory when main category changes
@@ -763,6 +1416,72 @@ export default {
         window.dispatchEvent(closeEvent)
       }
       
+      // Handle selected persons from PersonSelector
+      if (route.query.selectedPersons) {
+        try {
+          const selectedPersons = JSON.parse(route.query.selectedPersons)
+          form.relatedPersons = selectedPersons
+          
+          // Navigate to details tab
+          currentTab.value = 'details'
+          
+          // Clear the query parameter
+          router.replace({
+            name: route.name,
+            query: {
+              ...route.query,
+              selectedPersons: undefined
+            }
+          })
+        } catch (error) {
+          console.error('Error parsing selected persons:', error)
+        }
+      }
+
+      // Handle selected categories from CategorySelector
+      if (route.query.selectedCategories) {
+        try {
+          const selectedCategories = JSON.parse(route.query.selectedCategories)
+          form.categories = selectedCategories
+          
+          // Navigate to details tab
+          currentTab.value = 'details'
+          
+          // Clear the query parameter
+          router.replace({
+            name: route.name,
+            query: {
+              ...route.query,
+              selectedCategories: undefined
+            }
+          })
+        } catch (error) {
+          console.error('Error parsing selected categories:', error)
+        }
+      }
+
+      // Handle selected tags from TagSelector
+      if (route.query.selectedTags) {
+        try {
+          const selectedTags = JSON.parse(route.query.selectedTags)
+          form.tags = selectedTags
+          
+          // Navigate to details tab
+          currentTab.value = 'details'
+          
+          // Clear the query parameter
+          router.replace({
+            name: route.name,
+            query: {
+              ...route.query,
+              selectedTags: undefined
+            }
+          })
+        } catch (error) {
+          console.error('Error parsing selected tags:', error)
+        }
+      }
+      
       loadEntry()
     })
 
@@ -774,21 +1493,63 @@ export default {
       availableSubcategories,
       selectedPerson,
       hoveredPersonIndex,
+      hoveredCategoryIndex,
+      hoveredTagIndex,
       hoveredAudioIndex,
       hoveredVideoIndex,
+      hoveredAdditionalImageIndex,
+      hoveredAdditionalUrlIndex,
+      hoveredAudioFileIndex,
+      hoveredVideoFileIndex,
+      // Audio recording state
+      isRecording,
+      recordingTime,
+      recordingProgress,
+      // Location state
+      loadingLocation,
+      locationStatus,
+      currentCoordinates,
       tagOptions: tagOptionsRef,
       personOptions: personOptionsRef,
       mainCategoryOptions,
       goToNextTab,
       goToPreviousTab,
+      goToPersonSelector,
+      goToCategorySelector,
+      goToTagSelector,
       onSave,
       onCancel,
       confirmDelete,
       onDelete,
+      // Location methods
+      getCurrentLocation,
+      // Key image methods
+      openCamera,
+      openGallery,
+      handleCameraInput,
+      handleGalleryInput,
+      // Additional images methods
+      openAdditionalCamera,
+      openAdditionalGallery,
+      handleAdditionalCameraInput,
+      handleAdditionalGalleryInput,
+      // Video methods
+      openVideoCamera,
+      openVideoGallery,
+      handleVideoCameraInput,
+      handleVideoGalleryInput,
+      // Audio methods
+      openAudioFiles,
+      handleAudioFilesInput,
+      toggleAudioRecording,
+      // File handling methods
       onImageRejected,
       onAudioRejected,
       onVideoRejected,
       removeAdditionalImage,
+      removeAdditionalImageFile,
+      removeAudioFile,
+      removeVideoFile,
       getKeyImagePreview,
       onKeyImageSelected,
       removeKeyImage,
@@ -800,7 +1561,9 @@ export default {
       onMainCategoryChange,
       getInitials,
       addPerson,
-      removePerson
+      removePerson,
+      removeCategory,
+      removeTag
     }
   }
 }
@@ -819,7 +1582,64 @@ export default {
 
 /* Add padding bottom to prevent content from being hidden behind footer */
 .edit-page-container {
+  padding: 16px;
   padding-bottom: 80px; /* Adjust based on footer height */
+  min-height: 100vh;
+}
+
+/* Full height layout */
+.edit-page-container.full-height {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.edit-page-container .row.full-height {
+  flex: 1;
+  margin: 0;
+}
+
+.edit-page-container .col-12.full-height {
+  display: flex;
+  flex-direction: column;
+}
+
+.full-height-card {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  max-height: calc(100vh - 112px); /* Account for page padding and footer */
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
+.full-height-card .q-card-section.flex-1 {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.full-height-form {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.full-height-form .q-tab-panels {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: none;
+}
+
+.full-height-form .q-tab-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.scroll {
+  overflow-y: auto;
 }
 
 /* Style the edit footer */
@@ -1018,6 +1838,61 @@ export default {
   transform: scale(1.1);
 }
 
+.person-name-tooltip {
+  position: absolute;
+  bottom: -30px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+  z-index: 10;
+}
+
+.person-circle:hover .person-name-tooltip {
+  opacity: 1;
+}
+
+.selected-persons-display {
+  margin-top: 8px;
+  padding: 12px;
+  background: rgba(25, 118, 210, 0.05);
+  border-radius: 8px;
+  border: 1px solid rgba(25, 118, 210, 0.2);
+}
+
+/* Category and Tag chips styling */
+.selected-categories-display,
+.selected-tags-display {
+  margin-top: 8px;
+}
+
+.category-chips,
+.tag-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.category-chip,
+.tag-chip {
+  font-size: 14px;
+  min-height: 32px;
+  transition: all 0.2s ease;
+}
+
+.category-chip:hover,
+.tag-chip:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
 /* Media thumbnails styling */
 .media-thumbnails {
   display: flex;
@@ -1098,4 +1973,108 @@ export default {
   background: #d32f2f;
   transform: scale(1.1);
 }
+
+/* Additional Images Grid */
+.additional-images-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 12px;
+}
+
+.additional-image-item {
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #f5f5f5;
+  transition: all 0.2s ease;
+}
+
+.additional-image-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.additional-image-thumbnail {
+  width: 100%;
+  height: 120px;
+  border-radius: 8px 8px 0 0;
+}
+
+.additional-image-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 20px;
+  background: rgba(244, 67, 54, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.additional-image-overlay:hover {
+  background: rgba(244, 67, 54, 0.9);
+}
+
+.additional-image-name {
+  padding: 8px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.6);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background: white;
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+/* Audio and Video File Lists */
+.audio-files-list,
+.video-files-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.audio-file-item,
+.video-file-item {
+  display: flex;
+  align-items: center;
+  background: #f5f5f5;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 8px;
+  padding: 12px;
+  transition: all 0.2s ease;
+}
+
+.audio-file-item:hover,
+.video-file-item:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.audio-file-info,
+.video-file-info {
+  flex: 1;
+  min-width: 0;
+  margin-left: 8px;
+}
+
+.audio-file-name,
+.video-file-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.87);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 2px;
+}
+
+.audio-file-size,
+.video-file-size {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.6);
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/pages/PersonSelector.vue b/frontend/src/pages/PersonSelector.vue
new file mode 100644
index 0000000..2254e7f
--- /dev/null
+++ b/frontend/src/pages/PersonSelector.vue
@@ -0,0 +1,423 @@
+<template>
+  <q-page padding class="person-selector-page">
+    <div class="row justify-center">
+      <div class="col-12 col-md-8 col-lg-6">
+        <q-card>
+          <q-card-section>
+            <div class="text-h5">Select Related Persons</div>
+            <div class="text-subtitle2 text-grey">Choose people related to this life event</div>
+          </q-card-section>
+
+          <q-card-section>
+            <!-- Search bar -->
+            <q-input
+              v-model="searchQuery"
+              label="Search persons..."
+              filled
+              clearable
+              class="q-mb-md"
+            >
+              <template v-slot:prepend>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+
+            <!-- Person list -->
+            <div class="person-list q-gutter-md">
+              <div
+                v-for="person in filteredPersons"
+                :key="person.id"
+                class="person-item"
+                :class="{ 'selected': isPersonSelected(person.id) }"
+                @click="togglePersonSelection(person.id)"
+              >
+                <div class="person-avatar">
+                  <q-avatar
+                    v-if="person.avatar"
+                    size="60px"
+                    class="person-avatar-img"
+                  >
+                    <img :src="person.avatar" :alt="person.name" />
+                  </q-avatar>
+                  <q-avatar
+                    v-else
+                    size="60px"
+                    color="primary"
+                    text-color="white"
+                    class="person-avatar-initials"
+                  >
+                    {{ getInitials(person.name) }}
+                  </q-avatar>
+                  
+                  <!-- Selection indicator -->
+                  <q-icon
+                    v-if="isPersonSelected(person.id)"
+                    name="check_circle"
+                    color="positive"
+                    size="24px"
+                    class="selection-indicator"
+                  />
+                </div>
+                
+                <div class="person-info">
+                  <div class="person-name">{{ person.name }}</div>
+                  <div v-if="person.role" class="person-role text-grey">{{ person.role }}</div>
+                </div>
+              </div>
+            </div>
+          </q-card-section>
+
+          <!-- Selected persons section -->
+          <q-card-section v-if="selectedPersons.length > 0" class="selected-section">
+            <q-separator class="q-mb-md" />
+            
+            <div class="text-subtitle2 q-mb-md">Selected Persons ({{ selectedPersons.length }})</div>
+            
+            <div class="selected-persons-container">
+              <div class="selected-persons-list">
+                <div
+                  v-for="person in selectedPersonsData"
+                  :key="person.id"
+                  class="selected-person"
+                  @mouseenter="hoveredPersonId = person.id"
+                  @mouseleave="hoveredPersonId = null"
+                >
+                  <q-avatar
+                    v-if="person.avatar"
+                    size="50px"
+                    class="selected-avatar"
+                  >
+                    <img :src="person.avatar" :alt="person.name" />
+                  </q-avatar>
+                  <q-avatar
+                    v-else
+                    size="50px"
+                    color="primary"
+                    text-color="white"
+                    class="selected-avatar"
+                  >
+                    {{ getInitials(person.name) }}
+                  </q-avatar>
+                  
+                  <!-- Remove button on hover -->
+                  <div
+                    v-if="hoveredPersonId === person.id"
+                    class="remove-person"
+                    @click.stop="removePersonSelection(person.id)"
+                  >
+                    ×
+                  </div>
+                  
+                  <div class="selected-person-name">{{ person.name }}</div>
+                </div>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <!-- Fixed Footer with Action Buttons -->
+    <q-footer elevated class="bg-white text-dark selector-footer">
+      <q-toolbar class="justify-between">
+        <q-btn
+          icon="arrow_back"
+          color="grey"
+          flat
+          round
+          @click="onCancel"
+          class="q-ml-sm"
+        >
+          <q-tooltip class="bg-grey">Cancel</q-tooltip>
+        </q-btn>
+        
+        <q-btn
+          label="Add Persons"
+          color="primary"
+          unelevated
+          :disable="selectedPersons.length === 0"
+          @click="onAddPersons"
+          class="q-mr-sm"
+        />
+      </q-toolbar>
+    </q-footer>
+  </q-page>
+</template>
+
+<script>
+import { ref, computed, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { personOptions } from '../utils/editFormOptions.js'
+
+export default {
+  name: 'PersonSelector',
+  setup() {
+    const router = useRouter()
+    const route = useRoute()
+    
+    // State
+    const searchQuery = ref('')
+    const selectedPersons = ref([])
+    const hoveredPersonId = ref(null)
+    
+    // Convert simple person names to objects with IDs
+    const persons = ref(
+      personOptions.map((name, index) => ({
+        id: index + 1,
+        name: name,
+        avatar: null, // Could be loaded from API later
+        role: null // Could be added later
+      }))
+    )
+    
+    // Computed
+    const filteredPersons = computed(() => {
+      if (!searchQuery.value) {
+        return persons.value
+      }
+      return persons.value.filter(person =>
+        person.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+      )
+    })
+    
+    const selectedPersonsData = computed(() => {
+      return persons.value.filter(person => selectedPersons.value.includes(person.id))
+    })
+    
+    // Methods
+    const getInitials = (name) => {
+      return name
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase())
+        .slice(0, 2)
+        .join('')
+    }
+    
+    const isPersonSelected = (personId) => {
+      return selectedPersons.value.includes(personId)
+    }
+    
+    const togglePersonSelection = (personId) => {
+      const index = selectedPersons.value.indexOf(personId)
+      if (index > -1) {
+        selectedPersons.value.splice(index, 1)
+      } else {
+        selectedPersons.value.push(personId)
+      }
+    }
+    
+    const removePersonSelection = (personId) => {
+      const index = selectedPersons.value.indexOf(personId)
+      if (index > -1) {
+        selectedPersons.value.splice(index, 1)
+      }
+    }
+    
+    const onCancel = () => {
+      router.go(-1)
+    }
+    
+    const onAddPersons = () => {
+      // Pass selected persons back to the edit page
+      const selectedPersonsNames = selectedPersonsData.value.map(person => person.name)
+      
+      // Navigate back with the selected persons data
+      // We'll use query parameters to pass the data
+      router.push({
+        name: 'edit',
+        query: {
+          ...route.query,
+          selectedPersons: JSON.stringify(selectedPersonsNames)
+        }
+      })
+    }
+    
+    // Load previously selected persons from route query
+    onMounted(() => {
+      if (route.query.currentSelection) {
+        try {
+          const currentSelection = JSON.parse(route.query.currentSelection)
+          // Convert names back to IDs
+          selectedPersons.value = persons.value
+            .filter(person => currentSelection.includes(person.name))
+            .map(person => person.id)
+        } catch (error) {
+          console.error('Error parsing current selection:', error)
+        }
+      }
+    })
+    
+    return {
+      searchQuery,
+      selectedPersons,
+      hoveredPersonId,
+      persons,
+      filteredPersons,
+      selectedPersonsData,
+      getInitials,
+      isPersonSelected,
+      togglePersonSelection,
+      removePersonSelection,
+      onCancel,
+      onAddPersons
+    }
+  }
+}
+</script>
+
+<style scoped>
+.person-selector-page {
+  min-height: 100vh;
+  padding-bottom: 80px; /* Space for footer */
+}
+
+.person-list {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.person-item {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 2px solid transparent;
+}
+
+.person-item:hover {
+  background-color: rgba(25, 118, 210, 0.1);
+}
+
+.person-item.selected {
+  background-color: rgba(25, 118, 210, 0.15);
+  border-color: var(--q-primary);
+}
+
+.person-avatar {
+  position: relative;
+  margin-right: 16px;
+}
+
+.selection-indicator {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  background: white;
+  border-radius: 50%;
+}
+
+.person-info {
+  flex: 1;
+}
+
+.person-name {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 1.2;
+}
+
+.person-role {
+  font-size: 14px;
+  margin-top: 2px;
+}
+
+.selected-section {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.selected-persons-container {
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.selected-persons-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.selected-person {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px;
+  border-radius: 8px;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  min-width: 80px;
+}
+
+.selected-person:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.selected-avatar {
+  margin-bottom: 8px;
+}
+
+.selected-person-name {
+  font-size: 12px;
+  text-align: center;
+  line-height: 1.2;
+  max-width: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.remove-person {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 20px;
+  height: 20px;
+  background: rgba(244, 67, 54, 0.9);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.remove-person:hover {
+  background: #f44336;
+  transform: scale(1.1);
+}
+
+/* Responsive design */
+@media (max-width: 600px) {
+  .selected-persons-list {
+    justify-content: center;
+  }
+  
+  .person-item {
+    padding: 8px;
+  }
+  
+  .person-avatar {
+    margin-right: 12px;
+  }
+}
+
+/* Footer styling */
+.selector-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  border-top: 1px solid #e0e0e0;
+}
+
+.selector-footer .q-toolbar {
+  min-height: 60px;
+  padding: 8px 16px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/pages/TagSelector.vue b/frontend/src/pages/TagSelector.vue
new file mode 100644
index 0000000..e703d0d
--- /dev/null
+++ b/frontend/src/pages/TagSelector.vue
@@ -0,0 +1,445 @@
+<template>
+  <q-page padding class="tag-selector-page">
+    <div class="row justify-center">
+      <div class="col-12 col-md-8 col-lg-6">
+        <q-card>
+          <q-card-section>
+            <div class="text-h5">Select Tags</div>
+            <div class="text-subtitle2 text-grey">Add tags to describe the mood and nature of this event</div>
+          </q-card-section>
+
+          <q-card-section>
+            <!-- Search bar -->
+            <q-input
+              v-model="searchQuery"
+              label="Search tags..."
+              filled
+              clearable
+              class="q-mb-md"
+            >
+              <template v-slot:prepend>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+
+            <!-- Tag categories -->
+            <div class="tag-categories q-mb-md">
+              <q-btn-toggle
+                v-model="selectedTagCategory"
+                :options="tagCategoryOptions"
+                color="primary"
+                unelevated
+                class="full-width"
+              />
+            </div>
+
+            <!-- Tag grid -->
+            <div class="tag-grid">
+              <div
+                v-for="tag in filteredTags"
+                :key="tag.id"
+                class="tag-item"
+                :class="{ 'selected': isTagSelected(tag.id) }"
+                @click="toggleTagSelection(tag.id)"
+              >
+                <div class="tag-content">
+                  <q-icon :name="tag.icon" size="20px" class="tag-icon" />
+                  <span class="tag-label">{{ tag.label }}</span>
+                  
+                  <!-- Selection indicator -->
+                  <q-icon
+                    v-if="isTagSelected(tag.id)"
+                    name="check_circle"
+                    color="positive"
+                    size="18px"
+                    class="selection-indicator"
+                  />
+                </div>
+              </div>
+            </div>
+          </q-card-section>
+
+          <!-- Selected tags section -->
+          <q-card-section v-if="selectedTags.length > 0" class="selected-section">
+            <q-separator class="q-mb-md" />
+            
+            <div class="text-subtitle2 q-mb-md">Selected Tags ({{ selectedTags.length }})</div>
+            
+            <div class="selected-tags-container">
+              <div class="selected-tags-list">
+                <q-chip
+                  v-for="tag in selectedTagsData"
+                  :key="tag.id"
+                  removable
+                  @remove="removeTagSelection(tag.id)"
+                  color="secondary"
+                  text-color="white"
+                  :icon="tag.icon"
+                  class="selected-tag-chip"
+                >
+                  {{ tag.label }}
+                </q-chip>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <!-- Fixed Footer with Action Buttons -->
+    <q-footer elevated class="bg-white text-dark selector-footer">
+      <q-toolbar class="justify-between">
+        <q-btn
+          icon="arrow_back"
+          color="grey"
+          flat
+          round
+          @click="onCancel"
+          class="q-ml-sm"
+        >
+          <q-tooltip class="bg-grey">Cancel</q-tooltip>
+        </q-btn>
+        
+        <q-btn
+          label="Add Tags"
+          color="primary"
+          unelevated
+          :disable="selectedTags.length === 0"
+          @click="onAddTags"
+          class="q-mr-sm"
+        />
+      </q-toolbar>
+    </q-footer>
+  </q-page>
+</template>
+
+<script>
+import { ref, computed, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { tagOptions } from '../utils/editFormOptions.js'
+
+export default {
+  name: 'TagSelector',
+  setup() {
+    const router = useRouter()
+    const route = useRoute()
+    
+    // State
+    const searchQuery = ref('')
+    const selectedTags = ref([])
+    const selectedTagCategory = ref('all')
+    
+    // Tag category options
+    const tagCategoryOptions = [
+      { label: 'All', value: 'all' },
+      { label: 'Emotions', value: 'emotions' },
+      { label: 'Significance', value: 'significance' },
+      { label: 'Social', value: 'social' },
+      { label: 'Intensity', value: 'intensity' },
+      { label: 'Time', value: 'time' }
+    ]
+    
+    // Tag categorization and icons
+    const tagCategories = {
+      'emotions': ['happy', 'sad', 'exciting', 'stressful', 'memorable', 'important', 'fun', 'challenging', 'rewarding', 'disappointing', 'surprising', 'life-changing', 'routine', 'special', 'difficult', 'joyful', 'overwhelming', 'peaceful', 'anxious', 'proud', 'grateful', 'emotional', 'touching', 'inspiring', 'motivating', 'healing'],
+      'significance': ['milestone', 'achievement', 'breakthrough', 'turning-point', 'first-time', 'last-time', 'once-in-a-lifetime', 'unexpected', 'planned', 'spontaneous', 'tradition', 'new-experience'],
+      'social': ['family', 'friends', 'colleagues', 'community', 'solo', 'group', 'intimate', 'public', 'private', 'celebration'],
+      'intensity': ['intense', 'mild', 'dramatic', 'subtle', 'overwhelming', 'gradual', 'sudden', 'anticipated', 'shocking', 'gentle'],
+      'time': ['brief', 'extended', 'momentary', 'lasting', 'temporary', 'permanent', 'seasonal', 'annual', 'weekly', 'daily']
+    }
+    
+    const tagIcons = {
+      // Emotions
+      'happy': 'sentiment_very_satisfied',
+      'sad': 'sentiment_very_dissatisfied',
+      'exciting': 'bolt',
+      'stressful': 'stress_management',
+      'memorable': 'star',
+      'important': 'priority_high',
+      'fun': 'sports_esports',
+      'challenging': 'fitness_center',
+      'rewarding': 'emoji_events',
+      'disappointing': 'thumb_down',
+      'surprising': 'surprise',
+      'life-changing': 'transform',
+      'routine': 'repeat',
+      'special': 'auto_awesome',
+      'difficult': 'warning',
+      'joyful': 'celebration',
+      'overwhelming': 'waves',
+      'peaceful': 'spa',
+      'anxious': 'psychology',
+      'proud': 'military_tech',
+      'grateful': 'volunteer_activism',
+      'emotional': 'favorite',
+      'touching': 'touch_app',
+      'inspiring': 'lightbulb',
+      'motivating': 'trending_up',
+      'healing': 'healing',
+      
+      // Significance
+      'milestone': 'flag',
+      'achievement': 'workspace_premium',
+      'breakthrough': 'psychology_alt',
+      'turning-point': 'turn_right',
+      'first-time': 'new_releases',
+      'last-time': 'last_page',
+      'once-in-a-lifetime': 'diamond',
+      'unexpected': 'help_outline',
+      'planned': 'event_note',
+      'spontaneous': 'flash_on',
+      'tradition': 'history',
+      'new-experience': 'explore',
+      
+      // Social
+      'family': 'family_restroom',
+      'friends': 'group',
+      'colleagues': 'business',
+      'community': 'diversity_3',
+      'solo': 'person',
+      'group': 'groups',
+      'intimate': 'favorite_border',
+      'public': 'public',
+      'private': 'lock',
+      'celebration': 'cake',
+      
+      // Default for others
+      'default': 'tag'
+    }
+    
+    // Convert tag options to objects with categories and icons
+    const tags = ref(
+      tagOptions.map((tag, index) => {
+        // Find which category this tag belongs to
+        let category = 'other'
+        for (const [cat, tagList] of Object.entries(tagCategories)) {
+          if (tagList.includes(tag)) {
+            category = cat
+            break
+          }
+        }
+        
+        return {
+          id: index + 1,
+          label: tag,
+          value: tag,
+          category: category,
+          icon: tagIcons[tag] || tagIcons['default']
+        }
+      })
+    )
+    
+    // Computed
+    const filteredTags = computed(() => {
+      let filtered = tags.value
+      
+      // Filter by category
+      if (selectedTagCategory.value !== 'all') {
+        filtered = filtered.filter(tag => tag.category === selectedTagCategory.value)
+      }
+      
+      // Filter by search query
+      if (searchQuery.value) {
+        filtered = filtered.filter(tag =>
+          tag.label.toLowerCase().includes(searchQuery.value.toLowerCase())
+        )
+      }
+      
+      return filtered
+    })
+    
+    const selectedTagsData = computed(() => {
+      return tags.value.filter(tag => selectedTags.value.includes(tag.id))
+    })
+    
+    // Methods
+    const isTagSelected = (tagId) => {
+      return selectedTags.value.includes(tagId)
+    }
+    
+    const toggleTagSelection = (tagId) => {
+      const index = selectedTags.value.indexOf(tagId)
+      if (index > -1) {
+        selectedTags.value.splice(index, 1)
+      } else {
+        selectedTags.value.push(tagId)
+      }
+    }
+    
+    const removeTagSelection = (tagId) => {
+      const index = selectedTags.value.indexOf(tagId)
+      if (index > -1) {
+        selectedTags.value.splice(index, 1)
+      }
+    }
+    
+    const onCancel = () => {
+      router.go(-1)
+    }
+    
+    const onAddTags = () => {
+      // Pass selected tags back to the edit page
+      const selectedTagsLabels = selectedTagsData.value.map(tag => tag.label)
+      
+      // Navigate back with the selected tags data
+      router.push({
+        name: 'edit',
+        query: {
+          ...route.query,
+          selectedTags: JSON.stringify(selectedTagsLabels)
+        }
+      })
+    }
+    
+    // Load previously selected tags from route query
+    onMounted(() => {
+      if (route.query.currentSelection) {
+        try {
+          const currentSelection = JSON.parse(route.query.currentSelection)
+          // Convert labels back to IDs
+          selectedTags.value = tags.value
+            .filter(tag => currentSelection.includes(tag.label))
+            .map(tag => tag.id)
+        } catch (error) {
+          console.error('Error parsing current selection:', error)
+        }
+      }
+    })
+    
+    return {
+      searchQuery,
+      selectedTags,
+      selectedTagCategory,
+      tagCategoryOptions,
+      tags,
+      filteredTags,
+      selectedTagsData,
+      isTagSelected,
+      toggleTagSelection,
+      removeTagSelection,
+      onCancel,
+      onAddTags
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tag-selector-page {
+  min-height: 100vh;
+  padding-bottom: 80px; /* Space for footer */
+}
+
+.tag-categories {
+  margin-bottom: 16px;
+}
+
+.tag-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 8px;
+  max-height: 400px;
+  overflow-y: auto;
+  padding: 4px;
+}
+
+.tag-item {
+  position: relative;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 2px solid rgba(0, 0, 0, 0.1);
+  background: rgba(0, 0, 0, 0.02);
+  min-height: 44px;
+}
+
+.tag-item:hover {
+  background-color: rgba(25, 118, 210, 0.1);
+  border-color: rgba(25, 118, 210, 0.3);
+  transform: translateY(-1px);
+}
+
+.tag-item.selected {
+  background-color: rgba(25, 118, 210, 0.15);
+  border-color: var(--q-primary);
+}
+
+.tag-content {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  gap: 8px;
+}
+
+.tag-icon {
+  flex-shrink: 0;
+  color: var(--q-primary);
+}
+
+.tag-label {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 500;
+  text-transform: capitalize;
+}
+
+.selection-indicator {
+  flex-shrink: 0;
+}
+
+.selected-section {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.selected-tags-container {
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.selected-tags-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.selected-tag-chip {
+  font-size: 13px;
+  min-height: 32px;
+}
+
+/* Responsive design */
+@media (max-width: 600px) {
+  .tag-grid {
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 6px;
+  }
+  
+  .tag-content {
+    padding: 6px 10px;
+    gap: 6px;
+  }
+  
+  .tag-label {
+    font-size: 13px;
+  }
+  
+  .selected-tags-list {
+    gap: 6px;
+  }
+}
+
+/* Footer styling */
+.selector-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  border-top: 1px solid #e0e0e0;
+}
+
+.selector-footer .q-toolbar {
+  min-height: 60px;
+  padding: 8px 16px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
index 5633fbf..4e06d4a 100644
--- a/frontend/src/router/routes.js
+++ b/frontend/src/router/routes.js
@@ -30,6 +30,24 @@ const routes = [
         component: () => import('pages/EditPage.vue'),
         meta: { hideFooter: true }
       },
+      {
+        path: 'person-selector',
+        name: 'person-selector',
+        component: () => import('pages/PersonSelector.vue'),
+        meta: { hideFooter: true }
+      },
+      {
+        path: 'category-selector',
+        name: 'category-selector',
+        component: () => import('pages/CategorySelector.vue'),
+        meta: { hideFooter: true }
+      },
+      {
+        path: 'tag-selector',
+        name: 'tag-selector',
+        component: () => import('pages/TagSelector.vue'),
+        meta: { hideFooter: true }
+      },
     ],
   },
 
diff --git a/frontend/src/utils/editFormOptions.js b/frontend/src/utils/editFormOptions.js
index 825850f..0679b42 100644
--- a/frontend/src/utils/editFormOptions.js
+++ b/frontend/src/utils/editFormOptions.js
@@ -222,7 +222,7 @@ export const defaultFormData = {
   additionalImages: [],
   additionalImageUrls: [],
   level: 0,
-  category: '',
+  categories: [],
   headline: '',
   subheadline: '',
   text: '',