diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index effed695cb..6d0c377d60 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -328,13 +328,16 @@ p:last-child { margin-block-end: 0; }
 
 .pl-1 { padding-left: .25rem; }
 .pl-2 { padding-left: .5rem; }
+.pl-3 { padding-left: .75rem; }
 .pl-4 { padding-left: 1rem; }
 .pl-8 { padding-left: 2rem; }
 .pr-1 { padding-right: .25rem; }
 .pr-2 { padding-right: .5rem; }
+.pr-3 { padding-right: .75rem; }
 .pr-4 { padding-right: 1rem; }
 .pr-24 { padding-right: 6rem; }
 .pt-2 { padding-top: .5rem; }
+.pt-3 { padding-top: .75rem; }
 .pt-4 { padding-top: 1rem; }
 .pb-2 { padding-bottom: .5rem; }
 .pb-4 { padding-bottom: 1rem; }
diff --git a/plugins/board-resources/src/components/popups/EditMember.svelte b/plugins/board-resources/src/components/popups/EditMember.svelte
index 8d11d6c94e..f4c0b20834 100644
--- a/plugins/board-resources/src/components/popups/EditMember.svelte
+++ b/plugins/board-resources/src/components/popups/EditMember.svelte
@@ -1,36 +1,26 @@
 <script lang="ts">
-  import { Employee, formatName } from '@anticrm/contact'
-  import { getFirstName, getLastName } from '@anticrm/contact'
+  import type { Employee } from '@anticrm/contact'
   import type { IntlString } from '@anticrm/platform'
   import { ActionIcon, IconClose, Label } from '@anticrm/ui'
+  import { ContactPresenter } from '@anticrm/contact-resources'
 
   export let member: Employee
   export let menuItems: { title: IntlString; handler: () => void }[][]
   export let onClose: () => void
-
-  const firstName = getFirstName(member.name)
-  const lastName = getLastName(member.name)
-  const nameLabel = `${firstName?.[0] ?? ''}${lastName?.[0] ?? ''}`.toUpperCase()
-  const formattedName = formatName(member.name)
 </script>
 
-<div class="antiPopup container pb-4 w-85">
-  <div class="close-icon">
+<div class="antiPopup container w-85">
+  <div class="absolute pt-3 pr-3" style:top="0" style:right="0">
     <ActionIcon icon={IconClose} size={'small'} action={onClose} />
   </div>
-  <div class="flex top p-4">
-    <div class="avatar flex-center">
-      <span class="name-label fs-bold">{nameLabel}</span>
-    </div>
-    <div class="fs-title mt-4 ml-4">
-      {formattedName}
-    </div>
+  <div class='flex p-3'>
+    <ContactPresenter value={member} />
   </div>
   {#if menuItems && menuItems.length > 0}
     {#each menuItems as menuSubgroup, i}
       {#each menuSubgroup as menuItem}
         <div
-          class="menu-item"
+          class="menu-item pr-3 pl-3 pt-2 pb-2"
           on:click={() => {
             menuItem.handler()
             onClose()
@@ -40,49 +30,17 @@
         </div>
       {/each}
       {#if i + 1 < menuItems.length}
-        <div class="divisor" />
+        <div class="bottom-divider ml-3 mr-3 mt-2 mb-2" />
       {/if}
     {/each}
   {/if}
 </div>
 
 <style lang="scss">
-  .avatar {
-    width: 6rem;
-    height: 6rem;
-    background-color: var(--popup-bg-hover);
-    border: 1px solid var(--caption-color);
-    border-radius: 3rem;
-  }
-
-  .name-label {
-    font-size: 2rem;
-    color: var(--caption-color);
-  }
-
-  .top {
-    background-image: linear-gradient(to bottom, var(--popup-bg-hover) 0%, var(--popup-bg-hover) 100%);
-    background-repeat: no-repeat;
-    background-size: 100% 5rem;
-  }
-
   .menu-item {
-    padding: 0.5rem 1rem;
-
     &:hover {
       cursor: pointer;
       background-color: var(--popup-bg-hover);
     }
   }
-
-  .divisor {
-    margin: 0.5rem 1rem;
-    border-bottom: 1px solid var(--divider-color);
-  }
-
-  .close-icon {
-    position: absolute;
-    top: 0.75rem;
-    right: 0.75rem;
-  }
 </style>