diff --git a/apps/web/src/components/Icon/assets/collection.svg b/apps/web/src/components/Icon/assets/collection.svg
new file mode 100644
index 000000000..c0eb1fd5d
--- /dev/null
+++ b/apps/web/src/components/Icon/assets/collection.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 3V7C15 7.26522 15.1054 7.51957 15.2929 7.70711C15.4804 7.89464 15.7348 8 16 8H20" stroke="#00A3FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18 17H11C10.4696 17 9.96086 16.7893 9.58579 16.4142C9.21071 16.0391 9 15.5304 9 15V5C9 4.46957 9.21071 3.96086 9.58579 3.58579C9.96086 3.21071 10.4696 3 11 3H15L20 8V15C20 15.5304 19.7893 16.0391 19.4142 16.4142C19.0391 16.7893 18.5304 17 18 17Z" stroke="#00A3FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 17V19C16 19.5304 15.7893 20.0391 15.4142 20.4142C15.0391 20.7893 14.5304 21 14 21H7C6.46957 21 5.96086 20.7893 5.58579 20.4142C5.21071 20.0391 5 19.5304 5 19V9C5 8.46957 5.21071 7.96086 5.58579 7.58579C5.96086 7.21071 6.46957 7 7 7H9" stroke="#00A3FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/apps/web/src/components/Icon/assets/pause-template.svg b/apps/web/src/components/Icon/assets/pause-template.svg
new file mode 100644
index 000000000..81dacf1a0
--- /dev/null
+++ b/apps/web/src/components/Icon/assets/pause-template.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 19V5H19V19H14ZM5 19V5H10V19H5Z" fill="#EC714B"/>
+</svg>
diff --git a/apps/web/src/components/Icon/assets/pause.svg b/apps/web/src/components/Icon/assets/pause.svg
index facad699e..6aed4d57a 100644
--- a/apps/web/src/components/Icon/assets/pause.svg
+++ b/apps/web/src/components/Icon/assets/pause.svg
@@ -1,8 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="mask0_57_11645" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
-<rect width="24" height="24" fill="#D9D9D9"/>
-</mask>
-<g mask="url(#mask0_57_11645)">
-<path d="M14 19V5H19V19H14ZM5 19V5H10V19H5Z" fill="#EC714B"/>
-</g>
+<path d="M14 19V5H19V19H14ZM5 19V5H10V19H5Z"/>
 </svg>
diff --git a/apps/web/src/components/Icon/assets/play.svg b/apps/web/src/components/Icon/assets/play.svg
new file mode 100644
index 000000000..f8661a7cd
--- /dev/null
+++ b/apps/web/src/components/Icon/assets/play.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.563 11.815 9.103 4.208a1.341 1.341 0 0 0-1.393-.026A1.367 1.367 0 0 0 7 5.385v15.23a1.367 1.367 0 0 0 .71 1.203 1.342 1.342 0 0 0 1.393-.026l12.46-7.607a1.384 1.384 0 0 0 0-2.37Z"></path></svg>
\ No newline at end of file
diff --git a/apps/web/src/components/Icon/icons.ts b/apps/web/src/components/Icon/icons.ts
index 7a3eb4bd1..89170527b 100644
--- a/apps/web/src/components/Icon/icons.ts
+++ b/apps/web/src/components/Icon/icons.ts
@@ -10,6 +10,7 @@ import ChevronLeft from './assets/chevron-left.svg'
 import ChevronRight from './assets/chevron-right.svg'
 import ChevronUp from './assets/chevron-up.svg'
 import Code from './assets/code.svg'
+import Collection from './assets/collection.svg'
 import Copy from './assets/copy.svg'
 import Cross16 from './assets/cross-16.svg'
 import Cross from './assets/cross.svg'
@@ -26,7 +27,9 @@ import Info16 from './assets/info-16.svg'
 import Move from './assets/move.svg'
 import NewWindow from './assets/new-window.svg'
 import NounsConnect from './assets/nouns-connect.svg'
+import PauseTemplate from './assets/pause-template.svg'
 import Pause from './assets/pause.svg'
+import Play from './assets/play.svg'
 import Plus from './assets/plus.svg'
 import Refresh from './assets/refresh.svg'
 import Trash from './assets/trash.svg'
