diff --git a/package-lock.json b/package-lock.json
index b3e43107..ffd34516 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -699,8 +699,7 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -721,14 +720,12 @@
             "balanced-match": {
               "version": "1.0.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -743,20 +740,17 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "concat-map": {
               "version": "0.0.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -873,8 +867,7 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "ini": {
               "version": "1.3.5",
@@ -886,7 +879,6 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -901,7 +893,6 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -909,14 +900,12 @@
             "minimist": {
               "version": "0.0.8",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -935,7 +924,6 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -1016,8 +1004,7 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -1029,7 +1016,6 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -1115,8 +1101,7 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -1152,7 +1137,6 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -1172,7 +1156,6 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -1216,14 +1199,12 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             }
           }
         },
@@ -1550,6 +1531,14 @@
       "integrity": "sha512-vGk14oWroEo6ycO4cooznx57nn2sASmCQ/sdE8UVwySUKl940TsVzijgaGqapTepFof9sMqN77y2G15eRKQeAQ==",
       "dev": true
     },
+    "@angular/material": {
+      "version": "8.1.2",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-8.1.2.tgz",
+      "integrity": "sha512-c/EYufDPTClr7F2ZFv7KSaPpA/b/Bq+89oU5/AioNzx3KIZWBB24U/GaIsh3NI75mPTeVdJDhXhCcrE5WbsZnQ==",
+      "requires": {
+        "tslib": "^1.7.1"
+      }
+    },
     "@angular/platform-browser": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-8.0.0.tgz",
@@ -2178,7 +2167,6 @@
       "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
       "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
       "dev": true,
-      "optional": true,
       "requires": {
         "kind-of": "^3.0.2",
         "longest": "^1.0.1",
@@ -7041,8 +7029,7 @@
           "version": "2.1.1",
           "resolved": false,
           "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -7066,15 +7053,13 @@
           "version": "1.0.0",
           "resolved": false,
           "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "resolved": false,
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -7091,22 +7076,19 @@
           "version": "1.1.0",
           "resolved": false,
           "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "resolved": false,
           "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "resolved": false,
           "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -7237,8 +7219,7 @@
           "version": "2.0.3",
           "resolved": false,
           "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -7252,7 +7233,6 @@
           "resolved": false,
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -7269,7 +7249,6 @@
           "resolved": false,
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -7278,15 +7257,13 @@
           "version": "0.0.8",
           "resolved": false,
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.2.4",
           "resolved": false,
           "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==",
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -7307,7 +7284,6 @@
           "resolved": false,
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -7396,8 +7372,7 @@
           "version": "1.0.1",
           "resolved": false,
           "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -7411,7 +7386,6 @@
           "resolved": false,
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -7507,8 +7481,7 @@
           "version": "5.1.1",
           "resolved": false,
           "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -7550,7 +7523,6 @@
           "resolved": false,
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -7572,7 +7544,6 @@
           "resolved": false,
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -7621,15 +7592,13 @@
           "version": "1.0.2",
           "resolved": false,
           "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.2",
           "resolved": false,
           "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=",
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -10430,15 +10399,13 @@
           "version": "1.40.0",
           "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz",
           "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "mime-types": {
           "version": "2.1.24",
           "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz",
           "integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==",
           "dev": true,
-          "optional": true,
           "requires": {
             "mime-db": "1.40.0"
           }
@@ -10991,8 +10958,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
       "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "loose-envify": {
       "version": "1.3.1",
@@ -14623,8 +14589,7 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -14645,14 +14610,12 @@
             "balanced-match": {
               "version": "1.0.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -14667,20 +14630,17 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "concat-map": {
               "version": "0.0.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -14797,8 +14757,7 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "ini": {
               "version": "1.3.5",
@@ -14810,7 +14769,6 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -14825,7 +14783,6 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -14833,14 +14790,12 @@
             "minimist": {
               "version": "0.0.8",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -14859,7 +14814,6 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -14940,8 +14894,7 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -14953,7 +14906,6 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -15039,8 +14991,7 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -15076,7 +15027,6 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -15096,7 +15046,6 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -15140,14 +15089,12 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             }
           }
         },
