diff --git a/module/bug/view/browse.html.php b/module/bug/view/browse.html.php
index 6be9a305d8..f04ca0d0f6 100644
--- a/module/bug/view/browse.html.php
+++ b/module/bug/view/browse.html.php
@@ -162,12 +162,12 @@ js::set('customed', $customed);
             <td class='a-right'>
               <?php
               $params = "bugID=$bug->id";
-              common::printIcon('bug', 'confirmBug', $params, $bug, 'list', '', '', 'iframe', true);
-              common::printIcon('bug', 'assignTo',   $params, '',   'list', '', '', 'iframe', true);
-              common::printIcon('bug', 'resolve',    $params, $bug, 'list', '', '', 'iframe', true);
-              common::printIcon('bug', 'close',      $params, $bug, 'list', '', '', 'iframe', true);
-              common::printIcon('bug', 'edit',       $params, $bug, 'list');
-              common::printIcon('bug', 'create',     "product=$bug->product&extra=bugID=$bug->id", $bug, 'list', 'copy');
+              common::printIcon('bug', 'confirmBug', $params, $bug, 'list', 'icon-search icon-large', '', 'iframe', true);
+              common::printIcon('bug', 'assignTo',   $params, '', 'list', 'icon-hand-right icon-large', '', 'iframe', true);
+              common::printIcon('bug', 'resolve',    $params, $bug, 'list', 'icon-ok-circle icon-large', '', 'iframe', true);
+              common::printIcon('bug', 'close',      $params, $bug, 'list', 'icon-off icon-large', '', 'iframe', true);
+              common::printIcon('bug', 'edit',       $params, '', 'list', 'icon-edit icon-large');
+              common::printIcon('bug', 'create',     "product=$bug->product&extra=bugID=$bug->id", $bug, 'list', 'icon-copy icon-large');
               ?>
             </td>
             <?php endif;?>
diff --git a/module/common/control.php b/module/common/control.php
index 3445ff7412..74368648b9 100644
--- a/module/common/control.php
+++ b/module/common/control.php
@@ -321,7 +321,7 @@ class common extends control
             }
             else
             {
-                echo html::a($link, "<i class='$class'></i><i class='icon-bolt'></i>", $target, "class='link-icon' title='$title'", false);
+                echo html::a($link, "<i class='$class'></i>", $target, "class='link-icon' title='$title'", false);
             }
         }
         else
diff --git a/module/common/view/header.lite.html.php b/module/common/view/header.lite.html.php
index a3f550c5c4..78e3202114 100755
--- a/module/common/view/header.lite.html.php
+++ b/module/common/view/header.lite.html.php
@@ -25,6 +25,8 @@ $clientTheme  = $this->app->getClientTheme();
       css::import($themeRoot . 'fontawesome/ie7.min.css',   $config->version);
       echo '<![endif]-->';
 
+      css::import($defaultTheme . 'button.css', $config->version);
+
       css::import($defaultTheme . 'yui.css',   $config->version);
       css::import($defaultTheme . 'style.css', $config->version);
       css::import($langTheme, $config->version);
diff --git a/module/my/view/bug.html.php b/module/my/view/bug.html.php
index cc65a51666..c654766175 100644
--- a/module/my/view/bug.html.php
+++ b/module/my/view/bug.html.php
@@ -23,7 +23,7 @@
   </div>
 </div>
 <form method='post' action='<?php echo $this->createLink('bug', 'batchEdit', "productID=0");?>'>
-  <table class='table-1 fixed tablesorter colored' id='bugList'>
+  <table class='table-1 data-table fixed tablesorter colored' id='bugList'>
     <?php $vars = "type=$type&orderBy=%s&recTotal=$recTotal&recPerPage=$recPerPage&pageID=$pageID"; ?>
     <thead>
     <tr class='colhead'>
@@ -56,11 +56,11 @@
       <td class='a-right'>
         <?php
         $params = "bugID=$bug->id";
