diff --git a/src/lib/components/Chatroom.svelte b/src/lib/components/Chatroom.svelte
index 5415105..b8b83de 100644
--- a/src/lib/components/Chatroom.svelte
+++ b/src/lib/components/Chatroom.svelte
@@ -3,6 +3,7 @@
 	import { Mic, Send, Square } from 'lucide-svelte'; // Added Square icon import
 	import AudioPlayer from './AudioPlayer.svelte';
 	import { renderMarkdown } from '$lib/utils/renderMarkdown';
+	import { language } from '$lib/stores/language'; // Import the global language store
 
 	interface Conversation {
 		name: string;
@@ -35,6 +36,25 @@
 	let messagesContainer: HTMLDivElement;
 	let dots = $state('...');
 
+	const translations = {
+		en: {
+			placeholder: 'Type your message...(max 500 characters)',
+			send: 'Send',
+			record: 'Record',
+			waiting: 'Waiting',
+			stop: 'Stop',
+			thinking: 'Thinking'
+		},
+		zh: {
+			placeholder: '手動輸入文字...(最多500個字元)',
+			send: '送出',
+			record: '錄音',
+			waiting: '等待',
+			stop: '停止',
+			thinking: '正在思考'
+		}
+	};
+
 	function scrollToBottom() {
 		if (!messagesContainer || !autoscroll) return;
 
@@ -147,7 +167,7 @@
 					<Card class="w-fit max-w-[80%]">
 						<div class="-my-2">
 							<p class="prose prose-hina text-gray-600">
-								{#await renderMarkdown(`正在思考${dots}`)}
+								{#await renderMarkdown(`${translations[$language].thinking}${dots}`)}
 									Loading ...
 								{:then content}
 									<!-- eslint-disable-next-line svelte/no-at-html-tags -->
@@ -167,7 +187,7 @@
 				<div class="flex min-w-[200px] flex-1 flex-col">
 					<Textarea
 						class="max-h-32 min-h-14 flex-1"
-						placeholder="Type your message...(max 500 characters)"
+						placeholder={translations[$language].placeholder}
 						rows={1}
 						bind:value={text}
 						disabled={operating}
@@ -190,7 +210,11 @@
 						{:else}
 							<Mic />
 						{/if}
-						{recording ? (operating ? 'Waiting' : 'Stop') : 'Record'}
+						{recording
+							? operating
+								? translations[$language].waiting
+								: translations[$language].stop
+							: translations[$language].record}
 					</Button>
 					<Button
 						color="primary"
@@ -199,7 +223,7 @@
 						on:click={handleSend}
 					>
 						<Send class={operating ? 'animate-pulse' : ''} />
-						Send
+						{translations[$language].send}
 					</Button>
 				</div>
 			</div>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index d9fd1e8..bed8d55 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -1,14 +1,32 @@
-<script>
+<script lang="ts">
 	import { Navbar, NavBrand, Avatar, Dropdown, DropdownItem, Button } from 'flowbite-svelte';
 	import { LogOut, User, LayoutDashboard } from 'lucide-svelte';
 	import { signOut, user } from '$lib/stores/auth';
 	import { profile } from '$lib/stores/profile';
 	import { onMount } from 'svelte';
 	import { page } from '$app/state';
+	import { language } from '$lib/stores/language'; // Import the global language store
 
 	let hinagiku = $state('Hinagiku');
 	let highlight = $state(0);
 
+	const translations = {
+		en: {
+			welcome: 'Welcome to Hinagiku!',
+			profile: 'Profile',
+			dashboard: 'Dashboard',
+			signOut: 'Sign out',
+			login: 'Login'
+		},
+		zh: {
+			welcome: '歡迎來到 Hinagiku!',
+			profile: '個人資料',
+			dashboard: '儀表板',
+			signOut: '登出',
+			login: '登入'
+		}
+	};
+
 	onMount(() => {
 		const interval = setInterval(() => {
 			let newHighlight;
@@ -20,11 +38,15 @@
 
 		return () => clearInterval(interval);
 	});
+
+	function setLanguage(lang: 'en' | 'zh') {
+		language.set(lang);
+	}
 </script>
 
 <Navbar class="fixed left-0 top-0 z-50 w-full shadow-sm">
 	<NavBrand href="/">
-		<img src="/Icon.png" class="mr-3 h-8" alt="Welcome to Hinagiku!" />
+		<img src="/Icon.png" class="mr-3 h-8" alt={translations[$language].welcome} />
 		<span class="self-center whitespace-nowrap text-2xl font-bold">
 			{#each hinagiku as c, i}<span
 					class="transition-colors duration-500"
@@ -40,18 +62,36 @@
 					<p class="text-sm text-gray-900">{$profile?.displayName}</p>
 					<p class="truncate text-sm font-medium text-gray-500">{$user.email}</p>
 				</div>
-				<DropdownItem href="/profile" class="flex items-center"
-					><User class="mr-2 h-4 w-4" />Profile</DropdownItem
-				>
-				<DropdownItem href="/dashboard" class="flex items-center"
-					><LayoutDashboard class="mr-2 h-4 w-4" />Dashbaord</DropdownItem
-				>
-				<DropdownItem on:click={() => signOut()} class="flex items-center"
-					><LogOut class="mr-2 h-4 w-4" />Sign out</DropdownItem
-				>
+				<DropdownItem href="/profile" class="flex items-center">
+					<User class="mr-2 h-4 w-4" />{translations[$language].profile}
+				</DropdownItem>
+				<DropdownItem href="/dashboard" class="flex items-center">
+					<LayoutDashboard class="mr-2 h-4 w-4" />{translations[$language].dashboard}
+				</DropdownItem>
+				<DropdownItem on:click={() => signOut()} class="flex items-center">
+					<LogOut class="mr-2 h-4 w-4" />{translations[$language].signOut}
+				</DropdownItem>
 			</Dropdown>
 		{:else if !page.url.pathname.startsWith('/login')}
-			<Button href="/login" class="">Login</Button>
+			<Button href="/login" class="">{translations[$language].login}</Button>
 		{/if}
+
+		<!-- Remove the old toggle button and add a dropdown for language selection(PM requested) -->
+		<Avatar
+			id="language-menu"
+			src={$language === 'en' ? '/icons/flag-us.png' : '/icons/flag-zh.jpg'}
+			alt="Lang"
+			class="ml-2 cursor-pointer"
+		/>
+		<Dropdown triggeredBy="#language-menu" class="w-36">
+			<DropdownItem class="flex items-center" on:click={() => setLanguage('en')}>
+				<img src="/icons/flag-us.png" alt="English" class="mr-2 h-4 w-4" />
+				English
+			</DropdownItem>
+			<DropdownItem class="flex items-center" on:click={() => setLanguage('zh')}>
+				<img src="/icons/flag-zh.jpg" alt="中文" class="mr-2 h-4 w-4" />
+				繁體中文
+			</DropdownItem>
+		</Dropdown>
 	</div>
 </Navbar>
diff --git a/src/lib/components/QrScanner.svelte b/src/lib/components/QrScanner.svelte
index a86b8df..1a37891 100644
--- a/src/lib/components/QrScanner.svelte
+++ b/src/lib/components/QrScanner.svelte
@@ -2,6 +2,7 @@
 	import { notifications } from '$lib/stores/notifications';
 	import { Html5Qrcode } from 'html5-qrcode';
 	import { onMount, onDestroy } from 'svelte';
+	import { language } from '$lib/stores/language'; // Import the global language store
 
 	let { onScan } = $props<{
 		onScan: (code: string) => void;
@@ -11,6 +12,28 @@
 	let scanning = $state(false);
 	let fileInput: HTMLInputElement;
 
+	const translations = {
+		en: {
+			stopCamera: 'Stop Camera',
+			startCamera: 'Start Camera',
+			uploadQrImage: 'Upload QR Code Image',
+			errorScanning: 'error during scanning: ',
+			errorStartingCamera: 'error during starting camera: ',
+			errorScanningFile: 'error during scanning file: ',
+			unableToFindQr:
+				'Unable to find QR code in the image. Please ensure the image is clear and contains a valid QR code.'
+		},
+		zh: {
+			stopCamera: '停止相機',
+			startCamera: '啟動相機',
+			uploadQrImage: '上傳二維碼圖片',
+			errorScanning: '掃描過程中出錯：',
+			errorStartingCamera: '啟動相機過程中出錯：',
+			errorScanningFile: '掃描文件過程中出錯：',
+			unableToFindQr: '無法在圖像中找到二維碼。請確保圖像清晰並包含有效的二維碼。'
+		}
+	};
+
 	onMount(() => {
 		scanner = new Html5Qrcode('qr-reader');
 	});
@@ -39,11 +62,11 @@
 					if ((err as unknown as Error).toString().includes('NotFoundException')) {
 						return;
 					}
-					// notifications.error(`error during scanning: ${err}`);
+					// notifications.error(`${translations[$language].errorScanning} ${err}`);
 				}
 			);
 		} catch (err) {
-			notifications.error(`error during starting camera: ${err}`);
+			notifications.error(`${translations[$language].errorStartingCamera} ${err}`);
 			scanning = false;
 		}
 	}
@@ -57,11 +80,9 @@
 			onScan(result);
 		} catch (err) {
 			if ((err as unknown as Error).toString().includes('NotFoundException')) {
-				notifications.error(
-					'Unable to find QR code in the image. Please ensure the image is clear and contains a valid QR code.'
-				);
+				notifications.error(translations[$language].unableToFindQr);
 			} else {
-				notifications.error(`error during scanning file: ${err}`);
+				notifications.error(`${translations[$language].errorScanningFile} ${err}`);
 			}
 		} finally {
 			fileInput.value = '';
@@ -78,7 +99,7 @@
 			onclick={scanning ? () => scanner.stop() : startCamera}
 			class="w-full rounded-lg border px-6 py-2 hover:bg-gray-50"
 		>
-			{scanning ? 'Stop Camera' : 'Start Camera'}
+			{scanning ? translations[$language].stopCamera : translations[$language].startCamera}
 		</button>
 
 		<div class="relative">
@@ -94,7 +115,7 @@
 				for="qr-image-input"
 				class="block w-full cursor-pointer rounded-lg border px-6 py-2 text-center hover:bg-gray-50"
 			>
-				Upload QR Code Image
+				{translations[$language].uploadQrImage}
 			</label>
 		</div>
 	</div>
diff --git a/src/lib/components/SessionCard.svelte b/src/lib/components/SessionCard.svelte
index c775ec4..ac0cf6f 100644
--- a/src/lib/components/SessionCard.svelte
+++ b/src/lib/components/SessionCard.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Button, Card } from 'flowbite-svelte';
 	import ResolveUsername from './ResolveUsername.svelte';
+	import { language } from '$lib/stores/language'; // Import the global language store
 
 	let {
 		id,
@@ -19,6 +20,17 @@
 		host?: string;
 		createdAt: Date;
 	} = $props();
+
+	const translations = {
+		en: {
+			hostedBy: 'Hosted by',
+			viewSession: 'View Session'
+		},
+		zh: {
+			hostedBy: '主持人',
+			viewSession: '查看會話'
+		}
+	};
 </script>
 
 <Card padding="lg" class="transition-all hover:border-primary-500">
@@ -52,7 +64,9 @@
 		<div class="mt-auto w-full">
 			{#if host}
 				<div class="flex items-center gap-4">
-					<span class="text-sm text-gray-500">Hosted by <ResolveUsername id={host} /></span>
+					<span class="text-sm text-gray-500"
+						>{translations[$language].hostedBy} <ResolveUsername id={host} /></span
+					>
 				</div>
 			{/if}
 			<div class="mb-4 flex items-center gap-4">
@@ -60,7 +74,7 @@
 					{createdAt.toLocaleString()}
 				</span>
 			</div>
-			<Button href="/session/{id}" class="w-full">View Session</Button>
+			<Button href="/session/{id}" class="w-full">{translations[$language].viewSession}</Button>
 		</div>
 	</div>
 </Card>
diff --git a/src/lib/components/session/HostView.svelte b/src/lib/components/session/HostView.svelte
index dcc9268..036ea5b 100644
--- a/src/lib/components/session/HostView.svelte
+++ b/src/lib/components/session/HostView.svelte
@@ -34,6 +34,7 @@
 	import MostActiveGroups from './MostActiveGroups.svelte';
 	import LabelManager from './LabelManager.svelte';
 	import ResolveUsername from '../ResolveUsername.svelte';
+	import { language } from '$lib/stores/language'; // Import the global language store
 
 	let { session }: { session: Readable<Session> } = $props();
 	let code = $state('');
@@ -80,6 +81,45 @@
 	let conversationsData = $state<Array<Conversation>>([]);
 	let keywordData = $state<Record<string, number>>({});
 
+	const translations = {
+		en: {
+			joinSession: 'Join Session',
+			joinSessionDesc: 'Please scan the QR code or enter the code to join the session.',
+			showCode: 'Show Code',
+			showCodeDesc: 'Show a 6-digit code for participants to join the session.',
+			finalSummary: 'Final Summary',
+			mainTask: 'Main Task',
+			subtasks: 'Subtasks:',
+			resources: 'Resources',
+			noResources: 'No resources available',
+			waitingForParticipants: 'Waiting for participants to join groups...',
+			noParticipants: 'No participants',
+			removeParticipant: 'Remove participant',
+			openChatHistory: 'Open chat history',
+			openGroupChatHistory: 'Open group chat history',
+			warningInappropriate: 'Warning: inappropriate content detected.',
+			warningOffTopic: 'Warning: many off-topic messages.'
+		},
+		zh: {
+			joinSession: '加入會話',
+			joinSessionDesc: '請掃描二維碼或輸入代碼以加入會話。',
+			showCode: '顯示代碼',
+			showCodeDesc: '顯示一個6位數的代碼供參與者加入會話。',
+			finalSummary: '最終總結',
+			mainTask: '主要任務',
+			subtasks: '子任務:',
+			resources: '資源',
+			noResources: '沒有可用資源',
+			waitingForParticipants: '等待參與者加入小組...',
+			noParticipants: '沒有參與者',
+			removeParticipant: '移除參與者',
+			openChatHistory: '打開聊天記錄',
+			openGroupChatHistory: '打開小組聊天記錄',
+			warningInappropriate: '警告：檢測到不適當內容。',
+			warningOffTopic: '警告：許多離題訊息。'
+		}
+	};
+
 	onMount(() => {
 		const unsubscribes: (() => void)[] = [];
 		const initializeSession = async () => {
@@ -514,8 +554,12 @@
 	<div class="grid gap-8 md:grid-cols-4">
 		{#if $session?.status && $session.status === 'preparing'}
 			<div class="rounded-lg border p-6">
-				<h2 class="mb-4 text-xl font-semibold">Join Session</h2>
-				<p class="text-gray-700">Please scan the QR code or enter the code to join the session.</p>
+				<h2 class="mb-4 text-xl font-semibold">
+					{$language === 'zh' ? translations.zh.joinSession : translations.en.joinSession}
+				</h2>
+				<p class="text-gray-700">
+					{$language === 'zh' ? translations.zh.joinSessionDesc : translations.en.joinSessionDesc}
+				</p>
 				{#if $session?.status === 'preparing'}
 					<div class="mt-4">
 						<div class="flex justify-center">
@@ -526,10 +570,10 @@
 						{#if code === '' || code === 'Loading...'}
 							<div class="flex justify-center">
 								<Button color="primary" on:click={getCode} disabled={code === 'Loading...'}>
-									Show Code
+									{$language === 'zh' ? translations.zh.showCode : translations.en.showCode}
 								</Button>
 								<Tooltip placement="bottom">
-									Show a 6-digit code for participants to join the session.
+									{$language === 'zh' ? translations.zh.showCodeDesc : translations.en.showCodeDesc}
 								</Tooltip>
 							</div>
 						{:else}
@@ -544,7 +588,9 @@
 
 		{#if $session?.status === 'ended'}
 			<div class="col-span-4 rounded-lg border p-6">
-				<h2 class="mb-4 text-xl font-semibold">Final Summary</h2>
+				<h2 class="mb-4 text-xl font-semibold">
+					{$language === 'zh' ? translations.zh.finalSummary : translations.en.finalSummary}
+				</h2>
 				<div class="flex w-full flex-col gap-4">
 					<div class="h-96">
 						<WordCloud words={keywordData} />
@@ -568,7 +614,11 @@
 		>
 			<h2 class="mb-4 text-xl font-semibold">Groups</h2>
 			{#if $groups.length === 0}
-				<Alert>Waiting for participants to join groups...</Alert>
+				<Alert
+					>{$language === 'zh'
+						? translations.zh.waitingForParticipants
+						: translations.en.waitingForParticipants}</Alert
+				>
 			{:else}
 				<div class="grid grid-cols-3 gap-4">
 					{#each [...$groups].sort((a, b) => a.number - b.number) as group}
@@ -581,11 +631,19 @@
 								>
 									Group #{group.number}
 								</button>
-								<Tooltip>Open group chat history</Tooltip>
+								<Tooltip
+									>{$language === 'zh'
+										? translations.zh.openGroupChatHistory
+										: translations.en.openGroupChatHistory}</Tooltip
+								>
 								<GroupStatus {group} showStatus={$session?.status === 'group'} />
 							</div>
 							{#if group.participants.length === 0}
-								<p class="text-xs text-gray-500">No participants</p>
+								<p class="text-xs text-gray-500">
+									{$language === 'zh'
+										? translations.zh.noParticipants
+										: translations.en.noParticipants}
+								</p>
 							{:else}
 								<ul class="space-y-1.5">
 									{#each group.participants as participant}
@@ -602,7 +660,11 @@
 													>
 														<ResolveUsername id={participant} />
 													</span>
-													<Tooltip>Open chat history</Tooltip>
+													<Tooltip
+														>{$language === 'zh'
+															? translations.zh.openChatHistory
+															: translations.en.openChatHistory}</Tooltip
+													>
 
 													{#if participantProgress.has(participant)}
 														<div class="flex flex-1 items-center gap-1.5">
@@ -644,9 +706,17 @@
 																		{/if}
 																	</div>
 																	{#if warning.moderation}
-																		<Tooltip>Warning: inappropriate content detected.</Tooltip>
+																		<Tooltip
+																			>{$language === 'zh'
+																				? translations.zh.warningInappropriate
+																				: translations.en.warningInappropriate}</Tooltip
+																		>
 																	{:else if warning.offTopic >= 3}
-																		<Tooltip>Warning: many off-topic messages.</Tooltip>
+																		<Tooltip
+																			>{$language === 'zh'
+																				? translations.zh.warningOffTopic
+																				: translations.en.warningOffTopic}</Tooltip
+																		>
 																	{/if}
 																{/if}
 															{/if}
@@ -659,7 +729,11 @@
 												>
 													<X class="h-3 w-3" />
 												</button>
-												<Tooltip>Remove participant</Tooltip>
+												<Tooltip
+													>{$language === 'zh'
+														? translations.zh.removeParticipant
+														: translations.en.removeParticipant}</Tooltip
+												>
 											</div>
 										</li>
 									{/each}
@@ -673,12 +747,16 @@
 
 		<!-- Task Section -->
 		<div class="col-span-4 rounded-lg border p-6">
-			<h2 class="mb-4 text-xl font-semibold">Main Task</h2>
+			<h2 class="mb-4 text-xl font-semibold">
+				{$language === 'zh' ? translations.zh.mainTask : translations.en.mainTask}
+			</h2>
 			<p class="text-gray-700">{$session?.task}</p>
 
 			{#if $session?.subtasks.length > 0}
 				<div class="mt-4">
-					<h3 class="mb-2 font-medium">Subtasks:</h3>
+					<h3 class="mb-2 font-medium">
+						{$language === 'zh' ? translations.zh.subtasks : translations.en.subtasks}
+					</h3>
 					<ul class="list-inside list-disc space-y-2">
 						{#each $session?.subtasks as subtask}
 							<li class="text-gray-700">{subtask}</li>
@@ -690,9 +768,13 @@
 
 		<!-- Resources Section -->
 		<div class="col-span-4 rounded-lg border p-6">
-			<h2 class="mb-4 text-xl font-semibold">Resources</h2>
+			<h2 class="mb-4 text-xl font-semibold">
+				{$language === 'zh' ? translations.zh.resources : translations.en.resources}
+			</h2>
 			{#if $session?.resources.length === 0}
-				<p class="text-gray-600">No resources available</p>
+				<p class="text-gray-600">
+					{$language === 'zh' ? translations.zh.noResources : translations.en.noResources}
+				</p>
 			{:else}
 				<div class="space-y-4">
 					{#each $session?.resources as resource}
diff --git a/src/lib/components/session/ParticipantView.svelte b/src/lib/components/session/ParticipantView.svelte
index b64be0f..3cb25f1 100644
--- a/src/lib/components/session/ParticipantView.svelte
+++ b/src/lib/components/session/ParticipantView.svelte
@@ -19,6 +19,7 @@
 	import GroupSummary from '$lib/components/session/GroupSummary.svelte';
 	import { initFFmpeg, float32ArrayToWav, wav2mp3 } from '$lib/utils/wav2mp3';
 	import EndedView from '$lib/components/session/EndedView.svelte';
+	import { language } from '$lib/stores/language'; // Import the global language store
 
 	interface ChatroomConversation {
 		name: string;
@@ -131,16 +132,16 @@
 			});
 
 			if (!response.ok) {
-				const data = await response.json();
-				notifications.error(data.error || 'Failed to create group');
+				await response.json(); // ignore result
+				notifications.error(translations[$language].failedCreateGroup);
 				return;
 			}
 
-			notifications.success('Group created successfully');
+			notifications.success(translations[$language].successCreateGroup);
 			creating = false;
 		} catch (error) {
 			console.error('Error creating group:', error);
-			notifications.error('Failed to create group');
+			notifications.error(translations[$language].failedCreateGroup);
 		} finally {
 			isCreatingGroup = false;
 		}
@@ -148,7 +149,9 @@
 
 	async function handleJoinGroup() {
 		if (!groupNumber || !/^(?:[1-9]|[1-4][0-9]|50)$/.test(groupNumber)) {
-			notifications.error('Please enter a valid group number (1-50)');
+			notifications.error(
+				translations[$language].invalidGroupNumber || 'Please enter a valid group number (1-50)'
+			);
 			return;
 		}
 
@@ -158,16 +161,16 @@
 			});
 
 			if (!response.ok) {
-				const data = await response.json();
-				notifications.error(data.error || 'Failed to join group');
+				await response.json(); // ignore result
+				notifications.error(translations[$language].failedJoinGroup);
 				return;
 			}
 
-			notifications.success('Joined group successfully');
+			notifications.success(translations[$language].successJoinGroup);
 			creating = false;
 		} catch (error) {
 			console.error('Error joining group:', error);
-			notifications.error('Failed to join group');
+			notifications.error(translations[$language].failedJoinGroup);
 		}
 	}
 
@@ -489,8 +492,8 @@
 			);
 
 			if (!response.ok) {
-				const data = await response.json();
-				throw new Error(data.error || '無法結束總結階段');
+				const { error: errMsg } = await response.json();
+				throw new Error(errMsg || '無法結束總結階段');
 			}
 
 			notifications.success('成功完成群組總結');
@@ -510,18 +513,96 @@
 			);
 
 			if (!response.ok) {
-				const data = await response.json();
-				throw new Error(data.error || 'Failed to leave group');
+				await response.json();
+				throw new Error(translations[$language].failedLeaveGroup);
 			}
 
-			notifications.success('Successfully left group');
+			notifications.success(translations[$language].successLeaveGroup);
 			groupDoc = null;
 			conversationDoc = null;
 		} catch (error) {
 			console.error('Error leaving group:', error);
-			notifications.error('Failed to leave group');
+			notifications.error(translations[$language].failedLeaveGroup);
 		}
 	}
+
+	const translations = {
+		en: {
+			confirmEndGroup:
+				'Entering the Ended Stage is irreversible. Are you sure you want to proceed?',
+			confirm: 'Confirm',
+			cancel: 'Cancel',
+			confirmEndSummarize: 'Are you sure you want to confirm the group summary?',
+			finishgroup: 'Finish Group Discussion',
+			groupInfo: 'Group Information',
+			groupManagement: 'Group Management',
+			createNewGroup: 'Create New Group',
+			jointGroup: 'Join Group',
+			waitStart: 'Waiting for session to start...',
+			end: 'Please wait for the host to end the session.',
+			status: 'Session Status',
+			individual: 'Work on your individual contributions',
+			beforeGroup: 'Get ready to collaborate with your group.',
+			group: 'Collaborate with your group members.',
+			ended: 'Ended',
+			member: 'Members: ',
+			groupNum: 'Group Number',
+			notInGroup: 'You are not in a group yet.',
+			leaveGroup: 'Leave Group',
+			hostBeginShortly: 'The host will begin the session shortly.',
+			unknownUser: 'Unknown User',
+			loadingProfile: 'Loading...',
+			you: 'You',
+			leader: ' (Leader)',
+			creatingGroup: 'Creating...',
+			joinExistingGroup: 'Join Existing Group',
+			enterGroupNumber: 'Enter group number (1-50)',
+			successCreateGroup: 'Group created successfully',
+			failedCreateGroup: 'Failed to create group',
+			successJoinGroup: 'Joined group successfully',
+			failedJoinGroup: 'Failed to join group',
+			successLeaveGroup: 'Successfully left group',
+			failedLeaveGroup: 'Failed to leave group',
+			invalidGroupNumber: 'Please enter a valid group number (1-50)'
+		},
+		zh: {
+			confirmEndGroup: '進入 Ended Stage 將無法返回，確定要繼續嗎？',
+			confirm: '確定',
+			cancel: '取消',
+			finishgroup: '結束群組討論',
+			confirmEndSummarize: '確定要確認群組總結嗎？',
+			groupInfo: '群組資訊',
+			groupManagement: '群組管理',
+			createNewGroup: '建立新群組',
+			jointGroup: '加入群組',
+			waitStart: '等待會議開始...',
+			end: '請等待主持人結束會議。',
+			status: '會議狀態',
+			individual: '進行個人觀念發想',
+			beforeGroup: '準備好與您的小組合作',
+			group: '與您的小組成員合作討論',
+			ended: '已結束',
+			member: '成員：',
+			groupNum: '小組編號',
+			notInGroup: '您還沒有加入任何群組。',
+			leaveGroup: '退出群組',
+			hostBeginShortly: '主持人即將開始會議。',
+			unknownUser: '未知使用者',
+			loadingProfile: '載入中...',
+			you: '您',
+			leader: '（組長）',
+			creatingGroup: '正在建立...',
+			joinExistingGroup: '加入現有群組',
+			enterGroupNumber: '請輸入群組編號 (1-50)',
+			successCreateGroup: '成功建立群組',
+			failedCreateGroup: '無法建立群組',
+			successJoinGroup: '成功加入群組',
+			failedJoinGroup: '無法加入群組',
+			successLeaveGroup: '成功退出群組',
+			failedLeaveGroup: '無法退出群組',
+			invalidGroupNumber: '請輸入有效的群組編號 (1-50)'
+		}
+	};
 </script>
 
 <main class="mx-auto max-w-7xl px-2 py-8">
@@ -531,15 +612,15 @@
 			{#if groupStatus === 'discussion'}
 				<Button color="green" on:click={handleEndGroup}>
 					<CircleCheck class="mr-2 h-4 w-4" />
-					Finish Group Discussion
+					{translations[$language].finishgroup}
 				</Button>
 			{:else if groupStatus === 'summarize'}
 				<Button color="green" on:click={handleEndSummarize}>
 					<CircleCheck class="mr-2 h-4 w-4" />
-					Confirm Group Summary
+					{translations[$language].confirmEndSummarize}
 				</Button>
 			{:else if groupStatus === 'end'}
-				<p class="text-gray-600">Please wait for the host to finish</p>
+				<p class="text-gray-600">{translations[$language].end}</p>
 			{/if}
 		{/if}
 	</div>
@@ -548,7 +629,7 @@
 		<div class="space-y-8 md:col-span-1">
 			<!-- Status Section -->
 			<div class="rounded-lg border p-6">
-				<h2 class="mb-4 text-xl font-semibold">Session Status</h2>
+				<h2 class="mb-4 text-xl font-semibold">{translations[$language].status}</h2>
 				<div class="space-y-4">
 					<div class="flex items-center gap-2">
 						<!-- svelte-ignore element_invalid_self_closing_tag -->
@@ -566,18 +647,18 @@
 						<span class="capitalize">{$session?.status}</span>
 					</div>
 					{#if $session?.status === 'individual'}
-						<p class="text-gray-600">Work on your individual contributions.</p>
+						<p class="text-gray-600">{translations[$language].individual}</p>
 					{:else if $session?.status === 'before-group'}
-						<p class="text-gray-600">Get ready to collaborate with your group.</p>
+						<p class="text-gray-600">{translations[$language].beforeGroup}</p>
 					{:else if $session?.status === 'group'}
-						<p class="text-gray-600">Collaborate with your group members.</p>
+						<p class="text-gray-600">{translations[$language].group}</p>
 					{/if}
 				</div>
 			</div>
 
 			<!-- Group Section -->
 			<div class="rounded-lg border p-6">
-				<h2 class="mb-4 text-xl font-semibold">Group Information</h2>
+				<h2 class="mb-4 text-xl font-semibold">{translations[$language].groupInfo}</h2>
 				{#if groupDoc}
 					<div class="space-y-4">
 						<div class="flex items-center justify-between">
@@ -587,21 +668,24 @@
 							</div>
 						</div>
 						<div>
-							<h3 class="mb-2 font-medium">Members:</h3>
+							<h3 class="mb-2 font-medium">{translations[$language].member}</h3>
 							<ul class="space-y-2">
 								{#each groupDoc.data.participants as participant, index}
 									<li class="flex items-center gap-2">
 										<User class="h-4 w-4" />
 										<span>
 											{#if participant === user.uid}
-												You{index === 0 ? ' (Leader)' : ''}
+												{translations[$language].you}{index === 0
+													? translations[$language].leader
+													: ''}
 											{:else}
 												{#await getUser(participant)}
-													<span class="text-gray-500">載入中...</span>
+													<span class="text-gray-500">{translations[$language].loadingProfile}</span
+													>
 												{:then profile}
-													{profile.displayName}{index === 0 ? ' (Leader)' : ''}
+													{profile.displayName}{index === 0 ? translations[$language].leader : ''}
 												{:catch}
-													<span class="text-red-500">未知使用者</span>
+													<span class="text-red-500">{translations[$language].unknownUser}</span>
 												{/await}
 											{/if}
 										</span>
@@ -618,7 +702,7 @@
 									onclick={() => groupDoc?.id && handleLeaveGroup(groupDoc.id, user.uid)}
 								>
 									<LogOut class="mr-2 h-4 w-4" />
-									Leave Group
+									{translations[$language].leaveGroup}
 								</Button>
 								<Button
 									color="red"
@@ -633,37 +717,41 @@
 					</div>
 				{:else if $session?.status === 'preparing'}
 					<div class="mt-6 space-y-4">
-						<h3 class="font-medium">Group Management</h3>
+						<h3 class="font-medium">{translations[$language].groupManagement}</h3>
 						{#if creating}
 							<div class="space-y-4">
 								<div class="flex items-center gap-2">
-									<Label for="groupNumber">Group Number</Label>
+									<Label for="groupNumber">{translations[$language].groupNum}</Label>
 									<Input
 										id="groupNumber"
 										type="number"
 										bind:value={groupNumber}
 										min="1"
 										max="50"
-										placeholder="Enter group number (1-50)"
+										placeholder={translations[$language].enterGroupNumber}
 									/>
 								</div>
 								<Button color="primary" on:click={handleJoinGroup}>
 									<UserPlus class="mr-2 h-4 w-4" />
-									Join Group
+									{translations[$language].jointGroup}
 								</Button>
 							</div>
 						{:else}
 							<Button color="primary" on:click={handleCreateGroup} disabled={isCreatingGroup}>
 								<Users class="mr-2 h-4 w-4" />
-								{isCreatingGroup ? 'Creating...' : 'Create New Group'}
+								{isCreatingGroup
+									? translations[$language].creatingGroup
+									: translations[$language].createNewGroup}
 							</Button>
 						{/if}
 						<Button color="alternative" on:click={() => (creating = !creating)}>
-							{creating ? 'Cancel' : 'Join Existing Group'}
+							{creating
+								? translations[$language].cancel
+								: translations[$language].joinExistingGroup}
 						</Button>
 					</div>
 				{:else}
-					<p class="text-gray-600">You are not in a group yet.</p>
+					<p class="text-gray-600">{translations[$language].notInGroup}</p>
 				{/if}
 			</div>
 		</div>
@@ -673,8 +761,8 @@
 		>
 			{#if $session?.status === 'preparing'}
 				<div class="mt-4">
-					<h3 class="mb-2 font-medium">Waiting for session to start...</h3>
-					<p class="text-gray-600">The host will begin the session shortly.</p>
+					<h3 class="mb-2 font-medium">{translations[$language].waitStart}</h3>
+					<p class="text-gray-600">{translations[$language].hostBeginShortly}</p>
 				</div>
 			{:else if $session?.status === 'individual'}
 				<Chatroom record={handleRecord} send={handleSend} {conversations} isIndividual />
diff --git a/src/lib/components/session/StageProgress.svelte b/src/lib/components/session/StageProgress.svelte
index 62a38f1..6e3a048 100644
--- a/src/lib/components/session/StageProgress.svelte
+++ b/src/lib/components/session/StageProgress.svelte
@@ -2,13 +2,14 @@
 	import { ArrowLeft, ArrowRight, Loader2 } from 'lucide-svelte';
 	import { Button, Modal } from 'flowbite-svelte';
 	import type { Session } from '$lib/schema/session';
+	import { language } from '$lib/stores/language'; // Import the global language store
 
 	const stages = [
-		{ id: 'preparing', name: 'Preparing Stage', color: 'bg-yellow-500' },
-		{ id: 'individual', name: 'Individual Stage', color: 'bg-blue-500' },
-		{ id: 'before-group', name: 'Before Group Stage', color: 'bg-purple-500' },
-		{ id: 'group', name: 'Group Stage', color: 'bg-green-500' },
-		{ id: 'ended', name: 'Ended Stage', color: 'bg-gray-500' }
+		{ id: 'preparing', name: '準備階段', color: 'bg-yellow-500' },
+		{ id: 'individual', name: '個人階段', color: 'bg-blue-500' },
+		{ id: 'before-group', name: '團體討論前階段', color: 'bg-purple-500' },
+		{ id: 'group', name: '團體討論階段', color: 'bg-green-500' },
+		{ id: 'ended', name: '總結階段', color: 'bg-gray-500' }
 	] as const;
 
 	export let session: Session | undefined;
@@ -24,6 +25,20 @@
 	$: canGoNext = currentStageIndex < stages.length - 1 && !loadingNext;
 	$: nextStage = currentStageIndex < stages.length - 1 ? stages[currentStageIndex + 1] : null;
 
+	const translations = {
+		en: {
+			confirmEndStage:
+				'Entering the Ended Stage is irreversible. Are you sure you want to proceed?',
+			confirm: 'Confirm',
+			cancel: 'Cancel'
+		},
+		zh: {
+			confirmEndStage: '進入總結階段將無法返回，確定要繼續嗎？',
+			confirm: '確定',
+			cancel: '取消'
+		}
+	};
+
 	async function handlePrevious() {
 		if (canGoPrevious) {
 			loadingPrevious = true;
@@ -117,7 +132,7 @@
 <Modal bind:open={showEndedConfirmModal} size="sm" autoclose class="w-full">
 	<div class="text-center">
 		<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-500">
-			進入 Ended Stage 將無法返回，確定要繼續嗎？
+			{translations[$language].confirmEndStage}
 		</h3>
 		<div class="flex justify-center gap-4">
 			<Button
@@ -127,9 +142,11 @@
 					proceedToNextStage();
 				}}
 			>
-				確定
+				{translations[$language].confirm}
 			</Button>
-			<Button color="alternative" on:click={() => (showEndedConfirmModal = false)}>取消</Button>
+			<Button color="alternative" on:click={() => (showEndedConfirmModal = false)}
+				>{translations[$language].cancel}</Button
+			>
 		</div>
 	</div>
 </Modal>
diff --git a/src/lib/stores/language.ts b/src/lib/stores/language.ts
new file mode 100644
index 0000000..42c6d2b
--- /dev/null
+++ b/src/lib/stores/language.ts
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const language = writable<'en' | 'zh'>('en');
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5657b42..76a675b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,9 +3,124 @@
 	import { Button, Card } from 'flowbite-svelte';
 	import { ArrowRight, Mic, Brain, GraduationCap, Github } from 'lucide-svelte';
 	import { onMount } from 'svelte';
+	import { language } from '$lib/stores/language'; // Import the global language store
 
 	let title = $state('Hinagiku');
 	let highlight = $state(0);
+	let lang = language; // Use the global language store directly
+
+	const translations = {
+		en: {
+			transcript: 'Real-time Transcription',
+			Itanalysis: 'Intelligent Analysis',
+			educational: 'Educational Focus',
+			tr_details:
+				'Capture every valuable insight from your discussions with our advanced speech-to-text technology.',
+			ia_details:
+				'Get AI-powered insights and suggestions to improve discussion quality and participation.',
+			ef_details:
+				'Purpose-built for educational environments with features that support meaningful learning.',
+			Ai_describe:
+				'Our AI-powered system emphasizes student-led discussions while providing structured guidance, making it easier for teachers to direct learning and analyze outcomes.',
+			intro:
+				'Hinagiku helps educators facilitate more engaging and productive discussions through real-time transcription and intelligent analysis.',
+			welcome: 'Welcome to Hinagiku!',
+			profile: 'Profile',
+			dashboard: 'Go to Dashboard',
+			signOut: 'Sign out',
+			login: 'Login',
+			started: 'Get Started',
+			learn: 'Learn More',
+			whyChoose: 'Why Choose Hinagiku?',
+			whyChooseDesc:
+				'Our platform combines cutting-edge technology with educational expertise to enhance learning outcomes.',
+			howItWorks: 'How It Works',
+			howItWorksDesc:
+				'Hinagiku enhances the Think-Pair-Share learning technique with AI assistance throughout the entire process.',
+			preparation: '1. Preparation',
+			preparationDesc:
+				'Teachers create discussion templates and set up dynamic timelines for structured learning sessions.',
+			joinSession: '2. Join Session',
+			joinSessionDesc:
+				'Students easily join discussions by scanning a session QR code, then form or join groups.',
+			discussion: '3. Discussion',
+			discussionDesc:
+				'AI assists in guiding individual reflection, group discussions, and helps maintain focus on the topic.',
+			analysis: '4. Analysis',
+			analysisDesc:
+				'Get visual summaries and insights from discussions to understand class perspectives and engagement.',
+			communityDriven: 'Community-Driven Templates',
+			communityDrivenDesc:
+				'Access and share discussion templates with educators worldwide. Build upon proven discussion frameworks or contribute your own.',
+			browseTemplates: 'Browse public templates from experienced educators',
+			forkTemplates: 'Fork and customize existing templates for your needs',
+			shareTemplates: 'Share your successful discussion formats with the community',
+			collaborateTemplates: 'Collaborate with other educators to improve templates',
+			exploreTemplates: 'Explore Templates',
+			storyBehind: 'The Story Behind Our Name',
+			storyBehindDesc:
+				'Hinagiku (雛菊), or Daisy in English, is an intelligent system designed to support discussions in educational environments.',
+			realTime:
+				"One of Hinagiku's key features is its real-time voice transcription and analysis, which helps hosts provide timely and insightful feedback, setting it apart from other educational tools.",
+			coreValues:
+				'We chose the name Hinagiku because it reflects our core values: resilience, simplicity, and growth—much like the daisy flower itself, which flourishes in diverse conditions.',
+			mission:
+				'Our mission is to help participants and hosts connect meaningfully by providing tools that facilitate better communication and collaboration in classrooms.',
+			openSource: 'Open Source',
+			openSourceDesc:
+				'Hinagiku is open source and available on GitHub. We welcome contributions from the community!',
+			viewOnGitHub: 'View on GitHub'
+		},
+		zh: {
+			transcript: '即時轉錄',
+			Itanalysis: '智慧分析',
+			educational: '教育焦點',
+			tr_details: '使用我們先進的語音轉文字技術捕獲討論中的每一個寶貴見解。',
+			ia_details: '獲取AI提供的見解和建議，以提高討論品質和參與度。',
+			ef_details: '專為教育環境而設計，具被助於有效學習的功能。',
+			Ai_describe:
+				'我們的AI系統強調學生主導的討論，同時提供結構化指導，使教師更容易引導學習並分析結果。',
+			intro: 'Hinagiku透過即時轉錄和智慧分析幫助教育工作者促進更具吸引力和生產力的討論。',
+			welcome: '歡迎來到Hinagiku!',
+			profile: '個人资料',
+			dashboard: '儀表板',
+			signOut: '登出',
+			login: '登入',
+			started: '開始使用',
+			learn: '了解更多',
+			whyChoose: '為什麼選擇Hinagiku？',
+			whyChooseDesc: '我們的平台結合了尖端技術和教育專業知識，以提高學習成果。',
+			howItWorks: '它是如何工作的',
+			howItWorksDesc: 'Hinagiku在整個過程中通過AI輔助增強了Think-Pair-Share學習技術。',
+			preparation: '1. 準備',
+			preparationDesc: '教師創建討論模板並設置動態時間表以進行結構化學習會話。',
+			joinSession: '2. 加入會話',
+			joinSessionDesc: '學生通過掃描會話二維碼輕鬆加入討論，然後組建或加入小組。',
+			discussion: '3. 討論',
+			discussionDesc: 'AI協助指導個人反思、小組討論，並幫助保持對主題的關注。',
+			analysis: '4. 分析',
+			analysisDesc: '從討論中獲取視覺摘要和見解，以了解班級的觀點和參與度。',
+			communityDriven: '社區驅動的模板',
+			communityDrivenDesc:
+				'訪問並分享來自全球教育工作者的討論模板。在經過驗證的討論框架上進行構建或貢獻您自己的模板。',
+			browseTemplates: '瀏覽來自經驗豐富的教育工作者的公共模板',
+			forkTemplates: '分叉並自定義現有模板以滿足您的需求',
+			shareTemplates: '與社區分享您成功的討論格式',
+			collaborateTemplates: '與其他教育工作者合作改進模板',
+			exploreTemplates: '探索模板',
+			storyBehind: '我們名字背後的故事',
+			storyBehindDesc:
+				'Hinagiku（雛菊），或英文中的Daisy，是一個旨在支持教育環境中討論的智能系統。',
+			realTime:
+				'Hinagiku的一個關鍵功能是其實時語音轉錄和分析，這有助於主持人提供及時和有見地的反饋，使其與其他教育工具區分開來。',
+			coreValues:
+				'我們選擇Hinagiku這個名字是因為它反映了我們的核心價值觀：韌性、簡單和成長——就像雛菊花一樣，在不同的條件下茁壯成長。',
+			mission: '我們的使命是通過提供促進更好溝通和協作的工具，幫助參與者和主持人有意義地聯繫。',
+			openSource: '開源',
+			openSourceDesc: 'Hinagiku是開源的，並在GitHub上可用。我們歡迎社區的貢獻！',
+			viewOnGitHub: '在GitHub上查看'
+		}
+	};
 
 	onMount(() => {
 		const interval = setInterval(() => {
@@ -43,21 +158,20 @@
 						</span>
 					</h1>
 					<p class="mb-8 text-xl text-gray-600">
-						Hinagiku helps educators facilitate more engaging and productive discussions through
-						real-time transcription and intelligent analysis.
+						{translations[$lang].intro}
 					</p>
 					<div class="flex gap-4">
 						{#if $user}
 							<Button size="xl" class="gap-2" href="/dashboard">
-								Go to Dashboard
+								{translations[$lang].dashboard}
 								<ArrowRight size={20} />
 							</Button>
 						{:else}
 							<Button size="xl" class="gap-2" href="/login">
-								Get Started
+								{translations[$lang].started}
 								<ArrowRight size={20} />
 							</Button>
-							<Button size="xl" color="light" href="#features">Learn More</Button>
+							<Button size="xl" color="light" href="#features">{translations[$lang].learn}</Button>
 						{/if}
 					</div>
 				</div>
@@ -72,10 +186,9 @@
 	<div id="features" class="bg-white py-24">
 		<div class="mx-auto max-w-6xl px-4">
 			<div class="mb-16 text-center">
-				<h2 class="mb-4 text-3xl font-bold text-gray-900">Why Choose Hinagiku?</h2>
+				<h2 class="mb-4 text-3xl font-bold text-gray-900">{translations[$lang].whyChoose}</h2>
 				<p class="mx-auto max-w-2xl text-xl text-gray-600">
-					Our platform combines cutting-edge technology with educational expertise to enhance
-					learning outcomes.
+					{translations[$lang].whyChooseDesc}
 				</p>
 			</div>
 
@@ -86,10 +199,9 @@
 							<Mic class="h-6 w-6 text-primary-600" />
 						</div>
 					</div>
-					<h3 class="mb-3 text-xl font-semibold">Real-time Transcription</h3>
+					<h3 class="mb-3 text-xl font-semibold">{translations[$lang].transcript}</h3>
 					<p class="text-gray-600">
-						Capture every valuable insight from your discussions with our advanced speech-to-text
-						technology.
+						{translations[$lang].tr_details}
 					</p>
 				</Card>
 
@@ -99,9 +211,9 @@
 							<Brain class="h-6 w-6 text-primary-600" />
 						</div>
 					</div>
-					<h3 class="mb-3 text-xl font-semibold">Intelligent Analysis</h3>
+					<h3 class="mb-3 text-xl font-semibold">{translations[$lang].Itanalysis}</h3>
 					<p class="text-gray-600">
-						Get AI-powered insights and suggestions to improve discussion quality and participation.
+						{translations[$lang].ia_details}
 					</p>
 				</Card>
 
@@ -111,10 +223,9 @@
 							<GraduationCap class="h-6 w-6 text-primary-600" />
 						</div>
 					</div>
-					<h3 class="mb-3 text-xl font-semibold">Educational Focus</h3>
+					<h3 class="mb-3 text-xl font-semibold">{translations[$lang].educational}</h3>
 					<p class="text-gray-600">
-						Purpose-built for educational environments with features that support meaningful
-						learning.
+						{translations[$lang].ef_details}
 					</p>
 				</Card>
 			</div>
@@ -125,51 +236,45 @@
 	<div class="bg-gradient-to-b from-white via-primary-50/30 to-white py-24">
 		<div class="mx-auto max-w-6xl px-4">
 			<div class="mb-16 text-center">
-				<h2 class="mb-4 text-3xl font-bold text-gray-900">How It Works</h2>
+				<h2 class="mb-4 text-3xl font-bold text-gray-900">{translations[$lang].howItWorks}</h2>
 				<p class="mx-auto max-w-2xl text-xl text-gray-600">
-					Hinagiku enhances the Think-Pair-Share learning technique with AI assistance throughout
-					the entire process.
+					{translations[$lang].howItWorksDesc}
 				</p>
 			</div>
 
 			<div class="grid gap-8 md:grid-cols-4">
 				<Card class="text-center">
-					<h3 class="mb-3 text-xl font-semibold">1. Preparation</h3>
+					<h3 class="mb-3 text-xl font-semibold">{translations[$lang].preparation}</h3>
 					<p class="text-gray-600">
-						Teachers create discussion templates and set up dynamic timelines for structured
-						learning sessions.
+						{translations[$lang].preparationDesc}
 					</p>
 				</Card>
 
 				<Card class="text-center">
-					<h3 class="mb-3 text-xl font-semibold">2. Join Session</h3>
+					<h3 class="mb-3 text-xl font-semibold">{translations[$lang].joinSession}</h3>
 					<p class="text-gray-600">
-						Students easily join discussions by scanning a session QR code, then form or join
-						groups.
+						{translations[$lang].joinSessionDesc}
 					</p>
 				</Card>
 
 				<Card class="text-center">
-					<h3 class="mb-3 text-xl font-semibold">3. Discussion</h3>
+					<h3 class="mb-3 text-xl font-semibold">{translations[$lang].discussion}</h3>
 					<p class="text-gray-600">
-						AI assists in guiding individual reflection, group discussions, and helps maintain focus
-						on the topic.
+						{translations[$lang].discussionDesc}
 					</p>
 				</Card>
 
 				<Card class="text-center">
-					<h3 class="mb-3 text-xl font-semibold">4. Analysis</h3>
+					<h3 class="mb-3 text-xl font-semibold">{translations[$lang].analysis}</h3>
 					<p class="text-gray-600">
-						Get visual summaries and insights from discussions to understand class perspectives and
-						engagement.
+						{translations[$lang].analysisDesc}
 					</p>
 				</Card>
 			</div>
 
 			<div class="mt-12 text-center">
 				<p class="mx-auto max-w-2xl text-gray-600">
-					Our AI-powered system emphasizes student-led discussions while providing structured
-					guidance, making it easier for teachers to direct learning and analyze outcomes.
+					{translations[$lang].Ai_describe}
 				</p>
 			</div>
 		</div>
@@ -180,21 +285,22 @@
 		<div class="mx-auto max-w-6xl px-4">
 			<div class="grid items-center gap-12 lg:grid-cols-2">
 				<div>
-					<h2 class="mb-6 text-3xl font-bold text-gray-900">Community-Driven Templates</h2>
+					<h2 class="mb-6 text-3xl font-bold text-gray-900">
+						{translations[$lang].communityDriven}
+					</h2>
 					<div class="space-y-4 text-gray-600">
 						<p class="text-xl">
-							Access and share discussion templates with educators worldwide. Build upon proven
-							discussion frameworks or contribute your own.
+							{translations[$lang].communityDrivenDesc}
 						</p>
 						<ul class="ml-6 list-disc space-y-3">
-							<li>Browse public templates from experienced educators</li>
-							<li>Fork and customize existing templates for your needs</li>
-							<li>Share your successful discussion formats with the community</li>
-							<li>Collaborate with other educators to improve templates</li>
+							<li>{translations[$lang].browseTemplates}</li>
+							<li>{translations[$lang].forkTemplates}</li>
+							<li>{translations[$lang].shareTemplates}</li>
+							<li>{translations[$lang].collaborateTemplates}</li>
 						</ul>
 						<div class="mt-8">
 							<Button size="xl" class="gap-2" href="/templates/public">
-								Explore Templates
+								{translations[$lang].exploreTemplates}
 								<ArrowRight size={20} />
 							</Button>
 						</div>
@@ -223,26 +329,21 @@
 					/>
 				</div>
 				<div class="order-1 lg:order-2">
-					<h2 class="mb-6 text-3xl font-bold text-gray-900">The Story Behind Our Name</h2>
+					<h2 class="mb-6 text-3xl font-bold text-gray-900">{translations[$lang].storyBehind}</h2>
 					<div class="space-y-4 text-gray-600">
 						<p>
-							<span class="font-semibold text-primary-600">Hinagiku (雛菊)</span>, or Daisy in
-							English, is an intelligent system designed to support discussions in educational
-							environments.
+							<span class="font-semibold text-primary-600">Hinagiku (雛菊)</span>, {translations[
+								$lang
+							].storyBehindDesc}
 						</p>
 						<p>
-							One of Hinagiku's key features is its real-time voice transcription and analysis,
-							which helps hosts provide timely and insightful feedback, setting it apart from other
-							educational tools.
+							{translations[$lang].realTime}
 						</p>
 						<p>
-							We chose the name Hinagiku because it reflects our core values:
-							<span class="font-medium text-gray-900">resilience, simplicity, and growth</span>—much
-							like the daisy flower itself, which flourishes in diverse conditions.
+							{translations[$lang].coreValues}
 						</p>
 						<p>
-							Our mission is to help participants and hosts connect meaningfully by providing tools
-							that facilitate better communication and collaboration in classrooms.
+							{translations[$lang].mission}
 						</p>
 					</div>
 				</div>
@@ -254,10 +355,9 @@
 	<div class="bg-white py-24">
 		<div class="mx-auto max-w-6xl px-4">
 			<div class="text-center">
-				<h2 class="mb-4 text-3xl font-bold text-gray-900">Open Source</h2>
+				<h2 class="mb-4 text-3xl font-bold text-gray-900">{translations[$lang].openSource}</h2>
 				<p class="mx-auto mb-8 max-w-2xl text-xl text-gray-600">
-					Hinagiku is open source and available on GitHub. We welcome contributions from the
-					community!
+					{translations[$lang].openSourceDesc}
 				</p>
 				<Button
 					size="xl"
@@ -267,7 +367,7 @@
 					rel="noopener noreferrer"
 				>
 					<Github />
-					View on GitHub
+					{translations[$lang].viewOnGitHub}
 				</Button>
 			</div>
 		</div>
diff --git a/src/routes/dashboard/+page.svelte b/src/routes/dashboard/+page.svelte
index 60c8f99..7d65a77 100644
--- a/src/routes/dashboard/+page.svelte
+++ b/src/routes/dashboard/+page.svelte
@@ -27,6 +27,8 @@
 	import TemplateCard from '$lib/components/TemplateCard.svelte';
 	import SessionCard from '$lib/components/SessionCard.svelte';
 
+	import { language } from '$lib/stores/language'; // Import the global language store
+
 	let { data } = $props();
 
 	// Query for user's templates
@@ -140,6 +142,57 @@
 		unsubscribe2();
 		unsubscribe3();
 	});
+
+	const translations = {
+		en: {
+			welcome: 'Welcome to Hinagiku!',
+			profile: 'Profile',
+			dashboard: 'Dashboard',
+			signOut: 'Sign out',
+			login: 'Login',
+			welcomeDashboard: 'Welcome to your dashboard',
+			stats: 'Statistics',
+			recentActivity: 'Recent Activity',
+			createTemplate: 'Create Template',
+			createTemplateDesc: 'Create a new discussion template',
+			joinSession: 'Join Session',
+			joinSessionDesc: 'Join an existing discussion session',
+			editProfile: 'Edit Profile',
+			editProfileDesc: 'Update your profile settings',
+			publicTemplates: 'Public Templates',
+			viewAll: 'View All',
+			yourTemplates: 'Your Templates',
+			noTemplates: 'No templates created yet',
+			createFirstTemplate: 'Create your first template to get started',
+			createTemplateButton: 'Create Your First Template',
+			noSessions: 'No sessions created yet',
+			createSession: 'Create a new session with template'
+		},
+		zh: {
+			welcome: '歡迎來到Hinagiku!',
+			profile: '個人資料',
+			dashboard: '儀表板',
+			signOut: '登出',
+			login: '登入',
+			welcomeDashboard: '歡迎來到您的儀表板',
+			stats: '統計數據',
+			recentActivity: '最近活動',
+			createTemplate: '創建模板',
+			createTemplateDesc: '創建一個新的討論模板',
+			joinSession: '加入會話',
+			joinSessionDesc: '加入現有的討論會話',
+			editProfile: '編輯個人資料',
+			editProfileDesc: '更新您的個人資料設置',
+			publicTemplates: '公開模板',
+			viewAll: '查看全部',
+			yourTemplates: '您的模板',
+			noTemplates: '尚未創建模板',
+			createFirstTemplate: '創建您的第一個模板以開始',
+			createTemplateButton: '創建您的第一個模板',
+			noSessions: '尚未創建會話',
+			createSession: '使用模板創建新會話'
+		}
+	};
 </script>
 
 <svelte:head>
@@ -148,8 +201,10 @@
 
 <main class="mx-auto max-w-6xl px-4 py-16">
 	<div class="mb-12">
-		<h1 class="text-3xl font-bold text-gray-900">Dashboard</h1>
-		<p class="mt-2 text-gray-600">Welcome back, {$profile?.displayName || $user?.displayName}</p>
+		<h1 class="text-3xl font-bold text-gray-900">{translations[$language].dashboard}</h1>
+		<p class="mt-2 text-gray-600">
+			{translations[$language].welcomeDashboard}, {$profile?.displayName || $user?.displayName}
+		</p>
 	</div>
 
 	<!-- Main Actions -->
@@ -159,8 +214,10 @@
 				<div class="mb-4 rounded-full bg-primary-100 p-4">
 					<MessageSquarePlus size={32} class="text-primary-600" />
 				</div>
-				<h2 class="mb-2 text-xl font-semibold text-gray-900">Create Template</h2>
-				<p class="text-gray-600">Create a new discussion template</p>
+				<h2 class="mb-2 text-xl font-semibold text-gray-900">
+					{translations[$language].createTemplate}
+				</h2>
+				<p class="text-gray-600">{translations[$language].createTemplateDesc}</p>
 			</button>
 		</Card>
 
@@ -169,8 +226,10 @@
 				<div class="mb-4 rounded-full bg-primary-100 p-4">
 					<UserPlus size={32} class="text-primary-600" />
 				</div>
-				<h2 class="mb-2 text-xl font-semibold text-gray-900">Join Session</h2>
-				<p class="text-gray-600">Join an existing discussion session</p>
+				<h2 class="mb-2 text-xl font-semibold text-gray-900">
+					{translations[$language].joinSession}
+				</h2>
+				<p class="text-gray-600">{translations[$language].joinSessionDesc}</p>
 			</a>
 		</Card>
 
@@ -179,8 +238,10 @@
 				<div class="mb-4 rounded-full bg-primary-100 p-4">
 					<UserCog size={32} class="text-primary-600" />
 				</div>
-				<h2 class="mb-2 text-xl font-semibold text-gray-900">Edit Profile</h2>
-				<p class="text-gray-600">Update your profile settings</p>
+				<h2 class="mb-2 text-xl font-semibold text-gray-900">
+					{translations[$language].editProfile}
+				</h2>
+				<p class="text-gray-600">{translations[$language].editProfileDesc}</p>
 			</a>
 		</Card>
 	</div>
@@ -188,8 +249,11 @@
 	<!-- Public Templates -->
 	<div class="mb-16">
 		<div class="mb-6 flex items-center justify-between">
-			<h2 class="text-2xl font-semibold text-gray-900">Public Templates</h2>
-			<Button color="alternative" href="/templates/public">View All</Button>
+			<h2 class="text-2xl font-semibold text-gray-900">
+				{translations[$language].publicTemplates}
+			</h2>
+			<Button color="alternative" href="/templates/public">{translations[$language].viewAll}</Button
+			>
 		</div>
 		<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
 			{#if $publicTemplates?.length}
@@ -210,9 +274,11 @@
 						<div class="text-center">
 							<h3 class="mb-2 text-xl font-bold">Example Template</h3>
 							<p class="mb-4 text-gray-600">
-								Create and share your own templates with the community
+								{translations[$language].createFirstTemplate}
 							</p>
-							<Button href="/create" class="w-full">Create Template</Button>
+							<Button href="/create" class="w-full"
+								>{translations[$language].createTemplateButton}</Button
+							>
 						</div>
 					</Card>
 				{/each}
@@ -223,8 +289,8 @@
 	<!-- Your Templates -->
 	<div>
 		<div class="mb-6 flex items-center justify-between">
-			<h2 class="text-2xl font-semibold text-gray-900">Your Templates</h2>
-			<Button color="alternative" href="/templates">View All</Button>
+			<h2 class="text-2xl font-semibold text-gray-900">{translations[$language].yourTemplates}</h2>
+			<Button color="alternative" href="/templates">{translations[$language].viewAll}</Button>
 		</div>
 		<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
 			{#if $templates?.length}
@@ -245,10 +311,12 @@
 						<div class="mb-4 inline-flex rounded-full bg-primary-100 p-4">
 							<MessageSquarePlus size={32} class="text-primary-600" />
 						</div>
-						<p class="mb-2 text-lg font-medium text-gray-900">No templates created yet</p>
-						<p class="mb-4 text-gray-600">Create your first template to get started</p>
+						<p class="mb-2 text-lg font-medium text-gray-900">
+							{translations[$language].noTemplates}
+						</p>
+						<p class="mb-4 text-gray-600">{translations[$language].createFirstTemplate}</p>
 						<Button onclick={handleCreateTemplate} color="primary"
-							>Create Your First Template</Button
+							>{translations[$language].createTemplateButton}</Button
 						>
 					</div>
 				</Card>
@@ -259,8 +327,10 @@
 	<!-- Recent Session -->
 	<div class="mt-16">
 		<div class="mb-6 flex items-center justify-between">
-			<h2 class="text-2xl font-semibold text-gray-900">Recent Host Sessions</h2>
-			<Button color="alternative" href="/dashboard/recent/host">View All</Button>
+			<h2 class="text-2xl font-semibold text-gray-900">{translations[$language].recentActivity}</h2>
+			<Button color="alternative" href="/dashboard/recent/host"
+				>{translations[$language].viewAll}</Button
+			>
 		</div>
 		<div class="mb-4 flex flex-wrap gap-2">
 			{#each $availableLabels as label}
@@ -291,8 +361,10 @@
 						<div class="mb-4 inline-flex rounded-full bg-primary-100 p-4">
 							<MessageSquarePlus size={32} class="text-primary-600" />
 						</div>
-						<p class="mb-2 text-lg font-medium text-gray-900">No sessions created yet</p>
-						<p class="mb-4 text-gray-600">Create a new session with template</p>
+						<p class="mb-2 text-lg font-medium text-gray-900">
+							{translations[$language].noSessions}
+						</p>
+						<p class="mb-4 text-gray-600">{translations[$language].createSession}</p>
 					</div>
 				</Card>
 			{/if}
@@ -303,8 +375,12 @@
 	{#if $sessions.length}
 		<div class="mt-16">
 			<div class="mb-6 flex items-center justify-between">
-				<h2 class="text-2xl font-semibold text-gray-900">Recent Participant Sessions</h2>
-				<Button color="alternative" href="/dashboard/recent/participant">View All</Button>
+				<h2 class="text-2xl font-semibold text-gray-900">
+					{translations[$language].recentActivity}
+				</h2>
+				<Button color="alternative" href="/dashboard/recent/participant"
+					>{translations[$language].viewAll}</Button
+				>
 			</div>
 			<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
 				{#each $sessions as [id, session]}
diff --git a/src/routes/join/+page.svelte b/src/routes/join/+page.svelte
index 77f6dd9..0766e7d 100644
--- a/src/routes/join/+page.svelte
+++ b/src/routes/join/+page.svelte
@@ -4,6 +4,7 @@
 	import { notifications } from '$lib/stores/notifications';
 	import { getDoc, doc } from 'firebase/firestore';
 	import { db } from '$lib/firebase';
+	import { language } from '$lib/stores/language'; // Import the global language store
 
 	async function handleScan(code: string) {
 		try {
@@ -40,6 +41,23 @@
 			console.error(e);
 		}
 	}
+
+	const translations = {
+		en: {
+			joinSession: 'Join Discussion Session',
+			scanQr: 'Scan the QR code provided by your session host to join the discussion.',
+			enterCode: 'Or please enter the 6-digits code to join.',
+			joinButton: 'Join Session',
+			enterCodePlaceholder: 'Enter code'
+		},
+		zh: {
+			joinSession: '加入討論會話',
+			scanQr: '掃描會話主持人提供的二維碼以加入討論。',
+			enterCode: '或者請輸入6位數的代碼以加入。',
+			joinButton: '加入會話',
+			enterCodePlaceholder: '輸入代碼'
+		}
+	};
 </script>
 
 <svelte:head>
@@ -47,21 +65,21 @@
 </svelte:head>
 
 <main class="mx-auto max-w-2xl px-4 py-16">
-	<h1 class="mb-8 text-3xl font-bold">Join Discussion Session</h1>
+	<h1 class="mb-8 text-3xl font-bold">{translations[$language].joinSession}</h1>
 
 	<div class="space-y-6">
 		<p class="text-gray-600">
-			Scan the QR code provided by your session host to join the discussion.
+			{translations[$language].scanQr}
 		</p>
 
 		<QrScanner onScan={handleScan} />
 	</div>
 	<!--Input Code-->
 	<div class="mt-8 flex flex-col gap-4">
-		<p class="text-gray-600">Or please enter the 6-digits code to join.</p>
+		<p class="text-gray-600">{translations[$language].enterCode}</p>
 		<input
 			type="text"
-			placeholder="Enter code"
+			placeholder={translations[$language].enterCodePlaceholder}
 			maxlength="6"
 			pattern="\d{6}"
 			class="w-full rounded-lg border py-2"
@@ -73,7 +91,7 @@
 			class="w-full rounded-lg border px-6 py-2 hover:bg-gray-50"
 			onclick={joinwithcode}
 		>
-			Join Session
+			{translations[$language].joinButton}
 		</button>
 	</div>
 </main>
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 30254ac..b662d28 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -1,13 +1,29 @@
 <script lang="ts">
 	import Auth from '$lib/components/Auth.svelte';
 	import { Card } from 'flowbite-svelte';
+	import { language } from '$lib/stores/language'; // Import the global language store
+
+	const translations = {
+		en: {
+			welcome: 'Welcome to Hinagiku!',
+			login: 'Sign in with your Google account to get started',
+			button: 'Login',
+			back: '← Back to home'
+		},
+		zh: {
+			welcome: '歡迎來到Hinagiku!',
+			login: '使用您的Google帳戶登入',
+			button: 'login',
+			back: '← 返回首頁'
+		}
+	};
 </script>
 
 <main class="min-h-screen bg-gradient-to-b from-primary-50 to-white">
 	<div class="mx-auto flex min-h-screen max-w-md flex-col items-center justify-center px-4 py-16">
 		<div class="mb-8 text-center">
-			<h1 class="mb-2 text-3xl font-bold text-gray-900">Welcome to Hinagiku</h1>
-			<p class="text-gray-600">Sign in with your Google account to get started</p>
+			<h1 class="mb-2 text-3xl font-bold text-gray-900">{translations[$language].welcome}</h1>
+			<p class="text-gray-600">{translations[$language].login}</p>
 		</div>
 
 		<Card class="w-full p-6 shadow-lg">
@@ -15,7 +31,7 @@
 		</Card>
 
 		<p class="mt-8 text-center text-sm text-gray-600">
-			<a href="/" class="text-primary-600 hover:underline">← Back to home</a>
+			<a href="/" class="text-primary-600 hover:underline">{translations[$language].back}</a>
 		</p>
 	</div>
 </main>
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
index 63d9397..ee5fcc6 100644
--- a/src/routes/profile/+page.svelte
+++ b/src/routes/profile/+page.svelte
@@ -3,19 +3,53 @@
 	import { profile } from '$lib/stores/profile';
 	import { Button, Label, Input, Textarea, Card, Alert } from 'flowbite-svelte';
 	import { CheckCircle, XCircle } from 'lucide-svelte';
+	import { language } from '$lib/stores/language'; // Import the global language store
 
 	let { form, data } = $props();
 	let loading = $state(false);
+
+	const translations = {
+		en: {
+			profileSettings: 'Profile Settings',
+			updateInfo: 'Update your personal information and preferences',
+			successMessage: 'Profile updated successfully!',
+			errorMessage: 'Cannot update profile. Please try again later.',
+			displayName: 'Display Name',
+			title: 'Title',
+			titlePlaceholder: 'e.g. Professor, Student, Teaching Assistant',
+			bio: 'Bio',
+			bioPlaceholder: 'Tell us about yourself',
+			bioHelp: 'Write a short bio to help others know more about you',
+			cancel: 'Cancel',
+			saveChanges: 'Save Changes',
+			saving: 'Saving...'
+		},
+		zh: {
+			profileSettings: '個人資料設置',
+			updateInfo: '更新您的個人資料和偏好',
+			successMessage: '個人資料更新成功！',
+			errorMessage: '無法更新個人資料。請稍後再試。',
+			displayName: '顯示名稱',
+			title: '職稱',
+			titlePlaceholder: '例如：教授、學生、助教',
+			bio: '簡介',
+			bioPlaceholder: '介紹一下你自己',
+			bioHelp: '寫一個簡短的簡介，幫助其他人更好地了解你',
+			cancel: '取消',
+			saveChanges: '保存更改',
+			saving: '保存中...'
+		}
+	};
 </script>
 
 <svelte:head>
-	<title>Profile Settings | Hinagiku</title>
+	<title>{translations[$language].profileSettings} | Hinagiku</title>
 </svelte:head>
 
 <main class="mx-auto max-w-2xl px-4 py-16">
 	<div class="mb-8">
-		<h1 class="text-3xl font-bold text-gray-900">Profile Settings</h1>
-		<p class="mt-2 text-gray-600">Update your personal information and preferences</p>
+		<h1 class="text-3xl font-bold text-gray-900">{translations[$language].profileSettings}</h1>
+		<p class="mt-2 text-gray-600">{translations[$language].updateInfo}</p>
 	</div>
 
 	{#if form}
@@ -24,14 +58,14 @@
 				<svelte:fragment slot="icon">
 					<CheckCircle class="h-4 w-4" />
 				</svelte:fragment>
-				Profile updated successfully!
+				{translations[$language].successMessage}
 			</Alert>
 		{:else}
 			<Alert color="red" class="mb-6">
 				<svelte:fragment slot="icon">
 					<XCircle class="h-4 w-4" />
 				</svelte:fragment>
-				Cannot update profile. Please try again later.
+				{translations[$language].errorMessage}
 			</Alert>
 		{/if}
 	{/if}
@@ -50,7 +84,7 @@
 				class="space-y-6"
 			>
 				<div>
-					<Label for="displayName" class="mb-2">Display Name</Label>
+					<Label for="displayName" class="mb-2">{translations[$language].displayName}</Label>
 					<Input
 						type="text"
 						id="displayName"
@@ -61,34 +95,34 @@
 				</div>
 
 				<div>
-					<Label for="title" class="mb-2">Title</Label>
+					<Label for="title" class="mb-2">{translations[$language].title}</Label>
 					<Input
 						type="text"
 						id="title"
 						name="title"
 						value={$profile?.title ?? ''}
-						placeholder="e.g. Professor, Student, Teaching Assistant"
+						placeholder={translations[$language].titlePlaceholder}
 					/>
 				</div>
 
 				<div>
-					<Label for="bio" class="mb-2">Bio</Label>
+					<Label for="bio" class="mb-2">{translations[$language].bio}</Label>
 					<Textarea
 						id="bio"
 						name="bio"
 						value={$profile?.bio ?? ''}
 						rows={4}
-						placeholder="Tell us about yourself"
+						placeholder={translations[$language].bioPlaceholder}
 					/>
 					<p class="mt-2 text-sm text-gray-600">
-						Write a short bio to help others know more about you
+						{translations[$language].bioHelp}
 					</p>
 				</div>
 
 				<div class="flex justify-end gap-4">
-					<Button href="/dashboard" color="light">Cancel</Button>
+					<Button href="/dashboard" color="light">{translations[$language].cancel}</Button>
 					<Button type="submit" disabled={loading}>
-						{loading ? 'Saving...' : 'Save Changes'}
+						{loading ? translations[$language].saving : translations[$language].saveChanges}
 					</Button>
 				</div>
 			</form>
diff --git a/src/routes/session/[id]/+page.svelte b/src/routes/session/[id]/+page.svelte
index 205963a..46d9902 100644
--- a/src/routes/session/[id]/+page.svelte
+++ b/src/routes/session/[id]/+page.svelte
@@ -6,11 +6,21 @@
 	import ParticipantView from '$lib/components/session/ParticipantView.svelte';
 	import LabelManager from '$lib/components/session/LabelManager.svelte';
 	import { page } from '$app/stores';
+	import { language } from '$lib/stores/language'; // Import the global language store
 
 	let { data } = $props();
 	let session = getContext<Readable<Session>>('session');
 	let isHost = $derived($session?.host === data.user.uid);
 	let sessionId = $page.params.id;
+
+	const translations = {
+		en: {
+			sessionLabels: 'Session Labels'
+		},
+		zh: {
+			sessionLabels: '會話標籤'
+		}
+	};
 </script>
 
 <svelte:head>
@@ -22,7 +32,7 @@
 		<HostView {session} />
 		{#if $session.status === 'preparing' && isHost}
 			<div class="mb-8">
-				<h3 class="mb-4 text-lg font-semibold">Session Labels</h3>
+				<h3 class="mb-4 text-lg font-semibold">{translations[$language].sessionLabels}</h3>
 				<LabelManager {sessionId} labels={$session.labels || []} />
 			</div>
 		{/if}
diff --git a/src/routes/session/[id]/discussion/[userId]/+page.svelte b/src/routes/session/[id]/discussion/[userId]/+page.svelte
index fe8856a..8bb555f 100644
--- a/src/routes/session/[id]/discussion/[userId]/+page.svelte
+++ b/src/routes/session/[id]/discussion/[userId]/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { language } from '$lib/stores/language'; // Import the global language store
+
 	let messages = $state([{ sender: 'Support', text: 'Hello! How can I assist you today?' }]);
 	let inputText = $state('');
 	import { Mic } from 'lucide-svelte';
@@ -8,6 +10,19 @@
 	const sendMessage = () => {
 		console.log('Sending message...');
 	};
+
+	const translations = {
+		en: {
+			typeMessage: 'Type your message...',
+			send: 'Send',
+			waitResponse: 'Please wait for a response...'
+		},
+		zh: {
+			typeMessage: '輸入您的消息...',
+			send: '發送',
+			waitResponse: '請等待回應...'
+		}
+	};
 </script>
 
 <svelte:head>
@@ -45,15 +60,15 @@
 				class="inline-block"
 				type="text"
 				bind:value={inputText}
-				placeholder="Type your message..."
+				placeholder={translations[$language].typeMessage}
 				onkeyup={(e) => e.key === 'Enter' && sendMessage()}
 			/>
-			<button disabled={messages[messages.length - 1].sender === 'me'} onclick={sendMessage}
-				>Send</button
-			>
+			<button disabled={messages[messages.length - 1].sender === 'me'} onclick={sendMessage}>
+				{translations[$language].send}
+			</button>
 			<div class="w-full"></div>
 			{#if messages[messages.length - 1].sender === 'me'}
-				<div>Please wait for a response...</div>
+				<div>{translations[$language].waitResponse}</div>
 			{/if}
 		</div>
 	</div>
diff --git a/src/routes/session/[id]/participant/+page.svelte b/src/routes/session/[id]/participant/+page.svelte
index 2c8f8f7..5140172 100644
--- a/src/routes/session/[id]/participant/+page.svelte
+++ b/src/routes/session/[id]/participant/+page.svelte
@@ -1,4 +1,13 @@
 <script lang="ts">
+	import { language } from '$lib/stores/language'; // Import the global language store
+	const translations = {
+		en: {
+			waitResponse: 'Please wait for other participants...'
+		},
+		zh: {
+			waitResponse: '請等待其他參與者...'
+		}
+	};
 </script>
 
-<main class="mx-auto max-w-4xl px-4 py-8">等待其他同學</main>
+<main class="mx-auto max-w-4xl px-4 py-8">{translations[$language].waitResponse}</main>
diff --git a/src/routes/session/[id]/status/+page.svelte b/src/routes/session/[id]/status/+page.svelte
index 5a023e5..ac39be3 100644
--- a/src/routes/session/[id]/status/+page.svelte
+++ b/src/routes/session/[id]/status/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Alert } from 'flowbite-svelte';
+	import { language } from '$lib/stores/language'; // Import the global language store
 
 	interface Participant {
 		id: string;
@@ -17,19 +18,32 @@
 
 	// 確保 groups 不為 undefined
 	const groups = data.groups || [];
+
+	const translations = {
+		en: {
+			dashboardTitle: 'Participant Status Dashboard',
+			loadingGroups: 'Loading groups...',
+			noParticipants: 'No participants in this group.'
+		},
+		zh: {
+			dashboardTitle: '參與者狀態儀表板',
+			loadingGroups: '載入小組...',
+			noParticipants: '此小組中沒有參與者。'
+		}
+	};
 </script>
 
 <div class="container mx-auto max-w-4xl px-4 py-8">
-	<h2 class="mb-4 text-3xl font-bold">Participant Status Dashboard</h2>
+	<h2 class="mb-4 text-3xl font-bold">{translations[$language].dashboardTitle}</h2>
 	{#if groups.length === 0}
-		<Alert color="blue">Loading groups...</Alert>
+		<Alert color="blue">{translations[$language].loadingGroups}</Alert>
 	{:else}
 		<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
 			{#each groups as group, index}
 				<div class="group mb-8">
 					<h3 class="mb-4 text-2xl font-semibold">Group #{index + 1}</h3>
 					{#if group.participants.length === 0}
-						<Alert color="blue">No participants in this group.</Alert>
+						<Alert color="blue">{translations[$language].noParticipants}</Alert>
 					{:else}
 						<ul class="space-y-4">
 							{#each group.participants as participant}
diff --git a/src/routes/template/[id]/+page.svelte b/src/routes/template/[id]/+page.svelte
index f6c78ba..d5f4bdc 100644
--- a/src/routes/template/[id]/+page.svelte
+++ b/src/routes/template/[id]/+page.svelte
@@ -10,6 +10,7 @@
 	import { subscribe } from '$lib/firebase/store';
 	import { goto } from '$app/navigation';
 	import { notifications } from '$lib/stores/notifications';
+	import { language } from '$lib/stores/language'; // Import the global language store
 
 	let title = '';
 	let task = '';
@@ -127,50 +128,105 @@
 			notifications.error('Failed to delete template');
 		}
 	}
+
+	const translations = {
+		en: {
+			editTemplate: 'Edit Template',
+			startSession: 'Start Session',
+			saveChanges: 'Save changes before starting a session',
+			startDiscussion: 'Start a discussion session with this template',
+			title: 'Title',
+			templateTitle: 'Template title',
+			mainTask: 'Main Task',
+			mainTaskDesc: 'Main task description',
+			subtasks: 'Subtasks',
+			subtaskDesc: 'Subtask description',
+			addSubtask: 'Add Subtask',
+			makePublic: 'Make template public',
+			backToDashboard: 'Back to Dashboard',
+			unsavedChanges: 'You have unsaved changes!',
+			deleteTemplate: 'Delete this Template',
+			saveChangesButton: 'Save Changes',
+			allChangesSaved: 'All changes saved',
+			deleteConfirmation: 'Are you sure you want to delete this template?',
+			yesDelete: 'Yes, delete it',
+			noCancel: 'No, cancel',
+			loadingTemplate: 'Loading template...'
+		},
+		zh: {
+			editTemplate: '編輯模板',
+			startSession: '開始會話',
+			saveChanges: '保存更改後再開始會話',
+			startDiscussion: '使用此模板開始討論會話',
+			title: '標題',
+			templateTitle: '模板標題',
+			mainTask: '主要任務',
+			mainTaskDesc: '主要任務描述',
+			subtasks: '子任務',
+			subtaskDesc: '子任務描述',
+			addSubtask: '添加子任務',
+			makePublic: '將模板設為公開',
+			backToDashboard: '返回儀表板',
+			unsavedChanges: '您有未保存的更改！',
+			deleteTemplate: '刪除此模板',
+			saveChangesButton: '保存更改',
+			allChangesSaved: '所有更改已保存',
+			deleteConfirmation: '您確定要刪除此模板嗎？',
+			yesDelete: '是的，刪除它',
+			noCancel: '不，取消',
+			loadingTemplate: '加載模板...'
+		}
+	};
 </script>
 
 <svelte:head>
-	<title>Edit Template | Hinagiku</title>
+	<title>{translations[$language].editTemplate} | Hinagiku</title>
 </svelte:head>
 
 {#if template}
 	<div class="container mx-auto max-w-4xl px-4 py-8">
 		<div class="mb-8 flex items-center justify-between">
-			<h1 class="text-3xl font-bold">Edit Template</h1>
+			<h1 class="text-3xl font-bold">{translations[$language].editTemplate}</h1>
 			<Button color="primary" on:click={startSession} disabled={isUploading || unsavedChanges}>
 				<Play class="mr-2 h-4 w-4" />
-				Start Session
+				{translations[$language].startSession}
 			</Button>
 			<Tooltip placement="left">
 				{#if unsavedChanges}
-					Save changes before starting a session
+					{translations[$language].saveChanges}
 				{:else}
-					Start a discussion session with this template
+					{translations[$language].startDiscussion}
 				{/if}
 			</Tooltip>
 		</div>
 
 		<form on:submit|preventDefault={saveTemplate} class="space-y-6">
 			<div>
-				<label for="title" class="mb-2 block">Title</label>
-				<Input id="title" bind:value={title} required maxlength={50} placeholder="Template title" />
+				<label for="title" class="mb-2 block">{translations[$language].title}</label>
+				<Input
+					id="title"
+					bind:value={title}
+					required
+					maxlength={50}
+					placeholder={translations[$language].templateTitle}
+				/>
 			</div>
 
 			<div>
-				<label for="task" class="mb-2 block">Main Task</label>
+				<label for="task" class="mb-2 block">{translations[$language].mainTask}</label>
 				<Textarea
 					id="task"
 					bind:value={task}
 					required
 					maxlength={200}
 					rows={3}
-					placeholder="Main task description"
+					placeholder={translations[$language].mainTaskDesc}
 				/>
 			</div>
 
 			<div>
 				<!-- svelte-ignore a11y_label_has_associated_control -->
-				<label class="mb-4 block">Subtasks</label>
+				<label class="mb-4 block">{translations[$language].subtasks}</label>
 				<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
 				{#each subtasks as subtask, i}
 					<div class="mb-2 flex gap-2">
@@ -178,7 +234,7 @@
 							bind:value={subtasks[i]}
 							required
 							maxlength={200}
-							placeholder="Subtask description"
+							placeholder={translations[$language].subtaskDesc}
 						/>
 						<Button color="red" on:click={() => removeSubtask(i)} disabled={subtasks.length <= 1}>
 							<Trash2 class="h-4 w-4" />
@@ -192,13 +248,13 @@
 					class="mt-2"
 				>
 					<Plus class="mr-2 h-4 w-4" />
-					Add Subtask
+					{translations[$language].addSubtask}
 				</Button>
 			</div>
 
 			<div class="flex items-center gap-2">
 				<Toggle bind:checked={isPublic} />
-				<label for="public">Make template public</label>
+				<label for="public">{translations[$language].makePublic}</label>
 			</div>
 
 			<div class="border-t pt-6">
@@ -211,39 +267,41 @@
 
 			<div class="flex justify-end gap-4 border-t pt-6">
 				<Button color="alternative" href="/dashboard" disabled={isUploading}>
-					Back to Dashboard
+					{translations[$language].backToDashboard}
 				</Button>
 				{#if unsavedChanges}
-					<Tooltip>You have unsaved changes!</Tooltip>
+					<Tooltip>{translations[$language].unsavedChanges}</Tooltip>
 				{/if}
 				<Button color="red" on:click={() => (showDeleteModal = true)} disabled={isUploading}>
 					<Trash2 class="mr-2 h-4 w-4" />
-					Delete this Template
+					{translations[$language].deleteTemplate}
 				</Button>
 				<Button type="submit" color="primary" disabled={isUploading || !unsavedChanges}>
 					<Save class="mr-2 h-4 w-4" />
-					Save Changes
+					{translations[$language].saveChangesButton}
 				</Button>
 				{#if !unsavedChanges}
-					<Tooltip>All changes saved</Tooltip>
+					<Tooltip>{translations[$language].allChangesSaved}</Tooltip>
 				{/if}
 			</div>
 		</form>
 	</div>
 {:else}
 	<div class="container mx-auto px-4 py-8">
-		<div class="text-center text-gray-500">Loading template...</div>
+		<div class="text-center text-gray-500">{translations[$language].loadingTemplate}</div>
 	</div>
 {/if}
 
 <Modal bind:open={showDeleteModal} size="xs" autoclose>
 	<div class="text-center">
 		<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
-			Are you sure you want to delete this template?
+			{translations[$language].deleteConfirmation}
 		</h3>
 		<div class="flex justify-center gap-4">
-			<Button color="red" on:click={deleteTemplate}>Yes, delete it</Button>
-			<Button color="alternative" on:click={() => (showDeleteModal = false)}>No, cancel</Button>
+			<Button color="red" on:click={deleteTemplate}>{translations[$language].yesDelete}</Button>
+			<Button color="alternative" on:click={() => (showDeleteModal = false)}
+				>{translations[$language].noCancel}</Button
+			>
 		</div>
 	</div>
 </Modal>
diff --git a/src/routes/template/[id]/view/+page.svelte b/src/routes/template/[id]/view/+page.svelte
index 436b8ad..26a7820 100644
--- a/src/routes/template/[id]/view/+page.svelte
+++ b/src/routes/template/[id]/view/+page.svelte
@@ -2,10 +2,32 @@
 	import { Badge, Accordion, AccordionItem } from 'flowbite-svelte';
 	import { Link, FileText, File } from 'lucide-svelte';
 	import type { ResourceType } from '$lib/schema/resource';
+	import { language } from '$lib/stores/language'; // Import the global language store
 
 	export let data;
 	const { template } = data;
 
+	const translations = {
+		en: {
+			taskDescription: 'Task Description',
+			subtasks: 'Subtasks',
+			resources: 'Resources',
+			noResources: 'No resources available',
+			public: 'Public',
+			private: 'Private',
+			lastUpdated: 'Last updated'
+		},
+		zh: {
+			taskDescription: '任務描述',
+			subtasks: '子任務',
+			resources: '資源',
+			noResources: '沒有可用資源',
+			public: '公開',
+			private: '私人',
+			lastUpdated: '最後更新時間'
+		}
+	};
+
 	function getResourceIcon(type: ResourceType) {
 		switch (type) {
 			case 'link':
@@ -30,11 +52,12 @@
 		<div class="mb-4 flex items-start justify-between">
 			<h1 class="text-4xl font-bold text-gray-900">{template.title}</h1>
 			<Badge color={template.public ? 'green' : 'none'} class="mt-2">
-				{template.public ? 'Public' : 'Private'}
+				{template.public ? translations[$language].public : translations[$language].private}
 			</Badge>
 		</div>
 		<div class="text-sm text-gray-500">
-			Last updated {new Date(template.updatedAt).toLocaleDateString()}
+			{translations[$language].lastUpdated}
+			{new Date(template.updatedAt).toLocaleDateString()}
 		</div>
 	</header>
 
@@ -42,7 +65,9 @@
 	<main class="space-y-8">
 		<!-- Task Description Section -->
 		<section>
-			<h2 class="mb-4 text-2xl font-semibold text-gray-800">Task Description</h2>
+			<h2 class="mb-4 text-2xl font-semibold text-gray-800">
+				{translations[$language].taskDescription}
+			</h2>
 			<div class="prose prose-gray max-w-none">
 				<p class="whitespace-pre-wrap leading-relaxed text-gray-700">
 					{template.task}
@@ -53,7 +78,9 @@
 		<!-- Subtasks Section -->
 		{#if template.subtasks && template.subtasks.length > 0}
 			<section class="border-t border-gray-100 pt-8">
-				<h2 class="mb-4 text-2xl font-semibold text-gray-800">Subtasks</h2>
+				<h2 class="mb-4 text-2xl font-semibold text-gray-800">
+					{translations[$language].subtasks}
+				</h2>
 				<ul class="space-y-3">
 					{#each template.subtasks as subtask, index}
 						<li class="flex items-start">
@@ -67,7 +94,7 @@
 
 		<!-- Resources Section -->
 		<section class="border-t border-gray-100 pt-8">
-			<h2 class="mb-4 text-2xl font-semibold text-gray-800">Resources</h2>
+			<h2 class="mb-4 text-2xl font-semibold text-gray-800">{translations[$language].resources}</h2>
 			{#if template.resources && template.resources.length > 0}
 				<div class="rounded-lg bg-gray-50">
 					<Accordion class="divide-y divide-gray-200">
@@ -114,7 +141,7 @@
 					</Accordion>
 				</div>
 			{:else}
-				<p class="italic text-gray-500">No resources available</p>
+				<p class="italic text-gray-500">{translations[$language].noResources}</p>
 			{/if}
 		</section>
 	</main>
diff --git a/static/icons/flag-us.png b/static/icons/flag-us.png
new file mode 100644
index 0000000..c62be25
Binary files /dev/null and b/static/icons/flag-us.png differ
diff --git a/static/icons/flag-zh.jpg b/static/icons/flag-zh.jpg
new file mode 100644
index 0000000..04174ba
Binary files /dev/null and b/static/icons/flag-zh.jpg differ