diff --git a/dev/storybook/.storybook/styles/styles.scss b/dev/storybook/.storybook/styles/styles.scss
index 3750730b67..ed06996bfc 100644
--- a/dev/storybook/.storybook/styles/styles.scss
+++ b/dev/storybook/.storybook/styles/styles.scss
@@ -3,5 +3,5 @@ html, body {
 }
 
 .docs-story {
-  background: var(--body-color);
+  background: var(--theme-bg-color);
 }
diff --git a/packages/kanban/src/components/KanbanRow.svelte b/packages/kanban/src/components/KanbanRow.svelte
index c74a8c091c..b6bf7bd5ff 100644
--- a/packages/kanban/src/components/KanbanRow.svelte
+++ b/packages/kanban/src/components/KanbanRow.svelte
@@ -134,7 +134,7 @@
     // transition: box-shadow .15s ease-in-out;
 
     // &:hover {
-    //   background-color: var(--board-card-bg-hover);
+    //   background-color: var(--highlight-hover);
     // }
     &.checked {
       background-color: var(--highlight-select);
@@ -161,7 +161,7 @@
       cursor: grab;
     }
     &.dragged {
-      background-color: var(--board-bg-color);
+      background-color: var(--theme-bg-accent-color);
     }
   }
   @keyframes anim-border {
diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte
index e4c8d21696..cceb496903 100644
--- a/packages/panel/src/components/Panel.svelte
+++ b/packages/panel/src/components/Panel.svelte
@@ -12,9 +12,9 @@
     // 
     // See the License for the specific language governing permissions and
     // limitations under the License.
-    -->
+-->
 <script lang="ts">
-  import { afterUpdate, createEventDispatcher, onMount } from 'svelte'
+  import { afterUpdate } from 'svelte'
   import { Writable, writable } from 'svelte/store'
 
   import activity from '@hcengineering/activity'
@@ -56,8 +56,6 @@
   let lastScrollHeight: number = -1
   let count: number = 0
 
-  const dispatch = createEventDispatcher()
-
   const waitCount = 10
   const PanelScrollTop: Writable<Record<string, number>> = writable<Record<string, number>>({})
 
@@ -88,18 +86,15 @@
       startScrollHeightCheck()
     }
   })
-
-  onMount(() => {
-    dispatch('open')
-  })
 </script>
 
 <Panel
   bind:isAside
-  isHeader={$$slots.header || isHeader}
+  {isHeader}
   bind:panelWidth
   bind:innerWidth
   bind:withoutTitle
+  on:open
   on:close
   {allowClose}
   {floatAside}
diff --git a/packages/presentation/src/components/DocPopup.svelte b/packages/presentation/src/components/DocPopup.svelte
index e8acabb46d..f1b0441d31 100644
--- a/packages/presentation/src/components/DocPopup.svelte
+++ b/packages/presentation/src/components/DocPopup.svelte
@@ -236,7 +236,7 @@
 <style lang="scss">
   .plainContainer {
     color: var(--caption-color);
-    background-color: var(--body-color);
+    background-color: var(--theme-bg-color);
     border: 1px solid var(--button-border-color);
     border-radius: 0.25rem;
     box-shadow: none;
diff --git a/packages/presentation/src/components/breadcrumbs/BreadcrumbsElement.svelte b/packages/presentation/src/components/breadcrumbs/BreadcrumbsElement.svelte
index 9393ccc36a..1572c94b73 100644
--- a/packages/presentation/src/components/breadcrumbs/BreadcrumbsElement.svelte
+++ b/packages/presentation/src/components/breadcrumbs/BreadcrumbsElement.svelte
@@ -17,7 +17,7 @@
   export let title: string | undefined = undefined
   export let position: 'start' | 'middle' | 'end' | undefined = undefined
   export let selected = false
-  export let color = 'var(--body-color)'
+  export let color = 'var(--theme-bg-color)'
 
   let clientWidth = 0
 
diff --git a/packages/text-editor/src/components/CollaboratorEditor.svelte b/packages/text-editor/src/components/CollaboratorEditor.svelte
index d97961b029..06a8fb6b5b 100644
--- a/packages/text-editor/src/components/CollaboratorEditor.svelte
+++ b/packages/text-editor/src/components/CollaboratorEditor.svelte
@@ -745,7 +745,7 @@
   .ref-container .formatPanel {
     margin: -0.5rem -0.25rem 0.5rem;
     padding: 0.375rem;
-    background-color: var(--body-accent);
+    background-color: var(--theme-comp-header-color);
     border-radius: 0.5rem;
     box-shadow: var(--button-shadow);
     z-index: 1;
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 3b1f2a8af5..9101b78c2d 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -191,12 +191,6 @@
   --theme-won-color: #34DB80;
   --theme-caret-color: #fff;
 
-  --body-color: #1f2023;
-  --body-accent: #222326;
-  --board-bg-color: #1c1d1f;
-  --board-card-bg-color: #27282b;
-  --board-card-bg-hover: #2a2b2e;
-  --board-card-shadow: rgb(0 0 0 / 15%) 0px 0px 2px;
   --accent-bg-color: #27282b;
   --accent-shadow: rgb(0 0 0 / 10%) 0px 2px 4px;
 
@@ -385,12 +379,6 @@
   --theme-won-color: #34DB80;  // Dark
   --theme-caret-color: #669AFF;
 
-  --body-color: #fff;
-  --body-accent: #fafafa; // HZ
-  --board-bg-color: #f4f5f8;
-  --board-card-bg-color: #fff;
-  --board-card-bg-hover: rgb(252, 252, 252);
-  --board-card-shadow: rgb(0 0 0 / 6%) 0px 0px 1px;
   --accent-bg-color: #eff0f2;  // HZ
   --accent-shadow: rgb(0 0 0 / 10%) 0px 2px 4px;  // Dark
 
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 5a54f3fd5d..6bb9e656cb 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -894,7 +894,7 @@ a.no-line {
   &:hover { color: var(--theme-caption-color); }
 }
 
-.background-body-color { background-color: var(--body-color); }
+.background-body-color { background-color: var(--theme-bg-color); }
 .background-accent-bg-color { background-color: var(--accent-bg-color); }
 .background-highlight-select { background-color: var(--highlight-select); }
 .background-highlight-red { background-color: var(--highlight-red); }
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index 60e0519f13..867e07e4b7 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -138,6 +138,7 @@
     .an-element__label { padding-left: .5rem; }
   }
   .an-element__icon {
+    flex-shrink: 0;
     min-width: 1rem;
     color: var(--theme-dark-color);
 
@@ -379,7 +380,7 @@
   height: 1px;
   background-color: var(--theme-divider-color);
 
-  &.dark { background-color: var(--body-accent); }
+  &.dark { background-color: var(--theme-bg-accent-color); }
   &.noMargin { margin: 0; }
   & + & { display: none; }
 }
@@ -528,7 +529,7 @@
 
   &:hover,
   &.focusable:focus-within {
-    // background-color: var(--body-color);
+    // background-color: var(--theme-bg-color);
     border-color: var(--theme-list-divider-color);
   }
 }
