diff --git a/apps/dashboard/src/@/components/blocks/charts/area-chart.tsx b/apps/dashboard/src/@/components/blocks/charts/area-chart.tsx
index 92d3c967c3c..8de8fff2ba9 100644
--- a/apps/dashboard/src/@/components/blocks/charts/area-chart.tsx
+++ b/apps/dashboard/src/@/components/blocks/charts/area-chart.tsx
@@ -30,6 +30,7 @@ type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
     description?: string;
     titleClassName?: string;
   };
+  customHeader?: React.ReactNode;
   // chart config
   config: TConfig;
   data: Array<Record<keyof TConfig, number> & { time: number | string | Date }>;
@@ -60,6 +61,8 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
         </CardHeader>
       )}
 
+      {props.customHeader && props.customHeader}
+
       <CardContent className={cn(!props.header && "pt-6")}>
         <ChartContainer config={props.config} className={props.chartClassName}>
           {props.isPending ? (
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/NFTCards.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/NFTCards.tsx
index 7cce6de053b..cee6608db96 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/NFTCards.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/NFTCards.tsx
@@ -1,14 +1,7 @@
-import {
-  Flex,
-  GridItem,
-  SimpleGrid,
-  Skeleton,
-  SkeletonText,
-  useBreakpointValue,
-} from "@chakra-ui/react";
+import { SkeletonContainer } from "@/components/ui/skeleton";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { useMemo } from "react";
 import { type NFT, ZERO_ADDRESS } from "thirdweb";
-import { Card, TrackedLink, type TrackedLinkProps } from "tw-components";
 import { NFTMediaWithEmptyState } from "tw-components/nft-media";
 
 type NFTWithContract = NFT & { contractAddress: string; chainId: number };
@@ -20,7 +13,8 @@ const dummyMetadata: (idx: number) => NFTWithContract = (idx) => ({
   tokenURI: `1-0x123-${idx}`,
   metadata: {
     name: "Loading...",
-    description: "lorem ipsum loading sit amet",
+    description:
+      "lorem ipsum loading sit amet consectetur adipisicing elit. Quisquam, quos.",
     id: BigInt(idx || 0),
     uri: `1-0x123-${idx}`,
   },
@@ -31,7 +25,7 @@ const dummyMetadata: (idx: number) => NFTWithContract = (idx) => ({
 
 interface NFTCardsProps {
   nfts: Array<NFTWithContract>;
-  trackingCategory: TrackedLinkProps["category"];
+  trackingCategory: string;
   isPending: boolean;
   allNfts?: boolean;
 }
@@ -42,61 +36,82 @@ export const NFTCards: React.FC<NFTCardsProps> = ({
   isPending,
   allNfts,
 }) => {
-  const isMobile = useBreakpointValue({ base: true, md: false });
-
   const dummyData = useMemo(() => {
     return Array.from({
-      length: allNfts ? nfts.length : isMobile ? 2 : 3,
+      length: allNfts ? nfts.length : 3,
     }).map((_, idx) => dummyMetadata(idx));
-  }, [nfts.length, isMobile, allNfts]);
+  }, [nfts.length, allNfts]);
 
   return (
-    <SimpleGrid
-      gap={{ base: 3, md: 6 }}
-      columns={allNfts ? { base: 2, md: 4 } : { base: 2, md: 3 }}
-    >
+    <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
       {(isPending ? dummyData : nfts).map((token) => {
         const tokenId = token.id.toString();
 
         return (
-          <GridItem
+          <div
             key={`${token.chainId}_${token.contractAddress}_${tokenId}`}
-            as={TrackedLink}
-            category={trackingCategory}
-            href={`/${token.chainId}/${token.contractAddress}/nfts/${tokenId}`}
-            _hover={{ opacity: 0.75, textDecoration: "none" }}
+            className="hover:-translate-y-0.5 relative flex h-full cursor-pointer flex-col overflow-hidden rounded-lg bg-background duration-200 hover:scale-[1.01]"
           >
-            <Card p={0} h="full">
-              <div className="relative aspect-square w-full overflow-hidden rounded-xl">
-                <Skeleton isLoaded={!isPending}>
-                  <NFTMediaWithEmptyState
-                    metadata={token.metadata}
-                    requireInteraction
-                    width="100%"
-                    height="100%"
-                  />
-                </Skeleton>
-              </div>
-              <Flex p={4} pb={3} gap={1} direction="column">
-                <Skeleton w={!isPending ? "100%" : "50%"} isLoaded={!isPending}>
-                  <h2 className="font-semibold tracking-tight">
-                    {token.metadata.name}
-                  </h2>
-                </Skeleton>
-                <SkeletonText isLoaded={!isPending}>
-                  <p className="line-clamp-3 text-muted-foreground text-sm">
-                    {token.metadata.description ? (
-                      token.metadata.description
-                    ) : (
-                      <i>No description</i>
-                    )}
-                  </p>
-                </SkeletonText>
-              </Flex>
-            </Card>
-          </GridItem>
+            {/* border */}
+            <div className="absolute inset-0 rounded-lg border border-border" />
+
+            {/* image */}
+            <div className="relative aspect-square w-full overflow-hidden">
+              <SkeletonContainer
+                skeletonData={token.metadata}
+                loadedData={isPending ? undefined : token.metadata}
+                className="h-full w-full rounded-lg"
+                render={(v) => {
+                  return (
+                    <NFTMediaWithEmptyState
+                      metadata={v}
+                      requireInteraction
+                      width="100%"
+                      height="100%"
+                    />
+                  );
+                }}
+              />
+            </div>
+
+            <div className="p-4">
+              {/* title */}
+              <SkeletonContainer
+                skeletonData={token.metadata}
+                loadedData={isPending ? undefined : token.metadata}
+                className="mb-2"
+                render={(v) => {
+                  return (
+                    <h2 className="font-semibold tracking-tight">
+                      <TrackedLinkTW
+                        category={trackingCategory}
+                        label="view_nft"
+                        href={`/${token.chainId}/${token.contractAddress}/nfts/${tokenId}`}
+                        className="before:absolute before:inset-0"
+                      >
+                        {v.name}
+                      </TrackedLinkTW>
+                    </h2>
+                  );
+                }}
+              />
+
+              {/* Description */}
+              <SkeletonContainer
+                skeletonData={token.metadata}
+                loadedData={isPending ? undefined : token.metadata}
+                render={(v) => {
+                  return (
+                    <p className="line-clamp-3 text-muted-foreground text-sm">
+                      {v.description ? v.description : <i>No description</i>}
+                    </p>
+                  );
+                }}
+              />
+            </div>
+          </div>
         );
       })}
-    </SimpleGrid>
+    </div>
   );
 };
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/supply-cards.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/supply-cards.tsx
index dc93b10f6e2..9be19e6a58a 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/supply-cards.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/supply-cards.tsx
@@ -7,7 +7,7 @@ import {
   totalSupply,
 } from "thirdweb/extensions/erc721";
 import { useReadContract } from "thirdweb/react";
-import { StatCard } from "../../overview/components/stat-card";
+import { Stat } from "../../overview/components/stat-card";
 
 interface SupplyCardsProps {
   contract: ThirdwebContract;
@@ -36,17 +36,17 @@ export const SupplyCards: React.FC<SupplyCardsProps> = ({ contract }) => {
 
   return (
     <div className="flex flex-row gap-3 md:gap-6 [&>*]:grow">
-      <StatCard
+      <Stat
         value={realTotalSupply.toString()}
         label="Total Supply"
         isPending={nextTokenIdQuery.isPending}
       />
-      <StatCard
+      <Stat
         value={totalSupplyQuery?.data?.toString() || "N/A"}
         label="Claimed Supply"
         isPending={totalSupplyQuery.isPending}
       />
-      <StatCard
+      <Stat
         value={unclaimedSupply}
         label="Unclaimed Supply"
         isPending={totalSupplyQuery.isPending || nextTokenIdQuery.isPending}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/ContractOverviewPage.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/ContractOverviewPage.tsx
index 8438d85ee0b..4dafe54f9f6 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/ContractOverviewPage.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/ContractOverviewPage.tsx
@@ -1,12 +1,12 @@
 import type { ThirdwebContract } from "thirdweb";
-import { AnalyticsOverview } from "./components/Analytics";
+import { TokenDetailsCard } from "../tokens/components/supply";
+import { ContractAnalyticsOverviewCard } from "./components/Analytics";
 import { BuildYourApp } from "./components/BuildYourApp";
 import { ContractChecklist } from "./components/ContractChecklist";
 import { LatestEvents } from "./components/LatestEvents";
 import { MarketplaceDetails } from "./components/MarketplaceDetails";
 import { NFTDetails } from "./components/NFTDetails";
 import { PermissionsTable } from "./components/PermissionsTable";
-import { TokenDetails } from "./components/TokenDetails";
 
 interface ContractOverviewPageProps {
   contract: ThirdwebContract;
@@ -39,7 +39,7 @@ export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
 }) => {
   return (
     <div className="flex flex-col gap-8 lg:flex-row">
-      <div className="flex flex-col gap-16">
+      <div className="flex grow flex-col gap-10">
         <ContractChecklist
           isErc721={isErc721}
           isErc1155={isErc1155}
@@ -50,7 +50,7 @@ export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
         />
 
         {isAnalyticsSupported && (
-          <AnalyticsOverview
+          <ContractAnalyticsOverviewCard
             contractAddress={contract.address}
             chainId={contract.chain.id}
             trackingCategory={TRACKING_CATEGORY}
@@ -77,7 +77,7 @@ export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
           />
         )}
 
-        {isErc20 && <TokenDetails contract={contract} />}
+        {isErc20 && <TokenDetailsCard contract={contract} />}
 
         <LatestEvents
           contract={contract}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/Analytics.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/Analytics.tsx
index a6e9ba4b612..68251d0df44 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/Analytics.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/Analytics.tsx
@@ -12,19 +12,16 @@ import { ArrowRightIcon } from "lucide-react";
 import Link from "next/link";
 import { useMemo, useState } from "react";
 
-interface AnalyticsOverviewProps {
-  chainId: number;
+function getDayKey(date: Date) {
+  return date.toISOString().split("T")[0];
+}
+
+export function ContractAnalyticsOverviewCard(props: {
   contractAddress: string;
+  chainId: number;
   trackingCategory: string;
   chainSlug: string;
-}
-
-export const AnalyticsOverview: React.FC<AnalyticsOverviewProps> = ({
-  chainId,
-  contractAddress,
-  trackingCategory,
-  chainSlug,
-}) => {
+}) {
   const trackEvent = useTrack();
   const [startDate] = useState(
     (() => {
@@ -35,55 +32,27 @@ export const AnalyticsOverview: React.FC<AnalyticsOverviewProps> = ({
   );
   const [endDate] = useState(new Date());
 
-  return (
-    <div className="relative">
-      <div className="mb-4 flex items-center justify-between gap-4">
-        <h2 className="font-semibold text-2xl tracking-tight">Analytics</h2>
-        <Button
-          asChild
-          className="gap-1"
-          size="sm"
-          variant="outline"
-          onClick={() => {
-            trackEvent({
-              category: trackingCategory,
-              action: "click",
-              label: "view_all_analytics",
-            });
-          }}
-        >
-          <Link href={`/${chainSlug}/${contractAddress}/analytics`}>
-            <span>View All</span>
-            <ArrowRightIcon className="size-4" />
-          </Link>
-        </Button>
-      </div>
-
-      <OverviewAnalytics
-        chainId={chainId}
-        contractAddress={contractAddress}
-        endDate={endDate}
-        startDate={startDate}
-      />
-    </div>
-  );
-};
+  const wallets = useContractUniqueWalletAnalytics({
+    chainId: props.chainId,
+    contractAddress: props.contractAddress,
+    startDate,
+    endDate,
+  });
 
-type ChartProps = {
-  contractAddress: string;
-  chainId: number;
-  startDate: Date;
-  endDate: Date;
-};
+  const transactions = useContractTransactionAnalytics({
+    chainId: props.chainId,
+    contractAddress: props.contractAddress,
+    startDate,
+    endDate,
+  });
 
-function getDayKey(date: Date) {
-  return date.toISOString().split("T")[0];
-}
+  const events = useContractEventAnalytics({
+    chainId: props.chainId,
+    contractAddress: props.contractAddress,
+    startDate,
+    endDate,
+  });
 
-function OverviewAnalytics(props: ChartProps) {
-  const wallets = useContractUniqueWalletAnalytics(props);
-  const transactions = useContractTransactionAnalytics(props);
-  const events = useContractEventAnalytics(props);
   const isPending =
     wallets.isPending || transactions.isPending || events.isPending;
 
@@ -135,7 +104,32 @@ function OverviewAnalytics(props: ChartProps) {
       data={mergedData || []}
       isPending={isPending}
       showLegend
-      chartClassName="aspect-[1.5] lg:aspect-[3.5]"
+      chartClassName="aspect-[1.5] lg:aspect-[3]"
+      customHeader={
+        <div className="flex items-center justify-between gap-4 border-b p-6 py-4">
+          <h2 className="font-semibold text-xl tracking-tight">Analytics</h2>
+          <Button
+            asChild
+            className="gap-2 bg-background text-muted-foreground"
+            size="sm"
+            variant="outline"
+            onClick={() => {
+              trackEvent({
+                category: props.trackingCategory,
+                action: "click",
+                label: "view_all_analytics",
+              });
+            }}
+          >
+            <Link
+              href={`/${props.chainSlug}/${props.contractAddress}/analytics`}
+            >
+              <span>View All</span>
+              <ArrowRightIcon className="size-4" />
+            </Link>
+          </Button>
+        </div>
+      }
     />
   );
 }
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/BuildYourApp.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/BuildYourApp.tsx
index 9b283c1e78f..794a1ba897c 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/BuildYourApp.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/BuildYourApp.tsx
@@ -1,79 +1,41 @@
-"use client";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import { ReactIcon } from "../../../../../../../components/icons/brand-icons/ReactIcon";
+import { TypeScriptIcon } from "../../../../../../../components/icons/brand-icons/TypeScriptIcon";
 
-import {
-  Flex,
-  GridItem,
-  LinkBox,
-  LinkOverlay,
-  SimpleGrid,
-} from "@chakra-ui/react";
-import { ChakraNextImage as Image } from "components/Image";
-import { PRODUCTS } from "components/product-pages/common/nav/data";
-import { Card } from "tw-components/card";
-import { TrackedLink, type TrackedLinkProps } from "tw-components/link";
-import { Text } from "tw-components/text";
-
-const RENDERED_PRODUCTS = ["sdk", "storage", "ui-components", "auth"];
-
-interface BuildYourAppProps {
-  trackingCategory: TrackedLinkProps["category"];
+export function BuildYourApp(props: {
+  trackingCategory: string;
   contractAddress: string;
   chainSlug: string;
-}
-
-export const BuildYourApp: React.FC<BuildYourAppProps> = ({
-  trackingCategory,
-  contractAddress,
-  chainSlug,
-}) => {
+}) {
   return (
-    <Card
-      px={{ base: 4, md: 8 }}
-      py={{ base: 6, md: 8 }}
-      as={LinkBox}
-      transition="all 0.2s"
-      _hover={{ borderColor: "whiteAlpha.300" }}
-    >
-      <SimpleGrid {...{ columns: { base: 1, md: 2 } }} gap={8}>
-        <GridItem as={Flex} direction="column" gap={4}>
-          <h2 className="font-semibold text-2xl tracking-tight">
-            Build your app
-          </h2>
-          <Text size="body.md">
-            <LinkOverlay
-              as={TrackedLink}
-              category={trackingCategory}
-              label="build_your_app"
-              href={`/${chainSlug}/${contractAddress}/code`}
-              color="blue.500"
-            >
-              Learn more
-            </LinkOverlay>{" "}
-            about how you can use thirdweb tools to build apps on top of this
-            contract.
-          </Text>
-        </GridItem>
-        <GridItem as={Flex} align="center" justify="end" gap={3}>
-          {RENDERED_PRODUCTS.map((p) => {
-            const product = PRODUCTS.find((item) => item.label === p);
-            return (
-              product?.icon && (
-                <Flex
-                  key={product.name}
-                  rounded="full"
-                  bg="#0E0E10"
-                  align="center"
-                  justify="center"
-                  w={14}
-                  h={14}
-                >
-                  <Image boxSize={7} src={product.icon} alt={product.name} />
-                </Flex>
-              )
-            );
-          })}
-        </GridItem>
-      </SimpleGrid>
-    </Card>
+    <div className="relative flex flex-col justify-between gap-4 rounded-lg border bg-card p-6 hover:border-active-border lg:flex-row">
+      {/* left */}
+      <div className="max-w-sm">
+        <h2 className="mb-2 font-semibold text-xl leading-none tracking-tight">
+          Build your app
+        </h2>
+        <TrackedLinkTW
+          category={props.trackingCategory}
+          label="build_your_app"
+          href={`/${props.chainSlug}/${props.contractAddress}/code`}
+          className="block text-balance text-muted-foreground text-sm before:absolute before:inset-0"
+        >
+          Learn more about how you can use thirdweb tools to build apps on top
+          of this contract
+        </TrackedLinkTW>{" "}
+      </div>
+
+      {/* right */}
+      <div className="flex items-center justify-end gap-3">
+        {[TypeScriptIcon, ReactIcon].map((Icon, i) => {
+          return (
+            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+            <div key={i} className="rounded-full border bg-background p-3">
+              <Icon className="size-5 text-muted-foreground" />
+            </div>
+          );
+        })}
+      </div>
+    </div>
   );
-};
+}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/LatestEvents.stories.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/LatestEvents.stories.tsx
new file mode 100644
index 00000000000..866b11b6c99
--- /dev/null
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/LatestEvents.stories.tsx
@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { LatestEventsUI } from "./LatestEvents";
+
+const meta: Meta<typeof LatestEventsUI> = {
+  title: "Contracts/Overview/LatestEvents",
+  component: LatestEventsUI,
+  decorators: [
+    (Story) => (
+      <div className="container max-w-4xl py-10">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    allEvents: [],
+    autoUpdate: false,
+    eventsHref: "/ethereum/0x123456789/events",
+    trackingCategory: "test-category",
+  },
+};
+
+function eventStub(eventName: string) {
+  return {
+    logIndex: 0,
+    eventName,
+    address: "0x",
+    args: [],
+  };
+}
+
+const txStub =
+  "0x9ef44ea701637e0f7c42666b6f99f4aad9aa6b9b51995cd22df1507288e51427";
+
+export default meta;
+type Story = StoryObj<typeof LatestEventsUI>;
+
+export const Loading: Story = {
+  args: {
+    allEvents: [],
+    autoUpdate: true,
+    eventsHref: "/ethereum/0x123456789/events",
+  },
+};
+
+export const NoEvents: Story = {
+  args: {
+    allEvents: [],
+    autoUpdate: false,
+    eventsHref: "/ethereum/0x123456789/events",
+  },
+};
+
+export const WithEvents: Story = {
+  args: {
+    allEvents: [
+      {
+        transactionHash: txStub,
+        events: [eventStub("Transfer"), eventStub("Approval")],
+      },
+      {
+        transactionHash: txStub,
+        events: [eventStub("Mint")],
+      },
+      {
+        transactionHash: txStub,
+        events: [
+          eventStub("Transfer"),
+          eventStub("Burn"),
+          eventStub("Approval"),
+        ],
+      },
+    ],
+    autoUpdate: false,
+    eventsHref: "/ethereum/0x123456789/events",
+  },
+};
+
+export const LiveWithEvents: Story = {
+  args: {
+    allEvents: [
+      {
+        transactionHash: txStub,
+        events: [eventStub("Transfer"), eventStub("Approval")],
+      },
+      {
+        transactionHash: txStub,
+        events: [eventStub("Mint")],
+      },
+      {
+        transactionHash: txStub,
+        events: [
+          eventStub("Transfer"),
+          eventStub("Burn"),
+          eventStub("Approval"),
+        ],
+      },
+      {
+        transactionHash: txStub,
+        events: [eventStub("RoleGranted"), eventStub("OwnershipTransferred")],
+      },
+    ],
+    autoUpdate: true,
+    eventsHref: "/ethereum/0x123456789/events",
+  },
+};
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/LatestEvents.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/LatestEvents.tsx
index baf9154a65a..d01e697beae 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/LatestEvents.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/LatestEvents.tsx
@@ -1,192 +1,145 @@
 "use client";
 
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import {
   type InternalTransaction,
   useActivity,
 } from "@3rdweb-sdk/react/hooks/useActivity";
-import {
-  Box,
-  ButtonGroup,
-  Flex,
-  List,
-  SimpleGrid,
-  Spinner,
-  Tooltip,
-} from "@chakra-ui/react";
-import { useClipboard } from "hooks/useClipboard";
-import { CopyIcon } from "lucide-react";
-import { useState } from "react";
-import { toast } from "sonner";
+import { ArrowRightIcon } from "lucide-react";
+import Link from "next/link";
 import type { ThirdwebContract } from "thirdweb";
-import {
-  Button,
-  Card,
-  Heading,
-  LinkButton,
-  Text,
-  TrackedLink,
-  type TrackedLinkProps,
-} from "tw-components";
 import { shortenString } from "utils/usedapp-external";
 
-interface LatestEventsProps {
-  trackingCategory: TrackedLinkProps["category"];
+export function LatestEvents(props: {
+  trackingCategory: string;
   contract: ThirdwebContract;
   chainSlug: string;
-}
-
-export const LatestEvents: React.FC<LatestEventsProps> = ({
-  contract,
-  trackingCategory,
-  chainSlug,
-}) => {
-  const [autoUpdate] = useState(true);
-  const eventsHref = `/${chainSlug}/${contract.address}/events`;
-  const allEvents = useActivity(contract, autoUpdate);
+}) {
+  const autoUpdate = true;
+  const allEvents = useActivity(props.contract, autoUpdate);
 
   return (
-    <Flex gap={6} flexDirection="column">
-      <Flex align="center" justify="space-between" w="full">
-        <h2 className="font-semibold text-2xl tracking-tight">Latest Events</h2>
-        <TrackedLink
-          category={trackingCategory}
-          label="view_all_events"
-          color="blue.400"
-          _light={{
-            color: "blue.600",
-          }}
-          gap={4}
-          href={eventsHref}
-        >
-          View all -&gt;
-        </TrackedLink>
-      </Flex>
-      <Card p={0} overflow="hidden">
-        <SimpleGrid
-          gap={2}
-          columns={9}
-          borderBottomWidth="1px"
-          borderColor="borderColor"
-          padding={4}
-          bg="blackAlpha.50"
-          _dark={{ bg: "whiteAlpha.50" }}
-        >
-          <Heading gridColumn="span 3" size="label.md">
-            Transaction Hash
-          </Heading>
-          <Heading gridColumn="span 6" size="label.md">
-            Events
-          </Heading>
-        </SimpleGrid>
-
-        <List overflow="auto">
-          {allEvents.length === 0 ? (
-            <div className="flex items-center justify-center py-4">
-              <Flex align="center" gap={2}>
-                {autoUpdate && <Spinner size="sm" speed="0.69s" />}
-                <Text size="body.md" fontStyle="italic">
-                  {autoUpdate ? "listening for events" : "no events to show"}
-                </Text>
-              </Flex>
-            </div>
-          ) : null}
-          <div>
-            {allEvents?.slice(0, 3).map((e) => (
-              <EventsFeedItem
-                key={e.transactionHash}
-                transaction={e}
-                contractAddress={contract.address}
-                chainSlug={chainSlug}
-              />
-            ))}
-          </div>
-        </List>
-      </Card>
-    </Flex>
+    <LatestEventsUI
+      allEvents={allEvents}
+      autoUpdate={autoUpdate}
+      eventsHref={`/${props.chainSlug}/${props.contract.address}/events`}
+      trackingCategory={props.trackingCategory}
+    />
   );
-};
-
-interface EventsFeedItemProps {
-  transaction: InternalTransaction;
-  contractAddress: string;
-  chainSlug: string;
 }
 
-const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
-  transaction,
-  contractAddress,
-  chainSlug,
-}) => {
-  const { onCopy } = useClipboard(transaction.transactionHash);
-  const eventsHref = `/${chainSlug}/${contractAddress}/events`;
+export function LatestEventsUI(props: {
+  allEvents: Pick<InternalTransaction, "transactionHash" | "events">[];
+  autoUpdate: boolean;
+  eventsHref: string;
+  trackingCategory: string;
+}) {
+  const { allEvents, autoUpdate, eventsHref } = props;
 
   return (
-    <div>
-      <SimpleGrid
-        columns={9}
-        gap={2}
-        as="li"
-        borderBottomWidth="1px"
-        borderColor="borderColor"
-        padding={4}
-        overflow="hidden"
-        alignItems="center"
-        _last={{ borderBottomWidth: 0 }}
-      >
-        <Box gridColumn="span 3">
-          <div className="flex flex-row items-center gap-3">
-            <Tooltip
-              p={0}
-              bg="transparent"
-              boxShadow="none"
-              label={
-                <Card py={2} px={4} bgColor="backgroundHighlight">
-                  <Text size="label.sm">
-                    Copy transaction hash to clipboard
-                  </Text>
-                </Card>
-              }
+    <div className="rounded-lg border bg-card">
+      {/* header */}
+      <div className="flex w-full items-center justify-between border-b px-6 py-4">
+        <div className="flex items-center gap-3">
+          <h2 className="font-semibold text-xl tracking-tight">
+            Latest Events
+          </h2>
+          {autoUpdate && (
+            <Badge
+              variant="outline"
+              className="hidden gap-2 bg-background text-sm lg:flex"
             >
-              <Button
-                size="sm"
-                bg="transparent"
-                onClick={() => {
-                  onCopy();
-                  toast.info("Transaction hash copied.");
-                }}
-              >
-                <CopyIcon className="size-3" />
-              </Button>
-            </Tooltip>
-            <Text fontFamily="mono" noOfLines={1}>
-              {shortenString(transaction.transactionHash)}
-            </Text>
-          </div>
-        </Box>
+              <span className="!pointer-events-auto relative flex size-2">
+                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75" />
+                <span className="relative inline-flex size-2 rounded-full bg-primary" />
+              </span>
+              Live
+            </Badge>
+          )}
+        </div>
+        <Button asChild variant="outline" size="sm" className="bg-background">
+          <TrackedLinkTW
+            category={props.trackingCategory}
+            label="view_all_events"
+            href={eventsHref}
+            className="flex items-center gap-2 text-muted-foreground text-sm"
+          >
+            View all <ArrowRightIcon className="size-4" />
+          </TrackedLinkTW>
+        </Button>
+      </div>
+
+      {/* table */}
+      <TableContainer className="w-full border-none">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-52">Transaction Hash</TableHead>
+              <TableHead>Events</TableHead>
+            </TableRow>
+          </TableHeader>
 
-        <ButtonGroup
-          size="sm"
-          variant="outline"
-          gridColumn="span 6"
-          flexWrap="wrap"
-          gap={2}
-          spacing={0}
-        >
-          {transaction.events.slice(0, 2).map((e, idx) => (
-            // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-            <LinkButton key={idx} href={`${eventsHref}?event=${e.eventName}`}>
-              <Text color="whiteBg" fontWeight="600" isTruncated>
-                {e.eventName}
-              </Text>
-            </LinkButton>
-          ))}
-          {transaction.events.length > 2 && (
-            <Button as="span" pointerEvents="none">
-              + {transaction.events.length - 2}
-            </Button>
+          <TableBody>
+            {allEvents.slice(0, 3).map((transaction) => (
+              <TableRow key={transaction.transactionHash}>
+                <TableCell>
+                  <CopyTextButton
+                    textToShow={shortenString(transaction.transactionHash)}
+                    textToCopy={transaction.transactionHash}
+                    tooltip="Copy transaction hash"
+                    copyIconPosition="left"
+                    variant="ghost"
+                    className="-translate-x-2 font-mono"
+                  />
+                </TableCell>
+                <TableCell>
+                  <div className="flex w-max flex-wrap gap-2">
+                    {transaction.events.map((e) => (
+                      <Button
+                        key={e.logIndex + e.address + e.eventName}
+                        variant="outline"
+                        size="sm"
+                        className="h-auto rounded-full py-1"
+                        asChild
+                      >
+                        <Link href={`${eventsHref}?event=${e.eventName}`}>
+                          {e.eventName}
+                        </Link>
+                      </Button>
+                    ))}
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+
+      {allEvents.length === 0 && (
+        <div className="flex h-48 items-center justify-center text-sm">
+          {autoUpdate ? (
+            <div className="flex items-center gap-2">
+              <Spinner className="size-4" />
+              <p>Listening for events</p>
+            </div>
+          ) : (
+            <p>No events found</p>
           )}
-        </ButtonGroup>
-      </SimpleGrid>
+        </div>
+      )}
     </div>
   );
-};
+}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/MarketplaceDetails.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/MarketplaceDetails.tsx
index 66eb6f7eb0a..2c60d3f064f 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/MarketplaceDetails.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/MarketplaceDetails.tsx
@@ -183,8 +183,7 @@ export const MarketplaceDetails: React.FC<MarketplaceDetailsVersionProps> = ({
   chainSlug,
 }) => {
   return (
-    <div className="flex flex-col gap-6">
-      <h2 className="font-semibold text-2xl tracking-tight">Listings</h2>
+    <div className="flex flex-col gap-10">
       <ListingStatsV3
         contract={contract}
         hasDirectListings={hasDirectListings}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/NFTDetails.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/NFTDetails.tsx
index ebf4dcefb6e..0c7fef1fa9a 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/NFTDetails.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/NFTDetails.tsx
@@ -1,27 +1,27 @@
 "use client";
 
-import { Flex, useBreakpointValue } from "@chakra-ui/react";
+import { Button } from "@/components/ui/button";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import { ArrowRightIcon } from "lucide-react";
 import type { ThirdwebContract } from "thirdweb";
 import * as ERC721 from "thirdweb/extensions/erc721";
 import * as ERC1155 from "thirdweb/extensions/erc1155";
 import { useReadContract } from "thirdweb/react";
-import { TrackedLink, type TrackedLinkProps } from "tw-components/link";
 import { NFTCards } from "../../_components/NFTCards";
 
-interface NFTDetailsProps {
+type NFTDetailsProps = {
   contract: ThirdwebContract;
-  trackingCategory: TrackedLinkProps["category"];
+  trackingCategory: string;
   isErc721: boolean;
   chainSlug: string;
-}
+};
 
-export const NFTDetails: React.FC<NFTDetailsProps> = ({
+export function NFTDetails({
   contract,
   trackingCategory,
   isErc721,
   chainSlug,
-}) => {
-  const isMobile = useBreakpointValue({ base: true, md: false });
+}: NFTDetailsProps) {
   const nftsHref = `/${chainSlug}/${contract.address}/nfts`;
 
   const nftQuery = useReadContract(
@@ -36,34 +36,37 @@ export const NFTDetails: React.FC<NFTDetailsProps> = ({
   const displayableNFTs =
     nftQuery.data
       ?.filter((token) => token.metadata.image || token.metadata.animation_url)
-      .slice(0, isMobile ? 2 : 3) || [];
+      .slice(0, 3) || [];
 
   return displayableNFTs.length === 0 && !nftQuery.isPending ? null : (
-    <Flex direction="column" gap={{ base: 3, md: 6 }}>
-      <Flex align="center" justify="space-between" w="full">
-        <h2 className="font-semibold text-2xl tracking-tight">NFT Details</h2>
-        <TrackedLink
-          category={trackingCategory}
-          label="view_all_nfts"
-          color="blue.400"
-          _light={{
-            color: "blue.600",
-          }}
-          gap={4}
-          href={nftsHref}
-        >
-          View all -&gt;
-        </TrackedLink>
-      </Flex>
-      <NFTCards
-        nfts={displayableNFTs.map((t) => ({
-          ...t,
-          contractAddress: contract.address,
-          chainId: contract.chain.id,
-        }))}
-        trackingCategory={trackingCategory}
-        isPending={nftQuery.isPending}
-      />
-    </Flex>
+    <div className="rounded-lg border bg-card">
+      {/* header */}
+      <div className="flex items-center justify-between border-b px-6 py-4">
+        <h2 className="font-semibold text-xl tracking-tight">NFT Details</h2>
+        <Button variant="outline" asChild className="bg-background" size="sm">
+          <TrackedLinkTW
+            category={trackingCategory}
+            label="view_all_nfts"
+            href={nftsHref}
+            className="text-muted-foreground"
+          >
+            View all <ArrowRightIcon className="ml-2 size-4 " />
+          </TrackedLinkTW>
+        </Button>
+      </div>
+
+      {/* cards */}
+      <div className="p-6">
+        <NFTCards
+          nfts={displayableNFTs.map((t) => ({
+            ...t,
+            contractAddress: contract.address,
+            chainId: contract.chain.id,
+          }))}
+          trackingCategory={trackingCategory}
+          isPending={nftQuery.isPending}
+        />
+      </div>
+    </div>
   );
-};
+}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.stories.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.stories.tsx
new file mode 100644
index 00000000000..4e624e1d906
--- /dev/null
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.stories.tsx
@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ThirdwebProvider } from "thirdweb/react";
+import { PermissionsTableUI } from "./PermissionsTable";
+
+const meta: Meta<typeof PermissionsTableUI> = {
+  title: "Contracts/Overview/PermissionsTable",
+  component: PermissionsTableUI,
+  decorators: [
+    (Story) => (
+      <ThirdwebProvider>
+        <div className="container max-w-4xl py-10">
+          <Story />
+        </div>
+      </ThirdwebProvider>
+    ),
+  ],
+  args: {
+    viewMoreLink: "#",
+    trackingCategory: "test-category",
+    members: [],
+    isPending: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PermissionsTableUI>;
+
+export const Loading: Story = {
+  args: {
+    isPending: true,
+    members: [],
+  },
+};
+
+export const NoMembers: Story = {
+  args: {
+    isPending: false,
+    members: [],
+  },
+};
+
+export const OneMember: Story = {
+  args: {
+    isPending: false,
+    members: [
+      {
+        member: "0x1F846F6DAE38E1C88D71EAA191760B15f38B7A37",
+        roles: ["admin"],
+      },
+    ],
+  },
+};
+
+export const FiveMembers: Story = {
+  args: {
+    isPending: false,
+    members: [
+      {
+        member: "0x1F846F6DAE38E1C88D71EAA191760B15f38B7A37",
+        roles: ["admin", "minter"],
+      },
+      {
+        member: "0x83Dd93fA5D8343094f850f90B3fb90088C1bB425",
+        roles: ["transfer"],
+      },
+      {
+        member: "0x1f4202eD5c33d229bCda7B9B6AB3B57caDf423e6",
+        roles: ["admin", "transfer", "minter"],
+      },
+      {
+        member: "0x6844F0056d4C84CA2a894Fcf85473d75d8252b24",
+        roles: [
+          "admin",
+          "minter",
+          "transfer",
+          "metadata",
+          "burner",
+          "manager",
+          "lister",
+        ],
+      },
+    ],
+  },
+};
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.tsx
index 1725170816d..a45e97cb2d3 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.tsx
@@ -1,36 +1,34 @@
 "use client";
 
-import { ToolTipLabel } from "@/components/ui/tooltip";
-import { Box, Flex, List, SimpleGrid, Tag } from "@chakra-ui/react";
+import { WalletAddress } from "@/components/blocks/wallet-address";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { getAllRoleMembers } from "contract-ui/hooks/permissions";
-import { useClipboard } from "hooks/useClipboard";
-import { CopyIcon } from "lucide-react";
+import { ArrowRightIcon } from "lucide-react";
 import { useMemo } from "react";
-import { toast } from "sonner";
 import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
 import { useReadContract } from "thirdweb/react";
-import { Button } from "tw-components/button";
-import { Card } from "tw-components/card";
-import { Heading } from "tw-components/heading";
-import { TrackedLink, type TrackedLinkProps } from "tw-components/link";
-import { Text } from "tw-components/text";
-import { shortenIfAddress } from "utils/usedapp-external";
 
-interface PermissionsTableProps {
+export function PermissionsTable(props: {
   contract: ThirdwebContract;
-  trackingCategory: TrackedLinkProps["category"];
+  trackingCategory: string;
   chainSlug: string;
-}
-
-export const PermissionsTable: React.FC<PermissionsTableProps> = ({
-  contract,
-  trackingCategory,
-  chainSlug,
-}) => {
+}) {
   const allRoleMembers = useReadContract(getAllRoleMembers, {
-    contract,
+    contract: props.contract,
   });
-  const permissionsHref = `/${chainSlug}/${contract.address}/permissions`;
+
   const members = useMemo(() => {
     return (
       Object.entries(allRoleMembers.data || {}).reduce(
@@ -52,128 +50,82 @@ export const PermissionsTable: React.FC<PermissionsTableProps> = ({
   }, [allRoleMembers.data]);
 
   return (
-    <Flex gap={6} flexDirection="column">
-      <Flex align="center" justify="space-between" w="full">
-        <h2 className="font-semibold text-2xl tracking-tight">Permissions</h2>
-        <TrackedLink
-          category={trackingCategory}
-          label="view_all_permissions"
-          color="blue.400"
-          _light={{
-            color: "blue.600",
-          }}
-          gap={4}
-          href={permissionsHref}
-        >
-          View all -&gt;
-        </TrackedLink>
-      </Flex>
-      {contract && (
-        <Card p={0} overflow="hidden">
-          <SimpleGrid
-            gap={2}
-            columns={9}
-            borderBottomWidth="1px"
-            borderColor="borderColor"
-            padding={4}
-            bg="blackAlpha.50"
-            _dark={{ bg: "whiteAlpha.50" }}
-          >
-            <Heading gridColumn="span 3" size="label.md">
-              Member
-            </Heading>
-            <Heading gridColumn="span 6" size="label.md">
-              Roles
-            </Heading>
-          </SimpleGrid>
-
-          <List overflow="auto">
-            {members.length === 0 && (
-              <div className="flex items-center justify-center py-4">
-                <Flex align="center" gap={2}>
-                  <Text size="body.md" fontStyle="italic">
-                    {allRoleMembers.isPending
-                      ? "loading permissions"
-                      : "no permissions found"}
-                  </Text>
-                </Flex>
-              </div>
-            )}
-            <div>
-              {members.map((e) => (
-                <PermissionsItem key={e.member} data={e} />
-              ))}
-            </div>
-          </List>
-        </Card>
-      )}
-    </Flex>
+    <PermissionsTableUI
+      members={members}
+      isPending={allRoleMembers.isPending}
+      viewMoreLink={`/${props.chainSlug}/${props.contract.address}/permissions`}
+      trackingCategory={props.trackingCategory}
+    />
   );
-};
-
-interface PermissionsItemProps {
-  data: { member: string; roles: string[] };
 }
 
-const PermissionsItem: React.FC<PermissionsItemProps> = ({ data }) => {
-  const { onCopy } = useClipboard(data.member);
-
+export function PermissionsTableUI(props: {
+  viewMoreLink: string;
+  trackingCategory: string;
+  members: { member: string; roles: string[] }[];
+  isPending: boolean;
+}) {
   return (
-    <div>
-      <SimpleGrid
-        columns={9}
-        gap={2}
-        as="li"
-        borderBottomWidth="1px"
-        borderColor="borderColor"
-        padding={4}
-        overflow="hidden"
-        alignItems="center"
-        _last={{ borderBottomWidth: 0 }}
-      >
-        <Box gridColumn="span 2">
-          <div className="flex flex-row items-center gap-3">
-            <ToolTipLabel label="Copy address to clipboard">
-              <Button
-                size="sm"
-                bg="transparent"
-                onClick={() => {
-                  onCopy();
-                  toast.info("Address copied.");
-                }}
-              >
-                <CopyIcon className="size-3" />
-              </Button>
-            </ToolTipLabel>
-            <Text fontFamily="mono" noOfLines={1}>
-              {shortenIfAddress(data.member)}
-            </Text>
-          </div>
-        </Box>
+    <div className="rounded-lg border bg-card">
+      {/* header */}
+      <div className="flex w-full items-center justify-between border-b px-6 py-4">
+        <h2 className="font-semibold text-xl tracking-tight">Permissions</h2>
+        <Button asChild variant="outline" size="sm" className="bg-background">
+          <TrackedLinkTW
+            category={props.trackingCategory}
+            label="view_all_permissions"
+            href={props.viewMoreLink}
+            className="flex items-center gap-2 text-muted-foreground text-sm"
+          >
+            View all <ArrowRightIcon className="size-4" />
+          </TrackedLinkTW>
+        </Button>
+      </div>
 
-        <Box gridColumn="span 1" />
+      {/* table */}
+      <TableContainer className="w-full border-none">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Member</TableHead>
+              <TableHead>Roles</TableHead>
+            </TableRow>
+          </TableHeader>
 
-        <Flex gridColumn="span 6" flexWrap="wrap" gap={2}>
-          {data.roles.slice(0, 3).map((role) => (
-            <Tag key={role}>
-              <Text size="body.md" fontWeight="medium">
-                {role}
-              </Text>
-            </Tag>
-          ))}
-          {data.roles.length > 3 && (
-            <Tag
-              border="2px solid"
-              borderColor="var(--badge-bg)"
-              bg="transparent"
-            >
-              <Text size="body.md" fontWeight="medium">
-                + {data.roles.length - 3}
-              </Text>
-            </Tag>
+          <TableBody>
+            {props.members.map((data) => (
+              <TableRow key={data.member}>
+                <TableCell>
+                  <WalletAddress address={data.member} />
+                </TableCell>
+                <TableCell>
+                  <div className="flex w-max flex-wrap gap-2">
+                    {data.roles.map((role) => (
+                      <Badge
+                        variant="outline"
+                        key={role}
+                        className="bg-background py-1 font-normal text-sm capitalize"
+                      >
+                        {role}
+                      </Badge>
+                    ))}
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+
+      {props.members.length === 0 && (
+        <div className="flex h-48 items-center justify-center text-sm">
+          {props.isPending ? (
+            <Spinner className="size-8" />
+          ) : (
+            <p>No Permissions</p>
           )}
-        </Flex>
-      </SimpleGrid>
+        </div>
+      )}
     </div>
   );
-};
+}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/TokenDetails.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/TokenDetails.tsx
deleted file mode 100644
index 10f1ae5edc7..00000000000
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/TokenDetails.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { ThirdwebContract } from "thirdweb";
-import { TokenSupply } from "../../tokens/components/supply";
-
-interface TokenDetailsProps {
-  contract: ThirdwebContract;
-}
-
-export const TokenDetails: React.FC<TokenDetailsProps> = ({ contract }) => {
-  return (
-    <div className="flex flex-col gap-6">
-      <div className="flex w-full flex-row items-center justify-between">
-        <h2 className="font-semibold text-2xl tracking-tight">Token Details</h2>
-      </div>
-      <TokenSupply contract={contract} />
-    </div>
-  );
-};
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/listing-stats.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/listing-stats.tsx
index bab523ce7c1..ca9ecf570ac 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/listing-stats.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/listing-stats.tsx
@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import { totalAuctions, totalListings } from "thirdweb/extensions/marketplace";
 import { useReadContract } from "thirdweb/react";
-import { StatCard } from "./stat-card";
+import { Stat } from "./stat-card";
 
 const TotalListingsStat: React.FC<{ contract: ThirdwebContract }> = ({
   contract,
@@ -19,7 +19,7 @@ const TotalListingsStat: React.FC<{ contract: ThirdwebContract }> = ({
   );
 
   return (
-    <StatCard
+    <Stat
       value={combinedListingCount.toString()}
       label="Total Listings"
       isPending={
@@ -37,7 +37,7 @@ const DirectListingsStat: React.FC<{ contract: ThirdwebContract }> = ({
   });
 
   return (
-    <StatCard
+    <Stat
       value={(directListingsQuery.data || 0n).toString()}
       isPending={directListingsQuery.isPending}
       label="Direct Listings"
@@ -53,7 +53,7 @@ const EnglishAuctionsStat: React.FC<{ contract: ThirdwebContract }> = ({
   });
 
   return (
-    <StatCard
+    <Stat
       value={(englishAuctionsQuery.data || 0n).toString()}
       isPending={englishAuctionsQuery.isPending}
       label="English Auctions"
@@ -73,12 +73,17 @@ export const ListingStatsV3: React.FC<ListingStatsV3Props> = ({
   hasEnglishAuctions,
 }) => {
   return (
-    <div className="flex flex-row gap-3 md:gap-6 [&>*]:grow">
-      {hasDirectListings && hasEnglishAuctions && contract && (
-        <TotalListingsStat contract={contract} />
-      )}
-      {hasDirectListings && <DirectListingsStat contract={contract} />}
-      {hasEnglishAuctions && <EnglishAuctionsStat contract={contract} />}
+    <div className="rounded-lg border bg-card">
+      <h2 className="border-b px-6 py-5 font-semibold text-xl tracking-tight">
+        Listing Details
+      </h2>
+      <div className="flex flex-col gap-4 p-6 lg:flex-row [&>*]:grow">
+        {hasDirectListings && hasEnglishAuctions && contract && (
+          <TotalListingsStat contract={contract} />
+        )}
+        {hasDirectListings && <DirectListingsStat contract={contract} />}
+        {hasEnglishAuctions && <EnglishAuctionsStat contract={contract} />}
+      </div>
     </div>
   );
 };
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/stat-card.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/stat-card.tsx
index 8e2b1e16f34..8ea5ee19733 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/stat-card.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/stat-card.tsx
@@ -1,17 +1,17 @@
 import { SkeletonContainer } from "@/components/ui/skeleton";
 
-export function StatCard(props: {
-  value: string;
-  isPending: boolean;
-  label: string;
-}) {
+export function Stat({
+  label,
+  value,
+  isPending,
+}: { label: string; value: string; isPending: boolean }) {
   return (
-    <dl className="block rounded-lg border border-border bg-card p-4">
-      <dt className="mb-1.5 text-sm md:text-base">{props.label}</dt>
+    <dl className="grow">
+      <dt className="text-muted-foreground text-sm">{label}</dt>
       <SkeletonContainer
-        loadedData={props.isPending ? undefined : props.value}
-        skeletonData={"0000"}
-        render={(v) => <dd className="truncate font-semibold text-xl">{v}</dd>}
+        skeletonData={"000000"}
+        loadedData={isPending ? undefined : value}
+        render={(v) => <dd className="font-medium text-lg">{v}</dd>}
       />
     </dl>
   );
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/ContractTokensPage.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/ContractTokensPage.tsx
index bd378a5a905..d7d6b09eaf9 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/ContractTokensPage.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/ContractTokensPage.tsx
@@ -6,7 +6,7 @@ import { TokenAirdropButton } from "./components/airdrop-button";
 import { TokenBurnButton } from "./components/burn-button";
 import { TokenClaimButton } from "./components/claim-button";
 import { TokenMintButton } from "./components/mint-button";
-import { TokenSupply } from "./components/supply";
+import { TokenDetailsCard } from "./components/supply";
 import { TokenTransferButton } from "./components/transfer-button";
 
 interface ContractTokenPageProps {
@@ -49,7 +49,7 @@ export const ContractTokensPage: React.FC<ContractTokenPageProps> = ({
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-        <Heading size="title.sm">Contract Tokens</Heading>
+        <h2 className="font-semibold text-2xl tracking-tight">Tokens</h2>
         <div className="flex flex-col gap-3 md:flex-row">
           {isClaimToSupported && (
             <TokenClaimButton contract={contract} twAccount={twAccount} />
@@ -63,7 +63,7 @@ export const ContractTokensPage: React.FC<ContractTokenPageProps> = ({
         </div>
       </div>
 
-      <TokenSupply contract={contract} />
+      <TokenDetailsCard contract={contract} />
     </div>
   );
 };
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/supply-layout.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/supply-layout.tsx
index 664f7bf24e0..78aaf63f80a 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/supply-layout.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/supply-layout.tsx
@@ -1,60 +1,46 @@
-import {
-  Skeleton,
-  Stat,
-  StatHelpText,
-  StatLabel,
-  StatNumber,
-} from "@chakra-ui/react";
 import type { GetBalanceResult } from "thirdweb/extensions/erc20";
-import { Card } from "tw-components";
+import { Stat } from "../../overview/components/stat-card";
 
-interface TokenSupplyLayoutProps {
-  isTokenSupplySuccess: boolean;
+export function TokenDetailsCardUI(props: {
   tokenSupply: GetBalanceResult | undefined;
-  isOwnedBalanceSuccess: boolean;
-  address: string | undefined;
+  isWalletConnected: boolean;
   ownedBalance: GetBalanceResult | undefined;
-}
-
-export const TokenSupplyLayout: React.FC<TokenSupplyLayoutProps> = ({
-  isTokenSupplySuccess,
-  tokenSupply,
-  isOwnedBalanceSuccess,
-  address,
-  ownedBalance,
-}) => {
+}) {
+  const { tokenSupply, isWalletConnected, ownedBalance } = props;
   return (
-    <div className="flex flex-row gap-3 md:gap-6">
-      <Card as={Stat}>
-        <StatLabel mb={{ base: 1, md: 0 }}>Total Supply</StatLabel>
-        <Skeleton isLoaded={isTokenSupplySuccess}>
-          <StatNumber>
-            {tokenSupply?.displayValue} {tokenSupply?.symbol}
-          </StatNumber>
-        </Skeleton>
-      </Card>
-      <Card as={Stat}>
-        <StatLabel mb={{ base: 1, md: 0 }}>Owned by you</StatLabel>
-        <Skeleton isLoaded={isOwnedBalanceSuccess || !address}>
-          <StatNumber>
-            {address ? (
-              <>
-                {ownedBalance?.displayValue} {ownedBalance?.symbol}
-              </>
-            ) : (
-              <StatHelpText as="span">
-                Connect your wallet to see your balance
-              </StatHelpText>
-            )}
-          </StatNumber>
-        </Skeleton>
-      </Card>
-      <Card as={Stat}>
-        <StatLabel mb={{ base: 1, md: 0 }}>Decimals</StatLabel>
-        <Skeleton isLoaded={isTokenSupplySuccess}>
-          <StatNumber>{tokenSupply?.decimals}</StatNumber>
-        </Skeleton>
-      </Card>
+    <div className="rounded-lg border bg-card">
+      <h2 className="border-b p-6 py-5 font-semibold text-xl tracking-tight">
+        Token Details
+      </h2>
+      <div className="flex flex-col gap-5 p-6 lg:flex-row">
+        <Stat
+          label="Total Supply"
+          isPending={!tokenSupply}
+          value={
+            tokenSupply
+              ? `${tokenSupply.displayValue} ${tokenSupply.symbol}`
+              : ""
+          }
+        />
+
+        {isWalletConnected && (
+          <Stat
+            label="Owned by you"
+            isPending={!ownedBalance}
+            value={
+              ownedBalance
+                ? `${ownedBalance?.displayValue} ${ownedBalance?.symbol}`
+                : ""
+            }
+          />
+        )}
+
+        <Stat
+          label="Decimals"
+          isPending={!tokenSupply}
+          value={tokenSupply ? tokenSupply?.decimals.toString() : ""}
+        />
+      </div>
     </div>
   );
-};
+}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/supply.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/supply.tsx
index 89b955f958a..3cfcbe0cbb7 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/supply.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/supply.tsx
@@ -8,13 +8,15 @@ import {
   totalSupply,
 } from "thirdweb/extensions/erc20";
 import { useActiveAccount, useReadContract } from "thirdweb/react";
-import { TokenSupplyLayout } from "./supply-layout";
+import { TokenDetailsCardUI } from "./supply-layout";
 
 interface TokenBalancesProps {
   contract: ThirdwebContract;
 }
 
-export const TokenSupply: React.FC<TokenBalancesProps> = ({ contract }) => {
+export const TokenDetailsCard: React.FC<TokenBalancesProps> = ({
+  contract,
+}) => {
   const address = useActiveAccount()?.address;
 
   const tokenBalanceQuery = useReadContract(getBalance, {
@@ -35,13 +37,7 @@ export const TokenSupply: React.FC<TokenBalancesProps> = ({ contract }) => {
       tokenMetadataQuery.data === undefined ||
       tokenSupplyQuery.data === undefined
     ) {
-      return {
-        value: 0n,
-        displayValue: "0.0",
-        symbol: "LOA",
-        decimals: 18,
-        name: "Loading...",
-      };
+      return undefined;
     }
 
     return {
@@ -55,13 +51,9 @@ export const TokenSupply: React.FC<TokenBalancesProps> = ({ contract }) => {
   }, [tokenMetadataQuery.data, tokenSupplyQuery.data]);
 
   return (
-    <TokenSupplyLayout
-      isTokenSupplySuccess={
-        tokenSupplyQuery.isSuccess && tokenMetadataQuery.isSuccess
-      }
+    <TokenDetailsCardUI
+      isWalletConnected={!!address}
       tokenSupply={tokenSupply}
-      isOwnedBalanceSuccess={tokenBalanceQuery.isSuccess}
-      address={address}
       ownedBalance={tokenBalanceQuery.data}
     />
   );
diff --git a/apps/dashboard/src/components/product-pages/common/nav/data.ts b/apps/dashboard/src/components/product-pages/common/nav/data.ts
deleted file mode 100644
index 49a8d1cb330..00000000000
--- a/apps/dashboard/src/components/product-pages/common/nav/data.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-import authIcon from "../../../../../public/assets/product-icons/auth.png";
-import contractsProductIcon from "../../../../../public/assets/product-icons/contracts.png";
-import deployIcon from "../../../../../public/assets/product-icons/deploy.png";
-import embeddedWalletIcon from "../../../../../public/assets/product-icons/embedded-wallet.png";
-import engineProductIcon from "../../../../../public/assets/product-icons/engine.png";
-import extensionIcon from "../../../../../public/assets/product-icons/extensions.png";
-import payIcon from "../../../../../public/assets/product-icons/pay.svg";
-import publishIcon from "../../../../../public/assets/product-icons/publish.png";
-import rpcEdgeIcon from "../../../../../public/assets/product-icons/rpc-edge.png";
-import smartWalletIcon from "../../../../../public/assets/product-icons/smart-wallet.png";
-import storageIcon from "../../../../../public/assets/product-icons/storage.png";
-import walletSdkIcon from "../../../../../public/assets/product-icons/wallet-sdk.png";
-import type { SectionItemProps } from "./types";
-
-export const PRODUCTS: SectionItemProps[] = [
-  {
-    name: "Deploy",
-    label: "deploy",
-    description: "Contract deployment built for any use-case",
-    link: "/deploy",
-    dashboardLink: "/team/~/~/contracts",
-    icon: deployIcon,
-    section: "contracts",
-    inLandingPage: true,
-  },
-  {
-    name: "Build",
-    label: "contractkit",
-    description: "Write your own smart contracts",
-    link: "/build",
-    dashboardLink: "https://portal.thirdweb.com/contracts/build/overview",
-    icon: extensionIcon,
-    section: "contracts",
-    inLandingPage: true,
-  },
-  {
-    name: "Explore",
-    label: "explore",
-    description: "Ready-to-deploy contracts",
-    link: "/smart-contracts",
-    icon: contractsProductIcon,
-    section: "contracts",
-    inLandingPage: true,
-  },
-  {
-    name: "Publish",
-    label: "publish",
-    description: "Publish your contracts on-chain",
-    link: "/publish",
-    icon: publishIcon,
-    section: "contracts",
-  },
-  {
-    name: "Sign in",
-    label: "sign-in",
-    description:
-      "Flexible user sign-up flow with wallet and social sign-in methods",
-    link: "/connect",
-    dashboardLink: "https://playground.thirdweb.com/connect/sign-in/button",
-    icon: walletSdkIcon,
-    section: "connect",
-    inLandingPage: true,
-  },
-  {
-    name: "Account Abstraction",
-    label: "smart-wallet",
-    description: "Complete toolkit for Account Abstraction",
-    link: "/account-abstraction",
-    dashboardLink:
-      "https://portal.thirdweb.com/connect/account-abstraction/overview",
-    icon: smartWalletIcon,
-    section: "connect",
-    inLandingPage: true,
-  },
-  {
-    name: "In-App Wallets",
-    label: "embedded-wallets",
-    description: "Email & social login wallets for your customers",
-    link: "/embedded-wallets",
-    dashboardLink: "https://portal.thirdweb.com/connect/in-app-wallet/overview",
-    icon: embeddedWalletIcon,
-    section: "connect",
-    inLandingPage: true,
-  },
-  {
-    name: "Pay",
-    label: "pay",
-    description:
-      "Easily integrate fiat onramps and cross-chain crypto purchases",
-    link: "/pay",
-    dashboardLink: "https://portal.thirdweb.com/connect/pay/overview",
-    icon: payIcon,
-    section: "connect",
-    inLandingPage: true,
-  },
-  {
-    name: "Auth",
-    label: "auth",
-    description: "Authenticate users with their wallets",
-    link: "/auth",
-    icon: authIcon,
-    section: "connect",
-  },
-  {
-    name: "Storage",
-    label: "storage",
-    description: "Secure, fast, decentralized storage",
-    link: "/storage",
-    icon: storageIcon,
-    section: "infrastructure",
-  },
-  {
-    name: "RPC Edge",
-    label: "rpc-edge",
-    description: "Enterprise-grade RPCs, for free",
-    link: "/rpc-edge",
-    icon: rpcEdgeIcon,
-    section: "infrastructure",
-  },
-  {
-    name: "Engine",
-    label: "engine",
-    description: "HTTP server with contract APIs and backend wallets",
-    link: "/engine",
-    dashboardLink: "/team/~/~/engine",
-    icon: engineProductIcon,
-    section: "infrastructure",
-    inLandingPage: true,
-  },
-];
diff --git a/apps/dashboard/src/components/product-pages/common/nav/types.ts b/apps/dashboard/src/components/product-pages/common/nav/types.ts
deleted file mode 100644
index 67da358bc80..00000000000
--- a/apps/dashboard/src/components/product-pages/common/nav/types.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { StaticImageData } from "next/image";
-
-export interface SectionItemProps {
-  name: string;
-  dashboardName?: string;
-  label: string;
-  description: string;
-  link: string;
-  dashboardLink?: string;
-  icon?: StaticImageData;
-  comingSoon?: boolean;
-  inLandingPage?: boolean;
-  section:
-    | "contracts"
-    | "connect"
-    | "infrastructure"
-    | "payments"
-    | "solutions"
-    | "resources"
-    | "tools"
-    | "sdks"
-    | "company";
-}
diff --git a/apps/dashboard/src/tw-components/link.tsx b/apps/dashboard/src/tw-components/link.tsx
index 065d8b92a0a..fbf21fee5bd 100644
--- a/apps/dashboard/src/tw-components/link.tsx
+++ b/apps/dashboard/src/tw-components/link.tsx
@@ -58,7 +58,7 @@ export const Link = reactForwardRef<HTMLAnchorElement, LinkProps>(
 
 Link.displayName = "Link";
 
-export interface TrackedLinkProps extends LinkProps {
+interface TrackedLinkProps extends LinkProps {
   category: string;
   label?: string;
   trackingProps?: Record<string, string>;
diff --git a/apps/dashboard/src/tw-components/nft-media.tsx b/apps/dashboard/src/tw-components/nft-media.tsx
index c0971270a3b..0b1b55f327b 100644
--- a/apps/dashboard/src/tw-components/nft-media.tsx
+++ b/apps/dashboard/src/tw-components/nft-media.tsx
@@ -18,6 +18,8 @@ export const NFTMediaWithEmptyState: React.FC<{
   controls?: boolean;
 }> = (props) => {
   const client = useThirdwebClient();
+
+  // No media
   if (!(props.metadata.image || props.metadata.animation_url)) {
     return (
       <div