diff --git a/src/components/UptimeBar.vue b/src/components/UptimeBar.vue
index c67bb285..726801bd 100644
--- a/src/components/UptimeBar.vue
+++ b/src/components/UptimeBar.vue
@@ -17,7 +17,7 @@ const bars = computed(() => {
     // console.log(has, props.validato, element)
     uptime.push({
       height: element.height,
-      color: has > -1 ? 'bg-success' : 'bg-error',
+      color: has > -1 ? 'bg-green-500' : 'bg-red-500',
     });
     uptime.shift();
   });
@@ -26,12 +26,11 @@ const bars = computed(() => {
 </script>
 <template>
   <div class="d-flex items-center justify-evenly">
-    <div class="cursor-default"  v-for="(item, index) in bars" :key="index">
+    <div class="cursor-default" v-for="(item, index) in bars" :key="index">
       <div class="tooltip" :data-tip="item.height">
         <span
           :class="item.color"
-          class="rounded"
-          style="width: 1.3%"
+          style="width: 1.2%"
         >&nbsp;
         </span>
       </div>
diff --git a/src/modules/[chain]/uptime/index.vue b/src/modules/[chain]/uptime/index.vue
index 99a907f8..2d09a49b 100644
--- a/src/modules/[chain]/uptime/index.vue
+++ b/src/modules/[chain]/uptime/index.vue
@@ -135,9 +135,9 @@ function changeTab(v: string) {
         <input type="text" v-model="keyword" placeholder="Keywords to filter validators"
           class="input input-sm w-full flex-1" />
       </div>
-      <div class="grid grid-cols-1 md:!grid-cols-3 xl:!grid-cols-4 2xl:!grid-cols-6 gap-x-4 mt-4" :class="tab === '2'?'':'hidden'">
+      <div class="flex flex-row flex-wrap gap-x-4 mt-4" :class="tab === '2'?'':'hidden'">
         <div v-for="({v, signing, hex}, i) in list" :key="i">
-          <div class="flex items-center justify-between py-0">
+          <div class="flex items-center justify-between py-0 w-72">
             <label class="text-truncate text-sm">
               <span class="ml-1 text-black dark:text-white">{{ i + 1 }}.{{ v.description.moniker }}</span>
             </label>