diff --git a/web/messages/en.json b/web/messages/en.json
index 753ff67..6628750 100644
--- a/web/messages/en.json
+++ b/web/messages/en.json
@@ -26,5 +26,14 @@
 	"next_photo": "Next photo",
 	"reset": "Reset",
 	"zoom_in": "Zoom in",
-	"zoom_out": "Zoom out"
+	"zoom_out": "Zoom out",
+	"style_card": "Cards",
+	"style_compact": "Compact",
+	"layout_grid": "Grid",
+	"layout_waterfall": "Waterfall",
+	"sort_name": "Name",
+	"sort_time": "Time",
+	"sort_size": "Size",
+	"sort_asc": "Ascending",
+	"sort_desc": "Descending"
 }
diff --git a/web/messages/zh.json b/web/messages/zh.json
index b493150..9a4ebb2 100644
--- a/web/messages/zh.json
+++ b/web/messages/zh.json
@@ -26,5 +26,14 @@
 	"next_photo": "下一张",
 	"reset": "重置",
 	"zoom_in": "放大",
-	"zoom_out": "缩小"
+	"zoom_out": "缩小",
+	"style_card": "卡片",
+	"style_compact": "紧凑",
+	"layout_grid": "砖块",
+	"layout_waterfall": "瀑布",
+	"sort_name": "名称",
+	"sort_time": "时间",
+	"sort_size": "大小",
+	"sort_asc": "升序",
+	"sort_desc": "降序"
 }
diff --git a/web/src/lib/components/layout/BackLink.svelte b/web/src/lib/components/layout/BackLink.svelte
index a8e9e52..2a4318c 100644
--- a/web/src/lib/components/layout/BackLink.svelte
+++ b/web/src/lib/components/layout/BackLink.svelte
@@ -1,4 +1,6 @@
 <script>
+	import { m } from '$lib/paraglide/messages';
+
 	/**
 	 * @typedef {Object} BackLinkProps
 	 * @property {string} href
@@ -7,7 +9,7 @@
 	 */
 
 	/** @type {BackLinkProps} */
-	let { href, text = '返回', children } = $props();
+	let { href, text = m.back(), children } = $props();
 </script>
 
 <!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
diff --git a/web/src/lib/components/ui/Loading.svelte b/web/src/lib/components/ui/Loading.svelte
index b96d9f2..81aaee2 100644
--- a/web/src/lib/components/ui/Loading.svelte
+++ b/web/src/lib/components/ui/Loading.svelte
@@ -1,4 +1,6 @@
 <script>
+	import { m } from '$lib/paraglide/messages';
+
 	/**
 	 * @typedef {Object} LoadingProps
 	 * @property {string} [message]
@@ -6,7 +8,7 @@
 	 */
 
 	/** @type {LoadingProps} */
-	let { message = '加载中...', size = 'medium' } = $props();
+	let { message = m.loading(), size = 'medium' } = $props();
 </script>
 
 <div class="loading loading-{size}">
diff --git a/web/src/routes/album/[id]/+page.svelte b/web/src/routes/album/[id]/+page.svelte
index b6d5da6..c7d25fb 100644
--- a/web/src/routes/album/[id]/+page.svelte
+++ b/web/src/routes/album/[id]/+page.svelte
@@ -2,7 +2,12 @@
 	import { page } from '$app/state';
 	import { browser } from '$app/environment';
 	import { m } from '$lib/paraglide/messages';
-	import { albums, back, photo_count, loading } from '$lib/paraglide/messages';
+	import { albums, back, photo_count, loading,
+		style_card, style_compact,
+		layout_grid, layout_waterfall,
+		sort_name, sort_time, sort_size,
+		sort_asc, sort_desc
+	} from '$lib/paraglide/messages';
 	import { resolve } from '$app/paths';
 	import { SvelteSet } from 'svelte/reactivity';
 	import { Container, PageHeader, BackLink, PhotoGrid, Empty, SegmentedControl } from '$lib/components';
@@ -48,21 +53,21 @@
 	// 排序方向
 	let sortOrder = $state(page.data.album ? (page.url.searchParams.get('order') || 'asc') : 'asc');
 
-	const styleOptions = [
-		{ value: 'card', label: '卡片', icon: '🖼️' },
-		{ value: 'borderless', label: '紧凑', icon: '📐' }
-	];
+	const styleOptions = $derived([
+		{ value: 'card', label: style_card(), icon: '🖼️' },
+		{ value: 'borderless', label: style_compact(), icon: '📐' }
+	]);
 
-	const layoutOptions = [
-		{ value: 'grid', label: '砖块', icon: '🧱' },
-		{ value: 'waterfall', label: '瀑布', icon: '🌊' }
-	];
+	const layoutOptions = $derived([
+		{ value: 'grid', label: layout_grid(), icon: '🧱' },
+		{ value: 'waterfall', label: layout_waterfall(), icon: '🌊' }
+	]);
 
-	const sortOptions = [
-		{ value: 'fileName', label: '名称' },
-		{ value: 'createdAt', label: '时间' },
-		{ value: 'fileSize', label: '大小' }
-	];
+	const sortOptions = $derived([
+		{ value: 'fileName', label: sort_name() },
+		{ value: 'createdAt', label: sort_time() },
+		{ value: 'fileSize', label: sort_size() }
+	]);
 
 	// 监听数据变化，重置状态
 	$effect(() => {
@@ -214,7 +219,7 @@
 					class="sort-order-toggle"
 					type="button"
 					onclick={() => { sortOrder = sortOrder === 'asc' ? 'desc' : 'asc'; applySort(); }}
-					aria-label={sortOrder === 'asc' ? '降序' : '升序'}
+					aria-label={sortOrder === 'asc' ? sort_desc() : sort_asc()}
 				>
 					<span class="sort-icon">{sortOrder === 'asc' ? '↑' : '↓'}</span>
 				</button>
diff --git a/web/src/routes/photo/[id]/+page.svelte b/web/src/routes/photo/[id]/+page.svelte
index 23a2818..dc0be58 100644
--- a/web/src/routes/photo/[id]/+page.svelte
+++ b/web/src/routes/photo/[id]/+page.svelte
@@ -1,4 +1,4 @@
-<script>
+<script>
 	import { m } from '$lib/paraglide/messages';
 	import { resolve } from '$app/paths';
 	import { getPhotoFileUrl } from '$lib/api/client';
@@ -781,7 +781,7 @@
 				{/if}
 
 				{#if targetScaleRef > initialScale + 0.01 || targetScaleRef < initialScale - 0.01}
-					<button class="reset-zoom-btn" onclick={resetZoom} type="button" aria-label="重置缩放">
+					<button class="reset-zoom-btn" onclick={resetZoom} type="button" aria-label={m.reset()}>
 						<svg
 							viewBox="0 0 24 24"
 							fill="none"