diff --git a/packages/presentation/src/components/Channels.svelte b/packages/presentation/src/components/Channels.svelte
index 72397a02a5..f3590f2b1f 100644
--- a/packages/presentation/src/components/Channels.svelte
+++ b/packages/presentation/src/components/Channels.svelte
@@ -163,6 +163,7 @@
       padding: 1rem;
       top: 2.25rem;
       right: 0;
+      min-width: 100%;
       background-color: var(--theme-button-bg-focused);
       border: 1px solid var(--theme-button-border-enabled);
       border-radius: .75rem;
diff --git a/packages/presentation/src/components/Panel.svelte b/packages/presentation/src/components/Panel.svelte
new file mode 100644
index 0000000000..eb9bb73d51
--- /dev/null
+++ b/packages/presentation/src/components/Panel.svelte
@@ -0,0 +1,178 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 Hardcore Engineering Inc.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+
+<script lang="ts">
+  import type { IntlString, Asset } from '@anticrm/platform'
+  import type { AnySvelteComponent } from '@anticrm/ui'
+  // import { ReferenceInput } from '@anticrm/text-editor'
+  import { IconClose, IconExpand, IconActivity, ScrollBox, Button, Label, Icon } from '@anticrm/ui'
+
+  import { createEventDispatcher } from 'svelte'
+
+  export let label: IntlString
+  export let icon: Asset | AnySvelteComponent
+  export let okAction: () => void
+  export let fullSize: boolean = false
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<div class="overlay"/>
+<div class="dialog-container" class:fullSize>
+
+  <div class="leftSection">
+    <div class="flex-row-center header">
+      <div class="icon">
+        {#if typeof (icon) === 'string'}
+          <Icon {icon} size={'small'} />
+        {:else}
+          <svelte:component this={icon} size={'small'} />
+        {/if}
+      </div>
+      <div class="title"><Label {label} /></div>
+    </div>
+    <div class="content">
+      <ScrollBox vertical stretch><slot /></ScrollBox>
+    </div>
+  </div>
+
+  <div class="rightSection">
+    <div class="flex-row-center header">
+      <div class="icon"><IconActivity size={'small'} /></div>
+      <div class="title">Activity</div>
+    </div>
+    <div class="content">
+      <ScrollBox vertical stretch></ScrollBox>
+    </div>
+  </div>
+
+  <div class="tools">
+    <div class="tool" on:click={() => { fullSize = !fullSize }}><div class="icon"><IconExpand size={'small'} /></div></div>
+    <div class="tool" on:click={() => { dispatch('close') }}><div class="icon"><IconClose size={'small'} /></div></div>
+  </div>
+</div>
+
+<style lang="scss">
+  .dialog-container {
+    overflow: hidden;
+    position: fixed;
+    top: 1.5rem;
+    bottom: 1.5rem;
+    left: 50%;
+    right: 1.5rem;
+    // transition: all .2s;
+
+    display: flex;
+    flex-direction: column;
+    height: calc(100% - 3rem);
+    background: rgba(31, 31, 37, 0.7);
+    border-radius: 1.25rem;
+    box-shadow: 0px 44px 154px rgba(0, 0, 0, .75);
+    backdrop-filter: blur(30px);
+
+    .header {
+      flex-shrink: 0;
+      padding: 0 2.5rem;
+      height: 4.5rem;
+      border-bottom: 1px solid var(--theme-card-divider);
+
+      .title {
+        flex-grow: 1;
+        margin-left: .5rem;
+        font-weight: 500;
+        font-size: 1rem;
+        color: var(--theme-caption-color);
+        user-select: none;
+      }
+    }
+
+    .footer {
+      flex-shrink: 0;
+      display: grid;
+      grid-auto-flow: column;
+      direction: rtl;
+      justify-content: start;
+      align-items: center;
+      column-gap: .75rem;
+      padding: 0 2.5rem;
+      height: 6rem;
+      mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
+      overflow: hidden;
+    }
+  }
+
+  .leftSection, .rightSection {
+    flex-basis: 50%;
+
+    display: flex;
+    flex-direction: column;
+  }
+  .rightSection {
+    background-color: var(--theme-bg-accent-color);
+    .header { border-bottom: none; }
+    .content { background-color: transparent; }
+  }
+
+  .content {
+    flex-shrink: 0;
+    flex-grow: 1;
+    padding: 0 2.5rem;
+    height: max-content;
+  }
+
+  .fullSize {
+    flex-direction: row;
+    left: 1.5rem;
+
+    .leftSection {
+      border-right: 1px solid var(--theme-bg-accent-hover);
+    }
+    .rightSection {
+      background-color: transparent;
+      .header { border-bottom: 1px solid var(--theme-card-divider); }
+      .content { background-color: var(--theme-bg-accent-color); }
+    }
+  }
+
+  .tools {
+    position: absolute;
+    display: flex;
+    top: 1.75rem;
+    right: 2rem;
+
+    .tool {
+      margin-left: .75rem;
+      opacity: .4;
+      cursor: pointer;
+
+      .icon {
+        transform-origin: center center;
+        transform: scale(.75);
+      }
+      &:hover { opacity: 1; }
+    }
+  }
+
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--theme-menu-color);
+    opacity: .7;
+  }
+</style>
\ No newline at end of file
diff --git a/packages/presentation/src/index.ts b/packages/presentation/src/index.ts
index d5cccbc911..d44aed3cf1 100644
--- a/packages/presentation/src/index.ts
+++ b/packages/presentation/src/index.ts
@@ -23,3 +23,4 @@ export { default as MessageViewer } from './components/MessageViewer.svelte'
 export { default as AttributeEditor } from './components/AttributeEditor.svelte'
 export { default as Card } from './components/Card.svelte'
 export { default as Channels } from './components/Channels.svelte'
