diff --git a/packages/yoroi-extension/app/components/topbar/NavWalletDetailsRevamp.js b/packages/yoroi-extension/app/components/topbar/NavWalletDetailsRevamp.js
index bc496cc628..9bed8fd10d 100644
--- a/packages/yoroi-extension/app/components/topbar/NavWalletDetailsRevamp.js
+++ b/packages/yoroi-extension/app/components/topbar/NavWalletDetailsRevamp.js
@@ -112,8 +112,12 @@ export default class NavWalletDetailsRevamp extends Component<Props> {
             </div>
             <div className={styles.fixedAmount}>
               <p>
-                {/* TODO: fix value */}
-                !!2,000,00 USD
+                {/* TODO: fix value to USD */}
+                {this.renderAmountDisplay({
+                  shouldHideBalance,
+                  amount: totalAmount,
+                })}{' '}
+                USD
               </p>
             </div>
           </div>
diff --git a/packages/yoroi-extension/app/components/topbar/NavPlateRevamp.js b/packages/yoroi-extension/app/components/topbar/WalletCard.js
similarity index 63%
rename from packages/yoroi-extension/app/components/topbar/NavPlateRevamp.js
rename to packages/yoroi-extension/app/components/topbar/WalletCard.js
index cf48712e7d..6cff728bc9 100644
--- a/packages/yoroi-extension/app/components/topbar/NavPlateRevamp.js
+++ b/packages/yoroi-extension/app/components/topbar/WalletCard.js
@@ -3,13 +3,13 @@ import React, { Component } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import { intlShape, defineMessages } from 'react-intl';
-import styles from './NavPlateRevamp.scss';
+import styles from './WalletCard.scss';
 import WalletAccountIcon from './WalletAccountIcon';
 import ConceptualIcon from '../../assets/images/wallet-nav/conceptual-wallet.inline.svg';
 import TrezorIcon from '../../assets/images/wallet-nav/trezor-wallet.inline.svg';
 import LedgerIcon from '../../assets/images/wallet-nav/ledger-wallet.inline.svg';
 import { MultiToken } from '../../api/common/lib/MultiToken';
-
+import classnames from 'classnames';
 import { truncateToken, splitAmount } from '../../utils/formatters';
 import type { WalletChecksum } from '@emurgo/cip4-js';
 import type { $npm$ReactIntl$IntlFormat, $npm$ReactIntl$MessageDescriptor } from 'react-intl';
@@ -25,8 +25,13 @@ import { getTokenName } from '../../stores/stateless/tokenHelpers';
 import { hiddenAmount } from '../../utils/strings';
 import type { TokenLookupKey } from '../../api/common/lib/MultiToken';
 import type { TokenRow } from '../../api/ada/lib/storage/database/primitives/tables';
+import RandomIcon from '../../assets/images/sidebar/revamp/wallet.inline.svg';
 
 const messages = defineMessages({
+  tokenTypes: {
+    id: 'wallet.topbar.dialog.tokenTypes',
+    defaultMessage: '!!!Token types',
+  },
   standardWallet: {
     id: 'wallet.nav.type.standard',
     defaultMessage: '!!!Standard wallet',
@@ -52,11 +57,15 @@ type Props = {|
     conceptualWalletName: string,
   |},
   +rewards: null | void | MultiToken,
-
+  +shouldHideBalance: boolean,
   +walletAmount: null | MultiToken,
   +getTokenInfo: ($ReadOnly<Inexact<TokenLookupKey>>) => $ReadOnly<TokenRow>,
+  +isCurrentWallet?: boolean,
+  +onSelect?: void => void,
 |};
 
+type State = {| +isActionsShow: boolean |};
+
 function constructPlate(
   plate: WalletChecksum,
   saturationFactor: number,
@@ -75,11 +84,23 @@ function constructPlate(
 }
 
 @observer
-export default class NavPlateRevamp extends Component<Props> {
+export default class WalletCard extends Component<Props, State> {
   static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
     intl: intlShape.isRequired,
   };
 
+  static defaultProps: {|
+    isCurrentWallet: boolean,
+    onSelect: void,
+  |} = {
+    onSelect: undefined,
+    isCurrentWallet: false,
+  };
+
+  state: State = {
+    isActionsShow: false,
+  };
+
   getEra: ConceptualWallet => void | $Exact<$npm$ReactIntl$MessageDescriptor> = wallet => {
     if (!isCardanoHaskell(wallet.getNetworkInfo())) {
       return undefined;
@@ -110,49 +131,95 @@ export default class NavPlateRevamp extends Component<Props> {
     return ConceptualIcon;
   };
 
+  showActions: void => void = () => {
+    this.setState({ isActionsShow: true });
+  };
+  hideActions: void => void = () => {
+    this.setState({ isActionsShow: false });
+  };
+
   render(): Node {
-    const { intl, shouldHideBalance } = this.context;
+    const { intl } = this.context;
+    const { shouldHideBalance } = this.props;
+    const { isActionsShow } = this.state;
 
     const [, iconComponent] = this.props.plate
       ? constructPlate(this.props.plate, 0, styles.icon)
       : [];
 
-    const typeText = [
-      // this.getEra(this.props.wallet.conceptualWallet),
-      this.getType(this.props.wallet.conceptualWallet),
-    ]
+    const typeText = [this.getType(this.props.wallet.conceptualWallet)]
       .filter(text => text != null)
       .map(text => intl.formatMessage(text))
       .join(' - ');
     const totalAmount = this.getTotalAmount();
 
+    const wrapperClassname = classnames(
+      styles.cardWrapper,
+      this.props.isCurrentWallet !== null &&
+        this.props.isCurrentWallet === true &&
+        styles.currentCardWrapper
+    );
+
     return (
-      <div className={styles.wrapper}>
-        <div className={styles.header}>
-          <h5 className={styles.name}>{this.props.wallet.conceptualWalletName}</h5>
-          {' ·  '}
-          <div className={styles.type}>{typeText}</div>
-        </div>
-        <div className={styles.card}>
-          <div>{iconComponent}</div>
-          <div className={styles.content}>
-            <div className={styles.amount}>
-              {this.renderAmountDisplay({
-                shouldHideBalance,
-                amount: totalAmount,
-              })}
+      <button
+        className={wrapperClassname}
+        type="button"
+        onClick={this.props.onSelect}
+        onMouseEnter={this.showActions}
+        onMouseLeave={this.hideActions}
+      >
+        <div className={styles.main}>
+          <div className={styles.header}>
+            <h5 className={styles.name}>{this.props.wallet.conceptualWalletName}</h5>
+            {' ·  '}
+            <div className={styles.type}>{typeText}</div>
+          </div>
+          <div className={styles.body}>
+            <div>{iconComponent}</div>
+            <div className={styles.content}>
+              <div className={styles.amount}>
+                {this.renderAmountDisplay({
+                  shouldHideBalance,
+                  amount: totalAmount,
+                })}
+              </div>
+              <div className={styles.fixedAmount}>
+                <p>
+                  {/* TODO: fix value to USD */}
+                  {this.renderAmountDisplay({
+                    shouldHideBalance,
+                    amount: totalAmount,
+                  })}{' '}
+                  USD
+                </p>
+              </div>
             </div>
-            <div className={styles.fixedAmount}>
-              <p>
-                {/* TODO: fix value */}
-                !!2,000,00 USD
+            <div className={styles.extraInfo}>
+              <p className={styles.label}>
+                {intl.formatMessage(messages.tokenTypes)} <span className={styles.value}>20</span>
+              </p>
+              <p className={styles.label}>
+                NFTs <span className={styles.value}>2</span>
               </p>
             </div>
           </div>
         </div>
-      </div>
+        <div className={styles.actions}>
+          {isActionsShow ? (
+            <>
+              <button type="button" onClick={() => {}}>
+                <RandomIcon />
+              </button>
+              <button type="button" onClick={() => {}}>
+                <RandomIcon />
+              </button>
+            </>
+          ) : null}
+        </div>
+      </button>
     );
   }
+
   renderAmountDisplay: ({|
     shouldHideBalance: boolean,
     amount: ?MultiToken,
diff --git a/packages/yoroi-extension/app/components/topbar/NavPlateRevamp.scss b/packages/yoroi-extension/app/components/topbar/WalletCard.scss
similarity index 53%
rename from packages/yoroi-extension/app/components/topbar/NavPlateRevamp.scss
rename to packages/yoroi-extension/app/components/topbar/WalletCard.scss
index d3d38e22bb..9e59b83721 100644
--- a/packages/yoroi-extension/app/components/topbar/NavPlateRevamp.scss
+++ b/packages/yoroi-extension/app/components/topbar/WalletCard.scss
@@ -1,7 +1,8 @@
 @import '../../themes/mixins/loading-spinner';
 
-.wrapper {
-  min-width: 300px;
+.main {
+  font-family: var(--font-regular);
+  flex: 1;
   canvas {
     width: 32px !important;
     height: 32px !important;
@@ -17,14 +18,13 @@
   margin-bottom: 8px;
 }
 
-.card {
+.body {
   display: flex;
   align-items: center;
 }
 
 .name {
   margin-right: 5px;
-  font-family: var(--font-regular);
 }
 
 .type {
@@ -34,7 +34,6 @@
 }
 .data {
   margin-left: 12px;
-  font-family: var(--font-regular);
 }
 
 .isLoading {
@@ -44,19 +43,20 @@
   margin-bottom: 4px;
 }
 
+.fixedAmount {
+  color: #6b7384;
+}
 .amount {
   font-family: var(--font-medium);
-
+  flex: 1;
   .isLoading {
     margin-left: 9px;
     margin-bottom: 6px;
     @include loading-spinner('../../assets/images/spinner-dark.svg', 16);
   }
 }
-.fixedAmount {
-  color: #6b7384;
-}
 .content {
+  flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -65,3 +65,59 @@
   line-height: 22px;
   margin-left: 12px;
 }
+
+.extraInfo {
+  flex: 1;
+  text-align: left;
+  .label {
+    color: #6b7384;
+    line-height: 22px;
+  }
+  .value {
+    color: #2b2c32;
+  }
+}
+.actions {
+  min-width: 80px;
+  svg {
+    max-width: 24px;
+    max-height: 24px;
+    color: #6b7384;
+  }
+  button {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    &:hover {
+      background: #eaedf2;
+    }
+  }
+}
+
+.cardWrapper {
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--theme-wallet-dropdown-background-color);
+  border-radius: 8px;
+  border: 1px solid transparent;
+
+  & + & {
+    margin-top: 14px;
+  }
+
+  &:hover {
+    cursor: pointer;
+    border: 1px solid #eaedf2;
+  }
+}
+
+.currentCardWrapper {
+  border: 1px solid #3154cb;
+
+  &:hover {
+    cursor: pointer;
+    border: 1px solid #3154cb;
+  }
+}
diff --git a/packages/yoroi-extension/app/components/topbar/WalletListDialog.js b/packages/yoroi-extension/app/components/topbar/WalletListDialog.js
new file mode 100644
index 0000000000..13b65d5bd8
--- /dev/null
+++ b/packages/yoroi-extension/app/components/topbar/WalletListDialog.js
@@ -0,0 +1,132 @@
+// @flow
+
+import type { Node } from 'react';
+import React, { Component } from 'react';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import Dialog from '../widgets/Dialog';
+import DialogCloseButton from '../widgets/DialogCloseButton';
+import styles from './WalletListDialog.scss';
+import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
+import IconEyeOpen from '../../assets/images/my-wallets/icon_eye_open.inline.svg';
+import IconEyeClosed from '../../assets/images/my-wallets/icon_eye_closed.inline.svg';
+import { splitAmount, truncateToken } from '../../utils/formatters';
+import { getTokenName } from '../../stores/stateless/tokenHelpers';
+import { hiddenAmount } from '../../utils/strings';
+import type { TokenLookupKey } from '../../api/common/lib/MultiToken';
+import type { TokenRow } from '../../api/ada/lib/storage/database/primitives/tables';
+import { MultiToken } from '../../api/common/lib/MultiToken';
+
+const messages = defineMessages({
+  allWalletsLabel: {
+    id: 'wallet.nav.allWalletsLabel',
+    defaultMessage: '!!!All wallets',
+  },
+  addWallet: {
+    id: 'wallet.nav.addButton',
+    defaultMessage: '!!!Add Wallet',
+  },
+  totalBalance: {
+    id: 'wallet.topbar.dialog.totalBalance',
+    defaultMessage: '!!!Total Balance',
+  },
+});
+
+type Props = {|
+  +walletsComponent: Node,
+  +close: void => void,
+  +walletsCount: number,
+  +shouldHideBalance: boolean,
+  +onUpdateHideBalance: void => Promise<void>,
+  +getTokenInfo: ($ReadOnly<Inexact<TokenLookupKey>>) => $ReadOnly<TokenRow>,
+  +walletAmount: MultiToken | null,
+  +onAddWallet: void => void,
+|};
+
+@observer
+export default class WalletListDialog extends Component<Props> {
+  static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
+    intl: intlShape.isRequired,
+  };
+
+  renderAmountDisplay: ({|
+    shouldHideBalance: boolean,
+    amount: ?MultiToken,
+  |}) => Node = request => {
+    if (request.amount == null) {
+      return <div className={styles.isLoading} />;
+    }
+
+    const defaultEntry = request.amount.getDefaultEntry();
+    const tokenInfo = this.props.getTokenInfo(defaultEntry);
+    const shiftedAmount = defaultEntry.amount.shiftedBy(-tokenInfo.Metadata.numberOfDecimals);
+
+    let balanceDisplay;
+    if (request.shouldHideBalance) {
+      balanceDisplay = <span>{hiddenAmount}</span>;
+    } else {
+      const [beforeDecimalRewards, afterDecimalRewards] = splitAmount(
+        shiftedAmount,
+        tokenInfo.Metadata.numberOfDecimals
+      );
+
+      balanceDisplay = (
+        <>
+          {beforeDecimalRewards}
+          <span className={styles.afterDecimal}>{afterDecimalRewards}</span>
+        </>
+      );
+    }
+
+    return (
+      <>
+        {balanceDisplay} {truncateToken(getTokenName(tokenInfo))}
+      </>
+    );
+  };
+  render(): Node {
+    const { intl } = this.context;
+    const {
+      walletsCount,
+      shouldHideBalance,
+      onAddWallet,
+      walletAmount,
+      onUpdateHideBalance,
+      walletsComponent,
+    } = this.props;
+
+    return (
+      <Dialog
+        className={styles.component}
+        title={`${intl.formatMessage(messages.allWalletsLabel)} (${walletsCount})`}
+        closeOnOverlayClick
+        closeButton={<DialogCloseButton />}
+        onClose={this.props.close}
+      >
+        <div className={styles.header}>
+          <div className={styles.totalInfo}>
+            <div className={styles.amount}>
+              <p className={styles.label}>{intl.formatMessage(messages.totalBalance)}</p>
+              <p className={styles.value}>
+                {this.renderAmountDisplay({
+                  shouldHideBalance,
+                  amount: walletAmount,
+                })}{' '}
+                USD
+              </p>
+            </div>
+            <button type="button" className={styles.toggleButton} onClick={onUpdateHideBalance}>
+              {shouldHideBalance ? <IconEyeClosed /> : <IconEyeOpen />}
+            </button>
+          </div>
+        </div>
+        <div className={styles.list}>{walletsComponent}</div>
+        <div className={styles.footer}>
+          <button type="button" className={styles.toggleButton} onClick={onAddWallet}>
+            {intl.formatMessage(messages.addWallet)}
+          </button>
+        </div>
+      </Dialog>
+    );
+  }
+}
diff --git a/packages/yoroi-extension/app/components/topbar/WalletListDialog.scss b/packages/yoroi-extension/app/components/topbar/WalletListDialog.scss
new file mode 100644
index 0000000000..b8674b21e1
--- /dev/null
+++ b/packages/yoroi-extension/app/components/topbar/WalletListDialog.scss
@@ -0,0 +1,51 @@
+.component {
+  font-family: var(--font-regular);
+  font-size: 16px;
+  min-width: 673px !important;
+  margin: 24px 4px 0 0 !important;
+  padding-right: 0 !important;
+
+  .header {
+    margin-top: 14px;
+    padding-left: 40px;
+  }
+  .totalInfo {
+    display: flex;
+  }
+  .amount {
+    margin-right: 8px;
+    color: #6b7384;
+    .label {
+      margin-bottom: 4px;
+      font-size: 14px;
+    }
+    .value {
+      font-family: var(--font-semibold);
+      font-weight: 500;
+    }
+  }
+  .toggleButton {
+    display: flex;
+    align-self: flex-end;
+  }
+
+  .list {
+    display: flex;
+    flex-direction: column;
+    padding: 30px 0;
+    padding-left: 24px;
+    overflow-y: scroll;
+    height: 400px;
+  }
+  .footer {
+    border-top: 1px solid #dce0e9;
+    padding: 20px 0;
+    display: flex;
+    justify-content: center;
+    button {
+      font-family: var(--font-medium);
+      text-transform: uppercase;
+      color: var(--theme-default-main-color);
+    }
+  }
+}
diff --git a/packages/yoroi-extension/app/containers/NavBarContainerRevamp.js b/packages/yoroi-extension/app/containers/NavBarContainerRevamp.js
index 442ff243b8..2403a3e96a 100644
--- a/packages/yoroi-extension/app/containers/NavBarContainerRevamp.js
+++ b/packages/yoroi-extension/app/containers/NavBarContainerRevamp.js
@@ -4,8 +4,6 @@ import React, { Component } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import type { InjectedOrGenerated } from '../types/injectedPropsType';
-import { intlShape } from 'react-intl';
-// import { intlShape, defineMessages } from 'react-intl';
 import NavBarRevamp from '../components/topbar/NavBarRevamp';
 import NoWalletsDropdown from '../components/topbar/NoWalletsDropdown';
 import NavDropdownRevamp from '../components/topbar/NavDropdownRevamp';
@@ -13,7 +11,6 @@ import { ROUTES } from '../routes-config';
 import { ConceptualWallet } from '../api/ada/lib/storage/models/ConceptualWallet/index';
 import { asGetPublicKey } from '../api/ada/lib/storage/models/PublicDeriver/traits';
 import { PublicDeriver } from '../api/ada/lib/storage/models/PublicDeriver';
-import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import type { DelegationRequests } from '../stores/toplevel/DelegationStore';
 import type { ConceptualWalletSettingsCache } from '../stores/toplevel/WalletSettingsStore';
 import type { PublicKeyCache } from '../stores/toplevel/WalletStore';
@@ -22,12 +19,16 @@ import type { IGetPublic } from '../api/ada/lib/storage/models/PublicDeriver/int
 import type { TokenRow } from '../api/ada/lib/storage/database/primitives/tables';
 import { MultiToken } from '../api/common/lib/MultiToken';
 import type { TokenInfoMap } from '../stores/toplevel/TokenInfoStore';
-import { genLookupOrFail } from '../stores/stateless/tokenHelpers';
 import BuySellDialog from '../components/buySell/BuySellDialog';
-
+import { genLookupOrFail, getTokenName } from '../stores/stateless/tokenHelpers';
 import NavWalletDetailsRevamp from '../components/topbar/NavWalletDetailsRevamp';
 import BuySellAdaButton from '../components/topbar/BuySellAdaButton';
 import NoWalletsAccessList from '../components/topbar/NoWalletsAccessList';
+import WalletListDialog from '../components/topbar/WalletListDialog';
+import { networks } from '../api/ada/lib/storage/database/prepackaged/networks';
+import { addressToDisplayString } from '../api/ada/lib/storage/bridge/utils';
+import { getReceiveAddress } from '../stores/stateless/addressStores';
+import WalletCard from '../components/topbar/WalletCard';
 
 export type GeneratedData = typeof NavBarContainerRevamp.prototype.generated;
 
@@ -42,9 +43,6 @@ export default class NavBarContainerRevamp extends Component<Props> {
   static defaultProps: {| menu: void |} = {
     menu: undefined,
   };
-  static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
-    intl: intlShape.isRequired,
-  };
 
   updateHideBalance: void => Promise<void> = async () => {
     await this.generated.actions.profile.updateHideBalance.trigger();
@@ -118,30 +116,150 @@ export default class NavBarContainerRevamp extends Component<Props> {
           headerComponent={getDropdownHead()}
           contentComponents={<NoWalletsAccessList />}
           walletsCount={wallets.length}
-          openWalletInfoDialog={() =>
-            this.generated.actions.router.goToRoute.trigger({ route: ROUTES.MY_WALLETS })
-          }
+          openWalletInfoDialog={() => {
+            this.generated.actions.dialogs.open.trigger({ dialog: WalletListDialog });
+            this.generated.actions.router.goToRoute.trigger({
+              route: ROUTES.WALLETS.DELEGATION_DASHBOARD,
+            });
+          }}
         />
       );
     })();
 
     return (
-      <NavBarRevamp
-        title={this.props.title}
-        menu={this.props.menu}
-        walletDetails={dropdownComponent}
-        goToNotifications={() =>
-          this.generated.actions.router.goToRoute.trigger({
-            route: ROUTES.NOTICE_BOARD.ROOT,
-          })
-        }
-        buyButton={
-          <BuySellAdaButton onBuySellClick={() => this.openDialogWrapper(BuySellDialog)} />
-        }
-      />
+      <>
+        {this.getDialog()}
+        <NavBarRevamp
+          title={this.props.title}
+          menu={this.props.menu}
+          walletDetails={dropdownComponent}
+          goToNotifications={() =>
+            this.generated.actions.router.goToRoute.trigger({
+              route: ROUTES.NOTICE_BOARD.ROOT,
+            })
+          }
+          buyButton={
+            <BuySellAdaButton
+              onBuySellClick={() =>
+                this.generated.actions.dialogs.open.trigger({ dialog: BuySellDialog })
+              }
+            />
+          }
+        />
+      </>
     );
   }
 
+  getDialog: void => Node = () => {
+    const publicDeriver = this.generated.stores.wallets.selected;
+    if (publicDeriver == null) {
+      // TODO: Remove style since for now, we don't have a selected wallet by default
+      return (
+        <div style={{ marginRight: '100px' }}>
+          <NoWalletsDropdown />
+        </div>
+      );
+    }
+    const wallets = this.generated.stores.wallets.publicDerivers;
+    const txRequests = this.generated.stores.transactions.getTxRequests(publicDeriver);
+    const balance = txRequests.requests.getBalanceRequest.result || null;
+
+    const walletComponents = wallets.map(wallet => {
+      const parent = wallet.getParent();
+      const settingsCache = this.generated.stores.walletSettings.getConceptualWalletSettingsCache(
+        parent
+      );
+
+      const withPubKey = asGetPublicKey(wallet);
+      const plate =
+        withPubKey == null
+          ? null
+          : this.generated.stores.wallets.getPublicKeyCache(withPubKey).plate;
+
+      return (
+        <WalletCard
+          key={wallet.getPublicDeriverId()}
+          rewards={this.getRewardBalance(publicDeriver)}
+          walletAmount={balance}
+          getTokenInfo={genLookupOrFail(this.generated.stores.tokenInfoStore.tokenInfo)}
+          plate={plate}
+          wallet={settingsCache}
+          shouldHideBalance={this.generated.stores.profile.shouldHideBalance}
+          onSelect={() => this.switchToNewWallet(wallet)}
+          isCurrentWallet={wallet === this.generated.stores.wallets.selected}
+        />
+      );
+    });
+
+    if (this.generated.stores.uiDialogs.isOpen(WalletListDialog)) {
+      return (
+        <WalletListDialog
+          walletsComponent={walletComponents}
+          walletsCount={wallets.length}
+          close={this.generated.actions.dialogs.closeActiveDialog.trigger}
+          shouldHideBalance={this.generated.stores.profile.shouldHideBalance}
+          onUpdateHideBalance={this.updateHideBalance}
+          getTokenInfo={genLookupOrFail(this.generated.stores.tokenInfoStore.tokenInfo)}
+          walletAmount={balance}
+          onAddWallet={() =>
+            this.generated.actions.router.goToRoute.trigger({ route: ROUTES.WALLETS.ADD })
+          }
+        />
+      );
+    }
+    if (this.generated.stores.uiDialogs.isOpen(BuySellDialog)) {
+      return (
+        <BuySellDialog
+          onCancel={this.generated.actions.dialogs.closeActiveDialog.trigger}
+          genWalletList={async () => {
+            return await this.generateUnusedAddressesPerWallet(wallets);
+          }}
+        />
+      );
+    }
+    return null;
+  };
+
+  generateUnusedAddressesPerWallet: (Array<PublicDeriver<>>) => Promise<Array<any>> = async (
+    wallets: Array<PublicDeriver<>>
+  ) => {
+    const infoWallets = wallets.map(async (wallet: PublicDeriver<>) => {
+      const parent: ConceptualWallet = wallet.getParent();
+      const settingsCache: ConceptualWalletSettingsCache
+        = this.generated.stores.walletSettings.getConceptualWalletSettingsCache(
+          parent
+        );
+
+      const defaultToken = this.generated.stores.tokenInfoStore.getDefaultTokenInfo(
+        wallet.getParent().getNetworkInfo().NetworkId
+      );
+      const currencyName = getTokenName(defaultToken);
+
+      if (defaultToken.NetworkId !== networks.CardanoMainnet.NetworkId) {
+        return null;
+      }
+
+      const receiveAddress = await this.generated.getReceiveAddress(wallet);
+      if (receiveAddress == null) return null;
+      const anAddressFormatted = addressToDisplayString(
+        receiveAddress.addr.Hash,
+        parent.getNetworkInfo()
+      );
+
+      return {
+        walletName: settingsCache.conceptualWalletName,
+        currencyName,
+        anAddressFormatted,
+      };
+    });
+
+    return (await Promise.all(infoWallets)).reduce((acc, next) => {
+      if (next == null) return acc;
+      acc.push(next);
+      return acc;
+    }, []);
+  };
+
   /**
    * undefined => wallet is not a reward wallet
    * null => still calculating
@@ -167,6 +285,9 @@ export default class NavBarContainerRevamp extends Component<Props> {
             params?: any,
           |}) => void,
         |},
+        closeActiveDialog: {|
+          trigger: (params: void) => void,
+        |},
       |},
       profile: {|
         updateHideBalance: {|
@@ -192,6 +313,7 @@ export default class NavBarContainerRevamp extends Component<Props> {
     |},
     stores: {|
       app: {| currentRoute: string |},
+      uiDialogs: {| isOpen: any => boolean |},
       delegation: {|
         getDelegationRequests: (PublicDeriver<>) => void | DelegationRequests,
       |},
@@ -214,6 +336,7 @@ export default class NavBarContainerRevamp extends Component<Props> {
         selected: null | PublicDeriver<>,
       |},
     |},
+    getReceiveAddress: typeof getReceiveAddress,
   |} {
     if (this.props.generated !== undefined) {
       return this.props.generated;
@@ -223,6 +346,7 @@ export default class NavBarContainerRevamp extends Component<Props> {
     }
     const { stores, actions } = this.props;
     return Object.freeze({
+      getReceiveAddress,
       stores: {
         app: {
           currentRoute: stores.app.currentRoute,
@@ -239,6 +363,9 @@ export default class NavBarContainerRevamp extends Component<Props> {
           tokenInfo: stores.tokenInfoStore.tokenInfo,
           getDefaultTokenInfo: stores.tokenInfoStore.getDefaultTokenInfo,
         },
+        uiDialogs: {
+          isOpen: stores.uiDialogs.isOpen,
+        },
         profile: {
           shouldHideBalance: stores.profile.shouldHideBalance,
         },
@@ -261,6 +388,7 @@ export default class NavBarContainerRevamp extends Component<Props> {
         },
         dialogs: {
           open: { trigger: actions.dialogs.open.trigger },
+          closeActiveDialog: { trigger: actions.dialogs.closeActiveDialog.trigger },
         },
       },
     });
diff --git a/packages/yoroi-extension/app/containers/settings/Settings.js b/packages/yoroi-extension/app/containers/settings/Settings.js
index dbc3714200..b628ae7357 100644
--- a/packages/yoroi-extension/app/containers/settings/Settings.js
+++ b/packages/yoroi-extension/app/containers/settings/Settings.js
@@ -14,6 +14,7 @@ import { buildRoute } from '../../utils/routing';
 import type { InjectedOrGenerated } from '../../types/injectedPropsType';
 import type { GeneratedData as SidebarContainerData } from '../SidebarContainer';
 import type { GeneratedData as NavBarContainerData } from '../NavBarContainer';
+import type { GeneratedData as NavBarContainerRevampData } from '../NavBarContainerRevamp';
 
 import TopBarLayout from '../../components/layout/TopBarLayout';
 import SidebarContainer from '../SidebarContainer';
@@ -91,7 +92,7 @@ class Settings extends Component<AllProps> {
         sidebar={sidebarContainer}
         navbar={
           <NavBarContainerRevamp
-            {...this.generated.NavBarContainerProps}
+            {...this.generated.NavBarContainerRevampProps}
             title={
               <NavBarTitle
                 title={this.context.intl.formatMessage(globalMessages.sidebarSettings)}
@@ -115,6 +116,7 @@ class Settings extends Component<AllProps> {
   @computed get generated(): {|
     BannerContainerProps: InjectedOrGenerated<BannerContainerData>,
     NavBarContainerProps: InjectedOrGenerated<NavBarContainerData>,
+    NavBarContainerRevampProps: InjectedOrGenerated<NavBarContainerRevampData>,
     SidebarContainerProps: InjectedOrGenerated<SidebarContainerData>,
     actions: {|
       router: {|
@@ -155,6 +157,10 @@ class Settings extends Component<AllProps> {
       },
       SidebarContainerProps: ({ actions, stores }: InjectedOrGenerated<SidebarContainerData>),
       NavBarContainerProps: ({ actions, stores }: InjectedOrGenerated<NavBarContainerData>),
+      NavBarContainerRevampProps: ({
+        actions,
+        stores,
+      }: InjectedOrGenerated<NavBarContainerRevampData>),
       BannerContainerProps: ({ actions, stores }: InjectedOrGenerated<BannerContainerData>),
     });
   }
diff --git a/packages/yoroi-extension/app/containers/settings/Settings.mock.js b/packages/yoroi-extension/app/containers/settings/Settings.mock.js
index f145870d6b..76e1a96c21 100644
--- a/packages/yoroi-extension/app/containers/settings/Settings.mock.js
+++ b/packages/yoroi-extension/app/containers/settings/Settings.mock.js
@@ -26,6 +26,7 @@ export const mockSettingsProps: {
   location: string,
   ...
 } => {| generated: GeneratedData |} = (request) => ({
+  // $FlowFixMe[prop-missing]: Some props are quite different for revamp components
   generated: {
     stores: {
       router: {
diff --git a/packages/yoroi-extension/app/containers/transfer/Transfer.js b/packages/yoroi-extension/app/containers/transfer/Transfer.js
index 5817d79c5d..688f105ef6 100644
--- a/packages/yoroi-extension/app/containers/transfer/Transfer.js
+++ b/packages/yoroi-extension/app/containers/transfer/Transfer.js
@@ -28,6 +28,7 @@ import HorizontalLine from '../../components/widgets/HorizontalLine';
 import NavBarContainerRevamp from '../NavBarContainerRevamp';
 import { withLayout } from '../../themes/context/layout';
 import type { LayoutComponentMap } from '../../themes/context/layout';
+import type { GeneratedData as NavBarContainerRevampData } from '../NavBarContainerRevamp';
 
 export type GeneratedData = typeof Transfer.prototype.generated;
 
@@ -64,7 +65,7 @@ class Transfer extends Component<AllProps> {
 
     const navbarRevamp = (
       <NavBarContainerRevamp
-        {...this.generated.NavBarContainerProps}
+        {...this.generated.NavBarContainerRevampProps}
         title={
           <NavBarTitle title={this.context.intl.formatMessage(globalMessages.sidebarSettings)} />
         }
@@ -113,6 +114,7 @@ class Transfer extends Component<AllProps> {
   @computed get generated(): {|
     BannerContainerProps: InjectedOrGenerated<BannerContainerData>,
     NavBarContainerProps: InjectedOrGenerated<NavBarContainerData>,
+    NavBarContainerRevampProps: InjectedOrGenerated<NavBarContainerRevampData>,
     SidebarContainerProps: InjectedOrGenerated<SidebarContainerData>,
     WalletTransferPageProps: InjectedOrGenerated<WalletTransferPageData>,
     actions: {|
@@ -158,6 +160,9 @@ class Transfer extends Component<AllProps> {
       NavBarContainerProps: (
         { actions, stores, }: InjectedOrGenerated<NavBarContainerData>
       ),
+      NavBarContainerRevampProps: (
+        { actions, stores, }: InjectedOrGenerated<NavBarContainerRevampData>
+      ),
       WalletTransferPageProps: (
         { actions, stores, }: InjectedOrGenerated<WalletTransferPageData>
       ),
diff --git a/packages/yoroi-extension/app/containers/transfer/Transfer.mock.js b/packages/yoroi-extension/app/containers/transfer/Transfer.mock.js
index 79b20fb86a..f9866dc5bc 100644
--- a/packages/yoroi-extension/app/containers/transfer/Transfer.mock.js
+++ b/packages/yoroi-extension/app/containers/transfer/Transfer.mock.js
@@ -45,6 +45,7 @@ export const mockTransferProps: {
   currentRoute: string,
   ...
 } => {| generated: GeneratedData |} = (request) => ({
+  // $FlowFixMe[prop-missing]: Some props are quite different for revamp components
   generated: {
     stores: {
       app: {
diff --git a/packages/yoroi-extension/app/containers/wallet/Wallet.js b/packages/yoroi-extension/app/containers/wallet/Wallet.js
index d7077845f0..c8ca05cfa7 100644
--- a/packages/yoroi-extension/app/containers/wallet/Wallet.js
+++ b/packages/yoroi-extension/app/containers/wallet/Wallet.js
@@ -28,6 +28,7 @@ import NavBarContainerRevamp from '../NavBarContainerRevamp';
 import globalMessages from '../../i18n/global-messages';
 import NavBarTitle from '../../components/topbar/NavBarTitle';
 import SubMenu from '../../components/topbar/SubMenu';
+import type { GeneratedData as NavBarContainerRevampData } from '../NavBarContainerRevamp';
 
 export type GeneratedData = typeof Wallet.prototype.generated;
 
@@ -183,7 +184,7 @@ class Wallet extends Component<AllProps> {
         sidebar={sidebarContainer}
         navbar={
           <NavBarContainerRevamp
-            {...this.generated.NavBarContainerProps}
+            {...this.generated.NavBarContainerRevampProps}
             title={<NavBarTitle title={intl.formatMessage(globalMessages.walletLabel)} />}
             menu={menu}
           />
@@ -210,6 +211,7 @@ class Wallet extends Component<AllProps> {
   @computed get generated(): {|
     BannerContainerProps: InjectedOrGenerated<BannerContainerData>,
     NavBarContainerProps: InjectedOrGenerated<NavBarContainerData>,
+    NavBarContainerRevampProps: InjectedOrGenerated<NavBarContainerRevampData>,
     SidebarContainerProps: InjectedOrGenerated<SidebarContainerData>,
     actions: {|
       router: {|
@@ -285,6 +287,10 @@ class Wallet extends Component<AllProps> {
       },
       SidebarContainerProps: ({ actions, stores }: InjectedOrGenerated<SidebarContainerData>),
       NavBarContainerProps: ({ actions, stores }: InjectedOrGenerated<NavBarContainerData>),
+      NavBarContainerRevampProps: ({
+        actions,
+        stores,
+      }: InjectedOrGenerated<NavBarContainerRevampData>),
       BannerContainerProps: ({ actions, stores }: InjectedOrGenerated<BannerContainerData>),
     });
   }
diff --git a/packages/yoroi-extension/app/containers/wallet/Wallet.mock.js b/packages/yoroi-extension/app/containers/wallet/Wallet.mock.js
index 65f3ea181f..6847edf80c 100644
--- a/packages/yoroi-extension/app/containers/wallet/Wallet.mock.js
+++ b/packages/yoroi-extension/app/containers/wallet/Wallet.mock.js
@@ -29,6 +29,7 @@ export const mockWalletProps: {
   location: string,
   ...
 } => {| generated: GeneratedData |} = (request) => ({
+  // $FlowFixMe[prop-missing]: Some props are quite different for revamp components
   generated: {
     stores: {
       app: {
diff --git a/packages/yoroi-extension/app/i18n/locales/en-US.json b/packages/yoroi-extension/app/i18n/locales/en-US.json
index 35e27ef7a1..951c6b14f8 100644
--- a/packages/yoroi-extension/app/i18n/locales/en-US.json
+++ b/packages/yoroi-extension/app/i18n/locales/en-US.json
@@ -733,6 +733,8 @@
   "wallet.summary.page.walletCreatedNotificationMessage": "You have successfully created a new Wallet",
   "wallet.summary.page.walletRestoredNotificationMessage": "You have successfully restored your Wallet",
   "wallet.summary.page.yesterdayLabel": "Yesterday",
+  "wallet.topbar.dialog.tokenTypes": "Token types",
+  "wallet.topbar.dialog.totalBalance": "Total Balance",
   "wallet.transaction.address.from": "From address",
   "wallet.transaction.address.to": "To address",
   "wallet.transaction.address.type": "Address Type",