diff --git a/public/index.html b/public/index.html
index 4b8180de5..3cbf120b2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -134,12 +134,8 @@
     </div>
 
     <div id="sidebar">
-        <ul id="sidebar-tabs">
-            <li><a href="#tab-info">info</a></li>
-        </ul>
-        <div id="sidebar-content">
-            <div id="tab-info" style="position: relative;"></div>
-        </div>
+        <ul id="sidebar-tabs"></ul>
+        <div id="sidebar-content"></div>
     </div>
 
     <div id="sidebar-separator"></div>
diff --git a/public/red/ui/sidebar.js b/public/red/ui/sidebar.js
index 138a1411e..e905495ff 100644
--- a/public/red/ui/sidebar.js
+++ b/public/red/ui/sidebar.js
@@ -15,7 +15,30 @@
  **/
 RED.sidebar = function() {
 
-    $('#sidebar').tabs();
+    //$('#sidebar').tabs();
+    var sidebar_tabs = RED.tabs.create({
+        id:"sidebar-tabs",
+        onchange:function(id) {
+            $("#sidebar-content").children().hide();
+            $("#"+id).show();
+        }
+    });
+    function addTab(title,content) {
+        $("#sidebar-content").append(content);
+        $(content).hide();
+        sidebar_tabs.addTab({id:"tab-"+title,label:title});
+        //content.style.position = "absolute";
+        //$('#sidebar').tabs("refresh");
+    }
+    
+    var content = document.createElement("div");
+    content.id = "tab-info";
+    content.style.paddingTop = "4px";
+    content.style.paddingLeft = "4px";
+    content.style.paddingRight = "4px";
+
+    addTab("info",content);
+    sidebar_tabs.activateTab("tab-info");
     
     $('#btn-sidebar').click(function() {toggleSidebar();});
     RED.keyboard.add(/* SPACE */ 32,{ctrl:true},function(){toggleSidebar();d3.event.preventDefault();});
@@ -50,6 +73,7 @@ RED.sidebar = function() {
                     sidebarSeparator.closing = false;
                     $("#sidebar").removeClass("closing");
                 }
+                sidebar_tabs.resize();
                 RED.view.resize();
                     
             },
@@ -64,9 +88,9 @@ RED.sidebar = function() {
     });
     
     function toggleSidebar() {
-        if ($('#sidebar').tabs( "option", "active" ) === false) {
-            $('#sidebar').tabs( "option", "active",0);
-        }
+        //if ($('#sidebar').tabs( "option", "active" ) === false) {
+        //    $('#sidebar').tabs( "option", "active",0);
+        //}
         var btnSidebar = $("#btn-sidebar");
         btnSidebar.toggleClass("active");
         
@@ -78,15 +102,6 @@ RED.sidebar = function() {
     }
     toggleSidebar();
     
-    function addTab(title,content) {
-        var tab = document.createElement("li");
-        tab.innerHTML = '<a href="#tab-'+title+'">'+title+'</a>';
-        $("#sidebar-tabs").append(tab);
-        $("#sidebar-content").append(content);
-
-        $('#sidebar').tabs("refresh");
-
-    }
     
     return {
         addTab: addTab
diff --git a/public/style.css b/public/style.css
index 3cc751187..17dac13c7 100644
--- a/public/style.css
+++ b/public/style.css
@@ -43,7 +43,6 @@ a.brand img {
 #workspace {
    margin-left: 160px;
    overflow: hidden;
-   background: #e3e3e3;
 }
 
 #chart {
@@ -154,6 +153,7 @@ a.brand img {
 
 #sidebar {
     background: #fff;
+    box-sizing: border-box;
 }
 #sidebar.closing {
     background: #eee;
@@ -239,9 +239,10 @@ a.brand img {
    border-radius: 3px;
 }
 #sidebar-content {
+    font-size: 1.2em;
     overflow-y: auto;
     position: absolute;
-    top: 50px; left: 5px; right: 0; bottom: 1px;
+    top: 30px; left: 0px; right: 0; bottom: 1px;
 }
 
 .node_label_italic {
@@ -575,9 +576,8 @@ ul.red-ui-tabs {
     margin: 0;
     display: block;
     height: 24px;
-    width: 100%;
     border-bottom: 1px solid #999;
-
+    background: #e3e3e3;
 }
 
 ul.red-ui-tabs li {