Register component done with Angular-Material

14 files changed, 308 insertions, 264 deletions

diff --git a/src/DevHive.Angular/angular.json b/src/DevHive.Angular/angular.json
index 346be6f..c4b2bf6 100644
--- a/src/DevHive.Angular/angular.json
+++ b/src/DevHive.Angular/angular.json
@@ -28,6 +28,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -91,6 +92,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],
             "scripts": []
diff --git a/src/DevHive.Angular/package-lock.json b/src/DevHive.Angular/package-lock.json
index 3c9f354..10b35ce 100644
--- a/src/DevHive.Angular/package-lock.json
+++ b/src/DevHive.Angular/package-lock.json
@@ -5,25 +5,25 @@
   "requires": true,
   "dependencies": {
     "@angular-devkit/architect": {
-      "version": "0.1100.5",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1100.5.tgz",
-      "integrity": "sha512-yOYfucNouc1doTbcGbCNMXGMSc36+j97XpdNoeGyzFQ7GwezLAro0a9gxc5PdOxndfelkND7J1JuOjxdW5O17A==",
+      "version": "0.1100.6",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1100.6.tgz",
+      "integrity": "sha512-4O+cg3AimI2bNAxxdu5NrqSf4Oa8r8xL0+G2Ycd3jLoFv0h0ecJiNKEG5F6IpTprb4aexZD6pcxBJCqQ8MmzWQ==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "11.0.5",
+        "@angular-devkit/core": "11.0.6",
         "rxjs": "6.6.3"
       }
     },
     "@angular-devkit/build-angular": {
-      "version": "0.1100.5",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-0.1100.5.tgz",
-      "integrity": "sha512-lJYsnBImBAqUAIVC2qGY64UaC2uWOPZEpSWjYUxkRZA/c4IVCJj3M12CgONBjtcKYzFVXc1eojhrScukGIJJcg==",
+      "version": "0.1100.6",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-0.1100.6.tgz",
+      "integrity": "sha512-HcqsWiSIUxExGg3HRQScLOmF+ckVkCKolfpPcNOCCpBYxH/i8n4wDGLBP5Rtxky+0Qz+3nnAaFIpNb9p9aUmbg==",
       "dev": true,
       "requires": {
-        "@angular-devkit/architect": "0.1100.5",
-        "@angular-devkit/build-optimizer": "0.1100.5",
-        "@angular-devkit/build-webpack": "0.1100.5",
-        "@angular-devkit/core": "11.0.5",
+        "@angular-devkit/architect": "0.1100.6",
+        "@angular-devkit/build-optimizer": "0.1100.6",
+        "@angular-devkit/build-webpack": "0.1100.6",
+        "@angular-devkit/core": "11.0.6",
         "@babel/core": "7.12.3",
         "@babel/generator": "7.12.1",
         "@babel/plugin-transform-runtime": "7.12.1",
@@ -31,7 +31,7 @@
         "@babel/runtime": "7.12.1",
         "@babel/template": "7.10.4",
         "@jsdevtools/coverage-istanbul-loader": "3.0.5",
-        "@ngtools/webpack": "11.0.5",
+        "@ngtools/webpack": "11.0.6",
         "ansi-colors": "4.1.1",
         "autoprefixer": "9.8.6",
         "babel-loader": "8.1.0",
@@ -92,9 +92,9 @@
       }
     },
     "@angular-devkit/build-optimizer": {
-      "version": "0.1100.5",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.1100.5.tgz",
-      "integrity": "sha512-aKITFuiydR681eS1z84EIdOtqdxP/V5xGZuF3xjGmg5Ddwv36PweAHaCVJEB4btHSWH6uxMvW2hLXg2RTWbRNg==",
+      "version": "0.1100.6",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.1100.6.tgz",
+      "integrity": "sha512-Qkq7n6510N+nXmfZqpqpI0I6Td+b+06RRNmS7KftSNJntU1z5QYh4FggwlthZ5P0QUT92cnBQsnT8OgYqGnwbg==",
       "dev": true,
       "requires": {
         "loader-utils": "2.0.0",
@@ -102,23 +102,31 @@
         "tslib": "2.0.3",
         "typescript": "4.0.5",
         "webpack-sources": "2.0.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==",
+          "dev": true
+        }
       }
     },
     "@angular-devkit/build-webpack": {
-      "version": "0.1100.5",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1100.5.tgz",
-      "integrity": "sha512-oD5t2oCfyiCyyeZckrqBnQco94zIMkRnRGzy3lFDH7KMiL0DG9l7x3nxn9H0YunYWr55LsGWwXGoR7l03Kl+jw==",
+      "version": "0.1100.6",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1100.6.tgz",
+      "integrity": "sha512-kK0FlpYJHP25o1yzIGHQqIvO5kp+p6V5OwGpD2GGRZLlJqd3WdjY5DxnyZoX3/IofO6KsTnmm76fzTRqc62z/Q==",
       "dev": true,
       "requires": {
-        "@angular-devkit/architect": "0.1100.5",
-        "@angular-devkit/core": "11.0.5",
+        "@angular-devkit/architect": "0.1100.6",
+        "@angular-devkit/core": "11.0.6",
         "rxjs": "6.6.3"
       }
     },
     "@angular-devkit/core": {
-      "version": "11.0.5",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-11.0.5.tgz",
-      "integrity": "sha512-hwV8fjF8JNPJkiVWw8MNzeIfDo01aD/OAOlC4L5rQnVHn+i2EiU3brSDmFqyeHPPV3h/QjuBkS3tkN7gSnVWaQ==",
+      "version": "11.0.6",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-11.0.6.tgz",
+      "integrity": "sha512-nhvU5hH01r9qcexAqvIFU233treWWeW3ncs9UFYjD9Hys9sDSvqC3+bvGvl9vCG5FsyY7oDsjaVAipyUc+SFAg==",
       "dev": true,
       "requires": {
         "ajv": "6.12.6",
@@ -129,35 +137,52 @@
       }
     },
     "@angular-devkit/schematics": {
-      "version": "11.0.5",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-11.0.5.tgz",
-      "integrity": "sha512-0NKGC8Nf/4vvDpWKB7bwxIazvNnNHnZBX6XlyBXNl+fW8tpTef3PNMJMSErTz9LFnuv61vsKbc36u/Ek2YChWg==",
+      "version": "11.0.6",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-11.0.6.tgz",
+      "integrity": "sha512-hCyu/SSSiC6dKl/NxdWctknIrBqKR6pRe7DMArWowrZX6P9oi36LpKEFnKutE8+tXjsOqQj8XMBq9L64sXZWqg==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "11.0.5",
+        "@angular-devkit/core": "11.0.6",
         "ora": "5.1.0",
         "rxjs": "6.6.3"
       }
     },
     "@angular/animations": {
-      "version": "11.0.6",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-11.0.6.tgz",
-      "integrity": "sha512-PRlb2JogxrFJTySO5eBUGe2Oy+I7AW/1XynumH1JeBtCzYRizGxtj8Ekb9wRAT5ijWAcbOzW7rT4HFUNsVwh2g==",
+      "version": "11.0.7",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-11.0.7.tgz",
+      "integrity": "sha512-P3cluDGIsaj7vqvqIGW7xFCIXWa1lJDsHsmY3Fexk+ZVCncokftp5ZUANb2+DwOD3BPgd/WjBdXVjwzFQFsoVA==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "@angular/cdk": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.0.3.tgz",
+      "integrity": "sha512-hgbJXvZURKBnZawwxUrsZE/3a+HCJh2UhoLIng3cn5Q+WIW/4a37knDl8B9DYKBWrCqeINXNcUHVSKkWc/gjCA==",
       "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": "11.0.5",
-      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-11.0.5.tgz",
-      "integrity": "sha512-k4j/2z7qkuigJ1shH0McW1wW63clhrbrg98FK4/KWhU/sce5AgVjuHDQFycAclTwHesf7Vs6Gzt7zGlqUmeKIg==",
+      "version": "11.0.6",
+      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-11.0.6.tgz",
+      "integrity": "sha512-bwrXXyU23HjUlFl0CNCU+XMGa/enooqpMLcTAA15StVpKFHyaA4c57il/aqu+1IuB+zR6rGDzhAABuvRcHd+mQ==",
       "dev": true,
       "requires": {
-        "@angular-devkit/architect": "0.1100.5",
-        "@angular-devkit/core": "11.0.5",
-        "@angular-devkit/schematics": "11.0.5",
-        "@schematics/angular": "11.0.5",
-        "@schematics/update": "0.1100.5",
+        "@angular-devkit/architect": "0.1100.6",
+        "@angular-devkit/core": "11.0.6",
+        "@angular-devkit/schematics": "11.0.6",
+        "@schematics/angular": "11.0.6",
+        "@schematics/update": "0.1100.6",
         "@yarnpkg/lockfile": "1.1.0",
         "ansi-colors": "4.1.1",
         "debug": "4.2.0",
@@ -203,25 +228,25 @@
       }
     },
     "@angular/common": {
-      "version": "11.0.6",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-11.0.6.tgz",
-      "integrity": "sha512-zFuqCEn9UGQbMKPbBhCyo8McJs21EIlYsqXgQo62SQkIGVBlzfWnkkJuAXv8DNWN70yb1QHarZWW+6Y1CKFDGw==",
+      "version": "11.0.7",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-11.0.7.tgz",
+      "integrity": "sha512-9VuT9qrSP7Q91Wp276DDieCIZiTBrpLNoJzK/RygQShTymCVPg4Dsl3tQUKaHBPx9MexeqRG/HjN02DVpeqtsA==",
       "requires": {
         "tslib": "^2.0.0"
       }
     },
     "@angular/compiler": {
-      "version": "11.0.6",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-11.0.6.tgz",
-      "integrity": "sha512-Scfaowc13HrFr37O05ZwUU6xk25D7DUgzwLTCTCCEM++HMkoWMV44xVzCkx3nBojGN9CgXaOSe0tBkYnDl8WOA==",
+      "version": "11.0.7",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-11.0.7.tgz",
+      "integrity": "sha512-U+aGn6lP3iB184D2Z+OSK5vCwNtxtsF59T7nNJBMCCwcN7Qc5tfDBbSj1GI11XrIiuuoOxXbAp9BKS0dAyNCWw==",
       "requires": {
         "tslib": "^2.0.0"
       }
     },
     "@angular/compiler-cli": {
-      "version": "11.0.6",
-      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-11.0.6.tgz",
-      "integrity": "sha512-2rozDjBsHA1DGdwgdqo/cFFg+Rvuy99HaUjE060uqxlZ9QZLwxOJR1RxrScsebuEwPfqrOHzc9tK6lGOzBC0Sw==",
+      "version": "11.0.7",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-11.0.7.tgz",
+      "integrity": "sha512-04agqIPmw1exMeZjJmRzeYFgTEXYJ7gKD8TZipsGlu99uU/NQJIsetpzR7/bhPAKDH6YO0p/uavxV0nRpSTIQw==",
       "dev": true,
       "requires": {
         "@babel/core": "^7.8.6",
@@ -329,41 +354,49 @@
       }
     },
     "@angular/core": {
-      "version": "11.0.6",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-11.0.6.tgz",
-      "integrity": "sha512-npPTnFDldcxuDKFg5fJaFOsWvP4DjCRU2pOk83ck8XTzLwvkD3jfn4zPTpvYSFFyxvXHb2IPTMjx8Jy0AZoVvA==",
+      "version": "11.0.7",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-11.0.7.tgz",
+      "integrity": "sha512-Kj5uRZoK5+xfMTjkP3tw8oIF5hKTnoF9Bwh5m9GUKqg1wHVKOJcT5JBIEMc8qPyiFgALREA01reIzQdGMjX36A==",
       "requires": {
         "tslib": "^2.0.0"
       }
     },
     "@angular/forms": {
-      "version": "11.0.6",
-      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-11.0.6.tgz",
-      "integrity": "sha512-fKKAZgmmNA6GGwx39v1mPqifg6JmlrZdAg5JzOw1G7YWKUoDJcZEWwkI+bK7DsnWnDQ5Bu0ZH9HTJJvKt7ZG1Q==",
+      "version": "11.0.7",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-11.0.7.tgz",
+      "integrity": "sha512-+3A+SciMyHTdUwkKUz4XzC1DSYexQEbFLe0PKQIFSFOROmbssjnWJv7yO2HbzCpGa7oGKPYNlE5twYWyLxpvFg==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "@angular/material": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-11.0.3.tgz",
+      "integrity": "sha512-YTHmtKGwjAEFAOOmuivcwnINMPHxvM7iZQpTgZqDKNiqiv53cwry2Ctb54suRNT+D794z59D0/r+YocGkzFv3w==",
       "requires": {
         "tslib": "^2.0.0"
       }
     },
     "@angular/platform-browser": {
-      "version": "11.0.6",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-11.0.6.tgz",
-      "integrity": "sha512-A4b+l0k01Axf6aAEFsHteJ4HUbJHF6q0gZjjpyCe2+YUuEuqXLkls+Ba452Z0L88bzUclsYqju1lkDGBnykFXg==",
+      "version": "11.0.7",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-11.0.7.tgz",
+      "integrity": "sha512-W8Wt8jMUjcbpqGtqrNWAj0p7CLdjOxgVlbrgBXTbaoqdchvXH85YzGr7ohA3MuE61H90OcVK9OhfYQk5o6joSg==",
       "requires": {
         "tslib": "^2.0.0"
       }
     },
     "@angular/platform-browser-dynamic": {
-      "version": "11.0.6",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-11.0.6.tgz",
-      "integrity": "sha512-w3UK0OG0xdDbzZH2WMewNBYiVtjsRdPLjzmRxPe6Ymx9ltAYB7QLZN0qXC2QzmsQEjtbDw/QbI2DSWTc6ergag==",
+      "version": "11.0.7",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-11.0.7.tgz",
+      "integrity": "sha512-pUXCum1Z2DZV/34WR4Vfmkc5nWxbmVdwAA9pXbAarwAYqHIqOzX8rpRaHsuHBAR+SK+VH+xjproeLgsVfV8FSA==",
       "requires": {
         "tslib": "^2.0.0"
       }
     },
     "@angular/router": {
-      "version": "11.0.6",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-11.0.6.tgz",
-      "integrity": "sha512-MOf0+gGzkBamh3GlTLWoUE7l9QQGHRFB7R7Mpr/NGI3fRd+XK3OTw3aXj0pVxZ0MX90+Cfuf0n2PInn9NN0sRQ==",
+      "version": "11.0.7",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-11.0.7.tgz",
+      "integrity": "sha512-oh/MOPRSOCLRPsM/3CVUNYZ3pz3g+CzLOk5Vad/zFJmnGwjA/lQGJo2pl7VXVq3RF7MieaHlDWG5TexGlXAP5w==",
       "requires": {
         "tslib": "^2.0.0"
       }
@@ -717,9 +750,9 @@
       "dev": true
     },
     "@babel/plugin-proposal-async-generator-functions": {
-      "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.12.1.tgz",
-      "integrity": "sha512-d+/o30tJxFxrA1lhzJqiUcEJdI6jKlNregCv5bASeGf2Q4MXmnwH7viDo7nhx1/ohf09oaH8j1GVYG/e3Yqk6A==",
+      "version": "7.12.12",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.12.12.tgz",
+      "integrity": "sha512-nrz9y0a4xmUrRq51bYkWJIO5SBZyG2ys2qinHsN0zHDHVsUaModrkpyWWWXfGqYQmOL3x9sQIcTNN/pBGpo09A==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4",
@@ -987,9 +1020,9 @@
       }
     },
     "@babel/plugin-transform-block-scoping": {
-      "version": "7.12.11",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.12.11.tgz",
-      "integrity": "sha512-atR1Rxc3hM+VPg/NvNvfYw0npQEAcHuJ+MGZnFn6h3bo+1U3BWXMdFMlvVRApBTWKQMX7SOwRJZA5FBF/JQbvA==",
+      "version": "7.12.12",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.12.12.tgz",
+      "integrity": "sha512-VOEPQ/ExOVqbukuP7BYJtI5ZxxsmegTwzZ04j1aF0dkSypGo9XpDHuOrABsJu+ie+penpSJheDJ11x1BEZNiyQ==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4"
@@ -1472,39 +1505,39 @@
       }
     },
     "@ngtools/webpack": {
-      "version": "11.0.5",
-      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-11.0.5.tgz",
-      "integrity": "sha512-hM0LdOSlC6c7ij+BvIpAFbe7dpJhL+A51L5v6YbMA6aM0Sb/y+HpE2u34AHEQvute7cLe4EyOyvJ9jSinVAJhQ==",
+      "version": "11.0.6",
+      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-11.0.6.tgz",
+      "integrity": "sha512-vf5YNEpXWRa0fKC/BRq5sVVj2WnEqW8jn14YQRHwVt5ppUeyu8IKUF69p6W1MwZMgMqMaw/vPQ8LI5cFbyf3uw==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "11.0.5",
+        "@angular-devkit/core": "11.0.6",
         "enhanced-resolve": "5.3.1",
         "webpack-sources": "2.0.1"
       }
     },
     "@nodelib/fs.scandir": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
