diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 6591862..3de0620 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -34,7 +34,10 @@ const formatMintedToken = (token: TokenSummary): TokenSummary => ({
   code: token.code,
   issuer: token.issuer,
   name: token.name,
+  image: token.image,
   totalSupply: token.totalSupply,
+  circulating: token.circulating,
+  holders: token.holders,
   liquidityPools: token.liquidityPools,
   description: token.description,
 })
@@ -90,9 +93,13 @@ export default function DashboardPage() {
       mintedTokens.map((token) => ({
         code: token.assetCode,
         issuer: token.issuer,
-        name: token.name,
+        name: token.tomlName || token.name,
+        image: token.image,
         totalSupply: token.totalSupply,
-        description: token.description,
+        circulating: token.circulatingSupply,
+        holders: token.holders,
+        liquidityPools: token.liquidityPools,
+        description: token.tomlDescription || token.description,
       })),
     [mintedTokens]
   )
diff --git a/app/explore/page.tsx b/app/explore/page.tsx
index 39dd07f..92beff8 100644
--- a/app/explore/page.tsx
+++ b/app/explore/page.tsx
@@ -1,10 +1,11 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useMemo, useCallback } from "react"
 import { useRouter } from "next/navigation"
 import Link from "next/link"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
 import {
   Compass,
   ArrowRightLeft,
@@ -13,23 +14,40 @@ import {
   TrendingUp,
   Droplets,
   Loader2,
-  Star,
   ChevronRight,
   Send,
   History,
   Shield,
+  Search,
+  ChevronDown,
 } from "lucide-react"
-import { useTokenRegistry } from "@/hooks/useTokenRegistry"
+import { useNetworkTokens } from "@/hooks/useNetworkTokens"
+import { TokenIcon } from "@/components/token-icon"
+
+const PAGE_SIZE = 15
 
 export default function ExplorePage() {
   const router = useRouter()
-  const { tokens, isLoading: tokensLoading, error: tokensError } = useTokenRegistry()
+  const [searchQuery, setSearchQuery] = useState("")
+
+  const {
+    tokens,
+    isLoading,
+    isLoadingMore,
+    error: tokensError,
+    hasMore,
+    loadMore,
+    refresh,
+  } = useNetworkTokens({ searchQuery, limit: PAGE_SIZE })
+
+  const displayTokens = useMemo(() =>
+    tokens.filter(token => token.assetCode && token.assetCode.trim() !== ""),
+    [tokens]
+  )
 
-  const filteredTokens = tokens
-    .filter(token =>
-      token.assetCode && token.assetCode.trim() !== ""
-    )
-    .slice(0, 12)
+  const handleSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value)
+  }, [])
 
   const exploreCategories = [
     {
@@ -123,13 +141,28 @@ export default function ExplorePage() {
 
         {/* Token Discovery */}
         <div className="space-y-4">
-          <div>
-            <h2 className="text-xl font-bold text-slate-900 dark:text-white">Available Tokens</h2>
-            <p className="text-sm text-slate-500 dark:text-slate-400">Discover tokens on the network</p>
+          <div className="flex items-center justify-between flex-wrap gap-3">
+            <div>
+              <h2 className="text-xl font-bold text-slate-900 dark:text-white">Available Tokens</h2>
+              <p className="text-sm text-slate-500 dark:text-slate-400">
+                {displayTokens.length > 0
+                  ? `Showing ${displayTokens.length} token${displayTokens.length !== 1 ? "s" : ""}`
+                  : "Discover tokens on the network"}
+              </p>
+            </div>
+            <div className="relative w-full sm:w-64">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
+              <Input
+                placeholder="Search tokens..."
+                value={searchQuery}
+                onChange={handleSearch}
+                className="pl-9 rounded-xl"
+              />
+            </div>
           </div>
 
-          {tokensLoading ? (
-            <div className="flex items-center justify-center py-8">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-12">
               <Loader2 className="h-6 w-6 animate-spin text-slate-400" />
               <span className="ml-2 text-sm text-slate-500">Loading tokens...</span>
             </div>
@@ -137,41 +170,66 @@ export default function ExplorePage() {
             <Card>
               <CardContent className="py-8 text-center">
                 <p className="text-sm text-slate-500">Unable to load tokens right now.</p>
-                <Button variant="outline" size="sm" className="mt-3" onClick={() => router.refresh()}>Try again</Button>
+                <Button variant="outline" size="sm" className="mt-3" onClick={() => refresh()}>Try again</Button>
               </CardContent>
             </Card>
           ) : (
-            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
-              {filteredTokens.length === 0 ? (
-                <div className="col-span-full text-center py-8">
-                  <p className="text-sm text-slate-500">No tokens available yet.</p>
-                </div>
-              ) : (
-                filteredTokens.map((token) => (
-                  <Link
-                    key={`${token.assetCode}-${token.issuer || ""}`}
-                    href={`/token/${encodeURIComponent(token.assetCode)}${token.issuer ? `?issuer=${encodeURIComponent(token.issuer)}` : ''}`}
+            <>
+              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
+                {displayTokens.length === 0 ? (
+                  <div className="col-span-full text-center py-8">
+                    <p className="text-sm text-slate-500">
+                      {searchQuery.trim() ? "No tokens match your search" : "No tokens available yet."}
+                    </p>
+                  </div>
+                ) : (
+                  displayTokens.map((token) => (
+                    <Link
+                      key={`${token.assetCode}-${token.issuer || ""}`}
+                      href={`/token/${encodeURIComponent(token.assetCode)}${token.issuer ? `?issuer=${encodeURIComponent(token.issuer)}` : ''}`}
+                    >
+                      <Card className="h-full hover:shadow-md transition-shadow border border-slate-200 dark:border-slate-700 hover:border-green-200 dark:hover:border-green-800/50 group cursor-pointer">
+                        <CardContent className="p-4 flex items-center gap-3">
+                          <TokenIcon
+                            image={token.image}
+                            code={token.assetCode}
+                            issuer={token.issuer}
+                            size="md"
+                          />
+                          <div className="min-w-0 flex-1">
+                            <p className="font-semibold text-sm text-slate-900 dark:text-white truncate group-hover:text-green-600 transition-colors">
+                              {token.assetCode}
+                            </p>
+                            {token.name ? (
+                              <p className="text-xs text-slate-500 dark:text-slate-400 truncate">{token.name}</p>
+                            ) : null}
+                          </div>
+                          <ChevronRight className="h-4 w-4 text-slate-300 dark:text-slate-600 group-hover:text-green-500 transition-colors shrink-0" />
+                        </CardContent>
+                      </Card>
+                    </Link>
+                  ))
+                )}
+              </div>
+
+              {hasMore && !searchQuery.trim() && (
+                <div className="flex justify-center pt-4">
+                  <Button
+                    variant="outline"
+                    onClick={loadMore}
+                    disabled={isLoadingMore}
+                    className="gap-2 rounded-xl"
                   >
-                    <Card className="h-full hover:shadow-md transition-shadow border border-slate-200 dark:border-slate-700 hover:border-green-200 dark:hover:border-green-800/50 group cursor-pointer">
-                      <CardContent className="p-4 flex items-center gap-3">
-                        <div className="w-10 h-10 rounded-full bg-gradient-to-br from-slate-100 to-green-50 dark:from-slate-700 dark:to-slate-800 flex items-center justify-center shrink-0">
-                          <Star className="h-5 w-5 text-green-600 dark:text-green-400" />
-                        </div>
-                        <div className="min-w-0 flex-1">
-                          <p className="font-semibold text-sm text-slate-900 dark:text-white truncate group-hover:text-green-600 transition-colors">
-                            {token.assetCode}
-                          </p>
-                          {token.name && (
-                            <p className="text-xs text-slate-500 dark:text-slate-400 truncate">{token.name}</p>
-                          )}
-                        </div>
-                        <ChevronRight className="h-4 w-4 text-slate-300 dark:text-slate-600 group-hover:text-green-500 transition-colors shrink-0" />
-                      </CardContent>
-                    </Card>
-                  </Link>
-                ))
+                    {isLoadingMore ? (
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                      <ChevronDown className="h-4 w-4" />
+                    )}
+                    {isLoadingMore ? "Loading..." : "Load more tokens"}
+                  </Button>
+                </div>
               )}
-            </div>
+            </>
           )}
         </div>
       </div>
diff --git a/app/layout.tsx b/app/layout.tsx
index e86071a..3c71989 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -8,6 +8,7 @@ import { Navbar } from "@/components/navbar"
 import { Suspense } from "react"
 import { PiProvider } from "@/components/providers/pi-provider"
 import { BalanceRefreshProvider } from "@/components/providers/balance-refresh-provider"
+import { PoolPriceProvider } from "@/components/providers/pool-price-provider"
 import { DisclaimerProvider } from "@/components/disclaimer-provider"
 import { RefCapture } from "@/components/ref-capture"
 import Script from 'next/script'
@@ -40,6 +41,7 @@ export default function RootLayout({
         <Script src="https://sdk.minepi.com/pi-sdk.js" strategy="beforeInteractive" />
         <PiProvider>
           <BalanceRefreshProvider>
+          <PoolPriceProvider>
           <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
             <Suspense fallback={null}>
               <RefCapture />
@@ -49,6 +51,7 @@ export default function RootLayout({
               <DisclaimerProvider />
             </Suspense>
           </ThemeProvider>
+          </PoolPriceProvider>
           </BalanceRefreshProvider>
         </PiProvider>
       </body>
diff --git a/app/my-tokens/page.tsx b/app/my-tokens/page.tsx
index 6180bed..2255e68 100644
--- a/app/my-tokens/page.tsx
+++ b/app/my-tokens/page.tsx
@@ -9,6 +9,7 @@ import { Badge } from "@/components/ui/badge"
 import { Loader2 } from "lucide-react"
 import { useTokenRegistry } from "@/hooks/useTokenRegistry"
 import { usePi } from "@/components/providers/pi-provider"
+import { TokenIcon } from "@/components/token-icon"
 
 const formatSupply = (value?: number) =>
   (value ?? 0).toLocaleString(undefined, { maximumFractionDigits: 2 })
@@ -67,11 +68,14 @@ export default function MyTokensPage() {
                     <Card key={token.assetCode} className="bg-card border-border">
                 <CardHeader>
                   <div className="flex items-center justify-between">
-                    <div>
+                    <div className="flex items-center gap-3">
+                      <TokenIcon image={token.image} code={token.assetCode} issuer={token.issuer} size="lg" />
+                      <div>
                             <CardTitle className="text-xl">{token.assetCode}</CardTitle>
                       <CardDescription className="text-xs mt-1">
                               Issuer: {token.issuer.slice(0, 8)}...{token.issuer.slice(-6)}
                       </CardDescription>
+                      </div>
                     </div>
                           <Badge variant="secondary">{token.name || "Custom Token"}</Badge>
                   </div>
diff --git a/app/page.tsx b/app/page.tsx
index 3981593..d9de238 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useMemo, useState } from "react"
 import { useRouter } from "next/navigation"
 import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Card, CardContent } from "@/components/ui/card"
 import { Tabs, TabsContent } from "@/components/ui/tabs"
 import { ArrowDown, TrendingUp, ArrowRightLeft, Loader2, Copy, Wallet, ArrowUpRight, Zap, BarChart3, Sparkles, Plus } from "lucide-react"
 import { useToast } from "@/hooks/use-toast"
@@ -12,7 +12,8 @@ import { useAccountBalances, useAccountOperations } from "@/hooks/useAccountData
 import { useTokenRegistry } from "@/hooks/useTokenRegistry"
 import { usePiPrice } from "@/hooks/usePiPrice"
 import { useUserProfile } from "@/hooks/useUserProfile"
-import { useTokenPrices } from "@/hooks/useTokenPrice"
+import { usePoolPrice } from "@/components/providers/pool-price-provider"
+import { TokenIcon } from "@/components/token-icon"
 import { ReceiveModal } from "@/components/receive-modal"
 import { TransactionHistory } from "@/components/transaction-history"
 
@@ -21,6 +22,19 @@ const getStoredWallet = () => {
   return localStorage.getItem("zyradex-wallet-address")
 }
 
+interface HoldingItem {
+  key: string
+  code: string
+  name: string
+  issuer?: string | null
+  image?: string | null
+  amount: number
+  usdValue: number | null
+  isNative: boolean
+  isPlatform: boolean
+}
+export { HoldingItem }
+
 export default function HomePage() {
   const router = useRouter()
   const { toast } = useToast()
@@ -30,6 +44,7 @@ export default function HomePage() {
   const [receiveModalOpen, setReceiveModalOpen] = useState(false)
   const [activeTab, setActiveTab] = useState("holdings")
   const { price: piPrice, isLoading: priceLoading } = usePiPrice()
+  const { tokens: platformTokens } = useTokenRegistry()
 
   useEffect(() => {
     if (isAuthenticated) {
@@ -50,13 +65,7 @@ export default function HomePage() {
     ? (profile?.public_key || user?.wallet_address || localWallet || undefined)
     : undefined
   const { balances, totalBalance: nativeBalanceOnly, isLoading: balancesLoading } = useAccountBalances(publicKey)
-  const { getPrice, isLoading: pricesLoading } = useTokenPrices(
-    balances.map(b => ({
-      assetCode: b.assetCode,
-      assetIssuer: b.assetIssuer || undefined,
-      assetType: b.assetType
-    }))
-  )
+  const { getPrice } = usePoolPrice()
   const { operations, isLoading: operationsLoading } = useAccountOperations(publicKey, {
     limit: 20,
     order: "desc",
@@ -66,13 +75,13 @@ export default function HomePage() {
     let total = nativeBalanceOnly
     balances.forEach((balance) => {
       if (balance.assetType === "native") return
-      const priceInPi = getPrice(balance.assetCode, balance.assetIssuer || undefined, balance.assetType)
+      const priceInPi = getPrice(balance.assetCode, balance.assetIssuer || null, piPrice)
       if (priceInPi !== null && priceInPi !== undefined) {
         total += (Number(balance.amount) || 0) * priceInPi
       }
     })
     return total
-  }, [nativeBalanceOnly, balances, getPrice])
+  }, [nativeBalanceOnly, balances, getPrice, piPrice])
 
   const usdBalance = useMemo(() => {
     if (!piPrice || !totalBalance || piPrice <= 0) return null
@@ -80,6 +89,80 @@ export default function HomePage() {
     return isNaN(calculated) || !isFinite(calculated) ? null : calculated
   }, [piPrice, totalBalance])
 
+  const holdings = useMemo<HoldingItem[]>(() => {
+    const result: HoldingItem[] = []
+    const balanceMap = new Map<string, { amount: number; issuer: string | null }>()
+
+    for (const b of balances) {
+      const key = b.assetType === "native" ? "native" : `${b.assetCode}:${b.assetIssuer || ""}`
+      balanceMap.set(key, { amount: Number(b.amount), issuer: b.assetIssuer || null })
+    }
+
+    // 1. Pi native always first
+    const nativeBalance = balanceMap.get("native")
+    result.push({
+      key: "native",
+      code: "PI",
+      name: "Pi",
+      issuer: null,
+      amount: nativeBalance ? nativeBalance.amount : 0,
+      usdValue: piPrice ? (nativeBalance ? nativeBalance.amount : 0) * piPrice : null,
+      isNative: true,
+      isPlatform: true,
+    })
+
+    const seenCodes = new Set(["native"])
+
+    // 2. Platform tokens
+    for (const token of platformTokens) {
+      const key = `${token.assetCode}:${token.issuer}`
+      if (seenCodes.has(key)) continue
+      seenCodes.add(key)
+
+      const bal = balanceMap.get(key)
+      const amount = bal ? bal.amount : 0
+      const priceInPi = getPrice(token.assetCode, token.issuer, piPrice)
+      const usd = piPrice && priceInPi !== null ? amount * priceInPi * piPrice : null
+
+      result.push({
+        key,
+        code: token.assetCode,
+        name: token.tomlName || token.name || token.assetCode,
+        issuer: token.issuer,
+        image: token.image,
+        amount,
+        usdValue: usd,
+        isNative: false,
+        isPlatform: true,
+      })
+    }
+
+    // 3. Other balances (non-platform, non-native)
+    for (const b of balances) {
+      if (b.assetType === "native") continue
+      const key = `${b.assetCode}:${b.assetIssuer || ""}`
+      if (seenCodes.has(key)) continue
+      seenCodes.add(key)
+
+      const amount = Number(b.amount)
+      const priceInPi = getPrice(b.assetCode, b.assetIssuer || null, piPrice)
+      const usd = piPrice && priceInPi !== null ? amount * priceInPi * piPrice : null
+
+      result.push({
+        key,
+        code: b.assetCode,
+        name: b.assetCode,
+        issuer: b.assetIssuer || null,
+        amount,
+        usdValue: usd,
+        isNative: false,
+        isPlatform: false,
+      })
+    }
+
+    return result
+  }, [balances, platformTokens, piPrice, getPrice])
+
   const handleSwap = () => router.push("/swap")
   const handleSend = () => router.push("/send")
   const handleExplore = () => router.push("/explore")
@@ -99,11 +182,11 @@ export default function HomePage() {
     return `${publicKey.slice(0, 6)}...${publicKey.slice(-6)}`
   }, [publicKey])
 
-  const handleTokenClick = (balance: any) => {
-    if (balance.assetType === "native") {
+  const handleTokenClick = (item: HoldingItem) => {
+    if (item.isNative) {
       router.push("/token/native")
-    } else if (balance.assetCode) {
-      router.push(`/token/${encodeURIComponent(balance.assetCode)}${balance.assetIssuer ? `?issuer=${encodeURIComponent(balance.assetIssuer)}` : ''}`)
+    } else if (item.code) {
+      router.push(`/token/${encodeURIComponent(item.code)}${item.issuer ? `?issuer=${encodeURIComponent(item.issuer)}` : ''}`)
     }
   }
 
@@ -183,7 +266,7 @@ export default function HomePage() {
           </div>
 
           <div className="space-y-2 mb-8">
-            {balancesLoading || pricesLoading ? (
+            {balancesLoading ? (
               <div className="flex items-center justify-center py-8">
                 <Loader2 className="h-10 w-10 animate-spin text-green-600 dark:text-green-400" />
               </div>
@@ -192,11 +275,8 @@ export default function HomePage() {
                 <h1 className="text-6xl font-bold bg-gradient-to-r from-green-600 to-mint-500 bg-clip-text text-transparent">
                   {totalBalance.toLocaleString(undefined, { maximumFractionDigits: 4 })}
                 </h1>
-                <p className="text-lg text-slate-600 dark:text-slate-400">
-                  <span className="font-semibold text-green-600 dark:text-green-400">Pi Network</span>
-                </p>
-                {usdBalance !== null && piPrice && (
-                  <p className="text-sm text-slate-500 dark:text-slate-500">
+                {usdBalance !== null && (
+                  <p className="text-lg font-semibold text-slate-600 dark:text-slate-300">
                     ≈ ${usdBalance.toLocaleString(undefined, { maximumFractionDigits: 2 })} USD
                   </p>
                 )}
@@ -204,7 +284,7 @@ export default function HomePage() {
             )}
           </div>
 
-          {/* Action Buttons - Swap FIRST */}
+          {/* Action Buttons */}
           <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
             <Button
               onClick={handleSwap}
@@ -246,7 +326,7 @@ export default function HomePage() {
             <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
               <div className="flex items-center justify-between mb-6">
                 <div>
-                  <h2 className="text-xl font-bold text-slate-900 dark:text-white mb-1">Your Holdings</h2>
+                  <h2 className="text-xl font-bold text-slate-900 dark:text-white mb-1">Holdings</h2>
                   <p className="text-sm text-slate-600 dark:text-slate-400">Track all your assets</p>
                 </div>
                 <Button
@@ -288,7 +368,7 @@ export default function HomePage() {
                       <Loader2 className="h-5 w-5 animate-spin text-slate-400" />
                       <span className="ml-2 text-sm text-slate-500">Loading holdings...</span>
                     </div>
-                  ) : balances.length === 0 ? (
+                  ) : holdings.length === 0 ? (
                     <div className="text-center py-12 space-y-4">
                       <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-slate-100 to-green-100/50 dark:from-slate-700 dark:to-slate-800 flex items-center justify-center mx-auto">
                         <Wallet className="h-8 w-8 text-slate-400" />
@@ -301,41 +381,43 @@ export default function HomePage() {
                       </Button>
                     </div>
                   ) : (
-                    balances.map((balance, index) => {
-                      const isNative = balance.assetType === "native"
-                      const displayName = isNative ? "Pi" : balance.assetCode
-                      const amount = Number(balance.amount)
-                      const priceInPi = getPrice(balance.assetCode, balance.assetIssuer || undefined, balance.assetType)
-                      const valueInPi = priceInPi !== null ? amount * priceInPi : null
-                      const usdValue = piPrice && (isNative || valueInPi !== null)
-                        ? (isNative ? amount : valueInPi!) * piPrice
-                        : null
-
-                      return (
-                        <button
-                          key={`${balance.asset}-${index}`}
-                          onClick={() => handleTokenClick(balance)}
-                          className="w-full flex items-center justify-between p-4 rounded-xl bg-gradient-to-r from-slate-50 to-white dark:from-slate-700/50 dark:to-slate-800/50 hover:from-slate-100 hover:to-green-50/50 dark:hover:from-slate-700 dark:hover:to-slate-700 border border-slate-200/50 dark:border-slate-700/50 transition-all cursor-pointer group"
-                        >
-                          <div className="flex-1 min-w-0 text-left">
-                            <p className="font-bold text-base text-slate-900 dark:text-white truncate group-hover:text-green-600 dark:group-hover:text-green-400 transition-colors">{displayName}</p>
+                    holdings.map((item) => (
+                      <button
+                        key={item.key}
+                        onClick={() => handleTokenClick(item)}
+                        className="w-full flex items-center justify-between p-4 rounded-xl bg-gradient-to-r from-slate-50 to-white dark:from-slate-700/50 dark:to-slate-800/50 hover:from-slate-100 hover:to-green-50/50 dark:hover:from-slate-700 dark:hover:to-slate-700 border border-slate-200/50 dark:border-slate-700/50 transition-all cursor-pointer group"
+                      >
+                        <div className="flex items-center gap-3 flex-1 min-w-0 text-left">
+                          <TokenIcon
+                            image={item.image}
+                            code={item.code}
+                            issuer={item.issuer}
+                            size="md"
+                          />
+                          <div className="min-w-0 flex-1">
+                            <div className="flex items-center gap-2">
+                              <p className="font-bold text-base text-slate-900 dark:text-white truncate group-hover:text-green-600 dark:group-hover:text-green-400 transition-colors">{item.name}</p>
+                              {item.isPlatform && !item.isNative && (
+                                <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-primary/10 text-primary font-medium shrink-0">P</span>
+                              )}
+                            </div>
                             <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">
-                              {amount.toLocaleString(undefined, { maximumFractionDigits: 6 })}
-                              {isNative && " Pi"}
+                              {item.amount.toLocaleString(undefined, { maximumFractionDigits: 6 })}
+                              {item.isNative && " Pi"}
                             </p>
                           </div>
-                          <div className="text-right ml-4 shrink-0">
-                            {usdValue !== null ? (
-                              <p className="font-bold text-base text-green-600 dark:text-green-400">
-                                ${usdValue.toLocaleString(undefined, { maximumFractionDigits: 2 })}
-                              </p>
-                            ) : (
-                              <p className="font-medium text-sm text-slate-500 dark:text-slate-400">—</p>
-                            )}
-                          </div>
-                        </button>
-                      )
-                    })
+                        </div>
+                        <div className="text-right ml-4 shrink-0">
+                          {item.usdValue !== null ? (
+                            <p className="font-bold text-base text-green-600 dark:text-green-400">
+                              ${item.usdValue.toLocaleString(undefined, { maximumFractionDigits: 2 })}
+                            </p>
+                          ) : (
+                            <p className="font-medium text-sm text-slate-500 dark:text-slate-400">—</p>
+                          )}
+                        </div>
+                      </button>
+                    ))
                   )}
                 </div>
               </TabsContent>
diff --git a/app/profile/page.tsx b/app/profile/page.tsx
index c92495f..a1e84e2 100644
--- a/app/profile/page.tsx
+++ b/app/profile/page.tsx
@@ -7,7 +7,6 @@ import {
   Copy,
   LogOut,
   Loader2,
-  Coins,
   User,
   Shield,
   History,
@@ -306,40 +305,6 @@ const ProfilePage: React.FC = () => {
           </CardContent>
         </Card>
 
-        {/* Holdings Summary */}
-        <Card className="border border-slate-200 dark:border-slate-700">
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2 text-lg">
-              <Coins className="h-5 w-5" />
-              Holdings
-            </CardTitle>
-            <CardDescription>Your assets on ZyraDex</CardDescription>
-          </CardHeader>
-          <CardContent>
-            {balancesLoading ? (
-              <div className="flex justify-center py-4">
-                <Loader2 className="h-5 w-5 animate-spin text-slate-400" />
-              </div>
-            ) : balances.length === 0 ? (
-              <div className="text-center py-4 space-y-3">
-                <p className="text-sm text-slate-500">No assets tracked yet</p>
-                <Button asChild variant="outline" size="sm">
-                  <Link href="/swap">Start trading</Link>
-                </Button>
-              </div>
-            ) : (
-              <div className="space-y-2 max-h-64 overflow-y-auto">
-                {balances.map((b, i) => (
-                  <div key={i} className="flex justify-between items-center py-2 border-b border-slate-100 dark:border-slate-800 last:border-0">
-                    <span className="font-medium text-sm">{b.assetType === "native" ? "Pi" : b.assetCode}</span>
-                    <span className="text-sm text-slate-600 dark:text-slate-400">{Number(b.amount).toLocaleString(undefined, { maximumFractionDigits: 6 })}</span>
-                  </div>
-                ))}
-              </div>
-            )}
-          </CardContent>
-        </Card>
-
         {/* Navigation Links */}
         <div className="space-y-3">
           <h2 className="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Quick Actions</h2>
@@ -430,6 +395,9 @@ const ProfilePage: React.FC = () => {
             </a>
           </div>
         </div>
+
+        {/* Version */}
+        <p className="text-center text-xs text-slate-400 dark:text-slate-600 pt-2">ZyraDex v1.0.0</p>
       </div>
 
       {/* Secret Seed Dialog */}
diff --git a/app/swap/page.tsx b/app/swap/page.tsx
index 68b2f6d..1903d55 100644
--- a/app/swap/page.tsx
+++ b/app/swap/page.tsx
@@ -1,8 +1,8 @@
 "use client"
 
 import { useMemo, useState, useEffect } from "react"
+import dynamic from "next/dynamic"
 import { PageBackHeader } from "@/components/ui/page-back-header"
-import { SwapCard } from "@/components/swap/swap-card"
 import { PriceChart, type PricePoint } from "@/components/swap/price-chart"
 import { RecentSwaps } from "@/components/swap/recent-swaps"
 import { Button } from "@/components/ui/button"
@@ -10,6 +10,10 @@ import { useAccountOperations } from "@/hooks/useAccountData"
 import { usePi } from "@/components/providers/pi-provider"
 import { BarChart3, X } from "lucide-react"
 
+const SwapCard = dynamic(() => import("@/components/swap/swap-card").then((m) => ({ default: m.SwapCard })), {
+  ssr: false,
+})
+
 const getStoredWallet = () => {
   if (typeof window === "undefined") return null
   return localStorage.getItem("zyradex-wallet-address")
diff --git a/app/token/[code]/page.tsx b/app/token/[code]/page.tsx
index b87ae76..934be7a 100644
--- a/app/token/[code]/page.tsx
+++ b/app/token/[code]/page.tsx
@@ -1,12 +1,10 @@
 "use client"
 
-import { useEffect, useMemo, useState } from "react"
+import { use, useEffect, useMemo, useState } from "react"
 import { useRouter, useSearchParams } from "next/navigation"
-import Link from "next/link"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
-import { ArrowRightLeft, ArrowUpRight, ArrowDown, Loader2, Copy, ExternalLink } from "lucide-react"
+import { ArrowRightLeft, ArrowUpRight, ArrowDown, Loader2, Copy, ExternalLink, Plus, Users, Droplets, Coins } from "lucide-react"
 import { useToast } from "@/hooks/use-toast"
 import { usePi } from "@/components/providers/pi-provider"
 import { useAccountBalances } from "@/hooks/useAccountData"
@@ -14,6 +12,13 @@ import { useAccountOperations } from "@/hooks/useAccountData"
 import { useUserProfile } from "@/hooks/useUserProfile"
 import { useTokenPrice } from "@/hooks/useTokenPrice"
 import { usePiPrice } from "@/hooks/usePiPrice"
+import { usePoolPrice } from "@/components/providers/pool-price-provider"
+import { useTokenMarketData } from "@/hooks/useTokenMarketData"
+import { useCheckTrustline } from "@/hooks/useCheckTrustline"
+import { useTokenMetadataMap } from "@/hooks/useTokenMetadataMap"
+import { useNetworkTokens } from "@/hooks/useNetworkTokens"
+import { TokenIcon } from "@/components/token-icon"
+import { TrustlineDialog } from "@/components/trustlines/trustline-dialog"
 import { ReceiveModal } from "@/components/receive-modal"
 import { viewTransactionOnExplorer } from "@/lib/explorer"
 
@@ -22,7 +27,7 @@ const getStoredWallet = () => {
   return localStorage.getItem("zyradex-wallet-address")
 }
 
-export default function TokenDetailPage({ params }: { params: { code: string } }) {
+export default function TokenDetailPage({ params }: { params: Promise<{ code: string }> }) {
   const router = useRouter()
   const searchParams = useSearchParams()
   const { toast } = useToast()
@@ -30,10 +35,38 @@ export default function TokenDetailPage({ params }: { params: { code: string } }
   const { profile } = useUserProfile()
   const [localWallet, setLocalWallet] = useState<string | null>(null)
   const [receiveModalOpen, setReceiveModalOpen] = useState(false)
+  const [trustlineDialogOpen, setTrustlineDialogOpen] = useState(false)
   const { price: piPrice } = usePiPrice()
+  const { getPrice: getPoolPriceValue } = usePoolPrice()
+  const { lookup, fetchMetadata } = useTokenMetadataMap()
+  const [fetchedMeta, setFetchedMeta] = useState<{
+    image?: string
+    name?: string
+    description?: string
+    holders?: number
+    liquidityPools?: number
+    circulatingSupply?: number
+  } | null>(null)
 
-  const tokenCode = decodeURIComponent(params.code)
+  const { code } = use(params)
+  const tokenCode = decodeURIComponent(code)
   const issuer = searchParams.get("issuer") || undefined
+  const isNative = tokenCode === "native"
+
+  // Fetch metadata for non-platform tokens
+  useEffect(() => {
+    if (isNative || !issuer) return
+    const found = lookup(tokenCode, issuer)
+    if (found?.name || found?.image) {
+      setFetchedMeta(found)
+      return
+    }
+    let cancelled = false
+    fetchMetadata(tokenCode, issuer).then((m) => {
+      if (!cancelled && m) setFetchedMeta(m)
+    })
+    return () => { cancelled = true }
+  }, [tokenCode, issuer, isNative, lookup, fetchMetadata])
 
   useEffect(() => {
     if (isAuthenticated) {
@@ -54,31 +87,32 @@ export default function TokenDetailPage({ params }: { params: { code: string } }
     ? (profile?.public_key || user?.wallet_address || localWallet || undefined)
     : undefined
 
-  const { balances, isLoading: balancesLoading, error: balancesError } = useAccountBalances(publicKey)
-  const { operations, isLoading: operationsLoading, error: operationsError } = useAccountOperations(publicKey, {
-    limit: 50,
-  })
+  const { balances, isLoading: balancesLoading, refresh: refreshBalances } = useAccountBalances(publicKey)
+  const { operations, isLoading: operationsLoading } = useAccountOperations(publicKey, { limit: 50 })
 
-  // Find the token balance
   const tokenBalance = useMemo(() => {
-    if (tokenCode === "native") {
-      return balances.find((b) => b.assetType === "native")
-    }
+    if (isNative) return balances.find((b) => b.assetType === "native")
     return balances.find(
       (b) => b.assetCode === tokenCode && (issuer ? b.assetIssuer === issuer : !b.assetIssuer)
     )
-  }, [balances, tokenCode, issuer])
+  }, [balances, tokenCode, issuer, isNative])
 
   const amount = tokenBalance ? Number(tokenBalance.amount) : 0
-  const isNative = tokenCode === "native"
 
-  // Get token price in Pi
-  const { priceInPi, isLoading: priceLoading } = useTokenPrice(
-    isNative ? "" : tokenCode,
+  const { hasTrustline, isLoading: trustlineLoading, refresh: refreshTrustline } = useCheckTrustline(
+    publicKey,
+    tokenCode,
     issuer,
     !isNative
   )
 
+  const priceInPi = useMemo(() => {
+    if (isNative) return 1
+    return getPoolPriceValue(tokenCode, issuer, piPrice)
+  }, [isNative, tokenCode, issuer, getPoolPriceValue, piPrice])
+
+  const { volume24h } = useTokenMarketData(tokenCode, issuer)
+
   const valueInPi = useMemo(() => {
     if (isNative) return amount
     if (priceInPi === null || priceInPi === undefined) return null
@@ -90,40 +124,17 @@ export default function TokenDetailPage({ params }: { params: { code: string } }
     return valueInPi * piPrice
   }, [piPrice, valueInPi])
 
-  // Filter operations for this token
   const tokenOperations = useMemo(() => {
     if (!tokenBalance) return []
-    const tokenAsset = isNative
-      ? "native"
-      : issuer
-      ? `${tokenCode}:${issuer}`
-      : tokenCode
-
+    const tokenAsset = isNative ? "native" : issuer ? `${tokenCode}:${issuer}` : tokenCode
     return operations.filter((op) => {
-      // Check if operation involves this token
       const opAsset = op.asset || ""
       const opSelling = op.selling || ""
       const opBuying = op.buying || ""
-      const opFrom = op.from || ""
-      const opTo = op.to || ""
-
       if (isNative) {
-        return (
-          opAsset.includes("native") ||
-          opSelling.includes("native") ||
-          opBuying.includes("native") ||
-          op.type === "payment" ||
-          op.type === "createAccount"
-        )
+        return opAsset.includes("native") || opSelling.includes("native") || opBuying.includes("native") || op.type === "payment" || op.type === "createAccount"
       }
-
-      return (
-        opAsset.includes(tokenCode) ||
-        opSelling.includes(tokenCode) ||
-        opBuying.includes(tokenCode) ||
-        opFrom.includes(tokenAsset) ||
-        opTo.includes(tokenAsset)
-      )
+      return opAsset.includes(tokenCode) || opSelling.includes(tokenCode) || opBuying.includes(tokenCode) || op.asset?.includes(tokenAsset) || op.from?.includes(tokenAsset) || op.to?.includes(tokenAsset)
     })
   }, [operations, tokenBalance, tokenCode, issuer, isNative])
 
@@ -136,178 +147,277 @@ export default function TokenDetailPage({ params }: { params: { code: string } }
     }
   }
 
+  const handleTrustlineSuccess = () => {
+    refreshBalances()
+    refreshTrustline()
+  }
+
   const displayName = isNative ? "Test Pi" : tokenCode
+  const meta = !isNative ? lookup(tokenCode, issuer) : undefined
+  const resolvedMeta = fetchedMeta || meta
+  const tokenMetaName = resolvedMeta?.name || tokenCode
+  const tokenMetaDesc = resolvedMeta?.description
+  const tokenMetaHolders = resolvedMeta?.holders
+  const tokenMetaLiquidity = resolvedMeta?.liquidityPools
+  const tokenMetaSupply = resolvedMeta?.circulatingSupply
+
+  const tokenUsdPrice = useMemo(() => {
+    if (isNative && piPrice) return piPrice
+    if (priceInPi !== null && priceInPi !== undefined && piPrice) return priceInPi * piPrice
+    return null
+  }, [isNative, priceInPi, piPrice])
+
+  const marketCap = useMemo(() => {
+    if (!tokenUsdPrice || tokenMetaSupply === undefined) return null
+    return tokenMetaSupply * tokenUsdPrice
+  }, [tokenUsdPrice, tokenMetaSupply])
+
+  const volMktCapRatio = useMemo(() => {
+    if (!volume24h || !marketCap || marketCap === 0) return null
+    return (volume24h / marketCap) * 100
+  }, [volume24h, marketCap])
+
+  const canAct = isNative || hasTrustline === true
 
   return (
     <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6">
       <div className="container mx-auto px-4 py-8 space-y-6 max-w-4xl">
-        {/* Back Button */}
-        <Button
-          variant="ghost"
-          onClick={() => router.back()}
-          className="mb-4 -ml-2"
-        >
+        <Button variant="ghost" onClick={() => router.back()} className="mb-4 -ml-2">
           ← Back
         </Button>
 
-        {/* Token Header Card */}
+        {/* Token Header */}
         <Card className="relative overflow-hidden border border-border/50 bg-card shadow-xl rounded-2xl">
           <CardContent className="p-6">
             <div className="space-y-4">
               <div className="flex items-center justify-between">
-                <div>
-                  <h1 className="text-3xl font-bold text-foreground mb-2">{displayName}</h1>
-                  {!isNative && issuer && (
-                    <div className="flex items-center gap-2">
-                      <p className="text-sm text-muted-foreground font-mono">
-                        {issuer.slice(0, 8)}...{issuer.slice(-6)}
-                      </p>
-                      <button
-                        onClick={() => handleCopy(issuer)}
-                        className="text-muted-foreground hover:text-foreground transition-colors"
-                        title="Copy issuer"
-                      >
-                        <Copy className="h-3.5 w-3.5" />
-                      </button>
+                <div className="flex items-center gap-3">
+                  <TokenIcon image={resolvedMeta?.image ?? meta?.image} code={isNative ? "PI" : tokenCode} issuer={issuer} size="lg" />
+                  <div>
+                    <h1 className="text-3xl font-bold text-foreground mb-1">{displayName}</h1>
+                    {tokenMetaName !== tokenCode && (
+                      <p className="text-sm text-muted-foreground">{tokenMetaName}</p>
+                    )}
+                    {!isNative && issuer && (
+                      <div className="flex items-center gap-2 mt-1">
+                        <p className="text-sm text-muted-foreground font-mono">
+                          {issuer.slice(0, 8)}...{issuer.slice(-6)}
+                        </p>
+                        <button onClick={() => handleCopy(issuer)} className="text-muted-foreground hover:text-foreground transition-colors" title="Copy issuer">
+                          <Copy className="h-3.5 w-3.5" />
+                        </button>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {/* Metadata */}
+              {!isNative && (
+                <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+                  {tokenUsdPrice !== null && (
+                    <div className="rounded-xl bg-muted/30 p-3 text-center">
+                      <p className="text-lg font-bold text-green-600">${tokenUsdPrice.toFixed(6)}</p>
+                      <p className="text-[10px] text-muted-foreground">Price (USD)</p>
+                    </div>
+                  )}
+                  {marketCap !== null && (
+                    <div className="rounded-xl bg-muted/30 p-3 text-center">
+                      <p className="text-lg font-bold">${marketCap.toLocaleString(undefined, { maximumFractionDigits: 0 })}</p>
+                      <p className="text-[10px] text-muted-foreground">Market Cap</p>
+                    </div>
+                  )}
+                  {tokenMetaSupply !== undefined && (
+                    <div className="rounded-xl bg-muted/30 p-3 text-center">
+                      <Coins className="h-4 w-4 mx-auto mb-1 text-muted-foreground" />
+                      <p className="text-lg font-bold">{tokenMetaSupply.toLocaleString(undefined, { maximumFractionDigits: 0 })}</p>
+                      <p className="text-[10px] text-muted-foreground">Circulating</p>
+                    </div>
+                  )}
+                  {tokenMetaHolders !== undefined && tokenMetaHolders > 0 && (
+                    <div className="rounded-xl bg-muted/30 p-3 text-center">
+                      <Users className="h-4 w-4 mx-auto mb-1 text-muted-foreground" />
+                      <p className="text-lg font-bold">{tokenMetaHolders.toLocaleString()}</p>
+                      <p className="text-[10px] text-muted-foreground">Holders</p>
+                    </div>
+                  )}
+                  {tokenMetaLiquidity !== undefined && (
+                    <div className="rounded-xl bg-muted/30 p-3 text-center">
+                      <Droplets className="h-4 w-4 mx-auto mb-1 text-muted-foreground" />
+                      <p className="text-lg font-bold">{tokenMetaLiquidity}</p>
+                      <p className="text-[10px] text-muted-foreground">Pools</p>
+                    </div>
+                  )}
+                  {volume24h !== null && volume24h > 0 && (
+                    <div className="rounded-xl bg-muted/30 p-3 text-center">
+                      <p className="text-lg font-bold">{volume24h.toLocaleString(undefined, { maximumFractionDigits: 0 })}</p>
+                      <p className="text-[10px] text-muted-foreground">24h Volume</p>
+                    </div>
+                  )}
+                  {volMktCapRatio !== null && (
+                    <div className="rounded-xl bg-muted/30 p-3 text-center">
+                      <p className="text-lg font-bold">{volMktCapRatio.toFixed(2)}%</p>
+                      <p className="text-[10px] text-muted-foreground">Vol/Mkt Cap</p>
                     </div>
                   )}
                 </div>
-              </div>
+              )}
+
+              {tokenMetaDesc && (
+                <p className="text-sm text-muted-foreground leading-relaxed">{tokenMetaDesc}</p>
+              )}
+
+              {/* Balance */}
+              {isAuthenticated && (
+                <div className="space-y-2">
+                  <p className="text-sm text-muted-foreground font-medium">Your Balance</p>
+                  {balancesLoading ? (
+                    <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+                  ) : (
+                    <>
+                      <h2 className="text-4xl font-bold text-foreground">
+                        {amount.toLocaleString(undefined, { maximumFractionDigits: 6 })}
+                      </h2>
+                      {valueInPi !== null && (
+                        <p className="text-lg text-muted-foreground">
+                          ≈ {valueInPi.toLocaleString(undefined, { maximumFractionDigits: 4 })} Pi
+                        </p>
+                      )}
+                      {usdValue !== null && (
+                        <p className="text-base text-muted-foreground">
+                          ${usdValue.toLocaleString(undefined, { maximumFractionDigits: 2 })}
+                        </p>
+                      )}
+                      {!isNative && priceInPi === null && (
+                        <p className="text-sm text-muted-foreground">No pool available - price unknown</p>
+                      )}
+                    </>
+                  )}
+                </div>
+              )}
 
-              {/* Balance Display */}
-              <div className="space-y-2">
-                <p className="text-sm text-muted-foreground font-medium">Balance</p>
-                {balancesLoading ? (
-                  <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+              {/* Actions */}
+              <div className="pt-2">
+                {!isAuthenticated ? (
+                  <Button onClick={() => router.push("/profile")} className="w-full bg-gradient-to-r from-green-600 to-mint-500 text-white">
+                    Connect Wallet to interact
+                  </Button>
+                ) : !isNative && trustlineLoading ? (
+                  <div className="flex justify-center py-4">
+                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                  </div>
+                ) : !canAct ? (
+                  <Button
+                    onClick={() => setTrustlineDialogOpen(true)}
+                    className="w-full h-14 text-base gap-2 rounded-xl bg-gradient-to-r from-emerald-500 to-green-500 hover:from-emerald-600 hover:to-green-600 text-white shadow-lg"
+                  >
+                    <Plus className="h-5 w-5" />
+                    Add {displayName} Trustline
+                  </Button>
                 ) : (
-                  <>
-                    <h2 className="text-4xl font-bold text-foreground">
-                      {amount.toLocaleString(undefined, { maximumFractionDigits: 6 })}
-                    </h2>
-                    {valueInPi !== null && (
-                      <p className="text-lg text-muted-foreground">
-                        ≈ {valueInPi.toLocaleString(undefined, { maximumFractionDigits: 4 })} Pi
-                      </p>
-                    )}
-                    {usdValue !== null && (
-                      <p className="text-base text-muted-foreground">
-                        ${usdValue.toLocaleString(undefined, { maximumFractionDigits: 2 })}
-                      </p>
-                    )}
-                    {!isNative && priceInPi === null && !priceLoading && (
-                      <p className="text-sm text-muted-foreground">No pool available - price unknown</p>
-                    )}
-                  </>
+                  <div className="grid grid-cols-3 gap-3">
+                    <Button
+                      variant="outline"
+                      className="h-16 flex flex-col items-center justify-center gap-1 rounded-xl border-2 hover:border-primary/50 hover:bg-muted/50 transition-all"
+                      onClick={() => {
+                        const swapUrl = isNative
+                          ? `/swap?from=native&to=`
+                          : `/swap?from=${encodeURIComponent(tokenCode)}${issuer ? `&fromIssuer=${encodeURIComponent(issuer)}` : ""}&to=native`
+                        router.push(swapUrl)
+                      }}
+                    >
+                      <ArrowRightLeft className="h-5 w-5" />
+                      <span className="text-xs font-medium">Swap</span>
+                    </Button>
+                    <Button
+                      variant="outline"
+                      className="h-16 flex flex-col items-center justify-center gap-1 rounded-xl border-2 hover:border-primary/50 hover:bg-muted/50 transition-all"
+                      onClick={() => router.push("/send")}
+                    >
+                      <ArrowUpRight className="h-5 w-5" />
+                      <span className="text-xs font-medium">Send</span>
+                    </Button>
+                    <Button
+                      variant="outline"
+                      className="h-16 flex flex-col items-center justify-center gap-1 rounded-xl border-2 hover:border-primary/50 hover:bg-muted/50 transition-all"
+                      onClick={() => setReceiveModalOpen(true)}
+                    >
+                      <ArrowDown className="h-5 w-5" />
+                      <span className="text-xs font-medium">Receive</span>
+                    </Button>
+                  </div>
                 )}
               </div>
-
-              {/* Action Buttons */}
-              <div className="grid grid-cols-3 gap-3 pt-4">
-                <Button
-                  variant="outline"
-                  className="h-16 flex flex-col items-center justify-center gap-1 rounded-xl border-2 hover:border-primary/50 hover:bg-muted/50 transition-all"
-                  onClick={() => {
-                    const swapUrl = isNative
-                      ? `/swap?from=native&to=`
-                      : `/swap?from=${encodeURIComponent(tokenCode)}${issuer ? `&fromIssuer=${encodeURIComponent(issuer)}` : ""}&to=native`
-                    router.push(swapUrl)
-                  }}
-                >
-                  <ArrowRightLeft className="h-5 w-5" />
-                  <span className="text-xs font-medium">Swap</span>
-                </Button>
-                <Button
-                  variant="outline"
-                  className="h-16 flex flex-col items-center justify-center gap-1 rounded-xl border-2 hover:border-primary/50 hover:bg-muted/50 transition-all"
-                  onClick={() => router.push("/send")}
-                >
-                  <ArrowUpRight className="h-5 w-5" />
-                  <span className="text-xs font-medium">Send</span>
-                </Button>
-                <Button
-                  variant="outline"
-                  className="h-16 flex flex-col items-center justify-center gap-1 rounded-xl border-2 hover:border-primary/50 hover:bg-muted/50 transition-all"
-                  onClick={() => setReceiveModalOpen(true)}
-                >
-                  <ArrowDown className="h-5 w-5" />
-                  <span className="text-xs font-medium">Receive</span>
-                </Button>
-              </div>
             </div>
           </CardContent>
         </Card>
 
-        {/* Recent Trades Card */}
-        <Card className="relative overflow-hidden border border-border/50 bg-card shadow-xl rounded-2xl">
-          <CardHeader>
-            <CardTitle className="text-xl font-bold">Recent Trades</CardTitle>
-            <CardDescription>All operations involving {displayName}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            {operationsLoading ? (
-              <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">
-                <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-                Loading operations...
-              </div>
-            ) : tokenOperations.length === 0 ? (
-              <div className="text-sm text-muted-foreground py-12 text-center border-2 border-dashed border-border rounded-xl bg-muted/20">
-                No operations found for this token
-              </div>
-            ) : (
-              <div className="space-y-2">
-                {tokenOperations.map((op) => (
-                  <div
-                    key={op.id}
-                    className="flex items-center justify-between p-4 rounded-xl bg-muted/30 border border-border/50 hover:bg-muted/60 transition-colors"
-                  >
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-2 mb-1">
-                        <p className="font-semibold text-foreground capitalize">
-                          {op.type.replace(/([A-Z])/g, " $1").trim()}
+        {/* Recent Trades */}
+        {isAuthenticated && canAct && (
+          <Card className="relative overflow-hidden border border-border/50 bg-card shadow-xl rounded-2xl">
+            <CardHeader>
+              <CardTitle className="text-xl font-bold">Recent Trades</CardTitle>
+              <CardDescription>All operations involving {displayName}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              {operationsLoading ? (
+                <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">
+                  <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                  Loading operations...
+                </div>
+              ) : tokenOperations.length === 0 ? (
+                <div className="text-sm text-muted-foreground py-12 text-center border-2 border-dashed border-border rounded-xl bg-muted/20">
+                  No operations found for this token
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  {tokenOperations.map((op) => (
+                    <div key={op.id} className="flex items-center justify-between p-4 rounded-xl bg-muted/30 border border-border/50 hover:bg-muted/60 transition-colors">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-1">
+                          <p className="font-semibold text-foreground capitalize">
+                            {op.type.replace(/([A-Z])/g, " $1").trim()}
+                          </p>
+                          {op.action && <span className="text-xs text-muted-foreground">({op.action})</span>}
+                        </div>
+                        <p className="text-xs text-muted-foreground">
+                          {op.createdAt ? new Date(op.createdAt).toLocaleString(undefined, { month: "short", day: "numeric", year: "numeric", hour: "2-digit", minute: "2-digit" }) : "Unknown date"}
                         </p>
-                        {op.action && (
-                          <span className="text-xs text-muted-foreground">({op.action})</span>
+                        {op.amount && (
+                          <p className="text-sm text-foreground mt-1">
+                            Amount: {Number(op.amount).toLocaleString(undefined, { maximumFractionDigits: 6 })}
+                          </p>
                         )}
+                        {op.asset && <p className="text-xs text-muted-foreground mt-1">Asset: {op.asset}</p>}
                       </div>
-                      <p className="text-xs text-muted-foreground">
-                        {op.createdAt
-                          ? new Date(op.createdAt).toLocaleString(undefined, {
-                              month: "short",
-                              day: "numeric",
-                              year: "numeric",
-                              hour: "2-digit",
-                              minute: "2-digit",
-                            })
-                          : "Unknown date"}
-                      </p>
-                      {op.amount && (
-                        <p className="text-sm text-foreground mt-1">
-                          Amount: {Number(op.amount).toLocaleString(undefined, { maximumFractionDigits: 6 })}
-                        </p>
+                      {op.transactionHash && (
+                        <Button variant="ghost" size="sm" onClick={() => viewTransactionOnExplorer(op.transactionHash!)} className="ml-4 shrink-0" title="View on explorer">
+                          <ExternalLink className="h-4 w-4" />
+                        </Button>
                       )}
-                      {op.asset && <p className="text-xs text-muted-foreground mt-1">Asset: {op.asset}</p>}
                     </div>
-                    {op.transactionHash && (
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => viewTransactionOnExplorer(op.transactionHash!)}
-                        className="ml-4 shrink-0"
-                        title="View on explorer"
-                      >
-                        <ExternalLink className="h-4 w-4" />
-                      </Button>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
-          </CardContent>
-        </Card>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        )}
       </div>
 
       <ReceiveModal open={receiveModalOpen} onOpenChange={setReceiveModalOpen} />
+
+      {!isNative && (
+        <TrustlineDialog
+          open={trustlineDialogOpen}
+          onOpenChange={setTrustlineDialogOpen}
+          token={{
+            assetCode: tokenCode,
+            issuer: issuer || "",
+            name: tokenMetaName,
+          }}
+          onSuccess={handleTrustlineSuccess}
+        />
+      )}
     </div>
   )
 }
-
diff --git a/app/trustlines/page.tsx b/app/trustlines/page.tsx
index 78ee2c8..2b1d9a3 100644
--- a/app/trustlines/page.tsx
+++ b/app/trustlines/page.tsx
@@ -5,15 +5,16 @@ import { PageBackHeader } from "@/components/ui/page-back-header"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
-import { Search, Loader2, CheckCircle2, Plus } from "lucide-react"
+import { Search, Loader2, CheckCircle2, Plus, ChevronDown } from "lucide-react"
 import { useToast } from "@/hooks/use-toast"
 import { usePi } from "@/components/providers/pi-provider"
 import { useUserProfile } from "@/hooks/useUserProfile"
 import { useAccountBalances } from "@/hooks/useAccountData"
 import { useBalanceRefresh } from "@/components/providers/balance-refresh-provider"
-import { useAvailableTokens } from "@/hooks/useAvailableTokens"
+import { useNetworkTokens } from "@/hooks/useNetworkTokens"
 import { useCheckTrustline } from "@/hooks/useCheckTrustline"
 import { TrustlineDialog } from "@/components/trustlines/trustline-dialog"
+import { TokenIcon } from "@/components/token-icon"
 
 const getStoredWallet = () => {
   if (typeof window === "undefined") return null
@@ -38,11 +39,7 @@ export default function TrustlinesPage() {
 
   const { balances, refresh: refreshBalances } = useAccountBalances(publicKey)
   const { refreshBalances: refreshBalancesGlobal } = useBalanceRefresh() ?? {}
-  const { tokens, isLoading: tokensLoading, error: tokensError } = useAvailableTokens({
-    searchQuery,
-    limit: 50,
-    enabled: true,
-  })
+  const { tokens: allTokens, isLoading: tokensLoading, error: tokensError, hasMore, loadMore, isLoadingMore, refresh: refreshTokens } = useNetworkTokens({ searchQuery, limit: 50 })
 
   // Check which tokens user already has trustlines for
   const userTrustedTokens = useMemo(() => {
@@ -55,7 +52,7 @@ export default function TrustlinesPage() {
     return trusted
   }, [balances])
 
-  const handleToggleToken = (token: typeof tokens[0]) => {
+  const handleToggleToken = (token: typeof allTokens[0]) => {
     const tokenKey = `${token.assetCode}:${token.issuer}`
     const hasTrustline = userTrustedTokens.has(tokenKey)
 
@@ -80,16 +77,6 @@ export default function TrustlinesPage() {
     refreshBalancesGlobal?.()
   }
 
-  // Filter tokens based on search (if search is active, show network tokens; otherwise show all)
-  const displayedTokens = useMemo(() => {
-    if (!searchQuery.trim()) {
-      // Show platform tokens when no search
-      return tokens.filter((t) => t.isPlatformToken)
-    }
-    // Show all matching tokens when searching
-    return tokens
-  }, [tokens, searchQuery])
-
   return (
     <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6">
       <div className="container mx-auto px-4 py-8 space-y-6 max-w-4xl">
@@ -121,14 +108,14 @@ export default function TrustlinesPage() {
                   <Loader2 className="mr-2 h-5 w-5 animate-spin" />
                   Loading tokens...
                 </div>
-              ) : displayedTokens.length === 0 ? (
+              ) : allTokens.length === 0 ? (
                 <div className="text-sm text-muted-foreground py-12 text-center border-2 border-dashed border-border rounded-xl bg-muted/20">
                   {searchQuery.trim()
                     ? "No tokens found matching your search"
                     : "No tokens available"}
                 </div>
               ) : (
-                displayedTokens.map((token) => {
+                allTokens.map((token) => {
                   const tokenKey = `${token.assetCode}:${token.issuer}`
                   const hasTrustline = userTrustedTokens.has(tokenKey)
 
@@ -137,7 +124,14 @@ export default function TrustlinesPage() {
                       key={tokenKey}
                       className="flex items-center justify-between p-4 rounded-xl bg-muted/30 border border-border/50 hover:bg-muted/60 transition-colors"
                     >
-                      <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-3 flex-1 min-w-0">
+                        <TokenIcon
+                          image={token.image}
+                          code={token.assetCode}
+                          issuer={token.issuer}
+                          size="md"
+                        />
+                        <div className="min-w-0 flex-1">
                         <div className="flex items-center gap-2 mb-1">
                           <p className="font-bold text-lg text-foreground">
                             {token.name || token.assetCode}
@@ -165,6 +159,7 @@ export default function TrustlinesPage() {
                           </p>
                         )}
                       </div>
+                      </div>
                       <div className="ml-4 shrink-0">
                         {hasTrustline ? (
                           <Button variant="outline" disabled className="rounded-xl">
@@ -188,11 +183,30 @@ export default function TrustlinesPage() {
               )}
             </div>
 
-            {searchQuery.trim() && displayedTokens.length > 0 && (
+            {allTokens.length > 0 && (
               <p className="text-xs text-muted-foreground text-center pt-2">
-                Showing {displayedTokens.length} result{displayedTokens.length !== 1 ? "s" : ""}
+                Showing {allTokens.length} result{allTokens.length !== 1 ? "s" : ""}
               </p>
             )}
+
+            {hasMore && !searchQuery.trim() && (
+              <div className="flex justify-center pt-2">
+                <Button
+                  variant="outline"
+                  onClick={loadMore}
+                  disabled={isLoadingMore}
+                  className="gap-2 rounded-xl"
+                  size="sm"
+                >
+                  {isLoadingMore ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <ChevronDown className="h-4 w-4" />
+                  )}
+                  {isLoadingMore ? "Loading..." : "Load more"}
+                </Button>
+              </div>
+            )}
           </CardContent>
         </Card>
       </div>
diff --git a/components/navbar.tsx b/components/navbar.tsx
index ff64a19..af71982 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -117,9 +117,11 @@ export function Navbar() {
         <div className="container mx-auto px-4 h-16 flex items-center justify-between">
           {/* Logo */}
           <Link href="/" className="flex items-center gap-2.5 group">
-            <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-green-600 to-mint-500 flex items-center justify-center shadow group-hover:shadow-md transition-shadow">
-              <span className="text-white font-bold text-base">Z</span>
-            </div>
+            <img
+              src="/logo.jpg"
+              alt="ZyraDex"
+              className="w-9 h-9 rounded-lg object-cover shadow group-hover:shadow-md transition-shadow"
+            />
             <span className="font-bold text-lg text-slate-900 dark:text-white">
               ZyraDex
             </span>
diff --git a/components/providers/pool-price-provider.tsx b/components/providers/pool-price-provider.tsx
new file mode 100644
index 0000000..1abff4c
--- /dev/null
+++ b/components/providers/pool-price-provider.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import { createContext, useContext, useEffect, useState, useCallback, useRef, type ReactNode } from "react"
+import { listAllLiquidityPools } from "@/lib/api/liquidity"
+
+interface PoolPrice {
+  priceInPi: number | null
+  updatedAt: number
+}
+
+interface PoolPriceContextValue {
+  getPrice: (code: string, issuer?: string | null, piPrice?: number | null) => number | null
+  isReady: boolean
+}
+
+// Known stablecoins: code -> USD price (1 USD = X of this stablecoin)
+const STABLECOINS: Record<string, number> = {
+  PUSD: 1,
+  USDC: 1,
+  USDT: 1,
+  DAI: 1,
+  BUSD: 1,
+  TUSD: 1,
+  USDP: 1,
+  GUSD: 1,
+}
+
+const PoolPriceContext = createContext<PoolPriceContextValue>({
+  getPrice: () => null,
+  isReady: false,
+})
+
+function isStablecoin(code: string): boolean {
+  return code.toUpperCase() in STABLECOINS
+}
+
+const globalCache = new Map<string, PoolPrice>()
+const CACHE_TTL = 5 * 60 * 1000
+
+function priceFromPoolReserves(pool: any, tKey: string): number | null {
+  try {
+    const reserves = pool.reserves || []
+    if (reserves.length < 2) return null
+    const r0 = reserves[0]
+    const r1 = reserves[1]
+    if (r0.asset === tKey && r1.asset === "native") return parseFloat(r1.amount) / parseFloat(r0.amount)
+    if (r1.asset === tKey && r0.asset === "native") return parseFloat(r0.amount) / parseFloat(r1.amount)
+    return null
+  } catch { return null }
+}
+
+function tokenKey(code: string, issuer?: string | null): string {
+  if (!code || code === "native") return "native"
+  return issuer ? `${code.toUpperCase()}:${issuer}` : code.toUpperCase()
+}
+
+// Normalize a pool reserve asset string to the canonical key format
+function normalizeAssetKey(asset: string): string {
+  if (!asset || asset === "native") return "native"
+  const idx = asset.indexOf(":")
+  if (idx === -1) return asset.toUpperCase()
+  return `${asset.substring(0, idx).toUpperCase()}:${asset.substring(idx + 1)}`
+}
+
+export function PoolPriceProvider({ children }: { children: ReactNode }) {
+  const [isReady, setIsReady] = useState(globalCache.size > 0)
+  const fetching = useRef(false)
+
+  const refresh = useCallback(async () => {
+    if (fetching.current) return
+    fetching.current = true
+    try {
+      console.log("[PoolPrice] Fetching all liquidity pools...")
+      const res = await listAllLiquidityPools({ skipCache: false })
+      const pools = res.data || []
+      console.log(`[PoolPrice] Got ${pools.length} pools, computing prices...`)
+      const now = Date.now()
+
+      // Pass 1: Index all direct PI pools
+      for (const pool of pools) {
+        const reserves = pool.reserves || []
+        if (reserves.length !== 2) continue
+        const r0 = reserves[0]
+        const r1 = reserves[1]
+        const k0 = normalizeAssetKey(r0.asset)
+        const k1 = normalizeAssetKey(r1.asset)
+
+        if (r0.asset && k1 === "native") {
+          const price = parseFloat(r1.amount) / parseFloat(r0.amount)
+          if (!isNaN(price)) globalCache.set(k0, { priceInPi: price, updatedAt: now })
+        }
+        if (r1.asset && k0 === "native") {
+          const price = parseFloat(r0.amount) / parseFloat(r1.amount)
+          if (!isNaN(price)) globalCache.set(k1, { priceInPi: price, updatedAt: now })
+        }
+      }
+
+      // Pass 2: Multi-hop
+      for (const pool of pools) {
+        const reserves = pool.reserves || []
+        if (reserves.length !== 2) continue
+        const r0 = reserves[0]
+        const r1 = reserves[1]
+        const k0 = normalizeAssetKey(r0.asset)
+        const k1 = normalizeAssetKey(r1.asset)
+        if (k0 === "native" || k1 === "native") continue
+
+        const cp0 = globalCache.get(k0)
+        const cp1 = globalCache.get(k1)
+
+        if (cp1?.priceInPi && !globalCache.has(k0)) {
+          const hopPrice = cp1.priceInPi * (parseFloat(r1.amount) / parseFloat(r0.amount))
+          if (!isNaN(hopPrice)) globalCache.set(k0, { priceInPi: hopPrice, updatedAt: now })
+        }
+        if (cp0?.priceInPi && !globalCache.has(k1)) {
+          const hopPrice = cp0.priceInPi * (parseFloat(r0.amount) / parseFloat(r1.amount))
+          if (!isNaN(hopPrice)) globalCache.set(k1, { priceInPi: hopPrice, updatedAt: now })
+        }
+      }
+
+      console.log(`[PoolPrice] Indexed ${globalCache.size} token prices`)
+      setIsReady(true)
+    } catch (e: any) {
+      console.error("[PoolPrice] Failed to fetch pools:", e?.message || e)
+    }
+    fetching.current = false
+  }, [])
+
+  useEffect(() => { refresh() }, [refresh])
+
+  const getPrice = useCallback((code: string, issuer?: string | null, piPrice?: number | null): number | null => {
+    const upper = code.toUpperCase()
+
+    // Stablecoins: price = USD_peg / piPrice
+    if (isStablecoin(upper) && piPrice && piPrice > 0) {
+      return STABLECOINS[upper] / piPrice
+    }
+
+    const key = tokenKey(code, issuer)
+    const cached = globalCache.get(key)
+    if (cached && Date.now() - cached.updatedAt < CACHE_TTL) return cached.priceInPi
+    return null
+  }, [])
+
+  // Periodic refresh every 5 minutes
+  useEffect(() => {
+    const interval = setInterval(refresh, CACHE_TTL)
+    return () => clearInterval(interval)
+  }, [refresh])
+
+  return (
+    <PoolPriceContext.Provider value={{ getPrice, isReady }}>
+      {children}
+    </PoolPriceContext.Provider>
+  )
+}
+
+export function usePoolPrice() {
+  return useContext(PoolPriceContext)
+}
diff --git a/components/send/send-form.tsx b/components/send/send-form.tsx
index bfee4b6..817b508 100644
--- a/components/send/send-form.tsx
+++ b/components/send/send-form.tsx
@@ -16,6 +16,8 @@ import { useCheckTrustline } from "@/hooks/useCheckTrustline"
 import { sendPayment } from "@/lib/api/account"
 import Link from "next/link"
 import { Html5Qrcode } from "html5-qrcode"
+import { useTokenMetadataMap } from "@/hooks/useTokenMetadataMap"
+import { TokenIcon } from "@/components/token-icon"
 
 interface SendFormProps {
   publicKey?: string
@@ -26,6 +28,7 @@ export function SendForm({ publicKey }: SendFormProps) {
   const { toast } = useToast()
   const { balances, refresh: refreshBalances } = useAccountBalances(publicKey)
   const { refreshBalances: refreshBalancesGlobal } = useBalanceRefresh() ?? {}
+  const { lookup } = useTokenMetadataMap()
 
   const [selectedToken, setSelectedToken] = useState<string>("")
   const [destination, setDestination] = useState("")
@@ -329,12 +332,12 @@ export function SendForm({ publicKey }: SendFormProps) {
                     <SelectItem key={value} value={value}>
                       <div className="flex items-center justify-between w-full gap-2">
                         <div className="flex items-center gap-2">
-                          <span
-                            className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500 text-white text-xs font-bold"
-                            aria-hidden
-                          >
-                            {isNative ? "π" : (balance.assetCode || "").slice(0, 2).toUpperCase()}
-                          </span>
+                          <TokenIcon
+                            image={(!isNative ? lookup(balance.assetCode, balance.assetIssuer)?.image : undefined) ?? undefined}
+                            code={isNative ? "PI" : balance.assetCode}
+                            issuer={isNative ? undefined : balance.assetIssuer}
+                            size="sm"
+                          />
                           <span className="font-medium">{displayName}</span>
                         </div>
                         <span className="text-xs text-muted-foreground">{amount}</span>
diff --git a/components/swap/swap-card.tsx b/components/swap/swap-card.tsx
index d6f8c24..fcc73d3 100644
--- a/components/swap/swap-card.tsx
+++ b/components/swap/swap-card.tsx
@@ -16,6 +16,8 @@ import { usePoolsForPair, useSwapQuote, useExecuteSwap } from "@/hooks/useSwapDa
 import { useAccountBalances } from "@/hooks/useAccountData"
 import { useBalanceRefresh } from "@/components/providers/balance-refresh-provider"
 import { listLiquidityPools } from "@/lib/api/liquidity"
+import { useTokenMetadataMap } from "@/hooks/useTokenMetadataMap"
+import { TokenSelect, type TokenOption } from "@/components/swap/token-select"
 
 const getStoredWallet = () => {
   if (typeof window === "undefined") return null
@@ -59,6 +61,7 @@ export function SwapCard() {
   const publicKey = profile?.public_key || localWallet || user?.wallet_address || undefined
   const { balances: rawBalances, refresh: refreshBalances } = useAccountBalances(publicKey)
   const { refreshBalances: refreshBalancesGlobal } = useBalanceRefresh() ?? {}
+  const { lookup } = useTokenMetadataMap()
   
   // Filter out duplicate native entries (ensure only one native/Test Pi entry)
   const balances = useMemo(() => {
@@ -82,6 +85,24 @@ export function SwapCard() {
     })
   }, [rawBalances])
 
+  const tokenAOptions = useMemo<TokenOption[]>(() =>
+    balances.map((balance) => {
+      const isNative = balance.assetType === "native"
+      const code = isNative ? "PI" : balance.assetCode
+      const value = isNative ? "native" : (balance.assetIssuer ? `${balance.assetCode}:${balance.assetIssuer}` : balance.assetCode || "unknown")
+      const meta = !isNative ? lookup(balance.assetCode, balance.assetIssuer) : undefined
+      return {
+        value,
+        code,
+        issuer: isNative ? undefined : balance.assetIssuer,
+        name: isNative ? "Pi" : (meta?.name || balance.assetCode),
+        image: meta?.image,
+        balance: Number(balance.amount),
+      }
+    }),
+    [balances, lookup]
+  )
+
   // Token input state
   const [tokenA, setTokenA] = useState<string>("")
   const [tokenB, setTokenB] = useState<string>("")
@@ -90,6 +111,26 @@ export function SwapCard() {
   const [slippagePercent, setSlippagePercent] = useState<number>(1)
   const [pairedTokens, setPairedTokens] = useState<string[]>([])
   const [loadingPairedTokens, setLoadingPairedTokens] = useState(false)
+
+  const tokenBOptions = useMemo<TokenOption[]>(() =>
+    pairedTokens
+      .filter((t) => t && typeof t === "string" && t.trim() !== "")
+      .map((token) => {
+        const safeToken = token.trim()
+        const isNative = safeToken === "native"
+        const code = isNative ? "PI" : (safeToken.includes(":") ? safeToken.split(":")[0] : safeToken)
+        const issuer = !isNative && safeToken.includes(":") ? safeToken.split(":")[1] : undefined
+        const meta = issuer ? lookup(code, issuer) : undefined
+        return {
+          value: safeToken,
+          code,
+          issuer,
+          name: isNative ? "Pi" : (meta?.name || code),
+          image: meta?.image,
+        }
+      }),
+    [pairedTokens, lookup]
+  )
   
   const walletAddress = localWallet || profile?.public_key || user?.wallet_address
   const [userSecret, setUserSecret] = useState<string>("")
@@ -409,38 +450,12 @@ export function SwapCard() {
                   onChange={(event) => setFromAmount(event.target.value)}
                   className="border-0 bg-transparent text-2xl font-semibold p-0 h-auto focus-visible:ring-0 focus-visible:ring-offset-0 flex-1"
                 />
-            <Select value={tokenA} onValueChange={handleTokenAChange}>
-                  <SelectTrigger className="w-auto min-w-[120px] border-0 bg-muted hover:bg-muted/80 h-12 rounded-xl">
-                    <SelectValue placeholder="Select" />
-              </SelectTrigger>
-              <SelectContent>
-                {balances
-                  .filter((balance) => {
-                    // Filter out balances that would result in empty value
-                    if (balance.assetType === "native") return true
-                    return balance.assetCode && balance.assetCode.trim() !== ""
-                  })
-                  .map((balance) => {
-                    const isNative = balance.assetType === "native"
-                    const displayName = isNative ? "Test Pi" : balance.assetCode
-                    let value = isNative ? "native" : (balance.assetIssuer ? `${balance.assetCode}:${balance.assetIssuer}` : balance.assetCode || "unknown")
-                    // Ensure value is never empty
-                    if (!value || value.trim() === "") {
-                      value = "unknown"
-                    }
-                    const amount = Number(balance.amount).toLocaleString(undefined, { maximumFractionDigits: 6 })
-                    return (
-                      <SelectItem key={value} value={value}>
-                        <div className="flex items-center justify-between w-full">
-                              <span className="font-medium">{displayName}</span>
-                          <span className="text-xs text-muted-foreground ml-2">{amount}</span>
-                        </div>
-                      </SelectItem>
-                    )
-                  })
-                  .filter((item) => item.props.value && item.props.value.trim() !== "")}
-              </SelectContent>
-            </Select>
+                <TokenSelect
+                  options={tokenAOptions}
+                  value={tokenA}
+                  onChange={handleTokenAChange}
+                  placeholder="Select"
+                />
               </div>
               {tokenA && (
                 <div className="absolute bottom-3 left-4 text-xs text-muted-foreground">
@@ -484,36 +499,16 @@ export function SwapCard() {
                     Select token
                   </div>
                 ) : loadingPairedTokens ? (
-                  <div className="w-auto min-w-[120px] h-12 rounded-xl bg-muted/50 border border-border/50 flex items-center justify-center">
+                  <div className="w-auto min-w-[140px] h-12 rounded-xl bg-muted/50 border border-border/50 flex items-center justify-center">
                     <Loader2 className="h-4 w-4 animate-spin" />
                   </div>
                 ) : (
-                    <Select value={tokenB} onValueChange={handleTokenBChange}>
-                    <SelectTrigger className="w-auto min-w-[120px] border-0 bg-muted hover:bg-muted/80 h-12 rounded-xl">
-                      <SelectValue placeholder={pairedTokens.length > 0 ? "Select" : "No pairs"} />
-                      </SelectTrigger>
-                      <SelectContent>
-                      {pairedTokens.length > 0 ? (
-                        pairedTokens
-                          .filter((token) => token && typeof token === "string" && token.trim() !== "")
-                          .map((token) => {
-                            // Ensure token value is never empty
-                            const safeToken = token && token.trim() !== "" ? token : "unknown"
-                            const isNative = safeToken === "native"
-                            const displayName = isNative ? "Test Pi" : (safeToken.includes(":") ? safeToken.split(":")[0] : safeToken)
-                            return (
-                              <SelectItem key={safeToken} value={safeToken}>
-                                {displayName}
-                              </SelectItem>
-                            )
-                          })
-                      ) : (
-                        <div className="p-2 text-sm text-muted-foreground text-center">
-                          No pairs found
-                        </div>
-                      )}
-                      </SelectContent>
-                    </Select>
+                  <TokenSelect
+                    options={tokenBOptions}
+                    value={tokenB}
+                    onChange={handleTokenBChange}
+                    placeholder={pairedTokens.length > 0 ? "Select" : "No pairs"}
+                  />
                 )}
               </div>
               {tokenB && quote && (
diff --git a/components/swap/token-select.tsx b/components/swap/token-select.tsx
new file mode 100644
index 0000000..c00d748
--- /dev/null
+++ b/components/swap/token-select.tsx
@@ -0,0 +1,143 @@
+"use client"
+
+import { useState, useMemo } from "react"
+import { ChevronDown, ChevronRight, Search } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import { cn } from "@/lib/utils"
+import { TokenIcon } from "@/components/token-icon"
+
+export interface TokenOption {
+  value: string // format: "CODE:ISSUER" or "native"
+  code: string
+  issuer?: string | null
+  name?: string
+  image?: string | null
+  balance?: number
+}
+
+interface TokenSelectProps {
+  options: TokenOption[]
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  disabled?: boolean
+}
+
+export function TokenSelect({ options, value, onChange, placeholder = "Select token", disabled }: TokenSelectProps) {
+  const [open, setOpen] = useState(false)
+  const [search, setSearch] = useState("")
+
+  const selected = useMemo(() => options.find((o) => o.value === value), [options, value])
+
+  const filtered = useMemo(() => {
+    if (!search.trim()) return options
+    const q = search.toLowerCase()
+    return options.filter(
+      (o) =>
+        o.code.toLowerCase().includes(q) ||
+        (o.name && o.name.toLowerCase().includes(q))
+    )
+  }, [options, search])
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          disabled={disabled}
+          aria-expanded={open}
+          className={cn(
+            "w-auto min-w-[140px] justify-between gap-2 rounded-xl",
+            !selected && "text-muted-foreground"
+          )}
+        >
+          {selected ? (
+            <div className="flex items-center gap-2">
+              <TokenIcon
+                image={selected.image}
+                code={selected.code}
+                issuer={selected.issuer}
+                size="sm"
+              />
+              <span className="font-medium text-sm">{selected.name || selected.code}</span>
+            </div>
+          ) : (
+            <span className="text-sm">{placeholder}</span>
+          )}
+          <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[260px] p-0" align="start">
+        <Command shouldFilter={false}>
+          <div className="flex items-center border-b px-3">
+            <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+            <input
+              placeholder="Search tokens..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground"
+            />
+          </div>
+          <CommandList>
+            <CommandEmpty>No token found.</CommandEmpty>
+            <CommandGroup>
+              {filtered.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.value}
+                  onSelect={() => {
+                    onChange(option.value)
+                    setOpen(false)
+                    setSearch("")
+                  }}
+                  className="flex items-center justify-between gap-2"
+                >
+                  <div className="flex items-center gap-2 min-w-0">
+                    <TokenIcon
+                      image={option.image}
+                      code={option.code}
+                      issuer={option.issuer}
+                      size="sm"
+                    />
+                    <div className="min-w-0">
+                      <span className="text-sm font-medium truncate block">
+                        {option.name || option.code}
+                      </span>
+                      {option.issuer && (
+                        <span className="text-[10px] text-muted-foreground font-mono truncate block">
+                          {option.code}:{option.issuer.slice(0, 6)}...
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2 shrink-0">
+                    {option.balance !== undefined && (
+                      <span className="text-xs text-muted-foreground">
+                        {option.balance.toLocaleString(undefined, { maximumFractionDigits: 4 })}
+                      </span>
+                    )}
+                    {value === option.value && <ChevronRight className="h-4 w-4 text-green-500" />}
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/components/token-icon.tsx b/components/token-icon.tsx
new file mode 100644
index 0000000..1dd38b9
--- /dev/null
+++ b/components/token-icon.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useTokenMetadataMap } from "@/hooks/useTokenMetadataMap"
+
+const GRADIENTS = [
+  "from-blue-500 to-cyan-500",
+  "from-purple-500 to-pink-500",
+  "from-orange-500 to-red-500",
+  "from-green-500 to-emerald-500",
+  "from-indigo-500 to-violet-500",
+  "from-violet-500 to-fuchsia-500",
+]
+
+interface TokenIconProps {
+  image?: string | null
+  code: string
+  issuer?: string | null
+  size?: "sm" | "md" | "lg"
+  className?: string
+}
+
+const sizeMap = {
+  sm: "w-6 h-6 text-[10px]",
+  md: "w-8 h-8 text-xs",
+  lg: "w-10 h-10 text-sm",
+}
+
+export function TokenIcon({ image, code, issuer, size = "md", className = "" }: TokenIconProps) {
+  const sizeClass = sizeMap[size]
+  const gradientIndex = (code || "").charCodeAt(0) % GRADIENTS.length
+  const fallback = (code || "").slice(0, 2).toUpperCase()
+  const isNative = code === "PI"
+  const { lookup, fetchMetadata } = useTokenMetadataMap()
+
+  const existing = !image && !isNative && issuer ? lookup(code, issuer)?.image : undefined
+  const [resolvedImage, setResolvedImage] = useState<string | null>(
+    image || existing || (isNative ? "/pi.png" : null)
+  )
+
+  useEffect(() => {
+    if (image) {
+      setResolvedImage(image)
+      return
+    }
+    if (isNative) {
+      setResolvedImage("/pi.png")
+      return
+    }
+    if (!issuer || !code) return
+
+    const found = lookup(code, issuer)
+    if (found?.image) {
+      setResolvedImage(found.image)
+      return
+    }
+
+    let cancelled = false
+    fetchMetadata(code, issuer).then((meta) => {
+      if (!cancelled && meta?.image) {
+        setResolvedImage(meta.image)
+      }
+    })
+
+    return () => { cancelled = true }
+  }, [image, code, issuer, isNative, lookup, fetchMetadata])
+
+  return (
+    <span
+      className={`${sizeClass} rounded-full inline-flex items-center justify-center shrink-0 overflow-hidden ${isNative && resolvedImage ? "bg-purple-900" : `bg-gradient-to-br ${GRADIENTS[gradientIndex]}`} ${className}`}
+    >
+      {resolvedImage ? (
+        <img
+          src={resolvedImage}
+          alt={code}
+          className="object-contain w-full h-full"
+          loading="lazy"
+        />
+      ) : (
+        <span className="text-white font-bold">{fallback}</span>
+      )}
+    </span>
+  )
+}
diff --git a/hooks/useAvailableTokens.ts b/hooks/useAvailableTokens.ts
index 22e450a..bc964d2 100644
--- a/hooks/useAvailableTokens.ts
+++ b/hooks/useAvailableTokens.ts
@@ -9,9 +9,14 @@ export interface AvailableToken {
   issuer: string
   name?: string
   description?: string
+  image?: string
   numAccounts?: number
   isPlatformToken: boolean
   homeDomain?: string
+  holders?: number
+  liquidityPools?: number
+  totalSupply?: number
+  circulatingSupply?: number
 }
 
 export interface UseAvailableTokensOptions {
@@ -101,10 +106,15 @@ export const useAvailableTokens = (options: UseAvailableTokensOptions = {}) => {
       tokens.push({
         assetCode: token.assetCode,
         issuer: token.issuer,
-        name: token.name,
-        description: token.description,
+        name: token.tomlName || token.name,
+        description: token.tomlDescription || token.description,
+        image: token.image,
         isPlatformToken: true,
         homeDomain: token.homeDomain,
+        holders: token.holders,
+        liquidityPools: token.liquidityPools,
+        totalSupply: token.totalSupply,
+        circulatingSupply: token.circulatingSupply,
       })
     })
 
diff --git a/hooks/useCheckTrustline.ts b/hooks/useCheckTrustline.ts
index f4f1d4b..b8eb43c 100644
--- a/hooks/useCheckTrustline.ts
+++ b/hooks/useCheckTrustline.ts
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 import { getAccountBalances } from "@/lib/api/account"
 import type { ApiError } from "@/lib/api"
 import { toApiError } from "@/lib/api"
@@ -13,14 +13,13 @@ export const useCheckTrustline = (
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<ApiError | null>(null)
 
-  useEffect(() => {
+  const check = useCallback(() => {
     if (!enabled || !publicKey || !assetCode) {
       setHasTrustline(null)
       setIsLoading(false)
       return
     }
 
-    // Native assets don't need trustlines
     if (assetCode === "native" || assetCode.toLowerCase() === "pi") {
       setHasTrustline(true)
       setIsLoading(false)
@@ -34,40 +33,32 @@ export const useCheckTrustline = (
     getAccountBalances(publicKey)
       .then((response) => {
         if (cancelled) return
-
         const hasToken = response.balances.some((balance) => {
           if (balance.assetType === "native") return false
           const codeMatch = balance.assetCode === assetCode
-          const issuerMatch = issuer
-            ? balance.assetIssuer === issuer
-            : !balance.assetIssuer
+          const issuerMatch = issuer ? balance.assetIssuer === issuer : !balance.assetIssuer
           return codeMatch && issuerMatch
         })
-
         setHasTrustline(hasToken)
       })
       .catch((err) => {
         if (!cancelled) {
-          const apiError = toApiError(err)
-          setError(apiError)
+          setError(toApiError(err))
           setHasTrustline(null)
         }
       })
       .finally(() => {
-        if (!cancelled) {
-          setIsLoading(false)
-        }
+        if (!cancelled) setIsLoading(false)
       })
 
-    return () => {
-      cancelled = true
-    }
+    return () => { cancelled = true }
   }, [publicKey, assetCode, issuer, enabled])
 
-  return {
-    hasTrustline,
-    isLoading,
-    error,
-  }
+  useEffect(() => {
+    const cleanup = check()
+    return cleanup
+  }, [check])
+
+  return { hasTrustline, isLoading, error, refresh: check }
 }
 
diff --git a/hooks/useNetworkTokens.ts b/hooks/useNetworkTokens.ts
new file mode 100644
index 0000000..309186c
--- /dev/null
+++ b/hooks/useNetworkTokens.ts
@@ -0,0 +1,208 @@
+import { useEffect, useMemo, useState, useCallback, useRef } from "react"
+import { fetchTokens, lookupTokenMetadata, type TokenRecord } from "@/lib/api/tokens"
+import { fetchListedAssets, searchAssets, type ListedAsset } from "@/lib/api/orderbook"
+import { toApiError } from "@/lib/api"
+import type { ApiError } from "@/lib/api"
+
+export interface NetworkToken {
+  assetCode: string
+  issuer: string
+  numAccounts: number
+  liquidityPools: number
+  circulatingSupply: number
+  tomlUrl: string | null
+  image?: string
+  name?: string
+  description?: string
+  isPlatformToken: boolean
+}
+
+const PAGE_SIZE = 15
+
+// In-memory enrichment cache: key = "CODE:ISSUER", value = { image, name, description }
+const enrichmentCache = new Map<string, { image?: string; name?: string; description?: string } | null>()
+const pendingEnrichments = new Map<string, Promise<{ image?: string; name?: string; description?: string } | null>>()
+
+async function enrichBatch(assets: ListedAsset[]): Promise<void> {
+  const toFetch = assets.filter(
+    (a) => a.toml_url && !enrichmentCache.has(`${a.asset_code}:${a.asset_issuer}`)
+  )
+
+  if (toFetch.length === 0) return
+
+  // Fetch concurrently with max 5 in-flight
+  const batchSize = 5
+  for (let i = 0; i < toFetch.length; i += batchSize) {
+    const batch = toFetch.slice(i, i + batchSize)
+    await Promise.all(
+      batch.map(async (asset) => {
+        const key = `${asset.asset_code}:${asset.asset_issuer}`
+        if (pendingEnrichments.has(key)) {
+          await pendingEnrichments.get(key)
+          return
+        }
+        const promise = lookupTokenMetadata(asset.asset_code, asset.asset_issuer)
+          .then((meta) => {
+            const result = meta ? {
+              image: meta.image,
+              name: meta.tomlName,
+              description: meta.tomlDescription,
+            } : null
+            enrichmentCache.set(key, result)
+            pendingEnrichments.delete(key)
+            return result
+          })
+          .catch(() => {
+            enrichmentCache.set(key, null)
+            pendingEnrichments.delete(key)
+            return null
+          })
+        pendingEnrichments.set(key, promise)
+        await promise
+      })
+    )
+  }
+}
+
+export function useNetworkTokens(options?: { searchQuery?: string; limit?: number }) {
+  const { searchQuery = "", limit = PAGE_SIZE } = options || {}
+  const [platformTokens, setPlatformTokens] = useState<TokenRecord[]>([])
+  const [networkPages, setNetworkPages] = useState<ListedAsset[][]>([])
+  const [, setEnrichVersion] = useState(0) // triggers re-render after enrichment
+  const [isLoading, setIsLoading] = useState(true)
+  const [isLoadingMore, setIsLoadingMore] = useState(false)
+  const [error, setError] = useState<ApiError | null>(null)
+  const [hasMore, setHasMore] = useState(true)
+  const nextCursor = useRef<string | null>(null)
+  const platformLoaded = useRef(false)
+
+  const loadPlatform = useCallback(async () => {
+    if (platformLoaded.current) return
+    try {
+      const res = await fetchTokens().catch(() => ({ tokens: [] as TokenRecord[] }))
+      setPlatformTokens(res.tokens || [])
+      platformLoaded.current = true
+    } catch {
+      // platform tokens fail silently
+    }
+  }, [])
+
+  const loadNetwork = useCallback(async (reset: boolean) => {
+    if (reset) {
+      setIsLoading(true)
+      setNetworkPages([])
+      nextCursor.current = null
+      setHasMore(true)
+    } else {
+      setIsLoadingMore(true)
+    }
+
+    try {
+      const q = searchQuery.trim()
+      let res: { assets: ListedAsset[]; next: string | null }
+
+      if (q) {
+        const searchRes = await searchAssets(q, limit)
+        res = {
+          assets: (searchRes.assets || []).map((a) => ({
+            asset_type: a.asset_type,
+            asset_code: a.asset_code,
+            asset_issuer: a.asset_issuer,
+            num_accounts: a.num_accounts ?? 0,
+            num_liquidity_pools: a.num_liquidity_pools ?? 0,
+            balances: a.balances ?? { authorized: "0" },
+            flags: a.flags ?? {},
+            toml_url: a.toml_url ?? null,
+            paging_token: a.paging_token,
+          } as ListedAsset)),
+          next: null,
+        }
+        setHasMore(false)
+      } else {
+        res = await fetchListedAssets({ cursor: nextCursor.current ?? undefined, limit })
+        nextCursor.current = res.next
+        setHasMore(res.next !== null && res.assets.length === limit)
+      }
+
+      setNetworkPages((prev) => reset ? [res.assets] : [...prev, res.assets])
+
+      // Batch-enrich in background
+      enrichBatch(res.assets).then(() => setEnrichVersion((v) => v + 1))
+    } catch (err) {
+      setError(toApiError(err))
+    } finally {
+      setIsLoading(false)
+      setIsLoadingMore(false)
+    }
+  }, [searchQuery, limit])
+
+  useEffect(() => {
+    loadPlatform()
+  }, [loadPlatform])
+
+  useEffect(() => {
+    loadNetwork(true)
+  }, [loadNetwork])
+
+  const loadMore = useCallback(() => {
+    if (!isLoadingMore && hasMore && !searchQuery.trim()) {
+      loadNetwork(false)
+    }
+  }, [isLoadingMore, hasMore, searchQuery, loadNetwork])
+
+  const allTokens = useMemo<NetworkToken[]>(() => {
+    const platformSet = new Set<string>()
+    const merged: NetworkToken[] = []
+
+    for (const token of platformTokens) {
+      const key = `${token.assetCode}:${token.issuer}`
+      platformSet.add(key)
+      merged.push({
+        assetCode: token.assetCode,
+        issuer: token.issuer,
+        numAccounts: token.holders ?? 0,
+        liquidityPools: token.liquidityPools ?? 0,
+        circulatingSupply: token.circulatingSupply ?? token.totalSupply,
+        tomlUrl: null,
+        image: token.image,
+        name: token.tomlName || token.name,
+        description: token.tomlDescription || token.description,
+        isPlatformToken: true,
+      })
+    }
+
+    for (const page of networkPages) {
+      for (const asset of page) {
+        const key = `${asset.asset_code}:${asset.asset_issuer}`
+        if (platformSet.has(key)) continue
+        platformSet.add(key)
+
+        const enriched = enrichmentCache.get(key)
+        merged.push({
+          assetCode: asset.asset_code,
+          issuer: asset.asset_issuer,
+          numAccounts: asset.num_accounts ?? 0,
+          liquidityPools: asset.num_liquidity_pools ?? 0,
+          circulatingSupply: parseFloat(asset.balances?.authorized ?? "0"),
+          tomlUrl: asset.toml_url,
+          image: enriched?.image ?? undefined,
+          name: enriched?.name ?? undefined,
+          description: enriched?.description ?? undefined,
+          isPlatformToken: false,
+        })
+      }
+    }
+
+    return merged
+  }, [platformTokens, networkPages])
+
+  return {
+    tokens: allTokens,
+    isLoading,
+    isLoadingMore,
+    error,
+    hasMore,
+    loadMore,
+    refresh: () => loadNetwork(true),
+  }
+}
diff --git a/hooks/usePiPrice.ts b/hooks/usePiPrice.ts
index e62274c..3eb8f61 100644
--- a/hooks/usePiPrice.ts
+++ b/hooks/usePiPrice.ts
@@ -20,17 +20,17 @@ export const usePiPrice = () => {
 
       try {
         // Try the main price endpoint first
-        const response = await fetch("https://www.zyrachain.org/api/v1/price")
+        const response = await fetch("https://api.zyrachain.org/api/v1/price")
         
         if (!response.ok) {
           // Fallback to pi-price endpoint
-          const fallbackResponse = await fetch("https://www.zyrachain.org/data/pi-price")
+          const fallbackResponse = await fetch("https://api.zyrachain.org/data/pi-price")
           if (!fallbackResponse.ok) {
             throw new Error("Failed to fetch Pi price")
           }
           const fallbackData = await fallbackResponse.json()
           if (!cancelled) {
-            const priceValue = fallbackData.price || fallbackData.usd || fallbackData.value || null
+            const priceValue = fallbackData.price_usd || fallbackData.price || fallbackData.usd || null
             setPrice(priceValue)
             setIsLoading(false)
           }
@@ -40,14 +40,12 @@ export const usePiPrice = () => {
         const data = await response.json()
         
         if (!cancelled) {
-          // Handle different possible response formats
-          const priceValue = 
-            data.price || 
-            data.usd || 
-            data.value || 
+          const priceValue =
+            data.price_usd ||
+            data.price ||
+            data.usd ||
+            data.value ||
             (typeof data === 'number' ? data : null) ||
-            (data.data?.price) ||
-            (data.data?.usd) ||
             null
           setPrice(priceValue)
           setIsLoading(false)
diff --git a/hooks/useTokenMarketData.ts b/hooks/useTokenMarketData.ts
new file mode 100644
index 0000000..2924ba7
--- /dev/null
+++ b/hooks/useTokenMarketData.ts
@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react"
+import { getTradeAggregations } from "@/lib/api/orderbook"
+
+export interface TokenMarketData {
+  volume24h: number | null
+  isLoading: boolean
+}
+
+export function useTokenMarketData(assetCode: string, issuer?: string): TokenMarketData {
+  const [volume24h, setVolume24h] = useState<number | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+
+  useEffect(() => {
+    if (!assetCode || assetCode === "native") return
+
+    let cancelled = false
+    setIsLoading(true)
+
+    const endTime = new Date().toISOString()
+    const startTime = new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString()
+
+    const tokenKey = issuer ? `${assetCode}:${issuer}` : assetCode
+
+    getTradeAggregations(tokenKey, "native", 3600000, startTime, endTime, 24)
+      .then((res) => {
+        if (cancelled) return
+        if (res.success && res.aggregations?.length > 0) {
+          const totalBaseVolume = res.aggregations.reduce(
+            (sum: number, a: any) => sum + parseFloat(a.base_volume || "0"),
+            0
+          )
+          setVolume24h(totalBaseVolume)
+        } else {
+          setVolume24h(0)
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setVolume24h(null)
+      })
+      .finally(() => {
+        if (!cancelled) setIsLoading(false)
+      })
+
+    return () => { cancelled = true }
+  }, [assetCode, issuer])
+
+  return { volume24h, isLoading }
+}
diff --git a/hooks/useTokenMetadataMap.ts b/hooks/useTokenMetadataMap.ts
new file mode 100644
index 0000000..1ec89c0
--- /dev/null
+++ b/hooks/useTokenMetadataMap.ts
@@ -0,0 +1,91 @@
+import { useCallback, useMemo, useRef } from "react"
+import { useTokenRegistry } from "./useTokenRegistry"
+import { lookupTokenMetadata } from "@/lib/api/tokens"
+
+function makeKey(assetCode: string, issuer?: string | null): string {
+  return `${assetCode}:${issuer || ""}`
+}
+
+export interface TokenLookup {
+  image?: string
+  name?: string
+  holders?: number
+  liquidityPools?: number
+  circulatingSupply?: number
+  totalSupply?: number
+  description?: string
+}
+
+const pendingRequests = new Map<string, Promise<TokenLookup | null>>()
+
+export function useTokenMetadataMap() {
+  const { tokens } = useTokenRegistry()
+  const fetchedCache = useRef(new Map<string, TokenLookup | null>())
+
+  const tokenMap = useMemo(() => {
+    const map = new Map<string, TokenLookup>()
+    for (const token of tokens) {
+      const key = makeKey(token.assetCode, token.issuer)
+      if (!map.has(key)) {
+        map.set(key, {
+          image: token.image,
+          name: token.tomlName || token.name,
+          holders: token.holders,
+          liquidityPools: token.liquidityPools,
+          circulatingSupply: token.circulatingSupply,
+          totalSupply: token.totalSupply,
+          description: token.tomlDescription || token.description,
+        })
+      }
+    }
+    return map
+  }, [tokens])
+
+  const lookup = (assetCode: string, issuer?: string | null): TokenLookup | undefined => {
+    const key = makeKey(assetCode, issuer)
+    const platform = tokenMap.get(key)
+    if (platform && platform.image) return platform
+    const fetched = fetchedCache.current.get(key)
+    if (fetched?.image) return fetched
+    if (platform) return platform
+    if (fetched !== undefined) return fetched ?? undefined
+    return undefined
+  }
+
+  const fetchMetadata = useCallback(async (assetCode: string, issuer?: string | null): Promise<TokenLookup | null> => {
+    if (!assetCode || !issuer) return null
+    const key = makeKey(assetCode, issuer)
+
+    const platform = tokenMap.get(key)
+    if (platform && platform.image) return platform
+
+    const cached = fetchedCache.current.get(key)
+    if (cached !== undefined) return cached
+
+    const pending = pendingRequests.get(key)
+    if (pending) return pending
+
+    const promise = lookupTokenMetadata(assetCode, issuer).then((meta) => {
+      const result: TokenLookup | null = meta ? {
+        image: meta.image,
+        name: meta.tomlName,
+        holders: meta.holders,
+        liquidityPools: meta.liquidityPools,
+        circulatingSupply: meta.circulatingSupply,
+        description: meta.tomlDescription,
+      } : null
+      fetchedCache.current.set(key, result)
+      pendingRequests.delete(key)
+      return result
+    }).catch(() => {
+      fetchedCache.current.set(key, null)
+      pendingRequests.delete(key)
+      return null
+    })
+
+    pendingRequests.set(key, promise)
+    return promise
+  }, [tokenMap])
+
+  return { lookup, fetchMetadata, tokenMap }
+}
diff --git a/hooks/useTokenPrice.ts b/hooks/useTokenPrice.ts
index ba156e7..b91975b 100644
--- a/hooks/useTokenPrice.ts
+++ b/hooks/useTokenPrice.ts
@@ -5,11 +5,37 @@ import type { ApiError } from "@/lib/api"
 export interface TokenPrice {
   tokenCode: string
   tokenIssuer?: string
-  priceInPi: number | null // Price of 1 token in Pi, or null if no pool exists
+  priceInPi: number | null
   isLoading: boolean
   error: ApiError | null
 }
 
+function tokenKey(code: string, issuer?: string | null): string {
+  if (!code || code === "native") return "native"
+  const upper = code.toUpperCase()
+  return issuer ? `${upper}:${issuer}` : upper
+}
+
+function toQuoteDescriptor(k: string): string {
+  if (k === "native") return "native"
+  if (!k.includes(":")) return `${k}:`
+  return k
+}
+
+function priceFromReserves(pool: any, tKey: string): number | null {
+  try {
+    const reserves = pool.reserves || []
+    if (reserves.length < 2) return null
+    const r0 = reserves[0]
+    const r1 = reserves[1]
+    const is0 = r0.asset === tKey || r0.asset?.toUpperCase() === tKey?.toUpperCase()
+    const is1 = r1.asset === tKey || r1.asset?.toUpperCase() === tKey?.toUpperCase()
+    if (is0 && r1.asset === "native") return parseFloat(r1.amount) / parseFloat(r0.amount)
+    if (is1 && r0.asset === "native") return parseFloat(r0.amount) / parseFloat(r1.amount)
+    return null
+  } catch { return null }
+}
+
 export const useTokenPrice = (tokenCode: string, tokenIssuer?: string, enabled: boolean = true): TokenPrice => {
   const [priceInPi, setPriceInPi] = useState<number | null>(null)
   const [isLoading, setIsLoading] = useState(false)
@@ -17,104 +43,56 @@ export const useTokenPrice = (tokenCode: string, tokenIssuer?: string, enabled:
   const lastFetchRef = useRef<string | null>(null)
   const lastPriceRef = useRef<number | null>(null)
 
-  // Create a stable key for this token
-  const tokenKey = useMemo(() => {
+  const tKey = useMemo(() => {
     if (!tokenCode || tokenCode === "native") return null
-    return tokenIssuer ? `${tokenCode}:${tokenIssuer}` : tokenCode
+    return tokenKey(tokenCode, tokenIssuer)
   }, [tokenCode, tokenIssuer])
 
   useEffect(() => {
-    if (!enabled || !tokenKey) {
-      setPriceInPi(null)
-      setIsLoading(false)
-      setError(null)
-      lastFetchRef.current = null
-      return
-    }
-
-    // Skip if we just fetched this token (prevent re-render loops)
-    if (lastFetchRef.current === tokenKey && lastPriceRef.current !== null) {
-      return
+    if (!enabled || !tKey) {
+      setPriceInPi(null); setIsLoading(false); setError(null); return
     }
+    if (lastFetchRef.current === tKey && lastPriceRef.current !== null) return
 
     let cancelled = false
-    setIsLoading(true)
-    setError(null)
-    lastFetchRef.current = tokenKey
+    setIsLoading(true); setError(null)
+    lastFetchRef.current = tKey
 
-    const fetchPrice = async () => {
+    const resolve = async () => {
       try {
-        // Find pools between this token and native Pi (uses cache internally)
-        const poolsResponse = await getPoolsForPair({
-          tokenA: tokenKey,
-          tokenB: "native",
-        })
-
+        const directPools = await getPoolsForPair({ tokenA: tKey, tokenB: "native" })
         if (cancelled) return
 
-        if (!poolsResponse.success || poolsResponse.pools.length === 0) {
-          lastPriceRef.current = null
-          setPriceInPi(null)
-          setIsLoading(false)
-          return
-        }
-
-        // Use the first pool to get a quote for 1 unit of token
-        const pool = poolsResponse.pools[0]
-        try {
-          const quote = await quoteSwap({
-            poolId: pool.id,
-            from: tokenKey,
-            to: "native",
-            amount: "1",
-            slippagePercent: 1,
-          })
-
-          if (cancelled) return
-
-          if (quote.success && quote.expectedOutput) {
-            const price = parseFloat(quote.expectedOutput)
-            const finalPrice = isNaN(price) ? null : price
-            lastPriceRef.current = finalPrice
-            setPriceInPi(finalPrice)
-          } else {
-            lastPriceRef.current = null
-            setPriceInPi(null)
-          }
-        } catch (quoteError) {
-          // If quote fails, token has no price
-          if (!cancelled) {
-            lastPriceRef.current = null
-            setPriceInPi(null)
+        if (directPools.success && directPools.pools.length > 0) {
+          const pool = directPools.pools[0]
+          let foundPrice: number | null = null
+          try {
+            const quote = await quoteSwap({
+              poolId: pool.id, from: toQuoteDescriptor(tKey), to: "native", amount: "1", slippagePercent: 1,
+            })
+            if (quote.success && quote.expectedOutput) {
+              const price = parseFloat(quote.expectedOutput)
+              foundPrice = isNaN(price) ? null : price
+            }
+          } catch {}
+          if (foundPrice === null) foundPrice = priceFromReserves(pool, tKey)
+          if (!cancelled && foundPrice !== null) {
+            lastPriceRef.current = foundPrice
+            setPriceInPi(foundPrice); setIsLoading(false); return
           }
         }
+
+        if (!cancelled) { setPriceInPi(null); setIsLoading(false) }
       } catch (err: any) {
-        if (!cancelled) {
-          setError(err)
-          lastPriceRef.current = null
-          setPriceInPi(null)
-        }
-      } finally {
-        if (!cancelled) {
-          setIsLoading(false)
-        }
+        if (!cancelled) { setError(err); setPriceInPi(null); setIsLoading(false) }
       }
     }
 
-    fetchPrice()
+    resolve()
+    return () => { cancelled = true }
+  }, [tKey, enabled])
 
-    return () => {
-      cancelled = true
-    }
-  }, [tokenKey, enabled])
-
-  return {
-    tokenCode,
-    tokenIssuer,
-    priceInPi,
-    isLoading,
-    error,
-  }
+  return { tokenCode, tokenIssuer, priceInPi, isLoading, error }
 }
 
 export const useTokenPrices = (balances: Array<{ assetCode?: string; assetIssuer?: string; assetType?: string }>) => {
@@ -122,122 +100,68 @@ export const useTokenPrices = (balances: Array<{ assetCode?: string; assetIssuer
   const [loadingTokens, setLoadingTokens] = useState<Set<string>>(new Set())
   const lastBalancesRef = useRef<string>("")
 
-  // Create a stable key from balances to prevent unnecessary refetches
-  const balancesKey = useMemo(() => {
-    return balances
-      .filter(b => b.assetCode)
-      .map(b => `${b.assetCode}:${b.assetIssuer || ""}:${b.assetType || ""}`)
-      .sort()
-      .join("|")
-  }, [balances])
+  const balancesKey = useMemo(() =>
+    balances.filter(b => b.assetCode).map(b => `${b.assetCode}:${b.assetIssuer || ""}:${b.assetType || ""}`).sort().join("|"),
+    [balances]
+  )
 
   useEffect(() => {
-    // Skip if balances haven't actually changed
-    if (lastBalancesRef.current === balancesKey) {
-      return
-    }
-
-    // Debounce to avoid too many API calls
+    if (lastBalancesRef.current === balancesKey) return
     const timeoutId = setTimeout(() => {
       const fetchPrices = async () => {
         lastBalancesRef.current = balancesKey
         const priceMap = new Map<string, number | null>()
         const loadingSet = new Set<string>()
+        const tokensToFetch = balances.filter(b => b.assetType !== "native" && b.assetCode)
+        priceMap.set("native", 1)
 
-        // Process tokens in batches to avoid rate limiting
-        const tokensToFetch = balances.filter(
-          (b) => b.assetType !== "native" && b.assetCode
-        )
-
-        // Process in smaller batches with delays
-        const batchSize = 3
-        for (let i = 0; i < tokensToFetch.length; i += batchSize) {
-          const batch = tokensToFetch.slice(i, i + batchSize)
-          
-          await Promise.all(
-            batch.map(async (balance) => {
-              const tokenKey = balance.assetIssuer 
-                ? `${balance.assetCode}:${balance.assetIssuer}` 
-                : balance.assetCode!
+        if (tokensToFetch.length === 0) { setPrices(priceMap); return }
 
-              loadingSet.add(tokenKey)
+        // Fetch prices sequentially to avoid overwhelming the API (already cached after first call)
+        for (const balance of tokensToFetch) {
+          const code = balance.assetCode!
+          const issuer = balance.assetIssuer || undefined
+          const tKey = tokenKey(code, issuer)
+          loadingSet.add(tKey)
 
+          try {
+            const directRes = await getPoolsForPair({ tokenA: tKey, tokenB: "native" }).catch(() => ({ success: false, pools: [] }))
+            if (directRes.success && directRes.pools.length > 0) {
+              const pool = directRes.pools[0]
+              let foundPrice: number | null = null
               try {
-                const tokenDescriptor = balance.assetIssuer 
-                  ? `${balance.assetCode}:${balance.assetIssuer}` 
-                  : balance.assetCode!
-
-                // Use cached request (deduplicates and caches automatically)
-                const poolsResponse = await getPoolsForPair({
-                  tokenA: tokenDescriptor,
-                  tokenB: "native",
+                const quote = await quoteSwap({
+                  poolId: pool.id, from: toQuoteDescriptor(tKey), to: "native", amount: "1", slippagePercent: 1,
                 })
-
-                if (poolsResponse.success && poolsResponse.pools.length > 0) {
-                  const pool = poolsResponse.pools[0]
-                  try {
-                    const quote = await quoteSwap({
-                      poolId: pool.id,
-                      from: tokenDescriptor,
-                      to: "native",
-                      amount: "1",
-                      slippagePercent: 1,
-                    })
-
-                    if (quote.success && quote.expectedOutput) {
-                      const price = parseFloat(quote.expectedOutput)
-                      priceMap.set(tokenKey, isNaN(price) ? null : price)
-                    } else {
-                      priceMap.set(tokenKey, null)
-                    }
-                  } catch {
-                    priceMap.set(tokenKey, null)
-                  }
-                } else {
-                  priceMap.set(tokenKey, null)
+                if (quote.success && quote.expectedOutput) {
+                  const price = parseFloat(quote.expectedOutput)
+                  foundPrice = isNaN(price) ? null : price
                 }
-              } catch {
-                priceMap.set(tokenKey, null)
-              } finally {
-                loadingSet.delete(tokenKey)
-              }
-            })
-          )
-
-          // Add delay between batches to avoid rate limiting (reduced since we have caching)
-          if (i + batchSize < tokensToFetch.length) {
-            await new Promise((resolve) => setTimeout(resolve, 300))
+              } catch {}
+              if (foundPrice === null) foundPrice = priceFromReserves(pool, tKey)
+              priceMap.set(tKey, foundPrice)
+            } else {
+              priceMap.set(tKey, null)
+            }
+          } catch {
+            priceMap.set(tKey, null)
+          } finally {
+            loadingSet.delete(tKey)
           }
         }
 
-        // Set native price
-        priceMap.set("native", 1)
-
-        setPrices(priceMap)
-        setLoadingTokens(loadingSet)
-      }
-
-      if (balances.length > 0) {
-        fetchPrices()
+        setPrices(priceMap); setLoadingTokens(loadingSet)
       }
-    }, 300) // Reduced debounce since we have caching
-
+      if (balances.length > 0) fetchPrices()
+    }, 300)
     return () => clearTimeout(timeoutId)
   }, [balancesKey, balances.length])
 
   const getPrice = (assetCode?: string, assetIssuer?: string, assetType?: string): number | null => {
     if (assetType === "native") return 1
     if (!assetCode) return null
-    const key = assetIssuer ? `${assetCode}:${assetIssuer}` : assetCode
-    return prices.get(key) ?? null
+    return prices.get(tokenKey(assetCode, assetIssuer || undefined)) ?? null
   }
 
-  const isLoading = loadingTokens.size > 0
-
-  return {
-    prices,
-    getPrice,
-    isLoading,
-  }
+  return { prices, getPrice, isLoading: loadingTokens.size > 0 }
 }
-
diff --git a/lib/api/orderbook.ts b/lib/api/orderbook.ts
index ef7efc1..99d6877 100644
--- a/lib/api/orderbook.ts
+++ b/lib/api/orderbook.ts
@@ -22,13 +22,15 @@ export interface AssetSearchResult {
   asset_issuer: string
   num_accounts: number
   num_claimable_balances: number
-  balances: string
+  num_liquidity_pools: number
+  balances: any
   flags: {
     auth_required: boolean
     auth_revocable: boolean
     auth_immutable: boolean
     auth_clawback_enabled: boolean
   }
+  toml_url?: string | null
   paging_token: string
 }
 
@@ -93,6 +95,34 @@ export const searchAssets = async (code: string, limit: number = 10) => {
   }
 }
 
+export interface ListedAsset {
+  asset_type: string
+  asset_code: string
+  asset_issuer: string
+  num_accounts: number
+  num_liquidity_pools: number
+  balances: { authorized: string; unauthorized: string }
+  flags: Record<string, boolean>
+  toml_url: string | null
+  paging_token: string
+}
+
+export interface ListAssetsResponse {
+  success: boolean
+  assets: ListedAsset[]
+  count: number
+  next: string | null
+}
+
+export const fetchListedAssets = async (params: { cursor?: string; limit?: number } = {}) => {
+  try {
+    const { data } = await axiosClient.get<ListAssetsResponse>("/market/list-assets", { params })
+    return data
+  } catch (error) {
+    throw toApiError(error)
+  }
+}
+
 export interface Trade {
   id: string
   paging_token: string
diff --git a/lib/api/tokens.ts b/lib/api/tokens.ts
index cb91252..6058cc0 100644
--- a/lib/api/tokens.ts
+++ b/lib/api/tokens.ts
@@ -10,6 +10,12 @@ export interface TokenRecord {
   description: string
   totalSupply: number
   homeDomain?: string
+  image?: string
+  circulatingSupply?: number
+  holders?: number
+  liquidityPools?: number
+  tomlName?: string
+  tomlDescription?: string
   createdAt: string
   updatedAt: string
 }
@@ -118,3 +124,19 @@ export const burnToken = async (payload: BurnTokenPayload) => {
     throw toApiError(error)
   }
 }
+
+export const lookupTokenMetadata = async (code: string, issuer: string) => {
+  try {
+    const { data } = await axiosClient.get<{ success: boolean; metadata: {
+      image?: string
+      circulatingSupply?: number
+      holders?: number
+      liquidityPools?: number
+      tomlName?: string
+      tomlDescription?: string
+    } }>("/tokens/lookup", { params: { code, issuer } })
+    return data.metadata
+  } catch {
+    return null
+  }
+}
diff --git a/public/android-chrome-192x192 (1).png b/public/android-chrome-192x192 (1).png
new file mode 100644
index 0000000..70299ab
Binary files /dev/null and b/public/android-chrome-192x192 (1).png differ
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
index 0d50e09..0d5c5da 100644
Binary files a/public/android-chrome-512x512.png and b/public/android-chrome-512x512.png differ
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
index 33b1da9..074880a 100644
Binary files a/public/apple-touch-icon.png and b/public/apple-touch-icon.png differ
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
index 3e63595..714bcc5 100644
Binary files a/public/favicon-16x16.png and b/public/favicon-16x16.png differ
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
index 927c1b1..9698e91 100644
Binary files a/public/favicon-32x32.png and b/public/favicon-32x32.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
index 1725663..4b50247 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/logo.jpg b/public/logo.jpg
index 0c0d640..3aff3a2 100644
Binary files a/public/logo.jpg and b/public/logo.jpg differ
diff --git a/public/pi.png b/public/pi.png
index 89b307e..09b6238 100644
Binary files a/public/pi.png and b/public/pi.png differ
diff --git a/public/site (1).webmanifest b/public/site (1).webmanifest
new file mode 100644
index 0000000..45dc8a2
--- /dev/null
+++ b/public/site (1).webmanifest	
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
diff --git a/validation-key.txt b/validation-key.txt
index b9ac547..d57f227 100644
--- a/validation-key.txt
+++ b/validation-key.txt
@@ -1 +1 @@
-e6c1a754709aa5fbbbf38086f07b6efa3c3e6c993676c1ef1f8ad068eb24695c2926f93927ef24444cf4a0f2ccf8972f6a19e8e6d6c1e90a4ce59bc419fd685c
\ No newline at end of file
+4d23a0191c04e2527d000818b6dfb0bac2e95003f4c7fa45b707169cc6d80874448d7620190d1eb57ca8d740bdf9c3ba9d2c5294a13f472f205eb0531d699457
\ No newline at end of file