diff --git a/src/app/components/Toolbar/Features/Contacts/ContactAccount.tsx b/src/app/components/Toolbar/Features/Contacts/ContactAccount.tsx
new file mode 100644
index 0000000000..477aa8a138
--- /dev/null
+++ b/src/app/components/Toolbar/Features/Contacts/ContactAccount.tsx
@@ -0,0 +1,71 @@
+import { useContext, useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { useTranslation } from 'react-i18next'
+import { Box } from 'grommet/es6/components/Box'
+import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
+import { Tabs } from 'grommet/es6/components/Tabs'
+import { Tab } from 'grommet/es6/components/Tab'
+import { contactsActions } from 'app/state/contacts'
+import { Contact } from 'app/state/contacts/types'
+import { Account } from '../Account/Account'
+import { ResponsiveLayer } from '../../../ResponsiveLayer'
+import { ContactAccountForm } from './ContactAccountForm'
+
+interface ContactAccountProps {
+ contact: Contact
+}
+
+export const ContactAccount = ({ contact }: ContactAccountProps) => {
+ const { t } = useTranslation()
+ const [layerVisibility, setLayerVisibility] = useState(false)
+ const isMobile = useContext(ResponsiveContext) === 'small'
+ const dispatch = useDispatch()
+ const submitHandler = (contact: Contact) => dispatch(contactsActions.update(contact))
+
+ return (
+
+ setLayerVisibility(true),
+ }}
+ isActive={false}
+ key={contact.address}
+ name={contact.name}
+ onClick={() => setLayerVisibility(true)}
+ />
+ {layerVisibility && (
+ setLayerVisibility(false)}
+ onEsc={() => setLayerVisibility(false)}
+ animation="none"
+ background="background-front"
+ modal
+ position="top"
+ margin={isMobile ? 'none' : 'xlarge'}
+ >
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ )
+}
diff --git a/src/app/components/Toolbar/Features/Contacts/index.tsx b/src/app/components/Toolbar/Features/Contacts/index.tsx
index cb63a791c8..70474808eb 100644
--- a/src/app/components/Toolbar/Features/Contacts/index.tsx
+++ b/src/app/components/Toolbar/Features/Contacts/index.tsx
@@ -5,6 +5,7 @@ import { Box } from 'grommet/es6/components/Box'
import { Button } from 'grommet/es6/components/Button'
import { Inbox } from 'grommet-icons/es6/icons/Inbox'
import { selectContactsList } from 'app/state/contacts/selectors'
+import { ContactAccount } from './ContactAccount'
import { AddContact } from './AddContact'
const ContactsListEmptyState = () => {
@@ -35,6 +36,11 @@ export const Contacts = () => {
)}
+ {!!contacts.length && (
+
+ {contacts?.map(contact => )}
+
+ )}