diff --git a/packages/presentation/src/components/Card.svelte b/packages/presentation/src/components/Card.svelte
index 37813827e1..18ff368881 100644
--- a/packages/presentation/src/components/Card.svelte
+++ b/packages/presentation/src/components/Card.svelte
@@ -32,7 +32,7 @@
   export let hideSubheader: boolean = false
   export let accentHeader: boolean = false
   export let gap: string | undefined = undefined
-  export let width: 'large' | 'medium' | 'small' | 'x-small' = 'large'
+  export let width: 'large' | 'medium' | 'small' | 'x-small' | 'menu' = 'large'
 
   const dispatch = createEventDispatcher()
 
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 70f2e475b4..9479b4c802 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -406,6 +406,7 @@ input.search {
   &:not(.reverse) > *:not(:first-child) { margin-left: .5rem; }
   &.reverse > *:not(:last-child) { margin-right: .5rem; }
 }
+.gapV-2 > *:not(:last-child) { margin-bottom: .5rem; }
 .gap-3 {
   &:not(.reverse) > *:not(:first-child) { margin-left: .75rem; }
   &.reverse > *:not(:last-child) { margin-right: .75rem; }
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index 7879679449..130e854c81 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -366,6 +366,79 @@
   }
 }
 
+/* Contact Card */
+.antiContactCard {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 1.5rem 1.25rem;
+  background-color: var(--theme-button-enabled);
+  border: 1px solid var(--theme-button-border);
+  border-radius: 0.5rem;
+  transition-property: box-shadow, background-color, border-color;
+  transition-timing-function: var(--timing-shadow);
+  transition-duration: 0.15s;
+  user-select: text;
+  height: 100%;
+  min-width: 15rem;
+  min-height: 15rem;
+
+  &:hover {
+    background-color: var(--theme-button-hovered);
+    box-shadow: var(--accent-shadow);
+  }
+
+  .logo {
+    width: 4.5rem;
+    height: 4.5rem;
+    color: var(--primary-button-color);
+    background-color: var(--primary-button-enabled);
+    border-radius: 50%;
+  }
+  .label {
+    margin-bottom: 1.75rem;
+    font-weight: 500;
+    font-size: 0.625rem;
+    color: var(--theme-dark-color);
+  }
+  .name {
+    margin: 1rem 0 0.25rem;
+    font-weight: 500;
+    font-size: 1rem;
+    color: var(--theme-caption-color);
+  }
+  .description {
+    font-size: 0.75rem;
+    color: var(--theme-dark-color);
+  }
+  .footer {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    align-items: flex-end;
+    flex-grow: 1;
+    margin-top: 1.5rem;
+    width: 100%;
+    min-width: 0;
+  }
+
+  &.inline {
+    padding: 0.5rem 0.5rem 0.25rem;
+    min-width: 1rem;
+    min-height: 1rem;
+
+    background-color: inherit;
+    border: inherit;
+    border-radius: inherit;
+    .name {
+      margin: 0.25rem 0 0.25rem;
+      font-size: 0.75rem;
+    }
+    .label {
+      margin-bottom: 0rem;
+    }
+  }
+}
+
 /* Table */
 .antiTable {
   position: relative;
diff --git a/packages/theme/styles/dialogs.scss b/packages/theme/styles/dialogs.scss
index 49f827435f..ea87028f7a 100644
--- a/packages/theme/styles/dialogs.scss
+++ b/packages/theme/styles/dialogs.scss
@@ -164,6 +164,37 @@
     }
   }
 
