diff --git a/kibicara-frontend/src/app/auth/register/register.component.html b/kibicara-frontend/src/app/auth/register/register.component.html
index 5116afb..ef70752 100644
--- a/kibicara-frontend/src/app/auth/register/register.component.html
+++ b/kibicara-frontend/src/app/auth/register/register.component.html
@@ -1,56 +1,67 @@
-<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
-<div *ngIf="info" class="alert alert-danger">{{ info }}</div>
-<h2>Register</h2>
-<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
-  <div class="form-group">
-    <label for="email">E-Mail</label>
-    <input
-      type="text"
-      formControlName="email"
-      class="form-control"
-      [ngClass]="{
-        'is-invalid': submitted && registerForm.controls.email.errors
-      }"
-    />
-    <div
-      *ngIf="submitted && registerForm.controls.email.errors"
-      class="invalid-feedback"
-    >
-      <div *ngIf="registerForm.controls.email.errors.required">
-        E-Mail is required
-      </div>
-    </div>
-  </div>
-  <div class="form-group">
-    <label for="password">Password</label>
-    <input
-      type="password"
-      formControlName="password"
-      class="form-control"
-      [ngClass]="{
-        'is-invalid': submitted && registerForm.controls.password.errors
-      }"
-    />
-    <div
-      *ngIf="submitted && registerForm.controls.password.errors"
-      class="invalid-feedback"
-    >
-      <div *ngIf="registerForm.controls.password.errors.required">
-        Password is required
-      </div>
-      <div *ngIf="registerForm.controls.password.errors.minlength">
-        Password must be at least 6 characters
-      </div>
-    </div>
-  </div>
-  <div class="form-group">
-    <button [disabled]="loading" class="btn btn-primary">
-      <span
-        *ngIf="loading"
-        class="spinner-border spinner-border-sm mr-1"
-      ></span>
-      Register
-    </button>
-    <a routerLink="/login" class="btn btn-link">Cancel</a>
-  </div>
-</form>
+<div class="container">
+  <div class="banner"></div>
+  <mat-card class="register-form">
+    <mat-card-header>
+      <h2>Register as a hood admin!</h2>
+    </mat-card-header>
+    <mat-card-content>
+      <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
+        <div class="input-container">
+          <mat-form-field appearance="fill">
+            <mat-label for="email">E-Mail</mat-label>
+            <input type="text" formControlName="email" matInput />
+            <mat-error
+              *ngIf="
+                registerForm.controls.email.errors &&
+                registerForm.controls.email.errors.required
+              "
+            >
+              E-Mail is required
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field appearance="fill">
+            <mat-label>Password</mat-label>
+            <input
+              type="password"
+              formControlName="password"
+              matInput
+              [type]="'password'"
+            />
+            <mat-error
+              *ngIf="
+                registerForm.controls.password.errors &&
+                registerForm.controls.password.errors.required
+              "
+            >
+              Password is required
+            </mat-error>
+            <mat-error
+              *ngIf="
+                registerForm.controls.password.errors &&
+                registerForm.controls.password.errors.minlength
+              "
+            >
+              Password requires minimal length 8
+            </mat-error>
+          </mat-form-field>
+        </div>
+        <div class="buttons">
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="loading"
+            class="btn btn-primary"
+          >
+            <span
+              *ngIf="loading"
+              class="spinner-border spinner-border-sm mr-1"
+            ></span>
+            Register
+          </button>
+          <a mat-button routerLink="/login" class="btn btn-link">Cancel</a>
+        </div>
+      </form>
+    </mat-card-content>
+  </mat-card>
+</div>
diff --git a/kibicara-frontend/src/app/auth/register/register.component.scss b/kibicara-frontend/src/app/auth/register/register.component.scss
index e69de29..cf905bc 100644
--- a/kibicara-frontend/src/app/auth/register/register.component.scss
+++ b/kibicara-frontend/src/app/auth/register/register.component.scss
@@ -0,0 +1,43 @@
+.input-container {
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  margin-left: 5%;
+  margin-right: 5%;
+  margin-bottom: 5%;
+  margin-top: 3%;
+}
+
+.mat-card:not([class*="mat-elevation-z"]) {
+  box-shadow: none;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin-left: 10%;
+  margin-right: 10%;
+  margin-top: 5%;
+  @media (max-width: 600px) {
+    grid-template-columns: 1fr;
+    margin-top: 10%;
+    margin-left: 5%;
+    margin-right: 5%;
+  }
+}
+
+.banner {
+  background: url("../../../assets/hoods1.jpg");
+  background-size: 100%;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.buttons {
+  margin-left: 20px;
+}
+
+.register-form {
+  margin-top: 10%;
+  margin-bottom: 10%;
+}
diff --git a/kibicara-frontend/src/app/auth/register/register.component.ts b/kibicara-frontend/src/app/auth/register/register.component.ts
index 57678a4..f9c9aab 100644
--- a/kibicara-frontend/src/app/auth/register/register.component.ts
+++ b/kibicara-frontend/src/app/auth/register/register.component.ts
@@ -3,6 +3,8 @@ import { AdminService } from '../../core/api';
 import { Validators, FormBuilder, FormGroup } from '@angular/forms';
 import { first } from 'rxjs/operators';
 import { Router, ActivatedRoute } from '@angular/router';
+import { LoginService } from 'src/app/core/auth/login.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-register',
@@ -13,23 +15,34 @@ export class RegisterComponent implements OnInit {
   registerForm: FormGroup;
   loading = false;
   submitted = false;
-  error: string;
-  info: string;
 
   constructor(
     private readonly adminService: AdminService,
     private formBuilder: FormBuilder,
-    private route: ActivatedRoute
-  ) {}
+    private route: ActivatedRoute,
+    private loginService: LoginService,
+    private router: Router,
+    private snackBar: MatSnackBar
+  ) {
+    if (this.loginService.currentHoodAdminValue) {
+      this.router.navigate(['/dashboard']);
+    }
+  }
 
   ngOnInit(): void {
     this.registerForm = this.formBuilder.group({
       email: ['', Validators.required],
-      password: ['', [Validators.required, Validators.minLength(6)]],
+      password: ['', [Validators.required, Validators.minLength(8)]],
     });
 
     if (this.route.snapshot.queryParams['error']) {
-      this.error = 'Invalid confirmation link. Try registering again';
+      this.snackBar.open(
+        'Invalid confirmation link. Try registering again',
+        'Close',
+        {
+          duration: 2000,
+        }
+      );
     }
   }
 
@@ -44,12 +57,23 @@ export class RegisterComponent implements OnInit {
       .pipe(first())
       .subscribe(
         (data) => {
-          this.info =
-            'Registration E-Mail has been sent. Please check your inbox.';
+          this.snackBar.open(
+            'Registration E-Mail has been sent. Please check your inbox.',
+            'Close',
+            {
+              duration: 2000,
+            }
+          );
           this.loading = false;
         },
         (error) => {
-          this.error = 'Registration failed! E-Mail exists or is not valid.';
+          this.snackBar.open(
+            'Registration failed! E-Mail exists or is not valid.',
+            'Close',
+            {
+              duration: 2000,
+            }
+          );
           this.loading = false;
         }
       );