diff --git a/frontend/src/business/components/track/case/TestCase.vue b/frontend/src/business/components/track/case/TestCase.vue
index 921e3c1d17..77ce525dfb 100644
--- a/frontend/src/business/components/track/case/TestCase.vue
+++ b/frontend/src/business/components/track/case/TestCase.vue
@@ -1,43 +1,41 @@
 <template>
   <div class="container">
     <div class="main-content">
-      <el-container>
-        <el-aside width="250px">
+      <el-card>
 
-          <select-menu
-            :data="projects"
-            :current-data="currentProject"
-            :title="$t('test_track.project')"
-            @dataChange="changeProject">
-          </select-menu>
+        <el-container class="case-container">
+          <el-aside class="tree-aside">
+            <select-menu
+              :data="projects"
+              :current-data="currentProject"
+              :title="$t('test_track.project')"
+              @dataChange="changeProject">
+            </select-menu>
+            <node-tree class="node-tree"
+                       :current-project="currentProject"
+                       @nodeSelectEvent="refreshTable"
+                       @refresh="refreshTable"
+                       ref="nodeTree">
+            </node-tree>
+          </el-aside>
 
-          <node-tree class="node-tree"
-                     :current-project="currentProject"
-                     @nodeSelectEvent="refreshTable"
-                     @refresh="refreshTable"
-                     ref="nodeTree">
-          </node-tree>
+          <el-main class="case-main">
+            <test-case-list
+              :current-project="currentProject"
+              @openTestCaseEditDialog="openTestCaseEditDialog"
+              @testCaseEdit="openTestCaseEditDialog"
+              @refresh="refresh"
+              ref="testCaseList">
+            </test-case-list>
+          </el-main>
+        </el-container>
 
-        </el-aside>
-
-        <el-main class="main-content">
-
-          <test-case-list
-            :current-project="currentProject"
-            @openTestCaseEditDialog="openTestCaseEditDialog"
-            @testCaseEdit="openTestCaseEditDialog"
-            @refresh="refresh"
-            ref="testCaseList">
-          </test-case-list>
-        </el-main>
-
-      </el-container>
-
-      <test-case-edit
-        @refresh="refreshTable"
-        ref="testCaseEditDialog">
-      </test-case-edit>
+        <test-case-edit
+          @refresh="refreshTable"
+          ref="testCaseEditDialog">
+        </test-case-edit>
 
+      </el-card>
     </div>
   </div>
 </template>
