diff --git a/web/tpl/flow-list-item.html b/web/tpl/flow-list-item.html
new file mode 100644
index 0000000..7c099c3
--- /dev/null
+++ b/web/tpl/flow-list-item.html
@@ -0,0 +1 @@
+        <td><%= cookie %></td><td><%= priority %></td><td><%= matchHTML %></td><td><%= actionText %></td><td><%= packetCount %></td><td><%= byteCount %></td><td><%= durationSeconds %> s</td><td><%= idleTimeout %> s</td>
diff --git a/web/tpl/flow-list.html b/web/tpl/flow-list.html
new file mode 100644
index 0000000..21a30cf
--- /dev/null
+++ b/web/tpl/flow-list.html
@@ -0,0 +1,19 @@
+<div class="page-header">
+    <h1>Flows (<%= nflows %>)</h1>
+</div>
+<table class="table table-striped flow-table">
+    <thead><tr><th>Cookie</th><th>Priority</th><th>Match</th><th>Action</th><th>Packets</th><th>Bytes</th><th>Age</th><th>Timeout</th></tr></thead>
+    <tbody>
+        <!-- flows will be inserted here by FlowListView:render -->
+    </tbody>
+</table>
+<!-- TODO implement pagination -->
+<!-- 
+<div class="pagination pagination-right"><ul>
+    <li><a href="">&larr;</a></li>
+    <li class="active"><a href="">1</a></li>
+    <li><a href="">2</a></li>
+    <li><a href="">&rarr;</a>
+</ul></div>
+ -->
+ 
\ No newline at end of file
diff --git a/web/tpl/header.html b/web/tpl/header.html
new file mode 100644
index 0000000..b1c734b
--- /dev/null
+++ b/web/tpl/header.html
@@ -0,0 +1,33 @@
+<div class="navbar navbar-fixed-top">
+    <div class="navbar-inner">
+        <div class="container">
+            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </a>
+            <img src="img/floodlight.png" style="float:left;">
+
+            <div class="nav-collapse">
+                <ul class="nav">
+                    <li><a href="/">Dashboard</a></li>
+                    <li><a href="/topology">Topology</a></li>
+                    <li><a href="/switches">Switches</a></li>
+                    <li><a href="/hosts">Hosts</a></li>
+                    <!-- <li><a href="/vlans">VLANs</a></li> -->
+                </ul>
+                <!--
+                <form id="searchForm" class="navbar-search pull-right dropdown">
+                    <input id="searchText" type="text" class="search-query dropdown-toggle"
+                           placeholder="Search (try an IP or MAC address)">
+                </form>
+            -->
+            </div> <!--/.nav-collapse -->
+            <form class="navbar-form pull-right">
+                <label class="checkbox">
+                    <input type="checkbox" id="live-updates" checked="yes">Live updates
+                </label>
+            </form>
+        </div>
+    </div>
+</div>
diff --git a/web/tpl/home.html b/web/tpl/home.html
new file mode 100644
index 0000000..6abf494
--- /dev/null
+++ b/web/tpl/home.html
@@ -0,0 +1,7 @@
+<div id="controller-status"></div>
+
+<div id="switch-list"></div>
+
+<div id="host-list"></div>
+
+<!--  <div id="vlan-list"></div> -->
diff --git a/web/tpl/host-list-item.html b/web/tpl/host-list-item.html
new file mode 100644
index 0000000..169477e
--- /dev/null
+++ b/web/tpl/host-list-item.html
@@ -0,0 +1 @@
+        <td><a href="/host/<%= mac %>"><%= mac %></a></td><!-- <td><%= vlan %></td> --><td><%= ipv4 %></td><td><%= swport %></td><td><%= lastSeen %></td>
diff --git a/web/tpl/host-list.html b/web/tpl/host-list.html
new file mode 100644
index 0000000..bc1f364
--- /dev/null
+++ b/web/tpl/host-list.html
@@ -0,0 +1,23 @@
+<div class="row">
+<div class="span12">
+<div class="page-header">
+    <h1>Hosts (<%= nhosts %>)</h1>
+</div>
+<table class="table table-striped host-table">
+    <thead><tr><th>MAC Address</th><!-- <th>VLAN</th> --><th>IP Address</th><th>Switch Port</th><th>Last Seen</th>
+           </tr></thead>
+    <tbody>
+        <!-- hosts will be inserted here by HostListView.render -->
+    </tbody>
+</table>
+<!-- TODO implement pagination -->
+<!--
+<div class="pagination pagination-right"><ul>
+    <li><a href="">&larr;</a></li>
+    <li class="active"><a href="">1</a></li>
+    <li><a href="">2</a></li>
+    <li><a href="">&rarr;</a>
+</ul></div>
+-->
+</div>
+</div>
diff --git a/web/tpl/host.html b/web/tpl/host.html
new file mode 100644
index 0000000..985940f
--- /dev/null
+++ b/web/tpl/host.html
@@ -0,0 +1,11 @@
+<div class="row">
+<div class="span12">
+<div class="page-header">
+    <h1>Host <%= id %></h1>
+</div>
+<p>
+<!-- VLAN: <a href="/vlan/<%= vlan %>"><%= vlan %></a><br> -->
+IP addresses: <%= ipv4 %><br>
+Attachment points: <%= swport %><br>
+Last seen: <%= lastSeen %>
+</p>
diff --git a/web/tpl/port-list-item.html b/web/tpl/port-list-item.html
new file mode 100644
index 0000000..bfc1978
--- /dev/null
+++ b/web/tpl/port-list-item.html
@@ -0,0 +1 @@
+        <td><a id="<%= portNumber %>"><%= name %></a></td><td><%= status %></td><td><%= transmitBytes %></td><td><%= receiveBytes %></td><td><%= transmitPackets %></td><td><%= receivePackets %></td><td><%= dropped %></td><td><%= errors %></td>
diff --git a/web/tpl/port-list.html b/web/tpl/port-list.html
new file mode 100644
index 0000000..9ceb6c3
--- /dev/null
+++ b/web/tpl/port-list.html
@@ -0,0 +1,19 @@
+<div class="page-header">
+    <h1>Ports (<%= nports %>)</h1>
+</div>
+<table class="table table-striped port-table">
+    <thead><tr><th>#</th><th>Link Status</th><th>TX Bytes</th><th>RX Bytes</th><th>TX Pkts</th><th>RX Pkts</th><th>Dropped</th><th>Errors</th></tr></thead>
+    <tbody>
+        <!-- ports will be inserted here by PortListView:render -->
+    </tbody>
+</table>
+<!-- TODO implement pagination -->
+<!--
+<div class="pagination pagination-right"><ul>
+    <li><a href="">&larr;</a></li>
+    <li class="active"><a href="">1</a></li>
+    <li><a href="">2</a></li>
+    <li><a href="">&rarr;</a>
+</ul></div>
+-->
+ 
\ No newline at end of file
diff --git a/web/tpl/status.html b/web/tpl/status.html
new file mode 100644
index 0000000..5a76869
--- /dev/null
+++ b/web/tpl/status.html
@@ -0,0 +1,13 @@
+<div class="row">
+<div class="span12">
+<div class="page-header">
+    <h1>Controller Status</h1>
+</div>
+<table class="status-table">
+    <tr><td class="status-head">Hostname:<td><%= host %>:<%= ofport %></td></tr>
+    <tr><td class="status-head">Healthy:<td><%= healthy %></td>
+    <tr><td class="status-head">Uptime:<td><%= uptime %><td>
+    <tr><td class="status-head">JVM memory bloat:<td><%= free %> free out of <%= total %></td>
+    <Tr><td class="status-head">Modules loaded:<td><%= moduleText %></td>
+</div>
+</div>
diff --git a/web/tpl/switch-list-item.html b/web/tpl/switch-list-item.html
new file mode 100644
index 0000000..7ce0262
--- /dev/null
+++ b/web/tpl/switch-list-item.html
@@ -0,0 +1 @@
+        <td><a href="/switch/<%= id %>"><%= id %></a></td><td><%= inetAddress %></td><td><%= manufacturerDescription %><td><%= packetCount %></td><td><%= byteCount %></td><td><%= flowCount %></td><td><%= connectedSince %></td>
diff --git a/web/tpl/switch-list.html b/web/tpl/switch-list.html
new file mode 100644
index 0000000..e7dac09
--- /dev/null
+++ b/web/tpl/switch-list.html
@@ -0,0 +1,22 @@
+<div class="row">
+<div class="span12">
+<div class="page-header">
+    <h1>Switches (<%= nswitches %>)</h1>
+</div>
+<table class="table table-striped switch-table">
+    <thead><tr><th>DPID</th><th>IP Address</th><th>Vendor</th><th>Packets</th><th>Bytes</th><th>Flows</th><th>Connected Since</th></tr></thead>
+    <tbody>
+        <!-- switches will be inserted here by SwitchListView:render -->
+    </tbody>
+</table>
+<!-- TODO implement pagination -->
+<!--
+<div class="pagination pagination-right"><ul>
+    <li><a href="">&larr;</a></li>
+    <li class="active"><a href="">1</a></li>
+    <li><a href="">2</a></li>
+    <li><a href="">&rarr;</a>
+</ul></div>
+-->
+</div>
+</div>
diff --git a/web/tpl/switch.html b/web/tpl/switch.html
new file mode 100644
index 0000000..af89797
--- /dev/null
+++ b/web/tpl/switch.html
@@ -0,0 +1,18 @@
+<div class="row">
+<div class="span12">
+<div class="page-header">
+    <h1>Switch <%= id %> <%= inetAddress %></h1>
+</div>
+<p>Connected since <%= connectedSince %><br>
+<%= manufacturerDescription %><br>
+<%= hardwareDescription %><br>
+<%= softwareDescription %><br>
+S/N: <%= serialNumber %><br>
+</p>
+
+<div id="port-list"></div> <!-- TODO would be nice to make this collapsible -->
+
+<div id="flow-list"></div>
+
+</div>
+</div>
diff --git a/web/tpl/topology.html b/web/tpl/topology.html
new file mode 100644
index 0000000..ce77cc7
--- /dev/null
+++ b/web/tpl/topology.html
@@ -0,0 +1,8 @@
+<div class="row">
+<div class="span12">
+<div class="page-header">
+    <h1>Network Topology</h1>
+</div>
+<div id="topology-graph"></div>
+</div>
+</div>
diff --git a/web/tpl/vlan-list-item.html b/web/tpl/vlan-list-item.html
new file mode 100644
index 0000000..55a2f35
--- /dev/null
+++ b/web/tpl/vlan-list-item.html
@@ -0,0 +1 @@
+        <tr><td><a href="/vlan/<%= id %>"><%= id %></a></td><td><%= name %></td><td><%= nhosts %></td></tr>
diff --git a/web/tpl/vlan.html b/web/tpl/vlan.html
new file mode 100644
index 0000000..edcd408
--- /dev/null
+++ b/web/tpl/vlan.html
@@ -0,0 +1 @@
+<p>A VLAN probably has a list of ports and hosts.</p>