diff --git a/ui/src/themes/catppuccinFrappe.css.js b/ui/src/themes/catppuccinFrappe.css.js
new file mode 100644
index 000000000..f927d3ba1
--- /dev/null
+++ b/ui/src/themes/catppuccinFrappe.css.js
@@ -0,0 +1,158 @@
+const stylesheet = `
+  .react-jinke-music-player-main svg:active,
+  .react-jinke-music-player-main svg:hover {
+    color: #949cbb; /* overlay2 */
+  }
+
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle,
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-track {
+    background-color: #a5adce; /* subtext0 */
+  }
+
+  .react-jinke-music-player-main ::-webkit-scrollbar-thumb {
+    background-color: #a5adce; /* subtext0 */
+  }
+
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
+    box-shadow: 0 0 2px #a5adce; /* subtext0 */
+  }
+
+  .react-jinke-music-player-main .audio-item.playing svg {
+    color: #a5adce; /* subtext0 */
+  }
+
+  .react-jinke-music-player-main .audio-item.playing .player-singer {
+    color: #a5adce !important;
+  }
+
+  .react-jinke-music-player-main .loading svg {
+    color: #a5adce !important;
+  }
+
+
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle {
+    border: hidden;
+    box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
+  }
+
+
+  .rc-slider-rail, .rc-slider-track {
+    height: 6px;
+  }
+
+  .rc-slider {
+    padding: 3px 0;
+  }
+
+  .sound-operation > div:nth-child(4) {
+    transform: translateX(-50%) translateY(5%) !important;
+  }
+
+  .sound-operation {
+    padding: 4px 0;
+  }
+
+  .react-jinke-music-player-main .music-player-panel {
+    background-color: #292c3c; /* mantle */
+    color: #c6d0f5; /* text */
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
+  }
+
+  .audio-lists-panel {
+    background-color: #292c3c; /* mantle */
+    bottom: 6.25rem;
+    box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
+  }
+
+  .audio-lists-panel-content .audio-item.playing {
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  .audio-lists-panel-content .audio-item:nth-child(2n+1) {
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  .audio-lists-panel-content .audio-item:active,
+  .audio-lists-panel-content .audio-item:hover {
+    background-color:rgba(255, 255, 255, 0.08);
+  }
+
+  .audio-lists-panel-header {
+    border-bottom:1px solid #414559; /* surface0 */
+  }
+
+  .react-jinke-music-player-main .music-player-panel .panel-content .player-content .audio-lists-btn {
+    background-color:rgba(0,0,0,0);
+    box-shadow:0 0 0 0;
+  }
+
+  .audio-lists-panel-content .audio-item {
+    line-height: 32px;
+  }
+
+  .react-jinke-music-player-main .music-player-panel .panel-content .img-content {
+    box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
+  }
+
+  .react-jinke-music-player-main .music-player-lyric {
+    color: #a5adce; /* subtext0 */
+    -webkit-text-stroke: 0.5px #303446; /* base */
+    font-weight: bolder;
+  }
+
+  .react-jinke-music-player-main .lyric-btn-active,
+  .react-jinke-music-player-main .lyric-btn-active svg {
+    color: #a5adce !important;
+  }
+
+  .audio-lists-panel-header {
+    border-bottom:1px solid rgba(0, 0, 0, 0.25);
+    box-shadow:none;
+  }
+
+  .audio-lists-panel-content .audio-item.playing,
+  .audio-lists-panel-content .audio-item.playing svg {
+    color: #a5adce; /* subtext0 */
+  }
+
+  .audio-lists-panel-content .audio-item:active .group:not([class=".player-delete"]) svg,
+  .audio-lists-panel-content .audio-item:hover .group:not([class=".player-delete"]) svg {
+    color: #a5adce; /* subtext0 */
+  }
+
+  .audio-lists-panel-content .audio-item .player-icons {
+    scale: 75%;
+  }
+
+  .audio-lists-panel-content .audio-item:active,
+  .audio-lists-panel-content .audio-item:hover {
+    background-color: #51576d; /* surface1 */
+  }
+
+/* Mobile */
+
+  .react-jinke-music-player-mobile-cover {
+    border: none;
+    box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
+  }
+
+  .react-jinke-music-player .music-player-controller {
+    border: none;
+    box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
+    color: #a5adce; /* subtext0 */
+  }
+
+  .react-jinke-music-player .music-player-controller .music-player-controller-setting {
+    color: rgba(122,160,236,.3);
+  }
+
+  .react-jinke-music-player-mobile-progress .rc-slider-handle, .react-jinke-music-player-mobile-progress .rc-slider-track {
+    background-color: #a5adce; /* subtext0 */
+  }
+
+  .react-jinke-music-player-mobile-progress .rc-slider-handle {
+    border: none;
+  }
+`
+
+export default stylesheet
diff --git a/ui/src/themes/catppuccinFrappe.js b/ui/src/themes/catppuccinFrappe.js
new file mode 100644
index 000000000..87ff6258f
--- /dev/null
+++ b/ui/src/themes/catppuccinFrappe.js
@@ -0,0 +1,106 @@
+import stylesheet from './catppuccinFrappe.css.js'
+
+export default {
+  themeName: 'Catppuccin Frappé',
+  palette: {
+    primary: {
+      main: '#ca9ee6', // Mauve
+    },
+    secondary: {
+      main: '#292c3c', //Mantle
+      contrastText: '#c6d0f5', // Text
+    },
+    type: 'dark',
+    background: {
+      default: '#303446', // Base
+    },
+  },
+  overrides: {
+    MuiPaper: {
+      root: {
+        color: '#c6d0f5', // Text
+        backgroundColor: '#292c3c', // Mantle
+        MuiSnackbarContent: {
+          root: {
+            color: '#c6d0f5', // Text
+            backgroundColor: '#e78284', // Red
+          },
+          message: {
+            color: '#c6d0f5', // Text
+            backgroundColor: '#e78284', // Red
+          },
+        },
+      },
+    },
+    MuiButton: {
+      textPrimary: {
+        color: '#8caaee', // Blue
+      },
+      textSecondary: {
+        color: '#c6d0f5', // Text
+      },
+    },
+    MuiChip: {
+      clickable: {
+        background: '#292c3c', //Mantle
+      },
+    },
+    MuiFormGroup: {
+      root: {
+        color: '#c6d0f5', // Text
+      },
+    },
+    MuiFormHelperText: {
+      root: {
+        Mui: {
+          error: {
+            color: '#e78284', // Red
+          },
+        },
+      },
+    },
+    MuiTableHead: {
+      root: {
+        color: '#c6d0f5', // Text
+        background: '#292c3c', //Mantle
+      },
+    },
+    MuiTableCell: {
+      root: {
+        color: '#c6d0f5', // Text
+        background: '#292c3c !important', //Mantle
+      },
+      head: {
+        color: '#c6d0f5', // Text
+        background: '#292c3c !important', //Mantle
+      },
+    },
+    NDLogin: {
+      systemNameLink: {
+        color: '#ca9ee6', // Mauve
+      },
+      icon: {},
+      welcome: {
+        color: '#c6d0f5', // Text
+      },
+      card: {
+        minWidth: 300,
+        background: '#303446', // Base
+      },
+      avatar: {},
+      button: {
+        boxShadow: '3px 3px 5px #303446', // Base
+      },
+    },
+    NDMobileArtistDetails: {
+      bgContainer: {
+        background:
+          'linear-gradient(to bottom, rgba(52 52 52 / 72%), rgb(48 48 48))!important',
+      },
+    },
+  },
+  player: {
+    theme: 'dark',
+    stylesheet,
+  },
+}
diff --git a/ui/src/themes/catppuccinLatte.css.js b/ui/src/themes/catppuccinLatte.css.js
index 84c8d2d7f..006601cd9 100644
--- a/ui/src/themes/catppuccinLatte.css.js
+++ b/ui/src/themes/catppuccinLatte.css.js
@@ -2,41 +2,41 @@ const stylesheet = `
   .react-jinke-music-player-main.light-theme svg,
   .react-jinke-music-player .music-player-controller,
   .react-jinke-music-player .audio-circle-process-bar circle[class='stroke'] {
-    color: #6c6f85;
-    stroke: #6c6f85;
+    color: #6c6f85; /* subtext0 */
+    stroke: #6c6f85; /* subtext0 */
   }
 
   .react-jinke-music-player-main svg:active,
   .react-jinke-music-player-main svg:hover {
-    color: #7c7f93;
+    color: #7c7f93; /* overlay2 */
   }
 
   .react-jinke-music-player-main.light-theme svg:active,
   .react-jinke-music-player-main.light-theme svg:hover {
-    color: #7c7f93;
+    color: #7c7f93; /* overlay2 */
   }
 
   .react-jinke-music-player-mobile-play-model-tip,
   .react-jinke-music-player-main.light-theme .play-mode-title {
-    background-color: #6c6f85;
-    color: #eff1f5;
+    background-color: #6c6f85; /* subtext0 */
+    color: #eff1f5; /* base */
   }
 
   .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle,
   .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-track {
-    background-color: #6c6f85;
+    background-color: #6c6f85; /* subtext0 */
   }
 
   .react-jinke-music-player-main ::-webkit-scrollbar-thumb {
-    background-color: #6c6f85;
+    background-color: #6c6f85; /* subtext0 */
   }
 
   .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
-    box-shadow: 0 0 2px #6c6f85;
+    box-shadow: 0 0 2px #6c6f85; /* subtext0 */
   }
 
   .react-jinke-music-player-main .audio-item.playing svg {
-    color: #6c6f85;
+    color: #6c6f85; /* subtext0 */
   }
 
   .react-jinke-music-player-main .audio-item.playing .player-singer {
@@ -65,7 +65,7 @@ const stylesheet = `
 
   .react-jinke-music-player-main.light-theme .rc-switch-checked {
     background-color: #6c6f85 !important;
-    border: 1px solid #6c6f85;
+    border: 1px solid #6c6f85; /* subtext0 */
   }
 
   .sound-operation > div:nth-child(4) {
@@ -77,17 +77,17 @@ const stylesheet = `
   }
 
   .react-jinke-music-player-main .music-player-panel {
-    background-color: #e6e9ef;
-    color: #4c4f69;
+    background-color: #e6e9ef; /* mantle */
+    color: #4c4f69; /* text */
     box-shadow: 0 0 8px rgba(76, 79, 105, 0.15);
   }
 
   .react-jinke-music-player-main.light-theme .music-player-panel {
-    color: #4c4f69;
+    color: #4c4f69; /* text */
   }
 
   .audio-lists-panel {
-    background-color: #e6e9ef;
+    background-color: #e6e9ef; /* mantle */
     bottom: 6.25rem;
     box-shadow:
       rgba(76, 79, 105, 0.12) 0px 4px 6px,
@@ -108,7 +108,7 @@ const stylesheet = `
   }
 
   .audio-lists-panel-header {
-    border-bottom: 1px solid #ccd0da;
+    border-bottom: 1px solid #ccd0da; /* surface0 */
     box-shadow: none;
   }
 
