diff --git a/README.md b/README.md
index f2714af..f8aeb84 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@ Practice Japanese Karaoke lyrics reading and typing at the same time with KaraDa
 
 ## Technical Tasks
 
-* [ ] i18n
+* [x] i18n
 * [ ] 404 page
 * [ ] Update an existing playlist
 * [ ] Allow users to correct lyric pronunciations through correction feedback
diff --git a/src/lib/i18n/en.ts b/src/lib/i18n/en.ts
index 048ca18..d8176dd 100644
--- a/src/lib/i18n/en.ts
+++ b/src/lib/i18n/en.ts
@@ -86,7 +86,8 @@ export default {
   song: {
     mode: {
       typing: 'Typing Mode',
-      music: 'Music Mode'
+      music: 'Music Mode',
+      karaoke: 'Singing Mode'
     },
     karaoke: {
       noVocals: 'No vocal separation track detected, cannot adjust vocal volume. Please process in song details page first.'
diff --git a/src/lib/i18n/ja.ts b/src/lib/i18n/ja.ts
index f14d9c9..0cdff11 100644
--- a/src/lib/i18n/ja.ts
+++ b/src/lib/i18n/ja.ts
@@ -86,7 +86,8 @@ export default {
   song: {
     mode: {
       typing: 'タイピングモード',
-      music: '音楽モード'
+      music: '音楽モード',
+      karaoke: '歌うモード'
     },
     karaoke: {
       noVocals: 'ボーカル分離トラックが検出されないため、ボーカル音量を調整できません。まず曲の詳細ページで処理してください。'
diff --git a/src/lib/i18n/zh.ts b/src/lib/i18n/zh.ts
index d648260..305c876 100644
--- a/src/lib/i18n/zh.ts
+++ b/src/lib/i18n/zh.ts
@@ -86,7 +86,8 @@ export default {
   song: {
     mode: {
       typing: '打字模式',
-      music: '音乐模式'
+      music: '音乐模式',
+      karaoke: '唱歌模式'
     },
     karaoke: {
       noVocals: '未检测到人声分离音轨，无法调节人声音量。请先在歌曲详情页进行处理。'
diff --git a/src/routes/song/[id]/+page.svelte b/src/routes/song/[id]/+page.svelte
index f870126..e3026bb 100644
--- a/src/routes/song/[id]/+page.svelte
+++ b/src/routes/song/[id]/+page.svelte
@@ -54,8 +54,9 @@
 <ProgressList percentage={progressPercentage} items={progressItems} />
 
 {#if loadStatus === "done"}
-  <div class="hbox gap-4 p-16px">
-    <Button big icon="i-material-symbols:keyboard-rounded" onclick={() => goto(`/song/${data.song.id}/play`)}>{t.typing}</Button>
-    <Button big icon="i-material-symbols:music-note-rounded" onclick={() => goto(`/song/${data.song.id}/play?music=true`)}>{t.music}</Button>
+  <div class="hbox gap-4 p-16px flex-wrap">
+    <Button big icon="i-material-symbols:keyboard-rounded" onclick={() => goto(`/song/${data.song.id}/play`)} class="!w-auto !min-w-[calc(50%-8px)] grow">{t.typing}</Button>
+    <Button big icon="i-material-symbols:music-note-rounded" onclick={() => goto(`/song/${data.song.id}/play?music=true`)} class="!w-auto !min-w-[calc(50%-8px)] grow">{t.music}</Button>
+    <Button big icon="i-material-symbols:mic-rounded" onclick={() => goto(`/song/${data.song.id}/karaoke`)} class="!w-auto !min-w-[calc(50%-8px)] grow">{t.karaoke}</Button>
   </div>
 {/if}
diff --git a/src/routes/song/[id]/karaoke/+page.svelte b/src/routes/song/[id]/karaoke/+page.svelte
index bb7e02d..dbfad3e 100644
--- a/src/routes/song/[id]/karaoke/+page.svelte
+++ b/src/routes/song/[id]/karaoke/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { PageProps } from "./$types"
-  import { LinearProgress } from "m3-svelte"
   import { onMount } from "svelte"
   import { typingSettingsDefault } from "$lib/types"
   import { processLrcLine, dedupLines, type ProcLrcLine } from "$lib/ui/player/IMEHelper"
diff --git a/src/routes/song/[id]/play/+page.svelte b/src/routes/song/[id]/play/+page.svelte
index 7383f59..0ee28d8 100644
--- a/src/routes/song/[id]/play/+page.svelte
+++ b/src/routes/song/[id]/play/+page.svelte
@@ -8,7 +8,6 @@
   import "$lib/ext.ts"
   import { API } from "$lib/client.ts"
   import { goto } from '$app/navigation'
-  import { artistAndAlbum } from "$lib/utils.ts"
   import { MusicControl } from "$lib/ui/player/MusicControl.ts"
   import Lyrics from "$lib/ui/player/Lyrics.svelte"
   import PlayerAppBar from "$lib/ui/player/PlayerAppBar.svelte"