diff --git a/frontend/src/business/components/api/project/ApiRecentProject.vue b/frontend/src/business/components/api/project/ApiRecentProject.vue
deleted file mode 100644
index 658798546e..0000000000
--- a/frontend/src/business/components/api/project/ApiRecentProject.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <div>
-    <div class="recent-text">
-      <i class="el-icon-time"/>
-      <span>{{$t('project.recent')}}</span>
-    </div>
-    <el-menu-item :key="p.id" v-for="p in recentProjects"
-                  :index="'/api/' + p.id" :route="{name:'fucPlan', params:{projectId:p.id, projectName:p.name}}">
-      <span class="title">{{ p.name }}</span>
-    </el-menu-item>
-  </div>
-</template>
-
-<script>
-
-  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../common/js/constants";
-  import {hasRoles} from "../../../../common/js/utils";
-
-  export default {
-    name: "ApiRecentProject",
-    mounted() {
-      if (hasRoles(ROLE_TEST_VIEWER, ROLE_TEST_USER, ROLE_TEST_MANAGER)) {
-        this.$get('/project/recent/5', (response) => {
-          this.recentProjects = response.data;
-        });
-      }
-    },
-    methods: {},
-    data() {
-      return {
-        recentProjects: [],
-      }
-    }
-  }
-</script>
-
-<style scoped>
-  .recent-text {
-    padding: 0 10px;
-    margin-top: -5px;
-    line-height: 36px;
-    color: #777777;
-    background-color: #F5F5F5;
-  }
-
-  .recent-text span {
-    padding-left: 6px;
-  }
-
-  .title {
-    padding-left: 20px;
-  }
-</style>
diff --git a/frontend/src/business/components/api/report/ApiRecentReport.vue b/frontend/src/business/components/api/report/ApiRecentReport.vue
deleted file mode 100644
index c5ae922965..0000000000
--- a/frontend/src/business/components/api/report/ApiRecentReport.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <div>
-    <div class="recent-text">
-      <i class="el-icon-time"/>
-      <span>{{$t('load_test.recent')}}</span>
-    </div>
-    <el-menu-item :key="p.id" v-for="p in recentReports"
-                  :index="'/api/report/view/' + p.id" :route="{path: '/api/report/view/' + p.id}">
-      <span class="title">{{ p.name }}</span>
-    </el-menu-item>
-  </div>
-</template>
-
-<script>
-  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../common/js/constants";
-
-  export default {
-    name: "ApiRecentReport",
-    mounted() {
-      const rolesString = localStorage.getItem("roles");
-      const roles = rolesString.split(',');
-
-      if (roles.indexOf(ROLE_TEST_MANAGER) > -1 || roles.indexOf(ROLE_TEST_USER) > -1 || roles.indexOf(ROLE_TEST_VIEWER) > -1) {
-        this.$get('/api/report/recent/5', (response) => {
-          this.recentReports = response.data;
-        });
-      }
-    },
-    methods: {},
-    data() {
-      return {
-        recentReports: [],
-      }
-    }
-  }
-</script>
-
-<style scoped>
-  .recent-text {
-    padding: 0 10px;
-    margin-top: -5px;
-    line-height: 36px;
-    color: #777777;
-    background-color: #F5F5F5;
-  }
-
-  .recent-text span {
-    padding-left: 6px;
-  }
-
-  .title {
-    padding-left: 20px;
-  }
-</style>
diff --git a/frontend/src/business/components/api/report/ApiTestReport.vue b/frontend/src/business/components/api/report/ApiTestReport.vue
index 43b49abb83..f9ddf554e0 100644
--- a/frontend/src/business/components/api/report/ApiTestReport.vue
+++ b/frontend/src/business/components/api/report/ApiTestReport.vue
@@ -1,6 +1,5 @@
 <template>
-  <div class="testreport-container" v-loading="result.loading">
-
+  <div class="container" v-loading="result.loading">
     <div class="main-content">
       <el-card>
         <template v-slot:header>
@@ -75,7 +74,6 @@
         </div>
       </el-card>
     </div>
-
   </div>
 </template>
 
