From 913ea98d23799f5716ece819b1493b405187c70e Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Mon, 16 Jun 2025 17:56:26 +0000
Subject: [PATCH] [TOOL-4802] NFT Asset Page (#7332)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the handling of NFTs and contract components within the application, including updates to types, UI components, and functionality related to NFT collections and claims.

### Detailed summary
- Updated `NFTMetadata` type to include `slug`.
- Added `slug` property in various components.
- Introduced `supplyFormatter` for better NFT supply formatting.
- Changed contract type handling to `NFTCollection`.
- Enhanced `MinimalProject` type to include `slug`.
- Updated UI components for better user interaction.
- Improved pagination and NFT display logic.
- Added new utilities for NFT claim conditions and total counts.
- Refactored claim token UI to utilize new components and structures.
- Implemented responsive layouts for better mobile support.

> The following files were skipped due to too many changes: `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/nfts-grid.tsx`, `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop-ui.client.tsx`, `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/token-viewer/token-viewer.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced public NFT pages for ERC-721 and ERC-1155 contracts with responsive layouts, NFT grids, token viewer dialogs, and buy functionality.
  - Added components for token price display, supply claimed progress, and enhanced pagination controls.
  - Enabled NFT purchases from drops with dedicated UI and transaction handling for ERC-721 and ERC-1155 standards.
  - Added tabbed navigation for public NFT pages and improved media rendering with loading placeholders.
  - Introduced a responsive layout component for device-specific rendering and customizable wallet address focus behavior.
  - Added new components for buying NFTs and editions with form validation, pricing display, and transaction feedback.
  - Added a token price component with loading skeleton and strikethrough styling.
  - Added a supply claimed progress bar with detailed percentage display.
  - Introduced a token viewer dialog with dynamic data fetching and rich metadata display.
  - Added a paginated NFT grid with detailed claim condition info for ERC-1155 tokens.
  - Added buy NFT drop card components with server and client rendering support.
  - Added a custom media renderer component with loading state management.

- **Enhancements**
  - Improved contract and page header components with customizable styling options.
  - Expanded project and team data structures to include project slugs for better navigation.
  - Updated wallet address and pagination components with additional props for accessibility and styling.
  - Refined tracking of click and keyboard events for asset cards.
  - Simplified purchase UI code by delegating price and supply display to shared components.
  - Enhanced pagination to handle two-page scenarios with simplified controls.
  - Updated public page rendering logic to support multiple ERC standards with unified detection.
  - Improved purchase flows with analytics tracking and toast notifications.
  - Added support for special user pricing and dynamic claim condition fetching.

- **Bug Fixes**
  - Fixed conditional rendering and redirection logic for public NFT pages based on contract type and metadata presence.

- **Documentation**
  - Added Storybook stories for new UI components including supply claimed progress and NFT drop purchase flows.

- **Refactor**
  - Delegated price and supply display logic to shared components for consistency.
  - Updated types and props to support new features and improve maintainability.

- **Chores**
  - Broadened NFT metadata field types for improved compatibility with diverse data formats.
  - Added fallback for React experimental API to prevent errors in unsupported environments.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .changeset/red-cooks-juggle.md                |   5 +
 .../dashboard/src/@/components/Responsive.tsx |  25 +
 .../@/components/blocks/media-renderer.tsx    |  37 ++
 .../@/components/blocks/wallet-address.tsx    |   6 +-
 .../src/@/components/pagination-buttons.tsx   |  31 +-
 apps/dashboard/src/@/constants/server-envs.ts |   6 +-
 .../[contractAddress]/_utils/newPublicPage.ts |  30 +-
 .../nfts/[tokenId]/shared-nfts-token-page.tsx |  18 +
 .../nfts/shared-nfts-page.tsx                 |  13 +
 .../public-pages/_components/PageHeader.tsx   |  14 +-
 .../supply-claimed-progress.stories.tsx       |  46 ++
 .../_components/supply-claimed-progress.tsx   |  50 ++
 .../public-pages/_components/token-price.tsx  |  39 ++
 .../erc20/_components/ContractHeader.tsx      |   6 +-
 .../claim-tokens/claim-tokens-ui.stories.tsx  |   4 +-
 .../claim-tokens/claim-tokens-ui.tsx          | 169 +++----
 .../public-pages/erc20/erc20.tsx              |   4 +-
 .../public-pages/nft/client-utils.ts          | 157 +++++++
 .../public-pages/nft/format.ts                |   4 +
 .../public-pages/nft/nft-page-layout.tsx      |  42 ++
 .../public-pages/nft/nft-page.tsx             | 175 +++++++
 .../buy-edition-drop.client.tsx               | 351 ++++++++++++++
 .../buy-nft-drop/buy-nft-drop-card.client.tsx |  17 +
 .../buy-nft-drop/buy-nft-drop-card.server.tsx |  99 ++++
 .../buy-nft-drop/buy-nft-drop-ui.client.tsx   | 378 +++++++++++++++
 .../buy-nft-drop/buy-nft-drop-ui.stories.tsx  | 270 +++++++++++
 .../buy-nft-drop/buy-nft-drop.client.tsx      | 224 +++++++++
 .../public-pages/nft/overview/nfts-grid.tsx   | 363 +++++++++++++++
 .../public-pages/nft/overview/tabs.tsx        |  35 ++
 .../nft/token-viewer/token-viewer.tsx         | 431 ++++++++++++++++++
 .../public-pages/nft/utils.ts                 |  37 ++
 .../[contractAddress]/shared-layout.tsx       |   1 +
 .../shared-overview-page.tsx                  |  15 +
 .../components/uri-based-deploy.tsx           |   1 +
 .../[project_slug]/(sidebar)/assets/cards.tsx |  24 +-
 .../assets/create/nft/_common/tracking.ts     |   3 +-
 .../add-to-project-card.stories.tsx           |   1 +
 .../add-to-project-card.tsx                   |   2 +-
 .../contract-deploy-form/custom-contract.tsx  |  12 +-
 packages/thirdweb/src/utils/nft/parseNft.ts   |   4 +-
 40 files changed, 2995 insertions(+), 154 deletions(-)
 create mode 100644 .changeset/red-cooks-juggle.md
 create mode 100644 apps/dashboard/src/@/components/Responsive.tsx
 create mode 100644 apps/dashboard/src/@/components/blocks/media-renderer.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/supply-claimed-progress.stories.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/supply-claimed-progress.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/token-price.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/client-utils.ts
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/format.ts
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-edition-drop/buy-edition-drop.client.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop-card.client.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop-card.server.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop-ui.client.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop-ui.stories.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop.client.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/nfts-grid.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/tabs.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/token-viewer/token-viewer.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/utils.ts

diff --git a/.changeset/red-cooks-juggle.md b/.changeset/red-cooks-juggle.md
new file mode 100644
index 00000000000..061f3b9c6ba
--- /dev/null
+++ b/.changeset/red-cooks-juggle.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix `NFTMetadata` type
diff --git a/apps/dashboard/src/@/components/Responsive.tsx b/apps/dashboard/src/@/components/Responsive.tsx
new file mode 100644
index 00000000000..b5a6a88d198
--- /dev/null
+++ b/apps/dashboard/src/@/components/Responsive.tsx
@@ -0,0 +1,25 @@
+"use client";
+import { Suspense } from "react";
+import { ClientOnly } from "../../components/ClientOnly/ClientOnly";
+import { useIsMobile } from "../hooks/use-mobile";
+
+export function ResponsiveLayout(props: {
+  desktop: React.ReactNode;
+  mobile: React.ReactNode;
+  fallback: React.ReactNode;
+  debugMode?: boolean;
+}) {
+  const isMobile = useIsMobile();
+
+  if (props.debugMode) {
+    return props.fallback;
+  }
+
+  return (
+    <Suspense fallback={props.fallback}>
+      <ClientOnly ssr={props.fallback}>
+        {isMobile ? props.mobile : props.desktop}
+      </ClientOnly>
+    </Suspense>
+  );
+}
diff --git a/apps/dashboard/src/@/components/blocks/media-renderer.tsx b/apps/dashboard/src/@/components/blocks/media-renderer.tsx
new file mode 100644
index 00000000000..929a21ef416
--- /dev/null
+++ b/apps/dashboard/src/@/components/blocks/media-renderer.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { MediaRenderer, type MediaRendererProps } from "thirdweb/react";
+import { cn } from "../../lib/utils";
+import { Skeleton } from "../ui/skeleton";
+
+export function CustomMediaRenderer(props: MediaRendererProps) {
+  const [loadedSrc, setLoadedSrc] = useState<string | undefined>(undefined);
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (loadedSrc && loadedSrc !== props.src) {
+      setLoadedSrc(undefined);
+    }
+  }, [loadedSrc, props.src]);
+
+  return (
+    <div
+      className="relative"
+      onLoad={() => {
+        if (props.src) {
+          setLoadedSrc(props.src);
+        }
+      }}
+    >
+      {!loadedSrc && <Skeleton className="absolute inset-0" />}
+      <MediaRenderer
+        {...props}
+        className={cn(
+          props.className,
+          "[&>div]:!bg-accent [&_a]:!text-muted-foreground [&_a]:!no-underline [&_svg]:!size-6 [&_svg]:!text-muted-foreground relative z-10",
+        )}
+      />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/@/components/blocks/wallet-address.tsx b/apps/dashboard/src/@/components/blocks/wallet-address.tsx
index 5993b1a6845..848d647c340 100644
--- a/apps/dashboard/src/@/components/blocks/wallet-address.tsx
+++ b/apps/dashboard/src/@/components/blocks/wallet-address.tsx
@@ -24,6 +24,7 @@ export function WalletAddress(props: {
   className?: string;
   iconClassName?: string;
   client: ThirdwebClient;
+  preventOpenOnFocus?: boolean;
 }) {
   // default back to zero address if no address provided
   const address = useMemo(() => props.address || ZERO_ADDRESS, [props.address]);
@@ -64,7 +65,10 @@ export function WalletAddress(props: {
 
   return (
     <HoverCard>
-      <HoverCardTrigger asChild>
+      <HoverCardTrigger
+        asChild
+        tabIndex={props.preventOpenOnFocus ? -1 : undefined}
+      >
         <Button
           onClick={(e) => e.stopPropagation()}
           variant="link"
diff --git a/apps/dashboard/src/@/components/pagination-buttons.tsx b/apps/dashboard/src/@/components/pagination-buttons.tsx
index 0074d246fe2..1e3f6851758 100644
--- a/apps/dashboard/src/@/components/pagination-buttons.tsx
+++ b/apps/dashboard/src/@/components/pagination-buttons.tsx
@@ -19,6 +19,7 @@ export const PaginationButtons = (props: {
   activePage: number;
   totalPages: number;
   onPageClick: (page: number) => void;
+  className?: string;
 }) => {
   const { activePage, totalPages, onPageClick: setPage } = props;
   const [inputHasError, setInputHasError] = useState(false);
@@ -40,11 +41,37 @@ export const PaginationButtons = (props: {
     }
   }
 
+  // if only two pages, show "prev" and "next"
+  if (totalPages === 2) {
+    return (
+      <Pagination className={props.className}>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              disabled={activePage === 1}
+              onClick={() => {
+                setPage(activePage - 1);
+              }}
+            />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationNext
+              disabled={activePage === totalPages}
+              onClick={() => {
+                setPage(activePage + 1);
+              }}
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    );
+  }
+
   // just render all the page buttons directly
   if (totalPages <= 6) {
     const pages = [...Array(totalPages)].map((_, i) => i + 1);
     return (
-      <Pagination>
+      <Pagination className={props.className}>
         <PaginationContent>
           {pages.map((page) => (
             <PaginationItem key={page}>
@@ -64,7 +91,7 @@ export const PaginationButtons = (props: {
   }
 
   return (
-    <Pagination>
+    <Pagination className={props.className}>
       <PaginationContent>
         <PaginationItem>
           <PaginationPrevious
diff --git a/apps/dashboard/src/@/constants/server-envs.ts b/apps/dashboard/src/@/constants/server-envs.ts
index 06e4b309840..234c7b1c669 100644
--- a/apps/dashboard/src/@/constants/server-envs.ts
+++ b/apps/dashboard/src/@/constants/server-envs.ts
@@ -1,7 +1,11 @@
 import "server-only";
-import { experimental_taintUniqueValue } from "react";
+import { experimental_taintUniqueValue as _experimental_taintUniqueValue } from "react";
 import { isProd } from "./env-utils";
 
+// on storybook, experimental_taintUniqueValue is not available, because its not available in the react version we are using - its added by next.js
+const experimental_taintUniqueValue =
+  _experimental_taintUniqueValue || (() => {});
+
 // Make sure to taint the server only envs here with experimental_taintUniqueValue ONLY if they contain a UNIQUE sensitive value
 // if an env has a generic value that may appear naturally in client components - do not taint it
 
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/newPublicPage.ts b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/newPublicPage.ts
index a463ba6c491..830b9a10a9b 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/newPublicPage.ts
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/newPublicPage.ts
@@ -1,8 +1,10 @@
 import { resolveFunctionSelectors } from "lib/selectors";
 import type { ThirdwebContract } from "thirdweb";
-import { isERC20 } from "thirdweb/extensions/erc20";
+import { isGetNFTsSupported as ERC721_isGetNFTsSupported } from "thirdweb/extensions/erc721";
+import { isGetNFTsSupported as ERC1155_isGetNFTsSupported } from "thirdweb/extensions/erc1155";
+import { supportedERCs } from "./detectedFeatures/supportedERCs";
 
-export type NewPublicPageType = "erc20";
+export type NewPublicPageType = "erc20" | "erc1155" | "erc721";
 
 export async function shouldRenderNewPublicPage(
   contract: ThirdwebContract,
@@ -16,9 +18,29 @@ export async function shouldRenderNewPublicPage(
       return false;
     }
 
-    const isERC20Contract = isERC20(functionSelectors);
+    const _supportedERCs = supportedERCs(functionSelectors);
 
-    if (isERC20Contract) {
+    // ERC1155
+    if (
+      _supportedERCs.isERC1155 &&
+      ERC1155_isGetNFTsSupported(functionSelectors)
+    ) {
+      return {
+        type: "erc1155",
+      };
+    }
+
+    // ERC721
+    if (
+      _supportedERCs.isERC721 &&
+      ERC721_isGetNFTsSupported(functionSelectors)
+    ) {
+      return {
+        type: "erc721",
+      };
+    }
+
+    if (_supportedERCs.isERC20) {
       return {
         type: "erc20",
       };
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/shared-nfts-token-page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/shared-nfts-token-page.tsx
index 0ba384456e9..496ccf8e485 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/shared-nfts-token-page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/shared-nfts-token-page.tsx
@@ -5,6 +5,8 @@ import { redirectToContractLandingPage } from "../../../../../../team/[team_slug
 import { buildContractPagePath } from "../../_utils/contract-page-path";
 import { getContractPageParamsInfo } from "../../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../../_utils/getContractPageMetadata";
+import { shouldRenderNewPublicPage } from "../../_utils/newPublicPage";
+import { NFTPublicPage } from "../../public-pages/nft/nft-page";
 import { TokenIdPageClient } from "./TokenIdPage.client";
 import { TokenIdPage } from "./token-id";
 
@@ -40,6 +42,22 @@ export async function SharedNFTTokenPage(props: {
     );
   }
 
+  // public /nfts/[tokenId] page
+  if (!props.projectMeta) {
+    const meta = await shouldRenderNewPublicPage(info.serverContract);
+    if (meta && (meta.type === "erc721" || meta.type === "erc1155")) {
+      return (
+        <NFTPublicPage
+          serverContract={info.serverContract}
+          clientContract={info.clientContract}
+          chainMetadata={info.chainMetadata}
+          tokenId={props.tokenId}
+          type={meta.type}
+        />
+      );
+    }
+  }
+
   const { clientContract, serverContract, isLocalhostChain } = info;
   if (isLocalhostChain) {
     return (
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/shared-nfts-page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/shared-nfts-page.tsx
index dc9e167cdaf..3ee02bab62f 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/shared-nfts-page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/shared-nfts-page.tsx
@@ -3,6 +3,7 @@ import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]
 import { redirectToContractLandingPage } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/utils";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+import { shouldRenderNewPublicPage } from "../_utils/newPublicPage";
 import { ContractNFTPage } from "./ContractNFTPage";
 import { ContractNFTPageClient } from "./ContractNFTPage.client";
 
@@ -44,6 +45,18 @@ export async function SharedNFTPage(props: {
     });
   }
 
+  // public nft page doesn't have /nfts page
+  if (!props.projectMeta) {
+    const shouldHide = await shouldRenderNewPublicPage(info.serverContract);
+    if (shouldHide) {
+      redirectToContractLandingPage({
+        contractAddress: props.contractAddress,
+        chainIdOrSlug: props.chainIdOrSlug,
+        projectMeta: props.projectMeta,
+      });
+    }
+  }
+
   return (
     <ContractNFTPage
       contract={clientContract}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/PageHeader.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/PageHeader.tsx
index 9ab0b2c8073..576f55bfe3e 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/PageHeader.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/PageHeader.tsx
@@ -1,15 +1,23 @@
 import { ToggleThemeButton } from "@/components/color-mode-toggle";
+import { cn } from "@/lib/utils";
 import Link from "next/link";
 import { ThirdwebMiniLogo } from "../../../../../../components/ThirdwebMiniLogo";
 import { PublicPageConnectButton } from "./PublicPageConnectButton";
 
-export function PageHeader() {
+export function PageHeader(props: {
+  containerClassName?: string;
+}) {
   return (
     <div className="border-b border-dashed">
-      <header className="container flex max-w-8xl justify-between py-3">
+      <header
+        className={cn(
+          "container flex max-w-8xl justify-between py-3",
+          props.containerClassName,
+        )}
+      >
         <div className="flex items-center gap-4">
           <Link href="/team" className="flex items-center gap-2">
-            <ThirdwebMiniLogo className="h-6" />
+            <ThirdwebMiniLogo className="h-5" />
             <span className="hidden font-bold text-2xl tracking-tight lg:block">
               thirdweb
             </span>
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/supply-claimed-progress.stories.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/supply-claimed-progress.stories.tsx
new file mode 100644
index 00000000000..255c630cac0
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/supply-claimed-progress.stories.tsx
@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { maxUint256 } from "thirdweb/utils";
+import { BadgeContainer } from "../../../../../../../../stories/utils";
+import { SupplyClaimedProgress } from "./supply-claimed-progress";
+
+const meta = {
+  title: "Assets/NFT/SupplyClaimedProgress",
+  component: StoryVariants,
+} satisfies Meta<typeof StoryVariants>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Variants: Story = {
+  args: {},
+};
+
+function StoryVariants() {
+  return (
+    <div className="container max-w-md space-y-10 py-10">
+      <BadgeContainer label="10 / Unlimited Supply">
+        <SupplyClaimedProgress claimedSupply={10n} totalSupply={maxUint256} />
+      </BadgeContainer>
+
+      <BadgeContainer label="500/1000 Supply">
+        <SupplyClaimedProgress claimedSupply={500n} totalSupply={1000n} />
+      </BadgeContainer>
+
+      <BadgeContainer label="10/1M Supply">
+        <SupplyClaimedProgress claimedSupply={10n} totalSupply={1000000n} />
+      </BadgeContainer>
+
+      <BadgeContainer label="0/1M Supply">
+        <SupplyClaimedProgress claimedSupply={0n} totalSupply={1000000n} />
+      </BadgeContainer>
+
+      <BadgeContainer label="10/10 Supply">
+        <SupplyClaimedProgress claimedSupply={10n} totalSupply={10n} />
+      </BadgeContainer>
+
+      <BadgeContainer label="0 Supply - don't show anything">
+        <SupplyClaimedProgress claimedSupply={0n} totalSupply={0n} />
+      </BadgeContainer>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/supply-claimed-progress.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/supply-claimed-progress.tsx
new file mode 100644
index 00000000000..3fd1e3a672d
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/supply-claimed-progress.tsx
@@ -0,0 +1,50 @@
+import { Progress } from "@/components/ui/progress";
+import { InfinityIcon } from "lucide-react";
+import { maxUint256 } from "thirdweb/utils";
+import { supplyFormatter } from "../nft/format";
+
+export function SupplyClaimedProgress(props: {
+  claimedSupply: bigint;
+  totalSupply: bigint;
+}) {
+  // if total supply is unlimited
+  if (props.totalSupply === maxUint256) {
+    return (
+      <p className="flex items-center justify-between gap-2">
+        <span className="font-medium text-sm">Claimed Supply </span>
+        <span className="flex items-center gap-1 font-bold text-sm">
+          {supplyFormatter.format(props.claimedSupply)} /{" "}
+          <InfinityIcon className="size-4" aria-label="Unlimited" />
+        </span>
+      </p>
+    );
+  }
+
+  // if total supply is 0 - don't show anything
+  if (props.totalSupply === 0n) {
+    return null;
+  }
+
+  // multiply by 10k to have precision up to 2 decimal places in percentage value
+  const soldFractionTimes10KBigInt =
+    (props.claimedSupply * 10000n) / props.totalSupply;
+
+  const soldPercentage = Number(soldFractionTimes10KBigInt) / 100;
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <span className="font-medium text-sm">Supply Claimed</span>
+        <span className="font-bold text-sm">
+          {supplyFormatter.format(props.claimedSupply)} /{" "}
+          {supplyFormatter.format(props.totalSupply)}
+        </span>
+      </div>
+      <Progress value={soldPercentage} className="h-2.5" />
+      <p className="font-medium text-muted-foreground text-xs">
+        {soldPercentage === 0 && props.claimedSupply !== 0n && "~"}
+        {soldPercentage.toFixed(2)}% Sold
+      </p>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/token-price.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/token-price.tsx
new file mode 100644
index 00000000000..8925a8a74cc
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/token-price.tsx
@@ -0,0 +1,39 @@
+import { SkeletonContainer } from "@/components/ui/skeleton";
+
+export function TokenPrice(props: {
+  strikethrough: boolean;
+  data:
+    | {
+        priceInTokens: number;
+        symbol: string;
+      }
+    | undefined;
+}) {
+  return (
+    <SkeletonContainer
+      skeletonData={"0.00 ETH"}
+      loadedData={
+        props.data
+          ? props.data.priceInTokens === 0
+            ? "FREE"
+            : `${tokenPriceFormatter.format(props.data.priceInTokens)} ${props.data.symbol}`
+          : undefined
+      }
+      render={(v) => {
+        if (props.strikethrough) {
+          return (
+            <s className="font-medium text-muted-foreground text-sm line-through decoration-muted-foreground/50">
+              {v}
+            </s>
+          );
+        }
+        return <span className="font-medium text-foreground text-sm">{v}</span>;
+      }}
+    />
+  );
+}
+
+const tokenPriceFormatter = new Intl.NumberFormat("en-US", {
+  notation: "compact",
+  maximumFractionDigits: 10,
+});
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx
index 5695d16e74a..3eaf5c1a84a 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx
@@ -41,6 +41,7 @@ export function ContractHeaderUI(props: {
   chainMetadata: ChainMetadata;
   clientContract: ThirdwebContract;
   socialUrls: object;
+  imageClassName?: string;
 }) {
   const socialUrls = useMemo(() => {
     const socialUrlsValue: { name: string; href: string }[] = [];
@@ -67,7 +68,10 @@ export function ContractHeaderUI(props: {
     <div className="flex flex-col items-start gap-4 border-b border-dashed py-8 lg:flex-row lg:items-center">
       {props.image && (
         <Img
-          className="size-20 shrink-0 rounded-full border bg-muted"
+          className={cn(
+            "size-20 shrink-0 rounded-full border bg-muted",
+            props.imageClassName,
+          )}
           src={
             props.image
               ? resolveSchemeWithErrorHandler({
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.stories.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.stories.tsx
index e47510b6316..d4e7d3d3eed 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.stories.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.stories.tsx
@@ -3,7 +3,7 @@ import { storybookThirdwebClient } from "stories/utils";
 import { getContract } from "thirdweb";
 import { baseSepolia } from "thirdweb/chains";
 import { ThirdwebProvider } from "thirdweb/react";
-import { ClaimTokenCardUI } from "./claim-tokens-ui";
+import { TokenDropClaim } from "./claim-tokens-ui";
 
 const meta = {
   title: "ERC20/ClaimTokenCardUI",
@@ -59,7 +59,7 @@ const mockClaimCondition = {
 
 function Story() {
   return (
-    <ClaimTokenCardUI
+    <TokenDropClaim
       contract={mockContract}
       name="Example Token"
       symbol="EXP"
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx
index 52e18003b4c..309f80f002b 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx
@@ -3,8 +3,7 @@ import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
 import { DecimalInput } from "@/components/ui/decimal-input";
 import { Label } from "@/components/ui/label";
-import { Progress } from "@/components/ui/progress";
-import { SkeletonContainer } from "@/components/ui/skeleton";
+import { ToolTipLabel } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { TransactionButton } from "components/buttons/TransactionButton";
@@ -14,7 +13,6 @@ import {
   CircleAlertIcon,
   CircleIcon,
   ExternalLinkIcon,
-  InfinityIcon,
   XIcon,
 } from "lucide-react";
 import { useTheme } from "next-themes";
@@ -39,23 +37,19 @@ import {
   useActiveWallet,
   useSendTransaction,
 } from "thirdweb/react";
-import { getClaimParams, maxUint256 } from "thirdweb/utils";
+import { getClaimParams } from "thirdweb/utils";
 import { tryCatch } from "utils/try-catch";
-import { ToolTipLabel } from "../../../../../../../../../../@/components/ui/tooltip";
 import { getSDKTheme } from "../../../../../../../../components/sdk-component-theme";
 import { PublicPageConnectButton } from "../../../_components/PublicPageConnectButton";
+import { SupplyClaimedProgress } from "../../../_components/supply-claimed-progress";
+import { TokenPrice } from "../../../_components/token-price";
 import { getCurrencyMeta } from "../../_utils/getCurrencyMeta";
 
 type ActiveClaimCondition = Awaited<ReturnType<typeof getActiveClaimCondition>>;
 
 // TODO UI improvements - show how many tokens connected wallet can claim at max
 
-const compactNumberFormatter = new Intl.NumberFormat("en-US", {
-  notation: "compact",
-  maximumFractionDigits: 10,
-});
-
-export function ClaimTokenCardUI(props: {
+export function TokenDropClaim(props: {
   contract: ThirdwebContract;
   name: string;
   symbol: string | undefined;
@@ -345,10 +339,13 @@ export function ClaimTokenCardUI(props: {
 
           <div className="h-4" />
 
-          <SupplyRemaining
-            supplyClaimed={props.claimCondition.supplyClaimed}
-            maxClaimableSupply={props.claimCondition.maxClaimableSupply}
-            decimals={props.decimals}
+          <SupplyClaimedProgress
+            claimedSupply={BigInt(
+              toTokens(props.claimCondition.supplyClaimed, props.decimals),
+            )}
+            totalSupply={BigInt(
+              toTokens(props.claimCondition.maxClaimableSupply, props.decimals),
+            )}
           />
 
           <div className="h-4" />
@@ -366,10 +363,39 @@ export function ClaimTokenCardUI(props: {
               </span>
 
               <div className="flex flex-col items-end gap-1">
+                {/* public price */}
                 {isShowingCustomPrice && (
-                  <TokenPrice data={publicPrice} strikethrough={true} />
+                  <TokenPrice
+                    data={{
+                      symbol: publicPrice.symbol,
+                      priceInTokens: Number(
+                        toTokens(
+                          publicPrice.pricePerTokenWei,
+                          publicPrice.decimals,
+                        ),
+                      ),
+                    }}
+                    strikethrough={true}
+                  />
                 )}
-                <TokenPrice data={claimParamsData} strikethrough={false} />
+
+                {/* price shown to user */}
+                <TokenPrice
+                  data={
+                    claimParamsData
+                      ? {
+                          symbol: claimParamsData.symbol,
+                          priceInTokens: Number(
+                            toTokens(
+                              claimParamsData.pricePerTokenWei,
+                              claimParamsData.decimals,
+                            ),
+                          ),
+                        }
+                      : undefined
+                  }
+                  strikethrough={false}
+                />
               </div>
             </div>
 
@@ -383,25 +409,23 @@ export function ClaimTokenCardUI(props: {
             <div className="border-active-border border-t border-dashed pt-4">
               <div className="flex justify-between font-semibold text-sm">
                 <span>Total Price</span>
-                <SkeletonContainer
-                  skeletonData={"0.00 ETH"}
-                  loadedData={
+                <TokenPrice
+                  data={
                     claimParamsData
-                      ? claimParamsData.pricePerTokenWei === 0n
-                        ? "FREE"
-                        : `${
+                      ? {
+                          priceInTokens:
                             Number(
                               toTokens(
                                 claimParamsData.pricePerTokenWei,
                                 claimParamsData.decimals,
                               ),
-                            ) * Number(quantity)
-                          } ${claimParamsData.symbol}`
+                            ) * Number(quantity),
+                          symbol: claimParamsData.symbol,
+                        }
                       : undefined
                   }
-                  render={(v) => {
-                    return <span>{v}</span>;
-                  }}
+                  // don't strikethrough the total
+                  strikethrough={false}
                 />
               </div>
             </div>
@@ -451,95 +475,6 @@ export function ClaimTokenCardUI(props: {
   );
 }
 
-function TokenPrice(props: {
-  strikethrough: boolean;
-  data:
-    | {
-        pricePerTokenWei: bigint;
-        decimals: number;
-        symbol: string;
-      }
-    | undefined;
-}) {
-  return (
-    <SkeletonContainer
-      skeletonData={"0.00 ETH"}
-      loadedData={
-        props.data
-          ? props.data.pricePerTokenWei === 0n
-            ? "FREE"
-            : `${toTokens(
-                props.data.pricePerTokenWei,
-                props.data.decimals,
-              )} ${props.data.symbol}`
-          : undefined
-      }
-      render={(v) => {
-        if (props.strikethrough) {
-          return (
-            <s className="font-medium text-muted-foreground text-sm line-through decoration-muted-foreground/50">
-              {v}
-            </s>
-          );
-        }
-        return <span className="font-medium text-foreground text-sm">{v}</span>;
-      }}
-    />
-  );
-}
-
-function SupplyRemaining(props: {
-  supplyClaimed: bigint;
-  maxClaimableSupply: bigint;
-  decimals: number;
-}) {
-  const isMaxClaimableSupplyUnlimited = props.maxClaimableSupply === maxUint256;
-  const supplyClaimedTokenNumber = Number(
-    toTokens(props.supplyClaimed, props.decimals),
-  );
-
-  // if there is unlimited supply - show many are claimed
-  if (isMaxClaimableSupplyUnlimited) {
-    return (
-      <p className="flex items-center justify-between gap-2">
-        <span className="font-medium text-sm">Supply Claimed</span>
-        <span className="flex items-center gap-1 font-bold text-sm">
-          {compactNumberFormatter.format(supplyClaimedTokenNumber)} /{" "}
-          <InfinityIcon className="size-4" aria-label="Unlimited" />
-        </span>
-      </p>
-    );
-  }
-
-  const maxClaimableSupplyTokenNumber = Number(
-    toTokens(props.maxClaimableSupply, props.decimals),
-  );
-
-  const soldPercentage = isMaxClaimableSupplyUnlimited
-    ? 0
-    : (supplyClaimedTokenNumber / maxClaimableSupplyTokenNumber) * 100;
-
-  const supplyRemainingTokenNumber =
-    maxClaimableSupplyTokenNumber - supplyClaimedTokenNumber;
-
-  // else - show supply remaining
-  return (
-    <div className="space-y-2">
-      <div className="flex items-center justify-between">
-        <span className="font-medium text-sm">Supply Remaining</span>
-        <span className="font-bold text-sm">
-          {compactNumberFormatter.format(supplyRemainingTokenNumber)} /{" "}
-          {compactNumberFormatter.format(maxClaimableSupplyTokenNumber)}
-        </span>
-      </div>
-      <Progress value={soldPercentage} className="h-2.5" />
-      <p className="font-medium text-muted-foreground text-xs">
-        {soldPercentage.toFixed(1)}% Sold
-      </p>
-    </div>
-  );
-}
-
 type Status = "idle" | "pending" | "success" | "error";
 
 const statusToIcon: Record<Status, React.FC<{ className: string }>> = {
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
index dfb3b572fe6..cd0b39470cc 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
@@ -8,7 +8,7 @@ import { ContractHeaderUI } from "./_components/ContractHeader";
 import { BuyTokenEmbed } from "./_components/PayEmbedSection";
 import { TokenStats } from "./_components/PriceChart";
 import { RecentTransfers } from "./_components/RecentTransfers";
-import { ClaimTokenCardUI } from "./_components/claim-tokens/claim-tokens-ui";
+import { TokenDropClaim } from "./_components/claim-tokens/claim-tokens-ui";
 import { ContractAnalyticsOverview } from "./_components/contract-analytics/contract-analytics";
 import { getCurrencyMeta } from "./_utils/getCurrencyMeta";
 
@@ -149,7 +149,7 @@ function BuyEmbed(props: {
   }
 
   return (
-    <ClaimTokenCardUI
+    <TokenDropClaim
       contract={props.clientContract}
       decimals={props.tokenDecimals}
       name={props.tokenName}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/client-utils.ts b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/client-utils.ts
new file mode 100644
index 00000000000..1cdb36f5f8d
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/client-utils.ts
@@ -0,0 +1,157 @@
+import { useQuery } from "@tanstack/react-query";
+import type { ThirdwebContract } from "thirdweb";
+import type { ChainMetadata } from "thirdweb/chains";
+import { getActiveClaimCondition as ERC1155_getActiveClaimCondition } from "thirdweb/extensions/erc1155";
+import { useActiveAccount } from "thirdweb/react";
+import { getClaimParams } from "thirdweb/utils";
+import { getCurrencyMeta } from "../erc20/_utils/getCurrencyMeta";
+
+export const ASSET_PAGE_ERC1155_QUERIES_ROOT_KEY = "erc1155-asset-page-queries";
+
+export function useERC1155ClaimCondition(params: {
+  chainMetadata: ChainMetadata;
+  tokenId: bigint;
+  contract: ThirdwebContract;
+  enabled: boolean;
+}) {
+  const account = useActiveAccount();
+  const claimConditionQuery = useQuery({
+    queryKey: [
+      ASSET_PAGE_ERC1155_QUERIES_ROOT_KEY,
+      "ERC1155_getActiveClaimCondition",
+      {
+        contract: params.contract,
+        tokenId: params.tokenId.toString(),
+      },
+    ],
+    queryFn: async () => {
+      const activeClaimCondition = await ERC1155_getActiveClaimCondition({
+        contract: params.contract,
+        tokenId: params.tokenId,
+      });
+
+      if (!activeClaimCondition) {
+        return null;
+      }
+
+      const currencyMeta = await getCurrencyMeta({
+        chain: params.contract.chain,
+        chainMetadata: params.chainMetadata,
+        currencyAddress: activeClaimCondition.currency,
+        client: params.contract.client,
+      });
+
+      if (!currencyMeta) {
+        return null;
+      }
+
+      return {
+        ...activeClaimCondition,
+        symbol: currencyMeta.symbol,
+        decimals: currencyMeta.decimals,
+      };
+    },
+    enabled: params.enabled,
+  });
+
+  const publicPrice = claimConditionQuery.data
+    ? {
+        pricePerTokenWei: claimConditionQuery.data.pricePerToken,
+        currencyAddress: claimConditionQuery.data.currency,
+        decimals: claimConditionQuery.data.decimals,
+        symbol: claimConditionQuery.data.symbol,
+      }
+    : null;
+
+  const claimParamsQuery = useQuery({
+    queryKey: [
+      ASSET_PAGE_ERC1155_QUERIES_ROOT_KEY,
+      "ERC1155_getClaimParams",
+      {
+        contract: params.contract,
+        accountAddress: account?.address,
+        tokenId: params.tokenId.toString(),
+      },
+    ],
+    queryFn: async () => {
+      if (!account) {
+        return null;
+      }
+
+      const claimParams = await getClaimParams({
+        type: "erc1155",
+        tokenId: params.tokenId,
+        contract: params.contract,
+        quantity: BigInt(1),
+        to: account?.address,
+        from: account?.address,
+      });
+
+      const meta = await getCurrencyMeta({
+        currencyAddress: claimParams.currency,
+        chainMetadata: params.chainMetadata,
+        chain: params.contract.chain,
+        client: params.contract.client,
+      });
+
+      return {
+        pricePerTokenWei: claimParams.pricePerToken,
+        currencyAddress: claimParams.currency,
+        decimals: meta.decimals,
+        symbol: meta.symbol,
+      };
+    },
+    enabled: params.enabled,
+  });
+
+  const publicPriceData = claimConditionQuery.data
+    ? {
+        pricePerTokenWei: claimConditionQuery.data.pricePerToken,
+        currencyAddress: claimConditionQuery.data.currency,
+        decimals: claimConditionQuery.data.decimals,
+        symbol: claimConditionQuery.data.symbol,
+      }
+    : undefined;
+
+  const userSpecificPriceData = claimParamsQuery.data
+    ? {
+        pricePerTokenWei: claimParamsQuery.data.pricePerTokenWei,
+        currencyAddress: claimParamsQuery.data.currencyAddress,
+        decimals: claimParamsQuery.data.decimals,
+        symbol: claimParamsQuery.data.symbol,
+      }
+    : undefined;
+
+  const isUserPriceDifferent =
+    userSpecificPriceData &&
+    publicPrice &&
+    (publicPrice.pricePerTokenWei !== userSpecificPriceData.pricePerTokenWei ||
+      publicPrice.currencyAddress !== userSpecificPriceData.currencyAddress);
+
+  return {
+    claimCondition: {
+      data: claimConditionQuery.data
+        ? {
+            quantityLimitPerWallet:
+              claimConditionQuery.data?.quantityLimitPerWallet,
+            maxClaimableSupply: claimConditionQuery.data?.maxClaimableSupply,
+            supplyClaimed: claimConditionQuery.data?.supplyClaimed,
+          }
+        : undefined,
+      isPending: claimConditionQuery.isPending,
+    },
+    claimParamsQuery: {
+      data: claimParamsQuery.data || publicPrice,
+      isPending: claimParamsQuery.isPending,
+    },
+    publicPriceQuery: {
+      data: publicPriceData,
+      isPending: claimConditionQuery.isPending,
+    },
+    userPriceQuery: {
+      data: userSpecificPriceData || publicPriceData,
+      isPending: claimParamsQuery.isPending || claimConditionQuery.isPending,
+    },
+    isUserPriceDifferent,
+  };
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/format.ts b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/format.ts
new file mode 100644
index 00000000000..94597bdc6d0
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/format.ts
@@ -0,0 +1,4 @@
+export const supplyFormatter = new Intl.NumberFormat("en-US", {
+  notation: "compact",
+  maximumFractionDigits: 10,
+});
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx
new file mode 100644
index 00000000000..9bc49ccaa1f
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx
@@ -0,0 +1,42 @@
+import type { ThirdwebContract } from "thirdweb";
+import type { ChainMetadata } from "thirdweb/chains";
+import { PageHeader } from "../_components/PageHeader";
+import { ContractHeaderUI } from "../erc20/_components/ContractHeader";
+
+export function NFTPublicPageLayout(props: {
+  clientContract: ThirdwebContract;
+  chainMetadata: ChainMetadata;
+  contractMetadata: {
+    name: string;
+    symbol: string;
+    [key: string]: unknown;
+  };
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex grow flex-col">
+      <PageHeader containerClassName="max-w-8xl" />
+      <div className="container flex max-w-8xl grow flex-col">
+        <ContractHeaderUI
+          chainMetadata={props.chainMetadata}
+          imageClassName="rounded-lg"
+          clientContract={props.clientContract}
+          image={
+            typeof props.contractMetadata.image === "string"
+              ? props.contractMetadata.image
+              : undefined
+          }
+          name={props.contractMetadata.name}
+          symbol={props.contractMetadata.symbol}
+          socialUrls={
+            typeof props.contractMetadata.social_urls === "object" &&
+            props.contractMetadata.social_urls !== null
+              ? props.contractMetadata.social_urls
+              : {}
+          }
+        />
+        {props.children}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page.tsx
new file mode 100644
index 00000000000..896e9648a7b
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page.tsx
@@ -0,0 +1,175 @@
+import { ResponsiveLayout } from "@/components/Responsive";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import type { ThirdwebContract } from "thirdweb";
+import type { ChainMetadata } from "thirdweb/chains";
+import { getContractMetadata } from "thirdweb/extensions/common";
+import { isTokenByIndexSupported } from "thirdweb/extensions/erc721";
+import { resolveFunctionSelectors } from "../../../../../../../../lib/selectors";
+import { NFTPublicPageLayout } from "./nft-page-layout";
+import {
+  BuyNFTDropCardServer,
+  getNFTDropClaimParams,
+} from "./overview/buy-nft-drop/buy-nft-drop-card.server";
+import { NFTGridSkeleton, NFTsGrid } from "./overview/nfts-grid";
+import { NFTPublicPageTabs } from "./overview/tabs";
+import { PageLoadTokenViewerSheet } from "./token-viewer/token-viewer";
+import { getTotalNFTCount } from "./utils";
+
+export async function NFTPublicPage(props: {
+  serverContract: ThirdwebContract;
+  clientContract: ThirdwebContract;
+  chainMetadata: ChainMetadata;
+  type: "erc1155" | "erc721";
+  tokenId: string | undefined;
+}) {
+  const [contractMetadata, functionSelectors, totalNFTCount] =
+    await Promise.all([
+      getContractMetadata({
+        contract: props.serverContract,
+      }),
+      resolveFunctionSelectors(props.serverContract),
+      getTotalNFTCount({
+        type: props.type,
+        contract: props.serverContract,
+      }),
+    ]);
+
+  const nftDropClaimParams =
+    props.type === "erc721"
+      ? await getNFTDropClaimParams({
+          serverContract: props.serverContract,
+          chainMetadata: props.chainMetadata,
+          functionSelectors,
+          totalNFTCount,
+        })
+      : undefined;
+
+  const _isTokenByIndexSupported =
+    props.type === "erc721" && isTokenByIndexSupported(functionSelectors);
+
+  const buyNFTDropCard = nftDropClaimParams ? (
+    <BuyNFTDropCardServer
+      serverContract={props.serverContract}
+      chainMetadata={props.chainMetadata}
+      functionSelectors={functionSelectors}
+      totalNFTCount={totalNFTCount}
+      clientContract={props.clientContract}
+      erc721ActiveClaimCondition={nftDropClaimParams.erc721ActiveClaimCondition}
+      erc721ClaimConditionCurrencyMeta={
+        nftDropClaimParams.erc721ClaimConditionCurrencyMeta
+      }
+      erc721NextTokenIdToClaim={nftDropClaimParams.erc721NextTokenIdToClaim}
+      erc721TotalUnclaimedSupply={nftDropClaimParams.erc721TotalUnclaimedSupply}
+    />
+  ) : null;
+
+  const nftsGrid = (
+    <NFTsGrid
+      isTokenByIndexSupported={_isTokenByIndexSupported}
+      collectionMetadata={contractMetadata}
+      type={props.type}
+      clientContract={props.clientContract}
+      chainMetadata={props.chainMetadata}
+      totalNFTCount={totalNFTCount}
+      gridClassName={
+        buyNFTDropCard
+          ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+          : undefined
+      }
+    />
+  );
+
+  const nftGridSkeleton = (
+    <NFTGridSkeleton
+      clientContract={props.clientContract}
+      chainMetadata={props.chainMetadata}
+      type={props.type}
+      gridClassName={
+        buyNFTDropCard
+          ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+          : undefined
+      }
+    />
+  );
+
+  const buyEmbedSkeleton = buyNFTDropCard ? (
+    <Skeleton className="h-[620px] border" />
+  ) : null;
+
+  return (
+    <NFTPublicPageLayout
+      clientContract={props.clientContract}
+      chainMetadata={props.chainMetadata}
+      contractMetadata={contractMetadata}
+    >
+      <ResponsiveLayout
+        fallback={
+          <div className="flex grow flex-col">
+            <DesktopLayout
+              className="max-sm:hidden"
+              nftsGrid={nftGridSkeleton}
+              buyEmbed={buyEmbedSkeleton}
+            />
+
+            <MobileLayout
+              className="sm:hidden"
+              nftsGrid={nftGridSkeleton}
+              buyEmbed={buyEmbedSkeleton}
+            />
+          </div>
+        }
+        desktop={
+          <DesktopLayout nftsGrid={nftsGrid} buyEmbed={buyNFTDropCard} />
+        }
+        mobile={<MobileLayout nftsGrid={nftsGrid} buyEmbed={buyNFTDropCard} />}
+      />
+      {props.tokenId && (
+        <PageLoadTokenViewerSheet
+          clientContract={props.clientContract}
+          chainMetadata={props.chainMetadata}
+          type={props.type}
+          tokenId={BigInt(props.tokenId)}
+          tokenByIndexSupported={_isTokenByIndexSupported}
+          collectionMetadata={contractMetadata}
+        />
+      )}
+    </NFTPublicPageLayout>
+  );
+}
+
+function DesktopLayout(props: {
+  nftsGrid: React.ReactNode;
+  buyEmbed: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex grow gap-6 pt-6 pb-8", props.className)}>
+      <div className="flex flex-1 grow flex-col">{props.nftsGrid}</div>
+      {props.buyEmbed && (
+        <div className="w-[400px]">
+          <div className="-mt-6 sticky top-0 pt-6">{props.buyEmbed}</div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function MobileLayout(props: {
+  nftsGrid: React.ReactNode;
+  buyEmbed: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("pt-2 pb-10", props.className)}>
+      <NFTPublicPageTabs
+        nftsPage={<div className="pt-2">{props.nftsGrid}</div>}
+        buyPage={
+          props.buyEmbed ? (
+            <div className="pt-2">{props.buyEmbed}</div>
+          ) : undefined
+        }
+      />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-edition-drop/buy-edition-drop.client.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-edition-drop/buy-edition-drop.client.tsx
new file mode 100644
index 00000000000..19e3e7411b1
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-edition-drop/buy-edition-drop.client.tsx
@@ -0,0 +1,351 @@
+"use client";
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/skeleton";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useQueryClient } from "@tanstack/react-query";
+import { TransactionButton } from "components/buttons/TransactionButton";
+import { useTrack } from "hooks/analytics/useTrack";
+import { CircleAlertIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { type ThirdwebContract, toTokens } from "thirdweb";
+import type { ChainMetadata } from "thirdweb/chains";
+import { getApprovalForTransaction } from "thirdweb/extensions/erc20";
+import { claimTo } from "thirdweb/extensions/erc1155";
+import {
+  useActiveAccount,
+  useActiveWallet,
+  useSendAndConfirmTransaction,
+} from "thirdweb/react";
+import { parseError } from "utils/errorParser";
+import * as z from "zod";
+import { PublicPageConnectButton } from "../../../_components/PublicPageConnectButton";
+import { SupplyClaimedProgress } from "../../../_components/supply-claimed-progress";
+import { TokenPrice } from "../../../_components/token-price";
+import {
+  ASSET_PAGE_ERC1155_QUERIES_ROOT_KEY,
+  useERC1155ClaimCondition,
+} from "../../client-utils";
+
+const formSchema = z.object({
+  amount: z.coerce.number().int().gt(0),
+});
+
+type BuyEditionDropProps = {
+  contract: ThirdwebContract;
+  tokenId: bigint;
+  onSuccess?: () => void;
+  chainMetadata: ChainMetadata;
+};
+
+export function BuyEditionDrop(props: BuyEditionDropProps) {
+  const trackEvent = useTrack();
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      amount: 1,
+    },
+    reValidateMode: "onChange",
+  });
+  const nftAmountToClaim = Number(form.watch("amount"));
+  const sendAndConfirmTx = useSendAndConfirmTransaction();
+  const account = useActiveAccount();
+  const activeWallet = useActiveWallet();
+  const queryClient = useQueryClient();
+
+  const {
+    claimCondition,
+    userPriceQuery,
+    publicPriceQuery,
+    isUserPriceDifferent,
+  } = useERC1155ClaimCondition({
+    chainMetadata: props.chainMetadata,
+    tokenId: props.tokenId,
+    contract: props.contract,
+    enabled: true,
+  });
+
+  function trackAssetBuy(
+    params:
+      | {
+          type: "attempt" | "success";
+        }
+      | {
+          type: "error";
+          errorMessage: string;
+        },
+  ) {
+    trackEvent({
+      category: "asset",
+      action: "buy",
+      label: params.type,
+      contractType: "NFTCollection",
+      ercType: "erc1155",
+      accountAddress: account?.address,
+      walletId: activeWallet?.id,
+      chainId: props.contract.chain.id,
+      ...(params.type === "error"
+        ? {
+            errorMessage: params.errorMessage,
+          }
+        : {}),
+    });
+  }
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    try {
+      trackAssetBuy({
+        type: "attempt",
+      });
+
+      if (!account) {
+        return toast.error("No account detected");
+      }
+
+      const transaction = claimTo({
+        contract: props.contract,
+        to: account.address,
+        quantity: BigInt(data.amount),
+        from: account.address,
+        tokenId: props.tokenId,
+      });
+
+      const approveTx = await getApprovalForTransaction({
+        transaction,
+        account,
+      });
+
+      if (approveTx) {
+        const approveTxPromise = sendAndConfirmTx.mutateAsync(approveTx, {
+          onError: (error) => {
+            console.error(error);
+          },
+        });
+
+        toast.promise(approveTxPromise, {
+          loading: "Requesting approval to spend ERC20 tokens for NFT purchase",
+          success: "ERC20 token spending request approved successfully",
+          error: (err) => ({
+            message: "Approval to spend ERC20 tokens failed",
+            description: parseError(err),
+          }),
+        });
+
+        try {
+          await approveTxPromise;
+        } catch (err) {
+          const errorMessage = parseError(err);
+          trackAssetBuy({
+            type: "error",
+            errorMessage:
+              typeof errorMessage === "string" ? errorMessage : "Unknown error",
+          });
+          return;
+        }
+      }
+
+      const claimTxPromise = sendAndConfirmTx.mutateAsync(transaction);
+
+      const nftOrNfts = nftAmountToClaim > 1 ? "NFTs" : "NFT";
+
+      toast.promise(claimTxPromise, {
+        loading: `Buying ${nftAmountToClaim} ${nftOrNfts}`,
+        success: `${nftOrNfts} bought successfully`,
+        error: (err) => ({
+          message: `Failed to buy ${nftAmountToClaim} ${nftOrNfts}`,
+          description: parseError(err),
+        }),
+      });
+
+      try {
+        await claimTxPromise;
+
+        trackAssetBuy({
+          type: "success",
+        });
+
+        props.onSuccess?.();
+
+        queryClient.invalidateQueries({
+          queryKey: [ASSET_PAGE_ERC1155_QUERIES_ROOT_KEY],
+        });
+      } catch (err) {
+        const errorMessage = parseError(err);
+        trackAssetBuy({
+          type: "error",
+          errorMessage:
+            typeof errorMessage === "string" ? errorMessage : "Unknown error",
+        });
+        return;
+      }
+    } catch (err) {
+      const errorMessage = parseError(err);
+      toast.error("Failed to buy NFTs", {
+        description:
+          typeof errorMessage === "string" ? errorMessage : undefined,
+      });
+      trackAssetBuy({
+        type: "error",
+        errorMessage:
+          typeof errorMessage === "string" ? errorMessage : "Unknown error",
+      });
+    }
+  });
+
+  return (
+    <Form {...form}>
+      <form className="space-y-5" onSubmit={handleSubmit}>
+        <FormField
+          control={form.control}
+          name="amount"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Quantity</FormLabel>
+              <FormControl>
+                <Input
+                  autoComplete="off"
+                  type="text"
+                  {...field}
+                  onChange={(e) => {
+                    const num = Number(e.target.value);
+                    const value = Number.isNaN(num) ? 0 : num;
+                    form.setValue("amount", value);
+
+                    if (claimCondition.data) {
+                      const remainingSupply =
+                        claimCondition.data.maxClaimableSupply -
+                        claimCondition.data.supplyClaimed;
+                      if (value > remainingSupply) {
+                        form.setError("amount", {
+                          message: "Amount exceeds available supply",
+                        });
+                      } else {
+                        form.clearErrors("amount");
+                        form.trigger("amount");
+                      }
+                    }
+                  }}
+                  className="!text-2xl h-auto bg-muted/50 font-bold"
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {claimCondition.data ? (
+          <SupplyClaimedProgress
+            claimedSupply={claimCondition.data.supplyClaimed}
+            totalSupply={claimCondition.data.maxClaimableSupply}
+          />
+        ) : (
+          <Skeleton className="h-[62px] w-full" />
+        )}
+
+        <div className="flex flex-col gap-1.5 rounded-lg bg-muted/50 p-3">
+          <div className="flex items-start justify-between font-medium text-sm ">
+            <span className="flex items-center gap-2">
+              Price per NFT
+              {isUserPriceDifferent && (
+                <ToolTipLabel label="Your connected wallet address is added in the allowlist and is getting a special price">
+                  <CircleAlertIcon className="size-3.5 text-muted-foreground" />
+                </ToolTipLabel>
+              )}
+            </span>
+            <div className="flex gap-3">
+              {/* public price */}
+              {isUserPriceDifferent && (
+                <TokenPrice
+                  data={
+                    publicPriceQuery.data
+                      ? {
+                          priceInTokens: Number(
+                            toTokens(
+                              publicPriceQuery.data.pricePerTokenWei,
+                              publicPriceQuery.data.decimals,
+                            ),
+                          ),
+                          symbol: publicPriceQuery.data.symbol,
+                        }
+                      : undefined
+                  }
+                  strikethrough={true}
+                />
+              )}
+
+              {/* price shown to user */}
+              <TokenPrice
+                data={
+                  userPriceQuery.data
+                    ? {
+                        priceInTokens: Number(
+                          toTokens(
+                            userPriceQuery.data.pricePerTokenWei,
+                            userPriceQuery.data.decimals,
+                          ),
+                        ),
+                        symbol: userPriceQuery.data.symbol,
+                      }
+                    : undefined
+                }
+                strikethrough={false}
+              />
+            </div>
+          </div>
+
+          <div className="flex items-start justify-between font-medium text-sm ">
+            <span>Quantity</span>
+            <span className="font-medium">{nftAmountToClaim}</span>
+          </div>
+
+          <div className="mt-2 flex items-start justify-between border-t border-dashed pt-3 font-medium text-sm">
+            <span>Total Price</span>
+            <TokenPrice
+              data={
+                userPriceQuery.data
+                  ? {
+                      priceInTokens:
+                        Number(
+                          toTokens(
+                            userPriceQuery.data.pricePerTokenWei,
+                            userPriceQuery.data.decimals,
+                          ),
+                        ) * nftAmountToClaim,
+                      symbol: userPriceQuery.data.symbol,
+                    }
+                  : undefined
+              }
+              strikethrough={false}
+            />
+          </div>
+        </div>
+        {account ? (
+          <TransactionButton
+            client={props.contract.client}
+            isLoggedIn={true}
+            txChainID={props.contract.chain.id}
+            transactionCount={undefined}
+            isPending={form.formState.isSubmitting}
+            type="submit"
+            variant="default"
+            className="w-full"
+          >
+            Buy NFT{nftAmountToClaim > 1 ? "s" : ""}
+          </TransactionButton>
+        ) : (
+          <PublicPageConnectButton connectButtonClassName="!w-full" />
+        )}
+      </form>
+    </Form>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop-card.client.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop-card.client.tsx
new file mode 100644
index 00000000000..aade437ec00
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop-card.client.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { BuyNFTDrop, type BuyNFTDropProps } from "./buy-nft-drop.client";
+
+export function BuyNFTDropCardClient(
+  props: Omit<BuyNFTDropProps, "onSuccess">,
+) {
+  const router = useDashboardRouter();
+
+  return (
+    <div className="rounded-lg border bg-card p-4">
+      <h2 className="mb-3 font-semibold text-lg tracking-tight">Buy NFTs</h2>
+      <BuyNFTDrop {...props} onSuccess={() => router.refresh()} />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop-card.server.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop-card.server.tsx
new file mode 100644
index 00000000000..53bac0dbf15
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop-card.server.tsx
@@ -0,0 +1,99 @@
+import type { ThirdwebContract } from "thirdweb";
+import type { ChainMetadata } from "thirdweb/chains";
+import {
+  getActiveClaimCondition as ERC721_getActiveClaimCondition,
+  getTotalClaimedSupply as ERC721_getTotalClaimedSupply,
+  getTotalUnclaimedSupply as ERC721_getTotalUnclaimedSupply,
+  isClaimToSupported as ERC721_isClaimToSupported,
+} from "thirdweb/extensions/erc721";
+import { getCurrencyMeta } from "../../../erc20/_utils/getCurrencyMeta";
+import { BuyNFTDropCardClient } from "./buy-nft-drop-card.client";
+
+type ClaimCondition = Awaited<
+  ReturnType<typeof ERC721_getActiveClaimCondition>
+>;
+
+export async function BuyNFTDropCardServer(props: {
+  serverContract: ThirdwebContract;
+  chainMetadata: ChainMetadata;
+  functionSelectors: string[];
+  totalNFTCount: number;
+  clientContract: ThirdwebContract;
+  erc721ActiveClaimCondition: ClaimCondition;
+  erc721ClaimConditionCurrencyMeta: {
+    decimals: number;
+    symbol: string;
+  };
+  erc721NextTokenIdToClaim: bigint;
+  erc721TotalUnclaimedSupply: bigint;
+}) {
+  return (
+    <BuyNFTDropCardClient
+      contract={props.clientContract}
+      chainMetadata={props.chainMetadata}
+      claimCondition={{
+        ...props.erc721ActiveClaimCondition,
+        decimals: props.erc721ClaimConditionCurrencyMeta.decimals,
+        symbol: props.erc721ClaimConditionCurrencyMeta.symbol,
+      }}
+      totalNFTs={props.totalNFTCount}
+      nextTokenIdToClaim={props.erc721NextTokenIdToClaim}
+      totalUnclaimedSupply={props.erc721TotalUnclaimedSupply}
+    />
+  );
+}
+
+export async function getNFTDropClaimParams(params: {
+  serverContract: ThirdwebContract;
+  chainMetadata: ChainMetadata;
+  functionSelectors: string[];
+  totalNFTCount: number;
+}) {
+  const isERC721ClaimToSupported = ERC721_isClaimToSupported(
+    params.functionSelectors,
+  );
+
+  if (!isERC721ClaimToSupported) {
+    return null;
+  }
+
+  const [
+    erc721ActiveClaimCondition,
+    erc721TotalUnclaimedSupply,
+    erc721NextTokenIdToClaim,
+  ] = await Promise.all([
+    ERC721_getActiveClaimCondition({
+      contract: params.serverContract,
+    }).catch(() => undefined),
+    ERC721_getTotalUnclaimedSupply({
+      contract: params.serverContract,
+    }).catch(() => 0n),
+    ERC721_getTotalClaimedSupply({
+      contract: params.serverContract,
+    }).catch(() => 0n),
+  ]);
+
+  const hasUnclaimedSupply = erc721TotalUnclaimedSupply > 0n;
+
+  if (!hasUnclaimedSupply || !erc721ActiveClaimCondition) {
+    return null;
+  }
+
+  const erc721ClaimConditionCurrencyMeta = await getCurrencyMeta({
+    currencyAddress: erc721ActiveClaimCondition.currency,
+    chainMetadata: params.chainMetadata,
+    chain: params.serverContract.chain,
+    client: params.serverContract.client,
+  }).catch(() => undefined);
+
+  if (!erc721ClaimConditionCurrencyMeta) {
+    return null;
+  }
+
+  return {
+    erc721ActiveClaimCondition,
+    erc721ClaimConditionCurrencyMeta,
+    erc721NextTokenIdToClaim,
+    erc721TotalUnclaimedSupply,
+  };
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop-ui.client.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop-ui.client.tsx
new file mode 100644
index 00000000000..c13e44e0924
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop-ui.client.tsx
@@ -0,0 +1,378 @@
+"use client";
+
+import { CustomMediaRenderer } from "@/components/blocks/media-renderer";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/skeleton";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery } from "@tanstack/react-query";
+import { TransactionButton } from "components/buttons/TransactionButton";
+import { CircleAlertIcon } from "lucide-react";
+import { type UseFormReturn, useForm } from "react-hook-form";
+import { type ThirdwebContract, toTokens } from "thirdweb";
+import type { NFT, ThirdwebClient } from "thirdweb";
+import type { ChainMetadata } from "thirdweb/chains";
+import type { getActiveClaimCondition } from "thirdweb/extensions/erc721";
+import * as z from "zod";
+import { PublicPageConnectButton } from "../../../_components/PublicPageConnectButton";
+import { SupplyClaimedProgress } from "../../../_components/supply-claimed-progress";
+import { TokenPrice } from "../../../_components/token-price";
+import { supplyFormatter } from "../../format";
+import type {
+  GetNFTDropClaimParams,
+  GetNFTsToClaim,
+} from "./buy-nft-drop.client";
+
+type ActiveClaimCondition = Awaited<ReturnType<typeof getActiveClaimCondition>>;
+
+export const buyNFTDropFormSchema = z.object({
+  amount: z.coerce.number().int().gt(0),
+});
+
+export type BuyNFTDropForm = UseFormReturn<
+  z.infer<typeof buyNFTDropFormSchema>
+>;
+
+const NFT_ASSET_PAGE_ERC721_QUERIES_KEY_ROOT = "nft-asset-page-erc721-queries";
+
+export type BuyNFTDropUIProps = {
+  contract: ThirdwebContract;
+  chainMetadata: ChainMetadata;
+  claimCondition: ActiveClaimCondition & {
+    decimals: number;
+    symbol: string;
+  };
+  totalNFTs: number;
+  nextTokenIdToClaim: bigint;
+  totalUnclaimedSupply: bigint;
+  onSuccess?: () => void;
+  getNFTDropClaimParams: GetNFTDropClaimParams;
+  getNFTsToClaim: GetNFTsToClaim;
+  handleSubmit: (
+    form: UseFormReturn<z.infer<typeof buyNFTDropFormSchema>>,
+  ) => Promise<unknown>;
+  activeAccountAddress: string | undefined;
+};
+
+export function BuyNFTDropUI(props: BuyNFTDropUIProps) {
+  const form = useForm<z.infer<typeof buyNFTDropFormSchema>>({
+    resolver: zodResolver(buyNFTDropFormSchema),
+    defaultValues: {
+      amount: 1,
+    },
+    reValidateMode: "onChange",
+  });
+  const nftAmountToClaim = Number(form.watch("amount"));
+
+  const claimParamsQuery = useQuery({
+    queryKey: [
+      NFT_ASSET_PAGE_ERC721_QUERIES_KEY_ROOT,
+      "erc721-claimParamsQuery",
+      {
+        contract: props.contract,
+        accountAddress: props.activeAccountAddress,
+      },
+    ],
+    queryFn: async () => {
+      if (!props.activeAccountAddress) {
+        return publicPrice;
+      }
+
+      return props.getNFTDropClaimParams({
+        contract: props.contract,
+        chainMetadata: props.chainMetadata,
+        accountAddress: props.activeAccountAddress,
+      });
+    },
+  });
+
+  const publicPrice = {
+    pricePerTokenWei: props.claimCondition.pricePerToken,
+    currencyAddress: props.claimCondition.currency,
+    decimals: props.claimCondition.decimals,
+    symbol: props.claimCondition.symbol,
+    maxClaimableSupply: props.claimCondition.maxClaimableSupply,
+  };
+
+  const isAmountValid = !form.formState.errors.amount;
+
+  const nftsToClaimQuery = useQuery({
+    queryKey: [
+      NFT_ASSET_PAGE_ERC721_QUERIES_KEY_ROOT,
+      "erc721-nftsToClaimQuery",
+      {
+        contract: props.contract,
+        start: props.nextTokenIdToClaim.toString(),
+        count: nftAmountToClaim,
+      },
+    ],
+    enabled: isAmountValid,
+    queryFn: async () => {
+      return props.getNFTsToClaim({
+        contract: props.contract,
+        nextTokenIdToClaim: props.nextTokenIdToClaim,
+        count: nftAmountToClaim,
+      });
+    },
+  });
+
+  const isShowingCustomPrice =
+    claimParamsQuery.data &&
+    (claimParamsQuery.data.pricePerTokenWei !== publicPrice.pricePerTokenWei ||
+      claimParamsQuery.data.currencyAddress !== publicPrice.currencyAddress);
+
+  const maxNFTsToShow = 15;
+  const shouldTruncateNFTs = nftAmountToClaim > maxNFTsToShow;
+  const nftsToShow = shouldTruncateNFTs
+    ? nftsToClaimQuery.data?.slice(0, 14)
+    : nftsToClaimQuery.data;
+
+  return (
+    <Form {...form}>
+      <form
+        className="space-y-5"
+        onSubmit={form.handleSubmit(async () => {
+          await props.handleSubmit(form);
+        })}
+      >
+        <FormField
+          control={form.control}
+          name="amount"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Quantity</FormLabel>
+              <FormControl>
+                <Input
+                  autoComplete="off"
+                  type="text"
+                  {...field}
+                  onChange={(e) => {
+                    const num = Number(e.target.value);
+                    const value = Number.isNaN(num) ? 0 : num;
+                    form.setValue("amount", value);
+
+                    if (BigInt(value) > props.totalUnclaimedSupply) {
+                      form.setError("amount", {
+                        message: "Amount exceeds available supply",
+                      });
+                    } else {
+                      form.clearErrors("amount");
+                      form.trigger("amount");
+                    }
+                  }}
+                  className="!text-2xl h-auto bg-muted/50 font-bold"
+                />
+              </FormControl>
+              <FormDescription>
+                {supplyFormatter.format(props.totalUnclaimedSupply)} NFTs
+                available for purchase
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {isAmountValid && (
+          <div className="">
+            <h2 className="mb-1 font-medium text-sm">
+              NFT{nftAmountToClaim > 1 ? "s" : ""}
+            </h2>
+            <p className="mb-2 text-muted-foreground text-sm">
+              {nftAmountToClaim === 1
+                ? "You will receive this NFT"
+                : `You will receive these ${nftAmountToClaim} NFTs`}
+            </p>
+            <div
+              className={cn(
+                "grid grid-cols-5 gap-1.5",
+                nftAmountToClaim <= 3 && "grid-cols-3 gap-2",
+                nftAmountToClaim === 4 && "grid-cols-4 gap-2",
+              )}
+            >
+              {!nftsToClaimQuery.isPending &&
+                nftsToShow?.map((nft) => (
+                  <MiniNFTCard
+                    key={nft.id}
+                    data={nft}
+                    client={props.contract.client}
+                  />
+                ))}
+
+              {shouldTruncateNFTs && nftsToShow && (
+                <div className="flex items-center justify-center rounded-lg border bg-muted/50 text-sm">
+                  +{nftAmountToClaim - nftsToShow.length}
+                </div>
+              )}
+
+              {nftsToClaimQuery.isPending &&
+                nftAmountToClaim > 0 &&
+                Array.from({
+                  length: Math.min(nftAmountToClaim, maxNFTsToShow),
+                }).map((_, index) => (
+                  <MiniNFTCard
+                    // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                    key={index}
+                    data={undefined}
+                    client={props.contract.client}
+                  />
+                ))}
+            </div>
+          </div>
+        )}
+
+        <SupplyClaimedProgress
+          claimedSupply={BigInt(props.totalNFTs) - props.totalUnclaimedSupply}
+          totalSupply={BigInt(props.totalNFTs)}
+        />
+
+        <div className="flex flex-col gap-1.5 rounded-lg bg-muted/50 p-3">
+          <div className="flex items-start justify-between font-medium text-sm ">
+            <span className="flex items-center gap-2">
+              Price per NFT
+              {isShowingCustomPrice && (
+                <ToolTipLabel label="Your connected wallet address is added in the allowlist and is getting a special price">
+                  <CircleAlertIcon className="size-3.5 text-muted-foreground" />
+                </ToolTipLabel>
+              )}
+            </span>
+            <div className="flex flex-col items-end gap-1">
+              {/* public price */}
+              {isShowingCustomPrice && (
+                <TokenPrice
+                  data={{
+                    priceInTokens: Number(
+                      toTokens(
+                        publicPrice.pricePerTokenWei,
+                        publicPrice.decimals,
+                      ),
+                    ),
+                    symbol: publicPrice.symbol,
+                  }}
+                  strikethrough={true}
+                />
+              )}
+
+              {/* price shown to user */}
+              <TokenPrice
+                data={
+                  claimParamsQuery.data
+                    ? {
+                        priceInTokens: Number(
+                          toTokens(
+                            claimParamsQuery.data.pricePerTokenWei,
+                            claimParamsQuery.data.decimals,
+                          ),
+                        ),
+                        symbol: claimParamsQuery.data.symbol,
+                      }
+                    : undefined
+                }
+                strikethrough={false}
+              />
+            </div>
+          </div>
+
+          <div className="flex items-start justify-between font-medium text-sm ">
+            <span>Quantity</span>
+            <span className="font-medium">{nftAmountToClaim}</span>
+          </div>
+
+          <div className="mt-2 flex items-start justify-between border-t border-dashed pt-3 font-medium text-sm">
+            <span>Total Price</span>
+            <TokenPrice
+              data={
+                claimParamsQuery.data
+                  ? {
+                      priceInTokens:
+                        Number(
+                          toTokens(
+                            claimParamsQuery.data.pricePerTokenWei,
+                            claimParamsQuery.data.decimals,
+                          ),
+                        ) * nftAmountToClaim,
+                      symbol: claimParamsQuery.data.symbol,
+                    }
+                  : undefined
+              }
+              strikethrough={false}
+            />
+          </div>
+        </div>
+
+        {props.activeAccountAddress ? (
+          <TransactionButton
+            client={props.contract.client}
+            isLoggedIn={true}
+            txChainID={props.contract.chain.id}
+            transactionCount={undefined}
+            isPending={form.formState.isSubmitting}
+            type="submit"
+            variant="default"
+            className="w-full"
+          >
+            Buy NFT{nftAmountToClaim > 1 ? "s" : ""}
+          </TransactionButton>
+        ) : (
+          <PublicPageConnectButton connectButtonClassName="!w-full !py-2.5 !h-auto !text-sm" />
+        )}
+      </form>
+    </Form>
+  );
+}
+
+function MiniNFTCard(props: {
+  data: NFT | undefined;
+  client: ThirdwebClient;
+}) {
+  return (
+    <ToolTipLabel
+      label={
+        props.data ? (
+          <span className="flex flex-col">
+            <span className="mb-3 border-b pb-3 text-muted-foreground text-xs">
+              TOKEN #{props.data.id}
+            </span>
+            <div className="flex flex-col gap-1">
+              <span className="font-medium text-base text-foreground">
+                {props.data.metadata.name?.toString() || ""}
+              </span>
+              <span className="text-muted-foreground text-sm">
+                {props.data.metadata.description?.toString() || ""}
+              </span>
+            </div>
+          </span>
+        ) : undefined
+      }
+    >
+      <div className="group relative flex-col overflow-hidden rounded-lg border">
+        {/* image */}
+        <div className="relative aspect-square w-full overflow-hidden">
+          <Skeleton className="absolute inset-0" />
+          {props.data ? (
+            <CustomMediaRenderer
+              client={props.client}
+              src={
+                props.data.metadata.animation_url || props.data.metadata.image
+              }
+              alt={props.data.metadata.name?.toString() || ""}
+              poster={props.data.metadata.image}
+              className="aspect-square h-full w-full"
+            />
+          ) : (
+            <Skeleton className="aspect-square h-full w-full" />
+          )}
+        </div>
+      </div>
+    </ToolTipLabel>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop-ui.stories.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop-ui.stories.tsx
new file mode 100644
index 00000000000..bc5cc8b8f48
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop-ui.stories.tsx
@@ -0,0 +1,270 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { storybookLog, storybookThirdwebClient } from "stories/utils";
+import { NATIVE_TOKEN_ADDRESS, type NFT, getContract, toUnits } from "thirdweb";
+import { type ChainMetadata, baseSepolia } from "thirdweb/chains";
+import type { getActiveClaimCondition } from "thirdweb/extensions/erc721";
+import { ThirdwebProvider, useActiveAccount } from "thirdweb/react";
+import { PublicPageConnectButton } from "../../../_components/PublicPageConnectButton";
+import { BuyNFTDropUI, type BuyNFTDropUIProps } from "./buy-nft-drop-ui.client";
+
+const baseUSDC = {
+  address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
+  decimals: 6,
+  symbol: "USDC",
+};
+
+const meta = {
+  title: "Assets/NFT/BuyNFTDropUI",
+  component: Variant,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div>
+        <ThirdwebProvider>
+          <Story />
+        </ThirdwebProvider>
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Variant>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const PriceInNativeToken: Story = {
+  args: {
+    totalUnclaimedSupply: BigInt(50),
+    totalNFTs: 1000,
+  },
+};
+
+export const PriceInERC20: Story = {
+  args: {
+    totalUnclaimedSupply: BigInt(5),
+    totalNFTs: 10000,
+    claimCondition: {
+      ...getClaimConditionMock(),
+      currency: baseUSDC.address,
+      pricePerToken: toUnits("10", baseUSDC.decimals),
+      decimals: baseUSDC.decimals,
+      symbol: baseUSDC.symbol,
+    },
+    getNFTDropClaimParams: async (params) => {
+      const values = await getNFTDropClaimParamsMock(params);
+      return {
+        ...values,
+        pricePerTokenWei: toUnits("10", baseUSDC.decimals),
+        currencyAddress: baseUSDC.address,
+        decimals: baseUSDC.decimals,
+        symbol: baseUSDC.symbol,
+      };
+    },
+  },
+};
+
+export const UserGetsSpecialPrice: Story = {
+  args: {
+    totalUnclaimedSupply: BigInt(5),
+    totalNFTs: 10000,
+    getNFTDropClaimParams: async (params) => {
+      const values = await getNFTDropClaimParamsMock(params);
+      return {
+        ...values,
+        pricePerTokenWei: toUnits("0.1", 18),
+        currencyAddress: NATIVE_TOKEN_ADDRESS,
+        decimals: 18,
+        symbol: "ETH",
+      };
+    },
+    claimCondition: {
+      ...getClaimConditionMock(),
+      pricePerToken: toUnits("0.5", 18),
+    },
+  },
+};
+
+export const Pending: Story = {
+  args: {
+    totalUnclaimedSupply: BigInt(10000),
+    totalNFTs: 20000,
+    forcePending: true,
+  },
+};
+
+export const AllClaimed: Story = {
+  args: {
+    totalUnclaimedSupply: BigInt(0),
+    totalNFTs: 1000,
+  },
+};
+
+function Variant(props: {
+  totalUnclaimedSupply: bigint;
+  totalNFTs: number;
+  claimCondition?: ClaimCondition & {
+    decimals: number;
+    symbol: string;
+  };
+  forcePending?: boolean;
+  getNFTDropClaimParams?: BuyNFTDropUIProps["getNFTDropClaimParams"];
+  getNFTsToClaim?: BuyNFTDropUIProps["getNFTsToClaim"];
+}) {
+  const account = useActiveAccount();
+
+  return (
+    <div className="space-y-4">
+      <div className="container mt-5 max-w-md space-y-3 border border-dashed py-4">
+        <PublicPageConnectButton connectButtonClassName="!w-full" />
+      </div>
+
+      <div className="container max-w-md py-10">
+        <BuyNFTDropUI
+          activeAccountAddress={account?.address}
+          contract={mockContract}
+          chainMetadata={baseSepoliaChainMetadata}
+          claimCondition={props.claimCondition || getClaimConditionMock()}
+          totalNFTs={props.totalNFTs}
+          nextTokenIdToClaim={BigInt(5)}
+          totalUnclaimedSupply={props.totalUnclaimedSupply}
+          getNFTsToClaim={
+            props.getNFTsToClaim ||
+            (props.forcePending
+              ? async (values) => {
+                  await new Promise((resolve) =>
+                    setTimeout(resolve, 10000000000),
+                  );
+                  return getNFTsToClaimMock(values);
+                }
+              : getNFTsToClaimMock)
+          }
+          getNFTDropClaimParams={
+            props.getNFTDropClaimParams ||
+            (props.forcePending
+              ? async (values) => {
+                  await new Promise((resolve) =>
+                    setTimeout(resolve, 10000000000),
+                  );
+                  return getNFTDropClaimParamsMock(values);
+                }
+              : getNFTDropClaimParamsMock)
+          }
+          handleSubmit={async (form) => {
+            storybookLog(form.getValues());
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+const mockContract = getContract({
+  address: "0xc3e13Ecf3B6C2Aa0F2Eb5e898De02d704352Aa54",
+  chain: baseSepolia,
+  client: storybookThirdwebClient,
+});
+
+const baseSepoliaChainMetadata: ChainMetadata = {
+  chainId: 84532,
+  name: "Base Sepolia Testnet",
+  chain: "ETH",
+  shortName: "basesep",
+  icon: {
+    url: "ipfs://QmaxRoHpxZd8PqccAynherrMznMufG6sdmHZLihkECXmZv",
+    width: 1200,
+    height: 1200,
+    format: "png",
+  },
+  nativeCurrency: {
+    name: "Sepolia Ether",
+    symbol: "ETH",
+    decimals: 18,
+  },
+  stackType: "evm",
+  explorers: [
+    {
+      name: "basescout",
+      url: "https://base-sepolia.blockscout.com",
+      standard: "EIP3091",
+      icon: {
+        url: "ipfs://QmYtUimyqHkkFxYdbXXRbUqNg2VLPUg6Uu2C2nmFWowiZM",
+        width: 551,
+        height: 540,
+        format: "png",
+      },
+    },
+  ],
+  rpc: ["https://84532.rpc.thirdweb.com/${THIRDWEB_API_KEY}"],
+  testnet: true,
+  infoURL: "https://base.org",
+  slug: "base-sepolia-testnet",
+  networkId: 84532,
+};
+
+type ClaimCondition = Awaited<ReturnType<typeof getActiveClaimCondition>>;
+
+// 1.5 ETH in wei
+function getClaimConditionMock() {
+  const mockClaimCondition: ClaimCondition & {
+    decimals: number;
+    symbol: string;
+  } = {
+    startTimestamp: BigInt(Date.now()),
+    maxClaimableSupply: BigInt(100),
+    supplyClaimed: BigInt(0),
+    quantityLimitPerWallet: BigInt(10),
+    merkleRoot: "0x0",
+    pricePerToken: toUnits("1.5", 18), // 1.5 ETH in wei
+    currency: NATIVE_TOKEN_ADDRESS,
+    metadata: "",
+    decimals: 18,
+    symbol: "ETH",
+  };
+
+  return mockClaimCondition;
+}
+
+// 1.5 ETH in wei
+const getNFTDropClaimParamsMock: BuyNFTDropUIProps["getNFTDropClaimParams"] =
+  async () => {
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+    return {
+      pricePerTokenWei: toUnits("1.5", 18), // 1.5 ETH in wei
+      currencyAddress: NATIVE_TOKEN_ADDRESS,
+      decimals: 18,
+      symbol: "ETH",
+    };
+  };
+
+function getMockERC721NFT(id: bigint) {
+  const mockNFT: NFT = {
+    metadata: {
+      uri: "",
+      name: "Mock NFT",
+      description: "A mock NFT for storybook.",
+      image: `https://picsum.photos/200/200?random=${id}`,
+      animation_url: "",
+    },
+    owner: "0x1F846F6DAE38E1C88D71EAA191760B15f38B7A37",
+    id,
+    tokenURI: "...",
+    type: "ERC721",
+    tokenAddress: "0x0000000000000000000000000000000000000000",
+    chainId: baseSepolia.id,
+  };
+
+  return mockNFT;
+}
+
+const getNFTsToClaimMock: BuyNFTDropUIProps["getNFTsToClaim"] = async ({
+  count,
+  nextTokenIdToClaim,
+}) => {
+  await new Promise((resolve) => setTimeout(resolve, 2000));
+  return Array.from({ length: count }, (_, i) =>
+    getMockERC721NFT(nextTokenIdToClaim + BigInt(i)),
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop.client.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop.client.tsx
new file mode 100644
index 00000000000..febc4ae11fc
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop.client.tsx
@@ -0,0 +1,224 @@
+"use client";
+import { useTrack } from "hooks/analytics/useTrack";
+import { toast } from "sonner";
+import type { ThirdwebContract } from "thirdweb";
+import type { NFT } from "thirdweb";
+import type { ChainMetadata } from "thirdweb/chains";
+import { getApprovalForTransaction } from "thirdweb/extensions/erc20";
+import { claimTo, getNFT } from "thirdweb/extensions/erc721";
+import {
+  useActiveAccount,
+  useActiveWallet,
+  useSendAndConfirmTransaction,
+} from "thirdweb/react";
+import { getClaimParams } from "thirdweb/utils";
+import { parseError } from "utils/errorParser";
+import { getCurrencyMeta } from "../../../erc20/_utils/getCurrencyMeta";
+import {
+  type BuyNFTDropForm,
+  BuyNFTDropUI,
+  type BuyNFTDropUIProps,
+} from "./buy-nft-drop-ui.client";
+
+export type BuyNFTDropProps = Omit<
+  BuyNFTDropUIProps,
+  | "handleSubmit"
+  | "getNFTDropClaimParams"
+  | "getNFTsToClaim"
+  | "activeAccountAddress"
+>;
+
+export function BuyNFTDrop(props: BuyNFTDropProps) {
+  const trackEvent = useTrack();
+  const sendAndConfirmTx = useSendAndConfirmTransaction();
+  const account = useActiveAccount();
+  const activeWallet = useActiveWallet();
+
+  function trackAssetBuy(
+    params:
+      | {
+          type: "attempt" | "success";
+        }
+      | {
+          type: "error";
+          errorMessage: string;
+        },
+  ) {
+    trackEvent({
+      category: "asset",
+      action: "buy",
+      label: params.type,
+      contractType: "NFTCollection",
+      ercType: "erc721",
+      accountAddress: account?.address,
+      walletId: activeWallet?.id,
+      chainId: props.contract.chain.id,
+      ...(params.type === "error"
+        ? {
+            errorMessage: params.errorMessage,
+          }
+        : {}),
+    });
+  }
+
+  const handleSubmit = async (form: BuyNFTDropForm) => {
+    const nftAmountToClaim = form.getValues("amount");
+    try {
+      trackAssetBuy({
+        type: "attempt",
+      });
+
+      if (!account) {
+        return toast.error("No account detected");
+      }
+
+      const transaction = claimTo({
+        contract: props.contract,
+        to: account.address,
+        quantity: BigInt(nftAmountToClaim),
+        from: account.address,
+      });
+
+      const approveTx = await getApprovalForTransaction({
+        transaction,
+        account,
+      });
+
+      if (approveTx) {
+        const approveTxPromise = sendAndConfirmTx.mutateAsync(approveTx, {
+          onError: (error) => {
+            console.error(error);
+          },
+        });
+
+        toast.promise(approveTxPromise, {
+          loading: "Requesting approval to spend ERC20 tokens for NFT purchase",
+          success: "ERC20 token spending request approved successfully",
+          error: (err) => ({
+            message: "Approval to spend ERC20 tokens failed",
+            description: parseError(err),
+          }),
+        });
+
+        try {
+          await approveTxPromise;
+        } catch (err) {
+          const errorMessage = parseError(err);
+          trackAssetBuy({
+            type: "error",
+            errorMessage:
+              typeof errorMessage === "string" ? errorMessage : "Unknown error",
+          });
+          return;
+        }
+      }
+
+      const claimTxPromise = sendAndConfirmTx.mutateAsync(transaction);
+
+      const nftOrNfts = nftAmountToClaim > 1 ? "NFTs" : "NFT";
+
+      toast.promise(claimTxPromise, {
+        loading: `Buying ${nftAmountToClaim} ${nftOrNfts}`,
+        success: `${nftOrNfts} bought successfully`,
+        error: (err) => ({
+          message: `Failed to buy ${nftAmountToClaim} ${nftOrNfts}`,
+          description: parseError(err),
+        }),
+      });
+
+      try {
+        await claimTxPromise;
+
+        trackAssetBuy({
+          type: "success",
+        });
+
+        props.onSuccess?.();
+      } catch (err) {
+        const errorMessage = parseError(err);
+        trackAssetBuy({
+          type: "error",
+          errorMessage:
+            typeof errorMessage === "string" ? errorMessage : "Unknown error",
+        });
+        return;
+      }
+    } catch (err) {
+      const errorMessage = parseError(err);
+      toast.error("Failed to buy NFTs", {
+        description:
+          typeof errorMessage === "string" ? errorMessage : undefined,
+      });
+      trackAssetBuy({
+        type: "error",
+        errorMessage:
+          typeof errorMessage === "string" ? errorMessage : "Unknown error",
+      });
+    }
+  };
+
+  return (
+    <BuyNFTDropUI
+      contract={props.contract}
+      activeAccountAddress={account?.address}
+      chainMetadata={props.chainMetadata}
+      claimCondition={props.claimCondition}
+      totalNFTs={props.totalNFTs}
+      nextTokenIdToClaim={props.nextTokenIdToClaim}
+      totalUnclaimedSupply={props.totalUnclaimedSupply}
+      getNFTDropClaimParams={getNFTDropClaimParams}
+      getNFTsToClaim={getNFTsToClaim}
+      handleSubmit={handleSubmit}
+    />
+  );
+}
+
+async function getNFTDropClaimParams(params: {
+  contract: ThirdwebContract;
+  chainMetadata: ChainMetadata;
+  accountAddress: string;
+}) {
+  const claimParams = await getClaimParams({
+    type: "erc721",
+    contract: params.contract,
+    quantity: BigInt(1),
+    to: params.accountAddress,
+    from: params.accountAddress,
+  });
+
+  const meta = await getCurrencyMeta({
+    currencyAddress: claimParams.currency,
+    chainMetadata: params.chainMetadata,
+    chain: params.contract.chain,
+    client: params.contract.client,
+  });
+
+  return {
+    pricePerTokenWei: claimParams.pricePerToken,
+    currencyAddress: claimParams.currency,
+    decimals: meta.decimals,
+    symbol: meta.symbol,
+  };
+}
+
+async function getNFTsToClaim(params: {
+  contract: ThirdwebContract;
+  nextTokenIdToClaim: bigint;
+  count: number;
+}) {
+  const nftPromises: Promise<NFT>[] = [];
+  for (let i = 0; i < params.count; i++) {
+    const nftPromise = getNFT({
+      contract: params.contract,
+      tokenId: params.nextTokenIdToClaim + BigInt(i),
+      includeOwner: true,
+      tokenByIndex: true,
+    });
+    nftPromises.push(nftPromise);
+  }
+
+  return Promise.all(nftPromises);
+}
+
+export type GetNFTDropClaimParams = typeof getNFTDropClaimParams;
+export type GetNFTsToClaim = typeof getNFTsToClaim;
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/nfts-grid.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/nfts-grid.tsx
new file mode 100644
index 00000000000..71110679097
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/nfts-grid.tsx
@@ -0,0 +1,363 @@
+"use client";
+
+import { CustomMediaRenderer } from "@/components/blocks/media-renderer";
+import { PaginationButtons } from "@/components/pagination-buttons";
+import { Skeleton, SkeletonContainer } from "@/components/ui/skeleton";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { CheckCheckIcon } from "lucide-react";
+import { useState } from "react";
+import { type NFT, type ThirdwebContract, toTokens } from "thirdweb";
+import type { ChainMetadata } from "thirdweb/chains";
+import * as ERC721Ext from "thirdweb/extensions/erc721";
+import * as ERC1155Ext from "thirdweb/extensions/erc1155";
+import { useReadContract } from "thirdweb/react";
+import { maxUint256 } from "thirdweb/utils";
+import { TokenPrice } from "../../_components/token-price";
+import { useERC1155ClaimCondition } from "../client-utils";
+import { supplyFormatter } from "../format";
+import { TokenViewerSheet } from "../token-viewer/token-viewer";
+
+const pageSize = 48;
+
+export function NFTsGrid(props: {
+  isTokenByIndexSupported: boolean;
+  type: "erc1155" | "erc721";
+  clientContract: ThirdwebContract;
+  gridClassName?: string;
+  chainMetadata: ChainMetadata;
+  totalNFTCount: number;
+  collectionMetadata: {
+    name: string;
+  };
+}) {
+  const [page, setPage] = useState(1);
+  const start = (page - 1) * pageSize;
+  const [viewToken, setViewToken] = useState<
+    | {
+        nft: NFT;
+        open: boolean;
+      }
+    | undefined
+  >(undefined);
+
+  const nftsQuery = useReadContract(
+    props.type === "erc1155" ? ERC1155Ext.getNFTs : ERC721Ext.getNFTs,
+    {
+      contract: props.clientContract,
+      start,
+      count: pageSize,
+      includeOwners: true,
+      tokenByIndex: props.isTokenByIndexSupported,
+    },
+  );
+
+  const totalPages = Math.ceil(Number(props.totalNFTCount) / pageSize);
+
+  const showPagination = totalPages > 1;
+  const contractLayoutPath = `/${props.chainMetadata.slug}/${props.clientContract.address}`;
+
+  function handleNFTCardClick(nft: NFT) {
+    setViewToken({
+      nft,
+      open: true,
+    });
+    window.history.replaceState(
+      {},
+      "",
+      `${contractLayoutPath}/nfts/${nft.id.toString()}`,
+    );
+  }
+
+  const showGrid =
+    nftsQuery.isPending || (nftsQuery.data && nftsQuery.data.length > 0);
+
+  return (
+    <div className="flex grow flex-col">
+      {viewToken && (
+        <TokenViewerSheet
+          variant="view-data"
+          clientContract={props.clientContract}
+          chainMetadata={props.chainMetadata}
+          type={props.type}
+          nft={viewToken.nft}
+          tokenByIndexSupported={props.isTokenByIndexSupported}
+          open={viewToken.open}
+          collectionMetadata={props.collectionMetadata}
+          onClose={() => {
+            window.history.replaceState({}, "", `${contractLayoutPath}`);
+            setViewToken({
+              nft: viewToken.nft,
+              open: false,
+            });
+          }}
+        />
+      )}
+
+      {!nftsQuery.isPending && nftsQuery.data?.length === 0 && (
+        <div className="flex grow flex-col items-center justify-center rounded-lg border border-dashed py-20">
+          <p className="text-muted-foreground text-sm">No NFTs </p>
+        </div>
+      )}
+
+      {showGrid && (
+        <NFTGridContainer gridClassName={props.gridClassName}>
+          {!nftsQuery.isPending &&
+            nftsQuery.data?.map((nft) => (
+              <NFTCard
+                key={nft.id}
+                data={nft}
+                tokenId={nft.id}
+                clientContract={props.clientContract}
+                contractLayoutPath={contractLayoutPath}
+                onClick={() => handleNFTCardClick(nft)}
+                type={props.type}
+                chainMetadata={props.chainMetadata}
+              />
+            ))}
+
+          {nftsQuery.isPending &&
+            Array.from({ length: pageSize }).map((_, idx) => (
+              <NFTCard
+                // biome-ignore lint/suspicious/noArrayIndexKey: idx is not relevant
+                key={idx}
+                tokenId={0n}
+                data={undefined}
+                contractLayoutPath={contractLayoutPath}
+                clientContract={props.clientContract}
+                type={props.type}
+                chainMetadata={props.chainMetadata}
+              />
+            ))}
+        </NFTGridContainer>
+      )}
+
+      {showPagination && (
+        <div className="pt-6">
+          <div className="flex justify-start">
+            <PaginationButtons
+              activePage={page}
+              totalPages={totalPages}
+              onPageClick={setPage}
+              className="mx-0 w-auto"
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function NFTGridContainer(props: {
+  children: React.ReactNode;
+  gridClassName?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
+        props.gridClassName,
+      )}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+export function NFTGridSkeleton(props: {
+  clientContract: ThirdwebContract;
+  gridClassName?: string;
+  chainMetadata: ChainMetadata;
+  type: "erc1155" | "erc721";
+}) {
+  return (
+    <NFTGridContainer gridClassName={props.gridClassName}>
+      {Array.from({ length: pageSize }).map((_, idx) => (
+        <NFTCard
+          // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+          key={idx}
+          data={undefined}
+          contractLayoutPath={""}
+          type={props.type}
+          chainMetadata={props.chainMetadata}
+          clientContract={props.clientContract}
+          tokenId={0n}
+        />
+      ))}
+    </NFTGridContainer>
+  );
+}
+
+function NFTCard(props: {
+  data: NFT | undefined;
+  tokenId: bigint;
+  contractLayoutPath: string;
+  onClick?: () => void;
+  type: "erc1155" | "erc721";
+  chainMetadata: ChainMetadata;
+  clientContract: ThirdwebContract;
+}) {
+  return (
+    <div
+      role="button"
+      tabIndex={props.onClick ? 0 : undefined}
+      onKeyDown={
+        props.onClick
+          ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                props.onClick?.();
+              }
+            }
+          : undefined
+      }
+      onClick={props.onClick}
+      className="group hover:-translate-y-0.5 relative flex h-full cursor-pointer flex-col overflow-hidden rounded-lg border bg-card duration-200 hover:scale-[1.01] hover:border-active-border"
+    >
+      {/* image */}
+      <div className="relative aspect-square w-full overflow-hidden">
+        {props.data ? (
+          <CustomMediaRenderer
+            client={props.clientContract.client}
+            src={props.data.metadata.animation_url || props.data.metadata.image}
+            alt={props.data.metadata.name?.toString() || ""}
+            poster={props.data.metadata.image}
+            className="aspect-square h-full w-full"
+          />
+        ) : (
+          <Skeleton className="aspect-square h-full w-full" />
+        )}
+      </div>
+
+      <div className="space-y-1 border-t p-3">
+        {/* title */}
+        {props.data ? (
+          <h2 className="font-semibold">{props.data.metadata.name}</h2>
+        ) : (
+          <Skeleton className="h-5 w-1/2" />
+        )}
+
+        {/* description  */}
+        {props.type === "erc721" && (
+          <>
+            {props.data && props.data.type === "ERC721" ? (
+              props.data.metadata.description ? (
+                <p className="line-clamp-3 text-muted-foreground text-xs">
+                  {props.data.metadata.description}
+                </p>
+              ) : null
+            ) : (
+              <Skeleton className="h-[60px]" />
+            )}{" "}
+          </>
+        )}
+
+        {props.type === "erc1155" && (
+          <RenderClaimConditionInfo
+            tokenId={props.tokenId}
+            chainMetadata={props.chainMetadata}
+            contract={props.clientContract}
+            isSkeleton={!props.data}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function RenderClaimConditionInfo(props: {
+  chainMetadata: ChainMetadata;
+  tokenId: bigint;
+  contract: ThirdwebContract;
+  isSkeleton: boolean;
+}) {
+  const {
+    isUserPriceDifferent,
+    publicPriceQuery,
+    userPriceQuery,
+    claimCondition,
+  } = useERC1155ClaimCondition({
+    chainMetadata: props.chainMetadata,
+    tokenId: props.tokenId,
+    contract: props.contract,
+    enabled: !props.isSkeleton,
+  });
+
+  return (
+    <div className="flex flex-col items-start gap-0.5">
+      <div className="flex items-center gap-1.5">
+        {/* public price */}
+        {isUserPriceDifferent && (
+          <ToolTipLabel label="Your connected wallet address is added in the allowlist and is getting a special price">
+            <TokenPrice
+              data={
+                publicPriceQuery.data
+                  ? {
+                      priceInTokens: Number(
+                        toTokens(
+                          publicPriceQuery.data.pricePerTokenWei,
+                          publicPriceQuery.data.decimals,
+                        ),
+                      ),
+                      symbol: publicPriceQuery.data.symbol,
+                    }
+                  : undefined
+              }
+              strikethrough={true}
+            />
+          </ToolTipLabel>
+        )}
+
+        {/* price shown to user */}
+        <TokenPrice
+          data={
+            userPriceQuery.data
+              ? {
+                  priceInTokens: Number(
+                    toTokens(
+                      userPriceQuery.data.pricePerTokenWei,
+                      userPriceQuery.data.decimals,
+                    ),
+                  ),
+                  symbol: userPriceQuery.data.symbol,
+                }
+              : undefined
+          }
+          strikethrough={false}
+        />
+      </div>
+
+      <SkeletonContainer
+        loadedData={
+          claimCondition.data
+            ? {
+                maxClaimableSupply: claimCondition.data?.maxClaimableSupply,
+                supplyClaimed: claimCondition.data?.supplyClaimed,
+              }
+            : undefined
+        }
+        skeletonData={{
+          maxClaimableSupply: 100n,
+          supplyClaimed: 10n,
+        }}
+        render={(value) => {
+          const isFullyClaimed =
+            value.supplyClaimed === value.maxClaimableSupply;
+          return (
+            <div className="flex items-center gap-1.5">
+              <p className="font-medium text-muted-foreground text-xs">
+                {supplyFormatter.format(value.supplyClaimed)} /{" "}
+                {value.maxClaimableSupply === maxUint256
+                  ? "Unlimited"
+                  : supplyFormatter.format(value.maxClaimableSupply)}{" "}
+                bought
+              </p>
+              {isFullyClaimed && (
+                <CheckCheckIcon className="size-4 text-muted-foreground" />
+              )}
+            </div>
+          );
+        }}
+      />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/tabs.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/tabs.tsx
new file mode 100644
index 00000000000..ab4346ddb75
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/tabs.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { TabButtons } from "@/components/ui/tabs";
+import { useState } from "react";
+
+export function NFTPublicPageTabs(props: {
+  nftsPage: React.ReactNode;
+  buyPage: React.ReactNode;
+}) {
+  const [tab, setTab] = useState<"nfts" | "buy">("nfts");
+
+  return (
+    <div className="space-y-2">
+      {props.buyPage && (
+        <TabButtons
+          tabs={[
+            {
+              name: "NFTs",
+              onClick: () => setTab("nfts"),
+              isActive: tab === "nfts",
+            },
+            {
+              name: "Buy NFTs",
+              onClick: () => setTab("buy"),
+              isActive: tab === "buy",
+            },
+          ]}
+        />
+      )}
+
+      {tab === "nfts" && props.nftsPage}
+      {tab === "buy" && props.buyPage}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/token-viewer/token-viewer.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/token-viewer/token-viewer.tsx
new file mode 100644
index 00000000000..d07cb636ef6
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/token-viewer/token-viewer.tsx
@@ -0,0 +1,431 @@
+"use client";
+
+import { Img } from "@/components/blocks/Img";
+import { CustomMediaRenderer } from "@/components/blocks/media-renderer";
+import { WalletAddress } from "@/components/blocks/wallet-address";
+import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Skeleton, SkeletonContainer } from "@/components/ui/skeleton";
+import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
+import {
+  BoxIcon,
+  CircleSlashIcon,
+  ShoppingCartIcon,
+  SparkleIcon,
+  WalletIcon,
+  XIcon,
+} from "lucide-react";
+import { useState } from "react";
+import type { NFT, ThirdwebContract } from "thirdweb";
+import type { ChainMetadata } from "thirdweb/chains";
+import { getNFT as ERC721_getNFT } from "thirdweb/extensions/erc721";
+import { getNFT as ERC1155_getNFT } from "thirdweb/extensions/erc1155";
+import { useReadContract } from "thirdweb/react";
+import { useERC1155ClaimCondition } from "../client-utils";
+import { BuyEditionDrop } from "../overview/buy-edition-drop/buy-edition-drop.client";
+
+export function TokenViewerSheet(
+  props: {
+    clientContract: ThirdwebContract;
+    chainMetadata: ChainMetadata;
+    collectionMetadata: {
+      name: string;
+      image?: string;
+    };
+    type: "erc1155" | "erc721";
+    open: boolean;
+    tokenByIndexSupported: boolean;
+    onClose: () => void;
+  } & (
+    | {
+        variant: "view-data";
+        nft: NFT;
+      }
+    | {
+        variant: "fetch-data";
+        tokenId: bigint;
+      }
+  ),
+) {
+  const tokenId = props.variant === "fetch-data" ? props.tokenId : props.nft.id;
+
+  return (
+    <Dialog
+      open={props.open}
+      onOpenChange={(open) => {
+        if (!open) {
+          props.onClose();
+        }
+      }}
+    >
+      <DialogContent
+        className="lg:!max-w-6xl !rounded-xl flex flex-col gap-0 p-0 max-sm:max-h-[calc(100dvh-60px)] max-sm:overflow-y-auto"
+        dialogCloseClassName="bg-background p-2 opacity-100 rounded-full right-6 top-6 border focus:ring-0 lg:top-4 lg:right-4 "
+      >
+        <DialogHeader className="p-0">
+          <DialogTitle className="sr-only">Token #{tokenId}</DialogTitle>
+        </DialogHeader>
+
+        {props.variant === "fetch-data" ? (
+          <FetchAndRenderTokenInfo
+            clientContract={props.clientContract}
+            chainMetadata={props.chainMetadata}
+            type={props.type}
+            tokenId={props.tokenId}
+            tokenByIndexSupported={props.tokenByIndexSupported}
+            collectionMetadata={props.collectionMetadata}
+          />
+        ) : (
+          <TokenInfoUI
+            data={props.nft}
+            contract={props.clientContract}
+            type={props.type}
+            tokenId={tokenId}
+            chainMetadata={props.chainMetadata}
+            collectionMetadata={props.collectionMetadata}
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function FetchAndRenderTokenInfo(props: {
+  clientContract: ThirdwebContract;
+  chainMetadata: ChainMetadata;
+  type: "erc1155" | "erc721";
+  tokenId: bigint;
+  tokenByIndexSupported: boolean;
+  collectionMetadata: {
+    name: string;
+  };
+}) {
+  const nftQuery = useReadContract(
+    props.type === "erc721" ? ERC721_getNFT : ERC1155_getNFT,
+    {
+      contract: props.clientContract,
+      tokenId: props.tokenId,
+      includeOwner: true,
+      tokenByIndex: props.tokenByIndexSupported,
+    },
+  );
+
+  if (nftQuery.isError) {
+    return (
+      <div className="flex grow flex-col items-center justify-center rounded-lg py-20">
+        <div className="flex flex-col items-center gap-4">
+          <div className="rounded-full border p-2">
+            <XIcon className="size-5 text-muted-foreground" />
+          </div>
+          <p className="text-base text-foreground">
+            No NFT found with Token #{props.tokenId}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <TokenInfoUI
+      data={nftQuery.data}
+      contract={props.clientContract}
+      type={props.type}
+      tokenId={props.tokenId}
+      chainMetadata={props.chainMetadata}
+      collectionMetadata={props.collectionMetadata}
+    />
+  );
+}
+
+function TokenInfoUI(props: {
+  data: NFT | undefined;
+  contract: ThirdwebContract;
+  type: "erc1155" | "erc721";
+  chainMetadata: ChainMetadata;
+  tokenId: bigint;
+  collectionMetadata: {
+    name: string;
+    image?: string;
+  };
+}) {
+  const attributes = props.data ? getAttributes(props.data) : [];
+  const { claimCondition } = useERC1155ClaimCondition({
+    chainMetadata: props.chainMetadata,
+    tokenId: props.tokenId,
+    contract: props.contract,
+    enabled: props.type === "erc1155",
+  });
+
+  const isClaimable = !claimCondition.data
+    ? undefined
+    : claimCondition.data.supplyClaimed <
+      claimCondition.data.maxClaimableSupply;
+
+  return (
+    <div className="grid grid-cols-1 items-center lg:grid-cols-[500px_1fr]">
+      {/* left / top */}
+      <div className="p-4 lg:p-2">
+        {props.data ? (
+          <CustomMediaRenderer
+            client={props.contract.client}
+            src={props.data.metadata.animation_url || props.data.metadata.image}
+            alt={props.data.metadata.name?.toString() || ""}
+            poster={props.data.metadata.image}
+            className="[&>div]:!bg-accent [&_a]:!text-muted-foreground [&_a]:!no-underline [&_svg]:!size-6 [&_svg]:!text-muted-foreground aspect-square w-full rounded-lg"
+          />
+        ) : (
+          <Skeleton className="aspect-square rounded-lg border" />
+        )}
+      </div>
+
+      {/* right / bottom */}
+      <ScrollShadow scrollableClassName="lg:max-h-[calc(100dvh-60px)]">
+        <div className="space-y-4 p-4 max-sm:pt-0">
+          <div className="space-y-2">
+            {/* title */}
+            <SkeletonContainer
+              loadedData={props.data?.metadata.name}
+              skeletonData="NFTCollection #0"
+              render={(title) => (
+                <h2 className="font-bold text-3xl tracking-tight">{title}</h2>
+              )}
+            />
+
+            {/* description */}
+            {props.data ? (
+              props.data.metadata.description ? (
+                <p className="line-clamp-3 text-muted-foreground text-sm">
+                  {props.data.metadata.description}
+                </p>
+              ) : null
+            ) : (
+              <Skeleton className="h-14 w-full" />
+            )}
+          </div>
+
+          {/* collection + owner */}
+          <div className="flex flex-col gap-3 border-y border-dashed py-4 lg:flex-row lg:items-center lg:[&>*:not(:first-child)]:border-l lg:[&>*:not(:first-child)]:pl-3 ">
+            <div className="flex items-center gap-1.5">
+              <Img
+                src={
+                  props.collectionMetadata.image
+                    ? resolveSchemeWithErrorHandler({
+                        client: props.contract.client,
+                        uri: props.collectionMetadata.image,
+                      }) || ""
+                    : ""
+                }
+                alt={props.collectionMetadata.name}
+                fallback={
+                  <BoxIcon className="size-3.5 text-muted-foreground" />
+                }
+                className="size-3.5 rounded-lg"
+              />
+              <span className="text-foreground text-sm ">
+                {props.collectionMetadata.name}
+              </span>
+            </div>
+
+            {!props.data ? (
+              <Skeleton className="h-4 w-36" />
+            ) : props.data?.owner ? (
+              <div className="flex shrink-0 items-center gap-1.5 text-sm">
+                <WalletIcon className="size-3.5 text-muted-foreground" />
+                <span className="text-muted-foreground">Owned by</span>
+                <WalletAddress
+                  address={props.data.owner}
+                  client={props.contract.client}
+                  iconClassName="hidden"
+                  className="h-auto py-0 text-sm"
+                  preventOpenOnFocus
+                />
+              </div>
+            ) : (
+              <div className="flex items-center gap-1.5 text-sm">
+                {isClaimable === false ? (
+                  <CircleSlashIcon className="size-3.5" />
+                ) : (
+                  <ShoppingCartIcon className="size-3.5" />
+                )}
+
+                {props.type === "erc721" ? (
+                  <span>Available For Purchase</span>
+                ) : isClaimable === undefined ? (
+                  <Skeleton className="h-4 w-36" />
+                ) : (
+                  <span>
+                    {isClaimable
+                      ? "Available For Purchase"
+                      : "No supply left for purchase"}
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* badges */}
+          <div className="flex flex-wrap gap-2">
+            <Badge
+              variant="outline"
+              className="bg-muted/50 py-1 font-normal text-muted-foreground"
+            >
+              {props.type === "erc721" ? "ERC721" : "ERC1155"}
+            </Badge>
+
+            <Badge
+              variant="outline"
+              className="bg-muted/50 py-1 font-normal text-muted-foreground"
+            >
+              Token #{props.tokenId}
+            </Badge>
+
+            <Badge
+              variant="outline"
+              className="flex items-center gap-2 bg-muted/50 px-1.5 py-1 font-normal text-muted-foreground"
+            >
+              <Img
+                src={
+                  props.chainMetadata.icon?.url
+                    ? resolveSchemeWithErrorHandler({
+                        client: props.contract.client,
+                        uri: props.chainMetadata.icon?.url,
+                      })
+                    : ""
+                }
+                alt={props.chainMetadata.name}
+                className="size-3 rounded-full"
+              />
+              <span className="text-muted-foreground text-xs">
+                {props.chainMetadata.name}
+              </span>
+            </Badge>
+          </div>
+
+          {/* attributes */}
+          {attributes.length > 0 && (
+            <div className="border-t border-dashed pt-4">
+              <h3 className="mb-2 flex items-center gap-2 font-medium text-sm">
+                Traits
+                <span className="text-muted-foreground text-sm">
+                  {attributes.length}
+                </span>
+              </h3>
+              <div className="grid grid-cols-2 gap-2 lg:grid-cols-3">
+                {attributes.map((attribute) => (
+                  <TraitCard
+                    key={`${attribute.trait_type}-${attribute.value}`}
+                    trait_type={attribute.trait_type}
+                    value={attribute.value}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* ERC1155 */}
+          {props.type === "erc1155" && isClaimable !== false && (
+            <div className="space-y-1.5 border-t border-dashed pt-4">
+              <h3 className="font-semibold text-base text-foreground">
+                Buy NFT
+              </h3>
+              <BuyEditionDrop
+                contract={props.contract}
+                tokenId={props.tokenId}
+                chainMetadata={props.chainMetadata}
+              />
+            </div>
+          )}
+        </div>
+      </ScrollShadow>
+    </div>
+  );
+}
+
+export function PageLoadTokenViewerSheet(props: {
+  clientContract: ThirdwebContract;
+  chainMetadata: ChainMetadata;
+  type: "erc1155" | "erc721";
+  tokenId: bigint;
+  tokenByIndexSupported: boolean;
+  collectionMetadata: {
+    name: string;
+  };
+}) {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <TokenViewerSheet
+      variant="fetch-data"
+      clientContract={props.clientContract}
+      chainMetadata={props.chainMetadata}
+      type={props.type}
+      tokenId={props.tokenId}
+      open={open}
+      tokenByIndexSupported={props.tokenByIndexSupported}
+      onClose={() => setOpen(false)}
+      collectionMetadata={props.collectionMetadata}
+    />
+  );
+}
+
+function getAttributes(nft: NFT) {
+  const attributes: Array<{
+    trait_type: string;
+    value: string;
+  }> = [];
+
+  if (Array.isArray(nft.metadata.attributes)) {
+    for (const attribute of nft.metadata.attributes) {
+      if (
+        typeof attribute.trait_type !== "string" ||
+        typeof attribute.value !== "string"
+      ) {
+        continue;
+      }
+
+      attributes.push({
+        trait_type: attribute.trait_type,
+        value: attribute.value,
+      });
+    }
+  } else if (
+    typeof nft.metadata.attributes === "object" &&
+    nft.metadata.attributes !== null
+  ) {
+    for (const key in nft.metadata.attributes) {
+      if (typeof nft.metadata.attributes[key] !== "string") {
+        continue;
+      }
+
+      attributes.push({
+        trait_type: key,
+        value: nft.metadata.attributes[key],
+      });
+    }
+  }
+
+  return attributes;
+}
+
+function TraitCard(props: {
+  trait_type: string;
+  value: string;
+}) {
+  return (
+    <div className="relative rounded-md border bg-card px-3 py-2">
+      <SparkleIcon className="absolute top-2 right-2 size-3 fill-muted-foreground text-muted-foreground opacity-30" />
+      {props.trait_type && (
+        <p className="mb-0.5 text-muted-foreground text-xs">
+          {props.trait_type}
+        </p>
+      )}
+      <p className="text-foreground text-xs">{props.value}</p>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/utils.ts b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/utils.ts
new file mode 100644
index 00000000000..44735e6c8ba
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/utils.ts
@@ -0,0 +1,37 @@
+import type { ThirdwebContract } from "thirdweb";
+import * as ERC721Ext from "thirdweb/extensions/erc721";
+import * as ERC1155Ext from "thirdweb/extensions/erc1155";
+
+export async function getTotalNFTCount(params: {
+  type: "erc1155" | "erc721";
+  contract: ThirdwebContract;
+}) {
+  async function getRawValue() {
+    if (params.type === "erc1155") {
+      const nextTokenIdToMint = await ERC1155Ext.nextTokenIdToMint({
+        contract: params.contract,
+      }).catch(() => 0n);
+
+      return nextTokenIdToMint;
+    } else {
+      const [nextTokenIdToMint, totalSupply] = await Promise.all([
+        ERC721Ext.nextTokenIdToMint({
+          contract: params.contract,
+        }).catch(() => 0n),
+        ERC721Ext.totalSupply({
+          contract: params.contract,
+        }).catch(() => 0n),
+      ]);
+
+      return nextTokenIdToMint > totalSupply ? nextTokenIdToMint : totalSupply;
+    }
+  }
+
+  const value = await getRawValue();
+
+  if (value > 1_000_000n) {
+    return 1_000_000;
+  }
+
+  return Number(value);
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-layout.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-layout.tsx
index f3e5619a1fa..7ac143c125a 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-layout.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-layout.tsx
@@ -171,6 +171,7 @@ async function getTeamsAndProjectsIfLoggedIn() {
           id: x.id,
           name: x.name,
           image: x.image,
+          slug: x.slug,
         })),
       })),
     );
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-overview-page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-overview-page.tsx
index 74ab5df780f..3b8ae7b00a3 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-overview-page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-overview-page.tsx
@@ -13,6 +13,7 @@ import { ContractOverviewPage } from "./overview/ContractOverviewPage";
 import { PublishedBy } from "./overview/components/published-by.server";
 import { ContractOverviewPageClient } from "./overview/contract-overview-page.client";
 import { ERC20PublicPage } from "./public-pages/erc20/erc20";
+import { NFTPublicPage } from "./public-pages/nft/nft-page";
 
 export async function SharedContractOverviewPage(props: {
   contractAddress: string;
@@ -99,6 +100,20 @@ function RenderNewPublicContractPage(props: {
         />
       );
     }
+
+    case "erc1155":
+    case "erc721": {
+      return (
+        <NFTPublicPage
+          serverContract={props.serverContract}
+          clientContract={props.clientContract}
+          chainMetadata={props.chainMetadata}
+          type={props.type}
+          tokenId={undefined}
+        />
+      );
+    }
+
     default: {
       return null;
     }
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/uri-based-deploy.tsx b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/uri-based-deploy.tsx
index b2df8c2f09e..03c51526151 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/uri-based-deploy.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/uri-based-deploy.tsx
@@ -43,6 +43,7 @@ export async function DeployFormForUri(props: DeployFormForUriProps) {
         id: x.id,
         name: x.name,
         image: x.image,
+        slug: x.slug,
       })),
     })),
   );
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/cards.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/cards.tsx
index d1c93a30421..b54aff62860 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/cards.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/cards.tsx
@@ -73,12 +73,12 @@ function CardLink(props: {
   const trackEvent = useTrack();
 
   function handleClick() {
+    trackEvent({
+      category: "assets-landing-page",
+      action: "click",
+      label: props.trackingLabel,
+    });
     if (onClick) {
-      trackEvent({
-        category: "assets-landing-page",
-        action: "click",
-        label: props.trackingLabel,
-      });
       onClick();
     }
   }
@@ -92,15 +92,11 @@ function CardLink(props: {
       onClick={handleClick}
       role={onClick ? "button" : undefined}
       tabIndex={onClick ? 0 : undefined}
-      onKeyDown={
-        onClick
-          ? (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                handleClick();
-              }
-            }
-          : undefined
-      }
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          handleClick();
+        }
+      }}
     >
       <div className="mb-4 flex">
         <div className="flex items-center justify-center rounded-full border p-2.5">
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/_common/tracking.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/_common/tracking.ts
index 4628cb2ae47..6de3a7a6f62 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/_common/tracking.ts
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/_common/tracking.ts
@@ -17,7 +17,8 @@ export function getNFTStepTrackingData(
   return {
     category: "asset",
     action: params.action,
-    contractType: params.ercType === "erc721" ? "DropERC721" : "DropERC1155",
+    contractType: "NFTCollection",
+    ercType: params.ercType,
     label: params.status,
     chainId: params.chainId,
     ...(params.status === "error"
diff --git a/apps/dashboard/src/components/contract-components/contract-deploy-form/add-to-project-card.stories.tsx b/apps/dashboard/src/components/contract-components/contract-deploy-form/add-to-project-card.stories.tsx
index dda590c3448..c80ea4530af 100644
--- a/apps/dashboard/src/components/contract-components/contract-deploy-form/add-to-project-card.stories.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-deploy-form/add-to-project-card.stories.tsx
@@ -47,6 +47,7 @@ function teamsAndProjectsStub(teamCount: number, projectCount: number) {
         id: `project_${i + 1}_${j + 1}`,
         name: `Project ${i + 1}_${j + 1}`,
         image: `https://picsum.photos/200?random=${i}`,
+        slug: `project-${i + 1}-${j + 1}`,
       });
     }
 
diff --git a/apps/dashboard/src/components/contract-components/contract-deploy-form/add-to-project-card.tsx b/apps/dashboard/src/components/contract-components/contract-deploy-form/add-to-project-card.tsx
index cb70187d9ad..c7cf271afc4 100644
--- a/apps/dashboard/src/components/contract-components/contract-deploy-form/add-to-project-card.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-deploy-form/add-to-project-card.tsx
@@ -20,7 +20,7 @@ import type { ThirdwebClient } from "thirdweb";
 import { Fieldset } from "./common";
 
 export type MinimalTeam = Pick<Team, "id" | "name" | "image" | "slug">;
-export type MinimalProject = Pick<Project, "id" | "name" | "image">;
+export type MinimalProject = Pick<Project, "id" | "name" | "image" | "slug">;
 
 export type TeamAndProjectSelection = {
   team: MinimalTeam | undefined;
diff --git a/apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx b/apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx
index c21c9a94183..23c4cfe1647 100644
--- a/apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx
@@ -678,9 +678,15 @@ export const CustomContractForm: React.FC<CustomContractFormProps> = ({
                 metadataUri: metadata.metadataUri,
               });
               deployStatusModal.nextStep();
-              deployStatusModal.setViewContractLink(
-                `/${walletChain.id}/${contractAddr}`,
-              );
+              if (importSelection.team && importSelection.project) {
+                deployStatusModal.setViewContractLink(
+                  `/team/${importSelection.team.slug}/${importSelection.project.slug}/contract/${walletChain.id}/${contractAddr}`,
+                );
+              } else {
+                deployStatusModal.setViewContractLink(
+                  `/${walletChain.id}/${contractAddr}`,
+                );
+              }
 
               // if the contract should be added to a project
               if (
diff --git a/packages/thirdweb/src/utils/nft/parseNft.ts b/packages/thirdweb/src/utils/nft/parseNft.ts
index 3996a5284b3..4b5a5c78ab5 100644
--- a/packages/thirdweb/src/utils/nft/parseNft.ts
+++ b/packages/thirdweb/src/utils/nft/parseNft.ts
@@ -29,8 +29,8 @@ export type NFTMetadata = {
   animation_url?: string;
   external_url?: string;
   background_color?: string;
-  properties?: Record<string, unknown>;
-  attributes?: Record<string, unknown>;
+  properties?: Record<string, unknown> | Array<Record<string, unknown>>;
+  attributes?: Record<string, unknown> | Array<Record<string, unknown>>;
   image_url?: string;
 } & Record<string, unknown>;