diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index e81693424a..87add078e9 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -65,7 +65,7 @@
   --theme-menu-divider: rgba(255, 255, 255, .05);
   --theme-scroll-bar: #2C2C34;
   --theme-bg-modal: #2C2B35;
-  --theme-card-bg: rgba(222, 222, 240, .2);
+  --theme-card-bg: #DEDEF0;
   --theme-border-modal: rgba(0, 0, 0, 0.2);
   --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
   --theme-chat-divider: rgb(36, 36, 41);
@@ -121,7 +121,7 @@
   --theme-menu-divider: rgba(255, 255, 255, .05);
   --theme-scroll-bar: #494852;
   --theme-bg-modal: #2C2B35;
-  --theme-card-bg: rgba(222, 222, 240, .2);
+  --theme-card-bg: #DEDEF0;
   --theme-border-modal: rgba(0, 0, 0, 0.2);
   --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
   --theme-chat-divider: rgb(66, 65, 76);
@@ -176,7 +176,7 @@
   --theme-menu-divider: rgba(0, 0, 0, .08);
   --theme-scroll-bar: #CBCBCB;
   --theme-bg-modal: #fff;
-  --theme-card-bg: rgba(255, 255, 255, .4);
+  --theme-card-bg: #DEDEF0;
   --theme-border-modal: rgba(0, 0, 0, 0.2);
   --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
   --theme-chat-divider: rgb(233, 233, 233);
diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss
index d9109c9641..c66ee8a559 100644
--- a/packages/theme/styles/global.scss
+++ b/packages/theme/styles/global.scss
@@ -15,6 +15,7 @@
 
 @import "./_colors.scss";
 @import "./_layouts.scss";
