diff --git a/client/dive-common/components/AnnotationVisibilityMenu.vue b/client/dive-common/components/AnnotationVisibilityMenu.vue
new file mode 100644
index 000000000..f4e1a4857
--- /dev/null
+++ b/client/dive-common/components/AnnotationVisibilityMenu.vue
@@ -0,0 +1,326 @@
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  PropType,
+  ref,
+  watch,
+} from 'vue';
+
+import { VisibleAnnotationTypes } from 'vue-media-annotator/layers';
+
+interface ButtonData {
+  id: string;
+  icon: string;
+  type?: VisibleAnnotationTypes;
+  active: boolean;
+  description: string;
+  click: () => void;
+}
+
+export default defineComponent({
+  name: 'AnnotationVisibilityMenu',
+  props: {
+    visibleModes: {
+      type: Array as PropType<(VisibleAnnotationTypes)[]>,
+      required: true,
+    },
+    tailSettings: {
+      type: Object as PropType<{ before: number; after: number }>,
+      required: true,
+    },
+  },
+  emits: ['set-annotation-state', 'update:tail-settings'],
+  setup(props, { emit }) {
+    const STORAGE_KEY = 'annotationVisibilityMenu.expanded';
+
+    // Load from localStorage or default to true
+    const loadExpandedState = (): boolean => {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      return stored !== null ? stored === 'true' : true;
+    };
+
+    const isExpanded = ref(loadExpandedState());
+
+    // Save to localStorage when state changes
+    watch(isExpanded, (value) => {
+      localStorage.setItem(STORAGE_KEY, String(value));
+    });
+
+    const isVisible = (mode: VisibleAnnotationTypes) => props.visibleModes.includes(mode);
+
+    const toggleVisible = (mode: VisibleAnnotationTypes) => {
+      if (isVisible(mode)) {
+        emit('set-annotation-state', {
+          visible: props.visibleModes.filter((m) => m !== mode),
+        });
+      } else {
+        emit('set-annotation-state', {
+          visible: props.visibleModes.concat([mode]),
+        });
+      }
+    };
+
+    const toggleExpanded = () => {
+      isExpanded.value = !isExpanded.value;
+    };
+
+    const viewButtons = computed((): ButtonData[] => (
+      /* Only geometry primitives can be visible types right now */
+      [
+        {
+          id: 'rectangle',
+          type: 'rectangle',
+          icon: 'mdi-vector-square',
+          active: isVisible('rectangle'),
+          description: 'Rectangle',
+          click: () => toggleVisible('rectangle'),
+        },
+        {
+          id: 'Polygon',
+          type: 'Polygon',
+          icon: 'mdi-vector-polygon',
+          active: isVisible('Polygon'),
+          description: 'Polygon',
+          click: () => toggleVisible('Polygon'),
+        },
+        {
+          id: 'LineString',
+          type: 'LineString',
+          active: isVisible('LineString'),
+          icon: 'mdi-vector-line',
+          description: 'Head Tail',
+          click: () => toggleVisible('LineString'),
+        },
+        {
+          id: 'text',
+          type: 'text',
+          active: isVisible('text'),
+          icon: 'mdi-format-text',
+          description: 'Text',
+          click: () => toggleVisible('text'),
+        },
+        {
+          id: 'tooltip',
+          type: 'tooltip',
+          active: isVisible('tooltip'),
+          icon: 'mdi-tooltip-text-outline',
+          description: 'Tooltip',
+          click: () => toggleVisible('tooltip'),
+        },
+      ]));
+
+    const updateTailSettings = (type: 'before' | 'after', event: Event) => {
+      const value = Number.parseFloat((event.target as HTMLInputElement).value);
+      const settings = { ...props.tailSettings, [type]: value };
+      emit('update:tail-settings', settings);
+    };
+
+    return {
+      isExpanded,
+      viewButtons,
+      isVisible,
+      toggleVisible,
+      toggleExpanded,
+      updateTailSettings,
+    };
+  },
+});
+</script>
+
+<template>
+  <span class="pb-1">
+    <!-- Dropdown mode when collapsed -->
+    <v-menu
+      v-if="!isExpanded"
+      offset-y
+      :close-on-content-click="false"
+      min-width="300"
+    >
+      <template #activator="{ on, attrs }">
+        <v-btn
+          v-bind="attrs"
+          class="mx-1 mode-button"
+          small
+          v-on="on"
+        >
+          <v-icon>mdi-eye</v-icon>
+          <v-btn
+            icon
+            x-small
+            class="ml-1 expand-toggle"
+            @click.stop="toggleExpanded"
+          >
+            <v-icon small>mdi-chevron-right</v-icon>
+          </v-btn>
+        </v-btn>
+      </template>
+      <v-list dense>
+        <v-list-item
+          v-for="button in viewButtons"
+          :key="`${button.id}-menu`"
+          @click="button.click"
+        >
+          <v-list-item-icon>
+            <v-btn
+              :color="button.active ? 'grey darken-2' : ''"
+              class="mx-1 mode-button"
+              small
+              @click="button.click"
+            >
+              <v-icon>{{ button.icon }}</v-icon>
+            </v-btn>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>{{ button.description }}</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item>
+          <v-list-item-icon>
+            <v-btn
+              :color="isVisible('TrackTail') ? 'grey darken-2' : ''"
+              class="mx-1 mode-button"
+              small
+              @click="toggleVisible('TrackTail')"
+            >
+              <v-icon>mdi-navigation</v-icon>
+            </v-btn>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>Track Trails</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-divider />
+        <v-list-item v-if="isVisible('TrackTail')">
+          <v-list-item-content>
+            <v-card
+              class="pa-4 flex-column d-flex"
+              outlined
+              flat
+            >
+              <label for="frames-before">Frames before: {{ tailSettings.before }}</label>
+              <input
+                id="frames-before"
+                type="range"
+                name="frames-before"
+                class="tail-slider-width"
+                label
+                min="0"
+                max="100"
+                :value="tailSettings.before"
+                @input="updateTailSettings('before', $event)"
+              >
+              <div class="py-2" />
+              <label for="frames-after">Frames after: {{ tailSettings.after }}</label>
+              <input
+                id="frames-after"
+                type="range"
+                name="frames-after"
+                class="tail-slider-width"
+                min="0"
+                max="100"
+                :value="tailSettings.after"
+                @input="updateTailSettings('after', $event)"
+              >
+            </v-card>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+
+    <!-- Full button mode when expanded -->
+    <template v-else>
+      <span class="mr-1 px-3 py-1">
+        <v-icon class="pr-1">
+          mdi-eye
+        </v-icon>
+        <span class="text-subtitle-2">
+          Visibility
+        </span>
+        <v-btn
+          icon
+          x-small
+          class="ml-1 expand-toggle"
+          @click="toggleExpanded"
+        >
+          <v-icon small>mdi-chevron-left</v-icon>
+        </v-btn>
+      </span>
+      <v-btn
+        v-for="button in viewButtons"
+        :key="`${button.id}-view`"
+        :color="button.active ? 'grey darken-2' : ''"
+        class="mx-1 mode-button"
+        small
+        @click="button.click"
+      >
+        <v-icon>{{ button.icon }}</v-icon>
+      </v-btn>
+      <v-menu
+        open-on-hover
+        bottom
+        offset-y
+        :close-on-content-click="false"
+      >
+        <template #activator="{ on, attrs }">
+          <v-btn
+            v-bind="attrs"
+            :color="isVisible('TrackTail') ? 'grey darken-2' : ''"
+            class="mx-1 mode-button"
+            small
+            v-on="on"
+            @click="toggleVisible('TrackTail')"
+          >
+            <v-icon>mdi-navigation</v-icon>
+          </v-btn>
+        </template>
+        <v-card
+          class="pa-4 flex-column d-flex"
+          outlined
+        >
+          <label for="frames-before-full">Frames before: {{ tailSettings.before }}</label>
+          <input
+            id="frames-before-full"
+            type="range"
+            name="frames-before-full"
+            class="tail-slider-width"
+            label
+            min="0"
+            max="100"
+            :value="tailSettings.before"
+            @input="updateTailSettings('before', $event)"
+          >
+          <div class="py-2" />
+          <label for="frames-after-full">Frames after: {{ tailSettings.after }}</label>
+          <input
+            id="frames-after-full"
+            type="range"
+            name="frames-after-full"
+            class="tail-slider-width"
+            min="0"
+            max="100"
+            :value="tailSettings.after"
+            @input="updateTailSettings('after', $event)"
+          >
+        </v-card>
+      </v-menu>
+    </template>
+  </span>
+</template>
+
+<style scoped>
+.mode-button {
+  border: 1px solid grey;
+  min-width: 36px;
+}
+.tail-slider-width {
+  width: 240px;
+}
+.expand-toggle {
+  opacity: 0.5;
+  transition: opacity 0.2s;
+}
+.expand-toggle:hover {
+  opacity: 1;
+}
+</style>
diff --git a/client/dive-common/components/EditorMenu.vue b/client/dive-common/components/EditorMenu.vue
index 748f9db8d..13b74443a 100644
--- a/client/dive-common/components/EditorMenu.vue
+++ b/client/dive-common/components/EditorMenu.vue
@@ -1,22 +1,34 @@
 <script lang="ts">
