From 67b7c9df24ba27cf926b695a16e903a3c7eb40fd Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Sun, 23 Apr 2023 20:37:24 +0300
Subject: [PATCH] New themes (#3049)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
Co-authored-by: Denis Bykhov <bykhov.denis@gmail.com>
---
 models/tracker/src/index.ts                   |  14 +-
 packages/kanban/src/components/Kanban.svelte  |   3 +-
 .../src/components/KanbanCardEmpty.svelte     |   6 +-
 .../kanban/src/components/KanbanRow.svelte    |  11 +-
 .../src/components/MessageBox.svelte          |   8 +-
 .../src/components/NavLink.svelte             |  21 +-
 .../src/components/ReferenceInput.svelte      |  21 +-
 packages/theme/styles/_colors.scss            | 149 +++++++++-
 packages/theme/styles/_layouts.scss           |  52 ++--
 packages/theme/styles/common.scss             |  62 ++--
 packages/theme/styles/components.scss         | 160 +++++++---
 packages/theme/styles/dialogs.scss            |  19 +-
 packages/theme/styles/global.scss             |   2 +-
 packages/theme/styles/panel.scss              |  20 +-
 packages/theme/styles/popups.scss             |   3 +-
 packages/ui/src/colors.ts                     |  55 ++++
 packages/ui/src/components/ActionIcon.svelte  |   3 +-
 packages/ui/src/components/Button.svelte      | 175 ++++++-----
 packages/ui/src/components/CheckBox.svelte    |  30 +-
 .../ui/src/components/EditWithIcon.svelte     |  24 +-
 .../ui/src/components/MultiProgress.svelte    |   4 +-
 .../ui/src/components/PanelInstance.svelte    |   2 +-
 packages/ui/src/components/Scroller.svelte    |  54 +++-
 packages/ui/src/components/SearchEdit.svelte  |   1 -
 packages/ui/src/components/ShowMore.svelte    |   8 +-
 packages/ui/src/components/Status.svelte      |   2 +-
 packages/ui/src/components/StylishEdit.svelte |  10 +-
 packages/ui/src/components/TabList.svelte     |  50 ++--
 .../calendar/DateRangePresenter.svelte        |  48 +--
 .../components/calendar/MonthCalendar.svelte  |  13 +-
 .../components/calendar/WeekCalendar.svelte   |   5 +-
 .../components/calendar/YearCalendar.svelte   |  11 +-
 .../src/components/icons/CollapseArrow.svelte |   8 +
 .../internal/FontSizeSelector.svelte          |   2 +
 .../ui/src/components/internal/Root.svelte    |   2 +-
 packages/ui/src/index.ts                      |   2 +
 packages/ui/src/popups.ts                     |   2 +-
 packages/ui/src/types.ts                      |   7 +-
 .../src/components/AttachmentRefInput.svelte  |   8 +-
 .../src/components/FileBrowser.svelte         |  36 ++-
 .../src/components/FileBrowserFilters.svelte  |  80 +++--
 .../src/components/CalendarView.svelte        | 280 +++++++++---------
 .../src/components/Events.svelte              |  48 ++-
 .../src/components/Channel.svelte             |   5 +
 .../src/components/ChannelHeader.svelte       |   2 +-
 .../src/components/ChunterBrowser.svelte      |   2 +-
 .../src/components/DmHeader.svelte            |   3 +-
 .../src/components/Header.svelte              |   1 +
 .../src/components/JumpToDateSelector.svelte  |  45 +--
 .../src/components/Message.svelte             |  13 +-
 .../src/components/SavedMessages.svelte       |   8 +-
 .../src/components/Thread.svelte              |  18 +-
 .../src/components/Threads.svelte             |  15 +-
 plugins/contact-assets/lang/en.json           |   2 +-
 plugins/contact-assets/lang/ru.json           |   2 +-
 .../src/components/Avatar.svelte              |   6 +
 .../src/components/Contacts.svelte            |  39 ++-
 .../EmployeeAttributePresenter.svelte         |   6 +-
 .../src/components/EmployeePresenter.svelte   |   7 +-
 .../components/EmployeeRefPresenter.svelte    |   6 +-
 .../src/components/PersonContent.svelte       |  21 +-
 .../src/components/PersonPresenter.svelte     |   8 +-
 .../src/components/icons/Avatar.svelte        |   4 +
 .../src/components/Documents.svelte           |  34 +--
 .../src/components/DepartmentCard.svelte      | 118 ++++----
 .../src/components/Schedule.svelte            | 156 +++++-----
 .../src/components/Structure.svelte           |  42 ++-
 .../components/schedule/MonthTableView.svelte |  51 ++--
 .../src/components/schedule/MonthView.svelte  |  33 +--
 .../src/components/Categories.svelte          |  40 +--
 .../src/components/Form.svelte                |   6 +-
 .../src/components/LoginApp.svelte            |   2 +-
 .../src/components/SelectWorkspace.svelte     |   7 +-
 .../src/components/StatusControl.svelte       |   6 +-
 .../src/components/CreateCandidate.svelte     |  21 +-
 .../src/components/Organizations.svelte       |  50 ++--
 .../src/components/Vacancies.svelte           |  50 ++--
 .../src/components/CategoryBar.svelte         |   2 +-
 .../src/components/LabelsPresenter.svelte     |  50 ++--
 .../components/TagReferencePresenter.svelte   |   7 +-
 .../src/components/TagsView.svelte            |  42 +--
 plugins/task-assets/assets/icons.svg          |   9 +-
 .../src/components/AssignedTasks.svelte       |   5 +-
 .../src/components/Dashboard.svelte           |   3 +-
 .../src/components/StatusTableView.svelte     |  21 +-
 plugins/tracker-assets/assets/icons.svg       |  28 +-
 .../src/components/ComponentSelector.svelte   |   5 +-
 .../src/components/ModeSelector.svelte        |  58 ++--
 .../components/ComponentBrowser.svelte        |  45 ++-
 .../components/ComponentEditor.svelte         |   7 +-
 .../src/components/icons/StatusIcon.svelte    |  38 ++-
 .../components/issues/IssuePresenter.svelte   |  10 +-
 .../src/components/issues/IssuesHeader.svelte |  44 +--
 .../src/components/issues/IssuesView.svelte   |   2 +-
 .../src/components/issues/KanbanView.svelte   |   6 +-
 .../components/issues/PriorityEditor.svelte   |   4 +-
 .../issues/PriorityRefPresenter.svelte        |  11 +-
 .../src/components/issues/StatusEditor.svelte |   9 +-
 .../components/issues/StatusPresenter.svelte  |  22 +-
 .../issues/StatusRefPresenter.svelte          |  11 +-
 .../components/issues/TitlePresenter.svelte   |  11 +-
 .../issues/timereport/EstimationEditor.svelte |   2 +-
 .../EstimationProgressCircle.svelte           |  10 +-
 .../EstimationStatsPresenter.svelte           |  44 ++-
 .../issues/timereport/TimePresenter.svelte    |  13 +-
 .../components/sprints/SprintBrowser.svelte   | 100 +++----
 .../components/sprints/SprintEditor.svelte    |  87 +++---
 .../components/sprints/SprintSelector.svelte  |   5 +-
 .../templates/IssueTemplatesView.svelte       |  22 +-
 plugins/view-assets/assets/icons.svg          |  14 +-
 .../src/components/ClassAttributeBar.svelte   |  10 +-
 .../src/components/DocNavLink.svelte          |   3 +-
 .../src/components/Table.svelte               |  12 +-
 .../components/ViewletSettingButton.svelte    |  24 +-
 .../src/components/filter/FilterBar.svelte    |  15 +-
 .../src/components/filter/FilterButton.svelte |  24 +-
 .../components/filter/FilterSection.svelte    |  12 +-
 .../src/components/icons/ArrowDown.svelte     |  24 ++
 .../src/components/icons/Filter.svelte        |  26 ++
 .../src/components/icons/UpDown.svelte        |  26 ++
 .../components/list/DividerPresenter.svelte   |  12 +
 .../src/components/list/ListCategories.svelte |   4 +-
 .../src/components/list/ListCategory.svelte   |  69 +++--
 .../src/components/list/ListHeader.svelte     | 150 +++++++---
 .../src/components/list/ListItem.svelte       |  96 ++++--
 .../src/components/list/ListView.svelte       |   6 +-
 .../components/status/StatusPresenter.svelte  |   2 +-
 plugins/view-resources/src/index.ts           |   2 +
 plugins/view/src/index.ts                     |   3 +-
 .../src/components/Header.svelte              |  11 +-
 .../src/components/SpaceBrowser.svelte        | 118 +++++---
 .../src/components/SpaceHeader.svelte         |  56 ++--
 .../src/components/SpecialView.svelte         |  38 +--
 .../src/components/Workbench.svelte           |   6 +-
 tests/sanity/tests/hr.spec.ts                 |   6 +-
 tests/sanity/tests/org.members.spec.ts        |   2 +-
 tests/sanity/tests/tracker.spec.ts            |   6 +-
 tests/sanity/tests/workbench.spec.ts          |   2 +-
 138 files changed, 2263 insertions(+), 1599 deletions(-)
 create mode 100644 packages/ui/src/components/icons/CollapseArrow.svelte
 create mode 100644 plugins/view-resources/src/components/icons/ArrowDown.svelte
 create mode 100644 plugins/view-resources/src/components/icons/Filter.svelte
 create mode 100644 plugins/view-resources/src/components/icons/UpDown.svelte
 create mode 100644 plugins/view-resources/src/components/list/DividerPresenter.svelte

diff --git a/models/tracker/src/index.ts b/models/tracker/src/index.ts
index 116a69cb8a..0ce7abe63b 100644
--- a/models/tracker/src/index.ts
+++ b/models/tracker/src/index.ts
@@ -529,7 +529,7 @@ export function createModel (builder: Builder): void {
         {
           key: '',
           presenter: tracker.component.IssuePresenter,
-          props: { type: 'issue', listProps: { fixed: 'left' } }
+          props: { type: 'issue', listProps: { key: 'issue', fixed: 'left' } }
         },
         {
           key: '',
@@ -544,7 +544,11 @@ export function createModel (builder: Builder): void {
           presenter: tags.component.LabelsPresenter,
           props: { kind: 'list', full: false, lookupField: 'labels', listProps: { optional: true, compression: true } }
         },
-        { key: '', presenter: tracker.component.DueDatePresenter, props: { kind: 'list' } },
+        {
+          key: '',
+          presenter: tracker.component.DueDatePresenter,
+          props: { kind: 'list', listProps: { optional: true, compression: true } }
+        },
         {
           key: '',
           presenter: tracker.component.ComponentEditor,
@@ -575,15 +579,17 @@ export function createModel (builder: Builder): void {
             }
           }
         },
+        { key: '', presenter: view.component.DividerPresenter, props: { type: 'divider' } },
         {
           key: '',
           presenter: tracker.component.EstimationEditor,
-          props: { kind: 'list', size: 'small', listProps: { optional: true } }
+          props: { kind: 'list', size: 'small', listProps: { key: 'estimation', fixed: 'left' } }
         },
+        { key: '', presenter: view.component.DividerPresenter, props: { type: 'divider' } },
         {
           key: 'modifiedOn',
           presenter: tracker.component.ModificationDatePresenter,
-          props: { listProps: { fixed: 'right', optional: true } }
+          props: { listProps: { key: 'modified', fixed: 'left' } }
         },
         {
           key: '$lookup.assignee',
diff --git a/packages/kanban/src/components/Kanban.svelte b/packages/kanban/src/components/Kanban.svelte
index 159c308129..7261fea82e 100644
--- a/packages/kanban/src/components/Kanban.svelte
+++ b/packages/kanban/src/components/Kanban.svelte
@@ -302,7 +302,7 @@
   }
 </script>
 
-<div class="kanban-container top-divider">
+<div class="kanban-container">
   <ScrollBox>
     <div class="kanban-content">
       {#each categories as state, si (typeof state === 'object' ? state.name : state)}
@@ -360,7 +360,6 @@
     position: relative;
     width: 100%;
     height: 100%;
-    background: var(--board-bg-color);
   }
   .kanban-content {
     display: flex;
diff --git a/packages/kanban/src/components/KanbanCardEmpty.svelte b/packages/kanban/src/components/KanbanCardEmpty.svelte
index 2d251133fb..ffe43e7e96 100644
--- a/packages/kanban/src/components/KanbanCardEmpty.svelte
+++ b/packages/kanban/src/components/KanbanCardEmpty.svelte
@@ -25,13 +25,13 @@
     align-items: center;
     padding: 0.75rem 1.5rem;
     color: var(--dark-color);
-    background-color: var(--board-card-bg-color);
-    border: 1px dotted var(--divider-color);
+    background-color: var(--theme-kanban-card-bg-color);
+    border: 1px dotted var(--theme-kanban-card-border);
     border-radius: 0.75rem;
     cursor: pointer;
 
     &:hover {
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
     }
   }
 </style>
diff --git a/packages/kanban/src/components/KanbanRow.svelte b/packages/kanban/src/components/KanbanRow.svelte
index d5fda1741a..22dabf9c65 100644
--- a/packages/kanban/src/components/KanbanRow.svelte
+++ b/packages/kanban/src/components/KanbanRow.svelte
@@ -106,13 +106,14 @@
 
 <style lang="scss">
   .card-container {
-    background-color: var(--board-card-bg-color);
+    background-color: var(--theme-kanban-card-bg-color);
+    border: 1px solid var(--theme-kanban-card-border);
     border-radius: 0.25rem;
     // transition: box-shadow .15s ease-in-out;
 
-    &:hover {
-      background-color: var(--board-card-bg-hover);
-    }
+    // &:hover {
+    //   background-color: var(--board-card-bg-hover);
+    // }
     &.checked {
       background-color: var(--highlight-select);
       box-shadow: inset 0 0 1px 1px var(--highlight-select-border);
@@ -123,7 +124,7 @@
     }
     &.selection,
     &.checked.selection {
-      box-shadow: inset 0 0 1px 1px var(--primary-bg-color);
+      box-shadow: inset 0 0 1px 1px var(--primary-button-enabled);
       animation: anim-border 1s ease-in-out;
 
       &:hover {
diff --git a/packages/presentation/src/components/MessageBox.svelte b/packages/presentation/src/components/MessageBox.svelte
index 6e8a88f745..753fed0024 100644
--- a/packages/presentation/src/components/MessageBox.svelte
+++ b/packages/presentation/src/components/MessageBox.svelte
@@ -36,7 +36,7 @@
     <Button
       focus
       label={presentation.string.Ok}
-      size={'small'}
+      size={'large'}
       kind={'primary'}
       loading={processing}
       on:click={() => {
@@ -55,7 +55,7 @@
     {#if canSubmit}
       <Button
         label={presentation.string.Cancel}
-        size={'small'}
+        size={'large'}
         on:click={() => {
           dispatch('close', false)
         }}
@@ -71,14 +71,14 @@
     padding: 2rem 1.75rem 1.75rem;
     width: 30rem;
     max-width: 40rem;
-    background: var(--popup-bg-color);
+    background: var(--theme-bg-color);
     border-radius: 1.25rem;
     user-select: none;
     box-shadow: var(--popup-shadow);
 
     .message {
       margin-bottom: 1.75rem;
-      color: var(--accent-color);
+      color: var(--theme-content-color);
     }
     .footer {
       flex-shrink: 0;
diff --git a/packages/presentation/src/components/NavLink.svelte b/packages/presentation/src/components/NavLink.svelte
index e496160c4c..11f5d09ff5 100644
--- a/packages/presentation/src/components/NavLink.svelte
+++ b/packages/presentation/src/components/NavLink.svelte
@@ -20,6 +20,7 @@
   export let onClick: ((event: MouseEvent) => void) | undefined = undefined
   export let noUnderline = false
   export let inline = false
+  export let colorInherit: boolean = false
   export let shrink: number = 0
 
   function clickHandler (e: MouseEvent) {
@@ -53,13 +54,14 @@
     class:cursor-pointer={!disableClick}
     class:noUnderline
     class:inline
+    class:colorInherit
     style:flex-shrink={shrink}
     on:click={clickHandler}
   >
     <slot />
   </span>
 {:else}
-  <a {href} class:noUnderline class:inline style:flex-shrink={shrink} on:click={clickHandler}>
+  <a {href} class:noUnderline class:inline class:colorInherit style:flex-shrink={shrink} on:click={clickHandler}>
     <slot />
   </a>
 {/if}
@@ -70,32 +72,41 @@
     display: flex;
     align-items: center;
     min-width: 0;
-    color: var(--accent-color);
     // overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     cursor: pointer;
     font-weight: inherit;
 
+    &:not(.colorInherit) {
+      color: var(--theme-content-color);
+    }
+    &.colorInherit {
+      color: inherit;
+    }
     &.inline {
       display: inline-flex;
       align-items: center;
     }
 
     &.noUnderline {
-      color: var(--caption-color);
       font-weight: 500;
+      &:not(.colorInherit) {
+        color: var(--theme-caption-color);
+      }
     }
 
     &:not(.noUnderline) {
       &:hover {
-        color: var(--caption-color);
         text-decoration: underline;
+        &:not(.colorInherit) {
+          color: var(--theme-caption-color);
+        }
       }
     }
 
     &:active {
-      color: var(--accent-color);
+      color: var(--theme-content-color);
     }
   }
 </style>
diff --git a/packages/text-editor/src/components/ReferenceInput.svelte b/packages/text-editor/src/components/ReferenceInput.svelte
index 650841ab72..402d1077ec 100644
--- a/packages/text-editor/src/components/ReferenceInput.svelte
+++ b/packages/text-editor/src/components/ReferenceInput.svelte
@@ -361,7 +361,7 @@
     align-items: center;
     width: 1rem;
     height: 1rem;
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
     opacity: 0.6;
     cursor: pointer;
 
@@ -383,8 +383,8 @@
 
     .formatPanelRef {
       padding: 0.5rem;
-      background-color: var(--body-color);
-      border: 1px solid var(--divider-color);
+      background-color: var(--theme-comp-header-color);
+      border: 1px solid var(--theme-divider-color);
       border-radius: 0.5rem 0.5rem 0 0;
       border-bottom: 0;
 
@@ -402,8 +402,8 @@
       align-items: flex-end;
       min-height: 2.75rem;
       padding: 0.75rem 1rem;
-      background-color: var(--body-accent);
-      border: 1px solid var(--divider-color);
+      background-color: var(--theme-refinput-color);
+      border: 1px solid var(--theme-divider-color);
       border-radius: 0.5rem;
 
       &.withoutTopBorder {
@@ -417,7 +417,7 @@
         align-items: center;
         width: calc(100% - 1.75rem);
         height: 100%;
-        color: var(--content-color);
+        color: var(--theme-content-color);
         background-color: transparent;
         border: none;
         outline: none;
@@ -468,19 +468,18 @@
         .icon {
           width: 1.25rem;
           height: 1.25rem;
-          color: var(--dark-color);
+          color: var(--theme-dark-color);
           cursor: pointer;
 
           &:hover {
-            color: var(--caption-color);
+            color: var(--theme-caption-color);
           }
         }
         &:focus {
-          border: 1px solid var(--primary-button-focused-border);
-          box-shadow: 0 0 0 3px var(--primary-button-outline);
+          box-shadow: 0 0 0 2px var(--primary-button-focused-border);
 
           & > .icon {
-            color: var(--caption-color);
+            color: var(--theme-caption-color);
           }
         }
 
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index eb512bc0ac..a7ace02cf4 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -15,16 +15,17 @@
 
 /* Common Colors */
 * {
-  --primary-button-color: #fff;
-  --primary-button-enabled: #4474F6;
-  --primary-button-hovered: #2A5FF6;
-  --primary-button-pressed: #194CD7;
-  --primary-button-focused: #194CD7;
-  --primary-button-disabled: #5771B9;
-  --primary-button-focused-border: #7393EB;
-  --primary-button-outline: rgba(87, 132, 255, .3);
-  --primary-button-border: rgba(255, 255, 255, .09);
+  // --primary-button-color: #fff;
+  // --primary-button-enabled: #4474F6;
+  // --primary-button-hovered: #2A5FF6;
+  // --primary-button-pressed: #194CD7;
+  // --primary-button-focused: #194CD7;
+  // --primary-button-disabled: #5771B9;
+  // --primary-button-focused-border: #7393EB;
+  // --primary-button-outline: rgba(87, 132, 255, .3);
+  // --primary-button-border: rgba(255, 255, 255, .09);
 
+  --white-color: #fff;
   --duotone-color: rgba(126, 134, 158, .25);
 
   --system-error-color: #EE7A7A;
@@ -52,6 +53,67 @@
 
 /* Dark Theme */
 .theme-dark {
+  --primary-button-color: #fff;
+  --primary-button-enabled: #205DC2;
+  --primary-button-hovered: #1A53AF;
+  --primary-button-pressed: #144CA8;
+  --primary-button-focused: #144CA8;
+  --primary-button-disabled: #6E9FED;
+  --primary-button-focused-border: #6E9FED;
+  --primary-button-border: rgba(255, 255, 255, .09);
+  --primary-button-outline: rgba(87, 132, 255, .3); // OLD
+
+  --theme-button-enabled: rgba(255, 255, 255, .02);
+  --theme-button-hovered: rgba(255, 255, 255, .04);
+  --theme-button-pressed: rgba(255, 255, 255, .08);
+  --theme-button-focused: rgba(255, 255, 255, .04);
+  --theme-button-disabled: rgba(255, 255, 255, .02);
+  --theme-button-border: rgba(255, 255, 255, .06);
+
+  --theme-refinput-color: rgba(255, 255, 255, .03);
+
+  --theme-bg-color: #1A1A28;
+  --theme-back-color: #0f0f18;
+  --theme-statusbar-color: #2C2C35;
+  --theme-navpanel-color: #14141F;
+  --theme-navpanel-hovered: rgba(255, 255, 255, .04);
+  --theme-navpanel-selected: rgba(255, 255, 255, .07);
+  --theme-navpanel-divider: rgba(255, 255, 255, .1);
+  --theme-navpanel-border: transparent;
+  --theme-navpanel-icons-color: #7F7F7F;
+  --theme-comp-header-color: #1F1F2C;
+  --theme-divider-color: rgba(255, 255, 255, .06);
+
+  --theme-trans-color: rgba(255, 255, 255, .3);
+  --theme-darker-color: rgba(255, 255, 255, .4);
+  --theme-halfcontent-color: rgba(255, 255, 255, .5);
+  --theme-dark-color: rgba(255, 255, 255, .6);
+  --theme-content-color: rgba(255, 255, 255, .8);
+  --theme-caption-color: #FFF;
+
+  --theme-list-border-color: rgba(255, 255, 255, .05);
+  --theme-list-header-color: #C88C65;
+  --theme-list-subheader-color: #262634;
+  --theme-list-row-color: #21212F;
+  --theme-list-button-color: #262633;
+  --theme-list-divider-color: rgba(255, 255, 255, .09);
+  --theme-list-subheader-divider: transparent;
+
+  --theme-table-border-color: rgba(255, 255, 255, .1);
+  --theme-table-header-color: #1C1C29;
+  --theme-table-row-color: #21212F;
+
+  --theme-kanban-card-bg-color: rgba(222, 222, 240, .04);
+  --theme-kanban-card-border: transparent;
+  --theme-kanban-card-footer: #D9D9D9;
+  
+  --theme-tablist-color: rgba(0, 0, 0, .02);
+  --theme-checkbox-color: #000;
+  --theme-checkbox-bg-color: #FFF;
+  --theme-checkbox-border: rgba(0, 0, 0, .12);
+  --theme-checkbox-disabled: #999;
+  --theme-progress-color: #FFFFFF;
+
   --body-color: #1f2023;
   --body-accent: #222326;
   --board-bg-color: #1c1d1f;
@@ -61,7 +123,7 @@
   --accent-bg-color: #27282b;
   --accent-shadow: rgb(0 0 0 / 10%) 0px 2px 4px;
 
-  --highlight-hover: #28292b;
+  --highlight-hover: #282834;
   --highlight-select: #252b3a;
   --highlight-select-border: #44506b;
   --highlight-select-hover: #2c3346;
@@ -106,7 +168,7 @@
   --button-bg-hover: #37383b;
   --button-border-color: #3c3f44;
   --button-border-hover: #45484e;
-  --button-shadow: rgb(0 0 0 / 25%) 0px 1px 1px;
+  --button-shadow: rgb(0 0 0 / 15%) 0px 1px 1px 1px;
   --button-disabled-color: #313236;
   --noborder-bg-color: #313236;
   --noborder-bg-hover: #37383b;
@@ -135,6 +197,67 @@
 
 /* Light Theme */
 .theme-light {
+  --primary-button-color: #fff;
+  --primary-button-enabled: #2B5190;
+  --primary-button-hovered: #1A53AF; // DARK
+  --primary-button-pressed: #144CA8; // DARK
+  --primary-button-focused: #144CA8; // DARK
+  --primary-button-disabled: #6E9FED; // DARK
+  --primary-button-focused-border: #6E9FED; // DARK
+  --primary-button-border: rgba(255, 255, 255, .09);
+  --primary-button-outline: rgba(87, 132, 255, .3); // OLD
+  
+  --theme-button-enabled: rgba(0, 0, 0, .02);
+  --theme-button-hovered: rgba(0, 0, 0, .04);
+  --theme-button-pressed: rgba(0, 0, 0, .08);
+  --theme-button-focused: rgba(0, 0, 0, .04);
+  --theme-button-disabled: rgba(0, 0, 0, .02);
+  --theme-button-border: rgba(0, 0, 0, .06);
+
+  --theme-refinput-color: rgba(0, 0, 0, .03);
+
+  --theme-bg-color: #F1F1F4;
+  --theme-back-color: #D9D9DD;
+  --theme-statusbar-color: #bfbfc6;
+  --theme-navpanel-color: #E8E8ED;
+  --theme-navpanel-hovered: rgba(218, 218, 231, .5);
+  --theme-navpanel-selected: #DADAE7;
+  --theme-navpanel-divider: rgba(0, 0, 0, .06);
+  --theme-navpanel-border: rgba(0, 0, 0, .06);
+  --theme-navpanel-icons-color: #7F7F7F;
+  --theme-comp-header-color: #FBFBFC;
+  --theme-divider-color: rgba(0, 0, 0, .06);
+
+  --theme-trans-color: rgba(0, 0, 0, .3);
+  --theme-darker-color: rgba(0, 0, 0, .4);
+  --theme-halfcontent-color: rgba(0, 0, 0, .5);
+  --theme-dark-color: rgba(0, 0, 0, .6);
+  --theme-content-color: rgba(0, 0, 0, .8);
+  --theme-caption-color: #000;
+
+  --theme-list-border-color: rgba(0, 0, 0, .09);
+  --theme-list-header-color: #ECD4CA;
+  --theme-list-subheader-color: #EEEEF0;
+  --theme-list-row-color: #F7F7F8;
+  --theme-list-button-color: #F2F2F4;
+  --theme-list-divider-color: rgba(0, 0, 0, .07);
+  --theme-list-subheader-divider: rgba(0, 0, 0, .06);
+
+  --theme-table-border-color: rgba(0, 0, 0, .1);
+  --theme-table-header-color: #EFEFF2;
+  --theme-table-row-color: #F4F4F6;
+
+  --theme-kanban-card-bg-color: rgba(0, 0, 0, .03);
+  --theme-kanban-card-border: rgba(0, 0, 0, .04);
+  --theme-kanban-card-footer: rgba(0, 0, 0, .04);
+  
+  --theme-tablist-color: rgba(0, 0, 0, .02);
+  --theme-checkbox-color: #000;
+  --theme-checkbox-bg-color: #FFF;
+  --theme-checkbox-border: rgba(0, 0, 0, .12);
+  --theme-checkbox-disabled: #999;
+  --theme-progress-color: rgba(0, 0, 0, .5);
+
   --body-color: #fff;
   --body-accent: #fafafa; // HZ
   --board-bg-color: #f4f5f8;
@@ -144,7 +267,7 @@
   --accent-bg-color: #eff0f2;  // HZ
   --accent-shadow: rgb(0 0 0 / 10%) 0px 2px 4px;  // Dark
 
-  --highlight-hover: #f9f9f9;
+  --highlight-hover: #F0F0F1;
   --highlight-select: #f0f4ff;
   --highlight-select-border: #e6eaff;
   --highlight-select-hover: #e4ebff;
@@ -189,7 +312,7 @@
   --button-bg-hover: #f4f5f8;
   --button-border-color: #dfe1e4;
   --button-border-hover: #c9cbcd;
-  --button-shadow: rgb(0 0 0 / 7%) 0px 1px 1px;
+  --button-shadow: rgb(0 0 0 / 20%) 0px 1px 2px 1px;
   --button-disabled-color: #eff1f4;
   --noborder-bg-color: #eff1f4;
   --noborder-bg-hover: #f4f5f8;
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index de26879501..18a57c3c7a 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -363,10 +363,11 @@ input.search {
   }
 }
 .buttons-divider {
-  min-width: 1px;
+  flex-shrink: 0;
   width: 1px;
   height: 1.5rem;
-  background-color: var(--divider-color);
+  max-height: 1.5rem;
+  background-color: var(--theme-list-divider-color);
 }
 
 .labels-row {
@@ -467,6 +468,7 @@ input.search {
 .mb-8 { margin-bottom: 2rem; }
 .mb-9 { margin-bottom: 2.25rem; }
 .mb-10 { margin-bottom: 2.5rem; }
+.mx-0-5 { margin: 0 .125rem; }
 .mx-1 { margin: 0 .25rem; }
 .mx-2 { margin: 0 .5rem; }
 .mx-3 { margin: 0 .75rem; }
@@ -475,6 +477,7 @@ input.search {
 .mx-auto { margin: 0 auto; }
 .my-2 { margin: .5rem 0; }
 .my-4 { margin: 1rem 0; }
+.my-5 { margin: 1.25rem 0; }
 
 .m-0-5 { margin: .125rem; }
 .m-1 { margin: .25rem; }
@@ -484,6 +487,7 @@ input.search {
 .pl-3 { padding-left: .75rem; }
 .pl-4 { padding-left: 1rem; }
 .pl-8 { padding-left: 2rem; }
+.pl-10 { padding-left: 2.5rem; }
 .pr-1 { padding-right: .25rem; }
 .pr-2 { padding-right: .5rem; }
 .pr-3 { padding-right: .75rem; }
@@ -504,6 +508,7 @@ input.search {
 .px-2 { padding: 0 .5rem; }
 .px-3 { padding: 0 .75rem; }
 .px-4 { padding: 0 1rem; }
+.px-10 { padding: 0 2.5rem; }
 .py-1 { padding: 0.25rem 0; }
 .py-4 { padding: 1rem 0; }
 .py-8 { padding: 2rem 0; }
@@ -612,6 +617,7 @@ input.search {
 .min-w-min { min-width: min-content; }
 .min-h-0 { min-height: 0; }
 .min-h-2 { min-height: .5rem; }
+.min-h-4 { min-height: 1rem; }
 .min-h-7 { min-height: 1.75rem; }
 .min-h-30 { min-height: 7.5rem; }
 .min-h-60 { min-height: 15rem; }
@@ -623,7 +629,9 @@ input.search {
 .max-w-60 { max-width: 15rem; }
 .max-w-80 { max-width: 20rem; }
 .max-w-240 { max-width: 60rem; }
+.max-h-0 { max-height: 0; }
 .max-h-2 { max-height: .5rem; }
+.max-h-4 { max-height: 1rem; }
 .max-h-30 { max-height: 7.5rem; }
 .max-h-50 { max-height: 12.5rem; }
 .max-h-60 { max-height: 15rem; }
@@ -642,20 +650,20 @@ input.search {
   height: 1em;
 }
 .svg-x-small {
-  width: .857em;
-  height: .857em;
+  width: .75rem;
+  height: .75rem;
 }
 .svg-small {
-  width: 1.143em;
-  height: 1.143em;
+  width: 1rem;
+  height: 1rem;
 }
 .svg-medium {
-  width: 1.429em;
-  height: 1.429em;
+  width: 1.25rem;
+  height: 1.25rem;
 }
 .svg-large {
-  width: 1.715em;
-  height: 1.715em;
+  width: 1.5rem;
+  height: 1.5rem;
 }
 .svg-full {
   width: inherit;
@@ -767,26 +775,26 @@ a.no-line {
 }
 
 .focused-button {
-  background-color: var(--button-bg-color);
+  background-color: var(--theme-button-enabled);
   border: 1px solid transparent;
 
-  & > .icon { color: var(--accent-color); }
+  & > .icon { color: var(--theme-content-color); }
   &.selected {
-    background-color: var(--button-bg-hover);
-    border: 1px solid var(--button-border-hover);
+    background-color: var(--theme-button-pressed);
+    border: 1px solid var(--theme-button-border);
   }
   &:hover {
-    background-color: var(--button-bg-hover);
-    border: 1px solid var(--button-border-hover);
-    & > .icon { color: var(--caption-color); }
+    background-color: var(--theme-button-hovered);
+    border: 1px solid var(--theme-button-border);
+    & > .icon { color: var(--theme-caption-color); }
   }
   &:focus {
-    border: 1px solid var(--primary-button-focused-border);
-    box-shadow: 0 0 0 3px var(--primary-button-outline);
-    & > .icon { color: var(--caption-color); }
+    border: 1px solid var(--theme-button-border);
+    box-shadow: 0 0 0 2px var(--primary-button-focused-border);
+    & > .icon { color: var(--theme-caption-color); }
   }
 
-  &.bordered { border-color: var(--button-border-color); }
+  &.bordered { border-color: var(--theme-button-border); }
 }
 
 .overflow-x-auto { overflow-x: auto; }
@@ -817,6 +825,8 @@ a.no-line {
 .background-primary-color { background-color: var(--primary-button-enabled); }
 .background-content-accent-color { background-color: var(--accent-color); }
 
+.content-trans-color { color: var(--theme-trans-color); }
+
 .dark-color,
 .content-dark-color { color: var(--dark-color); }
 .content-color { color: var(--content-color); }
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index f234aa6c4e..022cf9cacf 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -15,15 +15,16 @@
 
 /* Panels */
 * {
-  --app-panel-width: 4rem;
+  --app-panel-width: 4.25rem;
 }
 .antiPanel-application {
   flex-shrink: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: var(--board-bg-color);
-
+  background-color: var(--theme-navpanel-color);
+  border-right: 1px solid var(--theme-navpanel-divider);
+  
   &.vertical {
     flex-direction: column;
     min-width: var(--app-panel-width);
@@ -43,37 +44,39 @@
   flex-direction: column;
   height: 100%;
   overflow: hidden;
-
-  &.filled { background-color: var(--body-accent); }
-  &.border-left { border-left: 1px solid var(--divider-color); }
-  &.border-right { border-right: 1px solid var(--divider-color); }
+  
+  &.filled { background-color: var(--theme-bg-color); }
+  &.border-left { border-left: 1px solid var(--theme-divider-color); }
+  &.border-right { border-right: 1px solid var(--theme-divider-color); }
 }
 .antiPanel-navigator {
   position: relative;
   min-width: 17.5rem;
   max-width: 17.5rem;
   width: 17.5rem;
+  background-color: var(--theme-navpanel-color);
+  border-right: 1px solid var(--theme-navpanel-border);
 }
 @media (max-width: 1024px) {
   .antiPanel-navigator {
     position: fixed;
-    background-color: var(--body-accent);
+    top: var(--status-bar-height);
+    height: calc(100% - var(--status-bar-height));
+    background-color: var(--theme-navpanel-color);
     filter: drop-shadow(2px 0 1px rgba(0, 0, 0, .2));
     z-index: 450;
 
     &.portrait {
-      top: var(--status-bar-height);
       left: 0;
     }
     &.landscape {
-      top: var(--status-bar-height);
-      left: var(--app-panel-width);  
+      left: var(--app-panel-width);
     }
   }
 }
 .antiPanel-component:not(.aside) {
   flex-grow: 1;
-  // background-color: var(--board-bg-color);
+  background-color: var(--theme-bg-color);
 }
 .antiPanel-component.aside {
   min-width: 30rem;
@@ -169,13 +172,13 @@
   }
 
   &:hover, &.hovered, &.selected {
-    background-color: var(--menu-bg-select);
+    // background-color: var(--theme-navpanel-hovered);
     .an-element__icon,
     .an-element__label { color: var(--caption-color); }
     .an-element__icon-arrow { opacity: 1; }
   }
-  &:hover, &.hovered { background-color: var(--highlight-hover); }
-  &.selected { background-color: var(--menu-bg-select); }
+  &:hover, &.hovered { background-color: var(--theme-navpanel-hovered); }
+  &.selected { background-color: var(--theme-navpanel-selected); }
   &:hover .an-element__tool, &.hovered .an-element__tool { visibility: visible; }
 
   &:not(.collapsed) .an-element__icon-arrow { opacity: 1; }
@@ -220,7 +223,7 @@
   margin: .5rem 0;
   height: 1px;
 
-  &.line { background-color: var(--divider-color); }
+  &.line { background-color: var(--theme-navpanel-divider); }
   &.short { margin: .25rem 1rem; }
 }
 .antiNav-space {
@@ -231,7 +234,7 @@
   flex-shrink: 0;
   width: 100%;
   height: 1px;
-  background-color: var(--divider-color);
+  background-color: var(--theme-navpanel-divider);
 }
 .antiNav-footer-grower {
   flex-shrink: 10;
@@ -297,7 +300,7 @@
   margin: .25rem 0;
   min-height: 1px;
   height: 1px;
-  background-color: var(--divider-color);
+  background-color: var(--theme-divider-color);
 
   &.dark { background-color: var(--body-accent); }
   &.noMargin { margin: 0; }
@@ -351,20 +354,7 @@
       border-radius: .5rem .5rem 0 0;
     }
     &__counter {
-      display: flex;
-      align-items: center;
-      flex-wrap: nowrap;
-      flex-shrink: 0;
-      padding: 0.25rem 0.5rem;
-      min-width: 1.325rem;
-      text-align: center;
-      font-weight: 500;
-      font-size: 1rem;
-      line-height: 1rem;
-      color: var(--accent-color);
-      background-color: var(--body-color);
-      border: 1px solid var(--divider-color);
-      border-radius: 1rem;
+      color: var(--theme-darker-color);
     }  
     &__tag {
       display: flex;
@@ -431,8 +421,8 @@
 // Emphasized
 .antiEmphasized {
   padding: .75rem;
-  background-color: var(--body-accent);
-  border: 1px solid var(--button-border-color);
+  background-color: var(--theme-comp-header-color);
+  border: 1px solid var(--theme-divider-color);
   border-radius: .5rem;
   transition-property: border, background-color;
   transition-duration: .15s;
@@ -440,8 +430,8 @@
 
   &:hover,
   &:focus-within {
-    background-color: var(--body-color);
-    border-color: var(--button-border-hover);
+    // background-color: var(--body-color);
+    border-color: var(--theme-list-divider-color);
   }
 }
 
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index b0b91093e1..70ef4fca8f 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -20,10 +20,15 @@
   height: 100%;
 
   .ac-header {
-    padding: 0.5rem 1.5rem 0.5rem 2.5rem;
+    padding: 0.5rem 2.25rem;
+    background-color: var(--theme-comp-header-color);
     // height: 3.5rem;
     // min-height: 2.5rem;
 
+    &.caption-height {
+      min-height: 3.25rem;
+    }
+    &.search-start { padding-left: 1.75rem; }
     &.short {
       display: flex;
       align-items: center;
@@ -31,21 +36,23 @@
     }
     &.full,
     &-full {
-      display: grid;
-      grid-template-columns: auto;
-      grid-auto-flow: column;
-      grid-auto-columns: max-content;
-      gap: .75rem;
+      display: flex;
+      justify-content: space-between;
       align-items: center;
+      min-width: 0;
+
+      &:not(.small-gap, .medium-gap) > *:not(:last-child) { margin-right: 1.25rem; }
+      &.small-gap > *:not(:last-child) { margin-right: .75rem; }
+      &.medium-gap > *:not(:last-child) { margin-right: 1rem; }
     }
-    &.withSettings { padding-right: .75rem; }
+    // &.withSettings { padding-right: .75rem; }
     &.mini {
       display: flex;
       flex-direction: column;
     }
     &.mirror {
       justify-content: space-between;
-      padding: 0 1rem;
+      // padding: 0 1rem;
 
       &-tool {
         justify-content: space-between;
@@ -53,7 +60,7 @@
       }
     }
     &.divide {
-      border-bottom: 1px solid var(--divider-color);
+      border-bottom: 1px solid var(--theme-divider-color);
     }
     .secondRow {
       align-self: flex-end;
@@ -77,23 +84,30 @@
 
   .ac-header__icon {
     margin-right: 0.5rem;
-    color: var(--content-color);
+    color: var(--theme-content-color);
   }
   .ac-header__title {
+    flex-shrink: 1;
     min-width: 0;
-    font-weight: 500;
     font-size: 1rem;
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
 
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     user-select: none;
   }
+  .ac-header__counter {
+    flex-shrink: 0;
+    margin-left: .25rem;
+    min-width: 0;
+    font-size: 1rem;
+    color: var(--theme-darker-color);
+  }
   .ac-header__description {
     min-width: 0;
     font-size: 0.75rem;
-    color: var(--dark-color);
+    color: var(--theme-dark-color);
 
     overflow: hidden;
     visibility: visible;
@@ -316,14 +330,14 @@
       // height: 1.5rem;
     }
     &__element {
-      fill: var(--accent-bg-color);
-      stroke: var(--divider-color);
+      fill: var(--theme-button-enabled);
+      stroke: var(--theme-button-border);
       stroke-linecap: round;
       stroke-linejoin: round;
 
-      &:hover { fill: var(--button-bg-color); }
+      &:hover { fill: var(--theme-button-hovered); }
     }
-    &__selected { fill: var(--button-bg-hover); }
+    &__selected { fill: var(--theme-button-pressed); }
 
     .asb-label__container {
       position: absolute;
@@ -338,11 +352,11 @@
       height: 100%;
       font-weight: 500;
       font-size: 0.8125rem;
-      color: var(--dark-color);
+      color: var(--theme-dark-color);
       pointer-events: none;
 
       &.selected {
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
       }
     }
   }
@@ -360,18 +374,24 @@
     &:last-child { padding-right: 0; }
   }
   th {
-    height: 2.5rem;
-    font-weight: 500;
-    font-size: .75rem;
-    color: var(--dark-color);
-    box-shadow: inset 0 -1px 0 0 var(--divider-color);
+    height: 3rem;
+    font-weight: 600;
+    font-size: .625rem;
+    letter-spacing: .5px;
+    text-transform: uppercase;
+    color: var(--theme-dark-color);
+    box-shadow: inset 0 -1px 0 0 var(--theme-table-border-color);
     user-select: none;
     // z-index: 5;
 
     &.sortable { cursor: pointer; }
-    &.sorted .icon {
-      margin-left: .25rem;
-      opacity: .6;
+    &.sorted {
+      color: var(--theme-caption-color);
+
+      .icon {
+        margin-left: .25rem;
+        opacity: .6;
+      }
     }
     &:hover .antiTable-cells__checkCell { visibility: visible; }
     .checkall { visibility: visible; }
@@ -379,7 +399,7 @@
 
   &.editable {
     th, td, tr {
-      border: 1px dashed var(--divider-color);
+      border: 1px dashed var(--theme-divider-color);
     }
   }
   
@@ -424,10 +444,12 @@
   }
 
   .antiTable-body__row {
+    position: relative;
     height: 3.25rem;
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
+    background-color: var(--theme-table-row-color);
+    border-bottom: 1px solid var(--theme-divider-color);
 
-    &:not(:last-child) { border-bottom: 1px solid var(--accent-bg-color); }
     &:hover .antiTable-cells__firstCell .antiTable-cells__firstCell-menuRow { visibility: visible; }
     &:hover, &.checking {
       .antiTable-cells__checkCell { visibility: visible; }
@@ -442,14 +464,14 @@
   }
 
   .antiTable-body__border {
-    border: 1px solid var(--divider-color);
+    border: 1px solid var(--theme-divider-color);
   }
 
   &.highlightRows .antiTable-body__row {
     &.selected { background-color: var(--highlight-hover); }
     &.checking {
       background-color: var(--highlight-select);
-      border-bottom-color: var(--highlight-select-border);
+      // border-bottom-color: var(--highlight-select-border);
 
       &:hover { background-color: var(--highlight-select-hover); }
     }
@@ -460,8 +482,8 @@
   position: sticky;
   z-index: 2;
   top: 0;
-  height: 2.5rem;
-  background-color: var(--body-color);
+  height: 3rem;
+  background-color: var(--theme-table-header-color);
 }
 
 .scroller-tfoot {
@@ -469,10 +491,10 @@
   z-index: 2;
   bottom: 0;
   height: 2.5rem;
-  background-color: var(--body-color);
+  background-color: var(--theme-table-header-color);
 
   tr {
-    box-shadow: inset 0 1px 0 0 var(--divider-color);
+    box-shadow: inset 0 1px 0 0 var(--theme-divider-color);
   }
 }
 
@@ -480,9 +502,22 @@
   th, td {
     &:first-child {
       position: sticky;
-      z-index: 1;
+      padding: 0;
       left: 0;
-      background-color: var(--body-color);
+      background-color: var(--theme-bg-color);
+      border-right: 1px solid transparent !important;
+      z-index: 1;
+    }
+    .fullfill {
+      display: flex;
+      align-items: center;
+      padding: .5rem;
+      width: 100%;
+      height: 100%;
+      background-color: var(--theme-bg-color);
+      border-right: 1px solid var(--theme-divider-color);
+
+      &.center { justify-content: center; }
     }
   }
 }
@@ -497,12 +532,12 @@
 // Basic component view.
 .antiComponentBox {
   padding: 0.5rem;
-  background-color: var(--board-card-bg-color);
-  border: 1px solid var(--divider-color);
+  background-color: var(--theme-list-row-color);
+  border: 1px solid var(--theme-list-divider-color);
   border-radius: .75rem;
 
   &.antiComponentBoxFocused {
-    background-color: var(--board-card-bg-hover);
+    background-color: var(--theme-button-hovered);
   }
 }
 
@@ -649,3 +684,46 @@
     &.inter { font-size: 1em; }
   }
 }
+
+/* ListView - global style */
+.list-container .category-container .categoryHeader.subLevel.closed {
+  border-bottom: 1px solid var(--theme-list-border-color);
+  border-radius: 0 0 0.25rem 0.25rem;
+}
+.list-container .category-container .categoryHeader.closed:not(.subLevel) {
+  border-radius: 0 0 .25rem .25rem;
+  
+  &::before {
+    border-bottom-color: var(--theme-list-border-color);
+    border-radius: 0.25rem;
+  }
+}
+.list-container .category-container .listGrid {
+  .fix-margin { margin-left: .875rem; }
+  .name { margin-left: .375rem; }
+
+  .optional-bar {
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-shrink: 1;
+    min-width: 0;
+    
+    .label-wrapper {
+      display: flex;
+      align-items: center;
+      flex-shrink: 10;
+      width: auto;
+      min-width: 0;
+    }
+    & > *:not(:last-child) {
+      flex-shrink: 10;
+      width: min-content;
+    }
+    & > *:last-child {
+      flex-shrink: 0;
+      width: max-content;
+    }
+    & > * { margin-left: .375rem; }
+  }
+}
diff --git a/packages/theme/styles/dialogs.scss b/packages/theme/styles/dialogs.scss
index 025db1f473..17f3c1a415 100644
--- a/packages/theme/styles/dialogs.scss
+++ b/packages/theme/styles/dialogs.scss
@@ -29,7 +29,8 @@
   display: flex;
   flex-direction: column;
   min-height: 0;
-  background: var(--popup-bg-color);
+  background: var(--theme-list-row-color);
+  border: 1px solid var(--theme-divider-color);
   border-radius: .5rem;
   box-shadow: var(--card-shadow);
 
@@ -49,7 +50,7 @@
       min-width: 0;
       font-weight: 500;
       font-size: 1rem;
-      color: var(--accent-color);
+      color: var(--theme-caption-color);
     }
     &__error {
       min-width: 0;
@@ -83,13 +84,13 @@
     display: flex;
     flex-direction: column;
     margin: 0 1rem .75rem;
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
     flex-wrap: wrap;
 
     &__separator {
       margin: 1rem 0;
       height: 1px;
-      background-color: var(--divider-color);
+      background-color: var(--theme-divider-color);
     }
   }
 
@@ -110,7 +111,7 @@
   .antiCard-group {
     padding: .5rem 1rem;
 
-    &:not(:last-child) { border-bottom: 1px solid var(--popup-divider); }
+    &:not(:last-child) { border-bottom: 1px solid var(--theme-divider-color); }
     &.grid {
       display: grid;
       grid-template-columns: 5rem auto;
@@ -124,7 +125,7 @@
         font-weight: 500;
         font-size: .75rem;
         line-height: .75rem;
-        color: var(--content-color);
+        color: var(--theme-content-color);
       }    
       .value {
         display: flex;
@@ -166,8 +167,8 @@
         font-weight: 400;
         font-size: .8125rem;
       }
-      &__divider { color: var(--content-color); }
-      &__title { color: var(--accent-color); }
+      &__divider { color: var(--theme-content-color); }
+      &__title { color: var(--theme-caption-color); }
     }
     .antiCard-content { margin: .5rem 1.125rem 1rem; }
     .antiCard-pool {
@@ -185,7 +186,7 @@
       align-items: center;
       padding: .75rem;
       height: auto;
-      border-top: 1px solid var(--divider-color);
+      border-top: 1px solid var(--theme-divider-color);
 
       &.reverse { flex-direction: row-reverse; }
       &__error {
diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss
index 1c238733fc..4227c011ed 100644
--- a/packages/theme/styles/global.scss
+++ b/packages/theme/styles/global.scss
@@ -115,7 +115,7 @@ body {
   font-weight: 400;
   font-size: var(--body-font-size);
   color: var(--content-color);
-  background-color: var(--body-color);
+  background-color: var(--theme-bg-color);
   user-select: none;
 }
 
diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss
index 336b69b9ce..596af402bd 100644
--- a/packages/theme/styles/panel.scss
+++ b/packages/theme/styles/panel.scss
@@ -68,7 +68,7 @@
 
   &:not(.embedded) {
     border-radius: .5rem;
-    box-shadow: var(--popup-panel-shadow);
+    // box-shadow: var(--popup-panel-shadow);
   }
 
   .popupPanel-title {
@@ -87,9 +87,9 @@
     &__bordered {
       min-width: 0;
       min-height: 3rem;
-      background-color: var(--board-card-bg-color);
+      background-color: var(--theme-comp-header-color);
       &:not(.embedded) {
-        border: 1px solid var(--divider-color);
+        border: 1px solid var(--theme-divider-color);
         border-bottom: none;
         border-radius: .5rem .5rem 0 0;
       }
@@ -116,8 +116,8 @@
     min-height: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--body-color);
-    border: 1px solid var(--divider-color);
+    background-color: var(--theme-bg-color);
+    border: 1px solid var(--theme-divider-color);
     &:not(.embedded) {
       border-radius: 0 0 .5rem .5rem;
     }
@@ -184,8 +184,8 @@
         min-width: 320px;
       }
 
-      &.bottom-divider { border-bottom: 1px solid var(--divider-color); }
-      &.top-divider { border-top: 1px solid var(--divider-color); }
+      &.bottom-divider { border-bottom: 1px solid var(--theme-divider-color); }
+      &.top-divider { border-top: 1px solid var(--theme-divider-color); }
       .header-row {
         display: flex;
         align-items: center;
@@ -214,7 +214,7 @@
         bottom: 1rem;
         left: 0;
         width: 0;
-        border-left: 1px solid var(--divider-color);
+        border-left: 1px solid var(--theme-divider-color);
       }
 
       &.float {
@@ -226,8 +226,8 @@
         min-width: 0;
         max-width: 320px;
         height: 100%;
-        background-color: var(--board-card-bg-color);
-        border-left: 1px solid var(--divider-color);
+        background-color: var(--theme-list-row-color);
+        border-left: 1px solid var(--theme-divider-color);
         border-bottom-right-radius: .45rem;
         box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
         transition: box-shadow 150ms ease 0s, transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss
index c94433d4ee..b221df628b 100644
--- a/packages/theme/styles/popups.scss
+++ b/packages/theme/styles/popups.scss
@@ -422,7 +422,8 @@
   flex-direction: column;
   padding: .5rem;
   min-height: 22rem;
-  background: var(--popup-bg-color);
+  background: var(--theme-list-row-color);
+  border: 1px solid var(--theme-divider-color);
   border-radius: .5rem;
   box-shadow: var(--popup-shadow);
   
diff --git a/packages/ui/src/colors.ts b/packages/ui/src/colors.ts
index d755b85b8b..fe1a07a043 100644
--- a/packages/ui/src/colors.ts
+++ b/packages/ui/src/colors.ts
@@ -106,3 +106,58 @@ export function numberToRGB (color: number, alpha?: number): string {
 
   return `rgba(${r}, ${g}, ${b}, ${alpha === undefined ? '1' : alpha})`
 }
+
+/**
+ * @public
+ */
+export function hsvToRGB (h: number, s: number, v: number): { r: number, g: number, b: number, rgb: string } {
+  let r: number = 0
+  let g: number = 0
+  let b: number = 0
+  const i = Math.floor(h * 6)
+  const f = h * 6 - i
+  const p = v * (1 - s)
+  const q = v * (1 - f * s)
+  const t = v * (1 - (1 - f) * s)
+  switch (i % 6) {
+    case 0:
+      r = v
+      g = t
+      b = p
+      break
+    case 1:
+      r = q
+      g = v
+      b = p
+      break
+    case 2:
+      r = p
+      g = v
+      b = t
+      break
+    case 3:
+      r = p
+      g = q
+      b = v
+      break
+    case 4:
+      r = t
+      g = p
+      b = v
+      break
+    case 5:
+      r = v
+      g = p
+      b = q
+      break
+  }
+  r = Math.round(r * 255)
+  g = Math.round(g * 255)
+  b = Math.round(b * 255)
+  return {
+    r,
+    g,
+    b,
+    rgb: '#' + r.toString(16) + g.toString(16) + b.toString(16)
+  }
+}
diff --git a/packages/ui/src/components/ActionIcon.svelte b/packages/ui/src/components/ActionIcon.svelte
index 5b721c27b3..7b81096557 100644
--- a/packages/ui/src/components/ActionIcon.svelte
+++ b/packages/ui/src/components/ActionIcon.svelte
@@ -15,6 +15,7 @@
 <script lang="ts">
   import type { IntlString, Asset } from '@hcengineering/platform'
   import type { AnySvelteComponent, TooltipAlignment } from '../types'
+  import { ComponentType } from 'svelte'
 
   import Icon from './Icon.svelte'
   import { tooltip } from '../tooltips'
@@ -22,7 +23,7 @@
   export let label: IntlString = '' as IntlString
   export let labelProps: any = undefined
   export let direction: TooltipAlignment | undefined = undefined
-  export let icon: Asset | AnySvelteComponent
+  export let icon: Asset | AnySvelteComponent | ComponentType
   export let iconProps: any | undefined = undefined
   export let size: 'x-small' | 'small' | 'medium' | 'large'
   export let action: (ev: MouseEvent) => Promise<void> | void = async () => {}
diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte
index e6cb2dbb6a..bd9c7fc6cd 100644
--- a/packages/ui/src/components/Button.svelte
+++ b/packages/ui/src/components/Button.svelte
@@ -17,7 +17,7 @@
   import { onMount, ComponentType } from 'svelte'
   import { registerFocus } from '../focus'
   import { tooltip } from '../tooltips'
-  import type { AnySvelteComponent, ButtonKind, ButtonShape, ButtonSize, LabelAndProps } from '../types'
+  import type { AnySvelteComponent, ButtonKind, ButtonShape, ButtonSize, LabelAndProps, IconSize } from '../types'
   import Icon from './Icon.svelte'
   import Label from './Label.svelte'
   import Spinner from './Spinner.svelte'
@@ -29,6 +29,8 @@
   export let shape: ButtonShape = undefined
   export let icon: Asset | AnySvelteComponent | ComponentType | undefined = undefined
   export let iconProps: any | undefined = undefined
+  export let iconRight: Asset | AnySvelteComponent | ComponentType | undefined = undefined
+  export let iconRightProps: any | undefined = undefined
   export let justify: 'left' | 'center' = 'center'
   export let disabled: boolean = false
   export let loading: boolean = false
@@ -45,10 +47,14 @@
   export let id: string | undefined = undefined
   export let input: HTMLButtonElement | undefined = undefined
   export let showTooltip: LabelAndProps | undefined = undefined
+  export let iconSize: IconSize = size === 'inline' ? 'inline' : 'small'
+  export let iconRightSize: IconSize = 'x-small'
+  export let short: boolean = false
 
-  let iconSize: ButtonSize
-  $: iconSize = size === 'inline' ? 'inline' : 'small'
-  $: iconOnly = label === undefined && ($$slots.content === undefined || $$slots.icon !== undefined)
+  // $: iconSize = size === 'inline' ? 'inline' : 'small'
+  $: iconOnly =
+    label === undefined &&
+    ($$slots.content === undefined || $$slots.icon !== undefined || $$slots.iconRight !== undefined)
 
   onMount(() => {
     if (focus && input) {
@@ -95,6 +101,7 @@
   class:selected
   class:notSelected
   disabled={disabled || loading}
+  class:short
   style:width
   style:height
   {title}
@@ -113,7 +120,7 @@
   {/if}
   {#if loading}
     <div class="btn-icon pointer-events-none caption-color spinner" class:resetIconSize>
-      <Spinner size={iconSize} />
+      <Spinner size={iconSize === 'inline' ? 'inline' : 'small'} />
     </div>
   {/if}
   {#if label}
@@ -121,8 +128,14 @@
       <Label {label} params={labelParams} />
     </span>
   {/if}
+  {#if iconRight}
+    <div class="btn-right-icon pointer-events-none" class:resetIconSize>
+      <Icon bind:icon={iconRight} size={iconRightSize} iconProps={iconRightProps} />
+    </div>
+  {/if}
   {#if $$slots.icon}<slot name="icon" />{/if}
   {#if $$slots.content}<slot name="content" />{/if}
+  {#if $$slots.iconRight}<slot name="iconRight" />{/if}
 </button>
 
 <style lang="scss">
@@ -142,9 +155,9 @@
     }
   }
   .medium {
-    height: 1.75rem;
+    height: 2rem;
     &.only-icon {
-      width: 1.75rem;
+      width: 2rem;
     }
   }
   .large {
@@ -168,20 +181,29 @@
     font-weight: 500;
     min-width: 1.375rem;
     white-space: nowrap;
-    color: var(--accent-color);
+    color: var(--theme-caption-color);
     background-color: transparent;
     border: 1px solid transparent;
     transition-property: border, background-color, color, box-shadow;
     transition-duration: 0.15s;
 
     .btn-icon {
-      color: var(--content-color);
+      color: var(--theme-content-color);
+      transition: color 0.15s;
+      pointer-events: none;
+    }
+    .btn-right-icon {
+      margin-left: 0.5rem;
+      color: var(--theme-halfcontent-color);
       transition: color 0.15s;
       pointer-events: none;
     }
     &:not(.only-icon) .btn-icon:not(.spinner) {
       margin-right: 0.5rem;
     }
+    &:not(.only-icon) .btn-right-icon {
+      margin-left: 0.5rem;
+    }
     &.no-border:not(.only-icon) .btn-icon,
     &.link-bordered:not(.only-icon) .btn-icon,
     &.list:not(.only-icon) .btn-icon,
@@ -189,6 +211,9 @@
       margin-right: 0.25rem;
     }
 
+    &.short {
+      max-width: 7rem;
+    }
     &.sh-no-shape {
       border-radius: 0.25rem;
     }
@@ -217,25 +242,22 @@
     }
 
     &.highlight {
-      box-shadow: inset 0 0 1px 1px var(--primary-bg-color);
+      box-shadow: inset 0 0 1px 1px var(--primary-button-enabled);
 
       &:hover {
-        box-shadow: inset 0 0 1px 1px var(--primary-bg-hover);
+        box-shadow: inset 0 0 1px 1px var(--primary-button-hovered);
       }
     }
     &:hover {
-      color: var(--accent-color);
-      transition-duration: 0;
-
       .btn-icon {
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
       }
     }
     &:focus {
-      border-color: var(--primary-edit-border-color) !important;
+      box-shadow: 0 0 0 2px var(--primary-button-focused-border);
     }
     &:disabled {
-      color: rgb(var(--caption-color) / 40%);
+      color: var(--theme-dark-color);
       cursor: not-allowed;
 
       .btn-icon {
@@ -254,58 +276,64 @@
     }
 
     &.secondary {
-      background-color: var(--button-bg-color);
-      border-color: var(--button-border-color);
-      box-shadow: var(--button-shadow);
+      background-color: var(--theme-button-enabled);
+      border-color: var(--theme-button-border);
 
+      &.medium:not(.only-icon) {
+        padding: 0 0.75rem;
+      }
       &:hover {
-        background-color: var(--button-bg-hover);
-        border-color: var(--button-border-hover);
+        background-color: var(--theme-button-hovered);
+      }
+      &:active {
+        background-color: var(--theme-button-pressed);
+      }
+      &:focus {
+        background-color: var(--theme-button-focused);
       }
       &:disabled {
-        background-color: var(--button-disabled-color);
-        border-color: transparent;
+        background-color: var(--theme-button-disabled);
       }
 
       &.selected {
-        background-color: var(--button-bg-hover);
-        border-color: var(--button-border-hover);
-        color: var(--caption-color);
-
+        background-color: var(--theme-button-hovered);
         .btn-icon {
-          color: var(--accent-color);
+          color: var(--theme-caption-color);
         }
       }
     }
     &.no-border {
       font-weight: 400;
-      color: var(--accent-color);
-      background-color: var(--noborder-bg-color);
+      color: var(--theme-content-color);
+      background-color: var(--theme-button-enabled);
       box-shadow: var(--button-shadow);
 
       &:hover {
-        color: var(--caption-color);
-        background-color: var(--noborder-bg-hover);
+        color: var(--theme-caption-color);
+        background-color: var(--theme-button-hovered);
 
         .btn-icon {
-          color: var(--caption-color);
+          color: var(--theme-caption-color);
         }
       }
       &:disabled {
-        color: var(--content-color);
-        background-color: var(--button-disabled-color);
+        color: var(--theme-trans-color);
+        background-color: var(--theme-list-button-color);
         cursor: default;
+        .btn-icon {
+          color: var(--theme-trans-color);
+        }
         &:hover {
-          color: var(--content-color);
+          color: var(--theme-trans-color);
           .btn-icon {
-            color: var(--content-color);
+            color: var(--theme-trans-color);
           }
         }
       }
     }
     &.transparent {
       &:hover {
-        background-color: var(--highlight-hover);
+        background-color: var(--theme-button-hovered);
       }
       &.selected {
         background-color: var(--highlight-select);
@@ -317,72 +345,79 @@
     &.link {
       padding: 0 0.875rem;
       &:hover {
-        color: var(--caption-color);
-        background-color: var(--body-color);
-        border-color: var(--divider-color);
+        color: var(--theme-caption-color);
+        background-color: var(--theme-bg-color);
+        border-color: var(--theme-divider-color);
         .btn-icon {
-          color: var(--content-color);
+          color: var(--theme-content-color);
         }
       }
       &:disabled {
-        color: var(--accent-color);
+        color: var(--theme-dark-color);
         background-color: transparent;
         border-color: transparent;
         cursor: auto;
 
         .btn-icon {
-          color: var(--content-color);
+          color: var(--theme-content-color);
         }
       }
     }
     &.link-bordered {
-      padding: 0 0.375rem;
-      color: var(--accent-color);
-      border-color: var(--divider-color);
+      padding: 0 0.5rem;
+      color: var(--theme-content-color);
+      border-color: var(--theme-divider-color);
       &:hover {
-        color: var(--accent-color);
-        background-color: var(--button-bg-hover);
-        border-color: var(--button-border-hover);
+        color: var(--theme-caption-color);
+        background-color: var(--theme-button-hovered);
+        border-color: var(--theme-list-divider-color);
         .btn-icon {
-          color: var(--accent-color);
+          color: var(--theme-caption-color);
         }
       }
     }
     &.list {
-      padding: 0 0.625em 0 0.5rem;
+      padding: 0 0.625em;
       min-height: 1.75rem;
-      color: var(--content-color);
-      background-color: var(--body-color);
-      border: 1px solid var(--divider-color);
-      border-radius: 3rem;
-      transition-property: border, color, background-color;
-      transition-duration: 0.15s;
+      color: var(--theme-halfcontent-color);
+      background-color: var(--theme-list-button-color);
+      border: 1px solid var(--theme-button-border);
+      border-radius: 1.5rem;
+      // transition-property: border, color, background-color;
+      // transition-duration: 0.15s;
 
+      .btn-icon {
+        color: var(--theme-dark-color);
+      }
       &:hover {
-        color: var(--caption-color);
-        background-color: var(--board-card-bg-color);
-        border-color: var(--button-border-color);
+        color: var(--theme-halfcontent-color);
+        background-color: var(--theme-list-button-color);
+        border-color: var(--theme-button-border);
+      }
+      &:focus {
+        box-shadow: none;
       }
     }
     &.primary {
       padding: 0 0.75rem;
-      color: var(--white-color);
-      background-color: var(--primary-bg-color);
-      border-color: var(--primary-bg-color);
-      box-shadow: var(--primary-shadow);
+      color: var(--primary-button-color);
+      background-color: var(--primary-button-enabled);
+      border-color: var(--primary-button-border);
 
       .btn-icon {
         color: var(--white-color);
       }
       &:hover {
-        background-color: var(--primary-bg-hover);
+        background-color: var(--primary-button-hovered);
+      }
+      &:active {
+        background-color: var(--primary-button-pressed);
       }
       &:focus {
-        border-color: var(--primary-edit-border-color);
+        background-color: var(--primary-button-focused);
       }
       &:disabled {
-        background-color: #5e6ad255;
-        border-color: #5e6ad255;
+        background-color: var(--primary-button-disabled);
       }
     }
 
diff --git a/packages/ui/src/components/CheckBox.svelte b/packages/ui/src/components/CheckBox.svelte
index dcde7d5520..fa50f6227e 100644
--- a/packages/ui/src/components/CheckBox.svelte
+++ b/packages/ui/src/components/CheckBox.svelte
@@ -17,6 +17,7 @@
 
   export let checked: boolean = false
   export let symbol: 'check' | 'minus' = 'check'
+  export let size: 'small' | 'medium' = 'small'
   export let circle: boolean = false
   export let primary: boolean = false
   export let readonly = false
@@ -34,7 +35,7 @@
   }
 </script>
 
-<label class="checkbox" class:circle class:primary class:readonly class:checked>
+<label class="checkbox {size}" class:circle class:primary class:readonly class:checked>
   <input class="chBox" disabled={readonly} type="checkbox" bind:checked on:change={handleValueChanged} />
   <svg class="checkSVG" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
     {#if checked}
@@ -53,27 +54,32 @@
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    width: 0.875rem;
-    height: 0.875rem;
-    border: 1px solid var(--dark-color);
+    background-color: var(--theme-button-hovered);
+    border: 1px solid var(--theme-checkbox-border);
     border-radius: 0.25rem;
 
+    &.small {
+      width: 0.875rem;
+      height: 0.875rem;
+    }
+    &.medium {
+      width: 1rem;
+      height: 1rem;
+    }
     &.circle {
       width: 1rem;
       height: 1rem;
       border-radius: 50%;
     }
     &.checked {
-      background-color: var(--primary-bg-color);
-      border-color: transparent;
+      background-color: var(--theme-checkbox-bg-color);
     }
     &.primary.checked {
-      background-color: var(--primary-bg-color);
+      background-color: var(--primary-button-enabled);
       border-color: transparent;
     }
     &.readonly.checked {
-      background-color: var(--dark-color);
-      border-color: transparent;
+      background-color: var(--theme-checkbox-disabled);
     }
 
     .chBox {
@@ -89,7 +95,7 @@
       &:checked + .checkSVG {
         & .check {
           visibility: visible;
-          fill: var(--white-color);
+          fill: var(--theme-checkbox-color);
           &.primary {
             fill: var(--primary-button-color);
           }
@@ -99,7 +105,7 @@
         cursor: pointer;
       }
       &:disabled + .checkSVG .check {
-        fill: var(--content-color);
+        fill: var(--theme-checkbox-disabled);
       }
     }
     .checkSVG {
@@ -108,7 +114,7 @@
 
       .check {
         visibility: hidden;
-        fill: var(--button-bg-color);
+        fill: var(--theme-checkbox-color);
       }
     }
   }
diff --git a/packages/ui/src/components/EditWithIcon.svelte b/packages/ui/src/components/EditWithIcon.svelte
index 54de3a4df2..11fabb5f62 100644
--- a/packages/ui/src/components/EditWithIcon.svelte
+++ b/packages/ui/src/components/EditWithIcon.svelte
@@ -15,13 +15,13 @@
 <script lang="ts">
   import type { Asset, IntlString } from '@hcengineering/platform'
   import { translate } from '@hcengineering/platform'
-  import { createEventDispatcher } from 'svelte'
+  import { createEventDispatcher, ComponentType } from 'svelte'
   import plugin from '../plugin'
   import type { AnySvelteComponent } from '../types'
   import Icon from './Icon.svelte'
   import IconClose from './icons/Close.svelte'
 
-  export let icon: Asset | AnySvelteComponent
+  export let icon: Asset | AnySvelteComponent | ComponentType
   export let width: string | undefined = undefined
   export let value: string | undefined = undefined
   export let placeholder: IntlString = plugin.string.EditBoxPlaceholder
@@ -65,9 +65,9 @@
   .editbox {
     padding: 0 0.5rem 0 0.5rem;
     min-width: 10rem;
-    color: var(--caption-color);
-    background-color: var(--body-color);
-    border: 1px solid var(--button-border-color);
+    color: var(--theme-caption-color);
+    // background-color: var(--body-color);
+    border: 1px solid transparent;
     border-radius: 0.25rem;
 
     &.small {
@@ -77,9 +77,11 @@
       height: 2rem;
     }
     &:focus-within {
-      border-color: var(--primary-edit-border-color);
+      border-color: var(--theme-button-border);
+      box-shadow: 0 0 0 2px var(--primary-button-focused-border);
+
       .icon {
-        color: var(--menu-icon-hover);
+        color: var(--theme-dark-color);
       }
     }
 
@@ -89,19 +91,19 @@
       border-radius: 0.25rem;
 
       &::placeholder {
-        color: var(--content-color);
+        color: var(--theme-halfcontent-color);
       }
     }
 
     .btn {
-      color: var(--content-color);
+      color: var(--theme-dark-color);
       cursor: pointer;
       &:hover {
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
       }
     }
     .icon {
-      color: var(--content-color);
+      color: var(--theme-dark-color);
     }
   }
 </style>
diff --git a/packages/ui/src/components/MultiProgress.svelte b/packages/ui/src/components/MultiProgress.svelte
index 91c19b9970..99126eb6ba 100644
--- a/packages/ui/src/components/MultiProgress.svelte
+++ b/packages/ui/src/components/MultiProgress.svelte
@@ -71,8 +71,8 @@
     position: relative;
     width: 100%;
     height: 1.5rem;
-    background-color: var(--board-bg-color);
-    border: 1px solid var(--accent-bg-color);
+    background-color: var(--theme-list-row-color);
+    border: 1px solid var(--theme-list-divider-color);
     border-radius: 0.25rem;
 
     .bar {
diff --git a/packages/ui/src/components/PanelInstance.svelte b/packages/ui/src/components/PanelInstance.svelte
index 6c5e18e17a..e0ceefe2cc 100644
--- a/packages/ui/src/components/PanelInstance.svelte
+++ b/packages/ui/src/components/PanelInstance.svelte
@@ -166,7 +166,7 @@
     background-color: transparent;
 
     &.bg {
-      background-color: var(--body-color);
+      background-color: var(--theme-back-color);
     }
     .panel-container {
       padding: 0.5rem;
diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte
index cbd35a1f14..fc412a3655 100644
--- a/packages/ui/src/components/Scroller.svelte
+++ b/packages/ui/src/components/Scroller.svelte
@@ -26,6 +26,7 @@
   export let autoscroll: boolean = false
   export let bottomStart: boolean = false
   export let fade: FadeOptions = defaultSP
+  export let noFade: boolean = false
   export let invertScroll: boolean = false
   export let horizontal: boolean = false
   export let contentDirection: 'vertical' | 'vertical-reverse' | 'horizontal' = 'vertical'
@@ -74,10 +75,13 @@
   let timerH: number
 
   const inter = new Set<Element>()
+  let hasLastCategories: boolean = false
 
   $: fz = $themeOptions.fontSize
   $: shiftTop = fade.multipler?.top ? fade.multipler?.top * fz : 0
   $: shiftBottom = fade.multipler?.bottom ? fade.multipler?.bottom * fz : 0
+  $: shiftLeft = fade.multipler?.left ? fade.multipler?.left * fz : 0
+  $: shiftRight = fade.multipler?.right ? fade.multipler?.right * fz : 0
   $: orientir = contentDirection === 'horizontal' ? 'horizontal' : 'vertical'
 
   const checkBar = (): void => {
@@ -183,7 +187,7 @@
   }
 
   const renderFade = () => {
-    if (divScroll) {
+    if (divScroll && !noFade) {
       const th = shiftTop + (topCrop === 'top' ? 2 * fz - topCropValue : 0)
       const tf =
         topCrop === 'full'
@@ -205,10 +209,12 @@
     if (divHScroll && horizontal) {
       const gradientH = `linear-gradient(
         90deg,
-        rgba(0, 0, 0, 0) 0,
-        rgba(0, 0, 0, 1) ${maskH === 'none' || maskH === 'left' ? '0px' : '2rem'},
-        rgba(0, 0, 0, 1) calc(100% - ${maskH === 'none' || maskH === 'right' ? '0px' : '2rem'}),
-        rgba(0, 0, 0, 0) 100%
+        rgba(0, 0, 0, 1) ${shiftLeft}px,
+        rgba(0, 0, 0, 0) ${shiftLeft}px,
+        rgba(0, 0, 0, 1) ${shiftLeft + (maskH === 'both' || maskH === 'right' ? 2 * fz : 0)}px,
+        rgba(0, 0, 0, 1) calc(100% - ${shiftRight + (maskH === 'both' || maskH === 'left' ? 2 * fz : 0)}px),
+        rgba(0, 0, 0, 0) calc(100% - ${shiftRight}px),
+        rgba(0, 0, 0, 1) calc(100% - ${shiftRight}px)
       )`
       divHScroll.style.webkitMaskImage = gradientH
     }
@@ -252,17 +258,47 @@
 
   const checkIntersection = (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
     const interArr: Element[] = []
+    const catEntries: IntersectionObserverEntry[] = []
+    const lastCatEntries: IntersectionObserverEntry[] = []
+
     entries.forEach((el) => {
-      if (el.isIntersecting) {
+      if (el.isIntersecting && el.target.classList.contains('categoryHeader')) {
         inter.add(el.target)
         interArr.push(el.target)
       } else inter.delete(el.target)
+      if (hasLastCategories) {
+        if (el.isIntersecting && el.target.classList.contains('categoryHeader')) catEntries.push(el)
+        if (el.isIntersecting && el.target.classList.contains('lastCat')) lastCatEntries.push(el)
+      }
     })
+
     if (interArr.length > 0) {
       dispatch('lastScrolledCategory', interArr[interArr.length - 1]?.getAttribute('id'))
+      dispatch('firstScrolledCategory', interArr[0]?.getAttribute('id'))
       const interCats: string[] = interArr.map((it) => it.getAttribute('id') as string)
       dispatch('scrolledCategories', interCats)
     }
+    if (hasLastCategories) {
+      const targets = new Set<Element>()
+      const closed = new Set<Element>()
+      lastCatEntries.forEach((last) => {
+        catEntries.forEach((cat) => {
+          if (last.target !== cat.target) {
+            if (
+              last.boundingClientRect.top < cat.boundingClientRect.top + 8 &&
+              last.boundingClientRect.top >= cat.boundingClientRect.top
+            ) {
+              targets.add(cat.target)
+            }
+            if (cat.target.classList.contains('closed') && !closed.has(cat.target)) closed.add(cat.target)
+          }
+        })
+      })
+      closed.forEach((el) => {
+        if (!targets.has(el)) el.classList.remove('closed')
+      })
+      targets.forEach((el) => el.classList.add('closed'))
+    }
   }
 
   const checkIntersectionFade = () => {
@@ -323,6 +359,11 @@
       const tempEls = divBox.querySelectorAll('.categoryHeader')
       observer = new IntersectionObserver(checkIntersection, { root: null, rootMargin: '0px', threshold: 0.1 })
       tempEls.forEach((el) => observer.observe(el))
+      const tempCats = divBox.querySelectorAll('.lastCat')
+      if (tempCats.length > 0) {
+        hasLastCategories = true
+        tempCats.forEach((el) => observer.observe(el))
+      } else hasLastCategories = false
     }
   })
 
@@ -549,6 +590,7 @@
     height: 100%;
   }
   .scroll {
+    will-change: opacity;
     flex-grow: 1;
     min-width: 0;
     min-height: 0;
diff --git a/packages/ui/src/components/SearchEdit.svelte b/packages/ui/src/components/SearchEdit.svelte
index a5a2c1c37e..a6661722d7 100644
--- a/packages/ui/src/components/SearchEdit.svelte
+++ b/packages/ui/src/components/SearchEdit.svelte
@@ -12,7 +12,6 @@
 
 <EditWithIcon
   icon={IconSearch}
-  size={'small'}
   width={'12rem'}
   placeholder={plugin.string.Search}
   bind:value={_search}
diff --git a/packages/ui/src/components/ShowMore.svelte b/packages/ui/src/components/ShowMore.svelte
index 2ba107f279..276871076d 100644
--- a/packages/ui/src/components/ShowMore.svelte
+++ b/packages/ui/src/components/ShowMore.svelte
@@ -78,9 +78,9 @@
 
     word-wrap: none;
     font-size: 0.75rem;
-    color: var(--caption-color);
-    background: var(--popup-bg-color);
-    border: 0.5px solid var(--popup-divider);
+    color: var(--theme-caption-color);
+    background: var(--theme-list-row-color);
+    border: 0.5px solid var(--theme-list-divider-color);
     box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
     border-radius: 2.5rem;
     // z-index: 1;
@@ -92,7 +92,7 @@
       transform: translateX(-50%);
     }
     &:hover {
-      background: var(--popup-bg-hover);
+      background: var(--theme-list-button-color);
     }
   }
 </style>
diff --git a/packages/ui/src/components/Status.svelte b/packages/ui/src/components/Status.svelte
index 7e985b8c0c..1ee35ab273 100644
--- a/packages/ui/src/components/Status.svelte
+++ b/packages/ui/src/components/Status.svelte
@@ -22,7 +22,7 @@
   .container {
     user-select: none;
     font-size: 14px;
-    color: var(--content-color);
+    color: var(--theme-content-color);
     &.WARNING {
       color: yellow;
     }
diff --git a/packages/ui/src/components/StylishEdit.svelte b/packages/ui/src/components/StylishEdit.svelte
index dfa1529fe0..40a6b80c85 100644
--- a/packages/ui/src/components/StylishEdit.svelte
+++ b/packages/ui/src/components/StylishEdit.svelte
@@ -72,14 +72,14 @@
     padding: 0;
     min-width: 3rem;
     height: 3.25rem;
-    background-color: var(--accent-bg-color);
-    border: 1px solid var(--button-border-color);
+    background-color: var(--theme-button-enabled);
+    border: 1px solid var(--theme-button-border);
     border-radius: 0.75rem;
     caret-color: var(--caret-color);
 
     &:focus-within {
-      background-color: var(--body-accent);
-      border-color: var(--button-border-hover);
+      background-color: var(--theme-button-focused);
+      border-color: var(--theme-list-divider-color);
     }
     input {
       height: 3.25rem;
@@ -98,7 +98,7 @@
       top: 1rem;
       left: 1.25rem;
       font-size: 0.75rem;
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
       opacity: 0.3;
       transition: top 200ms;
       pointer-events: none;
diff --git a/packages/ui/src/components/TabList.svelte b/packages/ui/src/components/TabList.svelte
index 0dde4e98bc..dc94748db2 100644
--- a/packages/ui/src/components/TabList.svelte
+++ b/packages/ui/src/components/TabList.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
   import { tooltip } from '../tooltips'
-  import type { TabItem } from '../types'
+  import type { TabItem, IconSize } from '../types'
   import Icon from './Icon.svelte'
   import Label from './Label.svelte'
 
@@ -23,7 +23,7 @@
   export let multiselect: boolean = false
   export let items: TabItem[]
   export let kind: 'normal' | 'secondary' = 'normal'
-  export let short: boolean = false
+  export let onlyIcons: boolean = false
   export let size: 'small' | 'medium' = 'medium'
 
   const dispatch = createEventDispatcher()
@@ -38,6 +38,9 @@
     return res
   }
   const tabs: HTMLElement[] = []
+
+  let iconSize: IconSize
+  $: iconSize = onlyIcons ? (size === 'small' ? 'small' : 'medium') : size === 'small' ? 'x-small' : 'small'
 </script>
 
 {#if items.length > 0}
@@ -47,9 +50,10 @@
       <div
         bind:this={tabs[i]}
         class="button"
-        class:short
+        class:onlyIcons
         class:selected={getSelected(item.id)}
         data-view={item.tooltip}
+        data-id={`tab-${item.id}`}
         use:tooltip={{ label: item.tooltip ?? undefined, element: tabs[i] ?? undefined }}
         on:click={() => {
           if (multiselect) {
@@ -64,7 +68,7 @@
       >
         {#if item.icon}
           <div class="icon">
-            <Icon icon={item.icon} size={size === 'small' ? 'x-small' : 'small'} fill={item.color ?? 'currentColor'} />
+            <Icon icon={item.icon} size={iconSize} fill={item.color ?? 'currentColor'} />
           </div>
         {:else if item.color}
           <div class="color" style:background-color={item.color} />
@@ -110,10 +114,11 @@
       }
       &::before {
         position: absolute;
-        top: 0.35rem;
+        top: 50%;
         left: -1.5px;
-        height: 0.8rem;
+        height: 70%;
         border-left: 1px solid var(--button-border-color);
+        transform: translateY(-50%);
       }
     }
     .button:not(.selected) + .button:not(.selected)::before {
@@ -123,6 +128,10 @@
     &.small {
       .button {
         padding: 0 0.5rem;
+
+        &.onlyIcons {
+          padding: 0.375rem;
+        }
       }
       &.normal .button {
         height: 1.5rem;
@@ -132,29 +141,30 @@
       }
     }
     &.medium .button {
-      height: 1.75rem;
+      height: 2rem;
       padding: 0.25rem 0.75rem;
-      &.short {
-        padding: 0.5rem;
+
+      &.onlyIcons {
+        padding: 0.375rem;
       }
     }
     &.normal {
-      background-color: var(--accent-bg-color);
-      border-radius: 0.5rem;
+      background-color: var(--theme-tablist-color);
+      border-radius: 0.25rem;
 
       .button {
-        background-color: var(--accent-bg-color);
+        color: var(--theme-trans-color);
         border: 1px solid transparent;
-        border-radius: calc(0.5rem - 1px);
+        border-radius: 0.25rem;
 
-        &:hover {
-          background-color: var(--button-bg-hover);
-        }
         &.selected {
-          color: var(--caption-color);
-          background-color: var(--button-bg-color);
-          border-color: var(--button-border-color);
-          box-shadow: var(--accent-shadow);
+          color: var(--theme-caption-color);
+          background-color: var(--theme-button-enabled);
+          border-color: var(--theme-button-border);
+
+          &:hover {
+            background-color: var(--theme-button-hovered);
+          }
         }
       }
     }
diff --git a/packages/ui/src/components/calendar/DateRangePresenter.svelte b/packages/ui/src/components/calendar/DateRangePresenter.svelte
index 35af473aff..9b62fc6b6e 100644
--- a/packages/ui/src/components/calendar/DateRangePresenter.svelte
+++ b/packages/ui/src/components/calendar/DateRangePresenter.svelte
@@ -474,7 +474,7 @@
       pointer-events: none;
 
       &.normal {
-        color: var(--content-color);
+        color: var(--theme-content-color);
       }
       &.warning {
         color: var(--warning-color);
@@ -486,27 +486,31 @@
 
     &.no-border {
       font-weight: 400;
-      color: var(--accent-color);
-      background-color: var(--noborder-bg-color);
+      color: var(--theme-content-color);
+      background-color: var(--theme-button-enabled);
       box-shadow: var(--button-shadow);
 
       &:hover {
-        color: var(--caption-color);
-        background-color: var(--noborder-bg-hover);
+        color: var(--theme-caption-color);
+        background-color: var(--theme-button-hovered);
         transition-duration: 0;
 
         .btn-icon {
-          color: var(--caption-color);
+          color: var(--theme-caption-color);
         }
       }
       &:disabled {
-        color: var(--content-color);
-        background-color: var(--button-disabled-color);
+        color: var(--theme-trans-color);
+        background-color: var(--theme-button-disabled);
         cursor: default;
+
+        .btn-icon {
+          color: var(--theme-trans-color);
+        }
         &:hover {
-          color: var(--content-color);
+          color: var(--theme-trans-color);
           .btn-icon {
-            color: var(--content-color);
+            color: var(--theme-trans-color);
           }
         }
       }
@@ -515,7 +519,7 @@
         cursor: pointer;
 
         &:hover {
-          background-color: var(--noborder-bg-hover);
+          background-color: var(--theme-button-hovered);
           .btn-icon {
             &.normal {
               color: var(--caption-color);
@@ -528,14 +532,14 @@
             }
           }
           .time-divider {
-            background-color: var(--button-border-hover);
+            background-color: var(--theme-divider-color);
           }
         }
         &:focus-within {
-          background-color: var(--button-bg-color);
+          background-color: var(--theme-button-focused);
           border-color: var(--primary-edit-border-color);
           &:hover {
-            background-color: var(--button-bg-color);
+            background-color: var(--theme-button-hovered);
           }
         }
       }
@@ -554,12 +558,12 @@
       padding: 0 0.875rem;
       width: 100%;
       height: 2.25rem;
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
       &:hover {
-        background-color: var(--body-color);
-        border-color: var(--divider-color);
+        background-color: var(--theme-bg-color);
+        border-color: var(--theme-divider-color);
         .btn-icon {
-          color: var(--content-color);
+          color: var(--theme-content-color);
         }
       }
       &.edit {
@@ -574,15 +578,15 @@
       margin: 0 0.25rem;
       width: 0.75rem;
       height: 0.75rem;
-      color: var(--content-color);
-      background-color: var(--button-bg-color);
+      color: var(--theme-content-color);
+      background-color: var(--theme-button-enabled);
       outline: none;
       border-radius: 50%;
       cursor: pointer;
 
       &:hover {
         color: var(--accent-color);
-        background-color: var(--button-bg-hover);
+        background-color: var(--theme-button-hovered);
       }
     }
 
@@ -614,7 +618,7 @@
       width: 1px;
       min-width: 1px;
       height: 0.75rem;
-      background-color: var(--button-border-color);
+      background-color: var(--theme-divider-color);
     }
     .separator {
       margin: 0 0.1rem;
diff --git a/packages/ui/src/components/calendar/MonthCalendar.svelte b/packages/ui/src/components/calendar/MonthCalendar.svelte
index e219356c82..c06fbe9d81 100644
--- a/packages/ui/src/components/calendar/MonthCalendar.svelte
+++ b/packages/ui/src/components/calendar/MonthCalendar.svelte
@@ -87,9 +87,6 @@
     grid-auto-columns: max-content;
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
-  .weekend {
-    background-color: var(--button-bg-color);
-  }
   .cell {
     height: calc(100% - 5px);
     width: calc(100% - 5px);
@@ -98,10 +95,16 @@
     cursor: pointer;
   }
   .cell:hover {
-    background-color: var(--toggle-bg-hover);
     color: var(--primary-button-color);
+    background-color: var(--highlight-hover);
+  }
+  .weekend {
+    background-color: var(--highlight-select);
+    &:hover {
+      background-color: var(--highlight-select-hover);
+    }
   }
   .wrongMonth {
-    color: var(--grayscale-grey-03);
+    color: var(--theme-trans-color);
   }
 </style>
diff --git a/packages/ui/src/components/calendar/WeekCalendar.svelte b/packages/ui/src/components/calendar/WeekCalendar.svelte
index 6e35b9dd79..ceebfc699c 100644
--- a/packages/ui/src/components/calendar/WeekCalendar.svelte
+++ b/packages/ui/src/components/calendar/WeekCalendar.svelte
@@ -43,6 +43,7 @@
       {#each [...Array(displayedDaysCount).keys()] as dayOfWeek}
         {@const day = getDay(weekMonday, dayOfWeek)}
         <th>
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
           <div
             class="antiTable-cells cursor-pointer uppercase flex-col-center"
             class:today={areDatesEqual(todayDate, day)}
@@ -88,7 +89,7 @@
     width: 5rem;
   }
   .today {
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
   }
   .calendar-td {
     padding: 0;
@@ -99,7 +100,7 @@
     width: calc(calc(100% - 50px) / 7);
   }
   .cell:hover:not(.wrongMonth) {
-    background-color: var(--toggle-bg-hover);
     color: var(--primary-button-color);
+    background-color: var(--highlight-hover);
   }
 </style>
diff --git a/packages/ui/src/components/calendar/YearCalendar.svelte b/packages/ui/src/components/calendar/YearCalendar.svelte
index cf2f4e7606..074bd0bdcd 100644
--- a/packages/ui/src/components/calendar/YearCalendar.svelte
+++ b/packages/ui/src/components/calendar/YearCalendar.svelte
@@ -37,8 +37,8 @@
 
 <div class="year-erp-calendar">
   {#each [...Array(12).keys()] as m}
-    <div class="antiComponentBox flex-grow flex-wrap" style={`min-width: ${minWidth};`}>
-      {getMonthName(month(currentDate, m))}
+    <div class="antiComponentBox flex-col flex-grow flex-wrap" style={`min-width: ${minWidth};`}>
+      <span class="month-caption">{getMonthName(month(currentDate, m))}</span>
       <MonthCalendar
         {cellHeight}
         weekFormat="narrow"
@@ -63,4 +63,11 @@
     column-gap: 1rem;
     border-collapse: collapse;
   }
+  .month-caption {
+    margin: 0.5rem 0.75rem 0.75rem;
+    font-weight: 500;
+    font-size: 0.8125rem;
+    text-transform: uppercase;
+    color: var(--theme-dark-color);
+  }
 </style>
diff --git a/packages/ui/src/components/icons/CollapseArrow.svelte b/packages/ui/src/components/icons/CollapseArrow.svelte
new file mode 100644
index 0000000000..4ec4f10386
--- /dev/null
+++ b/packages/ui/src/components/icons/CollapseArrow.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.6572 8.00049L6.82861 4.17187L6.82861 11.8291L10.6572 8.00049Z" />
+</svg>
diff --git a/packages/ui/src/components/internal/FontSizeSelector.svelte b/packages/ui/src/components/internal/FontSizeSelector.svelte
index cea8dfb99e..fdb8dc3aed 100644
--- a/packages/ui/src/components/internal/FontSizeSelector.svelte
+++ b/packages/ui/src/components/internal/FontSizeSelector.svelte
@@ -16,6 +16,7 @@
   import { getContext } from 'svelte'
   import FontSize from './icons/FontSize.svelte'
   import { popupstore } from '../../popups'
+  import { deviceOptionsStore as deviceInfo } from '../..'
 
   const { currentFontSize, setFontSize } = getContext('fontsize') as {
     currentFontSize: string
@@ -31,6 +32,7 @@
     setFontSize(fontsizes[current % fontsizes.length])
     $popupstore = $popupstore
   }
+  $: $deviceInfo.fontSize = fontsizes[current % fontsizes.length] === 'normal-font' ? 16 : 14
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
diff --git a/packages/ui/src/components/internal/Root.svelte b/packages/ui/src/components/internal/Root.svelte
index 1c288fdaf9..743715a1f9 100644
--- a/packages/ui/src/components/internal/Root.svelte
+++ b/packages/ui/src/components/internal/Root.svelte
@@ -175,7 +175,7 @@
       // min-width: 600px;
       font-size: 12px;
       line-height: 150%;
-      background-color: var(--divider-color);
+      background-color: var(--theme-statusbar-color);
 
       .status-info {
         flex-grow: 1;
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 2be146e2bb..1f417b88c6 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -151,6 +151,7 @@ export { default as IconMaxWidth } from './components/icons/MaxWidth.svelte'
 export { default as IconMixin } from './components/icons/Mixin.svelte'
 export { default as IconCircles } from './components/icons/Circles.svelte'
 export { default as IconLike } from './components/icons/Like.svelte'
+export { default as IconCollapseArrow } from './components/icons/CollapseArrow.svelte'
 
 export { default as PanelInstance } from './components/PanelInstance.svelte'
 export { default as Panel } from './components/Panel.svelte'
@@ -206,6 +207,7 @@ export const deviceOptionsStore = writable<DeviceOptions>({
   docHeight: 0,
   isPortrait: false,
   isMobile: false,
+  fontSize: 0,
   minWidth: false,
   twoRows: false
 })
diff --git a/packages/ui/src/popups.ts b/packages/ui/src/popups.ts
index 7433b58c96..68251b1ea2 100644
--- a/packages/ui/src/popups.ts
+++ b/packages/ui/src/popups.ts
@@ -307,7 +307,7 @@ export function fitPopupElement (
       newProps.top = `${rect.top}px`
       // newProps.bottom = `${Math.min(document.body.clientHeight - rect.bottom + 1, window.innerHeight - rect.top - 1)}px`
       newProps.height = `${Math.min(rect.height, window.innerHeight - rect.top)}px`
-      newProps.left = `${rect.left + 1}px`
+      newProps.left = `${rect.left}px`
       // newProps.right = `${Math.min(document.body.clientWidth - rect.right, window.innerWidth - rect.left - 5)}px`
       newProps.width = `${Math.min(rect.width, window.innerWidth - rect.left)}px`
     } else if (element === 'middle') {
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index 633c070479..0eaa351d73 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -167,7 +167,7 @@ export type TooltipAlignment = 'top' | 'bottom' | 'left' | 'right'
 export type VerticalAlignment = 'top' | 'bottom'
 export type HorizontalAlignment = 'left' | 'right'
 
-export type IconSize = 'inline' | 'tiny' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'full'
+export type IconSize = 'inline' | 'tiny' | 'x-small' | 'smaller' | 'small' | 'medium' | 'large' | 'x-large' | 'full'
 
 export interface DateOrShift {
   date?: number
@@ -233,10 +233,10 @@ export interface FadeOptions {
   multipler?: Sides<number>
 }
 export const defaultSP: FadeOptions = { multipler: { top: 0, bottom: 0 } }
-export const tableSP: FadeOptions = { multipler: { top: 2.5, bottom: 2.5 } }
+export const tableSP: FadeOptions = { multipler: { top: 3, bottom: 2.5 } }
 export const topSP: FadeOptions = { multipler: { top: 2.5, bottom: 0 } }
 export const tableHRscheduleY: FadeOptions = { multipler: { top: 5, bottom: 0 } }
-export const issueSP: FadeOptions = { multipler: { top: 3, bottom: 0 } }
+export const issueSP: FadeOptions = { multipler: { top: 2.75, bottom: 0 } }
 export const emojiSP: FadeOptions = { multipler: { top: 1.5, bottom: 0 } }
 
 export interface DeviceOptions {
@@ -244,6 +244,7 @@ export interface DeviceOptions {
   docHeight: number
   isPortrait: boolean
   isMobile: boolean
+  fontSize: number
   minWidth: boolean
   twoRows: boolean
   theme?: any
diff --git a/plugins/attachment-resources/src/components/AttachmentRefInput.svelte b/plugins/attachment-resources/src/components/AttachmentRefInput.svelte
index 162413e158..6e5f8b9116 100644
--- a/plugins/attachment-resources/src/components/AttachmentRefInput.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentRefInput.svelte
@@ -300,17 +300,17 @@
 <style lang="scss">
   .list {
     padding: 0.5rem;
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
     overflow-x: auto;
     overflow-y: hidden;
-    background-color: var(--accent-bg-color);
-    border: 1px solid var(--divider-color);
+    background-color: var(--theme-refinput-color);
+    border: 1px solid var(--theme-divider-color);
     border-radius: 0.5rem 0.5rem 0 0;
     border-bottom: none;
 
     .item + .item {
       padding-left: 1rem;
-      border-left: 1px solid var(--divider-color);
+      border-left: 1px solid var(--theme-divider-color);
     }
   }
 </style>
diff --git a/plugins/attachment-resources/src/components/FileBrowser.svelte b/plugins/attachment-resources/src/components/FileBrowser.svelte
index 9a76865f3b..3bb64b6b14 100644
--- a/plugins/attachment-resources/src/components/FileBrowser.svelte
+++ b/plugins/attachment-resources/src/components/FileBrowser.svelte
@@ -17,7 +17,7 @@
   import contact, { Employee, EmployeeAccount } from '@hcengineering/contact'
   import core, { Class, getCurrentAccount, Ref, Space } from '@hcengineering/core'
   import { getClient } from '@hcengineering/presentation'
-  import ui, { EditWithIcon, IconSearch, Label, Loading, location, navigate, TabList } from '@hcengineering/ui'
+  import { ActionIcon, IconMoreH, Label, Loading, location, navigate, TabList, SearchEdit } from '@hcengineering/ui'
   import view from '@hcengineering/view'
   import { get } from 'svelte/store'
   import { dateFileBrowserFilters, FileBrowserSortMode, fileTypeFileBrowserFilters, sortModeToOptionObject } from '..'
@@ -101,14 +101,30 @@
 </script>
 
 {#if withHeader}
-  <div class="ac-header full divide">
+  <div class="ac-header full divide caption-height">
     <div class="ac-header__wrap-title">
       <span class="ac-header__title"><Label label={attachment.string.FileBrowser} /></span>
     </div>
-    <EditWithIcon icon={IconSearch} size={'small'} bind:value={search} placeholder={ui.string.SearchDots} />
+    <div class="mb-1 clear-mins">
+      <TabList
+        items={[
+          { id: 'table', icon: view.icon.Table, tooltip: attachment.string.FileBrowserListView },
+          { id: 'card', icon: view.icon.Card, tooltip: attachment.string.FileBrowserGridView }
+        ]}
+        selected={isListDisplayMode ? 'table' : 'card'}
+        on:select={(result) => {
+          if (result.detail !== undefined) isListDisplayMode = result.detail === 'table' ?? false
+        }}
+      />
+    </div>
   </div>
 {/if}
-<div class="ac-header full">
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <SearchEdit bind:value={search} on:change={() => {}} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
+    <div class="buttons-divider" />
+  </div>
   <FileBrowserFilters
     {requestedSpaceClasses}
     {spaceId}
@@ -117,18 +133,6 @@
     bind:selectedDateId
     bind:selectedFileTypeId
   />
-  <TabList
-    items={[
-      { id: 'table', icon: view.icon.Table, tooltip: attachment.string.FileBrowserListView },
-      { id: 'card', icon: view.icon.Card, tooltip: attachment.string.FileBrowserGridView }
-    ]}
-    kind={'secondary'}
-    size={'small'}
-    selected={isListDisplayMode ? 'table' : 'card'}
-    on:select={(result) => {
-      if (result.detail !== undefined) isListDisplayMode = result.detail === 'table' ?? false
-    }}
-  />
 </div>
 <div class="group">
   <div class="groupHeader">
diff --git a/plugins/attachment-resources/src/components/FileBrowserFilters.svelte b/plugins/attachment-resources/src/components/FileBrowserFilters.svelte
index d06784b425..21fd4228ca 100644
--- a/plugins/attachment-resources/src/components/FileBrowserFilters.svelte
+++ b/plugins/attachment-resources/src/components/FileBrowserFilters.svelte
@@ -29,54 +29,48 @@
   export let selectedFileTypeId: string
 </script>
 
-<div class="filterBlockContainer">
-  <div class="simpleFilterButton">
-    <Component
-      is={contact.component.UserBoxList}
-      props={{
-        items: selectedParticipants,
-        label: attachment.string.FileBrowserFilterFrom
-      }}
-      on:update={(evt) => {
-        selectedParticipants = evt.detail
-      }}
-    />
-  </div>
-  <div class="simpleFilterButton">
-    <SpaceMultiBoxList
-      _classes={requestedSpaceClasses}
-      label={attachment.string.FileBrowserFilterIn}
-      selectedItems={spaceId ? [spaceId] : []}
-      on:update={(evt) => {
-        selectedSpaces = evt.detail
-      }}
-    />
-  </div>
-  <div class="simpleFilterButton">
-    <DropdownLabelsIntl
-      items={dateFileBrowserFilters}
-      label={attachment.string.FileBrowserFilterDate}
-      bind:selected={selectedDateId}
-    />
-  </div>
-  <div class="simpleFilterButton">
-    <DropdownLabelsIntl
-      items={fileTypeFileBrowserFilters}
-      label={attachment.string.FileBrowserFilterFileType}
-      bind:selected={selectedFileTypeId}
-    />
-  </div>
+<div class="filterBlockContainer clear-mins gap-2">
+  <Component
+    is={contact.component.UserBoxList}
+    props={{
+      items: selectedParticipants,
+      label: attachment.string.FileBrowserFilterFrom,
+      kind: 'transparent',
+      size: 'medium'
+    }}
+    on:update={(evt) => {
+      selectedParticipants = evt.detail
+    }}
+  />
+  <SpaceMultiBoxList
+    _classes={requestedSpaceClasses}
+    label={attachment.string.FileBrowserFilterIn}
+    selectedItems={spaceId ? [spaceId] : []}
+    kind={'transparent'}
+    size={'medium'}
+    on:update={(evt) => {
+      selectedSpaces = evt.detail
+    }}
+  />
+  <DropdownLabelsIntl
+    items={dateFileBrowserFilters}
+    label={attachment.string.FileBrowserFilterDate}
+    bind:selected={selectedDateId}
+    kind={'transparent'}
+    size={'medium'}
+  />
+  <DropdownLabelsIntl
+    items={fileTypeFileBrowserFilters}
+    label={attachment.string.FileBrowserFilterFileType}
+    bind:selected={selectedFileTypeId}
+    kind={'transparent'}
+    size={'medium'}
+  />
 </div>
 
 <style lang="scss">
   .filterBlockContainer {
     display: flex;
     flex-flow: row wrap;
-    margin-top: 10px;
-    margin-bottom: 10px;
-  }
-  .simpleFilterButton {
-    max-width: 12rem;
-    margin: 0.125rem 0.5rem 0.125rem 0;
   }
 </style>
diff --git a/plugins/calendar-resources/src/components/CalendarView.svelte b/plugins/calendar-resources/src/components/CalendarView.svelte
index 13e22bf298..2ce37e8b3a 100644
--- a/plugins/calendar-resources/src/components/CalendarView.svelte
+++ b/plugins/calendar-resources/src/components/CalendarView.svelte
@@ -26,7 +26,8 @@
     Scroller,
     showPopup,
     WeekCalendar,
-    YearCalendar
+    YearCalendar,
+    defaultSP
   } from '@hcengineering/ui'
   import { BuildModelKey } from '@hcengineering/view'
   import { CalendarMode } from '../index'
@@ -166,173 +167,166 @@
   let indexes = new Map<Ref<Event>, number>()
 </script>
 
-<div class="fs-title ml-10 mb-2 flex-row-center">
+<div class="text-lg fs-bold px-10 my-4 flex-no-shrink clear-mins">
   {label(currentDate, mode)}
 </div>
-
-<div class="flex gap-2 mb-4 ml-10">
-  <Button
-    size={'small'}
-    label={calendar.string.ModeDay}
-    on:click={() => {
-      mode = CalendarMode.Day
-    }}
-  />
-  <Button
-    size={'small'}
-    label={calendar.string.ModeWeek}
-    on:click={() => {
-      mode = CalendarMode.Week
-    }}
-  />
-  <Button
-    size={'small'}
-    label={calendar.string.ModeMonth}
-    on:click={() => {
-      mode = CalendarMode.Month
-    }}
-  />
-  <Button
-    size={'small'}
-    label={calendar.string.ModeYear}
-    on:click={() => {
-      mode = CalendarMode.Year
-    }}
-  />
-  <div class="flex ml-4 gap-2">
+<div class="flex-between mb-4 px-10 flex-no-shrink clear-mins">
+  <div class="flex-row-center gap-2">
     <Button
       icon={IconBack}
-      size={'small'}
+      kind={'transparent'}
       on:click={() => {
         inc(-1)
       }}
     />
     <Button
-      size={'small'}
       label={calendar.string.Today}
+      kind={'transparent'}
       on:click={() => {
         inc(0)
       }}
     />
     <Button
       icon={IconForward}
-      size={'small'}
+      kind={'transparent'}
       on:click={() => {
         inc(1)
       }}
     />
   </div>
+  <div class="flex-row-center gap-2 clear-mins">
+    <Button
+      label={calendar.string.ModeDay}
+      on:click={() => {
+        mode = CalendarMode.Day
+      }}
+    />
+    <Button
+      label={calendar.string.ModeWeek}
+      on:click={() => {
+        mode = CalendarMode.Week
+      }}
+    />
+    <Button
+      label={calendar.string.ModeMonth}
+      on:click={() => {
+        mode = CalendarMode.Month
+      }}
+    />
+    <Button
+      label={calendar.string.ModeYear}
+      on:click={() => {
+        mode = CalendarMode.Year
+      }}
+    />
+  </div>
 </div>
 
-<div class="ml-10 mr-6 h-full clear-mins">
+<Scroller
+  padding={'0 2.25rem'}
+  fade={mode === CalendarMode.Week || mode === CalendarMode.Day ? { multipler: { top: 3, bottom: 0 } } : defaultSP}
+>
   {#if mode === CalendarMode.Year}
-    <Scroller>
-      <YearCalendar
-        {mondayStart}
-        cellHeight={'2.5rem'}
-        bind:selectedDate
-        bind:currentDate
-        on:change={(e) => {
-          currentDate = e.detail
-          if (areDatesEqual(selectedDate, currentDate)) {
-            mode = CalendarMode.Month
-          }
-          selectedDate = e.detail
-        }}
-      >
-        <svelte:fragment slot="cell" let:date let:today let:selected let:wrongMonth>
-          <Day
-            events={findEvents(objects, date)}
-            {date}
-            {_class}
-            {baseMenuClass}
-            {options}
-            {config}
-            {today}
-            {selected}
-            {wrongMonth}
-            {query}
-          />
-        </svelte:fragment>
-      </YearCalendar>
-    </Scroller>
+    <YearCalendar
+      {mondayStart}
+      cellHeight={'2.5rem'}
+      bind:selectedDate
+      bind:currentDate
+      on:change={(e) => {
+        currentDate = e.detail
+        if (areDatesEqual(selectedDate, currentDate)) {
+          mode = CalendarMode.Month
+        }
+        selectedDate = e.detail
+      }}
+    >
+      <svelte:fragment slot="cell" let:date let:today let:selected let:wrongMonth>
+        <Day
+          events={findEvents(objects, date)}
+          {date}
+          {_class}
+          {baseMenuClass}
+          {options}
+          {config}
+          {today}
+          {selected}
+          {wrongMonth}
+          {query}
+        />
+      </svelte:fragment>
+    </YearCalendar>
   {:else if mode === CalendarMode.Month}
-    <div class="flex flex-grow">
-      <MonthCalendar {mondayStart} cellHeight={'8.5rem'} bind:selectedDate bind:currentDate>
-        <svelte:fragment slot="cell" let:date let:today let:selected let:wrongMonth>
-          <Day
-            events={findEvents(objects, date)}
-            {date}
-            size={'huge'}
-            {_class}
-            {baseMenuClass}
-            {options}
-            {config}
-            {today}
-            {selected}
-            {wrongMonth}
-            {query}
-            on:select={(e) => {
-              currentDate = e.detail
-              if (areDatesEqual(selectedDate, currentDate)) {
-                mode = CalendarMode.Day
-              }
-              selectedDate = e.detail
-            }}
-            on:create={(e) => {
-              showCreateDialog(e.detail, false)
-            }}
-          />
-        </svelte:fragment>
-      </MonthCalendar>
-    </div>
+    <MonthCalendar {mondayStart} cellHeight={'8.5rem'} bind:selectedDate bind:currentDate>
+      <svelte:fragment slot="cell" let:date let:today let:selected let:wrongMonth>
+        <Day
+          events={findEvents(objects, date)}
+          {date}
+          size={'huge'}
+          {_class}
+          {baseMenuClass}
+          {options}
+          {config}
+          {today}
+          {selected}
+          {wrongMonth}
+          {query}
+          on:select={(e) => {
+            currentDate = e.detail
+            if (areDatesEqual(selectedDate, currentDate)) {
+              mode = CalendarMode.Day
+            }
+            selectedDate = e.detail
+          }}
+          on:create={(e) => {
+            showCreateDialog(e.detail, false)
+          }}
+        />
+      </svelte:fragment>
+    </MonthCalendar>
   {:else if mode === CalendarMode.Week}
-    <Scroller>
-      <WeekCalendar
-        {mondayStart}
-        cellHeight={'4.5rem'}
-        bind:selectedDate
-        bind:currentDate
-        on:select={(e) => {
-          currentDate = e.detail
-          selectedDate = e.detail
-          mode = CalendarMode.Day
-        }}
-      >
-        <svelte:fragment slot="cell" let:date>
-          <Hour
-            events={findEvents(objects, date, true)}
-            {date}
-            bind:indexes
-            on:create={(e) => {
-              showCreateDialog(e.detail, true)
-            }}
-          />
-        </svelte:fragment>
-      </WeekCalendar>
-    </Scroller>
+    <WeekCalendar
+      {mondayStart}
+      cellHeight={'4.5rem'}
+      bind:selectedDate
+      bind:currentDate
+      on:select={(e) => {
+        currentDate = e.detail
+        selectedDate = e.detail
+        mode = CalendarMode.Day
+      }}
+    >
+      <svelte:fragment slot="cell" let:date>
+        <Hour
+          events={findEvents(objects, date, true)}
+          {date}
+          bind:indexes
+          on:create={(e) => {
+            showCreateDialog(e.detail, true)
+          }}
+        />
+      </svelte:fragment>
+    </WeekCalendar>
   {:else if mode === CalendarMode.Day}
-    <Scroller>
-      <WeekCalendar
-        {mondayStart}
-        displayedDaysCount={1}
-        startFromWeekStart={false}
-        cellHeight={'4.5rem'}
-        bind:selectedDate
-        bind:currentDate
-      >
-        <svelte:fragment slot="cell" let:date>
-          <Hour
-            events={findEvents(objects, date, true)}
-            {date}
-            bind:indexes
-            wide
-            on:create={(e) => {
-              showCreateDialog(e.detail, true)
-            }}
-          />
-        </svelte:fragment>
-      </WeekCalendar>
-    </Scroller>
+    <WeekCalendar
+      {mondayStart}
+      displayedDaysCount={1}
+      startFromWeekStart={false}
+      cellHeight={'4.5rem'}
+      bind:selectedDate
+      bind:currentDate
+    >
+      <svelte:fragment slot="cell" let:date>
+        <Hour
+          events={findEvents(objects, date, true)}
+          {date}
+          bind:indexes
+          wide
+          on:create={(e) => {
+            showCreateDialog(e.detail, true)
+          }}
+        />
+      </svelte:fragment>
+    </WeekCalendar>
   {/if}
-</div>
+</Scroller>
+<div class="min-h-4 max-h-4 h-4 flex-no-shrink" />
diff --git a/plugins/calendar-resources/src/components/Events.svelte b/plugins/calendar-resources/src/components/Events.svelte
index 4931adeb17..43e647dca6 100644
--- a/plugins/calendar-resources/src/components/Events.svelte
+++ b/plugins/calendar-resources/src/components/Events.svelte
@@ -21,13 +21,14 @@
     AnyComponent,
     Button,
     Component,
-    Icon,
-    IconAdd,
+    ActionIcon,
     Label,
     Loading,
     SearchEdit,
     showPopup,
-    TabList
+    TabList,
+    IconMoreH,
+    IconAdd
   } from '@hcengineering/ui'
   import view, { Viewlet, ViewletPreference } from '@hcengineering/view'
   import {
@@ -38,7 +39,7 @@
     viewOptionStore
   } from '@hcengineering/view-resources'
   import calendar from '../plugin'
-  import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
+  // import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
 
   export let _class: Ref<Class<Event>> = calendar.class.Event
   export let space: Ref<Space> | undefined = undefined
@@ -107,45 +108,42 @@
     }
   })
 
-  $: twoRows = $deviceInfo.twoRows
+  // $: twoRows = $deviceInfo.twoRows
 
   $: viewOptions = getViewOptions(selectedViewlet, $viewOptionStore)
 </script>
 
-<div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
-  <div class:ac-header-full={!twoRows} class:flex-between={twoRows}>
-    <div class="ac-header__wrap-title mr-3">
-      <div class="ac-header__icon"><Icon icon={viewIcon} size={'small'} /></div>
-      <span class="ac-header__title"><Label label={viewLabel} /></span>
-      <div class="ml-4"><FilterButton {_class} /></div>
-    </div>
-
-    <SearchEdit
-      bind:value={search}
-      on:change={() => {
-        updateResultQuery(search)
-      }}
-    />
+<div class="ac-header full divide">
+  <div class="ac-header__wrap-title mr-3">
+    <span class="ac-header__title"><Label label={viewLabel} /></span>
   </div>
-  <div class="ac-header-full" class:secondRow={twoRows}>
-    <Button icon={IconAdd} label={createLabel} kind={'primary'} size={'small'} on:click={showCreateDialog} />
 
+  <div class="ac-header-full medium-gap mb-1">
     {#if viewlets.length > 1}
       <TabList
         items={viewslist}
         multiselect={false}
         selected={selectedViewlet?._id}
-        kind={'secondary'}
-        size={'small'}
         on:select={(result) => {
           if (result.detail !== undefined) selectedViewlet = viewlets.find((vl) => vl._id === result.detail.id)
         }}
       />
     {/if}
-    <ViewletSettingButton bind:viewOptions viewlet={selectedViewlet} />
+    <Button icon={IconAdd} label={createLabel} kind={'primary'} on:click={showCreateDialog} />
+  </div>
+</div>
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <SearchEdit bind:value={search} on:change={() => updateResultQuery(search)} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
+    <div class="buttons-divider" />
+    <FilterButton {_class} />
+  </div>
+  <div class="ac-header-full medium-gap">
+    <ViewletSettingButton bind:viewOptions viewlet={selectedViewlet} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
   </div>
 </div>
-
 {#if selectedViewlet?.$lookup?.descriptor?.component}
   {#if loading}
     <Loading />
diff --git a/plugins/chunter-resources/src/components/Channel.svelte b/plugins/chunter-resources/src/components/Channel.svelte
index a3c9e4aa46..63b125e1a3 100644
--- a/plugins/chunter-resources/src/components/Channel.svelte
+++ b/plugins/chunter-resources/src/components/Channel.svelte
@@ -198,6 +198,7 @@
 </script>
 
 <div class="flex-col vScroll" bind:this={div} on:scroll={handleScroll}>
+  <div class="grower" />
   {#if showFixed}
     <div class="ml-2 pr-2 fixed">
       <JumpToDateSelector {selectedDate} fixed on:jumpToDate={handleJumpToDate} />
@@ -224,6 +225,10 @@
 </div>
 
 <style lang="scss">
+  .grower {
+    flex-grow: 10;
+    flex-shrink: 5;
+  }
   .fixed {
     position: absolute;
     align-self: center;
diff --git a/plugins/chunter-resources/src/components/ChannelHeader.svelte b/plugins/chunter-resources/src/components/ChannelHeader.svelte
index c3c8e81361..a0d8c6f384 100644
--- a/plugins/chunter-resources/src/components/ChannelHeader.svelte
+++ b/plugins/chunter-resources/src/components/ChannelHeader.svelte
@@ -38,7 +38,7 @@
   }
 </script>
 
-<div class="ac-header divide full">
+<div class="ac-header divide full caption-height">
   {#if channel}
     <Header
       icon={channel.private ? Lock : classIcon(client, channel._class)}
diff --git a/plugins/chunter-resources/src/components/ChunterBrowser.svelte b/plugins/chunter-resources/src/components/ChunterBrowser.svelte
index 24f31a2977..aaa9b84345 100644
--- a/plugins/chunter-resources/src/components/ChunterBrowser.svelte
+++ b/plugins/chunter-resources/src/components/ChunterBrowser.svelte
@@ -48,7 +48,7 @@
 </script>
 
 <div class="flex-col h-full">
-  <div class="ac-header divide full">
+  <div class="ac-header divide full caption-height">
     <Header icon={workbench.icon.Search} intlLabel={plugin.string.ChunterBrowser} />
   </div>
   <div class="h-full browser">
diff --git a/plugins/chunter-resources/src/components/DmHeader.svelte b/plugins/chunter-resources/src/components/DmHeader.svelte
index 539adf5836..3a22495688 100644
--- a/plugins/chunter-resources/src/components/DmHeader.svelte
+++ b/plugins/chunter-resources/src/components/DmHeader.svelte
@@ -54,10 +54,11 @@
   }
 </script>
 
-<div class="ac-header divide full">
+<div class="ac-header divide full caption-height">
   {#if dm}
     {#await getDmName(client, dm) then name}
       {#await getEmpolyeeIds() then empolyeeIds}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div class="ac-header__wrap-title" on:click={onSpaceEdit}>
           <div class="ac-header__icon">
             <CombineAvatars _class={contact.class.Employee} items={empolyeeIds} size={'x-small'} />
diff --git a/plugins/chunter-resources/src/components/Header.svelte b/plugins/chunter-resources/src/components/Header.svelte
index abba213761..16c9736ca2 100644
--- a/plugins/chunter-resources/src/components/Header.svelte
+++ b/plugins/chunter-resources/src/components/Header.svelte
@@ -28,6 +28,7 @@
 </script>
 
 <div class="ac-header__wrap-description">
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div class="ac-header__wrap-title" on:click>
     {#if icon}<div class="ac-header__icon"><Icon {icon} size={'small'} /></div>{/if}
     {#if label}
diff --git a/plugins/chunter-resources/src/components/JumpToDateSelector.svelte b/plugins/chunter-resources/src/components/JumpToDateSelector.svelte
index bba7303a38..1e310680ba 100644
--- a/plugins/chunter-resources/src/components/JumpToDateSelector.svelte
+++ b/plugins/chunter-resources/src/components/JumpToDateSelector.svelte
@@ -15,11 +15,11 @@
   $: isCurrentYear = time ? new Date(time).getFullYear() === new Date().getFullYear() : undefined
 </script>
 
-<div id={fixed ? '' : time?.toString()} class="flex justify-center mt-5 pr-1 dateSelector">
+<div id={fixed ? '' : time?.toString()} class="flex-center clear-mins dateSelector">
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
     bind:this={div}
-    class="mb-1 p-1 border-radius-2 over-underline dateSelectorButton"
+    class="border-radius-4 over-underline dateSelectorButton clear-mins"
     on:click={() => {
       showPopup(DateRangePopup, {}, div, (v) => {
         if (v) {
@@ -30,28 +30,37 @@
     }}
   >
     {#if time}
-      <div>
-        {new Date(time).toLocaleDateString('default', {
-          weekday: 'short',
-          month: 'long',
-          day: 'numeric',
-          year: isCurrentYear ? undefined : 'numeric'
-        })}
-      </div>
+      {new Date(time).toLocaleDateString('default', {
+        weekday: 'short',
+        month: 'long',
+        day: 'numeric',
+        year: isCurrentYear ? undefined : 'numeric'
+      })}
     {/if}
   </div>
 </div>
 
 <style lang="scss">
   .dateSelector {
-    &:not(:first-child) {
-      border-top: 1px solid var(--divider-color);
+    position: relative;
+    flex-shrink: 0;
+    margin: 0.25rem 0;
+
+    &:not(:first-child)::after {
+      position: absolute;
+      content: '';
+      top: 50%;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background-color: var(--theme-divider-color);
+    }
+    .dateSelectorButton {
+      padding: 0.25rem 0.5rem;
+      height: max-content;
+      background-color: var(--theme-list-row-color);
+      border: 1px solid var(--theme-divider-color);
+      z-index: 10;
     }
   }
-
-  .dateSelectorButton {
-    margin-top: -1rem;
-    background-color: var(--body-color);
-    border: 1px solid var(--divider-color);
-  }
 </style>
diff --git a/plugins/chunter-resources/src/components/Message.svelte b/plugins/chunter-resources/src/components/Message.svelte
index f8ffee81b3..dc060e9ef4 100644
--- a/plugins/chunter-resources/src/components/Message.svelte
+++ b/plugins/chunter-resources/src/components/Message.svelte
@@ -221,10 +221,10 @@
   let loading = false
 </script>
 
-<div class="container" class:highlighted={isHighlighted} id={message._id}>
+<div class="container clear-mins" class:highlighted={isHighlighted} id={message._id}>
   <div class="avatar"><Avatar size={'medium'} avatar={employee?.avatar} /></div>
-  <div class="message">
-    <div class="header">
+  <div class="message clear-mins">
+    <div class="header clear-mins">
       {#if employee}
         <EmployeePresenter value={employee} shouldShowAvatar={false} inline />
       {/if}
@@ -270,7 +270,7 @@
       </div>
     {/if}
   </div>
-  <div class="buttons" class:menuShowed>
+  <div class="buttons clear-mins" class:menuShowed>
     <div class="tool">
       <ActionIcon
         icon={IconMoreH}
@@ -305,6 +305,7 @@
   .container {
     position: relative;
     display: flex;
+    flex-shrink: 0;
     padding: 0.5rem 2rem;
 
     &.highlighted {
@@ -327,7 +328,7 @@
         font-weight: 500;
         font-size: 1rem;
         line-height: 150%;
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
         margin-bottom: 0.25rem;
 
         span {
@@ -379,7 +380,7 @@
     }
 
     &:hover {
-      background-color: var(--board-card-bg-hover);
+      background-color: var(--highlight-hover);
     }
   }
 </style>
diff --git a/plugins/chunter-resources/src/components/SavedMessages.svelte b/plugins/chunter-resources/src/components/SavedMessages.svelte
index 4866803da5..b729ed067b 100644
--- a/plugins/chunter-resources/src/components/SavedMessages.svelte
+++ b/plugins/chunter-resources/src/components/SavedMessages.svelte
@@ -85,7 +85,7 @@
   }
 </script>
 
-<div class="ac-header full divide">
+<div class="ac-header full divide caption-height">
   <div class="ac-header__wrap-title">
     <span class="ac-header__title"><Label label={chunter.string.SavedItems} /></span>
   </div>
@@ -93,7 +93,8 @@
 <Scroller>
   {#if savedMessages.length > 0 || savedAttachments.length > 0}
     {#each savedMessages as message}
-      <div on:click={() => openMessageFromSpecial(message)}>
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <div class="clear-mins flex-no-shrink" on:click={() => openMessageFromSpecial(message)}>
         <Message
           {message}
           on:openThread
@@ -105,7 +106,8 @@
       </div>
     {/each}
     {#each savedAttachments as att}
-      <div class="attachmentContainer" on:click={() => openAttachment(att)}>
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <div class="attachmentContainer flex-no-shrink clear-mins" on:click={() => openAttachment(att)}>
         <AttachmentPreview value={att} isSaved={true} />
         <div class="label">
           <Label
diff --git a/plugins/chunter-resources/src/components/Thread.svelte b/plugins/chunter-resources/src/components/Thread.svelte
index 5937df1741..9a6d2709fa 100644
--- a/plugins/chunter-resources/src/components/Thread.svelte
+++ b/plugins/chunter-resources/src/components/Thread.svelte
@@ -163,7 +163,7 @@
   let loading = false
 </script>
 
-<div class="ml-8 mt-4">
+<div class="flex-col ml-8 mt-4 flex-no-shrink">
   {#if parent}
     {#await getChannel(parent.space) then channel}
       {#if channel?._class === chunter.class.Channel}
@@ -178,13 +178,13 @@
     {/await}
   {/if}
 </div>
-<div class="flex-col content">
+<div class="flex-col content flex-no-shrink">
   {#if parent}
     <MsgView message={parent} thread {savedAttachmentsIds} />
     {#if total > comments.length}
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div
-        class="label pb-2 pt-2 pl-8 over-underline"
+        class="label pb-2 pt-2 pl-8 over-underline clear-mins"
         on:click={() => {
           showAll = true
         }}
@@ -195,7 +195,7 @@
     {#each comments as comment (comment._id)}
       <MsgView message={comment} thread {savedAttachmentsIds} />
     {/each}
-    <div class="mr-4 ml-4 mb-4 mt-2">
+    <div class="mr-4 ml-4 pb-4 mt-2 clear-mins">
       <AttachmentRefInput
         space={parent.space}
         _class={chunter.class.ThreadMessage}
@@ -206,17 +206,19 @@
     </div>
   {/if}
 </div>
+<div class="min-h-4 max-h-4 h-4 flex-no-shrink" />
 
 <style lang="scss">
   .content {
     overflow: hidden;
-    margin: 1rem 1rem 0px;
-    background-color: var(--board-bg-color);
-    border: 1px solid var(--divider-color);
+    margin: 1rem 1rem 0;
+    padding-top: 0.5rem;
+    background-color: var(--theme-list-row-color);
+    border: 1px solid var(--theme-divider-color);
     border-radius: 0.75rem;
   }
 
   .label:hover {
-    background-color: var(--board-card-bg-hover);
+    background-color: var(--theme-button-hovered);
   }
 </style>
diff --git a/plugins/chunter-resources/src/components/Threads.svelte b/plugins/chunter-resources/src/components/Threads.svelte
index f7c826af8d..9b5a82ea94 100644
--- a/plugins/chunter-resources/src/components/Threads.svelte
+++ b/plugins/chunter-resources/src/components/Threads.svelte
@@ -49,19 +49,16 @@
   })
 </script>
 
-<div class="ac-header full divide">
+<div class="ac-header full divide caption-height">
   <div class="ac-header__wrap-title">
     <span class="ac-header__title"><Label label={chunter.string.Threads} /></span>
   </div>
 </div>
 <Scroller>
-  {#each threads as thread (thread)}
-    <div class="item"><Thread _id={thread} {savedAttachmentsIds} /></div>
+  {#each threads as thread, i (thread)}
+    <Thread _id={thread} {savedAttachmentsIds} />
+    {#if i < threads.length - 1}
+      <div class="antiDivider" />
+    {/if}
   {/each}
 </Scroller>
-
-<style lang="scss">
-  .item + .item {
-    margin-top: 3rem;
-  }
-</style>
diff --git a/plugins/contact-assets/lang/en.json b/plugins/contact-assets/lang/en.json
index f58bac85c0..7296f3e1fc 100644
--- a/plugins/contact-assets/lang/en.json
+++ b/plugins/contact-assets/lang/en.json
@@ -16,7 +16,7 @@
     "SelectFolder": "Select folder",
     "OrganizationsFolder": "Companies folder",
     "PersonsFolder": "Persons folder",
-    "ContactCreateLabel": "Contact",
+    "ContactCreateLabel": "Create contact",
     "SearchEmployee": "Search for employee...",
     "SearchPerson": "Search for person...",
     "SearchOrganization": "Search for company...",
diff --git a/plugins/contact-assets/lang/ru.json b/plugins/contact-assets/lang/ru.json
index 785021bfce..596d9c59a4 100644
--- a/plugins/contact-assets/lang/ru.json
+++ b/plugins/contact-assets/lang/ru.json
@@ -16,7 +16,7 @@
     "SelectFolder": "Выбрать папку",
     "OrganizationsFolder": "Папка с компаниями",
     "PersonsFolder": "Папка с людьми",
-    "ContactCreateLabel": "Контакт",
+    "ContactCreateLabel": "Создать контакт",
     "SearchEmployee": "Поиск сотрудника...",
     "SearchPerson": "Поиск персоны...",
     "SearchOrganization": "Поиск компании...",
diff --git a/plugins/contact-resources/src/components/Avatar.svelte b/plugins/contact-resources/src/components/Avatar.svelte
index 93d77fabfc..bc907c2287 100644
--- a/plugins/contact-resources/src/components/Avatar.svelte
+++ b/plugins/contact-resources/src/components/Avatar.svelte
@@ -126,6 +126,10 @@
     width: 1.5rem; // 24
     height: 1.5rem;
   }
+  .ava-smaller {
+    width: 1.75rem; // 32
+    height: 1.75rem;
+  }
   .ava-small {
     width: 2rem; // 32
     height: 2rem;
@@ -157,6 +161,8 @@
   .ava-inline.no-img,
   .ava-x-small .ava-mask,
   .ava-x-small.no-img,
+  .ava-smaller .ava-mask,
+  .ava-smaller.no-img,
   .ava-small .ava-mask,
   .ava-small.no-img,
   .ava-medium .ava-mask,
diff --git a/plugins/contact-resources/src/components/Contacts.svelte b/plugins/contact-resources/src/components/Contacts.svelte
index beb3bc5cc2..e7b8be6541 100644
--- a/plugins/contact-resources/src/components/Contacts.svelte
+++ b/plugins/contact-resources/src/components/Contacts.svelte
@@ -16,7 +16,7 @@
 <script lang="ts">
   import { Doc, DocumentQuery } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
-  import { Button, Icon, IconAdd, Label, Loading, SearchEdit, showPopup } from '@hcengineering/ui'
+  import { Button, Label, Loading, SearchEdit, showPopup, IconMoreH, ActionIcon } from '@hcengineering/ui'
   import view, { Viewlet, ViewletPreference } from '@hcengineering/view'
   import {
     ActionContext,
@@ -30,7 +30,7 @@
   } from '@hcengineering/view-resources'
   import contact from '../plugin'
   import CreateContact from './CreateContact.svelte'
-  import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
+  // import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
 
   let search = ''
   let searchQuery: DocumentQuery<Doc> = {}
@@ -74,7 +74,7 @@
     showPopup(CreateContact, { space: contact.space.Contacts, targetElement: ev.target }, ev.target as HTMLElement)
   }
 
-  $: twoRows = $deviceInfo.twoRows
+  // $: twoRows = $deviceInfo.twoRows
 
   $: viewOptions = getViewOptions(viewlet, $viewOptionStore)
 </script>
@@ -85,30 +85,29 @@
   }}
 />
 <div class="antiPanel-component">
-  <div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
-    <div class:ac-header-full={!twoRows} class:flex-between={twoRows}>
-      <div class="ac-header__wrap-title mr-3">
-        <div class="ac-header__icon"><Icon icon={contact.icon.Person} size={'small'} /></div>
-        <span class="ac-header__title"><Label label={contact.string.Contacts} /></span>
-        <div class="ml-4"><FilterButton _class={contact.class.Contact} /></div>
-      </div>
-
-      <SearchEdit
-        bind:value={search}
-        on:change={() => {
-          updateResultQuery(search)
-        }}
-      />
+  <div class="ac-header full divide">
+    <div class="ac-header__wrap-title mr-3">
+      <span class="ac-header__title"><Label label={contact.string.Contacts} /></span>
     </div>
-    <div class="ac-header-full" class:secondRow={twoRows}>
+    <div class="mb-1 clear-mins">
       <Button
-        icon={IconAdd}
         label={contact.string.ContactCreateLabel}
         kind={'primary'}
-        size={'small'}
+        size={'medium'}
         on:click={(ev) => showCreateDialog(ev)}
       />
+    </div>
+  </div>
+  <div class="ac-header full divide search-start">
+    <div class="ac-header-full small-gap">
+      <SearchEdit bind:value={search} on:change={() => updateResultQuery(search)} />
+      <ActionIcon icon={IconMoreH} size={'small'} />
+      <div class="buttons-divider" />
+      <FilterButton _class={contact.class.Contact} />
+    </div>
+    <div class="ac-header-full medium-gap">
       <ViewletSettingButton bind:viewOptions {viewlet} />
+      <ActionIcon icon={IconMoreH} size={'small'} />
     </div>
   </div>
 
diff --git a/plugins/contact-resources/src/components/EmployeeAttributePresenter.svelte b/plugins/contact-resources/src/components/EmployeeAttributePresenter.svelte
index 2c46e05781..2a4f6fc192 100644
--- a/plugins/contact-resources/src/components/EmployeeAttributePresenter.svelte
+++ b/plugins/contact-resources/src/components/EmployeeAttributePresenter.svelte
@@ -12,6 +12,8 @@
   export let kind: ButtonKind = 'link'
   export let tooltipLabels: PersonLabelTooltip | undefined = undefined
   export let onChange: ((value: Ref<Employee>) => void) | undefined = undefined
+  export let colorInherit: boolean = false
+  export let accent: boolean = false
   export let inline = false
 
   $: employee = value ? $employeeByIdStore.get(value) : undefined
@@ -47,7 +49,9 @@
     shouldShowPlaceholder
     defaultName={contact.string.NotSpecified}
     shouldShowName={kind !== 'list'}
-    avatarSize={kind === 'list-header' ? 'small' : 'x-small'}
+    avatarSize={kind === 'list-header' ? 'smaller' : 'x-small'}
     disableClick
+    {colorInherit}
+    {accent}
   />
 {/if}
diff --git a/plugins/contact-resources/src/components/EmployeePresenter.svelte b/plugins/contact-resources/src/components/EmployeePresenter.svelte
index 400e2ed37c..0bd7ad8dd4 100644
--- a/plugins/contact-resources/src/components/EmployeePresenter.svelte
+++ b/plugins/contact-resources/src/components/EmployeePresenter.svelte
@@ -2,6 +2,7 @@
   import { Employee } from '@hcengineering/contact'
   import { WithLookup } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
+  import { IconSize } from '@hcengineering/ui'
   import { PersonLabelTooltip } from '..'
   import PersonPresenter from '../components/PersonPresenter.svelte'
   import contact from '../plugin'
@@ -12,10 +13,12 @@
   export let shouldShowName: boolean = true
   export let shouldShowPlaceholder = false
   export let onEmployeeEdit: ((event: MouseEvent) => void) | undefined = undefined
-  export let avatarSize: 'inline' | 'tiny' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' = 'x-small'
+  export let avatarSize: IconSize = 'x-small'
   export let isInteractive = true
   export let inline = false
   export let disableClick = false
+  export let colorInherit: boolean = false
+  export let accent: boolean = false
   export let defaultName: IntlString | undefined = undefined
   export let element: HTMLElement | undefined = undefined
 </script>
@@ -31,6 +34,8 @@
   {shouldShowPlaceholder}
   isInteractive={isInteractive && !disableClick}
   {inline}
+  {colorInherit}
+  {accent}
   {defaultName}
   statusLabel={value?.active === false && shouldShowName ? contact.string.Inactive : undefined}
 />
diff --git a/plugins/contact-resources/src/components/EmployeeRefPresenter.svelte b/plugins/contact-resources/src/components/EmployeeRefPresenter.svelte
index 034a0fbb30..4f5c4be879 100644
--- a/plugins/contact-resources/src/components/EmployeeRefPresenter.svelte
+++ b/plugins/contact-resources/src/components/EmployeeRefPresenter.svelte
@@ -9,17 +9,19 @@
   export let kind: ButtonKind = 'link'
   export let tooltipLabels: PersonLabelTooltip | undefined = undefined
   export let onChange: ((value: Ref<Employee>) => void) | undefined = undefined
+  export let colorInherit: boolean = false
+  export let accent: boolean = false
   export let inline = false
 </script>
 
 {#if Array.isArray(value)}
   <div class="inline-content">
     {#each value as employee}
-      <EmployeeAttributePresenter value={employee} {kind} {tooltipLabels} {onChange} {inline} />
+      <EmployeeAttributePresenter value={employee} {kind} {tooltipLabels} {onChange} {inline} {colorInherit} {accent} />
     {/each}
   </div>
 {:else}
-  <EmployeeAttributePresenter {value} {kind} {tooltipLabels} {onChange} {inline} />
+  <EmployeeAttributePresenter {value} {kind} {tooltipLabels} {onChange} {inline} {colorInherit} {accent} />
 {/if}
 
 <style lang="scss">
diff --git a/plugins/contact-resources/src/components/PersonContent.svelte b/plugins/contact-resources/src/components/PersonContent.svelte
index f675502cca..6d78513b23 100644
--- a/plugins/contact-resources/src/components/PersonContent.svelte
+++ b/plugins/contact-resources/src/components/PersonContent.svelte
@@ -16,6 +16,7 @@
   import { Employee, getName, Person } from '@hcengineering/contact'
   import { IntlString } from '@hcengineering/platform'
   import { Label, LabelAndProps, tooltip } from '@hcengineering/ui'
+  import type { IconSize } from '@hcengineering/ui'
   import { DocNavLink } from '@hcengineering/view-resources'
   import Avatar from './Avatar.svelte'
 
@@ -27,11 +28,13 @@
   export let shouldShowPlaceholder = false
   export let defaultName: IntlString | undefined = undefined
   export let statusLabel: IntlString | undefined = undefined
-  export let avatarSize: 'inline' | 'tiny' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' = 'x-small'
+  export let avatarSize: IconSize = 'x-small'
   export let onEdit: ((event: MouseEvent) => void) | undefined = undefined
   export let showTooltip: LabelAndProps | undefined = undefined
   export let enlargedText = false
   export let element: HTMLElement | undefined = undefined
+  export let colorInherit: boolean = false
+  export let accent: boolean = false
 
   const onEditClick = (evt: MouseEvent) => {
     if (isInteractive) {
@@ -41,7 +44,7 @@
 </script>
 
 {#if value}
-  <DocNavLink object={value} onClick={onEdit} disableClick={!isInteractive} {inline}>
+  <DocNavLink object={value} onClick={onEdit} disableClick={!isInteractive} {inline} {colorInherit}>
     <span
       use:tooltip={showTooltip}
       class="contentPresenter"
@@ -58,7 +61,7 @@
         </span>
       {/if}
       {#if shouldShowName}
-        <span class="eContentPresenterLabel">{getName(value)}</span>
+        <span class="eContentPresenterLabel" class:colorInherit>{getName(value)}</span>
       {/if}
     </span>
   </DocNavLink>
@@ -80,7 +83,7 @@
       </span>
     {/if}
     {#if shouldShowName && defaultName}
-      <span class="eContentPresenterLabel">
+      <span class="eContentPresenterLabel" class:colorInherit>
         <Label label={defaultName} />
       </span>
       {#if statusLabel}
@@ -109,7 +112,7 @@
       min-width: 0;
       font-weight: 500;
       text-align: left;
-      color: var(--accent-color);
+      color: var(--theme-caption-color);
 
       overflow: hidden;
       visibility: visible;
@@ -119,14 +122,18 @@
       -webkit-line-clamp: 2;
       line-clamp: 2;
       user-select: none;
+
+      &.colorInherit {
+        color: inherit;
+      }
     }
     &:hover {
       .eContentPresenterIcon {
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
       }
       .eContentPresenterLabel {
         text-decoration: underline;
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
       }
     }
   }
diff --git a/plugins/contact-resources/src/components/PersonPresenter.svelte b/plugins/contact-resources/src/components/PersonPresenter.svelte
index cec8b288d4..d80782cd1f 100644
--- a/plugins/contact-resources/src/components/PersonPresenter.svelte
+++ b/plugins/contact-resources/src/components/PersonPresenter.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { getName, Person } from '@hcengineering/contact'
   import { getEmbeddedLabel, IntlString } from '@hcengineering/platform'
-  import { LabelAndProps } from '@hcengineering/ui'
+  import type { LabelAndProps, IconSize } from '@hcengineering/ui'
   import { PersonLabelTooltip } from '..'
   import PersonContent from './PersonContent.svelte'
 
@@ -29,9 +29,11 @@
   export let defaultName: IntlString | undefined = undefined
   export let statusLabel: IntlString | undefined = undefined
   export let tooltipLabels: PersonLabelTooltip | undefined = undefined
-  export let avatarSize: 'inline' | 'tiny' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' = 'x-small'
+  export let avatarSize: IconSize = 'x-small'
   export let onEdit: ((event: MouseEvent) => void) | undefined = undefined
   export let element: HTMLElement | undefined = undefined
+  export let colorInherit: boolean = false
+  export let accent: boolean = false
 
   function getTooltip (
     tooltipLabels: PersonLabelTooltip | undefined,
@@ -73,6 +75,8 @@
     {shouldShowPlaceholder}
     {enlargedText}
     {statusLabel}
+    {colorInherit}
+    {accent}
     bind:element
   />
 {/if}
diff --git a/plugins/contact-resources/src/components/icons/Avatar.svelte b/plugins/contact-resources/src/components/icons/Avatar.svelte
index 48ec07c1f2..a4f202ae64 100644
--- a/plugins/contact-resources/src/components/icons/Avatar.svelte
+++ b/plugins/contact-resources/src/components/icons/Avatar.svelte
@@ -51,6 +51,10 @@
     width: 1rem;
     height: 1rem;
   }
+  .smaller {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
   .small {
     width: 1.25rem;
     height: 1.25rem;
diff --git a/plugins/document-resources/src/components/Documents.svelte b/plugins/document-resources/src/components/Documents.svelte
index 01312f4fc6..63c75c7bf3 100644
--- a/plugins/document-resources/src/components/Documents.svelte
+++ b/plugins/document-resources/src/components/Documents.svelte
@@ -18,7 +18,7 @@
   import { Doc, DocumentQuery } from '@hcengineering/core'
   import { Document } from '@hcengineering/document'
   import { createQuery, getClient } from '@hcengineering/presentation'
-  import { deviceOptionsStore as deviceInfo, Icon, Label, Loading, SearchEdit } from '@hcengineering/ui'
+  import { ActionIcon, IconMoreH, Label, Loading, SearchEdit } from '@hcengineering/ui'
   import view, { Viewlet, ViewletPreference } from '@hcengineering/view'
   import {
     ActionContext,
@@ -70,8 +70,8 @@
       }
     })
 
-  let twoRows: boolean
-  $: twoRows = $deviceInfo.docWidth <= 680
+  // let twoRows: boolean
+  // $: twoRows = $deviceInfo.docWidth <= 680
 
   $: viewOptions = getViewOptions(viewlet, $viewOptionStore)
 </script>
@@ -82,23 +82,21 @@
   }}
 />
 <div class="antiPanel-component">
-  <div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
-    <div class:ac-header-full={!twoRows} class:flex-between={twoRows}>
-      <div class="ac-header__wrap-title mr-3">
-        <div class="ac-header__icon"><Icon icon={document.icon.Document} size={'small'} /></div>
-        <span class="ac-header__title"><Label label={document.string.Documents} /></span>
-        <div class="ml-4"><FilterButton _class={document.class.Document} /></div>
-      </div>
-
-      <SearchEdit
-        bind:value={search}
-        on:change={() => {
-          updateResultQuery(search, query)
-        }}
-      />
+  <div class="ac-header full divide caption-height">
+    <div class="ac-header__wrap-title mr-3">
+      <span class="ac-header__title"><Label label={document.string.Documents} /></span>
     </div>
-    <div class="ac-header-full" class:secondRow={twoRows}>
+  </div>
+  <div class="ac-header full divide search-start">
+    <div class="ac-header-full small-gap">
+      <SearchEdit bind:value={search} on:change={() => updateResultQuery(search, query)} />
+      <ActionIcon icon={IconMoreH} size={'small'} />
+      <div class="buttons-divider" />
+      <FilterButton _class={document.class.Document} />
+    </div>
+    <div class="ac-header-full medium-gap">
       <ViewletSettingButton bind:viewOptions {viewlet} />
+      <ActionIcon icon={IconMoreH} size={'small'} />
     </div>
   </div>
 
diff --git a/plugins/hr-resources/src/components/DepartmentCard.svelte b/plugins/hr-resources/src/components/DepartmentCard.svelte
index 4e1bcb83d0..134c638031 100644
--- a/plugins/hr-resources/src/components/DepartmentCard.svelte
+++ b/plugins/hr-resources/src/components/DepartmentCard.svelte
@@ -97,82 +97,82 @@
   $: dragging = value._id === dragOver?._id && dragPersonId !== undefined
 </script>
 
-<div class="flex-center w-full px-4">
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  class="w-full mt-2 mb-2 container flex"
+  class:cursor-pointer={currentDescendants.length}
+  on:click|stopPropagation={edit}
+  on:contextmenu|preventDefault={showMenu}
+  class:dragging
+>
   <div
-    class="w-full mt-2 mb-2 container flex"
-    class:cursor-pointer={currentDescendants.length}
-    on:click|stopPropagation={edit}
-    on:contextmenu|preventDefault={showMenu}
-    class:dragging
-  >
-    <div
-      class="flex-between pt-4 pb-4 pr-4 pl-2 w-full"
-      on:dragover|preventDefault|stopPropagation={(evt) => {
-        dragOver = value
-      }}
-      on:dragend|preventDefault|stopPropagation={() => {
+    class="flex-between pt-4 pb-4 pr-4 pl-2 w-full"
+    on:dragover|preventDefault|stopPropagation={(evt) => {
+      dragOver = value
+    }}
+    on:dragend|preventDefault|stopPropagation={() => {
+      dragPerson = undefined
+      closeTooltip()
+    }}
+    on:drop|preventDefault={(itm) => {
+      closeTooltip()
+      addMember(client, dragPerson, value).then(() => {
         dragPerson = undefined
-        closeTooltip()
-      }}
-      on:drop|preventDefault={(itm) => {
-        closeTooltip()
-        addMember(client, dragPerson, value).then(() => {
-          dragPerson = undefined
-          dragOver = undefined
-        })
-      }}
-    >
-      <div class="flex-center">
-        <div class="mr-2">
-          <Button icon={IconAdd} kind={'list'} on:click={createChild} />
-        </div>
-        <Avatar size={'medium'} avatar={value.avatar} icon={hr.icon.Department} />
-        <div class="flex-row ml-2 mr-4">
-          <div class="fs-title">
-            {value.name}
-          </div>
-          <Label label={hr.string.MemberCount} params={{ count: value.members.length }} />
-        </div>
-        <PersonsPresenter value={values} bind:dragPerson showDragPerson={dragging} />
+        dragOver = undefined
+      })
+    }}
+  >
+    <div class="flex-center">
+      <div class="mr-2">
+        <Button icon={IconAdd} kind={'list'} on:click={createChild} />
       </div>
-      <div class="flex-center mr-2">
-        <div class="mr-2">
-          <EmployeePresenter
-            value={value.$lookup?.teamLead}
-            avatarSize={'small'}
-            shouldShowAvatar
-            shouldShowPlaceholder
-            shouldShowName={false}
-            tooltipLabels={{
-              personLabel: hr.string.TeamLeadTooltip,
-              placeholderLabel: hr.string.AssignLead
-            }}
-            onEmployeeEdit={openLeadEditor}
-          />
+      <Avatar size={'medium'} avatar={value.avatar} icon={hr.icon.Department} />
+      <div class="flex-row ml-2 mr-4">
+        <div class="fs-title">
+          {value.name}
         </div>
+        <Label label={hr.string.MemberCount} params={{ count: value.members.length }} />
+      </div>
+      <PersonsPresenter value={values} bind:dragPerson showDragPerson={dragging} />
+    </div>
+    <div class="flex-center mr-2">
+      <div class="mr-2">
+        <EmployeePresenter
+          value={value.$lookup?.teamLead}
+          avatarSize={'small'}
+          shouldShowAvatar
+          shouldShowPlaceholder
+          shouldShowName={false}
+          tooltipLabels={{
+            personLabel: hr.string.TeamLeadTooltip,
+            placeholderLabel: hr.string.AssignLead
+          }}
+          onEmployeeEdit={openLeadEditor}
+        />
       </div>
     </div>
   </div>
 </div>
-<div class="ml-8">
-  {#each currentDescendants as nested}
-    <DepartmentCard value={nested} {descendants} {allEmployees} bind:dragPerson bind:dragOver />
-  {/each}
-</div>
+{#if currentDescendants.length > 0}
+  <div class="flex-col ml-8">
+    {#each currentDescendants as nested}
+      <DepartmentCard value={nested} {descendants} {allEmployees} bind:dragPerson bind:dragOver />
+    {/each}
+  </div>
+{/if}
 
 <style lang="scss">
   .container {
-    background-color: var(--noborder-bg-color);
-    border: 1px solid transparent;
+    background-color: var(--theme-button-enabled);
+    border: 1px solid var(--theme-button-border);
     border-radius: 0.5rem;
 
     &:hover {
-      background-color: var(--noborder-bg-hover);
+      background-color: var(--theme-button-hovered);
       cursor: pointer;
     }
     &.dragging {
-      border-color: var(--divider-color);
+      border-color: var(--primary-button-focused-border);
     }
   }
 </style>
diff --git a/plugins/hr-resources/src/components/Schedule.svelte b/plugins/hr-resources/src/components/Schedule.svelte
index 35723bdb85..4e17ef6478 100644
--- a/plugins/hr-resources/src/components/Schedule.svelte
+++ b/plugins/hr-resources/src/components/Schedule.svelte
@@ -20,7 +20,8 @@
   import { createQuery, getClient, SpaceSelector } from '@hcengineering/presentation'
   import {
     Button,
-    Icon,
+    ActionIcon,
+    IconMoreH,
     IconBack,
     IconForward,
     Label,
@@ -105,97 +106,80 @@
   ]
 </script>
 
-<div class="ac-header divide {twoRows ? 'flex-col-reverse' : 'full'} withSettings">
-  <div class="ac-header__wrap-title" class:mt-2={twoRows}>
-    {#if !twoRows}
-      <div class="ac-header__icon"><Icon icon={calendar.icon.Calendar} size={'small'} /></div>
-      <span class="ac-header__title"><Label label={hr.string.Schedule} /></span>
-    {:else}
-      <div class="fs-title mr-4 flex-row-center flex-grow firstLetter">
-        {#if mode === CalendarMode.Month}
-          <span class="mr-2 overflow-label">{getMonthName(currentDate)}</span>
-        {/if}
-        {currentDate.getFullYear()}
-      </div>
-    {/if}
-    <div class="flex-row-center gap-2 flex-no-shrink" class:ml-6={!twoRows}>
-      <TabList
-        items={[
-          { id: 'ModeMonth', labelIntl: calendar.string.ModeMonth },
-          { id: 'ModeYear', labelIntl: calendar.string.ModeYear }
-        ]}
-        multiselect={false}
-        size={'small'}
-        on:select={handleSelect}
-      />
-      <div class="buttons-divider" />
-      <Button
-        icon={IconBack}
-        size={'small'}
-        kind={'link-bordered'}
-        on:click={() => {
-          inc(-1)
-        }}
-      />
-      <Button
-        size={'small'}
-        label={calendar.string.Today}
-        kind={'link-bordered'}
-        on:click={() => {
-          currentDate = new Date()
-        }}
-      />
-      <Button
-        icon={IconForward}
-        size={'small'}
-        kind={'link-bordered'}
-        on:click={() => {
-          inc(1)
-        }}
-      />
-    </div>
-    {#if !twoRows}
-      <div class="fs-title ml-4 flex-row-center firstLetter">
-        {#if mode === CalendarMode.Month}
-          <span class="overflow-label mr-2">{getMonthName(currentDate)}</span>
-        {/if}
-        {currentDate.getFullYear()}
-      </div>
-    {/if}
+<div class="ac-header full divide caption-height">
+  <div class="ac-header__wrap-title mr-3">
+    <span class="ac-header__title"><Label label={hr.string.Schedule} /></span>
   </div>
 
-  <div class="ac-header__wrap-title {twoRows ? 'mt-1' : 'ml-4'}">
-    {#if twoRows}
-      <div class="ac-header__icon flex-center"><Icon icon={calendar.icon.Calendar} size={'small'} /></div>
-      <span class="ac-header__title" class:flex-grow={twoRows}><Label label={hr.string.Schedule} /></span>
-    {/if}
-    <div class="flex-row-center gap-2">
-      {#if mode === CalendarMode.Month}
-        <TabList
-          items={viewslist}
-          multiselect={false}
-          selected={display}
-          kind={'secondary'}
-          size={'small'}
-          on:select={(result) => {
-            if (result.detail !== undefined) display = result.detail.id
-          }}
-        />
-      {/if}
-      <SearchEdit
-        bind:value={search}
-        on:change={() => {
-          updateResultQuery(search)
+  <div class="ac-header-full medium-gap mb-1">
+    {#if mode === CalendarMode.Month}
+      <TabList
+        items={viewslist}
+        multiselect={false}
+        selected={display}
+        on:select={(result) => {
+          if (result.detail !== undefined) display = result.detail.id
         }}
       />
-      <SpaceSelector
-        _class={hr.class.Department}
-        label={hr.string.Department}
-        bind:space={department}
-        kind={'secondary'}
-      />
+    {/if}
+    <SpaceSelector
+      _class={hr.class.Department}
+      label={hr.string.Department}
+      bind:space={department}
+      size={'medium'}
+      kind={'secondary'}
+    />
+  </div>
+</div>
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <SearchEdit bind:value={search} on:change={() => updateResultQuery(search)} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
+  </div>
+  <div class="ac-header-full medium-gap">
+    <!-- <ViewletSettingButton bind:viewOptions {viewlet} /> -->
+    <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
+  </div>
+</div>
+<div class="ac-header full divide">
+  <div class="ac-header-full small-gap">
+    <Button
+      icon={IconBack}
+      kind={'transparent'}
+      on:click={() => {
+        inc(-1)
+      }}
+    />
+    <Button
+      label={calendar.string.Today}
+      kind={'transparent'}
+      on:click={() => {
+        currentDate = new Date()
+      }}
+    />
+    <Button
+      icon={IconForward}
+      kind={'transparent'}
+      on:click={() => {
+        inc(1)
+      }}
+    />
+    <div class="buttons-divider" />
+    <div class="fs-title flex-row-center flex-grow firstLetter">
+      {#if mode === CalendarMode.Month}
+        <span class="mr-2 overflow-label">{getMonthName(currentDate)}</span>
+      {/if}
+      {currentDate.getFullYear()}
     </div>
   </div>
+  <TabList
+    items={[
+      { id: 'ModeMonth', labelIntl: calendar.string.ModeMonth },
+      { id: 'ModeYear', labelIntl: calendar.string.ModeYear }
+    ]}
+    multiselect={false}
+    on:select={handleSelect}
+  />
 </div>
 
 <ScheduleView
diff --git a/plugins/hr-resources/src/components/Structure.svelte b/plugins/hr-resources/src/components/Structure.svelte
index 5db850acc1..7788445818 100644
--- a/plugins/hr-resources/src/components/Structure.svelte
+++ b/plugins/hr-resources/src/components/Structure.svelte
@@ -21,12 +21,13 @@
     Button,
     deviceOptionsStore as deviceInfo,
     eventToHTMLElement,
-    Icon,
-    IconAdd,
+    ActionIcon,
+    IconMoreH,
     Label,
     Scroller,
     SearchEdit,
-    showPopup
+    showPopup,
+    IconAdd
   } from '@hcengineering/ui'
   import hr from '../plugin'
   import CreateDepartment from './CreateDepartment.svelte'
@@ -77,32 +78,23 @@
   $: twoRows = $deviceInfo.twoRows
 </script>
 
-<div class="ac-header withSettings divide" class:full={!twoRows} class:mini={twoRows}>
-  <div class:ac-header-full={!twoRows} class:flex-between={twoRows}>
-    <div class="ac-header__wrap-title mr-3">
-      <div class="ac-header__icon"><Icon icon={hr.icon.Structure} size={'small'} /></div>
-      <span class="ac-header__title"><Label label={hr.string.Structure} /></span>
-    </div>
-
-    <SearchEdit
-      bind:value={search}
-      on:change={() => {
-        updateResultQuery(search)
-      }}
-    />
+<div class="ac-header full divide caption-height">
+  <div class="ac-header__wrap-title mr-3">
+    <span class="ac-header__title"><Label label={hr.string.Structure} /></span>
   </div>
-  <div class="ac-header-full" class:secondRow={twoRows}>
-    <Button
-      label={hr.string.CreateDepartmentLabel}
-      icon={IconAdd}
-      kind={'primary'}
-      size={'small'}
-      on:click={showCreateDialog}
-    />
+
+  <div class="mb-1 clear-mins">
+    <Button icon={IconAdd} label={hr.string.CreateDepartmentLabel} kind={'primary'} on:click={showCreateDialog} />
+  </div>
+</div>
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <SearchEdit bind:value={search} on:change={() => updateResultQuery(search)} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
   </div>
 </div>
 
-<Scroller>
+<Scroller padding={'1rem 2.5rem'}>
   {#if head}
     <DepartmentCard value={head} {descendants} {allEmployees} dragOver={undefined} dragPerson={undefined} />
   {/if}
diff --git a/plugins/hr-resources/src/components/schedule/MonthTableView.svelte b/plugins/hr-resources/src/components/schedule/MonthTableView.svelte
index 525b571a89..438745a914 100644
--- a/plugins/hr-resources/src/components/schedule/MonthTableView.svelte
+++ b/plugins/hr-resources/src/components/schedule/MonthTableView.svelte
@@ -18,12 +18,12 @@
   import type { Request, RequestType, Staff } from '@hcengineering/hr'
   import { getEmbeddedLabel } from '@hcengineering/platform'
   import { createQuery, getClient } from '@hcengineering/presentation'
-  import { Button, Label, Loading, Scroller, showPopup, tableSP, tableToCSV } from '@hcengineering/ui'
+  import { Button, Label, Loading, showPopup, tableToCSV } from '@hcengineering/ui'
   import view, { BuildModelKey, Viewlet, ViewletPreference } from '@hcengineering/view'
   import {
     getViewOptions,
     setActiveViewletId,
-    Table,
+    TableBrowser,
     viewOptionStore,
     ViewletSettingButton
   } from '@hcengineering/view-resources'
@@ -398,31 +398,28 @@
 </script>
 
 {#if departmentStaff.length}
-  <Scroller fade={tableSP}>
-    <div class="p-2">
-      {#if descr}
-        {#if loading}
-          <Loading />
-        {:else}
-          <div class="flex-row-center flex-reverse">
-            <div class="ml-1">
-              <ViewletSettingButton bind:viewOptions viewlet={descr} />
-            </div>
-            <Button label={getEmbeddedLabel('Export')} size={'small'} on:click={(evt) => exportTable(evt)} />
-          </div>
-          {#await createConfig(descr, preference, month) then config}
-            <Table
-              tableId={'exportableData'}
-              _class={hr.mixin.Staff}
-              query={{ _id: { $in: departmentStaff.map((it) => it._id) } }}
-              {config}
-              options={descr.options}
-            />
-          {/await}
-        {/if}
-      {/if}
-    </div>
-  </Scroller>
+  {#if descr}
+    {#if loading}
+      <Loading />
+    {:else}
+      <div class="ac-header full divide">
+        <div class="clear-mins" />
+        <div class="ac-header-full small-gap">
+          <Button label={getEmbeddedLabel('Export')} on:click={(evt) => exportTable(evt)} />
+          <ViewletSettingButton bind:viewOptions viewlet={descr} />
+        </div>
+      </div>
+      {#await createConfig(descr, preference, month) then config}
+        <TableBrowser
+          tableId={'exportableData'}
+          _class={hr.mixin.Staff}
+          query={{ _id: { $in: departmentStaff.map((it) => it._id) } }}
+          {config}
+          options={descr.options}
+        />
+      {/await}
+    {/if}
+  {/if}
 {:else}
   <div class="flex-center h-full w-full flex-grow fs-title">
     <Label label={hr.string.NoEmployeesInDepartment} />
diff --git a/plugins/hr-resources/src/components/schedule/MonthView.svelte b/plugins/hr-resources/src/components/schedule/MonthView.svelte
index 15057ebd67..e9147bd253 100644
--- a/plugins/hr-resources/src/components/schedule/MonthView.svelte
+++ b/plugins/hr-resources/src/components/schedule/MonthView.svelte
@@ -23,7 +23,6 @@
     day as getDay,
     daysInMonth,
     eventToHTMLElement,
-    FadeOptions,
     floorFractionDigits,
     getWeekDayName,
     isWeekend,
@@ -31,8 +30,8 @@
     LabelAndProps,
     Scroller,
     showPopup,
-    tableSP,
-    tooltip
+    tooltip,
+    deviceOptionsStore as deviceInfo
   } from '@hcengineering/ui'
   import hr from '../../plugin'
   import { EmployeeReports, getHolidayDatesForEmployee, getRequests, getTotal, isHoliday } from '../../utils'
@@ -121,14 +120,6 @@
     )
   }
 
-  const fade: FadeOptions = {
-    ...tableSP,
-    multipler: {
-      ...tableSP.multipler,
-      bottom: 3.5
-    }
-  }
-
   function showReportInfo (employee: Staff, rTime: EmployeeReports | undefined): void {
     if (rTime === undefined) {
       return
@@ -142,15 +133,20 @@
 
   export let staffDepartmentMap: Map<Ref<Staff>, Department[]>
   export let holidays: Map<Ref<Department>, Date[]>
+
+  let colWidth: number
+  $: colWidthRem = colWidth / $deviceInfo.fontSize
 </script>
 
 {#if departmentStaff.length}
-  <Scroller {fade} horizontal>
+  <Scroller fade={{ multipler: { top: 3, bottom: 0, left: colWidthRem } }} horizontal>
     <table class="scroller-first-column">
       <thead class="scroller-thead">
         <tr class="scroller-thead__tr">
           <th>
-            <Label label={contact.string.Employee} />
+            <div class="fullfill center">
+              <Label label={contact.string.Employee} />
+            </div>
           </th>
           <th>#</th>
           <th>##</th>
@@ -180,8 +176,10 @@
           {@const requests = employeeRequests.get(employee._id) ?? []}
           {@const rTime = timeReports.get(employee._id)}
           <tr>
-            <td>
-              <EmployeePresenter value={employee} />
+            <td bind:clientWidth={colWidth}>
+              <div class="fullfill">
+                <EmployeePresenter value={employee} />
+              </div>
             </td>
             <td
               class="flex-center p-1 whitespace-nowrap text-center"
@@ -258,7 +256,9 @@
       <tfoot class="scroller-tfoot">
         <tr>
           <td class="summary">
-            <Label label={hr.string.Summary} />
+            <div class="fullfill">
+              <Label label={hr.string.Summary} />
+            </div>
           </td>
           <td class="flex-center p-1 whitespace-nowrap text-center summary">
             {getTotal(
@@ -316,7 +316,6 @@
       border: none;
       &:first-child {
         width: 15rem;
-        padding: 0.5rem;
       }
     }
     th {
diff --git a/plugins/inventory-resources/src/components/Categories.svelte b/plugins/inventory-resources/src/components/Categories.svelte
index 22710c28bd..fe2c7fc198 100644
--- a/plugins/inventory-resources/src/components/Categories.svelte
+++ b/plugins/inventory-resources/src/components/Categories.svelte
@@ -15,12 +15,12 @@
 -->
 <script lang="ts">
   import { DocumentQuery } from '@hcengineering/core'
-  import { Button, Icon, Label, Scroller, SearchEdit, showPopup, IconAdd } from '@hcengineering/ui'
+  import { Button, ActionIcon, Label, Scroller, SearchEdit, showPopup, IconMoreH, IconAdd } from '@hcengineering/ui'
   import type { Category } from '@hcengineering/inventory'
   import inventory from '../plugin'
   import CreateCategory from './CreateCategory.svelte'
   import HierarchyView from './HierarchyView.svelte'
-  import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
+  // import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
 
   let search = ''
   let resultQuery: DocumentQuery<Category> = {}
@@ -33,31 +33,23 @@
     showPopup(CreateCategory, { space: inventory.space.Category }, 'top')
   }
 
-  $: twoRows = $deviceInfo.twoRows
+  // $: twoRows = $deviceInfo.twoRows
 </script>
 
-<div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
-  <div class:ac-header-full={!twoRows} class:flex-between={twoRows}>
-    <div class="ac-header__wrap-title mr-3">
-      <div class="ac-header__icon"><Icon icon={inventory.icon.Categories} size={'small'} /></div>
-      <span class="ac-header__title"><Label label={inventory.string.Categories} /></span>
-    </div>
-
-    <SearchEdit
-      bind:value={search}
-      on:change={() => {
-        updateResultQuery(search)
-      }}
-    />
+<div class="ac-header full divide caption-height">
+  <div class="ac-header__wrap-title mr-3">
+    <span class="ac-header__title"><Label label={inventory.string.Categories} /></span>
   </div>
-  <div class="ac-header-full" class:secondRow={twoRows}>
-    <Button
-      label={inventory.string.CategoryCreateLabel}
-      icon={IconAdd}
-      kind={'primary'}
-      size={'small'}
-      on:click={showCreateDialog}
-    />
+
+  <div class="mb-1 clear-mins">
+    <Button icon={IconAdd} label={inventory.string.CategoryCreateLabel} kind={'primary'} on:click={showCreateDialog} />
+  </div>
+</div>
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <SearchEdit bind:value={search} on:change={() => updateResultQuery(search)} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
+    <div class="buttons-divider" />
   </div>
 </div>
 
diff --git a/plugins/login-resources/src/components/Form.svelte b/plugins/login-resources/src/components/Form.svelte
index 0c3b1688f6..85204b706e 100644
--- a/plugins/login-resources/src/components/Form.svelte
+++ b/plugins/login-resources/src/components/Form.svelte
@@ -186,7 +186,7 @@
     .title {
       font-weight: 600;
       font-size: 1.5rem;
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
     }
     .status {
       min-height: 7.5rem;
@@ -214,13 +214,13 @@
     .footer {
       margin-top: 3.5rem;
       font-size: 0.8rem;
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
       span {
         opacity: 0.3;
       }
       a {
         text-decoration: none;
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
         opacity: 0.8;
         &:hover {
           opacity: 1;
diff --git a/plugins/login-resources/src/components/LoginApp.svelte b/plugins/login-resources/src/components/LoginApp.svelte
index ebc138f6b6..2535d951b5 100644
--- a/plugins/login-resources/src/components/LoginApp.svelte
+++ b/plugins/login-resources/src/components/LoginApp.svelte
@@ -80,7 +80,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    background: var(--popup-bg-color);
+    background: var(--theme-list-row-color);
     box-shadow: var(--popup-aside-shadow);
 
     &.minHeight {
diff --git a/plugins/login-resources/src/components/SelectWorkspace.svelte b/plugins/login-resources/src/components/SelectWorkspace.svelte
index fa94b218c5..de642f5e12 100644
--- a/plugins/login-resources/src/components/SelectWorkspace.svelte
+++ b/plugins/login-resources/src/components/SelectWorkspace.svelte
@@ -79,6 +79,7 @@
     <Scroller padding={'.125rem 0'}>
       <div class="form">
         {#each workspaces as workspace}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
           <div
             class="workspace flex-center fs-title cursor-pointer focused-button bordered form-row"
             on:click={() => select(workspace.workspace)}
@@ -120,7 +121,7 @@
     .title {
       font-weight: 600;
       font-size: 1.5rem;
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
     }
     .status {
       min-height: 7.5rem;
@@ -150,13 +151,13 @@
     .footer {
       margin-top: 3.5rem;
       font-size: 0.8rem;
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
       span {
         opacity: 0.3;
       }
       a {
         text-decoration: none;
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
         opacity: 0.8;
         &:hover {
           opacity: 1;
diff --git a/plugins/login-resources/src/components/StatusControl.svelte b/plugins/login-resources/src/components/StatusControl.svelte
index 7bc77cd063..91a1e10ebc 100644
--- a/plugins/login-resources/src/components/StatusControl.svelte
+++ b/plugins/login-resources/src/components/StatusControl.svelte
@@ -30,15 +30,15 @@
 <style lang="scss">
   .container {
     padding: 0.75rem 1rem;
-    background-color: var(--accent-bg-color);
-    border: 1px solid var(--divider-color);
+    background-color: var(--theme-comp-header-color);
+    border: 1px solid var(--theme-divider-color);
     border-radius: 0.5rem;
   }
 
   .error {
     color: var(--system-error-color);
     fill: var(--system-error-color);
-    background-color: var(--accent-bg-color);
+    background-color: var(--theme-comp-header-color);
     border-color: var(--system-error-60-color);
   }
 </style>
diff --git a/plugins/recruit-resources/src/components/CreateCandidate.svelte b/plugins/recruit-resources/src/components/CreateCandidate.svelte
index 3b9626398a..848a96b4f9 100644
--- a/plugins/recruit-resources/src/components/CreateCandidate.svelte
+++ b/plugins/recruit-resources/src/components/CreateCandidate.svelte
@@ -585,6 +585,8 @@
       focusIndex={10}
       bind:value={object.channels}
       highlighted={matchedChannels.map((it) => it.provider)}
+      kind={'link-bordered'}
+      size={'large'}
     />
     <YesNo
       disabled={loading}
@@ -592,6 +594,8 @@
       label={recruit.string.Onsite}
       tooltip={recruit.string.WorkLocationPreferences}
       bind:value={object.onsite}
+      kind={'link-bordered'}
+      size={'large'}
     />
     <YesNo
       disabled={loading}
@@ -599,6 +603,8 @@
       label={recruit.string.Remote}
       tooltip={recruit.string.WorkLocationPreferences}
       bind:value={object.remote}
+      kind={'link-bordered'}
+      size={'large'}
     />
     <Component
       is={tags.component.TagsDropdownEditor}
@@ -611,7 +617,9 @@
         showTitle: false,
         elements,
         newElements,
-        countLabel: recruit.string.NumberSkills
+        countLabel: recruit.string.NumberSkills,
+        kind: 'link-bordered',
+        size: 'large'
       }}
       on:open={(evt) => {
         addTagRef(evt.detail)
@@ -621,8 +629,7 @@
       }}
     />
     {#if object.skills.length > 0}
-      <div class="flex-break" />
-      <div class="antiComponent antiEmphasized flex-grow mt-2">
+      <div class="antiComponent antiEmphasized w-full flex-grow mt-2">
         <Component
           is={tags.component.TagsEditor}
           props={{
@@ -730,8 +737,8 @@
   .resume {
     margin: -0.375rem 0rem -0.375rem -0.375rem;
     padding: 0.375rem;
-    background: var(--accent-bg-color);
-    border: 1px dashed var(--divider-color);
+    background: var(--theme-comp-header-color);
+    border: 1px dashed var(--theme-divider-color);
     border-radius: 0.5rem;
 
     &.solid {
@@ -740,8 +747,8 @@
   }
   .skills-box {
     padding: 0.5rem 0.75rem;
-    background: var(--accent-bg-color);
-    border: 1px dashed var(--divider-color);
+    background: var(--theme-comp-header-color);
+    border: 1px dashed var(--theme-divider-color);
     border-radius: 0.5rem;
   }
 </style>
diff --git a/plugins/recruit-resources/src/components/Organizations.svelte b/plugins/recruit-resources/src/components/Organizations.svelte
index 34f1fd7656..2e852116e0 100644
--- a/plugins/recruit-resources/src/components/Organizations.svelte
+++ b/plugins/recruit-resources/src/components/Organizations.svelte
@@ -17,16 +17,7 @@
   import core, { Doc, DocumentQuery, Ref } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { Applicant, Vacancy } from '@hcengineering/recruit'
-  import {
-    Button,
-    deviceOptionsStore as deviceInfo,
-    Icon,
-    IconAdd,
-    Label,
-    Loading,
-    SearchEdit,
-    showPopup
-  } from '@hcengineering/ui'
+  import { Button, ActionIcon, IconMoreH, Label, Loading, SearchEdit, showPopup, IconAdd } from '@hcengineering/ui'
   import view, { BuildModelKey, Viewlet, ViewletPreference } from '@hcengineering/view'
   import {
     FilterBar,
@@ -230,34 +221,29 @@
     return result
   }
 
-  $: twoRows = $deviceInfo.twoRows
+  // $: twoRows = $deviceInfo.twoRows
 
   $: viewOptions = getViewOptions(descr, $viewOptionStore)
 </script>
 
-<div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
-  <div class:ac-header-full={!twoRows} class:flex-between={twoRows}>
-    <div class="ac-header__wrap-title mr-3">
-      <div class="ac-header__icon"><Icon icon={recruit.icon.Vacancy} size={'small'} /></div>
-      <span class="ac-header__title"><Label label={recruit.string.Organizations} /></span>
-      <div class="ml-4"><FilterButton _class={recruit.class.Vacancy} /></div>
-    </div>
-    <SearchEdit
-      bind:value={search}
-      on:change={(e) => {
-        search = e.detail
-      }}
-    />
+<div class="ac-header full divide">
+  <div class="ac-header__wrap-title mr-3">
+    <span class="ac-header__title"><Label label={recruit.string.Organizations} /></span>
   </div>
-  <div class="ac-header-full" class:secondRow={twoRows}>
-    <Button
-      icon={IconAdd}
-      label={recruit.string.CompanyCreateLabel}
-      size={'small'}
-      kind={'primary'}
-      on:click={showCreateDialog}
-    />
+  <div class="clear-mins mb-1">
+    <Button icon={IconAdd} label={recruit.string.CompanyCreateLabel} kind={'primary'} on:click={showCreateDialog} />
+  </div>
+</div>
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <SearchEdit bind:value={search} on:change={(e) => (search = e.detail)} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
+    <div class="buttons-divider" />
+    <FilterButton _class={recruit.class.Vacancy} />
+  </div>
+  <div class="ac-header-full medium-gap">
     <ViewletSettingButton bind:viewOptions viewlet={descr} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
   </div>
 </div>
 
diff --git a/plugins/recruit-resources/src/components/Vacancies.svelte b/plugins/recruit-resources/src/components/Vacancies.svelte
index b681d270a5..8a7cae5a9d 100644
--- a/plugins/recruit-resources/src/components/Vacancies.svelte
+++ b/plugins/recruit-resources/src/components/Vacancies.svelte
@@ -18,14 +18,14 @@
   import { Vacancy } from '@hcengineering/recruit'
   import {
     Button,
-    Icon,
-    IconAdd,
+    ActionIcon,
+    IconMoreH,
     Label,
     Loading,
     SearchEdit,
-    deviceOptionsStore as deviceInfo,
     showPopup,
-    tableToCSV
+    tableToCSV,
+    IconAdd
   } from '@hcengineering/ui'
   import view, { BuildModelKey, Viewlet, ViewletPreference } from '@hcengineering/view'
   import {
@@ -157,37 +157,18 @@
     return result
   }
 
-  $: twoRows = $deviceInfo.twoRows
+  // $: twoRows = $deviceInfo.twoRows
 
   $: viewOptions = getViewOptions(descr, $viewOptionStore)
 </script>
 
-<div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
-  <div class:ac-header-full={!twoRows} class:flex-between={twoRows}>
-    <div class="ac-header__wrap-title mr-3">
-      <div class="ac-header__icon"><Icon icon={recruit.icon.Vacancy} size={'small'} /></div>
-      <span class="ac-header__title"><Label label={recruit.string.Vacancies} /></span>
-      <div class="ml-4"><FilterButton _class={recruit.class.Vacancy} /></div>
-    </div>
-    <SearchEdit
-      bind:value={search}
-      on:change={(e) => {
-        search = e.detail
-      }}
-    />
+<div class="ac-header full divide">
+  <div class="ac-header__wrap-title mr-3">
+    <span class="ac-header__title"><Label label={recruit.string.Vacancies} /></span>
   </div>
-  <div class="ac-header-full" class:secondRow={twoRows}>
-    <Button
-      icon={IconAdd}
-      label={recruit.string.VacancyCreateLabel}
-      size={'small'}
-      kind={'primary'}
-      on:click={showCreateDialog}
-    />
-    <ViewletSettingButton bind:viewOptions viewlet={descr} />
+  <div class="ac-header-full medium-gap mb-1">
     <Button
       label={recruit.string.Export}
-      size={'small'}
       on:click={() => {
         // Download it
         const filename = 'vacancies' + new Date().toLocaleDateString() + '.csv'
@@ -204,6 +185,19 @@
         document.body.removeChild(link)
       }}
     />
+    <Button icon={IconAdd} label={recruit.string.VacancyCreateLabel} kind={'primary'} on:click={showCreateDialog} />
+  </div>
+</div>
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <SearchEdit bind:value={search} on:change={(e) => (search = e.detail)} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
+    <div class="buttons-divider" />
+    <FilterButton _class={recruit.class.Vacancy} />
+  </div>
+  <div class="ac-header-full medium-gap">
+    <ViewletSettingButton bind:viewOptions viewlet={descr} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
   </div>
 </div>
 
diff --git a/plugins/tags-resources/src/components/CategoryBar.svelte b/plugins/tags-resources/src/components/CategoryBar.svelte
index 268a51e5b2..15fed0225c 100644
--- a/plugins/tags-resources/src/components/CategoryBar.svelte
+++ b/plugins/tags-resources/src/components/CategoryBar.svelte
@@ -154,7 +154,7 @@
 </script>
 
 {#if visibleCategories.length > 0}
-  <div class="flex-between header">
+  <div class="ac-header full divide">
     <div class="buttons-group small-gap">
       <Button
         label={tags.string.AllCategories}
diff --git a/plugins/tags-resources/src/components/LabelsPresenter.svelte b/plugins/tags-resources/src/components/LabelsPresenter.svelte
index e9aac1acfd..b75a003e68 100644
--- a/plugins/tags-resources/src/components/LabelsPresenter.svelte
+++ b/plugins/tags-resources/src/components/LabelsPresenter.svelte
@@ -11,7 +11,7 @@
   export let object: WithLookup<Doc>
   export let full: boolean
   export let ckeckFilled: boolean = false
-  export let kind: 'short' | 'full' = 'short'
+  export let kind: 'short' | 'full' | 'list' = 'short'
   export let isEditable: boolean = false
   export let action: (evt: MouseEvent) => Promise<void> | void = async () => {}
   export let compression: boolean = false
@@ -46,27 +46,35 @@
   })
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div
-  class="labels-container"
-  style:justify-content={kind === 'short' ? 'space-between' : 'flex-start'}
-  class:w-full={kind === 'full'}
-  style:flex-wrap={kind === 'short' || compression ? 'nowrap' : 'wrap'}
-  style:flex-shrink={compression ? 1 : 0}
-  use:resizeObserver={(element) => {
-    allWidth = element.clientWidth
-  }}
-  on:click|stopPropagation={(evt) => {
-    if (isEditable) tagsHandler(evt)
-    else action(evt)
-  }}
->
-  {#each items as value, i}
-    <div class="label-box wrap-{kind}" title={value.title}>
-      <TagReferencePresenter attr={undefined} {value} kind={'kanban-labels'} bind:realWidth={widths[i]} />
+{#if kind === 'list'}
+  {#each items as value}
+    <div class="label-box no-shrink" title={value.title}>
+      <TagReferencePresenter attr={undefined} {value} kind={'labels'} />
     </div>
   {/each}
-</div>
+{:else}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div
+    class="labels-container"
+    style:justify-content={kind === 'short' ? 'space-between' : 'flex-start'}
+    class:w-full={kind === 'full'}
+    style:flex-wrap={kind === 'short' || compression ? 'nowrap' : 'wrap'}
+    style:flex-shrink={compression ? 1 : 0}
+    use:resizeObserver={(element) => {
+      allWidth = element.clientWidth
+    }}
+    on:click|stopPropagation={(evt) => {
+      if (isEditable) tagsHandler(evt)
+      else action(evt)
+    }}
+  >
+    {#each items as value, i}
+      <div class="label-box wrap-{kind}" title={value.title}>
+        <TagReferencePresenter attr={undefined} {value} kind={'kanban-labels'} bind:realWidth={widths[i]} />
+      </div>
+    {/each}
+  </div>
+{/if}
 
 <style lang="scss">
   .labels-container {
@@ -87,7 +95,7 @@
     border-radius: 0.25rem;
     transition: box-shadow 0.15s ease-in-out;
 
-    &:last-child {
+    &:not(.no-shrink):last-child {
       flex-shrink: 0;
     }
   }
diff --git a/plugins/tags-resources/src/components/TagReferencePresenter.svelte b/plugins/tags-resources/src/components/TagReferencePresenter.svelte
index cbb148e112..b7faedb8fa 100644
--- a/plugins/tags-resources/src/components/TagReferencePresenter.svelte
+++ b/plugins/tags-resources/src/components/TagReferencePresenter.svelte
@@ -74,11 +74,12 @@
     align-items: center;
     flex-shrink: 0;
     padding-left: 0.5rem;
-    height: 1.5rem;
+    height: 1.75rem;
     min-width: 0;
     min-height: 0;
-    border: 1px solid var(--divider-color);
-    border-radius: 0.75rem;
+    background-color: var(--theme-list-button-color);
+    border: 1px solid var(--theme-button-border);
+    border-radius: 1.5rem;
 
     .btn-close {
       flex-shrink: 0;
diff --git a/plugins/tags-resources/src/components/TagsView.svelte b/plugins/tags-resources/src/components/TagsView.svelte
index 4a5ca00e21..9c3e5372c8 100644
--- a/plugins/tags-resources/src/components/TagsView.svelte
+++ b/plugins/tags-resources/src/components/TagsView.svelte
@@ -17,12 +17,21 @@
   import { Asset, IntlString, translate } from '@hcengineering/platform'
   import { createQuery } from '@hcengineering/presentation'
   import { TagCategory, TagElement } from '@hcengineering/tags'
-  import { AnySvelteComponent, Button, Icon, IconAdd, Label, SearchEdit, showPopup } from '@hcengineering/ui'
+  import {
+    AnySvelteComponent,
+    Button,
+    ActionIcon,
+    IconMoreH,
+    Label,
+    SearchEdit,
+    showPopup,
+    IconAdd
+  } from '@hcengineering/ui'
   import { TableBrowser } from '@hcengineering/view-resources'
   import tags from '../plugin'
   import CategoryBar from './CategoryBar.svelte'
   import CreateTagElement from './CreateTagElement.svelte'
-  import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
+  // import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
 
   export let title: IntlString = tags.string.Tags
   export let icon: Asset | AnySvelteComponent = tags.icon.Tags
@@ -86,25 +95,22 @@
     (tagElements?.get(b._id as Ref<TagElement>)?.count ?? 0) -
       (tagElements?.get(a._id as Ref<TagElement>)?.count ?? 0) ?? 0
 
-  $: twoRows = $deviceInfo.twoRows
+  // $: twoRows = $deviceInfo.twoRows
 </script>
 
-<div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
-  <div class:ac-header-full={!twoRows} class:flex-between={twoRows}>
-    <div class="ac-header__wrap-title mr-3">
-      <div class="ac-header__icon"><Icon {icon} size={'small'} /></div>
-      <span class="ac-header__title"><Label label={title} /></span>
-    </div>
-
-    <SearchEdit
-      bind:value={search}
-      on:change={() => {
-        updateResultQuery(search, category)
-      }}
-    />
+<div class="ac-header full divide">
+  <div class="ac-header__wrap-title mr-3">
+    <span class="ac-header__title"><Label label={title} /></span>
   </div>
-  <div class="ac-header-full" class:secondRow={twoRows}>
-    <Button icon={IconAdd} label={сreateItemLabel} kind={'primary'} size={'small'} on:click={showCreateDialog} />
+
+  <div class="clear-mins mb-1">
+    <Button icon={IconAdd} label={сreateItemLabel} kind={'primary'} on:click={showCreateDialog} />
+  </div>
+</div>
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <SearchEdit bind:value={search} on:change={() => updateResultQuery(search, category)} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
   </div>
 </div>
 
diff --git a/plugins/task-assets/assets/icons.svg b/plugins/task-assets/assets/icons.svg
index 4d26e20ad5..b5df454c64 100644
--- a/plugins/task-assets/assets/icons.svg
+++ b/plugins/task-assets/assets/icons.svg
@@ -5,13 +5,8 @@
       <path d="M19.2,11.4c-0.3,0-0.6,0.3-0.6,0.6v6.6c0,0.7-0.5,1.3-1.2,1.3H4.8c-0.7,0-1.2-0.6-1.2-1.3V5.4 c0-0.7,0.5-1.3,1.2-1.3h9.9c0.3,0,0.6-0.3,0.6-0.6S15,2.9,14.7,2.9H4.8C3.5,2.9,2.4,4,2.4,5.4v13.2c0,1.4,1.1,2.5,2.4,2.5h12.6 c1.3,0,2.4-1.1,2.4-2.5V12C19.8,11.7,19.5,11.4,19.2,11.4z"/>
     </g>
   </symbol>
-  <symbol id="kanban" viewBox="0 0 16 16">
-    <path d="M1 2.6C1 2.03995 1 1.75992 1.10899 1.54601C1.20487 1.35785 1.35785 1.20487 1.54601 1.10899C1.75992 1 2.03995 1 2.6 1H5.4C5.96005 1 6.24008 1 6.45399 1.10899C6.64215 1.20487 6.79513 1.35785 6.89101 1.54601C7 1.75992 7 2.03995 7 2.6V3.4C7 3.96005 7 4.24008 6.89101 4.45399C6.79513 4.64215 6.64215 4.79513 6.45399 4.89101C6.24008 5 5.96005 5 5.4 5H2.6C2.03995 5 1.75992 5 1.54601 4.89101C1.35785 4.79513 1.20487 4.64215 1.10899 4.45399C1 4.24008 1 3.96005 1 3.4V2.6Z" />
-    <path d="M9 2.6C9 2.03995 9 1.75992 9.10899 1.54601C9.20487 1.35785 9.35785 1.20487 9.54601 1.10899C9.75992 1 10.0399 1 10.6 1H13.4C13.9601 1 14.2401 1 14.454 1.10899C14.6422 1.20487 14.7951 1.35785 14.891 1.54601C15 1.75992 15 2.03995 15 2.6V3.4C15 3.96005 15 4.24008 14.891 4.45399C14.7951 4.64215 14.6422 4.79513 14.454 4.89101C14.2401 5 13.9601 5 13.4 5H10.6C10.0399 5 9.75992 5 9.54601 4.89101C9.35785 4.79513 9.20487 4.64215 9.10899 4.45399C9 4.24008 9 3.96005 9 3.4V2.6Z" />
-    <path d="M1 7.6C1 7.03995 1 6.75992 1.10899 6.54601C1.20487 6.35785 1.35785 6.20487 1.54601 6.10899C1.75992 6 2.03995 6 2.6 6H5.4C5.96005 6 6.24008 6 6.45399 6.10899C6.64215 6.20487 6.79513 6.35785 6.89101 6.54601C7 6.75992 7 7.03995 7 7.6V8.4C7 8.96005 7 9.24008 6.89101 9.45399C6.79513 9.64215 6.64215 9.79513 6.45399 9.89101C6.24008 10 5.96005 10 5.4 10H2.6C2.03995 10 1.75992 10 1.54601 9.89101C1.35785 9.79513 1.20487 9.64215 1.10899 9.45399C1 9.24008 1 8.96005 1 8.4V7.6Z" />
-    <path d="M9 7.6C9 7.03995 9 6.75992 9.10899 6.54601C9.20487 6.35785 9.35785 6.20487 9.54601 6.10899C9.75992 6 10.0399 6 10.6 6H13.4C13.9601 6 14.2401 6 14.454 6.10899C14.6422 6.20487 14.7951 6.35785 14.891 6.54601C15 6.75992 15 7.03995 15 7.6V8.4C15 8.96005 15 9.24008 14.891 9.45399C14.7951 9.64215 14.6422 9.79513 14.454 9.89101C14.2401 10 13.9601 10 13.4 10H10.6C10.0399 10 9.75992 10 9.54601 9.89101C9.35785 9.79513 9.20487 9.64215 9.10899 9.45399C9 9.24008 9 8.96005 9 8.4V7.6Z" />
-    <path d="M1 12.6C1 12.0399 1 11.7599 1.10899 11.546C1.20487 11.3578 1.35785 11.2049 1.54601 11.109C1.75992 11 2.03995 11 2.6 11H5.4C5.96005 11 6.24008 11 6.45399 11.109C6.64215 11.2049 6.79513 11.3578 6.89101 11.546C7 11.7599 7 12.0399 7 12.6V13.4C7 13.9601 7 14.2401 6.89101 14.454C6.79513 14.6422 6.64215 14.7951 6.45399 14.891C6.24008 15 5.96005 15 5.4 15H2.6C2.03995 15 1.75992 15 1.54601 14.891C1.35785 14.7951 1.20487 14.6422 1.10899 14.454C1 14.2401 1 13.9601 1 13.4V12.6Z" />
-    <path d="M9 12.6C9 12.0399 9 11.7599 9.10899 11.546C9.20487 11.3578 9.35785 11.2049 9.54601 11.109C9.75992 11 10.0399 11 10.6 11H13.4C13.9601 11 14.2401 11 14.454 11.109C14.6422 11.2049 14.7951 11.3578 14.891 11.546C15 11.7599 15 12.0399 15 12.6V13.4C15 13.9601 15 14.2401 14.891 14.454C14.7951 14.6422 14.6422 14.7951 14.454 14.891C14.2401 15 13.9601 15 13.4 15H10.6C10.0399 15 9.75992 15 9.54601 14.891C9.35785 14.7951 9.20487 14.6422 9.10899 14.454C9 14.2401 9 13.9601 9 13.4V12.6Z" />
+  <symbol id="kanban" viewBox="0 0 20 20">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 12.5H3.75L3.75 16.25H7.5V12.5ZM7.5 3.75H3.75L3.75 7.5H7.5V3.75ZM16.25 12.5H12.5V16.25H16.25V12.5ZM16.25 3.75H12.5V7.5H16.25V3.75ZM3.75 2.5C3.05964 2.5 2.5 3.05964 2.5 3.75V7.5C2.5 8.19036 3.05964 8.75 3.75 8.75H7.5C8.19036 8.75 8.75 8.19036 8.75 7.5V3.75C8.75 3.05964 8.19036 2.5 7.5 2.5H3.75ZM3.75 11.25C3.05964 11.25 2.5 11.8096 2.5 12.5V16.25C2.5 16.9404 3.05964 17.5 3.75 17.5H7.5C8.19036 17.5 8.75 16.9404 8.75 16.25V12.5C8.75 11.8096 8.19036 11.25 7.5 11.25H3.75ZM11.25 12.5C11.25 11.8096 11.8096 11.25 12.5 11.25H16.25C16.9404 11.25 17.5 11.8096 17.5 12.5V16.25C17.5 16.9404 16.9404 17.5 16.25 17.5H12.5C11.8096 17.5 11.25 16.9404 11.25 16.25V12.5ZM12.5 2.5C11.8096 2.5 11.25 3.05964 11.25 3.75V7.5C11.25 8.19036 11.8096 8.75 12.5 8.75H16.25C16.9404 8.75 17.5 8.19036 17.5 7.5V3.75C17.5 3.05964 16.9404 2.5 16.25 2.5H12.5Z" />
   </symbol>
   <symbol id='todo-check' viewBox="0 0 16 16">
     <path d="M8,14.5c-3.6,0-6.5-2.9-6.5-6.5S4.4,1.5,8,1.5s6.5,2.9,6.5,6.5S11.6,14.5,8,14.5z M8,2.5C5,2.5,2.5,5,2.5,8 c0,3,2.5,5.5,5.5,5.5c3,0,5.5-2.5,5.5-5.5C13.5,5,11,2.5,8,2.5z"/>
diff --git a/plugins/task-resources/src/components/AssignedTasks.svelte b/plugins/task-resources/src/components/AssignedTasks.svelte
index 9f2b9a5dd9..81469789fb 100644
--- a/plugins/task-resources/src/components/AssignedTasks.svelte
+++ b/plugins/task-resources/src/components/AssignedTasks.svelte
@@ -18,7 +18,7 @@
   import { createQuery, getClient } from '@hcengineering/presentation'
   import tags, { selectedTagElements, TagCategory, TagElement } from '@hcengineering/tags'
   import { DoneState, Task } from '@hcengineering/task'
-  import { Component, Icon, Label, SearchEdit } from '@hcengineering/ui'
+  import { Component, Label, SearchEdit } from '@hcengineering/ui'
   import { TableBrowser } from '@hcengineering/view-resources'
   import task from '../plugin'
 
@@ -70,9 +70,8 @@
   const handleChange = (evt: any) => updateCategory(evt.detail)
 </script>
 
-<div class="ac-header full">
+<div class="ac-header full divide caption-height">
   <div class="ac-header__wrap-title">
-    <div class="ac-header__icon"><Icon icon={task.icon.Task} size={'small'} /></div>
     <span class="ac-header__title"><Label label={labelTasks} /></span>
   </div>
 
diff --git a/plugins/task-resources/src/components/Dashboard.svelte b/plugins/task-resources/src/components/Dashboard.svelte
index f2ee3f6a49..bf65637e49 100644
--- a/plugins/task-resources/src/components/Dashboard.svelte
+++ b/plugins/task-resources/src/components/Dashboard.svelte
@@ -143,8 +143,9 @@
   $: updateDocs(_class, states, resultQuery)
 </script>
 
+<div class="min-h-4 max-h-4 h-4 flex-no-shrink" />
 <CreateFilter bind:value={modified} />
 
-<div class="ml-10 mt-4">
+<div class="mx-10 mt-4">
   <BarDashboard {items} />
 </div>
diff --git a/plugins/task-resources/src/components/StatusTableView.svelte b/plugins/task-resources/src/components/StatusTableView.svelte
index d6b0f23e95..8c6981925a 100644
--- a/plugins/task-resources/src/components/StatusTableView.svelte
+++ b/plugins/task-resources/src/components/StatusTableView.svelte
@@ -145,18 +145,17 @@
   }
 </script>
 
-<div class="header">
+<div class="ac-header full divide">
   <TabList
     items={[
       { id: 'AllStates', labelIntl: task.string.AllStates },
       { id: 'DoneStates', labelIntl: task.string.DoneStates }
     ]}
     multiselect={false}
-    size={'small'}
     on:select={handleSelect}
   />
   {#if doneStatusesView}
-    <TabList items={itemsDS} bind:selected={selectedDS} multiselect on:select={handleDoneSelect} size={'small'} />
+    <TabList items={itemsDS} bind:selected={selectedDS} multiselect on:select={handleDoneSelect} />
   {:else}
     <StatesBar bind:state {space} gap={'none'} on:change={() => updateQuery(query, selectedDoneStates)} />
   {/if}
@@ -171,20 +170,4 @@
     min-height: 0;
     height: 100%;
   }
-
-  .header {
-    display: grid;
-    grid-template-columns: auto auto;
-    justify-content: space-between;
-    align-items: center;
-    column-gap: 1rem;
-    padding: 0.75rem 0.75rem 0.75rem 2.5rem;
-    width: 100%;
-    min-height: 3.25rem;
-    min-width: 0;
-    background-color: var(--board-bg-color);
-
-    border-top: 1px solid var(--divider-color);
-    // border-bottom: 1px solid var(--divider-color);
-  }
 </style>
diff --git a/plugins/tracker-assets/assets/icons.svg b/plugins/tracker-assets/assets/icons.svg
index 25958e8702..a1d7131f4c 100644
--- a/plugins/tracker-assets/assets/icons.svg
+++ b/plugins/tracker-assets/assets/icons.svg
@@ -84,29 +84,27 @@
     <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M7,14c3.9,0,7-3.1,7-7c0-3.9-3.1-7-7-7C3.1,0,0,3.1,0,7C0,10.9,3.1,14,7,14z M5,4C4.7,3.7,4.3,3.7,4,4S3.7,4.7,4,5l2,2L4,9C3.7,9.3,3.7,9.7,4,10c0.3,0.3,0.8,0.3,1.1,0l2-2l2,2c0.3,0.3,0.8,0.3,1.1,0c0.3-0.3,0.3-0.8,0-1.1l-2-2l2-2c0.3-0.3,0.3-0.8,0-1.1C9.7,3.7,9.3,3.7,9,4l-2,2L5,4z" />
   </symbol>
 
-  <symbol id="priority-nopriority" viewBox="0 0 14 14">
-    <rect width="2" height="2" rx="1" transform="matrix(-1 0 0 1 5 6)" />
-    <rect width="2" height="2" rx="1" transform="matrix(-1 0 0 1 8 6)" />
-    <rect width="2" height="2" rx="1" transform="matrix(-1 0 0 1 11 6)" />
+  <symbol id="priority-nopriority" viewBox="0 0 16 16">
+    <rect opacity="0.6" x="2" y="7.5" width="12" height="1" rx="0.5" />
   </symbol>
   <symbol id="priority-urgent" viewBox="-1 -1 16 16">
     <path fill="var(--warning-color)" d="M2 0a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V2a2 2 0 00-2-2H2zm3.914 3h1.738L7.5 8.602H6.07L5.914 3zm1.809 7.164a.95.95 0 01-.938.938.934.934 0 110-1.867c.5 0 .934.417.938.93z" />
   </symbol>
   <symbol id="priority-high" viewBox="0 0 16 16">
-    <rect x="1" y="8" width="3" height="6" rx="1" />
-    <rect x="6" y="5" width="3" height="9" rx="1" />
-    <rect x="11" y="2" width="3" height="12" rx="1" />
-  </symbol>
-  <symbol id="priority-medium" viewBox="0 0 16 16">
-    <rect x="1" y="8" width="3" height="6" rx="1" />
-    <rect x="6" y="5" width="3" height="9" rx="1" />
-    <rect x="11" y="2" width="3" height="12" rx="1" fill-opacity=".4" />
-  </symbol>
-  <symbol id="priority-low" viewBox="0 0 16 16">
-    <rect x="1" y="8" width="3" height="6" rx="1" />
+    <rect x="1" y="8" width="3" height="6" rx="1" fill-opacity=".4" />
     <rect x="6" y="5" width="3" height="9" rx="1" fill-opacity=".4" />
     <rect x="11" y="2" width="3" height="12" rx="1" fill-opacity=".4" />
   </symbol>
+  <symbol id="priority-medium" viewBox="0 0 16 16">
+    <rect x="1" y="8" width="3" height="6" rx="1" fill-opacity=".4" />
+    <rect x="6" y="5" width="3" height="9" rx="1" fill-opacity=".4" />
+    <rect x="11" y="2" width="3" height="12" rx="1" fill-opacity=".15" />
+  </symbol>
+  <symbol id="priority-low" viewBox="0 0 16 16">
+    <rect x="1" y="8" width="3" height="6" rx="1" fill-opacity=".4" />
+    <rect x="6" y="5" width="3" height="9" rx="1" fill-opacity=".15" />
+    <rect x="11" y="2" width="3" height="12" rx="1" fill-opacity=".15" />
+  </symbol>
 
   <symbol id="list" viewBox="0 0 16 16">
     <path d="M1 1.8C1 1.51997 1 1.37996 1.0545 1.273C1.10243 1.17892 1.17892 1.10243 1.273 1.0545C1.37996 1 1.51997 1 1.8 1H14.2C14.48 1 14.62 1 14.727 1.0545C14.8211 1.10243 14.8976 1.17892 14.9455 1.273C15 1.37996 15 1.51997 15 1.8V2.2C15 2.48003 15 2.62004 14.9455 2.727C14.8976 2.82108 14.8211 2.89757 14.727 2.9455C14.62 3 14.48 3 14.2 3H1.8C1.51997 3 1.37996 3 1.273 2.9455C1.17892 2.89757 1.10243 2.82108 1.0545 2.727C1 2.62004 1 2.48003 1 2.2V1.8Z" />
diff --git a/plugins/tracker-resources/src/components/ComponentSelector.svelte b/plugins/tracker-resources/src/components/ComponentSelector.svelte
index c836a24f7f..407d9a4e33 100644
--- a/plugins/tracker-resources/src/components/ComponentSelector.svelte
+++ b/plugins/tracker-resources/src/components/ComponentSelector.svelte
@@ -32,7 +32,8 @@
   export let justify: 'left' | 'center' = 'center'
   export let width: string | undefined = 'min-content'
   export let onlyIcon: boolean = false
-  export let enlargedText = false
+  export let enlargedText: boolean = false
+  export let short: boolean = false
 
   let selectedComponent: Component | undefined
   let defaultComponentLabel = ''
@@ -105,6 +106,7 @@
     icon={tracker.icon.Components}
     disabled={!isEditable}
     {loading}
+    {short}
     on:click={handleComponentEditorOpened}
   />
 {:else}
@@ -117,6 +119,7 @@
     icon={tracker.icon.Components}
     disabled={!isEditable}
     {loading}
+    {short}
     on:click={handleComponentEditorOpened}
     ><svelte:fragment slot="content">
       <span
diff --git a/plugins/tracker-resources/src/components/ModeSelector.svelte b/plugins/tracker-resources/src/components/ModeSelector.svelte
index 20b70fa2ab..93a20476c5 100644
--- a/plugins/tracker-resources/src/components/ModeSelector.svelte
+++ b/plugins/tracker-resources/src/components/ModeSelector.svelte
@@ -1,51 +1,29 @@
 <script lang="ts">
   import { IntlString } from '@hcengineering/platform'
-  import { Button } from '@hcengineering/ui'
+  import { TabList } from '@hcengineering/ui'
 
   export let mode: string
   export let config: [string, IntlString, object][]
   export let onChange: (_mode: string) => void
 
-  function getButtonShape (i: number) {
-    if (config.length === 1) return 'round'
-    switch (i) {
-      case 0:
-        return 'rectangle-right'
-      case config.length - 1:
-        return 'rectangle-left'
-      default:
-        return 'rectangle'
+  $: modeList = config.map((c) => {
+    return {
+      id: c[0],
+      labelIntl: c[1],
+      action: () => onChange(c[0])
     }
-  }
+  })
 </script>
 
-<div class="itemsContainer">
-  {#each config as [_mode, label, params], i}
-    <div class="buttonWrapper">
-      <Button
-        {label}
-        labelParams={params}
-        size="small"
-        on:click={() => onChange(_mode)}
-        selected={_mode === mode}
-        shape={getButtonShape(i)}
-      />
-    </div>
-  {/each}
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <TabList
+      items={modeList}
+      selected={mode}
+      kind={'normal'}
+      on:select={(result) => {
+        if (result.detail !== undefined && result.detail.action) result.detail.action()
+      }}
+    />
+  </div>
 </div>
-
-<style lang="scss">
-  .itemsContainer {
-    display: flex;
-    align-items: center;
-    padding: 0.65rem 1.35rem 0.65rem 2.25rem;
-    border-top: 1px solid var(--divider-color);
-  }
-  .buttonWrapper {
-    margin-right: 1px;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-</style>
diff --git a/plugins/tracker-resources/src/components/components/ComponentBrowser.svelte b/plugins/tracker-resources/src/components/components/ComponentBrowser.svelte
index c07e407caf..bf1916b42b 100644
--- a/plugins/tracker-resources/src/components/components/ComponentBrowser.svelte
+++ b/plugins/tracker-resources/src/components/components/ComponentBrowser.svelte
@@ -90,17 +90,27 @@
   const retrieveMembers = (p: Component) => p.members
 </script>
 
-<div class="fs-title flex-between header">
-  <div class="flex-center">
-    <Label {label} />
-    <div class="componentTitle">
+<div class="ac-header full divide caption-height">
+  <div class="ac-header__wrap-title mr-3">
+    <span class="ac-header__title"><Label {label} /></span>
+    <span class="componentTitle">
       › <Label label={title} />
-    </div>
+    </span>
+  </div>
+
+  <div class="ac-header-full medium-gap mb-1">
+    <TabList
+      items={viewList}
+      selected={viewMode}
+      on:select={(result) => {
+        if (result.detail !== undefined && result.detail.id !== viewMode) viewMode = result.detail.id
+      }}
+    />
+    <Button icon={IconAdd} label={tracker.string.Component} kind={'primary'} on:click={showCreateDialog} />
   </div>
-  <Button size="small" icon={IconAdd} label={tracker.string.Component} kind={'primary'} on:click={showCreateDialog} />
 </div>
-<div class="itemsContainer">
-  <div class="flex-row-center">
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
     <TabList
       items={modeList}
       selected={mode}
@@ -109,26 +119,9 @@
         if (result.detail !== undefined && result.detail.action) result.detail.action()
       }}
     />
-    <!-- <div class="ml-3 filterButton">
-      <BuComponet      size="small"
-        icon={IconAdd}
-        kind={'link-bordered'}
-        borderStyle={'dashed'}
-        label={tracker.string.Filter}
-        on:click={() => {}}
-      />
-    </div> -->
   </div>
-  <TabList
-    items={viewList}
-    selected={viewMode}
-    kind={'secondary'}
-    size={'small'}
-    on:select={(result) => {
-      if (result.detail !== undefined && result.detail.id !== viewMode) viewMode = result.detail.id
-    }}
-  />
 </div>
+
 <ComponentsListBrowser
   _class={tracker.class.Component}
   itemsConfig={[
diff --git a/plugins/tracker-resources/src/components/components/ComponentEditor.svelte b/plugins/tracker-resources/src/components/components/ComponentEditor.svelte
index db6a12e93f..6a8c4aac49 100644
--- a/plugins/tracker-resources/src/components/components/ComponentEditor.svelte
+++ b/plugins/tracker-resources/src/components/components/ComponentEditor.svelte
@@ -52,7 +52,7 @@
   <div
     class="clear-mins"
     class:minus-margin={kind === 'list-header'}
-    class:compression
+    class:label-wrapper={compression}
     use:tooltip={{ label: value.component ? tracker.string.MoveToComponent : tracker.string.AddToComponent }}
   >
     <ComponentSelector
@@ -67,6 +67,7 @@
       {onlyIcon}
       {enlargedText}
       value={value.component}
+      short={compression}
       onChange={handleComponentIdChanged}
     />
   </div>
@@ -76,8 +77,4 @@
   .minus-margin {
     margin-left: -0.5rem;
   }
-  .compression {
-    flex-shrink: 5;
-    min-width: 1rem;
-  }
 </style>
diff --git a/plugins/tracker-resources/src/components/icons/StatusIcon.svelte b/plugins/tracker-resources/src/components/icons/StatusIcon.svelte
index 719c9c0581..e54a90ad66 100644
--- a/plugins/tracker-resources/src/components/icons/StatusIcon.svelte
+++ b/plugins/tracker-resources/src/components/icons/StatusIcon.svelte
@@ -17,41 +17,57 @@
   {fill}
   id={category._id}
   style:transform={category._id === tracker.issueStatusCategory.Started ? 'rotate(-90deg)' : ''}
-  viewBox="0 0 14 14"
+  viewBox="0 0 16 16"
   xmlns="http://www.w3.org/2000/svg"
 >
   {#if category._id === tracker.issueStatusCategory.Backlog}
     <path
-      d="M13.9,7.9l-2-0.3c0-0.2,0-0.4,0-0.7s0-0.4,0-0.7l2-0.3C14,6.4,14,6.7,14,7S14,7.6,13.9,7.9z M13.5,4.3c-0.2-0.6-0.5-1.1-0.9-1.6L11,4c0.3,0.3,0.5,0.7,0.7,1.1L13.5,4.3z M11.3,1.4L10,3C9.7,2.8,9.3,2.5,8.9,2.4l0.8-1.8C10.2,0.8,10.8,1.1,11.3,1.4z M7.9,0.1L7.7,2C7.4,2,7.2,2,7,2S6.6,2,6.3,2l-0.3-2C6.4,0,6.7,0,7,0S7.6,0,7.9,0.1z M4.3,0.5l0.8,1.8C4.7,2.5,4.3,2.8,4,3L2.7,1.4C3.2,1.1,3.8,0.8,4.3,0.5z M1.4,2.7L3,4C2.8,4.3,2.5,4.7,2.4,5.1L0.5,4.3C0.8,3.8,1.1,3.2,1.4,2.7z M0.1,6.1C0,6.4,0,6.7,0,7s0,0.6,0.1,0.9l2-0.3C2,7.4,2,7.2,2,7s0-0.4,0-0.7L0.1,6.1z M0.5,9.7l1.8-0.8C2.5,9.3,2.8,9.7,3,10l-1.6,1.2C1.1,10.8,0.8,10.2,0.5,9.7z M2.7,12.6L4,11c0.3,0.3,0.7,0.5,1.1,0.7l-0.8,1.8C3.8,13.2,3.2,12.9,2.7,12.6z M6.1,13.9l0.3-2c0.2,0,0.4,0,0.7,0s0.4,0,0.7,0l0.3,2C7.6,14,7.3,14,7,14S6.4,14,6.1,13.9z M9.7,13.5l-0.8-1.8c0.4-0.2,0.8-0.4,1.1-0.7l1.2,1.6C10.8,12.9,10.2,13.2,9.7,13.5z M12.6,11.3L11,10c0.3-0.3,0.5-0.7,0.7-1.1l1.8,0.8C13.2,10.2,12.9,10.8,12.6,11.3z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.97975 1.07389C3.92356 1.52014 1.50831 3.94118 1.0708 7.0002H2.08287C2.50337 4.49345 4.47822 2.51374 6.9825 2.08599L6.97975 1.07389ZM8.98249 2.08014L8.97974 1.06812C12.055 1.49885 14.4896 3.92773 14.9291 7.0002H13.917C13.4945 4.48183 11.5033 2.4954 8.98249 2.08014ZM9.01467 13.9146C11.5201 13.4879 13.4962 11.5077 13.917 9.00019H14.929C14.4913 12.06 12.0748 14.4815 9.01742 14.9267L9.01467 13.9146ZM2.0829 9.0002C2.50529 11.5176 4.49522 13.5034 7.01468 13.9196L7.01743 14.9317C3.94351 14.4999 1.51022 12.0717 1.07083 9.0002H2.0829Z"
     />
   {:else if category._id === tracker.issueStatusCategory.Unstarted}
     <path
-      d="M7,0C3.1,0,0,3.1,0,7c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7C14,3.1,10.9,0,7,0z M7,12c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S9.8,12,7,12z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15Z"
     />
   {:else if category._id === tracker.issueStatusCategory.Started}
     <path
-      d="M7,0C3.1,0,0,3.1,0,7c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7C14,3.1,10.9,0,7,0z M7,12c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S9.8,12,7,12z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15Z"
     />
+
     {#if statusIcon.count && statusIcon.index}
       <path
-        d="M 3.5 3.5 L 7 3.5 A 3.5 3.5 0 {statusIcon.index > (statusIcon.count - 1) / 2 ? 1 : 0} 1 {Math.cos(
+        d="M 4.5 4.5 L 9 4.5 A 4.5 4.5 0 {statusIcon.index > (statusIcon.count - 1) / 2 ? 1 : 0} 1 {Math.cos(
           ((2 * Math.PI) / statusIcon.count) * statusIcon.index - 0.01
         ) *
-          3.5 +
-          3.5} {Math.sin(((2 * Math.PI) / statusIcon.count) * statusIcon.index - 0.01) * 3.5 + 3.5} Z"
+          4.5 +
+          4.5} {Math.sin(((2 * Math.PI) / statusIcon.count) * statusIcon.index - 0.01) * 4.5 + 4.5} Z"
         transform="translate(3.5,3.5)"
       />
     {:else}
-      <circle cx="7" cy="7" r="3.5" fill="var(--error-color)" opacity=".15" />
+      <circle cx="8" cy="8" r="4" fill="var(--error-color)" opacity=".15" />
     {/if}
   {:else if category._id === tracker.issueStatusCategory.Completed}
     <path
-      d="M7,0C3.1,0,0,3.1,0,7c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7C14,3.1,10.9,0,7,0z M9.9,3.9c0.3-0.3,0.8-0.3,1.2,0l0,0c0.3,0.3,0.3,0.9,0,1.2l-5,5c-0.3,0.3-0.9,0.3-1.2,0l-2-2c-0.3-0.3-0.3-0.9,0-1.2c0.2-0.2,0.4-0.2,0.6-0.2s0.4,0.1,0.6,0.2l1.4,1.4l4-4v0L9.9,3.9z"
+      d="M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7C15,4.1,11.9,1,8,1z M8,14c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S11.3,14,8,14z"
+    />
+    <path
+      d="M10.6,6.1L7.5,9.2L5.9,7.6c-0.2-0.2-0.6-0.2-0.8,0s-0.2,0.6,0,0.8l2,2c0.1,0.1,0.3,0.2,0.4,0.2s0.3-0.1,0.4-0.2l3.5-3.5c0.2-0.2,0.2-0.6,0-0.8S10.8,5.8,10.6,6.1z"
     />
   {:else if category._id === tracker.issueStatusCategory.Canceled}
     <path
-      style="fill-rule:evenodd;clip-rule:evenodd;"
-      d="M7,14c3.9,0,7-3.1,7-7c0-3.9-3.1-7-7-7C3.1,0,0,3.1,0,7C0,10.9,3.1,14,7,14z M5,4C4.7,3.7,4.3,3.7,4,4S3.7,4.7,4,5l2,2L4,9C3.7,9.3,3.7,9.7,4,10c0.3,0.3,0.8,0.3,1.1,0l2-2l2,2c0.3,0.3,0.8,0.3,1.1,0c0.3-0.3,0.3-0.8,0-1.1l-2-2l2-2c0.3-0.3,0.3-0.8,0-1.1C9.7,3.7,9.3,3.7,9,4l-2,2L5,4z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7C15,4.1,11.9,1,8,1z M8,14c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S11.3,14,8,14z"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M10.5,5.5c-0.2-0.2-0.6-0.2-0.8,0L8,7.2L6.3,5.5c-0.2-0.2-0.6-0.2-0.8,0s-0.2,0.6,0,0.8L7.2,8L5.5,9.7c-0.2,0.2-0.2,0.6,0,0.8s0.6,0.2,0.8,0L8,8.8l1.7,1.7c0.2,0.2,0.6,0.2,0.8,0c0.2-0.2,0.2-0.6,0-0.8L8.8,8l1.7-1.7C10.8,6.1,10.8,5.7,10.5,5.5z"
     />
   {/if}
 </svg>
diff --git a/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte b/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte
index 3dbc677862..34d63afd69 100644
--- a/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte
@@ -26,6 +26,7 @@
   export let shouldShowAvatar: boolean = false
   export let noUnderline = false
   export let inline = false
+  export let kind: 'list' | undefined = undefined
 
   // Extra properties
   export let projects: Map<Ref<Project>, Project> | undefined = undefined
@@ -48,7 +49,7 @@
 
 {#if value}
   <DocNavLink object={value} {onClick} {disableClick} {noUnderline} {inline} component={tracker.component.EditIssue}>
-    <span class="issuePresenterRoot" class:inline>
+    <span class="issuePresenterRoot" class:inline class:list={kind === 'list'}>
       {#if !inline && shouldShowAvatar}
         <div class="icon" use:tooltip={{ label: tracker.string.Issue }}>
           <Icon icon={tracker.icon.Issues} size={'small'} />
@@ -67,12 +68,17 @@
     align-items: center;
     flex-shrink: 0;
     max-width: 5rem;
-    color: var(--content-color);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     cursor: pointer;
 
+    &:not(.list) {
+      color: var(--theme-content-color);
+    }
+    &.list {
+      color: var(--theme-halfcontent-color);
+    }
     .icon {
       margin-right: 0.5rem;
       color: var(--dark-color);
diff --git a/plugins/tracker-resources/src/components/issues/IssuesHeader.svelte b/plugins/tracker-resources/src/components/issues/IssuesHeader.svelte
index 33315ca2cb..faafae270e 100644
--- a/plugins/tracker-resources/src/components/issues/IssuesHeader.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuesHeader.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { Ref, Space } from '@hcengineering/core'
-  import { Icon, TabList, SearchEdit } from '@hcengineering/ui'
+  import { ActionIcon, TabList, SearchEdit, IconMoreH } from '@hcengineering/ui'
   import { Viewlet } from '@hcengineering/view'
   import { FilterButton, setActiveViewletId } from '@hcengineering/view-resources'
   import tracker from '../../plugin'
   import { WithLookup } from '@hcengineering/core'
-  import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
+  // import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
 
   export let space: Ref<Space> | undefined = undefined
   export let viewlet: WithLookup<Viewlet> | undefined
@@ -22,30 +22,24 @@
     }
   })
 
-  $: twoRows = $deviceInfo.twoRows
+  // $: twoRows = $deviceInfo.twoRows
 </script>
 
-<div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
-  <div class:ac-header-full={!twoRows} class:flex-between={twoRows}>
-    <div class="ac-header__wrap-title mr-3">
-      {#if showLabelSelector}
-        <slot name="label_selector" />
-      {:else}
-        <div class="ac-header__icon"><Icon icon={tracker.icon.Issues} size={'small'} /></div>
-        <span class="ac-header__title">{label}</span>
-      {/if}
-      <div class="ml-4"><FilterButton _class={tracker.class.Issue} {space} /></div>
-    </div>
-    <SearchEdit bind:value={search} on:change={() => {}} />
+<div class="ac-header full divide">
+  <div class="ac-header__wrap-title">
+    {#if showLabelSelector}
+      <slot name="label_selector" />
+    {:else}
+      <span class="ac-header__title">{label}</span>
+    {/if}
   </div>
-  <div class="ac-header-full" class:secondRow={twoRows}>
+  <div class="mb-1 clear-mins">
     {#if viewlets.length > 1}
       <TabList
         items={viewslist}
         multiselect={false}
         selected={viewlet?._id}
-        kind={'secondary'}
-        size={'small'}
+        onlyIcons
         on:select={(result) => {
           if (result.detail !== undefined) {
             if (viewlet?._id === result.detail.id) return
@@ -56,6 +50,18 @@
         }}
       />
     {/if}
-    <slot name="extra" />
+    <slot name="header-tools" />
+  </div>
+</div>
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <SearchEdit bind:value={search} on:change={() => {}} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
+    <div class="buttons-divider" />
+    <FilterButton _class={tracker.class.Issue} {space} />
+  </div>
+  <div class="ac-header-full medium-gap">
+    <slot name="extra" />
+    <ActionIcon icon={IconMoreH} size={'small'} />
   </div>
 </div>
diff --git a/plugins/tracker-resources/src/components/issues/IssuesView.svelte b/plugins/tracker-resources/src/components/issues/IssuesView.svelte
index 23b65fd804..a1eded962e 100644
--- a/plugins/tracker-resources/src/components/issues/IssuesView.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuesView.svelte
@@ -110,8 +110,8 @@
     {/if}
   </svelte:fragment>
 </IssuesHeader>
-<slot name="afterHeader" />
 <FilterBar _class={tracker.class.Issue} query={searchQuery} {viewOptions} on:change={(e) => (resultQuery = e.detail)} />
+<slot name="afterHeader" />
 <div class="flex w-full h-full clear-mins">
   {#if viewlet}
     <IssuesContent {viewlet} query={resultQuery} {space} {viewOptions} />
diff --git a/plugins/tracker-resources/src/components/issues/KanbanView.svelte b/plugins/tracker-resources/src/components/issues/KanbanView.svelte
index 886c21217b..9e6075071b 100644
--- a/plugins/tracker-resources/src/components/issues/KanbanView.svelte
+++ b/plugins/tracker-resources/src/components/issues/KanbanView.svelte
@@ -386,12 +386,12 @@
 
   .header {
     padding-bottom: 0.75rem;
-    border-bottom: 1px solid var(--divider-color);
+    border-bottom: 1px solid var(--theme-divider-color);
 
     .label {
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
       .counter {
-        color: rgba(var(--caption-color), 0.8);
+        color: rgba(var(--theme-caption-color), 0.8);
       }
     }
   }
diff --git a/plugins/tracker-resources/src/components/issues/PriorityEditor.svelte b/plugins/tracker-resources/src/components/issues/PriorityEditor.svelte
index ab4446bc4f..953154d818 100644
--- a/plugins/tracker-resources/src/components/issues/PriorityEditor.svelte
+++ b/plugins/tracker-resources/src/components/issues/PriorityEditor.svelte
@@ -118,11 +118,11 @@
       flex-shrink: 0;
       width: 1rem;
       height: 1rem;
-      color: var(--content-color);
+      color: var(--theme-caption-color);
     }
     &:hover {
       .icon {
-        color: var(--caption-color) !important;
+        color: var(--theme-caption-color) !important;
       }
     }
   }
diff --git a/plugins/tracker-resources/src/components/issues/PriorityRefPresenter.svelte b/plugins/tracker-resources/src/components/issues/PriorityRefPresenter.svelte
index d3cbc2b07e..bfc3193bdd 100644
--- a/plugins/tracker-resources/src/components/issues/PriorityRefPresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/PriorityRefPresenter.svelte
@@ -19,6 +19,8 @@
 
   export let value: IssuePriority
   export let size: 'small' | 'medium' = 'small'
+  export let colorInherit: boolean = false
+  export let accent: boolean = false
   export let inline: boolean = false
 
   $: icon = issuePriorities[value]?.icon
@@ -27,9 +29,14 @@
 
 <div class="flex-presenter cursor-default">
   {#if !inline && icon}
-    <Icon {icon} {size} />
+    <Icon {icon} {size} fill={'var(--theme-caption-color)'} />
   {/if}
-  <span class="overflow-label" class:ml-2={!inline && icon}>
+  <span
+    class="overflow-label"
+    class:ml-2={!inline && icon}
+    style:color={colorInherit ? 'inherit' : 'var(--theme-content-color)'}
+    class:fs-bold={accent}
+  >
     <Label {label} />
   </span>
 </div>
diff --git a/plugins/tracker-resources/src/components/issues/StatusEditor.svelte b/plugins/tracker-resources/src/components/issues/StatusEditor.svelte
index 1db3a12cd8..d24f1d9323 100644
--- a/plugins/tracker-resources/src/components/issues/StatusEditor.svelte
+++ b/plugins/tracker-resources/src/components/issues/StatusEditor.svelte
@@ -99,9 +99,14 @@
 {#if value && statuses}
   {#if kind === 'list' || kind === 'list-header'}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div class="flex-row-center flex-no-shrink" class:cursor-pointer={isEditable} on:click={handleStatusEditorOpened}>
+    <div
+      class="flex-row-center flex-no-shrink"
+      class:fix-margin={kind === 'list'}
+      class:cursor-pointer={isEditable}
+      on:click={handleStatusEditorOpened}
+    >
       <div class="flex-center flex-no-shrink square-4">
-        {#if selectedStatus}<IssueStatusIcon value={selectedStatus} size={kind === 'list' ? 'inline' : 'medium'} />{/if}
+        {#if selectedStatus}<IssueStatusIcon value={selectedStatus} size={kind === 'list' ? 'small' : 'medium'} />{/if}
       </div>
       {#if selectedStatusLabel}
         <span
diff --git a/plugins/tracker-resources/src/components/issues/StatusPresenter.svelte b/plugins/tracker-resources/src/components/issues/StatusPresenter.svelte
index 40927657f8..3d9953448f 100644
--- a/plugins/tracker-resources/src/components/issues/StatusPresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/StatusPresenter.svelte
@@ -18,16 +18,34 @@
 
   export let value: IssueStatus | undefined
   export let size: 'small' | 'medium' = 'small'
+  export let kind: 'list-header' | undefined = undefined
+  export let colorInherit: boolean = false
+  export let accent: boolean = false
   export let inline: boolean = false
 </script>
 
 {#if value}
-  <div class="flex-presenter cursor-default">
+  <div class="flex-presenter cursor-default" style:color={'inherit'}>
     {#if !inline}
       <IssueStatusIcon {value} {size} />
     {/if}
-    <span class="overflow-label" class:ml-2={!inline}>
+    <span
+      class="overflow-label"
+      class:ml-2={!inline}
+      class:list-header={kind === 'list-header'}
+      class:colorInherit
+      class:fs-bold={accent}
+    >
       {value.name}
     </span>
   </div>
 {/if}
+
+<style lang="scss">
+  .list-header:not(.colorInherit) {
+    color: var(--theme-content-color);
+  }
+  .list-header.colorInherit {
+    color: inherit;
+  }
+</style>
diff --git a/plugins/tracker-resources/src/components/issues/StatusRefPresenter.svelte b/plugins/tracker-resources/src/components/issues/StatusRefPresenter.svelte
index ea3e8d1bac..8ebf78a56b 100644
--- a/plugins/tracker-resources/src/components/issues/StatusRefPresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/StatusRefPresenter.svelte
@@ -19,8 +19,17 @@
 
   export let value: Ref<Status> | StatusValue | undefined
   export let size: 'small' | 'medium' = 'medium'
+  export let kind: 'list-header' | undefined = undefined
+  export let colorInherit: boolean = false
+  export let accent: boolean = false
 </script>
 
 {#if value}
-  <StatusPresenter value={$statusStore.get(typeof value === 'string' ? value : value.values?.[0]?._id)} {size} />
+  <StatusPresenter
+    value={$statusStore.get(typeof value === 'string' ? value : value.values?.[0]?._id)}
+    {size}
+    {kind}
+    {colorInherit}
+    {accent}
+  />
 {/if}
diff --git a/plugins/tracker-resources/src/components/issues/TitlePresenter.svelte b/plugins/tracker-resources/src/components/issues/TitlePresenter.svelte
index 5bfaec4fb8..9c1689a259 100644
--- a/plugins/tracker-resources/src/components/issues/TitlePresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/TitlePresenter.svelte
@@ -22,6 +22,7 @@
   export let value: WithLookup<Issue>
   export let shouldUseMargin: boolean = false
   export let showParent = true
+  export let kind: 'list' | undefined = undefined
   export let onClick: (() => void) | undefined = undefined
 </script>
 
@@ -29,10 +30,11 @@
   <span
     class="name overflow-label select-text"
     class:with-margin={shouldUseMargin}
+    class:list={kind === 'list'}
     style:max-width={showParent ? `${value.parents.length !== 0 ? 95 : 100}%` : '100%'}
     title={value.title}
   >
-    <DocNavLink object={value} {onClick} component={tracker.component.EditIssue} inline shrink={1}>
+    <DocNavLink object={value} {onClick} component={tracker.component.EditIssue} inline shrink={1} colorInherit>
       {value.title}
     </DocNavLink>
   </span>
@@ -45,12 +47,15 @@
   .name {
     flex-shrink: 1;
     min-width: 1rem;
+
+    &.list {
+      color: var(--theme-caption-color);
+    }
     &:hover {
       text-decoration: underline;
     }
-
     &:active {
-      color: var(--accent-color);
+      color: var(--theme-content-color);
     }
   }
 
diff --git a/plugins/tracker-resources/src/components/issues/timereport/EstimationEditor.svelte b/plugins/tracker-resources/src/components/issues/timereport/EstimationEditor.svelte
index 2582dc8f84..e3807383d7 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/EstimationEditor.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/EstimationEditor.svelte
@@ -73,7 +73,7 @@
 
 {#if value}
   {#if kind === 'list' && '_class' in value}
-    <EstimationStatsPresenter {value} on:click={handleestimationEditorOpened} />
+    <EstimationStatsPresenter {value} {kind} on:click={handleestimationEditorOpened} />
   {:else}
     <Button
       showTooltip={isEditable ? { label: tracker.string.Estimation } : undefined}
diff --git a/plugins/tracker-resources/src/components/issues/timereport/EstimationProgressCircle.svelte b/plugins/tracker-resources/src/components/issues/timereport/EstimationProgressCircle.svelte
index a4e008eee7..49ead718ae 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/EstimationProgressCircle.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/EstimationProgressCircle.svelte
@@ -13,7 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { FernColor, FlamingoColor, IconSize, PlatinumColor } from '@hcengineering/ui'
+  import { FernColor, FlamingoColor, IconSize } from '@hcengineering/ui'
 
   export let value: number
   export let min: number = 0
@@ -21,7 +21,7 @@
   export let size: IconSize = 'small'
   export let primary: boolean = false
 
-  export let color: string = PlatinumColor
+  export let color: string = 'var(--theme-progress-color)'
   export let greenColor: string = FernColor
   export let overdueColor = FlamingoColor
 
@@ -29,7 +29,7 @@
   $: procC = lenghtC / (max - min)
   $: dashOffset = (Math.min(value, max) - min) * procC
 
-  $: color = value > max ? overdueColor : value === min ? color : greenColor
+  $: color = value > max ? overdueColor : value < max ? color : greenColor
 </script>
 
 <svg class="svg-{size}" fill="none" viewBox="0 0 16 16">
@@ -38,8 +38,8 @@
     cy={8}
     r={7}
     class="progress-circle"
-    style:stroke={'var(--divider-color)'}
-    style:opacity={'.5'}
+    style:stroke={'var(--theme-caption-color)'}
+    style:opacity={'.15'}
     style:transform={`rotate(${-78 + ((dashOffset + 1) * 360) / (lenghtC + 1)}deg)`}
     style:stroke-dasharray={lenghtC}
     style:stroke-dashoffset={dashOffset === 0 ? 0 : dashOffset + 3}
diff --git a/plugins/tracker-resources/src/components/issues/timereport/EstimationStatsPresenter.svelte b/plugins/tracker-resources/src/components/issues/timereport/EstimationStatsPresenter.svelte
index 96b54d29a1..39877f7d43 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/EstimationStatsPresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/EstimationStatsPresenter.svelte
@@ -22,6 +22,7 @@
 
   export let value: Issue | AttachedData<Issue>
   export let estimation: number | undefined = undefined
+  export let kind: 'normal' | 'list' = 'normal'
 
   $: _estimation = estimation ?? value.estimation
 
@@ -40,18 +41,24 @@
       max={childEstimationTime || _estimation}
     />
   </div>
-  <span class="overflow-label label flex-row-center flex-nowrap text-md">
+  <span class="overflow-label label flex-row-center flex-nowrap {kind}">
     {#if value.reportedTime > 0 || childReportTime > 0}
       {#if childReportTime}
         {@const rchildReportTime = childReportTime}
         {@const reportDiff = floorFractionDigits(rchildReportTime - value.reportedTime, 3)}
         {#if reportDiff !== 0 && value.reportedTime !== 0}
-          <div class="flex flex-nowrap mr-1" class:showError={reportDiff > 0}>
+          <div
+            class="flex flex-nowrap"
+            class:mr-1={kind !== 'list'}
+            class:showError={reportDiff > 0 && kind !== 'list'}
+          >
             <TimePresenter value={rchildReportTime} />
           </div>
-          <div class="romColor">
-            (<TimePresenter value={value.reportedTime} />)
-          </div>
+          {#if kind !== 'list'}
+            <div class="romColor">
+              (<TimePresenter value={value.reportedTime} />)
+            </div>
+          {/if}
         {:else if value.reportedTime === 0}
           <TimePresenter value={childReportTime} />
         {:else}
@@ -60,16 +67,20 @@
       {:else}
         <TimePresenter value={value.reportedTime} />
       {/if}
-      <div class="p-1">/</div>
+      <span>/</span>
     {/if}
     {#if childEstimationTime}
       {@const childEstTime = Math.round(childEstimationTime)}
       {@const estimationDiff = childEstTime - Math.round(_estimation)}
       {#if estimationDiff !== 0}
-        <div class="flex flex-nowrap mr-1" class:showWarning={estimationDiff !== 0}>
+        <div
+          class="flex flex-nowrap"
+          class:mr-1={kind !== 'list'}
+          class:showWarning={estimationDiff !== 0 && kind !== 'list'}
+        >
           <TimePresenter value={childEstTime} />
         </div>
-        {#if _estimation !== 0}
+        {#if _estimation !== 0 && kind !== 'list'}
           <div class="romColor">
             (<TimePresenter value={_estimation} />)
           </div>
@@ -98,17 +109,22 @@
       flex-shrink: 0;
       width: 1rem;
       height: 1rem;
-      color: var(--content-color);
+      color: var(--theme-dark-color);
     }
     .label {
-      margin-left: 0.5rem;
-      font-weight: 500;
       font-size: 0.8125rem;
-      color: var(--accent-color);
+      margin-left: 0.5rem;
+
+      &.normal {
+        color: var(--theme-content-color);
+      }
+      &.list {
+        color: var(--theme-halfcontent-color);
+      }
     }
     &:hover {
       .icon {
-        color: var(--caption-color) !important;
+        color: var(--theme-caption-color) !important;
       }
     }
 
@@ -119,7 +135,7 @@
       color: var(--warning-color) !important;
     }
     .romColor {
-      color: var(--content-color) !important;
+      color: var(--theme-content-color) !important;
     }
   }
 </style>
diff --git a/plugins/tracker-resources/src/components/issues/timereport/TimePresenter.svelte b/plugins/tracker-resources/src/components/issues/timereport/TimePresenter.svelte
index df80caa175..df5ee8d56d 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/TimePresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/TimePresenter.svelte
@@ -19,6 +19,7 @@
   export let id: string | undefined = undefined
   export let kind: 'link' | undefined = undefined
   export let value: number
+  export let noSymbol: boolean = false
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -31,7 +32,11 @@
     props: { label: tracker.string.TimeSpendHours, params: { value: floorFractionDigits(value * 8, 2) } }
   }}
 >
-  <Label label={tracker.string.TimeSpendValue} params={{ value: floorFractionDigits(value, 3) }} />
+  {#if noSymbol}
+    {floorFractionDigits(value, 3)}
+  {:else}
+    <Label label={tracker.string.TimeSpendValue} params={{ value: floorFractionDigits(value, 3) }} />
+  {/if}
 </span>
 
 <style lang="scss">
@@ -39,15 +44,15 @@
     white-space: nowrap;
 
     font-size: 0.8125rem;
-    color: var(--content-color);
+    color: var(--theme-content-color);
     cursor: pointer;
 
     &:hover {
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
       text-decoration: underline;
     }
     &:active {
-      color: var(--accent-color);
+      color: var(--theme-accent-color);
     }
   }
 </style>
diff --git a/plugins/tracker-resources/src/components/sprints/SprintBrowser.svelte b/plugins/tracker-resources/src/components/sprints/SprintBrowser.svelte
index 3467bd82d0..73317da140 100644
--- a/plugins/tracker-resources/src/components/sprints/SprintBrowser.svelte
+++ b/plugins/tracker-resources/src/components/sprints/SprintBrowser.svelte
@@ -17,7 +17,18 @@
   import { IntlString } from '@hcengineering/platform'
   import { createQuery } from '@hcengineering/presentation'
   import { Sprint } from '@hcengineering/tracker'
-  import { Button, IconAdd, Label, SearchEdit, resolvedLocationStore, showPopup } from '@hcengineering/ui'
+  import {
+    ActionIcon,
+    Button,
+    IconAdd,
+    IconMoreH,
+    Label,
+    SearchEdit,
+    TabItem,
+    TabList,
+    resolvedLocationStore,
+    showPopup
+  } from '@hcengineering/ui'
   import view, { Viewlet } from '@hcengineering/view'
   import {
     FilterBar,
@@ -108,74 +119,61 @@
 
     mode = newMode
   }
+
+  const modeList: TabItem[] = [
+    { id: 'all', labelIntl: tracker.string.AllSprints, action: () => handleViewModeChanged('all') },
+    { id: 'planned', labelIntl: tracker.string.PlannedSprints, action: () => handleViewModeChanged('planned') },
+    { id: 'active', labelIntl: tracker.string.ActiveSprints, action: () => handleViewModeChanged('active') },
+    { id: 'closed', labelIntl: tracker.string.ClosedSprints, action: () => handleViewModeChanged('closed') }
+  ]
 </script>
 
-<div class="fs-title flex-between header">
-  <div class="flex-row-center">
-    <Label {label} />
-    <div class="title">
+<div class="ac-header full divide caption-height">
+  <div class="ac-header__wrap-title mr-3">
+    <span class="ac-header__title"><Label {label} /></span>
+    <span class="componentTitle">
       › <Label label={title} />
-    </div>
-    <div class="ml-4">
-      <FilterButton _class={tracker.class.Issue} {space} />
-    </div>
+    </span>
   </div>
-  <div class="flex-row-center gap-2">
+
+  <div class="ac-header-full medium-gap mb-1">
+    <Button icon={IconAdd} label={tracker.string.Sprint} kind={'primary'} on:click={showCreateDialog} />
+  </div>
+</div>
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
     <SearchEdit bind:value={search} on:change={() => {}} />
-    <Button size="small" icon={IconAdd} label={tracker.string.Sprint} kind={'primary'} on:click={showCreateDialog} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
+    <div class="buttons-divider" />
+    <FilterButton _class={tracker.class.Issue} {space} />
+  </div>
+  <div class="ac-header-full medium-gap">
     {#if viewlet}
       <ViewletSettingButton bind:viewOptions {viewlet} />
+      <ActionIcon icon={IconMoreH} size={'small'} />
     {/if}
   </div>
 </div>
-<div class="itemsContainer">
-  <div class="flex-center">
-    <div class="flex-center">
-      <div class="buttonWrapper">
-        <Button
-          size="small"
-          shape="rectangle-right"
-          selected={mode === 'all'}
-          label={tracker.string.AllSprints}
-          on:click={() => handleViewModeChanged('all')}
-        />
-      </div>
-      <div class="buttonWrapper">
-        <Button
-          size="small"
-          shape="rectangle"
-          selected={mode === 'planned'}
-          label={tracker.string.PlannedSprints}
-          on:click={() => handleViewModeChanged('planned')}
-        />
-      </div>
-      <div class="buttonWrapper">
-        <Button
-          size="small"
-          shape="rectangle"
-          selected={mode === 'active'}
-          label={tracker.string.ActiveSprints}
-          on:click={() => handleViewModeChanged('active')}
-        />
-      </div>
-      <div class="buttonWrapper">
-        <Button
-          size="small"
-          shape="rectangle-left"
-          selected={mode === 'closed'}
-          label={tracker.string.ClosedSprints}
-          on:click={() => handleViewModeChanged('closed')}
-        />
-      </div>
-    </div>
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <TabList
+      items={modeList}
+      selected={mode}
+      kind={'normal'}
+      on:select={(result) => {
+        if (result.detail !== undefined && result.detail.action) result.detail.action()
+      }}
+    />
   </div>
 </div>
+
 <FilterBar
   _class={tracker.class.Sprint}
   query={searchQuery}
   {viewOptions}
   on:change={(e) => (resultQuery = e.detail)}
 />
+
 <div class="flex w-full h-full clear-mins">
   {#if viewlet}
     <SprintContent {viewlet} query={{ ...resultQuery, ...includedSprintsQuery }} {space} {viewOptions} />
diff --git a/plugins/tracker-resources/src/components/sprints/SprintEditor.svelte b/plugins/tracker-resources/src/components/sprints/SprintEditor.svelte
index f2e4ad6220..ff633a1f64 100644
--- a/plugins/tracker-resources/src/components/sprints/SprintEditor.svelte
+++ b/plugins/tracker-resources/src/components/sprints/SprintEditor.svelte
@@ -67,55 +67,78 @@
   $: twoRows = $deviceInfo.twoRows
 </script>
 
-<div
-  class="flex flex-wrap clear-mins"
-  class:minus-margin={kind === 'list-header'}
-  class:compression
-  style:flex-direction={twoRows ? 'column' : 'row'}
->
-  {#if (value.sprint && value.sprint !== $activeSprint && groupBy !== 'sprint') || shouldShowPlaceholder}
-    <div class="flex-row-center" class:minus-margin-vSpace={kind === 'list-header'} class:compression style:width>
+{#if value.sprint || sprint}
+  {#if kind === 'list'}
+    <div class="clear-mins" class:label-wrapper={compression}>
       <SprintSelector
         {kind}
         {size}
         {shape}
-        width={compression ? 'min-content' : width}
+        {width}
         {justify}
         {isEditable}
         {shouldShowLabel}
         {popupPlaceholder}
         {onlyIcon}
         {enlargedText}
+        short={compression}
         showTooltip={{ label: value.sprint ? tracker.string.MoveToSprint : tracker.string.AddToSprint }}
         value={value.sprint}
         onChange={handleSprintIdChanged}
       />
     </div>
-  {/if}
+  {:else}
+    <div
+      class="flex flex-wrap clear-mins"
+      class:minus-margin={kind === 'list-header'}
+      class:label-wrapper={compression}
+      style:flex-direction={twoRows ? 'column' : 'row'}
+    >
+      {#if (value.sprint && value.sprint !== $activeSprint && groupBy !== 'sprint') || shouldShowPlaceholder}
+        <div class="flex-row-center" class:minus-margin-vSpace={kind === 'list-header'} class:compression style:width>
+          <SprintSelector
+            {kind}
+            {size}
+            {shape}
+            {width}
+            {justify}
+            {isEditable}
+            {shouldShowLabel}
+            {popupPlaceholder}
+            {onlyIcon}
+            {enlargedText}
+            showTooltip={{ label: value.sprint ? tracker.string.MoveToSprint : tracker.string.AddToSprint }}
+            value={value.sprint}
+            onChange={handleSprintIdChanged}
+          />
+        </div>
+      {/if}
 
-  {#if sprint && kind === 'list-header'}
-    <div class="flex-row-center" class:minus-margin-space={kind === 'list-header'} class:text-sm={twoRows}>
-      {#if sprint}
-        {@const now = Date.now()}
-        {@const sprintDaysFrom =
-          now < sprint.startDate
-            ? 0
-            : now > sprint.targetDate
-            ? getDayOfSprint(sprint.startDate, sprint.targetDate)
-            : getDayOfSprint(sprint.startDate, now)}
-        {@const sprintDaysTo = getDayOfSprint(sprint.startDate, sprint.targetDate)}
-        <DatePresenter value={sprint.startDate} kind={'transparent'} />
-        <span class="p-1"> / </span>
-        <DatePresenter value={sprint.targetDate} kind={'transparent'} />
-        <div class="w-2 min-w-2" />
-        <!-- Active sprint in time -->
-        <TimePresenter value={sprintDaysFrom} />
-        /
-        <TimePresenter value={sprintDaysTo} />
+      {#if sprint && kind === 'list-header'}
+        <div class="flex-row-center" class:minus-margin-space={kind === 'list-header'} class:text-sm={twoRows}>
+          {#if sprint}
+            {@const now = Date.now()}
+            {@const sprintDaysFrom =
+              now < sprint.startDate
+                ? 0
+                : now > sprint.targetDate
+                ? getDayOfSprint(sprint.startDate, sprint.targetDate)
+                : getDayOfSprint(sprint.startDate, now)}
+            {@const sprintDaysTo = getDayOfSprint(sprint.startDate, sprint.targetDate)}
+            <DatePresenter value={sprint.startDate} kind={'transparent'} />
+            <span class="p-1"> / </span>
+            <DatePresenter value={sprint.targetDate} kind={'transparent'} />
+            <div class="w-2 min-w-2" />
+            <!-- Active sprint in time -->
+            <TimePresenter value={sprintDaysFrom} />
+            /
+            <TimePresenter value={sprintDaysTo} />
+          {/if}
+        </div>
       {/if}
     </div>
   {/if}
-</div>
+{/if}
 
 <style lang="scss">
   .minus-margin {
@@ -127,8 +150,4 @@
       margin: -0.25rem 0 -0.25rem 0.5rem;
     }
   }
-  .compression {
-    flex-shrink: 5;
-    min-width: 1rem;
-  }
 </style>
diff --git a/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte b/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte
index bf03e40e01..aec218a716 100644
--- a/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte
+++ b/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte
@@ -33,7 +33,8 @@
   export let justify: 'left' | 'center' = 'center'
   export let width: string | undefined = 'min-content'
   export let onlyIcon: boolean = false
-  export let enlargedText = false
+  export let enlargedText: boolean = false
+  export let short: boolean = false
 
   export let useComponent: Ref<Component> | undefined = undefined
   export let showTooltip: LabelAndProps | undefined = undefined
@@ -105,6 +106,7 @@
     {showTooltip}
     icon={sprintIcon}
     disabled={!isEditable}
+    {short}
     on:click={handleSprintEditorOpened}
   />
 {:else}
@@ -117,6 +119,7 @@
     {showTooltip}
     icon={sprintIcon}
     disabled={!isEditable}
+    {short}
     on:click={handleSprintEditorOpened}
   >
     <svelte:fragment slot="content">
diff --git a/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte b/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte
index 5ef833d29d..a71a041f6c 100644
--- a/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte
+++ b/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte
@@ -60,7 +60,7 @@
 
   async function update (viewlets: WithLookup<Viewlet>[], active: Ref<Viewlet> | null): Promise<void> {
     viewlet = viewlets.find((viewlet) => viewlet._id === active) ?? viewlets[0]
-    setActiveViewletId(viewlet._id)
+    if (viewlet !== undefined) setActiveViewletId(viewlet._id)
   }
 
   $: if (!label && title) {
@@ -92,21 +92,11 @@
   <svelte:fragment slot="label_selector">
     <slot name="label_selector" />
   </svelte:fragment>
+  <svelte:fragment slot="header-tools">
+    <Button icon={IconAdd} label={tracker.string.IssueTemplate} kind={'primary'} on:click={showCreateDialog} />
+  </svelte:fragment>
   <svelte:fragment slot="extra">
-    <Button
-      size={'small'}
-      icon={IconAdd}
-      label={tracker.string.IssueTemplate}
-      kind={'primary'}
-      on:click={showCreateDialog}
-    />
-
-    {#if viewlet}
-      <ViewletSettingButton bind:viewOptions {viewlet} />
-    {/if}
-
     {#if asideFloat && $$slots.aside}
-      <div class="buttons-divider" />
       <Button
         icon={asideShown ? IconDetailsFilled : IconDetails}
         kind={'transparent'}
@@ -116,6 +106,10 @@
           asideShown = !asideShown
         }}
       />
+      <div class="buttons-divider" />
+    {/if}
+    {#if viewlet}
+      <ViewletSettingButton bind:viewOptions {viewlet} />
     {/if}
   </svelte:fragment>
 </IssuesHeader>
diff --git a/plugins/view-assets/assets/icons.svg b/plugins/view-assets/assets/icons.svg
index 72cafacdfe..1b967e306d 100644
--- a/plugins/view-assets/assets/icons.svg
+++ b/plugins/view-assets/assets/icons.svg
@@ -5,11 +5,13 @@
     <path d="M1 9.8C1 9.51997 1 9.37996 1.0545 9.273C1.10243 9.17892 1.17892 9.10243 1.273 9.0545C1.37996 9 1.51997 9 1.8 9H14.2C14.48 9 14.62 9 14.727 9.0545C14.8211 9.10243 14.8976 9.17892 14.9455 9.273C15 9.37996 15 9.51997 15 9.8V10.2C15 10.48 15 10.62 14.9455 10.727C14.8976 10.8211 14.8211 10.8976 14.727 10.9455C14.62 11 14.48 11 14.2 11H1.8C1.51997 11 1.37996 11 1.273 10.9455C1.17892 10.8976 1.10243 10.8211 1.0545 10.727C1 10.62 1 10.48 1 10.2V9.8Z" />
     <path d="M1 5.8C1 5.51997 1 5.37996 1.0545 5.273C1.10243 5.17892 1.17892 5.10243 1.273 5.0545C1.37996 5 1.51997 5 1.8 5H14.2C14.48 5 14.62 5 14.727 5.0545C14.8211 5.10243 14.8976 5.17892 14.9455 5.273C15 5.37996 15 5.51997 15 5.8V6.2C15 6.48003 15 6.62004 14.9455 6.727C14.8976 6.82108 14.8211 6.89757 14.727 6.9455C14.62 7 14.48 7 14.2 7H1.8C1.51997 7 1.37996 7 1.273 6.9455C1.17892 6.89757 1.10243 6.82108 1.0545 6.727C1 6.62004 1 6.48003 1 6.2V5.8Z" />
   </symbol>
-   <symbol id="list" viewBox="0 0 16 16">
-    <path d="M1 1.8C1 1.51997 1 1.37996 1.0545 1.273C1.10243 1.17892 1.17892 1.10243 1.273 1.0545C1.37996 1 1.51997 1 1.8 1H14.2C14.48 1 14.62 1 14.727 1.0545C14.8211 1.10243 14.8976 1.17892 14.9455 1.273C15 1.37996 15 1.51997 15 1.8V2.2C15 2.48003 15 2.62004 14.9455 2.727C14.8976 2.82108 14.8211 2.89757 14.727 2.9455C14.62 3 14.48 3 14.2 3H1.8C1.51997 3 1.37996 3 1.273 2.9455C1.17892 2.89757 1.10243 2.82108 1.0545 2.727C1 2.62004 1 2.48003 1 2.2V1.8Z" />
-    <path d="M1 13.8C1 13.52 1 13.38 1.0545 13.273C1.10243 13.1789 1.17892 13.1024 1.273 13.0545C1.37996 13 1.51997 13 1.8 13H14.2C14.48 13 14.62 13 14.727 13.0545C14.8211 13.1024 14.8976 13.1789 14.9455 13.273C15 13.38 15 13.52 15 13.8V14.2C15 14.48 15 14.62 14.9455 14.727C14.8976 14.8211 14.8211 14.8976 14.727 14.9455C14.62 15 14.48 15 14.2 15H1.8C1.51997 15 1.37996 15 1.273 14.9455C1.17892 14.8976 1.10243 14.8211 1.0545 14.727C1 14.62 1 14.48 1 14.2V13.8Z" />
-    <path d="M1 9.8C1 9.51997 1 9.37996 1.0545 9.273C1.10243 9.17892 1.17892 9.10243 1.273 9.0545C1.37996 9 1.51997 9 1.8 9H14.2C14.48 9 14.62 9 14.727 9.0545C14.8211 9.10243 14.8976 9.17892 14.9455 9.273C15 9.37996 15 9.51997 15 9.8V10.2C15 10.48 15 10.62 14.9455 10.727C14.8976 10.8211 14.8211 10.8976 14.727 10.9455C14.62 11 14.48 11 14.2 11H1.8C1.51997 11 1.37996 11 1.273 10.9455C1.17892 10.8976 1.10243 10.8211 1.0545 10.727C1 10.62 1 10.48 1 10.2V9.8Z" />
-    <path d="M1 5.8C1 5.51997 1 5.37996 1.0545 5.273C1.10243 5.17892 1.17892 5.10243 1.273 5.0545C1.37996 5 1.51997 5 1.8 5H14.2C14.48 5 14.62 5 14.727 5.0545C14.8211 5.10243 14.8976 5.17892 14.9455 5.273C15 5.37996 15 5.51997 15 5.8V6.2C15 6.48003 15 6.62004 14.9455 6.727C14.8976 6.82108 14.8211 6.89757 14.727 6.9455C14.62 7 14.48 7 14.2 7H1.8C1.51997 7 1.37996 7 1.273 6.9455C1.17892 6.89757 1.10243 6.82108 1.0545 6.727C1 6.62004 1 6.48003 1 6.2V5.8Z" />
+   <symbol id="list" viewBox="0 0 20 20">
+    <path d="M5 3.75H18.75V5H5V3.75Z" />
+    <path d="M5 9.375H18.75V10.625H5V9.375Z" />
+    <path d="M5 15H18.75V16.25H5V15Z" />
+    <path d="M1.25 3.75H3.125V5H1.25V3.75Z" />
+    <path d="M1.25 9.375H3.125V10.625H1.25V9.375Z" />
+    <path d="M1.25 15H3.125V16.25H1.25V15Z" />
   </symbol>
   <symbol id="card" viewBox="0 0 16 16">
     <path d="M1 2.6C1 2.03995 1 1.75992 1.10899 1.54601C1.20487 1.35785 1.35785 1.20487 1.54601 1.10899C1.75992 1 2.03995 1 2.6 1H5.4C5.96005 1 6.24008 1 6.45399 1.10899C6.64215 1.20487 6.79513 1.35785 6.89101 1.54601C7 1.75992 7 2.03995 7 2.6V3.4C7 3.96005 7 4.24008 6.89101 4.45399C6.79513 4.64215 6.64215 4.79513 6.45399 4.89101C6.24008 5 5.96005 5 5.4 5H2.6C2.03995 5 1.75992 5 1.54601 4.89101C1.35785 4.79513 1.20487 4.64215 1.10899 4.45399C1 4.24008 1 3.96005 1 3.4V2.6Z" />
@@ -71,7 +73,7 @@
     <path d="M17.2,7.8h3.6c1.1,0,2-0.9,2-2V4.2c0-1.1-0.9-2-2-2h-3.6c-1.1,0-2,0.9-2,2v0H9.8V4c0-1.5-1.2-2.8-2.8-2.8H4 C2.5,1.2,1.2,2.5,1.2,4v2c0,1.5,1.2,2.8,2.8,2.8h3c1.5,0,2.8-1.2,2.8-2.8V5.8h2V18c0,1.5,1.2,2.8,2.8,2.8h0.8v0c0,1.1,0.9,2,2,2h3.6 c1.1,0,2-0.9,2-2v-1.6c0-1.1-0.9-2-2-2h-3.6c-1.1,0-2,0.9-2,2v0h-0.8c-0.7,0-1.2-0.6-1.2-1.2v-4.8h2v0c0,1.1,0.9,2,2,2h3.6 c1.1,0,2-0.9,2-2v-1.6c0-1.1-0.9-2-2-2h-3.6c-1.1,0-2,0.9-2,2v0h-2v-6h2v0C15.2,6.9,16.1,7.8,17.2,7.8z M8.2,6 c0,0.7-0.6,1.2-1.2,1.2H4C3.3,7.2,2.8,6.7,2.8,6V4c0-0.7,0.6-1.2,1.2-1.2h3c0.7,0,1.2,0.6,1.2,1.2V6z M16.8,19.2 c0-0.2,0.2-0.5,0.5-0.5h3.6c0.2,0,0.5,0.2,0.5,0.5v1.6c0,0.2-0.2,0.5-0.5,0.5h-3.6c-0.2,0-0.5-0.2-0.5-0.5V19.2z M16.8,11.7 c0-0.2,0.2-0.5,0.5-0.5h3.6c0.2,0,0.5,0.2,0.5,0.5v1.6c0,0.2-0.2,0.5-0.5,0.5h-3.6c-0.2,0-0.5-0.2-0.5-0.5V11.7z M16.8,4.2 c0-0.2,0.2-0.5,0.5-0.5h3.6c0.2,0,0.5,0.2,0.5,0.5v1.6c0,0.2-0.2,0.5-0.5,0.5h-3.6c-0.2,0-0.5-0.2-0.5-0.5V4.2z" />
   </symbol>
   <symbol id="viewButton" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 10.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-1A.5.5 0 0 1 8 14v-3a.5.5 0 0 1 .5-.5h1Zm-2.5 1V13H1.75a.75.75 0 0 1 0-1.5H7Zm7.25 0a.75.75 0 0 1 0 1.5H11v-1.5h3.25ZM5.5 6a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h1ZM3 7.25v1.5H1.75a.75.75 0 0 1 0-1.5H3Zm11.25 0a.75.75 0 0 1 0 1.5H7v-1.5h7.25Zm-2.75-5.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h1ZM9 3v1.5H1.75a.75.75 0 0 1 0-1.5H9Zm5.25 0a.75.75 0 0 1 0 1.5H13V3h1.25Z" />
+    <path d="M10.5,5.5c-0.3-2.2-2.2-4-4.5-4c-2.5,0-4.5,2.1-4.5,4.5c0,2.3,1.8,4.2,4,4.5c0.3,2.2,2.2,4,4.5,4c2.5,0,4.5-2.1,4.5-4.5C14.6,7.6,12.7,5.8,10.5,5.5z M2.5,6C2.5,4,4,2.5,6,2.5c1.8,0,3.3,1.4,3.4,3.1c-2.1,0.2-3.7,1.8-4,3.9C3.8,9.2,2.5,7.7,2.5,6z M10,13.5c-2,0-3.5-1.5-3.5-3.5S8,6.4,10,6.4S13.5,8,13.5,10S12,13.5,10,13.5z" />
   </symbol>
   <symbol id="filter" viewBox="0 0 24 24">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M2.3,4.2C2.4,3.9,2.7,3.8,3,3.8h18c0.3,0,0.6,0.2,0.7,0.4c0.1,0.3,0.1,0.6-0.1,0.8l-7,8.2V21c0,0.3-0.1,0.5-0.4,0.6c-0.2,0.1-0.5,0.2-0.7,0l-3.6-1.8c-0.3-0.1-0.4-0.4-0.4-0.7v-6L2.4,5C2.2,4.8,2.2,4.5,2.3,4.2z M4.6,5.2l6.1,7.2c0.1,0.1,0.2,0.3,0.2,0.5v5.8l2.1,1v-6.9c0-0.2,0.1-0.4,0.2-0.5l6.1-7.2H4.6z" />
diff --git a/plugins/view-resources/src/components/ClassAttributeBar.svelte b/plugins/view-resources/src/components/ClassAttributeBar.svelte
index a1e7efbde1..3df2d3c477 100644
--- a/plugins/view-resources/src/components/ClassAttributeBar.svelte
+++ b/plugins/view-resources/src/components/ClassAttributeBar.svelte
@@ -107,8 +107,8 @@
     margin: 0.25rem -0.5rem 0.75rem;
     padding: 0 0 0 0.5rem;
     font-weight: 600;
-    color: var(--dark-color);
-    border: 1px solid var(--divider-color);
+    color: var(--theme-dark-color);
+    border: 1px solid var(--theme-divider-color);
     border-radius: 0.25rem;
     cursor: pointer;
     transition-property: color, background-color, border-color;
@@ -135,7 +135,7 @@
       transition: opacity 0.15s var(--timing-main);
     }
     &.collapsed {
-      background-color: var(--divider-color);
+      background-color: var(--theme-divider-color);
       border-color: transparent;
 
       .icon-arrow {
@@ -144,8 +144,8 @@
       }
     }
     &:hover {
-      color: var(--caption-color);
-      background-color: var(--menu-bg-select);
+      color: var(--theme-caption-color);
+      background-color: var(--theme-navpanel-hovered);
       border-color: transparent;
 
       .icon-arrow {
diff --git a/plugins/view-resources/src/components/DocNavLink.svelte b/plugins/view-resources/src/components/DocNavLink.svelte
index 1454004c04..5b4cf64280 100644
--- a/plugins/view-resources/src/components/DocNavLink.svelte
+++ b/plugins/view-resources/src/components/DocNavLink.svelte
@@ -24,6 +24,7 @@
   export let onClick: ((event: MouseEvent) => void) | undefined = undefined
   export let noUnderline = false
   export let inline = false
+  export let colorInherit: boolean = false
   export let component: AnyComponent = view.component.EditDoc
   export let props: Record<string, any> = {}
   export let shrink: number = 0
@@ -48,4 +49,4 @@
   $: if (object !== undefined) getHref(object)
 </script>
 
-<NavLink {disableClick} {onClick} {noUnderline} {inline} {shrink} {href}><slot /></NavLink>
+<NavLink {disableClick} {onClick} {noUnderline} {inline} {shrink} {href} {colorInherit}><slot /></NavLink>
diff --git a/plugins/view-resources/src/components/Table.svelte b/plugins/view-resources/src/components/Table.svelte
index af8d351d7f..c0e5bf7462 100644
--- a/plugins/view-resources/src/components/Table.svelte
+++ b/plugins/view-resources/src/components/Table.svelte
@@ -22,8 +22,6 @@
     CheckBox,
     Component,
     getEventPositionElement,
-    IconDown,
-    IconUp,
     Label,
     Loading,
     resizeObserver,
@@ -35,6 +33,7 @@
   import view from '../plugin'
   import { buildConfigLookup, buildModel, LoadingProps } from '../utils'
   import Menu from './Menu.svelte'
+  import IconUpDown from './icons/UpDown.svelte'
 
   export let _class: Ref<Class<Doc>>
   export let query: DocumentQuery<Doc>
@@ -261,11 +260,7 @@
                 {/if}
                 {#if attribute.sortingKey === _sortKey}
                   <div class="icon">
-                    {#if sortOrder === SortingOrder.Ascending}
-                      <IconUp size={'small'} />
-                    {:else}
-                      <IconDown size={'small'} />
-                    {/if}
+                    <IconUpDown size={'small'} descending={sortOrder === SortingOrder.Descending} />
                   </div>
                 {/if}
               </div>
@@ -391,14 +386,13 @@
 
   .footer {
     width: 100%;
-    background-color: var(--body-color);
+    background-color: var(--theme-comp-header-color);
     display: flex;
     align-items: flex-end;
     height: 2.5rem;
     z-index: 2;
     position: sticky;
     bottom: 0;
-    box-shadow: inset 0 1px 0 0 var(--divider-color);
 
     .content {
       display: flex;
diff --git a/plugins/view-resources/src/components/ViewletSettingButton.svelte b/plugins/view-resources/src/components/ViewletSettingButton.svelte
index c5ce44c78d..f0e66ba0a6 100644
--- a/plugins/view-resources/src/components/ViewletSettingButton.svelte
+++ b/plugins/view-resources/src/components/ViewletSettingButton.svelte
@@ -13,13 +13,14 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Button, ButtonKind, eventToHTMLElement, IconDownOutline, Label, showPopup } from '@hcengineering/ui'
+  import { Button, ButtonKind, eventToHTMLElement, showPopup } from '@hcengineering/ui'
   import { Viewlet, ViewOptions } from '@hcengineering/view'
   import { createEventDispatcher } from 'svelte'
   import view from '../plugin'
   import { setViewOptions } from '../viewOptions'
   import ViewletSetting from './ViewletSetting.svelte'
   import ViewOptionsEditor from './ViewOptions.svelte'
+  import IconArrowDown from './icons/ArrowDown.svelte'
 
   export let viewlet: Viewlet | undefined
   export let kind: ButtonKind = 'secondary'
@@ -54,26 +55,11 @@
 {#if viewlet}
   <Button
     icon={view.icon.ViewButton}
+    label={view.string.View}
+    iconRight={IconArrowDown}
     {kind}
-    size={'small'}
     showTooltip={{ label: view.string.CustomizeView }}
     bind:input={btn}
     on:click={clickHandler}
-  >
-    <svelte:fragment slot="content">
-      <div class="flex-row-center clear-mins pointer-events-none">
-        <span class="text-sm font-medium"><Label label={view.string.View} /></span>
-        <div class="icon"><IconDownOutline size={'full'} /></div>
-      </div>
-    </svelte:fragment>
-  </Button>
+  />
 {/if}
-
-<style lang="scss">
-  .icon {
-    margin-left: 0.25rem;
-    width: 0.875rem;
-    height: 0.875rem;
-    color: var(--content-color);
-  }
-</style>
diff --git a/plugins/view-resources/src/components/filter/FilterBar.svelte b/plugins/view-resources/src/components/filter/FilterBar.svelte
index 262062b1ee..1405a5ac0c 100644
--- a/plugins/view-resources/src/components/filter/FilterBar.svelte
+++ b/plugins/view-resources/src/components/filter/FilterBar.svelte
@@ -146,13 +146,7 @@
       </div>
     </div>
 
-    <Button
-      icon={view.icon.Views}
-      label={view.string.Save}
-      size={'small'}
-      width={'fit-content'}
-      on:click={() => saveFilteredView()}
-    />
+    <Button icon={view.icon.Views} label={view.string.Save} width={'fit-content'} on:click={() => saveFilteredView()} />
   </div>
 {/if}
 
@@ -162,12 +156,11 @@
     grid-template-columns: auto auto;
     justify-content: space-between;
     align-items: center;
-    padding: 0.75rem 1.5rem 0.75rem 2.5rem;
+    padding: 0.5rem 2.25rem;
     width: 100%;
     min-width: 0;
-    border: 1px solid var(--divider-color);
-    border-left: none;
-    border-right: none;
+    background-color: var(--theme-comp-header-color);
+    border-bottom: 1px solid var(--theme-divider-color);
 
     .filters {
       display: flex;
diff --git a/plugins/view-resources/src/components/filter/FilterButton.svelte b/plugins/view-resources/src/components/filter/FilterButton.svelte
index 6d392cca4d..a9f18c65a8 100644
--- a/plugins/view-resources/src/components/filter/FilterButton.svelte
+++ b/plugins/view-resources/src/components/filter/FilterButton.svelte
@@ -15,11 +15,13 @@
 <script lang="ts">
   import { Class, Doc, Ref, Space } from '@hcengineering/core'
   import { getClient } from '@hcengineering/presentation'
-  import { Button, Icon, IconAdd, IconClose, Label, eventToHTMLElement, showPopup } from '@hcengineering/ui'
+  import { Button, IconClose, eventToHTMLElement, showPopup } from '@hcengineering/ui'
   import { Filter } from '@hcengineering/view'
   import { filterStore, setFilters } from '../../filter'
   import view from '../../plugin'
   import FilterTypePopup from './FilterTypePopup.svelte'
+  import IconFilter from '../icons/Filter.svelte'
+  import IconArrowDown from '../icons/ArrowDown.svelte'
 
   export let _class: Ref<Class<Doc>> | undefined
   export let space: Ref<Space> | undefined = undefined
@@ -57,24 +59,12 @@
 
 {#if visible}
   <Button
-    size="small"
-    kind={'link-bordered'}
-    borderStyle={'dashed'}
+    icon={IconFilter}
+    label={$filterStore.length === 0 ? view.string.Filter : view.string.ClearFilters}
+    iconRight={$filterStore.length === 0 ? IconArrowDown : IconClose}
     on:click={(ev) => {
       if ($filterStore.length === 0) add(ev)
       else setFilters([])
     }}
-  >
-    <svelte:fragment slot="content">
-      <div class="flex-row-center pointer-events-none">
-        {#if $filterStore.length === 0}
-          <Icon icon={IconAdd} size={'x-small'} />
-          <span class="overflow-label ml-1"><Label label={view.string.Filter} /></span>
-        {:else}
-          <span class="overflow-label mr-1"><Label label={view.string.ClearFilters} /></span>
-          <Icon icon={IconClose} size={'x-small'} />
-        {/if}
-      </div>
-    </svelte:fragment>
-  </Button>
+  />
 {/if}
diff --git a/plugins/view-resources/src/components/filter/FilterSection.svelte b/plugins/view-resources/src/components/filter/FilterSection.svelte
index 4a591f70db..06a27e01b7 100644
--- a/plugins/view-resources/src/components/filter/FilterSection.svelte
+++ b/plugins/view-resources/src/components/filter/FilterSection.svelte
@@ -187,14 +187,14 @@
     height: 1.5rem;
     min-width: 1.5rem;
     white-space: nowrap;
-    color: var(--accent-color);
-    background-color: var(--noborder-bg-color);
+    color: var(--theme-content-color);
+    background-color: var(--theme-button-enabled);
     border: 1px solid transparent;
     transition-property: border, background-color, color, box-shadow;
     transition-duration: 0.15s;
 
     .btn-icon {
-      color: var(--content-color);
+      color: var(--theme-dark-color);
       transition: color 0.15s;
       pointer-events: none;
     }
@@ -205,11 +205,11 @@
       max-width: 10rem;
     }
     &:hover {
-      color: var(--caption-color);
-      background-color: var(--noborder-bg-hover);
+      color: var(--theme-caption-color);
+      background-color: var(--theme-button-hovered);
 
       .btn-icon {
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
       }
     }
 
diff --git a/plugins/view-resources/src/components/icons/ArrowDown.svelte b/plugins/view-resources/src/components/icons/ArrowDown.svelte
new file mode 100644
index 0000000000..495b556b8a
--- /dev/null
+++ b/plugins/view-resources/src/components/icons/ArrowDown.svelte
@@ -0,0 +1,24 @@
+<!--
+//
+// Copyright © 2022 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+-->
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="10.1,3.4 6,7.5 1.9,3.4 1.1,4.1 6,9 10.9,4.1" />
+</svg>
diff --git a/plugins/view-resources/src/components/icons/Filter.svelte b/plugins/view-resources/src/components/icons/Filter.svelte
new file mode 100644
index 0000000000..fad112394f
--- /dev/null
+++ b/plugins/view-resources/src/components/icons/Filter.svelte
@@ -0,0 +1,26 @@
+<!--
+//
+// Copyright © 2022 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+-->
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <rect x="1" y="3.5" width="14" height="1.5" />
+  <rect x="2.5" y="7.5" width="11" height="1.5" />
+  <rect x="4.5" y="11.5" width="7" height="1.5" />
+</svg>
diff --git a/plugins/view-resources/src/components/icons/UpDown.svelte b/plugins/view-resources/src/components/icons/UpDown.svelte
new file mode 100644
index 0000000000..3c61e38132
--- /dev/null
+++ b/plugins/view-resources/src/components/icons/UpDown.svelte
@@ -0,0 +1,26 @@
+<!--
+//
+// Copyright © 2022 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+-->
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  export let descending: boolean = false
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <polygon style:opacity={descending ? 1 : 0.4} points="8,3.4 4.7,6.7 11.3,6.7" />
+  <polygon style:opacity={descending ? 0.4 : 1} points="8,12.6 11.3,9.3 4.7,9.3" />
+</svg>
diff --git a/plugins/view-resources/src/components/list/DividerPresenter.svelte b/plugins/view-resources/src/components/list/DividerPresenter.svelte
new file mode 100644
index 0000000000..e5b048d837
--- /dev/null
+++ b/plugins/view-resources/src/components/list/DividerPresenter.svelte
@@ -0,0 +1,12 @@
+<span class="root" />
+
+<style lang="scss">
+  .root {
+    flex-shrink: 0;
+    margin: 0 0.375rem 0 0.875rem;
+    width: 1px;
+    height: 1.5rem;
+    min-width: 1px;
+    background-color: var(--theme-list-divider-color);
+  }
+</style>
diff --git a/plugins/view-resources/src/components/list/ListCategories.svelte b/plugins/view-resources/src/components/list/ListCategories.svelte
index 11a4136fb3..d9a279e2b0 100644
--- a/plugins/view-resources/src/components/list/ListCategories.svelte
+++ b/plugins/view-resources/src/components/list/ListCategories.svelte
@@ -241,7 +241,9 @@
     {config}
     {itemModels}
     {_class}
-    singleCat={level === 0 && categories.length === 1}
+    singleCat={level === 0 && viewOptions.groupBy.length === 1}
+    oneCat={viewOptions.groupBy.length === 1}
+    lastCat={i === categories.length - 1}
     {category}
     {items}
     {newObjectProps}
diff --git a/plugins/view-resources/src/components/list/ListCategory.svelte b/plugins/view-resources/src/components/list/ListCategory.svelte
index 1723369209..561c86adfe 100644
--- a/plugins/view-resources/src/components/list/ListCategory.svelte
+++ b/plugins/view-resources/src/components/list/ListCategory.svelte
@@ -36,6 +36,8 @@
   export let category: PrimitiveType | StatusValue
   export let headerComponent: AttributeModel | undefined
   export let singleCat: boolean
+  export let oneCat: boolean
+  export let lastCat: boolean
   export let groupByKey: string
   export let space: Ref<Space> | undefined
   export let baseMenuClass: Ref<Class<Doc>> | undefined
@@ -319,6 +321,8 @@
 
 <div
   bind:this={div}
+  class="category-container"
+  class:zero-container={level === 0}
   on:drop|preventDefault={drop}
   on:dragover={dragOverCat}
   on:dragenter={dragEnterCat}
@@ -338,7 +342,9 @@
       {extraHeaders}
       newObjectProps={_newObjectProps}
       flat={flatHeaders}
+      {collapsed}
       {props}
+      {lastCat}
       on:more={() => {
         if (limit !== undefined) limit += 20
       }}
@@ -347,32 +353,30 @@
       }}
     />
   {/if}
-  <ExpandCollapse isExpanded={!collapsed || dragItemIndex !== undefined}>
+  <ExpandCollapse isExpanded={!collapsed || dragItemIndex !== undefined} duration={0}>
     {#if !lastLevel}
-      <div class="p-2">
-        <slot
-          name="category"
-          docs={items}
-          {_class}
-          {space}
-          {lookup}
-          {loadingPropsLength}
-          {baseMenuClass}
-          {config}
-          {selectedObjectIds}
-          {createItemDialog}
-          {createItemLabel}
-          {viewOptions}
-          newObjectProps={_newObjectProps}
-          {flatHeaders}
-          {props}
-          level={level + 1}
-          {viewOptionsConfig}
-          {listDiv}
-          dragItem
-          dragstart={dragStartHandler}
-        />
-      </div>
+      <slot
+        name="category"
+        docs={items}
+        {_class}
+        {space}
+        {lookup}
+        {loadingPropsLength}
+        {baseMenuClass}
+        {config}
+        {selectedObjectIds}
+        {createItemDialog}
+        {createItemLabel}
+        {viewOptions}
+        newObjectProps={_newObjectProps}
+        {flatHeaders}
+        {props}
+        level={level + 1}
+        {viewOptionsConfig}
+        {listDiv}
+        dragItem
+        dragstart={dragStartHandler}
+      />
     {:else if itemModels && (!collapsed || dragItemIndex !== undefined)}
       {#if limited}
         {#each limited as docObject, i (docObject._id)}
@@ -383,6 +387,8 @@
             {groupByKey}
             selected={isSelected(docObject, $focusStore)}
             checked={selectedObjectIdsSet.has(docObject._id)}
+            last={i === limited.length - 1}
+            lastCat={i === limited.length - 1 && (oneCat || lastCat)}
             on:dragstart={(e) => dragStart(e, docObject, i)}
             on:dragenter={(e) => {
               if (dragItemIndex !== undefined) {
@@ -419,7 +425,16 @@
 </div>
 
 <style lang="scss">
-  .row:not(:last-child) {
-    border-bottom: 1px solid var(--accent-bg-color);
+  .expandCollapse {
+    overflow: hidden;
+    transition: height 0.3s ease-out;
+    height: auto;
+  }
+  .zero-container {
+    border-radius: 0.25rem;
+
+    &:not(:first-child) {
+      margin-top: 0.5rem;
+    }
   }
 </style>
diff --git a/plugins/view-resources/src/components/list/ListHeader.svelte b/plugins/view-resources/src/components/list/ListHeader.svelte
index 6738c684e3..1df59738b3 100644
--- a/plugins/view-resources/src/components/list/ListHeader.svelte
+++ b/plugins/view-resources/src/components/list/ListHeader.svelte
@@ -17,17 +17,14 @@
   import ui, {
     ActionIcon,
     AnyComponent,
-    Button,
-    Component,
-    eventToHTMLElement,
-    IconAdd,
     IconMoreH,
     Label,
-    showPopup
+    hsvToRGB,
+    IconCollapseArrow,
+    deviceOptionsStore as deviceInfo
   } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import { noCategory } from '../../viewOptions'
-  import FixedColumn from '../FixedColumn.svelte'
   import view from '../../plugin'
   import { Doc, Ref, Space } from '@hcengineering/core'
   import { AttributeModel } from '@hcengineering/view'
@@ -42,48 +39,72 @@
   export let items: Doc[]
   export let extraHeaders: AnyComponent[] | undefined
   export let flat = false
+  export let collapsed = false
+  export let lastCat = false
   export let props: Record<string, any> = {}
   export let level: number
   export let newObjectProps: (doc: Doc) => Record<string, any> | undefined
 
   const dispatch = createEventDispatcher()
 
-  const handleCreateItem = (event: MouseEvent) => {
-    if (createItemDialog === undefined) return
-    showPopup(createItemDialog, newObjectProps(items[0]), eventToHTMLElement(event))
-  }
+  // const handleCreateItem = (event: MouseEvent) => {
+  //   if (createItemDialog === undefined) return
+  //   showPopup(createItemDialog, newObjectProps(items[0]), eventToHTMLElement(event))
+  // }
+  const hue = Math.random()
+  $: lth = $deviceInfo.theme === 'theme-light'
+  $: headerBGColor = lth ? hsvToRGB(hue, 0.15, 0.9) : hsvToRGB(hue, 0.15, 0.3)
+  $: headerTextColor = lth ? hsvToRGB(hue, 0.5, 0.5) : hsvToRGB(hue, 0.6, 0.95)
 </script>
 
 {#if headerComponent || groupByKey === noCategory}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
-    class="flex-between categoryHeader row"
     style:z-index={10 - level}
+    style:--list-header-color={headerBGColor.rgb}
+    style:--list-header-rgb-color={`${headerBGColor.r}, ${headerBGColor.g}, ${headerBGColor.b}`}
+    class="flex-between categoryHeader row"
+    class:gradient={!lth}
     class:flat
+    class:collapsed
     class:subLevel={level !== 0}
+    class:lastCat
     on:click={() => dispatch('collapse')}
   >
-    <div class="flex-row-center gap-2 clear-mins caption-color">
-      <FixedColumn key={`list_groupBy_${groupByKey}`} justify={'left'}>
-        {#if groupByKey === noCategory}
-          <span class="text-base fs-bold overflow-label content-accent-color pointer-events-none">
-            <Label label={view.string.NoGrouping} />
-          </span>
-        {:else if headerComponent}
-          <svelte:component this={headerComponent.presenter} value={category} {space} kind={'list-header'} />
-        {/if}
-      </FixedColumn>
-      {#if extraHeaders}
+    <div class="flex-row-center clear-mins">
+      {#if level === 0}
+        <div class="chevron"><IconCollapseArrow size={'small'} /></div>
+      {/if}
+      <!-- <FixedColumn key={`list_groupBy_${groupByKey}`} justify={'left'}> -->
+      {#if groupByKey === noCategory}
+        <span style:color={headerTextColor.rgb} class="text-base fs-bold overflow-label pointer-events-none">
+          <Label label={view.string.NoGrouping} />
+        </span>
+      {:else if headerComponent}
+        <span class="clear-mins" style:color={headerTextColor.rgb}>
+          <svelte:component
+            this={headerComponent.presenter}
+            value={category}
+            {space}
+            size={'small'}
+            kind={'list-header'}
+            colorInherit={lth && level === 0}
+            accent={level === 0}
+          />
+        </span>
+      {/if}
+      <!-- </FixedColumn> -->
+      <!-- {#if extraHeaders}
         {#each extraHeaders as extra}
           <FixedColumn key={`list_groupBy_${groupByKey}_extra_${extra}`} justify={'left'}>
             <Component is={extra} props={{ ...props, value: category, docs: items }} />
           </FixedColumn>
         {/each}
-      {/if}
+      {/if} -->
       {#if limited < items.length}
-        <div class="antiSection-header__counter ml-4">
-          {limited}
-          <div class="text-xs mx-1">/</div>
+        <div class="antiSection-header__counter flex-row-center mx-2">
+          <span class="caption-color">{limited}</span>
+          <span class="text-xs mx-0-5">/</span>
           {items.length}
         </div>
         <ActionIcon
@@ -95,35 +116,86 @@
           }}
         />
       {:else}
-        <span class="antiSection-header__counter ml-4">{items.length}</span>
+        <span class="antiSection-header__counter ml-2">{items.length}</span>
       {/if}
     </div>
-    {#if createItemDialog !== undefined && createItemLabel !== undefined}
+    <!-- {#if createItemDialog !== undefined && createItemLabel !== undefined}
       <Button
         icon={IconAdd}
         kind={'transparent'}
         showTooltip={{ label: createItemLabel }}
         on:click={handleCreateItem}
       />
-    {/if}
+    {/if} -->
   </div>
 {/if}
 
 <style lang="scss">
   .categoryHeader {
+    position: relative;
     position: sticky;
     top: 0;
-    padding: 0 0.75rem 0 2.25rem;
-    height: 3rem;
-    min-height: 3rem;
+    padding: 0 2.5rem 0 0.75rem;
+    height: 2.75rem;
+    min-height: 2.75rem;
     min-width: 0;
-    background: var(--header-bg-color);
+    background: var(--theme-bg-color);
 
+    .chevron {
+      flex-shrink: 0;
+      min-width: 0;
+      margin-right: 0.75rem;
+      color: var(--theme-caption-color);
+      transform-origin: center;
+      transform: rotate(90deg);
+      transition: transform 0.15s ease-in-out;
+    }
+    &:not(.gradient)::before {
+      background: var(--list-header-color);
+    }
+    &.gradient::before {
+      background: linear-gradient(90deg, var(--list-header-color), rgba(var(--list-header-rgb-color), 0.3));
+    }
+    &::before {
+      box-sizing: border-box;
+      position: absolute;
+      content: '';
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border: 1px solid var(--theme-list-border-color);
+      border-bottom-color: transparent;
+      border-radius: 0.25rem 0.25rem 0 0;
+      z-index: -1;
+    }
+
+    /* Global styles in components.scss and there is an influence from the Scroller component */
+    &.collapsed {
+      .chevron {
+        transform: rotate(0deg);
+      }
+      &::before {
+        border-bottom-color: var(--theme-list-border-color);
+        border-radius: 0.25rem;
+      }
+    }
     &.subLevel {
-      min-height: 2.25rem;
-      height: 2.25rem;
-      padding: 0 0.75rem 0 2.25rem;
+      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-bottom: 1px solid var(--theme-list-subheader-divider);
       // here shoul be top 3rem for sticky, but with ExpandCollapse it gives strange behavior
+
+      &::before {
+        content: none;
+      }
+      &.collapsed.lastCat {
+        border-bottom: 1px solid var(--theme-list-border-color);
+        border-radius: 0 0 0.25rem 0.25rem;
+      }
     }
 
     &.flat {
@@ -135,7 +207,7 @@
     }
   }
 
-  .row:not(:last-child) {
-    border-bottom: 1px solid var(--accent-bg-color);
-  }
+  // .row:not(:last-child) {
+  //   border-bottom: 1px solid var(--accent-bg-color);
+  // }
 </style>
diff --git a/plugins/view-resources/src/components/list/ListItem.svelte b/plugins/view-resources/src/components/list/ListItem.svelte
index d0f5533874..21e67524e6 100644
--- a/plugins/view-resources/src/components/list/ListItem.svelte
+++ b/plugins/view-resources/src/components/list/ListItem.svelte
@@ -27,6 +27,8 @@
   export let groupByKey: string | undefined
   export let checked: boolean
   export let selected: boolean
+  export let last: boolean = false
+  export let lastCat: boolean = false
   export let props: Record<string, any> = {}
 
   export function scroll () {
@@ -87,6 +89,8 @@
   class="listGrid antiList__row row gap-2 flex-grow"
   class:checking={checked}
   class:mListGridSelected={selected}
+  class:last
+  class:lastCat
   draggable={true}
   on:contextmenu
   on:focus
@@ -99,13 +103,18 @@
   on:dragstart
 >
   <div class="draggable-container">
-    <div class="draggable-mark"><IconCircles /></div>
+    <div class="draggable-mark">
+      <IconCircles />
+      <div class="space" />
+      <IconCircles />
+    </div>
   </div>
-  <div class="flex-center relative" use:tooltip={{ label: view.string.Select, direction: 'bottom' }}>
+  <div class="flex-center relative mr-1" use:tooltip={{ label: view.string.Select, direction: 'bottom' }}>
     <div class="antiList-cells__notifyCell">
       <div class="antiList-cells__checkCell">
         <CheckBox
           {checked}
+          size={'medium'}
           on:value={(event) => {
             dispatch('check', { docs: [docObject], value: event.detail })
           }}
@@ -118,13 +127,32 @@
       />
     </div>
   </div>
-  {#each model as attributeModel, i}
+  {#each model.filter((m) => !m.props?.listProps?.optional) as attributeModel, i}
     {@const listProps = attributeModel.props?.listProps}
     {#if attributeModel.props?.type === 'grow'}
       <svelte:component this={attributeModel.presenter} />
-    {:else if (!groupByKey || listProps?.excludeByKey !== groupByKey) && !(listProps?.optional && compactMode)}
+
+      {#if !compactMode}
+        <div class="optional-bar">
+          {#each model.filter((m) => m.props?.listProps?.optional) as attrModel, j}
+            {@const lp = attrModel.props?.listProps}
+            {@const v = getObjectValue(attrModel.key, docObject)}
+            {#if lp?.excludeByKey !== groupByKey && v !== undefined}
+              <svelte:component
+                this={attrModel.presenter}
+                value={getObjectValue(attrModel.key, docObject) ?? ''}
+                onChange={getOnChange(docObject, attrModel)}
+                kind={'list'}
+                compression
+                {...joinProps(attrModel, docObject, props)}
+              />
+            {/if}
+          {/each}
+        </div>
+      {/if}
+    {:else if (!groupByKey || listProps?.excludeByKey !== groupByKey) && !listProps?.optional}
       {#if listProps?.fixed}
-        <FixedColumn key={`list_item_${attributeModel.key}`} justify={listProps.fixed}>
+        <FixedColumn key={`list_item_${attributeModel.props?.listProps.key}`} justify={listProps.fixed}>
           <svelte:component
             this={attributeModel.presenter}
             value={getObjectValue(attributeModel.key, docObject) ?? ''}
@@ -158,10 +186,10 @@
         <IconCircles />
       </div>
       <div class="scroll-box gap-2">
-        {#each model as attributeModel}
+        {#each model.filter((m) => m.props?.listProps?.optional) as attributeModel}
           {@const listProps = attributeModel.props?.listProps}
           {@const value = getObjectValue(attributeModel.key, docObject)}
-          {#if listProps?.optional && listProps?.excludeByKey !== groupByKey && value !== undefined}
+          {#if listProps?.excludeByKey !== groupByKey && value !== undefined}
             <svelte:component
               this={attributeModel.presenter}
               value={getObjectValue(attributeModel.key, docObject) ?? ''}
@@ -177,54 +205,70 @@
 </div>
 
 <style lang="scss">
-  .row:not(:last-child) {
-    border-bottom: 1px solid var(--accent-bg-color);
+  .row {
+    border-left: 1px solid var(--theme-list-border-color);
+    border-right: 1px solid var(--theme-list-border-color);
+  }
+  .row:not(.lastCat, .last) {
+    border-bottom: 1px solid var(--theme-divider-color);
+  }
+  .row.last {
+    border-bottom: 1px solid var(--theme-list-subheader-divider);
+  }
+  .row.lastCat {
+    border-radius: 0 0 0.25rem 0.25rem;
+    border-bottom: 1px solid var(--theme-list-border-color);
   }
 
+  /* Global styles in components.scss */
   .listGrid {
     position: relative;
     display: flex;
     align-items: center;
-    padding: 0 0.75rem 0 0.875rem;
+    padding: 0 2.5rem 0 0.25rem;
     width: 100%;
     height: 2.75rem;
     min-height: 2.75rem;
     color: var(--caption-color);
-
-    &.checking {
-      background-color: var(--highlight-select);
-      border-bottom-color: var(--highlight-select);
-
-      &:hover {
-        background-color: var(--highlight-select-hover);
-        border-bottom-color: var(--highlight-select-hover);
-      }
-    }
+    background-color: var(--theme-list-row-color);
 
     &.mListGridSelected {
       background-color: var(--highlight-hover);
     }
 
+    &.checking {
+      background-color: var(--highlight-select);
+      // border-bottom-color: var(--highlight-select);
+
+      &:hover {
+        background-color: var(--highlight-select-hover);
+        // border-bottom-color: var(--highlight-select-hover);
+      }
+    }
+
     .draggable-container {
       position: absolute;
       left: 0;
       display: flex;
       align-items: center;
       height: 100%;
-      width: 1.5rem;
+      width: 1rem;
       cursor: grabbing;
 
       .draggable-mark {
-        opacity: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        margin-left: 0.125rem;
         width: 0.375rem;
-        height: 1rem;
-        margin-left: 0.75rem;
-        transition: opacity 0.1s;
+        height: 100%;
+        opacity: 0;
       }
     }
     &:hover {
       .draggable-mark {
-        opacity: 0.4;
+        opacity: 0.1;
       }
     }
 
diff --git a/plugins/view-resources/src/components/list/ListView.svelte b/plugins/view-resources/src/components/list/ListView.svelte
index 25c60d2e89..3d1cac3574 100644
--- a/plugins/view-resources/src/components/list/ListView.svelte
+++ b/plugins/view-resources/src/components/list/ListView.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Class, Doc, DocumentQuery, FindOptions, Ref, Space } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
-  import { AnyComponent, issueSP, Scroller } from '@hcengineering/ui'
+  import { AnyComponent, Scroller } from '@hcengineering/ui'
   import { BuildModelKey, Viewlet, ViewOptions } from '@hcengineering/view'
   import { onMount } from 'svelte'
   import {
@@ -47,8 +47,8 @@
   }}
 />
 
-<div class="w-full h-full clear-mins">
-  <Scroller fade={issueSP}>
+<div class="w-full h-full py-4 clear-mins">
+  <Scroller fade={{ multipler: { top: 2.75 * viewOptions.groupBy.length, bottom: 0 } }} padding={'0 1rem'} noFade>
     <List
       bind:this={list}
       {_class}
diff --git a/plugins/view-resources/src/components/status/StatusPresenter.svelte b/plugins/view-resources/src/components/status/StatusPresenter.svelte
index 0ffc97f44a..5f2a0bf528 100644
--- a/plugins/view-resources/src/components/status/StatusPresenter.svelte
+++ b/plugins/view-resources/src/components/status/StatusPresenter.svelte
@@ -30,7 +30,7 @@
     {:else if icon !== undefined && typeof icon !== 'string'}
       <svelte:component this={icon} {value} {size} />
     {/if}
-    <span class="overflow-label" class:ml-2={icon !== undefined}>
+    <span class="overflow-label" class:ml-1-5={icon !== undefined}>
       {value.name}
     </span>
   </div>
diff --git a/plugins/view-resources/src/index.ts b/plugins/view-resources/src/index.ts
index 764ac0d1c3..b0f0715b6a 100644
--- a/plugins/view-resources/src/index.ts
+++ b/plugins/view-resources/src/index.ts
@@ -45,6 +45,7 @@ import IntlStringPresenter from './components/IntlStringPresenter.svelte'
 import GithubPresenter from './components/linkPresenters/GithubPresenter.svelte'
 import YoutubePresenter from './components/linkPresenters/YoutubePresenter.svelte'
 import GrowPresenter from './components/list/GrowPresenter.svelte'
+import DividerPresenter from './components/list/DividerPresenter.svelte'
 import ListView from './components/list/ListView.svelte'
 import SortableList from './components/list/SortableList.svelte'
 import SortableListItem from './components/list/SortableListItem.svelte'
@@ -197,6 +198,7 @@ export default async (): Promise<Resources> => ({
     HTMLEditor,
     ListView,
     GrowPresenter,
+    DividerPresenter,
     IndexedDocumentPreview,
     SpaceRefPresenter,
     EnumArrayEditor,
diff --git a/plugins/view/src/index.ts b/plugins/view/src/index.ts
index 704f441bf2..baf6daefb2 100644
--- a/plugins/view/src/index.ts
+++ b/plugins/view/src/index.ts
@@ -662,7 +662,8 @@ const view = plugin(viewId, {
     SpacePresenter: '' as AnyComponent,
     BooleanTruePresenter: '' as AnyComponent,
     ValueSelector: '' as AnyComponent,
-    GrowPresenter: '' as AnyComponent
+    GrowPresenter: '' as AnyComponent,
+    DividerPresenter: '' as AnyComponent
   },
   string: {
     CustomizeView: '' as IntlString,
diff --git a/plugins/workbench-resources/src/components/Header.svelte b/plugins/workbench-resources/src/components/Header.svelte
index 685bfcc20d..f8c35d0261 100644
--- a/plugins/workbench-resources/src/components/Header.svelte
+++ b/plugins/workbench-resources/src/components/Header.svelte
@@ -15,11 +15,11 @@
 <script lang="ts">
   import type { Class, Doc, Ref, Space } from '@hcengineering/core'
   import { getClient } from '@hcengineering/presentation'
-  import { AnyComponent, Icon } from '@hcengineering/ui'
+  import { AnyComponent } from '@hcengineering/ui'
   import view from '@hcengineering/view'
-  import { DocNavLink, FilterButton } from '@hcengineering/view-resources'
+  import { DocNavLink } from '@hcengineering/view-resources'
   import plugin from '../plugin'
-  import { classIcon } from '../utils'
+  // import { classIcon } from '../utils'
 
   export let space: Space
   export let _class: Ref<Class<Doc>> | undefined = undefined
@@ -36,7 +36,7 @@
     return editorMixin.editor
   }
 
-  const icon = classIcon(client, space._class)
+  // const icon = classIcon(client, space._class)
   const editor = getEditor(space._class) ?? plugin.component.SpacePanel
 </script>
 
@@ -45,11 +45,10 @@
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <DocNavLink object={space} component={editor}>
       <div class="ac-header__wrap-title">
-        {#if icon}<div class="ac-header__icon"><Icon {icon} size={'small'} /></div>{/if}
+        <!-- {#if icon}<div class="ac-header__icon"><Icon {icon} size={'small'} /></div>{/if} -->
         <span class="ac-header__title">{space.name}</span>
       </div>
     </DocNavLink>
-    {#if _class}<div class="ml-4"><FilterButton {_class} /></div>{/if}
   </div>
   {#if description}
     <span class="ac-header__description">
diff --git a/plugins/workbench-resources/src/components/SpaceBrowser.svelte b/plugins/workbench-resources/src/components/SpaceBrowser.svelte
index 4338682eae..6f05285119 100644
--- a/plugins/workbench-resources/src/components/SpaceBrowser.svelte
+++ b/plugins/workbench-resources/src/components/SpaceBrowser.svelte
@@ -34,7 +34,9 @@
     navigate,
     Scroller,
     SearchEdit,
-    showPopup
+    showPopup,
+    IconMoreH,
+    ActionIcon
   } from '@hcengineering/ui'
   import { FilterBar, FilterButton, SpacePresenter } from '@hcengineering/view-resources'
   import plugin from '../plugin'
@@ -118,40 +120,50 @@
       <span class="ac-header__title"><Label {label} /></span>
     </div>
     {#if createItemDialog}
-      <Button label={createItemLabel} size={'small'} on:click={(ev) => showCreateDialog(ev)} />
+      <div class="mb-1 clear-mins">
+        <Button label={createItemLabel} kind={'primary'} size={'medium'} on:click={(ev) => showCreateDialog(ev)} />
+      </div>
     {/if}
   </div>
-  <div class="ml-8 mr-8 mt-4 mb-4">
-    <SearchEdit
-      bind:value={search}
-      on:change={(ev) => {
-        updateSearchQuery(search)
-        update(sort, resultQuery)
-      }}
-    />
+  <div class="ac-header full divide search-start">
+    <div class="ac-header-full small-gap">
+      <SearchEdit
+        bind:value={search}
+        on:change={() => {
+          updateSearchQuery(search)
+          update(sort, resultQuery)
+        }}
+      />
+      <ActionIcon icon={IconMoreH} size={'small'} />
+      <div class="buttons-divider" />
+      {#if withFilterButton}
+        <FilterButton {_class} />
+      {/if}
+    </div>
   </div>
-{/if}
-{#if withFilterButton}
-  <div class="ml-10 mt-4 mb-4">
-    <FilterButton {_class} />
+{:else if withFilterButton}
+  <div class="ac-header full divide">
+    <div class="ac-header-full small-gap">
+      <FilterButton {_class} />
+    </div>
   </div>
 {/if}
 <FilterBar {_class} query={searchQuery} on:change={(e) => (resultQuery = e.detail)} />
 <Scroller padding={'2.5rem'}>
-  <div class="flex-col">
+  <div class="spaces-container">
     {#each spaces as space (space._id)}
       {@const icon = classIcon(client, space._class)}
       {@const joined = space.members.includes(me)}
-      <div class="divider" />
-      <div class="item flex-between">
-        <div>
-          <div class="fs-title flex">
+      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+      <div class="item flex-between" tabindex="0">
+        <div class="flex-col clear-mins">
+          <div class="fs-title flex-row-center">
             {#if icon}
-              <Icon {icon} size={'small'} />
+              <div class="icon"><Icon {icon} size={'small'} /></div>
             {/if}
             <SpacePresenter value={space} />
           </div>
-          <div>
+          <div class="flex-row-center">
             {#if joined}
               <Label label={plugin.string.Joined} />
               &#183
@@ -161,48 +173,58 @@
             {space.description}
           </div>
         </div>
-        <div class="tools flex">
+        <div class="tools flex-row-center gap-2">
           {#if joined}
             <Button size={'x-large'} label={plugin.string.Leave} on:click={() => leave(space)} />
           {:else}
-            <div class="mr-2">
-              <Button size={'x-large'} label={plugin.string.View} on:click={() => view(space)} />
-            </div>
+            <Button size={'x-large'} label={plugin.string.View} on:click={() => view(space)} />
             <Button size={'x-large'} kind={'primary'} label={plugin.string.Join} on:click={() => join(space)} />
           {/if}
         </div>
       </div>
     {/each}
-    {#if createItemDialog}
-      <div class="flex-center mt-10">
-        <Button size={'x-large'} kind={'primary'} label={createItemLabel} on:click={(ev) => showCreateDialog(ev)} />
-      </div>
-    {/if}
   </div>
+  {#if createItemDialog}
+    <div class="flex-center mt-10">
+      <Button size={'x-large'} kind={'primary'} label={createItemLabel} on:click={(ev) => showCreateDialog(ev)} />
+    </div>
+  {/if}
 </Scroller>
 
 <style lang="scss">
-  .divider {
-    background-color: var(--divider-color);
-    height: 1px;
-  }
+  .spaces-container {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--theme-list-border-color);
+    border-radius: 0.25rem;
 
-  .item {
-    color: var(--caption-color);
-    cursor: pointer;
-    padding: 1rem 0.75rem;
+    .item {
+      padding: 1rem 0.75rem;
+      color: var(--theme-caption-color);
+      cursor: pointer;
 
-    &:hover,
-    &:focus {
-      background-color: var(--popup-bg-hover);
-
-      .tools {
-        visibility: visible;
+      .icon {
+        margin-right: 0.375rem;
+        color: var(--theme-trans-color);
+      }
+      &:not(:last-child) {
+        border-bottom: 1px solid var(--theme-divider-color);
+      }
+      &:hover,
+      &:focus {
+        background-color: var(--highlight-hover);
+
+        .icon {
+          color: var(--theme-caption-color);
+        }
+        .tools {
+          visibility: visible;
+        }
+      }
+      .tools {
+        position: relative;
+        visibility: hidden;
       }
-    }
-    .tools {
-      position: relative;
-      visibility: hidden;
     }
   }
 </style>
diff --git a/plugins/workbench-resources/src/components/SpaceHeader.svelte b/plugins/workbench-resources/src/components/SpaceHeader.svelte
index 9e2df47074..25b1146fbb 100644
--- a/plugins/workbench-resources/src/components/SpaceHeader.svelte
+++ b/plugins/workbench-resources/src/components/SpaceHeader.svelte
@@ -18,17 +18,19 @@
   import { IntlString } from '@hcengineering/platform'
   import presentation, { createQuery } from '@hcengineering/presentation'
   import {
+    ActionIcon,
     AnyComponent,
     Button,
     IconAdd,
+    IconMoreH,
     SearchEdit,
     TabList,
-    deviceOptionsStore as deviceInfo,
     resolvedLocationStore,
     showPopup
   } from '@hcengineering/ui'
   import { ViewOptions, Viewlet } from '@hcengineering/view'
   import {
+    FilterButton,
     ViewletSettingButton,
     activeViewlet,
     makeViewletKey,
@@ -90,37 +92,19 @@
     }
   })
 
-  $: twoRows = $deviceInfo.twoRows
+  // $: twoRows = $deviceInfo.twoRows
 </script>
 
-<div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
-  {#if space}
-    <div class:ac-header-full={!twoRows} class:flex-stretch={twoRows}>
-      <Header {space} {_class} />
-      <SearchEdit
-        bind:value={search}
-        on:change={() => {
-          dispatch('search', search)
-        }}
-      />
-    </div>
-    <div class="ac-header-full" class:secondRow={twoRows}>
-      {#if createItemDialog}
-        <Button
-          icon={IconAdd}
-          label={createItemLabel}
-          kind={'primary'}
-          size={'small'}
-          on:click={(ev) => showCreateDialog(ev)}
-        />
-      {/if}
+{#if space}
+  <div class="ac-header full divide caption-height">
+    <Header {space} {_class} />
+
+    <div class="ac-header-full medium-gap mb-1">
       {#if viewlets.length > 1}
         <TabList
           items={viewslist}
           multiselect={false}
           selected={viewlet?._id}
-          kind={'secondary'}
-          size={'small'}
           on:select={(result) => {
             if (result.detail !== undefined) {
               viewlet = viewlets.find((vl) => vl._id === result.detail.id)
@@ -129,7 +113,23 @@
           }}
         />
       {/if}
-      <ViewletSettingButton bind:viewOptions {viewlet} />
+      {#if createItemDialog}
+        <Button icon={IconAdd} label={createItemLabel} kind={'primary'} on:click={(ev) => showCreateDialog(ev)} />
+      {/if}
     </div>
-  {/if}
-</div>
+  </div>
+  <div class="ac-header full divide search-start">
+    <div class="ac-header-full small-gap">
+      <SearchEdit bind:value={search} on:change={() => dispatch('search', search)} />
+      <ActionIcon icon={IconMoreH} size={'small'} />
+      <div class="buttons-divider" />
+      <FilterButton {_class} />
+    </div>
+    <div class="ac-header-full medium-gap">
+      <ViewletSettingButton bind:viewOptions {viewlet} />
+      <ActionIcon icon={IconMoreH} size={'small'} />
+    </div>
+  </div>
+{:else}
+  <div class="ac-header full divide caption-height" />
+{/if}
diff --git a/plugins/workbench-resources/src/components/SpecialView.svelte b/plugins/workbench-resources/src/components/SpecialView.svelte
index eb647a4010..7cdf048e15 100644
--- a/plugins/workbench-resources/src/components/SpecialView.svelte
+++ b/plugins/workbench-resources/src/components/SpecialView.svelte
@@ -17,16 +17,16 @@
   import { Asset, IntlString } from '@hcengineering/platform'
   import { createQuery } from '@hcengineering/presentation'
   import {
+    ActionIcon,
     AnyComponent,
     Button,
     Component,
-    Icon,
     IconAdd,
+    IconMoreH,
     Label,
     Loading,
     SearchEdit,
     TabList,
-    deviceOptionsStore as deviceInfo,
     resolvedLocationStore,
     showPopup
   } from '@hcengineering/ui'
@@ -127,7 +127,7 @@
     showPopup(createComponent, createComponentProps, 'top')
   }
 
-  $: twoRows = $deviceInfo.twoRows
+  // $: twoRows = $deviceInfo.twoRows
 
   $: viewOptions = getViewOptions(viewlet, $viewOptionStore)
 
@@ -140,24 +140,17 @@
   })
 </script>
 
-<div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
-  <div class:ac-header-full={!twoRows} class:flex-between={twoRows}>
-    <div class="ac-header__wrap-title mr-3">
-      <span class="ac-header__icon"><Icon {icon} size={'small'} /></span>
-      <span class="ac-header__title"><Label {label} /></span>
-      <div class="ml-4"><FilterButton {_class} /></div>
-    </div>
-
-    <SearchEdit bind:value={search} />
+<div class="ac-header full divide caption-height">
+  <div class="ac-header__wrap-title mr-3">
+    <span class="ac-header__title"><Label {label} /></span>
   </div>
-  <div class="ac-header-full" class:secondRow={twoRows}>
+
+  <div class="ac-header-full medium-gap mb-1">
     {#if viewlets.length > 1}
       <TabList
         items={viewslist}
         multiselect={false}
         selected={viewlet?._id}
-        kind={'secondary'}
-        size={'small'}
         on:select={(result) => {
           if (result.detail !== undefined) {
             if (viewlet?._id === result.detail.id) {
@@ -171,18 +164,27 @@
         }}
       />
     {/if}
-
     {#if createLabel && createComponent}
       <Button
-        label={createLabel}
         icon={IconAdd}
+        label={createLabel}
         kind={'primary'}
-        size={'small'}
         disabled={isCreationDisabled}
         on:click={() => showCreateDialog()}
       />
     {/if}
+  </div>
+</div>
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <SearchEdit bind:value={search} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
+    <div class="buttons-divider" />
+    <FilterButton {_class} />
+  </div>
+  <div class="ac-header-full medium-gap">
     <ViewletSettingButton bind:viewOptions {viewlet} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
   </div>
 </div>
 
diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte
index 357f9270cd..20080503eb 100644
--- a/plugins/workbench-resources/src/components/Workbench.svelte
+++ b/plugins/workbench-resources/src/components/Workbench.svelte
@@ -635,10 +635,7 @@
       {#if currentApplication && navigatorModel && navigator && visibileNav}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         {#if visibileNav && navFloat}<div class="cover shown" on:click={() => (visibileNav = false)} />{/if}
-        <div
-          class="antiPanel-navigator {appsDirection === 'horizontal' ? 'portrait' : 'landscape'}"
-          style="box-shadow: -1px 0px 2px rgba(0, 0, 0, .1)"
-        >
+        <div class="antiPanel-navigator {appsDirection === 'horizontal' ? 'portrait' : 'landscape'}">
           {#if currentApplication}
             <NavHeader label={currentApplication.label} />
             {#if currentApplication.navHeaderComponent}
@@ -660,7 +657,6 @@
       {/if}
       <div
         class="antiPanel-component antiComponent"
-        class:border-left={!$deviceInfo.isPortrait}
         bind:this={contentPanel}
         use:resizeObserver={(element) => {
           componentWidth = element.clientWidth
diff --git a/tests/sanity/tests/hr.spec.ts b/tests/sanity/tests/hr.spec.ts
index f21f929eb6..a46132b6e5 100644
--- a/tests/sanity/tests/hr.spec.ts
+++ b/tests/sanity/tests/hr.spec.ts
@@ -6,7 +6,7 @@ test.use({
 })
 
 export async function createDepartment (page: Page, departmentName: string): Promise<void> {
-  await page.click('text=Structure Department Organization no employees >> button >> nth=1')
+  await page.click('text=Structure Department Organization no employees >> button >> nth=2')
   const departmentNameField = page.locator('[placeholder="Department"]')
   await departmentNameField.click()
   await departmentNameField.fill(departmentName)
@@ -29,7 +29,7 @@ test.describe('hr tests', () => {
     await createDepartment(page, department2)
 
     // Click .ml-8 > div > div > .flex-between >> nth=0
-    await page.locator('.ml-8 > div > div > .flex-between').first().click()
+    await page.locator('.flex-col > div > .flex-between >> nth=0').click()
 
     // Click [id="hr\:string\:AddEmployee"]
     await page.locator('[id="hr\\:string\\:AddEmployee"]').click()
@@ -57,7 +57,7 @@ test.describe('hr tests', () => {
     await page.locator('text=Structure').click()
 
     // Click div:nth-child(3) > div > .flex-between
-    await page.locator('div:nth-child(3) > div > .flex-between').click()
+    await page.locator('div:nth-child(2) > .flex-between').click()
 
     // Click [id="hr\:string\:AddEmployee"]
     await page.locator('[id="hr\\:string\\:AddEmployee"]').click()
diff --git a/tests/sanity/tests/org.members.spec.ts b/tests/sanity/tests/org.members.spec.ts
index 330d7ae3b6..b0a89f8873 100644
--- a/tests/sanity/tests/org.members.spec.ts
+++ b/tests/sanity/tests/org.members.spec.ts
@@ -18,7 +18,7 @@ test.describe('recruit tests', () => {
     await page.click('[placeholder="Company name"]')
     const orgId = 'Company-' + generateId()
     await page.fill('[placeholder="Company name"]', orgId)
-    await page.click('button:has-text("Create")')
+    await page.click('[id="contact\\:string\\:CreateOrganization"] button:has-text("Create")')
     await page.waitForSelector('form.antiCard', { state: 'detached' })
     await page.click(`text=${orgId}`)
 
diff --git a/tests/sanity/tests/tracker.spec.ts b/tests/sanity/tests/tracker.spec.ts
index d548b2b708..6b3d20bdd0 100644
--- a/tests/sanity/tests/tracker.spec.ts
+++ b/tests/sanity/tests/tracker.spec.ts
@@ -104,11 +104,11 @@ test('my-issues', async ({ page }) => {
   await navigate(page)
   await createIssue(page, { name })
   await page.click('text="My issues"')
-  await page.click('button:has-text("Assigned")')
+  await page.click('[data-id="tab-assigned"]')
   await expect(page.locator('.antiPanel-component')).not.toContainText(name)
-  await page.click('button:has-text("Created")')
+  await page.click('[data-id="tab-created"]')
   await expect(page.locator('.antiPanel-component')).toContainText(name)
-  await page.click('button:has-text("Subscribed")')
+  await page.click('[data-id="tab-subscribed"]')
   await expect(page.locator('.antiPanel-component')).toContainText(name)
   await openIssue(page, name)
   // click "Don't track"
diff --git a/tests/sanity/tests/workbench.spec.ts b/tests/sanity/tests/workbench.spec.ts
index e8f6eb433c..c1cc2ba6b9 100644
--- a/tests/sanity/tests/workbench.spec.ts
+++ b/tests/sanity/tests/workbench.spec.ts
@@ -17,7 +17,7 @@ test.describe('workbench tests', () => {
     await page.click('text=Applications')
     await expect(page).toHaveURL(`${PlatformURI}/workbench/sanity-ws/recruit/candidates`)
     // Click text=Applications Application >> span
-    await expect(page.locator('text=Applications Filter')).toBeVisible()
+    await expect(page.locator('text=Applications >> nth=1')).toBeVisible()
     await expect(page.locator('text="APP-1')).toBeDefined()
 
     // Click text=Talents