diff --git a/frontend/src/business/components/common/components/MsAsideContainer.vue b/frontend/src/business/components/common/components/MsAsideContainer.vue
new file mode 100644
index 0000000000..79a90b9281
--- /dev/null
+++ b/frontend/src/business/components/common/components/MsAsideContainer.vue
@@ -0,0 +1,23 @@
+<template>
+
+  <el-aside class="ms-aside-container">
+    <slot></slot>
+  </el-aside>
+
+</template>
+
+<script>
+    export default {
+      name: "MsAsideContainer"
+    }
+</script>
+
+<style scoped>
+
+  .ms-aside-container {
+    border: 1px solid #EBEEF5;
+    border-radius: 2px;
+    background: white;
+  }
+
+</style>
diff --git a/frontend/src/business/components/common/components/MsContainer.vue b/frontend/src/business/components/common/components/MsContainer.vue
new file mode 100644
index 0000000000..70dcdc64fa
--- /dev/null
+++ b/frontend/src/business/components/common/components/MsContainer.vue
@@ -0,0 +1,27 @@
+<template>
+
+  <el-container class="ms-container">
+    <slot></slot>
+  </el-container>
+
+</template>
+
+<script>
+    export default {
+      name: "MsContainer"
+    }
+</script>
+
+<style scoped>
+
+  .ms-container >>> span.title {
+    font-size: 16px;
+    font-weight: 500;
+    margin-top: 0;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-wrap: break-word;
+    white-space: nowrap;
+  }
+
+</style>
diff --git a/frontend/src/business/components/common/components/MsMainContainer.vue b/frontend/src/business/components/common/components/MsMainContainer.vue
new file mode 100644
index 0000000000..fcc7f3e6af
--- /dev/null
+++ b/frontend/src/business/components/common/components/MsMainContainer.vue
@@ -0,0 +1,20 @@
+<template>
+  <el-main class="ms-main-container">
+    <slot></slot>
+  </el-main>
+</template>
+
+<script>
+    export default {
+      name: "MsMainContainer"
+    }
+</script>
+
+<style scoped>
+
+  .ms-main-container {
+    padding: 15px;
+    height: calc(100vh - 80px);
+  }
+
+</style>
diff --git a/frontend/src/business/components/project/MsProject.vue b/frontend/src/business/components/project/MsProject.vue
index d9cf65a553..e32b67c07b 100644
--- a/frontend/src/business/components/project/MsProject.vue
+++ b/frontend/src/business/components/project/MsProject.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="container">
-    <div class="main-content">
+  <ms-container>
+    <ms-main-container>
       <el-card class="table-card" v-loading="result.loading">
         <template v-slot:header>
           <ms-table-header :condition.sync="condition" @search="search" @create="create"
@@ -19,26 +19,27 @@
         <ms-table-pagination :change="list" :current-page.sync="currentPage" :page-size.sync="pageSize"
                              :total="total"/>
       </el-card>
+    </ms-main-container>
 
-      <el-dialog :title="title" :visible.sync="createVisible">
-        <el-form :model="form" :rules="rules" ref="form" label-position="right" label-width="100px" size="small">
-          <el-form-item :label="$t('commons.name')">
-            <el-input v-model="form.name" autocomplete="off"></el-input>
-          </el-form-item>
-          <el-form-item :label="$t('commons.description')">
-            <el-input type="textarea" v-model="form.description"></el-input>
-          </el-form-item>
-        </el-form>
-        <template v-slot:footer>
-          <div class="dialog-footer">
-            <ms-dialog-footer
-              @cancel="createVisible = false"
-              @confirm="submit('form')"/>
-          </div>
-        </template>
-      </el-dialog>
-    </div>
-  </div>
+    <el-dialog :title="title" :visible.sync="createVisible">
+      <el-form :model="form" :rules="rules" ref="form" label-position="right" label-width="100px" size="small">
+        <el-form-item :label="$t('commons.name')">
+          <el-input v-model="form.name" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('commons.description')">
+          <el-input type="textarea" v-model="form.description"></el-input>
+        </el-form-item>
+      </el-form>
+      <template v-slot:footer>
+        <div class="dialog-footer">
+          <ms-dialog-footer
+            @cancel="createVisible = false"
+            @confirm="submit('form')"/>
+        </div>
+      </template>
+    </el-dialog>
+
+  </ms-container>
 </template>
 
 <script>
