diff --git a/web/messages/en.json b/web/messages/en.json
index 499ec22..1b62580 100644
--- a/web/messages/en.json
+++ b/web/messages/en.json
@@ -8,5 +8,23 @@
 	"back": "Back",
 	"photo_count": "{count} photos",
 	"view_photo": "View Photo",
-	"load_more": "All loaded"
+	"load_more": "All loaded",
+	"no_photos": "No photos yet",
+	"no_data": "No data",
+	"load_failed": "Load failed",
+	"retry": "Retry",
+	"view_original": "View Original",
+	"original": "Original",
+	"high_quality": "High",
+	"thumbnail": "Thumbnail",
+	"loaded_all": "✓ Loaded all {count} photos",
+	"double_click_zoom": "Double-click to zoom",
+	"pinch_zoom": "Pinch to zoom",
+	"keyboard_zoom": "+/− to zoom",
+	"reset_zoom": "0 to reset",
+	"previous_photo": "Previous photo",
+	"next_photo": "Next photo",
+	"reset": "Reset",
+	"zoom_in": "Zoom in",
+	"zoom_out": "Zoom out"
 }
diff --git a/web/messages/zh.json b/web/messages/zh.json
index 9a8476e..3394131 100644
--- a/web/messages/zh.json
+++ b/web/messages/zh.json
@@ -8,5 +8,23 @@
 	"back": "返回",
 	"photo_count": "{count} 张照片",
 	"view_photo": "查看照片",
-	"load_more": "已全部加载"
+	"load_more": "已全部加载",
+	"no_photos": "暂无照片",
+	"no_data": "暂无数据",
+	"load_failed": "加载失败",
+	"retry": "重试",
+	"view_original": "查看原图",
+	"original": "原图",
+	"high_quality": "高清",
+	"thumbnail": "缩略",
+	"loaded_all": "✓ 已加载全部 {count} 张照片",
+	"double_click_zoom": "🖱️ 双击放大",
+	"pinch_zoom": "🤏 捏合缩放",
+	"keyboard_zoom": "⌨️ +/− 缩放",
+	"reset_zoom": "⌨️ 0 重置",
+	"previous_photo": "上一张",
+	"next_photo": "下一张",
+	"reset": "重置",
+	"zoom_in": "放大",
+	"zoom_out": "缩小"
 }
diff --git a/web/src/lib/components/album/AlbumList.svelte b/web/src/lib/components/album/AlbumList.svelte
index 2a23d07..25ceb61 100644
--- a/web/src/lib/components/album/AlbumList.svelte
+++ b/web/src/lib/components/album/AlbumList.svelte
@@ -1,6 +1,7 @@
 <script>
 	import AlbumCard from './AlbumCard.svelte';
 	import { Empty } from '$lib/components/ui';
+	import { m } from '$lib/paraglide/messages';
 
 	/**
 	 * @typedef {Object} AlbumListProps
@@ -12,7 +13,7 @@
 </script>
 
 {#if albums.length === 0}
-	<Empty message="暂无相册" icon="📁" />
+	<Empty message={m.no_albums()} icon="📁" />
 {:else}
 	<div class="album-grid">
 		{#each albums as album (album.id)}
diff --git a/web/src/lib/components/photo/PhotoGrid.svelte b/web/src/lib/components/photo/PhotoGrid.svelte
index 57a2623..20a47c5 100644
--- a/web/src/lib/components/photo/PhotoGrid.svelte
+++ b/web/src/lib/components/photo/PhotoGrid.svelte
@@ -1,6 +1,7 @@
 <script>
 	import PhotoCard from './PhotoCard.svelte';
 	import { Empty, Loading } from '$lib/components/ui';
+	import { m } from '$lib/paraglide/messages';
 
 	/**
 	 * @typedef {Object} PhotoGridProps
@@ -32,7 +33,7 @@
 </script>
 
 {#if photos.length === 0 && !hasMore}
-	<Empty message="暂无照片" icon="📷" />
+	<Empty message={m.no_photos()} icon="📷" />
 {:else}
 	<div class="photo-scroll-container" bind:this={scrollContainer}>
 		<div class="photo-grid">
@@ -43,15 +44,15 @@
 
 		{#if isLoading}
 			<div class="loading-trigger">
-				<Loading message="加载中..." size="small" />
+				<Loading message={m.loading()} size="small" />
 			</div>
 		{:else if displayedCount < photos.length || hasMore}
 			<div class="load-more-trigger" bind:this={loadMoreTrigger}>
-				<div class="loading-more">加载中...</div>
+				<div class="loading-more">{m.loading()}</div>
 			</div>
 		{:else if photos.length > 0}
 			<div class="load-complete">
-				✓ 已加载全部 {totalPhotos || photos.length} 张照片
+				{m.loaded_all({ count: totalPhotos || photos.length })}
 			</div>
 		{/if}
 	</div>
diff --git a/web/src/lib/components/ui/Empty.svelte b/web/src/lib/components/ui/Empty.svelte
index ead871d..30ea614 100644
--- a/web/src/lib/components/ui/Empty.svelte
+++ b/web/src/lib/components/ui/Empty.svelte
@@ -1,4 +1,6 @@
 <script>
+	import { m } from '$lib/paraglide/messages';
+
 	/**
 	 * @typedef {Object} EmptyProps
 	 * @property {string} [message]
@@ -7,7 +9,7 @@
 	 */
 
 	/** @type {EmptyProps} */
