diff --git a/apps/401-recipe-filter-solution/src/app/recipe/recipe-filter.ng.ts b/apps/401-recipe-filter-solution/src/app/recipe/recipe-filter.ng.ts
index 7611251..8bf0e7b 100644
--- a/apps/401-recipe-filter-solution/src/app/recipe/recipe-filter.ng.ts
+++ b/apps/401-recipe-filter-solution/src/app/recipe/recipe-filter.ng.ts
@@ -20,7 +20,6 @@ import {
       <input
         [formField]="filterForm.maxIngredientCount"
         aria-label="Max Ingredients"
-        formControlName="maxIngredientCount"
         placeholder="max ingredients"
         type="number"
       />
diff --git a/apps/401-recipe-filter-starter/src/app/recipe/recipe-filter.ng.ts b/apps/401-recipe-filter-starter/src/app/recipe/recipe-filter.ng.ts
index 2598b38..7bb55d1 100644
--- a/apps/401-recipe-filter-starter/src/app/recipe/recipe-filter.ng.ts
+++ b/apps/401-recipe-filter-starter/src/app/recipe/recipe-filter.ng.ts
@@ -1,6 +1,9 @@
-import { ChangeDetectionStrategy, Component, output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, model } from '@angular/core';
 import { FormField, FormRoot } from '@angular/forms/signals';
-import { RecipeFilterCriteria } from './recipe-filter-criteria';
+import {
+  createDefaultRecipeFilterCriteria,
+  RecipeFilterCriteria,
+} from './recipe-filter-criteria';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -9,5 +12,5 @@ import { RecipeFilterCriteria } from './recipe-filter-criteria';
   template: ` &lt;🚧 wm-recipe-filter&gt; `,
 })
 export class RecipeFilter {
-  filterChange = output<RecipeFilterCriteria>();
+  filter = model<RecipeFilterCriteria>(createDefaultRecipeFilterCriteria());
 }
