diff --git a/apps/dashboard/src/components/contract-components/contract-deploy-form/drawer.tsx b/apps/dashboard/src/components/contract-components/contract-deploy-form/drawer.tsx
deleted file mode 100644
index 8bcbdaa8ca9..00000000000
--- a/apps/dashboard/src/components/contract-components/contract-deploy-form/drawer.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { Box, Flex, Icon, Tooltip, useDisclosure } from "@chakra-ui/react";
-import { useTrack } from "hooks/analytics/useTrack";
-import { BiRocket } from "react-icons/bi";
-import { FiChevronsRight } from "react-icons/fi";
-import { Button, Drawer } from "tw-components";
-import { ContractDeployForm } from ".";
-import type { ContractId } from "../types";
-
-interface DeployFormDrawerProps {
-  contractId: ContractId;
-  version?: string;
-  chainId?: number;
-  onSuccessCallback?: (contractAddress: string) => void;
-  onDrawerVisibilityChanged?: (isVisible: boolean) => void;
-  isImplementationDeploy?: true;
-  onlyIcon?: boolean;
-}
-
-export const DeployFormDrawer: React.FC<DeployFormDrawerProps> = ({
-  contractId,
-  version,
-  chainId,
-  onSuccessCallback,
-  onDrawerVisibilityChanged,
-  isImplementationDeploy,
-  onlyIcon = false,
-}) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-
-  const trackEvent = useTrack();
-  return (
-    <>
-      <Button
-        flexShrink={0}
-        colorScheme="primary"
-        onClick={() => {
-          trackEvent({
-            category: "specific-release",
-            action: "click",
-            label: "open-drawer",
-          });
-          onOpen();
-          onDrawerVisibilityChanged?.(true);
-        }}
-        rightIcon={onlyIcon ? undefined : <Icon as={FiChevronsRight} />}
-      >
-        {onlyIcon ? (
-          <Tooltip
-            p={0}
-            ml={3}
-            label={<Flex p={2}>Deploy</Flex>}
-            bgColor="backgroundHighlight"
-            borderRadius="lg"
-            placement="right"
-            shouldWrapChildren
-          >
-            <Icon as={BiRocket} />
-          </Tooltip>
-        ) : (
-          "Deploy now"
-        )}
-      </Button>
-      <Drawer
-        allowPinchZoom
-        preserveScrollBarGap
-        size="lg"
-        onClose={() => {
-          onDrawerVisibilityChanged?.(false);
-          onClose();
-        }}
-        onCloseComplete={() => {
-          onDrawerVisibilityChanged?.(false);
-        }}
-        isOpen={isOpen}
-        trapFocus={false}
-        blockScrollOnMount={false}
-      >
-        <Box py={4} px={2}>
-          <ContractDeployForm
-            isImplementationDeploy={isImplementationDeploy}
-            contractId={contractId}
-            version={version}
-            chainId={chainId}
-            onSuccessCallback={
-              onSuccessCallback
-                ? (address) => {
-                    onSuccessCallback(address);
-                    onDrawerVisibilityChanged?.(false);
-                    onClose();
-                  }
-                : undefined
-            }
-          />
-        </Box>
-      </Drawer>
-    </>
-  );
-};
diff --git a/apps/dashboard/src/components/pages/publish.tsx b/apps/dashboard/src/components/pages/publish.tsx
index 80566716481..8bc7b5e0a8f 100644
--- a/apps/dashboard/src/components/pages/publish.tsx
+++ b/apps/dashboard/src/components/pages/publish.tsx
@@ -9,26 +9,33 @@ import {
   SimpleGrid,
   Skeleton,
 } from "@chakra-ui/react";
-import { DeployFormDrawer } from "components/contract-components/contract-deploy-form/drawer";
 import { useAllVersions, useEns } from "components/contract-components/hooks";
 import { PublishedContract } from "components/contract-components/published-contract";
 import { useTrack } from "hooks/analytics/useTrack";
 import { replaceIpfsUrl } from "lib/sdk";
+import { ChevronsRightIcon, ExternalLinkIcon } from "lucide-react";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import { useMemo } from "react";
 import { FiChevronLeft, FiImage } from "react-icons/fi";
