diff --git a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.component.ts b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.component.ts
index d8348f19352e..9643c7a4ca39 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.component.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.component.ts
@@ -16,7 +16,7 @@
  */
 
 import { Component, inject } from '@angular/core';
-import { Storage, ThemingService } from '@nifi/shared';
+import { OS_SETTING, Storage, ThemingService } from '@nifi/shared';
 
 @Component({
     selector: 'nifi-jolt-transform-json-ui',
@@ -31,7 +31,7 @@ export class AppComponent {
     title = 'nifi-jolt-transform-json-ui';
 
     constructor() {
-        let theme = this.storage.getItem('theme');
+        let theme = this.storage.getItem('theme') ? this.storage.getItem('theme') : OS_SETTING;
 
         // Initially check if dark mode is enabled on system
         const darkModeOn = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -42,7 +42,7 @@ export class AppComponent {
         if (window.matchMedia) {
             // Watch for changes of the preference
             window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
-                theme = this.storage.getItem('theme');
+                theme = this.storage.getItem('theme') ? this.storage.getItem('theme') : OS_SETTING;
                 this.themingService.toggleTheme(e.matches, theme);
             });
         }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/app.component.ts b/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/app.component.ts
index b63b3b69dbca..35b972ae19bb 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/app.component.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/app.component.ts
@@ -16,7 +16,7 @@
  */
 
 import { Component, inject } from '@angular/core';
-import { ThemingService, Storage } from '@nifi/shared';
+import { ThemingService, Storage, OS_SETTING } from '@nifi/shared';
 
 @Component({
     selector: 'nifi-registry-app-root',
@@ -31,7 +31,7 @@ export class AppComponent {
     title = 'nifi-registry';
 
     constructor() {
-        let theme = this.storage.getItem('theme');
+        let theme = this.storage.getItem('theme') ? this.storage.getItem('theme') : OS_SETTING;
 
         // Initially check if dark mode is enabled on system
         const darkModeOn = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -42,7 +42,7 @@ export class AppComponent {
         if (window.matchMedia) {
             // Watch for changes of the preference
             window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-                theme = this.storage.getItem('theme');
+                theme = this.storage.getItem('theme') ? this.storage.getItem('theme') : OS_SETTING;
                 this.themingService.toggleTheme(e.matches, theme);
             });
         }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/_header.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/_header.component-theme.scss
index a8dd6f0751c7..66134360bb6e 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/_header.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/_header.component-theme.scss
@@ -44,4 +44,32 @@
             opacity: 0.6;
         }
     }
+
+    .global-menu-item {
+        &.selected {
+            @include mat.menu-overrides(
+                (
+                    item-icon-color: var(--mat-sys-primary),
+                    item-label-text-color: var(--mat-sys-primary)
+                )
+            );
+
+            .fa {
+                color: var(--mat-sys-primary);
+            }
+        }
+
+        &.selected:hover {
+            @include mat.menu-overrides(
+                (
+                    item-icon-color: var(--mat-sys-primary),
+                    item-label-text-color: var(--mat-sys-primary)
+                )
+            );
+
+            .fa {
+                color: var(--mat-sys-primary);
+            }
+        }
+    }
 }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/header.component.html b/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/header.component.html
index 519111c38aa9..c990052ac0e5 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/header.component.html
+++ b/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/header.component.html
@@ -69,7 +69,11 @@
                     </button>
                 </mat-menu>
                 <mat-menu #theming="matMenu" xPosition="before">
-                    <button mat-menu-item class="global-menu-item" (click)="toggleTheme(LIGHT_THEME)">
+                    <button
+                        mat-menu-item
+                        class="global-menu-item"
+                        [class.selected]="theme === LIGHT_THEME"
+                        (click)="toggleTheme(LIGHT_THEME)">
                         @if (theme === LIGHT_THEME) {
                             <i class="fa fa-check primary-color mr-2"></i>
                         }
@@ -78,7 +82,11 @@
                         }
                         Light
                     </button>
-                    <button mat-menu-item class="global-menu-item" (click)="toggleTheme(DARK_THEME)">
+                    <button
+                        mat-menu-item
+                        class="global-menu-item"
+                        [class.selected]="theme === DARK_THEME"
+                        (click)="toggleTheme(DARK_THEME)">
                         @if (theme === DARK_THEME) {
                             <i class="fa fa-check primary-color mr-2"></i>
                         }
@@ -87,7 +95,11 @@
                         }
                         Dark
                     </button>
-                    <button mat-menu-item class="global-menu-item" (click)="toggleTheme(OS_SETTING)">
+                    <button
+                        mat-menu-item
+                        class="global-menu-item"
+                        [class.selected]="theme === OS_SETTING"
+                        (click)="toggleTheme(OS_SETTING)">
                         @if (theme === OS_SETTING || theme === null) {
                             <i class="fa fa-check primary-color mr-2"></i>
                         }
@@ -98,7 +110,11 @@
                     </button>
                 </mat-menu>
                 <mat-menu #animations="matMenu" xPosition="before">
-                    <button mat-menu-item class="global-menu-item" (click)="toggleAnimations('false')">
+                    <button
+                        mat-menu-item
+                        class="global-menu-item"
+                        [class.selected]="disableAnimations === 'false'"
+                        (click)="toggleAnimations('false')">
                         @if (disableAnimations === 'false') {
                             <i class="fa fa-check primary-color mr-2"></i>
                         } @else {
@@ -106,7 +122,11 @@
                         }
                         Enabled
                     </button>
-                    <button mat-menu-item class="global-menu-item" (click)="toggleAnimations('true')">
+                    <button
+                        mat-menu-item
+                        class="global-menu-item"
+                        [class.selected]="disableAnimations === 'true'"
+                        (click)="toggleAnimations('true')">
                         @if (disableAnimations === 'true') {
                             <i class="fa fa-check primary-color mr-2"></i>
                         } @else {
@@ -114,7 +134,11 @@
                         }
                         Disabled
                     </button>
-                    <button mat-menu-item class="global-menu-item" (click)="toggleAnimations()">
+                    <button
+                        mat-menu-item
+                        class="global-menu-item"
+                        [class.selected]="disableAnimations === null"
+                        (click)="toggleAnimations()">
                         @if (disableAnimations === null) {
                             <i class="fa fa-check primary-color mr-2"></i>
                         } @else {
diff --git a/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/header.component.ts b/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/header.component.ts
index 9b800d83ca11..477b9e672dc2 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/header.component.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/header.component.ts
@@ -51,14 +51,14 @@ export class HeaderComponent implements OnInit {
 
     constructor() {
         this.darkModeOn = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-        this.theme = this.storage.getItem('theme');
+        this.theme = this.storage.getItem('theme') ? this.storage.getItem('theme') : OS_SETTING;
         this.disableAnimations = this.storage.getItem('disable-animations');
 
         if (window.matchMedia) {
             // Watch for changes of the preference
             window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
                 this.darkModeOn = e.matches;
-                this.theme = this.storage.getItem('theme');
+                this.theme = this.storage.getItem('theme') ? this.storage.getItem('theme') : OS_SETTING;
             });
         }
     }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/app.component.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/app.component.ts
index e1d4f434d0c7..8871ddb3833c 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/app.component.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/app.component.ts
@@ -25,7 +25,7 @@ import {
     Router
 } from '@angular/router';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Storage, ThemingService } from '@nifi/shared';
