diff --git a/angular.json b/angular.json
index d732aa7..aec0b05 100644
--- a/angular.json
+++ b/angular.json
@@ -91,6 +91,7 @@
               }
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
               "src/styles.scss"
             ],
             "scripts": []
@@ -102,4 +103,4 @@
   "cli": {
     "analytics": false
   }
-}
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index cfe0793..36c6e97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,10 +9,12 @@
       "version": "0.0.0",
       "dependencies": {
         "@angular/animations": "^19.0.0",
+        "@angular/cdk": "~19.2.19",
         "@angular/common": "^19.0.0",
         "@angular/compiler": "^19.0.0",
         "@angular/core": "^19.0.0",
         "@angular/forms": "^19.0.0",
+        "@angular/material": "~19.2.19",
         "@angular/platform-browser": "^19.0.0",
         "@angular/platform-browser-dynamic": "^19.0.0",
         "@angular/router": "^19.0.0",
@@ -312,6 +314,7 @@
       "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-19.2.8.tgz",
       "integrity": "sha512-gKWBusQvjb946uuTXaXWzkEfLdTiy9GUNZ9okF3yolv+aoW0D8AM9mVvTX1xdqAV3xuIxRXRbkWG7BR+p8xVzQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -510,6 +513,22 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "19.2.19",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.2.19.tgz",
+      "integrity": "sha512-PCpJagurPBqciqcq4Z8+3OtKLb7rSl4w/qBJoIMua8CgnrjvA1i+SWawhdtfI1zlY8FSwhzLwXV0CmWWfFzQPg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "parse5": "^7.1.2",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^19.0.0 || ^20.0.0",
+        "@angular/core": "^19.0.0 || ^20.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/cli": {
       "version": "19.2.9",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.2.9.tgz",
@@ -549,6 +568,7 @@
       "resolved": "https://registry.npmjs.org/@angular/common/-/common-19.2.8.tgz",
       "integrity": "sha512-SnW+/amz1Mtni9125xlzPZ5MU+wSzUepc9G5jRnL0q9vrFglRWa3BEW3GxVurfbdnf6FleroZ7fZCZFAfREw7Q==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -565,6 +585,7 @@
       "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-19.2.8.tgz",
       "integrity": "sha512-HBtt96X09XFatHAnkquFYbcD3aQSvuYoqqhCV5OLkhAwHmvr3BGyHx/EBZ5JGOfCNOzCupoQmOBF+nh5LKwkeQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -578,6 +599,7 @@
       "integrity": "sha512-gq/sc3D3m6aKmhdSTTzzD59wfQcVjIZ8dgJoPW7pOcmPVQL1N8syjv+quHySfSJlBkbs5dQ0P4Kk0yvxRw9S7g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/core": "7.26.9",
         "@jridgewell/sourcemap-codec": "^1.4.14",
@@ -654,6 +676,7 @@
       "resolved": "https://registry.npmjs.org/@angular/core/-/core-19.2.8.tgz",
       "integrity": "sha512-iNISGgLr+nBzEaGbfzRCOVfV3T66gbEu+Ee4VCnEqifU7Er6fnvn+oFfHo3gNKHrCdicrbyb2oKAmeOJynKbsA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -670,6 +693,7 @@
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-19.2.8.tgz",
       "integrity": "sha512-4q/6ad8YZPixxLhDwOxm4pQO3ekwGriOTVB0pMb9FdpvjOUSdDTM08o8ToHvu6MBbZjHzLs8+xkMw9QCd55x/w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -683,11 +707,29 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/material": {
+      "version": "19.2.19",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-19.2.19.tgz",
+      "integrity": "sha512-auIE6JUzTIA3LyYklh9J/T7u64crmphxUBgAa0zcOMDog6SYfwbNe9YeLQqua5ek4OUAOdK/BHHfVl5W5iaUoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/cdk": "19.2.19",
+        "@angular/common": "^19.0.0 || ^20.0.0",
+        "@angular/core": "^19.0.0 || ^20.0.0",
+        "@angular/forms": "^19.0.0 || ^20.0.0",
+        "@angular/platform-browser": "^19.0.0 || ^20.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "19.2.8",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-19.2.8.tgz",
       "integrity": "sha512-3O69vMAq/ki13YX8hWBUs1R6iwS1GmkcHWu5fIUU7rjSuhGfD60nASqRBYZiJb68eUom//T544KavOvfAl1PzQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -772,6 +814,7 @@
       "integrity": "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.26.2",
@@ -3005,6 +3048,7 @@
       "integrity": "sha512-G1ytyOoHh5BphmEBxSwALin3n1KGNYB6yImbICcRQdzXfOGbuJ9Jske/Of5Sebk339NSGGNfUshnzK8YWkTPsQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@inquirer/checkbox": "^4.1.2",
         "@inquirer/confirm": "^5.1.6",
@@ -4724,8 +4768,7 @@
       "optional": true,
       "os": [
         "linux"
-      ],
-      "peer": true
+      ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
       "version": "4.34.8",
@@ -5142,6 +5185,7 @@
       "integrity": "sha512-uKXqKN9beGoMdBfcaTY1ecwz6ctxuJAcUlwE55938g0ZJ8lRxwAZqRz2AJ4pzpt5dHdTPMB863UZ0ESiFUcP7A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -5517,6 +5561,7 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -5980,6 +6025,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001688",
         "electron-to-chromium": "^1.5.73",
@@ -9027,7 +9073,8 @@
       "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.4.0.tgz",
       "integrity": "sha512-T4fio3W++llLd7LGSGsioriDHgWyhoL6YTu4k37uwJLF7DzOzspz7mNxRoM3cQdLWtL/ebazQpIf/yZGJx/gzg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/jest-worker": {
       "version": "27.5.1",
@@ -9066,6 +9113,7 @@
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -9173,6 +9221,7 @@
       "integrity": "sha512-LrtUxbdvt1gOpo3gxG+VAJlJAEMhbWlM4YrFQgql98FwF7+K8K12LYO4hnDdUkNjeztYrOXEMqgTajSWgmtI/w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@colors/colors": "1.5.0",
         "body-parser": "^1.19.0",
@@ -9531,6 +9580,7 @@
       "integrity": "sha512-tkuLHQlvWUTeQ3doAqnHbNn8T6WX1KA8yvbKG9x4VtKtIjHsVKQZCH11zRgAfbDAXC2UNIg/K9BYAAcEzUIrNg==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "copy-anything": "^2.0.1",
         "parse-node-version": "^1.0.1",
@@ -11178,7 +11228,6 @@
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
       "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "entities": "^6.0.0"
@@ -11219,7 +11268,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.0.tgz",
       "integrity": "sha512-aKstq2TDOndCn4diEyp9Uq/Flu2i1GlLkc6XIDQSDMuaFE3OPW5OphLCyQ5SpSJZTb4reN+kTcYru5yIfXoRPw==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -11396,6 +11444,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.8",
         "picocolors": "^1.1.1",
@@ -12055,6 +12104,7 @@
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
       "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -12111,6 +12161,7 @@
       "integrity": "sha512-3ToiC1xZ1Y8aU7+CkgCI/tqyuPXEmYGJXO7H4uqp0xkLXUqp88rQQ4j1HmP37xSJLbCJPaIiv+cT1y+grssrww==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -13246,6 +13297,7 @@
       "integrity": "sha512-LBAhFyLho16harJoWMg/nZsQYgTrg5jXOn2nCYjRUcZZEdE3qa2zb8QEDRUGVZBW4rlazf2fxkg8tztybTaqWw==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.8.2",
@@ -13398,7 +13450,8 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
+      "license": "0BSD",
+      "peer": true
     },
     "node_modules/tuf-js": {
       "version": "3.0.1",
@@ -13455,6 +13508,7 @@
       "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -13695,7 +13749,6 @@
       "integrity": "sha512-5nXH+QsELbFKhsEfWLkHrvgRpTdGJzqOZ+utSdmPTvwHmvU6ITTm3xx+mRusihkcI8GeC7lCDyn3kDtiki9scw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -13777,8 +13830,7 @@
       "optional": true,
       "os": [
         "android"
-      ],
-      "peer": true
+      ]
     },
     "node_modules/vite/node_modules/@rollup/rollup-android-arm64": {
       "version": "4.40.0",
@@ -13792,8 +13844,7 @@
       "optional": true,
       "os": [
         "android"
-      ],
-      "peer": true
+      ]
     },
     "node_modules/vite/node_modules/@rollup/rollup-darwin-arm64": {
       "version": "4.40.0",
@@ -13807,8 +13858,7 @@
       "optional": true,
       "os": [
         "darwin"
-      ],
-      "peer": true
+      ]
     },
     "node_modules/vite/node_modules/@rollup/rollup-darwin-x64": {
       "version": "4.40.0",
@@ -13822,8 +13872,7 @@
       "optional": true,
       "os": [
         "darwin"
-      ],
-      "peer": true
+      ]
     },
     "node_modules/vite/node_modules/@rollup/rollup-freebsd-arm64": {
       "version": "4.40.0",
@@ -13837,8 +13886,7 @@
       "optional": true,
       "os": [
         "freebsd"
-      ],
-      "peer": true
+      ]
     },
     "node_modules/vite/node_modules/@rollup/rollup-freebsd-x64": {
       "version": "4.40.0",
@@ -13852,8 +13900,7 @@
       "optional": true,
       "os": [
         "freebsd"
-      ],
-      "peer": true
+      ]
     },
     "node_modules/vite/node_modules/@rollup/rollup-linux-arm-gnueabihf": {
       "version": "4.40.0",
@@ -13867,8 +13914,7 @@
       "optional": true,
       "os": [
         "linux"
-      ],
-      "peer": true
+      ]
     },
     "node_modules/vite/node_modules/@rollup/rollup-linux-arm-musleabihf": {
       "version": "4.40.0",
@@ -13882,8 +13928,7 @@
       "optional": true,
       "os": [
         "linux"
-      ],
-      "peer": true
+      ]
     },
     "node_modules/vite/node_modules/@rollup/rollup-linux-arm64-gnu": {
       "version": "4.40.0",
@@ -13897,8 +13942,7 @@
       "optional": true,
       "os": [
         "linux"
-      ],
-      "peer": true
+      ]
     },
     "node_modules/vite/node_modules/@rollup/rollup-linux-arm64-musl": {
       "version": "4.40.0",
@@ -13912,8 +13956,7 @@
       "optional": true,
       "os": [
         "linux"
-      ],
-      "peer": true
+      ]
     },
     "node_modules/vite/node_modules/@rollup/rollup-linux-loongarch64-gnu": {
       "version": "4.40.0",
@@ -13927,8 +13970,7 @@
       "optional": true,
       "os": [
         "linux"
-      ],
-      "peer": true
+      ]
     },
     "node_modules/vite/node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
       "version": "4.40.0",
