diff --git a/module/dev/css/api.css b/module/dev/css/api.css
index 5af0574593..e69de29bb2 100644
--- a/module/dev/css/api.css
+++ b/module/dev/css/api.css
@@ -1 +0,0 @@
-#api { margin-bottom: 10px;}
diff --git a/module/dev/css/common.css b/module/dev/css/common.css
index b839b0d75e..5715859ac8 100644
--- a/module/dev/css/common.css
+++ b/module/dev/css/common.css
@@ -1,2 +1,2 @@
-.side .modulegroup {font-weight:bold; padding-top:8px; border-top:1px solid #ddd;}
-.side .active {font-weight:bold;}
+#sidebar .modulegroup {font-weight:bold; padding-top:8px; border-top:1px solid #ddd;}
+#sidebar .active {background-color: #e9f2fb; color: #006af1;}
diff --git a/module/dev/view/api.html.php b/module/dev/view/api.html.php
index 942d1f72b7..32a5c6bb9c 100644
--- a/module/dev/view/api.html.php
+++ b/module/dev/view/api.html.php
@@ -1,23 +1,26 @@
 <?php include 'header.html.php';?>
-<div class='side'>
-  <div class="panel panel-sm with-list">
-    <div class='panel-heading'><i class='icon-list'></i> <strong><?php echo $lang->dev->moduleList?></strong></div>
-    <?php foreach($lang->dev->groupList as $group => $groupName):?>
-    <div class='modulegroup'><?php echo $groupName?></div>
-    <?php foreach($modules[$group] as $module):?>
-    <?php
-    $active     = ($module == $selectedModule) ? 'active' : '';
-    $moduleName = zget($lang->dev->tableList, $module, $module);
-    ?>
-    <?php echo html::a(inlink('api', "module=$module"), $moduleName, '', "class='$active'");?>
-    <?php endforeach;?>
-    <?php endforeach;?>
+<div id='mainContent' class='main-row'>
+  <div class='side-col' id='sidebar'>
+    <div class='cell'>
+      <div class="panel panel-sm with-list">
+        <div class='panel-heading'><i class='icon-list'></i> <strong><?php echo $lang->dev->moduleList?></strong></div>
+        <?php foreach($lang->dev->groupList as $group => $groupName):?>
+        <div class='modulegroup'><?php echo $groupName?></div>
+        <?php foreach($modules[$group] as $module):?>
+        <?php
+        $active     = ($module == $selectedModule) ? 'active' : '';
+        $moduleName = zget($lang->dev->tableList, $module, $module);
+        ?>
+        <?php echo html::a(inlink('api', "module=$module"), $moduleName, '', "class='$active'");?>
+        <?php endforeach;?>
+        <?php endforeach;?>
+      </div>
+    </div>
   </div>
-</div>
-<div class='main'>
-  <?php if($selectedModule):?>
+  <div class='main-col main-content'>
+    <?php if($selectedModule):?>
     <?php foreach($apis as $api):?>
-    <table class='table table-condensed table-striped table-bordered tablesorter table-fixed active-disabled' id="api">
+    <div class='detail'>
       <?php
       $params = array();
       if(isset($api['param']))
@@ -26,33 +29,36 @@
       }
       $params = implode('&', $params);
       ?>
-      <tr>
-        <th colspan="3">
+      <div class='detail-title'>
         <?php
         echo $api['post'] ? 'GET/POST' : 'GET';
         echo '&nbsp;&nbsp;' . $this->createLink($selectedModule, $api['name'], $params, 'json');
         ?>
-        </th>
-      </tr>
-      <tr><td colspan="3"><?php echo $api['desc'];?></td></tr>
-      <tr>
-        <td><?php echo $lang->dev->params?></td>
-        <td><?php echo $lang->dev->type?></td>
-        <td><?php echo $lang->dev->desc?></td>
-      </tr>
-      <?php if(isset($api['param'])):?>
-      <?php foreach($api['param'] as $param):?>
-      <tr>
-        <td><?php echo $param['var']?></td>
-        <td><?php echo $param['type']?></td>
-        <td><?php echo $param['desc']?></td>
-      </tr>
-      <?php endforeach;?>
-      <?php else:?>
-      <tr><td colspan="3"><?php echo $lang->dev->noParams?></td></tr>
-      <?php endif;?>
-    </table>
+      </div>
+      <div class='detail-content'>
+        <?php echo $api['desc'];?>
+        <table class='table table-fixed table-bordered params'>
+          <tr>
+            <td><?php echo $lang->dev->params?></td>
+            <td><?php echo $lang->dev->type?></td>
+            <td><?php echo $lang->dev->desc?></td>
+          </tr>
+          <?php if(isset($api['param'])):?>
+          <?php foreach($api['param'] as $param):?>
+          <tr>
+            <td><?php echo $param['var']?></td>
+            <td><?php echo $param['type']?></td>
+            <td><?php echo $param['desc']?></td>
+          </tr>
+          <?php endforeach;?>
+          <?php else:?>
+          <tr><td colspan="3"><?php echo $lang->dev->noParams?></td></tr>
+          <?php endif;?>
+        </table>
+      </div>
+    </div>
     <?php endforeach;?>
