diff --git a/CHANGELOG.md b/CHANGELOG.md
index 90e8753..e9d34fc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Next
+- Add lyrics support
 - Add "Show in Playlist" context menu item
 - Remember queue on restart
 - Keep scroll position when opening play history
diff --git a/src/App.svelte b/src/App.svelte
index 9b09b30..725e103 100755
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -5,12 +5,14 @@
 	import Player from './components/Player.svelte'
 	import Sidebar from './components/Sidebar.svelte'
 	import Queue from './components/Queue.svelte'
+	import Lyrics from './components/Lyrics.svelte'
 	import TrackInfo, { track_info_state } from './components/TrackInfo.svelte'
 	import PlaylistInfoModal from './components/PlaylistInfo.svelte'
 	import { queue_visible } from './lib/queue'
+	import { lyrics_state } from '$lib/lyrics.svelte'
 	import { ipc_listen, ipc_renderer } from '$lib/window'
 	import { delete_track_list, get_track_list, import_tracks, type PlaylistInfo } from '$lib/data'
-	import { play_pause } from './lib/player'
+	import { play_pause, playing_track, time_record } from './lib/player'
 	import DragGhost from './components/DragGhost.svelte'
 	import ItunesImport from './components/ItunesImport.svelte'
 	import { modal_count } from './components/Modal.svelte'
@@ -57,15 +59,6 @@
 		ipc_renderer.removeListener('import', open_import_dialog)
 	})
 
-	function toggle_queue() {
-		$queue_visible = !$queue_visible
-	}
-	$: ipc_renderer.invoke('update:Show Queue', $queue_visible)
-	ipc_renderer.on('Show Queue', toggle_queue)
-	onDestroy(() => {
-		ipc_renderer.removeListener('Show Queue', toggle_queue)
-	})
-
 	function toggle_visualizer() {
 		show_visualizer = !show_visualizer
 	}
