diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 064a14f..84c4bcf 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -21,7 +21,7 @@ jobs:
     - uses: actions/setup-node@v1.1.0
 
     # Caches npm packages
-    - uses: actions/cache@v1
+    - uses: actions/cache@v2
       with:
         path: ~/.npm
         key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index c055bbc..69097d3 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,9 +1,12 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { AuthGuard } from '@helpers/guards/auth/auth.guard';
 
 
 const routes: Routes = [
-  { path: 'home', loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule) },
+  { path: 'home', loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule),
+    canActivate: [AuthGuard], canActivateChild: [AuthGuard] },
+
   { path: 'auth', loadChildren: () => import('./pages/auth/auth.module').then(m => m.AuthModule) },
 ];
 
diff --git a/src/app/app.component.html b/src/app/app.component.html
index bcf3f73..6b68f5c 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,13 +1,31 @@
 <clr-main-container>
   <clr-header>
-    <app-header></app-header>
+    <div class="branding">
+      <a [routerLink]="['/home']" class="nav-link">
+        <clr-icon shape="vm-bug"></clr-icon>
+        <span class="title">clarity-bootstrap</span>
+      </a>
+    </div>
+    <div class="header-nav" [clr-nav-level]="1">
+      <a [routerLink]="['/home']" routerLinkActive="active" class="nav-link"><span class="nav-text">Home</span></a>
+    </div>
+    
+    <div class="header-actions" *ngIf="(isAuthenticated$ | async) === false">
+      <a [routerLink]="['/auth/login']" routerLinkActive="active" class="nav-link" aria-label="login">
+        Login
+      </a>
+      <a [routerLink]="['/auth/register']" routerLinkActive="active" class="nav-link" aria-label="register">
+        Register
+      </a>
+    </div>
+
   </clr-header>
 
   <div class="content-container">
     <div class="content-area">
       <router-outlet></router-outlet>
     </div>
-    <nav class="sidenav">
+    <nav class="sidenav" *ngIf="isAuthenticated$ | async">
     </nav>
   </div>
-</clr-main-container>
\ No newline at end of file
+</clr-main-container>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ead0de4..f89c0f7 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,8 +1,14 @@
 import { Component } from '@angular/core';
+import { AuthenticationService } from '@services/authentication/authentication.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent {
+  constructor(
+    public readonly authService: AuthenticationService
+  ) { }
+
+  public isAuthenticated$ = this.authService.isAuthenticated$;
 }
diff --git a/src/app/helpers/guards/auth/auth.guard.spec.ts b/src/app/helpers/guards/auth/auth.guard.spec.ts
index 68889d2..bc999b1 100644
--- a/src/app/helpers/guards/auth/auth.guard.spec.ts
+++ b/src/app/helpers/guards/auth/auth.guard.spec.ts
@@ -1,12 +1,20 @@
 import { TestBed } from '@angular/core/testing';
 
 import { AuthGuard } from './auth.guard';
+import { HttpClientModule } from '@angular/common/http';
+import { RouterModule } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('AuthGuard', () => {
   let guard: AuthGuard;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      imports: [
+        HttpClientModule,
+        RouterTestingModule,
+      ]
+    });
     guard = TestBed.inject(AuthGuard);
   });
 
diff --git a/src/app/helpers/guards/auth/auth.guard.ts b/src/app/helpers/guards/auth/auth.guard.ts
index acf637d..9a0e008 100644
--- a/src/app/helpers/guards/auth/auth.guard.ts
+++ b/src/app/helpers/guards/auth/auth.guard.ts
@@ -1,24 +1,45 @@
 import { Injectable } from '@angular/core';
