diff --git a/app.vue b/app.vue
index 2ab211c..c79c9da 100644
--- a/app.vue
+++ b/app.vue
@@ -32,12 +32,16 @@
               <LogoHeader />
             </div>
             <div class="header-accent-container">
-              <div class="header-accent-line"></div>
+              <div class="header-accent-line" />
             </div>
           </div>
           <div class="flex flex-wrap sm:-m-4 -mx-2 sm:-mx-4 -mb-10 -mt-4">
             <div class="p-2 sm:p-4 md:w-1/3 sm:mb-0 mb-6 animate-fade-in-up">
-              <div class="card-modern p-6 h-80 flex flex-col items-center relative">
+              <div
+                class="card-modern p-6 h-80 flex flex-col items-center relative"
+                @mouseenter="isDeviceCardHovered = true"
+                @mouseleave="isDeviceCardHovered = false"
+              >
                 <div class="absolute top-3 left-3 w-8 h-8 rounded-full step-badge-circle flex items-center justify-center">
                   <span class="step-number">1</span>
                 </div>
@@ -46,7 +50,7 @@
                   class="h-40 w-40 mb-4 mx-auto object-contain drop-shadow-lg"
                   :alt="$t('device.title')"
                 >
-                <Device />
+                <Device :card-hovered="isDeviceCardHovered" />
               </div>
               <h2 class="text-xl sm:text-xl font-semibold title-doto text-theme mt-5 tracking-wide">
                 {{ $t('device.title') }}
@@ -143,11 +147,17 @@
       <div class="container mx-auto px-3 sm:px-5 py-2 sm:py-4 text-center">
         <p class="text-xs sm:text-sm text-theme-muted">
           Powered by
-          <a href="https://vercel.com/?utm_source=meshtastic&utm_campaign=oss" class="link-theme">▲ Vercel</a>
+          <a
+            href="https://vercel.com/?utm_source=meshtastic&utm_campaign=oss"
+            class="link-theme"
+          >▲ Vercel</a>
           <span class="mx-2 text-theme-muted/50">•</span>
           Meshtastic® is a registered trademark of Meshtastic LLC.
           <span class="mx-2 text-theme-muted/50">•</span>
-          <a href="https://meshtastic.org/docs/legal" class="link-theme">Legal Information</a>
+          <a
+            href="https://meshtastic.org/docs/legal"
+            class="link-theme"
+          >Legal Information</a>
         </p>
       </div>
     </footer>
@@ -173,7 +183,10 @@
       </transition-group>
     </div>
 
-    <div v-show="isConnected" class="fixed right-2 sm:right-4 top-4 sm:top-6 group z-[10000]">
+    <div
+      v-show="isConnected"
+      class="fixed right-2 sm:right-4 top-4 sm:top-6 group z-[10000]"
+    >
       <button
         type="button"
         :disabled="true"
@@ -277,6 +290,8 @@ const isStep3Enabled = computed(() => {
   return hasDevice && hasFirmware
 })
 
