diff --git a/apps/browser-extension-wallet/.env.defaults b/apps/browser-extension-wallet/.env.defaults
index b5ea025921..217603e1fc 100644
--- a/apps/browser-extension-wallet/.env.defaults
+++ b/apps/browser-extension-wallet/.env.defaults
@@ -28,6 +28,7 @@ USE_MULTI_DELEGATION_STAKING_ACTIVITY=false
 
 USE_POSTHOG_ANALYTICS_FOR_OPTED_OUT=false
 USE_MATOMO_ANALYTICS_FOR_OPTED_OUT=false
+USE_MULTI_WALLET=false
 
 # In App URLs
 CATALYST_GOOGLE_PLAY_URL=https://play.google.com/store/apps/details?id=io.iohk.vitvoting
diff --git a/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.module.scss b/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.module.scss
index 7d8322a7b9..5dbc2da419 100644
--- a/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.module.scss
+++ b/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.module.scss
@@ -45,3 +45,7 @@
     transform: rotateX(180deg);
   }
 }
+
+.profileDropdownTrigger {
+  flex-shrink: 0;
+}
diff --git a/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.tsx b/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.tsx
index f1d754cbb3..a91c2c635d 100644
--- a/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.tsx
+++ b/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.tsx
@@ -11,6 +11,9 @@ import { useWalletStore } from '@src/stores';
 import { UserAvatar } from '../MainMenu/DropdownMenuOverlay/components';
 import { useAnalyticsContext } from '@providers';
 import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
+import { ProfileDropdown } from '@lace/ui';
+import { useGetHandles } from '@hooks';
+import { getAssetImageUrl } from '@src/utils/get-asset-image-url';
 
 export interface DropdownMenuProps {
   isPopup?: boolean;
@@ -20,6 +23,8 @@ export const DropdownMenu = ({ isPopup }: DropdownMenuProps): React.ReactElement
   const analytics = useAnalyticsContext();
   const { walletInfo } = useWalletStore();
   const [open, setOpen] = useState(false);
+  const [handle] = useGetHandles();
+  const handleImage = handle?.profilePic;
   const Chevron = isPopup ? ChevronSmall : ChevronNormal;
 
   const sendAnalyticsEvent = (event: PostHogAction) => {
@@ -41,20 +46,39 @@ export const DropdownMenu = ({ isPopup }: DropdownMenuProps): React.ReactElement
       placement="bottomRight"
       trigger={['click']}
     >
-      <Button
-        variant="outlined"
-        color="secondary"
-        className={cn(styles.avatarBtn, { [styles.open]: open })}
-        data-testid="header-menu-button"
-      >
-        <span className={cn(styles.content, { [styles.isPopup]: isPopup })}>
-          <UserAvatar walletName={walletInfo.name} isPopup={isPopup} />
-          <Chevron
-            className={cn(styles.chevron, { [styles.open]: open })}
-            data-testid={`chevron-${open ? 'up' : 'down'}`}
+      {process.env.USE_MULTI_WALLET === 'true' ? (
+        <div className={styles.profileDropdownTrigger}>
+          <ProfileDropdown.Trigger
+            title={walletInfo.name}
+            subtitle="Account #0"
+            profile={
+              handleImage
+                ? {
+                    fallback: walletInfo.name,
+                    imageSrc: getAssetImageUrl(handleImage)
+                  }
+                : undefined
+            }
+            type="cold"
+            id="menu"
           />
-        </span>
-      </Button>
+        </div>
+      ) : (
+        <Button
+          variant="outlined"
+          color="secondary"
+          className={cn(styles.avatarBtn, { [styles.open]: open })}
+          data-testid="header-menu-button"
+        >
+          <span className={cn(styles.content, { [styles.isPopup]: isPopup })}>
+            <UserAvatar walletName={walletInfo.name} isPopup={isPopup} />
+            <Chevron
+              className={cn(styles.chevron, { [styles.open]: open })}
+              data-testid={`chevron-${open ? 'up' : 'down'}`}
+            />
+          </span>
+        </Button>
+      )}
     </Dropdown>
   );
 };
diff --git a/apps/browser-extension-wallet/src/components/ExpandButton/ExpandButton.module.scss b/apps/browser-extension-wallet/src/components/ExpandButton/ExpandButton.module.scss
index dfa9d4f4f9..e16f9a4a5f 100644
--- a/apps/browser-extension-wallet/src/components/ExpandButton/ExpandButton.module.scss
+++ b/apps/browser-extension-wallet/src/components/ExpandButton/ExpandButton.module.scss
@@ -36,6 +36,21 @@
   }
 }
 
