diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/song-request-station.html b/song-request-station.html
index e19d578..fb85844 100644
--- a/song-request-station.html
+++ b/song-request-station.html
@@ -47,7 +47,9 @@
                         <div class="fill-item" v-for="(item, index) in tagsFill" :key="index" :class="[`item${ item.type }`]"></div>
                     </div>
                     <div class="list" id="bubbleContainer" ref="container">
-                        <div class="tag-item" v-for="(item, index) in tags" :key="index" :class="[`item${ item.type }`, {'red': item.isred}]" @click="clickSongs(item.tag, item.songs)" @mouseleave="handleMouseleave" @mouseenter="handleMouseenter">{{ item.tag }}</div>
+                        <div class="tag-item" v-for="(item, index) in tags" :key="index" :class="[`item${ item.type }`, {'red': item.isred},{'show': playData?.tag == item.tag}]" @click="clickSongs(item.tag, item.songs)" @mouseleave="handleMouseleave" @mouseenter="handleMouseenter">
+                            <div class="tag-text">{{ item.tag }}</div>
+                        </div>
                     </div>
                 </div>
 
diff --git a/static/css/song-request-station.css b/static/css/song-request-station.css
index 2ed0c31..50a8bc7 100644
--- a/static/css/song-request-station.css
+++ b/static/css/song-request-station.css
@@ -300,51 +300,89 @@
   border-radius: 18px;
 }
 .tag-item {
-  height: 60px;
-  line-height: 60px;
+  height: 66px;
   border-radius: 12px;
-  background: #d5e7f7;
   position: absolute;
   font-size: 20px !important;
   color: #1c3e5e;
-  padding: 0 25px;
   width: fit-content;
   cursor: pointer;
-  box-shadow: 0px 0 0 3px rgba(255, 255, 255, 0.223529);
+  background: rgba(255, 255, 255, 0.223529);
   opacity: 1 !important;
+  padding: 3px;
+}
+.tag-item.show::after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 12px;
+  background: linear-gradient(var(--rotate), #db4743, #ffffff 43%, #c28846);
+  animation: bg 1.3s infinite linear;
+}
+@property --rotate {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+@keyframes bg {
+  0% {
+    --rotate: 0deg;
+  }
+  100% {
+    --rotate: 360deg;
+  }
+}
+.tag-item .tag-text {
+  background: #d5e7f7;
+  padding: 0 25px;
+  border-radius: 10px;
+  height: 100%;
+  display: flex;
+  align-items: center;
   transition: background 0.3s, color 0.3s, z-index 0.3s, font-weight 0.3s;
+  position: relative;
+  z-index: 1;
 }
 .tag-item:hover {
   font-weight: 650;
   color: #583a05 !important;
-  background: #f19a04 !important;
   z-index: 100 !important;
 }
+.tag-item:hover .tag-text {
+  background: #f19a04 !important;
+}
 .tag-item.item2 {
-  height: 50px;
-  line-height: 50px;
+  height: 56px;
   color: #1c3e5e;
-  padding: 0 20px;
   font-size: 18px !important;
+}
+.tag-item.item2 .tag-text {
+  padding: 0 20px;
   background: #d5e7f7;
 }
 .tag-item.item3 {
-  height: 47px;
-  line-height: 47px;
+  height: 53px;
   color: #1c3e5e;
-  padding: 0 16px;
   font-size: 16px !important;
+}
+.tag-item.item3 .tag-text {
+  padding: 0 16px;
   background: #d5e7f7;
 }
 .tag-item.item4 {
-  height: 30px;
-  line-height: 30px;
+  height: 36px;
   color: #1c3e5e;
-  padding: 0 10px;
   font-size: 14px !important;
+}
+.tag-item.item4 .tag-text {
+  padding: 0 10px;
   background: #d5e7f7;
 }
-.tag-item.red {
+.tag-item.red .tag-text {
   color: #62263c !important;
   background: linear-gradient(180deg, #ff8eba 0%, #f4458c 100%);
 }
diff --git a/static/css/song-request-station.less b/static/css/song-request-station.less
index 4883ed7..f1f143e 100644
--- a/static/css/song-request-station.less
+++ b/static/css/song-request-station.less
@@ -356,70 +356,111 @@
 }
 
 .tag-item {
-    height: 60px;
-    line-height: 60px;
-    // border-radius: 30px;
+    height: 66px;
+    // line-height: 60px;
     border-radius: 12px;
-    background: #d5e7f7;
+    // background: #d5e7f7;
     position: absolute;
     font-size: 20px !important;
     color: #1c3e5e;
-    padding: 0 25px;
     width: fit-content;
     cursor: pointer;
-    box-shadow: 0px 0 0 3px rgba(255, 255, 255, 0.223529);
+    // box-shadow: 0px 0 0 3px rgba(255, 255, 255, 0.223529);
+    background: rgba(255, 255, 255, 0.223529);
     opacity: 1 !important;
-    transition: background 0.3s, color 0.3s, z-index 0.3s, font-weight 0.3s;
+    // transition: background 0.3s, color 0.3s, z-index 0.3s, font-weight 0.3s;
+    padding: 3px;
+
+    &.show::after {
+        content: "";
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        border-radius: 12px;
+
+        background: linear-gradient(var(--rotate), #db4743, #ffffff 43%, #c28846);
+        animation: bg 1.3s infinite linear;
+    }
+
+    @property --rotate {
+        syntax: "<angle>";
+        initial-value: 0deg;
+        inherits: false;
+    }
+
+    @keyframes bg {
+        0% {
+            --rotate: 0deg;
+        }
+
+        100% {
+            --rotate: 360deg;
+        }
+    }
+
+    .tag-text {
+        background: #d5e7f7;
+        padding: 0 25px;
+        border-radius: 10px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        transition: background 0.3s, color 0.3s, z-index 0.3s, font-weight 0.3s;
+        position: relative;
+        z-index: 1;
+    }
 
     &:hover {
         font-weight: 650;
         color: #583a05 !important;
-        background: rgba(241, 154, 4, 1) !important;
         z-index: 100 !important;
+        .tag-text {
+            background: rgba(241, 154, 4, 1) !important;
+        }
     }
 
     &.item2 {
-        height: 50px;
-        line-height: 50px;
-        // border-radius: 25px;
+        height: 56px;
         color: #1c3e5e;
-        padding: 0 20px;
         font-size: 18px !important;
-        background: #d5e7f7;
+
+        .tag-text {
+            padding: 0 20px;
+            background: #d5e7f7;
+        }
     }
 
     &.item3 {
-        height: 47px;
-        line-height: 47px;
-        // border-radius: 25px;
+        height: 53px;
         color: #1c3e5e;
-        padding: 0 16px;
         font-size: 16px !important;
-        background: #d5e7f7;
+
+        .tag-text {
+            padding: 0 16px;
+            background: #d5e7f7;
+        }
     }
 
     &.item4 {
-        height: 30px;
-        line-height: 30px;
-        // border-radius: 30px;
+        height: 36px;
         color: #1c3e5e;
-        padding: 0 10px;
         font-size: 14px !important;
-        background: #d5e7f7;
+
+        .tag-text {
+            padding: 0 10px;
+            background: #d5e7f7;
+        }
     }
 
     &.red {
-        color: #62263c !important;
-        background: linear-gradient(180deg, #ff8eba 0%, #f4458c 100%);
+        .tag-text {
+            color: #62263c !important;
+            background: linear-gradient(180deg, #ff8eba 0%, #f4458c 100%);
+        }
     }
-
-    // &.red:hover {
-    //     font-weight: 650;
-    //     color: #583a05 !important;
-    //     // background-color: rgba(241, 154, 4, 1) !important;
-    //     background-color: rgb(255, 255, 255) !important;
-    //     z-index: 100 !important;
-    // }
 }
 
 .bottom-play {
diff --git a/static/js/song-request-station.js b/static/js/song-request-station.js
index 1728f8f..aceeaf1 100644
--- a/static/js/song-request-station.js
+++ b/static/js/song-request-station.js
@@ -404,6 +404,8 @@ createApp({
             setTimeout(() => {
                 if (audio?.src != item.path) audio.src = `./static/mp3/station/${item.path}`;
                 audio.play().then(() => (playData.value = { ...item, state: true }));
+
+                console.log("playData.value", playData.value);
             }, 500);
         };