diff --git a/.env b/.env
index bb36e3c..c883084 100644
--- a/.env
+++ b/.env
@@ -4,7 +4,7 @@ VITE_APP_TITLE=Easy Retry
 
 VITE_APP_DESC=A flexible, reliable, and fast platform for distributed task retry and distributed task scheduling.
 
-VITE_APP_VERSION=v3.1.0
+VITE_APP_VERSION=3.1.0
 
 # the prefix of the icon name
 VITE_ICON_PREFIX=icon
diff --git a/src/components/common/operate-drawer.vue b/src/components/common/operate-drawer.vue
index 19b9209..6bbae7b 100644
--- a/src/components/common/operate-drawer.vue
+++ b/src/components/common/operate-drawer.vue
@@ -30,9 +30,9 @@ const drawerWidth = computed(() => {
     return state.width * 0.9 >= maxMinWidth ? `${maxMinWidth}px` : '90%';
   }
   let minWidth = state.width * 0.3 >= maxMinWidth ? `${maxMinWidth}px` : '30%';
-  minWidth = state.width <= 420 ? '90%' : '30%';
+  minWidth = state.width <= 420 ? '90%' : minWidth;
   let maxWidth = state.width * 0.5 >= maxMaxWidth ? `${maxMaxWidth}px` : '50%';
-  maxWidth = state.width <= 420 ? '90%' : '50%';
+  maxWidth = state.width <= 420 ? '90%' : maxWidth;
   return isFullscreen.value ? maxWidth : minWidth;
 });
 
diff --git a/src/layouts/modules/global-footer/index.vue b/src/layouts/modules/global-footer/index.vue
index a8c27ed..d95f5e0 100644
--- a/src/layouts/modules/global-footer/index.vue
+++ b/src/layouts/modules/global-footer/index.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
+import { ref } from 'vue';
+import { localStg } from '@/utils/storage';
+
 defineOptions({
   name: 'GlobalFooter'
 });
 
 const { VITE_APP_VERSION } = import.meta.env;
+const version = ref<string>(`v${localStg.get('version') || VITE_APP_VERSION}`);
 </script>
 
 <template>
   <DarkModeContainer class="h-full flex-center">
     <a href="https://gitee.com/aizuda/easy-retry/blob/master/LICENSE" target="_blank" rel="noopener noreferrer">
-      Copyright © 2024 Easy Retry {{ VITE_APP_VERSION }}
+      Copyright © 2024 Easy Retry {{ version }}
     </a>
   </DarkModeContainer>
 </template>
diff --git a/src/router/guard/route.ts b/src/router/guard/route.ts
index b8ef871..131d1c3 100644
--- a/src/router/guard/route.ts
+++ b/src/router/guard/route.ts
@@ -10,6 +10,7 @@ import { useAuthStore } from '@/store/modules/auth';
 import { useRouteStore } from '@/store/modules/route';
 import { localStg } from '@/utils/storage';
 import { $t } from '@/locales';
+import { fetchVersion } from '@/service/api';
 
 /**
  * create route guard
@@ -168,6 +169,10 @@ async function initRoute(to: RouteLocationNormalized): Promise<RouteLocationRaw
     if (to.path !== '/pwd-login') {
       const authStore = useAuthStore();
       await authStore.getInfo();
+      const { data, error } = await fetchVersion();
+      if (!error) {
+        localStg.set('version', data!);
+      }
     }
   }
 
diff --git a/src/typings/storage.d.ts b/src/typings/storage.d.ts
index 2ba98bd..fe1ef73 100644
--- a/src/typings/storage.d.ts
+++ b/src/typings/storage.d.ts
@@ -16,6 +16,8 @@ declare namespace StorageType {
     token: string;
     /** The refresh token */
     refreshToken: string;
+    /** The version */
+    version: string;
     /** The namespace id */
     namespaceId: string;
     /** The user info */
diff --git a/src/views/_builtin/login/index.vue b/src/views/_builtin/login/index.vue
index fa9a687..8abfdad 100644
--- a/src/views/_builtin/login/index.vue
+++ b/src/views/_builtin/login/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import type { Component } from 'vue';
 import { getColorPalette, mixColor } from '@sa/utils';
 import { $t } from '@/locales';
@@ -7,6 +7,8 @@ import GlobalFooter from '@/layouts/modules/global-footer/index.vue';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
 import { loginModuleRecord } from '@/constants/app';
+import { localStg } from '@/utils/storage';
+import { fetchVersion } from '@/service/api';
 import PwdLogin from './modules/pwd-login.vue';
 // import CodeLogin from './modules/code-login.vue';
 // import Register from './modules/register.vue';
@@ -21,6 +23,17 @@ interface Props {
 const props = defineProps<Props>();
 
 const { VITE_APP_VERSION } = import.meta.env;
+const version = ref<string>(`v${localStg.get('version') || VITE_APP_VERSION}`);
+
+const getVersion = async () => {
+  const { data, error } = await fetchVersion();
+  if (!error) {
+    version.value = data;
+    localStg.set('version', data);
+  }
+};
+
+getVersion();
 
 const appStore = useAppStore();
 const themeStore = useThemeStore();
@@ -66,7 +79,7 @@ const href = (url: string) => {
           <SystemLogo class="text-64px text-primary lt-sm:text-48px" />
           <h3 class="flex text-28px text-primary font-500 lt-sm:text-22px">
             {{ $t('system.title') }}
-            <span class="mt-3px pl-12px text-16px color-#00000072 font-600">{{ VITE_APP_VERSION }}</span>
+            <span class="mt-3px pl-12px text-16px color-#00000072 font-600">{{ version }}</span>
           </h3>
           <div class="i-flex-col">
             <ThemeSchemaSwitch