diff --git a/nym-wallet/src/components/Accounts.stories.tsx b/nym-wallet/src/components/Accounts.stories.tsx
new file mode 100644
index 0000000000..c753f18d89
--- /dev/null
+++ b/nym-wallet/src/components/Accounts.stories.tsx
@@ -0,0 +1,22 @@
+import { Box } from '@mui/material';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Accounts } from 'src/components/Accounts';
+
+export default {
+  title: 'Wallet / Multi Account',
+  component: Accounts,
+} as ComponentMeta<typeof Accounts>;
+
+const Template: ComponentStory<typeof Accounts> = (args) => (
+  <Box display="flex" alignContent="center">
+    <Accounts {...args} />
+  </Box>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  accounts: [
+    { name: 'Account 1', address: 'abcdefg' },
+    { name: 'Account 2', address: 'tuvwxyz' },
+  ],
+};
diff --git a/nym-wallet/src/components/Accounts.tsx b/nym-wallet/src/components/Accounts.tsx
new file mode 100644
index 0000000000..4e30a6c6b0
--- /dev/null
+++ b/nym-wallet/src/components/Accounts.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { Button, Dialog, DialogContent, DialogTitle } from '@mui/material';
+import { Circle } from '@mui/icons-material';
+
+export type TAccount = {
+  name: string;
+  address: string;
+};
+
+export const Accounts = ({ accounts }: { accounts: TAccount[] }) => {
+  const [addresses, setAddresses] = useState(accounts);
+  const [selectedAddress, setSelectedAddress] = useState(accounts[0]);
+  const [showDialog, setShowDialog] = useState(false);
+
+  return (
+    <>
+      <Button startIcon={<Circle color="info" />} color="inherit" onClick={() => setShowDialog(true)}>
+        {selectedAddress.name}
+      </Button>
+      <AccountModal show={showDialog} onClose={() => setShowDialog(false)} />
+    </>
+  );
+};
+
+const AccountModal = ({ show, onClose }: { show: boolean; onClose: () => void }) => {
+  return (
+    <Dialog open={show} onClose={onClose}>
+      <DialogTitle>Yo</DialogTitle>
+      <DialogContent>Content</DialogContent>
+    </Dialog>
+  );
+};
diff --git a/nym-wallet/src/components/ClientAddress.stories.tsx b/nym-wallet/src/components/ClientAddress.stories.tsx
index eae99150a7..08a3d873b4 100644
--- a/nym-wallet/src/components/ClientAddress.stories.tsx
+++ b/nym-wallet/src/components/ClientAddress.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Box, Typography } from '@mui/material';
+import { Box } from '@mui/material';
 import { ClientAddressDisplay } from './ClientAddress';
 
 export default {