@@ -118,13 +118,13 @@ const stylesheet = `
   }
 
   .react-jinke-music-player-main.light-theme .audio-lists-panel-header {
-    background-color: #e6e9ef;
-    color: #4c4f69;
+    background-color: #e6e9ef; /* mantle */
+    color: #4c4f69; /* text */
   }
 
   .audio-lists-panel-content .audio-item {
     line-height: 32px;
-    color: #4c4f69;
+    color: #4c4f69; /* text */
   }
 
   .react-jinke-music-player-main .music-player-panel .panel-content .img-content {
@@ -135,7 +135,7 @@ const stylesheet = `
 
   .react-jinke-music-player-main .music-player-lyric {
     color: #6c6f85; /* subtext0 */
-    -webkit-text-stroke: 0.35px #eff1f5;
+    -webkit-text-stroke: 0.35px #eff1f5; /* base */
     font-weight: bolder;
   }
 
@@ -146,12 +146,12 @@ const stylesheet = `
 
   .audio-lists-panel-content .audio-item.playing,
   .audio-lists-panel-content .audio-item.playing svg {
-    color: #6c6f85;
+    color: #6c6f85; /* subtext0 */
   }
 
   .audio-lists-panel-content .audio-item:active .group:not([class=".player-delete"]) svg,
   .audio-lists-panel-content .audio-item:hover .group:not([class=".player-delete"]) svg {
-    color: #6c6f85;
+    color: #6c6f85; /* subtext0 */
   }
 
   .audio-lists-panel-content .audio-item .player-icons {
@@ -173,12 +173,12 @@ const stylesheet = `
 
   .react-jinke-music-player .music-player-controller {
     border: none;
-    background-color: #e6e9ef;
-    border-color: #e6e9ef;
+    background-color: #e6e9ef; /* mantle */
+    border-color: #e6e9ef; /* mantle */
     box-shadow:
       rgba(76, 79, 105, 0.12) 0px 4px 6px,
       rgba(76, 79, 105, 0.08) 0px 5px 7px;
-    color: #6c6f85;
+    color: #6c6f85; /* subtext0 */
   }
 
   .react-jinke-music-player .music-player-controller.music-player-playing:before {
@@ -187,12 +187,12 @@ const stylesheet = `
 
   .react-jinke-music-player .music-player-controller .music-player-controller-setting {
     background: rgba(108, 111, 133, 0.2);
-    color: #eff1f5;
+    color: #eff1f5; /* base */
   }
 
   .react-jinke-music-player-mobile-progress .rc-slider-handle,
   .react-jinke-music-player-mobile-progress .rc-slider-track {
-    background-color: #6c6f85;
+    background-color: #6c6f85; /* subtext0 */
   }
 
   .react-jinke-music-player-mobile-progress .rc-slider-handle {
diff --git a/ui/src/themes/catppuccinMacchiato.css.js b/ui/src/themes/catppuccinMacchiato.css.js
index d303a0364..e415a990b 100644
--- a/ui/src/themes/catppuccinMacchiato.css.js
+++ b/ui/src/themes/catppuccinMacchiato.css.js
@@ -1,154 +1,158 @@
 const stylesheet = `
+  .react-jinke-music-player-main svg:active,
+  .react-jinke-music-player-main svg:hover {
+    color: #939ab7; /* overlay2 */
+  }
 
-.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover {
-    color: #00a4dc
-}
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle,
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-track {
+    background-color: #a5adcb; /* subtext0 */
+  }
 
-.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle, .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-track {
-    background-color: #00a4dc
-}
+  .react-jinke-music-player-main ::-webkit-scrollbar-thumb {
+    background-color: #a5adcb; /* subtext0 */
+  }
 
-.react-jinke-music-player-main ::-webkit-scrollbar-thumb {
-    background-color: #00a4dc;
-}
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
+    box-shadow: 0 0 2px #a5adcb; /* subtext0 */
+  }
 