-        common::printIcon('bug', 'confirmBug', $params, $bug, 'list', '', '', 'iframe', true);
-        common::printIcon('bug', 'assignTo',   $params, '', 'list', '', '', 'iframe', true);
-        common::printIcon('bug', 'resolve',    $params, $bug, 'list', '', '', 'iframe', true);
-        common::printIcon('bug', 'close',      $params, $bug, 'list', '', '', 'iframe', true);
-        common::printIcon('bug', 'edit',       $params, '', 'list');
+        common::printIcon('bug', 'confirmBug', $params, $bug, 'list', 'icon-search icon-large', '', 'iframe', true);
+        common::printIcon('bug', 'assignTo',   $params, '', 'list', 'icon-hand-right icon-large', '', 'iframe', true);
+        common::printIcon('bug', 'resolve',    $params, $bug, 'list', 'icon-ok-circle icon-large', '', 'iframe', true);
+        common::printIcon('bug', 'close',      $params, $bug, 'list', 'icon-off icon-large', '', 'iframe', true);
+        common::printIcon('bug', 'edit',       $params, '', 'list', 'icon-edit icon-large');
         ?>
       </td>
     </tr>
diff --git a/module/my/view/task.html.php b/module/my/view/task.html.php
index c208ab29da..7a8fbdef4b 100644
--- a/module/my/view/task.html.php
+++ b/module/my/view/task.html.php
@@ -25,7 +25,7 @@
   </div>
 </div>
 <form method='post' id='myTaskForm'>
-  <table class='table-1 tablesorter fixed colored' id='tasktable'>
+  <table class='table-1 data-table tablesorter fixed colored' id='tasktable'>
     <?php $vars = "type=$type&orderBy=%s&recTotal=$recTotal&recPerPage=$recPerPage&pageID=$pageID"; ?>
     <thead>
     <tr class='colhead'>
@@ -62,12 +62,12 @@
       <td><?php echo $users[$task->openedBy];?></td>
       <td class='a-right'>
         <?php 
-        common::printIcon('task', 'assignTo', "projectID=$task->project&taskID=$task->id", $task, 'list', '', '', 'iframe', true);
-        common::printIcon('task', 'start',    "taskID=$task->id", $task, 'list', '', '', 'iframe', true);
-        common::printIcon('task', 'recordEstimate', "taskID=$task->id", $task, 'list', '', '', 'iframe', true);
-        common::printIcon('task', 'finish',   "taskID=$task->id", $task, 'list', '', '', 'iframe', true);
-        common::printIcon('task', 'close',    "taskID=$task->id", $task, 'list', '', '', 'iframe', true);
-        common::printIcon('task', 'edit', "taskID=$task->id", '', 'list');
+        common::printIcon('task', 'assignTo', "projectID=$task->project&taskID=$task->id", $task, 'list', 'icon-hand-right icon-large', '', 'iframe', true);
+        common::printIcon('task', 'start',    "taskID=$task->id", $task, 'list', 'icon-play-circle icon-large', '', 'iframe', true);
+        common::printIcon('task', 'recordEstimate', "taskID=$task->id", $task, 'list', 'icon-time icon-large', '', 'iframe', true);
+        common::printIcon('task', 'finish',   "taskID=$task->id", $task, 'list', 'icon-ok-sign icon-large', '', 'iframe', true);
+        common::printIcon('task', 'close',    "taskID=$task->id", $task, 'list', 'icon-off icon-large', '', 'iframe', true);
+        common::printIcon('task', 'edit', "taskID=$task->id", '', 'list', 'icon-edit icon-large');
         ?>
       </td>
     </tr>
diff --git a/module/my/view/todo.html.php b/module/my/view/todo.html.php
index d218a8aa13..a0569e3de5 100644
--- a/module/my/view/todo.html.php
+++ b/module/my/view/todo.html.php
@@ -42,13 +42,13 @@
     </div>
     <div class='f-right'>
       <?php 
-      common::printIcon('todo', 'export', "account=$account&orderBy=id_desc");
-      common::printIcon('todo', 'batchCreate');
-      common::printIcon('todo', 'create', "date=" . str_replace('-', '', $date));
+      common::printIcon('todo', 'export', "account=$account&orderBy=id_desc", '', 'button', 'icon-signout');
+      common::printIcon('todo', 'batchCreate', '', '', 'button', 'icon-plus-sign');
+      common::printIcon('todo', 'create', "date=" . str_replace('-', '', $date), '', 'button', 'icon-plus');
       ?>
     </div>
   </div>