@@ -543,17 +544,14 @@
   .description {
     // overflow: hidden;
     padding: 0.75rem;
-    background-color: var(--body-accent);
-    border: 1px solid var(--button-border-color);
+    background-color: var(--theme-bg-color);
+    border: 1px solid var(--theme-divider-color);
     // border-radius: .5rem;
     transition-property: background-color, height;
     transition-duration: .15s;
     transition-timing-function: var(--timing-main);
 
-    .label {
-      color: var(--dark-color);
-      text-shadow: var(--button-shadow);
-    }
+    .label { color: var(--theme-dark-color); }
     .caption {
       display: flex;
       align-items: center;
@@ -567,8 +565,8 @@
 
       font-weight: 500;
       font-size: 1rem;
-      color: var(--caption-color);
-      background: var(--popup-bg-color);
+      color: var(--theme-caption-color);
+      background-color: var(--theme-comp-header-color);
       border: 1px solid transparent;
       border-radius: .125rem;
       transition: margin-bottom .15s var(--timing-main),
@@ -644,9 +642,9 @@
     &:not(:first-child):not(:last-child) { border-top: none; }
 
     &:hover,
-    &:focus-within { background-color: var(--body-color); }
-    // &:focus-within .caption { box-shadow: 0 0 2px 1px var(--primary-edit-border-color); }
-    &:focus-within .caption { border-color: var(--primary-edit-border-color); }
+    &:focus-within { background-color: var(--theme-bg-color); }
+    // &:focus-within .caption { box-shadow: 0 0 2px 1px var(--accented-button-outline); }
+    &:focus-within .caption { border-color: var(--accented-button-outline); }
   }
 }
 
diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss
index 13e41ce5f6..1227ae872f 100644
--- a/packages/theme/styles/global.scss
+++ b/packages/theme/styles/global.scss
@@ -67,7 +67,7 @@
 * {
   box-sizing: border-box;
   touch-action: manipulation;
-  scrollbar-color: var(--body-accent) var(--board-bg-color);
+  scrollbar-color: var(--theme-comp-header-color) var(--theme-back-color);
   scrollbar-width: none;
   --body-font-size: .875rem;
   --panel-aside-width: 25rem; // 20rem;
diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss
index eb2e0c95ff..1b781dc4b4 100644
--- a/packages/theme/styles/panel.scss
+++ b/packages/theme/styles/panel.scss
@@ -262,17 +262,6 @@
           box-shadow: var(--popup-aside-shadow);
           transform: translateX(-100%);
           visibility: visible;
-
-          &::after {
-            position: absolute;
-            content: '';
-            top: 0;
-            left: 100%;
-            width: 360px;
-            height: 100%;
-            background-color: var(--board-card-bg-color);
-            border: 1px solid var(--board-card-bg-color);
-          }
         }
       }
 
diff --git a/packages/ui/src/components/Dialog.svelte b/packages/ui/src/components/Dialog.svelte
index e6344f2233..74a5911a9c 100644
--- a/packages/ui/src/components/Dialog.svelte
+++ b/packages/ui/src/components/Dialog.svelte
@@ -74,7 +74,7 @@
     height: 100vh;
     min-height: 100vh;
     max-height: 100vh;
-    background-color: var(--body-color);
+    background-color: var(--theme-bg-color);
     border-radius: 1.875rem 0 0 1.875rem;
     box-shadow: 0px 3.125rem 7.5rem rgba(0, 0, 0, 0.4);
 
diff --git a/packages/ui/src/components/Panel.svelte b/packages/ui/src/components/Panel.svelte
index fd6863e786..166ad3c033 100644
--- a/packages/ui/src/components/Panel.svelte
+++ b/packages/ui/src/components/Panel.svelte
@@ -13,7 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { afterUpdate, createEventDispatcher } from 'svelte'
+  import { afterUpdate, createEventDispatcher, onMount } from 'svelte'
   import { deviceOptionsStore as deviceInfo } from '../../'
   import { resizeObserver } from '../resize'
   import Button from './Button.svelte'
@@ -76,6 +76,8 @@
       checkPanel()
     }, 500)
   })
+
+  onMount(() => dispatch('open'))
 </script>
 
 <div
diff --git a/packages/ui/src/components/PanelInstance.svelte b/packages/ui/src/components/PanelInstance.svelte
index ea11b780c1..54d90f242c 100644
--- a/packages/ui/src/components/PanelInstance.svelte
+++ b/packages/ui/src/components/PanelInstance.svelte
@@ -117,7 +117,6 @@
   onMount(() => {
     if (props) fitPopup(props, contentPanel)
   })
-  $: console.log('[!!!] element: ', props?.element)
 </script>
 
 <svelte:window
diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte
index 165e4aee57..90626e71a7 100644
--- a/packages/ui/src/components/Scroller.svelte
+++ b/packages/ui/src/components/Scroller.svelte
@@ -29,14 +29,16 @@
   export let fade: FadeOptions = defaultSP
   export let noFade: boolean = true
   export let invertScroll: boolean = false
-  export let horizontal: boolean = false
   export let contentDirection: 'vertical' | 'vertical-reverse' | 'horizontal' = 'vertical'
+  export let horizontal: boolean = contentDirection === 'horizontal'
   export let gap: string | undefined = undefined
   export let noStretch: boolean = autoscroll
   export let buttons: 'normal' | 'union' | false = false
   export let shrink: boolean = false
   export let divScroll: HTMLElement | undefined = undefined
-  export let checkForHeaders = false
+  export let checkForHeaders: boolean = false
+  export let stickedScrollBars: boolean = false
+  export let thinScrollBars: boolean = false
 
   export function scroll (top: number, left?: number, behavior: 'auto' | 'smooth' = 'auto') {
     if (divScroll) {
@@ -458,10 +460,12 @@
   class="scroller-container {orientir} {invertScroll ? 'invert' : 'normal'}"
   class:buttons={buttons === 'normal'}
   class:union={buttons === 'union'}
+  class:sticked={stickedScrollBars}
+  class:thin={thinScrollBars}
   class:shrink
   style:user-select={isScrolling ? 'none' : 'inherit'}
   style:--scroller-header-height={`${(fade.multipler?.top ?? 0) * fz + 2}px`}
-  style:--scroller-footer-height={`${(fade.multipler?.bottom ?? 0) * fz + 2}px`}
+  style:--scroller-footer-height={`${(fade.multipler?.bottom ?? 0) * fz + (stickedScrollBars ? 0 : 2)}px`}
   style:--scroller-left-offset={`${(fade.multipler?.left ?? 0) * fz + 2}px`}
   style:--scroller-right-offset={`${(fade.multipler?.right ?? 0) * fz + (mask !== 'none' ? 12 : 2)}px`}
 >
@@ -817,4 +821,37 @@
       }
     }
   }
+
+  .scroller-container.sticked,
+  .scroller-container.thin {
+    .bar,
+    .track {
+      transform-origin: center right;
+    }
+    .bar-horizontal,
+    .track-horizontal {
+      transform-origin: bottom center;
+    }
+  }
+
+  .scroller-container.sticked {
+    .bar,
+    .track {
+      right: 0;
+    }
+    .bar-horizontal,
+    .track-horizontal {
+      bottom: var(--scroller-footer-height, 0);
+    }
+  }
+  .scroller-container.thin {
+    .bar,
+    .track {
+      width: 6px;
+    }
+    .bar-horizontal,
+    .track-horizontal {
+      height: 6px;
+    }
+  }
 </style>
diff --git a/packages/ui/src/components/ScrollerBar.svelte b/packages/ui/src/components/ScrollerBar.svelte
index 335cc28c11..d378849f96 100644
--- a/packages/ui/src/components/ScrollerBar.svelte
+++ b/packages/ui/src/components/ScrollerBar.svelte
@@ -163,7 +163,7 @@
     background-color: var(--scrollbar-bar-color);
     border-radius: 0.125rem;
     opacity: 0;
-    box-shadow: 0 0 1px 1px var(--board-bg-color);
+    box-shadow: 0 0 1px 1px var(--theme-bg-accent-color);
     cursor: pointer;
     z-index: 1;
     transition: all 0.15s;
diff --git a/packages/ui/src/components/Timeline.svelte b/packages/ui/src/components/Timeline.svelte
index 02c49d2f21..d3650012a3 100644
--- a/packages/ui/src/components/Timeline.svelte
+++ b/packages/ui/src/components/Timeline.svelte
@@ -451,7 +451,7 @@
     flex-shrink: 0;
     padding: 0 2.25rem;
     height: 100%;
-    background-color: var(--body-accent);
+    background-color: var(--theme-comp-header-color);
     box-shadow: var(--accent-shadow);
     // z-index: 2;
   }
@@ -460,7 +460,7 @@
     position: relative;
     flex-grow: 1;
     height: 100%;
