diff --git a/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html b/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html
index b009470f9..037309279 100644
--- a/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html
+++ b/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html
@@ -6,7 +6,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
 
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                 <mat-label>Dark Mode</mat-label>
-                <mat-select [(ngModel)]="theme">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="theme">
                     <mat-option value="system">System</mat-option>
                     <mat-option value="dark">Dark</mat-option>
                     <mat-option value="light">Light</mat-option>
@@ -17,7 +17,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <div class="flex flex-col mt-5 gt-md:flex-row">
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                 <mat-label>Display Title</mat-label>
-                <mat-select [(ngModel)]="dashboardDisplay">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="dashboardDisplay">
                     <mat-option value="name">Name</mat-option>
                     <mat-option value="serial_id">Serial ID</mat-option>
                     <mat-option value="uuid">UUID</mat-option>
@@ -27,7 +27,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
 
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pl-3">
                 <mat-label>Sort By</mat-label>
-                <mat-select [(ngModel)]="dashboardSort">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="dashboardSort">
                     <mat-option value="status_desc">Status (Failed First)</mat-option>
                     <mat-option value="status_asc">Status (Passed First)</mat-option>
                     <mat-option value="title_asc">Title (A-Z)</mat-option>
@@ -45,7 +45,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <div class="flex flex-col mt-5 gt-md:flex-row">
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                 <mat-label>Temperature</mat-label>
-                <mat-select [(ngModel)]="temperatureUnit">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="temperatureUnit">
                     <mat-option value="celsius">Celsius</mat-option>
                     <mat-option value="fahrenheit">Fahrenheit</mat-option>
                 </mat-select>
@@ -53,7 +53,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
 
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                 <mat-label>Time Format</mat-label>
-                <mat-select [(ngModel)]="timeFormat">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="timeFormat">
                     <mat-option value="24">24-hour (15:00)</mat-option>
                     <mat-option value="12">12-hour (3:00 PM)</mat-option>
                 </mat-select>
@@ -63,7 +63,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <div class="flex flex-col mt-5 gt-md:flex-row">
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                 <mat-label>File Size</mat-label>
-                <mat-select [(ngModel)]="fileSizeSIUnits">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="fileSizeSIUnits">
                     <mat-option [value]=true>SI Units (GB)</mat-option>
                     <mat-option [value]=false>Binary Units (GiB)</mat-option>
                 </mat-select>
@@ -73,7 +73,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <div class="flex flex-col mt-5 gt-md:flex-row">
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                 <mat-label>Powered On Format</mat-label>
-                <mat-select [(ngModel)]="poweredOnHoursUnit">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="poweredOnHoursUnit">
                     <mat-option value="humanize">Humanize</mat-option>
                     <mat-option value="device_hours">Device Hours</mat-option>
                 </mat-select>
@@ -81,7 +81,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
 
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                 <mat-label>Line stroke</mat-label>
-                <mat-select [(ngModel)]="lineStroke">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="lineStroke">
                     <mat-option value="smooth">Smooth</mat-option>
                     <mat-option value="straight">Straight</mat-option>
                     <mat-option value="stepline">Stepline</mat-option>
@@ -92,7 +92,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <div class="flex flex-col mt-5 gt-md:flex-row">
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                 <mat-label>Device Status - Thresholds</mat-label>
-                <mat-select [(ngModel)]=statusThreshold>
+                <mat-select panelClass="theme-select-panel" [(ngModel)]=statusThreshold>
                     <mat-option [value]=1>Smart</mat-option>
                     <mat-option [value]=2>Scrutiny</mat-option>
                     <mat-option [value]=3>Both</mat-option>
@@ -104,7 +104,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <div class="flex flex-col mt-5 gt-md:flex-row">
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                 <mat-label>Notify - Level</mat-label>
-                <mat-select [(ngModel)]=notifyLevel>
+                <mat-select panelClass="theme-select-panel" [(ngModel)]=notifyLevel>
                     <mat-option [value]=1>Warn</mat-option>
                     <mat-option [value]=2>Fail</mat-option>
                 </mat-select>
@@ -115,7 +115,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <div class="flex flex-col mt-5 gt-md:flex-row">
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                 <mat-label>Notify - Filter Attributes</mat-label>
-                <mat-select [(ngModel)]=statusFilterAttributes>
+                <mat-select panelClass="theme-select-panel" [(ngModel)]=statusFilterAttributes>
                     <mat-option [value]=0>All</mat-option>
                     <mat-option [value]=1>Critical</mat-option>
                 </mat-select>
@@ -125,7 +125,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <div class="flex flex-col mt-5 gt-md:flex-row">
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                 <mat-label>Repeat Notifications</mat-label>
-                <mat-select [(ngModel)]=repeatNotifications>
+                <mat-select panelClass="theme-select-panel" [(ngModel)]=repeatNotifications>
                     <mat-option [value]=true>Always</mat-option>
                     <mat-option [value]=false>Only when the value has changed</mat-option>
                 </mat-select>
