diff --git a/apps/dashboard/src/@/components/ui/tabs.tsx b/apps/dashboard/src/@/components/ui/tabs.tsx
index 7bf4ab362b3..c672d2589e9 100644
--- a/apps/dashboard/src/@/components/ui/tabs.tsx
+++ b/apps/dashboard/src/@/components/ui/tabs.tsx
@@ -7,6 +7,7 @@ import { usePathname } from "next/navigation";
 import { useCallback, useRef, useState } from "react";
 import { ScrollShadow } from "./ScrollShadow/ScrollShadow";
 import { Button } from "./button";
+import { ToolTipLabel } from "./tooltip";
 
 export type TabLink = {
   name: string;
@@ -82,6 +83,7 @@ export function TabButtons(props: {
     isActive: boolean;
     isDisabled?: boolean;
     icon?: React.FC<{ className?: string }>;
+    toolTip?: string;
   }[];
   tabClassName?: string;
   activeTabClassName?: string;
@@ -111,26 +113,31 @@ export function TabButtons(props: {
         >
           {props.tabs.map((tab, index) => {
             return (
-              <Button
-                // biome-ignore lint/suspicious/noArrayIndexKey: tabs don't change order, so index is stable
-                key={index}
-                variant="ghost"
-                ref={tab.isActive ? activeTabRef : undefined}
-                className={cn(
-                  "relative inline-flex h-auto items-center gap-1.5 rounded-lg px-2 font-medium text-sm hover:bg-accent lg:px-3 lg:text-base",
-                  !tab.isActive &&
-                    "text-muted-foreground hover:text-foreground",
-                  tab.isDisabled && "cursor-not-allowed opacity-50",
-                  props.tabClassName,
-                  tab.isActive && props.activeTabClassName,
-                )}
-                onClick={!tab.isDisabled ? tab.onClick : undefined}
+              <ToolTipLabel
+                key={typeof tab.name === "string" ? tab.name : index}
+                label={tab.toolTip}
               >
-                {tab.icon && (
-                  <tab.icon className={cn("size-6", props.tabIconClassName)} />
-                )}
-                {tab.name}
-              </Button>
+                <Button
+                  variant="ghost"
+                  ref={tab.isActive ? activeTabRef : undefined}
+                  className={cn(
+                    "relative inline-flex h-auto items-center gap-1.5 rounded-lg px-2 font-medium text-sm hover:bg-accent lg:px-3 lg:text-base",
+                    !tab.isActive &&
+                      "text-muted-foreground hover:text-foreground",
+                    tab.isDisabled && "cursor-not-allowed opacity-50",
+                    props.tabClassName,
+                    tab.isActive && props.activeTabClassName,
+                  )}
+                  onClick={!tab.isDisabled ? tab.onClick : undefined}
+                >
+                  {tab.icon && (
+                    <tab.icon
+                      className={cn("size-6", props.tabIconClassName)}
+                    />
+                  )}
+                  {tab.name}
+                </Button>
+              </ToolTipLabel>
             );
           })}
         </div>
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx
index 213c2d50fc9..38fcc1e2977 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx
@@ -75,7 +75,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
         ) : (
           <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
             {data?.name && (
-              <h1 className="line-clamp-2 font-semibold text-2xl tracking-tight lg:text-3xl">
+              <h1 className="line-clamp-2 font-bold text-2xl tracking-tight lg:text-3xl">
                 {data.name}
               </h1>
             )}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx
index 578a2a69f0c..f04543bfdd7 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx
@@ -4,33 +4,31 @@ import { UnexpectedValueErrorMessage } from "@/components/blocks/error-fallbacks
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Badge } from "@/components/ui/badge";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
 import { CodeClient } from "@/components/ui/code/code.client";
+import { TabButtons } from "@/components/ui/tabs";
+import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
-import {
-  Box,
-  ButtonGroup,
-  Divider,
-  Flex,
-  GridItem,
-  IconButton,
-  SimpleGrid,
-  Tooltip,
-  useBreakpointValue,
-} from "@chakra-ui/react";
 import { useChainSlug } from "hooks/chains/chainSlug";
-import { ChevronLeftIcon, ExternalLinkIcon } from "lucide-react";
+import { ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
-import type { ThirdwebContract } from "thirdweb";
+import type { NFT, ThirdwebClient, ThirdwebContract } from "thirdweb";
 import { getNFT as getErc721NFT } from "thirdweb/extensions/erc721";
 import { getNFT as getErc1155NFT } from "thirdweb/extensions/erc1155";
 import { useReadContract } from "thirdweb/react";
-import { Button, Card } from "tw-components";
 import { NFTMediaWithEmptyState } from "tw-components/nft-media";
-import { shortenString } from "utils/usedapp-external";
 import { NftProperty } from "../components/nft-property";
 import { useNFTDrawerTabs } from "./useNftDrawerTabs";
 
@@ -66,7 +64,6 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
   twAccount,
 }) => {
   const [tab, setTab] = useState("Details");
-  const isMobile = useBreakpointValue({ base: true, md: false });
   const router = useDashboardRouter();
   const chainId = contract.chain.id;
   const chainSlug = useChainSlug(chainId || 1);
@@ -89,15 +86,6 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
     },
   );
 
-  const tokenURIHttpLink = resolveSchemeWithErrorHandler({
-    client,
-    uri: nft?.tokenURI,
-  });
-  const nftImageLink = resolveSchemeWithErrorHandler({
-    client,
-    uri: nft?.metadata.image,
-  });
-
   if (isPending) {
     return (
       <div className="flex h-[400px] items-center justify-center">
@@ -123,230 +111,218 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
       : undefined,
   };
 
+  return (
+    <div>
+      <div className="flex flex-col gap-6 lg:flex-row">
+        <div className="relative aspect-square w-full shrink-0 self-start overflow-hidden bg-card lg:w-[350px]">
+          {/* border */}
+          <div className="absolute inset-0 z-0 rounded-lg border" />
+          {/* media */}
+          <NFTMediaWithEmptyState metadata={nftMetadata} className="z-10" />
+        </div>
+
+        <div className="flex w-full flex-col gap-6">
+          {/* breadcrumb + title */}
+          <div>
+            <Breadcrumb className="mb-3">
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbLink
+                    href={`/${chainSlug}/${contract.address}/nfts`}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      router.push(`/${chainSlug}/${contract.address}/nfts`);
+                    }}
+                  >
+                    NFTs
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbLink>#{tokenId}</BreadcrumbLink>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+
+            <div className="flex flex-col gap-1.5">
+              <NFTName value={nft.metadata.name} />
+              {nft.metadata?.description && (
+                <NFTDescription value={nft.metadata.description} />
+              )}
+            </div>
+          </div>
+
+          <TabButtons
+            tabClassName="!text-sm"
+            tabs={[
+              {
+                name: "Details",
+                onClick: () => setTab("Details"),
+                isActive: tab === "Details",
+                isDisabled: false,
+              },
+              ...tabs.map((tb) => ({
+                name: tb.title,
+                onClick: () => setTab(tb.title),
+                isActive: tab === tb.title,
+                isDisabled: tb.isDisabled,
+                toolTip: tb.isDisabled ? tb.disabledText : undefined,
+              })),
+            ].sort((a, b) => (a.isDisabled ? 1 : b.isDisabled ? -1 : 0))}
+          />
+
+          {/* tab contents */}
+          {tab === "Details" && <NFTDetailsTab nft={nft} client={client} />}
+
+          {tabs.map((tb) => {
+            return (
+              tb.title === tab && (
+                <div key={tb.title} className="w-full">
+                  {tb.children}
+                </div>
+              )
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+function NFTDetailsTab(props: {
+  nft: NFT;
+  client: ThirdwebClient;
+}) {
+  const { nft, client } = props;
   const properties = nft.metadata.attributes || nft.metadata.properties;
 
   return (
-    <Flex flexDir={{ base: "column", lg: "row" }} gap={6}>
-      <Card h="full" position="relative" minH="100px">
-        <Box w="50px" position="absolute" zIndex={1000} top={6} left={6}>
-          {/* TODO - replace this with breadcrumbs  */}
-          <Card p={1} bgColor="backgroundCardHighlight">
-            <IconButton
-              w="inherit"
-              variant="ghost"
-              onClick={() =>
-                router.push(`/${chainSlug}/${contract.address}/nfts`)
+    <div className="flex flex-col gap-8">
+      {/* common */}
+      <div className="flex flex-col gap-3">
+        <div className="grid grid-cols-1 items-center gap-x-8 gap-y-4 lg:grid-cols-[1fr_2fr]">
+          {/* token id */}
+          <div>
+            <p className="mb-1 text-muted-foreground text-sm">Token ID</p>
+            <CopyTextButton
+              textToCopy={nft.id?.toString()}
+              textToShow={
+                nft.id?.toString().length > 8
+                  ? `${nft.id.toString().slice(0, 4)}...${nft.id.toString().slice(-4)}`
+                  : nft.id?.toString()
               }
-              aria-label="Back"
-              icon={<ChevronLeftIcon className="size-6" />}
+              tooltip="Token ID"
+              copyIconPosition="right"
+              className="min-w-16 justify-between bg-card"
+            />
+          </div>
+
+          {/* owner */}
+          {nft.owner && (
+            <div>
+              <p className="mb-1 text-muted-foreground text-sm">Owner</p>
+              <WalletAddress
+                address={nft.owner}
+                className="h-auto rounded-full border bg-card px-2 py-1 pr-4 text-foreground text-sm"
+              />
+            </div>
+          )}
+
+          {/* type */}
+          <div>
+            <p className="mb-1 text-muted-foreground text-sm">Token Standard</p>
+            <Badge
+              variant="outline"
+              className="bg-card py-1 font-normal text-sm"
             >
-              Back
-            </IconButton>
-          </Card>
-        </Box>
-        <NFTMediaWithEmptyState
-          metadata={nftMetadata}
-          width={isMobile ? "100%" : "300px"}
-          height={isMobile ? "100%" : "300px"}
-        />
-      </Card>
-      <Flex flexDir="column" gap={6} w="full" px={2}>
-        <Flex flexDir="column" gap={1.5}>
-          <NFTName value={nft.metadata.name} />
-          {nft.metadata?.description && (
-            <NFTDescription value={nft.metadata.description} />
+              {nft.type}
+            </Badge>
+          </div>
+
+          {/* supply */}
+          {nft.type !== "ERC721" && (
+            <div className="w-full">
+              <p className="mb-1 text-muted-foreground text-sm">Supply</p>
+              <ToolTipLabel
+                label={nft.supply.toLocaleString("en-US")}
+                contentClassName="text-sm break-all"
+              >
+                <p className="max-w-[200px] truncate text-sm">
+                  {nft.supply.toLocaleString("en-US")}
+                </p>
+              </ToolTipLabel>
+            </div>
           )}
-        </Flex>
 
-        <Flex flexDir="column" gap={{ base: 0, md: 4 }}>
-          <Box
-            w="full"
-            overflow={{ base: "auto", md: "hidden" }}
-            pb={{ base: 4, md: 0 }}
-          >
-            <ButtonGroup size="sm" variant="ghost" spacing={2}>
-              <Button
-                type="button"
-                isActive={tab === "Details"}
-                _active={{
-                  bg: "bgBlack",
-                  color: "bgWhite",
-                }}
-                rounded="lg"
-                onClick={() => setTab("Details")}
+          {/* token uri */}
+          <div>
+            <p className="mb-1 text-muted-foreground text-sm">Token URI</p>
+            <IPFSLinkGroup
+              ipfsLink={nft.tokenURI}
+              tooltip="The URI of this NFT"
+              client={client}
+              httpsLinkTooltip="View URI"
+            />
+          </div>
+
+          {/* media uri */}
+          {nft.metadata.image && (
+            <div>
+              <p className="mb-1 text-muted-foreground text-sm">Media URI</p>
+              <IPFSLinkGroup
+                ipfsLink={nft.metadata.image}
+                tooltip="The media URI of this NFT"
+                client={client}
+                httpsLinkTooltip="View Media"
+              />
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* attributes */}
+      {properties ? (
+        <div>
+          <h3 className="mb-2 flex items-center gap-2 font-medium text-base">
+            Attributes
+            {Array.isArray(properties) && properties.length > 0 && (
+              <Badge
+                variant="outline"
+                className="bg-card px-2 text-muted-foreground"
               >
-                Details
-              </Button>
-              {tabs.map((tb) => (
-                <Tooltip
-                  key={tb.title}
-                  p={0}
-                  bg="transparent"
-                  boxShadow="none"
-                  label={
-                    tb.isDisabled ? (
-                      <Card py={2} px={4} bgColor="backgroundHighlight">
-                        <p>{tb.disabledText}</p>
-                      </Card>
-                    ) : (
-                      ""
-                    )
-                  }
-                >
-                  <Button
-                    isDisabled={tb.isDisabled}
-                    type="button"
-                    isActive={tab === tb.title}
-                    _active={{
-                      bg: "bgBlack",
-                      color: "bgWhite",
-                    }}
-                    rounded="lg"
-                    onClick={() => setTab(tb.title)}
-                  >
-                    {tb.title}
-                  </Button>
-                </Tooltip>
-              ))}
-            </ButtonGroup>
-          </Box>
-          <Divider />
-        </Flex>
-
-        {tab === "Details" && (
-          <Flex flexDir="column" gap={4}>
-            <Card as={Flex} flexDir="column" gap={3}>
-              <SimpleGrid rowGap={3} columns={12} placeItems="center left">
-                <GridItem colSpan={4}>
-                  <p className="font-semibold">Token ID</p>
-                </GridItem>
-                <GridItem colSpan={8}>
-                  <CopyTextButton
-                    textToCopy={nft.id?.toString()}
-                    textToShow={
-                      nft.id?.toString().length > 8
-                        ? `${nft.id.toString().slice(0, 4)}...${nft.id.toString().slice(-4)}`
-                        : nft.id?.toString()
-                    }
-                    tooltip="Token ID"
-                    copyIconPosition="right"
-                  />
-                </GridItem>
-
-                {nft.owner && (
-                  <>
-                    <GridItem colSpan={4}>
-                      <p className="font-semibold">Owner</p>
-                    </GridItem>
-                    <GridItem colSpan={8}>
-                      <WalletAddress address={nft.owner} />
-                    </GridItem>
-                  </>
-                )}
-                <GridItem colSpan={4}>
-                  <p className="font-semibold">Token Standard</p>
-                </GridItem>
-                <GridItem colSpan={8}>{nft.type}</GridItem>
-                {nft.type !== "ERC721" && (
-                  <>
-                    <GridItem colSpan={4}>
-                      <p className="font-semibold">Supply</p>
-                    </GridItem>
-                    <GridItem colSpan={8}>
-                      <p>{nft.supply.toLocaleString("en-US")}</p>
-                    </GridItem>
-                  </>
-                )}
-                <GridItem colSpan={4}>
-                  <p className="font-semibold">Token URI</p>
-                </GridItem>
-                <GridItem
-                  colSpan={8}
-                  className="flex flex-row items-center gap-1"
-                >
-                  <CopyTextButton
-                    textToCopy={nft.tokenURI}
-                    textToShow={shortenString(nft.tokenURI)}
-                    tooltip="The URI of this NFT"
-                    copyIconPosition="right"
-                  />
-                  {tokenURIHttpLink && (
-                    <Button variant="ghost" size="sm">
-                      <Link href={tokenURIHttpLink} target="_blank">
-                        <ExternalLinkIcon className="size-4" />
-                      </Link>
-                    </Button>
-                  )}
-                </GridItem>
-                {nft.metadata.image && (
-                  <>
-                    <GridItem colSpan={4}>
-                      <p className="font-semibold">Media URI</p>
-                    </GridItem>
-                    <GridItem
-                      colSpan={8}
-                      className="flex flex-row items-center gap-1"
-                    >
-                      <CopyTextButton
-                        textToCopy={nft.metadata.image}
-                        textToShow={shortenString(nft.metadata.image)}
-                        tooltip="The media URI of this NFT"
-                        copyIconPosition="right"
-                      />
-                      {nftImageLink && (
-                        <Button variant="ghost" size="sm">
-                          <Link href={nftImageLink} target="_blank">
-                            <ExternalLinkIcon className="size-4" />
-                          </Link>
-                        </Button>
-                      )}
-                    </GridItem>
-                  </>
-                )}
-              </SimpleGrid>
-            </Card>
-            {properties ? (
-              <Card as={Flex} flexDir="column" gap={4}>
-                <p className="font-semibold">Attributes</p>
-                {Array.isArray(properties) &&
-                String(properties[0]?.value) !== "undefined" ? (
-                  <SimpleGrid columns={{ base: 2, md: 4 }} gap={2}>
-                    {/* biome-ignore lint/suspicious/noExplicitAny: FIXME */}
-                    {properties.map((property: any, idx) => (
-                      // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                      <NftProperty key={idx} property={property} />
-                    ))}
-                  </SimpleGrid>
-                ) : (
-                  <CodeClient
-                    code={JSON.stringify(properties, null, 2) || ""}
-                    lang="json"
-                  />
-                )}
-              </Card>
-            ) : null}
-          </Flex>
-        )}
-        {tabs.map((tb) => {
-          return (
-            tb.title === tab && (
-              <Flex key={tb.title} px={0} w="full">
-                {tb.children}
-              </Flex>
-            )
-          );
-        })}
-      </Flex>
-    </Flex>
+                {properties.length}
+              </Badge>
+            )}
+          </h3>
+          <div>
+            {Array.isArray(properties) &&
+            String(properties[0]?.value) !== "undefined" ? (
+              <div className="grid grid-cols-2 gap-3 lg:grid-cols-3">
+                {/* biome-ignore lint/suspicious/noExplicitAny: FIXME */}
+                {properties.map((property: any, idx) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
+                  <NftProperty key={idx} property={property} />
+                ))}
+              </div>
+            ) : (
+              <CodeClient
+                code={JSON.stringify(properties, null, 2) || ""}
+                lang="json"
+              />
+            )}
+          </div>
+        </div>
+      ) : null}
+    </div>
   );
-};
+}
 
 function NFTName(props: {
   value: unknown;
 }) {
   if (typeof props.value === "string") {
     return (
-      <h2 className="font-semibold text-lg tracking-tight"> {props.value}</h2>
+      <h2 className="font-bold text-3xl tracking-tight"> {props.value}</h2>
     );
   }
 
@@ -360,11 +336,49 @@ function NFTName(props: {
   );
 }
 
+function IPFSLinkGroup(props: {
+  ipfsLink: string;
+  tooltip: string;
+  client: ThirdwebClient;
+  httpsLinkTooltip: string;
+}) {
+  const httpLink = resolveSchemeWithErrorHandler({
+    client: props.client,
+    uri: props.ipfsLink,
+  });
+
+  return (
+    <div className="flex flex-row items-center gap-1.5">
+      <CopyTextButton
+        textToCopy={props.ipfsLink}
+        textToShow={props.ipfsLink}
+        tooltip={props.tooltip}
+        copyIconPosition="right"
+        className="max-w-[200px] truncate bg-card"
+      />
+      {httpLink && (
+        <ToolTipLabel label={props.httpsLinkTooltip}>
+          <Button
+            variant="outline"
+            size="sm"
+            asChild
+            className="size-[34px] rounded-full bg-card p-0 text-muted-foreground"
+          >
+            <Link href={httpLink} target="_blank">
+              <ExternalLinkIcon className="size-3" />
+            </Link>
+          </Button>
+        </ToolTipLabel>
+      )}
+    </div>
+  );
+}
+
 function NFTDescription(props: {
   value: unknown;
 }) {
   if (typeof props.value === "string") {
-    return <p className="text-muted-foreground"> {props.value}</p>;
+    return <p className="text-muted-foreground text-sm"> {props.value}</p>;
   }
 
   return (
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/nft-property.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/nft-property.tsx
index b1649327ca8..72593ec36b5 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/nft-property.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/nft-property.tsx
@@ -1,5 +1,3 @@
-import { Card } from "@/components/ui/card";
-
 interface NftPropertyProps {
   // biome-ignore lint/suspicious/noExplicitAny: FIXME
   property: any;
@@ -7,17 +5,17 @@ interface NftPropertyProps {
 
 export const NftProperty: React.FC<NftPropertyProps> = ({ property }) => {
   return (
-    <Card className="flex flex-col gap-2 p-3">
+    <div className="rounded-lg border bg-card p-3 text-sm">
       {property?.trait_type && (
-        <p className="text-center text-link-foreground text-sm leading-[1.2]">
+        <p className="mb-0.5 text-muted-foreground text-sm">
           {property?.trait_type}
         </p>
       )}
-      <p className="text-center text-muted-foreground text-sm">
+      <p className="text-foreground text-sm">
         {typeof property?.value === "object"
           ? JSON.stringify(property?.value || {})
           : property?.value}
       </p>
-    </Card>
+    </div>
   );
 };