diff --git a/apps/dashboard/public/assets/examples/example-with-ipfs.csv b/apps/dashboard/public/assets/examples/example-with-ipfs.csv
deleted file mode 100644
index d46ea39a909..00000000000
--- a/apps/dashboard/public/assets/examples/example-with-ipfs.csv
+++ /dev/null
@@ -1,2 +0,0 @@
-name,description,image,animation_url,external_url,background_color,youtube_url,additional,properties,can be,added
-Token 0 Name,Token 0 Description,ipfs://ipfsHash/0,ipfs://ipfsHash/0,https://thirdweb.com,#0098EE,,every,row,is a ,property
diff --git a/apps/dashboard/public/assets/examples/example-with-maps.csv b/apps/dashboard/public/assets/examples/example-with-maps.csv
deleted file mode 100644
index fd1879f1422..00000000000
--- a/apps/dashboard/public/assets/examples/example-with-maps.csv
+++ /dev/null
@@ -1,4 +0,0 @@
-name,description,image,animation_url,external_url,background_color,youtube_url,additional,properties,can be,added
-Token 0 Name,Token 0 Description,0.png,0.mp4,https://thirdweb.com,#0098EE,,every,row,is a ,property
-Token 1 Name,Token 1 Description,0.png,0.mp4,https://thirdweb.com,#0098EE,,every,row,is a ,property
-Token 2 Name,Token 2 Description,0.png,0.mp4,https://thirdweb.com,#0098EE,,every,row,is a ,property
diff --git a/apps/dashboard/public/assets/examples/example.csv b/apps/dashboard/public/assets/examples/example.csv
deleted file mode 100644
index 60232fb7f37..00000000000
--- a/apps/dashboard/public/assets/examples/example.csv
+++ /dev/null
@@ -1,2 +0,0 @@
-name,description,external_url,background_color,youtube_url,additional,properties,can be,added
-Token 0 Name,Token 0 Description,https://thirdweb.com,#0098EE,,every,row,is a ,property
\ No newline at end of file
diff --git a/apps/dashboard/src/@/components/batch-upload/batch-lazy-mint.tsx b/apps/dashboard/src/@/components/batch-upload/batch-lazy-mint.tsx
index 73a6d1aad41..d9b184501db 100644
--- a/apps/dashboard/src/@/components/batch-upload/batch-lazy-mint.tsx
+++ b/apps/dashboard/src/@/components/batch-upload/batch-lazy-mint.tsx
@@ -1,23 +1,18 @@
 "use client";
 
-import {
-  Alert,
-  AlertIcon,
-  Flex,
-  FormControl,
-  Input,
-  InputGroup,
-  InputRightElement,
-  Textarea,
-} from "@chakra-ui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button } from "chakra/button";
-import { FormErrorMessage, FormHelperText, FormLabel } from "chakra/form";
-import { Heading } from "chakra/heading";
-import { Text } from "chakra/text";
-import { ChevronLeftIcon, EyeIcon, EyeOffIcon } from "lucide-react";
-import { useRef, useState } from "react";
-import { useDropzone } from "react-dropzone";
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  EyeIcon,
+  EyeOffIcon,
+  HelpCircleIcon,
+  LockKeyholeIcon,
+  RefreshCcwIcon,
+  ShuffleIcon,
+} from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import type { ThirdwebClient } from "thirdweb";
 import type { CreateDelayedRevealBatchParams } from "thirdweb/extensions/erc721";
@@ -25,12 +20,14 @@ import type { NFTInput } from "thirdweb/utils";
 import { z } from "zod";
 import { FileInput } from "@/components/blocks/FileInput";
 import { TransactionButton } from "@/components/tx-button";
