diff --git a/src/renderer/components/item-list/item-table-list/item-table-list-column.module.css b/src/renderer/components/item-list/item-table-list/item-table-list-column.module.css
index 84c26c821..1b1dbd9f9 100644
--- a/src/renderer/components/item-list/item-table-list/item-table-list-column.module.css
+++ b/src/renderer/components/item-list/item-table-list/item-table-list-column.module.css
@@ -129,7 +129,7 @@
     }
 
     @mixin light {
-        background-color: var(--theme-colors-surface);
+        background-color: darken(var(--theme-colors-surface), 5%);
     }
 }
 
diff --git a/src/renderer/features/settings/components/general/theme-settings.tsx b/src/renderer/features/settings/components/general/theme-settings.tsx
index c71ad467e..86656ed30 100644
--- a/src/renderer/features/settings/components/general/theme-settings.tsx
+++ b/src/renderer/features/settings/components/general/theme-settings.tsx
@@ -25,6 +25,10 @@ const getThemeSwatchColors = (theme: AppTheme) => {
     return {
         background: themeConfig.colors?.background || 'rgb(0, 0, 0)',
         foreground: themeConfig.colors?.foreground || 'rgb(255, 255, 255)',
+        primary:
+            themeConfig.colors?.primary ||
+            themeConfig.colors?.['state-info'] ||
+            'rgb(53, 116, 252)',
         surface: themeConfig.colors?.surface || themeConfig.colors?.background || 'rgb(0, 0, 0)',
     };
 };
@@ -74,6 +78,7 @@ const renderThemeOption = ({ option }: { option: { label: string; value: string
                 <ColorSwatch color={String(colors.background)} />
                 <ColorSwatch color={String(colors.surface)} />
                 <ColorSwatch color={String(colors.foreground)} />
+                <ColorSwatch color={String(colors.primary)} />
             </Group>
             <span style={{ flex: 1 }}>{option.label}</span>
         </Group>
@@ -144,6 +149,7 @@ export const ThemeSettings = () => {
                         }
                     }}
                     renderOption={renderThemeOption}
+                    width={240}
                 />
             ),
             description: t('setting.theme', {
@@ -167,6 +173,7 @@ export const ThemeSettings = () => {
                         });
                     }}
                     renderOption={renderThemeOption}
+                    width={240}
                 />
             ),
             description: t('setting.themeDark', {
@@ -190,6 +197,7 @@ export const ThemeSettings = () => {
                         });
                     }}
                     renderOption={renderThemeOption}
