diff --git a/src/views/settings/Index.vue b/src/views/settings/Index.vue
index 268d69b9..604bc72f 100644
--- a/src/views/settings/Index.vue
+++ b/src/views/settings/Index.vue
@@ -13,7 +13,7 @@ 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>
-  <el-tabs v-model="activeName" class="settings-tabs" @tab-click="handleClick">
+  <el-tabs v-model="activeName" class="settings-tabs">
     <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>
@@ -21,24 +21,19 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
   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 enum TabPanes {
-    general = General,
-    ttl = TTL,
-    clusterNodes = ClusterNodes,
-    dumpEffectiveConfigurations = DebuggingConfigDump,
-  }
+  /*global Indexable*/
+  const TabPanes: Indexable = {
+    general: General,
+    ttl: TTL,
+    clusterNodes: ClusterNodes,
+    dumpEffectiveConfigurations: DebuggingConfigDump,
+  };
   const activeName = ref(SettingsTabs[0].value);
-
-  function handleClick(tab: TabsPaneContext, event: Event) {
-    console.log(tab, event);
-  }
 </script>
 <style lang="scss" scoped>
   .settings-tabs {
diff --git a/src/views/settings/components/ClusterNodes.vue b/src/views/settings/components/ClusterNodes.vue
index cb2c5591..401dcd5b 100644
--- a/src/views/settings/components/ClusterNodes.vue
+++ b/src/views/settings/components/ClusterNodes.vue
@@ -41,11 +41,9 @@ limitations under the License. -->
 </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);
diff --git a/src/views/settings/components/DebuggingConfigDump.vue b/src/views/settings/components/DebuggingConfigDump.vue
index 4960a68a..ef55dacd 100644
--- a/src/views/settings/components/DebuggingConfigDump.vue
+++ b/src/views/settings/components/DebuggingConfigDump.vue
@@ -24,10 +24,8 @@ limitations under the License. -->
 </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(() => {
diff --git a/src/views/settings/components/TTL.vue b/src/views/settings/components/TTL.vue
index 0acfb776..e069167c 100644
--- a/src/views/settings/components/TTL.vue
+++ b/src/views/settings/components/TTL.vue
@@ -14,60 +14,31 @@ 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 class="label">{{ t("metricsTTL") }}</div>
+    <el-table
+      :data="[settingsStore.configTTL.metrics]"
+      class="mb-5"
+      :row-style="{ backgroundColor: 'var(--layout-background)' }"
+    >
+      <el-table-column v-for="item in MetricsTTLRow" :prop="item.value" :label="item.label" :key="item.value" />
+    </el-table>
+    <div class="label">{{ t("recordsTTL") }}</div>
+    <el-table
+      :data="[settingsStore.configTTL.records]"
+      class="mb-5"
+      :row-style="{ backgroundColor: 'var(--layout-background)' }"
+    >
+      <el-table-column v-for="item in RecordsTTLRow" :prop="item.value" :label="item.label" :key="item.value" />
+    </el-table>
   </div>
 </template>
 <script lang="ts" setup>
   import { onMounted } from "vue";
   import { useI18n } from "vue-i18n";
   import { useSettingsStore } from "@/store/modules/settings";
+  import { MetricsTTLRow, RecordsTTLRow } from "../data";
 
-  const { t, locale } = useI18n();
+  const { t } = useI18n();
   const settingsStore = useSettingsStore();
 
   onMounted(() => {
@@ -79,12 +50,8 @@ limitations under the License. -->
     color: var(--sw-setting-color);
     font-size: 13px;
 
-    .item {
-      margin-top: 15px;
-    }
-
     .label {
-      width: 200px;
+      margin: 15px 0;
       display: inline-block;
       font-weight: 500;
       color: $font-color;
diff --git a/src/views/settings/data.ts b/src/views/settings/data.ts
index de8d0199..3fdc8c39 100644
--- a/src/views/settings/data.ts
+++ b/src/views/settings/data.ts
@@ -50,3 +50,72 @@ export const SettingsTabs = [
     value: "dumpEffectiveConfigurations",
   },
 ];
+export const MetricsTTLRow = [
+  {
+    label: "Day",
+    value: "day",
+  },
+  {
+    label: "Hour",
+    value: "hour",
+  },
+  {
+    label: "Minute",
+    value: "minute",
+  },
+  {
+    label: "Cold Day",
+    value: "coldDay",
+  },
+  {
+    label: "Cold Hour",
+    value: "coldHour",
+  },
+  {
+    label: "Cold Minute",
+    value: "coldMinute",
+  },
+];
+
+export const RecordsTTLRow = [
+  {
+    label: "Normal",
+    value: "normal",
+  },
+  {
+    label: "Trace",
+    value: "trace",
+  },
+  {
+    label: "Log",
+    value: "log",
+  },
+  {
+    label: "Zipkin Trace",
+    value: "zipkinTrace",
+  },
+  {
+    label: "Browser Error Log",
+    value: "browserErrorLog",
+  },
+  {
+    label: "Cold Normal",
+    value: "coldNormal",
+  },
+  {
+    label: "Cold Trace",
+    value: "coldTrace",
+  },
+  {
+    label: "Cold Zipkin Trace",
+    value: "coldZipkinTrace",
+  },
+  {
+    label: "Cold Log",
+    value: "coldLog",
+  },
+  {
+    label: "Cold Browser Error Log",
+    value: "coldBrowserErrorLog",
+  },
+];