-  <?php endif;?>
+    <?php endif;?>
+  </div>
 </div>
 <?php include '../../common/view/footer.html.php';?>
diff --git a/module/dev/view/db.html.php b/module/dev/view/db.html.php
index 500b1ea07b..7e97cd5db1 100644
--- a/module/dev/view/db.html.php
+++ b/module/dev/view/db.html.php
@@ -1,49 +1,55 @@
 <?php include 'header.html.php';?>
-<div class='side'>
-  <div class="panel panel-sm with-list">
-    <div class='panel-heading'><i class='icon-list'></i> <strong><?php echo $lang->dev->dbList?></strong></div>
-    <?php foreach($lang->dev->groupList as $group => $groupName):?>
-    <div class='modulegroup'><?php echo $groupName?></div>
-    <?php foreach($tables[$group] as $subTable => $table):?>
-    <?php
-    $active    = ($table == $selectedTable) ? 'active' : '';
-    $tableName = zget($lang->dev->tableList, $subTable, $table);
-    ?>
-    <?php echo html::a(inlink('db', "table=$table"), $tableName, '', "class='$active'");?>
-    <?php endforeach;?>
-    <?php endforeach;?>
+<div id='mainContent' class='main-row'>
+  <div class='side-col' id='sidebar'>
+    <div class='cell'>
+      <div class="panel panel-sm with-list">
+        <div class='panel-heading'><i class='icon-list'></i> <strong><?php echo $lang->dev->dbList?></strong></div>
+        <?php foreach($lang->dev->groupList as $group => $groupName):?>
+        <div class='modulegroup'><?php echo $groupName?></div>
+        <?php foreach($tables[$group] as $subTable => $table):?>
+        <?php
+        $active    = ($table == $selectedTable) ? 'active' : '';
+        $tableName = zget($lang->dev->tableList, $subTable, $table);
+        ?>
+        <?php echo html::a(inlink('db', "table=$table"), $tableName, '', "class='$active'");?>
+        <?php endforeach;?>
+        <?php endforeach;?>
+      </div>
+    </div>
+  </div>
+  <div class='main-col main-content'>
+    <?php if($selectedTable):?>
+    <div class='detail'>
+      <div class='detail-title'><?php echo $selectedTable?></div>
+      <div class='detail-content'>
+        <table class="table table-condensed table-bordered table-fixed">
+          <thead>
+            <tr>
+              <th class='w-id'><?php echo $lang->dev->fields['id']?></th>
+              <th><?php echo $lang->dev->fields['name']?></th>
+              <th><?php echo $lang->dev->fields['desc']?></th>
+              <th><?php echo $lang->dev->fields['type']?></th>
+              <th><?php echo $lang->dev->fields['length']?></th>
+              <th><?php echo $lang->dev->fields['null']?></th>
+            </tr>
+          </thead>
+          <tbody>
+            <?php $i = 1;?>
+            <?php foreach($fields as $key => $field):?>
+            <tr>
+              <td><?php echo $i;?></td>
+              <td><?php echo $key;?></td>
+              <td><?php echo $field['name'];?></td>
+              <td><?php echo $field['type'];?></td>
+              <td><?php echo isset($field['options']['max']) ? $field['options']['max'] : '';?></td>
+              <td><?php echo $field['null'];?></td>
+            </tr>
+            <?php $i++; endforeach?>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <?php endif;?>
   </div>
 </div>