-      "integrity": "sha512-eGmwYQn3gxo4r7jdQnkrrN6bY478C3P+a/y72IJukF8LjB6ZHeB3c+Ehacj3sYeSmUXGlnA67/PmbM9CVwL7Dw==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
+      "integrity": "sha512-33g3pMJk3bg5nXbL/+CY6I2eJDzZAni49PfJnL5fghPTggPvBd/pFNSgJsdAgWptuFu7qq/ERvOYFlhvsLTCKA==",
       "dev": true,
       "requires": {
-        "@nodelib/fs.stat": "2.0.3",
+        "@nodelib/fs.stat": "2.0.4",
         "run-parallel": "^1.1.9"
       }
     },
     "@nodelib/fs.stat": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz",
-      "integrity": "sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.4.tgz",
+      "integrity": "sha512-IYlHJA0clt2+Vg7bccq+TzRdJvv19c2INqBSsoOLp1je7xjtr7J26+WXR72MCdvU9q1qTzIWDfhMf+DRvQJK4Q==",
       "dev": true
     },
     "@nodelib/fs.walk": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.4.tgz",
-      "integrity": "sha512-1V9XOY4rDW0rehzbrcqAmHnz8e7SKvX27gh8Gt2WgB0+pdzdiLV83p72kZPU+jvMbS1qU5mauP2iOvO8rhmurQ==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.6.tgz",
+      "integrity": "sha512-8Broas6vTtW4GIXTAHDoE32hnN2M5ykgCpWGbuXHQ15vEMqr23pB76e/GZcYsZCHALv50ktd24qhEyKr6wBtow==",
       "dev": true,
       "requires": {
-        "@nodelib/fs.scandir": "2.1.3",
+        "@nodelib/fs.scandir": "2.1.4",
         "fastq": "^1.6.0"
       }
     },
