diff --git a/.angular-cli.json b/.angular-cli.json
index 3a184809..00be4231 100644
--- a/.angular-cli.json
+++ b/.angular-cli.json
@@ -9,6 +9,7 @@
       "outDir": "dist",
       "assets": [
         "assets",
+        "manifest.json",
         "favicon.ico"
       ],
       "index": "index.html",
@@ -18,8 +19,9 @@
       "tsconfig": "tsconfig.app.json",
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
+      "serviceWorker": true,
       "styles": [
-        "styles.css"
+        "styles.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
@@ -54,7 +56,8 @@
     }
   },
   "defaults": {
-    "styleExt": "css",
-    "component": {}
+    "styleExt": "scss",
+    "component": {
+    }
   }
 }
diff --git a/ngsw-manifest.json b/ngsw-manifest.json
new file mode 100644
index 00000000..09fb600a
--- /dev/null
+++ b/ngsw-manifest.json
@@ -0,0 +1,10 @@
+{
+  "external": {
+    "urls": [
+      {"url": "https://fonts.googleapis.com/icon?family=Material+Icons"},
+      {"url": "https://fonts.googleapis.com/css?family=Roboto"},
+      {"url": "https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"},
+      {"url": "https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"}
+    ]
+  }
+}
diff --git a/package.json b/package.json
index dfc3f977..48a73fa8 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
+    "build-prod": "ng build --prod",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
@@ -33,10 +34,13 @@
     "@angular/cli": "1.4.3",
     "@angular/compiler-cli": "^4.2.4",
     "@angular/language-service": "^4.2.4",
+    "@angular/service-worker": "^1.0.0-beta.16",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
+    "angular2-template-loader": "^0.6.2",
     "codelyzer": "~3.1.1",
+    "electron": "^1.6.11",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
     "karma": "~1.7.0",
@@ -48,6 +52,7 @@
     "protractor": "~5.1.2",
     "ts-node": "~3.2.0",
     "tslint": "~5.3.2",
-    "typescript": "~2.3.3"
+    "typescript": "~2.3.3",
+    "wallaby-webpack": "*"
   }
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 9ba81a04..3635b98e 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,16 +1,16 @@
 <md-sidenav-container fullscreen>
-  <md-toolbar color="accent">
-    <button md-button (click)="sidenav.toggle()">
+  <md-toolbar color="accent" class="mat-elevation-z6">
+    <button md-icon-button (click)="sidenav.toggle()">
       <md-icon>
         menu
       </md-icon>
     </button>
-    RxJS Docs
+    <span class="title"> RxJS Docs </span>
   </md-toolbar>
   <md-sidenav #sidenav>
     <md-toolbar>
       <span>
-        <button md-button routerLink="/rxjs">
+        <button md-button routerLink="/">
           Home
         </button>
       </span>
@@ -32,6 +32,6 @@
     </md-toolbar>
   </md-sidenav>
   <div class="body-margin">
-    <router-outlet></router-outlet> 
+    <router-outlet></router-outlet>
   </div>
-</md-sidenav-container>
\ No newline at end of file
+</md-sidenav-container>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
new file mode 100644
index 00000000..d9dc7e5d
--- /dev/null
+++ b/src/app/app.component.scss
@@ -0,0 +1,3 @@
+.title {
+  padding: 0 16px;
+}
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
deleted file mode 100644
index bcbdf36b..00000000
--- a/src/app/app.component.spec.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { TestBed, async } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-describe('AppComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  }));
-  it('should create the app', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  }));
-  it(`should have as title 'app'`, async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('app');
-  }));
-  it('should render title in a h1 tag', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
-  }));
-});
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7b0f6728..7d943bc9 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
   title = 'app';
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b6917c0a..ac47ce51 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -2,7 +2,9 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MdToolbarModule, MdSidenavModule, MdIconModule, MdButtonModule } from '@angular/material';
-import { routing } from './app.routing';
+import { RouterModule } from '@angular/router';
+
+import { RXJS_DOC_ROUTES } from './app.routing';
 
 import { AppComponent } from './app.component';
 import { OperatorsComponent } from './operators/operators.component';
@@ -21,7 +23,7 @@ import { RxjsComponent } from './rxjs/rxjs.component';
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
-    routing,
+    RouterModule.forRoot(RXJS_DOC_ROUTES),
     MdToolbarModule,
     MdSidenavModule,
     MdIconModule,
diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
index 1d91fa72..d7db3e43 100644
--- a/src/app/app.routing.ts
+++ b/src/app/app.routing.ts
@@ -1,17 +1,15 @@
 import { ModuleWithProviders } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { Routes } from '@angular/router';
 
 import { CompaniesComponent } from './companies/companies.component';
 import { OperatorsComponent } from './operators/operators.component';
 import { RxjsComponent } from './rxjs/rxjs.component';
 import { TeamComponent } from './team/team.component';
 
