diff --git a/src/clients/web3/connectors.ts b/src/clients/web3/connectors.ts
index c116926..f788d05 100644
--- a/src/clients/web3/connectors.ts
+++ b/src/clients/web3/connectors.ts
@@ -2,33 +2,40 @@ import { BscConnector } from '@binance-chain/bsc-connector';
 import { InfinityWalletConnector } from '@infinitywallet/infinity-connector';
 import { InjectedConnector } from '@web3-react/injected-connector';
 import { WalletLinkConnector } from '@web3-react/walletlink-connector';
-import config, { ONYX_CHAIN_ID } from 'config';
-import { EthChainId } from 'types';
+import config, { WALLET_SUPPORTED_CHAIN_IDS } from 'config';
+import { WalletChainIds } from 'types';
+
+import { getRpcUrlsByChainId } from 'constants/wallet-chains';
 
 import { Connector } from './types';
 import { WalletConnectV2Connector } from './walletconnectV2';
 
 export const injectedConnector = new InjectedConnector({
-  supportedChainIds: [config.chainId, ONYX_CHAIN_ID],
+  supportedChainIds: WALLET_SUPPORTED_CHAIN_IDS,
 });
 
+const rpcMap = getRpcUrlsByChainId();
+rpcMap[WalletChainIds.TESTNET] = 'https://goerli.infura.io/v3/54af4f71d6c44e0ea83badb0886458f9';
+
 const walletConnectV2Connector = new WalletConnectV2Connector({
-  supportedChainIds: [EthChainId.MAINNET],
-  rpcMap: { [EthChainId.MAINNET]: config.rpcUrl },
-  chains: [EthChainId.MAINNET],
+  supportedChainIds: WALLET_SUPPORTED_CHAIN_IDS,
+  rpcMap,
+  chains: WALLET_SUPPORTED_CHAIN_IDS as [number, ...number[]],
   qrcode: true,
 });
 