+export { default as Panel } from './components/Panel.svelte'
diff --git a/packages/ui/src/components/PopupInstance.svelte b/packages/ui/src/components/PopupInstance.svelte
index 7aca119c82..60d6eee5f4 100644
--- a/packages/ui/src/components/PopupInstance.svelte
+++ b/packages/ui/src/components/PopupInstance.svelte
@@ -57,6 +57,11 @@ $: {
         modalHTML.style.top = '4rem'
         modalHTML.style.bottom = '4rem'
         modalHTML.style.right = '4rem'
+      } else if (element === 'full') {
+        modalHTML.style.top = '0'
+        modalHTML.style.bottom = '0'
+        modalHTML.style.left = '0'
+        modalHTML.style.right = '0'
       }
     } else {
       modalHTML.style.top = '50%'
diff --git a/packages/ui/src/components/icons/Activity.svelte b/packages/ui/src/components/icons/Activity.svelte
new file mode 100644
index 0000000000..2bb24a2e7f
--- /dev/null
+++ b/packages/ui/src/components/icons/Activity.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'var(--theme-caption-color)'
+</script>
+
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+  <path d="M8.4,8.5C8.2,8.4,8,8.3,7.9,8.3c-0.2,0-0.4,0.1-0.5,0.3l-2.9,3.8c-0.2,0.3-0.2,0.7,0.1,1c0.1,0.1,0.3,0.1,0.4,0.1 c0.2,0,0.4-0.1,0.6-0.3L8.1,10l2.8,2.2c0.1,0.1,0.3,0.2,0.5,0.1c0.2,0,0.4-0.1,0.5-0.3l2.8-3.7c0.2-0.3,0.2-0.7-0.1-1 c-0.3-0.2-0.7-0.2-1,0.1l-2.4,3.1L8.4,8.5z"/>
+  <path d="M17.4,0c-1.4,0-2.6,1.2-2.6,2.6c0,1.4,1.2,2.6,2.6,2.6C18.8,5.1,20,4,20,2.5C20,1.1,18.8,0,17.4,0z M17.4,3.7 c-0.6,0-1.2-0.5-1.2-1.2c0-0.6,0.5-1.2,1.2-1.2c0.6,0,1.2,0.5,1.2,1.2C18.6,3.2,18.1,3.7,17.4,3.7z"/>
+  <path d="M18.5,6.8c-0.4,0-0.7,0.3-0.7,0.7v6.8c0,2.6-1.6,4.3-4,4.3H5.4c-2.5,0-4-1.6-4-4.3V6.5c0-2.6,1.6-4.3,4-4.3h7.1 c0.4,0,0.7-0.3,0.7-0.7s-0.3-0.7-0.7-0.7H5.4C2.2,0.8,0,3.1,0,6.5v7.9C0,17.7,2.2,20,5.4,20h8.4c3.3,0,5.4-2.3,5.4-5.7V7.5 C19.2,7.1,18.9,6.8,18.5,6.8z"/>
+</svg>
diff --git a/packages/ui/src/components/icons/Close.svelte b/packages/ui/src/components/icons/Close.svelte
index 1897290eed..d4cc4bcaaf 100644
--- a/packages/ui/src/components/icons/Close.svelte
+++ b/packages/ui/src/components/icons/Close.svelte
@@ -3,6 +3,6 @@
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg">
-  <path d="M8.7,8l5.6-5.6c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0L8,7.3L2.4,1.6c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7L7.3,8l-5.6,5.6 c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1L8,8.7l5.6,5.6c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1 c0.2-0.2,0.2-0.5,0-0.7L8.7,8z"/>
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.9,8l6.9-6.9c0.2-0.2,0.2-0.6,0-0.9s-0.6-0.2-0.9,0L8,7.1L1.1,0.2c-0.2-0.2-0.6-0.2-0.9,0s-0.2,0.6,0,0.9L7.1,8l-6.9,6.9 c-0.2,0.2-0.2,0.6,0,0.9C0.3,15.9,0.5,16,0.6,16s0.3-0.1,0.4-0.2L8,8.9l6.9,6.9c0.1,0.1,0.3,0.2,0.4,0.2c0.2,0,0.3-0.1,0.4-0.2 c0.2-0.2,0.2-0.6,0-0.9L8.9,8z"/>
 </svg>
diff --git a/packages/ui/src/components/icons/Expand.svelte b/packages/ui/src/components/icons/Expand.svelte
new file mode 100644
index 0000000000..8f677fdd1c
--- /dev/null
+++ b/packages/ui/src/components/icons/Expand.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'var(--theme-caption-color)'
+</script>
+
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path d="M6.9,14.8H2.1l4.7-4.7C7,9.8,7,9.4,6.8,9.2C6.6,9,6.2,9,5.9,9.2l-4.7,4.7V9.1c0-0.3-0.3-0.6-0.6-0.6 S0,8.7,0,9.1v6.3c0,0,0,0,0,0c0,0.1,0,0.2,0,0.2c0,0.1,0.1,0.1,0.1,0.1c0,0,0,0,0,0.1c0,0,0.1,0,0.1,0.1c0,0,0.1,0.1,0.1,0.1 c0.1,0,0.2,0,0.2,0c0,0,0,0,0,0h6.3c0.3,0,0.6-0.3,0.6-0.6C7.6,15,7.3,14.8,6.9,14.8z"/>
+  <path d="M16,0.4c0,0,0-0.1-0.1-0.1c0,0,0-0.1-0.1-0.1c0,0,0,0-0.1,0c0,0-0.1-0.1-0.1-0.1c-0.1,0-0.2,0-0.2,0 c0,0,0,0,0,0H9.1C8.7,0,8.4,0.3,8.4,0.6s0.3,0.6,0.6,0.6h4.8L9.2,5.9C9,6.2,9,6.6,9.2,6.8C9.3,6.9,9.5,7,9.6,7s0.3-0.1,0.4-0.2 l4.7-4.7v4.8c0,0.3,0.3,0.6,0.6,0.6S16,7.3,16,6.9V0.6C16,0.5,16,0.5,16,0.4z"/>
+</svg>
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 88e30e6221..a1085931af 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -66,6 +66,8 @@ export { default as IconMoreH } from './components/icons/MoreH.svelte'
 export { default as IconFile } from './components/icons/File.svelte'
 export { default as IconAttachment } from './components/icons/Attachment.svelte'
 export { default as IconThread } from './components/icons/Thread.svelte'
+export { default as IconExpand } from './components/icons/Expand.svelte'
+export { default as IconActivity } from './components/icons/Activity.svelte'
 
 export * from './utils'
 
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index 265b5109c4..767f00a728 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -54,7 +54,7 @@ export interface Tab {
 
 export type TabModel = Tab[]
 
-export type PopupAlignment = HTMLElement | 'right' | 'float'
+export type PopupAlignment = HTMLElement | 'right' | 'float' | 'full'
 
 export type TooltipAligment = 'top' | 'bottom' | 'left' | 'right'
 
diff --git a/plugins/contact-resources/src/components/PersonPresenter.svelte b/plugins/contact-resources/src/components/PersonPresenter.svelte
index 3621e9ae40..c57089e736 100644
--- a/plugins/contact-resources/src/components/PersonPresenter.svelte
+++ b/plugins/contact-resources/src/components/PersonPresenter.svelte
@@ -29,7 +29,7 @@ async function onClick() {
   const clazz = hierarchy.getClass(value._class)
   const editorMixin = hierarchy.as(clazz, view.mixin.ObjectEditor)
   const editor = await getResource(editorMixin.editor) 
-  showPopup(editor, { object: value }, 'float')
+  showPopup(editor, { object: value }, 'full')
 }
 
 </script>
diff --git a/plugins/recruit-resources/src/components/EditCandidate.svelte b/plugins/recruit-resources/src/components/EditCandidate.svelte
index 15642a0309..937a942d38 100644
--- a/plugins/recruit-resources/src/components/EditCandidate.svelte
+++ b/plugins/recruit-resources/src/components/EditCandidate.svelte
@@ -17,9 +17,10 @@
   import { createEventDispatcher } from 'svelte'
   import type { Ref, Space, Doc } from '@anticrm/core'
   import { Tabs } from '@anticrm/ui'
-  import { getClient } from '@anticrm/presentation'
+  import { getClient, Panel } from '@anticrm/presentation'
   import type { Candidate } from '@anticrm/recruit'
   import DialogHeader from './DialogHeader.svelte'
+  import Contact from './icons/Contact.svelte'
 
   import chunter from '@anticrm/chunter'
   
@@ -97,28 +98,32 @@
 
 </script>
 
-<div class="container">
+<!-- <div class="container">
   <DialogHeader {space} {object} {newValue} {resume} on:save={ save }/>
   <div class="tabs-container">
     <Tabs model={tabModel}/>
   </div>
-</div>
+</div> -->
+
+<Panel icon={Contact} label={object.firstName + ' ' + object.lastName} on:save={ save } on:close={() => { dispatch('close') }}>
+
+</Panel>
 
 <style lang="scss">
-  .container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background-color: var(--theme-bg-color);
-    border-radius: 1.25rem;
-    box-shadow: 0px 3.125rem 7.5rem rgba(0, 0, 0, .4);
+  // .container {
+  //   display: flex;
+  //   flex-direction: column;
+  //   height: 100%;
+  //   background-color: var(--theme-bg-color);
+  //   border-radius: 1.25rem;
+  //   box-shadow: 0px 3.125rem 7.5rem rgba(0, 0, 0, .4);
 
-    .tabs-container {
-      flex-grow: 1;
-      display: flex;
-      flex-direction: column;
-      height: fit-content;
-      padding: 0 2.5rem 2.5rem;
-    }
-  }
+  //   .tabs-container {
+  //     flex-grow: 1;
+  //     display: flex;
+  //     flex-direction: column;
+  //     height: fit-content;
+  //     padding: 0 2.5rem 2.5rem;
+  //   }
+  // }
 </style>
diff --git a/plugins/recruit-resources/src/components/icons/Contact.svelte b/plugins/recruit-resources/src/components/icons/Contact.svelte
new file mode 100644
index 0000000000..102018834c
--- /dev/null
+++ b/plugins/recruit-resources/src/components/icons/Contact.svelte
@@ -0,0 +1,26 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 Hardcore Engineering Inc.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'var(--theme-caption-color)'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.1,11.7c2.1,0,3.8-1.7,3.8-3.8s-1.7-3.8-3.8-3.8S8.4,5.8,8.4,7.9S10.1,11.7,12.1,11.7z M12.1,5.5 c1.3,0,2.3,1.1,2.3,2.3s-1.1,2.3-2.3,2.3S9.8,9.2,9.8,7.9S10.8,5.5,12.1,5.5z"/>
+  <path d="M12,0C5.4,0,0,5.4,0,12c0,6.6,5.4,12,12,12c6.6,0,12-5.4,12-12C24,5.4,18.6,0,12,0z M12,22.6 C6.2,22.6,1.4,17.8,1.4,12C1.4,6.2,6.2,1.4,12,1.4c5.8,0,10.6,4.7,10.6,10.6C22.6,17.8,17.8,22.6,12,22.6z"/>
+  <path d="M18.6,16.2c-0.3-0.9-0.8-1.6-1.5-2.2c-0.9-0.7-2-1.1-3.1-1.1h-1.5h-0.9h-1.5c-1.1,0-2.2,0.4-3.1,1.1 c-0.7,0.6-1.2,1.3-1.5,2.2l-0.2,0.6c-0.1,0.4,0.1,0.8,0.5,0.9c0.1,0,0.1,0,0.2,0c0.3,0,0.6-0.2,0.7-0.5L7,16.7 c0.2-0.6,0.5-1.1,1-1.5c0.6-0.5,1.4-0.8,2.2-0.8h1.5h0.9h1.5c0.8,0,1.6,0.3,2.2,0.8c0.5,0.4,0.8,0.9,1,1.5l0.2,0.6 c0.1,0.3,0.4,0.5,0.7,0.5c0.1,0,0.1,0,0.2,0c0.4-0.1,0.6-0.5,0.5-0.9L18.6,16.2z"/>
+</svg>