diff --git a/README.md b/README.md
index 0304e3ec0..eae5f7b9b 100644
--- a/README.md
+++ b/README.md
@@ -2,8 +2,8 @@
 
 This is Nouns Builder front-end mono-repo. You can find Nouns Builder deployed on:
 
-- [Mainnet](nous.build)
-- [Goerli testnet](testnet.nouns.build)
+- [Mainnet](//nouns.build)
+- [Goerli testnet](//testnet.nouns.build)
 
 For an introduction to Nouns Builder and its concept, you can find further [documentation here](https://docs.zora.co/docs/smart-contracts/nouns-builder/intro). You can also find [Nouns Protocol here](https://github.com/ourzora/nouns-protocol).
 
diff --git a/apps/web/src/components/Home/Marquee.css.ts b/apps/web/src/components/Home/Marquee.css.ts
new file mode 100644
index 000000000..eae488230
--- /dev/null
+++ b/apps/web/src/components/Home/Marquee.css.ts
@@ -0,0 +1,30 @@
+import { style } from '@vanilla-extract/css'
+
+const baseStyles = {
+  height: '110px',
+  width: 'auto',
+}
+
+const getMobileStyle = (width: string) => {
+  return {
+    '@media': {
+      'screen and (max-width: 768px)': {
+        height: 'auto',
+        width: width,
+      },
+    },
+  }
+}
+
+export const Unlock = style([baseStyles, getMobileStyle('130px')])
+export const PurpleGalaxy = style([baseStyles, getMobileStyle('34px')])
+export const The = style([baseStyles, getMobileStyle('62px')])
+export const BlueWheel = style([baseStyles, getMobileStyle('36px')])
+export const Possibilities = style([baseStyles, getMobileStyle('225px')])
+export const Of = style([baseStyles, getMobileStyle('38px')])
+export const GreenClover = style([baseStyles, getMobileStyle('36px')])
+export const Collective = style([baseStyles, getMobileStyle('180px')])
+export const PurpleStar = style([baseStyles, getMobileStyle('36px')])
+export const BlueSun = style([baseStyles, getMobileStyle('36px')])
+export const NounsGlasses = style([baseStyles, getMobileStyle('62px')])
+export const Creation = style([baseStyles, getMobileStyle('157px')])
diff --git a/apps/web/src/components/Home/Marquee.tsx b/apps/web/src/components/Home/Marquee.tsx
index 5207e0eb2..2ff20906b 100644
--- a/apps/web/src/components/Home/Marquee.tsx
+++ b/apps/web/src/components/Home/Marquee.tsx
@@ -1,33 +1,45 @@
 import { Flex, atoms } from '@zoralabs/zord'
 import { motion } from 'framer-motion'
+import Image from 'next/image'
 import React from 'react'
 
 import { useLayoutStore } from 'src/stores'
 
+import {
+  BlueSun,
+  BlueWheel,
+  Collective,
+  Creation,
+  GreenClover,
+  NounsGlasses,
+  Of,
+  Possibilities,
+  PurpleGalaxy,
+  PurpleStar,
+  The,
+  Unlock,
+} from './Marquee.css'
+
 const Marquee = () => {
   const { isMobile } = useLayoutStore()
   return (
     <Flex direction={'column'} align={'center'} mt={{ '@initial': 'x4', '@768': 'x32' }}>
       <Flex gap={'x2'} mb={'x1'}>
-        <img
-          src={'/home/unlock.svg'}
-          alt={'unlock'}
-          width={isMobile ? '130px' : 'auto'}
-        />
+        <Image src={'/home/unlock.svg'} alt={'unlock'} className={Unlock} />
         <motion.div
           className={atoms({ display: 'flex', alignItems: 'center' })}
           animate={{ rotate: 360 }}
           transition={{ ease: 'linear', duration: 2, repeat: Infinity }}
         >
-          <img
+          <Image
             src={'/home/purple_galaxy.svg'}
             alt={'purple galaxy icon'}
-            width={isMobile ? '34px' : 'auto'}
+            className={PurpleGalaxy}
           />
         </motion.div>
       </Flex>
       <Flex gap={'x2'} mb={'x1'}>
-        <img src={'/home/the.svg'} alt={'the'} width={isMobile ? '62px' : 'auto'} />
+        <Image src={'/home/the.svg'} alt={'the'} className={The} />
         <motion.div
           className={atoms({ display: 'flex', alignItems: 'center' })}
           animate={{ rotate: [36, 72, 108, 144, 180, 216, 252, 288, 324, 396] }}
@@ -37,20 +49,16 @@ const Marquee = () => {
             repeat: Infinity,
           }}
         >
-          <img
-            src={'/home/blue_wheel.svg'}
-            alt={'blue wheel'}
-            width={isMobile ? '36px' : 'auto'}
-          />
+          <Image src={'/home/blue_wheel.svg'} alt={'blue wheel'} className={BlueWheel} />
         </motion.div>
-        <img
+        <Image
           src={'/home/possibilities.svg'}
           alt={'possibilities'}
-          width={isMobile ? '225px' : 'auto'}
+          className={Possibilities}
         />
       </Flex>
       <Flex gap={'x2'} mb={'x1'}>
-        <img src={'/home/of.svg'} alt={'of'} width={isMobile ? '38px' : 'auto'} />
+        <Image src={'/home/of.svg'} alt={'of'} className={Of} />
         <motion.div
           className={atoms({ display: 'flex', alignItems: 'center' })}
           animate={{ rotate: -360 }}
@@ -60,17 +68,13 @@ const Marquee = () => {
             repeat: Infinity,
           }}
         >
-          <img
+          <Image
             src={'/home/green_clover.svg'}
             alt={'green clover icon'}
-            width={isMobile ? '36px' : 'auto'}
+            className={GreenClover}
           />
         </motion.div>
-        <img
-          src={'/home/collective.svg'}
-          alt={'collective'}
-          width={isMobile ? '180px' : 'auto'}
-        />
+        <Image src={'/home/collective.svg'} alt={'collective'} className={Collective} />
 
         <Flex
           ml={isMobile ? 'x4' : 'x12'}
@@ -95,10 +99,10 @@ const Marquee = () => {
             }}
             transition={{ duration: 2, repeat: Infinity }}
           >
-            <img
+            <Image
               src={'/home/purple_star.svg'}
               alt={'purple star icon'}
-              width={isMobile ? '36px' : 'auto'}
+              className={PurpleStar}
             />
           </motion.div>
           <motion.div
@@ -119,25 +123,17 @@ const Marquee = () => {
             }}
             transition={{ duration: 2, repeat: Infinity, delay: 1 }}
           >
-            <img
-              src={'/home/blue_sun.svg'}
-              alt={'blue sun icon'}
-              width={isMobile ? '36px' : 'auto'}
-            />
+            <Image src={'/home/blue_sun.svg'} alt={'blue sun icon'} className={BlueSun} />
           </motion.div>
         </Flex>
       </Flex>
       <Flex gap={'x2'} mb={'x1'}>
-        <img
+        <Image
           src={'/home/nouns_glasses.svg'}
           alt={'small nouns glasses logo'}
-          width={isMobile ? '62px' : 'auto'}
-        />
-        <img
-          src={'/home/creation.svg'}
-          alt={'creation'}
-          width={isMobile ? '157px' : 'auto'}
+          className={NounsGlasses}
         />
+        <Image src={'/home/creation.svg'} alt={'creation'} className={Creation} />
       </Flex>
     </Flex>
   )
