diff --git a/recipes-app/angular.json b/recipes-app/angular.json
index 58a867b..932be8c 100644
--- a/recipes-app/angular.json
+++ b/recipes-app/angular.json
@@ -32,12 +32,10 @@
               }
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/rose-red.css",
               "src/styles.scss"
             ],
-            "scripts": [],
-            "server": false,
-            "prerender": false,
-            "ssr": false
+            "scripts": []
           },
           "configurations": {
             "production": {
@@ -94,9 +92,13 @@
               }
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/rose-red.css",
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "server": false,
+            "prerender": false,
+            "ssr": false
           }
         }
       }
diff --git a/recipes-app/package-lock.json b/recipes-app/package-lock.json
index 4ca96ea..0ddacf4 100644
--- a/recipes-app/package-lock.json
+++ b/recipes-app/package-lock.json
@@ -9,10 +9,12 @@
       "version": "0.0.0",
       "dependencies": {
         "@angular/animations": "^21.0.7",
+        "@angular/cdk": "^21.0.7",
         "@angular/common": "^21.0.7",
         "@angular/compiler": "^21.0.7",
         "@angular/core": "^21.0.7",
         "@angular/forms": "^21.0.7",
+        "@angular/material": "^21.0.7",
         "@angular/platform-browser": "^21.0.7",
         "@angular/platform-browser-dynamic": "^21.0.7",
         "@angular/router": "^21.0.7",
@@ -997,6 +999,23 @@
         "@esbuild/win32-x64": "0.26.0"
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-21.1.0.tgz",
+      "integrity": "sha512-zvV37HPKhtu0bOfuK0IhjKKq++Xb57Z11uZYZJI34BZnZ5y1TPhJpcmrHhjb2uKUNfDvePUqhlnIlKAXHSBIhw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "parse5": "^8.0.0",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^21.0.0 || ^22.0.0",
+        "@angular/core": "^21.0.0 || ^22.0.0",
+        "@angular/platform-browser": "^21.0.0 || ^22.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/cli": {
       "version": "21.0.5",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-21.0.5.tgz",
@@ -1211,6 +1230,7 @@
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-21.0.7.tgz",
       "integrity": "sha512-HUfUaO6+cxam9wug3Upc83ueBIDSgJwxzYIuPCP4AjL5DhT6Fbqv/Zq+nLbLF7rklbKdqzYsMjse97pxmxJGLQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@standard-schema/spec": "^1.0.0",
         "tslib": "^2.3.0"
@@ -1225,6 +1245,23 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/material": {
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-21.1.0.tgz",
+      "integrity": "sha512-VFWUQMU5Rm8w6uW5+FcMbsDvHMmhviVxPsKAFdinJ4ySbm5c6z9c64nhlYCNRswRgLB1VcoVxEWitP77LUagYg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/cdk": "21.1.0",
+        "@angular/common": "^21.0.0 || ^22.0.0",
+        "@angular/core": "^21.0.0 || ^22.0.0",
+        "@angular/forms": "^21.0.0 || ^22.0.0",
+        "@angular/platform-browser": "^21.0.0 || ^22.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "21.0.7",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.0.7.tgz",
@@ -5869,7 +5906,6 @@
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
       "dev": true,
-      "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
       },
@@ -8795,7 +8831,6 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz",
       "integrity": "sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "entities": "^6.0.0"
@@ -8849,7 +8884,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
       "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
diff --git a/recipes-app/package.json b/recipes-app/package.json
index aff937c..c6fd08e 100644
--- a/recipes-app/package.json
+++ b/recipes-app/package.json
@@ -11,10 +11,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^21.0.7",
+    "@angular/cdk": "^21.0.7",
     "@angular/common": "^21.0.7",
     "@angular/compiler": "^21.0.7",
     "@angular/core": "^21.0.7",
     "@angular/forms": "^21.0.7",
+    "@angular/material": "^21.0.7",
     "@angular/platform-browser": "^21.0.7",
     "@angular/platform-browser-dynamic": "^21.0.7",
     "@angular/router": "^21.0.7",
@@ -35,4 +37,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.9.3"
   }
-}
\ No newline at end of file
+}
diff --git a/recipes-app/src/index.html b/recipes-app/src/index.html
index 5ef0984..6de101c 100644
--- a/recipes-app/src/index.html
+++ b/recipes-app/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/recipes-app/src/styles.scss b/recipes-app/src/styles.scss
index 90d4ee0..aa67a7c 100644
--- a/recipes-app/src/styles.scss
+++ b/recipes-app/src/styles.scss
@@ -1 +1,28 @@
-/* You can add global styles to this file, and also import other style files */
+@use '@angular/material' as mat;
+
+@include mat.core();
+
+$theme: mat.define-theme((
+  color: (
+    theme-type: light,
+    primary: mat.$rose-palette,
+    tertiary: mat.$red-palette,
+  ),
+  typography: (
+    brand-family: 'Roboto, "Helvetica Neue", sans-serif',
+    plain-family: 'Roboto, "Helvetica Neue", sans-serif',
+  ),
+));
+
+html {
+  @include mat.all-component-themes($theme);
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}