diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 64e8c17e..56f60832 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -42,6 +42,8 @@ declare module 'vue' {
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     Graph: typeof import('./../components/Graph/Graph.vue')['default']
diff --git a/src/views/settings/Index.vue b/src/views/settings/Index.vue
index bbd67a7a..268d69b9 100644
--- a/src/views/settings/Index.vue
+++ b/src/views/settings/Index.vue
@@ -13,283 +13,40 @@ 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. -->
 <template>
-  <div class="settings">
-    <div class="flex-h item">
-      <div class="label">{{ t("language") }}</div>
-      <Selector
-        v-model="lang"
-        :options="Languages"
-        placeholder="Select a language"
-        @change="setLang"
-        size="small"
-        style="font-size: 14px; width: 180px"
-      />
-    </div>
-    <div class="flex-h item">
-      <div class="label">{{ t("serverZone") }}</div>
-      <div>
-        <span>UTC</span>
-        <span class="ml-5 mr-5">{{ utcHour >= 0 ? "+" : "" }}</span>
-        <input type="number" v-model="utcHour" min="-12" max="14" class="utc-input" @change="setUTCHour" />
-        <span class="ml-5 mr-5">:</span>
-        <span class="utc-min">{{ utcMin > 9 || utcMin === 0 ? null : 0 }}</span>
-        <input type="number" v-model="utcMin" min="0" max="59" class="utc-input" @change="setUTCMin" />
-      </div>
-    </div>
-    <div class="flex-h item">
-      <div class="label">{{ t("auto") }}</div>
-      <el-switch v-model="auto" @change="handleAuto" style="height: 25px" />
-      <div class="auto-time ml-5">
-        <span class="auto-select">
-          <input type="number" v-model="autoTime" @change="changeAutoTime" min="1" />
-        </span>
-        {{ t("second") }}
-        <i class="ml-10">{{ t("timeReload") }}</i>
-      </div>
-    </div>
-    <div class="flex-h item">
-      <div class="label">{{ t("metricsTTL") }}</div>
-      <div>
-        <span>Day: </span>
-        <span class="mr-10">{{ settingsStore.configTTL.metrics?.day ?? -1 }}</span>
-        <span>Hour: </span>
-        <span class="mr-10">{{ settingsStore.configTTL.metrics?.hour ?? -1 }}</span>
-        <span>Minute: </span>
-        <span class="mr-10">{{ settingsStore.configTTL.metrics?.minute ?? -1 }}</span>
-      </div>
-      <div>
-        <span>Cold Day: </span>
-        <span class="mr-10">{{ settingsStore.configTTL.metrics?.coldDay ?? -1 }}</span>
-        <span>Cold Hour: </span>
-        <span class="mr-10">{{ settingsStore.configTTL.metrics?.coldHour ?? -1 }}</span>
-        <span>Cold Minute: </span>
-        <span>{{ settingsStore.configTTL.metrics?.coldMinute ?? -1 }}</span>
-      </div>
-    </div>
-    <div class="flex-h item">
-      <div class="label">{{ t("recordsTTL") }}</div>
-      <div>
-        <span>Normal: </span>
-        <span class="mr-10">{{ settingsStore.configTTL.records?.normal ?? -1 }}</span>
-        <span>Hour: </span>
-        <span class="mr-10">{{ settingsStore.configTTL.records?.trace ?? -1 }}</span>
-        <span>Minute: </span>
-        <span class="mr-10">{{ settingsStore.configTTL.records?.zipkinTrace ?? -1 }}</span>
-        <span>Log: </span>
-        <span class="mr-10">{{ settingsStore.configTTL.records?.log ?? -1 }}</span>
-        <span>Browser Error Log: </span>
-        <span class="mr-10">{{ settingsStore.configTTL.records?.browserErrorLog ?? -1 }}</span>
-      </div>
-      <div>
-        <span>Cold Normal: </span>
-        <span class="mr-10">{{ settingsStore.configTTL.metrics?.coldNormal ?? -1 }}</span>
-        <span>Cold Trace: </span>
-        <span class="mr-10">{{ settingsStore.configTTL.metrics?.coldTrace ?? -1 }}</span>
-        <span>Cold Zipkin Trace: </span>
-        <span class="mr-10">{{ settingsStore.configTTL.metrics?.coldZipkinTrace ?? -1 }}</span>
-        <span>Cold Log: </span>
-        <span class="mr-10">{{ settingsStore.configTTL.metrics?.coldLog ?? -1 }}</span>
-        <span>Cold Browser Error Log: </span>
-        <span>{{ settingsStore.configTTL.metrics?.coldBrowserErrorLog ?? -1 }}</span>
-      </div>
-    </div>
-    <div class="flex-h item">
-      <div class="label">{{ t("clusterNodes") }}</div>
-      <div>
-        <el-table
-          :data="settingsStore.clusterNodes"
-          class="mb-5"
-          :row-style="{ backgroundColor: 'var(--layout-background)' }"
-        >
-          <el-table-column
-            v-for="item in ClusterNodeRow"
-            :prop="item.value"
-            :label="item.label"
-            :key="item.value"
-            :width="item.width"
-          />
-        </el-table>
-        <el-pagination
-          class="pagination"
-          layout="prev, pager, next"
-          :page-size="pageSize"
-          :total="settingsStore.clusterNodes.length"
-          v-model="currentPage"
-          @current-change="changePage"
-          @prev-click="changePage"
-          @next-click="changePage"
-        />
-      </div>
-    </div>
-    <div class="flex-h item">
-      <div class="label">{{ t("debuggingConfigDump") }}</div>
-      <div class="config-dump-content">
-        <div class="mb-10" v-for="(item, index) of Object.keys(settingsStore.debuggingConfig)" :key="`${item}${index}`">
-          {{ `${item}: ${settingsStore.debuggingConfig[item]}` }}
-        </div>
-        <div v-if="!Object.keys(settingsStore.debuggingConfig).length" class="tips">No Data</div>
-      </div>
-    </div>
-  </div>
+  <el-tabs v-model="activeName" class="settings-tabs" @tab-click="handleClick">
+    <el-tab-pane v-for="tab in SettingsTabs" :label="tab.label" :name="tab.value" :key="tab.value">
+      <component :is="TabPanes[tab.value]" />
+    </el-tab-pane>
+  </el-tabs>
 </template>
 <script lang="ts" setup>
-  import { ref, computed, onMounted } from "vue";
-  import { useI18n } from "vue-i18n";
-  import { useAppStoreWithOut } from "@/store/modules/app";
-  import { useSettingsStore } from "@/store/modules/settings";
-  import timeFormat from "@/utils/timeFormat";
-  import { Languages } from "@/constants/data";
-  import Selector from "@/components/Selector.vue";
-  import getLocalTime from "@/utils/localtime";
-  import { ClusterNodeRow } from "./data";
+  import { ref } from "vue";
+  import type { TabsPaneContext } from "element-plus";
+  import { SettingsTabs } from "./data";
+  import ClusterNodes from "./components/ClusterNodes.vue";
+  import General from "./components/General.vue";
+  import TTL from "./components/TTL.vue";
+  import DebuggingConfigDump from "./components/DebuggingConfigDump.vue";
 
-  const { t, locale } = useI18n();
-  const appStore = useAppStoreWithOut();
-  const settingsStore = useSettingsStore();
-  const lang = ref<string>(locale.value || "en");
-  const autoTime = ref<number>(6);
-  const auto = ref<boolean>(appStore.autoRefresh || false);
-  const utcHour = ref<number>(appStore.utcHour);
-  const utcMin = ref<number>(appStore.utcMin);
-  const pageSize = 20;
-  const currentPage = ref<number>(1);
+  const enum TabPanes {
+    general = General,
+    ttl = TTL,
+    clusterNodes = ClusterNodes,
+    dumpEffectiveConfigurations = DebuggingConfigDump,
+  }
+  const activeName = ref(SettingsTabs[0].value);
 
-  onMounted(() => {
-    settingsStore.getClusterNodes();
-    settingsStore.getConfigTTL();
-    settingsStore.getDebuggingConfigDump();
-  });
-
-  const changePage = (pageIndex: number) => {
-    currentPage.value = pageIndex;
-  };
-
-  const handleReload = () => {
-    const gap = appStore.duration.end.getTime() - appStore.duration.start.getTime();
-    const dates: Date[] = [
-      getLocalTime(appStore.utc, new Date(new Date().getTime() - gap)),
-      getLocalTime(appStore.utc, new Date()),
-    ];
-    appStore.setDuration(timeFormat(dates));
-  };
-  const handleAuto = () => {
-    if (autoTime.value < 1) {
-      return;
-    }
-    appStore.setAutoRefresh(auto.value);
-    if (auto.value) {
-      handleReload();
-      appStore.setReloadTimer(setInterval(handleReload, autoTime.value * 1000));
-    } else {
-      if (appStore.reloadTimer) {
-        clearInterval(appStore.reloadTimer);
-      }
-    }
-  };
-  const changeAutoTime = () => {
-    if (autoTime.value < 1) {
-      return;
-    }
-    if (appStore.reloadTimer) {
-      clearInterval(appStore.reloadTimer);
-    }
-    if (auto.value) {
-      handleReload();
-      appStore.setReloadTimer(setInterval(handleReload, autoTime.value * 1000));
-    }
-  };
-  const setLang = (): void => {
-    locale.value = lang.value;
-    window.localStorage.setItem("language", lang.value);
-  };
-  const setUTCHour = () => {
-    if (utcHour.value < -12) {
-      utcHour.value = -12;
-    }
-    if (utcHour.value > 14) {
-      utcHour.value = 14;
-    }
-    if (isNaN(utcHour.value)) {
-      utcHour.value = 0;
-    }
-    appStore.setUTC(utcHour.value, utcMin.value);
-  };
-  const setUTCMin = () => {
-    if (utcMin.value < 0) {
-      utcMin.value = 0;
-    }
-    if (utcMin.value > 59) {
-      utcMin.value = 59;
-    }
-    if (isNaN(utcMin.value)) {
-      utcMin.value = 0;
-    }
-    appStore.setUTC(utcHour.value, utcMin.value);
-  };
+  function handleClick(tab: TabsPaneContext, event: Event) {
+    console.log(tab, event);
+  }
 </script>
 <style lang="scss" scoped>
-  .config-dump-content {
-    border: 1px solid var(--el-color-info-light-8);
-    height: 400px;
-    overflow: auto;
-    padding: 5px;
-    border-radius: 5px 3px;
+  .settings-tabs {
+    padding: 10px 20px;
   }
 
-  .tips {
-    text-align: center;
-    width: 80%;
-    color: var(--el-text-color-secondary);
-  }
-
-  .utc-input {
-    color: inherit;
-    background: 0;
-    border: 0;
-    outline: none;
-    padding-bottom: 0;
-  }
-
-  .utc-min {
-    display: inline-block;
-    padding-top: 2px;
-  }
-
-  .auto-select {
-    border-radius: 3px;
-    background-color: $theme-background;
-    padding: 1px;
-
-    input {
-      width: 38px;
-      border-style: unset;
-      outline: 0;
-    }
-  }
-
-  .settings {
+  .settings-tabs > .el-tabs__content {
     color: var(--sw-setting-color);
-    font-size: 13px;
-    padding: 20px;
-
-    .item {
-      margin-top: 15px;
-    }
-
-    input {
-      outline: 0;
-      width: 50px;
-      border-radius: 3px;
-      border: 1px solid $disabled-color;
-      text-align: center;
-      height: 25px;
-    }
-
-    .label {
-      width: 200px;
-      display: inline-block;
-      font-weight: 500;
-      color: $font-color;
-    }
+    padding-top: 10px;
   }
 </style>
diff --git a/src/views/settings/components/ClusterNodes.vue b/src/views/settings/components/ClusterNodes.vue
new file mode 100644
index 00000000..cb2c5591
--- /dev/null
+++ b/src/views/settings/components/ClusterNodes.vue
@@ -0,0 +1,73 @@
+<!-- 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. -->
+<template>
+  <div class="cluster-nodes">
+    <el-table
+      :data="settingsStore.clusterNodes"
+      class="mb-5"
+      :row-style="{ backgroundColor: 'var(--layout-background)' }"
+    >
+      <el-table-column
+        v-for="item in ClusterNodeRow"
+        :prop="item.value"
+        :label="item.label"
+        :key="item.value"
+        :width="item.width"
+      />
+    </el-table>
+    <el-pagination
+      class="pagination"
+      layout="prev, pager, next"
+      :page-size="pageSize"
+      :total="settingsStore.clusterNodes.length"
+      v-model="currentPage"
+      @current-change="changePage"
+      @prev-click="changePage"
+      @next-click="changePage"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted } from "vue";
+  import { useI18n } from "vue-i18n";
+  import { useSettingsStore } from "@/store/modules/settings";
+  import { ClusterNodeRow } from "../data";
+
+  const { t, locale } = useI18n();
+  const settingsStore = useSettingsStore();
+  const pageSize = 20;
+  const currentPage = ref<number>(1);
+
+  onMounted(() => {
+    settingsStore.getClusterNodes();
+  });
+
+  const changePage = (pageIndex: number) => {
+    currentPage.value = pageIndex;
+  };
+</script>
+<style lang="scss" scoped>
+  .cluster-nodes {
+    font-size: 13px;
+    width: 100%;
+  }
+
+  .label {
+    width: 200px;
+    display: inline-block;
+    font-weight: 500;
+    color: $font-color;
+  }
+</style>
diff --git a/src/views/settings/components/DebuggingConfigDump.vue b/src/views/settings/components/DebuggingConfigDump.vue
new file mode 100644
index 00000000..4960a68a
--- /dev/null
+++ b/src/views/settings/components/DebuggingConfigDump.vue
@@ -0,0 +1,63 @@
+<!-- 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. -->
+<template>
+  <div class="debugging-config-dump">
+    <div class="config-dump-content">
+      <div class="mb-10" v-for="(item, index) of Object.keys(settingsStore.debuggingConfig)" :key="`${item}${index}`">
+        {{ `${item}: ${settingsStore.debuggingConfig[item]}` }}
+      </div>
+      <div v-if="!Object.keys(settingsStore.debuggingConfig).length" class="tips">No Data</div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted } from "vue";
+  import { useI18n } from "vue-i18n";
+  import { useSettingsStore } from "@/store/modules/settings";
+
+  const { t, locale } = useI18n();
+  const settingsStore = useSettingsStore();
+
+  onMounted(() => {
+    settingsStore.getDebuggingConfigDump();
+  });
+</script>
+<style lang="scss" scoped>
+  .config-dump-content {
+    border: 1px solid var(--el-color-info-light-8);
+    overflow: auto;
+    padding: 5px;
+    border-radius: 5px 3px;
+    height: 700px;
+  }
+
+  .tips {
+    text-align: center;
+    width: 100%;
+    color: var(--el-text-color-secondary);
+  }
+
+  .debugging-config-dump {
+    color: var(--sw-setting-color);
+    font-size: 13px;
+  }
+
+  .label {
+    width: 200px;
+    display: inline-block;
+    font-weight: 500;
+    color: $font-color;
+  }
+</style>
diff --git a/src/views/settings/components/General.vue b/src/views/settings/components/General.vue
new file mode 100644
index 00000000..6e11b7be
--- /dev/null
+++ b/src/views/settings/components/General.vue
@@ -0,0 +1,181 @@
+<!-- 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. -->
+<template>
+  <div class="general-settings">
+    <div class="flex-h item">
+      <div class="label">{{ t("language") }}</div>
+      <Selector
+        v-model="lang"
+        :options="Languages"
+        placeholder="Select a language"
+        @change="setLang"
+        size="small"
+        style="font-size: 14px; width: 180px"
+      />
+    </div>
+    <div class="flex-h item">
+      <div class="label">{{ t("serverZone") }}</div>
+      <div>
+        <span>UTC</span>
+        <span class="ml-5 mr-5">{{ utcHour >= 0 ? "+" : "" }}</span>
+        <input type="number" v-model="utcHour" min="-12" max="14" class="utc-input" @change="setUTCHour" />
+        <span class="ml-5 mr-5">:</span>
+        <span class="utc-min">{{ utcMin > 9 || utcMin === 0 ? null : 0 }}</span>
+        <input type="number" v-model="utcMin" min="0" max="59" class="utc-input" @change="setUTCMin" />
+      </div>
+    </div>
+    <div class="flex-h item">
+      <div class="label">{{ t("auto") }}</div>
+      <el-switch v-model="auto" @change="handleAuto" style="height: 25px" />
+      <div class="auto-time ml-5">
+        <span class="auto-select">
+          <input type="number" v-model="autoTime" @change="changeAutoTime" min="1" />
+        </span>
+        {{ t("second") }}
+        <i class="ml-10">{{ t("timeReload") }}</i>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref } from "vue";
+  import { useI18n } from "vue-i18n";
+  import { useAppStoreWithOut } from "@/store/modules/app";
+  import timeFormat from "@/utils/timeFormat";
+  import { Languages } from "@/constants/data";
+  import Selector from "@/components/Selector.vue";
+  import getLocalTime from "@/utils/localtime";
+
+  const { t, locale } = useI18n();
+  const appStore = useAppStoreWithOut();
+  const lang = ref<string>(locale.value || "en");
+  const autoTime = ref<number>(6);
+  const auto = ref<boolean>(appStore.autoRefresh || false);
+  const utcHour = ref<number>(appStore.utcHour);
+  const utcMin = ref<number>(appStore.utcMin);
+
+  const handleReload = () => {
+    const gap = appStore.duration.end.getTime() - appStore.duration.start.getTime();
+    const dates: Date[] = [
+      getLocalTime(appStore.utc, new Date(new Date().getTime() - gap)),
+      getLocalTime(appStore.utc, new Date()),
+    ];
+    appStore.setDuration(timeFormat(dates));
+  };
+  const handleAuto = () => {
+    if (autoTime.value < 1) {
+      return;
+    }
+    appStore.setAutoRefresh(auto.value);
+    if (auto.value) {
+      handleReload();
+      appStore.setReloadTimer(setInterval(handleReload, autoTime.value * 1000));
+    } else {
+      if (appStore.reloadTimer) {
+        clearInterval(appStore.reloadTimer);
+      }
+    }
+  };
+  const changeAutoTime = () => {
+    if (autoTime.value < 1) {
+      return;
+    }
+    if (appStore.reloadTimer) {
+      clearInterval(appStore.reloadTimer);
+    }
+    if (auto.value) {
+      handleReload();
+      appStore.setReloadTimer(setInterval(handleReload, autoTime.value * 1000));
+    }
+  };
+  const setLang = (): void => {
+    locale.value = lang.value;
+    window.localStorage.setItem("language", lang.value);
+  };
+  const setUTCHour = () => {
+    if (utcHour.value < -12) {
+      utcHour.value = -12;
+    }
+    if (utcHour.value > 14) {
+      utcHour.value = 14;
+    }
+    if (isNaN(utcHour.value)) {
+      utcHour.value = 0;
+    }
+    appStore.setUTC(utcHour.value, utcMin.value);
+  };
+  const setUTCMin = () => {
+    if (utcMin.value < 0) {
+      utcMin.value = 0;
+    }
+    if (utcMin.value > 59) {
+      utcMin.value = 59;
+    }
+    if (isNaN(utcMin.value)) {
+      utcMin.value = 0;
+    }
+    appStore.setUTC(utcHour.value, utcMin.value);
+  };
+</script>
+<style lang="scss" scoped>
+  .utc-input {
+    color: inherit;
+    background: 0;
+    border: 0;
+    outline: none;
+    padding-bottom: 0;
+  }
+
+  .utc-min {
+    display: inline-block;
+    padding-top: 2px;
+  }
+
+  .auto-select {
+    border-radius: 3px;
+    background-color: $theme-background;
+    padding: 1px;
+
+    input {
+      width: 38px;
+      border-style: unset;
+      outline: 0;
+    }
+  }
+
+  .general-settings {
+    font-size: 13px;
+
+    .item {
+      margin-top: 10px;
+    }
+
+    input {
+      outline: 0;
+      width: 50px;
+      border-radius: 3px;
+      border: 1px solid $disabled-color;
+      text-align: center;
+      height: 25px;
+    }
+
+    .label {
+      width: 200px;
+      display: inline-block;
+      color: $font-color;
+      font-weight: 500;
+    }
+  }
+</style>
diff --git a/src/views/settings/components/TTL.vue b/src/views/settings/components/TTL.vue
new file mode 100644
index 00000000..0acfb776
--- /dev/null
+++ b/src/views/settings/components/TTL.vue
@@ -0,0 +1,93 @@
+<!-- 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. -->
+<template>
+  <div class="ttl">
+    <div class="flex-h item">
+      <div class="label">{{ t("metricsTTL") }}</div>
+      <div>
+        <span>Day: </span>
+        <span class="mr-10">{{ settingsStore.configTTL.metrics?.day ?? -1 }}</span>
+        <span>Hour: </span>
+        <span class="mr-10">{{ settingsStore.configTTL.metrics?.hour ?? -1 }}</span>
+        <span>Minute: </span>
+        <span class="mr-10">{{ settingsStore.configTTL.metrics?.minute ?? -1 }}</span>
+      </div>
+      <div>
+        <span>Cold Day: </span>
+        <span class="mr-10">{{ settingsStore.configTTL.metrics?.coldDay ?? -1 }}</span>
+        <span>Cold Hour: </span>
+        <span class="mr-10">{{ settingsStore.configTTL.metrics?.coldHour ?? -1 }}</span>
+        <span>Cold Minute: </span>
+        <span>{{ settingsStore.configTTL.metrics?.coldMinute ?? -1 }}</span>
+      </div>
+    </div>
+    <div class="flex-h item">
+      <div class="label">{{ t("recordsTTL") }}</div>
+      <div>
+        <span>Normal: </span>
+        <span class="mr-10">{{ settingsStore.configTTL.records?.normal ?? -1 }}</span>
+        <span>Hour: </span>
+        <span class="mr-10">{{ settingsStore.configTTL.records?.trace ?? -1 }}</span>
+        <span>Minute: </span>
+        <span class="mr-10">{{ settingsStore.configTTL.records?.zipkinTrace ?? -1 }}</span>
+        <span>Log: </span>
+        <span class="mr-10">{{ settingsStore.configTTL.records?.log ?? -1 }}</span>
+        <span>Browser Error Log: </span>
+        <span class="mr-10">{{ settingsStore.configTTL.records?.browserErrorLog ?? -1 }}</span>
+      </div>
+      <div>
+        <span>Cold Normal: </span>
+        <span class="mr-10">{{ settingsStore.configTTL.metrics?.coldNormal ?? -1 }}</span>
+        <span>Cold Trace: </span>
+        <span class="mr-10">{{ settingsStore.configTTL.metrics?.coldTrace ?? -1 }}</span>
+        <span>Cold Zipkin Trace: </span>
+        <span class="mr-10">{{ settingsStore.configTTL.metrics?.coldZipkinTrace ?? -1 }}</span>
+        <span>Cold Log: </span>
+        <span class="mr-10">{{ settingsStore.configTTL.metrics?.coldLog ?? -1 }}</span>
+        <span>Cold Browser Error Log: </span>
+        <span>{{ settingsStore.configTTL.metrics?.coldBrowserErrorLog ?? -1 }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted } from "vue";
+  import { useI18n } from "vue-i18n";
+  import { useSettingsStore } from "@/store/modules/settings";
+
+  const { t, locale } = useI18n();
+  const settingsStore = useSettingsStore();
+
+  onMounted(() => {
+    settingsStore.getConfigTTL();
+  });
+</script>
+<style lang="scss" scoped>
+  .ttl {
+    color: var(--sw-setting-color);
+    font-size: 13px;
+
+    .item {
+      margin-top: 15px;
+    }
+
+    .label {
+      width: 200px;
+      display: inline-block;
+      font-weight: 500;
+      color: $font-color;
+    }
+  }
+</style>
diff --git a/src/views/settings/data.ts b/src/views/settings/data.ts
index db23aa82..de8d0199 100644
--- a/src/views/settings/data.ts
+++ b/src/views/settings/data.ts
@@ -19,7 +19,6 @@ export const ClusterNodeRow = [
   {
     label: "Host",
     value: "host",
-    width: 280,
   },
   {
     label: "Port",