diff --git a/src/hooks/useDuration.ts b/src/hooks/useDuration.ts
new file mode 100644
index 00000000..8f1ec0dd
--- /dev/null
+++ b/src/hooks/useDuration.ts
@@ -0,0 +1,53 @@
+import { appStore } from "./../store/modules/app";
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useAppStoreWithOut, InitializationDurationRow } from "@/store/modules/app";
+import type { Duration, DurationTime } from "@/types/app";
+import getLocalTime from "@/utils/localtime";
+import dateFormatStep from "@/utils/dateFormat";
+
+export function useDuration() {
+  const appStore = useAppStoreWithOut();
+  let durationRow: Duration = InitializationDurationRow;
+
+  function getDuration() {
+    return {
+      start: getLocalTime(appStore.utc, durationRow.start),
+      end: getLocalTime(appStore.utc, durationRow.end),
+      step: durationRow.step,
+    };
+  }
+  function getDurationTime(): DurationTime {
+    const { start, step, end } = getDuration();
+    return {
+      start: dateFormatStep(start, step, true),
+      end: dateFormatStep(end, step, true),
+      step: step,
+    };
+  }
+  function setDurationRow(data: Duration) {
+    durationRow = data;
+  }
+  function getMaxRange(day: number) {
+    const gap = (day + 1) * 24 * 60 * 60 * 1000;
+    const dates: Date[] = [new Date(new Date().getTime() - gap), new Date()];
+
+    return dates;
+  }
+
+  return { setDurationRow, getDurationTime, getMaxRange };
+}
diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue
index 3dcfb91e..7b5963a0 100644
--- a/src/views/dashboard/related/trace/Filter.vue
+++ b/src/views/dashboard/related/trace/Filter.vue
@@ -74,10 +74,11 @@ limitations under the License. -->
     <div>
       <span class="sm b grey mr-5">{{ t("timeRange") }}:</span>
       <TimePicker
-        :value="[appStore.durationRow.start, appStore.durationRow.end]"
+        :value="[durationRow.start, durationRow.end]"
+        :maxRange="maxRange"
         position="bottom"
         format="YYYY-MM-DD HH:mm"
-        @input="changeTimeRange"
+        @input="changeDuration"
       />
     </div>
   </div>
@@ -86,18 +87,20 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, reactive, watch, onUnmounted } from "vue";
+  import { ref, reactive, watch, onUnmounted, computed } from "vue";
   import type { PropType } from "vue";
   import { useI18n } from "vue-i18n";
-  import type { Option, DurationTime } from "@/types/app";
+  import type { Option, DurationTime, Duration } from "@/types/app";
   import { useTraceStore } from "@/store/modules/trace";
   import { useDashboardStore } from "@/store/modules/dashboard";
-  import { useAppStoreWithOut } from "@/store/modules/app";
+  import { useAppStoreWithOut, InitializationDurationRow } 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";
   import type { LayoutConfig } from "@/types/dashboard";
+  import { useDuration } from "@/hooks/useDuration";
 
   /*global defineProps, defineEmits, Recordable */
   const emits = defineEmits(["get", "search"]);
@@ -108,13 +111,14 @@ limitations under the License. -->
       default: () => ({ graph: {} }),
     },
   });
-  const filters = reactive<Recordable>(props.data.filters || {});
-  const traceId = ref<string>(filters.traceId || "");
   const { t } = useI18n();
   const appStore = useAppStoreWithOut();
   const selectorStore = useSelectorStore();
   const dashboardStore = useDashboardStore();
   const traceStore = useTraceStore();
+  const { setDurationRow, getDurationTime, getMaxRange } = useDuration();
+  const filters = reactive<Recordable>(props.data.filters || {});
+  const traceId = ref<string>(filters.traceId || "");
   const duration = ref<DurationTime>(filters.duration || appStore.durationTime);
   const minTraceDuration = ref<number>();
   const maxTraceDuration = ref<number>();
@@ -126,6 +130,10 @@ limitations under the License. -->
     endpoint: { value: "0", label: "All" },
     service: { value: "", label: "" },
   });
+  const durationRow = ref<Duration>(InitializationDurationRow);
+  const maxRange = computed(() =>
+    getMaxRange(appStore.coldStageMode ? appStore.recordsTTL.coldSuperDataset : appStore.recordsTTL.superDataset),
+  );
   if (filters.queryOrder) {
     traceStore.setTraceCondition({
       queryOrder: filters.queryOrder,
@@ -264,8 +272,10 @@ limitations under the License. -->
       ElMessage.error(resp.errors);
     }
   }
-  function changeTimeRange() {
-    // duration.value = timeFormat(val);
+  function changeDuration(val: Date[]) {
+    durationRow.value = timeFormat(val);
+    setDurationRow(durationRow.value);
+    duration.value = getDurationTime();
   }
   onUnmounted(() => {
     traceStore.resetState();