diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json
index 74c2a58..b415843 100644
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -13,6 +13,7 @@
 		"menu:default",
 		"tray:default",
 		"shell:allow-open",
+		"shell:allow-execute",
 		"dialog:default",
 		"dialog:allow-open",
 		{
diff --git a/src-tauri/src/model.rs b/src-tauri/src/model.rs
index 3ed3ef4..39776c7 100644
--- a/src-tauri/src/model.rs
+++ b/src-tauri/src/model.rs
@@ -127,6 +127,7 @@ pub enum PlatformKind {
     Kuaishou,
     Douyu,
     Twitch,
+    Youtube,
     Unknown,
 }
 
diff --git a/src/lib/components/button.svelte b/src/lib/components/button.svelte
index a74b3cc..ad0699b 100644
--- a/src/lib/components/button.svelte
+++ b/src/lib/components/button.svelte
@@ -5,18 +5,22 @@
 		onClick,
 		black,
 		white,
-		red
+		red,
+		autoFocus
 	}: {
-		children: any;
-		className: string;
+		children?: any;
+		className?: string;
 		onClick: any;
 		black?: boolean;
 		white?: boolean;
 		red?: boolean;
+		autoFocus?: boolean;
 	} = $props();
 </script>
 
+<!-- svelte-ignore a11y_autofocus -->
 <button
+	autofocus={autoFocus || false}
 	class={`rounded-full px-6 py-3 text-lg shadow-lg transition duration-200 hover:shadow-xl focus:scale-95 ${className} ${
 		black ? 'bg-black1 text-white1 hover:bg-black' : ''
 	} ${white ? 'bg-white1 text-black1 hover:bg-white' : ''} ${red ? 'bg-red-800 text-white1 hover:bg-red-700' : ''}`}
diff --git a/src/lib/components/dialog.svelte b/src/lib/components/dialog.svelte
index 7df19b0..b862035 100644
--- a/src/lib/components/dialog.svelte
+++ b/src/lib/components/dialog.svelte
@@ -2,7 +2,7 @@
 	let { children, text, id }: { children?: any; text: string; id: string } = $props();
 </script>
 
-<dialog {id} class="min-w-[500px] max-w-[600px] rounded-xl p-4 shadow-lg">
+<dialog {id} class="min-w-[500px] max-w-[800px] rounded-xl p-4 shadow-lg">
 	<h2 class="p-4 text-lg">{text}</h2>
 	<menu class="mt-16 flex justify-end gap-4 p-4">
 		{#if children}
diff --git a/src/lib/i18n/cn.json b/src/lib/i18n/cn.json
index 06ae681..2745ef6 100644
--- a/src/lib/i18n/cn.json
+++ b/src/lib/i18n/cn.json
@@ -31,7 +31,8 @@
 	"startRecord": "开始录制",
 	"anchor": "主播",
 	"notInLive": "当前不在播",
-	"addPlan": "加入录制计划，主播开播后自动录制",
+	"addPlan": "加入录制计划",
+	"addPlanTips": "加入录制计划后，主播开播后会自动录制",
 	"forceIgnoreError": "强制忽略错误，加入录制计划并自动重试",
 	"getRecordHistoryFailed": "获取录制历史失败",
 	"deleteSuccess": "删除成功",
@@ -105,5 +106,35 @@
 	"Twitch": "Twitch",
 	"Huya": "虎牙",
 	"Youtube": "Youtube",
-	"Xiaohongshu": "小红书"
+	"Xiaohongshu": "小红书",
+	"source": "原画",
+	"full_hd1": "全高清",
+	"hd1": "高清",
+	"uhd": "超高清",
+	"hd": "高清",
+	"hd-60": "高清60帧",
+	"hd-30": "高清30帧",
+	"hd_60": "高清60帧",
+	"hd_30": "高清30帧",
+	"sd1": "标清",
+	"sd": "标清",
+	"sd2": "标清",
+	"ld": "流畅",
+	"ld1": "流畅",
+	"ld2": "流畅",
+	"default": "默认",
+	"ao": "仅音频",
+	"720p60": "720p 60fps",
+	"720p30": "720p 30fps",
+	"1080p60": "1080p 60fps",
+	"1080p30": "1080p 30fps",
+	"480p30": "480p 30fps",
+	"360p30": "360p 30fps",
+	"240p30": "240p 30fps",
+	"144p30": "144p 30fps",
+	"160p30": "160p 30fps",
+	"uhd_60": "超高清60帧",
+	"recentSearch": "最近查询",
+	"tryThese": "不知道如何开始？试试这些",
+	"gotoRecordHistory": "去录制历史中查看"
 }