@@ -174,7 +172,6 @@
       openRecentTestCaseEditDialog() {
         let caseId = this.$route.params.caseId;
         this.getProjectByCaseId(caseId);
-        // this.refresh();
         this.$get('/test/case/get/' + caseId, response => {
           if (response.data) {
             this.openTestCaseEditDialog(response.data);
@@ -206,20 +203,25 @@
 
 <style scoped>
 
-  .main-content {
-    width: 100%;
-    height: 100%;
-    background: white;
-    height: 1000px;
+  .node-tree {
+    margin: 3%;
+  }
+
+
+  .tree-aside {
+    position: relative;
+    border-radius: 4px;
+    border: 1px solid #EBEEF5;
     box-sizing: border-box;
   }
 
-  .node-tree {
-    margin: 5%;
+  .case-container {
+    height: calc(100vh - 150px);
+    min-height: 600px;
   }
 
-  .container {
-    padding: 0px;
+  .case-main {
+    padding-top: 0;
   }
 
 </style>
diff --git a/frontend/src/business/components/track/plan/TestPlanView.vue b/frontend/src/business/components/track/plan/TestPlanView.vue
index d6e7f0b146..ab722e3c01 100644
--- a/frontend/src/business/components/track/plan/TestPlanView.vue
+++ b/frontend/src/business/components/track/plan/TestPlanView.vue
@@ -1,38 +1,40 @@
 <template>
   <div class="container">
     <div class="main-content">
-      <el-container>
-        <el-aside class="aside-container" width="250px">
-          <select-menu
-            :data="testPlans"
-            :current-data="currentPlan"
-            :title="$t('test_track.plan')"
-            @dataChange="changePlan">
-          </select-menu>
+      <el-card>
+        <el-container class="view-container">
+          <el-aside class="tree-aside">
+            <select-menu
+              :data="testPlans"
+              :current-data="currentPlan"
+              :title="$t('test_track.plan')"
+              @dataChange="changePlan">
+            </select-menu>
 
-          <plan-node-tree
-            class="node-tree"
-            :plan-id="planId"
-            @nodeSelectEvent="getPlanCases"
-            ref="tree">
-          </plan-node-tree>
+            <plan-node-tree
+              class="node-tree"
+              :plan-id="planId"
+              @nodeSelectEvent="getPlanCases"
+              ref="tree">
+            </plan-node-tree>
 
-        </el-aside>
+          </el-aside>
 
-        <el-main>
-          <test-plan-test-case-list
-            @openTestCaseRelevanceDialog="openTestCaseRelevanceDialog"
-            @refresh="refresh"
-            :plan-id="planId"
-            ref="testCasePlanList"></test-plan-test-case-list>
-        </el-main>
-      </el-container>
-
-      <test-case-relevance
-        @refresh="refresh"
-        :plan-id="planId"
-        ref="testCaseRelevance"></test-case-relevance>
+          <el-main class="view-main">
+            <test-plan-test-case-list
+              @openTestCaseRelevanceDialog="openTestCaseRelevanceDialog"
+              @refresh="refresh"
+              :plan-id="planId"
+              ref="testCasePlanList"></test-plan-test-case-list>
+          </el-main>
+        </el-container>
 
+        <test-case-relevance
+          @refresh="refresh"
+          :plan-id="planId"
+          ref="testCaseRelevance">
+        </test-case-relevance>
+      </el-card>
     </div>
   </div>
 
@@ -98,22 +100,25 @@
 
 <style scoped>
 
-  .main-content {
-    padding: 0px;
-    background: white;
-    height: 600px;
-  }
-
-  .container {
-    padding: 0px;
-  }
-
-  .aside-container {
-    margin-left: 15px;
-  }
 
   .node-tree {
     margin: 3%;
   }
 
+  .view-container {
+    height: calc(100vh - 150px);
+    min-height: 600px;
+  }
+
+  .tree-aside {
+    position: relative;
+    border-radius: 4px;
+    border: 1px solid #EBEEF5;
+    box-sizing: border-box;
+  }
+
+  .view-main {
+    padding-top: 0;
+  }
+
 </style>
diff --git a/frontend/src/business/components/track/plan/components/TestPlanTestCaseEdit.vue b/frontend/src/business/components/track/plan/components/TestPlanTestCaseEdit.vue
index 6799f5f4b2..af43b489e3 100644
--- a/frontend/src/business/components/track/plan/components/TestPlanTestCaseEdit.vue
+++ b/frontend/src/business/components/track/plan/components/TestPlanTestCaseEdit.vue
@@ -11,7 +11,7 @@
 
       <el-header>
 
-        <el-row type="flex" style="margin-top: 1%" justify="end">
+        <el-row type="flex" class="head-bar">
 
           <el-col :span="12">
             <el-button plain size="mini"
@@ -20,11 +20,11 @@
           </el-col>
 
           <el-col :span="12" class="head-right">
-            <span v-if="index + 1 == tableData.length">
-              上一条用例 : {{tableData[index - 1].name}}
+            <span class="head-right-tip" v-if="index + 1 == tableData.length">
+              上一条用例 : {{tableData ? tableData[index - 1].name : ''}}
             </span>
-            <span v-if="index + 1 < tableData.length">
-              下一条用例 : {{tableData[index + 1].name}}
+            <span class="head-right-tip" v-if="index + 1 < tableData.length">
+              下一条用例 : {{tableData ? tableData[index + 1].name : ''}}
             </span>
 
             <el-button plain size="mini" icon="el-icon-arrow-up"
@@ -90,7 +90,7 @@
               class="tb-edit"
               size="mini"
               height="250px"
-              border="true"
+              :border="true"
               :default-sort = "{prop: 'num', order: 'ascending'}"
               highlight-current-row>
               <el-table-column :label="$t('test_track.number')" prop="num" min-width="5%"></el-table-column>
@@ -121,10 +121,10 @@
                   <el-select
                     v-model="scope.row.executeResult"
                     size="mini">
-                    <el-option :label="$t('test_track.pass')" value="Pass"></el-option>
-                    <el-option :label="$t('test_track.failure')" value="Failure"></el-option>
-                    <el-option :label="$t('test_track.blocking')" value="Blocking"></el-option>
-                    <el-option :label="$t('test_track.skip')" value="Skip"></el-option>
+                    <el-option :label="$t('test_track.pass')" value="Pass" style="color: #7ebf50;"></el-option>
+                    <el-option :label="$t('test_track.failure')" value="Failure" style="color: #e57471;"></el-option>
+                    <el-option :label="$t('test_track.blocking')" value="Blocking" style="color: #dda451;"></el-option>
+                    <el-option :label="$t('test_track.skip')" value="Skip" style="color: #919399;"></el-option>
                   </el-select>
                 </template>
               </el-table-column>
@@ -263,7 +263,14 @@
 
   .status-button {
     float: right;
-    margin-right: 1px;
+  }
+
+  .head-bar {
+    margin-top: 1%;
+  }
+
+  .head-right-tip {
+    color: darkgrey;
   }
 
 </style>
diff --git a/frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue b/frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue
index bcad3964c9..ac518a738f 100644
--- a/frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue
+++ b/frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <el-main class="main-content">
+  <el-main>
     <el-card v-loading="result.loading">
       <template v-slot:header>
         <div>
@@ -67,6 +67,24 @@
         <el-table-column
           prop="priority"
           :label="$t('test_track.priority')">
+          <template v-slot:default="scope">
+            <el-tag v-if="scope.row.priority == 'P0'"
+                    type="danger"
+                    effect="dark"
+                    size="mini">{{scope.row.priority}}</el-tag>
+            <el-tag v-if="scope.row.priority == 'P1'"
+                    type="danger"
+                    effect="light"
+                    size="mini">{{scope.row.priority}}</el-tag>
+            <el-tag v-if="scope.row.priority == 'P2'"
+                    type="warning"
+                    effect="dark"
+                    size="mini">{{scope.row.priority}}</el-tag>
+            <el-tag v-if="scope.row.priority == 'P3'"
+                    type="warning"
+                    effect="light"
+                    size="mini">{{scope.row.priority}}</el-tag>
+          </template>
         </el-table-column>
 
         <el-table-column
@@ -101,7 +119,8 @@
           :label="$t('test_track.execute_result')">
           <template v-slot:default="scope">
             <el-tag v-if="scope.row.status == 'Prepare'"
-                    e ffect="info"
+                    type="info"
+                    effect="dark"
                     size="mini">{{$t('test_track.plan_status_prepare')}}</el-tag>
             <el-tag v-if="scope.row.status == 'Pass'"
                     type="success"