@@ -13942,8 +13984,7 @@
       "optional": true,
       "os": [
         "linux"
-      ],
-      "peer": true
+      ]
     },
     "node_modules/vite/node_modules/@rollup/rollup-linux-riscv64-gnu": {
       "version": "4.40.0",
@@ -13957,8 +13998,7 @@
       "optional": true,
       "os": [
         "linux"
-      ],
-      "peer": true
+      ]
     },
     "node_modules/vite/node_modules/@rollup/rollup-linux-s390x-gnu": {
       "version": "4.40.0",
@@ -13972,8 +14012,7 @@
       "optional": true,
       "os": [
         "linux"
-      ],
-      "peer": true
+      ]
     },
     "node_modules/vite/node_modules/@rollup/rollup-linux-x64-gnu": {
       "version": "4.40.0",
@@ -13987,8 +14026,7 @@
       "optional": true,
       "os": [
         "linux"
-      ],
-      "peer": true
+      ]
     },
     "node_modules/vite/node_modules/@rollup/rollup-linux-x64-musl": {
       "version": "4.40.0",
@@ -14002,8 +14040,7 @@
       "optional": true,
       "os": [
         "linux"
-      ],
-      "peer": true
+      ]
     },
     "node_modules/vite/node_modules/@rollup/rollup-win32-arm64-msvc": {
       "version": "4.40.0",
@@ -14017,8 +14054,7 @@
       "optional": true,
       "os": [
         "win32"
-      ],
-      "peer": true
+      ]
     },
     "node_modules/vite/node_modules/@rollup/rollup-win32-ia32-msvc": {
       "version": "4.40.0",
@@ -14032,8 +14068,7 @@
       "optional": true,
       "os": [
         "win32"
-      ],
-      "peer": true
+      ]
     },
     "node_modules/vite/node_modules/@rollup/rollup-win32-x64-msvc": {
       "version": "4.40.0",
@@ -14047,16 +14082,14 @@
       "optional": true,
       "os": [
         "win32"
-      ],
-      "peer": true
+      ]
     },
     "node_modules/vite/node_modules/@types/estree": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
       "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/vite/node_modules/postcss": {
       "version": "8.5.3",
@@ -14078,7 +14111,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.8",
         "picocolors": "^1.1.1",
@@ -14094,7 +14126,6 @@
       "integrity": "sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.7"
       },
