diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index 6de1580f..85dcf760 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -50,7 +50,7 @@ limitations under the License. -->
       <span> UTC{{ appStore.utcHour >= 0 ? "+" : "" }}{{ `${appStore.utcHour}:${appStore.utcMin}` }} </span>
       <span class="ml-5">
         <el-switch
-          v-model="dataMode"
+          v-model="coldStage"
           inline-prompt
           active-text="Set data to cold"
           inactive-text="Set data to warm"
@@ -105,7 +105,7 @@ limitations under the License. -->
   const pageTitle = ref<string>("");
   const theme = ref<boolean>(true);
   const themeSwitchRef = ref<HTMLElement>();
-  const dataMode = ref<boolean>(false);
+  const coldStage = ref<boolean>(false);
 
   const savedTheme = window.localStorage.getItem("theme-is-dark");
   if (savedTheme === "false") {
@@ -138,7 +138,8 @@ limitations under the License. -->
   }
 
   function changeDataMode() {
-    if (dataMode.value) {
+    appStore.setColdStageMode(coldStage.value);
+    if (coldStage.value) {
       // const gap = appStore.duration.end.getTime() - appStore.duration.start.getTime();
       // const dates: Date[] = [new Date(new Date().getTime() - gap), new Date()];
       // appStore.setDuration(timeFormat(dates));
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 5c7c3ea0..ec4b6a0b 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -37,6 +37,7 @@ interface AppState {
   reloadTimer: Nullable<IntervalHandle>;
   allMenus: MenuOptions[];
   theme: string;
+  coldStageMode: boolean;
 }
 
 export const appStore = defineStore({
@@ -58,6 +59,7 @@ export const appStore = defineStore({
     reloadTimer: null,
     allMenus: [],
     theme: Themes.Dark,
+    coldStageMode: false,
   }),
   getters: {
     duration(): Duration {
@@ -143,6 +145,9 @@ export const appStore = defineStore({
     setAutoRefresh(auto: boolean) {
       this.autoRefresh = auto;
     },
+    setColdStageMode(mode: boolean) {
+      this.coldStageMode = mode;
+    },
     runEventStack() {
       if (this.timer) {
         clearTimeout(this.timer);
diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue
index b09e2339..48884708 100644
--- a/src/views/dashboard/related/trace/Filter.vue
+++ b/src/views/dashboard/related/trace/Filter.vue
@@ -65,6 +65,15 @@ limitations under the License. -->
       <span class="grey mr-5">{{ t("traceID") }}:</span>
       <el-input size="small" v-model="traceId" class="traceId" />
     </div>
+    <div>
+      <span class="sm b grey mr-5">{{ t("duration") }}:</span>
+      <TimePicker
+        :value="[appStore.durationRow.start, appStore.durationRow.end]"
+        position="bottom"
+        format="YYYY-MM-DD HH:mm"
+        @input="changeTimeRange"
+      />
+    </div>
     <div class="mr-10">
       <span class="sm b grey mr-5">{{ t("duration") }}:</span>
       <el-input size="small" class="inputs mr-5" v-model="minTraceDuration" type="number" />
@@ -85,6 +94,7 @@ limitations under the License. -->
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { useAppStoreWithOut } from "@/store/modules/app";
   import { useSelectorStore } from "@/store/modules/selectors";
+  import timeFormat from "@/utils/timeFormat";
   import ConditionTags from "@/views/components/ConditionTags.vue";
   import { ElMessage } from "element-plus";
   import { EntityType, QueryOrders, Status } from "../../data";
@@ -255,6 +265,9 @@ limitations under the License. -->
       ElMessage.error(resp.errors);
     }
   }
+  function changeTimeRange(val: Date[]) {
+    // duration.value = timeFormat(val);
+  }
   onUnmounted(() => {
     traceStore.resetState();
     const config = props.data;
diff --git a/src/views/dashboard/related/trace/Header.vue b/src/views/dashboard/related/trace/Header.vue
index 293f3652..877cfec0 100644
--- a/src/views/dashboard/related/trace/Header.vue
+++ b/src/views/dashboard/related/trace/Header.vue
@@ -31,6 +31,12 @@ limitations under the License. -->
       @change="changeLatency"
       class="ml-10"
     />
+    <TimePicker
+      :value="[appStore.durationRow.start, appStore.durationRow.end]"
+      position="bottom"
+      format="YYYY-MM-DD HH:mm"
+      @input="changeTimeRange"
+    />
     <el-popover trigger="hover" width="250" placement="bottom">
       <template #reference>
         <div class="cp conditions-popup">
@@ -82,6 +88,7 @@ limitations under the License. -->
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { useAppStoreWithOut } from "@/store/modules/app";
   import { useSelectorStore } from "@/store/modules/selectors";
+  import timeFormat from "@/utils/timeFormat";
   import ConditionTags from "@/views/components/ConditionTags.vue";
   import { ElMessage } from "element-plus";
   import { EntityType, QueryOrders, Status } from "../../data";
@@ -107,6 +114,7 @@ limitations under the License. -->
   const selectorStore = useSelectorStore();
   const dashboardStore = useDashboardStore();
   const traceStore = useTraceStore();
+  const timeRange = ref<number>(NaN);
   const tagsList = ref<string[]>([]);
   const tagsMap = ref<Option[]>([]);
   const traceId = ref<string>(filters.refId || "");
@@ -169,6 +177,15 @@ limitations under the License. -->
     }
     await queryTraces();
   }
+
+  function changeTimeRange(val: Date[]) {
+    timeRange.value = val[1].getTime() - val[0].getTime() > 60 * 24 * 60 * 60 * 1000 ? 1 : 0;
+    if (timeRange.value) {
+      return;
+    }
+    appStore.setDuration(timeFormat(val));
+  }
+
   function changeCondition() {
     if (conditions.value === "latency") {
       currentLatency.value = filters.latency ? filters.latency[0].data : [];