+                    width={240}
                 />
             ),
             description: t('setting.themeLight', {
diff --git a/src/renderer/layouts/default-layout/player-bar.module.css b/src/renderer/layouts/default-layout/player-bar.module.css
index ae01b63fd..d2d4558f8 100644
--- a/src/renderer/layouts/default-layout/player-bar.module.css
+++ b/src/renderer/layouts/default-layout/player-bar.module.css
@@ -1,7 +1,15 @@
 .container {
     z-index: 200;
     grid-area: player;
-    background: darken(var(--theme-colors-background), 10%);
+
+    @mixin light {
+        background: darken(var(--theme-colors-background), 5%);
+    }
+
+    @mixin dark {
+        background: darken(var(--theme-colors-background), 10%);
+    }
+
     transition: background 0.5s;
 }
 
diff --git a/src/shared/themes/ayu-light/ayu-light.ts b/src/shared/themes/ayu-light/ayu-light.ts
index 3ed1d2b0f..701b501f9 100644
--- a/src/shared/themes/ayu-light/ayu-light.ts
+++ b/src/shared/themes/ayu-light/ayu-light.ts
@@ -15,7 +15,7 @@ export const ayuLight: AppThemeConfiguration = {
         black: 'rgb(0, 0, 0)',
         foreground: 'rgb(57, 58, 52)',
         'foreground-muted': 'rgb(128, 128, 128)',
-        primary: 'rgb(55, 118, 171)',
+        primary: 'rgb(86, 156, 214)',
         'state-error': 'rgb(255, 51, 51)',
         'state-info': 'rgb(55, 118, 171)',
         'state-success': 'rgb(86, 171, 47)',
diff --git a/src/shared/themes/default-dark/default-dark.ts b/src/shared/themes/default-dark/default-dark.ts
index e0c1d96ec..28cf8e950 100644
--- a/src/shared/themes/default-dark/default-dark.ts
+++ b/src/shared/themes/default-dark/default-dark.ts
@@ -2,5 +2,8 @@ import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
 
 export const defaultDark: AppThemeConfiguration = {
     app: {},
+    colors: {
+        primary: 'rgb(53, 116, 252)',
+    },
     mode: 'dark',
 };
diff --git a/src/shared/themes/default-light/default-light.ts b/src/shared/themes/default-light/default-light.ts
index 4f1b7e497..fb3f5ac24 100644
--- a/src/shared/themes/default-light/default-light.ts
+++ b/src/shared/themes/default-light/default-light.ts
@@ -16,6 +16,7 @@ export const defaultLight: AppThemeConfiguration = {
         black: 'rgb(0, 0, 0)',
         foreground: 'rgb(25, 25, 25)',
         'foreground-muted': 'rgb(80, 80, 80)',
+        primary: 'rgb(0, 122, 255)',
         'state-error': 'rgb(255, 59, 48)',
         'state-info': 'rgb(0, 122, 255)',
         'state-success': 'rgb(48, 209, 88)',
diff --git a/src/shared/themes/default.ts b/src/shared/themes/default.ts
index d47083977..65e1d9dd7 100644
--- a/src/shared/themes/default.ts
+++ b/src/shared/themes/default.ts
@@ -24,6 +24,7 @@ export const defaultTheme: AppThemeConfiguration = {
         black: 'rgb(0, 0, 0)',
         foreground: 'rgb(225, 225, 225)',
         'foreground-muted': 'rgb(150, 150, 150)',
+        primary: 'rgb(53, 116, 252)',
         'state-error': 'rgb(204, 50, 50)',
         'state-info': 'rgb(53, 116, 252)',
         'state-success': 'rgb(50, 204, 50)',
diff --git a/src/shared/themes/gruvbox-dark/gruvbox-dark.ts b/src/shared/themes/gruvbox-dark/gruvbox-dark.ts
index 5509fb7d1..e341cb7e5 100644
--- a/src/shared/themes/gruvbox-dark/gruvbox-dark.ts
+++ b/src/shared/themes/gruvbox-dark/gruvbox-dark.ts
@@ -15,7 +15,7 @@ export const gruvboxDark: AppThemeConfiguration = {
         black: 'rgb(0, 0, 0)',
         foreground: 'rgb(235, 219, 178)',
         'foreground-muted': 'rgb(189, 174, 147)',
-        primary: 'rgb(184, 187, 38)',
+        primary: 'rgb(250, 189, 47)',
         'state-error': 'rgb(251, 73, 52)',
         'state-info': 'rgb(131, 165, 152)',
         'state-success': 'rgb(184, 187, 38)',
diff --git a/src/shared/themes/gruvbox-light/gruvbox-light.ts b/src/shared/themes/gruvbox-light/gruvbox-light.ts
index e0274e020..f922533cd 100644
--- a/src/shared/themes/gruvbox-light/gruvbox-light.ts
+++ b/src/shared/themes/gruvbox-light/gruvbox-light.ts
@@ -15,7 +15,7 @@ export const gruvboxLight: AppThemeConfiguration = {
         black: 'rgb(0, 0, 0)',
         foreground: 'rgb(60, 56, 54)',
         'foreground-muted': 'rgb(124, 111, 100)',
-        primary: 'rgb(121, 116, 14)',
+        primary: 'rgb(214, 93, 14)',
         'state-error': 'rgb(204, 36, 29)',
         'state-info': 'rgb(7, 102, 120)',
         'state-success': 'rgb(121, 116, 14)',
diff --git a/src/shared/themes/vscode-light-plus/vscode-light-plus.ts b/src/shared/themes/vscode-light-plus/vscode-light-plus.ts
index fe9ce2fde..39a513fd9 100644
--- a/src/shared/themes/vscode-light-plus/vscode-light-plus.ts
+++ b/src/shared/themes/vscode-light-plus/vscode-light-plus.ts
@@ -26,7 +26,7 @@ export const vscodeLightPlus: AppThemeConfiguration = {
     },
     mantineOverride: {
         primaryShade: {
-            light: 4,
+            light: 9,
         },
     },
     mode: 'light',