diff --git a/apps/web/src/modules/create-dao/components/AllocationForm/AllocationForm.schema.ts b/apps/web/src/modules/create-dao/components/AllocationForm/AllocationForm.schema.ts
index 886818cae..e6e4cd679 100644
--- a/apps/web/src/modules/create-dao/components/AllocationForm/AllocationForm.schema.ts
+++ b/apps/web/src/modules/create-dao/components/AllocationForm/AllocationForm.schema.ts
@@ -14,7 +14,10 @@ const allocationSchema = Yup.object().shape({
   allocationPercentage: Yup.number()
     .transform((value) => (isNaN(value) ? undefined : value))
     .required('*')
-    .min(1, '> 0') // (condition, errorMessage) - allocation represented as % must be greater than or equal to 0
+    .when('admin', (admin, schema) => {
+      if (!admin) return schema.min(1, '> 0') // (condition, errorMessage) - allocation represented as % must be greater than or equal to 0
+      return schema
+    })
     .max(100, '< 100')
     .integer('Must be whole number'),
   endDate: Yup.string()
@@ -25,6 +28,7 @@ const allocationSchema = Yup.object().shape({
       const now = new Date()
       return date > now
     }),
+  admin: Yup.boolean(),
 })
 
 export const validationSchemaContributions = Yup.object().shape({
diff --git a/apps/web/src/modules/create-dao/components/AllocationForm/AllocationForm.tsx b/apps/web/src/modules/create-dao/components/AllocationForm/AllocationForm.tsx
index 98cd15c57..330203b01 100644
--- a/apps/web/src/modules/create-dao/components/AllocationForm/AllocationForm.tsx
+++ b/apps/web/src/modules/create-dao/components/AllocationForm/AllocationForm.tsx
@@ -25,6 +25,7 @@ export interface TokenAllocation {
   allocationPercentage: number | string
   founderAddress: string
   endDate: string
+  admin?: boolean
 }
 
 export interface FounderAllocationFormValues {
@@ -42,6 +43,7 @@ export const AllocationForm: React.FC<AllocationFormProps> = ({ title }) => {
     activeSection,
     setFulfilledSections,
     vetoPower,
+    vetoerAddress,
     auctionSettings: { auctionDuration },
   } = useFormStore(
     (state) => ({
@@ -52,6 +54,7 @@ export const AllocationForm: React.FC<AllocationFormProps> = ({ title }) => {
       activeSection: state.activeSection,
       setFulfilledSections: state.setFulfilledSections,
       vetoPower: state.vetoPower,
+      vetoerAddress: state.vetoerAddress,
       auctionSettings: state.auctionSettings,
     }),
     shallow
@@ -73,6 +76,7 @@ export const AllocationForm: React.FC<AllocationFormProps> = ({ title }) => {
             founderAddress: signerAddress || '',
             allocationPercentage: '',
             endDate: '',
+            admin: true,
           },
         ]
       : [
@@ -80,6 +84,7 @@ export const AllocationForm: React.FC<AllocationFormProps> = ({ title }) => {
             founderAddress: signerAddress || '',
             allocationPercentage: founderAllocation[0].allocationPercentage,
             endDate: founderAllocation[0].endDate,
+            admin: true,
           },
           ...founderAllocation.slice(1),
         ]
@@ -108,6 +113,7 @@ export const AllocationForm: React.FC<AllocationFormProps> = ({ title }) => {
     setFounderAllocation(
       founderAllocation.map((allocation, idx) => ({
         ...allocation,
+        admin: undefined,
         founderAddress: founderAllocationAddresses[idx],
       }))
     )
@@ -138,6 +144,7 @@ export const AllocationForm: React.FC<AllocationFormProps> = ({ title }) => {
                   formik={formik}
                   auctionDuration={auctionDuration!}
                   vetoPower={vetoPower}
+                  vetoerAddress={vetoerAddress}
                   touched={formik.touched}
                   values={formik.values}
                   errors={formik.errors}
diff --git a/apps/web/src/modules/create-dao/components/AllocationForm/FounderAllocationFields.tsx b/apps/web/src/modules/create-dao/components/AllocationForm/FounderAllocationFields.tsx
index e715677c2..89b720757 100644
--- a/apps/web/src/modules/create-dao/components/AllocationForm/FounderAllocationFields.tsx
+++ b/apps/web/src/modules/create-dao/components/AllocationForm/FounderAllocationFields.tsx
@@ -17,6 +17,7 @@ interface FounderAllocationFieldsProps {
   values: FounderAllocationFormValues
   auctionDuration: Duration
   vetoPower?: boolean
+  vetoerAddress: string
   errors?: FormikErrors<FounderAllocationFormValues>
   touched: FormikTouched<FounderAllocationFormValues>
   formik: FormikProps<FounderAllocationFormValues>
@@ -27,6 +28,7 @@ interface FounderAllocationFieldsProps {
 export const FounderAllocationFields = ({
   values,
   vetoPower,
+  vetoerAddress,
   auctionDuration,
   errors,
   touched,
@@ -45,6 +47,7 @@ export const FounderAllocationFields = ({
       <Stack>
         {values.founderAllocation.map((founder, index) => {
           const isFounder = index === 0
+          const isVetoer = vetoPower && vetoerAddress === founder.founderAddress
 
           const error =
             typeof errors?.founderAllocation === 'object'
@@ -129,8 +132,12 @@ export const FounderAllocationFields = ({
                   </Button>
                 )}
 
-                {isFounder && vetoPower === true && (
-                  <Flex align={'center'} color="warning">
+                {isVetoer && (
+                  <Flex
+                    align={'center'}
+                    ml={isFounder ? undefined : 'x2'}
+                    color="warning"
+                  >
                     <Icon size="sm" id="warning-16" fill="warning" />
                     <Flex fontWeight={'display'} ml={'x2'}>
                       This address has proposal veto power
diff --git a/apps/web/src/modules/create-dao/components/Artwork/ArtworkUpload.tsx b/apps/web/src/modules/create-dao/components/Artwork/ArtworkUpload.tsx
index 2f3bac6ee..6125cbc40 100644
--- a/apps/web/src/modules/create-dao/components/Artwork/ArtworkUpload.tsx
+++ b/apps/web/src/modules/create-dao/components/Artwork/ArtworkUpload.tsx
@@ -124,7 +124,9 @@ export const ArtworkUpload: React.FC<ArtworkFormProps> = ({
           uri: upload?.ipfs?.uri || '',
           url: encodeURI(
             getFetchableUrl(upload?.ipfs?.uri) +
-              `/${upload.webkitRelativePath.split('/').slice(1).join('/')}` || ''
+              `/${sanitizeFileName(
+                upload.webkitRelativePath.split('/').slice(1).join('/')
+              )}` || ''
           ),
           path: upload.webkitRelativePath,
           content: upload?.content,
diff --git a/apps/web/src/modules/create-dao/components/ReviewAndDeploy/ReviewAndDeploy.tsx b/apps/web/src/modules/create-dao/components/ReviewAndDeploy/ReviewAndDeploy.tsx
index 0f957d46f..ed17b66a3 100644
--- a/apps/web/src/modules/create-dao/components/ReviewAndDeploy/ReviewAndDeploy.tsx
+++ b/apps/web/src/modules/create-dao/components/ReviewAndDeploy/ReviewAndDeploy.tsx
@@ -70,6 +70,7 @@ export const ReviewAndDeploy: React.FC<ReviewAndDeploy> = ({ title }) => {
     ipfsUpload,
     setFulfilledSections,
     vetoPower,
+    vetoerAddress,
   } = useFormStore()
 
   const handlePrev = () => {
@@ -125,7 +126,7 @@ export const ReviewAndDeploy: React.FC<ReviewAndDeploy> = ({ title }) => {
       : BigNumber.from('0'),
     vetoer:
       vetoPower === true
-        ? ethers.utils.getAddress(founderParams?.[0].wallet as AddressType)
+        ? ethers.utils.getAddress(vetoerAddress as AddressType)
         : ethers.utils.getAddress(NULL_ADDRESS),
   }
 
diff --git a/apps/web/src/modules/create-dao/components/VetoForm.tsx b/apps/web/src/modules/create-dao/components/VetoForm.tsx
index 17b9f7646..e70bafa68 100644
--- a/apps/web/src/modules/create-dao/components/VetoForm.tsx
+++ b/apps/web/src/modules/create-dao/components/VetoForm.tsx
@@ -1,15 +1,19 @@
-import { Button, Flex } from '@zoralabs/zord'
+import { Button, Flex, atoms } from '@zoralabs/zord'
 import { Form, Formik } from 'formik'
-import React from 'react'
+import { motion } from 'framer-motion'
+import React, { BaseSyntheticEvent } from 'react'
 import * as Yup from 'yup'
 
 import Radio from 'src/components/Fields/Radio'
+import SmartInput from 'src/components/Fields/SmartInput'
 import {
   defaultBackButton,
   defaultFormButtonWithPrev,
 } from 'src/components/Fields/styles.css'
 import { Icon } from 'src/components/Icon'
+import { getEnsAddress, isValidAddress } from 'src/utils/ens'
 import { isEmpty } from 'src/utils/helpers'
+import { getProvider } from 'src/utils/provider'
 
 import { useFormStore } from '../stores'
 
@@ -19,28 +23,53 @@ interface VetoFormProps {
 
 interface VetoFromValues {
   vetoPower?: boolean
+  vetoerAddress: string
+}
+
+const animation = {
+  init: {
+    height: 0,
+  },
+  open: {
+    height: 'auto',
+  },
 }
 
 export const vetoValidationSchema = Yup.object().shape({
   vetoPower: Yup.boolean().required(),
+  vetoerAddress: Yup.string().when('vetoPower', {
+    is: true,
+    then: Yup.string()
+      .required('*')
+      .test(
+        'isValidAddress',
+        'invalid address',
+        (value: string | undefined) => !!value && isValidAddress(value, getProvider())
+      ),
+  }),
 })
 
 export const VetoForm: React.FC<VetoFormProps> = ({ title }) => {
   const {
     vetoPower,
     setVetoPower,
+    vetoerAddress,
+    setVetoerAddress,
     setFulfilledSections,
     activeSection,
     setActiveSection,
   } = useFormStore()
   const initialValues: VetoFromValues = {
     vetoPower: vetoPower,
+    vetoerAddress: vetoerAddress,
   }
 
-  const handleSubmit = (values: VetoFromValues) => {
+  const handleSubmit = async (values: VetoFromValues) => {
     const vetoPower = values.vetoPower
+    const vetoerAddress = await getEnsAddress(values.vetoerAddress)
     if (vetoPower !== undefined) {
       setVetoPower(vetoPower)
+      setVetoerAddress(vetoerAddress)
       setFulfilledSections(title)
       setActiveSection(activeSection + 1)
     }
@@ -71,6 +100,34 @@ export const VetoForm: React.FC<VetoFormProps> = ({ title }) => {
                 { value: false, label: 'No' },
               ]}
             />
+            <motion.div
+              className={atoms({ overflow: 'hidden' })}
+              variants={animation}
+              initial={'init'}
+              animate={formik.values.vetoPower ? 'open' : 'init'}
+            >
+              <SmartInput
+                {...formik.getFieldProps('vetoerAddress')}
+                formik={formik}
+                inputLabel="Veto address"
+                helperText="You may assign veto power to a multisig."
+                onChange={({ target }: BaseSyntheticEvent) => {
+                  formik.setFieldValue('vetoerAddress', target.value)
+                }}
+                id="vetoerAddress"
+                type={'text'}
+                placeholder={'0x... or .eth'}
+                onBlur={formik.handleBlur}
+                autoSubmit={false}
+                isAddress={true}
+                errorMessage={
+                  formik.touched['vetoerAddress'] && formik.errors['vetoerAddress']
+                    ? formik.errors['vetoerAddress']
+                    : undefined
+                }
+              />
+            </motion.div>
+
             <Flex>
               <Button
                 justify={'center'}
diff --git a/apps/web/src/modules/create-dao/stores/useFormStore.ts b/apps/web/src/modules/create-dao/stores/useFormStore.ts
index 32c28d291..7046ba79c 100644
--- a/apps/web/src/modules/create-dao/stores/useFormStore.ts
+++ b/apps/web/src/modules/create-dao/stores/useFormStore.ts
@@ -23,6 +23,8 @@ export interface FormStoreState {
   setGeneral: (general: GeneralFormValues) => void
   vetoPower: boolean | undefined
   setVetoPower: (vetoPower: boolean) => void
+  vetoerAddress: string
+  setVetoerAddress: (vetoerAddress: string) => void
   founderAllocation: Array<TokenAllocation>
   setFounderAllocation: (founderAllocation: Array<TokenAllocation>) => void
   contributionAllocation: Array<TokenAllocation>
@@ -76,6 +78,7 @@ const initialState = {
     },
   ],
   vetoPower: undefined,
+  vetoerAddress: '',
   setUpArtwork: {
     projectDescription: '',
     artwork: [],
@@ -115,6 +118,7 @@ export const useFormStore = create(
       setContributionAllocation: (contributionAllocation: Array<TokenAllocation>) =>
         set({ contributionAllocation }),
       setVetoPower: (vetoPower: boolean) => set({ vetoPower }),
+      setVetoerAddress: (vetoerAddress: string) => set({ vetoerAddress }),
       setSetUpArtwork: (artwork: ArtworkFormValues) => set({ setUpArtwork: artwork }),
       setIpfsUpload: (ipfsUpload: IPFSUpload[]) => set({ ipfsUpload }),
       setOrderedLayers: (orderedLayers: OrderedTraits) => {
diff --git a/apps/web/src/pages/api/og/dao.tsx b/apps/web/src/pages/api/og/dao.tsx
index 8c697b4da..83a4ac10f 100644
--- a/apps/web/src/pages/api/og/dao.tsx
+++ b/apps/web/src/pages/api/og/dao.tsx
@@ -96,7 +96,14 @@ export default async function handler(req: NextRequest) {
           <img
             alt="user image"
             src={getFetchableUrl(data.daoImage)}
-            style={{ height: '180px', borderRadius: '9999px', marginRight: '50px' }}
+            style={{
+              height: '180px',
+              width: '180px',
+              borderRadius: '9999px',
+              marginRight: '50px',
+              objectFit: 'cover',
+              objectPosition: 'center',
+            }}
           />
           <div style={{ display: 'flex', flexDirection: 'column' }}>
             <p style={{ fontSize: '28px', fontWeight: 700 }}>{data.name}</p>
diff --git a/apps/web/src/pages/api/og/proposal.tsx b/apps/web/src/pages/api/og/proposal.tsx
index be8b4a1ab..fe71a11c7 100644
--- a/apps/web/src/pages/api/og/proposal.tsx
+++ b/apps/web/src/pages/api/og/proposal.tsx
@@ -85,7 +85,10 @@ const ptRootBold = fetch(
 export type ProposalOgMetadata = {
   daoName: string
   daoImage: string
-  proposal: Proposal
+  proposal: Pick<
+    Proposal,
+    'proposalNumber' | 'title' | 'status' | 'forVotes' | 'againstVotes' | 'abstainVotes'
+  >
 }
 
 export default async function handler(req: NextRequest) {
@@ -152,7 +155,14 @@ export default async function handler(req: NextRequest) {
           <img
             alt="user image"
             src={getFetchableUrl(data.daoImage)}
-            style={{ height: '52px', borderRadius: '9999px', marginRight: '10px' }}
+            style={{
+              height: '52px',
+              width: '52px',
+              borderRadius: '9999px',
+              marginRight: '10px',
+              objectFit: 'cover',
+              objectPosition: 'center',
+            }}
           />
           <div style={{ display: 'flex', flexDirection: 'column' }}>
             <p style={{ fontSize: '28px', fontWeight: 700 }}>{data.daoName}</p>
diff --git a/apps/web/src/pages/dao/[token]/vote/[id].tsx b/apps/web/src/pages/dao/[token]/vote/[id].tsx
index 4b31c7659..72e4a2c47 100644
--- a/apps/web/src/pages/dao/[token]/vote/[id].tsx
+++ b/apps/web/src/pages/dao/[token]/vote/[id].tsx
@@ -23,6 +23,7 @@ import {
   isProposalOpen,
 } from 'src/modules/proposal'
 import { NextPageWithLayout } from 'src/pages/_app'
+import { ProposalOgMetadata } from 'src/pages/api/og/proposal'
 import { propPageWrapper } from 'src/styles/Proposals.css'
 
 export interface VotePageProps {
@@ -140,16 +141,23 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
       }
     }
 
+    const ogMetadata: ProposalOgMetadata = {
+      proposal: {
+        proposalNumber: proposal.proposalNumber,
+        title: proposal.title,
+        status: proposal.status,
+        forVotes: proposal.forVotes,
+        againstVotes: proposal.againstVotes,
+        abstainVotes: proposal.abstainVotes,
+      },
+      daoName,
+      daoImage,
+    }
+
     const protocol = process.env.VERCEL_ENV === 'development' ? 'http' : 'https'
     const ogImageURL = `${protocol}://${
       context.req.headers.host
-    }/api/og/proposal?data=${encodeURIComponent(
-      JSON.stringify({
-        proposal,
-        daoName,
-        daoImage,
-      })
-    )}`
+    }/api/og/proposal?data=${encodeURIComponent(JSON.stringify(ogMetadata))}`
 
     return {
       props: {