diff --git a/package-lock.json b/package-lock.json
index 1dc0ca1..184cd37 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
 			"dependencies": {
 				"@tailwindcss/vite": "^4.1.7",
 				"axios": "^1.9.0",
+				"remixicon": "^4.6.0",
 				"tailwindcss": "^4.1.7",
 				"vue": "^3.5.13",
 				"vue-router": "^4.5.1"
@@ -2242,6 +2243,12 @@
 			"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
 			"license": "MIT"
 		},
+		"node_modules/remixicon": {
+			"version": "4.6.0",
+			"resolved": "https://registry.npmjs.org/remixicon/-/remixicon-4.6.0.tgz",
+			"integrity": "sha512-bKM5odjqE1yzVxEZGJE7F79WHhNrJFIKHXR+GG+P1IWXn8AnJZhl8SbIRDJsNAvIqx4VPkNwjuHfc42tutMDpQ==",
+			"license": "Apache-2.0"
+		},
 		"node_modules/rollup": {
 			"version": "4.41.0",
 			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.41.0.tgz",
diff --git a/package.json b/package.json
index bfcd435..8a0b997 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
 	"dependencies": {
 		"@tailwindcss/vite": "^4.1.7",
 		"axios": "^1.9.0",
+		"remixicon": "^4.6.0",
 		"tailwindcss": "^4.1.7",
 		"vue": "^3.5.13",
 		"vue-router": "^4.5.1"
diff --git a/public/assets/MiSans_VF.ttf b/public/assets/MiSans_VF.ttf
new file mode 100644
index 0000000..17c3282
Binary files /dev/null and b/public/assets/MiSans_VF.ttf differ
diff --git a/src/App.vue b/src/App.vue
index 206041f..1aa2473 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,11 +4,11 @@ import Playing from './components/Playing.vue'
 </script>
 
 <template>
-<div class="flex overflow-hidden flex-1 w-screen h-screen">
-	<Sidebar />
-	<div class="flex-1 bg-[#070909]">
-		<Playing />
-		<RouterView />
+	<div class="flex overflow-hidden flex-1 w-screen h-screen">
+		<Sidebar />
+		<div class="flex-1 bg-[#070909]">
+			<Playing />
+			<RouterView />
+		</div>
 	</div>
-</div>
 </template>
\ No newline at end of file
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 237f8b1..3502cdd 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -1,3 +1,19 @@
+<script lang="ts" setup>
+	import { RouterLink } from 'vue-router'
+</script>
+
 <template>
-	<div class="bg-[#0c1112] w-56 text-white">aaa</div>
+	<div class="bg-[#0c1112] w-56 text-white p-4">
+		<div>
+			<div class="font-semibold text-white/50 text-xs mb-2">音乐库</div>
+			<ul class="flex flex-col gap-1">
+				<li>
+					<RouterLink to="/"><div class="text-sm px-2 py-1 hover:bg-white/5 w-full text-left rounded-md">最新音乐</div></RouterLink>
+				</li>
+				<li>
+					<RouterLink to="/feelinglucky"><div class="text-sm px-2 py-1 hover:bg-white/5 w-full text-left rounded-md">手气不错</div></RouterLink>
+				</li>
+			</ul>
+		</div>
+	</div>
 </template>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 3e5ca52..09757ec 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,6 +3,7 @@ import { createWebHashHistory, createRouter } from 'vue-router'
 import './style.css'
 import App from './App.vue'
 import HomePage from './pages/Home.vue'
+import 'remixicon/fonts/remixicon.css'
 
 const routes = [
   { path: '/', component: HomePage }
diff --git a/src/style.css b/src/style.css
index 2f4316a..b3ea482 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,5 +1,16 @@
 @import "tailwindcss";
+/* 导入来自 /assets/MiSans_VF.ttf 的字体 */
+@font-face {
+	font-family: 'MiSans';
+	src: url('/assets/MiSans_VF.ttf') format('truetype-variations');
+	font-weight: 1 999;
+	font-display: swap;
+}
 
 * {
-	@apply text-white;
+	@apply font-[MiSans];
+}
+
+button {
+	@apply cursor-pointer;
 }
\ No newline at end of file