diff --git a/src/app/(dashboard)/dashboard/usage/components/RequestDetailsTab.js b/src/app/(dashboard)/dashboard/usage/components/RequestDetailsTab.js
index 1d52d88a..e450dd94 100644
--- a/src/app/(dashboard)/dashboard/usage/components/RequestDetailsTab.js
+++ b/src/app/(dashboard)/dashboard/usage/components/RequestDetailsTab.js
@@ -183,6 +183,7 @@ export default function RequestDetailsTab() {
                 "text-sm text-text-main focus:outline-none focus:ring-2 focus:ring-primary/20",
                 "w-full min-w-0 cursor-pointer"
               )}
+              style={{ colorScheme: 'auto' }}
             >
               <option value="">All Providers</option>
               {providers.map((provider) => (
diff --git a/src/app/globals.css b/src/app/globals.css
index 4decd9e1..25599391 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -114,6 +114,22 @@
   color-scheme: dark;
 }
 
+/* ============================================================
+   Fix native select dropdowns in dark mode
+   ============================================================ */
+select {
+  color-scheme: light;
+}
+
+.dark select {
+  color-scheme: dark;
+}
+
+.dark select option {
+  background-color: var(--color-surface);
+  color: var(--color-text-main);
+}
+
 @theme inline {
   /* Brand scale */
   --color-brand-50: var(--color-brand-50);
diff --git a/src/shared/components/Pagination.js b/src/shared/components/Pagination.js
index 5c4f9080..913f5eb6 100644
--- a/src/shared/components/Pagination.js
+++ b/src/shared/components/Pagination.js
@@ -63,6 +63,7 @@ export default function Pagination({
                 "text-sm text-text-main focus:outline-none focus:ring-2 focus:ring-primary/20",
                 "cursor-pointer"
               )}
+              style={{ colorScheme: 'auto' }}
             >
               {[10, 20, 50].map((size) => (
                 <option key={size} value={size}>
diff --git a/src/shared/components/UsageStats.js b/src/shared/components/UsageStats.js
index a0469f00..98e7b7fc 100644
--- a/src/shared/components/UsageStats.js
+++ b/src/shared/components/UsageStats.js
@@ -455,7 +455,8 @@ export default function UsageStats({ period: periodProp, setPeriod: setPeriodPro
           <select
             value={tableView}
             onChange={(e) => setTableView(e.target.value)}
-            className="w-full rounded-lg border border-border bg-bg-subtle px-3 py-1.5 text-sm font-medium text-text focus:outline-none focus:ring-2 focus:ring-primary/50 sm:w-auto"
+            className="w-full rounded-lg border border-border bg-surface px-3 py-1.5 text-sm font-medium text-text-main focus:outline-none focus:ring-2 focus:ring-primary/50 sm:w-auto"
+            style={{ colorScheme: 'auto' }}
           >
             {TABLE_OPTIONS.map((opt) => (
               <option key={opt.value} value={opt.value}>{opt.label}</option>