diff --git a/packages/presentation/src/components/Avatar.svelte b/packages/presentation/src/components/Avatar.svelte
index b2c727dd61..477ebd6d86 100644
--- a/packages/presentation/src/components/Avatar.svelte
+++ b/packages/presentation/src/components/Avatar.svelte
@@ -17,15 +17,35 @@
   import chen from '../../img/chen.png'
 
   export let avatar: any = chen
-  export let size: 16 | 24 | 32 | 34 | 36 | 88 = 24
+  export let size: 'x-small' | 'small' | 'medium' | 'large' | 'x-large'
 </script>
 
-<div class="avatar-container" style="width: {size}px; height: {size}px;">
-  <img style="width: {size}px; height: {size}px;" src={avatar} alt={''}/>
+<div class="{size} container">
+  <img class={size} src={avatar} alt={''}/>
 </div>
 
 <style lang="scss">
-  .avatar-container {
+  .x-small {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .small {
+    width: 2rem;
+    height: 2rem;
+  }
+  .medium {
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+  .large {
+    width: 5rem;
+    height: 5rem;
+  }
+  .x-large {
+    width: 10rem;
+    height: 10rem;
+  }
+  .container {
     overflow: hidden;
     border: 50%;
     pointer-events: none;
diff --git a/packages/presentation/src/components/Backlink.svelte b/packages/presentation/src/components/Backlink.svelte
index ea374ca6d4..9ab8f6da9a 100644
--- a/packages/presentation/src/components/Backlink.svelte
+++ b/packages/presentation/src/components/Backlink.svelte
@@ -23,50 +23,39 @@
 
 </script>
 
-<div class="comment-message">
-  <div class="avatar"><Avatar size={36} /></div>
-  <div class="message">
+<div class="flex-nowrap">
+  <div class="avatar"><Avatar size={'medium'} /></div>
+  <div class="flex-col-stretch message">
     <div class="header">Rosamund Chen<span>July 28th</span></div>
     <div class="text"><MessageViewer message={backlink.message} /></div>
   </div>
 </div>
 
 <style lang="scss">
-  .comment-message {
-    display: flex;
-    flex-wrap: nowrap;
+  .avatar {
+    margin-right: 1rem;
+  }
+  .message {
+    margin-right: 1.25rem;
 
-    .avatar {
-      width: 36px;
-      height: 36px;
-      margin-right: 16px;
+    .header {
+      margin-bottom: .25rem;
+      font-weight: 500;
+      font-size: 1rem;
+      line-height: 150%;
+      color: var(--theme-caption-color);
+
+      span {
+        margin-left: .5rem;
+        font-weight: 400;
+        font-size: .875rem;
+        color: var(--theme-content-dark-color);
+      }
     }
-    .message {
-      display: flex;
-      flex-direction: column;
-      align-items: stretch;
-      margin-right: 20px;
 
-      .header {
-        margin-bottom: 4px;
-        font-weight: 500;
-        font-size: 16px;
-        line-height: 150%;
-        color: var(--theme-caption-color);
-
-        span {
-          margin-left: 8px;
-          font-weight: 400;
-          font-size: 14px;
-          color: var(--theme-content-dark-color);
-        }
-      }
-
-      .text {
-        font-size: 14px;
-        line-height: 150%;
-        color: var(--theme-content-color);
-      }
+    .text {
+      line-height: 150%;
+      color: var(--theme-content-color);
     }
   }
 </style>
diff --git a/packages/presentation/src/components/Comment.svelte b/packages/presentation/src/components/Comment.svelte
index 8207895211..546b537069 100644
--- a/packages/presentation/src/components/Comment.svelte
+++ b/packages/presentation/src/components/Comment.svelte
@@ -34,50 +34,39 @@
 
 </script>
 
-<div class="comment-message">
-  <div class="avatar"><Avatar size={36} /></div>
-  <div class="message">
+<div class="flex-nowrap">
+  <div class="avatar"><Avatar size={'medium'} /></div>
+  <div class="flex-col-stretch message">
     <div class="header">{user.firstName} {user.lastName}<span>{message.createDate}</span></div>
     <div class="text">{message.text}</div>
   </div>
 </div>
 
 <style lang="scss">
-  .comment-message {
-    display: flex;
-    flex-wrap: nowrap;
+  .avatar {
+    margin-right: 1rem;
+  }
+  .message {
+    margin-right: 1.25rem;
 
-    .avatar {
-      width: 36px;
-      height: 36px;
-      margin-right: 16px;
+    .header {
+      margin-bottom: .25rem;
+      font-weight: 500;
+      font-size: 1rem;
+      line-height: 150%;
+      color: var(--theme-caption-color);
+
+      span {
+        margin-left: .5rem;
+        font-weight: 400;
+        font-size: .875rem;
+        color: var(--theme-content-dark-color);
+      }
     }
-    .message {
-      display: flex;
-      flex-direction: column;
-      align-items: stretch;
-      margin-right: 20px;
 
-      .header {
-        margin-bottom: 4px;
-        font-weight: 500;
-        font-size: 16px;
-        line-height: 150%;
-        color: var(--theme-caption-color);
-
-        span {
-          margin-left: 8px;
-          font-weight: 400;
-          font-size: 14px;
-          color: var(--theme-content-dark-color);
-        }
-      }
-
-      .text {
-        font-size: 14px;
-        line-height: 150%;
-        color: var(--theme-content-color);
-      }
+    .text {
+      line-height: 150%;
+      color: var(--theme-content-color);
     }
   }
 </style>
diff --git a/packages/presentation/src/components/CommentViewer.svelte b/packages/presentation/src/components/CommentViewer.svelte
index 93bdfa183a..cd5a75a15b 100644
--- a/packages/presentation/src/components/CommentViewer.svelte
+++ b/packages/presentation/src/components/CommentViewer.svelte
@@ -19,7 +19,7 @@
   import Comment from './Comment.svelte'
 </script>
 
-<Grid column={1} rowGap={24}>
+<Grid column={1} rowGap={1.5}>
   <Comment user={{firstName: 'Tim', lastName: 'Ferris'}}
     message={{createDate: Date.now(), text: 'The Dark Lord has Nine. But we have One, mightier than they: the White Rider. Hero  has passed through the fire and the abyss, and they shall fear him. mightier than they: the White Rider. Hero  has passed through the fire and the abyss, and they shall fear him.'}}
   />
diff --git a/packages/presentation/src/components/UserBox.svelte b/packages/presentation/src/components/UserBox.svelte
index e7519ae5df..1fe0086a6e 100644
--- a/packages/presentation/src/components/UserBox.svelte
+++ b/packages/presentation/src/components/UserBox.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import type { IntlString } from '@anticrm/platform'
 
-  import { PopupMenu, Label } from '@anticrm/ui'
+  import { PopupMenu, Label, EditWithIcon, IconSearch } from '@anticrm/ui'
   import Avatar from './Avatar.svelte'
   import UserInfo from './UserInfo.svelte'
   import Add from './icons/Add.svelte'
@@ -40,18 +40,18 @@
   $: query.query(_class, {}, result => { objects = result })
 </script>
 
-<div class="userBox">
+<div class="flex-row-center">
   <PopupMenu bind:show={show}>
     <button
       slot="trigger"
-      class="btn"
+      class="focused-button btn"
       class:selected={show}
       on:click|preventDefault={() => {
         show = !show
       }}
     >
       {#if selected}
-        <Avatar size={34} />
+        <Avatar size={'medium'} />
       {:else}
         <div class="icon">
           {#if show}<Close size={'small'} />{:else}<Add size={'small'} />{/if}
@@ -61,7 +61,7 @@
 
     <div class="header">
       <div class="title"><Label label={title} /></div>
-      <input class="searchBox" type="text" bind:value={search} placeholder="Search..." />
+      <EditWithIcon icon={IconSearch} bind:value={search} placeholder={'Search...'} />
       <div class="caption"><Label label={caption} /></div>
     </div>
 
@@ -70,138 +70,64 @@
         selected = person
         value = person._id
         show = !show
-      }}><UserInfo value={person}/></button>
+      }}><UserInfo size={'medium'} value={person} /></button>
     {/each}
   </PopupMenu>
 
   <div class="selectUser">
     <div class="title"><Label label={title} /></div>
-    <div class="user">
+    <div class="caption-color">
       {#if selected}{selected.firstName + ' ' + selected.lastName}{:else}<Label label={'Not selected'} />{/if}
     </div>
   </div>
 </div>
 
 <style lang="scss">
-  .userBox {
-    display: flex;
-    flex-wrap: nowrap;
+  .btn {
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: 50%;
+    border: none;
+  }
 
-    .btn {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin: 0;
-      padding: 0;
-      width: 36px;
-      height: 36px;
-      background-color: var(--theme-button-bg-focused);
-      border: 1px solid transparent;
-      border-radius: 50%;
-      outline: none;
-      cursor: pointer;
-
-      .icon {
-        width: 16px;
-        height: 16px;
-        opacity: 0.3;
-      }
-
-      &.selected {
-        background-color: var(--theme-button-bg-focused);
-        border: 1px solid var(--theme-bg-accent-color);
-      }
-
-      &:hover {
-        background-color: var(--theme-button-bg-pressed);
-        border: 1px solid var(--theme-bg-accent-color);
-        .icon {
-          opacity: 1;
-        }
-      }
-      &:focus {
-        border: 1px solid var(--primary-button-focused-border);
-        box-shadow: 0 0 0 3px var(--primary-button-outline);
-        .icon {
-          opacity: 1;
-        }
-      }
+  .header {
+    text-align: left;
+    .title {
+      margin-bottom: 1rem;
+      font-weight: 500;
+      color: var(--theme-caption-color);
     }
-
-    .header {
-      text-align: left;
-      .title {
-        margin-bottom: 16px;
-        font-size: 14px;
-        font-weight: 500;
-        color: var(--theme-caption-color);
-      }
-      .searchBox {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        margin: 0;
-        padding: 12px 16px;
-        min-width: 220px;
-        height: 40px;
-        font-family: inherit;
-        font-size: 14px;
-        line-height: 17px;
-        color: var(--theme-caption-color);
-        background-color: var(--theme-bg-accent-color);
-        border: 1px solid var(--theme-bg-accent-hover);
-        border-radius: 12px;
-        outline: none;
-
-        &::placeholder {
-          color: var(--theme-content-trans-color);
-        }
-        &:focus {
-          background-color: var(--theme-bg-focused-color);
-          border-color: var(--theme-bg-focused-border);
-        }
-      }
-      .caption {
-        margin: 16px 0 10px 6px;
-        font-size: 12px;
-        font-weight: 600;
-        text-transform: uppercase;
-        color: var(--theme-content-dark-color);
-      }
+    .caption {
+      margin: 1rem 0 .625rem .375rem;
+      font-size: .75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      color: var(--theme-content-dark-color);
     }
+  }
 
-    .menu-item {
-      margin: 0;
-      padding: 6px;
-      font-family: inherit;
-      background-color: transparent;
-      border: 1px solid transparent;
-      border-radius: 8px;
-      outline: none;
-      cursor: pointer;
+  .menu-item {
+    justify-content: start;
+    padding: .375rem;
+    border-radius: .5rem;
 
-      &:hover {
-        background-color: var(--theme-button-bg-pressed);
-        border: 1px solid var(--theme-bg-accent-color);
-      }
-      &:focus {
-        border: 1px solid var(--primary-button-focused-border);
-        box-shadow: 0 0 0 3px var(--primary-button-outline);
-        z-index: 1;
-      }
+    &:hover {
+      background-color: var(--theme-button-bg-pressed);
+      border: 1px solid var(--theme-bg-accent-color);
     }
+    &:focus {
+      border: 1px solid var(--primary-button-focused-border);
+      box-shadow: 0 0 0 3px var(--primary-button-outline);
+      z-index: 1;
+    }
+  }
 
-    .selectUser {
-      margin-left: 12px;
-      .title {
-        font-size: 12px;
-        font-weight: 500;
-        color: var(--theme-content-accent-color);
-      }
-      .user {
-        font-size: 14px;
-        color: var(--theme-caption-color);
-      }
+  .selectUser {
+    margin-left: .75rem;
+    .title {
+      font-size: .75rem;
+      font-weight: 500;
+      color: var(--theme-content-accent-color);
     }
   }
 </style>
diff --git a/packages/presentation/src/components/UserInfo.svelte b/packages/presentation/src/components/UserInfo.svelte
index 782f71c8eb..de9da9b734 100644
--- a/packages/presentation/src/components/UserInfo.svelte
+++ b/packages/presentation/src/components/UserInfo.svelte
@@ -20,42 +20,32 @@
 
   export let value: Person
   export let subtitle: string | undefined = undefined
-  export let size: 24 | 28 | 32 | 34 | 36 = 24
+  export let size: 'x-small' | 'small' | 'medium' | 'large' | 'x-large'
 </script>
 
-<div class="user-container">
+<div class="flex-row-center">
   <Avatar {size} />
-  <div class="user-info">
+  <div class="flex-col user-info">
     {#if subtitle}<div class="subtitle">{subtitle}</div>{/if}
     <div class="title">{value.firstName + ' ' + value.lastName}</div>
   </div>
 </div>
 
 <style lang="scss">
-  .user-container {
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
+  .user-info {
+    margin-left: .5rem;
+    color: var(--theme-content-accent-color);
 
-    .user-info {
-      display: flex;
-      flex-direction: column;
-      margin-left: 8px;
-      font-family: inherit;
-      color: var(--theme-content-accent-color);
-
-      .subtitle {
-        font-size: 12px;
-        color: var(--theme-content-dark-color);
-      }
-      .title {
-        max-width: 150px;
-        font-weight: 500;
-        text-align: left;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
+    .subtitle {
+      font-size: .75rem;
+      color: var(--theme-content-dark-color);
+    }
+    .title {
+      font-weight: 500;
+      text-align: left;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
   }
 </style>
\ No newline at end of file
diff --git a/packages/presentation/src/components/icons/Add.svelte b/packages/presentation/src/components/icons/Add.svelte
index 119620e6dd..a4007930a7 100644
--- a/packages/presentation/src/components/icons/Add.svelte
+++ b/packages/presentation/src/components/icons/Add.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
-  export let size: number = 16
+  import { IconSize } from '@anticrm/ui'
+  export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<svg width={size} height={size} {fill} xmlns="http://www.w3.org/2000/svg">
-  <path d="M14,7.5H8.5V2c0-0.3-0.2-0.5-0.5-0.5S7.5,1.7,7.5,2v5.5H2C1.7,7.5,1.5,7.7,1.5,8S1.7,8.5,2,8.5h5.5V14 c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V8.5H14c0.3,0,0.5-0.2,0.5-0.5S14.3,7.5,14,7.5z"/>
-</svg>
+<IconSize {size}>
+  <svg {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M14,7.5H8.5V2c0-0.3-0.2-0.5-0.5-0.5S7.5,1.7,7.5,2v5.5H2C1.7,7.5,1.5,7.7,1.5,8S1.7,8.5,2,8.5h5.5V14 c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V8.5H14c0.3,0,0.5-0.2,0.5-0.5S14.3,7.5,14,7.5z"/>
+  </svg>
+</IconSize>
diff --git a/packages/presentation/src/components/icons/Close.svelte b/packages/presentation/src/components/icons/Close.svelte
index 16194f2ba1..ac4ecfab9d 100644
--- a/packages/presentation/src/components/icons/Close.svelte
+++ b/packages/presentation/src/components/icons/Close.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
-  export let size: number = 16
+  import { IconSize } from '@anticrm/ui'
+  export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-caption-color)'
 </script>
 
-<svg width={size} height={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>
+<IconSize {size}>
+  <svg {fill} viewBox="0 0 16 16" 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>
+</IconSize>
diff --git a/packages/text-editor/src/components/MentionList.svelte b/packages/text-editor/src/components/MentionList.svelte
index 6962b5854a..5d979948ab 100644
--- a/packages/text-editor/src/components/MentionList.svelte
+++ b/packages/text-editor/src/components/MentionList.svelte
@@ -81,7 +81,7 @@ $: {
     <div class="scroll">
       {#each items as item, i}
         <div class:selected={i === selected}>
-          <UserInfo size={36} value={item} />
+          <UserInfo size={'medium'} value={item} />
         </div>
       {/each}
     </div>
@@ -100,7 +100,7 @@ $: {
   padding: 16px;
   background-color: var(--theme-button-bg-hovered);
   border: 1px solid var(--theme-bg-accent-hover);
-  border-radius: 12px;
+  border-radius: .75rem;
   box-shadow: 0 20px 20px 0 rgba(0, 0, 0, .1);
 
   .caption {
diff --git a/packages/text-editor/src/components/ReferenceInput.svelte b/packages/text-editor/src/components/ReferenceInput.svelte
index 3d8932cfa9..bdc36c18e2 100644
--- a/packages/text-editor/src/components/ReferenceInput.svelte
+++ b/packages/text-editor/src/components/ReferenceInput.svelte
@@ -55,7 +55,7 @@
       padding: 8px 16px;
       background-color: var(--theme-bg-accent-color);
       border: 1px solid var(--theme-bg-accent-color);
-      border-radius: 12px;
+      border-radius: .75rem;
 
       .inputMsg {
         display: flex;
@@ -105,7 +105,7 @@
         height: 20px;
         background-color: transparent;
         border: 1px solid transparent;
-        border-radius: 4px;
+        border-radius: .25rem;
         outline: none;
         cursor: pointer;
 
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 45d7134ae7..f0c6f92f6d 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -18,6 +18,7 @@ button {
   display: flex;
   justify-content: center;
   align-items: center;
+  margin: 0;
   padding: 0;
   font-size: inherit;
   background-color: transparent;
@@ -25,6 +26,13 @@ button {
   outline: none;
   cursor: pointer;
 }
+input {
+  font-family: inherit;
+  font-size: inherit;
+  background-color: transparent;
+  outline: none;
+  color: var(--theme-caption-color);
+}
 audio, canvas, embed, iframe, img, object, svg, video {
   display: block;
   vertical-align: middle;
@@ -44,8 +52,26 @@ select:-webkit-autofill:focus {
   background: transparent;
 }
 
+// input:-webkit-autofill,
+// input:-webkit-autofill:hover,
+// input:-webkit-autofill:focus,
+// input:-webkit-autofill:active {
+//   -webkit-animation: autofill 0s forwards;
+// }
+ 
+// @-webkit-keyframes autofill {
+//   100% {
+//     background: transparent;
+//     color: inherit;
+//   }
+// }
+
 /* Common */
 .flex { display: flex; }
+.flex-nowrap {
+  display: flex;
+  flex-wrap: nowrap;
+}
 .flex-center {
   display: flex;
   justify-content: center;
@@ -56,9 +82,14 @@ select:-webkit-autofill:focus {
   justify-content: space-between;
   align-items: center;
 }
+.flex-stretch {
+  display: flex;
+  align-items: stretch;
+}
 .flex-row-center {
   display: flex;
   align-items: center;
+  flex-wrap: nowrap;
 }
 .flex-row-reverse {
   display: flex;
@@ -74,9 +105,43 @@ select:-webkit-autofill:focus {
   flex-direction: column;
   align-items: center;
 }
+.flex-col-stretch {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
 .h-full { height: 100%; }
 .square-36 { width: 2.25rem; height: 2.25rem; }
 
+/* --------- */
+.hidden-text {
+  position: absolute;
+  visibility: hidden;
+  overflow: hidden;
+  white-space: pre-wrap;
+}
+
+.focused-button {
+  background-color: var(--theme-button-bg-focused);
+  border: 1px solid transparent;
+
+  & > .icon { opacity: .3; }
+  &.selected {
+    background-color: var(--theme-button-bg-focused);
+    border: 1px solid var(--theme-bg-accent-color);
+  }
+  &:hover {
+    background-color: var(--theme-button-bg-pressed);
+    border: 1px solid var(--theme-bg-accent-color);
+    & > .icon { opacity: 1; }
+  }
+  &:focus {
+    border: 1px solid var(--primary-button-focused-border);
+    box-shadow: 0 0 0 3px var(--primary-button-outline);
+    & > .icon { opacity: 1; }
+  }
+}
+
 /* Backgrounds & Colors */
 .background-theme-bg-color { background-color: var(--theme-bg-color); }
 .background-highlight-red { background-color: var(--highlight-red); }
diff --git a/packages/theme/styles/_tailwind.scss b/packages/theme/styles/_tailwind.scss
deleted file mode 100644
index c571f37bea..0000000000
--- a/packages/theme/styles/_tailwind.scss
+++ /dev/null
@@ -1,112 +0,0 @@
-//
-// Copyright © 2021 Anticrm Platform Contributors.
-// 
-// 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.
-//
-
-/* Position */
-.relative { position: relative; }
-.absolute { position: absolute; }
-
-.top-3 { top: .75rem }
-.right-3 { right: .75rem }
-
-/* Width & Height */
-.w-0 { width: 0; }
-.w-2 { width: .5rem; }
-.w-9 { width: 2.25rem; }
-.w-10 { width: 2.5rem; }
-.w-13 { width: 3.25rem; } // our
-.w-20 { width: 5rem; }
-.w-72 { width: 18rem; }
-.w-full { width: 100%; }
-
-.h-0 { height: 0; }
-.h-2 { height: .5rem; }
-.h-9 { height: 2.25rem; }
-.h-10 { height: 2.5rem; }
-.h-12 { height: 3rem; }
-.h-13 { height: 3.25rem; } // our
-.h-18 { height: 4.5rem; } // our
-.h-auto { height: auto; }
-.h-px { height: 1px; }
-.h-screen { height: 100vh; }
-
-/* Spacing */
-.mr-2 { margin-right: .5rem; }
-.mb-2 { margin-bottom: .5rem; }
-.mx-3 { margin-left: .75rem; margin-right: .75rem; }
-.mr-3 { margin-right: .75rem; }
-.mx-4 { margin-left: 1rem; margin-right: 1rem; }
-.mr-4 { margin-right: 1rem; }
-.my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
-.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
-.mb-10 { margin-bottom: 2.5rem; }
-.mx-10 { margin-left: 2.5rem; margin-right: 2.5rem; }
-.ml-11 { margin-left: 2.75rem; }
-
-.p-0 { padding: 0; }
-.pb-5 { padding-bottom: 1.25rem; }
-.pr-8 { padding-right: 2rem; }
-.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
-.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
-.pl-10 { padding-left: 2.5rem; }
-
-/* Flex */
-.flex { display: flex; }
-.flex-col { flex-direction: column; }
-.flex-row-reverse { flex-direction: row-reverse; }
-.justify-center { justify-content: center; }
-.justify-between { justify-content: space-between; }
-.items-center { align-items: center; }
-.flex-grow { flex-grow: 1; }
-
-/* Grid */
-.grid { display: grid; }
-.grid-flow-col { grid-auto-flow: column; }
-.auto-cols-min { grid-auto-columns: min-content; }
-.gap-3 { gap: .75rem; }
-
-/* Typography */
-.text-xs { font-size: .75rem; }
-.text-sm { font-size: .875rem; }
-.text-base { font-size: 1rem; }
-.font-medium { font-weight: 500; }
-.font-semibold { font-weight: 600; }
-.text-center { text-align: center; }
-.whitespace-nowrap { white-space: nowrap; }
-.overflow-ellipsis { text-overflow: ellipsis; }
-
-/* Borders */
-.rounded { border-radius: .25rem; }
-.rounded-lg { border-radius: .5rem; }
-.rounded-xl { border-radius: .75rem; }
-.rounded-3xl { border-radius: 1.5rem; }
-.rounded-full { border-radius: 100%; }
-.border	{ border-width: 1px; }
-.border-solid { border-style: solid; }
-.border-transparent	{ border-color: transparent; }
-.outline-none { outline: none; }
-
-/* Backgrounds & Colors */
-.bg-transparent { background-color: transparent; }
-.opacity-30 { opacity: .3; }
-.opacity-60 { opacity: .6; }
-
-/* Others */
-.border-box { box-sizing: border-box; }
-.cursor-pointer { cursor: pointer; }
-.cursor-default { cursor: default; }
-.overflow-hidden { overflow: hidden; }
-.select-none { user-select: none; }
-.visible { visibility: visible; }
-.invisible { visibility: hidden; }
diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss
index f2df36063a..179663c870 100644
--- a/packages/theme/styles/global.scss
+++ b/packages/theme/styles/global.scss
@@ -14,7 +14,6 @@
 //
 
 @import "./_colors.scss";
-@import "./_tailwind.scss";
 @import "./_layouts.scss";
 
 @font-face {
@@ -72,15 +71,15 @@
 }
 ::-webkit-scrollbar-thumb {
   background-color: var(--theme-scroll-bar);
-  border-radius: 4px;
+  border-radius: .25rem;
 }
 ::-webkit-scrollbar-thumb:hover {
   background-color: var(--theme-scroll-bar);
-  border-radius: 4px;
+  border-radius: .25rem;
 }
 ::-webkit-scrollbar-corner {
   background-color: var(--theme-scroll-bar);
-  border-radius: 4px;
+  border-radius: .25rem;
 }
 
 .normal-font { font-size: 16px; }
diff --git a/packages/ui/src/components/ActionIcon.svelte b/packages/ui/src/components/ActionIcon.svelte
index 25ba86e30e..8727a1de56 100644
--- a/packages/ui/src/components/ActionIcon.svelte
+++ b/packages/ui/src/components/ActionIcon.svelte
@@ -42,7 +42,7 @@
 
 <style lang="scss">
   .button {
-    border-radius: 4px;
+    border-radius: .125rem;
 
     .icon {
       opacity: .3;
diff --git a/packages/ui/src/components/CheckBox.svelte b/packages/ui/src/components/CheckBox.svelte
index 4c1492b059..81e24e7347 100644
--- a/packages/ui/src/components/CheckBox.svelte
+++ b/packages/ui/src/components/CheckBox.svelte
@@ -29,8 +29,8 @@
 <style lang="scss">
   .checkbox {
     display: inline-block;
-    width: 16px;
-    height: 16px;
+    width: 1rem;
+    height: 1rem;
 
     .chBox {
       position: absolute;
@@ -66,9 +66,9 @@
       }
     }
     .checkSVG {
-      width: 16px;
-      height: 16px;
-      border-radius: 4px;
+      width: 1rem;
+      height: 1rem;
+      border-radius: .25rem;
 
       .back {
         fill: var(--theme-button-bg-hovered);
diff --git a/packages/ui/src/components/CheckBoxList.svelte b/packages/ui/src/components/CheckBoxList.svelte
index 039f67fac9..795d74c4b2 100644
--- a/packages/ui/src/components/CheckBoxList.svelte
+++ b/packages/ui/src/components/CheckBoxList.svelte
@@ -12,36 +12,49 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 -->
-
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte'
   import type { IntlString } from '@anticrm/platform'
   import CheckBoxWithLabel from './CheckBoxWithLabel.svelte'
   import Label from './Label.svelte'
   import Add from './icons/Add.svelte'
 
   export let label: IntlString
-  export let items: Array<Object> = [
-    { id: 0, label: '15 minute phone call', done: true },
-    { id: 1, label: 'Follow up email', done: false },
-    { id: 2, label: 'First round interview', done: false },
-    { id: 3, label: 'Follow up email', done: false },
-    { id: 4, label: 'Second round interview', done: false },
-    { id: 5, label: 'Third round interview', done: false },
+  export let items: Array<Object>
+  = [
+    { description: '15 minute phone call', done: true },
+    { description: 'Follow up email', done: false },
+    { description: 'First round interview', done: false },
+    { description: 'Follow up email', done: false },
+    { description: 'Second round interview', done: false },
+    { description: 'Third round interview', done: false },
   ]
   export let editable: boolean = false
+
+  const dispatch = createEventDispatcher()
 </script>
 
 <div class="checkbox-list">
   {#each items as item}
-    <div class="list-item"><CheckBoxWithLabel bind:label={item.label} bind:checked={item.done} {editable} /></div>
+    <div class="list-item">
+      <CheckBoxWithLabel
+        bind:label={item.description}
+        bind:checked={item.done}
+        {editable}
+        on:change={() => {
+          dispatch('change', item)
+        }}
+      />
+    </div>
   {/each}
-  <div class="add-item"
+  <div
+    class="add-item"
     on:click={() => {
-      items.push({ id: Date.now(), label: 'New item', done: false })
+      items.push({ description: 'New item', done: false })
       items = items
     }}
   >
-    <div class="icon"><Add /></div>
+    <div class="icon"><Add size={'small'} /></div>
     <div class="label"><Label {label} /></div>
   </div>
 </div>
@@ -51,34 +64,24 @@
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    margin: 0 16px;
-    .list-item + .list-item {
-      margin-top: 20px;
-    }
+    margin: 0 1rem;
+
+    .list-item + .list-item { margin-top: 1.25rem; }
 
     .add-item {
       display: flex;
       align-items: center;
-      margin-top: 20px;
+      margin-top: 1.25rem;
       cursor: pointer;
 
-      .icon {
-        width: 16px;
-        height: 16px;
-        opacity: .6;
-      }
+      .icon { opacity: .6; }
       .label {
-        margin-left: 16px;
+        margin-left: 1rem;
         color: var(--theme-content-color);
       }
-
       &:hover {
-        .icon {
-          opacity: 1;
-        }
-        .label {
-          color: var(--theme-caption-color);
-        }
+        .icon { opacity: 1; }
+        .label { color: var(--theme-caption-color); }
       }
     }
   }
diff --git a/packages/ui/src/components/CheckBoxWithLabel.svelte b/packages/ui/src/components/CheckBoxWithLabel.svelte
index 16390a7767..315501d903 100644
--- a/packages/ui/src/components/CheckBoxWithLabel.svelte
+++ b/packages/ui/src/components/CheckBoxWithLabel.svelte
@@ -12,8 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 -->
-
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte'
   import { onMount } from 'svelte'
   import type { IntlString } from '@anticrm/platform'
   import CheckBox from './CheckBox.svelte'
@@ -25,7 +25,6 @@
   let text: HTMLElement
   let input: HTMLInputElement
   let onEdit: boolean = false
-  let goOut: boolean = false
 
   $: {
     if (text && input) {
@@ -53,83 +52,99 @@
     }
   }
 
-  function computeSize(t: EventTarget | null) {
+  function convertRemToPx(rem: number) {
+    return rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
+  }
+
+  function computeSize (t: EventTarget | null) {
     const target = t as HTMLInputElement
-    const value = target.value
+    const value = target.value.charCodeAt(target.value.length - 1) === 10 ? convertRemToPx(1.125) : 0
     text.innerHTML = label.replaceAll(' ', '&nbsp;')
-    target.style.width = text.clientWidth + 12 + 'px'
+    target.style.height = text.clientHeight + value + convertRemToPx(.5) + 'px'
   }
 
   onMount(() => {
     computeSize(input)
   })
+
+  const dispatch = createEventDispatcher()
+  function changeItem () {
+    dispatch('change', { checked, label })
+  }
 </script>
 
 <svelte:window on:mousedown={waitClick} />
-<div class="checkBox-container">
-  <CheckBox bind:checked={checked} />
-  <div class="label"
+<div class="flex-stretch">
+  <div style="margin-top: 1px;">
+    <CheckBox bind:checked on:change={changeItem} />
+  </div>
+  <div
+    class="label"
     on:click={() => {
       if (editable) {
         onEdit = true
       }
     }}
   >
-    <input bind:this={input} type="text" bind:value={label}
+    <textarea
+      bind:this={input}
+      type="text"
+      bind:value={label}
       class="edit-item"
       on:input={(ev) => ev.target && computeSize(ev.target)}
+      on:change={changeItem}
     />
-    <div class="text" class:checked bind:this={text}>{label}</div>
+    <div class="hidden-text text" class:checked bind:this={text}>{label}</div>
   </div>
 </div>
 
 <style lang="scss">
-  .checkBox-container {
-    display: flex;
-    align-items: center;
+  .label {
+    position: relative;
+    margin-left: 1rem;
+    width: 100%;
+    color: var(--theme-caption-color);
 
-    .label {
-      position: relative;
-      margin-left: 16px;
+    .edit-item {
+      width: 100%;
+      min-height: 1.25rem;
+      height: minmax(1.25rem, auto);
+      margin: -.25rem;
+      padding: .125rem;
+      font-family: inherit;
+      font-size: inherit;
       color: var(--theme-caption-color);
+      background-color: transparent;
+      border: .125rem solid transparent;
+      border-radius: .125rem;
+      outline: none;
+      overflow-y: scroll;
+      resize: none;
+      overflow-wrap: break-word;
 
-      .edit-item {
-        max-width: 100%;
-        height: 21px;
-        margin: -3px;
-        padding: 2px;
-        font-family: inherit;
-        font-size: 14px;
-        line-height: 150%;
-        color: var(--theme-caption-color);
-        background-color: transparent;
-        border: 1px solid transparent;
-        border-radius: 2px;
-        outline: none;
-
-        &:focus {
-          border-color: var(--primary-button-enabled);
-        }
-
-        &::-webkit-contacts-auto-fill-button,
-        &::-webkit-credentials-auto-fill-button {
-          visibility: hidden;
-          display: none !important;
-          pointer-events: none;
-          height: 0;
-          width: 0;
-          margin: 0;
-        }
+      &:focus {
+        border-color: var(--primary-button-enabled);
       }
-      .text {
-        position: absolute;
-        top: 0;
-        left: 0;
 
-        &.checked {
-          text-decoration: line-through;
-          color: var(--theme-content-dark-color);
-        }
+      &::-webkit-contacts-auto-fill-button,
+      &::-webkit-credentials-auto-fill-button {
+        visibility: hidden;
+        display: none !important;
+        pointer-events: none;
+        height: 0;
+        width: 0;
+        margin: 0;
+      }
+    }
+    .text {
+      top: 0;
+      width: 100%;
+      text-overflow: ellipsis;
+      overflow-wrap: break-word;
+
+      &.checked {
+        text-decoration: line-through;
+        color: var(--theme-content-dark-color);
       }
     }
   }
diff --git a/packages/ui/src/components/DatePicker.svelte b/packages/ui/src/components/DatePicker.svelte
index 9d56ab4178..d38b99e2ac 100644
--- a/packages/ui/src/components/DatePicker.svelte
+++ b/packages/ui/src/components/DatePicker.svelte
@@ -56,11 +56,11 @@
   }
 </script>
 
-<div class="dataPicker">
+<div class="flex-row-center">
   <PopupMenu bind:show={show}>
     <button
       slot="trigger"
-      class="btn"
+      class="focused-button btn"
       class:selected={show}
       on:click|preventDefault={() => {
         show = !show
@@ -71,11 +71,11 @@
       </div>
     </button>
 
-    <div class="header">
+    <div class="flex-col caption-color">
       <div class="title"><Label label={title} /></div>
-      <div class="nav">
+      <div class="flex-between nav">
         <button
-          class="btn arrow"
+          class="focused-button arrow"
           on:click|preventDefault={() => {
             view.setMonth(view.getMonth() - 1)
             view = view
@@ -84,7 +84,7 @@
           {monthYear}
         </div>
         <button
-          class="btn arrow"
+          class="focused-button arrow"
           on:click|preventDefault={() => {
             view.setMonth(view.getMonth() + 1)
             view = view
@@ -118,7 +118,7 @@
     </div>
   </PopupMenu>
   <div class="selectDate">
-    <div class="title"><Label label={title} /></div>
+    <div class="label"><Label label={title} /></div>
     <div class="date">
       {selected.getMonth() + 1} / {selected.getDate()} / {selected.getFullYear()}
     </div>
@@ -126,139 +126,73 @@
 </div>
 
 <style lang="scss">
-  .dataPicker {
-    display: flex;
-    flex-wrap: nowrap;
+  .btn {
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: .5rem;
+    border: none;
+  }
 
-    .btn {
+  .arrow {
+    width: 2rem;
+    height: 2rem;
+    border: 1px solid var(--theme-bg-accent-color);
+    border-radius: .25rem;
+  }
+
+  .title {
+    margin-bottom: .75rem;
+    font-weight: 500;
+    text-align: left;
+  }
+  .nav {
+    min-width: 16.5rem;
+
+    .monthYear {
+      margin: 0 1rem;
+      line-height: 150%;
+      white-space: nowrap;
+    }
+  }
+
+  .calendar {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: .125rem;
+    margin-top: .5rem;
+
+    .caption, .day {
       display: flex;
       justify-content: center;
       align-items: center;
-      margin: 0;
-      padding: 0;
-      width: 36px;
-      height: 36px;
-      background-color: var(--theme-button-bg-focused);
-      border: 1px solid transparent;
-      border-radius: 8px;
-      outline: none;
+      width: 2.25rem;
+      height: 2.25rem;
+      color: var(--theme-content-dark-color);
+    }
+    .caption {
+      font-size: .75rem;
+    }
+    .day {
+      border-radius: .5rem;
       cursor: pointer;
 
-      .icon {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 20px;
-        height: 20px;
-        opacity: 0.3;
-      }
-
-      &.arrow {
-        width: 32px;
-        height: 32px;
-        border: 1px solid var(--theme-bg-accent-color);
-        border-radius: 4px;
-
-        .icon {
-          width: 16px;
-          height: 16px;
-        }
-      }
-
       &.selected {
         background-color: var(--theme-button-bg-focused);
         border: 1px solid var(--theme-bg-accent-color);
-        .icon {
-          opacity: 0.6;
-        }
-      }
-
-      &:hover {
-        background-color: var(--theme-button-bg-pressed);
-        border: 1px solid var(--theme-bg-accent-color);
-        .icon {
-          opacity: 1;
-        }
-      }
-      &:focus {
-        border: 1px solid var(--primary-button-focused-border);
-        box-shadow: 0 0 0 3px var(--primary-button-outline);
-        .icon {
-          opacity: 1;
-        }
-      }
-    }
-
-    .header {
-      display: flex;
-      flex-direction: column;
-      color: var(--theme-caption-color);
-
-      .title {
-        margin-bottom: 12px;
-        font-size: 14px;
-        font-weight: 500;
-        text-align: left;
-      }
-      .nav {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        min-width: 264px;
-
-        .monthYear {
-          margin: 0 16px;
-          line-height: 150%;
-          white-space: nowrap;
-        }
-      }
-    }
-
-    .calendar {
-      display: grid;
-      grid-template-columns: repeat(7, 1fr);
-      gap: 2px;
-      margin-top: 8px;
-
-      .caption {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 36px;
-        height: 36px;
-        font-size: 12px;
-        color: var(--theme-content-dark-color);
-      }
-      .day {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 36px;
-        height: 36px;
-        font-family: inherit;
-        color: var(--theme-content-dark-color);
-        border-radius: 8px;
-        cursor: pointer;
-
-        &.selected {
-          background-color: var(--theme-button-bg-focused);
-          border: 1px solid var(--theme-bg-accent-color);
-          color: var(--theme-caption-color);
-        }
-      }
-    }
-
-    .selectDate {
-      margin-left: 12px;
-      .title {
-        font-size: 12px;
-        font-weight: 500;
-        color: var(--theme-content-accent-color);
-      }
-      .date {
-        font-size: 14px;
         color: var(--theme-caption-color);
       }
     }
   }
+
+  .selectDate {
+    margin-left: .75rem;
+    .label {
+      font-size: .75rem;
+      font-weight: 500;
+      color: var(--theme-content-accent-color);
+    }
+    .date {
+      color: var(--theme-caption-color);
+    }
+  }
 </style>
diff --git a/packages/ui/src/components/Dialog.svelte b/packages/ui/src/components/Dialog.svelte
index b7540b0f9c..0436e046a5 100644
--- a/packages/ui/src/components/Dialog.svelte
+++ b/packages/ui/src/components/Dialog.svelte
@@ -33,7 +33,7 @@
 
 <div class="dialog-container">
   <form class="dialog" on:submit|preventDefault={() => { okAction(); dispatch('close') }}>
-    <div class="header">
+    <div class="flex-between header">
       <div class="title"><Label {label}/></div>
       <div class="tool" on:click={() => { dispatch('close') }}><Close size={'small'}/></div>
     </div>
@@ -54,7 +54,7 @@
     justify-content: space-between;
     flex-direction: row-reverse;
     width: 100vw;
-    max-height: 100vh;
+    min-height: 100vh;
     height: 100vh;
 
     .dialog {
@@ -63,45 +63,38 @@
       min-width: 40%;
       max-width: 80%;
       width: auto;
-      max-height: 100vh;
+      min-height: 100vh;
       height: 100vh;
       background-color: var(--theme-bg-color);
-      border-radius: 30px 0 0 30px;
-      box-shadow: 0px 50px 120px rgba(0, 0, 0, 0.4);
+      border-radius: 1.875rem 0 0 1.875rem;
+      box-shadow: 0px 3.125rem 7.5rem rgba(0, 0, 0, .4);
 
       .header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
         flex-shrink: 0;
-        padding: 0 32px 0 40px;
-        height: 72px;
+        padding: 0 2rem 0 2.5rem;
+        height: 4.5rem;
 
         .title {
           flex-grow: 1;
           font-weight: 500;
-          font-size: 18px;
+          font-size: 1.125rem;
           color: var(--theme-caption-color);
           user-select: none;
         }
 
         .tool {
-          width: 16px;
-          height: 16px;
-          margin-left: 12px;
+          margin-left: .75rem;
           opacity: .4;
           cursor: pointer;
-          &:hover {
-            opacity: 1;
-          }
+          &:hover { opacity: 1; }
         }
       }
 
       .content {
         flex-shrink: 0;
-        width: 640px;
-        margin: 0 40px;
-        height: calc(100vh - 168px);
+        width: 40rem;
+        margin: 0 2.5rem;
+        height: calc(100vh - 10.5rem);
       }
 
       .footer {
@@ -110,10 +103,10 @@
         flex-direction: row-reverse;
         align-items: center;
         flex-shrink: 0;
-        gap: 12px;
-        padding: 0 40px;
-        height: 96px;
-        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 1) 40px);
+        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);
       }
     }
   }
diff --git a/packages/ui/src/components/EditBox.svelte b/packages/ui/src/components/EditBox.svelte
index decbb48727..1cc399bc40 100644
--- a/packages/ui/src/components/EditBox.svelte
+++ b/packages/ui/src/components/EditBox.svelte
@@ -32,7 +32,7 @@
     const target = t as HTMLInputElement
     const value = target.value
     text.innerHTML = (value === '' ? placeholder : value).replaceAll(' ', '&nbsp;')
-    target.style.width = text.clientWidth + 8 + 'px'
+    target.style.width = text.clientWidth + (parseFloat(getComputedStyle(document.documentElement).fontSize) * .5) + 'px'
   }
 
   onMount(() => {
@@ -44,10 +44,10 @@
   })
 </script>
 
-<div class="editbox" style="min-width: ; {width ? 'width: ' + width : ''}"
+<div class="flex-col" style="{width ? 'width: ' + width : ''}"
   on:click={() => { input.focus() }}
 >
-  <div class="text" bind:this={text}></div>
+  <div class="hidden-text" bind:this={text}></div>
   {#if label}<div class="label"><Label label={label}/></div>{/if}
   {#if password}
     <input bind:this={input} type="password" bind:value {placeholder} on:input={(ev) => ev.target && computeSize(ev.target)} />
@@ -57,22 +57,9 @@
 </div>
 
 <style lang="scss">
-.editbox {
-  display: flex;
-  flex-direction: column;
-  min-width: 50px;
-  height: auto;
-
-  .text {
-    position: absolute;
-    visibility: hidden;
-    overflow: hidden;
-    white-space: pre-wrap;
-  }
-
   .label {
-    margin-bottom: 4px;
-    font-size: 12px;
+    margin-bottom: .25rem;
+    font-size: .75rem;
     font-weight: 500;
     color: var(--theme-caption-color);
     opacity: .8;
@@ -81,17 +68,11 @@
   }
 
   input {
-    max-width: 100%;
-    height: 21px;
-    margin: -4px;
-    padding: 2px;
-    font-family: inherit;
-    font-size: inherit;
-    color: var(--theme-caption-color);
-    background-color: transparent;
-    border: 2px solid transparent;
-    border-radius: 2px;
-    outline: none;
+    height: 1.25rem;
+    margin: -.25rem;
+    padding: .125rem;
+    border: .125rem solid transparent;
+    border-radius: .125rem;
 
     &:focus {
       border-color: var(--primary-button-enabled);
@@ -110,5 +91,4 @@
       margin: 0;
     }
   }
-}
 </style>
\ No newline at end of file
diff --git a/packages/ui/src/components/EditWithIcon.svelte b/packages/ui/src/components/EditWithIcon.svelte
index 420970a8f0..b46eda9fff 100644
--- a/packages/ui/src/components/EditWithIcon.svelte
+++ b/packages/ui/src/components/EditWithIcon.svelte
@@ -39,27 +39,21 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0;
-    min-width: 268px;
-    height: 40px;
+    min-width: 16.75rem;
+    height: 2.5rem;
     background-color: var(--theme-bg-focused-color);
     border: 1px solid var(--theme-bg-accent-color);
-    border-radius: 8px;
+    border-radius: .5rem;
 
     &:focus-within {
       border-color: var(--theme-bg-focused-border);
     }
     input {
       width: 100%;
-      height: 40px;
-      margin: 0;
-      padding: 10px 12px;
-      font-family: inherit;
-      color: var(--theme-caption-color);
-      background-color: transparent;
-      outline: none;
+      height: 2.5rem;
+      padding-left: .75rem;
       border: none;
-      border-radius: 8px;
+      border-radius: .5rem;
 
       &::placeholder {
         color: var(--theme-content-trans-color);
@@ -67,9 +61,7 @@
     }
 
     .icon {
-      margin: 12px;
-      width: 16px;
-      height: 16px;
+      margin: .75rem;
       opacity: .3;
     }
   }
diff --git a/packages/ui/src/components/Grid.svelte b/packages/ui/src/components/Grid.svelte
index 0117d52b3b..6b4db78196 100755
--- a/packages/ui/src/components/Grid.svelte
+++ b/packages/ui/src/components/Grid.svelte
@@ -14,10 +14,10 @@
 -->
 <script lang="ts">
   export let column: number = 2
-  export let rowGap: number = 40
-  export let columnGap: number = 24
+  export let rowGap: number = 2.5
+  export let columnGap: number = 1.5
 
-  const style = `grid-template-columns: repeat(${column}, 1fr); row-gap: ${rowGap}px; column-gap: ${columnGap}px;`
+  const style = `grid-template-columns: repeat(${column}, 1fr); row-gap: ${rowGap}rem; column-gap: ${columnGap}rem;`
 </script>
 
 <div class="grid" {style}>
@@ -28,7 +28,7 @@
   .grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    row-gap: 40px;
-    column-gap: 24px;
+    row-gap: 2.5rem;
+    column-gap: 1.5rem;
   }
 </style>
diff --git a/packages/ui/src/components/PopupItem.svelte b/packages/ui/src/components/PopupItem.svelte
index 20b14cea85..d22f8f875c 100644
--- a/packages/ui/src/components/PopupItem.svelte
+++ b/packages/ui/src/components/PopupItem.svelte
@@ -47,63 +47,41 @@
 <style lang="scss">
   .popup-item {
     position: relative;
-    display: flex;
     justify-content: space-between;
-    align-items: center;
-    margin: 0;
-    padding: 8px 12px;
-    height: 40px;
-    background-color: transparent;
-    border: 1px solid transparent;
-    border-radius: 8px;
-    outline: none;
-    cursor: pointer;
+    padding: .5rem .75rem;
+    height: 2.5rem;
+    border-radius: .5rem;
 
     .title {
       flex-grow: 1;
-      font-size: 14px;
-      line-height: 18px;
       text-align: left;
       color: var(--theme-content-accent-color);
     }
 
     .check {
-      margin-left: 12px;
-      width: 20px;
-      height: 20px;
+      margin-left: .75rem;
       border-radius: 50%;
       opacity: 0;
-
-      &.selected {
-        opacity: .8;
-      }
+      &.selected { opacity: .8; }
     }
 
     &:hover {
       background-color: var(--theme-button-bg-pressed);
       border: 1px solid var(--theme-bg-accent-color);
-      .title {
-        color: var(--theme-caption-color);
-      }
+      .title { color: var(--theme-caption-color); }
       .check {
         opacity: .2;
-        &.selected {
-          opacity: 1;
-        }
+        &.selected { opacity: 1; }
       }
     }
     &:focus {
       border: 1px solid var(--primary-button-focused-border);
       box-shadow: 0 0 0 3px var(--primary-button-outline);
       z-index: 1;
-      .title {
-        color: var(--theme-caption-color);
-      }
+      .title { color: var(--theme-caption-color); }
       .check {
         opacity: .2;
-        &.selected {
-          opacity: .8;
-        }
+        &.selected { opacity: .8; }
       }
     }
   }
diff --git a/packages/ui/src/components/PopupMenu.svelte b/packages/ui/src/components/PopupMenu.svelte
index 669dcc4a8d..f407f05f6e 100644
--- a/packages/ui/src/components/PopupMenu.svelte
+++ b/packages/ui/src/components/PopupMenu.svelte
@@ -48,21 +48,21 @@
     scrolling = false
     if (rectT.top > document.body.clientHeight - rectT.bottom) {
       // Up
-      if (rectT.top - 20 - margin < rectP.height) {
+      if (rectT.top - 10 - margin < rectP.height) {
         scrolling = true
-        popup.style.maxHeight = `${rectT.top - margin - 20}px`
-        popup.style.top = '20px'
+        popup.style.maxHeight = `${rectT.top - margin - 10}px`
+        popup.style.top = '10px'
       } else popup.style.top = `${rectT.top - rectP.height - margin}px`
     } else {
       // Down
-      if (rectT.bottom + rectP.height + 20 + margin > document.body.clientHeight) {
+      if (rectT.bottom + rectP.height + 10 + margin > document.body.clientHeight) {
         scrolling = true
-        popup.style.maxHeight = `${document.body.clientHeight - rectT.bottom - margin - 20}px`
+        popup.style.maxHeight = `${document.body.clientHeight - rectT.bottom - margin - 10}px`
       }
       popup.style.top = `${rectT.bottom + margin}px`
     }
-    if (rectT.left + rectP.width + 20 > document.body.clientWidth) {
-      popup.style.left = `${document.body.clientWidth - rectP.width - 20}px`
+    if (rectT.left + rectP.width + 10 > document.body.clientWidth) {
+      popup.style.left = `${document.body.clientWidth - rectP.width - 10}px`
     } else popup.style.left = `${rectT.left}px`
   }
 
@@ -93,7 +93,7 @@
   </div>
   <div class="popup" bind:this={popup}>
     {#if show}
-      <div class="content" class:scrolling><slot /></div>
+      <div class="flex-col" class:scrolling><slot /></div>
     {/if}
   </div>
 </div>
@@ -104,22 +104,14 @@
     visibility: hidden;
     display: flex;
     flex-direction: column;
-    padding: 16px;
+    padding: 1rem;
     color: var(--theme-caption-color);
     background-color: var(--theme-button-bg-hovered);
     border: 1px solid var(--theme-button-border-enabled);
-    border-radius: 12px;
-    box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.6);
+    border-radius: .75rem;
+    box-shadow: 0px 1.25rem 3.75rem rgba(0, 0, 0, .6);
     user-select: none;
     z-index: 10;
-
-    .content {
-      display: flex;
-      flex-direction: column;
-
-      &.scrolling {
-        overflow-y: auto;
-      }
-    }
   }
+  .scrolling { overflow-y: auto; }
 </style>
diff --git a/packages/ui/src/components/Progress.svelte b/packages/ui/src/components/Progress.svelte
index 77986b3401..ff0dfcee03 100644
--- a/packages/ui/src/components/Progress.svelte
+++ b/packages/ui/src/components/Progress.svelte
@@ -24,24 +24,24 @@
   if (value < min) value = min
 </script>
 
-<div class="progress-container">
+<div class="container">
   <div class="bar" style="background-color: {color}; width: calc(100% * {Math.round((value - min) / proc)} / 100);"/>
 </div>
 
 <style lang="scss">
-  .progress-container {
+  .container {
     position: relative;
     width: 100%;
-    height: 4px;
+    height: .25rem;
     background-color: var(--theme-button-bg-hovered);
-    border-radius: 2px;
+    border-radius: .125rem;
 
     .bar {
       position: absolute;
       top: 0;
       left: 0;
       height: 100%;
-      border-radius: 2px;
+      border-radius: .125rem;
     }
   }
 </style>
diff --git a/packages/ui/src/components/Row.svelte b/packages/ui/src/components/Row.svelte
index 9292b27033..61324e6d91 100755
--- a/packages/ui/src/components/Row.svelte
+++ b/packages/ui/src/components/Row.svelte
@@ -15,9 +15,7 @@
 <script lang="ts">
 </script>
 
-<div class="row">
-  <slot />
-</div>
+<div class="row"><slot /></div>
 
 <style lang="scss">
   .row {
diff --git a/packages/ui/src/components/ScrollBox.svelte b/packages/ui/src/components/ScrollBox.svelte
index bbf81aff59..cc14a1d488 100644
--- a/packages/ui/src/components/ScrollBox.svelte
+++ b/packages/ui/src/components/ScrollBox.svelte
@@ -14,14 +14,14 @@
 -->
 
 <script lang="ts">
-  export let gap: number = 12
+  export let gap: number = .75
   export let vertical: boolean = false
   export let stretch: boolean = false
   export let bothScroll: boolean = false
 </script>
 
 <div class="scroll" class:vertical={vertical} class:bothScroll={bothScroll}>
-  <div class="box" class:stretch={stretch} style="gap: {gap}px">
+  <div class="box" class:stretch={stretch} style="gap: {gap}rem">
     <slot/>
   </div>
 </div>
@@ -34,14 +34,14 @@
     overflow-x: auto;
     overflow-y: hidden;
     margin-right: 0;
-    margin-bottom: -5px;
+    margin-bottom: -.75rem;
 
     .box {
       position: absolute;
       display: grid;
       grid-auto-flow: column;
-      padding: 0 0 5px 0;
-      gap: 24px;
+      padding: 0 0 .375rem 0;
+      gap: 1.5rem;
       top: 0;
       left: 0;
       width: auto;
@@ -52,12 +52,12 @@
     }
 
     &.vertical {
-      margin: 0 -10px 0 -10px;
+      margin: 0 -.5rem 0 -.5rem;
       overflow-x: hidden;
       overflow-y: auto;
       .box {
         grid-auto-flow: row;
-        padding: 0 10px 0 10px;
+        padding: 0 .5rem 0 .5rem;
         width: 100%;
         height: auto;
         &.stretch {
@@ -67,10 +67,10 @@
     }
 
     &.bothScroll {
-      margin: 0 -5px -5px 0;
+      margin: 0 -.375rem -.375rem 0;
       overflow: auto;
       .box {
-        padding: 0 5px 5px 0;
+        padding: 0 .375rem .375rem 0;
       }
     }
   }
diff --git a/packages/ui/src/components/Section.svelte b/packages/ui/src/components/Section.svelte
index a7d587484e..8435f868ed 100644
--- a/packages/ui/src/components/Section.svelte
+++ b/packages/ui/src/components/Section.svelte
@@ -25,7 +25,7 @@
   export let closed: boolean = false
 </script>
 
-<div class="section-container"
+<div class="flex-row-center section-container"
   on:click|preventDefault={() => {
     closed = !closed
   }}
@@ -34,39 +34,29 @@
   <div class="title"><Label {label} /></div>
   <div class="arrow">{#if closed}<ArrowUp size={'small'} />{:else}<ArrowDown size={'small'} />{/if}</div>
 </div>
-<div class="section-content" class:hidden={closed}><slot/></div>
+{#if !closed }<div class="section-content"><slot/></div>{/if}
 
 <style lang="scss">
   .section-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    flex-wrap: nowrap;
     width: 100%;
-    height: 80px;
-    min-height: 80px;
+    height: 5rem;
+    min-height: 5rem;
     cursor: pointer;
     user-select: none;
 
     .title {
       flex-grow: 1;
-      margin-left: 12px;
+      margin-left: .75rem;
       font-weight: 500;
       color: var(--theme-caption-color);
     }
     .arrow {
-      margin: 8px;
+      margin: .5rem;
     }
   }
   .section-content {
-    margin: 16px 0 54px;
+    margin: 1rem 0 3.5rem;
     height: auto;
-    visibility: visible;
-    &.hidden {
-      margin: 0;
-      height: 0;
-      visibility: hidden;
-    }
   }
   :global(.section-container + .section-container),
   :global(.section-content + .section-container) {
diff --git a/packages/ui/src/components/SelectBox.svelte b/packages/ui/src/components/SelectBox.svelte
index 9929eb1cdc..cbca3f28bc 100644
--- a/packages/ui/src/components/SelectBox.svelte
+++ b/packages/ui/src/components/SelectBox.svelte
@@ -13,14 +13,14 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  export let gap: number = 12
+  export let gap: number = .75
   export let vertical: boolean = false
   export let stretch: boolean = false
   export let bothScroll: boolean = false
 </script>
 
 <div class="scrollBox" class:vertical class:bothScroll>
-  <div class="box" class:stretch style="gap: {gap}px">
+  <div class="box" class:stretch style="gap: {gap}rem">
     <slot />
   </div>
 </div>
@@ -33,14 +33,14 @@
     overflow-x: auto;
     overflow-y: hidden;
     margin-right: 0;
-    margin-bottom: -5px;
+    margin-bottom: -.375rem;
 
     .box {
       position: absolute;
       display: grid;
       grid-auto-flow: column;
-      padding: 0 0 5px 0;
-      gap: 24px;
+      padding: 0 0 .375rem 0;
+      gap: 1.5rem;
       top: 0;
       left: 0;
       width: auto;
@@ -51,11 +51,11 @@
     }
 
     &.vertical {
-      margin: 0 -10px 0 -10px;
+      margin: 0 -.75rem 0 -.75rem;
       overflow-x: hidden;
       overflow-y: auto;
       .box {
-        padding: 0 10px 0 10px;
+        padding: 0 .75rem 0 .75rem;
         width: 100%;
         height: auto;
         grid-auto-flow: row;
@@ -66,10 +66,10 @@
     }
 
     &.bothScroll {
-      margin: 0 -5px -5px 0;
+      margin: 0 -.375rem -.375rem 0;
       overflow: auto;
       .box {
-        padding: 0 5px 5px 0;
+        padding: 0 .375rem .375rem 0;
       }
     }
   }
diff --git a/packages/ui/src/components/SelectItem.svelte b/packages/ui/src/components/SelectItem.svelte
index c9ced3329e..8fb2bfa644 100644
--- a/packages/ui/src/components/SelectItem.svelte
+++ b/packages/ui/src/components/SelectItem.svelte
@@ -26,8 +26,8 @@
   export let item: IPopupItem
   export let vAlign: 'top' | 'middle' | 'bottom' = 'bottom'
   export let hAlign: 'left' | 'center' | 'right' = 'left'
-  export let margin: number = 16
-  export let gap: number = 8
+  export let margin: number = 1
+  export let gap: number = .5
 
   let byTitle: boolean = (component) ? false : true
   let pressed: boolean = false
@@ -72,19 +72,13 @@
 
 <style lang="scss">
   .btn {
-    display: flex;
     justify-content: space-between;
-    align-items: center;
-    flex-wrap: nowrap;
-    margin: 0;
-    padding: 8px 12px;
+    padding: .5rem .75rem;
     width: auto;
-    height: 40px;
+    height: 2.5rem;
     background-color: var(--theme-button-bg-pressed);
     border: 1px solid var(--theme-bg-accent-color);
-    border-radius: 12px;
-    outline: none;
-    cursor: pointer;
+    border-radius: .75rem;
 
     .title {
       flex-grow: 1;
@@ -93,25 +87,8 @@
     }
 
     .icon {
-      width: 16px;
-      height: 16px;
-      margin-left: 12px;
+      margin-left: .75rem;
       opacity: .8;
     }
-
-    &:hover {
-      background-color: var(--theme-button-bg-pressed);
-      border: 1px solid var(--theme-bg-accent-color);
-      .icon {
-        opacity: 1;
-      }
-    }
-    &:focus {
-      border: 1px solid var(--primary-button-focused-border);
-      box-shadow: 0 0 0 3px var(--primary-button-outline);
-      .icon {
-        opacity: 1;
-      }
-    }
   }
 </style>
diff --git a/packages/ui/src/components/Spinner.svelte b/packages/ui/src/components/Spinner.svelte
index 66b209c44b..d0ccdad454 100644
--- a/packages/ui/src/components/Spinner.svelte
+++ b/packages/ui/src/components/Spinner.svelte
@@ -12,8 +12,8 @@
 
 <style lang="scss">
   .spinner {
-    width: 24px;
-    height: 24px;
+    width: 1.5rem;
+    height: 1.5rem;
     -webkit-animation: spinCircle 1s infinite linear;
     animation: spinCircle 1s infinite linear;
   }
diff --git a/packages/ui/src/components/StatusControl.svelte b/packages/ui/src/components/StatusControl.svelte
index 91eacbd3f3..f6d2d719b5 100644
--- a/packages/ui/src/components/StatusControl.svelte
+++ b/packages/ui/src/components/StatusControl.svelte
@@ -23,20 +23,17 @@
 </script>
 
 {#if status.severity !== Severity.OK}
-<div class="message-container" class:error={status.severity === Severity.ERROR}>
+<div class="flex-row-center container" class:error={status.severity === Severity.ERROR}>
   <StatusControl {status} />
 </div>
 {/if}
 
 <style lang="scss">
-  .message-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 12px 16px;
+  .container {
+    padding: .75rem 1rem;
     background-color: var(--theme-bg-accent-color);
     border: 1px solid var(--theme-bg-accent-hover);
-    border-radius: 8px;
+    border-radius: .5rem;
   }
 
   .error {
diff --git a/packages/ui/src/components/StylishEdit.svelte b/packages/ui/src/components/StylishEdit.svelte
index d93e895c29..3e2ad8dfff 100644
--- a/packages/ui/src/components/StylishEdit.svelte
+++ b/packages/ui/src/components/StylishEdit.svelte
@@ -26,9 +26,9 @@
 
 <div class="editbox{error ? ' error' : ''}" style={width ? 'width: ' + width : ''}>
   {#if password}
-    <input type="password" class:nolabel={!label} {id} bind:value on:change on:keyup placeholder=" " />
+    <input type="password" class:nolabel={!label} {id} bind:value on:change on:keyup autocomplete="off" placeholder=" " />
   {:else}
-    <input type="text" class:nolabel={!label} {id} bind:value on:change on:keyup placeholder=" " />
+    <input type="text" class:nolabel={!label} {id} bind:value on:change on:keyup autocomplete="off" placeholder=" " />
   {/if}
   {#if label}
     <div class="label"><Label {label} /></div>
@@ -41,27 +41,22 @@
     display: flex;
     flex-direction: column;
     padding: 0;
-    min-width: 50px;
-    height: 52px;
+    min-width: 3rem;
+    height: 3.25rem;
     background-color: var(--theme-bg-accent-color);
     border: 1px solid var(--theme-bg-accent-hover);
-    border-radius: 12px;
+    border-radius: .75rem;
     &:focus-within {
       background-color: var(--theme-bg-focused-color);
       border-color: var(--theme-bg-focused-border);
     }
     input {
-      height: 52px;
+      height: 3.25rem;
       margin: 0;
-      padding: 14px 20px 0px;
-      font-family: inherit;
-      color: var(--theme-caption-color);
+      padding: .875rem 1.25rem 0px;
       background-color: transparent;
-      outline: none;
       border: none;
-      border-radius: 12px;
-      font-size: 14px;
-      line-height: 17px;
+      border-radius: .75rem;
     }
     .nolabel {
       padding-top: 0;
@@ -69,19 +64,18 @@
 
     .label {
       position: absolute;
-      top: 18px;
-      left: 20px;
-      font-size: 12px;
-      line-height: 14px;
+      top: 1rem;
+      left: 1.25rem;
+      font-size: .75rem;
       color: var(--theme-caption-color);
-      pointer-events: none;
-      opacity: 0.3;
+      opacity: .3;
       transition: top 200ms;
+      pointer-events: none;
       user-select: none;
     }
     input:focus + .label,
     input:not(:placeholder-shown) + .label {
-      top: 10px;
+      top: .5rem;
     }
   }
   .error {
diff --git a/packages/ui/src/components/Tabs.svelte b/packages/ui/src/components/Tabs.svelte
index c29dc658fa..c91b3fc805 100644
--- a/packages/ui/src/components/Tabs.svelte
+++ b/packages/ui/src/components/Tabs.svelte
@@ -25,9 +25,9 @@
   export let selected: IntlString = 'General'
 </script>
 
-<div class="tabs-container">
+<div class="flex-stretch container">
   {#each tabs as tab}
-    <div class="tab" class:selected={tab.title === selected}
+    <div class="flex-row-center tab" class:selected={tab.title === selected}
          on:click={() => { selected = tab.title }}>
       <Label label={tab.title}/>
     </div>
@@ -36,37 +36,32 @@
 </div>
 
 <style lang="scss">
-  .tabs-container {
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
+  .container {
     flex-wrap: nowrap;
-    margin-bottom: 16px;
+    margin-bottom: 1rem;
     width: 100%;
-    height: 72px;
-    min-height: 72px;
+    height: 4.5rem;
+    min-height: 4.5rem;
     border-bottom: 1px solid var(--theme-menu-divider);
 
     .tab {
-      display: flex;
-      align-items: center;
-      height: 72px;
+      height: 4.5rem;
       color: var(--theme-content-trans-color);
       cursor: pointer;
       user-select: none;
 
       &.selected {
-        border-top: 2px solid transparent;
-        border-bottom: 2px solid var(--theme-caption-color);
+        border-top: .125rem solid transparent;
+        border-bottom: .125rem solid var(--theme-caption-color);
         color: var(--theme-caption-color);
         cursor: default;
       }
     }
     .tab + .tab {
-      margin-left: 40px;
+      margin-left: 2.5rem;
     }
     .grow {
-      min-width: 40px;
+      min-width: 2.5rem;
       flex-grow: 1;
     }
   }
diff --git a/packages/ui/src/components/TextArea.svelte b/packages/ui/src/components/TextArea.svelte
index f68e2b4546..009ad40fa7 100644
--- a/packages/ui/src/components/TextArea.svelte
+++ b/packages/ui/src/components/TextArea.svelte
@@ -33,31 +33,30 @@
   .textarea {
     display: flex;
     flex-direction: column;
-    min-width: 50px;
-    min-height: 36px;
+    min-width: 3.125rem;
+    min-height: 2.25rem;
 
     .label {
-      margin-bottom: 4px;
-      font-size: 12px;
+      margin-bottom: .25rem;
+      font-size: .75rem;
       font-weight: 500;
-      color: var(--theme-caption-color);
-      opacity: .8;
+      color: var(--theme-content-accent-color);
       pointer-events: none;
       user-select: none;
     }
 
     textarea {
       width: auto;
-      min-height: 70px;
-      margin: -3px;
-      padding: 2px;
+      min-height: 4.5rem;
+      margin: -.25rem;
+      padding: .125rem;
       font-family: inherit;
-      font-size: 14px;
+      font-size: inherit;
       line-height: 150%;
       color: var(--theme-caption-color);
       background-color: transparent;
-      border: 1px solid transparent;
-      border-radius: 2px;
+      border: .125rem solid transparent;
+      border-radius: .125rem;
       outline: none;
       overflow-y: scroll;
       resize: none;
diff --git a/packages/ui/src/components/Toggle.svelte b/packages/ui/src/components/Toggle.svelte
index 05f9c3f252..e939c85560 100644
--- a/packages/ui/src/components/Toggle.svelte
+++ b/packages/ui/src/components/Toggle.svelte
@@ -25,10 +25,10 @@
 <style lang="scss">
   .toggle {
     display: inline-block;
-    height: 28px;
-    line-height: 28px;
+    height: 1.75rem;
+    line-height: 1.75rem;
     vertical-align: middle;
-    font-size: 14px;
+    font-size: inherit;
     user-select: none;
     .chBox {
       position: absolute;
@@ -43,7 +43,7 @@
       &:checked + .toggle-switch {
         background-color: var(--theme-on-color);
         &:before {
-          transform: translateX(22px);
+          left: 1.625rem;
         }
       }
       &:not(:disabled) + .toggle-switch {
@@ -60,25 +60,28 @@
         box-shadow: 0 0 0 2px var(--primary-button-outline);
       }
     }
+    &:active > .toggle-switch {
+      border: 1px solid var(--primary-button-focused-border);
+      box-shadow: 0 0 0 2px var(--primary-button-outline);
+    }
     .toggle-switch {
       position: relative;
       display: inline-block;
-      box-sizing: border-box;
-      width: 54px;
-      height: 30px;
-      border-radius: 50px;
-      vertical-align: top;
+      width: 3.5rem;
+      height: 1.875rem;
+      border-radius: 3.125rem;
+      // vertical-align: top;
       background-color: var(--theme-off-color);
       border: 1px solid transparent;
-      transition: .2s;
+      transition: left .2s;
       &:before {
         content: '';
         position: absolute;
-        top: 2px;
-        left: 3px;
+        top: .125rem;
+        left: .25rem;
         display: inline-block;
-        width: 24px;
-        height: 24px;
+        width: 1.5rem;
+        height: 1.5rem;
         border-radius: 50%;
         background: #fff;
         box-shadow: 1px 2px 7px rgba(119, 129, 142, 0.1);
diff --git a/packages/ui/src/components/ToggleWithLabel.svelte b/packages/ui/src/components/ToggleWithLabel.svelte
index 0e36cac046..02d1377219 100644
--- a/packages/ui/src/components/ToggleWithLabel.svelte
+++ b/packages/ui/src/components/ToggleWithLabel.svelte
@@ -25,7 +25,7 @@
   export let on: boolean = false
 </script>
 
-<div class="toggleWithLabel">
+<div class="flex-between">
   <div class="caption">
     <Label {label} />
     {#if description}
@@ -36,21 +36,14 @@
 </div>
 
 <style lang="scss">
-  .toggleWithLabel {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .caption {
-      margin-right: 16px;
-      font-size: 14px;
-      font-weight: 400;
-      color: var(--theme-caption-color);
-      user-select: none;
-      span {
-        display: block;
-        font-size: 12px;
-        opacity: .3;
-      }
+  .caption {
+    margin-right: 1rem;
+    color: var(--theme-caption-color);
+    user-select: none;
+    span {
+      display: block;
+      font-size: .75rem;
+      color: var(--theme-caption-trans-color);
     }
   }
 </style>
diff --git a/packages/ui/src/components/Tooltip.svelte b/packages/ui/src/components/Tooltip.svelte
index b5d256324a..501abf613e 100644
--- a/packages/ui/src/components/Tooltip.svelte
+++ b/packages/ui/src/components/Tooltip.svelte
@@ -18,10 +18,10 @@
   import Label from './Label.svelte'
 
   export let label: IntlString
-  export let direction: string = 'top'
+  export let direction: 'top' | 'bottom' | 'left' | 'right' = 'top'
 </script>
 
-<div class="tooltip-container">
+<div class="flex-center container">
   <div class="trigger"><slot/></div>
   <div class="tooltip {direction}">
     <Label label={label}/>
@@ -29,37 +29,34 @@
 </div>
 
 <style lang="scss">
-  .tooltip-container {
+  .container {
     position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
     
     .trigger:hover + .tooltip {
       opacity: 1;
       &.top {
-        transform: translateY(-10px);
+        transform: translateY(-.625rem);
       }
       &.bottom {
-        transform: translateY(10px);
+        transform: translateY(.625rem);
       }
       &.right {
-        transform: translateX(10px);
+        transform: translateX(.625rem);
       }
       &.left {
-        transform: translateX(-10px);
+        transform: translateX(-.625rem);
       }
     }
 
     .tooltip {
       box-sizing: border-box;
       position: absolute;
-      padding: 8px;
+      padding: .5rem;
       color: var(--theme-caption-color);
       background-color: var(--theme-tooltip-color);
       border: 1px solid var(--theme-bg-accent-color);
-      border-radius: 8px;
-      box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.25);
+      border-radius: .5rem;
+      box-shadow: 0px .5rem 1.25rem rgba(0, 0, 0, .25);
       opacity: 0;
       transition: transform .3s ease, opacity .2s ease-in-out;
       pointer-events: none;
@@ -71,52 +68,52 @@
       &::after {
         content: "";
         position: absolute;
-        width: 14px;
-        height: 14px;
+        width: .875rem;
+        height: .875rem;
         background-color: var(--theme-tooltip-color);
         border: 1px solid var(--theme-bg-accent-color);
-        border-radius: 0 0 3px;
-        mask-image: linear-gradient(-45deg, rgba(0, 0, 0, 1) 9px, rgba(0, 0, 0, 0) 9.1px);
+        border-radius: 0 0 .25rem;
+        mask-image: linear-gradient(-45deg, rgba(0, 0, 0, 1) .655rem, rgba(0, 0, 0, 0) .656rem);
       }
 
       &.top::after, &.bottom::after {
         left: 50%;
-        margin-left: -8px;
+        margin-left: -.5rem;
       }
       &.top {
         bottom: 100%;
-        box-shadow: 0px -8px 20px rgba(0, 0, 0, 0.25);
+        box-shadow: 0px -.5rem 1.25rem rgba(0, 0, 0, .25);
         &::after {
-          bottom: -5px;
+          bottom: -.5rem;
           transform: rotate(45deg);
         }
       }
       &.bottom {
         top: 100%;
-        box-shadow: 0px -8px 20px rgba(0, 0, 0, 0.25);
+        box-shadow: 0px -.5rem 1.25rem rgba(0, 0, 0, .25);
         &::after {
-          top: -5px;
+          top: -.5rem;
           transform: rotate(-135deg);
         }
       }
 
       &.right::after, &.left::after {
         top: 50%;
-        margin-top: -8px;
+        margin-top: -.5rem;
       }
       &.right {
         left: 100%;
-        box-shadow: -8px 0px 20px rgba(0, 0, 0, 0.25);
+        box-shadow: -.5rem 0px 1.25rem rgba(0, 0, 0, .25);
         &::after {
-          left: -5px;
+          left: -.4rem;
           transform: rotate(135deg);
         }
       }
       &.left {
         right: 100%;
-        box-shadow: 8px 0px 20px rgba(0, 0, 0, 0.25);
+        box-shadow: .5rem 0px 1.25rem rgba(0, 0, 0, .25);
         &::after {
-          right: -5px;
+          right: -.4rem;
           transform: rotate(-45deg);
         }
       }
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index f19e22e26e..f373d2ab09 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -38,7 +38,6 @@ export { default as Tabs } from './components/Tabs.svelte'
 export { default as ScrollBox } from './components/ScrollBox.svelte'
 export { default as PopupMenu } from './components/PopupMenu.svelte'
 export { default as PopupItem } from './components/PopupItem.svelte'
-export { default as SelectBox } from './components/SelectBox.svelte'
 export { default as SelectItem } from './components/SelectItem.svelte'
 export { default as TextArea } from './components/TextArea.svelte'
 export { default as Section } from './components/Section.svelte'
diff --git a/plugins/chunter-resources/src/components/Channel.svelte b/plugins/chunter-resources/src/components/Channel.svelte
index b2c870b64c..840b375e66 100644
--- a/plugins/chunter-resources/src/components/Channel.svelte
+++ b/plugins/chunter-resources/src/components/Channel.svelte
@@ -29,7 +29,7 @@
   $: query.query(chunter.class.Message, { space }, result => { messages = result })
 </script>
 
-<div class="channel-container">
+<div class="flex-col container">
   {#if messages}
     {#each messages as message}
       <MessageComponent {message}/>
@@ -38,9 +38,7 @@
 </div>
 
 <style lang="scss">
-  .channel-container {
-    display: flex;
-    flex-direction: column;
+  .container {
     flex-shrink: 0;
   }
 </style>
diff --git a/plugins/chunter-resources/src/components/ChannelSeparator.svelte b/plugins/chunter-resources/src/components/ChannelSeparator.svelte
index 2ee9ee5d17..1d06ab2498 100644
--- a/plugins/chunter-resources/src/components/ChannelSeparator.svelte
+++ b/plugins/chunter-resources/src/components/ChannelSeparator.svelte
@@ -20,25 +20,22 @@
   export let line: boolean = false
 </script>
 
-<div class="separator-container" class:line={line}>
+<div class="flex-center container" class:line={line}>
   <div class="title">{title}</div>
 </div>
 
 <style lang="scss">
-  .separator-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  .container {
     width: 100%;
-    height: 28px;
-    margin-bottom: 32px;
+    height: 1.75rem;
+    margin-bottom: 2rem;
 
     .title {
       position: relative;
-      padding: 6px 12px;
+      padding: .375rem .75rem;
       font-weight: 600;
-      font-size: 12px;
-      letter-spacing: .5px;
+      font-size: .75rem;
+      letter-spacing: .5;
       text-transform: uppercase;
       color: var(--theme-content-trans-color);
       z-index: 1;
@@ -50,7 +47,7 @@
         left: 0;
         width: 100%;
         height: 100%;
-        border-radius: 20px;
+        border-radius: 1.25rem;
         background-color: var(--theme-chat-divider);
         z-index: -1;
       }
diff --git a/plugins/chunter-resources/src/components/ChannelView.svelte b/plugins/chunter-resources/src/components/ChannelView.svelte
index edbf6cf499..f6be3ac446 100644
--- a/plugins/chunter-resources/src/components/ChannelView.svelte
+++ b/plugins/chunter-resources/src/components/ChannelView.svelte
@@ -45,11 +45,11 @@
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    margin: 15px 15px 0px;
-    padding: 25px 25px 0px;
+    margin: 1rem 1rem 0;
+    padding: 1.5rem 1.5rem 0px;
     overflow: auto;
   }
   .reference {
-    margin: 20px 40px;
+    margin: 1.25rem 2.5rem;
   }
 </style>
diff --git a/plugins/chunter-resources/src/components/Message.svelte b/plugins/chunter-resources/src/components/Message.svelte
index 6aa809c407..38e9090294 100644
--- a/plugins/chunter-resources/src/components/Message.svelte
+++ b/plugins/chunter-resources/src/components/Message.svelte
@@ -14,6 +14,7 @@
 -->
 
 <script lang="ts">
+  import { Avatar } from '@anticrm/presentation'
   import type { Message } from '@anticrm/chunter'
   import { ActionIcon } from '@anticrm/ui'
   import Emoji from './icons/Emoji.svelte'
@@ -22,7 +23,6 @@
   import MoreH from './icons/MoreH.svelte'
   import Reactions from './Reactions.svelte'
   import Replies from './Replies.svelte'
-  import avatar from '../../img/avatar.png'
 
   import { MessageViewer } from '@anticrm/presentation'
 
@@ -35,8 +35,8 @@
   let thread: boolean = false
 </script>
 
-<div class="message-container">
-  <div class="avatar"><img src={avatar} alt="Avatar"></div>
+<div class="container">
+  <div class="avatar"><Avatar size={'medium'} /></div>
   <div class="message">
     <div class="header">{name}<span>{time}</span></div>
     <div class="text"><MessageViewer message={message.content}/></div>
@@ -58,39 +58,32 @@
 </div>
 
 <style lang="scss">
-  .message-container {
+  .container {
     position: relative;
     display: flex;
-    margin-bottom: 32px;
+    margin-bottom: 2rem;
     z-index: 1;
 
-    .avatar {
-      min-width: 36px;
-      width: 36px;
-      height: 36px;
-      background-color: var(--theme-bg-accent-color);
-      border-radius: 50%;
-      user-select: none;
-    }
+    .avatar { min-width: 2.25rem; }
 
     .message {
       display: flex;
       flex-direction: column;
       width: 100%;
-      margin-left: 16px;
+      margin-left: 1rem;
 
       .header {
         font-weight: 500;
-        font-size: 16px;
+        font-size: 1rem;
         line-height: 150%;
         color: var(--theme-caption-color);
-        margin-bottom: 4px;
+        margin-bottom: .25rem;
 
         span {
-          margin-left: 8px;
+          margin-left: .5rem;
           font-weight: 400;
-          font-size: 14px;
-          line-height: 18px;
+          font-size: .875rem;
+          line-height: 1.125rem;
           opacity: .4;
         }
       }
@@ -101,12 +94,12 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        height: 32px;
-        margin-top: 8px;
+        height: 2rem;
+        margin-top: .5rem;
         user-select: none;
 
         div + div {
-          margin-left: 16px;
+          margin-left: 1rem;
         }
       }
     }
@@ -114,22 +107,14 @@
     .buttons {
       position: absolute;
       visibility: hidden;
-      top: -8px;
-      right: -8px;
+      top: -.5rem;
+      right: -.5rem;
       display: flex;
       flex-direction: row-reverse;
       user-select: none;
 
-      .tool {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 20px;
-        height: 20px;
-      }
-
       .tool + .tool {
-        margin-right: 8px;
+        margin-right: .5rem;
       }
     }
 
@@ -142,13 +127,13 @@
 
     &::before {
       position: absolute;
-      top: -20px;
-      left: -20px;
-      width: calc(100% + 40px);
-      height: calc(100% + 40px);
+      top: -1.25rem;
+      left: -1.25rem;
+      width: calc(100% + 2.5rem);
+      height: calc(100% + 2.5rem);
       background-color: var(--theme-button-bg-enabled);
       border: 1px solid var(--theme-bg-accent-color);
-      border-radius: 12px;
+      border-radius: .75rem;
       z-index: -1;
     }
   }
diff --git a/plugins/chunter-resources/src/components/Reactions.svelte b/plugins/chunter-resources/src/components/Reactions.svelte
index 32cd396de2..9fe10f19d9 100644
--- a/plugins/chunter-resources/src/components/Reactions.svelte
+++ b/plugins/chunter-resources/src/components/Reactions.svelte
@@ -26,38 +26,21 @@
   export let reactions: Reaction[] = [{ icon: Check, count: 3}, { icon: Heart, count: 10}]
 </script>
 
-<div class="reactions-container">
+<div class="container">
   {#each reactions as reaction}
-    <div class="reaction">
-      <div class="icon"><svelte:component this={reaction.icon} size={'medium'}/></div>
-      <div class="counter">{reaction.count}</div>
+    <div class="flex-row-center reaction">
+      <svelte:component this={reaction.icon} size={'medium'}/>
+      <div class="caption-color counter">{reaction.count}</div>
     </div>
   {/each}
 </div>
 
 <style lang="scss">
-  .reactions-container {
+  .container {
     display: flex;
     user-select: none;
 
-    .reaction {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: nowrap;
-      align-items: center;
-
-      .icon {
-        width: 20px;
-        height: 20px;
-      }
-      .counter {
-        margin-left: 4px;
-        color: var(--theme-caption-color);
-      }
-    }
-
-    .reaction + .reaction {
-      margin-left: 16px;
-    }
+    .counter { margin-left: .25rem; }
+    .reaction + .reaction { margin-left: 1rem; }
   }
 </style>
\ No newline at end of file
diff --git a/plugins/chunter-resources/src/components/Replies.svelte b/plugins/chunter-resources/src/components/Replies.svelte
index 38da3bc3ae..b716cf35b4 100644
--- a/plugins/chunter-resources/src/components/Replies.svelte
+++ b/plugins/chunter-resources/src/components/Replies.svelte
@@ -14,7 +14,7 @@
 -->
 
 <script lang="ts">
-  import avatar from '../../img/avatar.png'
+  import { Avatar } from '@anticrm/presentation'
 
   export let replies: string[] = ['Chen', 'Elon', 'Tim', 'Elon', 'Tim', 'Chen']
 
@@ -25,11 +25,11 @@
   }
 </script>
 
-<div class="replies-container">
+<div class="flex-row-center container">
   <div class="counter">{replies.length} Replies</div>
-  <div class="replies">
+  <div class="flex-row-center">
     {#each showReplies as reply}
-      <div class="reply"><img class="circle" src={avatar} alt={reply}></div>
+      <div class="reply"><Avatar size={'x-small'} /></div>
     {/each}
     {#if replies.length > shown}
       <div class="reply"><span>+{replies.length - shown}</span></div>
@@ -38,57 +38,42 @@
 </div>
 
 <style lang="scss">
-  .replies-container {
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
+  .container {
     user-select: none;
 
     .counter {
-      margin-right: 12px;
+      margin-right: .75rem;
       line-height: 150%;
       color: var(--theme-content-color);
       white-space: nowrap;
     }
 
-    .replies {
+    .reply {
       display: flex;
-      flex-wrap: nowrap;
+      justify-content: center;
       align-items: center;
+      width: 1rem;
+      height: 1rem;
+      background-color: var(--theme-bg-color);
+      border-radius: 50%;
+      margin-right: -.625rem;
 
-      .reply {
+      span {
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 32px;
-        height: 32px;
-        background-color: var(--theme-bg-color);
+        width: 1.5rem;
+        height: 1.5rem;
+        font-size: .75rem;
+        font-weight: 500;
+        line-height: .5;
+        color: var(--theme-caption-color);
+        background-color: var(--theme-bg-selection);
         border-radius: 50%;
-        margin-right: -10px;
+      }
 
-        .circle {
-          width: 28px;
-          height: 28px;
-          border-radius: 50%;
-        }
-
-        span {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 28px;
-          height: 28px;
-          font-size: 12px;
-          font-weight: 500;
-          line-height: .5;
-          color: var(--theme-caption-color);
-          background-color: var(--theme-bg-selection);
-          border-radius: 50%;
-        }
-
-        &:last-child {
-          margin-right: 0;
-        }
+      &:last-child {
+        margin-right: 0;
       }
     }
   }
diff --git a/plugins/contact-resources/src/components/PersonPresenter.svelte b/plugins/contact-resources/src/components/PersonPresenter.svelte
index b326e7621f..769e3dcaea 100644
--- a/plugins/contact-resources/src/components/PersonPresenter.svelte
+++ b/plugins/contact-resources/src/components/PersonPresenter.svelte
@@ -23,6 +23,6 @@ export let value: Person
 
 </script>
 
-<UserInfo {value}/>
+<UserInfo size={'x-small'} {value}/>
 
   
\ No newline at end of file
diff --git a/plugins/login-resources/src/components/Form.svelte b/plugins/login-resources/src/components/Form.svelte
index 11eac3bd7e..8f2fd465a8 100644
--- a/plugins/login-resources/src/components/Form.svelte
+++ b/plugins/login-resources/src/components/Form.svelte
@@ -65,7 +65,7 @@
 
 </script>
 
-<form class="form-container">
+<form class="container">
   <div class="grow-separator"/>
   <div class="title"><Label label={caption}/></div>
   <div class="status">
@@ -75,7 +75,7 @@
 
     {#each fields as field (field.name)}
     <div class={field.short ? 'form-col' : 'form-row'}>
-      <StylishEdit label={field.i18n} password={field.password} bind:value={object[field.name]} on:keyup={validate} on:focus={validate}/>
+      <StylishEdit label={field.i18n} password={field.password} bind:value={object[field.name]} on:keyup={validate} on:focus={validate} />
     </div>
     {/each}
 
@@ -106,59 +106,54 @@
   </div> -->
 
 <style lang="scss">
-
-  .form-container {
+  .container {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     overflow: hidden;
     height: 100%;
-    padding: 80px 80px;
+    padding: 5rem;
 
     .title {
       font-weight: 600;
-      font-size: 24px;
-      line-height: 29px;
-      color: #FFFFFF;
+      font-size: 1.5rem;
+      color: var(--theme-caption-color);
     }
     .status {
-      min-height: 120px;
-      max-height: 120px;
-      padding-top: 20px;
+      min-height: 7.5rem;
+      max-height: 7.5rem;
+      padding-top: 1.25rem;
     }
     
     .form {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      column-gap: 12px;
-      row-gap: 24px;
+      column-gap: .75rem;
+      row-gap: 1.5rem;
 
       .form-row {
         grid-column-start: 1;
         grid-column-end: 3;
       }
       .send {
-        margin-top: 36px;
+        margin-top: 2.25rem;
       }
     }
     .grow-separator {
       flex-grow: 1;
     }
     .footer {
-      margin-top: 56px;
-      font-size: 13px;
-      line-height: 16px;
-      color: #FFFFFF;
+      margin-top: 3.5rem;
+      font-size: .8rem;
+      color: var(--theme-caption-color);
       span {
-        opacity: 0.3;
+        opacity: .3;
       }
       a {
-        color: #fff;
-        opacity: 0.8;
         text-decoration: none;
-        :hover {
-          opacity: 1;
-        }
+        color: var(--theme-caption-color);
+        opacity: .8;
+        &:hover { opacity: 1; }
       }
     }
   }
diff --git a/plugins/login-resources/src/components/LoginApp.svelte b/plugins/login-resources/src/components/LoginApp.svelte
index e69fd63b7d..d7a9b426d8 100644
--- a/plugins/login-resources/src/components/LoginApp.svelte
+++ b/plugins/login-resources/src/components/LoginApp.svelte
@@ -20,7 +20,7 @@
   let page = 'login'
 </script>
 
-<div class="panel-container">
+<div class="container">
   <div class="panel">
     {#if page === 'login'}
       <LoginForm on:switch={(event) => page = event.detail}/>
@@ -40,19 +40,17 @@
 </div>
 
 <style lang="scss">
-  // @import "@anticrm/theme/styles/mixins.scss";
-
-  .panel-container {
+  .container {
     display: flex;
     flex-direction: row;
     height: 100%;
-    padding: 0px 20px 20px 20px;
+    padding: 0px 1.25rem 1.25rem 1.25rem;
 
     .panel {
-      margin-right: 20px;
-      width: 668px;
+      margin-right: 1.25rem;
+      width: 41.75rem;
       height: 100%;
-      border-radius: 20px;
+      border-radius: 1.25rem;
       background-color: var(--theme-menu-selection);
     }
 
@@ -61,14 +59,14 @@
       flex-direction: column;
       flex-grow: 1;
       overflow: hidden;
-      min-width: 320px;
+      min-width: 20rem;
 
       .content {
         display: flex;
         flex-direction: column;
-        flex-grow: 1;
         justify-content: center;
         align-items: center;
+        flex-grow: 1;
         .logo {
           position: relative;
           &:after {
@@ -83,11 +81,11 @@
             position: absolute;
             content: "";
             transform: translate(-50%, -50%);
-            width: 255px;
-            height: 255px;
-            border: 1.8px solid #FFFFFF;
+            width: 16rem;
+            height: 16rem;
+            border: 1.8px solid var(--theme-caption-color);
             border-radius: 50%;
-            opacity: 0.08;
+            opacity: .08;
           }
         }
       }
@@ -96,11 +94,10 @@
         p {
           margin: 0;
           font-weight: 400;
-          font-size: 13px;
-          line-height: 19px;
+          font-size: .8rem;
           text-align: center;
-          color: #FFFFFF;
-          opacity: 0.8;
+          color: var(--theme-caption-color);
+          opacity: .8;
         }
       }
     }
diff --git a/plugins/recruit-resources/src/components/Card.svelte b/plugins/recruit-resources/src/components/Card.svelte
index 4f2defe2a1..ddffee726d 100644
--- a/plugins/recruit-resources/src/components/Card.svelte
+++ b/plugins/recruit-resources/src/components/Card.svelte
@@ -32,9 +32,9 @@
 
 </script>
 
-<div class="card-container">
+<div class="container">
   <div class="status"><LabelStatus label={user.state} color={'var(--primary-button-enabled)'} /></div>
-  <div class="avatar"><Avatar size={88} /></div>
+  <div class="avatar"><Avatar size={'large'} /></div>
   <div class="name">{user.lastName} {user.firstName}</div>
   <div class="description">{user.description}</div>
   <div class="city">{user.city}</div>
@@ -42,42 +42,42 @@
 </div>
 
 <style lang="scss">
-  .card-container {
+  .container {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 20px 24px;
+    padding: 1.25rem 1.5rem;
     background-color: var(--theme-button-bg-enabled);
     border: 1px solid var(--theme-bg-accent-color);
-    border-radius: 12px;
+    border-radius: .75rem;
 
     .status {
       display: flex;
       flex-direction: row-reverse;
       width: 100%;
-      margin-bottom: 16px;
+      margin-bottom: 1rem;
     }
     .avatar {
-      height: 88px;
+      height: 5rem;
     }
     .name {
-      margin: 16px 0 4px;
+      margin: 1rem 0 .25rem;
       font-weight: 500;
-      font-size: 16px;
+      font-size: 1rem;
       line-height: 150%;
       color: var(--theme-caption-color);
     }
     .description, .city {
-      font-size: 12px;
+      font-size: .75rem;
       color: var(--theme-content-dark-color);
     }
     .city {
-      margin-bottom: 16px;
+      margin-bottom: 1rem;
     }
 
     &:hover {
       background-color: var(--theme-bg-accent-hover);
-      box-shadow: 0px 12px 40px rgba(0, 0, 0, .15);
+      box-shadow: 0px .75rem 2.5rem rgba(0, 0, 0, .15);
     }
   }
 </style>
diff --git a/plugins/recruit-resources/src/components/CardEmpty.svelte b/plugins/recruit-resources/src/components/CardEmpty.svelte
index 1f8fac0218..9a56f4538f 100644
--- a/plugins/recruit-resources/src/components/CardEmpty.svelte
+++ b/plugins/recruit-resources/src/components/CardEmpty.svelte
@@ -42,7 +42,7 @@
     color: var(--theme-caption-color);
     background-color: var(--theme-button-bg-enabled);
     border: 1px solid var(--theme-bg-accent-color);
-    border-radius: 12px;
+    border-radius: .75rem;
     cursor: pointer;
 
     .circle {
diff --git a/plugins/recruit-resources/src/components/CreateCandidate.svelte b/plugins/recruit-resources/src/components/CreateCandidate.svelte
index 4d6be7dee2..f329312973 100644
--- a/plugins/recruit-resources/src/components/CreateCandidate.svelte
+++ b/plugins/recruit-resources/src/components/CreateCandidate.svelte
@@ -17,6 +17,7 @@
   import { createEventDispatcher } from 'svelte'
   import type { Ref, Space } from '@anticrm/core'
   import { TextArea, EditBox, Dialog, Tabs, Section, Grid } from '@anticrm/ui'
+  import DialogHeader from './DialogHeader.svelte'
   import File from './icons/File.svelte'
   import Address from './icons/Address.svelte'
   import Attachment from './icons/Attachment.svelte'
diff --git a/plugins/recruit-resources/src/components/DialogHeader.svelte b/plugins/recruit-resources/src/components/DialogHeader.svelte
index 19dc3268c3..6d55e3ce34 100644
--- a/plugins/recruit-resources/src/components/DialogHeader.svelte
+++ b/plugins/recruit-resources/src/components/DialogHeader.svelte
@@ -47,13 +47,11 @@
     on:dragover|preventDefault={ ()=>{} }
     on:dragleave={ () => { dragover = false } }
     on:drop|preventDefault|stopPropagation={drop}>
-  <div class="user-container">
+  <div class="flex-col-center">
     <div class="avatar"></div>
-    <div class="info">
-      <div class="name">Candidate Name</div>
-      <div class="title">Candidate title</div>
-      <!-- <input type="file" name="file" id="file"/> -->
-    </div>
+    <div class="name">Candidate Name</div>
+    <div class="title">Candidate title</div>
+    <!-- <input type="file" name="file" id="file"/> -->
   </div>
 </div>
 
@@ -63,49 +61,35 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 640px;
-    min-height: 240px;
+    width: 40rem;
+    min-height: 15rem;
     background-image: url(../../img/header-green.png);
     background-repeat: no-repeat;
     background-clip: border-box;
     background-size: cover;
-    border-radius: 20px;
+    border-radius: 1.25rem;
 
     &.dragover {
       border: 1px solid red;
     }
 
-    .user-container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-
-      .avatar {
-        width: 80px;
-        height: 80px;
-        border-radius: 50%;
-        background-color: #C4C4C4;
-      }
-
-      .info {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin-top: 10px;
-
-        .name {
-          font-size: 16px;
-          font-weight: 500;
-          line-height: 150%;
-          color: var(--theme-caption-color);
-        }
-        .title {
-          font-size: 12px;
-          font-weight: 500;
-          color: var(--theme-caption-color);
-          opacity: .6;
-        }
-      }
+    .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: var(--theme-caption-color);
+    }
+    .title {
+      font-size: .75rem;
+      font-weight: 500;
+      color: var(--theme-content-color);
     }
   }
 
diff --git a/plugins/recruit-resources/src/components/EditCandidate.svelte b/plugins/recruit-resources/src/components/EditCandidate.svelte
index 3eddefc28e..f5b49c323b 100644
--- a/plugins/recruit-resources/src/components/EditCandidate.svelte
+++ b/plugins/recruit-resources/src/components/EditCandidate.svelte
@@ -22,6 +22,7 @@
   import type { Candidate } from '@anticrm/recruit'
   import type { Backlink } from '@anticrm/chunter'
   import { Backlink as BacklinkComponent } from '@anticrm/presentation'
+  import DialogHeader from './DialogHeader.svelte'
   import File from './icons/File.svelte'
   import Address from './icons/Address.svelte'
   import Attachment from './icons/Attachment.svelte'
diff --git a/plugins/recruit-resources/src/components/KanbanCard.svelte b/plugins/recruit-resources/src/components/KanbanCard.svelte
index c7075ce5b4..c1951924d8 100644
--- a/plugins/recruit-resources/src/components/KanbanCard.svelte
+++ b/plugins/recruit-resources/src/components/KanbanCard.svelte
@@ -36,7 +36,7 @@
 
 <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={28} />
+    <UserInfo value={{firstName: card.firstName, lastName: card.lastName }} subtitle={'Candidate'} size={'small'} />
     <ActionIcon icon={MoreH} label={'More..'} direction={'left'} />
   </div>
   <div class="content">
@@ -55,7 +55,7 @@
     align-items: stretch;
     background-color: var(--theme-button-bg-hovered);
     border: 1px solid var(--theme-bg-accent-color);
-    border-radius: 12px;
+    border-radius: .75rem;
     user-select: none;
 
     .header {
diff --git a/plugins/recruit-resources/src/components/KanbanCardEmpty.svelte b/plugins/recruit-resources/src/components/KanbanCardEmpty.svelte
index 554fc26ff4..e9f2a6ddbd 100644
--- a/plugins/recruit-resources/src/components/KanbanCardEmpty.svelte
+++ b/plugins/recruit-resources/src/components/KanbanCardEmpty.svelte
@@ -39,7 +39,7 @@
     color: var(--theme-content-dark-color);
     background-color: var(--theme-button-bg-hovered);
     border: 1px dotted var(--theme-bg-accent-color);
-    border-radius: 12px;
+    border-radius: .75rem;
     cursor: pointer;
 
     .icon {
diff --git a/plugins/recruit-resources/src/components/KanbanPanel.svelte b/plugins/recruit-resources/src/components/KanbanPanel.svelte
index f88868591e..8f903754b9 100644
--- a/plugins/recruit-resources/src/components/KanbanPanel.svelte
+++ b/plugins/recruit-resources/src/components/KanbanPanel.svelte
@@ -43,7 +43,7 @@
     height: 100%;
     background-color: var(--theme-button-bg-enabled);
     border: 1px solid var(--theme-bg-accent-color);
-    border-radius: 12px;
+    border-radius: .75rem;
 
     .header {
       display: flex;
@@ -54,7 +54,7 @@
       min-height: 44px;
       font-weight: 500;
       border: 1px solid rgba(0, 0, 0, .1);
-      border-radius: 8px;
+      border-radius: .5rem;
 
       .title {
         padding-left: 8px;
diff --git a/plugins/recruit-resources/src/components/KanbanPanelEmpty.svelte b/plugins/recruit-resources/src/components/KanbanPanelEmpty.svelte
index fc1e0b4097..51cd52e50c 100644
--- a/plugins/recruit-resources/src/components/KanbanPanelEmpty.svelte
+++ b/plugins/recruit-resources/src/components/KanbanPanelEmpty.svelte
@@ -44,7 +44,7 @@
     color: var(--theme-caption-color);
     background-color: var(--theme-button-bg-enabled);
     border: 1px dotted var(--theme-bg-accent-color);
-    border-radius: 12px;
+    border-radius: .75rem;
     cursor: pointer;
 
     .circle {
diff --git a/plugins/recruit-resources/src/components/LabelStatus.svelte b/plugins/recruit-resources/src/components/LabelStatus.svelte
index 1f205bca88..e106bc8944 100644
--- a/plugins/recruit-resources/src/components/LabelStatus.svelte
+++ b/plugins/recruit-resources/src/components/LabelStatus.svelte
@@ -42,6 +42,6 @@
     text-align: center;
     color: #fff;
     border: 1px solid var(--theme-bg-accent-hover);
-    border-radius: 8px;
+    border-radius: .5rem;
   }
 </style>
diff --git a/plugins/recruit-resources/src/components/Tag.svelte b/plugins/recruit-resources/src/components/Tag.svelte
index 79188d2f2b..728bef4c39 100644
--- a/plugins/recruit-resources/src/components/Tag.svelte
+++ b/plugins/recruit-resources/src/components/Tag.svelte
@@ -43,7 +43,7 @@
     text-align: center;
     background-color: var(--theme-bg-accent-color);
     color: var(--theme-caption-color);
-    border-radius: 8px;
+    border-radius: .5rem;
     
     .icon {
       margin-right: .3em;
diff --git a/plugins/workbench-resources/src/components/AsideHeader.svelte b/plugins/workbench-resources/src/components/AsideHeader.svelte
index 7aec758bce..280d0bf658 100644
--- a/plugins/workbench-resources/src/components/AsideHeader.svelte
+++ b/plugins/workbench-resources/src/components/AsideHeader.svelte
@@ -44,7 +44,7 @@
       align-items: center;
       height: 28px;
       padding: 6px 8px;
-      border-radius: 8px;
+      border-radius: .5rem;
       background-color: var(--theme-menu-divider);
       span {
         font-weight: 600;
diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte
index 1d91c09180..e5b183f017 100644
--- a/plugins/workbench-resources/src/components/Workbench.svelte
+++ b/plugins/workbench-resources/src/components/Workbench.svelte
@@ -23,7 +23,7 @@
   
   import type { Ref, Space, Client } from '@anticrm/core'
   import type { Application, NavigatorModel, ViewConfiguration } from '@anticrm/workbench'
-  import { setClient } from '@anticrm/presentation'
+  import { setClient, Avatar } from '@anticrm/presentation'
   import workbench from '@anticrm/workbench'
 
   import Navigator from './Navigator.svelte'
@@ -75,7 +75,7 @@
       <ActivityStatus status="active"/>
       <Applications active={currentApp}/>
       <div class="flex-center" style="min-height: 6.25rem;">
-        <img class="square-36" src={avatar} alt="Profile"/>
+        <Avatar size={'medium'} />
       </div>
     </div>
     {#if navigator}