diff --git a/src/main/webdemo/www/create-deal.html b/src/main/webdemo/www/create-deal.html
deleted file mode 100644
index 2eb783a2ca..0000000000
--- a/src/main/webdemo/www/create-deal.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <!-- Standard Meta -->
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-
-    <!-- Site Properties -->
-    <title>IRS Create Deal Viewer</title>
-    <link rel="stylesheet" type="text/css" href="./semantic/semantic.css">
-
-    <script src="./semantic/semantic.js"></script>
-
-</head>
-<body>
-<div class="ui inverted menu">
-    <span class="header item"><a href="./">Home</a></span>
-</div>
-<div class="ui container">
-
-</div>
-</body>
-</html>
diff --git a/src/main/webdemo/www/index.html b/src/main/webdemo/www/index.html
index 0e1b07902b..8a85671b60 100644
--- a/src/main/webdemo/www/index.html
+++ b/src/main/webdemo/www/index.html
@@ -14,62 +14,15 @@
     <script src="bower_components/lodash/lodash.js"></script>
     <script src="semantic/semantic.js"></script>
     <script src="bower_components/angular/angular.js"></script>
+    <script src="bower_components/angular-route/angular-route.js"></script>
     <script src="js/app.js"></script>
 </head>
 <body ng-controller="HomeController">
 <div class="ui inverted menu">
-    <span class="header item"><a href="./">Home</a></span>
+    <span class="header item"><a href="#/">Home</a></span>
 </div>
 <div class="ui container">
-    <div class="ui negative message" id="http-error" ng-show="httpError">{{httpError}}</div>
-    <div class="ui info message" id="info-message" ng-show="infoMsg">{{infoMsg}}</div>
-    <div class="ui secondary menu">
-        <div class="ui active dimmer" ng-show="isLoading()">
-            <div class="ui text loader">Loading</div>
-        </div>
-        <div class="left item">
-            <div class="ui left labeled button">
-                <span class="ui basic label">{{date.year}}</span>
-                <button class="ui icon button" ng-click="updateDate('year')"><i class="plus icon"></i></button>
-            </div>
-            <div class="ui left labeled button">
-                <span class="ui basic label">{{date.month}}</span>
-                <button class="ui icon button" ng-click="updateDate('month')"><i class="plus icon"></i></button>
-            </div>
-            <div class="ui left labeled button">
-                <span class="ui basic label">{{date.day}}</span>
-                <button class="ui icon button" ng-click="updateDate('day')"><i class="plus icon"></i></button>
-            </div>
-        </div>
-        <div class="right item">
-            <a class="ui primary button" href="create-deal.html">Create Deal</a>
-        </div>
-    </div>
-    <div class="ui main">
-
-        <h3 class="ui header">Recent deals</h3>
-
-        <table class="ui striped table">
-            <thead>
-            <tr class="center aligned">
-                <th>Trade Id</th>
-                <th>Fixed Leg Payer</th>
-                <th>Amount</th>
-                <th>Floating Rate Payer</th>
-                <th>Amount</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr class="center aligned" ng-repeat="deal in deals">
-                <td><a href="./deal.html?id={{deal.ref}}">{{deal.ref}}</a></td>
-                <td class="single line"><a href="party.html">{{deal.fixedLeg.fixedRatePayer}}</a></td>
-                <td class="single line">{{deal.fixedLeg.notional.quantity}} {{deal.fixedLeg.notional.token}}</td>
-                <td class="single line"><a href="party.html">{{deal.floatingLeg.floatingRatePayer}}</a></td>
-                <td class="single line">{{deal.floatingLeg.notional.quantity}} {{deal.floatingLeg.notional.token}}</td>
-            </tr>
-            </tbody>
-        </table>
-    </div>
+    <div ng-view></div>
 </div>
 </body>
 </html>
diff --git a/src/main/webdemo/www/js/app.js b/src/main/webdemo/www/js/app.js
index c8b7446ea1..da7f4cabc2 100644
--- a/src/main/webdemo/www/js/app.js
+++ b/src/main/webdemo/www/js/app.js
@@ -1,6 +1,24 @@
 "use strict"
 
