diff --git a/src/app/admin/user-crud-dialog/user-crud.dialog.component.html b/src/app/admin/user-crud-dialog/user-crud.dialog.component.html
index 387ef0f..59cead6 100644
--- a/src/app/admin/user-crud-dialog/user-crud.dialog.component.html
+++ b/src/app/admin/user-crud-dialog/user-crud.dialog.component.html
@@ -1,33 +1,45 @@
-<form (ngSubmit)="closeDialog()" [formGroup]="form" *ngIf="form != null">
-  <mat-form-field *ngIf="!data || !data.email">
-    <input formControlName="email" matInput placeholder="Email" required type="email">
-  </mat-form-field>
-  <h3 *ngIf="data && data.email" class="mat-h3">{{data.email}}</h3>
+@if (form != null) {
+  <form (ngSubmit)="closeDialog()" [formGroup]="form">
+    @if (!data || !data.email) {
+      <mat-form-field>
+        <input formControlName="email" matInput placeholder="Email" required type="email">
+      </mat-form-field>
+    }
+    @if (data && data.email) {
+      <h3 class="mat-h3">{{ data.email }}</h3>
+    }
 
-  <mat-form-field *ngIf="form.controls['password'].enabled">
-    <input formControlName="password" matInput placeholder="Password" required type="password">
-  </mat-form-field>
+    @if (form.controls['password'].enabled) {
+      <mat-form-field>
+        <input formControlName="password" matInput placeholder="Password" required type="password">
+      </mat-form-field>
+    }
 
-  <mat-form-field>
-    <mat-select formControlName="roles" matInput multiple placeholder="Role">
-      <mat-option *ngFor="let role of roles" [value]="role">
-        {{ role }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
+    <mat-form-field>
+      <mat-select formControlName="roles" matInput multiple placeholder="Role">
+        @for (role of roles; track role) {
+          <mat-option [value]="role">
+            {{ role }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
 
-  <button *ngIf="!data" [disabled]="form.invalid" class="btn" mat-raised-button type="submit">
-    <mat-icon>add_to_queue</mat-icon>
-    Create
-  </button>
-  <ng-container *ngIf="data">
-    <button [disabled]="form.invalid" class="btn" mat-raised-button type="submit">
-      <mat-icon>update</mat-icon>
-      Update
-    </button>
-    <button (click)="destroy = true" class="btn" mat-raised-button type="submit">
-      <mat-icon>delete</mat-icon>
-      Delete
-    </button>
-  </ng-container>
-</form>
+    @if (!data) {
+      <button [disabled]="form.invalid" class="btn" mat-raised-button type="submit">
+        <mat-icon>add_to_queue</mat-icon>
+        Create
+      </button>
+    }
+    @if (data) {
+      <button [disabled]="form.invalid" class="btn" mat-raised-button type="submit">
+        <mat-icon>update</mat-icon>
+        Update
+      </button>
+      <button (click)="destroy = true" class="btn" mat-raised-button type="submit">
+        <mat-icon>delete</mat-icon>
+        Delete
+      </button>
+    }
+  </form>
+}
diff --git a/src/app/admin/users-admin/users-admin.component.html b/src/app/admin/users-admin/users-admin.component.html
index b2608c9..4fea106 100644
--- a/src/app/admin/users-admin/users-admin.component.html
+++ b/src/app/admin/users-admin/users-admin.component.html
@@ -1,4 +1,4 @@
-<mat-toolbar color="secondary">
+<mat-toolbar color="secondary"  style="background: #F5F5F5 !important;">
   <h1 class="mat-h1">Users</h1>
 
   <span class="example-fill-remaining-space"></span>
@@ -12,25 +12,27 @@ <h1 class="mat-h1">Users</h1>
   </mat-form-field>
 </mat-toolbar>
 
-<mat-table #table [dataSource]="usersDataSource" *ngIf="usersDataSource != null">
-  <ng-container matColumnDef="email">
-    <mat-header-cell *cdkHeaderCellDef> Email</mat-header-cell>
-    <mat-cell *cdkCellDef="let element">
-      <mat-icon>border_color</mat-icon>
-      {{element.email}}
-    </mat-cell>
-  </ng-container>
+@if (usersDataSource != null) {
+  <mat-table #table [dataSource]="usersDataSource">
+    <ng-container matColumnDef="email">
+      <mat-header-cell *cdkHeaderCellDef> Email</mat-header-cell>
+      <mat-cell *cdkCellDef="let element">
+        <mat-icon>border_color</mat-icon>
+        {{element.email}}
+      </mat-cell>
+    </ng-container>
 
-  <ng-container matColumnDef="roles">
-    <mat-header-cell *cdkHeaderCellDef> Roles</mat-header-cell>
-    <mat-cell *cdkCellDef="let element"> {{element.roles}}</mat-cell>
-  </ng-container>
+    <ng-container matColumnDef="roles">
+      <mat-header-cell *cdkHeaderCellDef> Roles</mat-header-cell>
+      <mat-cell *cdkCellDef="let element"> {{element.roles}}</mat-cell>
+    </ng-container>
 
-  <ng-container matColumnDef="createdAt">
-    <mat-header-cell *cdkHeaderCellDef> createdAt</mat-header-cell>
-    <mat-cell *cdkCellDef="let element"> {{element.createdAt}}</mat-cell>
-  </ng-container>
+    <ng-container matColumnDef="createdAt">
+      <mat-header-cell *cdkHeaderCellDef> createdAt</mat-header-cell>
+      <mat-cell *cdkCellDef="let element"> {{element.createdAt}}</mat-cell>
+    </ng-container>
 
-  <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row (click)="selected(row)" *cdkRowDef="let row; columns: displayedColumns;"></mat-row>
-</mat-table>
+    <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row (click)="selected(row)" *cdkRowDef="let row; columns: displayedColumns;"></mat-row>
+  </mat-table>
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 8f648ac..39413a1 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,5 +1,9 @@
-<app-sidenav [openedSubject]="openedSubject"></app-sidenav>
+<app-sidenav #sidenav [openedSubject]="openedSubject"></app-sidenav>
 
-<div (click)="dismissSidebar()">
-  <router-outlet></router-outlet>
-</div>
+<span (click)="sidenav.close()">
+  <router-outlet class="app-body"></router-outlet>
+</span>
+
+<app-footer class="footer" (click)="sidenav.close()">
+  <app-server-status></app-server-status>
+</app-footer>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e69de29..ca24e0e 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +1,17 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.footer {
+  max-height: 200px;
+  flex: 1;
+  background: #3f51b5 !important;
+  color: white;
+}
+
+.app-body {
+  margin: 0;
+  padding: 0;
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 6f1a902..517aa86 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { Component, HostListener } from '@angular/core';
+
 import { Subject } from "rxjs";
 
 @Component({
@@ -11,7 +11,8 @@ export class AppComponent {
   title = "ng-material-scaffold";
   openedSubject = new Subject<boolean>();
 
-  dismissSidebar() {
+  // Close the sidebar when ESC is pressed
+  @HostListener('document:keydown.escape', ['$event']) onKeydownHandler(_: KeyboardEvent) {
     this.openedSubject.next(false);
   }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 3ff232c..98553ce 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -20,6 +20,8 @@ import { AlertsModule } from './alerts/alerts.module';
 import { AuthGuard } from './auth/auth.guard';
 import { AuthInterceptor } from './auth/auth.interceptors';
 import { AppRoutingModule } from './app.routes.module';
+import { FooterModule } from "./footer/footer.module";
+import { ServerStatusModule } from "./server-status/server-status.module";
 import { AppComponent } from './app.component';
 
 @NgModule({
@@ -28,11 +30,10 @@ import { AppComponent } from './app.component';
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule,
     BrowserAnimationsModule,
     HttpClientModule,
     LayoutModule,
-    BrowserAnimationsModule,
+
     MatToolbarModule,
     MatButtonModule,
     MatSidenavModule,
@@ -41,8 +42,12 @@ import { AppComponent } from './app.component';
     MatGridListModule,
     MatCardModule,
     MatMenuModule,
+
+    AppRoutingModule,
     AlertsModule.forRoot(),
-    SidenavModule
+    SidenavModule,
+    FooterModule,
+    ServerStatusModule
   ],
   providers: [
     AuthGuard,
diff --git a/src/app/auth/login/login.component.html b/src/app/auth/login/login.component.html
index 227f166..3587b1f 100644
--- a/src/app/auth/login/login.component.html
+++ b/src/app/auth/login/login.component.html
@@ -1,21 +1,23 @@
 <mat-card>
   <mat-card-header><h1 class="mat-h1">Login</h1></mat-card-header>
   <mat-card-content>
-    <form (ngSubmit)="login()" *ngIf="!authService.loggedIn() && form != null" [formGroup]="form" novalidate>
-      <mat-form-field class="example-full-width form-group">
-        <input formControlName="email" id="email" matInput name="email" placeholder="Email" type="email">
-      </mat-form-field>
+    @if (authService.loggedIn()) {
+      <p>You are logged in.</p>
+    } @else if (form != null) {
+      <form (ngSubmit)="login()" [formGroup]="form" novalidate>
+        <mat-form-field class="example-full-width form-group">
+          <input formControlName="email" id="email" matInput name="email" placeholder="Email" type="email">
+        </mat-form-field>
 
-      <mat-form-field class="example-full-width form-group">
-        <input formControlName="password" id="password" matInput name="password" placeholder="Password"
-               type="password">
-      </mat-form-field>
+        <mat-form-field class="example-full-width form-group">
+          <input formControlName="password" id="password" matInput name="password" placeholder="Password"
+                 type="password">
+        </mat-form-field>
 
-      <button color="accent" mat-raised-button
-              type="submit">Sign in
-      </button>
-    </form>
-
-    <p *ngIf="authService.loggedIn()">You are logged in.</p>
+        <button color="accent" mat-raised-button
+                type="submit">Sign in
+        </button>
+      </form>
+    }
   </mat-card-content>
 </mat-card>
diff --git a/src/app/auth/signinup/signinup.component.html b/src/app/auth/signinup/signinup.component.html
index 133fbc3..d48cbb9 100644
--- a/src/app/auth/signinup/signinup.component.html
+++ b/src/app/auth/signinup/signinup.component.html
@@ -1,21 +1,23 @@
 <mat-card>
   <mat-card-header><h1 class="mat-h1">Sign in/up</h1></mat-card-header>
   <mat-card-content>
-    <form (ngSubmit)="signInUp()" *ngIf="!authService.loggedIn() && form != null" [formGroup]="form" novalidate class="authForm">
-            <mat-form-field class="example-full-width form-group">
-              <input formControlName="email" id="email" matInput name="email" placeholder="Email" type="email">
-            </mat-form-field>
+    @if (authService.loggedIn()) {
+      <p>You are logged in.</p>
+    } @else if (form != null) {
+      <form (ngSubmit)="signInUp()" [formGroup]="form" novalidate class="authForm">
+        <mat-form-field class="example-full-width form-group">
+          <input formControlName="email" id="email" matInput name="email" placeholder="Email" type="email">
+        </mat-form-field>
 
-          <mat-form-field class="example-full-width form-group" style="flex: auto;">
-            <input formControlName="password" id="password" matInput name="password" placeholder="Password"
-                   type="password">
-          </mat-form-field>
+        <mat-form-field class="example-full-width form-group" style="flex: auto;">
+          <input formControlName="password" id="password" matInput name="password" placeholder="Password"
+                 type="password">
+        </mat-form-field>
 
-          <button color="accent" mat-raised-button
-                  type="submit" class="authButton">Auth
-          </button>
-    </form>
-
-    <p *ngIf="authService.loggedIn()">You are logged in.</p>
+        <button color="accent" mat-raised-button
+                type="submit" class="authButton">Auth
+        </button>
+      </form>
+    }
   </mat-card-content>
 </mat-card>
diff --git a/src/app/auth/signup/signup.component.html b/src/app/auth/signup/signup.component.html
index 439dcb7..f189547 100644
--- a/src/app/auth/signup/signup.component.html
+++ b/src/app/auth/signup/signup.component.html
@@ -1,22 +1,24 @@
 <mat-card>
   <mat-card-header><h1 class="mat-h1">Signup</h1></mat-card-header>
   <mat-card-content>
-    <form (ngSubmit)="signup()" *ngIf="!authService.loggedIn() && form != null" [formGroup]="form"
-          style="display: flex; flex-direction: column" novalidate>
-      <mat-form-field class="example-full-width form-group">
-        <input formControlName="email" id="email" matInput name="email" placeholder="Email" type="email">
-      </mat-form-field>
+    @if (authService.loggedIn()) {
+      <p>You are logged in.</p>
+    } @else if (form != null) {
+      <form (ngSubmit)="signup()" [formGroup]="form"
+            style="display: flex; flex-direction: column" novalidate>
+        <mat-form-field class="example-full-width form-group">
+          <input formControlName="email" id="email" matInput name="email" placeholder="Email" type="email">
+        </mat-form-field>
 
-      <mat-form-field class="example-full-width form-group">
-        <input formControlName="password" id="password" matInput name="password" placeholder="Password"
-               type="password">
-      </mat-form-field>
+        <mat-form-field class="example-full-width form-group">
+          <input formControlName="password" id="password" matInput name="password" placeholder="Password"
+                 type="password">
+        </mat-form-field>
 
-      <button color="accent" mat-raised-button
-              type="submit">Register
-      </button>
-    </form>
-
-    <p *ngIf="authService.loggedIn()">You are logged in.</p>
+        <button color="accent" mat-raised-button
+                type="submit">Register
+        </button>
+      </form>
+    }
   </mat-card-content>
 </mat-card>
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 75b1898..72b6914 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -1,24 +1,26 @@
 <div class="grid-container">
   <h1 class="mat-h1">Dashboard</h1>
   <mat-grid-list cols="2" rowHeight="350px">
-    <mat-grid-tile *ngFor="let card of cards | async" [colspan]="card.cols" [rowspan]="card.rows">
-      <mat-card class="dashboard-card">
-        <mat-card-header>
-          <mat-card-title>
-            {{card.title}}
-            <button [matMenuTriggerFor]="menu" aria-label="Toggle menu" class="more-button" mat-icon-button>
-              <mat-icon>more_vert</mat-icon>
-            </button>
-            <mat-menu #menu="matMenu" xPosition="before">
-              <button mat-menu-item>Expand</button>
-              <button mat-menu-item>Remove</button>
-            </mat-menu>
-          </mat-card-title>
-        </mat-card-header>
-        <mat-card-content class="dashboard-card-content">
-          <div>Card Content Here</div>
-        </mat-card-content>
-      </mat-card>
-    </mat-grid-tile>
+    @for (card of cards | async; track card) {
+      <mat-grid-tile [colspan]="card.cols" [rowspan]="card.rows">
+        <mat-card class="dashboard-card">
+          <mat-card-header>
+            <mat-card-title>
+              {{ card.title }}
+              <button [matMenuTriggerFor]="menu" aria-label="Toggle menu" class="more-button" mat-icon-button>
+                <mat-icon>more_vert</mat-icon>
+              </button>
+              <mat-menu #menu="matMenu" xPosition="before">
+                <button mat-menu-item>Expand</button>
+                <button mat-menu-item>Remove</button>
+              </mat-menu>
+            </mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="dashboard-card-content">
+            <div>Card Content Here</div>
+          </mat-card-content>
+        </mat-card>
+      </mat-grid-tile>
+    }
   </mat-grid-list>
 </div>
diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
new file mode 100644
index 0000000..6dbc743
--- /dev/null
+++ b/src/app/footer/footer.component.html
@@ -0,0 +1 @@
+<ng-content></ng-content>
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
new file mode 100644
index 0000000..1ecb04c
--- /dev/null
+++ b/src/app/footer/footer.component.scss
@@ -0,0 +1,9 @@
+:host {
+  flex: 1;
+  bottom: 0;
+  width: 100%;
+  height: 100px;
+  background: #3F51B5 !important;
+  color: white;
+  text-align: center;
+}
diff --git a/src/app/footer/footer.component.spec.ts b/src/app/footer/footer.component.spec.ts
new file mode 100644
index 0000000..4647de8
--- /dev/null
+++ b/src/app/footer/footer.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FooterComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/footer/footer.component.ts b/src/app/footer/footer.component.ts
new file mode 100644
index 0000000..0f072d9
--- /dev/null
+++ b/src/app/footer/footer.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrl: './footer.component.scss'
+})
+export class FooterComponent {}
diff --git a/src/app/footer/footer.module.ts b/src/app/footer/footer.module.ts
new file mode 100644
index 0000000..030f831
--- /dev/null
+++ b/src/app/footer/footer.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { FooterComponent } from "./footer.component";
+
+
+@NgModule({
+  declarations: [FooterComponent],
+  imports: [CommonModule],
+  exports: [FooterComponent]
+})
+export class FooterModule { }
diff --git a/src/app/server-status/server-status.component.html b/src/app/server-status/server-status.component.html
index 0b708f1..edd67ea 100644
--- a/src/app/server-status/server-status.component.html
+++ b/src/app/server-status/server-status.component.html
@@ -1,3 +1,5 @@
-<mat-toolbar-row *ngIf="serverStatus.version">
-  {{serverStatus.version}}
-</mat-toolbar-row>
+@if (serverStatus.version) {
+  <mat-toolbar-row>
+    {{ serverStatus.version }}
+  </mat-toolbar-row>
+}
diff --git a/src/app/sidenav/sidenav.component.html b/src/app/sidenav/sidenav.component.html
index 37e3464..dc6a9aa 100644
--- a/src/app/sidenav/sidenav.component.html
+++ b/src/app/sidenav/sidenav.component.html
@@ -10,12 +10,15 @@
       <app-server-status></app-server-status>
     </mat-toolbar>
     <mat-nav-list>
-      <a *ngIf="!loggedIn()" mat-list-item routerLink="/auth">Auth</a>
-      <a *ngIf="hasRole('admin')" mat-list-item routerLink="/admin">Admin</a>
-      <ng-container *ngIf="loggedIn()">
+      @if (loggedIn()) {
+        @if (hasRole('admin')) {
+          <a mat-list-item routerLink="/admin">Admin</a>
+        }
         <a mat-list-item routerLink="/secret-dashboard">Secret dashboard</a>
         <a mat-list-item routerLink="/auth/logout">Logout</a>
-      </ng-container>
+      } @else {
+        <a mat-list-item routerLink="/auth">Auth</a>
+      }
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>
diff --git a/src/app/sidenav/sidenav.component.ts b/src/app/sidenav/sidenav.component.ts
index 1e3791a..1ee285e 100644
--- a/src/app/sidenav/sidenav.component.ts
+++ b/src/app/sidenav/sidenav.component.ts
@@ -43,4 +43,9 @@ export class SidenavComponent implements AfterContentInit {
     if (this.openedSubject != null && this.sidenav != null)
       this.openedSubject.next(!this.sidenav.opened);
   }
+
+  close() {
+    if (this.openedSubject != null && this.sidenav != null && this.sidenav.opened)
+      this.openedSubject.next(false);
+  }
 }
diff --git a/src/styles.scss b/src/styles.scss
index 71087ed..3401bdb 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -44,4 +44,5 @@ body {
   margin: 0;
   font-family: Roboto, "Helvetica Neue", sans-serif;
   background: #fafafa;
+  height: 100vh;
 }