+import { OS_SETTING, Storage, ThemingService } from '@nifi/shared';
 import { MatDialog } from '@angular/material/dialog';
 import { NiFiState } from './state';
 import { Store } from '@ngrx/store';
@@ -102,7 +102,7 @@ export class AppComponent implements OnDestroy {
                 }
             });
 
-        let theme = this.storage.getItem('theme');
+        let theme = this.storage.getItem('theme') ? this.storage.getItem('theme') : OS_SETTING;
 
         // Initially check if dark mode is enabled on system
         const darkModeOn = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -113,7 +113,7 @@ export class AppComponent implements OnDestroy {
         if (window.matchMedia) {
             // Watch for changes of the preference
             window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
-                theme = this.storage.getItem('theme');
+                theme = this.storage.getItem('theme') ? this.storage.getItem('theme') : OS_SETTING;
                 this.themingService.toggleTheme(e.matches, theme);
             });
         }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
index e4d0ca519065..57c7dcce22a2 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
@@ -44,4 +44,32 @@
             opacity: 0.6;
         }
     }
+
+    .global-menu-item {
+        &.selected {
+            @include mat.menu-overrides(
+                (
+                    item-icon-color: var(--mat-sys-primary),
+                    item-label-text-color: var(--mat-sys-primary)
+                )
+            );
+
+            .fa {
+                color: var(--mat-sys-primary);
+            }
+        }
+
+        &.selected:hover {
+            @include mat.menu-overrides(
+                (
+                    item-icon-color: var(--mat-sys-primary),
+                    item-label-text-color: var(--mat-sys-primary)
+                )
+            );
+
+            .fa {
+                color: var(--mat-sys-primary);
+            }
+        }
+    }
 }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/navigation.component.html b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/navigation.component.html
