diff --git a/package-lock.json b/package-lock.json
index c510f3e..fe0c9dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@angular/compiler": "v20-lts",
         "@angular/core": "v20-lts",
         "@angular/forms": "v20-lts",
+        "@angular/material": "v20-lts",
         "@angular/platform-browser": "v20-lts",
         "@angular/router": "v20-lts",
         "rxjs": "~7.8.0",
@@ -399,6 +400,21 @@
         }
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "20.2.14",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-20.2.14.tgz",
+      "integrity": "sha512-7bZxc01URbiPiIBWThQ69XwOxVduqEKN4PhpbF2AAyfMc/W8Hcr4VoIJOwL0O1Nkq5beS8pCAqoOeIgFyXd/kg==",
+      "peer": true,
+      "dependencies": {
+        "parse5": "^8.0.0",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^20.0.0 || ^21.0.0",
+        "@angular/core": "^20.0.0 || ^21.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/cli": {
       "version": "20.3.32",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-20.3.32.tgz",
@@ -532,6 +548,22 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/material": {
+      "version": "20.2.14",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-20.2.14.tgz",
+      "integrity": "sha512-IbAgV6XLsvmHiJzxycVhcNC1PA4M30qi+ERCOir6cT333Bxm8vDV32gsOjfL52uzG5YRARroPC+8s1XqR2oxeA==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/cdk": "20.2.14",
+        "@angular/common": "^20.0.0 || ^21.0.0",
+        "@angular/core": "^20.0.0 || ^21.0.0",
+        "@angular/forms": "^20.0.0 || ^21.0.0",
+        "@angular/platform-browser": "^20.0.0 || ^21.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "20.3.26",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.26.tgz",
@@ -8015,7 +8047,6 @@
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz",
       "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==",
-      "dev": true,
       "dependencies": {
         "entities": "^8.0.0"
       },
@@ -8065,7 +8096,6 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
       "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==",
-      "dev": true,
       "engines": {
         "node": ">=20.19.0"
       },
@@ -9982,6 +10012,16 @@
         "watchpack": "2.4.4"
       }
     },
+    "@angular/cdk": {
+      "version": "20.2.14",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-20.2.14.tgz",
+      "integrity": "sha512-7bZxc01URbiPiIBWThQ69XwOxVduqEKN4PhpbF2AAyfMc/W8Hcr4VoIJOwL0O1Nkq5beS8pCAqoOeIgFyXd/kg==",
+      "peer": true,
+      "requires": {
+        "parse5": "^8.0.0",
+        "tslib": "^2.3.0"
+      }
+    },
     "@angular/cli": {
       "version": "20.3.32",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-20.3.32.tgz",
@@ -10056,6 +10096,14 @@
         "tslib": "^2.3.0"
       }
     },
+    "@angular/material": {
+      "version": "20.2.14",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-20.2.14.tgz",
+      "integrity": "sha512-IbAgV6XLsvmHiJzxycVhcNC1PA4M30qi+ERCOir6cT333Bxm8vDV32gsOjfL52uzG5YRARroPC+8s1XqR2oxeA==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "20.3.26",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.26.tgz",
@@ -15013,7 +15061,6 @@
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz",
       "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==",
-      "dev": true,
       "requires": {
         "entities": "^8.0.0"
       },
@@ -15021,8 +15068,7 @@
         "entities": {
           "version": "8.0.0",
           "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
-          "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==",
-          "dev": true
+          "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA=="
         }
       }
     },
diff --git a/src/styles.scss b/src/styles.scss
index 90d4ee0..1abd208 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1 +1,30 @@
+/* Material theme configuration. */
+
+@use '@angular/material' as mat;
+
+html {
+  @include mat.theme((
+    color: (
+      primary: mat.$azure-palette,
+      tertiary: mat.$blue-palette,
+    ),
+    typography: Roboto,
+    density: 0,
+  ));
+}
+
+body {
+  // light theme
+  color-scheme: light;
+
+  // set default background, gont and text colors for the app.
+  background-color: var(--mat-sys-surface);
+  color: var(--mat-sys-on-surface);
+  font: var(--mat-sys-body-medium);
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}
+
 /* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }