diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 64fa22d99b..406475182b 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -76,7 +76,7 @@
   --theme-avatar-bg: #E0DAD5;
   --theme-avatar-hover: radial-gradient(86.62% 86.62% at 50% 13.38%, rgba(196, 196, 204, 0.4) 0%, rgba(137, 140, 150, 0.4) 100%);
   --theme-avatar-border: rgba(255, 255, 255, .1);
-  --theme-avatar-shadow: drop-shadow(0px 0px 10px rgba(46, 41, 40, .8)) drop-shadow(0px 10px 54px rgba(125, 112, 105, 1));
+  --theme-avatar-shadow: drop-shadow(0px 14px 44px rgba(74, 67, 64, .8));
 
   --theme-bg-accent-color: rgba(255, 255, 255, .03);
   --theme-bg-accent-hover: rgba(255, 255, 255, .06);
@@ -140,7 +140,7 @@
   --theme-avatar-bg: #E0DAD5;
   --theme-avatar-hover: radial-gradient(86.62% 86.62% at 50% 13.38%, rgba(196, 196, 204, 0.4) 0%, rgba(137, 140, 150, 0.4) 100%);
   --theme-avatar-border: rgba(255, 255, 255, .1);
-  --theme-avatar-shadow: drop-shadow(0px 0px 10px rgba(46, 41, 40, .8)) drop-shadow(0px 10px 54px rgba(125, 112, 105, 1));
+  --theme-avatar-shadow: drop-shadow(0px 14px 44px rgba(74, 67, 64, .8));
 
   --theme-bg-accent-color: rgba(255, 255, 255, .03);
   --theme-bg-accent-hover: rgba(255, 255, 255, .06);
@@ -203,7 +203,7 @@
   --theme-avatar-bg: #C4C4C4;
   --theme-avatar-hover: #EEEDED;
   --theme-avatar-border: rgba(255, 255, 255, .7);
-  --theme-avatar-shadow: drop-shadow(0px 0px 10px rgba(46, 41, 40, .4)) drop-shadow(0px 10px 54px rgba(125, 112, 105, 1));
+  --theme-avatar-shadow: drop-shadow(0px 14px 44px rgba(74, 67, 64, .8));
 
   --theme-bg-accent-color: rgba(0, 0, 0, .03);
   --theme-bg-accent-hover: rgba(0, 0, 0, .05);
diff --git a/packages/ui/src/components/CircleButton.svelte b/packages/ui/src/components/CircleButton.svelte
index b89ce0f82c..8a62492f33 100644
--- a/packages/ui/src/components/CircleButton.svelte
+++ b/packages/ui/src/components/CircleButton.svelte
@@ -19,7 +19,7 @@
   import Icon from './Icon.svelte'
 
   export let icon: Asset | AnySvelteComponent
-  export let size: 'small' | 'medium' = 'medium'
+  export let size: 'small' | 'medium' | 'large' = 'large'
 </script>
 
 <div class="icon-button icon-{size}" on:click>
