diff --git a/components.d.ts b/components.d.ts
index 667372cb..5d8b4d23 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -40,7 +40,6 @@ declare module '@vue/runtime-core' {
     ReferAndEarnDialog: typeof import('./src/plugins/vuetify/@core/components/ReferAndEarnDialog.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    ShareProjectDialog: typeof import('./src/plugins/vuetify/@core/components/ShareProjectDialog.vue')['default']
     Shortcuts: typeof import('./src/plugins/vuetify/@core/components/Shortcuts.vue')['default']
     TheCustomizer: typeof import('./src/plugins/vuetify/@core/components/TheCustomizer.vue')['default']
     ThemeSwitcher: typeof import('./src/plugins/vuetify/@core/components/ThemeSwitcher.vue')['default']
diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index 7b431e38..a6922f14 100644
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -41,97 +41,55 @@ const showDiscord = window.location.host.search('ping.pub') > -1;
     <!-- sidebar -->
     <div
       class="w-64 fixed z-50 left-0 top-0 bottom-0 overflow-auto bg-base-100 border-r border-gray-100 dark:border-gray-700"
-      :class="{ block: sidebarShow, 'hidden xl:!block': !sidebarShow }"
-    >
+      :class="{ block: sidebarShow, 'hidden xl:!block': !sidebarShow }">
       <div class="flex items-center pl-4 py-4 mb-1">
         <img class="w-10 h-10" src="../../assets/logo.svg" />
         <h1 class="flex-1 ml-3 text-2xl font-semibold dark:text-white">
           Ping.pub
         </h1>
-        <div
-          class="pr-4 cursor-pointer xl:!hidden"
-          @click="sidebarShow = false"
-        >
+        <div class="pr-4 cursor-pointer xl:!hidden" @click="sidebarShow = false">
           <Icon icon="mdi-close" class="text-3xl" />
         </div>
       </div>
-      <div v-for="(item, index) of blockchain.computedChainMenu" :key="index">
-        <div
-          v-if="item?.title && item?.children?.length"
-          :tabindex="index"
-          class="collapse"
-          :class="{
-            'collapse-arrow': item?.children?.length > 0,
-            'collapse-open': index === 0 && sidebarOpen,
-            'collapse-close': index === 0 && !sidebarOpen,
-          }"
-        >
-          <input
-            type="checkbox"
-            class="cursor-pointer"
-            @click="changeOpen(index)"
-          />
+      <div v-for="(item, index) of blockchain.computedChainMenu" :key="index" class="px-2">
+        <div v-if="item?.title && item?.children?.length" :tabindex="index" class="collapse" :class="{
+          'collapse-arrow': item?.children?.length > 0,
+          'collapse-open': index === 0 && sidebarOpen,
+          'collapse-close': index === 0 && !sidebarOpen,
+        }">
+          <input type="checkbox" class="cursor-pointer" @click="changeOpen(index)" />
           <div
-            class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
-          >
-            <Icon
-              v-if="item?.icon?.icon"
-              :icon="item?.icon?.icon"
-              class="text-xl mr-2"
-              :class="{
-                'text-yellow-500': item?.title === 'Favorite',
-                'text-blue-500': item?.title !== 'Favorite',
-              }"
-            />
-            <img
-              v-if="item?.icon?.image"
-              :src="item?.icon?.image"
-              class="w-6 h-6 rounded-full mr-3"
-            />
-            <div
-              class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200"
-            >
+            class="collapse-title px-4 flex items-center h-12 cursor-pointer hover:bg-gray-100 dark:hover:bg-[#373f59]">
+            <Icon v-if="item?.icon?.icon" :icon="item?.icon?.icon" class="text-xl mr-2" :class="{
+              'text-yellow-500': item?.title === 'Favorite',
+              'text-blue-500': item?.title !== 'Favorite',
+            }" />
+            <img v-if="item?.icon?.image" :src="item?.icon?.image" class="w-6 h-6 rounded-full mr-3" />
+            <div class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200">
               {{ item?.title }}
             </div>