-const binanceChainWalletConnector = new BscConnector({ supportedChainIds: [config.chainId] });
+const binanceChainWalletConnector = new BscConnector({
+  supportedChainIds: [WalletChainIds.BSC],
+});
 
 const coinbaseWalletConnector = new WalletLinkConnector({
   url: config.rpcUrl,
   appName: 'Onyx',
-  supportedChainIds: [config.chainId],
+  supportedChainIds: WALLET_SUPPORTED_CHAIN_IDS,
 });
 
 const infinityWalletConnector = new InfinityWalletConnector({
-  supportedChainIds: [EthChainId.MAINNET],
+  supportedChainIds: WALLET_SUPPORTED_CHAIN_IDS,
 });
 
 export const connectorsByName = {
diff --git a/src/clients/web3/useAuth/index.ts b/src/clients/web3/useAuth/index.ts
index 22b5aff..51ecf17 100644
--- a/src/clients/web3/useAuth/index.ts
+++ b/src/clients/web3/useAuth/index.ts
@@ -6,8 +6,9 @@ import {
 } from '@web3-react/injected-connector';
 import { VError, formatVErrorToReadableString } from 'errors';
 import { useCallback, useState } from 'react';
+import { EthChainId } from 'types';
 
-import { switchToOnyx } from 'components/Layout/AddNetworkButton/addOnyx2Network';
+import { switchToEth } from 'components/Layout/AddNetworkButton/onyxChainUtils';
 import { toast } from 'components/Toast';
 import { LS_KEY_CONNECTED_CONNECTOR } from 'constants/localStorageKeys';
 
@@ -19,8 +20,6 @@ import {
 } from '../walletconnectV2';
 import setupNetwork from './setUpNetwork';
 
-const ONYX_CHAIN_ID = 80888;
-
 const getConnectedConnector = (): Connector | undefined => {
   const lsConnectedConnector = window.localStorage.getItem(LS_KEY_CONNECTED_CONNECTOR);
 
@@ -57,8 +56,9 @@ const useAuth = () => {
 
             const currentChainId = parseInt(currentChainIdHex, 16);
 
-            if (currentChainId !== ONYX_CHAIN_ID) {
-              const switched = await switchToOnyx();
+            if (currentChainId !== EthChainId.MAINNET) {
+              const switched = await switchToEth();
+
               if (!switched) {
                 toast.warning({
                   message: 'Please switch to Onyx network in your wallet',
diff --git a/src/components/ChainSwitchDropdown/index.tsx b/src/components/ChainSwitchDropdown/index.tsx
new file mode 100644
index 0000000..156ed07
--- /dev/null
+++ b/src/components/ChainSwitchDropdown/index.tsx
@@ -0,0 +1,116 @@
+/** @jsxImportSource @emotion/react */
+import { SelectChangeEvent } from '@mui/material/Select';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'translation';
+
+import { switchToChain } from 'components/Layout/AddNetworkButton/onyxChainUtils';
+import { Select } from 'components/Select';
+import { toast } from 'components/Toast';
+import { SUPPORTED_CHAINS, getChainByHexId } from 'constants/wallet-chains';
+
+interface Props {
+  className?: string;
+  showOnlyImage?: boolean;
+}
+
+export const ChainSwitchDropdown = ({ className, showOnlyImage = false }: Props) => {
+  const { t } = useTranslation();
+  const [currentChainId, setCurrentChainId] = useState<string>('');
+  const [isSwitching, setIsSwitching] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!window.ethereum) return;
+
+    window.ethereum.request({ method: 'eth_chainId' }).then(setCurrentChainId);
+
+    const handleChainChanged = (chainId: string) => {
+      setCurrentChainId(chainId);
+      setIsSwitching(false);
+    };
+
+    window.ethereum.on('chainChanged', handleChainChanged);
+
+    return () => {
+      window.ethereum.removeListener('chainChanged', handleChainChanged);
+    };
+  }, []);
+
+  const handleChainChange = useCallback(
+    async (event: SelectChangeEvent) => {
+      if (isSwitching) return;
+
+      const selectedChain = getChainByHexId(event.target.value);
+      if (!selectedChain) return;
+
+      setIsSwitching(true);
+
+      try {
+        await switchToChain(selectedChain.config);
+      } catch (error) {
+        setIsSwitching(false);
+        toast.error({
+          message: 'Failed to change chain.',
+        });
+      }
+    },
+    [isSwitching],
+  );
+
+  const options = SUPPORTED_CHAINS.map(chain => ({
+    value: chain.config.chainId,
+    label: chain.displayName,
+    image: chain.icon,
+  }));
+
+  return (
+    <div css={{ position: 'relative' }}>
+      <Select
+        className={className}
+        css={{
+          opacity: isSwitching ? 0.3 : 1,
+          transition: 'opacity 0.2s ease',
+          pointerEvents: isSwitching ? 'none' : 'auto',
+        }}
+        options={options}
+        value={currentChainId}
+        onChange={handleChainChange}
+        ariaLabel={t('chainSwitchDropdown.ariaLabel', 'Select blockchain network')}
+        buttonVariant
+        showOnlyImage={showOnlyImage}
+        title={t('chainSwitchDropdown.title', 'Select Network')}
+      />
+      {isSwitching && (
+        <div
+          css={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            pointerEvents: 'none',
+            zIndex: 1,
+          }}
+        >
+          <div
+            css={{
+              width: 16,
+              height: 16,
+              border: '2px solid #ccc',
+              borderTopColor: '#007bff',
+              borderRadius: '50%',
+              animation: 'spin 1s linear infinite',
+              '@keyframes spin': {
+                '0%': { transform: 'rotate(0deg)' },
+                '100%': { transform: 'rotate(360deg)' },
+              },
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ChainSwitchDropdown;
diff --git a/src/components/Layout/AddNetworkButton/addOnyx2Network.ts b/src/components/Layout/AddNetworkButton/addOnyx2Network.ts
deleted file mode 100644
index b6e8d24..0000000
--- a/src/components/Layout/AddNetworkButton/addOnyx2Network.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { toast } from '../../Toast';
-
-export const addOnyx2Network = async () => {
-  if (window.ethereum) {
-    try {
-      await window.ethereum.request({
-        method: 'wallet_addEthereumChain',
-        params: [
-          {
-            chainId: '0x13bf8',
-            chainName: 'Onyx',
-            rpcUrls: ['https://rpc.onyx.org'],
-            nativeCurrency: {
-              name: 'XCN',
-              symbol: 'XCN',
-              decimals: 18,
-            },
-            blockExplorerUrls: ['https://explorer.onyx.org'],
-          },
-        ],
-      });
-    } catch {
-      console.error('Error adding network');
-    }
-  } else {
-    toast.error({ message: 'No ethereum wallet found!' });
-  }
-};
-
-export const switchToOnyx = async () => {
-  if (!window.ethereum) return false;
-
-  try {
-    await window.ethereum.request({
-      method: 'wallet_switchEthereumChain',
-      params: [{ chainId: '0x13bf8' }],
-    });
-    return true;
-  } catch (switchError: any) {
-    if (switchError.code === 4902) {
-      toast.info({
-        message: 'Adding Onyx network to your wallet...',
-      });
-
-      try {
-        await addOnyx2Network();
-
-        // After adding, we try to switch the chain antively again
-        await window.ethereum.request({
-          method: 'wallet_switchEthereumChain',
-          params: [{ chainId: '0x13bf8' }],
-        });
-
-        toast.success({
-          message: 'Successfully switched to Onyx network!',
-        });
-
-        return true;
-      } catch (addError) {
-        toast.error({
-          message: 'Failed to add Onyx network. Please add it manually.',
-        });
-        return false;
-      }
-    } else {
-      toast.error({
-        message: 'Failed to switch to Onyx network',
-      });
-      return false;
-    }
-  }
-};
diff --git a/src/components/Layout/AddNetworkButton/index.tsx b/src/components/Layout/AddNetworkButton/index.tsx
index 9c6d87d..25f74e7 100644
--- a/src/components/Layout/AddNetworkButton/index.tsx
+++ b/src/components/Layout/AddNetworkButton/index.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { useTranslation } from 'translation';
 
 import xcn from 'assets/img/xcnLogoPureB.svg';
-import { addOnyx2Network } from 'components/Layout/AddNetworkButton/addOnyx2Network';
+import { addOnyxNetwork } from 'components/Layout/AddNetworkButton/onyxChainUtils';
 
 import { ButtonProps, SecondaryButton } from '../../Button';
 
@@ -12,7 +12,7 @@ export const AddNetworkButton: React.FC<ButtonProps> = ({ css, ...props }) => {
   const { t } = useTranslation();
 
   return (
-    <SecondaryButton onClick={addOnyx2Network} variant="secondaryConnectWallet" {...props}>
+    <SecondaryButton onClick={addOnyxNetwork} variant="secondaryConnectWallet" {...props}>
       <Box css={css}>
         <img src={xcn} alt="XCN" style={{ width: 20, height: 20, marginRight: 8 }} />
         {t('addNetworkButton.title')}
diff --git a/src/components/Layout/AddNetworkButton/onyxChainUtils.ts b/src/components/Layout/AddNetworkButton/onyxChainUtils.ts
new file mode 100644
index 0000000..4a2fa22
--- /dev/null
+++ b/src/components/Layout/AddNetworkButton/onyxChainUtils.ts
@@ -0,0 +1,110 @@
+import { WalletChainIds } from 'types';
+
+import { SUPPORTED_CHAINS } from 'constants/wallet-chains';
+
+import { toast } from '../../Toast';
+
+export interface ChainConfig {
+  chainId: string;
+  chainName: string;
+  rpcUrls: string[];
+  nativeCurrency: {
+    name: string;
+    symbol: string;
+    decimals: number;
+  };
+  blockExplorerUrls: string[];
+}
+
+export const addNetwork = async (chainConfig: ChainConfig) => {
+  if (window.ethereum) {
+    try {
+      await window.ethereum.request({
+        method: 'wallet_addEthereumChain',
+        params: [chainConfig],
+      });
+    } catch {
+      console.error('Error adding network');
+    }
+  } else {
+    toast.error({ message: 'No ethereum wallet found!' });
+  }
+};
+
+export const switchToChain = async (chainConfig: ChainConfig) => {
+  if (!window.ethereum) return false;
+
+  try {
+    await window.ethereum.request({
+      method: 'wallet_switchEthereumChain',
+      params: [{ chainId: chainConfig.chainId }],
+    });
+    return true;
+  } catch (switchError: any) {
+    if (switchError.code === 4902) {
+      toast.info({
+        message: `Adding ${chainConfig.chainName} network to your wallet...`,
+      });
+
+      try {
+        await addNetwork(chainConfig);
+
+        await window.ethereum.request({
+          method: 'wallet_switchEthereumChain',
+          params: [{ chainId: chainConfig.chainId }],
+        });
+
+        toast.success({
+          message: `Successfully switched to ${chainConfig.chainName} network!`,
+        });
+
+        return true;
+      } catch (addError) {
+        toast.error({
+          message: `Failed to add ${chainConfig.chainName} network. Please add it manually.`,
+        });
+        return false;
+      }
+    } else {
+      toast.error({
+        message: `Failed to switch to ${chainConfig.chainName} network`,
+      });
+      return false;
+    }
+  }
+};
+
+const getOnyxConfig = (): ChainConfig => {
+  const onyxChain = SUPPORTED_CHAINS.find(chain => chain.id === WalletChainIds.ONYX);
+
+  if (!onyxChain) {
+    throw new Error('Onyx chain configuration not found');
+  }
+
+  return onyxChain.config;
+};
+
+const getEthConfig = (): ChainConfig => {
+  const ethChain = SUPPORTED_CHAINS.find(chain => chain.id === WalletChainIds.MAINNET);
+
+  if (!ethChain) {
+    throw new Error('Ethereum chain configuration not found');
+  }
+
+  return ethChain.config;
+};
+
+export const addOnyxNetwork = async () => {
+  const onyxConfig = getOnyxConfig();
+  await addNetwork(onyxConfig);
+};
+
+export const switchToOnyx = async () => {
+  const onyxConfig = getOnyxConfig();
+  return switchToChain(onyxConfig);
+};
+
+export const switchToEth = async () => {
+  const ethConfig = getEthConfig();
+  return switchToChain(ethConfig);
+};
diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx
index cc1b03f..b8e0698 100644
--- a/src/components/Layout/Header/index.tsx
+++ b/src/components/Layout/Header/index.tsx
@@ -2,15 +2,18 @@
 import AppBar from '@mui/material/AppBar';
 import React from 'react';
 
+import { AuthContext } from 'context/AuthContext';
+
+import ChainSwitchDropdown from '../../ChainSwitchDropdown';
 import ClaimXcnRewardButton from '../ClaimXcnRewardButton';
 import ConnectButton from '../ConnectButton';
 import { Toolbar } from '../Toolbar';
-// import ThemeSwitch from './ThemeSwitch';
 import Title from './Title';
 import { useStyles } from './styles';
 
 const Header: React.FC = () => {
   const styles = useStyles();
+  const { account } = React.useContext(AuthContext);
 
   return (
     <AppBar position="relative" css={styles.appBar}>
@@ -18,7 +21,7 @@ const Header: React.FC = () => {
         <Title />
         <div css={styles.ctaContainer}>
           <ClaimXcnRewardButton />
-          {/* <ThemeSwitch /> */}
+          {account && <ChainSwitchDropdown />}
           <ConnectButton />
         </div>
       </Toolbar>
diff --git a/src/components/Layout/Header/styles.ts b/src/components/Layout/Header/styles.ts
index 9e32b7a..538cb15 100644
--- a/src/components/Layout/Header/styles.ts
+++ b/src/components/Layout/Header/styles.ts
@@ -29,7 +29,8 @@ export const useStyles = () => {
       display: flex;
       align-items: center;
       margin-left: auto;
-      gap: 30px;
+      gap: 16px;
+      flex-shrink: 0;
 
       ${theme.breakpoints.down('md')} {
         display: none;
diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx
index a59e476..08bdf29 100644
--- a/src/components/Layout/Sidebar/index.tsx
+++ b/src/components/Layout/Sidebar/index.tsx
@@ -17,6 +17,7 @@ import { ReactComponent as LogoDesktop } from 'assets/img/xcnLogoWithText.svg';
 import { ReactComponent as LogoDesktopB } from 'assets/img/xcnLogoWithTextB.svg';
 import { ThemeContext } from 'context/ThemeContext';
 
+import ChainSwitchDropdown from '../../ChainSwitchDropdown';
 import { Icon } from '../../Icon';
 import { AddNetworkButton } from '../AddNetworkButton';
 import ClaimXcnRewardButton from '../ClaimXcnRewardButton';
@@ -192,6 +193,7 @@ export const SidebarUi: React.FC = () => {
         <div css={styles.flexRow}>
           <Icon name="logoMobile" css={styles.mobileLogo} />
 
+          {isConnected && <ChainSwitchDropdown showOnlyImage css={styles.mobileChainDropdown} />}
           <ConnectButton small fullWidth css={styles.mobileConnectButton} />
 
           <button type="button" onClick={openMenu} css={styles.actionButton}>
diff --git a/src/components/Layout/Sidebar/styles.ts b/src/components/Layout/Sidebar/styles.ts
index d6271f2..58091b8 100644
--- a/src/components/Layout/Sidebar/styles.ts
+++ b/src/components/Layout/Sidebar/styles.ts
@@ -261,9 +261,13 @@ export const useStyles = () => {
       }
     `,
     mobileConnectButton: css`
-      margin-left: ${theme.spacing(8)};
+      margin-left: ${theme.spacing(5)};
       margin-right: ${theme.spacing(8)};
     `,
+    mobileChainDropdown: css`
+      margin-left: ${theme.spacing(4)};
+      margin-right: ${theme.spacing(2)};
+    `,
     menuMobileButton: css`
       margin-left: ${theme.spacing(0)};
       margin-right: ${theme.spacing(0)};
diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx
index e4eab33..e569763 100644
--- a/src/components/Select/index.tsx
+++ b/src/components/Select/index.tsx
@@ -25,6 +25,8 @@ export interface SelectProps {
   onChange: (e: SelectChangeEvent) => void;
   ariaLabel: string;
   title: string;
+  buttonVariant?: boolean;
+  showOnlyImage?: boolean;
 }
 
 export const Select: React.FC<SelectProps> = ({
@@ -34,6 +36,8 @@ export const Select: React.FC<SelectProps> = ({
   onChange,
   ariaLabel,
   title,
+  buttonVariant = false,
+  showOnlyImage = false,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const styles = useStyles();
@@ -47,6 +51,22 @@ export const Select: React.FC<SelectProps> = ({
     setIsOpen(true);
   };
 
+  const renderValue = (selected: string) => {
+    const option = options.find(opt => opt.value === selected);
+    if (!option) return title;
+
+    if (showOnlyImage && option.image) {
+      return <img src={option.image} alt={option.label} css={styles.image} />;
+    }
+
+    return (
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        {option.image && <img src={option.image} alt={option.label} css={styles.image} />}
+        {option.label}
+      </div>
+    );
+  };
+
   const menuProps = useMemo(() => {
     const mobileStyles: Partial<MenuProps> = {
       transformOrigin: {
@@ -73,14 +93,17 @@ export const Select: React.FC<SelectProps> = ({
       onClose={handleClose}
       onOpen={handleOpen}
       className={className}
-      css={styles.root({ isOpen })}
+      css={styles.root({ isOpen, buttonVariant, showOnlyImage })}
       value={value}
       onChange={onChange}
       displayEmpty
       inputProps={{ 'aria-label': ariaLabel }}
-      IconComponent={() => (
-        <Icon css={styles.getArrowIcon({ isMenuOpened: isOpen })} name="arrowUp" />
-      )}
+      renderValue={buttonVariant ? renderValue : undefined}
+      IconComponent={() =>
+        buttonVariant ? null : (
+          <Icon css={styles.getArrowIcon({ isMenuOpened: isOpen })} name="arrowUp" />
+        )
+      }
       MenuProps={menuProps}
       autoWidth={isSmDown}
     >
@@ -99,8 +122,9 @@ export const Select: React.FC<SelectProps> = ({
           classes={{ selected: SELECTED_MENU_ITEM_CLASSNAME }}
           value={v}
         >
-          <div>
-            {image && <img src={image} alt={label} width="20px" />} {label}
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            {image && <img src={image} alt={label} css={styles.image} />}
+            {label}
           </div>
         </MenuItem>
       ))}
diff --git a/src/components/Select/styles.ts b/src/components/Select/styles.ts
index 7b7d848..d317b9a 100644
--- a/src/components/Select/styles.ts
+++ b/src/components/Select/styles.ts
@@ -8,15 +8,53 @@ export const useStyles = () => {
   const theme = useTheme();
 
   return {
-    root: ({ isOpen }: { isOpen: boolean }) => css`
-      background-color: ${theme.palette.secondary.light};
-      border-radius: ${theme.shape.borderRadius.small}px;
-      border: 1px solid ${isOpen ? theme.palette.interactive.primary : 'transparent'};
-      width: 100%;
-      > div {
-        padding: ${theme.spacing(3, 4)};
+    root: ({ isOpen, buttonVariant, showOnlyImage }: { isOpen: boolean; buttonVariant?: boolean; showOnlyImage?: boolean }) => {
+      let borderColor = 'transparent';
+      if (isOpen) {
+        borderColor = theme.palette.interactive.primary;
+      } else if (buttonVariant) {
+        borderColor = `${theme.palette.button.wallet}60`;
       }
-    `,
+
+      return css`
+        background-color: ${buttonVariant
+          ? `${theme.palette.button.wallet}1A`
+          : theme.palette.secondary.light};
+        border-radius: ${buttonVariant ? '25px' : `${theme.shape.borderRadius.small}px`};
+        border: 1px solid ${borderColor};
+        width: 100%;
+        color: ${buttonVariant ? theme.palette.button.wallet : 'inherit'};
+        transition: ${buttonVariant ? 'all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms' : 'none'};
+        ${buttonVariant &&
+        css`
+          box-sizing: border-box;
+          ${showOnlyImage && css`
+            width: 44px;
+            min-width: 44px;
+            padding: 0;
+            
+            > div {
+              padding: ${theme.spacing(2)};
+              justify-content: center;
+            }
+          `}
+        `}
+        > div {
+          padding: ${buttonVariant ? theme.spacing(2, 6) : theme.spacing(3, 4)};
+          display: flex;
+          align-items: center;
+          justify-content: ${showOnlyImage ? 'center' : 'flex-start'};
+        }
+
+        ${buttonVariant &&
+        css`
+          :hover {
+            background-color: ${theme.palette.button.wallet}30;
+            border-color: ${theme.palette.button.wallet}80;
+          }
+        `}
+      `;
+    },
     getArrowIcon: ({ isMenuOpened }: { isMenuOpened: boolean }) => css`
       position: absolute;
       right: ${theme.spacing(4)};
@@ -24,6 +62,13 @@ export const useStyles = () => {
       transition: transform 0.3s;
       transform: rotate(${isMenuOpened ? '180deg' : '0'});
     `,
+    image: css`
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      margin-right: 8px;
+      object-fit: cover;
+    `,
     menuItem: css`
       display: flex;
       align-items: center;
@@ -82,16 +127,22 @@ export const useStyles = () => {
 
     /* styles passed as MenuProps are not recognized if we pass them as emotion SerializedStyles */
     menuWrapper: {
-      backgroundColor: theme.palette.secondary.light,
+      backgroundColor: theme.palette.background.paper,
       padding: 0,
-      borderRadius: `${theme.shape.borderRadius.small}px`,
-      marginTop: theme.spacing(1),
+      borderRadius: '12px',
+      marginTop: theme.spacing(2),
+      border: `1px solid ${theme.palette.divider}`,
+      boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04)',
+      overflow: 'hidden',
+      width: '170px',
 
       [theme.breakpoints.down('sm')]: {
         minWidth: 'calc(100vw)',
         minHeight: 'calc(100% - 56px) !important',
         backgroundColor: theme.palette.background.paper,
         borderRadius: `${theme.shape.borderRadius.large}px`,
+        boxShadow: 'none',
+        width: 'auto',
       },
     },
   };
diff --git a/src/components/index.ts b/src/components/index.ts
index 8964349..e4eb861 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -5,6 +5,7 @@ export * from './charts/ApyChart';
 export * from './charts/InterestRateChart';
 export * from './AuthModal';
 export * from './Button';
+export * from './ChainSwitchDropdown';
 export * from './EthLink';
 export * from './Checkbox';
 export * from './Chip';
diff --git a/src/config/index.ts b/src/config/index.ts
index 5aa7dcb..d57757b 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -1,5 +1,5 @@
 import sample from 'lodash/sample';
-import { EthChainId } from 'types';
+import { EthChainId, WalletChainIds } from 'types';
 
 import {
   API_ENDPOINT_URLS,
@@ -25,6 +25,13 @@ const chainId: EthChainId = process.env.REACT_APP_CHAIN_ID
   ? parseInt(process.env.REACT_APP_CHAIN_ID, 10)
   : EthChainId.MAINNET;
 
+export const WALLET_SUPPORTED_CHAIN_IDS: number[] = [
+  WalletChainIds.MAINNET,
+  WalletChainIds.BSC,
+  WalletChainIds.BASE,
+  WalletChainIds.ONYX,
+];
+
 const isOnTestnet = chainId === EthChainId.TESTNET;
 const rpcUrl = sample(RPC_URLS[chainId]) as string;
 const apiUrl = API_ENDPOINT_URLS[chainId];
diff --git a/src/constants/wallet-chains.ts b/src/constants/wallet-chains.ts
new file mode 100644
index 0000000..9ccbe62
--- /dev/null
+++ b/src/constants/wallet-chains.ts
@@ -0,0 +1,102 @@
+import { WalletChainIds } from 'types';
+
+import { ChainConfig } from 'components/Layout/AddNetworkButton/onyxChainUtils';
+
+export interface SupportedChain {
+  id: WalletChainIds;
+  config: ChainConfig;
+  name: string;
+  displayName: string;
+  icon?: string;
+}
+
+export const SUPPORTED_CHAINS: SupportedChain[] = [
+  {
+    id: WalletChainIds.MAINNET,
+    name: 'ethereum',
+    displayName: 'Ethereum',
+    icon: 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/info/logo.png',
+    config: {
+      chainId: '0x1',
+      chainName: 'Ethereum Mainnet',
+      rpcUrls: ['https://mainnet.infura.io/v3/54af4f71d6c44e0ea83badb0886458f9'],
+      nativeCurrency: {
+        name: 'Ether',
+        symbol: 'ETH',
+        decimals: 18,
+      },
+      blockExplorerUrls: ['https://etherscan.io'],
+    },
+  },
+  {
+    id: WalletChainIds.BSC,
+    name: 'bsc',
+    displayName: 'BSC',
+    icon: 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/smartchain/info/logo.png',
+    config: {
+      chainId: '0x38',
+      chainName: 'Binance Smart Chain',
+      rpcUrls: ['https://binance.llamarpc.com'],
+      nativeCurrency: {
+        name: 'Binance Coin',
+        symbol: 'BNB',
+        decimals: 18,
+      },
+      blockExplorerUrls: ['https://bscscan.com'],
+    },
+  },
+  {
+    id: WalletChainIds.BASE,
+    name: 'base',
+    displayName: 'Base',
+    icon: 'https://images.mirror-media.xyz/publication-images/cgqxxPdUFBDjgKna_dDir.png?height=1200&width=1200',
+    config: {
+      chainId: '0x2105',
+      chainName: 'Base',
+      rpcUrls: ['https://base.llamarpc.com'],
+      nativeCurrency: {
+        name: 'Ether',
+        symbol: 'ETH',
+        decimals: 18,
+      },
+      blockExplorerUrls: ['https://basescan.org'],
+    },
+  },
+  {
+    id: WalletChainIds.ONYX,
+    name: 'onyx',
+    displayName: 'Onyx',
+    icon: 'https://storage.googleapis.com/conduit-prd-apps-web-cdn/onyx-6l1k4gho61-99f735d7-1b2e-45a1-8e0e-610b71152472.png',
+    config: {
+      chainId: '0x13bf8',
+      chainName: 'Onyx',
+      rpcUrls: ['https://80888.rpc.thirdweb.com/6518b486fd02052fb8a45dd0e8e6d3d1'],
+      nativeCurrency: {
+        name: 'XCN',
+        symbol: 'XCN',
+        decimals: 18,
+      },
+      blockExplorerUrls: ['https://explorer.onyx.org'],
+    },
+  },
+];
+
+export const getChainById = (chainId: number): SupportedChain | undefined =>
+  SUPPORTED_CHAINS.find(chain => chain.id === chainId);
+
+export const getChainByHexId = (hexChainId: string): SupportedChain | undefined => {
+  const chainId = parseInt(hexChainId, 16);
+  return getChainById(chainId);
+};
+
+export const getRpcUrlsByChainId = (): Record<number, string> => {
+  const rpcMap: Record<number, string> = {};
+
+  SUPPORTED_CHAINS.forEach(chain => {
+    const chainId = parseInt(chain.config.chainId, 16);
+    const [firstRpcUrl] = chain.config.rpcUrls;
+    rpcMap[chainId] = firstRpcUrl;
+  });
+
+  return rpcMap;
+};
diff --git a/src/pages/Stake/FarmItem/index.tsx b/src/pages/Stake/FarmItem/index.tsx
index 5310031..9dea07c 100644
--- a/src/pages/Stake/FarmItem/index.tsx
+++ b/src/pages/Stake/FarmItem/index.tsx
@@ -5,7 +5,7 @@ import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import BigNumber from 'bignumber.js';
 import { Button, TokenIcon } from 'components';
-import React, { useContext, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'translation';
 import { Asset } from 'types';
 import {
@@ -16,7 +16,8 @@ import {
 } from 'utilities';
 import type { TransactionReceipt } from 'web3-core/types';
 
-import { useClaimXcn, useGetUserMarketInfo } from 'clients/api';
+import { getBalanceOf, useClaimXcn, useGetUserMarketInfo } from 'clients/api';
+import { useWeb3 } from 'clients/web3';
 import { TOKENS } from 'constants/tokens';
 import { AuthContext } from 'context/AuthContext';
 import useConvertWeiToReadableTokenString from 'hooks/useConvertWeiToReadableTokenString';
@@ -43,7 +44,6 @@ export interface FarmItemUiProps {
   rewardPerBlock: BigNumber;
   staked: BigNumber;
   earned: BigNumber;
-  // tresury: BigNumber;
 }
 
 export const FarmItemUi: React.FC<FarmItemUiProps> = ({
@@ -61,13 +61,40 @@ export const FarmItemUi: React.FC<FarmItemUiProps> = ({
   rewardPerBlock,
   staked,
   earned,
-  // tresury,
 }) => {
   const styles = useStyles();
   const { t, i18n } = useTranslation();
-
-  // Hardcoded treasury value
-  const tresury = new BigNumber('2892464540987794720826443573');
+  const web3 = useWeb3();
+  const [treasuryBalance, setTreasuryBalance] = useState<BigNumber>(new BigNumber(0));
+  const [isLoadingTreasury, setIsLoadingTreasury] = useState(true);
+  const treasury = treasuryBalance;
+
+  const DAO_TREASURY_ADDRESS = '0x28ca9caae31602d0312ebf6466c9dd57fca5da93';
+
+  useEffect(() => {
+    const fetchTreasuryBalance = async () => {
+      if (!web3) return;
+
+      try {
+        setIsLoadingTreasury(true);
+        const balance = await getBalanceOf({
+          web3,
+          token: TOKENS.xcn,
+          accountAddress: DAO_TREASURY_ADDRESS,
+        });
+
+        setTreasuryBalance(balance.balanceWei || new BigNumber(0));
+      } catch (error) {
+        console.error('Error fetching treasury balance:', error);
+        // If getting the treasury fails we only then hardcode the value to 2.63B
+        setTreasuryBalance(new BigNumber('2632464540987794720826443573'));
+      } finally {
+        setIsLoadingTreasury(false);
+      }
+    };
+
+    fetchTreasuryBalance();
+  }, [web3]);
 
   const {
     data: { assets },
@@ -128,17 +155,16 @@ export const FarmItemUi: React.FC<FarmItemUiProps> = ({
     addSymbol: false,
   });
 
-  const readableTresuryValue = formatCentsToReadableValue({
-    value: tresury
-      // .times(100),
+  const readableTreasuryValue = formatCentsToReadableValue({
+    value: treasury
       .div(1e18)
       .times(xcnAsset?.tokenPrice || new BigNumber(0))
       .times(100),
     shortenLargeValue: true,
   });
-  const readableTresuryTokens = convertWeiToTokens({
-    // valueWei: tresury.times(1e18).div(xcnAsset?.tokenPrice || 1) || new BigNumber(0),
-    valueWei: tresury,
+
+  const readableTreasuryTokens = convertWeiToTokens({
+    valueWei: treasury,
     token: stakedToken,
     returnInReadableFormat: true,
     shortenLargeValue: true,
@@ -186,15 +212,17 @@ export const FarmItemUi: React.FC<FarmItemUiProps> = ({
       },
       {
         title: t('market.totalTreasury'),
-        value: (
+        value: isLoadingTreasury ? (
+          <span>Loading...</span>
+        ) : (
           <>
             <TokenIcon css={styles.tokenIcon} token={rewardToken} />
-            {readableTresuryTokens} ({readableTresuryValue})
+            {readableTreasuryTokens} ({readableTreasuryValue})
           </>
         ),
       },
     ],
-    [totalStaked, apy, xcnAsset, i18n.language],
+    [totalStaked, apy, xcnAsset, i18n.language, treasury, isLoadingTreasury],
   );
 
   return (
@@ -308,7 +336,6 @@ export interface FarmItemProps {
   rewardPerBlock: BigNumber;
   staked: BigNumber;
   earned: BigNumber;
-  tresury: BigNumber;
 }
 
 const FarmItem: React.FC<FarmItemProps> = data => {
diff --git a/src/pages/Stake/index.tsx b/src/pages/Stake/index.tsx
index 3690ecc..229e284 100644
--- a/src/pages/Stake/index.tsx
+++ b/src/pages/Stake/index.tsx
@@ -2,12 +2,7 @@
 import BigNumber from 'bignumber.js';
 import React, { useContext } from 'react';
 
-import {
-  useGetBalanceOf,
-  useGetStakingApy,
-  useGetStakingInfos,
-  useGetTreasuryTotals,
-} from 'clients/api';
+import { useGetBalanceOf, useGetStakingApy, useGetStakingInfos } from 'clients/api';
 import { TOKENS } from 'constants/tokens';
 import { AuthContext } from 'context/AuthContext';
 
@@ -27,10 +22,6 @@ const FarmPage: React.FC = () => {
   const { data: stakingInfo } = useGetStakingInfos({ accountAddress: account?.address || '' });
   const { data: stakingApy } = useGetStakingApy();
 
-  const {
-    data: { treasuryTotalBalanceCents },
-  } = useGetTreasuryTotals();
-
   return (
     <div css={styles.container}>
       <FarmItem
@@ -40,7 +31,6 @@ const FarmPage: React.FC = () => {
         rewardPerBlock={stakingInfo?.rewardPerBlock || new BigNumber(0)}
         staked={stakingInfo?.staked || new BigNumber(0)}
         earned={stakingInfo?.earned || new BigNumber(0)}
-        tresury={treasuryTotalBalanceCents || new BigNumber(0)}
       />
     </div>
   );
diff --git a/src/types/index.ts b/src/types/index.ts
index aec0be1..45d732e 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -10,6 +10,14 @@ export enum EthChainId {
   'TESTNET' = 5,
 }
 
+export enum WalletChainIds {
+  'MAINNET' = EthChainId.MAINNET,
+  'TESTNET' = EthChainId.TESTNET,
+  'BSC' = 56,
+  'BASE' = 8453,
+  'ONYX' = 80888,
+}
+
 export interface User {
   Token: string;
 }