diff --git a/components/BookshelfItem.vue b/components/BookshelfItem.vue
index b8120bbb..733296e4 100644
--- a/components/BookshelfItem.vue
+++ b/components/BookshelfItem.vue
@@ -2,14 +2,14 @@
   <li
     ref="lazyLoadTrigger"
     class="flex flex-col justify-end"
-    :class="!props.isOwned && props.stakedAmount > 0 ? 'opacity-50' : 'opacity-100'"
+    :class="!props.isOwned ? 'opacity-50' : 'opacity-100'"
   >
     <BookCover
       :src="bookCoverSrc"
       :alt="bookInfo.name.value"
       :lazy="props.lazy"
       :is-claimable="isClaimable"
-      :is-staked="hasStakes"
+      :is-staked="false"
       :has-shadow="true"
       @click="handleCoverClick"
     />
@@ -103,28 +103,6 @@
         >{{ bookInfo.authorName }}</NuxtLink>
       </div>
     </div>
-
-    <!-- Staking info section -->
-    <div class="mt-3 space-y-1 text-toned text-xs">
-      <BookItemStatsRow
-        :label="$t('staking_dashboard_staked')"
-        :is-hidden="stakedAmount <= 0"
-      >
-        <BalanceLabel
-          :value="stakedAmount"
-          :is-compact="true"
-        />
-      </BookItemStatsRow>
-      <BookItemStatsRow
-        :label="$t('staking_dashboard_rewards')"
-        :is-hidden="pendingRewards <= 0"
-      >
-        <BalanceLabel
-          :value="pendingRewards"
-          :is-compact="true"
-        />
-      </BookItemStatsRow>
-    </div>
   </li>
 </template>
 
@@ -148,14 +126,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  stakedAmount: {
-    type: Number,
-    default: 0,
-  },
-  pendingRewards: {
-    type: Number,
-    default: 0,
-  },
   isOwned: {
     type: Boolean,
     default: true,
@@ -184,8 +154,6 @@ const progressPercentage = computed(() => Math.round(props.progress * 100))
 
 const isDesktopScreen = useDesktopScreen()
 
-const hasStakes = computed(() => props.stakedAmount > 0)
-
 const menuItems = computed<DropdownMenuItem[]>(() => {
   const genericItems: DropdownMenuItem[] = []
   const readerItems: DropdownMenuItem[] = []
diff --git a/components/BookstoreItem.vue b/components/BookstoreItem.vue
index 50fa3a26..5ad6b324 100644
--- a/components/BookstoreItem.vue
+++ b/components/BookstoreItem.vue
@@ -49,32 +49,15 @@
       />
     </div>
 
-    <!-- Staking info for staking mode -->
-    <div class="mt-3 space-y-1 text-muted text-xs">
-      <BookItemStatsRow
-        :label="$t('staking_explore_total_staked')"
-        :is-hidden="totalStaked <= 0"
-        :to="stakingRoute"
-      >
-        <BalanceLabel
-          :value="totalStaked"
-          :is-bold="false"
-          :is-compact="true"
-        />
-      </BookItemStatsRow>
-      <BookItemStatsRow
-        :label="$t('staking_explore_stakers')"
-        :is-hidden="totalStaked <= 0"
-        :to="stakingRoute"
-      >
-        <BalanceLabel
-          :value="stakerCount"
-          :is-compact="true"
-          :is-bold="false"
-          currency=""
-        />
-      </BookItemStatsRow>
-    </div>
+    <!-- LikeRank -->
+    <BookItemStatsRow
+      class="mt-3 text-muted text-xs"
+      :is-hidden="likeRank <= 0"
+      :label="$t('staking_like_rank')"
+      :to="stakingRoute"
+    >
+      <span class="font-semibold">#{{ likeRank }}</span>
+    </BookItemStatsRow>
   </li>
 </template>
 
@@ -108,11 +91,7 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  totalStaked: {
-    type: Number,
-    default: 0,
-  },
-  stakerCount: {
+  likeRank: {
     type: Number,
     default: 0,
   },
diff --git a/composables/use-nft-class-staking-data.ts b/composables/use-nft-class-staking-data.ts
index 482c076f..6f1e9d5a 100644
--- a/composables/use-nft-class-staking-data.ts
+++ b/composables/use-nft-class-staking-data.ts
@@ -42,6 +42,10 @@ export function useNFTClassStakingData(nftClassId: ComputedRef<string>) {
     return stakingStore.getNumberOfStakersCached(nftClassId.value)
   })
 
+  const stakingRank = computed(() => {
+    return stakingStore.getStakingRankCached(nftClassId.value)
+  })
+
   // Load staking data from blockchain
   async function loadStakingData() {
     try {
@@ -124,6 +128,7 @@ export function useNFTClassStakingData(nftClassId: ComputedRef<string>) {
     pendingRewards,
     isClaimingRewards,
     numberOfStakers,
+    stakingRank,
     // Computed
     formattedTotalStake,
     formattedUserStake,
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 07b04cb5..c1c509b8 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -687,6 +687,7 @@
   "staking_explore_total_staked": "Staked",
   "staking_info_tab_staking_info": "Staking",
   "staking_learn_more": "Learn more about Staking",
+  "staking_like_rank": "LikeRank",
   "staking_of_total": "{percentage}% of total",
   "staking_pending_rewards": "Pending rewards",
   "staking_stake_button": "Stake",
diff --git a/i18n/locales/zh-Hant.json b/i18n/locales/zh-Hant.json
index 69bafc3f..fadff93f 100644
--- a/i18n/locales/zh-Hant.json
+++ b/i18n/locales/zh-Hant.json
@@ -687,6 +687,7 @@
   "staking_explore_total_staked": "應援指數",
   "staking_info_tab_staking_info": "應援指數",
   "staking_learn_more": "甚麼是應援？",
+  "staking_like_rank": "LikeRank",
   "staking_of_total": "佔比 {percentage}%",
   "staking_pending_rewards": "待領收益",
   "staking_stake_button": "質押",
diff --git a/pages/shelf/[[walletAddress]].vue b/pages/shelf/[[walletAddress]].vue
index 70387da4..9302dc2d 100644
--- a/pages/shelf/[[walletAddress]].vue
+++ b/pages/shelf/[[walletAddress]].vue
@@ -128,8 +128,6 @@
           :class="getGridItemClassesByIndex(index)"
           :nft-class-id="item.nftClassId"
           :nft-ids="item.nftIds"
-          :staked-amount="item.stakedAmount"
-          :pending-rewards="item.pendingRewards"
           :is-owned="item.isOwned"
           :progress="item.progress"
           :lazy="index >= columnMax"
diff --git a/pages/store/[nftClassId]/index.vue b/pages/store/[nftClassId]/index.vue
index f270bfe3..20817096 100644
--- a/pages/store/[nftClassId]/index.vue
+++ b/pages/store/[nftClassId]/index.vue
@@ -276,6 +276,20 @@
                   />
                 </div>
               </UCard>
+              <UCard
+                v-if="stakingRank > 0"
+                :ui="{ body: 'p-4' }"
+              >
+                <div class="text-center">
+                  <div class="text-2xl font-semibold">
+                    #{{ stakingRank }}
+                  </div>
+                  <div
+                    class="mt-1 text-sm text-muted"
+                    v-text="$t('staking_like_rank')"
+                  />
+                </div>
+              </UCard>
               <UCard
                 v-if="hasLoggedIn"
                 :ui="{ body: 'p-4' }"
@@ -883,6 +897,7 @@ const {
   formattedUserStake,
   formattedPendingRewards,
   numberOfStakers,
+  stakingRank,
   handleClaimRewards,
   loadStakingData,
 } = useNFTClassStakingData(nftClassId)
diff --git a/pages/store/index.vue b/pages/store/index.vue
index 48084e6d..20de21c4 100644
--- a/pages/store/index.vue
+++ b/pages/store/index.vue
@@ -356,8 +356,7 @@
           :book-name="item.title"
           :book-cover-src="item.imageUrl"
           :price="item.minPrice"
-          :total-staked="Number(formatUnits(item.totalStaked ?? 0n, likeCoinTokenDecimals))"
-          :staker-count="item.stakerCount ?? 0"
+          :like-rank="item.likeRank ?? 0"
           :lazy="index >= columnMax"
           :ll-medium="llMedium"
           ll-source="bookstore"
@@ -379,10 +378,8 @@
 </template>
 
 <script setup lang="ts">
-import { formatUnits } from 'viem'
 import { getGenreI18nKey } from '~/constants/book-categories'
 
-const { likeCoinTokenDecimals } = useRuntimeConfig().public
 const { t: $t, locale } = useI18n()
 const localeRoute = useLocaleRoute()
 const route = useRoute()
@@ -668,13 +665,15 @@ const searchResults = computed<BookstoreItemList | null>(() => {
 
 const cmsProducts = computed<BookstoreItemList>(() => {
   const apiSortValue = mapTagIdToAPIStakingSortValue(STAKING_TAG_DEFAULT)
-  const stakingData = bookstoreStore.getStakingBooks(apiSortValue).items.reduce((map, item) => {
+  const stakingItems = bookstoreStore.getStakingBooks(apiSortValue).items
+  const stakingData = stakingItems.reduce((map, item) => {
     map[item.nftClassId.toLowerCase()] = {
       totalStaked: item.totalStaked,
       stakerCount: item.stakerCount,
+      likeRank: item.likeRank,
     }
     return map
-  }, {} as Record<string, { totalStaked: bigint, stakerCount: number }>)
+  }, {} as Record<string, { totalStaked: bigint, stakerCount: number, likeRank?: number }>)
 
   const listingProducts = bookstoreStore.getBookstoreCMSProductsByTagId(tagId.value)
   const items = listingProducts.items.map((item) => {
@@ -683,6 +682,7 @@ const cmsProducts = computed<BookstoreItemList>(() => {
       ...item,
       totalStaked: stakingInfo?.totalStaked ?? 0n,
       stakerCount: stakingInfo?.stakerCount ?? 0,
+      likeRank: stakingInfo?.likeRank ?? 0,
     }
   })
 
@@ -731,6 +731,7 @@ const products = computed<BookstoreItemList>(() => {
         minPrice: undefined,
         totalStaked: item.totalStaked,
         stakerCount: item.stakerCount,
+        likeRank: item.likeRank,
       })
     })
     return {
diff --git a/shared/utils/collective-indexer.ts b/shared/utils/collective-indexer.ts
index c783224a..a0184f58 100644
--- a/shared/utils/collective-indexer.ts
+++ b/shared/utils/collective-indexer.ts
@@ -20,6 +20,7 @@ export interface CollectiveBookNFT {
   staked_amount: string
   last_staked_at: string | null
   number_of_stakers: number
+  staking_rank?: number
 }
 
 export interface CollectiveAccountBookNFT {
diff --git a/stores/bookstore.ts b/stores/bookstore.ts
index 4c3c52e1..dc5cce78 100644
--- a/stores/bookstore.ts
+++ b/stores/bookstore.ts
@@ -26,6 +26,7 @@ interface StakingBooks {
     nftClassId: string
     totalStaked: bigint
     stakerCount: number
+    likeRank: number
   }>
   isFetching: boolean
   hasFetched: boolean
@@ -383,16 +384,16 @@ export const useBookstoreStore = defineStore('bookstore', () => {
         'sort_by': sortBy as 'staked_amount' | 'last_staked_at' | 'number_of_stakers',
       })
 
+      const currentOffset = Number(stakingBooksMap.value[sortBy].offset ?? 0)
       const bookNFTs = result.data
-        .map(bookNFT => ({
+        .filter(bookNFT => BigInt(bookNFT.staked_amount || 0) > 0)
+        .map((bookNFT, index) => ({
           nftClassId: normalizeNFTClassId(bookNFT.evm_address),
           totalStaked: BigInt(bookNFT.staked_amount || 0),
           stakerCount: bookNFT.number_of_stakers,
           lastStakedAt: bookNFT.last_staked_at,
+          likeRank: currentOffset + index + 1,
         }))
-        .filter((bookNFT) => {
-          return bookNFT.totalStaked > 0
-        })
 
       if (isRefresh) {
         stakingBooksMap.value[sortBy].items = bookNFTs
diff --git a/stores/staking.ts b/stores/staking.ts
index c217881a..653f9d09 100644
--- a/stores/staking.ts
+++ b/stores/staking.ts
@@ -19,6 +19,7 @@ interface NFTClassTotalStake {
   nftClassId: string
   totalStake: bigint
   numberOfStakers: number
+  stakingRank: number
   isFetching: boolean
 }
 
@@ -56,6 +57,10 @@ export const useStakingStore = defineStore('staking', () => {
     return totalStakeByNFTClassMap.value[nftClassId]?.totalStake ?? 0n
   })
 
+  const getStakingRankCached = computed(() => (nftClassId: string) => {
+    return totalStakeByNFTClassMap.value[nftClassId]?.stakingRank ?? 0
+  })
+
   const getNumberOfStakersCached = computed(() => (nftClassId: string) => {
     return totalStakeByNFTClassMap.value[nftClassId]?.numberOfStakers ?? 0
   })
@@ -207,6 +212,7 @@ export const useStakingStore = defineStore('staking', () => {
           nftClassId,
           totalStake: 0n,
           numberOfStakers: 0,
+          stakingRank: 0,
           isFetching: false,
         }
       }
@@ -215,12 +221,13 @@ export const useStakingStore = defineStore('staking', () => {
 
       const [totalStake, bookNFTData] = await Promise.all([
         getTotalStakeOfNFTClass(nftClassId),
-        fetchCollectiveBookNFT(nftClassId).catch(() => ({ number_of_stakers: 0 })),
+        fetchCollectiveBookNFT(nftClassId).catch(() => ({ number_of_stakers: 0, staking_rank: undefined })),
       ])
 
       if (totalStakeByNFTClassMap.value[nftClassId]) {
         totalStakeByNFTClassMap.value[nftClassId].totalStake = totalStake
         totalStakeByNFTClassMap.value[nftClassId].numberOfStakers = bookNFTData.number_of_stakers
+        totalStakeByNFTClassMap.value[nftClassId].stakingRank = bookNFTData.staking_rank ?? 0
       }
 
       return totalStake
@@ -270,6 +277,7 @@ export const useStakingStore = defineStore('staking', () => {
     getUserStakingData,
     getFormattedTotalRewards,
     getTotalStakeOfNFTClassCached,
+    getStakingRankCached,
     getNumberOfStakersCached,
 
     fetchUserStakingData,
diff --git a/types/bookstore.d.ts b/types/bookstore.d.ts
index 13b0951c..664fbe9a 100644
--- a/types/bookstore.d.ts
+++ b/types/bookstore.d.ts
@@ -1,6 +1,7 @@
 declare interface BookstoreItem {
   totalStaked?: bigint
   stakerCount?: number
+  likeRank?: number
   id?: string
   classId?: string
   classIds?: string[]