-import { Heading, Link, Text, TrackedIconButton } from "tw-components";
+import { Heading, Text, TrackedIconButton } from "tw-components";
+import { Spinner } from "../../@/components/ui/Spinner/Spinner";
+import { Button } from "../../@/components/ui/button";
+import { ContractDeployForm } from "../contract-components/contract-deploy-form";
+import { ShareButton } from "../share-buttom";
 
 export interface PublishWithVersionPageProps {
   author: string;
   contractName: string;
   version: string;
+  isDeploy: boolean;
 }
 
 export const PublishWithVersionPage: React.FC<PublishWithVersionPageProps> = ({
   author,
   contractName,
   version,
+  isDeploy,
 }) => {
   const trackEvent = useTrack();
   const ensQuery = useEns(author);
@@ -53,113 +60,162 @@ export const PublishWithVersionPage: React.FC<PublishWithVersionPageProps> = ({
   );
 
   const availableVersions = allVersions.data?.map(({ version: v }) => v) || [];
+  const contractNameDisplay =
+    publishedContract?.displayName || publishedContract?.name;
 
-  return (
-    <Flex direction="column" gap={{ base: 6, md: 10 }}>
-      <SimpleGrid
-        mt={-8}
-        py={{ base: 4, md: 8 }}
-        position="sticky"
-        top={0}
-        columns={12}
-        gap={{ base: 6, md: 10 }}
-        w="full"
-        backdropFilter="blur(4px)"
-        zIndex={1}
-        _after={{
-          content: '""',
-          position: "absolute",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          zIndex: -1,
-          opacity: 0.8,
-          bg: "linear-gradient(180deg, var(--chakra-colors-backgroundBody) 50%, transparent 100%)",
-        }}
-      >
-        <GridItem colSpan={{ base: 12, md: 8 }}>
-          <Flex gap={4} alignItems="center">
-            <TrackedIconButton
-              variant="ghost"
-              as={Link}
-              // always send back to explore page
-              href="/explore"
-              icon={<Icon boxSize="66%" as={FiChevronLeft} />}
-              category="release"
-              label="back_button"
-              aria-label="Back"
+  const header = (
+    <SimpleGrid
+      mt={-8}
+      py={{ base: 4, md: 8 }}
+      position="sticky"
+      top={0}
+      columns={12}
+      gap={{ base: 6, md: 10 }}
+      w="full"
+      zIndex={1}
+      _after={{
+        content: '""',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: -1,
+        opacity: 0.8,
+        bg: "linear-gradient(180deg, var(--chakra-colors-backgroundBody) 50%, transparent 100%)",
+      }}
+    >
+      <GridItem colSpan={{ base: 12, md: 8 }}>
+        <Flex gap={4} alignItems="center">
+          <TrackedIconButton
+            variant="ghost"
+            as={Link}
+            // always send back to explore page
+            href="/explore"
+            icon={<Icon boxSize="66%" as={FiChevronLeft} />}
+            category="release"
+            label="back_button"
+            aria-label="Back"
+          />
+
+          {publishedContract?.logo ? (
+            <Image
+              flexShrink={0}
+              alt={publishedContract.name}
+              borderRadius="full"
+              src={replaceIpfsUrl(publishedContract.logo)}
+              boxSize={14}
             />
+          ) : (
+            <Center
+              flexShrink={0}
+              boxSize={14}
+              borderRadius="full"
+              borderWidth="1px"
+              borderColor="borderColor"
+            >
+              <Icon boxSize="50%" as={FiImage} color="accent.300" />
+            </Center>
+          )}
 
-            {publishedContract?.logo ? (
-              <Image
-                flexShrink={0}
-                alt={publishedContract.name}
-                borderRadius="full"
-                src={replaceIpfsUrl(publishedContract.logo)}
-                boxSize={14}
-              />
-            ) : (
-              <Center
-                flexShrink={0}
-                boxSize={14}
-                borderRadius="full"
-                borderWidth="1px"
-                borderColor="borderColor"
-              >
-                <Icon boxSize="50%" as={FiImage} color="accent.300" />
-              </Center>
-            )}
-
-            <Skeleton isLoaded={allVersions.isSuccess}>
-              <Flex direction="column" gap={2}>
-                <Heading as="h1" size="title.md">
-                  {publishedContract?.displayName || publishedContract?.name}
-                </Heading>
-                <Text as="h2" noOfLines={2}>
-                  {publishedContract?.description}
-                </Text>
-              </Flex>
-            </Skeleton>
-          </Flex>
-        </GridItem>
-        <GridItem colSpan={{ base: 12, md: 4 }}>
-          <Flex gap={3}>
-            <Select
-              onChange={(e) => {
-                const val = e.target.value;
-                if (availableVersions.includes(val)) {
-                  trackEvent({
-                    category: "release-selector",
-                    action: "click",
-                    version_selected: val,
-                  });
-                  const pathName =
-                    val === allVersions.data?.[0].version
-                      ? `/${author}/${contractName}`
-                      : `/${author}/${contractName}/${val}`;
+          <Skeleton isLoaded={allVersions.isSuccess}>
+            <Flex direction="column" gap={2}>
+              <Heading as="h1" size="title.md">
+                {contractNameDisplay}
+              </Heading>
+              <Text as="h2" noOfLines={2}>
+                {publishedContract?.description}
+              </Text>
+            </Flex>
+          </Skeleton>
+        </Flex>
+      </GridItem>
+      <GridItem colSpan={{ base: 12, md: 4 }}>
+        <Flex gap={3}>
+          <Select
+            onChange={(e) => {
+              const val = e.target.value;
+              if (availableVersions.includes(val)) {
+                trackEvent({
+                  category: "release-selector",
+                  action: "click",
+                  version_selected: val,
+                });
+
+                const pathName =
+                  val === allVersions.data?.[0].version
+                    ? `/${author}/${contractName}`
+                    : `/${author}/${contractName}/${val}`;
 
+                if (isDeploy) {
+                  router.push(`${pathName}/deploy`);
+                } else {
                   router.push(pathName);
                 }
-              }}
-              value={version}
-            >
-              {availableVersions.map((v, idx) => (
-                <option key={v} value={v}>
-                  {v}
-                  {idx === 0 ? " (latest)" : ""}
-                </option>
-              ))}
-            </Select>
-            {deployContractId && (
-              <DeployFormDrawer
-                contractId={deployContractId}
-                version={publishedContract?.version || "latest"}
-              />
-            )}
-          </Flex>
-        </GridItem>
-      </SimpleGrid>
+              }
+            }}
+            value={version}
+          >
+            {availableVersions.map((v, idx) => (
+              <option key={v} value={v}>
+                {v}
+                {idx === 0 ? " (latest)" : ""}
+              </option>
+            ))}
+          </Select>
+          {isDeploy ? (
+            <>
+              <Button asChild variant="outline" className="gap-2">
+                <Link href={`${router.asPath.replace("/deploy", "")}`}>
+                  Contract Details
+                  <ExternalLinkIcon className="size-4" />
+                </Link>
+              </Button>
+
+              <ShareButton title={`Deploy ${contractNameDisplay}`} />
+            </>
+          ) : (
+            <>
+              {deployContractId && (
+                <Button asChild variant="primary" className="gap-2">
+                  <Link href={`${router.asPath}/deploy`}>
+                    Deploy Now
+                    <ChevronsRightIcon className="size-4" />
+                  </Link>
+                </Button>
+              )}
+            </>
+          )}
+        </Flex>
+      </GridItem>
+    </SimpleGrid>
+  );
+
+  if (isDeploy) {
+    if (!deployContractId || !publishedContract) {
+      return (
+        <div className="h-[400px] flex items-center justify-center">
+          <Spinner className="size-4" />
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        <div className="border-b border-border">{header}</div>
+        <div className="flex gap-6 pt-4">
+          <ContractDeployForm
+            contractId={deployContractId}
+            version={publishedContract.version || "latest"}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <Flex direction="column" gap={{ base: 6, md: 10 }}>
+      {header}
       <SimpleGrid columns={12} gap={{ base: 6, md: 10 }} w="full">
         <GridItem colSpan={12} display={{ base: "inherit", md: "none" }}>
           <Divider />
diff --git a/apps/dashboard/src/components/selects/NetworkSelectorButton.tsx b/apps/dashboard/src/components/selects/NetworkSelectorButton.tsx
index 74a34635736..225ee2714ae 100644
--- a/apps/dashboard/src/components/selects/NetworkSelectorButton.tsx
+++ b/apps/dashboard/src/components/selects/NetworkSelectorButton.tsx
@@ -18,6 +18,7 @@ import { useNetworkSwitcherModal } from "thirdweb/react";
 import { Button } from "tw-components";
 import { thirdwebClient } from "../../@/constants/client";
 import { useFavoriteChains } from "../../@3rdweb-sdk/react/hooks/useFavoriteChains";
+import { getSDKTheme } from "../../app/components/sdk-component-theme";
 import { mapStoredChainTov5Chain } from "../../contexts/map-chains";
 import { useActiveChainAsDashboardChain } from "../../lib/v5-adapter";
 
@@ -120,7 +121,7 @@ export const NetworkSelectorButton: React.FC<NetworkSelectorButtonProps> = ({
         }}
         onClick={() => {
           networkSwitcherModal.open({
-            theme: theme === "dark" ? "dark" : "light",
+            theme: getSDKTheme(theme === "light" ? "light" : "dark"),
             sections: [
               {
                 label: "Recently Used",
diff --git a/apps/dashboard/src/components/share-buttom/index.tsx b/apps/dashboard/src/components/share-buttom/index.tsx
index 71e10e9f5bd..909b97c2f7d 100644
--- a/apps/dashboard/src/components/share-buttom/index.tsx
+++ b/apps/dashboard/src/components/share-buttom/index.tsx
@@ -2,9 +2,10 @@ import { Icon, useClipboard, useToast } from "@chakra-ui/react";
 import { FiCheck, FiShare2 } from "react-icons/fi";
 import { TrackedIconButton } from "tw-components";
 
-export const ShareButton: React.FC<Required<Omit<ShareData, "files">>> = (
-  shareData,
-) => {
+export const ShareButton: React.FC<ShareData> = (props) => {
+  const url =
+    props.url || typeof window !== "undefined" ? window.location.href : "";
+  const shareData = { ...props, url };
   const { onCopy, hasCopied } = useClipboard(shareData.url);
 
   const toast = useToast();
@@ -34,21 +35,19 @@ export const ShareButton: React.FC<Required<Omit<ShareData, "files">>> = (
   };
 
   return (
-    <>
-      <TrackedIconButton
-        variant="ghost"
-        aria-label="copy-url"
-        icon={
-          <Icon
-            boxSize={5}
-            color={hasCopied ? "green.500" : "inherit"}
-            as={hasCopied ? FiCheck : FiShare2}
-          />
-        }
-        category="released-contract"
-        label="copy-url"
-        onClick={onShareClick}
-      />
-    </>
+    <TrackedIconButton
+      variant="ghost"
+      aria-label="copy-url"
+      icon={
+        <Icon
+          boxSize={5}
+          color={hasCopied ? "green.500" : "inherit"}
+          as={hasCopied ? FiCheck : FiShare2}
+        />
+      }
+      category="released-contract"
+      label="copy-url"
+      onClick={onShareClick}
+    />
   );
 };
diff --git a/apps/dashboard/src/pages/publish/[...paths].tsx b/apps/dashboard/src/pages/publish/[...paths].tsx
index 7e36070cd00..7b9dfd89182 100644
--- a/apps/dashboard/src/pages/publish/[...paths].tsx
+++ b/apps/dashboard/src/pages/publish/[...paths].tsx
@@ -36,6 +36,7 @@ const PublishPage: ThirdwebNextPage = (props: PublishPageProps) => {
         author={props.author}
         contractName={props.contractName}
         version={props.version}
+        isDeploy={props.isDeploy}
       />
     </PublisherSDKContext>
   );
@@ -59,7 +60,17 @@ export default PublishPage;
 
 export const getStaticProps: GetStaticProps<PublishPageProps> = async (ctx) => {
   const paths = ctx.params?.paths as string[];
-  const [authorAddress, contractName, version = ""] = paths;
+  const [authorAddress, contractName, versionOrDeploy = "", deployStr] = paths;
+  let version = "";
+  let isDeploy = false;
+
+  if (versionOrDeploy === "deploy") {
+    isDeploy = true;
+    version = "";
+  } else if (versionOrDeploy && deployStr === "deploy") {
+    version = versionOrDeploy;
+    isDeploy = true;
+  }
 
   if (!contractName) {
     return {
@@ -133,6 +144,7 @@ export const getStaticProps: GetStaticProps<PublishPageProps> = async (ctx) => {
     author: checksummedAddress,
     contractName,
     version,
+    isDeploy,
   };
 
   return {