-import { CanActivate, CanActivateChild, CanLoad, Route, UrlSegment, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { CanActivate, CanActivateChild, CanLoad, Route, UrlSegment, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
 import { Observable } from 'rxjs';
+import { AuthenticationService } from '@services/authentication/authentication.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AuthGuard implements CanActivate, CanActivateChild, CanLoad {
+  constructor(
+    private readonly authService: AuthenticationService,
+    private readonly router: Router
+  ) { }
+
   public canActivate(
     next: ActivatedRouteSnapshot,
     state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
-    return true;
+      if (!this.authService.isAuthenticated) {
+        const redirect = this.router.parseUrl('/auth/login');
+        redirect.queryParams = { returnUrl: state.url };
+        return redirect;
+      }
+
+      return true;
   }
+
   public canActivateChild(
     next: ActivatedRouteSnapshot,
     state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
-    return true;
+      if (!this.authService.isAuthenticated) {
+        const redirect = this.router.parseUrl('/auth/login');
+        redirect.queryParams = { returnUrl: state.url };
+        return redirect;
+      }
+
+      return true;
   }
+
   public canLoad(
     route: Route,
     segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {
-    return true;
+      return this.authService.isAuthenticated;
   }
+
 }
diff --git a/src/app/pages/auth/components/login/login.component.html b/src/app/pages/auth/components/login/login.component.html
index e64a316..c624853 100644
--- a/src/app/pages/auth/components/login/login.component.html
+++ b/src/app/pages/auth/components/login/login.component.html
@@ -1,24 +1,28 @@
-<div class="card">
-  <div class="card-block">
-
-    <h2>Login</h2>
-
-    <app-error-alert [error]="error"></app-error-alert>
-
-    <form clrForm [formGroup]="loginForm" (ngSubmit)="onSubmit()" clrLayout="horizontal">
-      <clr-input-container>
-        <label>Email</label>
-        <input clrInput placeholder="john@doe.com" type="text" formControlName="email" autocomplete="username" />
-        <clr-control-error>Please provide an email address.</clr-control-error>
-      </clr-input-container>
-      <clr-password-container>
-        <label>Password</label>
-        <input clrPassword placeholder="Password" formControlName="password" autocomplete="current-password" />
-        <clr-control-error>Please provide a password.</clr-control-error>
-      </clr-password-container>
-      <br />
-      <button [clrLoading]="loginBtnState" [disabled]="loginForm.invalid" class="btn btn-primary">Login</button>
-    </form>
+<app-center-card>
 
+  <div class="card">
+    <div class="card-block">
+      
+      <h2>Login</h2>
+      
+      <app-error-alert [error]="error"></app-error-alert>
+      
+      <form clrForm [formGroup]="loginForm" (ngSubmit)="onSubmit()" clrLayout="horizontal">
+        <clr-input-container>
+          <label>Email</label>
+          <input clrInput placeholder="john@doe.com" type="text" formControlName="email" autocomplete="username" />
+          <clr-control-error>Please provide an email address.</clr-control-error>
+        </clr-input-container>
+        <clr-password-container>
+          <label>Password</label>
+          <input clrPassword placeholder="Password" formControlName="password" autocomplete="current-password" />
+          <clr-control-error>Please provide a password.</clr-control-error>
+        </clr-password-container>
+        <br />
+        <button [clrLoading]="loginBtnState" [disabled]="loginForm.invalid" class="btn btn-primary">Login</button>
+      </form>
+      
+    </div>
   </div>
-</div>
\ No newline at end of file
+
+</app-center-card>
\ No newline at end of file
diff --git a/src/app/pages/auth/components/login/login.component.spec.ts b/src/app/pages/auth/components/login/login.component.spec.ts
index 62ebcaa..d29e769 100644
--- a/src/app/pages/auth/components/login/login.component.spec.ts
+++ b/src/app/pages/auth/components/login/login.component.spec.ts
@@ -5,6 +5,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { HttpClientModule } from '@angular/common/http';
 import { ClarityModule } from '@clr/angular';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { SharedModule } from '@shared/shared.module';
 
 describe('LoginComponent', () => {
   let component: LoginComponent;
@@ -17,6 +18,7 @@ describe('LoginComponent', () => {
         RouterTestingModule,
         HttpClientModule,
         ClarityModule,
+        SharedModule,
       ],
       declarations: [
         LoginComponent,
diff --git a/src/app/pages/auth/components/login/login.component.ts b/src/app/pages/auth/components/login/login.component.ts
index bb0be73..0138cab 100644
--- a/src/app/pages/auth/components/login/login.component.ts
+++ b/src/app/pages/auth/components/login/login.component.ts
@@ -40,13 +40,12 @@ export class LoginComponent {
       flatMap(_ => this.returnUrl$),
       flatMap(returnUrl => from(this.router.navigateByUrl(returnUrl))))
     .subscribe(token => {
-      this.loginBtnState = ClrLoadingState.SUCCESS;
-    },
-    (error: IError) => {
-      console.warn('error:', error);
-      this.error = error;
-      this.loginBtnState = ClrLoadingState.ERROR;
-    });
+        this.loginBtnState = ClrLoadingState.SUCCESS;
+      }, (error: IError) => {
+        console.warn('error:', error);
+        this.error = error;
+        this.loginBtnState = ClrLoadingState.ERROR;
+      });
   }
 
 }
diff --git a/src/app/pages/auth/components/register/register.component.html b/src/app/pages/auth/components/register/register.component.html
index aa03d2b..7131ce0 100644
--- a/src/app/pages/auth/components/register/register.component.html
+++ b/src/app/pages/auth/components/register/register.component.html
@@ -1,31 +1,33 @@
-<div class="card">
-  <div class="card-block">
+<app-center-card>
+  <div class="card">
+    <div class="card-block">
 
-    <h2>Register</h2>
+      <h2>Register</h2>
 
-    <app-error-alert [error]="error"></app-error-alert>
+      <app-error-alert [error]="error"></app-error-alert>
 
-    <form clrForm [formGroup]="registerForm" (ngSubmit)="onSubmit()" clrLayout="horizontal">
-      <clr-input-container>
-        <label>Email</label>
-        <input clrInput placeholder="john@doe.com" type="text" formControlName="email" autocomplete="username" />
-        <clr-control-error>Please provide an email address.</clr-control-error>
-      </clr-input-container>
+      <form clrForm [formGroup]="registerForm" (ngSubmit)="onSubmit()" clrLayout="horizontal">
+        <clr-input-container>
+          <label>Email</label>
+          <input clrInput placeholder="john@doe.com" type="text" formControlName="email" autocomplete="username" />
+          <clr-control-error>Please provide an email address.</clr-control-error>
+        </clr-input-container>
 
-      <clr-input-container>
-        <label>Name</label>
-        <input clrInput placeholder="John Doe" type="text" formControlName="name" autocomplete="name" />
-        <clr-control-error>Please provide a name.</clr-control-error>
-      </clr-input-container>
+        <clr-input-container>
+          <label>Name</label>
+          <input clrInput placeholder="John Doe" type="text" formControlName="name" autocomplete="name" />
+          <clr-control-error>Please provide a name.</clr-control-error>
+        </clr-input-container>
 
-      <clr-password-container>
-        <label>Password</label>
-        <input clrPassword placeholder="Password" formControlName="password" autocomplete="current-password" />
-        <clr-control-error>Please provide a password.</clr-control-error>
-      </clr-password-container>
-      <br />
-      <button [clrLoading]="registerBtnState" [disabled]="registerForm.invalid" class="btn btn-primary">register</button>
-    </form>
+        <clr-password-container>
+          <label>Password</label>
+          <input clrPassword placeholder="Password" formControlName="password" autocomplete="current-password" />
+          <clr-control-error>Please provide a password.</clr-control-error>
+        </clr-password-container>
+        <br />
+        <button [clrLoading]="registerBtnState" [disabled]="registerForm.invalid" class="btn btn-primary">register</button>
+      </form>
 
+    </div>
   </div>
-</div>
\ No newline at end of file
+</app-center-card>
\ No newline at end of file
diff --git a/src/app/pages/auth/components/register/register.component.spec.ts b/src/app/pages/auth/components/register/register.component.spec.ts
index a23e135..5dfc701 100644
--- a/src/app/pages/auth/components/register/register.component.spec.ts
+++ b/src/app/pages/auth/components/register/register.component.spec.ts
@@ -5,6 +5,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 import { HttpClientModule } from '@angular/common/http';
 import { ClarityModule } from '@clr/angular';
+import { SharedModule } from '@shared/shared.module';
 
 describe('RegisterComponent', () => {
   let component: RegisterComponent;
@@ -17,6 +18,7 @@ describe('RegisterComponent', () => {
         RouterTestingModule,
         HttpClientModule,
         ClarityModule,
+        SharedModule,
       ],
       declarations: [ RegisterComponent ]
     })
diff --git a/src/app/pages/auth/components/register/register.component.ts b/src/app/pages/auth/components/register/register.component.ts
index 06e5c7f..60d9d5e 100644
--- a/src/app/pages/auth/components/register/register.component.ts
+++ b/src/app/pages/auth/components/register/register.component.ts
@@ -41,13 +41,12 @@ export class RegisterComponent {
       flatMap(_ => this.returnUrl$),
       flatMap(returnUrl => from(this.router.navigateByUrl(returnUrl))))
     .subscribe(token => {
-      this.registerBtnState = ClrLoadingState.SUCCESS;
-    },
-    (error: IError) => {
-      console.warn('error:', error);
-      this.error = error;
-      this.registerBtnState = ClrLoadingState.ERROR;
-    });
+        this.registerBtnState = ClrLoadingState.SUCCESS;
+      },
+      (error: IError) => {
+        console.warn('error:', error);
+        this.error = error;
+        this.registerBtnState = ClrLoadingState.ERROR;
+      });
   }