-	let { message = '暂无数据', icon = '📭', children } = $props();
+	let { message = m.no_data(), icon = '📭', children } = $props();
 </script>
 
 <div class="empty">
diff --git a/web/src/routes/album/[id]/+page.svelte b/web/src/routes/album/[id]/+page.svelte
index f731e44..a5705a2 100644
--- a/web/src/routes/album/[id]/+page.svelte
+++ b/web/src/routes/album/[id]/+page.svelte
@@ -1,5 +1,6 @@
 <script>
 	import { page } from '$app/state';
+	import { m } from '$lib/paraglide/messages';
 	import { albums, back, photo_count, loading } from '$lib/paraglide/messages';
 	import { resolve } from '$app/paths';
 	import { SvelteSet } from 'svelte/reactivity';
@@ -147,7 +148,7 @@
 	</PageHeader>
 
 	{#if !album || (allPhotos.length === 0 && !hasMore)}
-		<Empty message="暂无照片" icon="📷" />
+		<Empty message={m.no_photos()} icon="📷" />
 	{:else}
 		<PhotoGrid
 			photos={allPhotos}
diff --git a/web/src/routes/photo/[id]/+page.svelte b/web/src/routes/photo/[id]/+page.svelte
index a98c90b..2874076 100644
--- a/web/src/routes/photo/[id]/+page.svelte
+++ b/web/src/routes/photo/[id]/+page.svelte
@@ -653,12 +653,12 @@
 
 		{#if loadError}
 			<div class="error-toast">
-				<span>加载失败</span>
+				<span>{m.load_failed()}</span>
 				<button
 					onclick={() => {
 						loadError = false;
 						loadStage = 'thumbnail';
-					}}>重试</button
+					}}>{m.retry()}</button
 				>
 			</div>
 		{/if}
@@ -687,7 +687,7 @@
 					<path d="M11 8v6" />
 					<path d="M8 11h6" />
 				</svg>
-				<span>查看原图</span>
+				<span>{m.view_original()}</span>
 			</button>
 		{/if}
 
@@ -702,11 +702,11 @@
 			{#if photo && !photo.mimeType?.startsWith('video/')}
 				<span class="quality-indicator">
 					{#if loadStage === 'full'}
-						原图
+						{m.original()}
 					{:else if loadStage === 'preview'}
-						高清
+						{m.high_quality()}
 					{:else}
-						缩略
+						{m.thumbnail()}
 					{/if}
 				</span>
 			{/if}
@@ -717,7 +717,7 @@
 				class="nav-button prev"
 				onclick={goToPrevious}
 				disabled={!hasPrev || isNavigating}
-				aria-label="Previous photo"
+				aria-label={m.previous_photo()}
 				type="button"
 			>
 				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -781,7 +781,7 @@
 				class="nav-button next"
 				onclick={goToNext}
 				disabled={!hasNext || isNavigating}
-				aria-label="Next photo"
+				aria-label={m.next_photo()}
 				type="button"
 			>
 				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -797,7 +797,7 @@
 					onclick={zoomOut}
 					disabled={targetScaleRef <= minScale + 0.01}
 					type="button"
-					aria-label="缩小"
+					aria-label={m.zoom_out()}
 				>
 					<svg
 						viewBox="0 0 24 24"
@@ -817,7 +817,7 @@
 					onclick={zoomIn}
 					disabled={targetScaleRef >= maxScale - 0.01}
 					type="button"
-					aria-label="放大"
+					aria-label={m.zoom_in()}
 				>
 					<svg
 						viewBox="0 0 24 24"
@@ -833,7 +833,7 @@
 						<path d="M8 11h6" />
 					</svg>
 				</button>
-				<button onclick={resetZoom} type="button" aria-label="重置">
+				<button onclick={resetZoom} type="button" aria-label={m.reset()}>
 					<svg
 						viewBox="0 0 24 24"
 						fill="none"
@@ -868,10 +868,10 @@
 
 		<!-- 快捷键提示 -->
 		<div class="shortcut-hints">
-			<span>🖱️ 双击放大</span>
-			<span>🤏 捏合缩放</span>
-			<span>⌨️ +/− 缩放</span>
-			<span>⌨️ 0 重置</span>
+			<span>{m.double_click_zoom()}</span>
+			<span>{m.pinch_zoom()}</span>
+			<span>{m.keyboard_zoom()}</span>
+			<span>{m.reset_zoom()}</span>
 		</div>
 	{/if}
 </div>
diff --git a/web/vite.config.js b/web/vite.config.js
index 9bdb625..5daaf6f 100644
--- a/web/vite.config.js
+++ b/web/vite.config.js
@@ -8,7 +8,11 @@ export default defineConfig({
 	plugins: [
 		sveltekit(),
 		devtoolsJson(),
-		paraglideVitePlugin({ project: './project.inlang', outdir: './src/lib/paraglide' })
+		paraglideVitePlugin({
+			project: './project.inlang',
+			outdir: './src/lib/paraglide',
+			strategy: ['cookie', 'globalVariable', 'preferredLanguage', 'baseLocale']
+		})
 	],
 	server: {
 		proxy: {