diff --git a/angular.json b/angular.json
index 4891894a..e46a84f8 100644
--- a/angular.json
+++ b/angular.json
@@ -68,7 +68,6 @@
               "projects/angular-intl-demo/src/assets"
             ],
             "styles": [
-              "@angular/material/prebuilt-themes/deeppurple-amber.css",
               "node_modules/prismjs/themes/prism-okaidia.css",
               "projects/angular-intl-demo/src/styles.scss"
             ],
diff --git a/package-lock.json b/package-lock.json
index 167e6e4b..fc33c808 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "angular-ecmascript-intl-monorepo",
       "version": "0.3.0",
       "dependencies": {
+        "@angular-material-components/datetime-picker": "^9.0.0",
         "@angular/animations": "^15.1.0",
         "@angular/cdk": "^15.1.5",
         "@angular/common": "^15.1.0",
@@ -478,6 +479,22 @@
         "typescript": "*"
       }
     },
+    "node_modules/@angular-material-components/datetime-picker": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@angular-material-components/datetime-picker/-/datetime-picker-9.0.0.tgz",
+      "integrity": "sha512-F+yf5kxzu62q1H2ZiVbKGfKHlszQhYN/avZyejCyq7bI7V9kg93BaTJ+ACOf9NEtM05USzrLXdiBGjEAMW82aQ==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/cdk": "^15.0.1",
+        "@angular/common": "^15.0.1",
+        "@angular/core": "^15.0.1",
+        "@angular/forms": "^15.0.1",
+        "@angular/material": "^15.0.1",
+        "@angular/platform-browser": "^15.0.1"
+      }
+    },
     "node_modules/@angular/animations": {
       "version": "15.2.0",
       "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-15.2.0.tgz",
diff --git a/package.json b/package.json
index 4066da98..0dd99784 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   },
   "private": true,
   "dependencies": {
+    "@angular-material-components/datetime-picker": "^9.0.0",
     "@angular/animations": "^15.1.0",
     "@angular/cdk": "^15.1.5",
     "@angular/common": "^15.1.0",
diff --git a/projects/angular-intl-demo/src/app/pipes/date/date.component.html b/projects/angular-intl-demo/src/app/pipes/date/date.component.html
index 90dfd6a6..6c6cf982 100644
--- a/projects/angular-intl-demo/src/app/pipes/date/date.component.html
+++ b/projects/angular-intl-demo/src/app/pipes/date/date.component.html
@@ -1,4 +1,11 @@
 <div class="fields-container">
+  <mat-form-field>
+    <mat-label>Date</mat-label>
+    <input [(ngModel)]="selectedDate" [ngxMatDatetimePicker]="picker" matInput placeholder="Choose a date">
+    <mat-datepicker-toggle [for]="$any(picker)" matSuffix></mat-datepicker-toggle>
+    <ngx-mat-datetime-picker #picker></ngx-mat-datetime-picker>
+  </mat-form-field>
+
   <mat-form-field>
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
diff --git a/projects/angular-intl-demo/src/app/pipes/pipes.module.ts b/projects/angular-intl-demo/src/app/pipes/pipes.module.ts
index 94aeb2d3..e8271991 100644
--- a/projects/angular-intl-demo/src/app/pipes/pipes.module.ts
+++ b/projects/angular-intl-demo/src/app/pipes/pipes.module.ts
@@ -13,6 +13,8 @@ import {FormsModule} from "@angular/forms";
 import {MatInputModule} from "@angular/material/input";
 import {PipesRoutingModule} from "./pipes-routing.module";
 import {CountryComponent} from "./country/country.component";
+import {NgxMatDatetimePickerModule, NgxMatNativeDateModule} from "@angular-material-components/datetime-picker";
+import {MatDatepickerModule} from "@angular/material/datepicker";
 
 @NgModule({
   declarations: [
@@ -32,6 +34,9 @@ import {CountryComponent} from "./country/country.component";
     MatSelectModule,
     FormsModule,
     MatInputModule,
+    NgxMatDatetimePickerModule,
+    MatDatepickerModule,
+    NgxMatNativeDateModule,
   ],
 })
 export class PipesModule {
diff --git a/projects/angular-intl-demo/src/index.html b/projects/angular-intl-demo/src/index.html
index 171e0b50..aaf172a9 100644
--- a/projects/angular-intl-demo/src/index.html
+++ b/projects/angular-intl-demo/src/index.html
@@ -10,7 +10,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body class="mat-typography">
+<body class="mat-typography mat-app-background">
 <app-root></app-root>
 </body>
 </html>
diff --git a/projects/angular-intl-demo/src/styles.scss b/projects/angular-intl-demo/src/styles.scss
index fa39552e..98c76323 100644
--- a/projects/angular-intl-demo/src/styles.scss
+++ b/projects/angular-intl-demo/src/styles.scss
@@ -1,4 +1,43 @@
-/* You can add global styles to this file, and also import other style files */
+@use "@angular/material" as mat;
+
+@include mat.core();
+
+$light-theme: mat.define-light-theme((
+  color: (
+    primary: mat.define-palette(mat.$deep-purple-palette),
+    accent: mat.define-palette(mat.$deep-orange-palette),
+  ),
+  typography: mat.define-typography-config(),
+  density: 0,
+));
+
+$dark-theme: mat.define-dark-theme((
+  color: (
+    primary: mat.define-palette(mat.$deep-purple-palette),
+    accent: mat.define-palette(mat.$deep-orange-palette),
+  ),
+));
+
+@include mat.legacy-button-color($light-theme);
+@include mat.button-theme($light-theme);
+@include mat.toolbar-theme($light-theme);
+@include mat.tabs-theme($light-theme);
+@include mat.select-theme($light-theme);
+@include mat.input-theme($light-theme);
+@include mat.datepicker-theme($light-theme);
+@include mat.form-field-theme($light-theme);
+
+@media (prefers-color-scheme: dark) {
+  @include mat.core-color($dark-theme);
+  @include mat.legacy-button-color($dark-theme);
+  @include mat.button-color($dark-theme);
+  @include mat.toolbar-color($dark-theme);
+  @include mat.tabs-color($dark-theme);
+  @include mat.select-color($dark-theme);
+  @include mat.input-color($dark-theme);
+  @include mat.datepicker-color($dark-theme);
+  @include mat.form-field-color($dark-theme);
+}
 
 html, body {
   height: 100%;