diff --git a/packages/main/src/plugin/color-registry.ts b/packages/main/src/plugin/color-registry.ts
index 7f6fae4430c..e9a34f20e5a 100644
--- a/packages/main/src/plugin/color-registry.ts
+++ b/packages/main/src/plugin/color-registry.ts
@@ -295,7 +295,7 @@ export class ColorRegistry {
     });
     this.registerColor(`${glNav}icon-inset-bg`, {
       dark: colorPalette.charcoal[800],
-      light: colorPalette.dustypurple[200],
+      light: colorPalette.gray[300],
     });
     this.registerColor(`${glNav}icon-selected`, {
       dark: colorPalette.white,
@@ -303,7 +303,7 @@ export class ColorRegistry {
     });
     this.registerColor(`${glNav}icon-selected-bg`, {
       dark: colorPalette.charcoal[500],
-      light: colorPalette.purple[300],
+      light: colorPalette.gray[300],
     });
     this.registerColor(`${glNav}icon-selected-highlight`, {
       dark: colorPalette.purple[500],
@@ -334,7 +334,7 @@ export class ColorRegistry {
 
     this.registerColor(`${sNav}bg`, {
       dark: colorPalette.charcoal[700],
-      light: colorPalette.dustypurple[100],
+      light: colorPalette.gray[100],
     });
 
     this.registerColor(`${sNav}header-text`, {
@@ -359,12 +359,12 @@ export class ColorRegistry {
 
     this.registerColor(`${sNav}text-selected`, {
       dark: colorPalette.white,
-      light: colorPalette.purple[800],
+      light: colorPalette.black,
     });
 
     this.registerColor(`${sNav}selected-bg`, {
       dark: colorPalette.charcoal[500],
-      light: colorPalette.purple[300],
+      light: colorPalette.gray[300],
     });
 
     this.registerColor(`${sNav}selected-highlight`, {
@@ -399,7 +399,7 @@ export class ColorRegistry {
     const invCt = 'invert-content-';
     this.registerColor(`${invCt}bg`, {
       dark: colorPalette.charcoal[800],
-      light: colorPalette.gray[50],
+      light: colorPalette.gray[25],
     });
 
     this.registerColor(`${invCt}header-text`, {
@@ -414,7 +414,7 @@ export class ColorRegistry {
 
     this.registerColor(`${invCt}card-bg`, {
       dark: colorPalette.charcoal[600],
-      light: colorPalette.gray[300],
+      light: colorPalette.gray[100],
     });
 
     this.registerColor(`${invCt}card-header-text`, {
@@ -482,12 +482,12 @@ export class ColorRegistry {
 
     this.registerColor(`${ct}card-bg`, {
       dark: colorPalette.charcoal[800],
-      light: colorPalette.gray[50],
+      light: colorPalette.gray[25],
     });
 
     this.registerColor(`${ct}card-hover-bg`, {
       dark: colorPalette.charcoal[500],
-      light: colorPalette.purple[200],
+      light: colorPalette.gray[300],
     });
 
     this.registerColor(`${ct}card-selected-bg`, {
@@ -522,7 +522,7 @@ export class ColorRegistry {
 
     this.registerColor(`${ct}bg`, {
       dark: colorPalette.charcoal[700],
-      light: colorPalette.gray[300],
+      light: colorPalette.gray[100],
     });
 
     this.registerColor(`${ct}card-icon`, {
@@ -537,12 +537,12 @@ export class ColorRegistry {
 
     this.registerColor(`${ct}card-carousel-card-bg`, {
       dark: colorPalette.charcoal[600],
-      light: colorPalette.gray[300],
+      light: colorPalette.gray[200],
     });
 
     this.registerColor(`${ct}card-carousel-card-hover-bg`, {
       dark: colorPalette.charcoal[500],
-      light: colorPalette.gray[200],
+      light: colorPalette.gray[100],
     });
 
     this.registerColor(`${ct}card-carousel-card-header-text`, {
@@ -557,12 +557,12 @@ export class ColorRegistry {
 
     this.registerColor(`${ct}card-carousel-nav`, {
       dark: colorPalette.gray[800],
-      light: colorPalette.gray[400],
+      light: colorPalette.gray[300],
     });
 
     this.registerColor(`${ct}card-carousel-hover-nav`, {
       dark: colorPalette.gray[600],
-      light: colorPalette.gray[600],
+      light: colorPalette.gray[500],
     });
 
     this.registerColor(`${ct}card-carousel-disabled-nav`, {
diff --git a/packages/renderer/src/PreferencesNavigation.svelte b/packages/renderer/src/PreferencesNavigation.svelte
index 07196367b4e..eb0d0838a76 100644
--- a/packages/renderer/src/PreferencesNavigation.svelte
+++ b/packages/renderer/src/PreferencesNavigation.svelte
@@ -45,7 +45,8 @@ onMount(async () => {
   aria-label="PreferencesNavigation">
   <div class="flex items-center">
     <div class="pt-4 px-3 mb-10">
-      <p class="text-2xl font-bold text-[color:var(--pd-secondary-nav-header-text)] border-l-[4px] border-transparent">
+      <p
+        class="text-2xl font-semibold text-[color:var(--pd-secondary-nav-header-text)] border-l-[4px] border-transparent">
         Settings
       </p>
     </div>
diff --git a/packages/renderer/src/lib/preferences/PreferencesRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesRendering.svelte
index 8653e5f405c..eb29264c63b 100644
--- a/packages/renderer/src/lib/preferences/PreferencesRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesRendering.svelte
@@ -77,7 +77,7 @@ function updateSearchValue(event: any) {
           {@const records = matchingRecords.get(configSection)}
           {#if records}
             <div>
-              <div class="text-lg font-semibold first-letter:uppercase">{records.at(0)?.title}</div>
+              <div class="text-lg font-medium first-letter:uppercase">{records.at(0)?.title}</div>
               {#each records as configItem}
                 <div class="bg-[var(--pd-invert-content-card-bg)] rounded-md mt-2 ml-2">
                   <PreferencesRenderingItem record={configItem} />
diff --git a/packages/ui/src/lib/settingsNavItem/SettingsNavItem.svelte b/packages/ui/src/lib/settingsNavItem/SettingsNavItem.svelte
index 467919e3b93..a8bf62ae2db 100644
--- a/packages/ui/src/lib/settingsNavItem/SettingsNavItem.svelte
+++ b/packages/ui/src/lib/settingsNavItem/SettingsNavItem.svelte
@@ -36,18 +36,17 @@ function click(): void {
 <a class="no-underline" href={href} aria-label={title} on:click={click}>
   <div
     class="flex w-full pr-1 py-2 justify-between items-center cursor-pointer border-l-[4px]"
-    class:text-white={selected}
     class:pl-3={!child}
     class:pl-6={child}
     class:leading-none={child}
     class:text-lg={!child}
-    class:font-semibold={!child}
+    class:font-medium={!child}
     class:bg-[var(--pd-secondary-nav-selected-bg)]={selected}
     class:border-[var(--pd-secondary-nav-bg)]={!selected}
     class:border-[var(--pd-secondary-nav-selected-highlight)]={selected}
     class:text-[color:var(--pd-secondary-nav-text-selected)]={selected}
     class:text-[color:var(--pd-secondary-nav-text)]={!selected}
-    class:hover:[color:var(--pd-secondary-nav-text-hover)]={!selected}
+    class:hover:text-[color:var(--pd-secondary-nav-text-hover)]={!selected}
     class:hover:bg-[var(--pd-secondary-nav-text-hover-bg)]={!selected}
     class:hover:border-[var(--pd-secondary-nav-text-hover-bg)]={!selected}>
     <span class="group-hover:block flex flex-row items-center" class:capitalize={!child}>
@@ -57,7 +56,7 @@ function click(): void {
       {title}
     </span>
     {#if section}
-      <div class="px-2 relative w-4 h-4 [color:var(--pd-secondary-nav-expander)]">
+      <div class="px-2 relative w-4 h-4 text-[color:var(--pd-secondary-nav-expander)]">
         {#if expanded}
           <i
             class="fas fa-angle-down text-lg absolute left-0 top-0"
diff --git a/tailwind-color-palette.json b/tailwind-color-palette.json
index bd5fd243410..bd11da422ff 100644
--- a/tailwind-color-palette.json
+++ b/tailwind-color-palette.json
@@ -50,6 +50,7 @@
     "900": "#710689"
   },
   "gray": {
+    "25": "#fefefe",
     "50": "#f9fafb",
     "100": "#f6f6f6",
     "200": "#efefef",