diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index 5f76ffd2e..cdb35d54b 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -251,11 +251,6 @@ body {
       }
     }
 
-    .mat-mdc-card {
-      --mat-card-elevated-container-color: var(--dark-background);
-      --mat-card-outlined-container-color: var(--dark-background);
-    }
-
     .mat-mdc-fab {
       &.mat-primary {
         --mat-fab-icon-color: rgba(var(--dark-primary-text));
@@ -414,8 +409,6 @@ ngx-skeleton-loader {
 
 .mat-mdc-card {
   .mat-mdc-card-title {
-    --mat-card-title-text-line-height: 1.2;
-
     margin-bottom: 0.5rem;
   }
 }
diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index 385e102dd..1e284e0c8 100644
--- a/apps/client/src/styles/theme.scss
+++ b/apps/client/src/styles/theme.scss
@@ -158,6 +158,14 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
 
   @include mat.all-component-themes($gf-theme-default);
 
+  @include mat.card-overrides(
+    (
+      outlined-container-color: var(--light-background),
+      outlined-outline-color: rgba(var(--dark-dividers)),
+      title-text-line-height: 1.2
+    )
+  );
+
   @include mat.table-overrides(
     (
       row-item-outline-color: rgba(var(--dark-dividers))
@@ -184,6 +192,14 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
 
   @include mat.all-component-themes($gf-theme-dark);
 
+  @include mat.card-overrides(
+    (
+      outlined-container-color: var(--dark-background),
+      outlined-outline-color: rgba(var(--light-dividers)),
+      title-text-line-height: 1.2
+    )
+  );
+
   @include mat.table-overrides(
     (
       row-item-outline-color: rgba(var(--light-dividers))