diff --git a/cli/sdncon/ui/templates/index.html b/cli/sdncon/ui/templates/index.html
new file mode 100755
index 0000000..50f63b5
--- /dev/null
+++ b/cli/sdncon/ui/templates/index.html
@@ -0,0 +1,184 @@
+<!-- 
+
+ Copyright (c) 2013 Big Switch Networks, Inc.
+
+ Licensed under the Eclipse Public License, Version 1.0 (the
+ "License"); you may not use this file except in compliance with the
+ License. You may obtain a copy of the License at
+
+      http://www.eclipse.org/legal/epl-v10.html
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied. See the License for the specific language governing
+ permissions and limitations under the License.
+
+ Web UI home
+
+-->
+
+{% extends "base.html" %}
+{% block content %}
+
+		<div id="skip-link">
+		</div>
+		<div id="page">
+			<header id="header" role="banner">
+			<div class="page-width"><div class="page-width-inner clearfix">
+					<div id="site-logo" style="margin: 15px; display: table;">
+						<div style="float: left; width: 100%;">
+							<img src="static/images/logo_opendaylight.png" border="0" style="margin: 0px; padding: 5px;">
+						</div>
+						<div style="float: left;">
+							<span class="title header-processed" id="page-title" style="color: #3f3f40; font-family: sans-serif, Arial Unicode MS, Arial; font-weight: 100; font-size: 40px; margin-bottom: 0px; margin-top: 0px; height: 40px; display: table-cell; vertical-align: middle; width: 100%; position: static; padding-left: 30px;">SDN Controller Platform Dashboard</span>
+						</div>
+					</div>
+					<div id="tagline">
+						<div class="region region-tagline">
+							<div id="block-block-9" class="block block-block first last odd">
+								<div class="block-content clearfix">
+								</div>
+							</div>
+						</div>
+					</div>
+
+			</div></div>
+			</header>
+			<div id="main" class="clearfix">
+				<div class="page-width"><div class="page-width-inner clearfix" style="margin:50px; margin-top: 0px;">
+						<a id="main-content"></a> 
+						<div id="tabs">
+							<ul>
+								<li><a href="#tabs-1">Switches</a></li>
+								<li><a href="#tabs-2">Inter-Switch Links</a></li>
+								<li><a href="#tabs-3">Hosts</a></li>
+								<li><a href="#tabs-4">Tunnels</a></li>
+								<li><a href="#tabs-5">Topology</a></li>
+								<span class="refresh" onClick="refreshTable(99);" style="float: right; padding: .6em; position: relative; z-index:1;"><img src="images/refresh.png" border="0"></span>
+							</ul>
+							<div id="tabs-1">
+								<div id="switchTableHolder" class="dynamictable">
+								</div>
+							</div>
+							<div style="clear: both;"></div>
+							<div id="tabs-2">
+								<div id="linkTableHolder" class="dynamictable">
+								</div>
+							</div>
+							<div style="clear: both;"></div>
+							<div id="tabs-3">
+								<div id="deviceTableHolder" class="dynamictable">
+								</div>
+							</div>
+							<div id="tabs-4">
+								<div id="tunnelTableHolder" class="dynamictable">
+								</div>
+							</div>
+							<div style="clear: both;"></div>
+							<div id="tabs-5">
+								<div id="TopologyTableHolder" class="dynamictable" style="border: 1px #e5e5e5;">
+									<div id="container">
+										<div id="center-container" style="background-color: #e5e5e5; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;">
+											<div id="infovis"></div>    
+										</div>
+										<div id="log" style="display: none;"></div>
+									</div>
+								</div>
+								<div style="text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines;">
+
+									<div style="width: 100%; display: inline-block"></div>
+
+								</div>
+
+								<div style="clear: both;"></div>
+
+							</div>
+
+							<!-- Main content inner-->
+
+						</div>
+				</div></div>
+				<footer id="footer" role="contentinfo">
+				<div class="page-width"><div class="page-width-inner clearfix">  <div class="region region-footer">
+							<div id="block-p6-helper-footer" class="block block-p6-helper first last odd">
+
+
+								<div class="block-content clearfix">
+									<span id="ui-footer-statement" style="font-family: Helvetica, Arial, sans-serif; font-size: 11px; padding-left: 45;"><center>&nbsp; &#169;2013 OpenDaylight, A Linux Foundation Collaborative Project. All Rights Reserved.</center></span>  </div>
+							</div>
+						</div>
+				</div></div>
+				</footer>
+
+				<div id="dumpingground" style="display: none;"></div> 
+
+
+				<!-- /#page -->
+                <script src="static/js/thirdparty/jit.js"></script>
+                <script src="static/js/thirdparty/jquery-1.9.1.min.js"></script>  
+                <script src="static/js/thirdparty/jquery-ui-1.10.2.custom.min.js"></script>
+				<script type="text/javascript">
+
+					$(document).ready(function(){
+							refreshTable(99);
+							});
+$(function() {
+		$( "#tabs" ).tabs({
+activate: function( event, ui ) { refreshTable(ui.newTab.id); }
+});
+		// Hover states on the static widgets
+		$( "#dialog-link, #icons li" ).hover(
+			function() {
+			$( this ).addClass( "ui-state-hover" );
+			},
+			function() {
+			$( this ).removeClass( "ui-state-hover" );
+			}
+			);
+		});
+
+
+function refreshTable(choice){
+	switch(choice) {
+		case 0:
+			$('#switchTableHolder').load('ui/show_switch');
+			break;
+		case 1:
+			$('#linkTableHolder').load('ui/show_link');
+			break;
+		case 2:
+			$('#deviceTableHolder').load('ui/show_host');
+			break;
+		case 3:
+			$('#tunnelTableHolder').load('ui/show_tunnel');
+			break;
+		case 4:
+			var tmpJSON = loadTopologyJSON();
+			fd.loadJSON(tmpJSON);
+			fd.refresh();
+			break;
+		default:
+			$('#switchTableHolder').load('ui/show_switch');
+			$('#linkTableHolder').load('ui/show_link');
+			$('#deviceTableHolder').load('ui/show_host');
+			$('#tunnelTableHolder').load('ui/show_tunnel');
+			var tmpJSON = loadTopologyJSON();
+			fd.loadJSON(tmpJSON);
+			fd.refresh();
+			break;
+	}
+	//setTimeout(refreshTable, 5000);
+}
+    function loadTopologyJSON(){
+        var request = new XMLHttpRequest( );
+        request.open("GET", "ui/build_topology", false);
+        request.send(null);
+        var jsonFILE = request.response;
+        eval(jsonFILE);
+        return(json);
+    }
+    </script>
+<script language="javascript" type="text/javascript" src="static/js/topology.js"></script>
+
+{% endblock %}