@@ -14187,6 +14218,7 @@
       "integrity": "sha512-UFynvx+gM44Gv9qFgj0acCQK2VE1CtdfwFdimkapco3hlPCJ/zeq73n2yVKimVbtm+TnApIugGhLJnkU6gjYXA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.7",
         "@types/estree": "^1.0.6",
@@ -14264,6 +14296,7 @@
       "integrity": "sha512-90SqqYXA2SK36KcT6o1bvwvZfJFcmoamqeJY7+boioffX9g9C0wjjJRGUrQIuh43pb0ttX7+ssavmj/WN2RHtA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/bonjour": "^3.5.13",
         "@types/connect-history-api-fallback": "^1.5.4",
@@ -14829,7 +14862,8 @@
       "version": "0.15.0",
       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.0.tgz",
       "integrity": "sha512-9oxn0IIjbCZkJ67L+LkhYWRyAy7axphb3VgE2MBDlOqnmHMPWGYMxJxBYFueFq/JGY2GMwS0rU+UCLunEmy5UA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     }
   }
 }
diff --git a/package.json b/package.json
index b255bd8..ffcb124 100644
--- a/package.json
+++ b/package.json
@@ -11,10 +11,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^19.0.0",
+    "@angular/cdk": "~19.2.19",
     "@angular/common": "^19.0.0",
     "@angular/compiler": "^19.0.0",
     "@angular/core": "^19.0.0",
     "@angular/forms": "^19.0.0",
+    "@angular/material": "~19.2.19",
     "@angular/platform-browser": "^19.0.0",
     "@angular/platform-browser-dynamic": "^19.0.0",
     "@angular/router": "^19.0.0",
@@ -35,4 +37,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.6.2"
   }
