diff --git a/web+/src/layout/components/TagsView/index.vue b/web+/src/layout/components/TagsView/index.vue
index 1803e0e..9383dc7 100644
--- a/web+/src/layout/components/TagsView/index.vue
+++ b/web+/src/layout/components/TagsView/index.vue
@@ -47,7 +47,6 @@ import ScrollPane from './ScrollPane.vue'
 import path from 'path-browserify'
 import { defineComponent } from 'vue'
 import { mapState } from 'vuex'
-import { deepClone } from '@/utils'
 
 export default defineComponent({
   components: { ScrollPane },
diff --git a/web+/src/layout/mixin/ResizeHandler.ts b/web+/src/layout/mixin/ResizeHandler.ts
index f8ba0ba..53ad6c5 100644
--- a/web+/src/layout/mixin/ResizeHandler.ts
+++ b/web+/src/layout/mixin/ResizeHandler.ts
@@ -2,11 +2,16 @@ import store from '@/store'
 
 const { body } = document
 const WIDTH = 992 // refer to Bootstrap's responsive design
+import { mapState } from 'vuex'
 import { defineComponent } from 'vue'
+
 export default defineComponent({
+  computed: {
+    ...mapState(['app']),
+  },
   watch: {
     $route() {
-      if (this.device === 'mobile' && this.sidebar.opened) {
+      if (this.app.device === 'mobile' && this.app.sidebar.opened) {
         store.dispatch('app/closeSideBar', { withoutAnimation: false })
       }
     },
diff --git a/web+/src/styles/element-ui.scss b/web+/src/styles/element-ui.scss
index 38c843f..493ef51 100644
--- a/web+/src/styles/element-ui.scss
+++ b/web+/src/styles/element-ui.scss
@@ -5,6 +5,11 @@
   }
 }
 
+.el-message-box {
+	width: 98%!important;
+	max-width: 420px;
+}
+
 .el-breadcrumb__inner,
 .el-breadcrumb__inner a {
   font-weight: 400 !important;
diff --git a/web+/src/views/member/index.vue b/web+/src/views/member/index.vue
index 5ce33ec..4b18712 100644
--- a/web+/src/views/member/index.vue
+++ b/web+/src/views/member/index.vue
@@ -45,6 +45,7 @@
         :label="$t('op')"
         width="130"
         align="center"
+        fixed="right"
       >
         <template #default="scope">
           <el-button
@@ -72,12 +73,19 @@
         @current-change="handleCurrentChange"
       />
     </el-row>
-    <el-dialog v-model="dialogVisible" :title="$t('setting')">
+    <el-dialog
+      v-model="dialogVisible"
+      :fullscreen="$store.state.app.device === 'mobile'"
+      :title="$t('setting')"
+    >
       <el-form
         ref="form"
         :rules="formRules"
         :model="formData"
         label-width="80px"
+        :label-position="
+          $store.state.app.device === 'desktop' ? 'right' : 'top'
+        "
       >
         <el-form-item :label="$t('account')" prop="account">
           <el-input v-model="formData.account" autocomplete="off" />
diff --git a/web+/src/views/namespace/components/TheUserDialog.vue b/web+/src/views/namespace/components/TheUserDialog.vue
index 06c68da..0212006 100644
--- a/web+/src/views/namespace/components/TheUserDialog.vue
+++ b/web+/src/views/namespace/components/TheUserDialog.vue
@@ -3,6 +3,7 @@
     v-model="dialogVisible"
     :title="$t('manage')"
     :close-on-click-modal="false"
+    :fullscreen="$store.state.app.device === 'mobile'"
   >
     <el-row class="app-bar" type="flex" justify="end">
       <el-button type="primary" icon="el-icon-plus" @click="handleAdd" />
@@ -98,6 +99,7 @@
         :label="$t('op')"
         width="80"
         align="center"
+        fixed="right"
       >
         <template #default="scope">
           <el-button
diff --git a/web+/src/views/namespace/index.vue b/web+/src/views/namespace/index.vue
index 63c7cc6..f49e7ca 100644
--- a/web+/src/views/namespace/index.vue
+++ b/web+/src/views/namespace/index.vue
@@ -18,7 +18,7 @@
       :data="tableData"
       style="width: 100%"
     >
-      <el-table-column prop="id" label="ID" width="160" />
+      <el-table-column prop="id" label="ID" width="80" />
       <el-table-column prop="name" :label="$t('name')" />
       <el-table-column
         prop="insertTime"
@@ -37,6 +37,7 @@
         :label="$t('member')"
         width="80"
         align="center"
+        fixed="right"
       >
         <template #default="scope">
           <el-button type="text" @click="handleUser(scope.row)">
@@ -49,6 +50,7 @@
         :label="$t('op')"
         width="80"
         align="center"
+        fixed="right"
       >
         <template #default="scope">
           <el-button
@@ -69,12 +71,19 @@
         @current-change="handlePageChange"
       />
     </el-row>
-    <el-dialog v-model="dialogVisible" :title="$t('setting')">
+    <el-dialog
+      v-model="dialogVisible"
+      :title="$t('setting')"
+      :fullscreen="$store.state.app.device === 'mobile'"
+    >
       <el-form
         ref="form"
         :rules="formRules"
         :model="formData"
         label-width="80px"
+        :label-position="
+          $store.state.app.device === 'desktop' ? 'right' : 'top'
+        "
       >
         <el-form-item :label="$t('name')" prop="name">
           <el-input v-model="formData.name" autocomplete="off" />
diff --git a/web+/src/views/server/crontab/TheImportDialog.vue b/web+/src/views/server/crontab/TheImportDialog.vue
index 2113811..152af95 100644
--- a/web+/src/views/server/crontab/TheImportDialog.vue
+++ b/web+/src/views/server/crontab/TheImportDialog.vue
@@ -3,6 +3,7 @@
     v-model="dialogVisible"
     :title="$t('import')"
     :close-on-click-modal="false"
+    :fullscreen="$store.state.app.device === 'mobile'"
   >
     <el-row>
       <el-row type="flex" style="width: 100%">
diff --git a/web+/src/views/server/crontab/TheServerDialog.vue b/web+/src/views/server/crontab/TheServerDialog.vue
index d01b5e0..b8a7578 100644
--- a/web+/src/views/server/crontab/TheServerDialog.vue
+++ b/web+/src/views/server/crontab/TheServerDialog.vue
@@ -3,6 +3,7 @@
     v-model="dialogVisible"
     :title="$t('manage')"
     :close-on-click-modal="false"
+    :fullscreen="$store.state.app.device === 'mobile'"
   >
     <el-row class="app-bar" type="flex" justify="end">
       <el-button type="primary" icon="el-icon-plus" @click="handleAdd" />
@@ -15,7 +16,7 @@
         <el-form ref="form" :inline="true" :rules="formRules" :model="formData">
           <el-form-item
             :label="$t('server')"
-            label-width="120px"
+            label-width="80px"
             prop="serverIds"
           >
             <el-select v-model="formData.serverIds" multiple>
@@ -79,6 +80,7 @@
         :label="$t('op')"
         width="80"
         align="center"
+        fixed="right"
       >
         <template #default="scope">
           <el-button
diff --git a/web+/src/views/server/crontab/index.vue b/web+/src/views/server/crontab/index.vue
index cfc657b..7628d85 100644
--- a/web+/src/views/server/crontab/index.vue
+++ b/web+/src/views/server/crontab/index.vue
@@ -1,15 +1,15 @@
 <template>
   <el-row class="app-container">
     <el-row class="app-bar" type="flex" justify="space-between">
-      <el-row>
+      <el-col :span="16">
         <el-input
           v-model="crontabCommand"
-          style="width: 200px"
+          style="width: 150px"
           placeholder="Fitler the command"
         />
         <el-button type="primary" icon="el-icon-search" @click="searchList" />
-      </el-row>
-      <el-row>
+      </el-col>
+      <el-col :span="8" style="text-align: right">
         <el-tooltip effect="dark" :content="$t('import')" placement="top">
           <el-button
             type="primary"
@@ -18,7 +18,7 @@
           />
         </el-tooltip>
         <el-button type="primary" icon="el-icon-plus" @click="handleAdd" />
-      </el-row>
+      </el-col>
     </el-row>
     <el-table
       v-loading="tableLoading"
@@ -60,6 +60,7 @@
         width="80"
         :label="$t('server')"
         align="center"
+        fixed="right"
       >
         <template #default="scope">
           <el-button type="text" @click="handleServer(scope.row)">{{
@@ -98,13 +99,20 @@
         @current-change="handlePageChange"
       />
     </el-row>
-    <el-dialog v-model="dialogVisible" :title="$t('setting')">
+    <el-dialog
+      v-model="dialogVisible"
+      :fullscreen="$store.state.app.device === 'mobile'"
+      :title="$t('setting')"
+    >
       <el-form
         ref="form"
         v-loading="formProps.loading"
         :rules="formRules"
         :model="formData"
         label-width="80px"
+        :label-position="
+          $store.state.app.device === 'desktop' ? 'right' : 'top'
+        "
       >
         <el-form-item :label="$t('time')" prop="date">
           <el-input
@@ -155,6 +163,7 @@
       v-model="crontabRemoveVisible"
       :title="$t('remove')"
       width="500px"
+      :fullscreen="$store.state.app.device === 'mobile'"
     >
       <el-form
         ref="crontabRemoveForm"
@@ -179,8 +188,9 @@
           :disabled="crontabRemoveFormProps.disabled"
           type="primary"
           @click="remove"
-          >{{ $t('confirm') }}</el-button
         >
+          {{ $t('confirm') }}
+        </el-button>
       </template>
     </el-dialog>
     <TheImportDialog
diff --git a/web+/src/views/server/manage/TheXtermDrawer.vue b/web+/src/views/server/manage/TheXtermDrawer.vue
index 2b70034..3c9eb81 100644
--- a/web+/src/views/server/manage/TheXtermDrawer.vue
+++ b/web+/src/views/server/manage/TheXtermDrawer.vue
@@ -3,6 +3,7 @@
     ref="drawer"
     v-model="drawerVisible"
     :title="`${serverRow.name}(${serverRow.description})`"
+    :direction="$store.state.app.device === 'mobile' ? 'ttb' : 'rtl'"
     @opened="connectTerminal"
     @closed="closeTerminal"
   >
diff --git a/web+/src/views/server/manage/index.vue b/web+/src/views/server/manage/index.vue
index a5e07fe..f552d3a 100644
--- a/web+/src/views/server/manage/index.vue
+++ b/web+/src/views/server/manage/index.vue
@@ -85,13 +85,20 @@
         @current-change="handlePageChange"
       />
     </el-row>
-    <el-dialog v-model="dialogVisible" :title="$t('setting')">
+    <el-dialog
+      v-model="dialogVisible"
+      :fullscreen="$store.state.app.device === 'mobile'"
+      :title="$t('setting')"
+    >
       <el-form
         ref="form"
         v-loading="formProps.loading"
         :rules="formRules"
         :model="formData"
         label-width="130px"
+        :label-position="
+          $store.state.app.device === 'desktop' ? 'right' : 'top'
+        "
       >
         <el-form-item :label="$t('namespace')" prop="namespaceId">
           <el-radio-group v-model="formData.namespaceId">