diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte
index 81df5f25db..62ca07aa35 100644
--- a/packages/panel/src/components/Panel.svelte
+++ b/packages/panel/src/components/Panel.svelte
@@ -19,7 +19,7 @@
   import type { Doc } from '@anticrm/core'
   import notification from '@anticrm/notification'
   import type { Asset } from '@anticrm/platform'
-  import { ActionIcon, AnyComponent, AnySvelteComponent, Component, IconExpand, Panel, Scroller } from '@anticrm/ui'
+  import { Button, AnyComponent, AnySvelteComponent, Component, IconExpand, Panel, Scroller } from '@anticrm/ui'
   import { PopupAlignment } from '@anticrm/ui'
 
   export let title: string
@@ -40,18 +40,14 @@
   <svelte:fragment slot="subtitle">
     <slot name="subtitle" />
   </svelte:fragment>
-  <svelte:fragment slot='navigate-actions'>
-    <slot name='navigate-actions'/>
+  <svelte:fragment slot="navigate-actions">
+    <slot name="navigate-actions" />
   </svelte:fragment>
   <svelte:fragment slot="commands">
-    <div class='flex-row-center'>
+    <div class="buttons-group xsmall-gap">
       <slot name="actions" />
-    </div>
-    <div class='flex-row-center flex-grow gap-2'>
       <Component is={calendar.component.DocReminder} props={{ value: object, title }} />
-      <div class="ml-2">
-        <Component is={notification.component.LastViewEditor} props={{ value: object }} />
-      </div>
+      <Component is={notification.component.LastViewEditor} props={{ value: object }} />
     </div>
   </svelte:fragment>
 
@@ -64,15 +60,14 @@
   </svelte:fragment>
   <svelte:fragment slot="actions">
     {#if allowFullSize}
-      <div class="tool">
-        <ActionIcon
-          icon={IconExpand}
-          size={'medium'}
-          action={() => {
-            fullSize = !fullSize
-          }}
-        />
-      </div>
+      <Button
+        icon={IconExpand}
+        size={'medium'}
+        kind={'transparent'}
+        on:click={() => {
+          fullSize = !fullSize
+        }}
+      />
     {/if}    
   </svelte:fragment>
   {#if isFullSize}
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 6c281c5aab..e770439ec9 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -585,6 +585,9 @@ a.no-line {
 }
 
 /* Backgrounds & Colors */
+.background-body-color { background-color: var(--body-color); }
+.background-accent-bg-color { background-color: var(--accent-bg-color); }
+
 .background-theme-content-accent { background-color: var(--theme-content-accent-color); }
 .background-theme-bg-color { background-color: var(--theme-bg-color); }
 .background-highlight-red { background-color: var(--highlight-red); }
diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss
index cc6d40990f..1404f161bc 100644
--- a/packages/theme/styles/panel.scss
+++ b/packages/theme/styles/panel.scss
@@ -19,12 +19,16 @@
   min-width: 400px;
 
   background: var(--body-accent);
+  border: 1px solid var(--divider-color);
   border-radius: .5rem;
   flex-direction: row;
   box-shadow: var(--popup-shadow);
   // left: 1rem;
 
-  .ac-header.divide { border-bottom: 1px solid var(--theme-card-divider); }
+  .ac-header {
+    &.highlight { background-color: var(--accent-bg-color); }
+    &.divide { border-bottom: 1px solid var(--theme-card-divider); }
+  }
 
   .ad-section-50 {
     display: flex;
@@ -39,8 +43,9 @@
   .ad-tools {
     position: absolute;
     display: flex;
-    top: 1.375rem;
-    right: 2rem;
+    top: 1.25rem;
+    right: 1.25rem;
+
     &.grow-reverse {
       display: flex;
       flex-direction: row-reverse;
@@ -48,12 +53,5 @@
       align-items: center;
     }
   }
-  .tool {
-    margin-left: 1rem;
-    color: var(--theme-content-accent-color);
-    cursor: pointer;
-
-    &:hover { color: var(--theme-caption-color); }
-  }
 }
 
diff --git a/packages/ui/src/components/Panel.svelte b/packages/ui/src/components/Panel.svelte
index 98a73f7b02..bb44cb18e7 100644
--- a/packages/ui/src/components/Panel.svelte
+++ b/packages/ui/src/components/Panel.svelte
@@ -16,7 +16,7 @@
   import type { Asset } from '@anticrm/platform'
   import { createEventDispatcher } from 'svelte'
   import { AnySvelteComponent } from '../types'
-  import ActionIcon from './ActionIcon.svelte'
+  import Button from './Button.svelte'
   import Icon from './Icon.svelte'
   import IconClose from './icons/Close.svelte'
 
@@ -35,19 +35,22 @@
 <div class="antiPanel antiComponent" bind:clientWidth={innerWidth}>  
   <div class:panel-content={!rightSection} class:ad-section-50={rightSection} class:divide={rightSection}>    
     {#if showHeader}
-      <div class="ac-header short mirror divide">
-        <div class="tool flex-row-center">
-          <ActionIcon
+      <div class="ac-header short mirror divide highlight">
+        <div class="ml-2 mr-2">
+          <Button
             icon={IconClose}
             size={'medium'}
-            action={() => {
+            kind={'transparent'}
+            on:click={() => {
               dispatch('close')
             }} />
         </div>
         {#if $$slots['navigate-actions']}
-          <slot name="navigate-actions" />
+          <div class="buttons-group xxsmall-gap">
+            <slot name="navigate-actions" />
+          </div>
         {/if}
-        <div class="ac-header__wrap-title flex-grow">
+        <div class="ml-4 ac-header__wrap-title flex-grow">
           {#if icon}
             <div class="ac-header__icon">
               <Icon {icon} size={'large'} />
@@ -59,23 +62,27 @@
           </div>
         </div>
         {#if rightSection}
-          <div class="flex">
+          <div class="buttons-group xsmall-gap mr-4">
             <slot name="commands" />
           </div>
         {/if}
       </div>
     {:else}
       <div class="ac-header short mirror divide">
-        <div class="tool flex-row-center">
-          <ActionIcon
+        <div class="ml-2 mr-2">
+          <Button
             icon={IconClose}
             size={'medium'}
-            action={() => {
+            kind={'transparent'}
+            on:click={() => {
               dispatch('close')
-            }} />
+            }}
+          />
         </div>
         {#if $$slots['navigate-actions']}
-          <slot name="navigate-actions" />
+          <div class="buttons-group xxsmall-gap">
+            <slot name="navigate-actions" />
+          </div>
         {/if}
       </div>
     {/if}
@@ -95,11 +102,9 @@
     <slot name="rightSection" />
   {/if}
 
-  <div class="ad-tools flex-row-center flex-grow h-4" class:grow-reverse={reverseCommands}>
+  <div class="ad-tools buttons-group xsmall-gap h-4" class:grow-reverse={reverseCommands}>
     {#if !rightSection && $$slots.commands}
-      <div class="flex">
-        <slot name="commands" />
-      </div>
+      <slot name="commands" />
     {/if}
     <slot name="actions" />
   </div>
@@ -112,5 +117,4 @@
     flex-direction: column;
     align-content: stretch;
   }
-
 </style>
diff --git a/packages/ui/src/components/PanelInstance.svelte b/packages/ui/src/components/PanelInstance.svelte
index a0c58312b6..d4b015a8b8 100644
--- a/packages/ui/src/components/PanelInstance.svelte
+++ b/packages/ui/src/components/PanelInstance.svelte
@@ -89,7 +89,7 @@
   {:else}
     <slot name='panel-header'/>
     <div class="panel-instance" class:bg={props.element === 'content'} bind:this={modalHTML}>
-      <div class="p-2 w-full h-full">
+      <div class="panel-container" class:padding={props.element === 'content'}>
         <svelte:component
           this={component}
           bind:this={componentInstance}
@@ -117,8 +117,14 @@
     z-index: 401;
     position: fixed;
     background-color: transparent;
-    &.bg {
-      background-color: var(--theme-bg-color);
+
+    &.bg { background-color: var(--body-color); }
+    .panel-container {
+      padding: .5rem;
+      width: 100%;
+      height: 100%;
+
+      &.padding { padding: .75rem; }
     }
   }
   .modal-overlay {
@@ -128,8 +134,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    &.show {
-      background: rgba(0, 0, 0, 0.5);
-    }   
+
+    &.show { background: rgba(0, 0, 0, .5); }
   }
 </style>
diff --git a/packages/ui/src/components/icons/DownOutline.svelte b/packages/ui/src/components/icons/DownOutline.svelte
new file mode 100644
index 0000000000..78dac20a9c
--- /dev/null
+++ b/packages/ui/src/components/icons/DownOutline.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="M4.2,4.9L3,6.1l5,5l5-5l-1.2-1.2L8,8.7L4.2,4.9z"/>
+</svg>
diff --git a/packages/ui/src/components/icons/UpOutline.svelte b/packages/ui/src/components/icons/UpOutline.svelte
new file mode 100644
index 0000000000..fbda57336a
--- /dev/null
+++ b/packages/ui/src/components/icons/UpOutline.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="M4.2,11.1L3,9.9l5-5l5,5l-1.2,1.2L8,7.3L4.2,11.1z"/>
+</svg>
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index e01d1f9d6f..6632def5fa 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -94,6 +94,8 @@ export { default as IconExpand } from './components/icons/Expand.svelte'
 export { default as IconActivity } from './components/icons/Activity.svelte'
 export { default as IconUp } from './components/icons/Up.svelte'
 export { default as IconDown } from './components/icons/Down.svelte'
+export { default as IconUpOutline } from './components/icons/UpOutline.svelte'
+export { default as IconDownOutline } from './components/icons/DownOutline.svelte'
 export { default as IconShare } from './components/icons/Share.svelte'
 export { default as IconDelete } from './components/icons/Delete.svelte'
 export { default as IconEdit } from './components/icons/Edit.svelte'
diff --git a/packages/ui/src/popups.ts b/packages/ui/src/popups.ts
index fb5d635320..bfacacf96d 100644
--- a/packages/ui/src/popups.ts
+++ b/packages/ui/src/popups.ts
@@ -118,6 +118,7 @@ export function fitPopupPositionedElement (modalHTML: HTMLElement, alignment: Po
   const rectPopup = modalHTML.getBoundingClientRect()
   modalHTML.style.left = modalHTML.style.right = modalHTML.style.top = modalHTML.style.bottom = ''
   modalHTML.style.maxHeight = modalHTML.style.height = ''
+  modalHTML.style.maxWidth = modalHTML.style.width = ''
   if (alignment.position) {
     if (alignment.position.v === 'top') {
       modalHTML.style.top = `${rect.top}px`
@@ -188,10 +189,10 @@ export function fitPopupElement (modalHTML: HTMLElement, element?: PopupAlignmen
       show = true
     } else if (element === 'content' && contentPanel !== undefined) {
       const rect = contentPanel.getBoundingClientRect()
-      modalHTML.style.top = `calc(${rect.top}px)`
-      modalHTML.style.height = `${Math.min(rect.height, window.innerHeight - rect.top)}px`
-      modalHTML.style.left = `calc(${rect.left}px)`
-      modalHTML.style.width = `${Math.min(rect.width, window.innerWidth - rect.left)}px`
+      modalHTML.style.top = `${rect.top + 1}px`
+      modalHTML.style.height = `${Math.min(rect.height - 1, window.innerHeight - rect.top - 1)}px`
+      modalHTML.style.left = `${rect.left + 1}px`
+      modalHTML.style.width = `${Math.min(rect.width - 1, window.innerWidth - rect.left - 1)}px`
     } else if (element === 'middle') {
       if (contentPanel !== undefined) {
         const rect = contentPanel.getBoundingClientRect()
diff --git a/plugins/activity-resources/src/components/Activity.svelte b/plugins/activity-resources/src/components/Activity.svelte
index d22d9ef409..eaf19cbfce 100644
--- a/plugins/activity-resources/src/components/Activity.svelte
+++ b/plugins/activity-resources/src/components/Activity.svelte
@@ -57,14 +57,14 @@
 
 {#if fullSize || transparent}
   {#if transparent !== undefined && !transparent}
-    <div class="ac-header short mirror-tool divide">
+    <div class="ac-header short mirror-tool highlight">
       <div class="ac-header__wrap-title">
         <div class="flex-center icon"><IconActivity size={'small'} /></div>
         <span class="ac-header__title"><Label label={activity.string.Activity} /></span>
       </div>
     </div>
   {/if}
-  <div class="flex-col h-full min-h-0" class:background-bg-accent={!transparent}>
+  <div class="flex-col h-full min-h-0" class:background-accent-bg-color={!transparent}>
     <Scroller>
       <div class="p-10 select-text">
         {#if txes}
diff --git a/plugins/calendar-resources/src/components/DocReminder.svelte b/plugins/calendar-resources/src/components/DocReminder.svelte
index a9d275e979..c20d76650b 100644
--- a/plugins/calendar-resources/src/components/DocReminder.svelte
+++ b/plugins/calendar-resources/src/components/DocReminder.svelte
@@ -16,7 +16,7 @@
   import { EmployeeAccount } from '@anticrm/contact'
   import { Doc,getCurrentAccount } from '@anticrm/core'
   import { getClient } from '@anticrm/presentation'
-  import { ActionIcon,showPopup } from '@anticrm/ui'
+  import { Button, showPopup, Tooltip } from '@anticrm/ui'
   import calendar from '../plugin'
   import CreateReminder from './CreateReminder.svelte'
   import DocRemindersPopup from './DocRemindersPopup.svelte'
@@ -45,8 +45,11 @@
   }
 </script>
 
-{#if isEvent}
-  <ActionIcon size='medium' label={calendar.string.RemindMeAt} icon={calendar.icon.Reminder} action={(e) => click(e)} />
-{:else}
-  <ActionIcon size='medium' label={calendar.string.Reminders} icon={calendar.icon.Reminder} action={(e) => click(e)} />
-{/if}
\ No newline at end of file
+<Tooltip label={isEvent ? calendar.string.RemindMeAt : calendar.string.Reminders}>
+  <Button
+    size={'medium'}
+    kind={'transparent'}
+    icon={calendar.icon.Reminder}
+    on:click={(e) => click(e)}
+  />
+</Tooltip>
diff --git a/plugins/contact-resources/src/components/ChannelsDropdown.svelte b/plugins/contact-resources/src/components/ChannelsDropdown.svelte
index 580f3c3537..78923237ca 100644
--- a/plugins/contact-resources/src/components/ChannelsDropdown.svelte
+++ b/plugins/contact-resources/src/components/ChannelsDropdown.svelte
@@ -257,11 +257,15 @@
     width: min-content;
 
     .tooltip {
+      overflow: hidden;
       position: absolute;
       padding: .25rem .5rem;
       bottom: 100%;
       left: 50%;
       width: auto;
+      min-width: 0;
+      white-space: nowrap;
+      text-overflow: ellipsis;
       background-color: var(--accent-bg-color);
       border: 1px solid var(--button-border-color);
       border-radius: .25rem;
diff --git a/plugins/notification-assets/assets/icons.svg b/plugins/notification-assets/assets/icons.svg
index baf085097f..4205e4ce24 100644
--- a/plugins/notification-assets/assets/icons.svg
+++ b/plugins/notification-assets/assets/icons.svg
@@ -3,11 +3,10 @@
     <path d="M9.78261 18.7959C9.78261 20.0132 10.7754 21 12 21C13.2246 21 14.2174 20.0132 14.2174 18.7959M19.3905 14.7551C18.7778 14.7551 18.2826 14.2631 18.2826 13.6524V9.24462C18.2826 5.79553 15.4703 3 12 3C8.52965 3 5.71739 5.79481 5.71739 9.24462V13.6524C5.71739 14.2609 5.2205 14.7551 4.60947 14.7551C3.99732 14.7551 3.5 15.2496 3.5 15.8571C3.5 16.4658 3.99753 16.9592 4.61235 16.9592H19.3876C20.0015 16.9592 20.5 16.4646 20.5 15.8571C20.5 15.2497 20.0014 14.7551 19.3905 14.7551Z"/>
   </symbol>
   <symbol id="track" viewBox="0 0 24 24">
-    <path d="M9.78261 18.7959C9.78261 20.0132 10.7754 21 12 21C13.2246 21 14.2174 20.0132 14.2174 18.7959M19.3905 14.7551C18.7778 14.7551 18.2826 14.2631 18.2826 13.6524V9.24462C18.2826 5.79553 15.4703 3 12 3C8.52965 3 5.71739 5.79481 5.71739 9.24462V13.6524C5.71739 14.2609 5.2205 14.7551 4.60947 14.7551C3.99732 14.7551 3.5 15.2496 3.5 15.8571C3.5 16.4658 3.99753 16.9592 4.61235 16.9592H19.3876C20.0015 16.9592 20.5 16.4646 20.5 15.8571C20.5 15.2497 20.0014 14.7551 19.3905 14.7551Z" fill="none" 
-stroke="currentColor"/>
+    <path d="M21.7,15L21,13.8c-0.6-1.1-1.1-2.3-1.2-3.4l-0.1-0.9c-0.5,0.2-1.1,0.4-1.6,0.4l0.1,0.7c0.1,1.5,0.6,2.9,1.4,4.2l0.7,1.2 c0.4,0.6,0.7,1.2,0.7,1.3c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.1-1,0.1-1.5,0.1H4.8c-0.6,0-1.4,0-1.5-0.1l-0.1-0.1c0-0.1,0.5-0.8,0.7-1.4 l0.7-1.2c0.7-1.3,1.2-2.6,1.4-4.2l0.4-2.7c0.4-3,2.7-5.1,5.7-5.1c1,0,1.9,0.3,2.7,0.7c0.4-0.5,0.9-0.9,1.4-1.1C15,1.5,13.5,1,12,1 C8.2,1,5,3.9,4.5,7.7l-0.4,2.7c-0.1,1.2-0.5,2.4-1.2,3.4L2.2,15c-0.7,1.2-1.1,1.8-1,2.6c0.1,0.5,0.4,1,0.7,1.3 c0.6,0.5,1.3,0.5,2.7,0.5h3c0.2,1,0.8,1.9,1.5,2.5C10.1,22.6,11,23,12,23s2-0.4,2.7-1.1c0.7-0.6,1.2-1.5,1.5-2.5h3 c1.4,0,2.1,0,2.7-0.5c0.4-0.4,0.6-0.8,0.7-1.3C22.9,16.8,22.6,16.2,21.7,15z M13.6,20.6c-1,0.8-2.3,0.8-3.2,0 c-0.4-0.2-0.6-0.7-0.8-1.2h4.9C14.2,19.9,14,20.3,13.6,20.6z" />
+    <circle fill="var(--warning-color)" cx="18" cy="5.9" r="3"/>
   </symbol>
   <symbol id="donttrack" viewBox="0 0 24 24">
-    <path stroke="currentColor" fill="none" d="m9.78261,18.7959c0,1.2173 0.99279,2.2041 2.21739,2.2041c1.2246,0 2.2174,-0.9868 2.2174,-2.2041m5.1731,-4.0408c-0.6127,0 -1.1079,-0.492 -1.1079,-1.1027l0,-4.40778c0,-3.44909 -2.8123,-6.24462 -6.2826,-6.24462c-3.47035,0 -6.28261,2.79481 -6.28261,6.24462l0,4.40778c0,0.6085 -0.49689,1.1027 -1.10792,1.1027c-0.61215,0 -1.10947,0.4945 -1.10947,1.102c0,0.6087 0.49753,1.1021 1.11235,1.1021l14.77525,0c0.6139,0 1.1124,-0.4946 1.1124,-1.1021c0,-0.6074 -0.4986,-1.102 -1.1095,-1.102z" id="svg_1"/>
-    <line id="svg_2" y2="2.59025" x2="21.49529" y1="21.40975" x1="2.6758" stroke="currentColor" fill="none"/>
+    <path d="M21.7,15l-0.2,0.1L21.7,15L21,13.8c-0.6-1.1-1.1-2.3-1.2-3.4l-0.4-2.7C19,3.9,15.8,1,12,1S5,3.9,4.5,7.7l-0.4,2.7 c-0.1,1.2-0.5,2.4-1.2,3.4L2.2,15c-0.7,1.2-1.1,1.8-1,2.6c0.1,0.5,0.4,1,0.7,1.3c0.6,0.5,1.3,0.5,2.7,0.5h3c0.2,1,0.8,1.9,1.5,2.5 C10.1,22.6,11,23,12,23c1,0,2-0.4,2.7-1.1c0.7-0.6,1.2-1.5,1.5-2.5h3c1.4,0,2.1,0,2.7-0.5c0.4-0.4,0.6-0.8,0.7-1.3 C22.9,16.8,22.6,16.2,21.7,15z M14.5,19.4c-0.2,0.5-0.5,0.8-0.8,1.2l0,0c-1,0.8-2.3,0.8-3.2,0c-0.4-0.2-0.6-0.7-0.8-1.2H14.5z  M20.9,17.5c-0.1,0.1-1,0.1-1.5,0.1H4.8c-0.6,0-1.4,0-1.5-0.1l-0.1-0.1c0-0.1,0.5-0.8,0.7-1.4l0.7-1.2c0.7-1.3,1.2-2.6,1.4-4.2 l0.4-2.7c0.4-3,2.7-5.1,5.7-5.1s5.4,2.1,5.7,5.1l0.4,2.7c0.1,1.5,0.6,2.9,1.4,4.2l0.7,1.2c0.4,0.6,0.7,1.2,0.7,1.3 C21,17.4,20.9,17.4,20.9,17.5z" />
   </symbol>
 </svg>
diff --git a/plugins/notification-resources/src/components/LastViewEditor.svelte b/plugins/notification-resources/src/components/LastViewEditor.svelte
index 8709784705..f2baf540ad 100644
--- a/plugins/notification-resources/src/components/LastViewEditor.svelte
+++ b/plugins/notification-resources/src/components/LastViewEditor.svelte
@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { Doc } from '@anticrm/core'
-  import { ActionIcon } from '@anticrm/ui'
+  import { Button, Tooltip } from '@anticrm/ui'
   import notification from '../plugin'
   import { NotificationClientImpl } from '../utils'
 
@@ -26,8 +26,14 @@
   $: subscribed = lastView !== undefined && lastView !== -1
 </script>
 
-{#if !subscribed}
-  <ActionIcon size='medium' label={notification.string.Track} icon={notification.icon.Track} action={() => { notificationClient.updateLastView(value._id, value._class, undefined, true) }} />
-{:else}
-  <ActionIcon size='medium' label={notification.string.DontTrack} icon={notification.icon.DontTrack} action={() => { notificationClient.unsubscribe(value._id) }} />
-{/if}
+<Tooltip label={subscribed ? notification.string.DontTrack : notification.string.Track}>
+  <Button
+    size={'medium'}
+    kind={'transparent'}
+    icon={subscribed ? notification.icon.DontTrack : notification.icon.Track}
+    on:click={() => {
+      if (subscribed) notificationClient.unsubscribe(value._id)
+      else notificationClient.updateLastView(value._id, value._class, undefined, true)
+    }}
+  />
+</Tooltip>
diff --git a/plugins/tracker-resources/src/components/issues/EditIssue.svelte b/plugins/tracker-resources/src/components/issues/EditIssue.svelte
index 45d7d4a1d8..6cecece17b 100644
--- a/plugins/tracker-resources/src/components/issues/EditIssue.svelte
+++ b/plugins/tracker-resources/src/components/issues/EditIssue.svelte
@@ -19,7 +19,7 @@
   import { createQuery, getClient, UserBox } from '@anticrm/presentation'
   import { StyledTextBox } from '@anticrm/text-editor'
   import type { Issue, Team } from '@anticrm/tracker'
-  import { AnyComponent, Button, EditBox, Grid, IconDown, IconUp } from '@anticrm/ui'
+  import { AnyComponent, Button, EditBox, Grid, IconDownOutline, IconUpOutline } from '@anticrm/ui'
   import { createEventDispatcher, onMount } from 'svelte'
   import tracker from '../../plugin'
   // import Card from '../Card.svelte'
@@ -74,10 +74,8 @@
       {/if}
     </svelte:fragment>
     <svelte:fragment slot="navigate-actions">
-      <div class="tool flex gap-1">
-        <Button icon={IconDown}/>
-        <Button icon={IconUp}/>
-      </div>
+      <Button icon={IconDownOutline} kind={'secondary'} size={'medium'} />
+      <Button icon={IconUpOutline} kind={'secondary'} size={'medium'} />
     </svelte:fragment>
     <div class="p-10">
       <Grid column={1} rowGap={1.5}>
diff --git a/plugins/view-resources/src/components/EditDoc.svelte b/plugins/view-resources/src/components/EditDoc.svelte
index 57e4267c8a..cf368175fd 100644
--- a/plugins/view-resources/src/components/EditDoc.svelte
+++ b/plugins/view-resources/src/components/EditDoc.svelte
@@ -26,7 +26,7 @@
     getClient,
     KeyedAttribute
   } from '@anticrm/presentation'
-  import { AnyComponent, Button, Component, IconDown, IconUp, Label, PopupAlignment, showPanel } from '@anticrm/ui'
+  import { AnyComponent, Button, Component, IconDownOutline, IconUpOutline, Label, PopupAlignment, showPanel } from '@anticrm/ui'
   import view from '@anticrm/view'
   import { createEventDispatcher, onDestroy } from 'svelte'
   import ActionContext from './ActionContext.svelte'
@@ -270,10 +270,8 @@
     }}
   >
     <svelte:fragment slot="navigate-actions">
-      <div class="tool flex-row-center gap-1 mr-4">
-        <Button icon={IconDown} kind={'no-border'} on:click={() => next(true)}/>
-        <Button icon={IconUp} kind={'no-border'} on:click={() => next(false)}/>
-      </div>
+      <Button icon={IconDownOutline} kind={'secondary'} size={'medium'} on:click={() => next(true)}/>
+      <Button icon={IconUpOutline} kind={'secondary'} size={'medium'} on:click={() => next(false)}/>
     </svelte:fragment>
     <div class="w-full" slot="subtitle">
       {#if !headerLoading}