-            <div
-              v-if="item?.badgeContent"
-              class="mr-6 badge badge-sm"
-              :class="item?.badgeClass"
-            >
+            <div v-if="item?.badgeContent" class="mr-6 badge badge-sm" :class="item?.badgeClass">
               {{ item?.badgeContent }}
             </div>
           </div>
           <div class="collapse-content">
             <div class="menu bg-base-100 w-full">
-              <RouterLink
-                v-for="(el, key) of item?.children"
-                @click="sidebarShow = false"
-                :key="key"
+              <RouterLink v-for="(el, key) of item?.children" @click="sidebarShow = false" :key="key"
                 class="hover:bg-gray-100 dark:hover:bg-[#373f59] rounded cursor-pointer px-3 py-2 flex items-center"
-                :to="el?.to"
-                :class="{
-                  'bg-primary':
+                :to="el?.to" :class="{
+                  '!bg-primary':
                     $route.path === el?.to?.path && item?.title !== 'Favorite',
-                }"
-              >
-                <Icon
-                  v-if="!el?.icon?.image"
-                  icon="mdi:chevron-right"
-                  class="mr-2 ml-3"
-                />
-                <img
-                  v-if="el?.icon?.image"
-                  :src="el?.icon?.image"
-                  class="w-6 h-6 rounded-full mr-3 ml-4"
-                />
-                <div
-                  class="text-base capitalize text-gray-500 dark:text-gray-300"
-                  :class="{
-                    'text-white':
-                      $route.path === el?.to?.path &&
-                      item?.title !== 'Favorite',
-                  }"
-                >
+                }">
+                <Icon v-if="!el?.icon?.image" icon="mdi:chevron-right" class="mr-2 ml-3" :class="{
+                  'text-white': $route.path === el?.to?.path &&
+                    item?.title !== 'Favorite',
+                }" />
+                <img v-if="el?.icon?.image" :src="el?.icon?.image" class="w-6 h-6 rounded-full mr-3 ml-4" />
+                <div class="text-base capitalize text-gray-500 dark:text-gray-300" :class="{
+                  'text-white':
+                    $route.path === el?.to?.path &&
+                    item?.title !== 'Favorite',
+                }">
                   {{ $t(el?.title) }}
                 </div>
               </RouterLink>
@@ -139,111 +97,62 @@ const showDiscord = window.location.host.search('ping.pub') > -1;
           </div>
         </div>
 
-        <RouterLink
-          :to="item?.to"
-          v-if="item?.title && !item?.children?.length && item?.to"
-          @click="sidebarShow = false"
-          class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
-        >
-          <Icon
-            v-if="item?.icon?.icon"
-            :icon="item?.icon?.icon"
-            class="text-xl mr-2"
-            :class="{
-              'text-yellow-500': item?.title === 'Favorite',
-              'text-blue-500': item?.title !== 'Favorite',
-            }"
-          />
-          <img
-            v-if="item?.icon?.image"
-            :src="item?.icon?.image"
-            class="w-6 h-6 rounded-full mr-3"
-          />
-          <div
-            class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200"
-          >
+        <RouterLink :to="item?.to" v-if="item?.title && !item?.children?.length && item?.to" @click="sidebarShow = false"
+          class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]">
+          <Icon v-if="item?.icon?.icon" :icon="item?.icon?.icon" class="text-xl mr-2" :class="{
+            'text-yellow-500': item?.title === 'Favorite',
+            'text-blue-500': item?.title !== 'Favorite',
+          }" />
+          <img v-if="item?.icon?.image" :src="item?.icon?.image" class="w-6 h-6 rounded-full mr-3" />
+          <div class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200">
             {{ item?.title }}
           </div>
-          <div
-            v-if="item?.badgeContent"
-            class="mr-6 badge badge-sm"
-            :class="item?.badgeClass"
-          >
+          <div v-if="item?.badgeContent" class="mr-6 badge badge-sm" :class="item?.badgeClass">
             {{ item?.badgeContent }}
           </div>
         </RouterLink>
-        <div
-          v-if="item?.heading"
-          class="px-4 text-sm pt-4 text-gray-400 pb-2 uppercase"
-        >
+        <div v-if="item?.heading" class="px-4 text-sm pt-3 text-gray-400 pb-2 uppercase">
           {{ item?.heading }}
         </div>
       </div>