-<div class='main'>
-  <?php if($selectedTable):?>
-  <table class="table table-condensed table-striped table-bordered tablesorter table-fixed active-disabled">
-    <thead>
-      <tr>
-        <th class='text-left' colspan='6'><?php echo $selectedTable?></th>
-      </tr>
-      <tr>
-        <th class='w-id'><?php echo $lang->dev->fields['id']?></th>
-        <th><?php echo $lang->dev->fields['name']?></th>
-        <th><?php echo $lang->dev->fields['desc']?></th>
-        <th><?php echo $lang->dev->fields['type']?></th>
-        <th><?php echo $lang->dev->fields['length']?></th>
-        <th><?php echo $lang->dev->fields['null']?></th>
-      </tr>
-    </thead>
-    <tbody>
-      <?php $i = 1;?>
-      <?php foreach($fields as $key => $field):?>
-      <tr>
-        <td><?php echo $i;?></td>
-        <td><?php echo $key;?></td>
-        <td><?php echo $field['name'];?></td>
-        <td><?php echo $field['type'];?></td>
-        <td><?php echo isset($field['options']['max']) ? $field['options']['max'] : '';?></td>
-        <td><?php echo $field['null'];?></td>
-      </tr>
-      <?php $i++; endforeach?>
-    </tbody>
-  </table>
-  <?php endif;?>
-</div>
 <?php include '../../common/view/footer.html.php';?>
diff --git a/module/dev/view/header.html.php b/module/dev/view/header.html.php
index caa86c9018..10ab1ccf05 100644
--- a/module/dev/view/header.html.php
+++ b/module/dev/view/header.html.php
@@ -1,11 +1,11 @@
 <?php include '../../common/view/header.html.php';?>
-<div id='featurebar'>
-  <ul class='nav'>
-  <?php 
-  echo '<li id="api">'; common::printLink('dev', 'api', "", $lang->dev->api); echo '</li>';
-  echo '<li id="db">'; common::printLink('dev', 'db', "",   $lang->dev->db); echo '</li>';
-  echo "<li id='editor'>"; common::printLink('editor', 'index', 'type=editor', $lang->dev->editor); echo '</li>';
-  ?>
-  </ul>
+<div id='mainMenu' class='clearfix'>
+  <div class='btn-toolbar pull-left'>
+    <?php 
+    common::printLink('dev', 'api', "", "<span class='text'>{$lang->dev->api}</span>", '', "id='api' class='btn btn-link'");
+    common::printLink('dev', 'db', "",  "<span class='text'>{$lang->dev->db}</span>",  '', "id='db' class='btn btn-link'");
+    common::printLink('editor', 'index', 'type=editor', "<span class='text'>{$lang->dev->editor}</span>", '', "id='editor' class='btn btn-link'");
+    ?>
+  </div>
 </div>
