diff --git a/frontend/src/business/components/api/head/ApiHeaderMenus.vue b/frontend/src/business/components/api/head/ApiHeaderMenus.vue
index 65420495e0..b2aebbfdf9 100644
--- a/frontend/src/business/components/api/head/ApiHeaderMenus.vue
+++ b/frontend/src/business/components/api/head/ApiHeaderMenus.vue
@@ -4,7 +4,8 @@
       <el-col :span="14">
         <el-menu class="header-menu" :unique-opened="true" mode="horizontal" router :default-active='$route.path'>
 
-          <el-submenu :class="{'deactivation':!isProjectActivation}" v-permission="['test_manager','test_user','test_viewer']" index="3">
+          <el-submenu :class="{'deactivation':!isProjectActivation}"
+                      v-permission="['test_manager','test_user','test_viewer']" index="3">
             <template v-slot:title>{{ $t('commons.project') }}</template>
             <search-list ref="projectRecent" :options="projectRecent"/>
             <el-divider class="menu-divider"/>
@@ -19,19 +20,20 @@
             {{ $t("i18n.home") }}
           </el-menu-item>
 
-          <el-menu-item :index="'/api/definition'">
+          <el-menu-item v-show="$store.state.switch.value=='new'" :index="'/api/definition'">
             {{ $t("i18n.definition") }}
           </el-menu-item>
 
-          <el-menu-item :index="'/api/automation'">
+          <el-menu-item v-show="$store.state.switch.value=='new'" :index="'/api/automation'">
             {{ $t("i18n.automation") }}
           </el-menu-item>
 
-          <el-menu-item :index="'/api/automation/report'">
+          <el-menu-item v-show="$store.state.switch.value=='new'" :index="'/api/automation/report'">
             {{ $t("i18n.report") }}
           </el-menu-item>
 
-          <el-submenu v-permission="['test_manager','test_user','test_viewer']" index="4">
+          <el-submenu v-show="$store.state.switch.value=='old'"
+                      v-permission="['test_manager','test_user','test_viewer']" index="4">
             <template v-slot:title>{{ $t('commons.test') }}</template>
             <ms-recent-list ref="testRecent" :options="testRecent"/>
             <el-divider class="menu-divider"/>
@@ -41,7 +43,8 @@
                               :title="$t('load_test.create')"/>
           </el-submenu>
 
-          <el-submenu v-permission="['test_manager','test_user','test_viewer']" index="5">
+          <el-submenu v-show="$store.state.switch.value=='old'"
+                      v-permission="['test_manager','test_user','test_viewer']" index="5">
             <template v-slot:title>{{ $t('commons.report') }}</template>
             <ms-recent-list ref="reportRecent" :options="reportRecent"/>
             <el-divider class="menu-divider"/>
@@ -49,7 +52,8 @@
           </el-submenu>
 
 
-          <el-menu-item v-permission="['test_manager','test_user','test_viewer']" :index="'/api/monitor/view'">
+          <el-menu-item v-show="$store.state.switch.value=='new'"
+                        v-permission="['test_manager','test_user','test_viewer']" :index="'/api/monitor/view'">
             {{ $t('commons.monitor') }}
           </el-menu-item>
         </el-menu>
@@ -112,10 +116,11 @@ export default {
       apiTestProjectPath: '',
     }
   },
