diff --git a/scripts/deploy/deploy-dashboard-functions.sh b/scripts/deploy/deploy-dashboard-functions.sh
deleted file mode 100755
index b5948c5bdc5..00000000000
--- a/scripts/deploy/deploy-dashboard-functions.sh
+++ /dev/null
@@ -1,24 +0,0 @@
-#!/bin/bash
-
-# Go to the project root directory
-cd $(dirname ${0})/../..
-
-# Paths to the dashboard and functions directories.
-dashboardFolder=tools/dashboard
-
-# Go to the dashboard folder because otherwise the Firebase CLI tries to deploy the wrong project.
-cd ${dashboardFolder}
-
-# Install node modules for dashboard functions. Firebase CLI needs to execute the functions
-# before it can collect all functions and deploy them.
-(cd functions; npm install)
-
-if [ -z ${MATERIAL2_BOARD_FIREBASE_DEPLOY_KEY} ]; then
-  echo "Error: No access token for firebase specified." \
-       "Please set the environment variable 'MATERIAL2_DASHBOARD_ACCESS_TOKEN'."
-  exit 1
-fi
-
-# Deploy the dashboard functions to Firebase. For now only the functions will be deployed.
-$(npm bin)/firebase deploy \
-  --only functions --token ${MATERIAL2_BOARD_FIREBASE_DEPLOY_KEY} --project material2-board
diff --git a/scripts/deploy/deploy-dashboard.sh b/scripts/deploy/deploy-dashboard.sh
new file mode 100755
index 00000000000..4c32cd7910f
--- /dev/null
+++ b/scripts/deploy/deploy-dashboard.sh
@@ -0,0 +1,34 @@
+#!/bin/bash
+
+# This script deploys the Dashboard App and their Cloud Functions to Firebase.
+# Before the script installs all dependencies and builds the dashboard app in production.
+
+# Go to the project root directory
+cd $(dirname ${0})/../..
+
+# Paths to the dashboard and functions directories.
+dashboardFolder=tools/dashboard
+
+# Go to the dashboard folder because otherwise the Firebase CLI tries to deploy the wrong project.
+cd ${dashboardFolder}
+
+# Install node_modules for the dashboard and afterwards build the dashboard app in production.
+(npm install; $(npm bin)/ng build --aot -prod) &
+
+# Install node modules for dashboard functions. Firebase CLI needs to execute the functions
+# to collect all function names before it can deploy them.
+(cd functions; npm install) &
+
+# The dashboard and function dependencies are installed concurrently. Also the dashboard app is
+# build in production afterwards. Wait for all async tasks to finish before proceeding.
+wait
+
+if [ -z ${MATERIAL2_BOARD_FIREBASE_DEPLOY_KEY} ]; then
+  echo "Error: No access token for firebase specified." \
+       "Please set the environment variable 'MATERIAL2_DASHBOARD_ACCESS_TOKEN'."
+  exit 1
+fi
+
+# Deploy the dashboard to Firebase. Based on the current configuration hosting and functions
+# will be deployed.
+$(npm bin)/firebase deploy --token ${MATERIAL2_BOARD_FIREBASE_DEPLOY_KEY} --project material2-board
diff --git a/tools/dashboard/.angular-cli.json b/tools/dashboard/.angular-cli.json
new file mode 100644
index 00000000000..fbf7a67a925
--- /dev/null
+++ b/tools/dashboard/.angular-cli.json
@@ -0,0 +1,37 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "material2-board"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "./dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "tsconfig": "tsconfig.json",
+      "prefix": "app",
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {},
+  "lint": [],
+  "test": {},
+  "defaults": {
+    "styleExt": "css",
+    "component": {}
+  }
+}
diff --git a/tools/dashboard/.gitignore b/tools/dashboard/.gitignore
new file mode 100644
index 00000000000..b672e5b1b42
--- /dev/null
+++ b/tools/dashboard/.gitignore
@@ -0,0 +1,4 @@
+# Sub Gitignore file for the Dashboard project.
+dist/
+node_modules/
+package-lock.json
diff --git a/tools/dashboard/package.json b/tools/dashboard/package.json
new file mode 100644
index 00000000000..2a17ada9f4f
--- /dev/null
+++ b/tools/dashboard/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "material2-board",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "build-production": "ng build --aot -prod"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^4.2.2",
+    "@angular/common": "^4.2.2",
+    "@angular/compiler": "^4.2.2",
+    "@angular/core": "^4.2.2",
+    "@angular/forms": "^4.2.2",
+    "@angular/http": "^4.2.2",
+    "@angular/platform-browser": "^4.2.2",
+    "@angular/platform-browser-dynamic": "^4.2.2",
+    "@angular/router": "^4.2.2",
+    "core-js": "^2.4.1",
+    "rxjs": "^5.1.0",
+    "zone.js": "^0.8.12"
+  },
+  "devDependencies": {
+    "@angular/cli": "1.1.1",
+    "@angular/compiler-cli": "^4.2.2",
+    "@angular/language-service": "^4.2.2",
+    "@types/jasmine": "2.5.45",
+    "@types/node": "~6.0.60",
+    "firebase-tools": "^3.9.1",
+    "ts-node": "~3.0.4",
+    "tslint": "~5.3.2",
+    "typescript": "~2.3.3"
+  }
+}
diff --git a/tools/dashboard/src/app/dashboard-app.css b/tools/dashboard/src/app/dashboard-app.css
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/tools/dashboard/src/app/dashboard-app.html b/tools/dashboard/src/app/dashboard-app.html
new file mode 100644
index 00000000000..57453e92c56
--- /dev/null
+++ b/tools/dashboard/src/app/dashboard-app.html
@@ -0,0 +1 @@
+<h1>Angular Material - Board</h1>
diff --git a/tools/dashboard/src/app/dashboard-app.ts b/tools/dashboard/src/app/dashboard-app.ts
new file mode 100644
index 00000000000..b359bc1b33e
--- /dev/null
+++ b/tools/dashboard/src/app/dashboard-app.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'dashboard-app',
+  templateUrl: './dashboard-app.html',
+  styleUrls: ['./dashboard-app.css']
+})
+export class DashboardApp {}
diff --git a/tools/dashboard/src/app/dashboard-module.ts b/tools/dashboard/src/app/dashboard-module.ts
new file mode 100644
index 00000000000..be219dc5e17
--- /dev/null
+++ b/tools/dashboard/src/app/dashboard-module.ts
@@ -0,0 +1,15 @@
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+import {DashboardApp} from './dashboard-app';
+
+@NgModule({
+  declarations: [
+    DashboardApp
+  ],
+  imports: [
+    BrowserModule
+  ],
+  providers: [],
+  bootstrap: [DashboardApp]
+})
+export class DashboardModule {}
diff --git a/tools/dashboard/src/assets/.gitkeep b/tools/dashboard/src/assets/.gitkeep
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/tools/dashboard/src/environments/environment.prod.ts b/tools/dashboard/src/environments/environment.prod.ts
new file mode 100644
index 00000000000..3612073bc31
--- /dev/null
+++ b/tools/dashboard/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
diff --git a/tools/dashboard/src/environments/environment.ts b/tools/dashboard/src/environments/environment.ts
new file mode 100644
index 00000000000..ffe8aed7664
--- /dev/null
+++ b/tools/dashboard/src/environments/environment.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: false
+};
diff --git a/tools/dashboard/src/favicon.ico b/tools/dashboard/src/favicon.ico
new file mode 100644
index 00000000000..8081c7ceaf2
Binary files /dev/null and b/tools/dashboard/src/favicon.ico differ
diff --git a/tools/dashboard/src/index.html b/tools/dashboard/src/index.html
new file mode 100644
index 00000000000..b46e9cdfa71
--- /dev/null
+++ b/tools/dashboard/src/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Angular Material - Board</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <dashboard-app></dashboard-app>
+</body>
+</html>
diff --git a/tools/dashboard/src/main.ts b/tools/dashboard/src/main.ts
new file mode 100644
index 00000000000..d346095f7ca
--- /dev/null
+++ b/tools/dashboard/src/main.ts
@@ -0,0 +1,11 @@
+import {enableProdMode} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+import {environment} from './environments/environment';
+import {DashboardModule} from './app/dashboard-module';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(DashboardModule);
diff --git a/tools/dashboard/src/polyfills.ts b/tools/dashboard/src/polyfills.ts
new file mode 100644
index 00000000000..2143ebfe511
--- /dev/null
+++ b/tools/dashboard/src/polyfills.ts
@@ -0,0 +1,3 @@
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
diff --git a/tools/dashboard/src/styles.css b/tools/dashboard/src/styles.css
new file mode 100644
index 00000000000..90d4ee0072c
--- /dev/null
+++ b/tools/dashboard/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/tools/dashboard/src/tsconfig.json b/tools/dashboard/src/tsconfig.json
new file mode 100644
index 00000000000..860bdbd295e
--- /dev/null
+++ b/tools/dashboard/src/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "outDir": "../dist",
+    "baseUrl": ".",
+    "lib": ["es2016", "dom"],
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "noImplicitAny": true,
+    "target": "es5",
+    "module": "es2015",
+    "typeRoots": ["node_modules/@types"],
+    "types": []
+  }
+}
diff --git a/tools/dashboard/src/typings.d.ts b/tools/dashboard/src/typings.d.ts
new file mode 100644
index 00000000000..ef5c7bd6205
--- /dev/null
+++ b/tools/dashboard/src/typings.d.ts
@@ -0,0 +1,5 @@
+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+  id: string;
+}