diff --git a/module/my/view/testcase.html.php b/module/my/view/testcase.html.php
index 893729bea4..c45a89c4d6 100644
--- a/module/my/view/testcase.html.php
+++ b/module/my/view/testcase.html.php
@@ -94,7 +94,7 @@
           <td class='c-name' title='<?php echo $case->taskName;?>'><?php echo $case->taskName;?></td>
           <?php endif;?>
           <td><?php echo zget($lang->testcase->typeList, $case->type);?></td>
-          <td class='status-testcase status-<?php if(isset($run)) echo $run->status;?>'><?php echo $this->processStatus('testcase', $case);?></td>
+          <td class='status-testcase status-<?php echo $case->status;?>'><?php echo $this->processStatus('testcase', $case);?></td>
           <td><?php echo zget($users, $case->openedBy);?></td>
           <td><?php echo zget($users, $case->lastRunner);?></td>
           <td><?php echo helper::isZeroDate($case->lastRunDate) ? '' : substr($case->lastRunDate, 5, 11);?></td>
diff --git a/module/productplan/css/browse.css b/module/productplan/css/browse.css
index d7174d9751..0c62007c4c 100644
--- a/module/productplan/css/browse.css
+++ b/module/productplan/css/browse.css
@@ -1,5 +1,6 @@
 .table td.content div {height: 25px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; float: left; max-width: calc(100% - 20px);}
-.table td.content .more {height: 25px; float: left;}
+.table td.content .more {position: absolute; right: 16px;}
+.table td.content .more .icon {color: #838a9d;}
 td.c-branch {overflow: hidden; text-align: left !important; text-overflow: ellipsis; white-space: nowrap;}
 
 .table-children {border-left: 2px solid #cbd0db; border-right: 2px solid #cbd0db;}
@@ -8,10 +9,10 @@ td.c-branch {overflow: hidden; text-align: left !important; text-overflow: ellip
 .table td.has-child > a {max-width: 90%; max-width: calc(100% - 30px); display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
 .table td.has-child > .plan-name > .task-toggle {color: #838a9d; position: relative; top: 1px; line-height: 16px;}
 .table td.has-child > .plan-name > .task-toggle:hover {color: #006af1; cursor: pointer;}
-.table td.has-child > .plan-name > .task-toggle > .icon {font-size: 16px; display: inline-block; transition: transform .2s; -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg);}
+.table td.has-child > .plan-name > .task-toggle > .icon, .table td.content .more .icon {font-size: 16px; display: inline-block; transition: transform .2s; -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg);}
 .table td.has-child > .plan-name > .task-toggle > .icon:before {text-align: left;}
 .table td.has-child > .plan-name > .task-toggle.collapsed {top: 0;}
-.table td.has-child > .plan-name > .task-toggle.collapsed > .icon {-ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);}
+.table td.has-child > .plan-name > .task-toggle.collapsed > .icon, .table td.content .more .icon.rotate-down {-ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);}
 .main-table tbody > tr.table-children > td:first-child::before {width: 3px;}
 @-moz-document url-prefix() {.main-table tbody > tr.table-children > td:first-child::before {width: 4px;};}
 
diff --git a/module/productplan/js/browse.js b/module/productplan/js/browse.js
index f0e17ba4fd..7ef247b48c 100644
--- a/module/productplan/js/browse.js
+++ b/module/productplan/js/browse.js
@@ -18,7 +18,7 @@ $(function()
         var content  = $content.find('div').html();
         if(content.indexOf('<br') >= 0 || content.indexOf('<img') >= 0)
         {
-            $content.append("<a href='###' class='more'><i class='icon icon-chevron-double-down'></i></a>");
+            $content.append("<a href='###' class='more'><i class='icon icon-angle-right'></i></a>");
         }
     });
 
@@ -192,14 +192,14 @@ $(document).on('click', 'td.content .more', function(e)
         $toggle.removeClass('open');
         $toggle.closest('.content').find('div').css('height', '25px');
         $toggle.css('padding-top', 0);
-        $toggle.find('i').removeClass('icon-chevron-double-up').addClass('icon-chevron-double-down');
+        $toggle.find('i').removeClass('rotate-down');
     }
     else
     {
         $toggle.addClass('open');
         $toggle.closest('.content').find('div').css('height', 'auto');
         $toggle.css('padding-top', ($toggle.closest('.content').find('div').height() - $toggle.height()) / 2);
-        $toggle.find('i').removeClass('icon-chevron-double-down').addClass('icon-chevron-double-up');
+        $toggle.find('i').addClass('rotate-down');
     }
 });
 