@@ -1526,24 +1559,24 @@
       }
     },
     "@schematics/angular": {
-      "version": "11.0.5",
-      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-11.0.5.tgz",
-      "integrity": "sha512-7p2wweoJYhim8YUy3ih1SrPGqRsa6+aEFbYgo9v4zt7b3tOva8SvkbC2alayK74fclzQ7umqa6xAwvWhy8ORvg==",
+      "version": "11.0.6",
+      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-11.0.6.tgz",
+      "integrity": "sha512-XUcpOrlcp55PBHrgpIVx69lnhDY6ro35BSRmqNmjXik56qcOkfvdki8vvyW9EsWvu9/sfBSsVDdparlbVois7w==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "11.0.5",
-        "@angular-devkit/schematics": "11.0.5",
+        "@angular-devkit/core": "11.0.6",
+        "@angular-devkit/schematics": "11.0.6",
         "jsonc-parser": "2.3.1"
       }
     },
     "@schematics/update": {
-      "version": "0.1100.5",
-      "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.1100.5.tgz",
-      "integrity": "sha512-BYtKKuiWsrlc4FMW3bRyl4tm6lWNMTi8oql/mtkSgH7V5eMmaLDJtM+zDl+qyC/KHPxbHTfoHDapfv1tITSWjA==",
+      "version": "0.1100.6",
+      "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.1100.6.tgz",
+      "integrity": "sha512-+B8n+k+zZ3VYOhjNBsLqzjp8O9ZdUWgdpf9L8XAA7mh/oPwufXpExyEc66uAS07imvUMmjz6i8E2eNWV/IjBJg==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "11.0.5",
-        "@angular-devkit/schematics": "11.0.5",
+        "@angular-devkit/core": "11.0.6",
+        "@angular-devkit/schematics": "11.0.6",
         "@yarnpkg/lockfile": "1.1.0",
         "ini": "1.3.6",
         "npm-package-arg": "^8.0.0",
@@ -1581,9 +1614,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "12.19.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.19.9.tgz",
-      "integrity": "sha512-yj0DOaQeUrk3nJ0bd3Y5PeDRJ6W0r+kilosLA+dzF3dola/o9hxhMSg2sFvVcA2UHS5JSOsZp4S0c1OEXc4m1Q==",
+      "version": "12.19.12",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.19.12.tgz",
+      "integrity": "sha512-UwfL2uIU9arX/+/PRcIkT08/iBadGN2z6ExOROA2Dh5mAuWTBj6iJbQX4nekiV5H8cTrEG569LeX+HRco9Cbxw==",
       "dev": true
     },
     "@types/parse-json": {
@@ -2602,16 +2635,16 @@
       }
     },
     "browserslist": {
-      "version": "4.16.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.0.tgz",
-      "integrity": "sha512-/j6k8R0p3nxOC6kx5JGAxsnhc9ixaWJfYc+TNTzxg6+ARaESAvQGV7h0uNOB4t+pLQJZWzcrMxXOxjgsCj3dqQ==",
+      "version": "4.16.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.1.tgz",
+      "integrity": "sha512-UXhDrwqsNcpTYJBTZsbGATDxZbiVDsx6UjpmRUmtnP10pr8wAYr5LgFoEFw9ixriQH2mv/NX2SfGzE/o8GndLA==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001165",
+        "caniuse-lite": "^1.0.30001173",
         "colorette": "^1.2.1",
-        "electron-to-chromium": "^1.3.621",
+        "electron-to-chromium": "^1.3.634",
         "escalade": "^3.1.1",
-        "node-releases": "^1.1.67"
+        "node-releases": "^1.1.69"
       }
     },
     "browserstack": {
@@ -2785,9 +2818,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001170",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001170.tgz",
-      "integrity": "sha512-Dd4d/+0tsK0UNLrZs3CvNukqalnVTRrxb5mcQm8rHL49t7V5ZaTygwXkrq+FB+dVDf++4ri8eJnFEJAB8332PA==",
+      "version": "1.0.30001173",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001173.tgz",
+      "integrity": "sha512-R3aqmjrICdGCTAnSXtNyvWYMK3YtV5jwudbq0T7nN9k4kmE4CBuwPqyJ+KBzepSTh0huivV2gLbSMEzTTmfeYw==",
       "dev": true
     },
     "canonical-path": {
@@ -3399,12 +3432,12 @@
       "dev": true
     },
     "core-js-compat": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.8.1.tgz",