index b78ecb84203d..42c83d6a7416 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/navigation.component.html
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/navigation.component.html
@@ -167,27 +167,39 @@
                         </button>
                     </mat-menu>
                     <mat-menu #theming="matMenu" xPosition="before">
-                        <button mat-menu-item class="global-menu-item" (click)="toggleTheme(LIGHT_THEME)">
+                        <button
+                            mat-menu-item
+                            class="global-menu-item"
+                            [class.selected]="theme === LIGHT_THEME"
+                            (click)="toggleTheme(LIGHT_THEME)">
                             @if (theme === LIGHT_THEME) {
-                                <i class="fa fa-check primary-color mr-2"></i>
+                                <i class="fa fa-check mr-2"></i>
                             }
                             @if (theme !== LIGHT_THEME) {
                                 <i class="fa mr-2"></i>
                             }
                             Light
                         </button>
-                        <button mat-menu-item class="global-menu-item" (click)="toggleTheme(DARK_THEME)">
+                        <button
+                            mat-menu-item
+                            class="global-menu-item"
+                            [class.selected]="theme === DARK_THEME"
+                            (click)="toggleTheme(DARK_THEME)">
                             @if (theme === DARK_THEME) {
-                                <i class="fa fa-check primary-color mr-2"></i>
+                                <i class="fa fa-check mr-2"></i>
                             }
                             @if (theme !== DARK_THEME) {
                                 <i class="fa mr-2"></i>
                             }
                             Dark
                         </button>
-                        <button mat-menu-item class="global-menu-item" (click)="toggleTheme(OS_SETTING)">
+                        <button
+                            mat-menu-item
+                            class="global-menu-item"
+                            [class.selected]="theme === OS_SETTING"
+                            (click)="toggleTheme(OS_SETTING)">
                             @if (theme === OS_SETTING || theme === null) {
-                                <i class="fa fa-check primary-color mr-2"></i>
+                                <i class="fa fa-check mr-2"></i>
                             }
                             @if (theme !== OS_SETTING && theme !== null) {
                                 <i class="fa mr-2"></i>
@@ -196,25 +208,37 @@
                         </button>
                     </mat-menu>
                     <mat-menu #animations="matMenu" xPosition="before">
-                        <button mat-menu-item class="global-menu-item" (click)="toggleAnimations('false')">
+                        <button
+                            mat-menu-item
+                            class="global-menu-item"
+                            [class.selected]="disableAnimations === 'false'"
+                            (click)="toggleAnimations('false')">
                             @if (disableAnimations === 'false') {
-                                <i class="fa fa-check primary-color mr-2"></i>
+                                <i class="fa fa-check mr-2"></i>
                             } @else {
                                 <i class="fa mr-2"></i>
                             }
                             Enabled
                         </button>
-                        <button mat-menu-item class="global-menu-item" (click)="toggleAnimations('true')">
+                        <button
+                            mat-menu-item
+                            class="global-menu-item"
+                            [class.selected]="disableAnimations === 'true'"
+                            (click)="toggleAnimations('true')">
                             @if (disableAnimations === 'true') {
-                                <i class="fa fa-check primary-color mr-2"></i>
+                                <i class="fa fa-check mr-2"></i>
                             } @else {
                                 <i class="fa mr-2"></i>
                             }
                             Disabled
                         </button>
-                        <button mat-menu-item class="global-menu-item" (click)="toggleAnimations()">
+                        <button
+                            mat-menu-item
+                            class="global-menu-item"
+                            [class.selected]="disableAnimations === null"
+                            (click)="toggleAnimations()">
                             @if (disableAnimations === null) {
-                                <i class="fa fa-check primary-color mr-2"></i>
+                                <i class="fa fa-check mr-2"></i>
                             } @else {
                                 <i class="fa mr-2"></i>
                             }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/navigation.component.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/navigation.component.ts
index cfe2c0da4c82..67b1ef9f615a 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/navigation.component.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/navigation.component.ts
@@ -86,13 +86,13 @@ export class Navigation implements OnInit, OnDestroy {
 
     constructor() {
         this.darkModeOn = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-        this.theme = this.storage.getItem('theme');
+        this.theme = this.storage.getItem('theme') ? this.storage.getItem('theme') : OS_SETTING;
         this.disableAnimations = this.storage.getItem('disable-animations');
 
         // Watch for changes of the preference
         window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
             this.darkModeOn = e.matches;
-            this.theme = this.storage.getItem('theme');
+            this.theme = this.storage.getItem('theme') ? this.storage.getItem('theme') : OS_SETTING;
         });
     }
 
