diff --git a/src/_theme-colors.scss b/src/_theme-colors.scss
new file mode 100644
index 0000000..5c6e044
--- /dev/null
+++ b/src/_theme-colors.scss
@@ -0,0 +1,137 @@
+// This file was generated by running 'ng generate @angular/material:theme-color'.
+// Proceed with caution if making changes to this file.
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: 6366f1, tertiary: dd2979
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #07006c,
+    20: #1000a9,
+    25: #201cb4,
+    30: #2f2ebe,
+    35: #3c3dca,
+    40: #494bd6,
+    50: #6366f1,
+    60: #8083ff,
+    70: #a0a3ff,
+    80: #c0c1ff,
+    90: #e1e0ff,
+    95: #f2efff,
+    98: #fcf8ff,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  secondary: (
+    0: #000000,
+    10: #13144a,
+    20: #292a60,
+    25: #34366c,
+    30: #404178,
+    35: #4b4d85,
+    40: #575992,
+    50: #7072ac,
+    60: #8a8bc8,
+    70: #a5a6e4,
+    80: #c0c1ff,
+    90: #e1e0ff,
+    95: #f2efff,
+    98: #fcf8ff,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  tertiary: (
+    0: #000000,
+    10: #3f001c,
+    20: #650031,
+    25: #79003d,
+    30: #8e0048,
+    35: #a40054,
+    40: #ba0060,
+    50: #dd2979,
+    60: #ff4993,
+    70: #ff84ad,
+    80: #ffb1c7,
+    90: #ffd9e2,
+    95: #ffecef,
+    98: #fff8f8,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #1b1b23,
+    20: #303038,
+    25: #3b3a44,
+    30: #46464f,
+    35: #52515b,
+    40: #5e5d67,
+    50: #777680,
+    60: #918f9a,
+    70: #acaab5,
+    80: #c7c5d1,
+    90: #e4e1ed,
+    95: #f2effb,
+    98: #fcf8ff,
+    99: #fffbff,
+    100: #ffffff,
+    4: #0d0d15,
+    6: #13131b,
+    12: #1f1f27,
+    17: #292932,
+    22: #34343d,
+    24: #393841,
+    87: #dbd8e4,
+    92: #e9e6f3,
+    94: #efecf8,
+    96: #f5f2fe,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #1a1a28,
+    20: #2f2f3d,
+    25: #3a3a49,
+    30: #464554,
+    35: #515160,
+    40: #5d5d6d,
+    50: #767586,
+    60: #908fa0,
+    70: #aba9bb,
+    80: #c7c4d7,
+    90: #e3e0f3,
+    95: #f2efff,
+    98: #fcf8ff,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #ba1a1a,
+    50: #de3730,
+    60: #ff5449,
+    70: #ff897d,
+    80: #ffb4ab,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes,  neutral-variant),
+  error: map.get($_palettes, error),
+);
+
+$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
+$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);
\ No newline at end of file
diff --git a/src/app/performance-info/performance-info.component.css b/src/app/performance-info/performance-info.component.css
index 69e9094..28d36f0 100644
--- a/src/app/performance-info/performance-info.component.css
+++ b/src/app/performance-info/performance-info.component.css
@@ -1,14 +1,3 @@
 .info-box {
   color: var(--mat-sys-on-surface);
 }
-
-::ng-deep .mat-step-header .mat-step-icon {
-  background-color: #ccc;
-  color: white;
-}
-
-
-::ng-deep .mat-step-header .mat-step-icon-selected,
-::ng-deep .mat-step-icon-state-edit {
-  background-color: var(--color-indigo-500) !important;
-}
diff --git a/src/custom-theme.scss b/src/custom-theme.scss
index 5615bb5..3de7b38 100644
--- a/src/custom-theme.scss
+++ b/src/custom-theme.scss
@@ -5,6 +5,33 @@
 // Learn more about theming and how to use it for your application's
 // custom components at https://material.angular.dev/guide/theming
 @use '@angular/material' as mat;
+@use './_theme-colors' as theme-colors;
+
+// Light Theme
+html {
+  color-scheme: light;
+  @include mat.theme((
+    color: (
+      theme-type: light,
+      primary: theme-colors.$primary-palette,
+      tertiary: theme-colors.$tertiary-palette,
+    ),
+  ));
+}
+
+// Dark Theme
+html.dark {
+  color-scheme: dark;
+  @include mat.theme((
+    color: (
+      theme-type: dark,
+      primary: theme-colors.$primary-palette,
+      tertiary: theme-colors.$tertiary-palette,
+    ),
+  ));
+}
+
+
 
 @include mat.progress-bar-overrides((
   active-indicator-color: white,
@@ -34,16 +61,9 @@
   backdrop-filter: blur(2px);
 }
 
-
-html {
-  @include mat.theme((
-    color: (
-      primary: mat.$azure-palette,
-      tertiary: mat.$blue-palette,
-    ),
-    typography: Roboto,
-    density: 0,
-  ));
+.mat-step-header .mat-step-icon:not(.mat-step-icon-selected):not(.mat-step-icon-completed) {
+  background-color: #ccc;
+  color: white;
 }
 
 body {