+const isDeviceCardHovered = ref(false)
+
 // WebSerial API support check
 const isWebSerialSupported = computed(() => {
   return 'serial' in navigator
@@ -289,12 +304,12 @@ let konamiKeyId = 0
 
 const getKeyDisplay = (key) => {
   const keyMap = {
-    'ArrowUp': '↑',
-    'ArrowDown': '↓',
-    'ArrowLeft': '←',
-    'ArrowRight': '→',
-    'b': 'B',
-    'a': 'A',
+    ArrowUp: '↑',
+    ArrowDown: '↓',
+    ArrowLeft: '←',
+    ArrowRight: '→',
+    b: 'B',
+    a: 'A',
   }
   return keyMap[key] || key
 }
@@ -302,7 +317,7 @@ const getKeyDisplay = (key) => {
 window.addEventListener('keydown', (event) => {
   if (event.key === konamiKeys[konamiCodeIndex.value]) {
     console.log('konami code key match', konamiCodeIndex.value)
-    
+
     // Add key to animation queue with unique ID
     const keyToDisplay = konamiKeys[konamiCodeIndex.value]
     const keyEntry = { key: keyToDisplay, id: konamiKeyId++ }
@@ -311,7 +326,7 @@ window.addEventListener('keydown', (event) => {
       const idx = activeKonamiKeys.value.findIndex(k => k.id === keyEntry.id)
       if (idx > -1) activeKonamiKeys.value.splice(idx, 1)
     }, 1000)
-    
+
     konamiCodeIndex.value++
     if (konamiCodeIndex.value === konamiKeys.length) {
       console.log('Unlocking pre-release section')
@@ -392,10 +407,10 @@ onMounted(() => {
     background-size: 400% 400% !important;
     animation: konamiGradient 8s ease infinite !important;
     /* Smooth transition for background change */
-    transition: background 1.5s cubic-bezier(0.4, 0, 0.2, 1), 
+    transition: background 1.5s cubic-bezier(0.4, 0, 0.2, 1),
                 color 1.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
   }
-  
+
   /* Light mode konami - use light retro background */
   :root[data-theme="light"] .konami-code {
     background: linear-gradient(
@@ -409,13 +424,13 @@ onMounted(() => {
     ) !important;
     color: #1a3a1a !important;
   }
-  
+
   :root[data-theme="light"] .konami-code,
   :root[data-theme="light"] .konami-code * {
     color: #1a3a1a !important;
     text-shadow: none !important;
   }
-  
+
   :root[data-theme="light"] .konami-code h2 {
     color: #0d5f0d !important;
     text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5) !important;
@@ -489,7 +504,7 @@ onMounted(() => {
   /* Neon glow effect on cards in konami mode */
   .konami-code .card-modern {
     border: 1px solid rgba(103, 234, 148, 0.5) !important;
-    box-shadow: 
+    box-shadow:
       0 0 10px rgba(103, 234, 148, 0.3),
       0 0 20px rgba(103, 234, 148, 0.1),
       inset 0 0 20px rgba(103, 234, 148, 0.05) !important;
@@ -498,13 +513,13 @@ onMounted(() => {
 
   @keyframes neonPulse {
     0%, 100% {
-      box-shadow: 
+      box-shadow:
         0 0 10px rgba(103, 234, 148, 0.3),
         0 0 20px rgba(103, 234, 148, 0.1),
         inset 0 0 20px rgba(103, 234, 148, 0.05);
     }
     50% {
-      box-shadow: 
+      box-shadow:
         0 0 15px rgba(103, 234, 148, 0.5),
         0 0 30px rgba(103, 234, 148, 0.2),
         inset 0 0 25px rgba(103, 234, 148, 0.1);
@@ -513,7 +528,7 @@ onMounted(() => {
 
   /* Retro pixel-style text shadow on headings */
   .konami-code h2 {
-    text-shadow: 
+    text-shadow:
       2px 2px 0 rgba(103, 234, 148, 0.3),
       -1px -1px 0 rgba(0, 0, 0, 0.5) !important;
   }
diff --git a/components/Device.vue b/components/Device.vue
index b40d0f8..52d573c 100644
--- a/components/Device.vue
+++ b/components/Device.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="inline-flex items-center gap-2">
     <button
       id="selectDeviceButton"
       data-modal-target="device-modal"
@@ -17,7 +17,8 @@
     >
       <Rocket
         class="h-4 w-4"
-        :class="{ 'animate-bounce': !store.$state.selectedTarget?.hwModel }"
+        :style="{ willChange: cardHovered ? 'transform' : 'auto', transform: cardHovered ? 'translateZ(0)' : 'auto' }"
+        :class="{ 'animate-bounce-in-place': cardHovered && !store.$state.selectedTarget?.hwModel }"
       />
     </button>
     <div
@@ -36,168 +37,174 @@
         id="device-modal"
         tabindex="-1"
         aria-hidden="true"
-        class="hidden fixed inset-0 z-[60] flex items-start justify-center modal-backdrop backdrop-blur-sm px-4 sm:px-6 md:px-8 py-8 md:py-12"
+        class="hidden fixed inset-0 z-[60] modal-backdrop backdrop-blur-sm px-4 sm:px-6 md:px-8 py-8 md:py-12"
       >
-        <div
-          class="relative w-full max-w-6xl"
-          :class="{ 'max-w-4xl': vendorCobrandingTag.length > 0, 'max-w-7xl': vendorCobrandingTag.length == 0 }"
-        >
-          <div class="modal-content relative flex flex-col max-h-[90vh] overflow-hidden rounded-2xl shadow-2xl text-theme">
-          <DeviceHeader />
-          <div class="flex-1 overflow-y-auto">
-          <div class="flex flex-col gap-3 py-3 px-3">
-            <div class="flex flex-wrap items-center gap-2 sm:gap-3 overflow-x-auto">
-              <button
-                type="button"
-                class="tag-pill tag-pill-active shrink-0"
-                @click="store.setSelectedTag('all')"
-              >
-                {{ $t('device.all_devices') }}
-              </button>
-              <button
-                v-if="vendorCobrandingTag.length === 0"
-                type="button"
-                class="tag-pill tag-pill-inactive shrink-0"
-                @click="store.setSelectedTag('RAK')"
-              >
-                RAK
-              </button>
-              <button
-                v-if="vendorCobrandingTag.length === 0"
-                type="button"
-                class="tag-pill tag-pill-inactive shrink-0"
-                @click="store.setSelectedTag('B&Q')"
-              >
-                B&Q
-              </button>
-              <button
-                v-if="vendorCobrandingTag.length === 0"
-                type="button"
-                class="tag-pill tag-pill-inactive shrink-0"
-                @click="store.setSelectedTag('LilyGo')"
-              >
-                LilyGo
-              </button>
-              <button
-                v-if="vendorCobrandingTag.length === 0"
-                type="button"
-                class="tag-pill tag-pill-inactive shrink-0"
-                @click="store.setSelectedTag('Seeed')"
-              >
-                Seeed
-              </button>
-              <button
-                v-if="vendorCobrandingTag.length === 0"
-                type="button"
-                class="tag-pill tag-pill-inactive shrink-0"
-                @click="store.setSelectedTag('Heltec')"
-              >
-                Heltec
-              </button>
-              <button
-                v-if="vendorCobrandingTag.length === 0"
-                type="button"
-                class="tag-pill tag-pill-inactive shrink-0"
-                @click="store.setSelectedTag('Elecrow')"
-              >
-                Elecrow
-              </button>
-              <button
-                v-if="vendorCobrandingTag.length === 0"
-                type="button"
-                class="tag-pill tag-pill-inactive shrink-0"
-                @click="store.setSelectedTag('M5Stack')"
-              >
-                M5Stack
-              </button>
-              <button
-                v-if="vendorCobrandingTag.length === 0"
-                type="button"
-                class="tag-pill tag-pill-inactive shrink-0"
-                @click="store.setSelectedTag('NomadStar')"
-              >
-                NomadStar
-              </button>
-              <button
-                v-if="vendorCobrandingTag.length === 0"
-                type="button"
-                class="tag-pill tag-pill-inactive shrink-0"
-                @click="store.setSelectedTag('muzi')"
-              >
-                muzi ᴡᴏʀᴋꜱ
-              </button>
-            </div>
-            <div class="flex flex-wrap items-center gap-2 sm:gap-3 overflow-x-auto">
-              <button
-                v-for="arch in store.allArchs"
-                type="button"
-                class="tag-pill tag-pill-arch shrink-0"
-                @click="store.setSelectedTag(arch)"
-              >
-                {{ arch }}
-              </button>
-            </div>
-          </div>
-          <div
-            class="p-3 sm:p-4 mb-1 mx-3 my-3 text-xs sm:text-sm rounded-xl text-theme-muted step-card"
-            role="alert"
-          >
-            <span class="font-medium">
-              <Info class="h-4 w-4 inline text-meshtastic" />
-              {{ $t('device.subheading') }} <button
-                type="button"
-                class="btn-primary inline-flex py-1.5 sm:py-2 mx-1 sm:mx-2 px-3 sm:px-4 text-xs sm:text-sm"
-                @click="() => store.autoSelectHardware($t)"
-              ><Rocket class="h-3 w-3 sm:h-4 sm:w-4" /> {{ $t('device.auto_detect') }}</button>
-            </span>
-          </div>
-          <div
-            v-if="vendorCobrandingTag.length === 0"
-            class="p-2 sm:p-3 m-1 sm:m-2 flex flex-wrap items-center justify-center gap-3"
-          >
-            <div class="w-full text-center mb-2">
-              <h2 class="text-xl sm:text-xl font-semibold text-theme">
-                {{ $t('device.supported_devices') }}
-              </h2>
-            </div>
-            <div
-              v-for="device in uniqueDevices.filter(d => isSupporterDevice(d) && d.supportLevel != 3)"
-              class="device-card w-full sm:w-auto sm:max-w-sm"
-              @click="setSelectedTarget(device)"
-            >
-              <DeviceDetail :device="device" />
-            </div>
-            <div class="divider-glow my-4" />
-            <div
-              v-if="uniqueDevices.filter(d => !isSupporterDevice(d) || d.supportLevel == 3).length > 0"
-              class="w-full text-center"
-            >
-              <h2 class="text-xl sm:text-xl font-semibold text-warning">
-                {{ $t('device.diy_devices') }}
-              </h2>
-            </div>
-            <div
-              v-for="device in uniqueDevices.filter(d => !isSupporterDevice(d) || d.supportLevel == 3)"
-              class="device-card w-full sm:w-auto sm:max-w-sm"
-              @click="setSelectedTarget(device)"
-            >
-              <DeviceDetail :device="device" />
-            </div>
-          </div>
+        <div class="flex min-h-full items-start justify-center">
           <div
-            v-else
-            class="p-2 sm:p-3 m-1 sm:m-2 flex flex-wrap items-center justify-center gap-3"
+            class="relative w-full max-w-6xl"
+            :class="{ 'max-w-4xl': vendorCobrandingTag.length > 0, 'max-w-7xl': vendorCobrandingTag.length == 0 }"
           >
-            <div
-              v-for="device in uniqueDevices"
-              class="device-card w-full sm:w-auto sm:max-w-sm"
-              @click="store.setSelectedTarget(device)"
-            >
-              <DeviceDetail :device="device" />
+            <div class="modal-content relative flex flex-col max-h-[90vh] overflow-hidden rounded-2xl shadow-2xl text-theme">
+              <DeviceHeader />
+              <div class="flex-1 overflow-y-auto">
+                <div class="flex flex-col gap-3 py-3 px-3">
+                  <div class="flex flex-wrap items-center gap-2 sm:gap-3 overflow-x-auto">
+                    <button
+                      type="button"
+                      class="tag-pill tag-pill-active shrink-0"
+                      @click="store.setSelectedTag('all')"
+                    >
+                      {{ $t('device.all_devices') }}
+                    </button>
+                    <button
+                      v-if="vendorCobrandingTag.length === 0"
+                      type="button"
+                      class="tag-pill tag-pill-inactive shrink-0"
+                      @click="store.setSelectedTag('RAK')"
+                    >
+                      RAK
+                    </button>
+                    <button
+                      v-if="vendorCobrandingTag.length === 0"
+                      type="button"
+                      class="tag-pill tag-pill-inactive shrink-0"
+                      @click="store.setSelectedTag('B&Q')"
+                    >
+                      B&Q
+                    </button>
+                    <button
+                      v-if="vendorCobrandingTag.length === 0"
+                      type="button"
+                      class="tag-pill tag-pill-inactive shrink-0"
+                      @click="store.setSelectedTag('LilyGo')"
+                    >
+                      LilyGo
+                    </button>
+                    <button
+                      v-if="vendorCobrandingTag.length === 0"
+                      type="button"
+                      class="tag-pill tag-pill-inactive shrink-0"
+                      @click="store.setSelectedTag('Seeed')"
+                    >
+                      Seeed
+                    </button>
+                    <button
+                      v-if="vendorCobrandingTag.length === 0"
+                      type="button"
+                      class="tag-pill tag-pill-inactive shrink-0"
+                      @click="store.setSelectedTag('Heltec')"
+                    >
+                      Heltec
+                    </button>
+                    <button
+                      v-if="vendorCobrandingTag.length === 0"
+                      type="button"
+                      class="tag-pill tag-pill-inactive shrink-0"
+                      @click="store.setSelectedTag('Elecrow')"
+                    >
+                      Elecrow
+                    </button>
+                    <button
+                      v-if="vendorCobrandingTag.length === 0"
+                      type="button"
+                      class="tag-pill tag-pill-inactive shrink-0"
+                      @click="store.setSelectedTag('M5Stack')"
+                    >
+                      M5Stack
+                    </button>
+                    <button
+                      v-if="vendorCobrandingTag.length === 0"
+                      type="button"
+                      class="tag-pill tag-pill-inactive shrink-0"
+                      @click="store.setSelectedTag('NomadStar')"
+                    >
+                      NomadStar
+                    </button>
+                    <button
+                      v-if="vendorCobrandingTag.length === 0"
+                      type="button"
+                      class="tag-pill tag-pill-inactive shrink-0"
+                      @click="store.setSelectedTag('muzi')"
+                    >
+                      muzi ᴡᴏʀᴋꜱ
+                    </button>
+                  </div>
+                  <div class="flex flex-wrap items-center gap-2 sm:gap-3 overflow-x-auto">
+                    <button
+                      v-for="arch in store.allArchs"
+                      :key="arch"
+                      type="button"
+                      class="tag-pill tag-pill-arch shrink-0"
+                      @click="store.setSelectedTag(arch)"
+                    >
+                      {{ arch }}
+                    </button>
+                  </div>
+                </div>
+                <div
+                  class="p-3 sm:p-4 mb-1 mx-3 my-3 text-xs sm:text-sm rounded-xl text-theme-muted step-card"
+                  role="alert"
+                >
+                  <span class="font-medium">
+                    <Info class="h-4 w-4 inline text-meshtastic" />
+                    {{ $t('device.subheading') }} <button
+                      type="button"
+                      class="btn-primary inline-flex py-1.5 sm:py-2 mx-1 sm:mx-2 px-3 sm:px-4 text-xs sm:text-sm"
+                      @click="() => store.autoSelectHardware($t)"
+                    ><Rocket class="h-3 w-3 sm:h-4 sm:w-4" /> {{ $t('device.auto_detect') }}</button>
+                  </span>
+                </div>
+                <div
+                  v-if="vendorCobrandingTag.length === 0"
+                  class="p-2 sm:p-3 m-1 sm:m-2 flex flex-wrap items-center justify-center gap-3"
+                >
+                  <div class="w-full text-center mb-2">
+                    <h2 class="text-xl sm:text-xl font-semibold text-theme">
+                      {{ $t('device.supported_devices') }}
+                    </h2>
+                  </div>
+                  <div
+                    v-for="device in uniqueDevices.filter(d => isSupporterDevice(d) && d.supportLevel != 3)"
+                    :key="device.key"
+                    class="device-card w-full sm:w-auto sm:max-w-sm"
+                    @click="setSelectedTarget(device)"
+                  >
+                    <DeviceDetail :device="device" />
+                  </div>
+                  <div class="divider-glow my-4" />
+                  <div
+                    v-if="uniqueDevices.filter(d => !isSupporterDevice(d) || d.supportLevel == 3).length > 0"
+                    class="w-full text-center"
+                  >
+                    <h2 class="text-xl sm:text-xl font-semibold text-warning">
+                      {{ $t('device.diy_devices') }}
+                    </h2>
+                  </div>
+                  <div
+                    v-for="device in uniqueDevices.filter(d => !isSupporterDevice(d) || d.supportLevel == 3)"
+                    :key="device.key"
+                    class="device-card w-full sm:w-auto sm:max-w-sm"
+                    @click="setSelectedTarget(device)"
+                  >
+                    <DeviceDetail :device="device" />
+                  </div>
+                </div>
+                <div
+                  v-else
+                  class="p-2 sm:p-3 m-1 sm:m-2 flex flex-wrap items-center justify-center gap-3"
+                >
+                  <div
+                    v-for="device in uniqueDevices"
+                    :key="device.key"
+                    class="device-card w-full sm:w-auto sm:max-w-sm"
+                    @click="store.setSelectedTarget(device)"
+                  >
+                    <DeviceDetail :device="device" />
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
-          </div>
-          </div>
         </div>
       </div>
     </Teleport>
@@ -224,6 +231,10 @@ import { computed } from 'vue'
 
 const { t } = useI18n()
 
+defineProps<{
+  cardHovered?: boolean
+}>()
+
 const store = useDeviceStore()
 const firmwareStore = useFirmwareStore()
 store.fetchList()
diff --git a/components/Firmware.vue b/components/Firmware.vue
index 3f1dd30..9b0442c 100644
--- a/components/Firmware.vue
+++ b/components/Firmware.vue
@@ -10,117 +10,126 @@
       :class="{ 'animate-bounce': store.prereleaseUnlocked && !store.$state.selectedFirmware?.id }"
       type="button"
       :disabled="!canSelectFirmware"
-        @click.stop="toggleDropdown"
+      @click.stop="toggleDropdown"
     >
       {{ selectedVersion.replace('Meshtastic Firmware ', '').replace('Technical ', '') }}
       <ChevronDown class="w-2.5 h-2.5 ms-2" />
     </button>
-      <Teleport to="body">
-        <div
-          id="dropdownFirmware"
-          ref="dropdownRef"
-          v-show="isOpen"
-          class="fixed z-[120] rounded-xl shadow-2xl max-w-sm overflow-y-auto backdrop-blur-xl dropdown-menu"
-          :style="dropdownStyle"
-        >
-      <!-- Event Mode: Single firmware option -->
-      <template v-if="eventMode.enabled">
-        <div
-          class="px-4 py-2 text-sm text-meshtastic font-semibold border-theme-bottom"
-        >
-          {{ eventMode.eventName }}
-        </div>
-        <ul
-          class="py-2 text-sm text-theme-muted"
-          aria-labelledby="dropdownInformationButton"
-        >
-          <li>
-            <a
-              href="#"
-              class="block px-4 py-2 hover:text-meshtastic-dark hover:bg-surface-secondary cursor-pointer transition-colors"
-              @click="setSelectedFirmware(eventMode.firmware)"
-            >
-              {{ eventMode.firmware.title.replace('Meshtastic Firmware ', '') }}
-            </a>
-          </li>
-        </ul>
-      </template>
-
-      <!-- Normal Mode: Full firmware list -->
-      <template v-else>
+    <Teleport to="body">
       <div
-        v-if="store.prereleaseUnlocked && store.$state.previews.length > 0"
-        class="px-4 py-2 text-sm text-meshtastic font-semibold border-theme-bottom"
-      >
-        {{ $t('firmware.prerelease') }}
-      </div>
-      <ul
-        v-if="store.prereleaseUnlocked && store.$state.previews.length > 0"
-        class="py-2 text-sm text-theme-muted"
-        aria-labelledby="dropdownInformationButton"
+        v-show="isOpen"
+        id="dropdownFirmware"
+        ref="dropdownRef"
+        class="fixed z-[120] rounded-xl shadow-2xl max-w-sm overflow-y-auto backdrop-blur-xl dropdown-menu"
+        :style="dropdownStyle"
       >
-        <li v-for="release in store.$state.previews">
-          <a
-            href="#"
-            class="block px-4 py-2 hover:text-meshtastic-dark hover:bg-surface-secondary cursor-pointer transition-colors"
-            @click="setSelectedFirmware(release)"
+        <!-- Event Mode: Single firmware option -->
+        <template v-if="eventMode.enabled">
+          <div
+            class="px-4 py-2 text-sm text-meshtastic font-semibold border-theme-bottom"
           >
-            {{ release.title.replace('Meshtastic Firmware ', '').replace('Pre-release ', '') }}
-          </a>
-        </li>
-      </ul>
-      <div
-        v-if="!store.couldntFetchFirmwareApi"
-        class="px-4 py-2 text-sm text-warning font-semibold border-theme-bottom border-theme-top"
-      >
-        {{ $t('firmware.unstable') }}
-      </div>
-      <ul
-        v-if="!store.couldntFetchFirmwareApi"
-        class="py-2 text-sm text-theme-muted"
-        aria-labelledby="dropdownInformationButton"
-      >
-        <li v-for="release in store.$state.alpha">
-          <a
-            href="#"
-            class="block px-4 py-2 hover:text-meshtastic-dark hover:bg-surface-secondary cursor-pointer transition-colors"
-            @click="setSelectedFirmware(release)"
+            {{ eventMode.eventName }}
+          </div>
+          <ul
+            class="py-2 text-sm text-theme-muted"
+            aria-labelledby="dropdownInformationButton"
           >
-            {{ release.title.replace('Meshtastic Firmware ', '') }}
-          </a>
-        </li>
-      </ul>
-      <div
-        v-if="!store.couldntFetchFirmwareApi"
-        class="px-4 py-2 text-sm text-green-400 font-semibold border-theme-bottom border-theme-top"
-      >
-        {{ $t('firmware.stable') }}
-      </div>
-      <ul
-        v-if="!store.couldntFetchFirmwareApi"
-        class="py-2 text-sm text-theme-muted"
-        aria-labelledby="dropdownInformationButton"
-      >
-        <li v-for="release in store.$state.stable">
-          <span
-            class="block px-4 py-2 hover:text-meshtastic-dark hover:bg-surface-secondary cursor-pointer transition-colors"
-            @click="setSelectedFirmware(release)"
+            <li>
+              <a
+                href="#"
+                class="block px-4 py-2 hover:text-meshtastic-dark hover:bg-surface-secondary cursor-pointer transition-colors"
+                @click="setSelectedFirmware(eventMode.firmware)"
+              >
+                {{ eventMode.firmware.title.replace('Meshtastic Firmware ', '') }}
+              </a>
+            </li>
+          </ul>
+        </template>
+
+        <!-- Normal Mode: Full firmware list -->
+        <template v-else>
+          <div
+            v-if="store.prereleaseUnlocked && store.$state.previews.length > 0"
+            class="px-4 py-2 text-sm text-meshtastic font-semibold border-theme-bottom"
           >
-            {{ release.title.replace('Meshtastic Firmware ', '') }}
-          </span>
-        </li>
-      </ul>
-      <div
-        v-if="store.couldntFetchFirmwareApi"
-        class="px-3 sm:px-4 py-3 w-full sm:w-96 max-w-sm rounded-xl text-xs sm:text-sm border error-fetch-box break-words"
-      >
-        <strong>{{ $t('firmware.error_fetching') }}</strong>
-        <br>
-        {{ $t('firmware.refresh_later') }}
-        {{ $t('firmware.upload_alternative') }}
-        <FolderOpen class="h-3 w-3 inline" /> {{ $t('firmware.icon') }}
-      </div>
-      </template>
+            {{ $t('firmware.prerelease') }}
+          </div>
+          <ul
+            v-if="store.prereleaseUnlocked && store.$state.previews.length > 0"
+            class="py-2 text-sm text-theme-muted"
+            aria-labelledby="dropdownInformationButton"
+          >
+            <li
+              v-for="release in store.$state.previews"
+              :key="release.id"
+            >
+              <a
+                href="#"
+                class="block px-4 py-2 hover:text-meshtastic-dark hover:bg-surface-secondary cursor-pointer transition-colors"
+                @click="setSelectedFirmware(release)"
+              >
+                {{ release.title.replace('Meshtastic Firmware ', '').replace('Pre-release ', '') }}
+              </a>
+            </li>
+          </ul>
+          <div
+            v-if="!store.couldntFetchFirmwareApi"
+            class="px-4 py-2 text-sm text-warning font-semibold border-theme-bottom border-theme-top"
+          >
+            {{ $t('firmware.unstable') }}
+          </div>
+          <ul
+            v-if="!store.couldntFetchFirmwareApi"
+            class="py-2 text-sm text-theme-muted"
+            aria-labelledby="dropdownInformationButton"
+          >
+            <li
+              v-for="release in store.$state.alpha"
+              :key="release.id"
+            >
+              <a
+                href="#"
+                class="block px-4 py-2 hover:text-meshtastic-dark hover:bg-surface-secondary cursor-pointer transition-colors"
+                @click="setSelectedFirmware(release)"
+              >
+                {{ release.title.replace('Meshtastic Firmware ', '') }}
+              </a>
+            </li>
+          </ul>
+          <div
+            v-if="!store.couldntFetchFirmwareApi"
+            class="px-4 py-2 text-sm text-green-400 font-semibold border-theme-bottom border-theme-top"
+          >
+            {{ $t('firmware.stable') }}
+          </div>
+          <ul
+            v-if="!store.couldntFetchFirmwareApi"
+            class="py-2 text-sm text-theme-muted"
+            aria-labelledby="dropdownInformationButton"
+          >
+            <li
+              v-for="release in store.$state.stable"
+              :key="release.id"
+            >
+              <span
+                class="block px-4 py-2 hover:text-meshtastic-dark hover:bg-surface-secondary cursor-pointer transition-colors"
+                @click="setSelectedFirmware(release)"
+              >
+                {{ release.title.replace('Meshtastic Firmware ', '') }}
+              </span>
+            </li>
+          </ul>
+          <div
+            v-if="store.couldntFetchFirmwareApi"
+            class="px-3 sm:px-4 py-3 w-full sm:w-96 max-w-sm rounded-xl text-xs sm:text-sm border error-fetch-box break-words"
+          >
+            <strong>{{ $t('firmware.error_fetching') }}</strong>
+            <br>
+            {{ $t('firmware.refresh_later') }}
+            {{ $t('firmware.upload_alternative') }}
+            <FolderOpen class="h-3 w-3 inline" /> {{ $t('firmware.icon') }}
+          </div>
+        </template>
       </div>
     </Teleport>
     <button
@@ -191,8 +200,10 @@ const openFile = () => {
   document.getElementById('file_upload')?.click()
 }
 
-const setFirmwareFile = (event: any) => {
-  store.setFirmwareFile(event.target.files[0])
+const setFirmwareFile = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (file) store.setFirmwareFile(file)
 }
 
 const setSelectedFirmware = (release: FirmwareResource) => {
diff --git a/components/LogoHeader.vue b/components/LogoHeader.vue
index 496d5b9..7ffb424 100644
--- a/components/LogoHeader.vue
+++ b/components/LogoHeader.vue
@@ -37,6 +37,7 @@
     >
       <div class="logo-container">
         <div class="logo-glow">
+          <div class="logo-glow-animation" />
           <img
             v-if="themeStore.isDark"
             src="@/assets/img/logo.svg"
@@ -60,7 +61,9 @@
       <h1 class="logo-title">
         <span class="logo-title-gradient">{{ $t('header_title') }}</span>
       </h1>
-      <p class="logo-tagline">{{ eventMode.eventName }}</p>
+      <p class="logo-tagline">
+        {{ eventMode.eventName }}
+      </p>
     </div>
 
     <!-- Standard variant -->
@@ -70,6 +73,7 @@
     >
       <div class="logo-container">
         <div class="logo-glow">
+          <div class="logo-glow-animation" />
           <img
             v-if="themeStore.isDark"
             src="@/assets/img/logo.svg"
@@ -87,7 +91,9 @@
       <h1 class="logo-title">
         <span class="logo-title-gradient">{{ $t('header_title') }}</span>
       </h1>
-      <p class="logo-tagline">{{ $t('description') }}</p>
+      <p class="logo-tagline">
+        {{ $t('description') }}
+      </p>
     </div>
   </div>
 </template>
@@ -122,19 +128,30 @@ const { eventMode } = useEventMode()
 
 .logo-glow {
   position: relative;
+  display: inline-block;
 }
 
-.logo-glow::before {
-  content: '';
+.logo-glow-animation {
   position: absolute;
-  inset: -8px;
-  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
+  inset: -4px;
+  background: var(--accent-glow);
+  opacity: 0.3;
+  filter: blur(32px);
   border-radius: 50%;
+  pointer-events: none;
   animation: logo-pulse 3s ease-in-out infinite;
   will-change: transform, opacity;
   transform: translateZ(0);
 }
 
+[data-theme="light"] .logo-glow-animation {
+  animation: none;
+  background: none;
+  box-shadow: 0 0 32px var(--accent-glow);
+  inset: 4px;
+  border-radius: 12.5%;
+}
+
 @keyframes logo-pulse {
   0%, 100% { opacity: 0.5; transform: scale(1) translateZ(0); }
   50% { opacity: 0.8; transform: scale(1.05) translateZ(0); }
diff --git a/tailwind.config.js b/tailwind.config.js
index 7b74f38..13334c8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -34,6 +34,7 @@ export default {
         'fade-in-up-delayed-2': 'fadeInUp 0.6s ease-out 0.2s both',
         'glow': 'glow 2s ease-in-out infinite alternate',
         'float': 'float 3s ease-in-out infinite',
+        'bounce-in-place': 'bounceInPlace 1.2s ease-in-out infinite',
       },
       keyframes: {
         fadeIn: {
@@ -52,6 +53,10 @@ export default {
           '0%, 100%': { transform: 'translateY(0)' },
           '50%': { transform: 'translateY(-10px)' },
         },
+        bounceInPlace: {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-25%)' },
+        },
       },
       boxShadow: {
         'glow': '0 0 20px rgba(103, 234, 148, 0.3)',
diff --git a/types/resources.ts b/types/resources.ts
index 89d416b..df9d05a 100644
--- a/types/resources.ts
+++ b/types/resources.ts
@@ -55,5 +55,5 @@ export const eventMode: EventModeConfig = {
   },
 };
 
-export const vendorCobrandingTag = "";
+export const vendorCobrandingTag: string = "";
 export const supportedVendorDeviceTags = ["RAK", "B&Q", "LilyGo", "Seeed", "Heltec", "DIY", "Elecrow", "M5Stack", "NomadStar", "muzi"];