-  <table class='table-1 tablesorter colored' id='todoList'>
+  <table class='data-table tablesorter colored' id='todoList'>
     <?php $vars = "type=$type&account=$account&status=$status&orderBy=%s&recTotal=$recTotal&recPerPage=$recPerPage&pageID=$pageID"; ?>
     <thead>
     <tr class='colhead'>
@@ -81,11 +81,11 @@
       <td class='<?php echo $todo->status;?>'><?php echo $lang->todo->statusList[$todo->status];?></td>
       <td class='a-right'>
         <?php 
-        common::printIcon('todo', 'finish', "id=$todo->id", $todo, 'list', '', 'hiddenwin');
-        common::printIcon('todo', 'edit',   "id=$todo->id", '', 'list', '', '', 'iframe', true);
+        common::printIcon('todo', 'finish', "id=$todo->id", $todo, 'list', 'icon-ok-circle icon-large', 'hiddenwin');
+        common::printIcon('todo', 'edit',   "id=$todo->id", '', 'list', 'icon-edit icon-large', '', 'iframe', true);
 
         $deleteURL = $this->createLink('todo', 'delete', "todoID=$todo->id&confirm=yes");
-        echo html::a("javascript:ajaxDelete(\"$deleteURL\",\"todoList\",confirmDelete)", '&nbsp;', '', "class='icon-green-common-delete' title='{$lang->todo->delete}'");
+        echo html::a("javascript:ajaxDelete(\"$deleteURL\",\"todoList\",confirmDelete)", '<i class="icon-trash icon-large"></i>', '', "class='link-icon' title='{$lang->todo->delete}'");
         ?>
       </td>
     </tr>
