diff --git a/quasar.conf.js b/quasar.conf.js
index e70f606..05a0120 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -77,7 +77,7 @@ module.exports = configure(function (ctx) {
       config: {},
 
       // iconSet: 'material-icons', // Quasar icon set
-      // lang: 'en-US', // Quasar language pack
+      lang: "zh-CN", // Quasar language pack
 
       // For special cases outside of where the auto-import strategy can have an impact
       // (like functional components as one of the examples),
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index bbe04be..07e813c 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,18 +1,37 @@
 <template>
   <q-layout view="hHh lpR fFf">
+    <!-- header -->
     <q-header elevated class="header text-black">
       <top-tool-bar />
     </q-header>
-    <q-drawer v-model="data.show_left_drawer" side="left" bordered>
+
+    <!-- drawer -->
+    <q-drawer
+      v-if="landspace"
+      v-model="data.show_left_drawer"
+      side="left"
+      bordered
+    >
       <left-tool-bar />
     </q-drawer>
 
+    <!-- page -->
     <q-page-container>
       <router-view />
     </q-page-container>
-    <q-footer elevated class="bg-white text-black" style="height: 30px">
+
+    <!-- fotter -->
+    <q-footer
+      elevated
+      v-if="landspace"
+      class="bg-white text-black"
+      style="height: 28px"
+    >
       <div class="text-center">SX</div>
     </q-footer>
+    <q-footer v-else elevated class="bg-white text-black" style="height: 40vh">
+      <left-tool-bar />
+    </q-footer>
   </q-layout>
 </template>
 
@@ -21,6 +40,7 @@ import { defineComponent, reactive } from "vue";
 
 import LeftToolBar from "src/pages/LeftToolBar.vue";
 import TopToolBar from "src/pages/TopToolBar.vue";
+import EventBus, { EventNamesDefine } from "src/common/EventBus";
 
 class _Data {
   show_left_drawer = true;
@@ -35,7 +55,16 @@ export default defineComponent({
   setup() {
     const data = reactive(new _Data());
 
-    return { data };
+    const landspace = window.innerHeight < window.innerWidth;
+
+    EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
+      const new_landspace = window.innerHeight < window.innerWidth;
+      if (landspace != new_landspace) {
+        window.location.reload();
+      }
+    });
+
+    return { data, landspace };
   },
 });
 </script>
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
index e2c02d3..eaaa8ef 100644
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@@ -2,7 +2,7 @@
   <q-layout view="hHh lpR fFf">
     <q-page-container>
       <q-page class="row items-center justify-evenly">
-        <q-card style="width: 30vw">
+        <q-card :style="{ width: (landspace ? 30 : 70) + 'vw' }">
           <q-card-section class="text-center text-h6">
             {{ $t("login") }}
           </q-card-section>
@@ -99,7 +99,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from "vue";
+import { defineComponent, reactive, ref } from "vue";
 
 import GlobalData from "src/common/GlobalData";
 import { LocalStorage, SessionStorage, useQuasar } from "quasar";
@@ -107,6 +107,7 @@ import ClientConnection from "src/common/ClientConnection";
 import PermissionLevel from "src/entities/PermissionLevel";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
+import EventBus, { EventNamesDefine } from "src/common/EventBus";
 
 class _Data {
   user_name: string | null = null;
@@ -146,8 +147,16 @@ export default defineComponent({
     const $route = useRouter();
     const data = reactive(new _Data());
     let web_socket: ClientConnection | null = null;
+
+    const landspace = ref(window.innerHeight < window.innerWidth);
+
+    EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
+      landspace.value = window.innerHeight < window.innerWidth;
+    });
+
     return {
       data,
+      landspace,
       loga(a: any) {
         console.log(a);
       },