diff --git a/src/renderer/style.less b/src/renderer/style.less
index 45636582..9e3721dd 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -2139,7 +2139,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 }
 
 .md-btn {
-  background: rgba(100, 100, 100, 0.5);
+  background: rgb(100 100 100 / 25%);
   padding: 8px 14px;
   border-radius: 6px;
   font-size: 14px;
@@ -2161,8 +2161,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 
   &.md-btn-primary {
-    background: var(--keyColor);
+    background: rgb(255 43 82 / 50%);
     color: white;
+    border: 1px solid rgb(220 53 69 / 25%);
+    border-top: 1px solid rgb(220 53 69 / 50%);
   }
 
   &:hover {
@@ -2230,11 +2232,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   padding: 6px;
   border-radius: 6px;
   border: 1px solid rgba(200, 200, 200, 0.1);
+  border-top: 1px solid rgba(100, 100, 100, 0.5);
   font-family: inherit;
   font-size: 14px;
   background: rgba(100, 100, 100, 0.25);
-  color: #c8c8c8;
-  font-weight: 500;
+  color: #eee;
 
   option {
     font-size: 1em;
diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs
index acdeb392..0ed0c5c8 100644
--- a/src/renderer/views/pages/cider-playlist.ejs
+++ b/src/renderer/views/pages/cider-playlist.ejs
@@ -62,11 +62,11 @@
                                 </div>
                             </template>
                             <div class="playlist-controls" v-observe-visibility="{callback: isHeaderVisible}">
-                                <button class="md-btn md-btn-icon" style="min-width: 100px;"
+                                <button class="md-btn md-btn-primary md-btn-icon" style="min-width: 100px;"
                                         @click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play">
                                         {{app.getLz('term.play')}}
                                 </button>
-                                <button class="md-btn md-btn-icon" style="min-width: 100px;"
+                                <button class="md-btn md-btn-primary md-btn-icon" style="min-width: 100px;"
                                         @click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle">
                                         {{app.getLz('term.shuffle')}}
                                 </button>
@@ -98,11 +98,11 @@
                     </div>
                     <div class="col-auto flex-center">
                         <div>
-                            <button class="md-btn md-btn-icon" style="min-width: 100px;"
+                            <button class="md-btnmd-btn-primary  md-btn-icon" style="min-width: 100px;"
                                     @click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play">
                                     {{app.getLz('term.play')}}
                             </button>
-                            <button class="md-btn md-btn-icon" style="min-width: 100px;"
+                            <button class="md-btnmd-btn-primary  md-btn-icon" style="min-width: 100px;"
                                     @click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle">
                                     {{app.getLz('term.shuffle')}}
                             </button>