diff --git a/src/app/dashboard/page.module.css b/src/app/dashboard/page.module.css
index bb1def8..61e5125 100644
--- a/src/app/dashboard/page.module.css
+++ b/src/app/dashboard/page.module.css
@@ -46,9 +46,8 @@
   }
 }
 
-/* Glassmorphic Metric Card */
 .metricCard {
-  background: hsla(0, 0%, 97%, 0.85);
+  background: hsla(var(--background-h), var(--background-s), var(--background-l), 0.85);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid var(--border);
@@ -61,6 +60,12 @@
   transition: transform var(--transition-normal), box-shadow var(--transition-normal);
 }
 
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) .metricCard {
+    background: hsla(220, 30%, 11%, 0.85);
+  }
+}
+
 [data-theme='dark'] .metricCard {
   background: hsla(220, 30%, 11%, 0.85);
 }
diff --git a/src/app/history/page.module.css b/src/app/history/page.module.css
index c510a92..151725c 100644
--- a/src/app/history/page.module.css
+++ b/src/app/history/page.module.css
@@ -67,9 +67,8 @@
   border-color: var(--foreground);
 }
 
-/* Glassmorphic Filters card */
 .filterCard {
-  background: hsla(0, 0%, 97%, 0.85);
+  background: hsla(var(--background-h), var(--background-s), var(--background-l), 0.85);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid var(--border);
@@ -84,6 +83,12 @@
   transition: transform var(--transition-normal), box-shadow var(--transition-normal);
 }
 
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) .filterCard {
+    background: hsla(220, 30%, 11%, 0.85);
+  }
+}
+
 [data-theme='dark'] .filterCard {
   background: hsla(220, 30%, 11%, 0.85);
 }