diff --git a/apps/dashboard/public/assets/examples/snapshot-with-maxclaimable.csv b/apps/dashboard/public/assets/examples/snapshot-with-maxclaimable.csv
deleted file mode 100644
index 6db267cebd0..00000000000
--- a/apps/dashboard/public/assets/examples/snapshot-with-maxclaimable.csv
+++ /dev/null
@@ -1,3 +0,0 @@
-address,maxClaimable
-0x0000000000000000000000000000000000000000,2
-0x000000000000000000000000000000000000dEaD,5
\ No newline at end of file
diff --git a/apps/dashboard/public/assets/examples/snapshot-with-overrides.csv b/apps/dashboard/public/assets/examples/snapshot-with-overrides.csv
deleted file mode 100644
index 29c581674f2..00000000000
--- a/apps/dashboard/public/assets/examples/snapshot-with-overrides.csv
+++ /dev/null
@@ -1,3 +0,0 @@
-address,maxClaimable,price,currencyAddress
-0x0000000000000000000000000000000000000000,2,0.1,0x0000000000000000000000000000000000000000
-0x000000000000000000000000000000000000dEaD,5,2.5,0x0000000000000000000000000000000000000000
\ No newline at end of file
diff --git a/apps/dashboard/public/assets/examples/snapshot.csv b/apps/dashboard/public/assets/examples/snapshot.csv
deleted file mode 100644
index 7a2c24783ce..00000000000
--- a/apps/dashboard/public/assets/examples/snapshot.csv
+++ /dev/null
@@ -1,3 +0,0 @@
-address
-0x0000000000000000000000000000000000000000
-0x000000000000000000000000000000000000dEaD
\ No newline at end of file
diff --git a/apps/dashboard/src/@/components/blocks/code/downloadable-code.tsx b/apps/dashboard/src/@/components/blocks/code/downloadable-code.tsx
index bd25fb51343..b72009b2743 100644
--- a/apps/dashboard/src/@/components/blocks/code/downloadable-code.tsx
+++ b/apps/dashboard/src/@/components/blocks/code/downloadable-code.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { ArrowDownToLineIcon } from "lucide-react";
+import { ArrowDownToLineIcon, FileTextIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { CodeClient } from "@/components/ui/code/code.client";
 import { handleDownload } from "../download-file-button";
@@ -10,27 +10,36 @@ export function DownloadableCode(props: {
   fileNameWithExtension: string;
 }) {
   return (
-    <div className="!my-3 relative">
-      <CodeClient
-        code={props.code}
-        lang={props.lang}
-        scrollableClassName="max-h-[300px] bg-background"
-      />
-
-      <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 className="!my-5 bg-card">
+      <p className="text-sm text-muted-foreground border border-b-0 px-4 py-3 pr-3.5 rounded-lg rounded-b-none flex items-center justify-between">
+        <span className="flex items-center gap-1.5">
+          <FileTextIcon className="size-3.5" />
+          {props.fileNameWithExtension}
+        </span>
+        <Button
+          className="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>
+      </p>
+      <div className="relative">
+        <CodeClient
+          code={props.code}
+          lang={props.lang}
+          scrollableClassName="max-h-[300px] bg-background bg-card"
+          className="rounded-t-none"
+        />
+      </div>
     </div>
   );
 }
diff --git a/apps/dashboard/src/@/components/blocks/drop-zone/drop-zone.tsx b/apps/dashboard/src/@/components/blocks/drop-zone/drop-zone.tsx
index 519e456254e..054d60f41a2 100644
--- a/apps/dashboard/src/@/components/blocks/drop-zone/drop-zone.tsx
+++ b/apps/dashboard/src/@/components/blocks/drop-zone/drop-zone.tsx
@@ -26,7 +26,7 @@ export function DropZone(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",
+        "flex cursor-pointer items-center justify-center rounded-md border border-dashed bg-card py-10 hover:border-active-border px-4",
         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,
diff --git a/apps/dashboard/src/@/components/tx-button/index.tsx b/apps/dashboard/src/@/components/tx-button/index.tsx
index 763c4de54f6..fe428441dbd 100644
--- a/apps/dashboard/src/@/components/tx-button/index.tsx
+++ b/apps/dashboard/src/@/components/tx-button/index.tsx
@@ -28,7 +28,7 @@ type TransactionButtonProps = Omit<ButtonProps, "variant"> & {
   transactionCount: number | undefined; // support for unknown number of tx count
   isPending: boolean;
   txChainID: number;
-  variant?: "destructive" | "primary" | "default";
+  variant?: "destructive" | "primary" | "default" | "outline";
   isLoggedIn: boolean;
   checkBalance?: boolean;
   client: ThirdwebClient;
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimPriceInput.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimPriceInput.tsx
index ff2a74a28ad..c7a974bdcde 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimPriceInput.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimPriceInput.tsx
@@ -1,47 +1,40 @@
-import { Box, Flex } from "@chakra-ui/react";
 import { NATIVE_TOKEN_ADDRESS } from "thirdweb";
 import { CurrencySelector } from "@/components/blocks/CurrencySelector";
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
+import { cn } from "@/lib/utils";
 import { PriceInput } from "../../price-input";
 import { useClaimConditionsFormContext } from "..";
-import { CustomFormControl } from "../common";
 
 /**
  * Allows the user to select how much they want to charge to claim each NFT
  */
 export const ClaimPriceInput = (props: { contractChainId: number }) => {
-  const {
-    formDisabled,
-    isErc20,
-    form,
-    phaseIndex,
-    field,
-    isColumn,
-    claimConditionType,
-  } = useClaimConditionsFormContext();
+  const { formDisabled, isErc20, form, phaseIndex, field, claimConditionType } =
+    useClaimConditionsFormContext();
 
   if (claimConditionType === "creator") {
     return null;
   }
 
   return (
-    <CustomFormControl
-      disabled={formDisabled}
-      error={
+    <FormFieldSetup
+      isRequired={false}
+      errorMessage={
         form.getFieldState(`phases.${phaseIndex}.price`, form.formState).error
+          ?.message
       }
       label={`How much do you want to charge to claim each ${
         isErc20 ? "token" : "NFT"
       }?`}
     >
-      <Flex flexDir={{ base: "column", md: "row" }} gap={2}>
-        <Box minW="70px" w={{ base: "100%", md: "50%" }}>
-          <PriceInput
-            onChange={(val) => form.setValue(`phases.${phaseIndex}.price`, val)}
-            value={field.price?.toString() || ""}
-            w="full"
-          />
-        </Box>
-        <Box w={{ base: "100%", md: isColumn ? "50%" : "100%" }}>
+      <div className={cn("flex flex-col md:flex-row gap-3")}>
+        <PriceInput
+          onChange={(val) => form.setValue(`phases.${phaseIndex}.price`, val)}
+          value={field.price?.toString() || ""}
+          disabled={formDisabled}
+          className="max-w-48"
+        />
+        <div className="grow max-w-md">
           <CurrencySelector
             contractChainId={props.contractChainId}
             isDisabled={formDisabled}
@@ -53,8 +46,8 @@ export const ClaimPriceInput = (props: { contractChainId: number }) => {
             }
             value={field?.currencyAddress || NATIVE_TOKEN_ADDRESS}
           />
-        </Box>
-      </Flex>
-    </CustomFormControl>
+        </div>
+      </div>
+    </FormFieldSetup>
   );
 };
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimerSelection.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimerSelection.tsx
index 932e065a672..09685ce1210 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimerSelection.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimerSelection.tsx
@@ -1,8 +1,15 @@
-import { Box, Flex, Select } from "@chakra-ui/react";
 import { UploadIcon } from "lucide-react";
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { Button } from "@/components/ui/button";
-import { useClaimConditionsFormContext } from "..";
-import { CustomFormControl } from "../common";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import { useClaimConditionsFormContext } from "../index";
 
 /**
  * Allows the user to
@@ -19,12 +26,11 @@ export const ClaimerSelection = () => {
     isErc20,
     setOpenSnapshotIndex: setOpenIndex,
     isAdmin,
-    isColumn,
     claimConditionType,
   } = useClaimConditionsFormContext();
 
-  const handleClaimerChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const val = e.currentTarget.value as "any" | "specific" | "overrides";
+  const handleClaimerChange = (value: string) => {
+    const val = value as "any" | "specific" | "overrides";
 
     if (val === "any") {
       form.setValue(`phases.${phaseIndex}.snapshot`, undefined);
@@ -80,79 +86,69 @@ export const ClaimerSelection = () => {
         : `Who can claim ${isErc20 ? "tokens" : "NFTs"} during this phase?`;
 
   return (
-    <CustomFormControl
-      disabled={formDisabled}
-      error={
+    <FormFieldSetup
+      errorMessage={
         form.getFieldState(`phases.${phaseIndex}.snapshot`, form.formState)
-          .error
+          ?.error?.message
       }
       helperText={helperText}
       label={label}
+      isRequired={false}
     >
-      <Flex direction={{ base: "column", md: "row" }} gap={4}>
+      <div className="flex flex-col md:flex-row gap-4">
         {claimConditionType === "overrides" ||
         claimConditionType === "specific" ? null : (
           <Select
-            isDisabled={formDisabled}
-            onChange={handleClaimerChange}
+            disabled={formDisabled}
+            onValueChange={handleClaimerChange}
             value={dropType}
-            w={{ base: "100%", md: "50%" }}
           >
-            <option value="any">Any wallet</option>
-            <option value="overrides">Any wallet (with overrides)</option>
-            <option value="specific">Only specific wallets</option>
+            <SelectTrigger className="w-full md:w-1/2">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="any">Any wallet</SelectItem>
+              <SelectItem value="overrides">
+                Any wallet (with overrides)
+              </SelectItem>
+              <SelectItem value="specific">Only specific wallets</SelectItem>
+            </SelectContent>
           </Select>
         )}
 
         {/* Edit or See Snapshot */}
         {field.snapshot ? (
-          <Flex
-            direction={{
-              base: "column",
-              md: isColumn ? "column" : "row",
-            }}
-            gap={1.5}
-          >
+          <div className="flex items-center gap-3">
             {/* disable the "Edit" button when form is disabled, but not when it's a "See" button */}
             <Button
               className="gap-2 rounded-md"
               disabled={disabledSnapshotButton}
               onClick={() => setOpenIndex(phaseIndex)}
-              variant="primary"
+              size="sm"
             >
               {isAdmin ? "Edit" : "See"} Claimer Snapshot
               <UploadIcon className="size-4" />
             </Button>
 
-            <Flex
-              _light={{
-                color: field.snapshot?.length === 0 ? "red.500" : "green.500",
-              }}
-              align="center"
-              color={field.snapshot?.length === 0 ? "red.400" : "green.400"}
-              direction="row"
-              gap={2}
-              justify="center"
-              ml={2}
-              opacity={disabledSnapshotButton ? 0.5 : 1}
+            <div
+              className={cn(
+                "flex gap-2 items-center",
+                field.snapshot?.length === 0
+                  ? "text-muted-foreground"
+                  : "text-green-600 dark:text-green-500",
+                disabledSnapshotButton ? "opacity-50" : "",
+              )}
             >
-              <p>
-                ●{" "}
-                <strong>
-                  {field.snapshot?.length} address
-                  {field.snapshot?.length === 1 ? "" : "es"}
-                </strong>{" "}
-                in snapshot
-              </p>
-            </Flex>
-          </Flex>
-        ) : (
-          <Box
-            display={{ base: "none", md: "block" }}
-            w={{ base: "100%", md: "50%" }}
-          />
-        )}
-      </Flex>
-    </CustomFormControl>
+              <div className="size-2 bg-current rounded-full" />
+              <span className="text-sm">
+                {field.snapshot?.length}{" "}
+                {field.snapshot?.length === 1 ? "address" : "addresses"} in
+                snapshot
+              </span>
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </FormFieldSetup>
   );
 };
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/CreatorInput.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/CreatorInput.tsx
index b5510fcea4b..e4c220a49b8 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/CreatorInput.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/CreatorInput.tsx
@@ -1,6 +1,6 @@
 import { useActiveAccount } from "thirdweb/react";
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { Input } from "@/components/ui/input";
-import { CustomFormControl } from "../common";
 import { useClaimConditionsFormContext } from "../index";
 
 /**
@@ -14,8 +14,7 @@ interface CreatorInputProps {
 export const CreatorInput: React.FC<CreatorInputProps> = ({
   creatorAddress,
 }) => {
-  const { formDisabled, claimConditionType, isAdmin } =
-    useClaimConditionsFormContext();
+  const { claimConditionType, isAdmin } = useClaimConditionsFormContext();
   const walletAddress = useActiveAccount()?.address;
 
   if (claimConditionType !== "creator") {
@@ -23,8 +22,9 @@ export const CreatorInput: React.FC<CreatorInputProps> = ({
   }
 
   return (
-    <CustomFormControl
-      disabled={formDisabled}
+    <FormFieldSetup
+      isRequired={false}
+      errorMessage={undefined}
       helperText={
         <>
           This wallet address will be able to indefinitely claim.{" "}
@@ -34,7 +34,12 @@ export const CreatorInput: React.FC<CreatorInputProps> = ({
       }
       label="Creator address"
     >
-      <Input disabled readOnly value={creatorAddress || walletAddress} />
-    </CustomFormControl>
+      <Input
+        disabled
+        readOnly
+        value={creatorAddress || walletAddress}
+        className="disabled:opacity-100 max-w-sm"
+      />
+    </FormFieldSetup>
   );
 };
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/MaxClaimablePerWalletInput.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/MaxClaimablePerWalletInput.tsx
index 50b6362804e..c9dc75a2f03 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/MaxClaimablePerWalletInput.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/MaxClaimablePerWalletInput.tsx
@@ -1,6 +1,6 @@
-import Link from "next/link";
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
+import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import { QuantityInputWithUnlimited } from "../../quantity-input-with-unlimited";
-import { CustomFormControl } from "../common";
 import { useClaimConditionsFormContext } from "../index";
 
 /**
@@ -23,13 +23,13 @@ export const MaxClaimablePerWalletInput: React.FC = () => {
   }
 
   return (
-    <CustomFormControl
-      disabled={formDisabled}
-      error={
+    <FormFieldSetup
+      isRequired={true}
+      errorMessage={
         form.getFieldState(
           `phases.${phaseIndex}.maxClaimablePerWallet`,
           form.formState,
-        ).error
+        ).error?.message
       }
       helperText={
         <>
@@ -39,14 +39,13 @@ export const MaxClaimablePerWalletInput: React.FC = () => {
             : ". "}
           Limits are set per wallets and not per user, sophisticated actors
           could get around wallet restrictions.{" "}
-          <Link
-            className="text-blue-500"
+          <UnderlineLink
             href="https://portal.thirdweb.com/contracts/design/Drop#sybil-attacks"
             rel="noopener noreferrer"
             target="_blank"
           >
             Learn more
-          </Link>
+          </UnderlineLink>
           .
         </>
       }
@@ -66,6 +65,6 @@ export const MaxClaimablePerWalletInput: React.FC = () => {
         }
         value={field?.maxClaimablePerWallet?.toString() || "0"}
       />
-    </CustomFormControl>
+    </FormFieldSetup>
   );
 };
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/MaxClaimableSupplyInput.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/MaxClaimableSupplyInput.tsx
index 5af987c32ef..bd751bf67ad 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/MaxClaimableSupplyInput.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/MaxClaimableSupplyInput.tsx
@@ -1,6 +1,6 @@
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { QuantityInputWithUnlimited } from "../../quantity-input-with-unlimited";
 import { useClaimConditionsFormContext } from "..";
-import { CustomFormControl } from "../common";
 
 /**
  * Allows the user to select how many NFTs will be dropped in a phase
@@ -21,13 +21,13 @@ export const MaxClaimableSupplyInput: React.FC = () => {
   }
 
   return (
-    <CustomFormControl
-      disabled={formDisabled}
-      error={
+    <FormFieldSetup
+      isRequired={true}
+      errorMessage={
         form.getFieldState(
           `phases.${phaseIndex}.maxClaimableSupply`,
           form.formState,
-        ).error
+        ).error?.message
       }
       label={`How many ${
         isErc20 ? "tokens" : "NFTs"
@@ -45,6 +45,6 @@ export const MaxClaimableSupplyInput: React.FC = () => {
         }
         value={field.maxClaimableSupply?.toString() || "0"}
       />
-    </CustomFormControl>
+    </FormFieldSetup>
   );
 };
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/PhaseNameInput.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/PhaseNameInput.tsx
index 0ee9fe6647e..c2051363c60 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/PhaseNameInput.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/PhaseNameInput.tsx
@@ -1,5 +1,5 @@
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { Input } from "@/components/ui/input";
-import { CustomFormControl } from "../common";
 import { useClaimConditionsFormContext } from "../index";
 
 /**
@@ -12,13 +12,15 @@ export const PhaseNameInput: React.FC = () => {
   const inputValue = field.metadata?.name;
 
   return (
-    <CustomFormControl
-      disabled={formDisabled}
+    <FormFieldSetup
+      isRequired={false}
+      errorMessage={undefined}
       helperText="This does not affect how your claim phase functions and is for organizational purposes only."
       label="Name"
     >
       <Input
         disabled={formDisabled}
+        className="max-w-xs"
         onChange={(e) => {
           form.setValue(`phases.${phaseIndex}.metadata.name`, e.target.value);
         }}
@@ -26,6 +28,6 @@ export const PhaseNameInput: React.FC = () => {
         type="text"
         value={inputValue}
       />
-    </CustomFormControl>
+    </FormFieldSetup>
   );
 };
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/PhaseStartTimeInput.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/PhaseStartTimeInput.tsx
index f5abb36f93e..5ede81c888f 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/PhaseStartTimeInput.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/PhaseStartTimeInput.tsx
@@ -1,6 +1,6 @@
-import { Input } from "@chakra-ui/react";
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
+import { Input } from "@/components/ui/input";
 import { toDateTimeLocal } from "@/utils/date-utils";
-import { CustomFormControl } from "../common";
 import { useClaimConditionsFormContext } from "../index";
 
 /**
@@ -10,16 +10,18 @@ export const PhaseStartTimeInput: React.FC = () => {
   const { form, phaseIndex, field, formDisabled } =
     useClaimConditionsFormContext();
   return (
-    <CustomFormControl
-      disabled={formDisabled}
-      error={
+    <FormFieldSetup
+      isRequired={true}
+      errorMessage={
         form.getFieldState(`phases.${phaseIndex}.startTime`, form.formState)
-          .error
+          .error?.message
       }
       helperText="This time is in your local timezone."
       label="When will this phase start?"
     >
       <Input
+        disabled={formDisabled}
+        className="max-w-sm"
         onChange={(e) =>
           form.setValue(
             `phases.${phaseIndex}.startTime`,
@@ -29,6 +31,6 @@ export const PhaseStartTimeInput: React.FC = () => {
         type="datetime-local"
         value={toDateTimeLocal(field.startTime)}
       />
-    </CustomFormControl>
+    </FormFieldSetup>
   );
 };
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/common.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/common.tsx
deleted file mode 100644
index 3ca2568a5f1..00000000000
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/common.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Flex, FormControl } from "@chakra-ui/react";
-import { FormErrorMessage, FormHelperText, FormLabel } from "chakra/form";
-import type { FieldError } from "react-hook-form";
-import type { ComponentWithChildren } from "@/types/component-with-children";
-import { useClaimConditionsFormContext } from ".";
-
-interface CustomFormControlProps {
-  disabled: boolean;
-  label: string;
-  error?: FieldError;
-  helperText?: React.ReactNode;
-}
-
-export const CustomFormControl: ComponentWithChildren<
-  CustomFormControlProps
-> = (props) => {
-  return (
-    <FormControl isDisabled={props.disabled} isInvalid={!!props.error}>
-      {/* label */}
-      <FormLabel className="font-bold">{props.label}</FormLabel>
-
-      {/* input */}
-      {props.children}
-
-      {/* error message */}
-      {props.error && (
-        <FormErrorMessage>{props.error.message}</FormErrorMessage>
-      )}
-
-      {/* helper text */}
-      {props.helperText && <FormHelperText>{props.helperText}</FormHelperText>}
-    </FormControl>
-  );
-};
-
-export const CustomFormGroup: ComponentWithChildren = ({ children }) => {
-  const { isColumn } = useClaimConditionsFormContext();
-  return (
-    <Flex
-      direction={{
-        base: "column",
-        md: isColumn ? "column" : "row",
-      }}
-      gap={4}
-    >
-      {children}
-    </Flex>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx
index dd54ade9fc7..bf6ff4f71c7 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx
@@ -1,21 +1,11 @@
 "use client";
 
 import {
-  Alert,
-  AlertDescription,
-  AlertIcon,
-  AlertTitle,
-  Box,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-} from "@chakra-ui/react";
-import { Button } from "chakra/button";
-import { Heading } from "chakra/heading";
-import { Text } from "chakra/text";
-import { CircleHelpIcon, PlusIcon } from "lucide-react";
+  ArrowDownToLineIcon,
+  CircleAlertIcon,
+  CircleHelpIcon,
+  PlusIcon,
+} from "lucide-react";
 import { createContext, Fragment, useContext, useMemo, useState } from "react";
 import {
   type UseFieldArrayReturn,
@@ -38,8 +28,16 @@ import {
 import invariant from "tiny-invariant";
 import * as z from "zod";
 import { ZodError } from "zod";
-import { AdminOnly } from "@/components/contracts/roles/admin-only";
 import { TransactionButton } from "@/components/tx-button";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Form } from "@/components/ui/form";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useIsAdmin } from "@/hooks/useContractRoles";
@@ -286,7 +284,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
     values: { phases: transformedQueryData },
   });
 