-.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
-    box-shadow: 0 0 2px #00a4dc
-}
+  .react-jinke-music-player-main .audio-item.playing svg {
+    color: #a5adcb; /* subtext0 */
+  }
 
-.react-jinke-music-player-main .audio-item.playing svg {
-    color: #00a4dc
-}
+  .react-jinke-music-player-main .audio-item.playing .player-singer {
+    color: #a5adcb !important;
+  }
 
-.react-jinke-music-player-main .audio-item.playing .player-singer {
-    color: #00a4dc !important
-}
-
-.react-jinke-music-player-main .loading svg {
-    color: #00a4dc !important
-}
+  .react-jinke-music-player-main .loading svg {
+    color: #a5adcb !important;
+  }
 
 
-.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle {
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle {
     border: hidden;
     box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
-}
+  }
 
 
-.rc-slider-rail, .rc-slider-track {
+  .rc-slider-rail, .rc-slider-track {
     height: 6px;
-}
+  }
 
-.rc-slider {
+  .rc-slider {
     padding: 3px 0;
-}
+  }
 
-.sound-operation > div:nth-child(4) {
+  .sound-operation > div:nth-child(4) {
     transform: translateX(-50%) translateY(5%) !important;
-}
+  }
 
-.sound-operation {
+  .sound-operation {
     padding: 4px 0;
-}
+  }
 