+@import "./mixins.scss";
 
 @font-face {
   font-family: 'IBM Plex Sans';
@@ -65,7 +66,7 @@
 ::-webkit-scrollbar:horizontal {
   height: 6px;
 }
-::-webkit-scrollbar-track {
+::-webkit-scrollbar-track, .panel-container .scroll .scroll::-webkit-scrollbar-track {
   margin: 6px;
   // background-color: var(--theme-scroll-bar);
 }
diff --git a/packages/theme/styles/mixins.scss b/packages/theme/styles/mixins.scss
index 076d3bcf3a..b63f2902d7 100644
--- a/packages/theme/styles/mixins.scss
+++ b/packages/theme/styles/mixins.scss
@@ -1,9 +1,9 @@
 @mixin bg-fullsize {
   position: absolute;
-  top: 0px;
-  left: 0px;
-  min-width: 100%;
-  min-height: 100%;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 
 @mixin bg-layer($color, $opacity) {
diff --git a/packages/ui/src/components/Card.svelte b/packages/ui/src/components/Card.svelte
index 3bc236bcae..3508ccc1af 100644
--- a/packages/ui/src/components/Card.svelte
+++ b/packages/ui/src/components/Card.svelte
@@ -105,6 +105,7 @@
       right: 0;
       background-color: var(--theme-card-bg);
       border-radius: 1.25rem;
+      opacity: .2;
       z-index: -1;
     }
   }
diff --git a/packages/ui/src/components/icons/Attachment.svelte b/packages/ui/src/components/icons/Attachment.svelte
new file mode 100644
index 0000000000..9a27dfa318
--- /dev/null
+++ b/packages/ui/src/components/icons/Attachment.svelte
@@ -0,0 +1,24 @@
+<!--
+// 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 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2.2,8.5l5.9-6.2c1.2-1.3,3.3-1.3,4.5,0c1.2,1.3,1.2,3.5,0,4.8l-6.8,7.2c-0.5,0.5-1.3,0.5-1.8,0 c-0.5-0.5-0.5-1.4,0-1.9l6.8-7.2c0.2-0.3,0.2-0.7,0-1C10.6,4,10.2,4,9.9,4.2l-6.8,7.2c-1,1.1-1,2.8,0,3.8c1,1.1,2.6,1.1,3.6,0 l6.8-7.2c1.7-1.8,1.7-4.8,0-6.7c-1.7-1.8-4.6-1.8-6.3,0L1.3,7.6c-0.2,0.3-0.2,0.7,0,1C1.6,8.8,2,8.8,2.2,8.5z"/>
+</svg>
diff --git a/packages/ui/src/components/icons/Thread.svelte b/packages/ui/src/components/icons/Thread.svelte
new file mode 100644
index 0000000000..a3c40386ea
--- /dev/null
+++ b/packages/ui/src/components/icons/Thread.svelte
@@ -0,0 +1,24 @@
+<!--
+// 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 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8,16c-1.1,0-2.3-0.2-3.4-0.7C4.3,15.1,4,15,3.8,15c-0.2,0-0.6,0.1-0.9,0.2c-0.6,0.2-1.5,0.5-2.1-0.1 S0.5,13.7,0.8,13C0.9,12.7,1,12.4,1,12.2c0-0.2-0.1-0.4-0.2-0.8c-1.4-3-0.7-6.6,1.6-9C3.9,0.8,5.9,0,8,0c2.1,0,4.1,0.8,5.7,2.3 c3.1,3.1,3.1,8.2,0,11.3l0,0C12.1,15.2,10.1,16,8,16z M3.8,13.8c0.4,0,0.9,0.2,1.3,0.3c2.6,1.2,5.7,0.7,7.7-1.3 c2.6-2.6,2.6-6.9,0-9.6c-1.3-1.3-3-2-4.8-2c-1.8,0-3.5,0.7-4.8,2c-2,2-2.5,5.1-1.4,7.6c0.2,0.4,0.3,0.9,0.3,1.3 c0,0.4-0.2,0.9-0.3,1.3c-0.1,0.2-0.3,0.8-0.2,0.8c0.1,0.1,0.6-0.1,0.8-0.2C3,13.9,3.4,13.8,3.8,13.8z M13.2,13.2L13.2,13.2 L13.2,13.2z"/>
+</svg>
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index fd9c6ecef8..792f60b173 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -62,6 +62,8 @@ export { default as IconComments } from './components/icons/Comments.svelte'
 export { default as IconFolder } from './components/icons/Folder.svelte'
 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 * from './utils'
 
diff --git a/plugins/view-resources/src/components/KanbanCard.svelte b/plugins/view-resources/src/components/KanbanCard.svelte
index 97852b528f..4457bda812 100644
--- a/plugins/view-resources/src/components/KanbanCard.svelte
+++ b/plugins/view-resources/src/components/KanbanCard.svelte
@@ -14,8 +14,8 @@
 -->
 
 <script lang="ts">
-  import { UserInfo } from '@anticrm/presentation'
-  import { ActionIcon, Label, IconMoreH, IconFile } from '@anticrm/ui'
+  import { UserInfo, Avatar } from '@anticrm/presentation'
+  import { Icon, Label, IconThread, IconAttachment } from '@anticrm/ui'
 
   interface ICard {
     _id: number
@@ -31,83 +31,132 @@
 </script>
 
 <div class="card-container" {draggable} class:draggable on:dragstart on:dragend>
-  <div class="header">
-    <UserInfo value={{firstName: card.firstName, lastName: card.lastName }} subtitle={'Candidate'} size={'small'} />
-    <ActionIcon icon={IconMoreH} label={'More..'} direction={'left'} />
-  </div>
+  <div class="card-bg" />
   <div class="content">
-    <div class="flex-row-center item">
-      <IconFile size={'large'} />
-      <span>Team Interview</span>
+    <div class="flex-center">
+      <div class="avatar">
+        <Avatar size={'large'} />
+      </div>
     </div>
-    <div class="description">{card.description}</div>
-    <div class="tags">
-      <div class="tag">
-        <IconFile size={'small'} />
-        <span><Label label={'Application'} /></span>
+    <div class="flex-col">
+      <div class="name">{card.firstName} {card.lastName}</div>
+      <div class="city">{card.description}</div>
+      <div class="tags">
+        <div class="tag"><Label label={'Application'} /></div>
+        <div class="tag"><Label label={'Resume'} /></div>
+      </div>
+    </div>
+  </div>
+  <div class="footer">
+    <Avatar size={'small'} />
+    <div class="flex-row-center">
+      <div class="flex-row-center caption-color tool">
+        <span class="icon"><IconAttachment size={'small'} /></span>
+        4
+      </div>
+      <div class="flex-row-center caption-color tool">
+        <span class="icon"><IconThread size={'small'} /></span>
+        5
       </div>
     </div>
   </div>
 </div>
 
 <style lang="scss">
+  @import '../../../../packages/theme/styles/mixins.scss';
+
   .card-container {
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    background-color: var(--theme-button-bg-hovered);
-    border: 1px solid var(--theme-bg-accent-color);
     border-radius: .75rem;
+    overflow: hidden;
     user-select: none;
 
-    .header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: .75rem 1rem;
-      width: 100%;
-      min-height: 3.75rem;
-      background-color: var(--theme-button-bg-focused);
-      border-radius: .75rem .75rem 0 0;
-    }
     .content {
       display: flex;
-      flex-direction: column;
-      align-items: stretch;
-      padding: 1rem;
+      align-items: center;
+      padding: 1.25rem;
 
-      .item {
+      .avatar {
+        position: relative;
+        margin-right: 1rem;
+        width: 5rem;
+        height: 5rem;
+        border-radius: 50%;
+        filter: drop-shadow(0px 24px 94px rgba(50, 53, 47, 1));
+
+        &::after {
+          content: '';
+          @include bg-layer(transparent, .1);
+          border: 2px solid #fff;
+          border-radius: 50%;
+        }
+      }
+
+      .name {
+        margin: .25rem 0;
         font-weight: 500;
         font-size: 1rem;
         color: var(--theme-caption-color);
-        span { margin-left: .5em; }
       }
-      .description {
-        margin-top: .5rem;
+      .city {
+        font-weight: 500;
+        font-size: .75rem;
       }
       .tags {
         display: flex;
-        margin-top: 1rem;
+        margin-top: .5rem;
 
         .tag {
+          position: relative;
           display: flex;
           align-items: center;
-          padding: .5rem .75rem;
-          font-size: .75rem;
+          padding: .375rem .5rem;
+          font-weight: 500;
+          font-size: .625rem;
           text-align: center;
-          background-color: var(--theme-bg-accent-color);
           color: var(--theme-caption-color);
-          border-radius: .5rem;
 
-          span { margin-left: .3em; }
+          &::after {
+            content: '';
+            @include bg-layer(#fff, .04);
+            border-radius: .5rem;
+          }
         }
-        .tag + .tag { margin-left: .75rem; }
+        .tag + .tag { margin-left: .5rem; }
+      }
+    }
+    .footer {
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: .75rem 1.25rem;
+      width: 100%;
+      min-height: 3rem;
+      &::after {
+        content: '';
+        @include bg-layer(#fff, .04);
+      }
+
+      .tool .icon {
+        margin-right: .25rem;
+        opacity: .4;
+      }
+      .tool + .tool {
+        margin-left: .75rem;
       }
     }
 
     &.draggable {
       cursor: grab;
     }
+
+    .card-bg {
+      @include bg-layer(var(--theme-card-bg), .06);
+    }
   }
 
   :global(.card-container + .card-container) { margin-top: .75rem; }