@@ -135,7 +135,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <div class="flex flex-col mt-5 gt-md:flex-row">
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                 <mat-label>Retrieve SCT Temperature History</mat-label>
-                <mat-select [(ngModel)]=retrieveSCTTemperatureHistory>
+                <mat-select panelClass="theme-select-panel" [(ngModel)]=retrieveSCTTemperatureHistory>
                     <mat-option [value]=true>Enabled</mat-option>
                     <mat-option [value]=false>Disabled</mat-option>
                 </mat-select>
@@ -146,7 +146,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <div class="flex flex-col mt-5 gt-md:flex-row">
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                 <mat-label>Notify on Collector smartctl Errors</mat-label>
-                <mat-select [(ngModel)]="notifyOnCollectorError">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="notifyOnCollectorError">
                     <mat-option [value]="true">Enabled</mat-option>
                     <mat-option [value]="false">Disabled</mat-option>
                 </mat-select>
@@ -158,7 +158,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <div class="flex flex-col mt-5 gt-md:flex-row">
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                 <mat-label>Notify on Missed Collector Ping</mat-label>
-                <mat-select [(ngModel)]="notifyOnMissedPing">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="notifyOnMissedPing">
                     <mat-option [value]="true">Enabled</mat-option>
                     <mat-option [value]="false">Disabled</mat-option>
                 </mat-select>
@@ -215,7 +215,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <div class="flex flex-col mt-5 gt-md:flex-row">
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                 <mat-label>Heartbeat Notifications</mat-label>
-                <mat-select [(ngModel)]="heartbeatEnabled">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="heartbeatEnabled">
                     <mat-option [value]="true">Enabled</mat-option>
                     <mat-option [value]="false">Disabled</mat-option>
                 </mat-select>
@@ -235,7 +235,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <div class="flex flex-col mt-5 gt-md:flex-row">
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                 <mat-label>Uptime Kuma Push Monitor</mat-label>
-                <mat-select [(ngModel)]="uptimeKumaEnabled">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="uptimeKumaEnabled">
                     <mat-option [value]="true">Enabled</mat-option>
                     <mat-option [value]="false">Disabled</mat-option>
                 </mat-select>
@@ -291,7 +291,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
                 <div class="flex flex-col gt-md:flex-row">
                     <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                         <mat-label>Scheduled Reports</mat-label>
-                        <mat-select [(ngModel)]="reportEnabled">
+                        <mat-select panelClass="theme-select-panel" [(ngModel)]="reportEnabled">
                             <mat-option [value]="true">Enabled</mat-option>
                             <mat-option [value]="false">Disabled</mat-option>
                         </mat-select>
@@ -303,7 +303,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
                     <div class="flex flex-col mt-5 gt-md:flex-row">
                         <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                             <mat-label>Daily Report</mat-label>
-                            <mat-select [(ngModel)]="reportDailyEnabled">
+                            <mat-select panelClass="theme-select-panel" [(ngModel)]="reportDailyEnabled">
                                 <mat-option [value]="true">Enabled</mat-option>
                                 <mat-option [value]="false">Disabled</mat-option>
                             </mat-select>
@@ -319,7 +319,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
                     <div class="flex flex-col mt-5 gt-md:flex-row">
                         <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                             <mat-label>Weekly Report</mat-label>
-                            <mat-select [(ngModel)]="reportWeeklyEnabled">
+                            <mat-select panelClass="theme-select-panel" [(ngModel)]="reportWeeklyEnabled">
                                 <mat-option [value]="true">Enabled</mat-option>
                                 <mat-option [value]="false">Disabled</mat-option>
                             </mat-select>
@@ -327,7 +327,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
 
                         <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pl-3" *ngIf="reportWeeklyEnabled">
                             <mat-label>Day of Week</mat-label>
-                            <mat-select [(ngModel)]="reportWeeklyDay">
+                            <mat-select panelClass="theme-select-panel" [(ngModel)]="reportWeeklyDay">
                                 <mat-option [value]="0">Sunday</mat-option>
                                 <mat-option [value]="1">Monday</mat-option>
                                 <mat-option [value]="2">Tuesday</mat-option>
@@ -347,7 +347,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
                     <div class="flex flex-col mt-5 gt-md:flex-row">
                         <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                             <mat-label>Monthly Report</mat-label>
-                            <mat-select [(ngModel)]="reportMonthlyEnabled">
+                            <mat-select panelClass="theme-select-panel" [(ngModel)]="reportMonthlyEnabled">
                                 <mat-option [value]="true">Enabled</mat-option>
                                 <mat-option [value]="false">Disabled</mat-option>
                             </mat-select>