-const appRoutes: Routes = [
+export const RXJS_DOC_ROUTES: Routes = [
   { path: '', component: RxjsComponent },
-  { path: 'rxjs', component: RxjsComponent},
   { path: 'operators', component: OperatorsComponent },
   { path: 'team', component: TeamComponent },
-  { path: 'companies', component: CompaniesComponent }
+  { path: 'companies', component: CompaniesComponent },
+  { path: '**', redirectTo: '' }
 ];
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
\ No newline at end of file
diff --git a/src/app/app.component.css b/src/app/companies/companies.component.scss
similarity index 100%
rename from src/app/app.component.css
rename to src/app/companies/companies.component.scss
diff --git a/src/app/companies/companies.component.ts b/src/app/companies/companies.component.ts
index 4c77f111..2e895b37 100644
--- a/src/app/companies/companies.component.ts
+++ b/src/app/companies/companies.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-companies',
   templateUrl: './companies.component.html',
-  styleUrls: ['./companies.component.css']
+  styleUrls: ['./companies.component.scss']
 })
 export class CompaniesComponent implements OnInit {
 
diff --git a/src/app/companies/companies.component.css b/src/app/operators/operators.component.scss
similarity index 100%
rename from src/app/companies/companies.component.css
rename to src/app/operators/operators.component.scss
diff --git a/src/app/operators/operators.component.ts b/src/app/operators/operators.component.ts
index d7006ffe..5f98e094 100644
--- a/src/app/operators/operators.component.ts
+++ b/src/app/operators/operators.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-operators',
   templateUrl: './operators.component.html',
-  styleUrls: ['./operators.component.css']
+  styleUrls: ['./operators.component.scss']
 })
 export class OperatorsComponent implements OnInit {
 
diff --git a/src/app/operators/operators.component.css b/src/app/rxjs/rxjs.component.scss
similarity index 100%
rename from src/app/operators/operators.component.css
rename to src/app/rxjs/rxjs.component.scss
diff --git a/src/app/rxjs/rxjs.component.ts b/src/app/rxjs/rxjs.component.ts
index 1ce6ac10..0eba3544 100644
--- a/src/app/rxjs/rxjs.component.ts
+++ b/src/app/rxjs/rxjs.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-rxjs',
   templateUrl: './rxjs.component.html',
-  styleUrls: ['./rxjs.component.css']
+  styleUrls: ['./rxjs.component.scss']
 })
 export class RxjsComponent implements OnInit {
 
diff --git a/src/app/team/team.component.css b/src/app/team/team.component.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/rxjs/rxjs.component.css b/src/app/team/team.component.scss
similarity index 100%
rename from src/app/rxjs/rxjs.component.css
rename to src/app/team/team.component.scss
diff --git a/src/app/team/team.component.ts b/src/app/team/team.component.ts
index 1ccba228..77b9fdfc 100644
--- a/src/app/team/team.component.ts
+++ b/src/app/team/team.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-team',
   templateUrl: './team.component.html',
-  styleUrls: ['./team.component.css']
+  styleUrls: ['./team.component.scss']
 })
 export class TeamComponent implements OnInit {
 
diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/assets/img/Rx_Logo-128-128.png b/src/assets/img/Rx_Logo-128-128.png
new file mode 100644
index 00000000..fb8b4e82
Binary files /dev/null and b/src/assets/img/Rx_Logo-128-128.png differ
diff --git a/src/assets/img/Rx_Logo-144-144.png b/src/assets/img/Rx_Logo-144-144.png
new file mode 100644
index 00000000..f8f908ee
Binary files /dev/null and b/src/assets/img/Rx_Logo-144-144.png differ
diff --git a/src/assets/img/Rx_Logo-16-16.png b/src/assets/img/Rx_Logo-16-16.png
new file mode 100644
index 00000000..d65073b9
Binary files /dev/null and b/src/assets/img/Rx_Logo-16-16.png differ
diff --git a/src/assets/img/Rx_Logo-192-192.png b/src/assets/img/Rx_Logo-192-192.png
new file mode 100644
index 00000000..3becc7bb
Binary files /dev/null and b/src/assets/img/Rx_Logo-192-192.png differ
diff --git a/src/assets/img/Rx_Logo-48-48.png b/src/assets/img/Rx_Logo-48-48.png
new file mode 100644
index 00000000..15107f05
Binary files /dev/null and b/src/assets/img/Rx_Logo-48-48.png differ
diff --git a/src/assets/img/Rx_Logo-512-512.png b/src/assets/img/Rx_Logo-512-512.png
new file mode 100644
index 00000000..4e4449ae
Binary files /dev/null and b/src/assets/img/Rx_Logo-512-512.png differ
diff --git a/src/assets/img/Rx_Logo-72-72.png b/src/assets/img/Rx_Logo-72-72.png
new file mode 100644
index 00000000..cb65d1e8
Binary files /dev/null and b/src/assets/img/Rx_Logo-72-72.png differ
diff --git a/src/assets/img/Rx_Logo-96-96.png b/src/assets/img/Rx_Logo-96-96.png
new file mode 100644
index 00000000..b145d180
Binary files /dev/null and b/src/assets/img/Rx_Logo-96-96.png differ
diff --git a/src/index.html b/src/index.html
index d7dd8465..5a8c90ef 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,13 +2,19 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="theme-color" content="#333">
   <title>RxjsDocs</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="manifest" href="manifest.json">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>
+  <script src="https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"></script>
 </body>
 </html>
diff --git a/src/manifest.json b/src/manifest.json
new file mode 100644
index 00000000..49b264a3
--- /dev/null
+++ b/src/manifest.json
@@ -0,0 +1,52 @@
+{
+  "name": "RxJS Docs",
+  "display": "standalone",
+  "start_url": "/",
+  "short_name": "RxJS Docs",
+  "theme_color": "#333",
+  "description": "Documentation for RxJS 5+",
+  "orientation": "any",
+  "background_color": "#fafafa",
+  "icons": [
+    {
+      "src": "/assets/img/Rx_Logo-512-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/Rx_Logo-192-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/Rx_Logo-144-144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/Rx_Logo-128-128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/Rx_Logo-96-96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/Rx_Logo-72-72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/Rx_Logo-48-48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/Rx_Logo-16-16.png",
+      "sizes": "16x16",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/src/styles.css b/src/styles.scss
similarity index 53%
rename from src/styles.css
rename to src/styles.scss
index 3367b7a1..8bcf8b40 100644
--- a/src/styles.css
+++ b/src/styles.scss
@@ -1,7 +1,3 @@
-@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
-
-@import '~https://fonts.googleapis.com/icon?family=Roboto';
-
 @import '~@angular/material/prebuilt-themes/indigo-pink.css';
 
 body {
diff --git a/src/wallabyTest.ts b/src/wallabyTest.ts
new file mode 100644
index 00000000..378bfea6
--- /dev/null
+++ b/src/wallabyTest.ts
@@ -0,0 +1,19 @@
+import './polyfills';
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
diff --git a/wallaby.js b/wallaby.js
new file mode 100644
index 00000000..ddedc408
--- /dev/null
+++ b/wallaby.js
@@ -0,0 +1,81 @@
+var wallabyWebpack = require('wallaby-webpack');
+var path = require('path');
+
+var compilerOptions = Object.assign(
+  require('./src/tsconfig.app.json').compilerOptions,
+  require('./src/tsconfig.spec.json').compilerOptions);
+
+module.exports = function (wallaby) {
+
+  var webpackPostprocessor = wallabyWebpack({
+    entryPatterns: [
+      'src/wallabyTest.js',
+      'src/**/*spec.js'
+    ],
+
+    module: {
+      loaders: [
+        { test: /\.css$/, loader: 'raw-loader' },
+        { test: /\.html$/, loader: 'raw-loader' },
+        { test: /\.ts$/, loader: '@ngtools/webpack', include: /node_modules/, query: { tsConfigPath: 'tsconfig.json' } },
+        { test: /\.js$/, loader: 'angular2-template-loader', exclude: /node_modules/ },
+        { test: /\.json$/, loader: 'json-loader' },
+        { test: /\.styl$/, loaders: ['raw-loader', 'stylus-loader'] },
+        { test: /\.less$/, loaders: ['raw-loader', 'less-loader'] },
+        { test: /\.scss$|\.sass$/, loaders: ['raw-loader', 'sass-loader'] },
+        { test: /\.(jpg|png)$/, loader: 'url-loader?limit=128000' }
+      ]
+    },
+
+    resolve: {
+      extensions: ['.js', '.ts'],
+      modules: [
+        path.join(wallaby.projectCacheDir, 'src/app'),
+        path.join(wallaby.projectCacheDir, 'src')
+      ]
+    }
+  });
+
+  return {
+    files: [
+      { pattern: 'src/**/*.ts', load: false },
+      { pattern: 'src/**/*.d.ts', ignore: true },
+      { pattern: 'src/**/*.css', load: false },
+      { pattern: 'src/**/*.less', load: false },
+      { pattern: 'src/**/*.scss', load: false },
+      { pattern: 'src/**/*.sass', load: false },
+      { pattern: 'src/**/*.styl', load: false },
+      { pattern: 'src/**/*.html', load: false },
+      { pattern: 'src/**/*.json', load: false },
+      { pattern: 'src/**/*spec.ts', ignore: true }
+    ],
+
+    tests: [
+      { pattern: 'src/**/*spec.ts', load: false }
+    ],
+
+    testFramework: 'jasmine',
+
+    compilers: {
+      '**/*.ts': wallaby.compilers.typeScript(compilerOptions)
+    },
+
+    middleware: function (app, express) {
+      var path = require('path');
+      app.use('/favicon.ico', express.static(path.join(__dirname, 'src/favicon.ico')));
+      app.use('/assets', express.static(path.join(__dirname, 'src/assets')));
+    },
+
+    env: {
+      kind: 'electron'
+    },
+
+    postprocessor: webpackPostprocessor,
+
+    setup: function () {
+      window.__moduleBundler.loadTests();
+    },
+
+    debug: true
+  };
+};