diff --git a/src/pages/index.vue b/src/pages/index.vue
index 16de169c..c0b30ebf 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -10,10 +10,10 @@ dashboard.$subscribe((mutation, state) => {
   localStorage.setItem('favorite', JSON.stringify(state.favorite))
 })
 const keywords = ref('')
-const chains = computed(()=> {
-  if(keywords.value) {
-    return Object.values(dashboard.chains).filter( (x: ChainConfig)=>x.chainName.indexOf(keywords.value) > -1)
-  }else{
+const chains = computed(() => {
+  if (keywords.value) {
+    return Object.values(dashboard.chains).filter((x: ChainConfig) => x.chainName.indexOf(keywords.value) > -1)
+  } else {
     return Object.values(dashboard.chains)
   }
 })
@@ -21,23 +21,29 @@ const chain = useBlockchain()
 
 </script>
 <template>
-  <div class="d-flex flex-column justify-center">
-    <div class="d-flex justify-center align-center align-self-center p-1 b1">
-      <VImg src="/logo.svg" width="85" height="85"/>
-      <h1 class="text-primary text-h3 font-weight-bold d-none d-md-block ml-1">
-        Ping Dashboard<VChip>Beta</VChip>
+  <div class="">
+    <div class="flex items-center justify-center mb-6 mt-10">
+      <div class="w-16 rounded-full mr-3">
+        <img src="/logo.svg" />
+      </div>
+      <h1 class="text-primary text-6xl font-bold mr-2">
+        Ping dashboard
       </h1>
+      <div class="badge badge-info badge-outline mt-5">Beta</div>
     </div>
-    <div class="d-flex flex-column align-center">
+    <div class="text-center text-base">
       <p class="mb-1">
         {{ $t('index.slogan') }}
       </p>
-      <h2 class="mb-9">
+      <h2 class="mb-6">
         Cosmos Ecosystem Blockchains 🚀
       </h2>
     </div>
-    <VProgressLinear v-if="dashboard.status !== LoadingStatus.Loaded " indeterminate color="primary darken-2"/>
-    <VTextField v-model="keywords" variant="underlined" :placeholder="$t('index.search_placeholder')" style="max-width: 300px;" app>
+    <div v-if="dashboard.status !== LoadingStatus.Loaded" class="flex justify-center"><progress
+        class="progress progress-info w-80 h-1"></progress></div>
+        
+    <VTextField v-model="keywords" variant="underlined" :placeholder="$t('index.search_placeholder')"
+      style="max-width: 300px;" app>
       <template #append-inner>
         {{ chains.length }}/{{ dashboard.length }}
       </template>
@@ -47,7 +53,7 @@ const chain = useBlockchain()
         <VLazy min-height="40" min-width="200" transition="fade-transition">
           <ChainSummary :name="k.chainName" />
         </VLazy>
-      </VCol>    
+      </VCol>
     </VRow>
   </div>
 </template>