@@ -284,6 +277,14 @@
 		</div>
 		{#if $queue_visible}
 			<Queue />
+		{:else if lyrics_state.visible}
+			<Lyrics
+				track_name={$playing_track?.name || ''}
+				artist_name={$playing_track?.artist || ''}
+				album_name={$playing_track?.albumName || ''}
+				duration_sec={$time_record.duration || null}
+				current_time_sec={$time_record.elapsed || 0}
+			/>
 		{/if}
 	</div>
 	<Player on_toggle_visualizer={toggle_visualizer} />
diff --git a/src/components/Lyrics.svelte b/src/components/Lyrics.svelte
new file mode 100644
index 0000000..13ccec6
--- /dev/null
+++ b/src/components/Lyrics.svelte
@@ -0,0 +1,249 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition'
+
+	type LrcLine = {
+		time_sec: number
+		text: string
+	}
+
+	type LrclibApiTrack = {
+		plainLyrics?: string | null
+		syncedLyrics?: string | null
+		instrumental?: boolean
+	}
+
+	type LrclibTrack = {
+		plain_lyrics: string | null
+		synced_lyrics: string | null
+		instrumental: boolean
+	}
+
+	type Props = {
+		track_name?: string
+		artist_name?: string
+		album_name?: string
+		duration_sec?: number | null
+		current_time_sec?: number
+	}
+
+	const cache_by_key: Record<string, LrclibTrack | null> = {}
+
+	let {
+		track_name = '',
+		artist_name = '',
+		album_name = '',
+		duration_sec = null,
+		current_time_sec = 0,
+	}: Props = $props()
+
+	let loading = $state(false)
+	let error_message = $state('')
+	let lyrics_data = $state<LrclibTrack | null>(null)
+	let request_key = $state('')
+
+	const query_key = $derived(make_key(track_name, artist_name, album_name, duration_sec))
+	const synced_lines = $derived(parse_synced_lyrics(lyrics_data?.synced_lyrics ?? ''))
+	const active_line_index = $derived(find_active_line_index(synced_lines, current_time_sec))
+	const plain_lines = $derived(
+		(lyrics_data?.plain_lyrics ?? '')
+			.split('\n')
+			.map((line) => line.trim())
+			.filter(Boolean),
+	)
+
+	$effect(() => {
+		const key = query_key
+		if (!key) {
+			lyrics_data = null
+			error_message = ''
+			loading = false
+			return
+		}
+		void load_lyrics(key, {
+			track_name,
+			artist_name,
+			album_name,
+			duration_sec,
+		})
+	})
+
+	function normalize(value: string) {
+		return value.trim().toLowerCase()
+	}
+
+	function make_key(track: string, artist: string, album: string, dur: number | null) {
+		const t = normalize(track)
+		const a = normalize(artist)
+		if (!t || !a) return ''
+		const alb = normalize(album)
+		const d = typeof dur === 'number' && Number.isFinite(dur) ? Math.round(dur) : 0
+		return `${a}|${t}|${alb}|${d}`
+	}
+
+	function encode_query(params: Record<string, string | number | undefined>) {
+		const parts: string[] = []
+		for (const [key, value] of Object.entries(params)) {
+			if (value === undefined) continue
+			parts.push(`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`)
+		}
+		return parts.join('&')
+	}
+
+	async function get_json(url: string) {
+		const res = await fetch(url)
+		if (res.status === 404) return null
+		if (!res.ok) throw new Error(`LRCLIB request failed (${res.status})`)
+		return await res.json()
+	}
+
+	function normalize_track(raw: LrclibApiTrack): LrclibTrack {
+		return {
+			plain_lyrics: raw.plainLyrics ?? null,
+			synced_lyrics: raw.syncedLyrics ?? null,
+			instrumental: Boolean(raw.instrumental),
+		}
+	}
+
+	async function load_lyrics(next_key: string, params: Omit<Props, 'current_time_sec'>) {
+		request_key = next_key
+		error_message = ''
+		loading = true
+
+		if (Object.prototype.hasOwnProperty.call(cache_by_key, next_key)) {
+			lyrics_data = cache_by_key[next_key] ?? null
+			loading = false
+			return
+		}
+
+		try {
+			const get_query = encode_query({
+				track_name: params.track_name?.trim() || '',
+				artist_name: params.artist_name?.trim() || '',
+				album_name: params.album_name?.trim() || undefined,
+				duration:
+					typeof params.duration_sec === 'number' &&
+					Number.isFinite(params.duration_sec) &&
+					params.duration_sec > 0
+						? Math.round(params.duration_sec)
+						: undefined,
+			})
+			const exact_raw = (await get_json(
+				`https://lrclib.net/api/get?${get_query}`,
+			)) as LrclibApiTrack | null
+			if (request_key !== next_key) return
+			const exact = exact_raw ? normalize_track(exact_raw) : null
+
+			if (exact) {
+				cache_by_key[next_key] = exact
+				lyrics_data = exact
+				return
+			}
+
+			const search_query = encode_query({
+				track_name: params.track_name?.trim() || '',
+				artist_name: params.artist_name?.trim() || '',
+			})
+			const found_raw = (await get_json(`https://lrclib.net/api/search?${search_query}`)) as
+				| LrclibApiTrack[]
+				| null
+
+			if (request_key !== next_key) return
+			const found = found_raw?.map(normalize_track) ?? []
+			const best = found.find((item) => item.synced_lyrics || item.plain_lyrics) ?? null
+			cache_by_key[next_key] = best
+			lyrics_data = best
+		} catch (err) {
+			if (request_key !== next_key) return
+			error_message = err instanceof Error ? err.message : 'Failed to load lyrics'
+			lyrics_data = null
+		} finally {
+			if (request_key === next_key) loading = false
+		}
+	}
+
+	function parse_synced_lyrics(input: string): LrcLine[] {
+		if (!input) return []
+		const lines: LrcLine[] = []
+		for (const row of input.split('\n')) {
+			const text = row.replace(/\[[^\]]+\]/g, '').trim()
+			const stamps = [...row.matchAll(/\[(\d{1,2}):(\d{2})(?:\.(\d{1,3}))?\]/g)]
+			for (const stamp of stamps) {
+				const min = Number(stamp[1] || 0)
+				const sec = Number(stamp[2] || 0)
+				const frac_raw = stamp[3] || ''
+				const frac_ms = frac_raw ? Number(frac_raw.padEnd(3, '0').slice(0, 3)) : 0
+				const total_sec = min * 60 + sec + frac_ms / 1000
+				if (Number.isFinite(total_sec)) {
+					lines.push({ time_sec: total_sec, text })
+				}
+			}
+		}
+		return lines.sort((a, b) => a.time_sec - b.time_sec)
+	}
+
+	function find_active_line_index(lines: LrcLine[], time_sec: number) {
+		if (!lines.length || !Number.isFinite(time_sec)) return -1
+		let lo = 0
+		let hi = lines.length - 1
+		let answer = -1
+		while (lo <= hi) {
+			const mid = (lo + hi) >> 1
+			if (lines[mid].time_sec <= time_sec) {
+				answer = mid
+				lo = mid + 1
+			} else {
+				hi = mid - 1
+			}
+		}
+		return answer
+	}
+</script>
+
+<aside
+	class="pointer-events-none absolute right-0 box-border flex h-full overflow-hidden"
+	transition:fly={{ x: '100%', duration: 150, opacity: 1 }}
+>
+	<div class="h-full w-5 shadow-[inset_-20px_0_20px_-20px_#000000]"></div>
+	<div
+		class="pointer-events-auto relative -mt-px flex w-[var(--right-sidebar-width)] flex-col border-l border-[var(--border-color)] bg-black"
+	>
+		<div class="sticky top-0 z-10 border-b border-white/10 bg-black/75 px-4 py-3 backdrop-blur-md">
+			<h3 class="m-0 text-base font-semibold">Lyrics</h3>
+			{#if artist_name && track_name}
+				<div class="mt-1 truncate text-xs text-white/70">{artist_name} - {track_name}</div>
+			{/if}
+		</div>
+
+		<div class="flex-1 overflow-y-auto px-4 py-3">
+			{#if !query_key}
+				<p class="m-0 text-sm text-white/70">Play a track to load lyrics.</p>
+			{:else if loading}
+				<p class="m-0 text-sm text-white/70">Loading lyrics...</p>
+			{:else if error_message}
+				<p class="m-0 text-sm text-white/70">{error_message}</p>
+			{:else if lyrics_data?.instrumental}
+				<p class="m-0 text-sm text-white/70">Instrumental track.</p>
+			{:else if synced_lines.length > 0}
+				<div class="space-y-1">
+					{#each synced_lines as line, i}
+						<p
+							class={`m-0 py-1 text-[15px] leading-6 transition-colors duration-100 ${
+								i === active_line_index ? 'font-medium text-white' : 'text-white/60'
+							}`}
+						>
+							{line.text || '♪'}
+						</p>
+					{/each}
+				</div>
+			{:else if plain_lines.length > 0}
+				<div class="space-y-1">
+					{#each plain_lines as line}
+						<p class="m-0 py-1 text-[15px] leading-6 text-white/80">{line}</p>
+					{/each}
+				</div>
+			{:else}
+				<p class="m-0 text-sm text-white/70">No lyrics found.</p>
+			{/if}
+		</div>
+	</div>
+</aside>
diff --git a/src/components/Player.svelte b/src/components/Player.svelte
index c4353d4..e5b5d68 100644
--- a/src/components/Player.svelte
+++ b/src/components/Player.svelte
@@ -12,7 +12,8 @@
 		time_record,
 	} from '../lib/player'
 	import { get_duration } from '../lib/helpers'
-	import { queue_visible, toggle_queue_visibility, queue, shuffle, repeat } from '../lib/queue'
+	import { queue_visible, queue, shuffle, repeat } from '../lib/queue'
+	import { lyrics_state, toggle_lyrics_visibility } from '$lib/lyrics.svelte'
 	import { get_track, is_dev } from '$lib/data'
 	import { dragged } from '$lib/drag-drop'
 	import * as dragGhost from './DragGhost.svelte'
@@ -24,9 +25,28 @@
 	} from '$lib/menus'
 	import { ipc_renderer } from '$lib/window'
 	import { tracks_page_item_ids } from './TrackList.svelte'
+	import { onDestroy } from 'svelte'
 
 	export let on_toggle_visualizer: () => void
 
+	function toggle_queue() {
+		$queue_visible = !$queue_visible
+		lyrics_state.visible = false
+	}
+	$: ipc_renderer.invoke('update:Show Queue', $queue_visible)
+	ipc_renderer.on('Show Queue', toggle_queue)
+	onDestroy(() => {
+		ipc_renderer.removeListener('Show Queue', toggle_queue)
+	})
+
+	function toggle_lyrics() {
+		toggle_lyrics_visibility()
+	}
+	ipc_renderer.on('Show Lyrics', toggle_lyrics)
+	onDestroy(() => {
+		ipc_renderer.removeListener('Show Lyrics', toggle_lyrics)
+	})
+
 	async function playing_context_menu() {
 		const playing = queue.getCurrent()
 		if (playing) {
@@ -306,12 +326,38 @@
 			{/if}
 		</button>
 		<Slider class="mr-2 w-[110px]" bind:value={$volume} max={1} />
+		<button
+			type="button"
+			class="mr-2"
+			aria-label="Toggle lyrics"
+			tabindex="-1"
+			on:mousedown|preventDefault
+			on:click={toggle_lyrics}
+			class:on={lyrics_state.visible}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="parent-active-zoom lyrics-icon"
+				height="24px"
+				viewBox="0 0 24 24"
+				width="24px"
+				style="fill:none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<path d="M15 12.9a5 5 0 1 0 -3.902 -3.9" />
+				<path d="M15 12.9l-3.902 -3.899l-7.513 8.584a2 2 0 1 0 2.827 2.83l8.588 -7.515" />
+			</svg>
+		</button>
 		<button
 			type="button"
 			aria-label="Toggle queue"
 			tabindex="-1"
 			on:mousedown|preventDefault
-			on:click={toggle_queue_visibility}
+			on:click={toggle_queue}
 			class:on={$queue_visible}
 		>
 			<svg
@@ -412,6 +458,8 @@
 			font-family: 'Open Sans' // for monospace digits
 	.on svg
 		fill: var(--icon-highlight-color)
+	.on .lyrics-icon
+		stroke: var(--icon-highlight-color)
 	button.volume-icon
 		width: 24px
 		padding-right: 4px
@@ -420,4 +468,8 @@
 			translate: 4px
 		.low
 			translate: 2px
+	.lyrics-icon
+		width: 18px
+		height: 18px
+		stroke-width: 2.4
 </style>
diff --git a/src/electron/menubar.ts b/src/electron/menubar.ts
index ab163b5..fc7ae3b 100644
--- a/src/electron/menubar.ts
+++ b/src/electron/menubar.ts
@@ -177,6 +177,15 @@ export function init_menu_bar(app: App, main_window: BrowserWindow) {
 						web_contents.send('Show Queue')
 					},
 				},
+				{
+					label: 'Show Lyrics',
+					id: 'Show Lyrics',
+					type: 'checkbox',
+					accelerator: 'CmdOrCtrl+L',
+					click() {
+						web_contents.send('Show Lyrics')
+					},
+				},
 				{
 					label: 'Toggle Visualizer',
 					type: 'checkbox',
@@ -350,4 +359,9 @@ export function init_menu_bar(app: App, main_window: BrowserWindow) {
 		if (!item) return handle_missing('Show Queue')
 		item.checked = checked
 	})
+	ipc_main.handle('update:Show Lyrics', (_, checked) => {
+		const item = menu.getMenuItemById('Show Lyrics')
+		if (!item) return handle_missing('Show Lyrics')
+		item.checked = checked
+	})
 }
diff --git a/src/electron/typed_ipc.ts b/src/electron/typed_ipc.ts
index ba219fc..83de6c8 100644
--- a/src/electron/typed_ipc.ts
+++ b/src/electron/typed_ipc.ts
@@ -122,6 +122,7 @@ type Events = {
 	volumeUp: () => void
 	volumeDown: () => void
 	'Show Queue': () => void
+	'Show Lyrics': () => void
 	'Toggle Visualizer': () => void
 	ToggleQuickNav: () => void
 	'Group Album Tracks': (checked: boolean) => void
@@ -190,6 +191,7 @@ type Commands = {
 	'update:Shuffle': (checked: boolean) => void
 	'update:Repeat': (checked: boolean) => void
 	'update:Show Queue': (checked: boolean) => void
+	'update:Show Lyrics': (checked: boolean) => void
 }
 
 export type IpcMain = TypedIpcMain<Events, Commands>
diff --git a/src/lib/lyrics.svelte.ts b/src/lib/lyrics.svelte.ts
new file mode 100644
index 0000000..a525122
--- /dev/null
+++ b/src/lib/lyrics.svelte.ts
@@ -0,0 +1,22 @@
+import { queue_visible } from './queue'
+import { ipc_renderer } from './window'
+
+class LyricsState {
+	visible = $state(false)
+
+	toggle() {
+		this.visible = !this.visible
+	}
+}
+
+export const lyrics_state = new LyricsState()
+$effect.root(() => {
+	ipc_renderer.invoke('update:Show Lyrics', lyrics_state.visible)
+})
+
+export function toggle_lyrics_visibility() {
+	if (!lyrics_state.visible) {
+		queue_visible.set(false)
+	}
+	lyrics_state.toggle()
+}