diff --git a/src/App.vue b/src/App.vue
index d0d92960..a4a45462 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -90,7 +90,7 @@ async function writeIndex() {
 <style lang="css">
 .app-main {
 	min-height: 100vh;
-	background: rgba(255, 255, 255, 75%);
+	background: #ece5d8;
 	backdrop-filter: blur(20px);
 }
 </style>
diff --git a/src/components/t-position.vue b/src/components/t-position.vue
index e96c0764..695fa938 100644
--- a/src/components/t-position.vue
+++ b/src/components/t-position.vue
@@ -1,19 +1,24 @@
 <template>
 	<v-list class="position-card">
 		<v-list-item>
-			<v-list-item-title style="color: #fec90b; margin-left: 10px">近期活动</v-list-item-title>
+			<v-list-item-title style="color: #fec90b; margin-left: 10px; font-family: Genshin, serif"
+				>近期活动</v-list-item-title
+			>
 			<div class="position-grid">
-				<v-card v-for="card in positionCards" style="background: #5c6474; color: #faf7e8">
-					<v-list style="background: #5c6474; color: #f4d8a8">
+				<v-card
+					v-for="card in positionCards"
+					style="background: #2d2f33; color: #f4d8a8; border-radius: 10px"
+				>
+					<v-list style="background: #2d2f33; color: #f4d8a8">
 						<v-list-item :title="card.title" :subtitle="card.abstract">
 							<template v-slot:prepend>
-								<v-avatar>
-									<v-img :src="card.icon" />
+								<v-avatar rounded="0" @click="toPost(card)" style="cursor: pointer">
+									<v-img :src="card.icon" style="border-radius: 10px" />
 								</v-avatar>
 							</template>
 						</v-list-item>
 					</v-list>
-					<v-divider></v-divider>
+					<v-divider class="border-opacity-75"></v-divider>
 					<v-card-text>
 						<span style="width: 60%">
 							<v-icon>mdi-calendar-clock</v-icon>
@@ -107,7 +112,7 @@ async function toPost(card: PositionCard) {
 <style lang="css">
 .position-card {
 	margin: 0 10px;
-	font-family: "Genshin", serif;
+	font-family: "Genshin-Light", serif;
 	background: rgba(0, 0, 0, 0.5);
 	border-radius: 10px;
 }
diff --git a/src/components/t-sidebar.vue b/src/components/t-sidebar.vue
index 3de72e38..e379affc 100644
--- a/src/components/t-sidebar.vue
+++ b/src/components/t-sidebar.vue
@@ -1,6 +1,6 @@
 <template>
 	<!-- todo 侧边栏宽度调整 -->
-	<v-navigation-drawer permanent :rail="rail">
+	<v-navigation-drawer permanent :rail="rail" style="background: #485466; color: #ece5d8">
 		<v-list class="sideList" density="compact" v-model:opened="open" nav>
 			<!-- 负责收缩侧边栏 -->
 			<v-list-item @click="collapse">
@@ -79,7 +79,7 @@ function submenu(value: string) {
 
 <style lang="css">
 .sideList {
-	font-family: "Genshin", serif;
+	font-family: "Genshin-Light", serif;
 }
 
 .sideIcon {
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index a0785fdd..4ab9639a 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -10,23 +10,21 @@
 		</div>
 		<div class="pool-cards" v-else>
 			<v-card v-for="pool in poolCards" class="pool-card">
-				<template v-slot:prepend>
-					<v-img
-						:src="pool.voice.icon"
-						width="80px"
-						height="80px"
-						alt="voice"
-						style="display: inline-block"
-					/>
-					<v-card-title style="display: inline-block; color: #fec90b">{{
-						pool.title
-					}}</v-card-title>
-				</template>
-				<template v-slot:append>
-					<audio :src="pool.voice.url" controls />
-				</template>
+				<v-list class="pool-list">
+					<v-list-item :title="pool.title" :subtitle="pool.subtitle" class="pool-list-item">
+						<template v-slot:prepend>
+							<v-img
+								:src="pool.voice.icon"
+								style="transform: translate(0, -10px); width: 60px; height: 60px"
+							/>
+						</template>
+						<template v-slot:append>
+							<audio :src="pool.voice.url" controls />
+						</template>
+					</v-list-item>
+				</v-list>
 				<!-- 卡池封面 -->
-				<v-row class="Home-pool">
+				<v-row>
 					<div class="pool-cover" @click="toPost(pool)">
 						<img :src="pool.cover" alt="cover" />
 					</div>
@@ -35,12 +33,7 @@
 							<img :src="character.icon" class="pool-icon" alt="character" />
 						</div>
 						<div class="pool-clock">
-							<v-progress-circular
-								:model-value="poolTimePass[pool.post_id]"
-								size="100"
-								color="blue-lighten-3"
-								width="10"
-							>
+							<v-progress-circular :model-value="poolTimePass[pool.post_id]" size="100" width="10">
 								{{ poolTimeGet[pool.post_id] }}
 							</v-progress-circular>
 						</div>
@@ -135,7 +128,7 @@ async function toPost(pool: GachaCard) {
 
 <style lang="css">
 .pool-cards {
-	font-family: Genshin, serif;
+	font-family: Genshin-Light, serif;
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -145,25 +138,30 @@ async function toPost(pool: GachaCard) {
 	margin: 10px;
 	background: rgba(0, 0, 0, 0.5);
 	border-radius: 10px;
-	color: #faf7e8;
+	color: #f4d8a8;
 }
 
-.Home-pool {
-	margin-left: 10px;
-	margin-right: 10px;
+.pool-list {
+	background: #76726c;
+}
+
+.pool-list-item {
+	background: #76726c;
+	font-family: Genshin, serif;
+	color: #fec90b;
 }
 
 .pool-cover {
-	width: 690px;
-	height: auto;
-	margin-bottom: 10px;
+	width: 100%;
+	height: 330px;
+	margin: 20px;
 	overflow: hidden;
 	border-radius: 10px;
 }
 
 .pool-cover img {
 	width: 100%;
-	height: auto;
+	height: 330px;
 	transition: all 0.5s;
 	border-radius: 10px;
 }
@@ -175,6 +173,7 @@ async function toPost(pool: GachaCard) {
 }
 
 .pool-character {
+	margin: 0 20px;
 	width: 100%;
 	height: 80px;
 	display: flex;