-      "integrity": "sha512-a16TLmy9NVD1rkjUGbwuyWkiDoN0FDpAwrfLONvHFQx0D9k7J9y0srwMT8QP/Z6HE3MIFaVynEeYwZwPX1o5RQ==",
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.8.2.tgz",
+      "integrity": "sha512-LO8uL9lOIyRRrQmZxHZFl1RV+ZbcsAkFWTktn5SmH40WgLtSNYN4m4W2v9ONT147PxBY/XrRhrWq8TlvObyUjQ==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.15.0",
+        "browserslist": "^4.16.0",
         "semver": "7.0.0"
       },
       "dependencies": {
@@ -4165,9 +4198,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.629",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.629.tgz",
-      "integrity": "sha512-iSPPJtPvHrMAvYOt+9cdbDmTasPqwnwz4lkP8Dn200gDNUBQOLQ96xUsWXBwXslAo5XxdoXAoQQ3RAy4uao9IQ==",
+      "version": "1.3.634",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.634.tgz",
+      "integrity": "sha512-QPrWNYeE/A0xRvl/QP3E0nkaEvYUvH3gM04ZWYtIa6QlSpEetRlRI1xvQ7hiMIySHHEV+mwDSX8Kj4YZY6ZQAw==",
       "dev": true
     },
     "elliptic": {
@@ -4862,9 +4895,9 @@
       "dev": true
     },
     "fastq": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.9.0.tgz",