+  .antiCard-menu__item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+    margin: 0 .5rem;
+    padding: .25rem .5rem;
+    min-width: 0;
+    min-height: 2.5rem;
+    border-radius: .25rem;
+
+    &.hoverable{
+      cursor: pointer;
+
+      &:hover { background-color: var(--theme-popup-hover); }
+    }
+    span {
+      margin-right: .5rem;
+      color: var(--theme-caption-color);
+    }
+  }
+  .antiCard-menu__spacer {
+    flex-shrink: 0;
+    height: .5rem;
+  }
+  .antiCard-menu__divider {
+    flex-shrink: 0;
+    margin: .5rem 0;
+    height: 1px;
+    background-color: var(--theme-popup-divider);
+  }
   .antiCard-group {
     padding: .5rem 1rem;
 
@@ -195,22 +226,26 @@
     height: auto;
     max-height: inherit;
 
-    &.large {
+    &.large {   // 720
       width: 45rem;
       max-width: 60rem;
     }
-    &.medium {
+    &.medium {   // 600
       width: 37.5rem;
       max-width: 37.5rem;
     }
-    &.small {
+    &.small {   // 480
       width: 30rem;
       max-width: 30rem;
     }
-    &.x-small {
+    &.x-small { // 400
       width: 25rem;
       max-width: 25rem;
     }
+    &.menu { // 280
+      width: 17.5rem;
+      max-width: 17.5rem;
+    }
     &.full {
       width: max-content;
       // max-width: 100%;
diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss
index 7980e65827..eb2e0c95ff 100644
--- a/packages/theme/styles/panel.scss
+++ b/packages/theme/styles/panel.scss
@@ -195,6 +195,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
+        flex-shrink: 0;
         width: 100%;
         min-width: 0;
         min-height: 3.5rem;
diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss
index 299498434e..04887c46f7 100644
--- a/packages/theme/styles/popups.scss
+++ b/packages/theme/styles/popups.scss
@@ -23,6 +23,7 @@
   max-width: 17rem;
   max-height: 22rem;
   background: var(--theme-popup-color);
+  border: 1px solid var(--theme-popup-divider);
   border-radius: .5rem;
   box-shadow: var(--theme-popup-shadow);
 
@@ -217,6 +218,7 @@
   min-width: 0;
   max-width: 30rem;
   background: var(--theme-popup-color);
+  border: 1px solid var(--theme-popup-divider);
   border-radius: .5rem;
   box-shadow: var(--theme-popup-shadow);
   user-select: none;
diff --git a/packages/ui/src/components/DropdownLabelsIntl.svelte b/packages/ui/src/components/DropdownLabelsIntl.svelte
index 9fa01846dc..24a6b7ff40 100644
--- a/packages/ui/src/components/DropdownLabelsIntl.svelte
+++ b/packages/ui/src/components/DropdownLabelsIntl.svelte
@@ -23,6 +23,7 @@
   import DropdownLabelsPopupIntl from './DropdownLabelsPopupIntl.svelte'
   import Label from './Label.svelte'
   import ui from '../plugin'
+  import DropdownIcon from './icons/Dropdown.svelte'
 
   export let icon: Asset | AnySvelteComponent | undefined = undefined
   export let label: IntlString = ui.string.DropdownDefaultLabel
@@ -84,8 +85,11 @@
     showTooltip={{ label, direction: labelDirection }}
     on:click={openPopup}
   >
-    <span slot="content" class="overflow-label disabled">
+    <span slot="content" class="overflow-label disabled flex-grow text-left mr-2">
       <Label label={selectedItem ? selectedItem.label : label} />
     </span>
+    <svelte:fragment slot="iconRight">
+      <DropdownIcon size={'small'} fill={'var(--theme-dark-color)'} />
+    </svelte:fragment>
   </Button>
 </div>
diff --git a/packages/ui/src/components/DropdownLabelsPopupIntl.svelte b/packages/ui/src/components/DropdownLabelsPopupIntl.svelte
index 02f4435fa0..84d69f0257 100644
--- a/packages/ui/src/components/DropdownLabelsPopupIntl.svelte
+++ b/packages/ui/src/components/DropdownLabelsPopupIntl.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
   import type { DropdownIntlItem } from '../types'
-  import CheckBox from './CheckBox.svelte'
+  import IconCheck from './icons/Check.svelte'
   import Label from './Label.svelte'
   import { resizeObserver } from '..'
 
@@ -50,10 +50,10 @@
             dispatch('close', item.id)
           }}
         >
-          <div class="flex-grow caption-color lines-limit-2"><Label label={item.label} /></div>
-          {#if item.id === selected}
-            <div class="check"><CheckBox checked primary /></div>
-          {/if}
+          <div class="flex-grow caption-color nowrap"><Label label={item.label} /></div>
+          <div class="check">
+            {#if item.id === selected}<IconCheck size={'small'} />{/if}
+          </div>
         </button>
       {/each}
     </div>
diff --git a/packages/ui/src/components/icons/Dropdown.svelte b/packages/ui/src/components/icons/Dropdown.svelte
new file mode 100644
index 0000000000..e2d54d5bc5
--- /dev/null
+++ b/packages/ui/src/components/icons/Dropdown.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let size: 'x-small' | 'small' | 'medium' | 'large' | 'full'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="8,11.7 1.6,5.4 2.4,4.6 8,10.3 13.6,4.6 14.4,5.4 " />
+</svg>
diff --git a/plugins/contact-resources/src/components/EditMember.svelte b/plugins/contact-resources/src/components/EditMember.svelte
index 46fd06eae3..41c8605cb4 100644
--- a/plugins/contact-resources/src/components/EditMember.svelte
+++ b/plugins/contact-resources/src/components/EditMember.svelte
@@ -16,6 +16,7 @@
   import contact, { Contact, Member, Organization } from '@hcengineering/contact'
   import { Ref } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
+  import { Scroller } from '@hcengineering/ui'
   import { createEventDispatcher, onMount } from 'svelte'
   import ExpandRightDouble from './icons/ExpandRightDouble.svelte'
   import OrganizationCard from './OrganizationCard.svelte'
@@ -51,11 +52,13 @@
 </script>
 
 {#if object !== undefined && refContact !== undefined && organization !== undefined}
-  <div class="flex-between">
-    <div class="card"><PersonCard object={refContact} on:click /></div>
-    <div class="arrows"><ExpandRightDouble /></div>
-    <div class="card"><OrganizationCard {organization} /></div>
-  </div>
+  <Scroller horizontal>
+    <div class="flex-between min-w-min">
+      <div class="card"><PersonCard object={refContact} on:click /></div>
+      <div class="arrows"><ExpandRightDouble /></div>
+      <div class="card"><OrganizationCard {organization} /></div>
+    </div>
+  </Scroller>
 {/if}
 
 <style lang="scss">
diff --git a/plugins/contact-resources/src/components/OrganizationCard.svelte b/plugins/contact-resources/src/components/OrganizationCard.svelte
index c23f96dbd8..f853ed704f 100644
--- a/plugins/contact-resources/src/components/OrganizationCard.svelte
+++ b/plugins/contact-resources/src/components/OrganizationCard.svelte
@@ -38,7 +38,7 @@
   )
 </script>
 
-<div class="flex-col h-full card-container">
+<div class="antiContactCard">
   <div class="label uppercase"><Label label={contact.string.Organization} /></div>
   <div class="flex-center logo">
     <Avatar avatar={organization.avatar} size={'large'} icon={contact.icon.Company} />
@@ -50,62 +50,21 @@
         {organization.name}
       </div>
     </DocNavLink>
-    <div class="footer flex flex-reverse flex-grow">
-      <div class="flex-center flex-wrap">
+    <div class="footer">
+      <div class="flex-row-center gap-2">
         <Component
           is={attachment.component.AttachmentsPresenter}
-          props={{ value: organization.attachments, object: organization, size: 'medium', showCounter: true }}
+          props={{ value: organization.attachments, object: organization, size: 'small', showCounter: true }}
         />
       </div>
       {#if channels[0]}
-        <div class="flex flex-grow">
-          <ChannelsEditor
-            attachedTo={channels[0].attachedTo}
-            attachedClass={channels[0].attachedToClass}
-            length={'short'}
-            editable={false}
-          />
-        </div>
+        <ChannelsEditor
+          attachedTo={channels[0].attachedTo}
+          attachedClass={channels[0].attachedToClass}
+          length={'short'}
+          editable={false}
+        />
       {/if}
     </div>
   {/if}
 </div>
-
-<style lang="scss">
-  .card-container {
-    padding: 1rem 1.5rem 1.25rem;
-    background-color: var(--board-card-bg-color);
-    border: 1px solid var(--divider-color);
-    border-radius: 0.5rem;
-    transition-property: box-shadow, background-color, border-color;
-    transition-timing-function: var(--timing-shadow);
-    transition-duration: 0.15s;
-    user-select: text;
-
-    &:hover {
-      background-color: var(--board-card-bg-hover);
-      border-color: var(--button-border-color);
-      box-shadow: var(--accent-shadow);
-    }
-
-    .logo {
-      width: 5rem;
-      height: 5rem;
-      color: var(--primary-button-color);
-      background-color: var(--primary-button-enabled);
-      border-radius: 50%;
-    }
-    .label {
-      margin-bottom: 1.75rem;
-      font-weight: 500;
-      font-size: 0.625rem;
-      color: var(--dark-color);
-    }
-    .name {
-      margin: 1rem 0 0.25rem;
-      font-weight: 500;
-      font-size: 1rem;
-      color: var(--caption-color);
-    }
-  }
-</style>
diff --git a/plugins/contact-resources/src/components/PersonCard.svelte b/plugins/contact-resources/src/components/PersonCard.svelte
index effb0e1ee0..831f97779c 100644
--- a/plugins/contact-resources/src/components/PersonCard.svelte
+++ b/plugins/contact-resources/src/components/PersonCard.svelte
@@ -37,7 +37,7 @@
   )
 </script>
 
-<div class="flex-col h-full card-container">
+<div class="antiContactCard">
   <div class="label uppercase"><Label label={contact.string.Person} /></div>
   <div class="flex-center logo">
     <Avatar avatar={object.avatar} size={'large'} icon={contact.icon.Company} />
@@ -50,63 +50,21 @@
       </div>
     </DocNavLink>
     <div class="description overflow-label">{object.city ?? ''}</div>
-    <div class="footer flex flex-reverse flex-grow">
-      <div class="flex-center flex-wrap">
+    <div class="footer">
+      <div class="flex-row-center gap-2">
         <Component
           is={attachment.component.AttachmentsPresenter}
-          props={{ value: object.attachments, object, size: 'medium', showCounter: true }}
+          props={{ value: object.attachments, object, size: 'small', showCounter: true }}
         />
       </div>
       {#if channels[0]}
-        <div class="flex flex-grow">
-          <ChannelsEditor
-            attachedTo={channels[0].attachedTo}
-            attachedClass={channels[0].attachedToClass}
-            length={'short'}
-            editable={false}
-          />
-        </div>
+        <ChannelsEditor
+          attachedTo={channels[0].attachedTo}
+          attachedClass={channels[0].attachedToClass}
+          length={'short'}
+          editable={false}
+        />
       {/if}
     </div>
   {/if}
 </div>
-
-<style lang="scss">
-  .card-container {
-    padding: 1rem 1.5rem 1.25rem;
-    background-color: var(--board-card-bg-color);
-    border: 1px solid var(--divider-color);
-    border-radius: 0.5rem;
-    transition-property: box-shadow, background-color, border-color;
-    transition-timing-function: var(--timing-shadow);
-    transition-duration: 0.15s;
-    user-select: text;
-
-    &:hover {
-      background-color: var(--board-card-bg-hover);
-      border-color: var(--button-border-color);
-      box-shadow: var(--accent-shadow);
-    }
-
-    .label {
-      margin-bottom: 1.75rem;
-      font-weight: 500;
-      font-size: 0.625rem;
-      color: var(--dark-color);
-    }
-    .name {
-      margin: 1rem 0 0.25rem;
-      font-weight: 500;
-      font-size: 1rem;
-      color: var(--caption-color);
-    }
-    .description {
-      font-size: 0.75rem;
-      color: var(--dark-color);
-    }
-    .footer {
-      margin-top: 1.5rem;
-      // overflow: hidden;
-    }
-  }
-</style>
diff --git a/plugins/recruit-resources/src/components/CandidateCard.svelte b/plugins/recruit-resources/src/components/CandidateCard.svelte
index 933b311201..4e5f85a9aa 100644
--- a/plugins/recruit-resources/src/components/CandidateCard.svelte
+++ b/plugins/recruit-resources/src/components/CandidateCard.svelte
@@ -44,7 +44,7 @@
   const client = getClient()
 </script>
 
-<div class="flex-col h-full flex-grow card-container">
+<div class="antiContactCard">
   <div class="label uppercase"><Label label={recruit.string.Talent} /></div>
   <Avatar avatar={candidate?.avatar} size={'large'} />
   {#if candidate}
@@ -61,69 +61,25 @@
       {/if}
     {/if}
     <div class="description overflow-label">{candidate.city ?? ''}</div>
-    <div class="footer flex flex-reverse flex-grow">
-      <div class="flex-center flex-wrap">
+    <div class="footer">
+      <div class="flex-row-center gap-2">
         <Component
           is={chunter.component.CommentsPresenter}
-          props={{ value: candidate.comments, object: candidate, size: 'medium', showCounter: true }}
+          props={{ value: candidate.comments, object: candidate, size: 'small', showCounter: true }}
         />
         <Component
           is={attachment.component.AttachmentsPresenter}
-          props={{ value: candidate.attachments, object: candidate, size: 'medium', showCounter: true }}
+          props={{ value: candidate.attachments, object: candidate, size: 'small', showCounter: true }}
         />
       </div>
       {#if channels[0]}
-        <div class="flex flex-grow">
-          <ChannelsEditor
-            attachedTo={channels[0].attachedTo}
-            attachedClass={channels[0].attachedToClass}
-            length={'short'}
-            editable={false}
-          />
-        </div>
+        <ChannelsEditor
+          attachedTo={channels[0].attachedTo}
+          attachedClass={channels[0].attachedToClass}
+          length={'short'}
+          editable={false}
+        />
       {/if}
     </div>
   {/if}
 </div>
-
-<style lang="scss">
-  .card-container {
-    padding: 1rem 1.5rem 1.25rem;
-    background-color: var(--theme-button-enabled);
-    border: 1px solid var(--theme-button-border);
-    border-radius: 0.5rem;
-    transition-property: box-shadow, background-color, border-color;
-    transition-timing-function: var(--timing-shadow);
-    transition-duration: 0.15s;
-    user-select: text;
-    min-width: 15rem;
-    min-height: 15rem;
-    max-width: 25rem;
-
-    &:hover {
-      background-color: var(--theme-button-hovered);
-      box-shadow: var(--accent-shadow);
-    }
-
-    .label {
-      margin-bottom: 1.75rem;
-      font-weight: 500;
-      font-size: 0.625rem;
-      color: var(--theme-dark-color);
-    }
-    .name {
-      margin: 1rem 0 0.25rem;
-      font-weight: 500;
-      font-size: 1rem;
-      color: var(--theme-caption-color);
-    }
-    .description {
-      font-size: 0.75rem;
-      color: var(--theme-dark-color);
-    }
-    .footer {
-      margin-top: 1.5rem;
-      // overflow: hidden;
-    }
-  }
-</style>
diff --git a/plugins/recruit-resources/src/components/VacancyCard.svelte b/plugins/recruit-resources/src/components/VacancyCard.svelte
index 590da04ebe..25c969b8e6 100644
--- a/plugins/recruit-resources/src/components/VacancyCard.svelte
+++ b/plugins/recruit-resources/src/components/VacancyCard.svelte
@@ -64,7 +64,7 @@
   }
 </script>
 
-<div class="flex-col h-full card-container" class:inline>
+<div class="antiContactCard" class:inline>
   {#if !inline}
     <div class="label uppercase"><Label label={recruit.string.Vacancy} /></div>
     <div class="flex-center logo">
@@ -74,110 +74,45 @@
   {#if vacancy}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <NavLink {disabled} space={vacancy._id} app={recruitId}>
-      <div class="name lines-limit-2">
-        <div class="text-md">
-          {#if inline}
-            <div class="flex-row-center">
-              <VacancyIcon size={'small'} />
-              <span class="ml-2">
-                {vacancy.name}
-              </span>
-            </div>
-          {:else}
-            {vacancy.name}
-          {/if}
-        </div>
+      <div class="name">
+        {#if inline}
+          <div class="flex-row-center">
+            <VacancyIcon size={'small'} />
+            <span class="ml-2">
+              {vacancy.name}
+            </span>
+          </div>
+        {:else}
+          {vacancy.name}
+        {/if}
       </div>
     </NavLink>
     {#if company}
-      <span class="label">{company.name}</span>
+      <span class="label overflow-label">{company.name}</span>
     {/if}
     {#if !inline || vacancy.description}
       <div class="description lines-limit-2 text-md">{vacancy.description ?? ''}</div>
     {/if}
 
-    <div class="footer flex flex-reverse flex-grow">
-      <div class="flex-center flex-wrap">
+    <div class="footer">
+      <div class="flex-row-center gap-2">
         <Component
           is={chunter.component.CommentsPresenter}
-          props={{ value: vacancy.comments, object: vacancy, size: 'medium', showCounter: true }}
+          props={{ value: vacancy.comments, object: vacancy, size: 'small', showCounter: true }}
         />
         <Component
           is={attachment.component.AttachmentsPresenter}
-          props={{ value: vacancy.attachments, object: vacancy, size: 'medium', showCounter: true }}
+          props={{ value: vacancy.attachments, object: vacancy, size: 'small', showCounter: true }}
         />
       </div>
       {#if channels[0]}
-        <div class="flex flex-grow">
-          <ChannelsEditor
-            attachedTo={channels[0].attachedTo}
-            attachedClass={channels[0].attachedToClass}
-            length={'short'}
-            editable={false}
-          />
-        </div>
+        <ChannelsEditor
+          attachedTo={channels[0].attachedTo}
+          attachedClass={channels[0].attachedToClass}
+          length={'short'}
+          editable={false}
+        />
       {/if}
     </div>
   {/if}
 </div>
-
-<style lang="scss">
-  .card-container {
-    padding: 1rem 1.5rem 1.25rem;
-    background-color: var(--theme-button-enabled);
-    border: 1px solid var(--theme-button-border);
-    border-radius: 0.5rem;
-    transition-property: box-shadow, background-color, border-color;
-    transition-timing-function: var(--timing-shadow);
-    transition-duration: 0.15s;
-    user-select: text;
-    min-width: 15rem;
-    min-height: 15rem;
-
-    &:hover {
-      background-color: var(--theme-button-hovered);
-      box-shadow: var(--accent-shadow);
-    }
-
-    .logo {
-      width: 4.5rem;
-      height: 4.5rem;
-      color: var(--primary-button-color);
-      background-color: var(--primary-button-enabled);
-      border-radius: 50%;
-    }
-    .label {
-      margin-bottom: 1.75rem;
-      font-weight: 500;
-      font-size: 0.625rem;
-      color: var(--dark-color);
-    }
-    .name {
-      margin: 1rem 0 0.25rem;
-      font-weight: 500;
-      font-size: 1rem;
-      color: var(--caption-color);
-    }
-    .description {
-      font-size: 0.75rem;
-      color: var(--dark-color);
-    }
-
-    &.inline {
-      padding: 0.5rem 0.5rem 0.25rem;
-      min-width: 1rem;
-      min-height: 1rem;
-
-      background-color: inherit;
-      border: inherit;
-      border-radius: inherit;
-      .name {
-        margin: 0.25rem 0 0.25rem;
-        font-size: 0.75rem;
-      }
-      .label {
-        margin-bottom: 0rem;
-      }
-    }
-  }
-</style>
diff --git a/plugins/tags-resources/src/components/TagsFilter.svelte b/plugins/tags-resources/src/components/TagsFilter.svelte
index 3736111e80..5b003dc416 100644
--- a/plugins/tags-resources/src/components/TagsFilter.svelte
+++ b/plugins/tags-resources/src/components/TagsFilter.svelte
@@ -198,7 +198,7 @@
                       handleFilterToggle(element)
                     }}
                   >
-                    <div class="tag" style:background-color={color.background} />
+                    <div class="tag" style:background-color={color.color} />
                     <span class="overflow-label label flex-grow" style:color={color.title}>{element.title}</span>
                     <div class="check pointer-events-none">
                       {#if isSelected(element)}
diff --git a/plugins/view-resources/src/components/EditDoc.svelte b/plugins/view-resources/src/components/EditDoc.svelte
index 4a0236c40f..8c7a39aed9 100644
--- a/plugins/view-resources/src/components/EditDoc.svelte
+++ b/plugins/view-resources/src/components/EditDoc.svelte
@@ -345,9 +345,9 @@
       {/if}
     </svelte:fragment>
 
-    <svelte:fragment slot="subheader">
+    <svelte:fragment slot="header">
       {#if mainEditor && mainEditor.pinned}
-        <div class="flex-col flex-grow my-4 step-tb-6">
+        <div class="flex-col flex-grow my-4">
           <Component is={mainEditor.editor} props={{ object }} on:open={handleOpen} />
         </div>
       {/if}
diff --git a/plugins/view-resources/src/components/ViewOptions.svelte b/plugins/view-resources/src/components/ViewOptions.svelte
index 0392b7dba1..564a4ac70e 100644
--- a/plugins/view-resources/src/components/ViewOptions.svelte
+++ b/plugins/view-resources/src/components/ViewOptions.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getClient } from '@hcengineering/presentation'
-  import { DropdownIntlItem, DropdownLabelsIntl, Label, MiniToggle } from '@hcengineering/ui'
-  import { Viewlet, ViewOptions, ViewOptionsModel } from '@hcengineering/view'
+  import { DropdownIntlItem, DropdownLabelsIntl, Label, Toggle } from '@hcengineering/ui'
+  import { Viewlet, ViewOptions, ViewOptionsModel, ViewOptionModel } from '@hcengineering/view'
   import { createEventDispatcher } from 'svelte'
   import view from '../plugin'
   import { buildConfigLookup, getKeyLabel } from '../utils'
@@ -59,68 +59,80 @@
     const notAllowed = current.slice(0, i)
     return groupBy.filter((p) => !notAllowed.includes(p.id as string))
   }
+
+  const changeToggle = (model: ViewOptionModel) => {
+    viewOptions[model.key] = !viewOptions[model.key]
+    dispatch('update', { key: model.key, value: viewOptions[model.key] })
+  }
 </script>
 
-<div class="antiCard">
-  <div class="antiCard-group grid">
-    {#each groups as group, i}
-      <span class="label"><Label label={i === 0 ? view.string.Grouping : view.string.Then} /></span>
-      <div class="value grouping">
-        <DropdownLabelsIntl
-          label={view.string.Grouping}
-          items={getItems(groupBy, i, viewOptions.groupBy)}
-          selected={group}
-          width="10rem"
-          justify="left"
-          on:selected={(e) => selectGrouping(e.detail, i)}
-        />
-      </div>
-    {/each}
-    <span class="label"><Label label={view.string.Ordering} /></span>
-    <div class="value ordering">
+<div class="antiCard dialog menu">
+  <div class="antiCard-menu__spacer" />
+  {#each groups as group, i}
+    <div class="antiCard-menu__item grouping">
+      <span class="overflow-label"><Label label={i === 0 ? view.string.Grouping : view.string.Then} /></span>
       <DropdownLabelsIntl
-        label={view.string.Ordering}
-        items={orderBy}
-        selected={viewOptions.orderBy[0]}
+        label={view.string.Grouping}
+        kind={'secondary'}
+        size={'medium'}
+        items={getItems(groupBy, i, viewOptions.groupBy)}
+        selected={group}
         width="10rem"
         justify="left"
-        on:selected={(e) => {
-          const key = e.detail
-          const value = config.orderBy.find((p) => p[0] === key)
-          if (value !== undefined) {
-            viewOptions.orderBy = value
-            dispatch('update', { key: 'orderBy', value })
-          }
-        }}
+        on:selected={(e) => selectGrouping(e.detail, i)}
       />
     </div>
-    {#each config.other.filter((p) => !p.hidden?.(viewOptions)) as model}
-      <span class="label"><Label label={model.label} /></span>
-      <div class="value">
-        {#if isToggleType(model)}
-          <MiniToggle
-            on={viewOptions[model.key] ?? model.defaultValue}
-            on:change={() => {
-              viewOptions[model.key] = !viewOptions[model.key]
-              dispatch('update', { key: model.key, value: viewOptions[model.key] })
-            }}
-          />
-        {:else if isDropdownType(model)}
-          {@const items = model.values.filter(({ hidden }) => !hidden?.(viewOptions))}
-          <DropdownLabelsIntl
-            label={model.label}
-            {items}
-            selected={viewOptions[model.key] ?? model.defaultValue}
-            width="10rem"
-            justify="left"
-            on:selected={(e) => {
-              viewOptions[model.key] = e.detail
-              dispatch('update', { key: model.key, value: e.detail })
-            }}
-          />
-        {/if}
-      </div>
-    {/each}
-    <slot name="extra" />
+  {/each}
+  <div class="antiCard-menu__item ordering">
+    <span class="overflow-label"><Label label={view.string.Ordering} /></span>
+    <DropdownLabelsIntl
+      label={view.string.Ordering}
+      kind={'secondary'}
+      size={'medium'}
+      items={orderBy}
+      selected={viewOptions.orderBy[0]}
+      width="10rem"
+      justify="left"
+      on:selected={(e) => {
+        const key = e.detail
+        const value = config.orderBy.find((p) => p[0] === key)
+        if (value !== undefined) {
+          viewOptions.orderBy = value
+          dispatch('update', { key: 'orderBy', value })
+        }
+      }}
+    />
   </div>
+  <div class="antiCard-menu__divider" />
+  {#each config.other.filter((p) => !p.hidden?.(viewOptions)) as model}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div
+      class="antiCard-menu__item hoverable ordering"
+      on:click={() => {
+        if (isToggleType(model)) changeToggle(model)
+      }}
+    >
+      <span class="overflow-label"><Label label={model.label} /></span>
+      {#if isToggleType(model)}
+        <Toggle on={viewOptions[model.key] ?? model.defaultValue} on:change={() => changeToggle(model)} />
+      {:else if isDropdownType(model)}
+        {@const items = model.values.filter(({ hidden }) => !hidden?.(viewOptions))}
+        <DropdownLabelsIntl
+          label={model.label}
+          kind={'secondary'}
+          size={'medium'}
+          {items}
+          selected={viewOptions[model.key] ?? model.defaultValue}
+          width="10rem"
+          justify="left"
+          on:selected={(e) => {
+            viewOptions[model.key] = e.detail
+            dispatch('update', { key: model.key, value: e.detail })
+          }}
+        />
+      {/if}
+    </div>
+  {/each}
+  <slot name="extra" />
+  <div class="antiCard-menu__spacer" />
 </div>
diff --git a/plugins/view-resources/src/components/list/ListHeader.svelte b/plugins/view-resources/src/components/list/ListHeader.svelte
index f2a895bbb6..260cebc891 100644
--- a/plugins/view-resources/src/components/list/ListHeader.svelte
+++ b/plugins/view-resources/src/components/list/ListHeader.svelte
@@ -81,7 +81,7 @@
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
     style:z-index={10 - level}
-    style:background={headerBGColor}
+    style:--header-bg-color={headerBGColor}
     class="flex-between categoryHeader row"
     class:flat
     class:collapsed
@@ -150,7 +150,7 @@
       {:else}
         <span class="antiSection-header__counter ml-2">{items.length}</span>
       {/if}
-      <div class="flex-row-center flex-reverse flex-grow">
+      <div class="flex-row-center flex-reverse flex-grow mr-2 gap-2 reverse">
         {#each extraHeaders ?? [] as extra}
           <Component is={extra} props={{ ...props, value: category, category: groupByKey, docs: items }} />
         {/each}
@@ -228,6 +228,7 @@
       border-bottom-color: transparent;
     }
     &::before {
+      background: var(--header-bg-color);
       z-index: -1;
     }
 
@@ -250,8 +251,8 @@
       top: 2.75rem;
       padding: 0 2.5rem;
       background: var(--theme-list-subheader-color);
-      border-left: 1px solid var(--theme-list-border-color);
-      border-right: 1px solid var(--theme-list-border-color);
+      border-left: 1px solid var(--theme-list-subheader-divider);
+      border-right: 1px solid var(--theme-list-subheader-divider);
       border-bottom: 1px solid var(--theme-list-subheader-divider);
       // here should be top 3rem for sticky, but with ExpandCollapse it gives strange behavior