diff --git a/apps/explorer/src/app/routes/network-parameters/network-parameters.tsx b/apps/explorer/src/app/routes/network-parameters/network-parameters.tsx
index daf939573..10240cfcd 100644
--- a/apps/explorer/src/app/routes/network-parameters/network-parameters.tsx
+++ b/apps/explorer/src/app/routes/network-parameters/network-parameters.tsx
@@ -10,6 +10,7 @@ import {
   formatNumber,
   t,
 } from '@vegaprotocol/react-helpers';
+import { suitableForSyntaxHighlighter } from '@vegaprotocol/react-helpers';
 import { RouteTitle } from '../../components/route-title';
 import type {
   NetworkParametersQuery,
@@ -58,7 +59,7 @@ export const NetworkParameterRow = ({
 }: {
   row: NetworkParametersQuery_networkParameters;
 }) => {
-  const isSyntaxRow = isJsonObject(value);
+  const isSyntaxRow = suitableForSyntaxHighlighter(value);
 
   return (
     <KeyValueTableRow
@@ -85,14 +86,6 @@ export const NetworkParameterRow = ({
   );
 };
 
-export const isJsonObject = (str: string) => {
-  try {
-    return JSON.parse(str) && Object.keys(JSON.parse(str)).length > 0;
-  } catch (e) {
-    return false;
-  }
-};
-
 export const NETWORK_PARAMETERS_QUERY = gql`
   query NetworkParametersQuery {
     networkParameters {
diff --git a/apps/token-e2e/src/integration/view/governance.cy.js b/apps/token-e2e/src/integration/view/governance.cy.js
index bc361d473..fdb94d740 100644
--- a/apps/token-e2e/src/integration/view/governance.cy.js
+++ b/apps/token-e2e/src/integration/view/governance.cy.js
@@ -63,7 +63,10 @@ context(
           .and('have.text', 'There are no enacted or rejected proposals');
       });
 
-      it('should be able to see a connect wallet button - if vega wallet disconnected and new proposal button selected', function () {
+      // Skipping this test for now, the new proposal button no longer takes a user directly
+      // to a proposal form, instead it takes them to a page where they can select a proposal type.
+      // Keeping this test here for now as it can be repurposed to test the new proposal forms.
+      it.skip('should be able to see a connect wallet button - if vega wallet disconnected and new proposal button selected', function () {
         cy.get(newProposalButton).should('be.visible').click();
         cy.get(connectToVegaWalletButton)
           .should('be.visible')
diff --git a/apps/token/.env.devnet b/apps/token/.env.devnet
index 451952344..f8d8c82da 100644
--- a/apps/token/.env.devnet
+++ b/apps/token/.env.devnet
@@ -7,3 +7,4 @@ NX_ETHEREUM_PROVIDER_URL=https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9
 NX_ETHERSCAN_URL=https://ropsten.etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_VEGA_EXPLORER_URL=https://dev.explorer.vega.xyz
+NX_VEGA_DOCS_URL=https://docs.vega.xyz/docs/testnet
diff --git a/apps/token/.env.mainnet b/apps/token/.env.mainnet
index da47e4bb9..8c4b4b983 100644
--- a/apps/token/.env.mainnet
+++ b/apps/token/.env.mainnet
@@ -7,3 +7,4 @@ NX_ETHEREUM_PROVIDER_URL=https://mainnet.infura.io/v3/4f846e79e13f44d1b51bbd7ed9
 NX_ETHERSCAN_URL=https://etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_VEGA_EXPLORER_URL=https://explorer.vega.xyz
+NX_VEGA_DOCS_URL=https://docs.vega.xyz/docs/mainnet
diff --git a/apps/token/.env.stagnet3 b/apps/token/.env.stagnet3
index 42022681b..26989e5c4 100644
--- a/apps/token/.env.stagnet3
+++ b/apps/token/.env.stagnet3
@@ -7,6 +7,7 @@ NX_VEGA_ENV=STAGNET3
 NX_VEGA_NETWORKS='{"DEVNET":"https://dev.token.vega.xyz","STAGNET3":"https://stagnet3.token.vega.xyz","TESTNET":"https://token.fairground.wtf","MAINNET":"https://token.vega.xyz"}'
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/stagnet3-network.json
 NX_VEGA_EXPLORER_URL=https://staging3.explorer.vega.xyz
+NX_VEGA_DOCS_URL=https://docs.vega.xyz/docs/testnet
 
 # App flags
 NX_EXPLORER_ASSETS=1
diff --git a/apps/token/.env.testnet b/apps/token/.env.testnet
index 628fd7b21..620838241 100644
--- a/apps/token/.env.testnet
+++ b/apps/token/.env.testnet
@@ -7,3 +7,4 @@ NX_ETHEREUM_PROVIDER_URL=https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9
 NX_ETHERSCAN_URL=https://ropsten.etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf
+NX_VEGA_DOCS_URL=https://docs.vega.xyz/docs/testnet
diff --git a/apps/token/src/config/env.ts b/apps/token/src/config/env.ts
index 0cacbb24d..ebd3369fb 100644
--- a/apps/token/src/config/env.ts
+++ b/apps/token/src/config/env.ts
@@ -48,6 +48,8 @@ export const ENV = {
   // Environment
   dsn: windowOrDefault('NX_SENTRY_DSN'),
   urlConnect: TRUTHY.includes(windowOrDefault('NX_ETH_URL_CONNECT')),
+  explorerUrl: windowOrDefault('NX_VEGA_EXPLORER'),
+  docsUrl: windowOrDefault('NX_VEGA_DOCS_URL'),
   ethWalletMnemonic: windowOrDefault('NX_ETH_WALLET_MNEMONIC'),
   localProviderUrl: windowOrDefault('NX_LOCAL_PROVIDER_URL'),
   flags: {
diff --git a/apps/token/src/config/index.ts b/apps/token/src/config/index.ts
index 095810f4f..7e7dcb199 100644
--- a/apps/token/src/config/index.ts
+++ b/apps/token/src/config/index.ts
@@ -1,3 +1,3 @@
 export * from './flags';
 export * from './links';
-export * from './network-params';
+export * from './env';
diff --git a/apps/token/src/config/links.ts b/apps/token/src/config/links.ts
index e93d28cbf..c48af1e6b 100644
--- a/apps/token/src/config/links.ts
+++ b/apps/token/src/config/links.ts
@@ -11,4 +11,5 @@ export const Links = {
   STAKING_GUIDE:
     'https://docs.vega.xyz/docs/mainnet/concepts/vega-chain/#staking-on-vega',
   GOVERNANCE_PAGE: 'https://vega.xyz/governance',
+  PROPOSALS_GUIDE: 'https://docs.vega.xyz/docs/mainnet/tutorials/proposals',
 };
diff --git a/apps/token/src/config/network-params.ts b/apps/token/src/config/network-params.ts
deleted file mode 100644
index 8ecd63225..000000000
--- a/apps/token/src/config/network-params.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export const NetworkParams = {
-  ETHEREUM_CONFIG: 'blockchains.ethereumConfig',
-  REWARD_ASSET: 'reward.asset',
-  REWARD_PAYOUT_DURATION: 'reward.staking.delegation.payoutDelay',
-  GOV_UPDATE_MARKET_REQUIRED_MAJORITY:
-    'governance.proposal.updateMarket.requiredMajority',
-  GOV_UPDATE_MARKET_REQUIRED_PARTICIPATION:
-    'governance.proposal.updateMarket.requiredParticipation',
-  GOV_NEW_MARKET_REQUIRED_MAJORITY:
-    'governance.proposal.market.requiredMajority',
-  GOV_NEW_MARKET_REQUIRED_PARTICIPATION:
-    'governance.proposal.market.requiredParticipation',
-  GOV_ASSET_REQUIRED_MAJORITY: 'governance.proposal.asset.requiredMajority',
-  GOV_ASSET_REQUIRED_PARTICIPATION:
-    'governance.proposal.asset.requiredParticipation',
-  GOV_UPDATE_NET_PARAM_REQUIRED_MAJORITY:
-    'governance.proposal.updateNetParam.requiredMajority',
-  GOV_UPDATE_NET_PARAM_REQUIRED_PARTICIPATION:
-    'governance.proposal.updateNetParam.requiredParticipation',
-  GOV_FREEFORM_REQUIRED_PARTICIPATION:
-    'governance.proposal.freeform.requiredParticipation',
-  GOV_FREEFORM_REQUIRED_MAJORITY:
-    'governance.proposal.freeform.requiredMajority',
-  VALIDATOR_DELEGATION_MIN_AMOUNT: 'validators.delegation.minAmount',
-};
diff --git a/apps/token/src/i18n/translations/dev.json b/apps/token/src/i18n/translations/dev.json
index cdb4b97a1..de312845b 100644
--- a/apps/token/src/i18n/translations/dev.json
+++ b/apps/token/src/i18n/translations/dev.json
@@ -630,8 +630,59 @@
   "FilterProposalsDescription": "Filter by proposal ID or proposer ID",
   "Freeform proposal": "Freeform proposal",
   "NewProposal": "New proposal",
-  "MinProposalRequirements": "You must have at least 1 VEGA associated to make a proposal",
+  "ProposalTypeQuestion": "What type of proposal would you like to make?",
+  "NetworkParameterProposal": "Update network parameter proposal",
+  "NewMarketProposal": "New market proposal",
+  "UpdateMarketProposal": "Update market proposal",
+  "NewAssetProposal": "New asset proposal",
+  "NewFreeformProposal": "New freeform proposal",
+  "NewRawProposal": "New raw proposal",
+  "MinProposalRequirements": "You must have at least {{value}} VEGA associated to make a proposal",
   "totalSupply": "Total Supply",
   "viaWallet": "via wallet",
-  "viaContract": "via vesting"
+  "viaContract": "via vesting",
+  "ProposalDocsPrefix": "For guidance on how to make proposals, see",
+  "NetworkParameter": "Network parameter",
+  "NewMarket": "New market",
+  "UpdateMarket": "Update market",
+  "NewAsset": "New asset",
+  "Freeform": "Freeform",
+  "RawProposal": "Let me choose (raw proposal)",
+  "UseMin": "Use minimum",
+  "UseMax": "Use maximum",
+  "Proposal": "Proposal",
+  "ProposalRationale": "Proposal rationale",
+  "ProposalTitle": "Title",
+  "ProposalTitleText": "Tell people what you are proposing and why (100 characters or less)",
+  "ProposalsGuide": "proposals guide",
+  "ProposalDescription": "Description",
+  "ProposalDescriptionText": "Full justification for what you are proposing (20,000 characters or less). Markdown is recommended. When linking to external resources please use IPFS",
+  "ProposalTerms": "Proposal terms (JSON format)",
+  "ProposalTermsText": "For more information visit",
+  "ProposalReference": "Reference",
+  "ProposalVoteTitle": "Vote deadline",
+  "ProposalVoteAndEnactmentTitle": "Vote deadline and enactment",
+  "ProposalVoteDeadline": "Time till voting closes",
+  "ProposalEnactmentDeadline": "Time till enactment (after vote close)",
+  "ProposalValidationDeadline": "Time till ERC-20 asset validation. Maximum value is affected by the vote deadline.",
+  "ThisWillSetVotingDeadlineTo": "This will set the voting deadline to",
+  "ThisWillSetEnactmentDeadlineTo": "This will set the enactment date to",
+  "ThisWillSetValidationDeadlineTo": "This will set the validation deadline to",
+  "Hours": "hours",
+  "ThisWillAdd2MinutesToAllowTimeToConfirmInWallet": "Note: we add 2 minutes of extra time when you choose the minimum value. This gives you time to confirm the proposal in your wallet.",
+  "SelectAMarketToChange": "Select a market to change",
+  "MarketName": "Market name",
+  "MarketCode": "Market code",
+  "MarketId": "Market ID",
+  "ProposeNewMarketTerms": "terms.changes.newMarket (JSON format)",
+  "ProposeUpdateMarketTerms": "terms.updateMarket.changes (JSON format)",
+  "SelectAParameterToChange": "Select a parameter to change",
+  "SelectParameter": "Select parameter",
+  "SelectMarket": "Select market",
+  "CurrentValue": "Current value",
+  "NewProposedValue": "New proposed value",
+  "MoreProposalsInfo": "To see Explorer data on proposals visit",
+  "MoreNetParamsInfo": "To see Explorer data on network params visit",
+  "MoreMarketsInfo": "To see Explorer data on existing markets visit",
+  "MoreAssetsInfo": "To see Explorer data on existing assets visit"
 }
diff --git a/apps/token/src/routes/contracts/index.tsx b/apps/token/src/routes/contracts/index.tsx
index 11e76ba76..9d5f03a99 100644
--- a/apps/token/src/routes/contracts/index.tsx
+++ b/apps/token/src/routes/contracts/index.tsx
@@ -6,8 +6,11 @@ import { useEnvironment } from '@vegaprotocol/environment';
 import { Heading } from '../../components/heading';
 import { SplashLoader } from '../../components/splash-loader';
 import { ENV } from '../../config/env';
+import type { RouteChildProps } from '../index';
+import { useDocumentTitle } from '../../hooks/use-document-title';
 
-const Contracts = () => {
+const Contracts = ({ name }: RouteChildProps) => {
+  useDocumentTitle(name);
   const { config } = useEthereumConfig();
   const { ETHERSCAN_URL } = useEnvironment();
 
diff --git a/apps/token/src/routes/governance/components/propose/index.tsx b/apps/token/src/routes/governance/components/propose/index.tsx
new file mode 100644
index 000000000..92f807ec4
--- /dev/null
+++ b/apps/token/src/routes/governance/components/propose/index.tsx
@@ -0,0 +1,8 @@
+export * from './proposal-form-subheader';
+export * from './proposal-form-min-requirements';
+export * from './proposal-form-title';
+export * from './proposal-form-description';
+export * from './proposal-form-terms';
+export * from './proposal-form-submit';
+export * from './proposal-form-transaction-dialog';
+export * from './proposal-form-vote-and-enactment-deadline';
diff --git a/apps/token/src/routes/governance/components/propose/proposal-form-description.spec.tsx b/apps/token/src/routes/governance/components/propose/proposal-form-description.spec.tsx
new file mode 100644
index 000000000..de63017a3
--- /dev/null
+++ b/apps/token/src/routes/governance/components/propose/proposal-form-description.spec.tsx
@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import { ProposalFormDescription } from './proposal-form-description';
+
+describe('Proposal Form Description', () => {
+  it('should display error text', () => {
+    const register = jest.fn();
+    render(
+      <ProposalFormDescription
+        registerField={register('proposalDescription')}
+        errorMessage="Error text"
+      />
+    );
+    expect(screen.getByText('Error text')).toBeInTheDocument();
+  });
+});
diff --git a/apps/token/src/routes/governance/components/propose/proposal-form-description.tsx b/apps/token/src/routes/governance/components/propose/proposal-form-description.tsx
new file mode 100644
index 000000000..7071406f1
--- /dev/null
+++ b/apps/token/src/routes/governance/components/propose/proposal-form-description.tsx
@@ -0,0 +1,32 @@
+import { useTranslation } from 'react-i18next';
+import { FormGroup, InputError, TextArea } from '@vegaprotocol/ui-toolkit';
+import type { UseFormRegisterReturn } from 'react-hook-form';
+
+interface ProposalFormDescriptionProps {
+  registerField: UseFormRegisterReturn<'proposalDescription'>;
+  errorMessage: string | undefined;
+}
+
+export const ProposalFormDescription = ({
+  registerField: register,
+  errorMessage,
+}: ProposalFormDescriptionProps) => {
+  const { t } = useTranslation();
+  return (
+    <FormGroup
+      label={t('ProposalDescription')}
+      labelDescription={t('ProposalDescriptionText')}
+      labelFor="proposal-description"
+    >
+      <TextArea
+        id="proposal-description"
+        maxLength={20000}
+        className="min-h-[200px]"
+        hasError={Boolean(errorMessage)}
+        data-testid="proposal-description"
+        {...register}
+      />
+      {errorMessage && <InputError intent="danger">{errorMessage}</InputError>}
+    </FormGroup>
+  );
+};
diff --git a/apps/token/src/routes/governance/components/propose/proposal-form-min-requirements.spec.tsx b/apps/token/src/routes/governance/components/propose/proposal-form-min-requirements.spec.tsx
new file mode 100644
index 000000000..5be606756
--- /dev/null
+++ b/apps/token/src/routes/governance/components/propose/proposal-form-min-requirements.spec.tsx
@@ -0,0 +1,32 @@
+import { render } from '@testing-library/react';
+import { ProposalFormMinRequirements } from './proposal-form-min-requirements';
+
+describe('ProposalFormMinRequirements', () => {
+  it('should render successfully with spam protection value, if larger', () => {
+    const { baseElement } = render(
+      <ProposalFormMinRequirements
+        minProposerBalance="1000000000000000000"
+        spamProtectionMin="2000000000000000000"
+      />
+    );
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement).toHaveTextContent(
+      'You must have at least 2 VEGA associated to make a proposal'
+    );
+  });
+
+  it('should render successfully with min proposer value, if larger', () => {
+    const { baseElement } = render(
+      <ProposalFormMinRequirements
+        minProposerBalance="3000000000000000000"
+        spamProtectionMin="1000000000000000000"
+      />
+    );
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement).toHaveTextContent(
+      'You must have at least 3 VEGA associated to make a proposal'
+    );
+  });
+});
diff --git a/apps/token/src/routes/governance/components/propose/proposal-form-min-requirements.tsx b/apps/token/src/routes/governance/components/propose/proposal-form-min-requirements.tsx
new file mode 100644
index 000000000..476147f59
--- /dev/null
+++ b/apps/token/src/routes/governance/components/propose/proposal-form-min-requirements.tsx
@@ -0,0 +1,30 @@
+import { useTranslation } from 'react-i18next';
+import BigNumber from 'bignumber.js';
+import { addDecimal } from '@vegaprotocol/react-helpers';
+
+interface ProposalFormMinRequirementsProps {
+  minProposerBalance: string | undefined;
+  spamProtectionMin: string | undefined;
+}
+
+export const ProposalFormMinRequirements = ({
+  minProposerBalance,
+  spamProtectionMin,
+}: ProposalFormMinRequirementsProps) => {
+  const { t } = useTranslation();
+  const minProposerBalanceFormatted =
+    minProposerBalance && new BigNumber(addDecimal(minProposerBalance, 18));
+  const spamProtectionMinFormatted =
+    spamProtectionMin && new BigNumber(addDecimal(spamProtectionMin, 18));
+
+  const larger =
+    Number(minProposerBalanceFormatted) > (spamProtectionMinFormatted || 0)
+      ? minProposerBalanceFormatted
+      : spamProtectionMinFormatted;
+
+  return (
+    <p className="mb-4" data-testid="min-proposal-requirements">
+      {t('MinProposalRequirements', { value: larger })}
+    </p>
+  );
+};
diff --git a/apps/token/src/routes/governance/components/propose/proposal-form-subheader.tsx b/apps/token/src/routes/governance/components/propose/proposal-form-subheader.tsx
new file mode 100644
index 000000000..e329390e0
--- /dev/null
+++ b/apps/token/src/routes/governance/components/propose/proposal-form-subheader.tsx
@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+
+interface ProposalFormSubheaderProps {
+  children: ReactNode;
+}
+
+export const ProposalFormSubheader = ({
+  children,
+}: ProposalFormSubheaderProps) => <h2 className="mt-8 mb-4">{children}</h2>;
diff --git a/apps/token/src/routes/governance/components/propose/proposal-form-submit.tsx b/apps/token/src/routes/governance/components/propose/proposal-form-submit.tsx
new file mode 100644
index 000000000..ea807f152
--- /dev/null
+++ b/apps/token/src/routes/governance/components/propose/proposal-form-submit.tsx
@@ -0,0 +1,24 @@
+import { useTranslation } from 'react-i18next';
+import { Button } from '@vegaprotocol/ui-toolkit';
+
+interface ProposalFormSubmitProps {
+  isSubmitting: boolean;
+}
+
+export const ProposalFormSubmit = ({
+  isSubmitting,
+}: ProposalFormSubmitProps) => {
+  const { t } = useTranslation();
+  return (
+    <div className="mt-10 my-20">
+      <Button
+        variant="primary"
+        type="submit"
+        data-testid="proposal-submit"
+        disabled={isSubmitting}
+      >
+        {isSubmitting ? t('Submitting') : t('Submit')} {t('Proposal')}
+      </Button>
+    </div>
+  );
+};
diff --git a/apps/token/src/routes/governance/components/propose/proposal-form-terms.spec.tsx b/apps/token/src/routes/governance/components/propose/proposal-form-terms.spec.tsx
new file mode 100644
index 000000000..430b0dcc1
--- /dev/null
+++ b/apps/token/src/routes/governance/components/propose/proposal-form-terms.spec.tsx
@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import { ProposalFormTerms } from './proposal-form-terms';
+
+jest.mock('@vegaprotocol/environment', () => ({
+  useEnvironment: () => ({
+    VEGA_DOCS_URL: 'https://docs.vega.xyz',
+  }),
+}));
+
+const renderComponent = () => {
+  const register = jest.fn();
+  render(
+    <ProposalFormTerms
+      registerField={register('proposalTerms')}
+      errorMessage="Error text"
+    />
+  );
+};
+
+describe('Proposal Form Terms', () => {
+  it('should render', () => {
+    renderComponent();
+    expect(screen.getByTestId('proposal-terms')).toBeTruthy();
+  });
+
+  it('should display error text', () => {
+    renderComponent();
+    expect(screen.getByText('Error text')).toBeInTheDocument();
+  });
+
+  it('should render the generic docs link if no custom override', () => {
+    renderComponent();
+    expect(
+      screen.getByText('https://docs.vega.xyz/tutorials/proposals')
+    ).toBeInTheDocument();
+  });
+
+  it('should render the custom docs link if provided', () => {
+    const register = jest.fn();
+    render(
+      <ProposalFormTerms
+        registerField={register('proposalTerms')}
+        errorMessage="Error text"
+        customDocLink="/custom"
+      />
+    );
+    expect(
+      screen.getByText('https://docs.vega.xyz/tutorials/proposals/custom')
+    ).toBeInTheDocument();
+  });
+});
diff --git a/apps/token/src/routes/governance/components/propose/proposal-form-terms.tsx b/apps/token/src/routes/governance/components/propose/proposal-form-terms.tsx
new file mode 100644
index 000000000..d2fd4c404
--- /dev/null
+++ b/apps/token/src/routes/governance/components/propose/proposal-form-terms.tsx
@@ -0,0 +1,51 @@
+import { useTranslation } from 'react-i18next';
+import {
+  FormGroup,
+  InputError,
+  Link,
+  TextArea,
+} from '@vegaprotocol/ui-toolkit';
+import { useEnvironment } from '@vegaprotocol/environment';
+import type { UseFormRegisterReturn } from 'react-hook-form';
+
+interface ProposalFormTermsProps {
+  registerField: UseFormRegisterReturn<'proposalTerms'>;
+  errorMessage: string | undefined;
+  labelOverride?: string;
+  customDocLink?: string;
+}
+
+export const ProposalFormTerms = ({
+  registerField: register,
+  errorMessage,
+  labelOverride,
+  customDocLink,
+}: ProposalFormTermsProps) => {
+  const { VEGA_DOCS_URL } = useEnvironment();
+  const { t } = useTranslation();
+  return (
+    <FormGroup
+      label={labelOverride || t('ProposalTerms')}
+      labelFor="proposal-terms"
+    >
+      {VEGA_DOCS_URL && (
+        <div className="mt-[-4px] mb-2 text-sm font-light">
+          <span className="mr-1">{t('ProposalTermsText')}</span>
+          <Link
+            href={`${VEGA_DOCS_URL}/tutorials/proposals${customDocLink || ''}`}
+            target="_blank"
+          >{`${VEGA_DOCS_URL}/tutorials/proposals${customDocLink || ''}`}</Link>
+        </div>
+      )}
+
+      <TextArea
+        id="proposal-terms"
+        className="min-h-[200px]"
+        hasError={Boolean(errorMessage)}
+        data-testid="proposal-terms"
+        {...register}
+      />
+      {errorMessage && <InputError intent="danger">{errorMessage}</InputError>}
+    </FormGroup>
+  );
+};
diff --git a/apps/token/src/routes/governance/components/propose/proposal-form-title.spec.tsx b/apps/token/src/routes/governance/components/propose/proposal-form-title.spec.tsx
new file mode 100644
index 000000000..6049e23f8
--- /dev/null
+++ b/apps/token/src/routes/governance/components/propose/proposal-form-title.spec.tsx
@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import { ProposalFormTitle } from './proposal-form-title';
+
+describe('Proposal Form Title', () => {
+  it('should display error text', () => {
+    const register = jest.fn();
+    render(
+      <ProposalFormTitle
+        registerField={register('proposalTitle')}
+        errorMessage="Error text"
+      />
+    );
+    expect(screen.getByText('Error text')).toBeInTheDocument();
+  });
+});
diff --git a/apps/token/src/routes/governance/components/propose/proposal-form-title.tsx b/apps/token/src/routes/governance/components/propose/proposal-form-title.tsx
new file mode 100644
index 000000000..5b53e893d
--- /dev/null
+++ b/apps/token/src/routes/governance/components/propose/proposal-form-title.tsx
@@ -0,0 +1,31 @@
+import { useTranslation } from 'react-i18next';
+import { FormGroup, Input, InputError } from '@vegaprotocol/ui-toolkit';
+import type { UseFormRegisterReturn } from 'react-hook-form';
+
+interface ProposalFormTitleProps {
+  registerField: UseFormRegisterReturn<'proposalTitle'>;
+  errorMessage: string | undefined;
+}
+
+export const ProposalFormTitle = ({
+  registerField: register,
+  errorMessage,
+}: ProposalFormTitleProps) => {
+  const { t } = useTranslation();
+  return (
+    <FormGroup
+      label={t('ProposalTitle')}
+      labelFor="proposal-title"
+      labelDescription={t('ProposalTitleText')}
+    >
+      <Input
+        id="proposal-title"
+        maxLength={100}
+        hasError={Boolean(errorMessage)}
+        data-testid="proposal-title"
+        {...register}
+      />
+      {errorMessage && <InputError intent="danger">{errorMessage}</InputError>}
+    </FormGroup>
+  );
+};
diff --git a/apps/token/src/routes/governance/components/propose/proposal-form-transaction-dialog.tsx b/apps/token/src/routes/governance/components/propose/proposal-form-transaction-dialog.tsx
new file mode 100644
index 000000000..a3ae3df6a
--- /dev/null
+++ b/apps/token/src/routes/governance/components/propose/proposal-form-transaction-dialog.tsx
@@ -0,0 +1,29 @@
+import {
+  getProposalDialogIcon,
+  getProposalDialogIntent,
+  getProposalDialogTitle,
+} from '@vegaprotocol/governance';
+import type { ProposalEvent_busEvents_event_Proposal } from '@vegaprotocol/governance';
+import type { DialogProps } from '@vegaprotocol/wallet';
+
+interface ProposalFormTransactionDialogProps {
+  finalizedProposal: ProposalEvent_busEvents_event_Proposal | null;
+  TransactionDialog: (props: DialogProps) => JSX.Element;
+}
+
+export const ProposalFormTransactionDialog = ({
+  finalizedProposal,
+  TransactionDialog,
+}: ProposalFormTransactionDialogProps) => (
+  <div data-testid="proposal-transaction-dialog">
+    <TransactionDialog
+      title={getProposalDialogTitle(finalizedProposal?.state)}
+      intent={getProposalDialogIntent(finalizedProposal?.state)}
+      icon={getProposalDialogIcon(finalizedProposal?.state)}
+    >
+      {finalizedProposal?.rejectionReason ? (
+        <p>{finalizedProposal.rejectionReason}</p>
+      ) : undefined}
+    </TransactionDialog>
+  </div>
+);
diff --git a/apps/token/src/routes/governance/components/propose/proposal-form-vote-and-enactment-deadline.spec.tsx b/apps/token/src/routes/governance/components/propose/proposal-form-vote-and-enactment-deadline.spec.tsx
new file mode 100644
index 000000000..139fd6d85
--- /dev/null
+++ b/apps/token/src/routes/governance/components/propose/proposal-form-vote-and-enactment-deadline.spec.tsx
@@ -0,0 +1,194 @@
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import { ProposalFormVoteAndEnactmentDeadline } from './proposal-form-vote-and-enactment-deadline';
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  jest.setSystemTime(new Date('2022-01-01T00:00:00.000Z'));
+});
+
+afterEach(() => {
+  jest.useRealTimers();
+});
+
+const minVoteDeadline = '1h0m0s';
+const maxVoteDeadline = '5h0m0s';
+const minEnactDeadline = '1h0m0s';
+const maxEnactDeadline = '4h0m0s';
+
+const renderComponent = () => {
+  const register = jest.fn();
+  render(
+    <ProposalFormVoteAndEnactmentDeadline
+      voteRegister={register('proposalVoteDeadline')}
+      voteErrorMessage={undefined}
+      voteMinClose={minVoteDeadline}
+      voteMaxClose={maxVoteDeadline}
+      enactmentRegister={register('proposalEnactmentDeadline')}
+      enactmentErrorMessage={undefined}
+      enactmentMinClose={minEnactDeadline}
+      enactmentMaxClose={maxEnactDeadline}
+      validationRequired={true}
+      validationRegister={register('proposalValidationDeadline')}
+      validationErrorMessage={undefined}
+    />
+  );
+};
+
+describe('Proposal form vote, validation and enactment deadline', () => {
+  it('should render all component parts successfully', () => {
+    renderComponent();
+    expect(screen.getByTestId('proposal-vote-deadline')).toBeTruthy();
+    expect(screen.getByTestId('proposal-enactment-deadline')).toBeTruthy();
+    expect(screen.getByTestId('proposal-validation-deadline')).toBeTruthy();
+  });
+
+  it('should have the correct initial values', () => {
+    renderComponent();
+    const deadlineInput = screen.getByTestId('proposal-vote-deadline');
+    expect(deadlineInput).toHaveValue(1);
+    const enactmentDeadlineInput = screen.getByTestId(
+      'proposal-enactment-deadline'
+    );
+    expect(enactmentDeadlineInput).toHaveValue(1);
+    const validationDeadlineInput = screen.getByTestId(
+      'proposal-validation-deadline'
+    );
+    expect(validationDeadlineInput).toHaveValue(0);
+  });
+
+  it('should use the voting max and min values when the buttons are clicked', () => {
+    renderComponent();
+    const voteDeadlineInput = screen.getByTestId('proposal-vote-deadline');
+    const maxButton = screen.getByTestId('max-vote');
+    const minButton = screen.getByTestId('min-vote');
+    fireEvent.click(maxButton);
+    expect(voteDeadlineInput).toHaveValue(5);
+    fireEvent.click(minButton);
+    expect(voteDeadlineInput).toHaveValue(1);
+  });
+
+  it('should use the validation max and min values when the buttons are clicked', () => {
+    renderComponent();
+    const validationDeadlineInput = screen.getByTestId(
+      'proposal-validation-deadline'
+    );
+    const maxButton = screen.getByTestId('max-validation');
+    const minButton = screen.getByTestId('min-validation');
+    fireEvent.click(maxButton);
+    // Note: the validation max value is determined by the vote deadline max value,
+    // which will currently be the default value of 1
+    expect(validationDeadlineInput).toHaveValue(1);
+    fireEvent.click(minButton);
+    expect(validationDeadlineInput).toHaveValue(0);
+  });
+
+  it('should update the validation deadline max value when the vote deadline value changes', () => {
+    renderComponent();
+    const voteDeadlineInput = screen.getByTestId('proposal-vote-deadline');
+    const validationDeadlineInput = screen.getByTestId(
+      'proposal-validation-deadline'
+    );
+    const maxButton = screen.getByTestId('max-validation');
+    fireEvent.change(voteDeadlineInput, { target: { value: 2 } });
+    fireEvent.click(maxButton);
+    expect(validationDeadlineInput).toHaveValue(2);
+  });
+
+  it('should use the enactment max and min values when the buttons are clicked', () => {
+    renderComponent();
+    const enactmentDeadlineInput = screen.getByTestId(
+      'proposal-enactment-deadline'
+    );
+    const maxButton = screen.getByTestId('max-enactment');
+    const minButton = screen.getByTestId('min-enactment');
+    fireEvent.click(maxButton);
+    expect(enactmentDeadlineInput).toHaveValue(4);
+    fireEvent.click(minButton);
+    expect(enactmentDeadlineInput).toHaveValue(1);
+  });
+
+  it('should show the 2 mins extra message when the vote deadline is set to minimum', () => {
+    renderComponent();
+    const voteDeadlineInput = screen.getByTestId('proposal-vote-deadline');
+    const minButton = screen.getByTestId('min-vote');
+    fireEvent.click(minButton);
+    expect(voteDeadlineInput).toHaveValue(1);
+    expect(screen.getByTestId('voting-2-mins-extra')).toBeTruthy();
+  });
+
+  it('should show the 2 mins extra message when the validation deadline is set to minimum', () => {
+    renderComponent();
+    const validationDeadlineInput = screen.getByTestId(
+      'proposal-validation-deadline'
+    );
+    const minButton = screen.getByTestId('min-validation');
+    fireEvent.click(minButton);
+    expect(validationDeadlineInput).toHaveValue(0);
+    expect(screen.getByTestId('validation-2-mins-extra')).toBeTruthy();
+  });
+
+  it('should show the correct datetimes', () => {
+    renderComponent();
+    // Should be adding 2 mins to the vote deadline as the minimum is set by
+    // default, and we add 2 mins for wallet confirmation
+    expect(screen.getByTestId('voting-date')).toHaveTextContent(
+      '1/1/2022, 1:02:00 AM'
+    );
+    expect(screen.getByTestId('validation-date')).toHaveTextContent(
+      '1/1/2022, 12:02:00 AM'
+    );
+    expect(screen.getByTestId('enactment-date')).toHaveTextContent(
+      '1/1/2022, 2:00:00 AM'
+    );
+  });
+
+  it('should be updating every second, so show the correct datetimes when 30 seconds have passed', () => {
+    renderComponent();
+    act(() => {
+      jest.advanceTimersByTime(30000);
+    });
+
+    expect(screen.getByTestId('voting-date')).toHaveTextContent(
+      '1/1/2022, 1:02:30 AM'
+    );
+    expect(screen.getByTestId('validation-date')).toHaveTextContent(
+      '1/1/2022, 12:02:30 AM'
+    );
+    expect(screen.getByTestId('enactment-date')).toHaveTextContent(
+      '1/1/2022, 2:00:30 AM'
+    );
+  });
+
+  it('update the vote deadline date and the enactment deadline date when the vote deadline is changed', () => {
+    renderComponent();
+    const voteDeadlineInput = screen.getByTestId('proposal-vote-deadline');
+    fireEvent.change(voteDeadlineInput, { target: { value: 2 } });
+    expect(screen.getByTestId('voting-date')).toHaveTextContent(
+      '1/1/2022, 2:00:00 AM'
+    );
+    expect(screen.getByTestId('enactment-date')).toHaveTextContent(
+      '1/1/2022, 3:00:00 AM'
+    );
+  });
+
+  it('updates the validation deadline max and date when the vote deadline max is changed', () => {
+    renderComponent();
+    const voteDeadlineMinButton = screen.getByTestId('min-vote');
+    const voteDeadlineMaxButton = screen.getByTestId('max-vote');
+    const validationDeadlineMaxButton = screen.getByTestId('max-validation');
+    const validationDeadlineInput = screen.getByTestId(
+      'proposal-validation-deadline'
+    );
+    fireEvent.click(voteDeadlineMaxButton);
+    fireEvent.click(validationDeadlineMaxButton);
+    expect(screen.getByTestId('validation-date')).toHaveTextContent(
+      '1/1/2022, 5:00:00 AM'
+    );
+    expect(validationDeadlineInput).toHaveValue(5);
+    fireEvent.click(voteDeadlineMinButton);
+    expect(screen.getByTestId('validation-date')).toHaveTextContent(
+      '1/1/2022, 1:00:00 AM'
+    );
+    expect(validationDeadlineInput).toHaveValue(1);
+  });
+});
diff --git a/apps/token/src/routes/governance/components/propose/proposal-form-vote-and-enactment-deadline.tsx b/apps/token/src/routes/governance/components/propose/proposal-form-vote-and-enactment-deadline.tsx
new file mode 100644
index 000000000..f09a7c5f5
--- /dev/null
+++ b/apps/token/src/routes/governance/components/propose/proposal-form-vote-and-enactment-deadline.tsx
@@ -0,0 +1,446 @@
+import { useEffect, useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { parse as ISO8601Parse, toSeconds } from 'iso8601-duration';
+import {
+  ButtonLink,
+  FormGroup,
+  Input,
+  InputError,
+} from '@vegaprotocol/ui-toolkit';
+import { addHours, addMinutes } from 'date-fns';
+import { ProposalFormSubheader } from './proposal-form-subheader';
+import type { UseFormRegisterReturn } from 'react-hook-form';
+
+interface DeadlineProps {
+  vote: number;
+  enactment: number;
+  validation: number;
+}
+
+interface DeadlineDatesProps {
+  vote: Date;
+  enactment: Date;
+  validation: Date;
+}
+
+interface ValidationFormProps {
+  validationRegister:
+    | UseFormRegisterReturn<'proposalValidationDeadline'>
+    | undefined;
+  deadlines: DeadlineProps;
+  deadlineDates: DeadlineDatesProps;
+  updateValidationDeadlineAndDate: (hours: number) => void;
+  validationErrorMessage: string | undefined;
+}
+
+const ValidationForm = ({
+  validationRegister,
+  deadlines,
+  deadlineDates,
+  updateValidationDeadlineAndDate,
+  validationErrorMessage,
+}: ValidationFormProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <FormGroup
+      label={t('ProposalValidationDeadline')}
+      labelFor="proposal-validation-deadline"
+    >
+      <div className="flex items-center gap-2">
+        <div className="relative w-28">
+          <Input
+            {...validationRegister}
+            id="proposal-validation-deadline"
+            type="number"
+            value={deadlines.validation}
+            min={0}
+            max={deadlines.vote}
+            onChange={(e) => {
+              updateValidationDeadlineAndDate(Number(e.target.value));
+            }}
+            data-testid="proposal-validation-deadline"
+            className="pr-12"
+          />
+          <span className="absolute right-2 bottom-1/2 translate-y-1/2 text-sm">
+            {t('Hours')}
+          </span>
+        </div>
+        <div className="flex items-center gap-4 text-sm">
+          <ButtonLink
+            data-testid="min-validation"
+            onClick={() => updateValidationDeadlineAndDate(0)}
+          >
+            {t('UseMin')}
+          </ButtonLink>
+          <ButtonLink
+            data-testid="max-validation"
+            onClick={() => updateValidationDeadlineAndDate(deadlines.vote)}
+          >
+            {t('UseMax')}
+          </ButtonLink>
+        </div>
+      </div>
+      {validationErrorMessage && (
+        <InputError intent="danger">{validationErrorMessage}</InputError>
+      )}
+
+      {deadlineDates.validation && (
+        <p className="mt-2 text-sm text-white">
+          <span className="font-light">
+            {t('ThisWillSetValidationDeadlineTo')}
+          </span>
+          <span data-testid="validation-date" className="pl-2">
+            {deadlineDates.validation?.toLocaleString()}
+          </span>
+          {deadlines.validation === 0 && (
+            <span
+              data-testid="validation-2-mins-extra"
+              className="block mt-4 font-light"
+            >
+              {t('ThisWillAdd2MinutesToAllowTimeToConfirmInWallet')}
+            </span>
+          )}
+        </p>
+      )}
+    </FormGroup>
+  );
+};
+
+interface EnactmentFormProps {
+  enactmentRegister:
+    | UseFormRegisterReturn<'proposalEnactmentDeadline'>
+    | undefined;
+  deadlines: DeadlineProps;
+  deadlineDates: DeadlineDatesProps;
+  updateEnactmentDeadlineAndDate: (hours: number) => void;
+  enactmentErrorMessage: string | undefined;
+  minEnactmentHours: number;
+  maxEnactmentHours: number;
+}
+
+const EnactmentForm = ({
+  enactmentRegister,
+  deadlines,
+  deadlineDates,
+  updateEnactmentDeadlineAndDate,
+  enactmentErrorMessage,
+  minEnactmentHours,
+  maxEnactmentHours,
+}: EnactmentFormProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <FormGroup
+      label={t('ProposalEnactmentDeadline')}
+      labelFor="proposal-enactment-deadline"
+    >
+      <div className="flex items-center gap-2">
+        <div className="relative w-28">
+          <Input
+            {...enactmentRegister}
+            id="proposal-enactment-deadline"
+            type="number"
+            value={deadlines.enactment}
+            min={minEnactmentHours}
+            max={maxEnactmentHours}
+            onChange={(e) => {
+              updateEnactmentDeadlineAndDate(Number(e.target.value));
+            }}
+            data-testid="proposal-enactment-deadline"
+            className="pr-12"
+          />
+          <span className="absolute right-2 bottom-1/2 translate-y-1/2 text-sm">
+            {t('Hours')}
+          </span>
+        </div>
+        <div className="flex items-center gap-4 text-sm">
+          <ButtonLink
+            data-testid="min-enactment"
+            onClick={() => updateEnactmentDeadlineAndDate(minEnactmentHours)}
+          >
+            {t('UseMin')}
+          </ButtonLink>
+          <ButtonLink
+            data-testid="max-enactment"
+            onClick={() => updateEnactmentDeadlineAndDate(maxEnactmentHours)}
+          >
+            {t('UseMax')}
+          </ButtonLink>
+        </div>
+      </div>
+      {enactmentErrorMessage && (
+        <InputError intent="danger">{enactmentErrorMessage}</InputError>
+      )}
+
+      {deadlineDates.enactment && (
+        <p className="mt-2 text-sm text-white">
+          <span className="font-light">
+            {t('ThisWillSetEnactmentDeadlineTo')}
+          </span>
+          <span data-testid="enactment-date" className="pl-2">
+            {deadlineDates.enactment?.toLocaleString()}
+          </span>
+        </p>
+      )}
+    </FormGroup>
+  );
+};
+
+export interface ProposalFormVoteAndEnactmentDeadlineProps {
+  voteRegister: UseFormRegisterReturn<'proposalVoteDeadline'>;
+  voteErrorMessage: string | undefined;
+  voteMinClose: string;
+  voteMaxClose: string;
+  enactmentRequired?: boolean;
+  enactmentRegister?: UseFormRegisterReturn<'proposalEnactmentDeadline'>;
+  enactmentErrorMessage?: string;
+  enactmentMinClose?: string;
+  enactmentMaxClose?: string;
+  validationRequired?: boolean;
+  validationRegister?: UseFormRegisterReturn<'proposalValidationDeadline'>;
+  validationErrorMessage?: string;
+}
+
+export const ProposalFormVoteAndEnactmentDeadline = ({
+  voteRegister,
+  voteErrorMessage,
+  voteMinClose,
+  voteMaxClose,
+  enactmentRegister,
+  enactmentErrorMessage,
+  enactmentMinClose,
+  enactmentMaxClose,
+  validationRequired,
+  validationRegister,
+  validationErrorMessage,
+}: ProposalFormVoteAndEnactmentDeadlineProps) => {
+  const {
+    minVoteSeconds,
+    maxVoteSeconds,
+    minEnactmentSeconds,
+    maxEnactmentSeconds,
+  } = useMemo(
+    () => ({
+      minVoteSeconds: toSeconds(
+        ISO8601Parse(`PT${voteMinClose.toUpperCase()}`)
+      ),
+      maxVoteSeconds: toSeconds(
+        ISO8601Parse(`PT${voteMaxClose.toUpperCase()}`)
+      ),
+      minEnactmentSeconds:
+        enactmentMinClose &&
+        toSeconds(ISO8601Parse(`PT${enactmentMinClose.toUpperCase()}`)),
+      maxEnactmentSeconds:
+        enactmentMaxClose &&
+        toSeconds(ISO8601Parse(`PT${enactmentMaxClose.toUpperCase()}`)),
+    }),
+    [voteMinClose, voteMaxClose, enactmentMinClose, enactmentMaxClose]
+  );
+
+  // As we're rounding to hours for the simplified deadline ui presently, if vote deadline
+  // is less than one hour, make it one hour.
+  const { minVoteHours, maxVoteHours, minEnactmentHours, maxEnactmentHours } =
+    useMemo(
+      () => ({
+        minVoteHours:
+          Math.floor(minVoteSeconds / 3600) > 1
+            ? Math.floor(minVoteSeconds / 3600)
+            : 1,
+        maxVoteHours: Math.floor(maxVoteSeconds / 3600),
+        minEnactmentHours:
+          minEnactmentSeconds && Math.floor(minEnactmentSeconds / 3600) > 1
+            ? Math.floor(minEnactmentSeconds / 3600)
+            : 1,
+        maxEnactmentHours:
+          maxEnactmentSeconds && Math.floor(maxEnactmentSeconds / 3600),
+      }),
+      [minVoteSeconds, maxVoteSeconds, minEnactmentSeconds, maxEnactmentSeconds]
+    );
+
+  const [deadlines, setDeadlines] = useState<DeadlineProps>({
+    vote: minVoteHours,
+    enactment: minEnactmentHours,
+    validation: 0,
+  });
+
+  const [deadlineDates, setDeadlineDates] = useState<DeadlineDatesProps>({
+    vote:
+      deadlines.vote === minVoteHours
+        ? addHours(addMinutes(new Date(), 2), deadlines.vote)
+        : addHours(new Date(), deadlines.vote),
+    enactment: addHours(new Date(), deadlines.vote + deadlines.enactment),
+    validation:
+      deadlines.validation === 0
+        ? addHours(addMinutes(new Date(), 2), deadlines.validation)
+        : addHours(new Date(), deadlines.validation),
+  });
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDeadlineDates((prev) => ({
+        ...prev,
+        vote:
+          deadlines.vote === minVoteHours
+            ? addHours(addMinutes(new Date(), 2), deadlines.vote)
+            : addHours(new Date(), deadlines.vote),
+        enactment: addHours(new Date(), deadlines.vote + deadlines.enactment),
+        validation:
+          deadlines.validation === 0
+            ? addHours(addMinutes(new Date(), 2), deadlines.validation)
+            : addHours(new Date(), deadlines.validation),
+      }));
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [deadlines, minVoteHours]);
+
+  const updateVoteDeadlineAndDate = (hours: number) => {
+    // Validation, when needed, can only happen within the voting period. Therefore, if the
+    // vote deadline is changed, the validation deadline must be changed to be within the
+    // new vote deadline.
+    setDeadlines((prev) => ({
+      ...prev,
+      vote: hours,
+      validation: Math.min(prev.validation, hours),
+    }));
+
+    // If the vote deadline is set to minimum, add 2 mins to the date as we do
+    // this on submission to allow time to confirm in the wallet. Amending the
+    // vote deadline also changes the enactment date and potentially the validation
+    // date.
+    // The validation deadline date cannot be after the vote deadline date. Therefore,
+    // if the vote deadline is changed, the validation deadline must potentially
+    // be changed to be within the new vote deadline.
+    setDeadlineDates((prev) => ({
+      ...prev,
+      vote:
+        hours === minVoteHours
+          ? addHours(addMinutes(new Date(), 2), hours)
+          : addHours(new Date(), hours),
+      enactment: addHours(new Date(), hours + deadlines.enactment),
+      validation: addHours(new Date(), Math.min(hours, deadlines.validation)),
+    }));
+  };
+
+  const updateEnactmentDeadlineAndDate = (hours: number) => {
+    setDeadlines((prev) => ({
+      ...prev,
+      enactment: hours,
+    }));
+
+    setDeadlineDates((prev) => ({
+      ...prev,
+      enactment: addHours(deadlineDates.vote, hours),
+    }));
+  };
+
+  const updateValidationDeadlineAndDate = (hours: number) => {
+    setDeadlines((prev) => ({
+      ...prev,
+      validation: hours,
+    }));
+
+    setDeadlineDates((prev) => ({
+      ...prev,
+      validation:
+        hours === 0
+          ? addHours(addMinutes(new Date(), 2), hours)
+          : addHours(new Date(), hours),
+    }));
+  };
+
+  const { t } = useTranslation();
+  return (
+    <>
+      <ProposalFormSubheader>
+        {enactmentRegister && enactmentMinClose && enactmentMaxClose
+          ? t('ProposalVoteAndEnactmentTitle')
+          : t('ProposalVoteTitle')}
+      </ProposalFormSubheader>
+
+      <FormGroup
+        label={t('ProposalVoteDeadline')}
+        labelFor="proposal-vote-deadline"
+      >
+        <div className="flex items-center gap-2">
+          <div className="relative w-28">
+            <Input
+              {...voteRegister}
+              id="proposal-vote-deadline"
+              type="number"
+              value={deadlines.vote}
+              min={minVoteHours}
+              max={maxVoteHours}
+              onChange={(e) => {
+                updateVoteDeadlineAndDate(Number(e.target.value));
+              }}
+              data-testid="proposal-vote-deadline"
+              className="pr-12"
+            />
+            <span className="absolute right-2 bottom-1/2 translate-y-1/2 text-sm">
+              {t('Hours')}
+            </span>
+          </div>
+          <div className="flex items-center gap-4 text-sm">
+            <ButtonLink
+              data-testid="min-vote"
+              onClick={() => updateVoteDeadlineAndDate(minVoteHours)}
+            >
+              {t('UseMin')}
+            </ButtonLink>
+            <ButtonLink
+              data-testid="max-vote"
+              onClick={() => updateVoteDeadlineAndDate(maxVoteHours)}
+            >
+              {t('UseMax')}
+            </ButtonLink>
+          </div>
+        </div>
+        {voteErrorMessage && (
+          <InputError intent="danger">{voteErrorMessage}</InputError>
+        )}
+
+        {deadlineDates.vote && (
+          <p className="mt-2 text-sm text-white">
+            <span className="font-light">
+              {t('ThisWillSetVotingDeadlineTo')}
+            </span>
+            <span data-testid="voting-date" className="pl-2">
+              {deadlineDates.vote?.toLocaleString()}
+            </span>
+            {deadlines.vote === minVoteHours && (
+              <span
+                data-testid="voting-2-mins-extra"
+                className="block mt-4 font-light"
+              >
+                {t('ThisWillAdd2MinutesToAllowTimeToConfirmInWallet')}
+              </span>
+            )}
+          </p>
+        )}
+      </FormGroup>
+
+      {validationRequired && (
+        <ValidationForm
+          validationRegister={validationRegister}
+          deadlines={deadlines}
+          deadlineDates={deadlineDates}
+          updateValidationDeadlineAndDate={updateValidationDeadlineAndDate}
+          validationErrorMessage={validationErrorMessage}
+        />
+      )}
+
+      {enactmentMinClose && enactmentMaxClose && maxEnactmentHours && (
+        <EnactmentForm
+          enactmentRegister={enactmentRegister}
+          deadlines={deadlines}
+          deadlineDates={deadlineDates}
+          updateEnactmentDeadlineAndDate={updateEnactmentDeadlineAndDate}
+          enactmentErrorMessage={enactmentErrorMessage}
+          minEnactmentHours={minEnactmentHours}
+          maxEnactmentHours={maxEnactmentHours}
+        />
+      )}
+    </>
+  );
+};
diff --git a/apps/token/src/routes/governance/hooks/use-vote-information.ts b/apps/token/src/routes/governance/hooks/use-vote-information.ts
index 2bfc74852..e028c14b0 100644
--- a/apps/token/src/routes/governance/hooks/use-vote-information.ts
+++ b/apps/token/src/routes/governance/hooks/use-vote-information.ts
@@ -1,7 +1,6 @@
-import { useNetworkParams } from '@vegaprotocol/react-helpers';
+import { useNetworkParams, NetworkParams } from '@vegaprotocol/react-helpers';
 import React from 'react';
 
-import { NetworkParams } from '../../../config';
 import { useAppState } from '../../../contexts/app-state/app-state-context';
 import { BigNumber } from '../../../lib/bignumber';
 import { addDecimal } from '../../../lib/decimals';
@@ -16,63 +15,63 @@ const useProposalNetworkParams = ({
 }: {
   proposal: ProposalFields;
 }) => {
-  const { data, loading } = useNetworkParams([
-    NetworkParams.GOV_UPDATE_MARKET_REQUIRED_MAJORITY,
-    NetworkParams.GOV_UPDATE_MARKET_REQUIRED_PARTICIPATION,
-    NetworkParams.GOV_NEW_MARKET_REQUIRED_MAJORITY,
-    NetworkParams.GOV_NEW_MARKET_REQUIRED_PARTICIPATION,
-    NetworkParams.GOV_ASSET_REQUIRED_MAJORITY,
-    NetworkParams.GOV_ASSET_REQUIRED_PARTICIPATION,
-    NetworkParams.GOV_UPDATE_NET_PARAM_REQUIRED_MAJORITY,
-    NetworkParams.GOV_UPDATE_NET_PARAM_REQUIRED_PARTICIPATION,
-    NetworkParams.GOV_FREEFORM_REQUIRED_MAJORITY,
-    NetworkParams.GOV_FREEFORM_REQUIRED_PARTICIPATION,
+  const { params } = useNetworkParams([
+    NetworkParams.governance_proposal_updateMarket_requiredMajority,
+    NetworkParams.governance_proposal_updateMarket_requiredParticipation,
+    NetworkParams.governance_proposal_market_requiredMajority,
+    NetworkParams.governance_proposal_market_requiredParticipation,
+    NetworkParams.governance_proposal_asset_requiredMajority,
+    NetworkParams.governance_proposal_asset_requiredParticipation,
+    NetworkParams.governance_proposal_updateNetParam_requiredMajority,
+    NetworkParams.governance_proposal_updateNetParam_requiredParticipation,
+    NetworkParams.governance_proposal_freeform_requiredMajority,
+    NetworkParams.governance_proposal_freeform_requiredParticipation,
   ]);
-  if (loading || !data) {
+
+  if (!params) {
     return {
       requiredMajority: new BigNumber(1),
       requiredParticipation: new BigNumber(1),
     };
   }
 
-  const [
-    updateMarketMajority,
-    updateMarketParticipation,
-    newMarketMajority,
-    newMarketParticipation,
-    assetMajority,
-    assetParticipation,
-    paramMajority,
-    paramParticipation,
-    freeformMajority,
-    freeformParticipation,
-  ] = data;
-
   switch (proposal.terms.change.__typename) {
     case 'UpdateMarket':
       return {
-        requiredMajority: updateMarketMajority,
-        requiredParticipation: new BigNumber(updateMarketParticipation),
+        requiredMajority:
+          params.governance_proposal_updateMarket_requiredMajority,
+        requiredParticipation: new BigNumber(
+          params.governance_proposal_updateMarket_requiredParticipation
+        ),
       };
     case 'UpdateNetworkParameter':
       return {
-        requiredMajority: paramMajority,
-        requiredParticipation: new BigNumber(paramParticipation),
+        requiredMajority:
+          params.governance_proposal_updateNetParam_requiredMajority,
+        requiredParticipation: new BigNumber(
+          params.governance_proposal_updateNetParam_requiredParticipation
+        ),
       };
     case 'NewAsset':
       return {
-        requiredMajority: assetMajority,
-        requiredParticipation: new BigNumber(assetParticipation),
+        requiredMajority: params.governance_proposal_asset_requiredMajority,
+        requiredParticipation: new BigNumber(
+          params.governance_proposal_asset_requiredParticipation
+        ),
       };
     case 'NewMarket':
       return {
-        requiredMajority: newMarketMajority,
-        requiredParticipation: new BigNumber(newMarketParticipation),
+        requiredMajority: params.governance_proposal_market_requiredMajority,
+        requiredParticipation: new BigNumber(
+          params.governance_proposal_market_requiredParticipation
+        ),
       };
     case 'NewFreeform':
       return {
-        requiredMajority: freeformMajority,
-        requiredParticipation: freeformParticipation,
+        requiredMajority: params.governance_proposal_freeform_requiredMajority,
+        requiredParticipation: new BigNumber(
+          params.governance_proposal_freeform_requiredParticipation
+        ),
       };
     default:
       throw new Error('Unknown proposal type');
diff --git a/apps/token/src/routes/governance/propose/freeform/index.tsx b/apps/token/src/routes/governance/propose/freeform/index.tsx
new file mode 100644
index 000000000..299d87381
--- /dev/null
+++ b/apps/token/src/routes/governance/propose/freeform/index.tsx
@@ -0,0 +1,4 @@
+export {
+  ProposeFreeform,
+  ProposeFreeform as default,
+} from './propose-freeform';
diff --git a/apps/token/src/routes/governance/propose/freeform/propose-freeform.spec.tsx b/apps/token/src/routes/governance/propose/freeform/propose-freeform.spec.tsx
new file mode 100644
index 000000000..22956bbfe
--- /dev/null
+++ b/apps/token/src/routes/governance/propose/freeform/propose-freeform.spec.tsx
@@ -0,0 +1,109 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { ProposeFreeform } from './propose-freeform';
+import { MockedProvider } from '@apollo/client/testing';
+import { mockWalletContext } from '../../test-helpers/mocks';
+import { AppStateProvider } from '../../../../contexts/app-state/app-state-provider';
+import { VegaWalletContext } from '@vegaprotocol/wallet';
+import { MemoryRouter as Router } from 'react-router-dom';
+import { gql } from '@apollo/client';
+import type { NetworkParamsQuery } from '@vegaprotocol/web3';
+import type { MockedResponse } from '@apollo/client/testing';
+
+jest.mock('@vegaprotocol/environment', () => ({
+  useEnvironment: () => ({
+    VEGA_DOCS_URL: 'https://docs.vega.xyz',
+  }),
+}));
+
+const updateMarketNetworkParamsQueryMock: MockedResponse<NetworkParamsQuery> = {
+  request: {
+    query: gql`
+      query NetworkParams {
+        networkParameters {
+          key
+          value
+        }
+      }
+    `,
+  },
+  result: {
+    data: {
+      networkParameters: [
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.freeform.maxClose',
+          value: '8760h0m0s',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.freeform.maxEnact',
+          value: '8760h0m0s',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.freeform.minClose',
+          value: '1h0m0s',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.freeform.minEnact',
+          value: '2h0m0s',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.freeform.minProposerBalance',
+          value: '1',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'spam.protection.proposal.min.tokens',
+          value: '1000000000000000000',
+        },
+      ],
+    },
+  },
+};
+
+const renderComponent = () =>
+  render(
+    <Router>
+      <MockedProvider mocks={[updateMarketNetworkParamsQueryMock]}>
+        <AppStateProvider>
+          <VegaWalletContext.Provider value={mockWalletContext}>
+            <ProposeFreeform />
+          </VegaWalletContext.Provider>
+        </AppStateProvider>
+      </MockedProvider>
+    </Router>
+  );
+
+// Note: form submission is tested in propose-raw.spec.tsx. Reusable form
+// components are tested in their own directory.
+
+describe('Propose Freeform', () => {
+  it('should render successfully', async () => {
+    const { baseElement } = renderComponent();
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should render the title', async () => {
+    renderComponent();
+    await waitFor(() =>
+      expect(screen.getByText('New freeform proposal')).toBeInTheDocument()
+    );
+  });
+
+  it('should render the form components', async () => {
+    renderComponent();
+    await waitFor(() =>
+      expect(screen.getByTestId('freeform-proposal-form')).toBeTruthy()
+    );
+    expect(screen.getByTestId('min-proposal-requirements')).toBeTruthy();
+    expect(screen.getByTestId('proposal-docs-link')).toBeTruthy();
+    expect(screen.getByTestId('proposal-title')).toBeTruthy();
+    expect(screen.getByTestId('proposal-description')).toBeTruthy();
+    expect(screen.getByTestId('proposal-vote-deadline')).toBeTruthy();
+    expect(screen.getByTestId('proposal-submit')).toBeTruthy();
+    expect(screen.getByTestId('proposal-transaction-dialog')).toBeTruthy();
+  });
+});
diff --git a/apps/token/src/routes/governance/propose/freeform/propose-freeform.tsx b/apps/token/src/routes/governance/propose/freeform/propose-freeform.tsx
new file mode 100644
index 000000000..75b598b64
--- /dev/null
+++ b/apps/token/src/routes/governance/propose/freeform/propose-freeform.tsx
@@ -0,0 +1,135 @@
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import {
+  getClosingTimestamp,
+  useProposalSubmit,
+} from '@vegaprotocol/governance';
+import { useEnvironment } from '@vegaprotocol/environment';
+import {
+  ProposalFormSubheader,
+  ProposalFormMinRequirements,
+  ProposalFormTitle,
+  ProposalFormDescription,
+  ProposalFormSubmit,
+  ProposalFormTransactionDialog,
+  ProposalFormVoteAndEnactmentDeadline,
+} from '../../components/propose';
+import { AsyncRenderer, Link } from '@vegaprotocol/ui-toolkit';
+import { Heading } from '../../../../components/heading';
+import { VegaWalletContainer } from '../../../../components/vega-wallet-container';
+import { useNetworkParams, NetworkParams } from '@vegaprotocol/react-helpers';
+
+export interface FreeformProposalFormFields {
+  proposalVoteDeadline: string;
+  proposalTitle: string;
+  proposalDescription: string;
+  proposalTerms: string;
+  proposalReference: string;
+}
+
+const docsLink = 'freeform-proposal';
+
+export const ProposeFreeform = () => {
+  const { params, loading, error } = useNetworkParams([
+    NetworkParams.governance_proposal_freeform_minClose,
+    NetworkParams.governance_proposal_freeform_maxClose,
+    NetworkParams.governance_proposal_freeform_minProposerBalance,
+    NetworkParams.spam_protection_proposal_min_tokens,
+  ]);
+
+  const { VEGA_DOCS_URL, VEGA_EXPLORER_URL } = useEnvironment();
+  const { t } = useTranslation();
+  const {
+    register,
+    handleSubmit,
+    formState: { isSubmitting, errors },
+  } = useForm<FreeformProposalFormFields>();
+  const { finalizedProposal, submit, Dialog } = useProposalSubmit();
+
+  const onSubmit = async (fields: FreeformProposalFormFields) => {
+    await submit({
+      rationale: {
+        title: fields.proposalTitle,
+        description: fields.proposalDescription,
+      },
+      terms: {
+        newFreeform: {},
+        closingTimestamp: getClosingTimestamp(fields.proposalVoteDeadline),
+      },
+    });
+  };
+
+  return (
+    <AsyncRenderer loading={loading} error={error} data={params}>
+      <Heading title={t('NewFreeformProposal')} />
+      <VegaWalletContainer>
+        {() => (
+          <>
+            <ProposalFormMinRequirements
+              minProposerBalance={
+                params.governance_proposal_freeform_minProposerBalance
+              }
+              spamProtectionMin={params.spam_protection_proposal_min_tokens}
+            />
+
+            {VEGA_DOCS_URL && (
+              <p className="text-sm" data-testid="proposal-docs-link">
+                <span className="mr-1">{t('ProposalTermsText')}</span>
+                <Link
+                  href={`${VEGA_DOCS_URL}/tutorials/proposals/${docsLink}`}
+                  target="_blank"
+                >{`${VEGA_DOCS_URL}/tutorials/proposals/${docsLink}`}</Link>
+              </p>
+            )}
+
+            {VEGA_EXPLORER_URL && (
+              <p className="text-sm">
+                {t('MoreProposalsInfo')}{' '}
+                <Link
+                  href={`${VEGA_EXPLORER_URL}/governance`}
+                  target="_blank"
+                >{`${VEGA_EXPLORER_URL}/governance`}</Link>
+              </p>
+            )}
+
+            <div data-testid="freeform-proposal-form">
+              <form onSubmit={handleSubmit(onSubmit)}>
+                <ProposalFormSubheader>
+                  {t('ProposalRationale')}
+                </ProposalFormSubheader>
+
+                <ProposalFormTitle
+                  registerField={register('proposalTitle', {
+                    required: t('Required'),
+                  })}
+                  errorMessage={errors?.proposalTitle?.message}
+                />
+                <ProposalFormDescription
+                  registerField={register('proposalDescription', {
+                    required: t('Required'),
+                  })}
+                  errorMessage={errors?.proposalDescription?.message}
+                />
+
+                <ProposalFormVoteAndEnactmentDeadline
+                  voteRegister={register('proposalVoteDeadline', {
+                    required: t('Required'),
+                  })}
+                  voteErrorMessage={errors?.proposalVoteDeadline?.message}
+                  voteMinClose={params.governance_proposal_freeform_minClose}
+                  voteMaxClose={params.governance_proposal_freeform_maxClose}
+                />
+
+                <ProposalFormSubmit isSubmitting={isSubmitting} />
+                <ProposalFormTransactionDialog
+                  finalizedProposal={finalizedProposal}
+                  TransactionDialog={Dialog}
+                />
+              </form>
+            </div>
+          </>
+        )}
+      </VegaWalletContainer>
+    </AsyncRenderer>
+  );
+};
diff --git a/apps/token/src/routes/governance/propose/network-parameter/index.tsx b/apps/token/src/routes/governance/propose/network-parameter/index.tsx
new file mode 100644
index 000000000..484de5e98
--- /dev/null
+++ b/apps/token/src/routes/governance/propose/network-parameter/index.tsx
@@ -0,0 +1,4 @@
+export {
+  ProposeNetworkParameter,
+  ProposeNetworkParameter as default,
+} from './propose-network-parameter';
diff --git a/apps/token/src/routes/governance/propose/network-parameter/propose-network-parameter.spec.tsx b/apps/token/src/routes/governance/propose/network-parameter/propose-network-parameter.spec.tsx
new file mode 100644
index 000000000..056ae251d
--- /dev/null
+++ b/apps/token/src/routes/governance/propose/network-parameter/propose-network-parameter.spec.tsx
@@ -0,0 +1,141 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ProposeNetworkParameter } from './propose-network-parameter';
+import { MockedProvider } from '@apollo/client/testing';
+import { mockWalletContext } from '../../test-helpers/mocks';
+import { AppStateProvider } from '../../../../contexts/app-state/app-state-provider';
+import { VegaWalletContext } from '@vegaprotocol/wallet';
+import { MemoryRouter as Router } from 'react-router-dom';
+import { gql } from '@apollo/client';
+import type { NetworkParamsQuery } from '@vegaprotocol/web3';
+import type { MockedResponse } from '@apollo/client/testing';
+
+jest.mock('@vegaprotocol/environment', () => ({
+  useEnvironment: () => ({
+    VEGA_DOCS_URL: 'https://docs.vega.xyz',
+  }),
+}));
+
+const updateMarketNetworkParamsQueryMock: MockedResponse<NetworkParamsQuery> = {
+  request: {
+    query: gql`
+      query NetworkParams {
+        networkParameters {
+          key
+          value
+        }
+      }
+    `,
+  },
+  result: {
+    data: {
+      networkParameters: [
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.updateNetParam.maxClose',
+          value: '8760h0m0s',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.updateNetParam.maxEnact',
+          value: '8760h0m0s',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.updateNetParam.minClose',
+          value: '1h0m0s',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.updateNetParam.minEnact',
+          value: '2h0m0s',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.updateNetParam.minProposerBalance',
+          value: '1',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'spam.protection.proposal.min.tokens',
+          value: '1000000000000000000',
+        },
+      ],
+    },
+  },
+};
+
+const renderComponent = () =>
+  render(
+    <Router>
+      <MockedProvider mocks={[updateMarketNetworkParamsQueryMock]}>
+        <AppStateProvider>
+          <VegaWalletContext.Provider value={mockWalletContext}>
+            <ProposeNetworkParameter />
+          </VegaWalletContext.Provider>
+        </AppStateProvider>
+      </MockedProvider>
+    </Router>
+  );
+
+// Note: form submission is tested in propose-raw.spec.tsx. Reusable form
+// components are tested in their own directory.
+
+describe('Propose Network Parameter', () => {
+  it('should render successfully', async () => {
+    const { baseElement } = renderComponent();
+    await expect(baseElement).toBeTruthy();
+  });
+
+  it('should render the correct title', async () => {
+    renderComponent();
+    await waitFor(() =>
+      expect(screen.getByText('Update network parameter proposal')).toBeTruthy()
+    );
+  });
+
+  it('should render the form components', async () => {
+    renderComponent();
+    await waitFor(() =>
+      expect(screen.getByTestId('network-parameter-proposal-form')).toBeTruthy()
+    );
+    expect(screen.getByTestId('min-proposal-requirements')).toBeTruthy();
+    expect(screen.getByTestId('proposal-docs-link')).toBeTruthy();
+    expect(screen.getByTestId('proposal-title')).toBeTruthy();
+    expect(screen.getByTestId('proposal-description')).toBeTruthy();
+    expect(screen.getByTestId('proposal-vote-deadline')).toBeTruthy();
+    expect(screen.getByTestId('proposal-enactment-deadline')).toBeTruthy();
+    expect(screen.getByTestId('proposal-submit')).toBeTruthy();
+    expect(screen.getByTestId('proposal-transaction-dialog')).toBeTruthy();
+  });
+
+  it('should render the network param select element with no initial value', async () => {
+    renderComponent();
+    await waitFor(() =>
+      expect(screen.getByTestId('proposal-parameter-select')).toHaveValue('')
+    );
+  });
+
+  it('should render the current param value and a new value input when the network param select element is changed', async () => {
+    renderComponent();
+    await waitFor(() =>
+      expect(screen.getByTestId('proposal-parameter-select')).toHaveValue('')
+    );
+
+    fireEvent.change(screen.getByTestId('proposal-parameter-select'), {
+      target: {
+        value: 'spam_protection_proposal_min_tokens',
+      },
+    });
+
+    expect(screen.getByTestId('proposal-parameter-select')).toHaveValue(
+      'spam_protection_proposal_min_tokens'
+    );
+    expect(
+      screen.getByTestId('selected-proposal-param-current-value')
+    ).toHaveValue('1000000000000000000');
+
+    expect(
+      screen.getByTestId('selected-proposal-param-new-value')
+    ).toBeVisible();
+  });
+});
diff --git a/apps/token/src/routes/governance/propose/network-parameter/propose-network-parameter.tsx b/apps/token/src/routes/governance/propose/network-parameter/propose-network-parameter.tsx
new file mode 100644
index 000000000..d07090e89
--- /dev/null
+++ b/apps/token/src/routes/governance/propose/network-parameter/propose-network-parameter.tsx
@@ -0,0 +1,280 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
+import {
+  suitableForSyntaxHighlighter,
+  useNetworkParams,
+} from '@vegaprotocol/react-helpers';
+import {
+  useProposalSubmit,
+  getClosingTimestamp,
+  getEnactmentTimestamp,
+} from '@vegaprotocol/governance';
+import { useEnvironment } from '@vegaprotocol/environment';
+import {
+  ProposalFormSubheader,
+  ProposalFormMinRequirements,
+  ProposalFormTitle,
+  ProposalFormDescription,
+  ProposalFormSubmit,
+  ProposalFormTransactionDialog,
+  ProposalFormVoteAndEnactmentDeadline,
+} from '../../components/propose';
+import {
+  AsyncRenderer,
+  FormGroup,
+  Input,
+  InputError,
+  Link,
+  Select,
+  SyntaxHighlighter,
+  TextArea,
+} from '@vegaprotocol/ui-toolkit';
+import { Heading } from '../../../../components/heading';
+import { VegaWalletContainer } from '../../../../components/vega-wallet-container';
+
+interface SelectedNetworkParamCurrentValueProps {
+  value: string;
+}
+
+const SelectedNetworkParamCurrentValue = ({
+  value,
+}: SelectedNetworkParamCurrentValueProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="mb-4">
+      <p className="text-sm text-white">{t('CurrentValue')}</p>
+
+      {suitableForSyntaxHighlighter(value) ? (
+        <SyntaxHighlighter data={JSON.parse(value)} />
+      ) : (
+        <Input
+          value={value}
+          data-testid="selected-proposal-param-current-value"
+          readOnly
+        />
+      )}
+    </div>
+  );
+};
+
+export interface NetworkParameterProposalFormFields {
+  proposalVoteDeadline: string;
+  proposalEnactmentDeadline: string;
+  proposalTitle: string;
+  proposalDescription: string;
+  proposalNetworkParameterKey: string;
+  proposalNetworkParameterValue: string;
+  proposalReference: string;
+}
+
+const docsLink = '/network-parameter-proposal';
+
+export const ProposeNetworkParameter = () => {
+  const [selectedNetworkParam, setSelectedNetworkParam] = useState<
+    string | undefined
+  >(undefined);
+
+  const {
+    params,
+    loading: networkParamsLoading,
+    error: networkParamsError,
+  } = useNetworkParams();
+
+  const { VEGA_EXPLORER_URL, VEGA_DOCS_URL } = useEnvironment();
+  const { t } = useTranslation();
+  const {
+    register,
+    handleSubmit,
+    formState: { isSubmitting, errors },
+  } = useForm<NetworkParameterProposalFormFields>();
+  const { finalizedProposal, submit, Dialog } = useProposalSubmit();
+
+  const selectedParamEntry = params
+    ? Object.entries(params).find(([key]) => key === selectedNetworkParam)
+    : null;
+
+  const onSubmit = async (fields: NetworkParameterProposalFormFields) => {
+    const acutalNetworkParamKey = fields.proposalNetworkParameterKey
+      .split('_')
+      .join('.');
+    await submit({
+      rationale: {
+        title: fields.proposalTitle,
+        description: fields.proposalDescription,
+      },
+      terms: {
+        updateNetworkParameter: {
+          changes: {
+            key: acutalNetworkParamKey,
+            value: fields.proposalNetworkParameterValue,
+          },
+        },
+        closingTimestamp: getClosingTimestamp(fields.proposalVoteDeadline),
+        enactmentTimestamp: getEnactmentTimestamp(
+          fields.proposalVoteDeadline,
+          fields.proposalEnactmentDeadline
+        ),
+      },
+    });
+  };
+
+  return (
+    <AsyncRenderer
+      loading={networkParamsLoading}
+      error={networkParamsError}
+      data={params}
+    >
+      <Heading title={t('NetworkParameterProposal')} />
+      <VegaWalletContainer>
+        {() => (
+          <>
+            <ProposalFormMinRequirements
+              minProposerBalance={
+                params.governance_proposal_updateNetParam_minProposerBalance
+              }
+              spamProtectionMin={params.spam_protection_proposal_min_tokens}
+            />
+
+            {VEGA_DOCS_URL && (
+              <p className="text-sm" data-testid="proposal-docs-link">
+                <span className="mr-1">{t('ProposalTermsText')}</span>
+                <Link
+                  href={`${VEGA_DOCS_URL}/tutorials/proposals${docsLink}`}
+                  target="_blank"
+                >{`${VEGA_DOCS_URL}/tutorials/proposals${docsLink}`}</Link>
+              </p>
+            )}
+
+            {VEGA_EXPLORER_URL && (
+              <p className="text-sm">
+                {t('MoreNetParamsInfo')}{' '}
+                <Link
+                  href={`${VEGA_EXPLORER_URL}/network-parameters`}
+                  target="_blank"
+                >{`${VEGA_EXPLORER_URL}/network-parameters`}</Link>
+              </p>
+            )}
+
+            <div data-testid="network-parameter-proposal-form">
+              <form onSubmit={handleSubmit(onSubmit)}>
+                <ProposalFormSubheader>
+                  {t('ProposalRationale')}
+                </ProposalFormSubheader>
+
+                <ProposalFormTitle
+                  registerField={register('proposalTitle', {
+                    required: t('Required'),
+                  })}
+                  errorMessage={errors?.proposalTitle?.message}
+                />
+
+                <ProposalFormDescription
+                  registerField={register('proposalDescription', {
+                    required: t('Required'),
+                  })}
+                  errorMessage={errors?.proposalDescription?.message}
+                />
+
+                <ProposalFormSubheader>
+                  {t('SelectAParameterToChange')}
+                </ProposalFormSubheader>
+
+                <FormGroup
+                  label={t('SelectAParameterToChange')}
+                  labelFor="proposal-parameter-key"
+                  hideLabel={true}
+                >
+                  <Select
+                    data-testid="proposal-parameter-select"
+                    id="proposal-parameter-key"
+                    {...register('proposalNetworkParameterKey', {
+                      required: t('Required'),
+                    })}
+                    onChange={(e) => setSelectedNetworkParam(e.target.value)}
+                    value={selectedNetworkParam}
+                  >
+                    <option value="">{t('SelectParameter')}</option>
+                    {Object.keys(params).map((key) => {
+                      const actualKey = key.split('_').join('.');
+                      return (
+                        <option key={key} value={key}>
+                          {actualKey}
+                        </option>
+                      );
+                    })}
+                  </Select>
+                  {errors?.proposalNetworkParameterKey?.message && (
+                    <InputError intent="danger">
+                      {errors?.proposalNetworkParameterKey?.message}
+                    </InputError>
+                  )}
+                </FormGroup>
+
+                {selectedNetworkParam && (
+                  <div className="mt-[-10px]">
+                    {selectedParamEntry && (
+                      <SelectedNetworkParamCurrentValue
+                        value={selectedParamEntry[1]}
+                      />
+                    )}
+
+                    <FormGroup
+                      label={t('NewProposedValue')}
+                      labelFor="proposal-parameter-new-value"
+                    >
+                      <TextArea
+                        data-testid="selected-proposal-param-new-value"
+                        id="proposal-parameter-new-value"
+                        {...register('proposalNetworkParameterValue', {
+                          required: t('Required'),
+                        })}
+                      />
+                      {errors?.proposalNetworkParameterValue?.message && (
+                        <InputError intent="danger">
+                          {errors?.proposalNetworkParameterValue?.message}
+                        </InputError>
+                      )}
+                    </FormGroup>
+                  </div>
+                )}
+
+                <ProposalFormVoteAndEnactmentDeadline
+                  voteRegister={register('proposalVoteDeadline', {
+                    required: t('Required'),
+                  })}
+                  voteErrorMessage={errors?.proposalVoteDeadline?.message}
+                  voteMinClose={
+                    params.governance_proposal_updateNetParam_minClose
+                  }
+                  voteMaxClose={
+                    params.governance_proposal_updateNetParam_maxClose
+                  }
+                  enactmentRegister={register('proposalEnactmentDeadline', {
+                    required: t('Required'),
+                  })}
+                  enactmentErrorMessage={
+                    errors?.proposalEnactmentDeadline?.message
+                  }
+                  enactmentMinClose={
+                    params.governance_proposal_updateNetParam_minEnact
+                  }
+                  enactmentMaxClose={
+                    params.governance_proposal_updateNetParam_maxEnact
+                  }
+                />
+
+                <ProposalFormSubmit isSubmitting={isSubmitting} />
+                <ProposalFormTransactionDialog
+                  finalizedProposal={finalizedProposal}
+                  TransactionDialog={Dialog}
+                />
+              </form>
+            </div>
+          </>
+        )}
+      </VegaWalletContainer>
+    </AsyncRenderer>
+  );
+};
diff --git a/apps/token/src/routes/governance/propose/new-asset/index.tsx b/apps/token/src/routes/governance/propose/new-asset/index.tsx
new file mode 100644
index 000000000..ec430cabe
--- /dev/null
+++ b/apps/token/src/routes/governance/propose/new-asset/index.tsx
@@ -0,0 +1,4 @@
+export {
+  ProposeNewAsset,
+  ProposeNewAsset as default,
+} from './propose-new-asset';
diff --git a/apps/token/src/routes/governance/propose/new-asset/propose-new-asset.spec.tsx b/apps/token/src/routes/governance/propose/new-asset/propose-new-asset.spec.tsx
new file mode 100644
index 000000000..d33d5efc5
--- /dev/null
+++ b/apps/token/src/routes/governance/propose/new-asset/propose-new-asset.spec.tsx
@@ -0,0 +1,112 @@
+import { MockedProvider } from '@apollo/client/testing';
+import { MemoryRouter as Router } from 'react-router-dom';
+import { render, screen, waitFor } from '@testing-library/react';
+import { VegaWalletContext } from '@vegaprotocol/wallet';
+import { AppStateProvider } from '../../../../contexts/app-state/app-state-provider';
+import { mockWalletContext } from '../../test-helpers/mocks';
+import { ProposeNewAsset } from './propose-new-asset';
+import { gql } from '@apollo/client';
+import type { NetworkParamsQuery } from '@vegaprotocol/web3';
+import type { MockedResponse } from '@apollo/client/testing';
+
+jest.mock('@vegaprotocol/environment', () => ({
+  useEnvironment: () => ({
+    VEGA_DOCS_URL: 'https://docs.vega.xyz',
+  }),
+}));
+
+const updateMarketNetworkParamsQueryMock: MockedResponse<NetworkParamsQuery> = {
+  request: {
+    query: gql`
+      query NetworkParams {
+        networkParameters {
+          key
+          value
+        }
+      }
+    `,
+  },
+  result: {
+    data: {
+      networkParameters: [
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.asset.maxClose',
+          value: '8760h0m0s',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.asset.maxEnact',
+          value: '8760h0m0s',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.asset.minClose',
+          value: '1h0m0s',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.asset.minEnact',
+          value: '2h0m0s',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.asset.minProposerBalance',
+          value: '1',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'spam.protection.proposal.min.tokens',
+          value: '1000000000000000000',
+        },
+      ],
+    },
+  },
+};
+
+const renderComponent = () =>
+  render(
+    <Router>
+      <MockedProvider mocks={[updateMarketNetworkParamsQueryMock]}>
+        <AppStateProvider>
+          <VegaWalletContext.Provider value={mockWalletContext}>
+            <ProposeNewAsset />
+          </VegaWalletContext.Provider>
+        </AppStateProvider>
+      </MockedProvider>
+    </Router>
+  );
+
+// Note: form submission is tested in propose-raw.spec.tsx. Reusable form
+// components are tested in their own directory.
+
+describe('Propose New Asset', () => {
+  it('should render successfully', async () => {
+    const { baseElement } = renderComponent();
+    await expect(baseElement).toBeTruthy();
+  });
+
+  it('should render the title', async () => {
+    renderComponent();
+    await waitFor(() =>
+      expect(screen.getByText('New asset proposal')).toBeTruthy()
+    );
+  });
+
+  it('should render the form components', async () => {
+    renderComponent();
+    await waitFor(() =>
+      expect(screen.getByTestId('new-asset-proposal-form')).toBeTruthy()
+    );
+    expect(screen.getByTestId('min-proposal-requirements')).toBeTruthy();
+    expect(screen.getByTestId('proposal-docs-link')).toBeTruthy();
+    expect(screen.getByTestId('proposal-title')).toBeTruthy();
+    expect(screen.getByTestId('proposal-description')).toBeTruthy();
+    expect(screen.getByTestId('proposal-terms')).toBeTruthy();
+    expect(screen.getByTestId('proposal-vote-deadline')).toBeTruthy();
+    expect(screen.getByTestId('proposal-validation-deadline')).toBeTruthy();
+    expect(screen.getByTestId('proposal-enactment-deadline')).toBeTruthy();
+    expect(screen.getByTestId('proposal-submit')).toBeTruthy();
+    expect(screen.getByTestId('proposal-transaction-dialog')).toBeTruthy();
+  });
+});
diff --git a/apps/token/src/routes/governance/propose/new-asset/propose-new-asset.tsx b/apps/token/src/routes/governance/propose/new-asset/propose-new-asset.tsx
new file mode 100644
index 000000000..07ddf9461
--- /dev/null
+++ b/apps/token/src/routes/governance/propose/new-asset/propose-new-asset.tsx
@@ -0,0 +1,196 @@
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import {
+  useProposalSubmit,
+  getClosingTimestamp,
+  getEnactmentTimestamp,
+  getValidationTimestamp,
+} from '@vegaprotocol/governance';
+import { useEnvironment } from '@vegaprotocol/environment';
+import {
+  ProposalFormMinRequirements,
+  ProposalFormTitle,
+  ProposalFormDescription,
+  ProposalFormTerms,
+  ProposalFormSubmit,
+  ProposalFormTransactionDialog,
+  ProposalFormSubheader,
+  ProposalFormVoteAndEnactmentDeadline,
+} from '../../components/propose';
+import { AsyncRenderer, Link } from '@vegaprotocol/ui-toolkit';
+import { Heading } from '../../../../components/heading';
+import { VegaWalletContainer } from '../../../../components/vega-wallet-container';
+import { NetworkParams, useNetworkParams } from '@vegaprotocol/react-helpers';
+
+export interface NewAssetProposalFormFields {
+  proposalVoteDeadline: string;
+  proposalEnactmentDeadline: string;
+  proposalValidationDeadline: string;
+  proposalTitle: string;
+  proposalDescription: string;
+  proposalTerms: string;
+  proposalReference: string;
+}
+
+const docsLink = '/new-asset-proposal';
+
+export const ProposeNewAsset = () => {
+  const {
+    params,
+    loading: networkParamsLoading,
+    error: networkParamsError,
+  } = useNetworkParams([
+    NetworkParams.governance_proposal_asset_minClose,
+    NetworkParams.governance_proposal_asset_maxClose,
+    NetworkParams.governance_proposal_asset_minEnact,
+    NetworkParams.governance_proposal_asset_maxEnact,
+    NetworkParams.governance_proposal_asset_minProposerBalance,
+    NetworkParams.spam_protection_proposal_min_tokens,
+  ]);
+
+  const { VEGA_EXPLORER_URL, VEGA_DOCS_URL } = useEnvironment();
+  const { t } = useTranslation();
+  const {
+    register,
+    handleSubmit,
+    formState: { isSubmitting, errors },
+  } = useForm<NewAssetProposalFormFields>();
+  const { finalizedProposal, submit, Dialog } = useProposalSubmit();
+
+  const onSubmit = async (fields: NewAssetProposalFormFields) => {
+    await submit({
+      rationale: {
+        title: fields.proposalTitle,
+        description: fields.proposalDescription,
+      },
+      terms: {
+        newAsset: {
+          ...JSON.parse(fields.proposalTerms),
+        },
+        closingTimestamp: getClosingTimestamp(fields.proposalVoteDeadline),
+        enactmentTimestamp: getEnactmentTimestamp(
+          fields.proposalVoteDeadline,
+          fields.proposalEnactmentDeadline
+        ),
+        validationTimestamp: getValidationTimestamp(
+          fields.proposalValidationDeadline
+        ),
+      },
+    });
+  };
+
+  return (
+    <AsyncRenderer
+      loading={networkParamsLoading}
+      error={networkParamsError}
+      data={params}
+    >
+      <Heading title={t('NewAssetProposal')} />
+      <VegaWalletContainer>
+        {() => (
+          <>
+            <ProposalFormMinRequirements
+              minProposerBalance={
+                params.governance_proposal_asset_minProposerBalance
+              }
+              spamProtectionMin={params.spam_protection_proposal_min_tokens}
+            />
+
+            {VEGA_DOCS_URL && (
+              <p className="text-sm" data-testid="proposal-docs-link">
+                <span className="mr-1">{t('ProposalTermsText')}</span>
+                <Link
+                  href={`${VEGA_DOCS_URL}/tutorials/proposals${docsLink}`}
+                  target="_blank"
+                >{`${VEGA_DOCS_URL}/tutorials/proposals${docsLink}`}</Link>
+              </p>
+            )}
+
+            {VEGA_EXPLORER_URL && (
+              <p className="text-sm">
+                {t('MoreAssetsInfo')}{' '}
+                <Link
+                  href={`${VEGA_EXPLORER_URL}/assets`}
+                  target="_blank"
+                >{`${VEGA_EXPLORER_URL}/assets`}</Link>
+              </p>
+            )}
+
+            <div data-testid="new-asset-proposal-form">
+              <form onSubmit={handleSubmit(onSubmit)}>
+                <ProposalFormSubheader>
+                  {t('ProposalRationale')}
+                </ProposalFormSubheader>
+
+                <ProposalFormTitle
+                  registerField={register('proposalTitle', {
+                    required: t('Required'),
+                  })}
+                  errorMessage={errors?.proposalTitle?.message}
+                />
+
+                <ProposalFormDescription
+                  registerField={register('proposalDescription', {
+                    required: t('Required'),
+                  })}
+                  errorMessage={errors?.proposalDescription?.message}
+                />
+
+                <ProposalFormSubheader>{t('NewAsset')}</ProposalFormSubheader>
+
+                <ProposalFormTerms
+                  registerField={register('proposalTerms', {
+                    required: t('Required'),
+                    validate: {
+                      validateJson: (value) => {
+                        try {
+                          JSON.parse(value);
+                          return true;
+                        } catch (e) {
+                          return t('Must be valid JSON');
+                        }
+                      },
+                    },
+                  })}
+                  labelOverride={'Terms.newAsset (JSON format)'}
+                  errorMessage={errors?.proposalTerms?.message}
+                  customDocLink={docsLink}
+                />
+
+                <ProposalFormVoteAndEnactmentDeadline
+                  voteRegister={register('proposalVoteDeadline', {
+                    required: t('Required'),
+                  })}
+                  voteErrorMessage={errors?.proposalVoteDeadline?.message}
+                  voteMinClose={params.governance_proposal_asset_minClose}
+                  voteMaxClose={params.governance_proposal_asset_maxClose}
+                  enactmentRegister={register('proposalEnactmentDeadline', {
+                    required: t('Required'),
+                  })}
+                  enactmentErrorMessage={
+                    errors?.proposalEnactmentDeadline?.message
+                  }
+                  enactmentMinClose={params.governance_proposal_asset_minEnact}
+                  enactmentMaxClose={params.governance_proposal_asset_maxEnact}
+                  validationRequired={true}
+                  validationRegister={register('proposalValidationDeadline', {
+                    required: t('Required'),
+                  })}
+                  validationErrorMessage={
+                    errors?.proposalValidationDeadline?.message
+                  }
+                />
+
+                <ProposalFormSubmit isSubmitting={isSubmitting} />
+                <ProposalFormTransactionDialog
+                  finalizedProposal={finalizedProposal}
+                  TransactionDialog={Dialog}
+                />
+              </form>
+            </div>
+          </>
+        )}
+      </VegaWalletContainer>
+    </AsyncRenderer>
+  );
+};
diff --git a/apps/token/src/routes/governance/propose/new-market/index.tsx b/apps/token/src/routes/governance/propose/new-market/index.tsx
new file mode 100644
index 000000000..a8c58013b
--- /dev/null
+++ b/apps/token/src/routes/governance/propose/new-market/index.tsx
@@ -0,0 +1,4 @@
+export {
+  ProposeNewMarket,
+  ProposeNewMarket as default,
+} from './propose-new-market';
diff --git a/apps/token/src/routes/governance/propose/new-market/propose-new-market.spec.tsx b/apps/token/src/routes/governance/propose/new-market/propose-new-market.spec.tsx
new file mode 100644
index 000000000..438860121
--- /dev/null
+++ b/apps/token/src/routes/governance/propose/new-market/propose-new-market.spec.tsx
@@ -0,0 +1,104 @@
+import { gql } from '@apollo/client';
+import { render, screen, waitFor } from '@testing-library/react';
+import { ProposeNewMarket } from './propose-new-market';
+import { MockedProvider } from '@apollo/client/testing';
+import { mockWalletContext } from '../../test-helpers/mocks';
+import { AppStateProvider } from '../../../../contexts/app-state/app-state-provider';
+import { VegaWalletContext } from '@vegaprotocol/wallet';
+import { BrowserRouter as Router } from 'react-router-dom';
+import type { MockedResponse } from '@apollo/client/testing';
+import type { NetworkParamsQuery } from '@vegaprotocol/web3';
+
+jest.mock('@vegaprotocol/environment', () => ({
+  useEnvironment: () => ({
+    VEGA_DOCS_URL: 'https://docs.vega.xyz',
+  }),
+}));
+
+const newMarketNetworkParamsQueryMock: MockedResponse<NetworkParamsQuery> = {
+  request: {
+    query: gql`
+      query NetworkParams {
+        networkParameters {
+          key
+          value
+        }
+      }
+    `,
+  },
+  result: {
+    data: {
+      networkParameters: [
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.market.maxClose',
+          value: '8760h0m0s',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.market.maxEnact',
+          value: '8760h0m0s',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.market.minClose',
+          value: '1h0m0s',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.market.minEnact',
+          value: '2h0m0s',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.market.minProposerBalance',
+          value: '1',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'spam.protection.proposal.min.tokens',
+          value: '1000000000000000000',
+        },
+      ],
+    },
+  },
+};
+
+const renderComponent = () =>
+  render(
+    <Router>
+      <MockedProvider mocks={[newMarketNetworkParamsQueryMock]}>
+        <AppStateProvider>
+          <VegaWalletContext.Provider value={mockWalletContext}>
+            <ProposeNewMarket />
+          </VegaWalletContext.Provider>
+        </AppStateProvider>
+      </MockedProvider>
+    </Router>
+  );
+
+// Note: form submission is tested in propose-raw.spec.tsx. Reusable form
+// components are tested in their own directory.
+
+describe('Propose New Market', () => {
+  it('should render successfully', async () => {
+    const { baseElement } = renderComponent();
+    await expect(baseElement).toBeTruthy();
+  });
+
+  it('should render the form components', async () => {
+    renderComponent();
+    await waitFor(() =>
+      expect(screen.getByTestId('new-market-proposal-form')).toBeTruthy()
+    );
+    expect(screen.getByTestId('min-proposal-requirements')).toBeTruthy();
+    expect(screen.getByTestId('proposal-docs-link')).toBeTruthy();
+    expect(screen.getByTestId('proposal-title')).toBeTruthy();
+    expect(screen.getByTestId('proposal-description')).toBeTruthy();
+    expect(screen.getByTestId('proposal-terms')).toBeTruthy();
+    expect(screen.getByTestId('proposal-vote-deadline')).toBeTruthy();
+    expect(screen.getByTestId('proposal-enactment-deadline')).toBeTruthy();
+    expect(screen.getByTestId('proposal-submit')).toBeTruthy();
+    expect(screen.getByTestId('proposal-transaction-dialog')).toBeTruthy();
+  });
+});
diff --git a/apps/token/src/routes/governance/propose/new-market/propose-new-market.tsx b/apps/token/src/routes/governance/propose/new-market/propose-new-market.tsx
new file mode 100644
index 000000000..89c0f419c
--- /dev/null
+++ b/apps/token/src/routes/governance/propose/new-market/propose-new-market.tsx
@@ -0,0 +1,184 @@
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import {
+  useProposalSubmit,
+  getClosingTimestamp,
+  getEnactmentTimestamp,
+} from '@vegaprotocol/governance';
+import { useEnvironment } from '@vegaprotocol/environment';
+import {
+  ProposalFormMinRequirements,
+  ProposalFormTitle,
+  ProposalFormDescription,
+  ProposalFormTerms,
+  ProposalFormSubmit,
+  ProposalFormTransactionDialog,
+  ProposalFormSubheader,
+  ProposalFormVoteAndEnactmentDeadline,
+} from '../../components/propose';
+import { AsyncRenderer, Link } from '@vegaprotocol/ui-toolkit';
+import { Heading } from '../../../../components/heading';
+import { VegaWalletContainer } from '../../../../components/vega-wallet-container';
+import { NetworkParams, useNetworkParams } from '@vegaprotocol/react-helpers';
+
+export interface NewMarketProposalFormFields {
+  proposalVoteDeadline: string;
+  proposalEnactmentDeadline: string;
+  proposalTitle: string;
+  proposalDescription: string;
+  proposalTerms: string;
+  proposalReference: string;
+}
+
+const docsLink = '/new-market-proposal';
+
+export const ProposeNewMarket = () => {
+  const {
+    params,
+    loading: networkParamsLoading,
+    error: networkParamsError,
+  } = useNetworkParams([
+    NetworkParams.governance_proposal_market_maxClose,
+    NetworkParams.governance_proposal_market_minClose,
+    NetworkParams.governance_proposal_market_maxEnact,
+    NetworkParams.governance_proposal_market_minEnact,
+    NetworkParams.governance_proposal_market_minProposerBalance,
+    NetworkParams.spam_protection_proposal_min_tokens,
+  ]);
+
+  const { VEGA_EXPLORER_URL, VEGA_DOCS_URL } = useEnvironment();
+  const { t } = useTranslation();
+  const {
+    register,
+    handleSubmit,
+    formState: { isSubmitting, errors },
+  } = useForm<NewMarketProposalFormFields>();
+  const { finalizedProposal, submit, Dialog } = useProposalSubmit();
+
+  const onSubmit = async (fields: NewMarketProposalFormFields) => {
+    await submit({
+      rationale: {
+        title: fields.proposalTitle,
+        description: fields.proposalDescription,
+      },
+      terms: {
+        newMarket: {
+          ...JSON.parse(fields.proposalTerms),
+        },
+        closingTimestamp: getClosingTimestamp(fields.proposalVoteDeadline),
+        enactmentTimestamp: getEnactmentTimestamp(
+          fields.proposalVoteDeadline,
+          fields.proposalEnactmentDeadline
+        ),
+      },
+    });
+  };
+
+  return (
+    <AsyncRenderer
+      loading={networkParamsLoading}
+      error={networkParamsError}
+      data={params}
+    >
+      <Heading title={t('NewMarketProposal')} />
+      <VegaWalletContainer>
+        {() => (
+          <>
+            <ProposalFormMinRequirements
+              minProposerBalance={
+                params.governance_proposal_market_minProposerBalance
+              }
+              spamProtectionMin={params.spam_protection_proposal_min_tokens}
+            />
+
+            {VEGA_DOCS_URL && (
+              <p className="text-sm" data-testid="proposal-docs-link">
+                <span className="mr-1">{t('ProposalTermsText')}</span>
+                <Link
+                  href={`${VEGA_DOCS_URL}/tutorials/proposals/${docsLink}`}
+                  target="_blank"
+                >{`${VEGA_DOCS_URL}/tutorials/proposals/${docsLink}`}</Link>
+              </p>
+            )}
+
+            {VEGA_EXPLORER_URL && (
+              <p className="text-sm">
+                {t('MoreMarketsInfo')}{' '}
+                <Link
+                  href={`${VEGA_EXPLORER_URL}/markets`}
+                  target="_blank"
+                >{`${VEGA_EXPLORER_URL}/markets`}</Link>
+              </p>
+            )}
+
+            <div data-testid="new-market-proposal-form">
+              <form onSubmit={handleSubmit(onSubmit)}>
+                <ProposalFormSubheader>
+                  {t('ProposalRationale')}
+                </ProposalFormSubheader>
+
+                <ProposalFormTitle
+                  registerField={register('proposalTitle', {
+                    required: t('Required'),
+                  })}
+                  errorMessage={errors?.proposalTitle?.message}
+                />
+
+                <ProposalFormDescription
+                  registerField={register('proposalDescription', {
+                    required: t('Required'),
+                  })}
+                  errorMessage={errors?.proposalDescription?.message}
+                />
+
+                <ProposalFormSubheader>{t('NewMarket')}</ProposalFormSubheader>
+
+                <ProposalFormTerms
+                  registerField={register('proposalTerms', {
+                    required: t('Required'),
+                    validate: {
+                      validateJson: (value) => {
+                        try {
+                          JSON.parse(value);
+                          return true;
+                        } catch (e) {
+                          return t('Must be valid JSON');
+                        }
+                      },
+                    },
+                  })}
+                  labelOverride={'Terms.newMarket (JSON format)'}
+                  errorMessage={errors?.proposalTerms?.message}
+                  customDocLink={docsLink}
+                />
+
+                <ProposalFormVoteAndEnactmentDeadline
+                  voteRegister={register('proposalVoteDeadline', {
+                    required: t('Required'),
+                  })}
+                  voteErrorMessage={errors?.proposalVoteDeadline?.message}
+                  voteMinClose={params.governance_proposal_market_minClose}
+                  voteMaxClose={params.governance_proposal_market_maxClose}
+                  enactmentRegister={register('proposalEnactmentDeadline', {
+                    required: t('Required'),
+                  })}
+                  enactmentErrorMessage={
+                    errors?.proposalEnactmentDeadline?.message
+                  }
+                  enactmentMinClose={params.governance_proposal_market_minEnact}
+                  enactmentMaxClose={params.governance_proposal_market_maxEnact}
+                />
+
+                <ProposalFormSubmit isSubmitting={isSubmitting} />
+                <ProposalFormTransactionDialog
+                  finalizedProposal={finalizedProposal}
+                  TransactionDialog={Dialog}
+                />
+              </form>
+            </div>
+          </>
+        )}
+      </VegaWalletContainer>
+    </AsyncRenderer>
+  );
+};
diff --git a/apps/token/src/routes/governance/propose/propose.spec.tsx b/apps/token/src/routes/governance/propose/propose.spec.tsx
new file mode 100644
index 000000000..0dd5294cc
--- /dev/null
+++ b/apps/token/src/routes/governance/propose/propose.spec.tsx
@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Propose } from './propose';
+
+const renderComponent = () =>
+  render(
+    <Router>
+      <Propose />
+    </Router>
+  );
+
+describe('Propose', () => {
+  it('should render successfully', () => {
+    const { baseElement } = renderComponent();
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should render the heading, proposal type question and options', () => {
+    renderComponent();
+    expect(
+      screen.getByText('What type of proposal would you like to make?')
+    ).toBeTruthy();
+    expect(screen.getByText('Network parameter')).toBeTruthy();
+    expect(screen.getByText('New market')).toBeTruthy();
+    expect(screen.getByText('Update market')).toBeTruthy();
+    expect(screen.getByText('New asset')).toBeTruthy();
+    expect(screen.getByText('Freeform')).toBeTruthy();
+    expect(screen.getByText('Let me choose (raw proposal)')).toBeTruthy();
+  });
+});
diff --git a/apps/token/src/routes/governance/propose/propose.tsx b/apps/token/src/routes/governance/propose/propose.tsx
index f511d42c8..31bc24af9 100644
--- a/apps/token/src/routes/governance/propose/propose.tsx
+++ b/apps/token/src/routes/governance/propose/propose.tsx
@@ -1,21 +1,86 @@
+import Routes from '../../routes';
 import { useTranslation } from 'react-i18next';
-import { ProposalForm } from '@vegaprotocol/governance';
+import { Link } from '@vegaprotocol/ui-toolkit';
+import { useEnvironment } from '@vegaprotocol/environment';
 import { Heading } from '../../../components/heading';
-import { VegaWalletContainer } from '../../../components/vega-wallet-container';
 
 export const Propose = () => {
+  const { VEGA_DOCS_URL, VEGA_EXPLORER_URL } = useEnvironment();
   const { t } = useTranslation();
+
   return (
     <>
-      <Heading title={t('NewProposal')} />
-      <VegaWalletContainer>
-        {() => (
-          <>
-            <p>{t('MinProposalRequirements')}</p>
-            <ProposalForm />
-          </>
-        )}
-      </VegaWalletContainer>
+      <section className="pb-6">
+        <Heading title={t('NewProposal')} />
+        <div className="text-sm">
+          {VEGA_DOCS_URL && (
+            <p>
+              <span className="mr-1">{t('ProposalTermsText')}</span>
+              <Link
+                href={`${VEGA_DOCS_URL}/tutorials/proposals`}
+                target="_blank"
+              >{`${VEGA_DOCS_URL}/tutorials/proposals`}</Link>
+            </p>
+          )}
+          {VEGA_EXPLORER_URL && (
+            <p>
+              {t('MoreProposalsInfo')}{' '}
+              <Link
+                href={`${VEGA_EXPLORER_URL}/governance`}
+                target="_blank"
+              >{`${VEGA_EXPLORER_URL}/governance`}</Link>
+            </p>
+          )}
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-h5">{t('ProposalTypeQuestion')}</h2>
+        <ul>
+          <li>
+            <p>
+              <Link href={`${Routes.GOVERNANCE}/propose/network-parameter`}>
+                {t('NetworkParameter')}
+              </Link>
+            </p>
+          </li>
+          <li>
+            <p>
+              <Link href={`${Routes.GOVERNANCE}/propose/new-market`}>
+                {t('NewMarket')}
+              </Link>
+            </p>
+          </li>
+          <li>
+            <p>
+              <Link href={`${Routes.GOVERNANCE}/propose/update-market`}>
+                {t('UpdateMarket')}
+              </Link>
+            </p>
+          </li>
+          <li>
+            <p>
+              <Link href={`${Routes.GOVERNANCE}/propose/new-asset`}>
+                {t('NewAsset')}
+              </Link>
+            </p>
+          </li>
+          <li>
+            <p>
+              <Link href={`${Routes.GOVERNANCE}/propose/freeform`}>
+                {t('Freeform')}
+              </Link>
+            </p>
+          </li>
+          <li>
+            <p>
+              <Link href={`${Routes.GOVERNANCE}/propose/raw`}>
+                {t('RawProposal')}
+              </Link>
+            </p>
+          </li>
+        </ul>
+      </section>
     </>
   );
 };
diff --git a/apps/token/src/routes/governance/propose/raw/index.tsx b/apps/token/src/routes/governance/propose/raw/index.tsx
new file mode 100644
index 000000000..fa36bc72e
--- /dev/null
+++ b/apps/token/src/routes/governance/propose/raw/index.tsx
@@ -0,0 +1 @@
+export { ProposeRaw, ProposeRaw as default } from './propose-raw';
diff --git a/libs/governance/src/lib/proposal-form.spec.tsx b/apps/token/src/routes/governance/propose/raw/proposal-raw.spec.tsx
similarity index 83%
rename from libs/governance/src/lib/proposal-form.spec.tsx
rename to apps/token/src/routes/governance/propose/raw/proposal-raw.spec.tsx
index a7ce03de4..de1f4a629 100644
--- a/libs/governance/src/lib/proposal-form.spec.tsx
+++ b/apps/token/src/routes/governance/propose/raw/proposal-raw.spec.tsx
@@ -1,5 +1,7 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import type { MockedResponse } from '@apollo/client/testing';
+import { addHours, getTime } from 'date-fns';
+import { AppStateProvider } from '../../../../contexts/app-state/app-state-provider';
 import { MockedProvider } from '@apollo/client/testing';
 import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
 import { VegaWalletContext } from '@vegaprotocol/wallet';
@@ -8,11 +10,11 @@ import {
   ProposalRejectionReason,
   ProposalState,
 } from '@vegaprotocol/types';
-import { ProposalForm } from './proposal-form';
-import { PROPOSAL_EVENT_SUB } from './proposals-hooks';
-import type { ProposalEvent } from './proposals-hooks/__generated__/ProposalEvent';
+import { ProposeRaw } from './propose-raw';
+import { PROPOSAL_EVENT_SUB } from '@vegaprotocol/governance';
+import type { ProposalEvent } from '@vegaprotocol/governance';
 
-describe('ProposalForm', () => {
+describe('Raw proposal form', () => {
   const pubkey = '0x123';
   const mockProposalEvent: MockedResponse<ProposalEvent> = {
     request: {
@@ -44,18 +46,20 @@ describe('ProposalForm', () => {
   };
   const setup = (mockSendTx = jest.fn()) => {
     return render(
-      <MockedProvider mocks={[mockProposalEvent]}>
-        <VegaWalletContext.Provider
-          value={
-            {
-              keypair: { pub: pubkey },
-              sendTx: mockSendTx,
-            } as unknown as VegaWalletContextShape
-          }
-        >
-          <ProposalForm />
-        </VegaWalletContext.Provider>
-      </MockedProvider>
+      <AppStateProvider>
+        <MockedProvider mocks={[mockProposalEvent]}>
+          <VegaWalletContext.Provider
+            value={
+              {
+                keypair: { pub: pubkey },
+                sendTx: mockSendTx,
+              } as unknown as VegaWalletContextShape
+            }
+          >
+            <ProposeRaw />
+          </VegaWalletContext.Provider>
+        </MockedProvider>
+      </AppStateProvider>
     );
   };
 
@@ -125,8 +129,8 @@ describe('ProposalForm', () => {
             value: '300',
           },
         },
-        closingTimestamp: 1657721401,
-        enactmentTimestamp: 1657807801,
+        closingTimestamp: Math.floor(getTime(addHours(new Date(), 2)) / 1000),
+        enactmentTimestamp: Math.floor(getTime(addHours(new Date(), 3)) / 1000),
       },
     });
     fireEvent.change(screen.getByTestId('proposal-data'), {
diff --git a/apps/token/src/routes/governance/propose/raw/propose-raw.tsx b/apps/token/src/routes/governance/propose/raw/propose-raw.tsx
new file mode 100644
index 000000000..b59947d7d
--- /dev/null
+++ b/apps/token/src/routes/governance/propose/raw/propose-raw.tsx
@@ -0,0 +1,107 @@
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useEnvironment } from '@vegaprotocol/environment';
+import { Heading } from '../../../../components/heading';
+import { VegaWalletContainer } from '../../../../components/vega-wallet-container';
+import {
+  FormGroup,
+  InputError,
+  Link,
+  TextArea,
+} from '@vegaprotocol/ui-toolkit';
+import { useProposalSubmit } from '@vegaprotocol/governance';
+import {
+  ProposalFormSubmit,
+  ProposalFormTransactionDialog,
+} from '../../components/propose';
+
+export interface RawProposalFormFields {
+  rawProposalData: string;
+}
+
+export const ProposeRaw = () => {
+  const { VEGA_EXPLORER_URL, VEGA_DOCS_URL } = useEnvironment();
+  const { t } = useTranslation();
+  const {
+    register,
+    handleSubmit,
+    formState: { isSubmitting, errors },
+  } = useForm<RawProposalFormFields>();
+  const { finalizedProposal, submit, Dialog } = useProposalSubmit();
+
+  const hasError = Boolean(errors.rawProposalData?.message);
+
+  const onSubmit = async (fields: RawProposalFormFields) => {
+    await submit(JSON.parse(fields.rawProposalData));
+  };
+
+  return (
+    <>
+      <Heading title={t('NewRawProposal')} />
+      <VegaWalletContainer>
+        {() => (
+          <>
+            {VEGA_DOCS_URL && (
+              <p className="text-sm" data-testid="proposal-docs-link">
+                <span className="mr-1">{t('ProposalTermsText')}</span>
+                <Link
+                  href={`${VEGA_DOCS_URL}/tutorials/proposals`}
+                  target="_blank"
+                >{`${VEGA_DOCS_URL}/tutorials/proposals`}</Link>
+              </p>
+            )}
+
+            {VEGA_EXPLORER_URL && (
+              <p className="text-sm">
+                {t('MoreProposalsInfo')}{' '}
+                <Link
+                  href={`${VEGA_EXPLORER_URL}/governance`}
+                  target="_blank"
+                >{`${VEGA_EXPLORER_URL}/governance`}</Link>
+              </p>
+            )}
+
+            <div data-testid="raw-proposal-form">
+              <form onSubmit={handleSubmit(onSubmit)}>
+                <FormGroup
+                  label="Make a proposal by submitting JSON"
+                  labelFor="proposal-data"
+                >
+                  <TextArea
+                    id="proposal-data"
+                    className="min-h-[200px]"
+                    hasError={hasError}
+                    data-testid="proposal-data"
+                    {...register('rawProposalData', {
+                      required: t('Required'),
+                      validate: {
+                        validateJson: (value) => {
+                          try {
+                            JSON.parse(value);
+                            return true;
+                          } catch (e) {
+                            return t('Must be valid JSON');
+                          }
+                        },
+                      },
+                    })}
+                  />
+                  {errors.rawProposalData?.message && (
+                    <InputError intent="danger">
+                      {errors.rawProposalData?.message}
+                    </InputError>
+                  )}
+                </FormGroup>
+                <ProposalFormSubmit isSubmitting={isSubmitting} />
+                <ProposalFormTransactionDialog
+                  finalizedProposal={finalizedProposal}
+                  TransactionDialog={Dialog}
+                />
+              </form>
+            </div>
+          </>
+        )}
+      </VegaWalletContainer>
+    </>
+  );
+};
diff --git a/apps/token/src/routes/governance/propose/update-market/__generated__/ProposalMarketsQuery.ts b/apps/token/src/routes/governance/propose/update-market/__generated__/ProposalMarketsQuery.ts
new file mode 100644
index 000000000..f9049dee2
--- /dev/null
+++ b/apps/token/src/routes/governance/propose/update-market/__generated__/ProposalMarketsQuery.ts
@@ -0,0 +1,57 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+// ====================================================
+// GraphQL query operation: ProposalMarketsQuery
+// ====================================================
+
+export interface ProposalMarketsQuery_marketsConnection_edges_node_tradableInstrument_instrument {
+  __typename: "Instrument";
+  /**
+   * Full and fairly descriptive name for the instrument
+   */
+  name: string;
+  /**
+   * A short non necessarily unique code used to easily describe the instrument (e.g: FX:BTCUSD/DEC18) (string)
+   */
+  code: string;
+}
+
+export interface ProposalMarketsQuery_marketsConnection_edges_node_tradableInstrument {
+  __typename: "TradableInstrument";
+  /**
+   * An instance of, or reference to, a fully specified instrument.
+   */
+  instrument: ProposalMarketsQuery_marketsConnection_edges_node_tradableInstrument_instrument;
+}
+
+export interface ProposalMarketsQuery_marketsConnection_edges_node {
+  __typename: "Market";
+  /**
+   * Market ID
+   */
+  id: string;
+  /**
+   * An instance of, or reference to, a tradable instrument.
+   */
+  tradableInstrument: ProposalMarketsQuery_marketsConnection_edges_node_tradableInstrument;
+}
+
+export interface ProposalMarketsQuery_marketsConnection_edges {
+  __typename: "MarketEdge";
+  node: ProposalMarketsQuery_marketsConnection_edges_node;
+}
+
+export interface ProposalMarketsQuery_marketsConnection {
+  __typename: "MarketConnection";
+  /**
+   * The markets in this connection
+   */
+  edges: ProposalMarketsQuery_marketsConnection_edges[];
+}
+
+export interface ProposalMarketsQuery {
+  marketsConnection: ProposalMarketsQuery_marketsConnection;
+}
diff --git a/apps/token/src/routes/governance/propose/update-market/index.tsx b/apps/token/src/routes/governance/propose/update-market/index.tsx
new file mode 100644
index 000000000..d204dd0fc
--- /dev/null
+++ b/apps/token/src/routes/governance/propose/update-market/index.tsx
@@ -0,0 +1,4 @@
+export {
+  ProposeUpdateMarket,
+  ProposeUpdateMarket as default,
+} from './propose-update-market';
diff --git a/apps/token/src/routes/governance/propose/update-market/propose-update-market.spec.tsx b/apps/token/src/routes/governance/propose/update-market/propose-update-market.spec.tsx
new file mode 100644
index 000000000..8b7cdff4c
--- /dev/null
+++ b/apps/token/src/routes/governance/propose/update-market/propose-update-market.spec.tsx
@@ -0,0 +1,220 @@
+import type { MockedResponse } from '@apollo/client/testing';
+import { MockedProvider } from '@apollo/client/testing';
+import { MemoryRouter as Router } from 'react-router-dom';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { VegaWalletContext } from '@vegaprotocol/wallet';
+import { AppStateProvider } from '../../../../contexts/app-state/app-state-provider';
+import { mockWalletContext } from '../../test-helpers/mocks';
+import { ProposeUpdateMarket } from './propose-update-market';
+import type { NetworkParamsQuery } from '@vegaprotocol/web3';
+import { MARKETS_QUERY } from './propose-update-market';
+import type { ProposalMarketsQuery } from './__generated__/ProposalMarketsQuery';
+import { gql } from '@apollo/client';
+
+const updateMarketNetworkParamsQueryMock: MockedResponse<NetworkParamsQuery> = {
+  request: {
+    query: gql`
+      query NetworkParams {
+        networkParameters {
+          key
+          value
+        }
+      }
+    `,
+  },
+  result: {
+    data: {
+      networkParameters: [
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.updateMarket.maxClose',
+          value: '8760h0m0s',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.updateMarket.maxEnact',
+          value: '8760h0m0s',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.updateMarket.minClose',
+          value: '1h0m0s',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.updateMarket.minEnact',
+          value: '2h0m0s',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'governance.proposal.updateMarket.minProposerBalance',
+          value: '1',
+        },
+        {
+          __typename: 'NetworkParameter',
+          key: 'spam.protection.proposal.min.tokens',
+          value: '1000000000000000000',
+        },
+      ],
+    },
+  },
+};
+
+const marketQueryMock: MockedResponse<ProposalMarketsQuery> = {
+  request: {
+    query: MARKETS_QUERY,
+  },
+  result: {
+    data: {
+      marketsConnection: {
+        __typename: 'MarketConnection',
+        edges: [
+          {
+            __typename: 'MarketEdge',
+            node: {
+              __typename: 'Market',
+              id: 'd2319c91104a523032cf04ac4e20962b87ee1f187d1e411a2cac12554dd38f29',
+              tradableInstrument: {
+                __typename: 'TradableInstrument',
+                instrument: {
+                  __typename: 'Instrument',
+                  name: 'ETHUSD (September Market)',
+                  code: 'ETHiUSDT',
+                },
+              },
+            },
+          },
+          {
+            __typename: 'MarketEdge',
+            node: {
+              __typename: 'Market',
+              id: 'bb941f84e25b3a06068e33917d01215d56a51e9abff6ff9b9a3f2cf49b495e37',
+              tradableInstrument: {
+                __typename: 'TradableInstrument',
+                instrument: {
+                  __typename: 'Instrument',
+                  name: 'Las Vegas nuggets',
+                  code: 'Nuggets2',
+                },
+              },
+            },
+          },
+          {
+            __typename: 'MarketEdge',
+            node: {
+              __typename: 'Market',
+              id: '976f71b8d6f99f3685297156a11245f21e49c99d3be17f2577a4bf693b5f37d1',
+              tradableInstrument: {
+                __typename: 'TradableInstrument',
+                instrument: {
+                  __typename: 'Instrument',
+                  name: 'Nuggets',
+                  code: 'Nuggets',
+                },
+              },
+            },
+          },
+          {
+            __typename: 'MarketEdge',
+            node: {
+              __typename: 'Market',
+              id: '1cb2e1755208914b6f258a28babd19ae8dfbaf4084d8867d8a120c50dca1e17f',
+              tradableInstrument: {
+                __typename: 'TradableInstrument',
+                instrument: {
+                  __typename: 'Instrument',
+                  name: 'CELUSD (June 2022)',
+                  code: 'CELUSD',
+                },
+              },
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+
+const renderComponent = () =>
+  render(
+    <MockedProvider
+      mocks={[updateMarketNetworkParamsQueryMock, marketQueryMock]}
+      addTypename={false}
+    >
+      <Router>
+        <AppStateProvider>
+          <VegaWalletContext.Provider value={mockWalletContext}>
+            <ProposeUpdateMarket />
+          </VegaWalletContext.Provider>
+        </AppStateProvider>
+      </Router>
+    </MockedProvider>
+  );
+
+// Note: form submission is tested in propose-raw.spec.tsx. Reusable form
+// components are tested in their own directory.
+
+describe('Propose Update Market', () => {
+  it('should render successfully', async () => {
+    const { baseElement } = renderComponent();
+    await expect(baseElement).toBeTruthy();
+  });
+
+  it('should render the title', async () => {
+    renderComponent();
+
+    await waitFor(() =>
+      expect(screen.getByText('Update market proposal')).toBeInTheDocument()
+    );
+  });
+
+  it('should render the form components', async () => {
+    renderComponent();
+    await waitFor(() =>
+      expect(screen.getByTestId('update-market-proposal-form')).toBeTruthy()
+    );
+    expect(screen.getByTestId('min-proposal-requirements')).toBeTruthy();
+    expect(screen.getByTestId('proposal-title')).toBeTruthy();
+    expect(screen.getByTestId('proposal-description')).toBeTruthy();
+    expect(screen.getByTestId('proposal-terms')).toBeTruthy();
+    expect(screen.getByTestId('proposal-vote-deadline')).toBeTruthy();
+    expect(screen.getByTestId('proposal-enactment-deadline')).toBeTruthy();
+    expect(screen.getByTestId('proposal-submit')).toBeTruthy();
+    expect(screen.getByTestId('proposal-transaction-dialog')).toBeTruthy();
+  });
+
+  it('should render the select element with no initial value', async () => {
+    renderComponent();
+    await waitFor(() =>
+      expect(screen.getByText('Update market proposal')).toBeInTheDocument()
+    );
+    expect(screen.getByTestId('proposal-market-select')).toHaveValue('');
+  });
+
+  it('should render the correct market details when the market select is used', async () => {
+    renderComponent();
+    await waitFor(() =>
+      expect(screen.getByText('Update market proposal')).toBeInTheDocument()
+    );
+    fireEvent.change(screen.getByTestId('proposal-market-select'), {
+      target: {
+        value:
+          'd2319c91104a523032cf04ac4e20962b87ee1f187d1e411a2cac12554dd38f29',
+      },
+    });
+
+    expect(screen.getByTestId('proposal-market-select')).toHaveValue(
+      'd2319c91104a523032cf04ac4e20962b87ee1f187d1e411a2cac12554dd38f29'
+    );
+
+    expect(screen.getByTestId('update-market-details')).toHaveTextContent(
+      'ETHUSD (September Market)'
+    );
+    expect(screen.getByTestId('update-market-details')).toHaveTextContent(
+      'ETHiUSDT'
+    );
+    expect(screen.getByTestId('update-market-details')).toHaveTextContent(
+      'd2319c91104a523032cf04ac4e20962b87ee1f187d1e411a2cac12554dd38f29'
+    );
+  });
+});
diff --git a/apps/token/src/routes/governance/propose/update-market/propose-update-market.tsx b/apps/token/src/routes/governance/propose/update-market/propose-update-market.tsx
new file mode 100644
index 000000000..06ab57ce8
--- /dev/null
+++ b/apps/token/src/routes/governance/propose/update-market/propose-update-market.tsx
@@ -0,0 +1,311 @@
+import { gql, useQuery } from '@apollo/client';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
+import {
+  useProposalSubmit,
+  getClosingTimestamp,
+  getEnactmentTimestamp,
+} from '@vegaprotocol/governance';
+import { useEnvironment } from '@vegaprotocol/environment';
+import {
+  ProposalFormSubheader,
+  ProposalFormMinRequirements,
+  ProposalFormTitle,
+  ProposalFormDescription,
+  ProposalFormTerms,
+  ProposalFormSubmit,
+  ProposalFormTransactionDialog,
+  ProposalFormVoteAndEnactmentDeadline,
+} from '../../components/propose';
+import {
+  AsyncRenderer,
+  FormGroup,
+  InputError,
+  KeyValueTable,
+  KeyValueTableRow,
+  Link,
+  Select,
+} from '@vegaprotocol/ui-toolkit';
+import { Heading } from '../../../../components/heading';
+import { VegaWalletContainer } from '../../../../components/vega-wallet-container';
+import type { ProposalMarketsQuery } from './__generated__/ProposalMarketsQuery';
+import { NetworkParams, useNetworkParams } from '@vegaprotocol/react-helpers';
+
+export const MARKETS_QUERY = gql`
+  query ProposalMarketsQuery {
+    marketsConnection {
+      edges {
+        node {
+          id
+          tradableInstrument {
+            instrument {
+              name
+              code
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+export interface UpdateMarketProposalFormFields {
+  proposalVoteDeadline: string;
+  proposalEnactmentDeadline: string;
+  proposalTitle: string;
+  proposalDescription: string;
+  proposalMarketId: string;
+  proposalTerms: string;
+  proposalReference: string;
+}
+
+const docsLink = '/update-market-proposal';
+
+export const ProposeUpdateMarket = () => {
+  const {
+    params,
+    loading: networkParamsLoading,
+    error: networkParamsError,
+  } = useNetworkParams([
+    NetworkParams.governance_proposal_updateMarket_maxClose,
+    NetworkParams.governance_proposal_updateMarket_minClose,
+    NetworkParams.governance_proposal_updateMarket_maxEnact,
+    NetworkParams.governance_proposal_updateMarket_minEnact,
+    NetworkParams.governance_proposal_updateMarket_minProposerBalance,
+    NetworkParams.spam_protection_proposal_min_tokens,
+  ]);
+
+  const {
+    data: marketsData,
+    loading: marketsLoading,
+    error: marketsError,
+  } = useQuery<ProposalMarketsQuery>(MARKETS_QUERY);
+  const sortedMarkets = useMemo(() => {
+    if (!marketsData) {
+      return [];
+    }
+
+    return marketsData.marketsConnection.edges
+      .map((edge) => edge.node)
+      .sort((a, b) => {
+        const aName = a.tradableInstrument.instrument.name;
+        const bName = b.tradableInstrument.instrument.name;
+
+        if (aName < bName) {
+          return -1;
+        }
+        if (aName > bName) {
+          return 1;
+        }
+        return 0;
+      });
+  }, [marketsData]);
+
+  const [selectedMarket, setSelectedMarket] = useState<string | undefined>(
+    undefined
+  );
+
+  const { VEGA_EXPLORER_URL, VEGA_DOCS_URL } = useEnvironment();
+  const { t } = useTranslation();
+  const {
+    register,
+    handleSubmit,
+    formState: { isSubmitting, errors },
+  } = useForm<UpdateMarketProposalFormFields>();
+  const { finalizedProposal, submit, Dialog } = useProposalSubmit();
+
+  const onSubmit = async (fields: UpdateMarketProposalFormFields) => {
+    await submit({
+      rationale: {
+        title: fields.proposalTitle,
+        description: fields.proposalDescription,
+      },
+      terms: {
+        updateMarket: {
+          marketId: fields.proposalMarketId,
+          changes: {
+            ...JSON.parse(fields.proposalTerms),
+          },
+        },
+        closingTimestamp: getClosingTimestamp(fields.proposalVoteDeadline),
+        enactmentTimestamp: getEnactmentTimestamp(
+          fields.proposalVoteDeadline,
+          fields.proposalEnactmentDeadline
+        ),
+      },
+    });
+  };
+
+  return (
+    <AsyncRenderer
+      loading={networkParamsLoading && marketsLoading}
+      error={networkParamsError && marketsError}
+      data={params && marketsData}
+    >
+      <Heading title={t('UpdateMarketProposal')} />
+      <VegaWalletContainer>
+        {() => (
+          <>
+            <ProposalFormMinRequirements
+              minProposerBalance={
+                params.governance_proposal_updateMarket_minProposerBalance
+              }
+              spamProtectionMin={params.spam_protection_proposal_min_tokens}
+            />
+
+            {VEGA_DOCS_URL && (
+              <p className="text-sm" data-testid="proposal-docs-link">
+                <span className="mr-1">{t('ProposalTermsText')}</span>
+                <Link
+                  href={`${VEGA_DOCS_URL}/tutorials/proposals${docsLink}`}
+                  target="_blank"
+                >{`${VEGA_DOCS_URL}/tutorials/proposals${docsLink}`}</Link>
+              </p>
+            )}
+
+            {VEGA_EXPLORER_URL && (
+              <p className="text-sm">
+                {t('MoreMarketsInfo')}{' '}
+                <Link
+                  href={`${VEGA_EXPLORER_URL}/markets`}
+                  target="_blank"
+                >{`${VEGA_EXPLORER_URL}/markets`}</Link>
+              </p>
+            )}
+
+            <div data-testid="update-market-proposal-form">
+              <form onSubmit={handleSubmit(onSubmit)}>
+                <ProposalFormSubheader>
+                  {t('ProposalRationale')}
+                </ProposalFormSubheader>
+
+                <ProposalFormTitle
+                  registerField={register('proposalTitle', {
+                    required: t('Required'),
+                  })}
+                  errorMessage={errors?.proposalTitle?.message}
+                />
+
+                <ProposalFormDescription
+                  registerField={register('proposalDescription', {
+                    required: t('Required'),
+                  })}
+                  errorMessage={errors?.proposalDescription?.message}
+                />
+
+                <ProposalFormSubheader>
+                  {t('SelectAMarketToChange')}
+                </ProposalFormSubheader>
+
+                <FormGroup
+                  label={t('SelectAMarketToChange')}
+                  labelFor="proposal-market"
+                  hideLabel={true}
+                >
+                  <Select
+                    data-testid="proposal-market-select"
+                    id="proposal-market"
+                    {...register('proposalMarketId', {
+                      required: t('Required'),
+                    })}
+                    onChange={(e) => setSelectedMarket(e.target.value)}
+                  >
+                    <option value="">{t('SelectMarket')}</option>
+                    {sortedMarkets.map((market) => (
+                      <option value={market.id} key={market.id}>
+                        {market.tradableInstrument.instrument.name}
+                      </option>
+                    ))}
+                  </Select>
+                  {errors?.proposalMarketId?.message && (
+                    <InputError intent="danger">
+                      {errors?.proposalMarketId?.message}
+                    </InputError>
+                  )}
+                </FormGroup>
+
+                {selectedMarket && (
+                  <div className="mt-[-20px] mb-6">
+                    <KeyValueTable data-testid="update-market-details">
+                      <KeyValueTableRow>
+                        {t('MarketName')}
+                        {
+                          marketsData?.marketsConnection?.edges?.find(
+                            ({ node: market }) => market.id === selectedMarket
+                          )?.node.tradableInstrument.instrument.name
+                        }
+                      </KeyValueTableRow>
+                      <KeyValueTableRow>
+                        {t('MarketCode')}
+                        {
+                          marketsData?.marketsConnection?.edges?.find(
+                            ({ node: market }) => market.id === selectedMarket
+                          )?.node.tradableInstrument.instrument.code
+                        }
+                      </KeyValueTableRow>
+                      <KeyValueTableRow>
+                        {t('MarketId')}
+                        {selectedMarket}
+                      </KeyValueTableRow>
+                    </KeyValueTable>
+                  </div>
+                )}
+
+                <ProposalFormTerms
+                  registerField={register('proposalTerms', {
+                    required: t('Required'),
+                    validate: {
+                      validateJson: (value) => {
+                        try {
+                          JSON.parse(value);
+                          return true;
+                        } catch (e) {
+                          return t('Must be valid JSON');
+                        }
+                      },
+                    },
+                  })}
+                  labelOverride={t('ProposeUpdateMarketTerms')}
+                  errorMessage={errors?.proposalTerms?.message}
+                  customDocLink={docsLink}
+                />
+
+                <ProposalFormVoteAndEnactmentDeadline
+                  voteRegister={register('proposalVoteDeadline', {
+                    required: t('Required'),
+                  })}
+                  voteErrorMessage={errors?.proposalVoteDeadline?.message}
+                  voteMinClose={
+                    params.governance_proposal_updateMarket_minClose
+                  }
+                  voteMaxClose={
+                    params.governance_proposal_updateMarket_maxClose
+                  }
+                  enactmentRegister={register('proposalEnactmentDeadline', {
+                    required: t('Required'),
+                  })}
+                  enactmentErrorMessage={
+                    errors?.proposalEnactmentDeadline?.message
+                  }
+                  enactmentMinClose={
+                    params.governance_proposal_updateMarket_minEnact
+                  }
+                  enactmentMaxClose={
+                    params.governance_proposal_updateMarket_maxEnact
+                  }
+                />
+
+                <ProposalFormSubmit isSubmitting={isSubmitting} />
+                <ProposalFormTransactionDialog
+                  finalizedProposal={finalizedProposal}
+                  TransactionDialog={Dialog}
+                />
+              </form>
+            </div>
+          </>
+        )}
+      </VegaWalletContainer>
+    </AsyncRenderer>
+  );
+};
diff --git a/apps/token/src/routes/index.tsx b/apps/token/src/routes/index.tsx
index e03d98b34..bf2641a43 100644
--- a/apps/token/src/routes/index.tsx
+++ b/apps/token/src/routes/index.tsx
@@ -3,7 +3,7 @@ import { Splash } from '@vegaprotocol/ui-toolkit';
 import React from 'react';
 import type { WithTranslation } from 'react-i18next';
 import { withTranslation } from 'react-i18next';
-import { Route, Routes } from 'react-router-dom';
+import { useRoutes } from 'react-router-dom';
 
 import { SplashLoader } from '../components/splash-loader';
 import routerConfig from './router-config';
@@ -45,6 +45,8 @@ class RouteErrorBoundary extends React.Component<
 const BoundaryWithTranslation = withTranslation()(RouteErrorBoundary);
 
 export const AppRouter = () => {
+  const routes = useRoutes(routerConfig);
+
   const splashLoading = (
     <Splash>
       <SplashLoader />
@@ -52,26 +54,8 @@ export const AppRouter = () => {
   );
 
   return (
-    // @ts-ignore withTranslation HOC types not working
     <BoundaryWithTranslation>
-      <React.Suspense fallback={splashLoading}>
-        <Routes>
-          {routerConfig.map(
-            ({ path, component: Component, name, children }) => (
-              <Route key={name} path={path} element={<Component name={name} />}>
-                {children && children.length
-                  ? children.map((child) => (
-                      <Route
-                        key={`${name}-${child.path ? child.path : 'index'}`}
-                        {...child}
-                      />
-                    ))
-                  : null}
-              </Route>
-            )
-          )}
-        </Routes>
-      </React.Suspense>
+      <React.Suspense fallback={splashLoading}>{routes}</React.Suspense>
     </BoundaryWithTranslation>
   );
 };
diff --git a/apps/token/src/routes/rewards/home/index.tsx b/apps/token/src/routes/rewards/home/index.tsx
index aa6beb2aa..86e093b59 100644
--- a/apps/token/src/routes/rewards/home/index.tsx
+++ b/apps/token/src/routes/rewards/home/index.tsx
@@ -10,7 +10,6 @@ import { useTranslation } from 'react-i18next';
 import { EpochCountdown } from '../../../components/epoch-countdown';
 import { Heading } from '../../../components/heading';
 import { SplashLoader } from '../../../components/splash-loader';
-import { NetworkParams } from '../../../config';
 import {
   AppStateActionType,
   useAppState,
@@ -18,7 +17,7 @@ import {
 import type { Rewards } from './__generated__/Rewards';
 import { RewardInfo } from './reward-info';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { useNetworkParams } from '@vegaprotocol/react-helpers';
+import { useNetworkParams, NetworkParams } from '@vegaprotocol/react-helpers';
 
 export const REWARDS_QUERY = gql`
   query Rewards($partyId: ID!) {
@@ -73,33 +72,30 @@ export const RewardsIndex = () => {
     variables: { partyId: keypair?.pub },
     skip: !keypair?.pub,
   });
-  const {
-    data: rewardAssetData,
-    loading: rewardAssetLoading,
-    error: rewardAssetError,
-  } = useNetworkParams([
-    NetworkParams.REWARD_ASSET,
-    NetworkParams.REWARD_PAYOUT_DURATION,
+  const { params } = useNetworkParams([
+    NetworkParams.reward_asset,
+    NetworkParams.reward_staking_delegation_payoutDelay,
   ]);
 
   const payoutDuration = React.useMemo(() => {
-    if (!rewardAssetData || !rewardAssetData[1]) {
+    if (!params) {
       return 0;
     }
-    return new Duration(rewardAssetData[1]).milliseconds();
-  }, [rewardAssetData]);
+    return new Duration(
+      params.reward_staking_delegation_payoutDelay
+    ).milliseconds();
+  }, [params]);
 
-  if (error || rewardAssetError) {
+  if (error) {
     return (
       <section>
         <p>{t('Something went wrong')}</p>
         {error && <pre>{error.message}</pre>}
-        {rewardAssetError && <pre>{rewardAssetError.message}</pre>}
       </section>
     );
   }
 
-  if (loading || rewardAssetLoading || !rewardAssetData?.length) {
+  if (loading || !params) {
     return (
       <Splash>
         <SplashLoader />
@@ -145,7 +141,7 @@ export const RewardsIndex = () => {
           <RewardInfo
             currVegaKey={keypair}
             data={data}
-            rewardAssetId={rewardAssetData[0]}
+            rewardAssetId={params.reward_asset}
           />
         ) : (
           <div>
diff --git a/apps/token/src/routes/router-config.tsx b/apps/token/src/routes/router-config.tsx
index afb370ad4..87041608b 100644
--- a/apps/token/src/routes/router-config.tsx
+++ b/apps/token/src/routes/router-config.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Outlet } from 'react-router-dom';
 import Home from './home';
 import NotFound from './not-found';
 import NotPermitted from './not-permitted';
@@ -129,6 +130,48 @@ const LazyGovernancePropose = React.lazy(
     )
 );
 
+const LazyGovernanceProposeNetworkParameter = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "route-governance-propose-network-parameter", webpackPrefetch: true */ './governance/propose/network-parameter'
+    )
+);
+
+const LazyGovernanceProposeNewMarket = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "route-governance-propose-new-market", webpackPrefetch: true */ './governance/propose/new-market'
+    )
+);
+
+const LazyGovernanceProposeUpdateMarket = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "route-governance-propose-update-market", webpackPrefetch: true */ './governance/propose/update-market'
+    )
+);
+
+const LazyGovernanceProposeNewAsset = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "route-governance-propose-new-asset", webpackPrefetch: true */ './governance/propose/new-asset'
+    )
+);
+
+const LazyGovernanceProposeFreeform = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "route-governance-propose-freeform", webpackPrefetch: true */ './governance/propose/freeform'
+    )
+);
+
+const LazyGovernanceProposeRaw = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "route-governance-propose-raw", webpackPrefetch: true */ './governance/propose/raw'
+    )
+);
+
 const LazyRewards = React.lazy(
   () =>
     import(
@@ -153,14 +196,12 @@ const LazyWithdrawals = React.lazy(
 const routerConfig = [
   {
     path: Routes.HOME,
-    name: 'Home',
     // Not lazy as loaded when a user first hits the site
-    component: Home,
+    element: <Home name="Home" />,
   },
   {
     path: Routes.TRANCHES,
-    name: 'Tranches',
-    component: LazyTranches,
+    element: <LazyTranches name="Tranches" />,
     children: [
       { index: true, element: <LazyTranchesTranches /> },
       { path: ':trancheId', element: <LazyTranchesTranche /> },
@@ -168,13 +209,11 @@ const routerConfig = [
   },
   {
     path: Routes.CLAIM,
-    name: 'Claim',
-    component: LazyClaim,
+    element: <LazyClaim name="Claim" />,
   },
   {
     path: Routes.STAKING,
-    name: 'Staking',
-    component: LazyStaking,
+    element: <LazyStaking name="Staking" />,
     children: [
       { path: 'associate', element: <LazyStakingAssociate /> },
       { path: 'disassociate', element: <LazyStakingDisassociate /> },
@@ -191,18 +230,15 @@ const routerConfig = [
   },
   {
     path: Routes.REWARDS,
-    name: 'Rewards',
-    component: LazyRewards,
+    element: <LazyRewards name="Rewards" />,
   },
   {
     path: Routes.WITHDRAWALS,
-    name: 'Withdrawals',
-    component: LazyWithdrawals,
+    element: <LazyWithdrawals name="Withdrawals" />,
   },
   {
     path: Routes.VESTING,
-    name: 'Vesting',
-    component: LazyRedemption,
+    element: <LazyRedemption name="Vesting" />,
     children: [
       {
         index: true,
@@ -216,31 +252,48 @@ const routerConfig = [
   },
   {
     path: Routes.GOVERNANCE,
-    name: 'Governance',
-    component: LazyGovernance,
+    element: <LazyGovernance name="Governance" />,
     children: [
-      { path: ':proposalId', element: <LazyGovernanceProposal /> },
-      { path: 'propose', element: <LazyGovernancePropose /> },
-      { path: 'rejected', element: <LazyRejectedGovernanceProposals /> },
       { index: true, element: <LazyGovernanceProposals /> },
+      {
+        path: 'propose',
+        element: <Outlet />,
+        children: [
+          { index: true, element: <LazyGovernancePropose /> },
+          {
+            path: 'network-parameter',
+            element: <LazyGovernanceProposeNetworkParameter />,
+          },
+          {
+            path: 'new-market',
+            element: <LazyGovernanceProposeNewMarket />,
+          },
+          {
+            path: 'update-market',
+            element: <LazyGovernanceProposeUpdateMarket />,
+          },
+          { path: 'new-asset', element: <LazyGovernanceProposeNewAsset /> },
+          { path: 'freeform', element: <LazyGovernanceProposeFreeform /> },
+          { path: 'raw', element: <LazyGovernanceProposeRaw /> },
+        ],
+      },
+      { path: ':proposalId', element: <LazyGovernanceProposal /> },
+      { path: 'rejected', element: <LazyRejectedGovernanceProposals /> },
     ],
   },
   {
     path: Routes.NOT_PERMITTED,
-    name: 'Not permitted',
     // Not lazy as loaded when a user first hits the site
-    component: NotPermitted,
+    element: <NotPermitted name="Not permitted" />,
   },
   {
     path: Routes.CONTRACTS,
-    name: 'Contracts',
-    component: LazyContracts,
+    element: <LazyContracts name="Contracts" />,
   },
   {
     path: '*',
-    name: 'NotFound',
     // Not lazy as loaded when a user first hits the site
-    component: NotFound,
+    element: <NotFound name="NotFound" />,
   },
 ];
 
diff --git a/apps/token/src/routes/staking/node-list.spec.tsx b/apps/token/src/routes/staking/node-list.spec.tsx
index 84b6fbec9..190eb0202 100644
--- a/apps/token/src/routes/staking/node-list.spec.tsx
+++ b/apps/token/src/routes/staking/node-list.spec.tsx
@@ -6,6 +6,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { addDecimal } from '@vegaprotocol/react-helpers';
 import type { Nodes_nodes } from './__generated__/Nodes';
 import type { PartialDeep } from 'type-fest';
+import { ValidatorStatus } from '@vegaprotocol/types';
 
 jest.mock('../../components/epoch-countdown', () => ({
   EpochCountdown: () => <div data-testid="epoch-info"></div>,
@@ -55,7 +56,7 @@ const MOCK_NODES = {
         stakeScore: '0.2300971220240714',
         performanceScore: '1',
         votingPower: '2408',
-        status: 'tendermint',
+        status: ValidatorStatus.VALIDATOR_NODE_STATUS_TENDERMINT,
         __typename: 'RankingScore',
       },
     }),
@@ -72,7 +73,7 @@ const MOCK_NODES = {
         stakeScore: '0.0966762995515676',
         performanceScore: '0.999629748500531',
         votingPower: '1163',
-        status: 'tendermint',
+        status: ValidatorStatus.VALIDATOR_NODE_STATUS_TENDERMINT,
         __typename: 'RankingScore',
       },
     }),
@@ -161,7 +162,7 @@ describe('Nodes list', () => {
             stakeScore: '0.2300971220240714',
             performanceScore: '1',
             votingPower: '2408',
-            status: 'tendermint',
+            status: ValidatorStatus.VALIDATOR_NODE_STATUS_TENDERMINT,
             __typename: 'RankingScore',
           },
         }),
diff --git a/apps/token/src/routes/staking/node-list.tsx b/apps/token/src/routes/staking/node-list.tsx
index eaf2c5fb2..8cd3d0f95 100644
--- a/apps/token/src/routes/staking/node-list.tsx
+++ b/apps/token/src/routes/staking/node-list.tsx
@@ -1,5 +1,5 @@
 import { gql, useQuery } from '@apollo/client';
-import { useEffect, useMemo, useRef, forwardRef } from 'react';
+import { forwardRef, useEffect, useMemo, useRef } from 'react';
 import {
   AgGridDynamic as AgGrid,
   AsyncRenderer,
@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next';
 import { EpochCountdown } from '../../components/epoch-countdown';
 import { BigNumber } from '../../lib/bignumber';
 import { formatNumber } from '@vegaprotocol/react-helpers';
+import { ValidatorStatus } from '@vegaprotocol/types';
 import type { Nodes } from './__generated__/Nodes';
 import type { Staking_epoch } from './__generated__/Staking';
 import type { ColDef } from 'ag-grid-community';
@@ -136,7 +137,16 @@ export const NodeList = ({ epoch }: NodeListProps) => {
             ? '-'
             : stakedOnNode.dividedBy(stakedTotal).times(100).dp(2).toString() +
               '%';
-        const statusTranslated = t(`status-${status}`);
+        const statusTranslated = t(
+          `${
+            (status === ValidatorStatus.VALIDATOR_NODE_STATUS_ERSATZ &&
+              'Ersatz') ||
+            (status === ValidatorStatus.VALIDATOR_NODE_STATUS_PENDING &&
+              'Pending') ||
+            (status === ValidatorStatus.VALIDATOR_NODE_STATUS_TENDERMINT &&
+              'Consensus')
+          }`
+        );
 
         return {
           id,
diff --git a/apps/token/src/routes/staking/staking-form.tsx b/apps/token/src/routes/staking/staking-form.tsx
index 666639328..7ab1f5b16 100644
--- a/apps/token/src/routes/staking/staking-form.tsx
+++ b/apps/token/src/routes/staking/staking-form.tsx
@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
 import { TokenInput } from '../../components/token-input';
-import { NetworkParams } from '../../config';
 import { useAppState } from '../../contexts/app-state/app-state-context';
 import { useSearchParams } from '../../hooks/use-search-params';
 import { BigNumber } from '../../lib/bignumber';
@@ -30,7 +29,7 @@ import type {
   UndelegateSubmissionBody,
 } from '@vegaprotocol/wallet';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { useNetworkParam } from '@vegaprotocol/react-helpers';
+import { useNetworkParam, NetworkParams } from '@vegaprotocol/react-helpers';
 
 export const PARTY_DELEGATIONS_QUERY = gql`
   query PartyDelegations($partyId: ID!) {
@@ -103,14 +102,14 @@ export const StakingForm = ({
     setAmount('');
   }, [action, setAmount]);
 
-  const { data } = useNetworkParam(
-    NetworkParams.VALIDATOR_DELEGATION_MIN_AMOUNT
+  const { param: minAmount } = useNetworkParam(
+    NetworkParams.validators_delegation_minAmount
   );
 
   const minTokensWithDecimals = React.useMemo(() => {
-    const minTokens = new BigNumber(data && data.length === 1 ? data[0] : '');
+    const minTokens = new BigNumber(minAmount !== null ? minAmount : '');
     return addDecimal(minTokens, appState.decimals);
-  }, [appState.decimals, data]);
+  }, [appState.decimals, minAmount]);
 
   const maxDelegation = React.useMemo(() => {
     if (action === Actions.Add) {
diff --git a/apps/token/src/routes/withdrawals/index.tsx b/apps/token/src/routes/withdrawals/index.tsx
index ad0b63878..486fc7fa3 100644
--- a/apps/token/src/routes/withdrawals/index.tsx
+++ b/apps/token/src/routes/withdrawals/index.tsx
@@ -10,8 +10,11 @@ import {
   WithdrawalsTable,
 } from '@vegaprotocol/withdraws';
 import { useState } from 'react';
+import { useDocumentTitle } from '../../hooks/use-document-title';
+import type { RouteChildProps } from '../index';
 
-const Withdrawals = () => {
+const Withdrawals = ({ name }: RouteChildProps) => {
+  useDocumentTitle(name);
   const { t } = useTranslation();
 
   return (
diff --git a/libs/environment/src/utils/compile-environment.ts b/libs/environment/src/utils/compile-environment.ts
index 1b61c3564..b39bc7c28 100644
--- a/libs/environment/src/utils/compile-environment.ts
+++ b/libs/environment/src/utils/compile-environment.ts
@@ -72,6 +72,8 @@ const getBundledEnvironmentValue = (key: EnvKey) => {
       return process.env['NX_VEGA_WALLET_URL'];
     case 'VEGA_TOKEN_URL':
       return process.env['NX_VEGA_TOKEN_URL'];
+    case 'VEGA_DOCS_URL':
+      return process.env['NX_VEGA_DOCS_URL'];
   }
 };
 
diff --git a/libs/environment/src/utils/validate-environment.ts b/libs/environment/src/utils/validate-environment.ts
index 260e8b275..42d2cf5c6 100644
--- a/libs/environment/src/utils/validate-environment.ts
+++ b/libs/environment/src/utils/validate-environment.ts
@@ -22,6 +22,7 @@ const schemaObject = {
   VEGA_ENV: z.nativeEnum(Networks),
   VEGA_EXPLORER_URL: z.optional(z.string()),
   VEGA_TOKEN_URL: z.optional(z.string()),
+  VEGA_DOCS_URL: z.optional(z.string()),
   VEGA_NETWORKS: z
     .object(
       Object.keys(Networks).reduce(
diff --git a/libs/governance/src/lib/index.ts b/libs/governance/src/lib/index.ts
index 3990e39c6..e84c1929e 100644
--- a/libs/governance/src/lib/index.ts
+++ b/libs/governance/src/lib/index.ts
@@ -1,3 +1,2 @@
 export * from './proposals-hooks';
-export * from './proposal-form';
 export * from './proposals-queries';
diff --git a/libs/governance/src/lib/proposal-form.tsx b/libs/governance/src/lib/proposal-form.tsx
deleted file mode 100644
index c63f7b2b4..000000000
--- a/libs/governance/src/lib/proposal-form.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import {
-  Button,
-  FormGroup,
-  InputError,
-  TextArea,
-} from '@vegaprotocol/ui-toolkit';
-import { useForm } from 'react-hook-form';
-import { useProposalSubmit } from './proposals-hooks';
-import {
-  getProposalDialogIcon,
-  getProposalDialogIntent,
-  getProposalDialogTitle,
-} from '../utils';
-import { t } from '@vegaprotocol/react-helpers';
-
-export interface FormFields {
-  proposalData: string;
-}
-
-export const ProposalForm = () => {
-  const {
-    register,
-    handleSubmit,
-    formState: { isSubmitting, errors },
-  } = useForm<FormFields>();
-  const { finalizedProposal, submit, Dialog } = useProposalSubmit();
-
-  const hasError = Boolean(errors.proposalData?.message);
-
-  const onSubmit = async (fields: FormFields) => {
-    await submit(JSON.parse(fields.proposalData));
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <FormGroup
-        label="Make a proposal by submitting JSON"
-        labelFor="proposal-data"
-      >
-        <TextArea
-          id="proposal-data"
-          className="min-h-[200px]"
-          hasError={hasError}
-          data-testid="proposal-data"
-          {...register('proposalData', {
-            required: t('Required'),
-            validate: {
-              validateJson: (value) => {
-                try {
-                  JSON.parse(value);
-                  return true;
-                } catch (e) {
-                  return t('Must be valid JSON');
-                }
-              },
-            },
-          })}
-        />
-        {errors.proposalData?.message && (
-          <InputError intent="danger">
-            {errors.proposalData?.message}
-          </InputError>
-        )}
-      </FormGroup>
-      <Button
-        variant="primary"
-        type="submit"
-        data-testid="proposal-submit"
-        disabled={isSubmitting}
-      >
-        {isSubmitting ? t('Submitting') : t('Submit')} {t('Proposal')}
-      </Button>
-      <Dialog
-        title={getProposalDialogTitle(finalizedProposal?.state)}
-        intent={getProposalDialogIntent(finalizedProposal?.state)}
-        icon={getProposalDialogIcon(finalizedProposal?.state)}
-      >
-        {finalizedProposal?.rejectionReason ? (
-          <p>{finalizedProposal.rejectionReason}</p>
-        ) : undefined}
-      </Dialog>
-    </form>
-  );
-};
diff --git a/libs/governance/src/utils/get-closing-timestamp.spec.ts b/libs/governance/src/utils/get-closing-timestamp.spec.ts
new file mode 100644
index 000000000..8c85f0ce0
--- /dev/null
+++ b/libs/governance/src/utils/get-closing-timestamp.spec.ts
@@ -0,0 +1,33 @@
+import { getClosingTimestamp } from './get-closing-timestamp';
+import { addHours, addMinutes, getTime } from 'date-fns';
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  jest.setSystemTime(0);
+});
+
+afterEach(() => {
+  jest.useRealTimers();
+});
+
+describe('getClosingTimestamp', () => {
+  it('should return the correct timestamp if the proposalVoteDeadline is 1 (when 2 mins are added)', () => {
+    const proposalVoteDeadline = '1';
+    const expected = Math.floor(
+      getTime(
+        addHours(addMinutes(new Date(), 2), Number(proposalVoteDeadline))
+      ) / 1000
+    );
+    const actual = getClosingTimestamp(proposalVoteDeadline);
+    expect(actual).toEqual(expected);
+  });
+
+  it('should return the correct timestamp if the proposalVoteDeadline is 2 (when no extra mins are added)', () => {
+    const proposalVoteDeadline = '2';
+    const expected = Math.floor(
+      getTime(addHours(new Date(), Number(proposalVoteDeadline))) / 1000
+    );
+    const actual = getClosingTimestamp(proposalVoteDeadline);
+    expect(actual).toEqual(expected);
+  });
+});
diff --git a/libs/governance/src/utils/get-closing-timestamp.ts b/libs/governance/src/utils/get-closing-timestamp.ts
new file mode 100644
index 000000000..a465c5229
--- /dev/null
+++ b/libs/governance/src/utils/get-closing-timestamp.ts
@@ -0,0 +1,14 @@
+import { addHours, addMinutes, getTime } from 'date-fns';
+
+// If proposaVoteDeadline is at its minimum of 1 hour, then we add
+// 2 extra minutes to the closing timestamp to ensure that there's time
+// to confirm in the wallet.
+
+export const getClosingTimestamp = (proposalVoteDeadline: string) =>
+  Math.floor(
+    getTime(
+      proposalVoteDeadline === '1'
+        ? addHours(addMinutes(new Date(), 2), Number(proposalVoteDeadline))
+        : addHours(new Date(), Number(proposalVoteDeadline))
+    ) / 1000
+  );
diff --git a/libs/governance/src/utils/get-enactment-timestamp.spec.ts b/libs/governance/src/utils/get-enactment-timestamp.spec.ts
new file mode 100644
index 000000000..8349567b6
--- /dev/null
+++ b/libs/governance/src/utils/get-enactment-timestamp.spec.ts
@@ -0,0 +1,31 @@
+import { getEnactmentTimestamp } from './get-enactment-timestamp';
+import { addHours, getTime } from 'date-fns';
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  jest.setSystemTime(0);
+});
+
+afterEach(() => {
+  jest.useRealTimers();
+});
+
+describe('getEnactmentTimestamp', () => {
+  it('should return the correct timestamp', () => {
+    const proposalVoteDeadline = '2';
+    const enactmentDeadline = '1';
+    const expected = Math.floor(
+      getTime(
+        addHours(
+          new Date(),
+          Number(proposalVoteDeadline) + Number(enactmentDeadline)
+        )
+      ) / 1000
+    );
+    const actual = getEnactmentTimestamp(
+      proposalVoteDeadline,
+      enactmentDeadline
+    );
+    expect(actual).toEqual(expected);
+  });
+});
diff --git a/libs/governance/src/utils/get-enactment-timestamp.ts b/libs/governance/src/utils/get-enactment-timestamp.ts
new file mode 100644
index 000000000..a255aed47
--- /dev/null
+++ b/libs/governance/src/utils/get-enactment-timestamp.ts
@@ -0,0 +1,15 @@
+import { addHours, fromUnixTime, getTime } from 'date-fns';
+import { getClosingTimestamp } from './get-closing-timestamp';
+
+export const getEnactmentTimestamp = (
+  proposalVoteDeadline: string,
+  enactmentDeadline: string
+) =>
+  Math.floor(
+    getTime(
+      addHours(
+        new Date(fromUnixTime(getClosingTimestamp(proposalVoteDeadline))),
+        Number(enactmentDeadline)
+      )
+    ) / 1000
+  );
diff --git a/libs/governance/src/utils/get-validation-timestamp.spec.ts b/libs/governance/src/utils/get-validation-timestamp.spec.ts
new file mode 100644
index 000000000..1c4210e6e
--- /dev/null
+++ b/libs/governance/src/utils/get-validation-timestamp.spec.ts
@@ -0,0 +1,33 @@
+import { addHours, addMinutes, getTime } from 'date-fns';
+import { getValidationTimestamp } from './get-validation-timestamp';
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  jest.setSystemTime(0);
+});
+
+afterEach(() => {
+  jest.useRealTimers();
+});
+
+describe('getValidationTimestamp', () => {
+  it('should return the correct timestamp if the proposalValidationDeadline is 0 (when 2 mins are added)', () => {
+    const proposalValidationDeadline = '0';
+    const expected = Math.floor(
+      getTime(
+        addHours(addMinutes(new Date(), 2), Number(proposalValidationDeadline))
+      ) / 1000
+    );
+    const actual = getValidationTimestamp(proposalValidationDeadline);
+    expect(actual).toEqual(expected);
+  });
+
+  it('should return the correct timestamp if the proposalValidationDeadline is 1 (when no extra mins are added)', () => {
+    const proposalValidationDeadline = '1';
+    const expected = Math.floor(
+      getTime(addHours(new Date(), Number(proposalValidationDeadline))) / 1000
+    );
+    const actual = getValidationTimestamp(proposalValidationDeadline);
+    expect(actual).toEqual(expected);
+  });
+});
diff --git a/libs/governance/src/utils/get-validation-timestamp.ts b/libs/governance/src/utils/get-validation-timestamp.ts
new file mode 100644
index 000000000..36a7a7011
--- /dev/null
+++ b/libs/governance/src/utils/get-validation-timestamp.ts
@@ -0,0 +1,17 @@
+import { addHours, addMinutes, getTime } from 'date-fns';
+
+// If proposalValidationDeadline is at its minimum of 0 hours, then we add
+// 2 extra minutes to the validation timestamp to ensure that there's time
+// to confirm in the wallet.
+
+export const getValidationTimestamp = (proposalValidationDeadline: string) =>
+  Math.floor(
+    getTime(
+      proposalValidationDeadline === '0'
+        ? addHours(
+            addMinutes(new Date(), 2),
+            Number(proposalValidationDeadline)
+          )
+        : addHours(new Date(), Number(proposalValidationDeadline))
+    ) / 1000
+  );
diff --git a/libs/governance/src/utils/index.ts b/libs/governance/src/utils/index.ts
index 0c259917e..f55b31a65 100644
--- a/libs/governance/src/utils/index.ts
+++ b/libs/governance/src/utils/index.ts
@@ -1 +1,4 @@
 export * from './proposal-dialog-helpers';
+export * from './get-closing-timestamp';
+export * from './get-enactment-timestamp';
+export * from './get-validation-timestamp';
diff --git a/libs/liquidity/src/lib/liquidity-data-provider.ts b/libs/liquidity/src/lib/liquidity-data-provider.ts
index b37681d7d..2ddbeb2b5 100644
--- a/libs/liquidity/src/lib/liquidity-data-provider.ts
+++ b/libs/liquidity/src/lib/liquidity-data-provider.ts
@@ -1,15 +1,13 @@
 import { gql, useQuery } from '@apollo/client';
 import type { LiquidityProvisionStatus } from '@vegaprotocol/types';
 import { AccountType } from '@vegaprotocol/types';
-import { useNetworkParam } from '@vegaprotocol/react-helpers';
+import { useNetworkParam, NetworkParams } from '@vegaprotocol/react-helpers';
 import BigNumber from 'bignumber.js';
 import type {
   MarketLiquidity,
   MarketLiquidity_market_data_liquidityProviderFeeShare,
 } from './__generated__';
 
-const SISKA_NETWORK_PARAMETER = 'market.liquidity.stakeToCcySiskas';
-
 const MARKET_LIQUIDITY_QUERY = gql`
   query MarketLiquidity($marketId: ID!) {
     market(id: $marketId) {
@@ -106,7 +104,9 @@ export const useLiquidityProvision = ({
   partyId?: string;
   marketId?: string;
 }) => {
-  const { data: stakeToCcySiskas } = useNetworkParam(SISKA_NETWORK_PARAMETER);
+  const { param: stakeToCcySiskas } = useNetworkParam(
+    NetworkParams.market_liquidity_stakeToCcySiskas
+  );
   const stakeToCcySiska = stakeToCcySiskas && stakeToCcySiskas[0];
   const { data, loading, error } = useQuery<MarketLiquidity>(
     MARKET_LIQUIDITY_QUERY,
diff --git a/libs/react-helpers/src/hooks/use-network-params.spec.tsx b/libs/react-helpers/src/hooks/use-network-params.spec.tsx
new file mode 100644
index 000000000..4e2cf31a8
--- /dev/null
+++ b/libs/react-helpers/src/hooks/use-network-params.spec.tsx
@@ -0,0 +1,115 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import type { MockedResponse } from '@apollo/client/testing';
+import { MockedProvider } from '@apollo/client/testing';
+import type { NetworkParamsKey } from './use-network-params';
+import {
+  NetworkParams,
+  NETWORK_PARAMETERS_QUERY,
+  NETWORK_PARAMETER_QUERY,
+  useNetworkParam,
+  useNetworkParams,
+} from './use-network-params';
+import type { ReactNode } from 'react';
+import type { NetworkParams as NetworkParamsResponse } from './__generated__';
+
+describe('useNetworkParam', () => {
+  const setup = (arg: NetworkParamsKey) => {
+    const mock: MockedResponse = {
+      request: {
+        query: NETWORK_PARAMETER_QUERY,
+        variables: {
+          key: arg,
+        },
+      },
+      result: {
+        data: {
+          networkParameter: {
+            __typename: 'NetworkParameter',
+            key: 'reward.staking.delegation.payoutDelay',
+            value: '200',
+          },
+        },
+      },
+    };
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <MockedProvider mocks={[mock]}>{children}</MockedProvider>
+    );
+
+    return renderHook(() => useNetworkParam(arg), { wrapper });
+  };
+
+  it('returns a single param value', async () => {
+    const { result } = setup(
+      NetworkParams.reward_staking_delegation_payoutDelay
+    );
+    expect(result.current.param).toBe(null);
+    await waitFor(() => {
+      expect(result.current.param).toEqual('200');
+    });
+  });
+});
+
+describe('useNetworkParams', () => {
+  const setup = (args?: NetworkParamsKey[]) => {
+    const mock: MockedResponse<NetworkParamsResponse> = {
+      request: {
+        query: NETWORK_PARAMETERS_QUERY,
+      },
+      result: {
+        data: {
+          networkParameters: [
+            {
+              __typename: 'NetworkParameter',
+              key: 'spam.protection.proposal.min.tokens',
+              value: '1',
+            },
+            {
+              __typename: 'NetworkParameter',
+              key: 'governance.proposal.updateMarket.minProposerBalance',
+              value: '2',
+            },
+            {
+              __typename: 'NetworkParameter',
+              key: 'reward.staking.delegation.payoutDelay',
+              value: '200',
+            },
+          ],
+        },
+      },
+    };
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <MockedProvider mocks={[mock]}>{children}</MockedProvider>
+    );
+
+    return renderHook(() => useNetworkParams(args), { wrapper });
+  };
+  it('returns an object with only desired params', async () => {
+    const { result } = setup([
+      NetworkParams.spam_protection_proposal_min_tokens,
+      NetworkParams.governance_proposal_updateMarket_minProposerBalance,
+    ]);
+
+    expect(result.current.params).toBe(null);
+
+    await waitFor(() => {
+      expect(result.current.params).toEqual({
+        spam_protection_proposal_min_tokens: '1',
+        governance_proposal_updateMarket_minProposerBalance: '2',
+      });
+    });
+  });
+
+  it('returns all params', async () => {
+    const { result } = setup();
+
+    expect(result.current.params).toBe(null);
+
+    await waitFor(() => {
+      expect(result.current.params).toEqual({
+        spam_protection_proposal_min_tokens: '1',
+        governance_proposal_updateMarket_minProposerBalance: '2',
+        reward_staking_delegation_payoutDelay: '200',
+      });
+    });
+  });
+});
diff --git a/libs/react-helpers/src/hooks/use-network-params.ts b/libs/react-helpers/src/hooks/use-network-params.ts
index c8c16cb3d..e373c86fb 100644
--- a/libs/react-helpers/src/hooks/use-network-params.ts
+++ b/libs/react-helpers/src/hooks/use-network-params.ts
@@ -1,5 +1,6 @@
 import { gql, useQuery } from '@apollo/client';
-import type { NetworkParams } from './__generated__/NetworkParams';
+import { useMemo } from 'react';
+import type { NetworkParams as NetworkParamsResponse } from './__generated__';
 
 export const NETWORK_PARAMETERS_QUERY = gql`
   query NetworkParams {
@@ -10,27 +11,127 @@ export const NETWORK_PARAMETERS_QUERY = gql`
   }
 `;
 
-export const useNetworkParam = (param: string) => {
-  const { data, loading, error } = useQuery<NetworkParams, never>(
+export const NETWORK_PARAMETER_QUERY = gql`
+  query NetworkParam($key: String!) {
+    networkParameter(key: $key) {
+      key
+      value
+    }
+  }
+`;
+
+export const NetworkParams = {
+  blockchains_ethereumConfig: 'blockchains_ethereumConfig',
+  reward_asset: 'reward_asset',
+  reward_staking_delegation_payoutDelay:
+    'reward_staking_delegation_payoutDelay',
+  governance_proposal_updateMarket_requiredMajority:
+    'governance_proposal_updateMarket_requiredMajority',
+  governance_proposal_market_minClose: 'governance_proposal_market_minClose',
+  governance_proposal_market_maxClose: 'governance_proposal_market_maxClose',
+  governance_proposal_market_minEnact: 'governance_proposal_market_minEnact',
+  governance_proposal_market_maxEnact: 'governance_proposal_market_maxEnact',
+  governance_proposal_updateMarket_minClose:
+    'governance_proposal_updateMarket_minClose',
+  governance_proposal_updateMarket_maxClose:
+    'governance_proposal_updateMarket_maxClose',
+  governance_proposal_updateMarket_minEnact:
+    'governance_proposal_updateMarket_minEnact',
+  governance_proposal_updateMarket_maxEnact:
+    'governance_proposal_updateMarket_maxEnact',
+  governance_proposal_asset_minClose: 'governance_proposal_asset_minClose',
+  governance_proposal_asset_maxClose: 'governance_proposal_asset_maxClose',
+  governance_proposal_asset_minEnact: 'governance_proposal_asset_minEnact',
+  governance_proposal_asset_maxEnact: 'governance_proposal_asset_maxEnact',
+  governance_proposal_updateNetParam_minClose:
+    'governance_proposal_updateNetParam_minClose',
+  governance_proposal_updateNetParam_maxClose:
+    'governance_proposal_updateNetParam_maxClose',
+  governance_proposal_updateNetParam_minEnact:
+    'governance_proposal_updateNetParam_minEnact',
+  governance_proposal_updateNetParam_maxEnact:
+    'governance_proposal_updateNetParam_maxEnact',
+  governance_proposal_freeform_minClose:
+    'governance_proposal_freeform_minClose',
+  governance_proposal_freeform_maxClose:
+    'governance_proposal_freeform_maxClose',
+  governance_proposal_updateMarket_requiredParticipation:
+    'governance_proposal_updateMarket_requiredParticipation',
+  governance_proposal_updateMarket_minProposerBalance:
+    'governance_proposal_updateMarket_minProposerBalance',
+  governance_proposal_market_requiredMajority:
+    'governance_proposal_market_requiredMajority',
+  governance_proposal_market_requiredParticipation:
+    'governance_proposal_market_requiredParticipation',
+  governance_proposal_market_minProposerBalance:
+    'governance_proposal_market_minProposerBalance',
+  governance_proposal_asset_requiredMajority:
+    'governance_proposal_asset_requiredMajority',
+  governance_proposal_asset_requiredParticipation:
+    'governance_proposal_asset_requiredParticipation',
+  governance_proposal_asset_minProposerBalance:
+    'governance_proposal_asset_minProposerBalance',
+  governance_proposal_updateNetParam_requiredMajority:
+    'governance_proposal_updateNetParam_requiredMajority',
+  governance_proposal_updateNetParam_requiredParticipation:
+    'governance_proposal_updateNetParam_requiredParticipation',
+  governance_proposal_updateNetParam_minProposerBalance:
+    'governance_proposal_updateNetParam_minProposerBalance',
+  governance_proposal_freeform_requiredParticipation:
+    'governance_proposal_freeform_requiredParticipation',
+  governance_proposal_freeform_requiredMajority:
+    'governance_proposal_freeform_requiredMajority',
+  governance_proposal_freeform_minProposerBalance:
+    'governance_proposal_freeform_minProposerBalance',
+  validators_delegation_minAmount: 'validators_delegation_minAmount',
+  spam_protection_proposal_min_tokens: 'spam_protection_proposal_min_tokens',
+  market_liquidity_stakeToCcySiskas: 'market_liquidity_stakeToCcySiskas',
+} as const;
+
+type Params = typeof NetworkParams;
+export type NetworkParamsKey = Params[keyof Params];
+type Result = {
+  [key in keyof Params]: string;
+};
+
+export const useNetworkParams = <T extends NetworkParamsKey[]>(params?: T) => {
+  const { data, loading, error } = useQuery<NetworkParamsResponse, never>(
     NETWORK_PARAMETERS_QUERY
   );
-  const foundParams = data?.networkParameters?.filter((p) => param === p.key);
+
+  const paramsObj = useMemo(() => {
+    if (!data?.networkParameters) return null;
+    return data.networkParameters
+      .map((p) => ({
+        ...p,
+        key: p.key.split('.').join('_'),
+      }))
+      .filter((p) => {
+        if (params === undefined || params.length === 0) return true;
+        if (params.includes(p.key as NetworkParamsKey)) return true;
+        return false;
+      })
+      .reduce((obj, p) => {
+        obj[p.key] = p.value;
+        return obj;
+      }, {} as { [key: string]: string });
+  }, [data, params]);
+
   return {
-    data: foundParams ? foundParams.map((f) => f.value) : null,
+    params: paramsObj as Pick<Result, T[number]>,
     loading,
     error,
   };
 };
 
-export const useNetworkParams = (params: string[]) => {
-  const { data, loading, error } = useQuery<NetworkParams, never>(
-    NETWORK_PARAMETERS_QUERY
-  );
-  const foundParams = data?.networkParameters
-    ?.filter((p) => params.includes(p.key))
-    .sort((a, b) => params.indexOf(a.key) - params.indexOf(b.key));
+export const useNetworkParam = (param: NetworkParamsKey) => {
+  const { data, loading, error } = useQuery(NETWORK_PARAMETER_QUERY, {
+    variables: {
+      key: param,
+    },
+  });
   return {
-    data: foundParams ? foundParams.map((f) => f.value) : null,
+    param: data?.networkParameter ? data.networkParameter.value : null,
     loading,
     error,
   };
diff --git a/libs/react-helpers/src/lib/validate/index.ts b/libs/react-helpers/src/lib/validate/index.ts
index def2086a0..cae0791c4 100644
--- a/libs/react-helpers/src/lib/validate/index.ts
+++ b/libs/react-helpers/src/lib/validate/index.ts
@@ -36,3 +36,12 @@ export const maxSafe = (max: BigNumber) => (value: string) => {
   }
   return true;
 };
+
+export const suitableForSyntaxHighlighter = (str: string) => {
+  try {
+    const test = JSON.parse(str);
+    return test && Object.keys(test).length > 0;
+  } catch (e) {
+    return false;
+  }
+};
diff --git a/libs/tailwindcss-config/src/vega-custom-classes.js b/libs/tailwindcss-config/src/vega-custom-classes.js
index 56eef463e..4e1673683 100644
--- a/libs/tailwindcss-config/src/vega-custom-classes.js
+++ b/libs/tailwindcss-config/src/vega-custom-classes.js
@@ -34,6 +34,9 @@ const vegaCustomClasses = plugin(function ({ addUtilities }) {
     '.clip-path-rounded': {
       clipPath: 'circle(50%)',
     },
+    '.color-scheme-dark': {
+      colorScheme: 'dark',
+    },
   });
 });
 
diff --git a/libs/ui-toolkit/src/components/form-group/form-group.tsx b/libs/ui-toolkit/src/components/form-group/form-group.tsx
index 06ff27313..0ad57fc65 100644
--- a/libs/ui-toolkit/src/components/form-group/form-group.tsx
+++ b/libs/ui-toolkit/src/components/form-group/form-group.tsx
@@ -4,9 +4,10 @@ import type { ReactNode } from 'react';
 export interface FormGroupProps {
   children: ReactNode;
   className?: string;
-  label: string; // For accessibility reasons this must always be set for screen readers. If you want it to not show, then add labelClassName="sr-only"
+  label: string; // For accessibility reasons this must always be set for screen readers. If you want it to not show, then use the hideLabel prop"
   labelFor: string; // Same as above
   hideLabel?: boolean;
+  labelDescription?: string;
   labelAlign?: 'left' | 'right';
 }
 
@@ -15,6 +16,7 @@ export const FormGroup = ({
   className,
   label,
   labelFor,
+  labelDescription,
   labelAlign = 'left',
   hideLabel = false,
 }: FormGroupProps) => {
@@ -28,6 +30,9 @@ export const FormGroup = ({
       {label && (
         <label htmlFor={labelFor} className={labelClasses}>
           {label}
+          {labelDescription && (
+            <div className="font-light mt-1">{labelDescription}</div>
+          )}
         </label>
       )}
       {children}
diff --git a/libs/ui-toolkit/src/components/form-group/from-group.stories.tsx b/libs/ui-toolkit/src/components/form-group/from-group.stories.tsx
index 4aba87134..3108cc279 100644
--- a/libs/ui-toolkit/src/components/form-group/from-group.stories.tsx
+++ b/libs/ui-toolkit/src/components/form-group/from-group.stories.tsx
@@ -36,9 +36,9 @@ Default.args = {
   labelFor: 'labelFor',
 };
 
-export const Error = Template.bind({});
-Error.args = {
+export const WithLabelDescription = Template.bind({});
+WithLabelDescription.args = {
   label: 'Label',
   labelFor: 'labelFor',
-  hasError: true,
+  labelDescription: 'Description text',
 };
diff --git a/libs/ui-toolkit/src/components/input/input.stories.tsx b/libs/ui-toolkit/src/components/input/input.stories.tsx
index 573f8d6a8..7954b4e36 100644
--- a/libs/ui-toolkit/src/components/input/input.stories.tsx
+++ b/libs/ui-toolkit/src/components/input/input.stories.tsx
@@ -7,7 +7,7 @@ export default {
 } as Meta;
 
 const Template: Story = (args) => (
-  <FormGroup labelClassName="sr-only" label="Hello" labelFor={args.id}>
+  <FormGroup label="Hello" labelFor={args.id}>
     <Input value="I type words" {...args} />
   </FormGroup>
 );
@@ -51,6 +51,8 @@ export const TypeDateTime = Template.bind({});
 TypeDateTime.args = {
   type: 'datetime-local',
   id: 'input-datetime-local',
+  min: '2022-09-05T11:29:17',
+  max: '2023-09-05T10:29:49',
 };
 
 export const IconPrepend = Template.bind({});
diff --git a/libs/ui-toolkit/src/components/input/input.tsx b/libs/ui-toolkit/src/components/input/input.tsx
index c49fd3e3b..318a51bf0 100644
--- a/libs/ui-toolkit/src/components/input/input.tsx
+++ b/libs/ui-toolkit/src/components/input/input.tsx
@@ -130,10 +130,14 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     const hasPrepended = !!(prependIconName || prependElement);
     const hasAppended = !!(appendIconName || appendElement);
 
-    const inputClassName = classNames('appearance-none', className, {
-      'pl-10': hasPrepended,
-      'pr-10': hasAppended,
-    });
+    const inputClassName = classNames(
+      'appearance-none dark:color-scheme-dark',
+      className,
+      {
+        'pl-10': hasPrepended,
+        'pr-10': hasAppended,
+      }
+    );
 
     const input = (
       <input
diff --git a/libs/wallet/src/wallet-types.ts b/libs/wallet/src/wallet-types.ts
index 17caf9394..52ec54e49 100644
--- a/libs/wallet/src/wallet-types.ts
+++ b/libs/wallet/src/wallet-types.ts
@@ -79,7 +79,7 @@ export interface WithdrawSubmissionBody extends BaseTransaction {
   };
 }
 
-interface ProposalNewMarketTerms {
+export interface ProposalNewMarketTerms {
   newMarket: {
     changes: {
       decimalPlaces: string;
@@ -119,7 +119,7 @@ interface ProposalNewMarketTerms {
   enactmentTimestamp: number;
 }
 
-interface ProposalUpdateMarketTerms {
+export interface ProposalUpdateMarketTerms {
   updateMarket: {
     marketId: string;
     changes: {
@@ -141,7 +141,7 @@ interface ProposalUpdateMarketTerms {
   enactmentTimestamp: number;
 }
 
-interface ProposalNetworkParameterTerms {
+export interface ProposalNetworkParameterTerms {
   updateNetworkParameter: {
     changes: {
       key: string;
@@ -152,12 +152,12 @@ interface ProposalNetworkParameterTerms {
   enactmentTimestamp: number;
 }
 
-interface ProposalFreeformTerms {
+export interface ProposalFreeformTerms {
   newFreeform: Record<string, never>;
   closingTimestamp: number;
 }
 
-interface ProposalNewAssetTerms {
+export interface ProposalNewAssetTerms {
   newAsset: {
     changes: {
       name: string;
diff --git a/package.json b/package.json
index 9c011f621..613473e40 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "i18next": "^20.3.5",
     "i18next-browser-languagedetector": "^6.1.2",
     "immer": "^9.0.12",
+    "iso8601-duration": "^2.1.1",
     "js-sha3": "^0.8.0",
     "lodash": "^4.17.21",
     "next": "12.2.3",
diff --git a/yarn.lock b/yarn.lock
index 2d0dbdb77..5077b0ce7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14443,6 +14443,11 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
+iso8601-duration@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/iso8601-duration/-/iso8601-duration-2.1.1.tgz#88d9e481525b50e57840bc93fb8a1727a7d849d2"
+  integrity sha512-VGGpW30/R57FpG1J7RqqKBAaK7lIiudlZkQ5tRoO9hNlKYQNnhs60DQpXlPFBmp6I+kJ61PHkI3f/T7cR4wfbw==
+
 isobject@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"