diff --git a/resources/js/Pages/Archive/Index.vue b/resources/js/Pages/Archive/Index.vue
index 6ea3ab6..75d0881 100644
--- a/resources/js/Pages/Archive/Index.vue
+++ b/resources/js/Pages/Archive/Index.vue
@@ -9,7 +9,7 @@
     <div class="app-canvas z-10 relative">
       
       <!-- Top Header Bar -->
-      <header class="py-[calc(var(--app-height)*0.015)] px-[calc(var(--app-width)*0.04)] flex justify-between items-center z-30">
+      <header class="py-[calc(var(--app-height)*0.015)] px-[calc(var(--app-width)*0.04)] flex justify-between items-center z-40 relative">
         <div 
           @click="handleLogoClick" 
           class="flex items-center gap-[calc(var(--app-width)*0.025)] select-none"
@@ -315,7 +315,7 @@
         
         <!-- Reinstated Center Frontpage Title & Summary above slider -->
         <transition name="fade-meta" mode="out-in">
-          <div :key="activeIndex" class="w-[calc(var(--app-width)*0.92)] mx-auto mb-[calc(var(--app-height)*0.015)] border-b border-white pb-[calc(var(--app-height)*0.0015)] text-left" style="border-bottom-width: clamp(2px, calc(var(--app-width) * 0.004), 8px)">
+          <div :key="activeIndex" class="w-[calc(var(--app-width)*0.92)] mx-auto mb-[calc(var(--app-height)*0.015)] border-b border-white pb-[calc(var(--app-height)*0.0015)] text-left z-30 relative" style="border-bottom-width: clamp(2px, calc(var(--app-width) * 0.004), 8px)">
             <span class="block text-white tracking-[0.1em] font-bold" style="font-size: calc(var(--font-size-sm) * 1.25)">
               {{ activePage.date }}
             </span>
@@ -327,7 +327,7 @@
           ref="sliderContainer" 
           @touchstart="onTouchStart"
           @touchend="onTouchEnd"
-          class="w-full overflow-visible flex items-center justify-start py-6 select-none relative"
+          class="w-full overflow-visible flex items-center justify-start py-6 select-none relative z-10"
         >
           <!-- Slider Track -->
           <div 
@@ -349,7 +349,7 @@
                 :class="[
                   virtualIndex === idx 
                     ? 'scale-100 opacity-100 blur-0 border-white/10' 
-                    : 'scale-[0.94] opacity-50 blur-[1.5px] border-transparent pointer-events-none hover:opacity-40',
+                    : 'scale-75 opacity-50 blur-[1.5px] border-transparent pointer-events-none hover:opacity-40',
                   !disableTransition ? 'transition-all duration-500' : ''
                 ]"
               >
@@ -368,7 +368,7 @@
                   :key="hotspot.id"
                   @click.stop="openHotspot(hotspot)"
                   :style="{ top: `${hotspot.top}%`, left: `${hotspot.left}%`, fontSize: 'calc(var(--font-size-xs) * 1.5)' }"
-                  class="absolute transform -translate-x-1/2 -translate-y-1/2 z-10 flex items-center justify-center px-[calc(var(--app-width)*0.075)] min-h-[clamp(54px,calc(var(--app-width)*0.105),172px)] rounded-full bg-black/50 hover:bg-black/60 text-white border-[clamp(2px,calc(var(--app-width)*0.004),8px)] border-white/50 shadow-xl transition-all duration-300 hover:scale-105 active:scale-98 font-serif-vintage tracking-wider font-medium select-none whitespace-nowrap"
+                  class="absolute transform -translate-x-1/2 -translate-y-1/2 z-10 flex items-center justify-center px-[calc(var(--app-width)*0.075)] min-h-[clamp(54px,calc(var(--app-width)*0.105),172px)] rounded-full bg-black/60 hover:bg-black/60 text-white border-[clamp(2px,calc(var(--app-width)*0.004),8px)] border-white/50 shadow-xl transition-all duration-300 hover:scale-105 active:scale-98 font-serif-vintage tracking-wider font-medium select-none whitespace-nowrap"
                 >
                   See more
                 </button>