@@ -145,7 +143,7 @@
         });
       },
       _handleDelete(report) {
-        this.result = this.$post(this.deletePath + report.id, {},() => {
+        this.result = this.$post(this.deletePath + report.id, {}, () => {
           this.$message({
             message: this.$t('commons.delete_success'),
             type: 'success'
@@ -158,20 +156,6 @@
 </script>
 
 <style scoped>
-
-  .testreport-container {
-    padding: 15px;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-  }
-
-  .main-content {
-    margin: 0 auto;
-    width: 100%;
-    max-width: 1200px;
-  }
-
   .test-content {
     width: 100%;
   }
diff --git a/frontend/src/business/components/api/test/ApiRecentTest.vue b/frontend/src/business/components/api/test/ApiRecentTest.vue
deleted file mode 100644
index 125ad5b109..0000000000
--- a/frontend/src/business/components/api/test/ApiRecentTest.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <el-menu router menu-trigger="click" :default-active="$route.path">
-    <div class="recent-text">
-      <i class="el-icon-time"/>
-      {{$t('load_test.recent')}}
-    </div>
-    <el-menu-item :key="t.id" v-for="t in recentTestPlans" :index="'/api/test/edit/' + t.id">
-      {{ t.name }}
-    </el-menu-item>
-  </el-menu>
-</template>
-
-<script>
-  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../common/js/constants";
-  import {hasRoles} from "../../../../common/js/utils";
-
-  export default {
-    name: "ApiRecentTest",
-    mounted() {
-
-      if (hasRoles(ROLE_TEST_VIEWER, ROLE_TEST_USER, ROLE_TEST_MANAGER)) {
-        this.$get('/api/recent/5', (response) => {
-          this.recentTestPlans = response.data;
-        });
-      }
-
-    },
-    data() {
-      return {
-        recentTestPlans: []
-      }
-    }
-  }
-</script>
-
-<style scoped>
-  .recent-text {
-    padding-left: 10%;
-    color: #777777;
-  }
-</style>
diff --git a/frontend/src/business/components/api/test/ApiTestList.vue b/frontend/src/business/components/api/test/ApiTestList.vue
index 9922002b34..ca3f38bc8e 100644
--- a/frontend/src/business/components/api/test/ApiTestList.vue
+++ b/frontend/src/business/components/api/test/ApiTestList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="testplan-container" v-loading="result.loading">
+  <div class="container" v-loading="result.loading">
     <div class="main-content">
       <el-card>
         <template v-slot:header>
@@ -172,19 +172,6 @@
 </script>
 
 <style scoped>
-  .testplan-container {
-    padding: 15px;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-  }
-
-  .main-content {
-    margin: 0 auto;
-    width: 100%;
-    max-width: 1200px;
-  }
-
   .test-content {
     width: 100%;
   }
diff --git a/frontend/src/business/components/project/MsProject.vue b/frontend/src/business/components/project/MsProject.vue
index b2aa9e8c5c..5bd421e82e 100644
--- a/frontend/src/business/components/project/MsProject.vue
+++ b/frontend/src/business/components/project/MsProject.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="project-container">
+  <div class="container">
     <div class="main-content">
       <el-card v-loading="result.loading">
         <template v-slot:header>
@@ -193,18 +193,6 @@
 </script>
 
 <style scoped>
-  .project-container {
-    padding: 15px;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-  }
-
-  .main-content {
-    margin: 0 auto;
-    width: 100%;
-    max-width: 1200px;
-  }
 
   .table-page {
     padding-top: 20px;
diff --git a/frontend/src/business/main.js b/frontend/src/business/main.js
index b4cb573c01..6c4e3a6c4e 100644
--- a/frontend/src/business/main.js
+++ b/frontend/src/business/main.js
@@ -12,6 +12,7 @@ import store from "./store";
 import {permission} from './permission'
 import chart from "../common/js/chart";
 import '../common/css/menu-header.css';
+import '../common/css/main.css';
 
 Vue.config.productionTip = false;
 Vue.use(icon);
diff --git a/frontend/src/common/css/main.css b/frontend/src/common/css/main.css
new file mode 100644
index 0000000000..af7722228b
--- /dev/null
+++ b/frontend/src/common/css/main.css
@@ -0,0 +1,11 @@
+.container {
+  padding: 15px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.main-content {
+  margin: 0 auto;
+  width: 100%;
+}