-<script>$('#<?php echo $tab;?>').addClass('active')</script>
+<script>$('#mainMenu #<?php echo $tab;?>').addClass('btn-active-text')</script>
diff --git a/module/editor/css/edit.css b/module/editor/css/edit.css
index abc3e8d164..b72138a1a8 100644
--- a/module/editor/css/edit.css
+++ b/module/editor/css/edit.css
@@ -1 +1,2 @@
-.form-condensed textarea.form-control {min-height: 500px; height: auto;}
+body{padding-bottom:0px;background-color:#fff;}
+.main-content textarea.form-control {min-height: 450px; height: auto;}
diff --git a/module/editor/css/extend.css b/module/editor/css/extend.css
index b1ba5a96f8..e019a90efa 100644
--- a/module/editor/css/extend.css
+++ b/module/editor/css/extend.css
@@ -1,3 +1,5 @@
+body{padding-bottom:0px;background-color:#fff;}
 .expandable > ul {display: none!important}
 .collapsable > ul {display: block!important}
 .tree li:before {margin-right: 4px;}
+.tree li>a{display:inline;}
diff --git a/module/editor/css/index.css b/module/editor/css/index.css
index 6456b31bb7..01cd89494e 100644
--- a/module/editor/css/index.css
+++ b/module/editor/css/index.css
@@ -3,3 +3,4 @@ table tr > td:first-child {padding-left: 0;}
 table tr > td:last-child {padding-right: 0;}
 .modulegroup {font-weight:bold; padding-top:8px; border-top:1px solid #ddd;}
 td.w-200px a:hover {font-weight:bold;}
+.w-350px{width:350px;}
diff --git a/module/editor/js/edit.js b/module/editor/js/edit.js
index f13ed08ae6..6e853d71c2 100644
--- a/module/editor/js/edit.js
+++ b/module/editor/js/edit.js
@@ -1,4 +1 @@
-$(function()
-{
-
-})
+$(function(){ })
diff --git a/module/editor/js/index.js b/module/editor/js/index.js
index 96c6236e7f..c2b1ddc184 100644
--- a/module/editor/js/index.js
+++ b/module/editor/js/index.js
@@ -1,8 +1,12 @@
 $(function()
 {
-   var showHeight = $('.outer').height() - $('#featurebar').height() - 40;
+   var showHeight = $('#main').height() - $('#mainMenu').height() - 40;
    $('#editWin').height(showHeight);
    $('#extendWin').height(showHeight);
 
-   $('.panel a.list-group-item').click(function(){$('.panel a.list-group-item.active').removeClass('active'); $(this).addClass('active')});
+   $('.side-col a').click(function()
+   {
+       $('.side-col a.active').removeClass('active');
+       $(this).addClass('active');
+   });
 });
diff --git a/module/editor/view/edit.html.php b/module/editor/view/edit.html.php
index 1f41024665..979d6ebc44 100644
--- a/module/editor/view/edit.html.php
+++ b/module/editor/view/edit.html.php
@@ -11,17 +11,17 @@
  */
 ?>
 <?php include '../../common/view/header.lite.html.php';?>
-<form class='form-condensed' method='post' target='hiddenwin' action='<?php echo inlink('save', "filePath=$safeFilePath&action=$action")?>'>
-<div class='panel panel-sm'>
-  <div class='panel-heading'><i class='icon-edit'></i> 
-  <?php if($filePath):?>        
-  <strong>
-    <?php echo $lang->editor->filePath;?>
-  </strong> 
-  <code><?php echo $filePath?></code>
-  <?php endif?>  
+<div class='main-header'>
+  <div class='heading'>
+    <i class='icon-edit'></i> 
+    <?php if($filePath):?>        
+    <strong><?php echo $lang->editor->filePath;?></strong> 
+    <code><?php echo $filePath?></code>
+    <?php endif?>  
   </div>
-  <div class='panel-body'>
+</div>
+<form method='post' target='hiddenwin' action='<?php echo inlink('save', "filePath=$safeFilePath&action=$action")?>'>
+  <div class='main-content'>
     <table class='table table-form'>
       <?php if(!empty($showContent)):?>
       <tr>
@@ -36,7 +36,7 @@
       </tr>
       <tr>
         <td>
-        <?php if($action and $action != 'edit' and $action != 'newPage' and $action != 'override' and $action != 'extendControl'):?>
+          <?php if($action and $action != 'edit' and $action != 'newPage' and $action != 'override' and $action != 'extendControl'):?>
           <div class='form-group'>
             <div class='input-group'>
               <span class='input-group-addon'><?php echo $lang->editor->fileName;?></span>
@@ -63,15 +63,17 @@
               </span>
             </div>
           </div>
-        <?php endif;?>
-        <?php if($action and $action != 'edit' and $action != 'newPage'):?>
-          <span class='strong'><input type='checkbox' name='override' id='override' /> <?php echo $lang->editor->isOverride?></span>
-        <?php endif;?>
+          <?php endif;?>
+          <?php if($action and $action != 'edit' and $action != 'newPage'):?>
+          <div class='checkbox-primary'>
+            <input type='checkbox' name='override' id='override' />
+            <label for='override'><?php echo $lang->editor->isOverride?></span>
+          </div>
+          <?php endif;?>
         </td>
       </tr>
       <tr><td align='center'><?php echo html::submitButton()?></td></tr>
     </table>
   </div>
-</div>
 </form>
 <?php include '../../common/view/footer.lite.html.php';?>
diff --git a/module/editor/view/extend.html.php b/module/editor/view/extend.html.php
index 9120c40b1b..19d11142e1 100644
--- a/module/editor/view/extend.html.php
+++ b/module/editor/view/extend.html.php
@@ -11,11 +11,11 @@
  */
 ?>
 <?php include '../../common/view/header.lite.html.php';?>
-<div class='panel panel-sm'>
-  <div class='panel-heading'><i class='icon-list-ul'></i> <strong><?php echo isset($lang->editor->modules[$module])? $lang->editor->modules[$module] : $module;?></strong></div>
-  <div class='panel-body'>
+<div class='main-header'>
+  <div class='heading'><i class='icon-list-ul'></i> <strong><?php echo isset($lang->editor->modules[$module])? $lang->editor->modules[$module] : $module;?></strong></div>
+</div>
+<div class='main-content'>
   <?php echo $tree?>
-  </div>
 </div>
 <script>
 $(function()
diff --git a/module/editor/view/index.html.php b/module/editor/view/index.html.php
index 3364dc8075..5d5cfaad0c 100644
--- a/module/editor/view/index.html.php
+++ b/module/editor/view/index.html.php
@@ -11,23 +11,28 @@
  */
 ?>
 <?php include '../../dev/view/header.html.php';?>
-  <table class='w-p100'>
-    <tr>
-      <td class='w-200px'>
-        <div class='panel panel-sm with-list'>
-          <div class='panel-heading'><i class='icon-list'></i> <strong><?php echo $lang->editor->moduleList?></strong></div>
-          <?php foreach($lang->dev->groupList as $group => $groupName):?>
-          <div class='modulegroup'><?php echo $groupName?></div>
-          <?php foreach($modules[$group] as $module):?>
-          <?php $moduleName = zget($lang->dev->tableList, $module, $module);?>
-          <?php echo html::a(inlink('extend', "moduleDir=$module"), $moduleName, 'extendWin');?>
-          <?php endforeach;?>
-          <?php endforeach;?>
-        </div>
-      </td>
-      <td class='w-300px'><iframe frameborder='0' name='extendWin' id='extendWin' width='100%'></iframe></td>
-      <td><iframe frameborder='0' name='editWin' id='editWin' width='100%'></iframe></td>
-    </tr>
-  </table> 
-
+<div id='mainContent' class='main-row'>
+  <div class='side-col' id='sidebar'>
+    <div class='cell'>
+      <div class='panel panel-sm with-list'>
+        <div class='panel-heading'><i class='icon-list'></i> <strong><?php echo $lang->editor->moduleList?></strong></div>
+        <?php foreach($lang->dev->groupList as $group => $groupName):?>
+        <div class='modulegroup'><?php echo $groupName?></div>
+        <?php foreach($modules[$group] as $module):?>
+        <?php $moduleName = zget($lang->dev->tableList, $module, $module);?>
+        <?php echo html::a(inlink('extend', "moduleDir=$module"), $moduleName, 'extendWin');?>
+        <?php endforeach;?>
+        <?php endforeach;?>
+      </div>
+    </div>
+  </div>
+  <div class='side-col w-350px'>
+    <div class='cell'>
+      <iframe frameborder='0' name='extendWin' id='extendWin' width='100%'></iframe>
+    </div>
+  </div>
+  <div class='main-col main-content'>
+    <iframe frameborder='0' name='editWin' id='editWin' width='100%'></iframe>
+  </div>
+</div> 
 <?php include '../../common/view/footer.html.php';?>
diff --git a/module/editor/view/newpage.html.php b/module/editor/view/newpage.html.php
index f44e3222dc..d3abfe84f0 100644
--- a/module/editor/view/newpage.html.php
+++ b/module/editor/view/newpage.html.php
@@ -11,10 +11,12 @@
  */
 ?>
 <?php include '../../common/view/header.lite.html.php';?>
-<form class='form-condensed' method='post' target='hiddenwin'>
-<div class='panel panel-sm'>
-  <div class='panel-heading'><i class='icon-plus'></i> <strong><?php echo $lang->editor->newPage?></strong></div>
-  <div class='panel-body'>
+<style>body{padding-bottom:0px;background-color:#fff;}</style>
+<div class='main-header'>
+  <div class='heading'><i class='icon-plus'></i> <strong><?php echo $lang->editor->newPage?></strong></div>
+</div>
+<form method='post' target='hiddenwin'>
+  <div class='main-content'>
     <table class='table table-form'>
       <tr>
         <th class='w-80px'><?php echo $lang->editor->filePath?></th>
@@ -23,17 +25,13 @@
       <tr>
         <th><?php echo $lang->editor->pageName?></th>
         <td>
-        <?php
-        echo html::input('fileName', '', "class='form-control' autocomplete='off'");
-        echo "<div class='help-block'>" . $lang->editor->examplePHP . "</div>";
-        ?>
+          <?php
+          echo html::input('fileName', '', "class='form-control' autocomplete='off' placeholder='{$lang->editor->examplePHP}'");
+          ?>
         </td>
       </tr>
       <tr><td colspan='2' align='center'><?php echo html::submitButton()?></td></tr>
     </table>
   </div>
-</div>
-
-
 </form>
 <?php include '../../common/view/footer.lite.html.php';?>