-  const { append, remove, fields } = useFieldArray({
+  const formFields = useFieldArray({
     control: form.control,
     name: "phases",
   });
@@ -296,14 +294,14 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
 
     switch (type) {
       case "public":
-        append({
+        formFields.append({
           ...DEFAULT_PHASE,
           metadata: { name },
         });
         break;
 
       case "specific":
-        append({
+        formFields.append({
           ...DEFAULT_PHASE,
           maxClaimablePerWallet: "0",
           metadata: { name },
@@ -312,7 +310,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
         break;
 
       case "overrides":
-        append({
+        formFields.append({
           ...DEFAULT_PHASE,
           maxClaimablePerWallet: "1",
           metadata: { name },
@@ -321,7 +319,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
         break;
 
       case "creator":
-        append({
+        formFields.append({
           ...DEFAULT_PHASE,
           maxClaimablePerWallet: "0",
           maxClaimableSupply: "unlimited",
@@ -340,19 +338,15 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
         break;
 
       default:
-        append({
+        formFields.append({
           ...DEFAULT_PHASE,
           metadata: { name },
         });
     }
   };
 
-  const removePhase = (index: number) => {
-    remove(index);
-  };
-
   const phases = form.watch("phases");
-  const controlledFields = fields.map((field, index) => {
+  const controlledFields = formFields.fields.map((field, index) => {
     return {
       ...field,
       ...phases[index],
@@ -428,25 +422,6 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
     return phaseId;
   }, [controlledFields]);
 
-  const { hasAddedPhases, hasRemovedPhases } = useMemo(() => {
-    const initialPhases = claimConditionsQuery.data || [];
-    const currentPhases = controlledFields;
-
-    const _hasAddedPhases =
-      currentPhases.length > initialPhases.length &&
-      claimConditionsQuery?.data?.length === 0 &&
-      controlledFields?.length > 0;
-    const _hasRemovedPhases =
-      currentPhases.length < initialPhases.length &&
-      isMultiPhase &&
-      controlledFields?.length === 0;
-
-    return {
-      hasAddedPhases: _hasAddedPhases,
-      hasRemovedPhases: _hasRemovedPhases,
-    };
-  }, [claimConditionsQuery.data, controlledFields, isMultiPhase]);
-
   if (claimConditionsQuery.isPending) {
     return (
       <div className="flex h-[400px] w-full items-center justify-center rounded-lg border border-border">
@@ -465,12 +440,11 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
   }
 
   return (
-    <Flex as="form" direction="column" gap={10} onSubmit={handleFormSubmit}>
-      <Flex direction="column" gap={6}>
+    <Form {...form}>
+      <form onSubmit={handleFormSubmit} className="space-y-5">
         {/* Show the reason why the form is disabled */}
-        {!isAdmin && (
-          <Text>Connect with admin wallet to edit claim conditions.</Text>
-        )}
+        {!isAdmin && <p>Connect with admin wallet to edit claim conditions.</p>}
+
         {controlledFields.map((field, index) => {
           const dropType: DropType = field.snapshot
             ? field.maxClaimablePerWallet?.toString() === "0"
@@ -535,7 +509,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                   contract={contract}
                   isPending={sendTx.isPending}
                   onRemove={() => {
-                    removePhase(index);
+                    formFields.remove(index);
                   }}
                 />
               </ClaimsConditionFormContext.Provider>
@@ -544,45 +518,42 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
         })}
 
         {phases?.length === 0 && (
-          <Alert borderRadius="md" status="warning">
-            <AlertIcon />
-            <div className="flex flex-col">
-              <AlertTitle as={Heading} size="label.lg">
-                {isMultiPhase
-                  ? "Missing Claim Phases"
-                  : "Missing Claim Conditions"}
-              </AlertTitle>
-              <AlertDescription as={Text}>
-                {isMultiPhase
-                  ? "You need to set at least one claim phase for people to claim this drop."
-                  : "You need to set claim conditions for people to claim this drop."}
-              </AlertDescription>
-            </div>
+          <Alert variant="warning">
+            <CircleAlertIcon className="size-5" />
+            <AlertTitle>
+              {isMultiPhase
+                ? "Missing Claim Phases"
+                : "Missing Claim Conditions"}
+            </AlertTitle>
+            <AlertDescription>
+              {isMultiPhase
+                ? "You need to set at least one claim phase for people to claim this drop."
+                : "You need to set claim conditions for people to claim this drop."}
+            </AlertDescription>
           </Alert>
         )}
 
-        <Flex
-          flexDir={{ base: "column", md: "row" }}
-          gap={2}
-          justifyContent="space-between"
-        >
-          <div className="flex flex-row gap-2">
-            <AdminOnly contract={contract}>
-              <Menu>
-                <MenuButton
-                  as={Button}
-                  borderRadius="md"
-                  colorScheme="primary"
-                  isDisabled={
-                    sendTx.isPending || (!isMultiPhase && phases?.length > 0)
-                  }
-                  leftIcon={<PlusIcon className="size-5" />}
-                  size="sm"
-                  variant={phases?.length > 0 ? "outline" : "solid"}
+        {isAdmin && (
+          <div className="flex gap-3 justify-between flex-wrap">
+            <div className="flex items-center gap-3">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    disabled={
+                      sendTx.isPending || (!isMultiPhase && phases?.length > 0)
+                    }
+                    size="sm"
+                    variant="outline"
+                    className="bg-card"
+                  >
+                    <PlusIcon className="size-3.5 mr-2" />
+                    Add {isMultiPhase ? "Phase" : "Claim Conditions"}
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  className="rounded-lg w-56"
+                  sideOffset={10}
                 >
-                  Add {isMultiPhase ? "Phase" : "Claim Conditions"}
-                </MenuButton>
-                <MenuList borderRadius="lg" overflow="hidden" zIndex="overlay">
                   {Object.keys(ClaimConditionTypeData).map((key) => {
                     const type = key as ClaimConditionType;
 
@@ -591,7 +562,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                     }
 
                     return (
-                      <MenuItem
+                      <DropdownMenuItem
                         key={type}
                         onClick={() => {
                           addPhase(type);
@@ -600,72 +571,54 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                       >
                         <div className="flex items-center gap-1">
                           {ClaimConditionTypeData[type].name}
-                          <TooltipBox
-                            content={
-                              <Text size="body.md">
+                          <ToolTipLabel
+                            label={
+                              <p className="text-sm">
                                 {ClaimConditionTypeData[type].description}
-                              </Text>
+                              </p>
                             }
-                          />
+                          >
+                            <CircleHelpIcon className="size-4 text-muted-foreground" />
+                          </ToolTipLabel>
                         </div>
-                      </MenuItem>
+                      </DropdownMenuItem>
                     );
                   })}
-                </MenuList>
-              </Menu>
-            </AdminOnly>
-
-            {controlledFields.some((field) => field.fromSdk) && (
-              <ResetClaimEligibility
-                contract={contract}
-                isErc20={isErc20}
-                isLoggedIn={isLoggedIn}
-                isMultiphase={isMultiPhase}
-                tokenId={tokenId}
-              />
-            )}
-          </div>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
 
-          <div className="flex flex-row">
-            <AdminOnly contract={contract} fallback={<Box pb={5} />}>
-              <Flex alignItems="center" gap={3} justifyContent="center">
-                {(hasRemovedPhases || hasAddedPhases) && (
-                  <Text color="red.500" fontWeight="bold">
-                    You have unsaved changes
-                  </Text>
-                )}
-                {controlledFields.length > 0 ||
-                hasRemovedPhases ||
-                !isMultiPhase ? (
-                  <TransactionButton
-                    client={contract.client}
-                    disabled={claimConditionsQuery.isPending}
-                    isLoggedIn={isLoggedIn}
-                    isPending={sendTx.isPending}
-                    transactionCount={1}
-                    txChainID={contract.chain.id}
-                    type="submit"
-                  >
-                    {claimConditionsQuery.isPending
-                      ? "Saving Phases"
-                      : "Save Phases"}
-                  </TransactionButton>
-                ) : null}
-              </Flex>
-            </AdminOnly>
+            <div className="flex flex-row gap-3">
+              <TransactionButton
+                size="sm"
+                variant="default"
+                client={contract.client}
+                disabled={claimConditionsQuery.isPending}
+                isLoggedIn={isLoggedIn}
+                isPending={sendTx.isPending}
+                transactionCount={undefined}
+                txChainID={contract.chain.id}
+                type="submit"
+              >
+                <ArrowDownToLineIcon className="size-3.5" />
+                {claimConditionsQuery.isPending
+                  ? "Saving Phases"
+                  : "Save Phases"}
+              </TransactionButton>
+
+              {controlledFields.some((field) => field.fromSdk) && (
+                <ResetClaimEligibility
+                  contract={contract}
+                  isErc20={isErc20}
+                  isLoggedIn={isLoggedIn}
+                  isMultiphase={isMultiPhase}
+                  tokenId={tokenId}
+                />
+              )}
+            </div>
           </div>
-        </Flex>
-      </Flex>
-    </Flex>
-  );
-};
-
-const TooltipBox: React.FC<{
-  content: React.ReactNode;
-}> = ({ content }) => {
-  return (
-    <ToolTipLabel label={<div>{content}</div>}>
-      <CircleHelpIcon className="size-4 text-muted-foreground" />
-    </ToolTipLabel>
+        )}
+      </form>
+    </Form>
   );
 };
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/phase.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/phase.tsx
index 9b6ffce6500..0ab37408e33 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/phase.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/phase.tsx
@@ -1,12 +1,12 @@
-import { ChevronDownIcon, ChevronUpIcon, XIcon } from "lucide-react";
+import { formatDate } from "date-fns";
+import { ChevronDownIcon, XIcon } from "lucide-react";
 import type { ThirdwebContract } from "thirdweb";
-import { AdminOnly } from "@/components/contracts/roles/admin-only";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
+import { DynamicHeight } from "@/components/ui/DynamicHeight";
+import { cn } from "@/lib/utils";
 import { PricePreview } from "../price-preview";
 import { ClaimConditionTypeData, useClaimConditionsFormContext } from ".";
-import { CustomFormGroup } from "./common";
 import { ClaimerSelection } from "./Inputs/ClaimerSelection";
 import { ClaimPriceInput } from "./Inputs/ClaimPriceInput";
 import { CreatorInput } from "./Inputs/CreatorInput";
@@ -42,114 +42,130 @@ export const ClaimConditionsPhase: React.FC<ClaimConditionsPhaseProps> = ({
   };
 
   return (
-    <Card className="relative flex flex-col gap-8 p-8">
-      <div className="absolute top-3 right-3 flex flex-row items-start justify-between gap-1">
-        <Button
-          className="gap-2"
-          onClick={toggleEditing}
-          size="sm"
-          variant="ghost"
-        >
-          {field.isEditing ? "Collapse" : isAdmin ? "Edit" : "See Phase"}
-          {field.isEditing ? (
-            <ChevronUpIcon className="size-4" />
-          ) : (
-            <ChevronDownIcon className="size-4" />
+    <DynamicHeight transition="height 0.3s ease">
+      <div className="border border-border rounded-lg bg-card relative">
+        <div className="p-4 lg:p-6">
+          <div className="mb-4">
+            {isActive && (
+              <div className="lg:absolute lg:right-6 lg:top-6 mb-4 border-b pb-4 border-dashed lg:border-none lg:pb-0">
+                <Badge
+                  variant="secondary"
+                  className="h-auto py-1.5 border border-border bg-background gap-1.5"
+                >
+                  <div className="size-2 bg-primary rounded-full" />
+                  Currently Active
+                </Badge>
+              </div>
+            )}
+
+            <h3 className="font-semibold text-lg tracking-tight text-foreground mb-0.5">
+              {ClaimConditionTypeData[claimConditionType].name}
+            </h3>
+            <p className="text-muted-foreground text-sm max-w-xl">
+              {ClaimConditionTypeData[claimConditionType].description}
+            </p>
+          </div>
+
+          {!field.isEditing && (
+            <div className="flex flex-col gap-4 md:flex-row md:gap-12 text-sm">
+              {/* Phase start */}
+              <div className="space-y-0.5">
+                <p className="font-medium text-foreground">Phase start</p>
+                <p className="text-muted-foreground">
+                  {field.startTime
+                    ? formatDate(field.startTime, "MMM d, yyyy hh:mm a")
+                    : "N/A"}
+                </p>
+              </div>
+
+              {/* Tokens to drop */}
+              <div className="space-y-0.5">
+                <p className="font-medium text-foreground">
+                  {isErc20 ? "Tokens" : "NFTs"} to drop
+                </p>
+                <p className="text-muted-foreground capitalize">
+                  {field.maxClaimableSupply}
+                </p>
+              </div>
+
+              {/* Price */}
+              <PricePreview
+                contractChainId={contract.chain.id}
+                currencyAddress={field.currencyAddress}
+                price={field.price}
+              />
+
+              {/* Limit per wallet */}
+              <div className="space-y-0.5">
+                <p className="font-medium text-foreground">Limit per wallet</p>
+                {claimConditionType === "specific" ? (
+                  <p className="text-muted-foreground"> Set in the snapshot</p>
+                ) : claimConditionType === "creator" ? (
+                  <p className="text-muted-foreground">Unlimited</p>
+                ) : (
+                  <p className="text-muted-foreground capitalize">
+                    {field.maxClaimablePerWallet}
+                  </p>
+                )}
+              </div>
+            </div>
           )}
-        </Button>
-        <AdminOnly contract={contract}>
+
+          {field.isEditing && (
+            <div className="space-y-6">
+              {/* Phase Name Input / Form Title */}
+              {isMultiPhase ? <PhaseNameInput /> : null}
+              <PhaseStartTimeInput />
+
+              <CreatorInput
+                creatorAddress={
+                  (field.snapshot?.[0] as { address: string })?.address
+                }
+              />
+
+              <MaxClaimableSupplyInput />
+              <ClaimPriceInput contractChainId={contract.chain.id} />
+
+              {claimConditionType === "specific" ||
+              claimConditionType === "creator" ? null : (
+                <MaxClaimablePerWalletInput />
+              )}
+
+              <ClaimerSelection />
+            </div>
+          )}
+        </div>
+
+        <div className="flex flex-row items-start justify-end gap-3 border-t border-dashed p-4 lg:px-6 py-5">
           <Button
-            className="gap-2 text-red-300"
-            disabled={isPending}
-            onClick={onRemove}
+            className="gap-2 rounded-full"
+            onClick={toggleEditing}
             size="sm"
-            variant="ghost"
+            variant="outline"
           >
-            Remove <XIcon className="size-4" />
+            <ChevronDownIcon
+              className={cn(
+                "size-3.5 transition-transform text-muted-foreground",
+                field.isEditing && "rotate-180",
+              )}
+            />
+            {field.isEditing ? "Collapse" : isAdmin ? "Edit" : "Expand"}
           </Button>
-        </AdminOnly>
-      </div>
 
-      <div className="mt-4 flex flex-col gap-2 md:mt-0">
-        <div className="flex flex-row items-center gap-3">
-          <p className="font-bold text-lg text-muted-foreground">
-            {ClaimConditionTypeData[claimConditionType].name}
-          </p>
-          {isActive && (
-            <Badge className="rounded-lg p-1.5" variant="success">
-              Currently active
-            </Badge>
+          {isAdmin && (
+            <Button
+              className="gap-2 rounded-full"
+              disabled={isPending}
+              onClick={onRemove}
+              size="sm"
+              variant="outline"
+            >
+              <XIcon className="size-3.5 text-muted-foreground" />
+              Remove
+            </Button>
           )}
         </div>
-
-        <p className="text-muted-foreground">
-          {ClaimConditionTypeData[claimConditionType].description}
-        </p>
       </div>
-
-      {!field.isEditing ? (
-        <div className="grid grid-cols-2 gap-2 md:grid-cols-4">
-          <div className="flex flex-col">
-            <p className="font-bold text-muted-foreground">Phase start</p>
-            <p className="text-muted-foreground">
-              {field.startTime?.toLocaleString()}
-            </p>
-          </div>
-          <div className="flex flex-col">
-            <p className="font-bold text-muted-foreground">
-              {isErc20 ? "Tokens" : "NFTs"} to drop
-            </p>
-            <p className="text-muted-foreground capitalize">
-              {field.maxClaimableSupply}
-            </p>
-          </div>
-          <PricePreview
-            contractChainId={contract.chain.id}
-            currencyAddress={field.currencyAddress}
-            price={field.price}
-          />
-          <div className="flex flex-col">
-            <p className="font-bold text-muted-foreground">Limit per wallet</p>
-            {claimConditionType === "specific" ? (
-              <p>Set in the snapshot</p>
-            ) : claimConditionType === "creator" ? (
-              <p>Unlimited</p>
-            ) : (
-              <p className="text-muted-foreground capitalize">
-                {field.maxClaimablePerWallet}
-              </p>
-            )}
-          </div>
-        </div>
-      ) : (
-        <>
-          <CustomFormGroup>
-            {/* Phase Name Input / Form Title */}
-            {isMultiPhase ? <PhaseNameInput /> : null}
-            <PhaseStartTimeInput />
-          </CustomFormGroup>
-
-          <CreatorInput
-            creatorAddress={
-              (field.snapshot?.[0] as { address: string })?.address
-            }
-          />
-
-          <CustomFormGroup>
-            <MaxClaimableSupplyInput />
-            <ClaimPriceInput contractChainId={contract.chain.id} />
-          </CustomFormGroup>
-
-          {claimConditionType === "specific" ||
-          claimConditionType === "creator" ? null : (
-            <CustomFormGroup>
-              <MaxClaimablePerWalletInput />
-            </CustomFormGroup>
-          )}
-
-          <ClaimerSelection />
-        </>
-      )}
-    </Card>
+    </DynamicHeight>
   );
 };
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions.tsx
index dfac6793bb2..56a7c4c2558 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions.tsx
@@ -20,14 +20,14 @@ export const ClaimConditions: React.FC<ClaimConditionsProps> = ({
   isMultiphase,
 }) => {
   return (
-    <div className="flex w-full flex-col gap-6">
+    <div className="space-y-5">
       <section>
-        <h2 className="mb-1 font-semibold text-xl tracking-tight">
+        <h2 className="mb-0.5 font-semibold text-2xl tracking-tight">
           Set Claim Conditions
         </h2>
         <p className="text-muted-foreground text-sm">
           Control when the {isERC20 ? "tokens" : "NFTs"} get dropped, how much
-          they cost, and more.
+          they cost, and more
         </p>
       </section>
 
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/price-input.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/price-input.tsx
index d1aaf1fa26f..6e2610350f3 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/price-input.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/price-input.tsx
@@ -1,15 +1,9 @@
-import {
-  InputGroup,
-  NumberInput,
-  NumberInputField,
-  type NumberInputProps,
-} from "@chakra-ui/react";
+import { DecimalInput } from "@/components/ui/decimal-input";
+
+type InputProps = React.ComponentProps<typeof DecimalInput>;
 
 interface PriceInputProps
-  extends Omit<
-    NumberInputProps,
-    "onChange" | "value" | "onBlur" | "max" | "min"
-  > {
+  extends Omit<InputProps, "onChange" | "value" | "onBlur" | "max" | "min"> {
   value: string;
   onChange: (value: string) => void;
 }
@@ -20,17 +14,15 @@ export const PriceInput: React.FC<PriceInputProps> = ({
   ...restInputProps
 }) => {
   return (
-    <InputGroup>
-      <NumberInput defaultValue={0} min={0} value={value} {...restInputProps}>
-        <NumberInputField
-          onChange={(e) => {
-            if (e.target.value === "" || Number(e.target.value) < 0) {
-              return onChange("0");
-            }
-            onChange(e.target.value);
-          }}
-        />
-      </NumberInput>
-    </InputGroup>
+    <DecimalInput
+      {...restInputProps}
+      onChange={(value) => {
+        if (value === "" || Number(value) < 0) {
+          return onChange("0");
+        }
+        onChange(value);
+      }}
+      value={value}
+    />
   );
 };
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/price-preview.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/price-preview.tsx
index 4fb90e1b152..c368858b1b6 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/price-preview.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/price-preview.tsx
@@ -24,12 +24,12 @@ export const PricePreview: React.FC<PricePreviewProps> = ({
   );
 
   return (
-    <div className="flex flex-col text-muted-foreground">
-      <p className="font-bold">Default price</p>
+    <div className="flex flex-col space-y-0.5">
+      <p className="font-medium text-foreground">Default price</p>
       {Number(price) === 0 ? (
-        <p>Free</p>
+        <p className="text-muted-foreground text-sm">Free</p>
       ) : (
-        <p>
+        <p className="text-muted-foreground text-sm">
           {price}{" "}
           {foundCurrency
             ? foundCurrency.symbol
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/quantity-input-with-unlimited.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/quantity-input-with-unlimited.tsx
index e8a31f23d0b..5d22a43762c 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/quantity-input-with-unlimited.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/quantity-input-with-unlimited.tsx
@@ -2,25 +2,23 @@ import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 
-interface QuantityInputWithUnlimitedProps {
+export function QuantityInputWithUnlimited(props: {
   value: string;
   onChange: (value: string) => void;
   hideMaxButton?: true;
   decimals?: number;
   isDisabled: boolean;
   isRequired: boolean;
-}
+}) {
+  const {
+    value = "0",
+    onChange,
+    hideMaxButton,
+    isDisabled,
+    isRequired,
+    decimals,
+  } = props;
 
-export const QuantityInputWithUnlimited: React.FC<
-  QuantityInputWithUnlimitedProps
-> = ({
-  value = "0",
-  onChange,
-  hideMaxButton,
-  isDisabled,
-  isRequired,
-  decimals,
-}) => {
   const [stringValue, setStringValue] = useState<string>(
     Number.isNaN(Number(value)) ? "0" : value.toString(),
   );
@@ -45,7 +43,7 @@ export const QuantityInputWithUnlimited: React.FC<
   };
 
   return (
-    <div className="flex flex-row items-center rounded-md border border-border">
+    <div className="flex flex-row items-center rounded-md border border-border pr-1 bg-background max-w-sm">
       <Input
         className="border-none"
         disabled={isDisabled}
@@ -64,7 +62,7 @@ export const QuantityInputWithUnlimited: React.FC<
       />
       {hideMaxButton ? null : (
         <Button
-          className="mr-1 text-primary"
+          className="text-muted-foreground bg-transparent hover:accent"
           disabled={isDisabled}
           onClick={() => {
             updateValue("unlimited");
@@ -77,4 +75,4 @@ export const QuantityInputWithUnlimited: React.FC<
       )}
     </div>
   );
-};
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/reset-claim-eligibility.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/reset-claim-eligibility.tsx
index c91b14460be..44233ca0454 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/reset-claim-eligibility.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/reset-claim-eligibility.tsx
@@ -1,31 +1,28 @@
 "use client";
 
-import { CircleHelpIcon } from "lucide-react";
+import { CircleHelpIcon, RefreshCcwIcon } from "lucide-react";
 import type { ThirdwebContract } from "thirdweb";
 import * as ERC20Ext from "thirdweb/extensions/erc20";
 import * as ERC721Ext from "thirdweb/extensions/erc721";
 import * as ERC1155Ext from "thirdweb/extensions/erc1155";
 import { useSendAndConfirmTransaction } from "thirdweb/react";
-import { AdminOnly } from "@/components/contracts/roles/admin-only";
 import { TransactionButton } from "@/components/tx-button";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useTxNotifications } from "@/hooks/useTxNotifications";
 
-interface ResetClaimEligibilityProps {
-  isErc20: boolean;
-  contract: ThirdwebContract;
-  tokenId?: string;
-  isLoggedIn: boolean;
-  isMultiphase: boolean;
-}
-
-export const ResetClaimEligibility: React.FC<ResetClaimEligibilityProps> = ({
+export function ResetClaimEligibility({
   contract,
   tokenId,
   isErc20,
   isLoggedIn,
   isMultiphase,
-}) => {
+}: {
+  isErc20: boolean;
+  contract: ThirdwebContract;
+  tokenId?: string;
+  isLoggedIn: boolean;
+  isMultiphase: boolean;
+}) {
   const sendTxMutation = useSendAndConfirmTransaction();
 
   const txNotification = useTxNotifications(
@@ -70,38 +67,39 @@ export const ResetClaimEligibility: React.FC<ResetClaimEligibilityProps> = ({
   }
 
   return (
-    <AdminOnly contract={contract} fallback={<div className="pb-5" />}>
-      <TransactionButton
-        client={contract.client}
-        isLoggedIn={isLoggedIn}
-        isPending={sendTxMutation.isPending}
-        onClick={handleResetClaimEligibility}
-        size="sm"
-        transactionCount={1}
-        txChainID={contract.chain.id}
-        type="button"
-      >
-        {sendTxMutation.isPending ? (
-          "Resetting Eligibility"
-        ) : (
-          <div className="flex items-center gap-2">
-            Reset Eligibility
-            <ToolTipLabel
-              label={
-                <span className="text-left">
-                  This {`contract's`} claim eligibility stores who has already
-                  claimed {isErc20 ? "tokens" : "NFTs"} from this contract and
-                  carries across claim phases. Resetting claim eligibility will
-                  reset this state permanently, and wallets that have already
-                  claimed to their limit will be able to claim again.
-                </span>
-              }
-            >
-              <CircleHelpIcon className="size-4" />
-            </ToolTipLabel>
-          </div>
-        )}
-      </TransactionButton>
-    </AdminOnly>
+    <TransactionButton
+      client={contract.client}
+      isLoggedIn={isLoggedIn}
+      isPending={sendTxMutation.isPending}
+      onClick={handleResetClaimEligibility}
+      size="sm"
+      variant="outline"
+      transactionCount={undefined}
+      txChainID={contract.chain.id}
+      type="button"
+      className="text-destructive-text bg-card"
+    >
+      {sendTxMutation.isPending ? (
+        "Resetting Eligibility"
+      ) : (
+        <div className="flex items-center gap-2">
+          <RefreshCcwIcon className="size-3.5" />
+          Reset Eligibility
+          <ToolTipLabel
+            label={
+              <span className="text-left">
+                This {`contract's`} claim eligibility stores who has already
+                claimed {isErc20 ? "tokens" : "NFTs"} from this contract and
+                carries across claim phases. Resetting claim eligibility will
+                reset this state permanently, and wallets that have already
+                claimed to their limit will be able to claim again.
+              </span>
+            }
+          >
+            <CircleHelpIcon className="size-3.5" />
+          </ToolTipLabel>
+        </div>
+      )}
+    </TransactionButton>
   );
-};
+}
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 c2773aad0c6..552ad8a6953 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
@@ -1,11 +1,14 @@
-import { CircleAlertIcon, DownloadIcon, UploadIcon } from "lucide-react";
-import { useRef } from "react";
-import { useDropzone } from "react-dropzone";
-import type { Column } from "react-table";
+import {
+  ArrowRightIcon,
+  CircleAlertIcon,
+  CircleSlashIcon,
+  RotateCcwIcon,
+} from "lucide-react";
 import { type ThirdwebClient, ZERO_ADDRESS } from "thirdweb";
+import { DownloadableCode } from "@/components/blocks/code/downloadable-code";
+import { DropZone } from "@/components/blocks/drop-zone/drop-zone";
 import { Button } from "@/components/ui/button";
 import { InlineCode } from "@/components/ui/inline-code";
-import { UnorderedList } from "@/components/ui/List/List";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import {
   Sheet,
@@ -13,10 +16,17 @@ import {
   SheetHeader,
   SheetTitle,
 } from "@/components/ui/sheet";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useCsvUpload } from "@/hooks/useCsvUpload";
-import { cn } from "@/lib/utils";
-import { CsvDataTable } from "../csv-data-table";
 
 interface SnapshotAddressInput {
   address: string;
@@ -45,6 +55,72 @@ const csvParser = (items: SnapshotAddressInput[]): SnapshotAddressInput[] => {
     .filter(({ address }) => address !== "");
 };
 
+function SnapshotDataTable({ data }: { data: SnapshotAddressInput[] }) {
+  return (
+    <TableContainer>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Address</TableHead>
+            <TableHead>Max claimable</TableHead>
+            <TableHead>Price</TableHead>
+            <TableHead>Currency Address</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {data.map((item) => (
+            <TableRow key={item.address}>
+              <TableCell>
+                {item.isValid ? (
+                  item.address
+                ) : (
+                  <ToolTipLabel
+                    label={
+                      item.address === ZERO_ADDRESS
+                        ? "Cannot send tokens to ZERO_ADDRESS"
+                        : item.address.startsWith("0x")
+                          ? "Address is not valid"
+                          : "Address couldn't be resolved"
+                    }
+                  >
+                    <div className="flex flex-row items-center gap-2">
+                      <CircleAlertIcon className="size-4 text-red-500" />
+                      <div className="cursor-default font-bold text-red-500">
+                        {item.address}
+                      </div>
+                    </div>
+                  </ToolTipLabel>
+                )}
+              </TableCell>
+              <TableCell>
+                {item.maxClaimable === "0" || !item.maxClaimable
+                  ? "Default"
+                  : item.maxClaimable === "unlimited"
+                    ? "Unlimited"
+                    : item.maxClaimable}
+              </TableCell>
+              <TableCell>
+                {item.price === "0"
+                  ? "Free"
+                  : !item.price || item.price === "unlimited"
+                    ? "Default"
+                    : item.price}
+              </TableCell>
+              <TableCell>
+                {item.currencyAddress ===
+                  "0x0000000000000000000000000000000000000000" ||
+                !item.currencyAddress
+                  ? "Default"
+                  : item.currencyAddress}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
+
 const SnapshotViewerSheetContent: React.FC<SnapshotUploadProps> = ({
   setSnapshot,
   dropType,
@@ -59,11 +135,6 @@ const SnapshotViewerSheetContent: React.FC<SnapshotUploadProps> = ({
     defaultRawData: value,
   });
 
-  const dropzone = useDropzone({
-    onDrop: csvUpload.setFiles,
-  });
-
-  const paginationPortalRef = useRef<HTMLDivElement>(null);
   const normalizeData = csvUpload.normalizeQuery.data;
 
   if (!normalizeData) {
@@ -88,174 +159,122 @@ const SnapshotViewerSheetContent: React.FC<SnapshotUploadProps> = ({
     onClose();
   };
 
-  const columns = [
-    {
-      accessor: ({ address, isValid }) => {
-        if (isValid) {
-          return address;
-        }
-        return (
-          <ToolTipLabel
-            label={
-              address === ZERO_ADDRESS
-                ? "Cannot send tokens to ZERO_ADDRESS"
-                : address.startsWith("0x")
-                  ? "Address is not valid"
-                  : "Address couldn't be resolved"
-            }
-          >
-            <div className="flex flex-row items-center gap-2">
-              <CircleAlertIcon className="size-4 text-red-500" />
-              <div className="cursor-default font-bold text-red-500">
-                {address}
-              </div>
-            </div>
-          </ToolTipLabel>
-        );
-      },
-      Header: "Address",
-    },
-    {
-      accessor: ({ maxClaimable }) => {
-        return maxClaimable === "0" || !maxClaimable
-          ? "Default"
-          : maxClaimable === "unlimited"
-            ? "Unlimited"
-            : maxClaimable;
-      },
-      Header: "Max claimable",
-    },
-    {
-      accessor: ({ price }) => {
-        return price === "0"
-          ? "Free"
-          : !price || price === "unlimited"
-            ? "Default"
-            : price;
-      },
-      Header: "Price",
-    },
-    {
-      accessor: ({ currencyAddress }) => {
-        return currencyAddress ===
-          "0x0000000000000000000000000000000000000000" || !currencyAddress
-          ? "Default"
-          : currencyAddress;
-      },
-      Header: "Currency Address",
-    },
-  ] as Column<SnapshotAddressInput>[];
-
   return (
-    <div className="flex flex-col gap-6">
+    <div className="space-y-6">
       {csvUpload.rawData.length > 0 ? (
         <div>
-          <CsvDataTable<SnapshotAddressInput>
-            columns={columns}
-            data={csvUpload.normalizeQuery.data.result}
-            portalRef={paginationPortalRef}
-          />
-        </div>
-      ) : (
-        <div className="flex grow flex-col items-center gap-8 overflow-auto">
-          <div className="relative aspect-[21/9] w-full">
-            <div
-              className={cn(
-                "flex h-full cursor-pointer rounded-md border border-border hover:border-primary",
-                csvUpload.noCsv ? "bg-red-200" : "bg-background",
-              )}
-              {...dropzone.getRootProps()}
+          <SnapshotDataTable data={csvUpload.normalizeQuery.data.result} />
+          <div className="flex justify-end gap-3 border-t py-6 border-dashed">
+            <Button
+              className="gap-2"
+              disabled={isDisabled || csvUpload.rawData.length === 0}
+              onClick={() => {
+                csvUpload.reset();
+              }}
+              variant="outline"
             >
-              <input {...dropzone.getInputProps()} />
-              <div className="!m-auto flex flex-col">
-                <UploadIcon
-                  className={cn(
-                    "mx-auto mb-2 size-8",
-                    csvUpload.noCsv ? "text-red-500" : "text-gray-600",
-                  )}
-                />
-                {dropzone.isDragActive ? (
-                  <p>Drop the files here</p>
-                ) : (
-                  <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>
-                )}
-              </div>
-            </div>
+              <RotateCcwIcon className="size-4" />
+              Reset
+            </Button>
+
+            {csvUpload.normalizeQuery.data?.invalidFound ? (
+              <Button
+                className="gap-2"
+                disabled={isDisabled || csvUpload.rawData.length === 0}
+                onClick={() => {
+                  csvUpload.removeInvalid();
+                }}
+              >
+                <CircleSlashIcon className="size-4" />
+                Remove invalid
+              </Button>
+            ) : (
+              <Button
+                className="gap-2"
+                disabled={isDisabled || csvUpload.rawData.length === 0}
+                onClick={onSave}
+              >
+                Next
+                <ArrowRightIcon className="size-4" />
+              </Button>
+            )}
           </div>
-          <div className="flex flex-col gap-2">
-            <p className="text-lg">Requirements</p>
-            <UnorderedList>
+        </div>
+      ) : (
+        <div>
+          <DropZone
+            className="py-20"
+            onDrop={csvUpload.setFiles}
+            isError={csvUpload.noCsv}
+            title={
+              csvUpload.noCsv
+                ? "Invalid CSV file"
+                : "Drag & Drop a CSV file here"
+            }
+            description={
+              "The CSV file must follow the format specified in the requirements below"
+            }
+            resetButton={{ label: "Reset", onClick: () => csvUpload.reset() }}
+            accept=".csv"
+          />
+
+          <div className="flex flex-col gap-2 mt-6">
+            <p className="text-base font-medium">Requirements</p>
+            <div className="space-y-2 text-muted-foreground text-sm">
               {dropType === "specific" ? (
                 <>
-                  <li>
+                  <p>
                     Files <em>must</em> contain one .csv file with a list of
                     addresses and their <InlineCode code="maxClaimable" />.
                     (amount each wallet is allowed to claim)
-                    <br />
-                    <a
-                      className="text-link-foreground hover:text-foreground"
-                      download
-                      href="/assets/examples/snapshot-with-maxclaimable.csv"
-                    >
-                      <DownloadIcon className="inline size-3" /> Example
-                      snapshot
-                    </a>
-                  </li>
-                  <li>
+                  </p>
+
+                  <DownloadableCode
+                    code={snapshotWithMaxClaimable}
+                    lang="csv"
+                    fileNameWithExtension="snapshot-with-maxclaimable.csv"
+                  />
+
+                  <p>
                     You may optionally add <InlineCode code="price" /> and
                     <InlineCode code="currencyAddress" /> overrides as well.
                     This lets you override the currency and price you would like
                     to charge per wallet you specified
-                    <br />
-                    <a
-                      className="text-link-foreground hover:text-foreground"
-                      download
-                      href="/assets/examples/snapshot-with-overrides.csv"
-                    >
-                      <DownloadIcon className="inline size-3" /> Example
-                      snapshot
-                    </a>
-                  </li>
+                  </p>
+
+                  <DownloadableCode
+                    code={snapshotWithOverrides}
+                    lang="csv"
+                    fileNameWithExtension="snapshot-with-overrides.csv"
+                  />
                 </>
               ) : (
                 <>
-                  <li>
+                  <p>
                     Files <em>must</em> contain one .csv file with a list of
                     addresses.
-                    <br />
-                    <a
-                      className="text-link-foreground hover:text-foreground"
-                      download
-                      href="/assets/examples/snapshot.csv"
-                    >
-                      <DownloadIcon className="inline size-3" /> Example
-                      snapshot
-                    </a>
-                  </li>
-                  <li>
+                  </p>
+
+                  <DownloadableCode
+                    code={snapshotCSV}
+                    lang="csv"
+                    fileNameWithExtension="snapshot.csv"
+                  />
+
+                  <p>
                     You may optionally add a <InlineCode code="maxClaimable" />
                     column override. (amount each wallet is allowed to claim) If
                     not specified, the default value is the one you have set on
                     your claim phase.
-                    <br />
-                    <a
-                      className="text-link-foreground hover:text-foreground"
-                      download
-                      href="/assets/examples/snapshot-with-maxclaimable.csv"
-                    >
-                      <DownloadIcon className="inline size-3" /> Example
-                      snapshot
-                    </a>
-                  </li>
-                  <li>
+                  </p>
+
+                  <DownloadableCode
+                    code={snapshotWithMaxClaimable}
+                    lang="csv"
+                    fileNameWithExtension="snapshot-with-maxclaimable.csv"
+                  />
+
+                  <p>
                     You may optionally add <InlineCode code="price" /> and
                     <InlineCode code="currencyAddress" /> overrides. This lets
                     you override the currency and price you would like to charge
@@ -264,67 +283,27 @@ const SnapshotViewerSheetContent: React.FC<SnapshotUploadProps> = ({
                       When defining a custom currency address, you must also
                       define a price override.
                     </strong>
-                    <br />
-                    <a
-                      className="text-link-foreground hover:text-foreground"
-                      download
-                      href="/assets/examples/snapshot-with-overrides.csv"
-                    >
-                      <DownloadIcon className="inline size-3" /> Example
-                      snapshot
-                    </a>
-                  </li>
+                  </p>
+
+                  <DownloadableCode
+                    code={snapshotWithOverrides}
+                    lang="csv"
+                    fileNameWithExtension="snapshot-with-overrides.csv"
+                  />
                 </>
               )}
-              <li>
+              <p>
                 Repeated addresses will be removed and only the first found will
                 be kept.
-              </li>
-              <li>
+              </p>
+              <p>
                 The limit you set is for the maximum amount of NFTs a wallet can
                 claim, not how many they can receive in total.
-              </li>
-            </UnorderedList>
+              </p>
+            </div>
           </div>
         </div>
       )}
-      <div className="mt-4 flex flex-col items-center justify-between border-t p-0 md:mt-0 md:flex-row md:p-4">
-        <div ref={paginationPortalRef} />
-        {!isDisabled && (
-          <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 || csvUpload.rawData.length === 0}
-              onClick={() => {
-                csvUpload.reset();
-              }}
-            >
-              Reset
-            </Button>
-            {csvUpload.normalizeQuery.data?.invalidFound ? (
-              <Button
-                className="w-full rounded-md md:w-auto"
-                disabled={isDisabled || csvUpload.rawData.length === 0}
-                onClick={() => {
-                  csvUpload.removeInvalid();
-                }}
-                variant="primary"
-              >
-                Remove invalid
-              </Button>
-            ) : (
-              <Button
-                className="w-full rounded-md md:w-auto"
-                disabled={isDisabled || csvUpload.rawData.length === 0}
-                onClick={onSave}
-                variant="primary"
-              >
-                Next
-              </Button>
-            )}
-          </div>
-        )}
-      </div>
     </div>
   );
 };
@@ -343,8 +322,8 @@ export function SnapshotViewerSheet(
       }}
       open={props.isOpen}
     >
-      <SheetContent className="flex w-full flex-col overflow-y-auto sm:min-w-[540px] lg:min-w-[900px]">
-        <SheetHeader>
+      <SheetContent className="!w-full !max-w-4xl overflow-y-auto">
+        <SheetHeader className="mb-3">
           <SheetTitle className="text-left">Snapshot</SheetTitle>
         </SheetHeader>
         <SnapshotViewerSheetContent {...props} />
@@ -352,3 +331,18 @@ export function SnapshotViewerSheet(
     </Sheet>
   );
 }
+
+const snapshotWithMaxClaimable = `\
+address,maxClaimable
+0x0000000000000000000000000000000000000000,2
+0x000000000000000000000000000000000000dEaD,5`;
+
+const snapshotWithOverrides = `\
+address,maxClaimable,price,currencyAddress
+0x0000000000000000000000000000000000000000,2,0.1,0x0000000000000000000000000000000000000000
+0x000000000000000000000000000000000000dEaD,5,2.5,0x0000000000000000000000000000000000000000`;
+
+const snapshotCSV = `\
+address
+0x0000000000000000000000000000000000000000
+0x000000000000000000000000000000000000dEaD`;
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/csv-data-table.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/csv-data-table.tsx
deleted file mode 100644
index d11f1506011..00000000000
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/csv-data-table.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import {
-  IconButton,
-  Portal,
-  Select,
-  Table,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from "@chakra-ui/react";
-import {
-  ChevronFirstIcon,
-  ChevronLastIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react";
-import { type Column, usePagination, useTable } from "react-table";
-import { TableContainer } from "@/components/ui/table";
-
-interface CsvDataTableProps<T extends object> {
-  data: T[];
-  portalRef: React.RefObject<HTMLDivElement | null>;
-  columns: Column<T>[];
-}
-/**
- * Display the data uploaded from useCsvUpload, using react-table
- */
-export function CsvDataTable<T extends object>({
-  data,
-  portalRef,
-  columns,
-}: CsvDataTableProps<T>) {
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    prepareRow,
-    // Instead of using 'rows', we'll use page,
-    page,
-    // which has only the rows for the active 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,
-      },
-    },
-    // old package: this will be removed
-    // eslint-disable-next-line react-compiler/react-compiler
-    usePagination,
-  );
-  return (
-    <>
-      <TableContainer>
-        <Table {...getTableProps()}>
-          <Thead>
-            {headerGroups.map((headerGroup, headerGroupIndex) => (
-              // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-              <Tr {...headerGroup.getHeaderGroupProps()} key={headerGroupIndex}>
-                {headerGroup.headers.map((column, columnIndex) => (
-                  <Th
-                    {...column.getHeaderProps()}
-                    border="none"
-                    // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                    key={columnIndex}
-                  >
-                    <p className="text-muted-foreground">
-                      {column.render("Header")}
-                    </p>
-                  </Th>
-                ))}
-              </Tr>
-            ))}
-          </Thead>
-          <Tbody {...getTableBodyProps()}>
-            {page.map((row, rowIndex) => {
-              prepareRow(row);
-              return (
-                // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                <Tr {...row.getRowProps()} key={rowIndex}>
-                  {row.cells.map((cell, cellIndex) => (
-                    <Td
-                      {...cell.getCellProps()}
-                      borderColor="borderColor"
-                      // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                      key={cellIndex}
-                    >
-                      {cell.render("Cell")}
-                    </Td>
-                  ))}
-                </Tr>
-              );
-            })}
-          </Tbody>
-        </Table>
-      </TableContainer>
-      {/* Only need to show the Pagination components if we have more than 25 records */}
-      {data.length > 0 && (
-        <Portal containerRef={portalRef}>
-          <div className="flex w-full items-center justify-center">
-            <div className="flex flex-row gap-1">
-              <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="my-auto 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>
-          </div>
-        </Portal>
-      )}
-    </>
-  );
-}