diff --git a/nifi-frontend/src/main/frontend/apps/standard-content-viewer/src/app/app.component.ts b/nifi-frontend/src/main/frontend/apps/standard-content-viewer/src/app/app.component.ts
index 482d5d903a2b..9a9fd5d12f28 100644
--- a/nifi-frontend/src/main/frontend/apps/standard-content-viewer/src/app/app.component.ts
+++ b/nifi-frontend/src/main/frontend/apps/standard-content-viewer/src/app/app.component.ts
@@ -16,7 +16,7 @@
  */
 
 import { Component, inject } from '@angular/core';
-import { Storage, ThemingService } from '@nifi/shared';
+import { OS_SETTING, Storage, ThemingService } from '@nifi/shared';
 
 @Component({
     selector: 'app',
@@ -31,7 +31,7 @@ export class AppComponent {
     title = 'standard-content-viewer';
 
     constructor() {
-        let theme = this.storage.getItem('theme');
+        let theme = this.storage.getItem('theme') ? this.storage.getItem('theme') : OS_SETTING;
 
         // Initially check if dark mode is enabled on system
         const darkModeOn = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -42,7 +42,7 @@ export class AppComponent {
         if (window.matchMedia) {
             // Watch for changes of the preference
             window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
-                theme = this.storage.getItem('theme');
+                theme = this.storage.getItem('theme') ? this.storage.getItem('theme') : OS_SETTING;
                 this.themingService.toggleTheme(e.matches, theme);
             });
         }
diff --git a/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/app.component.ts b/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/app.component.ts
index 6e7412cbc8ed..5d3bbf04113e 100644
--- a/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/app.component.ts
+++ b/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/app.component.ts
@@ -16,7 +16,7 @@
  */
 
 import { Component, inject } from '@angular/core';
-import { Storage, ThemingService } from '@nifi/shared';
+import { OS_SETTING, Storage, ThemingService } from '@nifi/shared';
 
 @Component({
     selector: 'app',
@@ -31,7 +31,7 @@ export class AppComponent {
     title = 'update-attribute';
 
     constructor() {
-        let theme = this.storage.getItem('theme');
+        let theme = this.storage.getItem('theme') ? this.storage.getItem('theme') : OS_SETTING;
 
         // Initially check if dark mode is enabled on system
         const darkModeOn = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -42,7 +42,7 @@ export class AppComponent {
         if (window.matchMedia) {
             // Watch for changes of the preference
             window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
-                theme = this.storage.getItem('theme');
+                theme = this.storage.getItem('theme') ? this.storage.getItem('theme') : OS_SETTING;
                 this.themingService.toggleTheme(e.matches, theme);
             });
         }