diff --git a/webconsole/src/main/resources/res/ui/configurationrender.css b/webconsole/src/main/resources/res/ui/configurationrender.css
new file mode 100644
index 0000000..9bcba5a
--- /dev/null
+++ b/webconsole/src/main/resources/res/ui/configurationrender.css
@@ -0,0 +1,70 @@
+/* tabbed view */
+
+#divcfgprttabs {
+}
+
+#divcfgprttabs ul { 
+    list-style: none;
+}
+
+#divcfgprttabs ul li {
+    display: inline; 
+    background: #fff;
+    height: 21px;
+    margin: 0 2px 0 0 ;
+    border: 1px solid #999;
+    float: left;
+    padding: 1px 1px 0 1px
+}
+
+#divcfgprttabs ul li.tabactive {
+    border-bottom-color: white;
+}
+
+#divcfgprttabs ul li a {
+    color: #6181A9;
+    background-color: white;
+    display: block;
+    float: left;
+    height: 100%;
+    line-height: 2;
+    padding: 0 10px 0 10px;
+    cursor: pointer;
+}
+
+#divcfgprttabs ul li a.tabactive {
+}
+
+#divcfgprttabs ul li a:hover {
+    color: white;
+    background-color: #6181A9;
+}
+
+.menu {
+    background: none;
+    height: 23px;
+    margin-bottom: 0;
+    padding-left: 0;
+}
+.area {
+    background: #fff;
+    border: 1px solid #999;
+    padding: 1px;
+}
+
+/* Contents container of the tabs */
+.tabcont {
+    background: #fff;
+    border: 1px solid #999;
+    border-right: none;
+    padding: 1px;
+}
+
+/* The actual content of the tabs */
+.space {
+    padding: 10px;
+    
+    /* don't let this area make the display wider */
+    width: 100px;
+    overflow: visible;
+}
diff --git a/webconsole/src/main/resources/res/ui/tw-1.1.js b/webconsole/src/main/resources/res/ui/tw-1.1.js
new file mode 100644
index 0000000..7a313ab
--- /dev/null
+++ b/webconsole/src/main/resources/res/ui/tw-1.1.js
@@ -0,0 +1,130 @@
+// JavaScript Document
+// Tab World From BenchSketch.com
+// Benchsketch.com/bquery/tab.html for documentation
+// You can use it FREE!!! Yay.
+// Let me know how it works, or send suggestions, comments, requests to benchsketch@gmail.com
+// Thanks
+	
+(function($){
+  $.fn.extend({
+			  
+   // tabworld function
+   tabworld: function(options){
+	 
+     // Get the user extensions and defaults
+      var opts = $.extend({}, $.fn.tabworld.defaults, options);
+	 
+	 // Content location
+	 	if(opts.contloc=="none"){
+			contloc=$(this).parent();
+		}else{
+			contloc=opts.contloc;
+		}
+	 // Content location
+	 	if(opts.tabloc=="none"){
+			tabloc=$(this).parent();
+		}else{
+			tabloc=opts.tabloc;
+		}
+	 
+	 // better define some stuff for safety
+	  var newli="",newdiv="";
+	 
+	 // Start Building Tabs
+	  return this.each(function(i){
+
+		
+		//start developing basis
+		now=$(this);	
+		nowid=now.attr("id");
+		now.addClass(opts.color);
+		
+	// tab maker function	
+	  // $("#"+nowid+" li").each(function(i){ // lets hide that for now
+		$("#"+nowid+" > li").each(function(i){
+		
+		tabli = $(this);
+		// taba = $('#'+nowid+" > li q");
+		taba = tabli.children("q");
+		$(this).addClass("removeme");
+		tabcont = taba.html();
+		$(".removeme q").remove();
+		licont = tabli.html();
+		$(this).remove();
+		
+		newli += "<li rel='"+nowid+"-"+i+"'><a>"+licont+"</a></li>";
+		newdiv += "<div id='"+nowid+"-"+i+"'>"+tabcont+"</div>";
+
+	  });
+
+	// Something weird to gain the location
+	 now.remove();
+	 $(tabloc).append("<ul id='"+nowid+"-tabworld' class='"+opts.color+"'>"+newli+"</ul>");
+	// Fix the ul
+	// $("#"+nowid).append(newli);
+	// Find the Parent then append the divs
+	 // var parent = $("#"+nowid).parent();
+	 newdiv = "<div id='"+nowid+"content' class='tabcont'><div class='"+opts.area+"'>"+newdiv+"</div></div>";
+	 newdiv = newdiv.replace(/\/>/,">");
+	 $(contloc).append(newdiv);	
+	
+	
+	// Find the default
+	 ndef = nowid+"-"+opts.dopen;
+	 ncon = nowid+"content ."+opts.area+" > div";
+	 $('#'+ncon).hide();
+	 $('#'+ndef).show();
+	 //$('#'+ndef+" > div").show();
+	 
+	 deftab = $('li[rel='+ndef+"]");
+	 deftab.addClass(opts.tabactive);
+	 deftab.children("a").addClass(opts.tabactive);
+	// Seperate function to start the tabbing
+	$("#"+nowid+"-tabworld >li").click(function(){
+		here=$(this);
+		nbound=here.attr("rel");
+		
+		// Make the active class / remove it from others
+		$("#"+nowid+"-tabworld > li").removeClass(opts.tabactive);
+		$("#"+nowid+"-tabworld > li a").removeClass(opts.tabactive);
+		here.addClass(opts.tabactive);
+		$("."+opts.tabactive+">a").addClass(opts.tabactive);
+		
+			// The real action! Also detirmine transition
+			 if(opts.transition=="slide"){
+				 $('#'+ncon+':visible').slideUp(opts.speed, function(){	
+					$('#'+nbound).find("div").show();
+					$('#'+nbound).slideDown(opts.speed);
+				 });
+			 }else if (opts.transition=="fade"){
+				 $('#'+ncon+':visible').fadeOut(opts.speed, function(){	
+					$('#'+nbound).find("div").show();
+					$('#'+nbound).fadeIn(opts.speed);
+				 });
+			 }else{
+				$('#'+ncon+':visible').hide(opts.speed, function(){	
+					$('#'+nbound).find("div").show();
+					$('#'+nbound).show(opts.speed);
+				 }); 
+			 }
+	 
+	});
+	
+	  });// end return each (i) 
+   }// end tabworld		
+  })// end $.fn.extend
+  
+// Defaults
+$.fn.tabworld.defaults = {
+ mislpace:'none',
+ speed:'fast',
+ color:'menu',
+ area:'space',
+ tabloc:'none',
+ contloc:'none',
+ dopen:0,
+ transition:'fade',
+ tabactive:'tabactive'
+}; // end defaults
+  
+})(jQuery);// end function($)
\ No newline at end of file