diff --git a/src/components/DraggableBar.vue b/src/components/DraggableBar.vue
index aeab4677..3c3c5ef2 100644
--- a/src/components/DraggableBar.vue
+++ b/src/components/DraggableBar.vue
@@ -2,7 +2,7 @@
   <div :id="id" class="playbar-clickable cursor-pointer h-3 pt-1" @mousedown="onMyMouseDown">
     <div class="barbg h-1 bg-draggable-bar">
       <div class="cur bg-draggable-bar-current relative h-full" :style="{ width: changingProgress ? cprogress * 100 + '%' : progress + '%' }">
-        <span :class="'btn absolute rounded-full ' + (btnClass ? btnClass : '')">
+        <span class="btn absolute rounded-full" :class="btnClass ? btnClass : ''" :tooltips="tooltips">
           <i />
         </span>
       </div>
@@ -10,10 +10,11 @@
   </div>
 </template>
 <script setup lang="ts">
-const { id, progress, btnClass } = defineProps<{
+const { id, progress, btnClass, tooltips } = defineProps<{
   id: string;
   progress: number;
   btnClass?: string;
+  tooltips?: string;
 }>();
 
 const emits = defineEmits(['update-progress', 'commit-progress']);
@@ -68,4 +69,21 @@ const onMyMouseDown = (event: MouseEvent) => {
 };
 </script>
 
-<style></style>
+<script lang="ts">
+export default {};
+</script>
+
+<style>
+[tooltips]:hover:after {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: 50%;
+  transform: translateX(-50%);
+  content: attr(tooltips);
+  color: #fff;
+  background: #1b2735;
+  max-width: 100vw;
+  padding: 0.3rem 0.5rem;
+  border-radius: 1rem;
+}
+</style>
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index befaa93e..f7c48d28 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -21,7 +21,7 @@ let show = $ref(false);
 let modalType = $ref(DefaultModal);
 let options = $ref({});
 
-const components: Record<string, any> = {
+const components: Record<string, typeof DefaultModal> = {
   DefaultModal,
   CreatePlaylist,
   AddToPlaylist,
diff --git a/src/components/Playerbar.vue b/src/components/Playerbar.vue
index fe194803..d40d4402 100644
--- a/src/components/Playerbar.vue
+++ b/src/components/Playerbar.vue
@@ -1,14 +1,11 @@
 <template>
-  <div class="footer flex relative z-20 h-20 border-t border-default">
-    <div class="flex flex-none items-center w-80">
-      <span class="icon text-3xl ml-12 li-previous text-prevnext" @click="prevTrack()" />
-      <span
-        class="icon text-3xl ml-6 mr-6 li-play play text-play hover:text-play-hover"
-        :class="isPlaying ? 'li-pause' : 'li-play'"
-        @click="playPauseToggle()" />
-      <span class="icon text-3xl mr-4 li-next text-prevnext" @click="nextTrack()" />
+  <div class="footer flex flex-wrap gap-y-4 relative z-20 border-t border-default">
+    <div class="flex flex-none justify-center gap-4 items-center w-screen md:w-80 h-24 text-4xl">
+      <span class="li-previous text-prevnext cursor-pointer" @click="prevTrack()" />
+      <span class="li-play play text-play hover:text-play-hover cursor-pointer" :class="isPlaying ? 'li-pause' : 'li-play'" @click="playPauseToggle()" />
+      <span class="li-next text-prevnext cursor-pointer" @click="nextTrack()" />
     </div>
-    <div class="main-info flex flex-1 overflow-hidden bg-footer-main z-30">
+    <div class="main-info w-screen md:flex-1 flex overflow-hidden bg-footer-main z-30">
       <div v-if="playlist.length == 0" class="logo-banner text-center flex-1 flex items-center h-20 w-20">
         <svg
           class="logo h-12 w-12"
@@ -25,29 +22,21 @@
           <polygon points="13 4 13 13 16 13 16 4" />
         </svg>
       </div>
-      <div v-if="playlist.length > 0" class="cover flex-none cursor-pointer h-20 w-20 relative group" @click="toggleNowPlaying()">
-        <img class="object-cover h-20 w-20" :src="currentPlaying?.img_url" @error="showImage($event, 'images/mycover.jpg')" />
+      <div v-if="playlist.length > 0" class="cover flex-none cursor-pointer h-24 w-24 relative group" @click="toggleNowPlaying()">
+        <img class="object-cover h-24 w-24" :src="currentPlaying?.img_url" @error="showImage($event, coverImg)" />
         <div class="mask items-center justify-center absolute inset-0 hidden group-hover:bg-black group-hover:bg-opacity-60 group-hover:flex">
           <vue-feather type="chevrons-up" stroke="#cccccc" />
         </div>
       </div>
       <div v-if="playlist.length > 0" class="detail flex-1 relative overflow-hidden">
-        <div class="ctrl absolute top-1 right-2">
+        <div class="ctrl absolute top-2 right-2">
           <vue-feather
-            v-if="!isRedHeart(currentPlaying?.id)"
-            class="icon opacity-50 hover:opacity-100 cursor-pointer"
+            class="opacity-50 hover:opacity-100 cursor-pointer"
             type="heart"
-            size="1.125rem"
-            stroke-width="1.5"
-            @click="setRedHeart(toRaw(currentPlaying), true)" />
-          <vue-feather
-            v-if="isRedHeart(currentPlaying?.id)"
-            class="heart cursor-pointer"
-            type="heart"
-            fill="red"
-            stroke="red"
-            size="1.125rem"
-            @click="setRedHeart(toRaw(currentPlaying), false)" />
+            :fill="isRedHearted ? 'red' : 'transparent'"
+            :stroke="isRedHearted ? 'red' : 'white'"
+            size="1rem"
+            @click="setRedHeart(toRaw(currentPlaying), !isRedHearted)" />
           <a :title="t('_ADD_TO_PLAYLIST')" @click="showModal('AddToPlaylist', { tracks: [currentPlaying] })">
             <span class="icon opacity-50 hover:opacity-100 li-songlist ml-3" />
           </a>
@@ -58,11 +47,11 @@
           </a>
         </div>
 
-        <div class="title text-center truncate h-8 flex items-end justify-center text-lg">
+        <div class="title text-center truncate flex items-end justify-center text-xl my-2">
           <span v-if="currentPlaying?.source === 'xiami'" style="color: orange; font-size: medium">⚠️</span>
           {{ currentPlaying?.title }}
         </div>
-        <div class="more-info h-6 text-sm flex text-subtitle px-3">
+        <div class="more-info text-sm flex text-subtitle px-3 my-2">
           <div class="current">{{ formatTime(currentPosition) }}</div>
           <div class="singer flex-1 tuncate text-center">
             <a class="cursor-pointer" @click="showPlaylist(currentPlaying?.artist_id)">{{ currentPlaying?.artist }}</a>
@@ -81,7 +70,7 @@
         </div>
       </div>
     </div>
-    <div class="right-control flex flex-none items-center w-80">
+    <div class="right-control flex flex-none items-center w-screen md:w-80 h-24 z-30">
       <div class="playlist-toggle cursor-pointer ml-8">
         <span class="icon li-list" @click="togglePlaylist()" />
       </div>
@@ -107,6 +96,7 @@ import useRedHeart from '../composition/redheart';
 import useSettings from '../composition/settings';
 import { l1Player } from '../services/l1_player';
 import { formatTime, isElectron } from '../utils';
+import coverImg from '../images/mycover.jpg';
 
 const { t } = useI18n();
 const { player } = usePlayer();
@@ -208,6 +198,7 @@ let myProgress = $computed(() => player.myProgress);
 let currentDuration = $computed(() => player.currentDuration);
 let currentPosition = $computed(() => player.currentPosition);
 let currentPlaying = $computed(() => player.currentPlaying);
+let isRedHearted = $computed(() => isRedHeart(currentPlaying?.id));
 
 if (isElectron()) {
   window.api?.onLyricWindow((arg: string) => {
diff --git a/src/components/PlayerbarPopup.vue b/src/components/PlayerbarPopup.vue
index 98f6627f..b95f5840 100644
--- a/src/components/PlayerbarPopup.vue
+++ b/src/components/PlayerbarPopup.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="menu-modal fixed top-0 right-0 left-0 bg-white bg-opacity-20" :class="{ 'bottom-20': !hidden }" @click="close()" />
+  <div class="menu-modal fixed top-0 right-0 left-0 bg-white bg-opacity-20" :class="{ 'bottom-24': !hidden }" @click="close()" />
   <div
     class="menu bg-theme fixed overflow-hidden border-default rounded-t-lg h-96"
-    :class="{ 'bottom-20 opacity-100': !hidden, '-bottom-80 opacity-0': hidden }">
+    :class="{ 'bottom-24 opacity-100': !hidden, '-bottom-80 opacity-0': hidden }">
     <div class="menu-header text-sm h-10 border-b border-default flex items-center bg-menu">
       <span class="menu-title flex-1 px-4 border-default border-r">{{ t('_TOTAL_SONG_PREFIX') }} {{ playlist.length }} {{ t('_TOTAL_SONG_POSTFIX') }}</span>
       <a class="add-all pr-4 flex items-center cursor-pointer" @click="showModal('AddToPlaylist', { tracks: playlist })">
@@ -18,7 +18,7 @@
         <vue-feather size="1.25rem" type="x"></vue-feather>
       </a>
     </div>
-    <ul class="menu-list overflow-y-scroll text-sm">
+    <ul class="menu-list overflow-y-auto text-sm align-middle h-80">
       <DragDropZone
         v-for="(song, index) in playlist"
         :id="'song_' + song.id"
@@ -32,12 +32,14 @@
         @mouseenter="song.highlight = true"
         @mouseleave="song.highlight = undefined"
         @drop="onCurrentPlayingSongDrop(song, $event)">
-        <div class="song-status-icon w-8">
+        <div class="w-8 flex justify-end">
+          <span>{{ index + 1 }}</span>
+        </div>
+        <div class="song-status-icon w-8 flex justify-center">
           <vue-feather v-show="currentPlaying.id == song.id" size="1rem" type="play"></vue-feather>
         </div>
         <div class="song-title flex-2" :class="song.disabled ? 'text-disabled' : ''">
           <a class="cursor-pointer" @click="playFromPlaylist(song)">
-            <span v-if="song.source === 'xiami'" style="color: orange; border-radius: 12px; border: solid 1px; padding: 0 4px">⚠️ 🦐</span>
             {{ song.title }}
           </a>
         </div>
@@ -109,16 +111,14 @@ let playlist: any = $computed(() => player.playlist.value);
 let currentPlaying: any = $computed(() => player.currentPlaying || {});
 </script>
 <style>
-.footer .menu ul.menu-list {
-  height: 21.5rem;
-}
-.footer .menu {
-  left: 300px;
-  right: 300px;
+.menu {
+  --menu-width: 60rem;
+  width: var(--menu-width);
+  left: calc((100% - var(--menu-width)) / 2);
   -webkit-app-region: no-drag;
 }
 
-.footer .menu ul.menu-list li .song-status-icon svg {
+.song-status-icon svg {
   fill: var(--important-color);
   stroke: var(--important-color);
 }
diff --git a/src/components/PlaylistGrid.vue b/src/components/PlaylistGrid.vue
index d6720616..e10d9781 100644
--- a/src/components/PlaylistGrid.vue
+++ b/src/components/PlaylistGrid.vue
@@ -1,8 +1,10 @@
 <template>
-  <ul class="playlist-covers m-0 py-0 flex relative flex-wrap">
-    <li v-for="i in playlists" :key="i.id" class="group w-1/3 md:w-1/5 min-h-40 px-4 sm:w-1/4 mb-3">
-      <div class="u-cover flex relative shadow-lg">
-        <img :src="i.cover_img_url" class="m-auto cursor-pointer w-full object-cover rounded" @click="showPlaylist(i.id)" />
+  <ul class="playlist-covers m-0 py-0 relative grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-5">
+    <li v-for="i in playlists" :key="i.id" class="group min-h-40">
+      <div class="relative shadow-lg">
+        <div class="aspect-square bg-cover" :style="`background-image: url('${bgImage}')`">
+          <img :src="i.cover_img_url" class="m-auto cursor-pointer rounded object-cover w-full" @click="showPlaylist(i.id)" />
+        </div>
         <div
           class="bottom opacity-0 group-hover:opacity-100 cursor-pointer absolute w-8 h-8 bottom-3 right-3 ease-linear duration-200"
           @click="directplaylist(i.id)">
@@ -10,7 +12,7 @@
         </div>
       </div>
       <div class="desc cursor-pointer">
-        <span class="title flex min-h-8 mt-1" @click="showPlaylist(i.id)">{{ i.title }}</span>
+        <div class="min-h-8 mt-1 px-2" @click="showPlaylist(i.id)">{{ i.title }}</div>
       </div>
     </li>
     <!-- <div class="loading_bottom">
@@ -22,6 +24,7 @@
 import { useRouter } from 'vue-router';
 import { l1Player } from '../services/l1_player';
 import MediaService from '../services/MediaService';
+import bgImage from '../images/placeholder.png';
 
 const router = useRouter();
 
diff --git a/src/components/SettingBlock.vue b/src/components/SettingBlock.vue
new file mode 100644
index 00000000..ac437db6
--- /dev/null
+++ b/src/components/SettingBlock.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="m-2">
+    <div class="settings-title pb-2 mb-2 mx-8">
+      <span>{{ titleText }}</span>
+    </div>
+    <div class="settings-content mx-7 mb-7 leading-8">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+const { title: titleText } = defineProps<{
+  title: string;
+}>();
+</script>
+<style>
+.settings-title {
+  border-bottom: solid 1px var(--line-default-color);
+  font-size: 1.25rem;
+  max-width: 48rem;
+}
+.settings-title:first-of-type {
+  margin-top: 1.25rem;
+}
+.settings-content {
+  max-width: 48rem;
+}
+</style>
diff --git a/src/components/SettingButton.vue b/src/components/SettingButton.vue
index f602ba98..96ca920e 100644
--- a/src/components/SettingButton.vue
+++ b/src/components/SettingButton.vue
@@ -1,12 +1,18 @@
 <template>
-  <button class="setting-button p-[5px] mr-1 rounded cursor-pointer leading-[1.4]" @click="emit('click')">{{ text }}</button>
+  <button class="setting-button p-2 mr-1 rounded cursor-pointer leading-[1.4] transition duration-500" :class="{ invert: selected }" @click="emit('click')">
+    {{ text }}
+  </button>
 </template>
 <script setup lang="ts">
 const emit = defineEmits(['click']);
 defineProps<{
   text: string;
+  selected?: boolean;
 }>();
 </script>
+<script lang="ts">
+export default {};
+</script>
 <style>
 .setting-button {
   background: var(--button-background-color);
diff --git a/src/components/SettingTitle.vue b/src/components/SettingTitle.vue
deleted file mode 100644
index 66c910a0..00000000
--- a/src/components/SettingTitle.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <div class="settings-title">
-    <span>{{ text }}</span>
-  </div>
-</template>
-<script setup lang="ts">
-const { text } = defineProps<{
-  text: string;
-}>();
-</script>
-<style>
-.settings-title {
-  border-bottom: solid 1px var(--line-default-color);
-  padding-bottom: 10px;
-  max-width: 800px;
-  margin: 0 25px;
-  margin-bottom: 10px;
-  font-size: 20px;
-}
-.settings-title:first-of-type {
-  margin-top: 20px;
-}
-</style>
diff --git a/src/components/ToggleButtons.vue b/src/components/ToggleButtons.vue
new file mode 100644
index 00000000..7465f1c6
--- /dev/null
+++ b/src/components/ToggleButtons.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="toggle overflow-hidden grid grid-flow-col w-fit divide-x divide-y-0 divide-solid rounded-lg">
+    <SettingButton
+      v-for="(button, index) in options"
+      :key="index"
+      class="rounded-none mr-auto decoration-2 underline-offset-4 whitespace-pre"
+      :class="{ underline: selected === index }"
+      :text="button.text"
+      :selected="selected === index"
+      @click="emit('change', button.value)" />
+    <!-- <SettingButton text="No" /> -->
+  </div>
+</template>
+<script setup lang="ts">
+import SettingButton from './SettingButton.vue';
+const emit = defineEmits(['change']);
+const { options, selected } = defineProps<{
+  options: {
+    text: string;
+    value?: any;
+  }[];
+  selected?: number;
+}>();
+</script>
+<script lang="ts">
+export default {};
+</script>
+<style>
+.toggle {
+  border-color: var(--text-default-color);
+  text-decoration-color: var(--text-default-color);
+}
+</style>
diff --git a/src/components/TrackRow.vue b/src/components/TrackRow.vue
index c8dd20c1..95fea2ef 100644
--- a/src/components/TrackRow.vue
+++ b/src/components/TrackRow.vue
@@ -1,24 +1,22 @@
 <template>
+  <div v-if="index !== undefined" class="flex w-8 justify-end">
+    <span>{{ index + 1 }}</span>
+  </div>
   <div class="title flex-2 flex overflow-hidden items-center max-h-12">
     <!-- <a class="disabled" ng-if="song.disabled" ng-click="copyrightNotice()"> song.title </a> -->
     <vue-feather
-      v-if="!isRedHeart(song.id)"
-      class="cursor-pointer flex-none"
+      class="cursor-pointer flex-none mx-4"
       type="heart"
       size="18"
       stroke-width="1"
-      stroke="#666666"
-      @click="setRedHeart(toRaw(song), true)" />
-    <vue-feather
-      v-if="isRedHeart(song.id)"
-      class="cursor-pointer flex-none"
-      type="heart"
-      fill="red"
-      stroke="red"
-      size="18"
-      @click="setRedHeart(toRaw(song), false)" />
+      :stroke="isRedHeart(song.id) ? 'red' : '#666666'"
+      :fill="isRedHeart(song.id) ? 'red' : 'none'"
+      @click="setRedHeart(toRaw(song), !isRedHeart(song.id))" />
 
-    <a class="cursor-pointer ml-3 truncate min-w-0" @click="play(song)">{{ song.title }}</a>
+    <a class="cursor-pointer truncate min-w-0" @click="play(song)">{{ song.title }}</a>
+    <span v-if="showSource" class="px-1 mx-4 text-gray-500 text-ms text-center border border-solid rounded border-gray-500">
+      {{ t(song.source) }}
+    </span>
   </div>
   <div class="artist flex-1 truncate">
     <a class="cursor-pointer" @click="$router.push(`/playlist/${song.artist_id}`)">{{ song.artist }}</a>
@@ -48,11 +46,13 @@
   </div>
 </template>
 <script setup lang="ts">
-const { song, isMine, isLocal, listId } = defineProps<{
+const { song, isMine, isLocal, listId, index, showSource } = defineProps<{
   song: any;
   isMine?: boolean | string;
   isLocal?: boolean;
   listId?: string;
+  index?: number;
+  showSource?: boolean;
 }>();
 import { inject, toRaw } from 'vue';
 import { useI18n } from 'vue-i18n';
diff --git a/src/components/Volumebar.vue b/src/components/Volumebar.vue
index d0db2e96..cfaf076d 100644
--- a/src/components/Volumebar.vue
+++ b/src/components/Volumebar.vue
@@ -6,6 +6,7 @@
         id="volumebar"
         :progress="volume * 100"
         btn-class="h-4 w-4 bg-white border border-gray-200"
+        :tooltips="(volume * 100).toFixed(0)"
         @update-progress="changeVolume"
         @commit-progress="commitVolume"></DraggableBar>
     </div>
diff --git a/src/components/modals/AddToPlaylist.vue b/src/components/modals/AddToPlaylist.vue
index 0c6163e2..cfd0685b 100644
--- a/src/components/modals/AddToPlaylist.vue
+++ b/src/components/modals/AddToPlaylist.vue
@@ -10,7 +10,7 @@
           <h2>{{ t('_CREATE_PLAYLIST') }}</h2>
         </li>
         <li v-for="(playlist, index) in myplaylist" :key="index" class="cursor-pointer h-14 p-2 hover:bg-dialog-hover" @click="addToPlaylist(playlist.id)">
-          <img class="float-left h-10 w-10 mr-4" :src="playlist.cover_img_url" />
+          <img class="float-left h-10 w-10 mr-4" :src="playlist.cover_img_url || coverImg" />
           <h2>{{ playlist.title }}</h2>
         </li>
       </ul>
@@ -26,6 +26,7 @@ import useRedHeart from '../../composition/redheart';
 import MediaService from '../../services/MediaService';
 import notyf from '../../services/notyf';
 import DefaultModal from './DefaultModal.vue';
+import coverImg from '../../images/mycover.jpg';
 
 const { t } = useI18n();
 let myplaylist: any = $ref<unknown[]>([]);
diff --git a/src/components/modals/GistExport.vue b/src/components/modals/GistExport.vue
index 5c2f5319..5a8054f9 100644
--- a/src/components/modals/GistExport.vue
+++ b/src/components/modals/GistExport.vue
@@ -6,16 +6,16 @@
     <template #body>
       <ul class="text-left">
         <li class="cursor-pointer h-24 p-2 hover:bg-dialog-hover rounded" @click="download()">
-          <img class="float-left h-20 w-20 mr-4" src="/images/mycover.jpg" />
+          <img class="float-left h-20 w-20 mr-4" src="../../images/mycover.jpg" />
           <h2>{{ t('_EXPORT_TO_LOCAL_FILE') }}</h2>
         </li>
         <h3 v-show="githubStatus == 2" class="font-semibold mb-3">{{ t('_EXPORT_TO_GITHUB_GIST') }}</h3>
         <li v-show="githubStatus == 2" class="cursor-pointer h-24 p-2 hover:bg-dialog-hover rounded" @click="backup('', true)">
-          <img class="float-left h-20 w-20 mr-4 rounded" src="/images/mycover.jpg" />
+          <img class="float-left h-20 w-20 mr-4 rounded" src="../../images/mycover.jpg" />
           <h2>{{ t('_CREATE_PUBLIC_BACKUP') }}</h2>
         </li>
         <li v-show="githubStatus == 2" class="cursor-pointer h-24 p-2 hover:bg-dialog-hover rounded" @click="backup('', false)">
-          <img class="float-left h-20 w-20 mr-4 rounded" src="/images/mycover.jpg" />
+          <img class="float-left h-20 w-20 mr-4 rounded" src="../../images/mycover.jpg" />
           <h2>{{ t('_CREATE_PRIVATE_BACKUP') }}</h2>
         </li>
         <li
@@ -23,7 +23,7 @@
           :key="index"
           class="cursor-pointer h-24 p-2 hover:bg-dialog-hover rounded"
           @click="backup(backup.id, backup.public)">
-          <img class="float-left h-20 w-20 mr-4" src="/images/mycover.jpg" />
+          <img class="float-left h-20 w-20 mr-4" src="../../images/mycover.jpg" />
           <h2 class="flex">{{ backup.id + '\n' + new Date(backup.updated_at).toLocaleString() }}</h2>
         </li>
       </ul>
diff --git a/src/components/modals/GistImport.vue b/src/components/modals/GistImport.vue
index dd87eadb..909464de 100644
--- a/src/components/modals/GistImport.vue
+++ b/src/components/modals/GistImport.vue
@@ -7,12 +7,12 @@
       <ul class="text-left">
         <input ref="uploadInput" type="file" style="display: none" @change="upload" />
         <li class="cursor-pointer h-24 p-2 rounded hover:bg-dialog-hover" @click="uploadInput.click()">
-          <img class="float-left h-20 w-20 mr-4 rounded" src="/images/mycover.jpg" />
+          <img class="float-left h-20 w-20 mr-4 rounded" src="../../images/mycover.jpg" />
           <h2>{{ t('_RECOVER_FROM_LOCAL_FILE') }}</h2>
         </li>
         <p class="font-semibold mb-3">{{ t('_RECOVER_FROM_GITHUB_GIST') }}</p>
         <li v-for="(backup, index) in myBackup" :key="index" class="cursor-pointer h-24 p-2 rounded hover:bg-dialog-hover" @click="recover(backup.id)">
-          <img class="float-left h-20 w-20 mr-4 rounded" src="/images/mycover.jpg" />
+          <img class="float-left h-20 w-20 mr-4 rounded" src="../../images/mycover.jpg" />
           <h2 class="flex">{{ backup.id + '\n' + new Date(backup.updated_at).toLocaleString() }}</h2>
         </li>
       </ul>
diff --git a/src/components/modals/ImportPlaylist.vue b/src/components/modals/ImportPlaylist.vue
index ccfa3acc..79b7b8db 100644
--- a/src/components/modals/ImportPlaylist.vue
+++ b/src/components/modals/ImportPlaylist.vue
@@ -10,7 +10,7 @@
           :key="index"
           class="cursor-pointer h-14 p-2 rounded hover:bg-dialog-hover"
           @click="mergePlaylist(playlist.id)">
-          <img class="float-left h-10 w-10 mr-4 rounded" :src="playlist.cover_img_url" />
+          <img class="float-left h-10 w-10 mr-4 rounded" :src="playlist.cover_img_url || coverImg" />
           <h2>{{ playlist.title }}</h2>
         </li>
       </ul>
@@ -25,6 +25,7 @@ import { useI18n } from 'vue-i18n';
 import useRedHeart from '../../composition/redheart';
 import MediaService from '../../services/MediaService';
 import DefaultModal from './DefaultModal.vue';
+import coverImg from '../../images/mycover.jpg';
 
 const { t } = useI18n();
 let myplaylist: any[] = $ref<unknown[]>([]);
diff --git a/src/components/modals/OpenLogin.vue b/src/components/modals/OpenLogin.vue
index cd6575bd..8531c44a 100644
--- a/src/components/modals/OpenLogin.vue
+++ b/src/components/modals/OpenLogin.vue
@@ -32,3 +32,6 @@ const { openLogin, refreshAuthStatus } = useAuth();
 
 const { t } = useI18n();
 </script>
+<script lang="ts">
+export default {};
+</script>
diff --git a/src/manifest.ts b/src/manifest.ts
index bb3b7b6b..cb43a255 100644
--- a/src/manifest.ts
+++ b/src/manifest.ts
@@ -43,6 +43,6 @@ const mv2: ManifestV2 = {
       js: ['oauth_callback.ts']
     }
   ],
-  web_accessible_resources: ['assets/fonts/*', 'images/*', 'index.html']
+  web_accessible_resources: ['assets/fonts/*', 'index.html']
 };
 export default mv2;
diff --git a/src/provider/myplaylist.ts b/src/provider/myplaylist.ts
index d244e523..220215dd 100644
--- a/src/provider/myplaylist.ts
+++ b/src/provider/myplaylist.ts
@@ -193,7 +193,7 @@ const provider = class MyPlaylist extends MusicResource {
   static createMyplaylist(playlist_title: string, tracks: any[]) {
     const playlist = {
       info: {
-        cover_img_url: 'images/mycover.jpg',
+        cover_img_url: '',
         title: playlist_title,
         id: '',
         source_url: ''
diff --git a/src/services/DBService.ts b/src/services/DBService.ts
index b5c238c2..c96b9df2 100644
--- a/src/services/DBService.ts
+++ b/src/services/DBService.ts
@@ -87,21 +87,21 @@ const defaultPlaylists: { [key: string]: any } = {
   current: {
     id: 'current',
     title: 'current',
-    cover_img_url: 'images/mycover.jpg',
+    cover_img_url: '',
     type: 'current',
     order: []
   },
   lmplaylist_reserve: {
     id: 'lmplaylist_reserve',
     title: '本地音乐',
-    cover_img_url: 'images/mycover.jpg',
+    cover_img_url: '',
     type: 'local',
     order: []
   },
   myplaylist_redheart: {
     id: 'myplaylist_redheart',
     title: '我喜欢的音乐',
-    cover_img_url: 'images/mycover.jpg',
+    cover_img_url: '',
     type: 'my',
     order: []
   }
@@ -148,7 +148,7 @@ function migratePlaylist(tracks: any, newId: string, newTitle: string, newType:
   iDB.Playlists.put({
     id: newId,
     title: newTitle,
-    cover_img_url: 'images/mycover.jpg',
+    cover_img_url: '',
     type: newType,
     order: tracks.map((i: Record<string, unknown>) => i.id)
   });
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 8b01a781..68d6c541 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -333,10 +333,10 @@ button {
   color: var(--text-default-color);
   /* border: solid 1px var(--button-background-color); */
   border: none;
-  border-radius: 4px;
-  padding: 5px;
-  min-width: 80px;
-  min-height: 32px;
+  border-radius: 0.25rem;
+  padding: 0.3rem;
+  min-width: 5rem;
+  min-height: 2rem;
 }
 button:hover {
   background-color: var(--button-hover-background-color);
diff --git a/src/views/NowPlaying.vue b/src/views/NowPlaying.vue
index 13267448..444bdf4a 100644
--- a/src/views/NowPlaying.vue
+++ b/src/views/NowPlaying.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="page">
     <div
-      class="songdetail-wrapper absolute flex flex-col top-0 left-0 right-0 bottom-20 duration-300 app-region-nodrag bg-now-playing"
+      class="songdetail-wrapper absolute flex flex-col top-0 left-0 right-0 bottom-24 duration-500 app-region-nodrag bg-now-playing"
       :class="{
         'overflow-y-scroll': commentActive,
-        'overflow-hidden': !commentActive,
+        'overflow-hidden justify-center': !commentActive,
         slidedown: overlay.type !== 'track',
         coverbg: settings.enableNowplayingCoverBackground
       }">
@@ -13,7 +13,7 @@
         class="absolute top-0 left-0 right-0 h-24" />
       <div
         v-if="settings.enableNowplayingCoverBackground"
-        class="bg absolute opacity-50 h-full text-center w-full brightness-[0.8] blur-[90px] duration-1000 ease-in-out"
+        class="bg absolute opacity-50 h-full w-full text-center brightness-[0.8] blur-[90px] duration-1000 ease-in-out"
         :style="{ backgroundImage: `url(${currentPlaying?.img_url}` }" />
 
       <div
@@ -38,17 +38,17 @@
                 </svg>
       </div>-->
 
-      <div class="playsong-detail my-0 mx-auto flex w-[60rem] z-10">
-        <div class="detail-head overflow-hidden flex-none w-[30rem] 2xl:w-[500px] flex justify-center">
-          <div class="detail-head-cover w-72 2xl:w-96 mt-32 2xl:mr-28 transition-all ease-in-out">
-            <img class="w-full aspect-square object-cover rounded shadow-2xl" :src="currentPlaying?.img_url" @error="showImage($event, 'images/mycover.jpg')" />
+      <div class="playsong-detail flex self-center place-content-between w-[60rem] z-10" :class="{ 'mt-48': commentActive }">
+        <div class="detail-head overflow-hiddene flex items-center">
+          <div class="detail-head-cover w-72 2xl:w-96 transition-all ease-in-out">
+            <img class="w-full aspect-square object-cover rounded-lg shadow-2xl" :src="currentPlaying?.img_url" @error="showImage($event, coverImg)" />
           </div>
           <div class="detail-head-title">
             <!--<a title="加入收藏" class="clone" ng-click="showDialog(0, currentPlaying)">收藏</a>
             <a open-url="currentPlaying.source_url" title="原始链接" class="link">原始链接</a>-->
           </div>
         </div>
-        <div class="detail-songinfo flex app-region-nodrag overflow-hidden mt-28 flex-col flex-1">
+        <div class="detail-songinfo flex w-96 app-region-nodrag overflow-hidden flex-col">
           <div class="title flex items-start">
             <h2 class="font-normal text-3xl mr-4 mb-4">{{ currentPlaying?.title }}</h2>
             <span
@@ -88,26 +88,30 @@
               </a>
             </div>
           </div>
-          <div class="lyric relative flex-none h-96 overflow-y-scroll">
-            <div class="placeholder" />
+          <div class="lyric blur-mask relative flex-none h-96 overflow-y-scroll">
+            <div class="placeholder h-1/2" />
             <p
               v-for="line in lyricArray"
               :key="line.lineNumber"
               :data-line="line.lineNumber"
-              :style="{ fontWeight: lyricFontWeight, fontSize: `${lyricFontSize}px` }"
+              :style="{
+                fontWeight: lyricFontWeight,
+                fontSize: `${lyricFontSize * (isHighlighted(line.lineNumber, line.translationFlag) ? 1.2 : 1)}px`,
+                filter: `blur(${line.lineNumber === (line.translationFlag ? lyricLineNumberTrans : lyricLineNumber) ? 0.25 : 0}px)`
+              }"
               :class="{
-                highlight: (!line.translationFlag && line.lineNumber == lyricLineNumber) || (line.translationFlag && line.lineNumber == lyricLineNumberTrans),
+                highlight: isHighlighted(line.lineNumber, line.translationFlag),
                 hidden: line.translationFlag && !settings.enableLyricTranslation,
                 'mt-1': line.translationFlag,
                 'mt-4': !line.translationFlag
               }">
               {{ line.content }}
             </p>
-            <div class="placeholder" />
+            <div class="placeholder h-1/2" />
           </div>
         </div>
       </div>
-      <div v-if="commentActive" class="mt-20 mb-8 mx-auto w-[42rem] z-10">
+      <div v-if="commentActive" class="mt-20 mb-8 self-center w-[42rem] z-10">
         <div>热门评论</div>
         <ul>
           <li v-for="comment in commentList" :key="comment.id" class="flex py-4 border-b border-default">
@@ -150,6 +154,8 @@ import useSettings from '../composition/settings';
 import { datetimeFormats } from '../i18n/index';
 import MediaService from '../services/MediaService';
 import type { Comment } from '../provider/types';
+import coverImg from '../images/mycover.jpg';
+
 const { t, d } = useI18n({
   //@ts-ignore mismatch arg num
   datetimeFormats
@@ -175,6 +181,7 @@ const showPlaylist = (playlistId?: string) => {
 };
 
 const toggleLyricTranslation = () => setSettings({ enableLyricTranslation: !settings.enableLyricTranslation });
+const isHighlighted = (n: number, flag: boolean) => n == (flag ? lyricLineNumberTrans : lyricLineNumber);
 
 const showImage = (e: any, url: any) => {
   e.target.src = url;
@@ -206,7 +213,7 @@ watchEffect(async () => {
 </script>
 <style>
 .page .songdetail-wrapper.slidedown {
-  top: calc(100% - 5rem);
+  top: calc(100% - 6rem);
 }
 .page .bg {
   background-repeat: no-repeat;
@@ -253,4 +260,9 @@ watchEffect(async () => {
 .page .songdetail-wrapper .close svg {
   stroke: var(--now-playing-close-icon-color);
 } */
+
+.blur-mask {
+  mask: linear-gradient(transparent 5%, black 20%, black 80%, transparent 95%);
+  -webkit-mask: linear-gradient(transparent 5%, black 20%, black 80%, transparent 95%);
+}
 </style>
diff --git a/src/views/Playlist.vue b/src/views/Playlist.vue
index b939394e..9c02fda0 100644
--- a/src/views/Playlist.vue
+++ b/src/views/Playlist.vue
@@ -3,7 +3,7 @@
     <div class="playlist-detail">
       <div class="detail-head flex">
         <div class="detail-head-cover w-48 mx-8 mt-8 mb-1">
-          <img :src="cover_img_url" class="h-48 aspect-square rounded" err-src="https://y.gtimg.cn/mediastyle/global/img/singer_300.png" />
+          <img :src="cover_img_url || coverImg" class="h-48 aspect-square rounded" err-src="https://y.gtimg.cn/mediastyle/global/img/singer_300.png" />
         </div>
         <div class="detail-head-title flex-1">
           <h2 class="h-10 my-7 text-3xl font-semibold">{{ playlist_title }}</h2>
@@ -55,7 +55,11 @@
           <input class="playlist-search-input" type="text" ng-model="playlistFilter.key" :placeholder="$t('_SEARCH_PLAYLIST')" />
         </div>-->
         <li class="head border-t-2 border-b-2 border-transparent text-inactive -mb-2px group flex relative items-center px-6 h-12">
+          <div class="flex w-8 justify-end">
+            <span>No.</span>
+          </div>
           <div class="title flex-2 truncate flex">
+            <div class="flex-none w-5 mx-4"></div>
             <a>{{ t('_SONGS') + '(' + songs.length + ')' }}</a>
           </div>
           <div class="artist flex-1 truncate">
@@ -79,7 +83,7 @@
           @drop="onPlaylistSongDrop(listId, song, $event)"
           @mouseenter="song.options = true"
           @mouseleave="song.options = undefined">
-          <TrackRow :song="song" :is-local="is_local" :is-mine="is_mine" :list-id="listId"></TrackRow>
+          <TrackRow :index="index" :song="song" :is-local="is_local" :is-mine="is_mine" :list-id="listId"></TrackRow>
         </DragDropZone>
       </ul>
     </div>
@@ -98,6 +102,8 @@ import $event from '../services/EventService';
 import { l1Player } from '../services/l1_player';
 import MediaService from '../services/MediaService';
 import notyf from '../services/notyf';
+import loadingImg from '../images/loading.svg';
+import coverImg from '../images/mycover.jpg';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -108,7 +114,7 @@ let is_mine = computed(() => listId && listId.slice(0, 2) === 'my');
 let is_local = computed(() => listId && listId.slice(0, 2) === 'lm');
 
 let songs = $ref([]);
-let cover_img_url = $ref('images/loading.svg');
+let cover_img_url = $ref(loadingImg);
 let playlist_title = $ref('');
 let playlist_source_url = $ref('');
 let is_favorite = $ref(false);
diff --git a/src/views/Search.vue b/src/views/Search.vue
index 71ac586b..396cd004 100644
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@@ -4,7 +4,7 @@
     <div class="site-wrapper-innerd">
       <div class="cover-container">
         <div class="searchbox">
-          <SourceTab :tab="condition.tab" :sources="sourceList" :loading="result.loading" @click="changeSourceTab">
+          <SourceTab class="px-10" :tab="condition.tab" :sources="sourceList" :loading="result.loading" @click="changeSourceTab">
             <template #right>
               <div class="search-type float-right">
                 <li
@@ -56,25 +56,25 @@
               <li
                 v-for="(song, index) in result.tracks"
                 :key="song.id"
-                :class="{ 'bg-even': index % 2 === 0, 'bg-odd': index % 2 !== 0 }"
-                class="flex relative items-center px-6 h-12 hover:bg-row-hover"
+                class="flex relative items-center px-6 h-12 hover:bg-row-hover even:bg-even odd:bg-odd"
                 @mouseenter="song.options = true"
                 @mouseleave="song.options = undefined">
-                <TrackRow :song="song"></TrackRow>
+                <TrackRow :index="index" :song="song" :show-source="isAllMusic"></TrackRow>
               </li>
             </template>
             <template v-if="condition.searchType === 1">
               <li
-                v-for="(playlist, index) in result.tracks"
+                v-for="playlist in result.tracks"
                 :key="playlist.id"
-                :class="{ 'bg-even': index % 2 === 0, 'bg-odd': index % 2 !== 0 }"
-                class="playlist-result flex relative items-center px-10 h-20 hover:bg-row-hover">
+                class="playlist-result flex relative items-center px-10 h-20 hover:bg-row-hover even:bg-even odd:bg-odd">
                 <div class="title flex-2 truncate">
                   <a class="cursor-pointer flex" @click="$router.push(`/playlist/${playlist.id}`)">
                     <img class="h-16 w-16 block mr-3" :src="playlist.img_url" err-src="https://y.gtimg.cn/mediastyle/global/img/playlist_300.png" />
                     <div>
                       {{ playlist.title }}
-                      <!-- <span ng-if="isActiveTab('allmusic')" class="source playlist">{{playlist.sourceName}}</span> -->
+                      <span v-if="isAllMusic" class="px-1 mx-4 text-gray-500 text-ms text-center border border-solid rounded border-gray-500">
+                        {{ playlist.source }}
+                      </span>
                     </div>
                   </a>
                 </div>
@@ -118,22 +118,7 @@ const changeSearchPage = (offset: number) => {
 };
 
 const sourceList = computed(() => [{ name: 'allmusic', displayId: '_ALL_MUSIC' }, ...MediaService.getSourceList().filter((source) => source.searchable)]);
+const isAllMusic = computed(() => condition.tab === 'allmusic');
 </script>
 
-<style>
-ul.detail-songlist li a span.source {
-  border: solid 1px #ccc;
-  border-radius: 4px;
-  margin-right: 10px;
-  display: inline-block;
-  padding: 0 4px;
-  color: #ccc;
-  font-size: 12px;
-  width: 24px;
-  text-align: center;
-}
-ul.detail-songlist li a span.source.playlist {
-  margin-left: 10px;
-  margin-right: 0;
-}
-</style>
+<style></style>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 89485568..6acf500d 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -2,100 +2,60 @@
   <!-- content page: 设置 -->
   <div class="page" ng-init="lastfm.updateStatus()">
     <div class="site-wrapper-innerd">
-      <div class="cover-container leading-normal">
-        <SettingTitle :text="t('_LANGUAGE')" />
-        <div class="settings-content mx-7 mb-7 leading-8">
-          <SettingButton text="简体中文" @click="setLocale('zh-CN')" />
-          <SettingButton text="繁体中文" @click="setLocale('zh-TC')" />
-          <SettingButton text="English" @click="setLocale('en-US')" />
-          <SettingButton text="French" @click="setLocale('fr-FR')" />
-        </div>
-        <SettingTitle :text="t('_BACKUP_PLAYLIST')" />
-        <div class="settings-content mx-7 mb-7 leading-8">
+      <div class="cover-container leading-normal flex content-left flex-col flex-wrap gap-4 2xl:h-[calc(100vh-10rem)] 2xl:overflow-y-hidden">
+        <SettingBlock :title="t('_LANGUAGE')">
+          <ToggleButtons :options="locales" :selected="locales.findIndex((i) => i.value === settings.language)" @change="setLocale($event)" />
+        </SettingBlock>
+        <SettingBlock :title="t('_BACKUP_PLAYLIST')">
           <p>{{ t('_BACKUP_WARNING') }}</p>
           <div>
             <SettingButton :text="t('_BACKUP_PLAYLIST')" @click="showModal('GistExport')" />
           </div>
-        </div>
-        <SettingTitle :text="t('_RECOVER_PLAYLIST')" />
-        <div class="settings-content mx-7 mb-7 leading-8">
+        </SettingBlock>
+
+        <SettingBlock :title="t('_RECOVER_PLAYLIST')">
           <p>{{ t('_RECOVER_WARNING') }}</p>
           <SettingButton :text="t('_RECOVER_PLAYLIST')" @click="showModal('GistImport')" />
-        </div>
-        <SettingTitle :text="t('_NOWPLAYING_DISPLAY')" />
-        <div class="settings-content mx-7 mb-7 leading-8">
-          <div class="shortcut flex items-center">
-            <vue-feather
-              v-show="!settings.enableNowplayingCoverBackground"
-              class="cursor-pointer mr-2"
-              size="1.25rem"
-              type="square"
-              @click="toggleCoverBackground"></vue-feather>
-            <vue-feather
-              v-show="settings.enableNowplayingCoverBackground"
-              class="cursor-pointer mr-2"
-              size="1.25rem"
-              type="check-square"
-              @click="toggleCoverBackground"></vue-feather>
+        </SettingBlock>
+
+        <SettingBlock :title="t('_NOWPLAYING_DISPLAY')">
+          <label class="shortcut flex items-center mt-4">
             {{ t('_NOWPLAYING_COVER_BACKGROUND_NOTICE') }}
-          </div>
-          <div class="shortcut flex items-center">
-            <vue-feather
-              v-show="!settings.enableNowplayingBitrate"
-              class="cursor-pointer mr-2"
-              size="1.25rem"
-              type="square"
-              @click="toggleBitrate"></vue-feather>
-            <vue-feather
-              v-show="settings.enableNowplayingBitrate"
-              class="cursor-pointer mr-2"
-              size="1.25rem"
-              type="check-square"
-              @click="toggleBitrate"></vue-feather>
+          </label>
+          <ToggleButtons
+            :options="singleSwitch"
+            :selected="singleSwitch.findIndex((i) => i.value === settings.enableNowplayingCoverBackground)"
+            @change="setSettings({ enableNowplayingCoverBackground: $event })" />
+          <label class="shortcut flex items-center mt-4">
             {{ t('_NOWPLAYING_BITRATE_NOTICE') }}
-          </div>
-          <div class="shortcut flex items-center">
-            <vue-feather
-              v-show="!settings.enableNowplayingPlatform"
-              class="cursor-pointer mr-2"
-              size="1.25rem"
-              type="square"
-              @click="togglePlayingPlatform"></vue-feather>
-            <vue-feather
-              v-show="settings.enableNowplayingPlatform"
-              class="cursor-pointer mr-2"
-              size="1.25rem"
-              type="check-square"
-              @click="togglePlayingPlatform"></vue-feather>
+          </label>
+          <ToggleButtons
+            :options="singleSwitch"
+            :selected="singleSwitch.findIndex((i) => i.value === settings.enableNowplayingBitrate)"
+            @change="setSettings({ enableNowplayingBitrate: $event })" />
+
+          <label class="shortcut flex items-center mt-4">
             {{ t('_NOWPLAYING_PLATFORM_NOTICE') }}
-          </div>
-          <div class="shortcut flex items-center">
-            <vue-feather
-              v-show="!settings.enableNowplayingComment"
-              class="cursor-pointer mr-2"
-              size="1.25rem"
-              type="square"
-              @click="togglePlayingComment"></vue-feather>
-            <vue-feather
-              v-show="settings.enableNowplayingComment"
-              class="cursor-pointer mr-2"
-              size="1.25rem"
-              type="check-square"
-              @click="togglePlayingComment"></vue-feather>
+          </label>
+          <ToggleButtons
+            :options="singleSwitch"
+            :selected="singleSwitch.findIndex((i) => i.value === settings.enableNowplayingPlatform)"
+            @change="setSettings({ enableNowplayingPlatform: $event })" />
+
+          <label class="shortcut flex items-center mt-4">
             {{ t('_NOWPLAYING_COMMENT') }}
-          </div>
-        </div>
-        <SettingTitle :text="t('_THEME')" />
-        <div class="settings-content mx-7 mb-7 leading-8">
-          <SettingButton :text="t('_THEME_WHITE')" @click="setTheme('white')" />
-          <SettingButton :text="t('_THEME_BLACK')" @click="setTheme('black')" />
-          <!-- <SettingButton :text="t('_THEME_WHITE_TRANSPARENT')" @click="setTheme('white_transparent')" />
-          <SettingButton :text="t('_THEME_BLACK_TRANSPARENT')" @click="setTheme('black_transparent')" /> -->
-          <SettingButton :text="t('_THEME_INFINITE_GRID')" @click="setTheme('infinite_grid')" />
-          <SettingButton :text="t('_THEME_GRIDIENT')" @click="setTheme('gridient')" />
-        </div>
-        <SettingTitle :text="t('_STYLE')" />
-        <div class="settings-content mx-7 mb-7 leading-8">
+          </label>
+          <ToggleButtons
+            :options="singleSwitch"
+            :selected="singleSwitch.findIndex((i) => i.value === settings.enableNowplayingComment)"
+            @change="setSettings({ enableNowplayingComment: $event })" />
+        </SettingBlock>
+
+        <SettingBlock :title="t('_THEME')">
+          <ToggleButtons :options="themes" :selected="themes.findIndex((i) => i.value === settings.theme)" @change="setTheme($event)" />
+        </SettingBlock>
+
+        <SettingBlock :title="t('_STYLE')">
           <p>
             {{ `${t('_LYRIC_SIZE')}` }}
             <input v-model.lazy="settings.lyricFontSize" class="settings-input w-16 pl-[6px] py-0" type="number" min="10" max="40" />
@@ -112,56 +72,38 @@
           <div class="setting-font-preview">
             <p :style="{ fontWeight: settings.lyricFontWeight, fontSize: `${settings.lyricFontSize}px` }">Listen1，自由的享受音乐的乐趣</p>
           </div>
-        </div>
-        <SettingTitle :text="t('_AUTO_CHOOSE_SOURCE')" />
-        <div class="settings-content mx-7 mb-7 leading-8">
-          <div class="shortcut btn btn-primary confirm-button flex items-center">
-            <vue-feather
-              v-show="!settings.enableAutoChooseSource"
-              class="cursor-pointer mr-2"
-              size="1.25rem"
-              type="square"
-              @click="setAutoChooseSource(true)"></vue-feather>
-            <vue-feather
-              v-show="settings.enableAutoChooseSource"
-              class="cursor-pointer mr-2"
-              size="1.25rem"
-              type="check-square"
-              @click="setAutoChooseSource(false)"></vue-feather>
+        </SettingBlock>
+
+        <SettingBlock :title="t('_AUTO_CHOOSE_SOURCE')">
+          <label class="shortcut btn btn-primary confirm-button flex items-center">
             {{ t('_AUTO_CHOOSE_SOURCE_NOTICE') }}
-          </div>
+          </label>
+          <ToggleButtons
+            :options="singleSwitch"
+            :selected="singleSwitch.findIndex((i) => i.value === settings.enableAutoChooseSource)"
+            @change="setAutoChooseSource($event)" />
           <div v-show="settings.enableAutoChooseSource" class="search-description mt-8">{{ t('_AUTO_CHOOSE_SOURCE_LIST') }}</div>
-          <div v-show="settings.enableAutoChooseSource" class="search-source-list flex items-center flex-wrap leading-10">
-            <div v-for="item in sourceList" :key="item.name" class="search-source w-32 flex items-center">
-              <vue-feather
-                v-show="settings.autoChooseSourceList.indexOf(item.name) === -1"
-                type="square"
-                class="cursor-pointer mr-2"
-                size="1.25rem"
-                @click="enableSource(item.name)"></vue-feather>
-              <vue-feather
-                v-show="settings.autoChooseSourceList.indexOf(item.name) > -1"
-                type="check-square"
-                class="cursor-pointer mr-2"
-                size="1.25rem"
-                @click="disableSource(item.name)"></vue-feather>
-              {{ t(item.displayId) }}
+          <div v-show="settings.enableAutoChooseSource" class="search-source-list flex items-center flex-wrap leading-10 gap-4">
+            <div v-for="item in sourceList" :key="item.name" class="search-source flex">
+              <label class="w-32 text-center">{{ t(item.displayId) }}</label>
+              <ToggleButtons
+                :options="singleSwitch"
+                :selected="settings.autoChooseSourceList.includes(item.name) ? 0 : 1"
+                @change="($event ? enableSource : disableSource)(item.name)" />
             </div>
           </div>
-        </div>
-        <SettingTitle :text="t('_CONNECT_TO_GITHUB')" />
-        <div class="settings-content mx-7 mb-7 leading-8">
-          <div>
-            <p>{{ t('_STATUS') }}: {{ githubStatusText }}</p>
-            <SettingButton v-show="githubStatus == 0" :text="t('_CONNECT_TO_GITHUB')" @click="openGithubAuth()" />
-            <SettingButton v-show="githubStatus == 1" :text="t('_RECONNECT')" @click="showModal('GithubAuth')" />
-            <SettingButton v-show="githubStatus == 2" :text="t('_CANCEL_CONNECT')" @click="logoutGithub()" />
-          </div>
-        </div>
+        </SettingBlock>
+
+        <SettingBlock :title="t('_CONNECT_TO_GITHUB')">
+          <p>{{ t('_STATUS') }}: {{ githubStatusText }}</p>
+          <SettingButton v-show="githubStatus == 0" :text="t('_CONNECT_TO_GITHUB')" @click="openGithubAuth()" />
+          <SettingButton v-show="githubStatus == 1" :text="t('_RECONNECT')" @click="showModal('GithubAuth')" />
+          <SettingButton v-show="githubStatus == 2" :text="t('_CANCEL_CONNECT')" @click="logoutGithub()" />
+        </SettingBlock>
         <!-- <div ng-if="isChrome" class="settings-title">
           <span>{{ $t('_CLOSE_TAB_ACTION') }}({{ $t('_VALID_AFTER_RESTART') }})</span>
         </div>
-        <div ng-if="isChrome" class="settings-content mx-7 mb-7 leading-8">
+        <div ng-if="isChrome" class="settings-content">
           <div class="shortcut flex items-center">
             <vue-feather v-show="!enableStopWhenClose" type="square" ng-click="setStopWhenClose(true)"></vue-feather>
             <vue-feather v-show="enableStopWhenClose" type="check-square" ng-click="setStopWhenClose(false)"></vue-feather>
@@ -174,7 +116,7 @@
         <div class="settings-title">
           <span>{{ $t('_NOWPLAYING_DISPLAY') }}</span>
         </div>
-        <div class="settings-content mx-7 mb-7 leading-8">
+        <div class="settings-content">
           <div class="shortcut flex items-center">
             <vue-feather v-show="!enableNowplayingCoverBackground" type="square" ng-click="setNowplayingCoverBackground(true)"></vue-feather>
             <vue-feather v-show="enableNowplayingCoverBackground" type="check-square" ng-click="setNowplayingCoverBackground(true)"></vue-feather>
@@ -194,7 +136,7 @@
         <div class="settings-title">
           <span>{{ $t('_LYRIC_DISPLAY') }}</span>
         </div>
-        <div class="settings-content mx-7 mb-7 leading-8">
+        <div class="settings-content">
           <div class="shortcut flex items-center" ng-if="!isChrome">
             <vue-feather v-show="!enableLyricFloatingWindow" type="square" ng-click="openLyricFloatingWindow(true)"></vue-feather>
             <vue-feather v-show="enableLyricFloatingWindow" type="check-square" ng-click="openLyricFloatingWindow(true)"></vue-feather>
@@ -218,7 +160,7 @@
         <div class="settings-title">
           <span>{{ $t('_CONNECT_TO_LASTFM') }}</span>
         </div>
-        <div class="settings-content mx-7 mb-7 leading-8">
+        <div class="settings-content">
           <div>
             <p>{{ $t('_STATUS') }}： lastfm.getStatusText()</p>
             <button class="btn btn-primary confirm-button" ng-show="!lastfm.isAuthRequested()" ng-click="lastfm.getAuth(); showDialog(4);">
@@ -239,7 +181,7 @@
         <div class="settings-title">
           <span>{{ $t('_SHORTCUTS') }}</span>
         </div>
-        <div class="settings-content mx-7 mb-7 leading-8">
+        <div class="settings-content">
           <div class="shortcut_table">
             <div class="shortcut_table-header">
               <div class="shortcut_table-function">{{ $t('_SHORTCUTS_FUNCTION') }}</div>
@@ -318,14 +260,13 @@
         <div class="settings-title" ng-if="!isChrome">
           <span>{{ $t('_PROXY_CONFIG') }}</span>
         </div>
-        <div class="settings-content mx-7 mb-7 leading-8" ng-if="!isChrome">
+        <div class="settings-content" ng-if="!isChrome">
           <span>{{ $t('_PROXY_CONFIG') }}:</span>
           proxyMode.displayText
           <span v-show="proxyMode_name == 'custom'">proxyRules</span>
           <button ng-click="showDialog(12)">{{ $t('_MODIFY') }}</button>
         </div>-->
-        <SettingTitle :text="t('_ABOUT')" />
-        <div class="settings-content mx-7 mb-7 leading-8">
+        <SettingBlock :title="t('_ABOUT')">
           <p>
             Listen 1 {{ t('_HOMEPAGE') }}:
             <Href to="https://listen1.github.io/listen1/" />
@@ -343,7 +284,7 @@
           <p>{{ `${t('_VERSION')}: v${version}` }} (DEVELOPER VERSION)</p>
           <p>LICENSE: {{ t('_LICENSE_NOTICE') }}</p>
           <!-- <p v-show="lastestVersion != ''">{{ $t('_LATEST_VERSION') }}: lastestVersion</p> -->
-        </div>
+        </SettingBlock>
       </div>
     </div>
   </div>
@@ -355,7 +296,8 @@ import { useI18n } from 'vue-i18n';
 import { version } from '../../package.json';
 import Href from '../components/Href.vue';
 import SettingButton from '../components/SettingButton.vue';
-import SettingTitle from '../components/SettingTitle.vue';
+import ToggleButtons from '../components/ToggleButtons.vue';
+import SettingBlock from '../components/SettingBlock.vue';
 import useSettings from '../composition/settings';
 import { setLocale } from '../i18n';
 import EventService from '../services/EventService';
@@ -476,16 +418,71 @@ const sourceList = [
   }
 ];
 
+const locales = [
+  {
+    text: '简体中文',
+    value: 'zh-CN'
+  },
+  {
+    text: '繁体中文',
+    value: 'zh-TC'
+  },
+  {
+    text: 'English',
+    value: 'en-US'
+  },
+  {
+    text: 'French',
+    value: 'fr-FR'
+  }
+];
+
+const themes = [
+  {
+    text: t('_THEME_WHITE'),
+    value: 'white'
+  },
+  {
+    text: t('_THEME_BLACK'),
+    value: 'black'
+  },
+  {
+    //   text: t('_THEME_WHITE_TRANSPARENT'),
+    //   value: 'white_transparent',
+    // },{
+    //   text: t('_THEME_BLACK_TRANSPARENT'),
+    //   value: 'black_transparent',
+    // },{
+    text: t('_THEME_INFINITE_GRID'),
+    value: 'infinite_grid'
+  },
+  {
+    text: t('_THEME_GRIDIENT'),
+    value: 'gridient'
+  }
+];
+
+const singleSwitch = [
+  {
+    text: '  ✔  ',
+    value: true
+  },
+  {
+    text: '  ✖  ',
+    value: false
+  }
+];
+
 EventService.on('github:status', updateGithubStatus);
 </script>
 <style>
 .settings-input {
-  margin-left: 10px;
+  margin-left: 0.5rem;
   text-align: left;
   background-color: var(--content-background-color);
   border: 1px solid var(--search-input-background-color);
-  border-radius: 4px;
-  margin-right: 4px;
+  border-radius: 0.25rem;
+  margin-right: 0.25rem;
   color: var(--text-default-color);
   transition: background-color 0.2s;
 }
@@ -496,25 +493,10 @@ EventService.on('github:status', updateGithubStatus);
   color: var(--lyric-default-color);
   display: flex;
   align-items: center;
-  height: 40px;
+  height: 2.5rem;
   overflow: hidden;
 }
 
-/* .page .settings-content {
-  margin: 0 25px 25px 25px;
-} */
-/* .page .settings-content label.upload-button {
-  padding: 5px;
-  background: var(--button-background-color);
-  margin-right: 4px;
-  color: var(--text-default-color);
-  cursor: pointer;
-}
-
-.page .settings-content label.upload-button:hover {
-  background: var(--button-hover-background-color);
-} */
-
 /* .page .settings-content .shortcut {
   display: flex;
   margin-top: 10px;
diff --git a/vite.config.ts b/vite.config.ts
index 6b156c7c..5d40ebd5 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,7 +2,7 @@ import vueI18n from '@intlify/vite-plugin-vue-i18n';
 import vue from '@vitejs/plugin-vue';
 import { chromeExtension, simpleReloader } from 'rollup-plugin-chrome-extension';
 import zip from 'rollup-plugin-zip';
-import { defineConfig, build } from 'vite';
+import { defineConfig } from 'vite';
 
 const { NODE_ENV, BUILD_ELECTRON } = process.env;
 const production = NODE_ENV === 'production';