diff --git a/ui/src/layout/AppBar.js b/ui/src/layout/AppBar.js
index ccbc94025..ab0cd8d7a 100644
--- a/ui/src/layout/AppBar.js
+++ b/ui/src/layout/AppBar.js
@@ -16,15 +16,20 @@ import ActivityPanel from './ActivityPanel'
 import UserMenu from './UserMenu'
 import config from '../config'
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    color: theme.palette.text.secondary,
-  },
-  active: {
-    color: theme.palette.text.primary,
-  },
-  icon: { minWidth: theme.spacing(5) },
-}))
+const useStyles = makeStyles(
+  (theme) => ({
+    root: {
+      color: theme.palette.text.secondary,
+    },
+    active: {
+      color: theme.palette.text.primary,
+    },
+    icon: { minWidth: theme.spacing(5) },
+  }),
+  {
+    name: 'NDAppBar',
+  }
+)
 
 const AboutMenuItem = forwardRef(({ onClick, ...rest }, ref) => {
   const classes = useStyles(rest)
diff --git a/ui/src/layout/SubMenu.js b/ui/src/layout/SubMenu.js
index f2893d182..4e389a2c6 100644
--- a/ui/src/layout/SubMenu.js
+++ b/ui/src/layout/SubMenu.js
@@ -10,17 +10,22 @@ import Tooltip from '@material-ui/core/Tooltip'
 import { makeStyles } from '@material-ui/core/styles'
 import { useTranslate } from 'react-admin'
 
-const useStyles = makeStyles((theme) => ({
-  icon: { minWidth: theme.spacing(5) },
-  sidebarIsOpen: {
-    paddingLeft: 25,
-    transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
-  },
-  sidebarIsClosed: {
-    paddingLeft: 0,
-    transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
-  },
-}))
+const useStyles = makeStyles(
+  (theme) => ({
+    icon: { minWidth: theme.spacing(5) },
+    sidebarIsOpen: {
+      paddingLeft: 25,
+      transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
+    },
+    sidebarIsClosed: {
+      paddingLeft: 0,
+      transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
+    },
+  }),
+  {
+    name: 'NDSubMenu',
+  }
+)
 
 const SubMenu = ({
   handleToggle,
diff --git a/ui/src/themes/index.js b/ui/src/themes/index.js
index 3b3cdd913..5404611ed 100644
--- a/ui/src/themes/index.js
+++ b/ui/src/themes/index.js
@@ -3,9 +3,11 @@ import DarkTheme from './dark'
 import ExtraDarkTheme from './extradark'
 import GreenTheme from './green'
 import SpotifyTheme from './spotify'
+import LigeraTheme from './ligera'
 
 export default {
   LightTheme,
+  LigeraTheme,
   DarkTheme,
   ExtraDarkTheme,
   GreenTheme,
diff --git a/ui/src/themes/ligera.js b/ui/src/themes/ligera.js
new file mode 100644
index 000000000..80a6110c9
--- /dev/null
+++ b/ui/src/themes/ligera.js
@@ -0,0 +1,466 @@
+const bLight = {
+  300: '#0054df',
+  500: '#ffffff',
+}
+const musicListActions = {
+  padding: '1rem 0',
+  alignItems: 'center',
+  '@global': {
+    button: {
+      margin: 5,
+      border: '1px solid #cccccc',
+      backgroundColor: '#fff',
+      color: '#b3b3b3',
+      '&:hover': {
+        border: '1px solid #224bff',
+        backgroundColor: 'inherit !important',
+      },
+    },
+    'button:first-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: bLight['500'],
+      color: '#fff',
+      borderRadius: 500,
+      border: 0,
+      '&:hover': {
+        transform: 'scale(2.1)',
+        backgroundColor: `${bLight['500']} !important`,
+        border: 0,
+        boxShadow: '0px 0px 4px 0px #5656567d',
+      },
+    },
+    'button:first-child>span:first-child': {
+      padding: 0,
+      color: bLight['300'],
+    },
+    'button:first-child>span:first-child>span': {
+      display: 'none',
+    },
+    'button>span:first-child>span, button:not(:first-child)>span:first-child>svg': {
+      color: '#656565',
+    },
+  },
+}
+
+export default {
+  themeName: 'Ligera',
+  palette: {
+    primary: {
+      light: bLight['300'],
+      main: '#464646',
+    },
+    secondary: {
+      main: '#000',
+      contrastText: '#fff',
+    },
+    background: {
+      default: '#f0f2f5',
+      paper: 'inherit',
+    },
+    text: {
+      secondary: '#232323',
+    },
+  },
+  typography: {
+    fontFamily: "system-ui, 'Helvetica Neue', Helvetica, Arial",
+    h6: {
+      fontSize: '1rem',
+    },
+  },
+  overrides: {
+    MuiAutocomplete: {
+      popper: {
+        background: bLight['500'],
+      },
+    },
+    MuiCard: {
+      root: {
+        marginLeft: '1%',
+        marginRight: '1%',
+        background: bLight['500'],
+      },
+    },
+    MuiPopover: {
+      paper: {
+        backgroundColor: bLight['500'],
+        '& .MuiListItemIcon-root': {
+          color: '#656565',
+        },
+      },
+    },
+    MuiTypography: {
+      colorTextSecondary: {
+        color: '#0a0a0a',
+      },
+    },
+    MuiDialog: {
+      paper: {
+        backgroundColor: bLight['500'],
+      },
+    },
+    MuiFormGroup: {
+      root: {
+        color: bLight['500'],
+      },
+    },
+    MuiMenuItem: {
+      root: {
+        fontSize: '0.875rem',
+      },
+    },
+    MuiDivider: {
+      root: {
+        margin: '.75rem 0',
+      },
+    },
+    MuiFormLabel: {
+      root: {
+        color: '#91b1b0',
+      },
+    },
+    MuiCheckbox: {
+      root: {
+        color: '#616161',
+      },
+    },
+    MuiIconButton: {
+      label: {},
+    },
+    MuiButton: {
+      root: {
+        background: '#fff',
+        color: '#000',
+        border: '1px solid transparent',
+        borderRadius: 500,
+        '&:hover': {
+          background: `${bLight['300']} !important`,
+          color: '#fff',
+        },
+      },
+      containedPrimary: {
+        backgroundColor: '#fff',
+      },
+      textPrimary: {
+        backgroundColor: bLight['300'],
+        '& span': {
+          color: '#fff',
+        },
+        '&:hover': {
+          backgroundColor: '#3079ff !important',
+        },
+      },
+      textSecondary: {
+        border: '1px solid #b3b3b3',
+        background: '#fff',
+        '&:hover': {
+          border: '1px solid #fff !important',
+          background: '#dedede !important',
+        },
+      },
+      label: {
+        color: '#000',
+        paddingRight: '1rem',
+        paddingLeft: '0.7rem',
+      },
+    },
+    MuiDrawer: {
+      root: {
+        background: bLight['500'],
+        paddingTop: '10px',
+        boxShadow: '-14px -7px 20px black',
+      },
+      '&:hover': {
+        backgroundColor: '#000',
+      },
+    },
+    MuiTableRow: {
+      root: {
+        padding: '10px 0',
+        transition: 'background-color .3s ease',
+        '&:hover': {
+          backgroundColor: '#e4e4e4 !important',
+        },
+        '@global': {
+          'td:nth-child(4)': {
+            color: '#3c3c3c !important',
+          },
+        },
+      },
+      head: {
+        backgroundColor: '#e0efff',
+      },
+    },
+    MuiTableCell: {
+      root: {
+        borderBottom: '1px solid #1d1d1d',
+        padding: '10px !important',
+        color: '#656565 !important',
+      },
+      head: {
+        borderBottom: '1px solid #282828',
+        fontSize: '0.75rem',
+        textTransform: 'uppercase',
+        letterSpacing: 1.2,
+      },
+    },
+    MuiAppBar: {
+      positionFixed: {
+        background: `${bLight['500']} !important`,
+        boxShadow: '13px -12px 20px 0px #000',
+      },
+      colorSecondary: {
+        color: bLight['300'],
+      },
+    },
+    NDAppBar: {
+      icon: {
+        color: '#fff',
+      },
+    },
+    NDAlbumGridView: {
+      albumName: {
+        marginTop: '0.5rem',
+        fontWeight: 700,
+        textTransform: 'none',
+        color: '#000000b0',
+      },
+      albumSubtitle: {
+        color: '#000000ad',
+        display: 'block',
+      },
+      albumContainer: {
+        backgroundColor: '#e0efff7d',
+        borderRadius: '.5rem',
+        padding: '.75rem',
+        transition: 'background-color .3s ease',
+        '&:hover': {
+          backgroundColor: '#c6dbff',
+        },
+      },
+      albumPlayButton: {
+        backgroundColor: bLight['500'],
+        borderRadius: '50%',
+        boxShadow: '0 8px 8px rgb(0 0 0 / 30%)',
+        padding: '0.35rem',
+        transition: 'padding .3s ease',
+        color: bLight['300'],
+        '&:hover': {
+          background: `${bLight['300']} !important`,
+          padding: '0.45rem',
+          color: bLight['500'],
+        },
+      },
+    },
+    NDPlaylistDetails: {
+      container: {
+        borderRadius: 0,
+        paddingTop: '2.5rem !important',
+        boxShadow: 'none',
+      },
+      title: {
+        fontSize: 'calc(1.5rem + 1.5vw);',
+        fontWeight: 700,
+        color: '#000000b0',
+      },
+      details: {
+        fontSize: '.875rem',
+        color: 'rgba(255,255,255, 0.8)',
+      },
+    },
+    NDAlbumDetails: {
+      root: {
+        borderRadius: 0,
+        boxShadow: '-1px 1px 6px 0px #00000057',
+      },
+      cardContents: {
+        alignItems: 'center',
+        paddingTop: '1.5rem',
+      },
+      recordName: {
+        fontSize: 'calc(1rem + 1.5vw);',
+        fontWeight: 700,
+      },
+      recordArtist: {
+        fontSize: '.875rem',
+        fontWeight: 700,
+      },
+      recordMeta: {
+        fontSize: '.875rem',
+        color: 'rgb(113 113 113 / 80%)',
+      },
+      commentBlock: {
+        fontSize: '.875rem',
+        color: 'rgb(113 113 113 / 80%)',
+      },
+    },
+    NDAlbumShow: {
+      albumActions: musicListActions,
+    },
+    NDPlaylistShow: {
+      playlistActions: musicListActions,
+    },
+    NDSubMenu: {
+      icon: {
+        color: '#656565',
+      },
+    },
+    NDAudioPlayer: {
+      audioTitle: {
+        color: '#000',
+        fontSize: '0.875rem',
+        '&.songTitle': {
+          fontWeight: 400,
+        },
+        '&.songInfo': {
+          fontSize: '0.675rem',
+          color: '#b3b3b3',
+        },
+      },
+      player: {},
+    },
+    NDLogin: {
+      actions: {
+        '& button': {
+          backgroundColor: '#3c9cff',
+        },
+      },
+      systemNameLink: {
+        textDecoration: 'none',
+        color: bLight['300'],
+      },
+      systemName: {
+        marginTop: '0.5em',
+        marginBottom: '1em',
+      },
+      icon: {
+        backgroundColor: 'transparent',
+        width: '100px',
+      },
+      card: {
+        minWidth: 300,
+        marginTop: '6em',
+        overflow: 'visible',
+        backgroundColor: '#ffffffe6',
+      },
+      avatar: {
+        marginTop: '-50px',
+      },
+    },
+    RaLayout: {
+      content: {
+        padding: '0 !important',
+      },
+    },
+    RaListToolbar: {
+      toolbar: {
+        padding: '0 .55rem !important',
+      },
+    },
+    RaDatagridHeaderCell: {
+      icon: {
+        color: '#717171 !important',
+      },
+    },
+    RaSearchInput: {
+      input: {
+        paddingLeft: '.9rem',
+        border: 0,
+      },
+    },
+    RaFilterButton: {
+      root: {
+        marginRight: '1rem',
+        '& button': {
+          color: '#0f0f0f',
+          backgroundColor: '#fff',
+          '& span': {
+            color: '#101010',
+          },
+          '&:hover': {
+            backgroundColor: '#dedede !important',
+          },
+        },
+      },
+    },
+    RaAutocompleteSuggestionList: {
+      suggestionsPaper: {
+        backgroundColor: '#fff',
+      },
+    },
+    RaLink: {
+      link: {
+        color: '#287eff',
+      },
+    },
+    RaLogout: {
+      icon: {
+        color: '#f90000!important',
+      },
+    },
+    RaMenuItemLink: {
+      root: {
+        color: '#232323 !important',
+        '& .MuiListItemIcon-root': {
+          color: '#656565',
+        },
+      },
+      active: {
+        backgroundColor: '#44a0ff1f',
+        color: '#232323 !important',
+        '& .MuiListItemIcon-root': {
+          color: '#0066ff',
+        },
+      },
+    },
+    RaSidebar: {
+      drawerPaper: {
+        '@media (min-width: 0px) and (max-width: 599.95px)': {
+          backgroundColor: `${bLight['500']} !important`,
+        },
+      },
+    },
+    RaBulkActionsToolbar: {
+      toolbar: {
+        backgroundColor: bLight['500'],
+      },
+    },
+    RaPaginationActions: {
+      button: {
+        backgroundColor: 'inherit',
+        minWidth: 48,
+        margin: '0 4px',
+        border: '1px solid #282828',
+        '@global': {
+          '> .MuiButton-label': {
+            padding: 0,
+          },
+        },
+      },
+      actions: {
+        '@global': {
+          '.next-page': {
+            marginLeft: 8,
+            marginRight: 8,
+          },
+          '.previous-page': {
+            marginRight: 8,
+          },
+        },
+      },
+    },
+  },
+  player: {
+    theme: 'light',
+  },
+}