diff --git a/components/landing/topCollections/TopCollectionsCard.vue b/components/landing/topCollections/TopCollectionsCard.vue
index 168f33f83d..cadd2b00af 100644
--- a/components/landing/topCollections/TopCollectionsCard.vue
+++ b/components/landing/topCollections/TopCollectionsCard.vue
@@ -1,34 +1,62 @@
 <template>
   <div
-    v-if="collection"
-    class="top-collection-card w-full border border-card-border-color hover:border-border-color bg-background-color group">
+    class="w-full border border-card-border-color hover:border-border-color bg-background-color group">
     <nuxt-link
       class="flex flex-col hover:text-text-color"
       rel="nofollow noopener noreferrer"
-      :to="`/${urlPrefix}/collection/${collection.id}`">
+      :to="`${collection?.id && `/${urlPrefix}/collection/${collection.id}`}`">
       <div
-        class="top-collection-card-banner group-hover:opacity-[0.85] bg-center bg-cover"
-        :style="{ backgroundImage: `url(${collection.image})` }">
-        <div class="top-collection-card-banner-avatar-container">
+        class="h-[112px] md:h-[142px] flex items-center justify-center group-hover:opacity-[0.85] bg-center bg-cover"
+        :style="{ backgroundImage: `url(${collection?.image})` }"
+        :class="`${!collection && 'bg-k-shade animate-pulse'}`">
+        <div class="border border-card-border-color w-[4.375rem] h-[4.375rem]">
           <BasicImage
-            custom-class="top-collection-card-banner-avatar-inner [&>img]:border [&>img]:border-card-border-color !p-0"
-            :src="collection.image || placeholder" />
+            v-if="collection"
+            custom-class="avatar-border [&>img]:border [&>img]:border-card-border-color !p-0"
+            :src="collection?.image || placeholder" />
+          <div v-else class="avatar-border relative">
+            <NeoSkeleton
+              no-margin
+              :rounded="false"
+              full-size
+              class="border border-card-border-color" />
+          </div>
         </div>
       </div>
 
-      <div class="top-collection-card-info border-t border-card-border-color">
-        <p
-          class="collection-name font-bold text-base whitespace-nowrap text-center truncate">
-          {{ collection.name }}
+      <div class="pt-3 pb-4 !px-6 border-t border-card-border-color">
+        <p class="font-bold text-base whitespace-nowrap text-center truncate">
+          <span v-if="collection?.name">{{ collection.name }}</span>
+          <span v-else class="flex justify-center">
+            <NeoSkeleton
+              no-margin
+              :rounded="false"
+              width="160"
+              height="24"
+              class="!w-min" />
+          </span>
         </p>
 
-        <div class="info-fields">
-          <div v-if="collection.floorPrice || collection.floor">
+        <div
+          class="mt-2 flex flex-col justify-between md:flex-row"
+          :class="{ 'max-md:gap-2': !collection }">
+          <div
+            class="flex flex-row justify-between items-center md:flex-col md:items-start">
             <p class="capitalize text-k-grey text-xs">
-              {{ $t('price') }}
+              <span v-if="collection?.floorPrice || collection?.floor">
+                {{ $t('price') }}
+              </span>
+              <NeoSkeleton
+                v-else
+                no-margin
+                :rounded="false"
+                width="40"
+                height="12" />
             </p>
 
-            <div class="flex gap-2 items-center max-md:flex-row-reverse">
+            <div
+              v-if="collection?.floorPrice || collection?.floor"
+              class="flex gap-2 items-center max-md:flex-row-reverse">
               <CommonTokenMoney
                 :value="collection.floorPrice || collection.floor"
                 inline
@@ -38,63 +66,45 @@
                 {{ formattedDiffPercent }}
               </div>
             </div>
+            <NeoSkeleton
+              v-else
+              no-margin
+              :rounded="false"
+              width="80"
+              height="20"
+              class="!w-min md:mt-1" />
           </div>
 
-          <div>
+          <div
+            class="flex flex-row justify-between items-center md:flex-col md:items-end">
             <p class="capitalize text-k-grey text-end text-xs">
-              {{ $t('volume') }}
+              <span v-if="collection">{{ $t('volume') }}</span>
+              <NeoSkeleton
+                v-else
+                no-margin
+                :rounded="false"
+                width="40"
+                height="12" />
             </p>
             <div class="flex gap-2 items-center">
-              <CommonTokenMoney :value="volume" inline :round="1" />
+              <CommonTokenMoney
+                v-if="collection"
+                :value="volume"
+                inline
+                :round="1" />
+              <NeoSkeleton
+                v-else
+                no-margin
+                :rounded="false"
+                width="80"
+                class="md:mt-1"
+                height="20" />
             </div>
           </div>
         </div>
       </div>
     </nuxt-link>
   </div>
-  <div v-else class="top-collection-card-skeleton border border-border-color">
-    <div class="top-collection-card-skeleton-banner relative">
-      <NeoSkeleton no-margin :rounded="false" full-size />
-
-      <div class="top-collection-card-banner-avatar-container">
-        <div class="top-collection-card-banner-avatar-inner relative">
-          <NeoSkeleton
-            no-margin
-            :rounded="false"
-            full-size
-            class="border border-card-border-color" />
-        </div>
-      </div>
-    </div>
-
-    <div class="top-collection-card-skeleton-info">
-      <div class="flex justify-center">
-        <div class="relative w-40 h-6">
-          <NeoSkeleton no-margin :rounded="false" full-size />
-        </div>
-      </div>
-
-      <div class="info-fields">
-        <div>
-          <div class="relative w-10 h-3 mb-1">
-            <NeoSkeleton no-margin :rounded="false" full-size />
-          </div>
-          <div class="relative w-20 h-5 mt-1">
-            <NeoSkeleton no-margin :rounded="false" full-size />
-          </div>
-        </div>
-
-        <div class="flex flex-col">
-          <div class="relative w-10 h-3 mb-1">
-            <NeoSkeleton no-margin :rounded="false" full-size />
-          </div>
-          <div class="relative w-20 h-5 mt-1">
-            <NeoSkeleton no-margin :rounded="false" full-size />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -126,41 +136,7 @@ const color = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-.top-collection-card,
-.top-collection-card-skeleton {
-  @apply bg-background-color;
-
-  &-banner {
-    @apply h-[112px] md:h-[142px] flex items-center justify-center;
-
-    &-avatar {
-      &-container {
-        @apply border border-card-border-color w-[4.375rem] h-[4.375rem];
-      }
-      &-inner {
-        @apply border-[6px] h-full border-text-color-inverse;
-      }
-    }
-  }
-
-  &-info {
-    @apply pt-3 pb-4 px-6;
-
-    .collection-name {
-      @apply text-base;
-    }
-
-    .info-fields {
-      @apply mt-2 flex flex-col justify-between md:flex-row;
-
-      > div {
-        @apply flex flex-row justify-between items-center md:flex-col md:items-start;
-      }
-
-      > :nth-child(2) {
-        @apply md:items-end items-center;
-      }
-    }
-  }
+.avatar-border {
+  @apply border-[6px] h-full border-text-color-inverse;
 }
 </style>