-      "integrity": "sha512-i7FVWL8HhVY+CTkwFxkN2mk3h+787ixS5S63eb78diVRc1MCssarHq3W5cj0av7YDSwmaV928RNag+U1etRQ7w==",
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.10.0.tgz",
+      "integrity": "sha512-NL2Qc5L3iQEsyYzweq7qfgy5OtXCmGzGvhElGEd/SoFWEMOEczNh5s5ocaF01HDetxz+p8ecjNPA6cZxxIHmzA==",
       "dev": true,
       "requires": {
         "reusify": "^1.0.4"
@@ -5248,9 +5281,9 @@
       "dev": true
     },
     "globby": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.1.tgz",
-      "integrity": "sha512-iH9RmgwCmUJHi2z5o2l3eTtGBtXek1OYlHrbcxOYugyHLmAsZrPj43OtHThd62Buh/Vv6VyCBD2bdyWcGNQqoQ==",
+      "version": "11.0.2",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.2.tgz",
+      "integrity": "sha512-2ZThXDvvV8fYFRVIxnrMQBipZQDr7MxKAmQK1vujaj9/7eF0efG7BPUKJ7jP7G5SLF37xKDXvO4S/KKLj/Z0og==",
       "dev": true,
       "requires": {
         "array-union": "^2.1.0",
@@ -7627,9 +7660,9 @@
       }
     },
     "node-releases": {
-      "version": "1.1.67",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.67.tgz",
-      "integrity": "sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==",
+      "version": "1.1.69",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.69.tgz",
+      "integrity": "sha512-DGIjo79VDEyAnRlfSqYTsy+yoHd2IOjJiKUozD2MV2D85Vso6Bug56mb9tT/fY5Urt0iqk01H7x+llAruDR2zA==",
       "dev": true
     },
     "normalize-package-data": {
@@ -7676,6 +7709,11 @@
       "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
       "dev": true
     },