-import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
-import { UnderlineLink } from "@/components/ui/UnderlineLink";
-import type { ComponentWithChildren } from "@/types/component-with-children";
+import { Button } from "@/components/ui/button";
+import { Form, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
 import { processInputData, shuffleData } from "@/utils/batch";
+import { TabButtons } from "../ui/tabs";
 import { BatchTable } from "./batch-table";
-import { SelectOption } from "./lazy-mint-form/select-option";
 import { UploadStep } from "./upload-step";
 
 type DelayedSubmit = {
@@ -44,16 +41,6 @@ type InstantSubmit = {
 
 type SubmitType = DelayedSubmit | InstantSubmit;
 
-interface BatchLazyMintEVMProps {
-  nextTokenIdToMint: bigint;
-  canCreateDelayedRevealBatch: boolean;
-  onSubmit: (formData: SubmitType) => Promise<unknown>;
-  chainId: number;
-  client: ThirdwebClient;
-}
-
-type BatchLazyMintProps = BatchLazyMintEVMProps;
-
 const BatchLazyMintFormSchema = z
   .object({
     confirmPassword: z
@@ -73,7 +60,7 @@ const BatchLazyMintFormSchema = z
         name: z.string().min(1, "A name is required"),
       })
       .optional(),
-    revealType: z.literal("instant").or(z.literal("delayed")).optional(),
+    revealType: z.literal("instant").or(z.literal("delayed")),
 
     // shared logic
     shuffle: z.boolean().default(false),
@@ -91,18 +78,21 @@ function useBatchLazyMintForm() {
   return useForm<BatchLazyMintFormType>({
     defaultValues: {
       metadatas: [],
-      revealType: undefined,
+      revealType: "instant",
       shuffle: false,
     },
     resolver: zodResolver(BatchLazyMintFormSchema),
   });
 }
 
-export const BatchLazyMint: ComponentWithChildren<
-  BatchLazyMintProps & {
-    isLoggedIn: boolean;
-  }
-> = (props) => {
+export function BatchLazyMint(props: {
+  nextTokenIdToMint: bigint;
+  canCreateDelayedRevealBatch: boolean;
+  onSubmit: (formData: SubmitType) => Promise<unknown>;
+  chainId: number;
+  client: ThirdwebClient;
+  isLoggedIn: boolean;
+}) {
   const [step, setStep] = useState(0);
 
   const form = useBatchLazyMintForm();
@@ -110,369 +100,415 @@ export const BatchLazyMint: ComponentWithChildren<
   const nftMetadatas = form.watch("metadatas");
   const hasError = !!form.getFieldState("metadatas", form.formState).error;
 
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop: async (acceptedFiles) => {
-      try {
-        await processInputData(acceptedFiles, (data) =>
-          form.setValue("metadatas", data),
-        );
-      } catch {
-        form.setError("metadatas", {
-          message: "Invalid metadata files",
-          type: "validate",
-        });
-      }
-
-      if (nftMetadatas.length === 0) {
-        form.setError("metadatas", {
-          message: "Invalid metadata files",
-          type: "validate",
-        });
-      }
-    },
-  });
-
-  const paginationPortalRef = useRef<HTMLDivElement>(null);
-
   return (
-    <form
-      className="mt-4 flex w-full flex-col"
-      onSubmit={form.handleSubmit((data) => {
-        // first shuffle
-        const shuffledMetadatas = data.shuffle
-          ? shuffleData(data.metadatas)
-          : data.metadatas;
-
-        // check submit is instant
-        if (data.revealType === "instant") {
-          return props.onSubmit({
-            data: { metadatas: shuffledMetadatas },
-            revealType: "instant",
-          });
-        }
-        // validate password
-        if (!data.password) {
-          form.setError("password", {
-            message: "A password is required for delayed reveal.",
-            type: "validate",
-          });
-          return;
-        }
-        // validate placeholder
-        if (!data.placeHolder?.name) {
-          form.setError("placeHolder.name", {
-            message: "A name is required for delayed reveal.",
-            type: "validate",
-          });
-        }
-        // submit
-        return props.onSubmit({
-          data: {
-            metadata: shuffledMetadatas,
-            password: data.password,
-            placeholderMetadata: {
-              description: data.placeHolder?.description,
-              image: data.placeHolder?.image,
-              name: data.placeHolder?.name,
+    <Form {...form}>
+      <form
+        className="mt-4 flex w-full flex-col"
+        onSubmit={form.handleSubmit(async (data) => {
+          // first shuffle
+          const shuffledMetadatas = data.shuffle
+            ? shuffleData(data.metadatas)
+            : data.metadatas;
+
+          // check submit is instant
+          if (data.revealType === "instant") {
+            return props.onSubmit({
+              data: { metadatas: shuffledMetadatas },
+              revealType: "instant",
+            });
+          }
+          // validate password
+          if (!data.password) {
+            form.setError("password", {
+              message: "A password is required for delayed reveal.",
+              type: "validate",
+            });
+            return;
+          }
+          // validate placeholder
+          if (!data.placeHolder?.name) {
+            form.setError("placeHolder.name", {
+              message: "A name is required for delayed reveal.",
+              type: "validate",
+            });
+          }
+          // submit
+          await props.onSubmit({
+            data: {
+              metadata: shuffledMetadatas,
+              password: data.password,
+              placeholderMetadata: {
+                description: data.placeHolder?.description,
+                image: data.placeHolder?.image,
+                name: data.placeHolder?.name,
+              },
             },
-          },
-          revealType: "delayed",
-        });
-      })}
-    >
-      {step === 0 ? (
-        <div className="flex flex-col gap-6">
-          {nftMetadatas.length > 0 ? (
-            <>
-              <BatchTable
-                client={props.client}
-                data={nftMetadatas}
-                nextTokenIdToMint={props.nextTokenIdToMint}
-                portalRef={paginationPortalRef}
-              />
-              <div className="border-border border-t">
-                <div className="flex flex-col items-center justify-between p-0 md:flex-row md:p-4">
-                  <div ref={paginationPortalRef} />
-                  <div className="mt-4 flex w-full flex-row items-center gap-2 md:mt-0 md:w-auto">
-                    <Button
-                      borderRadius="md"
-                      isDisabled={!hasError}
-                      onClick={() => {
-                        form.reset();
-                      }}
-                      w={{ base: "100%", md: "auto" }}
-                    >
-                      Reset
-                    </Button>
-                    <Button
-                      borderRadius="md"
-                      colorScheme="primary"
-                      onClick={() => setStep(1)}
-                      w={{ base: "100%", md: "auto" }}
-                    >
-                      Next
-                    </Button>
-                  </div>
+            revealType: "delayed",
+          });
+        })}
+      >
+        {step === 0 ? (
+          <div>
+            {nftMetadatas.length > 0 ? (
+              <div className="pb-10">
+                <h2 className="text-2xl font-semibold tracking-tight mb-4">
+                  Upload NFTs
+                </h2>
+
+                <BatchTable
+                  client={props.client}
+                  data={nftMetadatas}
+                  nextTokenIdToMint={props.nextTokenIdToMint}
+                />
+                <div className="mt-5 flex justify-end gap-4">
+                  <Button
+                    className="w-full md:w-auto gap-2"
+                    disabled={!hasError}
+                    onClick={() => {
+                      form.reset();
+                    }}
+                    variant="outline"
+                  >
+                    <RefreshCcwIcon className="size-4" />
+                    Reset
+                  </Button>
+                  <Button
+                    className="w-full md:w-auto gap-2"
+                    onClick={() => setStep(1)}
+                  >
+                    Next <ArrowRightIcon className="size-4" />
+                  </Button>
                 </div>
               </div>
-            </>
-          ) : (
-            <UploadStep
-              getInputProps={getInputProps}
-              getRootProps={getRootProps}
-              hasFailed={hasError}
-              isDragActive={isDragActive}
-            />
-          )}
-        </div>
-      ) : (
-        <>
-          <Flex align="center" justify="space-between" mb={2} py={4} w="100%">
-            <div className="flex flex-row items-center gap-2">
+            ) : (
+              <UploadStep
+                hasFailed={hasError}
+                reset={() => {
+                  form.reset();
+                }}
+                onDrop={async (acceptedFiles) => {
+                  try {
+                    await processInputData(acceptedFiles, (data) =>
+                      form.setValue("metadatas", data),
+                    );
+                  } catch {
+                    form.setError("metadatas", {
+                      message: "Invalid metadata files",
+                      type: "validate",
+                    });
+                  }
+
+                  if (nftMetadatas.length === 0) {
+                    form.setError("metadatas", {
+                      message: "Invalid metadata files",
+                      type: "validate",
+                    });
+                  }
+                }}
+              />
+            )}
+          </div>
+        ) : (
+          <div className="container px-0 max-w-4xl pb-14">
+            <div className="flex mb-3">
               <Button
-                className="text-muted-foreground"
+                className="gap-2 -translate-x-3 text-muted-foreground"
+                size="sm"
                 onClick={() => setStep(0)}
                 variant="ghost"
               >
-                <ChevronLeftIcon className="size-5 cursor-pointer" />
+                <ArrowLeftIcon className="size-4" />
+                Back
               </Button>
-              <Heading className="my-auto" size="title.md">
-                When will you reveal your NFTs?
-              </Heading>
             </div>
-          </Flex>
-          <SelectReveal
-            canCreateDelayedRevealBatch={props.canCreateDelayedRevealBatch}
-            client={props.client}
-            form={form}
-          />
-          {form.watch("revealType") && (
-            <>
-              <CheckboxWithLabel>
-                <Checkbox
-                  checked={form.watch("shuffle")}
-                  className="mt-3"
-                  onCheckedChange={(val) => form.setValue("shuffle", !!val)}
-                />
-                <div className="flex flex-col items-center gap-1 md:flex-row">
-                  <p>Shuffle the order of the NFTs before uploading.</p>
-                  <em>This is an off-chain operation and is not provable.</em>
+
+            <h2 className="text-2xl font-semibold tracking-tight mb-4">
+              Upload NFTs
+            </h2>
+
+            <SelectReveal
+              canCreateDelayedRevealBatch={props.canCreateDelayedRevealBatch}
+              client={props.client}
+              form={form}
+            />
+
+            <div className="h-4" />
+
+            <div className="space-y-6">
+              {form.watch("revealType") === "delayed" && (
+                <DelayedRevealConfiguration client={props.client} form={form} />
+              )}
+
+              {/* shuffle */}
+              <ShuffleNFTsCard
+                isShuffleEnabled={form.watch("shuffle")}
+                onShuffleChange={(val) => form.setValue("shuffle", val)}
+              />
+
+              <div className="space-y-3">
+                <div className="flex justify-end">
+                  <TransactionButton
+                    client={props.client}
+                    disabled={!nftMetadatas.length}
+                    isLoggedIn={props.isLoggedIn}
+                    isPending={form.formState.isSubmitting}
+                    transactionCount={1}
+                    txChainID={props.chainId}
+                    type="submit"
+                  >
+                    {form.formState.isSubmitting
+                      ? `Uploading ${nftMetadatas.length} NFTs`
+                      : `Upload ${nftMetadatas.length} NFTs`}
+                  </TransactionButton>
+                </div>
+
+                <div className="flex justify-end">
+                  <Link
+                    className="text-sm flex items-center gap-2 text-muted-foreground hover:text-foreground"
+                    href="https://portal.thirdweb.com/knowledge-base/troubleshoot/contracts/batch-upload"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    <HelpCircleIcon className="size-4" />
+                    Experiencing issues uploading your files?
+                  </Link>
                 </div>
-              </CheckboxWithLabel>
-              <div className="w-full md:w-[61%]">
-                <TransactionButton
-                  className="mt-4 w-full"
-                  client={props.client}
-                  disabled={!nftMetadatas.length}
-                  isLoggedIn={props.isLoggedIn}
-                  isPending={form.formState.isSubmitting}
-                  transactionCount={1}
-                  txChainID={props.chainId}
-                  type="submit"
-                >
-                  {form.formState.isSubmitting
-                    ? `Uploading ${nftMetadatas.length} NFTs`
-                    : `Upload ${nftMetadatas.length} NFTs`}
-                </TransactionButton>
-                {props.children}
               </div>
-              <Text mt={2} size="body.sm">
-                <UnderlineLink
-                  className="text-primary-500"
-                  href="https://support.thirdweb.com/dashboard/n5evQ4EfEjEifczEQaZ1hL/batch-upload-troubleshooting/5WMQFqfaUTU1C8NM8FtJ2X"
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  Experiencing issues uploading your files?
-                </UnderlineLink>
-              </Text>
-            </>
-          )}
-        </>
-      )}
-    </form>
+            </div>
+          </div>
+        )}
+      </form>
+    </Form>
   );
-};
+}
 
-interface SelectRevealProps {
+function ShuffleNFTsCard(props: {
+  isShuffleEnabled: boolean;
+  onShuffleChange: (val: boolean) => void;
+}) {
+  return (
+    <div className="px-4 lg:px-6 py-8 border rounded-lg bg-card relative">
+      <div className="flex mb-3">
+        <div className="p-2 rounded-full border bg-card">
+          <ShuffleIcon className="size-4 text-muted-foreground" />
+        </div>
+      </div>
+
+      <h3 className="font-semibold text-lg mb-0.5 tracking-tight">
+        Shuffle NFTs
+      </h3>
+
+      <p className="text-sm text-muted-foreground">
+        Shuffle the order of the NFTs before uploading. This is an off-chain
+        operation and is not provable
+      </p>
+
+      <Switch
+        checked={props.isShuffleEnabled}
+        onCheckedChange={(val) => props.onShuffleChange(!!val)}
+        className="absolute right-4 top-4 lg:right-6 lg:top-8"
+      />
+    </div>
+  );
+}
+
+function SelectReveal(props: {
   form: ReturnType<typeof useBatchLazyMintForm>;
   canCreateDelayedRevealBatch: boolean;
   client: ThirdwebClient;
+}) {
+  const { form, canCreateDelayedRevealBatch } = props;
+
+  return (
+    <div>
+      {canCreateDelayedRevealBatch && (
+        <TabButtons
+          containerClassName="mb-8"
+          tabClassName="!text-sm"
+          tabs={[
+            {
+              name: "Reveal upon mint",
+              onClick: () => {
+                form.setValue("revealType", "instant");
+                // reset all fields related to delayed reveal
+                form.resetField("password");
+                form.resetField("confirmPassword");
+                form.resetField("placeHolder");
+              },
+              isActive: form.watch("revealType") === "instant",
+            },
+            {
+              name: "Delayed Reveal",
+              onClick: () => form.setValue("revealType", "delayed"),
+              isActive: form.watch("revealType") === "delayed",
+            },
+          ]}
+        />
+      )}
+
+      {form.watch("revealType") === "instant" && (
+        <div>
+          <h2 className="font-semibold text-xl mb-1 tracking-tight leading-none">
+            Reveal upon mint
+          </h2>
+          <p className="text-muted-foreground text-sm">
+            Collectors will immediately see the final NFT when they complete the
+            minting
+          </p>
+        </div>
+      )}
+
+      {form.watch("revealType") === "delayed" && (
+        <div>
+          <h2 className="font-semibold text-xl mb-1 tracking-tight leading-none">
+            Delayed Reveal
+          </h2>
+          <p className="text-muted-foreground text-sm">
+            Collectors will mint your placeholder image, then you reveal at a
+            later time
+          </p>
+        </div>
+      )}
+    </div>
+  );
 }
 
-const SelectReveal: React.FC<SelectRevealProps> = ({
-  form,
-  client,
-  canCreateDelayedRevealBatch,
-}) => {
+function DelayedRevealConfiguration(props: {
+  form: ReturnType<typeof useBatchLazyMintForm>;
+  client: ThirdwebClient;
+}) {
+  const { form, client } = props;
   const [show, setShow] = useState(false);
-
   const imageUrl = form.watch("placeHolder.image");
 
   return (
-    <Flex flexDir="column">
-      <Flex
-        flexDir={{ base: "column", md: "row" }}
-        gap={{ base: 3, md: 6 }}
-        mb={6}
-      >
-        <SelectOption
-          description="Collectors will immediately see the final NFT when they complete the minting"
-          isActive={form.watch("revealType") === "instant"}
-          name="Reveal upon mint"
-          onClick={() => form.setValue("revealType", "instant")}
-        />
-        <SelectOption
-          description="Collectors will mint your placeholder image, then you reveal at a later time"
-          disabled={!canCreateDelayedRevealBatch}
-          disabledText="This contract doesn't implement Delayed Reveal"
-          isActive={form.watch("revealType") === "delayed"}
-          name="Delayed Reveal"
-          onClick={() => form.setValue("revealType", "delayed")}
-        />
-      </Flex>
-      <div className="flex flex-col gap-3">
-        {form.watch("revealType") === "delayed" && (
-          <>
-            <Heading size="title.sm">Let&apos;s set a password</Heading>
-            <Alert borderRadius="lg" status="warning">
-              <AlertIcon />
-              You&apos;ll need this password to reveal your NFTs. Please save it
-              somewhere safe.
-            </Alert>
-
-            <Flex
-              flexDir={{ base: "column", md: "row" }}
-              gap={{ base: 4, md: 0 }}
-            >
-              <FormControl
-                isInvalid={
-                  !!form.getFieldState("password", form.formState).error
-                }
-                isRequired
-                mr={4}
-              >
-                <FormLabel>Password</FormLabel>
-                <InputGroup>
-                  <Input
-                    {...form.register("password")}
-                    placeholder="Choose password"
-                    type={show ? "text" : "password"}
-                  />
-                  <InputRightElement cursor="pointer">
-                    {show ? (
-                      <EyeIcon
-                        className="size-3"
-                        onClick={() => setShow(!show)}
-                      />
-                    ) : (
-                      <EyeOffIcon
-                        className="size-3"
-                        onClick={() => setShow(!show)}
-                      />
-                    )}
-                  </InputRightElement>
-                </InputGroup>
-
-                <FormErrorMessage>
-                  {
-                    form.getFieldState("password", form.formState).error
-                      ?.message
-                  }
-                </FormErrorMessage>
-              </FormControl>
-              <FormControl
-                isInvalid={
-                  !!form.getFieldState("confirmPassword", form.formState).error
-                }
-                isRequired
-              >
-                <FormLabel>Confirm password</FormLabel>
-                <Input
-                  {...form.register("confirmPassword")}
-                  placeholder="Confirm password"
-                  type="password"
-                />
-                <FormErrorMessage>
-                  {
-                    form.getFieldState("confirmPassword", form.formState).error
-                      ?.message
-                  }
-                </FormErrorMessage>
-              </FormControl>
-            </Flex>
-            <div className="flex flex-col gap-5">
-              <Heading size="title.sm">Placeholder</Heading>
-              <FormControl
-                isInvalid={
-                  !!form.getFieldState("placeHolder.image", form.formState)
-                    .error
-                }
+    <div className="space-y-6">
+      {/* password  */}
+      <div className="border px-4 lg:px-6 py-8 rounded-lg bg-card">
+        <div className="flex mb-3">
+          <div className="p-2 rounded-full border bg-card">
+            <LockKeyholeIcon className="size-4 text-muted-foreground" />
+          </div>
+        </div>
+        <h3 className="font-semibold text-lg mb-0.5 tracking-tight">
+          Set password
+        </h3>
+        <p className="text-sm text-muted-foreground mb-4">
+          You'll need this password to reveal your NFTs. Please save it
+          somewhere safe
+        </p>
+
+        <div className="space-y-5">
+          {/* select password */}
+          <FormItem className="space-y-1">
+            <FormLabel>Password</FormLabel>
+            <div className="relative max-w-md">
+              <Input
+                {...form.register("password")}
+                className="pr-10"
+                type={show ? "text" : "password"}
+              />
+              <Button
+                variant="ghost"
+                className="absolute right-3 top-1/2 -translate-y-1/2 p-2 h-auto text-muted-foreground"
+                onClick={() => setShow(!show)}
               >
-                <FormLabel>Image</FormLabel>
-                <div className="w-auto md:w-[350px]">
-                  <FileInput
-                    accept={{ "image/*": [] }}
-                    className="rounded border border-border transition-all duration-200"
-                    client={client}
-                    setValue={(file) =>
-                      form.setValue("placeHolder.image", file)
-                    }
-                    showUploadButton
-                    value={imageUrl}
-                  />
-                </div>
-                <FormHelperText>
-                  You can optionally upload an image as the placeholder.
-                </FormHelperText>
-                <FormErrorMessage>
-                  {
-                    form.getFieldState("placeHolder.image", form.formState)
-                      .error?.message
-                  }
-                </FormErrorMessage>
-              </FormControl>
-              <FormControl
-                isInvalid={
-                  !!form.getFieldState("placeHolder.name", form.formState).error
+                {show ? (
+                  <EyeIcon className="size-4" />
+                ) : (
+                  <EyeOffIcon className="size-4" />
+                )}
+              </Button>
+            </div>
+            <FormMessage>
+              {form.getFieldState("password", form.formState).error?.message}
+            </FormMessage>
+          </FormItem>
+
+          {/* confirm password */}
+          <FormItem className="space-y-1">
+            <FormLabel>Confirm password</FormLabel>
+            <div className="relative max-w-md">
+              <Input
+                {...form.register("confirmPassword")}
+                className="pr-10"
+                type="password"
+              />
+            </div>
+            <FormMessage>
+              {
+                form.getFieldState("confirmPassword", form.formState).error
+                  ?.message
+              }
+            </FormMessage>
+          </FormItem>
+        </div>
+      </div>
+
+      {/* placeholder */}
+      <div className="border px-4 lg:px-6 py-8 rounded-lg bg-card">
+        <div className="flex mb-3">
+          <div className="p-2 rounded-full border bg-card">
+            <EyeIcon className="size-4 text-muted-foreground" />
+          </div>
+        </div>
+        <h3 className="font-semibold text-lg tracking-tight mb-0.5">
+          Set placeholder metadata
+        </h3>
+        <p className="text-sm text-muted-foreground mb-4">
+          The placeholder metadata will be displayed for all NFTs until you
+          reveal your NFTs
+        </p>
+        <div className="flex flex-col lg:flex-row gap-5">
+          <FormItem className="w-[200px]">
+            <FormLabel>Image</FormLabel>
+            <FileInput
+              accept={{ "image/*": [] }}
+              className="rounded border bg-background transition-all duration-200 "
+              client={client}
+              setValue={(file) => form.setValue("placeHolder.image", file)}
+              value={imageUrl}
+            />
+
+            <FormMessage>
+              {
+                form.getFieldState("placeHolder.image", form.formState).error
+                  ?.message
+              }
+            </FormMessage>
+          </FormItem>
+          <div className="grow space-y-5 flex flex-col">
+            <FormItem>
+              <FormLabel>Name</FormLabel>
+              <Input
+                className="max-w-sm"
+                {...form.register("placeHolder.name")}
+                placeholder="My NFT (Coming soon)"
+              />
+              <FormMessage>
+                {
+                  form.getFieldState("placeHolder.name", form.formState).error
+                    ?.message
                 }
-                isRequired
-              >
-                <FormLabel>Name</FormLabel>
-                <Input
-                  {...form.register("placeHolder.name")}
-                  placeholder="eg. My NFT (Coming soon)"
-                />
-                <FormErrorMessage>
-                  {
-                    form.getFieldState("placeHolder.name", form.formState).error
-                      ?.message
-                  }
-                </FormErrorMessage>
-              </FormControl>
-              <FormControl
-                isInvalid={
-                  !!form.getFieldState("placeHolder.name", form.formState).error
+              </FormMessage>
+            </FormItem>
+            <FormItem className="grow flex flex-col">
+              <FormLabel>Description</FormLabel>
+              <Textarea
+                {...form.register("placeHolder.description")}
+                className="grow"
+                placeholder="Reveal on July 15th!"
+              />
+              <FormMessage>
+                {
+                  form.getFieldState("placeHolder.description", form.formState)
+                    .error?.message
                 }
-              >
-                <FormLabel>Description</FormLabel>
-                <Textarea
-                  {...form.register("placeHolder.description")}
-                  placeholder="eg. Reveal on July 15th!"
-                />
-                <FormErrorMessage>
-                  {
-                    form.getFieldState(
-                      "placeHolder.description",
-                      form.formState,
-                    ).error?.message
-                  }
-                </FormErrorMessage>
-              </FormControl>
-            </div>
-          </>
-        )}
+              </FormMessage>
+            </FormItem>
+          </div>
+        </div>
       </div>
-    </Flex>
+    </div>
   );
-};
+}
diff --git a/apps/dashboard/src/@/components/batch-upload/batch-table.tsx b/apps/dashboard/src/@/components/batch-upload/batch-table.tsx
index 27eccdf211e..9bc9e5180ab 100644
--- a/apps/dashboard/src/@/components/batch-upload/batch-table.tsx
+++ b/apps/dashboard/src/@/components/batch-upload/batch-table.tsx
@@ -1,237 +1,183 @@
-/** biome-ignore-all lint/nursery/noNestedComponentDefinitions: FIXME */
-
-import { FilePreview } from "@app/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/file-preview";
-import {
-  Flex,
-  IconButton,
-  Portal,
-  Select,
-  Table,
-  TableContainer,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from "@chakra-ui/react";
-import {
-  ChevronFirstIcon,
-  ChevronLastIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react";
-import { useMemo } from "react";
-import { type Column, usePagination, useTable } from "react-table";
+import { useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import type { NFTInput } from "thirdweb/utils";
+import { FilePreview } from "@/components/blocks/file-preview";
+import { PaginationButtons } from "@/components/blocks/pagination-buttons";
 import { CodeClient } from "@/components/ui/code/code.client";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 
-interface BatchTableProps {
+type BatchTableProps = {
   data: NFTInput[];
-  portalRef: React.RefObject<HTMLDivElement | null>;
   nextTokenIdToMint?: bigint;
   client: ThirdwebClient;
-}
+};
 
-export const BatchTable: React.FC<BatchTableProps> = ({
+export function BatchTable({
   data,
-  portalRef,
   nextTokenIdToMint,
   client,
-}) => {
-  const columns = useMemo(() => {
-    let cols: Column<NFTInput>[] = [];
-    if (nextTokenIdToMint !== undefined) {
-      cols = cols.concat({
-        accessor: (_row, index) => String(nextTokenIdToMint + BigInt(index)),
-        Header: "Token ID",
-      });
-    }
+}: BatchTableProps) {
+  const [currentPage, setCurrentPage] = useState(1);
+  const pageSize = 10;
 
-    cols = cols.concat([
-      {
-        accessor: (row) => row.image,
-        Cell: ({ cell: { value } }: { cell: { value?: string } }) => (
-          <FilePreview
-            className="size-24 shrink-0 rounded-lg object-contain"
-            client={client}
-            srcOrFile={value}
-          />
-        ),
-        Header: "Image",
-      },
-      {
-        accessor: (row) => row.animation_url,
-        Cell: ({ cell: { value } }: { cell: { value?: string } }) => (
-          <FilePreview
-            className="size-24 shrink-0 rounded-lg"
-            client={client}
-            srcOrFile={value}
-          />
-        ),
-        Header: "Animation Url",
-      },
-      { accessor: (row) => row.name, Header: "Name" },
-      {
-        accessor: (row) => (
-          <ToolTipLabel label={row.description}>
-            <p className="line-clamp-6 whitespace-pre-wrap">
-              {row.description}
-            </p>
-          </ToolTipLabel>
-        ),
-        Header: "Description",
-      },
-      {
-        accessor: (row) => row.attributes || row.properties,
-        // biome-ignore lint/suspicious/noExplicitAny: FIXME
-        Cell: ({ cell }: { cell: any }) =>
-          cell.value ? (
-            <CodeClient
-              code={JSON.stringify(cell.value || {}, null, 2)}
-              lang="json"
-              scrollableClassName="max-w-[300px]"
-            />
-          ) : null,
-        Header: "Attributes",
-      },
-      { accessor: (row) => row.external_url, Header: "External URL" },
-      { accessor: (row) => row.background_color, Header: "Background Color" },
-    ]);
-    return cols;
-  }, [nextTokenIdToMint, client]);
+  const totalPages = Math.ceil(data.length / pageSize);
+  const startIndex = (currentPage - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+  const currentData = data.slice(startIndex, endIndex);
 
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    prepareRow,
-    // Instead of using 'rows', we'll use page,
-    page,
-    // which has only the rows for the active page
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
 
-    // The rest of these things are super handy, too ;)
-    canPreviousPage,
-    canNextPage,
-    pageOptions,
-    pageCount,
-    gotoPage,
-    nextPage,
-    previousPage,
-    setPageSize,
-    state: { pageIndex, pageSize },
-  } = useTable(
-    {
-      columns,
-      data,
-      initialState: {
-        pageIndex: 0,
-        pageSize: 50,
-      },
-    },
-    // will be fixed with @tanstack/react-table v8
-    // eslint-disable-next-line react-compiler/react-compiler
-    usePagination,
-  );
+  const showTokenId = nextTokenIdToMint !== undefined;
+  const showExternalUrl = data.some((row) => row.external_url);
+  const showBackgroundColor = data.some((row) => row.background_color);
+  const showAnimationUrl = data.some((row) => row.animation_url);
+  const showDescription = data.some((row) => row.description);
+  const showAttributes = data.some((row) => row.attributes || row.properties);
+
+  const showPagination = totalPages > 1;
 
   // Render the UI for your table
   return (
-    <Flex flexGrow={1} overflow="auto">
-      <TableContainer className="w-full" maxW="100%">
-        <Table {...getTableProps()}>
-          <Thead>
-            {headerGroups.map((headerGroup, index) => (
-              // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-              <Tr {...headerGroup.getHeaderGroupProps()} key={index}>
-                {headerGroup.headers.map((column, i) => (
-                  // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                  <Th {...column.getHeaderProps()} border="none" key={i}>
-                    <p className="text-muted-foreground">
-                      {column.render("Header")}
-                    </p>
-                  </Th>
-                ))}
-              </Tr>
-            ))}
-          </Thead>
-          <Tbody {...getTableBodyProps()}>
-            {page.map((row, rowIndex) => {
-              prepareRow(row);
+    <div className="rounded-lg border bg-card">
+      <TableContainer className="border-0">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {showTokenId && <TableHead>Token ID</TableHead>}
+              <TableHead>Image</TableHead>
+              {showAnimationUrl && <TableHead>Animation Url</TableHead>}
+              <TableHead>Name</TableHead>
+              {showDescription && (
+                <TableHead className="min-w-[300px]">Description</TableHead>
+              )}
+              {showAttributes && <TableHead>Attributes</TableHead>}
+              {showExternalUrl && <TableHead>External URL</TableHead>}
+              {showBackgroundColor && <TableHead>Background Color</TableHead>}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {currentData.map((row, rowIndex) => {
+              const actualIndex = startIndex + rowIndex;
               return (
-                <Tr
-                  {...row.getRowProps()}
-                  _last={{ borderBottomWidth: 0 }}
-                  borderBottomWidth={1}
-                  // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                  key={rowIndex}
+                <TableRow
+                  className="border-b last:border-b-0"
+                  key={actualIndex}
                 >
-                  {row.cells.map((cell, cellIndex) => {
-                    return (
-                      <Td
-                        {...cell.getCellProps()}
-                        borderBottomWidth="inherit"
-                        borderColor="borderColor"
-                        // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                        key={cellIndex}
-                      >
-                        {cell.render("Cell")}
-                      </Td>
-                    );
-                  })}
-                </Tr>
+                  {/* Token ID */}
+                  {showTokenId && (
+                    <TableCell>
+                      {String(nextTokenIdToMint + BigInt(actualIndex))}
+                    </TableCell>
+                  )}
+
+                  {/* Image */}
+                  <TableCell className="min-w-36">
+                    <FilePreview
+                      className="size-36 shrink-0 rounded-lg object-contain"
+                      client={client}
+                      srcOrFile={
+                        typeof row.image === "string" ||
+                        row.image instanceof File
+                          ? row.image
+                          : undefined
+                      }
+                    />
+                  </TableCell>
+
+                  {/* Animation Url */}
+                  {showAnimationUrl && (
+                    <TableCell className="min-w-36">
+                      <FilePreview
+                        className="size-36 shrink-0 rounded-lg"
+                        client={client}
+                        srcOrFile={
+                          typeof row.animation_url === "string" ||
+                          row.animation_url instanceof File
+                            ? row.animation_url
+                            : undefined
+                        }
+                      />
+                    </TableCell>
+                  )}
+
+                  {/* Name */}
+                  <TableCell>{row.name}</TableCell>
+
+                  {/* Description */}
+                  {showDescription && (
+                    <TableCell className="max-w-xs">
+                      <p className="whitespace-pre-wrap">{row.description}</p>
+                    </TableCell>
+                  )}
+
+                  {/* Attributes */}
+                  {showAttributes && (
+                    <TableCell>
+                      {row.attributes || row.properties ? (
+                        <CodeClient
+                          code={JSON.stringify(
+                            row.attributes || row.properties || {},
+                            null,
+                            2,
+                          )}
+                          lang="json"
+                          scrollableClassName="max-w-[300px] max-h-[400px]"
+                          className="bg-background [&>*]:text-xs"
+                        />
+                      ) : null}
+                    </TableCell>
+                  )}
+
+                  {/* External URL */}
+                  {showExternalUrl && (
+                    <TableCell>
+                      {typeof row.external_url === "string" ? (
+                        <ToolTipLabel label={row.external_url}>
+                          <span>
+                            {row.external_url.slice(0, 20) +
+                              (row.external_url.length > 20 ? "..." : "")}
+                          </span>
+                        </ToolTipLabel>
+                      ) : row.external_url instanceof File ? (
+                        <FilePreview
+                          client={client}
+                          srcOrFile={row.external_url}
+                        />
+                      ) : null}
+                    </TableCell>
+                  )}
+
+                  {/* Background Color */}
+                  {showBackgroundColor && (
+                    <TableCell>{row.background_color}</TableCell>
+                  )}
+                </TableRow>
               );
             })}
-          </Tbody>
+          </TableBody>
         </Table>
       </TableContainer>
-      <Portal containerRef={portalRef}>
-        <div className="flex w-full items-center justify-center">
-          <div className="flex flex-row items-center gap-2">
-            <IconButton
-              aria-label="first page"
-              icon={<ChevronFirstIcon className="size-4" />}
-              isDisabled={!canPreviousPage}
-              onClick={() => gotoPage(0)}
-            />
-            <IconButton
-              aria-label="previous page"
-              icon={<ChevronLeftIcon className="size-4" />}
-              isDisabled={!canPreviousPage}
-              onClick={() => previousPage()}
-            />
-            <p className="whitespace-nowrap">
-              Page <strong>{pageIndex + 1}</strong> of{" "}
-              <strong>{pageOptions.length}</strong>
-            </p>
-            <IconButton
-              aria-label="next page"
-              icon={<ChevronRightIcon className="size-4" />}
-              isDisabled={!canNextPage}
-              onClick={() => nextPage()}
-            />
-            <IconButton
-              aria-label="last page"
-              icon={<ChevronLastIcon className="size-4" />}
-              isDisabled={!canNextPage}
-              onClick={() => gotoPage(pageCount - 1)}
-            />
 
-            <Select
-              onChange={(e) => {
-                setPageSize(Number.parseInt(e.target.value as string, 10));
-              }}
-              value={pageSize}
-            >
-              <option value="25">25</option>
-              <option value="50">50</option>
-              <option value="100">100</option>
-              <option value="250">250</option>
-              <option value="500">500</option>
-            </Select>
-          </div>
+      {showPagination && (
+        <div className="border-t py-5">
+          <PaginationButtons
+            activePage={currentPage}
+            totalPages={totalPages}
+            onPageClick={handlePageChange}
+          />
         </div>
-      </Portal>
-    </Flex>
+      )}
+    </div>
   );
-};
+}
diff --git a/apps/dashboard/src/@/components/batch-upload/lazy-mint-form/select-option.tsx b/apps/dashboard/src/@/components/batch-upload/lazy-mint-form/select-option.tsx
index aa44b250897..8f9173e0060 100644
--- a/apps/dashboard/src/@/components/batch-upload/lazy-mint-form/select-option.tsx
+++ b/apps/dashboard/src/@/components/batch-upload/lazy-mint-form/select-option.tsx
@@ -42,18 +42,18 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
           disabled
             ? "pointer-events-none cursor-not-allowed bg-muted"
             : "cursor-pointer",
-          isActive && "border-primary",
+          isActive && "bg-muted/50 border-active-border",
           className,
         )}
         onClick={onClick}
         {...divProps}
       >
         <div className="flex flex-row justify-between">
-          <div className="flex flex-row items-start">
-            <div className="mt-0.5 mr-2.5 flex h-4 w-4 items-center justify-center rounded-full border border-inverted text-inverted">
+          <div className="flex flex-row items-start gap-4">
+            <div className="flex size-5 shrink-0 items-center justify-center rounded-full border border-inverted text-inverted">
               {isActive && <div className="h-2 w-2 rounded-full bg-inverted" />}
             </div>
-            <div className="ml-4 flex flex-col gap-2 self-start">
+            <div>
               <h4
                 className={cn(
                   "font-semibold text-sm",
@@ -62,7 +62,11 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
               >
                 {name}
               </h4>
-              {description && <p className="mt-1 text-sm">{description}</p>}
+              {description && (
+                <p className="mt-1 text-sm text-muted-foreground">
+                  {description}
+                </p>
+              )}
             </div>
           </div>
           {infoText && (
diff --git a/apps/dashboard/src/@/components/batch-upload/upload-step.tsx b/apps/dashboard/src/@/components/batch-upload/upload-step.tsx
index 8dbcbe4ca68..47d2c0b07a7 100644
--- a/apps/dashboard/src/@/components/batch-upload/upload-step.tsx
+++ b/apps/dashboard/src/@/components/batch-upload/upload-step.tsx
@@ -1,137 +1,333 @@
-import { UploadIcon } from "lucide-react";
+import { ArrowDownToLineIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { CodeClient } from "@/components/ui/code/code.client";
 import { InlineCode } from "@/components/ui/inline-code";
-import { UnorderedList } from "@/components/ui/List/List";
-import { cn } from "@/lib/utils";
+import { TabButtons } from "@/components/ui/tabs";
+import { handleDownload } from "../../../app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/download-file-button";
+import { DropZone } from "../blocks/drop-zone/drop-zone";
 
 interface UploadStepProps {
-  // biome-ignore lint/suspicious/noExplicitAny: FIXME
-  getRootProps: any;
-  // biome-ignore lint/suspicious/noExplicitAny: FIXME
-  getInputProps: any;
   hasFailed: boolean;
-  isDragActive: boolean;
+  onDrop: (acceptedFiles: File[]) => void;
+  reset: () => void;
 }
 
-export const UploadStep: React.FC<UploadStepProps> = ({
-  getRootProps,
-  hasFailed,
-  isDragActive,
-  getInputProps,
-}) => {
+export function UploadStep(props: UploadStepProps) {
+  const [tab, setTab] = useState<"csv" | "json">("csv");
+
   return (
-    <div className="flex flex-col items-center gap-8 md:flex-row">
-      <div className="relative aspect-square w-full md:w-1/2">
-        <div
-          className={cn(
-            "flex h-full cursor-pointer rounded-md border border-border hover:border-blue-500",
-            hasFailed ? "bg-red-200" : "bg-background",
-          )}
-          {...getRootProps()}
-        >
-          <input {...getInputProps()} />
-          <div className="m-auto flex flex-col p-6">
-            <UploadIcon
-              className={cn(
-                "mx-auto mb-2 size-8",
-                hasFailed ? "text-red-500" : "text-gray-600",
-              )}
+    <div className="container px-0 max-w-3xl">
+      <h2 className="text-2xl font-semibold tracking-tight mb-4">
+        Upload NFTs
+      </h2>
+
+      <DropZone
+        className="w-full py-24"
+        onDrop={props.onDrop}
+        isError={props.hasFailed}
+        title={props.hasFailed ? "Invalid files" : "Upload files"}
+        description={
+          props.hasFailed
+            ? "Make sure the uploaded files follow the requirements mentioned below"
+            : "Drag and drop the files or folder"
+        }
+        resetButton={{
+          label: "Reset",
+          onClick: props.reset,
+        }}
+        accept={undefined}
+      />
+
+      <div className="h-8" />
+
+      <div className="w-full">
+        <TabButtons
+          tabs={[
+            {
+              isActive: tab === "csv",
+              name: "CSV",
+              onClick: () => setTab("csv"),
+            },
+            {
+              isActive: tab === "json",
+              name: "JSON",
+              onClick: () => setTab("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'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" />,{" "}
+              {tab === "json" && (
+                <>
+                  ,
+                  <InlineCode code="attributes" />
+                </>
+              )}{" "}
+              and <InlineCode code="supply" />
+              {". "}
+              {tab === "csv" &&
+                "All other columns will be treated as Attributes. For example: See 'eyes', 'nose' below."}
+            </p>
+
+            <ExampleCode
+              code={tab === "csv" ? csv_example_basic : json_example_basic}
+              fileNameWithExtension={
+                tab === "csv" ? "example.csv" : "example.json"
+              }
+              lang={tab === "csv" ? "csv" : "json"}
             />
-            {isDragActive ? (
-              <p className="text-center text-muted-foreground">
-                Drop the files here
-              </p>
-            ) : (
-              <p
-                className={cn(
-                  "text-center leading-[1.2]",
-                  hasFailed ? "text-red-500" : "text-muted-foreground",
-                )}
-              >
-                {hasFailed
-                  ? `No valid CSV or JSON file found. Please make sure your NFT metadata includes at least a "name" field and try again.`
-                  : "Drag & Drop files or folders here, or click to select files"}
-              </p>
-            )}
-          </div>
+          </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
+                }
+                fileNameWithExtension={
+                  tab === "csv"
+                    ? "example-with-maps.csv"
+                    : "example-with-maps.json"
+                }
+                lang={tab === "csv" ? "csv" : "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
+                }
+                fileNameWithExtension={
+                  tab === "csv"
+                    ? "example-with-ipfs.csv"
+                    : "example-with-ipfs.json"
+                }
+                lang={tab === "csv" ? "csv" : "json"}
+              />
+            </p>
+          </Section>
         </div>
       </div>
-      <div className="flex w-full flex-col gap-2 md:w-1/2">
-        <p className="text-lg">Requirements</p>
-        <UnorderedList>
-          <li>
-            Files <em>must</em> contain one .csv or .json file with metadata. -{" "}
-            <a
-              className="text-link-foreground hover:text-foreground"
-              download
-              href="/assets/examples/example.csv"
-            >
-              Download example.csv
-            </a>
-            .{" "}
-            <a
-              className="text-link-foreground hover:text-foreground"
-              download
-              href="/assets/examples/example.json"
-            >
-              Download example.json
-            </a>
-            .
-          </li>
-          <li>
-            The csv <em>must</em> have a <InlineCode code="name" /> column,
-            which defines the name of the NFT.
-          </li>
-          <li>
-            Asset names <em>must</em> be sequential 0,1,2,3...n.[extension]. It
-            doesn&apos;t matter at what number you begin. (Example:{" "}
-            <InlineCode code="131.png" />, <InlineCode code="132.png" />
-            ).
-          </li>
-          <li>
-            Make sure to drag and drop the CSV/JSON and the images{" "}
-            <strong>at the same time</strong>.
-          </li>
-        </UnorderedList>
-        <p className="mt-4 text-lg">Options</p>
-        <UnorderedList>
-          <li>
-            Images and other file types can be used in combination.
-            <br />
-            <small>
-              They both have to follow the asset naming convention above.
-              (Example: <InlineCode code="0.png" /> and{" "}
-              <InlineCode code="0.mp4" />,<InlineCode code="1.png" /> and{" "}
-              <InlineCode code="1.glb" />, etc.)
-            </small>
-          </li>
-          <li>
-            When uploading files, we will upload them and pin them to IPFS
-            automatically for you. If you already have the files uploaded, you
-            can add an <InlineCode code="image" /> and/or
-            <InlineCode code="animation_url" /> column and add the IPFS hashes
-            there.{" "}
-            <a
-              className="text-link-foreground hover:text-foreground"
-              download
-              href="/assets/examples/example-with-ipfs.csv"
-            >
-              Download example.csv
-            </a>
-          </li>
-          <li>
-            If you want to make your media files map to your NFTs, you can add
-            the name of your files to the <InlineCode code="image" /> and
-            <InlineCode code="animation_url" /> column.{" "}
-            <a
-              className="text-link-foreground hover:text-foreground"
-              download
-              href="/assets/examples/example-with-maps.csv"
-            >
-              Download example.csv
-            </a>
-          </li>
-        </UnorderedList>
+    </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>
+  );
+}
+
+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-card"
+      />
+
+      <Button
+        className="absolute top-3.5 right-14 mt-[1px] h-auto bg-background p-2"
+        onClick={() => {
+          handleDownload({
+            fileContent: props.code,
+            fileFormat: props.lang === "csv" ? "text/csv" : "application/json",
+            fileNameWithExtension: props.fileNameWithExtension,
+          });
+        }}
+        size="sm"
+        variant="outline"
+      >
+        <ArrowDownToLineIcon className="size-3" />
+      </Button>
     </div>
   );
-};
+}
+
+const csv_example_basic = `\
+name,description,background_color,eyes,nose
+Token 0 Name,Token 0 Description,#0098EE,red,green
+Token 1 Name,Token 1 Description,#0098EE,blue,yellow`;
+
+const json_example_basic = `\
+[
+  {
+    "name": "Token 0 Name",
+    "description": "Token 0 Description",
+    "background_color": "#0098EE",
+    "attributes": [
+      {
+        "trait_type": "eyes",
+        "value": "red"
+      },
+      {
+        "trait_type": "nose",
+        "value": "green"
+      }
+    ]
+  },
+  {
+    "name": "Token 1 Name",
+    "description": "Token 1 Description",
+    "background_color": "#0098EE",
+    "attributes": [
+      {
+        "trait_type": "eyes",
+        "value": "blue"
+      },
+      {
+        "trait_type": "nose",
+        "value": "yellow"
+      }
+    ]
+  }
+]`;
+
+const csv_with_image_link_example = `\
+name,description,image,animation_url,background_color,eyes,nose
+Token 0 Name,Token 0 Description,ipfs://ipfsHash/0,ipfs://ipfsHash/0,#0098EE,red,green
+Token 1 Name,Token 1 Description,ipfs://ipfsHash/1,ipfs://ipfsHash/1,#0098EE,blue,yellow`;
+
+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": "eyes",
+        "value": "red"
+      },
+      {
+        "trait_type": "nose",
+        "value": "green"
+      }
+    ]
+  },
+  {
+    "name": "Token 1 Name",
+    "description": "Token 1 Description",
+    "image": "ipfs://ipfsHash/1",
+    "animation_url": "ipfs://ipfsHash/1",
+    "attributes": [
+      {
+        "trait_type": "eyes",
+        "value": "blue"
+      },
+      {
+        "trait_type": "nose",
+        "value": "yellow"
+      }
+    ]
+  }
+]`;
+
+const csv_with_image_number_example = `\
+name,description,image,animation_url,background_color,eyes,nose
+Token 0 Name,Token 0 Description,0.png,0.mp4,#0098EE,red,green
+Token 1 Name,Token 1 Description,1.png,1.mp4,#0098EE,blue,yellow`;
+
+const json_with_image_number_example = `\
+[
+  {
+    "name": "Token 0 Name",
+    "description": "Token 0 Description",
+    "image": "0.png",
+    "animation_url": "0.mp4",
+    "attributes": [
+      {
+        "trait_type": "eyes",
+        "value": "red"
+      },
+      {
+        "trait_type": "nose",
+        "value": "green"
+      }
+    ]
+  },
+  {
+    "name": "Token 1 Name",
+    "description": "Token 1 Description",
+    "image": "1.png",
+    "animation_url": "1.mp4",
+    "attributes": [
+      {
+        "trait_type": "eyes",
+        "value": "blue"
+      },
+      {
+        "trait_type": "nose",
+        "value": "yellow"
+      }
+    ]
+  }
+]`;
diff --git a/apps/dashboard/src/@/components/blocks/FileInput.tsx b/apps/dashboard/src/@/components/blocks/FileInput.tsx
index 4e3efe0b309..5f734d4b3cf 100644
--- a/apps/dashboard/src/@/components/blocks/FileInput.tsx
+++ b/apps/dashboard/src/@/components/blocks/FileInput.tsx
@@ -1,4 +1,3 @@
-import { FilePreview } from "@app/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/file-preview";
 import { FilePlusIcon, UploadIcon } from "lucide-react";
 import { useCallback, useEffect, useRef } from "react";
 import {
@@ -8,6 +7,7 @@ import {
   useDropzone,
 } from "react-dropzone";
 import type { ThirdwebClient } from "thirdweb";
+import { FilePreview } from "@/components/blocks/file-preview";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/file-preview.tsx b/apps/dashboard/src/@/components/blocks/file-preview.tsx
similarity index 81%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/file-preview.tsx
rename to apps/dashboard/src/@/components/blocks/file-preview.tsx
index 6cc05691eaa..a28e1697261 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/file-preview.tsx
+++ b/apps/dashboard/src/@/components/blocks/file-preview.tsx
@@ -37,7 +37,12 @@ export function FilePreview(props: {
 
   if (!objectUrl) {
     return (
-      <div className={cn("flex items-center justify-center", props.className)}>
+      <div
+        className={cn(
+          "flex items-center justify-center bg-accent",
+          props.className,
+        )}
+      >
         <ImageOffIcon className="size-6 text-muted-foreground" />
       </div>
     );
@@ -56,7 +61,10 @@ export function FilePreview(props: {
 
   return (
     <MediaRenderer
-      className={cn(props.className, "[&>div]:!bg-muted")}
+      className={cn(
+        props.className,
+        "[&>div]:!bg-accent [&_a]:!text-muted-foreground [&_a]:!no-underline [&_svg]:!size-6 [&_svg]:!text-muted-foreground relative overflow-hidden",
+      )}
       client={props.client}
       src={objectUrl}
     />
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/batch-lazy-mint-button.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/batch-lazy-mint-button.tsx
index 77e9943297e..846555b4855 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/batch-lazy-mint-button.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/batch-lazy-mint-button.tsx
@@ -60,59 +60,61 @@ export const BatchLazyMintButton: React.FC<BatchLazyMintButtonProps> = ({
             Batch Upload
           </Button>
         </SheetTrigger>
-        <SheetContent className="min-w-full overflow-y-auto">
-          <SheetHeader>
-            <SheetTitle className="text-left">Upload NFTs</SheetTitle>
+        <SheetContent className="!w-full !max-w-full overflow-y-auto p-0">
+          <SheetHeader className="sr-only">
+            <SheetTitle>Upload NFTs</SheetTitle>
           </SheetHeader>
-          <BatchLazyMint
-            canCreateDelayedRevealBatch={canCreateDelayedRevealBatch}
-            chainId={contract.chain.id}
-            client={contract.client}
-            isLoggedIn={isLoggedIn}
-            nextTokenIdToMint={nextTokenIdToMintQuery.data || 0n}
-            onSubmit={async ({ revealType, data }) => {
-              try {
-                const tx = (() => {
-                  switch (true) {
-                    // lazy mint erc721
-                    case revealType === "instant" && isErc721: {
-                      return ERC721Ext.lazyMint({
-                        contract,
-                        nfts: data.metadatas,
-                      });
+          <div className="p-4 lg:p-6">
+            <BatchLazyMint
+              canCreateDelayedRevealBatch={canCreateDelayedRevealBatch}
+              chainId={contract.chain.id}
+              client={contract.client}
+              isLoggedIn={isLoggedIn}
+              nextTokenIdToMint={nextTokenIdToMintQuery.data || 0n}
+              onSubmit={async ({ revealType, data }) => {
+                try {
+                  const tx = (() => {
+                    switch (true) {
+                      // lazy mint erc721
+                      case revealType === "instant" && isErc721: {
+                        return ERC721Ext.lazyMint({
+                          contract,
+                          nfts: data.metadatas,
+                        });
+                      }
+                      // lazy mint erc1155
+                      case revealType === "instant" && !isErc721: {
+                        return ERC1155Ext.lazyMint({
+                          contract,
+                          nfts: data.metadatas,
+                        });
+                      }
+                      // delayed reveal erc721
+                      case revealType === "delayed": {
+                        return ERC721Ext.createDelayedRevealBatch({
+                          contract,
+                          metadata: data.metadata,
+                          password: data.password,
+                          placeholderMetadata: data.placeholderMetadata,
+                        });
+                      }
+                      default: {
+                        throw new Error("Invalid reveal type");
+                      }
                     }
-                    // lazy mint erc1155
-                    case revealType === "instant" && !isErc721: {
-                      return ERC1155Ext.lazyMint({
-                        contract,
-                        nfts: data.metadatas,
-                      });
-                    }
-                    // delayed reveal erc721
-                    case revealType === "delayed": {
-                      return ERC721Ext.createDelayedRevealBatch({
-                        contract,
-                        metadata: data.metadata,
-                        password: data.password,
-                        placeholderMetadata: data.placeholderMetadata,
-                      });
-                    }
-                    default: {
-                      throw new Error("Invalid reveal type");
-                    }
-                  }
-                })();
+                  })();
 
-                await sendTxMutation.mutateAsync(tx);
+                  await sendTxMutation.mutateAsync(tx);
 
-                txNotifications.onSuccess();
-                setOpen(false);
-              } catch (error) {
-                console.error(error);
-                txNotifications.onError(error);
-              }
-            }}
-          />
+                  txNotifications.onSuccess();
+                  setOpen(false);
+                } catch (error) {
+                  console.error(error);
+                  txNotifications.onError(error);
+                }
+              }}
+            />
+          </div>
         </SheetContent>
       </Sheet>
     </MinterOnly>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/download-file-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/download-file-button.tsx
index 9ba01a49a86..df9e55c4a05 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/download-file-button.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/download-file-button.tsx
@@ -1,5 +1,6 @@
 import { ArrowDownToLineIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
 export function handleDownload(params: {
   fileContent: string;
@@ -22,10 +23,14 @@ export function DownloadFileButton(props: {
   fileNameWithExtension: string;
   fileFormat: "text/csv" | "application/json";
   label: string;
+  variant?: "default" | "outline";
+  className?: string;
+  iconClassName?: string;
 }) {
   return (
     <Button
-      className="gap-2"
+      className={cn("gap-2", props.className)}
+      variant={props.variant}
       onClick={() => {
         handleDownload({
           fileContent: props.fileContent,
@@ -35,7 +40,7 @@ export function DownloadFileButton(props: {
       }}
       size="sm"
     >
-      <ArrowDownToLineIcon className="size-4" />
+      <ArrowDownToLineIcon className={cn("size-4", props.iconClassName)} />
       {props.label}
     </Button>
   );
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/launch/launch-nft.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/launch/launch-nft.tsx
index cf2ef98a36e..10107fc5f09 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/launch/launch-nft.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/launch/launch-nft.tsx
@@ -19,6 +19,7 @@ import {
   reportAssetCreationSuccessful,
 } from "@/analytics/report";
 import type { Team } from "@/api/team";
+import { FilePreview } from "@/components/blocks/file-preview";
 import { GatedSwitch } from "@/components/blocks/GatedSwitch";
 import type { MultiStepState } from "@/components/blocks/multi-step-status/multi-step-status";
 import { MultiStepStatus } from "@/components/blocks/multi-step-status/multi-step-status";
@@ -36,7 +37,6 @@ import {
 import { Skeleton } from "@/components/ui/skeleton";
 import { parseError } from "@/utils/errorParser";
 import { ChainOverview } from "../../_common/chain-overview";
-import { FilePreview } from "../../_common/file-preview";
 import { StepCard } from "../../_common/step-card";
 import { StorageErrorPlanUpsell } from "../../_common/storage-error-upsell";
 import type {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/upload-nfts/batch-upload/batch-upload-nfts.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/upload-nfts/batch-upload/batch-upload-nfts.tsx
index 0bcaa3b0a06..d674fabfe6d 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/upload-nfts/batch-upload/batch-upload-nfts.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/upload-nfts/batch-upload/batch-upload-nfts.tsx
@@ -14,6 +14,7 @@ import {
 } from "thirdweb";
 import { MediaRenderer } from "thirdweb/react";
 import { DropZone } from "@/components/blocks/drop-zone/drop-zone";
+import { FilePreview } from "@/components/blocks/file-preview";
 import { PaginationButtons } from "@/components/blocks/pagination-buttons";
 import { TokenSelector } from "@/components/blocks/TokenSelector";
 import { Badge } from "@/components/ui/badge";
@@ -32,7 +33,6 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
-import { FilePreview } from "../../../_common/file-preview";
 import { nftWithPriceSchema } from "../schema";
 import { BatchUploadInstructions } from "./batch-upload-instructions";
 import {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/launch/launch-token.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/launch/launch-token.tsx
index c3c552351ed..6f3478035f2 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/launch/launch-token.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/launch/launch-token.tsx
@@ -13,6 +13,7 @@ import {
   reportAssetCreationSuccessful,
 } from "@/analytics/report";
 import type { Team } from "@/api/team";
+import { FilePreview } from "@/components/blocks/file-preview";
 import { GatedSwitch } from "@/components/blocks/GatedSwitch";
 import {
   type MultiStepState,
@@ -30,7 +31,6 @@ import {
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import { parseError } from "@/utils/errorParser";
 import { ChainOverview } from "../../_common/chain-overview";
-import { FilePreview } from "../../_common/file-preview";
 import { StepCard } from "../../_common/step-card";
 import { StorageErrorPlanUpsell } from "../../_common/storage-error-upsell";
 import type { CreateAssetFormValues } from "../_common/form";