diff --git a/packages/admin-web-angular/package.json b/packages/admin-web-angular/package.json
index 7a2787d33..ac348450c 100644
--- a/packages/admin-web-angular/package.json
+++ b/packages/admin-web-angular/package.json
@@ -62,25 +62,28 @@
 	},
 	"dependencies": {
 		"@agm/core": "^1.1.0",
+		"@akveo/ng2-completer": "9.0.1",
 		"@angular/animations": "^9.1.1",
+		"@angular/cdk": "^9.1.3",
 		"@angular/common": "^9.1.1",
+		"@angular/compiler": "^9.1.1",
 		"@angular/core": "^9.1.1",
 		"@angular/forms": "^9.1.1",
+		"@angular/language-service": "^9.1.1",
+		"@angular/material": "^9.2.4",
 		"@angular/platform-browser": "^9.1.1",
 		"@angular/platform-browser-dynamic": "^9.1.1",
 		"@angular/router": "^9.1.1",
-		"@angular/language-service": "^9.1.1",
-		"@angular/compiler": "^9.1.1",
-		"@angular/cdk": "^9.1.3",
+		"@asymmetrik/ngx-leaflet": "^6.0.1",
+		"@ever-co/angular2-wizard": "^0.3.1",
+		"@ever-platform/common": "file:../common",
+		"@ever-platform/common-angular": "file:../common-angular",
+		"@fortawesome/fontawesome-free": "^5.10.0",
 		"@nebular/auth": "^5.0.0",
 		"@nebular/bootstrap": "^5.0.0",
 		"@nebular/eva-icons": "^5.0.0",
 		"@nebular/security": "^5.0.0",
 		"@nebular/theme": "^5.0.0",
-		"@asymmetrik/ngx-leaflet": "^6.0.1",
-		"@ever-platform/common": "file:../common",
-		"@ever-platform/common-angular": "file:../common-angular",
-		"@fortawesome/fontawesome-free": "^5.10.0",
 		"@ng-bootstrap/ng-bootstrap": "^5.1.0",
 		"@ng-select/ng-select": "^3.0.4",
 		"@ngx-translate/core": "^12.1.2",
@@ -90,7 +93,6 @@
 		"angular-tree-component": "^8.3.0",
 		"angular2-chartjs": "^0.5.1",
 		"angular2-toaster": "^8.0.0",
-		"@ever-co/angular2-wizard": "^0.3.1",
 		"apollo-angular": "^1.6.0",
 		"apollo-angular-link-http": "^1.7.0",
 		"apollo-cache-inmemory": "^1.6.2",
@@ -125,7 +127,6 @@
 		"moment": "^2.24.0",
 		"ng-simple-slideshow": "^1.2.9",
 		"ng2-ckeditor": "^1.2.2",
-		"@akveo/ng2-completer": "9.0.1",
 		"ng2-file-upload": "^1.3.0",
 		"ng2-simple-timer": "^6.0.0",
 		"ng2-smart-table": "^1.6.0",
@@ -159,22 +160,22 @@
 	"devDependencies": {
 		"@angular-builders/custom-webpack": "^9.1.0",
 		"@angular-devkit/architect": "^0.901.1",
+		"@angular-devkit/build-angular": "~0.900.7",
 		"@angular-devkit/build-optimizer": "^0.901.1",
 		"@angular-devkit/build-webpack": "^0.901.1",
 		"@angular-devkit/core": "^9.1.1",
 		"@angular-devkit/schematics": "^9.1.1",
-		"@angular-devkit/build-angular": "~0.900.7",
 		"@angular/cli": "~9.0.4",
 		"@angular/compiler-cli": "~9.0.3",
-		"@types/node": "^12.11.1",
-		"@types/jasmine": "~3.5.0",
-		"@types/jasminewd2": "~2.0.3",
 		"@storybook/addon-actions": "^5.3.17",
 		"@storybook/addon-knobs": "^5.3.17",
 		"@storybook/addon-links": "^5.3.17",
 		"@storybook/addon-notes": "^5.3.17",
 		"@storybook/addons": "^5.3.17",
 		"@storybook/angular": "^5.3.17",
+		"@types/jasmine": "~3.5.0",
+		"@types/jasminewd2": "~2.0.3",
+		"@types/node": "^12.11.1",
 		"codelyzer": "^5.1.2",
 		"jasmine-core": "~3.5.0",
 		"jasmine-spec-reporter": "~4.2.1",
diff --git a/packages/admin-web-angular/src/app/@theme/styles/_variables.scss b/packages/admin-web-angular/src/app/@theme/styles/_variables.scss
new file mode 100644
index 000000000..a74afb032
--- /dev/null
+++ b/packages/admin-web-angular/src/app/@theme/styles/_variables.scss
@@ -0,0 +1,73 @@
+$brand: #2a2c39;
+$brand-lighted: #353748;
+$brand-darken: darken($brand, 5%); // #1f212a
+
+$assertive: #bd4742;
+$assertive-lighted: #ce4843;
+$assertive-darken: darken($assertive, 5%); // #aa403b
+
+$ever-md-primary: (
+	50: #e5e6e7,
+	100: #bfc0c4,
+	200: #95969c,
+	300: #6a6b74,
+	400: #4a4c57,
+	500: #2a2c39,
+	600: #252733,
+	700: #1f212c,
+	800: #191b24,
+	900: #0f1017,
+	A100: #5c77ff,
+	A200: #294cff,
+	A400: #0029f5,
+	A700: #0025db,
+	contrast: (
+		50: #000000,
+		100: #000000,
+		200: #000000,
+		300: #ffffff,
+		400: #ffffff,
+		500: #ffffff,
+		600: #ffffff,
+		700: #ffffff,
+		800: #ffffff,
+		900: #ffffff,
+		A100: #ffffff,
+		A200: #ffffff,
+		A400: #ffffff,
+		A700: #ffffff,
+	),
+);
+
+$ever-md-accent: (
+	50: #f7e9e8,
+	100: #ebc8c6,
+	200: #dea3a1,
+	300: #d17e7b,
+	400: #c7635e,
+	500: #bd4742,
+	600: #b7403c,
+	700: #ae3733,
+	800: #a62f2b,
+	900: #98201d,
+	A100: #ffd3d2,
+	A200: #ffa09f,
+	A400: #ff6e6c,
+	A700: #ff5552,
+	contrast: (
+		50: #000000,
+		100: #000000,
+		200: #000000,
+		300: #000000,
+		400: #000000,
+		500: #ffffff,
+		600: #ffffff,
+		700: #ffffff,
+		800: #ffffff,
+		900: #ffffff,
+		A100: #000000,
+		A200: #000000,
+		A400: #000000,
+		A700: #000000,
+	),
+);
diff --git a/packages/admin-web-angular/src/app/@theme/styles/styles.scss b/packages/admin-web-angular/src/app/@theme/styles/styles.scss
index 05e20565a..9b4dd8297 100644
--- a/packages/admin-web-angular/src/app/@theme/styles/styles.scss
+++ b/packages/admin-web-angular/src/app/@theme/styles/styles.scss
@@ -3,6 +3,8 @@
 // framework component themes (styles tied to theme variables)
 @import '~@nebular/theme/styles/globals';
 @import '~@nebular/auth/styles/all';
+@import '~@angular/material/theming';
+@import 'variables';
 
 @import '~@nebular/bootstrap/styles/globals';
 
@@ -25,6 +27,29 @@
 
 @import '~@ng-select/ng-select/themes/default.theme.css';
 
+// 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();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue.
+$app-primary: mat-palette($ever-md-primary);
+$app-accent: mat-palette($ever-md-accent);
+
+// The warn palette is optional (defaults to red).
+$app-warn: mat-palette($ever-md-accent);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($app-theme);
+// @import '~material-components-web/material-components-web';
+
 // In the future versions of ngx-highlight we need to import theme globally
 // @import 'node_modules/highlight.js/styles/github';
 // install the framework and custom global styles
diff --git a/packages/admin-web-angular/src/app/@theme/styles/variables.ts b/packages/admin-web-angular/src/app/@theme/styles/variables.ts
new file mode 100644
index 000000000..c8aa398a6
--- /dev/null
+++ b/packages/admin-web-angular/src/app/@theme/styles/variables.ts
@@ -0,0 +1,16 @@
+// import variablesScss from 'sass-extract-loader!./_variables.scss';
+
+export function styleVariable(name: string) {
+	const variablesScss = require('sass-extract-loader!./_variables.scss');
+	return variablesScss.global[`$${name}`].value;
+}
+
+export namespace styleVariables {
+	export const brand = styleVariable('brand').hex;
+	export const brandLighted = styleVariable('brand-lighted').hex;
+	export const brandDarken = styleVariable('brand-darken').hex;
+
+	export const assertive = styleVariable('assertive').hex;
+	export const assertiveLighted = styleVariable('assertive-lighted').hex;
+	export const assertiveDarken = styleVariable('assertive-darken').hex;
+}
diff --git a/yarn.lock b/yarn.lock
index 20d84c013..e6eaee8bc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -429,6 +429,11 @@
   resolved "https://registry.yarnpkg.com/@angular/material/-/material-9.2.2.tgz#53b2d8a62fe48b79127cdf43b3b8b082e4c3df27"
   integrity sha512-gdQiMJ6PtW/5fd+0mglHFyzxULDCBGjn9RTET3sUq2rkc9+jBXr4OvnsUyBWSnqqv97XqotVDIx5JgE4/YX/Rw==
 
+"@angular/material@^9.2.4":
+  version "9.2.4"
+  resolved "https://packages.services.inno-charge.de/@angular%2fmaterial/-/material-9.2.4.tgz#2666ef606fbb88d60f8e2f18c5e4f94a3dd572d8"
+  integrity sha512-LkoTXE6B0slvMhvfZDdPWaz4yaYLkaAp5VSPunI9pxGsPxzqEV9e210wC1/sjG/76Nk8Ep7/2z9XKac8Q9bMwA==
+
 "@angular/platform-browser-dynamic@^9.1.0", "@angular/platform-browser-dynamic@^9.1.1":
   version "9.1.4"
   resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-9.1.4.tgz#bf1cde9156bd29eeeef932b683b0c993614f75d5"
@@ -2046,7 +2051,7 @@
     "@angular/platform-browser-dynamic" "^9.1.0"
     "@angular/router" "^9.1.0"
     "@angular/service-worker" "^9.1.0"
-    "@ever-platform/common" "file:C:/Users/Alish/AppData/Local/Yarn/Cache/v4/npm-@ever-platform-common-angular-0.3.0-908281c7-a6e3-4151-85b0-a93d821f77e5-1589281352293/node_modules/@ever-platform/common"
+    "@ever-platform/common" "file:../../Library/Caches/Yarn/v4/npm-@ever-platform-common-angular-0.3.0-8d9d670b-1cc3-4851-beb0-a19e2801fc24-1592842867890/node_modules/@ever-platform/common"
     "@ngx-translate/core" "^12.1.2"
     "@ngx-translate/http-loader" "^4.0.0"
     tslib "^1.10.0"