-    background-color: var(--body-color);
+    background-color: var(--theme-bg-color);
     mask-image: linear-gradient(
       90deg,
       rgba(0, 0, 0, 0) 0,
@@ -542,7 +542,7 @@
   }
   .timeline-background__headers {
     left: 0;
-    background-color: var(--body-accent);
+    background-color: var(--theme-comp-header-color);
   }
   .timeline-background__viewbox,
   .timeline-foreground__viewbox {
diff --git a/plugins/attachment-resources/src/components/AttachmentGalleryPresenter.svelte b/plugins/attachment-resources/src/components/AttachmentGalleryPresenter.svelte
index 58a6ce10ac..aea6cfe027 100644
--- a/plugins/attachment-resources/src/components/AttachmentGalleryPresenter.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentGalleryPresenter.svelte
@@ -115,7 +115,7 @@
     border-radius: 0.75rem;
     justify-content: space-between;
     overflow: hidden;
-    border: 1px solid var(--divider-color);
+    border: 1px solid var(--theme-divider-color);
   }
 
   .cellImagePreview {
@@ -123,7 +123,7 @@
     justify-content: center;
     height: 10rem;
     overflow: hidden;
-    background-color: var(--body-color);
+    background-color: var(--theme-bg-color);
     cursor: pointer;
   }
 
@@ -143,10 +143,11 @@
   .cellInfo {
     display: flex;
     flex-direction: row;
-    border-top: 1px solid var(--divider-color);
+    align-items: center;
     padding: 0.75rem;
     height: 4rem;
-    align-items: center;
+    background-color: var(--theme-bg-accent-color);
+    border-top: 1px solid var(--theme-divider-color);
 
     .eCellInfoData {
       display: flex;
@@ -163,14 +164,14 @@
 
     .eCellInfoFilename {
       font-weight: 500;
-      color: var(--accent-color);
+      color: var(--theme-caption-color);
       white-space: nowrap;
       cursor: pointer;
     }
 
     .eCellInfoFilesize {
       font-size: 0.75rem;
-      color: var(--dark-color);
+      color: var(--theme-dark-color);
     }
   }
 
@@ -195,7 +196,7 @@
   .cellMiscPreview:hover + .cellInfo .eCellInfoFilename a // not embedded on preview hover
   {
     text-decoration: underline;
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
   }
   .eCellInfoFilename:active,
   .extensionIcon:active + .eCellInfoData > .eCellInfoFilename, // embedded on extension hover
@@ -205,6 +206,6 @@
   .cellMiscPreview:active + .cellInfo .eCellInfoFilename a // not embedded on preview hover
   {
     text-decoration: underline;
-    color: var(--accent-color);
+    color: var(--theme-caption-color);
   }
 </style>
diff --git a/plugins/attachment-resources/src/components/AttachmentPreview.svelte b/plugins/attachment-resources/src/components/AttachmentPreview.svelte
index 9204b19efb..54f3aae65b 100644
--- a/plugins/attachment-resources/src/components/AttachmentPreview.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentPreview.svelte
@@ -105,9 +105,9 @@
       top: 0.25rem;
       right: 0.25rem;
       padding: 0.25rem;
-      background-color: var(--button-bg-color);
+      background-color: var(--theme-comp-header-color);
+      border: 1px solid var(--theme-divider-color);
       border-radius: 0.75rem;
-      box-shadow: var(--board-card-shadow);
 
       &.conner {
         top: 0;
diff --git a/plugins/attachment-resources/src/components/AttachmentsGalleryView.svelte b/plugins/attachment-resources/src/components/AttachmentsGalleryView.svelte
index 8ff6baf5d3..6577ee1b92 100644
--- a/plugins/attachment-resources/src/components/AttachmentsGalleryView.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentsGalleryView.svelte
@@ -81,9 +81,9 @@
       display: flex;
       visibility: hidden;
       padding: 0.5rem;
-      border: 1px solid var(--divider-color);
+      background-color: var(--theme-comp-header-color);
+      border: 1px solid var(--theme-divider-color);
       border-radius: 0.25rem;
-      background-color: var(--board-bg-color);
     }
 
     .eAttachmentCellMenu {
diff --git a/plugins/chunter-resources/src/components/EditChannel.svelte b/plugins/chunter-resources/src/components/EditChannel.svelte
index ccf2958881..fe8b1be205 100644
--- a/plugins/chunter-resources/src/components/EditChannel.svelte
+++ b/plugins/chunter-resources/src/components/EditChannel.svelte
@@ -45,6 +45,8 @@
 <Panel
   isHeader={false}
   isAside={_class === chunter.class.Channel}
+  on:open
+  on:update
   on:close={() => {
     dispatch('close')
   }}
diff --git a/plugins/chunter-resources/src/components/Replies.svelte b/plugins/chunter-resources/src/components/Replies.svelte
index 87ce0a919d..390b700215 100644
--- a/plugins/chunter-resources/src/components/Replies.svelte
+++ b/plugins/chunter-resources/src/components/Replies.svelte
@@ -74,7 +74,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      background-color: var(--body-color);
+      background-color: var(--theme-bg-color);
       border-radius: 50%;
 
       span {
@@ -87,7 +87,7 @@
         font-weight: 500;
         line-height: 0.5;
         color: var(--caption-color);
-        background-color: var(--body-accent);
+        background-color: var(--theme-bg-accent-color);
         border-radius: 50%;
       }
     }
@@ -98,7 +98,7 @@
 
     &:hover {
       border: 1px solid var(--button-border-hover);
-      background-color: var(--body-color);
+      background-color: var(--theme-bg-color);
     }
   }
 </style>