diff --git a/module/testtask/view/browse.html.php b/module/testtask/view/browse.html.php
index 7a83118728..d93b1daafb 100644
--- a/module/testtask/view/browse.html.php
+++ b/module/testtask/view/browse.html.php
@@ -105,7 +105,7 @@ $status = strtolower($status);
       <td class='c-name' title="<?php echo $task->executionName?>"><?php echo $task->executionName?></td>
       <?php $statusName = $this->processStatus('testtask', $task);?>
       <td title='<?php echo $statusName;?>'>
-        <span class='status-task status-<?php echo $task->status?>'>
+        <span class='status-testtask status-<?php echo $task->status?>'>
           <?php echo $statusName;?>
         </span>
       </td>
diff --git a/www/theme/default/images/severity/severity-sprite.png b/www/theme/default/images/severity/severity-sprite.png
new file mode 100644
index 0000000000..e589db598d
Binary files /dev/null and b/www/theme/default/images/severity/severity-sprite.png differ
diff --git a/www/theme/default/style.css b/www/theme/default/style.css
index b4a0bf3735..8ae1e94f02 100644
--- a/www/theme/default/style.css
+++ b/www/theme/default/style.css
@@ -154,32 +154,58 @@ td.delayed > span {display: inline-block; height: 20px; line-height: 18px; backg
 .table.has-sort-head thead > tr > th:last-child {padding-right: 8px;}
 tbody tr td.c-actions .dividing-line {width: 1px; height: 16px; display: inline-block; vertical-align: middle; background: #F4F5F7; margin: 0 4px 0 0;}
 
+.panel-actions > li > a {color: #838A9D;}
+
 .label.label-outline.status-wait {color: #313C52; border-color: #313C52;}
 .label.label-outline.status-doing {color: #FF6F42; border-color: #FF6F42;}
 .label.label-outline.status-suspended {color: #B89664; border-color: #B89664;}
 .label.label-outline.status-closed {color: #9EA3B0; border-color: #9EA3B0;}
-.status-active .label-dot, .status-wait .label-dot {background-color: #313C52;}
+
+.status-draft {color: #8166EE;}
+.status-clarify {color: #8166EE;}
+.status-testtask.status-blocked {left: 0;}
+.status-done .label-dot {background-color: #0DBB7D;}
+.status-reviewing, .status-noreview {color: #18A6FD;}
+.status-doing .label-dot {background-color: #FF6F42;}
+.status-pause .label-dot {background-color: #B89664;}
 .status-draft .label-dot {background-color: #8166EE;}
+.status-cancel .label-dot {background-color: #B89664;}
 .status-closed .label-dot {background-color: #9EA3B0;}
 .status-changing .label-dot {background-color: #FB2B2B;}
-.status-doing .label-dot {background-color: #FF6F42;}
-.status-done .label-dot {background-color: #0DBB7D;}
-.status-pause .label-dot {background-color: #B89664;}
-.status-cancel .label-dot {background-color: #B89664;}
-.status-wait, .status-active, .status-active.status-bug, .status-normal, .status-asked, #workflowTable td.text-center.text-warning, .result-testcase, .c-lastRunResult span, .status-unconfirmed {color: #313C52;}
-.status-doing, .status-commenting, .status-checkingi, .status-confirmed {color: #FF6F42;}
-.status-suspended, .status-pause, .status-blocked, .status-hangup, .result-testcase.blocked, .c-lastRunResult .result-blocked {color: #B89664;}
-.status-closed, #workflowTable td.text-center.text-muted {color: #9EA3B0;}
-.status-draft {color: #8166EE;}
+.status-reviewing .label-dot {background-color: #18A6FD;}
 .status-cancel, .status-investigate, .status-canceled {color: #838A9D;}
+.status-active .label-dot, .status-wait .label-dot {background-color: #313C52;}
+.status-doing, .status-commenting, .status-checking, .status-confirmed {color: #FF6F42;}
+.status-closed, #workflowTable td.text-center.text-mutedi, .status-testtask.status-done {color: #9EA3B0;}
+.status-suspended, .status-pause, .status-blocked, .status-hangup, .result-testcase.blocked, .c-lastRunResult .result-blocked {color: #B89664;}
 .status-done, .status-resolved, .status-replied, .status-checked, #workflowTable td.text-success, .result-testcase.pass, .c-lastRunResult .result-pass {color: #0DBB7D;}
 .status-changing, .status-active.status-risk, .result-testcase.fail, .c-lastRunResult .result-fail, .severity-issue.severity-1, .c-severity .severity-1, .status-changed {color: #FB2B2B;}
+.status-wait, .status-active, .status-active.status-bug, .status-normal, .status-asked, #workflowTable td.text-center.text-warning, .result-testcase, .c-lastRunResult span, .status-unconfirmed {color: #313C52;}
+
+.severity-issue.severity-1, .c-severity .severity-1 {color: #FB2B2B;}
 .severity-issue.severity-2, .c-severity .severity-2 {color: #FF9F44;}
+.severity-issue.severity-3, .c-severity .severity-3 {color: #18A6FD;}
 .severity-issue.severity-4, .c-severity .severity-3 {color: #313C52;}
+
 .label-pri, .label-selector > .label {color: #9EA3B0; border-color: #9EA3B0;}
 .label-pri-1, .label-selector > .label-pri[data-value="1"] {color: #FF4912; border-color: #FF4912;}
 .label-pri-2, .label-selector > .label-pri[data-value="2"] {color: #F38F19; border-color: #F38F19;}
 .label-pri-3, .label-selector > .label-pri[data-value="3"] {color: #37B2FE; border-color: #37B2FE;}
 .label-pri-4, .label-pri-5, .label-selector > .label-pri[data-value="4"], .label-selector > .label-pri[data-value="5"] {color: #9EA3B0; border-color: #9EA3B0;}
 
-.panel-actions > li > a {color: #838A9D;}
+.label-severity:before {content: '';}
+.c-severity > .label-severity {height: 28px;}
+.c-severity > .label-severity:after {top: 9px;}
+.c-severity > .label-severity {background-position: 0px -132px;}
+.label-selector > .label.label-severity, .label-selector > .label.label-severity.active, .c-severity > .label-severity, .pri-text > .label-severity {background: url('images/severity/severity-sprite.png') no-repeat; background-size:cover; border: none; height: 26px; line-height: 32px; background-position: 0px -165px; color: #9EA3B0;}
+.label-selector > .label.label-severity[data-severity="1"], .label-selector > .label.label-severity[data-value="1"], .c-severity > .label-severity[data-severity="1"] {color: #FB2B2B; background-position: 0px -1px;}
+.label-selector > .label.label-severity[data-severity="2"], .label-selector > .label.label-severity[data-value="2"], .c-severity > .label-severity[data-severity="2"] {color: #FF8058; background-position: 0px -41px;}
+.label-selector > .label.label-severity[data-severity="3"], .label-selector > .label.label-severity[data-value="3"], .c-severity > .label-severity[data-severity="3"] {color: #FAAE1A; background-position: 0px -80px;}
+.label-selector > .label.label-severity[data-severity="4"], .label-selector > .label.label-severity[data-value="4"], .c-severity > .label-severity[data-severity="4"] {color: #B89664; background-position: 0px -123px;}
+
+.pri-text > .label-pri, .pri-text > .label-severity {height: 20px;}
+.pri-text > .label-severity {background-size: 80%; background-position: 2px -132px;}
+.pri-text > .label-severity[data-severity="1"] {color: #FB2B2B; background-position: 2px -1px;}
+.pri-text > .label-severity[data-severity="2"] {color: #FF8058; background-position: 2px -33px;}
+.pri-text > .label-severity[data-severity="3"] {color: #FAAE1A; background-position: 2px -64px;}
+.pri-text > .label-severity[data-severity="4"] {color: #B89664; background-position: 2px -99px;}