diff --git a/apps/402-recipe-search-filter-interaction-solution/src/app/recipe/recipe-filter.ng.ts b/apps/402-recipe-search-filter-interaction-solution/src/app/recipe/recipe-filter.ng.ts
index 7611251..8bf0e7b 100644
--- a/apps/402-recipe-search-filter-interaction-solution/src/app/recipe/recipe-filter.ng.ts
+++ b/apps/402-recipe-search-filter-interaction-solution/src/app/recipe/recipe-filter.ng.ts
@@ -20,7 +20,6 @@ import {
       <input
         [formField]="filterForm.maxIngredientCount"
         aria-label="Max Ingredients"
-        formControlName="maxIngredientCount"
         placeholder="max ingredients"
         type="number"
       />
diff --git a/apps/402-recipe-search-filter-interaction-starter/src/app/recipe/recipe-filter.ng.ts b/apps/402-recipe-search-filter-interaction-starter/src/app/recipe/recipe-filter.ng.ts
index 7611251..8bf0e7b 100644
--- a/apps/402-recipe-search-filter-interaction-starter/src/app/recipe/recipe-filter.ng.ts
+++ b/apps/402-recipe-search-filter-interaction-starter/src/app/recipe/recipe-filter.ng.ts
@@ -20,7 +20,6 @@ import {
       <input
         [formField]="filterForm.maxIngredientCount"
         aria-label="Max Ingredients"
-        formControlName="maxIngredientCount"
         placeholder="max ingredients"
         type="number"
       />
diff --git a/apps/403-recipe-search-add-button-solution/src/app/recipe/recipe-filter.ng.ts b/apps/403-recipe-search-add-button-solution/src/app/recipe/recipe-filter.ng.ts
index 7611251..8bf0e7b 100644
--- a/apps/403-recipe-search-add-button-solution/src/app/recipe/recipe-filter.ng.ts
+++ b/apps/403-recipe-search-add-button-solution/src/app/recipe/recipe-filter.ng.ts
@@ -20,7 +20,6 @@ import {
       <input
         [formField]="filterForm.maxIngredientCount"
         aria-label="Max Ingredients"
-        formControlName="maxIngredientCount"
         placeholder="max ingredients"
         type="number"
       />
diff --git a/apps/403-recipe-search-add-button-starter/src/app/recipe/recipe-filter.ng.ts b/apps/403-recipe-search-add-button-starter/src/app/recipe/recipe-filter.ng.ts
index 7611251..8bf0e7b 100644
--- a/apps/403-recipe-search-add-button-starter/src/app/recipe/recipe-filter.ng.ts
+++ b/apps/403-recipe-search-add-button-starter/src/app/recipe/recipe-filter.ng.ts
@@ -20,7 +20,6 @@ import {
       <input
         [formField]="filterForm.maxIngredientCount"
         aria-label="Max Ingredients"
-        formControlName="maxIngredientCount"
         placeholder="max ingredients"
         type="number"
       />
diff --git a/apps/404-recipe-filter-material-solution/src/app/recipe/recipe-filter.ng.ts b/apps/404-recipe-filter-material-solution/src/app/recipe/recipe-filter.ng.ts
index 7611251..a442f6b 100644
--- a/apps/404-recipe-filter-material-solution/src/app/recipe/recipe-filter.ng.ts
+++ b/apps/404-recipe-filter-material-solution/src/app/recipe/recipe-filter.ng.ts
@@ -1,5 +1,7 @@
 import { ChangeDetectionStrategy, Component, model } from '@angular/core';
 import { form, FormField, FormRoot } from '@angular/forms/signals';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
 import {
   createDefaultRecipeFilterCriteria,
   RecipeFilterCriteria,
@@ -8,33 +10,35 @@ import {
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'wm-recipe-filter',
-  imports: [FormField, FormRoot],
+  imports: [FormField, FormRoot, MatFormField, MatInput, MatLabel],
   template: `
-    <form [formRoot]="filterForm">
-      <input
-        [formField]="filterForm.keywords"
-        aria-label="Keywords"
-        placeholder="keywords"
-        type="text"
-      />
-      <input
-        [formField]="filterForm.maxIngredientCount"
-        aria-label="Max Ingredients"
-        formControlName="maxIngredientCount"
-        placeholder="max ingredients"
-        type="number"
-      />
-      <input
-        [formField]="filterForm.maxStepCount"
-        aria-label="Max Steps"
-        placeholder="max steps"
-        type="number"
-      />
+    <form class="filter-form" [formRoot]="filterForm">
+      <mat-form-field>
+        <mat-label>Keywords</mat-label>
+        <input [formField]="filterForm.keywords" matInput type="text" />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Max Ingredients</mat-label>
+        <input
+          [formField]="filterForm.maxIngredientCount"
+          matInput
+          type="number"
+        />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Max Steps</mat-label>
+        <input [formField]="filterForm.maxStepCount" matInput type="number" />
+      </mat-form-field>
     </form>
   `,
   styles: `
-    :host {
-      text-align: center;
+    .filter-form {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      justify-content: center;
+
+      margin-top: 1rem;
     }
   `,
 })
diff --git a/apps/404-recipe-filter-material-starter/src/app/recipe/recipe-filter.ng.ts b/apps/404-recipe-filter-material-starter/src/app/recipe/recipe-filter.ng.ts
index 7611251..8bf0e7b 100644
--- a/apps/404-recipe-filter-material-starter/src/app/recipe/recipe-filter.ng.ts
+++ b/apps/404-recipe-filter-material-starter/src/app/recipe/recipe-filter.ng.ts
@@ -20,7 +20,6 @@ import {
       <input
         [formField]="filterForm.maxIngredientCount"
         aria-label="Max Ingredients"
-        formControlName="maxIngredientCount"
         placeholder="max ingredients"
         type="number"
       />
diff --git a/apps/501-recipe-preview-testronaut-solution/src/app/recipe/recipe-filter.ng.ts b/apps/501-recipe-preview-testronaut-solution/src/app/recipe/recipe-filter.ng.ts
index 7611251..a442f6b 100644
--- a/apps/501-recipe-preview-testronaut-solution/src/app/recipe/recipe-filter.ng.ts
+++ b/apps/501-recipe-preview-testronaut-solution/src/app/recipe/recipe-filter.ng.ts
@@ -1,5 +1,7 @@
 import { ChangeDetectionStrategy, Component, model } from '@angular/core';
 import { form, FormField, FormRoot } from '@angular/forms/signals';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
 import {
   createDefaultRecipeFilterCriteria,
   RecipeFilterCriteria,
@@ -8,33 +10,35 @@ import {
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'wm-recipe-filter',
-  imports: [FormField, FormRoot],
+  imports: [FormField, FormRoot, MatFormField, MatInput, MatLabel],
   template: `
-    <form [formRoot]="filterForm">
-      <input
-        [formField]="filterForm.keywords"
-        aria-label="Keywords"
-        placeholder="keywords"
-        type="text"
-      />
-      <input
-        [formField]="filterForm.maxIngredientCount"
-        aria-label="Max Ingredients"
-        formControlName="maxIngredientCount"
-        placeholder="max ingredients"
-        type="number"
-      />
-      <input
-        [formField]="filterForm.maxStepCount"
-        aria-label="Max Steps"
-        placeholder="max steps"
-        type="number"
-      />
+    <form class="filter-form" [formRoot]="filterForm">
+      <mat-form-field>
+        <mat-label>Keywords</mat-label>
+        <input [formField]="filterForm.keywords" matInput type="text" />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Max Ingredients</mat-label>
+        <input
+          [formField]="filterForm.maxIngredientCount"
+          matInput
+          type="number"
+        />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Max Steps</mat-label>
+        <input [formField]="filterForm.maxStepCount" matInput type="number" />
+      </mat-form-field>
     </form>
   `,
   styles: `
-    :host {
-      text-align: center;
+    .filter-form {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      justify-content: center;
+
+      margin-top: 1rem;
     }
   `,
 })
diff --git a/apps/501-recipe-preview-testronaut-starter/src/app/recipe/recipe-filter.ng.ts b/apps/501-recipe-preview-testronaut-starter/src/app/recipe/recipe-filter.ng.ts
index 7611251..a442f6b 100644
--- a/apps/501-recipe-preview-testronaut-starter/src/app/recipe/recipe-filter.ng.ts
+++ b/apps/501-recipe-preview-testronaut-starter/src/app/recipe/recipe-filter.ng.ts
@@ -1,5 +1,7 @@
 import { ChangeDetectionStrategy, Component, model } from '@angular/core';
 import { form, FormField, FormRoot } from '@angular/forms/signals';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
 import {
   createDefaultRecipeFilterCriteria,
   RecipeFilterCriteria,
@@ -8,33 +10,35 @@ import {
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'wm-recipe-filter',
-  imports: [FormField, FormRoot],
+  imports: [FormField, FormRoot, MatFormField, MatInput, MatLabel],
   template: `
-    <form [formRoot]="filterForm">
-      <input
-        [formField]="filterForm.keywords"
-        aria-label="Keywords"
-        placeholder="keywords"
-        type="text"
-      />
-      <input
-        [formField]="filterForm.maxIngredientCount"
-        aria-label="Max Ingredients"
-        formControlName="maxIngredientCount"
-        placeholder="max ingredients"
-        type="number"
-      />
-      <input
-        [formField]="filterForm.maxStepCount"
-        aria-label="Max Steps"
-        placeholder="max steps"
-        type="number"
-      />
+    <form class="filter-form" [formRoot]="filterForm">
+      <mat-form-field>
+        <mat-label>Keywords</mat-label>
+        <input [formField]="filterForm.keywords" matInput type="text" />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Max Ingredients</mat-label>
+        <input
+          [formField]="filterForm.maxIngredientCount"
+          matInput
+          type="number"
+        />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Max Steps</mat-label>
+        <input [formField]="filterForm.maxStepCount" matInput type="number" />
+      </mat-form-field>
     </form>
   `,
   styles: `
-    :host {
-      text-align: center;
+    .filter-form {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      justify-content: center;
+
+      margin-top: 1rem;
     }
   `,
 })
diff --git a/apps/502-recipe-filter-testronaut-solution/src/app/recipe/recipe-filter.ng.ts b/apps/502-recipe-filter-testronaut-solution/src/app/recipe/recipe-filter.ng.ts
index 7611251..a442f6b 100644
--- a/apps/502-recipe-filter-testronaut-solution/src/app/recipe/recipe-filter.ng.ts
+++ b/apps/502-recipe-filter-testronaut-solution/src/app/recipe/recipe-filter.ng.ts
@@ -1,5 +1,7 @@
 import { ChangeDetectionStrategy, Component, model } from '@angular/core';
 import { form, FormField, FormRoot } from '@angular/forms/signals';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
 import {
   createDefaultRecipeFilterCriteria,
   RecipeFilterCriteria,
@@ -8,33 +10,35 @@ import {
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'wm-recipe-filter',
-  imports: [FormField, FormRoot],
+  imports: [FormField, FormRoot, MatFormField, MatInput, MatLabel],
   template: `
-    <form [formRoot]="filterForm">
-      <input
-        [formField]="filterForm.keywords"
-        aria-label="Keywords"
-        placeholder="keywords"
-        type="text"
-      />
-      <input
-        [formField]="filterForm.maxIngredientCount"
-        aria-label="Max Ingredients"
-        formControlName="maxIngredientCount"
-        placeholder="max ingredients"
-        type="number"
-      />
-      <input
-        [formField]="filterForm.maxStepCount"
-        aria-label="Max Steps"
-        placeholder="max steps"
-        type="number"
-      />
+    <form class="filter-form" [formRoot]="filterForm">
+      <mat-form-field>
+        <mat-label>Keywords</mat-label>
+        <input [formField]="filterForm.keywords" matInput type="text" />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Max Ingredients</mat-label>
+        <input
+          [formField]="filterForm.maxIngredientCount"
+          matInput
+          type="number"
+        />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Max Steps</mat-label>
+        <input [formField]="filterForm.maxStepCount" matInput type="number" />
+      </mat-form-field>
     </form>
   `,
   styles: `
-    :host {
-      text-align: center;
+    .filter-form {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      justify-content: center;
+
+      margin-top: 1rem;
     }
   `,
 })
diff --git a/apps/502-recipe-filter-testronaut-starter/src/app/recipe/recipe-filter.ng.ts b/apps/502-recipe-filter-testronaut-starter/src/app/recipe/recipe-filter.ng.ts
index 7611251..a442f6b 100644
--- a/apps/502-recipe-filter-testronaut-starter/src/app/recipe/recipe-filter.ng.ts
+++ b/apps/502-recipe-filter-testronaut-starter/src/app/recipe/recipe-filter.ng.ts
@@ -1,5 +1,7 @@
 import { ChangeDetectionStrategy, Component, model } from '@angular/core';
 import { form, FormField, FormRoot } from '@angular/forms/signals';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
 import {
   createDefaultRecipeFilterCriteria,
   RecipeFilterCriteria,
@@ -8,33 +10,35 @@ import {
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'wm-recipe-filter',
-  imports: [FormField, FormRoot],
+  imports: [FormField, FormRoot, MatFormField, MatInput, MatLabel],
   template: `
-    <form [formRoot]="filterForm">
-      <input
-        [formField]="filterForm.keywords"
-        aria-label="Keywords"
-        placeholder="keywords"
-        type="text"
-      />
-      <input
-        [formField]="filterForm.maxIngredientCount"
-        aria-label="Max Ingredients"
-        formControlName="maxIngredientCount"
-        placeholder="max ingredients"
-        type="number"
-      />
-      <input
-        [formField]="filterForm.maxStepCount"
-        aria-label="Max Steps"
-        placeholder="max steps"
-        type="number"
-      />
+    <form class="filter-form" [formRoot]="filterForm">
+      <mat-form-field>
+        <mat-label>Keywords</mat-label>
+        <input [formField]="filterForm.keywords" matInput type="text" />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Max Ingredients</mat-label>
+        <input
+          [formField]="filterForm.maxIngredientCount"
+          matInput
+          type="number"
+        />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Max Steps</mat-label>
+        <input [formField]="filterForm.maxStepCount" matInput type="number" />
+      </mat-form-field>
     </form>
   `,
   styles: `
-    :host {
-      text-align: center;
+    .filter-form {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      justify-content: center;
+
+      margin-top: 1rem;
     }
   `,
 })
diff --git a/apps/503-recipe-search-testronaut-solution/src/app/recipe/recipe-filter.ng.ts b/apps/503-recipe-search-testronaut-solution/src/app/recipe/recipe-filter.ng.ts
index 7611251..a442f6b 100644
--- a/apps/503-recipe-search-testronaut-solution/src/app/recipe/recipe-filter.ng.ts
+++ b/apps/503-recipe-search-testronaut-solution/src/app/recipe/recipe-filter.ng.ts
@@ -1,5 +1,7 @@
 import { ChangeDetectionStrategy, Component, model } from '@angular/core';
 import { form, FormField, FormRoot } from '@angular/forms/signals';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
 import {
   createDefaultRecipeFilterCriteria,
   RecipeFilterCriteria,
@@ -8,33 +10,35 @@ import {
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'wm-recipe-filter',
-  imports: [FormField, FormRoot],
+  imports: [FormField, FormRoot, MatFormField, MatInput, MatLabel],
   template: `
-    <form [formRoot]="filterForm">
-      <input
-        [formField]="filterForm.keywords"
-        aria-label="Keywords"
-        placeholder="keywords"
-        type="text"
-      />
-      <input
-        [formField]="filterForm.maxIngredientCount"
-        aria-label="Max Ingredients"
-        formControlName="maxIngredientCount"
-        placeholder="max ingredients"
-        type="number"
-      />
-      <input
-        [formField]="filterForm.maxStepCount"
-        aria-label="Max Steps"
-        placeholder="max steps"
-        type="number"
-      />
+    <form class="filter-form" [formRoot]="filterForm">
+      <mat-form-field>
+        <mat-label>Keywords</mat-label>
+        <input [formField]="filterForm.keywords" matInput type="text" />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Max Ingredients</mat-label>
+        <input
+          [formField]="filterForm.maxIngredientCount"
+          matInput
+          type="number"
+        />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Max Steps</mat-label>
+        <input [formField]="filterForm.maxStepCount" matInput type="number" />
+      </mat-form-field>
     </form>
   `,
   styles: `
-    :host {
-      text-align: center;
+    .filter-form {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      justify-content: center;
+
+      margin-top: 1rem;
     }
   `,
 })
diff --git a/apps/503-recipe-search-testronaut-starter/src/app/recipe/recipe-filter.ng.ts b/apps/503-recipe-search-testronaut-starter/src/app/recipe/recipe-filter.ng.ts
index 7611251..a442f6b 100644
--- a/apps/503-recipe-search-testronaut-starter/src/app/recipe/recipe-filter.ng.ts
+++ b/apps/503-recipe-search-testronaut-starter/src/app/recipe/recipe-filter.ng.ts
@@ -1,5 +1,7 @@
 import { ChangeDetectionStrategy, Component, model } from '@angular/core';
 import { form, FormField, FormRoot } from '@angular/forms/signals';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
 import {
   createDefaultRecipeFilterCriteria,
   RecipeFilterCriteria,
@@ -8,33 +10,35 @@ import {
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'wm-recipe-filter',
-  imports: [FormField, FormRoot],
+  imports: [FormField, FormRoot, MatFormField, MatInput, MatLabel],
   template: `
-    <form [formRoot]="filterForm">
-      <input
-        [formField]="filterForm.keywords"
-        aria-label="Keywords"
-        placeholder="keywords"
-        type="text"
-      />
-      <input
-        [formField]="filterForm.maxIngredientCount"
-        aria-label="Max Ingredients"
-        formControlName="maxIngredientCount"
-        placeholder="max ingredients"
-        type="number"
-      />
-      <input
-        [formField]="filterForm.maxStepCount"
-        aria-label="Max Steps"
-        placeholder="max steps"
-        type="number"
-      />
+    <form class="filter-form" [formRoot]="filterForm">
+      <mat-form-field>
+        <mat-label>Keywords</mat-label>
+        <input [formField]="filterForm.keywords" matInput type="text" />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Max Ingredients</mat-label>
+        <input
+          [formField]="filterForm.maxIngredientCount"
+          matInput
+          type="number"
+        />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Max Steps</mat-label>
+        <input [formField]="filterForm.maxStepCount" matInput type="number" />
+      </mat-form-field>
     </form>
   `,
   styles: `
-    :host {
-      text-align: center;
+    .filter-form {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      justify-content: center;
+
+      margin-top: 1rem;
     }
   `,
 })
diff --git a/apps/504-playwright-visual-regression-testing-solution/src/app/recipe/recipe-filter.ng.ts b/apps/504-playwright-visual-regression-testing-solution/src/app/recipe/recipe-filter.ng.ts
index 7611251..a442f6b 100644
--- a/apps/504-playwright-visual-regression-testing-solution/src/app/recipe/recipe-filter.ng.ts
+++ b/apps/504-playwright-visual-regression-testing-solution/src/app/recipe/recipe-filter.ng.ts
@@ -1,5 +1,7 @@
 import { ChangeDetectionStrategy, Component, model } from '@angular/core';
 import { form, FormField, FormRoot } from '@angular/forms/signals';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
 import {
   createDefaultRecipeFilterCriteria,
   RecipeFilterCriteria,
@@ -8,33 +10,35 @@ import {
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'wm-recipe-filter',
-  imports: [FormField, FormRoot],
+  imports: [FormField, FormRoot, MatFormField, MatInput, MatLabel],
   template: `
-    <form [formRoot]="filterForm">
-      <input
-        [formField]="filterForm.keywords"
-        aria-label="Keywords"
-        placeholder="keywords"
-        type="text"
-      />
-      <input
-        [formField]="filterForm.maxIngredientCount"
-        aria-label="Max Ingredients"
-        formControlName="maxIngredientCount"
-        placeholder="max ingredients"
-        type="number"
-      />
-      <input
-        [formField]="filterForm.maxStepCount"
-        aria-label="Max Steps"
-        placeholder="max steps"
-        type="number"
-      />
+    <form class="filter-form" [formRoot]="filterForm">
+      <mat-form-field>
+        <mat-label>Keywords</mat-label>
+        <input [formField]="filterForm.keywords" matInput type="text" />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Max Ingredients</mat-label>
+        <input
+          [formField]="filterForm.maxIngredientCount"
+          matInput
+          type="number"
+        />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Max Steps</mat-label>
+        <input [formField]="filterForm.maxStepCount" matInput type="number" />
+      </mat-form-field>
     </form>
   `,
   styles: `
-    :host {
-      text-align: center;
+    .filter-form {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      justify-content: center;
+
+      margin-top: 1rem;
     }
   `,
 })
diff --git a/apps/504-playwright-visual-regression-testing-solution/src/app/recipe/recipe-search.pw.ts-snapshots/RecipeSearch-shows-recipes-1-chromium-darwin.png b/apps/504-playwright-visual-regression-testing-solution/src/app/recipe/recipe-search.pw.ts-snapshots/RecipeSearch-shows-recipes-1-chromium-darwin.png
index 2df3f9b..10a17f3 100644
Binary files a/apps/504-playwright-visual-regression-testing-solution/src/app/recipe/recipe-search.pw.ts-snapshots/RecipeSearch-shows-recipes-1-chromium-darwin.png and b/apps/504-playwright-visual-regression-testing-solution/src/app/recipe/recipe-search.pw.ts-snapshots/RecipeSearch-shows-recipes-1-chromium-darwin.png differ
diff --git a/apps/504-playwright-visual-regression-testing-solution/src/app/recipe/recipe-search.pw.ts-snapshots/RecipeSearch-shows-recipes-1-chromium-linux.png b/apps/504-playwright-visual-regression-testing-solution/src/app/recipe/recipe-search.pw.ts-snapshots/RecipeSearch-shows-recipes-1-chromium-linux.png
index dd937c1..510d939 100644
Binary files a/apps/504-playwright-visual-regression-testing-solution/src/app/recipe/recipe-search.pw.ts-snapshots/RecipeSearch-shows-recipes-1-chromium-linux.png and b/apps/504-playwright-visual-regression-testing-solution/src/app/recipe/recipe-search.pw.ts-snapshots/RecipeSearch-shows-recipes-1-chromium-linux.png differ
diff --git a/apps/504-playwright-visual-regression-testing-starter/src/app/recipe/recipe-filter.ng.ts b/apps/504-playwright-visual-regression-testing-starter/src/app/recipe/recipe-filter.ng.ts
index 7611251..a442f6b 100644
--- a/apps/504-playwright-visual-regression-testing-starter/src/app/recipe/recipe-filter.ng.ts
+++ b/apps/504-playwright-visual-regression-testing-starter/src/app/recipe/recipe-filter.ng.ts
@@ -1,5 +1,7 @@
 import { ChangeDetectionStrategy, Component, model } from '@angular/core';
 import { form, FormField, FormRoot } from '@angular/forms/signals';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
 import {
   createDefaultRecipeFilterCriteria,
   RecipeFilterCriteria,
@@ -8,33 +10,35 @@ import {
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'wm-recipe-filter',
-  imports: [FormField, FormRoot],
+  imports: [FormField, FormRoot, MatFormField, MatInput, MatLabel],
   template: `
-    <form [formRoot]="filterForm">
-      <input
-        [formField]="filterForm.keywords"
-        aria-label="Keywords"
-        placeholder="keywords"
-        type="text"
-      />
-      <input
-        [formField]="filterForm.maxIngredientCount"
-        aria-label="Max Ingredients"
-        formControlName="maxIngredientCount"
-        placeholder="max ingredients"
-        type="number"
-      />
-      <input
-        [formField]="filterForm.maxStepCount"
-        aria-label="Max Steps"
-        placeholder="max steps"
-        type="number"
-      />
+    <form class="filter-form" [formRoot]="filterForm">
+      <mat-form-field>
+        <mat-label>Keywords</mat-label>
+        <input [formField]="filterForm.keywords" matInput type="text" />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Max Ingredients</mat-label>
+        <input
+          [formField]="filterForm.maxIngredientCount"
+          matInput
+          type="number"
+        />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Max Steps</mat-label>
+        <input [formField]="filterForm.maxStepCount" matInput type="number" />
+      </mat-form-field>
     </form>
   `,
   styles: `
-    :host {
-      text-align: center;
+    .filter-form {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      justify-content: center;
+
+      margin-top: 1rem;
     }
   `,
 })