diff --git a/src/app/shared/layout/layout.component.html b/src/app/shared/layout/layout.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..ef36d9000d5621bc7fb0c22f08ab1727ccb10705
--- /dev/null
+++ b/src/app/shared/layout/layout.component.html
@@ -0,0 +1,7 @@
+<div id="layout">
+  <app-navbar [links]="links" [theme]="theme"></app-navbar>
+  <main class="content">
+   <router-outlet (deactivate)="onDeactivate()"></router-outlet>
+  </main>
+  <app-footer></app-footer>
+</div>
diff --git a/src/app/shared/layout/layout.component.scss b/src/app/shared/layout/layout.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..dbb1a1a4d4cd1207f51b99188c1c122225b6b9b8
--- /dev/null
+++ b/src/app/shared/layout/layout.component.scss
@@ -0,0 +1,14 @@
+/*
+Sticky footer solution from
+https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
+*/
+#layout {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+/* Make main content expand to pull footer to the bottom */
+.content {
+  flex: 1;
+}
diff --git a/src/app/shared/layout/layout.component.spec.ts b/src/app/shared/layout/layout.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c4d6365d70259780c4656f6382416ca8418ff674
--- /dev/null
+++ b/src/app/shared/layout/layout.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LayoutComponent } from './layout.component';
+
+describe('LayoutComponent', () => {
+  let component: LayoutComponent;
+  let fixture: ComponentFixture<LayoutComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LayoutComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/layout/layout.component.ts b/src/app/shared/layout/layout.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a91537c019d3a5b44574aeae1df9a572e1b4a1af
--- /dev/null
+++ b/src/app/shared/layout/layout.component.ts
@@ -0,0 +1,24 @@
+import { Component, Input, Renderer } from '@angular/core';
+ import { Link } from '../nav.model';
+
+
+ @Component({
+   selector: 'app-layout',
+   templateUrl: './layout.component.html',
+   styleUrls: ['./layout.component.scss']
+ })
+ export class LayoutComponent {
+
+   @Input() links: Link[];
+   @Input() theme: string;
+
+   constructor(private renderer: Renderer) {
+     this.links = [];
+   }
+
+   onDeactivate() {
+     // on page reload, scroll to top of window
+     this.renderer.setElementProperty(document.body, 'scrollTop', 0);
+   }
+
+ }
diff --git a/src/app/shared/nav-group/nav-group.component.html b/src/app/shared/nav-group/nav-group.component.html
index 66cc87559ca4b7855fd87a9bf9cec942c6095f81..a184f3b149c406c3d42a0efd7a43b6b2521dc3de 100644
--- a/src/app/shared/nav-group/nav-group.component.html
+++ b/src/app/shared/nav-group/nav-group.component.html
@@ -1,5 +1,5 @@
-<ul>
+<ul [ngClass]="{'vertical': vertical}">
   <li *ngFor="let link of links">
-    <app-nav-item [link]="link"></app-nav-item>
+    <app-nav-item [link]="link" [theme]="theme"></app-nav-item>
   </li>
 </ul>
diff --git a/src/app/shared/nav-group/nav-group.component.scss b/src/app/shared/nav-group/nav-group.component.scss
index 17c79f4886d7c5391537d24a11af70f8565880d3..35920834cc511d1b4b7a01b84ef47be433e0efda 100644
--- a/src/app/shared/nav-group/nav-group.component.scss
+++ b/src/app/shared/nav-group/nav-group.component.scss
@@ -4,6 +4,10 @@ ul {
   padding: 0;
   display: flex;
 
+  &.vertical {
+    flex-direction: column;
+  }
+
   li {
     text-align: center;
   }
diff --git a/src/app/shared/nav-group/nav-group.component.ts b/src/app/shared/nav-group/nav-group.component.ts
index 0562b94036af1dda2c5fc4ba3d1cb301b860a569..44d9d7587ded708ea78c4fe35ba70aac9759625d 100644
--- a/src/app/shared/nav-group/nav-group.component.ts
+++ b/src/app/shared/nav-group/nav-group.component.ts
@@ -9,5 +9,7 @@ import { Link } from '../nav.model';
 export class NavGroupComponent {
 
   @Input() links: Link[];
+  @Input() theme: string;
+  @Input() vertical = false;
 
 }
diff --git a/src/app/shared/nav-item/nav-item.component.html b/src/app/shared/nav-item/nav-item.component.html
index b7312fe09472fdda1810b3f8a4e1513fa3c747e4..be52dbb963b7a9fb2ae6b5029d787ef709acd7bd 100644
--- a/src/app/shared/nav-item/nav-item.component.html
+++ b/src/app/shared/nav-item/nav-item.component.html
@@ -1,4 +1,4 @@
-<div class="nav-link">
+<div class="nav-link" [ngClass]="{'blue': theme === 'blue'}">
   <a *ngIf="link.href; else action" class="no-style" [routerLink]="link.href">
     {{ link.text }}
   </a>
diff --git a/src/app/shared/nav-item/nav-item.component.scss b/src/app/shared/nav-item/nav-item.component.scss
index c4fe3d13ac44e4830c5416920fcf3c9ec788fb26..bc6391e9d67366425218822da8981e78aaa1c183 100644
--- a/src/app/shared/nav-item/nav-item.component.scss
+++ b/src/app/shared/nav-item/nav-item.component.scss
@@ -17,4 +17,14 @@
     color: $color-dark-blue;
     border-color: $color-dark-blue;
   }
+
+  &.blue {
+    color: $color-purple-light;
+    &:hover {
+      &:hover {
+        color: $color-light-gray;
+        border-color: $color-light-gray;
+      }
+    }
+  }
 }
diff --git a/src/app/shared/nav-item/nav-item.component.ts b/src/app/shared/nav-item/nav-item.component.ts
index 6c87861d4035cd07dd139f6d04e420e7c0db9051..25168ec968ade09e165b7a8ad5faa5348e148001 100644
--- a/src/app/shared/nav-item/nav-item.component.ts
+++ b/src/app/shared/nav-item/nav-item.component.ts
@@ -9,5 +9,6 @@ import { Link } from '../nav.model';
 export class NavItemComponent {
 
   @Input() link: Link;
+  @Input() theme: string;
 
 }
diff --git a/src/app/shared/navbar/navbar.component.html b/src/app/shared/navbar/navbar.component.html
index 8f241fb1b41f1bbae51d1452e695406dc73808e2..383d7eddf635ba28d3311c3907552bc132f6087c 100644
--- a/src/app/shared/navbar/navbar.component.html
+++ b/src/app/shared/navbar/navbar.component.html
@@ -1,16 +1,19 @@
-<div class="navbar drop-shadow-md">
+<div class="navbar drop-shadow-md" [ngClass]="{'blue': theme === 'blue'}">
   <div class="top">
     <a routerLink="/" class='logo-container'>
-      <img src='assets/img/oser-logo.png' alt='Logo' class='logo'>
+      <span [ngSwitch]="theme">
+        <img *ngSwitchCase="'blue'" src='assets/img/oser-logo-white.png' alt='Logo' class='logo'>
+        <img *ngSwitchDefault src='assets/img/oser-logo.png' alt='Logo' class='logo'>
+      </span>
     </a>
     <div class="nav-wide">
-      <app-nav-group [links]="links"></app-nav-group>
+      <app-nav-group [theme]="theme" [links]="links"></app-nav-group>
       <ng-content select="[app-navbar-extra]"></ng-content>
     </div>
     <i (click)="toggle()" class="hamburger fa fa-bars fa-2x"></i>
   </div>
   <div class="nav-narrow" *ngIf="visible">
-    <app-nav-group-vertical [links]="links" (click)="toggle()"></app-nav-group-vertical>
+    <app-nav-group [links]="links" [vertical]="true" [theme]="theme" (click)="toggle()"></app-nav-group>
     <ng-content select="[app-navbar-extra-narrow]"></ng-content>
   </div>
 </div>
diff --git a/src/app/shared/navbar/navbar.component.scss b/src/app/shared/navbar/navbar.component.scss
index c09439a7c111dc44c0f98d95da00d80b3596d1e4..1e058e1dbadfc2faf6fb6133d0022e816329df72 100644
--- a/src/app/shared/navbar/navbar.component.scss
+++ b/src/app/shared/navbar/navbar.component.scss
@@ -9,6 +9,12 @@ $col-padding: 10px;
   padding: 0 $margin-page;
   margin: 0;
   background: white;
+  &.blue {
+    background: $color-dark-blue;
+    i.hamburger {
+      color: white !important;
+    }
+  }
   z-index: 10;
   display: flex;
   flex-flow: column nowrap;
diff --git a/src/app/shared/navbar/navbar.component.ts b/src/app/shared/navbar/navbar.component.ts
index 7549ee5a887a55a971586cd3cd8a27d9709f1ab2..031453b766d6ed7a1d4639b10f81719d4865373f 100644
--- a/src/app/shared/navbar/navbar.component.ts
+++ b/src/app/shared/navbar/navbar.component.ts
@@ -11,6 +11,7 @@ export class NavbarComponent {
 
   visible = false;
   @Input() links: Link[] = [];
+  @Input() theme: string;
 
   constructor() { }
 
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index c783a20c5ea67967d14b13a5c30d11c622c177c9..57ae8abc7da29c06e00a73a6a05d44be42545fa6 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -14,11 +14,10 @@ import { RevealComponent } from './reveal/reveal.component';
 import { FilterComponent } from './filter/filter.component';
 import { NavItemComponent } from './nav-item/nav-item.component';
 import { NavGroupComponent } from './nav-group/nav-group.component';
-import { NavGroupVerticalComponent } from './nav-group-vertical/nav-group-vertical.component';
-import { BlueNavbarComponent } from './blue_navbar/blue_navbar.component';
 import { MailtoComponent } from './mailto/mailto.component';
 import { LoginButtonComponent } from './login-button/login-button.component';
 import { FormPageComponent } from './form-page/form-page.component';
+import { LayoutComponent } from './layout/layout.component';
 
 @NgModule({
   imports: [
@@ -37,11 +36,10 @@ import { FormPageComponent } from './form-page/form-page.component';
     FilterComponent,
     NavItemComponent,
     NavGroupComponent,
-    NavGroupVerticalComponent,
-    BlueNavbarComponent,
     MailtoComponent,
     LoginButtonComponent,
     FormPageComponent,
+    LayoutComponent,
   ],
   exports: [
     NavbarComponent,
@@ -50,11 +48,10 @@ import { FormPageComponent } from './form-page/form-page.component';
     RevealComponent,
     FilterComponent,
     NavGroupComponent,
-    NavGroupVerticalComponent,
-    BlueNavbarComponent,
     MailtoComponent,
     LoginButtonComponent,
     FormPageComponent,
+    LayoutComponent,
   ]
 })
 export class SharedModule { }
diff --git a/src/app/showcase-site/showcase-site.component.html b/src/app/showcase-site/showcase-site.component.html
index 7d800a87e7c746bbe97a28d12bf643a8eca7f28f..fab21ab2cddfe69d42386e324800108694902021 100644
--- a/src/app/showcase-site/showcase-site.component.html
+++ b/src/app/showcase-site/showcase-site.component.html
@@ -1,11 +1 @@
-<span id="top"></span>
-<div id="showcase-site">
-  <app-navbar [links]="navLinks">
-    <app-login-button app-navbar-extra class="login-link"></app-login-button>
-    <app-login-button app-navbar-extra-narrow class="text-center login-link"></app-login-button>
-  </app-navbar>
-  <main class="content">
-    <router-outlet (deactivate)="onDeactivate()"></router-outlet>
-  </main>
-  <app-footer></app-footer>
-</div>
+<app-layout [links]="navLinks"></app-layout>
diff --git a/src/app/showcase-site/showcase-site.component.scss b/src/app/showcase-site/showcase-site.component.scss
index 8add28ad2e814a0820550860844ab0c22f6e55db..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/showcase-site/showcase-site.component.scss
+++ b/src/app/showcase-site/showcase-site.component.scss
@@ -1,20 +0,0 @@
-/*
-Sticky footer solution from
-https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
-*/
-#showcase-site {
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
-}
-
-/* Make main content expand to pull footer to the bottom */
-.content {
-  flex: 1;
-}
-
-.login-link {
-  display: block;
-  margin: auto 0;
-  padding: 1em 0;
-}
diff --git a/src/app/showcase-site/showcase-site.component.ts b/src/app/showcase-site/showcase-site.component.ts
index 5ef44aea274ee5341b573c49e015b73c2c863ebb..89f9c6d269f87157f00aaf67b613876f9ccf662b 100644
--- a/src/app/showcase-site/showcase-site.component.ts
+++ b/src/app/showcase-site/showcase-site.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Renderer } from '@angular/core';
+import { Component } from '@angular/core';
 import { Link } from 'app/shared';
 
 @Component({
@@ -6,9 +6,7 @@ import { Link } from 'app/shared';
   templateUrl: './showcase-site.component.html',
   styleUrls: ['./showcase-site.component.scss']
 })
-export class ShowcaseSiteComponent implements OnInit {
-
-  constructor(private renderer: Renderer) { }
+export class ShowcaseSiteComponent {
 
   navLinks: Link[] = [
     { href: '/qui-sommes-nous', text: 'Qui sommes-nous ?' },
@@ -18,11 +16,4 @@ export class ShowcaseSiteComponent implements OnInit {
     { href: '/contact', text: 'Contact' }
   ];
 
-  ngOnInit() { }
-
-  onDeactivate() {
-    // on page reload, scroll to top of window
-    this.renderer.setElementProperty(document.body, "scrollTop", 0);
-  }
-
 }