diff --git a/web/src/components/Player.vue b/web/src/components/Player.vue
index 8126932..f021704 100644
--- a/web/src/components/Player.vue
+++ b/web/src/components/Player.vue
@@ -89,7 +89,12 @@ const currentSong = computed(() => store.currentSong);
 
 function toggleLyrics() {
   if (route.path === '/lyrics') {
-    router.back();
+    // Go back if there's history, otherwise go home
+    if (window.history.length > 1) {
+      router.back();
+    } else {
+      router.push('/');
+    }
   } else {
     router.push('/lyrics');
   }
diff --git a/web/src/views/Lyrics.vue b/web/src/views/Lyrics.vue
index a0c2677..a977c34 100644
--- a/web/src/views/Lyrics.vue
+++ b/web/src/views/Lyrics.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="lyrics-page" :style="bgStyle">
     <div class="lyrics-overlay" />
-    <button class="back-btn" @click="$router.back()">
+    <button class="back-btn" @click="goBack">
       <Icon icon="mdi:arrow-left" />
       返回
     </button>
@@ -46,14 +46,24 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
 import { Icon } from '@iconify/vue';
 import axios from 'axios';
 import { usePlayerStore } from '../stores/player.js';
 import CoverArt from '../components/CoverArt.vue';
 
+const router = useRouter();
 const store = usePlayerStore();
 const currentSong = computed(() => store.currentSong);
 
+function goBack() {
+  if (window.history.length > 1) {
+    router.back();
+  } else {
+    router.push('/');
+  }
+}
+
 interface LyricLine {
   time: number;
   text: string;