diff --git a/projects/demo/src/app/app.routes.ts b/projects/demo/src/app/app.routes.ts
index 0688ff6..8b28ef4 100644
--- a/projects/demo/src/app/app.routes.ts
+++ b/projects/demo/src/app/app.routes.ts
@@ -7,9 +7,4 @@ export const routes: Routes = [
     loadComponent: () =>
       import('./components/demo/demo.component').then((m) => m.DemoComponent),
   },
-  {
-    path: 'test',
-    loadComponent: () =>
-      import('./components/test/test.component').then((m) => m.TestComponent),
-  },
 ];
diff --git a/projects/demo/src/app/components/demo/demo.component.html b/projects/demo/src/app/components/demo/demo.component.html
index 7885a25..ca85ca7 100644
--- a/projects/demo/src/app/components/demo/demo.component.html
+++ b/projects/demo/src/app/components/demo/demo.component.html
@@ -1,28 +1,37 @@
 <mat-toolbar class="ngx-mtp-header mat-elevation-z6" color="primary">
   <div>
     <mat-icon class="logo" svgIcon="logo" />
-    <span class="ngx-mtp-header-title" title="toggle locale">
+    <span class="ngx-mtp-header-title">
       {{ npmPackage }}
     </span>
   </div>
+
   <div>
+    <button mat-icon-button (click)="toggleTheme()">
+      @if (isDark()) {
+        <mat-icon>dark_mode</mat-icon>
+      } @else {
+        <mat-icon>light_mode</mat-icon>
+      }
+    </button>
+
     <button mat-icon-button [matMenuTriggerFor]="themeMenu">
       <mat-icon>format_color_fill</mat-icon>
     </button>
 
     <mat-menu #themeMenu>