+import {
+  computed,
+  defineComponent,
+  PropType,
+  ref,
+  watch,
+} from 'vue';
 import { flatten } from 'lodash';
-import Vue, { PropType } from 'vue';
 
 import { Mousetrap } from 'vue-media-annotator/types';
 import { EditAnnotationTypes, VisibleAnnotationTypes } from 'vue-media-annotator/layers';
 import Recipe from 'vue-media-annotator/recipe';
 
+import AnnotationVisibilityMenu from './AnnotationVisibilityMenu.vue';
+
 interface ButtonData {
   id: string;
   icon: string;
   type?: VisibleAnnotationTypes;
   active: boolean;
   mousetrap?: Mousetrap[];
+  description: string;
   click: () => void;
 }
 
-export default Vue.extend({
+export default defineComponent({
   name: 'EditorMenu',
+  components: {
+    AnnotationVisibilityMenu,
+  },
   props: {
     editingTrack: {
       type: Boolean,
@@ -51,47 +63,61 @@ export default Vue.extend({
       default: () => ({ before: 20, after: 10 }),
     },
   },
-  data() {
-    return {
-      toolTipForce: false,
-      toolTimeTimeout: 0,
-      modeToolTips: {
-        Creating: {
-          rectangle: 'Drag to draw rectangle. Press ESC to exit.',
-          Polygon: 'Click to place vertices. Right click to close.',
-          LineString: 'Click to place head/tail points.',
-        },
-        Editing: {
-          rectangle: 'Drag vertices to resize the rectangle',
-          Polygon: 'Drag midpoints to create new vertices. Click vertices to select for deletion.',
-          LineString: 'Click endpoints to select for deletion.',
-        },
+  emits: ['set-annotation-state', 'update:tail-settings'],
+  setup(props, { emit }) {
+    const toolTimeTimeout = ref<number | null>(null);
+    const STORAGE_KEY = 'editorMenu.editButtonsExpanded';
+
+    // Load from localStorage or default to true
+    const loadExpandedState = (): boolean => {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      return stored !== null ? stored === 'true' : true;
+    };
+
+    const isEditButtonsExpanded = ref(loadExpandedState());
+
+    // Save to localStorage when state changes
+    watch(isEditButtonsExpanded, (value) => {
+      localStorage.setItem(STORAGE_KEY, String(value));
+    });
+
+    const modeToolTips = {
+      Creating: {
+        rectangle: 'Drag to draw rectangle. Press ESC to exit.',
+        Polygon: 'Click to place vertices. Right click to close.',
+        LineString: 'Click to place head/tail points.',
+      },
+      Editing: {
+        rectangle: 'Drag vertices to resize the rectangle',
+        Polygon: 'Drag midpoints to create new vertices. Click vertices to select for deletion.',
+        LineString: 'Click endpoints to select for deletion.',
       },
     };
-  },
-  computed: {
-    editButtons(): ButtonData[] {
-      const em = this.editingMode;
+
+    const editButtons = computed((): ButtonData[] => {
+      const em = props.editingMode;
       return [
         {
           id: 'rectangle',
           icon: 'mdi-vector-square',
-          active: this.editingTrack && em === 'rectangle',
+          active: props.editingTrack && em === 'rectangle',
+          description: 'Rectangle',
           mousetrap: [{
             bind: '1',
             handler: () => {
-              this.$emit('set-annotation-state', { editing: 'rectangle' });
+              emit('set-annotation-state', { editing: 'rectangle' });
             },
           }],
           click: () => {
-            this.$emit('set-annotation-state', { editing: 'rectangle' });
+            emit('set-annotation-state', { editing: 'rectangle' });
           },
         },
         /* Include recipes as editing modes if they're toggleable */
-        ...this.recipes.filter((r) => r.toggleable.value).map((r, i) => ({
+        ...props.recipes.filter((r) => r.toggleable.value).map((r, i) => ({
           id: r.name,
           icon: r.icon.value || 'mdi-pencil',
-          active: this.editingTrack && r.active.value,
+          active: props.editingTrack && r.active.value,
+          description: r.name,
           click: () => r.activate(),
           mousetrap: [
             {
@@ -102,94 +128,69 @@ export default Vue.extend({
           ],
         })),
       ];
-    },
-    viewButtons(): ButtonData[] {
-      /* Only geometry primitives can be visible types right now */
-      return [
-        {
-          id: 'rectangle',
-          type: 'rectangle',
-          icon: 'mdi-vector-square',
-          active: this.isVisible('rectangle'),
-          click: () => this.toggleVisible('rectangle'),
-        },
-        {
-          id: 'Polygon',
-          type: 'Polygon',
-          icon: 'mdi-vector-polygon',
-          active: this.isVisible('Polygon'),
-          click: () => this.toggleVisible('Polygon'),
-        },
-        {
-          id: 'LineString',
-          type: 'LineString',
-          active: this.isVisible('LineString'),
-          icon: 'mdi-vector-line',
-          click: () => this.toggleVisible('LineString'),
-        },
-        {
-          id: 'text',
-          type: 'text',
-          active: this.isVisible('text'),
-          icon: 'mdi-format-text',
-          click: () => this.toggleVisible('text'),
-        },
-        {
-          id: 'tooltip',
-          type: 'tooltip',
-          active: this.isVisible('tooltip'),
-          icon: 'mdi-tooltip-text-outline',
-          click: () => this.toggleVisible('tooltip'),
-        },
-      ];
-    },
-    mousetrap(): Mousetrap[] {
-      return flatten(this.editButtons.map((b) => b.mousetrap || []));
-    },
-    editingHeader() {
-      if (this.groupEditActive) {
+    });
+
+    const mousetrap = computed((): Mousetrap[] => flatten(editButtons.value.map((b) => b.mousetrap || [])));
+
+    const activeEditButton = computed(() => editButtons.value.find((b) => b.active) || editButtons.value[0]);
+
+    const toggleEditButtonsExpanded = () => {
+      isEditButtonsExpanded.value = !isEditButtonsExpanded.value;
+    };
+
+    const editButtonsMenuKey = computed(() => `${props.editingMode}-${editButtons.value.length}-${activeEditButton.value?.id || ''}`);
+
+    const editingHeader = computed(() => {
+      if (props.groupEditActive) {
         return { text: 'Group Edit Mode', icon: 'mdi-group', color: 'primary' };
       }
-      if (this.multiSelectActive) {
+      if (props.multiSelectActive) {
         return { text: 'Multi-select Mode', icon: 'mdi-call-merge', color: 'error' };
       }
-      if (this.editingDetails !== 'disabled') {
+      if (props.editingDetails !== 'disabled') {
         return {
-          text: `${this.editingDetails} ${this.editingMode} `,
-          icon: this.editingDetails === 'Creating' ? 'mdi-pencil-plus' : 'mdi-pencil',
-          color: this.editingDetails === 'Creating' ? 'success' : 'primary',
+          text: `${props.editingDetails} ${props.editingMode} `,
+          icon: props.editingDetails === 'Creating' ? 'mdi-pencil-plus' : 'mdi-pencil',
+          color: props.editingDetails === 'Creating' ? 'success' : 'primary',
         };
       }
       return { text: 'Not editing', icon: 'mdi-pencil-off-outline', color: '' };
-    },
-  },
-  watch: {
-    editingDetails() {
-      clearTimeout(this.toolTimeTimeout);
-      if (this.editingDetails !== 'disabled') {
-        this.toolTipForce = true;
-        this.toolTimeTimeout = setTimeout(() => { this.toolTipForce = false; }, 2000) as unknown as number;
-      } else {
-        this.toolTipForce = false;
+    });
+
+    const editingTooltip = computed(() => {
+      if (props.editingDetails === 'disabled' || !props.editingMode || typeof props.editingMode !== 'string') {
+        return '';
       }
-    },
-  },
-  methods: {
-    isVisible(mode: VisibleAnnotationTypes) {
-      return this.visibleModes.includes(mode);
-    },
+      const tips = modeToolTips[props.editingDetails];
+      if (!tips) {
+        return '';
+      }
+      const mode = props.editingMode as keyof typeof modeToolTips.Creating;
+      return tips[mode] || '';
+    });
 
-    toggleVisible(mode: VisibleAnnotationTypes) {
-      if (this.isVisible(mode)) {
-        this.$emit('set-annotation-state', {
-          visible: this.visibleModes.filter((m) => m !== mode),
-        });
-      } else {
-        this.$emit('set-annotation-state', {
-          visible: this.visibleModes.concat([mode]),
-        });
+    watch(() => props.editingDetails, () => {
+      if (toolTimeTimeout.value !== null) {
+        clearTimeout(toolTimeTimeout.value);
       }
-    },
+      if (props.editingDetails !== 'disabled') {
+        toolTimeTimeout.value = setTimeout(() => {
+          // Tooltip timeout handler - can be extended if needed
+        }, 2000) as unknown as number;
+      }
+    });
+
+    return {
+      modeToolTips,
+      editButtons,
+      mousetrap,
+      editingHeader,
+      editingTooltip,
+      isEditButtonsExpanded,
+      toggleEditButtonsExpanded,
+      activeEditButton,
+      editButtonsMenuKey,
+    };
   },
 });
 </script>
@@ -222,96 +223,111 @@ export default Vue.extend({
               Multi-select in progress.  Editing is disabled.
               Select additional tracks to merge or group.
             </span>
-            <span v-else-if="editingDetails !== 'disabled'">
-              {{ modeToolTips[editingDetails][editingMode] }}
+            <span v-else-if="editingDetails !== 'disabled' && editingMode && typeof editingMode === 'string'">
+              {{ editingTooltip }}
             </span>
             <span v-else>Right click on an annotation to edit</span>
           </div>
         </div>
       </div>
-      <v-btn
-        v-for="button in editButtons"
-        :key="button.id + 'view'"
-        :disabled="!editingMode"
-        :outlined="!button.active"
-        :color="button.active ? editingHeader.color : ''"
-        class="mx-1"
-        small
-        @click="button.click"
+      <!-- Collapsed mode for edit buttons -->
+      <v-menu
+        v-if="!isEditButtonsExpanded"
+        :key="editButtonsMenuKey"
+        offset-y
+        :close-on-content-click="false"
       >
-        <pre v-if="button.mousetrap">{{ button.mousetrap[0].bind }}:</pre>
-        <v-icon>{{ button.icon }}</v-icon>
-      </v-btn>
-      <slot name="delete-controls" />
-      <v-spacer />
-      <span class="pb-1">
+        <template #activator="{ on, attrs }">
+          <v-btn
+            v-bind="attrs"
+            :disabled="!editingMode"
+            :outlined="!activeEditButton?.active"
+            :color="activeEditButton?.active ? editingHeader.color : ''"
+            class="mx-1"
+            small
+            v-on="on"
+          >
+            <pre v-if="activeEditButton?.mousetrap">{{ activeEditButton.mousetrap[0].bind }}:</pre>
+            <v-icon>{{ activeEditButton?.icon }}</v-icon>
+            <v-btn
+              icon
+              x-small
+              class="ml-1 expand-toggle"
+              @click.stop="toggleEditButtonsExpanded"
+            >
+              <v-icon small>
+                mdi-chevron-right
+              </v-icon>
+            </v-btn>
+          </v-btn>
+        </template>
+        <v-list dense>
+          <v-list-item
+            v-for="button in editButtons"
+            :key="`${button.id}-menu`"
+          >
+            <v-list-item-icon>
+              <v-btn
+                :disabled="!editingMode"
+                :outlined="!button.active"
+                :color="button.active ? editingHeader.color : ''"
+                class="mx-1"
+                small
+                @click="button.click"
+              >
+                <pre v-if="button.mousetrap">{{ button.mousetrap[0].bind }}:</pre>
+                <v-icon>{{ button.icon }}</v-icon>
+              </v-btn>
+            </v-list-item-icon>
+            <v-list-item-content>
+              <v-list-item-title>{{ button.id }}</v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+
+      <!-- Expanded mode for edit buttons -->
+      <template v-else>
         <span class="mr-1 px-3 py-1">
           <v-icon class="pr-1">
-            mdi-eye
+            mdi-pencil
           </v-icon>
           <span class="text-subtitle-2">
-            Visibility
+            Edit Types
           </span>
+          <v-btn
+            icon
+            x-small
+            class="ml-1 expand-toggle"
+            @click="toggleEditButtonsExpanded"
+          >
+            <v-icon small>mdi-chevron-left</v-icon>
+          </v-btn>
         </span>
         <v-btn
-          v-for="button in viewButtons"
-          :key="button.id"
-          :color="button.active ? 'grey darken-2' : ''"
-          class="mx-1 mode-button"
+          v-for="button in editButtons"
+          :key="button.id + 'view'"
+          :disabled="!editingMode"
+          :outlined="!button.active"
+          :color="button.active ? editingHeader.color : ''"
+          class="mx-1"
           small
           @click="button.click"
         >
+          <pre v-if="button.mousetrap">{{ button.mousetrap[0].bind }}:</pre>
           <v-icon>{{ button.icon }}</v-icon>
         </v-btn>
-        <v-menu
-          open-on-hover
-          bottom
-          offset-y
-          :close-on-content-click="false"
-        >
-          <template #activator="{ on, attrs }">
-            <v-btn
-              v-bind="attrs"
-              :color="isVisible('TrackTail') ? 'grey darken-2' : ''"
-              class="mx-1 mode-button"
-              small
-              v-on="on"
-              @click="toggleVisible('TrackTail')"
-            >
-              <v-icon>mdi-navigation</v-icon>
-            </v-btn>
-          </template>
-          <v-card
-            class="pa-4 flex-column d-flex"
-            outlined
-          >
-            <label for="frames-before">Frames before: {{ tailSettings.before }}</label>
-            <input
-              id="frames-before"
-              type="range"
-              name="frames-before"
-              class="tail-slider-width"
-              label
-              min="0"
-              max="100"
-              :value="tailSettings.before"
-              @input="$emit('update:tail-settings', { ...tailSettings, before: Number.parseFloat($event.target.value) })"
-            >
-            <div class="py-2" />
-            <label for="frames-after">Frames after: {{ tailSettings.after }}</label>
-            <input
-              id="frames-after"
-              type="range"
-              name="frames-after"
-              class="tail-slider-width"
-              min="0"
-              max="100"
-              :value="tailSettings.after"
-              @input="$emit('update:tail-settings', { ...tailSettings, after: Number.parseFloat($event.target.value) })"
-            >
-          </v-card>
-        </v-menu>
-      </span>
+      </template>
+      <slot name="delete-controls" />
+      <v-spacer />
+      <slot name="multicam-controls" />
+      <v-spacer />
+      <annotation-visibility-menu
+        :visible-modes="visibleModes"
+        :tail-settings="tailSettings"
+        @set-annotation-state="$emit('set-annotation-state', $event)"
+        @update:tail-settings="$emit('update:tail-settings', $event)"
+      />
     </div>
   </v-row>
 </template>
@@ -330,7 +346,11 @@ export default Vue.extend({
 .mode-button{
   border: 1px solid grey;
 }
-.tail-slider-width {
-  width: 240px;
+.expand-toggle {
+  opacity: 0.5;
+  transition: opacity 0.2s;
+}
+.expand-toggle:hover {
+  opacity: 1;
 }
 </style>
diff --git a/client/dive-common/components/MultiCamToolbar.vue b/client/dive-common/components/MultiCamToolbar.vue
new file mode 100644
index 000000000..b3f2a2abf
--- /dev/null
+++ b/client/dive-common/components/MultiCamToolbar.vue
@@ -0,0 +1,490 @@
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  ref,
+  watch,
+} from 'vue';
+import {
+  useCameraStore,
+  useHandler,
+  useSelectedCamera,
+  useSelectedTrackId,
+  useTime,
+  useTrackFilters,
+  useEditingMode,
+} from 'vue-media-annotator/provides';
+import { AnnotationId } from 'vue-media-annotator/BaseAnnotation';
+import { Mousetrap } from 'vue-media-annotator/types';
+
+interface ToolbarButton {
+  id: string;
+  icon: string;
+  tooltip: string;
+  action?: () => void;
+  disabled?: boolean;
+  color?: string;
+  menu?: { items: Array<{ label: string; action: () => void }> };
+}
+
+export default defineComponent({
+  name: 'MultiCamToolbar',
+  setup() {
+    const selectedCamera = useSelectedCamera();
+    const selectedTrackId = useSelectedTrackId();
+    const cameraStore = useCameraStore();
+    const handler = useHandler();
+    const { frame } = useTime();
+    const enabledTracksRef = useTrackFilters().enabledAnnotations;
+    const inEditingMode = useEditingMode();
+
+    const cameras = computed(() => [...cameraStore.camMap.value.keys()]);
+    const canary = ref(false);
+    const STORAGE_KEY = 'multiCamToolbar.expanded';
+
+    // Load from localStorage or default to true
+    const loadExpandedState = (): boolean => {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      return stored !== null ? stored === 'true' : true;
+    };
+
+    const isExpanded = ref(loadExpandedState());
+
+    // Save to localStorage when state changes
+    watch(isExpanded, (value) => {
+      localStorage.setItem(STORAGE_KEY, String(value));
+    });
+
+    function _depend(): boolean {
+      return canary.value;
+    }
+
+    // Get info about which cameras have tracks/detections for selected track
+    const cameraTrackInfo = computed(() => {
+      const info: Record<string, { hasTrack: boolean; hasDetection: boolean }> = {};
+      _depend();
+      if (
+        selectedTrackId.value !== null
+        && selectedCamera.value
+        && enabledTracksRef.value.length > 0
+      ) {
+        cameraStore.camMap.value.forEach((camera, key) => {
+          const track = camera.trackStore.getPossible(selectedTrackId.value as AnnotationId);
+          const hasTrack = track !== undefined && track.features.length > 0;
+          info[key] = {
+            hasTrack,
+            hasDetection:
+              hasTrack
+              && camera.trackStore
+                .get(selectedTrackId.value as AnnotationId)
+                ?.getFeature(frame.value)[0] !== null,
+          };
+        });
+      }
+      return info;
+    });
+
+    const camerasWithTrack = computed(
+      () => Object.entries(cameraTrackInfo.value).filter(([, v]) => v.hasTrack).length,
+    );
+
+    const currentCameraHasTrack = computed(
+      () => cameraTrackInfo.value[selectedCamera.value]?.hasTrack ?? false,
+    );
+
+    const currentCameraHasDetection = computed(
+      () => cameraTrackInfo.value[selectedCamera.value]?.hasDetection ?? false,
+    );
+
+    // Other cameras that don't have this track (available for linking)
+    const linkableCameras = computed(() => cameras.value.filter(
+      (cam) => !cameraTrackInfo.value[cam]?.hasTrack,
+    ));
+
+    // Can unlink when current camera has track and multiple cameras have the track
+    const canUnlink = computed(
+      () => currentCameraHasTrack.value && camerasWithTrack.value > 1,
+    );
+
+    // Can link when there are cameras without the track
+    const canLink = computed(() => linkableCameras.value.length > 0);
+
+    // The opposite camera (first camera that isn't the currently selected one)
+    const oppositeCamera = computed(() => cameras.value.find(
+      (cam) => cam !== selectedCamera.value,
+    ));
+
+    // Delete detection from current camera/frame
+    const deleteDetection = async () => {
+      if (selectedTrackId.value === null || !selectedCamera.value) return;
+      canary.value = !canary.value;
+      const track = cameraStore.getTrack(selectedTrackId.value, selectedCamera.value);
+      const allTracks = cameraStore.getTrackAll(selectedTrackId.value);
+      if (track.length === 1) {
+        await handler.removeTrack([selectedTrackId.value], allTracks.length > 1, selectedCamera.value);
+        if (allTracks.length === 1) {
+          handler.trackSelect(null, false);
+        }
+      } else {
+        track.toggleKeyframe(frame.value);
+      }
+    };
+
+    // Delete entire track from current camera
+    const deleteTrackFromCamera = async () => {
+      if (selectedTrackId.value === null || !selectedCamera.value) return;
+      canary.value = !canary.value;
+      const allTracks = cameraStore.getTrackAll(selectedTrackId.value);
+      await handler.removeTrack([selectedTrackId.value], allTracks.length > 1, selectedCamera.value);
+      if (allTracks.length === 1) {
+        handler.trackSelect(null, false);
+      }
+    };
+
+    // Unlink current camera from track
+    const unlinkCurrentCamera = () => {
+      if (selectedTrackId.value === null || !selectedCamera.value) return;
+      handler.unlinkCameraTrack(selectedTrackId.value, selectedCamera.value);
+      canary.value = !canary.value;
+    };
+
+    // Start linking to another camera
+    const startLinkingToCamera = (camera: string) => {
+      if (inEditingMode.value) {
+        handler.trackSelect(selectedTrackId.value, false);
+      }
+      if (selectedCamera.value !== camera) {
+        handler.selectCamera(camera, false);
+      }
+      handler.startLinking(camera);
+    };
+
+    // Edit or create detection on a camera
+    const editOnCamera = (camera: string) => {
+      handler.selectCamera(camera, true);
+    };
+
+    // Edit on the opposite camera
+    const editOnOppositeCamera = () => {
+      if (oppositeCamera.value) {
+        editOnCamera(oppositeCamera.value);
+      }
+    };
+
+    const toggleExpanded = () => {
+      isExpanded.value = !isExpanded.value;
+    };
+
+    const toolbarButtons = computed((): ToolbarButton[] => {
+      // Ensure reactivity by accessing canary
+      _depend();
+      const buttons: ToolbarButton[] = [
+        {
+          id: 'edit-opposite',
+          icon: 'mdi-pencil-plus',
+          tooltip: `Edit detection on ${oppositeCamera.value} (e)`,
+          action: editOnOppositeCamera,
+        },
+      ];
+
+      if (canLink.value) {
+        buttons.push({
+          id: 'link',
+          icon: 'mdi-link-variant-plus',
+          tooltip: 'Link track to camera',
+          menu: {
+            items: linkableCameras.value.map((cam) => ({
+              label: `Link to ${cam}`,
+              action: () => startLinkingToCamera(cam),
+            })),
+          },
+        });
+      } else {
+        buttons.push({
+          id: 'unlink',
+          icon: 'mdi-link-variant-minus',
+          tooltip: 'Unlink track from current camera',
+          action: unlinkCurrentCamera,
+          disabled: !canUnlink.value,
+          color: canUnlink.value ? 'warning' : undefined,
+        });
+      }
+
+      buttons.push(
+        {
+          id: 'delete-detection',
+          icon: 'mdi-star-minus',
+          tooltip: 'Delete detection from current camera',
+          action: deleteDetection,
+          disabled: !currentCameraHasDetection.value,
+        },
+        {
+          id: 'delete-track',
+          icon: 'mdi-delete',
+          tooltip: 'Delete track from current camera',
+          action: deleteTrackFromCamera,
+          disabled: !currentCameraHasTrack.value,
+          color: currentCameraHasTrack.value ? 'error' : undefined,
+        },
+      );
+
+      return buttons;
+    });
+
+    // Create a key for the menu to force re-render when buttons change
+    const menuKey = computed(() => {
+      _depend();
+      return `${selectedTrackId.value}-${toolbarButtons.value.length}-${canLink.value}-${canUnlink.value}`;
+    });
+
+    const mousetrap: Mousetrap[] = [
+      { bind: 'e', handler: editOnOppositeCamera },
+    ];
+
+    return {
+      mousetrap,
+      selectedTrackId,
+      selectedCamera,
+      cameras,
+      cameraTrackInfo,
+      camerasWithTrack,
+      currentCameraHasTrack,
+      currentCameraHasDetection,
+      linkableCameras,
+      canUnlink,
+      canLink,
+      oppositeCamera,
+      deleteDetection,
+      deleteTrackFromCamera,
+      unlinkCurrentCamera,
+      startLinkingToCamera,
+      editOnCamera,
+      editOnOppositeCamera,
+      isExpanded,
+      toggleExpanded,
+      toolbarButtons,
+      menuKey,
+    };
+  },
+});
+</script>
+
+<template>
+  <span
+    v-if="selectedTrackId !== null && cameras.length > 1"
+    v-mousetrap="mousetrap"
+    class="pb-1"
+  >
+    <!-- Dropdown mode when collapsed -->
+    <v-menu
+      v-if="!isExpanded"
+      :key="menuKey"
+      offset-y
+      :close-on-content-click="false"
+    >
+      <template #activator="{ on, attrs }">
+        <v-btn
+          v-bind="attrs"
+          class="mx-1 mode-button"
+          small
+          v-on="on"
+        >
+          <v-icon>mdi-image-multiple</v-icon>
+          <v-btn
+            icon
+            x-small
+            class="ml-1 expand-toggle"
+            @click.stop="toggleExpanded"
+          >
+            <v-icon small>mdi-chevron-right</v-icon>
+          </v-btn>
+        </v-btn>
+      </template>
+      <v-list dense>
+        <v-list-item
+          v-for="button in toolbarButtons"
+          :key="`${button.id}-menu`"
+        >
+          <v-list-item-icon>
+            <v-btn
+              v-if="!button.menu"
+              :color="button.color"
+              :disabled="button.disabled"
+              class="mx-1 mode-button"
+              small
+              @click="button.action"
+            >
+              <v-icon>{{ button.icon }}</v-icon>
+            </v-btn>
+            <v-menu
+              v-else
+              offset-y
+            >
+              <template #activator="{ on: menuOn, attrs: menuAttrs }">
+                <v-btn
+                  v-bind="menuAttrs"
+                  class="mx-1 mode-button"
+                  small
+                  v-on="menuOn"
+                >
+                  <v-icon>{{ button.icon }}</v-icon>
+                </v-btn>
+              </template>
+              <v-list dense>
+                <v-list-item
+                  v-for="item in button.menu.items"
+                  :key="item.label"
+                  @click="item.action"
+                >
+                  <v-list-item-content>
+                    <v-list-item-title>{{ item.label }}</v-list-item-title>
+                  </v-list-item-content>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>{{ button.tooltip }}</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+
+    <!-- Full button mode when expanded -->
+    <template v-else>
+      <span class="mr-1 px-3 py-1">
+        <v-icon class="pr-1">
+          mdi-image-multiple
+        </v-icon>
+        <span class="text-subtitle-2">
+          Multi-Cam Tools
+        </span>
+        <v-btn
+          icon
+          x-small
+          class="ml-1 mr-0 mr-0 expand-toggle"
+          @click="toggleExpanded"
+        >
+          <v-icon small class="mr-0">mdi-chevron-left</v-icon>
+        </v-btn>
+      </span>
+      <!-- Edit/Add detection on opposite camera -->
+      <v-tooltip bottom>
+        <template #activator="{ on }">
+          <v-btn
+            small
+            class="mx-1 mode-button"
+            v-on="on"
+            @click="editOnOppositeCamera"
+          >
+            <v-icon>mdi-pencil-plus</v-icon>
+          </v-btn>
+        </template>
+        <span>Edit detection on {{ oppositeCamera }} (e)</span>
+      </v-tooltip>
+
+      <!-- Link/Unlink button - switches between modes -->
+      <!-- Link mode: when there are cameras without the track -->
+      <v-menu
+        v-if="canLink"
+        offset-y
+      >
+        <template #activator="{ on, attrs }">
+          <v-tooltip bottom>
+            <template #activator="{ on: tooltipOn }">
+              <v-btn
+                v-bind="attrs"
+                small
+                class="mx-1 mode-button"
+                v-on="{ ...on, ...tooltipOn }"
+              >
+                <v-icon>mdi-link-variant-plus</v-icon>
+              </v-btn>
+            </template>
+            <span>Link track to camera</span>
+          </v-tooltip>
+        </template>
+        <v-list dense>
+          <v-list-item
+            v-for="camera in linkableCameras"
+            :key="camera"
+            @click="startLinkingToCamera(camera)"
+          >
+            <v-list-item-content>
+              <v-list-item-title>Link to {{ camera }}</v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+      <!-- Unlink mode: when current camera has track and multiple cameras have it -->
+      <v-tooltip
+        v-else
+        bottom
+      >
+        <template #activator="{ on }">
+          <v-btn
+            small
+            class="mx-1 mode-button"
+            :color="canUnlink ? 'warning' : undefined"
+            :disabled="!canUnlink"
+            v-on="on"
+            @click="unlinkCurrentCamera"
+          >
+            <v-icon>mdi-link-variant-minus</v-icon>
+          </v-btn>
+        </template>
+        <span>Unlink track from current camera</span>
+      </v-tooltip>
+
+      <!-- Delete detection from current camera -->
+      <v-tooltip bottom>
+        <template #activator="{ on }">
+          <v-btn
+            small
+            class="mx-1 mode-button"
+            :disabled="!currentCameraHasDetection"
+            v-on="on"
+            @click="deleteDetection"
+          >
+            <v-icon>mdi-star-minus</v-icon>
+          </v-btn>
+        </template>
+        <span>Delete detection from current camera</span>
+      </v-tooltip>
+
+      <!-- Delete track from current camera -->
+      <v-tooltip bottom>
+        <template #activator="{ on }">
+          <v-btn
+            small
+            class="mx-1 mode-button"
+            :color="currentCameraHasTrack ? 'error' : undefined"
+            :disabled="!currentCameraHasTrack"
+            v-on="on"
+            @click="deleteTrackFromCamera"
+          >
+            <v-icon>mdi-delete</v-icon>
+          </v-btn>
+        </template>
+        <span>Delete track from current camera</span>
+      </v-tooltip>
+    </template>
+  </span>
+</template>
+
+<style scoped>
+.multicam-toolbar {
+  flex-shrink: 0;
+}
+.mode-button {
+  border: 1px solid grey;
+  min-width: 36px;
+}
+.expand-toggle {
+  opacity: 0.5;
+  transition: opacity 0.2s;
+}
+.expand-toggle:hover {
+  opacity: 1;
+}
+</style>
diff --git a/client/dive-common/components/TrackSettingsPanel.vue b/client/dive-common/components/TrackSettingsPanel.vue
index 90ed67ed9..71b1ec1b2 100644
--- a/client/dive-common/components/TrackSettingsPanel.vue
+++ b/client/dive-common/components/TrackSettingsPanel.vue
@@ -32,6 +32,7 @@ export default defineComponent({
       prompt: 'Prompt user before deleting a track?',
       filterTracksByFrame: 'Filter the track list by those with detections in the current frame',
       autoZoom: 'Automatically zoom to the track when selected',
+      showMultiCamToolbar: 'Show multi-camera tools in the top toolbar when a track is selected',
     });
     const modes = ref(['Track', 'Detection']);
     // Add unknown as the default type to the typeList
@@ -322,6 +323,45 @@ export default defineComponent({
           </v-tooltip>
         </v-col>
       </v-row>
+      <v-divider class="my-2" />
+      <div class="subheading">
+        Multi-Camera Settings
+      </div>
+      <v-row
+        align="end"
+        dense
+      >
+        <v-col class="py-1">
+          <v-switch
+            v-model="clientSettings.multiCamSettings.showToolbar"
+            class="my-0 ml-1 pt-0"
+            dense
+            label="Show Toolbar"
+            hide-details
+          />
+        </v-col>
+        <v-col
+          cols="2"
+          class="py-1"
+          align="right"
+        >
+          <v-tooltip
+            open-delay="200"
+            max-width="200"
+            bottom
+          >
+            <template #activator="{ on }">
+              <v-icon
+                small
+                v-on="on"
+              >
+                mdi-help
+              </v-icon>
+            </template>
+            <span>{{ help.showMultiCamToolbar }}</span>
+          </v-tooltip>
+        </v-col>
+      </v-row>
     </v-card>
   </div>
 </template>
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index b05d9bf78..b3da641be 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -49,6 +49,7 @@ import context from 'dive-common/store/context';
 import { MarkChangesPendingFilter } from 'vue-media-annotator/BaseFilterControls';
 import GroupSidebarVue from './GroupSidebar.vue';
 import MultiCamToolsVue from './MultiCamTools.vue';
+import MultiCamToolbar from './MultiCamToolbar.vue';
 import PrimaryAttributeTrackFilter from './PrimaryAttributeTrackFilter.vue';
 
 export interface ImageDataItem {
@@ -68,6 +69,7 @@ export default defineComponent({
     ConfidenceFilter,
     UserGuideButton,
     EditorMenu,
+    MultiCamToolbar,
     PrimaryAttributeTrackFilter,
   },
 
@@ -1010,6 +1012,12 @@ export default defineComponent({
               @delete-annotation="handler.removeAnnotation"
             />
           </template>
+          <template
+            v-if="multiCamList.length > 1 && clientSettings.multiCamSettings.showToolbar && selectedCamera !== multiCamList[0]"
+            slot="multicam-controls"
+          >
+            <multi-cam-toolbar />
+          </template>
         </EditorMenu>
         <v-select
           v-if="multiCamList.length > 1"
@@ -1125,6 +1133,7 @@ export default defineComponent({
             { bind: 'n', handler: () => !readonlyState && handler.trackAdd() },
             { bind: 'r', handler: () => aggregateController.resetZoom() },
             { bind: 'esc', handler: () => handler.trackAbort() },
+            { bind: 'e', handler: () => multiCamList.length === 1 && selectedTrackId !== null && handler.trackEdit(selectedTrackId) },
           ]"
           class="d-flex flex-column grow"
         >
diff --git a/client/dive-common/store/settings.ts b/client/dive-common/store/settings.ts
index 61f390872..adab2e24f 100644
--- a/client/dive-common/store/settings.ts
+++ b/client/dive-common/store/settings.ts
@@ -44,7 +44,10 @@ interface AnnotationSettings {
   timelineCountSettings: {
     totalCount: boolean;
     defaultView: 'tracks' | 'detections';
-  }
+  };
+  multiCamSettings: {
+    showToolbar: boolean;
+  };
 }
 
 const defaultSettings: AnnotationSettings = {
@@ -99,7 +102,9 @@ const defaultSettings: AnnotationSettings = {
     totalCount: true,
     defaultView: 'tracks',
   },
-
+  multiCamSettings: {
+    showToolbar: true,
+  },
 };
 
 // Utility to safely load from localStorage
diff --git a/client/platform/desktop/frontend/components/Settings.vue b/client/platform/desktop/frontend/components/Settings.vue
index 7a9ea7721..93ce64c5e 100644
--- a/client/platform/desktop/frontend/components/Settings.vue
+++ b/client/platform/desktop/frontend/components/Settings.vue
@@ -9,6 +9,7 @@ import { useRequest } from 'dive-common/use';
 import { NvidiaSmiReply } from 'platform/desktop/constants';
 import { cloneDeep, isEqual } from 'lodash';
 
+import { clientSettings } from 'dive-common/store/settings';
 import { autoDiscover } from '../store/dataset';
 import { settings, updateSettings, validateSettings } from '../store/settings';
 import { nvidiaSmi } from '../api';
@@ -73,6 +74,7 @@ export default defineComponent({
       appversion,
       arch,
       autoDiscoverState,
+      clientSettings,
       gitHash,
       platform,
       settings,
@@ -96,7 +98,7 @@ export default defineComponent({
     <navigation-bar />
     <v-container>
       <v-card v-if="localSettings">
-        <v-card-title>Settings</v-card-title>
+        <v-card-title>Folder Settings</v-card-title>
 
         <v-card-text>
           <v-row>
@@ -180,6 +182,22 @@ export default defineComponent({
           </v-btn>
         </v-card-text>
 
+        <v-card-title>Annotation Settings</v-card-title>
+        <v-card-text>
+          <v-row>
+            <v-col>
+              <v-switch
+                v-model="clientSettings.multiCamSettings.showToolbar"
+                color="primary"
+                label="Show multi-camera toolbar"
+                hint="Show multi-camera editing tools in the top toolbar when a track is selected"
+                persistent-hint
+                class="my-0"
+              />
+            </v-col>
+          </v-row>
+        </v-card-text>
+
         <v-card-title>Platform support</v-card-title>
         <v-card-subtitle>
           Not all checks must pass in order to use this application.