diff --git a/templates/root/index.tmpl b/templates/root/index.tmpl
new file mode 100644
index 00000000000..714a1a79288
--- /dev/null
+++ b/templates/root/index.tmpl
@@ -0,0 +1,380 @@
+<!-- This comment will put IE 6 in quirks mode -->
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html lang="en">
+<head>
+	<link rel="stylesheet" type="text/css" href="$h.url_for('/static/style/reset.css')"></link>
+    <script type="text/javascript" src="$h.url_for('/static/scripts/jquery.js')"></script>
+    <script type="text/javascript" src="$h.url_for('/static/scripts/jquery.dimensions.js')"></script>
+    <script type="text/javascript" src="$h.url_for('/static/scripts/jquery.interface2.iutil.js')"></script>
+    <script type="text/javascript" src="$h.url_for('/static/scripts/jquery.interface2.behavior.js')"></script>
+    <script type="text/javascript" src="$h.url_for('/static/scripts/jquery.interface2.draggables.js')"></script>
+	<script type="text/javascript">
+	<!--
+	var jq = jQuery.noConflict();
+	var q = jq;
+	
+	var left_hidden = false;
+	var left_saved_size = null;
+	var right_hidden = false;
+	var right_hidden_by_tool = false;
+	var right_saved_size = null;
+	var hidden_width = 7;
+	
+	var resize_left = function( x ) {
+	    oldx = x;
+	    if ( x < 0 ) x = 0;
+	    jq( "#left" ).css( "width", x );
+	    jq( "#left-border" ).css( "left", oldx );
+	    jq( "#center" ).css( "left", x+7 );
+	}
+	
+	var resize_right = function( x ) {
+	    jq( "#right" ).css( "width", x );
+	    jq( "#center" ).css( "right", x+9 );
+        jq( "#right-border").css( "right", x ).css( "left", "" )
+	}
+	
+    var hide_left = function() {
+        left_saved_size = jq("#left-border").position().left;
+        // Move center
+        jq( "#center" ).css( "left", hidden_width );
+        jq( "#left-border" ).removeClass( "hover" );
+        jq( "#left" ).animate( { left: - left_saved_size }, "fast" );
+        jq( "#left-border" ).animate( {left: -1 }, "fast", function() {
+            jq( this ).addClass( "hidden" );
+        });
+    }
+    
+    var unhide_left = function() {
+        jq( "#left-border" ).removeClass( "hover" );
+        jq( "#left-border" ).animate( {left: left_saved_size }, "fast" );
+        jq( "#left" ).css( "left", - left_saved_size ).show().animate( { "left": 0 }, "fast", function () {
+            resize_left( left_saved_size );
+            jq( "#left-border" ).removeClass( "hidden" );
+        });
+    }
+	
+	var toggle_left = function() {
+        left_hidden ? unhide_left() : hide_left();
+        left_hidden = ! left_hidden;
+    }
+    
+    var toggle_right = function()
+    {
+        if ( right_hidden )
+        {
+            jq( "#right-border" ).removeClass( "hover" );
+            jq( "#right-border" ).animate( {right: right_saved_size }, "fast" );
+            jq( "#right" ).css( "right", - right_saved_size ).show().animate( { "right": 0 }, "fast", function () {
+                resize_right( right_saved_size );
+                jq( "#right-border" ).removeClass( "hidden" )
+            });
+            right_hidden_by_tool = false;
+            right_hidden = false;
+        }
+        else
+        {
+            right_saved_size = jq(document).width() - jq("#right-border").position().left;
+            // Move center
+            jq( "#center" ).css( "right", hidden_width + 1 );
+            // Hide border
+            jq( "#right-border" ).removeClass( "hover" );
+            jq( "#right" ).animate( { right: - right_saved_size }, "fast" )
+            jq( "#right-border" ).animate( { right: -1 }, "fast", function() {
+                jq( this ).addClass( "hidden" )
+            });
+            // Left show button
+            // jq( "#right-show" ).show();
+            // Slide out
+            // jq( "#right" ).hide(); /* animate( {width: "hide"}, "fast", "easein" ); */
+            right_hidden_by_tool = false;
+            right_hidden = true;
+        }
+    }
+    
+    function handle_minwidth_hint( x ) {
+        var space = q("#center").width() - ( right_hidden ? right_saved_size : 0 );
+        if ( space < x )
+        {
+            if ( ! right_hidden ) {
+                toggle_right();
+                right_hidden_by_tool = true
+            }
+        } else {
+            if ( right_hidden_by_tool ) {
+                toggle_right();
+                right_hidden_by_tool = false;
+            }
+        }
+    }
+	
+    jq(document).ready( function()
+    {
+        //jq( "#center" ).css( "right", 120 );
+    	jq('#left-border').hover( 
+    	    function() { jq( this ).addClass( "hover" ) },
+    	    function() { jq( this ).removeClass( "hover" ) }
+    	).draggable( {
+    			axis:	'x',
+    			onDrag: function( _, pos ) {
+    			    if ( left_hidden ) {
+    			        jq( "#left" ).css( "left", 0 );
+    			        jq( "#left-border" ).removeClass( "hidden" );
+    			        left_hidden = false;
+    			    }
+    			    resize_left( pos.x );
+    			},
+    			onStart: function( el ) { 
+    			  this.before_drag_left = jq(el).position().left;
+    			  jq( '#DD-helper' ).show();
+    			},
+    			onStop: function( helper, pos ) { 
+			      jq( '#DD-helper' ).hide();
+			      return false;
+    			},
+    			onClickOnly: function() {
+    			    toggle_left();
+    			},
+    			dragModifier: function( position ) {
+    			    x = Math.max( 100, position.x );
+    			    x = Math.min( 400, x );
+    			    return { x: x, y: position.y }
+    			}
+    		}
+    	);
+    	var border_tweak = $.browser.msie ? 14 : 9
+        jq('#right-border').hover( 
+    	    function() { jq( this ).addClass( "hover" ) },
+    	    function() { jq( this ).removeClass( "hover" ) }
+    	).draggable( {
+    			axis:	'x',
+    			onDrag: function( _, pos ) {
+    			    if ( right_hidden ) {
+    			        jq( "#right" ).css( "right", 0 );
+    			        jq( "#right-border" ).removeClass( "hidden" );
+    			        right_hidden = false;
+    			    }
+    			    resize_right( jq(document).width() - pos.x - border_tweak );
+    			},
+    			onStart: function() {
+    			  jq( '#DD-helper' ).show();
+    			},
+    			onStop: function( helper, pos ) {  
+    			  resize_right( jq(document).width() - pos.x - border_tweak );
+			      jq( '#DD-helper' ).hide();
+			      return false;
+    			},
+    			onClickOnly: function() {
+    			    toggle_right();
+    			},
+    			dragModifier: function( position ) {
+    			    x = Math.min( jq(window).width() - 100, position.x );
+    			    x = Math.max( jq(window).width() - 400, x );
+    			    return { x: x, y: position.y }
+    			}
+    		}
+    	);
+        // Insert div that covers everything when dragging the borders
+    	jq("<div id='DD-helper' style='background: white; top: 0; left: 0; width: 100%; height: 100%; position: absolute; z-index: 9000;'></div>")
+    	  .css("opacity", "0.01").appendTo("body").hide();    
+    });
+    // -->
+	</script>
+    <style type="text/css">
+    body, html
+    {
+        overflow: hidden;
+        margin: 0;
+        padding: 0;
+        width: 100%;
+		height: 100%;
+    }
+    body
+    {
+    	font-family: Verdana;
+        background: #eee;
+		font-size: 77%;
+    }
+    #masthead 
+    {
+        position:absolute; 
+        top:0; 
+        left:0; 
+        width:100%; 
+        height:32px;
+        background: url("$h.url_for('/static/style/masthead_bg.png')"); 
+        overflow: hidden; 
+        color:#fff;
+        font-weight: bold;
+        border-bottom: solid #444 1px;
+    }
+    
+    #masthead div.title
+    {
+        margin: 3px;
+        margin-right: 10px;
+        font-size: 182%;
+        font-weight: bold;
+    }
+
+    #left, #left-border, #center, #right-border, #right
+    {
+        position:absolute; 
+        top:39px;
+        bottom:0px;
+        /*height: 500px;*/
+        overflow: hidden; 
+        background:#fff;
+    }
+    #left, #center, #right
+    {
+        border-top: solid #999 1px;
+    }
+    #left-border, #right-border
+    {
+        background: #eeeeee;
+        border-left: solid #999 1px;
+        border-right: solid #999 1px;
+        padding-right: 1px;
+        padding-left: 1px;
+        width: 5px;
+        z-index: 10000;
+    }
+    #left-border div, #right-border div
+    {
+        width: 100%;
+        height: 100%;
+        background-repeat: no-repeat; 
+        background-position: center center;
+    }
+    #left-border div, #right-border.hidden div
+    {
+        background-image: url("$h.url_for('/static/style/tiny_arrow_left.png')");
+        cursor: w-resize;
+    }
+    #left-border.hidden div, #right-border div
+    {
+        background-image: url("$h.url_for('/static/style/tiny_arrow_right.png')");
+        cursor: e-resize;
+    }
+    #left-border.hover div, #right-border.hover div
+    {
+        background-color: #AAAAEE;
+    }
+    #left 
+    {
+        left: 0px;
+        width: 250px;
+        z-index: 200;
+    }
+    #left-border 
+    {
+        left: 250px;
+    }
+    #left-show, #right-show
+    {
+        position: absolute; 
+        display: none; 
+        width: 21px; 
+        z-index: 150;
+        background: #ddd;
+    }
+    #center 
+    {
+        left:259px;
+        right: 259px;
+        overflow: hidden;
+        z-index: 200;
+    }
+    #right-border 
+    {
+        right: 250px;
+    }
+    #right 
+    {
+        width: 250px;
+        right: 0px; 
+        z-index: 200;
+    }
+    td.panel-header
+    {
+        background: #ddd;
+        background-image: url("$h.url_for('/static/style/panel_header_bg.png')");
+        background-position: center center;
+        padding: 0;
+        border-bottom: solid #999 1px;
+    }
+    div.panel-header
+    {
+        margin: 0;
+        padding: 4px;
+        padding-right: 10px;
+        padding-left: 10px;
+        color: #333;
+        font-weight: bold;
+    }
+    table.column-layout
+    {
+        position: absolute; 
+        width: 100%; 
+        height: 100%;
+    }
+  </style>
+  <!--[if IE]>
+  <style>
+	  #left, #left-border, #center, #right-border, #right
+      {
+           height: 600px;
+           height: expression(document.body.clientHeight - 39 + "px");
+      }
+      #left-border, #right-border
+      {
+          width: 9px;
+      }
+      table.column-layout
+      {
+          position: static;
+      }
+  </style>
+  <![endif]-->
+</head>
+<body scroll="no">
+  <div id="masthead">
+       <iframe name="galaxy_masthead" src="$h.url_for( 'masthead' )" width="38" height="100%" frameborder="0" scroll="no" style="margin: 0; border: 0 none; width: 100%; height: 38px; overflow: hidden;"> </iframe>
+  </div>
+  <div id="left">
+      <table class="column-layout" cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
+      <tr class="panel-header">
+      <td class="panel-header">
+      <div class="panel-header" unselectable="on">
+          <div class="panel-title">Tools</div>
+      </div>
+      </td>
+      </tr><tr>
+      <td height="100%" class="panel-body">
+           <iframe name="galaxy_tools" src="$h.url_for( 'tool_menu' )" width="100%" height="100%" frameborder="0" style="margin: 0; border: 0 none; height: 100%;"> </iframe>
+      </td></tr></table>
+  </div>
+  <div id="left-border"><div></div></div>
+  <div id="center">
+      <table class="column-layout" cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
+      <tr height="100%" style="height: 100%"><td height="100%" style="height: 100%;">
+       	  <iframe name="galaxy_main" width="100%" height="100%" frameborder="0" style="margin: 0; border: 0 none; width: 100%; height: 100%;" src="${h.url_for( '/static/welcome.html' )}"> </iframe>
+	  </td></tr></table>
+  </div>
+  <div id="right-border"><div></div></div>
+  <div id="right">
+      <table class="column-layout" cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
+      <tr class="panel-header">
+      <td class="panel-header">
+      <div class="panel-header" unselectable="on">
+          <div class="panel-title">History (<a href="$h.url_for( action='history_options' )" target="galaxy_main">options</a>)</div>
+      </div>
+      </td>
+      </tr><tr height="100%">
+      <td height="100%" style="height: 100%;" class="panel-body">
+          <iframe name="galaxy_history" width="100%" height="100%" frameborder="0" style="margin: 0; border: 0 none; height: 100%;" src="$h.url_for( action='history' )">
+     </td></tr></table>
+  </div>
+</body>
+</html>
\ No newline at end of file
