diff --git a/src/modules/[chain]/ibc/[connection_id].vue b/src/modules/[chain]/ibc/[connection_id].vue
index 8c4f4136..2bd4a7ec 100644
--- a/src/modules/[chain]/ibc/[connection_id].vue
+++ b/src/modules/[chain]/ibc/[connection_id].vue
@@ -136,7 +136,16 @@ function color(v: string) {
             <td>{{ v.version }}</td>
             <td>{{ v.ordering }}</td>
             <td>
-              <VChip :color="color(v.state)">{{ v.state }}</VChip>
+              <div 
+                  class="text-xs truncate relative py-2 px-4 rounded-full w-fit"
+                  :class="`text-${color(v.state)}`"
+                >
+                  <span 
+                    class="inset-x-0 inset-y-0 opacity-10 absolute"
+                    :class="`bg-${color(v.state)}`"
+                  ></span>
+                  {{ v.state }}
+                </div>
             </td>
           </tr>
         </tbody>
diff --git a/src/modules/[chain]/staking/index.vue b/src/modules/[chain]/staking/index.vue
index e782db81..ce1fd79d 100644
--- a/src/modules/[chain]/staking/index.vue
+++ b/src/modules/[chain]/staking/index.vue
@@ -163,112 +163,128 @@ const rank = function (position: number) {
         {{ list.length }}/{{ staking.params.max_validators }}
       </div>
     </div>
-    <div>
-      <VCard>
-        <VTable class="text-no-wrap table-header-bg rounded-0">
-          <thead>
-            <tr>
-              <th scope="col" style="width: 3rem">#</th>
-              <th scope="col">VALIDATOR</th>
-              <th scope="col" class="text-right">VOTING POWER</th>
-              <th scope="col" class="text-right">24h CHANGES</th>
-              <th scope="col" class="text-right">COMMISSION</th>
-              <th scope="col">ACTIONS</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(v, i) in list" :key="v.operator_address">
-              <!-- 👉 rank -->
-              <td>
-                <VChip label :color="rank(i)">
-                  {{ i + 1 }}
-                </VChip>
-              </td>
 
-              <!-- 👉 Validator -->
-              <td>
-                <div
-                  class="d-flex align-center overflow-hidden"
-                  style="max-width: 400px"
-                >
-                  <VAvatar
-                    variant="tonal"
-                    class="me-3"
-                    size="34"
-                    icon="mdi-help-circle-outline"
-                    :image="logo(v.description?.identity)"
-                  />
-                  <div class="d-flex flex-column">
-                    <h6 class="text-sm text-primary">
-                      <RouterLink
-                        :to="{
-                          name: 'chain-staking-validator',
-                          params: { validator: v.operator_address },
-                        }"
-                        class="font-weight-medium user-list-name"
-                      >
-                        {{ v.description?.moniker }}
-                      </RouterLink>
-                    </h6>
-                    <span class="text-xs">{{
-                      v.description?.website || v.description?.identity || '-'
-                    }}</span>
-                  </div>
-                </div>
-              </td>
+    <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
+      <div class="overflow-x-auto">
+        <table class="table w-full">
+        <thead>
+          <tr>
+            <th scope="col" style="width: 3rem;position: relative;">#</th>
+            <th scope="col">VALIDATOR</th>
+            <th scope="col" class="text-right">VOTING POWER</th>
+            <th scope="col" class="text-right">24h CHANGES</th>
+            <th scope="col" class="text-right">COMMISSION</th>
+            <th scope="col">ACTIONS</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(v, i) in list" :key="v.operator_address">
+            <!-- 👉 rank -->
+            <td>
+              <VChip label :color="rank(i)">
+                {{ i + 1 }}
+              </VChip>
+            </td>
 
-              <!-- 👉 Voting Power -->
-              <td class="text-right">
+            <!-- 👉 Validator -->
+            <td>
+              <div
+                class="d-flex align-center overflow-hidden"
+                style="max-width: 400px"
+              >
+                <VAvatar
+                  variant="tonal"
+                  class="me-3"
+                  size="34"
+                  icon="mdi-help-circle-outline"
+                  :image="logo(v.description?.identity)"
+                />
                 <div class="d-flex flex-column">
-                  <h6 class="text-sm font-weight-medium">
-                    {{
-                      format.formatToken(
-                        {
-                          amount: parseInt(v.tokens).toString(),
-                          denom: staking.params.bond_denom,
-                        },
-                        true,
-                        '0,0'
-                      )
-                    }}
+                  <h6 class="text-sm text-primary">
+                    <RouterLink
+                      :to="{
+                        name: 'chain-staking-validator',
+                        params: { validator: v.operator_address },
+                      }"
+                      class="font-weight-medium user-list-name"
+                    >
+                      {{ v.description?.moniker }}
+                    </RouterLink>
                   </h6>
                   <span class="text-xs">{{
-                    format.calculatePercent(
-                      v.delegator_shares,
-                      staking.totalPower
-                    )
+                    v.description?.website || v.description?.identity || '-'
                   }}</span>
                 </div>