diff --git a/src/lib/i18n/en.json b/src/lib/i18n/en.json
index b58324f..ac4a733 100644
--- a/src/lib/i18n/en.json
+++ b/src/lib/i18n/en.json
@@ -28,7 +28,8 @@
 	"startRecord": "Start Recording",
 	"anchor": "Anchor",
 	"notInLive": "Not currently live",
-	"addPlan": "Add to recording plan, automatically record when the anchor starts broadcasting",
+	"addPlan": "Add to record plan",
+	"addPlanTips": "Add to record plan, the program will automatically record it according to the plan",
 	"forceIgnoreError": "Force ignore error, add to recording plan and auto retry",
 	"getRecordHistoryFailed": "Failed to get record history",
 	"deleteSuccess": "Delete successful",
@@ -105,5 +106,38 @@
 	"Twitch": "Twitch",
 	"Huya": "HuYa",
 	"Youtube": "Youtube",
-	"Xiaohongshu": "XiaoHongShu"
+	"Xiaohongshu": "XiaoHongShu",
+	"origin": "Original",
+	"source": "Original",
+	"full_hd1": "Full HD",
+	"FULL_HD1": "Full HD",
+	"hd1": "HD",
+	"uhd": "Ultra HD",
+	"hd": "HD",
+	"hd-60": "HD 60fps",
+	"hd-30": "HD 30fps",
+	"hd_60": "HD 60fps",
+	"hd_30": "HD 30fps",
+	"sd": "SD",
+	"sd1": "SD",
+	"sd2": "SD",
+	"SD2": "SD",
+	"ld": "Smooth",
+	"ld1": "Smooth",
+	"ld2": "Smooth",
+	"default": "Default",
+	"ao": "Audio only",
+	"720p60": "720p 60fps",
+	"720p30": "720p 30fps",
+	"1080p60": "1080p 60fps",
+	"1080p30": "1080p 30fps",
+	"480p30": "480p 30fps",
+	"360p30": "360p 30fps",
+	"240p30": "240p 30fps",
+	"144p30": "144p 30fps",
+	"160p30": "160p 30fps",
+	"uhd_60": "Ultra HD 60fps",
+	"recentSearch": "Recent search",
+	"tryThese": "Don't know how to start? Try these",
+	"gotoRecordHistory": "Go to record history to view"
 }
diff --git a/src/lib/platform/bilibili.ts b/src/lib/platform/bilibili.ts
index 1519058..04c4b06 100644
--- a/src/lib/platform/bilibili.ts
+++ b/src/lib/platform/bilibili.ts
@@ -1,6 +1,6 @@
 import { LiveStatus, PlatformKind, StreamingProtocol, type LiveInfo, type Stream } from '@/model';
 
