diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index da83d3700b..d4ae85c3f0 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -25,14 +25,17 @@
   --primary-button-outline: rgba(87, 132, 255, .3);
   --primary-button-border: rgba(255, 255, 255, .09);
 
-  --image-primary-button-color: #000;
-  --image-primary-button-bg: #fff;
-  --image-primary-button-border: rgba(255, 255, 255, .2);
-  --image-button-color: #fff;
-  --image-button-bg: rgba(255, 255, 255, .17);
-  --image-button-border: rgba(255, 255, 255, .14);
-  --image-button-bg-hover: rgba(255, 255, 255, .22);
-  --image-button-border-hover: rgba(255, 255, 255, .19);
+  --trans-primary-button-color: #fff;
+  --trans-primary-button-bg: rgba(255, 255, 255, .2);
+  --trans-primary-button-border: rgba(255, 255, 255, .2);
+  --trans-primary-button-bg-hovered: rgba(255, 255, 255, .25);
+  --trans-primary-button-border-hovered: rgba(255, 255, 255, .25);
+  
+  --trans-button-color: #fff;
+  --trans-button-bg: transparent;
+  --trans-button-border: rgba(255, 255, 255, .2);
+  --trans-button-bg-hovered: rgba(255, 255, 255, .05);
+  --trans-button-border-hovered: rgba(255, 255, 255, .25);
 
   --system-error-color: #EE7A7A;
   --system-error-60-color: rgba(238, 122, 122, .6); // #EE7A7A / 60%
diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte
index 9994b4f14f..94f4016488 100644
--- a/packages/ui/src/components/Button.svelte
+++ b/packages/ui/src/components/Button.svelte
@@ -13,20 +13,32 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import type { IntlString } from '@anticrm/platform'
+  import type { IntlString, Asset } from '@anticrm/platform'
+  import type { AnySvelteComponent } from '@anticrm/ui'
   import Spinner from './Spinner.svelte'
   import Label from './Label.svelte'
+  import Icon from './Icon.svelte'
 
   export let label: IntlString
   export let primary: boolean = false
   export let size: 'small' | 'medium' = 'medium'
+  export let icon: Asset | AnySvelteComponent | undefined
   export let disabled: boolean = false
   export let loading: boolean = false
-  export let onImage: boolean = false
+  export let transparent: boolean = false
   export let width: string | undefined = undefined
 </script>
 