-              </td>
-              <!-- 👉 24h Changes -->
-              <td
-                class="text-right text-xs"
-                :class="change24Color(v.consensus_pubkey)"
-              >
-                {{ change24Text(v.consensus_pubkey) }}
-                <VChip label v-if="v.jailed" color="error">Jailed</VChip>
-              </td>
-              <!-- 👉 commission -->
-              <td class="text-right">
-                {{
-                  format.formatCommissionRate(
-                    v.commission?.commission_rates?.rate
+              </div>
+            </td>
+
+            <!-- 👉 Voting Power -->
+            <td class="text-right">
+              <div class="d-flex flex-column">
+                <h6 class="text-sm font-weight-medium">
+                  {{
+                    format.formatToken(
+                      {
+                        amount: parseInt(v.tokens).toString(),
+                        denom: staking.params.bond_denom,
+                      },
+                      true,
+                      '0,0'
+                    )
+                  }}
+                </h6>
+                <span class="text-xs">{{
+                  format.calculatePercent(
+                    v.delegator_shares,
+                    staking.totalPower
                   )
-                }}
-              </td>
-              <!-- 👉 Action -->
-              <td>
-                {{ 2 }}
-              </td>
-            </tr>
-          </tbody>
-        </VTable>
-        <VDivider />
-        <VCardActions class="py-2">
-          <VChip label color="error">Top 33%</VChip>
-          <VChip label color="warning" class="mx-2">Top 67%</VChip>
-        </VCardActions>
-      </VCard>
+                }}</span>
+              </div>
+            </td>
+            <!-- 👉 24h Changes -->
+            <td
+              class="text-right text-xs"
+              :class="change24Color(v.consensus_pubkey)"
+            >
+              {{ change24Text(v.consensus_pubkey) }}
+              <VChip label v-if="v.jailed" color="error">Jailed</VChip>
+            </td>
+            <!-- 👉 commission -->
+            <td class="text-right">
+              {{
+                format.formatCommissionRate(
+                  v.commission?.commission_rates?.rate
+                )
+              }}
+            </td>
+            <!-- 👉 Action -->
+            <td>
+              {{ 2 }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      </div>
+     
+      <div class="divider"></div>
+      <div class="flex flex-row">
+        <div 
+          class="text-xs truncate relative py-2 px-4 rounded-md w-fit text-error mr-2"
+        >
+          <span 
+            class="inset-x-0 inset-y-0 opacity-10 absolute bg-error"
+          ></span>
+          Top 33%
+        </div>
+        <div 
+          class="text-xs truncate relative py-2 px-4 rounded-md w-fit text-warning"
+        >
+          <span 
+            class="inset-x-0 inset-y-0 opacity-10 absolute bg-warning"
+          ></span>
+          Top 67%
+        </div>
+      </div>
     </div>
   </div>
 </template>