diff --git a/apps/web/src/modules/dashboard/CreateActions.tsx b/apps/web/src/modules/dashboard/CreateActions.tsx
index cf59ab9d4..39dd6e9ce 100644
--- a/apps/web/src/modules/dashboard/CreateActions.tsx
+++ b/apps/web/src/modules/dashboard/CreateActions.tsx
@@ -38,7 +38,7 @@ export const CreateActions: React.FC<CreateActionsProps> = ({ userAddress }) =>
         <Button
           as={Link}
           href="/create"
-          style={{ width: '100%', flex: 1 }}
+          style={{ width: '100%' }}
           variant="secondaryOutline"
         >
           Create a DAO
diff --git a/packages/create-dao-ui/src/components/AllocationForm/AllocationForm.tsx b/packages/create-dao-ui/src/components/AllocationForm/AllocationForm.tsx
index 04a18683e..d1616070e 100644
--- a/packages/create-dao-ui/src/components/AllocationForm/AllocationForm.tsx
+++ b/packages/create-dao-ui/src/components/AllocationForm/AllocationForm.tsx
@@ -119,8 +119,6 @@ export const AllocationForm: React.FC<AllocationFormProps> = ({ title }) => {
 
   const { address } = useAccount()
 
-  // Determine if founder allocation is enabled based on existing values
-  // Enable if there's more than one founder OR if the first founder has non-zero allocation
   const hasExistingAllocation =
     founderAllocation.length > 1 ||
     (founderAllocation.length === 1 &&
@@ -129,6 +127,12 @@ export const AllocationForm: React.FC<AllocationFormProps> = ({ title }) => {
   const [hasFounderAllocation, setHasFounderAllocation] =
     useState<boolean>(hasExistingAllocation)
 
+  useEffect(() => {
+    setHasFounderAllocation(hasExistingAllocation)
+  }, [hasExistingAllocation])
+
+  // Determine if founder allocation is enabled based on existing values
+  // Enable if there's more than one founder OR if the first founder has non-zero allocation
   // should always default to the current signer address given this field is disabled
   const initialFounderValues =
     founderAllocation.length === 0
@@ -154,34 +158,6 @@ export const AllocationForm: React.FC<AllocationFormProps> = ({ title }) => {
     setActiveSection(activeSection - 1)
   }
 
-  const handleToggleFounderAllocation = () => {
-    const newState = !hasFounderAllocation
-    setHasFounderAllocation(newState)
-
-    // If toggling OFF, set form values to single founder with 0% allocation
-    if (!newState && formRef.current) {
-      formRef.current.setFieldValue('founderAllocation', [
-        {
-          founderAddress: address || '',
-          allocationPercentage: 0,
-          endDate: getOneMonthFromNow(),
-          admin: true,
-        },
-      ])
-    }
-    // If toggling ON, reset to initial values (empty allocation to force user input)
-    else if (newState && formRef.current) {
-      formRef.current.setFieldValue('founderAllocation', [
-        {
-          founderAddress: address || '',
-          allocationPercentage: '',
-          endDate: '',
-          admin: true,
-        },
-      ])
-    }
-  }
-
   const handleSubmit = async ({
     founderAllocation,
     founderRewardRecipient,
@@ -249,6 +225,34 @@ export const AllocationForm: React.FC<AllocationFormProps> = ({ title }) => {
         onSubmit={handleSubmit}
       >
         {(formik) => {
+          const handleToggleFounderAllocation = (nextState: boolean) => {
+            setHasFounderAllocation(nextState)
+
+            // Toggling off keeps the admin founder row but clears the allocation.
+            // Toggling on restores an empty allocation so the user must fill it in.
+            formik.setFieldValue(
+              'founderAllocation',
+              nextState
+                ? [
+                    {
+                      founderAddress: address || '',
+                      allocationPercentage: '',
+                      endDate: '',
+                      admin: true,
+                    },
+                  ]
+                : [
+                    {
+                      founderAddress: address || '',
+                      allocationPercentage: 0,
+                      endDate: getOneMonthFromNow(),
+                      admin: true,
+                    },
+                  ],
+              true
+            )
+          }
+
           return (
             <Form>
               <FormErrorObserver setIsFormSubmittable={setIsFormSubmittable} />
@@ -284,7 +288,7 @@ export const AllocationForm: React.FC<AllocationFormProps> = ({ title }) => {
                 <Heading size="xs">Token Allocation</Heading>
                 <Toggle
                   on={hasFounderAllocation}
-                  onToggle={handleToggleFounderAllocation}
+                  onToggle={() => handleToggleFounderAllocation(!hasFounderAllocation)}
                 />
               </Flex>
 
diff --git a/packages/create-dao-ui/src/components/Artwork/ArtworkUpload.tsx b/packages/create-dao-ui/src/components/Artwork/ArtworkUpload.tsx
index f0b31a10d..3701cc409 100644
--- a/packages/create-dao-ui/src/components/Artwork/ArtworkUpload.tsx
+++ b/packages/create-dao-ui/src/components/Artwork/ArtworkUpload.tsx
@@ -6,11 +6,19 @@ import {
   ArtworkUpload as UploadComponent,
   LayerOrdering,
 } from '@buildeross/ui/Artwork'
+import { AnimatedModal } from '@buildeross/ui/Modal'
 import { type FormikProps } from 'formik'
 import { motion } from 'framer-motion'
-import React, { BaseSyntheticEvent, ReactElement, useCallback, useEffect } from 'react'
+import React, {
+  BaseSyntheticEvent,
+  ReactElement,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
 
 import { useFormStore } from '../../stores'
+import { ConfirmReset } from '../ConfirmReset/ConfirmReset'
 import { artworkPreviewPanel } from './ArtworkUpload.css'
 
 const previewVariants = {
@@ -51,6 +59,7 @@ export const ArtworkUpload: React.FC<ArtworkFormProps> = ({
   errorMessage,
   formik,
 }) => {
+  const [resetModalOpen, setResetModalOpen] = useState(false)
   const {
     setUpArtwork,
     setSetUpArtwork,
@@ -124,6 +133,33 @@ export const ArtworkUpload: React.FC<ArtworkFormProps> = ({
     [setOrderedLayers, setFiles]
   )
 
+  const handleResetArtwork = useCallback(() => {
+    if (!formik) return
+
+    const emptyArtworkValues = {
+      artwork: [],
+      filesLength: '',
+      fileType: '',
+    }
+
+    formik.resetForm({ values: emptyArtworkValues })
+    setSetUpArtwork({ ...emptyArtworkValues })
+    setIpfsUpload([])
+    setOrderedLayers([])
+    setIpfsUploadProgress(0)
+    setIsUploadingToIPFS(false)
+    setFiles(undefined)
+    setResetModalOpen(false)
+  }, [
+    formik,
+    setFiles,
+    setIpfsUpload,
+    setIpfsUploadProgress,
+    setIsUploadingToIPFS,
+    setOrderedLayers,
+    setSetUpArtwork,
+  ])
+
   // Set up artwork traits into store
   useEffect(() => {
     if (!uploadedArtwork || !formik) return
@@ -158,6 +194,19 @@ export const ArtworkUpload: React.FC<ArtworkFormProps> = ({
   )
   return (
     <>
+      <AnimatedModal
+        open={resetModalOpen}
+        close={() => setResetModalOpen(false)}
+        size="small"
+      >
+        <ConfirmReset
+          handleReset={handleResetArtwork}
+          onDismiss={() => setResetModalOpen(false)}
+          heading="Reset artwork?"
+          helperText="This will clear your uploaded artwork, trait ordering, and preview so you can start over."
+          confirmLabel="Reset artwork"
+        />
+      </AnimatedModal>
       <UploadComponent
         id={id}
         inputLabel={inputLabel}
@@ -170,6 +219,7 @@ export const ArtworkUpload: React.FC<ArtworkFormProps> = ({
         artworkError={artworkError}
         fileType={setUpArtwork.fileType}
         layerOrdering={layerOrdering}
+        onReset={() => setResetModalOpen(true)}
       />
       {showPreview && (
         <motion.div
diff --git a/packages/create-dao-ui/src/components/ConfirmReset/ConfirmReset.tsx b/packages/create-dao-ui/src/components/ConfirmReset/ConfirmReset.tsx
index b677e561f..0e189a08a 100644
--- a/packages/create-dao-ui/src/components/ConfirmReset/ConfirmReset.tsx
+++ b/packages/create-dao-ui/src/components/ConfirmReset/ConfirmReset.tsx
@@ -12,13 +12,22 @@ import {
 interface ConfirmResetProps {
   handleReset: () => void
   onDismiss: () => void
+  heading?: string
+  helperText?: string
+  confirmLabel?: string
 }
 
-export const ConfirmReset: React.FC<ConfirmResetProps> = ({ handleReset, onDismiss }) => {
+export const ConfirmReset: React.FC<ConfirmResetProps> = ({
+  handleReset,
+  onDismiss,
+  heading = 'Reset all DAO setup?',
+  helperText = 'This will clear all saved settings across every step, including artwork, auction settings, rewards, and allocations. This cannot be undone.',
+  confirmLabel = 'Reset all setup',
+}) => {
   return (
     <Flex direction={'column'} w={'100%'} gap={'x2'}>
       <Flex align="center" justify="space-between" w={'100%'}>
-        <Flex className={confirmResetHeadingStyle}>Reset form?</Flex>
+        <Flex className={confirmResetHeadingStyle}>{heading}</Flex>
         <Button
           variant={'ghost'}
           onClick={onDismiss}
@@ -28,12 +37,10 @@ export const ConfirmReset: React.FC<ConfirmResetProps> = ({ handleReset, onDismi
           <Icon id="cross" />
         </Button>
       </Flex>
-      <Flex className={confirmResetHelperStyle}>
-        This will clear all your DAO settings and start over.
-      </Flex>
+      <Flex className={confirmResetHelperStyle}>{helperText}</Flex>
       <Flex direction={'column'} align={'stretch'} w={'100%'} mt={'x2'}>
         <Button className={confirmResetButton} onClick={handleReset}>
-          Reset
+          {confirmLabel}
         </Button>
         <Button className={dismissResetButton} onClick={onDismiss}>
           Cancel
diff --git a/packages/create-dao-ui/src/components/FormNavButtons/FormNavButtons.css.ts b/packages/create-dao-ui/src/components/FormNavButtons/FormNavButtons.css.ts
index 18fc0400e..e7d9e97f8 100644
--- a/packages/create-dao-ui/src/components/FormNavButtons/FormNavButtons.css.ts
+++ b/packages/create-dao-ui/src/components/FormNavButtons/FormNavButtons.css.ts
@@ -1,14 +1,9 @@
 import { vars } from '@buildeross/zord'
 import { style } from '@vanilla-extract/css'
 
-export const formNavResetButton = style({
-  marginRight: 8,
-})
-
 export const formNavContinueButton = style({
   borderRadius: 10,
   height: 60,
-  marginLeft: 8,
 })
 
 export const formNavMobileBar = style({
diff --git a/packages/create-dao-ui/src/components/FormNavButtons/FormNavButtons.tsx b/packages/create-dao-ui/src/components/FormNavButtons/FormNavButtons.tsx
index 6c77a7cbf..f13c11951 100644
--- a/packages/create-dao-ui/src/components/FormNavButtons/FormNavButtons.tsx
+++ b/packages/create-dao-ui/src/components/FormNavButtons/FormNavButtons.tsx
@@ -10,7 +10,6 @@ import {
   formNavDesktopRow,
   formNavMobileBar,
   formNavMobileBarSpacer,
-  formNavResetButton,
 } from './FormNavButtons.css'
 
 interface FormNavButtonsProps {
@@ -82,7 +81,7 @@ export const FormNavButtons: React.FC<FormNavButtonsProps> = ({
       )}
 
       <div className={formNavDesktopRow}>
-        <Flex align={'center'} mt={'x8'}>
+        <Flex align={'center'} mt={'x8'} gap={'x2'}>
           {showReset && (
             <Button
               justify={'center'}
@@ -94,7 +93,6 @@ export const FormNavButtons: React.FC<FormNavButtonsProps> = ({
               type="button"
               onClick={() => setIsModalOpen(true)}
               aria-label="Reset form"
-              className={formNavResetButton}
             >
               <Icon id="trash" />
             </Button>
@@ -143,7 +141,7 @@ export const FormNavButtons: React.FC<FormNavButtonsProps> = ({
       {isMounted &&
         createPortal(
           <div className={formNavMobileBar}>
-            <Flex align={'center'}>
+            <Flex align={'center'} gap={'x2'}>
               {showReset && (
                 <Button
                   justify={'center'}
@@ -155,7 +153,6 @@ export const FormNavButtons: React.FC<FormNavButtonsProps> = ({
                   type="button"
                   onClick={() => setIsModalOpen(true)}
                   aria-label="Reset form"
-                  className={formNavResetButton}
                 >
                   <Icon id="trash" />
                 </Button>
diff --git a/packages/create-dao-ui/src/components/ReviewAndDeploy/ReviewSection.css.ts b/packages/create-dao-ui/src/components/ReviewAndDeploy/ReviewSection.css.ts
index ac681543e..092ad7da7 100644
--- a/packages/create-dao-ui/src/components/ReviewAndDeploy/ReviewSection.css.ts
+++ b/packages/create-dao-ui/src/components/ReviewAndDeploy/ReviewSection.css.ts
@@ -23,7 +23,6 @@ export const reviewSectionSubHeading = style({
   width: '100%',
   fontSize: 23,
   fontWeight: 700,
-  borderRadius: '16px',
   backgroundColor: vars.color.background2,
   selectors: {
     '&:hover': {
diff --git a/packages/create-dao-ui/src/components/ReviewAndDeploy/ReviewSection.tsx b/packages/create-dao-ui/src/components/ReviewAndDeploy/ReviewSection.tsx
index ce7d09d48..61ad6d07c 100644
--- a/packages/create-dao-ui/src/components/ReviewAndDeploy/ReviewSection.tsx
+++ b/packages/create-dao-ui/src/components/ReviewAndDeploy/ReviewSection.tsx
@@ -44,6 +44,7 @@ export const ReviewSection: React.FC<{
       <Flex
         align={'center'}
         justify={'center'}
+        borderRadius={'curved'}
         className={reviewSectionSubHeading}
         px={'x6'}
         py={'x4'}
diff --git a/packages/dao-ui/src/components/MinterManagementModal/MinterManagementModal.tsx b/packages/dao-ui/src/components/MinterManagementModal/MinterManagementModal.tsx
index aa3ace5b1..063cddd02 100644
--- a/packages/dao-ui/src/components/MinterManagementModal/MinterManagementModal.tsx
+++ b/packages/dao-ui/src/components/MinterManagementModal/MinterManagementModal.tsx
@@ -7,7 +7,7 @@ import { ContractButton } from '@buildeross/ui/ContractButton'
 import { SmartInput } from '@buildeross/ui/Fields'
 import { AnimatedModal } from '@buildeross/ui/Modal'
 import { getEnsAddress } from '@buildeross/utils/ens'
-import { Box, Button, Flex, Heading, Icon, Text, theme } from '@buildeross/zord'
+import { Box, Button, Flex, Heading, Text, theme } from '@buildeross/zord'
 import React from 'react'
 import { isAddress, zeroAddress } from 'viem'
 import { useAccount, useConfig, useWriteContract } from 'wagmi'
@@ -107,12 +107,11 @@ const MinterCard: React.FC<MinterCardProps> = ({
               variant="ghost"
               style={{
                 minWidth: 'auto',
-                padding: '4px 8px',
                 fontSize: '12px',
+                padding: '1px 6px',
               }}
-            >
-              <Icon id="cross-16" style={{ width: 16, height: 16 }} />
-            </Button>
+              icon="cross"
+            />
           )}
           <Flex align="center" gap="x2">
             <input
@@ -440,7 +439,7 @@ export const MinterManagementModal: React.FC<MinterManagementModalProps> = ({
               onClick={handleAddCustomMinter}
               disabled={!customMinterInput || isSettingUpMinter || isCheckingCustomMinter}
               variant="secondary"
-              style={{ minWidth: '80px', marginBottom: '32px' }}
+              style={{ minWidth: '80px', marginBottom: '32px', height: '60px' }}
             >
               {isCheckingCustomMinter ? 'Adding...' : 'Add'}
             </Button>
diff --git a/packages/feed-ui/src/AuctionBidPlacedItem.tsx b/packages/feed-ui/src/AuctionBidPlacedItem.tsx
index 6aee3dee2..dc314a7f4 100644
--- a/packages/feed-ui/src/AuctionBidPlacedItem.tsx
+++ b/packages/feed-ui/src/AuctionBidPlacedItem.tsx
@@ -35,7 +35,7 @@ export const AuctionBidPlacedItem: React.FC<AuctionBidPlacedItemProps> = ({ item
           <FallbackImage
             src={item.tokenImage}
             alt={item.tokenName}
-            loadingPlaceholder={<ImageSkeleton />}
+            loadingPlaceholder={<ImageSkeleton fullWidth />}
             style={{ width: '100%', height: '100%', objectFit: 'cover' }}
           />
         </Box>
diff --git a/packages/feed-ui/src/AuctionCreatedItem.tsx b/packages/feed-ui/src/AuctionCreatedItem.tsx
index 464038e7f..2beb00ba9 100644
--- a/packages/feed-ui/src/AuctionCreatedItem.tsx
+++ b/packages/feed-ui/src/AuctionCreatedItem.tsx
@@ -23,7 +23,7 @@ export const AuctionCreatedItem: React.FC<AuctionCreatedItemProps> = ({ item })
           <FallbackImage
             src={item.tokenImage}
             alt={item.tokenName}
-            loadingPlaceholder={<ImageSkeleton />}
+            loadingPlaceholder={<ImageSkeleton fullWidth />}
             style={{ width: '100%', height: '100%', objectFit: 'cover' }}
           />
         </Box>
diff --git a/packages/feed-ui/src/AuctionSettledItem.tsx b/packages/feed-ui/src/AuctionSettledItem.tsx
index d33f0920f..a6a5c97ae 100644
--- a/packages/feed-ui/src/AuctionSettledItem.tsx
+++ b/packages/feed-ui/src/AuctionSettledItem.tsx
@@ -30,7 +30,7 @@ export const AuctionSettledItem: React.FC<AuctionSettledItemProps> = ({ item })
           <FallbackImage
             src={item.tokenImage}
             alt={item.tokenName}
-            loadingPlaceholder={<ImageSkeleton />}
+            loadingPlaceholder={<ImageSkeleton fullWidth />}
             style={{ width: '100%', height: '100%', objectFit: 'cover' }}
           />
         </Box>
diff --git a/packages/feed-ui/src/ClankerTokenCreatedItem.tsx b/packages/feed-ui/src/ClankerTokenCreatedItem.tsx
index 99880b199..acb9b8c6f 100644
--- a/packages/feed-ui/src/ClankerTokenCreatedItem.tsx
+++ b/packages/feed-ui/src/ClankerTokenCreatedItem.tsx
@@ -25,7 +25,7 @@ export const ClankerTokenCreatedItem: React.FC<ClankerTokenCreatedItemProps> = (
           <FallbackImage
             src={item.tokenImage}
             alt={item.tokenName}
-            loadingPlaceholder={<ImageSkeleton />}
+            loadingPlaceholder={<ImageSkeleton fullWidth />}
             style={{ width: '100%', height: '100%', objectFit: 'cover' }}
           />
         </Box>
diff --git a/packages/feed-ui/src/FeedSkeleton.tsx b/packages/feed-ui/src/FeedSkeleton.tsx
index 2e9a2f7e2..fe542057b 100644
--- a/packages/feed-ui/src/FeedSkeleton.tsx
+++ b/packages/feed-ui/src/FeedSkeleton.tsx
@@ -15,8 +15,17 @@ interface FeedSkeletonProps {
   count?: number
 }
 
-export const ImageSkeleton: React.FC = () => {
-  return <Box className={`${skeletonBox} ${skeletonPulse} ${skeletonImage}`} />
+interface ImageSkeletonProps {
+  fullWidth?: boolean
+}
+
+export const ImageSkeleton: React.FC<ImageSkeletonProps> = ({ fullWidth = false }) => {
+  return (
+    <Box
+      className={`${skeletonBox} ${skeletonPulse} ${skeletonImage}`}
+      style={fullWidth ? { width: '100%', flexShrink: 0 } : undefined}
+    />
+  )
 }
 
 export const FeedSkeletonItem: React.FC = () => {
diff --git a/packages/feed-ui/src/ZoraCoinCreatedItem.tsx b/packages/feed-ui/src/ZoraCoinCreatedItem.tsx
index 702ff1b0f..45b8f79ec 100644
--- a/packages/feed-ui/src/ZoraCoinCreatedItem.tsx
+++ b/packages/feed-ui/src/ZoraCoinCreatedItem.tsx
@@ -43,7 +43,7 @@ export const ZoraCoinCreatedItem: React.FC<ZoraCoinCreatedItemProps> = ({ item }
         isMediaTypeLoading ||
         (!shouldUseMediaPreview && !displayImageUrl) ? (
           <Box className={feedItemImage}>
-            <ImageSkeleton />
+            <ImageSkeleton fullWidth />
           </Box>
         ) : shouldUseMediaPreview ? (
           <Box className={feedItemMedia}>
@@ -61,7 +61,7 @@ export const ZoraCoinCreatedItem: React.FC<ZoraCoinCreatedItemProps> = ({ item }
             <FallbackImage
               src={displayImageUrl!}
               alt={item.coinName}
-              loadingPlaceholder={<ImageSkeleton />}
+              loadingPlaceholder={<ImageSkeleton fullWidth />}
               style={{ width: '100%', height: '100%', objectFit: 'cover' }}
             />
           </Box>
diff --git a/packages/feed-ui/src/ZoraDropCreatedItem.tsx b/packages/feed-ui/src/ZoraDropCreatedItem.tsx
index 8bdc1d228..11e4678fb 100644
--- a/packages/feed-ui/src/ZoraDropCreatedItem.tsx
+++ b/packages/feed-ui/src/ZoraDropCreatedItem.tsx
@@ -43,7 +43,7 @@ export const ZoraDropCreatedItem: React.FC<ZoraDropCreatedItemProps> = ({ item }
         {/* Media - full-width on mobile, fixed width on desktop */}
         {isMediaTypeLoading ? (
           <Box className={feedItemImage}>
-            <ImageSkeleton />
+            <ImageSkeleton fullWidth />
           </Box>
         ) : shouldUseMediaPreview ? (
           <Box className={feedItemMedia}>
@@ -61,7 +61,7 @@ export const ZoraDropCreatedItem: React.FC<ZoraDropCreatedItemProps> = ({ item }
             <FallbackImage
               src={displayImageUrl!}
               alt={item.dropName}
-              loadingPlaceholder={<ImageSkeleton />}
+              loadingPlaceholder={<ImageSkeleton fullWidth />}
               style={{ width: '100%', height: '100%', objectFit: 'cover' }}
             />
           </Box>
diff --git a/packages/ui/src/Artwork/ArtworkUpload.tsx b/packages/ui/src/Artwork/ArtworkUpload.tsx
index 0e181f4b8..725fdfded 100644
--- a/packages/ui/src/Artwork/ArtworkUpload.tsx
+++ b/packages/ui/src/Artwork/ArtworkUpload.tsx
@@ -1,5 +1,5 @@
 import { ArtworkError } from '@buildeross/types'
-import { Box, Flex, Icon, Stack, Text } from '@buildeross/zord'
+import { Box, Button, Flex, Icon, Stack, Text } from '@buildeross/zord'
 import React, { BaseSyntheticEvent, ReactElement } from 'react'
 
 import {
@@ -27,6 +27,7 @@ interface ArtworkUploadProps {
   uploadError: string | undefined
   fileType?: string
   layerOrdering: React.ReactNode
+  onReset?: () => void
 }
 
 export const ArtworkUpload: React.FC<ArtworkUploadProps> = ({
@@ -41,6 +42,7 @@ export const ArtworkUpload: React.FC<ArtworkUploadProps> = ({
   uploadError: uploadError,
   fileType,
   layerOrdering,
+  onReset,
 }) => {
   const dropInput = React.useRef<HTMLInputElement>(null)
   React.useEffect(() => {
@@ -90,33 +92,38 @@ export const ArtworkUpload: React.FC<ArtworkUploadProps> = ({
           onChange={onUpload}
         />
       </div>
-      {((artworkError || uploadError) && (
-        <Box py={'x4'} className={uploadErrorBox}>
-          {uploadError && <Box>{uploadError}</Box>}
+      <Flex justify={'space-between'} direction="row" py={'x4'}>
+        {(artworkError || uploadError) && (
+          <Box className={uploadErrorBox}>
+            {uploadError && <Box>{uploadError}</Box>}
 
-          <Box as={'ul'} m={'x0'}>
-            {artworkError?.maxTraits && <li>{artworkError.maxTraits}</li>}
-            {artworkError?.mime && <li>{artworkError.mime}</li>}
-            {artworkError?.directory && <li>{artworkError.directory}</li>}
-            {artworkError?.dimensions && <li>{artworkError.dimensions}</li>}
+            <Box as={'ul'} m={'x0'}>
+              {artworkError?.maxTraits && <li>{artworkError.maxTraits}</li>}
+              {artworkError?.mime && <li>{artworkError.mime}</li>}
+              {artworkError?.directory && <li>{artworkError.directory}</li>}
+              {artworkError?.dimensions && <li>{artworkError.dimensions}</li>}
+            </Box>
           </Box>
-        </Box>
-      )) ||
-        (traitCount > 0 && !!fileType && (
-          <>
-            <Box p={'x4'} fontSize={12} className={uploadSuccessBox}>
-              <Box as={'ul'} m={'x0'}>
-                <li>
-                  {traitCount > 1 ? `${traitCount} traits` : `${traitCount} trait`}{' '}
-                  &#9733;
-                </li>
-                <li>supported file type: {fileType} &#9733;</li>
-                <li>correct folder structure &#9733;</li>
-              </Box>
+        )}
+        {!artworkError && !uploadError && traitCount > 0 && !!fileType && (
+          <Box fontSize={12} className={uploadSuccessBox}>
+            <Box as={'ul'} m={'x0'}>
+              <li>
+                {traitCount > 1 ? `${traitCount} traits` : `${traitCount} trait`} &#9733;
+              </li>
+              <li>supported file type: {fileType} &#9733;</li>
+              <li>correct folder structure &#9733;</li>
             </Box>
-            {layerOrdering}
-          </>
-        ))}
+          </Box>
+        )}
+        {onReset && (fileCount || traitCount > 0) ? (
+          <Button type="button" variant={'secondary'} onClick={onReset}>
+            Reset artwork
+          </Button>
+        ) : null}
+      </Flex>
+
+      {!artworkError && !uploadError && Number(fileCount) > 0 && traitCount > 0 && layerOrdering}
     </Box>
   )
 }
diff --git a/packages/zord/src/elements/Button.css.ts b/packages/zord/src/elements/Button.css.ts
index 55f7ffe18..f3d04e942 100644
--- a/packages/zord/src/elements/Button.css.ts
+++ b/packages/zord/src/elements/Button.css.ts
@@ -28,7 +28,6 @@ export const baseButton = style([
       },
       '&[disabled]': {
         cursor: 'not-allowed',
-        pointerEvents: 'none',
       },
       '&[disabled]:active': {
         transform: 'unset',
@@ -300,10 +299,11 @@ export const buttonVariants = {
       selectors: {
         '&[disabled]': {
           color: vars.color.onGhostDisabled,
-          backgroundColor: vars.color.ghostDisabled,
-          borderColor: vars.color.ghostDisabled,
+          backgroundColor: 'transparent',
+          borderColor: vars.color.onGhostDisabled,
+          opacity: 0.56,
         },
-        '&:hover, &:not([disabled]):hover': {
+        '&:not([disabled]):hover': {
           cursor: 'pointer',
           backgroundColor: vars.color.background2,
         },
diff --git a/packages/zord/src/elements/Button.tsx b/packages/zord/src/elements/Button.tsx
index 456764906..47d1505fb 100644
--- a/packages/zord/src/elements/Button.tsx
+++ b/packages/zord/src/elements/Button.tsx
@@ -77,6 +77,7 @@ export function InnerButton<E extends ElementType = typeof ButtonDefaultElement>
     variant = 'primary',
     size = 'md',
     type = 'button',
+    onClick,
     ...props
   }: PolymorphicPropsWithoutRef<ButtonProps, E>,
   ref: ForwardedRef<E>
@@ -114,6 +115,16 @@ export function InnerButton<E extends ElementType = typeof ButtonDefaultElement>
       : undefined
   }, [pill, size])
 
+  const handleClick = useMemo(() => {
+    if (disabled) {
+      return (event: React.MouseEvent<Element>) => {
+        event.preventDefault()
+        event.stopPropagation()
+      }
+    }
+    return onClick
+  }, [disabled, onClick])
+
   return (
     <Flex
       ref={ref}
@@ -137,6 +148,7 @@ export function InnerButton<E extends ElementType = typeof ButtonDefaultElement>
       ]}
       px={px}
       gap={gap}
+      onClick={handleClick}
       {...props}
     >
       {loading ? (
diff --git a/packages/zord/src/theme.css.ts b/packages/zord/src/theme.css.ts
index 3fcec0df3..53bda7c84 100644
--- a/packages/zord/src/theme.css.ts
+++ b/packages/zord/src/theme.css.ts
@@ -222,7 +222,7 @@ export const theme = createThemeContract({
   },
 })
 
-var { colors, shadows } = colorTheme({})
+var { colors, shadows } = colorTheme({ mode: 'light' })
 export const lightTheme = createTheme(theme, {
   fonts: {
     heading: typography.fonts.body,
@@ -244,6 +244,7 @@ export const lightTheme = createTheme(theme, {
 })
 
 var { colors, shadows } = colorTheme({
+  mode: 'dark',
   // foreground: '#ffff00',
   // background: '#ff0000',
   // accent: '#00ffff',
diff --git a/packages/zord/src/tokens/color.ts b/packages/zord/src/tokens/color.ts
index 6a458f5e4..898bf5442 100644
--- a/packages/zord/src/tokens/color.ts
+++ b/packages/zord/src/tokens/color.ts
@@ -29,16 +29,16 @@ export const color = {
   neutral: '#EDEDED',
   neutralHover: '#DEDEDE',
   neutralActive: '#D8D8D8',
-  neutralDisabled: '#EDEDED',
+  neutralDisabled: '#D9D9D9',
   onNeutral: '#000000',
-  onNeutralDisabled: '#C1C1C1',
+  onNeutralDisabled: '#666666',
 
   ghost: '#FFFFFF',
   ghostHover: '#F2F2F2',
   ghostActive: '#EDEDED',
-  ghostDisabled: '#EDEDED',
+  ghostDisabled: '#F2F2F2',
   onGhost: '#000000',
-  onGhostDisabled: '#C1C1C1',
+  onGhostDisabled: '#A6A6A6',
 
   positive: '#1CB687',
   positiveHover: '#16AD7F',
diff --git a/packages/zord/src/utils/color-theme.ts b/packages/zord/src/utils/color-theme.ts
index 541459191..3ac4ca809 100644
--- a/packages/zord/src/utils/color-theme.ts
+++ b/packages/zord/src/utils/color-theme.ts
@@ -39,7 +39,15 @@ export function colorThemeVars({
   negative = '#F03232',
   warning = '#F5A623',
   warningStrong = '#EC714B',
+  mode = 'light',
 }) {
+  const neutralDisabled =
+    mode === 'dark'
+      ? mix(0.14, background, foreground)
+      : mix(0.18, foreground, background)
+  const neutralDisabledText =
+    mode === 'dark' ? mix(0.6, background, foreground) : mix(0.4, foreground, background)
+
   return {
     background1: background,
     background2: mix(0.1, background, foreground),
@@ -76,16 +84,16 @@ export function colorThemeVars({
     neutral: mix(0.9, foreground, background),
     neutralHover: mix(0.8, foreground, background),
     neutralActive: mix(0.7, foreground, background),
-    neutralDisabled: mix(0.9, foreground, background),
+    neutralDisabled,
     onNeutral: foreground,
-    onNeutralDisabled: mix(0.7, foreground, background),
+    onNeutralDisabled: neutralDisabledText,
 
     ghost: background,
     ghostHover: mix(0.9, foreground, background),
     ghostActive: mix(0.8, foreground, background),
-    ghostDisabled: mix(0.7, foreground, background),
+    ghostDisabled: mix(0.08, foreground, background),
     onGhost: foreground,
-    onGhostDisabled: mix(0.7, foreground, background),
+    onGhostDisabled: mix(0.35, foreground, background),
 
     positive: positive,
     positiveHover: mix(0.3, positive, background),