diff --git a/apps/autonolas-registry/common-util/Login/LoginV2.jsx b/apps/autonolas-registry/common-util/Login/LoginV2.jsx
index 83a0bc42..27d46c81 100644
--- a/apps/autonolas-registry/common-util/Login/LoginV2.jsx
+++ b/apps/autonolas-registry/common-util/Login/LoginV2.jsx
@@ -36,7 +36,7 @@ export const LoginV2 = ({
   const { disconnect } = useDisconnect();
   const { chainId, isConnectedToWrongNetwork } = useHelpers();
   const { chain: walletConnectedChain } = useAccount();
-  const { switchChainAsync, isLoading } = useSwitchChain();
+  const { switchChainAsync, isPending } = useSwitchChain();
 
   const screens = useBreakpoint();
 
@@ -142,7 +142,7 @@ export const LoginV2 = ({
         <>
           {!hideWrongNetwork && (
             <YellowButton
-              loading={isLoading}
+              loading={isPending}
               type="default"
               onClick={onSwitchNetwork}
               icon={<SwapOutlined />}>
diff --git a/apps/launch/common-util/ErrorAlert.tsx b/apps/launch/common-util/ErrorAlert.tsx
new file mode 100644
index 00000000..2dd219d5
--- /dev/null
+++ b/apps/launch/common-util/ErrorAlert.tsx
@@ -0,0 +1,34 @@
+import { Alert } from 'antd';
+import { mainnet } from 'viem/chains';
+
+import { EXPLORER_URLS, UNICODE_SYMBOLS } from 'libs/util-constants/src';
+
+import { ErrorType } from 'types/index';
+
+export const ErrorAlert = ({
+  error,
+  networkId,
+}: {
+  error: NonNullable<ErrorType>;
+  networkId?: number | null;
+}) => (
+  <Alert
+    className="mb-24"
+    type="error"
+    showIcon
+    message={
+      <>
+        {error.message}
+        {error.transactionHash && (
+          <>
+            <br />
+            <a
+              href={`${[EXPLORER_URLS[networkId || mainnet.id]]}/tx/${error.transactionHash}`}
+              target="_blank"
+            >{`Explore transaction hash ${UNICODE_SYMBOLS.EXTERNAL_LINK}`}</a>
+          </>
+        )}
+      </>
+    }
+  />
+);
diff --git a/apps/launch/common-util/functions/frontend-library.ts b/apps/launch/common-util/functions/frontend-library.ts
index 1df08872..d1211111 100644
--- a/apps/launch/common-util/functions/frontend-library.ts
+++ b/apps/launch/common-util/functions/frontend-library.ts
@@ -36,31 +36,65 @@ export const notifyConnectWallet = () => {
   notifyWarning('Please connect your wallet');
 };
 
-const METAMASK_ERRORS: Record<number, string> = {
-  4001: 'Transaction rejected by user. The contract hasn’t been created.',
+export enum Feature {
+  CREATE = 'create',
+  NOMINATE = 'nominate',
+}
+
+const METAMASK_ERRORS = {
+  create: [
+    {
+      code: 4001,
+      name: '',
+      message: 'Transaction rejected by user. The contract hasn’t been created.',
+    },
+  ],
+  nominate: [
+    {
+      code: 4001,
+      name: 'Transaction rejected by user',
+      message: 'Transaction rejected by user. The contract hasn’t been nominated',
+    },
+  ],
 };
 
-const EVM_ERRORS = [
-  {
-    errorText: 'Transaction has been reverted by the EVM',
-    displayText: 'Transaction failed. The contract hasn’t been created.',
-  },
-];
+const EVM_ERRORS = {
+  create: [
+    {
+      errorText: 'Transaction has been reverted by the EVM',
+      name: '',
+      displayText: 'Transaction failed. The contract hasn’t been created.',
+    },
+  ],
+  nominate: [
+    {
+      errorText: 'Transaction has been reverted by the EVM',
+      name: 'Transaction failed',
+      displayText: 'Transaction failed. The contract hasn’t been nominated',
+    },
+  ],
+};
 
-export const getErrorInfo = (error: Error | { code: number; message: string }) => {
+export const getErrorInfo = (type: Feature, error: Error | { code: number; message: string }) => {
   const defaultMessage = 'Some error occurred. Please try again';
 
+  let name;
   let message = defaultMessage;
   let transactionHash;
 
-  if ('code' in error && METAMASK_ERRORS[error.code]) {
-    message = METAMASK_ERRORS[error.code];
+  if ('code' in error) {
+    const metamaskError = METAMASK_ERRORS[type].find((item) => item.code === error.code);
+    if (metamaskError) {
+      name = metamaskError.name;
+      message = metamaskError.message;
+    }
   }
 
   if ('message' in error) {
-    const foundError = EVM_ERRORS.find((item) => error.message.indexOf(item.errorText) !== -1);
-    if (foundError) {
-      message = foundError.displayText;
+    const evmError = EVM_ERRORS[type].find((item) => error.message === item.errorText);
+    if (evmError) {
+      name = evmError.name;
+      message = evmError.displayText;
     }
   }
 
@@ -68,5 +102,5 @@ export const getErrorInfo = (error: Error | { code: number; message: string }) =
     transactionHash = (error.receipt as TransactionReceipt).transactionHash as Address;
   }
 
-  return { message, transactionHash };
+  return { name, message, transactionHash };
 };
diff --git a/apps/launch/common-util/hooks/useNetworkHelpers.tsx b/apps/launch/common-util/functions/networkHelpers.ts
similarity index 69%
rename from apps/launch/common-util/hooks/useNetworkHelpers.tsx
rename to apps/launch/common-util/functions/networkHelpers.ts
index 17079b00..1a4c93e7 100644
--- a/apps/launch/common-util/hooks/useNetworkHelpers.tsx
+++ b/apps/launch/common-util/functions/networkHelpers.ts
@@ -15,3 +15,10 @@ export const getChainIdFromPath = (networkName: string | undefined) => {
   const network = ALL_SUPPORTED_CHAINS.find((e) => toLower(e.networkName) === toLower(networkName));
   return network?.id;
 };
+
+export const getDisplayNameFromPath = (networkName: string | undefined) => {
+  if (!networkName) return null;
+
+  const network = ALL_SUPPORTED_CHAINS.find((e) => toLower(e.networkName) === toLower(networkName));
+  return network?.networkDisplayName;
+};
diff --git a/apps/launch/common-util/functions/web3.ts b/apps/launch/common-util/functions/web3.ts
index bb0bb98f..32af75f9 100644
--- a/apps/launch/common-util/functions/web3.ts
+++ b/apps/launch/common-util/functions/web3.ts
@@ -1,4 +1,3 @@
-import { BaseContractMethod, Contract } from 'ethers';
 import { Address } from 'viem';
 import Web3 from 'web3';
 import { AbiItem } from 'web3-utils';
@@ -48,6 +47,7 @@ export const getStakingFactoryContract = () => {
   return contract;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const sendTransaction = async (methodFn: any, account: Address) => {
   const estimatedGas = await getEstimatedGasLimit(methodFn, account);
   const fn = methodFn.send({ from: account, estimatedGas });
@@ -63,6 +63,7 @@ type CreateContractParams = {
   initPayload: string;
   account: Address;
 };
+
 export const createStakingContract = async ({
   implementation,
   initPayload,
@@ -74,3 +75,17 @@ export const createStakingContract = async ({
 
   return result;
 };
+
+type AddNomineeParams = {
+  address: Address;
+  chainId: number;
+  account: Address;
+};
+
+export const addNominee = async ({ address, chainId, account }: AddNomineeParams) => {
+  const contract = getVoteWeightingContract();
+  const createFn = contract.methods.addNomineeEVM(address, chainId);
+  const result = await sendTransaction(createFn, account);
+
+  return result;
+};
diff --git a/apps/launch/components/Layout/SwitchNetworkSelect/index.tsx b/apps/launch/components/Layout/SwitchNetworkSelect/index.tsx
index bf2a73f4..0c7c189d 100644
--- a/apps/launch/components/Layout/SwitchNetworkSelect/index.tsx
+++ b/apps/launch/components/Layout/SwitchNetworkSelect/index.tsx
@@ -10,8 +10,6 @@ import {
   PAGES_TO_LOAD_WITH_CHAIN_ID,
 } from 'common-util/config/supportedChains';
 
-import { useHandleRoute } from './useHandleRoute';
-
 const networkSelectOptions = ALL_SUPPORTED_CHAINS.map((e) => ({
   label: e.networkDisplayName,
   value: e.networkName,
@@ -25,9 +23,6 @@ export const SwitchNetworkSelect: FC = () => {
 
   const chainName = (router?.query?.network || 'ethereum') as string;
 
-  // handle the routing
-  useHandleRoute();
-
   return (
     <div style={{ marginRight: isMobile ? 8 : 0 }}>
       <Select
diff --git a/apps/launch/components/Login/LoginV2.tsx b/apps/launch/components/Login/LoginV2.tsx
index cb36ecee..3d401916 100644
--- a/apps/launch/components/Login/LoginV2.tsx
+++ b/apps/launch/components/Login/LoginV2.tsx
@@ -1,10 +1,17 @@
+import { SwapOutlined } from '@ant-design/icons';
 import { GetAccountReturnType, watchAccount } from '@wagmi/core';
-import { useCallback, useEffect } from 'react';
+import { isNil, isNumber } from 'lodash';
+import { useCallback, useEffect, useMemo } from 'react';
 import styled from 'styled-components';
-import { useAccountEffect, useConfig, useDisconnect } from 'wagmi';
+import { useAccount, useAccountEffect, useConfig, useDisconnect, useSwitchChain } from 'wagmi';
 
+import { useScreen } from 'libs/ui-theme/src';
 import { isAddressProhibited } from 'libs/util-prohibited-data/src/index';
 
+import { useAppSelector } from 'store/index';
+
+import { YellowButton } from './YellowButton';
+
 const LoginContainer = styled.div`
   display: flex;
   align-items: center;
@@ -15,6 +22,10 @@ const LoginContainer = styled.div`
 export const LoginV2 = () => {
   const { disconnect } = useDisconnect();
   const config = useConfig();
+  const { isMobile } = useScreen();
+  const { chain: walletConnectedChain } = useAccount();
+  const { networkId } = useAppSelector((state) => state.network);
+  const { switchChainAsync, isPending } = useSwitchChain();
 
   const handleConnect = useCallback(
     ({ address }: Pick<GetAccountReturnType, 'address' | 'chainId'>) => {
@@ -43,8 +54,48 @@ export const LoginV2 = () => {
     return () => unwatch();
   }, [config, clearOnDisconnect, handleConnect]);
 
+  /**
+   * @returns {boolean} - true if the wallet is connected to wrong network
+   * (ie. chain ID from wallet is different from the chain ID selected in the dropdown)
+   */
+  const isConnectedToWrongNetwork = useMemo(() => {
+    if (!isNumber(walletConnectedChain?.id) || !isNumber(networkId)) return false;
+
+    return walletConnectedChain?.id !== networkId;
+  }, [walletConnectedChain, networkId]);
+
+  const onSwitchNetwork = useCallback(async () => {
+    if (!networkId) return;
+
+    try {
+      await switchChainAsync({ chainId: networkId });
+    } catch (error) {
+      console.error(error);
+    }
+  }, [networkId, switchChainAsync]);
+
+  useEffect(() => {
+    if (isConnectedToWrongNetwork) {
+      onSwitchNetwork();
+    }
+  }, [isConnectedToWrongNetwork, onSwitchNetwork]);
+
+  const hideWrongNetwork =
+    isNil(walletConnectedChain?.id) || walletConnectedChain?.id === networkId;
+
   return (
     <LoginContainer>
+      {!hideWrongNetwork && (
+        <YellowButton
+          loading={isPending}
+          type="default"
+          onClick={onSwitchNetwork}
+          icon={<SwapOutlined />}
+        >
+          {!isMobile && 'Switch network'}
+        </YellowButton>
+      )}
+      &nbsp;&nbsp;
       <w3m-button balance="hide" />
     </LoginContainer>
   );
diff --git a/apps/launch/components/Login/YellowButton.tsx b/apps/launch/components/Login/YellowButton.tsx
new file mode 100644
index 00000000..970aef5e
--- /dev/null
+++ b/apps/launch/components/Login/YellowButton.tsx
@@ -0,0 +1,22 @@
+import { Button, ButtonProps, ConfigProvider } from 'antd';
+import { FC, ReactNode } from 'react';
+
+import { COLOR } from 'libs/ui-theme/src';
+
+// TODO: move to ui library
+type YellowButtonProps = { children: ReactNode } & ButtonProps;
+
+export const YellowButton: FC<YellowButtonProps> = ({ children, ...props }) => (
+  <ConfigProvider
+    theme={{
+      token: {
+        colorPrimary: COLOR.YELLOW_PRIMARY,
+        colorBgBase: COLOR.YELLOW_SECONDARY,
+        colorTextBase: COLOR.YELLOW_PRIMARY,
+        colorBorder: COLOR.YELLOW_PRIMARY,
+      },
+    }}
+  >
+    <Button {...props}>{children}</Button>
+  </ConfigProvider>
+);
diff --git a/apps/launch/components/MyStakingContracts/Create/index.tsx b/apps/launch/components/MyStakingContracts/Create/index.tsx
index fc0b7869..94efc538 100644
--- a/apps/launch/components/MyStakingContracts/Create/index.tsx
+++ b/apps/launch/components/MyStakingContracts/Create/index.tsx
@@ -20,6 +20,7 @@ import { useAccount } from 'wagmi';
 
 import { CHAIN_NAMES, EXPLORER_URLS, UNICODE_SYMBOLS } from 'libs/util-constants/src';
 
+import { ErrorAlert } from 'common-util/ErrorAlert';
 import {
   CONTRACT_TEMPLATES,
   IMPLEMENTATION_ADDRESSES,
@@ -27,6 +28,7 @@ import {
 } from 'common-util/constants/stakingContract';
 import { URL } from 'common-util/constants/urls';
 import {
+  Feature,
   createStakingContract,
   getErrorInfo,
   getIpfsHash,
@@ -34,13 +36,12 @@ import {
   notifyConnectWallet,
   notifyWrongNetwork,
 } from 'common-util/functions';
-import { getChainIdFromPath } from 'common-util/hooks/useNetworkHelpers';
+import { getChainIdFromPath } from 'common-util/functions/networkHelpers';
+import { ErrorType } from 'types/index';
 
 import { Hint, StyledMain, Title } from './styles';
 import {
   DESCRIPTION_FIELD_RULES,
-  ErrorAlert,
-  ErrorType,
   FormValues,
   MAX_NUM_SERVICES_FIELD_RULES,
   MaxNumServicesLabel,
@@ -63,11 +64,11 @@ export const CreateStakingContract = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<ErrorType>(null);
   const params = useParams<{ network: string }>();
-  const chainName = params?.network as string;
+  const networkName = params?.network as string;
 
   const { address: account, chain } = useAccount();
 
-  const networkId = getChainIdFromPath(chainName);
+  const networkId = getChainIdFromPath(networkName);
   const wrongNetwork = chain && networkId ? networkId !== chain.id : false;
 
   const handleCreate = async (values: FormValues) => {
@@ -110,16 +111,15 @@ export const CreateStakingContract = () => {
       }
 
       const result = await createStakingContract({ implementation, initPayload, account });
-
       if (result) {
         // TODO: once request contracts list task is done, need to update
         // the staking contracts list with result.events.InstanceCreated data
-        router.push(`/${chainName}/${URL.myStakingContracts}`);
+        router.push(`/${networkName}/${URL.myStakingContracts}`);
       }
     } catch (error) {
       console.log(error);
 
-      const { message, transactionHash } = getErrorInfo(error as Error);
+      const { message, transactionHash } = getErrorInfo(Feature.CREATE, error as Error);
       setError({ message, transactionHash });
     } finally {
       setIsLoading(false);
@@ -197,7 +197,7 @@ export const CreateStakingContract = () => {
             </Col>
           </Row>
           <Flex justify="end" gap={12}>
-            <Link href={`/${chainName}/${URL.myStakingContracts}`} passHref>
+            <Link href={`/${networkName}/${URL.myStakingContracts}`} passHref>
               <Button>Cancel</Button>
             </Link>
             <Button type="primary" htmlType="submit" loading={isLoading}>
diff --git a/apps/launch/components/MyStakingContracts/Create/utils.tsx b/apps/launch/components/MyStakingContracts/Create/utils.tsx
index ad46fcc6..569207bc 100644
--- a/apps/launch/components/MyStakingContracts/Create/utils.tsx
+++ b/apps/launch/components/MyStakingContracts/Create/utils.tsx
@@ -6,7 +6,7 @@ import { Address } from 'viem';
 import { mainnet } from 'viem/chains';
 
 import { COLOR } from 'libs/ui-theme/src';
-import { CHAIN_NAMES, EXPLORER_URLS, UNICODE_SYMBOLS } from 'libs/util-constants/src';
+import { CHAIN_NAMES, UNICODE_SYMBOLS } from 'libs/util-constants/src';
 import { STAKING_FACTORY, STAKING_VERIFIER } from 'libs/util-contracts/src/lib/abiAndAddresses';
 
 import { wagmiConfig } from 'common-util/config/wagmi';
@@ -20,8 +20,6 @@ export type FormValues = {
   rewardsPerSecond: number;
 };
 
-export type ErrorType = { message: string; transactionHash?: string } | null;
-
 export const TextWithTooltip = ({
   text,
   description,
@@ -70,34 +68,6 @@ export const WrongNetworkAlert = ({ networkId }: { networkId?: number | null })
   />
 );
 
-export const ErrorAlert = ({
-  error,
-  networkId,
-}: {
-  error: NonNullable<ErrorType>;
-  networkId?: number | null;
-}) => (
-  <Alert
-    className="mb-24"
-    type="error"
-    showIcon
-    message={
-      <>
-        {error.message}
-        {error.transactionHash && (
-          <>
-            <br />
-            <a
-              href={`${[EXPLORER_URLS[networkId || mainnet.id]]}/tx/${error.transactionHash}`}
-              target="_blank"
-            >{`Explore transaction hash ${UNICODE_SYMBOLS.EXTERNAL_LINK}`}</a>
-          </>
-        )}
-      </>
-    }
-  />
-);
-
 // Checks if implementation is verified
 export const checkImplementationVerified = async (chainId: number, implementation: Address) => {
   const verifierAddress = (await readContract(wagmiConfig, {
diff --git a/apps/launch/components/MyStakingContracts/List.tsx b/apps/launch/components/MyStakingContracts/List.tsx
index c9463df5..d50057f9 100644
--- a/apps/launch/components/MyStakingContracts/List.tsx
+++ b/apps/launch/components/MyStakingContracts/List.tsx
@@ -2,7 +2,6 @@ import { CheckCircleOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import { Alert, Button, Flex, Popover, Table, Tag, Typography } from 'antd';
 import type { TableProps } from 'antd';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
 import React, { FC, useMemo } from 'react';
 
 import { GOVERN_URL, URL } from 'common-util/constants/urls';
@@ -31,7 +30,6 @@ const NominatedForIncentivesPopover = () => (
 );
 
 const useColumns = () => {
-  const router = useRouter();
   const { networkName } = useAppSelector((state) => state.network);
 
   const columns: TableProps<MyStakingContract>['columns'] = useMemo(
@@ -77,16 +75,18 @@ const useColumns = () => {
                   &nbsp;Nominated
                 </Tag>
               ) : (
-                <Button type="primary" onClick={() => router.push(`/${URL.nominateContract}`)}>
-                  Nominate
-                </Button>
+                <Link href={`/${URL.nominateContract}/${record.id}`} passHref>
+                  <Button type="primary" ghost size="small">
+                    Nominate
+                  </Button>
+                </Link>
               )}
             </Flex>
           );
         },
       },
     ],
-    [networkName, router],
+    [networkName],
   );
 
   return columns;
@@ -105,8 +105,8 @@ export const List: FC = () => {
       {nonNominatedContracts > 0 && (
         <Alert
           message={`${nonNominatedContracts} contract${
-            nonNominatedContracts === 1 ? '' : 's'
-          } hasn't been nominated to receive staking incentives`}
+            nonNominatedContracts === 1 ? " hasn't" : "s haven't"
+          } been nominated to receive staking incentives`}
           type="info"
           showIcon
         />
diff --git a/apps/launch/components/MyStakingContracts/NominateContract.tsx b/apps/launch/components/MyStakingContracts/NominateContract.tsx
deleted file mode 100644
index a97dd4bb..00000000
--- a/apps/launch/components/MyStakingContracts/NominateContract.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Card, Flex, Typography } from 'antd';
-import React from 'react';
-import styled from 'styled-components';
-
-import { COLOR } from 'libs/ui-theme/src';
-
-import { LogoSvg } from '../Layout/Logos';
-
-const { Title, Paragraph, Text } = Typography;
-
-const StyledMain = styled.main`
-  display: flex;
-  flex-direction: column;
-  max-width: 1000px;
-  margin: 0 auto;
-`;
-
-const LogoContainer = styled.div`
-  margin: 0;
-  text-align: center;
-  scale: 1.4;
-`;
-
-const PurpleDot = styled.div`
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: ${COLOR.PRIMARY};
-  display: inline-block;
-  margin-right: 8px;
-`;
-
-// TODO: Tanya to check
-export const NominatedContract = () => {
-  return (
-    <StyledMain>
-      <Card>
-        <LogoContainer>
-          <LogoSvg />
-        </LogoContainer>
-
-        <Title level={4}>
-          Nominating staking contract...
-        </Title>
-        <Paragraph>Contract #1 Create Prediction Market Modernized on Gnosis chain</Paragraph>
-
-        <Flex align="center">
-          <PurpleDot />
-          <Text>&nbsp;Waiting for transaction...</Text>
-        </Flex>
-      </Card>
-    </StyledMain>
-  );
-};
diff --git a/apps/launch/components/MyStakingContracts/index.tsx b/apps/launch/components/MyStakingContracts/index.tsx
index 92139237..6bf00815 100644
--- a/apps/launch/components/MyStakingContracts/index.tsx
+++ b/apps/launch/components/MyStakingContracts/index.tsx
@@ -103,7 +103,7 @@ export const MyStakingContracts = () => {
             {isAccountConnected && networkId ? ` on ${CHAIN_NAMES[networkId]}` : ''}
           </Title>
 
-          {myStakingContracts.length > 0 && <CreateContractButton />}
+          {isAccountConnected && myStakingContracts.length > 0 && <CreateContractButton />}
         </Flex>
 
         {match(isAccountConnected)
diff --git a/apps/launch/components/NominateContract/index.tsx b/apps/launch/components/NominateContract/index.tsx
new file mode 100644
index 00000000..5b1d42da
--- /dev/null
+++ b/apps/launch/components/NominateContract/index.tsx
@@ -0,0 +1,147 @@
+import { useParams } from 'next/navigation';
+import { useRouter } from 'next/router';
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { mainnet } from 'viem/chains';
+import { useAccount, useSwitchChain } from 'wagmi';
+
+import { ErrorAlert } from 'common-util/ErrorAlert';
+import { URL } from 'common-util/constants/urls';
+import { Feature, addNominee, getErrorInfo } from 'common-util/functions';
+import { useAppDispatch, useAppSelector } from 'store/index';
+import { setIsNominated } from 'store/launch';
+import { ErrorType, MyStakingContract } from 'types/index';
+
+import {
+  ConnectWalletBeforeNominate,
+  Container,
+  ContractAlreadyNominated,
+  ContractDoesNotExist,
+  ErrorTransaction,
+  Loader,
+  SuccessfulTransaction,
+  SwitchNetworkError,
+  WaitingForTransaction,
+} from './utils';
+
+type NominatedContractContentProps = {
+  contractName: string;
+  contractInfo: MyStakingContract;
+};
+
+const NominatedContractContent: FC<NominatedContractContentProps> = ({
+  contractName,
+  contractInfo,
+}) => {
+  const router = useRouter();
+  const { chainId, address: account } = useAccount();
+  const { switchChainAsync } = useSwitchChain();
+
+  const { networkName } = useAppSelector((state) => state.network);
+  const dispatch = useAppDispatch();
+
+  const [isFailedToSwitch, setIsFailedToSwitch] = useState(false);
+  const [isPending, setIsPending] = useState(false);
+  const [isSuccessful, setIsSuccessful] = useState(false);
+  const [error, setError] = useState<ErrorType>(null);
+
+  const switchNetworkCallback = useCallback(async () => {
+    try {
+      setIsPending(true);
+      await switchChainAsync({ chainId: mainnet.id });
+    } catch (error) {
+      setIsFailedToSwitch(true);
+    } finally {
+      setIsPending(false);
+    }
+  }, [switchChainAsync]);
+
+  const addNomineeCallback = useCallback(async () => {
+    if (!account) return;
+    try {
+      setIsPending(true);
+      await addNominee({ address: contractInfo.id, chainId: contractInfo.chainId, account });
+
+      setIsSuccessful(true);
+
+      // Wait for 2s so the user can see success state
+      setTimeout(() => {
+        dispatch(setIsNominated({ id: contractInfo.id }));
+        router.replace(`/${networkName}/${URL.myStakingContracts}`);
+      }, 2000);
+    } catch (error) {
+      const errorResult = getErrorInfo(Feature.NOMINATE, error as Error);
+      setError(errorResult);
+    } finally {
+      setIsPending(false);
+    }
+  }, [account, contractInfo]);
+
+  useEffect(() => {
+    if (chainId !== mainnet.id) {
+      switchNetworkCallback();
+    } else {
+      addNomineeCallback();
+    }
+  }, [chainId, account, addNomineeCallback, switchNetworkCallback]);
+
+  const transactionInfo = useMemo(() => {
+    if (isFailedToSwitch) return <SwitchNetworkError />;
+    if (error) return <ErrorAlert error={error} networkId={chainId} />;
+    return null;
+  }, [isFailedToSwitch, error, chainId]);
+
+  if (isPending) {
+    return <WaitingForTransaction contractName={contractName} />;
+  }
+
+  if (isSuccessful) {
+    return <SuccessfulTransaction contractName={contractName} />;
+  }
+
+  return (
+    <ErrorTransaction
+      contractName={contractName}
+      errorInfo={transactionInfo}
+      errorTitle={error?.name}
+      onRetry={isFailedToSwitch ? undefined : addNomineeCallback}
+    />
+  );
+};
+
+export const NominateContract = () => {
+  const { address: account } = useAccount();
+  const params = useParams<{ id: string }>();
+  const id = params?.id;
+
+  const { networkDisplayName } = useAppSelector((state) => state.network);
+  const { isMyStakingContractsLoading, myStakingContracts } = useAppSelector(
+    (state) => state.launch,
+  );
+
+  // my contracts are still loading
+  if (isMyStakingContractsLoading) return <Loader />;
+
+  // contract does not exist
+  const contractIndex = myStakingContracts.findIndex((item) => item.id === id);
+  if (contractIndex === -1) return <ContractDoesNotExist />;
+
+  // account is not connected
+  const contractInfo = myStakingContracts[contractIndex];
+  const contractName = `Contract #${contractIndex + 1} ${
+    contractInfo.name
+  } on ${networkDisplayName} chain`;
+  if (!account) return <ConnectWalletBeforeNominate contractName={contractName} />;
+
+  // contract already nominated
+  const contractAlreadyNominated = contractInfo.isNominated;
+  if (contractAlreadyNominated) return <ContractAlreadyNominated contractName={contractName} />;
+
+  return (
+    <Container>
+      <NominatedContractContent
+        contractName={contractName}
+        contractInfo={myStakingContracts[contractIndex]}
+      />
+    </Container>
+  );
+};
diff --git a/apps/launch/components/NominateContract/styles.tsx b/apps/launch/components/NominateContract/styles.tsx
new file mode 100644
index 00000000..02e2b41a
--- /dev/null
+++ b/apps/launch/components/NominateContract/styles.tsx
@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+
+import { COLOR } from 'libs/ui-theme/src';
+
+export const StyledMain = styled.main`
+  display: flex;
+  flex-direction: column;
+  max-width: 720px;
+  margin: 0 auto;
+`;
+
+export const LogoContainer = styled.div`
+  margin: 0;
+  text-align: center;
+  scale: 1.4;
+  margin-bottom: 24px;
+`;
+
+const Dot = styled.div`
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 8px;
+`;
+
+export const PurpleDot = styled(Dot)`
+  background-color: ${COLOR.PRIMARY};
+`;
+
+export const GreenDot = styled(Dot)`
+  background-color: ${COLOR.GREEN_3};
+`;
+
+export const RedDot = styled(Dot)`
+  background-color: ${COLOR.RED};
+`;
diff --git a/apps/launch/components/NominateContract/utils.tsx b/apps/launch/components/NominateContract/utils.tsx
new file mode 100644
index 00000000..29871538
--- /dev/null
+++ b/apps/launch/components/NominateContract/utils.tsx
@@ -0,0 +1,165 @@
+import { ReloadOutlined } from '@ant-design/icons';
+import { Alert, Button, Card, Flex, Spin, Typography } from 'antd';
+import Link from 'next/link';
+import React, { FC, ReactNode } from 'react';
+
+import { useAppSelector } from 'store/index';
+
+import { LogoSvg } from '../Layout/Logos';
+import { LoginV2 } from '../Login';
+import { GreenDot, LogoContainer, PurpleDot, RedDot, StyledMain } from './styles';
+
+const { Title, Text } = Typography;
+
+/************************ Presentational Components ************************/
+
+export const Container = ({ children }: { children: ReactNode }) => {
+  return (
+    <StyledMain>
+      <Card>
+        <LogoContainer>
+          <LogoSvg />
+        </LogoContainer>
+
+        {children}
+      </Card>
+    </StyledMain>
+  );
+};
+
+export const Loader = () => (
+  <Container>
+    <Flex align="center" justify="center" style={{ height: 240 }}>
+      <Spin />
+    </Flex>
+  </Container>
+);
+
+export const ContractDoesNotExist = () => {
+  const { networkName } = useAppSelector((state) => state.network);
+  return (
+    <Container>
+      <Title level={4}>Contract not found...</Title>
+      <Text>
+        We couldn’t find the staking contract you’re referring to. Go to your staking contracts and
+        try again.
+      </Text>
+
+      <Flex align="center" justify="center">
+        <Link href={`/${networkName}/my-staking-contracts`} passHref>
+          <Button className="mt-24" type="primary" ghost>
+            View my staking contracts
+          </Button>
+        </Link>
+      </Flex>
+    </Container>
+  );
+};
+
+export const SwitchNetworkError = () => (
+  <Alert message="Please switch to the mainnet to nominate a contract." type="error" showIcon />
+);
+
+export const ContractAlreadyNominated: FC<{ contractName: string }> = ({ contractName }) => {
+  const { networkName } = useAppSelector((state) => state.network);
+  return (
+    <Container>
+      <Title level={4}>Contract has already been nominated</Title>
+      <Flex vertical gap={14}>
+        <Text>{contractName}</Text>
+        <Text type="secondary">
+          The contract has already been nominated. You can close this page now.
+        </Text>
+      </Flex>
+
+      <Flex align="center" justify="center">
+        <Link href={`/${networkName}/my-staking-contracts`} passHref>
+          <Button className="mt-24" type="primary" ghost>
+            View my staking contracts
+          </Button>
+        </Link>
+      </Flex>
+    </Container>
+  );
+};
+
+export const ConnectWalletBeforeNominate: FC<{ contractName: string }> = ({ contractName }) => (
+  <Container>
+    <Title level={4}>Connect your wallet to nominate...</Title>
+    <Flex vertical gap={14}>
+      <Text>{contractName}</Text>
+    </Flex>
+
+    <Alert
+      message="Connect the wallet to nominate the staking contract."
+      type="info"
+      showIcon
+      className="mt-24 mb-24"
+    />
+
+    <Flex align="center" justify="center">
+      <LoginV2 />
+    </Flex>
+  </Container>
+);
+
+export const WaitingForTransaction = ({ contractName }: { contractName: string }) => (
+  <>
+    <Title level={4}>Nominating staking contract...</Title>
+    <Text>{contractName}</Text>
+
+    <Flex align="center" className="mt-16">
+      <PurpleDot />
+      <Text>&nbsp;Waiting for transaction...</Text>
+    </Flex>
+  </>
+);
+
+export const SuccessfulTransaction = ({ contractName }: { contractName: string }) => (
+  <>
+    <Title level={4}>Contract has been nominated</Title>
+    <Text>{contractName}</Text>
+
+    <Flex align="center" className="mt-16 mb-16">
+      <GreenDot />
+      <Text>&nbsp;Transaction successful</Text>
+    </Flex>
+
+    <Text type="secondary">You will be redirected to the previous page shortly...</Text>
+  </>
+);
+
+type ErrorTransactionProps = {
+  contractName: string;
+  errorTitle?: string;
+  errorInfo: ReactNode;
+  onRetry?: () => void;
+};
+export const ErrorTransaction: FC<ErrorTransactionProps> = ({
+  contractName,
+  errorTitle,
+  errorInfo,
+  onRetry,
+}) => (
+  <>
+    <Title level={4}>Contract hasn’t been nominated</Title>
+    <Text>{contractName}</Text>
+
+    <Flex align="center" className="mt-20 mb-20">
+      <RedDot />
+      <Text>&nbsp;{errorTitle || 'Transaction failed'}</Text>
+    </Flex>
+
+    {errorInfo}
+
+    {onRetry && (
+      <Flex justify="center">
+        <Button onClick={onRetry} type="primary" ghost>
+          <ReloadOutlined /> Try again
+        </Button>
+      </Flex>
+    )}
+  </>
+);
+
+/************************ util functions ************************/
diff --git a/apps/launch/hooks/useGetMyStakingContracts.ts b/apps/launch/hooks/useGetMyStakingContracts.ts
index 40cb2ef6..e67ae93b 100644
--- a/apps/launch/hooks/useGetMyStakingContracts.ts
+++ b/apps/launch/hooks/useGetMyStakingContracts.ts
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Abi, Address, parseAbiItem } from 'viem';
 import { mainnet } from 'viem/chains';
-import { useAccount, usePublicClient, useReadContract, useReadContracts } from 'wagmi';
+import { usePublicClient, useReadContract, useReadContracts } from 'wagmi';
 
 import { GATEWAY_URL, HASH_PREFIX } from 'libs/util-constants/src';
 import {
@@ -51,13 +51,13 @@ const useGetAllNominees = () => {
 };
 
 const useGetMyStakingContractsMetadata = (addresses: Address[]) => {
-  const { chainId } = useAccount();
+  const { networkId } = useAppSelector((state) => state.network);
   const [metadata, setMetadata] = useState<(Metadata | null)[]>([]);
 
   const contracts = addresses.map((address) => ({
     address,
     abi: STAKING_TOKEN.abi as Abi,
-    chainId,
+    chainId: networkId as ChainId,
     functionName: 'metadataHash',
   }));
 
@@ -111,8 +111,8 @@ const useGetMyStakingContractsMetadata = (addresses: Address[]) => {
 };
 
 const useGetInstanceAddresses = () => {
-  const client = usePublicClient();
   const { networkId } = useAppSelector((state) => state.network);
+  const client = usePublicClient({ chainId: networkId as ChainId });
 
   const [instanceAddresses, setInstanceAddresses] = useState<Address[]>([]);
 
@@ -140,7 +140,7 @@ const useGetInstanceAddresses = () => {
         window.console.error(e);
       }
     })();
-  }, [currentNetworkId, client]);
+  }, [client, currentNetworkId]);
 
   return instanceAddresses;
 };
@@ -152,6 +152,8 @@ export const useGetMyStakingContracts = () => {
   const nominees = useGetAllNominees();
   const { myStakingContracts } = useAppSelector((state) => state.launch);
 
+  const { networkId } = useAppSelector((state) => state.network);
+
   const instanceAddressesInBytes32 = instanceAddresses.map((address) =>
     getBytes32FromAddress(address),
   );
@@ -170,12 +172,12 @@ export const useGetMyStakingContracts = () => {
 
         return {
           id: instanceAddresses[index],
+          chainId: networkId,
           name: metadata.name,
           description: metadata.description,
           template: CONTRACT_TEMPLATES[0].title,
           isNominated:
-            nominees.some((nominee) => instanceAddressesInBytes32.includes(nominee.account)) ??
-            false,
+            nominees.findIndex((item) => item.account === instanceAddressesInBytes32[index]) !== -1,
         };
       })
       // filter out null values (ie. contracts without metadata - failed to fetch or not available)
@@ -189,5 +191,6 @@ export const useGetMyStakingContracts = () => {
     nominees,
     myStakingContractsMetadata,
     myStakingContracts,
+    networkId,
   ]);
 };
diff --git a/apps/launch/components/Layout/SwitchNetworkSelect/useHandleRoute.tsx b/apps/launch/hooks/useHandleRoute.ts
similarity index 87%
rename from apps/launch/components/Layout/SwitchNetworkSelect/useHandleRoute.tsx
rename to apps/launch/hooks/useHandleRoute.ts
index 614b5fe6..a348a86f 100644
--- a/apps/launch/components/Layout/SwitchNetworkSelect/useHandleRoute.tsx
+++ b/apps/launch/hooks/useHandleRoute.ts
@@ -3,9 +3,13 @@ import { useCallback, useEffect } from 'react';
 
 import { PAGES_TO_LOAD_WITH_CHAIN_ID } from 'common-util/config/supportedChains';
 import { URL } from 'common-util/constants/urls';
-import { getChainIdFromPath, isValidNetworkName } from 'common-util/hooks/useNetworkHelpers';
+import {
+  getChainIdFromPath,
+  getDisplayNameFromPath,
+  isValidNetworkName,
+} from 'common-util/functions/networkHelpers';
 import { useAppDispatch } from 'store/index';
-import { setNetworkId, setNetworkName } from 'store/network';
+import { setNetworkDetails } from 'store/network';
 
 /**
  * Hook to handle the routing
@@ -21,9 +25,15 @@ export const useHandleRoute = () => {
   // updating the blockchain information in redux
   useEffect(() => {
     const isValidNetwork = isValidNetworkName(networkNameFromUrl);
-
-    dispatch(setNetworkName(isValidNetwork ? networkNameFromUrl : 'ethereum'));
-    dispatch(setNetworkId(isValidNetwork ? Number(chainIdFromPath) : 1));
+    const networkName = isValidNetwork ? networkNameFromUrl : 'ethereum';
+
+    dispatch(
+      setNetworkDetails({
+        networkId: isValidNetwork ? Number(chainIdFromPath) : 1,
+        networkName: networkName,
+        networkDisplayName: networkName ? getDisplayNameFromPath(networkName) : 'Ethereum',
+      }),
+    );
   }, [dispatch, networkNameFromUrl, chainIdFromPath]);
 
   /**
diff --git a/apps/launch/pages/_app.tsx b/apps/launch/pages/_app.tsx
index ac5d0833..a84034e3 100644
--- a/apps/launch/pages/_app.tsx
+++ b/apps/launch/pages/_app.tsx
@@ -7,12 +7,14 @@ import { GlobalStyles } from 'libs/ui-theme/src/lib/GlobalStyles';
 import { AutonolasThemeProvider } from 'libs/ui-theme/src/lib/ThemeConfig';
 
 import { useGetMyStakingContracts } from 'hooks/useGetMyStakingContracts';
+import { useHandleRoute } from 'hooks/useHandleRoute';
 
 import Layout from '../components/Layout';
 import Web3ModalProvider from '../context/Web3ModalProvider';
 import { wrapper } from '../store';
 
 const DataProvider: FC<PropsWithChildren> = ({ children }) => {
+  useHandleRoute();
   useGetMyStakingContracts();
 
   return <>{children}</>;
diff --git a/apps/launch/pages/nominate-contract.tsx b/apps/launch/pages/nominate-contract.tsx
deleted file mode 100644
index eeba795c..00000000
--- a/apps/launch/pages/nominate-contract.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { NominatedContract } from '../components/MyStakingContracts/NominateContract';
-
-export default NominatedContract;
diff --git a/apps/launch/pages/nominate-contract/[id].tsx b/apps/launch/pages/nominate-contract/[id].tsx
new file mode 100644
index 00000000..cc927810
--- /dev/null
+++ b/apps/launch/pages/nominate-contract/[id].tsx
@@ -0,0 +1,3 @@
+import { NominateContract } from 'components/NominateContract';
+
+export default NominateContract;
diff --git a/apps/launch/store/launch.ts b/apps/launch/store/launch.ts
index 75b3ec54..737d6290 100644
--- a/apps/launch/store/launch.ts
+++ b/apps/launch/store/launch.ts
@@ -1,5 +1,6 @@
 import { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
+import { Address } from 'viem';
 
 import { MyStakingContract } from 'types/index';
 
@@ -22,9 +23,15 @@ export const launchSlice = createSlice({
       state.myStakingContracts = action.payload;
       state.isMyStakingContractsLoading = false;
     },
+    setIsNominated: (state, action: PayloadAction<{ id: Address }>) => {
+      const newContracts = state.myStakingContracts.map((item) => {
+        return item.id === action.payload.id ? { ...item, isNominated: true } : item;
+      });
+      state.myStakingContracts = newContracts;
+    },
     clearState: (state) => {},
   },
 });
 
-export const { setMyStakingContracts, clearState } = launchSlice.actions;
+export const { setMyStakingContracts, setIsNominated, clearState } = launchSlice.actions;
 export const launchReducer = launchSlice.reducer;
diff --git a/apps/launch/store/network.ts b/apps/launch/store/network.ts
index 01481cae..2b23eca5 100644
--- a/apps/launch/store/network.ts
+++ b/apps/launch/store/network.ts
@@ -3,11 +3,13 @@ import { createSlice } from '@reduxjs/toolkit';
 type NetworkState = {
   networkId: null | number;
   networkName: null | string;
+  networkDisplayName: null | string;
 };
 
 const initialState: NetworkState = {
   networkId: null,
   networkName: null,
+  networkDisplayName: null,
 };
 
 // dropdown network selection
@@ -15,15 +17,14 @@ export const networkSlice = createSlice({
   name: 'network',
   initialState,
   reducers: {
-    setNetworkId: (state, action) => {
-      state.networkId = action.payload;
-    },
-    setNetworkName: (state, action) => {
-      state.networkName = action.payload;
+    setNetworkDetails: (state, action) => {
+      state.networkId = action.payload.networkId;
+      state.networkName = action.payload.networkName;
+      state.networkDisplayName = action.payload.networkDisplayName;
     },
     clearState: (state) => {},
   },
 });
 
-export const { setNetworkId, setNetworkName, clearState } = networkSlice.actions;
+export const { setNetworkDetails, clearState } = networkSlice.actions;
 export const networkReducer = networkSlice.reducer;
diff --git a/apps/launch/types/index.ts b/apps/launch/types/index.ts
index 06828039..4cab806c 100644
--- a/apps/launch/types/index.ts
+++ b/apps/launch/types/index.ts
@@ -1,9 +1,12 @@
-import { Address } from "viem";
+import { Address } from 'viem';
 
 export type MyStakingContract = {
   id: Address;
+  chainId: number;
   name: string;
   description: string;
   template: string;
   isNominated: boolean;
 };
+
+export type ErrorType = { name?: string; message: string; transactionHash?: string } | null;
diff --git a/libs/ui-theme/src/lib/GlobalStyles.tsx b/libs/ui-theme/src/lib/GlobalStyles.tsx
index 7add791e..9c7f0c2c 100644
--- a/libs/ui-theme/src/lib/GlobalStyles.tsx
+++ b/libs/ui-theme/src/lib/GlobalStyles.tsx
@@ -42,6 +42,9 @@ export const GlobalStyles = createGlobalStyle`
   .mb-16 {
     margin-bottom: 16px;
   }
+  .mb-20 {
+    margin-bottom: 20px !important;
+  }
   .mb-24 {
     margin-bottom: 24px !important;
   }
@@ -60,6 +63,9 @@ export const GlobalStyles = createGlobalStyle`
   .mt-16 {
     margin-top: 16px;
   }
+  .mt-20 {
+    margin-top: 20px !important;
+  }
   .mt-24 {
     margin-top: 24px !important;
   }
diff --git a/libs/ui-theme/src/lib/ui-theme.tsx b/libs/ui-theme/src/lib/ui-theme.tsx
index 9f7ce1d5..838b03e9 100644
--- a/libs/ui-theme/src/lib/ui-theme.tsx
+++ b/libs/ui-theme/src/lib/ui-theme.tsx
@@ -25,6 +25,9 @@ export const COLOR = {
 
   TEXT_PRIMARY: '#1F2229',
   TEXT_SECONDARY: '#606F85',
+
+  YELLOW_PRIMARY: '#eab308', // tailwind orange.500
+  YELLOW_SECONDARY: '#fefce8', // tailwind orange.50
 };
 
 // TODO: move to theme
diff --git a/libs/util-constants/src/lib/tenderly.config.ts b/libs/util-constants/src/lib/tenderly.config.ts
index 0cdb12f3..658169bd 100644
--- a/libs/util-constants/src/lib/tenderly.config.ts
+++ b/libs/util-constants/src/lib/tenderly.config.ts
@@ -2,7 +2,7 @@ import { defineChain } from 'viem';
 
 export const virtualMainnet = defineChain({
   id: 1,
-  name: 'Mainnet',
+  name: 'Ethereum',
   nativeCurrency: { name: 'vETH', symbol: 'vETH', decimals: 18 },
   rpcUrls: {
     default: { http: [`${process.env.NEXT_PUBLIC_MAINNET_TEST_RPC}`] },