diff --git a/actions/createMultisigRealm.ts b/actions/createMultisigRealm.ts
index e972fc5704..7968b3b89b 100644
--- a/actions/createMultisigRealm.ts
+++ b/actions/createMultisigRealm.ts
@@ -5,6 +5,7 @@ import {
   SetRealmAuthorityAction,
   VoteThresholdPercentage,
   VoteTipping,
+  withCreateNativeTreasury,
 } from '@solana/spl-governance'
 
 import { withCreateMintGovernance } from '@solana/spl-governance'
@@ -28,8 +29,9 @@ import {
 } from '@tools/sdk/units'
 import {
   getWalletPublicKey,
-  sendTransactions,
+  sendTransactionsV2,
   SequenceType,
+  transactionInstructionsToTypedInstructionsSets,
   WalletSigner,
 } from 'utils/sendTransactions'
 import { chunks } from '@utils/helpers'
@@ -209,6 +211,15 @@ export const createMultisigRealm = async (
     walletPk
   )
 
+  await withCreateNativeTreasury(
+    realmInstructions,
+    programId,
+    communityMintGovPk,
+    walletPk
+  )
+
+  console.log('CREATE NFT REALM governance config created', config)
+
   // Set the community governance as the realm authority
   withSetRealmAuthority(
     realmInstructions,
@@ -227,13 +238,26 @@ export const createMultisigRealm = async (
       []
     )
 
-    const tx = await sendTransactions(
+    const tx = await sendTransactionsV2({
       connection,
+      showUiComponent: true,
       wallet,
-      [mintsSetupInstructions, ...councilMembersChunks, realmInstructions],
-      [mintsSetupSigners, ...councilMembersSignersChunks, realmSigners],
-      SequenceType.Sequential
-    )
+      signersSet: [
+        mintsSetupSigners,
+        ...councilMembersSignersChunks,
+        realmSigners,
+      ],
+      TransactionInstructions: [
+        mintsSetupInstructions,
+        ...councilMembersChunks,
+        realmInstructions,
+      ].map((x) =>
+        transactionInstructionsToTypedInstructionsSets(
+          x,
+          SequenceType.Sequential
+        )
+      ),
+    })
 
     return {
       tx,
diff --git a/actions/createMultisigWallet.ts b/actions/createMultisigWallet.ts
new file mode 100644
index 0000000000..d28010c8e1
--- /dev/null
+++ b/actions/createMultisigWallet.ts
@@ -0,0 +1,100 @@
+import { Connection, PublicKey } from '@solana/web3.js'
+
+import {
+  sendTransactionsV2,
+  SequenceType,
+  transactionInstructionsToTypedInstructionsSets,
+  WalletSigner,
+} from 'utils/sendTransactions'
+import { chunks } from '@utils/helpers'
+
+import { prepareRealmCreation } from '@tools/governance/prepareRealmCreation'
+
+/// Creates multisig realm with community mint with 0 supply
+/// and council mint used as multisig token
+interface MultisigWallet {
+  connection: Connection
+  wallet: WalletSigner
+  programIdAddress: string
+
+  realmName: string
+  councilYesVotePercentage: number
+  councilWalletPks: PublicKey[]
+}
+
+export default async function createMultisigWallet({
+  connection,
+  wallet,
+  programIdAddress,
+  realmName,
+
+  councilYesVotePercentage,
+  councilWalletPks,
+}: MultisigWallet) {
+  const {
+    communityMintPk,
+    councilMintPk,
+    realmPk,
+    realmInstructions,
+    realmSigners,
+    mintsSetupInstructions,
+    mintsSetupSigners,
+    councilMembersInstructions,
+  } = await prepareRealmCreation({
+    connection,
+    wallet,
+    programIdAddress,
+
+    realmName,
+    tokensToGovernThreshold: undefined,
+
+    existingCommunityMintPk: undefined,
+    communityMintSupplyFactor: undefined,
+    transferCommunityMintAuthority: true,
+    communityYesVotePercentage: councilYesVotePercentage,
+
+    createCouncil: true,
+    existingCouncilMintPk: undefined,
+    transferCouncilMintAuthority: true,
+    councilWalletPks,
+  })
+
+  try {
+    const councilMembersChunks = chunks(councilMembersInstructions, 10)
+    // only walletPk needs to sign the minting instructions and it's a signer by default and we don't have to include any more signers
+    const councilMembersSignersChunks = Array(councilMembersChunks.length).fill(
+      []
+    )
+    console.log('CREATE MULTISIG WALLET: sending transactions')
+    const tx = await sendTransactionsV2({
+      connection,
+      showUiComponent: true,
+      wallet,
+      signersSet: [
+        mintsSetupSigners,
+        ...councilMembersSignersChunks,
+        realmSigners,
+      ],
+      TransactionInstructions: [
+        mintsSetupInstructions,
+        ...councilMembersChunks,
+        realmInstructions,
+      ].map((x) =>
+        transactionInstructionsToTypedInstructionsSets(
+          x,
+          SequenceType.Sequential
+        )
+      ),
+    })
+
+    return {
+      tx,
+      realmPk,
+      communityMintPk,
+      councilMintPk,
+    }
+  } catch (ex) {
+    console.error(ex)
+    throw ex
+  }
+}
diff --git a/actions/createNFTRealm.ts b/actions/createNFTRealm.ts
new file mode 100644
index 0000000000..904aae0b73
--- /dev/null
+++ b/actions/createNFTRealm.ts
@@ -0,0 +1,272 @@
+import {
+  SetRealmAuthorityAction,
+  SYSTEM_PROGRAM_ID,
+  withCreateTokenOwnerRecord,
+  withSetRealmAuthority,
+} from '@solana/spl-governance'
+
+import {
+  Connection,
+  Keypair,
+  PublicKey,
+  TransactionInstruction,
+} from '@solana/web3.js'
+import { AnchorProvider, Wallet } from '@project-serum/anchor'
+
+import {
+  sendTransactionsV2,
+  SequenceType,
+  WalletSigner,
+  transactionInstructionsToTypedInstructionsSets,
+} from 'utils/sendTransactions'
+import { chunks } from '@utils/helpers'
+import { nftPluginsPks } from '@hooks/useVotingPlugins'
+
+import {
+  getNftVoterWeightRecord,
+  getNftMaxVoterWeightRecord,
+  getNftRegistrarPDA,
+} from 'NftVotePlugin/sdk/accounts'
+import { NftVoterClient } from '@solana/governance-program-library'
+
+import { prepareRealmCreation } from '@tools/governance/prepareRealmCreation'
+interface NFTRealm {
+  connection: Connection
+  wallet: WalletSigner
+  programIdAddress: string
+
+  realmName: string
+  collectionAddress: string
+  collectionCount: number
+  tokensToGovernThreshold: number | undefined
+
+  communityYesVotePercentage: number
+  existingCommunityMintPk: PublicKey | undefined
+  // communityMintSupplyFactor: number | undefined
+
+  createCouncil: boolean
+  existingCouncilMintPk: PublicKey | undefined
+  transferCouncilMintAuthority: boolean | undefined
+  councilWalletPks: PublicKey[]
+}
+
+export default async function createNFTRealm({
+  connection,
+  wallet,
+  programIdAddress,
+  realmName,
+  tokensToGovernThreshold = 1,
+
+  collectionAddress,
+  collectionCount,
+
+  existingCommunityMintPk,
+  communityYesVotePercentage,
+  // communityMintSupplyFactor: rawCMSF,
+
+  createCouncil = false,
+  existingCouncilMintPk,
+  transferCouncilMintAuthority = true,
+  // councilYesVotePercentage,
+  councilWalletPks,
+}: NFTRealm) {
+  const options = AnchorProvider.defaultOptions()
+  const provider = new AnchorProvider(connection, wallet as Wallet, options)
+  const nftClient = await NftVoterClient.connect(provider)
+
+  const {
+    communityMintGovPk,
+    communityMintPk,
+    councilMintPk,
+    realmPk,
+    walletPk,
+    programIdPk,
+    programVersion,
+    minCommunityTokensToCreateAsMintValue,
+    realmInstructions,
+    realmSigners,
+    mintsSetupInstructions,
+    mintsSetupSigners,
+    councilMembersInstructions,
+  } = await prepareRealmCreation({
+    connection,
+    wallet,
+    programIdAddress,
+
+    realmName,
+    tokensToGovernThreshold,
+
+    existingCommunityMintPk,
+    nftCollectionCount: collectionCount,
+    communityMintSupplyFactor: undefined,
+    transferCommunityMintAuthority: false, // delay this until we have created NFT instructions
+    communityYesVotePercentage,
+
+    createCouncil,
+    existingCouncilMintPk,
+    transferCouncilMintAuthority,
+    councilWalletPks,
+
+    additionalRealmPlugins: [
+      new PublicKey(nftPluginsPks[0]),
+      new PublicKey(nftPluginsPks[0]),
+    ],
+  })
+
+  console.log('NFT REALM realm public-key', realmPk.toBase58())
+  const { registrar } = await getNftRegistrarPDA(
+    realmPk,
+    communityMintPk,
+    nftClient!.program.programId
+  )
+  const instructionCR = await nftClient!.program.methods
+    .createRegistrar(10) // Max collections
+    .accounts({
+      registrar,
+      realm: realmPk,
+      governanceProgramId: programIdPk,
+      // realmAuthority: communityMintGovPk,
+      realmAuthority: walletPk,
+      governingTokenMint: communityMintPk,
+      payer: walletPk,
+      systemProgram: SYSTEM_PROGRAM_ID,
+    })
+    .instruction()
+
+  console.log(
+    'CREATE NFT REALM registrar PDA',
+    registrar.toBase58(),
+    instructionCR
+  )
+
+  const { maxVoterWeightRecord } = await getNftMaxVoterWeightRecord(
+    realmPk,
+    communityMintPk,
+    nftClient!.program.programId
+  )
+  const instructionMVWR = await nftClient!.program.methods
+    .createMaxVoterWeightRecord()
+    .accounts({
+      maxVoterWeightRecord,
+      governanceProgramId: programIdPk,
+      realm: realmPk,
+      realmGoverningTokenMint: communityMintPk,
+      payer: walletPk,
+      systemProgram: SYSTEM_PROGRAM_ID,
+    })
+    .instruction()
+  console.log(
+    'CREATE NFT REALM max voter weight record',
+    maxVoterWeightRecord.toBase58(),
+    instructionMVWR
+  )
+
+  const instructionCC = await nftClient!.program.methods
+    .configureCollection(minCommunityTokensToCreateAsMintValue, collectionCount)
+    .accounts({
+      registrar,
+      realm: realmPk,
+      // realmAuthority: communityMintGovPk,
+      realmAuthority: walletPk,
+      collection: new PublicKey(collectionAddress),
+      maxVoterWeightRecord: maxVoterWeightRecord,
+    })
+    .instruction()
+
+  console.log(
+    'CREATE NFT REALM configure collection',
+    minCommunityTokensToCreateAsMintValue,
+    instructionCC
+  )
+
+  const nftConfigurationInstructions: TransactionInstruction[] = [
+    instructionCR,
+    instructionMVWR,
+    instructionCC,
+  ]
+
+  // Set the community governance as the realm authority
+  withSetRealmAuthority(
+    nftConfigurationInstructions,
+    programIdPk,
+    programVersion,
+    realmPk,
+    walletPk,
+    communityMintGovPk,
+    SetRealmAuthorityAction.SetChecked
+  )
+
+  const { voterWeightPk } = await getNftVoterWeightRecord(
+    realmPk,
+    communityMintPk,
+    walletPk,
+    nftClient.program.programId
+  )
+  console.log('NFT realm voter weight', voterWeightPk.toBase58())
+  const createVoterWeightRecord = await nftClient.program.methods
+    .createVoterWeightRecord(walletPk)
+    .accounts({
+      voterWeightRecord: voterWeightPk,
+      governanceProgramId: programIdPk,
+      realm: realmPk,
+      realmGoverningTokenMint: communityMintPk,
+      payer: walletPk,
+      systemProgram: SYSTEM_PROGRAM_ID,
+    })
+    .instruction()
+  console.log(
+    'NFT realm voter weight record instruction',
+    createVoterWeightRecord
+  )
+  nftConfigurationInstructions.push(createVoterWeightRecord)
+  await withCreateTokenOwnerRecord(
+    nftConfigurationInstructions,
+    programIdPk,
+    realmPk,
+    walletPk,
+    communityMintPk,
+    walletPk
+  )
+
+  try {
+    const councilMembersChunks = chunks(councilMembersInstructions, 10)
+    // only walletPk needs to sign the minting instructions and it's a signer by default and we don't have to include any more signers
+    const councilMembersSignersChunks = Array(councilMembersChunks.length).fill(
+      []
+    )
+    const nftSigners: Keypair[] = []
+    console.log('CREATE NFT REALM: sending transactions')
+    const tx = await sendTransactionsV2({
+      connection,
+      showUiComponent: true,
+      wallet,
+      signersSet: [
+        mintsSetupSigners,
+        ...councilMembersSignersChunks,
+        realmSigners,
+        nftSigners,
+      ],
+      TransactionInstructions: [
+        mintsSetupInstructions,
+        ...councilMembersChunks,
+        realmInstructions,
+        nftConfigurationInstructions,
+      ].map((x) =>
+        transactionInstructionsToTypedInstructionsSets(
+          x,
+          SequenceType.Sequential
+        )
+      ),
+    })
+
+    return {
+      tx,
+      realmPk,
+      communityMintPk,
+      councilMintPk,
+    }
+  } catch (ex) {
+    console.error(ex)
+    throw ex
+  }
+}
diff --git a/actions/createTokenizedRealm.ts b/actions/createTokenizedRealm.ts
new file mode 100644
index 0000000000..6c7b531f86
--- /dev/null
+++ b/actions/createTokenizedRealm.ts
@@ -0,0 +1,116 @@
+import { Connection, PublicKey } from '@solana/web3.js'
+
+import {
+  sendTransactionsV2,
+  transactionInstructionsToTypedInstructionsSets,
+  SequenceType,
+  WalletSigner,
+} from 'utils/sendTransactions'
+import { chunks } from '@utils/helpers'
+
+import { prepareRealmCreation } from '@tools/governance/prepareRealmCreation'
+
+interface TokenizedRealm {
+  connection: Connection
+  wallet: WalletSigner
+  programIdAddress: string
+
+  realmName: string
+  tokensToGovernThreshold: number | undefined
+
+  communityYesVotePercentage: number
+  existingCommunityMintPk: PublicKey | undefined
+  transferCommunityMintAuthority: boolean | undefined
+  communityMintSupplyFactor: number | undefined
+
+  createCouncil: boolean
+  existingCouncilMintPk: PublicKey | undefined
+  transferCouncilMintAuthority: boolean | undefined
+  councilWalletPks: PublicKey[]
+}
+
+export default async function createTokenizedRealm({
+  connection,
+  wallet,
+  programIdAddress,
+  realmName,
+  tokensToGovernThreshold,
+
+  existingCommunityMintPk,
+  transferCommunityMintAuthority = true,
+  communityYesVotePercentage,
+  communityMintSupplyFactor: rawCMSF,
+
+  createCouncil = false,
+  existingCouncilMintPk,
+  transferCouncilMintAuthority = true,
+  // councilYesVotePercentage,
+  councilWalletPks,
+}: TokenizedRealm) {
+  const {
+    communityMintPk,
+    councilMintPk,
+    realmPk,
+    realmInstructions,
+    realmSigners,
+    mintsSetupInstructions,
+    mintsSetupSigners,
+    councilMembersInstructions,
+  } = await prepareRealmCreation({
+    connection,
+    wallet,
+    programIdAddress,
+
+    realmName,
+    tokensToGovernThreshold,
+
+    existingCommunityMintPk,
+    communityMintSupplyFactor: rawCMSF,
+    transferCommunityMintAuthority,
+    communityYesVotePercentage,
+
+    createCouncil,
+    existingCouncilMintPk,
+    transferCouncilMintAuthority,
+    councilWalletPks,
+  })
+
+  try {
+    const councilMembersChunks = chunks(councilMembersInstructions, 10)
+    // only walletPk needs to sign the minting instructions and it's a signer by default and we don't have to include any more signers
+    const councilMembersSignersChunks = Array(councilMembersChunks.length).fill(
+      []
+    )
+    console.log('CREATE GOV TOKEN REALM: sending transactions')
+    const tx = await sendTransactionsV2({
+      connection,
+      showUiComponent: true,
+      wallet,
+      signersSet: [
+        mintsSetupSigners,
+        ...councilMembersSignersChunks,
+        realmSigners,
+      ],
+      TransactionInstructions: [
+        mintsSetupInstructions,
+        ...councilMembersChunks,
+        realmInstructions,
+      ].map((x) =>
+        transactionInstructionsToTypedInstructionsSets(
+          x,
+          SequenceType.Sequential
+        )
+      ),
+    })
+
+    return {
+      tx,
+      realmPk,
+      communityMintPk,
+      councilMintPk,
+    }
+  } catch (ex) {
+    console.error(ex)
+    throw ex
+  }
+}
diff --git a/components/AssetsList/BaseGovernanceForm.tsx b/components/AssetsList/BaseGovernanceForm.tsx
index 0304190793..b12b13901b 100644
--- a/components/AssetsList/BaseGovernanceForm.tsx
+++ b/components/AssetsList/BaseGovernanceForm.tsx
@@ -15,7 +15,7 @@ import BigNumber from 'bignumber.js'
 import React, { useEffect, useState } from 'react'
 
 export interface BaseGovernanceFormFields {
-  minCommunityTokensToCreateProposal: number
+  minCommunityTokensToCreateProposal: number | string
   minInstructionHoldUpTime: number
   maxVotingTime: number
   voteThreshold: number
@@ -157,7 +157,7 @@ const BaseGovernanceForm = ({ formErrors, form, setForm, setFormErrors }) => {
         }
         error={formErrors['voteThreshold']}
       />
-      <div className="pb-5 max-w-lg">
+      <div className="max-w-lg pb-5">
         <AmountSlider
           step={1}
           value={form.voteThreshold}
diff --git a/components/Button.tsx b/components/Button.tsx
index fa6a48347f..41496ada1f 100644
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -1,7 +1,8 @@
 import { FunctionComponent } from 'react'
-import Loading from './Loading'
+import Loading, { LoadingDots } from './Loading'
 import Tooltip from './Tooltip'
-
+import Header from './Header'
+import GradientCheckmarkCircle from './NewRealmWizard/components/GradientCheckmarkCircle'
 interface ButtonProps {
   className?: string
   isLoading?: boolean
@@ -60,7 +61,7 @@ export const SecondaryButton: FunctionComponent<ButtonProps> = ({
       disabled={disabled}
       className={`${className} border border-primary-light font-bold default-transition rounded-full px-4 ${
         small ? 'py-1' : 'py-2.5'
-      } text-primary-light text-sm hover:border-primary-dark hover:text-primary-dark focus:outline-none disabled:border-fgd-3 disabled:text-fgd-3 disabled:cursor-not-allowed`}
+      } text-primary-light text-sm hover:border-fgd-1 hover:text-fgd-1 focus:outline-none disabled:border-fgd-4 disabled:text-fgd-3 disabled:cursor-not-allowed`}
       {...props}
     >
       <Tooltip content={tooltipMessage}>
@@ -88,3 +89,79 @@ export const LinkButton: FunctionComponent<ButtonProps> = ({
     </button>
   )
 }
+
+interface NewButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  loading?: boolean
+  secondary?: boolean
+  radio?: boolean
+  selected?: boolean
+  className?: string
+}
+
+export const NewButton: FunctionComponent<NewButtonProps> = ({
+  className = '',
+  loading = false,
+  secondary = false,
+  children,
+  ...props
+}) => {
+  let classNames = `heading-cta default-transition rounded-full focus-visible:outline-none disabled:cursor-not-allowed `
+
+  if (loading) {
+    classNames +=
+      ' h-[64px] min-w-[208px] border border-fgd-3 disabled:border-fgd-3'
+  } else if (secondary) {
+    classNames +=
+      'py-3 px-2 h-[64px] min-w-[208px] text-fgd-1 border border-fgd-3 focus:border-fgd-1 hover:bg-fgd-1 hover:text-bkg-1 active:bg-fgd-2 active:text-bkg-1 active:border-none disabled:bg-fgd-4 disabled:text-bkg-1 disabled:border-none '
+  } else {
+    // this is a primary button
+    // TODO: make sure this using the typogrpahic class for CTAs
+    classNames +=
+      'py-4 px-2 h-[64px] min-w-[208px] text-bkg-1 bg-fgd-1 hover:bg-fgd-2 active:bg-fgd-3 active:border-none focus:border-2 focus:border-[#00E4FF] disabled:bg-fgd-4'
+  }
+
+  classNames += ` ${className}`
+
+  return (
+    <button
+      className={classNames}
+      disabled={props.disabled || loading}
+      {...props}
+    >
+      {!loading ? children : <LoadingDots />}
+    </button>
+  )
+}
+
+export const RadioButton: FunctionComponent<NewButtonProps> = ({
+  className = '',
+  selected = false,
+  disabled = false,
+  children,
+  ...props
+}) => {
+  let classNames =
+    'group default-transition py-3 px-2 h-[72px] min-w-[208px] text-fgd-1 rounded border disabled:cursor-not-allowed'
+
+  if (selected) {
+    classNames += ' bg-bkg-4 border-fgd-1 focus:border-blue'
+  } else {
+    classNames += ' focus:bg-fgd-3 focus:border-none'
+  }
+
+  if (!disabled) {
+    classNames += 'hover:bg-bkg-4 hover:border-fgd-1 border-fgd-3'
+  } else {
+    classNames += ' bg-none text-fgd-4 border-bkg-4'
+  }
+
+  classNames += ` ${className}`
+  return (
+    <button className={classNames} type="button" disabled={disabled} {...props}>
+      <div className="flex items-center pl-4 space-x-3 md:pl-0 md:justify-center">
+        <GradientCheckmarkCircle selected={selected} />
+        <Header as="cta">{children}</Header>
+      </div>
+    </button>
+  )
+}
diff --git a/components/ConnectWalletButton.tsx b/components/ConnectWalletButton.tsx
index 657acf77c2..3060645dd8 100644
--- a/components/ConnectWalletButton.tsx
+++ b/components/ConnectWalletButton.tsx
@@ -1,3 +1,4 @@
+import { useRouter } from 'next/router'
 import {
   AddressImage,
   DisplayAddress,
@@ -29,6 +30,11 @@ const StyledWalletProviderLabel = styled.p`
 `
 
 const ConnectWalletButton = (props) => {
+  const { pathname, query, replace } = useRouter()
+  const [currentCluster, setCurrentCluster] = useLocalStorageState(
+    'cluster',
+    'mainnet'
+  )
   const {
     connected,
     current,
@@ -36,24 +42,33 @@ const ConnectWalletButton = (props) => {
     connection,
     set: setWalletStore,
   } = useWalletStore((s) => s)
-
   const provider = useMemo(() => getWalletProviderByUrl(providerUrl), [
     providerUrl,
   ])
 
-  const [useDevnet, setUseDevnet] = useLocalStorageState('false')
-  const handleToggleDevnet = () => {
-    setUseDevnet(!useDevnet)
-    if (useDevnet) {
-      window.location.href = `${window.location.pathname}`
-    } else {
-      window.location.href = `${window.location.href}?cluster=devnet`
-    }
-  }
   useEffect(() => {
-    setUseDevnet(connection.cluster === 'devnet')
+    setCurrentCluster(connection.cluster)
   }, [connection.cluster])
 
+  function updateClusterParam(cluster) {
+    const newQuery = {
+      ...query,
+      cluster,
+    }
+    if (!cluster) {
+      delete newQuery.cluster
+    }
+    replace({ pathname, query: newQuery }, undefined, {
+      shallow: true,
+    })
+  }
+
+  function handleToggleDevnet() {
+    const isDevnet = !(currentCluster === 'devnet')
+    setCurrentCluster(isDevnet ? 'devnet' : 'mainnet')
+    updateClusterParam(isDevnet ? 'devnet' : null)
+  }
+
   const handleConnectDisconnect = async () => {
     try {
       if (connected) {
@@ -90,7 +105,7 @@ const ConnectWalletButton = (props) => {
 
   const displayAddressImage = useMemo(() => {
     return connected && current?.publicKey ? (
-      <div className="w-12 pr-2">
+      <div className="hidden w-12 pr-2 sm:block">
         <AddressImage
           dark={true}
           connection={connection.current}
@@ -105,7 +120,7 @@ const ConnectWalletButton = (props) => {
         />{' '}
       </div>
     ) : (
-      <div className="pl-2 pr-2">
+      <div className="hidden pl-2 pr-2 sm:block">
         <img src={provider?.adapter.icon} className="w-5 h-5" />
       </div>
     )
@@ -183,7 +198,7 @@ const ConnectWalletButton = (props) => {
                     <div className="flex items-center w-full p-2 font-normal default-transition h-9 hover:bg-bkg-3 hover:cursor-pointer hover:rounded focus:outline-none">
                       <span className="text-sm">Devnet</span>
                       <Switch
-                        checked={useDevnet}
+                        checked={currentCluster === 'devnet'}
                         onChange={() => {
                           handleToggleDevnet()
                         }}
diff --git a/components/Footer.tsx b/components/Footer.tsx
index f1a99b34e8..b5e0a5f258 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -8,7 +8,7 @@ const RelevantLinks = {
 
 const Socials = {
   Twitter: {
-    url: 'https://twitter.com/solana',
+    url: 'https://twitter.com/Realms_DAOs',
     imgSrc: '/icons/twitter.svg',
   },
   Github: {
@@ -27,7 +27,7 @@ const Footer = () => {
   if (REALM) return null
   else
     return (
-      <div className="absolute bottom-0 left-0 flex flex-row justify-around w-full h-20 px-12 border-t bg-bkg-1 gap-y-8 md:gap-y-0 border-brand-gradient">
+      <div className="absolute bottom-0 left-0 flex flex-row justify-around w-full h-20 px-12 border-t border-bkg-4 bg-bkg-2 gap-y-8 md:gap-y-0">
         <div className="flex items-center justify-center gap-x-5 md:gap-x-6 ">
           {Object.keys(RelevantLinks).map((linkTitle) => {
             const href = RelevantLinks[linkTitle]
@@ -36,7 +36,7 @@ const Footer = () => {
                 key={linkTitle}
                 href={href}
                 target="_blank"
-                className="text-base font-bold default-transition hover:text-primary-dark"
+                className="text-base font-bold default-transition hover:text-fgd-2"
                 rel="noreferrer"
               >
                 {linkTitle}
@@ -63,15 +63,13 @@ const Footer = () => {
         </div>
 
         <div className="items-center justify-center hidden gap-x-1 md:flex">
-          <p className="text-base font-light hover:text-primary-dark ">
-            Powered by
-          </p>
+          <p className="text-base font-light">Powered by</p>
 
           <a
             rel="noreferrer"
             href="https://solana.com/"
             target="_blank"
-            className="text-base font-bold default-transition hover:text-primary-dark"
+            className="text-base font-bold default-transition hover:text-fgd-2"
           >
             Solana
           </a>
diff --git a/components/Header.tsx b/components/Header.tsx
new file mode 100644
index 0000000000..c7b70cab7a
--- /dev/null
+++ b/components/Header.tsx
@@ -0,0 +1,32 @@
+import { createElement } from 'react'
+
+export default function Header({
+  as = 'h2',
+  withGradient = false,
+  className = '',
+  children,
+}) {
+  let classNames = ''
+  if (as === 'h1') {
+    classNames += ` heading-xl`
+  } else if (as === 'h2') {
+    classNames += ` heading-lg`
+  } else if (as === 'h3') {
+    classNames += ` heading-base`
+  } else if (as === 'h4') {
+    classNames += ` heading-sm`
+  } else if (as === 'h5') {
+    classNames += ` heading-xs`
+  } else if (as === 'h6' || as === 'cta') {
+    as = 'div'
+    classNames += ` heading-cta`
+  }
+
+  classNames += ` ${className}`
+
+  if (withGradient) {
+    classNames += ` bg-gradient-to-r from-[#00C2FF] via-[#00E4FF] to-[#87F2FF] bg-clip-text text-transparent`
+  }
+
+  return createElement(as, { className: classNames }, children)
+}
diff --git a/components/Loading.tsx b/components/Loading.tsx
index c9fe6011e1..c333b8d00b 100644
--- a/components/Loading.tsx
+++ b/components/Loading.tsx
@@ -1,5 +1,21 @@
 import { FunctionComponent } from 'react'
 
+export const LoadingDots = ({ className = '' }) => {
+  return (
+    <div className={`flex items-center justify-center ${className}`}>
+      <span className="w-2 h-2 mx-[2px] bg-primary-dark rounded-full animate-loader"></span>
+      <span
+        className="w-2 h-2 mx-[2px] bg-primary-dark rounded-full animate-loader"
+        style={{ animationDelay: '0.2s' }}
+      ></span>
+      <span
+        className="w-2 h-2 mx-[2px] bg-primary-dark rounded-full animate-loader"
+        style={{ animationDelay: '0.4s' }}
+      ></span>
+    </div>
+  )
+}
+
 interface LoadingProps {
   className?: string
   w?: string
@@ -12,7 +28,7 @@ const Loading: FunctionComponent<LoadingProps> = ({
   h = 5,
 }) => {
   return (
-    <div className="w-full flex justify-center">
+    <div className="flex justify-center w-full">
       <svg
         className={`${className} animate-spin h-${w} w-${h}`}
         xmlns="http://www.w3.org/2000/svg"
diff --git a/components/Modal.tsx b/components/Modal.tsx
index a48e1004be..f866bcae60 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -12,7 +12,7 @@ const Modal = ({
   return (
     <Portal>
       <div
-        className="fixed z-30 inset-0 overflow-y-auto"
+        className="fixed inset-0 z-30 overflow-y-auto"
         aria-labelledby="modal-title"
         role="dialog"
         aria-modal="true"
@@ -20,7 +20,7 @@ const Modal = ({
         <div className="flex items-center min-h-screen px-4 pb-20 text-center sm:block sm:p-0">
           {isOpen ? (
             <div
-              className="fixed inset-0 bg-black bg-opacity-70 transition-opacity"
+              className="fixed inset-0 transition-opacity bg-black bg-opacity-70"
               aria-hidden="true"
               onClick={onClose}
             ></div>
diff --git a/components/NavBar.tsx b/components/NavBar.tsx
index 6b07731754..173126aa62 100644
--- a/components/NavBar.tsx
+++ b/components/NavBar.tsx
@@ -22,18 +22,12 @@ const NavBar = () => {
             </picture>
           </div>
         </Link>
-        <div className="flex flex-wrap items-center justify-end">
-          <div className="justify-between hidden mx-4 space-x-4 sm:flex">
-            <ThemeSwitch />
-            <NotificationsSwitch />
-          </div>
+        <div className="flex items-center justify-end space-x-2 md:space-x-4">
+          <ThemeSwitch />
+          <NotificationsSwitch />
           <ConnectWalletButton />
         </div>
       </div>
-      <div className="flex justify-end px-4 space-x-4 sm:hidden">
-        <ThemeSwitch />
-        <NotificationsSwitch />
-      </div>
     </div>
   )
 }
diff --git a/components/NewRealmWizard/CreateDAOWizard.tsx b/components/NewRealmWizard/CreateDAOWizard.tsx
new file mode 100644
index 0000000000..2639e1cbd7
--- /dev/null
+++ b/components/NewRealmWizard/CreateDAOWizard.tsx
@@ -0,0 +1,47 @@
+import FormSummary from '@components/NewRealmWizard/components/FormSummary'
+
+export default function CreateDAOWizard({
+  type,
+  steps,
+  currentStep,
+  formData,
+  handlePreviousButton,
+  handleNextButtonClick,
+  handleSubmit,
+  submissionPending,
+}) {
+  return (
+    <>
+      {steps.map(({ Form, ...props }, index) => {
+        delete props.schema
+        delete props.required
+        const visible = index == currentStep
+        return (
+          <div key={index} className={visible ? '' : 'hidden'}>
+            <Form
+              type={type}
+              visible={visible}
+              formData={formData}
+              currentStep={index}
+              totalSteps={steps.length + 1}
+              onPrevClick={handlePreviousButton}
+              onSubmit={handleNextButtonClick}
+              {...props}
+            />
+          </div>
+        )
+      })}
+
+      {currentStep == steps.length + 1 && (
+        <FormSummary
+          type={type}
+          currentStep={currentStep}
+          formData={formData}
+          onPrevClick={handlePreviousButton}
+          onSubmit={handleSubmit}
+          submissionPending={submissionPending}
+        />
+      )}
+    </>
+  )
+}
diff --git a/components/NewRealmWizard/PageTemplate.tsx b/components/NewRealmWizard/PageTemplate.tsx
new file mode 100644
index 0000000000..7a5ae790c5
--- /dev/null
+++ b/components/NewRealmWizard/PageTemplate.tsx
@@ -0,0 +1,146 @@
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import Head from 'next/head'
+
+import { isWizardValid } from '@utils/formValidation'
+
+import CreateDAOWizard from '@components/NewRealmWizard/CreateDAOWizard'
+import useWalletStore from 'stores/useWalletStore'
+
+// import { FORM_NAME as NFT_FORM } from 'pages/realms/new/nft'
+import { FORM_NAME as MULTISIG_WALLET_FORM } from 'pages/realms/new/multisig'
+import { FORM_NAME as COMMUNITY_TOKEN_FORM } from 'pages/realms/new/community-token'
+
+export const Section = ({ children }) => {
+  return (
+    <div className="w-full mx-auto lg:w-5/6  max-w-[770px] px-0 pb-[130px] sm:pb-[250px] relative min-h-[calc(100vh_-_75px)]">
+      {children}
+    </div>
+  )
+}
+
+export default function FormPage({
+  autoInviteWallet = false,
+  type,
+  steps,
+  handleSubmit,
+  submissionPending,
+}) {
+  const { connected, current: wallet } = useWalletStore((s) => s)
+  const userAddress = wallet?.publicKey?.toBase58()
+  const [formData, setFormData] = useState<any>({
+    memberAddresses:
+      autoInviteWallet && userAddress ? [userAddress] : undefined,
+  })
+  const { query, push } = useRouter()
+  const currentStep = formData?.currentStep || 0
+  const title = `Create ${
+    type === MULTISIG_WALLET_FORM
+      ? 'multi-signature wallet'
+      : type === COMMUNITY_TOKEN_FORM
+      ? 'community token DAO'
+      : 'NFT community DAO'
+  } | Realms`
+
+  useEffect(() => {
+    async function tryToConnect() {
+      try {
+        if (!connected) {
+          if (wallet) await wallet.connect()
+        }
+        if (!wallet?.publicKey) {
+          throw new Error('No valid wallet connected')
+        }
+      } catch (err) {
+        if (currentStep > 0) handlePreviousButton(1)
+      }
+    }
+
+    tryToConnect()
+  }, [connected])
+
+  useEffect(() => {
+    if (currentStep > 0 && !isWizardValid({ currentStep, steps, formData })) {
+      handlePreviousButton(currentStep)
+    }
+  }, [currentStep])
+
+  function handleNextButtonClick({ step: fromStep, data }) {
+    const updatedFormState = {
+      ...formData,
+      ...data,
+    }
+    const nextStep = steps
+      .map(
+        ({ required }) =>
+          required === 'true' ||
+          !!eval(required.replace('form', 'updatedFormState'))
+      )
+      .indexOf(true, fromStep + 1)
+
+    updatedFormState.currentStep = nextStep > -1 ? nextStep : steps.length + 1
+
+    console.log('next button clicked', fromStep, nextStep)
+
+    for (const key in updatedFormState) {
+      if (updatedFormState[key] == null) {
+        delete updatedFormState[key]
+      }
+    }
+    setFormData(updatedFormState)
+  }
+
+  function handlePreviousButton(fromStep) {
+    console.log(
+      'previous button clicked from step:',
+      fromStep,
+      currentStep,
+      query
+    )
+
+    if (fromStep === 0) {
+      push(
+        {
+          pathname: '/realms/new/',
+          query: query?.cluster ? { cluster: query.cluster } : {},
+        },
+        undefined,
+        { shallow: true }
+      )
+    } else {
+      const previousStep = steps
+        .map(
+          ({ required }) =>
+            required === 'true' || !!eval(required.replace('form', 'formData'))
+        )
+        .lastIndexOf(true, fromStep - 1)
+
+      const updatedFormState = {
+        ...formData,
+        currentStep: previousStep,
+      }
+
+      setFormData(updatedFormState)
+    }
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+      </Head>
+      <Section>
+        <CreateDAOWizard
+          type={type}
+          steps={steps}
+          currentStep={currentStep}
+          formData={formData}
+          handlePreviousButton={handlePreviousButton}
+          handleNextButtonClick={handleNextButtonClick}
+          handleSubmit={handleSubmit}
+          submissionPending={submissionPending}
+        />
+      </Section>
+    </>
+  )
+}
diff --git a/components/NewRealmWizard/components/AdvancedOptionsDropdown.tsx b/components/NewRealmWizard/components/AdvancedOptionsDropdown.tsx
new file mode 100644
index 0000000000..7b7bb97b71
--- /dev/null
+++ b/components/NewRealmWizard/components/AdvancedOptionsDropdown.tsx
@@ -0,0 +1,54 @@
+import { useState } from 'react'
+import { Transition } from '@headlessui/react'
+import Text from '@components/Text'
+
+export default function AdvancedOptionsDropdown({
+  className = 'mt-10 md:mt-16 w-fit',
+  children,
+}) {
+  const [open, setOpen] = useState(false)
+  return (
+    <div className={className}>
+      <button
+        type="button"
+        className={`flex items-center justify-center px-4 py-2 space-x-2 rounded-full h-fit border ${
+          open ? 'bg-bkg-2' : 'text-fgd-2'
+        } border-fgd-4 hover:border-fgd-1 hover:bg-bkg-3 hover:text-fgd-1 focus:border-fgd-2 disabled:cursor-not-allowed`}
+        onClick={() => setOpen(!open)}
+      >
+        <Text level="2" className="font-normal">
+          Advanced Options
+        </Text>
+        <div
+          className={`default-transition ${open ? 'transform rotate-180' : ''}`}
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M7.99992 9.5858L12.2928 5.29291L13.707 6.70712L7.99992 12.4142L2.29282 6.70712L3.70703 5.29291L7.99992 9.5858Z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+      </button>
+      <Transition
+        show={open}
+        enter="transform transition duration-[400ms]"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="transform duration-200 transition ease-in-out"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <div className="pt-10">{children}</div>
+      </Transition>
+    </div>
+  )
+}
diff --git a/components/NewRealmWizard/components/AdviceBox.tsx b/components/NewRealmWizard/components/AdviceBox.tsx
new file mode 100644
index 0000000000..a2f97a1904
--- /dev/null
+++ b/components/NewRealmWizard/components/AdviceBox.tsx
@@ -0,0 +1,15 @@
+import Text from '@components/Text'
+
+export default function AdviceBox({ icon, title, children }) {
+  return (
+    <div className="relative flex flex-col items-center py-5 px-5 mt-4 rounded md:mt-10 md:px-10 md:py-8 md:flex-row bg-cover bg-center bg-no-repeat bg-[url('/img/bg-quorum-all-sizes.png')]">
+      <div className="w-16 h-16">{icon}</div>
+      <div className="flex flex-col w-full text-center md:text-left md:ml-10">
+        <Text level="2" className="my-2 capitalize text-fgd-2 md:mt-0">
+          {title}
+        </Text>
+        {children}
+      </div>
+    </div>
+  )
+}
diff --git a/components/NewRealmWizard/components/FormField.tsx b/components/NewRealmWizard/components/FormField.tsx
new file mode 100644
index 0000000000..db40264e57
--- /dev/null
+++ b/components/NewRealmWizard/components/FormField.tsx
@@ -0,0 +1,73 @@
+import Text from '@components/Text'
+interface Props {
+  advancedOption?: boolean
+  children: React.ReactNode
+  className?: string
+  description: string | React.ReactNode
+  disabled?: boolean
+  optional?: boolean
+  title: string
+  titleExtra?: React.ReactNode
+}
+
+export default function FormField({
+  title,
+  description,
+  optional = false,
+  advancedOption = false,
+  disabled = false,
+  className = '',
+  titleExtra,
+  children,
+}: Props) {
+  const splitTitle = title.split(' ')
+  return (
+    <div className={className}>
+      <div className="flex items-center gap-x-2">
+        <Text
+          level="1"
+          className={disabled ? 'opacity-30 cursor-not-allowed' : ''}
+        >
+          <span>
+            {splitTitle
+              .slice(
+                0,
+                splitTitle.length - (optional || advancedOption ? 1 : 0)
+              )
+              .join(' ')}
+          </span>
+          {(optional || advancedOption) && (
+            <Text level="1" as="span" className="whitespace-nowrap">
+              {` ${splitTitle[splitTitle.length - 1]} `}
+              {optional && (
+                <Text level="2" as="span" className="ml-1 opacity-50">
+                  (optional)
+                </Text>
+              )}
+              {advancedOption && (
+                <Text
+                  level="2"
+                  as="span"
+                  className="px-2 ml-2 rounded bg-night-grey text-white/50"
+                >
+                  Advanced Option
+                </Text>
+              )}
+            </Text>
+          )}
+        </Text>
+        {titleExtra}
+      </div>
+
+      <Text
+        level="2"
+        className={`pt-1 ${
+          disabled ? 'opacity-10 cursor-not-allowed' : 'text-fgd-2'
+        }`}
+      >
+        {description}
+      </Text>
+      <div className="mt-4">{children}</div>
+    </div>
+  )
+}
diff --git a/components/NewRealmWizard/components/FormFooter.tsx b/components/NewRealmWizard/components/FormFooter.tsx
new file mode 100644
index 0000000000..976bddfb7c
--- /dev/null
+++ b/components/NewRealmWizard/components/FormFooter.tsx
@@ -0,0 +1,72 @@
+import Header from '@components/Header'
+import { LoadingDots } from '@components/Loading'
+import React from 'react'
+interface FormFooterProps {
+  isValid?: boolean
+  ctaText?: string
+  loading?: boolean
+  prevClickHandler: React.MouseEventHandler<HTMLButtonElement>
+  submitClickHandler?: React.MouseEventHandler<HTMLButtonElement>
+}
+
+function ArrowRight({ className }) {
+  return (
+    <div className={className}>
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="m12.75 3 9.75 9m0 0-9.75 9.75M22.5 12h-21"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+        />
+      </svg>
+    </div>
+  )
+}
+
+const FormFooter: React.FC<FormFooterProps> = ({
+  isValid,
+  ctaText = '',
+  loading = false,
+  prevClickHandler,
+  submitClickHandler,
+}) => {
+  return (
+    <div className="absolute bottom-[50px] right-0 flex items-center sm:bottom-[80px]">
+      <div className="flex justify-center w-full mt-8 space-x-4 md:justify-between md:w-fit md:mt-0">
+        <button
+          type="button"
+          className="border rounded-full default-transition border-fgd-4 hover:border-fgd-2 active:border-transparent active:bg-fgd-4 disabled:bg-fgd-4 disabled:hover:border-fgd-4 hover:bg-fgd-4 disabled:active:border-none disabled:text-fgd-3 focus:border-fgd-1 focus:bg-fgd-4 disabled:cursor-not-allowed"
+          disabled={loading}
+          onClick={prevClickHandler}
+        >
+          <ArrowRight className="m-4 rotate-180" />
+        </button>
+        <button
+          type="submit"
+          className="relative rounded-full text-bkg-1 border-gradient active:border-fgd-3 hover:text-bkg-1 default-transition bg-brand-gradient transition-from-gradient-background disabled:cursor-not-allowed"
+          disabled={!isValid || loading}
+          onClick={submitClickHandler}
+        >
+          {loading ? (
+            <LoadingDots className="px-8" />
+          ) : ctaText ? (
+            <Header as="cta" className="relative z-20 px-8">
+              {ctaText}
+            </Header>
+          ) : (
+            <ArrowRight className="relative z-20 m-4" />
+          )}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default FormFooter
diff --git a/components/NewRealmWizard/components/FormHeader.tsx b/components/NewRealmWizard/components/FormHeader.tsx
new file mode 100644
index 0000000000..004dacc4fa
--- /dev/null
+++ b/components/NewRealmWizard/components/FormHeader.tsx
@@ -0,0 +1,50 @@
+import Header from '@components/Header'
+import Text from '@components/Text'
+
+import { FORM_NAME as COMMUNITY_TOKEN_FORM } from 'pages/realms/new/community-token'
+import { FORM_NAME as MULTISIG_FORM } from 'pages/realms/new/multisig'
+import { FORM_NAME as NFT_FORM } from 'pages/realms/new/nft'
+
+function StepProgressIndicator({ formType, currentStep, totalSteps }) {
+  let stepTitle = ''
+
+  if (formType == COMMUNITY_TOKEN_FORM) {
+    stepTitle = 'Community Token DAO: '
+  } else if (formType == MULTISIG_FORM) {
+    stepTitle = 'Multi-Signature Wallet: '
+  } else if (formType == NFT_FORM) {
+    stepTitle = 'NFT Community DAO: '
+  }
+
+  return (
+    <div className="flex flex-col -mt-8">
+      <div className="flex">
+        <Text level="2">
+          <span className="bg-gradient-to-r from-[#00C2FF] via-[#00E4FF] to-[#87F2FF] bg-clip-text text-transparent mr-1">
+            {stepTitle}
+          </span>
+          {currentStep === totalSteps
+            ? 'Summary'
+            : `Step ${currentStep + 1} of ${totalSteps}`}
+        </Text>
+      </div>
+    </div>
+  )
+}
+
+export default function FormHeader({ type, currentStep, totalSteps, title }) {
+  return (
+    <div>
+      <StepProgressIndicator
+        formType={type}
+        currentStep={currentStep}
+        totalSteps={totalSteps}
+      />
+      <div className="flex items-center w-full mt-6 md:mt-10">
+        <Header as="h2" className="md:max-w-[550px]">
+          {title}
+        </Header>
+      </div>
+    </div>
+  )
+}
diff --git a/components/NewRealmWizard/components/FormSummary.tsx b/components/NewRealmWizard/components/FormSummary.tsx
new file mode 100644
index 0000000000..e99d980d78
--- /dev/null
+++ b/components/NewRealmWizard/components/FormSummary.tsx
@@ -0,0 +1,301 @@
+import FormHeader from '@components/NewRealmWizard/components/FormHeader'
+import FormFooter from '@components/NewRealmWizard/components/FormFooter'
+
+import Header from '@components/Header'
+import Text from '@components/Text'
+
+import { FORM_NAME as MULTISIG_FORM } from 'pages/realms/new/multisig'
+import { FORM_NAME as COMMUNITY_TOKEN_FORM } from 'pages/realms/new/community-token'
+import { GenericTokenIcon } from './TokenInfoTable'
+
+const TO_BE_GENERATED = '(To be generated)'
+
+function SummaryModule({
+  className = '',
+  title,
+  advancedOption = false,
+  rightSide = <></>,
+  children,
+}) {
+  return (
+    <div
+      className={`bg-bkg-2 rounded-md pl-6 pr-8 py-6 grow ${className} flex flex-wrap justify-between items-center`}
+    >
+      <div className="flex flex-col">
+        <Text level="2" className="flex mb-2 text-fgd-2">
+          {title}
+          {advancedOption && (
+            <Text
+              level="3"
+              className="flex items-center px-2 ml-2 rounded bg-bkg-3 text-fgd-2"
+            >
+              Advanced Option
+            </Text>
+          )}
+        </Text>
+        {children}
+      </div>
+      <div className="mt-2 md:mt-0">{rightSide ? rightSide : <></>}</div>
+    </div>
+  )
+}
+
+function TokenInfoSummary({ title, name, symbol, logoURI }) {
+  return (
+    <SummaryModule
+      title={title}
+      rightSide={
+        symbol && (
+          <Text
+            level="2"
+            className="flex items-center px-6 py-1 rounded bg-bkg-3"
+          >
+            #{symbol}
+          </Text>
+        )
+      }
+    >
+      <div className="flex items-center">
+        {logoURI ? (
+          <img src={logoURI} className="w-8" />
+        ) : (
+          <div className="w-8 text-fgd-2">
+            <GenericTokenIcon />
+          </div>
+        )}
+        <Text level="0" className="ml-2 input-base">
+          {name || '(Unnamed)'}
+        </Text>
+      </div>
+    </SummaryModule>
+  )
+}
+
+function CommunityInfo({
+  tokenInfo,
+  mintAddress,
+  transferMintAuthority,
+  mintSupplyFactor,
+  yesVotePercentage,
+  minimumNumberOfTokensToGovern,
+  nftInfo,
+}) {
+  const nftIsCommunityToken = !!nftInfo?.name
+  const updatedTokenInfo = {
+    ...tokenInfo,
+    name: tokenInfo?.name || mintAddress || TO_BE_GENERATED,
+  }
+
+  return (
+    <>
+      <div>
+        <Text level="1" className="mt-6">
+          Community info
+        </Text>
+      </div>
+      {nftIsCommunityToken ? (
+        <SummaryModule
+          title="Selected NFT collection"
+          rightSide={
+            <Text
+              level="2"
+              className="flex items-center px-6 py-1 rounded bg-bkg-3"
+            >
+              {nftInfo?.nftCollectionCount?.toLocaleString()}
+              {nftInfo?.nftCollectionCount !== 1 ? ' NFTs' : ' NFT'}
+            </Text>
+          }
+        >
+          <div className="flex items-center">
+            <img
+              src={nftInfo.image || '/icons/threshold-icon.svg'}
+              className="w-8"
+            />
+            <Text level="0" className="ml-3 input-base">
+              {nftInfo?.name || '(Collection has no name)'}
+            </Text>
+          </div>
+        </SummaryModule>
+      ) : (
+        <TokenInfoSummary title="Community token" {...updatedTokenInfo} />
+      )}
+      <div
+        className={`grid grid-cols-1 gap-2 ${
+          !nftIsCommunityToken ? 'sm:grid-cols-2' : ''
+        }`}
+      >
+        <SummaryModule title="Approval threshold">
+          <Text level="0" className="input-base">
+            {yesVotePercentage}%
+          </Text>
+        </SummaryModule>
+        {updatedTokenInfo.name !== TO_BE_GENERATED && !nftIsCommunityToken && (
+          <SummaryModule title="Transfer mint authority?">
+            <Text level="0" className="input-base">
+              {transferMintAuthority === true ? 'Yes' : 'No'}
+            </Text>
+          </SummaryModule>
+        )}
+        {minimumNumberOfTokensToGovern && (
+          <SummaryModule title="Min. number of tokens needed to manage DAO">
+            <Text level="0" className="input-base">
+              {minimumNumberOfTokensToGovern.toLocaleString()}
+            </Text>
+          </SummaryModule>
+        )}
+        {mintSupplyFactor && (
+          <SummaryModule title="Circulation supply factor">
+            <Text level="0" className="input-base">
+              {mintSupplyFactor}
+            </Text>
+          </SummaryModule>
+        )}
+      </div>
+    </>
+  )
+}
+
+function CouncilInfo({
+  tokenInfo,
+  mintAddress,
+  transferMintAuthority,
+  // yesVotePercentage,
+  numberOfMembers,
+}) {
+  const updatedTokenInfo = {
+    ...tokenInfo,
+    name: tokenInfo?.name || mintAddress || TO_BE_GENERATED,
+  }
+
+  return (
+    <>
+      <div>
+        <Text level="1" className="mt-6">
+          Council info
+        </Text>
+      </div>
+      <TokenInfoSummary title="Council token" {...updatedTokenInfo} />
+      <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+        <SummaryModule title="Council members">
+          <Text level="0" className="input-base">
+            {numberOfMembers}
+          </Text>
+        </SummaryModule>
+        {/* <SummaryModule title="Approval threshold">
+          <Text level="0" className="input-base">
+            {yesVotePercentage}%
+          </Text>
+        </SummaryModule> */}
+        {updatedTokenInfo.name !== TO_BE_GENERATED && (
+          <SummaryModule title="Transfer mint authority?">
+            <Text level="0" className="input-base">
+              {transferMintAuthority === true ? 'Yes' : 'No'}
+            </Text>
+          </SummaryModule>
+        )}
+      </div>
+    </>
+  )
+}
+
+export default function WizardSummary({
+  type,
+  currentStep,
+  formData,
+  onSubmit,
+  submissionPending = false,
+  onPrevClick,
+}) {
+  const nftCollectionMetadata =
+    (formData?.collectionKey && formData?.collectionMetadata) || {}
+  const nftCollectionCount = formData?.numberOfNFTs || 0
+  const nftCollectionInfo = {
+    ...nftCollectionMetadata,
+    nftCollectionCount,
+  }
+
+  const programId = formData?.programId || ''
+
+  return (
+    <div data-testid="wizard-summary">
+      <FormHeader
+        type={type}
+        currentStep={currentStep}
+        totalSteps={currentStep}
+        title={`Nearly done, let's check that things look right.`}
+      />
+      <div className="mt-10 space-y-2">
+        <SummaryModule
+          title={type === MULTISIG_FORM ? 'Wallet name' : 'DAO name'}
+        >
+          <Header as="h3">{formData?.name}</Header>
+        </SummaryModule>
+        {type === MULTISIG_FORM ? (
+          <div className="grid grid-cols-2 gap-2">
+            <SummaryModule title="Invited members">
+              <Header as="h3">{formData?.memberAddresses?.length}</Header>
+            </SummaryModule>
+            <SummaryModule title="Approval threshold">
+              <Header as="h3" className="flex items-end">
+                {formData?.councilYesVotePercentage}
+
+                <div className="mb-0 heading-sm">%</div>
+              </Header>
+            </SummaryModule>
+          </div>
+        ) : (
+          <>
+            <CommunityInfo
+              mintAddress={formData.communityTokenMintAddress}
+              tokenInfo={formData.communityTokenInfo}
+              transferMintAuthority={formData.transferCommunityMintAuthority}
+              mintSupplyFactor={formData.communityMintSupplyFactor}
+              yesVotePercentage={formData.communityYesVotePercentage}
+              minimumNumberOfTokensToGovern={
+                formData.minimumNumberOfCommunityTokensToGovern
+              }
+              nftInfo={nftCollectionInfo}
+            />
+            {(formData.addCouncil || formData?.memberAddresses?.length > 0) && (
+              <CouncilInfo
+                tokenInfo={formData.councilTokenInfo}
+                mintAddress={formData.councilTokenMintAddress}
+                transferMintAuthority={
+                  formData.transferCouncilMintAuthority ||
+                  !formData.useExistingCouncilToken
+                }
+                // yesVotePercentage={
+                //   formData?.councilYesVotePercentage ||
+                //   formData.communityYesVotePercentage
+                // }
+                numberOfMembers={formData?.memberAddresses?.length}
+              />
+            )}
+          </>
+        )}
+        {programId && (
+          <SummaryModule title="Program ID" advancedOption>
+            <div className="grid">
+              <div className="truncate input-base">{programId}</div>
+            </div>
+          </SummaryModule>
+        )}
+      </div>
+      <FormFooter
+        isValid
+        loading={submissionPending}
+        ctaText={
+          type === MULTISIG_FORM
+            ? 'Create wallet'
+            : `Create ${
+                type === COMMUNITY_TOKEN_FORM
+                  ? 'Community Token'
+                  : 'NFT Community'
+              } DAO`
+        }
+        prevClickHandler={() => onPrevClick(currentStep)}
+        submitClickHandler={() => onSubmit(formData)}
+      />
+    </div>
+  )
+}
diff --git a/components/NewRealmWizard/components/GradientCheckmarkCircle.tsx b/components/NewRealmWizard/components/GradientCheckmarkCircle.tsx
new file mode 100644
index 0000000000..3ace75a0f6
--- /dev/null
+++ b/components/NewRealmWizard/components/GradientCheckmarkCircle.tsx
@@ -0,0 +1,23 @@
+export default function ({ selected = false }) {
+  return (
+    <div
+      className={`h-[32px] w-[32px] rounded-full flex items-center justify-center text-fgd-1 ${
+        selected
+          ? 'bg-gradient-to-r from-[#00C2FF] via-[#00E4FF] to-[#87F2FF]'
+          : 'border border-fgd-4'
+      } group-hover:border-fgd-3 hover:border-fgd-3  group-disabled:text-fgd-4 group-disabled:group-hover:border-fgd-4 group-disabled:hover:border-fgd-4`}
+    >
+      {selected && (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M15 3 6 13 1 7" stroke="currentColor" strokeWidth="2" />
+        </svg>
+      )}
+    </div>
+  )
+}
diff --git a/components/NewRealmWizard/components/Input.tsx b/components/NewRealmWizard/components/Input.tsx
new file mode 100644
index 0000000000..f5d34de250
--- /dev/null
+++ b/components/NewRealmWizard/components/Input.tsx
@@ -0,0 +1,293 @@
+import React from 'react'
+import { RadioGroup as HRG } from '@headlessui/react'
+import { preventNegativeNumberInput } from '@utils/helpers'
+
+import { RadioButton } from '@components/Button'
+import Text from '@components/Text'
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  invalid?: string
+  error?: string
+  success?: string
+  Icon?: any
+  suffix?: any
+  className?: string
+  warning?: string
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      error = '',
+      success = '',
+      value,
+      Icon,
+      suffix,
+      className = '',
+      autoComplete = 'off',
+      warning = '',
+      ...props
+    },
+    ref
+  ) => {
+    const hasContent = typeof value !== 'undefined' && value !== ''
+    let classNames = `input-base form-control block w-full ${
+      Icon ? 'pl-8' : 'pl-2'
+    } ${
+      suffix ? 'pr-8' : 'pr-2'
+    } pt-[15px] pb-[21px] default-transition rounded-t rounded-b-none outline-none border-b border-b-bkg-4 bg-bkg-2`
+
+    if (hasContent) {
+      classNames += ` cursor-text`
+    } else {
+      classNames += ` cursor-pointer`
+    }
+
+    classNames += `
+      placeholder:text-bkg-4
+      active:bg-bkg-3
+      focus:bg-bkg-3
+      hover:bg-bkg-3
+      hover:border-fgd-2
+
+      focus:outline-none
+      focus:border-primary-light
+
+      active:border-primary-light
+
+      disabled:cursor-not-allowed
+      disabled:opacity-30
+      disabled:hover:bg-bkg-2
+      disabled:hover:border-b-bkg-4
+      `
+
+    if (error) {
+      classNames += ` border-b-error-red/50 focus:border-b-error-red active:border-b-error-red`
+    } else if (success) {
+      classNames += ` border-b-green focus:border-b-green active:border-b-green`
+    }
+
+    classNames += ` ${className}`
+    return (
+      <div className="relative">
+        <div
+          className={`absolute top-[21px] left-2 max-w-[16px]  ${
+            props.disabled ? 'opacity-30' : 'text-fgd-4'
+          }`}
+        >
+          {Icon ? Icon : ''}
+        </div>
+
+        <div
+          className={`absolute top-[21px] right-2 max-w-[16px]  ${
+            props.disabled ? 'opacity-30' : 'text-fgd-4'
+          }`}
+        >
+          {suffix ? suffix : ''}
+        </div>
+
+        <input
+          type="text"
+          className={classNames}
+          ref={ref}
+          value={value}
+          autoComplete={autoComplete}
+          {...props}
+        />
+        <FieldMessage
+          error={error}
+          warning={warning}
+          success={success}
+          className="min-h-[2.5rem]"
+        />
+      </div>
+    )
+  }
+)
+
+export default Input
+
+export function FieldMessage({
+  error = '',
+  warning = '',
+  success = '',
+  className = '',
+}) {
+  return (
+    <div
+      className={`${
+        error || warning || success ? 'visibile' : 'invisible'
+      } pt-2 flex items-start ${
+        error
+          ? 'text-error-red'
+          : warning
+          ? 'text-orange'
+          : success
+          ? 'text-green'
+          : ''
+      } ${className}`}
+    >
+      <Text level="2" className="flex items-start">
+        <span className="mr-1 align-text-bottom">
+          {error ? (
+            <svg
+              className="inline align-text-top"
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle cx="8" cy="8" r="5.5" stroke="currentColor" />
+              <path d="M4 4L12 12" stroke="currentColor" />
+            </svg>
+          ) : warning ? (
+            <svg
+              className="inline align-text-top"
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle cx="8" cy="8" r="7.5" stroke="currentColor" />
+              <path
+                d="M8.313 9.643L8.43 3H7.247L7.364 9.643H8.313ZM7.767 12.165C8.209 12.165 8.547 11.814 8.547 11.385C8.547 10.956 8.209 10.618 7.767 10.618C7.351 10.618 7 10.956 7 11.385C7 11.814 7.351 12.165 7.767 12.165Z"
+                fill="currentColor"
+              />
+            </svg>
+          ) : success ? (
+            <svg
+              className="inline align-text-top"
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M14 4L6 13L2 8" stroke="currentColor" strokeWidth="2" />
+            </svg>
+          ) : (
+            <></>
+          )}
+        </span>
+        <span>{error || warning || success}</span>
+      </Text>
+    </div>
+  )
+}
+
+interface RadioGroupOption {
+  label: string
+  value: string | boolean | number
+}
+interface RadioGroupProps {
+  options: RadioGroupOption[]
+  onChange: any
+  onBlur: any
+  value: any
+  disabled?: boolean
+  disabledValues?: any[]
+  error?: string
+  warning?: string
+  success?: string
+}
+
+export const RadioGroup = ({
+  options,
+  onChange,
+  onBlur,
+  value,
+  disabled,
+  disabledValues = [],
+  error,
+  warning,
+  success,
+}: RadioGroupProps) => {
+  return (
+    <>
+      <HRG
+        onChange={onChange}
+        value={value}
+        onBlur={onBlur}
+        disabled={disabled}
+      >
+        <div className={`grid md:grid-cols-${options.length} gap-6`}>
+          {options.map(({ label, value }) => {
+            return (
+              <HRG.Option
+                value={value}
+                key={label}
+                disabled={disabled || disabledValues.indexOf(value) > -1}
+              >
+                {({ checked }) => (
+                  <RadioButton
+                    selected={checked}
+                    disabled={disabled || disabledValues.indexOf(value) > -1}
+                    className="w-full"
+                  >
+                    {label}
+                  </RadioButton>
+                )}
+              </HRG.Option>
+            )
+          })}
+        </div>
+      </HRG>
+      <FieldMessage error={error} warning={warning} success={success} />
+    </>
+  )
+}
+
+export function InputRangeSlider({
+  field,
+  error = '',
+  placeholder = '50',
+  disabled = false,
+}) {
+  return (
+    <div className="flex flex-col-reverse sm:flex-row sm:items-baseline sm:space-x-2">
+      <div className="w-full sm:w-24">
+        <Input
+          type="tel"
+          placeholder={placeholder}
+          suffix={
+            <Text level="1" className="">
+              %
+            </Text>
+          }
+          disabled={disabled}
+          data-testid="dao-approval-threshold-input"
+          error={error}
+          className="text-center"
+          {...field}
+          onChange={(ev) => {
+            preventNegativeNumberInput(ev)
+            field.onChange(ev)
+          }}
+        />
+      </div>{' '}
+      <div
+        className={`relative flex items-center w-full my-6 space-x-4 md:my-0 bg-bkg-2 h-[64px] rounded px-6 grow ${
+          disabled ? 'opacity-50' : ''
+        }`}
+      >
+        <Text level="2" className="opacity-60">
+          0%
+        </Text>
+        <input
+          type="range"
+          min={1}
+          className="w-full with-gradient focus:outline-none focus:ring-0 focus:shadow-none disabled:cursor-not-allowed"
+          {...field}
+          style={{
+            backgroundSize: `${field.value || 50}% 100%`,
+          }}
+          disabled={disabled}
+        />
+        <Text level="2" className="opacity-60">
+          100%
+        </Text>
+      </div>
+    </div>
+  )
+}
diff --git a/components/NewRealmWizard/components/NFTCollectionModal.tsx b/components/NewRealmWizard/components/NFTCollectionModal.tsx
new file mode 100644
index 0000000000..4b064b7f04
--- /dev/null
+++ b/components/NewRealmWizard/components/NFTCollectionModal.tsx
@@ -0,0 +1,57 @@
+import { useState } from 'react'
+import { abbreviateAddress } from '@utils/formatting'
+
+import Header from '@components/Header'
+import Button from '@components/Button'
+import NFTCollectionSelector from '@components/NewRealmWizard/components/NFTCollectionSelector'
+import { WalletIcon } from './steps/AddNFTCollectionForm'
+import Modal from '@components/Modal'
+
+export default function NFTCollectionModal({
+  show,
+  walletPk,
+  collections,
+  onClose,
+  onSelect,
+}) {
+  const [selected, setSelected] = useState('')
+
+  function close() {
+    onClose()
+    setSelected('')
+  }
+
+  function handleChoose() {
+    onSelect({ key: selected, collection: collections[selected] })
+    close()
+  }
+
+  return (
+    show && (
+      <Modal isOpen={show} onClose={onClose} sizeClassName="sm:max-w-2xl">
+        <div className="flex flex-col items-center py-4 mb-2 space-x-4 text-center">
+          <Header as="h4" className="text-fgd-1">
+            Choose a collection from your wallet
+          </Header>
+          <Header
+            as="cta"
+            className="flex items-center justify-center mt-1 space-x-1 text-fgd-2"
+          >
+            <WalletIcon />
+            <div>{walletPk && abbreviateAddress(walletPk)}</div>
+          </Header>
+        </div>
+        <NFTCollectionSelector
+          collections={collections}
+          onChange={setSelected}
+          value={selected}
+        />
+        <div className="float-right mt-2">
+          <Button onClick={handleChoose} disabled={!selected}>
+            Choose
+          </Button>
+        </div>
+      </Modal>
+    )
+  )
+}
diff --git a/components/NewRealmWizard/components/NFTCollectionSelector.tsx b/components/NewRealmWizard/components/NFTCollectionSelector.tsx
new file mode 100644
index 0000000000..097becaaa9
--- /dev/null
+++ b/components/NewRealmWizard/components/NFTCollectionSelector.tsx
@@ -0,0 +1,97 @@
+import { useState } from 'react'
+import { RadioGroup } from '@headlessui/react'
+import Header from '@components/Header'
+import Text from '@components/Text'
+import GradientCheckmarkCircle from './GradientCheckmarkCircle'
+import { LoadingDots } from '@components/Loading'
+
+function ImageWithLoader({ className, ...props }) {
+  const [loading, setLoading] = useState(true)
+  const loadingClassName = `${loading ? '' : 'hidden'} ${className}`
+  const imageClassName = `${loading ? 'hidden' : ''} ${className}`
+  return (
+    <>
+      <div className={loadingClassName}>
+        <LoadingDots />
+      </div>
+      <img
+        {...props}
+        className={imageClassName}
+        onLoad={() => setLoading(false)}
+      />
+    </>
+  )
+}
+
+const NFTCollectionSelector = ({ collections = {}, onChange, value }) => {
+  const optionClass =
+    'z-0 group flex flex-wrap md:items-center md:space-x-8 flex-wrap py-4 px-2 md:px-8 relative w-full default-transition rounded-md hover:cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 hover:opacity-100 hover:bg-bkg-3'
+
+  if (Object.keys(collections).length === 0) {
+    return (
+      <Header as="h3">
+        Your wallet does not contain any verified NFT collections to choose from
+      </Header>
+    )
+  }
+
+  return (
+    <RadioGroup onChange={onChange} value={value}>
+      <div className={`w-full space-y-3`}>
+        {Object.keys(collections).map((key) => {
+          const collection = collections[key]
+          const totalNfts = collection.nfts.length
+          const images = collection.nfts.slice(0, 2).map((nft) => nft.image)
+
+          for (let i = images.length; i < 3; i++) {
+            images.unshift('')
+          }
+
+          return (
+            <RadioGroup.Option value={key} key={key}>
+              {({ active, checked }) => (
+                <div
+                  className={`${optionClass} ${
+                    active || checked ? 'bg-bkg-1' : ' bg-bkg-3'
+                  }`}
+                >
+                  <div className="">
+                    <ImageWithLoader
+                      src={collection?.image}
+                      className="flex justify-center w-16 h-16 border rounded-full border-fgd-4 md:w-20 md:h-20"
+                      alt="Collection icon"
+                    />
+                  </div>
+                  <div className="flex flex-col mx-4 grow w-min md:mx-0">
+                    <Text>{collection?.name}</Text>
+                    <Text level="2" className="text-fgd-2">
+                      {totalNfts} {`NFT${totalNfts === 1 ? '' : 's'}`}
+                    </Text>
+                  </div>
+                  <div className="grid order-last grid-cols-3 gap-2 mx-auto mt-2 md:gap-3 md:mt-0 md:mx-0 md:order-none">
+                    {images.map((src, index) => {
+                      return (
+                        <div key={index}>
+                          {src && (
+                            <ImageWithLoader
+                              src={src}
+                              alt={`NFT ${index + 1}`}
+                              className="flex justify-center w-12 h-12 rounded-md md:h-16 md:w-16 bg-bkg-2"
+                            />
+                          )}
+                        </div>
+                      )
+                    })}
+                  </div>
+                  <GradientCheckmarkCircle selected={checked} />
+                </div>
+              )}
+            </RadioGroup.Option>
+          )
+        })}
+      </div>
+    </RadioGroup>
+  )
+}
+
+export default NFTCollectionSelector
diff --git a/components/NewRealmWizard/components/TokenInfoTable.tsx b/components/NewRealmWizard/components/TokenInfoTable.tsx
new file mode 100644
index 0000000000..329f2f288e
--- /dev/null
+++ b/components/NewRealmWizard/components/TokenInfoTable.tsx
@@ -0,0 +1,101 @@
+import Text from '@components/Text'
+
+export function GenericTokenIcon() {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31ZM16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26ZM16 27C22.0751 27 27 22.0751 27 16C27 9.92487 22.0751 5 16 5C9.92487 5 5 9.92487 5 16C5 22.0751 9.92487 27 16 27Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 21C18.7614 21 21 18.7614 21 16C21 13.2386 18.7614 11 16 11C13.2386 11 11 13.2386 11 16C11 18.7614 13.2386 21 16 21ZM16 22C19.3137 22 22 19.3137 22 16C22 12.6863 19.3137 10 16 10C12.6863 10 10 12.6863 10 16C10 19.3137 12.6863 22 16 22Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+export function TokenInfoCell({ title = '', children }) {
+  return (
+    <div className="flex flex-col h-full px-5 pt-2 pb-3 space-y-1 rounded-md md:space-y-2 md:pt-5 md:pb-5 md:px-6 bg-bkg-2">
+      <Text level="2" className="text-fgd-2">
+        {title}
+      </Text>
+      <div className="flex items-center grow">{children}</div>
+    </div>
+  )
+}
+
+export default function TokenInfoTable({ tokenInfo, loading }) {
+  return (
+    <div
+      className={`grid grid-cols-1 md:grid-cols-2 gap-2 pt-2 ${
+        loading ? 'animate-pulse' : ''
+      }`}
+    >
+      <TokenInfoCell title="Token Name">
+        <div className="flex items-center space-x-2">
+          {tokenInfo?.logoURI ? (
+            <div className="w-10">
+              <img src={tokenInfo?.logoURI} alt="token" className="w-full" />
+            </div>
+          ) : (
+            <div className="w-10 mr-4 text-white/50">
+              <GenericTokenIcon />
+            </div>
+          )}
+          {tokenInfo ? (
+            <Text level="0" className="input-base">
+              {tokenInfo.name || '(No name)'}
+            </Text>
+          ) : (
+            <Text className="ml-2 text-white/30">
+              <div
+                className="text-[22px] font-medium"
+                dangerouslySetInnerHTML={{
+                  __html: `&#8212;`,
+                }}
+              ></div>
+            </Text>
+          )}
+        </div>
+      </TokenInfoCell>
+      <TokenInfoCell title="Token Symbol">
+        <Text className="flex items-center">
+          {tokenInfo ? (
+            <Text
+              level="0"
+              className="flex items-baseline space-x-2 input-base"
+            >
+              <div className="text-white/30">#</div>
+              <div>{tokenInfo.symbol || '(No symbol)'}</div>
+            </Text>
+          ) : (
+            <div
+              className="text-[22px] font-normal text-white/30"
+              dangerouslySetInnerHTML={{
+                __html: `&#8212;`,
+              }}
+            ></div>
+          )}
+        </Text>
+      </TokenInfoCell>
+    </div>
+  )
+}
diff --git a/components/NewRealmWizard/components/TokenInput.tsx b/components/NewRealmWizard/components/TokenInput.tsx
new file mode 100644
index 0000000000..44ec62c8dc
--- /dev/null
+++ b/components/NewRealmWizard/components/TokenInput.tsx
@@ -0,0 +1,255 @@
+import { useEffect, useState } from 'react'
+import { TokenListProvider, TokenInfo } from '@solana/spl-token-registry'
+import { MintInfo, u64 } from '@solana/spl-token'
+import { PublicKey } from '@solana/web3.js'
+
+import { getMintSupplyAsDecimal } from '@tools/sdk/units'
+import useWalletStore from 'stores/useWalletStore'
+import { tryGetMint } from '@utils/tokens'
+import { validateSolAddress } from '@utils/formValidation'
+import { preventNegativeNumberInput } from '@utils/helpers'
+
+import { Controller } from 'react-hook-form'
+
+import FormField from '@components/NewRealmWizard/components/FormField'
+import Input, { RadioGroup } from '@components/NewRealmWizard/components/Input'
+import TokenInfoTable, {
+  GenericTokenIcon,
+} from '@components/NewRealmWizard/components/TokenInfoTable'
+
+interface MintInfoWithDecimalSupply extends MintInfo {
+  supplyAsDecimal: number
+}
+export interface TokenWithMintInfo extends TokenInfo {
+  mint: MintInfoWithDecimalSupply | undefined
+}
+
+const PENDING_COIN: TokenWithMintInfo = {
+  chainId: 0,
+  address: '',
+  symbol: 'finding symbol...',
+  name: 'finding name...',
+  decimals: 9,
+  logoURI: '',
+  tags: [''],
+  extensions: {},
+  mint: {
+    mintAuthority: null,
+    supply: new u64(0),
+    freezeAuthority: null,
+    decimals: 3,
+    isInitialized: false,
+    supplyAsDecimal: 0,
+  },
+}
+
+const NOTFOUND_COIN: TokenWithMintInfo = {
+  ...PENDING_COIN,
+  name: '',
+  symbol: '',
+}
+
+export const COMMUNITY_TOKEN = 'community token'
+export const COUNCIL_TOKEN = 'council token'
+
+export default function TokenInput({
+  type,
+  control,
+  onValidation,
+  disableMinTokenInput = false,
+}) {
+  const { connected, connection, current: wallet } = useWalletStore((s) => s)
+  const [tokenList, setTokenList] = useState<TokenInfo[] | undefined>()
+  const [tokenMintAddress, setTokenMintAddress] = useState('')
+  const [tokenInfo, setTokenInfo] = useState<TokenWithMintInfo | undefined>()
+  const validMintAddress = tokenInfo && tokenInfo !== PENDING_COIN
+  const walletIsMintAuthority =
+    wallet?.publicKey &&
+    tokenInfo?.mint?.mintAuthority &&
+    wallet.publicKey.toBase58() === tokenInfo.mint.mintAuthority.toBase58()
+  const invalidAddress =
+    !validMintAddress && !/finding/.test(tokenInfo?.name ? tokenInfo.name : '')
+
+  useEffect(() => {
+    if (!connected) {
+      wallet?.connect()
+    }
+  }, [wallet])
+
+  useEffect(() => {
+    async function getTokenList() {
+      const tokenList = await new TokenListProvider().resolve()
+      const filteredTokenList = tokenList
+        .filterByClusterSlug(
+          connection.cluster === 'mainnet' ? 'mainnet-beta' : connection.cluster
+        )
+        .getList()
+      setTokenList(filteredTokenList)
+    }
+
+    getTokenList()
+  }, [connection.cluster])
+
+  useEffect(() => {
+    async function getTokenInfo(tokenMintAddress) {
+      setTokenInfo(PENDING_COIN)
+      const mintInfo = await tryGetMint(
+        connection.current,
+        new PublicKey(tokenMintAddress)
+      )
+      if (mintInfo) {
+        const tokenInfo =
+          tokenList?.find((token) => token.address === tokenMintAddress) ||
+          NOTFOUND_COIN
+
+        setTokenInfo({
+          ...tokenInfo,
+          mint: {
+            ...mintInfo.account,
+            supplyAsDecimal: getMintSupplyAsDecimal(mintInfo.account),
+          },
+        })
+      } else {
+        setTokenInfo(undefined)
+      }
+    }
+
+    if (tokenMintAddress && validateSolAddress(tokenMintAddress)) {
+      getTokenInfo(tokenMintAddress)
+    } else {
+      setTokenInfo(undefined)
+    }
+  }, [tokenList, tokenMintAddress])
+
+  useEffect(() => {
+    let suggestedMinTokenAmount = 0
+    if (typeof tokenInfo?.mint?.supplyAsDecimal === 'number') {
+      suggestedMinTokenAmount = Math.ceil(tokenInfo.mint.supplyAsDecimal * 0.01)
+    }
+
+    onValidation({
+      // validMintAddress: tokenMintAddress !== '' ? validMintAddress : true,
+      validMintAddress,
+      tokenInfo,
+      suggestedMinTokenAmount,
+      walletIsMintAuthority,
+    })
+  }, [validMintAddress, walletIsMintAuthority, tokenInfo])
+
+  return (
+    <>
+      <Controller
+        name={
+          type === COMMUNITY_TOKEN
+            ? 'communityTokenMintAddress'
+            : 'councilTokenMintAddress'
+        }
+        control={control}
+        defaultValue=""
+        render={({ field, fieldState: { error } }) => (
+          <FormField
+            title="What is the address of the community token you would like to use?"
+            description="If your token is listed with Solana, you'll see a preview below."
+            className="mt-10 md:mt-16"
+          >
+            <Input
+              placeholder="e.g. CwvWQWt5m..."
+              data-testid="token-address-input"
+              error={
+                error?.message ||
+                (invalidAddress ? 'Not a valid token address' : '')
+              }
+              success={validMintAddress ? 'Token found' : undefined}
+              {...field}
+              onChange={(ev) => {
+                field.onChange(ev)
+                setTokenMintAddress(ev.target.value)
+              }}
+            />
+            {tokenInfo?.name && tokenInfo.name !== PENDING_COIN.name && (
+              <TokenInfoTable
+                tokenInfo={tokenInfo}
+                loading={tokenInfo === PENDING_COIN}
+              />
+            )}
+          </FormField>
+        )}
+      />
+      {validMintAddress && (
+        <>
+          <Controller
+            name={
+              type === COMMUNITY_TOKEN
+                ? 'transferCommunityMintAuthority'
+                : 'transferCouncilMintAuthority'
+            }
+            control={control}
+            defaultValue={undefined}
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            render={({ field: { ref, ...field } }) => (
+              <FormField
+                title="Do you want to transfer mint authority of the token to the DAO?"
+                description=""
+              >
+                <RadioGroup
+                  {...field}
+                  options={[
+                    { label: 'Yes', value: true },
+                    { label: 'No', value: false },
+                  ]}
+                  disabled={!connected}
+                  disabledValues={!walletIsMintAuthority ? [true] : []}
+                  error={
+                    !connected
+                      ? 'You must connect your wallet to move forward.'
+                      : ''
+                  }
+                  warning={
+                    field.value === true
+                      ? 'Caution: this will give the DAO exclusive authority to mint more tokens.'
+                      : connected && !walletIsMintAuthority
+                      ? 'Caution: to select "Yes", connect the wallet which owns this token.'
+                      : ''
+                  }
+                />
+              </FormField>
+            )}
+          />
+
+          {!!tokenInfo?.mint?.supplyAsDecimal && !disableMinTokenInput && (
+            <Controller
+              name={
+                type === COMMUNITY_TOKEN
+                  ? 'minimumNumberOfCommunityTokensToGovern'
+                  : 'minimumNumberOfCouncilTokensToGovern'
+              }
+              control={control}
+              defaultValue={''}
+              render={({ field, fieldState: { error } }) => (
+                <FormField
+                  title="What is the minimum number of community tokens needed to manage this DAO?"
+                  description="A user will need at least this many community token to edit the DAO."
+                  disabled={!validMintAddress}
+                >
+                  <Input
+                    type="tel"
+                    placeholder="e.g. 1,000,000"
+                    data-testid="dao-name-input"
+                    Icon={<GenericTokenIcon />}
+                    error={error?.message || ''}
+                    {...field}
+                    disabled={!validMintAddress}
+                    onChange={(ev) => {
+                      preventNegativeNumberInput(ev)
+                      field.onChange(ev)
+                    }}
+                  />
+                </FormField>
+              )}
+            />
+          )}
+        </>
+      )}
+    </>
+  )
+}
diff --git a/components/NewRealmWizard/components/steps/AddCouncilForm.tsx b/components/NewRealmWizard/components/steps/AddCouncilForm.tsx
new file mode 100644
index 0000000000..2b47acc878
--- /dev/null
+++ b/components/NewRealmWizard/components/steps/AddCouncilForm.tsx
@@ -0,0 +1,221 @@
+import { useState, useEffect } from 'react'
+import { useForm, Controller } from 'react-hook-form'
+import { yupResolver } from '@hookform/resolvers/yup'
+import * as yup from 'yup'
+
+import FormHeader from '@components/NewRealmWizard/components/FormHeader'
+import FormField from '@components/NewRealmWizard/components/FormField'
+import FormFooter from '@components/NewRealmWizard/components/FormFooter'
+import { RadioGroup } from '@components/NewRealmWizard/components/Input'
+import AdviceBox from '@components/NewRealmWizard/components/AdviceBox'
+import Text from '@components/Text'
+
+import { updateUserInput, validateSolAddress } from '@utils/formValidation'
+import TokenInput, { TokenWithMintInfo, COUNCIL_TOKEN } from '../TokenInput'
+
+export const AddCouncilSchema = {
+  addCouncil: yup
+    .boolean()
+    .oneOf(
+      [true, false],
+      'You must specify whether you would like to add a council or not'
+    )
+    .required('Required'),
+  useExistingCouncilToken: yup
+    .boolean()
+    .oneOf([true, false], 'You must specify whether you have a token already')
+    .when('addCouncil', {
+      is: true,
+      then: yup.boolean().required('Required'),
+      otherwise: yup.boolean().optional(),
+    }),
+  councilTokenMintAddress: yup
+    .string()
+    .when('useExistingCouncilToken', {
+      is: (val) => val == true,
+      then: yup.string().required('Required'),
+      otherwise: yup.string().optional(),
+    })
+    .test('is-valid-address', 'Please enter a valid Solana address', (value) =>
+      value ? validateSolAddress(value) : true
+    ),
+  transferCouncilMintAuthority: yup
+    .boolean()
+    .oneOf(
+      [true, false],
+      'You must specify whether you which to transfer mint authority'
+    )
+    .when('useExistingCouncilToken', {
+      is: (val) => val == true,
+      then: yup.boolean().required('Required'),
+      otherwise: yup.boolean().optional(),
+    }),
+}
+
+export interface AddCouncil {
+  addCouncil: boolean
+  useExistingCouncilToken?: boolean
+  councilTokenMintAddress?: string
+  transferCouncilMintAuthority?: boolean
+}
+
+export default function AddCouncilForm({
+  type,
+  formData,
+  currentStep,
+  totalSteps,
+  onSubmit,
+  onPrevClick,
+}) {
+  const schema = yup.object(AddCouncilSchema).required()
+  const {
+    control,
+    setValue,
+    handleSubmit,
+    watch,
+    formState: { isValid },
+  } = useForm({
+    mode: 'all',
+    resolver: yupResolver(schema),
+  })
+  const addCouncil = watch('addCouncil')
+  const useExistingCouncilToken = watch('useExistingCouncilToken')
+  const [councilTokenInfo, setCouncilTokenInfo] = useState<
+    TokenWithMintInfo | undefined
+  >()
+  const forceCouncil =
+    formData.useExistingCommunityToken === false ||
+    (formData?.communityTokenInfo?.mint?.supplyAsDecimal === 0 &&
+      formData.transferCommunityMintAuthority)
+
+  useEffect(() => {
+    updateUserInput(formData, AddCouncilSchema, setValue)
+  }, [])
+
+  useEffect(() => {
+    setValue('addCouncil', forceCouncil || undefined)
+  }, [forceCouncil])
+
+  useEffect(() => {
+    if (!useExistingCouncilToken) {
+      setValue('councilTokenMintAddress', '')
+      setValue('transferCouncilMintAuthority', undefined)
+      setCouncilTokenInfo(undefined)
+    }
+  }, [useExistingCouncilToken])
+
+  useEffect(() => {
+    if (!addCouncil) {
+      setValue('useExistingCouncilToken', undefined, { shouldValidate: true })
+    }
+  }, [addCouncil])
+
+  function handleTokenInput({ tokenInfo }) {
+    setCouncilTokenInfo(tokenInfo)
+    setValue('transferCouncilMintAuthority', undefined, {
+      shouldValidate: true,
+    })
+  }
+
+  function serializeValues(values) {
+    let data
+    if (!values.addCouncil) {
+      data = {
+        ...values,
+        memberAddresses: null,
+        quorumThreshold: null,
+      }
+    } else {
+      data = values
+      data.councilTokenInfo = councilTokenInfo ? councilTokenInfo : null
+    }
+    onSubmit({ step: currentStep, data })
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit(serializeValues)}
+      data-testid="add-council-form"
+    >
+      <FormHeader
+        type={type}
+        currentStep={currentStep}
+        totalSteps={totalSteps}
+        title="Add a council to your DAO."
+      />
+      <div className="space-y-10 md:space-y-20">
+        <div className="mt-10 mb-16 md:my-18">
+          <AdviceBox
+            title="About Councils"
+            icon={<img src="/icons/council-icon.svg" alt="council icon" />}
+          >
+            Council members can supervise and moderate DAO activities. It’s
+            recommended to always create the council for DAOs in their
+            incubation stage to prevent governance attacks or accidental losses
+            of assets managed by the DAO.
+          </AdviceBox>
+        </div>
+
+        <FormField title="Do you want to add a council?" description="">
+          <Controller
+            name="addCouncil"
+            control={control}
+            defaultValue={undefined}
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            render={({ field: { ref, ...field } }) => (
+              <RadioGroup
+                {...field}
+                options={[
+                  { label: 'Yes', value: true },
+                  { label: 'No, skip this step', value: false },
+                ]}
+                disabled={forceCouncil}
+              />
+            )}
+          />
+          {forceCouncil && (
+            <Text level="2" className="mt-2 text-fgd-2">
+              A council is required to govern the DAO until the community token
+              is distributed to members.
+            </Text>
+          )}
+        </FormField>
+
+        {addCouncil && (
+          <Controller
+            name="useExistingCouncilToken"
+            control={control}
+            defaultValue={undefined}
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            render={({ field: { ref, ...field } }) => (
+              <FormField
+                title="Do you have an existing token for your DAO's council?"
+                description=""
+              >
+                <RadioGroup
+                  {...field}
+                  options={[
+                    { label: 'Yes', value: true },
+                    { label: 'No, make one for me', value: false },
+                  ]}
+                />
+              </FormField>
+            )}
+          />
+        )}
+        {addCouncil && useExistingCouncilToken && (
+          <TokenInput
+            type={COUNCIL_TOKEN}
+            control={control}
+            disableMinTokenInput
+            onValidation={handleTokenInput}
+          />
+        )}
+      </div>
+      <FormFooter
+        isValid={isValid}
+        prevClickHandler={() => onPrevClick(currentStep)}
+      />
+    </form>
+  )
+}
diff --git a/components/NewRealmWizard/components/steps/AddNFTCollectionForm.tsx b/components/NewRealmWizard/components/steps/AddNFTCollectionForm.tsx
new file mode 100644
index 0000000000..739abf117c
--- /dev/null
+++ b/components/NewRealmWizard/components/steps/AddNFTCollectionForm.tsx
@@ -0,0 +1,656 @@
+import React, { useEffect, useState } from 'react'
+import { useForm, Controller } from 'react-hook-form'
+import { yupResolver } from '@hookform/resolvers/yup'
+import * as yup from 'yup'
+import { Metadata } from '@metaplex-foundation/mpl-token-metadata'
+import axios from 'axios'
+
+import { updateUserInput, validateSolAddress } from '@utils/formValidation'
+import { notify } from '@utils/notifications'
+import { abbreviateAddress } from '@utils/formatting'
+
+import useWalletStore from 'stores/useWalletStore'
+
+import { NewButton as Button } from '@components/Button'
+import Text from '@components/Text'
+import FormHeader from '@components/NewRealmWizard/components/FormHeader'
+import FormField from '@components/NewRealmWizard/components/FormField'
+import FormFooter from '@components/NewRealmWizard/components/FormFooter'
+import Input, {
+  InputRangeSlider,
+} from '@components/NewRealmWizard/components/Input'
+import AdviceBox from '@components/NewRealmWizard/components/AdviceBox'
+import NFTCollectionModal from '@components/NewRealmWizard/components/NFTCollectionModal'
+
+function filterAndMapVerifiedCollections(nfts) {
+  return nfts
+    .filter((nft) => {
+      if (nft.data?.collection) {
+        return nft.data?.collection?.verified
+      } else {
+        return nft.collection?.verified
+      }
+    })
+    .map((nft) => {
+      if (nft.data.collection) {
+        return nft.data
+      } else {
+        return nft
+      }
+    })
+    .reduce((prev, curr) => {
+      const collectionKey = curr.collection?.key
+      if (typeof collectionKey === 'undefined') return prev
+
+      if (prev[collectionKey]) {
+        prev[collectionKey].push(curr)
+      } else {
+        prev[collectionKey] = [curr]
+      }
+      return prev
+    }, {})
+}
+
+async function enrichItemInfo(item, uri) {
+  const { data: response } = await axios.get(uri)
+  return {
+    ...item,
+    ...response,
+  }
+}
+
+async function enrichCollectionInfo(connection, collectionKey) {
+  const {
+    data: { data: collectionData },
+  } = await Metadata.findByMint(connection, collectionKey)
+
+  return enrichItemInfo(
+    {
+      ...collectionData,
+      collectionMintAddress: collectionKey,
+    },
+    collectionData.uri
+  )
+}
+
+async function getNFTCollectionInfo(connection, collectionKey) {
+  const { data: result } = await Metadata.findByMint(connection, collectionKey)
+  console.log('NFT findByMint result', result)
+  if (result?.collection?.verified && result.collection?.key) {
+    // here we were given a child of the collection (hence the "collection" property is present)
+    const collectionInfo = await enrichCollectionInfo(
+      connection,
+      result.collection.key
+    )
+    const nft = await enrichItemInfo(result.data, result.data.uri)
+    collectionInfo.nfts = [nft]
+    return collectionInfo
+  } else {
+    // assume we've been given the collection address already, so we need to go find it's children
+    const children = await Metadata.findMany(connection, {
+      updateAuthority: result.updateAuthority,
+    })
+
+    const verifiedCollections = filterAndMapVerifiedCollections(children)
+    if (verifiedCollections[collectionKey]) {
+      const collectionInfo = await enrichCollectionInfo(
+        connection,
+        collectionKey
+      )
+      const nfts = await Promise.all(
+        verifiedCollections[collectionKey].map((item) => {
+          return enrichItemInfo(item.data, item.data.uri)
+        })
+      )
+      collectionInfo.nfts = nfts
+      return collectionInfo
+    } else {
+      throw new Error(
+        'Address did not return collection with children whose "collection.key" matched'
+      )
+    }
+  }
+
+  // 3iBYdnzA418tD2o7vm85jBeXgxbdUyXzX9Qfm2XJuKME
+}
+
+export const AddNFTCollectionSchema = {
+  collectionKey: yup.string().required(),
+  numberOfNFTs: yup
+    .number()
+    .min(1, 'Must be at least 1')
+    .transform((value) => (isNaN(value) ? undefined : value))
+    .required('Required'),
+  communityYesVotePercentage: yup
+    .number()
+    .typeError('Required')
+    .max(100, 'Approval cannot require more than 100% of votes')
+    .min(1, 'Approval must be at least 1% of votes')
+    .required('Required'),
+}
+
+export interface AddNFTCollection {
+  collectionKey: string
+  collectionMetadata: NFTCollection
+  communityYesVotePercentage: number
+  numberOfNFTs: number
+}
+
+export interface NFT_Creator {
+  address: string
+  verified: number
+  share: number
+}
+
+interface NFT_Attributes {
+  display_type: string
+  trait_type: string
+  value: number
+}
+export interface NFT {
+  name: string
+  symbol: string
+  uri: string
+  sellerFeeBasisPoints: number
+  creators: NFT_Creator[]
+  description: string
+  seller_fee_basis_points: number
+  image: string
+  animation_url: string
+  external_url: string
+  attributes: NFT_Attributes[]
+  collection: any
+  properties: any
+}
+
+interface NFTCollection extends NFT {
+  nfts: NFT[]
+}
+
+export function WalletIcon() {
+  return (
+    <svg
+      width="16"
+      height="15"
+      viewBox="0 0 16 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 4.5C16 3.94772 15.5513 3.5 14.9979 3.5H14.2463C14.108 3.5 13.9958 3.38807 13.9958 3.25V1C13.9958 0.447715 13.5471 0 12.9937 0H2.00422C0.884255 0 -0.0183791 0.915877 0.000284295 2.03333L0.184003 13.0333C0.202232 14.1248 1.09406 15 2.18794 15H14.9979C15.5513 15 16 14.5523 16 14V4.5ZM0.968429 2.25C0.968429 1.56055 1.52918 1 2.22106 1H12.7432C12.8816 1 12.9937 1.11133 12.9937 1.25V3.25C12.9937 3.38807 12.8815 3.5 12.7432 3.5H2.22106C1.52918 3.5 0.968429 2.93945 0.968429 2.25ZM13.2447 10.5C13.9365 10.5 14.4973 9.94036 14.4973 9.25C14.4973 8.55964 13.9365 8 13.2447 8C12.5529 8 11.9921 8.55964 11.9921 9.25C11.9921 9.94036 12.5529 10.5 13.2447 10.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+function SkeletonNFTCollectionInfo() {
+  return (
+    <>
+      <div className="w-24 h-24 opacity-50 text-fgd-3">
+        <svg viewBox="0 0 34 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M24.6817 1.90042C24.503 1.23359 23.8176 0.837858 23.1508 1.01654L9.9316 4.55861L3.87786 5.18346C3.21601 5.25178 2.72831 5.82475 2.75733 6.48095L1.90042 6.71056C1.23359 6.88923 0.837858 7.57466 1.01654 8.24149L4.1401 19.8988L5.0216 28.4389C5.09247 29.1256 5.70662 29.6249 6.39333 29.554L6.56349 29.5364C6.7135 29.6001 6.87853 29.6354 7.0518 29.6354H10.3902L30.1418 31.0805C30.8303 31.1309 31.4293 30.6136 31.4797 29.9251L33.085 7.98374C33.1354 7.29522 32.6181 6.69623 31.9296 6.64585L30.3018 6.52675V6.3854C30.3018 5.69504 29.7422 5.13539 29.0518 5.13539L27.2464 5.13539L27.1333 4.03973C27.0625 3.35302 26.4483 2.85379 25.7616 2.92467L24.9778 3.00557L24.6817 1.90042ZM24.4741 3.05756L24.1988 2.02983C24.0915 1.62973 23.6803 1.39229 23.2802 1.4995L13.0739 4.23427L24.4741 3.05756ZM27.298 5.63539L29.3921 25.9235C29.463 26.6102 28.9638 27.2243 28.2771 27.2952C22.3207 27.91 16.3728 28.5239 10.4487 29.1354L29.0518 29.1354C29.466 29.1354 29.8018 28.7996 29.8018 28.3854L29.8018 6.3854C29.8018 5.97118 29.466 5.63539 29.0518 5.63539L27.298 5.63539ZM3.81576 16.7565L2.80719 6.98523L2.02983 7.19352C1.62973 7.30073 1.39229 7.71198 1.4995 8.11208L3.81576 16.7565ZM30.3018 28.3854L30.3018 7.02809L31.8931 7.14452C32.3062 7.17475 32.6166 7.53414 32.5864 7.94725L30.981 29.8886C30.9508 30.3017 30.5914 30.6121 30.1783 30.5819L17.2422 29.6354L29.0518 29.6354C29.7422 29.6354 30.3018 29.0758 30.3018 28.3854ZM25.8129 3.42203C26.225 3.3795 26.5934 3.67904 26.636 4.09106L27.5864 13.2991C26.8436 12.7024 25.8975 12.0851 25.0457 11.7194C23.8693 11.2142 22.4448 10.9094 20.5486 10.859C20.3579 10.854 20.1845 10.7928 20.0507 10.6909L17.8535 9.01673C16.8506 8.25254 15.4769 9.24495 15.8606 10.4378L16.4784 12.3585C16.1456 12.6021 15.7823 12.9268 15.4495 13.3193L7.78682 11.2274C7.38301 11.1172 6.96257 11.3294 6.80846 11.718C6.65455 12.1061 6.81405 12.5496 7.18153 12.7486L14.1802 16.5388C13.8 18.51 13.2892 20.0635 12.8782 21.2065C12.5867 22.017 13.1544 22.8935 14.0256 22.9333L15.2789 22.9906C16.0134 23.0242 16.6887 22.5906 16.9679 21.9087L17.2068 21.325C17.2553 21.2065 17.395 21.0951 17.6037 21.0953C18.4112 21.0958 19.5095 20.9782 20.4174 20.3113C20.8156 20.0188 21.1519 19.6398 21.4074 19.1653C21.5318 19.2349 21.656 19.316 21.768 19.4069C22.0615 19.6453 22.1529 19.8484 22.1529 20.0001C22.1529 20.3916 21.9665 20.7724 21.5062 21.2374C21.1162 21.6314 20.6139 22.0046 20.0216 22.4438C19.894 22.5385 19.7625 22.636 19.6281 22.7368C18.227 23.7876 16.4254 25.6778 16.1465 28.0446L6.34199 29.0566C5.92997 29.0992 5.56148 28.7996 5.51895 28.3876L3.26017 6.50386C3.21764 6.09183 3.51717 5.72335 3.9292 5.68082L25.8129 3.42203ZM24.8485 12.1788C25.8041 12.5892 26.9102 13.3504 27.6603 14.0147L28.8948 25.9748C28.9373 26.3868 28.6378 26.7553 28.2257 26.7978L16.6575 27.9919C16.9553 25.8815 18.5849 24.1442 19.9281 23.1368C20.0612 23.037 20.1917 22.9402 20.3195 22.8454L20.3306 22.8372C20.9099 22.4076 21.4419 22.013 21.8615 21.5892C22.3665 21.079 22.6529 20.5786 22.6529 20.0001C22.6529 19.6339 22.4329 19.3028 22.0832 19.0188C21.8653 18.8418 21.6186 18.7016 21.4001 18.601L21.1718 18.496L21.0679 18.7248C20.837 19.2334 20.5131 19.6206 20.1214 19.9084C19.3433 20.4799 18.3766 20.5958 17.604 20.5953C17.2144 20.595 16.8776 20.8095 16.7441 21.1355L16.5051 21.7192C16.3055 22.2069 15.8237 22.515 15.3018 22.4911L14.0484 22.4338C13.5211 22.4097 13.1686 21.8766 13.3487 21.3757C13.777 20.1845 14.3156 18.544 14.7056 16.4518L14.739 16.2728L7.41964 12.3089C7.27609 12.2312 7.21215 12.0564 7.27325 11.9023C7.33415 11.7487 7.49881 11.6671 7.65514 11.7098L15.6321 13.8874L15.7347 13.7593C16.1123 13.2877 16.5448 12.9132 16.9129 12.6639L17.0681 12.5587L16.3366 10.2847C16.0994 9.54728 16.9456 8.95354 17.5505 9.41444L19.7477 11.0886C19.9702 11.2581 20.2466 11.3512 20.5353 11.3588C22.3838 11.4079 23.7431 11.7042 24.8485 12.1788Z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <div className="space-y-2 truncate">
+        <div className="text-transparent truncate rounded w-fit bg-fgd-4 opacity-40">
+          Collection name...
+        </div>
+        <div className="text-transparent truncate rounded w-fit bg-fgd-4 opacity-40">
+          Loading-long-url-to-some-obscure-wallet-address
+        </div>
+        <div className="text-transparent truncate rounded w-fit bg-fgd-4 opacity-40">
+          xx 1234...6789
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default function AddNFTCollectionForm({
+  type,
+  formData,
+  currentStep,
+  totalSteps,
+  onSubmit,
+  onPrevClick,
+}) {
+  const { connected, connection, current: wallet } = useWalletStore((s) => s)
+  const [walletConnecting, setWalletConnecting] = useState(false)
+  const [requestPending, setRequestPending] = useState(false)
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const [collectionsInWallet, setCollectionsInWallet] = useState({})
+
+  const [
+    selectedNFTCollection,
+    setSelectedNFTCollection,
+  ] = useState<NFTCollection>()
+
+  const schema = yup.object(AddNFTCollectionSchema).required()
+  const {
+    control,
+    register,
+    watch,
+    setValue,
+    setError,
+    setFocus,
+    clearErrors,
+    handleSubmit,
+    formState: { isValid },
+  } = useForm({
+    mode: 'all',
+    resolver: yupResolver(schema),
+  })
+  const [unverifiedCollection, setUnverifiedCollection] = useState(false)
+  const collectionKey = watch('collectionKey')
+  const numberOfNFTs = watch('numberOfNFTs') || 10000
+  const approvalPercent = watch('communityYesVotePercentage', 60) || 60
+  const approvalSize = approvalPercent
+    ? Math.ceil((Number(numberOfNFTs) * approvalPercent) / 100)
+    : undefined
+
+  useEffect(() => {
+    updateUserInput(formData, AddNFTCollectionSchema, setValue)
+    setSelectedNFTCollection(formData?.collectionMetadata)
+  }, [])
+
+  useEffect(() => {
+    if (unverifiedCollection || selectedNFTCollection) {
+      setFocus('numberOfNFTs')
+    } else {
+      // setFocus('collectionInput')
+    }
+  }, [unverifiedCollection, selectedNFTCollection])
+
+  function serializeValues(values) {
+    const data = {
+      numberOfNFTs: null,
+      ...values,
+      collectionInput: null,
+      collectionMetadata: selectedNFTCollection,
+    }
+    onSubmit({ step: currentStep, data })
+  }
+
+  async function handleAdd(collectionInput) {
+    clearErrors()
+
+    if (validateSolAddress(collectionInput)) {
+      handleClearSelectedNFT(false)
+      setRequestPending(true)
+      try {
+        const collectionInfo = await getNFTCollectionInfo(
+          connection.current,
+          collectionInput
+        )
+        console.log('NFT collection info from user input:', collectionInfo)
+        setValue('collectionKey', collectionInfo.collectionMintAddress)
+        setSelectedNFTCollection(collectionInfo)
+        setRequestPending(false)
+      } catch (err) {
+        setRequestPending(false)
+        setValue('collectionKey', collectionInput)
+        setUnverifiedCollection(true)
+      }
+    } else {
+      setError('collectionInput', {
+        type: 'error',
+        message: 'Address is invalid',
+      })
+    }
+  }
+
+  async function handleClearSelectedNFT(clearInput = true) {
+    if (clearInput) {
+      setValue('collectionInput', '')
+    }
+    clearErrors('collectionInput')
+    setValue('collectionKey', '')
+    setUnverifiedCollection(false)
+    setSelectedNFTCollection(undefined)
+  }
+
+  async function handlePaste(ev) {
+    const value = ev.clipboardData.getData('text')
+    ev.currentTarget.value += value
+    setValue('collectionInput', ev.currentTarget.value)
+    handleAdd(ev.currentTarget.value)
+    ev.preventDefault()
+  }
+
+  async function handleSelectFromWallet() {
+    try {
+      setWalletConnecting(true)
+
+      if (!connected) {
+        if (wallet) await wallet.connect()
+      }
+      if (!wallet?.publicKey) {
+        throw new Error('No valid wallet connected')
+      }
+
+      const ownedNfts = await Metadata.findDataByOwner(
+        connection.current,
+        wallet.publicKey
+      )
+      console.log('NFT wallet contents', ownedNfts)
+      const verfiedNfts = filterAndMapVerifiedCollections(ownedNfts)
+      console.log('NFT verified nft by collection', verfiedNfts)
+
+      const verifiedCollections = {}
+      for (const collectionKey in verfiedNfts) {
+        const collectionInfo = await enrichCollectionInfo(
+          connection.current,
+          collectionKey
+        )
+        const nftsWithInfo = await Promise.all(
+          verfiedNfts[collectionKey].slice(0, 2).map((nft) => {
+            return enrichItemInfo(nft.data, nft.data.uri)
+          })
+        )
+
+        verifiedCollections[collectionKey] = {
+          ...collectionInfo,
+          nfts: nftsWithInfo,
+        }
+      }
+
+      console.log(
+        'NFT verified collection metadata with nfts',
+        verifiedCollections
+      )
+      if (Object.keys(verifiedCollections).length === 0) {
+        setError(
+          'collectionInput',
+          {
+            type: 'error',
+            message: 'Current wallet has no verified collection',
+          },
+          { shouldFocus: true }
+        )
+      } else {
+        setCollectionsInWallet(verifiedCollections)
+        setIsModalOpen(true)
+      }
+      setWalletConnecting(false)
+    } catch (error) {
+      setWalletConnecting(false)
+      const err = error as Error
+      console.log(error)
+      return notify({
+        type: 'error',
+        message: err.message,
+      })
+    }
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit(serializeValues)}
+      data-testid="add-nft-collection-form"
+    >
+      <NFTCollectionModal
+        show={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        walletPk={wallet?.publicKey}
+        collections={collectionsInWallet}
+        onSelect={({ key, collection }) => {
+          if (key && collection) {
+            handleClearSelectedNFT(true)
+            setValue('collectionKey', key)
+            setSelectedNFTCollection(collection)
+          }
+        }}
+      />
+      <FormHeader
+        type={type}
+        currentStep={currentStep}
+        totalSteps={totalSteps}
+        title="Select an NFT collection for your DAO."
+      />
+      <div className="mt-20 space-y-10 md:space-y-12">
+        <Controller
+          name="collectionInput"
+          control={control}
+          defaultValue=""
+          render={({ field, fieldState: { error } }) => (
+            <FormField
+              title="What is the NFT collection address?"
+              description={
+                <div>
+                  Only{' '}
+                  <a
+                    href="https://www.metaplex.com/posts/certified-collections"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="underline hover:text-fgd-3"
+                  >
+                    Metaplex standard certified collections
+                  </a>{' '}
+                  may be used.
+                </div>
+              }
+            >
+              <Input
+                placeholder="e.g. SMBH3wF6baUj6JWtzYvqcKuj2XCKWDqQxzspY12xPND"
+                data-testid="nft-address"
+                error={error?.message || ''}
+                warning={
+                  unverifiedCollection
+                    ? 'Caution: we could not verify this address is a "certified" collection.'
+                    : ''
+                }
+                {...field}
+                disabled={requestPending}
+                onKeyDown={(ev) => {
+                  if (ev.key === 'Enter') {
+                    handleAdd(ev.currentTarget.value)
+                  }
+                }}
+                onPaste={handlePaste}
+                onBlur={(ev) => {
+                  // field.onBlur()
+                  handleAdd(ev.currentTarget.value)
+                }}
+              />
+              <div className="flex items-center justify-center space-x-4 md:justify-start">
+                <Text level="2">or</Text>
+                <Button
+                  type="button"
+                  secondary
+                  disabled={requestPending || walletConnecting}
+                  loading={requestPending || walletConnecting}
+                  onClick={handleSelectFromWallet}
+                  className=""
+                >
+                  <div className="flex items-center justify-center px-4 space-x-2">
+                    <WalletIcon />
+                    <span>Select from Wallet</span>
+                  </div>
+                </Button>
+              </div>
+            </FormField>
+          )}
+        />
+        <input className="hidden" {...register('collectionKey')} disabled />
+
+        {!unverifiedCollection && (
+          <div
+            className={`flex flex-col w-full px-4 py-5 rounded-md bg-bkg-3  ${
+              requestPending ? 'animate-pulse' : ''
+            }`}
+          >
+            {requestPending ? (
+              <Text level="2">Getting collection data</Text>
+            ) : (
+              <Text level="2" className="flex space-x-4">
+                {!selectedNFTCollection?.name ? (
+                  'Select a collection to preview...'
+                ) : (
+                  <>
+                    <div className="text-green">Verified collection</div>
+                    <div
+                      className="underline hover:text-fgd-2 hover:cursor-pointer"
+                      onClick={() => handleClearSelectedNFT(true)}
+                    >
+                      Clear
+                    </div>
+                  </>
+                )}
+              </Text>
+            )}
+
+            <div className="flex mt-5 space-x-2">
+              {!selectedNFTCollection?.name ? (
+                <SkeletonNFTCollectionInfo />
+              ) : (
+                <div className="flex w-full">
+                  <div className="relative h-24 pl-2 shrink-0 w-28">
+                    {selectedNFTCollection?.nfts
+                      ?.slice(0, 3)
+                      .map((nft, index) => {
+                        return (
+                          <img
+                            key={nft.name}
+                            src={nft.image}
+                            alt="collection item"
+                            className={`absolute w-24 rounded-md ${
+                              index === 0
+                                ? 'rotate-[-9deg]'
+                                : index === 1
+                                ? 'rotate-[-15deg]'
+                                : index === 2
+                                ? 'rotate-[15deg]'
+                                : 'rotate-[9deg]'
+                            }`}
+                          />
+                        )
+                      })}
+                    <img
+                      src={selectedNFTCollection?.image}
+                      className="absolute w-24 rounded-md"
+                    />
+                  </div>
+                  <div className="grid w-full pl-4">
+                    <Text level="1" className="break-words">
+                      {selectedNFTCollection?.name ||
+                        '(Collection has no name)'}
+                    </Text>
+                    <Text level="2" className="truncate text-fgd-2">
+                      {selectedNFTCollection?.external_url ? (
+                        <a
+                          href={selectedNFTCollection.external_url}
+                          target="_blank"
+                          rel="noreferrer"
+                        >
+                          {selectedNFTCollection.external_url}
+                        </a>
+                      ) : (
+                        '(No external address)'
+                      )}
+                    </Text>
+                    <Text
+                      level="2"
+                      className="flex items-baseline mt-2 space-x-2 text-fgd-2"
+                    >
+                      <WalletIcon />
+                      <span>
+                        {collectionKey && abbreviateAddress(collectionKey)}
+                      </span>
+                    </Text>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {collectionKey && (
+          <>
+            <Controller
+              name="numberOfNFTs"
+              control={control}
+              defaultValue=""
+              render={({ field, fieldState: { error } }) => (
+                <FormField
+                  title="How many NFTs are in this collection?"
+                  description="This is necessary for calculating the number of votes needed for a proposal to pass. Please be accurate."
+                >
+                  <Input
+                    Icon={
+                      <svg
+                        width="18"
+                        height="16"
+                        viewBox="0 0 18 16"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M9.2824 0.181642C8.58511 -0.335268 7.62238 0.333984 7.89166 1.14843L8.47636 2.91687C8.14048 3.1382 7.74895 3.46833 7.40679 3.88406L0.625238 2.08288C0.382319 2.01836 0.12857 2.14235 0.0353253 2.37113C-0.0579197 2.59991 0.0389839 2.86074 0.260606 2.97752L6.47029 6.24939C6.13488 7.99973 5.6718 9.37245 5.30243 10.3718C5.09794 10.9251 5.49701 11.5199 6.10351 11.5469L7.19064 11.5952C7.73549 11.6195 8.2373 11.3066 8.44496 10.8131L8.65225 10.3205C8.73116 10.1329 8.93781 9.99545 9.19724 9.99561C9.8825 9.99604 10.7781 9.89752 11.5092 9.37501C11.8793 9.11054 12.1839 8.75505 12.3993 8.29341C12.5769 8.37294 12.7743 8.48255 12.9458 8.61806C13.2247 8.83849 13.3598 9.06384 13.3598 9.28237C13.3598 9.69164 13.1547 10.0635 12.7361 10.4749C12.3838 10.8212 11.9335 11.1461 11.4235 11.514C11.3128 11.594 11.1991 11.676 11.0832 11.7606C9.83719 12.6697 8.36513 13.8487 8.22732 15.8596L17.9999 16L18 4.07516C17.2988 3.46346 16.5566 2.902 15.5665 2.48838C14.5769 2.07496 13.3696 1.82135 11.7456 1.77939C11.5377 1.77402 11.3427 1.70894 11.1882 1.59442L9.2824 0.181642Z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    }
+                    type="tel"
+                    placeholder="e.g. 10,000"
+                    data-testid="nft-collection-count"
+                    error={error?.message || ''}
+                    {...field}
+                  />
+                </FormField>
+              )}
+            />
+            <Controller
+              name="communityYesVotePercentage"
+              control={control}
+              defaultValue={60}
+              render={({ field, fieldState: { error } }) => (
+                <FormField
+                  title="Adjust how much of the total NFT supply is needed to pass a proposal"
+                  description=""
+                >
+                  <InputRangeSlider
+                    field={field}
+                    error={error?.message}
+                    placeholder="60"
+                  />
+                </FormField>
+              )}
+            />
+
+            <AdviceBox
+              title="Approval threshold"
+              icon={<img src="/icons/threshold-icon.svg" alt="voting icon" />}
+            >
+              <Text level="1" className="space-y-1 text-white/70">
+                <div>
+                  With{' '}
+                  {numberOfNFTs && !isNaN(numberOfNFTs)
+                    ? Number(numberOfNFTs).toLocaleString()
+                    : '???'}{' '}
+                  NFT holders,
+                </div>
+                <div>
+                  {approvalSize?.toLocaleString() || '???'} members would need
+                  to approve a proposal for it to pass.
+                </div>
+              </Text>
+            </AdviceBox>
+          </>
+        )}
+      </div>
+      <FormFooter
+        isValid={isValid}
+        prevClickHandler={() => onPrevClick(currentStep)}
+      />
+    </form>
+  )
+}
diff --git a/components/NewRealmWizard/components/steps/BasicDetailsForm.tsx b/components/NewRealmWizard/components/steps/BasicDetailsForm.tsx
new file mode 100644
index 0000000000..43ff4c4a34
--- /dev/null
+++ b/components/NewRealmWizard/components/steps/BasicDetailsForm.tsx
@@ -0,0 +1,132 @@
+import { useEffect } from 'react'
+import { useForm, Controller } from 'react-hook-form'
+import { yupResolver } from '@hookform/resolvers/yup'
+import * as yup from 'yup'
+
+import FormHeader from '@components/NewRealmWizard/components/FormHeader'
+import FormField from '@components/NewRealmWizard/components/FormField'
+import FormFooter from '@components/NewRealmWizard/components/FormFooter'
+import AdvancedOptionsDropdown from '@components/NewRealmWizard/components/AdvancedOptionsDropdown'
+import Input from '@components/NewRealmWizard/components/Input'
+
+import { DEFAULT_GOVERNANCE_PROGRAM_ID } from '@components/instructions/tools'
+
+import { updateUserInput, validateSolAddress } from '@utils/formValidation'
+
+import { FORM_NAME as MUTISIG_FORM } from 'pages/realms/new/multisig'
+
+export const BasicDetailsSchema = {
+  avatar: yup.string(),
+  name: yup
+    .string()
+    .typeError('Required')
+    .required('Required')
+    .max(32, 'Name must not be longer than 32 characters'),
+  // description: yup.string(),
+  programId: yup
+    .string()
+    .test('is-valid-address', 'Please enter a valid Solana address', (value) =>
+      value ? validateSolAddress(value) : true
+    ),
+}
+
+export interface BasicDetails {
+  name: string
+  programId?: string
+}
+
+export default function BasicDetailsForm({
+  type,
+  formData,
+  currentStep,
+  totalSteps,
+  onSubmit,
+  onPrevClick,
+}) {
+  const schema = yup.object(BasicDetailsSchema).required()
+  const {
+    setValue,
+    control,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm({
+    mode: 'all',
+    resolver: yupResolver(schema),
+  })
+
+  useEffect(() => {
+    updateUserInput(formData, BasicDetailsSchema, setValue)
+  }, [])
+
+  function serializeValues(values) {
+    onSubmit({ step: currentStep, data: values })
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit(serializeValues)}
+      data-testid="basic-details-form"
+    >
+      <FormHeader
+        type={type}
+        currentStep={currentStep}
+        totalSteps={totalSteps}
+        title="Let's get started."
+      />
+      <div className="mt-16 space-y-10 md:space-y-12">
+        <Controller
+          name="name"
+          control={control}
+          defaultValue=""
+          render={({ field }) => (
+            <FormField
+              title={
+                type === MUTISIG_FORM
+                  ? 'What is the name of your wallet?'
+                  : 'What is the name of your DAO?'
+              }
+              description="It's best to choose a descriptive, memorable name for you and your members."
+            >
+              <Input
+                placeholder={
+                  type === MUTISIG_FORM
+                    ? 'e.g. Realms wallet'
+                    : 'e.g. Realms DAO'
+                }
+                data-testid="dao-name-input"
+                error={errors.name?.message || ''}
+                {...field}
+              />
+            </FormField>
+          )}
+        />
+        <AdvancedOptionsDropdown>
+          <Controller
+            name="programId"
+            defaultValue=""
+            control={control}
+            render={({ field }) => (
+              <FormField
+                title="Custom Program ID"
+                description="Provide the program ID of your own instance of spl-governance you want to use for the organisation. This cannot be changed after the organisation is created."
+                advancedOption
+              >
+                <Input
+                  placeholder={`e.g. ${DEFAULT_GOVERNANCE_PROGRAM_ID}`}
+                  data-testid="programId-input"
+                  error={errors.programId?.message || ''}
+                  autoComplete="on"
+                  {...field}
+                />
+              </FormField>
+            )}
+          />
+        </AdvancedOptionsDropdown>
+      </div>
+      <FormFooter
+        isValid={isValid}
+        prevClickHandler={() => onPrevClick(currentStep)}
+      />
+    </form>
+  )
+}
diff --git a/components/NewRealmWizard/components/steps/CommunityTokenDetailsForm.tsx b/components/NewRealmWizard/components/steps/CommunityTokenDetailsForm.tsx
new file mode 100644
index 0000000000..082b08dc8a
--- /dev/null
+++ b/components/NewRealmWizard/components/steps/CommunityTokenDetailsForm.tsx
@@ -0,0 +1,250 @@
+import { useEffect, useState } from 'react'
+import { useForm, Controller } from 'react-hook-form'
+import { yupResolver } from '@hookform/resolvers/yup'
+import * as yup from 'yup'
+
+import { preventNegativeNumberInput } from '@utils/helpers'
+import { updateUserInput, validateSolAddress } from '@utils/formValidation'
+
+import FormHeader from '@components/NewRealmWizard/components/FormHeader'
+import FormField from '@components/NewRealmWizard/components/FormField'
+import FormFooter from '@components/NewRealmWizard/components/FormFooter'
+import AdvancedOptionsDropdown from '@components/NewRealmWizard/components/AdvancedOptionsDropdown'
+import Input, { RadioGroup } from '@components/NewRealmWizard/components/Input'
+import { GenericTokenIcon } from '@components/NewRealmWizard/components/TokenInfoTable'
+import TokenInput, { TokenWithMintInfo, COMMUNITY_TOKEN } from '../TokenInput'
+
+export const CommunityTokenSchema = {
+  useExistingCommunityToken: yup
+    .boolean()
+    .oneOf([true, false], 'You must specify whether you have a token already')
+    .required('Required'),
+  communityTokenMintAddress: yup
+    .string()
+    .when('useExistingCommunityToken', {
+      is: true,
+      then: yup.string().required('Required'),
+      otherwise: yup.string().optional(),
+    })
+    .test('is-valid-address', 'Please enter a valid Solana address', (value) =>
+      value ? validateSolAddress(value) : true
+    ),
+  transferCommunityMintAuthority: yup
+    .boolean()
+    .oneOf(
+      [true, false],
+      'You must specify whether you which to transfer mint authority'
+    )
+    .when('useExistingCommunityToken', {
+      is: true,
+      then: yup.boolean().required('Required'),
+      otherwise: yup.boolean().optional(),
+    }),
+  minimumNumberOfCommunityTokensToGovern: yup
+    .number()
+    .positive('Must be greater than 0')
+    .transform((value) => (isNaN(value) ? undefined : value))
+    .when(['suggestedMinTokenAmount', 'useExistingCommunityToken'], {
+      is: (suggestedMinTokenAmount, useExistingCommunityToken) => {
+        if (useExistingCommunityToken === false) return false
+        return suggestedMinTokenAmount > 0
+      },
+      then: (schema) => schema.required('Required'),
+      otherwise: (schema) => schema.optional(),
+    }),
+  communityMintSupplyFactor: yup
+    .number()
+    .positive('Must be greater than 0')
+    .max(1, 'Must not be greater than 1')
+    .transform((value) => (isNaN(value) ? undefined : value)),
+}
+
+export interface CommunityToken {
+  useExistingToken: boolean
+  communityTokenMintAddress?: string
+  transferCommunityMintAuthority?: boolean
+  minimumNumberOfCommunityTokensToGovern?: number
+  communityMintSupplyFactor?: number
+}
+
+export default function CommunityTokenForm({
+  type,
+  formData,
+  currentStep,
+  totalSteps,
+  onSubmit,
+  onPrevClick,
+}) {
+  const schema = yup.object(CommunityTokenSchema).required()
+  const {
+    watch,
+    control,
+    setValue,
+    handleSubmit,
+    formState: { isValid },
+  } = useForm({
+    mode: 'all',
+    resolver: yupResolver(schema),
+  })
+  const useExistingCommunityToken = watch('useExistingCommunityToken')
+  const [communityTokenInfo, setCommunityTokenInfo] = useState<
+    TokenWithMintInfo | undefined
+  >()
+
+  useEffect(() => {
+    updateUserInput(formData, CommunityTokenSchema, setValue)
+  }, [])
+
+  useEffect(() => {
+    if (!useExistingCommunityToken) {
+      setValue('communityTokenMintAddress', undefined)
+      setValue('suggestedMinTokenAmount', undefined)
+      setValue('minimumNumberOfCommunityTokensToGovern', undefined)
+      setValue('transferCommunityMintAuthority', undefined, {
+        shouldValidate: true,
+      })
+    }
+  }, [useExistingCommunityToken])
+
+  function handleTokenInput({ suggestedMinTokenAmount, tokenInfo }) {
+    setCommunityTokenInfo(tokenInfo)
+    setValue('transferCommunityMintAuthority', undefined, {
+      shouldValidate: true,
+    })
+    setValue('suggestedMinTokenAmount', suggestedMinTokenAmount)
+    if (suggestedMinTokenAmount > 0) {
+      setValue(
+        'minimumNumberOfCommunityTokensToGovern',
+        suggestedMinTokenAmount
+      )
+    } else {
+      setValue('minimumNumberOfCommunityTokensToGovern', undefined)
+    }
+  }
+
+  function serializeValues(values) {
+    const data = {
+      transferCommunityMintAuthority: null,
+      minimumNumberOfCommunityTokensToGovern: null,
+      communityMintSupplyFactor: null,
+      ...values,
+    }
+    if (values.useExistingCommunityToken) {
+      data.communityTokenInfo = communityTokenInfo
+    } else {
+      data.communityTokenMintAddress = null
+      data.transferCommunityMintAuthority = null
+      data.communityTokenInfo = null
+    }
+
+    onSubmit({ step: currentStep, data })
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit(serializeValues)}
+      data-testid="govtoken-details-form"
+    >
+      <FormHeader
+        type={type}
+        currentStep={currentStep}
+        totalSteps={totalSteps}
+        title="Next, determine the DAO’s community token."
+      />
+      <div className="mt-16 space-y-10 md:mt-24 md:space-y-20">
+        <Controller
+          name="useExistingCommunityToken"
+          control={control}
+          defaultValue={undefined}
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          render={({ field: { ref, ...field } }) => (
+            <div className="pt-3">
+              <FormField
+                title="Do you have an existing token for your DAO's community?"
+                description="Holders of this token will be able to vote and/or edit your DAO."
+              >
+                <RadioGroup
+                  {...field}
+                  options={[
+                    { label: 'Yes', value: true },
+                    { label: 'No, make one for me', value: false },
+                  ]}
+                />
+              </FormField>
+            </div>
+          )}
+        />
+        {useExistingCommunityToken && (
+          <TokenInput
+            type={COMMUNITY_TOKEN}
+            control={control}
+            onValidation={handleTokenInput}
+          />
+        )}
+      </div>
+      {useExistingCommunityToken === false && (
+        <AdvancedOptionsDropdown>
+          <Controller
+            name="minimumNumberOfCommunityTokensToGovern"
+            control={control}
+            defaultValue={''}
+            render={({ field, fieldState: { error } }) => (
+              <FormField
+                title="What is the minimum number of community tokens needed to manage this DAO?"
+                description="A user will need at least this many community token to edit the DAO"
+                advancedOption
+              >
+                <Input
+                  type="tel"
+                  placeholder="e.g. 1,000,000"
+                  data-testid="dao-name-input"
+                  Icon={<GenericTokenIcon />}
+                  error={error?.message || ''}
+                  {...field}
+                  onChange={(ev) => {
+                    preventNegativeNumberInput(ev)
+                    field.onChange(ev)
+                  }}
+                />
+              </FormField>
+            )}
+          />
+        </AdvancedOptionsDropdown>
+      )}
+      {useExistingCommunityToken && (
+        <AdvancedOptionsDropdown>
+          <Controller
+            name="communityMintSupplyFactor"
+            defaultValue=""
+            control={control}
+            render={({ field, fieldState: { error } }) => (
+              <FormField
+                title="Circulation supply factor"
+                description="This determines the votes needed to pass a proposal by calculating the number of tokens in circulation (instead of using the total Mint supply)."
+                advancedOption
+              >
+                <Input
+                  type="tel"
+                  placeholder={`1`}
+                  Icon={<GenericTokenIcon />}
+                  data-testid="programId-input"
+                  error={error?.message || ''}
+                  {...field}
+                  onChange={(ev) => {
+                    preventNegativeNumberInput(ev)
+                    field.onChange(ev)
+                  }}
+                />
+              </FormField>
+            )}
+          />
+        </AdvancedOptionsDropdown>
+      )}
+
+      <FormFooter
+        isValid={isValid}
+        prevClickHandler={() => onPrevClick(currentStep)}
+      />
+    </form>
+  )
+}
diff --git a/components/NewRealmWizard/components/steps/InviteMembersForm.tsx b/components/NewRealmWizard/components/steps/InviteMembersForm.tsx
new file mode 100644
index 0000000000..8d29a1ac99
--- /dev/null
+++ b/components/NewRealmWizard/components/steps/InviteMembersForm.tsx
@@ -0,0 +1,345 @@
+import React, { useEffect, useState, useRef } from 'react'
+import { useForm } from 'react-hook-form'
+import { yupResolver } from '@hookform/resolvers/yup'
+import * as yup from 'yup'
+import type { ConditionBuilder } from 'yup/lib/Condition'
+import clsx from 'clsx'
+
+import useWalletStore from 'stores/useWalletStore'
+import FormHeader from '@components/NewRealmWizard/components/FormHeader'
+import FormField from '@components/NewRealmWizard/components/FormField'
+import FormFooter from '@components/NewRealmWizard/components/FormFooter'
+import Input from '@components/NewRealmWizard/components/Input'
+
+import { updateUserInput, validateSolAddress } from '@utils/formValidation'
+import { FORM_NAME as MULTISIG_FORM } from 'pages/realms/new/multisig'
+import { textToAddressList } from '@utils/textToAddressList'
+
+/**
+ * Convert a list of addresses into a list of uniques and duplicates
+ */
+const splitUniques = (addresses: string[]) => {
+  const unique = new Set<string>()
+  const duplicate: string[] = []
+
+  addresses.forEach((address) => {
+    if (unique.has(address)) {
+      duplicate.push(address)
+    } else {
+      unique.add(address)
+    }
+  })
+
+  return { duplicate, unique: Array.from(unique.values()) }
+}
+
+function InviteAddress({
+  address = '',
+  currentUser = false,
+  index,
+  invalid = false,
+  onRemoveClick,
+}) {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center truncate">
+        {invalid ? (
+          <svg
+            className="h-11 w-11 shrink-0"
+            viewBox="0 0 32 32"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle cx="16" cy="16" r="15.5" fill="#201F27" stroke="#FF7C7C" />
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M20.5857 21.2889C19.3574 22.3549 17.754 23 16 23C12.134 23 9 19.866 9 16C9 14.246 9.64514 12.6426 10.7111 11.4143L20.5857 21.2889ZM21.2926 20.5815L11.4185 10.7075C12.6463 9.64368 14.248 9 16 9C19.866 9 23 12.134 23 16C23 17.752 22.3563 19.3537 21.2926 20.5815ZM24 16C24 20.4183 20.4183 24 16 24C11.5817 24 8 20.4183 8 16C8 11.5817 11.5817 8 16 8C20.4183 8 24 11.5817 24 16Z"
+              fill="#FF7C7C"
+            />
+          </svg>
+        ) : (
+          <div className={`flex rounded-full border-gradient transparent-fill`}>
+            <div className="flex items-center justify-center w-10 h-10 ">
+              {currentUser ? 'Me' : index}
+            </div>
+          </div>
+        )}
+        <div
+          className={clsx(
+            'w-full',
+            'pr-4',
+            'ml-4',
+            'truncate',
+            'input-base',
+            invalid && 'text-error-red'
+          )}
+        >
+          {address}
+        </div>
+      </div>
+      <button
+        type="button"
+        className="p-3 hover:cursor-pointer disabled:cursor-not-allowed text-fgd-2 hover:text-fgd-1 active:text-fgd-1 focus:text-white disabled:text-fgd-3"
+        onClick={onRemoveClick}
+      >
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M13 1L1 13M13 13L1 1"
+            stroke="currentColor"
+            strokeOpacity="1"
+            strokeWidth="2"
+          />
+        </svg>
+      </button>
+    </div>
+  )
+}
+
+export const InviteMembersSchema = {
+  memberAddresses: yup
+    .array()
+    .of(yup.string())
+    .when(['$addCouncil', '$useExistingCouncilToken'], ((
+      addCouncil,
+      useExistingCouncilToken,
+      schema
+    ) => {
+      if (useExistingCouncilToken) {
+        return schema.min(0).required('Required')
+      } else if (typeof addCouncil === 'undefined') {
+        return schema
+          .min(1, 'A DAO needs at least one member')
+          .required('Required')
+      } else {
+        return addCouncil
+          ? schema
+              .min(1, 'A DAO needs at least one member')
+              .required('Required')
+          : schema
+      }
+    }) as ConditionBuilder<any>),
+}
+
+export interface InviteMembers {
+  memberAddresses: string[]
+}
+
+export default function InviteMembersForm({
+  visible,
+  type,
+  formData,
+  onSubmit,
+  onPrevClick,
+  currentStep,
+  totalSteps,
+}) {
+  const { current } = useWalletStore((s) => s)
+  const userAddress = current?.publicKey?.toBase58()
+  const inputElement = useRef<HTMLInputElement>(null)
+  const [inviteList, setInviteList] = useState<string[]>([])
+  const [invalidAddresses, setInvalidAddresses] = useState<string[]>([])
+  const [lacksMintAuthority, setLackMintAuthority] = useState(false)
+
+  const schema = yup.object(InviteMembersSchema)
+  const {
+    setValue,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm({
+    mode: 'all',
+    resolver: yupResolver(schema),
+    context: formData,
+  })
+
+  useEffect(() => {
+    if (typeof formData.addCouncil === 'undefined' || formData?.addCouncil) {
+      updateUserInput(formData, InviteMembersSchema, setValue)
+      if (
+        formData.useExistingCouncilToken &&
+        formData.councilTokenInfo?.mint?.mintAuthority?.toBase58() !==
+          userAddress
+      ) {
+        setLackMintAuthority(true)
+        setInviteList([])
+        setInvalidAddresses([])
+      } else {
+        setLackMintAuthority(false)
+        setInviteList(
+          (current) =>
+            formData.memberAddresses?.filter((wallet) => {
+              return validateSolAddress(wallet)
+            }) || current
+        )
+      }
+    } else if (visible) {
+      // go to next step:
+      serializeValues({ memberAddresses: null })
+    }
+  }, [formData])
+
+  useEffect(() => {
+    setValue('memberAddresses', splitUniques(inviteList).unique, {
+      shouldValidate: true,
+      shouldDirty: true,
+    })
+  }, [inviteList])
+
+  // The user can get to this screen without connecting their wallet. If they
+  // connect their wallet after being in a disconnected state, we want to
+  // populate the invite list with their wallet address.
+  useEffect(() => {
+    if (
+      userAddress &&
+      !inviteList.includes(userAddress) &&
+      !lacksMintAuthority
+    ) {
+      setInviteList((currentList) => currentList.concat(userAddress))
+    }
+  }, [userAddress])
+
+  function serializeValues(values) {
+    onSubmit({ step: currentStep, data: values })
+  }
+
+  function addToAddressList(textBlock: string) {
+    if (lacksMintAuthority) {
+      return
+    }
+
+    const { valid, invalid } = textToAddressList(textBlock)
+    const { unique, duplicate } = splitUniques(inviteList.concat(valid))
+    setInviteList(unique)
+    setInvalidAddresses((currentList) =>
+      currentList.concat(invalid).concat(duplicate)
+    )
+  }
+
+  function handleBlur(ev) {
+    addToAddressList(ev.currentTarget.value)
+    ev.currentTarget.value = ''
+  }
+
+  function handlePaste(ev: React.ClipboardEvent<HTMLInputElement>) {
+    addToAddressList(ev.clipboardData.getData('text'))
+    ev.clipboardData.clearData()
+    // Don't allow the paste event to populate the input field
+    ev.preventDefault()
+  }
+
+  function handleKeyDown(ev) {
+    if (ev.defaultPrevented) {
+      return // Do nothing if the event was already processed
+    }
+
+    if (ev.key === 'Enter') {
+      addToAddressList(ev.currentTarget.value)
+      ev.currentTarget.value = ''
+      ev.preventDefault()
+    }
+  }
+
+  function removeAddressFromInviteList(address) {
+    const newList = inviteList.slice()
+    const index = inviteList.indexOf(address)
+    if (index > -1) {
+      newList.splice(index, 1)
+      setInviteList(newList)
+    }
+  }
+
+  function removeAddressFromInvalidList(address) {
+    const newList = invalidAddresses.slice()
+    const index = invalidAddresses.indexOf(address)
+    if (index > -1) {
+      newList.splice(index, 1)
+      setInvalidAddresses(newList)
+    }
+  }
+
+  const error =
+    errors.daoName?.message ||
+    (invalidAddresses.length > 0
+      ? 'Invalid and duplicate addresses will not be included'
+      : '')
+
+  return (
+    <form
+      onSubmit={handleSubmit(serializeValues)}
+      data-testid="invite-members-form"
+    >
+      <FormHeader
+        type={type}
+        currentStep={currentStep}
+        totalSteps={totalSteps}
+        title={`Next, invite${
+          type === MULTISIG_FORM ? ' ' : ' council '
+        }members with their Solana Wallet Address.`}
+      />
+      <div className="mt-24 space-y-10 md:space-y-12">
+        <FormField
+          description="Add Solana wallet addressses, separated by a comma or line-break."
+          disabled={lacksMintAuthority}
+          title="Invite members"
+          titleExtra={
+            !!inviteList.length && (
+              <div className="text-[18px] text-bkg-1 leading-[25px] px-2 bg-fgd-1 rounded">
+                {inviteList.length}
+              </div>
+            )
+          }
+        >
+          {(inviteList.length > 0 || invalidAddresses.length > 0) && (
+            <div className="py-5 space-y-5">
+              {inviteList.map((address, index) => (
+                <InviteAddress
+                  key={address}
+                  address={address}
+                  currentUser={address === userAddress}
+                  index={index + 1}
+                  onRemoveClick={() => removeAddressFromInviteList(address)}
+                />
+              ))}
+              {invalidAddresses.map((address, index) => (
+                <InviteAddress
+                  invalid
+                  key={address + index}
+                  address={address}
+                  index={index + 1}
+                  onRemoveClick={() => removeAddressFromInvalidList(address)}
+                />
+              ))}
+            </div>
+          )}
+          <Input
+            type="text"
+            name="memberAddresses"
+            placeholder="e.g. CWvWQWt5mTv7Zx..."
+            data-testid="dao-member-list-input"
+            disabled={lacksMintAuthority}
+            ref={inputElement}
+            error={error}
+            warning={
+              lacksMintAuthority
+                ? 'You do not own the mint authority for this token, therefore you cannot invite members to your DAO. Anyone who owns the token is able to join your DAO as a council member.'
+                : undefined
+            }
+            onBlur={handleBlur}
+            onPaste={handlePaste}
+            onKeyDown={handleKeyDown}
+          />
+        </FormField>
+      </div>
+      <FormFooter
+        isValid={isValid || lacksMintAuthority}
+        prevClickHandler={() => onPrevClick(currentStep)}
+      />
+    </form>
+  )
+}
diff --git a/components/NewRealmWizard/components/steps/YesVotePercentageThresholdForm.tsx b/components/NewRealmWizard/components/steps/YesVotePercentageThresholdForm.tsx
new file mode 100644
index 0000000000..8cc37e0293
--- /dev/null
+++ b/components/NewRealmWizard/components/steps/YesVotePercentageThresholdForm.tsx
@@ -0,0 +1,175 @@
+import { useEffect } from 'react'
+import { useForm, Controller } from 'react-hook-form'
+import { yupResolver } from '@hookform/resolvers/yup'
+import * as yup from 'yup'
+
+import FormHeader from '@components/NewRealmWizard/components/FormHeader'
+import FormField from '@components/NewRealmWizard/components/FormField'
+import FormFooter from '@components/NewRealmWizard/components/FormFooter'
+import { InputRangeSlider } from '@components/NewRealmWizard/components/Input'
+import Text from '@components/Text'
+import AdviceBox from '@components/NewRealmWizard/components/AdviceBox'
+
+import { updateUserInput } from '@utils/formValidation'
+import { FORM_NAME as MUTISIG_FORM } from 'pages/realms/new/multisig'
+
+export const CommunityYesVotePercentageSchema = {
+  communityYesVotePercentage: yup
+    .number()
+    .transform((value) => (isNaN(value) ? 0 : value))
+    .max(100, 'Approval cannot require more than 100% of votes')
+    .min(1, 'Approval must be at least 1% of votes')
+    .required('Required'),
+}
+
+export interface CommunityYesVotePercentage {
+  communityYesVotePercentage: number
+}
+
+export const CouncilYesVotePercentageSchema = {
+  councilYesVotePercentage: yup
+    .number()
+    .transform((value) => (isNaN(value) ? 0 : value))
+    .max(100, 'Approval cannot require more than 100% of votes')
+    .when('$memberAddresses', (memberAddresses, schema) => {
+      if (memberAddresses) {
+        return schema
+          .min(1, 'Quorum must be at least 1% of member')
+          .required('Required')
+      } else {
+        return schema.min(1, 'Quorum must be at least 1% of member')
+      }
+    }),
+}
+
+export interface CouncilYesVotePercentage {
+  councilYesVotePercentage: number
+}
+
+export default function YesVotePercentageForm({
+  type,
+  formData,
+  currentStep,
+  totalSteps,
+  forCouncil = false,
+  forCommunity = false,
+  onSubmit,
+  onPrevClick,
+}) {
+  const schema = yup
+    .object(
+      forCommunity
+        ? CommunityYesVotePercentageSchema
+        : CouncilYesVotePercentageSchema
+    )
+    .required()
+  const {
+    control,
+    setValue,
+    handleSubmit,
+    watch,
+    formState: { isValid },
+  } = useForm({
+    mode: 'all',
+    resolver: yupResolver(schema),
+    context: formData,
+  })
+  const fieldName = forCommunity
+    ? 'communityYesVotePercentage'
+    : forCouncil
+    ? 'councilYesVotePercentage'
+    : 'yesVotePercentage'
+  const yesVotePercentage = watch(fieldName) || 0
+
+  useEffect(() => {
+    updateUserInput(
+      formData,
+      forCommunity
+        ? CommunityYesVotePercentageSchema
+        : CouncilYesVotePercentageSchema,
+      setValue
+    )
+  }, [])
+
+  function serializeValues(values) {
+    onSubmit({ step: currentStep, data: values })
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit(serializeValues)}
+      data-testid="yes-vote-percentage-threshold-form"
+    >
+      <FormHeader
+        type={type}
+        currentStep={currentStep}
+        totalSteps={totalSteps}
+        title={`Next, set your ${
+          forCommunity ? "DAO's" : "wallet's"
+        } approval threshold.`}
+      />
+      <div className="mt-16 space-y-10 md:space-y-12">
+        <Controller
+          name={fieldName}
+          control={control}
+          defaultValue={60}
+          render={({ field, fieldState: { error } }) => (
+            <FormField
+              title={
+                forCommunity
+                  ? 'Adjust how much of the community token supply is needed to pass a proposal'
+                  : 'Adjust the percentage to determine votes needed to pass a proposal'
+              }
+              description=""
+            >
+              <InputRangeSlider
+                field={field}
+                error={error?.message}
+                placeholder="60"
+              />
+            </FormField>
+          )}
+        />
+      </div>
+      <AdviceBox
+        title={
+          forCommunity
+            ? 'Approval percentage'
+            : forCouncil
+            ? 'Member percentage'
+            : 'Yes vote percentage'
+        }
+        icon={<img src="/icons/threshold-icon.svg" alt="voting icon" />}
+      >
+        {forCommunity ? (
+          <Text level="1">
+            Typically, newer DAOs start their community approval quorums around
+            60% of total token supply.
+          </Text>
+        ) : forCouncil && formData?.memberAddresses?.length >= 0 ? (
+          <>
+            <Text level="1">
+              With {formData.memberAddresses.length} members added to your{' '}
+              {type === MUTISIG_FORM ? 'wallet' : 'DAO'},
+            </Text>
+            <Text level="1" className="md:pt-2">
+              {Math.ceil(
+                (yesVotePercentage * formData.memberAddresses.length) / 100
+              )}{' '}
+              members would need to approve a proposal for it to pass.
+            </Text>
+          </>
+        ) : (
+          <Text level="1">
+            Typically, newer DAOs start their approval percentage around 60%.
+          </Text>
+        )}
+      </AdviceBox>
+
+      <FormFooter
+        isValid={isValid}
+        prevClickHandler={() => onPrevClick(currentStep)}
+      />
+    </form>
+  )
+}
diff --git a/components/PageBodyContainer.tsx b/components/PageBodyContainer.tsx
index 5ee9368ea7..62296b9f20 100644
--- a/components/PageBodyContainer.tsx
+++ b/components/PageBodyContainer.tsx
@@ -1,15 +1,30 @@
-const PageBodyContainer = ({ children }) => (
-  <div className="grid min-h-screen grid-cols-12 gap-4 pt-4 pb-44">
-    <div className="z-[-1] fixed top-0 left-0 w-[100vw] h-[100vh] bg-[#292833]">
-      <picture>
-        <source srcSet="/img/bg-desktop.png" media="(min-width: 640px)" />
-        <img src="/img/bg-mobile.png" />
-      </picture>
-    </div>
-    <div className="col-span-12 px-4 md:px-8 xl:px-4 xl:col-start-2 xl:col-span-10">
-      {children}
-    </div>
-  </div>
-)
+import { useRouter } from 'next/router'
+import Footer from '@components/Footer'
+
+const PageBodyContainer = ({ children }) => {
+  const { pathname } = useRouter()
+  const isNewRealmsWizard = /\/realms\/new\/\w+/.test(pathname)
+
+  return (
+    <>
+      <div
+        className={`grid grid-cols-12 gap-4 pt-4 ${
+          isNewRealmsWizard ? '' : 'min-h-[calc(100vh_-_80px)] pb-44'
+        }`}
+      >
+        <div className="z-[-1] fixed top-0 left-0 w-[100vw] h-[100vh] bg-bkg-1">
+          <picture>
+            <source srcSet="/img/bg-desktop.png" media="(min-width: 640px)" />
+            <img src="/img/bg-mobile.png" />
+          </picture>
+        </div>
+        <div className="col-span-12 px-4 md:px-8 xl:px-4 xl:col-start-2 xl:col-span-10">
+          {children}
+        </div>
+      </div>
+      {isNewRealmsWizard ? <></> : <Footer />}
+    </>
+  )
+}
 
 export default PageBodyContainer
diff --git a/components/RealmWizard/RealmWizard.tsx b/components/RealmWizard/RealmWizard.tsx
index be0eca25d5..6e3240bc6c 100644
--- a/components/RealmWizard/RealmWizard.tsx
+++ b/components/RealmWizard/RealmWizard.tsx
@@ -36,13 +36,9 @@ import { useEffect } from 'react'
 import { CreateFormSchema } from './validators/createRealmValidator'
 import { formValidation, isFormValid } from '@utils/formValidation'
 import { registerRealm } from 'actions/registerRealm'
-import {
-  getGovernanceProgramVersion,
-  MintMaxVoteWeightSource,
-} from '@solana/spl-governance'
+import { getGovernanceProgramVersion } from '@solana/spl-governance'
 import Switch from '@components/Switch'
-import { BN } from '@project-serum/anchor'
-import BigNumber from 'bignumber.js'
+import { parseMintMaxVoteWeight } from '@tools/governance/units'
 
 enum LoaderMessage {
   CREATING_ARTIFACTS = 'Creating the DAO artifacts..',
@@ -152,23 +148,6 @@ const RealmWizard: React.FC = () => {
     })
   }
 
-  /**
-   * Get the mint max vote weight parsed to `MintMaxVoteWeightSource`
-   */
-  const getMintMaxVoteWeight = () => {
-    let value = MintMaxVoteWeightSource.FULL_SUPPLY_FRACTION.value
-    if (form.communityMintMaxVoteWeightSource) {
-      const fraction = new BigNumber(form.communityMintMaxVoteWeightSource)
-        .shiftedBy(MintMaxVoteWeightSource.SUPPLY_FRACTION_DECIMALS)
-        .toString()
-      value = new BN(fraction)
-    }
-
-    return new MintMaxVoteWeightSource({
-      value,
-    })
-  }
-
   /**
    * Get the array of wallets parsed into public keys or undefined if not eligible
    */
@@ -209,7 +188,7 @@ const RealmWizard: React.FC = () => {
             ? new PublicKey(form.communityMintId)
             : undefined,
           form.councilMintId ? new PublicKey(form.councilMintId) : undefined,
-          getMintMaxVoteWeight(),
+          parseMintMaxVoteWeight(form.communityMintMaxVoteWeightSource),
           form.minCommunityTokensToCreateGovernance!,
           form.yesThreshold,
           form.communityMintId ? form.transferAuthority : true,
@@ -415,10 +394,10 @@ const RealmWizard: React.FC = () => {
     >
       <div className="pointer">
         <a
-          className="flex items-center text-fgd-3 text-sm transition-all hover:text-fgd-1"
+          className="flex items-center text-sm transition-all text-fgd-3 hover:text-fgd-1"
           onClick={handleBackButtonClick}
         >
-          <ArrowLeftIcon className="h-4 w-4 mr-1 text-primary-light" />
+          <ArrowLeftIcon className="w-4 h-4 mr-1 text-primary-light" />
           Back
         </a>
       </div>
@@ -438,7 +417,7 @@ const RealmWizard: React.FC = () => {
             } pr-10 mr-3 mt-10`}
           >
             {ctl.getMode() === RealmWizardMode.BASIC && ctl.isLastStep() && (
-              <div className="flex justify-left items-center">
+              <div className="flex items-center justify-left">
                 <Switch
                   className="mt-2 mb-2"
                   checked={testRealmCheck}
diff --git a/components/Text.tsx b/components/Text.tsx
new file mode 100644
index 0000000000..9524e104b5
--- /dev/null
+++ b/components/Text.tsx
@@ -0,0 +1,21 @@
+import { createElement } from 'react'
+export default function Text({
+  level = '1',
+  className = '',
+  bold = false,
+  as = 'div',
+  children,
+}) {
+  let classNames = bold ? 'font-bold' : ''
+  if (level === '1') {
+    classNames += ` body-base`
+  } else if (level === '2') {
+    classNames += ` body-sm`
+  } else if (level === '3') {
+    classNames += ` body-xs`
+  }
+
+  classNames += ` ${className}`
+
+  return createElement(as, { className: classNames }, children)
+}
diff --git a/components/TokenBalance/NftBalanceCard.tsx b/components/TokenBalance/NftBalanceCard.tsx
index 8f7c099ff7..23a52c5dc9 100644
--- a/components/TokenBalance/NftBalanceCard.tsx
+++ b/components/TokenBalance/NftBalanceCard.tsx
@@ -99,7 +99,7 @@ const NftBalanceCard = () => {
     }
   }, [realm?.pubkey.toBase58(), wallet?.connected])
   return (
-    <div className="bg-bkg-2 p-4 md:p-6 rounded-lg">
+    <div className="p-4 rounded-lg bg-bkg-2 md:p-6">
       <div className="flex items-center justify-between mb-4">
         <h3 className="mb-0">Your NFTS</h3>
         <Link
@@ -115,13 +115,13 @@ const NftBalanceCard = () => {
             }`}
           >
             View
-            <ChevronRightIcon className="flex-shrink-0 h-6 w-6" />
+            <ChevronRightIcon className="flex-shrink-0 w-6 h-6" />
           </a>
         </Link>
       </div>
       <div className="space-y-4">
         {!connected ? (
-          <div className="text-xs bg-bkg-3 p-3">Please connect your wallet</div>
+          <div className="p-3 text-xs bg-bkg-3">Please connect your wallet</div>
         ) : !isLoading ? (
           <NFTSelector
             onNftSelect={() => {
diff --git a/package.json b/package.json
index 27056c6a37..14737dea91 100644
--- a/package.json
+++ b/package.json
@@ -34,8 +34,9 @@
     "@emotion/styled": "^11.8.1",
     "@foresight-tmp/foresight-sdk": "^0.1.46",
     "@friktion-labs/friktion-sdk": "^1.1.118",
-    "@headlessui/react": "^1.6.0",
+    "@headlessui/react": "^1.6.4",
     "@heroicons/react": "^1.0.1",
+    "@hookform/resolvers": "^2.8.10",
     "@marinade.finance/marinade-ts-sdk": "^2.0.9",
     "@metaplex-foundation/mpl-token-metadata": "^1.2.5",
     "@mithraic-labs/serum-remote": "^0.0.1-rc.16",
@@ -81,6 +82,7 @@
     "react": "^18.1.0",
     "react-dom": "^18.0.0",
     "react-headless-pagination": "^0.1.0",
+    "react-hook-form": "^7.31.3",
     "react-markdown": "^7.0.0",
     "react-portal": "^4.2.2",
     "remark-gfm": "^3.0.1",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 9d321cbff7..358bf64088 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -2,6 +2,7 @@ import { ThemeProvider } from 'next-themes'
 import '@dialectlabs/react-ui/index.css'
 // import '../styles/ambit-font.css'
 import '../styles/index.css'
+import '../styles/typography.css'
 import useWallet from '../hooks/useWallet'
 import NavBar from '../components/NavBar'
 import PageBodyContainer from '../components/PageBodyContainer'
@@ -9,7 +10,6 @@ import useHydrateStore from '../hooks/useHydrateStore'
 import useRealm from '../hooks/useRealm'
 import { getResourcePathPart } from '../tools/core/resources'
 import handleRouterHistory from '@hooks/handleRouterHistory'
-import Footer from '@components/Footer'
 import { useEffect } from 'react'
 import useDepositStore from 'VoteStakeRegistry/stores/useDepositStore'
 import useWalletStore from 'stores/useWalletStore'
@@ -28,6 +28,7 @@ import TransactionLoader from '@components/TransactionLoader'
 
 import dynamic from 'next/dynamic'
 import Head from 'next/head'
+
 const Notifications = dynamic(() => import('../components/Notification'), {
   ssr: false,
 })
@@ -205,7 +206,6 @@ function App({ Component, pageProps }) {
           </WalletIdentityProvider>
         </ThemeProvider>
       </ErrorBoundary>
-      <Footer />
     </div>
   )
 }
diff --git a/pages/dao/[symbol]/params/GovernanceConfigModal.tsx b/pages/dao/[symbol]/params/GovernanceConfigModal.tsx
index cf99c60ebc..a36e9e38b1 100644
--- a/pages/dao/[symbol]/params/GovernanceConfigModal.tsx
+++ b/pages/dao/[symbol]/params/GovernanceConfigModal.tsx
@@ -29,6 +29,7 @@ import {
 } from '@tools/sdk/units'
 import { abbreviateAddress } from '@utils/formatting'
 import * as yup from 'yup'
+import { MAX_TOKENS_TO_DISABLE } from '@tools/constants'
 
 interface GovernanceConfigForm extends BaseGovernanceFormFields {
   title: string
@@ -58,10 +59,12 @@ const GovernanceConfigModal = ({
     title: '',
     description: '',
     minCommunityTokensToCreateProposal: mint
-      ? getMintDecimalAmountFromNatural(
-          mint,
-          config?.minCommunityTokensToCreateProposal
-        ).toNumber()
+      ? MAX_TOKENS_TO_DISABLE.eq(config?.minCommunityTokensToCreateProposal)
+        ? MAX_TOKENS_TO_DISABLE.toString()
+        : getMintDecimalAmountFromNatural(
+            mint,
+            config?.minCommunityTokensToCreateProposal
+          ).toNumber()
       : 0,
     minInstructionHoldUpTime: getDaysFromTimestamp(
       config?.minInstructionHoldUpTime
@@ -128,8 +131,8 @@ const GovernanceConfigModal = ({
       onClose={closeProposalModal}
       isOpen={isProposalModalOpen}
     >
-      <div className="space-y-4 w-full">
-        <h3 className="mb-4 flex flex-col">
+      <div className="w-full space-y-4">
+        <h3 className="flex flex-col mb-4">
           Change Governance Config:{' '}
           {governance && abbreviateAddress(governance.pubkey)}
         </h3>
@@ -172,7 +175,7 @@ const GovernanceConfigModal = ({
           setFormErrors={setFormErrors}
         ></BaseGovernanceForm>
       </div>
-      <div className="border-t border-fgd-4 flex justify-end mt-6 pt-6 space-x-4">
+      <div className="flex justify-end pt-6 mt-6 space-x-4 border-t border-fgd-4">
         <Button
           isLoading={creatingProposal}
           disabled={creatingProposal}
diff --git a/pages/dao/[symbol]/params/components/ParamsView.tsx b/pages/dao/[symbol]/params/components/ParamsView.tsx
index 6ea6a230cf..e33830f016 100644
--- a/pages/dao/[symbol]/params/components/ParamsView.tsx
+++ b/pages/dao/[symbol]/params/components/ParamsView.tsx
@@ -1,5 +1,6 @@
 import useRealm from '@hooks/useRealm'
 import { fmtMintAmount } from '@tools/sdk/units'
+import { MAX_TOKENS_TO_DISABLE } from '@tools/constants'
 import {
   getFormattedStringFromDays,
   SECS_PER_DAY,
@@ -14,6 +15,19 @@ const ParamsView = ({ activeGovernance, openGovernanceProposalModal }) => {
   const realmAccount = realm?.account
   const communityMint = realmAccount?.communityMint.toBase58()
 
+  const minCommunityTokensToCreateProposal = activeGovernance?.account?.config
+    ?.minCommunityTokensToCreateProposal
+    ? mint &&
+      MAX_TOKENS_TO_DISABLE.eq(
+        activeGovernance.account.config.minCommunityTokensToCreateProposal
+      )
+      ? 'Disabled'
+      : fmtMintAmount(
+          mint,
+          activeGovernance?.account?.config?.minCommunityTokensToCreateProposal
+        )
+    : 'calculating...'
+
   return (
     <>
       {activeGovernance && (
@@ -33,11 +47,7 @@ const ParamsView = ({ activeGovernance, openGovernanceProposalModal }) => {
             <AddressField
               label="Min community tokens to create a proposal"
               padding
-              val={fmtMintAmount(
-                mint,
-                activeGovernance.account.config
-                  .minCommunityTokensToCreateProposal
-              )}
+              val={minCommunityTokensToCreateProposal}
             />
           )}
           {councilMint && (
diff --git a/pages/dao/[symbol]/params/index.tsx b/pages/dao/[symbol]/params/index.tsx
index ddc17ed050..13253e800a 100644
--- a/pages/dao/[symbol]/params/index.tsx
+++ b/pages/dao/[symbol]/params/index.tsx
@@ -3,6 +3,7 @@ import GovernedAccountsTabs from '@components/GovernedAccountsTabs'
 import PreviousRouteBtn from '@components/PreviousRouteBtn'
 import useRealm from '@hooks/useRealm'
 import { fmtMintAmount } from '@tools/sdk/units'
+import { MAX_TOKENS_TO_DISABLE } from '@tools/constants'
 import { capitalize } from '@utils/helpers'
 import useGovernanceAssetsStore from 'stores/useGovernanceAssetsStore'
 import Tabs from '@components/Tabs'
@@ -78,6 +79,12 @@ const Params = () => {
   const getYesNoString = (val) => {
     return val ? ' Yes' : ' No'
   }
+  const minCommunityTokensToCreateGovernance =
+    realmConfig &&
+    MAX_TOKENS_TO_DISABLE.eq(realmConfig.minCommunityTokensToCreateGovernance)
+      ? 'Disabled'
+      : realmConfig?.minCommunityTokensToCreateGovernance &&
+        fmtMintAmount(mint, realmConfig.minCommunityTokensToCreateGovernance)
 
   useEffect(() => {
     if (governancesArray.length > 0) {
@@ -106,19 +113,19 @@ const Params = () => {
           closeModal={closeSetRealmAuthorityModal}
         ></SetRealmAuthorityModal>
       )}
-      <div className="bg-bkg-2 rounded-lg p-4 md:p-6 col-span-12">
+      <div className="col-span-12 p-4 rounded-lg bg-bkg-2 md:p-6">
         <div className="mb-4">
           <PreviousRouteBtn />
         </div>
         <div className="flex items-center justify-between mb-6">
-          <h1 className="leading-none mb-0">
+          <h1 className="mb-0 leading-none">
             {realmAccount?.name} DAO Parameters
           </h1>
         </div>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-6 pb-6">
+        <div className="grid grid-cols-1 gap-4 pb-6 lg:grid-cols-2 lg:gap-6">
           {activeGovernance ? (
             <>
-              <div className="border border-fgd-4 col-span-1 p-4 rounded-md">
+              <div className="col-span-1 p-4 border rounded-md border-fgd-4">
                 <h2>Addresses</h2>
                 <AddressField
                   padding
@@ -163,7 +170,7 @@ const Params = () => {
                   )}
                 </div>
               </div>
-              <div className="border border-fgd-4 col-span-1 p-4 rounded-md">
+              <div className="col-span-1 p-4 border rounded-md border-fgd-4">
                 <h2 className="flex items-center">Config </h2>
                 {communityMintMaxVoteWeightSource && (
                   <AddressField
@@ -175,13 +182,7 @@ const Params = () => {
                 <AddressField
                   padding
                   label="Min community tokens to create governance"
-                  val={
-                    realmConfig &&
-                    fmtMintAmount(
-                      mint,
-                      realmConfig!.minCommunityTokensToCreateGovernance
-                    )
-                  }
+                  val={minCommunityTokensToCreateGovernance}
                 />
                 <AddressField
                   padding
@@ -219,14 +220,14 @@ const Params = () => {
             </>
           ) : (
             <>
-              <div className="animate-pulse bg-bkg-3 h-48 rounded-md w-full" />
-              <div className="animate-pulse bg-bkg-3 h-48 rounded-md w-full" />
+              <div className="w-full h-48 rounded-md animate-pulse bg-bkg-3" />
+              <div className="w-full h-48 rounded-md animate-pulse bg-bkg-3" />
             </>
           )}
         </div>
         {!loadGovernedAccounts ? (
           <>
-            <div className="border border-fgd-4 grid grid-cols-12 gap-4 lg:gap-6 p-6 rounded-md mb-6">
+            <div className="grid grid-cols-12 gap-4 p-6 mb-6 border rounded-md border-fgd-4 lg:gap-6">
               <div className="col-span-12 lg:hidden">
                 <Select
                   className="break-all"
@@ -263,7 +264,7 @@ const Params = () => {
               </div>
               {activeGovernance ? (
                 <div className="col-span-12 lg:col-span-8">
-                  <h3 className="break-all mb-4">
+                  <h3 className="mb-4 break-all">
                     {activeGovernance.pubkey.toBase58()}
                   </h3>
                   {assetAccounts.filter(
@@ -296,7 +297,7 @@ const Params = () => {
               ) : null}
             </div>
             {auxiliaryTokenAccounts.length !== 0 && (
-              <div className="border border-fgd-4 gap-4 rounded-md p-6">
+              <div className="gap-4 p-6 border rounded-md border-fgd-4">
                 <div className="max-w-lg">
                   <h2 className="flex items-center">Auxiliary Accounts </h2>
                   <AccountsView
@@ -309,7 +310,7 @@ const Params = () => {
             )}
           </>
         ) : (
-          <div className="animate-pulse bg-bkg-3 h-48 rounded-lg w-full" />
+          <div className="w-full h-48 rounded-lg animate-pulse bg-bkg-3" />
         )}
       </div>
     </div>
diff --git a/pages/dao/[symbol]/proposal/components/forms/RealmConfigFormComponent.tsx b/pages/dao/[symbol]/proposal/components/forms/RealmConfigFormComponent.tsx
index 6e9cd148af..b673c1b095 100644
--- a/pages/dao/[symbol]/proposal/components/forms/RealmConfigFormComponent.tsx
+++ b/pages/dao/[symbol]/proposal/components/forms/RealmConfigFormComponent.tsx
@@ -15,6 +15,7 @@ import InstructionForm, {
   InstructionInput,
   InstructionInputType,
 } from '../instructions/FormCreator'
+import { MAX_TOKENS_TO_DISABLE } from '@tools/constants'
 
 export interface RealmConfigForm {
   governedAccount: AssetAccount | undefined
@@ -47,10 +48,14 @@ const RealmConfigFormComponent = ({
   const minCommunity = mint ? getMintMinAmountAsDecimal(mint) : 0
   const minCommunityTokensToCreateProposal =
     realm && mint
-      ? getMintDecimalAmount(
-          mint,
+      ? MAX_TOKENS_TO_DISABLE.eq(
           realm.account.config.minCommunityTokensToCreateGovernance
         )
+        ? MAX_TOKENS_TO_DISABLE
+        : getMintDecimalAmount(
+            mint,
+            realm.account.config.minCommunityTokensToCreateGovernance
+          )
       : new BigNumber(0)
 
   const currentPrecision = precision(minCommunity)
diff --git a/pages/realms/components/RealmsDashboard.tsx b/pages/realms/components/RealmsDashboard.tsx
index 788f1a84ca..aa773f5418 100644
--- a/pages/realms/components/RealmsDashboard.tsx
+++ b/pages/realms/components/RealmsDashboard.tsx
@@ -33,26 +33,26 @@ export default function RealmsDashboard({
   ])
 
   return isLoading ? (
-    <div className="grid grid-flow-row grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
-      <div className="animate-pulse bg-bkg-3 col-span-1 h-44 rounded-lg" />
-      <div className="animate-pulse bg-bkg-3 col-span-1 h-44 rounded-lg" />
-      <div className="animate-pulse bg-bkg-3 col-span-1 h-44 rounded-lg" />
-      <div className="animate-pulse bg-bkg-3 col-span-1 h-44 rounded-lg" />
-      <div className="animate-pulse bg-bkg-3 col-span-1 h-44 rounded-lg" />
-      <div className="animate-pulse bg-bkg-3 col-span-1 h-44 rounded-lg" />
-      <div className="animate-pulse bg-bkg-3 col-span-1 h-44 rounded-lg" />
-      <div className="animate-pulse bg-bkg-3 col-span-1 h-44 rounded-lg" />
-      <div className="animate-pulse bg-bkg-3 col-span-1 h-44 rounded-lg" />
-      <div className="animate-pulse bg-bkg-3 col-span-1 h-44 rounded-lg" />
+    <div className="grid grid-flow-row grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-5">
+      <div className="col-span-1 rounded-lg animate-pulse bg-bkg-2 h-44" />
+      <div className="col-span-1 rounded-lg animate-pulse bg-bkg-2 h-44" />
+      <div className="col-span-1 rounded-lg animate-pulse bg-bkg-2 h-44" />
+      <div className="col-span-1 rounded-lg animate-pulse bg-bkg-2 h-44" />
+      <div className="col-span-1 rounded-lg animate-pulse bg-bkg-2 h-44" />
+      <div className="col-span-1 rounded-lg animate-pulse bg-bkg-2 h-44" />
+      <div className="col-span-1 rounded-lg animate-pulse bg-bkg-2 h-44" />
+      <div className="col-span-1 rounded-lg animate-pulse bg-bkg-2 h-44" />
+      <div className="col-span-1 rounded-lg animate-pulse bg-bkg-2 h-44" />
+      <div className="col-span-1 rounded-lg animate-pulse bg-bkg-2 h-44" />
     </div>
   ) : (
     <>
-      <div className="grid grid-flow-row grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
+      <div className="grid grid-flow-row grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-5">
         {certifiedRealms?.length > 0 ? (
           certifiedRealms.map((realm: RealmInfo) => (
             <div
               onClick={() => goToRealm(realm)}
-              className="bg-bkg-2 cursor-pointer default-transition flex flex-col items-center justify-center p-8 rounded-lg hover:bg-bkg-3"
+              className="flex flex-col items-center justify-center p-8 rounded-lg cursor-pointer bg-bkg-2 default-transition hover:bg-bkg-3"
               key={realm.realmId.toString()}
             >
               <div className="pb-5">
@@ -84,19 +84,19 @@ export default function RealmsDashboard({
             </div>
           ))
         ) : (
-          <div className="bg-bkg-2 col-span-5 p-8 rounded-lg text-center">
+          <div className="col-span-5 p-8 text-center rounded-lg bg-bkg-2">
             <p>No results</p>
           </div>
         )}
       </div>
       <div className="pt-12">
         <h2 className="mb-4">Unchartered DAOs</h2>
-        <div className="grid grid-flow-row grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
+        <div className="grid grid-flow-row grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-5">
           {unchartedRealms?.length > 0 ? (
             unchartedRealms.map((realm: RealmInfo) => (
               <div
                 onClick={() => goToRealm(realm)}
-                className="bg-bkg-2 cursor-pointer default-transition flex flex-col items-center justify-center p-8 rounded-lg hover:bg-bkg-3"
+                className="flex flex-col items-center justify-center p-8 rounded-lg cursor-pointer bg-bkg-2 default-transition hover:bg-bkg-3"
                 key={realm.realmId.toString()}
               >
                 <div className="pb-5">
@@ -116,7 +116,7 @@ export default function RealmsDashboard({
               </div>
             ))
           ) : (
-            <div className="bg-bkg-2 col-span-5 p-8 rounded-lg text-center">
+            <div className="col-span-5 p-8 text-center rounded-lg bg-bkg-2">
               <p>No results</p>
             </div>
           )}
diff --git a/pages/realms/index.tsx b/pages/realms/index.tsx
index f6d58e95d7..db2dae2861 100644
--- a/pages/realms/index.tsx
+++ b/pages/realms/index.tsx
@@ -85,8 +85,8 @@ const Realms = () => {
   }
   return (
     <div>
-      <div className="flex items-center justify-between mb-6 w-full">
-        <h1 className="mb-0">DAOs</h1>
+      <div className="flex flex-wrap items-center justify-between w-full mb-6">
+        <h1 className="mb-4 sm:mb-0">DAOs</h1>
         <div className="flex space-x-4">
           <Input
             className="pl-8"
@@ -94,7 +94,7 @@ const Realms = () => {
             type="text"
             onChange={(e) => filterDaos(e.target.value)}
             placeholder={`Search DAOs...`}
-            prefix={<SearchIcon className="h-5 w-5 text-fgd-3" />}
+            prefix={<SearchIcon className="w-5 h-5 text-fgd-3" />}
           />
           <Button
             className="whitespace-nowrap"
diff --git a/pages/realms/new.tsx b/pages/realms/new.tsx
index e759f307aa..2dab193458 100644
--- a/pages/realms/new.tsx
+++ b/pages/realms/new.tsx
@@ -1,16 +1,70 @@
 import React from 'react'
-import RealmWizard from '@components/RealmWizard/RealmWizard'
+import Link from 'next/link'
+import Head from 'next/head'
+import useQueryContext from '@hooks/useQueryContext'
+
+import Header from '@components/Header'
+import Text from '@components/Text'
 
 const New: React.FC = () => {
-  const isLoading = false
+  const { fmtUrlWithCluster } = useQueryContext()
+  const DAO_TYPES = [
+    {
+      url: '/realms/new/multisig',
+      name: 'Multi-Signature Wallet',
+      description:
+        'A "multisig" is a shared wallet, typically with two or more members authorizing transactions.',
+    },
+    {
+      url: '/realms/new/nft',
+      name: 'NFT Community DAO',
+      description:
+        'NFT Community DAOs leverage NFTs as membership, giving NFT holders voting power to make decisions.',
+    },
+    {
+      url: '/realms/new/community-token',
+      name: 'Community Token DAO',
+      description:
+        'DAO members use a community token to denote their membership and allow them to vote on proposals.',
+    },
+  ]
   return (
-    <div
-      className={`bg-bkg-2 col-span-12 md:col-span-7 md:order-first lg:col-span-8 order-last p-4 md:p-6 rounded-lg space-y-3 ${
-        isLoading ? 'pointer-events-none' : ''
-      }`}
-    >
-      <RealmWizard />
-    </div>
+    <>
+      <Head>
+        <title>Create new DAO | Realms</title>
+      </Head>
+      <Header as="h2" className="mt-8 ">
+        What type of DAO <br />
+        would you like to create?
+      </Header>
+      <div className="pt-5 pb-4 mx-auto mt-8 rounded lg:mt-16">
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
+          {DAO_TYPES.map(({ url, name, description }) => (
+            <Link key={name} href={fmtUrlWithCluster(url)}>
+              <a className="flex flex-col items-start px-12 py-12 border rounded cursor-pointer border-bkg-2 hover:border hover:border-fgd-1 bg-bkg-3">
+                <Header as="h4" className="mb-6">
+                  {name}
+                </Header>
+                <Text level="2" className="text-left text-fgd-2">
+                  {description}
+                </Text>
+              </a>
+            </Link>
+          ))}
+        </div>
+        <div className="flex items-center justify-center px-4 mt-10 space-x-8">
+          <a
+            href="https://governance-docs.vercel.app/DAO-Management/createing-DAOs/DAO-wizard"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <div className="rounded px-3 py-1.5 hover:text-primary-dark default-transition cursor-pointer underline">
+              <span className="text-sm font-semibold">Tutorial Docs</span>
+            </div>
+          </a>
+        </div>
+      </div>
+    </>
   )
 }
 
diff --git a/pages/realms/new/community-token/index.tsx b/pages/realms/new/community-token/index.tsx
new file mode 100644
index 0000000000..4151a8dec4
--- /dev/null
+++ b/pages/realms/new/community-token/index.tsx
@@ -0,0 +1,143 @@
+import { useState } from 'react'
+import { useRouter } from 'next/router'
+
+import { PublicKey } from '@solana/web3.js'
+import useWalletStore from 'stores/useWalletStore'
+import createTokenizedRealm from 'actions/createTokenizedRealm'
+import useQueryContext from '@hooks/useQueryContext'
+
+import { DEFAULT_GOVERNANCE_PROGRAM_ID } from '@components/instructions/tools'
+
+import { notify } from '@utils/notifications'
+
+import FormPage from '@components/NewRealmWizard/PageTemplate'
+import BasicDetailsForm, {
+  BasicDetailsSchema,
+  BasicDetails,
+} from '@components/NewRealmWizard/components/steps/BasicDetailsForm'
+import CommunityTokenDetailsForm, {
+  CommunityTokenSchema,
+  CommunityToken,
+} from '@components/NewRealmWizard/components/steps/CommunityTokenDetailsForm'
+import YesVotePercentageForm, {
+  CommunityYesVotePercentageSchema,
+  CommunityYesVotePercentage,
+} from '@components/NewRealmWizard/components/steps/YesVotePercentageThresholdForm'
+import AddCouncilForm, {
+  AddCouncilSchema,
+  AddCouncil,
+} from '@components/NewRealmWizard/components/steps/AddCouncilForm'
+import InviteMembersForm, {
+  InviteMembersSchema,
+  InviteMembers,
+} from '@components/NewRealmWizard/components/steps/InviteMembersForm'
+
+export const FORM_NAME = 'tokenized'
+
+type CommunityTokenForm = BasicDetails &
+  CommunityToken &
+  CommunityYesVotePercentage &
+  AddCouncil &
+  InviteMembers
+
+export default function CommunityTokenWizard() {
+  const { connected, connection, current: wallet } = useWalletStore((s) => s)
+  const { push } = useRouter()
+  const { fmtUrlWithCluster } = useQueryContext()
+  const [requestPending, setRequestPending] = useState(false)
+  const steps = [
+    { Form: BasicDetailsForm, schema: BasicDetailsSchema, required: 'true' },
+    {
+      Form: CommunityTokenDetailsForm,
+      schema: CommunityTokenSchema,
+      required: 'true',
+    },
+    {
+      Form: YesVotePercentageForm,
+      schema: CommunityYesVotePercentageSchema,
+      required: 'true',
+      forCommunity: true,
+    },
+    { Form: AddCouncilForm, schema: AddCouncilSchema, required: 'true' },
+    {
+      Form: InviteMembersForm,
+      schema: InviteMembersSchema,
+      required: 'form.addCouncil',
+    },
+    // {
+    //   Form: YesVotePercentageForm,
+    //   schema: CouncilYesVotePercentageSchema,
+    //   required: 'true',
+    //   forCouncil: true,
+    // },
+  ]
+
+  async function handleSubmit(formData: CommunityTokenForm) {
+    console.log('submit clicked')
+    setRequestPending(true)
+    try {
+      console.log('connection', connected, wallet)
+      if (!connected) {
+        if (wallet) await wallet.connect()
+      }
+      if (!wallet?.publicKey) {
+        throw new Error('No valid wallet connected')
+      }
+
+      const programIdAddress =
+        formData?.programId || DEFAULT_GOVERNANCE_PROGRAM_ID
+
+      const results = await createTokenizedRealm({
+        wallet,
+        connection: connection.current,
+        programIdAddress,
+        realmName: formData.name,
+        // COMMUNITY INFO
+        tokensToGovernThreshold:
+          formData.minimumNumberOfCommunityTokensToGovern,
+        communityMintSupplyFactor: formData.communityMintSupplyFactor,
+        communityYesVotePercentage: formData.communityYesVotePercentage,
+        existingCommunityMintPk: formData.communityTokenMintAddress
+          ? new PublicKey(formData.communityTokenMintAddress)
+          : undefined,
+        transferCommunityMintAuthority: formData.transferCommunityMintAuthority,
+        // COUNCIL INFO
+        createCouncil: formData.addCouncil,
+        // councilVotePercentage: formData.communityYesVotePercentage,
+        existingCouncilMintPk: formData.councilTokenMintAddress
+          ? new PublicKey(formData.councilTokenMintAddress)
+          : undefined,
+        transferCouncilMintAuthority: formData.transferCouncilMintAuthority,
+        councilWalletPks:
+          formData?.memberAddresses?.map((w) => new PublicKey(w)) || [],
+      })
+
+      if (results) {
+        push(
+          fmtUrlWithCluster(`/dao/${results.realmPk.toBase58()}`),
+          undefined,
+          { shallow: true }
+        )
+      } else {
+        throw new Error('Something bad happened during this request.')
+      }
+    } catch (error) {
+      setRequestPending(false)
+      const err = error as Error
+      console.log(error)
+      return notify({
+        type: 'error',
+        message: err.message,
+      })
+    }
+  }
+
+  return (
+    <FormPage
+      type={FORM_NAME}
+      steps={steps}
+      handleSubmit={handleSubmit}
+      submissionPending={requestPending}
+    />
+  )
+}
diff --git a/pages/realms/new/multisig/index.tsx b/pages/realms/new/multisig/index.tsx
new file mode 100644
index 0000000000..416778e237
--- /dev/null
+++ b/pages/realms/new/multisig/index.tsx
@@ -0,0 +1,103 @@
+import { useState } from 'react'
+import { useRouter } from 'next/router'
+import { PublicKey } from '@solana/web3.js'
+
+import useWalletStore from 'stores/useWalletStore'
+import createMultisigWallet from 'actions/createMultisigWallet'
+
+import useQueryContext from '@hooks/useQueryContext'
+
+import { notify } from '@utils/notifications'
+
+import { DEFAULT_GOVERNANCE_PROGRAM_ID } from '@components/instructions/tools'
+
+import BasicDetailsForm, {
+  BasicDetailsSchema,
+  BasicDetails,
+} from '@components/NewRealmWizard/components/steps/BasicDetailsForm'
+import InviteMembersForm, {
+  InviteMembersSchema,
+  InviteMembers,
+} from '@components/NewRealmWizard/components/steps/InviteMembersForm'
+import YesVotePercentageForm, {
+  CouncilYesVotePercentageSchema,
+  CouncilYesVotePercentage,
+} from '@components/NewRealmWizard/components/steps/YesVotePercentageThresholdForm'
+import FormPage from '@components/NewRealmWizard/PageTemplate'
+
+export const FORM_NAME = 'multisig'
+
+type MultisigForm = BasicDetails & InviteMembers & CouncilYesVotePercentage
+
+export default function MultiSigWizard() {
+  const { connected, connection, current: wallet } = useWalletStore((s) => s)
+  const { push } = useRouter()
+  const { fmtUrlWithCluster } = useQueryContext()
+  const [requestPending, setRequestPending] = useState(false)
+
+  const steps = [
+    { Form: BasicDetailsForm, schema: BasicDetailsSchema, required: 'true' },
+    { Form: InviteMembersForm, schema: InviteMembersSchema, required: 'true' },
+    {
+      Form: YesVotePercentageForm,
+      schema: CouncilYesVotePercentageSchema,
+      required: 'true',
+      forCouncil: true,
+    },
+  ]
+
+  async function handleSubmit(formData: MultisigForm) {
+    console.log('submit clicked')
+    setRequestPending(true)
+    try {
+      console.log('connection', connected, wallet)
+      if (!connected) {
+        if (wallet) await wallet.connect()
+      }
+      if (!wallet?.publicKey) {
+        throw new Error('No valid wallet connected')
+      }
+
+      const programIdAddress =
+        formData?.programId || DEFAULT_GOVERNANCE_PROGRAM_ID
+
+      const results = await createMultisigWallet({
+        wallet,
+        connection: connection.current,
+        programIdAddress,
+
+        realmName: formData.name,
+        councilYesVotePercentage: formData.councilYesVotePercentage,
+        councilWalletPks: formData.memberAddresses.map((w) => new PublicKey(w)),
+      })
+
+      if (results) {
+        push(
+          fmtUrlWithCluster(`/dao/${results.realmPk.toBase58()}`),
+          undefined,
+          { shallow: true }
+        )
+      } else {
+        throw new Error('Something bad happened during this request.')
+      }
+    } catch (error) {
+      setRequestPending(false)
+      const err = error as Error
+      console.log(error)
+      return notify({
+        type: 'error',
+        message: err.message,
+      })
+    }
+  }
+
+  return (
+    <FormPage
+      autoInviteWallet
+      type={FORM_NAME}
+      steps={steps}
+      handleSubmit={handleSubmit}
+      submissionPending={requestPending}
+    />
+  )
+}
diff --git a/pages/realms/new/nft/index.tsx b/pages/realms/new/nft/index.tsx
new file mode 100644
index 0000000000..7b4949d3f8
--- /dev/null
+++ b/pages/realms/new/nft/index.tsx
@@ -0,0 +1,125 @@
+import { useState } from 'react'
+import { useRouter } from 'next/router'
+import { PublicKey } from '@solana/web3.js'
+import createNFTRealm from 'actions/createNFTRealm'
+import { DEFAULT_GOVERNANCE_PROGRAM_ID } from '@components/instructions/tools'
+
+import useWalletStore from 'stores/useWalletStore'
+
+import useQueryContext from '@hooks/useQueryContext'
+
+import { notify } from '@utils/notifications'
+
+import BasicDetailsForm, {
+  BasicDetailsSchema,
+  BasicDetails,
+} from '@components/NewRealmWizard/components/steps/BasicDetailsForm'
+import AddNFTCollectionForm, {
+  AddNFTCollectionSchema,
+  AddNFTCollection,
+} from '@components/NewRealmWizard/components/steps/AddNFTCollectionForm'
+import AddCouncilForm, {
+  AddCouncilSchema,
+  AddCouncil,
+} from '@components/NewRealmWizard/components/steps/AddCouncilForm'
+import InviteMembersForm, {
+  InviteMembersSchema,
+  InviteMembers,
+} from '@components/NewRealmWizard/components/steps/InviteMembersForm'
+
+import FormPage from '@components/NewRealmWizard/PageTemplate'
+
+export const FORM_NAME = 'nft'
+
+type NFTForm = BasicDetails & AddNFTCollection & AddCouncil & InviteMembers
+
+export default function NFTWizard() {
+  const { connected, connection, current: wallet } = useWalletStore((s) => s)
+  const { push } = useRouter()
+  const { fmtUrlWithCluster } = useQueryContext()
+  const [requestPending, setRequestPending] = useState(false)
+
+  const steps = [
+    { Form: BasicDetailsForm, schema: BasicDetailsSchema, required: 'true' },
+    {
+      Form: AddNFTCollectionForm,
+      schema: AddNFTCollectionSchema,
+      required: 'true',
+    },
+    { Form: AddCouncilForm, schema: AddCouncilSchema, required: 'true' },
+    {
+      Form: InviteMembersForm,
+      schema: InviteMembersSchema,
+      required: 'form.addCouncil',
+    },
+  ]
+
+  async function handleSubmit(formData: NFTForm) {
+    console.log('submit clicked')
+    setRequestPending(true)
+
+    try {
+      console.log('connection', connected)
+      if (!connected) {
+        if (wallet) await wallet.connect()
+      }
+      if (!wallet?.publicKey) {
+        throw new Error('No valid wallet connected')
+      }
+
+      const programIdAddress =
+        formData?.programId || DEFAULT_GOVERNANCE_PROGRAM_ID
+
+      const results = await createNFTRealm({
+        wallet,
+        connection: connection.current,
+        programIdAddress,
+
+        realmName: formData.name,
+        collectionAddress: formData.collectionKey,
+        collectionCount: formData.numberOfNFTs,
+        tokensToGovernThreshold: 1, // 1 NFT 1 vote
+
+        existingCommunityMintPk: undefined,
+        communityYesVotePercentage: formData.communityYesVotePercentage,
+
+        // COUNCIL INFO
+        createCouncil: formData.addCouncil,
+        // councilVotePercentage: formData.communityYesVotePercentage,
+        existingCouncilMintPk: formData.councilTokenMintAddress
+          ? new PublicKey(formData.councilTokenMintAddress)
+          : undefined,
+        transferCouncilMintAuthority: formData.transferCouncilMintAuthority,
+        councilWalletPks:
+          formData?.memberAddresses?.map((w) => new PublicKey(w)) || [],
+      })
+
+      if (results) {
+        push(
+          fmtUrlWithCluster(`/dao/${results.realmPk.toBase58()}`),
+          undefined,
+          { shallow: true }
+        )
+      } else {
+        throw new Error('Something bad happened during this request.')
+      }
+    } catch (error) {
+      setRequestPending(false)
+      const err = error as Error
+      console.log(error)
+      return notify({
+        type: 'error',
+        message: err.message,
+      })
+    }
+  }
+
+  return (
+    <FormPage
+      type={FORM_NAME}
+      steps={steps}
+      handleSubmit={handleSubmit}
+      submissionPending={requestPending}
+    />
+  )
+}
diff --git a/public/icons/council-icon.svg b/public/icons/council-icon.svg
new file mode 100644
index 0000000000..3f4bdda749
--- /dev/null
+++ b/public/icons/council-icon.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 7.625C14.9117 7.625 13.8159 8.01737 12.9901 8.81152C12.1596 9.61013 11.625 10.7929 11.625 12.3273C11.625 13.8369 11.9766 14.9931 12.6888 16.0524C13.3222 16.9946 14.2325 17.8465 15.386 18.8002C14.8428 19.1518 14.2014 19.4117 13.5053 19.646C13.2019 19.7482 12.8819 19.8471 12.557 19.9476C11.9852 20.1244 11.3986 20.3058 10.8625 20.517C10.4242 20.6898 9.99637 20.8902 9.60269 21.1401C9.5571 21.0695 9.48765 21.0138 9.40133 20.9863C8.73292 20.7741 8.11888 20.5611 7.61213 20.2493C8.43719 19.5485 9.09747 18.9103 9.56307 18.2041C10.1075 17.3784 10.375 16.4778 10.375 15.3091C10.375 14.1164 9.96704 13.189 9.32504 12.5595C8.68712 11.9341 7.84048 11.625 7 11.625C6.15952 11.625 5.31288 11.9341 4.67496 12.5595C4.03296 13.189 3.625 14.1164 3.625 15.3091C3.625 16.4778 3.89251 17.3784 4.43693 18.2041C4.90251 18.9103 5.56276 19.5484 6.38779 20.2492C6.01197 20.4803 5.57468 20.6589 5.09699 20.8229C4.87459 20.8992 4.63692 20.9742 4.39432 21.0507C3.96252 21.1869 3.51507 21.328 3.11018 21.4907C2.46068 21.7517 1.83137 22.0984 1.36728 22.6596C0.896023 23.2294 0.625 23.9833 0.625 25C0.625 25.2071 0.792893 25.375 1 25.375C1.20711 25.375 1.375 25.2071 1.375 25C1.375 24.1258 1.60398 23.5502 1.94522 23.1376C2.29363 22.7163 2.78932 22.4279 3.38982 22.1866C3.77346 22.0324 4.16527 21.9093 4.57347 21.781C4.82244 21.7027 5.07749 21.6225 5.34051 21.5322C5.91402 21.3354 6.49594 21.098 7.00004 20.7438C7.58673 21.1559 8.2835 21.4127 8.95464 21.6307C8.82544 21.7482 8.70293 21.8743 8.58833 22.0102C7.98041 22.7311 7.625 23.6906 7.625 25C7.625 25.2071 7.79289 25.375 8 25.375C8.20711 25.375 8.375 25.2071 8.375 25C8.375 23.8367 8.68626 23.0575 9.16168 22.4937C9.64493 21.9207 10.328 21.5338 11.1375 21.2148C11.6526 21.0118 12.1843 20.8478 12.7328 20.6786C13.0639 20.5765 13.4012 20.4725 13.7447 20.3568C14.5352 20.0907 15.3265 19.7712 16 19.2893C16.6735 19.7712 17.4648 20.0907 18.2553 20.3568C18.5988 20.4725 18.936 20.5765 19.2671 20.6786C19.8157 20.8478 20.3474 21.0118 20.8625 21.2148C21.672 21.5338 22.3551 21.9207 22.8383 22.4937C23.3137 23.0575 23.625 23.8367 23.625 25C23.625 25.2071 23.7929 25.375 24 25.375C24.2071 25.375 24.375 25.2071 24.375 25C24.375 23.6906 24.0196 22.7311 23.4117 22.0102C23.2971 21.8743 23.1746 21.7482 23.0454 21.6307C23.7168 21.4127 24.4135 21.1557 25 20.7438C25.5041 21.098 26.086 21.3354 26.6595 21.5322C26.9225 21.6225 27.1776 21.7027 27.4265 21.781C27.8347 21.9093 28.2265 22.0324 28.6102 22.1866C29.2107 22.4279 29.7064 22.7163 30.0548 23.1376C30.396 23.5502 30.625 24.1258 30.625 25C30.625 25.2071 30.7929 25.375 31 25.375C31.2071 25.375 31.375 25.2071 31.375 25C31.375 23.9833 31.104 23.2294 30.6327 22.6596C30.1686 22.0984 29.5393 21.7517 28.8898 21.4907C28.4849 21.328 28.0375 21.1869 27.6057 21.0507C27.3631 20.9742 27.1254 20.8992 26.903 20.8229C26.4253 20.6589 25.988 20.4803 25.6122 20.2492C26.4372 19.5484 27.0975 18.9103 27.5631 18.2041C28.1075 17.3784 28.375 16.4778 28.375 15.3091C28.375 14.1164 27.967 13.189 27.325 12.5595C26.6871 11.9341 25.8405 11.625 25 11.625C24.1595 11.625 23.3129 11.9341 22.675 12.5595C22.033 13.189 21.625 14.1164 21.625 15.3091C21.625 16.4778 21.8925 17.3784 22.4369 18.2041C22.9025 18.9103 23.5628 19.5485 24.3879 20.2493C23.8749 20.565 23.2522 20.7792 22.5747 20.994C22.4949 21.0192 22.4296 21.0687 22.3841 21.1317C21.9941 20.8858 21.5709 20.6878 21.1375 20.517C20.6014 20.3058 20.0148 20.1244 19.443 19.9476C19.1182 19.8471 18.798 19.7482 18.4947 19.646C17.7986 19.4117 17.1572 19.1518 16.614 18.8002C17.7675 17.8465 18.6778 16.9946 19.3112 16.0524C20.0234 14.9931 20.375 13.8369 20.375 12.3273C20.375 10.7929 19.8404 9.61013 19.0099 8.81152C18.1841 8.01737 17.0883 7.625 16 7.625ZM18.6888 15.634C18.0945 16.518 17.2109 17.3405 16 18.3342C14.7891 17.3405 13.9055 16.518 13.3112 15.634C12.69 14.7099 12.375 13.7025 12.375 12.3273C12.375 10.9768 12.8404 9.99593 13.5099 9.35212C14.1841 8.70384 15.0883 8.375 16 8.375C16.9117 8.375 17.8159 8.70384 18.4901 9.35212C19.1596 9.99593 19.625 10.9768 19.625 12.3273C19.625 13.7025 19.31 14.7099 18.6888 15.634ZM7 19.7845C7.87478 19.0491 8.50879 18.4406 8.93693 17.7913C9.39251 17.1003 9.625 16.3464 9.625 15.3091C9.625 14.2957 9.28296 13.5686 8.79996 13.095C8.31288 12.6175 7.65952 12.375 7 12.375C6.34048 12.375 5.68712 12.6175 5.20004 13.095C4.71704 13.5686 4.375 14.2957 4.375 15.3091C4.375 16.3464 4.60749 17.1003 5.06307 17.7913C5.49121 18.4406 6.12522 19.0491 7 19.7845ZM25 19.7845C25.8748 19.0491 26.5088 18.4406 26.9369 17.7913C27.3925 17.1003 27.625 16.3464 27.625 15.3091C27.625 14.2957 27.283 13.5686 26.8 13.095C26.3129 12.6175 25.6595 12.375 25 12.375C24.3405 12.375 23.6871 12.6175 23.2 13.095C22.717 13.5686 22.375 14.2957 22.375 15.3091C22.375 16.3464 22.6075 17.1003 23.0631 17.7913C23.4912 18.4406 24.1252 19.0491 25 19.7845Z" fill="white"/>
+</svg>
diff --git a/public/icons/council-members-icon.svg b/public/icons/council-members-icon.svg
new file mode 100644
index 0000000000..2b7c92b0db
--- /dev/null
+++ b/public/icons/council-members-icon.svg
@@ -0,0 +1,27 @@
+<svg width="70" height="38" viewBox="0 0 70 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_3848_79856" fill="white">
+<path d="M16.245 37.9886C16.0536 35.8366 16.1575 33.7454 16.7918 31.732C17.1829 30.4757 18.1809 29.6631 19.4059 29.2776C21.1477 28.723 22.9333 28.3236 24.6833 27.7995V27.8022C25.7333 27.511 26.756 27.1311 27.7431 26.6651C29.9415 25.5669 30.308 23.9806 29.2825 21.7175C28.1314 19.2104 27.1169 16.6396 26.2419 14.0214C25.4571 11.628 25.4215 9.12927 26.0723 6.64977C27.0047 3.06108 29.6517 0.648309 33.3188 0.14352C35.9766 -0.222556 38.5141 0.0492276 40.7675 1.69104C44.1308 4.13711 44.7597 7.65367 44.3659 11.4695C44.0023 15.0083 42.7253 18.2919 41.0847 21.4254C39.6792 24.1044 40.2069 25.8101 42.9988 26.9138C44.8226 27.6349 46.7585 28.062 48.6425 28.6222C49.4164 28.8551 50.2175 29.0215 50.9531 29.3488C52.3805 29.9811 53.4305 30.985 53.6055 32.6545C53.7914 34.4045 53.9391 36.1573 54.1086 37.9876H16.2371L16.245 37.9886Z"/>
+<path d="M13.6389 38H0C0.207817 36.3915 0.194139 34.7885 0.683595 33.363C0.957037 32.5754 1.96873 31.871 2.81097 31.5077C4.08792 30.953 5.5071 30.7478 6.85783 30.3567C7.43205 30.1931 7.9926 29.9823 8.53125 29.7244C10.3196 28.8619 10.7051 27.6943 9.77537 25.9083C8.45195 23.3707 7.45115 20.7333 7.21602 17.8487C6.90977 14.1768 8.59419 11.226 11.7277 10.2967C16.8274 8.78805 21.1722 11.8609 21.0819 17.1468V17.1441C21.0737 18.4226 20.978 19.6983 20.7975 20.9629C20.4639 23.1261 19.6299 25.0979 17.8826 26.479C15.1674 28.6228 14.2076 31.582 13.8522 34.8546C13.7455 35.8696 13.71 36.899 13.6389 38Z"/>
+<path d="M69.9786 38H56.6841C56.3615 35.92 56.0798 33.8955 55.7271 31.8848C55.3634 29.8381 54.2751 28.1852 52.7029 26.8928C50.3075 24.9349 49.356 22.3058 49.1263 19.3352C48.9513 17.0915 48.8966 14.8813 50.2364 12.8567C51.7622 10.5493 53.9442 9.80602 56.5091 9.93914C61.4775 10.1998 63.7632 14.2766 62.7325 19.2298C62.2677 21.4596 61.3543 23.6172 60.4466 25.7194C59.5387 27.8243 59.8231 28.9975 61.9559 29.8461C63.2028 30.3176 64.4825 30.6975 65.7841 30.986C68.9615 31.7375 69.6669 32.5002 69.9677 35.77C70.0334 36.4744 69.9786 37.1874 69.9786 38Z"/>
+</mask>
+<path d="M16.245 37.9886C16.0536 35.8366 16.1575 33.7454 16.7918 31.732C17.1829 30.4757 18.1809 29.6631 19.4059 29.2776C21.1477 28.723 22.9333 28.3236 24.6833 27.7995V27.8022C25.7333 27.511 26.756 27.1311 27.7431 26.6651C29.9415 25.5669 30.308 23.9806 29.2825 21.7175C28.1314 19.2104 27.1169 16.6396 26.2419 14.0214C25.4571 11.628 25.4215 9.12927 26.0723 6.64977C27.0047 3.06108 29.6517 0.648309 33.3188 0.14352C35.9766 -0.222556 38.5141 0.0492276 40.7675 1.69104C44.1308 4.13711 44.7597 7.65367 44.3659 11.4695C44.0023 15.0083 42.7253 18.2919 41.0847 21.4254C39.6792 24.1044 40.2069 25.8101 42.9988 26.9138C44.8226 27.6349 46.7585 28.062 48.6425 28.6222C49.4164 28.8551 50.2175 29.0215 50.9531 29.3488C52.3805 29.9811 53.4305 30.985 53.6055 32.6545C53.7914 34.4045 53.9391 36.1573 54.1086 37.9876H16.2371L16.245 37.9886Z" stroke="url(#paint0_linear_3848_79856)" stroke-width="2" mask="url(#path-1-inside-1_3848_79856)"/>
+<path d="M13.6389 38H0C0.207817 36.3915 0.194139 34.7885 0.683595 33.363C0.957037 32.5754 1.96873 31.871 2.81097 31.5077C4.08792 30.953 5.5071 30.7478 6.85783 30.3567C7.43205 30.1931 7.9926 29.9823 8.53125 29.7244C10.3196 28.8619 10.7051 27.6943 9.77537 25.9083C8.45195 23.3707 7.45115 20.7333 7.21602 17.8487C6.90977 14.1768 8.59419 11.226 11.7277 10.2967C16.8274 8.78805 21.1722 11.8609 21.0819 17.1468V17.1441C21.0737 18.4226 20.978 19.6983 20.7975 20.9629C20.4639 23.1261 19.6299 25.0979 17.8826 26.479C15.1674 28.6228 14.2076 31.582 13.8522 34.8546C13.7455 35.8696 13.71 36.899 13.6389 38Z" stroke="url(#paint1_linear_3848_79856)" stroke-width="2" mask="url(#path-1-inside-1_3848_79856)"/>
+<path d="M69.9786 38H56.6841C56.3615 35.92 56.0798 33.8955 55.7271 31.8848C55.3634 29.8381 54.2751 28.1852 52.7029 26.8928C50.3075 24.9349 49.356 22.3058 49.1263 19.3352C48.9513 17.0915 48.8966 14.8813 50.2364 12.8567C51.7622 10.5493 53.9442 9.80602 56.5091 9.93914C61.4775 10.1998 63.7632 14.2766 62.7325 19.2298C62.2677 21.4596 61.3543 23.6172 60.4466 25.7194C59.5387 27.8243 59.8231 28.9975 61.9559 29.8461C63.2028 30.3176 64.4825 30.6975 65.7841 30.986C68.9615 31.7375 69.6669 32.5002 69.9677 35.77C70.0334 36.4744 69.9786 37.1874 69.9786 38Z" stroke="url(#paint2_linear_3848_79856)" stroke-width="2" mask="url(#path-1-inside-1_3848_79856)"/>
+<defs>
+<linearGradient id="paint0_linear_3848_79856" x1="-5.99772e-08" y1="20.9" x2="70.0091" y2="22.3622" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00C2FF"/>
+<stop offset="0.5" stop-color="#00E4FF"/>
+<stop offset="1" stop-color="#87F2FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_3848_79856" x1="-5.99772e-08" y1="20.9" x2="70.0091" y2="22.3622" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00C2FF"/>
+<stop offset="0.5" stop-color="#00E4FF"/>
+<stop offset="1" stop-color="#87F2FF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_3848_79856" x1="-5.99772e-08" y1="20.9" x2="70.0091" y2="22.3622" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00C2FF"/>
+<stop offset="0.5" stop-color="#00E4FF"/>
+<stop offset="1" stop-color="#87F2FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/icons/nft-icon.svg b/public/icons/nft-icon.svg
new file mode 100644
index 0000000000..43f9942d23
--- /dev/null
+++ b/public/icons/nft-icon.svg
@@ -0,0 +1,13 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_3848_79913" fill="white">
+<path d="M0 6.44738C0 2.88659 2.88655 0 6.4473 0H43.552C47.1128 0 49.9993 2.88659 49.9993 6.44738V25.3411C50.0008 25.8963 49.9993 26.5344 49.9993 27.2727V43.5526C49.9993 47.1134 47.1128 50 43.552 50H20.1964H6.4473C2.88655 50 0 47.1134 0 43.5526V6.44738Z"/>
+</mask>
+<path d="M49.9993 25.3411H50.4993V25.3398L49.9993 25.3411ZM23.9266 13.1373L23.4509 13.2913V13.2913L23.9266 13.1373ZM27.3044 10.7377L27.6063 10.3391L27.3044 10.7377ZM25.3467 17.5268L25.626 17.9415L25.9383 17.7312L25.8224 17.3729L25.3467 17.5268ZM22.7489 19.9275L22.618 20.41L22.9334 20.4956L23.1384 20.2411L22.7489 19.9275ZM6.27807 15.4568L6.14709 15.9393H6.14709L6.27807 15.4568ZM5.39246 17.6773L5.62951 17.2371H5.62951L5.39246 17.6773ZM20.4744 25.7985L20.9658 25.8906L21.0332 25.5315L20.7115 25.3583L20.4744 25.7985ZM17.6379 36.0309L17.1677 35.8608L17.6379 36.0309ZM19.5836 38.9475L19.6063 38.448L19.5836 38.9475ZM22.224 39.0675L22.2467 38.568H22.2467L22.224 39.0675ZM25.2704 37.126L24.8081 36.9357L25.2704 37.126ZM25.7739 35.9034L26.2362 36.0937L25.7739 35.9034ZM27.0976 35.097L27.0979 34.597H27.0979L27.0976 35.097ZM32.7128 33.5566L32.418 33.1529L32.7128 33.5566ZM34.8746 30.872L35.0827 30.4173L34.6276 30.2091L34.4198 30.6643L34.8746 30.872ZM36.2019 31.6778L36.516 31.2888L36.516 31.2888L36.2019 31.6778ZM35.6927 36.2868L35.3383 35.934H35.3383L35.6927 36.2868ZM32.5047 38.866L32.8015 39.2684L32.8047 39.266L32.5047 38.866ZM32.5048 38.8659L32.2081 38.4635L32.2048 38.4659L32.5048 38.8659ZM31.678 39.4779L31.9769 39.8787H31.9769L31.678 39.4779ZM24.7418 49.6522L24.78 50.1508L25.2117 50.1177L25.2407 49.6857L24.7418 49.6522ZM48.4775 20.4018L48.8102 20.0286L48.8102 20.0286L48.4775 20.4018ZM42.5671 16.4633L42.7635 16.0034L42.5671 16.4633ZM33.2871 14.7034L33.2739 15.2033L33.2871 14.7034ZM31.9331 14.2443L32.2351 13.8458V13.8458L31.9331 14.2443ZM50.4993 27.2727V25.3411H49.4993V27.2727H50.4993ZM24.4023 12.9834C23.8988 11.4273 25.6988 10.1486 27.0025 11.1362L27.6063 10.3391C25.5228 8.76069 22.6463 10.8043 23.4509 13.2913L24.4023 12.9834ZM25.8224 17.3729L24.4023 12.9834L23.4509 13.2913L24.871 17.6807L25.8224 17.3729ZM23.1384 20.2411C23.9355 19.2512 24.8484 18.4652 25.626 17.9415L25.0674 17.1121C24.2134 17.6872 23.2244 18.5399 22.3595 19.6139L23.1384 20.2411ZM6.14709 15.9393L22.618 20.41L22.8799 19.4449L6.40904 14.9742L6.14709 15.9393ZM5.30973 16.3574C5.44209 16.0256 5.80228 15.8457 6.14709 15.9393L6.40905 14.9742C5.57386 14.7475 4.70146 15.1832 4.38087 15.987L5.30973 16.3574ZM5.62951 17.2371C5.31492 17.0677 5.17737 16.6893 5.30973 16.3574L4.38087 15.987C4.06029 16.7908 4.39345 17.7073 5.15541 18.1176L5.62951 17.2371ZM20.7115 25.3583L5.62951 17.2371L5.15541 18.1176L20.2374 26.2387L20.7115 25.3583ZM18.1081 36.2009C19.0103 33.7064 20.1444 30.2714 20.9658 25.8906L19.983 25.7063C19.1751 30.0147 18.0598 33.3942 17.1677 35.8608L18.1081 36.2009ZM19.6063 38.448C18.4737 38.3965 17.7248 37.2609 18.1081 36.2009L17.1677 35.8608C16.5577 37.5476 17.7474 39.3646 19.5609 39.447L19.6063 38.448ZM22.2467 38.568L19.6063 38.448L19.5609 39.447L22.2013 39.567L22.2467 38.568ZM24.8081 36.9357C24.384 37.9656 23.3593 38.6186 22.2467 38.568L22.2013 39.567C23.7353 39.6367 25.1481 38.7364 25.7328 37.3164L24.8081 36.9357ZM25.3115 35.713L24.8081 36.9357L25.7328 37.3164L26.2362 36.0937L25.3115 35.713ZM27.0979 34.597C26.2885 34.5965 25.5889 35.0393 25.3115 35.713L26.2362 36.0937C26.3422 35.8365 26.6464 35.5968 27.0972 35.597L27.0979 34.597ZM32.418 33.1529C30.7716 34.3552 28.7277 34.5981 27.0979 34.597L27.0972 35.597C28.7961 35.5981 31.1024 35.352 33.0077 33.9604L32.418 33.1529ZM34.4198 30.6643C33.9319 31.733 33.2468 32.5475 32.418 33.1529L33.0077 33.9604C33.9765 33.2529 34.7711 32.3027 35.3295 31.0796L34.4198 30.6643ZM36.516 31.2888C36.0591 30.9198 35.5415 30.6273 35.0827 30.4173L34.6666 31.3266C35.0706 31.5115 35.5117 31.7631 35.8878 32.0668L36.516 31.2888ZM37.7075 33.3267C37.7075 32.5686 37.2494 31.881 36.516 31.2888L35.8878 32.0668C36.5095 32.5689 36.7075 33 36.7075 33.3267H37.7075ZM36.047 36.6396C37.1084 35.5735 37.7075 34.5306 37.7075 33.3267H36.7075C36.7075 34.1545 36.3104 34.9576 35.3383 35.934L36.047 36.6396ZM32.8047 39.266L32.8048 39.2659L32.2048 38.4659L32.2047 38.466L32.8047 39.266ZM32.8016 39.2683C34.0314 38.3615 35.159 37.5314 36.047 36.6396L35.3383 35.934C34.5151 36.7609 33.4553 37.5438 32.2081 38.4635L32.8016 39.2683ZM31.9769 39.8787C32.2574 39.6696 32.5323 39.4669 32.8015 39.2684L32.208 38.4635C31.9392 38.6618 31.6621 38.8661 31.3791 39.0771L31.9769 39.8787ZM25.2407 49.6857C25.5586 44.9446 28.9438 42.1405 31.9769 39.8787L31.3791 39.0771C28.3599 41.3284 24.5944 44.3773 24.2429 49.6188L25.2407 49.6857ZM20.2346 50.4985L24.78 50.1508L24.7037 49.1537L20.1583 49.5015L20.2346 50.4985ZM48.1448 20.775C48.8472 21.4013 49.1189 21.6733 49.2779 22.1669C49.455 22.7169 49.4946 23.5537 49.4993 25.3425L50.4993 25.3398C50.4947 23.6072 50.4652 22.5913 50.2297 21.8603C49.976 21.0729 49.4915 20.6359 48.8102 20.0286L48.1448 20.775ZM42.3708 16.9231C44.7042 17.9193 46.4602 19.2732 48.1448 20.775L48.8102 20.0286C47.0888 18.4939 45.2393 17.0605 42.7635 16.0034L42.3708 16.9231ZM33.2739 15.2033C37.1708 15.3062 40.0381 15.9272 42.3708 16.9231L42.7635 16.0034C40.2892 14.947 37.292 14.309 33.3003 14.2036L33.2739 15.2033ZM31.6312 14.6429C32.0952 14.9944 32.6716 15.1874 33.2739 15.2033L33.3003 14.2036C32.8927 14.1929 32.5215 14.0628 32.2351 13.8458L31.6312 14.6429ZM27.0025 11.1362L31.6312 14.6429L32.2351 13.8458L27.6063 10.3391L27.0025 11.1362ZM49.9993 25.3411H48.9993L48.9993 25.3438L49.9993 25.3411ZM6.4473 -1C2.33426 -1 -1 2.33432 -1 6.44738H1C1 3.43886 3.43885 1 6.4473 1V-1ZM43.552 -1H6.4473V1H43.552V-1ZM50.9993 6.44738C50.9993 2.33432 47.6651 -1 43.552 -1V1C46.5605 1 48.9993 3.43886 48.9993 6.44738H50.9993ZM50.9993 43.5526V27.2727H48.9993V43.5526H50.9993ZM50.9993 25.3411V6.44738H48.9993V25.3411H50.9993ZM43.552 51C47.6651 51 50.9993 47.6657 50.9993 43.5526H48.9993C48.9993 46.5611 46.5605 49 43.552 49V51ZM6.4473 51H20.1964V49H6.4473V51ZM20.1964 51H43.552V49H20.1964V51ZM-1 43.5526C-1 47.6657 2.33425 51 6.4473 51V49C3.43885 49 1 46.5611 1 43.5526H-1ZM-1 6.44738V43.5526H1V6.44738H-1ZM48.9993 25.3438C49.0008 25.8974 48.9993 26.531 48.9993 27.2727H50.9993C50.9993 26.5379 51.0008 25.8953 50.9993 25.3384L48.9993 25.3438Z" fill="url(#paint0_linear_3848_79913)" mask="url(#path-1-inside-1_3848_79913)"/>
+<defs>
+<linearGradient id="paint0_linear_3848_79913" x1="-4.28408e-08" y1="27.5" x2="50.0219" y2="28.0671" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00C2FF"/>
+<stop offset="0.5" stop-color="#00E4FF"/>
+<stop offset="1" stop-color="#87F2FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/icons/threshold-icon.svg b/public/icons/threshold-icon.svg
new file mode 100644
index 0000000000..a660d59071
--- /dev/null
+++ b/public/icons/threshold-icon.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 55 59" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.5 1C28.5 0.723858 28.2761 0.5 28 0.5C27.7239 0.5 27.5 0.723858 27.5 1L27.5 27.4895L13.752 24.6451C13.0802 24.2576 12.1576 24.4338 11.7138 25.1736L0.587026 43.7181L0.582962 43.7242C0.52788 43.8075 0.499843 43.9039 0.500001 44.0009C0.499879 44.0762 0.516761 44.1516 0.550723 44.2211C2.63243 49.0884 7.42018 52.5 13 52.5C18.5798 52.5 23.3676 49.0884 25.4493 44.221C25.4831 44.1519 25.4999 44.077 25.5 44.0021C25.5004 43.9047 25.4724 43.8078 25.417 43.7242L25.4129 43.7181L14.6995 25.8623L40.6759 31.2367L29.587 49.7181C29.5857 49.7201 29.5843 49.7221 29.583 49.7242C29.5279 49.8074 29.4999 49.9038 29.5 50.0007C29.4999 50.0761 29.5167 50.1516 29.5507 50.2211C31.6324 55.0884 36.4202 58.5 42 58.5C47.5798 58.5 52.3676 55.0884 54.4493 50.2211C54.483 50.152 54.4999 50.0772 54.5 50.0024C54.5005 49.9049 54.4724 49.8079 54.417 49.7242C54.4157 49.7221 54.4143 49.7201 54.4129 49.7181L43.2862 31.1736C42.962 30.6332 42.3823 30.3935 41.8315 30.4546L28.5 27.6964L28.5 1ZM41.8285 31.4752L41.8988 31.4897C41.9905 31.5087 42.0816 31.5012 42.164 31.4725C42.2692 31.5086 42.3642 31.5804 42.4287 31.6881L53.1159 49.5H30.8841L41.5713 31.6881C41.6343 31.583 41.7263 31.512 41.8285 31.4752ZM30.7818 50.5017H53.2182C51.1475 54.6563 46.8991 57.5 42 57.5C37.1009 57.5 32.8525 54.6563 30.7818 50.5017ZM12.8988 25.4897C12.8773 25.4853 12.8564 25.4795 12.8361 25.4725C12.7309 25.5085 12.6359 25.5804 12.5713 25.6881L1.88409 43.5H24.1159L13.4287 25.6881C13.4045 25.6476 13.3759 25.6122 13.3441 25.5819L12.8988 25.4897ZM24.2182 44.5017C22.1475 48.6563 17.8991 51.5 13 51.5C8.10092 51.5 3.85248 48.6563 1.78184 44.5017H24.2182Z" fill="white"/>
+</svg>
diff --git a/public/img/bg-quorum-all-sizes.png b/public/img/bg-quorum-all-sizes.png
new file mode 100644
index 0000000000..6499a55532
Binary files /dev/null and b/public/img/bg-quorum-all-sizes.png differ
diff --git a/public/img/creation-bg-desktop.png b/public/img/creation-bg-desktop.png
new file mode 100644
index 0000000000..aca5befe78
Binary files /dev/null and b/public/img/creation-bg-desktop.png differ
diff --git a/styles/index.css b/styles/index.css
index 4ef45caa04..31a842c24f 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -109,7 +109,7 @@ button {
 }
 
 .markdown a {
-  @apply underline transition-all duration-300 text-fgd-2 hover:text-fgd-3 hover:no-underline;
+  @apply underline break-all transition-all duration-300 text-fgd-1 hover:text-fgd-2 hover:no-underline;
 }
 
 .markdown li {
@@ -191,6 +191,102 @@ body::-webkit-scrollbar-corner {
   @apply bg-gradient-to-r from-[#00C2FF] via-[#00E4FF] to-[#87F2FF];
 }
 
+.transition-from-gradient-background::before {
+  position: absolute;
+  content: '';
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 0;
+  opacity: 0;
+  transition: all 0.3s linear;
+  border-radius: 999px;
+  @apply border bg-gradient-to-r from-fgd-1 to-fgd-1;
+}
+
+.transition-from-gradient-background:hover::before {
+  opacity: 1;
+}
+
+.transition-from-gradient-background:active::before {
+  opacity: 1;
+  @apply border-fgd-3 bg-gradient-to-r from-fgd-3 to-fgd-3;
+}
+
+.transition-from-gradient-background:disabled {
+  background-image: none;
+}
+
+.transition-from-gradient-background:disabled::before {
+  opacity: 1;
+  @apply border border-fgd-4 bg-gradient-to-r from-fgd-4 to-fgd-4;
+}
+
+.border-gradient {
+  border: 1px solid transparent;
+  background-origin: border-box;
+  background-clip: content-box, border-box;
+}
+.border-gradient.transparent-fill {
+  background-image: linear-gradient(var(--bkg-2), var(--bkg-2)),
+    linear-gradient(93deg, #00c2ff 3%, #00e4ff 50%, #87f2ff 98%);
+}
+
+input[type='range'].with-gradient {
+  -webkit-appearance: none;
+  height: 16px;
+  border-radius: 5px;
+  background-image: linear-gradient(
+    to right,
+    #00c2ff 0%,
+    #00e4ff 50%,
+    #87f2ff 100%
+  );
+  background-size: 50% 100%;
+  background-repeat: no-repeat;
+  @apply bg-bkg-3;
+}
+
+input[type='range'].with-gradient::-moz-range-thumb {
+  -webkit-appearance: none;
+  cursor: ew-resize;
+  width: 32px;
+  height: 32px;
+  flex-grow: 0;
+  border-radius: 25px;
+  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2);
+  background-color: #fff;
+  transition: background 0.3s ease-in-out;
+}
+
+input[type='range'].with-gradient:disabled::-moz-range-thumb {
+  background-color: #1f1f20;
+}
+
+input[type='range'].with-gradient:disabled::-webkit-slider-thumb {
+  background-color: #1f1f20;
+}
+
+input[type='range'].with-gradient::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  cursor: ew-resize;
+  width: 32px;
+  height: 32px;
+  flex-grow: 0;
+  border-radius: 25px;
+  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2);
+  background-color: #fff;
+  transition: background 0.3s ease-in-out;
+}
+input[type='range'].with-gradient::-moz-range-track,
+input[type='range'].with-gradient::-webkit-slider-runnable-track {
+  -webkit-appearance: none;
+  box-shadow: none;
+  border: none;
+  background: transparent;
+}
+
 /* break-words is depricated a tailwind and CSS class, 
 advised to use overflow-wrap instead - see documentation below
 https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#values */
diff --git a/styles/typography.css b/styles/typography.css
new file mode 100644
index 0000000000..4d27ed308f
--- /dev/null
+++ b/styles/typography.css
@@ -0,0 +1,86 @@
+h1.heading-xl,
+h2.heading-lg,
+h3.heading-base,
+h4.heading-sm,
+.heading-cta {
+  letter-spacing: -0.5px;
+  line-height: 110%;
+  @apply font-normal;
+}
+
+h1.heading-xl {
+  font-size: 36px;
+  @apply font-serif md:text-[70px];
+}
+
+h2.heading-lg {
+  font-size: 36px;
+  @apply font-serif md:text-[50px];
+}
+
+h3.heading-base {
+  font-size: 24px;
+  @apply font-sans md:text-[36px];
+}
+
+h4.heading-sm {
+  font-size: 18px;
+  @apply font-sans md:text-[24px];
+}
+
+/* CTAs */
+.heading-cta {
+  font-size: 16px;
+  @apply font-sans md:text-[18px];
+}
+
+.body-base,
+.body-sm,
+.body-sm.font-bold,
+.body-xs {
+  letter-spacing: 0;
+  line-height: 140%;
+  @apply font-sans font-normal;
+}
+
+.body-lg {
+  font-size: 25px;
+}
+
+.body-base {
+  font-size: 18px;
+}
+
+.body-sm {
+  font-size: 15px;
+  @apply md:text-[16px];
+}
+
+.body-xs {
+  font-size: 12px;
+}
+
+.label-base {
+  letter-spacing: 0;
+  line-height: 120%;
+  font-size: 16px;
+  @apply font-sans font-normal;
+}
+
+.input-lg,
+.input-base,
+.input-sm {
+  letter-spacing: -0.5px;
+  line-height: 110%;
+  @apply font-sans font-normal;
+}
+
+.input-lg {
+  font-size: 28px;
+}
+.input-base {
+  font-size: 25px;
+}
+.input-sm {
+  font-size: 20px;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 91853c15b7..c05f539294 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -27,7 +27,7 @@ module.exports = {
           'secondary-2': { light: '#FFCB1B', dark: '#F48F25' },
           'bkg-1': '#17161c',
           'bkg-2': '#201F27',
-          'bkg-3': '#17161c',
+          'bkg-3': '#292833',
           'bkg-4': '#363D44',
           'fgd-1': '#E5E5E6',
           'fgd-2': '#8C8F93',
@@ -90,11 +90,16 @@ module.exports = {
         green: 'var(--green)',
         orange: 'var(--orange)',
         blue: 'var(--blue)',
+        'error-red': '#ff7c7c',
+        'confirm-green': '#8effdd',
+        'bkg-grey': '#292833',
+        'night-grey': '#201F27',
       },
       animation: {
         'connect-wallet-ping':
           'connect-wallet-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite',
         gradient: 'gradient 4s ease-in-out infinite',
+        loader: 'loader 0.6s infinite alternate',
       },
       keyframes: {
         'connect-wallet-ping': {
@@ -114,6 +119,12 @@ module.exports = {
             'background-position': '15% 0%',
           },
         },
+        loader: {
+          to: {
+            opacity: 0.1,
+            transform: 'translate3d(0, 0, 0)',
+          },
+        },
       },
     },
   },
diff --git a/tools/constants.ts b/tools/constants.ts
index 5948bc32e6..8ee17752e7 100644
--- a/tools/constants.ts
+++ b/tools/constants.ts
@@ -1,4 +1,8 @@
+import BN from 'bn.js'
+
 /**
  * The minimum amount of community tokens to create governance and proposals, for tokens with 0 supply
  */
 export const MIN_COMMUNITY_TOKENS_TO_CREATE_W_0_SUPPLY = 1000000
+
+export const MAX_TOKENS_TO_DISABLE = new BN('18446744073709551615')
diff --git a/tools/governance/prepareRealmCreation.ts b/tools/governance/prepareRealmCreation.ts
new file mode 100644
index 0000000000..065ccaabdf
--- /dev/null
+++ b/tools/governance/prepareRealmCreation.ts
@@ -0,0 +1,325 @@
+import {
+  PublicKey,
+  Keypair,
+  TransactionInstruction,
+  Connection,
+} from '@solana/web3.js'
+import {
+  getGovernanceProgramVersion,
+  WalletSigner,
+} from '@solana/spl-governance'
+
+import {
+  GovernanceConfig,
+  SetRealmAuthorityAction,
+  VoteThresholdPercentage,
+  VoteTipping,
+  withCreateNativeTreasury,
+  withCreateMintGovernance,
+  withCreateRealm,
+  withDepositGoverningTokens,
+  withSetRealmAuthority,
+} from '@solana/spl-governance'
+
+import { getWalletPublicKey } from '@utils/sendTransactions'
+import { tryGetMint } from '@utils/tokens'
+
+import { parseMintMaxVoteWeight } from '@tools/governance/units'
+import {
+  getTimestampFromDays,
+  getMintNaturalAmountFromDecimalAsBN,
+} from '@tools/sdk/units'
+import { withCreateMint } from '@tools/sdk/splToken/withCreateMint'
+import { withCreateAssociatedTokenAccount } from '@tools/sdk/splToken/withCreateAssociatedTokenAccount'
+import { withMintTo } from '@tools/sdk/splToken/withMintTo'
+import { MAX_TOKENS_TO_DISABLE } from '@tools/constants'
+
+import BN from 'bn.js'
+
+interface RealmCreation {
+  connection: Connection
+  wallet: WalletSigner
+  programIdAddress: string
+
+  realmName: string
+  tokensToGovernThreshold: number | undefined
+  maxVotingTimeInDays?: number
+
+  nftCollectionCount?: number
+  existingCommunityMintPk: PublicKey | undefined
+  communityMintSupplyFactor: number | undefined
+  communityYesVotePercentage: number
+  transferCommunityMintAuthority: boolean
+
+  createCouncil: boolean
+  existingCouncilMintPk: PublicKey | undefined
+  transferCouncilMintAuthority: boolean
+  councilWalletPks: PublicKey[]
+
+  additionalRealmPlugins?: PublicKey[]
+}
+
+export async function prepareRealmCreation({
+  connection,
+  wallet,
+  programIdAddress,
+
+  realmName,
+  tokensToGovernThreshold,
+  maxVotingTimeInDays = 3,
+
+  nftCollectionCount = 0,
+  existingCommunityMintPk,
+  communityYesVotePercentage,
+  communityMintSupplyFactor: rawCMSF,
+  transferCommunityMintAuthority,
+
+  createCouncil,
+  existingCouncilMintPk,
+  transferCouncilMintAuthority,
+  councilWalletPks,
+
+  additionalRealmPlugins = [],
+}: RealmCreation) {
+  const realmInstructions: TransactionInstruction[] = []
+  const realmSigners: Keypair[] = []
+
+  const mintsSetupInstructions: TransactionInstruction[] = []
+  const councilMembersInstructions: TransactionInstruction[] = []
+
+  const mintsSetupSigners: Keypair[] = []
+  const initialCouncilTokenAmount = 1
+
+  const communityMintSupplyFactor = parseMintMaxVoteWeight(rawCMSF)
+  const walletPk = getWalletPublicKey(wallet)
+  const programIdPk = new PublicKey(programIdAddress)
+  const programVersion = await getGovernanceProgramVersion(
+    connection,
+    programIdPk
+  )
+
+  console.log(
+    'Prepare realm - program and version',
+    programIdAddress,
+    programVersion
+  )
+  const communityMintAccount =
+    existingCommunityMintPk &&
+    (await tryGetMint(connection, existingCommunityMintPk))
+  const zeroCommunityTokenSupply = existingCommunityMintPk
+    ? communityMintAccount?.account.supply.isZero()
+    : true
+  const communityMintDecimals = communityMintAccount?.account?.decimals || 6
+
+  console.log('Prepare realm - community mint address', existingCommunityMintPk)
+  console.log('Prepare realm - community mint account', communityMintAccount)
+
+  const councilMintAccount =
+    existingCouncilMintPk &&
+    (await tryGetMint(connection, existingCouncilMintPk))
+  const zeroCouncilTokenSupply = existingCommunityMintPk
+    ? councilMintAccount?.account.supply.isZero()
+    : true
+
+  console.log('Prepare realm - council mint address', existingCouncilMintPk)
+  console.log('Prepare realm - council mint account', councilMintAccount)
+
+  let communityMintPk = existingCommunityMintPk
+  if (!communityMintPk) {
+    // Create community mint
+    communityMintPk = await withCreateMint(
+      connection,
+      mintsSetupInstructions,
+      mintsSetupSigners,
+      walletPk,
+      null,
+      communityMintDecimals,
+      walletPk
+    )
+  }
+
+  console.log(
+    'Prepare realm - zero community token supply',
+    zeroCommunityTokenSupply,
+    ' | zero council token supply',
+    zeroCouncilTokenSupply
+  )
+  console.log('Prepare realm - council mint address', existingCouncilMintPk)
+  // Create council mint
+  let councilMintPk
+  if (
+    zeroCommunityTokenSupply &&
+    zeroCouncilTokenSupply &&
+    nftCollectionCount === 0 &&
+    councilWalletPks.length === 0
+  ) {
+    councilWalletPks.push(wallet.publicKey as PublicKey)
+    councilMintPk = await withCreateMint(
+      connection,
+      mintsSetupInstructions,
+      mintsSetupSigners,
+      walletPk,
+      null,
+      0,
+      walletPk
+    )
+  } else if (!existingCouncilMintPk && createCouncil) {
+    councilMintPk = await withCreateMint(
+      connection,
+      mintsSetupInstructions,
+      mintsSetupSigners,
+      walletPk,
+      null,
+      0,
+      walletPk
+    )
+  } else {
+    councilMintPk = existingCouncilMintPk
+  }
+
+  let walletAtaPk: PublicKey | undefined
+  const tokenAmount = 1
+
+  console.log('Prepare realm - council members', councilWalletPks)
+  for (const teamWalletPk of councilWalletPks) {
+    const ataPk = await withCreateAssociatedTokenAccount(
+      councilMembersInstructions,
+      councilMintPk,
+      teamWalletPk,
+      walletPk
+    )
+
+    // Mint 1 council token to each team member
+    await withMintTo(
+      councilMembersInstructions,
+      councilMintPk,
+      ataPk,
+      walletPk,
+      tokenAmount
+    )
+
+    if (teamWalletPk.equals(walletPk)) {
+      walletAtaPk = ataPk
+    }
+  }
+
+  // Convert to mint natural amount
+  const minCommunityTokensToCreateAsMintValue =
+    typeof tokensToGovernThreshold !== 'undefined'
+      ? getMintNaturalAmountFromDecimalAsBN(
+          tokensToGovernThreshold,
+          communityMintDecimals
+        )
+      : MAX_TOKENS_TO_DISABLE
+
+  const realmPk = await withCreateRealm(
+    realmInstructions,
+    programIdPk,
+    programVersion,
+    realmName,
+    walletPk,
+    communityMintPk,
+    walletPk,
+    councilMintPk,
+    communityMintSupplyFactor,
+    minCommunityTokensToCreateAsMintValue,
+    ...additionalRealmPlugins
+  )
+
+  // If the current wallet is in the team then deposit the council token
+  if (walletAtaPk) {
+    await withDepositGoverningTokens(
+      realmInstructions,
+      programIdPk,
+      programVersion,
+      realmPk,
+      walletAtaPk,
+      councilMintPk,
+      walletPk,
+      walletPk,
+      walletPk,
+      new BN(initialCouncilTokenAmount)
+    )
+  }
+
+  // Put community and council mints under the realm governance with default config
+  const config = new GovernanceConfig({
+    voteThresholdPercentage: new VoteThresholdPercentage({
+      value: communityYesVotePercentage,
+    }),
+    minCommunityTokensToCreateProposal: minCommunityTokensToCreateAsMintValue,
+    // Do not use instruction hold up time
+    minInstructionHoldUpTime: 0,
+    // max voting time 3 days
+    maxVotingTime: getTimestampFromDays(maxVotingTimeInDays),
+    voteTipping: VoteTipping.Strict,
+    proposalCoolOffTime: 0,
+    minCouncilTokensToCreateProposal: new BN(initialCouncilTokenAmount),
+  })
+
+  const communityMintGovPk = await withCreateMintGovernance(
+    realmInstructions,
+    programIdPk,
+    programVersion,
+    realmPk,
+    communityMintPk,
+    config,
+    transferCommunityMintAuthority,
+    walletPk,
+    PublicKey.default,
+    walletPk,
+    walletPk
+  )
+
+  await withCreateNativeTreasury(
+    realmInstructions,
+    programIdPk,
+    communityMintGovPk,
+    walletPk
+  )
+
+  if (councilMintPk) {
+    await withCreateMintGovernance(
+      realmInstructions,
+      programIdPk,
+      programVersion,
+      realmPk,
+      councilMintPk,
+      config,
+      transferCouncilMintAuthority,
+      walletPk,
+      PublicKey.default,
+      walletPk,
+      walletPk
+    )
+  }
+
+  // Set the community governance as the realm authority
+  if (transferCommunityMintAuthority) {
+    withSetRealmAuthority(
+      realmInstructions,
+      programIdPk,
+      programVersion,
+      realmPk,
+      walletPk,
+      communityMintGovPk,
+      SetRealmAuthorityAction.SetChecked
+    )
+  }
+
+  return {
+    communityMintGovPk,
+    communityMintPk,
+    councilMintPk,
+    realmPk,
+    realmInstructions,
+    realmSigners,
+    mintsSetupInstructions,
+    mintsSetupSigners,
+    councilMembersInstructions,
+    walletPk,
+    programIdPk,
+    programVersion,
+    minCommunityTokensToCreateAsMintValue,
+  }
+}
diff --git a/tools/governance/units.ts b/tools/governance/units.ts
new file mode 100644
index 0000000000..f53dc91af7
--- /dev/null
+++ b/tools/governance/units.ts
@@ -0,0 +1,17 @@
+import { MintMaxVoteWeightSource } from '@solana/spl-governance'
+import BN from 'bn.js'
+import { BigNumber } from 'bignumber.js'
+
+export const parseMintMaxVoteWeight = (mintMaxVoteWeight) => {
+  let value = MintMaxVoteWeightSource.FULL_SUPPLY_FRACTION.value
+  if (mintMaxVoteWeight) {
+    const fraction = new BigNumber(mintMaxVoteWeight)
+      .shiftedBy(MintMaxVoteWeightSource.SUPPLY_FRACTION_DECIMALS)
+      .toString()
+    value = new BN(fraction)
+  }
+
+  return new MintMaxVoteWeightSource({
+    value,
+  })
+}
diff --git a/utils/formValidation.tsx b/utils/formValidation.tsx
index da79ab43f4..5ab7e19f52 100644
--- a/utils/formValidation.tsx
+++ b/utils/formValidation.tsx
@@ -1,3 +1,5 @@
+import { PublicKey } from '@solana/web3.js'
+import * as yup from 'yup'
 import { SanitizedObject } from './helpers'
 
 export interface formValidation {
@@ -42,3 +44,48 @@ export const isFormValid = async (schema, formValues, abortEarly = false) => {
   }
   return values
 }
+
+export function validateSolAddress(address: string) {
+  try {
+    const pubkey = new PublicKey(address)
+    const isSolana = PublicKey.isOnCurve(pubkey.toBuffer())
+    return isSolana
+  } catch (error) {
+    return false
+  }
+}
+export function updateUserInput(formData, schema, setValue) {
+  Object.keys(schema).forEach((fieldName) => {
+    if (formData) {
+      const value = formData[fieldName]
+      if (typeof value !== 'undefined') {
+        setValue(fieldName, value, {
+          shouldValidate: true,
+          shouldDirty: true,
+        })
+      }
+    }
+  })
+}
+
+export function isWizardValid({ currentStep, steps, formData }) {
+  if (currentStep > 0 && currentStep <= steps.length + 1) {
+    const schema = steps
+      .slice(0, currentStep)
+      .map(({ schema }) => schema)
+      .reduce((prev, curr) => {
+        return {
+          ...prev,
+          ...curr,
+        }
+      }, {})
+    try {
+      yup.object(schema).validateSync(formData, { context: formData })
+      return true
+    } catch (error) {
+      console.log('error', error.message, error.values)
+      return false
+    }
+  }
+  return true
+}
diff --git a/utils/formatting.tsx b/utils/formatting.tsx
index 1c16abdbc7..218ba54d54 100644
--- a/utils/formatting.tsx
+++ b/utils/formatting.tsx
@@ -25,8 +25,8 @@ dayjs.extend(relativeTime)
 //@ts-ignore
 export const fmtUnixTime = (d: BN) => dayjs(d.toNumber() * 1000).fromNow()
 
-export function abbreviateAddress(address: PublicKey, size = 5) {
-  const base58 = address.toBase58()
+export function abbreviateAddress(address: PublicKey | string, size = 5) {
+  const base58 = typeof address === 'string' ? address : address.toBase58()
   return base58.slice(0, size) + '…' + base58.slice(-size)
 }
 
diff --git a/utils/helpers.ts b/utils/helpers.ts
index cbb91bd571..7fe2110732 100644
--- a/utils/helpers.ts
+++ b/utils/helpers.ts
@@ -28,3 +28,12 @@ export async function resolveProposalDescription(descriptionLink: string) {
     return descriptionLink
   }
 }
+
+export function preventNegativeNumberInput(ev) {
+  const value = ev.target.value
+  if (!isNaN(value) && value < 0) {
+    ev.target.value = 0
+  } else if (isNaN(value)) {
+    ev.target.value = value.slice(0, value.length - 1)
+  }
+}
diff --git a/utils/textToAddressList.ts b/utils/textToAddressList.ts
new file mode 100644
index 0000000000..d9b9c3f4db
--- /dev/null
+++ b/utils/textToAddressList.ts
@@ -0,0 +1,21 @@
+import { validateSolAddress } from '@utils/formValidation'
+
+export interface Addresses {
+  valid: string[]
+  invalid: string[]
+}
+
+export const textToAddressList = (textBlock: string): Addresses => {
+  const valid: string[] = []
+  const invalid: string[] = []
+
+  textBlock.split(/[\s|,]/).forEach((address) => {
+    if (validateSolAddress(address)) {
+      valid.push(address)
+    } else if (address.trim() /* ignore empty strings */) {
+      invalid.push(address.trim())
+    }
+  })
+
+  return { valid, invalid }
+}
diff --git a/yarn.lock b/yarn.lock
index 1ce0b67b5c..74947117ad 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -964,7 +964,7 @@
   resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.5.0.tgz#483b44ba2c8b8d4391e1d2c863898d7dd0cc0296"
   integrity sha512-aaRnYxBb3MU2FNJf3Ut9RMTUqqU3as0aI1lQhgo2n9Fa67wRu14iOGqx93xB+uMNVfNwZ5B3y/Ndm7qZGuFeMQ==
 
-"@headlessui/react@^1.6.0":
+"@headlessui/react@^1.6.4":
   version "1.6.4"
   resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.6.4.tgz#c73084e23386bef5fb86cd16da3352c3a844bb4c"
   integrity sha512-0yqz1scwbFtwljmbbKjXsSGl5ABEYNICVHZnMCWo0UtOZodo2Tpu94uOVgCRjRZ77l2WcTi2S0uidINDvG7lsA==
@@ -974,6 +974,11 @@
   resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.6.tgz#35dd26987228b39ef2316db3b1245c42eb19e324"
   integrity sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==
 
+"@hookform/resolvers@^2.8.10":
+  version "2.8.10"
+  resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-2.8.10.tgz#b66d7a7848b1b1dd5b976a73fff36bb366666e7d"
+  integrity sha512-DDFtNlugsbwAhCJHYp3NcN5LvJrwSsCLPi41Wo5O8UAIbUFnBfY/jW+zKnlX57BZ4jE0j/g6R9rB3JlO89ad0g==
+
 "@humanwhocodes/config-array@^0.9.2":
   version "0.9.2"
   resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.2.tgz"
@@ -11509,6 +11514,11 @@ react-headless-pagination@^0.1.0:
   resolved "https://registry.npmjs.org/react-headless-pagination/-/react-headless-pagination-0.1.0.tgz"
   integrity sha512-B+t+9PafVL4M0SYoVwcPelmWvnGzvTijF1BI0iHcq44vXy1brwFi62d8a8GlipIxvvBIYoghmVqTLiFmlElG1A==
 
+react-hook-form@^7.31.3:
+  version "7.31.3"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.31.3.tgz#b61bafb9a7435f91695351a7a9f714d8c4df0121"
+  integrity sha512-NVZdCWViIWXXXlQ3jxVQH0NuNfwPf8A/0KvuCxrM9qxtP1qYosfR2ZudarziFrVOC7eTUbWbm1T4OyYCwv9oSQ==
+
 react-icons@^4.3.1:
   version "4.3.1"
   resolved "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz"