diff --git a/amoro-web/mock/modules/overview.js b/amoro-web/mock/modules/overview.js
index 5b060e7564..31fc20d987 100644
--- a/amoro-web/mock/modules/overview.js
+++ b/amoro-web/mock/modules/overview.js
@@ -55,16 +55,15 @@ export default [
       msg: 'success',
       result: [
         { tableName: 'test_catalog.db.user', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
-        { tableName: 'test_catalog.db.user', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
-        { tableName: 'test_catalog.db.user', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
-        { tableName: 'test_catalog.db.user', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
-        { tableName: 'test_catalog.db.user', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
-        { tableName: 'test_catalog.db.user', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
-        { tableName: 'test_catalog.db.user', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
-        { tableName: 'test_catalog.db.user', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
-        { tableName: 'test_catalog.db.user', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
-        { tableName: 'test_catalog.db.user', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
-        { tableName: 'test_catalog.db.user', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
+        { tableName: 'test_catalog.db.user1', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
+        { tableName: 'test_catalog.db.user2', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
+        { tableName: 'test_catalog.db.user3', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
+        { tableName: 'test_catalog.db.user4', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
+        { tableName: 'test_catalog.db.user5', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
+        { tableName: 'test_catalog.db.user6', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
+        { tableName: 'test_catalog.db.user7', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
+        { tableName: 'test_catalog.db.user8', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
+        { tableName: 'test_catalog.db.user9', tableSize: '1774', fileCount: '2', averageFileSize: '887', healthScore: '47',},
       ]
     }),
   },
diff --git a/amoro-web/src/components/echarts/index.ts b/amoro-web/src/components/echarts/index.ts
index fd84e59ce7..e411ad3a27 100644
--- a/amoro-web/src/components/echarts/index.ts
+++ b/amoro-web/src/components/echarts/index.ts
@@ -26,7 +26,7 @@ import type {
 import {
   BarChart,
   LineChart,
-  PieChart
+  PieChart,
 } from 'echarts/charts'
 import type {
   DatasetComponentOption,
diff --git a/amoro-web/src/language/en.ts b/amoro-web/src/language/en.ts
index 24c2344ac1..3066110122 100644
--- a/amoro-web/src/language/en.ts
+++ b/amoro-web/src/language/en.ts
@@ -17,6 +17,10 @@
   */
 
 export default {
+  last30min: 'Last 30 min',
+  last8h: 'Last 8 h',
+  last24h: 'Last 24 h',
+  last7day: 'Last 7 day',
   overview: 'Overview',
   healthScore: 'Health Score',
   top10Tables: 'Top 10 Tables',
diff --git a/amoro-web/src/language/zh.ts b/amoro-web/src/language/zh.ts
index 8ac153c4cf..d5bfc818c7 100644
--- a/amoro-web/src/language/zh.ts
+++ b/amoro-web/src/language/zh.ts
@@ -17,6 +17,10 @@
   */
 
 export default {
+  last30min: '最近 30分钟',
+  last8h: '最近 8小时',
+  last24h: '最近 24小时',
+  last7day: '最近 7天',
   overview: '总览',
   healthScore: '健康度',
   top10Tables: '表TOP 10',
diff --git a/amoro-web/src/services/overview.service.ts b/amoro-web/src/services/overview.service.ts
index 2c32d145ee..f6d1e22be3 100644
--- a/amoro-web/src/services/overview.service.ts
+++ b/amoro-web/src/services/overview.service.ts
@@ -44,8 +44,8 @@ export function getTop10TableList(params: {
     params: {
       order: order || 'asc',
       orderBy: orderBy || 'healthScore',
-      count: count || 10
-    }
+      count: count || 10,
+    },
   })
 }
 
diff --git a/amoro-web/src/views/overview/components/DataSizeCard.vue b/amoro-web/src/views/overview/components/DataSizeCard.vue
index 0b6088d7a1..32cf6b1e5b 100644
--- a/amoro-web/src/views/overview/components/DataSizeCard.vue
+++ b/amoro-web/src/views/overview/components/DataSizeCard.vue
@@ -1,4 +1,3 @@
-
 <!--
 Licensed to the Apache Software Foundation (ASF) under one
 or more contributor license agreements.  See the NOTICE file
@@ -15,89 +14,97 @@ 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.
-/-->
+/ -->
 
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
-import { ref, onMounted } from 'vue';
+import { onMounted, ref } from 'vue'
 import { getDataSizeList } from '@/services/overview.service'
 import { bytesToSize, dateFormat } from '@/utils'
 import type { DataSizeItem } from '@/types/common.type'
 import Chart from '@/components/echarts/Chart.vue'
 
 const { t } = useI18n()
-const timeRange = ref('24');
+const timeRange = ref('24')
 const loading = ref<boolean>(false)
 
 function dataSizeFormatter(params: any[]): string {
-  const dataParam = params[0];
-  const dataSize = bytesToSize(dataParam.value);
-  let str = `<span style="font-size: 12px">${params[0].axisValue}</span><br/>`;
-  str += `<span style="display: inline-block;background-color:${dataParam.color}; margin-right: 6px; width: 6px;height: 6px;"></span>DataSize: ${dataSize}<br/>`;
-  return str;
+  const dataParam = params[0]
+  const dataSize = bytesToSize(dataParam.value)
+  let str = `<span style="font-size: 12px">${params[0].axisValue}</span><br/>`
+  str += `<span style="display: inline-block;background-color:${dataParam.color}; margin-right: 6px; width: 6px;height: 6px;"></span>DataSize: ${dataSize}<br/>`
+  return str
 }
 
 const dataSizeChartOption = ref({
   tooltip: {
-    trigger: 'axis', 
-    formatter:dataSizeFormatter
+    trigger: 'axis',
+    formatter: dataSizeFormatter,
   },
   legend: { data: ['DataSize'] },
   xAxis: {
     type: 'category',
-    data: ['']
+    data: [''],
   },
   yAxis: {
-    type: 'value', axisLabel: { formatter: (value: number) => { return `${bytesToSize(value)}` } }
+    type: 'value',
+    axisLabel: { formatter: (value: number) => { return `${bytesToSize(value)}` } },
   },
   series: [
     {
       name: 'DataSize',
       type: 'line',
-      data: [-1]
-    }
-  ]
+      data: [-1],
+    },
+  ],
 })
 
-const updateData = async () => {
+async function updateData() {
   try {
-    loading.value = true;
-    const times: string[] = [];
-    const dataSizeList: number[] = [];
+    loading.value = true
+    const times: string[] = []
+    const dataSizeList: number[] = []
 
-    const startTime = new Date().getTime() - parseFloat(timeRange.value) * 60 * 60 * 1000;
-    const result: DataSizeItem[] = await getDataSizeList(startTime);
+    const startTime = new Date().getTime() - Number.parseFloat(timeRange.value) * 60 * 60 * 1000
+    const result: DataSizeItem[] = await getDataSizeList(startTime)
     result.forEach((item) => {
       times.push(dateFormat(item.ts))
       dataSizeList.push(item.dataSize)
     })
-    dataSizeChartOption.value.xAxis.data = times;
-    dataSizeChartOption.value.series[0].data = dataSizeList;
-    console.log(dataSizeChartOption.value.xAxis.data)
+    dataSizeChartOption.value.xAxis.data = times
+    dataSizeChartOption.value.series[0].data = dataSizeList
   }
   catch (error) {
   }
   finally {
     loading.value = false
   }
-};
+}
 
 onMounted(() => {
   updateData()
-});
+})
 </script>
 
 <template>
   <a-card>
     <template #title>
       <a-row justify="space-between">
-        <span class="card-title" v-text="t('dataSize')"></span>
+        <span class="card-title" v-text="t('dataSize')" />
         <div style="display: flex; justify-content: space-between; align-items: center;">
-          <a-select v-model:value="timeRange" @change="updateData" style="width: 120px">
-            <a-select-option value="0.5">Last 30 min</a-select-option>
-            <a-select-option value="8">Last 8 h</a-select-option>
-            <a-select-option value="24">Last 24 h</a-select-option>
-            <a-select-option value="168">Last 7 day</a-select-option>
+          <a-select v-model:value="timeRange" style="width: 120px" @change="updateData">
+            <a-select-option value="0.5">
+              {{ t('last30min') }}
+            </a-select-option>
+            <a-select-option value="8">
+              {{ t('last8h') }}
+            </a-select-option>
+            <a-select-option value="24">
+              {{ t('last24h') }}
+            </a-select-option>
+            <a-select-option value="168">
+              {{ t('last7day') }}
+            </a-select-option>
           </a-select>
         </div>
       </a-row>
@@ -111,4 +118,4 @@ onMounted(() => {
 .card-title {
   font-size: 18px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/amoro-web/src/views/overview/components/PieChartCard.vue b/amoro-web/src/views/overview/components/PieChartCard.vue
index 96decdf59d..7f0b83b89c 100644
--- a/amoro-web/src/views/overview/components/PieChartCard.vue
+++ b/amoro-web/src/views/overview/components/PieChartCard.vue
@@ -32,29 +32,29 @@ const pieChartOption = ref({})
 
 function renderChart() {
   pieChartOption.value = {
-      tooltip: {
-        trigger: 'item',
-      },
-      legend: {
-        orient: 'vertical',
-        left: 'left',
-      },
-      series: [
-        {
-          name: props.title,
-          type: 'pie',
-          radius: '50%',
-          data: props.data,
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.5)',
-            },
+    tooltip: {
+      trigger: 'item',
+    },
+    legend: {
+      orient: 'vertical',
+      left: 'left',
+    },
+    series: [
+      {
+        name: props.title,
+        type: 'pie',
+        radius: '50%',
+        data: props.data,
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
           },
         },
-      ],
-    }
+      },
+    ],
+  }
 }
 
 onMounted(renderChart)
@@ -64,7 +64,7 @@ watch(() => props.data, renderChart)
 <template>
   <a-card class="pie-chart-card">
     <template #title>
-      <span class="card-title" v-text="title"></span>
+      <span class="card-title" v-text="title" />
     </template>
     <Chart :options="pieChartOption" />
   </a-card>
diff --git a/amoro-web/src/views/overview/components/ResourceUsageCard.vue b/amoro-web/src/views/overview/components/ResourceUsageCard.vue
index 426e915896..438e665a03 100644
--- a/amoro-web/src/views/overview/components/ResourceUsageCard.vue
+++ b/amoro-web/src/views/overview/components/ResourceUsageCard.vue
@@ -14,88 +14,96 @@ 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.
-/-->
+/ -->
 
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
-import { ref, onMounted } from 'vue';
+import { onMounted, ref } from 'vue'
 import Chart from '@/components/echarts/Chart.vue'
 import { bytesToSize, dateFormat } from '@/utils'
 import { getResourceUsageList } from '@/services/overview.service'
 import type { ResourceUsageItem } from '@/types/common.type'
 
 const { t } = useI18n()
-const timeRange = ref('24');
+const timeRange = ref('24')
 const loading = ref<boolean>(false)
 
 function resourceFormatter(params: any[]): string {
-  const cpuParam = params.find(p => p.seriesName === 'CPU');
-  const memoryParam = params.find(p => p.seriesName === 'Memory');
-  const memorySize = bytesToSize(memoryParam.value);
-  let str = `<span style="font-size: 12px">${params[0].axisValue}</span><br/>`;
-  str += `<span style="display: inline-block;background-color:${cpuParam.color}; margin-right: 6px; width: 6px;height: 6px;"></span>CPU: ${cpuParam.value} Core<br/>`;
-  str += `<span style="display: inline-block;background-color:${memoryParam.color}; margin-right: 6px; width: 6px;height: 6px;"></span>Memory: ${memorySize}<br/>`;
-  return str;
+  const cpuParam = params.find(p => p.seriesName === 'CPU')
+  const memoryParam = params.find(p => p.seriesName === 'Memory')
+  const memorySize = bytesToSize(memoryParam.value)
+  let str = `<span style="font-size: 12px">${params[0].axisValue}</span><br/>`
+  str += `<span style="display: inline-block;background-color:${cpuParam.color}; margin-right: 6px; width: 6px;height: 6px;"></span>CPU: ${cpuParam.value} Core<br/>`
+  str += `<span style="display: inline-block;background-color:${memoryParam.color}; margin-right: 6px; width: 6px;height: 6px;"></span>Memory: ${memorySize}<br/>`
+  return str
 }
 
 const option = ref({
   tooltip: {
     trigger: 'axis',
-    formatter: resourceFormatter
+    formatter: resourceFormatter,
   },
   legend: { data: ['CPU', 'Memory'] },
   xAxis: { type: 'category', data: [''] },
   yAxis: [
     { type: 'value', name: 'CPU Core', axisLabel: { formatter: '{value}' } },
-    { type: 'value', name: 'Memory', axisLabel: { formatter: (value: number) => { return `${bytesToSize(value)}` } } }
+    { type: 'value', name: 'Memory', axisLabel: { formatter: (value: number) => { return `${bytesToSize(value)}` } } },
   ],
   series: [
     { name: 'CPU', type: 'line', yAxisIndex: 0, data: [-1] },
-    { name: 'Memory', type: 'line', yAxisIndex: 1, data: [-1] }
-  ]
-});
+    { name: 'Memory', type: 'line', yAxisIndex: 1, data: [-1] },
+  ],
+})
 
-const updateData = async () => {
+async function updateData() {
   try {
-    loading.value = true;
-    const times: string[] = [];
-    const cpu: number[] = [];
-    const memory: number[] = [];
+    loading.value = true
+    const times: string[] = []
+    const cpu: number[] = []
+    const memory: number[] = []
 
-    const startTime = new Date().getTime() - parseFloat(timeRange.value) * 60 * 60 * 1000;
-    const result: ResourceUsageItem[] = await getResourceUsageList(startTime);
-    result.forEach(item => {
-      times.push(dateFormat(item.ts));
-      cpu.push(item.totalCpu);
-      memory.push(item.totalMemory);
-    });
-    option.value.xAxis.data = times;
-    option.value.series[0].data = cpu;
-    option.value.series[1].data = memory;
+    const startTime = new Date().getTime() - Number.parseFloat(timeRange.value) * 60 * 60 * 1000
+    const result: ResourceUsageItem[] = await getResourceUsageList(startTime)
+    result.forEach((item) => {
+      times.push(dateFormat(item.ts))
+      cpu.push(item.totalCpu)
+      memory.push(item.totalMemory)
+    })
+    option.value.xAxis.data = times
+    option.value.series[0].data = cpu
+    option.value.series[1].data = memory
   }
   catch (error) {
   }
   finally {
     loading.value = false
   }
-};
+}
 
 onMounted(() => {
-  updateData();
-});
+  updateData()
+})
 </script>
 
 <template>
   <a-card>
     <template #title>
       <a-row justify="space-between">
-        <span class="card-title" v-text="t('resourceUsage')"></span>
+        <span class="card-title" v-text="t('resourceUsage')" />
         <div style="display: flex; justify-content: space-between; align-items: center;">
-          <a-select v-model:value="timeRange" @change="updateData" style="width: 120px">
-            <a-select-option value='0.5'>Last 30 min</a-select-option>
-            <a-select-option value='8'>Last 8 h</a-select-option>
-            <a-select-option value='24'>Last 24 h</a-select-option>
-            <a-select-option value='168'>Last 7 day</a-select-option>
+          <a-select v-model:value="timeRange" style="width: 120px" @change="updateData">
+            <a-select-option value="0.5">
+              {{ t('last30min') }}
+            </a-select-option>
+            <a-select-option value="8">
+              {{ t('last8h') }}
+            </a-select-option>
+            <a-select-option value="24">
+              {{ t('last24h') }}
+            </a-select-option>
+            <a-select-option value="168">
+              {{ t('last7day') }}
+            </a-select-option>
           </a-select>
         </div>
       </a-row>
@@ -108,4 +116,4 @@ onMounted(() => {
 .card-title {
   font-size: 18px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/amoro-web/src/views/overview/components/Top10TablesCard.vue b/amoro-web/src/views/overview/components/Top10TablesCard.vue
index b137bda4d7..05ac76d479 100644
--- a/amoro-web/src/views/overview/components/Top10TablesCard.vue
+++ b/amoro-web/src/views/overview/components/Top10TablesCard.vue
@@ -17,7 +17,7 @@ limitations under the License.
 / -->
 
 <script lang="ts" setup>
-import { onMounted, reactive, ref,shallowReactive } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import type { ITopTableItem } from '@/types/common.type'
@@ -26,37 +26,38 @@ import { bytesToSize } from '@/utils'
 
 const { t } = useI18n()
 const router = useRouter()
-const orderBy = ref('healthScore');
+const orderBy = ref('healthScore')
 const loading = ref<boolean>(false)
 const dataSource = reactive<ITopTableItem[]>([])
 
-const columns = shallowReactive([
+const columns = computed(() => [
   {
     title: t('table'),
     dataIndex: 'tableName',
-    width: 300, 
-    ellipsis: true
+    width: 300,
+    ellipsis: true,
   },
   {
     title: t('tableSize'),
     dataIndex: 'tableSize',
-    ellipsis: true
+    ellipsis: true,
   },
   {
     title: t('fileCount'),
     dataIndex: 'fileCount',
-    ellipsis: true
+    ellipsis: true,
   },
   {
     title: t('averageFileSize'),
     dataIndex: 'averageFileSize',
-    ellipsis: true
+    width: 140,
+    ellipsis: true,
   },
   {
     title: t('healthScore'),
     dataIndex: 'healthScore',
-    ellipsis: true
-  }
+    ellipsis: true,
+  },
 ])
 
 function goTableDetail(record: ITopTableItem) {
@@ -70,7 +71,8 @@ function goTableDetail(record: ITopTableItem) {
         table: table[2],
       },
     })
-  } catch (error) {
+  }
+  catch (error) {
   }
 }
 
@@ -79,8 +81,8 @@ async function getTop10Tables() {
     loading.value = true
     dataSource.length = 0
     const params = {
-      order: orderBy.value === 'healthScore' ? 'asc': 'desc',
-      orderBy: orderBy.value
+      order: orderBy.value === 'healthScore' ? 'asc' : 'desc',
+      orderBy: orderBy.value,
     }
     const result = await getTop10TableList(params)
     result.forEach((ele: ITopTableItem) => {
@@ -103,21 +105,29 @@ onMounted(() => {
   <a-card class="top-tables-card">
     <template #title>
       <a-row justify="space-between">
-        <span class="card-title" v-text="t('top10Tables')"></span>
+        <span class="card-title" v-text="t('top10Tables')" />
 
         <div style="display: flex; justify-content: space-between; align-items: center;">
-          <a-select v-model:value="orderBy" @change="getTop10Tables" style="width: 150px">
-            <a-select-option value="tableSize">{{ t('tableSize') }}</a-select-option>
-            <a-select-option value="fileCount"> {{ t('fileCount') }}</a-select-option>
-            <a-select-option value="healthScore">{{ t('healthScore') }}</a-select-option>
+          <a-select v-model:value="orderBy" style="width: 150px" @change="getTop10Tables">
+            <a-select-option value="tableSize">
+              {{ t('tableSize') }}
+            </a-select-option>
+            <a-select-option value="fileCount">
+              {{ t('fileCount') }}
+            </a-select-option>
+            <a-select-option value="healthScore">
+              {{ t('healthScore') }}
+            </a-select-option>
           </a-select>
         </div>
       </a-row>
     </template>
 
     <div class="list-wrap">
-      <a-table class="ant-table-common" :columns="columns" :data-source="dataSource" :scroll="{ x: '100%', y: 350 }" :loading="loading"
-        :pagination="false" >
+      <a-table
+        class="ant-table-common" :columns="columns" :data-source="dataSource" :scroll="{ x: '100%', y: 350 }" :loading="loading"
+        :pagination="false"
+      >
         <template #bodyCell="{ column, record }">
           <template v-if="column.dataIndex === 'tableName'">
             <span :title="record.tableName" class="primary-link" @click="goTableDetail(record)">
diff --git a/amoro-web/src/views/overview/index.vue b/amoro-web/src/views/overview/index.vue
index a9be489e86..fe00893380 100644
--- a/amoro-web/src/views/overview/index.vue
+++ b/amoro-web/src/views/overview/index.vue
@@ -57,13 +57,13 @@ onMounted(() => {
   <div :style="{ background: '#F8F7F8', padding: '24px', minHeight: '900px' }" class="overview-content">
     <a-row :gutter="[16, 8]">
       <a-col v-for="(card, index) in singleData" :key="index" :span="6">
-        <SingleDataCard :title=t(card.key) :value="card.value" />
+        <SingleDataCard :title="t(card.key)" :value="card.value" />
       </a-col>
       <a-col :span="6">
         <MultipleDataCard :title="t('resource')" :data="multipleData" />
       </a-col>
       <a-col :span="12">
-        <ResourceUsageCard/>
+        <ResourceUsageCard />
       </a-col>
       <a-col :span="12">
         <DataSizeCard />