diff --git a/www/theme/default/button.css b/www/theme/default/button.css
new file mode 100644
index 0000000000..1f84ddb9bf
--- /dev/null
+++ b/www/theme/default/button.css
@@ -0,0 +1,219 @@
+.button ,a.button{
+    background-color: transparent;
+    background-image: linear-gradient(top, whiteSmoke, #f1f1f1);
+    background-image: -moz-linear-gradient(top, whiteSmoke, #f1f1f1);
+    background-image: -o-linear-gradient(top, whiteSmoke, #f1f1f1);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(whiteSmoke), to(#f1f1f1));
+    background-image: -webkit-linear-gradient(top, whiteSmoke, #f1f1f1);
+    background-image: -ms-linear-gradient(top, whiteSmoke, #f1f1f1);
+    -webkit-transition: border-color .3s;
+    -moz-transition: border-color .3s;
+    -o-transition: border-color .3s;
+    transition: border-color .3s;
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+    border: 1px solid #dcdcdc;
+    margin: 0 10px 0 0;
+    padding: 7px 12px;
+    position: relative;
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+    cursor: pointer;
+    text-shadow: 0 1px 0 #fff;
+    text-decoration: none;
+    line-height: 1.5;
+    font-size: 12px;
+    color: #444;
+
+    transition-delay: 0,0;
+    transition-duration: .5s,.5s;
+    transition-property: color,background-color,opacity;
+}
+/*==================================================*/
+/*  size                             */
+/*==================================================*/
+.button.mini {
+    padding: 7px 12px;
+    line-height: 1;
+}
+.button.large {
+    padding: 7px 20px;
+    line-height: 2;
+    font-size: 14px;
+}
+/*==================================================*/
+/*  $Colors                                         */
+/*==================================================*/
+.button.orange {
+    background-color: #D14836;
+    background-image: -webkit-linear-gradient(top,#DD4B39,#D14836);
+    background-image: -moz-linear-gradient(top,#DD4B39,#D14836);
+    background-image: -ms-linear-gradient(top,#DD4B39,#D14836);
+    background-image: -o-linear-gradient(top,#DD4B39,#D14836);
+    background-image: linear-gradient(top,#DD4B39,#D14836);
+    border-color: transparent;
+    text-shadow: none;
+    color: #fff;
+}
+
+.button.yellow {
+  color:#867343;
+  background-color:#ffe07b;
+  border:1px solid #fddb69;
+  background-image:-webkit-linear-gradient(top,#ffe896,#ffe07b);
+  background-image:-moz-linear-gradient(top,#ffe896,#ffe07b);
+  background-image:linear-gradient(top,#ffe896,#ffe07b);
+    text-shadow: none;
+}
+
+.button.blue {
+    background-color: #4D90FE;
+    background-image: -webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#4787ED));
+    background-image: -webkit-linear-gradient(top,#4D90FE,#4787ED);
+    background-image: -moz-linear-gradient(top,#4D90FE,#4787ED);
+    background-image: -ms-linear-gradient(top,#4D90FE,#4787ED);
+    background-image: -o-linear-gradient(top,#4D90FE,#4787ED);
+    background-image: linear-gradient(top,#4D90FE,#4787ED);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#4787ed');
+    border: 1px solid #3079ED;
+    text-shadow: none;
+    color: #fff;
+}
+/*==================================================*/
+/*  $Colors:hover                                      */
+/*==================================================*/
+.button:hover {
+    border-color: #999;
+    -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05);
+    text-decoration: none;
+}
+.button.orange:hover {
+    background-color: #c53727;
+    background-image: -webkit-linear-gradient(top,#dd4b39,#c53727);
+    background-image: -moz-linear-gradient(top,#dd4b39,#c53727);
+    background-image: -ms-linear-gradient(top,#dd4b39,#c53727);
+    background-image: -o-linear-gradient(top,#dd4b39,#c53727);
+    background-image: linear-gradient(top,#dd4b39,#c53727);
+    border-color: #b0281a;
+}
+.button.yellow:hover {
+  background-color:#ffda73;
+  border:1px solid #deb74f;
+  background-image:-webkit-linear-gradient(top,#ffe485,#ffda73);
+  background-image:-moz-linear-gradient(top,#ffe485,#ffda73);
+  background-image:linear-gradient(top,#ffe485,#ffda73);
+  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
+  -moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
+  box-shadow:0 1px 2px rgba(0,0,0,0.2); 
+}
+
+.button.blue:hover {
+    background-color: #357ae8;
+    background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8);
+    background-image: -moz-linear-gradient(top,#4d90fe,#357ae8);
+    background-image: -ms-linear-gradient(top,#4d90fe,#357ae8);
+    background-image: -o-linear-gradient(top,#4d90fe,#357ae8);
+    background-image: linear-gradient(top,#4d90fe,#357ae8);
+    border-color: #2f5bb7;
+}
+/*==================================================*/
+/*  $Colors:active                                    */
+/*==================================================*/
+.button:active {
+    border-color: #4d90fe;
+    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+}
+
+.button.orange:active {
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
+    background-color: #b0281a;
+    background-image: -webkit-linear-gradient(top,#dd4b39,#b0281a);
+    background-image: -moz-linear-gradient(top,#dd4b39,#b0281a);
+    background-image: -ms-linear-gradient(top,#dd4b39,#b0281a);
+    background-image: -o-linear-gradient(top,#dd4b39,#b0281a);
+    background-image: linear-gradient(top,#dd4b39,#b0281a);
+    border: 1px solid #992A1B;
+}
+.button.yellow:active {
+    -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);
+  -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);
+  box-shadow:inset 0 1px 2px rgba(0,0,0,0.2); 
+}
+
+.button.active {
+    background-color: #e0e0e0;
+    background-image: -webkit-linear-gradient(top,#eee,#e0e0e0);
+    background-image: -moz-linear-gradient(top,#eee,#e0e0e0);
+    background-image: -ms-linear-gradient(top,#eee,#e0e0e0);
+    background-image: -o-linear-gradient(top,#eee,#e0e0e0);
+    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
+    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
+    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
+    border-color: #ccc;
+    color: #333;
+}
+/*==================================================*/
+/*  $Colors:disabled                              */
+/*==================================================*/
+.button.disabled,.button[disabled=disabled] {
+    background: #eeeeee;
+    color: #ccc;
+    border: 1px solid #dfdfdf;
+    text-shadow: 0 1px 0 #fff;
+}
+.button.disabled:hover,.button[disabled=disabled]:hover,
+.button.disabled:active,.button[disabled=disabled]:active {
+    background: #eeeeee;
+    color: #ccc;
+    border: 1px solid #dfdfdf;
+    -webkit-box-shadow:none;
+    -moz-box-shadow:none;
+    box-shadow: none;
+    cursor: text;
+    transition-delay: 0s, 0s;
+    transition-duration: 0.7s, 0.7s;
+    transition-property: color, background-color,box-shadow;
+}
+
+/*==================================================*/
+/*  $button Status                          */
+/*==================================================*/
+.button.status-ok {
+    color: #468847;
+    background-color: #DFF0D8;
+    border-color: #D6E9C6;
+}
+
+/*兼容Font-Awesome*/
+.button[class^="icon-"],
+.button[class*=" icon-"] {
+    font-family: inherit;
+    padding: 5px 12px 6px 12px;
+}
+.button[class^="icon-"]:before,
+.button[class*=" icon-"]:before {
+    font-family: FontAwesome;
+    margin-right: 0.5em;
+    filter: alpha(opacity=80);
+    -moz-opacity:0.8;
+  opacity:0.8;
+    font-size: 14px;
+    transition-delay: 0s, 0s;
+    transition-duration: 0.7s, 0.7s;
+    transition-property: color, background-color,opacity;
+}
+.button[class^="icon-"]:hover:before,
+.button[class*=" icon-"]:hover:before {
+    filter: alpha(opacity=100);
+    -moz-opacity:1;
+  opacity:1;
+    transition-delay: 0s, 0s;
+    transition-duration: 0.7s, 0.7s;
+    transition-property: color, background-color,opacity;
+}
\ No newline at end of file
diff --git a/www/theme/default/style.css b/www/theme/default/style.css
index 48f44cba6b..ae3c5fd626 100644
--- a/www/theme/default/style.css
+++ b/www/theme/default/style.css
@@ -9,7 +9,8 @@
 * @link        http://www.zentao.net
 */
 /*-----------------------BASE SETTING----------------------------*/
-body     {margin:0; text-align:left; color:#141414;background: #e5e5e5;}
+html{background: #e5e5e5;}
+body     {margin:0; text-align:left; color:#141414;background: #e5e5e5;padding-bottom: 40px;}
 fieldset {border:1px solid #efefef; padding:8px 10px 8px 15px; margin-bottom:8px; color:#333;}
 legend   {font-weight:bold;}
 del{background:#fcc;}
@@ -177,6 +178,11 @@ table.tablesorter thead tr .header         {background-image: url(./images/table
 table.tablesorter thead tr .headerSortUp   {background-image: url(./images/tablesorter/asc.gif);  background-repeat: no-repeat; background-position: center right; cursor: pointer;}
 table.tablesorter thead tr .headerSortDown {background-image: url(./images/tablesorter/desc.gif); background-repeat: no-repeat; background-position: center right; cursor: pointer;}
 
+/* data table. */
+table.data-table{border: none;width: 100%;}
+table.data-table td:first-child{padding-left: 20px;}
+table.data-table td:last-child{padding-right: 20px;}
+
 /*-----------------------HEIGHT SETTING--------------------------*/
 .h-5px   {height:5px}
 .h-10px  {height:10px}
@@ -342,7 +348,7 @@ table.tablesorter thead tr .headerSortDown {background-image: url(./images/table
 #projectID {background:#e5e5e5; border:1px solid #e5e5e5}
 
 /* Feature bar. */
-#featurebar                {height:34px; line-height:34px;background-color: #f8fafe; padding:8px 10px; border-bottom: 1px solid #e7edf7;margin: 0;}
+#featurebar                {height:34px; line-height:34px;background-color: #f8fafe; padding:8px 10px; border-bottom: 1px solid #e1e1e1;margin: 0;}
 #featurebar span           {font-size:14px;}
 #featurebar a              {text-decoration:none;  display: inline-block;padding: 0px 7px; line-height: 34px;height: 34px; font-size:14px;-webkit-transition: all .2s;-o-transition: all .2s;-moz-transition: all .2s;transition: all .2s;}
 #featurebar a:hover        {color:#000;background-color: #e5e5e5;}
@@ -468,6 +474,9 @@ table.tablesorter thead tr .headerSortDown {background-image: url(./images/table
 
 /*-----------------------ICONS --------------------*/
 .icon{color: #888;}
+.link-icon{color: #036;display: inline-block;margin-right: 5px;}
+.link-icon:hover{color:#000;text-shadow:1px 1px 3px rgba(0,0,0,0.25);}
+.link-icon.disabled,.link-icon.disabled:hover,.link-icon .disabled,.link-icon .disabled:hover{color: #ccc;}
 
 
 /* Common icons. */