diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index bc4d7b73d..40a872c72 100644
--- a/apps/client/src/styles/theme.scss
+++ b/apps/client/src/styles/theme.scss
@@ -73,40 +73,40 @@ $gf-secondary: (
 
 $gf-typography: mat.m2-define-typography-config();
 
-@include mat.core();
-
 // Create default theme
 $gf-theme-default: mat.m2-define-light-theme(
   (
     color: (
-      primary: mat.m2-define-palette($gf-primary),
-      accent: mat.m2-define-palette($gf-secondary, 500, 900, A100)
+      accent: mat.m2-define-palette($gf-secondary, 500, 900, A100),
+      primary: mat.m2-define-palette($gf-primary)
     ),
     density: -3,
     typography: $gf-typography
   )
 );
+
 @include mat.all-component-themes($gf-theme-default);
-@include mat.button-density(0);
-@include mat.table-density(-1);
 
 // Create dark theme
 $gf-theme-dark: mat.m2-define-dark-theme(
   (
     color: (
-      primary: mat.m2-define-palette($gf-primary),
-      accent: mat.m2-define-palette($gf-secondary, 500, 900, A100)
+      accent: mat.m2-define-palette($gf-secondary, 500, 900, A100),
+      primary: mat.m2-define-palette($gf-primary)
     ),
     density: -3,
     typography: $gf-typography
   )
 );
+
 .is-dark-theme {
   @include mat.all-component-colors($gf-theme-dark);
-  @include mat.button-density(0);
-  @include mat.table-density(-1);
 }
 
+@include mat.button-density(0);
+@include mat.core();
+@include mat.table-density(-1);
+
 :root {
   --gf-theme-alpha-hover: 0.04;
   --gf-theme-primary-500: #36cfcc;