@@ -368,7 +368,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
                     <div class="flex flex-col mt-5 gt-md:flex-row">
                         <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                             <mat-label>PDF Generation</mat-label>
-                            <mat-select [(ngModel)]="reportPDFEnabled">
+                            <mat-select panelClass="theme-select-panel" [(ngModel)]="reportPDFEnabled">
                                 <mat-option [value]="true">Enabled</mat-option>
                                 <mat-option [value]="false">Disabled</mat-option>
                             </mat-select>
@@ -450,7 +450,7 @@ <h4 class="mb-4 font-medium">Add New Override</h4>
                     <div class="flex flex-wrap gap-4">
                         <mat-form-field class="flex-1 min-w-[120px]">
                             <mat-label>Protocol</mat-label>
-                            <mat-select [(ngModel)]="newOverride.protocol">
+                            <mat-select panelClass="theme-select-panel" [(ngModel)]="newOverride.protocol">
                                 <mat-option *ngFor="let p of protocols" [value]="p">{{p}}</mat-option>
                             </mat-select>
                         </mat-form-field>
@@ -463,7 +463,7 @@ <h4 class="mb-4 font-medium">Add New Override</h4>
 
                         <mat-form-field class="flex-1 min-w-[120px]">
                             <mat-label>Action</mat-label>
-                            <mat-select [(ngModel)]="newOverride.action">
+                            <mat-select panelClass="theme-select-panel" [(ngModel)]="newOverride.action">
                                 <mat-option *ngFor="let a of actions" [value]="a.value">{{a.label}}</mat-option>
                             </mat-select>
                         </mat-form-field>
@@ -471,7 +471,7 @@ <h4 class="mb-4 font-medium">Add New Override</h4>
                         <mat-form-field class="flex-1 min-w-[120px]"
                                         *ngIf="newOverride.action === 'force_status'">
                             <mat-label>Status</mat-label>
-                            <mat-select [(ngModel)]="newOverride.status">
+                            <mat-select panelClass="theme-select-panel" [(ngModel)]="newOverride.status">
                                 <mat-option *ngFor="let s of statuses" [value]="s">{{s}}</mat-option>
                             </mat-select>
                         </mat-form-field>
@@ -588,7 +588,7 @@ <h4 class="mb-4 font-medium">Add Notification Channel</h4>
 
                     <mat-form-field class="w-full mb-2">
                         <mat-label>Service</mat-label>
-                        <mat-select [(ngModel)]="selectedService">
+                        <mat-select panelClass="theme-select-panel" [(ngModel)]="selectedService">
                             <mat-option value="custom">Custom Shoutrrr URL</mat-option>
                             <mat-option value="smtp">SMTP Email</mat-option>
                             <mat-option value="discord">Discord</mat-option>
diff --git a/webapp/frontend/src/app/layout/common/detail-settings/detail-settings.component.html b/webapp/frontend/src/app/layout/common/detail-settings/detail-settings.component.html
index 8c7617ad0..3c20fb851 100644
--- a/webapp/frontend/src/app/layout/common/detail-settings/detail-settings.component.html
+++ b/webapp/frontend/src/app/layout/common/detail-settings/detail-settings.component.html
@@ -13,7 +13,7 @@ <h2 mat-dialog-title>Device Settings</h2>
         <div class="flex flex-col gt-xs:flex-row">
             <mat-form-field class="flex-auto gt-xs:pr-3">
                 <mat-label>Threshold Data</mat-label>
-                <mat-select [value]="'scrutiny'">
+                <mat-select panelClass="theme-select-panel" [value]="'scrutiny'">
                     <mat-option  value="scrutiny">Scrutiny</mat-option>
                     <mat-option value="name" disabled>Manufacturer</mat-option>
                 </mat-select>
@@ -23,7 +23,7 @@ <h2 mat-dialog-title>Device Settings</h2>
         <div class="flex flex-col gt-xs:flex-row">
             <mat-form-field class="flex-auto gt-xs:pr-3">
                 <mat-label>Notifications</mat-label>
-                <mat-select [(value)]="muted">
+                <mat-select panelClass="theme-select-panel" [(value)]="muted">
                     <mat-option [value]="false">Enabled</mat-option>
                     <mat-option [value]="true">Disabled</mat-option>
                 </mat-select>
diff --git a/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts b/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
index 0212a39ba..e07d36fec 100644
--- a/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
+++ b/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
@@ -442,7 +442,8 @@ export class DashboardComponent implements OnInit, OnDestroy
     }
 
     openDialog(): void {
-        const dialogRef = this.dialog.open(DashboardSettingsComponent, {width: '800px', maxWidth: '95vw'});
+        const theme = document.body.classList.contains('treo-theme-dark') ? 'treo-theme-dark' : 'treo-theme-light';
+        const dialogRef = this.dialog.open(DashboardSettingsComponent, {width: '800px', maxWidth: '95vw', panelClass: [theme, 'settings-dialog-panel']});
 
         dialogRef.afterClosed().subscribe();
     }