-.react-jinke-music-player-main .music-player-panel {
-    background-color: #1e2030;
-    color: #24273a
+  .react-jinke-music-player-main .music-player-panel {
+    background-color: #1e2030; /* mantle */
+    color: #cad3f5; /* text */
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
-}
+  }
 
-.audio-lists-panel {
-    background-color: #1e2030;
+  .audio-lists-panel {
+    background-color: #1e2030; /* mantle */
     bottom: 6.25rem;
     box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
-}
+  }
 
-.audio-lists-panel-content .audio-item.playing {
+  .audio-lists-panel-content .audio-item.playing {
     background-color: rgba(0, 0, 0, 0);
-}
+  }
 
-.audio-lists-panel-content .audio-item:nth-child(2n+1) {
+  .audio-lists-panel-content .audio-item:nth-child(2n+1) {
     background-color: rgba(0, 0, 0, 0);
-}
+  }
 
-.audio-lists-panel-content .audio-item:active,
-.audio-lists-panel-content .audio-item:hover {
+  .audio-lists-panel-content .audio-item:active,
+  .audio-lists-panel-content .audio-item:hover {
     background-color:rgba(255, 255, 255, 0.08);
-}
+  }
 
-.audio-lists-panel-header {
-    border-bottom:1px solid #242936;
-}
+  .audio-lists-panel-header {
+    border-bottom:1px solid #363a4f; /* surface0 */
+  }
 