+
   watch: {
     '$route'(to) {
       this.init();
-    }
+    },
   },
   methods: {
     registerEvents() {
@@ -156,20 +161,20 @@ export default {
 </script>
 
 <style scoped>
-  #menu-bar {
-    border-bottom: 1px solid #E6E6E6;
-    background-color: #FFF;
-  }
+#menu-bar {
+  border-bottom: 1px solid #E6E6E6;
+  background-color: #FFF;
+}
 
-  .menu-divider {
-    margin: 0;
-  }
+.menu-divider {
+  margin: 0;
+}
 
-  .blank_item {
-    display: none;
-  }
+.blank_item {
+  display: none;
+}
 
-  .deactivation >>> .el-submenu__title {
-    border-bottom: white !important;
-  }
+.deactivation >>> .el-submenu__title {
+  border-bottom: white !important;
+}
 </style>
diff --git a/frontend/src/business/components/common/head/HeaderUser.vue b/frontend/src/business/components/common/head/HeaderUser.vue
index 0d5d0dbb74..e742dcd6c6 100644
--- a/frontend/src/business/components/common/head/HeaderUser.vue
+++ b/frontend/src/business/components/common/head/HeaderUser.vue
@@ -5,10 +5,16 @@
     </span>
     <template v-slot:dropdown>
       <el-dropdown-menu>
-        <el-dropdown-item command="personal">{{$t('commons.personal_information')}}</el-dropdown-item>
-        <el-dropdown-item command="about">{{$t('commons.about_us')}} <i class="el-icon-info"/></el-dropdown-item>
-        <el-dropdown-item command="help">{{$t('commons.help_documentation')}}</el-dropdown-item>
-        <el-dropdown-item command="logout">{{$t('commons.exit_system')}}</el-dropdown-item>
+        <el-dropdown-item command="personal">{{ $t('commons.personal_information') }}</el-dropdown-item>
+        <el-dropdown-item command="about">{{ $t('commons.about_us') }} <i class="el-icon-info"/></el-dropdown-item>
+        <el-dropdown-item command="help">{{ $t('commons.help_documentation') }}</el-dropdown-item>
+        <el-dropdown-item command="old" :disabled=!isReadOnly @click.native="changeBar('old')">
+          {{ $t('commons.cut_back_old_version') }}
+        </el-dropdown-item>
+        <el-dropdown-item command="new" :disabled=isReadOnly @click.native="changeBar('new')">
+          {{ $t('commons.cut_back_new_version') }}
+        </el-dropdown-item>
+        <el-dropdown-item command="logout">{{ $t('commons.exit_system') }}</el-dropdown-item>
       </el-dropdown-menu>
     </template>
 
@@ -24,6 +30,11 @@
   export default {
     name: "MsUser",
     components: {AboutUs},
+    data() {
+      return {
+        isReadOnly: true
+      }
+    },
     computed: {
       currentUser: () => {
         return getCurrentUser();
@@ -61,6 +72,10 @@
           default:
             break;
         }
+      },
+      changeBar(item) {
+        this.isReadOnly = !this.isReadOnly
+        this.$store.commit('setValue', item);
       }
     }
   }
diff --git a/frontend/src/business/store.js b/frontend/src/business/store.js
index eb11bb79ce..e90093754e 100644
--- a/frontend/src/business/store.js
+++ b/frontend/src/business/store.js
@@ -28,9 +28,21 @@ const API = {
   }
 }
 
+const Switch = {
+  state: {
+    value: "new"
+  },
+  mutations: {
+    setValue(state, value) {
+      state.value = value;
+    }
+  }
+}
+
 export default new Vuex.Store({
   modules: {
     api: API,
-    common: Common
+    common: Common,
+    switch: Switch,
   }
 })
diff --git a/frontend/src/i18n/en-US.js b/frontend/src/i18n/en-US.js
index 8b08620ce3..df571e2b97 100644
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@@ -1,5 +1,7 @@
 export default {
   commons: {
+    cut_back_old_version: 'Cut back to old version',
+    cut_back_new_version: 'Switch back to new version',
     comment: 'comment',
     examples: 'examples',
     help_documentation: 'Help documentation',
diff --git a/frontend/src/i18n/zh-CN.js b/frontend/src/i18n/zh-CN.js
index b61350a48a..987d798c0d 100644
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@@ -1,5 +1,7 @@
 export default {
   commons: {
+    cut_back_old_version: '切回旧版',
+    cut_back_new_version: '切回新版',
     comment: '评论',
     examples: '示例',
     help_documentation: '帮助文档',
@@ -278,7 +280,7 @@ export default {
       verified: '验证通过'
     }
   },
-  project: {
+  edit: {
     recent: '最近的项目',
     create: '创建项目',
     edit: '编辑项目',
diff --git a/frontend/src/i18n/zh-TW.js b/frontend/src/i18n/zh-TW.js
index 4578115771..1ef3cc4814 100644
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@@ -1,5 +1,7 @@
 export default {
   commons: {
+    cut_back_old_version: '切回舊版',
+    cut_back_new_version: '切回新版',
     comment: '評論',
     examples: '示例',
     help_documentation: '幫助文檔',