diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/sources/ContractSourcesPage.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/sources/ContractSourcesPage.tsx
index 4db8aad7ca5..13020d4b0b5 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/sources/ContractSourcesPage.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/sources/ContractSourcesPage.tsx
@@ -1,41 +1,36 @@
 "use client";
 
-import { Badge } from "@/components/ui/badge";
+import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { useResolveContractAbi } from "@3rdweb-sdk/react/hooks/useResolveContractAbi";
-import {
-  Divider,
-  Flex,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalHeader,
-  ModalOverlay,
-  Spinner,
-  useDisclosure,
-} from "@chakra-ui/react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { SourcesPanel } from "components/contract-components/shared/sources-panel";
 import { useContractSources } from "contract-ui/hooks/useContractSources";
-import { CircleCheckIcon, CircleXIcon } from "lucide-react";
-import { useMemo, useState } from "react";
+import {
+  CircleCheckIcon,
+  CircleXIcon,
+  RefreshCcwIcon,
+  ShieldCheckIcon,
+} from "lucide-react";
+import { useMemo } from "react";
 import { toast } from "sonner";
 import type { ThirdwebContract } from "thirdweb";
-import { Heading } from "tw-components";
 
-interface ContractSourcesPageProps {
-  contract: ThirdwebContract;
-}
-
-interface VerificationResult {
+type VerificationResult = {
   explorerUrl: string;
   success: boolean;
   alreadyVerified: boolean;
   error?: string;
-}
+};
 
 export async function verifyContract(contract: ThirdwebContract) {
   try {
@@ -63,111 +58,80 @@ export async function verifyContract(contract: ThirdwebContract) {
   }
 }
 
-interface ConnectorModalProps {
-  isOpen: boolean;
-  onClose: () => void;
+function VerifyContractModalContent({
+  contract,
+}: {
   contract: ThirdwebContract;
-}
-
-const VerifyContractModal: React.FC<
-  ConnectorModalProps & { resetSignal: number }
-> = ({ isOpen, onClose, contract, resetSignal }) => {
+}) {
   const verifyQuery = useQuery({
-    queryKey: [
-      "verify-contract",
-      contract.chain.id,
-      contract.address,
-      resetSignal,
-    ],
+    queryKey: ["verify-contract", contract.chain.id, contract.address],
     queryFn: () => verifyContract(contract),
-    enabled: isOpen,
   });
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} isCentered>
-      <ModalOverlay />
-      <ModalContent
-        className="!bg-background rounded-lg border border-border"
-        pb={2}
-        mx={{ base: 4, md: 0 }}
-      >
-        <ModalHeader>
-          <Flex gap={2} align="center">
-            <Heading size="subtitle.md">Contract Verification</Heading>
-            <Badge>beta</Badge>
-          </Flex>
-        </ModalHeader>
-        <ModalCloseButton mt={2} />
-        <Divider mb={4} />
-        <ModalBody py={4}>
-          <Flex flexDir="column">
-            {verifyQuery.isPending && (
-              <Flex gap={2} align="center">
-                <Spinner color="purple.500" size="sm" />
-                <Heading size="label.md">Verifying...</Heading>
-              </Flex>
-            )}
-            {verifyQuery?.error ? (
-              <Flex gap={2} align="center">
-                <CircleXIcon className="size-4 text-red-600" />
-                <Heading size="label.md">
-                  {verifyQuery?.error.toString()}
-                </Heading>
-              </Flex>
-            ) : null}
+    <div className="flex flex-col p-6">
+      {verifyQuery.isPending && (
+        <div className="flex min-h-24 items-center justify-center">
+          <div className="flex items-center gap-2">
+            <Spinner className="size-4" />
+            <p className="font-medium text-sm">Verifying</p>
+          </div>
+        </div>
+      )}
 
-            {verifyQuery.data?.results
-              ? verifyQuery.data?.results.map(
-                  (result: VerificationResult, index: number) => (
-                    // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                    <Flex key={index} gap={2} align="center" mb={4}>
-                      {result.success && (
-                        <>
-                          <CircleCheckIcon className="size-4 text-green-600" />
-                          {result.alreadyVerified && (
-                            <Heading size="label.md">
-                              {result.explorerUrl}: Already verified
-                            </Heading>
-                          )}
-                          {!result.alreadyVerified && (
-                            <Heading size="label.md">
-                              {result.explorerUrl}: Verification successful
-                            </Heading>
-                          )}
-                        </>
-                      )}
-                      {!result.success && (
-                        <>
-                          <CircleXIcon className="size-4 text-red-600" />
-                          <Heading size="label.md">
-                            {`${result.explorerUrl}: Verification failed`}
-                          </Heading>
-                        </>
-                      )}
-                    </Flex>
-                  ),
-                )
-              : null}
-          </Flex>
-        </ModalBody>
-      </ModalContent>
-    </Modal>
-  );
-};
-
-export const ContractSourcesPage: React.FC<ContractSourcesPageProps> = ({
-  contract,
-}) => {
-  const [resetSignal, setResetSignal] = useState(0);
+      {verifyQuery?.error ? (
+        <div className="flex min-h-24 items-center justify-center">
+          <div className="flex items-center gap-2">
+            <CircleXIcon className="size-4 text-red-600" />
+            <p className="font-medium text-sm">
+              {verifyQuery?.error.toString()}
+            </p>
+          </div>
+        </div>
+      ) : null}
 
-  const { isOpen, onOpen, onClose } = useDisclosure();
+      {verifyQuery.data?.results ? (
+        <div className="flex flex-col gap-2">
+          {verifyQuery.data.results.map(
+            (result: VerificationResult, index: number) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+              <div key={index} className="flex items-center gap-2">
+                {result.success && (
+                  <>
+                    <CircleCheckIcon className="size-4 text-green-600" />
+                    {result.alreadyVerified && (
+                      <p className="font-medium text-sm">
+                        {result.explorerUrl}: Already verified
+                      </p>
+                    )}
+                    {!result.alreadyVerified && (
+                      <p className="font-medium text-sm">
+                        {result.explorerUrl}: Verification successful
+                      </p>
+                    )}
+                  </>
+                )}
 
-  const handleClose = () => {
-    onClose();
-    // Increment to reset the query in the child component
-    setResetSignal((prev: number) => prev + 1);
-  };
+                {!result.success && (
+                  <>
+                    <CircleXIcon className="size-4 text-red-600" />
+                    <p className="font-medium text-sm">
+                      {`${result.explorerUrl}: Verification failed`}
+                    </p>
+                  </>
+                )}
+              </div>
+            ),
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}
 
+export function ContractSourcesPage({
+  contract,
+}: { contract: ThirdwebContract }) {
   const contractSourcesQuery = useContractSources(contract);
   const abiQuery = useResolveContractAbi(contract);
 
@@ -187,44 +151,49 @@ export const ContractSourcesPage: React.FC<ContractSourcesPageProps> = ({
       .reverse();
   }, [contractSourcesQuery.data]);
 
-  if (!contractSourcesQuery || contractSourcesQuery?.isPending) {
-    return (
-      <Flex direction="row" align="center" gap={2}>
-        <Spinner color="purple.500" size="xs" />
-        <Heading size="title.sm">Loading...</Heading>
-      </Flex>
-    );
+  if (!contractSourcesQuery || contractSourcesQuery.isPending) {
+    return <GenericLoadingPage />;
   }
 
   return (
-    <>
-      <VerifyContractModal
-        isOpen={isOpen}
-        onClose={() => handleClose()}
-        contract={contract}
-        resetSignal={resetSignal}
-      />
-
-      <Flex direction="column" gap={8}>
-        <Flex direction="row" alignItems="center" gap={2}>
-          <Heading size="title.sm" flex={1}>
-            Sources
-          </Heading>
+    <div>
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <div>
+          <h2 className="font-semibold text-2xl tracking-tight">Sources</h2>
+          <p className="text-muted-foreground text-sm">
+            View ABI and source code for the contract
+          </p>
+        </div>
+        <div className="flex items-center gap-3">
           <RefreshContractMetadataButton
             chainId={contract.chain.id}
             contractAddress={contract.address}
           />
-          <Button variant="primary" onClick={onOpen}>
-            Verify contract
-          </Button>
-        </Flex>
-        <Card>
-          <SourcesPanel sources={sources} abi={abiQuery.data} />
-        </Card>
-      </Flex>
-    </>
+
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button className="gap-2" size="sm">
+                <ShieldCheckIcon className="size-4" />
+                Verify contract
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="gap-0 overflow-hidden p-0">
+              <DialogHeader className="border-b p-6">
+                <DialogTitle>Verify Contract</DialogTitle>
+              </DialogHeader>
+              <VerifyContractModalContent contract={contract} />
+            </DialogContent>
+          </Dialog>
+        </div>
+      </div>
+
+      <div className="h-4" />
+      <div className="rounded-lg border bg-card">
+        <SourcesPanel sources={sources} abi={abiQuery.data} />
+      </div>
+    </div>
   );
-};
+}
 
 function RefreshContractMetadataButton(props: {
   chainId: number;
@@ -270,14 +239,19 @@ function RefreshContractMetadataButton(props: {
       onClick={() => {
         toast.promise(contractCacheMutation.mutateAsync(), {
           duration: 5000,
-          loading: "Refreshing contract data...",
-          success: () => "Contract data refreshed!",
+          success: () => "Contract refreshed successfully",
           error: (e) => e?.message || "Failed to refresh contract data.",
         });
       }}
-      className="w-[182px]"
+      size="sm"
+      className="gap-2 bg-card"
     >
-      {contractCacheMutation.isPending ? <Spinner /> : "Refresh Contract Data"}
+      {contractCacheMutation.isPending ? (
+        <Spinner className="size-4" />
+      ) : (
+        <RefreshCcwIcon className="size-4" />
+      )}
+      Refresh Contract <span className="max-sm:hidden"> Data </span>
     </Button>
   );
 }
diff --git a/apps/dashboard/src/components/contract-components/shared/sources-accordion.tsx b/apps/dashboard/src/components/contract-components/shared/sources-accordion.tsx
index bd5bcab863c..123dc6eec4e 100644
--- a/apps/dashboard/src/components/contract-components/shared/sources-accordion.tsx
+++ b/apps/dashboard/src/components/contract-components/shared/sources-accordion.tsx
@@ -1,74 +1,64 @@
-import { CodeClient } from "@/components/ui/code/code.client";
 import {
   Accordion,
-  AccordionButton,
-  AccordionIcon,
+  AccordionContent,
   AccordionItem,
-  AccordionPanel,
-} from "@chakra-ui/react";
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { CodeClient } from "@/components/ui/code/code.client";
 import type { Abi } from "abitype";
 import type { SourceFile } from "../types";
 
-interface SourcesAccordionProps {
-  sources: SourceFile[];
-  abi?: Abi;
-}
-
-export const SourcesAccordion: React.FC<SourcesAccordionProps> = ({
+export function SourcesAccordion({
   sources,
   abi,
-}) => {
+}: { sources: SourceFile[]; abi?: Abi }) {
+  console.log({ sources });
   return (
-    <Accordion allowMultiple defaultIndex={[]}>
-      {/* ABI Accordion is put at the top for better UX */}
+    <Accordion type="multiple" className="w-full">
       {abi && (
-        <AccordionItem
-          gap={4}
-          flexDirection="column"
-          borderColor="borderColor"
-          _first={{ borderTopWidth: 0 }}
-          _last={{ borderBottomWidth: 0 }}
-        >
-          {({ isExpanded }) => (
-            <>
-              <AccordionButton justifyContent="space-between" py={2}>
-                <p className="font-semibold">ABI</p>
-                <AccordionIcon />
-              </AccordionButton>
-              <AccordionPanel>
-                {isExpanded && (
-                  <CodeClient code={JSON.stringify(abi, null, 2)} lang="json" />
-                )}
-              </AccordionPanel>
-            </>
-          )}
-        </AccordionItem>
+        <SourceAccordionItem
+          filename="ABI"
+          code={JSON.stringify(abi, null, 2)}
+          accordionId="abi"
+          lang="json"
+        />
       )}
+
       {sources.map((signature, i) => (
-        <AccordionItem
-          gap={4}
-          flexDirection="column"
-          // biome-ignore lint/suspicious/noArrayIndexKey: static list
-          key={i}
-          borderColor="borderColor"
-          _first={{ borderTopWidth: 0 }}
-          _last={{ borderBottomWidth: 0 }}
-        >
-          {({ isExpanded }) => (
-            <>
-              <AccordionButton justifyContent="space-between" py={2}>
-                <p className="font-semibold">{signature.filename}</p>
-                <AccordionIcon />
-              </AccordionButton>
-              <AccordionPanel>
-                {isExpanded && (
-                  <CodeClient code={signature.source.trim()} lang="solidity" />
-                )}
-              </AccordionPanel>
-            </>
-          )}
-        </AccordionItem>
+        <SourceAccordionItem
+          key={signature.filename}
+          filename={signature.filename || "Unknown"}
+          code={signature.source.trim()}
+          accordionId={`acc-${i}`}
+          lang="solidity"
+        />
       ))}
     </Accordion>
   );
-};
+}
+
+function SourceAccordionItem(props: {
+  filename: string;
+  code: string;
+  accordionId: string;
+  lang: "solidity" | "json";
+}) {
+  return (
+    <AccordionItem
+      value={props.accordionId}
+      className="first:border-t-0 last:border-b-0"
+    >
+      <AccordionTrigger className="flex justify-between px-4 py-3 font-mono text-sm">
+        {props.filename}
+      </AccordionTrigger>
+      <AccordionContent className="border-t p-0">
+        <CodeClient
+          code={props.code}
+          lang={props.lang}
+          scrollableClassName="max-h-[600px]"
+          className="rounded-none border-none"
+        />
+      </AccordionContent>
+    </AccordionItem>
+  );
+}
diff --git a/apps/dashboard/src/components/contract-components/shared/sources-panel.tsx b/apps/dashboard/src/components/contract-components/shared/sources-panel.tsx
index b2c1a3ffb54..64b903e0d82 100644
--- a/apps/dashboard/src/components/contract-components/shared/sources-panel.tsx
+++ b/apps/dashboard/src/components/contract-components/shared/sources-panel.tsx
@@ -1,5 +1,5 @@
+import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import type { Abi } from "abitype";
-import { Link, Text } from "tw-components";
 import type { SourceFile } from "../types";
 import { SourcesAccordion } from "./sources-accordion";
 
@@ -15,16 +15,15 @@ export const SourcesPanel: React.FC<SourcesPanelProps> = ({ sources, abi }) => {
         {sources && sources?.length > 0 ? (
           <SourcesAccordion sources={sources} abi={abi} />
         ) : (
-          <Text>
+          <p className="text-muted-foreground text-sm">
             Contract source code not available. Try deploying with{" "}
-            <Link
+            <UnderlineLink
               href="https://portal.thirdweb.com/contracts/deploy/overview"
-              isExternal
-              color="primary.500"
+              target="_blank"
             >
               thirdweb CLI v0.5+
-            </Link>
-          </Text>
+            </UnderlineLink>
+          </p>
         )}
       </div>
     </div>