diff --git a/frontend/src/pages/BotProfilePage.vue b/frontend/src/pages/BotProfilePage.vue
index b182636..93c2aa7 100644
--- a/frontend/src/pages/BotProfilePage.vue
+++ b/frontend/src/pages/BotProfilePage.vue
@@ -409,10 +409,11 @@ const tierClass = (t: number) => `tier-${t}`
                 class="flex-1 py-3 bg-neon-pink/10 border-2 border-neon-pink/50 text-neon-pink
                        font-display font-black text-sm tracking-wider
                        hover:bg-neon-pink/20 transition-all neon-border-pink
-                       disabled:opacity-30 disabled:cursor-not-allowed"
+                       disabled:opacity-50 disabled:cursor-wait flex items-center justify-center gap-2"
                 :disabled="isJoining"
                 @click="instantFight"
               >
+                <span v-if="isJoining" class="w-4 h-4 border-2 border-neon-pink/30 border-t-neon-pink rounded-full animate-spin" />
                 {{ isJoining ? 'MATCHING...' : 'INSTANT FIGHT' }}
               </button>
               <button
diff --git a/frontend/src/pages/FightPage.vue b/frontend/src/pages/FightPage.vue
index f44725f..c7cd62f 100644
--- a/frontend/src/pages/FightPage.vue
+++ b/frontend/src/pages/FightPage.vue
@@ -27,6 +27,56 @@ const autoBattleCount = ref(0)
 let pollHandle: ReturnType<typeof setInterval> | null = null
 let pollCount = 0
 
+// Watch route param changes (e.g. "watch another fight" navigating to a new fight)
+watch(() => route.params.fightId, async (newId) => {
+  if (!newId || newId === fightId.value) return
+  // Clean up current state
+  if (pollHandle) { clearInterval(pollHandle); pollHandle = null }
+  stopHumanPolling()
+  disconnectSSE()
+  stopAllAudio()
+  if (liveScene) { liveScene.destroy(); liveScene = null }
+  liveSceneReady.value = false
+
+  // Reset all state
+  fightId.value = newId as string
+  fight.value = null
+  isLoading.value = true
+  isLive.value = false
+  liveRounds.value = 0
+  fightError.value = ''
+  replayDone.value = false
+  autoBattle.value = false
+  autoBattleCount.value = 0
+  liveFightData.value = null
+  liveLogItems.value = []
+  liveHpA.value = 100
+  liveHpB.value = 100
+  liveCurrentRound.value = 0
+  humanChallenge.value = null
+  humanSubmitted.value = false
+  humanFightDone.value = false
+  humanFightResult.value = null
+  pendingChallengeData.value = null
+
+  // Re-load
+  const status = await loadFight()
+  isLoading.value = false
+  if (status === null || status !== 'finished') {
+    isLive.value = true
+  }
+  if (isLive.value) {
+    startPolling()
+    if (isHumanFight.value) {
+      startHumanPolling()
+      connectSSE()
+      await nextTick()
+      await nextTick()
+      if (liveFightData.value) await initLiveScene()
+    }
+  }
+})
+
 // Human fight detection
 const isHumanFight = computed(() => !!myBot.value?.isHuman || myBot.value?.archetype === 'human')