diff --git a/packages/uhk-common/src/models/application-settings.ts b/packages/uhk-common/src/models/application-settings.ts
index 603efe5f672..5b50faf120f 100644
--- a/packages/uhk-common/src/models/application-settings.ts
+++ b/packages/uhk-common/src/models/application-settings.ts
@@ -7,11 +7,6 @@ export enum AppTheme {
     Dark = 'dark'
 }
 
-export type AppThemeSelect = {
-    id: AppTheme;
-    text: string;
-};
-
 export interface ApplicationSettings {
     checkForUpdateOnStartUp: boolean;
     /**
diff --git a/packages/uhk-web/src/app/components/agent/settings/settings.component.html b/packages/uhk-web/src/app/components/agent/settings/settings.component.html
index 349f5e37aea..efaac75dcfb 100644
--- a/packages/uhk-web/src/app/components/agent/settings/settings.component.html
+++ b/packages/uhk-web/src/app/components/agent/settings/settings.component.html
@@ -60,20 +60,29 @@ <h1>
     </div>
 </div>
 
-<div class="col-12 col-md-6 mb-0 mt-2">
+<div class="col-12 mb-0 mt-2">
     <div class="d-flex align-items-center">
         <label class="mb-0 me-2">Theme</label>
-        <ng-select
-            class="theme-selector"
-            [items]="themes$ | async"
-            [ngModel]="appTheme$ | async"
-            (ngModelChange)="selectTheme($event)"
-            [clearable]="false"
-            bindLabel="text"
-            bindValue="id"
-        />
+        <div class="btn-group"
+             role="group"
+             aria-label="Theme"
+             *ngIf="appTheme$ | async as appTheme">
+            <button *ngFor="let theme of themes"
+                    type="button"
+                    class="btn"
+                    [class.btn-primary]="appTheme === theme.id"
+                    [class.btn-default]="appTheme !== theme.id"
+                    [attr.aria-pressed]="appTheme === theme.id"
+                    [ngbTooltip]="theme.text"
+                    triggers="hover"
+                    (click)="selectTheme(theme.id)"
+            >
+                <fa-icon [icon]="theme.icon"></fa-icon>
+            </button>
+        </div>
         <circle-tooltip
             *ngIf="isLinux$ | async"
+            class="ms-2"
             [tooltip]="systemThemeTooltip"
             width="300"
         />
diff --git a/packages/uhk-web/src/app/components/agent/settings/settings.component.scss b/packages/uhk-web/src/app/components/agent/settings/settings.component.scss
index 13ba9a500cd..5fced9798c1 100644
--- a/packages/uhk-web/src/app/components/agent/settings/settings.component.scss
+++ b/packages/uhk-web/src/app/components/agent/settings/settings.component.scss
@@ -2,10 +2,6 @@ h1 {
     margin-bottom: 1rem;
 }
 
-.theme-selector {
-    min-width: 230px;
-}
-
 .macro-grouping-number-input {
     width: 4rem;
 }
diff --git a/packages/uhk-web/src/app/components/agent/settings/settings.component.ts b/packages/uhk-web/src/app/components/agent/settings/settings.component.ts
index 4511f2b09d2..ee104548631 100644
--- a/packages/uhk-web/src/app/components/agent/settings/settings.component.ts
+++ b/packages/uhk-web/src/app/components/agent/settings/settings.component.ts
@@ -1,10 +1,11 @@
 import { Component, inject } from '@angular/core';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { faCog, faDesktop, faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { faCog } from '@fortawesome/free-solid-svg-icons';
 
-import { AppTheme, AppThemeSelect, MacroGroupingSettings } from 'uhk-common';
+import { AppTheme, MacroGroupingSettings } from 'uhk-common';
 import {
     AppState,
     appUpdateSettingsState,
@@ -15,7 +16,6 @@ import {
     getMacroGroupingSettings,
     getMinimizeToTray,
     getOperatingSystem,
-    getSupportedThemes,
     keyboardHalvesAlwaysJoined,
 } from '../../../store';
 import { MACRO_GROUPING_MAX_DEPTH } from '../../../util/group-macros-by-name';
@@ -35,6 +35,12 @@ import {
 import { ToggleAlwaysEnableAdvancedModeAction } from '../../../store/actions/advance-settings.action';
 import { OperatingSystem } from '../../../models/operating-system';
 
+type ThemeOption = {
+    id: AppTheme;
+    text: string;
+    icon: IconDefinition;
+};
+
 @Component({
     selector: 'settings',
     standalone: false,
@@ -49,7 +55,6 @@ export class SettingsComponent {
     animationEnabled$: Observable<boolean>;
     minimizeToTray$: Observable<boolean>;
     appTheme$: Observable<AppTheme>;
-    themes$: Observable<AppThemeSelect[]>;
     isLinux$: Observable<boolean>;
     faCog = faCog;
     keyboardHalvesAlwaysJoined$: Observable<boolean>;
@@ -57,6 +62,11 @@ export class SettingsComponent {
     alwaysEnableAdvancedModeSettingVisible$: Observable<boolean>;
     macroGroupingSettings$: Observable<MacroGroupingSettings>;
     macroGroupingMaxDepth = MACRO_GROUPING_MAX_DEPTH;
+    themes: ThemeOption[] = [
+        { id: AppTheme.System, text: 'Follow operating system theme', icon: faDesktop },
+        { id: AppTheme.Light, text: 'Light', icon: faSun },
+        { id: AppTheme.Dark, text: 'Dark', icon: faMoon },
+    ];
 
     private readonly store = inject<Store<AppState>>(Store);
 
@@ -65,7 +75,6 @@ export class SettingsComponent {
         this.animationEnabled$ = this.store.select(getAnimationEnabled);
         this.minimizeToTray$ = this.store.select(getMinimizeToTray);
         this.appTheme$ = this.store.select(getAppTheme);
-        this.themes$ = this.store.select(getSupportedThemes);
         this.isLinux$ = this.store.select(getOperatingSystem).pipe(map(os => os === OperatingSystem.Linux));
         this.keyboardHalvesAlwaysJoined$ = this.store.select(keyboardHalvesAlwaysJoined);
         this.alwaysEnableAdvancedMode$ = this.store.select(getAlwaysEnableAdvancedMode);
diff --git a/packages/uhk-web/src/app/store/index.ts b/packages/uhk-web/src/app/store/index.ts
index a2d728ae371..8ba02d3730c 100644
--- a/packages/uhk-web/src/app/store/index.ts
+++ b/packages/uhk-web/src/app/store/index.ts
@@ -4,7 +4,6 @@ import { storeFreeze } from 'ngrx-store-freeze';
 import {
     ApplicationSettings,
     AppTheme,
-    AppThemeSelect,
     BacklightingMode,
         createMd5Hash,
     FirmwareRepoInfo,
@@ -789,14 +788,6 @@ export const getUserConfigHistoryComponentState = createSelector(
         return result;
     });
 
-export const getSupportedThemes = (): AppThemeSelect[] => {
-    return [
-        { id: AppTheme.System, text: 'Follow operating system theme' },
-        { id: AppTheme.Light, text: 'Light' },
-        { id: AppTheme.Dark, text: 'Dark' }
-    ];
-};
-
 export const getStateFirmwareUpgradeState = createSelector(firmwareState, fromFirmware.firmwareUpgradeState);
 export const getFirmwareUpgradeState = createSelector(runningInElectron, getStateFirmwareUpgradeState,
     (electron, firmwareUpgrade): FirmwareUpgradeState => {