diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index 9b48e260..2cbccb94 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -86,7 +86,7 @@ limitations under the License. -->
 <script lang="ts" setup>
   import { Themes } from "@/constants/data";
   import router from "@/router";
-  import { useAppStoreWithOut } from "@/store/modules/app";
+  import { useAppStoreWithOut, InitializationDurationRow } from "@/store/modules/app";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import type { DashboardItem } from "@/types/dashboard";
   import timeFormat from "@/utils/timeFormat";
@@ -154,6 +154,7 @@ limitations under the License. -->
         day: appStore.metricsTTL.day,
       });
     }
+    appStore.setDuration(InitializationDurationRow);
   }
 
   function handleChangeTheme() {
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 64c88d2b..98651e93 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -43,14 +43,16 @@ interface AppState {
   recordsTTL: Recordable<RecordsTTL>;
 }
 
+export const InitializationDurationRow = {
+  start: new Date(new Date().getTime() - 1800000),
+  end: new Date(),
+  step: TimeType.MINUTE_TIME,
+};
+
 export const appStore = defineStore({
   id: "app",
   state: (): AppState => ({
-    durationRow: {
-      start: new Date(new Date().getTime() - 1800000),
-      end: new Date(),
-      step: TimeType.MINUTE_TIME,
-    },
+    durationRow: InitializationDurationRow,
     utc: "",
     utcHour: 0,
     utcMin: 0,