diff --git a/ui/src/themes/index.js b/ui/src/themes/index.js
index 0234d416b..616f21fc1 100644
--- a/ui/src/themes/index.js
+++ b/ui/src/themes/index.js
@@ -4,6 +4,7 @@ import ExtraDarkTheme from './extradark'
 import GreenTheme from './green'
 import SpotifyTheme from './spotify'
 import LigeraTheme from './ligera'
+import ModernDarkTheme from './modernDark'
 import MonokaiTheme from './monokai'
 import ElectricPurpleTheme from './electricPurple'
 import NordTheme from './nord'
@@ -23,6 +24,7 @@ export default {
   GreenTheme,
   GruvboxDarkTheme,
   LigeraTheme,
+  ModernDarkTheme,
   MonokaiTheme,
   NordTheme,
   NuclearTheme,
diff --git a/ui/src/themes/modernDark.css.js b/ui/src/themes/modernDark.css.js
new file mode 100644
index 000000000..059b82b49
--- /dev/null
+++ b/ui/src/themes/modernDark.css.js
@@ -0,0 +1,250 @@
+module.exports = `
+
+:root {
+    --lighter: #a6ccff;
+    --main: #0084ff;
+    --darker: #0062f6;
+    --main-background: #14172e;
+    --light-background: #181d37;
+    --lighter-background: #222541;
+    --background-highlight: #32375b;
+    --darker-background-highlight: #464b77;
+}
+
+.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover {
+    color: var(--lighter);
+}
+
+.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: var(--main)
+}
+
+.react-jinke-music-player-main ::-webkit-scrollbar-thumb {
+    background-color: var(--main);
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content {
+    padding-top: 5px;
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
+    box-shadow: 0 0 2px var(--main)
+}
+
+.react-jinke-music-player-main .audio-item.playing svg {
+    color: var(--main)
+}
+
+.react-jinke-music-player-main .audio-item.playing .player-singer {
+    color: var(--main) !important
+}
+
+.react-jinke-music-player-main .loading svg {
+    color: var(--main) !important
+}
+
+
+.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle {
+    border: 0px solid var(--main-background);
+}
+
+
+.rc-slider-rail, .rc-slider-track {
+    height: 5px;
+}
+
+.rc-slider {
+    padding: 3px 0;
+}
+
+.progress-bar > div:nth-child(2) > div:nth-child(4) {
+    transform: translateX(-50%) translateY(5%) !important;
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .progress-bar-content .progress-bar {
+    margin: 0;
+    position: absolute;
+    width: 100.5%;
+    bottom: 74.5px;
+    left: 50%;
+    right: 50%;
+    transform: translateX(-50%);
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .progress-bar-content .progress-bar .progress-load-bar {
+    background-color: unset;
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .progress-bar-content .progress-bar .rc-slider-handle {
+    opacity: 0;
+    transition: opacity .2s;
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .progress-bar-content .progress-bar .rc-slider-handle:hover {
+    opacity: 1;
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .progress-bar-content .progress-bar .rc-slider-handle:focus {
+    opacity: 1;
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .progress-bar-content .audio-main .current-time, .react-jinke-music-player-main .music-player-panel .panel-content .progress-bar-content .audio-main .duration {
+    /*display: none;*/
+    font-size: 0.675rem;
+    color: rgba(255, 255, 255, 0.8)
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .progress-bar-content .audio-main .current-time::after {
+    content: "/";
+    display: ruby;
+    margin: 0 3px 0 3px;
+}
+
+.current-time {
+    flex-basis: unset !important;
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .progress-bar-content .audio-main {
+    justify-content: left;
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .progress-bar-content .audio-title {
+    margin-top: 2.5px;
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .img-content {
+    margin-top: 2.5px;
+    height: 60px;
+    width: 60px;
+}
+
+.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: var(--main-background);
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
+    height: 85px;
+}
+
+.audio-lists-panel {
+    background-color: var(--main-background);
+    border-radius: .625rem;
+    bottom: 6rem;
+    box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
+}
+
+.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 #242936;
+}
+
+.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;
+    padding: 4px 20px;
+    border-radius: .5rem;
+    margin: 3px;
+}
+
+/*.react-jinke-music-player-main .music-player-panel .panel-content .img-content {
+    border-radius: .5rem;
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .img-rotate {
+    animation: none;
+}*/
+
+.NDAudioPlayer-player-6 .music-player-panel .panel-content div.img-rotate {
+  background-size: cover !important;
+}
+
+
+.react-jinke-music-player-main .music-player-panel .panel-content .img-content {
+    box-shadow:0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
+}
+
+.react-jinke-music-player-main .music-player-lyric {
+    color: var(--darker);
+}
+
+.react-jinke-music-player-main .lyric-btn-active, .react-jinke-music-player-main .lyric-btn-active svg {
+    color: var(--darker) !important;
+}
+
+.player-content > span:nth-child(1) {
+    margin-right: 20px !important;
+    margin-left: 20px !important;
+}
+
+.player-content button:nth-child(2) {
+    margin-right: 10px !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: var(--main)
+}
+
+.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: var(--main)
+}
+
+.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:var(--lighter-background);
+}
+
+/* Mobile */
+
+.react-jinke-music-player-mobile-cover {
+    border: none;
+    /*border-radius: 2.5rem;*/
+}
+
+.react-jinke-music-player .music-player-controller {
+    border: none;
+    box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
+    color: var(--main);
+}
+
+.react-jinke-music-player .music-player-controller .music-player-controller-setting {
+    color: var(--darker-background-highlight);
+    opacity: 0.3;
+}
+
+.react-jinke-music-player-mobile-progress .rc-slider-handle, .react-jinke-music-player-mobile-progress .rc-slider-track {
+    background-color: var(--main);
+}
+
+`
diff --git a/ui/src/themes/modernDark.js b/ui/src/themes/modernDark.js
new file mode 100644
index 000000000..ac11d3b15
--- /dev/null
+++ b/ui/src/themes/modernDark.js
@@ -0,0 +1,585 @@
+const modernColours = {
+  lighter: '#a6ccff',
+  main: '#0084ff',
+  darker: '#0062f6',
+  mainBackground: '#14172e',
+  lightBackground: '#181d37',
+  lighterBackground: '#222541',
+  darkerBackgroundHighlight: '#32375b',
+  backgroundHighlight: '#464b77',
+}
+
+// For Album, Playlist
+const musicListActions = {
+  padding: '1rem 0',
+  alignItems: 'center',
+  '@global': {
+    button: {
+      margin: 5,
+      border: '1px solid transparent',
+      backgroundColor: 'inherit',
+      color: 'rgba(255, 255, 255, 0.8)',
+      '&:hover': {
+        border: '1px solid rgba(255, 255, 255, 0.8)',
+        backgroundColor: 'inherit !important',
+      },
+    },
+    'button:first-child:not(:only-child)': {
+      '@media screen and (max-width: 720px)': {
+        transform: 'scale(1.5)',
+        margin: '1rem',
+        '&:hover': {
+          transform: 'scale(1.6) !important',
+        },
+      },
+      transform: 'scale(2)',
+      margin: '1.5rem',
+      minWidth: 0,
+      padding: 5,
+      transition: 'transform .3s ease',
+      background: modernColours['main'],
+      color: '#fff',
+      borderRadius: 500,
+      border: 0,
+      '&:hover': {
+        transform: 'scale(2.1)',
+        backgroundColor: `${modernColours['main']} !important`,
+        border: 0,
+      },
+    },
+    'button:only-child': {
+      margin: '1.5rem',
+    },
+    'button:first-child>span:first-child': {
+      padding: 0,
+    },
+    'button:first-child>span:first-child>span': {
+      display: 'none',
+    },
+    'button>span:first-child>span, button:not(:first-child)>span:first-child>svg':
+      {
+        color: 'rgba(255, 255, 255, 0.8)',
+      },
+  },
+}
+
+export default {
+  themeName: 'Modern Dark',
+  typography: {
+    fontFamily: "system-ui, 'Helvetica Neue', Helvetica, Arial",
+    h6: {
+      fontSize: '1rem', // AppBar title
+    },
+  },
+  palette: {
+    primary: {
+      light: modernColours['lighter'],
+      main: modernColours['main'],
+    },
+    secondary: {
+      main: '#fff',
+      contrastText: '#fff',
+    },
+    background: {
+      default: modernColours['mainBackground'],
+      paper: modernColours['mainBackground'],
+    },
+    type: 'dark',
+  },
+  overrides: {
+    MuiFormGroup: {
+      root: {
+        color: modernColours['main'],
+      },
+    },
+    MuiMenuItem: {
+      root: {
+        fontSize: '0.875rem',
+        paddingTop: '4px',
+        paddingBottom: '4px',
+        margin: '8px',
+        minHeight: '2.25rem !important',
+        borderRadius: '5rem',
+      },
+    },
+    MuiDivider: {
+      root: {
+        margin: '1rem .75rem',
+      },
+    },
+    MuiButton: {
+      root: {
+        background: 'rgba(0, 0, 0, 0)',
+        color: '#fff',
+        border: '1px solid transparent',
+        borderRadius: '5rem',
+        '&:hover': {
+          background: modernColours['backgroundHighlight'],
+        },
+      },
+      textSecondary: {
+        border: '1px solid rgba(255, 255, 255, 0.8)',
+        background: modernColours['mainBackground'],
+        '&:hover': {
+          border: '1px solid #fff !important',
+          background: `${modernColours['mainBackground']} !important`,
+        },
+      },
+      label: {
+        color: '#fff',
+        paddingRight: '1rem',
+        paddingLeft: '0.8rem',
+      },
+      contained: {
+        boxShadow: 'unset !important',
+      },
+    },
+    MuiDrawer: {
+      root: {
+        background: modernColours['mainBackground'],
+      },
+      paper: {
+        height: 'unset',
+      },
+    },
+    MuiTableHead: {
+      root: {
+        boxShadow: 'none !important',
+        zIndex: '1',
+      },
+    },
+    MuiTableRow: {
+      root: {
+        padding: '10px 0',
+        transition: 'background-color .3s ease',
+        '&:hover': {
+          backgroundColor: `${modernColours['lightBackground']} !important`,
+          borderRadius: '.625rem !important',
+        },
+        '@global': {
+          'td:nth-child(4)': {
+            color: '#fff !important',
+          },
+        },
+      },
+    },
+    MuiTableCell: {
+      root: {
+        borderBottom: 'none',
+        padding: '10px !important',
+        color: 'rgba(255, 255, 255, 0.8) !important',
+      },
+      head: {
+        borderBottom: 'none',
+        fontSize: '0.75rem',
+        textTransform: 'uppercase',
+        letterSpacing: 1.2,
+      },
+    },
+    MuiTablePagination: {
+      toolbar: {
+        borderTop: `1px solid ${modernColours['mainBackground']}`,
+      },
+    },
+    MuiAppBar: {
+      positionFixed: {
+        boxShadow: 'unset',
+      },
+      colorSecondary: {
+        backgroundColor: 'unset',
+      },
+    },
+    MuiPaper: {
+      rounded: {
+        borderRadius: '.625rem',
+      },
+      elevation1: {
+        boxShadow: '0px',
+      },
+    },
+    MuiOutlinedInput: {
+      root: {
+        borderRadius: '5rem',
+        backgroundColor: modernColours['lighterBackground'],
+      },
+      notchedOutline: {
+        borderColor: 'transparent',
+        transition: 'border-color .1s',
+      },
+      adornedEnd: {
+        backgroundColor: modernColours['darkerBackgroundHighlight'],
+      },
+    },
+    PrivateNotchedOutline: {
+      legendLabelled: {
+        width: '0px',
+      },
+    },
+    MuiInputLabel: {
+      outlined: {
+        transform: 'translate(0px, -24px) scale(0.9) !important',
+      },
+    },
+    MuiFormControl: {
+      marginDense: {
+        marginTop: '24px',
+        marginBottom: '0px',
+      },
+    },
+    MuiFormHelperText: {
+      marginDense: {
+        marginTop: '0px',
+        marginBottom: '0px',
+      },
+    },
+    MuiAutocomplete: {
+      inputRoot: {
+        '&[class*="MuiOutlinedInput-root"]': {
+          padding: '2px 9px 2px 9px',
+        },
+      },
+      tag: {
+        marginLeft: '-3px',
+        marginRight: '9px',
+      },
+    },
+    MuiChip: {
+      root: {
+        backgroundColor: modernColours['backgroundHighlight'],
+      },
+      outlined: {
+        backgroundColor: 'rgba(255, 255, 255, 0.8)',
+        color: modernColours['lightBackground'],
+      },
+    },
+    MuiCard: {
+      root: {
+        margin: '1rem',
+      },
+    },
+    MuiSelect: {
+      select: {
+        '&:focus': {
+          backgroundColor: '#3c455f',
+          borderRadius: '5rem',
+        },
+      },
+    },
+    MuiListItem: {
+      button: {
+        transition: 'background-color .3s ease !important',
+        '&:hover': {
+          backgroundColor: modernColours['lighterBackground'],
+        },
+      },
+      root: {
+        '&.Mui-selected': {
+          backgroundColor: `${modernColours['backgroundHighlight']} !important`,
+        },
+      },
+    },
+    MuiSwitch: {
+      switchBase: {
+        color: modernColours['lighterBackground'],
+      },
+      track: {
+        width: '84%',
+        opacity: '1',
+        backgroundColor: modernColours['backgroundHighlight'],
+        scale: '140%',
+        transform: 'translateX(.1rem)',
+      },
+      thumb: {
+        scale: '60%',
+        boxShadow: 'none',
+      },
+    },
+    MuiToolbar: {
+      gutters: {
+        '@media (min-width: 600px)': {
+          paddingLeft: '16px',
+          paddingRight: '16px',
+        },
+      },
+    },
+    NDAlbumGridView: {
+      albumName: {
+        marginTop: '0.5rem',
+        fontWeight: 700,
+        textTransform: 'none',
+        color: '#fff',
+      },
+      albumSubtitle: {
+        color: 'rgba(255, 255, 255, 0.8)',
+      },
+      albumContainer: {
+        backgroundColor: modernColours['mainBackground'],
+        borderRadius: '.625rem',
+        padding: '.75rem',
+        transition: 'background-color .3s ease',
+        '&:hover': {
+          backgroundColor: modernColours['backgroundHighlight'],
+        },
+      },
+      albumPlayButton: {
+        backgroundColor: modernColours['main'],
+        borderRadius: '50%',
+        boxShadow: '0 8px 8px rgb(0 0 0 / 30%)',
+        padding: '0.35rem',
+        transition: 'padding .3s ease',
+        '&:hover': {
+          background: `${modernColours['main']} !important`,
+          padding: '0.45rem',
+        },
+      },
+    },
+    NDPlaylistDetails: {
+      container: {
+        background: modernColours['lighterBackground'],
+        borderRadius: 0,
+        paddingTop: '2.5rem !important',
+        boxShadow: 'none',
+      },
+      title: {
+        fontSize: 'calc(1.5rem + 1.5vw);',
+        fontWeight: 700,
+        color: '#fff',
+      },
+      details: {
+        fontSize: '.875rem',
+        minWidth: '75vw',
+        color: 'rgba(255,255,255, 0.8)',
+      },
+    },
+    NDAlbumDetails: {
+      root: {
+        background: modernColours['lighterBackground'],
+        borderRadius: 0,
+        boxShadow: 'none',
+        '@media (min-width: 600px)': {
+          paddingLeft: 0,
+        },
+      },
+      cardContents: {
+        alignItems: 'center',
+        paddingTop: '1.5rem',
+      },
+      recordName: {
+        fontSize: 'calc(1rem + 1.5vw);',
+        fontWeight: 700,
+      },
+      recordArtist: {
+        fontSize: '.875rem',
+        fontWeight: 700,
+      },
+      recordMeta: {
+        fontSize: '.875rem',
+        color: 'rgba(255,255,255, 0.8)',
+      },
+      commentBlock: {
+        fontSize: '.875rem',
+        color: 'rgba(255,255,255, 0.8)',
+      },
+    },
+    NDAlbumShow: {
+      albumActions: musicListActions,
+    },
+    NDPlaylistShow: {
+      playlistActions: musicListActions,
+    },
+    NDAudioPlayer: {
+      audioTitle: {
+        color: '#fff',
+        fontSize: '0.875rem',
+      },
+      songTitle: {
+        fontWeight: 400,
+      },
+      songInfo: {
+        fontSize: '0.675rem',
+        color: 'rgba(255, 255, 255, 0.8)',
+      },
+      player: {
+        border: '10px solid blue',
+      },
+    },
+    NDLogin: {
+      main: {
+        boxShadow: 'none',
+      },
+      systemNameLink: {
+        color: '#fff',
+      },
+      card: {
+        border: 'none',
+        borderRadius: '1rem',
+        boxShadow:
+          '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)',
+        marginTop: '0',
+        position: 'absolute',
+        top: '50%',
+        transform: 'translateY(-50%)',
+      },
+      avatar: {
+        marginBottom: 0,
+      },
+      icon: {
+        borderRadius: '50%',
+        boxShadow:
+          '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)',
+      },
+    },
+    NDSubMenu: {
+      sidebarIsClosed: {
+        '& a': {
+          paddingLeft: '10px',
+        },
+      },
+      icon: {
+        marginLeft: '-9px',
+      },
+    },
+    RaMenuItemLink: {
+      root: {
+        paddingLeft: '10px',
+      },
+      icon: {
+        marginLeft: '-3px',
+      },
+    },
+    RaLayout: {
+      content: {
+        padding: '0 !important',
+        background: `${modernColours['lighterBackground']} !important`,
+        '&::before': {
+          // Very bodgy!!
+          content: '""',
+          backgroundColor: modernColours['lighterBackground'],
+          color: modernColours['lighterBackground'],
+          height: '48px',
+          marginTop: '-48px',
+          marginLeft: '0px',
+          position: 'sticky',
+          top: '0',
+          zIndex: '999',
+          borderBottom: `1px solid ${modernColours['mainBackground']}`,
+        },
+      },
+      root: {
+        background: `${modernColours['lighterBackground']} !important`,
+      },
+      appFrame: {
+        '@media (min-width: 0px)': {
+          marginTop: '48px',
+        },
+      },
+    },
+    RaList: {
+      content: {
+        backgroundColor: 'inherit',
+        border: `1px solid ${modernColours['mainBackground']}`,
+      },
+    },
+    RaDatagrid: {
+      headerRow: {
+        '&:hover': {
+          backgroundColor: 'transparent !important',
+        },
+      },
+      headerCell: {
+        '&:first-child': {
+          borderTopLeftRadius: '.625rem !important',
+        },
+        '&:last-child': {
+          borderTopRightRadius: '.625rem !important',
+        },
+      },
+    },
+    RaListToolbar: {
+      toolbar: {
+        padding: '0 .55rem !important',
+        zIndex: '2',
+      },
+    },
+    RaSearchInput: {
+      input: {
+        paddingLeft: '.5rem',
+        border: 0,
+      },
+    },
+    RaFilterButton: {
+      root: {
+        marginRight: '1rem',
+      },
+    },
+    RaPaginationActions: {
+      currentPageButton: {
+        border: 'none',
+        borderRadius: 500,
+        backgroundColor: modernColours['backgroundHighlight'],
+      },
+      button: {
+        minWidth: 48,
+        margin: '0 4px',
+        border: 'none',
+        borderRadius: 500,
+        backgroundColor: modernColours['lightBackground'],
+        '@global': {
+          '> .MuiButton-label': {
+            padding: 0,
+          },
+        },
+      },
+      actions: {
+        '@global': {
+          '.next-page': {
+            marginLeft: 8,
+            marginRight: 8,
+          },
+          '.previous-page': {
+            marginRight: 8,
+          },
+        },
+      },
+    },
+    RaBulkActionsToolbar: {
+      toolbar: {
+        backgroundColor: modernColours['backgroundHighlight'],
+        borderRadius: '.625rem',
+      },
+    },
+    RaToolbar: {
+      toolbar: {
+        backgroundColor: modernColours['mainBackground'],
+      },
+    },
+    RaSidebar: {
+      root: {
+        height: 'initial',
+        marginTop: '-48px',
+      },
+      drawerPaper: {
+        marginTop: '48px',
+      },
+    },
+    RaAppBar: {
+      title: {
+        visibility: 'hidden',
+      },
+      menuButton: {
+        marginLeft: '0.125em',
+      },
+    },
+    makeStyles: {
+      cover: {
+        '& > $item': {
+          borderRadius: '.5rem',
+        },
+      },
+    },
+  },
+  player: {
+    theme: 'dark',
+    stylesheet: require('./modernDark.css.js'),
+  },
+}