@@ -47,6 +50,7 @@ export const icons = {
   chevronRight: ChevronRight,
   chevronUp: ChevronUp,
   code: Code,
+  collection: Collection,
   copy: Copy,
   cross: Cross,
   'cross-16': Cross16,
@@ -64,6 +68,8 @@ export const icons = {
   newWindow: NewWindow,
   nounsConnect: NounsConnect,
   pause: Pause,
+  pauseTemplate: PauseTemplate,
+  play: Play,
   plus: Plus,
   refresh: Refresh,
   trash: Trash,
diff --git a/apps/web/src/components/MediaPreview/Audio.tsx b/apps/web/src/components/MediaPreview/Audio.tsx
new file mode 100644
index 000000000..a57bb72b3
--- /dev/null
+++ b/apps/web/src/components/MediaPreview/Audio.tsx
@@ -0,0 +1,69 @@
+import { Box } from '@zoralabs/zord'
+import NextImage from 'next/image'
+import { useCallback, useRef, useState } from 'react'
+
+import { Icon } from '../Icon'
+
+export interface AudioProps {
+  src: string
+  cover?: string
+}
+
+export const Audio: React.FC<AudioProps> = ({ src, cover }) => {
+  const [playing, setPlaying] = useState(false)
+  const audioRef = useRef<HTMLAudioElement>(null)
+
+  const togglePlay = useCallback(async () => {
+    if (!audioRef.current) return
+    if (playing) audioRef.current.pause()
+    else audioRef.current.play()
+  }, [audioRef, playing])
+
+  return (
+    <Box position={'relative'} w="100%" h="100%">
+      {!cover ? (
+        <Box backgroundColor="background2" w="100%" h="100%" borderRadius={'curved'} />
+      ) : (
+        <NextImage
+          src={cover}
+          width={400}
+          height={400}
+          unoptimized
+          alt="Preview"
+          style={{
+            objectFit: 'cover',
+            borderRadius: '10px',
+            height: '400px',
+            width: '400px',
+          }}
+        />
+      )}
+
+      <Box
+        as={'button'}
+        onClick={togglePlay}
+        borderColor="transparent"
+        h="x10"
+        w="x10"
+        cursor={'pointer'}
+        borderRadius="round"
+        backgroundColor={'background1'}
+        position={'absolute'}
+        bottom="x4"
+        right="x4"
+      >
+        <Icon id={playing ? 'pause' : 'play'} fill={'text2'} />
+      </Box>
+
+      <audio
+        src={src}
+        ref={audioRef}
+        loop
+        preload={'auto'}
+        playsInline
+        onPlay={() => setPlaying(true)}
+        onPause={() => setPlaying(false)}
+      />
+    </Box>
+  )
+}
diff --git a/apps/web/src/components/MediaPreview/Image.tsx b/apps/web/src/components/MediaPreview/Image.tsx
new file mode 100644
index 000000000..cb6be49ab
--- /dev/null
+++ b/apps/web/src/components/MediaPreview/Image.tsx
@@ -0,0 +1,23 @@
+import NextImage from 'next/image'
+
+export interface ImageProps {
+  src: string
+}
+
+export const Image: React.FC<ImageProps> = ({ src }) => {
+  return (
+    <NextImage
+      src={src}
+      width={400}
+      height={400}
+      unoptimized
+      alt="Preview"
+      style={{
+        objectFit: 'cover',
+        borderRadius: '10px',
+        height: '400px',
+        width: '400px',
+      }}
+    />
+  )
+}
diff --git a/apps/web/src/components/MediaPreview/MediaPreview.tsx b/apps/web/src/components/MediaPreview/MediaPreview.tsx
new file mode 100644
index 000000000..a2bd7f97f
--- /dev/null
+++ b/apps/web/src/components/MediaPreview/MediaPreview.tsx
@@ -0,0 +1,36 @@
+import { Box } from '@zoralabs/zord'
+import { getFetchableUrl } from 'ipfs-service'
+import { useMemo } from 'react'
+
+import { Audio } from './Audio'
+import { Image } from './Image'
+import { Video } from './Video'
+
+export interface MediaPreviewProps {
+  mediaUrl: string
+  mediaType?: string
+  coverUrl?: string
+}
+
+export const MediaPreview: React.FC<MediaPreviewProps> = ({
+  mediaType,
+  mediaUrl,
+  coverUrl,
+}) => {
+  const fetchableMediaURL = useMemo(() => getFetchableUrl(mediaUrl) || '', [mediaUrl])
+  const fetchableCoverURL = useMemo(() => getFetchableUrl(coverUrl) || '', [coverUrl])
+
+  if (fetchableMediaURL && mediaType?.startsWith('image')) {
+    return <Image src={fetchableMediaURL} />
+  }
+
+  if (fetchableMediaURL && mediaType?.startsWith('video')) {
+    return <Video src={fetchableMediaURL} />
+  }
+
+  if (fetchableMediaURL && mediaType?.startsWith('audio')) {
+    return <Audio src={fetchableMediaURL} cover={fetchableCoverURL} />
+  }
+
+  return <Box backgroundColor="background2" w="100%" h="100%" borderRadius={'curved'} />
+}
diff --git a/apps/web/src/components/MediaPreview/Video.tsx b/apps/web/src/components/MediaPreview/Video.tsx
new file mode 100644
index 000000000..a6d603f25
--- /dev/null
+++ b/apps/web/src/components/MediaPreview/Video.tsx
@@ -0,0 +1,21 @@
+export interface VideoProps {
+  src: string
+}
+
+export const Video: React.FC<VideoProps> = ({ src }) => {
+  return (
+    <video
+      src={src}
+      autoPlay
+      loop
+      muted={true}
+      playsInline
+      style={{
+        objectFit: 'cover',
+        borderRadius: '10px',
+        height: '400px',
+        width: '400px',
+      }}
+    />
+  )
+}
diff --git a/apps/web/src/components/SingleMediaUpload/SingleMediaUpload.css.ts b/apps/web/src/components/SingleMediaUpload/SingleMediaUpload.css.ts
new file mode 100644
index 000000000..7e24f3958
--- /dev/null
+++ b/apps/web/src/components/SingleMediaUpload/SingleMediaUpload.css.ts
@@ -0,0 +1,23 @@
+import { style } from '@vanilla-extract/css'
+
+export const defaultUploadStyle = style({
+  display: 'none',
+})
+
+export const uploadErrorBox = style({
+  color: '#ff0015',
+  boxSizing: 'border-box',
+})
+
+export const singleMediaUploadWrapper = style({
+  height: 64,
+  width: '100%',
+  borderRadius: 15,
+  background: '#F2F2F2',
+  overflow: 'hidden',
+  selectors: {
+    '&:hover': {
+      cursor: 'pointer',
+    },
+  },
+})
diff --git a/apps/web/src/components/SingleMediaUpload/SingleMediaUpload.tsx b/apps/web/src/components/SingleMediaUpload/SingleMediaUpload.tsx
new file mode 100644
index 000000000..6a6d1dc04
--- /dev/null
+++ b/apps/web/src/components/SingleMediaUpload/SingleMediaUpload.tsx
@@ -0,0 +1,173 @@
+import { Box, Flex, Stack, Text } from '@zoralabs/zord'
+import { FormikProps } from 'formik'
+import { normalizeIPFSUrl, uploadFile } from 'ipfs-service'
+import React, { ReactElement, useEffect, useState } from 'react'
+
+import { Spinner } from 'src/components/Spinner'
+import { defaultInputLabelStyle } from 'src/modules/create-proposal/components/TransactionForm/CustomTransaction/CustomTransaction.css'
+
+import {
+  defaultUploadStyle,
+  singleMediaUploadWrapper,
+  uploadErrorBox,
+} from './SingleMediaUpload.css'
+
+interface SingleImageUploadProps {
+  formik: FormikProps<any>
+  id: string
+  inputLabel: string | ReactElement
+  value: string
+  onUploadStart?: (value: File) => void
+  onUploadSettled?: () => void
+}
+
+const SingleMediaUpload: React.FC<SingleImageUploadProps> = ({
+  id,
+  formik,
+  inputLabel,
+  onUploadStart,
+  onUploadSettled,
+  value,
+}) => {
+  const acceptableMIME = [
+    'image/jpeg',
+    'image/png',
+    'image/svg+xml',
+    'image/webp',
+    'image/gif',
+    'video/mp4',
+    'video/quicktime',
+    'audio/mpeg',
+    'audio/wav',
+  ]
+
+  const [isMounted, setIsMounted] = useState(false)
+  const [uploadMediaError, setUploadMediaError] = React.useState<any>()
+  const [isUploading, setIsUploading] = React.useState<boolean>(false)
+  const [fileName, setFileName] = React.useState<string | undefined>()
+  const [progress, setProgress] = React.useState<number>(0)
+
+  useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
+  const truncate = (value: string) => {
+    return value.length > 40 ? `${value.substring(0, 40)}...` : value
+  }
+
+  const handleFileUpload = React.useCallback(
+    async (_input: FileList | null) => {
+      if (!_input) return
+      const input = _input[0]
+
+      setUploadMediaError(false)
+
+      if (input?.type?.length && !acceptableMIME.includes(input.type)) {
+        setUploadMediaError({
+          message: `Sorry, ${input.type} is an unsupported file type`,
+        })
+        return
+      }
+
+      try {
+        setIsUploading(true)
+        setFileName(input.name)
+
+        onUploadStart?.(input)
+
+        const { cid } = await uploadFile(_input[0], {
+          cache: true,
+          onProgress: setProgress,
+        })
+
+        formik.setFieldValue(id, normalizeIPFSUrl(cid))
+        setIsUploading(false)
+        setUploadMediaError(null)
+      } catch (err: any) {
+        setIsUploading(false)
+        setUploadMediaError({
+          ...err,
+          message: `Sorry, there was an error with our file uploading service. ${err?.message}`,
+        })
+      } finally {
+        onUploadSettled?.()
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  )
+
+  return (
+    <Flex mb={'x8'}>
+      <Stack width={'100%'}>
+        <label className={defaultInputLabelStyle}>{inputLabel}</label>
+        <Flex
+          as={'label'}
+          direction={'column'}
+          position={'relative'}
+          justify={'center'}
+          className={singleMediaUploadWrapper}
+          htmlFor={`file-upload-${id}`}
+        >
+          {!isUploading && isMounted && !value && (
+            <Flex mx="x4" align={'center'} justify={'space-between'}>
+              <Text fontWeight={'paragraph'} color="text4">
+                None selected
+              </Text>
+              <Text fontWeight={'display'} color="text1">
+                Select
+              </Text>
+            </Flex>
+          )}
+
+          {isUploading && fileName && (
+            <Flex mx="x4" align={'center'} justify={'space-between'}>
+              <Text fontWeight={'paragraph'} color="text1">
+                {truncate(fileName)}
+              </Text>
+              <Flex align={'center'}>
+                <Text fontWeight={'paragraph'} color="text3">
+                  {`${Math.round(progress)}% uploaded`}
+                </Text>
+                <Spinner m="x2" />
+              </Flex>
+            </Flex>
+          )}
+
+          {!isUploading && value && (
+            <Flex mx="x4" align={'center'} justify={'space-between'}>
+              <Text fontWeight={'paragraph'} color="text1">
+                {truncate(value)}
+              </Text>
+              <Text fontWeight={'display'} color="text1">
+                Replace
+              </Text>
+            </Flex>
+          )}
+
+          <input
+            className={defaultUploadStyle}
+            id={`file-upload-${id}`}
+            data-testid={`file-upload-${id}`}
+            name="file"
+            type="file"
+            multiple={true}
+            onChange={(event) => {
+              handleFileUpload(event.currentTarget.files)
+            }}
+          />
+        </Flex>
+
+        {uploadMediaError && (
+          <Box data-testid="error-msg" p={'x4'} fontSize={12} className={uploadErrorBox}>
+            <Box as={'ul'} m={'x0'}>
+              <li>{uploadMediaError.message}</li>
+            </Box>
+          </Box>
+        )}
+      </Stack>
+    </Flex>
+  )
+}
+
+export default SingleMediaUpload
diff --git a/apps/web/src/constants/addresses.ts b/apps/web/src/constants/addresses.ts
index 5a867abb7..03f98168f 100644
--- a/apps/web/src/constants/addresses.ts
+++ b/apps/web/src/constants/addresses.ts
@@ -17,4 +17,9 @@ export const PUBLIC_NOUNS_ADDRESS = {
   5: '0x0BC3807Ec262cB779b38D65b38158acC3bfedE10',
 }[process.env.NEXT_PUBLIC_CHAIN_ID || 1] as AddressType
 
+export const PUBLIC_ZORA_NFT_CREATOR = {
+  1: '0xF74B146ce44CC162b601deC3BE331784DB111DC1',
+  5: '0xb9583D05Ba9ba8f7F14CCEe3Da10D2bc0A72f519',
+}[process.env.NEXT_PUBLIC_CHAIN_ID || 1] as AddressType
+
 export const NULL_ADDRESS = '0x0000000000000000000000000000000000000000'
diff --git a/apps/web/src/data/contract/abis/ZoraNFTCreator.ts b/apps/web/src/data/contract/abis/ZoraNFTCreator.ts
new file mode 100644
index 000000000..78972c7cd
--- /dev/null
+++ b/apps/web/src/data/contract/abis/ZoraNFTCreator.ts
@@ -0,0 +1,600 @@
+export const zoraNFTCreatorAbi = [
+  {
+    inputs: [
+      {
+        internalType: 'address',
+        name: '_implementation',
+        type: 'address',
+      },
+      {
+        internalType: 'contract EditionMetadataRenderer',
+        name: '_editionMetadataRenderer',
+        type: 'address',
+      },
+      {
+        internalType: 'contract DropMetadataRenderer',
+        name: '_dropMetadataRenderer',
+        type: 'address',
+      },
+    ],
+    stateMutability: 'nonpayable',
+    type: 'constructor',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        internalType: 'address',
+        name: 'previousAdmin',
+        type: 'address',
+      },
+      {
+        indexed: false,
+        internalType: 'address',
+        name: 'newAdmin',
+        type: 'address',
+      },
+    ],
+    name: 'AdminChanged',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'beacon',
+        type: 'address',
+      },
+    ],
+    name: 'BeaconUpgraded',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'creator',
+        type: 'address',
+      },
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'editionContractAddress',
+        type: 'address',
+      },
+      {
+        indexed: false,
+        internalType: 'uint256',
+        name: 'editionSize',
+        type: 'uint256',
+      },
+    ],
+    name: 'CreatedDrop',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'previousOwner',
+        type: 'address',
+      },
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'newOwner',
+        type: 'address',
+      },
+    ],
+    name: 'OwnershipTransferred',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'implementation',
+        type: 'address',
+      },
+    ],
+    name: 'Upgraded',
+    type: 'event',
+  },
+  {
+    inputs: [],
+    name: 'contractVersion',
+    outputs: [
+      {
+        internalType: 'uint32',
+        name: '',
+        type: 'uint32',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [
+      {
+        internalType: 'string',
+        name: 'name',
+        type: 'string',
+      },
+      {
+        internalType: 'string',
+        name: 'symbol',
+        type: 'string',
+      },
+      {
+        internalType: 'address',
+        name: 'defaultAdmin',
+        type: 'address',
+      },
+      {
+        internalType: 'uint64',
+        name: 'editionSize',
+        type: 'uint64',
+      },
+      {
+        internalType: 'uint16',
+        name: 'royaltyBPS',
+        type: 'uint16',
+      },
+      {
+        internalType: 'address payable',
+        name: 'fundsRecipient',
+        type: 'address',
+      },
+      {
+        internalType: 'bytes[]',
+        name: 'setupCalls',
+        type: 'bytes[]',
+      },
+      {
+        internalType: 'contract IMetadataRenderer',
+        name: 'metadataRenderer',
+        type: 'address',
+      },
+      {
+        internalType: 'bytes',
+        name: 'metadataInitializer',
+        type: 'bytes',
+      },
+    ],
+    name: 'createAndConfigureDrop',
+    outputs: [
+      {
+        internalType: 'address payable',
+        name: 'newDropAddress',
+        type: 'address',
+      },
+    ],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      {
+        internalType: 'string',
+        name: 'name',
+        type: 'string',
+      },
+      {
+        internalType: 'string',
+        name: 'symbol',
+        type: 'string',
+      },
+      {
+        internalType: 'address',
+        name: 'defaultAdmin',
+        type: 'address',
+      },
+      {
+        internalType: 'uint64',
+        name: 'editionSize',
+        type: 'uint64',
+      },
+      {
+        internalType: 'uint16',
+        name: 'royaltyBPS',
+        type: 'uint16',
+      },
+      {
+        internalType: 'address payable',
+        name: 'fundsRecipient',
+        type: 'address',
+      },
+      {
+        components: [
+          {
+            internalType: 'uint104',
+            name: 'publicSalePrice',
+            type: 'uint104',
+          },
+          {
+            internalType: 'uint32',
+            name: 'maxSalePurchasePerAddress',
+            type: 'uint32',
+          },
+          {
+            internalType: 'uint64',
+            name: 'publicSaleStart',
+            type: 'uint64',
+          },
+          {
+            internalType: 'uint64',
+            name: 'publicSaleEnd',
+            type: 'uint64',
+          },
+          {
+            internalType: 'uint64',
+            name: 'presaleStart',
+            type: 'uint64',
+          },
+          {
+            internalType: 'uint64',
+            name: 'presaleEnd',
+            type: 'uint64',
+          },
+          {
+            internalType: 'bytes32',
+            name: 'presaleMerkleRoot',
+            type: 'bytes32',
+          },
+        ],
+        internalType: 'struct IERC721Drop.SalesConfiguration',
+        name: 'saleConfig',
+        type: 'tuple',
+      },
+      {
+        internalType: 'string',
+        name: 'metadataURIBase',
+        type: 'string',
+      },
+      {
+        internalType: 'string',
+        name: 'metadataContractURI',
+        type: 'string',
+      },
+    ],
+    name: 'createDrop',
+    outputs: [
+      {
+        internalType: 'address',
+        name: '',
+        type: 'address',
+      },
+    ],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      {
+        internalType: 'string',
+        name: 'name',
+        type: 'string',
+      },
+      {
+        internalType: 'string',
+        name: 'symbol',
+        type: 'string',
+      },
+      {
+        internalType: 'uint64',
+        name: 'editionSize',
+        type: 'uint64',
+      },
+      {
+        internalType: 'uint16',
+        name: 'royaltyBPS',
+        type: 'uint16',
+      },
+      {
+        internalType: 'address payable',
+        name: 'fundsRecipient',
+        type: 'address',
+      },
+      {
+        internalType: 'address',
+        name: 'defaultAdmin',
+        type: 'address',
+      },
+      {
+        components: [
+          {
+            internalType: 'uint104',
+            name: 'publicSalePrice',
+            type: 'uint104',
+          },
+          {
+            internalType: 'uint32',
+            name: 'maxSalePurchasePerAddress',
+            type: 'uint32',
+          },
+          {
+            internalType: 'uint64',
+            name: 'publicSaleStart',
+            type: 'uint64',
+          },
+          {
+            internalType: 'uint64',
+            name: 'publicSaleEnd',
+            type: 'uint64',
+          },
+          {
+            internalType: 'uint64',
+            name: 'presaleStart',
+            type: 'uint64',
+          },
+          {
+            internalType: 'uint64',
+            name: 'presaleEnd',
+            type: 'uint64',
+          },
+          {
+            internalType: 'bytes32',
+            name: 'presaleMerkleRoot',
+            type: 'bytes32',
+          },
+        ],
+        internalType: 'struct IERC721Drop.SalesConfiguration',
+        name: 'saleConfig',
+        type: 'tuple',
+      },
+      {
+        internalType: 'string',
+        name: 'description',
+        type: 'string',
+      },
+      {
+        internalType: 'string',
+        name: 'animationURI',
+        type: 'string',
+      },
+      {
+        internalType: 'string',
+        name: 'imageURI',
+        type: 'string',
+      },
+    ],
+    name: 'createEdition',
+    outputs: [
+      {
+        internalType: 'address',
+        name: '',
+        type: 'address',
+      },
+    ],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'dropMetadataRenderer',
+    outputs: [
+      {
+        internalType: 'contract DropMetadataRenderer',
+        name: '',
+        type: 'address',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'editionMetadataRenderer',
+    outputs: [
+      {
+        internalType: 'contract EditionMetadataRenderer',
+        name: '',
+        type: 'address',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'implementation',
+    outputs: [
+      {
+        internalType: 'address',
+        name: '',
+        type: 'address',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'initialize',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'owner',
+    outputs: [
+      {
+        internalType: 'address',
+        name: '',
+        type: 'address',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'proxiableUUID',
+    outputs: [
+      {
+        internalType: 'bytes32',
+        name: '',
+        type: 'bytes32',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'renounceOwnership',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      {
+        internalType: 'string',
+        name: 'name',
+        type: 'string',
+      },
+      {
+        internalType: 'string',
+        name: 'symbol',
+        type: 'string',
+      },
+      {
+        internalType: 'address',
+        name: 'defaultAdmin',
+        type: 'address',
+      },
+      {
+        internalType: 'uint64',
+        name: 'editionSize',
+        type: 'uint64',
+      },
+      {
+        internalType: 'uint16',
+        name: 'royaltyBPS',
+        type: 'uint16',
+      },
+      {
+        internalType: 'address payable',
+        name: 'fundsRecipient',
+        type: 'address',
+      },
+      {
+        components: [
+          {
+            internalType: 'uint104',
+            name: 'publicSalePrice',
+            type: 'uint104',
+          },
+          {
+            internalType: 'uint32',
+            name: 'maxSalePurchasePerAddress',
+            type: 'uint32',
+          },
+          {
+            internalType: 'uint64',
+            name: 'publicSaleStart',
+            type: 'uint64',
+          },
+          {
+            internalType: 'uint64',
+            name: 'publicSaleEnd',
+            type: 'uint64',
+          },
+          {
+            internalType: 'uint64',
+            name: 'presaleStart',
+            type: 'uint64',
+          },
+          {
+            internalType: 'uint64',
+            name: 'presaleEnd',
+            type: 'uint64',
+          },
+          {
+            internalType: 'bytes32',
+            name: 'presaleMerkleRoot',
+            type: 'bytes32',
+          },
+        ],
+        internalType: 'struct IERC721Drop.SalesConfiguration',
+        name: 'saleConfig',
+        type: 'tuple',
+      },
+      {
+        internalType: 'contract IMetadataRenderer',
+        name: 'metadataRenderer',
+        type: 'address',
+      },
+      {
+        internalType: 'bytes',
+        name: 'metadataInitializer',
+        type: 'bytes',
+      },
+    ],
+    name: 'setupDropsContract',
+    outputs: [
+      {
+        internalType: 'address',
+        name: '',
+        type: 'address',
+      },
+    ],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      {
+        internalType: 'address',
+        name: 'newOwner',
+        type: 'address',
+      },
+    ],
+    name: 'transferOwnership',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      {
+        internalType: 'address',
+        name: 'newImplementation',
+        type: 'address',
+      },
+    ],
+    name: 'upgradeTo',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      {
+        internalType: 'address',
+        name: 'newImplementation',
+        type: 'address',
+      },
+      {
+        internalType: 'bytes',
+        name: 'data',
+        type: 'bytes',
+      },
+    ],
+    name: 'upgradeToAndCall',
+    outputs: [],
+    stateMutability: 'payable',
+    type: 'function',
+  },
+] as const
diff --git a/apps/web/src/modules/create-proposal/components/TransactionForm/Droposal/Droposal.css.ts b/apps/web/src/modules/create-proposal/components/TransactionForm/Droposal/Droposal.css.ts
new file mode 100644
index 000000000..5da39bf15
--- /dev/null
+++ b/apps/web/src/modules/create-proposal/components/TransactionForm/Droposal/Droposal.css.ts
@@ -0,0 +1,14 @@
+import { style } from '@vanilla-extract/css'
+import { atoms } from '@zoralabs/zord'
+
+export const defaultInputLabelStyle = style([
+  atoms({
+    display: 'inline-flex',
+    fontSize: 16,
+    mb: 'x4',
+  }),
+  {
+    whiteSpace: 'nowrap',
+    fontWeight: '700',
+  },
+])
diff --git a/apps/web/src/modules/create-proposal/components/TransactionForm/Droposal/Droposal.tsx b/apps/web/src/modules/create-proposal/components/TransactionForm/Droposal/Droposal.tsx
new file mode 100644
index 000000000..c36c8dd5f
--- /dev/null
+++ b/apps/web/src/modules/create-proposal/components/TransactionForm/Droposal/Droposal.tsx
@@ -0,0 +1,95 @@
+import { Stack } from '@zoralabs/zord'
+import { BigNumber, ethers } from 'ethers'
+import { FormikHelpers } from 'formik'
+import { useContract } from 'wagmi'
+
+import { PUBLIC_ZORA_NFT_CREATOR } from 'src/constants/addresses'
+import { zoraNFTCreatorAbi } from 'src/data/contract/abis/ZoraNFTCreator'
+import { TransactionType } from 'src/modules/create-proposal/constants'
+import { useProposalStore } from 'src/modules/create-proposal/stores'
+import { AddressType } from 'src/typings'
+
+import { DroposalForm } from './DroposalForm'
+import { DroposalFormValues } from './DroposalForm.schema'
+
+export const Droposal: React.FC = () => {
+  const addTransaction = useProposalStore((state) => state.addTransaction)
+  const zoraNFTCreatorContract = useContract({
+    abi: zoraNFTCreatorAbi,
+    address: PUBLIC_ZORA_NFT_CREATOR,
+  })
+
+  const handleDroposalTransaction = (
+    values: DroposalFormValues,
+    actions: FormikHelpers<DroposalFormValues>
+  ) => {
+    const {
+      name,
+      symbol,
+      maxSupply: editionSize,
+      royaltyPercentage,
+      fundsRecipient,
+      defaultAdmin,
+      pricePerMint: publicSalePrice,
+      maxPerAddress: maxSalePurchasePerAddress,
+      publicSaleStart,
+      publicSaleEnd,
+      description,
+      mediaUrl,
+      mediaType,
+      coverUrl,
+    } = values
+
+    const royaltyBPS = royaltyPercentage * 100
+    const salesConfig = [
+      ethers.utils.parseEther((publicSalePrice || 0).toString()),
+      maxSalePurchasePerAddress,
+      BigNumber.from(Math.floor(new Date(publicSaleStart).getTime() / 1000)),
+      BigNumber.from(Math.floor(new Date(publicSaleEnd).getTime() / 1000)),
+      0, // presaleStart
+      0, // presaleEnd
+      ethers.constants.HashZero, // presaleMerkleRoot
+    ]
+    const animationUri = mediaType?.startsWith('image') ? '' : mediaUrl
+    const imageUri = mediaType?.startsWith('image') ? mediaUrl : coverUrl
+
+    const createEdition = {
+      target: PUBLIC_ZORA_NFT_CREATOR as AddressType,
+      functionSignature: 'createEdition()',
+      calldata:
+        zoraNFTCreatorContract?.interface.encodeFunctionData(
+          'createEdition(string,string,uint64,uint16,address,address,(uint104,uint32,uint64,uint64,uint64,uint64,bytes32),string,string,string)',
+          [
+            name,
+            symbol,
+            editionSize,
+            royaltyBPS,
+            fundsRecipient,
+            defaultAdmin,
+            salesConfig,
+            description,
+            animationUri,
+            imageUri,
+          ]
+        ) || '',
+      value: '',
+    }
+
+    addTransaction({
+      type: TransactionType.DROPOSAL,
+      summary: 'Create a droposal',
+      transactions: [createEdition],
+    })
+
+    actions.resetForm()
+  }
+
+  return (
+    <Stack>
+      <DroposalForm
+        onSubmit={handleDroposalTransaction}
+        disabled={typeof zoraNFTCreatorContract === 'undefined'}
+      />
+    </Stack>
+  )
+}
diff --git a/apps/web/src/modules/create-proposal/components/TransactionForm/Droposal/DroposalForm.schema.ts b/apps/web/src/modules/create-proposal/components/TransactionForm/Droposal/DroposalForm.schema.ts
new file mode 100644
index 000000000..a5d0a90dc
--- /dev/null
+++ b/apps/web/src/modules/create-proposal/components/TransactionForm/Droposal/DroposalForm.schema.ts
@@ -0,0 +1,53 @@
+import * as yup from 'yup'
+
+import { deboucedValidateAddress } from 'src/modules/create-dao/components/AllocationForm/AllocationForm.schema'
+
+export interface DroposalFormValues {
+  name: string
+  symbol: string
+  description: string
+  mediaUrl: string
+  mediaType?: string
+  coverUrl: string
+  pricePerMint: number
+  maxPerAddress: number
+  maxSupply: number
+  royaltyPercentage: number
+  fundsRecipient: string
+  defaultAdmin: string
+  publicSaleStart: string
+  publicSaleEnd: string
+}
+
+const droposalFormSchema = yup.object({
+  name: yup.string().required('*'),
+  symbol: yup.string().required('*'),
+  description: yup.string().required('*'),
+  mediaUrl: yup.string().required('*'),
+  mediaType: yup.string(),
+  coverUrl: yup.string(),
+  pricePerMint: yup.number().required('*'),
+  maxPerAddress: yup.number().integer('Must be whole number'),
+  maxSupply: yup.number().integer('Must be whole number'),
+  royaltyPercentage: yup.number().required('*'),
+  defaultAdmin: yup
+    .string()
+    .required('*')
+    .test('isValidAddress', 'invalid address', deboucedValidateAddress),
+  fundsRecipient: yup
+    .string()
+    .required('*')
+    .test('isValidAddress', 'invalid address', deboucedValidateAddress),
+  publicSaleStart: yup.string().required('*'),
+  publicSaleEnd: yup
+    .string()
+    .required('*')
+    .test('isDateInFuture', 'Must be in future', (value: string | undefined) => {
+      if (!value) return false
+      const date = new Date(value)
+      const now = new Date()
+      return date > now
+    }),
+})
+
+export default droposalFormSchema
diff --git a/apps/web/src/modules/create-proposal/components/TransactionForm/Droposal/DroposalForm.tsx b/apps/web/src/modules/create-proposal/components/TransactionForm/Droposal/DroposalForm.tsx
new file mode 100644
index 000000000..4fdde537e
--- /dev/null
+++ b/apps/web/src/modules/create-proposal/components/TransactionForm/Droposal/DroposalForm.tsx
@@ -0,0 +1,379 @@
+import { Box, Button, Flex, Text } from '@zoralabs/zord'
+import { Form, Formik, FormikHelpers } from 'formik'
+import { useCallback, useState } from 'react'
+import { useAccount } from 'wagmi'
+
+import SmartInput from 'src/components/Fields/SmartInput'
+import TextArea from 'src/components/Fields/TextArea'
+import { defaultHelperTextStyle } from 'src/components/Fields/styles.css'
+import { DATE, NUMBER, TEXT } from 'src/components/Fields/types'
+import SingleMediaUpload from 'src/components/SingleMediaUpload/SingleMediaUpload'
+import { DropdownSelect } from 'src/modules/create-proposal'
+import { useDaoStore } from 'src/modules/dao'
+import { useLayoutStore } from 'src/stores'
+
+import { defaultInputLabelStyle } from './Droposal.css'
+import droposalFormSchema, { DroposalFormValues } from './DroposalForm.schema'
+import { DroposalPreview } from './DroposalPreview'
+
+export interface AirdropFormProps {
+  onSubmit?: (
+    values: DroposalFormValues,
+    actions: FormikHelpers<DroposalFormValues>
+  ) => void
+  disabled?: boolean
+}
+
+const editionSizeOptions = [
+  { label: 'Fixed', value: 'fixed' },
+  { label: 'Open edition', value: 'open' },
+]
+
+export const DroposalForm: React.FC<AirdropFormProps> = ({ onSubmit, disabled }) => {
+  const [editionType, setEditionType] = useState('fixed')
+  const [isIPFSUploading, setIsIPFSUploading] = useState(false)
+  const { address: user } = useAccount()
+  const { treasury } = useDaoStore((x) => x.addresses)
+  const isMobile = useLayoutStore((x) => x.isMobile)
+
+  const initialValues: DroposalFormValues = {
+    name: '',
+    symbol: '',
+    description: '',
+    mediaUrl: '',
+    coverUrl: '',
+    fundsRecipient: treasury || '',
+    defaultAdmin: user || '',
+    publicSaleStart: '',
+    publicSaleEnd: '',
+    royaltyPercentage: 5,
+    pricePerMint: 0,
+    maxPerAddress: 1,
+    maxSupply: 10,
+  }
+
+  const handleSubmit = useCallback(
+    (values: DroposalFormValues, actions: FormikHelpers<DroposalFormValues>) => {
+      onSubmit?.(values, actions)
+    },
+    [onSubmit]
+  )
+
+  return (
+    <Box w="100%">
+      <Formik
+        initialValues={initialValues}
+        validationSchema={droposalFormSchema}
+        onSubmit={handleSubmit}
+        validateOnBlur
+        validateOnMount={false}
+        validateOnChange={false}
+      >
+        {(formik) => {
+          const handleMediaUploadStart = (media: File) => {
+            setIsIPFSUploading(true)
+            formik.setFieldValue('mediaType', media.type)
+          }
+
+          const handleEditionTypeChanged = (value: string) => {
+            value === 'open'
+              ? formik.setFieldValue('editionSize', 0)
+              : formik.setFieldValue('editionSize', undefined)
+            setEditionType(value)
+          }
+
+          const showCover = formik.values['mediaType']
+            ? !formik.values['mediaType']?.startsWith('image')
+            : false
+
+          return (
+            <>
+              {!isMobile && <DroposalPreview formik={formik} />}
+              <Text
+                mb="x8"
+                ml="x2"
+                style={{ marginTop: -30 }}
+                className={defaultHelperTextStyle}
+              >
+                This droposal uses the ZORA 721 Contract.{' '}
+                <a
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  href="https://docs.zora.co/docs/smart-contracts/creator-tools/ZoraNFTCreator"
+                >
+                  Lean more
+                </a>
+              </Text>
+              <Box
+                data-testid="droposal-form"
+                as={'fieldset'}
+                disabled={formik.isValidating || disabled}
+                style={{ outline: 0, border: 0, padding: 0, margin: 0 }}
+              >
+                <Flex as={Form} direction={'column'}>
+                  <SmartInput
+                    {...formik.getFieldProps('name')}
+                    inputLabel={'Name'}
+                    placeholder={'Zorbs'}
+                    type={TEXT}
+                    formik={formik}
+                    id={'name'}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    errorMessage={
+                      formik.touched['name'] && formik.errors['name']
+                        ? formik.errors['name']
+                        : undefined
+                    }
+                  />
+
+                  <SmartInput
+                    {...formik.getFieldProps('symbol')}
+                    inputLabel={'Symbol'}
+                    placeholder={'$SYMBOL'}
+                    type={TEXT}
+                    formik={formik}
+                    id={'symbol'}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    errorMessage={
+                      formik.touched['symbol'] && formik.errors['symbol']
+                        ? formik.errors['symbol']
+                        : undefined
+                    }
+                  />
+
+                  <TextArea
+                    {...formik.getFieldProps('description')}
+                    inputLabel={'Description'}
+                    placeholder={
+                      'This is a project that means a lot to me. Soon it can be yours too.'
+                    }
+                    formik={formik}
+                    id={'description'}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    errorMessage={
+                      formik.touched['description'] && formik.errors['description']
+                        ? formik.errors['description']
+                        : undefined
+                    }
+                  />
+
+                  <SingleMediaUpload
+                    {...formik.getFieldProps('mediaUrl')}
+                    formik={formik}
+                    id="mediaUrl"
+                    inputLabel={'Media'}
+                    onUploadStart={handleMediaUploadStart}
+                    onUploadSettled={() => setIsIPFSUploading(false)}
+                  />
+
+                  {showCover && (
+                    <SingleMediaUpload
+                      {...formik.getFieldProps('coverUrl')}
+                      formik={formik}
+                      id="coverUrl"
+                      inputLabel={'Cover'}
+                      onUploadStart={() => setIsIPFSUploading(true)}
+                      onUploadSettled={() => setIsIPFSUploading(false)}
+                    />
+                  )}
+
+                  <SmartInput
+                    {...formik.getFieldProps('pricePerMint')}
+                    inputLabel={'Price'}
+                    placeholder={'0.01'}
+                    type={TEXT}
+                    formik={formik}
+                    perma={'ETH'}
+                    id={'pricePerMint'}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    errorMessage={
+                      formik.touched['pricePerMint'] && formik.errors['pricePerMint']
+                        ? formik.errors['pricePerMint']
+                        : undefined
+                    }
+                  />
+
+                  <Text
+                    mb="x8"
+                    ml="x2"
+                    style={{ marginTop: -30 }}
+                    className={defaultHelperTextStyle}
+                  >
+                    Zora charges a small flat fee 0.000777 ETH per NFT minted to
+                    collectors.{' '}
+                    <a
+                      target="_blank"
+                      rel="noreferrer noopener"
+                      href="https://support.zora.co/en/articles/4981037-zora-mint-collect-fees"
+                    >
+                      Learn more
+                    </a>
+                  </Text>
+
+                  <label className={defaultInputLabelStyle}>Edition type</label>
+
+                  <DropdownSelect
+                    options={editionSizeOptions}
+                    value={editionType}
+                    onChange={handleEditionTypeChanged}
+                  />
+
+                  {editionType === 'fixed' ? (
+                    <SmartInput
+                      {...formik.getFieldProps('maxSupply')}
+                      placeholder={'1000'}
+                      inputLabel={'Edition size'}
+                      type={TEXT}
+                      formik={formik}
+                      perma={'Editions'}
+                      id={'maxSupply'}
+                      onChange={formik.handleChange}
+                      onBlur={formik.handleBlur}
+                      errorMessage={
+                        formik.touched['maxSupply'] && formik.errors['maxSupply']
+                          ? formik.errors['maxSupply']
+                          : undefined
+                      }
+                    />
+                  ) : (
+                    <Box mb={'x8'}>
+                      <label className={defaultInputLabelStyle}>Edition size</label>
+                      <Flex
+                        align={'center'}
+                        backgroundColor={'background2'}
+                        h={'x16'}
+                        px={'x4'}
+                        style={{ borderRadius: '16px' }}
+                      >
+                        <Text color="text4">Unlimited</Text>
+                      </Flex>
+                    </Box>
+                  )}
+
+                  <SmartInput
+                    {...formik.getFieldProps('publicSaleStart')}
+                    inputLabel={'Start time'}
+                    type={DATE}
+                    formik={formik}
+                    id={'publicSaleStart'}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    errorMessage={
+                      formik.touched['publicSaleStart'] &&
+                      formik.errors['publicSaleStart']
+                        ? formik.errors['publicSaleStart']
+                        : undefined
+                    }
+                  />
+
+                  <SmartInput
+                    {...formik.getFieldProps('publicSaleEnd')}
+                    inputLabel={'End time'}
+                    type={DATE}
+                    formik={formik}
+                    id={'publicSaleEnd'}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    errorMessage={
+                      formik.touched['publicSaleEnd'] && formik.errors['publicSaleEnd']
+                        ? formik.errors['publicSaleEnd']
+                        : undefined
+                    }
+                  />
+
+                  <SmartInput
+                    {...formik.getFieldProps('maxPerAddress')}
+                    inputLabel={'Mint limit per address'}
+                    placeholder={'Unlimited'}
+                    type={NUMBER}
+                    formik={formik}
+                    id={'maxPerAddress'}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    errorMessage={
+                      formik.touched['maxPerAddress'] && formik.errors['maxPerAddress']
+                        ? formik.errors['maxPerAddress']
+                        : undefined
+                    }
+                  />
+
+                  <SmartInput
+                    {...formik.getFieldProps('royaltyPercentage')}
+                    inputLabel={'Royalty'}
+                    placeholder={'5'}
+                    perma={'%'}
+                    type={NUMBER}
+                    formik={formik}
+                    id={'royaltyPercentage'}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    errorMessage={
+                      formik.touched['royaltyPercentage'] &&
+                      formik.errors['royaltyPercentage']
+                        ? formik.errors['royaltyPercentage']
+                        : undefined
+                    }
+                  />
+
+                  <SmartInput
+                    {...formik.getFieldProps('fundsRecipient')}
+                    inputLabel={'Payout address'}
+                    placeholder={'0x... or .eth'}
+                    type={TEXT}
+                    formik={formik}
+                    id={'fundsRecipient'}
+                    isAddress={true}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    helperText={
+                      'The DAO treasury address is set as the default payout address. This address will receive any withdrawals and royalties. It can be your personal wallet, a multisignature wallet, or an external splits contract.'
+                    }
+                    errorMessage={
+                      formik.touched['fundsRecipient'] && formik.errors['fundsRecipient']
+                        ? formik.errors['fundsRecipient']
+                        : undefined
+                    }
+                  />
+
+                  <SmartInput
+                    {...formik.getFieldProps('defaultAdmin')}
+                    inputLabel={'Default admin address'}
+                    placeholder={'0x... or .eth'}
+                    type={TEXT}
+                    formik={formik}
+                    id={'defaultAdmin'}
+                    isAddress={true}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    helperText={
+                      'The wallet you have connected to nouns.build is set as the default admin address. This address will manage the edition. It can be your personal wallet, a multisignature wallet, or the DAO treasury.'
+                    }
+                    errorMessage={
+                      formik.touched['defaultAdmin'] && formik.errors['defaultAdmin']
+                        ? formik.errors['defaultAdmin']
+                        : undefined
+                    }
+                  />
+
+                  <Button
+                    mt={'x9'}
+                    variant={'outline'}
+                    borderRadius={'curved'}
+                    type="submit"
+                    disabled={disabled || isIPFSUploading}
+                  >
+                    Add Transaction to Queue
+                  </Button>
+                </Flex>
+              </Box>
+            </>
+          )
+        }}
+      </Formik>
+    </Box>
+  )
+}
diff --git a/apps/web/src/modules/create-proposal/components/TransactionForm/Droposal/DroposalPreview.tsx b/apps/web/src/modules/create-proposal/components/TransactionForm/Droposal/DroposalPreview.tsx
new file mode 100644
index 000000000..7b5bbba27
--- /dev/null
+++ b/apps/web/src/modules/create-proposal/components/TransactionForm/Droposal/DroposalPreview.tsx
@@ -0,0 +1,70 @@
+import { Box, Flex, Text } from '@zoralabs/zord'
+import { FormikProps } from 'formik'
+
+import { MediaPreview } from 'src/components/MediaPreview/MediaPreview'
+
+import { DroposalFormValues } from './DroposalForm.schema'
+
+interface DroposalPreviewProps {
+  formik: FormikProps<DroposalFormValues>
+}
+
+export const DroposalPreview: React.FC<DroposalPreviewProps> = ({ formik }) => {
+  const {
+    mediaUrl,
+    coverUrl,
+    mediaType,
+    symbol,
+    name,
+    description,
+    pricePerMint,
+    maxSupply,
+  } = formik.values
+  return (
+    <Box position={'absolute'} style={{ height: '100%' }} top={'x0'} right={'x0'}>
+      <Box position={'sticky'} top={'x6'} right={'x0'}>
+        <Box style={{ width: '400px', height: '400px' }}>
+          <MediaPreview mediaUrl={mediaUrl} coverUrl={coverUrl} mediaType={mediaType} />
+        </Box>
+        <Text mt="x4" variant="heading-sm">
+          {name || 'Collection name'}
+        </Text>
+        <Flex mt="x2" align={'center'}>
+          <Text
+            style={{ backgroundColor: 'black', color: 'white' }}
+            py="x1"
+            px="x2"
+            variant="eyebrow"
+            borderRadius="normal"
+          >
+            ${symbol || 'SYMBOL'}
+          </Text>
+          <Text ml="x2" color="text4" fontSize={14} style={{ fontWeight: 'bold' }}>
+            EDITION
+          </Text>
+        </Flex>
+        <Text mt="x2" variant={'paragraph-lg'} style={{ fontWeight: 500 }}>
+          {description || 'description'}
+        </Text>
+        <Flex mt="x4">
+          <Box>
+            <Text fontSize={12} color="text4" style={{ fontWeight: 'bold' }}>
+              EDITION PRICE
+            </Text>
+            <Text variant="heading-sm" style={{ fontWeight: 'bold' }}>
+              {pricePerMint || '0.00'} ETH
+            </Text>
+          </Box>
+          <Box ml="x8">
+            <Text fontSize={12} color="text4" style={{ fontWeight: 'bold' }}>
+              TOTAL SUPPLY
+            </Text>
+            <Text variant="heading-sm" style={{ fontWeight: 'bold' }}>
+              {maxSupply || 'OPEN'}
+            </Text>
+          </Box>
+        </Flex>
+      </Box>
+    </Box>
+  )
+}
diff --git a/apps/web/src/modules/create-proposal/components/TransactionForm/Droposal/index.ts b/apps/web/src/modules/create-proposal/components/TransactionForm/Droposal/index.ts
new file mode 100644
index 000000000..7508606e4
--- /dev/null
+++ b/apps/web/src/modules/create-proposal/components/TransactionForm/Droposal/index.ts
@@ -0,0 +1 @@
+export * from './Droposal'
diff --git a/apps/web/src/modules/create-proposal/components/TransactionForm/TransactionForm.tsx b/apps/web/src/modules/create-proposal/components/TransactionForm/TransactionForm.tsx
index 37eeac5a7..b1f99a1d9 100644
--- a/apps/web/src/modules/create-proposal/components/TransactionForm/TransactionForm.tsx
+++ b/apps/web/src/modules/create-proposal/components/TransactionForm/TransactionForm.tsx
@@ -4,6 +4,7 @@ import { TransactionType } from 'src/modules/create-proposal/constants'
 
 import { Airdrop } from './Airdrop'
 import { CustomTransaction } from './CustomTransaction'
+import { Droposal } from './Droposal'
 import { PauseAuctions } from './PauseAuctions'
 import { SendEth } from './SendEth'
 
@@ -16,6 +17,7 @@ export type TransactionFormType = typeof TRANSACTION_FORM_OPTIONS[number]
 export const TRANSACTION_FORM_OPTIONS = [
   TransactionType.SEND_ETH,
   TransactionType.AIRDROP,
+  TransactionType.DROPOSAL,
   TransactionType.PAUSE_AUCTIONS,
   TransactionType.CUSTOM,
 ] as const
@@ -24,6 +26,7 @@ export const TransactionForm = ({ type }: TransactionFormProps) => {
   const FORMS: { [key in TransactionFormType]: ReactNode } = {
     [TransactionType.CUSTOM]: <CustomTransaction />,
     [TransactionType.AIRDROP]: <Airdrop />,
+    [TransactionType.DROPOSAL]: <Droposal />,
     [TransactionType.SEND_ETH]: <SendEth />,
     [TransactionType.PAUSE_AUCTIONS]: <PauseAuctions />,
   }
diff --git a/apps/web/src/modules/create-proposal/components/TwoColumnLayout.tsx b/apps/web/src/modules/create-proposal/components/TwoColumnLayout.tsx
index 3f6b75f9e..47edd9d88 100644
--- a/apps/web/src/modules/create-proposal/components/TwoColumnLayout.tsx
+++ b/apps/web/src/modules/create-proposal/components/TwoColumnLayout.tsx
@@ -13,7 +13,7 @@ export const TwoColumnLayout: FC<CustomTransactionLayoutProps> = ({
   rightColumn,
 }) => {
   return (
-    <Box w={'100%'} mx={'auto'}>
+    <Box w={'100%'} mx={'auto'} position={'relative'}>
       <Box>
         <Grid justify={'space-between'} gap={'x16'} className={twoColumnLayout}>
           {leftColumn && <Box w={'100%'}>{leftColumn}</Box>}
diff --git a/apps/web/src/modules/create-proposal/constants/transactionType.tsx b/apps/web/src/modules/create-proposal/constants/transactionType.tsx
index 20717e0be..69cde914c 100644
--- a/apps/web/src/modules/create-proposal/constants/transactionType.tsx
+++ b/apps/web/src/modules/create-proposal/constants/transactionType.tsx
@@ -5,6 +5,7 @@ import { IconType } from 'src/components/Icon/icons'
 export enum TransactionType {
   SEND_ETH = 'send-eth',
   AIRDROP = 'airdrop',
+  DROPOSAL = 'droposal',
   CUSTOM = 'custom',
   UPGRADE = 'upgrade',
   PAUSE_AUCTIONS = 'pause-auctions',
@@ -36,6 +37,12 @@ export const TRANSACTION_TYPES = {
     icon: 'airdrop',
     iconBackdrop: 'rgba(28, 182, 135, 0.1)',
   },
+  [TransactionType.DROPOSAL]: {
+    title: 'Droposal: Single edition',
+    subTitle: 'Create a droposal for a Single-edition ERC721 collection',
+    icon: 'collection',
+    iconBackdrop: 'rgba(0, 163, 255, 0.1)',
+  },
   [TransactionType.UPGRADE]: {
     title: 'Upgrade Proposal',
     subTitle: 'Create a proposal to upgrade',
@@ -45,7 +52,7 @@ export const TRANSACTION_TYPES = {
   [TransactionType.PAUSE_AUCTIONS]: {
     title: 'Pause Auctions',
     subTitle: 'Create a proposal to pause auctions',
-    icon: 'pause',
+    icon: 'pauseTemplate',
     iconBackdrop: 'rgba(236, 113, 75, 0.1)',
   },
   [TransactionType.CUSTOM]: {