diff --git a/Frontend/angular.json b/Frontend/angular.json
index 2d3aaac..c314f68 100644
--- a/Frontend/angular.json
+++ b/Frontend/angular.json
@@ -24,6 +24,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -88,6 +89,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -119,6 +121,7 @@
           }
         }
       }
-    }},
+    }
+  },
   "defaultProject": "Betterzon"
-}
+}
\ No newline at end of file
diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json
index b7d54be..5b53a87 100644
--- a/Frontend/package-lock.json
+++ b/Frontend/package-lock.json
@@ -287,6 +287,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.0",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-10.2.0.tgz",
@@ -583,6 +600,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.3",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-10.2.3.tgz",
diff --git a/Frontend/package.json b/Frontend/package.json
index 318efaf..53ba93d 100644
--- a/Frontend/package.json
+++ b/Frontend/package.json
@@ -1,50 +1,52 @@
 {
-    "name": "betterzon",
-    "version": "0.0.0",
-    "scripts": {
-        "ng": "ng",
-        "start": "ng serve",
-        "build": "ng build",
-        "test": "ng test",
-        "lint": "ng lint",
-        "e2e": "ng e2e"
-    },
-    "private": true,
-    "dependencies": {
-        "@angular/animations": "^10.2.3",
-        "@angular/cli": "^10.2.0",
-        "@angular/common": "^10.2.3",
-        "@angular/compiler": "^10.2.3",
-        "@angular/core": "^10.2.3",
-        "@angular/forms": "^10.2.3",
-        "@angular/platform-browser": "^10.2.3",
-        "@angular/platform-browser-dynamic": "^10.2.3",
-        "@angular/router": "^10.2.3",
-        "apexcharts": "^3.22.3",
-        "ng": "0.0.0",
-        "ng-apexcharts": "^1.5.6",
-        "rxjs": "~6.6.0",
-        "tslib": "^2.0.3",
-        "zone.js": "~0.10.2"
-    },
-    "devDependencies": {
-        "@angular-devkit/build-angular": "^0.1100.2",
-        "@angular/cli": "^10.2.0",
-        "@angular/compiler-cli": "^10.2.3",
-        "@types/jasmine": "~3.5.0",
-        "@types/jasminewd2": "~2.0.3",
-        "@types/node": "^12.19.8",
-        "codelyzer": "^6.0.0",
-        "jasmine-core": "~3.6.0",
-        "jasmine-spec-reporter": "~5.0.0",
-        "karma": "~5.0.0",
-        "karma-chrome-launcher": "~3.1.0",
-        "karma-coverage-istanbul-reporter": "~3.0.2",
-        "karma-jasmine": "~4.0.0",
-        "karma-jasmine-html-reporter": "^1.5.0",
-        "protractor": "~7.0.0",
-        "ts-node": "~8.3.0",
-        "tslint": "~6.1.0",
-        "typescript": "<4.1.0"
-    }
+  "name": "betterzon",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^10.2.3",
+    "@angular/cdk": "~10.2.7",
+    "@angular/cli": "^10.2.0",
+    "@angular/common": "^10.2.3",
+    "@angular/compiler": "^10.2.3",
+    "@angular/core": "^10.2.3",
+    "@angular/forms": "^10.2.3",
+    "@angular/material": "~10.2.7",
+    "@angular/platform-browser": "^10.2.3",
+    "@angular/platform-browser-dynamic": "^10.2.3",
+    "@angular/router": "^10.2.3",
+    "apexcharts": "^3.22.3",
+    "ng": "0.0.0",
+    "ng-apexcharts": "^1.5.6",
+    "rxjs": "~6.6.0",
+    "tslib": "^2.0.3",
+    "zone.js": "~0.10.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^0.1100.2",
+    "@angular/cli": "^10.2.0",
+    "@angular/compiler-cli": "^10.2.3",
+    "@types/jasmine": "~3.5.0",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.19.8",
+    "codelyzer": "^6.0.0",
+    "jasmine-core": "~3.6.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~5.0.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "protractor": "~7.0.0",
+    "ts-node": "~8.3.0",
+    "tslint": "~6.1.0",
+    "typescript": "<4.1.0"
+  }
 }
diff --git a/Frontend/src/app/app.module.ts b/Frontend/src/app/app.module.ts
index 50ab548..cb7e608 100644
--- a/Frontend/src/app/app.module.ts
+++ b/Frontend/src/app/app.module.ts
@@ -15,7 +15,8 @@ import {HeaderComponent} from './components/header/header.component';
 import {NewestPricesListComponent} from './components/newest-prices-list/newest-prices-list.component';
 import {FormsModule} from '@angular/forms';
 import {PageNotFoundPageComponent} from './pages/page-not-found-page/page-not-found-page.component';
-//import {MatMenuModule} from '@angular/material/menu';
+import {MatMenuModule} from '@angular/material/menu';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
     declarations: [
@@ -36,7 +37,8 @@ import {PageNotFoundPageComponent} from './pages/page-not-found-page/page-not-fo
         HttpClientModule,
         NgApexchartsModule,
         FormsModule,
-        //MatMenuModule
+        MatMenuModule,
+        BrowserAnimationsModule
     ],
     providers: [],
     bootstrap: [AppComponent]
diff --git a/Frontend/src/index.html b/Frontend/src/index.html
index 9933c9b..e6f085a 100644
--- a/Frontend/src/index.html
+++ b/Frontend/src/index.html
@@ -6,6 +6,8 @@
   <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>
   <app-root></app-root>
diff --git a/Frontend/src/styles.css b/Frontend/src/styles.css
index 29a710b..53102c7 100644
--- a/Frontend/src/styles.css
+++ b/Frontend/src/styles.css
@@ -4,3 +4,6 @@ body {
     font-family: sans-serif;
     margin-bottom: 10em;
 }
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }