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>;