diff --git a/plugins/chunter-resources/src/components/SavedMessages.svelte b/plugins/chunter-resources/src/components/SavedMessages.svelte
index b729ed067b..549157b991 100644
--- a/plugins/chunter-resources/src/components/SavedMessages.svelte
+++ b/plugins/chunter-resources/src/components/SavedMessages.svelte
@@ -151,7 +151,7 @@
     padding: 2rem;
 
     &:hover {
-      background-color: var(--board-card-bg-hover);
+      background-color: var(--highlight-hover);
     }
 
     .label {
diff --git a/plugins/contact-resources/src/components/AssigneePopup.svelte b/plugins/contact-resources/src/components/AssigneePopup.svelte
index 7aaea6d6cf..34b24d7675 100644
--- a/plugins/contact-resources/src/components/AssigneePopup.svelte
+++ b/plugins/contact-resources/src/components/AssigneePopup.svelte
@@ -224,7 +224,7 @@
 <style lang="scss">
   .plainContainer {
     color: var(--caption-color);
-    background-color: var(--body-color);
+    background-color: var(--theme-bg-color);
     border: 1px solid var(--button-border-color);
     border-radius: 0.25rem;
     box-shadow: none;
diff --git a/plugins/contact-resources/src/components/EditEmployee.svelte b/plugins/contact-resources/src/components/EditEmployee.svelte
index 67c89aeca5..b7dfcbbe84 100644
--- a/plugins/contact-resources/src/components/EditEmployee.svelte
+++ b/plugins/contact-resources/src/components/EditEmployee.svelte
@@ -20,7 +20,7 @@
   import { getResource } from '@hcengineering/platform'
   import { AttributeEditor, createQuery, getClient } from '@hcengineering/presentation'
   import setting, { IntegrationType } from '@hcengineering/setting'
-  import { createFocusManager, EditBox, FocusHandler } from '@hcengineering/ui'
+  import { createFocusManager, EditBox, FocusHandler, Scroller } from '@hcengineering/ui'
   import { createEventDispatcher, onMount } from 'svelte'
   import { ChannelsDropdown } from '..'
   import contact from '../plugin'
@@ -103,7 +103,7 @@
 
 {#if object !== undefined}
   <div class="flex-row-stretch flex-grow">
-    <div class="mr-8">
+    <div class="flex-no-shrink mr-8">
       {#key object}
         {#if editable}
           <EditableAvatar
@@ -120,60 +120,51 @@
       {/key}
     </div>
     <div class="flex-grow flex-col">
-      <div class="flex-grow flex-col">
-        <div class="name select-text">
-          {#if owner}
-            <EditBox
-              placeholder={contact.string.PersonFirstNamePlaceholder}
-              bind:value={firstName}
-              disabled={!editable}
-              on:change={firstNameChange}
-              focusIndex={1}
-            />
-          {:else}
-            {firstName}
-          {/if}
-        </div>
-        <div class="name select-text">
-          {#if owner}
-            <EditBox
-              placeholder={contact.string.PersonLastNamePlaceholder}
-              bind:value={lastName}
-              on:change={lastNameChange}
-              disabled={!editable}
-              focusIndex={2}
-            />
-          {:else}
-            {lastName}
-          {/if}
-        </div>
-        <div class="name">
-          {#if editable}
-            <EditBox
-              placeholder={contact.string.DisplayName}
-              bind:value={displayName}
-              on:change={changeDisplayName}
-              disabled={!editable}
-              focusIndex={1}
-            />
-          {:else}
-            {displayName}
-          {/if}
-        </div>
-        <div class="location">
-          <AttributeEditor
-            maxWidth="20rem"
-            _class={contact.class.Person}
-            {editable}
-            {object}
-            key="city"
-            focusIndex={3}
+      <div class="name select-text">
+        {#if owner}
+          <EditBox
+            placeholder={contact.string.PersonFirstNamePlaceholder}
+            bind:value={firstName}
+            disabled={!editable}
+            on:change={firstNameChange}
+            focusIndex={1}
+          />
+        {:else}
+          {firstName}
+        {/if}
+      </div>
+      <div class="name select-text">
+        {#if owner}
+          <EditBox
+            placeholder={contact.string.PersonLastNamePlaceholder}
+            bind:value={lastName}
+            on:change={lastNameChange}
+            disabled={!editable}
+            focusIndex={2}
+          />
+        {:else}
+          {lastName}
+        {/if}
+      </div>
+      <div class="name">
+        {#if editable}
+          <EditBox
+            placeholder={contact.string.DisplayName}
+            bind:value={displayName}
+            on:change={changeDisplayName}
+            disabled={!editable}
+            focusIndex={1}
           />
-        </div>
+        {:else}
+          {displayName}
+        {/if}
+      </div>
+      <div class="location">
+        <AttributeEditor maxWidth="20rem" _class={contact.class.Person} {editable} {object} key="city" focusIndex={3} />
       </div>
 
       <div class="separator" />
-      <div class="flex-row-center">
+      <Scroller contentDirection={'horizontal'} padding={'.125rem .125rem .5rem'} stickedScrollBars thinScrollBars>
         {#if channels === undefined}
           <ChannelsEditor
             attachedTo={object._id}
@@ -193,7 +184,7 @@
             shape={'circle'}
           />
         {/if}
-      </div>
+      </Scroller>
     </div>
   </div>
 {/if}
diff --git a/plugins/contact-resources/src/components/EditOrganization.svelte b/plugins/contact-resources/src/components/EditOrganization.svelte
index 69f4d6f543..077da50c33 100644
--- a/plugins/contact-resources/src/components/EditOrganization.svelte
+++ b/plugins/contact-resources/src/components/EditOrganization.svelte
@@ -18,7 +18,7 @@
   import { getCurrentAccount, Ref } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import setting, { IntegrationType } from '@hcengineering/setting'
-  import { createFocusManager, EditBox, FocusHandler } from '@hcengineering/ui'
+  import { createFocusManager, EditBox, FocusHandler, Scroller } from '@hcengineering/ui'
   import { createEventDispatcher, onMount } from 'svelte'
   import contact from '../plugin'
   import ChannelsEditor from './ChannelsEditor.svelte'
@@ -52,7 +52,7 @@
 
 {#if object !== undefined}
   <div class="flex-row-center">
-    <div class="mr-8 flex-center logo">
+    <div class="mr-8 flex-center flex-no-shrink logo">
       <Company size={'large'} />
     </div>
     <div class="flex-grow flex-col">
@@ -65,9 +65,9 @@
         />
       </div>
       <div class="separator" />
-      <div class="flex-row-center">
+      <Scroller contentDirection={'horizontal'} padding={'.125rem .125rem .5rem'} stickedScrollBars thinScrollBars>
         <ChannelsEditor attachedTo={object._id} attachedClass={object._class} {integrations} focusIndex={10} on:click />
-      </div>
+      </Scroller>
     </div>
   </div>
 {/if}
diff --git a/plugins/contact-resources/src/components/EditPerson.svelte b/plugins/contact-resources/src/components/EditPerson.svelte
index 6c75daf10a..751bf6af57 100644
--- a/plugins/contact-resources/src/components/EditPerson.svelte
+++ b/plugins/contact-resources/src/components/EditPerson.svelte
@@ -18,7 +18,7 @@
   import { getCurrentAccount, Ref } from '@hcengineering/core'
   import { AttributeEditor, createQuery, getClient } from '@hcengineering/presentation'
   import setting, { IntegrationType } from '@hcengineering/setting'
-  import { createFocusManager, EditBox, FocusHandler } from '@hcengineering/ui'
+  import { createFocusManager, EditBox, FocusHandler, Scroller } from '@hcengineering/ui'
   import { createEventDispatcher, onMount } from 'svelte'
   import contact from '../plugin'
   import ChannelsEditor from './ChannelsEditor.svelte'
@@ -81,7 +81,7 @@
 
 {#if object !== undefined}
   <div class="flex-row-stretch flex-grow">
-    <div class="mr-8">
+    <div class="flex-no-shrink mr-8">
       {#key object}
         <EditableAvatar
           avatar={object.avatar}
@@ -93,30 +93,28 @@
       {/key}
     </div>
     <div class="flex-grow flex-col">
-      <div class="flex-grow flex-col">
-        <div class="name">
-          <EditBox
-            placeholder={contact.string.PersonFirstNamePlaceholder}
-            bind:value={firstName}
-            on:change={firstNameChange}
-            focusIndex={1}
-          />
-        </div>
-        <div class="name">
-          <EditBox
-            placeholder={contact.string.PersonLastNamePlaceholder}
-            bind:value={lastName}
-            on:change={lastNameChange}
-            focusIndex={2}
-          />
-        </div>
-        <div class="location">
-          <AttributeEditor maxWidth="20rem" _class={contact.class.Person} {object} key="city" focusIndex={3} />
-        </div>
+      <div class="name">
+        <EditBox
+          placeholder={contact.string.PersonFirstNamePlaceholder}
+          bind:value={firstName}
+          on:change={firstNameChange}
+          focusIndex={1}
+        />
+      </div>
+      <div class="name">
+        <EditBox
+          placeholder={contact.string.PersonLastNamePlaceholder}
+          bind:value={lastName}
+          on:change={lastNameChange}
+          focusIndex={2}
+        />
+      </div>
+      <div class="location">
+        <AttributeEditor maxWidth="20rem" _class={contact.class.Person} {object} key="city" focusIndex={3} />
       </div>
 
       <div class="separator" />
-      <div class="flex-row-center">
+      <Scroller contentDirection={'horizontal'} padding={'.125rem .125rem .5rem'} stickedScrollBars thinScrollBars>
         <ChannelsEditor
           attachedTo={object._id}
           attachedClass={object._class}
@@ -124,7 +122,7 @@
           shape={'circle'}
           focusIndex={10}
         />
-      </div>
+      </Scroller>
     </div>
   </div>
 {/if}
diff --git a/plugins/contact-resources/src/components/SpaceMembers.svelte b/plugins/contact-resources/src/components/SpaceMembers.svelte
index 605448c928..9b8584c53f 100644
--- a/plugins/contact-resources/src/components/SpaceMembers.svelte
+++ b/plugins/contact-resources/src/components/SpaceMembers.svelte
@@ -104,6 +104,7 @@
     {/if}
     {#if !isSearch && withAddButton}
       <div class="item fs-title">
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div class="flex-row-center" on:click={openAddMembersPopup}>
           <div class="flex-center ml-1 mr-1"><IconAdd size={'large'} /></div>
           <div class="flex-col ml-2 min-w-0 content-color">
@@ -133,6 +134,7 @@
         {#each foreign as person}
           <div class="item flex-between">
             <div class="fs-title"><UserInfo size={'medium'} value={person} /></div>
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
             <div class="over-underline" on:click={() => add(person._id)}>
               <Label label={presentation.string.Add} />
             </div>
@@ -145,23 +147,23 @@
 
 <style lang="scss">
   .notIn {
-    background-color: var(--body-accent);
+    background-color: var(--theme-bg-accent-color);
   }
 
   .divider {
-    background-color: var(--divider-color);
+    background-color: var(--theme-divider-color);
     height: 1px;
   }
 
   .item {
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
     cursor: pointer;
     padding: 0.5rem 1rem;
     border-radius: 0.25rem;
 
     &:hover,
     &:focus {
-      background-color: var(--popup-bg-hover);
+      background-color: var(--theme-button-hovered);
     }
   }
 </style>
diff --git a/plugins/document-resources/src/components/EditDoc.svelte b/plugins/document-resources/src/components/EditDoc.svelte
index 51eda1e453..7cbc89eb68 100644
--- a/plugins/document-resources/src/components/EditDoc.svelte
+++ b/plugins/document-resources/src/components/EditDoc.svelte
@@ -568,7 +568,7 @@
   }
   .emphasized {
     padding: 1rem;
-    background-color: var(--body-color);
+    background-color: var(--theme-bg-color);
     border: 1px solid var(--divider-color);
     border-radius: 0.5rem;
     transition: border-color 0.1s var(--timing-main), box-shadow 0.1s var(--timing-main);
diff --git a/plugins/recruit-resources/src/components/EditApplication.svelte b/plugins/recruit-resources/src/components/EditApplication.svelte
index 49d4d28970..b3b10b4fd5 100644
--- a/plugins/recruit-resources/src/components/EditApplication.svelte
+++ b/plugins/recruit-resources/src/components/EditApplication.svelte
@@ -62,7 +62,7 @@
 </script>
 
 {#if object !== undefined && candidate !== undefined}
-  <Scroller horizontal>
+  <Scroller horizontal stickedScrollBars>
     <div class="flex-between min-w-min">
       <div class="card"><CandidateCard {candidate} on:click /></div>
       <div class="flex-center arrows"><ExpandRightDouble /></div>
diff --git a/plugins/recruit-resources/src/components/MoveApplication.svelte b/plugins/recruit-resources/src/components/MoveApplication.svelte
index c467f85141..fe6d01c92a 100644
--- a/plugins/recruit-resources/src/components/MoveApplication.svelte
+++ b/plugins/recruit-resources/src/components/MoveApplication.svelte
@@ -31,6 +31,7 @@
     deviceOptionsStore as deviceInfo,
     getColorNumberByText,
     getPlatformColorDef,
+    defaultBackground,
     showPopup,
     themeStore
   } from '@hcengineering/ui'
@@ -116,6 +117,10 @@
   let verticalContent: boolean = false
   $: verticalContent = $deviceInfo.isMobile && $deviceInfo.isPortrait
   let btn: HTMLButtonElement
+
+  $: color = selectedState
+    ? getPlatformColorDef(selectedState.color ?? getColorNumberByText(selectedState.name), $themeStore.dark)
+    : undefined
 </script>
 
 <FocusHandler {manager} />
@@ -137,7 +142,7 @@
   </svelte:fragment>
   <StatusControl slot="error" {status} />
   <div class:candidate-vacancy={!verticalContent} class:flex-col={verticalContent}>
-    <div class="flex flex-stretch vacancyList">
+    <div class="vacancyList">
       <ListView count={selected.length}>
         <svelte:fragment slot="item" let:item>
           <ApplicationPresenter value={selected[item]} />
@@ -176,9 +181,8 @@
     {#if states.length > 0}
       <Button
         focusIndex={3}
-        width="min-content"
-        size="small"
-        kind="no-border"
+        width={'min-content'}
+        size={'large'}
         bind:input={btn}
         on:click={() => {
           showPopup(
@@ -196,13 +200,7 @@
       >
         <div slot="content" class="flex-row-center" class:empty={!selectedState}>
           {#if selectedState}
-            <div
-              class="color"
-              style="background-color: {getPlatformColorDef(
-                selectedState.color ?? getColorNumberByText(selectedState.name),
-                $themeStore.dark
-              ).background}"
-            />
+            <div class="color" style:background-color={color?.color ?? defaultBackground($themeStore.dark)} />
             <span class="label overflow-label">{selectedState.name}</span>
           {:else}
             <div class="color" />
@@ -240,23 +238,23 @@
 
   .empty {
     .color {
-      border-color: var(--content-color);
+      border-color: var(--theme-content-color);
     }
     .label {
-      color: var(--content-color);
+      color: var(--theme-content-color);
     }
     &:hover .color {
-      border-color: var(--accent-color);
+      border-color: var(--theme-caption-color);
     }
     &:hover .label {
-      color: var(--accent-color);
+      color: var(--theme-caption-color);
     }
   }
 
   .vacancyList {
     padding: 1rem 1.5rem 1.25rem;
-    background-color: var(--board-card-bg-color);
-    border: 1px solid var(--divider-color);
+    background-color: var(--theme-button-default);
+    border: 1px solid var(--theme-button-border);
     border-radius: 0.5rem;
     transition-property: box-shadow, background-color, border-color;
     transition-timing-function: var(--timing-shadow);
@@ -266,8 +264,6 @@
     min-height: 15rem;
 
     &:hover {
-      background-color: var(--board-card-bg-hover);
-      border-color: var(--button-border-color);
       box-shadow: var(--accent-shadow);
     }
   }
diff --git a/plugins/request-resources/src/components/RequestView.svelte b/plugins/request-resources/src/components/RequestView.svelte
index 90c946f98f..5ccf4947e6 100644
--- a/plugins/request-resources/src/components/RequestView.svelte
+++ b/plugins/request-resources/src/components/RequestView.svelte
@@ -64,7 +64,7 @@
 
 <style lang="scss">
   .container {
-    background-color: var(--body-color);
+    background-color: var(--theme-bg-color);
     padding: 0.5rem 0.75rem 0.75rem;
     min-height: 0;
     border-radius: 0.75rem;
diff --git a/plugins/request-resources/src/components/TxView.svelte b/plugins/request-resources/src/components/TxView.svelte
index 9addd51514..4612598b0f 100644
--- a/plugins/request-resources/src/components/TxView.svelte
+++ b/plugins/request-resources/src/components/TxView.svelte
@@ -202,7 +202,7 @@
 
   .emphasized {
     margin-top: 0.5rem;
-    background-color: var(--body-color);
+    background-color: var(--theme-bg-color);
     border: 1px solid var(--divider-color);
     border-radius: 0.5rem;
     padding: 0.75rem 1rem;
diff --git a/plugins/tags-resources/src/components/CategoryBar.svelte b/plugins/tags-resources/src/components/CategoryBar.svelte
index 8a6e2f4db0..dd5c341ade 100644
--- a/plugins/tags-resources/src/components/CategoryBar.svelte
+++ b/plugins/tags-resources/src/components/CategoryBar.svelte
@@ -209,14 +209,4 @@
   .categoryElement + .categoryElement {
     margin-left: 0.125rem;
   }
-
-  .header {
-    padding: 0.75rem 0.75rem 0.75rem 2.5rem;
-    background-color: var(--board-bg-color);
-    border-top: 1px solid var(--divider-color);
-
-    .states {
-      max-width: 75%;
-    }
-  }
 </style>
diff --git a/plugins/task-resources/src/components/state/StatePresenter.svelte b/plugins/task-resources/src/components/state/StatePresenter.svelte
index 886a6dc7a7..abfb553786 100644
--- a/plugins/task-resources/src/components/state/StatePresenter.svelte
+++ b/plugins/task-resources/src/components/state/StatePresenter.svelte
@@ -52,7 +52,7 @@
         class="state-container"
         class:inline
         class:mr-2={shouldShowName}
-        style="background-color: {color?.color ?? defaultBackground($themeStore.dark)}"
+        style:background-color={color?.color ?? defaultBackground($themeStore.dark)}
         title={shouldShowTooltip ? value.name : undefined}
       />
     {/if}
diff --git a/plugins/tracker-resources/src/components/components/LeadPopup.svelte b/plugins/tracker-resources/src/components/components/LeadPopup.svelte
index c2ad7bee19..9b78d6fc57 100644
--- a/plugins/tracker-resources/src/components/components/LeadPopup.svelte
+++ b/plugins/tracker-resources/src/components/components/LeadPopup.svelte
@@ -39,7 +39,6 @@
   .root {
     display: flex;
     width: 20rem;
-    background-color: var(--board-card-bg-color);
   }
 
   .icon {
@@ -58,7 +57,7 @@
   }
 
   .title {
-    color: var(--content-color);
+    color: var(--theme-caption-color);
     font-weight: 500;
   }
 
diff --git a/plugins/view-resources/src/components/Move.svelte b/plugins/view-resources/src/components/Move.svelte
index 1d19d9dc75..6f8c9989fd 100644
--- a/plugins/view-resources/src/components/Move.svelte
+++ b/plugins/view-resources/src/components/Move.svelte
@@ -148,7 +148,7 @@
 
     .spaceSelect {
       padding: 0.75rem;
-      background-color: var(--body-color);
+      background-color: var(--theme-bg-color);
       border: 1px solid var(--popup-divider);
       border-radius: 0.75rem;
     }
diff --git a/plugins/view-resources/src/components/filter/FilterRemovedNotification.svelte b/plugins/view-resources/src/components/filter/FilterRemovedNotification.svelte
index 634c875710..65ca45a73f 100644
--- a/plugins/view-resources/src/components/filter/FilterRemovedNotification.svelte
+++ b/plugins/view-resources/src/components/filter/FilterRemovedNotification.svelte
@@ -32,7 +32,7 @@
     width: 400px;
     overflow: hidden;
     color: var(--caption-color);
-    background-color: var(--body-color);
+    background-color: var(--theme-bg-color);
     border: 1px solid var(--divider-color);
     border-radius: 6px;
     padding: 10px;