-.react-jinke-music-player-main .music-player-panel .panel-content .player-content .audio-lists-btn {
+  .react-jinke-music-player-main .music-player-panel .panel-content .player-content .audio-lists-btn {
     background-color:rgba(0,0,0,0);
     box-shadow:0 0 0 0;
-}
+  }
 
-.audio-lists-panel-content .audio-item {
+  .audio-lists-panel-content .audio-item {
     line-height: 32px;
-}
+  }
 
-.react-jinke-music-player-main .music-player-panel .panel-content .img-content {
+  .react-jinke-music-player-main .music-player-panel .panel-content .img-content {
     box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
-}
+  }
 
-.react-jinke-music-player-main .music-player-lyric {
-    color: #acb3d2;
-    -webkit-text-stroke: 0.5px #2E3440;
+  .react-jinke-music-player-main .music-player-lyric {
+    color: #a5adcb; /* subtext0 */
+    -webkit-text-stroke: 0.5px #1e1e2e; /* base */
     font-weight: bolder;
-}
+  }
 
-.react-jinke-music-player-main .lyric-btn-active, .react-jinke-music-player-main .lyric-btn-active svg {
-    color: #acb3d2 !important;
-}
+  .react-jinke-music-player-main .lyric-btn-active,
+  .react-jinke-music-player-main .lyric-btn-active svg {
+    color: #a5adcb !important;
+  }
 
-.audio-lists-panel-header {
+  .audio-lists-panel-header {
     border-bottom:1px solid rgba(0, 0, 0, 0.25);
     box-shadow:none;
-}
+  }
 
-.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg {
-    color: #00a4dc
-}
+  .audio-lists-panel-content .audio-item.playing,
+  .audio-lists-panel-content .audio-item.playing svg {
+    color: #a5adcb; /* subtext0 */
+  }
 
-.audio-lists-panel-content .audio-item:active .group:not([class=".player-delete"]) svg, .audio-lists-panel-content .audio-item:hover .group:not([class=".player-delete"]) svg {
-    color: #00a4dc
-}
+  .audio-lists-panel-content .audio-item:active .group:not([class=".player-delete"]) svg,
+  .audio-lists-panel-content .audio-item:hover .group:not([class=".player-delete"]) svg {
+    color: #a5adcb; /* subtext0 */
+  }
 
-.audio-lists-panel-content .audio-item .player-icons {
+  .audio-lists-panel-content .audio-item .player-icons {
     scale: 75%;
-}
+  }
 
-.audio-lists-panel-content .audio-item:active,
-.audio-lists-panel-content .audio-item:hover {
-    background-color: #363a4f;
-}
+  .audio-lists-panel-content .audio-item:active,
+  .audio-lists-panel-content .audio-item:hover {
+    background-color: #494d64; /* surface1 */
+  }
 
 /* Mobile */
 
-.react-jinke-music-player-mobile-cover {
+  .react-jinke-music-player-mobile-cover {
     border: none;
     box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
-}
+  }
 
-.react-jinke-music-player .music-player-controller {
+  .react-jinke-music-player .music-player-controller {
     border: none;
     box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
-    color: #00a4dc;
-}
+    color: #a5adcb; /* subtext0 */
+  }
 
-.react-jinke-music-player .music-player-controller .music-player-controller-setting {
+  .react-jinke-music-player .music-player-controller .music-player-controller-setting {
     color: rgba(122,160,236,.3);
-}
+  }
 
