diff --git a/angular.json b/angular.json
index fa8447c..577b6f5 100644
--- a/angular.json
+++ b/angular.json
@@ -22,6 +22,7 @@
               "src/favicon.ico"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -78,6 +79,7 @@
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],
             "assets": [
@@ -136,4 +138,4 @@
       "prefix": "app"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 59fa467..4d36b85 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -240,6 +240,22 @@
       "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-9.1.6.tgz",
       "integrity": "sha512-7Pp7aqNNcH4fu1BnOVpvqJJHjE7RZ5K1oD396OWCh35pgpLowLSpFjhbVhzGrcAuxHyKnnHSX3etLn2hDaHxmQ=="
     },
+    "@angular/cdk": {
+      "version": "9.2.3",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-9.2.3.tgz",
+      "integrity": "sha512-tQr/yt8GNGsZ/DTT+PMq7XdRmL56hwVCyf8F12JQAawutSLfTfMb+S1lpN7L/0Pb/L5JBuCfG2HmXK7vHo02gw==",
+      "requires": {
+        "parse5": "^5.0.0"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "9.1.5",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-9.1.5.tgz",
@@ -496,6 +512,11 @@
       "integrity": "sha512-pB18hVoAbIuk1Wus8ur7yUxSukfPR4pCXiOfbxDQ94qlCzLAzIwXbaNV4erpBfL/fUKxMY3h8RrVt0dfm6M5RQ==",
       "dev": true
     },
+    "@angular/material": {
+      "version": "9.2.3",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-9.2.3.tgz",
+      "integrity": "sha512-QJltLNp8a/eoozPgkFLISEWgdlX9q9+fZaLJ8c9tHEp2IT5sFYBFHf8dPl0pUyxgOXkS/0HD43I1qki71/T7Kw=="
+    },
     "@angular/platform-browser": {
       "version": "9.1.6",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-9.1.6.tgz",
diff --git a/package.json b/package.json
index 8ddcaf0..a0bc9e7 100644
--- a/package.json
+++ b/package.json
@@ -13,10 +13,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^9.1.6",
+    "@angular/cdk": "^9.2.3",
     "@angular/common": "^9.1.6",
     "@angular/compiler": "^9.1.6",
     "@angular/core": "^9.1.6",
     "@angular/forms": "^9.1.6",
+    "@angular/material": "^9.2.3",
     "@angular/platform-browser": "^9.1.6",
     "@angular/platform-browser-dynamic": "^9.1.6",
     "@angular/router": "^9.1.6",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 829d8f0..d4d7c20 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,8 +1,9 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-import { AppComponent } from './app.component';
 import { StoreModule } from '@ngrx/store';
+import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [
@@ -10,6 +11,7 @@ import { StoreModule } from '@ngrx/store';
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     StoreModule.forRoot({}, {})
   ],
   providers: [],
diff --git a/src/index.html b/src/index.html
index b1ae30d..96d785f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,8 +7,10 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
+<body class="mat-typography">
   <app-root></app-root>
 </body>
 </html>
diff --git a/src/styles.css b/src/styles.css
index 90d4ee0..7e7239a 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }