diff --git a/.changeset/better-owls-flash.md b/.changeset/better-owls-flash.md
new file mode 100644
index 00000000000..13f692e7ca9
--- /dev/null
+++ b/.changeset/better-owls-flash.md
@@ -0,0 +1,6 @@
+---
+"thirdweb": patch
+---
+
+- Add support for blob urls in `MediaRenderer` component
+- Fix `className` prop not set in loading state of `MediaRenderer` component
\ No newline at end of file
diff --git a/apps/dashboard/src/@/components/blocks/Img.tsx b/apps/dashboard/src/@/components/blocks/Img.tsx
index 05af128c490..e1fcc37142a 100644
--- a/apps/dashboard/src/@/components/blocks/Img.tsx
+++ b/apps/dashboard/src/@/components/blocks/Img.tsx
@@ -11,6 +11,7 @@ type imgElementProps = React.DetailedHTMLProps<
   skeleton?: React.ReactNode;
   fallback?: React.ReactNode;
   src: string | undefined;
+  containerClassName?: string;
 };
 
 export function Img(props: imgElementProps) {
@@ -23,7 +24,8 @@ export function Img(props: imgElementProps) {
       : props.src === ""
         ? "fallback"
         : _status;
-  const { className, fallback, skeleton, ...restProps } = props;
+  const { className, fallback, skeleton, containerClassName, ...restProps } =
+    props;
   const defaultSkeleton = <div className="animate-pulse bg-accent" />;
   const defaultFallback = <div className="bg-accent" />;
   const imgRef = useRef<HTMLImageElement>(null);
@@ -47,7 +49,7 @@ export function Img(props: imgElementProps) {
   }, []);
 
   return (
-    <div className="relative shrink-0">
+    <div className={cn("relative shrink-0", containerClassName)}>
       <img
         {...restProps}
         // avoid setting empty src string to prevent request to the entire page
diff --git a/apps/dashboard/src/@/components/blocks/TokenSelector.tsx b/apps/dashboard/src/@/components/blocks/TokenSelector.tsx
index 8d26aa3168e..1287ab5732f 100644
--- a/apps/dashboard/src/@/components/blocks/TokenSelector.tsx
+++ b/apps/dashboard/src/@/components/blocks/TokenSelector.tsx
@@ -159,6 +159,17 @@ export function TokenSelector(props: {
     ? `${props.selectedToken.chainId}:${props.selectedToken.address}`
     : undefined;
 
+  // if selected value is not in options, add it
+  if (
+    selectedValue &&
+    !options.find((option) => option.value === selectedValue)
+  ) {
+    options.push({
+      label: props.selectedToken?.address || "Unknown",
+      value: selectedValue,
+    });
+  }
+
   return (
     <SelectWithSearch
       searchPlaceholder="Search by name or symbol"
@@ -175,7 +186,7 @@ export function TokenSelector(props: {
       showCheck={props.showCheck}
       placeholder={
         tokensQuery.isPending
-          ? "Loading Tokens..."
+          ? "Loading Tokens"
           : props.placeholder || "Select Token"
       }
       overrideSearchFn={searchFn}
diff --git a/apps/dashboard/src/@/components/blocks/drop-zone/drop-zone.stories.tsx b/apps/dashboard/src/@/components/blocks/drop-zone/drop-zone.stories.tsx
new file mode 100644
index 00000000000..1070aec4f8b
--- /dev/null
+++ b/apps/dashboard/src/@/components/blocks/drop-zone/drop-zone.stories.tsx
@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DropZone } from "./drop-zone";
+
+const meta = {
+  title: "blocks/DropZone",
+  component: DropZone,
+  decorators: [
+    (Story) => (
+      <div className="container max-w-6xl py-10">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DropZone>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    isError: false,
+    onDrop: () => {},
+    title: "This is a title",
+    description: "This is a description for drop zone",
+    accept: undefined,
+    resetButton: undefined,
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    isError: true,
+    onDrop: () => {},
+    title: "this is title",
+    description: "This is a description",
+    accept: undefined,
+    resetButton: undefined,
+  },
+};
+
+export const ErrorStateWithResetButton: Story = {
+  args: {
+    isError: true,
+    onDrop: () => {},
+    title: "this is title",
+    description: "This is a description",
+    accept: undefined,
+    resetButton: {
+      label: "Remove Files",
+      onClick: () => {},
+    },
+  },
+};
diff --git a/apps/dashboard/src/@/components/blocks/drop-zone/drop-zone.tsx b/apps/dashboard/src/@/components/blocks/drop-zone/drop-zone.tsx
new file mode 100644
index 00000000000..4bc7612177e
--- /dev/null
+++ b/apps/dashboard/src/@/components/blocks/drop-zone/drop-zone.tsx
@@ -0,0 +1,81 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { UploadIcon, XIcon } from "lucide-react";
+import { useDropzone } from "react-dropzone";
+
+export function DropZone(props: {
+  isError: boolean;
+  onDrop: (acceptedFiles: File[]) => void;
+  title: string;
+  description: string;
+  resetButton:
+    | {
+        label: string;
+        onClick: () => void;
+      }
+    | undefined;
+  className?: string;
+  accept: string | undefined;
+}) {
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop: props.onDrop,
+  });
+
+  const { resetButton } = props;
+
+  return (
+    <div
+      className={cn(
+        "flex cursor-pointer items-center justify-center rounded-md border border-dashed bg-card py-10 hover:border-active-border",
+        props.isError &&
+          "border-red-500 bg-red-200/30 text-red-500 hover:border-red-600 dark:border-red-900 dark:bg-red-900/30 dark:hover:border-red-800",
+        props.className,
+      )}
+      {...getRootProps()}
+    >
+      <input {...getInputProps()} accept={props.accept} />
+      <div className="flex flex-col items-center justify-center gap-3">
+        {!props.isError && (
+          <div className="flex flex-col items-center">
+            <div className="mb-3 flex size-11 items-center justify-center rounded-full border bg-card">
+              <UploadIcon className="size-5" />
+            </div>
+            <h2 className="mb-0.5 text-center font-medium text-lg">
+              {props.title}
+            </h2>
+            <p className="text-center font-medium text-muted-foreground text-sm">
+              {props.description}
+            </p>
+          </div>
+        )}
+
+        {props.isError && (
+          <div className="flex flex-col items-center">
+            <div className="mb-3 flex size-11 items-center justify-center rounded-full border border-red-500 bg-red-200/50 text-red-500 dark:border-red-900 dark:bg-red-900/30 dark:text-foreground">
+              <XIcon className="size-5" />
+            </div>
+            <h2 className="mb-0.5 text-center font-medium text-foreground text-lg">
+              {props.title}
+            </h2>
+            <p className="text-balance text-center text-sm">
+              {props.description}
+            </p>
+
+            {resetButton && (
+              <Button
+                className="relative z-50 mt-4"
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  resetButton.onClick();
+                }}
+              >
+                {resetButton.label}
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.stories.tsx b/apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.stories.tsx
index 3dbe5165115..e7698c97641 100644
--- a/apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.stories.tsx
+++ b/apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.stories.tsx
@@ -16,45 +16,34 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
-
 export const AllStates: Story = {
   args: {
+    onRetry: () => {},
     steps: [
       {
         status: { type: "completed" },
         label: "Connect Wallet",
-        execute: async () => {
-          await sleep(1000);
-        },
+        id: "connect-wallet",
       },
       {
         status: { type: "pending" },
         label: "Sign Message",
-        execute: async () => {
-          await sleep(1000);
-        },
+        id: "sign-message",
       },
       {
         status: { type: "error", message: "This is an error message" },
         label: "Approve Transaction",
-        execute: async () => {
-          await sleep(1000);
-        },
+        id: "approve-transaction",
       },
       {
         status: { type: "idle" },
         label: "Confirm Transaction",
-        execute: async () => {
-          await sleep(1000);
-        },
+        id: "confirm-transaction",
       },
       {
         status: { type: "idle" },
         label: "Finalize",
-        execute: async () => {
-          await sleep(1000);
-        },
+        id: "finalize",
       },
     ],
   },
diff --git a/apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.tsx b/apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.tsx
index 7779def1757..3f56c48c287 100644
--- a/apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.tsx
+++ b/apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.tsx
@@ -10,21 +10,23 @@ import {
 import { DynamicHeight } from "../../ui/DynamicHeight";
 import { Spinner } from "../../ui/Spinner/Spinner";
 
-export type MultiStepState = {
+export type MultiStepState<T extends string> = {
+  id: T;
   status:
     | {
         type: "idle" | "pending" | "completed";
       }
     | {
         type: "error";
-        message: string | React.ReactNode;
+        message: React.ReactNode;
       };
   label: string;
-  execute: () => Promise<void>;
+  description?: string;
 };
 
-export function MultiStepStatus(props: {
-  steps: MultiStepState[];
+export function MultiStepStatus<T extends string>(props: {
+  steps: MultiStepState<T>[];
+  onRetry: (step: MultiStepState<T>) => void;
 }) {
   return (
     <DynamicHeight>
@@ -55,6 +57,15 @@ export function MultiStepStatus(props: {
                 {step.label}
               </p>
 
+              {/* show description when this step is active */}
+              {(step.status.type === "pending" ||
+                step.status.type === "error") &&
+                step.description && (
+                  <p className="text-muted-foreground text-sm">
+                    {step.description}
+                  </p>
+                )}
+
               {step.status.type === "error" && (
                 <div className="mt-1 space-y-2">
                   <p className="mb-1 text-red-500 text-sm">
@@ -64,7 +75,7 @@ export function MultiStepStatus(props: {
                     variant="destructive"
                     size="sm"
                     className="gap-2"
-                    onClick={() => step.execute()}
+                    onClick={() => props.onRetry(step)}
                   >
                     <RefreshCwIcon className="size-4" />
                     Retry
diff --git a/apps/dashboard/src/@/components/ui/decimal-input.tsx b/apps/dashboard/src/@/components/ui/decimal-input.tsx
index ee942675c15..ed3b7be6591 100644
--- a/apps/dashboard/src/@/components/ui/decimal-input.tsx
+++ b/apps/dashboard/src/@/components/ui/decimal-input.tsx
@@ -6,6 +6,7 @@ export function DecimalInput(props: {
   id?: string;
   className?: string;
   placeholder?: string;
+  disabled?: boolean;
 }) {
   return (
     <Input
@@ -15,6 +16,7 @@ export function DecimalInput(props: {
       className={props.className}
       inputMode="decimal"
       placeholder={props.placeholder}
+      disabled={props.disabled}
       onChange={(e) => {
         const number = Number(e.target.value);
         // ignore if string becomes invalid number
diff --git a/apps/dashboard/src/@/lib/file-to-url.ts b/apps/dashboard/src/@/lib/file-to-url.ts
new file mode 100644
index 00000000000..8c08065cba6
--- /dev/null
+++ b/apps/dashboard/src/@/lib/file-to-url.ts
@@ -0,0 +1,4 @@
+export function fileToBlobUrl(file: File) {
+  const blob = new Blob([file], { type: file.type });
+  return URL.createObjectURL(blob);
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/page.tsx
index a0d78cfe929..6b9345594e6 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/page.tsx
@@ -1,7 +1,7 @@
+import { getAuthToken } from "@app/api/lib/getAuthToken";
 import { ArrowUpRightIcon } from "lucide-react";
 import type { Metadata } from "next";
 import { headers } from "next/headers";
-import { getAuthToken } from "../../../api/lib/getAuthToken";
 import { SearchInput } from "./components/client/search";
 import { QueryType } from "./components/client/type";
 import { RouteListView } from "./components/client/view";
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx
index 9a6175bf37d..5a0355cc569 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx
@@ -49,6 +49,7 @@ import {
   useSwitchActiveWalletChain,
   useWalletBalance,
 } from "thirdweb/react";
+import { parseError } from "utils/errorParser";
 import { z } from "zod";
 
 function formatTime(seconds: number) {
@@ -234,7 +235,12 @@ export function FaucetButton({
     const claimPromise = claimMutation.mutateAsync(values.turnstileToken);
     toast.promise(claimPromise, {
       success: `${amount} ${chain.nativeCurrency.symbol} sent successfully`,
-      error: `Failed to claim ${amount} ${chain.nativeCurrency.symbol}`,
+      error: (err) => {
+        return {
+          message: `Failed to claim ${amount} ${chain.nativeCurrency.symbol}`,
+          description: parseError(err),
+        };
+      },
     });
   };
 
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx
index 5c654e0d9b7..21a7d2b0f43 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx
@@ -14,16 +14,16 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import {
+  getAuthToken,
+  getAuthTokenWalletAddress,
+} from "@app/api/lib/getAuthToken";
 import { ChevronDownIcon, TicketCheckIcon } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { mapV4ChainToV5Chain } from "../../../../../../contexts/map-chains";
 import { NebulaChatButton } from "../../../../../nebula-app/(app)/components/FloatingChat/FloatingChat";
-import {
-  getAuthToken,
-  getAuthTokenWalletAddress,
-} from "../../../../api/lib/getAuthToken";
 import { TeamHeader } from "../../../../team/components/TeamHeader/team-header";
 import { StarButton } from "../../components/client/star-button";
 import { getChain, getChainMetadata } from "../../utils";
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/snapshot-upload.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/snapshot-upload.tsx
index 55cb315ea80..49a7b6ab908 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/snapshot-upload.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/snapshot-upload.tsx
@@ -13,6 +13,7 @@ import { cn } from "@/lib/utils";
 import { useCsvUpload } from "hooks/useCsvUpload";
 import { CircleAlertIcon, DownloadIcon, UploadIcon } from "lucide-react";
 import { useRef } from "react";
+import { useDropzone } from "react-dropzone";
 import type { Column } from "react-table";
 import { type ThirdwebClient, ZERO_ADDRESS } from "thirdweb";
 import { CsvDataTable } from "../csv-data-table";
@@ -52,23 +53,18 @@ const SnapshotViewerSheetContent: React.FC<SnapshotUploadProps> = ({
   onClose,
   client,
 }) => {
-  const {
-    normalizeQuery,
-    getInputProps,
-    getRootProps,
-    isDragActive,
-    rawData,
-    noCsv,
-    reset,
-    removeInvalid,
-  } = useCsvUpload<SnapshotAddressInput>({
+  const csvUpload = useCsvUpload<SnapshotAddressInput>({
     csvParser,
     defaultRawData: value,
     client,
   });
 
+  const dropzone = useDropzone({
+    onDrop: csvUpload.setFiles,
+  });
+
   const paginationPortalRef = useRef<HTMLDivElement>(null);
-  const normalizeData = normalizeQuery.data;
+  const normalizeData = csvUpload.normalizeQuery.data;
 
   if (!normalizeData) {
     return (
@@ -152,11 +148,11 @@ const SnapshotViewerSheetContent: React.FC<SnapshotUploadProps> = ({
 
   return (
     <div className="flex flex-col gap-6">
-      {rawData.length > 0 ? (
+      {csvUpload.rawData.length > 0 ? (
         <div>
           <CsvDataTable<SnapshotAddressInput>
             portalRef={paginationPortalRef}
-            data={normalizeQuery.data.result}
+            data={csvUpload.normalizeQuery.data.result}
             columns={columns}
           />
         </div>
@@ -166,23 +162,27 @@ const SnapshotViewerSheetContent: React.FC<SnapshotUploadProps> = ({
             <div
               className={cn(
                 "flex h-full cursor-pointer rounded-md border border-border hover:border-primary",
-                noCsv ? "bg-red-200" : "bg-background",
+                csvUpload.noCsv ? "bg-red-200" : "bg-background",
               )}
-              {...getRootProps()}
+              {...dropzone.getRootProps()}
             >
-              <input {...getInputProps()} />
+              <input {...dropzone.getInputProps()} />
               <div className="!m-auto flex flex-col">
                 <UploadIcon
                   className={cn(
                     "mx-auto mb-2 size-8",
-                    noCsv ? "text-red-500" : "text-gray-600",
+                    csvUpload.noCsv ? "text-red-500" : "text-gray-600",
                   )}
                 />
-                {isDragActive ? (
+                {dropzone.isDragActive ? (
                   <p>Drop the files here</p>
                 ) : (
-                  <p className={noCsv ? "text-red-500" : "text-gray-600"}>
-                    {noCsv
+                  <p
+                    className={
+                      csvUpload.noCsv ? "text-red-500" : "text-gray-600"
+                    }
+                  >
+                    {csvUpload.noCsv
                       ? `No valid CSV file found, make sure your CSV includes the "address" column.`
                       : "Drag & Drop a CSV file here"}
                   </p>
@@ -294,20 +294,20 @@ const SnapshotViewerSheetContent: React.FC<SnapshotUploadProps> = ({
           <div className="mt-4 flex w-full flex-row items-center gap-2 md:mt-0 md:w-auto">
             <Button
               className="w-full rounded-md md:w-auto"
-              disabled={isDisabled || rawData.length === 0}
+              disabled={isDisabled || csvUpload.rawData.length === 0}
               onClick={() => {
-                reset();
+                csvUpload.reset();
               }}
             >
               Reset
             </Button>
-            {normalizeQuery.data?.invalidFound ? (
+            {csvUpload.normalizeQuery.data?.invalidFound ? (
               <Button
                 className="w-full rounded-md md:w-auto"
                 variant="primary"
-                disabled={isDisabled || rawData.length === 0}
+                disabled={isDisabled || csvUpload.rawData.length === 0}
                 onClick={() => {
-                  removeInvalid();
+                  csvUpload.removeInvalid();
                 }}
               >
                 Remove invalid
@@ -317,7 +317,7 @@ const SnapshotViewerSheetContent: React.FC<SnapshotUploadProps> = ({
                 className="w-full rounded-md md:w-auto"
                 variant="primary"
                 onClick={onSave}
-                disabled={isDisabled || rawData.length === 0}
+                disabled={isDisabled || csvUpload.rawData.length === 0}
               >
                 Next
               </Button>
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/layout.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/layout.tsx
index cf1753a6f2a..5f75485f9b6 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/layout.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/layout.tsx
@@ -1,5 +1,5 @@
+import { getAuthToken } from "@app/api/lib/getAuthToken";
 import type { Metadata } from "next";
-import { getAuthToken } from "../../../../api/lib/getAuthToken";
 import {
   SharedContractLayout,
   generateContractLayoutMetadata,
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx
index 621b03ce0e6..4402b162f59 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx
@@ -199,7 +199,11 @@ function UploadMetadataNFTSection(props: {
           <div className="flex flex-col gap-6 lg:flex-row">
             {/* Left */}
             <div className="shrink-0 lg:w-[300px]">
-              <NFTMediaFormGroup form={form} previewMaxWidth="300px" />
+              <NFTMediaFormGroup
+                form={form}
+                previewMaxWidth="300px"
+                client={props.client}
+              />
             </div>
 
             {/* Right */}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Mintable.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Mintable.tsx
index a2d9b40b26c..3b5d812b91b 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Mintable.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Mintable.tsx
@@ -397,7 +397,11 @@ function MintNFTSection(props: {
             <div className="flex flex-col gap-6 lg:flex-row">
               {/* Left */}
               <div className="shrink-0 lg:w-[300px]">
-                <NFTMediaFormGroup form={form} previewMaxWidth="300px" />
+                <NFTMediaFormGroup
+                  form={form}
+                  previewMaxWidth="300px"
+                  client={props.client}
+                />
               </div>
 
               {/* Right */}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/nft/NFTMediaFormGroup.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/nft/NFTMediaFormGroup.tsx
index a9a5a1bc7f2..9b4d4ac9c24 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/nft/NFTMediaFormGroup.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/nft/NFTMediaFormGroup.tsx
@@ -1,89 +1,37 @@
 "use client";
 import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { FileInput } from "components/shared/FileInput";
-import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
 import type { UseFormReturn } from "react-hook-form";
+import type { ThirdwebClient } from "thirdweb";
 import type { NFTInput } from "thirdweb/utils";
+import {
+  getUploadedNFTMediaMeta,
+  handleNFTMediaUpload,
+} from "./handleNFTMediaUpload";
 
 type NFTMediaFormGroupValues = {
   image?: NFTInput["image"];
   animation_url?: NFTInput["animation_url"];
   external_url?: NFTInput["external_url"];
 };
+
 export function NFTMediaFormGroup<T extends NFTMediaFormGroupValues>(props: {
   form: UseFormReturn<T>;
   previewMaxWidth?: string;
+  client: ThirdwebClient;
 }) {
   // T contains all properties of NFTMediaFormGroupValues, so this is a-ok
   const form = props.form as unknown as UseFormReturn<NFTMediaFormGroupValues>;
 
-  const setFile = (file: File) => {
-    const external_url = form.watch("external_url");
-    const animation_url = form.watch("animation_url");
-
-    if (file.type.includes("image")) {
-      form.setValue("image", file);
-      if (external_url instanceof File) {
-        form.setValue("external_url", undefined);
-      }
-      if (animation_url instanceof File) {
-        form.setValue("animation_url", undefined);
-      }
-    } else if (
-      ["audio", "video", "text/html", "model/*"].some((type: string) =>
-        file.type.includes(type),
-      ) ||
-      file.name?.endsWith(".glb") ||
-      file.name?.endsWith(".usdz") ||
-      file.name?.endsWith(".gltf") ||
-      file.name.endsWith(".obj")
-    ) {
-      // audio, video, html, and glb (3d) files
-      form.setValue("animation_url", file);
-      if (external_url instanceof File) {
-        form.setValue("external_url", undefined);
-      }
-    } else if (
-      ["text", "application/pdf"].some((type: string) =>
-        file.type?.includes(type),
-      )
-    ) {
-      // text and pdf files
-      form.setValue("external_url", file);
-      if (animation_url instanceof File) {
-        form.setValue("animation_url", undefined);
-      }
-    }
-  };
-
-  const external_url = form.watch("external_url");
-  const animation_url = form.watch("animation_url");
-  const image = form.watch("image");
-  const errors = form.formState.errors;
+  const { media, image, mediaFileError, showCoverImageUpload } =
+    getUploadedNFTMediaMeta(form);
 
-  const imageUrl = useImageFileOrUrl(image as File | string);
-  const showCoverImageUpload =
-    animation_url instanceof File || external_url instanceof File;
-
-  const mediaFileUrl =
-    animation_url instanceof File
-      ? animation_url
-      : external_url instanceof File
-        ? external_url
-        : image instanceof File
-          ? imageUrl
-          : undefined;
+  const previewMaxWidth = props.previewMaxWidth ?? "200px";
 
-  const mediaFileError =
-    animation_url instanceof File
-      ? errors?.animation_url
-      : external_url instanceof File
-        ? errors?.external_url
-        : image instanceof File
-          ? errors?.image
-          : undefined;
+  const setFile = (file: File) => {
+    handleNFTMediaUpload({ file, form });
+  };
 
-  const previewMaxWidth = props.previewMaxWidth ?? "200px";
   return (
     <div className="flex flex-col gap-6">
       <FormFieldSetup
@@ -97,11 +45,12 @@ export function NFTMediaFormGroup<T extends NFTMediaFormGroupValues>(props: {
         </p>
         <FileInput
           previewMaxWidth={previewMaxWidth}
-          value={mediaFileUrl as File | string}
+          value={media}
           showPreview={true}
           setValue={setFile}
           className="max-sm:!max-w-full rounded border border-border transition-all duration-200"
           selectOrUpload="Upload"
+          client={props.client}
           helperText="Media"
         />
       </FormFieldSetup>
@@ -112,12 +61,13 @@ export function NFTMediaFormGroup<T extends NFTMediaFormGroupValues>(props: {
           htmlFor="cover-image"
           label="Cover Image"
           tooltip="You can optionally upload an image as the cover of your NFT."
-          isRequired
+          isRequired={false}
         >
           <FileInput
             previewMaxWidth={previewMaxWidth}
+            client={props.client}
             accept={{ "image/*": [] }}
-            value={imageUrl}
+            value={image}
             showUploadButton
             setValue={(file) => {
               form.setValue("image", file);
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/nft/handleNFTMediaUpload.ts b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/nft/handleNFTMediaUpload.ts
new file mode 100644
index 00000000000..774de5b24d0
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/nft/handleNFTMediaUpload.ts
@@ -0,0 +1,85 @@
+import type { UseFormReturn } from "react-hook-form";
+import type { NFTInput } from "thirdweb/utils";
+
+type MinimalNFTMetadata = {
+  image?: NFTInput["image"];
+  animation_url?: NFTInput["animation_url"];
+  external_url?: NFTInput["external_url"];
+};
+
+export function handleNFTMediaUpload<T extends MinimalNFTMetadata>(params: {
+  file: File;
+  form: UseFormReturn<T>;
+}) {
+  const { file } = params;
+  const form = params.form as unknown as UseFormReturn<MinimalNFTMetadata>;
+
+  const external_url = form.getValues("external_url");
+  const animation_url = form.getValues("animation_url");
+
+  if (file.type.includes("image")) {
+    form.setValue("image", file);
+
+    if (external_url instanceof File) {
+      form.setValue("external_url", undefined);
+    }
+
+    if (animation_url instanceof File) {
+      form.setValue("animation_url", undefined);
+    }
+  } else if (
+    ["audio", "video", "text/html", "model/"].some((type: string) =>
+      file.type.includes(type),
+    ) ||
+    file.name?.endsWith(".glb") ||
+    file.name?.endsWith(".usdz") ||
+    file.name?.endsWith(".gltf") ||
+    file.name.endsWith(".obj")
+  ) {
+    // audio, video, html, and glb (3d) files
+    form.setValue("animation_url", file);
+    if (external_url instanceof File) {
+      form.setValue("external_url", undefined);
+    }
+  } else if (
+    ["text", "application/pdf"].some((type: string) =>
+      file.type?.includes(type),
+    )
+  ) {
+    // text and pdf files
+    form.setValue("external_url", file);
+    if (animation_url instanceof File) {
+      form.setValue("animation_url", undefined);
+    }
+  }
+}
+
+export function getUploadedNFTMediaMeta<T extends MinimalNFTMetadata>(
+  _form: UseFormReturn<T>,
+) {
+  const form = _form as unknown as UseFormReturn<MinimalNFTMetadata>;
+
+  const _animation_url = form.watch("animation_url");
+  const _external_url = form.watch("external_url");
+  const _image = form.watch("image");
+  const _media = _animation_url || _external_url || _image;
+  const errors = form.formState.errors;
+
+  return {
+    media: stringOrFile(_media),
+    image: stringOrFile(_image),
+    mediaFileError:
+      errors?.animation_url || errors.external_url || errors?.image,
+    showCoverImageUpload: !!_animation_url || !!_external_url,
+    animation_url: stringOrFile(_animation_url),
+    external_url: stringOrFile(_external_url),
+  };
+}
+
+function stringOrFile(value: unknown): string | File | undefined {
+  if (typeof value === "string" || value instanceof File) {
+    return value;
+  }
+
+  return undefined;
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/claim-tab.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/claim-tab.tsx
index a3e6da385a7..db79fcd8e42 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/claim-tab.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/claim-tab.tsx
@@ -10,6 +10,7 @@ import { getApprovalForTransaction } from "thirdweb/extensions/erc20";
 import { claimTo } from "thirdweb/extensions/erc1155";
 import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
 import { FormErrorMessage, FormHelperText, FormLabel } from "tw-components";
+import { parseError } from "utils/errorParser";
 
 interface ClaimTabProps {
   contract: ThirdwebContract;
@@ -67,7 +68,12 @@ const ClaimTabERC1155: React.FC<ClaimTabProps> = ({
           toast.promise(promise, {
             loading: "Claiming NFT",
             success: "NFT claimed successfully",
-            error: "Failed to claim NFT",
+            error: (error) => {
+              return {
+                message: "Failed to claim NFT",
+                description: parseError(error),
+              };
+            },
           });
           trackEvent({
             category: "nft",
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-form.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-form.tsx
index 1022a69b8ff..2c8ca2b5d3c 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-form.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-form.tsx
@@ -15,7 +15,6 @@ import { TransactionButton } from "components/buttons/TransactionButton";
 import { PropertiesFormControl } from "components/contract-pages/forms/properties.shared";
 import { FileInput } from "components/shared/FileInput";
 import { useTrack } from "hooks/analytics/useTrack";
-import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { type Dispatch, type SetStateAction, useMemo } from "react";
 import { useForm } from "react-hook-form";
@@ -38,9 +37,12 @@ import {
   FormLabel,
   Heading,
 } from "tw-components";
-import { NFTMediaWithEmptyState } from "tw-components/nft-media";
 import type { NFTMetadataInputLimited } from "types/modified-types";
 import { parseAttributes } from "utils/parseAttributes";
+import {
+  getUploadedNFTMediaMeta,
+  handleNFTMediaUpload,
+} from "../../../modules/components/nft/handleNFTMediaUpload";
 
 const UPDATE_METADATA_FORM_ID = "nft-update-metadata-form";
 
@@ -83,6 +85,11 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
     return nftMetadata;
   }, [nft]);
 
+  const form = useForm<NFTMetadataInputLimited>({
+    defaultValues: transformedQueryData,
+    values: transformedQueryData,
+  });
+
   const {
     setValue,
     control,
@@ -90,78 +97,20 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
     watch,
     handleSubmit,
     formState: { errors, isDirty },
-  } = useForm<NFTMetadataInputLimited>({
-    defaultValues: transformedQueryData,
-    values: transformedQueryData,
-  });
+  } = form;
 
   const setFile = (file: File) => {
-    if (file.type.includes("image")) {
-      // image files
-      setValue("image", file);
-      if (watch("external_url") instanceof File) {
-        setValue("external_url", undefined);
-      }
-      if (watch("animation_url") instanceof File) {
-        setValue("animation_url", undefined);
-      }
-    } else if (
-      ["audio", "video", "text/html", "model/*"].some((type: string) =>
-        file.type.includes(type),
-      ) ||
-      file.name?.endsWith(".glb") ||
-      file.name?.endsWith(".usdz") ||
-      file.name?.endsWith(".gltf") ||
-      file.name.endsWith(".obj")
-    ) {
-      // audio, video, html, and glb (3d) files
-      setValue("animation_url", file);
-      if (watch("external_url") instanceof File) {
-        setValue("external_url", undefined);
-      }
-    } else if (
-      ["text", "application/pdf"].some((type: string) =>
-        file.type?.includes(type),
-      )
-    ) {
-      // text and pdf files
-      setValue("external_url", file);
-      if (watch("animation_url") instanceof File) {
-        setValue("animation_url", undefined);
-      }
-    }
+    handleNFTMediaUpload({ file, form });
   };
+  const {
+    media,
+    image,
+    mediaFileError,
+    showCoverImageUpload,
+    animation_url,
+    external_url,
+  } = getUploadedNFTMediaMeta(form);
 
-  const imageUrl = useImageFileOrUrl(watch("image") as File | string);
-  const animationUrlFormValue = watch("animation_url");
-  const imageUrlFormValue = watch("image");
-
-  const mediaFileUrl =
-    watch("animation_url") instanceof File
-      ? watch("animation_url")
-      : watch("external_url") instanceof File
-        ? watch("external_url")
-        : watch("image") instanceof File
-          ? imageUrl
-          : undefined;
-
-  const mediaFileError =
-    watch("animation_url") instanceof File
-      ? errors?.animation_url
-      : watch("external_url") instanceof File
-        ? errors?.external_url
-        : watch("image") instanceof File
-          ? errors?.image
-          : undefined;
-
-  const externalUrl = watch("external_url");
-  const externalIsTextFile =
-    externalUrl instanceof File &&
-    (externalUrl.type.includes("text") || externalUrl.type.includes("pdf"));
-
-  const showCoverImageUpload =
-    watch("animation_url") instanceof File ||
-    watch("external_url") instanceof File;
   const sendAndConfirmTx = useSendAndConfirmTransaction();
   const updateMetadataNotifications = useTxNotifications(
     "NFT metadata updated successfully",
@@ -247,37 +196,20 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
         <Input autoFocus {...register("name")} />
         <FormErrorMessage>{errors?.name?.message}</FormErrorMessage>
       </FormControl>
+
       <FormControl isInvalid={!!mediaFileError}>
         <FormLabel>Media</FormLabel>
         <div className="flex flex-row flex-wrap gap-3">
-          {nft?.metadata && !mediaFileUrl && (
-            <NFTMediaWithEmptyState
-              client={contract.client}
-              metadata={{
-                name: nft.metadata.name,
-                animation_url:
-                  typeof animationUrlFormValue === "string"
-                    ? animationUrlFormValue
-                    : nft.metadata.animation_url,
-                image:
-                  typeof imageUrlFormValue === "string"
-                    ? imageUrlFormValue
-                    : nft.metadata.image,
-              }}
-              width="200px"
-              height="200px"
-            />
-          )}
-
           <FileInput
             previewMaxWidth="200px"
-            value={mediaFileUrl as File | string}
+            value={media}
             showUploadButton
-            showPreview={nft?.metadata ? !!mediaFileUrl : true}
+            showPreview
             setValue={setFile}
             className="shrink-0 rounded border border-border transition-all duration-200"
             selectOrUpload="Upload"
             helperText={nft?.metadata ? "New Media" : "Media"}
+            client={contract.client}
           />
         </div>
 
@@ -289,13 +221,15 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
           {mediaFileError?.message as unknown as string}
         </FormErrorMessage>
       </FormControl>
+
       {showCoverImageUpload && (
         <FormControl isInvalid={!!errors.image}>
           <FormLabel>Cover Image</FormLabel>
           <FileInput
             previewMaxWidth="200px"
+            client={contract.client}
             accept={{ "image/*": [] }}
-            value={imageUrl}
+            value={image}
             showUploadButton
             setValue={(file) => setValue("image", file)}
             className="rounded border border-border transition-all"
@@ -320,6 +254,7 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
         control={control}
         register={register}
         setValue={setValue}
+        client={contract.client}
       />
 
       <Accordion
@@ -344,7 +279,8 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
                 {errors?.background_color?.message}
               </FormErrorMessage>
             </FormControl>
-            {!externalIsTextFile && (
+
+            {!(external_url instanceof File) && (
               <FormControl isInvalid={!!errors.external_url}>
                 <FormLabel>
                   External URL <OpenSeaPropertyBadge />
@@ -360,42 +296,43 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
                 </FormErrorMessage>
               </FormControl>
             )}
-            <FormControl isInvalid={!!errors.image}>
-              <FormLabel>Image URL</FormLabel>
-              <Input
-                value={
-                  typeof imageUrlFormValue === "string" ? imageUrlFormValue : ""
-                }
-                onChange={(e) => {
-                  setValue("image", e.target.value);
-                }}
-              />
-              <FormHelperText>
-                If you already have your NFT image pre-uploaded to a URL, you
-                can specify it here instead of uploading the media file
-              </FormHelperText>
-              <FormErrorMessage>{errors?.image?.message}</FormErrorMessage>
-            </FormControl>
-            <FormControl isInvalid={!!errors.animation_url}>
-              <FormLabel>Animation URL</FormLabel>
-              <Input
-                value={
-                  typeof animationUrlFormValue === "string"
-                    ? animationUrlFormValue
-                    : ""
-                }
-                onChange={(e) => {
-                  setValue("animation_url", e.target.value);
-                }}
-              />
-              <FormHelperText>
-                If you already have your NFT Animation URL pre-uploaded to a
-                URL, you can specify it here instead of uploading the media file
-              </FormHelperText>
-              <FormErrorMessage>
-                {errors?.animation_url?.message}
-              </FormErrorMessage>
-            </FormControl>
+
+            {!(image instanceof File) && (
+              <FormControl isInvalid={!!errors.image}>
+                <FormLabel>Image URL</FormLabel>
+                <Input
+                  value={typeof image === "string" ? image : ""}
+                  onChange={(e) => {
+                    setValue("image", e.target.value);
+                  }}
+                />
+                <FormHelperText>
+                  If you already have your NFT image pre-uploaded to a URL, you
+                  can specify it here instead of uploading the media file
+                </FormHelperText>
+                <FormErrorMessage>{errors?.image?.message}</FormErrorMessage>
+              </FormControl>
+            )}
+
+            {!(animation_url instanceof File) && (
+              <FormControl isInvalid={!!errors.animation_url}>
+                <FormLabel>Animation URL</FormLabel>
+                <Input
+                  value={typeof animation_url === "string" ? animation_url : ""}
+                  onChange={(e) => {
+                    setValue("animation_url", e.target.value);
+                  }}
+                />
+                <FormHelperText>
+                  If you already have your NFT Animation URL pre-uploaded to a
+                  URL, you can specify it here instead of uploading the media
+                  file
+                </FormHelperText>
+                <FormErrorMessage>
+                  {errors?.animation_url?.message}
+                </FormErrorMessage>
+              </FormControl>
+            )}
           </AccordionPanel>
         </AccordionItem>
       </Accordion>
@@ -415,7 +352,7 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
           isPending={sendAndConfirmTx.isPending}
           form={UPDATE_METADATA_FORM_ID}
           type="submit"
-          disabled={!isDirty && imageUrl === nft?.metadata.image}
+          disabled={!isDirty}
         >
           Update NFT
         </TransactionButton>
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/lazy-mint-form.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/lazy-mint-form.tsx
index abb33dbd286..851efebf5e3 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/lazy-mint-form.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/lazy-mint-form.tsx
@@ -17,7 +17,6 @@ import { TransactionButton } from "components/buttons/TransactionButton";
 import { PropertiesFormControl } from "components/contract-pages/forms/properties.shared";
 import { FileInput } from "components/shared/FileInput";
 import { useTrack } from "hooks/analytics/useTrack";
-import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import type { Dispatch, SetStateAction } from "react";
 import { useForm } from "react-hook-form";
@@ -34,6 +33,10 @@ import {
 } from "tw-components";
 import type { NFTMetadataInputLimited } from "types/modified-types";
 import { parseAttributes } from "utils/parseAttributes";
+import {
+  getUploadedNFTMediaMeta,
+  handleNFTMediaUpload,
+} from "../../modules/components/nft/handleNFTMediaUpload";
 
 const LAZY_MINT_FORM_ID = "nft-lazy-mint-form";
 
@@ -54,6 +57,8 @@ export const LazyMintNftForm: React.FC<LazyMintNftFormParams> = ({
   const address = useActiveAccount()?.address;
   const sendAndConfirmTx = useSendAndConfirmTransaction();
 
+  const form = useForm<NFTMetadataInputLimited>();
+
   const {
     setValue,
     control,
@@ -61,75 +66,20 @@ export const LazyMintNftForm: React.FC<LazyMintNftFormParams> = ({
     watch,
     handleSubmit,
     formState: { errors, isDirty },
-  } = useForm<NFTMetadataInputLimited>();
+  } = form;
 
   const setFile = (file: File) => {
-    if (file.type.includes("image")) {
-      // image files
-      setValue("image", file);
-      if (watch("external_url") instanceof File) {
-        setValue("external_url", undefined);
-      }
-      if (watch("animation_url") instanceof File) {
-        setValue("animation_url", undefined);
-      }
-    } else if (
-      ["audio", "video", "text/html", "model/*"].some((type: string) =>
-        file.type.includes(type),
-      ) ||
-      file.name?.endsWith(".glb") ||
-      file.name?.endsWith(".usdz") ||
-      file.name?.endsWith(".gltf") ||
-      file.name.endsWith(".obj")
-    ) {
-      // audio, video, html, and glb (3d) files
-      setValue("animation_url", file);
-      if (watch("external_url") instanceof File) {
-        setValue("external_url", undefined);
-      }
-    } else if (
-      ["text", "application/pdf"].some((type: string) =>
-        file.type?.includes(type),
-      )
-    ) {
-      // text and pdf files
-      setValue("external_url", file);
-      if (watch("animation_url") instanceof File) {
-        setValue("animation_url", undefined);
-      }
-    }
+    handleNFTMediaUpload({ file, form });
   };
 
-  const imageUrl = useImageFileOrUrl(watch("image") as File | string);
-  const animationUrlFormValue = watch("animation_url");
-  const imageUrlFormValue = watch("image");
-
-  const mediaFileUrl =
-    watch("animation_url") instanceof File
-      ? watch("animation_url")
-      : watch("external_url") instanceof File
-        ? watch("external_url")
-        : watch("image") instanceof File
-          ? imageUrl
-          : undefined;
-
-  const mediaFileError =
-    watch("animation_url") instanceof File
-      ? errors?.animation_url
-      : watch("external_url") instanceof File
-        ? errors?.external_url
-        : watch("image") instanceof File
-          ? errors?.image
-          : undefined;
-
-  const externalUrl = watch("external_url");
-  const externalIsTextFile =
-    externalUrl instanceof File &&
-    (externalUrl.type.includes("text") || externalUrl.type.includes("pdf"));
-
-  const showCoverImageUpload =
-    watch("animation_url") instanceof File ||
-    watch("external_url") instanceof File;
+  const {
+    media,
+    image,
+    mediaFileError,
+    showCoverImageUpload,
+    animation_url,
+    external_url,
+  } = getUploadedNFTMediaMeta(form);
 
   const lazyMintNotifications = useTxNotifications(
     "NFT lazy minted successfully",
@@ -184,7 +134,7 @@ export const LazyMintNftForm: React.FC<LazyMintNftFormParams> = ({
         })}
       >
         <div className="flex flex-col gap-2">
-          <Heading size="subtitle.md">Metadata</Heading>
+          <Heading size="subtitle.md">Metadata </Heading>
           <Divider />
         </div>
         <FormControl isRequired isInvalid={!!errors.name}>
@@ -197,13 +147,14 @@ export const LazyMintNftForm: React.FC<LazyMintNftFormParams> = ({
           <div>
             <FileInput
               previewMaxWidth="200px"
-              value={mediaFileUrl as File | string}
+              value={media}
               showUploadButton
               showPreview={true}
               setValue={setFile}
               className="rounded border border-border transition-all duration-200"
               selectOrUpload="Upload"
               helperText="Media"
+              client={contract.client}
             />
           </div>
           <FormHelperText>
@@ -219,8 +170,9 @@ export const LazyMintNftForm: React.FC<LazyMintNftFormParams> = ({
             <FormLabel>Cover Image</FormLabel>
             <FileInput
               previewMaxWidth="200px"
+              client={contract.client}
               accept={{ "image/*": [] }}
-              value={imageUrl}
+              value={image}
               showUploadButton
               setValue={(file) => setValue("image", file)}
               className="rounded border border-border transition-all"
@@ -245,6 +197,7 @@ export const LazyMintNftForm: React.FC<LazyMintNftFormParams> = ({
           control={control}
           register={register}
           setValue={setValue}
+          client={contract.client}
         />
         <Accordion
           allowToggle={!(errors.background_color || errors.external_url)}
@@ -270,7 +223,8 @@ export const LazyMintNftForm: React.FC<LazyMintNftFormParams> = ({
                   {errors?.background_color?.message}
                 </FormErrorMessage>
               </FormControl>
-              {!externalIsTextFile && (
+
+              {!(external_url instanceof File) && (
                 <FormControl isInvalid={!!errors.external_url}>
                   <FormLabel>
                     External URL <OpenSeaPropertyBadge />
@@ -286,47 +240,45 @@ export const LazyMintNftForm: React.FC<LazyMintNftFormParams> = ({
                   </FormErrorMessage>
                 </FormControl>
               )}
-              <FormControl isInvalid={!!errors.image}>
-                <FormLabel>Image URL</FormLabel>
-                <Input
-                  {...register("image")}
-                  value={
-                    typeof imageUrlFormValue === "string"
-                      ? imageUrlFormValue
-                      : ""
-                  }
-                  onChange={(e) => {
-                    setValue("image", e.target.value);
-                  }}
-                />
-                <FormHelperText>
-                  If you already have your NFT image pre-uploaded to a URL, you
-                  can specify it here instead of uploading the media file
-                </FormHelperText>
-                <FormErrorMessage>{errors?.image?.message}</FormErrorMessage>
-              </FormControl>
-              <FormControl isInvalid={!!errors.animation_url}>
-                <FormLabel>Animation URL</FormLabel>
-                <Input
-                  {...register("animation_url")}
-                  value={
-                    typeof animationUrlFormValue === "string"
-                      ? animationUrlFormValue
-                      : ""
-                  }
-                  onChange={(e) => {
-                    setValue("animation_url", e.target.value);
-                  }}
-                />
-                <FormHelperText>
-                  If you already have your NFT Animation URL pre-uploaded to a
-                  URL, you can specify it here instead of uploading the media
-                  file
-                </FormHelperText>
-                <FormErrorMessage>
-                  {errors?.animation_url?.message}
-                </FormErrorMessage>
-              </FormControl>
+
+              {!(image instanceof File) && (
+                <FormControl isInvalid={!!errors.image}>
+                  <FormLabel>Image URL</FormLabel>
+                  <Input
+                    {...register("image")}
+                    value={image}
+                    onChange={(e) => {
+                      setValue("image", e.target.value);
+                    }}
+                  />
+                  <FormHelperText>
+                    If you already have your NFT image pre-uploaded to a URL,
+                    you can specify it here instead of uploading the media file
+                  </FormHelperText>
+                  <FormErrorMessage>{errors?.image?.message}</FormErrorMessage>
+                </FormControl>
+              )}
+
+              {!(animation_url instanceof File) && (
+                <FormControl isInvalid={!!errors.animation_url}>
+                  <FormLabel>Animation URL</FormLabel>
+                  <Input
+                    {...register("animation_url")}
+                    value={animation_url}
+                    onChange={(e) => {
+                      setValue("animation_url", e.target.value);
+                    }}
+                  />
+                  <FormHelperText>
+                    If you already have your NFT Animation URL pre-uploaded to a
+                    URL, you can specify it here instead of uploading the media
+                    file
+                  </FormHelperText>
+                  <FormErrorMessage>
+                    {errors?.animation_url?.message}
+                  </FormErrorMessage>
+                </FormControl>
+              )}
             </AccordionPanel>
           </AccordionItem>
         </Accordion>
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/mint-form.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/mint-form.tsx
index 37026578bf9..67fce1df341 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/mint-form.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/mint-form.tsx
@@ -16,7 +16,6 @@ import { TransactionButton } from "components/buttons/TransactionButton";
 import { PropertiesFormControl } from "components/contract-pages/forms/properties.shared";
 import { FileInput } from "components/shared/FileInput";
 import { useTrack } from "hooks/analytics/useTrack";
-import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import type { Dispatch, SetStateAction } from "react";
 import { useForm } from "react-hook-form";
@@ -34,6 +33,10 @@ import {
 } from "tw-components";
 import type { NFTMetadataInputLimited } from "types/modified-types";
 import { parseAttributes } from "utils/parseAttributes";
+import {
+  getUploadedNFTMediaMeta,
+  handleNFTMediaUpload,
+} from "../../modules/components/nft/handleNFTMediaUpload";
 
 const MINT_FORM_ID = "nft-mint-form";
 
@@ -52,6 +55,12 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({
 }) => {
   const trackEvent = useTrack();
   const address = useActiveAccount()?.address;
+  const form = useForm<
+    NFTMetadataInputLimited & {
+      supply: number;
+    }
+  >();
+
   const {
     setValue,
     control,
@@ -59,78 +68,20 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({
     watch,
     handleSubmit,
     formState: { errors, isDirty },
-  } = useForm<
-    NFTMetadataInputLimited & {
-      supply: number;
-    }
-  >();
+  } = form;
 
   const setFile = (file: File) => {
-    if (file.type.includes("image")) {
-      // image files
-      setValue("image", file);
-      if (watch("external_url") instanceof File) {
-        setValue("external_url", undefined);
-      }
-      if (watch("animation_url") instanceof File) {
-        setValue("animation_url", undefined);
-      }
-    } else if (
-      ["audio", "video", "text/html", "model/*"].some((type: string) =>
-        file.type.includes(type),
-      ) ||
-      file.name?.endsWith(".glb") ||
-      file.name?.endsWith(".usdz") ||
-      file.name?.endsWith(".gltf") ||
-      file.name.endsWith(".obj")
-    ) {
-      // audio, video, html, and glb (3d) files
-      setValue("animation_url", file);
-      if (watch("external_url") instanceof File) {
-        setValue("external_url", undefined);
-      }
-    } else if (
-      ["text", "application/pdf"].some((type: string) =>
-        file.type?.includes(type),
-      )
-    ) {
-      // text and pdf files
-      setValue("external_url", file);
-      if (watch("animation_url") instanceof File) {
-        setValue("animation_url", undefined);
-      }
-    }
+    handleNFTMediaUpload({ file, form });
   };
 
-  const imageUrl = useImageFileOrUrl(watch("image") as File | string);
-  const animationUrlFormValue = watch("animation_url");
-  const imageUrlFormValue = watch("image");
-  const mediaFileUrl =
-    watch("animation_url") instanceof File
-      ? watch("animation_url")
-      : watch("external_url") instanceof File
-        ? watch("external_url")
-        : watch("image") instanceof File
-          ? imageUrl
-          : undefined;
-
-  const mediaFileError =
-    watch("animation_url") instanceof File
-      ? errors?.animation_url
-      : watch("external_url") instanceof File
-        ? errors?.external_url
-        : watch("image") instanceof File
-          ? errors?.image
-          : undefined;
-
-  const externalUrl = watch("external_url");
-  const externalIsTextFile =
-    externalUrl instanceof File &&
-    (externalUrl.type.includes("text") || externalUrl.type.includes("pdf"));
-
-  const showCoverImageUpload =
-    watch("animation_url") instanceof File ||
-    watch("external_url") instanceof File;
+  const {
+    media,
+    image,
+    mediaFileError,
+    showCoverImageUpload,
+    animation_url,
+    external_url,
+  } = getUploadedNFTMediaMeta(form);
 
   const sendAndConfirmTx = useSendAndConfirmTransaction();
   const nftMintNotifications = useTxNotifications(
@@ -198,7 +149,7 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({
         })}
       >
         <div className="flex flex-col gap-2">
-          <Heading size="subtitle.md">Metadata</Heading>
+          <Heading size="subtitle.md">Metadata xx</Heading>
           <Divider />
         </div>
         <FormControl isRequired isInvalid={!!errors.name}>
@@ -211,7 +162,8 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({
           <div>
             <FileInput
               previewMaxWidth="200px"
-              value={mediaFileUrl as File | string}
+              client={contract.client}
+              value={media}
               showUploadButton
               showPreview={true}
               setValue={setFile}
@@ -232,9 +184,10 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({
           <FormControl isInvalid={!!errors.image}>
             <FormLabel>Cover Image</FormLabel>
             <FileInput
+              client={contract.client}
               previewMaxWidth="200px"
               accept={{ "image/*": [] }}
-              value={imageUrl}
+              value={image}
               showUploadButton
               setValue={(file) => setValue("image", file)}
               className="shrink-0 rounded border border-border transition-all"
@@ -266,6 +219,7 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({
         )}
         <PropertiesFormControl
           watch={watch}
+          client={contract.client}
           // biome-ignore lint/suspicious/noExplicitAny: FIXME
           errors={errors as any}
           control={control}
@@ -283,7 +237,7 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({
               <Heading size="subtitle.md">Advanced Options</Heading>
               <AccordionIcon />
             </AccordionButton>
-            <AccordionPanel className="flex flex-col gap-6 px-0">
+            <AccordionPanel className="!px-0 flex flex-col gap-6">
               <FormControl isInvalid={!!errors.background_color}>
                 <FormLabel>
                   Background Color <OpenSeaPropertyBadge />
@@ -296,7 +250,8 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({
                   {errors?.background_color?.message}
                 </FormErrorMessage>
               </FormControl>
-              {!externalIsTextFile && (
+
+              {!(external_url instanceof File) && (
                 <FormControl isInvalid={!!errors.external_url}>
                   <FormLabel>
                     External URL <OpenSeaPropertyBadge />
@@ -312,44 +267,42 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({
                   </FormErrorMessage>
                 </FormControl>
               )}
-              <FormControl isInvalid={!!errors.image}>
-                <FormLabel>Image URL</FormLabel>
-                <Input
-                  value={
-                    typeof imageUrlFormValue === "string"
-                      ? imageUrlFormValue
-                      : ""
-                  }
-                  onChange={(e) => {
-                    setValue("image", e.target.value);
-                  }}
-                />
-                <FormHelperText>
-                  If you already have your NFT image pre-uploaded to a URL, you
-                  can specify it here instead of uploading the asset
-                </FormHelperText>
-                <FormErrorMessage>{errors?.image?.message}</FormErrorMessage>
-              </FormControl>
-              <FormControl isInvalid={!!errors.animation_url}>
-                <FormLabel>Animation URL</FormLabel>
-                <Input
-                  value={
-                    typeof animationUrlFormValue === "string"
-                      ? animationUrlFormValue
-                      : ""
-                  }
-                  onChange={(e) => {
-                    setValue("animation_url", e.target.value);
-                  }}
-                />
-                <FormHelperText>
-                  If you already have your NFT Animation URL pre-uploaded to a
-                  URL, you can specify it here instead of uploading the asset
-                </FormHelperText>
-                <FormErrorMessage>
-                  {errors?.animation_url?.message}
-                </FormErrorMessage>
-              </FormControl>
+
+              {!(image instanceof File) && (
+                <FormControl isInvalid={!!errors.image}>
+                  <FormLabel>Image URL</FormLabel>
+                  <Input
+                    value={image}
+                    onChange={(e) => {
+                      setValue("image", e.target.value);
+                    }}
+                  />
+                  <FormHelperText>
+                    If you already have your NFT image pre-uploaded to a URL,
+                    you can specify it here instead of uploading the asset
+                  </FormHelperText>
+                  <FormErrorMessage>{errors?.image?.message}</FormErrorMessage>
+                </FormControl>
+              )}
+
+              {!(animation_url instanceof File) && (
+                <FormControl isInvalid={!!errors.animation_url}>
+                  <FormLabel>Animation URL</FormLabel>
+                  <Input
+                    value={animation_url}
+                    onChange={(e) => {
+                      setValue("animation_url", e.target.value);
+                    }}
+                  />
+                  <FormHelperText>
+                    If you already have your NFT Animation URL pre-uploaded to a
+                    URL, you can specify it here instead of uploading the asset
+                  </FormHelperText>
+                  <FormErrorMessage>
+                    {errors?.animation_url?.message}
+                  </FormErrorMessage>
+                </FormControl>
+              )}
             </AccordionPanel>
           </AccordionItem>
         </Accordion>
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-form.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-form.tsx
index afa81a8359b..88cc8f4e313 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-form.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-form.tsx
@@ -14,7 +14,6 @@ import {
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { FileInput } from "components/shared/FileInput";
 import { useTrack } from "hooks/analytics/useTrack";
-import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import type { Dispatch, SetStateAction } from "react";
 import { useForm } from "react-hook-form";
@@ -31,6 +30,10 @@ import {
 } from "tw-components";
 import type { NFTMetadataInputLimited } from "types/modified-types";
 import { parseAttributes } from "utils/parseAttributes";
+import {
+  getUploadedNFTMediaMeta,
+  handleNFTMediaUpload,
+} from "../../modules/components/nft/handleNFTMediaUpload";
 
 const SHARED_METADATA_FORM_ID = "shared-metadata-form";
 
@@ -42,75 +45,20 @@ export const SharedMetadataForm: React.FC<{
   const trackEvent = useTrack();
   const address = useActiveAccount()?.address;
   const sendAndConfirmTx = useSendAndConfirmTransaction();
+  const form = useForm<NFTMetadataInputLimited>();
   const {
     setValue,
     register,
-    watch,
     handleSubmit,
     formState: { errors, isDirty },
-  } = useForm<NFTMetadataInputLimited>();
+  } = form;
 
   const setFile = (file: File) => {
-    if (file.type.includes("image")) {
-      // image files
-      setValue("image", file);
-      if (watch("external_url") instanceof File) {
-        setValue("external_url", undefined);
-      }
-      if (watch("animation_url") instanceof File) {
-        setValue("animation_url", undefined);
-      }
-    } else if (
-      ["audio", "video", "text/html", "model/*"].some((type: string) =>
-        file.type.includes(type),
-      ) ||
-      file.name?.endsWith(".glb") ||
-      file.name?.endsWith(".usdz") ||
-      file.name?.endsWith(".gltf") ||
-      file.name.endsWith(".obj")
-    ) {
-      // audio, video, html, and glb (3d) files
-      setValue("animation_url", file);
-      if (watch("external_url") instanceof File) {
-        setValue("external_url", undefined);
-      }
-    } else if (
-      ["text", "application/pdf"].some((type: string) =>
-        file.type?.includes(type),
-      )
-    ) {
-      // text and pdf files
-      setValue("external_url", file);
-      if (watch("animation_url") instanceof File) {
-        setValue("animation_url", undefined);
-      }
-    }
+    handleNFTMediaUpload({ file, form });
   };
 
-  const imageUrl = useImageFileOrUrl(watch("image") as File | string);
-  const animationUrlFormValue = watch("animation_url");
-  const imageUrlFormValue = watch("image");
-  const mediaFileUrl =
-    watch("animation_url") instanceof File
-      ? watch("animation_url")
-      : watch("external_url") instanceof File
-        ? watch("external_url")
-        : watch("image") instanceof File
-          ? imageUrl
-          : undefined;
-
-  const mediaFileError =
-    watch("animation_url") instanceof File
-      ? errors?.animation_url
-      : watch("external_url") instanceof File
-        ? errors?.external_url
-        : watch("image") instanceof File
-          ? errors?.image
-          : undefined;
-
-  const showCoverImageUpload =
-    watch("animation_url") instanceof File ||
-    watch("external_url") instanceof File;
+  const { media, image, mediaFileError, showCoverImageUpload, animation_url } =
+    getUploadedNFTMediaMeta(form);
 
   const setSharedMetaNotifications = useTxNotifications(
     "Shared metadata updated successfully",
@@ -185,7 +133,8 @@ export const SharedMetadataForm: React.FC<{
           <div>
             <FileInput
               previewMaxWidth="200px"
-              value={mediaFileUrl as File | string}
+              value={media}
+              client={contract.client}
               showUploadButton
               showPreview={true}
               setValue={setFile}
@@ -206,9 +155,10 @@ export const SharedMetadataForm: React.FC<{
           <FormControl isInvalid={!!errors.image}>
             <FormLabel>Cover Image</FormLabel>
             <FileInput
+              client={contract.client}
               previewMaxWidth="200px"
               accept={{ "image/*": [] }}
-              value={imageUrl}
+              value={image}
               showUploadButton
               setValue={(file) => setValue("image", file)}
               className="shrink-0 rounded border border-border transition-all"
@@ -237,45 +187,42 @@ export const SharedMetadataForm: React.FC<{
               <Heading size="subtitle.md">Advanced Options</Heading>
               <AccordionIcon />
             </AccordionButton>
-            <AccordionPanel className="flex flex-col gap-6 px-0">
-              <FormControl isInvalid={!!errors.image}>
-                <FormLabel>Image URL</FormLabel>
-                <Input
-                  value={
-                    typeof imageUrlFormValue === "string"
-                      ? imageUrlFormValue
-                      : ""
-                  }
-                  onChange={(e) => {
-                    setValue("image", e.target.value);
-                  }}
-                />
-                <FormHelperText>
-                  If you already have your NFT image pre-uploaded, you can set
-                  the URL or URI here.
-                </FormHelperText>
-                <FormErrorMessage>{errors?.image?.message}</FormErrorMessage>
-              </FormControl>
-              <FormControl isInvalid={!!errors.animation_url}>
-                <FormLabel>Animation URL</FormLabel>
-                <Input
-                  value={
-                    typeof animationUrlFormValue === "string"
-                      ? animationUrlFormValue
-                      : ""
-                  }
-                  onChange={(e) => {
-                    setValue("animation_url", e.target.value);
-                  }}
-                />
-                <FormHelperText>
-                  If you already have your NFT Animation URL pre-uploaded, you
-                  can set the URL or URI here.
-                </FormHelperText>
-                <FormErrorMessage>
-                  {errors?.animation_url?.message}
-                </FormErrorMessage>
-              </FormControl>
+            <AccordionPanel className="!px-0 flex flex-col gap-6">
+              {!(image instanceof File) && (
+                <FormControl isInvalid={!!errors.image}>
+                  <FormLabel>Image URL</FormLabel>
+                  <Input
+                    value={image}
+                    onChange={(e) => {
+                      setValue("image", e.target.value);
+                    }}
+                  />
+                  <FormHelperText>
+                    If you already have your NFT image pre-uploaded, you can set
+                    the URL or URI here.
+                  </FormHelperText>
+                  <FormErrorMessage>{errors?.image?.message}</FormErrorMessage>
+                </FormControl>
+              )}
+
+              {!(animation_url instanceof File) && (
+                <FormControl isInvalid={!!errors.animation_url}>
+                  <FormLabel>Animation URL</FormLabel>
+                  <Input
+                    value={animation_url}
+                    onChange={(e) => {
+                      setValue("animation_url", e.target.value);
+                    }}
+                  />
+                  <FormHelperText>
+                    If you already have your NFT Animation URL pre-uploaded, you
+                    can set the URL or URI here.
+                  </FormHelperText>
+                  <FormErrorMessage>
+                    {errors?.animation_url?.message}
+                  </FormErrorMessage>
+                </FormControl>
+              )}
             </AccordionPanel>
           </AccordionItem>
         </Accordion>
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx
index ca42ff04ea3..34e2ed09b68 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx
@@ -139,7 +139,7 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
     }
     if (isErc1155) {
       cols.push({
-        Header: "Supply",
+        Header: "Circulating Supply",
         accessor: (row) => row,
         Cell: (cell: CellProps<NFT, number>) => {
           if (cell.row.original.type === "ERC1155") {
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx
index 7dc46eacd0c..eb452f6a9d8 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx
@@ -14,7 +14,6 @@ import { TransactionButton } from "components/buttons/TransactionButton";
 import { FileInput } from "components/shared/FileInput";
 import { CommonContractSchema } from "constants/schemas";
 import { useTrack } from "hooks/analytics/useTrack";
-import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { PlusIcon, Trash2Icon } from "lucide-react";
 import { useMemo } from "react";
@@ -224,9 +223,10 @@ export const SettingsMetadata = ({
               >
                 <FormLabel>Image</FormLabel>
                 <FileInput
+                  client={contract.client}
                   isDisabled={metadata.isPending || sendTransaction.isPending}
                   accept={{ "image/*": [] }}
-                  value={useImageFileOrUrl(watch("image"))}
+                  value={watch("image")}
                   setValue={(file) =>
                     setValue("image", file, {
                       shouldTouch: true,
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/airdrop-upload.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/airdrop-upload.tsx
index bb292611fbc..7b715894668 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/airdrop-upload.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/airdrop-upload.tsx
@@ -6,6 +6,7 @@ import { Link } from "@chakra-ui/react";
 import { useCsvUpload } from "hooks/useCsvUpload";
 import { CircleAlertIcon, UploadIcon } from "lucide-react";
 import { useMemo, useRef } from "react";
+import { useDropzone } from "react-dropzone";
 import type { Column } from "react-table";
 import { type ThirdwebClient, ZERO_ADDRESS } from "thirdweb";
 import { Button, Heading, Text } from "tw-components";
@@ -36,19 +37,14 @@ export const AirdropUpload: React.FC<AirdropUploadProps> = ({
   onClose,
   client,
 }) => {
-  const {
-    normalizeQuery,
-    getInputProps,
-    getRootProps,
-    isDragActive,
-    rawData,
-    noCsv,
-    reset,
-    removeInvalid,
-  } = useCsvUpload<AirdropAddressInput>({ csvParser, client });
+  const csvUpload = useCsvUpload<AirdropAddressInput>({ csvParser, client });
+  const dropzone = useDropzone({
+    onDrop: csvUpload.setFiles,
+  });
+
   const paginationPortalRef = useRef<HTMLDivElement>(null);
 
-  const normalizeData = normalizeQuery.data;
+  const normalizeData = csvUpload.normalizeQuery.data;
 
   const columns = useMemo(() => {
     return [
@@ -107,11 +103,11 @@ export const AirdropUpload: React.FC<AirdropUploadProps> = ({
 
   return (
     <div className="flex w-full flex-col gap-6">
-      {normalizeData.result.length && rawData.length > 0 ? (
+      {normalizeData.result.length && csvUpload.rawData.length > 0 ? (
         <>
           <CsvDataTable<AirdropAddressInput>
             portalRef={paginationPortalRef}
-            data={normalizeQuery.data.result}
+            data={csvUpload.normalizeQuery.data.result}
             columns={columns}
           />
           <div className="mt-4 flex flex-col justify-between md:mt-0">
@@ -119,21 +115,21 @@ export const AirdropUpload: React.FC<AirdropUploadProps> = ({
             <div className="mt-3 ml-auto flex w-full flex-row gap-2 md:w-auto">
               <Button
                 borderRadius="md"
-                disabled={rawData.length === 0}
+                disabled={csvUpload.rawData.length === 0}
                 onClick={() => {
-                  reset();
+                  csvUpload.reset();
                 }}
                 w={{ base: "100%", md: "auto" }}
               >
                 Reset
               </Button>
-              {normalizeQuery.data.invalidFound ? (
+              {csvUpload.normalizeQuery.data.invalidFound ? (
                 <Button
                   borderRadius="md"
                   colorScheme="primary"
-                  disabled={rawData.length === 0}
+                  disabled={csvUpload.rawData.length === 0}
                   onClick={() => {
-                    removeInvalid();
+                    csvUpload.removeInvalid();
                   }}
                   w={{ base: "100%", md: "auto" }}
                 >
@@ -145,7 +141,7 @@ export const AirdropUpload: React.FC<AirdropUploadProps> = ({
                   colorScheme="primary"
                   onClick={onSave}
                   w={{ base: "100%", md: "auto" }}
-                  isDisabled={rawData.length === 0}
+                  isDisabled={csvUpload.rawData.length === 0}
                 >
                   Next
                 </Button>
@@ -159,18 +155,18 @@ export const AirdropUpload: React.FC<AirdropUploadProps> = ({
             <div
               className={cn(
                 "flex h-full cursor-pointer items-center justify-center rounded-md border border-border hover:border-primary",
-                noCsv ? "bg-red-200" : "bg-background",
+                csvUpload.noCsv ? "bg-red-200" : "bg-background",
               )}
-              {...getRootProps()}
+              {...dropzone.getRootProps()}
             >
-              <input {...getInputProps()} />
+              <input {...dropzone.getInputProps()} />
               <div className="flex flex-col p-6">
                 <UploadIcon
                   className={cn("mx-auto mb-2 size-4 text-gray-500", {
-                    "text-red-500": noCsv,
+                    "text-red-500": csvUpload.noCsv,
                   })}
                 />
-                {isDragActive ? (
+                {dropzone.isDragActive ? (
                   <Heading as={Text} size="label.md">
                     Drop the files here
                   </Heading>
@@ -178,9 +174,9 @@ export const AirdropUpload: React.FC<AirdropUploadProps> = ({
                   <Heading
                     as={Text}
                     size="label.md"
-                    color={noCsv ? "red.500" : "gray.600"}
+                    color={csvUpload.noCsv ? "red.500" : "gray.600"}
                   >
-                    {noCsv
+                    {csvUpload.noCsv
                       ? `No valid CSV file found, make sure your CSV includes the "address" & "quantity" column.`
                       : "Drag & Drop a CSV file here"}
                   </Heading>
diff --git a/apps/dashboard/src/app/(app)/account/settings/AccountSettingsPageUI.tsx b/apps/dashboard/src/app/(app)/account/settings/AccountSettingsPageUI.tsx
index 1b1056880e9..4f2e759f85a 100644
--- a/apps/dashboard/src/app/(app)/account/settings/AccountSettingsPageUI.tsx
+++ b/apps/dashboard/src/app/(app)/account/settings/AccountSettingsPageUI.tsx
@@ -137,12 +137,12 @@ function AccountAvatarFormControl(props: {
           </p>
         </div>
         <FileInput
+          client={props.client}
           accept={{ "image/*": [] }}
-          value={avatar}
+          value={avatar || accountAvatarUrl}
           setValue={setAvatar}
           className="w-20 rounded-full lg:w-28"
           disableHelperText
-          fileUrl={accountAvatarUrl}
         />
       </div>
     </SettingsCard>
diff --git a/apps/dashboard/src/app/(app)/login/onboarding/team-onboarding/TeamInfoForm.stories.tsx b/apps/dashboard/src/app/(app)/login/onboarding/team-onboarding/TeamInfoForm.stories.tsx
index a8508452e42..4998ad6eab3 100644
--- a/apps/dashboard/src/app/(app)/login/onboarding/team-onboarding/TeamInfoForm.stories.tsx
+++ b/apps/dashboard/src/app/(app)/login/onboarding/team-onboarding/TeamInfoForm.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { teamStub } from "stories/stubs";
-import { storybookLog } from "stories/utils";
+import { storybookLog, storybookThirdwebClient } from "stories/utils";
 import { TeamOnboardingLayout } from "../onboarding-layout";
 import { TeamInfoFormUI } from "./TeamInfoForm";
 
@@ -35,6 +35,7 @@ function Story(props: {
   return (
     <TeamOnboardingLayout currentStep={1}>
       <TeamInfoFormUI
+        client={storybookThirdwebClient}
         onComplete={() => {
           storybookLog("onComplete");
         }}
diff --git a/apps/dashboard/src/app/(app)/login/onboarding/team-onboarding/TeamInfoForm.tsx b/apps/dashboard/src/app/(app)/login/onboarding/team-onboarding/TeamInfoForm.tsx
index f0f08859feb..c5fa09e6093 100644
--- a/apps/dashboard/src/app/(app)/login/onboarding/team-onboarding/TeamInfoForm.tsx
+++ b/apps/dashboard/src/app/(app)/login/onboarding/team-onboarding/TeamInfoForm.tsx
@@ -18,6 +18,7 @@ import { ArrowRightIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
+import type { ThirdwebClient } from "thirdweb";
 import { useDebounce } from "use-debounce";
 import { z } from "zod";
 import {
@@ -46,6 +47,7 @@ export function TeamInfoFormUI(props: {
   onComplete: (updatedTeam: Team) => void;
   isTeamSlugAvailable: (slug: string) => Promise<boolean>;
   teamSlug: string;
+  client: ThirdwebClient;
 }) {
   const form = useForm<FormValues>({
     resolver: zodResolver(formSchema),
@@ -159,6 +161,7 @@ export function TeamInfoFormUI(props: {
                   <div className="h-3" />
                   <FormControl>
                     <FileInput
+                      client={props.client}
                       accept={{ "image/*": [] }}
                       value={value}
                       setValue={(file) => onChange(file)}
diff --git a/apps/dashboard/src/app/(app)/login/onboarding/team-onboarding/team-onboarding.tsx b/apps/dashboard/src/app/(app)/login/onboarding/team-onboarding/team-onboarding.tsx
index ada5027196e..54bb9b18093 100644
--- a/apps/dashboard/src/app/(app)/login/onboarding/team-onboarding/team-onboarding.tsx
+++ b/apps/dashboard/src/app/(app)/login/onboarding/team-onboarding/team-onboarding.tsx
@@ -38,6 +38,7 @@ export function TeamInfoForm(props: {
         return res.data.result;
       }}
       teamSlug={props.teamSlug}
+      client={props.client}
       onComplete={(updatedTeam) => {
         router.replace(`/get-started/team/${updatedTeam.slug}/add-members`);
       }}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsx
index 82ca6113ee0..301a2680917 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsx
@@ -230,7 +230,7 @@ export function AuthOptionsForm({
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmit, (errors) => {
-          console.log(errors);
+          console.error(errors);
         })}
         className="flex flex-col gap-8"
       >
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPageUI.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPageUI.tsx
index 09c8dc6b90b..198dba545d5 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPageUI.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPageUI.tsx
@@ -221,11 +221,11 @@ function TeamAvatarFormControl(props: {
         </div>
         <FileInput
           accept={{ "image/*": [] }}
-          value={teamAvatar}
+          value={teamAvatar || teamAvatarUrl}
           setValue={setTeamAvatar}
           className="w-20 rounded-full lg:w-28"
           disableHelperText
-          fileUrl={teamAvatarUrl}
+          client={props.client}
         />
       </div>
     </SettingsCard>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/cards.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/cards.tsx
index c9ba6684621..d1c93a30421 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/cards.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/cards.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import { ImportModal } from "components/contract-components/import-contract/modal";
 import { useTrack } from "hooks/analytics/useTrack";
@@ -34,18 +33,17 @@ export function Cards(props: {
       <CardLink
         title="Create Coin"
         description="Launch your own ERC-20 coin"
-        href={`/team/${props.teamSlug}/${props.projectSlug}/assets/create`}
+        href={`/team/${props.teamSlug}/${props.projectSlug}/assets/create/token`}
         icon={CoinsIcon}
         trackingLabel="create-token"
       />
 
       <CardLink
         title="Create NFT Collection"
-        description="Launch your own ERC-721 NFT collection"
-        href={undefined}
+        description="Launch your own NFT collection"
+        href={`/team/${props.teamSlug}/${props.projectSlug}/assets/create/nft`}
         icon={ImagesIcon}
         trackingLabel="create-nft"
-        badge="Coming Soon"
       />
 
       <CardLink
@@ -69,7 +67,6 @@ function CardLink(props: {
   onClick?: () => void;
   icon: React.FC<{ className?: string }>;
   trackingLabel: string;
-  badge?: string;
 }) {
   const { onClick } = props;
   const isClickable = !!onClick || !!props.href;
@@ -111,17 +108,6 @@ function CardLink(props: {
         </div>
       </div>
 
-      {props.badge && (
-        <div className="absolute top-4 right-4">
-          <Badge
-            variant="outline"
-            className="border-dashed py-1 text-muted-foreground"
-          >
-            {props.badge}
-          </Badge>
-        </div>
-      )}
-
       <h3 className="mb-0.5 font-semibold text-lg tracking-tight">
         {props.href ? (
           <Link href={props.href} className="before:absolute before:inset-0">
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/PageHeader.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/PageHeader.tsx
new file mode 100644
index 00000000000..4bd5121591f
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/PageHeader.tsx
@@ -0,0 +1,56 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+
+export function CreateAssetPageHeader(props: {
+  teamSlug: string;
+  projectSlug: string;
+  title: string;
+  description: string;
+  containerClassName: string;
+}) {
+  return (
+    <div className="border-b">
+      <div className="border-b border-dashed py-3">
+        <Breadcrumb className={props.containerClassName}>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link
+                  href={`/team/${props.teamSlug}/${props.projectSlug}/assets`}
+                >
+                  Assets
+                </Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>{props.title}</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+
+      <div
+        className={cn(
+          "flex flex-col gap-3 py-8 lg:flex-row lg:items-center lg:justify-between",
+          props.containerClassName,
+        )}
+      >
+        <div>
+          <h1 className="font-semibold text-2xl tracking-tight lg:text-3xl">
+            {props.title}
+          </h1>
+          <p className="text-muted-foreground">{props.description}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/SocialUrls.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/SocialUrls.tsx
new file mode 100644
index 00000000000..0b3fcab5579
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/SocialUrls.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { PlusIcon, Trash2Icon } from "lucide-react";
+import { type UseFormReturn, useFieldArray } from "react-hook-form";
+
+type WithSocialUrls = {
+  socialUrls: {
+    url: string;
+    platform: string;
+  }[];
+};
+
+export function SocialUrlsFieldset<T extends WithSocialUrls>(props: {
+  form: UseFormReturn<T>;
+}) {
+  // T contains all properties of WithSocialUrls, so this is ok
+  const form = props.form as unknown as UseFormReturn<WithSocialUrls>;
+
+  const { fields, append, remove } = useFieldArray({
+    name: "socialUrls",
+    control: form.control,
+  });
+
+  return (
+    <div className="border-t border-dashed px-4 py-6 lg:px-6">
+      <h2 className="mb-2 font-medium text-sm">Social URLs</h2>
+
+      {fields.length > 0 && (
+        <div className="mb-5 space-y-4">
+          {fields.map((field, index) => (
+            <div
+              key={field.id}
+              className="flex gap-3 max-sm:mb-6 max-sm:border-b max-sm:border-dashed max-sm:pb-6"
+            >
+              <div className="flex flex-1 flex-col gap-3 lg:flex-row">
+                <FormField
+                  control={form.control}
+                  name={`socialUrls.${index}.platform`}
+                  render={({ field }) => (
+                    <FormItem className="lg:max-w-[140px]">
+                      <FormControl>
+                        <Input
+                          {...field}
+                          placeholder="Platform"
+                          aria-label="Platform"
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name={`socialUrls.${index}.url`}
+                  render={({ field }) => (
+                    <FormItem className="flex-1">
+                      <FormControl>
+                        <Input
+                          {...field}
+                          placeholder="https://..."
+                          aria-label="Platform URL"
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                onClick={() => remove(index)}
+                className="rounded-full"
+              >
+                <Trash2Icon className="h-4 w-4" />
+                <span className="sr-only">Remove</span>
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <Button
+        type="button"
+        size="sm"
+        variant="outline"
+        onClick={() => append({ platform: "", url: "" })}
+        className="h-auto gap-1.5 rounded-full px-3 py-1.5 text-xs"
+      >
+        <PlusIcon className="size-3.5" />
+        Add Social URL
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/chain-overview.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/chain-overview.tsx
new file mode 100644
index 00000000000..9686de9a5a9
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/chain-overview.tsx
@@ -0,0 +1,24 @@
+import { ChainIconClient } from "components/icons/ChainIcon";
+import { useAllChainsData } from "hooks/chains/allChains";
+import type { ThirdwebClient } from "thirdweb/dist/types/client/client";
+
+export function ChainOverview(props: {
+  chainId: string;
+  client: ThirdwebClient;
+}) {
+  const { idToChain } = useAllChainsData();
+  const chainMetadata = idToChain.get(Number(props.chainId));
+
+  return (
+    <div className="flex items-center gap-2">
+      <ChainIconClient
+        className="size-3.5"
+        client={props.client}
+        src={chainMetadata?.icon?.url || ""}
+      />
+      <p className="text-foreground text-sm">
+        {chainMetadata?.name || `Chain ${props.chainId}`}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/download-file-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/download-file-button.tsx
new file mode 100644
index 00000000000..5c7b765e0cd
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/download-file-button.tsx
@@ -0,0 +1,42 @@
+import { Button } from "@/components/ui/button";
+import { ArrowDownToLineIcon } from "lucide-react";
+
+export function handleDownload(params: {
+  fileContent: string;
+  fileNameWithExtension: string;
+  fileFormat: "text/csv" | "application/json";
+}) {
+  const link = document.createElement("a");
+  const blob = new Blob([params.fileContent], {
+    type: params.fileFormat,
+  });
+  const objectURL = URL.createObjectURL(blob);
+  link.href = objectURL;
+  link.download = params.fileNameWithExtension;
+  link.click();
+  URL.revokeObjectURL(objectURL);
+}
+
+export function DownloadFileButton(props: {
+  fileContent: string;
+  fileNameWithExtension: string;
+  fileFormat: "text/csv" | "application/json";
+  label: string;
+}) {
+  return (
+    <Button
+      size="sm"
+      className="gap-2"
+      onClick={() => {
+        handleDownload({
+          fileContent: props.fileContent,
+          fileNameWithExtension: props.fileNameWithExtension,
+          fileFormat: props.fileFormat,
+        });
+      }}
+    >
+      <ArrowDownToLineIcon className="size-4" />
+      {props.label}
+    </Button>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/file-preview.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/file-preview.tsx
new file mode 100644
index 00000000000..2e001efef17
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/file-preview.tsx
@@ -0,0 +1,64 @@
+import { Img } from "@/components/blocks/Img";
+import { fileToBlobUrl } from "@/lib/file-to-url";
+import { cn } from "@/lib/utils";
+import { ImageOffIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import type { ThirdwebClient } from "thirdweb";
+import { MediaRenderer } from "thirdweb/react";
+
+export function FilePreview(props: {
+  srcOrFile: File | string | undefined;
+  fallback?: React.ReactNode;
+  className?: string;
+  client: ThirdwebClient;
+  imgContainerClassName?: string;
+}) {
+  const [objectUrl, setObjectUrl] = useState<string>("");
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (props.srcOrFile instanceof File) {
+      const url = fileToBlobUrl(props.srcOrFile);
+      setObjectUrl(url);
+      return () => {
+        URL.revokeObjectURL(url);
+      };
+    } else if (typeof props.srcOrFile === "string") {
+      setObjectUrl(props.srcOrFile);
+    } else {
+      setObjectUrl("");
+    }
+  }, [props.srcOrFile]);
+
+  // shortcut just for images
+  const isImage =
+    props.srcOrFile instanceof File &&
+    props.srcOrFile.type.startsWith("image/");
+
+  if (!objectUrl) {
+    return (
+      <div className={cn("flex items-center justify-center", props.className)}>
+        <ImageOffIcon className="size-6 text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (isImage) {
+    return (
+      <Img
+        src={objectUrl}
+        className={props.className}
+        fallback={props.fallback}
+        containerClassName={props.imgContainerClassName}
+      />
+    );
+  }
+
+  return (
+    <MediaRenderer
+      src={objectUrl}
+      client={props.client}
+      className={cn(props.className, "[&>div]:!bg-muted")}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/schema.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/schema.ts
new file mode 100644
index 00000000000..c344c60dd44
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/schema.ts
@@ -0,0 +1,35 @@
+import { isAddress } from "thirdweb";
+import * as z from "zod";
+
+const urlSchema = z.string().url();
+
+export const socialUrlsSchema = z.array(
+  z.object({
+    platform: z.string(),
+    url: z.string().refine(
+      (val) => {
+        if (val === "") {
+          return true;
+        }
+
+        const url = val.startsWith("http") ? val : `https://${val}`;
+        return urlSchema.safeParse(url).success;
+      },
+      {
+        message: "Invalid URL",
+      },
+    ),
+  }),
+);
+
+export const addressSchema = z.string().refine(
+  (value) => {
+    if (isAddress(value)) {
+      return true;
+    }
+    return false;
+  },
+  {
+    message: "Invalid address",
+  },
+);
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/step-card.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/step-card.tsx
new file mode 100644
index 00000000000..ee1331d5ace
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/step-card.tsx
@@ -0,0 +1,98 @@
+import { Button } from "@/components/ui/button";
+import { useTrack } from "hooks/analytics/useTrack";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import { getStepCardTrackingData } from "../token/_common/tracking";
+
+export function StepCard(props: {
+  title: string;
+  tracking: {
+    page: string;
+    contractType: "DropERC20" | "NFTCollection";
+  };
+  prevButton:
+    | undefined
+    | {
+        onClick: () => void;
+      };
+  nextButton:
+    | undefined
+    | {
+        type: "submit";
+        disabled?: boolean;
+      }
+    | {
+        type: "custom";
+        custom: React.ReactNode;
+      }
+    | {
+        type: "click";
+        disabled?: boolean;
+        onClick: () => void;
+      };
+  children: React.ReactNode;
+}) {
+  const trackEvent = useTrack();
+  const nextButton = props.nextButton;
+  return (
+    <div className="rounded-lg border bg-card">
+      <h2 className="border-b px-4 py-5 font-semibold text-xl tracking-tight md:px-6">
+        {props.title}
+      </h2>
+
+      {props.children}
+
+      {(props.prevButton || props.nextButton) && (
+        <div className="flex justify-end gap-3 border-t p-6">
+          {props.prevButton && (
+            <Button
+              variant="outline"
+              className="gap-2"
+              onClick={() => {
+                props.prevButton?.onClick();
+                trackEvent(
+                  getStepCardTrackingData({
+                    step: props.tracking.page,
+                    contractType: props.tracking.contractType,
+                    click: "prev",
+                  }),
+                );
+              }}
+            >
+              <ArrowLeftIcon className="size-4" />
+              Back
+            </Button>
+          )}
+
+          {nextButton && nextButton.type !== "custom" && (
+            <Button
+              variant="default"
+              className="gap-2"
+              type="submit"
+              disabled={nextButton.disabled}
+              onClick={() => {
+                trackEvent(
+                  getStepCardTrackingData({
+                    step: props.tracking.page,
+                    contractType: props.tracking.contractType,
+                    click: "next",
+                  }),
+                );
+
+                if (nextButton.type === "click") {
+                  nextButton.onClick();
+                }
+              }}
+            >
+              Next
+              <ArrowRightIcon className="size-4" />
+            </Button>
+          )}
+
+          {props.nextButton &&
+            props.nextButton.type === "custom" &&
+            props.nextButton.custom}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-card.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-card.tsx
deleted file mode 100644
index f46166dce68..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-card.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { useTrack } from "hooks/analytics/useTrack";
-import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
-import { getStepCardTrackingData } from "./tracking";
-
-export function StepCard(props: {
-  title: string;
-  page: "info" | "distribution" | "launch";
-  prevButton:
-    | undefined
-    | {
-        onClick: () => void;
-      };
-  nextButton:
-    | undefined
-    | {
-        type: "submit";
-        disabled?: boolean;
-      }
-    | {
-        type: "custom";
-        custom: React.ReactNode;
-      };
-  children: React.ReactNode;
-}) {
-  const trackEvent = useTrack();
-  return (
-    <div className="rounded-lg border bg-card">
-      <h2 className="border-b px-4 py-5 font-semibold text-xl tracking-tight md:px-6">
-        {props.title}
-      </h2>
-
-      {props.children}
-
-      <div className="flex justify-end gap-3 border-t p-6">
-        {props.prevButton && (
-          <Button
-            variant="outline"
-            className="gap-2"
-            onClick={() => {
-              props.prevButton?.onClick();
-              trackEvent(
-                getStepCardTrackingData({
-                  step: props.page,
-                  click: "prev",
-                }),
-              );
-            }}
-          >
-            <ArrowLeftIcon className="size-4" />
-            Back
-          </Button>
-        )}
-
-        {props.nextButton && props.nextButton.type === "submit" && (
-          <Button
-            variant="default"
-            className="gap-2"
-            type="submit"
-            disabled={props.nextButton.disabled}
-            onClick={() => {
-              trackEvent(
-                getStepCardTrackingData({
-                  step: props.page,
-                  click: "next",
-                }),
-              );
-            }}
-          >
-            Next
-            <ArrowRightIcon className="size-4" />
-          </Button>
-        )}
-
-        {props.nextButton &&
-          props.nextButton.type === "custom" &&
-          props.nextButton.custom}
-      </div>
-    </div>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/_common/form.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/_common/form.ts
new file mode 100644
index 00000000000..03cac30d6f4
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/_common/form.ts
@@ -0,0 +1,64 @@
+import { isAddress } from "thirdweb";
+import * as z from "zod";
+import { socialUrlsSchema } from "../../_common/schema";
+import type { NFTMetadataWithPrice } from "../upload-nfts/batch-upload/process-files";
+
+export const nftCollectionInfoFormSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  symbol: z.string(),
+  chain: z.string().min(1, "Chain is required"),
+  description: z.string().optional(),
+  image: z.instanceof(File).optional(),
+  socialUrls: socialUrlsSchema,
+});
+
+const addressSchema = z.string().refine((value) => {
+  if (isAddress(value)) {
+    return true;
+  }
+
+  return false;
+});
+
+export const nftSalesSettingsFormSchema = z.object({
+  royaltyRecipient: addressSchema,
+  primarySaleRecipient: addressSchema,
+  royaltyBps: z.coerce.number().min(0).max(10000),
+});
+
+export type NFTCollectionInfoFormValues = z.infer<
+  typeof nftCollectionInfoFormSchema
+>;
+
+export type CreateNFTCollectionAllValues = {
+  collectionInfo: NFTCollectionInfoFormValues;
+  nfts: NFTMetadataWithPrice[];
+  sales: NFTSalesSettingsFormValues;
+};
+
+export type CreateNFTCollectionFunctions = {
+  erc721: {
+    deployContract: (values: CreateNFTCollectionAllValues) => Promise<{
+      contractAddress: string;
+    }>;
+    setClaimConditions: (values: CreateNFTCollectionAllValues) => Promise<void>;
+    lazyMintNFTs: (values: CreateNFTCollectionAllValues) => Promise<void>;
+  };
+  erc1155: {
+    deployContract: (values: CreateNFTCollectionAllValues) => Promise<{
+      contractAddress: string;
+    }>;
+    setClaimConditions: (params: {
+      values: CreateNFTCollectionAllValues;
+      batch: {
+        startIndex: number;
+        count: number;
+      };
+    }) => Promise<void>;
+    lazyMintNFTs: (values: CreateNFTCollectionAllValues) => Promise<void>;
+  };
+};
+
+export type NFTSalesSettingsFormValues = z.infer<
+  typeof nftSalesSettingsFormSchema
+>;
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/_common/pages.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/_common/pages.ts
new file mode 100644
index 00000000000..f86b3dec638
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/_common/pages.ts
@@ -0,0 +1,6 @@
+export const nftCreationPages = {
+  "collection-info": "collection-info",
+  "upload-assets": "upload-assets",
+  "sales-settings": "sales-settings",
+  "launch-nft": "launch-nft",
+} as const;
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/_common/tracking.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/_common/tracking.ts
new file mode 100644
index 00000000000..4628cb2ae47
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/_common/tracking.ts
@@ -0,0 +1,91 @@
+// example: asset.claim-conditions.attempt
+export function getNFTStepTrackingData(
+  params: {
+    action: "claim-conditions" | "lazy-mint" | "mint" | "deploy";
+    ercType: "erc721" | "erc1155";
+    chainId: number;
+  } & (
+    | {
+        status: "attempt" | "success";
+      }
+    | {
+        status: "error";
+        errorMessage: string;
+      }
+  ),
+) {
+  return {
+    category: "asset",
+    action: params.action,
+    contractType: params.ercType === "erc721" ? "DropERC721" : "DropERC1155",
+    label: params.status,
+    chainId: params.chainId,
+    ...(params.status === "error"
+      ? {
+          errorMessage: params.errorMessage,
+        }
+      : {}),
+  };
+}
+
+export function getNFTLaunchTrackingData(
+  params: {
+    chainId: number;
+    ercType: "erc721" | "erc1155";
+  } & (
+    | {
+        type: "attempt" | "success";
+      }
+    | {
+        type: "error";
+        errorMessage: string;
+      }
+  ),
+) {
+  return {
+    category: "asset",
+    action: "launch",
+    label: params.type,
+    contractType: "NFTCollection",
+    ercType: params.ercType,
+    chainId: params.chainId,
+    ...(params.type === "error"
+      ? {
+          errorMessage: params.errorMessage,
+        }
+      : {}),
+  };
+}
+
+export function getNFTDeploymentTrackingData(
+  params: {
+    chainId: number;
+    ercType: "erc721" | "erc1155";
+  } & (
+    | {
+        type: "attempt" | "success";
+      }
+    | {
+        type: "error";
+        errorMessage: string;
+      }
+  ),
+) {
+  // using "custom-contract" because it has to match the main deployment tracking format
+  return {
+    category: "custom-contract",
+    action: "deploy",
+    label: params.type,
+    publisherAndContractName:
+      params.ercType === "erc721"
+        ? "deployer.thirdweb.eth/DropERC721"
+        : "deployer.thirdweb.eth/DropERC1155",
+    chainId: params.chainId,
+    deploymentType: "asset",
+    ...(params.type === "error"
+      ? {
+          errorMessage: params.errorMessage,
+        }
+      : {}),
+  };
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/collection-info/nft-collection-info-fieldset.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/collection-info/nft-collection-info-fieldset.tsx
new file mode 100644
index 00000000000..99af8ef0047
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/collection-info/nft-collection-info-fieldset.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
+import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { Form } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { ClientOnly } from "components/ClientOnly/ClientOnly";
+import { FileInput } from "components/shared/FileInput";
+import type { UseFormReturn } from "react-hook-form";
+import type { ThirdwebClient } from "thirdweb";
+import { SocialUrlsFieldset } from "../../_common/SocialUrls";
+import { StepCard } from "../../_common/step-card";
+import type { NFTCollectionInfoFormValues } from "../_common/form";
+import { nftCreationPages } from "../_common/pages";
+
+export function NFTCollectionInfoFieldset(props: {
+  client: ThirdwebClient;
+  onNext: () => void;
+  form: UseFormReturn<NFTCollectionInfoFormValues>;
+  onChainUpdated: () => void;
+}) {
+  const { form } = props;
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(props.onNext)}>
+        <StepCard
+          tracking={{
+            page: nftCreationPages["collection-info"],
+            contractType: "NFTCollection",
+          }}
+          title="Collection Info"
+          prevButton={undefined}
+          nextButton={{
+            type: "submit",
+          }}
+        >
+          <div className="flex flex-col gap-6 px-4 py-6 md:grid md:grid-cols-[280px_1fr] md:px-6">
+            {/* left */}
+            <FormFieldSetup
+              errorMessage={form.formState.errors.image?.message as string}
+              label="Image"
+              isRequired={false}
+            >
+              <FileInput
+                accept={{ "image/*": [] }}
+                client={props.client}
+                value={form.watch("image")}
+                setValue={(file) =>
+                  form.setValue("image", file, {
+                    shouldTouch: true,
+                  })
+                }
+                className="rounded-lg border-border bg-background transition-all duration-200 hover:border-active-border hover:bg-background"
+              />
+            </FormFieldSetup>
+
+            {/* right */}
+            <div className="flex flex-col gap-6">
+              {/* name + symbol */}
+              <div className="flex flex-col gap-6 lg:flex-row lg:gap-4">
+                <FormFieldSetup
+                  className="grow"
+                  label="Name"
+                  isRequired
+                  htmlFor="name"
+                  errorMessage={form.formState.errors.name?.message}
+                >
+                  <Input
+                    id="name"
+                    placeholder="My NFT Collection"
+                    {...form.register("name")}
+                  />
+                </FormFieldSetup>
+
+                <FormFieldSetup
+                  className="lg:max-w-[200px]"
+                  label="Symbol"
+                  isRequired={false}
+                  htmlFor="symbol"
+                  errorMessage={form.formState.errors.symbol?.message}
+                >
+                  <Input
+                    id="symbol"
+                    placeholder="XYZ"
+                    {...form.register("symbol")}
+                  />
+                </FormFieldSetup>
+              </div>
+
+              {/* chain */}
+              <FormFieldSetup
+                label="Chain"
+                isRequired
+                htmlFor="chain"
+                errorMessage={form.formState.errors.chain?.message}
+              >
+                <ClientOnly ssr={null}>
+                  <SingleNetworkSelector
+                    className="bg-background"
+                    client={props.client}
+                    chainId={Number(form.watch("chain"))}
+                    onChange={(chain) => {
+                      form.setValue("chain", chain.toString());
+                      props.onChainUpdated();
+                    }}
+                    disableChainId
+                  />
+                </ClientOnly>
+              </FormFieldSetup>
+
+              <FormFieldSetup
+                label="Description"
+                isRequired={false}
+                htmlFor="description"
+                className="flex grow flex-col"
+                errorMessage={form.formState.errors.description?.message}
+              >
+                <Textarea
+                  id="description"
+                  placeholder="Describe your NFT collection"
+                  className="grow"
+                  {...form.register("description")}
+                />
+              </FormFieldSetup>
+            </div>
+          </div>
+
+          <SocialUrlsFieldset form={form} />
+        </StepCard>
+      </form>
+    </Form>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/create-nft-page-ui.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/create-nft-page-ui.tsx
new file mode 100644
index 00000000000..441f33387f6
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/create-nft-page-ui.tsx
@@ -0,0 +1,172 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import {
+  NATIVE_TOKEN_ADDRESS,
+  type ThirdwebClient,
+  getAddress,
+} from "thirdweb";
+import { useActiveAccount } from "thirdweb/react";
+import {
+  type CreateNFTCollectionFunctions,
+  type NFTCollectionInfoFormValues,
+  type NFTSalesSettingsFormValues,
+  nftCollectionInfoFormSchema,
+  nftSalesSettingsFormSchema,
+} from "./_common/form";
+import { nftCreationPages } from "./_common/pages";
+import { NFTCollectionInfoFieldset } from "./collection-info/nft-collection-info-fieldset";
+import { LaunchNFT } from "./launch/launch-nft";
+import { SalesSettings } from "./sales/sales-settings";
+import type {} from "./upload-nfts/batch-upload/process-files";
+import { type NFTData, UploadNFTsFieldset } from "./upload-nfts/upload-nfts";
+
+export function CreateNFTPageUI(props: {
+  accountAddress: string;
+  client: ThirdwebClient;
+  createNFTFunctions: CreateNFTCollectionFunctions;
+  onLaunchSuccess: () => void;
+  teamSlug: string;
+  projectSlug: string;
+}) {
+  const [step, setStep] =
+    useState<keyof typeof nftCreationPages>("collection-info");
+
+  const activeAccount = useActiveAccount();
+
+  const [nftData, setNFTData] = useState<NFTData>({
+    type: "single",
+    nft: null,
+  });
+
+  const nftSalesSettingsForm = useForm<NFTSalesSettingsFormValues>({
+    resolver: zodResolver(nftSalesSettingsFormSchema),
+    defaultValues: {
+      royaltyRecipient: activeAccount?.address || "",
+      primarySaleRecipient: activeAccount?.address || "",
+      royaltyBps: 0,
+    },
+  });
+
+  const nftCollectionInfoForm = useNFTCollectionInfoForm();
+
+  return (
+    <div>
+      {step === nftCreationPages["collection-info"] && (
+        <NFTCollectionInfoFieldset
+          onChainUpdated={() => {
+            // reset price currency to native token when chain is updated
+            if (nftData.type === "single" && nftData.nft) {
+              setNFTData({
+                type: "single",
+                nft: {
+                  ...nftData.nft,
+                  price_currency: getAddress(NATIVE_TOKEN_ADDRESS),
+                },
+              });
+            }
+
+            if (nftData.type === "multiple" && nftData.nfts?.type === "data") {
+              setNFTData({
+                type: "multiple",
+                nfts: {
+                  type: "data",
+                  data: nftData.nfts.data.map((x) => {
+                    return {
+                      ...x,
+                      price_currency: getAddress(NATIVE_TOKEN_ADDRESS),
+                    };
+                  }),
+                },
+              });
+            }
+          }}
+          client={props.client}
+          form={nftCollectionInfoForm}
+          onNext={() => {
+            setStep(nftCreationPages["upload-assets"]);
+          }}
+        />
+      )}
+
+      {step === nftCreationPages["upload-assets"] && (
+        <UploadNFTsFieldset
+          nftData={nftData}
+          setNFTData={setNFTData}
+          onNext={() => {
+            setStep(nftCreationPages["sales-settings"]);
+          }}
+          onPrev={() => {
+            setStep(nftCreationPages["collection-info"]);
+          }}
+          client={props.client}
+          chainId={Number(nftCollectionInfoForm.watch("chain"))}
+        />
+      )}
+
+      {step === nftCreationPages["sales-settings"] && (
+        <SalesSettings
+          form={nftSalesSettingsForm}
+          client={props.client}
+          onNext={() => {
+            setStep(nftCreationPages["launch-nft"]);
+          }}
+          onPrev={() => {
+            setStep(nftCreationPages["upload-assets"]);
+          }}
+        />
+      )}
+
+      {step === nftCreationPages["launch-nft"] && (
+        <LaunchNFT
+          values={{
+            collectionInfo: nftCollectionInfoForm.watch(),
+            sales: nftSalesSettingsForm.watch(),
+            nfts:
+              nftData.type === "multiple"
+                ? nftData.nfts?.type === "data"
+                  ? nftData.nfts.data
+                  : []
+                : nftData.nft
+                  ? [nftData.nft]
+                  : [],
+          }}
+          onPrevious={() => {
+            setStep(nftCreationPages["sales-settings"]);
+          }}
+          projectSlug={props.projectSlug}
+          client={props.client}
+          onLaunchSuccess={props.onLaunchSuccess}
+          teamSlug={props.teamSlug}
+          createNFTFunctions={props.createNFTFunctions}
+        />
+      )}
+    </div>
+  );
+}
+
+function useNFTCollectionInfoForm() {
+  return useForm<NFTCollectionInfoFormValues>({
+    resolver: zodResolver(nftCollectionInfoFormSchema),
+    values: {
+      name: "",
+      description: "",
+      symbol: "",
+      image: undefined,
+      chain: "1",
+      socialUrls: [
+        {
+          platform: "Website",
+          url: "",
+        },
+        {
+          platform: "Twitter",
+          url: "",
+        },
+      ],
+    },
+    reValidateMode: "onChange",
+  });
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/create-nft-page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/create-nft-page.tsx
new file mode 100644
index 00000000000..6304fe181f7
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/create-nft-page.tsx
@@ -0,0 +1,503 @@
+"use client";
+import { revalidatePathAction } from "@/actions/revalidate";
+import { useTrack } from "hooks/analytics/useTrack";
+import { useRef } from "react";
+import {
+  type ThirdwebClient,
+  defineChain,
+  encode,
+  getContract,
+  sendAndConfirmTransaction,
+} from "thirdweb";
+import { deployERC721Contract, deployERC1155Contract } from "thirdweb/deploys";
+import { multicall } from "thirdweb/extensions/common";
+import {
+  lazyMint as lazyMint721,
+  setClaimConditions as setClaimConditions721,
+} from "thirdweb/extensions/erc721";
+import {
+  getNFTs as getNFTs1155,
+  lazyMint as lazyMint1155,
+  setClaimConditions as setClaimConditions1155,
+} from "thirdweb/extensions/erc1155";
+import { useActiveAccount } from "thirdweb/react";
+import { maxUint256 } from "thirdweb/utils";
+import { parseError } from "utils/errorParser";
+import { useAddContractToProject } from "../../../hooks/project-contracts";
+import type { CreateNFTCollectionAllValues } from "./_common/form";
+import {
+  getNFTDeploymentTrackingData,
+  getNFTStepTrackingData,
+} from "./_common/tracking";
+import { CreateNFTPageUI } from "./create-nft-page-ui";
+
+export function CreateNFTPage(props: {
+  accountAddress: string;
+  client: ThirdwebClient;
+  teamSlug: string;
+  projectSlug: string;
+  teamId: string;
+  projectId: string;
+}) {
+  const activeAccount = useActiveAccount();
+  const trackEvent = useTrack();
+  const addContractToProject = useAddContractToProject();
+  const contractAddressRef = useRef<string | undefined>(undefined);
+
+  function getContractAndAccount(params: {
+    chain: string;
+  }) {
+    if (!activeAccount) {
+      throw new Error("Wallet is not connected");
+    }
+
+    // eslint-disable-next-line no-restricted-syntax
+    const chain = defineChain(Number(params.chain));
+
+    const contractAddress = contractAddressRef.current;
+
+    if (!contractAddress) {
+      throw new Error("Contract not found");
+    }
+
+    const contract = getContract({
+      address: contractAddress,
+      chain,
+      client: props.client,
+    });
+
+    return {
+      activeAccount,
+      contract,
+    };
+  }
+
+  async function handleContractDeploy(params: {
+    values: CreateNFTCollectionAllValues;
+    ercType: "erc721" | "erc1155";
+  }) {
+    const { values: formValues, ercType } = params;
+    const { collectionInfo, sales } = formValues;
+
+    if (!activeAccount) {
+      throw new Error("Wallet is not connected");
+    }
+
+    // eslint-disable-next-line no-restricted-syntax
+    const chain = defineChain(Number(collectionInfo.chain));
+
+    trackEvent(
+      getNFTStepTrackingData({
+        action: "deploy",
+        ercType,
+        chainId: Number(collectionInfo.chain),
+        status: "attempt",
+      }),
+    );
+
+    trackEvent(
+      getNFTDeploymentTrackingData({
+        ercType,
+        type: "attempt",
+        chainId: Number(collectionInfo.chain),
+      }),
+    );
+
+    try {
+      let contractAddress: string;
+
+      if (ercType === "erc721") {
+        contractAddress = await deployERC721Contract({
+          account: activeAccount,
+          client: props.client,
+          chain: chain,
+          type: "DropERC721",
+          params: {
+            name: collectionInfo.name,
+            symbol: collectionInfo.symbol,
+            description: collectionInfo.description,
+            image: collectionInfo.image,
+            social_urls: transformSocialUrls(collectionInfo.socialUrls),
+            saleRecipient: sales.primarySaleRecipient,
+            royaltyRecipient: sales.royaltyRecipient,
+            royaltyBps: BigInt(sales.royaltyBps),
+          },
+        });
+      } else {
+        contractAddress = await deployERC1155Contract({
+          account: activeAccount,
+          client: props.client,
+          chain: chain,
+          type: "DropERC1155",
+          params: {
+            name: collectionInfo.name,
+            symbol: collectionInfo.symbol,
+            description: collectionInfo.description,
+            image: collectionInfo.image,
+            social_urls: transformSocialUrls(collectionInfo.socialUrls),
+            saleRecipient: sales.primarySaleRecipient,
+            royaltyRecipient: sales.royaltyRecipient,
+            royaltyBps: BigInt(sales.royaltyBps),
+          },
+        });
+      }
+
+      trackEvent(
+        getNFTStepTrackingData({
+          action: "deploy",
+          ercType,
+          chainId: Number(collectionInfo.chain),
+          status: "success",
+        }),
+      );
+
+      trackEvent(
+        getNFTDeploymentTrackingData({
+          ercType,
+          type: "success",
+          chainId: Number(collectionInfo.chain),
+        }),
+      );
+
+      contractAddressRef.current = contractAddress;
+
+      // add contract to project in background
+      addContractToProject.mutateAsync({
+        teamId: props.teamId,
+        projectId: props.projectId,
+        contractAddress: contractAddress,
+        chainId: collectionInfo.chain,
+        deploymentType: "asset",
+        contractType: ercType === "erc721" ? "DropERC721" : "DropERC1155",
+      });
+
+      return {
+        contractAddress,
+      };
+    } catch (error) {
+      const parsedError = parseError(error);
+      const errorMessage =
+        typeof parsedError === "string" ? parsedError : "Unknown error";
+      trackEvent(
+        getNFTStepTrackingData({
+          action: "deploy",
+          ercType,
+          chainId: Number(collectionInfo.chain),
+          status: "error",
+          errorMessage,
+        }),
+      );
+
+      trackEvent(
+        getNFTDeploymentTrackingData({
+          ercType,
+          type: "error",
+          chainId: Number(collectionInfo.chain),
+          errorMessage,
+        }),
+      );
+
+      throw error;
+    }
+  }
+
+  async function handleLazyMintNFTs(params: {
+    formValues: CreateNFTCollectionAllValues;
+    ercType: "erc721" | "erc1155";
+  }) {
+    const { formValues, ercType } = params;
+
+    const { contract, activeAccount } = getContractAndAccount({
+      chain: formValues.collectionInfo.chain,
+    });
+
+    const lazyMintFn = ercType === "erc721" ? lazyMint721 : lazyMint1155;
+
+    const transaction = lazyMintFn({
+      contract,
+      nfts: formValues.nfts,
+    });
+
+    trackEvent(
+      getNFTStepTrackingData({
+        action: "lazy-mint",
+        ercType,
+        chainId: Number(formValues.collectionInfo.chain),
+        status: "attempt",
+      }),
+    );
+
+    try {
+      await sendAndConfirmTransaction({
+        account: activeAccount,
+        transaction,
+      });
+
+      trackEvent(
+        getNFTStepTrackingData({
+          action: "lazy-mint",
+          ercType,
+          chainId: Number(formValues.collectionInfo.chain),
+          status: "success",
+        }),
+      );
+    } catch (error) {
+      const parsedError = parseError(error);
+      const errorMessage =
+        typeof parsedError === "string" ? parsedError : "Unknown error";
+
+      trackEvent(
+        getNFTStepTrackingData({
+          action: "lazy-mint",
+          ercType,
+          chainId: Number(formValues.collectionInfo.chain),
+          status: "error",
+          errorMessage,
+        }),
+      );
+
+      throw error;
+    }
+  }
+
+  async function handleSetClaimConditionsERC721(params: {
+    formValues: CreateNFTCollectionAllValues;
+  }) {
+    const { formValues } = params;
+    const { contract, activeAccount } = getContractAndAccount({
+      chain: formValues.collectionInfo.chain,
+    });
+
+    const firstNFT = formValues.nfts[0];
+    if (!firstNFT) {
+      throw new Error("No NFTs found");
+    }
+
+    const transaction = setClaimConditions721({
+      contract,
+      phases: [
+        {
+          startTime: new Date(),
+          currencyAddress: firstNFT.price_currency,
+          maxClaimablePerWallet: maxUint256, // unlimited
+          price: firstNFT.price_amount,
+          maxClaimableSupply: maxUint256, // unlimited
+          metadata: {
+            name: "Public phase",
+          },
+        },
+      ],
+    });
+
+    trackEvent(
+      getNFTStepTrackingData({
+        action: "claim-conditions",
+        ercType: "erc721",
+        chainId: Number(formValues.collectionInfo.chain),
+        status: "attempt",
+      }),
+    );
+
+    try {
+      await sendAndConfirmTransaction({
+        account: activeAccount,
+        transaction,
+      });
+
+      trackEvent(
+        getNFTStepTrackingData({
+          action: "claim-conditions",
+          ercType: "erc721",
+          chainId: Number(formValues.collectionInfo.chain),
+          status: "success",
+        }),
+      );
+    } catch (error) {
+      const parsedError = parseError(error);
+      const errorMessage =
+        typeof parsedError === "string" ? parsedError : "Unknown error";
+
+      trackEvent(
+        getNFTStepTrackingData({
+          action: "claim-conditions",
+          ercType: "erc721",
+          chainId: Number(formValues.collectionInfo.chain),
+          status: "error",
+          errorMessage,
+        }),
+      );
+
+      throw error;
+    }
+  }
+
+  async function handleSetClaimConditionsERC1155(params: {
+    values: CreateNFTCollectionAllValues;
+    batch: {
+      startIndex: number;
+      count: number;
+    };
+  }) {
+    const { values, batch } = params;
+    const { contract, activeAccount } = getContractAndAccount({
+      chain: values.collectionInfo.chain,
+    });
+
+    const endIndexExclusive = batch.startIndex + batch.count;
+    const nfts = values.nfts.slice(batch.startIndex, endIndexExclusive);
+
+    // fetch nfts
+    const fetchedNFTs = await getNFTs1155({
+      contract,
+      start: batch.startIndex,
+      count: batch.count,
+    });
+
+    const transactions = nfts.map((uploadedNFT, i) => {
+      const fetchedNFT = fetchedNFTs[i];
+
+      if (!fetchedNFT) {
+        throw new Error("Failed to find NFT");
+      }
+
+      if (fetchedNFT.metadata.name !== uploadedNFT.name) {
+        throw new Error("Failed to find NFT in batch");
+      }
+
+      return setClaimConditions1155({
+        contract,
+        tokenId: fetchedNFT.id,
+        phases: [
+          {
+            startTime: new Date(),
+            currencyAddress: uploadedNFT.price_currency,
+            maxClaimablePerWallet: maxUint256, // unlimited
+            price: uploadedNFT.price_amount,
+            maxClaimableSupply: BigInt(uploadedNFT.supply),
+            metadata: {
+              name: "Public phase",
+            },
+          },
+        ],
+      });
+    });
+
+    const encodedTransactions = await Promise.all(
+      transactions.map((tx) => encode(tx)),
+    );
+
+    const tx = multicall({
+      contract: contract,
+      data: encodedTransactions,
+    });
+
+    trackEvent(
+      getNFTStepTrackingData({
+        action: "claim-conditions",
+        ercType: "erc1155",
+        chainId: Number(values.collectionInfo.chain),
+        status: "attempt",
+      }),
+    );
+
+    try {
+      await sendAndConfirmTransaction({
+        transaction: tx,
+        account: activeAccount,
+      });
+
+      trackEvent(
+        getNFTStepTrackingData({
+          action: "claim-conditions",
+          ercType: "erc1155",
+          chainId: Number(values.collectionInfo.chain),
+          status: "success",
+        }),
+      );
+    } catch (error) {
+      const parsedError = parseError(error);
+      const errorMessage =
+        typeof parsedError === "string" ? parsedError : "Unknown error";
+
+      trackEvent(
+        getNFTStepTrackingData({
+          action: "claim-conditions",
+          ercType: "erc1155",
+          chainId: Number(values.collectionInfo.chain),
+          status: "error",
+          errorMessage,
+        }),
+      );
+
+      throw error;
+    }
+  }
+
+  return (
+    <CreateNFTPageUI
+      {...props}
+      onLaunchSuccess={() => {
+        revalidatePathAction(
+          `/team/${props.teamSlug}/project/${props.projectSlug}/assets`,
+          "page",
+        );
+      }}
+      createNFTFunctions={{
+        erc1155: {
+          lazyMintNFTs: (formValues) => {
+            return handleLazyMintNFTs({
+              formValues,
+              ercType: "erc1155",
+            });
+          },
+          deployContract: (formValues) => {
+            return handleContractDeploy({
+              values: formValues,
+              ercType: "erc1155",
+            });
+          },
+          setClaimConditions: async (params) => {
+            return handleSetClaimConditionsERC1155(params);
+          },
+        },
+        erc721: {
+          deployContract: (formValues) => {
+            return handleContractDeploy({
+              values: formValues,
+              ercType: "erc721",
+            });
+          },
+          lazyMintNFTs: (formValues) => {
+            return handleLazyMintNFTs({
+              formValues,
+              ercType: "erc721",
+            });
+          },
+
+          setClaimConditions: async (formValues) => {
+            return handleSetClaimConditionsERC721({
+              formValues,
+            });
+          },
+        },
+      }}
+    />
+  );
+}
+
+function transformSocialUrls(
+  socialUrls: {
+    platform: string;
+    url: string;
+  }[],
+): Record<string, string> {
+  return socialUrls.reduce(
+    (acc, url) => {
+      if (url.url && url.platform) {
+        acc[url.platform] = url.url;
+      }
+      return acc;
+    },
+    {} as Record<string, string>,
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch/launch-nft.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch/launch-nft.tsx
new file mode 100644
index 00000000000..4f6ed453f4f
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch/launch-nft.tsx
@@ -0,0 +1,509 @@
+"use client";
+
+import { MultiStepStatus } from "@/components/blocks/multi-step-status/multi-step-status";
+import type { MultiStepState } from "@/components/blocks/multi-step-status/multi-step-status";
+import { WalletAddress } from "@/components/blocks/wallet-address";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Skeleton } from "@/components/ui/skeleton";
+import { TransactionButton } from "components/buttons/TransactionButton";
+import { useTrack } from "hooks/analytics/useTrack";
+import {
+  ArrowRightIcon,
+  ArrowUpFromLineIcon,
+  ImageOffIcon,
+} from "lucide-react";
+import Link from "next/link";
+import { useMemo, useRef, useState } from "react";
+import { type ThirdwebClient, defineChain } from "thirdweb";
+import { TokenProvider, TokenSymbol, useActiveWallet } from "thirdweb/react";
+import { parseError } from "utils/errorParser";
+import { ChainOverview } from "../../_common/chain-overview";
+import { FilePreview } from "../../_common/file-preview";
+import { StepCard } from "../../_common/step-card";
+import type {
+  CreateNFTCollectionAllValues,
+  CreateNFTCollectionFunctions,
+} from "../_common/form";
+import { getNFTLaunchTrackingData } from "../_common/tracking";
+
+const stepIds = {
+  "deploy-contract": "deploy-contract",
+  "set-claim-conditions": "set-claim-conditions",
+  "mint-nfts": "mint-nfts",
+} as const;
+
+type StepId = keyof typeof stepIds;
+
+export function LaunchNFT(props: {
+  createNFTFunctions: CreateNFTCollectionFunctions;
+  values: CreateNFTCollectionAllValues;
+  onPrevious: () => void;
+  client: ThirdwebClient;
+  onLaunchSuccess: () => void;
+  teamSlug: string;
+  projectSlug: string;
+}) {
+  const formValues = props.values;
+  const [steps, setSteps] = useState<MultiStepState<StepId>[]>([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const activeWallet = useActiveWallet();
+  const walletRequiresApproval = activeWallet?.id !== "inApp";
+  const [contractLink, setContractLink] = useState<string | null>(null);
+  const trackEvent = useTrack();
+
+  function updateStatus(
+    index: number,
+    newStatus: MultiStepState<StepId>["status"],
+  ) {
+    setSteps((prev) => {
+      return [
+        ...prev.slice(0, index),
+        { ...prev[index], status: newStatus },
+        ...prev.slice(index + 1),
+      ] as MultiStepState<StepId>[];
+    });
+  }
+
+  function updateDescription(index: number, description: string) {
+    setSteps((prev) => {
+      return [
+        ...prev.slice(0, index),
+        { ...prev[index], description },
+        ...prev.slice(index + 1),
+      ] as MultiStepState<StepId>[];
+    });
+  }
+
+  function launchTracking(
+    params:
+      | {
+          type: "attempt" | "success";
+        }
+      | {
+          type: "error";
+          errorMessage: string;
+        },
+  ) {
+    trackEvent(
+      getNFTLaunchTrackingData({
+        chainId: Number(formValues.collectionInfo.chain),
+        ercType: ercType,
+        ...params,
+      }),
+    );
+  }
+
+  async function handleSubmitClick() {
+    launchTracking({
+      type: "attempt",
+    });
+
+    const initialSteps: MultiStepState<StepId>[] = [
+      {
+        label: "Deploy contract",
+        id: stepIds["deploy-contract"],
+        status: { type: "idle" },
+      },
+      {
+        label: formValues.nfts.length > 1 ? "Mint NFTs" : "Mint NFT",
+        id: stepIds["mint-nfts"],
+        status: { type: "idle" },
+      },
+      {
+        label:
+          formValues.nfts.length > 1
+            ? "Set claim conditions"
+            : "Set claim condition",
+        id: stepIds["set-claim-conditions"],
+        status: { type: "idle" },
+      },
+    ];
+
+    setSteps(initialSteps);
+    setIsModalOpen(true);
+    executeSteps(initialSteps, 0);
+  }
+
+  const batchesProcessedRef = useRef(0);
+  const batchSize = 50;
+  const batchCount =
+    formValues.nfts.length > batchSize
+      ? Math.ceil(formValues.nfts.length / batchSize)
+      : 1;
+
+  const ercType: "erc721" | "erc1155" = useMemo(() => {
+    // if all prices (amount + currency) are same and all supply is to 1
+    const shouldDeployERC721 = formValues.nfts.every((nft) => {
+      return (
+        nft.supply === "1" &&
+        formValues.nfts[0] &&
+        nft.price_amount === formValues.nfts[0].price_amount &&
+        nft.price_currency === formValues.nfts[0].price_currency
+      );
+    });
+
+    return shouldDeployERC721 ? "erc721" : "erc1155";
+  }, [formValues.nfts]);
+
+  async function executeStep(steps: MultiStepState<StepId>[], stepId: StepId) {
+    if (stepId === "deploy-contract") {
+      const result =
+        await props.createNFTFunctions[ercType].deployContract(formValues);
+      setContractLink(
+        `/team/${props.teamSlug}/${props.projectSlug}/contract/${formValues.collectionInfo.chain}/${result.contractAddress}`,
+      );
+    } else if (stepId === "set-claim-conditions") {
+      if (ercType === "erc721") {
+        await props.createNFTFunctions.erc721.setClaimConditions(formValues);
+      } else {
+        if (batchCount > 1) {
+          const batchStartIndex = batchesProcessedRef.current;
+          for (
+            let batchIndex = batchStartIndex;
+            batchIndex < batchCount;
+            batchIndex++
+          ) {
+            const index = steps.findIndex(
+              (s) => s.id === stepIds["set-claim-conditions"],
+            );
+
+            if (index !== -1) {
+              updateDescription(
+                index,
+                `Processing batch ${batchIndex + 1} of ${batchCount}`,
+              );
+            }
+
+            await props.createNFTFunctions.erc1155.setClaimConditions({
+              values: formValues,
+              batch: {
+                startIndex: batchIndex * batchSize,
+                count: batchSize,
+              },
+            });
+
+            batchesProcessedRef.current += 1;
+          }
+        } else {
+          await props.createNFTFunctions.erc1155.setClaimConditions({
+            values: formValues,
+            batch: {
+              startIndex: 0,
+              count: formValues.nfts.length,
+            },
+          });
+        }
+      }
+    } else if (stepId === "mint-nfts") {
+      await props.createNFTFunctions[ercType].lazyMintNFTs(formValues);
+    }
+  }
+
+  async function executeSteps(
+    steps: MultiStepState<StepId>[],
+    startIndex: number,
+  ) {
+    for (let i = startIndex; i < steps.length; i++) {
+      const currentStep = steps[i];
+      if (!currentStep) {
+        return;
+      }
+
+      try {
+        updateStatus(i, {
+          type: "pending",
+        });
+
+        await executeStep(steps, currentStep.id);
+
+        updateStatus(i, {
+          type: "completed",
+        });
+      } catch (error) {
+        const parsedError = parseError(error);
+
+        updateStatus(i, {
+          type: "error",
+          message: parsedError,
+        });
+
+        launchTracking({
+          type: "error",
+          errorMessage:
+            typeof parsedError === "string" ? parsedError : "Unknown error",
+        });
+
+        throw error;
+      }
+    }
+
+    launchTracking({
+      type: "success",
+    });
+    props.onLaunchSuccess();
+    batchesProcessedRef.current = 0;
+  }
+
+  async function handleRetry(step: MultiStepState<StepId>) {
+    const startIndex = steps.findIndex((s) => s.id === step.id);
+    if (startIndex === -1) {
+      return;
+    }
+
+    try {
+      await executeSteps(steps, startIndex);
+    } catch {
+      // no op
+    }
+  }
+
+  const isComplete = steps.every((step) => step.status.type === "completed");
+  const isPending = steps.some((step) => step.status.type === "pending");
+
+  const isPriceSame = props.values.nfts.every(
+    (nft) => nft.price_amount === props.values.nfts[0]?.price_amount,
+  );
+
+  const uniqueAttributes = useMemo(() => {
+    const attributeNames = new Set<string>();
+    for (const nft of props.values.nfts) {
+      if (nft.attributes) {
+        for (const attribute of nft.attributes) {
+          if (attribute.trait_type && attribute.value) {
+            attributeNames.add(attribute.trait_type);
+          }
+        }
+      }
+    }
+    return Array.from(attributeNames);
+  }, [props.values.nfts]);
+
+  return (
+    <StepCard
+      tracking={{
+        page: "launch",
+        contractType: "NFTCollection",
+      }}
+      title="Launch NFT"
+      prevButton={{
+        onClick: props.onPrevious,
+      }}
+      nextButton={{
+        type: "custom",
+        custom: (
+          <TransactionButton
+            client={props.client}
+            variant="default"
+            txChainID={Number(formValues.collectionInfo.chain)}
+            isLoggedIn={true}
+            isPending={false}
+            transactionCount={undefined}
+            onClick={handleSubmitClick}
+          >
+            <ArrowUpFromLineIcon className="size-4" />
+            Launch NFT
+          </TransactionButton>
+        ),
+      }}
+    >
+      <Dialog
+        open={isModalOpen}
+        // do not set onOpenChange
+      >
+        <DialogContent
+          className="gap-0 overflow-hidden p-0 md:max-w-[480px]"
+          dialogCloseClassName="hidden"
+        >
+          <div className="flex flex-col gap-6 p-6">
+            <DialogHeader>
+              <DialogTitle className="font-semibold text-xl tracking-tight">
+                Status
+              </DialogTitle>
+              {walletRequiresApproval && (
+                <DialogDescription>
+                  Each step will prompt a signature request in your wallet
+                </DialogDescription>
+              )}
+            </DialogHeader>
+
+            <MultiStepStatus steps={steps} onRetry={handleRetry} />
+          </div>
+
+          <div className="mt-2 flex justify-between gap-4 border-border border-t bg-card p-6">
+            {isComplete && contractLink ? (
+              <div>
+                <Button asChild className="gap-2">
+                  <Link href={contractLink}>
+                    View NFT <ArrowRightIcon className="size-4" />
+                  </Link>
+                </Button>
+              </div>
+            ) : (
+              <div />
+            )}
+
+            <Button
+              variant="outline"
+              disabled={isPending}
+              onClick={() => {
+                setIsModalOpen(false);
+                // reset steps
+                setSteps([]);
+              }}
+            >
+              {isComplete ? "Close" : "Cancel"}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Token info */}
+      <div className="border-b border-dashed px-4 py-6 pb-6 md:px-6 ">
+        <h2 className="mb-3 font-semibold text-base">Collection Info</h2>
+
+        <div className="flex flex-col gap-6 lg:flex-row">
+          <OverviewField name="Image" className="shrink-0">
+            <FilePreview
+              client={props.client}
+              srcOrFile={formValues.collectionInfo.image}
+              className="size-24 rounded-lg border object-cover"
+              fallback={
+                <div className="flex items-center justify-center bg-muted/50">
+                  <ImageOffIcon className="size-5 text-muted-foreground" />
+                </div>
+              }
+            />
+          </OverviewField>
+
+          <div className="flex grow flex-col gap-4">
+            <div className="flex flex-col gap-4 lg:flex-row lg:gap-6 lg:border-b lg:border-dashed lg:pb-4 lg:[&>*:not(:first-child)]:border-l lg:[&>*:not(:first-child)]:border-dashed lg:[&>*:not(:first-child)]:pl-5">
+              <OverviewField name="Name">
+                <OverviewFieldValue value={formValues.collectionInfo.name} />
+              </OverviewField>
+
+              {formValues.collectionInfo.symbol && (
+                <OverviewField name="Symbol">
+                  <OverviewFieldValue
+                    value={formValues.collectionInfo.symbol}
+                  />
+                </OverviewField>
+              )}
+
+              <OverviewField name="Chain">
+                <ChainOverview
+                  client={props.client}
+                  chainId={formValues.collectionInfo.chain}
+                />
+              </OverviewField>
+            </div>
+
+            <OverviewField name="Description">
+              <OverviewFieldValue
+                value={
+                  formValues.collectionInfo.description || "No Description"
+                }
+              />
+            </OverviewField>
+          </div>
+        </div>
+      </div>
+
+      <div className="border-b border-dashed px-4 py-6 pb-6 md:px-6">
+        <h2 className="font-semibold text-base">NFTs</h2>
+        <div className="mt-3 flex flex-col gap-4 lg:flex-row lg:gap-4 lg:[&>*:not(:first-child)]:border-l lg:[&>*:not(:first-child)]:border-dashed lg:[&>*:not(:first-child)]:pl-5">
+          <OverviewField name="Total NFTs">
+            <OverviewFieldValue value={formValues.nfts.length.toString()} />
+          </OverviewField>
+
+          {isPriceSame && formValues.nfts[0] && (
+            <OverviewField name="Price">
+              <p className="flex items-center gap-1 text-foreground text-sm">
+                {formValues.nfts[0].price_amount}{" "}
+                <TokenProvider
+                  client={props.client}
+                  address={formValues.nfts[0].price_currency}
+                  // eslint-disable-next-line no-restricted-syntax
+                  chain={defineChain(Number(formValues.collectionInfo.chain))}
+                >
+                  <TokenSymbol
+                    loadingComponent={<Skeleton className="size-5 w-20" />}
+                  />
+                </TokenProvider>
+              </p>
+            </OverviewField>
+          )}
+
+          {uniqueAttributes.length > 0 && (
+            <OverviewField name="Attributes">
+              <div className="flex flex-wrap gap-1">
+                {uniqueAttributes.map((attr) => {
+                  return (
+                    <Badge variant="secondary" key={attr}>
+                      {attr}
+                    </Badge>
+                  );
+                })}
+              </div>
+            </OverviewField>
+          )}
+        </div>
+      </div>
+
+      <div className="px-4 py-6 pb-6 md:px-6">
+        <h2 className="font-semibold text-base">Sales and Fees</h2>
+        <div className="mt-3 flex flex-col gap-4 lg:flex-row lg:gap-4 lg:[&>*:not(:first-child)]:border-l lg:[&>*:not(:first-child)]:border-dashed lg:[&>*:not(:first-child)]:pl-5">
+          <OverviewField name="Primary Sales Recipient">
+            <WalletAddress
+              address={formValues.sales.primarySaleRecipient}
+              client={props.client}
+              className="h-auto py-1"
+              iconClassName="size-3.5"
+            />
+          </OverviewField>
+
+          <OverviewField name="Royalties Recipient">
+            <WalletAddress
+              address={formValues.sales.royaltyRecipient}
+              client={props.client}
+              iconClassName="size-3.5"
+              className="h-auto py-1"
+            />
+          </OverviewField>
+
+          <OverviewField name="Royalties">
+            <p className="flex items-center gap-1 text-foreground text-sm">
+              {Number(formValues.sales.royaltyBps) / 100}%
+            </p>
+          </OverviewField>
+        </div>
+      </div>
+    </StepCard>
+  );
+}
+
+function OverviewField(props: {
+  name: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={props.className}>
+      <p className="mb-1 text-muted-foreground text-sm">{props.name}</p>
+      {props.children}
+    </div>
+  );
+}
+
+function OverviewFieldValue(props: {
+  value: string;
+}) {
+  return <p className="text-foreground text-sm">{props.value}</p>;
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/page.tsx
new file mode 100644
index 00000000000..62f830b7f6c
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/page.tsx
@@ -0,0 +1,66 @@
+import { getProject } from "@/api/projects";
+import { getTeamBySlug } from "@/api/team";
+
+import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import {
+  getAuthToken,
+  getAuthTokenWalletAddress,
+} from "@app/api/lib/getAuthToken";
+import { loginRedirect } from "@app/login/loginRedirect";
+import { redirect } from "next/navigation";
+import { CreateAssetPageHeader } from "../_common/PageHeader";
+import { CreateNFTPage } from "./create-nft-page";
+
+export default async function Page(props: {
+  params: Promise<{ team_slug: string; project_slug: string }>;
+}) {
+  const params = await props.params;
+
+  const [authToken, team, project, accountAddress] = await Promise.all([
+    getAuthToken(),
+    getTeamBySlug(params.team_slug),
+    getProject(params.team_slug, params.project_slug),
+    getAuthTokenWalletAddress(),
+  ]);
+
+  if (!authToken || !accountAddress) {
+    loginRedirect(
+      `/team/${params.team_slug}/${params.project_slug}/assets/create/nft`,
+    );
+  }
+
+  if (!team) {
+    redirect("/team");
+  }
+
+  if (!project) {
+    redirect(`/team/${params.team_slug}`);
+  }
+
+  const client = getClientThirdwebClient({
+    jwt: authToken,
+    teamId: team.id,
+  });
+
+  return (
+    <div className="flex grow flex-col">
+      <CreateAssetPageHeader
+        title="Create NFT Collection"
+        description="Launch an NFT collection for your project"
+        teamSlug={params.team_slug}
+        projectSlug={params.project_slug}
+        containerClassName="container max-w-5xl"
+      />
+      <div className="container max-w-5xl pt-8 pb-32">
+        <CreateNFTPage
+          accountAddress={accountAddress}
+          client={client}
+          teamSlug={params.team_slug}
+          projectSlug={params.project_slug}
+          teamId={team.id}
+          projectId={project.id}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/sales/sales-settings.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/sales/sales-settings.tsx
new file mode 100644
index 00000000000..8c2066e7eb7
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/sales/sales-settings.tsx
@@ -0,0 +1,111 @@
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
+import { Form } from "@/components/ui/form";
+import { BasisPointsInput } from "components/inputs/BasisPointsInput";
+import type { UseFormReturn } from "react-hook-form";
+import type { ThirdwebClient } from "thirdweb";
+import { SolidityInput } from "../../../../../../../../../../contract-ui/components/solidity-inputs";
+import { StepCard } from "../../_common/step-card";
+import type { NFTSalesSettingsFormValues } from "../_common/form";
+import { nftCreationPages } from "../_common/pages";
+
+export function SalesSettings(props: {
+  onNext: () => void;
+  onPrev: () => void;
+  form: UseFormReturn<NFTSalesSettingsFormValues>;
+  client: ThirdwebClient;
+}) {
+  const errors = props.form.formState.errors;
+  const bpsNumValue = props.form.watch("royaltyBps");
+
+  return (
+    <Form {...props.form}>
+      <form
+        onSubmit={props.form.handleSubmit(() => {
+          props.onNext();
+        })}
+      >
+        <StepCard
+          tracking={{
+            page: nftCreationPages["sales-settings"],
+            contractType: "NFTCollection",
+          }}
+          title="Sales and Fees"
+          prevButton={{
+            onClick: props.onPrev,
+          }}
+          nextButton={{
+            type: "submit",
+          }}
+        >
+          <div className="px-4 py-6 md:px-6">
+            <div className="mb-4 space-y-1">
+              <h3 className="font-semibold text-base"> Primary Sales</h3>
+              <p className="text-muted-foreground text-sm">
+                Set the wallet address that should receive the revenue from
+                initial sales of the assets
+              </p>
+            </div>
+            <FormFieldSetup
+              className="grow"
+              isRequired
+              label="Primary Sales Recipient"
+              errorMessage={errors.primarySaleRecipient?.message}
+            >
+              <SolidityInput
+                solidityType="address"
+                className="bg-background"
+                {...props.form.register("primarySaleRecipient")}
+                client={props.client}
+              />
+            </FormFieldSetup>
+          </div>
+
+          <div className="border-t border-dashed px-4 py-6 md:px-6">
+            <div className="mb-4 space-y-1">
+              <h3 className="font-semibold text-base">Royalties</h3>
+              <p className="text-muted-foreground text-sm">
+                Set the wallet address should receive the revenue from royalties
+                earned from secondary sales of the assets
+              </p>
+            </div>
+            <div className="flex flex-col gap-4 md:flex-row">
+              <FormFieldSetup
+                className="grow"
+                isRequired
+                label="Recipient Address"
+                errorMessage={errors.royaltyRecipient?.message}
+                helperText={
+                  <>
+                    The wallet address that should receive the revenue from
+                    royalties earned from secondary sales of the assets.
+                  </>
+                }
+              >
+                <SolidityInput
+                  solidityType="address"
+                  className="bg-background"
+                  {...props.form.register("royaltyRecipient")}
+                  client={props.client}
+                />
+              </FormFieldSetup>
+
+              <FormFieldSetup
+                isRequired
+                label="Percentage"
+                className="shrink-0 md:max-w-[150px]"
+                errorMessage={errors.royaltyBps?.message}
+              >
+                <BasisPointsInput
+                  className="bg-background"
+                  value={bpsNumValue}
+                  onChange={(value) => props.form.setValue("royaltyBps", value)}
+                  defaultValue={0}
+                />
+              </FormFieldSetup>
+            </div>
+          </div>
+        </StepCard>
+      </form>
+    </Form>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/batch-upload/batch-upload-instructions.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/batch-upload/batch-upload-instructions.tsx
new file mode 100644
index 00000000000..83df8c496e2
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/batch-upload/batch-upload-instructions.tsx
@@ -0,0 +1,417 @@
+import { Button } from "@/components/ui/button";
+import { CodeClient } from "@/components/ui/code/code.client";
+import { InlineCode } from "@/components/ui/inline-code";
+import { TabButtons } from "@/components/ui/tabs";
+import { ArrowDownToLineIcon } from "lucide-react";
+import { useState } from "react";
+import { handleDownload } from "../../../_common/download-file-button";
+
+export function BatchUploadInstructions() {
+  const [tab, setTab] = useState<"csv" | "json">("csv");
+  return (
+    <div className="w-full">
+      <TabButtons
+        tabs={[
+          {
+            name: "CSV",
+            onClick: () => setTab("csv"),
+            isActive: tab === "csv",
+          },
+          {
+            name: "JSON",
+            onClick: () => setTab("json"),
+            isActive: tab === "json",
+          },
+        ]}
+      />
+
+      <div className="h-6" />
+
+      <div className="space-y-8">
+        <Section title="Uploading Files">
+          <p>
+            Make sure to drag and drop the {tab === "csv" ? "CSV" : "JSON"} and
+            the assets at the same time or upload a folder with all the files in
+            it.
+          </p>
+
+          <p>
+            Asset names <em>must</em> be sequential 0,1,2,3...n.[extension]. It
+            doesn&apos;t matter at what number you begin. Example: 131.png,
+            132.png etc.
+          </p>
+
+          <p>
+            Images and other file types can be used in combination. They both
+            have to follow the asset naming convention above. Example: 0.png and
+            0.mp4, 1.png and 1.glb etc.
+          </p>
+        </Section>
+
+        <Section title={`${tab === "csv" ? "CSV" : "JSON"} File Format`}>
+          <p>
+            The {tab === "csv" ? "CSV" : "JSON"} file must have a{" "}
+            <InlineCode code="name" /> {tab === "csv" ? "column" : "property"},
+            which defines the name of the NFT
+          </p>
+
+          <p>
+            Other optional {tab === "csv" ? "columns" : "properties"} are{" "}
+            <InlineCode code="description" />,{" "}
+            <InlineCode code="background_color" />,{" "}
+            <InlineCode code="external_url" />,{" "}
+            <InlineCode code="animation_url" />,{" "}
+            <InlineCode code="price_amount" />,{" "}
+            <InlineCode code="price_currency" />{" "}
+            {tab === "json" && (
+              <>
+                ,
+                <InlineCode code="attributes" />
+              </>
+            )}{" "}
+            and <InlineCode code="supply" />
+            {". "}
+            {tab === "csv" &&
+              "All other columns will be treated as Attributes. For example: See 'foo', 'bar' and 'bazz' below."}
+          </p>
+
+          <ExampleCode
+            code={tab === "csv" ? csv_example_basic : json_example_basic}
+            lang={tab === "csv" ? "csv" : "json"}
+            fileNameWithExtension={
+              tab === "csv" ? "example.csv" : "example.json"
+            }
+          />
+        </Section>
+
+        <Section title="Map your assets to NFTs">
+          <p>
+            If you want to map your media files to your NFTs, you can add the
+            name of your files to the <InlineCode code="image" /> and{" "}
+            <InlineCode code="animation_url" />{" "}
+            {tab === "csv" ? "columns" : "properties"}.{" "}
+            <ExampleCode
+              code={
+                tab === "csv"
+                  ? csv_with_image_number_example
+                  : json_with_image_number_example
+              }
+              lang={tab === "csv" ? "csv" : "json"}
+              fileNameWithExtension={
+                tab === "csv"
+                  ? "example-with-maps.csv"
+                  : "example-with-maps.json"
+              }
+            />
+          </p>
+        </Section>
+
+        <Section title="Using asset links instead of uploading assets">
+          <p>
+            When uploading files, assets will be uploaded and pinned to IPFS
+            automatically. If you already have the files uploaded elsewhere, you
+            can specify the IPFS or HTTP(s) links in the{" "}
+            <InlineCode code="image" /> and/or{" "}
+            <InlineCode code="animation_url" />{" "}
+            {tab === "csv" ? "columns" : "properties"}. instead of uploading the
+            assets and just upload a single {tab === "csv" ? "CSV" : "JSON"}{" "}
+            file.
+            <ExampleCode
+              code={
+                tab === "csv"
+                  ? csv_with_image_link_example
+                  : json_with_image_link_example
+              }
+              lang={tab === "csv" ? "csv" : "json"}
+              fileNameWithExtension={
+                tab === "csv"
+                  ? "example-with-ipfs.csv"
+                  : "example-with-ipfs.json"
+              }
+            />
+          </p>
+        </Section>
+
+        <Section title="Set price and supply">
+          <p>
+            You can also add <InlineCode code="price_amount" />,{" "}
+            <InlineCode code="price_currency" /> and{" "}
+            <InlineCode code="supply" />{" "}
+            {tab === "csv" ? "columns" : "properties"} to set the price and
+            supply of the NFT. If you don't specify it in{" "}
+            {tab === "csv" ? "CSV" : "JSON"} file, you will be prompted to set
+            it in the next step. To set the price in native token, leave the the{" "}
+            <InlineCode code="price_currency" />{" "}
+            {tab === "csv" ? "column" : "property"} empty. To set the price in
+            ERC20 token - specify the token address in the{" "}
+            <InlineCode code="price_currency" /> column.{" "}
+            <ExampleCode
+              code={
+                tab === "csv"
+                  ? csv_example_price_supply
+                  : json_example_price_supply
+              }
+              lang={tab === "csv" ? "csv" : "json"}
+              fileNameWithExtension={
+                tab === "csv"
+                  ? "example-with-price-supply.csv"
+                  : "example-with-price-supply.json"
+              }
+            />
+          </p>
+        </Section>
+      </div>
+    </div>
+  );
+}
+
+function Section(props: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section>
+      <h2 className="mb-1 font-medium text-base text-foreground">
+        {props.title}
+      </h2>
+      <div className="space-y-1.5 text-muted-foreground leading-relaxed">
+        {props.children}
+      </div>
+    </section>
+  );
+}
+
+const csv_example_basic = `\
+name,description,background_color,foo,bar,bazz
+Token 0 Name,Token 0 Description,#0098EE,value1,value2,value3
+Token 1 Name,Token 1 Description,#0098EE,value1,value2,value3
+`;
+
+const csv_example_price_supply = `\
+name,description,background_color,foo,bar,bazz,price_amount,price_currency,supply
+Token 0 Name,Token 0 Description,#0098EE,value1,value2,value3,0.1,,1
+Token 1 Name,Token 1 Description,#0098EE,value1,value2,value3,0.2,0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48,10
+`;
+
+const json_example_basic = `\
+[
+  {
+    "name": "Token 0 Name",
+    "description": "Token 0 Description",
+    "background_color": "#0098EE",
+    "attributes": [
+      {
+        "trait_type": "foo",
+        "value": "value1"
+      },
+      {
+        "trait_type": "bar",
+        "value": "value2"
+      },
+      {
+        "trait_type": "bazz",
+        "value": "value3"
+      }
+    ]
+  },
+  {
+    "name": "Token 1 Name",
+    "description": "Token 1 Description",
+    "background_color": "#0098EE",
+    "attributes": [
+      {
+        "trait_type": "foo",
+        "value": "value1"
+      },
+      {
+        "trait_type": "bar",
+        "value": "value2"
+      },
+      {
+        "trait_type": "bazz",
+        "value": "value3"
+      }
+    ]
+  }
+]
+`;
+
+const json_example_price_supply = `\
+[
+  {
+    "name": "Token 0 Name",
+    "description": "Token 0 Description",
+    "price_amount": 0.1,
+    "price_currency": "",
+    "supply": 1,
+    "attributes": [
+      {
+        "trait_type": "foo",
+        "value": "value1"
+      },
+      {
+        "trait_type": "bar",
+        "value": "value2"
+      },
+      {
+        "trait_type": "bazz",
+        "value": "value3"
+      }
+    ]
+  },
+  {
+    "name": "Token 1 Name",
+    "description": "Token 1 Description",
+    "price_amount": 0.2,
+    "price_currency": "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
+    "supply": 10,
+    "attributes": [
+      {
+        "trait_type": "foo",
+        "value": "value1"
+      },
+      {
+        "trait_type": "bar",
+        "value": "value2"
+      },
+      {
+        "trait_type": "bazz",
+        "value": "value3"
+      }
+    ]
+  }
+]
+`;
+
+const csv_with_image_link_example = `\
+name,description,image,animation_url,background_color,foo,bar,bazz
+Token 0 Name,Token 0 Description,ipfs://ipfsHash/0,ipfs://ipfsHash/0,#0098EE,value1,value2,value3
+Token 1 Name,Token 1 Description,ipfs://ipfsHash/0,ipfs://ipfsHash/0,#0098EE,value1,value2,value3
+`;
+
+const json_with_image_link_example = `\
+[
+  {
+    "name": "Token 0 Name",
+    "description": "Token 0 Description",
+    "image": "ipfs://ipfsHash/0",
+    "animation_url": "ipfs://ipfsHash/0",
+    "attributes": [
+      {
+        "trait_type": "foo",
+        "value": "value1"
+      },
+      {
+        "trait_type": "bar",
+        "value": "value2"
+      },
+      {
+        "trait_type": "bazz",
+        "value": "value3"
+      }
+    ]
+  },
+  {
+    "name": "Token 1 Name",
+    "description": "Token 1 Description",
+    "image": "ipfs://ipfsHash/0",
+    "animation_url": "ipfs://ipfsHash/0",
+    "attributes": [
+      {
+        "trait_type": "foo",
+        "value": "value1"
+      },
+      {
+        "trait_type": "bar",
+        "value": "value2"
+      },
+      {
+        "trait_type": "bazz",
+        "value": "value3"
+      }
+    ]
+  }
+]
+`;
+
+const csv_with_image_number_example = `\
+name,description,image,animation_url,background_color,foo,bar,bazz
+Token 0 Name,Token 0 Description,0.png,0.mp4,#0098EE,value1,value2,value3
+Token 1 Name,Token 1 Description,1.png,1.mp4,#0098EE,value1,value2,value3
+`;
+
+const json_with_image_number_example = `\
+[
+  {
+    "name": "Token 0 Name",
+    "description": "Token 0 Description",
+    "image": "0.png",
+    "animation_url": "0.mp4",
+    "attributes": [
+      {
+        "trait_type": "foo",
+        "value": "value1"
+      },
+      {
+        "trait_type": "bar",
+        "value": "value2"
+      },
+      {
+        "trait_type": "bazz",
+        "value": "value3"
+      }
+    ]
+  },
+  {
+    "name": "Token 1 Name",
+    "description": "Token 1 Description",
+    "image": "1.png",
+    "animation_url": "1.mp4",
+    "attributes": [
+      {
+        "trait_type": "foo",
+        "value": "value1"
+      },
+      {
+        "trait_type": "bar",
+        "value": "value2"
+      },
+      {
+        "trait_type": "bazz",
+        "value": "value3"
+      }
+    ]
+  }
+]
+`;
+
+function ExampleCode(props: {
+  code: string;
+  lang: "csv" | "json";
+  fileNameWithExtension: string;
+}) {
+  return (
+    <div className="!my-3 relative">
+      <CodeClient
+        code={props.code}
+        lang={props.lang}
+        scrollableClassName="max-h-[300px] bg-background"
+      />
+
+      <Button
+        variant="outline"
+        size="sm"
+        className="absolute top-3.5 right-14 mt-[1px] h-auto bg-background p-2"
+        onClick={() => {
+          handleDownload({
+            fileContent: props.code,
+            fileNameWithExtension: props.fileNameWithExtension,
+            fileFormat: props.lang === "csv" ? "text/csv" : "application/json",
+          });
+        }}
+      >
+        <ArrowDownToLineIcon className="size-3" />
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/batch-upload/batch-upload-nfts.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/batch-upload/batch-upload-nfts.tsx
new file mode 100644
index 00000000000..59f4332d8ce
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/batch-upload/batch-upload-nfts.tsx
@@ -0,0 +1,544 @@
+import { TokenSelector } from "@/components/blocks/TokenSelector";
+import { DropZone } from "@/components/blocks/drop-zone/drop-zone";
+import { PaginationButtons } from "@/components/pagination-buttons";
+import { DynamicHeight } from "@/components/ui/DynamicHeight";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { DecimalInput } from "@/components/ui/decimal-input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  ImageOffIcon,
+  RotateCcwIcon,
+  TagIcon,
+} from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import {
+  NATIVE_TOKEN_ADDRESS,
+  type ThirdwebClient,
+  getAddress,
+} from "thirdweb";
+import { MediaRenderer } from "thirdweb/react";
+import { FilePreview } from "../../../_common/file-preview";
+import { nftWithPriceSchema } from "../schema";
+import { BatchUploadInstructions } from "./batch-upload-instructions";
+import {
+  type NFTMetadataWithPrice,
+  type ProcessBatchUploadFilesResult,
+  processBatchUploadFiles,
+} from "./process-files";
+
+export function BatchUploadNFTs(props: {
+  client: ThirdwebClient;
+  results: ProcessBatchUploadFilesResult | null;
+  setResults: (results: ProcessBatchUploadFilesResult | null) => void;
+  chainId: number;
+  onNext: () => void;
+  onPrev: () => void;
+}) {
+  return (
+    <div>
+      {!props.results || props.results.type === "error" ? (
+        <div>
+          <div className="p-4 md:p-6">
+            <DropZone
+              isError={props.results?.type === "error"}
+              onDrop={async (files) => {
+                try {
+                  const results = await processBatchUploadFiles(files);
+                  props.setResults(results);
+                } catch (e) {
+                  console.error(e);
+                  props.setResults({
+                    type: "error",
+                    error: e instanceof Error ? e.message : "Unknown error",
+                  });
+                }
+              }}
+              accept={undefined}
+              title={
+                props.results?.type === "error"
+                  ? "Invalid files"
+                  : "Upload Files"
+              }
+              description={
+                props.results?.type === "error"
+                  ? props.results.error
+                  : "Drag and drop the files or folder"
+              }
+              resetButton={{
+                label: "Remove files",
+                onClick: () => {
+                  props.setResults(null);
+                },
+              }}
+              className="bg-background py-20"
+            />
+            <div className="h-6" />
+            <BatchUploadInstructions />
+          </div>
+
+          <div className="flex justify-end gap-3 border-t px-6 py-4">
+            <Button variant="outline" onClick={props.onPrev} className="gap-2">
+              <ArrowLeftIcon className="size-4" />
+              Back
+            </Button>
+
+            <Button disabled className="gap-2">
+              Next
+              <ArrowRightIcon className="size-4" />
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <BatchUploadResultsTable
+          onPrev={props.onPrev}
+          onNext={props.onNext}
+          chainId={props.chainId}
+          data={props.results.data}
+          setData={(dataOrFn) => {
+            const data =
+              typeof dataOrFn === "function"
+                ? dataOrFn(
+                    props.results?.type === "data" ? props.results.data : [],
+                  )
+                : dataOrFn;
+
+            props.setResults({
+              type: "data",
+              data,
+            });
+          }}
+          onReset={() => {
+            props.setResults(null);
+          }}
+          client={props.client}
+        />
+      )}
+    </div>
+  );
+}
+
+const nativeTokenAddress = getAddress(NATIVE_TOKEN_ADDRESS);
+
+function BatchUploadResultsTable(props: {
+  data: NFTMetadataWithPrice[];
+  setData: React.Dispatch<React.SetStateAction<NFTMetadataWithPrice[]>>;
+  onReset: () => void;
+  client: ThirdwebClient;
+  chainId: number;
+  onNext: () => void;
+  onPrev: () => void;
+}) {
+  const { data, setData, onReset, client, onNext, onPrev } = props;
+  const imageFallback = (
+    <div className="flex size-20 items-center justify-center rounded-lg border bg-muted/50">
+      <ImageOffIcon className="size-7 text-muted-foreground" />
+    </div>
+  );
+
+  const [batchMode, setBatchMode] = useState(false);
+  const [page, setPage] = useState(1);
+  const pageSize = 3;
+  const itemsToShow = data.slice((page - 1) * pageSize, page * pageSize);
+  const totalPages = Math.ceil(data.length / pageSize);
+
+  return (
+    <div>
+      <DynamicHeight>
+        <div className="rounded-lg rounded-b-none border-b bg-background p-6">
+          <div className="flex items-center justify-between gap-4">
+            <div>
+              <h2 className="font-medium text-lg">Global Settings</h2>
+              <p className="text-muted-foreground text-sm">
+                Update price, currency, and supply for all NFTs at once.
+              </p>
+            </div>
+
+            <Switch
+              id="batch-mode"
+              checked={batchMode}
+              onCheckedChange={setBatchMode}
+            />
+          </div>
+
+          {batchMode && (
+            <BatchUpdateFieldset
+              data={data}
+              setData={setData}
+              client={client}
+              chainId={props.chainId}
+            />
+          )}
+        </div>
+      </DynamicHeight>
+
+      <TableContainer className="rounded-t-none border-0">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>NFT</TableHead>
+              <TableHead>Price</TableHead>
+              <TableHead>Supply</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {itemsToShow.map((item, paginatedIndex) => {
+              const itemIndex = paginatedIndex + (page - 1) * pageSize;
+
+              return (
+                <TableRow key={item.name}>
+                  {/* Nft */}
+                  <TableCell className="min-w-[400px] whitespace-normal">
+                    <div className="flex items-start gap-4">
+                      <div className="flex shrink-0 flex-col gap-4">
+                        {item.image instanceof File ? (
+                          <FilePreview
+                            srcOrFile={item.image}
+                            className="size-20 rounded-lg border object-cover"
+                            client={client}
+                          />
+                        ) : typeof item.image === "string" ? (
+                          <MediaRenderer
+                            src={
+                              item.image
+                                ? resolveSchemeWithErrorHandler({
+                                    uri: item.image,
+                                    client,
+                                  })
+                                : ""
+                            }
+                            className="size-20 rounded-lg border object-cover"
+                            client={client}
+                          />
+                        ) : (
+                          imageFallback
+                        )}
+
+                        {!!item.animation_url && (
+                          <div>
+                            {typeof item.animation_url === "string" ? (
+                              <MediaRenderer
+                                client={client}
+                                src={item.animation_url}
+                                className="size-20 rounded-lg border object-cover"
+                              />
+                            ) : item.animation_url instanceof File ? (
+                              <FilePreview
+                                srcOrFile={item.animation_url}
+                                className="size-20 rounded-lg border object-cover"
+                                client={client}
+                              />
+                            ) : (
+                              imageFallback
+                            )}
+                          </div>
+                        )}
+                      </div>
+
+                      <div className="flex flex-col gap-4">
+                        <div className="flex flex-col gap-1">
+                          <span className="font-medium text-base">
+                            {item.name}
+                          </span>
+
+                          {item.description && (
+                            <span className="text-muted-foreground text-sm">
+                              {item.description}
+                            </span>
+                          )}
+                        </div>
+
+                        {item.background_color && (
+                          <div className="flex items-center gap-2">
+                            <div
+                              className="size-4 rounded-full"
+                              style={{ backgroundColor: item.background_color }}
+                            />
+                            <span className="font-mono">
+                              {item.background_color}
+                            </span>
+                          </div>
+                        )}
+
+                        {Array.isArray(item.attributes) && (
+                          <div className="flex flex-wrap gap-2">
+                            {item.attributes.map((property: unknown) => {
+                              if (
+                                typeof property === "object" &&
+                                property !== null &&
+                                "trait_type" in property &&
+                                "value" in property &&
+                                typeof property.trait_type === "string" &&
+                                typeof property.value === "string"
+                              ) {
+                                return (
+                                  <Badge
+                                    key={`${property.trait_type}-${property.value}`}
+                                    variant="secondary"
+                                    className="gap-2 text-sm"
+                                  >
+                                    <TagIcon className="size-3 text-muted-foreground" />
+                                    <span className="text-foreground">
+                                      {property.trait_type}
+                                    </span>
+                                    <span className="text-muted-foreground">
+                                      {property.value}
+                                    </span>
+                                  </Badge>
+                                );
+                              }
+                            })}
+                          </div>
+                        )}
+
+                        {item.external_url &&
+                          typeof item.external_url === "string" && (
+                            <div>
+                              <a
+                                href={item.external_url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="inline whitespace-pre-wrap break-all text-muted-foreground underline decoration-muted-foreground/50 decoration-dotted underline-offset-4 hover:text-foreground"
+                              >
+                                {item.external_url}
+                              </a>
+                            </div>
+                          )}
+                      </div>
+                    </div>
+                  </TableCell>
+
+                  {/* Price Amount */}
+                  <TableCell className="whitespace-normal">
+                    <div className="flex items-center">
+                      <DecimalInput
+                        value={item.price_amount}
+                        className="w-24 rounded-r-none border-r-0 disabled:opacity-100"
+                        onChange={(value) => {
+                          setData((v) => {
+                            const newData = [...v];
+                            newData[itemIndex] = {
+                              ...newData[itemIndex],
+                              price_amount: value,
+                              price_currency: item.price_currency,
+                              supply: item.supply,
+                            };
+                            return newData;
+                          });
+                        }}
+                      />
+
+                      <TokenSelector
+                        className="w-36 rounded-l-none bg-background disabled:opacity-100"
+                        addNativeTokenIfMissing={true}
+                        showCheck={true}
+                        disableAddress={true}
+                        selectedToken={{
+                          address: item.price_currency || nativeTokenAddress,
+                          chainId: props.chainId,
+                        }}
+                        popoverContentClassName="!w-64"
+                        onChange={(token) => {
+                          setData((v) => {
+                            const newData = [...v];
+                            newData[itemIndex] = {
+                              ...newData[itemIndex],
+                              price_currency: token.address,
+                              price_amount: item.price_amount,
+                              supply: item.supply,
+                            };
+                            return newData;
+                          });
+                        }}
+                        client={props.client}
+                        chainId={props.chainId}
+                      />
+                    </div>
+                  </TableCell>
+
+                  {/* Supply */}
+                  <TableCell className="whitespace-normal">
+                    <div className="space-y-2">
+                      <DecimalInput
+                        value={item.supply}
+                        className="w-32 disabled:opacity-100"
+                        // disabled={batchMode}
+                        onChange={(value) => {
+                          setData((v) => {
+                            const newData = [...v];
+                            newData[itemIndex] = {
+                              ...newData[itemIndex],
+                              supply: value,
+                              price_currency: item.price_currency,
+                              price_amount: item.price_amount,
+                            };
+                            return newData;
+                          });
+                        }}
+                      />
+
+                      {item.supply === "0" && (
+                        <p className="text-red-500 text-sm">Invalid Supply</p>
+                      )}
+                    </div>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+
+      {totalPages > 1 && (
+        <div className="border-t px-4 py-6">
+          <PaginationButtons
+            activePage={page}
+            totalPages={totalPages}
+            onPageClick={setPage}
+          />
+        </div>
+      )}
+
+      <div className="flex flex-col items-center justify-between gap-3 border-t px-6 py-6 lg:flex-row">
+        <Button variant="outline" className="gap-2" onClick={onReset}>
+          <RotateCcwIcon className="size-4 text-muted-foreground" />
+          Reset
+        </Button>
+        <div className="flex gap-3">
+          {/* back */}
+          <Button variant="outline" className="gap-2" onClick={onPrev}>
+            <ArrowLeftIcon className="size-4" />
+            Back
+          </Button>
+
+          <Button
+            className="gap-2"
+            onClick={() => {
+              const result = nftWithPriceSchema.array().safeParse(data);
+              if (result.success) {
+                onNext();
+              } else {
+                toast.error(result.error.message);
+              }
+            }}
+          >
+            Next
+            <ArrowRightIcon className="size-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function BatchUpdateFieldset(props: {
+  data: NFTMetadataWithPrice[];
+  setData: React.Dispatch<React.SetStateAction<NFTMetadataWithPrice[]>>;
+  client: ThirdwebClient;
+  chainId: number;
+}) {
+  const { data, setData, client, chainId } = props;
+
+  const isAllPriceAmountSame = data.every(
+    (item) => item.price_amount === data[0]?.price_amount,
+  );
+  const isAllPriceCurrencySame = data.every(
+    (item) => item.price_currency === data[0]?.price_currency,
+  );
+  const isAllSupplySame = data.every((item) => item.supply === data[0]?.supply);
+
+  const globalSupply = isAllSupplySame ? data[0]?.supply || "" : "";
+  const globalPriceAmount = isAllPriceAmountSame
+    ? data[0]?.price_amount || ""
+    : "";
+
+  const globalPriceCurrency = isAllPriceCurrencySame
+    ? data[0]?.price_currency
+    : undefined;
+
+  return (
+    <div className="mt-5 border-t border-dashed pt-3">
+      <div className="flex flex-col gap-4 lg:flex-row">
+        <div className="space-y-1.5">
+          <Label>Price</Label>
+          <div className="flex w-full">
+            <DecimalInput
+              value={globalPriceAmount}
+              placeholder="Custom"
+              className="!text-xl h-12 w-32 rounded-r-none border-r-0 bg-card font-bold placeholder:font-semibold placeholder:text-xl"
+              onChange={(value) => {
+                setData((v) => {
+                  return v.map((item) => ({
+                    ...item,
+                    price_amount: value,
+                  }));
+                });
+              }}
+            />
+
+            <TokenSelector
+              className="h-12 w-48 rounded-l-none bg-card"
+              popoverContentClassName="!w-64"
+              addNativeTokenIfMissing={true}
+              showCheck={true}
+              disableAddress={true}
+              selectedToken={
+                globalPriceCurrency
+                  ? {
+                      address: globalPriceCurrency,
+                      chainId: chainId,
+                    }
+                  : undefined
+              }
+              onChange={(token) => {
+                setData((v) => {
+                  return v.map((item) => ({
+                    ...item,
+                    price_currency: token.address,
+                  }));
+                });
+              }}
+              client={client}
+              chainId={chainId}
+            />
+          </div>
+        </div>
+
+        <div className="space-y-1.5">
+          <Label>Supply</Label>
+          <DecimalInput
+            className="!text-xl h-12 bg-card font-bold placeholder:font-semibold placeholder:text-xl lg:w-40"
+            value={globalSupply}
+            placeholder="Custom"
+            onChange={(value) => {
+              setData((v) => {
+                return v.map((item) => ({
+                  ...item,
+                  supply: value,
+                }));
+              });
+            }}
+          />
+
+          {globalSupply === "0" && (
+            <p className="text-red-500 text-sm">Invalid Supply</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/batch-upload/process-files.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/batch-upload/process-files.ts
new file mode 100644
index 00000000000..7b9269cc328
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/batch-upload/process-files.ts
@@ -0,0 +1,327 @@
+import Papa from "papaparse";
+import { NATIVE_TOKEN_ADDRESS, getAddress, isAddress } from "thirdweb";
+import type { NFTInput } from "thirdweb/utils";
+import z from "zod";
+import {
+  csvMimeTypes,
+  jsonMimeTypes,
+} from "../../../../../../../../../../../utils/batch";
+
+const transformHeader = (h: string) => {
+  const headersToTransform = [
+    "name",
+    "description",
+    "image",
+    "animation_url",
+    "external_url",
+    "background_color",
+    "price_amount",
+    "price_currency",
+    "supply",
+  ];
+
+  if (headersToTransform.includes(h.trim().toLowerCase())) {
+    return h.trim().toLowerCase();
+  }
+  return h.trim();
+};
+
+const getAcceptedFiles = async (acceptedFiles: File[]) => {
+  const organizedFiles: {
+    csv: File | undefined;
+    json: File | undefined;
+    images: File[];
+    otherAssets: File[];
+  } = {
+    csv: undefined,
+    json: undefined,
+    images: [],
+    otherAssets: [],
+  };
+
+  for (const file of acceptedFiles) {
+    if (jsonMimeTypes.includes(file.type) || file.name.endsWith(".json")) {
+      organizedFiles.json = file;
+    } else if (csvMimeTypes.includes(file.type) || file.name.endsWith(".csv")) {
+      organizedFiles.csv = file;
+    } else if (file.type.includes("image/")) {
+      organizedFiles.images.push(file);
+    } else {
+      organizedFiles.otherAssets.push(file);
+    }
+  }
+
+  return organizedFiles;
+};
+
+export type NFTMetadataWithPrice = {
+  name?: string;
+  description?: string;
+  image?: File | string;
+  animation_url?: File | string;
+  external_url?: string;
+  background_color?: string;
+  price_amount: string;
+  price_currency: string;
+  supply: string;
+  attributes?: Array<{ trait_type: string; value: string }>;
+};
+
+const handleCSV = (params: {
+  csvData: CSVRowData[];
+  imageFiles: File[];
+  otherAssets: File[];
+}): NFTMetadataWithPrice[] => {
+  const { csvData, imageFiles, otherAssets } = params;
+  const isImageMapped = csvData.some((row) =>
+    imageFiles.find((x) => x.name === row.image),
+  );
+
+  const isAnimationUrlMapped = csvData.some((row) =>
+    otherAssets.find((x) => x.name === row.animation_url),
+  );
+
+  return csvData.map((row, index) => {
+    const {
+      name,
+      description,
+      image,
+      animation_url,
+      external_url,
+      background_color,
+      price_amount,
+      price_currency,
+      supply,
+      ...propertiesObj
+    } = row;
+
+    function getAttributes() {
+      const attributes: NFTMetadataWithPrice["attributes"] = [];
+      for (const key in propertiesObj) {
+        if (propertiesObj[key] && typeof propertiesObj[key] === "string") {
+          attributes.push({
+            trait_type: key,
+            value: propertiesObj[key],
+          });
+        }
+      }
+      return attributes;
+    }
+
+    const nft: NFTMetadataWithPrice = {
+      name: name,
+      description: description,
+      external_url,
+      background_color,
+      attributes: getAttributes(),
+      image:
+        imageFiles.find((img) => img?.name === image) ||
+        (!isImageMapped && imageFiles[index]) ||
+        image ||
+        undefined,
+      animation_url:
+        otherAssets.find((asset) => asset?.name === animation_url) ||
+        (!isAnimationUrlMapped && otherAssets[index]) ||
+        animation_url,
+      price_amount: price_amount || "1",
+      price_currency: price_currency || getAddress(NATIVE_TOKEN_ADDRESS),
+      supply: supply || "1",
+    };
+
+    return nft;
+  });
+};
+
+function handleJson(params: {
+  jsonData: NFTInput[];
+  imageFiles: File[];
+  otherAssets: File[];
+}): NFTMetadataWithPrice[] {
+  const { jsonData, imageFiles, otherAssets } = params;
+
+  const isImageMapped = jsonData.some((row) =>
+    imageFiles.find((img) => img?.name === row.image),
+  );
+  const isAnimationUrlMapped = jsonData.some((row) =>
+    otherAssets.find((x) => x.name === row.animation_url),
+  );
+
+  return jsonData.map((_nft: unknown, index: number) => {
+    const nft = nftWithPriceInputJsonSchema.parse(_nft);
+
+    const nftWithPrice = {
+      ...nft,
+      image:
+        imageFiles.find((img) => img?.name === nft?.image) ||
+        (!isImageMapped && imageFiles[index]) ||
+        nft.image ||
+        undefined,
+      animation_url:
+        otherAssets.find((x) => x.name === nft?.animation_url) ||
+        (!isAnimationUrlMapped && otherAssets[index]) ||
+        nft.animation_url ||
+        undefined,
+      price_amount: nft.price_amount || "1",
+      price_currency: nft.price_currency || getAddress(NATIVE_TOKEN_ADDRESS),
+      supply: nft.supply || "1",
+    };
+
+    return nftWithPrice;
+  });
+}
+
+export type ProcessBatchUploadFilesResult =
+  | {
+      type: "data";
+      data: NFTMetadataWithPrice[];
+    }
+  | {
+      type: "error";
+      error: string;
+    };
+
+const priceAmountSchema = z
+  .string()
+  .optional()
+  .refine(
+    (val) => {
+      if (!val || val.trim() === "") {
+        return true;
+      }
+      const num = Number(val);
+      if (Number.isNaN(num)) {
+        return false;
+      }
+
+      return num >= 0;
+    },
+    {
+      message: "Price amount must be a number greater than or equal to 0",
+    },
+  );
+
+const supplySchema = z
+  .string()
+  .optional()
+  .refine(
+    (val) => {
+      if (!val || val.trim() === "") {
+        return true;
+      }
+      const num = Number(val);
+      if (Number.isNaN(num)) {
+        return false;
+      }
+      return num > 0;
+    },
+    {
+      message: "Supply must be a number greater than 0",
+    },
+  );
+
+const nftWithPriceInputJsonSchema = z.object({
+  name: z.string(),
+  description: z.string().optional(),
+  image: z.string().or(z.instanceof(File)).optional(),
+  animation_url: z.string().or(z.instanceof(File)).optional(),
+  external_url: z.string().optional(),
+  background_color: z.string().optional(),
+  price_amount: priceAmountSchema,
+  price_currency: z
+    .string()
+    .refine((value) => {
+      if (!value) {
+        return true;
+      }
+      return isAddress(value);
+    })
+    .optional(),
+  supply: supplySchema,
+  attributes: z
+    .array(z.object({ trait_type: z.string(), value: z.string() }))
+    .optional(),
+});
+
+const nftWithPriceInputCsvSchema = z.object({
+  name: z.string(),
+  description: z.string().optional(),
+  image: z.string().or(z.instanceof(File)).optional(),
+  animation_url: z.string().or(z.instanceof(File)).optional(),
+  external_url: z.string().optional(),
+  background_color: z.string().optional(),
+  price_amount: priceAmountSchema,
+  price_currency: z.string().optional(),
+  supply: supplySchema,
+});
+
+type CSVRowData = z.infer<typeof nftWithPriceInputCsvSchema> &
+  Record<string, unknown>;
+
+export async function processBatchUploadFiles(
+  files: File[],
+): Promise<ProcessBatchUploadFilesResult> {
+  const { csv, json, images, otherAssets } = await getAcceptedFiles(files);
+
+  if (json) {
+    const jsonData = JSON.parse(await json.text());
+    if (Array.isArray(jsonData)) {
+      return {
+        type: "data",
+        data: handleJson({ jsonData, imageFiles: images, otherAssets }),
+      };
+    } else {
+      return {
+        type: "error",
+        error: "Invalid JSON format",
+      };
+    }
+  } else if (csv) {
+    return new Promise<ProcessBatchUploadFilesResult>((res, rej) => {
+      Papa.parse(csv, {
+        header: true,
+        transformHeader,
+        complete: (results) => {
+          try {
+            const validRows: CSVRowData[] = [];
+
+            for (let i = 0; i < results.data.length; i++) {
+              if (!results.errors.find((e) => e.row === i)) {
+                const result = results.data[i];
+                const parsed = nftWithPriceInputCsvSchema
+                  .passthrough()
+                  .parse(result);
+
+                if (parsed) {
+                  validRows.push(parsed);
+                }
+              }
+            }
+
+            if (validRows.length > 0) {
+              res({
+                type: "data",
+                data: handleCSV({
+                  csvData: validRows,
+                  imageFiles: images,
+                  otherAssets,
+                }),
+              });
+            } else {
+              res({
+                type: "error",
+                error: "No valid CSV data found",
+              });
+            }
+          } catch (e) {
+            rej(e);
+          }
+        },
+      });
+    });
+  } else {
+    return {
+      type: "error",
+      error: "No valid files found. Please upload a '.csv' or '.json' file.",
+    };
+  }
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/schema.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/schema.ts
new file mode 100644
index 00000000000..7d6868c6bb4
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/schema.ts
@@ -0,0 +1,68 @@
+import { isAddress } from "thirdweb";
+import z from "zod";
+
+const priceAmountSchema = z.string().refine(
+  (val) => {
+    const num = Number(val);
+    if (Number.isNaN(num)) {
+      return false;
+    }
+
+    return num >= 0;
+  },
+  {
+    message: "Price amount must be a number greater than or equal to 0",
+  },
+);
+
+const supplySchema = z.string().refine(
+  (val) => {
+    const num = Number(val);
+    if (Number.isNaN(num)) {
+      return false;
+    }
+    return num > 0;
+  },
+  {
+    message: "Supply must be a number greater than 0",
+  },
+);
+
+export const nftWithPriceSchema = z.object({
+  name: z.string().min(1, { message: "Name is required" }),
+  description: z.string().optional(),
+  image: z.string().or(z.instanceof(File)).optional(),
+  animation_url: z.string().or(z.instanceof(File)).optional(),
+  external_url: z.string().or(z.instanceof(File)).optional(),
+  background_color: z
+    .string()
+    .optional()
+    .refine((val) => !val || /^#[0-9A-Fa-f]{6}$/.test(val), {
+      message: "Must be a valid hex color (e.g., #FF0000)",
+    }),
+  price_amount: priceAmountSchema,
+  price_currency: z.string().refine(
+    (value) => {
+      if (!value) {
+        return true;
+      }
+      return isAddress(value);
+    },
+    {
+      message: "Must be a valid token contract address",
+    },
+  ),
+  supply: supplySchema,
+  attributes: z
+    .array(z.object({ trait_type: z.string(), value: z.string() }))
+    .transform((value) => {
+      if (!value) {
+        return value;
+      }
+
+      return value.filter((item) => {
+        return item.trait_type && item.value;
+      });
+    })
+    .optional(),
+});
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/single-upload/attributes.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/single-upload/attributes.tsx
new file mode 100644
index 00000000000..e1cb7c24711
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/single-upload/attributes.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { PlusIcon, Trash2Icon } from "lucide-react";
+import { type UseFormReturn, useFieldArray } from "react-hook-form";
+
+type WithAttributes = {
+  attributes?: {
+    trait_type: string;
+    value: string;
+  }[];
+};
+
+export function AttributesFieldset<T extends WithAttributes>(props: {
+  form: UseFormReturn<T>;
+}) {
+  // T contains all properties of WithSocialUrls, so this is ok
+  const form = props.form as unknown as UseFormReturn<WithAttributes>;
+
+  const { fields, append, remove } = useFieldArray({
+    name: "attributes",
+    control: form.control,
+  });
+
+  return (
+    <div className="">
+      <h2 className="mb-2 font-medium text-sm">Attributes</h2>
+
+      {fields.length > 0 && (
+        <div className="mb-3 space-y-4">
+          {fields.map((field, index) => (
+            <div
+              key={field.id}
+              className="flex gap-4 max-sm:mb-6 max-sm:border-b max-sm:border-dashed max-sm:pb-6"
+            >
+              <div className="flex flex-1 flex-col gap-3 lg:flex-row">
+                <FormField
+                  control={form.control}
+                  name={`attributes.${index}.trait_type`}
+                  render={({ field }) => (
+                    <FormItem className="flex-1">
+                      <FormControl>
+                        <Input
+                          {...field}
+                          placeholder="Name"
+                          aria-label="Name"
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name={`attributes.${index}.value`}
+                  render={({ field }) => (
+                    <FormItem className="flex-1">
+                      <FormControl>
+                        <Input
+                          {...field}
+                          placeholder="Value"
+                          aria-label="Value"
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <Button
+                type="button"
+                variant="outline"
+                className="rounded-full text-muted-foreground"
+                size="icon"
+                onClick={() => remove(index)}
+              >
+                <Trash2Icon className="h-4 w-4" />
+                <span className="sr-only">Remove</span>
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <Button
+        type="button"
+        size="sm"
+        variant="outline"
+        onClick={() => append({ trait_type: "", value: "" })}
+        className="h-auto gap-1.5 rounded-full px-3 py-1.5 text-xs"
+      >
+        <PlusIcon className="size-3.5" />
+        Add Attribute
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/single-upload/single-upload-nft.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/single-upload/single-upload-nft.tsx
new file mode 100644
index 00000000000..b9b1894990b
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/single-upload/single-upload-nft.tsx
@@ -0,0 +1,339 @@
+"use client";
+
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
+import { TokenSelector } from "@/components/blocks/TokenSelector";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { DecimalInput } from "@/components/ui/decimal-input";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { FileInput } from "components/shared/FileInput";
+import { ArrowLeftIcon, ArrowRightIcon, AsteriskIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import type { ThirdwebClient } from "thirdweb";
+import {
+  getUploadedNFTMediaMeta,
+  handleNFTMediaUpload,
+} from "../../../../../../../../../(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/nft/handleNFTMediaUpload";
+import type { NFTMetadataWithPrice } from "../batch-upload/process-files";
+import { nftWithPriceSchema } from "../schema";
+import { AttributesFieldset } from "./attributes";
+
+export function SingleUploadNFT(props: {
+  client: ThirdwebClient;
+  onNext: () => void;
+  onPrev: () => void;
+  chainId: number;
+  nftData: NFTMetadataWithPrice | null;
+  setNFTData: (nftData: NFTMetadataWithPrice) => void;
+}) {
+  const form = useForm<NFTMetadataWithPrice>({
+    resolver: zodResolver(nftWithPriceSchema),
+    values: props.nftData || undefined,
+    defaultValues: {
+      image: undefined,
+      name: "",
+      description: "",
+      attributes: [{ trait_type: "", value: "" }],
+    },
+    reValidateMode: "onChange",
+  });
+
+  function handlePrev() {
+    props.setNFTData(form.getValues()); // save before going back
+    props.onPrev();
+  }
+
+  const setFile = (file: File) => {
+    handleNFTMediaUpload({ file, form });
+  };
+
+  const { media, image, mediaFileError, showCoverImageUpload, external_url } =
+    getUploadedNFTMediaMeta(form);
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit((values) => {
+          props.setNFTData(values);
+          props.onNext();
+        })}
+      >
+        <div
+          className={cn(
+            "flex flex-col gap-6 px-4 py-6 md:grid md:grid-cols-[250px_1fr] md:px-6",
+            showCoverImageUpload && "!flex flex-col",
+          )}
+        >
+          {/* left */}
+          <div
+            className={cn(
+              showCoverImageUpload && "grid max-w-lg grid-cols-2 gap-6",
+            )}
+          >
+            <FormFieldSetup
+              errorMessage={mediaFileError?.message}
+              htmlFor="media"
+              label="Media"
+              isRequired={false}
+            >
+              <p className="mb-2 text-muted-foreground text-sm">
+                You can upload image, audio, video, html, text, pdf, or 3d model
+                file
+              </p>
+              <FileInput
+                value={media}
+                showPreview={true}
+                setValue={setFile}
+                className="rounded-lg bg-background"
+                selectOrUpload="Upload"
+                client={props.client}
+                helperText="Media"
+              />
+            </FormFieldSetup>
+
+            {showCoverImageUpload && (
+              <FormFieldSetup
+                errorMessage={form.formState.errors?.image?.message}
+                htmlFor="cover-image"
+                label="Cover Image"
+                isRequired={false}
+              >
+                <p className="mb-2 text-muted-foreground text-sm">
+                  You can optionally upload an image as the cover of your NFT
+                </p>
+                <FileInput
+                  client={props.client}
+                  accept={{ "image/*": [] }}
+                  helperText="Cover Image"
+                  value={image}
+                  setValue={(file) => {
+                    form.setValue("image", file);
+                  }}
+                  className="rounded-lg bg-background"
+                />
+              </FormFieldSetup>
+            )}
+          </div>
+
+          {/* right */}
+          <div className="flex flex-col gap-6">
+            {/* name  */}
+            <FormFieldSetup
+              label="Name"
+              isRequired
+              htmlFor="name"
+              errorMessage={form.formState.errors.name?.message}
+            >
+              <Input
+                id="name"
+                placeholder="My NFT"
+                {...form.register("name")}
+              />
+            </FormFieldSetup>
+
+            <FormFieldSetup
+              label="Description"
+              isRequired={false}
+              htmlFor="description"
+              className="flex grow flex-col"
+              errorMessage={form.formState.errors.description?.message}
+            >
+              <Textarea
+                id="description"
+                placeholder="Describe your NFT"
+                className="grow"
+                {...form.register("description")}
+              />
+            </FormFieldSetup>
+          </div>
+        </div>
+
+        <div className="border-t border-dashed px-4 py-6 md:px-6">
+          <AttributesFieldset form={form} />
+        </div>
+
+        {/* Price and Supply */}
+        <div className="grid grid-cols-1 gap-4 border-t border-dashed px-4 py-6 md:px-6 lg:grid-cols-2">
+          {/* Price */}
+          <div className="space-y-1 ">
+            <div className="inline-flex items-center gap-1">
+              <Label>Price</Label>
+              <AsteriskIcon className="size-3.5 text-destructive-text" />
+            </div>
+            <div className="flex">
+              {/* Price Amount */}
+              <div className="space-y-1">
+                <DecimalInput
+                  id="price_amount"
+                  value={form.watch("price_amount")}
+                  placeholder="0.00"
+                  className="w-40 rounded-r-none border-r-0 bg-background"
+                  onChange={(value) => {
+                    form.setValue("price_amount", value, {
+                      shouldValidate: true,
+                    });
+                  }}
+                />
+                {form.formState.errors.price_amount?.message && (
+                  <p className="text-destructive-text text-sm">
+                    {form.formState.errors.price_amount?.message}
+                  </p>
+                )}
+              </div>
+
+              {/* Price Currency */}
+              <div className="flex-1 space-y-1">
+                <TokenSelector
+                  className="rounded-l-none bg-background"
+                  addNativeTokenIfMissing={true}
+                  showCheck={true}
+                  disableAddress={true}
+                  selectedToken={
+                    form.watch("price_currency")
+                      ? {
+                          address: form.watch("price_currency"),
+                          chainId: props.chainId,
+                        }
+                      : undefined
+                  }
+                  onChange={(token) => {
+                    form.setValue("price_currency", token.address, {
+                      shouldValidate: true,
+                    });
+                  }}
+                  client={props.client}
+                  chainId={props.chainId}
+                />
+                {form.formState.errors.price_currency?.message && (
+                  <p className="text-destructive-text text-sm">
+                    {form.formState.errors.price_currency?.message}
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Supply */}
+          <FormFieldSetup
+            label="Supply"
+            isRequired
+            htmlFor="supply"
+            errorMessage={form.formState.errors.supply?.message}
+          >
+            <DecimalInput
+              id="supply"
+              placeholder="Custom"
+              value={form.watch("supply")}
+              className="bg-background"
+              onChange={(value) => {
+                form.setValue("supply", value, {
+                  shouldValidate: true,
+                });
+              }}
+            />
+          </FormFieldSetup>
+        </div>
+
+        {/* Advanced Settings */}
+        <div className="border-t border-dashed px-4 py-6 md:px-6">
+          <div className="space-y-4">
+            <FormField
+              control={form.control}
+              name="background_color"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="flex items-center gap-2">
+                    Background Color{" "}
+                    <Badge
+                      className="px-2 py-0.5 text-muted-foreground"
+                      variant="outline"
+                    >
+                      {" "}
+                      OpenSea{" "}
+                    </Badge>
+                  </FormLabel>
+                  <FormControl>
+                    <div className="relative">
+                      <Input maxLength={7} {...field} placeholder="#123456" />
+                      <div
+                        className="-translate-y-1/2 absolute top-1/2 right-4 size-5 rounded-full"
+                        style={{
+                          backgroundColor: field.value,
+                        }}
+                      />
+                    </div>
+                  </FormControl>
+                  <FormDescription>
+                    Must be a six-character hexadecimal with a pre-pended #.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {!(external_url instanceof File) && (
+              <FormField
+                control={form.control}
+                name="external_url"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="flex items-center gap-2">
+                      External URL{" "}
+                      <Badge
+                        className="px-2 py-0.5 text-muted-foreground"
+                        variant="outline"
+                      >
+                        {" "}
+                        OpenSea{" "}
+                      </Badge>
+                    </FormLabel>
+                    <FormControl>
+                      <Input {...field} placeholder="https://" type="url" />
+                    </FormControl>
+                    <FormDescription>
+                      This is the URL that will appear below the asset's image
+                      on OpenSea and will allow users to leave OpenSea and view
+                      the item on your site.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+          </div>
+        </div>
+
+        <div className="border-t border-dashed px-4 py-6 md:px-6">
+          <div className="flex justify-end gap-3">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handlePrev}
+              className="gap-2"
+            >
+              <ArrowLeftIcon className="size-4" />
+              Back
+            </Button>
+            <Button type="submit" className="gap-2">
+              Next
+              <ArrowRightIcon className="size-4" />
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Form>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/upload-nfts.stories.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/upload-nfts.stories.tsx
new file mode 100644
index 00000000000..faa710dd2f6
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/upload-nfts.stories.tsx
@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { storybookThirdwebClient } from "stories/utils";
+import { NATIVE_TOKEN_ADDRESS, getAddress } from "thirdweb";
+import { ThirdwebProvider } from "thirdweb/react";
+import type { NFTMetadataWithPrice } from "./batch-upload/process-files";
+import { type NFTData, UploadNFTsFieldset } from "./upload-nfts";
+
+const meta = {
+  title: "Asset/CreateNFT/UploadNFTsFieldset",
+  component: Variant,
+  decorators: [
+    (Story) => (
+      <div className="container max-w-5xl py-10">
+        <ThirdwebProvider>
+          <Story />
+        </ThirdwebProvider>
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Variant>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function getMockNFTData(params?: Partial<NFTMetadataWithPrice>) {
+  const mockNFTData: NFTMetadataWithPrice = {
+    name: "Test NFT",
+    description: "Test Description",
+    image: "https://picsum.photos/500/500",
+    price_amount: "0.1",
+    price_currency: getAddress(NATIVE_TOKEN_ADDRESS),
+    supply: "1",
+    attributes: [
+      {
+        trait_type: "test",
+        value: "value",
+      },
+    ],
+    ...params,
+  };
+
+  return mockNFTData;
+}
+
+export const MultipleNFTsNull: Story = {
+  args: {
+    nftData: {
+      type: "multiple",
+      nfts: null,
+    },
+  },
+};
+
+export const SingleNFTNull: Story = {
+  args: {
+    nftData: {
+      type: "single",
+      nft: null,
+    },
+  },
+};
+
+export const MultipleNFTsSet: Story = {
+  args: {
+    nftData: {
+      type: "multiple",
+      nfts: {
+        type: "data",
+        data: Array(5)
+          .fill(null)
+          .map((_, i) =>
+            getMockNFTData({
+              name: `Test NFT ${i + 1}`,
+              price_amount: Math.random().toFixed(2),
+            }),
+          ),
+      },
+    },
+  },
+};
+
+export const MultipleNFTsError: Story = {
+  args: {
+    nftData: {
+      type: "multiple",
+      nfts: {
+        type: "error",
+        error: "This is some error message",
+      },
+    },
+  },
+};
+
+export const SingleNFTSet: Story = {
+  args: {
+    nftData: {
+      type: "single",
+      nft: getMockNFTData(),
+    },
+  },
+};
+
+function Variant(props: {
+  nftData: NFTData;
+}) {
+  const [nftData, setNFTData] = useState<NFTData>(props.nftData);
+
+  return (
+    <UploadNFTsFieldset
+      client={storybookThirdwebClient}
+      chainId={1}
+      onNext={() => console.log("next")}
+      onPrev={() => console.log("prev")}
+      nftData={nftData}
+      setNFTData={setNFTData}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/upload-nfts.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/upload-nfts.tsx
new file mode 100644
index 00000000000..0cc785654fa
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/upload-nfts.tsx
@@ -0,0 +1,117 @@
+import { TabButtons } from "@/components/ui/tabs";
+import { useTrack } from "hooks/analytics/useTrack";
+import type { ThirdwebClient } from "thirdweb";
+import { StepCard } from "../../_common/step-card";
+import { getStepCardTrackingData } from "../../token/_common/tracking";
+import { nftCreationPages } from "../_common/pages";
+import { BatchUploadNFTs } from "./batch-upload/batch-upload-nfts";
+import type {
+  NFTMetadataWithPrice,
+  ProcessBatchUploadFilesResult,
+} from "./batch-upload/process-files";
+import { SingleUploadNFT } from "./single-upload/single-upload-nft";
+
+export type NFTData =
+  | {
+      type: "multiple";
+      nfts: ProcessBatchUploadFilesResult | null;
+    }
+  | {
+      type: "single";
+      nft: NFTMetadataWithPrice | null;
+    };
+
+export function UploadNFTsFieldset(props: {
+  client: ThirdwebClient;
+  chainId: number;
+  onNext: () => void;
+  onPrev: () => void;
+  nftData: NFTData;
+  setNFTData: (nftData: NFTData) => void;
+}) {
+  const trackEvent = useTrack();
+
+  function handleNextClick() {
+    trackEvent(
+      getStepCardTrackingData({
+        step: nftCreationPages["upload-assets"],
+        click: "next",
+        contractType: "NFTCollection",
+      }),
+    );
+    props.onNext();
+  }
+
+  function handlePrevClick() {
+    trackEvent(
+      getStepCardTrackingData({
+        step: nftCreationPages["upload-assets"],
+        click: "prev",
+        contractType: "NFTCollection",
+      }),
+    );
+    props.onPrev();
+  }
+
+  return (
+    <StepCard
+      title="Upload NFTs"
+      tracking={{ page: "upload-nfts", contractType: "NFTCollection" }}
+      prevButton={undefined}
+      nextButton={undefined}
+    >
+      <TabButtons
+        containerClassName="pt-2 px-4 md:px-6"
+        tabClassName="!text-sm"
+        tabs={[
+          {
+            name: "Create Single",
+            onClick: () =>
+              props.setNFTData({
+                type: "single",
+                nft: null,
+              }),
+            isActive: props.nftData.type === "single",
+          },
+          {
+            name: "Create Multiple",
+            onClick: () => props.setNFTData({ type: "multiple", nfts: null }),
+            isActive: props.nftData.type === "multiple",
+          },
+        ]}
+      />
+
+      {props.nftData.type === "multiple" && (
+        <BatchUploadNFTs
+          onNext={handleNextClick}
+          onPrev={handlePrevClick}
+          client={props.client}
+          results={props.nftData.nfts}
+          setResults={(results) =>
+            props.setNFTData({
+              type: "multiple",
+              nfts: results,
+            })
+          }
+          chainId={props.chainId}
+        />
+      )}
+
+      {props.nftData.type === "single" && (
+        <SingleUploadNFT
+          client={props.client}
+          onNext={handleNextClick}
+          onPrev={handlePrevClick}
+          chainId={props.chainId}
+          nftData={props.nftData.nft}
+          setNFTData={(nft) =>
+            props.setNFTData({
+              type: "single",
+              nft,
+            })
+          }
+        />
+      )}
+    </StepCard>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/form.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/_common/form.ts
similarity index 71%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/form.ts
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/_common/form.ts
index a15598059b1..74ee17abc25 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/form.ts
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/_common/form.ts
@@ -1,20 +1,6 @@
 import type { UseFormReturn } from "react-hook-form";
-import { isAddress } from "thirdweb";
 import * as z from "zod";
-
-const addressSchema = z.string().refine(
-  (value) => {
-    if (isAddress(value)) {
-      return true;
-    }
-    return false;
-  },
-  {
-    message: "Invalid address",
-  },
-);
-
-const urlSchema = z.string().url();
+import { addressSchema, socialUrlsSchema } from "../../_common/schema";
 
 export const tokenInfoFormSchema = z.object({
   // info fieldset
@@ -25,25 +11,8 @@ export const tokenInfoFormSchema = z.object({
     .max(10, "Symbol must be 10 characters or less"),
   chain: z.string().min(1, "Chain is required"),
   description: z.string().optional(),
-  image: z.any().optional(),
-  socialUrls: z.array(
-    z.object({
-      platform: z.string(),
-      url: z.string().refine(
-        (val) => {
-          if (val === "") {
-            return true;
-          }
-
-          const url = val.startsWith("http") ? val : `https://${val}`;
-          return urlSchema.safeParse(url);
-        },
-        {
-          message: "Invalid URL",
-        },
-      ),
-    }),
-  ),
+  image: z.instanceof(File).optional(),
+  socialUrls: socialUrlsSchema,
 });
 
 export const tokenDistributionFormSchema = z.object({
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/tracking.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/_common/tracking.ts
similarity index 93%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/tracking.ts
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/_common/tracking.ts
index 412058fa8c3..76a4c6d3e4c 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/tracking.ts
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/_common/tracking.ts
@@ -52,7 +52,7 @@ export function getTokenStepTrackingData(
 }
 
 // example: asset.launch.attempt
-export function getLaunchTrackingData(
+export function getTokenLaunchTrackingData(
   params: {
     chainId: number;
     airdropEnabled: boolean;
@@ -85,13 +85,14 @@ export function getLaunchTrackingData(
 
 // example: asset.info-page.next-click
 export function getStepCardTrackingData(params: {
-  step: "info" | "distribution" | "launch";
+  step: string;
   click: "prev" | "next";
+  contractType: "DropERC20" | "NFTCollection";
 }) {
   return {
     category: "asset",
     action: `${params.step}-page`,
     label: `${params.click}-click`,
-    contractType: "DropERC20",
+    contractType: params.contractType,
   };
 }
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page-impl.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/create-token-page-impl.tsx
similarity index 95%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page-impl.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/create-token-page-impl.tsx
index c4e934075ff..dc97420baeb 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page-impl.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/create-token-page-impl.tsx
@@ -26,14 +26,15 @@ import {
   transferBatch,
 } from "thirdweb/extensions/erc20";
 import { useActiveAccount } from "thirdweb/react";
-import { pollWithTimeout } from "../../../../../../../../utils/pollWithTimeout";
-import { useAddContractToProject } from "../../hooks/project-contracts";
-import { CreateTokenAssetPageUI } from "./create-token-page.client";
-import type { CreateAssetFormValues } from "./form";
+import { parseError } from "utils/errorParser";
+import { pollWithTimeout } from "utils/pollWithTimeout";
+import { useAddContractToProject } from "../../../hooks/project-contracts";
+import type { CreateAssetFormValues } from "./_common/form";
 import {
   getTokenDeploymentTrackingData,
   getTokenStepTrackingData,
-} from "./tracking";
+} from "./_common/tracking";
+import { CreateTokenAssetPageUI } from "./create-token-page.client";
 
 export function CreateTokenAssetPage(props: {
   accountAddress: string;
@@ -136,12 +137,15 @@ export function CreateTokenAssetPage(props: {
         contractAddress: contractAddress,
       };
     } catch (e) {
+      const parsedError = parseError(e);
+      const errorMessage =
+        typeof parsedError === "string" ? parsedError : "Unknown error";
       trackEvent(
         getTokenStepTrackingData({
           action: "deploy",
           chainId: Number(formValues.chain),
           status: "error",
-          errorMessage: e instanceof Error ? e.message : "Unknown error",
+          errorMessage,
         }),
       );
 
@@ -149,7 +153,7 @@ export function CreateTokenAssetPage(props: {
         getTokenDeploymentTrackingData({
           type: "error",
           chainId: Number(formValues.chain),
-          errorMessage: e instanceof Error ? e.message : "Unknown error",
+          errorMessage,
         }),
       );
       throw e;
@@ -409,7 +413,7 @@ export function CreateTokenAssetPage(props: {
       projectSlug={props.projectSlug}
       onLaunchSuccess={() => {
         revalidatePathAction(
-          `/team/${props.teamId}/project/${props.projectId}/assets`,
+          `/team/${props.teamSlug}/project/${props.projectId}/assets`,
           "page",
         );
       }}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/create-token-page.client.tsx
similarity index 97%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page.client.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/create-token-page.client.tsx
index 4e8948cd5ee..0225428e4db 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page.client.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/create-token-page.client.tsx
@@ -8,16 +8,16 @@ import {
   type ThirdwebClient,
   getAddress,
 } from "thirdweb";
-import { TokenDistributionFieldset } from "./distribution/token-distribution";
 import {
   type CreateAssetFormValues,
   type TokenDistributionFormValues,
   type TokenInfoFormValues,
   tokenDistributionFormSchema,
   tokenInfoFormSchema,
-} from "./form";
+} from "./_common/form";
+import { TokenDistributionFieldset } from "./distribution/token-distribution";
 import { LaunchTokenStatus } from "./launch/launch-token";
-import { TokenInfoFieldset } from "./token-info-fieldset";
+import { TokenInfoFieldset } from "./token-info/token-info-fieldset";
 
 export type CreateTokenFunctions = {
   deployContract: (values: CreateAssetFormValues) => Promise<{
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page.stories.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/create-token-page.stories.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page.stories.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/create-token-page.stories.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-airdrop.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/distribution/token-airdrop.tsx
similarity index 76%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-airdrop.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/distribution/token-airdrop.tsx
index 0c485759c3b..59102c6ef42 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-airdrop.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/distribution/token-airdrop.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
 "use client";
 
+import { DropZone } from "@/components/blocks/drop-zone/drop-zone";
 import { DynamicHeight } from "@/components/ui/DynamicHeight";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
@@ -27,18 +28,17 @@ import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 import { useCsvUpload } from "hooks/useCsvUpload";
 import {
-  ArrowDownToLineIcon,
   ArrowRightIcon,
   ArrowUpFromLineIcon,
   CircleAlertIcon,
   FileTextIcon,
   RotateCcwIcon,
-  UploadIcon,
   XIcon,
 } from "lucide-react";
 import { useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
-import type { TokenDistributionForm } from "../form";
+import { DownloadFileButton } from "../../_common/download-file-button";
+import type { TokenDistributionForm } from "../_common/form";
 
 type AirdropAddressInput = {
   address: string;
@@ -240,16 +240,7 @@ const AirdropUpload: React.FC<AirdropUploadProps> = ({
 }) => {
   const [textInput, setTextInput] = useState("");
 
-  const {
-    normalizeQuery,
-    getInputProps,
-    getRootProps,
-    rawData,
-    noCsv,
-    reset,
-    removeInvalid,
-    processData,
-  } = useCsvUpload<AirdropAddressInput>({
+  const csvUpload = useCsvUpload<AirdropAddressInput>({
     csvParser: (items: AirdropAddressInput[]) => {
       return items
         .map(({ address, quantity }) => ({
@@ -261,17 +252,15 @@ const AirdropUpload: React.FC<AirdropUploadProps> = ({
     client,
   });
 
-  const normalizeData = normalizeQuery.data;
+  const normalizeData = csvUpload.normalizeQuery.data;
 
-  // Handle text input - directly process the parsed data
   const handleTextSubmit = () => {
     if (!textInput.trim()) return;
-
     const parsedData = parseTextInput(textInput);
-    processData(parsedData);
+    csvUpload.processData(parsedData);
   };
 
-  if (!normalizeData && rawData.length > 0) {
+  if (csvUpload.normalizeQuery.isPending) {
     return (
       <div className="flex h-[300px] w-full grow items-center justify-center rounded-lg border border-border">
         <Spinner className="size-10" />
@@ -293,7 +282,7 @@ const AirdropUpload: React.FC<AirdropUploadProps> = ({
   };
 
   const handleReset = () => {
-    reset();
+    csvUpload.reset();
     setTextInput("");
   };
 
@@ -301,9 +290,9 @@ const AirdropUpload: React.FC<AirdropUploadProps> = ({
     <div className="flex w-full grow flex-col gap-6 overflow-hidden">
       {normalizeData &&
       normalizeData.result.length > 0 &&
-      rawData.length > 0 ? (
+      csvUpload.rawData.length > 0 ? (
         <div className="flex grow flex-col overflow-hidden outline">
-          {normalizeQuery.data.invalidFound && (
+          {csvUpload.normalizeQuery.data.invalidFound && (
             <p className="mb-3 text-red-500 text-sm">
               Invalid addresses found. Please remove them before continuing.
             </p>
@@ -317,10 +306,10 @@ const AirdropUpload: React.FC<AirdropUploadProps> = ({
               <RotateCcwIcon className="mr-2 size-4" />
               Reset
             </Button>
-            {normalizeQuery.data.invalidFound ? (
+            {csvUpload.normalizeQuery.data.invalidFound ? (
               <Button
                 onClick={() => {
-                  removeInvalid();
+                  csvUpload.removeInvalid();
                 }}
               >
                 <XIcon className="mr-2 size-4" />
@@ -334,64 +323,26 @@ const AirdropUpload: React.FC<AirdropUploadProps> = ({
           </div>
         </div>
       ) : (
-        <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-6 overflow-y-auto">
           {/* CSV Upload Section - First */}
           <div className="space-y-4">
             <CSVFormatDetails />
 
-            <div className="relative w-full">
-              <div
-                className={cn(
-                  "flex h-[180px] cursor-pointer items-center justify-center rounded-md border border-dashed bg-card hover:border-active-border",
-                  noCsv &&
-                    "border-red-500 bg-red-200/30 text-red-500 hover:border-red-600 dark:border-red-900 dark:bg-red-900/30 dark:hover:border-red-800",
-                )}
-                {...getRootProps()}
-              >
-                <input {...getInputProps()} accept=".csv" />
-                <div className="flex flex-col items-center justify-center gap-3">
-                  {!noCsv && (
-                    <div className="flex flex-col items-center">
-                      <div className="mb-3 flex size-11 items-center justify-center rounded-full border bg-card">
-                        <UploadIcon className="size-5" />
-                      </div>
-                      <h2 className="mb-0.5 text-center font-medium text-lg">
-                        Upload CSV File
-                      </h2>
-                      <p className="text-center font-medium text-muted-foreground text-sm">
-                        Drag and drop your file or click here to upload
-                      </p>
-                    </div>
-                  )}
-
-                  {noCsv && (
-                    <div className="flex flex-col items-center">
-                      <div className="mb-3 flex size-11 items-center justify-center rounded-full border border-red-500 bg-red-200/50 text-red-500 dark:border-red-900 dark:bg-red-900/30 dark:text-foreground">
-                        <XIcon className="size-5" />
-                      </div>
-                      <h2 className="mb-0.5 text-center font-medium text-foreground text-lg">
-                        Invalid CSV
-                      </h2>
-                      <p className="text-balance text-center text-sm">
-                        Your CSV does not contain the "address" & "quantity"
-                        columns
-                      </p>
-
-                      <Button
-                        className="relative z-50 mt-4"
-                        size="sm"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          reset();
-                        }}
-                      >
-                        Remove Invalid CSV
-                      </Button>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
+            <DropZone
+              accept=".csv"
+              isError={csvUpload.noCsv}
+              title={csvUpload.noCsv ? "Invalid CSV" : "Upload CSV File"}
+              description={
+                csvUpload.noCsv
+                  ? "Your CSV does not contain the 'address' & 'quantity' columns"
+                  : "Drag and drop your file or click here to upload"
+              }
+              onDrop={csvUpload.setFiles}
+              resetButton={{
+                label: "Remove Invalid CSV",
+                onClick: handleReset,
+              }}
+            />
           </div>
 
           {/* Divider */}
@@ -418,7 +369,8 @@ const AirdropUpload: React.FC<AirdropUploadProps> = ({
               </p>
               <div className="space-y-3">
                 <Textarea
-                  placeholder={`0x314ab97b76e39d63c78d5c86c2daf8eaa306b182 3.141592
+                  placeholder={`\
+0x314ab97b76e39d63c78d5c86c2daf8eaa306b182 3.141592
 thirdweb.eth,2.7182
 0x141ca95b6177615fb1417cf70e930e102bf8f384=1.41421`}
                   value={textInput}
@@ -467,43 +419,20 @@ function CSVFormatDetails() {
         </li>
       </ul>
 
-      <DownloadExampleCSVButton />
+      <DownloadFileButton
+        fileContent={exampleCSV}
+        fileNameWithExtension="airdrop.csv"
+        label="Download Example CSV"
+        fileFormat="text/csv"
+      />
     </div>
   );
 }
 
-function DownloadExampleCSVButton() {
-  return (
-    <Button
-      size="sm"
-      onClick={() => {
-        const link = document.createElement("a");
-        const exampleData = [
-          {
-            address: "0x000000000000000000000000000000000000dEaD",
-            quantity: "2",
-          },
-          {
-            address: "thirdweb.eth",
-            quantity: "1",
-          },
-        ];
-
-        const csv = `address,quantity\n${exampleData
-          .map((o) => `${o.address},${o.quantity}`)
-          .join("\n")}`;
-
-        const blob = new Blob([csv], { type: "text/csv" });
-        link.href = URL.createObjectURL(blob);
-        link.download = "airdrop.csv";
-        link.click();
-      }}
-    >
-      <ArrowDownToLineIcon className="mr-2 size-4" />
-      Download Example CSV
-    </Button>
-  );
-}
+const exampleCSV = `\
+address,quantity
+0x000000000000000000000000000000000000dEaD,2
+thirdweb.eth,1`;
 
 function AirdropTable(props: {
   data: AirdropAddressInput[];
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-distribution.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/distribution/token-distribution.tsx
similarity index 95%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-distribution.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/distribution/token-distribution.tsx
index b35585c9e89..a2510985fcc 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-distribution.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/distribution/token-distribution.tsx
@@ -8,11 +8,11 @@ import {
 import { Form } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import type { ThirdwebClient } from "thirdweb";
-import { StepCard } from "../create-token-card";
+import { StepCard } from "../../_common/step-card";
 import type {
   TokenDistributionForm,
   TokenDistributionFormValues,
-} from "../form";
+} from "../_common/form";
 import { TokenAirdropSection } from "./token-airdrop";
 import { TokenSaleSection } from "./token-sale";
 
@@ -33,7 +33,10 @@ export function TokenDistributionFieldset(props: {
       <form onSubmit={form.handleSubmit(props.onNext)}>
         <StepCard
           title="Coin Distribution"
-          page="distribution"
+          tracking={{
+            page: "distribution",
+            contractType: "DropERC20",
+          }}
           prevButton={{
             onClick: props.onPrevious,
           }}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-sale.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/distribution/token-sale.tsx
similarity index 98%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-sale.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/distribution/token-sale.tsx
index bd65654e99b..4240d8a5fc9 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-sale.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/distribution/token-sale.tsx
@@ -6,7 +6,7 @@ import { DynamicHeight } from "@/components/ui/DynamicHeight";
 import { DecimalInput } from "@/components/ui/decimal-input";
 import { Switch } from "@/components/ui/switch";
 import type { ThirdwebClient } from "thirdweb";
-import type { TokenDistributionForm } from "../form";
+import type { TokenDistributionForm } from "../_common/form";
 
 export function TokenSaleSection(props: {
   form: TokenDistributionForm;
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/launch/launch-token.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/launch/launch-token.tsx
similarity index 60%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/launch/launch-token.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/launch/launch-token.tsx
index c6abb12e042..c70b3f9595c 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/launch/launch-token.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/launch/launch-token.tsx
@@ -1,5 +1,4 @@
 "use client";
-import { Img } from "@/components/blocks/Img";
 import {
   type MultiStepState,
   MultiStepStatus,
@@ -13,24 +12,33 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { TransactionButton } from "components/buttons/TransactionButton";
-import { ChainIconClient } from "components/icons/ChainIcon";
 import { useTrack } from "hooks/analytics/useTrack";
-import { useAllChainsData } from "hooks/chains/allChains";
 import {
   ArrowRightIcon,
   ArrowUpFromLineIcon,
   ImageOffIcon,
 } from "lucide-react";
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import { useActiveWallet } from "thirdweb/react";
-import { parseError } from "../../../../../../../../../utils/errorParser";
-import { StepCard } from "../create-token-card";
+import { parseError } from "utils/errorParser";
+import { ChainOverview } from "../../_common/chain-overview";
+import { FilePreview } from "../../_common/file-preview";
+import { StepCard } from "../../_common/step-card";
+import type { CreateAssetFormValues } from "../_common/form";
+import { getTokenLaunchTrackingData } from "../_common/tracking";
 import type { CreateTokenFunctions } from "../create-token-page.client";
 import { TokenDistributionBarChart } from "../distribution/token-distribution";
-import type { CreateAssetFormValues } from "../form";
-import { getLaunchTrackingData } from "../tracking";
+
+const stepIds = {
+  "deploy-contract": "deploy-contract",
+  "set-claim-conditions": "set-claim-conditions",
+  "mint-tokens": "mint-tokens",
+  "airdrop-tokens": "airdrop-tokens",
+} as const;
+
+type StepId = keyof typeof stepIds;
 
 export function LaunchTokenStatus(props: {
   createTokenFunctions: CreateTokenFunctions;
@@ -43,130 +51,159 @@ export function LaunchTokenStatus(props: {
 }) {
   const formValues = props.values;
   const { createTokenFunctions } = props;
-  const [steps, setSteps] = useState<MultiStepState[]>([]);
+  const [steps, setSteps] = useState<MultiStepState<StepId>[]>([]);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [contractLink, setContractLink] = useState<string | null>(null);
   const activeWallet = useActiveWallet();
   const walletRequiresApproval = activeWallet?.id !== "inApp";
   const trackEvent = useTrack();
 
-  async function handleSubmitClick() {
-    function launchTracking(
-      params:
-        | {
-            type: "attempt" | "success";
-          }
-        | {
-            type: "error";
-            errorMessage: string;
-          },
-    ) {
-      trackEvent(
-        getLaunchTrackingData({
-          chainId: Number(formValues.chain),
-          airdropEnabled: formValues.airdropEnabled,
-          saleEnabled: formValues.saleEnabled,
-          ...params,
-        }),
-      );
-    }
+  function updateStatus(
+    index: number,
+    newStatus: MultiStepState<StepId>["status"],
+  ) {
+    setSteps((prev) => {
+      return [
+        ...prev.slice(0, index),
+        { ...prev[index], status: newStatus },
+        ...prev.slice(index + 1),
+      ] as MultiStepState<StepId>[];
+    });
+  }
+
+  function launchTracking(
+    params:
+      | {
+          type: "attempt" | "success";
+        }
+      | {
+          type: "error";
+          errorMessage: string;
+        },
+  ) {
+    trackEvent(
+      getTokenLaunchTrackingData({
+        chainId: Number(formValues.chain),
+        airdropEnabled: formValues.airdropEnabled,
+        saleEnabled: formValues.saleEnabled,
+        ...params,
+      }),
+    );
+  }
 
+  async function handleSubmitClick() {
     launchTracking({
       type: "attempt",
     });
 
-    function updateStatus(index: number, newStatus: MultiStepState["status"]) {
-      setSteps((prev) => {
-        return [
-          ...prev.slice(0, index),
-          { ...prev[index], status: newStatus },
-          ...prev.slice(index + 1),
-        ] as MultiStepState[];
-      });
-    }
-
-    function createSequenceExecutorFn(
-      index: number,
-      executeFn: (values: CreateAssetFormValues) => Promise<void>,
-    ) {
-      return async () => {
-        updateStatus(index, { type: "pending" });
-        try {
-          await executeFn(formValues);
-          updateStatus(index, { type: "completed" });
-          // start next one
-          const nextStep = initialSteps[index + 1];
-          if (nextStep) {
-            // do not use await next step
-            nextStep.execute();
-          } else {
-            launchTracking({
-              type: "success",
-            });
-            props.onLaunchSuccess();
-          }
-        } catch (error) {
-          updateStatus(index, { type: "error", message: parseError(error) });
-          launchTracking({
-            type: "error",
-            errorMessage:
-              error instanceof Error ? error.message : "Unknown error",
-          });
-          console.error(error);
-        }
-      };
-    }
-
-    const initialSteps: MultiStepState[] = [
+    const initialSteps: MultiStepState<StepId>[] = [
       {
         label: "Deploy contract",
+        id: stepIds["deploy-contract"],
         status: { type: "idle" },
-        execute: createSequenceExecutorFn(0, async (values) => {
-          const result = await createTokenFunctions.deployContract(values);
-          setContractLink(
-            `/team/${props.teamSlug}/${props.projectSlug}/contract/${values.chain}/${result.contractAddress}`,
-          );
-        }),
       },
       {
         label: "Set claim conditions",
+        id: stepIds["set-claim-conditions"],
         status: { type: "idle" },
-        execute: createSequenceExecutorFn(
-          1,
-          createTokenFunctions.setClaimConditions,
-        ),
       },
       {
         label: "Mint tokens",
+        id: stepIds["mint-tokens"],
         status: { type: "idle" },
-        execute: createSequenceExecutorFn(2, createTokenFunctions.mintTokens),
       },
     ];
 
     if (formValues.airdropEnabled && formValues.airdropAddresses.length > 0) {
       initialSteps.push({
         label: "Airdrop tokens",
+        id: stepIds["airdrop-tokens"],
         status: { type: "idle" },
-        execute: createSequenceExecutorFn(
-          3,
-          createTokenFunctions.airdropTokens,
-        ),
       });
     }
 
     setSteps(initialSteps);
     setIsModalOpen(true);
-
-    // start sequence
-    initialSteps[0]?.execute();
+    executeSteps(initialSteps, 0);
   }
 
   const isComplete = steps.every((step) => step.status.type === "completed");
   const isPending = steps.some((step) => step.status.type === "pending");
 
+  async function executeStep(stepId: StepId) {
+    if (stepId === "deploy-contract") {
+      const result = await createTokenFunctions.deployContract(formValues);
+      setContractLink(
+        `/team/${props.teamSlug}/${props.projectSlug}/contract/${formValues.chain}/${result.contractAddress}`,
+      );
+    } else if (stepId === "set-claim-conditions") {
+      await createTokenFunctions.setClaimConditions(formValues);
+    } else if (stepId === "mint-tokens") {
+      await createTokenFunctions.mintTokens(formValues);
+    } else if (stepId === "airdrop-tokens") {
+      await createTokenFunctions.airdropTokens(formValues);
+    }
+  }
+
+  async function executeSteps(
+    steps: MultiStepState<StepId>[],
+    startIndex: number,
+  ) {
+    for (let i = startIndex; i < steps.length; i++) {
+      const currentStep = steps[i];
+      if (!currentStep) {
+        return;
+      }
+
+      try {
+        updateStatus(i, {
+          type: "pending",
+        });
+
+        await executeStep(currentStep.id);
+
+        updateStatus(i, {
+          type: "completed",
+        });
+      } catch (error) {
+        const parsedError = parseError(error);
+
+        updateStatus(i, {
+          type: "error",
+          message: parsedError,
+        });
+
+        launchTracking({
+          type: "error",
+          errorMessage:
+            typeof parsedError === "string" ? parsedError : "Unknown error",
+        });
+
+        throw error;
+      }
+    }
+
+    launchTracking({
+      type: "success",
+    });
+    props.onLaunchSuccess();
+  }
+
+  async function handleRetry(step: MultiStepState<StepId>) {
+    const startIndex = steps.findIndex((s) => s.id === step.id);
+    if (startIndex === -1) {
+      return;
+    }
+
+    await executeSteps(steps, startIndex);
+  }
+
   return (
     <StepCard
-      page="launch"
+      tracking={{
+        page: "launch",
+        contractType: "DropERC20",
+      }}
       title="Launch Coin"
       prevButton={{
         onClick: props.onPrevious,
@@ -192,7 +229,16 @@ export function LaunchTokenStatus(props: {
       {/* Token info */}
       <div className="flex flex-col gap-6 border-b border-dashed px-4 py-6 pb-6 md:px-6 lg:flex-row">
         <OverviewField name="Image" className="shrink-0">
-          <RenderFileImage file={formValues.image} />
+          <FilePreview
+            client={props.client}
+            srcOrFile={formValues.image}
+            className="size-24 rounded-lg border object-cover"
+            fallback={
+              <div className="flex items-center justify-center bg-muted/50">
+                <ImageOffIcon className="size-5 text-muted-foreground" />
+              </div>
+            }
+          />
         </OverviewField>
 
         <div className="flex grow flex-col gap-4 ">
@@ -249,7 +295,7 @@ export function LaunchTokenStatus(props: {
               )}
             </DialogHeader>
 
-            <MultiStepStatus steps={steps} />
+            <MultiStepStatus steps={steps} onRetry={handleRetry} />
           </div>
 
           <div className="mt-2 flex justify-between gap-4 border-border border-t bg-card p-6">
@@ -288,35 +334,6 @@ const compactNumberFormatter = new Intl.NumberFormat("en-US", {
   maximumFractionDigits: 10,
 });
 
-function RenderFileImage(props: {
-  file: File | undefined;
-}) {
-  const [objectUrl, setObjectUrl] = useState<string>("");
-
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    if (props.file) {
-      const url = URL.createObjectURL(props.file);
-      setObjectUrl(url);
-      return () => URL.revokeObjectURL(url);
-    } else {
-      setObjectUrl("");
-    }
-  }, [props.file]);
-
-  return (
-    <Img
-      src={objectUrl}
-      className="size-24 rounded-lg border object-cover"
-      fallback={
-        <div className="flex items-center justify-center bg-muted/50">
-          <ImageOffIcon className="size-5 text-muted-foreground" />
-        </div>
-      }
-    />
-  );
-}
-
 function OverviewField(props: {
   name: string;
   children: React.ReactNode;
@@ -335,24 +352,3 @@ function OverviewFieldValue(props: {
 }) {
   return <p className="text-foreground text-sm">{props.value}</p>;
 }
-
-function ChainOverview(props: {
-  chainId: string;
-  client: ThirdwebClient;
-}) {
-  const { idToChain } = useAllChainsData();
-  const chainMetadata = idToChain.get(Number(props.chainId));
-
-  return (
-    <div className="flex items-center gap-2">
-      <ChainIconClient
-        className="size-3.5"
-        client={props.client}
-        src={chainMetadata?.icon?.url || ""}
-      />
-      <p className="text-foreground text-sm">
-        {chainMetadata?.name || `Chain ${props.chainId}`}
-      </p>
-    </div>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/page.tsx
similarity index 50%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/page.tsx
index d27b6f560b7..60244217977 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/page.tsx
@@ -1,21 +1,13 @@
 import { getProject } from "@/api/projects";
 import { getTeamBySlug } from "@/api/team";
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
-import Link from "next/link";
 import { redirect } from "next/navigation";
 import {
   getAuthToken,
   getAuthTokenWalletAddress,
-} from "../../../../../../api/lib/getAuthToken";
-import { loginRedirect } from "../../../../../../login/loginRedirect";
+} from "../../../../../../../api/lib/getAuthToken";
+import { loginRedirect } from "../../../../../../../login/loginRedirect";
+import { CreateAssetPageHeader } from "../_common/PageHeader";
 import { CreateTokenAssetPage } from "./create-token-page-impl";
 
 export default async function Page(props: {
@@ -32,7 +24,7 @@ export default async function Page(props: {
 
   if (!authToken || !accountAddress) {
     loginRedirect(
-      `/team/${params.team_slug}/${params.project_slug}/assets/create`,
+      `/team/${params.team_slug}/${params.project_slug}/assets/create/token`,
     );
   }
 
@@ -51,9 +43,12 @@ export default async function Page(props: {
 
   return (
     <div className="flex grow flex-col">
-      <PageHeader
+      <CreateAssetPageHeader
         teamSlug={params.team_slug}
         projectSlug={params.project_slug}
+        title="Create Coin"
+        description="Launch an ERC-20 coin for your project"
+        containerClassName="container max-w-5xl"
       />
       <div className="container max-w-5xl pt-8 pb-32">
         <CreateTokenAssetPage
@@ -68,43 +63,3 @@ export default async function Page(props: {
     </div>
   );
 }
-
-function PageHeader(props: {
-  teamSlug: string;
-  projectSlug: string;
-}) {
-  return (
-    <div className="border-b">
-      <div className="border-b py-3">
-        <Breadcrumb className="container max-w-5xl">
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink asChild>
-                <Link
-                  href={`/team/${props.teamSlug}/${props.projectSlug}/assets`}
-                >
-                  Assets
-                </Link>
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbPage>Create Coin</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
-      </div>
-
-      <div className="container flex max-w-5xl flex-col gap-3 py-8 lg:flex-row lg:items-center lg:justify-between">
-        <div>
-          <h1 className="font-semibold text-2xl tracking-tight lg:text-3xl">
-            Create Coin
-          </h1>
-          <p className="text-muted-foreground">
-            Launch an ERC-20 coin for your project
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token-info-fieldset.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/token-info/token-info-fieldset.tsx
similarity index 58%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token-info-fieldset.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/token-info/token-info-fieldset.tsx
index 5eb5e0da437..063e56d5511 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token-info-fieldset.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/token-info/token-info-fieldset.tsx
@@ -2,23 +2,15 @@
 
 import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
-import { Button } from "@/components/ui/button";
 import { Form } from "@/components/ui/form";
-import {
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage,
-} from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { ClientOnly } from "components/ClientOnly/ClientOnly";
 import { FileInput } from "components/shared/FileInput";
-import { PlusIcon, Trash2Icon } from "lucide-react";
-import { useFieldArray } from "react-hook-form";
 import type { ThirdwebClient } from "thirdweb";
-import { StepCard } from "./create-token-card";
-import type { TokenInfoForm } from "./form";
+import { SocialUrlsFieldset } from "../../_common/SocialUrls";
+import { StepCard } from "../../_common/step-card";
+import type { TokenInfoForm } from "../_common/form";
 
 export function TokenInfoFieldset(props: {
   client: ThirdwebClient;
@@ -31,7 +23,10 @@ export function TokenInfoFieldset(props: {
     <Form {...form}>
       <form onSubmit={form.handleSubmit(props.onNext)}>
         <StepCard
-          page="info"
+          tracking={{
+            page: "info",
+            contractType: "DropERC20",
+          }}
           title="Coin Information"
           prevButton={undefined}
           nextButton={{
@@ -47,6 +42,7 @@ export function TokenInfoFieldset(props: {
             >
               <FileInput
                 accept={{ "image/*": [] }}
+                client={props.client}
                 value={form.watch("image")}
                 setValue={(file) =>
                   form.setValue("image", file, {
@@ -128,94 +124,9 @@ export function TokenInfoFieldset(props: {
             </div>
           </div>
 
-          <SocialUrls form={form} />
+          <SocialUrlsFieldset form={form} />
         </StepCard>
       </form>
     </Form>
   );
 }
-
-function SocialUrls(props: {
-  form: TokenInfoForm;
-}) {
-  const { form } = props;
-
-  const { fields, append, remove } = useFieldArray({
-    name: "socialUrls",
-    control: form.control,
-  });
-
-  return (
-    <div className="border-t border-dashed px-4 py-6 lg:px-6">
-      <h2 className="mb-2 font-medium text-sm">Social URLs</h2>
-
-      {fields.length > 0 && (
-        <div className="mb-5 space-y-4">
-          {fields.map((field, index) => (
-            <div
-              key={field.id}
-              className="flex gap-3 max-sm:mb-6 max-sm:border-b max-sm:border-dashed max-sm:pb-6"
-            >
-              <div className="flex flex-1 flex-col gap-3 lg:flex-row">
-                <FormField
-                  control={form.control}
-                  name={`socialUrls.${index}.platform`}
-                  render={({ field }) => (
-                    <FormItem className="lg:max-w-[140px]">
-                      <FormControl>
-                        <Input
-                          {...field}
-                          placeholder="Platform"
-                          aria-label="Platform"
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name={`socialUrls.${index}.url`}
-                  render={({ field }) => (
-                    <FormItem className="flex-1">
-                      <FormControl>
-                        <Input
-                          {...field}
-                          placeholder="https://..."
-                          aria-label="Platform URL"
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                onClick={() => remove(index)}
-              >
-                <Trash2Icon className="h-4 w-4" />
-                <span className="sr-only">Remove</span>
-              </Button>
-            </div>
-          ))}
-        </div>
-      )}
-
-      <Button
-        type="button"
-        size="sm"
-        variant="outline"
-        onClick={() => append({ platform: "", url: "" })}
-        className="gap-2"
-      >
-        <PlusIcon className="size-4" />
-        Add Social URL
-      </Button>
-    </div>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/hooks/project-contracts.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/hooks/project-contracts.ts
index fceb0086cca..2e8e2dc42b9 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/hooks/project-contracts.ts
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/hooks/project-contracts.ts
@@ -11,7 +11,7 @@ export function useAddContractToProject() {
       contractAddress: string;
       chainId: string;
       deploymentType: "asset" | undefined;
-      contractType: "DropERC20" | undefined;
+      contractType: "DropERC20" | "DropERC721" | "DropERC1155" | undefined;
     }) => {
       const res = await apiServerProxy({
         pathname: `/v1/teams/${params.teamId}/projects/${params.projectId}/contracts`,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/ProjectGeneralSettingsPage.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/ProjectGeneralSettingsPage.tsx
index 0c43f08417e..02d801cae98 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/ProjectGeneralSettingsPage.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/ProjectGeneralSettingsPage.tsx
@@ -505,11 +505,11 @@ function ProjectImageSetting(props: {
         </div>
         <FileInput
           accept={{ "image/*": [] }}
-          value={projectAvatar}
+          value={projectAvatar || projectAvatarUrl}
           setValue={setProjectAvatar}
+          client={props.client}
           className="w-20 rounded-full lg:w-28"
           disableHelperText
-          fileUrl={projectAvatarUrl}
         />
       </div>
     </SettingsCard>
diff --git a/apps/dashboard/src/app/bridge/constants.ts b/apps/dashboard/src/app/bridge/constants.ts
index f8ddb246926..a21ca079c9c 100644
--- a/apps/dashboard/src/app/bridge/constants.ts
+++ b/apps/dashboard/src/app/bridge/constants.ts
@@ -18,7 +18,6 @@ import { setThirdwebDomains } from "thirdweb/utils";
 
 function getBridgeThirdwebClient() {
   if (getVercelEnv() !== "production") {
-    console.log("Setting domains for bridge app", THIRDWEB_BRIDGE_URL);
     // if not on production: run this when creating a client to set the domains
     setThirdwebDomains({
       rpc: THIRDWEB_RPC_DOMAIN,
diff --git a/apps/dashboard/src/app/pay/components/client/PaymentLinkForm.client.tsx b/apps/dashboard/src/app/pay/components/client/PaymentLinkForm.client.tsx
index 3e03494cf18..772d05d935f 100644
--- a/apps/dashboard/src/app/pay/components/client/PaymentLinkForm.client.tsx
+++ b/apps/dashboard/src/app/pay/components/client/PaymentLinkForm.client.tsx
@@ -305,6 +305,7 @@ export function PaymentLinkForm() {
                     </Label>
                     <div className="w-full">
                       <FileInput
+                        client={payAppThirdwebClient}
                         accept={{ "image/*": [] }}
                         setValue={handleImageUpload}
                         value={image || imageUri}
@@ -313,7 +314,6 @@ export function PaymentLinkForm() {
                         isDisabledText="Uploading..."
                         selectOrUpload="Upload"
                         helperText="image"
-                        fileUrl={imageUri}
                       />
                     </div>
                   </div>
diff --git a/apps/dashboard/src/components/configure-networks/Form/IconUpload.tsx b/apps/dashboard/src/components/configure-networks/Form/IconUpload.tsx
index 69559a12971..dffbb909e01 100644
--- a/apps/dashboard/src/components/configure-networks/Form/IconUpload.tsx
+++ b/apps/dashboard/src/components/configure-networks/Form/IconUpload.tsx
@@ -43,6 +43,7 @@ export const IconUpload: React.FC<{
 
   return (
     <FileInput
+      client={client}
       setValue={handleIconUpload}
       accept={{ "image/*": [] }}
       className="flex items-center"
diff --git a/apps/dashboard/src/components/contract-components/contract-deploy-form/contract-metadata-fieldset.tsx b/apps/dashboard/src/components/contract-components/contract-deploy-form/contract-metadata-fieldset.tsx
index f8a1c805aec..4225296a5aa 100644
--- a/apps/dashboard/src/components/contract-components/contract-deploy-form/contract-metadata-fieldset.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-deploy-form/contract-metadata-fieldset.tsx
@@ -2,17 +2,18 @@ import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { FileInput } from "components/shared/FileInput";
-import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
+import type { ThirdwebClient } from "thirdweb";
 import { Fieldset } from "./common";
 import type { CustomContractDeploymentForm } from "./custom-contract";
 
 interface ContractMetadataFieldsetProps {
   form: CustomContractDeploymentForm;
+  client: ThirdwebClient;
 }
 
 export const ContractMetadataFieldset: React.FC<
   ContractMetadataFieldsetProps
-> = ({ form }) => {
+> = ({ form, client }) => {
   return (
     <Fieldset legend="Contract Metadata">
       <div className="flex flex-col gap-6 md:grid md:grid-cols-[200px_1fr]">
@@ -25,8 +26,9 @@ export const ContractMetadataFieldset: React.FC<
           isRequired={false}
         >
           <FileInput
+            client={client}
             accept={{ "image/*": [] }}
-            value={useImageFileOrUrl(form.watch("contractMetadata.image"))}
+            value={form.watch("contractMetadata.image")}
             setValue={(file) =>
               form.setValue("contractMetadata.image", file, {
                 shouldTouch: true,
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 2009672442d..c21c9a94183 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
@@ -717,7 +717,9 @@ export const CustomContractForm: React.FC<CustomContractFormProps> = ({
           {Object.keys(formDeployParams).length > 0 && (
             <>
               {/* Contract Metadata */}
-              {hasContractURI && <ContractMetadataFieldset form={form} />}
+              {hasContractURI && (
+                <ContractMetadataFieldset form={form} client={client} />
+              )}
 
               {/* Primary Sale */}
               {hasPrimarySale && (
diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx
index 80ebdc25c01..42001d1d0c6 100644
--- a/apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx
@@ -2,7 +2,6 @@ import {
   Box,
   Flex,
   FormControl,
-  Image,
   Input,
   Tab,
   TabList,
@@ -15,8 +14,6 @@ import { compare, validate } from "compare-versions";
 import { FileInput } from "components/shared/FileInput";
 import { SolidityInput } from "contract-ui/components/solidity-inputs";
 import { SelectOption } from "core-ui/batch-upload/lazy-mint-form/select-option";
-import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
-import { replaceIpfsUrl } from "lib/sdk";
 import { useFormContext } from "react-hook-form";
 import type { ThirdwebClient } from "thirdweb";
 import type { ExtendedMetadata } from "thirdweb/utils";
@@ -44,7 +41,7 @@ export const LandingFieldset: React.FC<LandingFieldsetProps> = ({
   client,
 }) => {
   const form = useFormContext<ExtendedMetadata>();
-  const logoUrl = useImageFileOrUrl(form.watch("logo"));
+  const logoUrl = form.watch("logo");
 
   const handleVersionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target;
@@ -97,19 +94,11 @@ export const LandingFieldset: React.FC<LandingFieldsetProps> = ({
           <Box width="141px">
             <FileInput
               accept={{ "image/*": [] }}
+              client={client}
               value={logoUrl}
               // @ts-expect-error - we upload the file later this is fine
               setValue={(file) => form.setValue("logo", file)}
               className="rounded border border-border transition-all duration-200"
-              renderPreview={(fileUrl) => (
-                <Image
-                  alt=""
-                  w="100%"
-                  h="100%"
-                  src={replaceIpfsUrl(fileUrl, client)}
-                  borderRadius="full"
-                />
-              )}
               helperText="Image"
             />
           </Box>
diff --git a/apps/dashboard/src/components/contract-components/shared/sources-accordion.tsx b/apps/dashboard/src/components/contract-components/shared/sources-accordion.tsx
index 123dc6eec4e..9e8587dbea1 100644
--- a/apps/dashboard/src/components/contract-components/shared/sources-accordion.tsx
+++ b/apps/dashboard/src/components/contract-components/shared/sources-accordion.tsx
@@ -12,7 +12,6 @@ export function SourcesAccordion({
   sources,
   abi,
 }: { sources: SourceFile[]; abi?: Abi }) {
-  console.log({ sources });
   return (
     <Accordion type="multiple" className="w-full">
       {abi && (
diff --git a/apps/dashboard/src/components/contract-components/tables/contract-table.tsx b/apps/dashboard/src/components/contract-components/tables/contract-table.tsx
index da3e09013c1..2faafda3353 100644
--- a/apps/dashboard/src/components/contract-components/tables/contract-table.tsx
+++ b/apps/dashboard/src/components/contract-components/tables/contract-table.tsx
@@ -294,6 +294,8 @@ export function ContractTableUI(props: {
 
 const contractTypeToAssetTypeRecord: Record<string, string | undefined> = {
   DropERC20: "Coin",
+  DropERC721: "NFT Collection",
+  DropERC1155: "NFT Collection",
 };
 
 const NetworkFilterCell = React.memo(function NetworkFilterCell({
diff --git a/apps/dashboard/src/components/contract-pages/forms/properties.shared.tsx b/apps/dashboard/src/components/contract-pages/forms/properties.shared.tsx
index 50bf2442e88..bd24dc6f3fc 100644
--- a/apps/dashboard/src/components/contract-pages/forms/properties.shared.tsx
+++ b/apps/dashboard/src/components/contract-pages/forms/properties.shared.tsx
@@ -23,6 +23,7 @@ import {
   type WatchObserver,
   useFieldArray,
 } from "react-hook-form";
+import type { ThirdwebClient } from "thirdweb";
 import { Button, FormErrorMessage, FormLabel } from "tw-components";
 
 type OptionalPropertiesInput = {
@@ -41,6 +42,7 @@ interface IPropertiesFormControlProps<
   register: UseFormRegister<TFieldValues>;
   errors: FieldErrors;
   setValue: UseFormSetValue<TFieldValues>;
+  client: ThirdwebClient;
 }
 
 export const PropertiesFormControl = <
@@ -51,6 +53,7 @@ export const PropertiesFormControl = <
   watch,
   errors,
   setValue,
+  client,
 }: React.PropsWithChildren<IPropertiesFormControlProps<TFieldValues>>) => {
   const { fields, append, remove, replace } = useFieldArray({
     control,
@@ -140,6 +143,7 @@ export const PropertiesFormControl = <
                     <InputRightElement>
                       <Tooltip label="Upload file" shouldWrapChildren>
                         <FileInput
+                          client={client}
                           setValue={(file) => {
                             setValue(
                               `attributes.${index}.value` as Path<TFieldValues>,
diff --git a/apps/dashboard/src/components/embedded-wallets/Configure/index.tsx b/apps/dashboard/src/components/embedded-wallets/Configure/index.tsx
index 06a05435b5e..181e174e7a1 100644
--- a/apps/dashboard/src/components/embedded-wallets/Configure/index.tsx
+++ b/apps/dashboard/src/components/embedded-wallets/Configure/index.tsx
@@ -446,8 +446,9 @@ function AppImageFormControl(props: {
     <div className="flex">
       <div className="relative">
         <FileInput
+          client={props.client}
           accept={{ "image/*": [] }}
-          value={image}
+          value={image || resolveUrl}
           setValue={async (v) => {
             try {
               setImage(v);
@@ -462,7 +463,6 @@ function AppImageFormControl(props: {
           }}
           className="w-24 rounded-full bg-background lg:w-28"
           disableHelperText
-          fileUrl={resolveUrl}
         />
 
         {uploadImage.isPending && (
diff --git a/apps/dashboard/src/components/inputs/BasisPointsInput.tsx b/apps/dashboard/src/components/inputs/BasisPointsInput.tsx
index 0a1b13f41b9..c03ccf0966d 100644
--- a/apps/dashboard/src/components/inputs/BasisPointsInput.tsx
+++ b/apps/dashboard/src/components/inputs/BasisPointsInput.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
 import { PercentIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 
@@ -44,9 +45,12 @@ export const BasisPointsInput: React.FC<BasisPointsInputProps> = ({
   return (
     <div className="flex overflow-hidden rounded-lg border border-border ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2">
       <Input
-        className="rounded-r-none border-none focus-visible:ring-0 focus-visible:ring-offset-0"
         value={stringValue}
         {...restInputProps}
+        className={cn(
+          "rounded-r-none border-none focus-visible:ring-0 focus-visible:ring-offset-0",
+          restInputProps.className,
+        )}
         onChange={(e) => setStringValue(e.target.value)}
         onBlur={(e) => {
           const val = e.target.value;
diff --git a/apps/dashboard/src/components/ipfs-upload/button.tsx b/apps/dashboard/src/components/ipfs-upload/button.tsx
index 0a5c0c94e9c..92455d5778a 100644
--- a/apps/dashboard/src/components/ipfs-upload/button.tsx
+++ b/apps/dashboard/src/components/ipfs-upload/button.tsx
@@ -3,6 +3,7 @@ import { FileInput } from "components/shared/FileInput";
 import { useErrorHandler } from "contexts/error-handler";
 import { UploadIcon } from "lucide-react";
 import { toast } from "sonner";
+import type { ThirdwebClient } from "thirdweb";
 import { Button, type ButtonProps } from "tw-components";
 import type { ComponentWithChildren } from "types/component-with-children";
 
@@ -10,12 +11,14 @@ interface IpfsUploadButtonProps extends ButtonProps {
   // biome-ignore lint/suspicious/noExplicitAny: FIXME
   storageUpload: UseMutationResult<string[], unknown, any, unknown>;
   onUpload: (uri: string) => void;
+  client: ThirdwebClient;
 }
 
 export const IpfsUploadButton: ComponentWithChildren<IpfsUploadButtonProps> = ({
   storageUpload,
   onUpload,
   children,
+  client,
   ...buttonProps
 }) => {
   const { onError } = useErrorHandler();
@@ -33,7 +36,7 @@ export const IpfsUploadButton: ComponentWithChildren<IpfsUploadButtonProps> = ({
   };
 
   return (
-    <FileInput setValue={handleUpload}>
+    <FileInput setValue={handleUpload} client={client}>
       <Button
         size="sm"
         variant="solid"
diff --git a/apps/dashboard/src/components/shared/FileInput.tsx b/apps/dashboard/src/components/shared/FileInput.tsx
index 0194292d426..e857cabd296 100644
--- a/apps/dashboard/src/components/shared/FileInput.tsx
+++ b/apps/dashboard/src/components/shared/FileInput.tsx
@@ -1,16 +1,15 @@
-/* eslint-disable @next/next/no-img-element */
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
-import { EyeIcon, FilePlusIcon, ImageIcon, UploadIcon } from "lucide-react";
-import Link from "next/link";
-import { useCallback } from "react";
+import { FilePreview } from "@app/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/file-preview";
+import { FilePlusIcon, UploadIcon } from "lucide-react";
+import { useCallback, useEffect, useRef } from "react";
 import {
   type Accept,
   type DropEvent,
   type FileRejection,
   useDropzone,
 } from "react-dropzone";
+import type { ThirdwebClient } from "thirdweb";
 
 interface IFileInputProps {
   accept?: Accept;
@@ -27,7 +26,7 @@ interface IFileInputProps {
   children?: React.ReactNode;
   className?: string;
   disableHelperText?: boolean;
-  fileUrl?: string;
+  client: ThirdwebClient;
 }
 
 export const FileInput: React.FC<IFileInputProps> = ({
@@ -37,15 +36,14 @@ export const FileInput: React.FC<IFileInputProps> = ({
   showUploadButton,
   value,
   children,
-  renderPreview,
   helperText,
   selectOrUpload = "Select",
   isDisabledText = "Upload Disabled",
   showPreview = true,
   className,
   previewMaxWidth,
+  client,
   disableHelperText,
-  fileUrl: fileUrlFallback,
 }) => {
   const onDrop = useCallback<
     <T extends File>(
@@ -61,15 +59,11 @@ export const FileInput: React.FC<IFileInputProps> = ({
     },
     [setValue],
   );
-  const { getRootProps, getInputProps, open } = useDropzone({
+  const { getRootProps, getInputProps } = useDropzone({
     onDrop,
     accept,
   });
 
-  const file: File | null =
-    typeof window !== "undefined" && value instanceof File ? value : null;
-  const fileUrl = useImageFileOrUrl(value) || fileUrlFallback || "";
-
   const helperTextOrFile = helperText
     ? helperText
     : accept &&
@@ -78,27 +72,16 @@ export const FileInput: React.FC<IFileInputProps> = ({
       ? "image"
       : "file";
 
-  // Don't display non image file types
-  const noDisplay = file && !file.type.includes("image");
+  const createdBlobUrl = useRef<string | null>(null);
 
-  const fileType = file
-    ? file.type.includes("image")
-      ? "Image"
-      : file.type.includes("audio")
-        ? "Audio"
-        : file.type.includes("video")
-          ? "Video"
-          : file.type.includes("csv")
-            ? "CSV"
-            : file.type.includes("text") || file.type.includes("pdf")
-              ? "Text"
-              : file.type.includes("model") ||
-                  file.name.endsWith(".glb") ||
-                  file.name.endsWith(".usdz") ||
-                  file.name.endsWith(".obj")
-                ? "3D Model"
-                : "Media"
-    : null;
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    return () => {
+      if (createdBlobUrl.current) {
+        URL.revokeObjectURL(createdBlobUrl.current);
+      }
+    };
+  }, []);
 
   if (children) {
     return (
@@ -139,25 +122,17 @@ export const FileInput: React.FC<IFileInputProps> = ({
             className={cn(
               "relative cursor-pointer overflow-hidden",
               "flex w-full items-center justify-center border border-border hover:bg-accent hover:ring-2 hover:ring-ring",
-              fileUrl ? "bg-transparent" : "bg-card",
+              value ? "bg-transparent" : "bg-card",
               className,
             )}
           >
-            {noDisplay ? (
-              <div className="flex flex-col items-center gap-2 text-muted-foreground">
-                <ImageIcon className="size-6" />
-                <p className="text-sm">{fileType} uploaded</p>
-              </div>
-            ) : fileUrl ? (
-              renderPreview ? (
-                renderPreview(fileUrl)
-              ) : (
-                <img
-                  alt=""
-                  className="absolute top-0 left-0 h-full w-full object-contain"
-                  src={fileUrl}
-                />
-              )
+            {value ? (
+              <FilePreview
+                srcOrFile={value}
+                client={client}
+                className="h-full w-full"
+                imgContainerClassName="h-full w-full"
+              />
             ) : (
               <div className="flex flex-col items-center gap-2.5 text-muted-foreground">
                 <div className="flex items-center justify-center rounded-full border border-border bg-background p-3">
@@ -173,34 +148,14 @@ export const FileInput: React.FC<IFileInputProps> = ({
           </div>
         ))}
 
-      {showUploadButton || noDisplay ? (
+      {showUploadButton ? (
         <div className="flex flex-col gap-2">
           {showUploadButton && (
-            <Button
-              onClick={open}
-              variant="outline"
-              disabled={isDisabled}
-              className="gap-2"
-            >
+            <Button variant="outline" disabled={isDisabled} className="gap-2">
               <FilePlusIcon className="size-4" /> {selectOrUpload}{" "}
               {helperTextOrFile}
             </Button>
           )}
-          {noDisplay && (
-            <Button
-              variant="outline"
-              className="gap-2"
-              asChild
-              onClick={(e) => {
-                e.stopPropagation();
-              }}
-            >
-              <Link href={fileUrl} target="_blank" className="no-underline">
-                <EyeIcon className="size-4" />
-                View File
-              </Link>
-            </Button>
-          )}
         </div>
       ) : null}
     </div>
diff --git a/apps/dashboard/src/contract-ui/components/solidity-inputs/string-input.tsx b/apps/dashboard/src/contract-ui/components/solidity-inputs/string-input.tsx
index a6ae4e3e1f9..2b70f27e626 100644
--- a/apps/dashboard/src/contract-ui/components/solidity-inputs/string-input.tsx
+++ b/apps/dashboard/src/contract-ui/components/solidity-inputs/string-input.tsx
@@ -46,6 +46,7 @@ export const SolidityStringInput: React.FC<SolidityInputWithTypeProps> = ({
       {showButton && (
         <div className="absolute inset-y-0 right-0 flex items-center pr-1">
           <IpfsUploadButton
+            client={client}
             onUpload={(uri) => {
               if (functionName) {
                 if (functionName === "updateBatchBaseURI") {
diff --git a/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx b/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx
index 9acffd4310b..fa931ab21b2 100644
--- a/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx
+++ b/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx
@@ -14,7 +14,6 @@ import {
 import { zodResolver } from "@hookform/resolvers/zod";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { FileInput } from "components/shared/FileInput";
-import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
 import { ChevronLeftIcon, EyeIcon, EyeOffIcon } from "lucide-react";
 import { useRef, useState } from "react";
 import { useDropzone } from "react-dropzone";
@@ -249,6 +248,7 @@ export const BatchLazyMint: ComponentWithChildren<
           <SelectReveal
             form={form}
             canCreateDelayedRevealBatch={props.canCreateDelayedRevealBatch}
+            client={props.client}
           />
           {form.watch("revealType") && (
             <>
@@ -301,15 +301,18 @@ export const BatchLazyMint: ComponentWithChildren<
 interface SelectRevealProps {
   form: ReturnType<typeof useBatchLazyMintForm>;
   canCreateDelayedRevealBatch: boolean;
+  client: ThirdwebClient;
 }
 
 const SelectReveal: React.FC<SelectRevealProps> = ({
   form,
+  client,
   canCreateDelayedRevealBatch,
 }) => {
   const [show, setShow] = useState(false);
 
-  const imageUrl = useImageFileOrUrl(form.watch("placeHolder.image"));
+  const imageUrl = form.watch("placeHolder.image");
+
   return (
     <Flex flexDir="column">
       <Flex
@@ -413,6 +416,7 @@ const SelectReveal: React.FC<SelectRevealProps> = ({
                 <FormLabel>Image</FormLabel>
                 <div className="w-auto md:w-[350px]">
                   <FileInput
+                    client={client}
                     accept={{ "image/*": [] }}
                     value={imageUrl}
                     showUploadButton
diff --git a/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx b/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx
index d35a7ed2d85..fb618d44c84 100644
--- a/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx
+++ b/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx
@@ -1,12 +1,8 @@
 import { CodeClient } from "@/components/ui/code/code.client";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import {
-  Box,
-  type BoxProps,
   Flex,
   IconButton,
-  Image,
-  type ImageProps,
   Portal,
   Select,
   Table,
@@ -17,8 +13,6 @@ import {
   Thead,
   Tr,
 } from "@chakra-ui/react";
-import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
-import { replaceIpfsUrl } from "lib/sdk";
 import {
   ChevronFirstIcon,
   ChevronLastIcon,
@@ -29,34 +23,8 @@ import { useMemo } from "react";
 import { type Column, usePagination, useTable } from "react-table";
 import type { ThirdwebClient } from "thirdweb";
 import type { NFTInput } from "thirdweb/utils";
+import { FilePreview } from "../../app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/file-preview";
 
-const FileImage: React.FC<
-  ImageProps & {
-    client: ThirdwebClient;
-  }
-> = ({ src, client, ...props }) => {
-  const img = useImageFileOrUrl(
-    typeof src === "string" && src.startsWith("ipfs://")
-      ? replaceIpfsUrl(src, client)
-      : src,
-  );
-  return <Image alt="" {...props} src={img} />;
-};
-
-const FileVideo: React.FC<
-  BoxProps &
-    Omit<React.ComponentProps<"video">, "ref" | "src"> & {
-      src: string | File;
-      client: ThirdwebClient;
-    }
-> = ({ src, client, ...props }) => {
-  const video = useImageFileOrUrl(
-    typeof src === "string" && src.startsWith("ipfs://")
-      ? replaceIpfsUrl(src, client)
-      : src,
-  );
-  return <Box as="video" {...props} src={video} />;
-};
 interface BatchTableProps {
   data: NFTInput[];
   portalRef: React.RefObject<HTMLDivElement | null>;
@@ -84,12 +52,9 @@ export const BatchTable: React.FC<BatchTableProps> = ({
         Header: "Image",
         accessor: (row) => row.image,
         Cell: ({ cell: { value } }: { cell: { value?: string } }) => (
-          <FileImage
-            flexShrink={0}
-            boxSize={24}
-            objectFit="contain"
-            src={value}
-            alt=""
+          <FilePreview
+            className="size-24 shrink-0 rounded-lg object-contain"
+            srcOrFile={value}
             client={client}
           />
         ),
@@ -98,15 +63,9 @@ export const BatchTable: React.FC<BatchTableProps> = ({
         Header: "Animation Url",
         accessor: (row) => row.animation_url,
         Cell: ({ cell: { value } }: { cell: { value?: string } }) => (
-          <FileVideo
-            flexShrink={0}
-            boxSize={24}
-            objectFit="contain"
-            src={value || ""}
-            autoPlay
-            playsInline
-            muted
-            loop
+          <FilePreview
+            className="size-24 shrink-0 rounded-lg"
+            srcOrFile={value}
             client={client}
           />
         ),
@@ -177,7 +136,7 @@ export const BatchTable: React.FC<BatchTableProps> = ({
   // Render the UI for your table
   return (
     <Flex flexGrow={1} overflow="auto">
-      <TableContainer maxW="100%">
+      <TableContainer maxW="100%" className="w-full">
         <Table {...getTableProps()}>
           <Thead>
             {headerGroups.map((headerGroup, index) => (
diff --git a/apps/dashboard/src/hooks/useCsvUpload.ts b/apps/dashboard/src/hooks/useCsvUpload.ts
index f6dc3744c17..816888ead65 100644
--- a/apps/dashboard/src/hooks/useCsvUpload.ts
+++ b/apps/dashboard/src/hooks/useCsvUpload.ts
@@ -2,7 +2,6 @@ import { useQuery } from "@tanstack/react-query";
 import pLimit from "p-limit";
 import Papa from "papaparse";
 import { useCallback, useState } from "react";
-import { type DropzoneOptions, useDropzone } from "react-dropzone";
 import { type ThirdwebClient, ZERO_ADDRESS, isAddress } from "thirdweb";
 import { resolveAddress } from "thirdweb/extensions/ens";
 import { csvMimeTypes } from "utils/batch";
@@ -103,8 +102,9 @@ export function useCsvUpload<
     setRawData([]);
     setNoCsv(false);
   }, []);
-  const onDrop = useCallback<Required<DropzoneOptions>["onDrop"]>(
-    (acceptedFiles) => {
+
+  const setFiles = useCallback(
+    (acceptedFiles: File[]) => {
       setNoCsv(false);
       const csv = acceptedFiles.find(
         (f) => csvMimeTypes.includes(f.type) || f.name?.endsWith(".csv"),
@@ -130,9 +130,6 @@ export function useCsvUpload<
     },
     [props.csvParser],
   );
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop,
-  });
 
   const normalizeQuery = useQuery({
     queryKey: ["snapshot-check-isAddress", rawData],
@@ -177,9 +174,7 @@ export function useCsvUpload<
 
   return {
     normalizeQuery,
-    getInputProps,
-    getRootProps,
-    isDragActive,
+    setFiles,
     rawData,
     noCsv,
     reset,
diff --git a/apps/dashboard/src/hooks/useImageFileOrUrl.ts b/apps/dashboard/src/hooks/useImageFileOrUrl.ts
deleted file mode 100644
index 64150c543d4..00000000000
--- a/apps/dashboard/src/hooks/useImageFileOrUrl.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useMemo } from "react";
-import { isBrowser } from "utils/isBrowser";
-
-export function useImageFileOrUrl(image?: string | File): string {
-  return useMemo(() => {
-    if (!image) {
-      return "";
-    }
-    return typeof image === "string"
-      ? image
-      : isBrowser()
-        ? URL.createObjectURL(image)
-        : "";
-  }, [image]);
-}
diff --git a/apps/dashboard/src/tw-components/nft-media.tsx b/apps/dashboard/src/tw-components/nft-media.tsx
index e6520ee308c..a945020c28f 100644
--- a/apps/dashboard/src/tw-components/nft-media.tsx
+++ b/apps/dashboard/src/tw-components/nft-media.tsx
@@ -27,13 +27,13 @@ export const NFTMediaWithEmptyState: React.FC<{
           height: props.height,
         }}
         className={cn(
-          "grid flex-shrink-0 place-items-center overflow-hidden rounded-lg border border-border object-contain",
+          "grid h-full flex-shrink-0 place-items-center overflow-hidden rounded-lg border border-border object-contain",
           props.className,
         )}
       >
-        <div className="flex flex-col items-center gap-1">
-          <ImageIcon className="size-6" />
-          <span className="font-semibold text-sm">No Media</span>
+        <div className="flex flex-col items-center gap-2">
+          <ImageIcon className="size-8 text-muted-foreground" />
+          <span className="text-muted-foreground">No Media</span>
         </div>
       </div>
     );
@@ -45,7 +45,7 @@ export const NFTMediaWithEmptyState: React.FC<{
         height: props.height,
       }}
       className={cn(
-        "flex-shrink-0 overflow-hidden rounded-lg object-contain",
+        "flex-shrink-0 overflow-hidden rounded-lg object-contain ",
         props.className,
       )}
     >
diff --git a/apps/dashboard/src/utils/batch.ts b/apps/dashboard/src/utils/batch.ts
index 86c655486d0..5db5b43c319 100644
--- a/apps/dashboard/src/utils/batch.ts
+++ b/apps/dashboard/src/utils/batch.ts
@@ -22,7 +22,7 @@ export const csvMimeTypes = [
   "text/tab-separated-values",
 ];
 
-const jsonMimeTypes = [
+export const jsonMimeTypes = [
   "application/json",
   "application/x-json",
   "application/ld+json",
@@ -102,8 +102,9 @@ const getAcceptedFiles = async (acceptedFiles: File[]) => {
   return { csv, json, images, videos };
 };
 
-// biome-ignore lint/suspicious/noExplicitAny: FIXME
-const removeEmptyKeysFromObject = (obj: any) => {
+function removeEmptyKeysFromObject<T extends Record<string, unknown>>(
+  obj: T,
+): T {
   // biome-ignore lint/complexity/noForEach: FIXME
   Object.keys(obj).forEach((key) => {
     if (obj[key] === "" || obj[key] === null || obj[key] === undefined) {
@@ -111,7 +112,7 @@ const removeEmptyKeysFromObject = (obj: any) => {
     }
   });
   return obj;
-};
+}
 
 const convertToOsStandard = (obj: NFTInput["attributes"]) => {
   const attributes = Object.entries(obj || {}).map(([trait_type, value]) => ({
diff --git a/apps/dashboard/tsconfig.json b/apps/dashboard/tsconfig.json
index 7cd955b896d..2981b36190a 100644
--- a/apps/dashboard/tsconfig.json
+++ b/apps/dashboard/tsconfig.json
@@ -19,7 +19,8 @@
     "noUncheckedIndexedAccess": true,
     "paths": {
       "tw-components": ["tw-components"],
-      "tw-components/*": ["tw-components/*"]
+      "tw-components/*": ["tw-components/*"],
+      "@app/*": ["app/(app)/*"]
     },
     "plugins": [
       {
diff --git a/packages/thirdweb/src/react/web/ui/MediaRenderer/MediaRenderer.tsx b/packages/thirdweb/src/react/web/ui/MediaRenderer/MediaRenderer.tsx
index 17fd5b9110d..2e6e4aaec95 100644
--- a/packages/thirdweb/src/react/web/ui/MediaRenderer/MediaRenderer.tsx
+++ b/packages/thirdweb/src/react/web/ui/MediaRenderer/MediaRenderer.tsx
@@ -87,7 +87,7 @@ export const MediaRenderer = /* @__PURE__ */ (() =>
     );
 
     if (!mediaInfoIsFetched || !src) {
-      return <div style={style} />;
+      return <div style={style} className={className} />;
     }
 
     if (mediaInfo.mimeType) {
diff --git a/packages/thirdweb/src/react/web/utils/resolveMimeType.ts b/packages/thirdweb/src/react/web/utils/resolveMimeType.ts
index 5c096b9a004..45ee048dc52 100644
--- a/packages/thirdweb/src/react/web/utils/resolveMimeType.ts
+++ b/packages/thirdweb/src/react/web/utils/resolveMimeType.ts
@@ -12,9 +12,12 @@ export async function resolveMimeType(url?: string) {
     return mimeType;
   }
 
-  const res = await fetch(url, {
-    method: "HEAD",
-  });
+  const res = url.startsWith("blob:")
+    ? await fetch(url)
+    : await fetch(url, {
+        method: "HEAD",
+      });
+
   if (res.ok && res.headers.has("content-type")) {
     return res.headers.get("content-type") || undefined;
   }