diff --git a/src/modules/[chain]/uptime/index.vue b/src/modules/[chain]/uptime/index.vue
index 13437e58..ab1281fe 100644
--- a/src/modules/[chain]/uptime/index.vue
+++ b/src/modules/[chain]/uptime/index.vue
@@ -1,7 +1,42 @@
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+
+interface TabItem{
+  tabName: string
+  id: number
+  value: string
+}
+
+const tab = ref('');
+const tabList: Array<TabItem> = [
+  { tabName: 'Group By Validator', id: 1, value: 'validator' },
+  { tabName: 'Group By Proposer', id: 2, value: 'proposer' },
+  ]
+
+function clickTab(item: TabItem) {
+  // toggle tab  and stop another tab fetch
+  console.log(tab, 'tab')
+}
+</script>
+
 <template>
-  <VCard>
-    UPTIME
-  </VCard>
+  <div class="">
+    <VTabs v-model="tab" class="v-tabs-pill">
+      <VTab 
+        v-for="(item, index) in tabList" 
+        :key="index" 
+        :value="item.value"
+        @click="clickTab(item)"
+      >{{ item.tabName }}</VTab>
+    </VTabs>
+    <VWindow v-model="tab" class="mt-5">
+      <VWindowItem v-for="(item, index) in tabList" :key="index" :value="item.value">
+        <!-- <ProposalListItem :proposals="store?.proposals['2']" /> -->
+       
+        <VCard> {{item.tabName}}</VCard>
+      </VWindowItem>
+    </VWindow>
+  </div>
 </template>
 <route>
   {