@@ -18258,8 +18205,7 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -18280,14 +18226,12 @@
             "balanced-match": {
               "version": "1.0.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -18302,20 +18246,17 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "concat-map": {
               "version": "0.0.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -18432,8 +18373,7 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "ini": {
               "version": "1.3.5",
@@ -18445,7 +18385,6 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -18460,7 +18399,6 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -18468,14 +18406,12 @@
             "minimist": {
               "version": "0.0.8",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -18494,7 +18430,6 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -18575,8 +18510,7 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -18588,7 +18522,6 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -18674,8 +18607,7 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -18711,7 +18643,6 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -18731,7 +18662,6 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -18775,14 +18705,12 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             }
           }
         },
@@ -19690,8 +19618,7 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -19712,14 +19639,12 @@
             "balanced-match": {
               "version": "1.0.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -19734,20 +19659,17 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "concat-map": {
               "version": "0.0.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -19864,8 +19786,7 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "ini": {
               "version": "1.3.5",
@@ -19877,7 +19798,6 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -19892,7 +19812,6 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -19900,14 +19819,12 @@
             "minimist": {
               "version": "0.0.8",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -19926,7 +19843,6 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -20007,8 +19923,7 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -20020,7 +19935,6 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -20106,8 +20020,7 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -20143,7 +20056,6 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -20163,7 +20075,6 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -20207,14 +20118,12 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             }
           }
         },
diff --git a/package.json b/package.json
index affcd10a..738fbe4d 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "@angular/compiler": "^8.0.0",
     "@angular/core": "^8.0.0",
     "@angular/forms": "^8.0.0",
+    "@angular/material": "^8.1.2",
     "@angular/platform-browser": "^8.0.0",
     "@angular/platform-browser-dynamic": "^8.0.0",
     "@angular/router": "^8.0.0",
diff --git a/src/app/@theme/components/header/header.component.html b/src/app/@theme/components/header/header.component.html
index 6fdc5d35..cd24c4e6 100644
--- a/src/app/@theme/components/header/header.component.html
+++ b/src/app/@theme/components/header/header.component.html
@@ -5,7 +5,7 @@
     </a>
     <a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
   </div>
