diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 8c320e97..8e3de407 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -88,12 +88,9 @@ export const appStore = defineStore({
               this.duration.start.getMonth());
           break;
       }
-      const utcArr = this.utc.split(":");
-      const utcHour = isNaN(Number(utcArr[0])) ? 0 : Number(utcArr[0]);
-      const utcMin = isNaN(Number(utcArr[1])) ? 0 : Number(utcArr[1]);
       const utcSpace =
-        (utcHour + new Date().getTimezoneOffset() / 60) * 3600000 +
-        utcMin * 60000;
+        (this.utcHour + new Date().getTimezoneOffset() / 60) * 3600000 +
+        this.utcMin * 60000;
       const startUnix: number = this.duration.start.getTime();
       const endUnix: number = this.duration.end.getTime();
       const timeIntervals: string[] = [];
@@ -155,6 +152,10 @@ export const appStore = defineStore({
       }
       this.utc = res.data.data.getTimeInfo.timezone / 100 + ":0";
 
+      const utcArr = this.utc.split(":");
+      this.utcHour = isNaN(Number(utcArr[0])) ? 0 : Number(utcArr[0]);
+      this.utcMin = isNaN(Number(utcArr[1])) ? 0 : Number(utcArr[1]);
+
       return res.data;
     },
     async fetchVersion(): Promise<void> {
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 79c2fbd0..5e06286b 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -84,9 +84,8 @@ const state = reactive<{ timer: ReturnType<typeof setInterval> | null }>({
 const lang = ref<string>(locale.value || "en");
 const autoTime = ref<number>(6);
 const auto = ref<boolean>(appStore.autoRefresh || false);
-const utcArr = appStore.utc.split(":");
-const utcHour = ref<number>(isNaN(Number(utcArr[0])) ? 0 : Number(utcArr[0]));
-const utcMin = ref<number>(isNaN(Number(utcArr[1])) ? 0 : Number(utcArr[1]));
+const utcHour = ref<number>(appStore.utcHour);
+const utcMin = ref<number>(appStore.utcMin);
 
 appStore.setPageTitle("Setting");
 const handleReload = () => {