diff --git a/src/components/CardParameter.vue b/src/components/CardParameter.vue
index 97bc1907..a301393a 100644
--- a/src/components/CardParameter.vue
+++ b/src/components/CardParameter.vue
@@ -1,10 +1,27 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue';
+import { useFormatter } from "@/stores";
 const props = defineProps({
   cardItem: {
     type: Object as PropType<{ title: string; items: Array<any> }>,
   },
 });
+
+const formatter = useFormatter()
+function calculateValue(value: any){
+  if (Array.isArray(value) ){
+    return (value[0] && value[0].amount)|| '-'
+  }
+  const newValue =  Number(value)
+  if(`${newValue}` === 'NaN' || typeof(value) === 'boolean'){
+    return value
+  }
+  
+  if (newValue < 1 && newValue > 0) {
+    return formatter.formatDecimalToPercent(value)
+  }
+  return newValue
+}
 </script>
 <template>
   <div
@@ -21,7 +38,7 @@ const props = defineProps({
         class="rounded-sm bg-active px-4 py-2"
       >
         <div class="text-xs mb-2 text-secondary">{{ item?.subtitle }}</div>
-        <div class="text-base text-main">{{ Array.isArray(item?.value) ? (item?.value[0] && item?.value[0].amount)|| '-':`${Number(item?.value)}` === 'NaN' ? item?.value : Number(item?.value)}}</div>
+        <div class="text-base text-main">{{ calculateValue(item?.value) }}</div>
       </div>
     </div>
   </div>
diff --git a/src/modules/[chain]/params/index.vue b/src/modules/[chain]/params/index.vue
index 42f9c33f..51e49eef 100644
--- a/src/modules/[chain]/params/index.vue
+++ b/src/modules/[chain]/params/index.vue
@@ -51,10 +51,6 @@ onMounted(() => {
             <ArrayObjectElement :value="store.nodeVersion?.items" :thead="false"/>
         </div>
  
-    <!-- Application Version -->
-    <!-- <TableParameter :tableItem="store.appVersion" /> -->
-    <!-- Node Information -->
-    <!-- <TableParameter :tableItem="store.nodeVersion" /> -->
   </div>
 </template>
 
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>
   {