-      <div>
+      <div class="px-2">
         <div class="px-4 text-sm pt-4 text-gray-400 pb-2 uppercase">
           Sponsors
         </div>
-        <a
-          href="https://osmosis.zone"
-          class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
-        >
-          <img
-            src="https://ping.pub/logos/osmosis.jpg"
-            class="w-6 h-6 rounded-full mr-3"
-          />
-          <div
-            class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200"
-          >
+        <a href="https://osmosis.zone"
+          class="collapse-title px-4 flex items-center py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]">
+          <img src="https://ping.pub/logos/osmosis.jpg" class="w-6 h-6 rounded-full mr-3" />
+          <div class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200">
             Osmosis
           </div>
         </a>
-        <a
-          href="https://becole.com"
-          class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
-        >
-          <img
-            src="https://becole.com/static/logo/logo_becole.png"
-            class="w-6 h-6 rounded-full mr-3"
-          />
-          <div
-            class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200"
-          >
+        <a href="https://becole.com"
+          class="collapse-title px-4 flex items-center py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]">
+          <img src="https://becole.com/static/logo/logo_becole.png" class="w-6 h-6 rounded-full mr-3" />
+          <div class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200">
             Becole
           </div>
         </a>
 
         <div class="px-4 text-sm pt-4 text-gray-400 pb-2 uppercase">Links</div>
-        <a
-          href="https://twitter.com/ping_pub"
-          class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
-        >
+        <a href="https://twitter.com/ping_pub"
+          class="collapse-title px-4 flex items-center py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]">
           <Icon icon="mdi:twitter" class="text-xl mr-2" />
-          <div
-            class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200"
-          >
+          <div class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200">
             Twitter
           </div>
         </a>
-        <a
-          v-if="showDiscord"
-          href="https://discord.com/invite/CmjYVSr6GW"
-          class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
-        >
+        <a v-if="showDiscord" href="https://discord.com/invite/CmjYVSr6GW"
+          class="collapse-title px-4 flex items-center py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]">
           <Icon icon="mdi:discord" class="text-xl mr-2" />
-          <div
-            class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200"
-          >
+          <div class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200">
             Discord
           </div>
         </a>
-        <a
-          href="https://github.com/ping-pub/explorer/discussions"
-          class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
-        >
+        <a href="https://github.com/ping-pub/explorer/discussions"
+          class="collapse-title px-4 flex items-center py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]">
           <Icon icon="mdi:frequently-asked-questions" class="text-xl mr-2" />
-          <div
-            class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200"
-          >
+          <div class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200">
             FAQ
           </div>
         </a>
@@ -251,13 +160,8 @@ const showDiscord = window.location.host.search('ping.pub') > -1;
     </div>
     <div class="xl:!ml-64 px-5">
       <!-- header -->
-      <div
-        class="flex items-center py-3 bg-base-100 mb-4 rounded px-4 sticky top-0 z-10 mt-4 shadow"
-      >
-        <div
-          class="text-2xl pr-3 cursor-pointer xl:!hidden"
-          @click="sidebarShow = true"
-        >
+      <div class="flex items-center py-3 bg-base-100 mb-4 rounded px-4 sticky top-0 z-10 mt-4 shadow">
+        <div class="text-2xl pr-3 cursor-pointer xl:!hidden" @click="sidebarShow = true">
           <Icon icon="mdi-menu" />
         </div>
 
diff --git a/src/style.css b/src/style.css
index 7a7389e0..8b35c66e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -16,20 +16,6 @@
   }
 }
 
-.collapse-title,
-:where(.collapse > input[type='checkbox']) {
-  padding: 0;
-  padding-right: 0;
-  min-height: unset;
-}
-
-.collapse-open :where(.collapse-content),
-.collapse:focus:not(.collapse-close) :where(.collapse-content),
-.collapse:not(.collapse-close)
-  :where(input[type='checkbox']:checked ~ .collapse-content) {
-  padding-bottom: 0;
-}
-
 .table th:first-child {
   position: relative;
   z-index: 2;