-}
+}
\ No newline at end of file
diff --git a/src/_theme-colors.scss b/src/_theme-colors.scss
new file mode 100644
index 0000000..27389aa
--- /dev/null
+++ b/src/_theme-colors.scss
@@ -0,0 +1,205 @@
+// 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: #f56942
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #3b0900,
+    20: #601400,
+    25: #741a00,
+    30: #882000,
+    35: #9b2904,
+    40: #ab3511,
+    50: #cd4d28,
+    60: #f0653e,
+    70: #ff8b6b,
+    80: #ffb5a1,
+    90: #ffdbd1,
+    95: #ffede9,
+    98: #fff8f6,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  secondary: (
+    0: #000000,
+    10: #3a0b01,
+    20: #552010,
+    25: #632a1a,
+    30: #723524,
+    35: #80402f,
+    40: #8f4c39,
+    50: #ac6450,
+    60: #ca7c67,
+    70: #e99680,
+    80: #ffb5a1,
+    90: #ffdbd1,
+    95: #ffede9,
+    98: #fff8f6,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  tertiary: (
+    0: #000000,
+    10: #231b00,
+    20: #3c2f00,
+    25: #493a00,
+    30: #564500,
+    35: #645000,
+    40: #725c00,
+    50: #8f7400,
+    60: #ae8d00,
+    70: #cba824,
+    80: #e8c340,
+    90: #ffe080,
+    95: #fff0c9,
+    98: #fff8f0,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #251915,
+    20: #3c2d29,
+    25: #473834,
+    30: #53433f,
+    35: #604f4a,
+    40: #6c5a56,
+    50: #86736e,
+    60: #a18c87,
+    70: #bca6a1,
+    80: #d9c2bc,
+    90: #f6ddd7,
+    95: #ffede9,
+    98: #fff8f6,
+    99: #fffbff,
+    100: #ffffff,
+    4: #170b08,
+    6: #1c100d,
+    12: #2a1c19,
+    17: #352723,
+    22: #40312d,
+    24: #453632,
+    87: #edd5cf,
+    92: #fce3dd,
+    94: #ffe9e4,
+    96: #fff1ed,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #291712,
+    20: #402b26,
+    25: #4c3630,
+    30: #59413b,
+    35: #654d46,
+    40: #725952,
+    50: #8c716a,
+    60: #a88a83,
+    70: #c4a49c,
+    80: #e0bfb7,
+    90: #fedbd2,
+    95: #ffede9,
+    98: #fff8f6,
+    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);
+
+@function _high-contrast-value($light, $dark, $theme-type) {
+  @if ($theme-type == light) {
+    @return $light;
+  }
+  @if ($theme-type == dark) {
+    @return $dark;
+  }
+  @if ($theme-type == color-scheme) {
+    @return light-dark(#{$light}, #{$dark});
+  }
+  
+  @error 'Unknown theme-type #{$theme-type}. Expected light, dark, or color-scheme';
+}
+
+@mixin high-contrast-overrides($theme-type) {
+  @include mat.theme-overrides((
+    primary: _high-contrast-value(#591200, #ffece7, $theme-type),
+    on-primary: _high-contrast-value(#ffffff, #000000, $theme-type),
+    primary-container: _high-contrast-value(#8c2100, #ffaf99, $theme-type),
+    on-primary-container: _high-contrast-value(#ffffff, #1e0300, $theme-type),
+    inverse-primary: _high-contrast-value(#ffb5a1, #8a2100, $theme-type),
+    primary-fixed: _high-contrast-value(#8c2100, #ffdbd1, $theme-type),
+    primary-fixed-dim: _high-contrast-value(#641500, #ffb5a1, $theme-type),
+    on-primary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
+    on-primary-fixed-variant: _high-contrast-value(#ffffff, #290400, $theme-type),
+    secondary: _high-contrast-value(#501b0d, #ffece7, $theme-type),
+    on-secondary: _high-contrast-value(#ffffff, #000000, $theme-type),
+    secondary-container: _high-contrast-value(#753726, #ffaf99, $theme-type),
+    on-secondary-container: _high-contrast-value(#ffffff, #1e0300, $theme-type),
+    secondary-fixed: _high-contrast-value(#753726, #ffdbd1, $theme-type),
+    secondary-fixed-dim: _high-contrast-value(#582212, #ffb5a1, $theme-type),
+    on-secondary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
+    on-secondary-fixed-variant: _high-contrast-value(#ffffff, #290400, $theme-type),
+    tertiary: _high-contrast-value(#372b00, #ffefc5, $theme-type),
+    on-tertiary: _high-contrast-value(#ffffff, #000000, $theme-type),
+    tertiary-container: _high-contrast-value(#594700, #e4bf3c, $theme-type),
+    on-tertiary-container: _high-contrast-value(#ffffff, #100b00, $theme-type),
+    tertiary-fixed: _high-contrast-value(#594700, #ffe080, $theme-type),
+    tertiary-fixed-dim: _high-contrast-value(#3e3100, #e8c340, $theme-type),
+    on-tertiary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
+    on-tertiary-fixed-variant: _high-contrast-value(#ffffff, #171000, $theme-type),
+    background: _high-contrast-value(#fff8f6, #1c100d, $theme-type),
+    on-background: _high-contrast-value(#251915, #f6ddd7, $theme-type),
+    surface: _high-contrast-value(#fff8f6, #1c100d, $theme-type),
+    surface-dim: _high-contrast-value(#cab4ae, #1c100d, $theme-type),
+    surface-bright: _high-contrast-value(#fff8f6, #5d4c48, $theme-type),
+    surface-container-low: _high-contrast-value(#ffede9, #2a1c19, $theme-type),
+    surface-container-lowest: _high-contrast-value(#ffffff, #000000, $theme-type),
+    surface-container: _high-contrast-value(#f6ddd7, #3c2d29, $theme-type),
+    surface-container-high: _high-contrast-value(#e7cfc9, #473834, $theme-type),
+    surface-container-highest: _high-contrast-value(#d9c2bc, #53433f, $theme-type),
+    on-surface: _high-contrast-value(#000000, #ffffff, $theme-type),
+    shadow: _high-contrast-value(#000000, #000000, $theme-type),
+    scrim: _high-contrast-value(#000000, #000000, $theme-type),
+    surface-tint: _high-contrast-value(#ab3511, #ffb5a1, $theme-type),
+    inverse-surface: _high-contrast-value(#3c2d29, #f6ddd7, $theme-type),
+    inverse-on-surface: _high-contrast-value(#ffffff, #000000, $theme-type),
+    outline: _high-contrast-value(#3c2722, #ffece7, $theme-type),
+    outline-variant: _high-contrast-value(#5b443d, #dcbbb3, $theme-type),
+    error: _high-contrast-value(#600004, #ffece9, $theme-type),
+    on-error: _high-contrast-value(#ffffff, #000000, $theme-type),
+    error-container: _high-contrast-value(#98000a, #ffaea4, $theme-type),
+    on-error-container: _high-contrast-value(#ffffff, #220001, $theme-type),
+    surface-variant: _high-contrast-value(#fedbd2, #59413b, $theme-type),
+    on-surface-variant: _high-contrast-value(#000000, #ffffff, $theme-type),
+  ))
+ }
diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html
index 5617bdd..4c49ce4 100644
--- a/src/app/pages/dashboard/dashboard.component.html
+++ b/src/app/pages/dashboard/dashboard.component.html
@@ -1,6 +1,6 @@
 <h2>Welcome!</h2>
 <p>This is a basic admin layout using Angular Material 19.</p>
-<button>Primary</button>
-<button>Tertiary</button>
-<button>Secondary</button>
-<button>Error</button>
\ No newline at end of file
+<button mat-flat-button>Primary</button>
+<button mat-button>Tertiary</button>
+<button mat-button>Secondary</button>
+<button mat-button>Error</button>
diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts
index 42a1f08..26dbb30 100644
--- a/src/app/pages/dashboard/dashboard.component.ts
+++ b/src/app/pages/dashboard/dashboard.component.ts
@@ -1,11 +1,10 @@
 import { Component, inject } from '@angular/core';
-
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatButtonModule } from '@angular/material/button';
 @Component({
   selector: 'app-dashboard',
-  imports: [],
+  imports: [MatButtonModule],
   templateUrl: './dashboard.component.html',
-  styleUrl: './dashboard.component.scss'
+  styleUrl: './dashboard.component.scss',
 })
-export class DashboardComponent {
-
-}
+export class DashboardComponent {}
diff --git a/src/index.html b/src/index.html
index fd8cd7d..9be19fb 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,8 +6,10 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
+<body class="mat-typography">
   <app-root></app-root>
 </body>
 </html>
diff --git a/src/styles.scss b/src/styles.scss
index 90d4ee0..ee94070 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1 +1,24 @@
 /* You can add global styles to this file, and also import other style files */
+
+@use "@angular/material" as mat;
+@use "theme-colors" as theme;
+
+html {
+  color-scheme: dark;
+  @include mat.theme(
+    (
+      color: theme.$primary-palette,
+      //   typography: Roboto,
+       //   density: 0,
+    )
+  );
+}
+
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}
diff --git a/src/theme.css b/src/theme.css
new file mode 100644
index 0000000..b93f51e
--- /dev/null
+++ b/src/theme.css
@@ -0,0 +1,303 @@
+/* Note: Color palettes are generated from primary: #5beb34 */
+html {
+  /* COLOR SYSTEM VARIABLES */
+  color-scheme: dark;
+
+  /* Primary palette variables */
+  --mat-sys-primary: light-dark(#196e00, #52e32b);
+  --mat-sys-on-primary: light-dark(#ffffff, #093900);
+  --mat-sys-primary-container: light-dark(#7aff54, #115300);
+  --mat-sys-on-primary-container: light-dark(#032100, #7aff54);
+  --mat-sys-inverse-primary: light-dark(#52e32b, #196e00);
+  --mat-sys-primary-fixed: light-dark(#7aff54, #7aff54);
+  --mat-sys-primary-fixed-dim: light-dark(#52e32b, #52e32b);
+  --mat-sys-on-primary-fixed: light-dark(#032100, #032100);
+  --mat-sys-on-primary-fixed-variant: light-dark(#115300, #115300);
+
+  /* Secondary palette variables */
+  --mat-sys-secondary: light-dark(#226d0d, #8bda6f);
+  --mat-sys-on-secondary: light-dark(#ffffff, #093900);
+  --mat-sys-secondary-container: light-dark(#a6f788, #115300);
+  --mat-sys-on-secondary-container: light-dark(#032100, #a6f788);
+  --mat-sys-secondary-fixed: light-dark(#a6f788, #a6f788);
+  --mat-sys-secondary-fixed-dim: light-dark(#8bda6f, #8bda6f);
+  --mat-sys-on-secondary-fixed: light-dark(#032100, #032100);
+  --mat-sys-on-secondary-fixed-variant: light-dark(#115300, #115300);
+
+  /* Tertiary palette variables */
+  --mat-sys-tertiary: light-dark(#006c51, #00e1ad);
+  --mat-sys-on-tertiary: light-dark(#ffffff, #003829);
+  --mat-sys-tertiary-container: light-dark(#3cffc7, #00513c);
+  --mat-sys-on-tertiary-container: light-dark(#002116, #3cffc7);
+  --mat-sys-tertiary-fixed: light-dark(#3cffc7, #3cffc7);
+  --mat-sys-tertiary-fixed-dim: light-dark(#00e1ad, #00e1ad);
+  --mat-sys-on-tertiary-fixed: light-dark(#002116, #002116);
+  --mat-sys-on-tertiary-fixed-variant: light-dark(#00513c, #00513c);
+
+  /* Neutral palette variables */
+  --mat-sys-background: light-dark(#f3fde9, #0e150a);
+  --mat-sys-on-background: light-dark(#161e12, #dce6d2);
+  --mat-sys-surface: light-dark(#f3fde9, #0e150a);
+  --mat-sys-surface-dim: light-dark(#d4ddca, #0e150a);
+  --mat-sys-surface-bright: light-dark(#f3fde9, #333c2e);
+  --mat-sys-surface-container-low: light-dark(#edf7e3, #161e12);
+  --mat-sys-surface-container-lowest: light-dark(#ffffff, #091006);
+  --mat-sys-surface-container: light-dark(#e7f1de, #1a2216);
+  --mat-sys-surface-container-high: light-dark(#e2ebd8, #242c20);
+  --mat-sys-surface-container-highest: light-dark(#dce6d2, #2f372a);
+  --mat-sys-on-surface: light-dark(#161e12, #dce6d2);
+  --mat-sys-shadow: light-dark(#000000, #000000);
+  --mat-sys-scrim: light-dark(#000000, #000000);
+  --mat-sys-surface-tint: light-dark(#196e00, #52e32b);
+  --mat-sys-inverse-surface: light-dark(#2a3326, #dce6d2);
+  --mat-sys-inverse-on-surface: light-dark(#eaf4e0, #2a3326);
+  --mat-sys-outline: light-dark(#6d7b65, #87957e);
+  --mat-sys-outline-variant: light-dark(#bccbb2, #3d4a37);
+  --mat-sys-neutral10: light-dark(
+    #161e12,
+    #161e12
+  ); /* Variable used for the form field native select option text color */
+
+  /* Error palette variables */
+  --mat-sys-error: light-dark(#ba1a1a, #ffb4ab);
+  --mat-sys-on-error: light-dark(#ffffff, #690005);
+  --mat-sys-error-container: light-dark(#ffdad6, #93000a);
+  --mat-sys-on-error-container: light-dark(#410002, #ffdad6);
+
+  /* Neutral variant palette variables */
+  --mat-sys-surface-variant: light-dark(#d8e7cd, #3d4a37);
+  --mat-sys-on-surface-variant: light-dark(#3d4a37, #bccbb2);
+  --mat-sys-neutral-variant20: light-dark(
+    #273422,
+    #273422
+  ); /* Variable used for the sidenav scrim (container background shadow when opened) */
+
+  /* TYPOGRAPHY SYSTEM VARIABLES */
+
+  /* Typography variables. Only used in the different typescale system variables. */
+  --mat-sys-brand-font-family: Roboto; /* The font-family to use for brand text. */
+  --mat-sys-plain-font-family: Roboto; /* The font-family to use for plain text. */
+  --mat-sys-bold-font-weight: 700; /* The font-weight to use for bold text. */
+  --mat-sys-medium-font-weight: 500; /* The font-weight to use for medium text. */
+  --mat-sys-regular-font-weight: 400; /* The font-weight to use for regular text. */
+
+  /* Typescale variables. */
+  /* Warning: Risk of reduced fidelity from using the composite typography tokens (ex. --mat-sys-body-large) since
+     tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */
+  --mat-sys-body-large: var(--mat-sys-body-large-weight)
+    var(--mat-sys-body-large-size) / var(--mat-sys-body-large-line-height)
+    var(--mat-sys-body-large-font);
+  --mat-sys-body-large-font: var(--mat-sys-plain-font-family);
+  --mat-sys-body-large-line-height: 1.5rem;
+  --mat-sys-body-large-size: 1rem;
+  --mat-sys-body-large-tracking: 0.031rem;
+  --mat-sys-body-large-weight: var(--mat-sys-regular-font-weight);
+
+  /* Body medium typescale */
+  --mat-sys-body-medium: var(--mat-sys-body-medium-weight)
+    var(--mat-sys-body-medium-size) / var(--mat-sys-body-medium-line-height)
+    var(--mat-sys-body-medium-font);
+  --mat-sys-body-medium-font: var(--mat-sys-plain-font-family);
+  --mat-sys-body-medium-line-height: 1.25rem;
+  --mat-sys-body-medium-size: 0.875rem;
+  --mat-sys-body-medium-tracking: 0.016rem;
+  --mat-sys-body-medium-weight: var(--mat-sys-regular-font-weight);
+
+  /* Body small typescale */
+  --mat-sys-body-small: var(--mat-sys-body-small-weight)
+    var(--mat-sys-body-small-size) / var(--mat-sys-body-small-line-height)
+    var(--mat-sys-body-small-font);
+  --mat-sys-body-small-font: var(--mat-sys-plain-font-family);
+  --mat-sys-body-small-line-height: 1rem;
+  --mat-sys-body-small-size: 0.75rem;
+  --mat-sys-body-small-tracking: 0.025rem;
+  --mat-sys-body-small-weight: var(--mat-sys-regular-font-weight);
+
+  /* Display large typescale */
+  --mat-sys-display-large: var(--mat-sys-display-large-weight)
+    var(--mat-sys-display-large-size) / var(--mat-sys-display-large-line-height)
+    var(--mat-sys-display-large-font);
+  --mat-sys-display-large-font: var(--mat-sys-brand-font-family);
+  --mat-sys-display-large-line-height: 4rem;
+  --mat-sys-display-large-size: 3.562rem;
+  --mat-sys-display-large-tracking: -0.016rem;
+  --mat-sys-display-large-weight: var(--mat-sys-regular-font-weight);
+
+  /* Display medium typescale */
+  --mat-sys-display-medium: var(--mat-sys-display-medium-weight)
+    var(--mat-sys-display-medium-size) /
+    var(--mat-sys-display-medium-line-height) var(--mat-sys-display-medium-font);
+  --mat-sys-display-medium-font: var(--mat-sys-brand-font-family);
+  --mat-sys-display-medium-line-height: 3.25rem;
+  --mat-sys-display-medium-size: 2.812rem;
+  --mat-sys-display-medium-tracking: 0;
+  --mat-sys-display-medium-weight: var(--mat-sys-regular-font-weight);
+
+  /* Display small typescale */
+  --mat-sys-display-small: var(--mat-sys-display-small-weight)
+    var(--mat-sys-display-small-size) / var(--mat-sys-display-small-line-height)
+    var(--mat-sys-display-small-font);
+  --mat-sys-display-small-font: var(--mat-sys-brand-font-family);
+  --mat-sys-display-small-line-height: 2.75rem;
+  --mat-sys-display-small-size: 2.25rem;
+  --mat-sys-display-small-tracking: 0;
+  --mat-sys-display-small-weight: var(--mat-sys-regular-font-weight);
+
+  /* Headline large typescale */
+  --mat-sys-headline-large: var(--mat-sys-headline-large-weight)
+    var(--mat-sys-headline-large-size) /
+    var(--mat-sys-headline-large-line-height) var(--mat-sys-headline-large-font);
+  --mat-sys-headline-large-font: var(--mat-sys-brand-font-family);
+  --mat-sys-headline-large-line-height: 2.5rem;
+  --mat-sys-headline-large-size: 2rem;
+  --mat-sys-headline-large-tracking: 0;
+  --mat-sys-headline-large-weight: var(--mat-sys-regular-font-weight);
+
+  /* Headline medium typescale */
+  --mat-sys-headline-medium: var(--mat-sys-headline-medium-weight)
+    var(--mat-sys-headline-medium-size) /
+    var(--mat-sys-headline-medium-line-height)
+    var(--mat-sys-headline-medium-font);
+  --mat-sys-headline-medium-font: var(--mat-sys-brand-font-family);
+  --mat-sys-headline-medium-line-height: 2.25rem;
+  --mat-sys-headline-medium-size: 1.75rem;
+  --mat-sys-headline-medium-tracking: 0;
+  --mat-sys-headline-medium-weight: var(--mat-sys-regular-font-weight);
+
+  /* Headline small typescale */
+  --mat-sys-headline-small: var(--mat-sys-headline-small-weight)
+    var(--mat-sys-headline-small-size) /
+    var(--mat-sys-headline-small-line-height) var(--mat-sys-headline-small-font);
+  --mat-sys-headline-small-font: var(--mat-sys-brand-font-family);
+  --mat-sys-headline-small-line-height: 2rem;
+  --mat-sys-headline-small-size: 1.5rem;
+  --mat-sys-headline-small-tracking: 0;
+  --mat-sys-headline-small-weight: var(--mat-sys-regular-font-weight);
+
+  /* Label large typescale */
+  --mat-sys-label-large: var(--mat-sys-label-large-weight)
+    var(--mat-sys-label-large-size) / var(--mat-sys-label-large-line-height)
+    var(--mat-sys-label-large-font);
+  --mat-sys-label-large-font: var(--mat-sys-plain-font-family);
+  --mat-sys-label-large-line-height: 1.25rem;
+  --mat-sys-label-large-size: 0.875rem;
+  --mat-sys-label-large-tracking: 0.006rem;
+  --mat-sys-label-large-weight: var(--mat-sys-medium-font-weight);
+  --mat-sys-label-large-weight-prominent: var(--mat-sys-bold-font-weight);
+
+  /* Label medium typescale */
+  --mat-sys-label-medium: var(--mat-sys-label-medium-weight)
+    var(--mat-sys-label-medium-size) / var(--mat-sys-label-medium-line-height)
+    var(--mat-sys-label-medium-font);
+  --mat-sys-label-medium-font: var(--mat-sys-plain-font-family);
+  --mat-sys-label-medium-line-height: 1rem;
+  --mat-sys-label-medium-size: 0.75rem;
+  --mat-sys-label-medium-tracking: 0.031rem;
+  --mat-sys-label-medium-weight: var(--mat-sys-medium-font-weight);
+  --mat-sys-label-medium-weight-prominent: var(--mat-sys-bold-font-weight);
+
+  /* Label small typescale */
+  --mat-sys-label-small: var(--mat-sys-label-small-weight)
+    var(--mat-sys-label-small-size) / var(--mat-sys-label-small-line-height)
+    var(--mat-sys-label-small-font);
+  --mat-sys-label-small-font: var(--mat-sys-plain-font-family);
+  --mat-sys-label-small-line-height: 1rem;
+  --mat-sys-label-small-size: 0.688rem;
+  --mat-sys-label-small-tracking: 0.031rem;
+  --mat-sys-label-small-weight: var(--mat-sys-medium-font-weight);
+
+  /* Title large typescale */
+  --mat-sys-title-large: var(--mat-sys-title-large-weight)
+    var(--mat-sys-title-large-size) / var(--mat-sys-title-large-line-height)
+    var(--mat-sys-title-large-font);
+  --mat-sys-title-large-font: var(--mat-sys-brand-font-family);
+  --mat-sys-title-large-line-height: 1.75rem;
+  --mat-sys-title-large-size: 1.375rem;
+  --mat-sys-title-large-tracking: 0;
+  --mat-sys-title-large-weight: var(--mat-sys-regular-font-weight);
+
+  /* Title medium typescale */
+  --mat-sys-title-medium: var(--mat-sys-title-medium-weight)
+    var(--mat-sys-title-medium-size) / var(--mat-sys-title-medium-line-height)
+    var(--mat-sys-title-medium-font);
+  --mat-sys-title-medium-font: var(--mat-sys-plain-font-family);
+  --mat-sys-title-medium-line-height: 1.5rem;
+  --mat-sys-title-medium-size: 1rem;
+  --mat-sys-title-medium-tracking: 0.009rem;
+  --mat-sys-title-medium-weight: var(--mat-sys-medium-font-weight);
+
+  /* Title small typescale */
+  --mat-sys-title-small: var(--mat-sys-title-small-weight)
+    var(--mat-sys-title-small-size) / var(--mat-sys-title-small-line-height)
+    var(--mat-sys-title-small-font);
+  --mat-sys-title-small-font: var(--mat-sys-plain-font-family);
+  --mat-sys-title-small-line-height: 1.25rem;
+  --mat-sys-title-small-size: 0.875rem;
+  --mat-sys-title-small-tracking: 0.006rem;
+  --mat-sys-title-small-weight: var(--mat-sys-medium-font-weight);
+
+  /* ELEVATION SYSTEM VARIABLES */
+
+  /* Box shadow colors. Only used in the elevation level system variables. */
+  --mat-sys-umbra-color: color-mix(
+    in srgb,
+    var(--mat-sys-shadow),
+    transparent 80%
+  );
+  --mat-sys-penumbra-color: color-mix(
+    in srgb,
+    var(--mat-sys-shadow),
+    transparent 86%
+  );
+  --mat-sys-ambient-color: color-mix(
+    in srgb,
+    var(--mat-sys-shadow),
+    transparent 88%
+  );
+
+  /* Elevation level system variables. These are used as the value for box-shadow CSS property. */
+  --mat-sys-level0:
+    0px 0px 0px 0px var(--mat-sys-umbra-color),
+    0px 0px 0px 0px var(--mat-sys-penumbra-color),
+    0px 0px 0px 0px var(--mat-sys-ambient-color);
+  --mat-sys-level1:
+    0px 2px 1px -1px var(--mat-sys-umbra-color),
+    0px 1px 1px 0px var(--mat-sys-penumbra-color),
+    0px 1px 3px 0px var(--mat-sys-ambient-color);
+  --mat-sys-level2:
+    0px 3px 3px -2px var(--mat-sys-umbra-color),
+    0px 3px 4px 0px var(--mat-sys-penumbra-color),
+    0px 1px 8px 0px var(--mat-sys-ambient-color);
+  --mat-sys-level3:
+    0px 3px 5px -1px var(--mat-sys-umbra-color),
+    0px 6px 10px 0px var(--mat-sys-penumbra-color),
+    0px 1px 18px 0px var(--mat-sys-ambient-color);
+  --mat-sys-level4:
+    0px 5px 5px -3px var(--mat-sys-umbra-color),
+    0px 8px 10px 1px var(--mat-sys-penumbra-color),
+    0px 3px 14px 2px var(--mat-sys-ambient-color);
+  --mat-sys-level5:
+    0px 7px 8px -4px var(--mat-sys-umbra-color),
+    0px 12px 17px 2px var(--mat-sys-penumbra-color),
+    0px 5px 22px 4px var(--mat-sys-ambient-color);
+
+  /* SHAPE SYSTEM VARIABLES */
+  --mat-sys-corner-extra-large: 28px;
+  --mat-sys-corner-extra-large-top: 28px 28px 0 0;
+  --mat-sys-corner-extra-small: 4px;
+  --mat-sys-corner-extra-small-top: 4px 4px 0 0;
+  --mat-sys-corner-full: 9999px;
+  --mat-sys-corner-large: 16px;
+  --mat-sys-corner-large-end: 0 16px 16px 0;
+  --mat-sys-corner-large-start: 16px 0 0 16px;
+  --mat-sys-corner-large-top: 16px 16px 0 0;
+  --mat-sys-corner-medium: 12px;
+  --mat-sys-corner-none: 0;
+  --mat-sys-corner-small: 8px;
+
+  /* STATE SYSTEM VARIABLES */
+  --mat-sys-dragged-state-layer-opacity: 0.16;
+  --mat-sys-focus-state-layer-opacity: 0.12;
+  --mat-sys-hover-state-layer-opacity: 0.08;
+  --mat-sys-pressed-state-layer-opacity: 0.12;
+}