-<button class="button {size}" class:primary class:onImage disabled={disabled || loading} style={width ? 'width: ' + width : ''} on:click>
+<button class="button {size}" class:primary class:transparent disabled={disabled || loading} style={width ? 'width: ' + width : ''} on:click>
+  {#if icon}
+    <div class="icon">
+      {#if typeof (icon) === 'string'}
+        <Icon {icon} size={'small'}/>
+      {:else}
+        <svelte:component this={icon} size={'small'} />
+      {/if}
+    </div>
+  {/if}
   {#if loading}
     <Spinner />
   {:else}
@@ -45,6 +57,12 @@
     border: 1px solid var(--theme-button-border-enabled);
     border-radius: 0.75rem;
 
+    .icon {
+      margin-right: .375rem;
+      transform-origin: center center;
+      transform: scale(.75);
+    }
+
     &:hover {
       background-color: var(--theme-button-bg-hovered);
       border-color: var(--theme-button-border-hovered);
@@ -92,38 +110,59 @@
     }
   }
 
-  .onImage {
+  .transparent {
     padding: 0 1.25rem;
-    color: var(--image-button-color);
-    background-color: var(--image-button-bg);
-    border-color: var(--image-button-border);
+    font-weight: 500;
     border-radius: .5rem;
-    backdrop-filter: blur(3px);
-
-    .primary {
-      color: var(--image-primary-button-color);
-      background-color: var(--image-primary-button-bg);
-      border-color: var(--image-button-primary-border);
-    }
+    color: var(--trans-button-color);
+    background-color: var(--trans-button-bg);
+    border-color: var(--trans-button-border);
 
     &:hover {
-      background-color: var(--image-button-bg-hover);
-      border-color: var(--image-button-border-hover);
+      background-color: var(--trans-button-bg-hovered);
+      border-color: var(--trans-button-border-hovered);
       box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
     }
     &:focus {
-      background-color: var(--image-button-bg-hover);
-      border-color: var(--image-button-border-hover);
+      background-color: var(--trans-button-bg-hovered);
+      border-color: var(--primary-button-focused-border);
       box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
     }
     &:active {
-      background-color: var(--image-button-bg);
-      border-color: var(--image-button-border);
+      background-color: var(--trans-button-bg);
+      border-color: var(--trans-button-border);
       box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
     }
     &:disabled {
-      background-color: var(--image-button-bg);
-      border-color: var(--image-button-border);
+      background-color: var(--trans-button-bg);
+      border-color: var(--trans-button-border);
+    }
+
+    &.primary {
+      color: var(--trans-primary-button-color);
+      background-color: var(--trans-primary-button-bg);
+      border-color: var(--trans-primary-button-border);
+      backdrop-filter: blur(3px);
+
+      &:hover {
+        background-color: var(--trans-primary-button-bg-hovered);
+        border-color: var(--trans-primary-button-border-hovered);
+        box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
+      }
+      &:focus {
+        background-color: var(--trans-primary-button-bg-hovered);
+        border-color: var(--primary-button-focused-border);
+        box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
+      }
+      &:active {
+        background-color: var(--trans-primary-button-bg);
+        border-color: var(--trans-primary-button-border);
+        box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
+      }
+      &:disabled {
+        background-color: var(--trans-primary-button-bg);
+        border-color: var(--trans-primary-button-border);
+      }
     }
   }
 </style>
diff --git a/plugins/recruit-resources/src/components/DialogHeader.svelte b/plugins/recruit-resources/src/components/DialogHeader.svelte
index f3ab45a150..37b0ff7e60 100644
--- a/plugins/recruit-resources/src/components/DialogHeader.svelte
+++ b/plugins/recruit-resources/src/components/DialogHeader.svelte
@@ -19,7 +19,6 @@
   import login from '@anticrm/login'
 
   import { EditBox, Button, Label } from '@anticrm/ui'
-  import ImageButton from './ImageButton.svelte'
   import FileUpload from './icons/FileUpload.svelte'
 
   let dragover = false
@@ -49,22 +48,21 @@
     on:dragover|preventDefault={ ()=>{} }
     on:dragleave={ () => { dragover = false } }
     on:drop|preventDefault|stopPropagation={drop}>
-  <div class="flex-col-center">
+  <div class="main-content">
     <div class="avatar"></div>
     <div class="name"><EditBox placeholder="John"/>&nbsp;<EditBox placeholder="Appleseed"/></div>
     <div class="title">Candidate title</div>
     <!-- <input type="file" name="file" id="file"/> -->
   </div>
-  <div class="resume-btn">
-    <ImageButton label={'Upload resume'} icon={FileUpload} />
+  <div class="lb-content">
+    <Button label={'Upload resume'} icon={FileUpload} size={'small'} transparent primary />
   </div>
-  <div class="save-btn">
-    <Button label={'Save'} size={'small'} onImage />
+  <div class="rt-content">
+    <Button label={'Save'} size={'small'} transparent />
   </div>
 </div>
 
 <style lang="scss">
-
   .header {
     position: relative;
     display: flex;
@@ -83,36 +81,46 @@
       border: 1px solid red;
     }
 
-    .avatar {
-      width: 5rem;
-      height: 5rem;
-      border-radius: 50%;
-      background-color: #C4C4C4;
-    }
-    .name {
-      margin-top: .625rem;
-      font-size: 1rem;
-      font-weight: 500;
-      line-height: 150%;
-      color: #fff;
-    }
-    .title {
-      margin-top: .25rem;
-      font-size: .75rem;
-      font-weight: 500;
-      color: rgba(255, 255, 255, .8);
+    .main-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .avatar {
+        width: 5rem;
+        height: 5rem;
+        border-radius: 50%;
+        background-color: #C4C4C4;
+      }
+      .name {
+        margin-top: .625rem;
+        font-size: 1rem;
+        font-weight: 500;
+        line-height: 150%;
+        color: #fff;
+      }
+      .title {
+        margin-top: .25rem;
+        font-size: .75rem;
+        font-weight: 500;
+        color: rgba(255, 255, 255, .8);
+      }
     }
 
-    .resume-btn {
+    .lb-content {
       position: absolute;
       left: 1rem;
       bottom: 1rem;
     }
-    .save-btn {
+    .rb-content {
+      position: absolute;
+      right: 1rem;
+      bottom: 1rem;
+    }
+    .rt-content {
       position: absolute;
       top: 1rem;
       right: 1rem;
     }
   }
-
 </style>