From 6f381d768c52006ecd3eab285733b0fe4f8e1cdb Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Fri, 14 Feb 2025 01:41:11 +0000
Subject: [PATCH] [TOOL-3378] Dashboard: Add Contract to Project UI updates
 (#6233)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on refactoring and improving the structure of the dashboard application by removing obsolete files, enhancing component functionality, and updating UI elements for better user experience.

### Detailed summary
- Deleted several unused files related to contract management.
- Updated `className` properties for better styling consistency.
- Added `accountAddress` prop to various components for enhanced functionality.
- Introduced new hooks and functions for managing project contracts.
- Improved error handling in contract import functionality.
- Enhanced UI components for better responsiveness and clarity.

> The following files were skipped due to too many changes: `apps/dashboard/src/components/contract-components/tables/cells.tsx`, `apps/dashboard/src/components/contract-components/contract-deploy-form/add-to-project-card.tsx`, `apps/dashboard/src/components/smart-wallets/AccountFactories/index.tsx`, `apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/primary-dashboard-button.tsx`, `apps/dashboard/src/components/contract-components/tables/contract-table.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../blocks/DangerSettingCard.stories.tsx      |   2 +-
 .../src/@/components/ui/UnderlineLink.tsx     |  16 +
 apps/dashboard/src/@/lib/DashboardRouter.tsx  |   2 +-
 .../hooks/useDashboardContractMetadata.tsx    |   1 +
 .../@3rdweb-sdk/react/hooks/useRegistry.ts    | 149 -------
 .../_layout/contract-page-layout.client.tsx   |   5 +-
 .../_layout/contract-page-layout.tsx          |   9 +-
 .../_layout/primary-dashboard-button.tsx      | 270 +++++++++----
 .../[chain_id]/[contractAddress]/layout.tsx   |  40 ++
 .../profile/[addressOrEns]/ProfileUI.tsx      |  28 --
 .../components/uri-based-deploy.tsx           |  39 +-
 .../app/account/components/AccountHeader.tsx  |   2 +
 .../components/AccountHeaderUI.stories.tsx    |  13 +-
 .../account/components/AccountHeaderUI.tsx    |   5 +-
 .../contracts/DeployedContractsPageHeader.tsx |  56 +--
 .../_components/DeployedContractsPage.tsx     |  45 ++-
 .../_components/DeployedContractsTable.tsx    |  17 -
 .../GetStartedWithContractsDeploy.tsx         |  18 +-
 .../_components/getProjectContracts.ts        |  38 ++
 .../getSortedDeployedContracts.tsx            |  30 +-
 .../src/app/account/contracts/layout.tsx      |  26 --
 .../src/app/account/contracts/page.tsx        |  13 -
 .../published/PublishedContractsPage.tsx      |  81 ----
 .../app/account/contracts/published/page.tsx  |  13 -
 apps/dashboard/src/app/account/layout.tsx     |  22 +-
 .../Header/SecondaryNav/SecondaryNav.tsx      |   4 +-
 .../SecondaryNav/account-button.client.tsx    |  18 +-
 .../app/components/MobileBurgerMenuButton.tsx |  19 +-
 apps/dashboard/src/app/layout.tsx             |   8 +-
 .../app/team/[team_slug]/(team)/layout.tsx    |  22 +-
 .../[team_slug]/(team)/~/contracts/layout.tsx |  28 --
 .../[team_slug]/(team)/~/contracts/page.tsx   |  18 -
 .../(team)/~/contracts/published/page.tsx     |  16 -
 .../overview/components/engine-overview.tsx   |   7 +-
 .../account-abstraction/factories/page.tsx    | 145 ++++++-
 .../[project_slug]/contracts/layout.tsx       |  28 --
 .../[project_slug]/contracts/page.tsx         |  34 +-
 .../contracts/published/page.tsx              |  16 -
 .../[project_slug]/hooks/project-contracts.ts |  64 +++
 .../[team_slug]/[project_slug]/layout.tsx     |   7 +-
 .../TeamHeader/TeamHeaderUI.stories.tsx       |  18 +-
 .../components/TeamHeader/TeamHeaderUI.tsx    |   5 +-
 .../team-header-logged-in.client.tsx          |   2 +
 .../components/TeamHeader/team-header.tsx     |  16 +-
 .../add-to-project-card.stories.tsx           | 100 +++++
 .../add-to-project-card.tsx                   | 219 ++++++++++
 .../contract-deploy-form/common.tsx           |  20 +-
 .../contract-deploy-form/custom-contract.tsx  | 103 ++---
 .../deploy-context-modal.tsx                  |  26 +-
 .../import-contract/modal.tsx                 |  99 +++--
 .../publisher/publisher-header.tsx            |   2 +-
 .../contract-components/tables/cells.tsx      | 211 +++++-----
 .../tables/contract-table.stories.tsx         | 123 ++++++
 .../tables/contract-table.tsx                 | 339 ++++++++++++++++
 .../tables/deployed-contracts.tsx             | 380 ------------------
 .../components/contract-components/utils.ts   |  47 ---
 .../components/notices/AnnouncementBanner.tsx |  34 +-
 .../selects/NetworkSelectDropdown.tsx         |   6 +-
 .../AccountFactories/account-cell.tsx         |  39 +-
 .../AccountFactories/factory-contracts.tsx    | 101 ++---
 .../smart-wallets/AccountFactories/index.tsx  | 206 +++-------
 apps/dashboard/src/constants/contracts.ts     |  10 -
 apps/dashboard/src/contract-ui/types/types.ts |   4 -
 .../common/read/getAllMultichainRegistry.ts   |  79 ----
 64 files changed, 1883 insertions(+), 1680 deletions(-)
 create mode 100644 apps/dashboard/src/@/components/ui/UnderlineLink.tsx
 delete mode 100644 apps/dashboard/src/@3rdweb-sdk/react/hooks/useRegistry.ts
 delete mode 100644 apps/dashboard/src/app/account/contracts/_components/DeployedContractsTable.tsx
 create mode 100644 apps/dashboard/src/app/account/contracts/_components/getProjectContracts.ts
 delete mode 100644 apps/dashboard/src/app/account/contracts/layout.tsx
 delete mode 100644 apps/dashboard/src/app/account/contracts/page.tsx
 delete mode 100644 apps/dashboard/src/app/account/contracts/published/PublishedContractsPage.tsx
 delete mode 100644 apps/dashboard/src/app/account/contracts/published/page.tsx
 delete mode 100644 apps/dashboard/src/app/team/[team_slug]/(team)/~/contracts/layout.tsx
 delete mode 100644 apps/dashboard/src/app/team/[team_slug]/(team)/~/contracts/page.tsx
 delete mode 100644 apps/dashboard/src/app/team/[team_slug]/(team)/~/contracts/published/page.tsx
 delete mode 100644 apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/layout.tsx
 delete mode 100644 apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/published/page.tsx
 create mode 100644 apps/dashboard/src/app/team/[team_slug]/[project_slug]/hooks/project-contracts.ts
 create mode 100644 apps/dashboard/src/components/contract-components/contract-deploy-form/add-to-project-card.stories.tsx
 create mode 100644 apps/dashboard/src/components/contract-components/contract-deploy-form/add-to-project-card.tsx
 create mode 100644 apps/dashboard/src/components/contract-components/tables/contract-table.stories.tsx
 create mode 100644 apps/dashboard/src/components/contract-components/tables/contract-table.tsx
 delete mode 100644 apps/dashboard/src/components/contract-components/tables/deployed-contracts.tsx
 delete mode 100644 apps/dashboard/src/components/contract-components/utils.ts
 delete mode 100644 apps/dashboard/src/contract-ui/types/types.ts
 delete mode 100644 apps/dashboard/src/dashboard-extensions/common/read/getAllMultichainRegistry.ts

diff --git a/apps/dashboard/src/@/components/blocks/DangerSettingCard.stories.tsx b/apps/dashboard/src/@/components/blocks/DangerSettingCard.stories.tsx
index 5db6a5eb906..8498dfb2bb9 100644
--- a/apps/dashboard/src/@/components/blocks/DangerSettingCard.stories.tsx
+++ b/apps/dashboard/src/@/components/blocks/DangerSettingCard.stories.tsx
@@ -28,7 +28,7 @@ export const Mobile: Story = {
 
 function Story() {
   return (
-    <div className="container flex max-w-[1000px] flex-col gap-8 lg:p-10">
+    <div className="container flex max-w-[1000px] flex-col gap-8 py-10">
       <BadgeContainer label="Base">
         <DangerSettingCard
           title="This is a title"
diff --git a/apps/dashboard/src/@/components/ui/UnderlineLink.tsx b/apps/dashboard/src/@/components/ui/UnderlineLink.tsx
new file mode 100644
index 00000000000..f2c5a5d305b
--- /dev/null
+++ b/apps/dashboard/src/@/components/ui/UnderlineLink.tsx
@@ -0,0 +1,16 @@
+import Link from "next/link";
+import { cn } from "../../lib/utils";
+
+type LinkProps = React.ComponentProps<typeof Link>;
+
+export function UnderlineLink(props: LinkProps) {
+  return (
+    <Link
+      {...props}
+      className={cn(
+        "underline decoration-muted-foreground/50 decoration-dotted underline-offset-[5px] hover:text-foreground hover:decoration-foreground hover:decoration-solid",
+        props.className,
+      )}
+    />
+  );
+}
diff --git a/apps/dashboard/src/@/lib/DashboardRouter.tsx b/apps/dashboard/src/@/lib/DashboardRouter.tsx
index ac1fc432666..971a02def37 100644
--- a/apps/dashboard/src/@/lib/DashboardRouter.tsx
+++ b/apps/dashboard/src/@/lib/DashboardRouter.tsx
@@ -117,7 +117,7 @@ function DashboardRouterTopProgressBarInner() {
   const width = isLoading ? progress : 100;
   return (
     <span
-      className="fixed top-0 block h-[2px] bg-blue-500"
+      className="fixed top-0 block h-[3px] bg-foreground"
       style={{
         opacity: isLoading ? "100" : "0",
         width: `${width}%`,
diff --git a/apps/dashboard/src/@3rdweb-sdk/react/hooks/useDashboardContractMetadata.tsx b/apps/dashboard/src/@3rdweb-sdk/react/hooks/useDashboardContractMetadata.tsx
index 6f405b7e3d1..22b222255d4 100644
--- a/apps/dashboard/src/@3rdweb-sdk/react/hooks/useDashboardContractMetadata.tsx
+++ b/apps/dashboard/src/@3rdweb-sdk/react/hooks/useDashboardContractMetadata.tsx
@@ -15,6 +15,7 @@ export function useDashboardContractMetadata(contract: ThirdwebContract) {
   return useQuery({
     queryKey: ["contract-metadata-header", contract.chain.id, contract.address],
     queryFn: () => fetchDashboardContractMetadata(contract),
+    refetchOnWindowFocus: false,
   });
 }
 
diff --git a/apps/dashboard/src/@3rdweb-sdk/react/hooks/useRegistry.ts b/apps/dashboard/src/@3rdweb-sdk/react/hooks/useRegistry.ts
deleted file mode 100644
index c1b3f7636bd..00000000000
--- a/apps/dashboard/src/@3rdweb-sdk/react/hooks/useRegistry.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { addContractToMultiChainRegistry } from "components/contract-components/utils";
-import { MULTICHAIN_REGISTRY_CONTRACT } from "constants/contracts";
-import {
-  DASHBOARD_ENGINE_RELAYER_URL,
-  DASHBOARD_FORWARDER_ADDRESS,
-} from "constants/misc";
-import type { BasicContract } from "contract-ui/types/types";
-import { getAllMultichainRegistry } from "dashboard-extensions/common/read/getAllMultichainRegistry";
-import { useAllChainsData } from "hooks/chains/allChains";
-import { useMemo } from "react";
-import { sendAndConfirmTransaction } from "thirdweb";
-import { remove } from "thirdweb/extensions/thirdweb";
-import { useActiveAccount } from "thirdweb/react";
-import invariant from "tiny-invariant";
-
-export function useMultiChainRegContractList(walletAddress?: string) {
-  return useQuery({
-    queryKey: ["dashboard-registry", walletAddress, "multichain-contract-list"],
-    queryFn: async () => {
-      invariant(walletAddress, "walletAddress is required");
-      const contracts = await getAllMultichainRegistry({
-        contract: MULTICHAIN_REGISTRY_CONTRACT,
-        address: walletAddress,
-      });
-
-      return contracts;
-    },
-
-    enabled: !!walletAddress,
-  });
-}
-
-interface Options {
-  onlyMainnet?: boolean;
-}
-
-export const useAllContractList = (
-  walletAddress: string | undefined,
-  { onlyMainnet }: Options = { onlyMainnet: false },
-) => {
-  const multiChainQuery = useMultiChainRegContractList(walletAddress);
-
-  // TODO - instead of using ALL chains, fetch only the ones used here
-  const { idToChain } = useAllChainsData();
-  const contractList = useMemo(() => {
-    const data = multiChainQuery.data || [];
-
-    const mainnets: BasicContract[] = [];
-    const testnets: BasicContract[] = [];
-
-    // biome-ignore lint/complexity/noForEach: FIXME
-    data.forEach((net) => {
-      const chn = idToChain.get(net.chainId);
-      if (chn && chn.status !== "deprecated") {
-        if (chn.testnet) {
-          testnets.push(net);
-        } else {
-          mainnets.push(net);
-        }
-      }
-    });
-
-    mainnets.sort((a, b) => a.chainId - b.chainId);
-
-    if (onlyMainnet) {
-      return mainnets;
-    }
-
-    testnets.sort((a, b) => a.chainId - b.chainId);
-    return mainnets.concat(testnets);
-  }, [multiChainQuery.data, onlyMainnet, idToChain]);
-
-  return {
-    ...multiChainQuery,
-    data: contractList,
-  };
-};
-
-type RemoveContractParams = {
-  contractAddress: string;
-  chainId: number;
-};
-
-export function useRemoveContractMutation() {
-  const queryClient = useQueryClient();
-  const account = useActiveAccount();
-  return useMutation({
-    mutationFn: async (data: RemoveContractParams) => {
-      invariant(data.chainId, "chainId not provided");
-      invariant(account, "No wallet connected");
-      const { contractAddress, chainId } = data;
-      const transaction = remove({
-        contract: MULTICHAIN_REGISTRY_CONTRACT,
-        deployer: account.address,
-        deployment: contractAddress,
-        chainId: BigInt(chainId),
-      });
-      return await sendAndConfirmTransaction({
-        transaction,
-        account,
-        gasless: {
-          experimentalChainlessSupport: true,
-          provider: "engine",
-          relayerUrl: DASHBOARD_ENGINE_RELAYER_URL,
-          relayerForwarderAddress: DASHBOARD_FORWARDER_ADDRESS,
-        },
-      });
-    },
-
-    onSettled: () => {
-      return queryClient.invalidateQueries({
-        queryKey: ["dashboard-registry"],
-      });
-    },
-  });
-}
-
-type AddContractParams = {
-  contractAddress: string;
-  chainId: number;
-};
-
-export function useAddContractMutation() {
-  const account = useActiveAccount();
-
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: async (data: AddContractParams) => {
-      invariant(account, "cannot add a contract without an address");
-
-      return await addContractToMultiChainRegistry(
-        {
-          address: data.contractAddress,
-          chainId: data.chainId,
-        },
-        account,
-        300000n,
-      );
-    },
-
-    onSettled: () => {
-      return queryClient.invalidateQueries({
-        queryKey: ["dashboard-registry"],
-      });
-    },
-  });
-}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.client.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.client.tsx
index 23f5d0226b7..41b70324b3d 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.client.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.client.tsx
@@ -1,8 +1,9 @@
 "use client";
 
 import { useQuery } from "@tanstack/react-query";
-import type { ThirdwebContract } from "thirdweb";
+import type { ThirdwebClient, ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
+import type { MinimalTeamsAndProjects } from "../../../../../../components/contract-components/contract-deploy-form/add-to-project-card";
 import { ErrorPage, LoadingPage } from "../_components/page-skeletons";
 import { useContractPageMetadata } from "../_hooks/useContractPageMetadata";
 import { getContractPageSidebarLinks } from "../_utils/getContractPageSidebarLinks";
@@ -13,6 +14,8 @@ export function ContractPageLayoutClient(props: {
   chainMetadata: ChainMetadata;
   contract: ThirdwebContract;
   children: React.ReactNode;
+  teamsAndProjects: MinimalTeamsAndProjects | undefined;
+  client: ThirdwebClient;
 }) {
   const metadataQuery = useContractPageMetadata(props.contract);
   const headerMetadataQuery = useQuery({
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx
index 10565dcf70c..ef2a5b942f8 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx
@@ -3,8 +3,9 @@ import type { SidebarLink } from "@/components/blocks/Sidebar";
 import { SidebarLayout } from "@/components/blocks/SidebarLayout";
 import type { DashboardContractMetadata } from "@3rdweb-sdk/react/hooks/useDashboardContractMetadata";
 import { DeprecatedAlert } from "components/shared/DeprecatedAlert";
-import type { ThirdwebContract } from "thirdweb";
+import type { ThirdwebClient, ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
+import type { MinimalTeamsAndProjects } from "../../../../../../components/contract-components/contract-deploy-form/add-to-project-card";
 import { ContractMetadata } from "./contract-metadata";
 import { PrimaryDashboardButton } from "./primary-dashboard-button";
 
@@ -14,6 +15,8 @@ export function ContractPageLayout(props: {
   children: React.ReactNode;
   sidebarLinks: SidebarLink[];
   dashboardContractMetadata: DashboardContractMetadata | undefined;
+  client: ThirdwebClient;
+  teamsAndProjects: MinimalTeamsAndProjects | undefined;
   externalLinks:
     | {
         name: string;
@@ -27,6 +30,8 @@ export function ContractPageLayout(props: {
     sidebarLinks,
     dashboardContractMetadata,
     externalLinks,
+    teamsAndProjects,
+    client,
   } = props;
 
   return (
@@ -49,6 +54,8 @@ export function ContractPageLayout(props: {
                   chainSlug: chainMetadata.slug,
                   contractAddress: contract.address,
                 }}
+                teamsAndProjects={teamsAndProjects}
+                client={client}
               />
             </div>
             <DeprecatedAlert chain={chainMetadata} />
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/primary-dashboard-button.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/primary-dashboard-button.tsx
index fd8cbcec2f4..b83588d0dcf 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/primary-dashboard-button.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/primary-dashboard-button.tsx
@@ -1,19 +1,31 @@
 "use client";
 
 import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { UnderlineLink } from "@/components/ui/UnderlineLink";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
-import type { EVMContractInfo } from "@3rdweb-sdk/react";
 import {
-  useAddContractMutation,
-  useAllContractList,
-} from "@3rdweb-sdk/react/hooks/useRegistry";
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import type { EVMContractInfo } from "@3rdweb-sdk/react";
 import { useTrack } from "hooks/analytics/useTrack";
-import { useTxNotifications } from "hooks/useTxNotifications";
 import { CodeIcon, PlusIcon } from "lucide-react";
+import { CircleAlertIcon, ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import type { Chain } from "thirdweb";
-import { useActiveAccount } from "thirdweb/react";
+import { useState } from "react";
+import { toast } from "sonner";
+import type { Chain, ThirdwebClient } from "thirdweb";
+import {
+  AddToProjectSelector,
+  type MinimalTeamsAndProjects,
+} from "../../../../../../components/contract-components/contract-deploy-form/add-to-project-card";
+import { useAddContractToProject } from "../../../../../team/[team_slug]/[project_slug]/hooks/project-contracts";
 
 const TRACKING_CATEGORY = "add_to_dashboard_upsell";
 
@@ -22,6 +34,8 @@ type AddToDashboardCardProps = {
   chain: Chain;
   contractInfo: EVMContractInfo;
   hideCodePageLink?: boolean;
+  teamsAndProjects: MinimalTeamsAndProjects | undefined;
+  client: ThirdwebClient;
 };
 
 export const PrimaryDashboardButton: React.FC<AddToDashboardCardProps> = ({
@@ -29,40 +43,13 @@ export const PrimaryDashboardButton: React.FC<AddToDashboardCardProps> = ({
   chain,
   contractInfo,
   hideCodePageLink,
+  teamsAndProjects,
+  client,
 }) => {
-  const addContract = useAddContractMutation();
-  const trackEvent = useTrack();
-  const walletAddress = useActiveAccount()?.address;
   const pathname = usePathname();
-  const registry = useAllContractList(walletAddress);
 
-  const { onSuccess: onAddSuccess, onError: onAddError } = useTxNotifications(
-    "Successfully imported",
-    "Failed to import",
-  );
-
-  const isInRegistry =
-    registry.isFetched &&
-    registry.data?.find(
-      (c) =>
-        contractAddress &&
-        // compare address...
-        c.address.toLowerCase() === contractAddress.toLowerCase() &&
-        // ... and chainId
-        c.chainId === chain.id,
-    ) &&
-    registry.isSuccess;
-
-  if (
-    !walletAddress ||
-    !contractAddress ||
-    !chain ||
-    pathname?.includes("payments")
-  ) {
-    return null;
-  }
-
-  if (isInRegistry) {
+  // if user is not logged in
+  if (!teamsAndProjects) {
     if (hideCodePageLink) {
       return null;
     }
@@ -84,54 +71,163 @@ export const PrimaryDashboardButton: React.FC<AddToDashboardCardProps> = ({
   }
 
   return (
-    <Button
-      className="gap-2"
-      variant="outline"
-      onClick={() => {
-        if (!chain) {
-          return;
-        }
-        trackEvent({
-          category: TRACKING_CATEGORY,
-          action: "add-to-dashboard",
-          label: "attempt",
-          contractAddress,
-        });
-        addContract.mutate(
-          {
-            contractAddress,
-            chainId: chain.id,
-          },
-          {
-            onSuccess: () => {
-              onAddSuccess();
-              trackEvent({
-                category: TRACKING_CATEGORY,
-                action: "add-to-dashboard",
-                label: "success",
-                contractAddress,
-              });
-            },
-            onError: (err) => {
-              onAddError(err);
-              trackEvent({
-                category: TRACKING_CATEGORY,
-                action: "add-to-dashboard",
-                label: "error",
-                contractAddress,
-                error: err,
-              });
-            },
-          },
-        );
-      }}
-    >
-      {addContract.isPending ? (
-        <Spinner className="size-4" />
-      ) : (
-        <PlusIcon className="size-4" />
-      )}
-      Import contract
-    </Button>
+    <AddToProjectButton
+      contractAddress={contractAddress}
+      teamsAndProjects={teamsAndProjects}
+      chainId={chain.id.toString()}
+      client={client}
+    />
   );
 };
+
+function AddToProjectButton(props: {
+  contractAddress: string;
+  teamsAndProjects: MinimalTeamsAndProjects;
+  chainId: string;
+  client: ThirdwebClient;
+}) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button className="gap-2" variant="outline">
+          <PlusIcon className="size-4" />
+          Add To Project
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent className="gap-0 overflow-hidden p-0">
+        <DialogHeader className="p-6">
+          <DialogTitle>Add To Project</DialogTitle>
+          <DialogDescription>
+            Add the contract in a project's contract list on dashboard
+          </DialogDescription>
+        </DialogHeader>
+        <AddToProjectModalContent
+          teamsAndProjects={props.teamsAndProjects}
+          chainId={props.chainId}
+          contractAddress={props.contractAddress}
+          client={props.client}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function AddToProjectModalContent(props: {
+  teamsAndProjects: MinimalTeamsAndProjects;
+  chainId: string;
+  contractAddress: string;
+  client: ThirdwebClient;
+}) {
+  const trackEvent = useTrack();
+  const addContractToProject = useAddContractToProject();
+
+  const [importSelection, setImportSelection] = useState({
+    team: props.teamsAndProjects[0]?.team,
+    project: props.teamsAndProjects[0]?.projects[0],
+  });
+
+  const selectedTeam = props.teamsAndProjects.find(
+    (t) => t.team.id === importSelection.team?.id,
+  );
+
+  function handleImport(params: {
+    teamId: string;
+    projectId: string;
+  }) {
+    trackEvent({
+      category: TRACKING_CATEGORY,
+      action: "add-to-dashboard",
+      label: "attempt",
+      contractAddress: props.contractAddress,
+    });
+    addContractToProject.mutate(
+      {
+        contractAddress: props.contractAddress,
+        teamId: params.teamId,
+        projectId: params.projectId,
+        chainId: props.chainId,
+      },
+      {
+        onSuccess: () => {
+          toast.success("Contract added to the project successfully");
+          trackEvent({
+            category: TRACKING_CATEGORY,
+            action: "add-to-dashboard",
+            label: "success",
+            contractAddress: props.contractAddress,
+          });
+        },
+        onError: (err) => {
+          if (err.message.includes("PROJECT_CONTRACT_ALREADY_EXISTS")) {
+            toast.error("Contract is already added to the project");
+          } else {
+            toast.error("Failed to import contract");
+          }
+          trackEvent({
+            category: TRACKING_CATEGORY,
+            action: "add-to-dashboard",
+            label: "error",
+            contractAddress: props.contractAddress,
+            error: err,
+          });
+        },
+      },
+    );
+  }
+
+  const isImportEnabled = !!importSelection.project && !!importSelection.team;
+
+  return (
+    <div>
+      <div className="flex flex-col gap-4 border-border border-t px-6 py-6">
+        <AddToProjectSelector
+          selection={importSelection}
+          onSelectionChange={setImportSelection}
+          teamsAndProjects={props.teamsAndProjects}
+          client={props.client}
+        />
+
+        {/* No projects alert */}
+        {selectedTeam?.projects.length === 0 && (
+          <Alert variant="info">
+            <CircleAlertIcon className="size-5" />
+            <AlertTitle> Selected team has no projects </AlertTitle>
+            <AlertDescription>
+              <UnderlineLink
+                href={`/team/${selectedTeam.team.slug}`}
+                className="inline-flex items-center gap-2"
+                target="_blank"
+              >
+                Create Project <ExternalLinkIcon className="size-3.5" />
+              </UnderlineLink>
+            </AlertDescription>
+          </Alert>
+        )}
+      </div>
+      <div className="mt-3 flex justify-end border-border border-t bg-card p-6">
+        <Button
+          disabled={!isImportEnabled}
+          className="gap-2"
+          onClick={() => {
+            if (!importSelection.team || !importSelection.project) {
+              return;
+            }
+
+            handleImport({
+              teamId: importSelection.team.id,
+              projectId: importSelection.project.id,
+            });
+          }}
+        >
+          {addContractToProject.isPending ? (
+            <Spinner className="size-4" />
+          ) : (
+            <PlusIcon className="size-4" />
+          )}
+          Add to Project
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/layout.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/layout.tsx
index 97c9ee710b3..60a7edc66ca 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/layout.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/layout.tsx
@@ -1,8 +1,12 @@
+import { getProjects } from "@/api/projects";
+import { getTeams } from "@/api/team";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { localhost } from "thirdweb/chains";
 import { getContractMetadata } from "thirdweb/extensions/common";
 import { isAddress, isContractDeployed } from "thirdweb/utils";
+import type { MinimalTeamsAndProjects } from "../../../../../components/contract-components/contract-deploy-form/add-to-project-card";
 import { resolveFunctionSelectors } from "../../../../../lib/selectors";
 import { shortenIfAddress } from "../../../../../utils/usedapp-external";
 import { ConfigureCustomChain } from "./_layout/ConfigureCustomChain";
@@ -38,11 +42,16 @@ export default async function Layout(props: {
     notFound();
   }
 
+  const client = getThirdwebClient();
+  const teamsAndProjects = await getTeamsAndProjectsIfLoggedIn();
+
   if (contract.chain.id === localhost.id) {
     return (
       <ContractPageLayoutClient
         chainMetadata={chainMetadata}
         contract={contract}
+        teamsAndProjects={teamsAndProjects}
+        client={client}
       >
         {props.children}
       </ContractPageLayoutClient>
@@ -73,12 +82,43 @@ export default async function Layout(props: {
       sidebarLinks={sidebarLinks}
       dashboardContractMetadata={contractMetadata}
       externalLinks={externalLinks}
+      teamsAndProjects={teamsAndProjects}
+      client={client}
     >
       {props.children}
     </ContractPageLayout>
   );
 }
 
+async function getTeamsAndProjectsIfLoggedIn() {
+  try {
+    const teams = await getTeams();
+
+    if (!teams) {
+      return undefined;
+    }
+
+    const teamsAndProjects: MinimalTeamsAndProjects = await Promise.all(
+      teams.map(async (team) => ({
+        team: {
+          id: team.id,
+          name: team.name,
+          slug: team.slug,
+          image: team.image,
+        },
+        projects: (await getProjects(team.slug)).map((x) => ({
+          id: x.id,
+          name: x.name,
+        })),
+      })),
+    );
+
+    return teamsAndProjects;
+  } catch {
+    return undefined;
+  }
+}
+
 export async function generateMetadata(props: {
   params: Promise<{
     contractAddress: string;
diff --git a/apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/ProfileUI.tsx b/apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/ProfileUI.tsx
index e76688122de..ae14e98da8b 100644
--- a/apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/ProfileUI.tsx
+++ b/apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/ProfileUI.tsx
@@ -1,8 +1,6 @@
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { fetchPublishedContracts } from "components/contract-components/fetchPublishedContracts";
-import { DeployedContracts } from "components/contract-components/tables/deployed-contracts";
 import { Suspense } from "react";
-import { getSortedDeployedContracts } from "../../../account/contracts/_components/getSortedDeployedContracts";
 import { ProfileHeader } from "./components/profile-header";
 import { PublishedContracts } from "./components/published-contracts";
 
@@ -32,36 +30,10 @@ export function ProfileUI(props: {
       </div>
 
       <div className="h-12" />
-
-      <div>
-        <h2 className="font-semibold text-2xl tracking-tight">
-          Deployed contracts
-        </h2>
-
-        <p className="text-muted-foreground">
-          List of contracts deployed across all Mainnets
-        </p>
-
-        <div className="h-4" />
-        <Suspense fallback={<LoadingSection />}>
-          <AsyncDeployedContracts profileAddress={profileAddress} />
-        </Suspense>
-      </div>
     </div>
   );
 }
 
-async function AsyncDeployedContracts(props: {
-  profileAddress: string;
-}) {
-  const contracts = await getSortedDeployedContracts({
-    address: props.profileAddress,
-    onlyMainnet: true,
-  });
-
-  return <DeployedContracts contractList={contracts} limit={50} />;
-}
-
 async function AsyncPublishedContracts(props: {
   publisherAddress: string;
   publisherEnsName: string | undefined;
diff --git a/apps/dashboard/src/app/(dashboard)/published-contract/components/uri-based-deploy.tsx b/apps/dashboard/src/app/(dashboard)/published-contract/components/uri-based-deploy.tsx
index e68f5e1bdb1..66401b1fbe1 100644
--- a/apps/dashboard/src/app/(dashboard)/published-contract/components/uri-based-deploy.tsx
+++ b/apps/dashboard/src/app/(dashboard)/published-contract/components/uri-based-deploy.tsx
@@ -1,10 +1,10 @@
+import { getProjects } from "@/api/projects";
+import { getTeams } from "@/api/team";
 import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
-import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
 import { CustomContractForm } from "components/contract-components/contract-deploy-form/custom-contract";
-import { cookies } from "next/headers";
-import { redirect } from "next/navigation";
-import { getAddress } from "thirdweb";
 import type { FetchDeployMetadataResult } from "thirdweb/contract";
+import { getAuthToken } from "../../../api/lib/getAuthToken";
+import { loginRedirect } from "../../../login/loginRedirect";
 
 type DeployFormForUriProps = {
   contractMetadata: FetchDeployMetadataResult | null;
@@ -19,24 +19,35 @@ export async function DeployFormForUri(props: DeployFormForUriProps) {
     return <div>Could not fetch metadata</div>;
   }
 
-  const cookieStore = await cookies();
-  const address = cookieStore.get(COOKIE_ACTIVE_ACCOUNT)?.value;
-  if (!address) {
-    redirect(`/login?next=${encodeURIComponent(pathname)}`);
-  }
-  const authCookieName = COOKIE_PREFIX_TOKEN + getAddress(address);
-  const token = cookieStore.get(authCookieName)?.value;
-  if (!token) {
-    redirect(`/login?next=${encodeURIComponent(pathname)}`);
+  const [authToken, teams] = await Promise.all([getAuthToken(), getTeams()]);
+
+  if (!teams || !authToken) {
+    loginRedirect(pathname);
   }
 
+  const teamsAndProjects = await Promise.all(
+    teams.map(async (team) => ({
+      team: {
+        id: team.id,
+        name: team.name,
+        slug: team.slug,
+        image: team.image,
+      },
+      projects: (await getProjects(team.slug)).map((x) => ({
+        id: x.id,
+        name: x.name,
+      })),
+    })),
+  );
+
   // TODO: remove the `ChakraProviderSetup` wrapper once the form is updated to no longer use chakra
   return (
     <ChakraProviderSetup>
       <CustomContractForm
         metadata={contractMetadata}
         modules={modules?.filter((m) => m !== null)}
-        jwt={token}
+        jwt={authToken}
+        teamsAndProjects={teamsAndProjects}
       />
     </ChakraProviderSetup>
   );
diff --git a/apps/dashboard/src/app/account/components/AccountHeader.tsx b/apps/dashboard/src/app/account/components/AccountHeader.tsx
index 2cca88ebb65..e596a59901d 100644
--- a/apps/dashboard/src/app/account/components/AccountHeader.tsx
+++ b/apps/dashboard/src/app/account/components/AccountHeader.tsx
@@ -19,6 +19,7 @@ import {
 export function AccountHeader(props: {
   teamsAndProjects: Array<{ team: Team; projects: Project[] }>;
   account: Account;
+  accountAddress: string;
 }) {
   const router = useDashboardRouter();
   const [createProjectDialogState, setCreateProjectDialogState] = useState<
@@ -52,6 +53,7 @@ export function AccountHeader(props: {
       }),
     account: props.account,
     client,
+    accountAddress: props.accountAddress,
   };
 
   return (
diff --git a/apps/dashboard/src/app/account/components/AccountHeaderUI.stories.tsx b/apps/dashboard/src/app/account/components/AccountHeaderUI.stories.tsx
index 1c7f22950f4..4c68ad4535d 100644
--- a/apps/dashboard/src/app/account/components/AccountHeaderUI.stories.tsx
+++ b/apps/dashboard/src/app/account/components/AccountHeaderUI.stories.tsx
@@ -38,6 +38,7 @@ export const Mobile: Story = {
 };
 
 const client = getThirdwebClient();
+const accountAddressStub = "0x1F846F6DAE38E1C88D71EAA191760B15f38B7A37";
 
 function Variants(props: {
   type: "mobile" | "desktop";
@@ -52,6 +53,7 @@ function Variants(props: {
           <Comp
             teamsAndProjects={teamsAndProjectsStub}
             logout={() => {}}
+            accountAddress={accountAddressStub}
             connectButton={<ConnectButtonStub />}
             createProject={() => {}}
             account={{
@@ -61,17 +63,6 @@ function Variants(props: {
             client={client}
           />
         </BadgeContainer>
-
-        <BadgeContainer label="Account Loading">
-          <Comp
-            teamsAndProjects={teamsAndProjectsStub}
-            logout={() => {}}
-            connectButton={<ConnectButtonStub />}
-            createProject={() => {}}
-            account={undefined}
-            client={client}
-          />
-        </BadgeContainer>
       </div>
     </ThirdwebProvider>
   );
diff --git a/apps/dashboard/src/app/account/components/AccountHeaderUI.tsx b/apps/dashboard/src/app/account/components/AccountHeaderUI.tsx
index bf1d93da093..354af2a37a0 100644
--- a/apps/dashboard/src/app/account/components/AccountHeaderUI.tsx
+++ b/apps/dashboard/src/app/account/components/AccountHeaderUI.tsx
@@ -17,8 +17,9 @@ export type AccountHeaderCompProps = {
   connectButton: React.ReactNode;
   teamsAndProjects: Array<{ team: Team; projects: Project[] }>;
   createProject: (team: Team) => void;
-  account: Pick<Account, "email" | "id" | "image"> | undefined;
+  account: Pick<Account, "email" | "id" | "image">;
   client: ThirdwebClient;
+  accountAddress: string;
 };
 
 export function AccountHeaderDesktopUI(props: AccountHeaderCompProps) {
@@ -68,6 +69,7 @@ export function AccountHeaderDesktopUI(props: AccountHeaderCompProps) {
         logout={props.logout}
         connectButton={props.connectButton}
         client={props.client}
+        accountAddress={props.accountAddress}
       />
     </header>
   );
@@ -114,6 +116,7 @@ export function AccountHeaderMobileUI(props: AccountHeaderCompProps) {
         email={props.account?.email}
         logout={props.logout}
         connectButton={props.connectButton}
+        accountAddress={props.accountAddress}
       />
     </header>
   );
diff --git a/apps/dashboard/src/app/account/contracts/DeployedContractsPageHeader.tsx b/apps/dashboard/src/app/account/contracts/DeployedContractsPageHeader.tsx
index 35109203de5..78ee44718bd 100644
--- a/apps/dashboard/src/app/account/contracts/DeployedContractsPageHeader.tsx
+++ b/apps/dashboard/src/app/account/contracts/DeployedContractsPageHeader.tsx
@@ -6,42 +6,44 @@ import { DownloadIcon, PlusIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 
-export function DeployedContractsPageHeader() {
+export function DeployedContractsPageHeader(props: {
+  teamId: string;
+  projectId: string;
+}) {
   const [importModalOpen, setImportModalOpen] = useState(false);
 
   return (
-    <div>
+    <div className="border-b">
       <ImportModal
         isOpen={importModalOpen}
         onClose={() => {
           setImportModalOpen(false);
         }}
+        teamId={props.teamId}
+        projectId={props.projectId}
       />
-      <div className="flex flex-col gap-4 lg:flex-row lg:justify-between">
-        <div>
-          <h1 className="mb-1 font-semibold text-2xl tracking-tight lg:text-3xl">
-            Deployed contracts
-          </h1>
-          <p className="text-muted-foreground text-sm">
-            The list of contracts that you have deployed or imported with
-            thirdweb across all networks
-          </p>
-        </div>
-        <div className="flex gap-2 [&>*]:grow">
-          <Button
-            className="gap-2 bg-card"
-            variant="outline"
-            onClick={() => setImportModalOpen(true)}
-          >
-            <DownloadIcon className="size-4" />
-            Import contract
-          </Button>
-          <Button asChild className="gap-2">
-            <Link href="/explore">
-              <PlusIcon className="size-4" />
-              Deploy contract
-            </Link>
-          </Button>
+
+      <div className="container">
+        <div className="flex flex-col gap-3 py-10 lg:flex-row lg:items-center lg:justify-between">
+          <div>
+            <h1 className="font-semibold text-3xl tracking-tight">Contracts</h1>
+          </div>
+          <div className="flex gap-3 [&>*]:grow">
+            <Button
+              className="gap-2 bg-card"
+              variant="outline"
+              onClick={() => setImportModalOpen(true)}
+            >
+              <DownloadIcon className="size-4" />
+              Import contract
+            </Button>
+            <Button asChild className="gap-2">
+              <Link href="/explore">
+                <PlusIcon className="size-4" />
+                Deploy contract
+              </Link>
+            </Button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/apps/dashboard/src/app/account/contracts/_components/DeployedContractsPage.tsx b/apps/dashboard/src/app/account/contracts/_components/DeployedContractsPage.tsx
index 20b1827cd57..4ba073ad0c3 100644
--- a/apps/dashboard/src/app/account/contracts/_components/DeployedContractsPage.tsx
+++ b/apps/dashboard/src/app/account/contracts/_components/DeployedContractsPage.tsx
@@ -1,39 +1,60 @@
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { ClientOnly } from "components/ClientOnly/ClientOnly";
 import { Suspense } from "react";
+import { ContractTable } from "../../../../components/contract-components/tables/contract-table";
 import { DeployedContractsPageHeader } from "../DeployedContractsPageHeader";
-import { DeployedContractsTable } from "./DeployedContractsTable";
 import { GetStartedWithContractsDeploy } from "./GetStartedWithContractsDeploy";
 import { getSortedDeployedContracts } from "./getSortedDeployedContracts";
 
 export function DeployedContractsPage(props: {
-  address: string;
+  teamId: string;
+  projectId: string;
+  authToken: string;
 }) {
   return (
-    <div className="flex grow flex-col">
-      <DeployedContractsPageHeader />
-      <div className="h-8" />
-      <Suspense fallback={<Loading />}>
-        <DeployedContractsPageAsync {...props} />
-      </Suspense>
+    <div className="flex grow flex-col pb-20">
+      <DeployedContractsPageHeader
+        teamId={props.teamId}
+        projectId={props.projectId}
+      />
+      <div className="h-10" />
+      <div className="container flex grow flex-col">
+        <Suspense fallback={<Loading />}>
+          <DeployedContractsPageAsync {...props} />
+        </Suspense>
+      </div>
     </div>
   );
 }
 
 async function DeployedContractsPageAsync(props: {
-  address: string;
+  teamId: string;
+  projectId: string;
+  authToken: string;
 }) {
   const deployedContracts = await getSortedDeployedContracts({
-    address: props.address,
+    teamId: props.teamId,
+    projectId: props.projectId,
+    authToken: props.authToken,
   });
 
   if (deployedContracts.length === 0) {
-    return <GetStartedWithContractsDeploy />;
+    return (
+      <GetStartedWithContractsDeploy
+        teamId={props.teamId}
+        projectId={props.projectId}
+      />
+    );
   }
 
   return (
     <ClientOnly ssr={<Loading />}>
-      <DeployedContractsTable contracts={deployedContracts} />
+      <ContractTable
+        contracts={deployedContracts}
+        pageSize={10}
+        teamId={props.teamId}
+        projectId={props.projectId}
+      />
     </ClientOnly>
   );
 }
diff --git a/apps/dashboard/src/app/account/contracts/_components/DeployedContractsTable.tsx b/apps/dashboard/src/app/account/contracts/_components/DeployedContractsTable.tsx
deleted file mode 100644
index 4bd6d3a2ac0..00000000000
--- a/apps/dashboard/src/app/account/contracts/_components/DeployedContractsTable.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-"use client";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { DeployedContracts } from "components/contract-components/tables/deployed-contracts";
-import type { BasicContract } from "contract-ui/types/types";
-
-export function DeployedContractsTable(props: {
-  contracts: BasicContract[];
-}) {
-  const router = useDashboardRouter();
-  return (
-    <DeployedContracts
-      contractList={props.contracts}
-      limit={50}
-      onContractRemoved={router.refresh}
-    />
-  );
-}
diff --git a/apps/dashboard/src/app/account/contracts/_components/GetStartedWithContractsDeploy.tsx b/apps/dashboard/src/app/account/contracts/_components/GetStartedWithContractsDeploy.tsx
index 3a056b7d2b4..66dc62d0a69 100644
--- a/apps/dashboard/src/app/account/contracts/_components/GetStartedWithContractsDeploy.tsx
+++ b/apps/dashboard/src/app/account/contracts/_components/GetStartedWithContractsDeploy.tsx
@@ -6,18 +6,23 @@ import { StepsCard } from "components/dashboard/StepsCard";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useMemo, useState } from "react";
 
-export function GetStartedWithContractsDeploy() {
+export function GetStartedWithContractsDeploy(props: {
+  teamId: string;
+  projectId: string;
+}) {
   const steps = useMemo(
     () => [
       {
         title: "Build, deploy or import a contract",
         description:
           "Choose between deploying your own contract or import an existing one.",
-        children: <DeployOptions />,
+        children: (
+          <DeployOptions teamId={props.teamId} projectId={props.projectId} />
+        ),
         completed: false, // because we only show this component if the user does not have any contracts
       },
     ],
-    [],
+    [props.teamId, props.projectId],
   );
 
   return (
@@ -38,7 +43,10 @@ type ContentItem = {
 
 type TabId = "explore" | "import" | "build" | "deploy";
 
-const DeployOptions = () => {
+const DeployOptions = (props: {
+  teamId: string;
+  projectId: string;
+}) => {
   const [showImportModal, setShowImportModal] = useState(false);
   const router = useDashboardRouter();
   const trackEvent = useTrack();
@@ -83,6 +91,8 @@ const DeployOptions = () => {
         onClose={() => {
           setShowImportModal(false);
         }}
+        teamId={props.teamId}
+        projectId={props.projectId}
       />
 
       <TabButtons
diff --git a/apps/dashboard/src/app/account/contracts/_components/getProjectContracts.ts b/apps/dashboard/src/app/account/contracts/_components/getProjectContracts.ts
new file mode 100644
index 00000000000..1b452d5ebc3
--- /dev/null
+++ b/apps/dashboard/src/app/account/contracts/_components/getProjectContracts.ts
@@ -0,0 +1,38 @@
+import "server-only";
+import { API_SERVER_URL } from "@/constants/env";
+
+export type ProjectContract = {
+  id: string;
+  contractAddress: string;
+  chainId: string;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export async function getProjectContracts(options: {
+  teamId: string;
+  projectId: string;
+  authToken: string;
+}) {
+  const res = await fetch(
+    `${API_SERVER_URL}/v1/teams/${options.teamId}/projects/${options.projectId}/contracts`,
+    {
+      headers: {
+        Authorization: `Bearer ${options.authToken}`,
+      },
+    },
+  );
+
+  if (!res.ok) {
+    const errorMessage = await res.text();
+    console.error("Error fetching project contracts");
+    console.error(errorMessage);
+    return [];
+  }
+
+  const data = (await res.json()) as {
+    result: ProjectContract[];
+  };
+
+  return data.result;
+}
diff --git a/apps/dashboard/src/app/account/contracts/_components/getSortedDeployedContracts.tsx b/apps/dashboard/src/app/account/contracts/_components/getSortedDeployedContracts.tsx
index ae6c6bb5b26..7cd29232b94 100644
--- a/apps/dashboard/src/app/account/contracts/_components/getSortedDeployedContracts.tsx
+++ b/apps/dashboard/src/app/account/contracts/_components/getSortedDeployedContracts.tsx
@@ -1,15 +1,19 @@
-import { MULTICHAIN_REGISTRY_CONTRACT } from "constants/contracts";
-import type { BasicContract } from "contract-ui/types/types";
-import { getAllMultichainRegistry } from "../../../../dashboard-extensions/common/read/getAllMultichainRegistry";
 import { fetchChain } from "../../../../utils/fetchChain";
+import {
+  type ProjectContract,
+  getProjectContracts,
+} from "./getProjectContracts";
 
 export async function getSortedDeployedContracts(params: {
-  address: string;
   onlyMainnet?: boolean;
+  teamId: string;
+  projectId: string;
+  authToken: string;
 }) {
-  const contracts = await getAllMultichainRegistry({
-    contract: MULTICHAIN_REGISTRY_CONTRACT,
-    address: params.address,
+  const contracts = await getProjectContracts({
+    teamId: params.teamId,
+    projectId: params.projectId,
+    authToken: params.authToken,
   });
 
   const chainIds = Array.from(new Set(contracts.map((c) => c.chainId)));
@@ -22,11 +26,13 @@ export async function getSortedDeployedContracts(params: {
     .map((c) => c.value)
     .filter((c) => c !== null);
 
-  const mainnetContracts: BasicContract[] = [];
-  const testnetContracts: BasicContract[] = [];
+  const mainnetContracts: ProjectContract[] = [];
+  const testnetContracts: ProjectContract[] = [];
 
   for (const contract of contracts) {
-    const chain = chains.find((chain) => contract.chainId === chain.chainId);
+    const chain = chains.find(
+      (chain) => contract.chainId === chain.chainId.toString(),
+    );
     if (chain && chain.status !== "deprecated") {
       if (chain.testnet) {
         testnetContracts.push(contract);
@@ -36,13 +42,13 @@ export async function getSortedDeployedContracts(params: {
     }
   }
 
-  mainnetContracts.sort((a, b) => a.chainId - b.chainId);
+  mainnetContracts.sort((a, b) => Number(a.chainId) - Number(b.chainId));
 
   if (params.onlyMainnet) {
     return mainnetContracts;
   }
 
-  testnetContracts.sort((a, b) => a.chainId - b.chainId);
+  testnetContracts.sort((a, b) => Number(a.chainId) - Number(b.chainId));
 
   return [...mainnetContracts, ...testnetContracts];
 }
diff --git a/apps/dashboard/src/app/account/contracts/layout.tsx b/apps/dashboard/src/app/account/contracts/layout.tsx
deleted file mode 100644
index fc483138d38..00000000000
--- a/apps/dashboard/src/app/account/contracts/layout.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { SidebarLayout } from "@/components/blocks/SidebarLayout";
-
-export default function Layout(props: {
-  children: React.ReactNode;
-}) {
-  const layoutPath = "/account/contracts";
-
-  return (
-    <SidebarLayout
-      sidebarLinks={[
-        {
-          href: layoutPath,
-          label: "Deployed contracts",
-          exactMatch: true,
-        },
-        {
-          href: `${layoutPath}/published`,
-          label: "Published contracts",
-          exactMatch: true,
-        },
-      ]}
-    >
-      {props.children}
-    </SidebarLayout>
-  );
-}
diff --git a/apps/dashboard/src/app/account/contracts/page.tsx b/apps/dashboard/src/app/account/contracts/page.tsx
deleted file mode 100644
index 2132b151126..00000000000
--- a/apps/dashboard/src/app/account/contracts/page.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { redirect } from "next/navigation";
-import { getAuthTokenWalletAddress } from "../../api/lib/getAuthToken";
-import { DeployedContractsPage } from "./_components/DeployedContractsPage";
-
-export default async function Page() {
-  const accountAddress = await getAuthTokenWalletAddress();
-
-  if (!accountAddress) {
-    return redirect(`/login?next=${encodeURIComponent("/account/contracts")}`);
-  }
-
-  return <DeployedContractsPage address={accountAddress} />;
-}
diff --git a/apps/dashboard/src/app/account/contracts/published/PublishedContractsPage.tsx b/apps/dashboard/src/app/account/contracts/published/PublishedContractsPage.tsx
deleted file mode 100644
index b41c3cb4c68..00000000000
--- a/apps/dashboard/src/app/account/contracts/published/PublishedContractsPage.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
-import { Button } from "@/components/ui/button";
-import { PlusIcon } from "lucide-react";
-import Link from "next/link";
-import { Suspense } from "react";
-import { PublishedContracts } from "../../../(dashboard)/profile/[addressOrEns]/components/published-contracts";
-import { resolveAddressAndEns } from "../../../(dashboard)/profile/[addressOrEns]/resolveAddressAndEns";
-import { fetchPublishedContracts } from "../../../../components/contract-components/fetchPublishedContracts";
-
-export async function PublishedContractsPage(props: {
-  publisherAddress: string;
-}) {
-  const resolvedInfo = await resolveAddressAndEns(props.publisherAddress);
-
-  return (
-    <div className="flex grow flex-col">
-      <div className="flex flex-col justify-between gap-4 md:flex-row md:items-start">
-        <div>
-          <h2 className="mb-1 font-semibold text-2xl tracking-tight lg:text-3xl">
-            Published contracts
-          </h2>
-
-          <p className="text-muted-foreground text-sm">
-            The list of contracts published to thirdweb across all networks.{" "}
-            <Link
-              href="https://portal.thirdweb.com/contracts/publish/overview"
-              className="text-link-foreground hover:text-foreground"
-              target="_blank"
-            >
-              Learn more about publishing contracts
-            </Link>
-          </p>
-        </div>
-
-        <Button asChild>
-          <Link
-            href="https://portal.thirdweb.com/contracts/publish/publish-contract"
-            target="_blank"
-            className="gap-2"
-          >
-            <PlusIcon className="size-4" />
-            Publish Contract
-          </Link>
-        </Button>
-      </div>
-
-      <div className="h-8" />
-
-      <Suspense fallback={<GenericLoadingPage />}>
-        <AsyncPublishedContractsTable
-          publisherAddress={props.publisherAddress}
-          publisherEnsName={resolvedInfo?.ensName}
-        />
-      </Suspense>
-    </div>
-  );
-}
-
-async function AsyncPublishedContractsTable(props: {
-  publisherAddress: string;
-  publisherEnsName: string | undefined;
-}) {
-  const publishedContracts = await fetchPublishedContracts(
-    props.publisherAddress,
-  );
-
-  if (publishedContracts.length === 0) {
-    return (
-      <div className="flex min-h-[300px] grow items-center justify-center rounded-lg border border-border">
-        No published contracts found
-      </div>
-    );
-  }
-
-  return (
-    <PublishedContracts
-      publishedContracts={publishedContracts}
-      publisherEnsName={props.publisherEnsName}
-    />
-  );
-}
diff --git a/apps/dashboard/src/app/account/contracts/published/page.tsx b/apps/dashboard/src/app/account/contracts/published/page.tsx
deleted file mode 100644
index 5f2a78b9865..00000000000
--- a/apps/dashboard/src/app/account/contracts/published/page.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { getAuthTokenWalletAddress } from "../../../api/lib/getAuthToken";
-import { loginRedirect } from "../../../login/loginRedirect";
-import { PublishedContractsPage } from "./PublishedContractsPage";
-
-export default async function Page() {
-  const accountAddress = await getAuthTokenWalletAddress();
-
-  if (!accountAddress) {
-    loginRedirect("/account/contracts");
-  }
-
-  return <PublishedContractsPage publisherAddress={accountAddress} />;
-}
diff --git a/apps/dashboard/src/app/account/layout.tsx b/apps/dashboard/src/app/account/layout.tsx
index 7f297e4821e..99fa94126fd 100644
--- a/apps/dashboard/src/app/account/layout.tsx
+++ b/apps/dashboard/src/app/account/layout.tsx
@@ -4,6 +4,7 @@ import { AppFooter } from "@/components/blocks/app-footer";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import type React from "react";
 import { TabPathLinks } from "../../@/components/ui/tabs";
+import { getAuthTokenWalletAddress } from "../api/lib/getAuthToken";
 import { TWAutoConnect } from "../components/autoconnect";
 import { loginRedirect } from "../login/loginRedirect";
 import { AccountHeader } from "./components/AccountHeader";
@@ -12,17 +13,24 @@ import { getValidAccount } from "./settings/getAccount";
 export default async function AccountLayout(props: {
   children: React.ReactNode;
 }) {
-  const teams = await getTeams();
-  const account = await getValidAccount("/account");
+  const [teams, account, accountAddress] = await Promise.all([
+    getTeams(),
+    getValidAccount("/account"),
+    getAuthTokenWalletAddress(),
+  ]);
 
-  if (!teams) {
+  if (!teams || !accountAddress) {
     loginRedirect("/account");
   }
 
   return (
     <div className="flex min-h-dvh flex-col bg-background">
       <div className="flex grow flex-col">
-        <HeaderAndNav teams={teams} twAccount={account} />
+        <HeaderAndNav
+          teams={teams}
+          twAccount={account}
+          accountAddress={accountAddress}
+        />
         {props.children}
       </div>
       <TWAutoConnect />
@@ -34,6 +42,7 @@ export default async function AccountLayout(props: {
 async function HeaderAndNav(props: {
   teams: Team[];
   twAccount: Account;
+  accountAddress: string;
 }) {
   const teamsAndProjects = await Promise.all(
     props.teams.map(async (team) => ({
@@ -47,6 +56,7 @@ async function HeaderAndNav(props: {
       <AccountHeader
         teamsAndProjects={teamsAndProjects}
         account={props.twAccount}
+        accountAddress={props.accountAddress}
       />
       <TabPathLinks
         tabContainerClassName="px-4 lg:px-6"
@@ -56,10 +66,6 @@ async function HeaderAndNav(props: {
             name: "Overview",
             exactMatch: true,
           },
-          {
-            path: "/account/contracts",
-            name: "Contracts",
-          },
           {
             path: "/account/settings",
             name: "Settings",
diff --git a/apps/dashboard/src/app/components/Header/SecondaryNav/SecondaryNav.tsx b/apps/dashboard/src/app/components/Header/SecondaryNav/SecondaryNav.tsx
index 0f9fc615133..f2589c4b92f 100644
--- a/apps/dashboard/src/app/components/Header/SecondaryNav/SecondaryNav.tsx
+++ b/apps/dashboard/src/app/components/Header/SecondaryNav/SecondaryNav.tsx
@@ -6,10 +6,11 @@ import { ResourcesDropdownButton } from "./ResourcesDropdownButton";
 import { AccountButton } from "./account-button.client";
 
 export function SecondaryNav(props: {
-  account: Pick<Account, "email" | "id"> | undefined;
+  account: Pick<Account, "email" | "id">;
   logout: () => void;
   connectButton: React.ReactNode;
   client: ThirdwebClient;
+  accountAddress: string;
 }) {
   return (
     <div className="flex items-center gap-6">
@@ -19,6 +20,7 @@ export function SecondaryNav(props: {
         connectButton={props.connectButton}
         account={props.account}
         client={props.client}
+        accountAddress={props.accountAddress}
       />
     </div>
   );
diff --git a/apps/dashboard/src/app/components/Header/SecondaryNav/account-button.client.tsx b/apps/dashboard/src/app/components/Header/SecondaryNav/account-button.client.tsx
index dcfde81ebb8..17f84aa8487 100644
--- a/apps/dashboard/src/app/components/Header/SecondaryNav/account-button.client.tsx
+++ b/apps/dashboard/src/app/components/Header/SecondaryNav/account-button.client.tsx
@@ -14,14 +14,17 @@ import { useTheme } from "next-themes";
 import Link from "next/link";
 import { useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
+import { useEns } from "../../../../components/contract-components/hooks";
 
 export function AccountButton(props: {
   logout: () => void;
   connectButton: React.ReactNode;
-  account?: Pick<Account, "email" | "id" | "image">;
+  account: Pick<Account, "email" | "id" | "image"> | undefined;
   client: ThirdwebClient;
+  accountAddress: string;
 }) {
   const { setTheme, theme } = useTheme();
+  const ensQuery = useEns(props.accountAddress);
   const [isOpen, setIsOpen] = useState(false);
 
   return (
@@ -81,6 +84,19 @@ export function AccountButton(props: {
             <Link href="/account">My Account</Link>
           </Button>
 
+          <Button
+            asChild
+            variant="ghost"
+            className="justify-start px-3 text-muted-foreground text-sm hover:text-foreground"
+          >
+            <Link
+              href={`/${ensQuery.data?.ensName || props.accountAddress}`}
+              target="_blank"
+            >
+              My Wallet
+            </Link>
+          </Button>
+
           <Button
             variant="ghost"
             className="flex items-center justify-between gap-2 px-3 text-muted-foreground text-sm hover:text-foreground"
diff --git a/apps/dashboard/src/app/components/MobileBurgerMenuButton.tsx b/apps/dashboard/src/app/components/MobileBurgerMenuButton.tsx
index 51c1046118b..1963e3c66b8 100644
--- a/apps/dashboard/src/app/components/MobileBurgerMenuButton.tsx
+++ b/apps/dashboard/src/app/components/MobileBurgerMenuButton.tsx
@@ -10,11 +10,13 @@ import {
   Moon,
   Sun,
   UserRoundIcon,
+  WalletIcon,
   XIcon,
 } from "lucide-react";
 import { useTheme } from "next-themes";
 import Link from "next/link";
 import { useLayoutEffect, useState } from "react";
+import { useEns } from "../../components/contract-components/hooks";
 import { ThirdwebMiniLogo } from "./ThirdwebMiniLogo";
 
 export function MobileBurgerMenuButton(
@@ -23,6 +25,7 @@ export function MobileBurgerMenuButton(
         type: "loggedIn";
         email: string | undefined;
         logout: () => void;
+        accountAddress: string;
         connectButton: React.ReactNode;
       }
     | {
@@ -31,6 +34,9 @@ export function MobileBurgerMenuButton(
 ) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const { setTheme, theme } = useTheme();
+  const ensQuery = useEns(
+    props.type === "loggedIn" ? props.accountAddress : undefined,
+  );
   // const [isCMDSearchModalOpen, setIsCMDSearchModalOpen] = useState(false);
 
   useLayoutEffect(() => {
@@ -90,15 +96,24 @@ export function MobileBurgerMenuButton(
 
               <div className="h-6" />
 
-              <div className="flex flex-col gap-4">
+              <div className="flex flex-col gap-3">
                 <Link
                   href="/account"
-                  className="flex items-center gap-2 text-base text-muted-foreground hover:text-foreground "
+                  className="flex items-center gap-2 py-1 text-base text-muted-foreground hover:text-foreground"
                 >
                   <UserRoundIcon className="size-4" />
                   My Account
                 </Link>
 
+                <Link
+                  href={`/${ensQuery.data?.ensName || props.accountAddress}`}
+                  target="_blank"
+                  className="flex items-center gap-2 py-1 text-base text-muted-foreground hover:text-foreground"
+                >
+                  <WalletIcon className="size-4" />
+                  My Wallet
+                </Link>
+
                 <Button
                   variant="link"
                   className="!h-auto hover:!no-underline justify-start gap-2 px-0 py-1 text-start text-base text-muted-foreground hover:text-foreground"
diff --git a/apps/dashboard/src/app/layout.tsx b/apps/dashboard/src/app/layout.tsx
index 0485963dd5c..063c81a5b47 100644
--- a/apps/dashboard/src/app/layout.tsx
+++ b/apps/dashboard/src/app/layout.tsx
@@ -6,7 +6,7 @@ import PlausibleProvider from "next-plausible";
 import { Inter } from "next/font/google";
 import NextTopLoader from "nextjs-toploader";
 import { Suspense } from "react";
-import { UnlimitedWalletsBanner } from "../components/notices/AnnouncementBanner";
+import { OrganizeContractsToProjectsBanner } from "../components/notices/AnnouncementBanner";
 import { OpCreditsGrantedModalWrapperServer } from "../components/onboarding/OpCreditsGrantedModalWrapperServer";
 import { EnsureValidConnectedWalletLoginServer } from "./components/EnsureValidConnectedWalletLogin/EnsureValidConnectedWalletLoginServer";
 import { PostHogProvider } from "./components/root-providers";
@@ -71,7 +71,7 @@ export default function RootLayout({
             fontSans.variable,
           )}
         >
-          <UnlimitedWalletsBanner />
+          <OrganizeContractsToProjectsBanner />
           <AppRouterProviders>
             {children}
             <Suspense fallback={null}>
@@ -83,8 +83,8 @@ export default function RootLayout({
           </AppRouterProviders>
           <DashboardRouterTopProgressBar />
           <NextTopLoader
-            color="hsl(var(--primary))"
-            height={2}
+            color="hsl(var(--foreground))"
+            height={3}
             shadow={false}
             showSpinner={false}
           />
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/layout.tsx
index 67dcd524548..6d7cc440ea9 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/layout.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/layout.tsx
@@ -1,8 +1,9 @@
 import { getProjects } from "@/api/projects";
 import { getTeamNebulaWaitList, getTeams } from "@/api/team";
 import { TabPathLinks } from "@/components/ui/tabs";
-import { notFound, redirect } from "next/navigation";
+import { redirect } from "next/navigation";
 import { getValidAccount } from "../../../account/settings/getAccount";
+import { getAuthTokenWalletAddress } from "../../../api/lib/getAuthToken";
 import { TeamHeaderLoggedIn } from "../../components/TeamHeader/team-header-logged-in.client";
 
 export default async function TeamLayout(props: {
@@ -11,18 +12,24 @@ export default async function TeamLayout(props: {
 }) {
   const params = await props.params;
 
-  const [account, teams] = await Promise.all([
+  const [accountAddress, account, teams] = await Promise.all([
+    getAuthTokenWalletAddress(),
     getValidAccount(`/team/${params.team_slug}`),
     getTeams(),
   ]);
 
-  if (!teams) {
+  if (!teams || !accountAddress) {
     redirect("/login");
   }
 
   const team = teams.find(
     (t) => t.slug === decodeURIComponent(params.team_slug),
   );
+
+  if (!team) {
+    redirect("/team");
+  }
+
   const teamsAndProjects = await Promise.all(
     teams.map(async (team) => ({
       team,
@@ -30,10 +37,6 @@ export default async function TeamLayout(props: {
     })),
   );
 
-  if (!team) {
-    notFound();
-  }
-
   const isOnNebulaWaitList = (await getTeamNebulaWaitList(team.slug))
     ?.onWaitlist;
 
@@ -45,6 +48,7 @@ export default async function TeamLayout(props: {
           teamsAndProjects={teamsAndProjects}
           currentProject={undefined}
           account={account}
+          accountAddress={accountAddress}
         />
 
         <TabPathLinks
@@ -59,10 +63,6 @@ export default async function TeamLayout(props: {
               path: `/team/${params.team_slug}/~/analytics`,
               name: "Analytics",
             },
-            {
-              path: `/team/${params.team_slug}/~/contracts`,
-              name: "Contracts",
-            },
             {
               path: `/team/${params.team_slug}/~/engine`,
               name: "Engines",
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/contracts/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/contracts/layout.tsx
deleted file mode 100644
index 8b149207893..00000000000
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/contracts/layout.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { SidebarLayout } from "@/components/blocks/SidebarLayout";
-
-export default async function Layout(props: {
-  children: React.ReactNode;
-  params: Promise<{ team_slug: string }>;
-}) {
-  const params = await props.params;
-  const layoutPath = `/team/${params.team_slug}/~/contracts`;
-
-  return (
-    <SidebarLayout
-      sidebarLinks={[
-        {
-          href: layoutPath,
-          label: "Deployed contracts",
-          exactMatch: true,
-        },
-        {
-          href: `${layoutPath}/published`,
-          label: "Published contracts",
-          exactMatch: true,
-        },
-      ]}
-    >
-      {props.children}
-    </SidebarLayout>
-  );
-}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/contracts/page.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/contracts/page.tsx
deleted file mode 100644
index e6d1cd524ae..00000000000
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/contracts/page.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { redirect } from "next/navigation";
-import { DeployedContractsPage } from "../../../../../account/contracts/_components/DeployedContractsPage";
-import { getAuthTokenWalletAddress } from "../../../../../api/lib/getAuthToken";
-
-export default async function Page(props: {
-  params: Promise<{ team_slug: string }>;
-}) {
-  const params = await props.params;
-  const accountAddress = await getAuthTokenWalletAddress();
-
-  if (!accountAddress) {
-    return redirect(
-      `/login?next=${encodeURIComponent(`/team/${params.team_slug}/~/contracts`)}`,
-    );
-  }
-
-  return <DeployedContractsPage address={accountAddress} />;
-}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/contracts/published/page.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/contracts/published/page.tsx
deleted file mode 100644
index 0c5fb325531..00000000000
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/contracts/published/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { PublishedContractsPage } from "../../../../../../account/contracts/published/PublishedContractsPage";
-import { getAuthTokenWalletAddress } from "../../../../../../api/lib/getAuthToken";
-import { loginRedirect } from "../../../../../../login/loginRedirect";
-
-export default async function Page(props: {
-  params: Promise<{ team_slug: string }>;
-}) {
-  const accountAddress = await getAuthTokenWalletAddress();
-  const params = await props.params;
-
-  if (!accountAddress) {
-    loginRedirect(`/team/${params.team_slug}/~/contracts`);
-  }
-
-  return <PublishedContractsPage publisherAddress={accountAddress} />;
-}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/engine-overview.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/engine-overview.tsx
index a9816973cad..fd3447c6f08 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/engine-overview.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/engine-overview.tsx
@@ -1,12 +1,12 @@
 "use client";
 import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import {
   type EngineInstance,
   useEngineBackendWallets,
   useEngineWalletConfig,
 } from "@3rdweb-sdk/react/hooks/useEngine";
-import Link from "next/link";
 import { useState } from "react";
 import { useActiveWalletChain } from "thirdweb/react";
 import { BackendWalletsTable } from "./backend-wallets-table";
@@ -74,12 +74,11 @@ function BackendWalletsSection(props: {
           </p>
           <p className="text-muted-foreground text-sm leading-relaxed">
             Set up other wallet types from the{" "}
-            <Link
+            <UnderlineLink
               href={`/team/${teamSlug}/~/engine/${instance.id}/configuration`}
-              className="underline decoration-muted-foreground/50 decoration-dotted underline-offset-4 hover:text-foreground hover:decoration-foreground hover:decoration-solid"
             >
               Configuration
-            </Link>{" "}
+            </UnderlineLink>{" "}
             tab, or{" "}
             <TrackedLinkTW
               href="https://portal.thirdweb.com/infrastructure/engine/features/backend-wallets"
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/factories/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/factories/page.tsx
index 35a0ce120e5..e6754c251d5 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/factories/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/factories/page.tsx
@@ -1,5 +1,144 @@
-import { AccountFactories } from "../../../../../../../components/smart-wallets/AccountFactories";
+import { getProject } from "@/api/projects";
+import { getTeamBySlug } from "@/api/team";
+import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
+import { UnderlineLink } from "@/components/ui/UnderlineLink";
+import { Button } from "@/components/ui/button";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
+import { PlusIcon } from "lucide-react";
+import { redirect } from "next/navigation";
+import { Suspense } from "react";
+import { defineChain, getContract } from "thirdweb";
+import { getCompilerMetadata } from "thirdweb/contract";
+import { ClientOnly } from "../../../../../../../components/ClientOnly/ClientOnly";
+import { DefaultFactoriesSection } from "../../../../../../../components/smart-wallets/AccountFactories";
+import { FactoryContracts } from "../../../../../../../components/smart-wallets/AccountFactories/factory-contracts";
+import { getSortedDeployedContracts } from "../../../../../../account/contracts/_components/getSortedDeployedContracts";
+import { getAuthToken } from "../../../../../../api/lib/getAuthToken";
+import { loginRedirect } from "../../../../../../login/loginRedirect";
 
-export default async function Page() {
-  return <AccountFactories trackingCategory="smart-wallet" />;
+const trackingCategory = "smart-wallet";
+
+export default async function Page(props: {
+  params: Promise<{ team_slug: string; project_slug: string }>;
+}) {
+  const params = await props.params;
+
+  const [authToken, team, project] = await Promise.all([
+    getAuthToken(),
+    getTeamBySlug(params.team_slug),
+    getProject(params.team_slug, params.project_slug),
+  ]);
+
+  if (!authToken) {
+    loginRedirect(
+      `/team/${params.team_slug}/${params.project_slug}/connect/account-abstraction/factories`,
+    );
+  }
+
+  if (!team) {
+    redirect("/team");
+  }
+
+  if (!project) {
+    redirect(`/team/${params.team_slug}`);
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <DefaultFactoriesSection />
+      <YourFactoriesSection
+        teamId={team.id}
+        projectId={project.id}
+        authToken={authToken}
+      />
+    </div>
+  );
+}
+
+function YourFactoriesSection(props: {
+  teamId: string;
+  projectId: string;
+  authToken: string;
+}) {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="mt-8 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between lg:gap-8">
+        <div className="flex flex-col gap-0.5">
+          <h3 className="font-semibold text-xl tracking-tight">
+            Your Account Factories
+          </h3>
+          <p className="text-muted-foreground text-sm">
+            Deploy your own account factories to create smart wallets.{" "}
+            <UnderlineLink
+              href="https://portal.thirdweb.com/connect/account-abstraction/factories"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Learn more{" "}
+            </UnderlineLink>
+          </p>
+        </div>
+
+        <Button variant="default" asChild size="sm">
+          <TrackedLinkTW
+            category={trackingCategory}
+            label="create-factory"
+            href="/explore/smart-wallet"
+            className="gap-2 text-sm"
+          >
+            <PlusIcon className="size-3" />
+            Deploy Account Factory
+          </TrackedLinkTW>
+        </Button>
+      </div>
+
+      <Suspense fallback={<GenericLoadingPage />}>
+        <AsyncYourFactories
+          teamId={props.teamId}
+          projectId={props.projectId}
+          authToken={props.authToken}
+        />
+      </Suspense>
+    </div>
+  );
+}
+
+async function AsyncYourFactories(props: {
+  teamId: string;
+  projectId: string;
+  authToken: string;
+}) {
+  const deployedContracts = await getSortedDeployedContracts({
+    teamId: props.teamId,
+    projectId: props.projectId,
+    authToken: props.authToken,
+  });
+
+  const client = getThirdwebClient();
+
+  const factories = (
+    await Promise.all(
+      deployedContracts.map(async (c) => {
+        const contract = getContract({
+          // eslint-disable-next-line no-restricted-syntax
+          chain: defineChain(Number(c.chainId)),
+          address: c.contractAddress,
+          client,
+        });
+        const m = await getCompilerMetadata(contract);
+        return m.name.indexOf("AccountFactory") > -1 ? c : null;
+      }),
+    )
+  ).filter((f) => f !== null);
+
+  return (
+    <ClientOnly ssr={<GenericLoadingPage />}>
+      <FactoryContracts
+        contracts={factories}
+        isPending={false}
+        isFetched={true}
+      />
+    </ClientOnly>
+  );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/layout.tsx
deleted file mode 100644
index 8a05a282fa8..00000000000
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/layout.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { SidebarLayout } from "@/components/blocks/SidebarLayout";
-
-export default async function Layout(props: {
-  children?: React.ReactNode;
-  params: Promise<{ team_slug: string; project_slug: string }>;
-}) {
-  const params = await props.params;
-  const layoutPath = `/team/${params.team_slug}/${params.project_slug}/contracts`;
-
-  return (
-    <SidebarLayout
-      sidebarLinks={[
-        {
-          href: layoutPath,
-          label: "Deployed contracts",
-          exactMatch: true,
-        },
-        {
-          href: `${layoutPath}/published`,
-          label: "Published contracts",
-          exactMatch: true,
-        },
-      ]}
-    >
-      {props.children}
-    </SidebarLayout>
-  );
-}
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/page.tsx
index 121e6529797..b6f1c60c24c 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/page.tsx
@@ -1,16 +1,38 @@
+import { getProject } from "@/api/projects";
+import { getTeamBySlug } from "@/api/team";
+import { redirect } from "next/navigation";
 import { DeployedContractsPage } from "../../../../account/contracts/_components/DeployedContractsPage";
-import { getAuthTokenWalletAddress } from "../../../../api/lib/getAuthToken";
+import { getAuthToken } from "../../../../api/lib/getAuthToken";
 import { loginRedirect } from "../../../../login/loginRedirect";
 
 export default async function Page(props: {
   params: Promise<{ team_slug: string; project_slug: string }>;
 }) {
-  const accountAddress = await getAuthTokenWalletAddress();
+  const params = await props.params;
 
-  if (!accountAddress) {
-    const { team_slug, project_slug } = await props.params;
-    loginRedirect(`/team/${team_slug}/${project_slug}/contracts`);
+  const [authToken, team, project] = await Promise.all([
+    getAuthToken(),
+    getTeamBySlug(params.team_slug),
+    getProject(params.team_slug, params.project_slug),
+  ]);
+
+  if (!authToken) {
+    loginRedirect(`/team/${params.team_slug}/${params.project_slug}/contracts`);
+  }
+
+  if (!team) {
+    redirect("/team");
+  }
+
+  if (!project) {
+    redirect(`/team/${params.team_slug}`);
   }
 
-  return <DeployedContractsPage address={accountAddress} />;
+  return (
+    <DeployedContractsPage
+      teamId={team.id}
+      projectId={project.id}
+      authToken={authToken}
+    />
+  );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/published/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/published/page.tsx
deleted file mode 100644
index 3b8c77fa925..00000000000
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/published/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { PublishedContractsPage } from "../../../../../account/contracts/published/PublishedContractsPage";
-import { getAuthTokenWalletAddress } from "../../../../../api/lib/getAuthToken";
-import { loginRedirect } from "../../../../../login/loginRedirect";
-
-export default async function Page(props: {
-  params: Promise<{ team_slug: string; project_slug: string }>;
-}) {
-  const accountAddress = await getAuthTokenWalletAddress();
-  const params = await props.params;
-
-  if (!accountAddress) {
-    loginRedirect(`/team/${params.team_slug}/${params.project_slug}/contracts`);
-  }
-
-  return <PublishedContractsPage publisherAddress={accountAddress} />;
-}
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/hooks/project-contracts.ts b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/hooks/project-contracts.ts
new file mode 100644
index 00000000000..752aaea8ac5
--- /dev/null
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/hooks/project-contracts.ts
@@ -0,0 +1,64 @@
+"use client";
+
+import { apiServerProxy } from "@/actions/proxies";
+import { useMutation } from "@tanstack/react-query";
+
+export function useAddContractToProject() {
+  return useMutation({
+    mutationFn: async (params: {
+      teamId: string;
+      projectId: string;
+      contractAddress: string;
+      chainId: string;
+    }) => {
+      const res = await apiServerProxy({
+        pathname: `/v1/teams/${params.teamId}/projects/${params.projectId}/contracts`,
+        method: "POST",
+        body: JSON.stringify({
+          contractAddress: params.contractAddress,
+          chainId: params.chainId,
+        }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      if (!res.ok) {
+        console.error(res.error);
+        throw new Error(res.error);
+      }
+
+      return res.data as {
+        result: {
+          id: string;
+          projectId: string;
+          contractAddress: string;
+          chainId: string;
+          createdAt: string;
+          updatedAt: string;
+        };
+      };
+    },
+  });
+}
+
+export async function removeContractFromProject(params: {
+  teamId: string;
+  projectId: string;
+  contractId: string;
+}) {
+  const res = await apiServerProxy({
+    pathname: `/v1/teams/${params.teamId}/projects/${params.projectId}/contracts/${params.contractId}`,
+    method: "DELETE",
+  });
+
+  if (!res.ok) {
+    throw new Error(res.error);
+  }
+
+  return res.data as {
+    result: {
+      success: boolean;
+    };
+  };
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/layout.tsx
index d4bfa3170e2..af6f6ac8027 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/layout.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/layout.tsx
@@ -2,6 +2,7 @@ import { getProjects } from "@/api/projects";
 import { getTeams } from "@/api/team";
 import { notFound, redirect } from "next/navigation";
 import { getValidAccount } from "../../../account/settings/getAccount";
+import { getAuthTokenWalletAddress } from "../../../api/lib/getAuthToken";
 import { TeamHeaderLoggedIn } from "../../components/TeamHeader/team-header-logged-in.client";
 import { ProjectTabs } from "./tabs";
 
@@ -11,12 +12,13 @@ export default async function TeamLayout(props: {
   params: Promise<{ team_slug: string; project_slug: string }>;
 }) {
   const params = await props.params;
-  const [teams, account] = await Promise.all([
+  const [accountAddress, teams, account] = await Promise.all([
+    getAuthTokenWalletAddress(),
     getTeams(),
     getValidAccount(`/team/${params.team_slug}/${params.project_slug}`),
   ]);
 
-  if (!teams) {
+  if (!teams || !accountAddress) {
     redirect("/login");
   }
 
@@ -53,6 +55,7 @@ export default async function TeamLayout(props: {
           currentTeam={team}
           teamsAndProjects={teamsAndProjects}
           account={account}
+          accountAddress={accountAddress}
         />
         <ProjectTabs
           layoutPath={`/team/${params.team_slug}/${params.project_slug}`}
diff --git a/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderUI.stories.tsx b/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderUI.stories.tsx
index b5943d8cc8b..bf786a24f65 100644
--- a/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderUI.stories.tsx
+++ b/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderUI.stories.tsx
@@ -42,6 +42,8 @@ function Variants(props: {
   const Comp =
     props.type === "mobile" ? TeamHeaderMobileUI : TeamHeaderDesktopUI;
 
+  const acccountAddressStub = "0x1F846F6DAE38E1C88D71EAA191760B15f38B7A37";
+
   const team1 = teamsAndProjectsStub[0]?.team;
   const team2 = teamsAndProjectsStub[1]?.team;
   const team3 = teamsAndProjectsStub[2]?.team;
@@ -57,6 +59,7 @@ function Variants(props: {
           <Comp
             teamsAndProjects={teamsAndProjectsStub}
             currentTeam={team1}
+            accountAddress={acccountAddressStub}
             currentProject={undefined}
             logout={() => {}}
             connectButton={<ConnectButtonStub />}
@@ -69,24 +72,12 @@ function Variants(props: {
           />
         </BadgeContainer>
 
-        <BadgeContainer label="Team Growth, Account Loading">
-          <Comp
-            teamsAndProjects={teamsAndProjectsStub}
-            currentTeam={team2}
-            currentProject={undefined}
-            account={undefined}
-            logout={() => {}}
-            connectButton={<ConnectButtonStub />}
-            createProject={() => {}}
-            client={client}
-          />
-        </BadgeContainer>
-
         <BadgeContainer label="Team, Pro">
           <Comp
             teamsAndProjects={teamsAndProjectsStub}
             currentTeam={team3}
             currentProject={undefined}
+            accountAddress={acccountAddressStub}
             account={{
               email: "foo@example.com",
               id: "foo",
@@ -101,6 +92,7 @@ function Variants(props: {
         <BadgeContainer label="Team + Project, Pro">
           <Comp
             teamsAndProjects={teamsAndProjectsStub}
+            accountAddress={acccountAddressStub}
             currentTeam={team3}
             currentProject={team3Project}
             account={{
diff --git a/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderUI.tsx b/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderUI.tsx
index a39e592a53e..ca7be1a5bed 100644
--- a/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderUI.tsx
+++ b/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderUI.tsx
@@ -20,11 +20,12 @@ export type TeamHeaderCompProps = {
   teamsAndProjects: Array<{ team: Team; projects: Project[] }>;
   currentProject: Project | undefined;
   className?: string;
-  account: Pick<Account, "email" | "id"> | undefined;
+  account: Pick<Account, "email" | "id">;
   logout: () => void;
   connectButton: React.ReactNode;
   createProject: (team: Team) => void;
   client: ThirdwebClient;
+  accountAddress: string;
 };
 
 export function TeamHeaderDesktopUI(props: TeamHeaderCompProps) {
@@ -101,6 +102,7 @@ export function TeamHeaderDesktopUI(props: TeamHeaderCompProps) {
         logout={props.logout}
         connectButton={props.connectButton}
         client={props.client}
+        accountAddress={props.accountAddress}
       />
     </header>
   );
@@ -180,6 +182,7 @@ export function TeamHeaderMobileUI(props: TeamHeaderCompProps) {
         email={props.account?.email}
         logout={props.logout}
         connectButton={props.connectButton}
+        accountAddress={props.accountAddress}
       />
     </header>
   );
diff --git a/apps/dashboard/src/app/team/components/TeamHeader/team-header-logged-in.client.tsx b/apps/dashboard/src/app/team/components/TeamHeader/team-header-logged-in.client.tsx
index de0be56d1c3..4ffef4b7de2 100644
--- a/apps/dashboard/src/app/team/components/TeamHeader/team-header-logged-in.client.tsx
+++ b/apps/dashboard/src/app/team/components/TeamHeader/team-header-logged-in.client.tsx
@@ -21,6 +21,7 @@ export function TeamHeaderLoggedIn(props: {
   teamsAndProjects: Array<{ team: Team; projects: Project[] }>;
   currentProject: Project | undefined;
   account: Pick<Account, "email" | "id">;
+  accountAddress: string;
 }) {
   const [createProjectDialogState, setCreateProjectDialogState] = useState<
     { team: Team; isOpen: true } | { isOpen: false }
@@ -56,6 +57,7 @@ export function TeamHeaderLoggedIn(props: {
       });
     },
     client: getThirdwebClient(),
+    accountAddress: props.accountAddress,
   };
 
   return (
diff --git a/apps/dashboard/src/app/team/components/TeamHeader/team-header.tsx b/apps/dashboard/src/app/team/components/TeamHeader/team-header.tsx
index b662b528da4..a56cb9b9166 100644
--- a/apps/dashboard/src/app/team/components/TeamHeader/team-header.tsx
+++ b/apps/dashboard/src/app/team/components/TeamHeader/team-header.tsx
@@ -1,19 +1,18 @@
 import { getProjects } from "@/api/projects";
 import { getTeams } from "@/api/team";
 import { getRawAccount } from "../../../account/settings/getAccount";
+import { getAuthTokenWalletAddress } from "../../../api/lib/getAuthToken";
 import { TeamHeaderLoggedOut } from "./TeamHeaderLoggedOut";
 import { TeamHeaderLoggedIn } from "./team-header-logged-in.client";
 
 export async function TeamHeader() {
-  const account = await getRawAccount();
+  const [account, teams, accountAddress] = await Promise.all([
+    getRawAccount(),
+    getTeams(),
+    getAuthTokenWalletAddress(),
+  ]);
 
-  if (!account) {
-    return <TeamHeaderLoggedOut />;
-  }
-
-  const teams = await getTeams();
-
-  if (!teams) {
+  if (!account || !accountAddress || !teams) {
     return <TeamHeaderLoggedOut />;
   }
 
@@ -35,6 +34,7 @@ export async function TeamHeader() {
       teamsAndProjects={teamsAndProjects}
       currentProject={undefined}
       account={account}
+      accountAddress={accountAddress}
     />
   );
 }
diff --git a/apps/dashboard/src/components/contract-components/contract-deploy-form/add-to-project-card.stories.tsx b/apps/dashboard/src/components/contract-components/contract-deploy-form/add-to-project-card.stories.tsx
new file mode 100644
index 00000000000..ad08d7a1e2b
--- /dev/null
+++ b/apps/dashboard/src/components/contract-components/contract-deploy-form/add-to-project-card.stories.tsx
@@ -0,0 +1,100 @@
+import { getThirdwebClient } from "@/constants/thirdweb.server";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import {
+  AddToProjectCardUI,
+  type MinimalProject,
+  type MinimalTeam,
+  type MinimalTeamsAndProjects,
+  type TeamAndProjectSelection,
+} from "./add-to-project-card";
+
+const meta = {
+  title: "DeployContract/AddToProject",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function teamsAndProjectsStub(teamCount: number, projectCount: number) {
+  const teamsAndProjects: MinimalTeamsAndProjects = [];
+
+  // generate random names and ids
+  for (let i = 0; i < teamCount; i++) {
+    const team: MinimalTeam = {
+      id: `team_${i + 1}`,
+      name: `Team ${i + 1}`,
+      image: `https://picsum.photos/200?random=${i}`,
+      slug: `team-${i + 1}`,
+    };
+
+    const projects: MinimalProject[] = [];
+    for (let j = 0; j < projectCount; j++) {
+      projects.push({
+        id: `project_${i + 1}_${j + 1}`,
+        name: `Project ${i + 1}_${j + 1}`,
+      });
+    }
+
+    teamsAndProjects.push({ team, projects });
+  }
+
+  return teamsAndProjects;
+}
+
+function Story() {
+  return (
+    <div className="container flex max-w-[1000px] flex-col gap-8 py-10">
+      <Variant label="1 Team, 0 Projects" teamCount={1} projectCount={0} />
+      <Variant label="1 Team, 1 Project" teamCount={1} projectCount={1} />
+      <Variant label="1 Team, 5 Projects" teamCount={1} projectCount={5} />
+      <Variant label="5 Teams, 5 Projects" teamCount={5} projectCount={5} />
+    </div>
+  );
+}
+
+function Variant(props: {
+  label: string;
+  teamCount: number;
+  projectCount: number;
+}) {
+  const [teamsAndProjects] = useState(() =>
+    teamsAndProjectsStub(props.teamCount, props.projectCount),
+  );
+  const [isEnabled, setIsEnabled] = useState(true);
+  const [selection, setSelection] = useState<TeamAndProjectSelection>({
+    team: teamsAndProjects[0]?.team,
+    project: teamsAndProjects[0]?.projects[0],
+  });
+
+  return (
+    <BadgeContainer label={props.label}>
+      <AddToProjectCardUI
+        teamsAndProjects={teamsAndProjects}
+        client={getThirdwebClient()}
+        onSelectionChange={setSelection}
+        selection={selection}
+        enabled={isEnabled}
+        onSetEnabled={setIsEnabled}
+      />
+    </BadgeContainer>
+  );
+}
diff --git a/apps/dashboard/src/components/contract-components/contract-deploy-form/add-to-project-card.tsx b/apps/dashboard/src/components/contract-components/contract-deploy-form/add-to-project-card.tsx
new file mode 100644
index 00000000000..aab2b9134bf
--- /dev/null
+++ b/apps/dashboard/src/components/contract-components/contract-deploy-form/add-to-project-card.tsx
@@ -0,0 +1,219 @@
+"use client";
+
+import type { Project } from "@/api/projects";
+import type { Team } from "@/api/team";
+import { GradientAvatar } from "@/components/blocks/Avatars/GradientAvatar";
+import { ProjectAvatar } from "@/components/blocks/Avatars/ProjectAvatar";
+import { UnderlineLink } from "@/components/ui/UnderlineLink";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { CircleAlertIcon, ExternalLinkIcon } from "lucide-react";
+import type { ThirdwebClient } from "thirdweb";
+import { Fieldset } from "./common";
+
+export type MinimalTeam = Pick<Team, "id" | "name" | "image" | "slug">;
+export type MinimalProject = Pick<Project, "id" | "name">; // TODO: add image when project has image
+
+export type TeamAndProjectSelection = {
+  team: MinimalTeam | undefined;
+  project: MinimalProject | undefined;
+};
+
+export type MinimalTeamsAndProjects = Array<{
+  team: MinimalTeam;
+  projects: MinimalProject[];
+}>;
+
+type TeamAndProjectSelectorProps = {
+  teamsAndProjects: MinimalTeamsAndProjects;
+  selection: TeamAndProjectSelection;
+  enabled: boolean;
+  onSelectionChange: (selection: TeamAndProjectSelection) => void;
+  client: ThirdwebClient;
+  onSetEnabled: (enabled: boolean) => void;
+};
+
+export function AddToProjectCardUI(props: TeamAndProjectSelectorProps) {
+  const selectedTeam = props.teamsAndProjects.find(
+    (t) => t.team.id === props.selection.team?.id,
+  );
+
+  const isProjectSelected = props.selection.project && props.enabled;
+
+  return (
+    <Fieldset
+      legend="Add To Project"
+      description="Save the deployed contract in a project's contract list on thirdweb dashboard"
+      headerClassName="pr-14"
+      headerChildren={
+        <div className="absolute top-4 right-4 lg:top-6 lg:right-6">
+          <Checkbox
+            className="size-5"
+            checked={props.enabled}
+            onCheckedChange={(checked) => {
+              props.onSetEnabled(!!checked);
+            }}
+          />
+        </div>
+      }
+    >
+      <div className="flex flex-col gap-5">
+        {/* Team & Project selectors */}
+        {props.enabled && (
+          <AddToProjectSelector
+            selection={props.selection}
+            onSelectionChange={props.onSelectionChange}
+            teamsAndProjects={props.teamsAndProjects}
+            client={props.client}
+          />
+        )}
+
+        {/* No projects alert */}
+        {selectedTeam?.projects.length === 0 && (
+          <Alert variant="info">
+            <CircleAlertIcon className="size-5" />
+            <AlertTitle> Selected team has no projects </AlertTitle>
+            <AlertDescription>
+              <UnderlineLink
+                href={`/team/${selectedTeam.team.slug}`}
+                className="inline-flex items-center gap-2"
+                target="_blank"
+              >
+                Create Project <ExternalLinkIcon className="size-3.5" />
+              </UnderlineLink>
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {/* No project selected alert */}
+        {!isProjectSelected && (
+          <Alert variant="warning">
+            <CircleAlertIcon className="size-5" />
+            <AlertTitle>No Project Selected</AlertTitle>
+            <AlertDescription>
+              Deployed contract will not be saved in thirdweb dashboard
+            </AlertDescription>
+          </Alert>
+        )}
+      </div>
+    </Fieldset>
+  );
+}
+
+function SlashSeparator() {
+  return <div className="mx-2 h-5 w-[2px] rotate-[25deg] bg-foreground/20" />;
+}
+
+export function AddToProjectSelector(props: {
+  selection: TeamAndProjectSelection;
+  onSelectionChange: (selection: TeamAndProjectSelection) => void;
+  teamsAndProjects: MinimalTeamsAndProjects;
+  client: ThirdwebClient;
+}) {
+  const selectedTeam = props.teamsAndProjects.find(
+    (t) => t.team.id === props.selection.team?.id,
+  );
+
+  return (
+    <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:gap-2">
+      {/* Team */}
+      <div>
+        <Label htmlFor="team-select" className="mb-2 inline-block">
+          Team
+        </Label>
+        <Select
+          value={props.selection.team?.id}
+          onValueChange={(v) => {
+            const teamAndProjects = props.teamsAndProjects.find(
+              (t) => t.team.id === v,
+            );
+
+            if (teamAndProjects) {
+              props.onSelectionChange({
+                team: teamAndProjects.team,
+                project: teamAndProjects.projects?.[0],
+              });
+            }
+          }}
+        >
+          <SelectTrigger id="team-select" className="min-w-[200px]">
+            <SelectValue placeholder="Select a team" />
+          </SelectTrigger>
+          <SelectContent>
+            {props.teamsAndProjects.map(({ team }) => (
+              <SelectItem key={team.id} value={team.id} className="py-2.5">
+                <div className="flex items-center gap-2">
+                  <GradientAvatar
+                    src={team.image || ""}
+                    className="size-5"
+                    id={team.id}
+                    client={props.client}
+                  />
+
+                  <span>{team.name}</span>
+                </div>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Slash */}
+      <div className="hidden flex-none self-end pb-3 lg:block">
+        <SlashSeparator />
+      </div>
+
+      {/* Project */}
+      <div>
+        <Label htmlFor="project-select" className="mb-2 inline-block">
+          Project
+        </Label>
+        <Select
+          value={props.selection.project?.id}
+          onValueChange={(v) => {
+            const project = selectedTeam?.projects?.find((p) => p.id === v);
+            if (project) {
+              props.onSelectionChange({
+                ...props.selection,
+                project: project,
+              });
+            }
+          }}
+        >
+          <SelectTrigger id="project-select" className="min-w-[200px]">
+            <SelectValue placeholder="Select a project" />
+          </SelectTrigger>
+          <SelectContent>
+            {/* If no projects  */}
+            {selectedTeam?.projects.length === 0 && (
+              <div className="flex items-center justify-start px-3 py-3 text-destructive-text text-sm">
+                No projects
+              </div>
+            )}
+
+            {selectedTeam?.projects.map((project) => (
+              <SelectItem
+                key={project.id}
+                value={project.id}
+                className="py-2.5"
+              >
+                <div className="flex items-center gap-2">
+                  <ProjectAvatar src="" className="size-5" />
+                  <span>{project.name}</span>
+                </div>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/contract-components/contract-deploy-form/common.tsx b/apps/dashboard/src/components/contract-components/contract-deploy-form/common.tsx
index 47b6487473a..b6c83181a72 100644
--- a/apps/dashboard/src/components/contract-components/contract-deploy-form/common.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-deploy-form/common.tsx
@@ -1,13 +1,29 @@
+import { cn } from "@/lib/utils";
+
 export function Fieldset(props: {
   legend: string;
+  description?: React.ReactNode;
+  headerChildren?: React.ReactNode;
   children: React.ReactNode;
+  headerClassName?: string;
 }) {
   return (
-    <fieldset className="rounded-lg border border-border bg-card">
-      <div className="border-border border-b p-4 md:px-6 md:py-5">
+    <fieldset className="relative rounded-lg border border-border bg-card">
+      <div
+        className={cn(
+          "border-border border-b p-4 md:px-6 md:py-5",
+          props.headerClassName,
+        )}
+      >
         <legend className="font-semibold text-xl tracking-tight">
           {props.legend}
         </legend>
+        {props.description && (
+          <p className="mt-1 text-muted-foreground text-sm">
+            {props.description}
+          </p>
+        )}
+        {props.headerChildren}
       </div>
 
       <div className="p-4 md:px-6 md:py-6">{props.children}</div>
diff --git a/apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx b/apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx
index c2569ed9ef8..5fdf251b826 100644
--- a/apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx
@@ -9,7 +9,6 @@ import { Alert, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
 import { ToolTipLabel } from "@/components/ui/tooltip";
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { Flex, FormControl } from "@chakra-ui/react";
 import { useMutation, useQuery } from "@tanstack/react-query";
@@ -27,7 +26,7 @@ import {
   InfoIcon,
 } from "lucide-react";
 import Link from "next/link";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { FormProvider, type UseFormReturn, useForm } from "react-hook-form";
 import { ZERO_ADDRESS, getContract } from "thirdweb";
 import type { FetchDeployMetadataResult } from "thirdweb/contract";
@@ -40,8 +39,12 @@ import { useActiveAccount, useActiveWalletChain } from "thirdweb/react";
 import { upload } from "thirdweb/storage";
 import { isZkSyncChain } from "thirdweb/utils";
 import { FormHelperText, FormLabel, Text } from "tw-components";
+import { useAddContractToProject } from "../../../app/team/[team_slug]/[project_slug]/hooks/project-contracts";
 import { useCustomFactoryAbi, useFunctionParamsFromABI } from "../hooks";
-import { addContractToMultiChainRegistry } from "../utils";
+import {
+  AddToProjectCardUI,
+  type MinimalTeamsAndProjects,
+} from "./add-to-project-card";
 import { Fieldset } from "./common";
 import { ContractMetadataFieldset } from "./contract-metadata-fieldset";
 import {
@@ -66,10 +69,10 @@ interface CustomContractFormProps {
   metadata: FetchDeployMetadataResult;
   jwt: string;
   modules?: FetchDeployMetadataResult[];
+  teamsAndProjects: MinimalTeamsAndProjects;
 }
 
 type CustomContractDeploymentFormData = {
-  addToDashboard: boolean;
   deployDeterministic: boolean;
   saltForCreate2: string;
   signerAsSalt: boolean;
@@ -137,9 +140,16 @@ export const CustomContractForm: React.FC<CustomContractFormProps> = ({
   metadata,
   modules,
   jwt,
+  teamsAndProjects,
 }) => {
   const thirdwebClient = useThirdwebClient(jwt);
 
+  const [isImportEnabled, setIsImportEnabled] = useState(true);
+  const [importSelection, setImportSelection] = useState({
+    team: teamsAndProjects[0]?.team,
+    project: teamsAndProjects[0]?.projects[0],
+  });
+
   const activeAccount = useActiveAccount();
   const walletChain = useActiveWalletChain();
   const { onError } = useTxNotifications(
@@ -243,7 +253,6 @@ export const CustomContractForm: React.FC<CustomContractFormProps> = ({
   const transformedQueryData = useMemo(
     () =>
       ({
-        addToDashboard: true,
         deployDeterministic: isAccountFactory,
         saltForCreate2: "",
         signerAsSalt: true,
@@ -521,6 +530,8 @@ export const CustomContractForm: React.FC<CustomContractFormProps> = ({
   const shouldShowDeterministicDeployWarning =
     constructorParams.length > 0 && form.watch("deployDeterministic");
 
+  const addContractToProjectMutation = useAddContractToProject();
+
   return (
     <>
       <FormProvider {...form}>
@@ -537,22 +548,12 @@ export const CustomContractForm: React.FC<CustomContractFormProps> = ({
             }
 
             // open the status modal
-            let steps: DeployModalStep[] = [
+            const steps: DeployModalStep[] = [
               {
                 type: "deploy",
                 signatureCount: deployTransactions.data?.length || 1,
               },
             ];
-            // if the add to dashboard is checked add that step
-            if (formData.addToDashboard) {
-              steps = [
-                ...steps,
-                {
-                  type: "import",
-                  signatureCount: 1,
-                },
-              ];
-            }
 
             const publisherAnalyticsData = metadata.publisher
               ? {
@@ -594,32 +595,24 @@ export const CustomContractForm: React.FC<CustomContractFormProps> = ({
                 metadataUri: metadata.metadataUri,
               });
               deployStatusModal.nextStep();
-              // if add to dashboard is checked, add the contract to the dashboard
-              if (formData.addToDashboard) {
-                // add the contract to the dashboard
-                await addContractToMultiChainRegistry(
-                  {
-                    address: contractAddr,
-                    chainId: walletChain.id,
-                  },
-                  activeAccount,
-                  300000n,
-                );
-                trackEvent({
-                  category: "custom-contract",
-                  action: "add-to-dashboard",
-                  label: "success",
-                  ...publisherAnalyticsData,
-                  contractAddress: contractAddr,
-                  chainId: walletChain.id,
-                  metadataUri: metadata.metadataUri,
-                });
-                deployStatusModal.nextStep();
-              }
-
               deployStatusModal.setViewContractLink(
                 `/${walletChain.id}/${contractAddr}`,
               );
+
+              // if the contract should be added to a project
+              if (
+                importSelection.team &&
+                importSelection.project &&
+                isImportEnabled
+              ) {
+                // no await - do it in the background
+                addContractToProjectMutation.mutateAsync({
+                  chainId: walletChain.id.toString(),
+                  contractAddress: contractAddr,
+                  projectId: importSelection.project.id,
+                  teamId: importSelection.team.id,
+                });
+              }
             } catch (e) {
               onError(e);
               console.error("failed to deploy contract", e);
@@ -841,6 +834,15 @@ export const CustomContractForm: React.FC<CustomContractFormProps> = ({
             </>
           )}
 
+          <AddToProjectCardUI
+            client={thirdwebClient}
+            teamsAndProjects={teamsAndProjects}
+            selection={importSelection}
+            enabled={isImportEnabled}
+            onSelectionChange={setImportSelection}
+            onSetEnabled={setIsImportEnabled}
+          />
+
           <Fieldset legend="Deploy Options">
             <div className="flex flex-col gap-6">
               {/* Chain */}
@@ -944,29 +946,6 @@ export const CustomContractForm: React.FC<CustomContractFormProps> = ({
                 </>
               )}
 
-              {/* Import Enable/Disable */}
-              <CheckboxWithLabel>
-                <Checkbox
-                  {...form.register("addToDashboard")}
-                  checked={form.watch("addToDashboard")}
-                  onCheckedChange={(checked) =>
-                    form.setValue("addToDashboard", !!checked)
-                  }
-                />
-                <span>
-                  Import so I can find it in the list of{" "}
-                  <TrackedLinkTW
-                    className="text-link-foreground hover:text-foreground"
-                    href="/team/~/~/contracts"
-                    target="_blank"
-                    category="custom-contract"
-                    label="visit-dashboard"
-                  >
-                    my contracts
-                  </TrackedLinkTW>
-                </span>
-              </CheckboxWithLabel>
-
               {/* Deploy */}
               <div className="flex border-border border-t pt-6 md:justify-end">
                 <Button
diff --git a/apps/dashboard/src/components/contract-components/contract-deploy-form/deploy-context-modal.tsx b/apps/dashboard/src/components/contract-components/contract-deploy-form/deploy-context-modal.tsx
index c7f438cc3b3..40453c901c2 100644
--- a/apps/dashboard/src/components/contract-components/contract-deploy-form/deploy-context-modal.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-deploy-form/deploy-context-modal.tsx
@@ -12,7 +12,7 @@ import Link from "next/link";
 import { useCallback, useState } from "react";
 
 export type DeployModalStep = {
-  type: "deploy" | "setNFTMetadata" | "import";
+  type: "deploy" | "setNFTMetadata";
   signatureCount: number;
 };
 
@@ -104,11 +104,11 @@ export function DeployStatusModal(props: {
         </div>
 
         {viewContractLink && (
-          <div className="mt-2 flex justify-between gap-4 border-border border-t p-6">
+          <div className="mt-2 flex justify-end gap-4 border-border border-t p-6">
             <Button variant="outline" onClick={() => setIsModalOpen(false)}>
               Close
             </Button>
-            <Button variant="primary" asChild>
+            <Button asChild>
               <Link href={viewContractLink}>View Contract</Link>
             </Button>
           </div>
@@ -128,7 +128,7 @@ function RenderDeployModalStep(props: DeployModalStepProps) {
   const { isActive, hasCompleted } = props;
   const { title, description } = getStepInfo(props.step);
   return (
-    <div className="rounded-lg border border-border">
+    <div className="rounded-lg border border-border bg-card">
       <div
         className={cn(
           "flex items-center gap-4 p-4",
@@ -137,7 +137,7 @@ function RenderDeployModalStep(props: DeployModalStepProps) {
       >
         <div className="flex shrink-0 items-center justify-center">
           {isActive ? (
-            <Spinner className="size-6 text-link-foreground" />
+            <Spinner className="size-6 text-foreground" />
           ) : hasCompleted ? (
             <CircleCheck className="size-6 text-green-500" />
           ) : (
@@ -185,21 +185,5 @@ function getStepInfo(step: DeployModalStep): TitleAndDesc {
         ),
       };
     }
-
-    case "import": {
-      return {
-        title: "Adding to dashboard",
-        description: (
-          <>
-            {step.signatureCount > 0
-              ? "Your wallet will prompt you to sign the transaction. "
-              : ""}
-            <i>
-              This step is <b>gasless</b>.
-            </i>
-          </>
-        ),
-      };
-    }
   }
 }
diff --git a/apps/dashboard/src/components/contract-components/import-contract/modal.tsx b/apps/dashboard/src/components/contract-components/import-contract/modal.tsx
index aa419a912ea..dc7959767aa 100644
--- a/apps/dashboard/src/components/contract-components/import-contract/modal.tsx
+++ b/apps/dashboard/src/components/contract-components/import-contract/modal.tsx
@@ -21,23 +21,22 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
-import {
-  useAddContractMutation,
-  useAllContractList,
-} from "@3rdweb-sdk/react/hooks/useRegistry";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useChainSlug } from "hooks/chains/chainSlug";
-import { PlusIcon } from "lucide-react";
-import { useState } from "react";
+import { ExternalLinkIcon, PlusIcon } from "lucide-react";
+import Link from "next/link";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { getAddress, isAddress } from "thirdweb";
-import { useActiveAccount, useActiveWalletChain } from "thirdweb/react";
+import { useActiveWalletChain } from "thirdweb/react";
 import { z } from "zod";
+import { useAddContractToProject } from "../../../app/team/[team_slug]/[project_slug]/hooks/project-contracts";
 
 type ImportModalProps = {
   isOpen: boolean;
   onClose: () => void;
+  teamId: string;
+  projectId: string;
 };
 
 export const ImportModal: React.FC<ImportModalProps> = (props) => {
@@ -64,7 +63,7 @@ export const ImportModal: React.FC<ImportModalProps> = (props) => {
           </DialogDescription>
         </DialogHeader>
 
-        <ImportForm />
+        <ImportForm teamId={props.teamId} projectId={props.projectId} />
       </DialogContent>
     </Dialog>
   );
@@ -86,10 +85,12 @@ const importFormSchema = z.object({
   chainId: z.coerce.number(),
 });
 
-function ImportForm() {
+function ImportForm(props: {
+  teamId: string;
+  projectId: string;
+}) {
   const router = useDashboardRouter();
   const activeChainId = useActiveWalletChain()?.id;
-  const [isRedirecting, setIsRedirecting] = useState(false);
 
   const form = useForm({
     resolver: zodResolver(importFormSchema),
@@ -99,15 +100,7 @@ function ImportForm() {
     },
   });
   const chainSlug = useChainSlug(form.watch("chainId"));
-  const addToDashboard = useAddContractMutation();
-  const address = useActiveAccount()?.address;
-  const registry = useAllContractList(address);
-
-  const showLoading =
-    form.formState.isSubmitting ||
-    addToDashboard.isPending ||
-    addToDashboard.isSuccess ||
-    isRedirecting;
+  const addContractToProject = useAddContractToProject();
 
   return (
     <Form {...form}>
@@ -148,35 +141,25 @@ function ImportForm() {
               return;
             }
 
-            const isInRegistry =
-              registry.isFetched &&
-              registry.data?.find(
-                (c) =>
-                  contractAddress &&
-                  // compare address...
-                  c.address.toLowerCase() === contractAddress.toLowerCase() &&
-                  // ... and chainId
-                  c.chainId === chainId,
-              ) &&
-              registry.isSuccess;
-
-            if (isInRegistry) {
-              router.push(`/${chainSlug}/${contractAddress}`);
-              setIsRedirecting(true);
-              return;
-            }
-
-            addToDashboard.mutate(
+            addContractToProject.mutate(
               {
                 contractAddress,
-                chainId,
+                chainId: chainId.toString(),
+                teamId: props.teamId,
+                projectId: props.projectId,
               },
               {
                 onSuccess: () => {
-                  router.push(`/${chainSlug}/${contractAddress}`);
+                  router.refresh();
+                  toast.success("Contract imported successfully");
                 },
                 onError: (err) => {
                   console.error(err);
+                  if (err.message.includes("PROJECT_CONTRACT_ALREADY_EXISTS")) {
+                    toast.error("Contract is already added to the project");
+                  } else {
+                    toast.error("Failed to import contract");
+                  }
                 },
               },
             );
@@ -213,19 +196,29 @@ function ImportForm() {
         <div className="h-8" />
 
         <div className="flex justify-end">
-          <Button type="submit" className="gap-2">
-            {showLoading ? (
-              <Spinner className="size-4" />
-            ) : (
-              <PlusIcon className="size-4" />
-            )}
-
-            {showLoading
-              ? addToDashboard.isSuccess || isRedirecting
-                ? "Redirecting"
-                : "Importing contract"
-              : "Import Contract"}
-          </Button>
+          {addContractToProject.isSuccess &&
+          addContractToProject.data?.result ? (
+            <Button asChild className="gap-2">
+              <Link
+                href={`/${chainSlug}/${addContractToProject.data.result.contractAddress}`}
+                target="_blank"
+              >
+                View Contract <ExternalLinkIcon className="size-4" />
+              </Link>
+            </Button>
+          ) : (
+            <Button type="submit" className="gap-2">
+              {addContractToProject.isPending ? (
+                <Spinner className="size-4" />
+              ) : (
+                <PlusIcon className="size-4" />
+              )}
+
+              {addContractToProject.isPending
+                ? "Importing contract"
+                : "Import Contract"}
+            </Button>
+          )}
         </div>
       </form>
     </Form>
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 ce775564c3d..a05460d7416 100644
--- a/apps/dashboard/src/components/contract-components/publisher/publisher-header.tsx
+++ b/apps/dashboard/src/components/contract-components/publisher/publisher-header.tsx
@@ -41,7 +41,7 @@ export const PublisherHeader: React.FC<PublisherHeaderProps> = ({ wallet }) => {
             fallbackComponent={
               <AccountBlobbie className="size-10 rounded-full" />
             }
-            loadingComponent={<Skeleton className="size-14 rounded-full" />}
+            loadingComponent={<Skeleton className="size-10 rounded-full" />}
             className="size-10 rounded-full border border-border border-solid object-cover"
           />
 
diff --git a/apps/dashboard/src/components/contract-components/tables/cells.tsx b/apps/dashboard/src/components/contract-components/tables/cells.tsx
index ea0a637f487..41dac59fa77 100644
--- a/apps/dashboard/src/components/contract-components/tables/cells.tsx
+++ b/apps/dashboard/src/components/contract-components/tables/cells.tsx
@@ -5,7 +5,6 @@ import { SkeletonContainer } from "@/components/ui/skeleton";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { cn } from "@/lib/utils";
 import { useDashboardContractMetadata } from "@3rdweb-sdk/react/hooks/useDashboardContractMetadata";
-import type { BasicContract } from "contract-ui/types/types";
 import { useChainSlug } from "hooks/chains/chainSlug";
 import { useV5DashboardChain } from "lib/v5-adapter";
 import Link from "next/link";
@@ -15,123 +14,111 @@ import { shortenIfAddress } from "utils/usedapp-external";
 import { THIRDWEB_DEPLOYER_ADDRESS } from "../../../constants/addresses";
 import { usePublishedContractsFromDeploy } from "../hooks";
 
-interface AsyncContractNameCellProps {
-  cell: BasicContract;
+export const ContractNameCell = memo(function ContractNameCell(props: {
+  chainId: string;
+  contractAddress: string;
   linkOverlay?: boolean;
-}
-
-// The row components for the contract table, in the <Your contracts> page
-
-export const AsyncContractNameCell = memo(
-  ({ cell, linkOverlay }: AsyncContractNameCellProps) => {
-    const chainSlug = useChainSlug(cell.chainId);
-    const chain = useV5DashboardChain(cell.chainId);
-    const client = useThirdwebClient();
-
-    const contract = getContract({
-      client,
-      address: cell.address,
-      chain,
+}) {
+  const chainSlug = useChainSlug(Number(props.chainId));
+  const chain = useV5DashboardChain(Number(props.chainId));
+  const client = useThirdwebClient();
+
+  const contract = getContract({
+    client,
+    address: props.contractAddress,
+    chain,
+  });
+
+  const contractMetadata = useDashboardContractMetadata(contract);
+
+  return (
+    <SkeletonContainer
+      loadedData={
+        contractMetadata.isFetching ? undefined : contractMetadata.data?.name
+      }
+      skeletonData="Custom Contract"
+      render={(v) => {
+        return (
+          <Link
+            href={`/${chainSlug}/${props.contractAddress}`}
+            passHref
+            className={cn(
+              "text-foreground",
+              props.linkOverlay && "before:absolute before:inset-0",
+            )}
+          >
+            {v || shortenIfAddress(props.contractAddress)}
+          </Link>
+        );
+      }}
+    />
+  );
+});
+
+export const ContractTypeCell = memo(function ContractTypeCell(props: {
+  chainId: string;
+  contractAddress: string;
+}) {
+  const client = useThirdwebClient();
+  const chain = useV5DashboardChain(Number(props.chainId));
+  const contract = getContract({
+    client,
+    address: props.contractAddress,
+    chain,
+  });
+
+  const publishedContractsFromDeployQuery =
+    usePublishedContractsFromDeploy(contract);
+
+  const publishedContractsFromDeployOriginal =
+    publishedContractsFromDeployQuery.data || [];
+
+  const publishedContractsFromDeploySorted = [
+    ...publishedContractsFromDeployOriginal,
+  ]
+    // latest first
+    .reverse()
+    // prioritize showing the publisher === thirdweb
+    .sort((a, b) => {
+      const aIsTWPublisher = a.publisher === THIRDWEB_DEPLOYER_ADDRESS;
+      const bIsTWPublisher = b.publisher === THIRDWEB_DEPLOYER_ADDRESS;
+      if (aIsTWPublisher && !bIsTWPublisher) {
+        return -1;
+      }
+      if (!aIsTWPublisher && bIsTWPublisher) {
+        return 1;
+      }
+      return 0;
     });
 
-    const contractMetadata = useDashboardContractMetadata(contract);
+  const contractMetadata = useDashboardContractMetadata(contract);
 
-    return (
-      <SkeletonContainer
-        loadedData={
-          contractMetadata.isFetching ? undefined : contractMetadata.data?.name
-        }
-        skeletonData="Custom Contract"
-        render={(v) => {
-          return (
-            <Link
-              href={`/${chainSlug}/${cell.address}`}
-              passHref
-              className={cn(
-                "text-foreground",
-                linkOverlay && "before:absolute before:inset-0",
-              )}
-            >
-              {v || shortenIfAddress(cell.address)}
-            </Link>
-          );
-        }}
-      />
-    );
-  },
-);
-
-AsyncContractNameCell.displayName = "AsyncContractNameCell";
-
-interface AsyncContractTypeCellProps {
-  cell: BasicContract;
-}
-
-export const AsyncContractTypeCell = memo(
-  ({ cell }: AsyncContractTypeCellProps) => {
-    const client = useThirdwebClient();
-    const chain = useV5DashboardChain(cell.chainId);
-    const contract = getContract({
-      client,
-      address: cell.address,
-      chain,
-    });
-
-    const publishedContractsFromDeployQuery =
-      usePublishedContractsFromDeploy(contract);
-
-    const publishedContractsFromDeployOriginal =
-      publishedContractsFromDeployQuery.data || [];
-
-    const publishedContractsFromDeploySorted = [
-      ...publishedContractsFromDeployOriginal,
-    ]
-      // latest first
-      .reverse()
-      // prioritize showing the publisher === thirdweb
-      .sort((a, b) => {
-        const aIsTWPublisher = a.publisher === THIRDWEB_DEPLOYER_ADDRESS;
-        const bIsTWPublisher = b.publisher === THIRDWEB_DEPLOYER_ADDRESS;
-        if (aIsTWPublisher && !bIsTWPublisher) {
-          return -1;
-        }
-        if (!aIsTWPublisher && bIsTWPublisher) {
-          return 1;
-        }
-        return 0;
-      });
-
-    const contractMetadata = useDashboardContractMetadata(contract);
-
-    const contractType =
-      publishedContractsFromDeploySorted[0]?.displayName ||
-      publishedContractsFromDeploySorted[0]?.name;
-
-    return (
-      <SkeletonContainer
-        loadedData={contractType || contractMetadata.data?.contractType}
-        skeletonData="Custom Contract"
-        render={(v) => {
-          if (v === contractType) {
-            return (
-              <Badge
-                className="line-clamp-1 inline-block max-w-[200px] truncate py-1"
-                variant="outline"
-              >
-                {v}
-              </Badge>
-            );
-          }
+  const contractType =
+    publishedContractsFromDeploySorted[0]?.displayName ||
+    publishedContractsFromDeploySorted[0]?.name;
 
+  return (
+    <SkeletonContainer
+      loadedData={contractType || contractMetadata.data?.contractType}
+      skeletonData="Custom Contract"
+      render={(v) => {
+        if (v === contractType) {
           return (
-            <Badge variant="outline" className="inline-block py-1">
-              {v || "Custom"}
+            <Badge
+              className="line-clamp-1 inline-block max-w-[200px] truncate py-1"
+              variant="outline"
+            >
+              {v}
             </Badge>
           );
-        }}
-      />
-    );
-  },
-);
+        }
 
-AsyncContractTypeCell.displayName = "AsyncContractTypeCell";
+        return (
+          <Badge variant="outline" className="inline-block py-1">
+            {v || "Custom"}
+          </Badge>
+        );
+      }}
+    />
+  );
+});
diff --git a/apps/dashboard/src/components/contract-components/tables/contract-table.stories.tsx b/apps/dashboard/src/components/contract-components/tables/contract-table.stories.tsx
new file mode 100644
index 00000000000..197c865052d
--- /dev/null
+++ b/apps/dashboard/src/components/contract-components/tables/contract-table.stories.tsx
@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ThirdwebProvider } from "thirdweb/react";
+import type { ProjectContract } from "../../../app/account/contracts/_components/getProjectContracts";
+import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { ContractTableUI } from "./contract-table";
+
+const meta = {
+  title: "Contracts/ContractTable",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+const popularPolygonNFTs: ProjectContract[] = [
+  projectContractStub("137", "0x83a5564378839eef0721bc68a0fbeb92e2de73d2"),
+  projectContractStub("137", "0x9e8ea82e76262e957d4cc24e04857a34b0d8f062"),
+  projectContractStub("137", "0xc93c53de60d1a28df01e41f5bc04619039d2ef4f"),
+  projectContractStub("137", "0x4d544035500d7ac1b42329c70eb58e77f8249f0f"),
+  projectContractStub("137", "0x77bd275ff2b3dc007475aac9ce7f408f5a800188"),
+];
+
+const EthereumPopularNFTs: ProjectContract[] = [
+  projectContractStub("1", "0xed5af388653567af2f388e6224dc7c4b3241c544"),
+  projectContractStub("1", "0x5af0d9827e0c53e4799bb226655a1de152a425a5"),
+  projectContractStub("1", "0xbd3531da5cf5857e7cfaa92426877b022e612cf8"),
+  projectContractStub("1", "0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d"),
+  projectContractStub("1", "0x9830b32f7210f0857a859c2a86387e4d1bb760b8"),
+];
+
+const basePopularTokens: ProjectContract[] = [
+  projectContractStub("8453", "0xC73e76Aa9F14C1837CDB49bd028E8Ff5a0a71dAD"),
+  projectContractStub("8453", "0x0555E30da8f98308EdB960aa94C0Db47230d2B9c"),
+  projectContractStub("8453", "0x12418783e860997eb99e8aCf682DF952F721cF62"),
+  projectContractStub("8453", "0xdca716b7360b76383e8f7b82aefcbe632fc381af"),
+  projectContractStub("8453", "0x2C8C89C442436CC6C0a77943E09c8Daf49Da3161"),
+];
+
+function Story() {
+  const removeContractStub = async (contractId: string) => {
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    console.log("Removed contract", contractId);
+  };
+
+  return (
+    <ThirdwebProvider>
+      <div className="container flex flex-col gap-12 py-10">
+        <BadgeContainer label="0 Contracts">
+          <ContractTableUI
+            contracts={[]}
+            removeContractFromProject={removeContractStub}
+            pageSize={10}
+          />
+        </BadgeContainer>
+
+        <BadgeContainer label="1 Contract">
+          <ContractTableUI
+            contracts={[popularPolygonNFTs[0] as ProjectContract]}
+            pageSize={10}
+            removeContractFromProject={removeContractStub}
+          />
+        </BadgeContainer>
+
+        <BadgeContainer label="5 Contracts, 1 chain">
+          <ContractTableUI
+            contracts={popularPolygonNFTs}
+            pageSize={10}
+            removeContractFromProject={removeContractStub}
+          />
+        </BadgeContainer>
+
+        <BadgeContainer label="10 Contracts, 2 chains">
+          <ContractTableUI
+            contracts={[...popularPolygonNFTs, ...EthereumPopularNFTs]}
+            pageSize={10}
+            removeContractFromProject={removeContractStub}
+          />
+        </BadgeContainer>
+
+        <BadgeContainer label="15 Contracts, 3 chains">
+          <ContractTableUI
+            contracts={[
+              ...popularPolygonNFTs,
+              ...EthereumPopularNFTs,
+              ...basePopularTokens,
+            ]}
+            pageSize={10}
+            removeContractFromProject={removeContractStub}
+          />
+        </BadgeContainer>
+      </div>
+    </ThirdwebProvider>
+  );
+}
+
+function projectContractStub(
+  chainId: string,
+  contractAddress: string,
+): ProjectContract {
+  return {
+    chainId,
+    contractAddress,
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    id: `${chainId}-${contractAddress}`,
+  };
+}
diff --git a/apps/dashboard/src/components/contract-components/tables/contract-table.tsx b/apps/dashboard/src/components/contract-components/tables/contract-table.tsx
new file mode 100644
index 00000000000..e3de6027ed4
--- /dev/null
+++ b/apps/dashboard/src/components/contract-components/tables/contract-table.tsx
@@ -0,0 +1,339 @@
+"use client";
+
+import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { SkeletonContainer } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { useMutation } from "@tanstack/react-query";
+import { ChainIcon } from "components/icons/ChainIcon";
+import { NetworkSelectDropdown } from "components/selects/NetworkSelectDropdown";
+import { EllipsisVerticalIcon, XIcon } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import React from "react";
+import { toast } from "sonner";
+import { PaginationButtons } from "../../../@/components/pagination-buttons";
+import { cn } from "../../../@/lib/utils";
+import type { ProjectContract } from "../../../app/account/contracts/_components/getProjectContracts";
+import { removeContractFromProject } from "../../../app/team/[team_slug]/[project_slug]/hooks/project-contracts";
+import { useAllChainsData } from "../../../hooks/chains/allChains";
+import { ContractNameCell, ContractTypeCell } from "./cells";
+
+type ContractTableFilters = {
+  chainId: number | undefined;
+};
+
+export function ContractTable(props: {
+  contracts: ProjectContract[];
+  pageSize: number;
+  teamId: string;
+  projectId: string;
+}) {
+  return (
+    <ContractTableUI
+      contracts={props.contracts}
+      pageSize={props.pageSize}
+      removeContractFromProject={async (contractId) => {
+        await removeContractFromProject({
+          teamId: props.teamId,
+          projectId: props.projectId,
+          contractId,
+        });
+      }}
+    />
+  );
+}
+
+export function ContractTableUI(props: {
+  contracts: ProjectContract[];
+  pageSize: number;
+  removeContractFromProject: (contractId: string) => Promise<void>;
+}) {
+  // instantly update the table without waiting for router refresh by adding deleted contract ids to the state
+  const [deletedContractIds, setDeletedContractIds] = useState<string[]>([]);
+
+  const contracts = useMemo(() => {
+    return props.contracts.filter(
+      (contract) => !deletedContractIds.includes(contract.id),
+    );
+  }, [props.contracts, deletedContractIds]);
+
+  const uniqueChainIds = useMemo(() => {
+    const set = new Set<number>();
+    for (const contract of contracts) {
+      set.add(Number(contract.chainId));
+    }
+    return [...set];
+  }, [contracts]);
+
+  const [page, setPage] = useState(1);
+  const [filters, _setFilters] = useState<ContractTableFilters>({
+    chainId: undefined,
+  });
+
+  const setFilters = useCallback((filters: ContractTableFilters) => {
+    setPage(1);
+    _setFilters(filters);
+  }, []);
+
+  const filteredContracts = useMemo(() => {
+    if (filters.chainId) {
+      return contracts.filter(
+        (contract) => Number(contract.chainId) === filters.chainId,
+      );
+    }
+    return contracts;
+  }, [contracts, filters.chainId]);
+
+  const totalCount = filteredContracts.length;
+  const showPagination = totalCount > props.pageSize;
+  const totalPages = Math.ceil(totalCount / props.pageSize);
+
+  const paginatedContracts = filteredContracts.slice(
+    (page - 1) * props.pageSize,
+    page * props.pageSize,
+  );
+
+  // when user deletes the last contract for a chain and that chain is set as filter - remove chain filter
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (filters.chainId && filteredContracts.length === 0) {
+      setFilters({
+        ...filters,
+        chainId: undefined,
+      });
+    }
+  }, [filters, filteredContracts, setFilters]);
+
+  return (
+    <div>
+      <TableContainer className={cn(showPagination && "rounded-b-none")}>
+        <Table>
+          <TableHeader className="z-0">
+            <TableRow>
+              <TableHead>Name</TableHead>
+              <TableHead>Type</TableHead>
+              <TableHead className="tracking-normal">
+                <NetworkFilterCell
+                  chainIds={uniqueChainIds}
+                  chainId={
+                    filters.chainId ? filters.chainId.toString() : undefined
+                  }
+                  setChainId={(chainId) => {
+                    setFilters({
+                      ...filters,
+                      chainId: chainId ? Number(chainId) : undefined,
+                    });
+                  }}
+                />
+              </TableHead>
+              <TableHead>Contract Address</TableHead>
+              <TableHead>Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+
+          <TableBody>
+            {paginatedContracts.map((contract) => {
+              return (
+                <TableRow
+                  key={contract.id}
+                  linkBox
+                  className="cursor-pointer hover:bg-accent/50"
+                >
+                  <TableCell>
+                    <ContractNameCell
+                      chainId={contract.chainId}
+                      contractAddress={contract.contractAddress}
+                      linkOverlay
+                    />
+                  </TableCell>
+
+                  <TableCell>
+                    <ContractTypeCell
+                      chainId={contract.chainId}
+                      contractAddress={contract.contractAddress}
+                    />
+                  </TableCell>
+
+                  <TableCell>
+                    <ChainNameCell chainId={contract.chainId} />
+                  </TableCell>
+
+                  <TableCell>
+                    <CopyAddressButton
+                      copyIconPosition="left"
+                      address={contract.contractAddress}
+                      variant="ghost"
+                      className="-translate-x-2 relative z-10"
+                    />
+                  </TableCell>
+
+                  <TableCell>
+                    <ContractActionsCell
+                      contractId={contract.id}
+                      removeContractFromProject={
+                        props.removeContractFromProject
+                      }
+                      onContractRemoved={() => {
+                        setDeletedContractIds((v) => {
+                          return [...v, contract.id];
+                        });
+                      }}
+                    />
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+
+        {contracts.length === 0 && (
+          <div className="flex h-[200px] items-center justify-center text-muted-foreground">
+            No Contracts
+          </div>
+        )}
+      </TableContainer>
+
+      {showPagination && (
+        <div className="rounded-b-lg border-x border-b bg-card py-6">
+          <PaginationButtons
+            activePage={page}
+            onPageClick={setPage}
+            totalPages={totalPages}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+const NetworkFilterCell = React.memo(function NetworkFilterCell({
+  chainId: selectedChain,
+  setChainId: setSelectedChain,
+  chainIds,
+}: {
+  chainId: string | undefined;
+  setChainId: (chainId: string | undefined) => void;
+  chainIds: number[];
+}) {
+  if (chainIds.length < 2) {
+    return <> NETWORK </>;
+  }
+
+  return (
+    <NetworkSelectDropdown
+      useCleanChainName={true}
+      enabledChainIds={chainIds}
+      onSelect={(chain) => setSelectedChain(chain)}
+      selectedChain={selectedChain}
+    />
+  );
+});
+
+const ChainNameCell = React.memo(function ChainNameCell(props: {
+  chainId: string;
+}) {
+  const { idToChain } = useAllChainsData();
+  const data = idToChain.get(Number(props.chainId));
+  const cleanedChainName =
+    data?.name?.replace("Mainnet", "").trim() ||
+    `Unknown Network (#${props.chainId})`;
+  return (
+    <div className="flex items-center gap-2">
+      <ChainIcon className="size-5" ipfsSrc={data?.icon?.url} />
+      <SkeletonContainer
+        loadedData={data ? cleanedChainName : undefined}
+        skeletonData={`Chain ID ${props.chainId}`}
+        render={(v) => {
+          return <p className="text-muted-foreground text-sm">{v}</p>;
+        }}
+      />
+
+      {data?.testnet && (
+        <Badge variant="outline" className="text-muted-foreground">
+          Testnet
+        </Badge>
+      )}
+    </div>
+  );
+});
+
+const ContractActionsCell = React.memo(function ContractActionsCell(props: {
+  contractId: string;
+  removeContractFromProject: (contractId: string) => Promise<void>;
+  onContractRemoved: () => void;
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          size="icon"
+          variant="ghost"
+          className="relative z-10"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <EllipsisVerticalIcon className="size-4" />
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent onClick={(e) => e.stopPropagation()}>
+        <RemoveContractButton
+          contractId={props.contractId}
+          removeContractFromProject={props.removeContractFromProject}
+          onContractRemoved={props.onContractRemoved}
+        />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+});
+
+function RemoveContractButton(props: {
+  removeContractFromProject: (contractId: string) => Promise<void>;
+  onContractRemoved?: () => void;
+  contractId: string;
+}) {
+  const removeMuation = useMutation({
+    mutationFn: props.removeContractFromProject,
+  });
+
+  return (
+    <Button
+      variant="ghost"
+      onClick={(e) => {
+        e.stopPropagation();
+        removeMuation.mutateAsync(props.contractId, {
+          onSuccess: () => {
+            props.onContractRemoved?.();
+            toast.success("Contract removed successfully");
+          },
+          onError: () => {
+            toast.error("Failed to remove contract");
+          },
+        });
+      }}
+      disabled={removeMuation.isPending}
+      className="justify-start gap-2"
+    >
+      {removeMuation.isPending ? (
+        <Spinner className="size-4" />
+      ) : (
+        <XIcon className="size-4 text-destructive-text" />
+      )}
+      Remove from project
+    </Button>
+  );
+}
diff --git a/apps/dashboard/src/components/contract-components/tables/deployed-contracts.tsx b/apps/dashboard/src/components/contract-components/tables/deployed-contracts.tsx
deleted file mode 100644
index 74aba64d490..00000000000
--- a/apps/dashboard/src/components/contract-components/tables/deployed-contracts.tsx
+++ /dev/null
@@ -1,380 +0,0 @@
-"use client";
-
-import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { SkeletonContainer } from "@/components/ui/skeleton";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import {
-  type useAllContractList,
-  useRemoveContractMutation,
-} from "@3rdweb-sdk/react/hooks/useRegistry";
-import { ChainIcon } from "components/icons/ChainIcon";
-import { NetworkSelectDropdown } from "components/selects/NetworkSelectDropdown";
-import type { BasicContract } from "contract-ui/types/types";
-import { EllipsisVerticalIcon, XIcon } from "lucide-react";
-import { memo, useEffect, useMemo, useState } from "react";
-import {
-  type Column,
-  type ColumnInstance,
-  type Row,
-  useFilters,
-  usePagination,
-  useTable,
-} from "react-table";
-import { useAllChainsData } from "../../../hooks/chains/allChains";
-import { AsyncContractNameCell, AsyncContractTypeCell } from "./cells";
-import { ShowMoreButton } from "./show-more-button";
-
-interface DeployedContractsProps {
-  contractList: ReturnType<typeof useAllContractList>["data"];
-  limit?: number;
-  onContractRemoved?: () => void;
-}
-
-export const DeployedContracts: React.FC<DeployedContractsProps> = ({
-  contractList,
-  limit = 10,
-  onContractRemoved,
-}) => {
-  const chainIdsWithDeployments = useMemo(() => {
-    const set = new Set<number>();
-    // biome-ignore lint/complexity/noForEach: FIXME
-    contractList.forEach((contract) => {
-      set.add(contract.chainId);
-    });
-    return [...set];
-  }, [contractList]);
-
-  return (
-    <div className="flex flex-col gap-8">
-      <ContractTable
-        combinedList={contractList}
-        limit={limit}
-        chainIdsWithDeployments={chainIdsWithDeployments}
-        onContractRemoved={onContractRemoved}
-      />
-
-      {contractList.length === 0 && (
-        <div className="flex h-[100px] items-center justify-center text-muted-foreground">
-          No contracts found
-        </div>
-      )}
-    </div>
-  );
-};
-
-type RemoveFromDashboardButtonProps = {
-  chainId: number;
-  contractAddress: string;
-  onContractRemoved?: () => void;
-};
-
-const RemoveFromDashboardButton: React.FC<RemoveFromDashboardButtonProps> = ({
-  chainId,
-  contractAddress,
-  onContractRemoved,
-}) => {
-  const mutation = useRemoveContractMutation();
-
-  return (
-    <Button
-      variant="ghost"
-      onClick={(e) => {
-        e.stopPropagation();
-        mutation.mutateAsync(
-          { chainId, contractAddress },
-          {
-            onSuccess: () => {
-              onContractRemoved?.();
-            },
-          },
-        );
-      }}
-      disabled={mutation.isPending}
-      className="!bg-background hover:!bg-accent gap-2"
-    >
-      {mutation.isPending ? (
-        <Spinner className="size-4" />
-      ) : (
-        <XIcon className="size-4 text-destructive-text" />
-      )}
-      Remove from dashboard
-    </Button>
-  );
-};
-
-type SelectNetworkFilterProps = {
-  column: ColumnInstance<BasicContract>;
-  chainIdsWithDeployments: number[];
-};
-
-// This is a custom filter UI for selecting from a list of chains that the user deployed to
-function SelectNetworkFilter({
-  column: { setFilter, filterValue },
-  chainIdsWithDeployments,
-}: SelectNetworkFilterProps) {
-  if (chainIdsWithDeployments.length < 2) {
-    return <> NETWORK </>;
-  }
-  return (
-    <NetworkSelectDropdown
-      useCleanChainName={true}
-      enabledChainIds={chainIdsWithDeployments}
-      onSelect={(selectedChain) => {
-        setFilter(selectedChain);
-      }}
-      selectedChain={filterValue as undefined | string}
-    />
-  );
-}
-
-interface ContractTableProps {
-  combinedList: BasicContract[];
-  limit: number;
-  chainIdsWithDeployments: number[];
-  onContractRemoved?: () => void;
-}
-
-const ContractTable: React.FC<ContractTableProps> = ({
-  combinedList,
-  limit,
-  chainIdsWithDeployments,
-  onContractRemoved,
-}) => {
-  const { idToChain } = useAllChainsData();
-
-  const columns: Column<(typeof combinedList)[number]>[] = useMemo(
-    () => [
-      {
-        Header: "Name",
-        accessor: (row) => row.address,
-        // biome-ignore lint/suspicious/noExplicitAny: FIXME
-        Cell: (cell: any) => {
-          return <AsyncContractNameCell cell={cell.row.original} linkOverlay />;
-        },
-      },
-      {
-        Header: "Type",
-        accessor: (row) => row.address,
-        // biome-ignore lint/suspicious/noExplicitAny: FIXME
-        Cell: (cell: any) => <AsyncContractTypeCell cell={cell.row.original} />,
-      },
-      {
-        // No header, show filter instead
-        Header: () => null,
-        id: "Network",
-        accessor: (row) => row.chainId,
-        Filter: (props) => (
-          <SelectNetworkFilter
-            {...props}
-            chainIdsWithDeployments={chainIdsWithDeployments}
-          />
-        ),
-        filter: "equals",
-        // biome-ignore lint/suspicious/noExplicitAny: FIXME
-        Cell: (cell: any) => {
-          const data = idToChain.get(cell.row.original.chainId);
-          const cleanedChainName =
-            data?.name?.replace("Mainnet", "").trim() ||
-            `Unknown Network (#${cell.row.original.chainId})`;
-          return (
-            <div className="flex items-center gap-2">
-              <ChainIcon className="size-5" ipfsSrc={data?.icon?.url} />
-              <SkeletonContainer
-                loadedData={data ? cleanedChainName : undefined}
-                skeletonData={`Chain ID ${cell.row.original.chainId}`}
-                render={(v) => {
-                  return <p className="text-muted-foreground text-sm">{v}</p>;
-                }}
-              />
-
-              {data?.testnet && (
-                <Badge variant="outline" className="text-muted-foreground">
-                  Testnet
-                </Badge>
-              )}
-            </div>
-          );
-        },
-      },
-      {
-        Header: "Contract Address",
-        accessor: (row) => row.address,
-        // biome-ignore lint/suspicious/noExplicitAny: FIXME
-        Cell: (cell: any) => {
-          return (
-            <CopyAddressButton
-              copyIconPosition="left"
-              address={cell.row.original.address}
-              variant="ghost"
-              className="relative z-10"
-            />
-          );
-        },
-      },
-      {
-        id: "actions",
-        // biome-ignore lint/suspicious/noExplicitAny: FIXME
-        Cell: (cell: any) => {
-          return (
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="relative z-10"
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  <EllipsisVerticalIcon className="size-4" />
-                </Button>
-              </DropdownMenuTrigger>
-
-              <DropdownMenuContent
-                onClick={(e) => e.stopPropagation()}
-                className="bg-background"
-              >
-                <RemoveFromDashboardButton
-                  contractAddress={cell.cell.row.original.address}
-                  chainId={cell.cell.row.original.chainId}
-                  onContractRemoved={onContractRemoved}
-                />
-              </DropdownMenuContent>
-            </DropdownMenu>
-          );
-        },
-      },
-    ],
-    [chainIdsWithDeployments, idToChain, onContractRemoved],
-  );
-
-  const defaultColumn = useMemo(
-    () => ({
-      Filter: "",
-    }),
-    [],
-  );
-
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    prepareRow,
-    page,
-    canNextPage,
-    setPageSize,
-    state: { pageSize },
-  } = useTable(
-    {
-      columns,
-      data: combinedList,
-      defaultColumn,
-    },
-    // these will be removed with the @tanstack/react-table v8 version
-    // eslint-disable-next-line react-compiler/react-compiler
-    useFilters,
-    // eslint-disable-next-line react-compiler/react-compiler
-    usePagination,
-  );
-
-  // the ShowMoreButton component callback sets this state variable
-  const [numRowsOnPage, setNumRowsOnPage] = useState(limit);
-  // when the state variable is updated, update the page size
-
-  // FIXME: re-work tables and pagination with @tanstack/table@latest - which (I believe) does not need this workaround anymore
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    setPageSize(numRowsOnPage);
-  }, [numRowsOnPage, setPageSize]);
-
-  return (
-    <TableContainer>
-      <Table {...getTableProps()}>
-        <TableHeader>
-          {headerGroups.map((headerGroup, index) => (
-            // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-            <TableRow {...headerGroup.getHeaderGroupProps()} key={index}>
-              {headerGroup.headers.map((column, i) => (
-                <TableHead
-                  {...column.getHeaderProps()}
-                  // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                  key={i}
-                  className="py-3"
-                >
-                  <p className="text-muted-foreground text-sm">
-                    {column.render("Header")}
-                    <span>
-                      {column.canFilter ? column.render("Filter") : null}
-                    </span>
-                  </p>
-                </TableHead>
-              ))}
-            </TableRow>
-          ))}
-        </TableHeader>
-
-        <TableBody {...getTableBodyProps()}>
-          {page.map((row) => {
-            prepareRow(row);
-            return (
-              <ContractTableRow
-                row={row}
-                key={row.original.address + row.original.chainId}
-              />
-            );
-          })}
-        </TableBody>
-      </Table>
-      {canNextPage && (
-        <ShowMoreButton
-          limit={limit}
-          showMoreLimit={pageSize}
-          setShowMoreLimit={setNumRowsOnPage}
-        />
-      )}
-    </TableContainer>
-  );
-};
-
-const ContractTableRow = memo(({ row }: { row: Row<BasicContract> }) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { key, ...rowProps } = row.getRowProps();
-
-  return (
-    <TableRow
-      {...rowProps}
-      role="group"
-      linkBox
-      className="cursor-pointer hover:bg-accent/50"
-    >
-      {row.cells.map((cell, cellIndex) => {
-        return (
-          <TableCell
-            className="py-3"
-            {...cell.getCellProps()}
-            // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-            key={cellIndex}
-          >
-            {cell.render("Cell")}
-          </TableCell>
-        );
-      })}
-    </TableRow>
-  );
-});
-
-ContractTableRow.displayName = "ContractTableRow";
diff --git a/apps/dashboard/src/components/contract-components/utils.ts b/apps/dashboard/src/components/contract-components/utils.ts
deleted file mode 100644
index a4fbcd7bcaf..00000000000
--- a/apps/dashboard/src/components/contract-components/utils.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { MULTICHAIN_REGISTRY_CONTRACT } from "constants/contracts";
-import {
-  DASHBOARD_ENGINE_RELAYER_URL,
-  DASHBOARD_FORWARDER_ADDRESS,
-} from "constants/misc";
-import { prepareContractCall, sendAndConfirmTransaction } from "thirdweb";
-import type { Account } from "thirdweb/wallets";
-
-type ContractInput = {
-  address: string;
-  chainId: number;
-};
-
-type AddContractInput = ContractInput & {
-  metadataURI?: string;
-};
-
-export async function addContractToMultiChainRegistry(
-  contractData: AddContractInput,
-  account: Account,
-  gasOverride?: bigint,
-) {
-  const transaction = prepareContractCall({
-    contract: MULTICHAIN_REGISTRY_CONTRACT,
-    method: "function add(address, address, uint256, string)",
-    params: [
-      account.address,
-      contractData.address,
-      BigInt(contractData.chainId),
-      contractData.metadataURI || "",
-    ],
-  });
-
-  await sendAndConfirmTransaction({
-    transaction: {
-      ...transaction,
-      gas: gasOverride || transaction.gas,
-    },
-    account,
-    gasless: {
-      experimentalChainlessSupport: true,
-      provider: "engine",
-      relayerUrl: DASHBOARD_ENGINE_RELAYER_URL,
-      relayerForwarderAddress: DASHBOARD_FORWARDER_ADDRESS,
-    },
-  });
-}
diff --git a/apps/dashboard/src/components/notices/AnnouncementBanner.tsx b/apps/dashboard/src/components/notices/AnnouncementBanner.tsx
index 47b7ae08de8..8bedc8dbf56 100644
--- a/apps/dashboard/src/components/notices/AnnouncementBanner.tsx
+++ b/apps/dashboard/src/components/notices/AnnouncementBanner.tsx
@@ -1,9 +1,8 @@
 "use client";
 import { Button } from "@/components/ui/button";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
-import { isAfter } from "date-fns";
 import { useLocalStorage } from "hooks/useLocalStorage";
-import { ChevronRightIcon, XIcon } from "lucide-react";
+import { CircleAlertIcon, XIcon } from "lucide-react";
 import { useSelectedLayoutSegment } from "next/navigation";
 
 export function AnnouncementBanner(props: {
@@ -25,24 +24,18 @@ export function AnnouncementBanner(props: {
   }
 
   return (
-    <div
-      className="fade-in-0 relative w-full animate-in bg-background py-2.5 pr-14 duration-400"
-      style={{
-        backgroundImage:
-          "linear-gradient(145deg, hsl(290deg 85% 50%), hsl(220deg 85% 50%))",
-      }}
-    >
+    <div className="fade-in-0 relative w-full animate-in bg-blue-700 px-4 py-3 pr-14 text-white duration-400">
       <TrackedLinkTW
         href={props.href}
         category="announcement"
         label={props.trackingLabel}
         target={props.href.startsWith("http") ? "_blank" : undefined}
-        className="!text-white container flex cursor-pointer items-center gap-2 lg:justify-center "
+        className="ontainer flex cursor-pointer items-center gap-2 lg:justify-center "
       >
-        <span className="inline-block font-semibold leading-normal hover:underline">
+        <CircleAlertIcon className="hidden size-5 shrink-0 lg:block" />
+        <span className="inline-block font-medium leading-normal hover:underline">
           {props.label}
         </span>
-        <ChevronRightIcon className="hidden size-5 opacity-80 lg:block" />
       </TrackedLinkTW>
 
       <Button
@@ -50,7 +43,7 @@ export function AnnouncementBanner(props: {
         variant="ghost"
         onClick={() => setHasDismissedAnnouncement(true)}
         aria-label="Close announcement"
-        className="-translate-y-1/2 !text-white absolute top-1/2 right-2 h-auto w-auto p-2 hover:bg-white/15"
+        className="-translate-y-1/2 absolute top-1/2 right-2 h-auto w-auto p-2 hover:bg-white/15 hover:text-white"
       >
         <XIcon className="size-5" />
       </Button>
@@ -58,19 +51,12 @@ export function AnnouncementBanner(props: {
   );
 }
 
-export function UnlimitedWalletsBanner() {
-  // hide banner after 31st December 2024
-  const shouldHideBanner = isAfter(new Date(), new Date("31 Dec 2024"));
-
-  if (shouldHideBanner) {
-    return null;
-  }
-
+export function OrganizeContractsToProjectsBanner() {
   return (
     <AnnouncementBanner
-      href="/team/~/~/settings/billing?coupon=FREEWALLETS24"
-      label='Claim 12 months of free in-app wallets. Use code "FREEWALLETS24". Redeem offer by December 31st!'
-      trackingLabel="unlimited-wallets"
+      href="https://blog.thirdweb.com/organize-contracts/"
+      label="Your contracts are now organized into projects. Learn more"
+      trackingLabel="organize-contracts-to-projects"
     />
   );
 }
diff --git a/apps/dashboard/src/components/selects/NetworkSelectDropdown.tsx b/apps/dashboard/src/components/selects/NetworkSelectDropdown.tsx
index 55c59002a28..aa7e3bce4f0 100644
--- a/apps/dashboard/src/components/selects/NetworkSelectDropdown.tsx
+++ b/apps/dashboard/src/components/selects/NetworkSelectDropdown.tsx
@@ -61,13 +61,17 @@ export const NetworkSelectDropdown: React.FC<NetworkSelectDropdownProps> = ({
         <SelectValue />
       </SelectTrigger>
 
-      <SelectContent align="center" className="rounded-lg shadow-lg">
+      <SelectContent
+        align="center"
+        className="min-w-[280px] rounded-lg shadow-lg"
+      >
         <SelectItem value="all-chains">
           <div className="flex items-center gap-2 py-1" data-all-chains>
             <ChainIcon ipfsSrc={undefined} className="size-5" />
             All Networks
           </div>
         </SelectItem>
+
         {chains.map((chain) => (
           <SelectItem key={chain.chainId} value={String(chain.chainId)}>
             <div className="flex items-center gap-2 py-1">
diff --git a/apps/dashboard/src/components/smart-wallets/AccountFactories/account-cell.tsx b/apps/dashboard/src/components/smart-wallets/AccountFactories/account-cell.tsx
index 6ae897e4c2e..19f3c36562b 100644
--- a/apps/dashboard/src/components/smart-wallets/AccountFactories/account-cell.tsx
+++ b/apps/dashboard/src/components/smart-wallets/AccountFactories/account-cell.tsx
@@ -2,17 +2,12 @@
 
 import { SkeletonContainer } from "@/components/ui/skeleton";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
-import type { BasicContract } from "contract-ui/types/types";
 import { memo } from "react";
 import { getContract } from "thirdweb";
 import { getAllAccounts } from "thirdweb/extensions/erc4337";
 import { useReadContract } from "thirdweb/react";
 import { useV5DashboardChain } from "../../../lib/v5-adapter";
 
-interface AsyncFactoryAccountCellProps {
-  cell: BasicContract;
-}
-
 function useAccountCount(address: string, chainId: number) {
   const chain = useV5DashboardChain(chainId);
   const client = useThirdwebClient();
@@ -30,19 +25,21 @@ function useAccountCount(address: string, chainId: number) {
   });
 }
 
-export const AsyncFactoryAccountCell = memo(
-  ({ cell }: AsyncFactoryAccountCellProps) => {
-    const accountsQuery = useAccountCount(cell.address, cell.chainId);
-    return (
-      <SkeletonContainer
-        loadedData={accountsQuery.data?.length}
-        skeletonData={0}
-        render={(v) => {
-          return <span> {v}</span>;
-        }}
-      />
-    );
-  },
-);
-
-AsyncFactoryAccountCell.displayName = "AsyncFactoryAccountCell";
+export const FactoryAccountCell = memo(function FactoryAccountCell(props: {
+  chainId: string;
+  contractAddress: string;
+}) {
+  const accountsQuery = useAccountCount(
+    props.contractAddress,
+    Number(props.chainId),
+  );
+  return (
+    <SkeletonContainer
+      loadedData={accountsQuery.data?.length}
+      skeletonData={100}
+      render={(v) => {
+        return <span> {v}</span>;
+      }}
+    />
+  );
+});
diff --git a/apps/dashboard/src/components/smart-wallets/AccountFactories/factory-contracts.tsx b/apps/dashboard/src/components/smart-wallets/AccountFactories/factory-contracts.tsx
index 2436d5bf06f..2a060c3dd61 100644
--- a/apps/dashboard/src/components/smart-wallets/AccountFactories/factory-contracts.tsx
+++ b/apps/dashboard/src/components/smart-wallets/AccountFactories/factory-contracts.tsx
@@ -2,53 +2,28 @@
 
 import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
 import { SkeletonContainer } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import { useQuery } from "@tanstack/react-query";
-import { createColumnHelper } from "@tanstack/react-table";
-import { AsyncContractNameCell } from "components/contract-components/tables/cells";
-import { TWTable } from "components/shared/TWTable";
-import { AsyncFactoryAccountCell } from "components/smart-wallets/AccountFactories/account-cell";
-import type { BasicContract } from "contract-ui/types/types";
+import { ContractNameCell } from "components/contract-components/tables/cells";
+import { FactoryAccountCell } from "components/smart-wallets/AccountFactories/account-cell";
 import { useV5DashboardChain } from "lib/v5-adapter";
 import { getChainMetadata } from "thirdweb/chains";
+import type { ProjectContract } from "../../../app/account/contracts/_components/getProjectContracts";
 
 interface FactoryContractsProps {
-  contracts: BasicContract[];
+  contracts: ProjectContract[];
   isPending: boolean;
   isFetched: boolean;
 }
 
-const columnHelper = createColumnHelper<BasicContract>();
-
-const columns = [
-  columnHelper.accessor((row) => row.address, {
-    header: "Name",
-    cell: (cell) => <AsyncContractNameCell cell={cell.row.original} />,
-  }),
-  columnHelper.accessor("chainId", {
-    header: "Network",
-    cell: (cell) => {
-      return <NetworkName id={cell.getValue()} />;
-    },
-  }),
-  columnHelper.accessor("address", {
-    header: "Contract address",
-    cell: (cell) => (
-      <CopyAddressButton
-        address={cell.getValue()}
-        copyIconPosition="left"
-        variant="ghost"
-        className="-translate-x-2"
-      />
-    ),
-  }),
-  columnHelper.accessor((row) => row, {
-    header: "Accounts",
-    cell: (cell) => {
-      return <AsyncFactoryAccountCell cell={cell.row.original} />;
-    },
-  }),
-];
-
 function NetworkName(props: { id: number }) {
   const chain = useV5DashboardChain(props.id);
   const chainQuery = useQuery({
@@ -70,16 +45,48 @@ function NetworkName(props: { id: number }) {
 
 export const FactoryContracts: React.FC<FactoryContractsProps> = ({
   contracts,
-  isPending,
-  isFetched,
 }) => {
   return (
-    <TWTable
-      title="account factories"
-      data={contracts}
-      columns={columns}
-      isPending={isPending}
-      isFetched={isFetched}
-    />
+    <TableContainer>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Network</TableHead>
+            <TableHead>Contract address</TableHead>
+            <TableHead>Accounts</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {contracts.map((contract) => (
+            <TableRow key={contract.contractAddress + contract.chainId}>
+              <TableCell>
+                <ContractNameCell
+                  chainId={contract.chainId}
+                  contractAddress={contract.contractAddress}
+                />
+              </TableCell>
+              <TableCell>
+                <NetworkName id={Number(contract.chainId)} />
+              </TableCell>
+              <TableCell>
+                <CopyAddressButton
+                  address={contract.contractAddress}
+                  copyIconPosition="left"
+                  variant="ghost"
+                  className="-translate-x-2"
+                />
+              </TableCell>
+              <TableCell>
+                <FactoryAccountCell
+                  chainId={contract.chainId}
+                  contractAddress={contract.contractAddress}
+                />
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
   );
 };
diff --git a/apps/dashboard/src/components/smart-wallets/AccountFactories/index.tsx b/apps/dashboard/src/components/smart-wallets/AccountFactories/index.tsx
index c54a34a713a..62d18148969 100644
--- a/apps/dashboard/src/components/smart-wallets/AccountFactories/index.tsx
+++ b/apps/dashboard/src/components/smart-wallets/AccountFactories/index.tsx
@@ -1,170 +1,82 @@
 "use client";
 
 import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
-import { Button } from "@/components/ui/button";
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
-import { useMultiChainRegContractList } from "@3rdweb-sdk/react/hooks/useRegistry";
-import { useQuery } from "@tanstack/react-query";
-import { createColumnHelper } from "@tanstack/react-table";
-import { PlusIcon } from "lucide-react";
-import { defineChain, getContract } from "thirdweb";
-import { getCompilerMetadata } from "thirdweb/contract";
-import { useActiveAccount } from "thirdweb/react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import {
   DEFAULT_ACCOUNT_FACTORY_V0_6,
   DEFAULT_ACCOUNT_FACTORY_V0_7,
 } from "thirdweb/wallets/smart";
-import { TWTable } from "../../shared/TWTable";
-import { FactoryContracts } from "./factory-contracts";
-
-function useFactories() {
-  const address = useActiveAccount()?.address;
-  const client = useThirdwebClient();
-  const contractListQuery = useMultiChainRegContractList(address);
+import { UnderlineLink } from "../../../@/components/ui/UnderlineLink";
 
-  return useQuery({
-    queryKey: [
-      "dashboard-registry",
-      address,
-      "multichain-contract-list",
-      "factories",
-    ],
-    queryFn: async () => {
-      const factories = await Promise.all(
-        (contractListQuery.data || []).map(async (c) => {
-          const contract = getContract({
-            // eslint-disable-next-line no-restricted-syntax
-            chain: defineChain(c.chainId),
-            address: c.address,
-            client,
-          });
-          const m = await getCompilerMetadata(contract);
-          return m.name.indexOf("AccountFactory") > -1 ? c : null;
-        }),
-      );
-
-      return factories.filter((f) => f !== null);
+export function DefaultFactoriesSection() {
+  const data = [
+    {
+      name: "AccountFactory (v0.6)",
+      address: DEFAULT_ACCOUNT_FACTORY_V0_6,
+      entrypointVersion: "0.6",
     },
-    enabled: !!address && !!contractListQuery.data,
-  });
-}
-
-interface AccountFactoriesProps {
-  trackingCategory: string;
-}
+    {
+      name: "AccountFactory (v0.7)",
+      address: DEFAULT_ACCOUNT_FACTORY_V0_7,
+      entrypointVersion: "0.7",
+    },
+  ];
 
-export const AccountFactories: React.FC<AccountFactoriesProps> = ({
-  trackingCategory,
-}) => {
-  const factories = useFactories();
   return (
     <div className="flex flex-col gap-4">
-      {/* Default factories */}
-      <div className="flex flex-col gap-2">
-        <h3 className="font-semibold text-lg">Default Account Factories</h3>
+      <div className="flex flex-col gap-0.5">
+        <h3 className="font-semibold text-xl tracking-tight">
+          Default Account Factories
+        </h3>
         <p className="text-muted-foreground text-sm">
           Ready to use account factories that are pre-deployed on each chain.{" "}
-          <a
+          <UnderlineLink
             href="https://playground.thirdweb.com/connect/account-abstraction/connect"
-            className="text-link-foreground"
             target="_blank"
             rel="noreferrer"
           >
-            Learn how to use these in your apps.
-          </a>
+            Learn how to use these in your apps
+          </UnderlineLink>
         </p>
       </div>
-      <TWTable
-        title="default account factories"
-        data={[
-          {
-            name: "AccountFactory (v0.6)",
-            address: DEFAULT_ACCOUNT_FACTORY_V0_6,
-            entrypointVersion: "0.6",
-          },
-          {
-            name: "AccountFactory (v0.7)",
-            address: DEFAULT_ACCOUNT_FACTORY_V0_7,
-            entrypointVersion: "0.7",
-          },
-        ]}
-        columns={columns}
-        isPending={false}
-        isFetched={true}
-      />
-
-      {/* Your factories */}
-      <div className="mt-8 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between lg:gap-8">
-        <div className="flex flex-col gap-2">
-          <h3 className="font-semibold text-lg">Your Account Factories</h3>
-          <p className="text-muted-foreground text-sm">
-            Deploy your own account factories to create smart wallets.{" "}
-            <a
-              href="https://portal.thirdweb.com/connect/account-abstraction/factories"
-              className="text-link-foreground"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Learn more.
-            </a>
-          </p>
-        </div>
-
-        <Button variant="default" asChild size="sm">
-          <TrackedLinkTW
-            category={trackingCategory}
-            label="create-factory"
-            href="/explore/smart-wallet"
-            className="gap-2 text-sm"
-          >
-            <PlusIcon className="size-3" />
-            Deploy Account Factory
-          </TrackedLinkTW>
-        </Button>
-      </div>
 
-      <FactoryContracts
-        contracts={factories.data || []}
-        isPending={factories.isPending}
-        isFetched={factories.isFetched}
-      />
+      <TableContainer>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              <TableHead>Network</TableHead>
+              <TableHead>Contract address</TableHead>
+              <TableHead>Entrypoint Version</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {data.map((row) => (
+              <TableRow key={row.address}>
+                <TableCell>{row.name}</TableCell>
+                <TableCell>All networks</TableCell>
+                <TableCell>
+                  <CopyAddressButton
+                    address={row.address}
+                    copyIconPosition="left"
+                    variant="ghost"
+                    className="-translate-x-2"
+                  />
+                </TableCell>
+                <TableCell>{row.entrypointVersion}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
     </div>
   );
-};
-
-type DefaultFactory = {
-  name: string;
-  address: string;
-  entrypointVersion: string;
-};
-
-const columnHelper = createColumnHelper<DefaultFactory>();
-
-const columns = [
-  columnHelper.accessor((row) => row.name, {
-    header: "Name",
-    cell: (cell) => cell.row.original.name,
-  }),
-  columnHelper.accessor((row) => row.name, {
-    header: "Network",
-    cell: () => "All networks",
-  }),
-  columnHelper.accessor("address", {
-    header: "Contract address",
-    cell: (cell) => (
-      <CopyAddressButton
-        address={cell.getValue()}
-        copyIconPosition="left"
-        variant="ghost"
-        className="-translate-x-2"
-      />
-    ),
-  }),
-  columnHelper.accessor((row) => row, {
-    header: "Entrypoint Version",
-    cell: (cell) => {
-      return cell.row.original.entrypointVersion;
-    },
-  }),
-];
+}
diff --git a/apps/dashboard/src/constants/contracts.ts b/apps/dashboard/src/constants/contracts.ts
index a16a5b39da9..bcc0c54b0d6 100644
--- a/apps/dashboard/src/constants/contracts.ts
+++ b/apps/dashboard/src/constants/contracts.ts
@@ -1,7 +1,3 @@
-import { getThirdwebClient } from "@/constants/thirdweb.server";
-import { getContract } from "thirdweb";
-import { polygon } from "thirdweb/chains";
-
 /**
  * Putting this here solely for the purpose of getting rid of sdk v4
  */
@@ -20,9 +16,3 @@ export type ContractType =
   | "token-drop"
   | "token"
   | "vote";
-
-export const MULTICHAIN_REGISTRY_CONTRACT = getContract({
-  chain: polygon,
-  client: getThirdwebClient(),
-  address: "0xcdAD8FA86e18538aC207872E8ff3536501431B73",
-});
diff --git a/apps/dashboard/src/contract-ui/types/types.ts b/apps/dashboard/src/contract-ui/types/types.ts
deleted file mode 100644
index 4126d676a83..00000000000
--- a/apps/dashboard/src/contract-ui/types/types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export type BasicContract = {
-  chainId: number;
-  address: string;
-};
diff --git a/apps/dashboard/src/dashboard-extensions/common/read/getAllMultichainRegistry.ts b/apps/dashboard/src/dashboard-extensions/common/read/getAllMultichainRegistry.ts
deleted file mode 100644
index 36cd678e23f..00000000000
--- a/apps/dashboard/src/dashboard-extensions/common/read/getAllMultichainRegistry.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { type BaseTransactionOptions, isAddress, readContract } from "thirdweb";
-import { isAddressZero } from "utils/zeroAddress";
-
-const GetAllABI = {
-  type: "function",
-  name: "getAll",
-  inputs: [
-    {
-      type: "address",
-      name: "_deployer",
-      internalType: "address",
-    },
-  ],
-  outputs: [
-    {
-      type: "tuple[]",
-      name: "allDeployments",
-      components: [
-        {
-          type: "address",
-          name: "deploymentAddress",
-          internalType: "address",
-        },
-        {
-          type: "uint256",
-          name: "chainId",
-          internalType: "uint256",
-        },
-        {
-          type: "string",
-          name: "metadataURI",
-          internalType: "string",
-        },
-      ],
-      internalType: "struct ITWMultichainRegistry.Deployment[]",
-    },
-  ],
-  stateMutability: "view",
-} as const;
-
-type GetAllMultichainRegistryParams = {
-  address: string;
-};
-
-/**
- * Retrieves the contract addresses for the given wallet address.
- * @param options The transaction options.
- * @returns A promise that resolves to the list of contract addresses.
- * @extension
- * @example
- * ```ts
- * const getAll = await getAllMultichainRegistry({ address });
- * ```
- */
-export async function getAllMultichainRegistry(
-  options: BaseTransactionOptions<GetAllMultichainRegistryParams>,
-) {
-  const contracts = await readContract({
-    ...options,
-    method: GetAllABI,
-    params: [options.address],
-  });
-
-  const contractsFiltered = [
-    ...contracts.filter(
-      ({ deploymentAddress, chainId }) =>
-        isAddress(deploymentAddress) &&
-        !isAddressZero(deploymentAddress.toLowerCase()) &&
-        chainId,
-    ),
-  ].reverse();
-
-  return contractsFiltered.map((contractFiltered) => {
-    return {
-      address: contractFiltered.deploymentAddress,
-      chainId: Number(contractFiltered.chainId),
-    };
-  });
-}