diff --git a/webapp/frontend/src/app/modules/detail/detail.component.ts b/webapp/frontend/src/app/modules/detail/detail.component.ts
index 3816a3e5a..4a113a4f8 100644
--- a/webapp/frontend/src/app/modules/detail/detail.component.ts
+++ b/webapp/frontend/src/app/modules/detail/detail.component.ts
@@ -729,9 +729,11 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
         if (!this.device) return;
 
         const globalMissedPingTimeout = this.config?.metrics?.missed_ping_timeout_minutes || 15;
+        const theme = document.body.classList.contains('treo-theme-dark') ? 'treo-theme-dark' : 'treo-theme-light';
 
         const dialogRef = this.dialog.open(DetailSettingsComponent, {
             width: '600px',
+            panelClass: [theme, 'settings-dialog-panel'],
             data: {
                 curMuted: this.device.muted,
                 curLabel: this.device.label,
diff --git a/webapp/frontend/src/app/modules/mobile-settings/mobile-settings.component.ts b/webapp/frontend/src/app/modules/mobile-settings/mobile-settings.component.ts
index 35f4cbfc9..1c4272dd3 100644
--- a/webapp/frontend/src/app/modules/mobile-settings/mobile-settings.component.ts
+++ b/webapp/frontend/src/app/modules/mobile-settings/mobile-settings.component.ts
@@ -16,11 +16,12 @@ export class MobileSettingsComponent {
     constructor(private readonly dialog: MatDialog) {}
 
     openSettings(): void {
+        const theme = document.body.classList.contains('treo-theme-dark') ? 'treo-theme-dark' : 'treo-theme-light';
         this.dialog.open(DashboardSettingsComponent, {
             width: '100vw',
             maxWidth: '100vw',
             height: '100vh',
-            panelClass: 'mobile-settings-dialog'
+            panelClass: ['mobile-settings-dialog', theme, 'settings-dialog-panel']
         });
     }
 }
diff --git a/webapp/frontend/src/styles/styles.scss b/webapp/frontend/src/styles/styles.scss
index d8ff2d63c..a04b4ad18 100644
--- a/webapp/frontend/src/styles/styles.scss
+++ b/webapp/frontend/src/styles/styles.scss
@@ -31,3 +31,59 @@
         color: #CFD8E3 !important;
     }
 }
+
+// Mat-Select dropdown panel in dark mode (passed to panelClass)
+.treo-theme-dark .theme-select-panel {
+    background-color: #1e293b !important;
+}
+.treo-theme-light .theme-select-panel {
+    background-color: #ffffff !important;
+}
+
+// Ensure proper dialog background and text color for settings dialogs
+.treo-theme-dark.mat-mdc-dialog-container .mdc-dialog__surface,
+.treo-theme-dark .mat-mdc-dialog-surface {
+    background-color: #1e293b !important;
+    color: #e2e8f0 !important;
+}
+
+// Ensure option text color is readable in dark mode
+.treo-theme-dark .theme-select-panel .mat-mdc-option {
+    color: #e2e8f0 !important;
+}
+.treo-theme-dark .theme-select-panel .mat-mdc-select-value-text {
+    color: #e2e8f0 !important;
+}
+
+// Fix transparency on Mat-Menu panels
+.treo-theme-dark .mat-mdc-menu-panel {
+    background-color: #1e293b !important;
+}
+.treo-theme-dark .mat-mdc-menu-item {
+    color: #e2e8f0 !important;
+}
+.treo-theme-dark .mat-mdc-menu-item .mat-icon {
+    color: #e2e8f0 !important;
+}
+
+.treo-theme-light .mat-mdc-menu-panel {
+    background-color: #ffffff !important;
+}
+
+// Target overlay container specifically
+.cdk-overlay-container {
+    .settings-dialog-panel.treo-theme-dark {
+        .mat-mdc-dialog-surface, .mdc-dialog__surface {
+            background-color: var(--treo-card-background, #1e293b) !important;
+            color: var(--treo-text-default, #e2e8f0) !important;
+
+            h2, span, mat-label, .mat-mdc-dialog-title, .mat-mdc-select-value-text, .mdc-button__label, input, .mat-mdc-form-field-label {
+                color: var(--treo-text-default, #e2e8f0) !important;
+            }
+
+            .mat-mdc-form-field-hint {
+                color: var(--treo-text-secondary, #94a3b8) !important;
+            }
+        }
+    }
+}