diff --git a/src/pages/Playroom.vue b/src/pages/Playroom.vue
index e503d36..e5741e3 100644
--- a/src/pages/Playroom.vue
+++ b/src/pages/Playroom.vue
@@ -18,7 +18,7 @@ import MusicListIcon from '../assets/icons/musiclist.vue'
 import EllipsisHorizontalIcon from '../assets/icons/ellipsishorizontal.vue'
 import XIcon from '../assets/icons/x.vue'
 import ShuffleIcon from '../assets/icons/shuffle.vue'
-import ListArrowIcon from '../assets/icons/listarrow.vue'
+import CycleTwoArrowsIcon from '../assets/icons/cycletwoarrows.vue'
 
 const playQueueStore = usePlayQueueStore()
 gsap.registerPlugin(Draggable)
@@ -140,37 +140,60 @@ function makePlayQueueListDismiss() {
 		v-if="playQueueStore.list[playQueueStore.currentIndex].album?.coverDeUrl">
 		<img class="w-full h-full blur-2xl object-cover"
 			:src="playQueueStore.list[playQueueStore.currentIndex].album?.coverDeUrl" />
-		<div class="bg-gray-600/50 w-full h-full absolute top-0 left-0" />
+		<div class="bg-transparent w-full h-full absolute top-0 left-0" />
 	</div>
 
 	<div class="w-full flex justify-center items-center my-auto gap-16 z-10 select-none">
-		<div class="flex flex-col text-center w-96 gap-4">
+		<div class="flex flex-col w-96 gap-4">
 			<img :src="playQueueStore.list[playQueueStore.currentIndex].album?.coverUrl"
 				class="rounded-2xl shadow-2xl border border-white/20 w-96 h-96" />
-			<div>
-				<div class="text-white text-lg font-medium truncate">
-					{{ playQueueStore.list[playQueueStore.currentIndex].song.name }}
+			<div class="relative">
+				<div class="">
+					<div class="text-black/90 blur-lg text-lg font-medium truncate">
+						{{ playQueueStore.list[playQueueStore.currentIndex].song.name }}
+					</div>
+					<div class="text-black/90 blur-lg text-base truncate">
+						{{ artistsOrganize(playQueueStore.list[playQueueStore.currentIndex].song.artists ?? []) }} —
+						{{ playQueueStore.list[playQueueStore.currentIndex].album?.name ?? '未知专辑' }}
+					</div>
 				</div>
-				<div class="text-white/75 text-base truncate">
-					{{ artistsOrganize(playQueueStore.list[playQueueStore.currentIndex].song.artists ?? []) }} —
-					{{ playQueueStore.list[playQueueStore.currentIndex].album?.name ?? '未知专辑' }}
+
+				<div class="absolute top-0">
+					<div class="text-white text-lg font-medium truncate">
+						{{ playQueueStore.list[playQueueStore.currentIndex].song.name }}
+					</div>
+					<div class="text-white/75 text-base truncate">
+						{{ artistsOrganize(playQueueStore.list[playQueueStore.currentIndex].song.artists ?? []) }} —
+						{{ playQueueStore.list[playQueueStore.currentIndex].album?.name ?? '未知专辑' }}
+					</div>
 				</div>
+
 			</div>
 
 			<div class="flex flex-col gap-1">
-				<div class="w-full p-[0.125rem] bg-white/20 rounded-full backdrop-blur-3xl">
+				<div class="w-full p-[0.125rem] bg-white/20 shadow-[0_.125rem_1rem_0_#00000010] rounded-full backdrop-blur-3xl">
 					<div class="w-full" ref="progressBarContainer">
 						<div class="w-2 h-2 bg-white rounded-full shadow-md" ref="progressBarThumb" />
 					</div>
 				</div>
 
 				<div class="w-full flex justify-between">
-					<div class="text-white/75 font-light flex-1 text-left">
-						{{ timeFormatter(Math.floor(playQueueStore.currentTime)) }}
+					<div class="font-medium flex-1 text-left relative">
+						<span class="text-black blur-lg absolute top-0">{{ timeFormatter(Math.floor(playQueueStore.currentTime)) }}</span>
+						<span class="text-white/90">{{ timeFormatter(Math.floor(playQueueStore.currentTime)) }}</span>
+					</div>
+					<div class="text-xs text-center relative">
+						<span class="text-black blur-lg absolute top-0">{{ formatDetector() }}</span>
+						<span class="text-white">{{ formatDetector() }}</span>
+					</div>
+					<div class="flex flex-1">
+						<div class="flex-1" />
+						<button class="text-white/90 font-medium text-right relative"
+							@click="displayTimeLeft = !displayTimeLeft">
+							<span class="text-black blur-lg absolute top-0">{{ `${displayTimeLeft? '-' : ''}${timeFormatter(displayTimeLeft? Math.floor(playQueueStore.duration) - Math.floor(playQueueStore.currentTime) : playQueueStore.duration)}` }}</span>
+							<span>{{ `${displayTimeLeft ? '-' : ''}${timeFormatter(displayTimeLeft ? Math.floor(playQueueStore.duration) - Math.floor(playQueueStore.currentTime) : playQueueStore.duration)}` }}</span>
+						</button>
 					</div>
-					<div class="text-white text-xs text-center">{{ formatDetector() }}</div>
-					<button class="text-white/75 font-light flex-1 text-right"
-						@click="displayTimeLeft = !displayTimeLeft">{{ `${displayTimeLeft ? '-' : ''}${timeFormatter(displayTimeLeft ? Math.floor(playQueueStore.duration) - Math.floor(playQueueStore.currentTime) : playQueueStore.duration)}` }}</button>
 				</div>
 
 
@@ -178,44 +201,73 @@ function makePlayQueueListDismiss() {
 
 			<div class="w-full flex justify-between items-center">
 				<div class="flex-1 text-left flex gap-1">
-					<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
-						<StarEmptyIcon :size="4" />
+					<button class="h-8 w-8 flex justify-center items-center rounded-full hover:bg-white/25">
+						<div class="w-6 h-6 relative">
+							<span class="text-black blur-md absolute top-0 left-0"><StarEmptyIcon :size="6" /></span>
+							<span class="text-white"><StarEmptyIcon :size="6" /></span>
+						</div>
 					</button>
-					<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25"
+					<button class="text-white h-8 w-8 flex justify-center items-center rounded-full hover:bg-white/25"
 						@click="makePlayQueueListPresent">
-						<MusicListIcon :size="4" />
+						<div class="w-6 h-6 relative">
+							<span class="text-black blur-md absolute top-0 left-0"><MusicListIcon :size="6" /></span>
+							<span class="text-white"><MusicListIcon :size="6" /></span>
+						</div>
 					</button>
 				</div>
 
 				<div class="flex-2 text-center align-center justify-center gap-2 flex">
 
-					<button class="text-white flex-1 h-8 flex justify-center items-center rounded-lg hover:bg-white/25"
+					<button class="text-white flex-1 h-10 flex justify-center items-center rounded-lg hover:bg-white/25"
 						@click="playPrevious">
-						<RewindIcon :size="6" />
+						<div class="w-8 h-8 relative">
+							<span class="text-black/80 blur-lg absolute top-0 left-0"><RewindIcon :size="8" /></span>
+							<span class="text-white"><RewindIcon :size="8" /></span>
+						</div>
 					</button>
 
-					<button class="text-white flex-1 h-8 flex justify-center items-center rounded-lg hover:bg-white/25"
+					<button class="text-white flex-1 h-10 flex justify-center items-center rounded-lg hover:bg-white/25"
 						@click="playQueueStore.isPlaying = !playQueueStore.isPlaying">
 						<div v-if="playQueueStore.isPlaying">
-							<LoadingIndicator v-if="playQueueStore.isBuffering" :size="6" />
-							<PauseIcon v-else :size="6" />
+							<div v-if="playQueueStore.isBuffering" class="w-6 h-6 relative">
+								<span class="text-black/80 blur-lg absolute top-0 left-0"><LoadingIndicator :size="6" /></span>
+								<span class="text-white"><LoadingIndicator :size="6" /></span>
+							</div>
+							<div v-else class="w-8 h-8 relative">
+								<span class="text-black/80 blur-lg absolute top-0 left-0"><PauseIcon :size="8" /></span>
+								<span class="text-white"><PauseIcon :size="8" /></span>
+							</div>
+						</div>
+						<div v-else>
+							<div class="w-8 h-8 relative">
+								<span class="text-black/80 blur-lg absolute top-0 left-0"><PlayIcon :size="8" /></span>
+								<span class="text-white"><PlayIcon :size="8" /></span>
+							</div>
 						</div>
-						<PlayIcon v-else :size="6" />
 					</button>
 
-					<button class="text-white flex-1 h-8 flex justify-center items-center rounded-lg hover:bg-white/25"
+					<button class="text-white flex-1 h-10 flex justify-center items-center rounded-lg hover:bg-white/25"
 						@click="playNext">
-						<ForwardIcon :size="6" />
+						<div class="w-8 h-8 relative">
+							<span class="text-black/80 blur-lg absolute top-0 left-0"><ForwardIcon :size="8" /></span>
+							<span class="text-white"><ForwardIcon :size="8" /></span>
+						</div>
 					</button>
 				</div>
 
 				<div class="flex-1 text-right flex">
 					<div class="flex-1" />
-					<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
-						<ChatBubbleQuoteIcon :size="4" />
+					<button class="text-white h-8 w-8 flex justify-center items-center rounded-full hover:bg-white/25">
+						<div class="w-6 h-6 relative">
+							<span class="text-black blur-md absolute top-0 left-0"><ChatBubbleQuoteIcon :size="6" /></span>
+							<span class="text-white"><ChatBubbleQuoteIcon :size="6" /></span>
+						</div>
 					</button>
-					<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
-						<EllipsisHorizontalIcon :size="4" />
+					<button class="text-white h-8 w-8 flex justify-center items-center rounded-full hover:bg-white/25">
+						<div class="w-6 h-6 relative">
+							<span class="text-black blur-sm absolute top-0 left-0"><EllipsisHorizontalIcon :size="6" /></span>
+							<span class="text-white"><EllipsisHorizontalIcon :size="6" /></span>
+						</div>
 					</button>
 				</div>
 			</div>
@@ -240,13 +292,13 @@ function makePlayQueueListDismiss() {
 			<div class="flex gap-2 mx-8 mb-4">
 				<button
 					class="text-white flex-1 h-9 bg-neutral-800/80 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex justify-center items-center"
-					@click="makePlayQueueListDismiss">
+					@click="">
 					<ShuffleIcon :size="4" />
 				</button>
 				<button
 					class="text-white flex-1 h-9 bg-neutral-800/80 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex justify-center items-center"
-					@click="makePlayQueueListDismiss">
-					<ListArrowIcon :size="4" />
+					@click="">
+					<CycleTwoArrowsIcon :size="4" />
 				</button>
 			</div>