diff --git a/apps/dashboard/src/@/components/blocks/markdown-renderer.tsx b/apps/dashboard/src/@/components/blocks/markdown-renderer.tsx
index 50fbd05d381..cfb3b903a58 100644
--- a/apps/dashboard/src/@/components/blocks/markdown-renderer.tsx
+++ b/apps/dashboard/src/@/components/blocks/markdown-renderer.tsx
@@ -94,7 +94,7 @@ export const MarkdownRenderer: React.FC<{
             <h2
               className={cn(
                 commonHeadingClassName,
-                "mb-3 border-border border-b pb-2 text-xl md:text-2xl",
+                "mb-3 border-dashed border-b pb-2 text-xl md:text-2xl",
               )}
               {...cleanedProps(props)}
             />
@@ -105,7 +105,7 @@ export const MarkdownRenderer: React.FC<{
               {...cleanedProps(props)}
               className={cn(
                 commonHeadingClassName,
-                "mt-8 mb-3 border-border border-b pb-2 text-lg md:text-xl",
+                "mt-8 mb-3 border-dashed border-b pb-2 text-lg md:text-xl",
               )}
             />
           ),
@@ -147,7 +147,7 @@ export const MarkdownRenderer: React.FC<{
           li: ({ children: c, ...props }) => (
             <li
               className={cn(
-                "mb-1.5 text-muted-foreground leading-loose [&>p]:m-0",
+                "text-muted-foreground leading-relaxed [&>p]:m-0",
                 markdownProps.li?.className,
               )}
               {...cleanedProps(props)}
@@ -157,7 +157,7 @@ export const MarkdownRenderer: React.FC<{
           ),
           ol: (props) => (
             <ol
-              className="mb-4 list-outside list-decimal pl-5 [&_ol_li:first-of-type]:mt-1.5 [&_ul_li:first-of-type]:mt-1.5"
+              className="mb-4 list-outside list-decimal pl-4 space-y-2 [&>li]:first:mt-2"
               {...cleanedProps(props)}
             />
           ),
@@ -165,7 +165,7 @@ export const MarkdownRenderer: React.FC<{
           p: (props) => (
             <p
               className={cn(
-                "mb-4 text-muted-foreground leading-loose",
+                "mb-3 text-muted-foreground leading-7",
                 markdownProps.p?.className,
               )}
               {...cleanedProps(props)}
@@ -201,7 +201,7 @@ export const MarkdownRenderer: React.FC<{
           ul: (props) => {
             return (
               <ul
-                className="mb-4 list-outside list-disc pl-5 [&_ol_li:first-of-type]:mt-1.5 [&_ul_li:first-of-type]:mt-1.5"
+                className="mb-4 list-outside list-disc pl-4 space-y-2 [&>li]:first:mt-2"
                 {...cleanedProps(props)}
               />
             );
diff --git a/apps/dashboard/src/@/components/contract-components/publisher/publisher-header.tsx b/apps/dashboard/src/@/components/contract-components/publisher/publisher-header.tsx
index 395b0adaead..823830499f1 100644
--- a/apps/dashboard/src/@/components/contract-components/publisher/publisher-header.tsx
+++ b/apps/dashboard/src/@/components/contract-components/publisher/publisher-header.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
 import { type ThirdwebClient, ZERO_ADDRESS } from "thirdweb";
 import {
@@ -9,7 +10,6 @@ import {
   AccountName,
   AccountProvider,
 } from "thirdweb/react";
-import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useEns } from "@/hooks/contract-hooks";
 import { replaceDeployerAddress } from "@/lib/publisher-utils";
@@ -29,57 +29,63 @@ export const PublisherHeader: React.FC<PublisherHeaderProps> = ({
   });
 
   return (
-    <div className="flex w-full flex-col gap-4">
-      <h4 className="font-semibold text-lg tracking-tight">Published by</h4>
-
+    <div>
+      <h4 className="font-medium text-base mb-3">Published by</h4>
       <AccountProvider
         // passing zero address during loading time to prevent the component from crashing
         address={ensQuery.data?.address || ZERO_ADDRESS}
         client={client}
       >
-        <div className="relative flex items-center gap-3">
-          <AccountAvatar
-            className="size-10 rounded-full border border-border border-solid object-cover"
-            fallbackComponent={
-              <AccountBlobbie className="size-10 rounded-full" />
-            }
-            loadingComponent={<Skeleton className="size-10 rounded-full" />}
-          />
-
-          <Link
-            className="before:absolute before:inset-0 hover:underline"
-            href={replaceDeployerAddress(
-              `/${ensQuery.data?.ensName || wallet}`,
-            )}
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <AccountName
-              className="font-medium"
+        <div className="flex items-center gap-3 relative">
+          <div className="translate-y-0.5">
+            <AccountAvatar
+              className="size-[34px] rounded-full border border-border border-solid object-cover"
               fallbackComponent={
-                // When social profile API support other TLDs as well - we can remove this condition
-                ensQuery.data?.ensName ? (
-                  <span> {ensQuery.data?.ensName} </span>
-                ) : (
-                  <AccountAddress
-                    formatFn={(addr) =>
-                      shortenIfAddress(replaceDeployerAddress(addr))
-                    }
-                  />
-                )
+                <AccountBlobbie className="size-[34px] rounded-full" />
+              }
+              loadingComponent={
+                <Skeleton className="size-[34px] rounded-full" />
               }
-              formatFn={(name) => replaceDeployerAddress(name)}
-              loadingComponent={<Skeleton className="h-8 w-40" />}
             />
-          </Link>
+          </div>
+
+          <div className="space-y-1">
+            <Link
+              className="hover:underline leading-none before:absolute before:inset-0"
+              href={replaceDeployerAddress(
+                `/${ensQuery.data?.ensName || wallet}`,
+              )}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <AccountName
+                className="text-base leading-none font-medium"
+                fallbackComponent={
+                  // When social profile API support other TLDs as well - we can remove this condition
+                  ensQuery.data?.ensName ? (
+                    <span className="text-base leading-none font-medium">
+                      {ensQuery.data?.ensName}
+                    </span>
+                  ) : (
+                    <AccountAddress
+                      formatFn={(addr) =>
+                        shortenIfAddress(replaceDeployerAddress(addr))
+                      }
+                    />
+                  )
+                }
+                formatFn={(name) => replaceDeployerAddress(name)}
+                loadingComponent={<Skeleton className="h-6 w-40" />}
+              />
+            </Link>
+
+            <span className="text-sm text-muted-foreground flex items-center gap-1.5 leading-none">
+              View all published contracts{" "}
+              <ExternalLinkIcon className="size-3 text-muted-foreground" />
+            </span>
+          </div>
         </div>
       </AccountProvider>
-
-      <Button asChild className="bg-card" variant="outline">
-        <Link href={replaceDeployerAddress(`/${wallet}`)}>
-          View all contracts
-        </Link>
-      </Button>
     </div>
   );
 };
diff --git a/apps/dashboard/src/@/components/contracts/published-contract/index.tsx b/apps/dashboard/src/@/components/contracts/published-contract/index.tsx
index c285f55ecba..bf7d93a0752 100644
--- a/apps/dashboard/src/@/components/contracts/published-contract/index.tsx
+++ b/apps/dashboard/src/@/components/contracts/published-contract/index.tsx
@@ -1,11 +1,6 @@
 "use client";
 
-import { Divider, Flex, GridItem, List, ListItem } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
-import { LinkButton } from "chakra/button";
-import { Card } from "chakra/card";
-import { Heading } from "chakra/heading";
-import { Text } from "chakra/text";
 import { format } from "date-fns";
 import {
   BookOpenTextIcon,
@@ -26,15 +21,15 @@ import { MarkdownRenderer } from "@/components/blocks/markdown-renderer";
 import type { PublishedContractWithVersion } from "@/components/contract-components/fetch-contracts-with-versions";
 import { ContractFunctionsOverview } from "@/components/contracts/functions/contract-functions";
 import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
 import {
   usePublishedContractEvents,
   usePublishedContractFunctions,
 } from "@/hooks/contract-hooks";
 import { correctAndUniqueLicenses } from "@/lib/licenses";
 import { replaceIpfsUrl } from "@/lib/sdk";
+import { cn } from "@/lib/utils";
 
-interface ExtendedPublishedContract extends PublishedContractWithVersion {
+type ExtendedPublishedContract = PublishedContractWithVersion & {
   name: string;
   displayName?: string;
   description?: string;
@@ -43,19 +38,19 @@ interface ExtendedPublishedContract extends PublishedContractWithVersion {
   tags?: string[];
   logo?: string;
   audit?: string;
-}
-
-interface PublishedContractProps {
-  publishedContract: ExtendedPublishedContract;
-  isLoggedIn: boolean;
-  client: ThirdwebClient;
-}
+};
 
-export const PublishedContract: React.FC<PublishedContractProps> = ({
+export function PublishedContract({
   publishedContract,
   isLoggedIn,
   client,
-}) => {
+  className,
+}: {
+  publishedContract: ExtendedPublishedContract;
+  isLoggedIn: boolean;
+  client: ThirdwebClient;
+  className?: string;
+}) {
   const address = useActiveAccount()?.address;
 
   const contractFunctions = usePublishedContractFunctions(publishedContract);
@@ -108,162 +103,181 @@ export const PublishedContract: React.FC<PublishedContractProps> = ({
   );
 
   return (
-    <>
-      <GridItem colSpan={{ base: 12, md: 9 }}>
-        <Flex flexDir="column" gap={6}>
-          {address === publishedContract.publisher && (
-            <LinkButton
-              href={`/contracts/publish/${encodeURIComponent(
-                publishedContract.publishMetadataUri.replace("ipfs://", ""),
-              )}`}
-              leftIcon={<PencilIcon className="size-3" />}
-              ml="auto"
-              size="sm"
+    <div
+      className={cn(
+        "py-8 grid grid-cols-1 lg:grid-cols-[1fr_280px] gap-8",
+        className,
+      )}
+    >
+      {/* left */}
+      <div className="space-y-6">
+        {address === publishedContract.publisher && (
+          <div className="flex justify-end">
+            <Button
+              asChild
               variant="outline"
+              size="sm"
+              className="ml-auto gap-2"
             >
-              Edit
-            </LinkButton>
-          )}
-          {publishedContract?.readme && (
-            <Card as={Flex} flexDir="column" gap={2} p={6} position="relative">
-              <MarkdownRenderer markdownText={publishedContract?.readme} />
-            </Card>
-          )}
+              <Link
+                href={`/contracts/publish/${encodeURIComponent(
+                  publishedContract.publishMetadataUri.replace("ipfs://", ""),
+                )}`}
+              >
+                <PencilIcon className="size-3" />
+                Edit
+              </Link>
+            </Button>
+          </div>
+        )}
 
-          {publishedContract?.changelog && (
-            <Card as={Flex} flexDir="column" gap={2} p={0}>
-              <Heading pb={2} pt={5} px={6} size="title.sm">
-                {publishedContract?.version} Release Notes
-              </Heading>
-              <Divider />
+        {/* readme */}
+        {publishedContract?.readme && (
+          <div className="overflow-hidden">
+            <MarkdownRenderer markdownText={publishedContract?.readme} />
+          </div>
+        )}
 
-              <MarkdownRenderer
-                className="px-6 pt-2 pb-5"
-                markdownText={publishedContract?.changelog}
-              />
-            </Card>
-          )}
-          {contractFunctions && (
-            <ContractFunctionsOverview
-              abi={publishedContract?.abi}
-              events={contractEvents}
-              functions={contractFunctions}
-              isLoggedIn={isLoggedIn}
-              sources={sources.data}
+        {/* changelog */}
+        {publishedContract?.changelog && (
+          <div className="overflow-hidden">
+            <div className="border-b border-dashed pb-3 mb-3">
+              <h3 className="text-lg font-semibold">
+                {publishedContract?.version} Release Notes
+              </h3>
+            </div>
+            <MarkdownRenderer
+              markdownText={publishedContract?.changelog}
+              p={{
+                className: "text-sm leading-6",
+              }}
             />
+          </div>
+        )}
+
+        {contractFunctions && (
+          <ContractFunctionsOverview
+            abi={publishedContract?.abi}
+            events={contractEvents}
+            functions={contractFunctions}
+            isLoggedIn={isLoggedIn}
+            sources={sources.data}
+          />
+        )}
+      </div>
+
+      {/* right */}
+      <div className="space-y-6">
+        {publishedContract.publisher && (
+          <PublisherHeader
+            client={client}
+            wallet={publishedContract.publisher}
+          />
+        )}
+
+        <div className="border-t border-dashed" />
+
+        <ul className="space-y-6">
+          {/* timestamp */}
+          {publishedContract.publishTimestamp && (
+            <li className="flex items-center gap-3">
+              <div className="p-2 rounded-full border bg-card">
+                <CalendarDaysIcon className="size-4 text-muted-foreground" />
+              </div>
+              <div className="space-y-2">
+                <h5 className="text-sm font-medium leading-none">
+                  Publish Date
+                </h5>
+                <p className="text-sm leading-none text-muted-foreground">
+                  {publishDate}
+                </p>
+              </div>
+            </li>
           )}
-        </Flex>
-      </GridItem>
 
-      <GridItem colSpan={{ base: 12, md: 3 }}>
-        <Flex flexDir="column" gap={6}>
-          {publishedContract.publisher && (
-            <PublisherHeader
-              client={client}
-              wallet={publishedContract.publisher}
-            />
+          {/* audit */}
+          {publishedContract?.audit && (
+            <li>
+              <div className="flex items-center gap-3">
+                <div className="p-2 rounded-full border bg-card">
+                  <ShieldCheckIcon className="size-4 text-muted-foreground" />
+                </div>
+                <div className="space-y-2">
+                  <h5 className="text-sm font-medium leading-none">
+                    Audit Report
+                  </h5>
+                  <Link
+                    href={replaceIpfsUrl(publishedContract.audit, client)}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    className="flex items-center gap-2 text-sm hover:underline leading-none text-muted-foreground hover:text-foreground"
+                  >
+                    View Audit Report
+                    <ExternalLinkIcon className="size-3.5" />
+                  </Link>
+                </div>
+              </div>
+            </li>
           )}
 
-          <Separator />
+          {/* license */}
+          <li className="flex items-center gap-3">
+            <div className="p-2 rounded-full border bg-card">
+              <BookOpenTextIcon className="size-4 text-muted-foreground" />
+            </div>
+            <div className="space-y-2">
+              <h5 className="text-sm font-medium leading-none">
+                License{licenses.length > 1 ? "s" : ""}
+              </h5>
+              <p className="text-sm leading-none text-muted-foreground">
+                {licenses.join(", ") || "None"}
+              </p>
+            </div>
+          </li>
 
-          <div className="flex flex-col gap-4">
-            <h4 className="font-semibold text-xl tracking-tight">Details</h4>
-            <List as={Flex} flexDir="column" gap={5}>
-              {publishedContract.publishTimestamp && (
-                <ListItem>
-                  <Flex alignItems="flex-start" gap={3}>
-                    <CalendarDaysIcon className="size-5 text-muted-foreground" />
-                    <Flex direction="column" gap={1}>
-                      <Heading as="h5" size="label.sm">
-                        Publish Date
-                      </Heading>
-                      <Text lineHeight={1.2} size="body.md">
-                        {publishDate}
-                      </Text>
-                    </Flex>
-                  </Flex>
-                </ListItem>
-              )}
-              {publishedContract?.audit && (
-                <ListItem>
-                  <Flex alignItems="flex-start" gap={3}>
-                    <ShieldCheckIcon className="size-5 text-green-500" />
-                    <Flex direction="column" gap={1}>
-                      <Heading as="h5" size="label.sm">
-                        Audit Report
-                      </Heading>
-                      <Text lineHeight={1.2} size="body.md">
-                        <Link
-                          className="text-link-foreground hover:text-foreground"
-                          href={replaceIpfsUrl(publishedContract.audit, client)}
-                          rel="noopener noreferrer"
-                          target="_blank"
-                        >
-                          View Audit Report
-                        </Link>
-                      </Text>
-                    </Flex>
-                  </Flex>
-                </ListItem>
-              )}
-              <ListItem>
-                <Flex alignItems="flex-start" gap={3}>
-                  <BookOpenTextIcon className="size-5 text-muted-foreground" />
-                  <Flex direction="column" gap={1}>
-                    <Heading as="h5" size="label.sm">
-                      License
-                      {licenses.length > 1 ? "s" : ""}
-                    </Heading>
-                    <Text lineHeight={1.2} size="body.md">
-                      {licenses.join(", ") || "None"}
-                    </Text>
-                  </Flex>
-                </Flex>
-              </ListItem>
-              {(publishedContract?.isDeployableViaProxy &&
-                hasImplementationAddresses) ||
-              (publishedContract?.isDeployableViaFactory &&
-                hasFactoryAddresses) ? (
-                <ListItem>
-                  <Flex alignItems="flex-start" gap={2}>
-                    <ServerIcon className="size-5 text-muted-foreground" />
-                    <Flex direction="column" gap={1}>
-                      <Heading as="h5" size="label.sm">
-                        {publishedContract?.isDeployableViaFactory
-                          ? "Factory"
-                          : "Proxy"}{" "}
-                        Enabled
-                      </Heading>
-                    </Flex>
-                  </Flex>
-                </ListItem>
-              ) : null}
-            </List>
-          </div>
+          {(publishedContract?.isDeployableViaProxy &&
+            hasImplementationAddresses) ||
+          (publishedContract?.isDeployableViaFactory && hasFactoryAddresses) ? (
+            <li className="flex items-center gap-3">
+              <div className="p-2 rounded-full border bg-card">
+                <ServerIcon className="size-4 text-muted-foreground" />
+              </div>
+              <h5 className="text-sm font-medium">
+                {publishedContract?.isDeployableViaFactory
+                  ? "Factory"
+                  : "Proxy"}{" "}
+                Enabled
+              </h5>
+            </li>
+          ) : null}
+        </ul>
 
-          <Separator />
+        <div className="border-t border-dashed" />
 
-          <Button asChild className="w-full gap-2 bg-card" variant="outline">
-            <Link
-              href="https://portal.thirdweb.com/contracts/publish/overview"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              Learn more about Publish{" "}
-              <ExternalLinkIcon className="size-4 text-muted-foreground" />
-            </Link>
-          </Button>
-        </Flex>
-      </GridItem>
-    </>
+        <Button
+          asChild
+          className="w-full gap-2 bg-card rounded-full"
+          variant="outline"
+        >
+          <Link
+            href="https://portal.thirdweb.com/tokens/publish/overview"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Learn more about Publish{" "}
+            <ExternalLinkIcon className="size-3.5 text-muted-foreground" />
+          </Link>
+        </Button>
+      </div>
+    </div>
   );
-};
+}
 
-// TODO: find a place to put this
 type ContractSource = {
   filename: string;
   source: string;
 };
+
 async function fetchSourceFilesFromMetadata(
   publishedMetadata: ExtendedPublishedContract,
   client: ThirdwebClient,
diff --git a/apps/dashboard/src/@/utils/shareLink.ts b/apps/dashboard/src/@/utils/shareLink.ts
deleted file mode 100644
index 5471b227127..00000000000
--- a/apps/dashboard/src/@/utils/shareLink.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { toast } from "sonner";
-
-// if browser supports sharing use native sharing - use that, else just copy to clipboard + show toast
-export async function shareLink(_data: ShareData) {
-  const data = { ..._data, url: _data.url || window.location.href };
-
-  if (
-    "canShare" in navigator &&
-    navigator.canShare &&
-    navigator.canShare(data)
-  ) {
-    await navigator.share(data);
-  } else {
-    await navigator.clipboard.writeText(data.url);
-    toast.info("URL copied to clipboard");
-  }
-}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/explore/page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/explore/page.tsx
index 7627635c64e..4309e08463c 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/explore/page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/explore/page.tsx
@@ -21,16 +21,20 @@ export const metadata: Metadata = {
 export default async function ExplorePage() {
   return (
     <div className="flex flex-col">
-      <div className="container flex flex-col gap-4 py-8">
-        <h1 className="mb-3 font-bold text-3xl tracking-tighter lg:text-5xl">
-          Explore
-        </h1>
-        <p className="max-w-screen-md text-base text-muted-foreground lg:text-lg">
-          The best place for web3 developers to explore smart contracts from
-          world-class web3 protocols & engineers — all deployable with one
-          click.
-        </p>
-        <div className="h-10" />
+      <div className="border-b py-10">
+        <div className="container">
+          <h1 className="mb-2 font-bold text-3xl lg:text-5xl tracking-tighter">
+            Explore
+          </h1>
+          <p className="max-w-screen-sm text-base text-muted-foreground">
+            The best place for web3 developers to explore smart contracts from
+            world-class web3 protocols & engineers — all deployable with one
+            click.
+          </p>
+        </div>
+      </div>
+
+      <div className="container flex flex-col gap-4 py-10">
         <div className="flex flex-col gap-14">
           {EXPLORE_PAGE_DATA.map((category, idx) => (
             <Fragment key={category.id}>
@@ -42,7 +46,6 @@ export default async function ExplorePage() {
           ))}
         </div>
 
-        <div className="h-16" />
         <DeployUpsellCard />
       </div>
     </div>
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/[publisher]/[contract_id]/[version]/page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/[publisher]/[contract_id]/[version]/page.tsx
index a54fe3e4958..8f9e5d48405 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/[publisher]/[contract_id]/[version]/page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/[publisher]/[contract_id]/[version]/page.tsx
@@ -1,16 +1,14 @@
-import { SimpleGrid } from "@chakra-ui/react";
-import { ChakraProviderSetup } from "chakra/ChakraProviderSetup";
 import { notFound } from "next/navigation";
 import { isAddress } from "thirdweb";
 import { resolveAddress } from "thirdweb/extensions/ens";
 import { getUserThirdwebClient } from "@/api/auth-token";
 import { fetchPublishedContractVersions } from "@/components/contract-components/fetch-contracts-with-versions";
 import { PublishedContract } from "@/components/contracts/published-contract";
-import { Separator } from "@/components/ui/separator";
 import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
 import { getRawAccount } from "../../../../../account/settings/getAccount";
 import { PublishedActions } from "../../../components/contract-actions-published.client";
 import { DeployContractHeader } from "../../../components/contract-header";
+import { PublishedContractBreadcrumbs } from "../components/breadcrumbs.client";
 
 function mapThirdwebPublisher(publisher: string) {
   if (publisher === "thirdweb.eth") {
@@ -75,28 +73,33 @@ export default async function PublishedContractPage(
   ]);
 
   return (
-    <>
-      <DeployContractHeader
-        {...params}
-        activeVersion={publishedContract}
-        allVersions={publishedContractVersions}
-      >
-        <PublishedActions
+    <div>
+      <div className="border-border border-b border-dashed">
+        <PublishedContractBreadcrumbs className="container max-w-7xl" />
+      </div>
+
+      <div className="border-border border-b">
+        <DeployContractHeader
           {...params}
-          displayName={publishedContract.displayName || publishedContract.name}
-        />
-      </DeployContractHeader>
-      <Separator />
-      {/* TODO: remove the chakra things :) */}
-      <ChakraProviderSetup>
-        <SimpleGrid columns={12} gap={{ base: 6, md: 10 }} w="full">
-          <PublishedContract
-            client={client}
-            isLoggedIn={!!account}
-            publishedContract={publishedContract}
+          activeVersion={publishedContract}
+          allVersions={publishedContractVersions}
+          className="container max-w-7xl"
+        >
+          <PublishedActions
+            {...params}
+            displayName={
+              publishedContract.displayName || publishedContract.name
+            }
           />
-        </SimpleGrid>
-      </ChakraProviderSetup>
-    </>
+        </DeployContractHeader>
+      </div>
+
+      <PublishedContract
+        className="container max-w-7xl"
+        client={client}
+        isLoggedIn={!!account}
+        publishedContract={publishedContract}
+      />
+    </div>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/[publisher]/[contract_id]/components/breadcrumbs.client.tsx b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/[publisher]/[contract_id]/components/breadcrumbs.client.tsx
index 8f314800f91..85b7f0c1a99 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/[publisher]/[contract_id]/components/breadcrumbs.client.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/[publisher]/[contract_id]/components/breadcrumbs.client.tsx
@@ -13,13 +13,14 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
+import { cn } from "@/lib/utils";
 
-export function PublishedContractBreadcrumbs() {
+export function PublishedContractBreadcrumbs(props: { className?: string }) {
   const pathname = usePathname() || "";
   const segments = pathname.split("/").filter((segment) => segment !== "");
 
   return (
-    <Breadcrumb className="border-border border-b px-6 py-4">
+    <Breadcrumb className={cn("py-4", props.className)}>
       <BreadcrumbList>
         <BreadcrumbItem>
           <BreadcrumbLink aria-label="Explore" asChild>
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/[publisher]/[contract_id]/layout.tsx b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/[publisher]/[contract_id]/layout.tsx
index 7a453b8d398..954ce950a3c 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/[publisher]/[contract_id]/layout.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/[publisher]/[contract_id]/layout.tsx
@@ -1,5 +1,4 @@
 import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
-import { PublishedContractBreadcrumbs } from "./components/breadcrumbs.client";
 import { getLatestPublishedContractsWithPublisherMapping } from "./utils/getPublishedContractsWithPublisherMapping";
 
 type Params = { publisher: string; contract_id: string };
@@ -8,12 +7,7 @@ export default function PublishedContractLayout(props: {
   children: React.ReactNode;
   params: Promise<Params>;
 }) {
-  return (
-    <div className="flex flex-col">
-      <PublishedContractBreadcrumbs />
-      <div className="container flex flex-col gap-8 py-8">{props.children}</div>
-    </div>
-  );
+  return props.children;
 }
 
 export async function generateMetadata(props: { params: Promise<Params> }) {
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/[publisher]/[contract_id]/page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/[publisher]/[contract_id]/page.tsx
index 4df049b4845..38869e0fdc3 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/[publisher]/[contract_id]/page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/[publisher]/[contract_id]/page.tsx
@@ -1,13 +1,12 @@
-import { ChakraProviderSetup } from "chakra/ChakraProviderSetup";
 import { notFound } from "next/navigation";
 import { getAuthToken } from "@/api/auth-token";
 import { PublishedContract } from "@/components/contracts/published-contract";
-import { Separator } from "@/components/ui/separator";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
 import { getRawAccount } from "../../../../account/settings/getAccount";
 import { PublishedActions } from "../../components/contract-actions-published.client";
 import { DeployContractHeader } from "../../components/contract-header";
+import { PublishedContractBreadcrumbs } from "./components/breadcrumbs.client";
 import { getPublishedContractsWithPublisherMapping } from "./utils/getPublishedContractsWithPublisherMapping";
 
 type PublishedContractDeployPageProps = {
@@ -44,31 +43,36 @@ export default async function PublishedContractPage(
   ]);
 
   return (
-    <>
-      <DeployContractHeader
-        {...params}
-        activeVersion={publishedContract}
-        allVersions={publishedContractVersions}
-      >
-        <PublishedActions
+    <div>
+      <div className="border-border border-b border-dashed">
+        <PublishedContractBreadcrumbs className="container max-w-7xl" />
+      </div>
+
+      <div className="border-border border-b">
+        <DeployContractHeader
           {...params}
-          displayName={publishedContract.displayName || publishedContract.name}
-        />
-      </DeployContractHeader>
-      <Separator />
-      {/* TODO: remove the chakra things :) */}
-      <ChakraProviderSetup>
-        <div className="grid w-full grid-cols-12 gap-6 md:gap-10">
-          <PublishedContract
-            client={getClientThirdwebClient({
-              jwt: authToken,
-              teamId: undefined,
-            })}
-            isLoggedIn={!!account}
-            publishedContract={publishedContract}
+          activeVersion={publishedContract}
+          allVersions={publishedContractVersions}
+          className="container max-w-7xl"
+        >
+          <PublishedActions
+            {...params}
+            displayName={
+              publishedContract.displayName || publishedContract.name
+            }
           />
-        </div>
-      </ChakraProviderSetup>
-    </>
+        </DeployContractHeader>
+      </div>
+
+      <PublishedContract
+        className="container max-w-7xl"
+        client={getClientThirdwebClient({
+          jwt: authToken,
+          teamId: undefined,
+        })}
+        isLoggedIn={!!account}
+        publishedContract={publishedContract}
+      />
+    </div>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/contract-actions-published.client.tsx b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/contract-actions-published.client.tsx
index 07362f2ad47..84ef2fa1745 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/contract-actions-published.client.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/contract-actions-published.client.tsx
@@ -1,10 +1,9 @@
 "use client";
 
-import { ChevronsRightIcon } from "lucide-react";
+import { ArrowUpRightIcon } from "lucide-react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
-import { shareLink } from "@/utils/shareLink";
 
 export function PublishedActions(props: {
   publisher: string;
@@ -16,26 +15,13 @@ export function PublishedActions(props: {
   const stringifiedSearchParams = searchparams?.toString();
 
   return (
-    <div className="flex gap-3">
-      <Button
-        className="bg-card"
-        onClick={() => {
-          shareLink({
-            title: `Deploy ${props.displayName}`,
-          });
-        }}
-        variant="outline"
+    <Button asChild className="gap-2 rounded-full">
+      <Link
+        href={`/${props.publisher}/${props.contract_id}${props.version ? `/${props.version}` : ""}/deploy${stringifiedSearchParams ? `?${stringifiedSearchParams}` : ""}`}
       >
-        Share
-      </Button>
-      <Button asChild className="gap-2">
-        <Link
-          href={`/${props.publisher}/${props.contract_id}${props.version ? `/${props.version}` : ""}/deploy${stringifiedSearchParams ? `?${stringifiedSearchParams}` : ""}`}
-        >
-          Deploy Now
-          <ChevronsRightIcon className="size-4" />
-        </Link>
-      </Button>
-    </div>
+        Deploy Now
+        <ArrowUpRightIcon className="size-4" />
+      </Link>
+    </Button>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/contract-header.tsx b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/contract-header.tsx
index 0f1aabd6884..06b433c74fc 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/contract-header.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/contract-header.tsx
@@ -1,5 +1,6 @@
 import type { PropsWithChildren } from "react";
 import type { PublishedContractWithVersion } from "@/components/contract-components/fetch-contracts-with-versions";
+import { cn } from "@/lib/utils";
 import { ModuleList } from "../[publisher]/[contract_id]/components/module-list.client";
 import { DeployContractInfo } from "./contract-info";
 import { DeployContractVersionSelector } from "./version-selector";
@@ -10,14 +11,15 @@ type DeployContractHeaderProps = {
   version?: string;
   allVersions: PublishedContractWithVersion[];
   activeVersion: PublishedContractWithVersion;
+  className?: string;
 };
 
 export function DeployContractHeader(
   props: PropsWithChildren<DeployContractHeaderProps>,
 ) {
   return (
-    <div className="flex flex-col gap-4 py-2">
-      <div className="flex flex-col justify-between gap-6 md:flex-row md:items-center">
+    <div className={cn("space-y-4 py-8", props.className)}>
+      <div className="flex flex-col justify-between gap-6 md:flex-row md:items-start">
         <DeployContractInfo
           description={props.activeVersion.description}
           displayName={props.activeVersion.displayName}
@@ -25,16 +27,14 @@ export function DeployContractHeader(
           name={props.activeVersion.name}
         />
         <div className="flex flex-col-reverse gap-3 md:flex-row">
-          {
-            <DeployContractVersionSelector
-              availableVersions={
-                props.allVersions
-                  ?.map((v) => v.version)
-                  .filter((v) => v !== undefined) || []
-              }
-              version={props.activeVersion.version || "latest"}
-            />
-          }
+          <DeployContractVersionSelector
+            availableVersions={
+              props.allVersions
+                ?.map((v) => v.version)
+                .filter((v) => v !== undefined) || []
+            }
+            version={props.activeVersion.version || "latest"}
+          />
           {props.children}
         </div>
       </div>
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/contract-info.tsx b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/contract-info.tsx
index 958bded9118..2476d8ec414 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/contract-info.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/contract-info.tsx
@@ -1,3 +1,5 @@
+import { FileTextIcon } from "lucide-react";
+import { Img } from "@/components/blocks/Img";
 import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
 import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
 
@@ -15,22 +17,28 @@ export function DeployContractInfo(props: {
   });
 
   return (
-    <div className="flex flex-col gap-2">
-      <div className="flex flex-1 items-center gap-4">
-        {contractImageLink && (
-          <div className="hidden shrink-0 items-center justify-center rounded-xl border border-border bg-card p-2 md:flex">
-            {/*eslint-disable-next-line @next/next/no-img-element*/}
-            <img alt={props.name} className="size-12" src={contractImageLink} />
-          </div>
-        )}
-
-        <div className="flex flex-col gap-1">
-          <h1 className="font-bold text-2xl tracking-tight md:text-3xl">
-            {contractNameDisplay}
-          </h1>
-          <p className="text-muted-foreground text-sm">{props.description}</p>
+    <div className="space-y-4">
+      <div className="flex">
+        <div className="p-2 rounded-full border bg-card">
+          <Img
+            alt={props.name}
+            className="size-8 rounded-lg"
+            fallback={
+              <div className="flex items-center justify-center">
+                <FileTextIcon className="size-6 text-muted-foreground" />
+              </div>
+            }
+            src={contractImageLink || ""}
+          />
         </div>
       </div>
+
+      <div className="space-y-0.5">
+        <h1 className="font-bold text-3xl tracking-tight">
+          {contractNameDisplay}
+        </h1>
+        <p className="text-muted-foreground">{props.description}</p>
+      </div>
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.tsx b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.tsx
index 63289e485a7..877c609b88f 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/publish-based-deploy.tsx
@@ -7,6 +7,7 @@ import {
 } from "@/components/contract-components/fetch-contracts-with-versions";
 import { ZERO_FEE_VERSIONS } from "@/constants/fee-config";
 import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
+import { PublishedContractBreadcrumbs } from "../[publisher]/[contract_id]/components/breadcrumbs.client";
 import { DeployContractHeader } from "./contract-header";
 import { DeployFormForUri } from "./uri-based-deploy";
 
@@ -92,18 +93,28 @@ export async function DeployFormForPublishInfo(props: PublishBasedDeployProps) {
     ]);
 
   return (
-    <div className="mx-auto flex w-full max-w-[1000px] flex-col gap-8 pb-20">
-      <DeployContractHeader
-        {...props}
-        activeVersion={publishedContract}
-        allVersions={publishedContractVersions}
-      />
-      <DeployFormForUri
-        contractMetadata={contractMetadata}
-        contractMetadataNoFee={contractMetadataNoFee}
-        modules={fetchedModules.filter((m) => m !== null)}
-        pathname={`/${props.publisher}/${props.contract_id}${props.version ? `/${props.version}` : ""}/deploy`}
-      />
+    <div>
+      <div className="border-border border-b border-dashed">
+        <PublishedContractBreadcrumbs className="container max-w-5xl" />
+      </div>
+
+      <div className="border-b">
+        <DeployContractHeader
+          {...props}
+          activeVersion={publishedContract}
+          allVersions={publishedContractVersions}
+          className="container max-w-5xl"
+        />
+      </div>
+
+      <div className="container max-w-5xl py-8">
+        <DeployFormForUri
+          contractMetadata={contractMetadata}
+          contractMetadataNoFee={contractMetadataNoFee}
+          modules={fetchedModules.filter((m) => m !== null)}
+          pathname={`/${props.publisher}/${props.contract_id}${props.version ? `/${props.version}` : ""}/deploy`}
+        />
+      </div>
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/uri-based-deploy.tsx b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/uri-based-deploy.tsx
index 7f4236152bd..16f8dcea766 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/uri-based-deploy.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/uri-based-deploy.tsx
@@ -1,4 +1,3 @@
-import { ChakraProviderSetup } from "chakra/ChakraProviderSetup";
 import type { FetchDeployMetadataResult } from "thirdweb/contract";
 import { getUserThirdwebClient } from "@/api/auth-token";
 import { getProjects } from "@/api/projects";
@@ -48,17 +47,14 @@ export async function DeployFormForUri(props: DeployFormForUriProps) {
     })),
   );
 
-  // TODO: remove the `ChakraProviderSetup` wrapper once the form is updated to no longer use chakra
   return (
-    <ChakraProviderSetup>
-      <CustomContractForm
-        client={client}
-        isLoggedIn={true}
-        metadata={contractMetadata}
-        metadataNoFee={contractMetadataNoFee}
-        modules={modules?.filter((m) => m !== null)}
-        teamsAndProjects={teamsAndProjects}
-      />
-    </ChakraProviderSetup>
+    <CustomContractForm
+      client={client}
+      isLoggedIn={true}
+      metadata={contractMetadata}
+      metadataNoFee={contractMetadataNoFee}
+      modules={modules?.filter((m) => m !== null)}
+      teamsAndProjects={teamsAndProjects}
+    />
   );
 }
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/version-selector.tsx b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/version-selector.tsx
index 0bda2c1d3f0..3c257d8a2c2 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/version-selector.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/version-selector.tsx
@@ -57,7 +57,7 @@ export function DeployContractVersionSelector({
       }}
       value={version}
     >
-      <SelectTrigger className="min-w-[180px] bg-card hover:bg-accent">
+      <SelectTrigger className="min-w-[120px] bg-card rounded-full">
         <SelectValue />
       </SelectTrigger>
       <SelectContent>