diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte
index 5381644dcd..b42c6ea3d7 100644
--- a/packages/panel/src/components/Panel.svelte
+++ b/packages/panel/src/components/Panel.svelte
@@ -45,7 +45,7 @@
         <div class="flex-grow ml-4 flex-col">
           <div class="fs-title">{title}</div>
           {#if subtitle}
-            <div class="small-text content-dark-color">{subtitle}</div>
+            <div class="text-sm content-dark-color">{subtitle}</div>
           {/if}
         </div>
         <ActionIcon icon={IconMoreH} size={'medium'} />
@@ -72,7 +72,7 @@
         <Icon {icon} size={'large'} />
         <div class="flex-grow ml-4 flex-col">
           <div class="fs-title">{title}</div>
-          <div class="small-text content-dark-color">Candidate pool name</div>
+          <div class="text-sm content-dark-color">Candidate pool name</div>
         </div>
         <ActionIcon icon={IconMoreH} size={'medium'} />
       </div>
diff --git a/packages/presentation/src/components/AttributesBar.svelte b/packages/presentation/src/components/AttributesBar.svelte
index bde4b83932..696fb46e23 100644
--- a/packages/presentation/src/components/AttributesBar.svelte
+++ b/packages/presentation/src/components/AttributesBar.svelte
@@ -23,7 +23,7 @@
   export let keys: (string|KeyedAttribute)[]
 </script>
 
-<div class="flex-row-center small-text">
+<div class="flex-row-center text-sm">
   {#each keys as key}
     <div class="column">
       <AttributeBarEditor {key} {object} />
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index ae9bf8446a..a94f76a023 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -244,6 +244,7 @@ p:last-child { margin-block-end: 0; }
 .mr-6 { margin-right: 1.5rem; }
 .mr-8 { margin-right: 2rem; }
 .mr-10 { margin-right: 2.5rem; }
+.mt-1 { margin-top: .25rem; }
 .mt-2 { margin-top: .5rem; }
 .mt-3 { margin-top: .75rem; }
 .mt-4 { margin-top: 1rem; }
@@ -260,6 +261,8 @@ p:last-child { margin-block-end: 0; }
 .pr-1 { padding-right: .25rem; }
 .pr-4 { padding-right: 1rem; }
 
+.p-10 { padding: 2.5rem; }
+
 /* --------- */
 .relative { position: relative; }
 .abs-lt-content {
@@ -355,7 +358,8 @@ a.no-line {
 .cursor-pointer { cursor: pointer; }
 
 /* Text */
-.small-text { font-size: .75rem; }
+.text-sm { font-size: .75rem; }
+.text-lg { font-size: 1.125rem; }
 .fs-title {
   font-weight: 500;
   font-size: 1rem;
@@ -448,6 +452,7 @@ a.no-line {
 .background-button-bg-enabled { background-color: var(--theme-button-bg-enabled); }
 .background-menu-divider { background-color: var(--theme-menu-divider); }
 .background-primary-color { background-color: var(--primary-button-enabled); }
+.background-bg-accent { background-color: var(--theme-bg-accent-color); }
 
 .content-color { color: var(--theme-content-color); }
 .content-trans-color { color: var(--theme-content-trans-color); }
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index a9db7b2f89..34bfb8af86 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -13,6 +13,84 @@
 // limitations under the License.
 //
 
+/* Component */
+.antiComponent {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .ac-header {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    padding: 0 1.75rem 0 2.5rem;
+    height: 4rem;
+    min-height: 4rem;
+    border-bottom: 1px solid var(--theme-menu-divider);
+
+    .ac-header__icon {
+      margin-right: .75rem;
+      color: var(--theme-content-color);
+    }
+    .ac-header__title {
+      font-weight: 500;
+      font-size: 1rem;
+      color: var(--theme-caption-color);
+      user-select: none;    
+    }
+  }
+
+  .ac-body {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    height: 100%;
+
+    &.columns { flex-direction: row; }
+    &.hScroll {
+      overflow-x: auto;
+      &::-webkit-scrollbar-track { margin: 2.5rem; }
+    }
+
+    .ac-column {
+      display: flex;
+      flex-direction: column;
+      overflow-y: auto;
+      padding: 1.75rem 2.5rem;
+      min-width: 25rem;
+      max-width: 25rem;
+      height: 100%;
+      border-right: 1px solid var(--theme-menu-divider);
+      
+      &.max {
+        flex-grow: 1;
+        min-width: 25rem;
+        max-width: 100%;
+        border-right: none;
+      }
+
+      &__list-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        min-height: 2.5rem;
+        padding: 0 1.25rem;
+        border: 1px solid transparent;
+        border-radius: 12px;
+        cursor: pointer;
+    
+        &:hover { background-color: var(--theme-bg-accent-color); }
+        &.selected {
+          background-color: var(--theme-button-bg-enabled);
+          border-color: var(--theme-bg-accent-color);
+          cursor: auto;
+        }
+      }
+    }  
+  }
+}
+.ac-column__list-item + .ac-column__list-item { margin-top: .75rem; }    
+
 /* Popups */
 .antiPopup {
   display: flex;
diff --git a/packages/ui/src/components/Status.svelte b/packages/ui/src/components/Status.svelte
index 618135e8f0..1746d793fb 100644
--- a/packages/ui/src/components/Status.svelte
+++ b/packages/ui/src/components/Status.svelte
@@ -11,7 +11,7 @@
 <div class="flex-center overflow-label container {status.severity}">
   {#if status.severity !== Severity.OK}
     <Info size={'small'}/>
-    <div class="small-text ml-2 overflow-label"><Label label={status.code} params={status.params}/></div>
+    <div class="text-sm ml-2 overflow-label"><Label label={status.code} params={status.params}/></div>
   {/if}
 </div>
 
diff --git a/plugins/attachment-resources/src/components/Attachments.svelte b/plugins/attachment-resources/src/components/Attachments.svelte
index 1b4f02d6b5..89d462f6db 100644
--- a/plugins/attachment-resources/src/components/Attachments.svelte
+++ b/plugins/attachment-resources/src/components/Attachments.svelte
@@ -115,13 +115,13 @@
       on:drop|preventDefault|stopPropagation={fileDrop}
     >
       <UploadDuo size={'large'} />
-      <div class="small-text content-dark-color mt-2">
+      <div class="text-sm content-dark-color mt-2">
         <Label label={attachment.string.NoAttachments} />
         <span class="lower">
           <Label label={classLabel} />
         </span>
       </div>
-      <div class="small-text">
+      <div class="text-sm">
         <a href={'#'} on:click={() => inputFile.click()}><Label label={attachment.string.UploadDropFilesHere} /></a>
       </div>
     </div>
diff --git a/plugins/contact-resources/src/components/CreatePerson.svelte b/plugins/contact-resources/src/components/CreatePerson.svelte
index bacabcdd95..34abd4add3 100644
--- a/plugins/contact-resources/src/components/CreatePerson.svelte
+++ b/plugins/contact-resources/src/components/CreatePerson.svelte
@@ -92,7 +92,7 @@
     <div class="flex-col">
       <div class="fs-title"><EditBox placeholder={contact.string.PersonFirstNamePlaceholder} maxWidth="12rem" bind:value={firstName} /></div>
       <div class="fs-title mb-1"><EditBox placeholder={contact.string.PersonLastNamePlaceholder} maxWidth="12rem" bind:value={lastName} /></div>
-      <div class="small-text"><EditBox placeholder={contact.string.PersonLocationPlaceholder} maxWidth="12rem" bind:value={object.city} /></div>
+      <div class="text-sm"><EditBox placeholder={contact.string.PersonLocationPlaceholder} maxWidth="12rem" bind:value={object.city} /></div>
     </div>
   </div>
 
diff --git a/plugins/contact-resources/src/components/EditOrganization.svelte b/plugins/contact-resources/src/components/EditOrganization.svelte
index 4369bca92d..3bae283819 100644
--- a/plugins/contact-resources/src/components/EditOrganization.svelte
+++ b/plugins/contact-resources/src/components/EditOrganization.svelte
@@ -64,7 +64,7 @@
         <div class="flex-row-center">
           <a href={'#'} class="flex-row-center" on:click>
             <CircleButton icon={IconActivity} size={'small'} primary on:click />
-            <span class="ml-2 small-text">View activity</span>
+            <span class="ml-2 text-sm">View activity</span>
           </a>
         </div>
       </div>
diff --git a/plugins/contact-resources/src/components/EditPerson.svelte b/plugins/contact-resources/src/components/EditPerson.svelte
index decb14132f..33caf4d178 100644
--- a/plugins/contact-resources/src/components/EditPerson.svelte
+++ b/plugins/contact-resources/src/components/EditPerson.svelte
@@ -101,7 +101,7 @@
         <div class="flex-row-center">
           <a href={'#'} class="flex-row-center" on:click>
             <CircleButton icon={IconActivity} size={'small'} primary on:click />
-            <span class="ml-2 small-text">View activity</span>
+            <span class="ml-2 text-sm">View activity</span>
           </a>
         </div>
       </div>
diff --git a/plugins/gmail-resources/src/components/Chats.svelte b/plugins/gmail-resources/src/components/Chats.svelte
index aed4160a47..6c73d59f49 100644
--- a/plugins/gmail-resources/src/components/Chats.svelte
+++ b/plugins/gmail-resources/src/components/Chats.svelte
@@ -120,7 +120,7 @@
     <div class="flex-center icon"><Icon icon={contact.icon.Email} size="small" /></div>
     <div class="flex-grow flex-col">
       <div class="fs-title">Gmail</div>
-      <div class="small-text content-dark-color"><Label label={gmail.string.YouAnd} /> {formatName(object.name)}</div>
+      <div class="text-sm content-dark-color"><Label label={gmail.string.YouAnd} /> {formatName(object.name)}</div>
     </div>
     <div class="mr-3">
       <Button
diff --git a/plugins/gmail-resources/src/components/FullMessage.svelte b/plugins/gmail-resources/src/components/FullMessage.svelte
index ca80e715ae..4bed350916 100644
--- a/plugins/gmail-resources/src/components/FullMessage.svelte
+++ b/plugins/gmail-resources/src/components/FullMessage.svelte
@@ -44,7 +44,7 @@
   </div>
   <div class="flex-grow flex-col mr-4 min-w-0">
     <div class="fs-title overflow-label">{currentMessage.subject}</div>
-    <div class="small-text content-dark-color overflow-label">
+    <div class="text-sm content-dark-color overflow-label">
       <Label label={currentMessage.incoming ? gmail.string.From : gmail.string.To} />
       {title}
     </div>
diff --git a/plugins/gmail-resources/src/components/Message.svelte b/plugins/gmail-resources/src/components/Message.svelte
index 5ec44b9935..8e360292a2 100644
--- a/plugins/gmail-resources/src/components/Message.svelte
+++ b/plugins/gmail-resources/src/components/Message.svelte
@@ -37,7 +37,7 @@
     <div class="mr-4"><CheckBox circle primary bind:checked={selected} /></div>
   {/if}
   <div class="flex-col message" class:selected>
-    <div class="flex-between small-text mb-4">
+    <div class="flex-between text-sm mb-4">
       <div class="content-trans-color overflow-label mr-4">From: <span class="content-accent-color">{formatName(message.sender)}</span></div>
       <div class="content-trans-color">{getTime(message.modifiedOn)}</div>
     </div>
diff --git a/plugins/gmail-resources/src/components/NewMessage.svelte b/plugins/gmail-resources/src/components/NewMessage.svelte
index 8858a3c9b2..cafd4136fa 100644
--- a/plugins/gmail-resources/src/components/NewMessage.svelte
+++ b/plugins/gmail-resources/src/components/NewMessage.svelte
@@ -70,7 +70,7 @@
   </div>
   <div class="flex-grow flex-col">
     <div class="fs-title">Gmail</div>
-    <div class="small-text content-dark-color overflow-label">
+    <div class="text-sm content-dark-color overflow-label">
       <Label label={plugin.string.NewMessageTo} />
       <span class="content-accent-color">{formatName(object.name)} ({channel.value})</span>
     </div>
diff --git a/plugins/inventory-resources/src/components/Variants.svelte b/plugins/inventory-resources/src/components/Variants.svelte
index 6899873035..9c73827ca6 100644
--- a/plugins/inventory-resources/src/components/Variants.svelte
+++ b/plugins/inventory-resources/src/components/Variants.svelte
@@ -42,10 +42,10 @@
   {:else}
     <div class="flex-col-center mt-5 create-container">
       <Icon size={'large'} icon={inventory.icon.Variant} />
-      <div class="small-text content-dark-color mt-2">
+      <div class="text-sm content-dark-color mt-2">
         <Label label={inventory.string.NoVariantsForProduct} />
       </div>
-      <div class="small-text">
+      <div class="text-sm">
         <a href={'#'} on:click={create}><Label label={inventory.string.CreateVariant} /></a>
       </div>
     </div>
diff --git a/plugins/lead-resources/src/components/Leads.svelte b/plugins/lead-resources/src/components/Leads.svelte
index f595ec3c7e..6005d17a92 100644
--- a/plugins/lead-resources/src/components/Leads.svelte
+++ b/plugins/lead-resources/src/components/Leads.svelte
@@ -51,10 +51,10 @@
     />
   {:else}
     <div class="flex-col-center mt-5 createapp-container">
-      <div class="small-text content-dark-color mt-2">
+      <div class="text-sm content-dark-color mt-2">
         <Label label={lead.string.NoLeadsForDocument} />
       </div>
-      <div class="small-text">
+      <div class="text-sm">
         <a href={'#'} on:click={createLead}><Label label={lead.string.CreateLead} /></a>
       </div>
     </div>
diff --git a/plugins/recruit-resources/src/components/Applications.svelte b/plugins/recruit-resources/src/components/Applications.svelte
index bd3d2e5529..3f8050619d 100644
--- a/plugins/recruit-resources/src/components/Applications.svelte
+++ b/plugins/recruit-resources/src/components/Applications.svelte
@@ -58,10 +58,10 @@
   {:else}
     <div class="flex-col-center mt-5 createapp-container">
       <FileDuo size={'large'} />
-      <div class="small-text content-dark-color mt-2">
+      <div class="text-sm content-dark-color mt-2">
         <Label label={recruit.string.NoApplicationsForCandidate} />
       </div>
-      <div class="small-text">
+      <div class="text-sm">
         <a href={'#'} on:click={createApp}><Label label={recruit.string.CreateAnApplication} /></a>
       </div>
     </div>
diff --git a/plugins/recruit-resources/src/components/Candidates.svelte b/plugins/recruit-resources/src/components/Candidates.svelte
index 6d7764d3f1..1b19954dab 100644
--- a/plugins/recruit-resources/src/components/Candidates.svelte
+++ b/plugins/recruit-resources/src/components/Candidates.svelte
@@ -81,7 +81,7 @@
       flex-grow: 1;
       display: flex;
       flex-direction: column;
-      margin-right: 1rem;
+      // margin-right: 1rem;
       height: 100%;
       border-radius: 1.25rem;
       background-color: var(--theme-bg-color);
diff --git a/plugins/recruit-resources/src/components/CreateCandidate.svelte b/plugins/recruit-resources/src/components/CreateCandidate.svelte
index b892f3e770..c72bc60e83 100644
--- a/plugins/recruit-resources/src/components/CreateCandidate.svelte
+++ b/plugins/recruit-resources/src/components/CreateCandidate.svelte
@@ -156,8 +156,8 @@
     <div class="flex-col">
       <div class="fs-title"><EditBox placeholder="John" maxWidth="10rem" bind:value={firstName}/></div>
       <div class="fs-title mb-1"><EditBox placeholder="Appleseed" maxWidth="10rem" bind:value={lastName}/></div>
-      <div class="small-text"><EditBox placeholder="Title" maxWidth="10rem" bind:value={object.title}/></div>
-      <div class="small-text"><EditBox placeholder="Location" maxWidth="10rem" bind:value={object.city}/></div>
+      <div class="text-sm"><EditBox placeholder="Title" maxWidth="10rem" bind:value={object.title}/></div>
+      <div class="text-sm"><EditBox placeholder="Location" maxWidth="10rem" bind:value={object.city}/></div>
     </div>
   </div>
 
diff --git a/plugins/recruit-resources/src/components/EditVacancy.svelte b/plugins/recruit-resources/src/components/EditVacancy.svelte
index 20dc8a8720..c22d989d9b 100644
--- a/plugins/recruit-resources/src/components/EditVacancy.svelte
+++ b/plugins/recruit-resources/src/components/EditVacancy.svelte
@@ -61,7 +61,7 @@
             {object.name}
           </div>
         </div>
-        <div class="small-text">{object.description}</div>
+        <div class="text-sm">{object.description}</div>
       </div>
       <div class="tool" on:click={() => { dispatch('close') }}><IconClose size={'small'} /></div>
     </div>
diff --git a/plugins/recruit-resources/src/components/KanbanCard.svelte b/plugins/recruit-resources/src/components/KanbanCard.svelte
index 3b5a398112..631861839c 100644
--- a/plugins/recruit-resources/src/components/KanbanCard.svelte
+++ b/plugins/recruit-resources/src/components/KanbanCard.svelte
@@ -39,7 +39,7 @@
       <div class="fs-title over-underline lines-limit-2" on:click={showCandidate}>
         {formatName(object.$lookup?.attachedTo?.name)}
       </div>
-      <div class="small-text lines-limit-2">{object.$lookup?.attachedTo?.title ?? ''}</div>
+      <div class="text-sm lines-limit-2">{object.$lookup?.attachedTo?.title ?? ''}</div>
     </div>
     <div class="tool"><ActionIcon label={undefined} icon={IconMoreH} size={'small'} /></div>
   </div>
diff --git a/plugins/setting-assets/assets/icons.svg b/plugins/setting-assets/assets/icons.svg
index 33b003d4e4..921fb16069 100644
--- a/plugins/setting-assets/assets/icons.svg
+++ b/plugins/setting-assets/assets/icons.svg
@@ -1,13 +1,11 @@
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-  <symbol id="edit" fill="none" viewBox="0 0 20 20">
-    <path d="M11.4561 17.0355H17.4999" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M10.65 3.16233C11.2964 2.38982 12.4583 2.27655 13.2469 2.90978C13.2905 2.94413 14.6912 4.03232 14.6912 4.03232C15.5575 4.55599 15.8266 5.66925 15.2912 6.51882C15.2627 6.56432 7.34329 16.4704 7.34329 16.4704C7.07981 16.7991 6.67986 16.9931 6.25242 16.9978L3.21961 17.0358L2.53628 14.1436C2.44055 13.7369 2.53628 13.3098 2.79975 12.9811L10.65 3.16233Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M9.18408 5.00098L13.7276 8.49025" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <symbol id="edit" viewBox="0 0 16 16">
+    <path d="M14,13.1H9.2c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5H14c0.3,0,0.5-0.2,0.5-0.5S14.3,13.1,14,13.1z"/>
+    <path d="M11.4,7.1C11.4,7.1,11.4,7.1,11.4,7.1c1.2-1.6,1.3-1.6,1.3-1.6C12.9,5,13,4.5,12.9,4c-0.1-0.5-0.4-0.9-0.8-1.2 c0,0-1.1-0.9-1.1-0.9c-0.8-0.7-2.1-0.6-2.8,0.3c0,0,0,0,0,0l-6.3,7.9c-0.3,0.4-0.4,0.9-0.3,1.4l0.5,2.3c0.1,0.2,0.3,0.4,0.5,0.4 c0,0,0,0,0,0l2.4,0c0.5,0,1-0.2,1.3-0.6C8.9,10.2,10.5,8.2,11.4,7.1C11.4,7.1,11.4,7.1,11.4,7.1z M8.9,2.8c0.3-0.4,1-0.5,1.4-0.1 c0,0,1.2,0.9,1.2,0.9c0.2,0.1,0.4,0.3,0.4,0.6c0.1,0.2,0,0.5-0.1,0.7c0,0-0.4,0.5-0.9,1.2L8.1,3.9L8.9,2.8z M5.5,12.9 C5.4,13,5.2,13.1,5,13.1l-2,0l-0.5-1.9c0-0.2,0-0.4,0.1-0.5l4.8-6l2.8,2.2C8.9,8.6,6.8,11.2,5.5,12.9z"/>
+  </symbol>
+  <symbol id="password" viewBox="0 0 16 16">
+    <path d="M14.4,5.7l-2-2l1-1c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0l-1.4,1.4L8.3,6.5C7.6,5.9,6.7,5.6,5.7,5.6c-2.3,0-4.2,1.9-4.2,4.2 c0,2.3,1.9,4.2,4.2,4.2s4.2-1.9,4.2-4.2c0-1-0.3-1.9-0.9-2.6l2.7-2.7l2,2c0.2,0.2,0.5,0.2,0.7,0S14.5,5.9,14.4,5.7z M5.7,13 c-1.8,0-3.2-1.4-3.2-3.2s1.4-3.2,3.2-3.2S8.9,8,8.9,9.8S7.5,13,5.7,13z"/>
   </symbol>
-  <symbol id="password" fill="none" viewBox="0 0 20 20">
-    <ellipse cx="7.11573" cy="12.231" rx="4.61573" ry="4.61573"  stroke="currentColor"/>
-    <path d="M10.5762 8.76966L14.6149 4.7309M16.3458 3L14.6149 4.7309M14.6149 4.7309L17.4998 7.61573" stroke="currentColor" stroke-linecap="round"/>
-</symbol>
   <symbol id="settings" viewBox="0 0 16 16">
     <path d="M14,5.8l-1.1-1.9c-0.6-1-0.9-1.5-1.5-1.8c-0.6-0.3-1.2-0.3-2.3-0.4L8,1.7l-1.1,0c-1.1,0-1.8,0-2.3,0.4 C4,2.4,3.7,2.9,3.1,3.9L2,5.8C1.4,6.8,1.1,7.4,1.1,8S1.4,9.2,2,10.2l1.1,1.9c0.6,1,0.9,1.5,1.5,1.8c0.6,0.3,1.2,0.3,2.3,0.4l1.1,0 l1.1,0c1.1,0,1.8,0,2.3-0.4c0.6-0.3,0.9-0.9,1.5-1.8l1.1-1.9c0.6-1,0.9-1.5,0.9-2.2C14.9,7.4,14.6,6.8,14,5.8z M13.1,9.7L12,11.6 c-0.5,0.9-0.8,1.3-1.1,1.5c-0.3,0.2-0.8,0.2-1.8,0.2l-1.1,0l-1.1,0c-1.1,0-1.5,0-1.8-0.2c-0.3-0.2-0.6-0.6-1.1-1.5L2.9,9.7 C2.3,8.8,2.1,8.4,2.1,8c0-0.4,0.2-0.8,0.7-1.7L4,4.4c0.5-0.9,0.8-1.3,1.1-1.5c0.3-0.2,0.8-0.2,1.8-0.2l1.1,0l1.1,0 c1,0,1.5,0,1.8,0.2c0.3,0.2,0.6,0.6,1.1,1.5l1.1,1.9c0.5,0.9,0.7,1.3,0.7,1.7S13.6,8.8,13.1,9.7z"/>
     <path d="M8,5.5C6.6,5.5,5.5,6.6,5.5,8c0,1.4,1.1,2.5,2.5,2.5c1.4,0,2.5-1.1,2.5-2.5C10.5,6.6,9.4,5.5,8,5.5z M8,9.5 C7.2,9.5,6.5,8.8,6.5,8S7.2,6.5,8,6.5S9.5,7.2,9.5,8S8.8,9.5,8,9.5z"/>
@@ -28,8 +26,8 @@
     <path d="M4.7,7.8h0.7c0.3,0,0.5-0.2,0.5-0.5S5.6,6.8,5.3,6.8H4.7c-0.3,0-0.5,0.2-0.5,0.5S4.4,7.8,4.7,7.8z"/>
     <path d="M6.7,9.5h-2c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h2c0.3,0,0.5-0.2,0.5-0.5S6.9,9.5,6.7,9.5z"/>
   </symbol>
-  <symbol id="signout" viewBox="0 0 16 16" fill="none">
-    <path d="M12.24 4.42664C13.0789 5.26583 13.6502 6.33493 13.8815 7.49876C14.1129 8.66259 13.994 9.86889 13.5398 10.9651C13.0856 12.0614 12.3165 12.9983 11.3299 13.6575C10.3432 14.3167 9.18328 14.6686 7.99668 14.6686C6.81007 14.6686 5.65011 14.3167 4.66346 13.6575C3.67681 12.9983 2.90777 12.0614 2.45359 10.9651C1.9994 9.86889 1.88047 8.66259 2.11182 7.49876C2.34317 6.33493 2.91442 5.26583 3.75334 4.42664" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M8 1.33331V7.99998" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>  
+  <symbol id="signout" viewBox="0 0 16 16">
+    <path d="M14.4,7.4c-0.3-1.3-0.9-2.4-1.8-3.3c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7c0.8,0.8,1.3,1.7,1.5,2.8 c0.2,1.1,0.1,2.2-0.3,3.2c-0.4,1-1.1,1.9-2,2.5c-1.8,1.2-4.3,1.2-6.1,0c-0.9-0.6-1.6-1.5-2-2.5c-0.4-1-0.5-2.1-0.3-3.2 c0.2-1.1,0.7-2,1.5-2.8c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0C2.5,5,1.9,6.1,1.6,7.4C1.4,8.7,1.5,10,2,11.2c0.5,1.2,1.3,2.2,2.4,2.9 s2.3,1.1,3.6,1.1c1.3,0,2.5-0.4,3.6-1.1c1.1-0.7,1.9-1.7,2.4-2.9C14.5,10,14.6,8.7,14.4,7.4z"/>
+    <path d="M8,8.5c0.3,0,0.5-0.2,0.5-0.5V1.3c0-0.3-0.2-0.5-0.5-0.5S7.5,1.1,7.5,1.3V8C7.5,8.3,7.7,8.5,8,8.5z"/>
   </symbol>
 </svg>
diff --git a/plugins/setting-resources/src/components/CategoryElement.svelte b/plugins/setting-resources/src/components/CategoryElement.svelte
index a1e1e6275d..01a8fb3b74 100644
--- a/plugins/setting-resources/src/components/CategoryElement.svelte
+++ b/plugins/setting-resources/src/components/CategoryElement.svelte
@@ -42,22 +42,22 @@
 
 <style lang="scss">
   .container {
-    margin: 0 16px;
-    padding-left: 10px;
-    padding-right: 12px;
-    min-height: 36px;
+    margin: 0 1rem;
+    padding-left: .625rem;
+    padding-right: .75rem;
+    min-height: 2.25rem;
     font-weight: 500;
     color: var(--theme-caption-color);
-    border-radius: 8px;
+    border-radius: .5rem;
     user-select: none;
     cursor: pointer;
 
     .icon {
-      margin-right: 18px;
-      width: 16px;
-      min-width: 16px;
-      height: 16px;
-      border-radius: 4px;
+      margin-right: 1rem;
+      width: 1rem;
+      min-width: 1rem;
+      height: 1rem;
+      border-radius: .25rem;
     }
     span {
       flex-grow: 1;
diff --git a/plugins/setting-resources/src/components/Integrations.svelte b/plugins/setting-resources/src/components/Integrations.svelte
index 066d6170aa..2176336423 100644
--- a/plugins/setting-resources/src/components/Integrations.svelte
+++ b/plugins/setting-resources/src/components/Integrations.svelte
@@ -31,10 +31,10 @@
   integrationQuery.query(setting.class.Integration, { space: accountId as string as Ref<Space> }, (res) => (integrations = res))
 </script>
 
-<div class="flex-col h-full">
-  <div class="flex-row-center header">
-    <div class="content-color mr-3"><Icon icon={setting.icon.Integrations} size={'medium'} /></div>
-    <div class="fs-title"><Label label={setting.string.Integrations}/></div>
+<div class="antiComponent">
+  <div class="ac-header">
+    <div class="ac-header__icon"><Icon icon={setting.icon.Integrations} size={'medium'} /></div>
+    <div class="ac-header__title"><Label label={setting.string.Integrations}/></div>
   </div>
   <div class="cards-container">
     {#each integrationTypes as integrationType (integrationType._id)}
@@ -44,13 +44,6 @@
 </div>
 
 <style lang="scss">
-  .header {
-    padding: 0 1.75rem 0 2.5rem;
-    height: 4rem;
-    min-height: 4rem;
-    border-bottom: 1px solid var(--theme-menu-divider);
-  }
-
   .cards-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(20rem, auto));
diff --git a/plugins/setting-resources/src/components/Password.svelte b/plugins/setting-resources/src/components/Password.svelte
index 25d115b404..73f1755f5c 100644
--- a/plugins/setting-resources/src/components/Password.svelte
+++ b/plugins/setting-resources/src/components/Password.svelte
@@ -40,12 +40,12 @@
   }
 </script>
 
-<div class="flex-col h-full">
-  <div class="flex-row-center header">
-    <div class="content-color mr-3"><Icon icon={setting.icon.Password} size={'medium'} /></div>
-    <div class="fs-title"><Label label={setting.string.ChangePassword} /></div>
+<div class="antiComponent">
+  <div class="ac-header">
+    <div class="ac-header__icon"><Icon icon={setting.icon.Password} size={'medium'} /></div>
+    <div class="ac-header__title"><Label label={setting.string.ChangePassword} /></div>
   </div>
-  <div class="container flex-row-streach flex-grow">
+  <div class="flex-row-streach flex-grow p-10">
     <div class="flex-grow flex-col">
       <div class="flex-grow flex-col">
         <div>
@@ -90,16 +90,3 @@
     </div>
   </div>
 </div>
-
-<style lang="scss">
-  .header {
-    padding: 0 1.75rem 0 2.5rem;
-    height: 4rem;
-    min-height: 4rem;
-    border-bottom: 1px solid var(--theme-menu-divider);
-  }
-
-  .container {
-    padding: 2.5rem;
-  }
-</style>
diff --git a/plugins/setting-resources/src/components/PluginCard.svelte b/plugins/setting-resources/src/components/PluginCard.svelte
index 452b79238a..91e98b8cf4 100644
--- a/plugins/setting-resources/src/components/PluginCard.svelte
+++ b/plugins/setting-resources/src/components/PluginCard.svelte
@@ -49,7 +49,7 @@
     <div class="icon mr-4"><Component is={integrationType.icon} /></div>
     <div class="flex-grow flex-col">
       <div class="fs-title max-label overflow-label"><Label label={integrationType.label} /></div>
-      <div class="small-text content-dark-color max-label overflow-label">
+      <div class="text-sm content-dark-color max-label overflow-label">
         <Label label={integrationType.description} />
       </div>
     </div>
diff --git a/plugins/setting-resources/src/components/Privacy.svelte b/plugins/setting-resources/src/components/Privacy.svelte
index becb773bed..6011d175fc 100644
--- a/plugins/setting-resources/src/components/Privacy.svelte
+++ b/plugins/setting-resources/src/components/Privacy.svelte
@@ -18,18 +18,9 @@
   import { Icon, Label } from '@anticrm/ui'
 </script>
 
-<div class="flex-col h-full">
-  <div class="flex-row-center header">
-    <div class="content-color mr-3"><Icon icon={setting.icon.Privacy} size={'medium'} /></div>
-    <div class="fs-title"><Label label={setting.string.Privacy}/></div>
+<div class="antiComponent">
+  <div class="ac-header">
+    <div class="ac-header__icon"><Icon icon={setting.icon.Privacy} size={'medium'} /></div>
+    <div class="ac-header__title"><Label label={setting.string.Privacy}/></div>
   </div>
 </div>
-
-<style lang="scss">
-  .header {
-    padding: 0 1.75rem 0 2.5rem;
-    height: 4rem;
-    min-height: 4rem;
-    border-bottom: 1px solid var(--theme-menu-divider);
-  }
-</style>
diff --git a/plugins/setting-resources/src/components/Profile.svelte b/plugins/setting-resources/src/components/Profile.svelte
index 73fc4c7a9d..b109b1fcb8 100644
--- a/plugins/setting-resources/src/components/Profile.svelte
+++ b/plugins/setting-resources/src/components/Profile.svelte
@@ -88,13 +88,13 @@
   }
 </script>
 
-<div class="flex-col h-full">
-  <div class="flex-row-center header">
-    <div class="content-color mr-3"><Icon icon={setting.icon.EditProfile} size={'medium'} /></div>
-    <div class="fs-title"><Label label={setting.string.EditProfile} /></div>
+<div class="antiComponent">
+  <div class="ac-header">
+    <div class="ac-header__icon"><Icon icon={setting.icon.EditProfile} size={'medium'} /></div>
+    <div class="ac-header__title"><Label label={setting.string.EditProfile} /></div>
   </div>
   {#if employee}
-    <div class="container flex-row-streach flex-grow">
+    <div class="ac-body columns p-10">
       <div class="mr-8">
         <EditableAvatar avatar={employee.avatar} size={'x-large'} on:done={onAvatarDone} />
       </div>
@@ -127,7 +127,7 @@
 
         <div class="separator" />
 
-        <div class="flex-between channels">
+        <div class="flex-between mt-3">
           <div class="flex-row-center">
             <ChannelsEditor attachedTo={employee._id} attachedClass={employee._class} />
           </div>
@@ -138,16 +138,6 @@
 </div>
 
 <style lang="scss">
-  .header {
-    padding: 0 1.75rem 0 2.5rem;
-    height: 4rem;
-    min-height: 4rem;
-    border-bottom: 1px solid var(--theme-menu-divider);
-  }
-
-  .container {
-    padding: 2.5rem;
-  }
   .location {
     margin-top: 0.25rem;
     font-size: 0.75rem;
@@ -158,12 +148,6 @@
     font-size: 1.25rem;
     color: var(--theme-caption-color);
   }
-  .channels {
-    margin-top: 0.75rem;
-    span {
-      margin-left: 0.5rem;
-    }
-  }
 
   .separator {
     margin: 1rem 0;
diff --git a/plugins/setting-resources/src/components/Setting.svelte b/plugins/setting-resources/src/components/Setting.svelte
index 9887b47c02..5d5fae956e 100644
--- a/plugins/setting-resources/src/components/Setting.svelte
+++ b/plugins/setting-resources/src/components/Setting.svelte
@@ -18,18 +18,9 @@
   import { Icon, Label } from '@anticrm/ui'
 </script>
 
-<div class="flex-col h-full">
-  <div class="flex-row-center header">
-    <div class="content-color mr-3"><Icon icon={setting.icon.Setting} size={'medium'} /></div>
-    <div class="fs-title"><Label label={setting.string.Setting}/></div>
+<div class="antiComponent">
+  <div class="ac-header">
+    <div class="ac-header__icon"><Icon icon={setting.icon.Setting} size={'medium'} /></div>
+    <div class="ac-header__title"><Label label={setting.string.Setting}/></div>
   </div>
 </div>
-
-<style lang="scss">
-  .header {
-    padding: 0 1.75rem 0 2.5rem;
-    height: 4rem;
-    min-height: 4rem;
-    border-bottom: 1px solid var(--theme-menu-divider);
-  }
-</style>
diff --git a/plugins/setting-resources/src/components/Settings.svelte b/plugins/setting-resources/src/components/Settings.svelte
index 43272298f0..b10db6dd6c 100644
--- a/plugins/setting-resources/src/components/Settings.svelte
+++ b/plugins/setting-resources/src/components/Settings.svelte
@@ -41,7 +41,7 @@
   }
 </script>
 
-<div class='container'>
+<div class="container">
 <div class="panel-navigator">
   <div class="flex-between navheader-container">
     <span class="fs-title overflow-label">
@@ -49,9 +49,9 @@
     </span>
   </div>
   {#each categories as category}
-      <CategoryElement icon={category.icon} label={category.label} on:click={() => { selectCategory(category.name) }}/>
+    <CategoryElement icon={category.icon} label={category.label} on:click={() => { selectCategory(category.name) }}/>
   {/each}
-  <div class='signout'>
+  <div class="signout">
     <CategoryElement icon={setting.icon.Signout} label={setting.string.Signout} on:click={signOut}/>
   </div>
 </div>    
@@ -67,7 +67,6 @@
   .container {
     display: flex;
     height: 100%;
-    padding-bottom: 1.25rem;
     background: var(--theme-menu-color); 
    
     .panel-navigator {
@@ -91,7 +90,6 @@
       flex-grow: 1;
       display: flex;
       flex-direction: column;
-      margin-right: 1rem;
       height: 100%;
       border-radius: 1.25rem;
       background-color: var(--theme-bg-color);
diff --git a/plugins/setting-resources/src/components/Support.svelte b/plugins/setting-resources/src/components/Support.svelte
index e90eeb6023..2e8fb70bd5 100644
--- a/plugins/setting-resources/src/components/Support.svelte
+++ b/plugins/setting-resources/src/components/Support.svelte
@@ -18,18 +18,9 @@
   import { Icon, Label } from '@anticrm/ui'
 </script>
 
-<div class="flex-col h-full">
-  <div class="flex-row-center header">
-    <div class="content-color mr-3"><Icon icon={setting.icon.Support} size={'medium'} /></div>
-    <div class="fs-title"><Label label={setting.string.Support}/></div>
+<div class="antiComponent">
+  <div class="ac-header">
+    <div class="ac-header__icon"><Icon icon={setting.icon.Support} size={'medium'} /></div>
+    <div class="ac-header__title"><Label label={setting.string.Support}/></div>
   </div>
 </div>
-
-<style lang="scss">
-  .header {
-    padding: 0 1.75rem 0 2.5rem;
-    height: 4rem;
-    min-height: 4rem;
-    border-bottom: 1px solid var(--theme-menu-divider);
-  }
-</style>
diff --git a/plugins/setting-resources/src/components/Terms.svelte b/plugins/setting-resources/src/components/Terms.svelte
index 42431d6fcf..6db7df7904 100644
--- a/plugins/setting-resources/src/components/Terms.svelte
+++ b/plugins/setting-resources/src/components/Terms.svelte
@@ -18,18 +18,9 @@
   import { Icon, Label } from '@anticrm/ui'
 </script>
 
-<div class="flex-col h-full">
-  <div class="flex-row-center header">
-    <div class="content-color mr-3"><Icon icon={setting.icon.Terms} size={'medium'} /></div>
-    <div class="fs-title"><Label label={setting.string.Terms}/></div>
+<div class="antiComponent">
+  <div class="ac-header">
+    <div class="ac-header__icon"><Icon icon={setting.icon.Terms} size={'medium'} /></div>
+    <div class="ac-header__title"><Label label={setting.string.Terms}/></div>
   </div>
 </div>
-
-<style lang="scss">
-  .header {
-    padding: 0 1.75rem 0 2.5rem;
-    height: 4rem;
-    min-height: 4rem;
-    border-bottom: 1px solid var(--theme-menu-divider);
-  }
-</style>
diff --git a/plugins/setting-resources/src/components/statuses/Folders.svelte b/plugins/setting-resources/src/components/statuses/Folders.svelte
index 4ddbcc5bb2..4038e19c82 100644
--- a/plugins/setting-resources/src/components/statuses/Folders.svelte
+++ b/plugins/setting-resources/src/components/statuses/Folders.svelte
@@ -42,14 +42,14 @@
 <div class="flex-col overflow-y-auto">
   {#each folders as f (f._id)}
     <div class="flex-between item" class:selected={f._id === folder?._id} on:click={() => select(f)}>
-      <div class="icon mr-4">
+      <div class="icon flex-no-shrink mr-4">
         <Component is={f.icon}/>
       </div>
       <div class="flex-grow flex-col">
         <div class="fs-title overflow-label">
           {f.name}
         </div>
-        <div class="small-text content-dark-color overflow-label">
+        <div class="text-sm content-dark-color overflow-label">
           {f.description}
         </div>
       </div>
diff --git a/plugins/setting-resources/src/components/statuses/ManageStatuses.svelte b/plugins/setting-resources/src/components/statuses/ManageStatuses.svelte
index 5732cb8985..008905cbbe 100644
--- a/plugins/setting-resources/src/components/statuses/ManageStatuses.svelte
+++ b/plugins/setting-resources/src/components/statuses/ManageStatuses.svelte
@@ -52,48 +52,24 @@
   }
 </script>
 
-<div class="flex-col h-full">
-  <div class="flex-row-center header">
-    <div class="content-color mr-3"><Icon icon={task.icon.ManageStatuses} size={'medium'} /></div>
-    <div class="fs-title"><Label label={setting.string.ManageStatuses}/></div>
+<div class="antiComponent">
+  <div class="ac-header">
+    <div class="ac-header__icon"><Icon icon={task.icon.ManageStatuses} size={'medium'} /></div>
+    <div class="ac-header__title"><Label label={setting.string.ManageStatuses}/></div>
   </div>
-  <div class="flex-row-top h-full overflow-x-auto scroll-m-10">
-    <div class="flex-col section">
+  <div class="ac-body columns hScroll">
+    <div class="ac-column">
       <Folders bind:folder={folder}/>
     </div>
-    <div class="flex-col section">
+    <div class="ac-column">
       {#if folder !== undefined}
         <Templates {folder} bind:template={template}/>
       {/if}
     </div>
-    <div class="flex-col section max">
+    <div class="ac-column max">
       {#if template !== undefined}
         <KanbanTemplateEditor kanban={template} on:delete={(e) => deleteState(e.detail)}/>
       {/if}
     </div>
   </div>
 </div>
-
-<style lang="scss">
-  .header {
-    padding: 0 1.75rem 0 2.5rem;
-    height: 4rem;
-    min-height: 4rem;
-    border-bottom: 1px solid var(--theme-menu-divider);
-  }
-
-  .section {
-    overflow-y: auto;
-    padding: 1.75rem 2.5rem;
-    min-width: 25rem;
-    max-width: 25rem;
-    height: 100%;
-    border-right: 1px solid var(--theme-menu-divider);
-    
-    &.max {
-      width: 40rem;
-      max-width: 40rem;
-      border-right: none;
-    }
-  }
-</style>
diff --git a/plugins/setting-resources/src/components/statuses/Templates.svelte b/plugins/setting-resources/src/components/statuses/Templates.svelte
index 9e8d36e433..d2a87f2a33 100644
--- a/plugins/setting-resources/src/components/statuses/Templates.svelte
+++ b/plugins/setting-resources/src/components/statuses/Templates.svelte
@@ -96,8 +96,8 @@
 </div>
 <div class="flex-col overflow-y-auto">
   {#each templates as t (t._id)}
-    <div class="flex-between item" class:selected={t._id === template?._id} on:click={() => select(t)}>
-      <AttributeEditor maxWidth={'18rem'} _class={task.class.KanbanTemplate} object={t} key="title"/>
+    <div class="ac-column__list-item" class:selected={t._id === template?._id} on:click={() => select(t)}>
+      <AttributeEditor maxWidth={'15rem'} _class={task.class.KanbanTemplate} object={t} key="title"/>
       <div class="hover-trans"
         on:click|stopPropagation={(ev) => {
           showPopup(ContextMenu, { object: t }, ev.target, () => {})
@@ -108,21 +108,3 @@
     </div>
   {/each}
 </div>
-
-<style lang="scss">
-  .item {
-    min-height: 2.5rem;
-    padding: 0 1.25rem;
-    border: 1px solid transparent;
-    border-radius: 12px;
-    cursor: pointer;
-
-    &:hover { background-color: var(--theme-bg-accent-color); }
-    &.selected {
-      background-color: var(--theme-button-bg-enabled);
-      border-color: var(--theme-bg-accent-color);
-      cursor: auto;
-    }
-  }
-  .item + .item { margin-top: .75rem; }
-</style>
diff --git a/plugins/task-resources/src/components/KanbanCard.svelte b/plugins/task-resources/src/components/KanbanCard.svelte
index 81d2f0d199..ec67147f18 100644
--- a/plugins/task-resources/src/components/KanbanCard.svelte
+++ b/plugins/task-resources/src/components/KanbanCard.svelte
@@ -37,7 +37,7 @@
     <ActionIcon label={task.string.More} action={(evt) => { showMenu(evt) }} icon={IconMoreH} size={'small'} />
   </div>
   <div class="caption-color mb-3 lines-limit-4">{object.name}</div>
-  <!-- <div class="small-text lines-limit-2">{object.description}</div> -->
+  <!-- <div class="text-sm lines-limit-2">{object.description}</div> -->
   <div class="flex-between">
     <div class="flex-row-center">
       {#if (object.attachments ?? 0) > 0}
diff --git a/plugins/task-resources/src/components/Tasks.svelte b/plugins/task-resources/src/components/Tasks.svelte
index 2c0728a296..42274eb95a 100644
--- a/plugins/task-resources/src/components/Tasks.svelte
+++ b/plugins/task-resources/src/components/Tasks.svelte
@@ -61,10 +61,10 @@
   {:else}
     <div class="flex-col-center mt-5 createapp-container">
       <!-- <FileDuo size={'large'} /> -->
-      <div class="small-text content-dark-color mt-2">
+      <div class="text-sm content-dark-color mt-2">
         <Label label={task.string.NoTaskForObject} />
       </div>
-      <div class="small-text">
+      <div class="text-sm">
         <a href={'#'} on:click={createApp}><Label label={task.string.CreateTask} /></a>
       </div>
     </div>
diff --git a/plugins/task-resources/src/components/state/EditStatuses.svelte b/plugins/task-resources/src/components/state/EditStatuses.svelte
index 27b564a29c..764d4832cc 100644
--- a/plugins/task-resources/src/components/state/EditStatuses.svelte
+++ b/plugins/task-resources/src/components/state/EditStatuses.svelte
@@ -85,7 +85,7 @@
           {#if spaceClassInstance}<Label label={spaceClassInstance?.label}/>{:else}...{/if}
         </span>
       </div>
-      <div class="small-text content-dark-color overflow-label">{spaceInstance?.name}</div>
+      <div class="text-sm content-dark-color overflow-label">{spaceInstance?.name}</div>
     </div>
     <div class="ml-4 content-accent-color cursor-pointer" on:click={() => dispatch('close')}><IconClose size={'small'} /></div>
   </div>
diff --git a/plugins/task-resources/src/components/state/StatesEditor.svelte b/plugins/task-resources/src/components/state/StatesEditor.svelte
index f17fb9bb5f..d6d47351aa 100644
--- a/plugins/task-resources/src/components/state/StatesEditor.svelte
+++ b/plugins/task-resources/src/components/state/StatesEditor.svelte
@@ -103,7 +103,7 @@
               showPopup(ColorsPopup, {}, elements[i], onColorChange(state))
             }}
           />
-          <div class="flex-grow caption-color"><AttributeEditor maxWidth={'20rem'} _class={state._class} object={state} key="title"/></div>
+          <div class="flex-grow caption-color"><AttributeEditor maxWidth={'13rem'} _class={state._class} object={state} key="title"/></div>
           <div class="tool hover-trans"
             on:click={(ev) => {
               showPopup(StatusesPopup, { onDelete: () => dispatch('delete', { state }) }, ev.target, () => {})
@@ -126,7 +126,7 @@
         <div class="states flex-row-center">
           <div class="bar"/>
           <div class="color" style="background-color: #a5d179"/>
-          <div class="flex-grow caption-color"><AttributeEditor maxWidth={'20rem'} _class={state._class} object={state} key="title"/></div>
+          <div class="flex-grow caption-color"><AttributeEditor maxWidth={'13rem'} _class={state._class} object={state} key="title"/></div>
         </div>
       {/if}
     {/each}
@@ -142,7 +142,7 @@
         <div class="states flex-row-center">
           <div class="bar"/>
           <div class="color" style="background-color: #f28469"/>
-          <div class="flex-grow caption-color"><AttributeEditor maxWidth="20rem" _class={state._class} object={state} key="title"/></div>
+          <div class="flex-grow caption-color"><AttributeEditor maxWidth={'13rem'} _class={state._class} object={state} key="title"/></div>
         </div>
       {/if}
     {/each}
diff --git a/plugins/task-resources/src/components/todos/Todos.svelte b/plugins/task-resources/src/components/todos/Todos.svelte
index 112d3b350c..bddd6b2c01 100644
--- a/plugins/task-resources/src/components/todos/Todos.svelte
+++ b/plugins/task-resources/src/components/todos/Todos.svelte
@@ -57,7 +57,7 @@
     />
   {:else}
     <div class="flex-col-center mt-5 createapp-container">
-      <div class="small-text">
+      <div class="text-sm">
         <a href={'#'} on:click={createApp}><Label label={plugin.string.NoTodoItems} /></a>
       </div>
     </div>
diff --git a/plugins/telegram-resources/src/components/Chat.svelte b/plugins/telegram-resources/src/components/Chat.svelte
index 066bb1c502..fad8dd6550 100644
--- a/plugins/telegram-resources/src/components/Chat.svelte
+++ b/plugins/telegram-resources/src/components/Chat.svelte
@@ -168,7 +168,7 @@
   <div class="flex-center icon"><TelegramIcon size={'small'} /></div>
   <div class="flex-grow flex-col">
     <div class="fs-title">Telegram</div>
-    <div class="small-text content-dark-color">You and {formatName(object.name)}</div>
+    <div class="text-sm content-dark-color">You and {formatName(object.name)}</div>
   </div>
   <ActionIcon
     icon={IconShare}
diff --git a/plugins/templates-assets/assets/icons.svg b/plugins/templates-assets/assets/icons.svg
index 2f019381a4..7dcc2ece7f 100644
--- a/plugins/templates-assets/assets/icons.svg
+++ b/plugins/templates-assets/assets/icons.svg
@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-  <symbol id="templates" fill="none" viewBox="0 0 16 16">
-    <path d="M8.58334 3.33337V3.33337C7.42111 3.33337 6.83999 3.33337 6.36142 3.45325C4.92972 3.81187 3.81184 4.92975 3.45322 6.36145C3.33334 6.84002 3.33334 7.42114 3.33334 8.58337V10.8C3.33334 11.6139 3.33334 12.0208 3.5562 12.296C3.60017 12.3503 3.64972 12.3999 3.70402 12.4439C3.97922 12.6667 4.38615 12.6667 5.20001 12.6667H7.41668C8.57891 12.6667 9.16003 12.6667 9.6386 12.5468C11.0703 12.1882 12.1882 11.0703 12.5468 9.63863C12.6667 9.16006 12.6667 8.57894 12.6667 7.41671V7.41671" stroke="white"/>
-    <path d="M6 6.66663L10 6.66663" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M6 9.33337H8" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M12.6667 5.33337L12.6667 1.33337M10.6667 3.33337H14.6667" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+  <symbol id="templates" viewBox="0 0 16 16">
+    <path d="M12.1,9.5c-0.3,1.3-1.3,2.2-2.5,2.5c-0.4,0.1-1,0.1-2.1,0.1H5.2c-0.6,0-1,0-1.2-0.1C4,12,4,12,3.9,12 c-0.1-0.1-0.1-0.6-0.1-1.2V8.6c0-1.1,0-1.7,0.1-2.1c0.3-1.3,1.3-2.2,2.5-2.5c0.4-0.1,1-0.1,2.1-0.1v-1c-1.2,0-1.8,0-2.3,0.1 C4.6,3.4,3.4,4.6,3,6.2C2.8,6.8,2.8,7.4,2.8,8.6v2.2c0,0.9,0,1.4,0.3,1.8c0.1,0.1,0.1,0.2,0.2,0.2c0.4,0.3,0.9,0.3,1.8,0.3h2.2 c1.2,0,1.8,0,2.3-0.1c1.6-0.4,2.9-1.7,3.3-3.3c0.1-0.5,0.1-1.1,0.1-2.3h-1C12.2,8.5,12.2,9.1,12.1,9.5z"/>
+    <path d="M10.5,6.7c0-0.3-0.2-0.5-0.5-0.5H6c-0.3,0-0.5,0.2-0.5,0.5S5.7,7.2,6,7.2h4C10.3,7.2,10.5,6.9,10.5,6.7z"/>
+    <path d="M6,8.8c-0.3,0-0.5,0.2-0.5,0.5S5.7,9.8,6,9.8h2c0.3,0,0.5-0.2,0.5-0.5S8.3,8.8,8,8.8H6z"/>
+    <path d="M14.7,2.8h-1.5V1.3c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5v1.5h-1.5c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h1.5v1.5 c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V3.8h1.5c0.3,0,0.5-0.2,0.5-0.5S14.9,2.8,14.7,2.8z"/>
   </symbol>  
 </svg>
diff --git a/plugins/templates-resources/src/components/TemplateElement.svelte b/plugins/templates-resources/src/components/TemplateElement.svelte
index 13c5ab69f4..0ea09b91dd 100644
--- a/plugins/templates-resources/src/components/TemplateElement.svelte
+++ b/plugins/templates-resources/src/components/TemplateElement.svelte
@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { Doc } from '@anticrm/core'
-  import { IconMoreV, showPopup } from '@anticrm/ui'
+  import { IconMoreH, showPopup } from '@anticrm/ui'
   import { ContextMenu } from '@anticrm/view-resources'
   import { createEventDispatcher } from 'svelte'
 
@@ -32,57 +32,16 @@
 
 </script>
 
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
-  class="flex-row-center container" class:active={active}
+  class="flex-between ac-column__list-item" class:active={active}
   on:click|stopPropagation={() => {
     dispatch('click')
   }}
 >
-  <span>
-    {label}
-  </span>
+  {label}
   {#if object}
-    <div class="menuRow" on:click={(ev) => showMenu(ev, object)}><IconMoreV size={'small'} /></div>
+    <div class="hover-trans" on:click|stopPropagation={(ev) => { showMenu(ev, object) }}>
+      <IconMoreH size={'medium'} />
+    </div>
   {/if}
 </div>
-
-<style lang="scss">
-  .container {
-    min-height: 36px;
-    font-weight: 500;
-    color: var(--theme-caption-color);
-    border-radius: 8px;
-    user-select: none;
-    cursor: pointer;
-
-    span {
-      flex-grow: 1;
-      margin-left: 1rem;
-      margin-right: 1rem;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    &.active {
-      background-color: var(--theme-button-bg-enabled);
-    }
-
-    &:hover {
-      background-color: var(--theme-button-bg-enabled);
-      .menuRow {
-        visibility: visible;
-      }
-    }
-  }
-  .menuRow {
-    visibility: hidden;
-    margin-left: 0.5rem;
-    opacity: 0.6;
-    cursor: pointer;
-    &:hover {
-      opacity: 1;
-    }
-  }
-</style>
diff --git a/plugins/templates-resources/src/components/Templates.svelte b/plugins/templates-resources/src/components/Templates.svelte
index ae1b797e1c..9f223b282e 100644
--- a/plugins/templates-resources/src/components/Templates.svelte
+++ b/plugins/templates-resources/src/components/Templates.svelte
@@ -58,23 +58,20 @@
   }
 </script>
 
-<div class="flex-between navheader-container">
-  <span class="fs-title overflow-label flex-row-center">
-    <div class="mr-2">
-      <Icon icon={templatesPlugin.icon.Templates} size={'medium'} />
-    </div>
-    <Label label={templatesPlugin.string.Templates} />
-  </span>
-</div>
+<div class="antiComponent">
+  <div class="ac-header">
+    <div class="ac-header__icon"><Icon icon={templatesPlugin.icon.Templates} size={'medium'} /></div>
+    <div class="ac-header__title"><Label label={templatesPlugin.string.Templates} /></div>
+  </div>
 
-<div class="flex flex-grow">
-  <div class="tempaltes-nav flex-row">
-    <div class="flex-between flex-reverse">
-      <CircleButton icon={IconAdd} on:click={addTemplate} />
-      <Label label={templatesPlugin.string.TemplatesHeader} />
-    </div>
-    <div class="templates flex-row">
-      <ScrollBox vertical stretch>       
+  <div class="ac-body columns">
+    <div class="ac-column">
+      <div class="flex-between trans-title mb-3">
+        <Label label={templatesPlugin.string.TemplatesHeader} />
+        <CircleButton icon={IconAdd} on:click={addTemplate} />
+      </div>
+
+      <div class="flex-col overflow-y-auto">
         {#each templates as t}
           <TemplateElement
             label={t.title}
@@ -87,93 +84,70 @@
             object={t}
           />
         {/each}
-      </ScrollBox>
-    </div>
-  </div>
-  <div class="templates-edit">
-    {#if newTemplate}
-      <span class="fs-title overflow-label">
-        {#if mode === Mode.Create}
-          <Label label={templatesPlugin.string.CreateTemplate} />
-        {:else if mode === Mode.Edit}
-          <Label label={templatesPlugin.string.EditTemplate} />
-        {:else}
-          <Label label={templatesPlugin.string.ViewTemplate} />
-        {/if}
-      </span>
-      <div class="titleedit mt-4 mb-4">
-        {#if mode !== Mode.View}
-          <EditBox bind:value={newTemplate.title} maxWidth={'12rem'} placeholder={templatesPlugin.string.TemplatePlaceholder} />
-        {:else}
-          {newTemplate.title}
-        {/if}
       </div>
-      {#if mode !== Mode.View}
-        <StyledTextEditor
-          bind:content={newTemplate.message}
-          bind:this={textEditor}
-          on:value={(evt) => {
-            newTemplate = { title: newTemplate?.title ?? '', message: evt.detail }
-          }}>
-          <div class="flex flex-reverse flex-reverse flex-grow">
-            <div class="ml-2">
-              <Button disabled={newTemplate.title.trim().length == 0 } primary label={templatesPlugin.string.SaveTemplate} on:click={saveNewTemplate} />
+    </div>
+
+    <div class="ac-column max background-bg-accent template-container">
+      {#if newTemplate}
+        <span class="trans-title mb-3">
+          {#if mode === Mode.Create}
+            <Label label={templatesPlugin.string.CreateTemplate} />
+          {:else if mode === Mode.Edit}
+            <Label label={templatesPlugin.string.EditTemplate} />
+          {:else}
+            <Label label={templatesPlugin.string.ViewTemplate} />
+          {/if}
+        </span>
+        <div class="text-lg caption-color">
+          {#if mode !== Mode.View}
+            <EditBox bind:value={newTemplate.title} maxWidth={'12rem'} placeholder={templatesPlugin.string.TemplatePlaceholder} />
+          {:else}
+            {newTemplate.title}
+          {/if}
+        </div>
+        <div class="separator" />
+        {#if mode !== Mode.View}
+          <StyledTextEditor
+            bind:content={newTemplate.message}
+            bind:this={textEditor}
+            on:value={(evt) => {
+              newTemplate = { title: newTemplate?.title ?? '', message: evt.detail }
+            }}>
+            <div class="flex flex-reverse flex-grow">
+              <div class="ml-2">
+                <Button disabled={newTemplate.title.trim().length == 0 } primary label={templatesPlugin.string.SaveTemplate} on:click={saveNewTemplate} />
+              </div>
+              <Button
+                label={templatesPlugin.string.Cancel}
+                on:click={() => {
+                  if (mode === Mode.Create) {
+                    newTemplate = undefined
+                  }
+                  mode = Mode.View
+                }}
+              />
             </div>
-            <Button
-              label={templatesPlugin.string.Cancel}
-              on:click={() => {
-                if (mode === Mode.Create) {
-                  newTemplate = undefined
-                }
-                mode = Mode.View
-              }}
-            />
+          </StyledTextEditor>
+        {:else}
+          <div class="text">
+            <MessageViewer message={newTemplate.message}/>
           </div>
-        </StyledTextEditor>
-      {:else}
-        <div class='text'>
-          <MessageViewer message={newTemplate.message}/>
-        </div>
-        <div class='flex flex-reverse'>
-          <Button primary label={templatesPlugin.string.EditTemplate} on:click={() => { mode = Mode.Edit }} />
-        </div>
+          <div class="flex flex-reverse">
+            <Button primary label={templatesPlugin.string.EditTemplate} on:click={() => { mode = Mode.Edit }} />
+          </div>
+        {/if}
       {/if}
-    {/if}
+    </div>
   </div>
 </div>
 
 <style lang="scss">
-  .navheader-container {
-    padding: 0 1.75rem;
-    height: 4rem;
-    border-bottom: 1px solid var(--theme-menu-divider);
-  }
-  .tempaltes-nav {
-    width: 425px;
-    border-right: 1px solid var(--theme-menu-divider);
-    padding: 2rem;
-    display: flex;
-    flex-direction: column;   
-  }
-  .templates-edit {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    padding: 2rem;
-    background-color: var(--theme-button-bg-enabled);
-
-    .titleedit {
-      font-size: 18px;
-      border-bottom: 1px solid var(--theme-menu-divider);
-      padding-bottom: 2rem;
-    }
-  }
-  .templates {
-    margin-top: 2rem;
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
+  .template-container { padding: 2.25rem 2.5rem 1.75rem; }
+  .separator {
+    flex-shrink: 0;
+    margin: 1.5rem 0;
+    height: 1px;
+    background-color: var(--theme-menu-divider);
   }
   .text {
     flex-grow: 1;
diff --git a/plugins/workbench-resources/src/components/AccountPopup.svelte b/plugins/workbench-resources/src/components/AccountPopup.svelte
index 6bd84f7e44..f929c82c75 100644
--- a/plugins/workbench-resources/src/components/AccountPopup.svelte
+++ b/plugins/workbench-resources/src/components/AccountPopup.svelte
@@ -70,81 +70,38 @@
   }
 </script>
 
-<div class="account-popup">
-  <div class="popup-bg" />
-  {#await getItems() then items}
-    <div class="flex-row-center header item" on:click={() => { editProfile(items) }}>
+<div class="antiPopup">
+  <div class="ap-space" />
+  <div class="ap-scroll"><div class="ap-box">
+    {#await getItems() then items}
+      <div class="ap-menuItem flex-row-center" on:click={() => { editProfile(items) }}>
         {#if employee}
           <Avatar avatar={employee.avatar} size={'medium'} />
         {/if}
-      <div class="ml-2 flex-col">
+        <div class="ml-2 flex-col">
           {#if account}
             <div class="overflow-label fs-bold caption-color">{formatName(account.name)}</div>
-            <div class="overflow-label small-text content-dark-color">{account.email}</div>
+            <div class="overflow-label text-sm content-dark-color">{account.email}</div>
           {/if}
+        </div>
       </div>
-    </div>
-    <div class="content">
       {#if items}
         {#each filterItems(items) as item }
-          <div class="item flex-row-center" on:click={() => selectCategory(item)}>
+          <button class="ap-menuItem" on:click={() => selectCategory(item)}>
             <div class='mr-2'>
-              <Icon icon={item.icon} size={'x-small'}/>
+              <Icon icon={item.icon} size={'small'}/>
             </div>
             <Label label={item.label} />
-          </div>
+          </button>
         {/each}
       {/if}
-      <div class="item" on:click={signOut}><Label label={setting.string.Signout} /></div>
-    </div>
-  {/await}
+      <button class="ap-menuItem" on:click={signOut}>
+        <div class='mr-2'>
+          <Icon icon={setting.icon.Signout} size={'small'}/>
+        </div>
+        <Label label={setting.string.Signout} />
+      </button>
+    {/await}
+  </div></div>
+  <div class="ap-space" />
 </div>
-
-<style lang="scss">
-  .account-popup {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 16rem;
-    min-width: 16rem;
-    max-width: 16rem;
-    border-radius: 1.25rem;
-
-    .header {
-      flex-shrink: 0;
-      margin: 0.5rem;
-      margin-bottom: 0.25rem;
-    }
-
-    .content {
-      flex-shrink: 0;
-      flex-grow: 1;
-      margin: 0 .5rem 1rem;
-      height: fit-content;
-    }
-    .item {
-      padding: .5rem;
-      color: var(--theme-content-accent-color);
-      border-radius: .5rem;
-      cursor: pointer;
-
-      &:hover {
-        color: var(--theme-caption-color);
-        background-color: var(--theme-button-bg-focused);
-      }
-    }
-
-    .popup-bg {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background-color: var(--theme-card-bg);
-      border-radius: 1.25rem;
-      backdrop-filter: blur(15px);
-      box-shadow: var(--theme-card-shadow);
-      z-index: -1;
-    }
-  }
-</style>