diff --git a/projects/project-3/frontend/angular.json b/projects/project-3/frontend/angular.json
index beba1d5..4e9d604 100644
--- a/projects/project-3/frontend/angular.json
+++ b/projects/project-3/frontend/angular.json
@@ -28,6 +28,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "src/styles.scss"
             ],
             "scripts": []
@@ -92,6 +93,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "src/styles.scss"
             ],
             "scripts": []
diff --git a/projects/project-3/frontend/package-lock.json b/projects/project-3/frontend/package-lock.json
index c56ee00..c4e362c 100644
--- a/projects/project-3/frontend/package-lock.json
+++ b/projects/project-3/frontend/package-lock.json
@@ -242,6 +242,23 @@
         "tslib": "^2.0.0"
       }
     },
+    "@angular/cdk": {
+      "version": "10.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-10.2.7.tgz",
+      "integrity": "sha512-ZQjDfTRTn7JuAKsf3jiIdU2XBaxxGBi/ZWYv5Pb3HCl6B4PISsIE5VWRhkoUogoAB0MiFHpjnWeIqknJEm11YQ==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^2.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": "10.2.1",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-10.2.1.tgz",
@@ -471,6 +488,14 @@
         "tslib": "^2.0.0"
       }
     },
+    "@angular/material": {
+      "version": "10.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-10.2.7.tgz",
+      "integrity": "sha512-uk6JkRrKHaM9VFMzX7pWC83YNLVgXPB3D8U1yjSOafCdWwrRZgUHGr8MPlSILCr3o2nxgg5SsKdWcWwHuXXUZA==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "10.2.4",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-10.2.4.tgz",
diff --git a/projects/project-3/frontend/package.json b/projects/project-3/frontend/package.json
index ff41de4..7e74124 100644
--- a/projects/project-3/frontend/package.json
+++ b/projects/project-3/frontend/package.json
@@ -12,10 +12,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~10.2.0",
+    "@angular/cdk": "^10.2.7",
     "@angular/common": "~10.2.0",
     "@angular/compiler": "~10.2.0",
     "@angular/core": "~10.2.0",
     "@angular/forms": "~10.2.0",
+    "@angular/material": "^10.2.7",
     "@angular/platform-browser": "~10.2.0",
     "@angular/platform-browser-dynamic": "~10.2.0",
     "@angular/router": "~10.2.0",
diff --git a/projects/project-3/frontend/src/app/app.module.ts b/projects/project-3/frontend/src/app/app.module.ts
index 2c009a7..ad8e84e 100644
--- a/projects/project-3/frontend/src/app/app.module.ts
+++ b/projects/project-3/frontend/src/app/app.module.ts
@@ -4,6 +4,8 @@ import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { MapComponent } from './map/map.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {MatToolbarModule} from '@angular/material/toolbar';
 
 @NgModule({
   declarations: [
@@ -12,7 +14,9 @@ import { MapComponent } from './map/map.component';
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    MatToolbarModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/projects/project-3/frontend/src/app/map/map.component.html b/projects/project-3/frontend/src/app/map/map.component.html
index 67ad8c0..d3e5aad 100644
--- a/projects/project-3/frontend/src/app/map/map.component.html
+++ b/projects/project-3/frontend/src/app/map/map.component.html
@@ -1,3 +1,9 @@
+<p>
+  <mat-toolbar>
+    <span>My Application</span>
+  </mat-toolbar>
+</p>
+
 <div class="map-container">
   <div class="map-frame">
     <div id="map"></div>
diff --git a/projects/project-3/frontend/src/index.html b/projects/project-3/frontend/src/index.html
index 3af61ec..cae196e 100644
--- a/projects/project-3/frontend/src/index.html
+++ b/projects/project-3/frontend/src/index.html
@@ -6,8 +6,10 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/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/projects/project-3/frontend/src/styles.css b/projects/project-3/frontend/src/styles.css
index 3dd8a8f..a2ae038 100644
--- a/projects/project-3/frontend/src/styles.css
+++ b/projects/project-3/frontend/src/styles.css
@@ -1,3 +1,11 @@
 @import "~leaflet/dist/leaflet.css";
+html, body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}
 
 /*# sourceMappingURL=styles.css.map */
diff --git a/projects/project-3/frontend/src/styles.css.map b/projects/project-3/frontend/src/styles.css.map
index dcc2900..752d577 100644
--- a/projects/project-3/frontend/src/styles.css.map
+++ b/projects/project-3/frontend/src/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAQ","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAQ;AAER;EAAa;;;AACb;EAAO;EAAW","file":"styles.css"}
\ No newline at end of file
diff --git a/projects/project-3/frontend/src/styles.scss b/projects/project-3/frontend/src/styles.scss
index d047302..40f4566 100644
--- a/projects/project-3/frontend/src/styles.scss
+++ b/projects/project-3/frontend/src/styles.scss
@@ -1 +1,4 @@
 @import "~leaflet/dist/leaflet.css";
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }