diff --git a/app/components/Footer.vue b/app/components/Footer.vue
index 5874791a..ce262023 100644
--- a/app/components/Footer.vue
+++ b/app/components/Footer.vue
@@ -43,9 +43,9 @@ const footerLinks: Array<
 </script>
 
 <template>
-  <UContainer class="mb-8 md:mb-16">
-    <footer class="bg-muted rounded-[30px] overflow-hidden">
-      <UContainer class="px-6 md:px-[60px] py-6 md:py-[40px]">
+  <footer class="bg-muted py-16 lg:py-24 relative overflow-hidden">
+    <UContainer class="relative">
+      <div class="px-6 md:px-[60px] py-6 md:py-[40px]">
         <!-- Main Footer Content -->
         <div class="flex flex-col md:flex-row justify-between gap-8 md:gap-0">
           <!-- Become Artist Section -->
@@ -86,8 +86,7 @@ const footerLinks: Array<
             </template>
           </div>
         </div>
-      </UContainer>
-      <div class="bg-cover bg-center bg-no-repeat h-[80px] md:h-[112px]" style="background-image: url('/imgs/footer-bottom-bg.png');" />
-    </footer>
-  </UContainer>
+      </div>
+    </UContainer>
+  </footer>
 </template>
diff --git a/app/components/Navbar.vue b/app/components/Navbar.vue
index 4eef5180..6f83c202 100644
--- a/app/components/Navbar.vue
+++ b/app/components/Navbar.vue
@@ -71,43 +71,44 @@ function handleNavClick(item: NavigationMenuItem, event?: Event) {
 </script>
 
 <template>
-  <UContainer>
-    <nav class="rounded-full border border-border my-4 md:my-[26px] p-2 flex items-center gap-2 justify-between mx-auto overflow-hidden">
-      <div class="flex items-center gap-2 ml-4">
-        <Logo class="select-none w-6 h-6 md:w-8 md:h-8" :font-controlled="false" />
-        <NuxtLink
-          to="/" class="text-lg md:text-3xl font-medium font-serif italic text-foreground"
-        >
-          Chaotic
-        </NuxtLink>
-      </div>
+  <header class="border-b border-border bg-background backdrop-blur supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 w-full py-2">
+    <UContainer>
+      <nav class="flex items-center gap-2 justify-between mx-auto overflow-hidden">
+        <div class="flex items-center gap-2">
+          <Logo class="select-none w-6 h-6 md:w-8 md:h-8" :font-controlled="false" />
+          <NuxtLink to="/" class="text-lg md:text-xl font-bold font-serif italic text-foreground">
+            Chaotic
+          </NuxtLink>
+        </div>
+
+        <div class="flex items-center gap-3 md:gap-6">
+          <div class="hidden md:flex items-center">
+            <UNavigationMenu
+              :items="navItems"
+            />
+            <ThemeSwitcher v-if="!accountId" />
+          </div>
 
-      <div class="flex items-center gap-3 md:gap-6">
-        <div class="hidden md:flex items-center h-10">
-          <UNavigationMenu
-            :items="navItems"
+          <!-- Desktop Wallet -->
+          <div class="hidden md:block">
+            <NavbarWallet />
+          </div>
+
+          <!-- Mobile Menu Button -->
+          <UButton
+            icon="i-heroicons-bars-3"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            class="md:hidden"
+            @click="isBottomSheetOpen = true"
           />
           <ThemeSwitcher v-if="!accountId" />
           <NavbarShoppingCart />
         </div>
-
-        <!-- Desktop Wallet -->
-        <div class="hidden md:block">
-          <NavbarWallet />
-        </div>
-
-        <!-- Mobile Menu Button -->
-        <UButton
-          icon="i-heroicons-bars-3"
-          color="neutral"
-          variant="ghost"
-          size="sm"
-          class="md:hidden"
-          @click="isBottomSheetOpen = true"
-        />
-      </div>
-    </nav>
-  </UContainer>
+      </nav>
+    </UContainer>
+  </header>
 
   <!-- Mobile Bottom Sheet -->
   <USlideover
diff --git a/app/components/common/card/CollectionCard.client.vue b/app/components/common/card/CollectionCard.client.vue
index 51c65e00..cd9425d4 100644
--- a/app/components/common/card/CollectionCard.client.vue
+++ b/app/components/common/card/CollectionCard.client.vue
@@ -64,7 +64,7 @@ onMounted(async () => {
 
 <template>
   <article
-    class="group relative rounded-xl shadow-xs hover:shadow-sm border border-border overflow-hidden transition-all duration-300 hover:-translate-y-1"
+    class="group relative bg-background rounded-xl shadow-xs border border-border overflow-hidden transition-all duration-300 hover:-translate-y-1"
     :class="{ 'animate-pulse': isLoading }"
   >
     <NuxtLink
@@ -79,7 +79,7 @@ onMounted(async () => {
             v-if="item.image && !isLoading && !isPlaceholder"
             :src="sanitizeIpfsUrl(item.image)"
             :alt="`${item.name} collection banner`"
-            class="w-full h-full object-cover opacity-80 transition-transform duration-300 group-hover:scale-105"
+            class="w-full h-full object-cover opacity-80 transition-transform duration-300"
             loading="lazy"
             @error="imageStatus = 'placeholder'"
           >
diff --git a/app/components/drop/DropCard.vue b/app/components/drop/DropCard.vue
index 3f809946..62fd6ac0 100644
--- a/app/components/drop/DropCard.vue
+++ b/app/components/drop/DropCard.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { DropItem } from '@/types'
+import { formatBalance } from 'dedot/utils'
 import { useMintedDropsStore } from '@/stores/dropsMinted'
+import { tokenToUsd } from '@/utils/calculation'
 import { getDropAttributes, isTBA } from './utils'
 
 const props = defineProps<{
@@ -8,14 +10,50 @@ const props = defineProps<{
   showMinted?: boolean
 }>()
 
+const { currentChain } = useChain()
 const formattedDrop = ref<DropItem>()
-const { decimals, chainSymbol, currentChain } = useChain()
 
 const shouldShowDrop = computed(() =>
   props.showMinted || (formattedDrop.value && !formattedDrop.value.isMintedOut),
 )
 const isUnlimited = computed(() => formattedDrop.value?.max && formattedDrop.value.max >= Number.MAX_SAFE_INTEGER)
-const usdPrice = computed(() => tokenToUsd(Number(formattedDrop.value?.price), decimals.value, chainSymbol.value))
+
+// Format price for display
+const formattedPrice = computed(() => {
+  if (!formattedDrop.value?.price || isTBA(formattedDrop.value.price))
+    return 'TBA'
+
+  if (Number(formattedDrop.value.price) === 0)
+    return 'Free'
+
+  return formatBalance(formattedDrop.value.price, {
+    decimals: chainSpec[formattedDrop.value.chain].tokenDecimals,
+    symbol: chainSpec[formattedDrop.value.chain].tokenSymbol,
+  })
+})
+
+// Format USD equivalent
+const formattedPriceUSD = computed(() => {
+  if (!formattedDrop.value?.price || isTBA(formattedDrop.value.price) || Number(formattedDrop.value.price) === 0)
+    return ''
+
+  return tokenToUsd(Number(formattedDrop.value.price), chainSpec[formattedDrop.value.chain].tokenDecimals, chainSpec[formattedDrop.value.chain].tokenSymbol)
+})
+
+// Badge text based on drop status
+const badgeText = computed(() => {
+  if (!formattedDrop.value)
+    return ''
+
+  const status = formattedDrop.value.status
+  const isMintedOut = formattedDrop.value.isMintedOut
+
+  if (status === 'minting_live')
+    return 'Live Now'
+  if (status === 'minting_ended' || isMintedOut)
+    return 'Minted Out'
+  return 'Coming Soon'
+})
 
 onBeforeMount(async () => {
   formattedDrop.value = await getDropAttributes(props.drop.alias)
@@ -24,71 +62,96 @@ onBeforeMount(async () => {
     useMintedDropsStore().addMintedDrop(formattedDrop.value)
   }
 })
+
+const minted = computed(() => formattedDrop.value?.minted || 0)
 </script>
 
 <template>
-  <NuxtLink v-if="shouldShowDrop" :to="`/${currentChain}/drops/${drop.alias}`" class="relative border rounded-xl border-gray-300 overflow-hidden hover:shadow-lg transition-shadow hover-card-effect group">
-    <!-- Collectors on Hover -->
-    <div class="absolute top-3 right-3 z-10 opacity-0 group-hover:opacity-100 transition-all duration-300 transform group-hover:scale-100 scale-95">
-      <div v-if="formattedDrop?.minted" class="bg-secondary backdrop-blur-sm rounded-lg shadow-lg border border-white/20 p-2">
-        <div class="flex items-center gap-2">
-          <div class="flex items-center gap-1">
-            <UIcon name="mdi:account-group" class="text-gray-600 dark:text-gray-400 text-sm" />
-            <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Collected by</span>
-          </div>
+  <NuxtLink v-if="shouldShowDrop" :to="`/${currentChain}/drops/${drop.alias}`" class="relative shadow-xs border border-border rounded-xl overflow-hidden bg-background transition-all duration-300 hover:-translate-y-1 group">
+    <!-- Badge -->
+    <div class="absolute top-3 left-3 z-10">
+      <UBadge>
+        {{ badgeText }}
+      </UBadge>
+    </div>
+
+    <!-- Image Section -->
+    <div class="relative aspect-square">
+      <img :src="sanitizeIpfsUrl(drop.image)" :alt="drop.name" class="w-full h-full object-cover">
+
+      <!-- Collectors on Hover -->
+      <div class="absolute bottom-3 right-3 z-10 opacity-0 group-hover:opacity-100 transition-all duration-300 transform group-hover:scale-100 scale-95">
+        <UButton v-if="formattedDrop?.minted" icon="mdi:account-group" size="sm">
+          <span>Collected by</span>
           <DropCollectedBy :chain="currentChain" :collection-id="drop.collection" :max-address-count="3" size="small" no-background />
-        </div>
+        </UButton>
       </div>
     </div>
 
-    <img :src="sanitizeIpfsUrl(drop.image)" :alt="drop.name" class="aspect-square w-full object-cover">
-
-    <div class="p-3 md:p-4">
-      <p class="font-bold text-base md:text-lg mb-1 md:mb-2 line-clamp-2">
-        {{ drop.name }}
-      </p>
-
-      <div class="flex items-center justify-between mt-3">
-        <!-- Minting Progress -->
-        <div class="flex flex-col gap-1">
-          <div class="flex items-center gap-1 text-xs text-gray-500">
-            <span class="font-medium">Minted</span>
-          </div>
-          <div class="flex items-center gap-1 font-mono">
-            <span class="text-sm font-semibold text-[var(--text-color)]">{{ formattedDrop?.minted }}</span>
-            <span class="text-xs text-gray-400">/</span>
-            <UIcon v-if="isUnlimited" name="mdi:infinity" class="text-sm text-gray-600" />
-            <span v-else class="text-sm text-gray-600">{{ formattedDrop?.max }}</span>
-          </div>
+    <!-- Content Section -->
+    <div class="p-4 md:p-5">
+      <!-- Title and Creator -->
+      <div class="mb-4">
+        <h3 class="font-bold text-lg md:text-xl mb-2 line-clamp-2 text-foreground">
+          {{ drop.name }}
+        </h3>
+
+        <!-- Creator Section -->
+        <div v-if="drop.creator" class="flex items-center gap-2 mb-3">
+          <span class="text-xs text-muted-foreground font-medium">Created by</span>
+          <UserInfo :avatar-size="20" :address="drop.creator" :transparent-background="true" class="min-w-0" />
         </div>
+      </div>
 
-        <!-- Price Display -->
-        <div class="flex flex-col items-end gap-1">
-          <div class="text-xs text-gray-500 font-medium">
+      <!-- Stats Grid -->
+      <div class="grid grid-cols-2 gap-3 mb-4">
+        <!-- Price -->
+        <div class="bg-muted rounded-lg p-3">
+          <p class="text-xs text-muted-foreground mb-1 font-medium">
             Price
-          </div>
-          <div class="text-right">
-            <div v-if="isTBA(formattedDrop?.price)" class="px-2 py-1 bg-gray-100 rounded-md">
-              <span class="text-xs font-medium text-gray-600">TBA</span>
-            </div>
-            <div v-else-if="Number(formattedDrop?.price)" class="flex items-baseline gap-1">
-              <span class="text-sm font-semibold text-[var(--text-color)]">{{ usdPrice }}</span>
-              <span class="text-xs text-gray-500">USD</span>
-            </div>
-            <div v-else class="px-2 py-1 bg-green-50 rounded-md">
-              <span class="text-xs font-medium text-green-600">Free</span>
-            </div>
-          </div>
+          </p>
+          <p class="text-lg font-bold text-neutral-900 dark:text-white">
+            {{ formattedPrice }}
+          </p>
+          <p v-if="formattedPriceUSD" class="text-xs text-neutral-500 dark:text-neutral-500">
+            {{ formattedPriceUSD }}
+          </p>
+        </div>
+
+        <!-- Supply -->
+        <div class="bg-muted rounded-lg p-3">
+          <p class="text-xs text-muted-foreground mb-1 font-medium">
+            Supply
+          </p>
+          <p class="text-lg font-bold text-neutral-900 dark:text-white">
+            <UIcon v-if="isUnlimited" name="mdi:infinity" class="text-lg text-neutral-600" />
+            <span v-else>{{ formattedDrop?.max || 'Unknown' }}</span>
+          </p>
+          <p class="text-xs text-neutral-500 dark:text-neutral-500">
+            Total Items
+          </p>
         </div>
       </div>
 
-      <!-- Creator Section -->
-      <div v-if="drop.creator" class="mt-3 pt-3 border-t border-gray-100">
-        <div class="flex items-center gap-2">
-          <span class="text-xs text-gray-500 font-medium">Created by</span>
-          <UserInfo :avatar-size="20" :address="drop.creator" :transparent-background="true" class="min-w-0" />
+      <!-- Minting Progress -->
+      <div class="mb-4">
+        <div class="flex justify-between text-xs text-muted-foreground mb-2">
+          <span>Minted: {{ minted }}</span>
+          <span>{{ formattedDrop?.max && !isUnlimited ? Math.round((minted / formattedDrop.max) * 100) : 0 }}%</span>
         </div>
+        <UProgress v-model="minted" :max="formattedDrop?.max || 0" />
       </div>
+
+      <!-- Action Button -->
+      <UButton
+        color="neutral"
+        :variant="formattedDrop?.status === 'minting_live' ? 'solid' : 'outline'"
+        class="w-full text-sm"
+        size="md"
+        block
+      >
+        {{ formattedDrop?.status === 'minting_live' ? 'Mint Now' : 'View Collection' }}
+      </UButton>
     </div>
   </NuxtLink>
 </template>
diff --git a/app/components/drop/DropCollectedBy.vue b/app/components/drop/DropCollectedBy.vue
index e798d935..8e4d8e99 100644
--- a/app/components/drop/DropCollectedBy.vue
+++ b/app/components/drop/DropCollectedBy.vue
@@ -37,7 +37,7 @@ watchEffect(async () => {
 
 <template>
   <div
-    class="rounded-full h-[62px] md:w-auto bg-gray-100 dark:bg-neutral-800 inline-flex items-center justify-between py-1.5 px-3"
+    class="rounded-full h-[62px] md:w-auto bg-background inline-flex items-center justify-between py-1.5 px-3"
     :class="{ '!h-full !border-none !py-1 !px-2': size === 'small', 'bg-transparent': noBackground }"
   >
     <div class="flex items-center">
diff --git a/app/components/landing/CuratedArtists.vue b/app/components/landing/CuratedArtists.vue
new file mode 100644
index 00000000..53537d6c
--- /dev/null
+++ b/app/components/landing/CuratedArtists.vue
@@ -0,0 +1,158 @@
+<script lang="ts" setup>
+import type { Profile } from '@/services/profile'
+// import { getDrops } from '@/services/fxart'
+import { fetchProfileByAddress } from '@/services/profile'
+import { shortenAddress } from '~/utils/format/address'
+
+const { prefix } = usePrefix()
+
+// Reactive state
+const curatedArtists = ref<Profile[]>([])
+const isLoading = ref(true)
+
+const topCreators = [
+  '16dBfC3PW1KsDwXTEQzN66EPccPRMEwPJPoAvTyCYx3ubZkL',
+  '16iMazd1dask2PQfWbJbeMTTStvSj81bpgtFUWVUVLbQ5yYg',
+  '16GASGn5QofWzBEvfdi9bfD755n9PStDByWj6XLcyVfrwvwZ',
+  '1VshyWpZUt8mgtWKgv9pgj8Gin99Wg5PCaDL3iCABixQbUP',
+  '165s3SRHPoEC5Bv8zTeJshcMFjDdVVUXKrJZEW1Vr3xR8VBM',
+  '13uXPnWg9fnL5vcn8i4Pq4A7gwLEdgYSzztDgg8QYtsyWhLa',
+  '15GcteQcQbLtWQA1zEJyUpGk3Ehjqod4R9zwLJvxbLgLo7wm',
+  '12smhjMXzgf9PBQwnxhJ555K7ETSWZ1QoTyTxAQ7yShsUZSa',
+]
+
+// async function fetchTopCreators() {
+//   const drops = await getDrops({
+//     active: [true],
+//     chain: [prefix.value],
+//     limit: 100,
+//   })
+
+//   const countCreators: Record<string, number> = {}
+//   drops.forEach((drop) => {
+//     if (drop.creator) {
+//       countCreators[drop.creator] = (countCreators[drop.creator] || 0) + 1
+//     }
+//   })
+//   const sortedCreators = Object.entries(countCreators).sort((a, b) => b[1] - a[1])
+//   return sortedCreators.slice(0, 8)
+// }
+
+// Fetch data using onMounted
+onMounted(async () => {
+  try {
+    isLoading.value = true
+
+    const profilePromises = topCreators.map(address => fetchProfileByAddress(address))
+    curatedArtists.value = await Promise.all(profilePromises)
+  }
+  catch (error) {
+    console.error('Failed to fetch data:', error)
+    curatedArtists.value = []
+  }
+  finally {
+    isLoading.value = false
+  }
+})
+</script>
+
+<template>
+  <section class="py-16 lg:py-24">
+    <UContainer>
+      <div class="text-center mb-12">
+        <h2 class="text-3xl lg:text-4xl xl:text-5xl text-foreground mb-6 leading-tight font-serif">
+          Curated <span class="text-muted-foreground italic">Artists</span>
+        </h2>
+        <p class="text-lg text-primary max-w-3xl mx-auto leading-relaxed">
+          Follow your favorite creators and discover new talent in our carefully selected artist community
+        </p>
+      </div>
+
+      <!-- Loading State -->
+      <div v-if="isLoading" class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
+        <div v-for="i in 8" :key="i" class="bg-white dark:bg-neutral-800 rounded-xl overflow-hidden">
+          <div class="h-24 bg-neutral-200 dark:bg-neutral-700 animate-pulse" />
+          <div class="px-6 pb-6 -mt-8 relative">
+            <div class="flex items-start sm:items-center justify-between mb-4 flex-col sm:flex-row">
+              <div class="h-16 w-16 bg-neutral-200 dark:bg-neutral-700 rounded-full animate-pulse" />
+              <div class="h-8 w-20 bg-neutral-200 dark:bg-neutral-700 rounded animate-pulse mt-2 sm:mt-0" />
+            </div>
+            <div class="space-y-2">
+              <div class="h-4 bg-neutral-200 dark:bg-neutral-700 rounded animate-pulse w-3/4" />
+              <div class="h-3 bg-neutral-200 dark:bg-neutral-700 rounded animate-pulse w-1/2" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Artists Grid -->
+      <div v-else class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
+        <NuxtLink
+          v-for="artist in curatedArtists"
+          :key="artist.address"
+          :to="`/${prefix}/u/${artist.address}`"
+          class="block bg-background rounded-xl shadow transition-all duration-300 overflow-hidden cursor-pointer relative hover:-translate-y-1"
+        >
+          <!-- Cover Image Section -->
+          <div class="relative h-32 overflow-hidden">
+            <div
+              v-if="artist.image"
+              class="w-full h-full bg-cover bg-center transition-transform duration-500"
+              :style="{ backgroundImage: `url(${artist.image})` }"
+            />
+            <div
+              v-else
+              class="w-full h-full bg-gradient-to-r from-neutral-600 to-neutral-800 transition-transform duration-500"
+            />
+            <!-- Overlay for better text readability -->
+            <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
+
+            <!-- Avatar and Follow Button positioned over the cover image -->
+            <div class="absolute bottom-0 left-0 right-0 px-6 pb-4">
+              <div class="flex items-end justify-between">
+                <div class="relative">
+                  <ProfileAvatar
+                    :address="artist.address"
+                    :avatar-size="80"
+                    class="rounded-full"
+                  />
+                </div>
+
+                <FollowButton
+                  v-if="artist.address"
+                  :target="artist.address"
+                  class="bg-background rounded-full"
+                />
+              </div>
+            </div>
+          </div>
+
+          <!-- Content Section -->
+          <div class="px-6 pb-6 pt-4 relative">
+            <!-- Artist Info -->
+            <div class="space-y-3">
+              <div>
+                <h3 class="text-xl font-bold text-foreground mb-1 transition-colors">
+                  {{ artist.name || 'Unknown Artist' }}
+                </h3>
+                <p class="text-sm text-muted-foreground font-medium">
+                  @{{ artist.address ? shortenAddress(artist.address).toLowerCase().replace(/\s+/g, '_') : 'artist' }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </NuxtLink>
+      </div>
+
+      <div class="text-center">
+        <UButton
+          variant="outline"
+          color="neutral"
+          to="/ahp/artists"
+        >
+          Explore Artists
+        </UButton>
+      </div>
+    </UContainer>
+  </section>
+</template>
diff --git a/app/components/landing/FeaturedNFT.vue b/app/components/landing/FeaturedNFT.vue
new file mode 100644
index 00000000..6feb9df5
--- /dev/null
+++ b/app/components/landing/FeaturedNFT.vue
@@ -0,0 +1,232 @@
+<script lang="ts" setup>
+import type { DropItem } from '~/types'
+import { formatBalance } from 'dedot/utils'
+import { tokenToUsd } from '@/utils/calculation'
+import { ipfsToCfImageUrl } from '@/utils/ipfs'
+
+const props = defineProps<{
+  drop?: DropItem
+}>()
+
+// Format price for display
+const formattedPrice = computed(() => {
+  if (!props.drop?.price)
+    return 'Free'
+
+  return formatBalance(props.drop.price, {
+    decimals: chainSpec[props.drop.chain].tokenDecimals,
+    symbol: chainSpec[props.drop.chain].tokenSymbol,
+  })
+})
+
+// Format USD equivalent using the utility function
+const formattedPriceUSD = computed(() => {
+  if (!props.drop?.price)
+    return 'Free'
+
+  return tokenToUsd(Number(props.drop.price), chainSpec[props.drop.chain].tokenDecimals, chainSpec[props.drop.chain].tokenSymbol)
+})
+
+// Loading state
+const isLoading = computed(() => !props.drop)
+
+// Badge text based on drop status
+const badgeText = computed(() => {
+  if (!props.drop)
+    return ''
+
+  const status = props.drop.status
+  const isMintedOut = props.drop.isMintedOut
+
+  if (status === 'minting_live')
+    return 'Live Now'
+  if (status === 'minting_ended' || isMintedOut)
+    return 'Minted Out'
+  return 'Coming Soon'
+})
+
+// Function to share the drop
+function shareDrop() {
+  if (!props.drop)
+    return
+
+  const url = `${window.location.origin}/${props.drop.chain}/drops/${props.drop.alias}`
+  if (navigator.share) {
+    navigator.share({
+      title: props.drop.name || 'Untitled Collection',
+      text: props.drop.collectionDescription || 'Check out this amazing collection!',
+      url,
+    }).catch((error) => {
+      console.error('Error sharing drop:', error)
+    })
+  }
+  else {
+    // Fallback for browsers that do not support Web Share API
+    navigator.clipboard.writeText(url).catch((err) => {
+      console.error('Error copying drop URL:', err)
+    })
+  }
+}
+</script>
+
+<template>
+  <section class="py-16 lg:py-24">
+    <UContainer>
+      <div class="text-center mb-12">
+        <div class="inline-flex items-center space-x-2 bg-background backdrop-blur rounded-full px-4 py-2 mb-6 border border-border mx-auto">
+          <UIcon name="i-heroicons-star" class="h-4 w-4 text-foreground" />
+          <span class="text-sm font-medium text-foreground">Featured Collection</span>
+        </div>
+        <h2 class="text-3xl lg:text-4xl xl:text-5xl text-foreground mb-6 leading-tight font-serif">
+          Trending <span class="text-muted-foreground italic">This Week</span>
+        </h2>
+        <p class="text-lg text-primary max-w-3xl mx-auto leading-relaxed">
+          Discover the most sought-after digital art pieces from our curated collection
+        </p>
+      </div>
+
+      <div class="max-w-6xl mx-auto">
+        <!-- Loading State -->
+        <div v-if="isLoading" class="bg-background rounded-xl shadow-xl overflow-hidden border border-border">
+          <div class="grid lg:grid-cols-2 gap-0">
+            <div class="relative aspect-square bg-muted animate-pulse" />
+            <div class="p-8 lg:p-12 flex flex-col justify-center">
+              <div class="space-y-4">
+                <div class="h-8 bg-muted rounded animate-pulse" />
+                <div class="h-4 bg-muted rounded animate-pulse" />
+                <div class="h-4 bg-muted rounded animate-pulse w-3/4" />
+                <div class="h-4 bg-muted rounded animate-pulse w-1/2" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Featured Drop Content -->
+        <div v-else-if="drop" class="bg-background rounded-xl shadow-xl overflow-hidden border border-border group">
+          <div class="grid lg:grid-cols-2 gap-0">
+            <!-- Image Section -->
+            <div class="relative aspect-square">
+              <img
+                :src="ipfsToCfImageUrl(drop.image || drop.banner, 'detail')"
+                :alt="drop.name"
+                class="w-full h-full object-contain"
+              >
+              <div class="absolute top-4 left-4">
+                <UBadge class="bg-background text-foreground">
+                  {{ badgeText }}
+                </UBadge>
+              </div>
+              <div class="absolute top-4 right-4 flex space-x-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                <UButton
+                  size="sm"
+                  color="info"
+                  class="backdrop-blur size-8"
+                  icon="i-heroicons-share"
+                  @click="shareDrop"
+                />
+              </div>
+            </div>
+
+            <!-- Content Section -->
+            <div class="p-8 lg:p-12 flex flex-col justify-between">
+              <div class="mb-6">
+                <h3 class="text-3xl lg:text-4xl font-bold text-foreground mb-2">
+                  {{ drop.name || 'Untitled Collection' }}
+                </h3>
+                <div class="flex items-center space-x-3 mb-4">
+                  <div>
+                    <UserInfo
+                      :address="drop.creator || drop.collection"
+                      :avatar-size="42"
+                      :transparent-background="true"
+                      :custom-name="true"
+                    >
+                      <template #name="{ addressName }">
+                        <div>
+                          Artist:
+                          <p class="font-semibold text-foreground">
+                            {{ addressName || 'Unknown Collection' }}
+                          </p>
+                        </div>
+                      </template>
+                    </UserInfo>
+                  </div>
+                </div>
+                <p class="text-muted-foreground leading-relaxed mb-6 line-clamp-3">
+                  {{ drop.collectionDescription || 'No description available for this collection.' }}
+                </p>
+              </div>
+
+              <!-- Stats Grid -->
+              <div class="grid grid-cols-2 gap-4 mb-6">
+                <div class="bg-muted rounded-lg p-4">
+                  <p class="text-sm text-muted-foreground mb-1">
+                    Price
+                  </p>
+                  <p class="text-2xl font-bold text-foreground">
+                    {{ formattedPrice }}
+                  </p>
+                  <p class="text-sm text-neutral-500 dark:text-neutral-500">
+                    {{ formattedPriceUSD }}
+                  </p>
+                </div>
+                <div class="bg-muted rounded-lg p-4">
+                  <p class="text-sm text-muted-foreground mb-1">
+                    Supply
+                  </p>
+                  <p class="text-2xl font-bold text-foreground">
+                    {{ drop.max || 'Unknown' }}
+                  </p>
+                  <p class="text-sm text-neutral-500 dark:text-neutral-500">
+                    Total Items
+                  </p>
+                </div>
+              </div>
+
+              <!-- Minting Progress -->
+              <div class="mb-6">
+                <div class="flex justify-between text-sm text-muted-foreground mb-2">
+                  <span>Minted: {{ drop.minted || 0 }}</span>
+                  <span>{{ drop.max ? Math.round((drop.minted / drop.max) * 100) : 0 }}%</span>
+                </div>
+                <UProgress :model-value="drop.minted" :max="drop.max" />
+              </div>
+
+              <!-- Action Buttons -->
+              <div class="flex space-x-3">
+                <!-- Primary Button - Mint Now or View Details -->
+                <UButton
+                  v-if="!drop.isMintedOut"
+                  class="flex-1 text-lg"
+                  size="lg"
+                  block
+                  :to="`/${drop.chain}/drops/${drop.alias}`"
+                >
+                  {{ drop.status === 'minting_live' ? 'Mint Now' : 'View Details' }}
+                </UButton>
+
+                <!-- Secondary Button - Always show View Collection -->
+                <UButton
+                  variant="outline"
+                  class="flex-1 text-lg"
+                  size="lg"
+                  block
+                  :to="`/${drop.chain}/collection/${drop.collection}`"
+                >
+                  View Collection
+                </UButton>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- No Featured Drop State -->
+        <div v-else class="text-center py-12">
+          <p class="text-muted-foreground">
+            No featured drops available at the moment.
+          </p>
+        </div>
+      </div>
+    </UContainer>
+  </section>
+</template>
diff --git a/app/components/landing/LandingPage.vue b/app/components/landing/LandingPage.vue
index ec55082c..d98ef407 100644
--- a/app/components/landing/LandingPage.vue
+++ b/app/components/landing/LandingPage.vue
@@ -1,32 +1,103 @@
 <script lang="ts" setup>
+import type { DropItem } from '~/types'
+import { getDrops } from '~/services/fxart'
+import { getEnrichedDrop } from '../drop/utils'
+
+const dropItems = ref<DropItem[]>([])
+
+onMounted(async () => {
+  const drops = await getDrops({
+    active: [true],
+    chain: ['ahp'],
+    limit: 9,
+  })
+
+  dropItems.value = (await Promise.all(drops.map(getEnrichedDrop))).filter((item): item is DropItem => item !== undefined)
+})
 </script>
 
 <template>
   <div>
-    <!-- <img
-      src="/img/landing/landing-bg.png" alt="Landing Background" class="w-full h-full object-cover bg-transparent opacity-[10%] mix-blend-exclusion"
-    > -->
-    <Navbar />
-
-    <UContainer>
-      <div class="flex flex-col items-center justify-center mt-4 mb-6 md:mt-[25px] md:mb-[35px]">
-        <div class="font-medium text-3xl md:text-[51px] capitalize font-serif italic text-center text-foreground">
-          {{ $t('landing.title') }}
-        </div>
-        <div class="text-base md:text-xl capitalize opacity-[0.66] text-center mt-2 text-muted-foreground">
-          {{ $t('landing.subtitle') }}
-        </div>
+    <!-- Hero Section -->
+    <section class="relative py-16 lg:py-32 overflow-hidden bg-muted">
+      <!-- Background Pattern -->
+      <div class="absolute inset-0 opacity-10 dark:opacity-20">
+        <div class="absolute inset-0" style="background-image: radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0); background-size: 24px 24px;" />
       </div>
 
-      <LandingDropBanner />
-    </UContainer>
+      <UContainer class="relative">
+        <div class="text-center max-w-4xl mx-auto">
+          <!-- Badge -->
+          <UButton
+            href="https://medium.com/chaoticart/chaotic-a-fresh-start-for-polkadot-nfts-c285c2d724f4"
+            target="_blank"
+            variant="outline"
+            size="sm"
+            class="mb-8"
+          >
+            <UIcon name="i-heroicons-sparkles" class="h-4 w-4" />
+            <span class="text-sm font-medium">New: Chaotic NFT Marketplace Launch</span>
+          </UButton>
+
+          <!-- Main Heading -->
+          <h1 class="text-4xl sm:text-5xl lg:text-7xl text-foreground mb-6 leading-tight font-serif">
+            Your
+            <span class="text-muted-foreground italic">
+              Polkadot
+            </span>
+            NFT
+            <br>
+            Marketplace
+          </h1>
 
-    <LazyLandingArtistsList :hydrate-on-visible="{ rootMargin: '600px' }" />
+          <!-- Description -->
+          <p class="text-xl text-primary mb-10 max-w-3xl mx-auto leading-relaxed">
+            Create, collect, and sell extraordinary NFTs on the most advanced blockchain. Join thousands of artists and
+            collectors in the decentralized future.
+          </p>
 
-    <UContainer>
-      <LazyLandingTopCollections :hydrate-on-visible="{ rootMargin: '600px' }" />
+          <!-- Action Buttons -->
+          <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
+            <UButton
+              to="/ahp/explore/collectibles"
+              size="lg"
+              variant="solid"
+              class="px-8 py-3 text-lg"
+            >
+              Start Exploring
+              <UIcon name="i-heroicons-arrow-right" class="ml-2 h-5 w-5" />
+            </UButton>
+            <UButton
+              to="/create/nft"
+              size="lg"
+              variant="outline"
+              class="px-8 py-3 text-lg"
+            >
+              Create NFT
+            </UButton>
+          </div>
+        </div>
+      </UContainer>
+    </section>
+
+    <!-- Featured NFT Section -->
+    <FeaturedNFT :drop="dropItems[0]" />
+
+    <!-- Latest Drops Section -->
+    <LatestDrops :drops="dropItems.slice(0, 9)" :hydrate-on-visible="{ rootMargin: '600px' }" />
+
+    <!-- Curated Artists Section -->
+    <LazyCuratedArtists :hydrate-on-visible="{ rootMargin: '600px' }" />
+
+    <div class="bg-muted py-16">
+      <UContainer>
+        <LazyLandingTopCollections :hydrate-on-visible="{ rootMargin: '600px' }" />
       <!-- <LazyArticles :hydrate-on-visible="{ rootMargin: '300px' }" /> -->
-    </UContainer>
+      </UContainer>
+    </div>
+
+    <!-- Partners Section -->
+    <LazyPartners :hydrate-on-visible="{ rootMargin: '600px' }" />
 
     <LazyDropMintModal />
   </div>
diff --git a/app/components/landing/LatestDrops.vue b/app/components/landing/LatestDrops.vue
new file mode 100644
index 00000000..540c54e4
--- /dev/null
+++ b/app/components/landing/LatestDrops.vue
@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import type { DropItem } from '~/types'
+import DropCard from '@/components/drop/DropCard.vue'
+
+const props = defineProps<{
+  drops: DropItem[]
+}>()
+
+const { prefix } = usePrefix()
+
+// Loading state
+const isLoading = computed(() => !props.drops || props.drops.length === 0)
+
+// Filter out undefined drops and skip the first one (already shown in FeaturedNFT)
+const filteredDrops = computed(() => props.drops?.filter((drop): drop is NonNullable<typeof drop> => Boolean(drop)).slice(1, 9) || [])
+</script>
+
+<template>
+  <section class="py-16 lg:py-24 bg-neutral-50 dark:bg-neutral-900">
+    <UContainer>
+      <div class="text-center mb-12">
+        <h2 class="text-3xl lg:text-4xl xl:text-5xl text-neutral-900 dark:text-white mb-6 leading-tight font-serif">
+          Latest <span class="text-neutral-500 italic">Generative Art</span>
+        </h2>
+        <p class="text-lg text-neutral-600 dark:text-neutral-400 max-w-3xl mx-auto leading-relaxed">
+          Discover the most recent generative art collections from talented artists worldwide
+        </p>
+      </div>
+
+      <!-- Loading State -->
+      <div v-if="isLoading" class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        <div v-for="i in 8" :key="i" class="bg-white dark:bg-neutral-800 rounded-xl shadow overflow-hidden">
+          <div class="relative aspect-square bg-neutral-200 dark:bg-neutral-700 animate-pulse" />
+          <div class="p-6 space-y-4">
+            <div class="h-6 bg-neutral-200 dark:bg-neutral-700 rounded animate-pulse" />
+            <div class="h-4 bg-neutral-200 dark:bg-neutral-700 rounded animate-pulse w-3/4" />
+            <div class="h-4 bg-neutral-200 dark:bg-neutral-700 rounded animate-pulse w-1/2" />
+          </div>
+        </div>
+      </div>
+
+      <!-- Drops Grid -->
+      <div class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        <ClientOnly>
+          <DropCard
+            v-for="drop in filteredDrops"
+            :key="drop.id"
+            :drop="drop"
+            :show-minted="true"
+          />
+        </ClientOnly>
+      </div>
+
+      <div class="text-center mt-12">
+        <UButton
+          variant="outline"
+          color="neutral"
+          :to="`/${prefix}/drops`"
+          class="px-8 py-2 rounded-full"
+        >
+          View All Drops
+        </UButton>
+      </div>
+    </UContainer>
+  </section>
+</template>
diff --git a/app/components/landing/Partners.vue b/app/components/landing/Partners.vue
new file mode 100644
index 00000000..0f1b136c
--- /dev/null
+++ b/app/components/landing/Partners.vue
@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+// Partner data with existing logos from public/partners directory
+const partners = [
+  {
+    name: 'Clover',
+    logo: '/partners/logo-clover.png',
+  },
+  {
+    name: 'Enkrypt',
+    logo: '/partners/logo-enkrypt.png',
+  },
+  {
+    name: 'Ledger',
+    logo: '/partners/logo-ledger.svg',
+  },
+  {
+    name: 'MathWallet',
+    logo: '/partners/logo-mathwallet.png',
+  },
+  {
+    name: 'Nova',
+    logo: '/partners/logo-nova.png',
+  },
+  {
+    name: 'Polkadot.js',
+    logo: '/partners/logo-polkadot-js.png',
+  },
+  {
+    name: 'Reown',
+    logo: '/partners/logo-reown.png',
+  },
+  {
+    name: 'SubWallet',
+    logo: '/partners/logo-subwallet.svg',
+  },
+  {
+    name: 'Talisman',
+    logo: '/partners/logo-talisman.svg',
+  },
+]
+</script>
+
+<template>
+  <section class="py-16 lg:py-24 relative overflow-hidden">
+    <UContainer class="relative">
+      <!-- Header Section -->
+      <div class="text-center mb-16">
+        <div class="inline-flex items-center space-x-2 bg-background backdrop-blur rounded-full px-4 py-2 mb-6 border border-border">
+          <UIcon name="i-heroicons-shield-check" class="h-4 w-4 text-foreground" />
+          <span class="text-sm font-medium text-foreground">Trusted Partnerships</span>
+        </div>
+
+        <h2 class="text-3xl lg:text-4xl xl:text-5xl text-foreground mb-6 leading-tight font-serif">
+          Our <span class="text-muted-foreground italic">Partners</span>
+        </h2>
+        <p class="text-lg text-primary max-w-3xl mx-auto leading-relaxed">
+          We collaborate with leading projects in the blockchain ecosystem to bring you the best experience and build the future of Web3 together.
+        </p>
+      </div>
+
+      <!-- Partners Grid -->
+      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6 lg:gap-8 mb-12">
+        <div
+          v-for="partner in partners"
+          :key="partner.name"
+          class="group relative"
+        >
+          <!-- Partner Card -->
+          <div class="bg-background rounded-xl shadow-xs transition-all duration-500 transform hover:-translate-y-1 border border-border overflow-hidden">
+            <!-- Card Content -->
+            <div class="p-6 lg:p-8 flex flex-col items-center justify-center h-32 lg:h-36">
+              <img
+                :src="partner.logo"
+                :alt="`${partner.name} logo`"
+                class="object-contain max-h-12 lg:max-h-16 w-auto"
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Call to Action -->
+      <div class="text-center">
+        <div class="inline-flex items-center space-x-3 bg-background rounded-2xl px-8 py-4 border border-border">
+          <UIcon name="i-heroicons-rocket-launch" class="h-5 w-5 text-foreground" />
+          <span class="text-foreground font-medium">Ready to partner with us?</span>
+          <UButton
+            variant="outline"
+            size="sm"
+            class="ml-2"
+          >
+            Get in Touch
+          </UButton>
+        </div>
+      </div>
+    </UContainer>
+  </section>
+</template>
diff --git a/app/components/landing/topCollections/LandingTopCollections.vue b/app/components/landing/topCollections/LandingTopCollections.vue
index 548b1dcb..954e85f8 100644
--- a/app/components/landing/topCollections/LandingTopCollections.vue
+++ b/app/components/landing/topCollections/LandingTopCollections.vue
@@ -15,17 +15,27 @@ onMounted(() => {
 </script>
 
 <template>
-  <section class="py-16 md:pt-16 md:px-0">
-    <div class="text-2xl md:text-[50px] font-serif italic font-medium mb-4 md:mb-8 text-center md:text-left text-foreground">
-      {{ $t('collection.topCollections') }}
+  <section>
+    <div class="text-center mb-12">
+      <h2 class="text-3xl lg:text-4xl xl:text-5xl text-neutral-900 dark:text-white mb-6 leading-tight font-serif">
+        Top <span class="text-neutral-500 italic">Collections</span>
+      </h2>
+      <p class="text-lg text-neutral-600 dark:text-neutral-400 max-w-3xl mx-auto leading-relaxed">
+        Discover the most popular and trending NFT collections from our vibrant community of creators and collectors.
+      </p>
     </div>
     <div class="">
       <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
         <TopCollectionsCard v-for="(collection, i) in data" :key="i" :collection="collection" />
       </div>
       <div class="flex justify-center mt-6 md:mt-8">
-        <UButton :to="`/${prefix}/explore/collectibles`" class="rounded-full" variant="outline">
-          {{ $t('collection.viewMore') }}
+        <UButton
+          variant="outline"
+          color="neutral"
+          :to="`/${prefix}/explore/collectibles`"
+          class="px-8 py-2 rounded-full"
+        >
+          Explore Collections
         </UButton>
       </div>
     </div>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 9e3b3d76..a0daecb7 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -13,7 +13,7 @@ useHead({
 </script>
 
 <template>
-  <div class="min-h-full flex flex-col overflow-hidden">
+  <div class="min-h-full flex flex-col">
     <Navbar />
 
     <main class="grow">
diff --git a/app/layouts/full-width.vue b/app/layouts/full-width.vue
index e7b3897c..32dc9eab 100644
--- a/app/layouts/full-width.vue
+++ b/app/layouts/full-width.vue
@@ -13,7 +13,8 @@ useHead({
 </script>
 
 <template>
-  <div class="min-h-full flex flex-col overflow-hidden">
+  <div class="min-h-full flex flex-col">
+    <Navbar />
     <main class="grow">
       <slot />
     </main>
diff --git a/app/utils/ipfs.ts b/app/utils/ipfs.ts
index 1cbb9b32..f0dd6def 100644
--- a/app/utils/ipfs.ts
+++ b/app/utils/ipfs.ts
@@ -67,7 +67,7 @@ export function toOriginalContentUrl(baseurl: string) {
   return url.toString()
 }
 
-export function ipfsToCfImageUrl(ipfsUrl?: string, variant = 'public') {
+export function ipfsToCfImageUrl(ipfsUrl?: string, variant: 'detail' | 'public' | 'small' = 'public') {
   if (!ipfsUrl) {
     return ''
   }