-export function getLiveInfoForKuaishou(url: string, html: string): LiveInfo {
+export function getLiveInfoForBilibili(url: string, html: string): LiveInfo {
 	let info: LiveInfo = {
 		url,
 		title: '',
diff --git a/src/lib/platform/kuaishou.ts b/src/lib/platform/kuaishou.ts
index b5d285a..d01305c 100644
--- a/src/lib/platform/kuaishou.ts
+++ b/src/lib/platform/kuaishou.ts
@@ -1,6 +1,6 @@
 import { LiveStatus, PlatformKind, StreamingProtocol, type LiveInfo, type Stream } from '@/model';
 
-export function getLiveInfoForKuaishou(url: string, html: string): LiveInfo {
+export function getLiveInfoForKuaishou(url: string): LiveInfo {
 	let info: LiveInfo = {
 		url,
 		title: '',
@@ -12,14 +12,6 @@ export function getLiveInfoForKuaishou(url: string, html: string): LiveInfo {
 		platformKind: PlatformKind.Kuaishou,
 		status: LiveStatus.NotLive
 	};
-	// match <script>window.__INITIAL_STATE__=(.*?);\(function\(\)\{var s;
-	let jsonStr = html.match(/<script>window.__INITIAL_STATE__=(.*?);\(function\(\)\{var s;/);
-	if (!jsonStr || jsonStr.length < 2) {
-		return info;
-	}
-	let json = JSON.parse(jsonStr[1]);
-	console.log('kuaishou', json);
-
 	return info;
 }
 
diff --git a/src/lib/platform/youtube.ts b/src/lib/platform/youtube.ts
index 71f92f3..c929828 100644
--- a/src/lib/platform/youtube.ts
+++ b/src/lib/platform/youtube.ts
@@ -1,6 +1,7 @@
 import { LiveStatus, PlatformKind, StreamingProtocol, type LiveInfo, type Stream } from '@/model';
 import { invoke } from '@tauri-apps/api/core';
 import { JSONPath } from 'jsonpath-plus';
+import { fetch } from '@tauri-apps/plugin-http';
 
 export async function getLiveInfoForYoutube(url: string): Promise<LiveInfo> {
 	let info: LiveInfo = {
@@ -17,52 +18,89 @@ export async function getLiveInfoForYoutube(url: string): Promise<LiveInfo> {
 	try {
 		let videoId = url.split('v=')[1];
 		console.log('youtube video id', videoId);
-
-		const embedUrl = `https://www.youtube.com/embed/${videoId}`;
-		let resp = await invoke('request', { url: embedUrl, headers: {} });
-		console.log('embed', resp);
-
-		let channelIdArray = (resp as string).match(/\\"channelId\\":\\"(.{24})\\"/);
-		let channelId = channelIdArray ? channelIdArray[1] : '';
-
-		const apiUrl =
-			'https://www.youtube.com/youtubei/v1/browse?key=AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8';
-		let response = await invoke('request_post', {
-			url: apiUrl,
-			headers: {},
-			body: {
-				context: {
-					client: {
-						hl: 'zh-CN',
-						clientName: 'MWEB',
-						clientVersion: '2.20230101.00.00',
-						timeZone: 'Asia/Shanghai'
-					}
-				},
-				browseId: channelId,
-				params: 'EgdzdHJlYW1z8gYECgJ6AA%3D%3D'
+		let resp = await fetch(url, {
+			method: 'GET',
+			headers: {
+				'User-Agent':
+					'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'
 			}
 		});
-		// match $..videoWithContextRenderer
-		console.log('youtube api response', response);
-		let apiJson = JSON.parse(response as string);
-		console.log('youtube api response', apiJson);
-		let videoWithContextRederer = JSONPath({ path: '$..videoWithContextRenderer', json: apiJson });
-		console.log('videoWithContextRederer', videoWithContextRederer);
-		// 遍历 videoWithContextRederer，找到直播视频
-		for (let video of videoWithContextRederer) {
+		let html = await resp.text();
+		console.log('youtube html', html);
+
+		// _re_ytInitialPlayerResponse = re.compile(r"""var\s+ytInitialPlayerResponse\s*=\s*({.*?});\s*var\s+\w+\s*=""", re.DOTALL)
+		let data = html.match(/var\s+ytInitialPlayerResponse\s*=\s*({.*?});\s*var\s+\w+\s*=/);
+		console.log('youtube data', data);
+		if (!data || data.length < 2) {
+			return info;
+		}
+		const initialPlayerResponse = JSON.parse(data[1]);
+		const streamingData = initialPlayerResponse.streamingData;
+		console.log('youtube streaming data', streamingData);
+		if (!streamingData) {
+			return info;
+		}
+		info.status = LiveStatus.Live;
+		info.streams.push({
+			url: streamingData.hlsManifestUrl,
+			protocol: StreamingProtocol.Hls,
+			resolution: 'default'
+		});
+		// 遍历 streamingData.adaptiveFormats，全都放入 info.streams
+		for (let format of streamingData.adaptiveFormats) {
+			console.log('youtube format', format.signatureCipher);
+			info.streams.push({
+				url: format.signatureCipher.split('url=')[1],
+				protocol: StreamingProtocol.Hls,
+				resolution: format.quality
+			});
 		}
 
-		let channelUrl = `https://www.youtube.com/channel/${channelId}/videos`;
-		console.log('channel url', channelUrl);
-		let channelResp = await invoke('request', { url: channelUrl, headers: {} });
-		console.log('channel', channelResp);
-		//                 r'"gridVideoRenderer"((.(?!"gridVideoRenderer"))(?!"style":"UPCOMING"))+"label":"(LIVE|LIVE NOW|PREMIERING NOW)"([\s\S](?!"style":"UPCOMING"))+?("gridVideoRenderer"|</script>)',
-		let liveVideoArray = (channelResp as string).match(
-			/r'"gridVideoRenderer"((.(?!"gridVideoRenderer"))(?!"style":"UPCOMING"))+"label":"(LIVE|LIVE NOW|PREMIERING NOW)"([\s\S](?!"style":"UPCOMING"))+?("gridVideoRenderer"|<\/script>)/
-		);
-		console.log('liveVideoArray', liveVideoArray);
-		let liveVideo = liveVideoArray ? liveVideoArray[1] : '';
+		// const embedUrl = `https://www.youtube.com/embed/${videoId}`;
+		// let resp = await invoke('request', { url: embedUrl, headers: {} });
+		// console.log('embed', resp);
+
+		// let channelIdArray = (resp as string).match(/\\"channelId\\":\\"(.{24})\\"/);
+		// let channelId = channelIdArray ? channelIdArray[1] : '';
+
+		// const apiUrl =
+		// 	'https://www.youtube.com/youtubei/v1/browse?key=AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8';
+		// let response = await invoke('request_post', {
+		// 	url: apiUrl,
+		// 	headers: {},
+		// 	body: {
+		// 		context: {
+		// 			client: {
+		// 				hl: 'zh-CN',
+		// 				clientName: 'MWEB',
+		// 				clientVersion: '2.20230101.00.00',
+		// 				timeZone: 'Asia/Shanghai'
+		// 			}
+		// 		},
+		// 		browseId: channelId,
+		// 		params: 'EgdzdHJlYW1z8gYECgJ6AA%3D%3D'
+		// 	}
+		// });
+		// // match $..videoWithContextRenderer
+		// console.log('youtube api response', response);
+		// let apiJson = JSON.parse(response as string);
+		// console.log('youtube api response', apiJson);
+		// let videoWithContextRederer = JSONPath({ path: '$..videoWithContextRenderer', json: apiJson });
+		// console.log('videoWithContextRederer', videoWithContextRederer);
+		// // 遍历 videoWithContextRederer，找到直播视频
+		// for (let video of videoWithContextRederer) {
+		// }
+
+		// let channelUrl = `https://www.youtube.com/channel/${channelId}/videos`;
+		// console.log('channel url', channelUrl);
+		// let channelResp = await invoke('request', { url: channelUrl, headers: {} });
+		// console.log('channel', channelResp);
+		// //                 r'"gridVideoRenderer"((.(?!"gridVideoRenderer"))(?!"style":"UPCOMING"))+"label":"(LIVE|LIVE NOW|PREMIERING NOW)"([\s\S](?!"style":"UPCOMING"))+?("gridVideoRenderer"|</script>)',
+		// let liveVideoArray = (channelResp as string).match(
+		// 	/r'"gridVideoRenderer"((.(?!"gridVideoRenderer"))(?!"style":"UPCOMING"))+"label":"(LIVE|LIVE NOW|PREMIERING NOW)"([\s\S](?!"style":"UPCOMING"))+?("gridVideoRenderer"|<\/script>)/
+		// );
+		// console.log('liveVideoArray', liveVideoArray);
+		// let liveVideo = liveVideoArray ? liveVideoArray[1] : '';
 	} catch (e) {
 		console.error('get live info for tiktok failed: ', e);
 		// 抛出一个错误
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index d71f6bb..0d9f2db 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,7 @@
 import { PlatformKind, type LiveInfo } from './model';
 import { getLiveInfoForDouyin } from './platform/douyin';
 import { getLiveInfoForHuya } from './platform/huya';
+import { getLiveInfoForKuaishou } from './platform/kuaishou';
 import { getLiveInfoForTiktok } from './platform/tiktok';
 import { getLiveInfoForTwitch } from './platform/twitch';
 import { getLiveInfoForXiaohongshu } from './platform/xiaohongshu';
@@ -41,34 +42,6 @@ export function throttle<F extends (...args: any[]) => any>(
 	};
 }
 
-// 获取分辨率的中文表示
-export function getResolutionName(resolution: string) {
-	switch (resolution.toLowerCase()) {
-		case 'full_hd1':
-		case 'origin':
-			return '原画';
-		case 'hd1':
-		case 'uhd':
-		case 'hd':
-			return '超清';
-		case 'hd-60':
-			return '超清 60 帧';
-		case 'sd1':
-			return '高清';
-		case 'sd2':
-		case 'sd':
-			return '标清';
-		case 'ld':
-			return '流畅';
-		case 'default':
-			return '默认';
-		case 'ao':
-			return '仅音频';
-		default:
-			return resolution;
-	}
-}
-
 // 格式化显示文件尺寸
 export function formatFileSize(bytes: number) {
 	if (bytes === 0) return '0 B';
@@ -131,6 +104,8 @@ export function getPlatformKind(url: string): PlatformKind {
 			return PlatformKind.Twitch;
 		case url.startsWith('https://www.youtube.com/watch?v='):
 			return PlatformKind.Youtube;
+		case url.startsWith(''):
+			return PlatformKind.Kuaishou;
 		default:
 			return PlatformKind.Unknown;
 	}
@@ -152,6 +127,8 @@ export async function getLiveInfoForPlatform(url: string): Promise<LiveInfo> {
 			return getLiveInfoForYoutube(url);
 		case PlatformKind.Xiaohongshu:
 			return getLiveInfoForXiaohongshu(url);
+		case PlatformKind.Kuaishou:
+		  return getLiveInfoForKuaishou(url);
 		default:
 			throw new Error('unknown platform');
 	}
diff --git a/src/routes/config/+page.svelte b/src/routes/config/+page.svelte
index 8e7c1bb..0d06c97 100644
--- a/src/routes/config/+page.svelte
+++ b/src/routes/config/+page.svelte
@@ -6,6 +6,7 @@
 	import { invoke } from '@tauri-apps/api/core';
 	import { t } from '@/translations';
 	import { backOut } from 'svelte/easing';
+	import Button from '@/components/button.svelte';
 
 	let config: AppConfig | undefined = $state();
 	let rawConfig: AppConfig | undefined = $state();
@@ -139,13 +140,12 @@
 
 		<div class="flex items-center justify-center gap-8 p-8">
 			{#if changed}
-				<button
-					class="btn btn-wide"
-					onclick={() => (config = JSON.parse(JSON.stringify(rawConfig)))}>{$t('cancel')}</button
-				>
-				<button class="btn btn-primary btn-wide" onclick={async () => await setConfig()}
-					>{$t('save')}</button
+				<Button
+					white
+					className="w-36"
+					onClick={() => (config = JSON.parse(JSON.stringify(rawConfig)))}>{$t('cancel')}</Button
 				>
+				<Button white className="w-36" onClick={async () => await setConfig()}>{$t('save')}</Button>
 			{/if}
 		</div>
 	</div>
diff --git a/src/routes/live/+page.svelte b/src/routes/live/+page.svelte
index e154ce9..bbc9555 100644
--- a/src/routes/live/+page.svelte
+++ b/src/routes/live/+page.svelte
@@ -6,15 +6,19 @@
 	import { scale } from 'svelte/transition';
 	import { backOut } from 'svelte/easing';
 	import { onMount } from 'svelte';
+	import { Command } from '@tauri-apps/plugin-shell';
 
 	const xiaohongshuPushServer = 'rtmp://live-push.xhscdn.com/live';
 	let key = $state('');
 	let inputFile = $state('');
 	let visible = $state(false);
 
-	onMount(() => {
+	onMount(async () => {
 		visible = true;
+		let result = await Command.create('exec-sh', ['-c', "echo 'hello world'"]).execute();
+		console.log('result: ', result);
 	});
+
 	async function push() {
 		try {
 			let info = await getImageInfo(inputFile);
diff --git a/src/routes/record/+page.svelte b/src/routes/record/+page.svelte
index cb59c8a..c969406 100644
--- a/src/routes/record/+page.svelte
+++ b/src/routes/record/+page.svelte
@@ -5,7 +5,6 @@
 		closeDialog,
 		openDialog,
 		debounce,
-		getResolutionName,
 		getLiveInfoForPlatform,
 		getPlatformIcon
 	} from '$lib/utils';
@@ -296,7 +295,9 @@
 				? 'mt-16'
 				: 'mt-32'}"
 		>
-			<label class="flex h-14 rounded-full bg-gray1 px-2 text-gray2 forced-color-adjust-none">
+			<label
+				class="flex h-14 rounded-full border border-gray1 bg-gray1 px-2 text-gray2 forced-color-adjust-none"
+			>
 				<input
 					bind:this={inputRef}
 					oninput={handleinput}
@@ -305,7 +306,7 @@
 				/>
 				{#if url}
 					<button
-						class="tooltip mr-2 flex items-center"
+						class="tooltip ml-4 mr-2 flex items-center"
 						data-tip={$t('clear')}
 						onclick={() => {
 							inputRef!.value = '';
@@ -314,9 +315,14 @@
 							errorMessage = '';
 						}}
 					>
-						<span class="icon-[fluent--dismiss-circle-28-regular] h-6 w-6 text-gray-500"></span>
+						<span
+							class="icon-[fluent--dismiss-circle-28-regular] h-6 w-6 text-gray-500 hover:text-white"
+						></span>
 					</button>
 				{/if}
+				<span
+					class="absolute inset-x-1 bottom-0 left-[360px] h-px w-[120px] bg-gradient-to-r from-fuchsia-400/0 via-slate-400/60 to-fuchsia-400/0"
+				></span>
 			</label>
 		</div>
 		{#if errorMessage || liveInfo || requesting || url}
@@ -350,7 +356,9 @@
 
 				<button class="px-3" onclick={() => getLiveInfo()}>
 					<span
-						class="icon-[fluent--arrow-clockwise-28-regular] h-8 w-8 {requesting ? 'rotate' : ''}"
+						class="icon-[fluent--arrow-clockwise-28-regular] h-8 w-8 hover:text-white {requesting
+							? 'rotate'
+							: ''}"
 					></span>
 				</button>
 			</div>
@@ -360,8 +368,7 @@
 					<div class="flex h-full w-full items-center justify-center">
 						<span class="loading loading-dots loading-md"></span>
 					</div>
-				{/if}
-				{#if liveInfo}
+				{:else if liveInfo}
 					<div>
 						<div class="w-full text-white1">
 							{#if liveInfo.status === LiveStatus.Live}
@@ -394,7 +401,7 @@
 											>
 												{#each liveInfo.streams as item}
 													<option value={item.url}
-														>{item.protocol + ' ' + getResolutionName(item.resolution)}</option
+														>{item.protocol + ' ' + $t(item.resolution)}</option
 													>
 												{/each}
 											</select>
@@ -446,24 +453,37 @@
 											<span class="loading loading-dots loading-md"></span>
 										{:else if recordStatus === RecordingStatus.Recording}
 											<a
-												class="rounded-full bg-white1 px-6 py-3 text-lg text-black1 shadow-lg transition duration-200 hover:bg-white hover:shadow-xl focus:scale-95"
-												href="/record/history">去录制历史中查看</a
+												class="w-2/3 rounded-full bg-white1 px-6 py-3 text-lg text-black1 shadow-lg transition duration-200 hover:bg-white hover:shadow-xl focus:scale-95"
+												href="/record/history"
 											>
+												<p
+													class="transform text-center transition-transform duration-300 hover:-translate-y-1"
+												>
+													{$t('gotoRecordHistory')}
+												</p>
+											</a>
 										{:else}
 											<Button
 												white
 												className="w-2/3 transform-gpu transition-all duration-500 ease-out"
-												onClick={() => startRecord()}>{$t('startRecord')}</Button
+												onClick={() => startRecord()}
 											>
+												<p class="transform transition-transform duration-300 hover:-translate-y-1">
+													{$t('startRecord')}
+												</p>
+											</Button>
 										{/if}
 									</div>
 								</div>
 							{:else}
 								<div class="flex w-full justify-center pt-12">
-									<Button white className="w-2/3 " onClick={() => handleAddPlan(true)}
-										>{$t('addPlan')}</Button
-									>
+									<Button white className="w-2/3 " onClick={() => handleAddPlan(true)}>
+										<p class="transform transition-transform duration-300 hover:-translate-y-1">
+											{$t('addPlan')}
+										</p>
+									</Button>
 								</div>
+								<p class="pt-12 text-xs text-gray-600">{$t('addPlanTips')}</p>
 							{/if}
 						</div>
 					</div>
@@ -473,7 +493,7 @@
 			<div class="w-1/2 min-w-[600px] gap-8 pt-16">
 				<div class="overflow-y-auto overflow-x-clip">
 					{#if queryHistory.length <= 5}
-						<h3 class="pb-4 font-bold">不知道如何开始？试试这些</h3>
+						<h3 class="pb-4 font-bold">{$t('tryThese')}</h3>
 						<div>
 							{#each tryLinks as link}
 								<div
@@ -495,7 +515,7 @@
 							{/each}
 						</div>
 					{:else}
-						<h3 class="pb-4 font-bold">最近查询</h3>
+						<h3 class="pb-4 font-bold">{$t('recentSearch')}</h3>
 						{#each queryHistory as history}
 							<div
 								class="group flex w-full transform items-center justify-between transition-transform duration-300 hover:-translate-y-1"
diff --git a/src/routes/record/history/+page.svelte b/src/routes/record/history/+page.svelte
index 22c9aba..af8ebf0 100644
--- a/src/routes/record/history/+page.svelte
+++ b/src/routes/record/history/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { RecordingStatus, type RecordingHistory, type RecordingPlan } from '$lib/model';
+	import Button from '$lib/components/button.svelte';
 	import { scale } from 'svelte/transition';
 	import { onDestroy, onMount } from 'svelte';
 	import { toast } from 'svelte-sonner';
@@ -146,26 +147,20 @@
 	id={stopRecordDialogId}
 	text={stopRecordParams?.inPlan ? $t('confirmStopRecordAndDisablePlan') : $t('confirmStopRecord')}
 >
-	<button
-		class="btn w-24 rounded-xl"
-		onclick={() => {
+	<Button
+		white
+		onClick={() => {
 			closeDialog(stopRecordDialogId);
 			stopRecordParams = undefined;
-		}}>{$t('cancel')}</button
+		}}>{$t('cancel')}</Button
 	>
 	{#if stopRecordParams?.inPlan}
-		<button
-			class="btn w-36 rounded-xl"
-			onclick={() => stopRecord(stopRecordParams?.url || '', true)}
-			>{$t('stopRecordAndDisablePlan')}</button
+		<Button red onClick={() => stopRecord(stopRecordParams?.url || '', true)}
+			>{$t('stopRecordAndDisablePlan')}</Button
 		>
 	{/if}
-	<!-- svelte-ignore a11y_autofocus -->
-	<button
-		autofocus
-		class="btn w-32 rounded-xl"
-		onclick={() => stopRecord(stopRecordParams?.url || '', false)}
-		>{stopRecordParams?.inPlan ? $t('onlyStopRecord') : $t('confirm')}</button
+	<Button autoFocus red onClick={() => stopRecord(stopRecordParams?.url || '', false)}
+		>{stopRecordParams?.inPlan ? $t('onlyStopRecord') : $t('confirm')}</Button
 	>
 </Dialog>
 
@@ -173,35 +168,36 @@
 	id={deleteHistoryDialogId}
 	text={deleteHistoryParams?.deleted ? $t('confirmDeleteRecord') : $t('deleteRecordOnlyOrFile')}
 >
-	<button
-		class="btn w-24 rounded-xl"
-		onclick={() => {
+	<Button
+		white
+		className=""
+		onClick={() => {
 			closeDialog(deleteHistoryDialogId);
 			deleteHistoryParams = undefined;
-		}}>{$t('cancel')}</button
+		}}>{$t('cancel')}</Button
 	>
 	{#if !deleteHistoryParams?.deleted}
-		<button
-			class="btn w-32 rounded-xl"
-			onclick={() => deleteHistory(
+		<Button
+			red
+			onClick={() => deleteHistory(
 			  deleteHistoryParams!.url,
     deleteHistoryParams!.startTime,
     true
 			)}
-			>{$t('deleteRecordAndFile')}</button
+			>{$t('deleteRecordAndFile')}</Button
 		>
 	{/if}
 	<!-- svelte-ignore a11y_autofocus -->
-	<button
-		autofocus
-		class="btn w-32 rounded-xl"
-		onclick={() =>
+	<Button
+		autoFocus
+		red
+		onClick={() =>
 			deleteHistory(
 				deleteHistoryParams!.url,
 				deleteHistoryParams!.startTime,
 				false
 			)}
-		>{deleteHistoryParams?.deleted ? $t('confirm') : $t('deleteRecordOnly')}</button
+		>{deleteHistoryParams?.deleted ? $t('confirm') : $t('deleteRecordOnly')}</Button
 	>
 </Dialog>
 
@@ -275,7 +271,7 @@
 							{#if !row.deleted}
 								<button
 									onclick={() => openInFolder(row.path)}
-									class="tooltip text-left hover:text-white1"
+									class="tooltip text-left hover:text-white"
 									data-tip={$t('openInFileManager')}
 								>
 									<span class="icon-[fluent--folder-32-regular] h-6 w-6"></span>
diff --git a/src/routes/record/plan/+page.svelte b/src/routes/record/plan/+page.svelte
index d800ea8..8a7ab3d 100644
--- a/src/routes/record/plan/+page.svelte
+++ b/src/routes/record/plan/+page.svelte
@@ -8,6 +8,7 @@
 	import { t } from '@/translations';
 	import { scale } from 'svelte/transition';
 	import { backOut } from 'svelte/easing';
+	import Button from '@/components/button.svelte';
 
 	const deletePlanDialogId = 'deletePlan';
 	let list: RecordingPlan[] = $state([]);
@@ -147,7 +148,7 @@
 							</a>
 						</td>
 						<td>{row.streamProtocol}</td>
-						<td>{row.streamResolution !== '' ? row.streamResolution : $t('auto')}</td>
+						<td>{row.streamResolution !== '' ? $t(row.streamResolution) : $t('auto')}</td>
 						<td
 							><button
 								class="tooltip"
@@ -173,15 +174,12 @@
 
 <!-- 原生对话框 -->
 <Dialog text={$t('confirmDeletePlan')} id={deletePlanDialogId}>
-	<button
-		class="btn w-24 rounded-xl"
-		onclick={() => {
+	<Button
+		white
+		onClick={() => {
 			closeDialog(deletePlanDialogId);
 			dialogUrl = '';
-		}}>{$t('cancel')}</button
-	>
-	<!-- svelte-ignore a11y_autofocus -->
-	<button autofocus class="btn w-24 rounded-xl" onclick={() => deletePlan(dialogUrl)}
-		>{$t('confirm')}</button
+		}}>{$t('cancel')}</Button
 	>
+	<Button red autoFocus onClick={() => deletePlan(dialogUrl)}>{$t('confirm')}</Button>
 </Dialog>