+    "normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+    },
     "npm-bundled": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.1.tgz",
@@ -8760,9 +8798,9 @@
           }
         },
         "import-fresh": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.2.tgz",
-          "integrity": "sha512-cTPNrlvJT6twpYy+YmKUKrTSjWFs3bjYjAhCwm+z4EOCubZxAuO+hHpRN64TqjEaYSHs7tJAE0w1CKMGmsG/lw==",
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+          "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
           "dev": true,
           "requires": {
             "parent-module": "^1.0.0",
@@ -10044,6 +10082,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "reset-css": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/reset-css/-/reset-css-5.0.1.tgz",
+      "integrity": "sha512-VyuJdNFfp5x/W6e5wauJM59C02Vs0P22sxzZGhQMPaqu/NGTeFxlBFOOw3eq9vQd19gIDdZp7zi89ylyKOJ33Q=="
+    },
     "resolve": {
       "version": "1.19.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz",
@@ -11586,9 +11629,9 @@
       "dev": true
     },
     "tar": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.0.5.tgz",
-      "integrity": "sha512-0b4HOimQHj9nXNEAA7zWwMM91Zhhba3pspja6sQbgTpynOJf+bkjBnfybNYzbpLbnwXnbyB4LOREvlyXLkCHSg==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.0.tgz",
+      "integrity": "sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==",
       "dev": true,
       "requires": {
         "chownr": "^2.0.0",
@@ -11826,9 +11869,9 @@
       "dev": true
     },
     "tslib": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
