diff --git a/ui/src/themes/catppuccinFrappe.js b/ui/src/themes/catppuccinFrappe.js
index 61e011b84..87ff6258f 100644
--- a/ui/src/themes/catppuccinFrappe.js
+++ b/ui/src/themes/catppuccinFrappe.js
@@ -4,92 +4,92 @@ export default {
   themeName: 'Catppuccin Frappé',
   palette: {
     primary: {
-      main: '#ca9ee6',
+      main: '#ca9ee6', // Mauve
     },
     secondary: {
-      main: '#292c3c',
-      contrastText: '#c6d0f5',
+      main: '#292c3c', //Mantle
+      contrastText: '#c6d0f5', // Text
     },
     type: 'dark',
     background: {
-      default: '#303446',
+      default: '#303446', // Base
     },
   },
   overrides: {
     MuiPaper: {
       root: {
-        color: '#c6d0f5',
-        backgroundColor: '#292c3c',
+        color: '#c6d0f5', // Text
+        backgroundColor: '#292c3c', // Mantle
         MuiSnackbarContent: {
           root: {
-            color: '#c6d0f5',
-            backgroundColor: '#e78284',
+            color: '#c6d0f5', // Text
+            backgroundColor: '#e78284', // Red
           },
           message: {
-            color: '#c6d0f5',
-            backgroundColor: '#e78284',
+            color: '#c6d0f5', // Text
+            backgroundColor: '#e78284', // Red
           },
         },
       },
     },
     MuiButton: {
       textPrimary: {
-        color: '#8caaee',
+        color: '#8caaee', // Blue
       },
       textSecondary: {
-        color: '#c6d0f5',
+        color: '#c6d0f5', // Text
       },
     },
     MuiChip: {
       clickable: {
-        background: '#292c3c',
+        background: '#292c3c', //Mantle
       },
     },
     MuiFormGroup: {
       root: {
-        color: '#c6d0f5',
+        color: '#c6d0f5', // Text
       },
     },
     MuiFormHelperText: {
       root: {
         Mui: {
           error: {
-            color: '#e78284',
+            color: '#e78284', // Red
           },
         },
       },
     },
     MuiTableHead: {
       root: {
-        color: '#c6d0f5',
-        background: '#292c3c',
+        color: '#c6d0f5', // Text
+        background: '#292c3c', //Mantle
       },
     },
     MuiTableCell: {
       root: {
-        color: '#c6d0f5',
-        background: '#292c3c !important',
+        color: '#c6d0f5', // Text
+        background: '#292c3c !important', //Mantle
       },
       head: {
-        color: '#c6d0f5',
-        background: '#292c3c !important',
+        color: '#c6d0f5', // Text
+        background: '#292c3c !important', //Mantle
       },
     },
     NDLogin: {
       systemNameLink: {
-        color: '#ca9ee6',
+        color: '#ca9ee6', // Mauve
       },
       icon: {},
       welcome: {
-        color: '#c6d0f5',
+        color: '#c6d0f5', // Text
       },
       card: {
         minWidth: 300,
-        background: '#303446',
+        background: '#303446', // Base
       },
       avatar: {},
       button: {
-        boxShadow: '3px 3px 5px #303446',
+        boxShadow: '3px 3px 5px #303446', // Base
       },
     },
     NDMobileArtistDetails: {
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.js b/ui/src/themes/catppuccinMocha.js
index eab9ac2fe..bdfb33520 100644
--- a/ui/src/themes/catppuccinMocha.js
+++ b/ui/src/themes/catppuccinMocha.js
@@ -4,92 +4,92 @@ export default {
   themeName: 'Catppuccin Mocha',
   palette: {
     primary: {
-      main: '#cba6f7',
+      main: '#cba6f7', // Mauve
     },
     secondary: {
-      main: '#181825',
-      contrastText: '#cdd6f4',
+      main: '#181825', // Mantle
+      contrastText: '#cdd6f4', // Text
     },
     type: 'dark',
     background: {
-      default: '#1e1e2e',
+      default: '#1e1e2e', // Base
     },
   },
   overrides: {
     MuiPaper: {
       root: {
-        color: '#cdd6f4',
-        backgroundColor: '#181825',
+        color: '#cdd6f4', // Text
+        backgroundColor: '#181825', // Mantle
         MuiSnackbarContent: {
           root: {
-            color: '#cdd6f4',
-            backgroundColor: '#f38ba8',
+            color: '#cdd6f4', // Text
+            backgroundColor: '#f38ba8', // Red
           },
           message: {
-            color: '#cdd6f4',
-            backgroundColor: '#f38ba8',
+            color: '#cdd6f4', // Text
+            backgroundColor: '#f38ba8', // Red
           },
         },
       },
     },
     MuiButton: {
       textPrimary: {
-        color: '#89b4fa',
+        color: '#89b4fa', // Blue
       },
       textSecondary: {
-        color: '#cdd6f4',
+        color: '#cdd6f4', // Text
       },
     },
     MuiChip: {
       clickable: {
-        background: '#181825',
+        background: '#181825', // Mantle
       },
     },
     MuiFormGroup: {
       root: {
-        color: '#cdd6f4',
+        color: '#cdd6f4', // Text
       },
     },
     MuiFormHelperText: {
       root: {
         Mui: {
           error: {
-            color: '#f38ba8',
+            color: '#f38ba8', // Red
           },
         },
       },
     },
     MuiTableHead: {
       root: {
-        color: '#cdd6f4',
-        background: '#181825',
+        color: '#cdd6f4', // Text
+        background: '#181825', // Mantle
       },
     },
     MuiTableCell: {
       root: {
-        color: '#cdd6f4',
-        background: '#181825 !important',
+        color: '#cdd6f4', // Text
+        background: '#181825 !important', // Mantle
       },
       head: {
-        color: '#cdd6f4',
-        background: '#181825 !important',
+        color: '#cdd6f4', // Text
+        background: '#181825 !important', // Mantle
       },
     },
     NDLogin: {
       systemNameLink: {
-        color: '#cba6f7',
+        color: '#cba6f7', // Mauve
       },
       icon: {},
       welcome: {
-        color: '#cdd6f4',
+        color: '#cdd6f4', // Text
       },
       card: {
         minWidth: 300,
-        background: '#1e1e2e',
+        background: '#1e1e2e', // Base
       },
       avatar: {},
       button: {
-        boxShadow: '3px 3px 5px #1e1e2e',
+        boxShadow: '3px 3px 5px #1e1e2e', // Base
       },
     },
     NDMobileArtistDetails: {