-.react-jinke-music-player-mobile-progress .rc-slider-handle, .react-jinke-music-player-mobile-progress .rc-slider-track {
-    background-color: #00a4dc;
-}
+  .react-jinke-music-player-mobile-progress .rc-slider-handle, .react-jinke-music-player-mobile-progress .rc-slider-track {
+    background-color: #a5adcb; /* subtext0 */
+  }
 
-.react-jinke-music-player-mobile-progress .rc-slider-handle {
+  .react-jinke-music-player-mobile-progress .rc-slider-handle {
     border: none;
-}
+  }
 `
 
 export default stylesheet
diff --git a/ui/src/themes/catppuccinMacchiato.js b/ui/src/themes/catppuccinMacchiato.js
index 63c93ff66..b41a7b2ea 100644
--- a/ui/src/themes/catppuccinMacchiato.js
+++ b/ui/src/themes/catppuccinMacchiato.js
@@ -4,92 +4,92 @@ export default {
   themeName: 'Catppuccin Macchiato',
   palette: {
     primary: {
-      main: '#c6a0f6',
+      main: '#c6a0f6', // Mauve
     },
     secondary: {
-      main: '#1e2030',
-      contrastText: '#cad3f5',
+      main: '#1e2030', // Mantle
+      contrastText: '#cad3f5', // Text
     },
     type: 'dark',
     background: {
-      default: '#24273a',
+      default: '#24273a', // Base
     },
   },
   overrides: {
     MuiPaper: {
       root: {
-        color: '#cad3f5',
-        backgroundColor: '#1e2030',
+        color: '#cad3f5', // Text
+        backgroundColor: '#1e2030', // Mantle
         MuiSnackbarContent: {
           root: {
-            color: '#cad3f5',
-            backgroundColor: '#ed8796',
+            color: '#cad3f5', // Text
+            backgroundColor: '#ed8796', // Red
           },
           message: {
-            color: '#cad3f5',
-            backgroundColor: '#ed8796',
+            color: '#cad3f5', // Text
+            backgroundColor: '#ed8796', // Red
           },
         },
       },
     },
     MuiButton: {
       textPrimary: {
-        color: '#8aadf4',
+        color: '#8aadf4', // Blue
       },
       textSecondary: {
-        color: '#cad3f5',
+        color: '#cad3f5', // Text
       },
     },
     MuiChip: {
       clickable: {
-        background: '#1e2030',
+        background: '#1e2030', // Mantle
       },
     },
     MuiFormGroup: {
       root: {
-        color: '#cad3f5',
+        color: '#cad3f5', // Text
       },
     },
     MuiFormHelperText: {
       root: {
         Mui: {
           error: {
-            color: '#ed8796',
+            color: '#ed8796', // Red
           },
         },
       },
     },
     MuiTableHead: {
       root: {
-        color: '#cad3f5',
-        background: '#1e2030',
+        color: '#cad3f5', // Text
+        background: '#1e2030', // Mantle
       },
     },
     MuiTableCell: {
       root: {
-        color: '#cad3f5',
-        background: '#1e2030 !important',
+        color: '#cad3f5', // Text
+        background: '#1e2030 !important', // Mantle
       },
       head: {
-        color: '#cad3f5',
-        background: '#1e2030 !important',
+        color: '#cad3f5', // Text
+        background: '#1e2030 !important', // Mantle
       },
     },
     NDLogin: {
       systemNameLink: {
-        color: '#c6a0f6',
+        color: '#c6a0f6', // Mauve
       },
       icon: {},
       welcome: {
-        color: '#cad3f5',
+        color: '#cad3f5', // Text
       },
       card: {
         minWidth: 300,
-        background: '#24273a',
+        background: '#24273a', // Base
       },
       avatar: {},
       button: {
-        boxShadow: '3px 3px 5px #24273a',
+        boxShadow: '3px 3px 5px #24273a', // Base
       },
     },
     NDMobileArtistDetails: {
diff --git a/ui/src/themes/catppuccinMocha.css.js b/ui/src/themes/catppuccinMocha.css.js
new file mode 100644
index 000000000..7a238468a
--- /dev/null
+++ b/ui/src/themes/catppuccinMocha.css.js
@@ -0,0 +1,158 @@
+const stylesheet = `
+  .react-jinke-music-player-main svg:active,
+  .react-jinke-music-player-main svg:hover {
+    color: #9399b2; /* overlay2 */
+  }
+
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle,
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-track {
+    background-color: #a6adc8; /* subtext0 */
+  }
+
+  .react-jinke-music-player-main ::-webkit-scrollbar-thumb {
+    background-color: #a6adc8; /* subtext0 */
+  }
+
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
+    box-shadow: 0 0 2px #a6adc8; /* subtext0 */
+  }
+
+  .react-jinke-music-player-main .audio-item.playing svg {
+    color: #a6adc8; /* subtext0 */
+  }
+
+  .react-jinke-music-player-main .audio-item.playing .player-singer {
+    color: #a6adc8 !important;
+  }
+
+  .react-jinke-music-player-main .loading svg {
+    color: #a6adc8 !important;
+  }
+
+
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle {
+    border: hidden;
+    box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
+  }
+
+
+  .rc-slider-rail, .rc-slider-track {
+    height: 6px;
+  }
+
+  .rc-slider {
+    padding: 3px 0;
+  }
+
+  .sound-operation > div:nth-child(4) {
+    transform: translateX(-50%) translateY(5%) !important;
+  }
+
+  .sound-operation {
+    padding: 4px 0;
+  }
+
+  .react-jinke-music-player-main .music-player-panel {
+    background-color: #181825; /* mantle */
+    color: #cdd6f4; /* text */
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
+  }
+
+  .audio-lists-panel {
+    background-color: #181825; /* mantle */
+    bottom: 6.25rem;
+    box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
+  }
+
+  .audio-lists-panel-content .audio-item.playing {
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  .audio-lists-panel-content .audio-item:nth-child(2n+1) {
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  .audio-lists-panel-content .audio-item:active,
+  .audio-lists-panel-content .audio-item:hover {
+    background-color:rgba(255, 255, 255, 0.08);
+  }
+
+  .audio-lists-panel-header {
+    border-bottom:1px solid #313244; /* surface0 */
+  }
+
+  .react-jinke-music-player-main .music-player-panel .panel-content .player-content .audio-lists-btn {
+    background-color:rgba(0,0,0,0);
+    box-shadow:0 0 0 0;
+  }
+
+  .audio-lists-panel-content .audio-item {
+    line-height: 32px;
+  }
+
+  .react-jinke-music-player-main .music-player-panel .panel-content .img-content {
+    box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
+  }
+
+  .react-jinke-music-player-main .music-player-lyric {
+    color: #a6adc8; /* subtext0 */
+    -webkit-text-stroke: 0.5px #1e1e2e; /* base */
+    font-weight: bolder;
+  }
+
+  .react-jinke-music-player-main .lyric-btn-active,
+  .react-jinke-music-player-main .lyric-btn-active svg {
+    color: #a6adc8 !important;
+  }
+
+  .audio-lists-panel-header {
+    border-bottom:1px solid rgba(0, 0, 0, 0.25);
+    box-shadow:none;
+  }
+
+  .audio-lists-panel-content .audio-item.playing,
+  .audio-lists-panel-content .audio-item.playing svg {
+    color: #a6adc8; /* subtext0 */
+  }
+
+  .audio-lists-panel-content .audio-item:active .group:not([class=".player-delete"]) svg,
+  .audio-lists-panel-content .audio-item:hover .group:not([class=".player-delete"]) svg {
+    color: #a6adc8; /* subtext0 */
+  }
+
+  .audio-lists-panel-content .audio-item .player-icons {
+    scale: 75%;
+  }
+
+  .audio-lists-panel-content .audio-item:active,
+  .audio-lists-panel-content .audio-item:hover {
+    background-color: #45475a; /* surface1 */
+  }
+
+/* Mobile */
+
+  .react-jinke-music-player-mobile-cover {
+    border: none;
+    box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
+  }
+
+  .react-jinke-music-player .music-player-controller {
+    border: none;
+    box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
+    color: #a6adc8; /* subtext0 */
+  }
+
+  .react-jinke-music-player .music-player-controller .music-player-controller-setting {
+    color: rgba(122,160,236,.3);
+  }
+
+  .react-jinke-music-player-mobile-progress .rc-slider-handle, .react-jinke-music-player-mobile-progress .rc-slider-track {
+    background-color: #a6adc8; /* subtext0 */
+  }
+
+  .react-jinke-music-player-mobile-progress .rc-slider-handle {
+    border: none;
+  }
+`
+
+export default stylesheet
diff --git a/ui/src/themes/catppuccinMocha.js b/ui/src/themes/catppuccinMocha.js
new file mode 100644
index 000000000..bdfb33520
--- /dev/null
+++ b/ui/src/themes/catppuccinMocha.js
@@ -0,0 +1,106 @@
+import stylesheet from './catppuccinMocha.css.js'
+
+export default {
+  themeName: 'Catppuccin Mocha',
+  palette: {
+    primary: {
+      main: '#cba6f7', // Mauve
+    },
+    secondary: {
+      main: '#181825', // Mantle
+      contrastText: '#cdd6f4', // Text
+    },
+    type: 'dark',
+    background: {
+      default: '#1e1e2e', // Base
+    },
+  },
+  overrides: {
+    MuiPaper: {
+      root: {
+        color: '#cdd6f4', // Text
+        backgroundColor: '#181825', // Mantle
+        MuiSnackbarContent: {
+          root: {
+            color: '#cdd6f4', // Text
+            backgroundColor: '#f38ba8', // Red
+          },
+          message: {
+            color: '#cdd6f4', // Text
+            backgroundColor: '#f38ba8', // Red
+          },
+        },
+      },
+    },
+    MuiButton: {
+      textPrimary: {
+        color: '#89b4fa', // Blue
+      },
+      textSecondary: {
+        color: '#cdd6f4', // Text
+      },
+    },
+    MuiChip: {
+      clickable: {
+        background: '#181825', // Mantle
+      },
+    },
+    MuiFormGroup: {
+      root: {
+        color: '#cdd6f4', // Text
+      },
+    },
+    MuiFormHelperText: {
+      root: {
+        Mui: {
+          error: {
+            color: '#f38ba8', // Red
+          },
+        },
+      },
+    },
+    MuiTableHead: {
+      root: {
+        color: '#cdd6f4', // Text
+        background: '#181825', // Mantle
+      },
+    },
+    MuiTableCell: {
+      root: {
+        color: '#cdd6f4', // Text
+        background: '#181825 !important', // Mantle
+      },
+      head: {
+        color: '#cdd6f4', // Text
+        background: '#181825 !important', // Mantle
+      },
+    },
+    NDLogin: {
+      systemNameLink: {
+        color: '#cba6f7', // Mauve
+      },
+      icon: {},
+      welcome: {
+        color: '#cdd6f4', // Text
+      },
+      card: {
+        minWidth: 300,
+        background: '#1e1e2e', // Base
+      },
+      avatar: {},
+      button: {
+        boxShadow: '3px 3px 5px #1e1e2e', // Base
+      },
+    },
+    NDMobileArtistDetails: {
+      bgContainer: {
+        background:
+          'linear-gradient(to bottom, rgba(52 52 52 / 72%), rgb(48 48 48))!important',
+      },
+    },
+  },
+  player: {
+    theme: 'dark',
+    stylesheet,
+  },
+}
diff --git a/ui/src/themes/index.js b/ui/src/themes/index.js
index 98705da30..391a97f2c 100644
--- a/ui/src/themes/index.js
+++ b/ui/src/themes/index.js
@@ -8,7 +8,9 @@ import MonokaiTheme from './monokai'
 import ElectricPurpleTheme from './electricPurple'
 import NordTheme from './nord'
 import GruvboxDarkTheme from './gruvboxDark'
+import CatppuccinFrappeTheme from './catppuccinFrappe'
 import CatppuccinMacchiatoTheme from './catppuccinMacchiato'
+import CatppuccinMochaTheme from './catppuccinMocha'
 import CatppuccinLatteTheme from './catppuccinLatte'
 import DraculaTheme from './dracula'
 import NuclearTheme from './nuclear'
@@ -31,8 +33,10 @@ export default {
 
   // New themes should be added here, in alphabetic order
   AmusicTheme,
-  CatppuccinMacchiatoTheme,
+  CatppuccinFrappeTheme,
   CatppuccinLatteTheme,
+  CatppuccinMacchiatoTheme,
+  CatppuccinMochaTheme,
   DraculaTheme,
   ElectricPurpleTheme,
   ExtraDarkTheme,