-
 }
diff --git a/src/app/services/authentication/authentication.service.ts b/src/app/services/authentication/authentication.service.ts
index 624823e..82485b1 100644
--- a/src/app/services/authentication/authentication.service.ts
+++ b/src/app/services/authentication/authentication.service.ts
@@ -3,7 +3,7 @@ import { JwtTokenService } from '@services/jwt-token/jwt-token.service';
 import { BehaviorSubject, Observable, of } from 'rxjs';
 import { BaseClientService } from '@services/base-client/base-client.service';
 import { IToken } from '@models/token.model';
-import { map, tap } from 'rxjs/operators';
+import { map, tap, take } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
@@ -23,6 +23,10 @@ export class AuthenticationService {
     return this.authSubject.asObservable();
   }
 
+  public get isAuthenticated() {
+    return this.authSubject.value;
+  }
+
   public login(email: string, password: string): Observable<boolean> {
     return this.http.post<IToken>('auth/login', { email, password })
     .pipe(
diff --git a/src/app/shared/components/center-card/center-card.component.html b/src/app/shared/components/center-card/center-card.component.html
new file mode 100644
index 0000000..0450eb9
--- /dev/null
+++ b/src/app/shared/components/center-card/center-card.component.html
@@ -0,0 +1,13 @@
+<div class="clr-row">
+
+  <div class="clr-col-xl-4 clr-offset-xl-4
+              clr-col-lg-6 clr-offset-lg-3
+              clr-col-md-8 clr-offset-md-2">
+
+    <ng-content></ng-content>
+  </div>
+
+</div>
+
+
+
diff --git a/src/app/shared/components/center-card/center-card.component.spec.ts b/src/app/shared/components/center-card/center-card.component.spec.ts
new file mode 100644
index 0000000..59a6dd7
--- /dev/null
+++ b/src/app/shared/components/center-card/center-card.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CenterCardComponent } from './center-card.component';
+
+describe('CenterCardComponent', () => {
+  let component: CenterCardComponent;
+  let fixture: ComponentFixture<CenterCardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CenterCardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CenterCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/components/center-card/center-card.component.ts b/src/app/shared/components/center-card/center-card.component.ts
new file mode 100644
index 0000000..552d189
--- /dev/null
+++ b/src/app/shared/components/center-card/center-card.component.ts
@@ -0,0 +1,12 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'app-center-card',
+  templateUrl: './center-card.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CenterCardComponent {
+
+  constructor() { }
+
+}
diff --git a/src/app/shared/components/header/header.component.html b/src/app/shared/components/header/header.component.html
deleted file mode 100644
index bbcdbf0..0000000
--- a/src/app/shared/components/header/header.component.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<div class="branding">
-  <a [routerLink]="['/home']" class="nav-link">
-    <clr-icon shape="vm-bug"></clr-icon>
-    <span class="title">clarity-bootstrap</span>
-  </a>
-</div>
-<div class="header-nav" [clr-nav-level]="1">
-  <a [routerLink]="['/home']" routerLinkActive="active" class="nav-link"><span class="nav-text">Home</span></a>
-</div>
-
-<div class="header-actions">
-  <a [routerLink]="['/auth/login']" routerLinkActive="active" class="nav-link" aria-label="login">
-    Login
-  </a>
-  <a [routerLink]="['/auth/register']" routerLinkActive="active" class="nav-link" aria-label="register">
-    Register
-  </a>
-</div>
-
-<ng-template #isNotAuthenticated>
-  <div class="header-actions">
-    <a [routerLink]="['/auth/login']" routerLinkActive="active" class="nav-link" aria-label="login">
-      Login
-    </a>
-    <a [routerLink]="['/auth/register']" routerLinkActive="active" class="nav-link" aria-label="register">
-      Register
-    </a>
-  </div>
-</ng-template>
\ No newline at end of file
diff --git a/src/app/shared/components/header/header.component.spec.ts b/src/app/shared/components/header/header.component.spec.ts
deleted file mode 100644
index 71f983d..0000000
--- a/src/app/shared/components/header/header.component.spec.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { HeaderComponent } from './header.component';
-import { HttpClientModule } from '@angular/common/http';
-
-describe('HeaderComponent', () => {
-  let component: HeaderComponent;
-  let fixture: ComponentFixture<HeaderComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ HeaderComponent ],
-      imports: [
-        HttpClientModule
-      ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(HeaderComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/shared/components/header/header.component.ts b/src/app/shared/components/header/header.component.ts
deleted file mode 100644
index e31c974..0000000
--- a/src/app/shared/components/header/header.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { AuthenticationService } from '@services/authentication/authentication.service';
-
-@Component({
-  selector: 'app-header',
-  templateUrl: './header.component.html',
-})
-export class HeaderComponent {
-
-  constructor(
-    public readonly authService: AuthenticationService
-  ) { }
-
-  public isAuthenticated$ = this.authService.isAuthenticated$;
-
-}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 7a3ef93..2775577 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -1,16 +1,16 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { HeaderComponent } from './components/header/header.component';
 import { ClarityModule } from '@clr/angular';
 import { RouterModule } from '@angular/router';
 import { WithLoadingPipe } from './pipes/with-loading.pipe';
 import { ErrorAlertComponent } from './components/error-alert/error-alert.component';
+import { CenterCardComponent } from './components/center-card/center-card.component';
 
 @NgModule({
   declarations: [
-    HeaderComponent,
     WithLoadingPipe,
     ErrorAlertComponent,
+    CenterCardComponent,
   ],
   imports: [
     CommonModule,
@@ -18,9 +18,9 @@ import { ErrorAlertComponent } from './components/error-alert/error-alert.compon
     RouterModule,
   ],
   exports: [
-    HeaderComponent,
     WithLoadingPipe,
     ErrorAlertComponent,
+    CenterCardComponent,
   ]
 })
 export class SharedModule { }