@@ -49,10 +50,14 @@
   import MsTableOperator from "../common/components/MsTableOperator";
   import MsDialogFooter from "../common/components/MsDialogFooter";
   import {getCurrentUser} from "../../../common/js/utils";
+  import MsContainer from "../common/components/MsContainer";
+  import MsMainContainer from "../common/components/MsMainContainer";
 
   export default {
     name: "MsProject",
-    components: {MsTableOperator, MsCreateBox, MsTablePagination, MsTableHeader, MsDialogFooter},
+    components: {
+      MsMainContainer,
+      MsContainer, MsTableOperator, MsCreateBox, MsTablePagination, MsTableHeader, MsDialogFooter},
     data() {
       return {
         createVisible: false,
diff --git a/frontend/src/business/components/track/TestTrack.vue b/frontend/src/business/components/track/TestTrack.vue
index 57ca513538..4e63c93777 100644
--- a/frontend/src/business/components/track/TestTrack.vue
+++ b/frontend/src/business/components/track/TestTrack.vue
@@ -28,24 +28,9 @@
 
 
 <style>
-
-  .tree-aside {
-    position: relative;
-    border: 1px solid #EBEEF5;
-    box-sizing: border-box;
-    height: calc(100vh - 80px);
-    background: white;
-  }
-
   .node-tree {
     margin: 3%;
   }
-
-  .case-container {
-    margin-top: 0;
-    margin-left: 0;
-  }
-
 </style>
 
 <style scoped>
diff --git a/frontend/src/business/components/track/case/TestCase.vue b/frontend/src/business/components/track/case/TestCase.vue
index c5f5684e72..33ff2ae1c7 100644
--- a/frontend/src/business/components/track/case/TestCase.vue
+++ b/frontend/src/business/components/track/case/TestCase.vue
@@ -1,51 +1,51 @@
 <template>
-    <div class="main-content">
-        <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"
-                       v-loading="result.loading"
-                       @nodeSelectEvent="nodeChange"
-                       @refresh="refresh"
-                       :tree-nodes="treeNodes"
-                       :type="'edit'"
-                       :draggable="true"
-                       :select-node.sync="selectNode"
-                       @refreshTable="refreshTable"
-                       ref="nodeTree"/>
-          </el-aside>
+  <ms-container>
 
-          <el-main>
-            <test-case-list
-              :current-project="currentProject"
-              :select-node-ids="selectNodeIds"
-              :select-parent-nodes="selectParentNodes"
-              @testCaseEdit="editTestCase"
-              @testCaseCopy="copyTestCase"
-              @testCaseDetail="showTestCaseDetail"
-              @refresh="refresh"
-              @moveToNode="moveToNode"
-              ref="testCaseList">
-            </test-case-list>
-          </el-main>
-        </el-container>
+    <ms-aside-container>
+      <select-menu
+        :data="projects"
+        :current-data="currentProject"
+        :title="$t('test_track.project')"
+        @dataChange="changeProject"/>
+      <node-tree
+        class="node-tree"
+        v-loading="result.loading"
+        @nodeSelectEvent="nodeChange"
+        @refresh="refresh"
+        :tree-nodes="treeNodes"
+        :type="'edit'"
+        :draggable="true"
+        :select-node.sync="selectNode"
+        @refreshTable="refreshTable"
+        ref="nodeTree"/>
+    </ms-aside-container>
 
-        <test-case-edit
-          @refresh="refresh"
-          :read-only="testCaseReadOnly"
-          :tree-nodes="treeNodes"
-          :select-node="selectNode"
-          ref="testCaseEditDialog">
-        </test-case-edit>
+    <ms-main-container>
+      <test-case-list
+        :current-project="currentProject"
+        :select-node-ids="selectNodeIds"
+        :select-parent-nodes="selectParentNodes"
+        @testCaseEdit="editTestCase"
+        @testCaseCopy="copyTestCase"
+        @testCaseDetail="showTestCaseDetail"
+        @refresh="refresh"
+        @moveToNode="moveToNode"
+        ref="testCaseList">
+      </test-case-list>
+    </ms-main-container>
 
-      <test-case-move @refresh="refresh" ref="testCaseMove"/>
+    <test-case-edit
+      @refresh="refresh"
+      :read-only="testCaseReadOnly"
+      :tree-nodes="treeNodes"
+      :select-node="selectNode"
+      ref="testCaseEditDialog">
+    </test-case-edit>
+
+    <test-case-move @refresh="refresh" ref="testCaseMove"/>
+
+  </ms-container>
 
-    </div>
 </template>
 
 <script>
@@ -56,10 +56,15 @@
   import TestCaseList from "./components/TestCaseList";
   import SelectMenu from "../common/SelectMenu";
   import TestCaseMove from "./components/TestCaseMove";
+  import MsContainer from "../../common/components/MsContainer";
+  import MsAsideContainer from "../../common/components/MsAsideContainer";
+  import MsMainContainer from "../../common/components/MsMainContainer";
 
   export default {
     name: "TestCase",
-    components: {TestCaseMove, TestCaseList, NodeTree, TestCaseEdit, SelectMenu},
+    components: {
+      MsMainContainer,
+      MsAsideContainer, MsContainer, TestCaseMove, TestCaseList, NodeTree, TestCaseEdit, SelectMenu},
     comments: {},
     data() {
       return {
diff --git a/frontend/src/business/components/track/home/TrackHome.vue b/frontend/src/business/components/track/home/TrackHome.vue
index c2b24e0907..8f63364e67 100644
--- a/frontend/src/business/components/track/home/TrackHome.vue
+++ b/frontend/src/business/components/track/home/TrackHome.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="container">
-    <div class="main-content">
+  <ms-container>
+    <ms-main-container>
       <el-row>
         <el-col :span="15">
           <related-test-plan-list ref="relatedTestPlanList"/>
@@ -9,16 +9,18 @@
           <test-case-side-list :title="'最近测试'" ref="testCaseRecentList"/>
         </el-col>
       </el-row>
-    </div>
-  </div>
+    </ms-main-container>
+  </ms-container>
 </template>
 
 <script>
     import RelatedTestPlanList from "./components/RelatedTestPlanList";
     import TestCaseSideList from "./components/TestCaseSideList";
+    import MsContainer from "../../common/components/MsContainer";
+    import MsMainContainer from "../../common/components/MsMainContainer";
     export default {
       name: "TrackHome",
-      components: {TestCaseSideList, RelatedTestPlanList},
+      components: {MsMainContainer, MsContainer, TestCaseSideList, RelatedTestPlanList},
       watch: {
         '$route'(to,from) {
           if (to.path.indexOf('/track/home') > -1) {
@@ -37,7 +39,7 @@
 
 <style scoped>
 
-  .main-content >>> .el-table {
+  .ms-main-container >>> .el-table {
     cursor:pointer;
   }
 
diff --git a/frontend/src/business/components/track/plan/TestPlan.vue b/frontend/src/business/components/track/plan/TestPlan.vue
index 89c9b89cee..37c77c7d97 100644
--- a/frontend/src/business/components/track/plan/TestPlan.vue
+++ b/frontend/src/business/components/track/plan/TestPlan.vue
@@ -1,25 +1,28 @@
 <template>
-  <div class="container">
-    <div class="main-content">
+  <ms-container>
+
+    <ms-main-container>
       <test-plan-list
         @openTestPlanEditDialog="openTestPlanEditDialog"
         @testPlanEdit="openTestPlanEditDialog"
-        ref="testPlanList"></test-plan-list>
-      <test-plan-edit
-        ref="testPlanEditDialog"
-        @refresh="refreshTestPlanList"></test-plan-edit>
-    </div>
-  </div>
+        ref="testPlanList"/>
+    </ms-main-container>
+
+    <test-plan-edit ref="testPlanEditDialog" @refresh="refreshTestPlanList"/>
+
+  </ms-container>
 </template>
 
 <script>
 
   import TestPlanList from './components/TestPlanList';
   import TestPlanEdit from './components/TestPlanEdit';
+  import MsContainer from "../../common/components/MsContainer";
+  import MsMainContainer from "../../common/components/MsMainContainer";
 
   export default {
     name: "TestPlan",
-    components: {TestPlanList, TestPlanEdit},
+    components: {MsMainContainer, MsContainer, TestPlanList, TestPlanEdit},
     data() {
       return {
       }
diff --git a/frontend/src/business/components/track/plan/components/TestPlanList.vue b/frontend/src/business/components/track/plan/components/TestPlanList.vue
index def87da4bb..687c62f7e9 100644
--- a/frontend/src/business/components/track/plan/components/TestPlanList.vue
+++ b/frontend/src/business/components/track/plan/components/TestPlanList.vue
@@ -1,8 +1,5 @@
 <template>
-
-  <div class="container">
-    <el-main class="main-content">
-      <el-card class="table-card" v-loading="result.loading">
+  <el-card class="table-card" v-loading="result.loading">
         <template v-slot:header>
           <ms-table-header :condition.sync="condition" @search="initTableData" @create="testPlanCreate"
                            :create-tip="$t('test_track.plan.create_plan')" :title="$t('test_track.plan.test_plan')"/>
@@ -67,8 +64,6 @@
         <ms-table-pagination :change="initTableData" :current-page.sync="currentPage" :page-size.sync="pageSize"
                              :total="total"/>
       </el-card>
-    </el-main>
-  </div>
 </template>
 
 <script>
diff --git a/frontend/src/business/components/track/plan/view/TestPlanView.vue b/frontend/src/business/components/track/plan/view/TestPlanView.vue
index f730edd268..9e0f93308a 100644
--- a/frontend/src/business/components/track/plan/view/TestPlanView.vue
+++ b/frontend/src/business/components/track/plan/view/TestPlanView.vue
@@ -1,38 +1,39 @@
 <template>
-  <div class="main-content">
-    <el-container class="case-container">
-      <el-aside class="tree-aside">
-        <select-menu
-          :data="testPlans"
-          :current-data="currentPlan"
-          :title="$t('test_track.plan_view.plan')"
-          @dataChange="changePlan"/>
 
-        <node-tree class="node-tree"
-                   v-loading="result.loading"
-                   @nodeSelectEvent="nodeChange"
-                   @refresh="refresh"
-                   :tree-nodes="treeNodes"
-                   :draggable="false"
-                   ref="nodeTree"/>
-      </el-aside>
+  <ms-container>
 
-      <el-main>
-        <test-plan-test-case-list class="table-list"
+    <ms-aside-container>
+      <select-menu
+        :data="testPlans"
+        :current-data="currentPlan"
+        :title="$t('test_track.plan_view.plan')"
+        @dataChange="changePlan"/>
+      <node-tree class="node-tree"
+                 v-loading="result.loading"
+                 @nodeSelectEvent="nodeChange"
+                 @refresh="refresh"
+                 :tree-nodes="treeNodes"
+                 :draggable="false"
+                 ref="nodeTree"/>
+    </ms-aside-container>
+
+    <ms-main-container>
+        <test-plan-test-case-list
+          class="table-list"
           @openTestCaseRelevanceDialog="openTestCaseRelevanceDialog"
           @refresh="refresh"
           :plan-id="planId"
           :select-node-ids="selectNodeIds"
           :select-parent-nodes="selectParentNodes"
           ref="testPlanTestCaseList"/>
-      </el-main>
-    </el-container>
+    </ms-main-container>
 
     <test-case-relevance
       @refresh="refresh"
       :plan-id="planId"
       ref="testCaseRelevance"/>
-  </div>
+
+  </ms-container>
 
 </template>
 
@@ -42,10 +43,15 @@
     import TestPlanTestCaseList from "./comonents/TestPlanTestCaseList";
     import TestCaseRelevance from "./comonents/TestCaseRelevance";
     import SelectMenu from "../../common/SelectMenu";
+    import MsContainer from "../../../common/components/MsContainer";
+    import MsAsideContainer from "../../../common/components/MsAsideContainer";
+    import MsMainContainer from "../../../common/components/MsMainContainer";
 
     export default {
       name: "TestPlanView",
-      components: {NodeTree, TestPlanTestCaseList, TestCaseRelevance, SelectMenu},
+      components: {
+        MsMainContainer,
+        MsAsideContainer, MsContainer, NodeTree, TestPlanTestCaseList, TestCaseRelevance, SelectMenu},
       data() {
         return {
           result: {},
@@ -128,9 +134,4 @@
 </script>
 
 <style scoped>
-
-  .el-main {
-    padding: 15px;
-  }
-
 </style>
diff --git a/frontend/src/common/css/main.css b/frontend/src/common/css/main.css
index 58784f96f9..72c8d9710c 100644
--- a/frontend/src/common/css/main.css
+++ b/frontend/src/common/css/main.css
@@ -33,14 +33,8 @@ body {
   clear: both;
 }
 
-.card-container {
-  position: relative;
-}
 
-.card-content {
-  width: 100%;
-  position: absolute;
-}
+
 
 .table-card > .el-card__body {
   padding-top: 0;