-      @for (theme of themes; track theme) {
-        <button mat-menu-item (click)="updateTheme(theme)">
-          @if (selectedTheme.value === theme.value) {
+      @for (color of colors; track color.value) {
+        <button mat-menu-item (click)="updateColor(color.value)">
+          @if (selectedColor() === color.value) {
             <mat-icon color="accent">radio_button_checked </mat-icon>
           } @else {
             <mat-icon>radio_button_unchecked</mat-icon>
           }
-          {{ theme.description }}
+          {{ color.description }}
           <mat-icon
             class="ngx-mtp-theme-example mat-elevation-z1"
             svgIcon="theme"
-            [style.color]="theme.hexColor"
+            [style.color]="color.hexColor"
           />
         </button>
       }
@@ -34,9 +43,10 @@
     </a>
   </div>
 </mat-toolbar>
+
 <div class="ngx-mtp-top">
   <h1 class="mat-h1 ngx-mtp-main-title">Angular Material Timepicker</h1>
-  <p>an Angular material 17+ extension to add time pickers!</p>
+  <p>an Angular material 18+ extension to add time pickers!</p>
   <div class="ngx-mtp-badges">
     <a [href]="npmLink" target="_blank">
       <img
@@ -56,580 +66,102 @@ <h1 class="mat-h1 ngx-mtp-main-title">Angular Material Timepicker</h1>
   <div
     class="ngx-mtp-padding ngx-mtp-d-flex ngx-mtp-align-center ngx-mtp-justify-center"
   >
-    <a mat-raised-button [href]="githubLink">
+    <a mat-flat-button [href]="githubLink">
       <mat-icon svgIcon="github-round" />
       Star on Github
     </a>
   </div>
 </div>
+
 <div class="ngx-mtp-generic-section">
-  <h2 class="mat-h2">Install NgxMatTimepicker</h2>
+  <h2 class="mat-title-large">Install NgxMatTimepicker</h2>
   <div class="terminal">
     <ul>
       <li>npm i {{ npmPackage }}</li>
     </ul>
   </div>
 </div>
+
 <div class="ngx-mtp-container">
   <div class="ngx-mtp-locales">
     <p>Dynamic locale (v >= 12.2.0)</p>
-    <p>
-      @for (locale of myLocaleKeys; track locale; let last = $last) {
-        <button
-          class="locale"
-          [class.active]="locale === currentLocaleKey"
-          (click)="updateLocale(locale)"
-        >
-          {{ locale }}
-        </button>
-        @if (!last) {
-          <span class="separator"> | </span>
+    <div>
+      <mat-button-toggle-group
+        [value]="currentLocaleKey"
+        (valueChange)="updateLocale($event)"
+      >
+        @for (locale of myLocaleKeys; track locale; let last = $last) {
+          <mat-button-toggle [value]="locale">
+            {{ locale }}
+          </mat-button-toggle>
         }
-      }
-    </p>
+      </mat-button-toggle-group>
+    </div>
     <button mat-raised-button color="primary" (click)="updateLocale()">
       Next locale
     </button>
   </div>
-  <form class="demo-form">
-    <div>
-      <h2>Picker with 12h format</h2>
-      <p>
-        using <span class="mat-color-primary">default</span> palette (primary)
-      </p>
-      <app-code-viewer>
-        <div
-          class="example ngx-mtp-d-flex ngx-mtp-align-center ngx-mtp-flex-column"
-        >
-          <mat-form-field>
-            <input
-              matInput
-              name="selected_time_A"
-              [(ngModel)]="selectedTimes.A"
-              [ngxMatTimepicker]="pickerA"
-              placeholder="4:00 PM"
-              readonly
-            />
-            <mat-icon matSuffix (click)="pickerA.open()">watch_later </mat-icon>
-          </mat-form-field>
-          <button
-            mat-raised-button
-            color="primary"
-            (click)="selectedTimes.A = undefined"
-          >
-            clear
-          </button>
-          <ngx-mat-timepicker
-            #pickerA
-            enableKeyboardInput
-            (timeSet)="onTimeSet($event)"
-          />
-        </div>
-        <pre class="language-markup">
-                    <code>
-&lt;mat-form-field&gt;
-    &lt;input matInput
-           name="selected_time_A"
-           [(ngModel)]="selectedTimes.A"
-           [ngxMatTimepicker]="pickerA"
-           placeholder="4:00 PM"
-           readonly /&gt;
-    &lt;mat-icon matSuffix
-              (click)="pickerA.open()"&gt;
-        watch_later
-    &lt;/mat-icon&gt;
-&lt;/mat-form-field&gt;
-&lt;ngx-mat-timepicker #pickerA>&lt;/ngx-mat-timepicker&gt;
-                    </code>
-                </pre>
-      </app-code-viewer>
-    </div>
-    <div>
-      <h2>Picker with 24h format</h2>
-      <p>using <span class="mat-color-accent">accent</span> palette</p>
-      <app-code-viewer>
-        <div
-          class="example ngx-mtp-d-flex ngx-mtp-align-center ngx-mtp-flex-column"
-        >
-          <mat-form-field>
-            <input
-              matInput
-              name="selected_time_B"
-              [format]="24"
-              [(ngModel)]="selectedTimes.B"
-              [ngxMatTimepicker]="pickerB"
-              placeholder="16:00"
-              readonly
-            />
-            <mat-icon matSuffix (click)="pickerB.open()">
-              watch_later
-            </mat-icon>
-          </mat-form-field>
-          <ngx-mat-timepicker color="accent" #pickerB />
-        </div>
-        <pre class="language-markup">
-                <code>
-&lt;mat-form-field&gt;
-    &lt;input matInput
-           name="selected_time_B"
-           format="24"
-           [(ngModel)]="selectedTimes.B"
-           [ngxMatTimepicker]="pickerB"
-           placeholder="16:00"
-           readonly /&gt;
-    &lt;mat-icon matSuffix
-              (click)="pickerB.open()"&gt;
-        watch_later
-    &lt;/mat-icon&gt;
-&lt;/mat-form-field&gt;
-&lt;ngx-mat-timepicker color="accent"
-                    #pickerB>&lt;/ngx-mat-timepicker&gt;
-                </code>
-            </pre>
-      </app-code-viewer>
-    </div>
-    <div>
-      <h2>ngx-mat-timepicker-field</h2>
-      <p>using <span class="mat-color-warn">warn</span> palette</p>
-      <app-code-viewer>
-        <div
-          class="example ngx-mtp-d-flex ngx-mtp-align-center ngx-mtp-flex-column"
-        >
-          <p><strong>format = 12</strong></p>
-          <ngx-mat-timepicker-field
-            color="warn"
-            [format]="12"
-            [max]="maxTime"
-            [min]="minTime"
-            [defaultTime]="'11:11 PM'"
-          />
-          <p><strong>format = 24</strong></p>
-          <ngx-mat-timepicker-field
-            color="warn"
-            [format]="24"
-            [defaultTime]="'23:11'"
-          />
-        </div>
-        <pre class="language-markup">
-                    <code>
-&lt;ngx-mat-timepicker-field color="warn"
-                          [format]="12"
-                          [defaultTime]="'11:11 PM'"&gt;&lt;/ngx-mat-timepicker-field&gt;
- &lt;ngx-mat-timepicker-field color="warn"
-                           [format]="24"
-                           [defaultTime]="'23:11'"&gt;&lt;/ngx-mat-timepicker-field&gt;
-                    </code>
-                </pre>
-      </app-code-viewer>
-    </div>
-    <div>
-      <h2>Input with *ngIf</h2>
-      <p>
-        using <strong>*ngIf</strong> to show/hide only the input, but not the
-        ngx-mat-timepicker
-      </p>
-      <p>
-        <small
-          >Before v 9.0.3, inputs weren't detached when destroyed, so you needed
-          to destroy the ngx-mat-timepicker as well. Not anymore.</small
-        >
-      </p>
-      <app-code-viewer>
-        <div
-          class="example ngx-mtp-d-flex ngx-mtp-align-center ngx-mtp-flex-column"
-        >
-          @if (showInput) {
-            <mat-form-field>
-              <input
-                matInput
-                name="selected_time"
-                [format]="24"
-                [(ngModel)]="selectedTimes.C"
-                [ngxMatTimepicker]="pickerC"
-                placeholder="12:00"
-                readonly
-              />
-              <mat-icon matSuffix (click)="pickerC.open()"
-                >watch_later
-              </mat-icon>
-            </mat-form-field>
-          }
-          <button
-            mat-raised-button
-            class="ngx-mtp-margin-top ngx-mtp-margin-bottom ngx-mtp-d-inline-block"
-            (click)="showInput = !showInput"
-            color="primary"
-          >
-            {{ showInput ? 'Destroy' : 'Restore' }} input
-          </button>
-          <div class="ngx-mtp-box-bordered">
-            <small>ngx-mat-timepicker is here</small>
-            <ngx-mat-timepicker color="accent" #pickerC />
-          </div>
-        </div>
-        <pre class="language-markup">
-                    <code>
-&lt;mat-form-field *ngIf="showInput"&gt;
-    &lt;input matInput
-    name="selected_time"
-    [format]="24"
-    [(ngModel)]="selectedTimes.C"
-    [ngxMatTimepicker]="pickerC"
-    placeholder="12:00"
-    readonly /&gt;
-    &lt;mat-icon matSuffix
-              (click)="pickerC.open()"&gt;
-        watch_later
-    &lt;/mat-icon&gt;
-&lt;/mat-form-field&gt;
-&lt;button mat-raised-button
-        (click)="showInput = !showInput"
-        color="primary"&gt;
-                        {{showInput ? "Destroy" : "Restore"}} input
-&lt;/button&gt;
-&lt;div class="ngx-mtp-box-bordered"&gt;
-    &lt;small&gt;ngx-mat-timepicker is here&lt;/small&gt;
-    &lt;ngx-mat-timepicker color="accent"
-                        #pickerC&gt;&lt;/ngx-mat-timepicker&gt;
-&lt;/div&gt;
-                    </code>
-                </pre>
-      </app-code-viewer>
-    </div>
-    <div>
-      <h2>Append to input</h2>
-      <p>using appendToInput</p>
-      <app-code-viewer>
-        <div
-          class="example ngx-mtp-d-flex ngx-mtp-align-center ngx-mtp-flex-column"
-        >
-          <mat-form-field>
-            <input
-              matInput
-              name="selected_time_d"
-              [format]="24"
-              [(ngModel)]="selectedTimes.D"
-              [ngxMatTimepicker]="pickerD"
-              [defaultValue]="selectedTimes.D"
-              placeholder="23:59"
-              readonly
-            />
-            <mat-icon matSuffix (click)="pickerD.open()">watch_later </mat-icon>
-          </mat-form-field>
-          <div class="ngx-mtp-box-bordered">
-            <small>ngx-mat-timepicker is here</small>
-            <ngx-mat-timepicker color="accent" appendToInput #pickerD />
-          </div>
-        </div>
-        <pre class="language-markup">
-                    <code>
-&lt;mat-form-field&gt;
-    &lt;input matInput
-    [format]="24"
-    [(ngModel)]="selectedTimes.D"
-    [ngxMatTimepicker]="pickerD"
-    placeholder="12:00"
-    readonly /&gt;
-    &lt;mat-icon matSuffix
-              (click)="pickerD.open()"&gt;
-        watch_later
-    &lt;/mat-icon&gt;
-&lt;/mat-form-field&gt;
-&lt;div class="ngx-mtp-box-bordered"&gt;
-    &lt;small&gt;ngx-mat-timepicker is here&lt;/small&gt;
-     &lt;ngx-mat-timepicker color="accent"
-                         appendToInput="true"
-                         #pickerD&gt;&lt;/ngx-mat-timepicker&gt;
-&lt;/div&gt;
-                    </code>
-                </pre>
-      </app-code-viewer>
-    </div>
-    <div>
-      <h2>Open programmatically</h2>
-      <p>use external button to open the picker</p>
-      <app-code-viewer>
-        <div
-          class="example ngx-mtp-d-flex ngx-mtp-align-center ngx-mtp-flex-column"
-        >
-          <mat-form-field>
-            <input
-              matInput
-              name="selected_time_e"
-              [format]="24"
-              [(ngModel)]="selectedTimes.E"
-              [ngxMatTimepicker]="pickerE"
-              placeholder="12:00"
-              readonly
-            />
-            <mat-icon matSuffix (click)="pickerE.open()">watch_later </mat-icon>
-          </mat-form-field>
-          <button
-            mat-raised-button
-            class="ngx-mtp-margin-top ngx-mtp-margin-bottom ngx-mtp-d-inline-block"
-            (click)="pickerE.open()"
-            color="primary"
-          >
-            Open picker
-          </button>
-          <ngx-mat-timepicker color="accent" #pickerE />
-        </div>
-        <pre class="language-markup">
-                    <code>
-&lt;mat-form-field&gt;
-    &lt;input matInput
-    [format]="24"
-    [(ngModel)]="selectedTimes.E"
-    [ngxMatTimepicker]="pickerE"
-    placeholder="12:00"
-    readonly /&gt;
-    &lt;mat-icon matSuffix
-              (click)="pickerE.open()"&gt;
-        watch_later
-    &lt;/mat-icon&gt;
-&lt;/mat-form-field&gt;
-&lt;button mat-raised-button
-		class="ngx-mtp-margin-top ngx-mtp-margin-bottom ngx-mtp-d-inline-block"
-		(click)="pickerE.open()"
-		color="primary"&gt;
-    Open picker
-&lt;/button&gt;
- &lt;ngx-mat-timepicker color="accent"
-					 #pickerE&gt;&lt;/ngx-mat-timepicker&gt;
-                    </code>
-                </pre>
-      </app-code-viewer>
-    </div>
-    <div>
-      <h2>ngx-mat-timepicker-toggle</h2>
-      <p>
-        use component in material stile (instead of using mat-icon + matSuffix)
-      </p>
-      <app-code-viewer>
-        <div
-          class="example ngx-mtp-d-flex ngx-mtp-align-center ngx-mtp-flex-column"
-        >
-          <mat-form-field class="ngx-mtp-margin-bottom">
-            <mat-label>Choose a date</mat-label>
-            <input matInput [matDatepicker]="datePicker" />
-            <mat-datepicker-toggle matSuffix [for]="datePicker" />
-            <mat-datepicker #datePicker />
-            <mat-hint>MM/DD/YYYY</mat-hint>
-          </mat-form-field>
-          <mat-form-field>
-            <input
-              matInput
-              name="selected_time_f"
-              [format]="24"
-              [(ngModel)]="selectedTimes.F"
-              [ngxMatTimepicker]="pickerF"
-              placeholder="12:00"
-              readonly
-            />
-            <ngx-mat-timepicker-toggle matSuffix />
-          </mat-form-field>
-          <button
-            mat-raised-button
-            class="ngx-mtp-margin-top ngx-mtp-margin-bottom ngx-mtp-d-inline-block"
-            (click)="pickerF.open()"
-            color="primary"
-          >
-            Open picker
-          </button>
-          <ngx-mat-timepicker color="accent" #pickerF />
-        </div>
-        <pre class="language-markup">
-                    <code>
-&lt;mat-form-field&gt;
-    &lt;input matInput
-    [format]="24"
-    [(ngModel)]="selectedTimes.F"
-    [ngxMatTimepicker]="pickerF"
-    placeholder="12:00"
-    readonly /&gt;
-    &lt;ngx-mat-timepicker-toggle&gt;&lt;/ngx-mat-timepicker-toggle&gt;
-&lt;/mat-form-field&gt;
-&lt;button mat-raised-button
-		class="ngx-mtp-margin-top ngx-mtp-margin-bottom ngx-mtp-d-inline-block"
-		(click)="pickerF.open()"
-		color="primary"&gt;
-    Open picker
-&lt;/button&gt;
- &lt;ngx-mat-timepicker color="accent"
-					 #pickerF&gt;&lt;/ngx-mat-timepicker&gt;
-                    </code>
-                </pre>
-      </app-code-viewer>
-    </div>
-    <div>
-      <h2>Min and Max validation</h2>
-      <p>add config to have min and/or max hour</p>
-      <app-code-viewer>
-        <div
-          class="example ngx-mtp-d-flex ngx-mtp-align-center ngx-mtp-flex-column"
-        >
-          <mat-form-field>
-            <input
-              matInput
-              name="selected_time_g"
-              [format]="12"
-              [max]="maxTime"
-              [min]="minTime"
-              [(ngModel)]="selectedTimes.G"
-              [ngxMatTimepicker]="pickerG"
-              placeholder="12:00"
-              readonly
-            />
-            <ngx-mat-timepicker-toggle [for]="pickerG" matSuffix />
-          </mat-form-field>
-          <button
-            mat-raised-button
-            class="ngx-mtp-margin-top ngx-mtp-margin-bottom ngx-mtp-d-inline-block"
-            (click)="pickerG.open()"
-            color="primary"
-          >
-            Open picker
-          </button>
-          <button
-            mat-raised-button
-            class="ngx-mtp-margin-top ngx-mtp-margin-bottom ngx-mtp-d-inline-block"
-            (click)="selectedTimes.G = '12:00'"
-            color="primary"
-          >
-            Invalidate
-          </button>
-          <ngx-mat-timepicker color="accent" #pickerG />
-        </div>
-        <pre class="language-markup">
-                    <code>
-&lt;mat-form-field&gt;
-	&lt;input matInput
-		   name="selected_time_g"
-		   [format]="12"
-		   [max]="maxTime"
-		   [min]="minTime"
-		   [(ngModel)]="selectedTimes.G"
-		   [ngxMatTimepicker]="pickerG"
-		   placeholder="12:00"
-		   readonly /&gt;
-	&lt;ngx-mat-timepicker-toggle matSuffix&gt;&lt;/ngx-mat-timepicker-toggle&gt;
-&lt;/mat-form-field&gt;
-&lt;button mat-raised-button
-		class="ngx-mtp-margin-top ngx-mtp-margin-bottom ngx-mtp-d-inline-block"
-		(click)="pickerG.open()"
-		color="primary"&gt;
-	Open picker
-&lt;/button&gt;
-&lt;button mat-raised-button
-		class="ngx-mtp-margin-top ngx-mtp-margin-bottom ngx-mtp-d-inline-block"
-		(click)="selectedTimes.G = '12:00'"
-		color="primary"&gt;
-	Invalidate
-&lt;/button&gt;
-&lt;ngx-mat-timepicker color="accent"
-			  #pickerG&gt;&lt;/ngx-mat-timepicker&gt;
-                    </code>
-                </pre>
-      </app-code-viewer>
-    </div>
-    <div>
-      <h2>Allow input completition</h2>
-      <p>Don't link input to picker</p>
-      <app-code-viewer>
-        <div
-          class="example ngx-mtp-d-flex ngx-mtp-align-center ngx-mtp-flex-column"
-        >
-          <mat-form-field>
-            <input
-              matInput
-              [pattern]="timeRegex"
-              name="selected_time_h"
-              #inputModel="ngModel"
-              [(ngModel)]="selectedTimes.H"
-              (blur)="
-                inputModel.valid &&
-                  selectedTimeFreeInputChanged(selectedTimes.H)
-              "
-              placeholder="12:00"
-            />
-            @if (inputModel.hasError('pattern')) {
-              <mat-error>Expected format: H:mm AM|PM</mat-error>
-            }
-          </mat-form-field>
-          <button
-            mat-raised-button
-            class="ngx-mtp-margin-top ngx-mtp-margin-bottom ngx-mtp-d-inline-block"
-            (click)="pickerH.open()"
-            color="primary"
-          >
-            Open picker
-          </button>
-          <ngx-mat-timepicker
-            (timeSet)="updateTime($event, 'selectedTimeFreeInput')"
-            #pickerH
-          />
-        </div>
-        <pre class="language-markup">
-                    <code>
-&lt;mat-form-field&gt;
-	&lt;input matInput
-	   [pattern]="timeRegex"
-	   name="selected_time_h"
-	   #inputModel="ngModel"
-	   [(ngModel)]="selectedTimeFreeInput"
-	   (blur)="inputModel.valid && selectedTimeFreeInputChanged(selectedTimeFreeInput)"
-	   placeholder="12:00" /&gt;
-	&lt;mat-error *ngIf="inputModel.hasError('pattern')"&gt;Expected format: H:mm AM|PM&lt;/mat-error&gt;
-&lt;/mat-form-field&gt;
-&lt;button mat-raised-button
-	class="ngx-mtp-margin-top ngx-mtp-margin-bottom ngx-mtp-d-inline-block"
-	(click)="pickerH.open()"
-	color="primary"&gt;
-	Open picker
-&lt;/button&gt;
-&lt;ngx-mat-timepicker (timeSet)="updateTime($event, 'selectedTimeFreeInput')"
-	      			#pickerH&gt;&lt;/ngx-mat-timepicker&gt;
-                    </code>
-                </pre>
-      </app-code-viewer>
-    </div>
-  </form>
-</div>
-<div class="ngx-mtp-generic-section">
-  <svg
-    fill="none"
-    height="50"
-    stroke="currentColor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    viewBox="0 0 24 24"
-    width="50"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
-    ></path>
-  </svg>
-  <h2 class="mat-h2">Free and open source</h2>
 </div>
-<div class="ngx-mtp-generic-section">
-  <svg
-    fill="none"
-    height="50"
-    stroke="currentColor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    viewBox="0 0 24 24"
-    width="50"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <polyline points="9 18 15 12 9 6"></polyline>
-  </svg>
-  <h2 class="mat-h2">Ready to start?</h2>
-  <p>Go to the <a class="mat-color-primary" [href]="githubLink">docs</a>!</p>
+
+<div class="ngx-mtp-container">
+  <h2>Examples:</h2>
+  <div class="examples">
+    <mat-card>
+      <mat-card-content>
+        <app-example-format-12 />
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card>
+      <mat-card-content>
+        <app-example-format-24 />
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card>
+      <mat-card-content>
+        <app-example-field />
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card>
+      <mat-card-content>
+        <app-example-append />
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card>
+      <mat-card-content>
+        <app-example-picker-open />
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card>
+      <mat-card-content>
+        <app-example-picker-toggle />
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card>
+      <mat-card-content>
+        <app-example-validation />
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card>
+      <mat-card-content>
+        <app-example-completion />
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card>
+      <mat-card-content>
+        <app-example-dialog />
+      </mat-card-content>
+    </mat-card>
+  </div>
 </div>
+
 <footer>
   <p>
     © <span>{{ year }}</span> MIT License
diff --git a/projects/demo/src/app/components/demo/demo.component.scss b/projects/demo/src/app/components/demo/demo.component.scss
index f42d17b..d2ef718 100644
--- a/projects/demo/src/app/components/demo/demo.component.scss
+++ b/projects/demo/src/app/components/demo/demo.component.scss
@@ -136,40 +136,26 @@
   }
 }
 
-.demo-form {
-  padding: 16px;
-  box-sizing: border-box;
-  display: flex;
-  flex-wrap: wrap;
+.examples {
   width: 100%;
-
-  > * {
-    box-sizing: border-box;
-    margin: 8px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-
-    @include respond-above(xs) {
-      width: calc(50% - 16px);
-    }
-
-    @include respond-below(sm) {
-      width: calc(100% - 16px);
-    }
+  gap: 1rem;
+  display: grid;
+  grid-auto-flow: row;
+}
+@media (min-width: 640px) {
+  .examples {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-
-  h2 {
-    margin-bottom: 0;
+}
+@media (min-width: 1024px) {
+  .examples {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
 
 footer {
   text-align: center;
-  //background-color: #1c1428;
   padding: 25px 0;
-  //color: #9479b9;
   width: 100%;
 }
 
diff --git a/projects/demo/src/app/components/demo/demo.component.ts b/projects/demo/src/app/components/demo/demo.component.ts
index 71a7e2d..194ed84 100644
--- a/projects/demo/src/app/components/demo/demo.component.ts
+++ b/projects/demo/src/app/components/demo/demo.component.ts
@@ -1,29 +1,30 @@
-import { Component, OnInit, ViewChild, inject } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { MatInput } from '@angular/material/input';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatButtonModule } from '@angular/material/button';
+import { MatCard, MatCardContent } from '@angular/material/card';
+import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import { MatAnchor, MatButton, MatIconButton } from '@angular/material/button';
+import {
+  MatButtonToggle,
+  MatButtonToggleGroup,
+} from '@angular/material/button-toggle';
 import { MatToolbar } from '@angular/material/toolbar';
 import { MatIcon } from '@angular/material/icon';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { DateTime } from 'luxon';
 
-import {
-  NgxMatTimepickerComponent,
-  NgxMatTimepickerLocaleService,
-  NgxMatTimepickerToggleComponent,
-  NgxMatTimepickerFieldComponent,
-  NgxMatTimepickerDirective,
-} from '@alexfriesen/ngx-mat-timepicker';
+import { NgxMatTimepickerLocaleService } from '@alexfriesen/ngx-mat-timepicker';
 
-import { CodeViewerComponent } from '../code-viewer/code-viewer.component';
+import { ExampleFormat12Component } from '../../examples/format-12/format-12.component';
+import { ExampleFormat24Component } from '../../examples/format-24/format-24.component';
+import { ExampleAppendComponent } from '../../examples/append/append.component';
+import { ExamplePickerOpenComponent } from '../../examples/picker-open/picker-open.component';
+import { ExamplePickerToggleComponent } from '../../examples/picker-toggle/picker-toggle.component';
+import { ExampleFieldComponent } from '../../examples/field/field.component';
+import { ExampleValidationComponent } from '../../examples/validation/validation.component';
+import { ExampleCompletionComponent } from '../../examples/completion/completion.component';
+import { ExampleDialogComponent } from '../../examples/dialog/dialog.component';
 
 interface NgxMatTimepickerTheme {
   description: string;
   value: string;
-  dark: boolean;
   hexColor: string;
 }
 
@@ -33,25 +34,35 @@ interface NgxMatTimepickerTheme {
   styleUrls: ['demo.component.scss'],
   standalone: true,
   imports: [
-    FormsModule,
-    MatButtonModule,
-    MatDatepickerModule,
-    MatFormFieldModule,
+    MatAnchor,
+    MatButton,
+    MatIconButton,
     MatIcon,
-    MatInput,
-    MatMenuModule,
     MatToolbar,
-    NgxMatTimepickerDirective,
-    NgxMatTimepickerComponent,
-    NgxMatTimepickerFieldComponent,
-    NgxMatTimepickerToggleComponent,
-    CodeViewerComponent,
+    MatMenu,
+    MatMenuItem,
+    MatMenuTrigger,
+    MatCard,
+    MatCardContent,
+    MatButtonToggleGroup,
+    MatButtonToggle,
+
+    ExampleFormat12Component,
+    ExampleFormat24Component,
+    ExampleAppendComponent,
+    ExamplePickerOpenComponent,
+    ExamplePickerToggleComponent,
+    ExampleFieldComponent,
+    ExampleValidationComponent,
+    ExampleCompletionComponent,
+    ExampleDialogComponent,
   ],
 })
-export class DemoComponent implements OnInit {
+export class DemoComponent {
   private readonly localeOverrideSrv = inject(NgxMatTimepickerLocaleService);
   private readonly document = inject(DOCUMENT, { optional: true });
 
+  private _nextLocale = 0;
   currentLocale = this.localeOverrideSrv.locale;
 
   get currentLocaleKey(): string {
@@ -62,13 +73,6 @@ export class DemoComponent implements OnInit {
   npmLink = `https://www.npmjs.com/package/${this.npmPackage}`;
   githubLink = `https://github.com/alexfriesen/ngx-mat-timepicker`;
 
-  maxTime = DateTime.local().startOf('day').set({
-    hour: 16,
-    minute: 20,
-  });
-
-  minTime = this.maxTime.set({ hour: 14 });
-
   myLocaleKeys = ['en', 'it', 'es', 'fr'];
   myLocalesMaps: Record<string, string> = {
     en: 'en-GB',
@@ -80,43 +84,15 @@ export class DemoComponent implements OnInit {
     Object.entries(this.myLocalesMaps).map((a) => a.reverse()),
   );
 
-  readonly themes: NgxMatTimepickerTheme[] = [
-    { value: '', description: 'Light', hexColor: '#fff', dark: false },
-    { value: 'dark-theme', description: 'Dark', hexColor: '#444', dark: true },
+  readonly colors: NgxMatTimepickerTheme[] = [
+    { value: 'default', description: 'Red', hexColor: '#f44336' },
+    { value: 'blue', description: 'Blue', hexColor: '#2196f3' },
+    { value: 'orange', description: 'Orange', hexColor: '#ff9800' },
   ];
-  @ViewChild('pickerH') pickerFreeInput: NgxMatTimepickerComponent;
-  selectedTheme: NgxMatTimepickerTheme;
-
-  selectedTimes: Record<'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H', string> =
-    {
-      A: undefined,
-      B: undefined,
-      C: undefined,
-      D: undefined,
-      E: undefined,
-      F: undefined,
-      G: undefined,
-      H: undefined,
-    };
+  readonly selectedColor = signal('default');
+  readonly isDark = signal(false);
 
-  showInput = true;
-  timeRegex = /([0-9]|1\d):[0-5]\d (AM|PM)/;
-  year = new Date().getFullYear();
-
-  private _nextLocale = 0;
-
-  ngOnInit(): void {
-    this.selectedTheme = this.themes[0];
-  }
-
-  onTimeSet($event: string): void {
-    console.info('TIME UPDATED', $event);
-  }
-
-  selectedTimeFreeInputChanged($event: string): void {
-    console.info('TIME CHANGED');
-    this.pickerFreeInput.updateTime($event);
-  }
+  readonly year = new Date().getFullYear();
 
   updateLocale(localeKey?: string): void {
     if (localeKey) {
@@ -130,14 +106,15 @@ export class DemoComponent implements OnInit {
     }
   }
 
-  updateTheme(theme: NgxMatTimepickerTheme): void {
-    this.selectedTheme = theme;
-    this.document?.body.classList.toggle('dark-theme', !!theme.value);
+  toggleTheme(): void {
+    this.isDark.set(!this.isDark());
+    this.document?.body.classList.toggle('dark', this.isDark());
   }
 
-  updateTime($event: string, targetProp: string): void {
-    console.info('TIME SET', $event);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (this as any)[targetProp] = $event;
+  updateColor(value: string): void {
+    this.selectedColor.set(value);
+    for (const color of this.colors) {
+      this.document?.body.classList.toggle(color.value, color.value === value);
+    }
   }
 }
diff --git a/projects/demo/src/app/components/test/test.component.html b/projects/demo/src/app/components/test/test.component.html
deleted file mode 100644
index b0c8855..0000000
--- a/projects/demo/src/app/components/test/test.component.html
+++ /dev/null
@@ -1,102 +0,0 @@
-<mat-toolbar class="ngx-mtp-header mat-elevation-z6" color="primary">
-  <div>
-    <img
-      class="ngx-mtp-ng-logo"
-      src="assets/angular-white-transparent.svg"
-      alt=""
-    />
-    <span class="ngx-mtp-header-title" title="toggle locale">
-      ngx-mat-timepicker
-    </span>
-  </div>
-  <div></div>
-</mat-toolbar>
-<div class="ngx-mtp-container">
-  <div class="ngx-mtp-locales">
-    <p>Dynamic locale (v >= 12.2.0)</p>
-    <p>
-      @for (locale of myLocaleKeys; track locale; let last = $last) {
-        <button
-          class="locale"
-          [class.active]="locale === currentLocaleKey"
-          (click)="updateLocale(locale)"
-        >
-          {{ locale }}
-        </button>
-
-        @if (!last) {
-          <span class="separator"> | </span>
-        }
-      }
-    </p>
-    <button mat-raised-button color="primary" (click)="updateLocale()">
-      Next locale
-    </button>
-  </div>
-  <form class="demo-form">
-    @if (true) {
-      <div>
-        <h2>Picker with 12h format</h2>
-        <p>
-          using <span class="mat-color-primary">default</span> palette (primary)
-        </p>
-        <app-code-viewer>
-          <div
-            class="example ngx-mtp-d-flex ngx-mtp-align-center ngx-mtp-flex-column"
-          >
-            <!--					<mat-form-field appearance="outline">-->
-            <!--						<mat-label>Enter Time</mat-label>-->
-            <!--						<input type="text"-->
-            <!--							   matInput-->
-            <!--							   [ngxMatTimepicker]="timepicker"-->
-            <!--							   [format]="24"-->
-            <!--							   [disableClick]="true"-->
-            <!--							   [formControl]="formControlItem" />-->
-
-            <!--						<mat-icon-->
-            <!--								matPrefix-->
-            <!--								[style.visibility]="formControlItem.value && !formControlItem.disabled ? 'visible' : 'hidden'"-->
-            <!--								(click)="onClear()">-->
-            <!--							close-->
-            <!--						</mat-icon>-->
-
-            <!--						<mat-icon-->
-            <!--								matSuffix-->
-            <!--								*ngIf="!formControlItem.disabled"-->
-            <!--								(click)="openFromIcon(timepicker)">schedule-->
-            <!--						</mat-icon>-->
-
-            <!--						<mat-error *ngIf="formControlItem.hasError('pattern')">Invalid format!</mat-error>-->
-            <!--					</mat-form-field>-->
-
-            <!--					<ngx-mat-timepicker-->
-            <!--                        #timepicker-->
-            <!--						[enableKeyboardInput]="true"></ngx-mat-timepicker>-->
-            <button (click)="openDialog()" mat-button color="primary">
-              OPEN DIALOG
-            </button>
-
-            <ngx-mat-timepicker-field
-              color="warn"
-              [format]="24"
-              [defaultTime]="time"
-              (timeChanged)="time = $event"
-              [controlOnly]="true"
-            ></ngx-mat-timepicker-field>
-            <p>{{ time }}</p>
-          </div>
-          <pre class="language-markup">
-                    <code>
-
-                    </code>
-                </pre>
-        </app-code-viewer>
-      </div>
-    }
-  </form>
-</div>
-<footer>
-  <p>
-    © <span>{{ year }}</span> MIT License
-  </p>
-</footer>
diff --git a/projects/demo/src/app/components/test/test.component.scss b/projects/demo/src/app/components/test/test.component.scss
deleted file mode 100644
index 86849a4..0000000
--- a/projects/demo/src/app/components/test/test.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "../demo/demo.component";
diff --git a/projects/demo/src/app/components/test/test.component.ts b/projects/demo/src/app/components/test/test.component.ts
deleted file mode 100644
index 1d25bf1..0000000
--- a/projects/demo/src/app/components/test/test.component.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { Component, ViewChild, inject } from '@angular/core';
-import { FormControl, Validators, FormsModule } from '@angular/forms';
-import { MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { MatInputModule } from '@angular/material/input';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatButtonModule } from '@angular/material/button';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatIconModule } from '@angular/material/icon';
-
-import {
-  NgxMatTimepickerComponent,
-  NgxMatTimepickerDirective,
-  NgxMatTimepickerFieldComponent,
-} from '@alexfriesen/ngx-mat-timepicker';
-
-import { DemoComponent } from '../demo/demo.component';
-import { CodeViewerComponent } from '../code-viewer/code-viewer.component';
-
-@Component({
-  selector: 'app-dialog',
-  template: `
-    <div mat-dialog-title>Dialog Title</div>
-    <div mat-dialog-content>
-      <mat-form-field class="time-input-width">
-        <mat-label>Time</mat-label>
-        <input
-          matInput
-          #foo="matInput"
-          name="selected_time_a"
-          [format]="24"
-          [(ngModel)]="date"
-          [ngxMatTimepicker]="pickerA"
-          readonly
-        />
-        <mat-icon matSuffix (click)="pickerA.open()">watch_later </mat-icon>
-      </mat-form-field>
-      <p>FIELD FOCUSED: {{ foo.focused }}</p>
-      <ngx-mat-timepicker appendToInput="true" #pickerA></ngx-mat-timepicker>
-    </div>
-  `,
-  standalone: true,
-  imports: [
-    MatDialogModule,
-    MatFormFieldModule,
-    MatInputModule,
-    FormsModule,
-    NgxMatTimepickerDirective,
-    MatIconModule,
-    NgxMatTimepickerComponent,
-  ],
-})
-export class NgxMatTimepickerTestDialogComponent {
-  date = '2:00';
-}
-
-@Component({
-  selector: 'app-test',
-  templateUrl: 'test.component.html',
-  styleUrls: ['test.component.scss'],
-  standalone: true,
-  imports: [
-    MatToolbarModule,
-    MatButtonModule,
-    FormsModule,
-    CodeViewerComponent,
-    NgxMatTimepickerFieldComponent,
-  ],
-})
-export class TestComponent extends DemoComponent {
-  private _matDialog = inject(MatDialog);
-
-  formControlItem = new FormControl('', [
-    Validators.pattern(/([0-9]|[1-2]\d):[0-5]\d/),
-  ]);
-
-  time = '00:00';
-
-  @ViewChild('timepicker')
-  timepicker: NgxMatTimepickerComponent;
-
-  onClear() {
-    this.formControlItem.setValue(null);
-  }
-
-  onFieldBlur(): void {
-    if (this.formControlItem.valid) {
-      this.pickerFreeInput.updateTime(this.formControlItem.value);
-    }
-  }
-
-  openDialog() {
-    this._matDialog.open(NgxMatTimepickerTestDialogComponent, {
-      width: '300px',
-    });
-  }
-
-  openFromIcon(timepicker: { open: () => void }) {
-    if (!this.formControlItem.disabled) {
-      timepicker.open();
-    }
-  }
-}
diff --git a/projects/demo/src/app/examples/append/append.component.html b/projects/demo/src/app/examples/append/append.component.html
new file mode 100644
index 0000000..53c2cd4
--- /dev/null
+++ b/projects/demo/src/app/examples/append/append.component.html
@@ -0,0 +1,24 @@
+<div>
+  <h3>Append to input</h3>
+  <p>using appendToInput</p>
+
+  <div class="example ngx-mtp-d-flex ngx-mtp-align-center ngx-mtp-flex-column">
+    <mat-form-field>
+      <input
+        matInput
+        name="selected_time_d"
+        [format]="24"
+        [(ngModel)]="selectedTime"
+        [ngxMatTimepicker]="pickerD"
+        [defaultValue]="selectedTime"
+        placeholder="23:59"
+        readonly
+      />
+      <mat-icon matSuffix (click)="pickerD.open()">watch_later </mat-icon>
+    </mat-form-field>
+    <div class="ngx-mtp-box-bordered">
+      <small>ngx-mat-timepicker is here</small>
+      <ngx-mat-timepicker color="accent" appendToInput #pickerD />
+    </div>
+  </div>
+</div>
diff --git a/projects/demo/src/app/examples/append/append.component.scss b/projects/demo/src/app/examples/append/append.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/demo/src/app/examples/append/append.component.ts b/projects/demo/src/app/examples/append/append.component.ts
new file mode 100644
index 0000000..bb89420
--- /dev/null
+++ b/projects/demo/src/app/examples/append/append.component.ts
@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatInput } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIcon } from '@angular/material/icon';
+import { DateTime } from 'luxon';
+
+import {
+  NgxMatTimepickerComponent,
+  NgxMatTimepickerToggleComponent,
+  NgxMatTimepickerFieldComponent,
+  NgxMatTimepickerDirective,
+} from '@alexfriesen/ngx-mat-timepicker';
+
+@Component({
+  selector: 'app-example-append',
+  templateUrl: 'append.component.html',
+  styleUrls: ['append.component.scss'],
+  standalone: true,
+  imports: [
+    FormsModule,
+    MatFormFieldModule,
+    MatIcon,
+    MatInput,
+    NgxMatTimepickerDirective,
+    NgxMatTimepickerComponent,
+    NgxMatTimepickerFieldComponent,
+    NgxMatTimepickerToggleComponent,
+  ],
+})
+export class ExampleAppendComponent {
+  maxTime = DateTime.local().startOf('day').set({
+    hour: 16,
+    minute: 20,
+  });
+
+  minTime = this.maxTime.set({ hour: 14 });
+
+  selectedTime: string;
+}
diff --git a/projects/demo/src/app/examples/completion/completion.component.html b/projects/demo/src/app/examples/completion/completion.component.html
new file mode 100644
index 0000000..e103e1b
--- /dev/null
+++ b/projects/demo/src/app/examples/completion/completion.component.html
@@ -0,0 +1,34 @@
+<div>
+  <h3>Allow input completition</h3>
+  <p>Don't link input to picker</p>
+  <div class="example ngx-mtp-d-flex ngx-mtp-align-center ngx-mtp-flex-column">
+    <mat-form-field>
+      <input
+        matInput
+        [pattern]="timeRegex"
+        name="selected_time_h"
+        #inputModel="ngModel"
+        [(ngModel)]="selectedTime"
+        (blur)="
+          inputModel.valid && selectedTimeFreeInputChanged(selectedTime)
+        "
+        placeholder="12:00"
+      />
+      @if (inputModel.hasError('pattern')) {
+        <mat-error>Expected format: H:mm AM|PM</mat-error>
+      }
+    </mat-form-field>
+    <button
+      mat-raised-button
+      class="ngx-mtp-margin-top ngx-mtp-margin-bottom ngx-mtp-d-inline-block"
+      (click)="pickerH.open()"
+      color="primary"
+    >
+      Open picker
+    </button>
+    <ngx-mat-timepicker
+      (timeSet)="updateTime($event, 'selectedTimeFreeInput')"
+      #pickerH
+    />
+  </div>
+</div>
diff --git a/projects/demo/src/app/examples/completion/completion.component.scss b/projects/demo/src/app/examples/completion/completion.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/demo/src/app/examples/completion/completion.component.ts b/projects/demo/src/app/examples/completion/completion.component.ts
new file mode 100644
index 0000000..cf29a0d
--- /dev/null
+++ b/projects/demo/src/app/examples/completion/completion.component.ts
@@ -0,0 +1,58 @@
+import { Component, viewChild } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatInput } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { DateTime } from 'luxon';
+
+import {
+  NgxMatTimepickerComponent,
+  NgxMatTimepickerToggleComponent,
+  NgxMatTimepickerFieldComponent,
+  NgxMatTimepickerDirective,
+} from '@alexfriesen/ngx-mat-timepicker';
+
+@Component({
+  selector: 'app-example-completion',
+  templateUrl: 'completion.component.html',
+  styleUrls: ['completion.component.scss'],
+  standalone: true,
+  imports: [
+    FormsModule,
+    MatButton,
+    MatFormFieldModule,
+    MatIcon,
+    MatInput,
+    NgxMatTimepickerDirective,
+    NgxMatTimepickerComponent,
+    NgxMatTimepickerFieldComponent,
+    NgxMatTimepickerToggleComponent,
+  ],
+})
+export class ExampleCompletionComponent {
+  maxTime = DateTime.local().startOf('day').set({
+    hour: 16,
+    minute: 20,
+  });
+
+  minTime = this.maxTime.set({ hour: 14 });
+
+  readonly pickerFreeInput = viewChild<NgxMatTimepickerComponent>('pickerH');
+
+  selectedTime: string;
+
+  showInput = true;
+  timeRegex = /([0-9]|1\d):[0-5]\d (AM|PM)/;
+
+  selectedTimeFreeInputChanged($event: string): void {
+    console.info('TIME CHANGED');
+    this.pickerFreeInput().updateTime($event);
+  }
+
+  updateTime($event: string, targetProp: string): void {
+    console.info('TIME SET', $event);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (this as any)[targetProp] = $event;
+  }
+}
diff --git a/projects/demo/src/app/examples/dialog/dialog.component.html b/projects/demo/src/app/examples/dialog/dialog.component.html
new file mode 100644
index 0000000..69b1b6e
--- /dev/null
+++ b/projects/demo/src/app/examples/dialog/dialog.component.html
@@ -0,0 +1,10 @@
+<div>
+  <h3>Picker in a Dialog</h3>
+  <p>using <span class="mat-color-primary">default</span> palette (primary)</p>
+
+  <div class="example ngx-mtp-d-flex ngx-mtp-align-center ngx-mtp-flex-column">
+    <button mat-raised-button color="primary" (click)="openDialog()">
+      OPEN DIALOG
+    </button>
+  </div>
+</div>
diff --git a/projects/demo/src/app/examples/dialog/dialog.component.scss b/projects/demo/src/app/examples/dialog/dialog.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/demo/src/app/examples/dialog/dialog.component.ts b/projects/demo/src/app/examples/dialog/dialog.component.ts
new file mode 100644
index 0000000..567aa5e
--- /dev/null
+++ b/projects/demo/src/app/examples/dialog/dialog.component.ts
@@ -0,0 +1,79 @@
+import { Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  MatDialog,
+  MatDialogContent,
+  MatDialogTitle,
+} from '@angular/material/dialog';
+import { MatInput } from '@angular/material/input';
+import {
+  MatFormField,
+  MatLabel,
+  MatSuffix,
+} from '@angular/material/form-field';
+import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+
+import {
+  NgxMatTimepickerComponent,
+  NgxMatTimepickerDirective,
+} from '@alexfriesen/ngx-mat-timepicker';
+
+@Component({
+  selector: 'app-example-dialog-inner',
+  template: `
+    <div mat-dialog-title>Dialog Title</div>
+    <div mat-dialog-content>
+      <mat-form-field class="time-input-width">
+        <mat-label>Time</mat-label>
+        <input
+          matInput
+          #foo="matInput"
+          name="selected_time_a"
+          [format]="24"
+          [(ngModel)]="date"
+          [ngxMatTimepicker]="pickerA"
+          readonly
+        />
+        <mat-icon matSuffix (click)="pickerA.open()">watch_later </mat-icon>
+      </mat-form-field>
+      <p>FIELD FOCUSED: {{ foo.focused }}</p>
+      <ngx-mat-timepicker appendToInput="true" #pickerA></ngx-mat-timepicker>
+    </div>
+  `,
+  standalone: true,
+  imports: [
+    FormsModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatFormField,
+    MatInput,
+    MatLabel,
+    MatSuffix,
+    MatIcon,
+    NgxMatTimepickerDirective,
+    NgxMatTimepickerComponent,
+  ],
+})
+export class NgxMatTimepickerTestDialogComponent {
+  date = '2:00';
+}
+
+@Component({
+  selector: 'app-example-dialog',
+  templateUrl: 'dialog.component.html',
+  styleUrls: ['dialog.component.scss'],
+  standalone: true,
+  imports: [MatButton],
+})
+export class ExampleDialogComponent {
+  private readonly matDialog = inject(MatDialog);
+
+  time = '00:00';
+
+  openDialog() {
+    this.matDialog.open(NgxMatTimepickerTestDialogComponent, {
+      width: '300px',
+    });
+  }
+}
diff --git a/projects/demo/src/app/examples/field/field.component.html b/projects/demo/src/app/examples/field/field.component.html
new file mode 100644
index 0000000..f042d77
--- /dev/null
+++ b/projects/demo/src/app/examples/field/field.component.html
@@ -0,0 +1,21 @@
+<div>
+  <h3>ngx-mat-timepicker-field</h3>
+  <p>using <span class="mat-color-warn">warn</span> palette</p>
+
+  <div class="example ngx-mtp-d-flex ngx-mtp-align-center ngx-mtp-flex-column">
+    <p><strong>format = 12</strong></p>
+    <ngx-mat-timepicker-field
+      color="warn"
+      [format]="12"
+      [max]="maxTime"
+      [min]="minTime"
+      [defaultTime]="'11:11 PM'"
+    />
+    <p><strong>format = 24</strong></p>
+    <ngx-mat-timepicker-field
+      color="warn"
+      [format]="24"
+      [defaultTime]="'23:11'"
+    />
+  </div>
+</div>
diff --git a/projects/demo/src/app/examples/field/field.component.scss b/projects/demo/src/app/examples/field/field.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/demo/src/app/examples/field/field.component.ts b/projects/demo/src/app/examples/field/field.component.ts
new file mode 100644
index 0000000..1b490a9
--- /dev/null
+++ b/projects/demo/src/app/examples/field/field.component.ts
@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatInput } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIcon } from '@angular/material/icon';
+import { DateTime } from 'luxon';
+
+import {
+  NgxMatTimepickerComponent,
+  NgxMatTimepickerToggleComponent,
+  NgxMatTimepickerFieldComponent,
+  NgxMatTimepickerDirective,
+} from '@alexfriesen/ngx-mat-timepicker';
+
+@Component({
+  selector: 'app-example-field',
+  templateUrl: 'field.component.html',
+  styleUrls: ['field.component.scss'],
+  standalone: true,
+  imports: [
+    FormsModule,
+    MatFormFieldModule,
+    MatIcon,
+    MatInput,
+    NgxMatTimepickerDirective,
+    NgxMatTimepickerComponent,
+    NgxMatTimepickerFieldComponent,
+    NgxMatTimepickerToggleComponent,
+  ],
+})
+export class ExampleFieldComponent {
+  maxTime = DateTime.local().startOf('day').set({
+    hour: 16,
+    minute: 20,
+  });
+
+  minTime = this.maxTime.set({ hour: 14 });
+
+  selectedTime: string;
+
+  showInput = true;
+  timeRegex = /([0-9]|1\d):[0-5]\d (AM|PM)/;
+}
diff --git a/projects/demo/src/app/examples/format-12/format-12.component.html b/projects/demo/src/app/examples/format-12/format-12.component.html
new file mode 100644
index 0000000..df438a5
--- /dev/null
+++ b/projects/demo/src/app/examples/format-12/format-12.component.html
@@ -0,0 +1,24 @@
+<h3>Picker with 12h format</h3>
+<p>using <span class="mat-color-primary">default</span> palette (primary)</p>
+
+<div class="ngx-mtp-d-flex ngx-mtp-align-center ngx-mtp-flex-column">
+  <mat-form-field>
+    <input
+      matInput
+      name="selected_time_A"
+      [(ngModel)]="selectedTime"
+      [ngxMatTimepicker]="pickerA"
+      placeholder="4:00 PM"
+      readonly
+    />
+    <mat-icon matSuffix (click)="pickerA.open()">watch_later </mat-icon>
+  </mat-form-field>
+  <button mat-raised-button color="primary" (click)="selectedTime = undefined">
+    clear
+  </button>
+  <ngx-mat-timepicker
+    #pickerA
+    enableKeyboardInput
+    (timeSet)="onTimeSet($event)"
+  />
+</div>
diff --git a/projects/demo/src/app/examples/format-12/format-12.component.scss b/projects/demo/src/app/examples/format-12/format-12.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/demo/src/app/examples/format-12/format-12.component.ts b/projects/demo/src/app/examples/format-12/format-12.component.ts
new file mode 100644
index 0000000..7e27530
--- /dev/null
+++ b/projects/demo/src/app/examples/format-12/format-12.component.ts
@@ -0,0 +1,48 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatInput } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { DateTime } from 'luxon';
+
+import {
+  NgxMatTimepickerComponent,
+  NgxMatTimepickerToggleComponent,
+  NgxMatTimepickerFieldComponent,
+  NgxMatTimepickerDirective,
+} from '@alexfriesen/ngx-mat-timepicker';
+
+@Component({
+  selector: 'app-example-format-12',
+  templateUrl: 'format-12.component.html',
+  styleUrls: ['format-12.component.scss'],
+  standalone: true,
+  imports: [
+    FormsModule,
+    MatButton,
+    MatFormFieldModule,
+    MatIcon,
+    MatInput,
+    NgxMatTimepickerDirective,
+    NgxMatTimepickerComponent,
+    NgxMatTimepickerFieldComponent,
+    NgxMatTimepickerToggleComponent,
+  ],
+})
+export class ExampleFormat12Component {
+  maxTime = DateTime.local().startOf('day').set({
+    hour: 16,
+    minute: 20,
+  });
+
+  minTime = this.maxTime.set({ hour: 14 });
+
+  selectedTime: string;
+
+  timeRegex = /([0-9]|1\d):[0-5]\d (AM|PM)/;
+
+  onTimeSet($event: string): void {
+    console.info('TIME UPDATED', $event);
+  }
+}
diff --git a/projects/demo/src/app/examples/format-24/format-24.component.html b/projects/demo/src/app/examples/format-24/format-24.component.html
new file mode 100644
index 0000000..775dd44
--- /dev/null
+++ b/projects/demo/src/app/examples/format-24/format-24.component.html
@@ -0,0 +1,20 @@
+<div>
+  <h3>Picker with 24h format</h3>
+  <p>using <span class="mat-color-accent">accent</span> palette</p>
+
+  <div class="example ngx-mtp-d-flex ngx-mtp-align-center ngx-mtp-flex-column">
+    <mat-form-field>
+      <input
+        matInput
+        name="selected_time_B"
+        [format]="24"
+        [(ngModel)]="selectedTime"
+        [ngxMatTimepicker]="pickerB"
+        placeholder="16:00"
+        readonly
+      />
+      <mat-icon matSuffix (click)="pickerB.open()"> watch_later </mat-icon>
+    </mat-form-field>
+    <ngx-mat-timepicker color="accent" #pickerB />
+  </div>
+</div>
diff --git a/projects/demo/src/app/examples/format-24/format-24.component.scss b/projects/demo/src/app/examples/format-24/format-24.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/demo/src/app/examples/format-24/format-24.component.ts b/projects/demo/src/app/examples/format-24/format-24.component.ts
new file mode 100644
index 0000000..e8dcfc8
--- /dev/null
+++ b/projects/demo/src/app/examples/format-24/format-24.component.ts
@@ -0,0 +1,48 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatInput } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { DateTime } from 'luxon';
+
+import {
+  NgxMatTimepickerComponent,
+  NgxMatTimepickerToggleComponent,
+  NgxMatTimepickerFieldComponent,
+  NgxMatTimepickerDirective,
+} from '@alexfriesen/ngx-mat-timepicker';
+
+@Component({
+  selector: 'app-example-format-24',
+  templateUrl: 'format-24.component.html',
+  styleUrls: ['format-24.component.scss'],
+  standalone: true,
+  imports: [
+    FormsModule,
+    MatButton,
+    MatFormFieldModule,
+    MatIcon,
+    MatInput,
+    NgxMatTimepickerDirective,
+    NgxMatTimepickerComponent,
+    NgxMatTimepickerFieldComponent,
+    NgxMatTimepickerToggleComponent,
+  ],
+})
+export class ExampleFormat24Component {
+  maxTime = DateTime.local().startOf('day').set({
+    hour: 16,
+    minute: 20,
+  });
+
+  minTime = this.maxTime.set({ hour: 14 });
+
+  selectedTime: string;
+
+  timeRegex = /([0-9]|1\d):[0-5]\d (AM|PM)/;
+
+  onTimeSet($event: string): void {
+    console.info('TIME UPDATED', $event);
+  }
+}
diff --git a/projects/demo/src/app/examples/picker-open/picker-open.component.html b/projects/demo/src/app/examples/picker-open/picker-open.component.html
new file mode 100644
index 0000000..3c56f48
--- /dev/null
+++ b/projects/demo/src/app/examples/picker-open/picker-open.component.html
@@ -0,0 +1,27 @@
+<div>
+  <h3>Open programmatically</h3>
+  <p>use external button to open the picker</p>
+  <div class="example ngx-mtp-d-flex ngx-mtp-align-center ngx-mtp-flex-column">
+    <mat-form-field>
+      <input
+        matInput
+        name="selected_time_e"
+        [format]="24"
+        [(ngModel)]="selectedTime"
+        [ngxMatTimepicker]="pickerE"
+        placeholder="12:00"
+        readonly
+      />
+      <mat-icon matSuffix (click)="pickerE.open()">watch_later </mat-icon>
+    </mat-form-field>
+    <button
+      mat-raised-button
+      class="ngx-mtp-margin-top ngx-mtp-margin-bottom ngx-mtp-d-inline-block"
+      (click)="pickerE.open()"
+      color="primary"
+    >
+      Open picker
+    </button>
+    <ngx-mat-timepicker color="accent" #pickerE />
+  </div>
+</div>
diff --git a/projects/demo/src/app/examples/picker-open/picker-open.component.scss b/projects/demo/src/app/examples/picker-open/picker-open.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/demo/src/app/examples/picker-open/picker-open.component.ts b/projects/demo/src/app/examples/picker-open/picker-open.component.ts
new file mode 100644
index 0000000..6c878d2
--- /dev/null
+++ b/projects/demo/src/app/examples/picker-open/picker-open.component.ts
@@ -0,0 +1,48 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatInput } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { DateTime } from 'luxon';
+
+import {
+  NgxMatTimepickerComponent,
+  NgxMatTimepickerToggleComponent,
+  NgxMatTimepickerFieldComponent,
+  NgxMatTimepickerDirective,
+} from '@alexfriesen/ngx-mat-timepicker';
+
+@Component({
+  selector: 'app-example-picker-open',
+  templateUrl: 'picker-open.component.html',
+  styleUrls: ['picker-open.component.scss'],
+  standalone: true,
+  imports: [
+    FormsModule,
+    MatFormFieldModule,
+    MatButton,
+    MatIcon,
+    MatInput,
+    NgxMatTimepickerDirective,
+    NgxMatTimepickerComponent,
+    NgxMatTimepickerFieldComponent,
+    NgxMatTimepickerToggleComponent,
+  ],
+})
+export class ExamplePickerOpenComponent {
+  maxTime = DateTime.local().startOf('day').set({
+    hour: 16,
+    minute: 20,
+  });
+
+  minTime = this.maxTime.set({ hour: 14 });
+
+  selectedTime: string;
+
+  timeRegex = /([0-9]|1\d):[0-5]\d (AM|PM)/;
+
+  onTimeSet($event: string): void {
+    console.info('TIME UPDATED', $event);
+  }
+}
diff --git a/projects/demo/src/app/examples/picker-toggle/picker-toggle.component.html b/projects/demo/src/app/examples/picker-toggle/picker-toggle.component.html
new file mode 100644
index 0000000..b8177de
--- /dev/null
+++ b/projects/demo/src/app/examples/picker-toggle/picker-toggle.component.html
@@ -0,0 +1,34 @@
+<div>
+  <h3>ngx-mat-timepicker-toggle</h3>
+  <p>use component in material stile (instead of using mat-icon + matSuffix)</p>
+  <div class="example ngx-mtp-d-flex ngx-mtp-align-center ngx-mtp-flex-column">
+    <mat-form-field class="ngx-mtp-margin-bottom">
+      <mat-label>Choose a date</mat-label>
+      <input matInput [matDatepicker]="datePicker" />
+      <mat-datepicker-toggle matSuffix [for]="datePicker" />
+      <mat-datepicker #datePicker />
+      <mat-hint>MM/DD/YYYY</mat-hint>
+    </mat-form-field>
+    <mat-form-field>
+      <input
+        matInput
+        name="selected_time_f"
+        [format]="24"
+        [(ngModel)]="selectedTime"
+        [ngxMatTimepicker]="pickerF"
+        placeholder="12:00"
+        readonly
+      />
+      <ngx-mat-timepicker-toggle matSuffix />
+    </mat-form-field>
+    <button
+      mat-raised-button
+      class="ngx-mtp-margin-top ngx-mtp-margin-bottom ngx-mtp-d-inline-block"
+      (click)="pickerF.open()"
+      color="primary"
+    >
+      Open picker
+    </button>
+    <ngx-mat-timepicker color="accent" #pickerF />
+  </div>
+</div>
diff --git a/projects/demo/src/app/examples/picker-toggle/picker-toggle.component.scss b/projects/demo/src/app/examples/picker-toggle/picker-toggle.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/demo/src/app/examples/picker-toggle/picker-toggle.component.ts b/projects/demo/src/app/examples/picker-toggle/picker-toggle.component.ts
new file mode 100644
index 0000000..8f214d8
--- /dev/null
+++ b/projects/demo/src/app/examples/picker-toggle/picker-toggle.component.ts
@@ -0,0 +1,47 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatInput } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { DateTime } from 'luxon';
+
+import {
+  NgxMatTimepickerComponent,
+  NgxMatTimepickerToggleComponent,
+  NgxMatTimepickerFieldComponent,
+  NgxMatTimepickerDirective,
+} from '@alexfriesen/ngx-mat-timepicker';
+
+@Component({
+  selector: 'app-example-picker-toggle',
+  templateUrl: 'picker-toggle.component.html',
+  styleUrls: ['picker-toggle.component.scss'],
+  standalone: true,
+  imports: [
+    FormsModule,
+    MatButtonModule,
+    MatDatepickerModule,
+    MatFormFieldModule,
+    MatIcon,
+    MatInput,
+    NgxMatTimepickerDirective,
+    NgxMatTimepickerComponent,
+    NgxMatTimepickerFieldComponent,
+    NgxMatTimepickerToggleComponent,
+  ],
+})
+export class ExamplePickerToggleComponent {
+  maxTime = DateTime.local().startOf('day').set({
+    hour: 16,
+    minute: 20,
+  });
+
+  minTime = this.maxTime.set({ hour: 14 });
+
+  selectedTime: string;
+
+  showInput = true;
+  timeRegex = /([0-9]|1\d):[0-5]\d (AM|PM)/;
+}
diff --git a/projects/demo/src/app/examples/validation/validation.component.html b/projects/demo/src/app/examples/validation/validation.component.html
new file mode 100644
index 0000000..3a774f2
--- /dev/null
+++ b/projects/demo/src/app/examples/validation/validation.component.html
@@ -0,0 +1,37 @@
+<div>
+  <h3>Min and Max validation</h3>
+  <p>add config to have min and/or max hour</p>
+  <div class="example ngx-mtp-d-flex ngx-mtp-align-center ngx-mtp-flex-column">
+    <mat-form-field>
+      <input
+        matInput
+        name="selected_time_g"
+        [format]="12"
+        [max]="maxTime"
+        [min]="minTime"
+        [(ngModel)]="selectedTime"
+        [ngxMatTimepicker]="pickerG"
+        placeholder="12:00"
+        readonly
+      />
+      <ngx-mat-timepicker-toggle [for]="pickerG" matSuffix />
+    </mat-form-field>
+    <button
+      mat-raised-button
+      class="ngx-mtp-margin-top ngx-mtp-margin-bottom ngx-mtp-d-inline-block"
+      (click)="pickerG.open()"
+      color="primary"
+    >
+      Open picker
+    </button>
+    <button
+      mat-raised-button
+      class="ngx-mtp-margin-top ngx-mtp-margin-bottom ngx-mtp-d-inline-block"
+      (click)="selectedTime = '12:00'"
+      color="primary"
+    >
+      Invalidate
+    </button>
+    <ngx-mat-timepicker color="accent" #pickerG />
+  </div>
+</div>
diff --git a/projects/demo/src/app/examples/validation/validation.component.scss b/projects/demo/src/app/examples/validation/validation.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/demo/src/app/examples/validation/validation.component.ts b/projects/demo/src/app/examples/validation/validation.component.ts
new file mode 100644
index 0000000..f1f1e38
--- /dev/null
+++ b/projects/demo/src/app/examples/validation/validation.component.ts
@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatInput } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { DateTime } from 'luxon';
+
+import {
+  NgxMatTimepickerComponent,
+  NgxMatTimepickerToggleComponent,
+  NgxMatTimepickerFieldComponent,
+  NgxMatTimepickerDirective,
+} from '@alexfriesen/ngx-mat-timepicker';
+
+@Component({
+  selector: 'app-example-validation',
+  templateUrl: 'validation.component.html',
+  styleUrls: ['validation.component.scss'],
+  standalone: true,
+  imports: [
+    FormsModule,
+    MatFormFieldModule,
+    MatButton,
+    MatIcon,
+    MatInput,
+    NgxMatTimepickerDirective,
+    NgxMatTimepickerComponent,
+    NgxMatTimepickerFieldComponent,
+    NgxMatTimepickerToggleComponent,
+  ],
+})
+export class ExampleValidationComponent {
+  maxTime = DateTime.local().startOf('day').set({
+    hour: 16,
+    minute: 20,
+  });
+
+  minTime = this.maxTime.set({ hour: 14 });
+
+  selectedTime: string;
+}
diff --git a/projects/demo/src/assets/theme.svg b/projects/demo/src/assets/theme.svg
index 6c98ed2..ff7fa5d 100644
--- a/projects/demo/src/assets/theme.svg
+++ b/projects/demo/src/assets/theme.svg
@@ -1,10 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80">
-  <defs>
-    <path id="a" d="M77.87 0C79.05 0 80 .95 80 2.13v75.74c0 1.17-.95 2.13-2.13 2.13H2.13C.96 80 0 79.04 0 77.87V2.13C0 .95.96 0 2.13 0h75.74z"/>
-    <path id="b" d="M54 40c3.32 0 6 2.69 6 6 0 1.2 0-1.2 0 0 0 3.31-2.68 6-6 6H26c-3.31 0-6-2.69-6-6 0-1.2 0 1.2 0 0 0-3.31 2.69-6 6-6h28z"/>
-    <path id="c" d="M0 0h80v17.24H0V0z"/>
-  </defs>
-  <use xlink:href="#a" fill="currentColor" class="docs-theme-icon-background"/>
-  <use xlink:href="#b" fill="#ff4081" class="docs-theme-icon-button"/>
-  <use xlink:href="#c" fill="#3f51b5" class="docs-theme-icon-toolbar"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
+  <path fill="var(--mat-toolbar-container-background-color)" d="M77.87 0C79.05 0 80 .95 80 2.13v75.74c0 1.17-.95 2.13-2.13 2.13H2.13C.96 80 0 79.04 0 77.87V2.13C0 .95.96 0 2.13 0h75.74z"/>
+  <path fill="currentColor" d="M54 40c3.32 0 6 2.69 6 6 0 1.2 0-1.2 0 0 0 3.31-2.68 6-6 6H26c-3.31 0-6-2.69-6-6 0-1.2 0 1.2 0 0 0-3.31 2.69-6 6-6h28z"/>
+  <path fill="var(--mat-app-background-color)" d="M0 0h80v17.24H0V0z"/>
 </svg>
\ No newline at end of file
diff --git a/projects/demo/src/index.html b/projects/demo/src/index.html
index 3a08d15..3533f07 100644
--- a/projects/demo/src/index.html
+++ b/projects/demo/src/index.html
@@ -19,7 +19,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>
-  <body class="mat-app-background">
+  <body class="mat-app-background mat-typography">
     <app-root></app-root>
   </body>
 </html>
diff --git a/projects/demo/src/scss/core.scss b/projects/demo/src/scss/core.scss
deleted file mode 100644
index 516ad87..0000000
--- a/projects/demo/src/scss/core.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-//@use "@angular/material/prebuilt-themes/indigo-pink.css";
-//@use "@angular/material/prebuilt-themes/deeppurple-amber.css";
-//@use "@angular/material/prebuilt-themes/pink-bluegrey.css";
-
-@use "@angular/material" as mat;
-// Plus imports for other components in your app.
-
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// **Be sure that you only ever include this mixin once!**
-@include mat.core();
-
-
-
-// Include the alternative theme styles inside of a block with a CSS class. You can make this
-// CSS class whatever you want. In this example, any component inside of an element with
-// `.dark-theme` will be affected by this alternate dark theme instead of the default theme.
diff --git a/projects/demo/src/scss/themes.scss b/projects/demo/src/scss/themes.scss
index 2762c38..f57f03f 100644
--- a/projects/demo/src/scss/themes.scss
+++ b/projects/demo/src/scss/themes.scss
@@ -1,36 +1,36 @@
 @use '@angular/material' as mat;
 
-$primary-palette: mat.$magenta-palette;
-$tertiary-palette: mat.$magenta-palette;
+@function theme($palette, $type) {
+  @return mat.define-theme(
+    (
+      (
+        color: (
+          theme-type: $type,
+          primary: $palette,
+          // tertiary: $tertiary-palette,
+          // use-system-variables: true,
+        ),
+        density: (
+          scale: 0,
+        ),
+      )
+    )
+  );
+}
 
-// Define the default theme (same as the example above).
-$light-theme-config: (
-  (
-    color: (
-      theme-type: light,
-      primary: $primary-palette,
-      // tertiary: $tertiary-palette,
-      // use-system-variables: true,
-    ),
-    density: (
-      scale: 0,
-    ),
-  )
-);
-$light-theme: mat.define-theme($light-theme-config);
+@function light-theme($palette) {
+  @return theme($palette, light);
+}
+@function dark-theme($palette) {
+  @return theme($palette, dark);
+}
+
+$red-light: light-theme(mat.$red-palette);
+$red-dark: dark-theme(mat.$red-palette);
+
+$blue-light: light-theme(mat.$blue-palette);
+$blue-dark: dark-theme(mat.$blue-palette);
+
+$orange-light: light-theme(mat.$orange-palette);
+$orange-dark: dark-theme(mat.$orange-palette);
 
-// Define an alternate dark theme.
-$dark-theme-config: (
-  (
-    color: (
-      theme-type: dark,
-      primary: $primary-palette,
-      // tertiary: $tertiary-palette,
-      // use-system-variables: true,
-    ),
-    density: (
-      scale: 0,
-    ),
-  )
-);
-$dark-theme: mat.define-theme($dark-theme-config);
diff --git a/projects/demo/src/styles.scss b/projects/demo/src/styles.scss
index 777cd4c..584c258 100644
--- a/projects/demo/src/styles.scss
+++ b/projects/demo/src/styles.scss
@@ -1,204 +1,83 @@
-@use "@angular/material" as mat;
-@import "scss/fonts";
-@import "scss/themes";
-@import "scss/core";
+@use '@angular/material' as mat;
+@import 'scss/fonts';
+@import 'scss/themes';
 
-$primary-color: mat.get-theme-color($light-theme, primary, 20);
-$accent-color: mat.get-theme-color($light-theme, tertiary, 20);
-$primary-color-dark: mat.get-theme-color($dark-theme, primary, 20);
-$accent-color-dark: mat.get-theme-color($dark-theme, tertiary, 20);
-
-body {
-	margin: 0;
-	font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
-	font-size: 14px;
-
-	* {
-		box-sizing: border-box;
-	}
+// Include the default theme styles.
+@include mat.core();
+@include mat.typography-hierarchy($red-light);
+:root {
+  @include mat.all-component-themes($red-light);
+}
+.dark {
+  @include mat.all-component-colors($red-dark);
 }
 
-a {
-	&.mat-color-primary {
-		color: $primary-color;
-		-webkit-text-decoration: none;
-		text-decoration: none;
-		padding-bottom: 1px;
-		border-bottom: 2px solid rgba($primary-color, 0.25);
-		-webkit-transition: border-bottom-color 0.15s ease-in-out;
-		transition: border-bottom-color 0.15s ease-in-out;
-
-		&:hover {
-			border-bottom: 2px solid rgba($primary-color, 1);
-		}
-	}
-
-	&.mat-color-accent {
-		color: $accent-color;
-		-webkit-text-decoration: none;
-		text-decoration: none;
-		padding-bottom: 1px;
-		border-bottom: 2px solid rgba($accent-color, 0.25);
-		-webkit-transition: border-bottom-color 0.15s ease-in-out;
-		transition: border-bottom-color 0.15s ease-in-out;
-
-		&:hover {
-			border-bottom: 2px solid rgba($accent-color, 1);
-		}
-	}
+.blue {
+  @include mat.all-component-colors($blue-light);
+  &.dark {
+    @include mat.all-component-colors($blue-dark);
+  }
 }
 
-.material-icons {
-	font-family: "Material Icons";
-	font-weight: normal;
-	font-style: normal;
-	font-size: 24px;
-	line-height: 1;
-	letter-spacing: normal;
-	text-transform: none;
-	display: inline-block;
-	white-space: nowrap;
-	word-wrap: normal;
-	direction: ltr;
-	-moz-font-feature-settings: "liga";
-	font-feature-settings: "liga";
-	-moz-osx-font-smoothing: grayscale;
+.orange {
+  @include mat.all-component-colors($orange-light);
+  &.dark {
+    @include mat.all-component-colors($orange-dark);
+  }
 }
 
-mat-icon.mat-icon.ngx-mtp-theme-example {
-	margin-right: 8px;
-	margin-left: 0;
+body {
+  margin: 0;
+  padding: 0;
 }
 
 .ngx-mtp-d-inline-block {
-	display: inline-block;
+  display: inline-block;
 }
 
 .ngx-mtp-d-none {
-	display: none;
+  display: none;
 }
 
 .ngx-mtp-d-flex {
-	display: flex;
+  display: flex;
 }
 
 .ngx-mtp-flex-column {
-	flex-direction: column;
+  flex-direction: column;
 }
 
 .ngx-mtp-align-center {
-	align-items: center;
+  align-items: center;
 }
 
 .ngx-mtp-justify-center {
-	justify-content: center;
+  justify-content: center;
 }
 
 .ngx-mtp-padding {
-	padding: 16px;
-}
-
-.ngx-mtp-top, footer {
-	background-color: mat.get-theme-color($light-theme, primary-container);
-	color: mat.get-theme-color($light-theme, on-primary-container);
-}
-
-.mat-color-primary {
-	color: $primary-color;
-}
-
-.mat-color-accent {
-	color: $accent-color;
-}
-
-.mat-color-warn {
-	// color: mat.get-color-from-palette($light-app-warn);
+  padding: 1rem;
 }
 
 .ngx-mtp-margin-top {
-	margin-top: 8px;
+  margin-top: 0.5rem;
 }
 
 .ngx-mtp-margin-bottom {
-	margin-bottom: 8px;
+  margin-bottom: 0.5rem;
 }
 
 .ngx-mtp-box-bordered {
-	text-align: center;
-	min-height: 20px;
-	padding: 8px;
-	width: 100%;
-	border-radius: 12px;
-	border: 2px dashed $primary-color;
+  text-align: center;
+  min-height: 20px;
+  padding: 0.5rem;
+  width: 100%;
+  border-radius: 12px;
 }
 
 .ngx-mtp-generic-section {
-	width: 100%;
-	min-height: 20px;
-	background-color: #F0F0F0;
-	padding: 20px;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	border-bottom: 1px solid #DDDDDD;
-}
-
-// prebuild theme for quick test
-// @import "@angular/material/prebuilt-themes/indigo-pink.css";
-
-// Include the default theme styles.
-@include mat.core();
-:root {
-	@include mat.all-component-themes($light-theme);
-}
-@include mat.typography-hierarchy($light-theme);
-
-.dark-theme {
-	@include mat.all-component-colors($dark-theme);
-
-	a {
-		&.mat-color-primary {
-			color: mat.get-theme-color($dark-theme, primary, 80);
-			border-bottom: 2px solid rgba(mat.get-theme-color($dark-theme, primary, 100), 0.25);
-
-			&:hover {
-				border-bottom: 2px solid rgba(mat.get-theme-color($dark-theme, primary, 100), 1);
-			}
-		}
-
-		&.mat-color-accent {
-			color: $accent-color-dark;
-			border-bottom: 2px solid rgba($accent-color-dark, 0.25);
-
-			&:hover {
-				border-bottom: 2px solid rgba($accent-color-dark, 1);
-			}
-		}
-	}
-
-	.ngx-mtp-box-bordered {
-		border-color: $primary-color-dark;
-	}
-
-	.ngx-mtp-generic-section {
-		background-color: #222;
-		border-bottom: 1px solid #000;
-	}
-
-	.ngx-mtp-top, footer {
-		background-color: mat.get-theme-color($dark-theme, primary-container);
-		color: mat.get-theme-color($dark-theme, on-primary-container);
-	}
-
-	.mat-color-primary {
-		color: $primary-color-dark;
-	}
-
-	.mat-color-accent {
-		color: $accent-color-dark;
-	}
-
-	.mat-color-warn {
-		// color: mat.get-color-from-palette($dark-warn);
-	}
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }