diff --git a/src/app/api/ntfs/route.ts b/src/app/api/ntfs/route.ts
deleted file mode 100644
index 3da554f4..00000000
--- a/src/app/api/ntfs/route.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Asset } from "unidata.js"
-
-import { IPFS_GATEWAY } from "~/lib/env"
-import { cacheGet, getRedis } from "~/lib/redis.server"
-import { NextServerResponse, getQuery } from "~/lib/server-helper"
-import { getNFTs } from "~/models/site.model"
-
-export async function GET(req: Request): Promise<Response> {
-  const query = getQuery(req)
-  const res = new NextServerResponse()
-  if (!query.address) {
-    return res.status(400).end()
-  }
-
-  const redis = await getRedis()
-  const redisKey = `nfts/${query.address}`
-
-  let cache
-  try {
-    cache = await redis?.get(redisKey)
-  } catch (error) {}
-  if (cache) {
-    return res.status(200).json(JSON.parse(cache))
-  } else {
-    const result = await getNFTs(query.address as string)
-    await Promise.all(
-      result.list.map(async (nft: Asset) => {
-        if (!nft.items?.[0].mime_type && nft.items?.[0]?.address) {
-          try {
-            new URL(nft.items[0].address)
-          } catch (error) {
-            return nft
-          }
-          try {
-            const mime_type = await cacheGet({
-              key: `nft-mimetype/${nft.items[0].address}`,
-              getValueFun: async () => {
-                const head = await fetch(
-                  `${nft.items![0].address!.replace(
-                    IPFS_GATEWAY,
-                    "https://gateway.ipfs.io/ipfs/",
-                  )}`,
-                  {
-                    method: "HEAD",
-                  },
-                )
-                return head.headers.get("content-type")
-              },
-            })
-            nft.items[0].mime_type = mime_type
-          } catch (error) {
-            console.warn(error)
-          }
-        }
-        return nft
-      }),
-    )
-    redis?.set(redisKey, JSON.stringify(result), "EX", 60 * 60 * 24)
-    return res.status(200).json({
-      list: [],
-    })
-  }
-}
diff --git a/src/app/site/[site]/nft/page.tsx b/src/app/site/[site]/nft/page.tsx
new file mode 100644
index 00000000..fc634dbe
--- /dev/null
+++ b/src/app/site/[site]/nft/page.tsx
@@ -0,0 +1,58 @@
+import Script from "next/script"
+import type { Asset } from "unidata.js"
+
+import { UniLink } from "~/components/ui/UniLink"
+import { UniMedia } from "~/components/ui/UniMedia"
+import { useTranslation } from "~/lib/i18n"
+import getQueryClient from "~/lib/query-client"
+import { fetchGetSite, getNFTs } from "~/queries/site.server"
+
+export default async function SiteNFTPage({
+  params,
+}: {
+  params: {
+    site: string
+  }
+}) {
+  const queryClient = getQueryClient()
+
+  const site = await fetchGetSite(params.site, queryClient)
+  const { t } = await useTranslation("common")
+
+  const nfts = await getNFTs(site?.owner)
+
+  return (
+    <>
+      <Script
+        type="module"
+        src="https://cdn.jsdelivr.net/npm/@google/model-viewer/dist/model-viewer.min.js"
+      ></Script>
+      <h2 className="text-xl font-bold page-title">NFT {t("Showcase")}</h2>
+      <div className="mt-8">
+        <div className="grid grid-cols-3 md:grid-cols-4 gap-10">
+          {nfts.list
+            ?.filter((nft: Asset) => nft.items?.[0]?.address)
+            .map((nft: Asset) => (
+              <UniLink
+                key={nft.metadata?.proof}
+                className="xlog-nft flex items-center flex-col"
+                href={nft.related_urls?.[nft.related_urls.length - 1]}
+                data-collection={nft.metadata?.collection_address}
+                data-network={nft.metadata?.network}
+                data-token-id={nft.metadata?.token_id}
+                data-name={nft.name}
+              >
+                <UniMedia
+                  src={nft.items?.[0]?.address || ""}
+                  mime_type={nft.items?.[0].mime_type}
+                />
+                <div className="text-xs mt-2 text-center font-medium">
+                  {nft.name}
+                </div>
+              </UniLink>
+            ))}
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/src/components/ui/UniMedia.tsx b/src/components/ui/UniMedia.tsx
index 041990e4..6e9c4e6b 100644
--- a/src/components/ui/UniMedia.tsx
+++ b/src/components/ui/UniMedia.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import React, { useState } from "react"
 
 import { Image } from "~/components/ui/Image"
diff --git a/src/queries/site.server.ts b/src/queries/site.server.ts
index c971ad51..9f2ec786 100644
--- a/src/queries/site.server.ts
+++ b/src/queries/site.server.ts
@@ -1,6 +1,9 @@
+import { Asset } from "unidata.js"
+
 import { QueryClient } from "@tanstack/react-query"
 
-import { cacheGet } from "~/lib/redis.server"
+import { IPFS_GATEWAY } from "~/lib/env"
+import { cacheGet, getRedis } from "~/lib/redis.server"
 import * as siteModel from "~/models/site.model"
 
 export const prefetchGetSite = async (
@@ -88,3 +91,52 @@ export const fetchGetComments = async (
     }) as Promise<ReturnType<typeof siteModel.getCommentsBySite>>
   })
 }
+
+export const getNFTs = async (address?: string) => {
+  const redis = await getRedis()
+  const redisKey = `nfts/${address}`
+
+  let cache
+  try {
+    cache = await redis?.get(redisKey)
+  } catch (error) {}
+  if (cache) {
+    return JSON.parse(cache)
+  } else {
+    const result = await siteModel.getNFTs(address as string)
+    await Promise.all(
+      result.list.map(async (nft: Asset) => {
+        if (!nft.items?.[0].mime_type && nft.items?.[0]?.address) {
+          try {
+            new URL(nft.items[0].address)
+          } catch (error) {
+            return nft
+          }
+          try {
+            const mime_type = await cacheGet({
+              key: `nft-mimetype/${nft.items[0].address}`,
+              getValueFun: async () => {
+                const head = await fetch(
+                  `${nft.items![0].address!.replace(
+                    IPFS_GATEWAY,
+                    "https://gateway.ipfs.io/ipfs/",
+                  )}`,
+                  {
+                    method: "HEAD",
+                  },
+                )
+                return head.headers.get("content-type")
+              },
+            })
+            nft.items[0].mime_type = mime_type
+          } catch (error) {
+            console.warn(error)
+          }
+        }
+        return nft
+      }),
+    )
+    redis?.set(redisKey, JSON.stringify(result), "EX", 60 * 60 * 24)
+    return result
+  }
+}
diff --git a/src/queries/site.ts b/src/queries/site.ts
index dc0df206..ab65f300 100644
--- a/src/queries/site.ts
+++ b/src/queries/site.ts
@@ -280,22 +280,6 @@ export function useRemoveOperator() {
   )
 }
 
-export const useGetNFTs = (address?: string) => {
-  return useQuery(["getNFTs", address], async () => {
-    if (!address) {
-      return null
-    }
-    return await (
-      await fetch(
-        "/api/nfts?" +
-          new URLSearchParams({
-            address,
-          } as any),
-      )
-    ).json()
-  })
-}
-
 export const useGetStat = (
   data: Partial<Parameters<typeof siteModel.getStat>[0]>,
 ) => {