-      "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+      "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
     },
     "tslint": {
       "version": "6.1.3",
diff --git a/src/DevHive.Angular/package.json b/src/DevHive.Angular/package.json
index 3a5d30e..833c257 100644
--- a/src/DevHive.Angular/package.json
+++ b/src/DevHive.Angular/package.json
@@ -11,25 +11,29 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~11.0.6",
-    "@angular/common": "~11.0.6",
-    "@angular/compiler": "~11.0.6",
-    "@angular/core": "~11.0.6",
-    "@angular/forms": "~11.0.6",
-    "@angular/platform-browser": "~11.0.6",
-    "@angular/platform-browser-dynamic": "~11.0.6",
-    "@angular/router": "~11.0.6",
+    "@angular/animations": "^11.0.7",
+    "@angular/cdk": "~11.0.2-sha-c6231e19b",
+    "@angular/common": "^11.0.7",
+    "@angular/compiler": "^11.0.7",
+    "@angular/core": "^11.0.7",
+    "@angular/forms": "^11.0.7",
+    "@angular/material": "^11.0.3",
+    "@angular/platform-browser": "^11.0.7",
+    "@angular/platform-browser-dynamic": "^11.0.7",
+    "@angular/router": "^11.0.7",
     "guid-typescript": "^1.0.9",
+    "normalize.css": "^8.0.1",
+    "reset-css": "^5.0.1",
     "rxjs": "~6.6.0",
-    "tslib": "^2.0.0",
+    "tslib": "^2.1.0",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1100.5",
-    "@angular/cli": "~11.0.5",
-    "@angular/compiler-cli": "~11.0.6",
+    "@angular-devkit/build-angular": "^0.1100.6",
+    "@angular/cli": "^11.0.6",
+    "@angular/compiler-cli": "^11.0.7",
     "@types/jasmine": "~3.6.0",
-    "@types/node": "^12.11.1",
+    "@types/node": "^12.19.12",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
diff --git a/src/DevHive.Angular/src/app/app.component.css b/src/DevHive.Angular/src/app/app.component.css
index acac3cf..aaebe5b 100644
--- a/src/DevHive.Angular/src/app/app.component.css
+++ b/src/DevHive.Angular/src/app/app.component.css
@@ -1,4 +1,4 @@
-div {
+.main {
   width: 100%;
   height: 100%;
 }
diff --git a/src/DevHive.Angular/src/app/app.component.html b/src/DevHive.Angular/src/app/app.component.html
index fb45f37..c021c8c 100644
--- a/src/DevHive.Angular/src/app/app.component.html
+++ b/src/DevHive.Angular/src/app/app.component.html
@@ -1,5 +1,5 @@
-<div>
-  <app-login></app-login>
+<div class="main">
+  <!-- <app-login></app-login> -->
   <app-register></app-register>
 </div>
 
diff --git a/src/DevHive.Angular/src/app/app.module.ts b/src/DevHive.Angular/src/app/app.module.ts
index 667ae12..3c7c98b 100644
--- a/src/DevHive.Angular/src/app/app.module.ts
+++ b/src/DevHive.Angular/src/app/app.module.ts
@@ -1,6 +1,10 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -16,7 +20,11 @@ import { RegisterComponent } from './components/register/register.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    BrowserAnimationsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/DevHive.Angular/src/app/components/login/login.component.spec.ts b/src/DevHive.Angular/src/app/components/login/login.component.spec.ts
deleted file mode 100644
index d2c0e6c..0000000
--- a/src/DevHive.Angular/src/app/components/login/login.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { LoginComponent } from './login.component';
-
-describe('LoginComponent', () => {
-  let component: LoginComponent;
-  let fixture: ComponentFixture<LoginComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ LoginComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(LoginComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/DevHive.Angular/src/app/components/register/register.component.css b/src/DevHive.Angular/src/app/components/register/register.component.css
index f8b6963..396a27c 100644
--- a/src/DevHive.Angular/src/app/components/register/register.component.css
+++ b/src/DevHive.Angular/src/app/components/register/register.component.css
@@ -1,56 +1,48 @@
 #content {
 	height: 100%;
-  max-width: 20em;
-	margin-left: auto;
-	margin-right: auto;
+	max-width: 25%;
+	margin: auto;
+	margin-top: 10%;
 
 	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-direction: column;
+	flex-wrap: nowrap;
+	flex-flow: column;
 }
 
-#title {
-	font-size: 2em;
-	font-weight: bold;
-}
-
-#content input[type=text], #content #submit-btn {
-	border: 2px solid black;
-	border-radius: 0.4em;
-	box-sizing: border-box;
+#content hr {
 	width: 100%;
-	margin-top: 0.5em;
-  font-size: 0.8em;
-  padding: 0.3em;
+	border: 1px solid black;
+	box-sizing: border-box;
+	margin-top: 2%;
+	margin-bottom: 2%;
 }
 
-#content input[type=text]:nth-last-of-type(1) {
-  margin-bottom: 0.5em;
+#content mat-form-field {
+	width: 100%;
 }
 
-input[type=text]:focus, button[type=submit]:focus {
-  outline: 0;
+.title {
+	text-align: center;
+	font-size: 250%;
+	font-weight: bold;
 }
 
-#content hr {
+.submit-btn {
 	width: 100%;
-	border: 1px solid black;
-	box-sizing: border-box;
-}
-
-#submit-btn {
-  background-color: black;
-  color: white;
-  text-align: center;
+	background-color: black;
+	color: white;
+	text-align: center;
+	margin-top: 1%;
+	
+	border-radius: 10px;
 }
 
-#submit-btn:hover {
-  cursor: pointer;
-  border-color: darkgrey !important;
-  background-color: darkgrey;
+.submit-btn:hover {
+	cursor: pointer;
+	border-color: darkgrey;
+	background-color: darkgrey;
 }
 
-#submit-btn:active {
-  transform: scale(0.9);
+.submit-btn:active {
+	transform: scale(0.9);
 }
diff --git a/src/DevHive.Angular/src/app/components/register/register.component.html b/src/DevHive.Angular/src/app/components/register/register.component.html
index c701795..ee9c2ba 100644
--- a/src/DevHive.Angular/src/app/components/register/register.component.html
+++ b/src/DevHive.Angular/src/app/components/register/register.component.html
@@ -1,19 +1,52 @@
 <div id="content">
-	<div id="title">Register</div>
+	<h1 class="title">Register</h1>
 
 	<form [formGroup]="registerUserFormGroup" (ngSubmit)="onSubmit()">
 		<hr>
-		Value: {{ registerUserFormGroup.value | json }}
-		<hr>
+		<!-- Value: {{ registerUserFormGroup.value | json }}
+		<hr> -->
+
+		<mat-form-field class="firstNameField">
+			<mat-label>First Name* </mat-label>
+			<input matInput placeholder="Goshko, is that u?" formControlName="firstName">
+
+			<mat-error *ngIf="firstName?.invalid">Min length of 3</mat-error>
+			<!-- <mat-error *ngIf="!firstName.required">* This is required</mat-error> -->
+		</mat-form-field>
+		
+		<mat-form-field class="lastNameField">
+			<mat-label>Last Name* </mat-label>
+			<input matInput placeholder="Trapov? Really??" formControlName="lastName">
+
+			<mat-error *ngIf="lastName?.invalid">Min length of 3</mat-error>
+			<!-- <mat-error *ngIf="!firstName.required">* This is required</mat-error> -->
+		</mat-form-field>
+		
+		<mat-form-field class="usernameField">
+			<mat-label>Username* </mat-label>
+			<input matInput placeholder="Think of something cool to flex on other kids" formControlName="username">
+
+			<mat-error *ngIf="username?.invalid">Min length of 3</mat-error>
+			<!-- <mat-error *ngIf="!firstName.required">* This is required</mat-error> -->
+		</mat-form-field>
+		
+		<mat-form-field class="emailField">
+			<mat-label>Email* </mat-label>
+			<input matInput placeholder="You expect an email joke? I have none, mail me one" formControlName="email">
+
+			<mat-error *ngIf="email?.invalid">You dummy, enter @</mat-error>
+			<!-- <mat-error *ngIf="!firstName.required">* This is required</mat-error> -->
+		</mat-form-field>
 		
-		<label for="firstName">First Name</label>
-		<input type="text" placeholder="First Name" formControlName="firstName">
-		<input type="text" placeholder="Last Name" formControlName="lastName">
-		<input type="text" placeholder="Username" formControlName="username">
-		<input type="text" placeholder="Password" formControlName="password">
-		<input type="text" placeholder="Email" formControlName="email">
+		<mat-form-field class="passwordField">
+			<mat-label>Password* </mat-label>
+			<input matInput type="password" placeholder="Make sure it's long & strong(just like my d***)" formControlName="password">
 
+			<mat-hint align="end">You must have at least one number</mat-hint>
+			<mat-error *ngIf="password?.invalid">Min length of 5</mat-error>
+			<!-- <mat-error *ngIf="!firstName.required">* This is required</mat-error> -->
+		</mat-form-field>
 		<hr>
-		<button type="submit" value="Submit" id="submit-btn">Submit</button>
+		<button mat-button class="submit-btn" type="submit">Submit</button>
 	</form>
 </div>
diff --git a/src/DevHive.Angular/src/app/components/register/register.component.spec.ts b/src/DevHive.Angular/src/app/components/register/register.component.spec.ts
deleted file mode 100644
index f6db869..0000000
--- a/src/DevHive.Angular/src/app/components/register/register.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { RegisterComponent } from './register.component';
-
-describe('RegisterComponent', () => {
-  let component: RegisterComponent;
-  let fixture: ComponentFixture<RegisterComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ RegisterComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(RegisterComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/DevHive.Angular/src/app/components/register/register.component.ts b/src/DevHive.Angular/src/app/components/register/register.component.ts
index 2619353..8f7ea48 100644
--- a/src/DevHive.Angular/src/app/components/register/register.component.ts
+++ b/src/DevHive.Angular/src/app/components/register/register.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Title } from '@angular/platform-browser';
 
 @Component({
@@ -18,26 +18,26 @@ export class RegisterComponent implements OnInit {
 
   ngOnInit(): void {
     this.registerUserFormGroup = this.fb.group({
-      firstName: ['', [
+      firstName: new FormControl('', [
         Validators.required,
         Validators.minLength(3)
-      ]],
-      lastName: ['', [
+      ]),
+      lastName: new FormControl('', [
         Validators.required,
         Validators.minLength(3)
-      ]],
-      username: ['', [
+      ]),
+      username: new FormControl('', [
         Validators.required,
         Validators.minLength(3)
-      ]],
-      email: ['', [
+      ]),
+      email: new FormControl('', [
         Validators.required,
         Validators.email,
-      ]],
-      password: ['', [
+      ]),
+      password: new FormControl('', [
         Validators.required,
         // Add password pattern
-      ]],
+      ]),
     });
 
     this.registerUserFormGroup.valueChanges.subscribe(console.log);
diff --git a/src/DevHive.Angular/src/index.html b/src/DevHive.Angular/src/index.html
index f41ff62..d488ca9 100644
--- a/src/DevHive.Angular/src/index.html
+++ b/src/DevHive.Angular/src/index.html
@@ -5,9 +5,11 @@
   <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>
 
diff --git a/src/DevHive.Angular/src/reset.css b/src/DevHive.Angular/src/reset.css
index 27acba5..d9ac20b 100644
--- a/src/DevHive.Angular/src/reset.css
+++ b/src/DevHive.Angular/src/reset.css
@@ -1,15 +1,20 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v5.0.1 | 20191019
+   License: none (public domain)
+*/
+
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
-dl, dt, dd, ol, ul, li,
+dl, dt, dd, menu, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+main, menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
 	margin: 0;
 	padding: 0;
@@ -19,14 +24,18 @@ time, mark, audio, video {
 	vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
+article, aside, details, figcaption, figure,
+footer, header, hgroup, main, menu, nav, section {
 	display: block;
 }
+/* HTML5 hidden-attribute fix for newer browsers */
+*[hidden] {
+    display: none;
+}
 body {
 	line-height: 1;
 }
-ol, ul {
+menu, ol, ul {
 	list-style: none;
 }
 blockquote, q {
@@ -40,4 +49,4 @@ q:before, q:after {
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
-}
\ No newline at end of file
+}
diff --git a/src/DevHive.Angular/src/styles.css b/src/DevHive.Angular/src/styles.css
index 7dd6a23..9acf23f 100644
--- a/src/DevHive.Angular/src/styles.css
+++ b/src/DevHive.Angular/src/styles.css
@@ -1,4 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
+@import "./reset.css";
 
 html, body {
 	height: 100%;