+.multiWallet {
+  max-width: size_unit(6);
+  width: size_unit(6);
+  height: size_unit(6);
+  border-radius: size_unit(2);
+  flex-shrink: 0;
+
+  &:hover {
+    max-width: size_unit(6);
+    width: size_unit(6);
+    gap: 0px;
+    padding: 0;
+  }
+}
+
 .text {
   color: var(--text-color-secondary);
   white-space: nowrap;
diff --git a/apps/browser-extension-wallet/src/components/ExpandButton/ExpandButton.tsx b/apps/browser-extension-wallet/src/components/ExpandButton/ExpandButton.tsx
index 1e7da942e1..5abafd532a 100644
--- a/apps/browser-extension-wallet/src/components/ExpandButton/ExpandButton.tsx
+++ b/apps/browser-extension-wallet/src/components/ExpandButton/ExpandButton.tsx
@@ -1,11 +1,31 @@
-import React from 'react';
+/* eslint-disable react/no-multi-comp */
+import React, { ReactNode } from 'react';
 import ExpandIcon from '../../assets/icons/expand.component.svg';
+import classnames from 'classnames';
+import { Tooltip } from 'antd';
 
 import styles from './ExpandButton.module.scss';
 
+const RenderTooltipIfMultiWallet = ({ children, label }: { children: ReactNode; label: string }) => {
+  if (process.env.USE_MULTI_WALLET === 'true') {
+    return <Tooltip title={label}>{children}</Tooltip>;
+  }
+
+  return <>{children}</>;
+};
+
 export const ExpandButton = ({ label, onClick }: { label: string; onClick: () => void }): React.ReactElement => (
-  <a onClick={onClick} href="#" className={styles.button} data-testid="expand-button">
-    <ExpandIcon className={styles.icon} />
-    <span className={styles.text}>{label}</span>
-  </a>
+  <RenderTooltipIfMultiWallet label={label}>
+    <a
+      onClick={onClick}
+      href="#"
+      className={classnames(styles.button, {
+        [styles.multiWallet]: process.env.USE_MULTI_WALLET === 'true'
+      })}
+      data-testid="expand-button"
+    >
+      <ExpandIcon className={styles.icon} />
+      {process.env.USE_MULTI_WALLET !== 'true' && <span className={styles.text}>{label}</span>}
+    </a>
+  </RenderTooltipIfMultiWallet>
 );
diff --git a/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/DropdownMenuOverlay.module.scss b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/DropdownMenuOverlay.module.scss
index 098024b802..e43bee1f1f 100644
--- a/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/DropdownMenuOverlay.module.scss
+++ b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/DropdownMenuOverlay.module.scss
@@ -17,7 +17,6 @@
   .userInfoWrapper {
     display: flex;
     flex-direction: column;
-    padding: 10px size_unit(2) size_unit(2.75);
     gap: size_unit(2);
 
     .userInfo {
@@ -50,6 +49,14 @@
     }
   }
 
+  .singleWalletWrapper {
+    padding: 10px size_unit(2) size_unit(2.75);
+  }
+
+  .multiWalletWrapper {
+    padding-bottom: size_unit(2.75);
+  }
+
   .walletStatusInfo {
     cursor: default;
     display: flex;
diff --git a/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/DropdownMenuOverlay.tsx b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/DropdownMenuOverlay.tsx
index da8edbfe45..b48c5e9270 100644
--- a/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/DropdownMenuOverlay.tsx
+++ b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/DropdownMenuOverlay.tsx
@@ -8,7 +8,8 @@ import {
   ThemeSwitcher,
   LockWallet,
   UserInfo,
-  NetworkChoise
+  NetworkChoise,
+  AddNewWalletLink
 } from './components';
 import styles from './DropdownMenuOverlay.module.scss';
 import { NetworkInfo } from './components/NetworkInfo';
@@ -42,6 +43,7 @@ export const DropdownMenuOverlay: VFC<Props> = ({
         <>
           {topSection}
           <Links>
+            {process.env.USE_MULTI_WALLET === 'true' && <AddNewWalletLink />}
             <AddressBookLink isPopup={isPopup} />
             <SettingsLink />
             <Separator />
diff --git a/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/AddNewWalletLink.tsx b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/AddNewWalletLink.tsx
new file mode 100644
index 0000000000..281fa80ea5
--- /dev/null
+++ b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/AddNewWalletLink.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { walletRoutePaths } from '@routes';
+import { Menu } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import styles from '../DropdownMenuOverlay.module.scss';
+
+const handleOnClicked = (): void => void 0;
+
+export const AddNewWalletLink = (): React.ReactElement => {
+  const { t } = useTranslation();
+
+  return (
+    <Link to={walletRoutePaths.newWallet.home} onClick={handleOnClicked}>
+      <Menu.Item data-testid="header-menu-new-wallet" className={styles.menuItem}>
+        <a>{t('browserView.sideMenu.links.addNewWallet')}</a>
+      </Menu.Item>
+    </Link>
+  );
+};
diff --git a/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/UserInfo.tsx b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/UserInfo.tsx
index 801c51ae89..e36d810bd7 100644
--- a/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/UserInfo.tsx
+++ b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/UserInfo.tsx
@@ -11,6 +11,8 @@ import { UserAvatar } from './UserAvatar';
 import { useGetHandles } from '@hooks';
 import { useAnalyticsContext } from '@providers';
 import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
+import { ProfileDropdown } from '@lace/ui';
+import { getAssetImageUrl } from '@src/utils/get-asset-image-url';
 
 const ADRESS_FIRST_PART_LENGTH = 10;
 const ADRESS_LAST_PART_LENGTH = 5;
@@ -36,6 +38,7 @@ export const UserInfo = ({ avatarVisible = true }: UserInfoProps): React.ReactEl
   const walletName = addEllipsis(walletInfo.name.toString(), WALLET_NAME_MAX_LENGTH, 0);
   const [handle] = useGetHandles();
   const handleName = handle?.nftMetadata?.name;
+  const handleImage = handle?.profilePic;
 
   const handleOnAddressCopy = () => {
     toast.notify({ duration: TOAST_DEFAULT_DURATION, text: t('general.clipboard.copiedToClipboard') });
@@ -44,29 +47,51 @@ export const UserInfo = ({ avatarVisible = true }: UserInfoProps): React.ReactEl
 
   return (
     <Menu.ItemGroup className={classnames(styles.menuItem, styles.borderBottom)} data-testid="header-menu-user-info">
-      <div className={styles.userInfoWrapper}>
+      <div
+        className={classnames(styles.userInfoWrapper, {
+          [styles.singleWalletWrapper]: process.env.USE_MULTI_WALLET !== 'true',
+          [styles.multiWalletWrapper]: process.env.USE_MULTI_WALLET === 'true'
+        })}
+      >
         <CopyToClipboard text={handleName || walletAddress}>
-          <AntdTooltip
-            overlayInnerStyle={overlayInnerStyle}
-            placement="top"
-            title={
-              <span className={styles.tooltip}>
-                {handleName ? t('settings.copyHandle') : t('settings.copyAddress')}
-              </span>
-            }
-          >
-            <div className={styles.userInfo} onClick={handleOnAddressCopy}>
-              {avatarVisible && <UserAvatar walletName={walletName} />}
-              <div className={styles.userMeta} data-testid="header-menu-user-details">
-                <p className={styles.walletName} data-testid="header-menu-wallet-name">
-                  {walletName}
-                </p>
-                <p className={styles.walletAddress} data-testid="header-menu-wallet-address">
-                  {handleName || shortenedWalletAddress}
-                </p>
+          {process.env.USE_MULTI_WALLET === 'true' ? (
+            <ProfileDropdown.WalletOption
+              title={walletInfo.name}
+              subtitle="Account #0"
+              id={walletName}
+              profile={
+                handleImage
+                  ? {
+                      fallback: walletInfo.name,
+                      imageSrc: getAssetImageUrl(handleImage)
+                    }
+                  : undefined
+              }
+              type="cold"
+            />
+          ) : (
+            <AntdTooltip
+              overlayInnerStyle={overlayInnerStyle}
+              placement="top"
+              title={
+                <span className={styles.tooltip}>
+                  {handleName ? t('settings.copyHandle') : t('settings.copyAddress')}
+                </span>
+              }
+            >
+              <div className={styles.userInfo} onClick={handleOnAddressCopy}>
+                {avatarVisible && <UserAvatar walletName={walletName} />}
+                <div className={styles.userMeta} data-testid="header-menu-user-details">
+                  <p className={styles.walletName} data-testid="header-menu-wallet-name">
+                    {walletName}
+                  </p>
+                  <p className={styles.walletAddress} data-testid="header-menu-wallet-address">
+                    {handleName || shortenedWalletAddress}
+                  </p>
+                </div>
               </div>
-            </div>
-          </AntdTooltip>
+            </AntdTooltip>
+          )}
         </CopyToClipboard>
         <div className={styles.walletStatusInfo}>
           <WalletStatusContainer />
diff --git a/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/index.ts b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/index.ts
index 040f0a990c..5382f3cf6f 100644
--- a/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/index.ts
+++ b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/index.ts
@@ -8,3 +8,4 @@ export * from './UserInfo';
 export * from './UserAvatar';
 export * from './NetworkChoise';
 export * from './NetworkInfo';
+export * from './AddNewWalletLink';
diff --git a/apps/browser-extension-wallet/src/components/MainMenu/MainHeader.module.scss b/apps/browser-extension-wallet/src/components/MainMenu/MainHeader.module.scss
index cb96dbc1c8..853218748c 100644
--- a/apps/browser-extension-wallet/src/components/MainMenu/MainHeader.module.scss
+++ b/apps/browser-extension-wallet/src/components/MainMenu/MainHeader.module.scss
@@ -36,3 +36,12 @@
     }
   }
 }
+
+.multiWallet {
+  flex-wrap: wrap;
+}
+
+.multiWalletNetworkPillBox {
+  width: 100%;
+  margin-bottom: 12px;
+}
diff --git a/apps/browser-extension-wallet/src/components/MainMenu/MainHeader.tsx b/apps/browser-extension-wallet/src/components/MainMenu/MainHeader.tsx
index 734aad4c85..ac2c66bebf 100644
--- a/apps/browser-extension-wallet/src/components/MainMenu/MainHeader.tsx
+++ b/apps/browser-extension-wallet/src/components/MainMenu/MainHeader.tsx
@@ -4,6 +4,7 @@ import styles from './MainHeader.module.scss';
 import LaceLogoMark from '../../assets/branding/lace-logo-mark.component.svg';
 import { useTranslation } from 'react-i18next';
 import { walletRoutePaths } from '@routes';
+import classNames from 'classnames';
 
 import { DropdownMenu } from '@components/DropdownMenu';
 import { ExpandButton } from '@components/ExpandButton';
@@ -30,7 +31,16 @@ export const MainHeader = (): React.ReactElement => {
 
   return (
     <div className={styles.header} data-testid="header-container">
-      <div className={styles.content}>
+      <div
+        className={classNames(styles.content, {
+          [styles.multiWallet]: process.env.USE_MULTI_WALLET === 'true'
+        })}
+      >
+        {process.env.USE_MULTI_WALLET === 'true' && (
+          <div className={styles.multiWalletNetworkPillBox}>
+            <NetworkPill isPopup />
+          </div>
+        )}
         <Link
           className={styles.linkLogo}
           to={walletRoutePaths.assets}
@@ -38,7 +48,7 @@ export const MainHeader = (): React.ReactElement => {
           onClick={() => analytics.sendEventToPostHog(PostHogAction.WalletLaceClick)}
         >
           <LaceLogoMark className={styles.logo} />
-          <NetworkPill />
+          {process.env.USE_MULTI_WALLET !== 'true' && <NetworkPill />}
         </Link>
         <div className={styles.controls}>
           <ExpandButton
diff --git a/apps/browser-extension-wallet/src/components/NetworkPill/NetworkPill.module.scss b/apps/browser-extension-wallet/src/components/NetworkPill/NetworkPill.module.scss
index ef878f26c6..a98ec8f8f7 100644
--- a/apps/browser-extension-wallet/src/components/NetworkPill/NetworkPill.module.scss
+++ b/apps/browser-extension-wallet/src/components/NetworkPill/NetworkPill.module.scss
@@ -68,3 +68,10 @@
     }
   }
 }
+
+.multiWallet {
+  width: 100%;
+  text-align: center;
+  margin-left: 0px;
+  border-radius: size_unit(1);
+}
diff --git a/apps/browser-extension-wallet/src/components/NetworkPill/NetworkPill.tsx b/apps/browser-extension-wallet/src/components/NetworkPill/NetworkPill.tsx
index 3be59e4e81..3cd7cce65b 100644
--- a/apps/browser-extension-wallet/src/components/NetworkPill/NetworkPill.tsx
+++ b/apps/browser-extension-wallet/src/components/NetworkPill/NetworkPill.tsx
@@ -8,9 +8,10 @@ import { useTranslation } from 'react-i18next';
 
 interface NetworkPillProp {
   isExpandable?: boolean;
+  isPopup?: boolean;
 }
 
-export const NetworkPill = ({ isExpandable }: NetworkPillProp): ReactElement => {
+export const NetworkPill = ({ isExpandable, isPopup = false }: NetworkPillProp): ReactElement => {
   const { environmentName } = useWalletStore();
   const { t } = useTranslation();
   const { isOnline, isBackendFailing } = useNetwork();
@@ -19,10 +20,19 @@ export const NetworkPill = ({ isExpandable }: NetworkPillProp): ReactElement =>
     if (isOnline && !isBackendFailing && environmentName !== 'Mainnet') {
       return (
         <div
-          className={classnames(styles.networkPill, { [styles.expandablePill]: isExpandable })}
+          className={classnames(styles.networkPill, {
+            [styles.expandablePill]: isExpandable,
+            [styles.multiWallet]: process.env.USE_MULTI_WALLET === 'true' && isPopup
+          })}
           data-testid="network-pill"
         >
-          <span className={classnames({ [styles.networkPillText]: isExpandable })}>{environmentName}</span>
+          <span
+            className={classnames({
+              [styles.networkPillText]: isExpandable
+            })}
+          >
+            {environmentName}
+          </span>
         </div>
       );
     }
@@ -30,7 +40,10 @@ export const NetworkPill = ({ isExpandable }: NetworkPillProp): ReactElement =>
       return (
         <Tooltip title={t('general.networks.error')} placement="rightBottom">
           <div
-            className={classnames(styles.offlinePill, { [styles.expandablePill]: isExpandable })}
+            className={classnames(styles.offlinePill, {
+              [styles.expandablePill]: isExpandable,
+              [styles.multiWallet]: process.env.USE_MULTI_WALLET === 'true' && isPopup
+            })}
             data-testid="network-pill"
           >
             <div className={styles.offlinePillText}>
@@ -45,7 +58,10 @@ export const NetworkPill = ({ isExpandable }: NetworkPillProp): ReactElement =>
       return (
         <Tooltip title={t('general.networks.connectionUnavailable.error')} placement="rightBottom">
           <div
-            className={classnames(styles.offlinePill, { [styles.expandablePill]: isExpandable })}
+            className={classnames(styles.offlinePill, {
+              [styles.expandablePill]: isExpandable,
+              [styles.multiWallet]: process.env.USE_MULTI_WALLET === 'true' && isPopup
+            })}
             data-testid="backend-pill"
           >
             <div className={styles.offlinePillText}>
diff --git a/apps/browser-extension-wallet/src/lib/translations/en.json b/apps/browser-extension-wallet/src/lib/translations/en.json
index 4df8181120..79ecd3e268 100644
--- a/apps/browser-extension-wallet/src/lib/translations/en.json
+++ b/apps/browser-extension-wallet/src/lib/translations/en.json
@@ -417,12 +417,14 @@
     "assetDetails.tokenInformation": "Token Information",
     "assetDetails.fingerprint": "Fingerprint",
     "assetDetails.policyId": "Policy ID",
+    "sideMenu.links.general": "General",
     "sideMenu.links.tokens": "Tokens",
     "sideMenu.links.nfts": "NFTs",
     "sideMenu.links.activity": "Activity",
     "sideMenu.links.staking": "Staking",
     "sideMenu.links.dappStore": "Dapp Store",
     "sideMenu.links.voting": "Voting",
+    "sideMenu.links.addNewWallet": "Add new wallet",
     "sideMenu.links.addressBook": "Address Book",
     "sideMenu.dapps.header": "Open Dapps",
     "sideMenu.mode.light": "Light mode",
diff --git a/apps/browser-extension-wallet/src/providers/UIThemeProvider/context.tsx b/apps/browser-extension-wallet/src/providers/UIThemeProvider/context.tsx
new file mode 100644
index 0000000000..b5a0cdff17
--- /dev/null
+++ b/apps/browser-extension-wallet/src/providers/UIThemeProvider/context.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { ThemeColorScheme, ThemeProvider } from '@lace/ui';
+
+import { useTheme } from '@providers/ThemeProvider';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export const UIThemeProvider = ({ children }: Props): React.ReactElement => {
+  const { theme } = useTheme();
+  return (
+    <ThemeProvider colorScheme={theme.name === 'light' ? ThemeColorScheme.Light : ThemeColorScheme.Dark}>
+      {children}
+    </ThemeProvider>
+  );
+};
diff --git a/apps/browser-extension-wallet/src/providers/UIThemeProvider/index.ts b/apps/browser-extension-wallet/src/providers/UIThemeProvider/index.ts
new file mode 100644
index 0000000000..c38e8e8215
--- /dev/null
+++ b/apps/browser-extension-wallet/src/providers/UIThemeProvider/index.ts
@@ -0,0 +1 @@
+export * from './context';
diff --git a/apps/browser-extension-wallet/src/providers/index.ts b/apps/browser-extension-wallet/src/providers/index.ts
index df31b7f4f0..95c9462829 100644
--- a/apps/browser-extension-wallet/src/providers/index.ts
+++ b/apps/browser-extension-wallet/src/providers/index.ts
@@ -8,3 +8,4 @@ export * from './ThemeProvider';
 export * from './ViewFlowProvider';
 export * from './AnalyticsProvider';
 export * from './BackgroundServiceAPI';
+export * from './UIThemeProvider';
diff --git a/apps/browser-extension-wallet/src/routes/wallet-paths.ts b/apps/browser-extension-wallet/src/routes/wallet-paths.ts
index 965651c41e..f27073a607 100644
--- a/apps/browser-extension-wallet/src/routes/wallet-paths.ts
+++ b/apps/browser-extension-wallet/src/routes/wallet-paths.ts
@@ -20,6 +20,12 @@ export const walletRoutePaths = {
     create: '/setup/create',
     hardware: '/setup/hardware',
     restore: '/setup/restore'
+  },
+  newWallet: {
+    home: '/new-wallet',
+    create: '/new-wallet/create',
+    hardware: '/new-wallet/hardware',
+    restore: '/new-wallet/restore'
   }
 };
 
diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/Layout/SectionLayout.modules.scss b/apps/browser-extension-wallet/src/views/browser-view/components/Layout/SectionLayout.modules.scss
index c23a28c9bc..71313dd823 100644
--- a/apps/browser-extension-wallet/src/views/browser-view/components/Layout/SectionLayout.modules.scss
+++ b/apps/browser-extension-wallet/src/views/browser-view/components/Layout/SectionLayout.modules.scss
@@ -95,6 +95,22 @@ $aside-width-large: 420px;
   }
 }
 
+.navigationBoxFlexible {
+  // TODO: update width from navigationBox to auto once feature is rollout
+  width: auto;
+}
+
+.topNavigationBox {
+  position: absolute;
+  right: 0;
+  // Large value to fit both send and receive buttons, plus dropdown trigger
+  width: 500px;
+}
+
+.sidePanelContentBox {
+  margin-top: 120px;
+}
+
 .topBarAlignment {
   display: flex;
   width: 100%;
diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/Layout/SidePanel.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/Layout/SidePanel.tsx
index 5e1c3c7f25..6884f437db 100644
--- a/apps/browser-extension-wallet/src/views/browser-view/components/Layout/SidePanel.tsx
+++ b/apps/browser-extension-wallet/src/views/browser-view/components/Layout/SidePanel.tsx
@@ -60,7 +60,8 @@ export const SidePanel = ({ sidePanelContent, isSidePanelFixed = true }: Section
   const topNavigation = (
     <div
       className={classnames(styles.navigationBox, {
-        [styles.navigationBoxOverlay]: isPanelVisible && isScreenTooSmallForSidePanel
+        [styles.navigationBoxOverlay]: isPanelVisible && isScreenTooSmallForSidePanel,
+        [styles.navigationBoxFlexible]: process.env.USE_MULTI_WALLET === 'true'
       })}
     >
       <SendReceiveBox />
@@ -88,8 +89,17 @@ export const SidePanel = ({ sidePanelContent, isSidePanelFixed = true }: Section
             [styles.topBarAlignment]: isScreenTooSmallForSidePanel
           })}
         >
-          {topNavigation}
-          {!isScreenTooSmallForSidePanel && sidePanelContent}
+          {process.env.USE_MULTI_WALLET === 'true' ? (
+            <>
+              <div className={styles.topNavigationBox}>{topNavigation}</div>
+              {!isScreenTooSmallForSidePanel && <div className={styles.sidePanelContentBox}>{sidePanelContent}</div>}
+            </>
+          ) : (
+            <>
+              {topNavigation}
+              {!isScreenTooSmallForSidePanel && sidePanelContent}
+            </>
+          )}
         </div>
       )}
     </aside>
diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/LeftSidePanel/LeftSidePanel.module.scss b/apps/browser-extension-wallet/src/views/browser-view/components/LeftSidePanel/LeftSidePanel.module.scss
index 07b061362d..73dd660165 100644
--- a/apps/browser-extension-wallet/src/views/browser-view/components/LeftSidePanel/LeftSidePanel.module.scss
+++ b/apps/browser-extension-wallet/src/views/browser-view/components/LeftSidePanel/LeftSidePanel.module.scss
@@ -50,6 +50,7 @@ $navigation-col-width: 215px;
   padding-top: size_unit(3);
   display: flex;
   align-items: center;
+  position: relative;
 
   .logo {
     cursor: pointer;
@@ -62,3 +63,8 @@ $navigation-col-width: 215px;
   cursor: pointer;
   pointer-events: auto;
 }
+
+.networkPillBox {
+  position: absolute;
+  left: 120px;
+}
diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/LeftSidePanel/LeftSidePanel.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/LeftSidePanel/LeftSidePanel.tsx
index 84527543ee..d321168afd 100644
--- a/apps/browser-extension-wallet/src/views/browser-view/components/LeftSidePanel/LeftSidePanel.tsx
+++ b/apps/browser-extension-wallet/src/views/browser-view/components/LeftSidePanel/LeftSidePanel.tsx
@@ -59,7 +59,11 @@ export const LeftSidePanel = ({ theme }: VerticalNavigationBarProps): React.Reac
         <div className={styles.stickyMenuInner}>
           <div className={styles.logoContainer}>
             {logo}
-            {!isNarrowWindow && <NetworkPill />}
+            {!isNarrowWindow && (
+              <div className={styles.networkPillBox}>
+                <NetworkPill />
+              </div>
+            )}
           </div>
           <SideMenu />
         </div>
diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/SendReceiveBox/SendReceiveBox.module.scss b/apps/browser-extension-wallet/src/views/browser-view/components/SendReceiveBox/SendReceiveBox.module.scss
index 21c496c405..80e5972997 100644
--- a/apps/browser-extension-wallet/src/views/browser-view/components/SendReceiveBox/SendReceiveBox.module.scss
+++ b/apps/browser-extension-wallet/src/views/browser-view/components/SendReceiveBox/SendReceiveBox.module.scss
@@ -1,4 +1,5 @@
 .btn {
   padding: 0 !important;
-  --btn-medium-min-width: 0;
+  --btn-medium-min-width: 116px;
+  max-width: 116px;
 }
diff --git a/apps/browser-extension-wallet/src/views/browser-view/index.tsx b/apps/browser-extension-wallet/src/views/browser-view/index.tsx
index eb6eeab97b..fc02e16ac7 100644
--- a/apps/browser-extension-wallet/src/views/browser-view/index.tsx
+++ b/apps/browser-extension-wallet/src/views/browser-view/index.tsx
@@ -8,7 +8,8 @@ import {
   AxiosClientProvider,
   AppSettingsProvider,
   ThemeProvider,
-  AnalyticsProvider
+  AnalyticsProvider,
+  UIThemeProvider
 } from '@providers';
 import { CardanoWalletManagerProvider } from '@providers/CardanoWalletManager';
 import { StoreProvider } from '@stores';
@@ -43,15 +44,17 @@ const App = (): React.ReactElement => (
                     <ExperimentsProvider>
                       <AnalyticsProvider>
                         <ThemeProvider>
-                          <ExternalLinkOpenerProvider>
-                            <MigrationContainer appMode={APP_MODE_BROWSER}>
-                              <DataCheckContainer appMode={APP_MODE_BROWSER}>
-                                <AddressesDiscoveryOverlay>
-                                  <BrowserViewRoutes />
-                                </AddressesDiscoveryOverlay>
-                              </DataCheckContainer>
-                            </MigrationContainer>
-                          </ExternalLinkOpenerProvider>
+                          <UIThemeProvider>
+                            <ExternalLinkOpenerProvider>
+                              <MigrationContainer appMode={APP_MODE_BROWSER}>
+                                <DataCheckContainer appMode={APP_MODE_BROWSER}>
+                                  <AddressesDiscoveryOverlay>
+                                    <BrowserViewRoutes />
+                                  </AddressesDiscoveryOverlay>
+                                </DataCheckContainer>
+                              </MigrationContainer>
+                            </ExternalLinkOpenerProvider>
+                          </UIThemeProvider>
                         </ThemeProvider>
                       </AnalyticsProvider>
                     </ExperimentsProvider>
diff --git a/packages/ui/src/design-system/profile-dropdown/profile-dropdown-trigger.component.tsx b/packages/ui/src/design-system/profile-dropdown/profile-dropdown-trigger.component.tsx
index 306b9ee4fc..a9090ba09a 100644
--- a/packages/ui/src/design-system/profile-dropdown/profile-dropdown-trigger.component.tsx
+++ b/packages/ui/src/design-system/profile-dropdown/profile-dropdown-trigger.component.tsx
@@ -58,6 +58,7 @@ export const Trigger = ({
           title={{ text: title, type: 'button' }}
           subtitle={subtitle}
           type={type}
+          testId={makeTestId(id)}
         />
 
         <Box ml="$10">
diff --git a/packages/ui/src/design-system/profile-dropdown/profile-dropdown-wallet-card.component.tsx b/packages/ui/src/design-system/profile-dropdown/profile-dropdown-wallet-card.component.tsx
index 6ae05a0cc8..4b7bdd9ef7 100644
--- a/packages/ui/src/design-system/profile-dropdown/profile-dropdown-wallet-card.component.tsx
+++ b/packages/ui/src/design-system/profile-dropdown/profile-dropdown-wallet-card.component.tsx
@@ -25,32 +25,44 @@ export interface Props {
     delayMs?: number;
   };
   type: WalletType;
+  testId?: string;
 }
 
+const makeTestId = (namespace = '', path = ''): string => {
+  return namespace === '' ? namespace : `${namespace}${path}`;
+};
+
 export const WalletCard = ({
   title,
   subtitle,
   profile,
   type,
+  testId = '',
 }: Readonly<Props>): JSX.Element => {
   const Title = title.type === 'button' ? Text.Label : Text.Address;
 
   return (
     <Flex>
       {profile === undefined ? (
-        <WalletIcon type={type} />
+        <WalletIcon type={type} testId={makeTestId(testId, '-icon')} />
       ) : (
         <UserProfile {...profile} radius="rounded" />
       )}
       <Flex flexDirection="column" ml="$10" h="$32" alignItems="flex-start">
-        <Title className={cx.title}>{title.text}</Title>
+        <Title className={cx.title} data-testid={makeTestId(testId, '-title')}>
+          {title.text}
+        </Title>
         <Box
           className={cn(cx.subtitleBox, {
             [cx.subtitleButtonOffset]: title.type === 'button',
             [cx.subtitleContentOffset]: title.type === 'content',
           })}
         >
-          <Text.Body.Small weight="$semibold" className={cx.subtitle}>
+          <Text.Body.Small
+            weight="$semibold"
+            className={cx.subtitle}
+            data-testid={makeTestId(testId, '-subtitle')}
+          >
             {subtitle}
           </Text.Body.Small>
         </Box>
diff --git a/packages/ui/src/design-system/profile-dropdown/profile-dropdown-wallet-icon.component.tsx b/packages/ui/src/design-system/profile-dropdown/profile-dropdown-wallet-icon.component.tsx
index 0ee1e1e14f..1e4a9cfffa 100644
--- a/packages/ui/src/design-system/profile-dropdown/profile-dropdown-wallet-icon.component.tsx
+++ b/packages/ui/src/design-system/profile-dropdown/profile-dropdown-wallet-icon.component.tsx
@@ -12,6 +12,7 @@ import type { WalletType } from './profile-dropdown.data';
 
 export interface Props {
   type: WalletType;
+  testId?: string;
 }
 
 const icons: Record<WalletType, FC<React.SVGProps<SVGSVGElement>>> = {
@@ -20,13 +21,15 @@ const icons: Record<WalletType, FC<React.SVGProps<SVGSVGElement>>> = {
   shared: SharedWallet,
 };
 
-export const WalletIcon = ({ type }: Readonly<Props>): JSX.Element => {
+export const WalletIcon = ({ type, testId }: Readonly<Props>): JSX.Element => {
   const Icon = icons[type];
   return (
     <Flex
       className={cx.container({
         bg: type,
       })}
+      data-testid={testId}
+      data-value={type}
     >
       <Icon />
     </Flex>
diff --git a/packages/ui/src/design-system/profile-dropdown/profile-dropdown-wallet-option.component.tsx b/packages/ui/src/design-system/profile-dropdown/profile-dropdown-wallet-option.component.tsx
index 3161624481..73d63e1494 100644
--- a/packages/ui/src/design-system/profile-dropdown/profile-dropdown-wallet-option.component.tsx
+++ b/packages/ui/src/design-system/profile-dropdown/profile-dropdown-wallet-option.component.tsx
@@ -26,6 +26,12 @@ export type Props = Omit<ComponentPropsWithoutRef<'button'>, 'type'> & {
   type: WalletType;
 };
 
+const makeTestId = (namespace = '', path = ''): string => {
+  return namespace === ''
+    ? namespace
+    : `profile-dropdown-wallet-option-${namespace}${path}`;
+};
+
 export const WalletOption = ({
   id,
   disabled,
@@ -42,6 +48,7 @@ export const WalletOption = ({
       id={id}
       disabled={disabled}
       className={classNames(cx.button, cx.container, className)}
+      data-testid={makeTestId(id)}
     >
       <Flex alignItems="center" justifyContent="space-between" w="$fill">
         <WalletCard
@@ -52,6 +59,7 @@ export const WalletOption = ({
           }}
           subtitle={subtitle}
           type={type}
+          testId={makeTestId(id)}
         />
         <Box ml="$10">
           <Flex