-let irsViewer = angular.module('irsViewer', []);
+let irsViewer = angular.module('irsViewer', ['ngRoute'])
+    .config(($routeProvider, $locationProvider) => {
+        $routeProvider
+            .when('/', {
+                controller: 'HomeController',
+                templateUrl: 'view/home.html'
+            })
+            .when('/deal/:dealId', {
+                controller: 'DealController',
+                templateUrl: 'view/deal.html'
+            })
+            .when('/party/:partyId', {
+                templateUrl: 'view/party.html'
+            })
+            .when('/create-deal', {
+                templateUrl: 'view/create-deal.html'
+            })
+            .otherwise({redirectTo: '/'});
+    })
 
 let nodeService = irsViewer.factory('nodeService', ($http) => {
     return new (function() {
@@ -86,7 +104,7 @@ let nodeService = irsViewer.factory('nodeService', ($http) => {
     });
 });
 
-irsViewer.controller('HomeController', ($http, $scope, nodeService) => {
+irsViewer.controller('HomeController', function HomeController($http, $scope, nodeService) {
     let handleHttpFail = (resp) => {
         console.log(resp.data)
         $scope.httpError = resp.data
@@ -102,7 +120,7 @@ irsViewer.controller('HomeController', ($http, $scope, nodeService) => {
     nodeService.getDeals().then((deals) => $scope.deals = deals);
 });
 
-irsViewer.controller('DealController', ($http, $scope, nodeService) => {
+irsViewer.controller('DealController', function DealController($http, $scope, nodeService) {
     let initSemanticUi = () => {
         $('.ui.accordion').accordion();
     }
diff --git a/src/main/webdemo/www/party.html b/src/main/webdemo/www/party.html
deleted file mode 100644
index 9acbfe7413..0000000000
--- a/src/main/webdemo/www/party.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <!-- Standard Meta -->
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-
-    <!-- Site Properties -->
-    <title>IRS Party Viewer</title>
-    <link rel="stylesheet" type="text/css" href="./semantic/semantic.css">
-
-    <script src="./semantic/semantic.js"></script>
-
-</head>
-<body>
-<div class="ui inverted menu">
-    <span class="header item"><a href="./">Home</a></span>
-</div>
-<div class="ui container">
-
-</div>
-</body>
-</html>
diff --git a/src/main/webdemo/www/view/create-deal.html b/src/main/webdemo/www/view/create-deal.html
new file mode 100644
index 0000000000..703a40e285
--- /dev/null
+++ b/src/main/webdemo/www/view/create-deal.html
@@ -0,0 +1,3 @@
+<div class="ui container">
+
+</div>
\ No newline at end of file
diff --git a/src/main/webdemo/www/deal.html b/src/main/webdemo/www/view/deal.html
similarity index 88%
rename from src/main/webdemo/www/deal.html
rename to src/main/webdemo/www/view/deal.html
index 3a7e8703d8..08360dc57f 100644
--- a/src/main/webdemo/www/deal.html
+++ b/src/main/webdemo/www/view/deal.html
@@ -1,25 +1,3 @@
-<!DOCTYPE html>
-<html ng-app="irsViewer">
-<head>
-    <!-- Standard Meta -->
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-
-    <!-- Site Properties -->
-    <title>IRS Deal Viewer</title>
-    <link rel="stylesheet" type="text/css" href="./semantic/semantic.css">
-
-    <script src="bower_components/jquery/dist/jquery.js"></script>
-    <script src="bower_components/lodash/lodash.js"></script>
-    <script src="semantic/semantic.js"></script>
-    <script src="bower_components/angular/angular.js"></script>
-    <script src="js/app.js"></script>
-</head>
-<body ng-controller="DealController">
-<div class="ui inverted menu">
-    <span class="header item"><a href="./">Home</a></span>
-</div>
 <div class="ui container">
     <div class="ui active dimmer" ng-show="isLoading()">
         <div class="ui text loader">Loading</div>
@@ -41,7 +19,7 @@
                     <td>Parties</td>
                     <td>
                         <span ng-repeat="party in deal.parties">
-                            <a href="party.html">{{party}}</a><span ng-show="!$last">,</span>
+                            <a href="#/party/{{party}}">{{party}}</a><span ng-show="!$last">,</span>
                         </span>
                     </td>
                 </tr>
@@ -78,7 +56,7 @@
                 <tbody>
                 <tr class="center aligned">
                     <td>Payer</td>
-                    <td><a href="party.html">{{deal.fixedLeg.fixedRatePayer}}</a></td>
+                    <td><a href="#/party/{{deal.fixedLeg.fixedRatePayer}}">{{deal.fixedLeg.fixedRatePayer}}</a></td>
                 </tr>
                 <tr class="center aligned">
                     <td>Notional Amount</td>
@@ -147,7 +125,7 @@
                 <tbody>
                 <tr class="center aligned">
                     <td>Payer</td>
-                    <td><a href="party.html">{{deal.floatingLeg.floatingRatePayer}}</a></td>
+                    <td><a href="#/party/{{deal.floatingLeg.floatingRatePayer}}">{{deal.floatingLeg.floatingRatePayer}}</a></td>
                 </tr>
                 <tr class="center aligned">
                     <td>Notional Amount</td>
@@ -227,6 +205,4 @@
             </table>
         </div>
     </div>
-</div>
-</body>
-</html>
+</div>
\ No newline at end of file
diff --git a/src/main/webdemo/www/view/home.html b/src/main/webdemo/www/view/home.html
new file mode 100644
index 0000000000..1b9fd905d8
--- /dev/null
+++ b/src/main/webdemo/www/view/home.html
@@ -0,0 +1,51 @@
+<div class="ui container">
+    <div class="ui negative message" id="http-error" ng-show="httpError">{{httpError}}</div>
+    <div class="ui info message" id="info-message" ng-show="infoMsg">{{infoMsg}}</div>
+    <div class="ui secondary menu">
+        <div class="ui active dimmer" ng-show="isLoading()">
+            <div class="ui text loader">Loading</div>
+        </div>
+        <div class="left item">
+            <div class="ui left labeled button">
+                <span class="ui basic label">{{date.year}}</span>
+                <button class="ui icon button" ng-click="updateDate('year')"><i class="plus icon"></i></button>
+            </div>
+            <div class="ui left labeled button">
+                <span class="ui basic label">{{date.month}}</span>
+                <button class="ui icon button" ng-click="updateDate('month')"><i class="plus icon"></i></button>
+            </div>
+            <div class="ui left labeled button">
+                <span class="ui basic label">{{date.day}}</span>
+                <button class="ui icon button" ng-click="updateDate('day')"><i class="plus icon"></i></button>
+            </div>
+        </div>
+        <div class="right item">
+            <a class="ui primary button" href="#/create-deal">Create Deal</a>
+        </div>
+    </div>
+    <div class="ui main">
+
+        <h3 class="ui header">Recent deals</h3>
+
+        <table class="ui striped table">
+            <thead>
+            <tr class="center aligned">
+                <th>Trade Id</th>
+                <th>Fixed Leg Payer</th>
+                <th>Amount</th>
+                <th>Floating Rate Payer</th>
+                <th>Amount</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr class="center aligned" ng-repeat="deal in deals">
+                <td><a href="#/deal/{{deal.ref}}">{{deal.ref}}</a></td>
+                <td class="single line"><a href="#/party/{{deal.fixedLeg.fixedRatePayer}}">{{deal.fixedLeg.fixedRatePayer}}</a></td>
+                <td class="single line">{{deal.fixedLeg.notional.quantity}} {{deal.fixedLeg.notional.token}}</td>
+                <td class="single line"><a href="#/party/{{deal.floatingLeg.floatingRatePayer}}">{{deal.floatingLeg.floatingRatePayer}}</a></td>
+                <td class="single line">{{deal.floatingLeg.notional.quantity}} {{deal.floatingLeg.notional.token}}</td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
diff --git a/src/main/webdemo/www/view/party.html b/src/main/webdemo/www/view/party.html
new file mode 100644
index 0000000000..703a40e285
--- /dev/null
+++ b/src/main/webdemo/www/view/party.html
@@ -0,0 +1,3 @@
+<div class="ui container">
+
+</div>
\ No newline at end of file
