diff --git a/apps/dashboard/next-env.d.ts b/apps/dashboard/next-env.d.ts
index 40c3d68096c..1b3be0840f3 100644
--- a/apps/dashboard/next-env.d.ts
+++ b/apps/dashboard/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx
index a71f40786e2..3248cbba442 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx
@@ -41,8 +41,6 @@ const uploadMetadataFormSchema = z.object({
   image: fileBufferOrStringSchema.optional(),
   animationUri: fileBufferOrStringSchema.optional(),
   external_url: fileBufferOrStringSchema.optional(),
-  customImage: z.string().optional(),
-  customAnimationUrl: z.string().optional(),
   background_color: z
     .string()
     .refine(
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Mintable.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Mintable.tsx
index 62fd9fd0d03..2b930a1fb31 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Mintable.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Mintable.tsx
@@ -54,8 +54,6 @@ export type MintFormValues = NFTMetadataInputLimited & {
   useNextTokenId: boolean;
   recipient: string;
   amount: number;
-  customImage: string;
-  customAnimationUrl: string;
   attributes: { trait_type: string; value: string }[];
   tokenId?: string;
 };
@@ -65,8 +63,7 @@ const isValidNft = (values: MintFormValues) =>
   values.description ||
   values.image ||
   values.animation_url ||
-  values.external_url ||
-  values.customAnimationUrl;
+  values.external_url;
 
 const MINTER_ROLE = 1n;
 
@@ -334,8 +331,6 @@ function PrimarySalesSection(props: {
 
 const mintFormSchema = z.object({
   useNextTokenId: z.boolean(),
-  customImage: z.string().optional(),
-  customAnimationUrl: z.string().optional(),
   recipient: addressSchema,
   tokenId: z.coerce.number().min(0, { message: "Invalid tokenId" }).optional(),
 });
@@ -351,8 +346,6 @@ function MintNFTSection(props: {
     resolver: zodResolver(mintFormSchema),
     values: {
       useNextTokenId: false,
-      customImage: "",
-      customAnimationUrl: "",
       recipient: "",
       attributes: [{ trait_type: "", value: "" }],
       amount: 1,
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/nft/AdvancedNFTMetadataFormGroup.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/nft/AdvancedNFTMetadataFormGroup.tsx
index 0550fa2e15d..bce2afaa91c 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/nft/AdvancedNFTMetadataFormGroup.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/nft/AdvancedNFTMetadataFormGroup.tsx
@@ -14,8 +14,8 @@ import type { UseFormReturn } from "react-hook-form";
 import type { NFTInput } from "thirdweb/utils";
 
 type AdvancedNFTMetadataFormGroupValues = {
-  customImage?: string;
-  customAnimationUrl?: string;
+  image?: NFTInput["image"];
+  animation_url?: NFTInput["animation_url"];
   background_color?: NFTInput["background_color"];
   external_url?: NFTInput["external_url"];
 };
@@ -56,12 +56,15 @@ export function AdvancedNFTMetadataFormGroup<
 
       <FormField
         control={form.control}
-        name="customImage"
+        name="image"
         render={({ field }) => (
           <FormItem>
             <FormLabel>Image URI</FormLabel>
             <FormControl>
-              <Input {...field} />
+              <Input
+                {...field}
+                value={typeof field.value === "string" ? field.value : ""}
+              />
             </FormControl>
             <FormDescription>
               If you already have your NFT image pre-uploaded, you can set the
@@ -74,12 +77,15 @@ export function AdvancedNFTMetadataFormGroup<
 
       <FormField
         control={form.control}
-        name="customAnimationUrl"
+        name="animation_url"
         render={({ field }) => (
           <FormItem>
             <FormLabel>Animation URI</FormLabel>
             <FormControl>
-              <Input {...field} />
+              <Input
+                {...field}
+                value={typeof field.value === "string" ? field.value : ""}
+              />
             </FormControl>
             <FormDescription>
               If you already have your NFT Animation URL pre-uploaded, you can
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-form.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-form.tsx
index 29fa3524010..41b4178b64e 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-form.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-form.tsx
@@ -7,7 +7,6 @@ import {
   AccordionIcon,
   AccordionItem,
   AccordionPanel,
-  Divider,
   FormControl,
   Input,
   Textarea,
@@ -32,6 +31,7 @@ import {
   updateTokenURI as updateTokenURI1155,
 } from "thirdweb/extensions/erc1155";
 import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
+import type { NFTMetadata } from "thirdweb/utils";
 import {
   Button,
   FormErrorMessage,
@@ -68,20 +68,20 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
   const address = useActiveAccount()?.address;
 
   const transformedQueryData = useMemo(() => {
-    return {
-      name: nft?.metadata.name || "",
-      description: nft?.metadata.description || "",
-      external_url: nft?.metadata.external_url || "",
-      background_color: nft?.metadata.background_color || "",
-      attributes: nft?.metadata.attributes || [],
-      // We override these in the submit if they haven't been changed
-      image: nft?.metadata.image || undefined,
-      animation_url: nft?.metadata.animation_url || undefined,
-      // No need for these, but we need to pass them to the form
-      supply: 0,
-      customImage: "",
-      customAnimationUrl: "",
+    const nftMetadata: Partial<NFTMetadata> = {
+      // basic
+      name: nft.metadata.name || "",
+      description: nft.metadata.description || "",
+      // media
+      image: nft.metadata.image,
+      animation_url: nft.metadata.animation_url,
+      // advanced
+      external_url: nft.metadata.external_url || "",
+      background_color: nft.metadata.background_color || "",
+      attributes: nft.metadata.attributes,
     };
+
+    return nftMetadata;
   }, [nft]);
 
   const {
@@ -91,13 +91,7 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
     watch,
     handleSubmit,
     formState: { errors, isDirty },
-  } = useForm<
-    NFTMetadataInputLimited & {
-      supply: number;
-      customImage: string;
-      customAnimationUrl: string;
-    }
-  >({
+  } = useForm<NFTMetadataInputLimited>({
     defaultValues: transformedQueryData,
     values: transformedQueryData,
   });
@@ -140,6 +134,9 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
   };
 
   const imageUrl = useImageFileOrUrl(watch("image") as File | string);
+  const animationUrlFormValue = watch("animation_url");
+  const imageUrlFormValue = watch("image");
+
   const mediaFileUrl =
     watch("animation_url") instanceof File
       ? watch("animation_url")
@@ -190,11 +187,8 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
         try {
           const newMetadata = parseAttributes({
             ...data,
-            image: data.image || data.customImage || nft.metadata.image,
-            animation_url:
-              data.animation_url ||
-              data.customAnimationUrl ||
-              nft.metadata.animation_url,
+            image: data.image || nft.metadata.image,
+            animation_url: data.animation_url || nft.metadata.animation_url,
           });
 
           const transaction = useUpdateMetadata
@@ -249,10 +243,6 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
         }
       })}
     >
-      <div className="flex flex-col gap-2">
-        <Heading size="subtitle.md">Metadata</Heading>
-        <Divider />
-      </div>
       <FormControl isRequired isInvalid={!!errors.name}>
         <FormLabel>Name</FormLabel>
         <Input autoFocus {...register("name")} />
@@ -263,22 +253,34 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
         <div className="flex flex-row flex-wrap gap-3">
           {nft?.metadata && !mediaFileUrl && (
             <NFTMediaWithEmptyState
-              metadata={nft.metadata}
+              metadata={{
+                name: nft.metadata.name,
+                animation_url:
+                  typeof animationUrlFormValue === "string"
+                    ? animationUrlFormValue
+                    : nft.metadata.animation_url,
+                image:
+                  typeof imageUrlFormValue === "string"
+                    ? imageUrlFormValue
+                    : nft.metadata.image,
+              }}
               width="200px"
               height="200px"
             />
           )}
+
           <FileInput
             previewMaxWidth="200px"
             value={mediaFileUrl as File | string}
             showUploadButton
             showPreview={nft?.metadata ? !!mediaFileUrl : true}
             setValue={setFile}
-            className="rounded border border-border transition-all duration-200"
+            className="shrink-0 rounded border border-border transition-all duration-200"
             selectOrUpload="Upload"
             helperText={nft?.metadata ? "New Media" : "Media"}
           />
         </div>
+
         <FormHelperText>
           You can upload image, audio, video, html, text, pdf, and 3d model
           files here.
@@ -319,6 +321,7 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
         register={register}
         setValue={setValue}
       />
+
       <Accordion
         allowToggle={!(errors.background_color || errors.external_url)}
         index={errors.background_color || errors.external_url ? [0] : undefined}
@@ -328,7 +331,7 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
             <Heading size="subtitle.md">Advanced Options</Heading>
             <AccordionIcon />
           </AccordionButton>
-          <AccordionPanel className="flex flex-col gap-6 px-0">
+          <AccordionPanel className="!px-0 flex flex-col gap-6">
             <FormControl isInvalid={!!errors.background_color}>
               <FormLabel>
                 Background Color <OpenSeaPropertyBadge />
@@ -357,26 +360,40 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
                 </FormErrorMessage>
               </FormControl>
             )}
-            <FormControl isInvalid={!!errors.customImage}>
+            <FormControl isInvalid={!!errors.image}>
               <FormLabel>Image URL</FormLabel>
-              <Input max="6" {...register("customImage")} />
+              <Input
+                value={
+                  typeof imageUrlFormValue === "string" ? imageUrlFormValue : ""
+                }
+                onChange={(e) => {
+                  setValue("image", e.target.value);
+                }}
+              />
               <FormHelperText>
-                If you already have your NFT image pre-uploaded, you can set the
-                URL or URI here.
+                If you already have your NFT image pre-uploaded to a URL, you
+                can specify it here instead of uploading the media file
               </FormHelperText>
-              <FormErrorMessage>
-                {errors?.customImage?.message}
-              </FormErrorMessage>
+              <FormErrorMessage>{errors?.image?.message}</FormErrorMessage>
             </FormControl>
-            <FormControl isInvalid={!!errors.customAnimationUrl}>
+            <FormControl isInvalid={!!errors.animation_url}>
               <FormLabel>Animation URL</FormLabel>
-              <Input max="6" {...register("customAnimationUrl")} />
+              <Input
+                value={
+                  typeof animationUrlFormValue === "string"
+                    ? animationUrlFormValue
+                    : ""
+                }
+                onChange={(e) => {
+                  setValue("animation_url", e.target.value);
+                }}
+              />
               <FormHelperText>
-                If you already have your NFT Animation URL pre-uploaded, you can
-                set the URL or URI here.
+                If you already have your NFT Animation URL pre-uploaded to a
+                URL, you can specify it here instead of uploading the media file
               </FormHelperText>
               <FormErrorMessage>
-                {errors?.customAnimationUrl?.message}
+                {errors?.animation_url?.message}
               </FormErrorMessage>
             </FormControl>
           </AccordionPanel>
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-tab.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-tab.tsx
index 44b49fd90af..e8fca48a11b 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-tab.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-tab.tsx
@@ -36,8 +36,8 @@ const UpdateMetadataTab: React.FC<UpdateMetadataTabProps> = ({
         <Button variant="primary">Update Metadata</Button>
       </SheetTrigger>
       <SheetContent className="w-full overflow-y-auto sm:min-w-[540px] lg:min-w-[700px]">
-        <SheetHeader>
-          <SheetTitle className="text-left">Mint NFT</SheetTitle>
+        <SheetHeader className="mb-5">
+          <SheetTitle className="text-left">Update NFT Metadata</SheetTitle>
         </SheetHeader>
         <UpdateNftMetadata
           twAccount={twAccount}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/lazy-mint-form.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/lazy-mint-form.tsx
index b6d2f82cac7..983431c038c 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/lazy-mint-form.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/lazy-mint-form.tsx
@@ -62,13 +62,7 @@ export const LazyMintNftForm: React.FC<LazyMintNftFormParams> = ({
     watch,
     handleSubmit,
     formState: { errors, isDirty },
-  } = useForm<
-    NFTMetadataInputLimited & {
-      supply: number;
-      customImage: string;
-      customAnimationUrl: string;
-    }
-  >();
+  } = useForm<NFTMetadataInputLimited>();
 
   const setFile = (file: File) => {
     if (file.type.includes("image")) {
@@ -108,6 +102,9 @@ export const LazyMintNftForm: React.FC<LazyMintNftFormParams> = ({
   };
 
   const imageUrl = useImageFileOrUrl(watch("image") as File | string);
+  const animationUrlFormValue = watch("animation_url");
+  const imageUrlFormValue = watch("image");
+
   const mediaFileUrl =
     watch("animation_url") instanceof File
       ? watch("animation_url")
@@ -261,7 +258,7 @@ export const LazyMintNftForm: React.FC<LazyMintNftFormParams> = ({
               <Heading size="subtitle.md">Advanced Options</Heading>
               <AccordionIcon />
             </AccordionButton>
-            <AccordionPanel className="flex flex-col gap-6 px-0">
+            <AccordionPanel className="!px-0 flex flex-col gap-6">
               <FormControl isInvalid={!!errors.background_color}>
                 <FormLabel>
                   Background Color <OpenSeaPropertyBadge />
@@ -290,26 +287,45 @@ export const LazyMintNftForm: React.FC<LazyMintNftFormParams> = ({
                   </FormErrorMessage>
                 </FormControl>
               )}
-              <FormControl isInvalid={!!errors.customImage}>
+              <FormControl isInvalid={!!errors.image}>
                 <FormLabel>Image URL</FormLabel>
-                <Input max="6" {...register("customImage")} />
+                <Input
+                  {...register("image")}
+                  value={
+                    typeof imageUrlFormValue === "string"
+                      ? imageUrlFormValue
+                      : ""
+                  }
+                  onChange={(e) => {
+                    setValue("image", e.target.value);
+                  }}
+                />
                 <FormHelperText>
-                  If you already have your NFT image pre-uploaded, you can set
-                  the URL or URI here.
+                  If you already have your NFT image pre-uploaded to a URL, you
+                  can specify it here instead of uploading the media file
                 </FormHelperText>
-                <FormErrorMessage>
-                  {errors?.customImage?.message}
-                </FormErrorMessage>
+                <FormErrorMessage>{errors?.image?.message}</FormErrorMessage>
               </FormControl>
-              <FormControl isInvalid={!!errors.customAnimationUrl}>
+              <FormControl isInvalid={!!errors.animation_url}>
                 <FormLabel>Animation URL</FormLabel>
-                <Input max="6" {...register("customAnimationUrl")} />
+                <Input
+                  {...register("animation_url")}
+                  value={
+                    typeof animationUrlFormValue === "string"
+                      ? animationUrlFormValue
+                      : ""
+                  }
+                  onChange={(e) => {
+                    setValue("animation_url", e.target.value);
+                  }}
+                />
                 <FormHelperText>
-                  If you already have your NFT Animation URL pre-uploaded, you
-                  can set the URL or URI here.
+                  If you already have your NFT Animation URL pre-uploaded to a
+                  URL, you can specify it here instead of uploading the media
+                  file
                 </FormHelperText>
                 <FormErrorMessage>
-                  {errors?.customAnimationUrl?.message}
+                  {errors?.animation_url?.message}
                 </FormErrorMessage>
               </FormControl>
             </AccordionPanel>
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/mint-form.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/mint-form.tsx
index 6eb3bd6f01b..720f18143e9 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/mint-form.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/mint-form.tsx
@@ -63,8 +63,6 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({
   } = useForm<
     NFTMetadataInputLimited & {
       supply: number;
-      customImage: string;
-      customAnimationUrl: string;
     }
   >();
 
@@ -106,6 +104,8 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({
   };
 
   const imageUrl = useImageFileOrUrl(watch("image") as File | string);
+  const animationUrlFormValue = watch("animation_url");
+  const imageUrlFormValue = watch("image");
   const mediaFileUrl =
     watch("animation_url") instanceof File
       ? watch("animation_url")
@@ -144,7 +144,7 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({
       <form
         className="mt-6 flex flex-col gap-6"
         id={MINT_FORM_ID}
-        onSubmit={handleSubmit(async (data) => {
+        onSubmit={handleSubmit(async ({ supply, ...data }) => {
           if (!address) {
             toast.error("Please connect your wallet to mint.");
             return;
@@ -153,8 +153,8 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({
           try {
             const dataWithCustom = {
               ...data,
-              image: data.image || data.customImage,
-              animation_url: data.animation_url || data.customAnimationUrl,
+              image: data.image,
+              animation_url: data.animation_url,
             };
 
             trackEvent({
@@ -169,7 +169,7 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({
                   contract,
                   to: address,
                   nft,
-                  supply: BigInt(data.supply),
+                  supply: BigInt(supply),
                 });
             await sendAndConfirmTx.mutateAsync(transaction, {
               onSuccess: () => {
@@ -216,7 +216,7 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({
               showUploadButton
               showPreview={true}
               setValue={setFile}
-              className="rounded border border-border transition-all duration-200"
+              className="shrink-0 rounded border border-border transition-all duration-200"
               selectOrUpload="Upload"
               helperText="Media"
             />
@@ -238,7 +238,7 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({
               value={imageUrl}
               showUploadButton
               setValue={(file) => setValue("image", file)}
-              className="rounded border border-border transition-all"
+              className="shrink-0 rounded border border-border transition-all"
             />
             <FormHelperText>
               You can optionally upload an image as the cover of your NFT.
@@ -313,26 +313,42 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({
                   </FormErrorMessage>
                 </FormControl>
               )}
-              <FormControl isInvalid={!!errors.customImage}>
+              <FormControl isInvalid={!!errors.image}>
                 <FormLabel>Image URL</FormLabel>
-                <Input max="6" {...register("customImage")} />
+                <Input
+                  value={
+                    typeof imageUrlFormValue === "string"
+                      ? imageUrlFormValue
+                      : ""
+                  }
+                  onChange={(e) => {
+                    setValue("image", e.target.value);
+                  }}
+                />
                 <FormHelperText>
-                  If you already have your NFT image pre-uploaded, you can set
-                  the URL or URI here.
+                  If you already have your NFT image pre-uploaded to a URL, you
+                  can specify it here instead of uploading the asset
                 </FormHelperText>
-                <FormErrorMessage>
-                  {errors?.customImage?.message}
-                </FormErrorMessage>
+                <FormErrorMessage>{errors?.image?.message}</FormErrorMessage>
               </FormControl>
-              <FormControl isInvalid={!!errors.customAnimationUrl}>
+              <FormControl isInvalid={!!errors.animation_url}>
                 <FormLabel>Animation URL</FormLabel>
-                <Input max="6" {...register("customAnimationUrl")} />
+                <Input
+                  value={
+                    typeof animationUrlFormValue === "string"
+                      ? animationUrlFormValue
+                      : ""
+                  }
+                  onChange={(e) => {
+                    setValue("animation_url", e.target.value);
+                  }}
+                />
                 <FormHelperText>
-                  If you already have your NFT Animation URL pre-uploaded, you
-                  can set the URL or URI here.
+                  If you already have your NFT Animation URL pre-uploaded to a
+                  URL, you can specify it here instead of uploading the asset
                 </FormHelperText>
                 <FormErrorMessage>
-                  {errors?.customAnimationUrl?.message}
+                  {errors?.animation_url?.message}
                 </FormErrorMessage>
               </FormControl>
             </AccordionPanel>
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-form.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-form.tsx
index 0c434351e18..43ed8339d0f 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-form.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-form.tsx
@@ -49,13 +49,7 @@ export const SharedMetadataForm: React.FC<{
     watch,
     handleSubmit,
     formState: { errors, isDirty },
-  } = useForm<
-    NFTMetadataInputLimited & {
-      supply: number;
-      customImage: string;
-      customAnimationUrl: string;
-    }
-  >();
+  } = useForm<NFTMetadataInputLimited>();
 
   const setFile = (file: File) => {
     if (file.type.includes("image")) {
@@ -95,6 +89,8 @@ export const SharedMetadataForm: React.FC<{
   };
 
   const imageUrl = useImageFileOrUrl(watch("image") as File | string);
+  const animationUrlFormValue = watch("animation_url");
+  const imageUrlFormValue = watch("image");
   const mediaFileUrl =
     watch("animation_url") instanceof File
       ? watch("animation_url")
@@ -135,8 +131,8 @@ export const SharedMetadataForm: React.FC<{
 
           const dataWithCustom = {
             ...data,
-            image: data.image || data.customImage,
-            animation_url: data.animation_url || data.customAnimationUrl,
+            image: data.image,
+            animation_url: data.animation_url,
           };
 
           trackEvent({
@@ -194,7 +190,7 @@ export const SharedMetadataForm: React.FC<{
               showUploadButton
               showPreview={true}
               setValue={setFile}
-              className="rounded border border-border transition-all duration-200"
+              className="shrink-0 rounded border border-border transition-all duration-200"
               selectOrUpload="Upload"
               helperText="Media"
             />
@@ -216,7 +212,7 @@ export const SharedMetadataForm: React.FC<{
               value={imageUrl}
               showUploadButton
               setValue={(file) => setValue("image", file)}
-              className="rounded border border-border transition-all"
+              className="shrink-0 rounded border border-border transition-all"
             />
             <FormHelperText>
               You can optionally upload an image as the cover of your NFT.
@@ -243,26 +239,42 @@ export const SharedMetadataForm: React.FC<{
               <AccordionIcon />
             </AccordionButton>
             <AccordionPanel className="flex flex-col gap-6 px-0">
-              <FormControl isInvalid={!!errors.customImage}>
+              <FormControl isInvalid={!!errors.image}>
                 <FormLabel>Image URL</FormLabel>
-                <Input max="6" {...register("customImage")} />
+                <Input
+                  value={
+                    typeof imageUrlFormValue === "string"
+                      ? imageUrlFormValue
+                      : ""
+                  }
+                  onChange={(e) => {
+                    setValue("image", e.target.value);
+                  }}
+                />
                 <FormHelperText>
                   If you already have your NFT image pre-uploaded, you can set
                   the URL or URI here.
                 </FormHelperText>
-                <FormErrorMessage>
-                  {errors?.customImage?.message}
-                </FormErrorMessage>
+                <FormErrorMessage>{errors?.image?.message}</FormErrorMessage>
               </FormControl>
-              <FormControl isInvalid={!!errors.customAnimationUrl}>
+              <FormControl isInvalid={!!errors.animation_url}>
                 <FormLabel>Animation URL</FormLabel>
-                <Input max="6" {...register("customAnimationUrl")} />
+                <Input
+                  value={
+                    typeof animationUrlFormValue === "string"
+                      ? animationUrlFormValue
+                      : ""
+                  }
+                  onChange={(e) => {
+                    setValue("animation_url", e.target.value);
+                  }}
+                />
                 <FormHelperText>
                   If you already have your NFT Animation URL pre-uploaded, you
                   can set the URL or URI here.
                 </FormHelperText>
                 <FormErrorMessage>
-                  {errors?.customAnimationUrl?.message}
+                  {errors?.animation_url?.message}
                 </FormErrorMessage>
               </FormControl>
             </AccordionPanel>
diff --git a/apps/dashboard/src/components/shared/FileInput.tsx b/apps/dashboard/src/components/shared/FileInput.tsx
index 2afc529d7c2..0194292d426 100644
--- a/apps/dashboard/src/components/shared/FileInput.tsx
+++ b/apps/dashboard/src/components/shared/FileInput.tsx
@@ -174,7 +174,7 @@ export const FileInput: React.FC<IFileInputProps> = ({
         ))}
 
       {showUploadButton || noDisplay ? (
-        <div className="flex flex-col">
+        <div className="flex flex-col gap-2">
           {showUploadButton && (
             <Button
               onClick={open}
@@ -187,12 +187,19 @@ export const FileInput: React.FC<IFileInputProps> = ({
             </Button>
           )}
           {noDisplay && (
-            <Link href={fileUrl} target="_blank" className="no-underline">
-              <Button variant="outline" className="gap-2">
+            <Button
+              variant="outline"
+              className="gap-2"
+              asChild
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+            >
+              <Link href={fileUrl} target="_blank" className="no-underline">
                 <EyeIcon className="size-4" />
                 View File
-              </Button>
-            </Link>
+              </Link>
+            </Button>
           )}
         </div>
       ) : null}