-  <nb-select [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary">
+  <nb-select matRipple [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary">
     <nb-option *ngFor="let theme of themes" [value]="theme.value"> {{ theme.name }}</nb-option>
   </nb-select>
 </div>
diff --git a/src/app/@theme/components/header/header.component.ts b/src/app/@theme/components/header/header.component.ts
index bfe2b9bc..32d3bb58 100644
--- a/src/app/@theme/components/header/header.component.ts
+++ b/src/app/@theme/components/header/header.component.ts
@@ -18,6 +18,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
   user: any;
 
   themes = [
+    {
+      value: 'material',
+      name: 'Material',
+    },
     {
       value: 'default',
       name: 'Light',
diff --git a/src/app/@theme/layouts/one-column/one-column.layout.scss b/src/app/@theme/layouts/one-column/one-column.layout.scss
index 448cb738..6ae73223 100644
--- a/src/app/@theme/layouts/one-column/one-column.layout.scss
+++ b/src/app/@theme/layouts/one-column/one-column.layout.scss
@@ -6,4 +6,18 @@
   .menu-sidebar ::ng-deep .scrollable {
     padding-top: nb-theme(layout-padding-top);
   }
+
+  .nb-theme-header ::ng-deep nav {
+    color: nb-theme(text-alternate-color);
+    a {
+      color: nb-theme(text-alternate-color);
+    }
+  }
+
+  .purple {
+
+    ::ng-deep nav {
+      background-color: nb-theme(color-primary-500);
+    }
+  }
 }
diff --git a/src/app/@theme/layouts/one-column/one-column.layout.ts b/src/app/@theme/layouts/one-column/one-column.layout.ts
index cc0b789a..21cb5206 100644
--- a/src/app/@theme/layouts/one-column/one-column.layout.ts
+++ b/src/app/@theme/layouts/one-column/one-column.layout.ts
@@ -5,11 +5,11 @@ import { Component } from '@angular/core';
   styleUrls: ['./one-column.layout.scss'],
   template: `
     <nb-layout windowMode>
-      <nb-layout-header fixed>
+      <nb-layout-header fixed class="nb-theme-header purple">
         <ngx-header></ngx-header>
       </nb-layout-header>
 
-      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
+      <nb-sidebar class="menu-sidebar " tag="menu-sidebar" responsive>
         <ng-content select="nb-menu"></ng-content>
       </nb-sidebar>
 
diff --git a/src/app/@theme/styles/styles.scss b/src/app/@theme/styles/styles.scss
index 8cc1d9df..77f8942e 100644
--- a/src/app/@theme/styles/styles.scss
+++ b/src/app/@theme/styles/styles.scss
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,600,700&display=swap');
 
 // themes - our custom or/and out of the box themes
 @import 'themes';
@@ -31,3 +31,86 @@
 
   @include nb-overrides();
 };
+
+@import '~@angular/material/theming';
+// plus imports for other components in your app.
+
+// 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();
+
+$purple: (
+  50: #f3e5f5,
+  200: #e8cbfe,
+  300: #ce97fd,
+  400: #ae63f9,
+  500: #903df4,
+  600: #6200ee,
+  700: #4b00cc,
+  800: #3800ab,
+  900: #27008a,
+  a100: #ea80fc,
+  a200: #e040fb,
+  a400: #d500f9,
+  a700: #aa00ff,
+  contrast: (
+    50: $dark-primary-text,
+    100: $dark-primary-text,
+    200: $dark-primary-text,
+    300: $light-primary-text,
+    400: $light-primary-text,
+    500: $light-primary-text,
+    600: $light-primary-text,
+    700: $light-primary-text,
+    800: $light-primary-text,
+    900: $light-primary-text,
+    a100: $dark-primary-text,
+    a200: $light-primary-text,
+    a400: $light-primary-text,
+    a700: $light-primary-text,
+  )
+);
+
+$cyan: (
+  50: #e0f7fa,
+  100: #cafde5,
+  200: #96fbd5,
+  300: #61f4c9,
+  400: #3ae9c6,
+  500: #00dbc4,
+  600: #00bcb9,
+  700: #00919d,
+  800: #00697f,
+  900: #004d69,
+  A100: #84ffff,
+  A200: #18ffff,
+  A400: #00e5ff,
+  A700: #00b8d4,
+  contrast: (
+    50: $dark-primary-text,
+    100: $dark-primary-text,
+    200: $dark-primary-text,
+    300: $dark-primary-text,
+    400: $dark-primary-text,
+    500: $light-primary-text,
+    600: $light-primary-text,
+    700: $light-primary-text,
+    800: $light-primary-text,
+    900: $light-primary-text,
+    A100: $dark-primary-text,
+    A200: $dark-primary-text,
+    A400: $dark-primary-text,
+    A700: $dark-primary-text,
+  )
+);
+
+// Define the default theme (same as the example above).
+$primary: mat-palette($purple);
+$accent: mat-palette($cyan);
+//$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
+$material-theme:   mat-light-theme($primary, $accent);
+.nb-theme-material {
+  @include angular-material-theme($material-theme);
+}
+
diff --git a/src/app/@theme/styles/theme.material.ts b/src/app/@theme/styles/theme.material.ts
new file mode 100644
index 00000000..3df7cdc7
--- /dev/null
+++ b/src/app/@theme/styles/theme.material.ts
@@ -0,0 +1,346 @@
+import { NbJSThemeOptions, DEFAULT_THEME as baseTheme, NbJSThemeVariable } from '@nebular/theme';
+
+const baseThemeVariables = {
+  ...baseTheme.variables,
+
+  bg: '#ffffff',
+  bg2: '#F5F5F5',
+  bg3: '#EDEDED',
+  bg4: '#D4D4D4',
+
+  border: '#ffffff',
+  border2: '#F5F5F5',
+  border3: '#EDEDED',
+  border4: '#D4D4D4',
+  border5: '#B3B3B3',
+
+  fg: '#838383',
+  fgHeading: '#1a2138',
+  fgText: '#242424',
+  fgHighlight: '#6200EE',
+  layoutBg: '#F5F5F5',
+  separator: '#EDEDED',
+
+  primary: '#6200EE',
+  success: '#00DBC4',
+  info: '#0C90FC',
+  warning: '#EAEA3F',
+  danger: '#B00120',
+
+  primaryLight: '#903DF4',
+  successLight: '#3AE9C6',
+  infoLight: '#48B5FD',
+  warningLight: '#F2F26D',
+  dangerLight: '#CF3441',
+} as NbJSThemeVariable;
+
+export const MATERIAL_THEME = {
+  name: 'material',
+  base: 'default',
+  variables: {
+    temperature: {
+      arcFill: [
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+      ],
+      arcEmpty: baseThemeVariables.bg2,
+      thumbBg: baseThemeVariables.bg2,
+      thumbBorder: baseThemeVariables.primary,
+    },
+
+    solar: {
+      gradientLeft: baseThemeVariables.primary,
+      gradientRight: baseThemeVariables.primary,
+      shadowColor: 'rgba(0, 0, 0, 0)',
+      secondSeriesFill: baseThemeVariables.bg2,
+      radius: ['80%', '90%'],
+    },
+
+    traffic: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      lineBg: baseThemeVariables.border4,
+      lineShadowBlur: '1',
+      itemColor: baseThemeVariables.border4,
+      itemBorderColor: baseThemeVariables.border4,
+      itemEmphasisBorderColor: baseThemeVariables.primary,
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+      shadowLineShadow: 'rgba(0, 0, 0, 0)',
+      gradFrom: baseThemeVariables.bg2,
+      gradTo: baseThemeVariables.bg2,
+    },
+
+    electricity: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: baseThemeVariables.fgText,
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      axisLineColor: baseThemeVariables.border3,
+      xAxisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+      lineGradFrom: baseThemeVariables.primary,
+      lineGradTo: baseThemeVariables.primary,
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: baseThemeVariables.bg2,
+      areaGradTo: baseThemeVariables.bg2,
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+    },
+
+    bubbleMap: {
+      titleColor: baseThemeVariables.fgText,
+      areaColor: baseThemeVariables.bg4,
+      areaHoverColor: baseThemeVariables.fgHighlight,
+      areaBorderColor: baseThemeVariables.border5,
+    },
+
+    profitBarAnimationEchart: {
+      textColor: baseThemeVariables.fgText,
+
+      firstAnimationBarColor: baseThemeVariables.primary,
+      secondAnimationBarColor: baseThemeVariables.success,
+
+      splitLineStyleOpacity: '1',
+      splitLineStyleWidth: '1',
+      splitLineStyleColor: baseThemeVariables.separator,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+
+    trafficBarEchart: {
+      gradientFrom: baseThemeVariables.warningLight,
+      gradientTo: baseThemeVariables.warning,
+      shadow: baseThemeVariables.warningLight,
+      shadowBlur: '0',
+
+      axisTextColor: baseThemeVariables.fgText,
+      axisFontSize: '12',
+
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+    },
+
+    countryOrders: {
+      countryBorderColor: baseThemeVariables.border4,
+      countryFillColor: baseThemeVariables.bg3,
+      countryBorderWidth: '1',
+      hoveredCountryBorderColor: baseThemeVariables.primary,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
+      hoveredCountryBorderWidth: '1',
+
+      chartAxisLineColor: baseThemeVariables.border4,
+      chartAxisTextColor: baseThemeVariables.fg,
+      chartAxisFontSize: '16',
+      chartGradientTo: baseThemeVariables.primary,
+      chartGradientFrom: baseThemeVariables.primaryLight,
+      chartAxisSplitLine: baseThemeVariables.separator,
+      chartShadowLineColor: baseThemeVariables.primaryLight,
+
+      chartLineBottomShadowColor: baseThemeVariables.primary,
+
+      chartInnerLineColor: baseThemeVariables.bg2,
+    },
+
+    echarts: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.fgText,
+      splitLineColor: baseThemeVariables.separator,
+      itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
+      tooltipBackgroundColor: baseThemeVariables.primary,
+      areaOpacity: '0.7',
+    },
+
+    chartjs: {
+      axisLineColor: baseThemeVariables.separator,
+      textColor: baseThemeVariables.fgText,
+    },
+
+    orders: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+
+      // first line
+      firstAreaGradFrom: baseThemeVariables.bg3,
+      firstAreaGradTo: baseThemeVariables.bg3,
+      firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+      // second line
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+
+      secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
+      secondAreaGradTo: 'rgba(51, 102, 255, 0)',
+      secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+      // third line
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+
+      thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
+      thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
+      thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+    },
+
+    profit: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.border4,
+      splitLineColor: baseThemeVariables.separator,
+      areaOpacity: '1',
+
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+
+      // first bar
+      firstLineGradFrom: baseThemeVariables.bg3,
+      firstLineGradTo: baseThemeVariables.bg3,
+      firstLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // second bar
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+      secondLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // third bar
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+      thirdLineShadow: 'rgba(0, 0, 0, 0)',
+    },
+
+    orderProfitLegend: {
+      firstItem: baseThemeVariables.success,
+      secondItem: baseThemeVariables.primary,
+      thirdItem: baseThemeVariables.bg3,
+    },
+
+    visitors: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '1',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'dotted',
+      lineWidth: '6',
+      lineGradFrom: '#ffffff',
+      lineGradTo: '#ffffff',
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: baseThemeVariables.primary,
+      areaGradTo: baseThemeVariables.primaryLight,
+
+      innerLineStyle: 'solid',
+      innerLineWidth: '1',
+
+      innerAreaGradFrom: baseThemeVariables.success,
+      innerAreaGradTo: baseThemeVariables.success,
+    },
+
+    visitorsLegend: {
+      firstIcon: baseThemeVariables.success,
+      secondIcon: baseThemeVariables.primary,
+    },
+
+    visitorsPie: {
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+      firstPieRadius: ['70%', '90%'],
+
+      secondPieGradientLeft: baseThemeVariables.warning,
+      secondPieGradientRight: baseThemeVariables.warningLight,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+      secondPieRadius: ['60%', '97%'],
+      shadowOffsetX: '0',
+      shadowOffsetY: '0',
+    },
+
+    visitorsPieLegend: {
+      firstSection: baseThemeVariables.warning,
+      secondSection: baseThemeVariables.success,
+    },
+
+    earningPie: {
+      radius: ['65%', '100%'],
+      center: ['50%', '50%'],
+
+      fontSize: '22',
+
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      secondPieGradientLeft: baseThemeVariables.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      thirdPieGradientLeft: baseThemeVariables.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
+      thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
+    },
+
+    earningLine: {
+      gradFrom: baseThemeVariables.primary,
+      gradTo: baseThemeVariables.primary,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+  },
+} as NbJSThemeOptions;
diff --git a/src/app/@theme/styles/themes.scss b/src/app/@theme/styles/themes.scss
index c5d5aa8d..9794fb5c 100644
--- a/src/app/@theme/styles/themes.scss
+++ b/src/app/@theme/styles/themes.scss
@@ -3,9 +3,79 @@
 // @nebular out of the box themes
 @import '~@nebular/theme/styles/themes';
 
-$nb-themes: nb-register-theme((
-  layout-padding-top: 2.25rem,
+$nb-enabled-themes: (material, header);
 
+$nb-themes: nb-register-theme((
+
+  font-family-primary: unquote('Roboto'),
+  font-family-secondary: font-family-primary,
+
+  color-basic-100: #ffffff,
+  color-basic-200: #f5f5f5,
+  color-basic-300: #ededed,
+  color-basic-400: #d4d4d4,
+  color-basic-500: #b3b3b3,
+  color-basic-600: #838383,
+  color-basic-700: #636363,
+  color-basic-800: #424242,
+  color-basic-900: #242424,
+  color-basic-1000: #1b1b1b,
+  color-basic-1100: #000000,
+
+  color-primary-100: #e8cbfe,
+  color-primary-200: #ce97fd,
+  color-primary-300: #ae63f9,
+  color-primary-400: #903df4,
+  color-primary-500: #6200ee,
+  color-primary-600: #4b00cc,
+  color-primary-700: #3800ab,
+  color-primary-800: #27008a,
+  color-primary-900: #1b0072,
+
+  color-success-100:#cafde5,
+  color-success-200:#96fbd5,
+  color-success-300:#61f4c9,
+  color-success-400:#3ae9c6,
+  color-success-500:#00dbc4,
+  color-success-600:#00bcb9,
+  color-success-700:#00919d,
+  color-success-800:#00697f,
+  color-success-900:#004d69,
+
+  color-info-100: #cef3fe,
+  color-info-200: #9de2fe,
+  color-info-300: #6cccfe,
+  color-info-400: #48b5fd,
+  color-info-500: #0c90fc,
+  color-info-600: #086fd8,
+  color-info-700: #0653b5,
+  color-info-800: #033a92,
+  color-info-900: #022978,
+
+  color-warning-100: #fdfdd8,
+  color-warning-200: #fcfcb2,
+  color-warning-300: #f8f88b,
+  color-warning-400: #f2f26d,
+  color-warning-500: #eaea3f,
+  color-warning-600: #c9c92e,
+  color-warning-700: #a8a81f,
+  color-warning-800: #878714,
+  color-warning-900: #70700c,
+
+  color-danger-100: #fbd3c9,
+  color-danger-200: #f79f94,
+  color-danger-300: #e75e5d,
+  color-danger-400: #cf3441,
+  color-danger-500: #b00120,
+  color-danger-600: #970029,
+  color-danger-700: #7e002e,
+  color-danger-800: #66002f,
+  color-danger-900: #54002e,
+
+  shadow: unquote("0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)"),
+  header-shadow: unquote("0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)"),
+
+  layout-padding-top: 2.25rem,
   menu-item-icon-margin: 0 0.5rem 0 0,
 
   card-height-tiny: 13.5rem,
@@ -22,67 +92,42 @@ $nb-themes: nb-register-theme((
   slide-out-background: #f7f9fc,
   slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
   slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
-), default, default);
+
+  divider-color: transparent,
+  header-height: 4rem,
+  header-padding: 1rem,
+), material, default);
 
 $nb-themes: nb-register-theme((
-  layout-padding-top: 2.25rem,
 
-  menu-item-icon-margin: 0 0.5rem 0 0,
+  color-basic-100: #ffffff,
+  color-basic-200: #f5f5f5,
+  color-basic-300: #ededed,
+  color-basic-400: #d4d4d4,
+  color-basic-500: #b3b3b3,
+  color-basic-600: #808080,
+  color-basic-700: #4a4a4a,
+  color-basic-800: #383838,
+  color-basic-900: #292929,
+  color-basic-1000: #1f1f1f,
+  color-basic-1100: #141414,
 
-  card-height-tiny: 13.5rem,
-  card-height-small: 21.1875rem,
-  card-height-medium: 28.875rem,
-  card-height-large: 36.5625rem,
-  card-height-giant: 44.25rem,
-  card-margin-bottom: 1.875rem,
-  card-header-with-select-padding-top: 0.5rem,
-  card-header-with-select-padding-bottom: 0.5rem,
+  text-hint-color: text-alternate-color,
+  text-basic-color: text-alternate-color,
+  text-inverted-color: color-basic-900,
 
-  select-min-width: 6rem,
-
-  slide-out-background: #252547,
-  slide-out-shadow-color: 2px 0 3px #29157a,
-  slide-out-shadow-color-rtl: -2px 0 3px #29157a,
-), cosmic, cosmic);
-
-$nb-themes: nb-register-theme((
-  layout-padding-top: 2.25rem,
-
-  menu-item-icon-margin: 0 0.5rem 0 0,
-
-  card-height-tiny: 13.5rem,
-  card-height-small: 21.1875rem,
-  card-height-medium: 28.875rem,
-  card-height-large: 36.5625rem,
-  card-height-giant: 44.25rem,
-  card-margin-bottom: 1.875rem,
-  card-header-with-select-padding-top: 0.5rem,
-  card-header-with-select-padding-bottom: 0.5rem,
-
-  select-min-width: 6rem,
-
-  slide-out-background: linear-gradient(270deg, #edf1f7 0%, #e4e9f2 100%),
-  slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
-  slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
-), corporate, corporate);
-
-$nb-themes: nb-register-theme((
-  layout-padding-top: 2.25rem,
-
-  menu-item-icon-margin: 0 0.5rem 0 0,
-
-  card-height-tiny: 13.5rem,
-  card-height-small: 21.1875rem,
-  card-height-medium: 28.875rem,
-  card-height-large: 36.5625rem,
-  card-height-giant: 44.25rem,
-  card-margin-bottom: 1.875rem,
-  card-header-with-select-padding-top: 0.5rem,
-  card-header-with-select-padding-bottom: 0.5rem,
-
-  select-min-width: 6rem,
-
-  slide-out-background: linear-gradient(270deg, #222b45 0%, #151a30 100%),
-  slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
-  slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
-), dark, dark);
+  popover-text-color: text-inverted-color,
+  toastr-text-color: text-inverted-color,
+  input-text-color: text-inverted-color,
+  alert-text-color: text-inverted-color,
+  select-option-text-color: text-inverted-color,
+  select-outline-icon-color: text-inverted-color,
+  select-outline-text-color: text-inverted-color,
+  select-filled-icon-color: text-inverted-color,
+  select-filled-text-color: text-inverted-color,
+  select-filled-placeholder-text-color: text-inverted-color,
+  select-hero-icon-color: text-inverted-color,
+  select-hero-text-color: text-inverted-color,
+  select-hero-placeholder-text-color: text-inverted-color,
+  datepicker-text-color: text-inverted-color,
+), header, material);
diff --git a/src/app/@theme/theme.module.ts b/src/app/@theme/theme.module.ts
index 5ae45d8c..ca2ed6ac 100644
--- a/src/app/@theme/theme.module.ts
+++ b/src/app/@theme/theme.module.ts
@@ -15,6 +15,7 @@ import {
 } from '@nebular/theme';
 import { NbEvaIconsModule } from '@nebular/eva-icons';
 import { NbSecurityModule } from '@nebular/security';
+import { MatRippleModule } from '@angular/material';
 
 import {
   FooterComponent,
@@ -38,6 +39,7 @@ import { DEFAULT_THEME } from './styles/theme.default';
 import { COSMIC_THEME } from './styles/theme.cosmic';
 import { CORPORATE_THEME } from './styles/theme.corporate';
 import { DARK_THEME } from './styles/theme.dark';
+import { MATERIAL_THEME } from './styles/theme.material';
 
 const NB_MODULES = [
   NbLayoutModule,
@@ -71,8 +73,8 @@ const PIPES = [
 ];
 
 @NgModule({
-  imports: [CommonModule, ...NB_MODULES],
-  exports: [CommonModule, ...PIPES, ...COMPONENTS],
+  imports: [CommonModule, MatRippleModule, ...NB_MODULES],
+  exports: [CommonModule, MatRippleModule, ...PIPES, ...COMPONENTS],
   declarations: [...COMPONENTS, ...PIPES],
 })
 export class ThemeModule {
@@ -82,9 +84,9 @@ export class ThemeModule {
       providers: [
         ...NbThemeModule.forRoot(
           {
-            name: 'default',
+            name: 'material',
           },
-          [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME ],
+          [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME, MATERIAL_THEME ],
         ).providers,
       ],
     };
diff --git a/src/app/pages/forms/buttons/buttons.component.html b/src/app/pages/forms/buttons/buttons.component.html
index b9bbeb50..4153078a 100644
--- a/src/app/pages/forms/buttons/buttons.component.html
+++ b/src/app/pages/forms/buttons/buttons.component.html
@@ -28,6 +28,30 @@
       </nb-card-body>
     </nb-card>
 
+    <nb-card>
+      <nb-card-header>Material Buttons</nb-card-header>
+      <nb-card-body>
+        <div class="buttons-row">
+          <button matRipple *ngFor="let status of statuses" nbButton [status]="status">
+            {{ status }}
+          </button>
+        </div>
+      </nb-card-body>
+    </nb-card>
+
+    <nb-card>
+      <nb-card-header>Buttons with Ripple</nb-card-header>
+      <nb-card-body>
+        <div class="buttons-row">
+          <button mat-raised-button>Basic</button>
+          <button mat-raised-button color="primary">Primary</button>
+          <button mat-raised-button color="accent">Accent</button>
+          <button mat-raised-button color="warn">Warn</button>
+          <button mat-raised-button disabled>Disabled</button>
+        </div>
+      </nb-card-body>
+    </nb-card>
+
     <nb-card>
       <nb-card-header>Outline Buttons</nb-card-header>
       <nb-card-body>
diff --git a/src/app/pages/forms/buttons/buttons.component.scss b/src/app/pages/forms/buttons/buttons.component.scss
index 71df8954..5875c968 100644
--- a/src/app/pages/forms/buttons/buttons.component.scss
+++ b/src/app/pages/forms/buttons/buttons.component.scss
@@ -5,7 +5,7 @@
     margin: -0.5rem;
   }
 
-  button[nbButton] {
+  button {
     margin: 0.5rem;
   }
 
diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.html b/src/app/pages/forms/form-inputs/form-inputs.component.html
index c40a0b6d..1bd8c0f2 100644
--- a/src/app/pages/forms/form-inputs/form-inputs.component.html
+++ b/src/app/pages/forms/form-inputs/form-inputs.component.html
@@ -19,6 +19,19 @@
         <input type="text" nbInput fullWidth fieldSize="large"  placeholder="Large Input">
       </nb-card-body>
     </nb-card>
+
+    <nb-card>
+      <nb-card-header>Material Inputs</nb-card-header>
+      <nb-card-body>
+        <mat-form-field>
+          <input matInput placeholder="Favorite food" value="Sushi">
+        </mat-form-field>
+
+        <mat-form-field>
+          <textarea matInput placeholder="Leave a comment"></textarea>
+        </mat-form-field>
+      </nb-card-body>
+    </nb-card>
   </div>
 
   <div class="col-lg-6">
diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.scss b/src/app/pages/forms/form-inputs/form-inputs.component.scss
index f3fbf932..2d138511 100644
--- a/src/app/pages/forms/form-inputs/form-inputs.component.scss
+++ b/src/app/pages/forms/form-inputs/form-inputs.component.scss
@@ -7,6 +7,10 @@ nb-card-body {
   }
 }
 
+mat-form-field {
+  width: 100%;
+}
+
 .full-name-inputs,
 .validation-checkboxes {
   display: flex;
diff --git a/src/app/pages/forms/forms.module.ts b/src/app/pages/forms/forms.module.ts
index 6782b85a..0d9347ad 100644
--- a/src/app/pages/forms/forms.module.ts
+++ b/src/app/pages/forms/forms.module.ts
@@ -10,6 +10,7 @@ import {
   NbSelectModule,
   NbUserModule,
 } from '@nebular/theme';
+import { MatButtonModule, MatFormFieldModule, MatInputModule } from '@angular/material';
 
 import { ThemeModule } from '../../@theme/theme.module';
 import { FormsRoutingModule } from './forms-routing.module';
@@ -33,6 +34,9 @@ import { ButtonsComponent } from './buttons/buttons.component';
     FormsRoutingModule,
     NbSelectModule,
     NbIconModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
   ],
   declarations: [
     FormsComponent,