@@ -378,7 +378,7 @@
         </div>
 
         <!-- Clean Bottom Controls & Indicators -->
-        <div class="w-full flex justify-center items-center py-[calc(var(--app-height)*0.02)]">
+        <div class="w-full flex justify-center items-center py-[calc(var(--app-height)*0.02)] z-10 relative">
           <div class="w-[calc(var(--touch-target-nav)*4.2)] flex justify-between items-center z-10">
             <!-- Prev Arrow -->
             <button 
@@ -409,6 +409,109 @@
           </div>
         </div>
 
+        <!-- Translucent Overlay Modal Popover for Hotspots -->
+        <transition
+          @before-enter="onBeforeEnter"
+          @enter="onEnter"
+          @leave="onLeave"
+          :css="false"
+        >
+          <div v-if="selectedHotspot" class="fixed inset-0 z-20 flex items-center justify-center">
+            <!-- Modal Backdrop -->
+            <div 
+              class="modal-backdrop absolute inset-0 bg-black/50 backdrop-blur-md cursor-pointer"
+              @click="selectedHotspot = null"
+            ></div>
+
+            <!-- Modal Card Container -->
+            <div class="modal-card bg-slate-900/90 border border-white/10 rounded-[calc(var(--app-width)*0.04)] shadow-2xl w-[calc(var(--app-width)*0.88)] overflow-hidden relative flex flex-col gap-[calc(var(--app-width)*0.035)] p-[calc(var(--app-width)*0.06)] select-text z-10 font-franklin">
+              
+              <!-- Close Button -->
+              <button 
+                @click="selectedHotspot = null"
+                class="absolute top-[calc(var(--app-width)*0.04)] right-[calc(var(--app-width)*0.04)] w-[var(--touch-target-close)] h-[var(--touch-target-close)] rounded-[calc(var(--app-width)*0.015)] bg-slate-800/80 border border-white/5 hover:bg-slate-700 text-slate-400 hover:text-white transition-all flex items-center justify-center focus:outline-none"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-[calc(var(--touch-target-close)*0.45)] h-[calc(var(--touch-target-close)*0.45)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
+              </button>
+
+              <!-- Content Header -->
+              <h3 class="font-serif-vintage text-scalable-lg font-bold text-white leading-tight pr-[calc(var(--touch-target-close)+10px)] border-b border-white/5 pb-[calc(var(--app-width)*0.025)]">
+                {{ selectedHotspot.title }}
+              </h3>
+
+              <!-- Dynamic Hotspot Content Area -->
+              <div class="flex flex-col gap-[calc(var(--app-width)*0.045)] overflow-y-auto max-h-[50vh] pr-[calc(var(--app-width)*0.015)] scrollbar-thin">
+                
+                <div v-for="(item, idx) in hotspotItems" :key="idx" class="flex flex-col gap-[calc(var(--app-width)*0.025)]">
+                  
+                  <!-- Video Player Embedded -->
+                  <div v-if="item.type === 'video'" class="flex flex-col gap-[calc(var(--app-width)*0.02)]">
+                    <div class="relative w-full overflow-hidden rounded-[calc(var(--app-width)*0.02)] aspect-video border border-white/10 bg-black shadow-lg">
+                      <iframe 
+                        v-if="getEmbedUrl(item.video_url)" 
+                        :src="getEmbedUrl(item.video_url)" 
+                        class="absolute top-0 left-0 w-full h-full" 
+                        frameborder="0" 
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+                        allowfullscreen
+                      ></iframe>
+                      <div v-else class="flex items-center justify-center h-full text-scalable-xs text-slate-500 p-[calc(var(--app-width)*0.04)]">
+                        Invalid video URL
+                      </div>
+                    </div>
+                    <p v-if="item.content" class="text-scalable-sm text-slate-300 leading-relaxed font-light mt-1 whitespace-pre-line">
+                      {{ item.content }}
+                    </p>
+                  </div>
+
+                  <!-- Uploaded Video Player (MP4) -->
+                  <div v-else-if="item.type === 'video_upload'" class="flex flex-col gap-2">
+                    <div class="relative w-full overflow-hidden rounded-lg aspect-video border border-white/10 bg-black shadow-lg">
+                      <video 
+                        :src="item.video_path" 
+                        controls 
+                        playsinline
+                        class="absolute top-0 left-0 w-full h-full object-contain"
+                      ></video>
+                    </div>
+                    <p v-if="item.content" class="text-xs sm:text-sm text-slate-300 leading-relaxed font-light mt-1 whitespace-pre-line">
+                      {{ item.content }}
+                    </p>
+                  </div>
+
+                  <!-- Image Viewer Embedded -->
+                  <div v-else-if="item.type === 'image' || item.type === 'photo'" class="flex flex-col gap-[calc(var(--app-width)*0.02)]">
+                    <div class="overflow-hidden rounded-[calc(var(--app-width)*0.02)] border border-white/10 shadow-lg bg-slate-950 max-h-64 flex justify-center items-center">
+                      <img 
+                        :src="item.image_path || item.src" 
+                        :alt="selectedHotspot.title"
+                        class="object-contain max-h-64 max-w-full"
+                      />
+                    </div>
+                    <p v-if="item.content" class="text-scalable-sm text-slate-300 leading-relaxed font-light mt-1">
+                      {{ item.content }}
+                    </p>
+                  </div>
+
+                  <!-- Text Description Standard -->
+                  <div v-else class="flex flex-col gap-3">
+                    <p 
+                      v-if="item.content"
+                      v-for="(para, pIdx) in item.content.split(/\n{2,}/)" 
+                      :key="pIdx"
+                      class="text-xs sm:text-sm text-slate-300 leading-relaxed font-light whitespace-pre-line"
+                    >
+                      {{ para }}
+                    </p>
+                  </div>
+
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </transition>
+
       </div>
 
     </main>
@@ -444,110 +547,7 @@
 
     </div> <!-- End of app-canvas -->
 
-    <!-- Translucent Overlay Modal Popover for Hotspots -->
-    <transition
-      @before-enter="onBeforeEnter"
-      @enter="onEnter"
-      @leave="onLeave"
-      :css="false"
-    >
-      <div v-if="selectedHotspot" class="fixed inset-0 z-50 flex items-center justify-center p-4">
-        <!-- Modal Backdrop -->
-        <div 
-          class="modal-backdrop absolute inset-0 bg-slate-950/70 backdrop-blur-md cursor-pointer"
-          @click="selectedHotspot = null"
-        ></div>
-
-        <!-- Modal Card Container -->
-        <div class="modal-card bg-slate-900/90 border border-white/10 rounded-[calc(var(--app-width)*0.04)] shadow-2xl w-[calc(var(--app-width)*0.88)] overflow-hidden relative flex flex-col gap-[calc(var(--app-width)*0.035)] p-[calc(var(--app-width)*0.06)] select-text z-10 font-franklin">
-          
-          <!-- Close Button -->
-          <button 
-            @click="selectedHotspot = null"
-            class="absolute top-[calc(var(--app-width)*0.04)] right-[calc(var(--app-width)*0.04)] w-[var(--touch-target-close)] h-[var(--touch-target-close)] rounded-[calc(var(--app-width)*0.015)] bg-slate-800/80 border border-white/5 hover:bg-slate-700 text-slate-400 hover:text-white transition-all flex items-center justify-center focus:outline-none"
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" class="w-[calc(var(--touch-target-close)*0.45)] h-[calc(var(--touch-target-close)*0.45)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
-          </button>
-
-          <!-- Content Header -->
-          <h3 class="font-serif-vintage text-scalable-lg font-bold text-white leading-tight pr-[calc(var(--touch-target-close)+10px)] border-b border-white/5 pb-[calc(var(--app-width)*0.025)]">
-            {{ selectedHotspot.title }}
-          </h3>
-
-          <!-- Dynamic Hotspot Content Area -->
-          <div class="flex flex-col gap-[calc(var(--app-width)*0.045)] overflow-y-auto max-h-[50vh] pr-[calc(var(--app-width)*0.015)] scrollbar-thin">
-            
-            <div v-for="(item, idx) in hotspotItems" :key="idx" class="flex flex-col gap-[calc(var(--app-width)*0.025)]">
-              
-              <!-- Video Player Embedded -->
-              <div v-if="item.type === 'video'" class="flex flex-col gap-[calc(var(--app-width)*0.02)]">
-                <div class="relative w-full overflow-hidden rounded-[calc(var(--app-width)*0.02)] aspect-video border border-white/10 bg-black shadow-lg">
-                  <iframe 
-                    v-if="getEmbedUrl(item.video_url)" 
-                    :src="getEmbedUrl(item.video_url)" 
-                    class="absolute top-0 left-0 w-full h-full" 
-                    frameborder="0" 
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
-                    allowfullscreen
-                  ></iframe>
-                  <div v-else class="flex items-center justify-center h-full text-scalable-xs text-slate-500 p-[calc(var(--app-width)*0.04)]">
-                    Invalid video URL
-                  </div>
-                </div>
-
-                <p v-if="item.content" class="text-scalable-sm text-slate-300 leading-relaxed font-light mt-1 whitespace-pre-line">
-                  {{ item.content }}
-                </p>
-              </div>
-
-              <!-- Uploaded Video Player (MP4) -->
-              <div v-else-if="item.type === 'video_upload'" class="flex flex-col gap-2">
-                <div class="relative w-full overflow-hidden rounded-lg aspect-video border border-white/10 bg-black shadow-lg">
-                  <video 
-                    :src="item.video_path" 
-                    controls 
-                    playsinline
-                    class="absolute top-0 left-0 w-full h-full object-contain"
-                  ></video>
-                </div>
-                <p v-if="item.content" class="text-xs sm:text-sm text-slate-300 leading-relaxed font-light mt-1 whitespace-pre-line">
-                  {{ item.content }}
-                </p>
-              </div>
-
-              <!-- Image Viewer Embedded -->
-              <div v-else-if="item.type === 'image' || item.type === 'photo'" class="flex flex-col gap-[calc(var(--app-width)*0.02)]">
-                <div class="overflow-hidden rounded-[calc(var(--app-width)*0.02)] border border-white/10 shadow-lg bg-slate-950 max-h-64 flex justify-center items-center">
-                  <img 
-                    :src="item.image_path || item.src" 
-                    :alt="selectedHotspot.title"
-                    class="object-contain max-h-64 max-w-full"
-                  />
-                </div>
-                <p v-if="item.content" class="text-scalable-sm text-slate-300 leading-relaxed font-light mt-1">
-                  {{ item.content }}
-                </p>
-              </div>
-
-              <!-- Text Description Standard -->
-              <div v-else class="flex flex-col gap-3">
-                <p 
-                  v-if="item.content"
-                  v-for="(para, pIdx) in item.content.split(/\n{2,}/)" 
-                  :key="pIdx"
-                  class="text-xs sm:text-sm text-slate-300 leading-relaxed font-light whitespace-pre-line"
-                >
-                  {{ para }}
-
-                </p>
-              </div>
-
-            </div>
 
-          </div>
-        </div>
-      </div>
-    </transition>
 
 
     <!-- Background Video with Sky & Clouds (Only shown during welcome) -->
@@ -857,7 +857,7 @@ onUnmounted(() => {
 
 // Dynamic slide width sizing
 const slideWidth = computed(() => {
-  return Math.round(containerWidth.value * 0.72);
+  return Math.round(containerWidth.value * 0.58);
 });
 
 // Calculate translation offset of slider track to center the active slide perfectly in its viewport