diff --git a/src/main/webdemo/.gitignore b/src/main/webdemo/.gitignore
new file mode 100644
index 0000000000..2a525cf8cd
--- /dev/null
+++ b/src/main/webdemo/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+www/semantic/
diff --git a/src/main/webdemo/semantic.json b/src/main/webdemo/semantic.json
new file mode 100644
index 0000000000..a0d95bb085
--- /dev/null
+++ b/src/main/webdemo/semantic.json
@@ -0,0 +1,21 @@
+{
+  "base": "semantic\\",
+  "paths": {
+    "source": {
+      "config": "src/theme.config",
+      "definitions": "src/definitions/",
+      "site": "src/site/",
+      "themes": "src/themes/"
+    },
+    "output": {
+      "packaged": "../www/semantic/",
+      "uncompressed": "../www/semantic/components/",
+      "compressed": "../www/semantic/components/",
+      "themes": "../www/semantic/themes/"
+    },
+    "clean": "../www/semantic/"
+  },
+  "permission": false,
+  "rtl": false,
+  "version": "2.1.8"
+}
\ No newline at end of file
diff --git a/src/main/webdemo/www/create-deal.html b/src/main/webdemo/www/create-deal.html
new file mode 100644
index 0000000000..2eb783a2ca
--- /dev/null
+++ b/src/main/webdemo/www/create-deal.html
@@ -0,0 +1,24 @@
+<!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/deal.html b/src/main/webdemo/www/deal.html
new file mode 100644
index 0000000000..f489f0314e
--- /dev/null
+++ b/src/main/webdemo/www/deal.html
@@ -0,0 +1,27 @@
+<!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 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">
+    <!-- Todo: Deals should have common data at the top and interchangable green/red
+       buyer and seller -->
+    <!-- All fields of the deal can be found from the JSON returned by the IRS demo API.
+    All fields can be represented in some way -->
+</div>
+</body>
+</html>
diff --git a/src/main/webdemo/www/index.html b/src/main/webdemo/www/index.html
new file mode 100644
index 0000000000..21e32d759f
--- /dev/null
+++ b/src/main/webdemo/www/index.html
@@ -0,0 +1,67 @@
+<!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 Demo 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 class="ui secondary menu">
+        <div class="left item">
+            <div class="ui left labeled button">
+                <span class="ui basic label">2016</span>
+                <button class="ui icon button"><i class="plus icon"></i></button>
+            </div>
+            <div class="ui left labeled button">
+                <span class="ui basic label">01</span>
+                <button class="ui icon button"><i class="plus icon"></i></button>
+            </div>
+            <div class="ui left labeled button">
+                <span class="ui basic label">01</span>
+                <button class="ui icon button"><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">
+                    <td><a href="./deal.html">1</a></td>
+                    <td class="single line"><a href="party.html">Big Bank</a></td>
+                    <td class="single line">500 GBP</td>
+                    <td class="single line"><a href="party.html">Little Bank</a></td>
+                    <td class="single line">10 GBP</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+</body>
+</html>
diff --git a/src/main/webdemo/www/party.html b/src/main/webdemo/www/party.html
new file mode 100644
index 0000000000..9acbfe7413
--- /dev/null
+++ b/src/main/webdemo/www/party.html
@@ -0,0 +1,24 @@
+<!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>
