diff --git a/src/views/PeopleView.vue b/src/views/PeopleView.vue
index af4f632..ce38074 100644
--- a/src/views/PeopleView.vue
+++ b/src/views/PeopleView.vue
@@ -295,14 +295,14 @@
 
     <!-- Assign modal -->
     <!-- Face detail modal -->
-    <!-- Side navigation arrows - outside overlay for proper z-index stacking -->
-    <button v-if="faceDetailModal.show && canFaceDetailPrev" class="ms-fs-nav-arrow ms-fs-nav-prev" @click="() => { navClickCount++; console.log('[nav] PREV CLICKED'); goFaceDetailPrev(); }" title="Previous FS (←)" :style="{ zIndex: faceDetailZIndex + 100, pointerEvents: 'auto' }">
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><polyline points="15 18 9 12 15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
-    </button>
-    <button v-if="faceDetailModal.show && canFaceDetailNext" class="ms-fs-nav-arrow ms-fs-nav-next" @click="() => { navClickCount++; console.log('[nav] NEXT CLICKED'); goFaceDetailNext(); }" title="Next FS (→)" :style="{ zIndex: faceDetailZIndex + 100, pointerEvents: 'auto' }">
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><polyline points="9 18 15 12 9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
-    </button>
     <div v-if="faceDetailModal.show" class="ms-modal-overlay show" :style="{ zIndex: faceDetailZIndex }" @click.self="faceDetailModal.show = false">
+      <!-- Side navigation arrows inside overlay -->
+      <button v-if="canFaceDetailPrev" class="ms-fs-nav-arrow ms-fs-nav-prev" @click.stop="() => { navClickCount++; console.log('[nav] PREV CLICKED'); goFaceDetailPrev(); }" title="Previous FS (←)" style="z-index: 99999; pointer-events: auto;">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><polyline points="15 18 9 12 15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      </button>
+      <button v-if="canFaceDetailNext" class="ms-fs-nav-arrow ms-fs-nav-next" @click.stop="() => { navClickCount++; console.log('[nav] NEXT CLICKED'); goFaceDetailNext(); }" title="Next FS (→)" style="z-index: 99999; pointer-events: auto;">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><polyline points="9 18 15 12 9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      </button>
       <div class="ms-modal ms-modal-face-detail">
         <button class="ms-fm-icon-btn close-btn" @click="faceDetailModal.show = false" title="Close (Esc)">×</button>
         <button class="ms-fm-icon-btn fs-delete-btn" @click="deleteCurrentFace" title="Delete this FS">
@@ -2117,7 +2117,10 @@ async function loadClusterResults() {
       c.member_faces = clusterFacesMap[cid] || []
       c.face_count = c.member_faces.length
       console.log(`[loadClusterResults] group ${c.name} (cid=${cid}): member_faces=${c.member_faces.length}`)
-      c.trace_ids = Array.from(clusterTraceIdsMap[cid] || [])
+      // Use API trace_ids if available, fallback to clusterTraceIdsMap
+      if (!c.trace_ids || c.trace_ids.length === 0) {
+        c.trace_ids = Array.from(clusterTraceIdsMap[cid] || [])
+      }
       // Set representative_trace from representative_face
       if (c.representative_face?.face_id) {
         const repTraceId = faceIdToTraceId[c.representative_face.face_id]