@@ -55,6 +55,10 @@
     height: 1.5rem;
   }
   .icon-medium {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+  .icon-large {
     width: 2rem;
     height: 2rem;
   }
diff --git a/packages/ui/src/components/TooltipInstance.svelte b/packages/ui/src/components/TooltipInstance.svelte
index 398a3f308b..b20c800558 100644
--- a/packages/ui/src/components/TooltipInstance.svelte
+++ b/packages/ui/src/components/TooltipInstance.svelte
@@ -80,7 +80,7 @@
     border-radius: .5rem;
     user-select: none;
     text-align: center;
-    z-index: 10;
+    z-index: 1000;
 
     &::after {
       content: '';
diff --git a/plugins/recruit-resources/src/components/CreateCandidate.svelte b/plugins/recruit-resources/src/components/CreateCandidate.svelte
index 1efbf53999..106d1500b7 100644
--- a/plugins/recruit-resources/src/components/CreateCandidate.svelte
+++ b/plugins/recruit-resources/src/components/CreateCandidate.svelte
@@ -144,17 +144,30 @@
       on:close={() => { dispatch('close') }}>
 
   <div class="flex-row-center">
-    <div class="avatar" on:click={() => { (kl < 3) ? kl++ : kl = 0 }}>
-      <div class="border"/>
-      {#if kl === 0}
-        <Avatar />
-      {:else if kl === 1}
-        <img src={Girl} alt="Avatar" />
-      {:else if kl === 2}
-        <img src={Elon} alt="Avatar" />
-      {:else}
-        <img src={Bond} alt="Avatar" />
-      {/if}
+    <div class="avatar-container">
+      <div class="flex-center avatar-shadow">
+        {#if kl === 0}
+          <div class="bg-avatar"><Avatar /></div>
+        {:else if kl === 1}
+          <div class="bg-avatar"><img src={Girl} alt="Avatar" /></div>
+        {:else if kl === 2}
+          <div class="bg-avatar"><img src={Elon} alt="Avatar" /></div>
+        {:else}
+          <div class="bg-avatar"><img src={Bond} alt="Avatar" /></div>
+        {/if}
+      </div>
+      <div class="flex-center avatar" on:click={() => { (kl < 3) ? kl++ : kl = 0 }}>
+        <div class="border"/>
+        {#if kl === 0}
+          <Avatar />
+        {:else if kl === 1}
+          <img src={Girl} alt="Avatar" />
+        {:else if kl === 2}
+          <img src={Elon} alt="Avatar" />
+        {:else}
+          <img src={Bond} alt="Avatar" />
+        {/if}
+      </div>
     </div>
 
     <div class="flex-col">
@@ -190,16 +203,30 @@
 <style lang="scss">
   @import '../../../../packages/theme/styles/mixins.scss';
 
-  .avatar {
+  .avatar-container {
     flex-shrink: 0;
-    overflow: hidden;
     position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
     margin-right: 1rem;
     width: 6rem;
     height: 6rem;
+    user-select: none;
+  }
+  .avatar-shadow {
+    position: absolute;
+    width: 6rem;
+    height: 6rem;
+
+    .bg-avatar {
+      transform: scale(1.1);
+      filter: blur(10px);
+      opacity: .75;
+    }
+  }
+  .avatar {
+    overflow: hidden;
+    position: absolute;
+    width: 6rem;
+    height: 6rem;
     border-radius: 50%;
     filter: var(--theme-avatar-shadow);
     cursor: pointer;
diff --git a/plugins/workbench-resources/src/components/EditStatuses.svelte b/plugins/workbench-resources/src/components/EditStatuses.svelte
index 5062e42351..c4962305dd 100644
--- a/plugins/workbench-resources/src/components/EditStatuses.svelte
+++ b/plugins/workbench-resources/src/components/EditStatuses.svelte
@@ -16,8 +16,12 @@
 
 <script lang="ts">
   import type { Ref, SpaceWithStates, State } from '@anticrm/core'
-  import { Dialog } from '@anticrm/ui'
+  import { CircleButton, IconAdd, Label, IconMoreH, ActionIcon } from '@anticrm/ui'
   import { createQuery, getClient } from '@anticrm/presentation'
+  import { createEventDispatcher } from 'svelte'
+  import Close from './icons/Close.svelte'
+  import Circles from './icons/Circles.svelte'
+  import Status from './icons/Status.svelte'
 
   import core from '@anticrm/core'
 
@@ -86,41 +90,128 @@
       }
     })
   }
+
+  const dispatch = createEventDispatcher()
 </script>
 
-
-<Dialog label="Edit Statuses">
-  {#each states as state, i}
-    {#if state}
-    <div bind:this={elements[i]} class="flex-center states" style="background-color: {state.color}; height: 60px" draggable={true}
-      on:dragover|preventDefault={(ev) => {
-        dragover(ev, i)
-      }}
-      on:drop|preventDefault={() => {
-        console.log('DROP')
-        move(i)
-      }}
-      on:dragstart={() => {
-        dragStateInitialPosition = selected = i
-        dragState = states[i]._id
-      }}
-      on:dragend={() => {
-        console.log('DRAGEND')
-        selected = undefined
-      }}
-    >
-      {state.title}
+<div class="flex-col floatdialog-container">
+  <div class="flex-between header">
+    <div class="flex-grow flex-col">
+      <div class="flex-row-center">
+        <div class="icon"><Status size={'small'} /></div>
+        <span class="overflow-label title">Manage application statuses within vacancy</span>
+      </div>
+      <div class="overflow-label subtitle">Vacancy name</div>
     </div>
-    {/if}
-  {/each}
-</Dialog>
+    <div class="tool" on:click={() => dispatch('close')}><Close size={'small'} /></div>
+  </div>
+  <div class="content">
+    <div class="flex-between states-header">
+      <Label label={'ACTIVE STATUSES'} />
+      <CircleButton icon={IconAdd} size={'medium'} />
+    </div>
+    {#each states as state, i}
+      {#if state}
+        <div bind:this={elements[i]} class="flex-between states" draggable={true}
+          on:dragover|preventDefault={(ev) => {
+            dragover(ev, i)
+          }}
+          on:drop|preventDefault={() => {
+            console.log('DROP')
+            move(i)
+          }}
+          on:dragstart={() => {
+            dragStateInitialPosition = selected = i
+            dragState = states[i]._id
+          }}
+          on:dragend={() => {
+            console.log('DRAGEND')
+            selected = undefined
+          }}
+        >
+          <div class="bar"><Circles /></div>
+          <div class="color" style="background-color: {state.color}" />
+          <div class="flex-grow caption-color">{state.title}</div>
+          <div class="tool"><ActionIcon icon={IconMoreH} label={'More...'} size={'medium'} /></div>
+        </div>
+      {/if}
+    {/each}
+  </div>
+</div>
 
 <style lang="scss">
-  .states {
-    padding: .25rem .5rem;
-    color: #fff;
-    border-radius: .5rem;
-    user-select: none;
-    cursor: grabbing;
+  .floatdialog-container {
+    margin: 2rem 1rem 1.25rem 0;
+    height: calc(100% - 3.25rem);
+    background-color: rgba(31, 31, 37, .8);
+    border-radius: 1.25rem;
+    box-shadow: 0px 44px 154px rgba(0, 0, 0, .75);
+    backdrop-filter: blur(30px);
+
+    .header {
+      padding: 0 2rem 0 2.5rem;
+      height: 4.5rem;
+      min-height: 4.5rem;
+
+      .icon {
+        margin-right: .5rem;
+        opacity: .6;
+      }
+      .title {
+        font-weight: 500;
+        font-size: 1rem;
+        color: var(--theme-caption-color);
+      }
+      .subtitle {
+        font-size: .75rem;
+        color: var(--theme-content-dark-color);
+      }
+      .tool {
+        margin-left: 2.5rem;
+        cursor: pointer;
+      }
+    }
+
+    .content {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      padding: 1rem 2.5rem;
+    }
   }
+
+  .states {
+    padding: .625rem 1rem;
+    color: #fff;
+    background-color: rgba(67, 67, 72, .3);
+    border: 1px solid var(--theme-bg-accent-color);
+    border-radius: .75rem;
+    user-select: none;
+
+    &-header {
+      margin-bottom: 1rem;
+      font-weight: 600;
+      font-size: .75rem;
+      color: var(--theme-content-trans-color);
+    }
+
+    .bar {
+      margin-right: .375rem;
+      width: .375rem;
+      height: 1rem;
+      opacity: .4;
+      cursor: grabbing;
+    }
+    .color {
+      margin-right: .75rem;
+      width: 1rem;
+      height: 1rem;
+      border-radius: .25rem;
+    }
+    .tool {
+      margin-left: 1rem;
+      cursor: pointer;
+    }
+  }
+  .states + .states { margin-top: .5rem; }
 </style>
diff --git a/plugins/workbench-resources/src/components/icons/Circles.svelte b/plugins/workbench-resources/src/components/icons/Circles.svelte
new file mode 100644
index 0000000000..efc3e643f8
--- /dev/null
+++ b/plugins/workbench-resources/src/components/icons/Circles.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  const fill: string = 'var(--theme-caption-color)'
+</script>
+
+<svg {fill} viewBox="0 0 6 16" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="1" cy="1" r="1"/>
+  <circle cx="4.5" cy="1" r="1"/>
+  <circle cx="1" cy="4.5" r="1"/>
+  <circle cx="4.5" cy="4.5" r="1"/>
+  <circle cx="1" cy="8" r="1"/>
+  <circle cx="4.5" cy="8" r="1"/>
+  <circle cx="1" cy="11.5" r="1"/>
+  <circle cx="4.5" cy="11.5" r="1"/>
+  <circle cx="1" cy="15" r="1"/>
+  <circle cx="4.5" cy="15" r="1"/>
+</svg>
diff --git a/plugins/workbench-resources/src/components/icons/Status.svelte b/plugins/workbench-resources/src/components/icons/Status.svelte
new file mode 100644
index 0000000000..88244863ca
--- /dev/null
+++ b/plugins/workbench-resources/src/components/icons/Status.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} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.4,8c0,3.5-2.9,6.4-6.4,6.4c-3.5,0-6.4-2.9-6.4-6.4c0-3.5,2.9-6.4,6.4-6.4c0.1-0.4,0.3-0.8,0.5-1.2c-0.2,0-0.3,0-0.5,0 C3.8,0.4,0.4,3.8,0.4,8c0,4.2,3.4,7.6,7.6,7.6s7.6-3.4,7.6-7.6c0-0.2,0-0.3,0-0.5C15.2,7.7,14.8,7.9,14.4,8z"/>
+  <circle cx="13" cy="3" r="3"/>
+</svg>