diff --git a/frontend/src/business/App.vue b/frontend/src/business/App.vue
index 34955a7cee..32a77c190e 100644
--- a/frontend/src/business/App.vue
+++ b/frontend/src/business/App.vue
@@ -48,14 +48,6 @@
   }
 </script>
 
-<style>
-  body {
-    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-    font-size: 14px;
-    margin: 0;
-  }
-</style>
-
 <style scoped>
   #header-top {
     width: 100%;
diff --git a/frontend/src/business/components/api/head/ApiHeaderMenus.vue b/frontend/src/business/components/api/head/ApiHeaderMenus.vue
index d036a3e7b8..7fc821f9a8 100644
--- a/frontend/src/business/components/api/head/ApiHeaderMenus.vue
+++ b/frontend/src/business/components/api/head/ApiHeaderMenus.vue
@@ -51,7 +51,7 @@
 
 <script>
 
-  import {checkoutCurrentWorkspace} from "../../../../common/utils";
+  import {checkoutCurrentWorkspace} from "../../../../common/js/utils";
   import MsRecentList from "../../common/head/RecentList";
   import MsShowAll from "../../common/head/ShowAll";
   import MsCreateButton from "../../common/head/CreateButton";
@@ -126,22 +126,6 @@
 
 </script>
 
-<style>
-  .header-menu.el-menu--horizontal > li {
-    height: 39px;
-    line-height: 40px;
-    color: dimgray;
-  }
-
-  .header-menu.el-menu--horizontal > li.el-submenu > * {
-    height: 39px;
-    line-height: 40px;
-    color: dimgray;
-  }
-
-
-</style>
-
 <style scoped>
   .el-divider--horizontal {
     margin: 0;
diff --git a/frontend/src/business/components/api/project/ApiRecentProject.vue b/frontend/src/business/components/api/project/ApiRecentProject.vue
index c4314cf69a..658798546e 100644
--- a/frontend/src/business/components/api/project/ApiRecentProject.vue
+++ b/frontend/src/business/components/api/project/ApiRecentProject.vue
@@ -13,8 +13,8 @@
 
 <script>
 
-  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../common/constants";
-  import {hasRoles} from "../../../../common/utils";
+  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../common/js/constants";
+  import {hasRoles} from "../../../../common/js/utils";
 
   export default {
     name: "ApiRecentProject",
diff --git a/frontend/src/business/components/api/report/ApiRecentReport.vue b/frontend/src/business/components/api/report/ApiRecentReport.vue
index 0c12c95362..c5ae922965 100644
--- a/frontend/src/business/components/api/report/ApiRecentReport.vue
+++ b/frontend/src/business/components/api/report/ApiRecentReport.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../common/constants";
+  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../common/js/constants";
 
   export default {
     name: "ApiRecentReport",
diff --git a/frontend/src/business/components/api/test/ApiRecentTest.vue b/frontend/src/business/components/api/test/ApiRecentTest.vue
index f26b2621c2..125ad5b109 100644
--- a/frontend/src/business/components/api/test/ApiRecentTest.vue
+++ b/frontend/src/business/components/api/test/ApiRecentTest.vue
@@ -11,8 +11,8 @@
 </template>
 
 <script>
-  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../common/constants";
-  import {hasRoles} from "../../../../common/utils";
+  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../common/js/constants";
+  import {hasRoles} from "../../../../common/js/utils";
 
   export default {
     name: "ApiRecentTest",
diff --git a/frontend/src/business/components/common/head/HeaderTopMenus.vue b/frontend/src/business/components/common/head/HeaderTopMenus.vue
index 4e72d6618f..0948411ee3 100644
--- a/frontend/src/business/components/common/head/HeaderTopMenus.vue
+++ b/frontend/src/business/components/common/head/HeaderTopMenus.vue
@@ -49,23 +49,6 @@
     }
   }
 </script>
-<style>
-  .header-top-menus.el-menu--horizontal > li {
-    height: 40px;
-    line-height: 40px;
-    color: inherit;
-  }
-
-  .header-top-menus.el-menu--horizontal > li.el-submenu > * {
-    height: 39px;
-    line-height: 40px;
-    color: inherit;
-  }
-
-  .header-top-menus.el-menu--horizontal > li.is-active {
-    background: #595591 !important;
-  }
-</style>
 <style scoped>
 
 </style>
diff --git a/frontend/src/business/components/common/head/HeaderUser.vue b/frontend/src/business/components/common/head/HeaderUser.vue
index b106d7bd7d..307b3a0fcb 100644
--- a/frontend/src/business/components/common/head/HeaderUser.vue
+++ b/frontend/src/business/components/common/head/HeaderUser.vue
@@ -43,8 +43,15 @@
 </template>
 
 <script>
-  import {ROLE_ORG_ADMIN, ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER, TokenKey, WORKSPACE_ID} from '../../../../common/constants';
-  import {hasRoles} from "../../../../common/utils";
+  import {
+    ROLE_ORG_ADMIN,
+    ROLE_TEST_MANAGER,
+    ROLE_TEST_USER,
+    ROLE_TEST_VIEWER,
+    TokenKey,
+    WORKSPACE_ID
+  } from '../../../../common/js/constants';
+  import {hasRoles} from "../../../../common/js/utils";
 
   export default {
     name: "MsUser",
@@ -147,13 +154,7 @@
     }
   }
 </script>
-<style>
-  .header-user-menu.el-menu--horizontal > li.el-submenu > * {
-    height: 40px;
-    line-height: 40px;
-    color: inherit;
-  }
-</style>
+
 <style scoped>
   .dropdown-link {
     cursor: pointer;
diff --git a/frontend/src/business/components/common/head/RecentList.vue b/frontend/src/business/components/common/head/RecentList.vue
index 46fa0d29f6..623961e340 100644
--- a/frontend/src/business/components/common/head/RecentList.vue
+++ b/frontend/src/business/components/common/head/RecentList.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-  import {hasRoles} from "../../../../common/utils";
-  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../common/constants";
+  import {hasRoles} from "../../../../common/js/utils";
+  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../common/js/constants";
 
   export default {
     name: "MsRecentList",
diff --git a/frontend/src/business/components/performance/head/PerformanceHeaderMenus.vue b/frontend/src/business/components/performance/head/PerformanceHeaderMenus.vue
index cf6448187d..ee6456c3d2 100644
--- a/frontend/src/business/components/performance/head/PerformanceHeaderMenus.vue
+++ b/frontend/src/business/components/performance/head/PerformanceHeaderMenus.vue
@@ -1,60 +1,64 @@
 <template>
 
   <div id="menu-bar" v-if="isRouterAlive">
-    <el-menu class="header-menu" :unique-opened="true" mode="horizontal" router
-             :default-active='$route.path'>
-      <el-menu-item :index="'/performance/home'">
-        {{ $t("i18n.home") }}
-      </el-menu-item>
+    <el-row type="flex">
+      <el-col :span="8">
+        <el-menu class="header-menu" :unique-opened="true" mode="horizontal" router
+                 :default-active='$route.path'>
+          <el-menu-item :index="'/performance/home'">
+            {{ $t("i18n.home") }}
+          </el-menu-item>
 
-      <el-submenu v-if="isCurrentWorkspaceUser"
-                  index="3" popper-class="submenu" v-permission="['test_manager']" >
-        <template v-slot:title>{{$t('commons.project')}}</template>
-        <performance-recent-project/>
-        <el-divider/>
-        <el-menu-item :index="'/performance/project/all'">
-          <font-awesome-icon :icon="['fa', 'list-ul']"/>
-          <span style="padding-left: 5px;">{{$t('commons.show_all')}}</span>
-        </el-menu-item>
-        <el-menu-item :index="'/performance/project/create'">
-          <el-button type="text">{{$t('project.create')}}</el-button>
-        </el-menu-item>
-      </el-submenu>
+          <el-submenu v-if="isCurrentWorkspaceUser"
+                      index="3" popper-class="submenu" v-permission="['test_manager']">
+            <template v-slot:title>{{$t('commons.project')}}</template>
+            <performance-recent-project/>
+            <el-divider/>
+            <el-menu-item :index="'/performance/project/all'">
+              <font-awesome-icon :icon="['fa', 'list-ul']"/>
+              <span style="padding-left: 5px;">{{$t('commons.show_all')}}</span>
+            </el-menu-item>
+            <el-menu-item :index="'/performance/project/create'">
+              <el-button type="text">{{$t('project.create')}}</el-button>
+            </el-menu-item>
+          </el-submenu>
 
-      <el-submenu v-if="isCurrentWorkspaceUser"
-                  index="4" popper-class="submenu" v-permission="['test_manager', 'test_user']">
-        <template v-slot:title>{{$t('commons.test')}}</template>
-        <performance-recent-test-plan/>
-        <el-divider/>
-        <el-menu-item :index="'/performance/test/all'">
-          <font-awesome-icon :icon="['fa', 'list-ul']"/>
-          <span style="padding-left: 5px;">{{$t('commons.show_all')}}</span>
-        </el-menu-item>
-        <el-menu-item :index="'/performance/test/create'">
-          <el-button type="text">{{$t('load_test.create')}}</el-button>
-        </el-menu-item>
-        <el-menu-item :index="testCaseProjectPath" class="blank_item"></el-menu-item>
-        <el-menu-item :index="testEditPath" class="blank_item"></el-menu-item>
-      </el-submenu>
+          <el-submenu v-if="isCurrentWorkspaceUser"
+                      index="4" popper-class="submenu" v-permission="['test_manager', 'test_user']">
+            <template v-slot:title>{{$t('commons.test')}}</template>
+            <performance-recent-test-plan/>
+            <el-divider/>
+            <el-menu-item :index="'/performance/test/all'">
+              <font-awesome-icon :icon="['fa', 'list-ul']"/>
+              <span style="padding-left: 5px;">{{$t('commons.show_all')}}</span>
+            </el-menu-item>
+            <el-menu-item :index="'/performance/test/create'">
+              <el-button type="text">{{$t('load_test.create')}}</el-button>
+            </el-menu-item>
+            <el-menu-item :index="testCaseProjectPath" class="blank_item"></el-menu-item>
+            <el-menu-item :index="testEditPath" class="blank_item"></el-menu-item>
+          </el-submenu>
 
-      <el-submenu v-if="isCurrentWorkspaceUser"
-                  index="5" popper-class="submenu" v-permission="['test_manager', 'test_user', 'test_viewer']">
-        <template v-slot:title>{{$t('commons.report')}}</template>
-        <performance-recent-report/>
-        <el-divider/>
-        <el-menu-item :index="'/performance/report/all'">
-          <font-awesome-icon :icon="['fa', 'list-ul']"/>
-          <span style="padding-left: 5px;">{{$t('commons.show_all')}}</span>
-        </el-menu-item>
-        <el-menu-item :index="reportViewPath" class="blank_item"></el-menu-item>
-      </el-submenu>
-
-      <router-link  v-if="isCurrentWorkspaceUser"
-                    class="header-bottom" :to="'/performance/test/create'" v-permission="['test_user','test_manager']">
-        <el-button type="primary" size="small">{{$t('load_test.create')}}</el-button>
-      </router-link>
-
-    </el-menu>
+          <el-submenu v-if="isCurrentWorkspaceUser"
+                      index="5" popper-class="submenu" v-permission="['test_manager', 'test_user', 'test_viewer']">
+            <template v-slot:title>{{$t('commons.report')}}</template>
+            <performance-recent-report/>
+            <el-divider/>
+            <el-menu-item :index="'/performance/report/all'">
+              <font-awesome-icon :icon="['fa', 'list-ul']"/>
+              <span style="padding-left: 5px;">{{$t('commons.show_all')}}</span>
+            </el-menu-item>
+            <el-menu-item :index="reportViewPath" class="blank_item"></el-menu-item>
+          </el-submenu>
+        </el-menu>
+      </el-col>
+      <el-col :span="8">
+        <el-row type="flex" justify="center">
+          <ms-create-test :show="isCurrentWorkspaceUser" :to="'/performance/test/create'"/>
+        </el-row>
+      </el-col>
+      <el-col :span="8"/>
+    </el-row>
   </div>
 
 </template>
@@ -64,11 +68,12 @@
   import PerformanceRecentTestPlan from "../../performance/test/PerformanceRecentTestPlan";
   import PerformanceRecentProject from "../../performance/project/PerformanceRecentProject";
   import PerformanceRecentReport from "../../performance/report/PerformanceRecentReport";
-  import {checkoutCurrentWorkspace} from "../../../../common/utils";
+  import {checkoutCurrentWorkspace} from "../../../../common/js/utils";
+  import MsCreateTest from "../../common/head/CreateTest";
 
   export default {
     name: "PerformanceHeaderMenus",
-    components: {PerformanceRecentReport, PerformanceRecentTestPlan, PerformanceRecentProject},
+    components: {PerformanceRecentReport, PerformanceRecentTestPlan, PerformanceRecentProject, MsCreateTest},
     data() {
       return {
         isCurrentWorkspaceUser: false,
@@ -85,22 +90,22 @@
       '$route'(to, from) {
         let path = to.path;
         //激活菜单栏
-        if (path.indexOf("/performance/test/") >= 0){
+        if (path.indexOf("/performance/test/") >= 0) {
           this.testCaseProjectPath = '/performance/test/' + this.$route.params.projectId;
           this.reload();
         }
-        if (path.indexOf("/performance/test/edit/") >= 0){
+        if (path.indexOf("/performance/test/edit/") >= 0) {
           this.testEditPath = '/performance/test/edit/' + this.$route.params.testId;
           this.reload();
         }
-        if (path.indexOf("/performance/report/view/") >= 0){
+        if (path.indexOf("/performance/report/view/") >= 0) {
           this.reportViewPath = '/performance/report/view/' + this.$route.params.reportId;
           this.reload();
         }
       }
     },
     methods: {
-      reload () {
+      reload() {
         this.isRouterAlive = false;
         this.$nextTick(function () {
           this.isRouterAlive = true;
@@ -111,33 +116,18 @@
 
 </script>
 
-<style>
-
-  .header-menu.el-menu--horizontal > li {
-    height: 39px;
-    line-height: 40px;
-    color: dimgray;
-  }
-
-  .header-menu.el-menu--horizontal > li.el-submenu > * {
-    height: 39px;
-    line-height: 40px;
-    color: dimgray;
-  }
-
-  .header-bottom {
-    line-height: 40px;
-    margin-left: 20%;
-  }
-
-</style>
-
 <style scoped>
   .el-divider--horizontal {
     margin: 0;
   }
+
+  .el-menu.el-menu--horizontal {
+    border-bottom: none;
+  }
+
   #menu-bar {
     border-bottom: 1px solid #E6E6E6;
+    background-color: #FFF;
   }
 
   .blank_item {
diff --git a/frontend/src/business/components/performance/project/PerformanceRecentProject.vue b/frontend/src/business/components/performance/project/PerformanceRecentProject.vue
index 9206552c5f..c43ea0775d 100644
--- a/frontend/src/business/components/performance/project/PerformanceRecentProject.vue
+++ b/frontend/src/business/components/performance/project/PerformanceRecentProject.vue
@@ -14,8 +14,8 @@
 
 <script>
 
-  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../common/constants";
-  import {hasRoles} from "../../../../common/utils";
+  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../common/js/constants";
+  import {hasRoles} from "../../../../common/js/utils";
 
   export default {
     name: "PerformanceRecentProject",
diff --git a/frontend/src/business/components/performance/report/PerformanceRecentReport.vue b/frontend/src/business/components/performance/report/PerformanceRecentReport.vue
index d913458bd1..fa3661d02f 100644
--- a/frontend/src/business/components/performance/report/PerformanceRecentReport.vue
+++ b/frontend/src/business/components/performance/report/PerformanceRecentReport.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../common/constants";
-  import {hasRoles} from "../../../../common/utils";
+  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../common/js/constants";
+  import {hasRoles} from "../../../../common/js/utils";
 
   export default {
     name: "PerformanceRecentReport",
diff --git a/frontend/src/business/components/performance/test/PerformanceRecentTestPlan.vue b/frontend/src/business/components/performance/test/PerformanceRecentTestPlan.vue
index e227cc23aa..b40773c56d 100644
--- a/frontend/src/business/components/performance/test/PerformanceRecentTestPlan.vue
+++ b/frontend/src/business/components/performance/test/PerformanceRecentTestPlan.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../common/constants";
+  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../common/js/constants";
 
   export default {
     name: "PerformanceRecentTestPlan",
diff --git a/frontend/src/business/components/project/MsProject.vue b/frontend/src/business/components/project/MsProject.vue
index 7c49f008a4..b2aa9e8c5c 100644
--- a/frontend/src/business/components/project/MsProject.vue
+++ b/frontend/src/business/components/project/MsProject.vue
@@ -67,7 +67,7 @@
 <script>
   import MsCreateBox from "../settings/CreateBox";
   import {Message} from "element-ui";
-  import {TokenKey} from "../../../common/constants";
+  import {TokenKey} from "../../../common/js/constants";
 
   export default {
     name: "MsProject",
diff --git a/frontend/src/business/components/settings/CurrentUser.vue b/frontend/src/business/components/settings/CurrentUser.vue
index 89b93eaede..0ecfb9058f 100644
--- a/frontend/src/business/components/settings/CurrentUser.vue
+++ b/frontend/src/business/components/settings/CurrentUser.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-  import {TokenKey} from "../../../common/constants";
+  import {TokenKey} from "../../../common/js/constants";
 
   export default {
     name: "MsCurrentUser",
diff --git a/frontend/src/business/components/settings/Setting.vue b/frontend/src/business/components/settings/Setting.vue
index cd31eb86e0..f131d9667d 100644
--- a/frontend/src/business/components/settings/Setting.vue
+++ b/frontend/src/business/components/settings/Setting.vue
@@ -51,14 +51,3 @@
   }
 </style>
 
-<style>
-  .main-content 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/settings/SettingMenu.vue b/frontend/src/business/components/settings/SettingMenu.vue
index eb4ec3d21b..57bce97947 100644
--- a/frontend/src/business/components/settings/SettingMenu.vue
+++ b/frontend/src/business/components/settings/SettingMenu.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-  import {checkoutCurrentOrganization, checkoutCurrentWorkspace} from "../../../common/utils";
+  import {checkoutCurrentOrganization, checkoutCurrentWorkspace} from "../../../common/js/utils";
 
   export default {
     name: "MsSettingMenu",
diff --git a/frontend/src/business/components/settings/organization/OrganizationMember.vue b/frontend/src/business/components/settings/organization/OrganizationMember.vue
index cdf0c8c64d..8758e32c2c 100644
--- a/frontend/src/business/components/settings/organization/OrganizationMember.vue
+++ b/frontend/src/business/components/settings/organization/OrganizationMember.vue
@@ -120,7 +120,7 @@
 
 <script>
   import MsCreateBox from "../CreateBox";
-  import {TokenKey} from "../../../../common/constants";
+  import {TokenKey} from "../../../../common/js/constants";
 
   export default {
     name: "MsOrganizationMember",
diff --git a/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue b/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
index e9ab866f25..fe5860bf4e 100644
--- a/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
+++ b/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
@@ -188,7 +188,7 @@
 <script>
   import MsCreateBox from "../CreateBox";
   import {Message} from "element-ui";
-  import {TokenKey} from "../../../../common/constants";
+  import {TokenKey} from "../../../../common/js/constants";
 
   export default {
     name: "MsOrganizationWorkspace",
diff --git a/frontend/src/business/components/settings/personal/PersonSetting.vue b/frontend/src/business/components/settings/personal/PersonSetting.vue
index fa0ff1d2b3..4ee53e7ca7 100644
--- a/frontend/src/business/components/settings/personal/PersonSetting.vue
+++ b/frontend/src/business/components/settings/personal/PersonSetting.vue
@@ -54,7 +54,7 @@
 </template>
 
 <script>
-  import {TokenKey} from "../../../../common/constants";
+  import {TokenKey} from "../../../../common/js/constants";
 
   export default {
     data() {
diff --git a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
index 4a5934c96d..2a5472abd6 100644
--- a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
+++ b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
@@ -120,7 +120,7 @@
 
 <script>
   import MsCreateBox from "../CreateBox";
-  import {TokenKey} from "../../../../common/constants";
+  import {TokenKey} from "../../../../common/js/constants";
 
   export default {
     name: "MsMember",
diff --git a/frontend/src/business/components/track/case/TestCase.vue b/frontend/src/business/components/track/case/TestCase.vue
index ef5d8dc8d4..9fc4e6c45f 100644
--- a/frontend/src/business/components/track/case/TestCase.vue
+++ b/frontend/src/business/components/track/case/TestCase.vue
@@ -51,7 +51,7 @@
 
   import NodeTree from './components/NodeTree';
   import TestCaseEdit from './components/TestCaseEdit';
-  import {WORKSPACE_ID,CURRENT_PROJECT} from '../../../../common/constants';
+  import {CURRENT_PROJECT, WORKSPACE_ID} from '../../../../common/js/constants';
   import TestCaseList from "./components/TestCaseList";
 
   export default {
diff --git a/frontend/src/business/components/track/case/components/NodeTree.vue b/frontend/src/business/components/track/case/components/NodeTree.vue
index 95634a3300..c01fc70780 100644
--- a/frontend/src/business/components/track/case/components/NodeTree.vue
+++ b/frontend/src/business/components/track/case/components/NodeTree.vue
@@ -68,7 +68,7 @@
 
 <script>
 
-  import {CURRENT_PROJECT} from '../../../../../common/constants';
+  import {CURRENT_PROJECT} from '../../../../../common/js/constants';
 
   export default {
     name: "NodeTree",
diff --git a/frontend/src/business/components/track/case/components/RecentTestCase.vue b/frontend/src/business/components/track/case/components/RecentTestCase.vue
index 4fb0801186..55e9b4f3b5 100644
--- a/frontend/src/business/components/track/case/components/RecentTestCase.vue
+++ b/frontend/src/business/components/track/case/components/RecentTestCase.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../../common/constants";
+  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../../common/js/constants";
 
   export default {
     name: "RecentTestCase",
diff --git a/frontend/src/business/components/track/case/components/TestCaseEdit.vue b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
index bec633700f..13c92d9fef 100644
--- a/frontend/src/business/components/track/case/components/TestCaseEdit.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
@@ -188,7 +188,7 @@
 
 <script>
 
-  import {CURRENT_PROJECT} from '../../../../../common/constants';
+  import {CURRENT_PROJECT} from '../../../../../common/js/constants';
 
   export default {
       name: "TestCaseEdit",
diff --git a/frontend/src/business/components/track/case/components/TestCaseList.vue b/frontend/src/business/components/track/case/components/TestCaseList.vue
index 10e52cd199..e07ce68a26 100644
--- a/frontend/src/business/components/track/case/components/TestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseList.vue
@@ -115,7 +115,6 @@
 </template>
 
 <script>
-  import {CURRENT_PROJECT} from '../../../../../common/constants';
 
   export default {
       name: "TestCaseList",
diff --git a/frontend/src/business/components/track/head/TrackHeaderMenus.vue b/frontend/src/business/components/track/head/TrackHeaderMenus.vue
index 4bc6e8cfe4..fdaf4c5a14 100644
--- a/frontend/src/business/components/track/head/TrackHeaderMenus.vue
+++ b/frontend/src/business/components/track/head/TrackHeaderMenus.vue
@@ -8,7 +8,7 @@
       </el-menu-item>
 
       <el-submenu v-if="isCurrentWorkspaceUser"
-                  index="3" popper-class="submenu" v-permission="['test_manager']" >
+                  index="3" popper-class="submenu" v-permission="['test_manager']">
         <template v-slot:title>{{$t('commons.project')}}</template>
         <track-recent-project/>
         <el-divider/>
@@ -54,7 +54,7 @@
 </template>
 <script>
 
-  import {checkoutCurrentWorkspace} from "../../../../common/utils";
+  import {checkoutCurrentWorkspace} from "../../../../common/js/utils";
   import TrackRecentProject from "../../track/project/TrackRecentProject";
   import RecentTestCase from "../case/components/RecentTestCase";
   import RecentTestPlan from "../plan/components/RecentTestPlan";
@@ -73,11 +73,11 @@
     watch: {
       '$route'(to, from) {
         let path = to.path;
-        if (path.indexOf("/track/plan/view") >= 0){
+        if (path.indexOf("/track/plan/view") >= 0) {
           this.testPlanViewPath = '/track/plan/view/' + this.$route.params.planId;
           this.reload();
         }
-        if (path.indexOf("/track/case/edit") >= 0){
+        if (path.indexOf("/track/case/edit") >= 0) {
           this.testCaseEditPath = '/track/case/edit/' + this.$route.params.caseId;
           this.reload();
         }
@@ -87,7 +87,7 @@
       this.isCurrentWorkspaceUser = checkoutCurrentWorkspace();
     },
     methods: {
-      reload () {
+      reload() {
         this.isRouterAlive = false;
         this.$nextTick(function () {
           this.isRouterAlive = true;
@@ -98,34 +98,11 @@
 
 </script>
 
-
-<style>
-
-  .header-menu.el-menu--horizontal > li {
-    height: 39px;
-    line-height: 40px;
-    color: dimgray;
-  }
-
-  .header-menu.el-menu--horizontal > li.el-submenu > * {
-    height: 39px;
-    line-height: 40px;
-    color: dimgray;
-  }
-
-  .header-bottom {
-    line-height: 40px;
-    margin-left: 20%;
-  }
-
-
-
-</style>
-
 <style scoped>
   .el-divider--horizontal {
     margin: 0;
   }
+
   #menu-bar {
     border-bottom: 1px solid #E6E6E6;
   }
diff --git a/frontend/src/business/components/track/plan/components/RecentTestPlan.vue b/frontend/src/business/components/track/plan/components/RecentTestPlan.vue
index 8dfff4e1b2..96f6e05d41 100644
--- a/frontend/src/business/components/track/plan/components/RecentTestPlan.vue
+++ b/frontend/src/business/components/track/plan/components/RecentTestPlan.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../../common/constants";
+  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../../common/js/constants";
 
   export default {
     name: "RecentTestPlan",
diff --git a/frontend/src/business/components/track/plan/components/TestPlanEdit.vue b/frontend/src/business/components/track/plan/components/TestPlanEdit.vue
index b1fe2a0969..0646b838b4 100644
--- a/frontend/src/business/components/track/plan/components/TestPlanEdit.vue
+++ b/frontend/src/business/components/track/plan/components/TestPlanEdit.vue
@@ -99,7 +99,7 @@
 
 <script>
 
-  import {WORKSPACE_ID} from '../../../../../common/constants';
+  import {WORKSPACE_ID} from '../../../../../common/js/constants';
 
   export default {
       name: "TestPlanEdit",
diff --git a/frontend/src/business/components/track/project/TrackRecentProject.vue b/frontend/src/business/components/track/project/TrackRecentProject.vue
index 71ca9fd860..c21e28edf8 100644
--- a/frontend/src/business/components/track/project/TrackRecentProject.vue
+++ b/frontend/src/business/components/track/project/TrackRecentProject.vue
@@ -13,8 +13,8 @@
 </template>
 <script>
 
-  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER, CURRENT_PROJECT} from "../../../../common/constants";
-  import {hasRoles} from "../../../../common/utils";
+  import {CURRENT_PROJECT, ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../common/js/constants";
+  import {hasRoles} from "../../../../common/js/utils";
 
   export default {
     name: "TrackRecentProject",
diff --git a/frontend/src/business/main.js b/frontend/src/business/main.js
index c44d93feff..b4cb573c01 100644
--- a/frontend/src/business/main.js
+++ b/frontend/src/business/main.js
@@ -1,16 +1,17 @@
 import Vue from 'vue';
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
-import icon from "../common/icon";
-import filters from "../common/filter";
-import ajax from "../common/ajax";
+import icon from "../common/js/icon";
+import filters from "../common/js/filter";
+import ajax from "../common/js/ajax";
 import App from './App.vue';
 import router from "./components/common/router/router";
 import './permission' // permission control
 import i18n from "../i18n/i18n";
 import store from "./store";
 import {permission} from './permission'
-import chart from "../common/chart";
+import chart from "../common/js/chart";
+import '../common/css/menu-header.css';
 
 Vue.config.productionTip = false;
 Vue.use(icon);
diff --git a/frontend/src/business/permission.js b/frontend/src/business/permission.js
index 7c4ca536da..21f584f30f 100644
--- a/frontend/src/business/permission.js
+++ b/frontend/src/business/permission.js
@@ -1,5 +1,5 @@
 import router from './components/common/router/router'
-import {TokenKey} from '../common/constants';
+import {TokenKey} from '../common/js/constants';
 
 const whiteList = ['/login']; // no redirect whitelist
 
diff --git a/frontend/src/common/css/menu-header.css b/frontend/src/common/css/menu-header.css
new file mode 100644
index 0000000000..618300fb84
--- /dev/null
+++ b/frontend/src/common/css/menu-header.css
@@ -0,0 +1,47 @@
+.header-menu.el-menu--horizontal > li {
+  height: 39px;
+  line-height: 40px;
+  color: dimgray;
+}
+
+.header-menu.el-menu--horizontal > li.el-submenu > * {
+  height: 39px;
+  line-height: 40px;
+  color: dimgray;
+}
+
+.header-user-menu.el-menu--horizontal > li.el-submenu > * {
+  height: 40px;
+  line-height: 40px;
+  color: inherit;
+}
+body {
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  font-size: 14px;
+  margin: 0;
+}
+.main-content span.title {
+  font-size: 16px;
+  font-weight: 500;
+  margin-top: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-wrap: break-word;
+  white-space: nowrap;
+}
+
+.header-top-menus.el-menu--horizontal > li {
+  height: 40px;
+  line-height: 40px;
+  color: inherit;
+}
+
+.header-top-menus.el-menu--horizontal > li.el-submenu > * {
+  height: 39px;
+  line-height: 40px;
+  color: inherit;
+}
+
+.header-top-menus.el-menu--horizontal > li.is-active {
+  background: #595591 !important;
+}
diff --git a/frontend/src/common/ajax.js b/frontend/src/common/js/ajax.js
similarity index 100%
rename from frontend/src/common/ajax.js
rename to frontend/src/common/js/ajax.js
diff --git a/frontend/src/common/chart.js b/frontend/src/common/js/chart.js
similarity index 100%
rename from frontend/src/common/chart.js
rename to frontend/src/common/js/chart.js
diff --git a/frontend/src/common/constants.js b/frontend/src/common/js/constants.js
similarity index 100%
rename from frontend/src/common/constants.js
rename to frontend/src/common/js/constants.js
diff --git a/frontend/src/common/filter.js b/frontend/src/common/js/filter.js
similarity index 100%
rename from frontend/src/common/filter.js
rename to frontend/src/common/js/filter.js
diff --git a/frontend/src/common/icon.js b/frontend/src/common/js/icon.js
similarity index 100%
rename from frontend/src/common/icon.js
rename to frontend/src/common/js/icon.js
diff --git a/frontend/src/common/utils.js b/frontend/src/common/js/utils.js
similarity index 100%
rename from frontend/src/common/utils.js
rename to frontend/src/common/js/utils.js
diff --git a/frontend/src/login/Login.vue b/frontend/src/login/Login.vue
index 9889b81d86..5116a483f0 100644
--- a/frontend/src/login/Login.vue
+++ b/frontend/src/login/Login.vue
@@ -41,7 +41,7 @@
 </template>
 
 <script>
-  import {TokenKey} from '../common/constants';
+  import {TokenKey} from '../common/js/constants';
 
 
   export default {
diff --git a/frontend/src/login/login.js b/frontend/src/login/login.js
index 955cb94982..48e9262849 100644
--- a/frontend/src/login/login.js
+++ b/frontend/src/login/login.js
@@ -2,7 +2,7 @@ import Vue from 'vue';
 import ElementUI, {Button, Col, Form, FormItem, Input, Row} from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import Login from "./Login.vue";
-import Ajax from "../common/ajax";
+import Ajax from "../common/js/ajax";
 import i18n from "../i18n/i18n";
 
 Vue.config.productionTip = false;