diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte
index fb851133c2..fe892951fb 100644
--- a/packages/panel/src/components/Panel.svelte
+++ b/packages/panel/src/components/Panel.svelte
@@ -19,18 +19,19 @@
   import type { Doc } from '@anticrm/core'
   import notification from '@anticrm/notification'
   import type { Asset } from '@anticrm/platform'
-  import { AnyComponent, AnySvelteComponent, Component, Panel, Icon } from '@anticrm/ui'
+  import { AnySvelteComponent, Component, Panel, Icon, Scroller } from '@anticrm/ui'
 
   export let title: string | undefined = undefined
   export let subtitle: string | undefined = undefined
   export let icon: Asset | AnySvelteComponent | undefined = undefined
-  export let rightSection: AnyComponent | undefined = undefined
+  export let withoutActivity: boolean = false
   export let object: Doc
   export let panelWidth: number = 0
   export let innerWidth: number = 0
   export let isHeader: boolean = true
   export let isSub: boolean = true
   export let isAside: boolean = true
+  export let isCustomAttr: boolean = true
   export let minimize: boolean = false
 
   let docWidth: number = 0
@@ -39,14 +40,7 @@
 </script>
 
 <svelte:window bind:innerWidth={docWidth} />
-<Panel
-  rightSection={rightSection !== undefined}
-  bind:isAside
-  isHeader={needHeader}
-  bind:panelWidth
-  bind:innerWidth
-  on:close
->
+<Panel bind:isAside isHeader={needHeader} bind:panelWidth bind:innerWidth on:close>
   <svelte:fragment slot="title">
     <div class="popupPanel-title__content-container antiTitle">
       {#if $$slots.navigator}
@@ -90,7 +84,7 @@
         </div>
       </div>
     {/if}
-    {#if $$slots['custom-attributes']}
+    {#if $$slots['custom-attributes'] && isCustomAttr}
       {#if isSub}<div class="header-row"><slot name="custom-attributes" direction="row" /></div>{/if}
     {:else if $$slots.attributes && minimize}<div class="header-row">
         <slot name="attributes" direction="row" />
@@ -107,18 +101,22 @@
           </div>
         </div>
       {/if}
-      {#if $$slots['custom-attributes']}
+      {#if $$slots['custom-attributes'] && isCustomAttr}
         <slot name="custom-attributes" direction="column" />
       {:else if $$slots.attributes}<slot name="attributes" direction="column" />{/if}
       {#if $$slots.aside}<slot name="aside" />{/if}
     </div>
   </svelte:fragment>
 
-  {#if rightSection !== undefined}
+  {#if withoutActivity}
     <slot />
   {:else}
-    <Component is={activity.component.Activity} props={{ object, integrate: true }}>
-      <slot />
-    </Component>
+    <Scroller>
+      <div class="popupPanel-body__main-content py-10 clear-mins">
+        <Component is={activity.component.Activity} props={{ object, integrate: true }}>
+          <slot />
+        </Component>
+      </div>
+    </Scroller>
   {/if}
 </Panel>
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 84210dab75..9512045999 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -370,9 +370,11 @@ p:last-child { margin-block-end: 0; }
 .pb-2 { padding-bottom: .5rem; }
 .pb-3 { padding-bottom: .75rem; }
 .pb-4 { padding-bottom: 1rem; }
+.pb-6 { padding-bottom: 1.5rem; }
 .px-2 { padding: 0 .5rem; }
 .px-3 { padding: 0 .75rem; }
 .px-4 { padding: 0 1rem; }
+.py-10 { padding: 2.5rem 0; }
 
 .p-1 { padding: .25rem; }
 .p-2 { padding: .5rem; }
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index f78b0e4756..a615860647 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -202,6 +202,10 @@
 .antiNav-bottomFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1px, rgba(0, 0, 0, 1) calc(100% - 2rem), rgba(0, 0, 0, 0) 100%); }
 .antiNav-bothFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem, rgba(0, 0, 0, 1) calc(100% - 2rem), rgba(0, 0, 0, 0) 100%); }
 .antiNav-noneFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1px, rgba(0, 0, 0, 1) calc(100% - 1px), rgba(0, 0, 0, 0) 100%); }
+.tableFade.antiNav-topFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem, rgba(0, 0, 0, 1) calc(100% - 1px), rgba(0, 0, 0, 0) 100%); }
+.tableFade.antiNav-bottomFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1px, rgba(0, 0, 0, 1) calc(100% - 4.5rem - 1px), rgba(0, 0, 0, 0) calc(100% - 2.5rem), rgba(0, 0, 0, 1) calc(100% - 2.5rem + .5px)); }
+.tableFade.antiNav-bothFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem, rgba(0, 0, 0, 1) calc(100% - 4.5rem - 1px), rgba(0, 0, 0, 0) calc(100% - 2.5rem), rgba(0, 0, 0, 1) calc(100% - 2.5rem + .5px)); }
+.tableFade.antiNav-noneFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1px, rgba(0, 0, 0, 1) calc(100% - 1px), rgba(0, 0, 0, 0) 100%); }
 
 /* Basic */
 .antiTitle {
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index 224fdefd75..b0a1fffee8 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -324,6 +324,7 @@
 
 /* Table */
 .antiTable {
+  position: relative;
   width: 100%;
 
   th, td {
@@ -415,6 +416,13 @@
     &.checking { background-color: var(--highlight-select); } // --theme-table-bg-hover
     &.selected { background-color: var(--highlight-hover); } // --menu-bg-select
   }
+
+  .scroller-thead {
+    position: sticky;
+    top: 0;
+    z-index: 999;
+    background-color: var(--body-color);
+  }
 }
 
 // Hide row menu in Tooltip
diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss
index b7965b218c..e8e1c4edf8 100644
--- a/packages/theme/styles/panel.scss
+++ b/packages/theme/styles/panel.scss
@@ -127,8 +127,9 @@
         width: calc(100% - 5rem);
         min-width: 0;
         max-width: 900px;
-        border-bottom: 1px solid var(--divider-color);
 
+        &.bottom-divider { border-bottom: 1px solid var(--divider-color); }
+        &.top-divider { border-top: 1px solid var(--divider-color); }
         .header-row {
           display: flex;
           align-items: center;
diff --git a/packages/ui/src/components/Panel.svelte b/packages/ui/src/components/Panel.svelte
index 424053217b..a1e692780b 100644
--- a/packages/ui/src/components/Panel.svelte
+++ b/packages/ui/src/components/Panel.svelte
@@ -14,9 +14,8 @@
 -->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
-  import { Button, IconClose, IconDetails, Scroller } from '..'
+  import { Button, IconClose, IconDetails } from '..'
 
-  export let rightSection: boolean = false
   export let innerWidth: number = 0
   export let panelWidth: number = 0
   export let isHeader: boolean = true
@@ -65,15 +64,11 @@
   <div class="popupPanel-body" class:asideShown>
     <div class="popupPanel-body__main" bind:clientWidth={innerWidth}>
       {#if $$slots.header && isHeader}
-        <div class="popupPanel-body__main-header">
+        <div class="popupPanel-body__main-header bottom-divider">
           <slot name="header" />
         </div>
       {/if}
-      <Scroller>
-        <div class="popupPanel-body__main-content">
-          <slot />
-        </div>
-      </Scroller>
+      <slot />
     </div>
     {#if $$slots.aside && isAside}
       <div class="popupPanel-body__aside" class:float={asideFloat} class:shown={asideShown}>
diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte
index f5360ec922..996d72d290 100644
--- a/packages/ui/src/components/Scroller.svelte
+++ b/packages/ui/src/components/Scroller.svelte
@@ -17,8 +17,9 @@
 
   export let padding: boolean = false
   export let autoscroll: boolean = false
-  export let correctPadding: number = 0
+  // export let correctPadding: number = 0
   export let bottomStart: boolean = false
+  export let tableFade: boolean = false
 
   let mask: 'top' | 'bottom' | 'both' | 'none' = 'bottom'
 
@@ -27,17 +28,11 @@
   let divBack: HTMLElement
   let divBar: HTMLElement
   let divTrack: HTMLElement
-  let divTHead: HTMLElement
-  let elTHead: Element
   let isBack: boolean = false // ?
-  let isTHead: boolean = false
-  let hasTHeads: boolean = false // ?
   let isScrolling: boolean = false
-  let enabledChecking: boolean = false
   let dY: number
-  let visibleEl: number | undefined = undefined
   let belowContent: number | undefined = undefined
-  let scrolling: boolean = false
+  let scrolling: boolean = autoscroll
   let firstScroll: boolean = autoscroll
 
   const checkBack = (): void => {
@@ -65,86 +60,6 @@
     }
   }
 
-  const checkTHeadSizes = (): void => {
-    if (elTHead && divTHead && divScroll) {
-      const elems = divTHead.querySelectorAll('div')
-      elems.forEach((el, i) => {
-        const th = elTHead.children.item(i)
-        if (th) el.style.width = th.clientWidth + 'px'
-      })
-    }
-  }
-
-  const clearTHead = (): void => {
-    visibleEl = undefined
-    divTHead.innerHTML = ''
-    divTHead.style.visibility = 'hidden'
-    divTHead.style.opacity = '0'
-    isTHead = false
-  }
-
-  const fillTHead = (el: Element): boolean => {
-    const tr: Element | null = el.children.item(0)
-    if (tr) {
-      for (let i = 0; i < tr.children.length; i++) {
-        const th = tr.children.item(i)
-        if (th) {
-          let newStyle = `flex-shrink: 0; width: ${th.clientWidth}px; `
-          if ((i === 0 && !enabledChecking) || (i === 1 && enabledChecking)) newStyle += 'padding-right: 1.5rem;'
-          else if (i === tr.children.length - 1) newStyle += 'padding-left: 1.5rem;'
-          else if (i === 0 && enabledChecking) newStyle += 'padding: 0 .75rem;'
-          else newStyle += 'padding: 0 1.5rem;'
-          if (th.classList.contains('sorted')) newStyle += ' margin-right: .25rem;'
-          divTHead.insertAdjacentHTML('beforeend', `<div style="${newStyle}">${tr.children.item(i)?.textContent}</div>`)
-        }
-      }
-      isTHead = true
-      elTHead = tr
-    }
-    return isTHead
-  }
-
-  const findTHeaders = (): void => {
-    if (divBox) {
-      const elements = divBox.querySelectorAll('.scroller-thead')
-      if (elements && elements.length > 0 && divScroll) {
-        const rectScroll = divScroll.getBoundingClientRect()
-        hasTHeads = true
-        elements.forEach((el, i) => {
-          const rect = el.getBoundingClientRect()
-          enabledChecking = el.parentElement?.classList.contains('enableChecking') ?? false
-          const rectTable = el.parentElement?.getBoundingClientRect()
-          if (rectTable) {
-            if (rectTable.top < rectScroll.top && rectTable.bottom > rectScroll.top + rect.height) {
-              if (!isTHead && divTHead) if (fillTHead(el)) visibleEl = i
-              if (isTHead) {
-                if (rect.width > rectScroll.width) divTHead.style.width = rectScroll.width - correctPadding + 'px'
-                else divTHead.style.width = rect.width + 'px'
-                divTHead.style.height = rect.height + 'px'
-                divTHead.style.left = rect.left + 'px'
-                if (rect.bottom - 16 < rectScroll.top && rectTable.bottom > rectScroll.top + rect.height) {
-                  divTHead.style.top = rectScroll.top + 'px'
-                  divTHead.style.visibility = 'visible'
-                  divTHead.style.opacity = '.9'
-                } else {
-                  divTHead.style.top = rect.top + 'px'
-                  divTHead.style.visibility = 'hidden'
-                  divTHead.style.opacity = '0'
-                }
-              }
-            } else if (
-              (rectTable.top > rectScroll.top + rect.height || rectTable.bottom < rectScroll.top + rect.height) &&
-              isTHead &&
-              visibleEl === i
-            ) {
-              clearTHead()
-            }
-          }
-        })
-      } else hasTHeads = false
-    }
-  }
-
   const checkBar = (): void => {
     if (divBar && divScroll) {
       const proc = (divScroll.clientHeight / divScroll.scrollHeight) * 100
@@ -195,7 +110,6 @@
 
   const checkFade = (): void => {
     if (divScroll) {
-      scrolling = false
       const t = divScroll.scrollTop
       const b = divScroll.scrollHeight - divScroll.clientHeight - t
       if (t > 0 && b > 0) mask = 'both'
@@ -204,19 +118,19 @@
       else mask = 'none'
     }
     checkBack()
-    findTHeaders()
-    if (isTHead) checkTHeadSizes()
     if (!isScrolling) checkBar()
+    if (scrolling && belowContent && belowContent > 1) {
+      divScroll.scrollTop = divScroll.scrollHeight - divScroll.clientHeight
+    }
   }
 
   const observer = new IntersectionObserver(() => checkFade(), { root: null, threshold: 0.1 })
 
-  $: if (firstScroll && divScroll && divScroll.clientHeight !== divScroll.scrollHeight) {
+  $: if (autoscroll && !scrolling && belowContent && belowContent < 1 && divScroll) {
     divScroll.scrollTop = divScroll.scrollHeight - divScroll.clientHeight
-    firstScroll = false
+    scrolling = true
   }
-  $: if (autoscroll && belowContent && belowContent <= 50) scrolling = true
-  $: if (scrolling && belowContent && belowContent > 50) {
+  $: if (scrolling && divScroll && divScroll.scrollHeight - divScroll.scrollTop - divScroll.clientHeight < 5) {
     divScroll.scrollTop = divScroll.scrollHeight - divScroll.clientHeight
   }
 
@@ -237,19 +151,26 @@
       const tempEl = divBox.querySelector('*') as HTMLElement
       if (tempEl) observer.observe(tempEl)
       if (scrolling) divScroll.scrollTop = divScroll.scrollHeight - divScroll.clientHeight
-      checkFade()
-      clearTHead()
-      findTHeaders()
       belowContent = divScroll.scrollHeight - divScroll.clientHeight - divScroll.scrollTop
+      checkFade()
     }
   })
 
   let divWidth: number = 0
   const _resize = (): void => {
-    clearTHead()
     checkFade()
   }
   $: if (divWidth) _resize()
+
+  const _scroll = (ev: Event): void => {
+    if (ev.type === 'scroll') {
+      firstScroll ? (firstScroll = false) : (scrolling = false)
+      if (ev.target) {
+        const el: HTMLElement = ev.target as HTMLElement
+        if (el.scrollHeight - el.scrollTop - el.clientHeight < 5) scrolling = true
+      }
+    }
+  }
 </script>
 
 <svelte:window on:resize={_resize} />
@@ -257,7 +178,9 @@
   <div
     bind:this={divScroll}
     bind:clientWidth={divWidth}
+    on:scroll={_scroll}
     class="scroll relative"
+    class:tableFade
     class:antiNav-topFade={mask === 'top'}
     class:antiNav-bottomFade={mask === 'bottom'}
     class:antiNav-bothFade={mask === 'both'}
@@ -270,7 +193,6 @@
   <div bind:this={divBack} class="back" />
   <div class="bar" class:hovered={isScrolling} bind:this={divBar} on:mousedown={onScrollStart} />
   <div class="track" class:hovered={isScrolling} bind:this={divTrack} />
-  <div bind:this={divTHead} class="fly-head thead-style" />
 </div>
 
 <style lang="scss">
@@ -366,23 +288,4 @@
     background-color: var(--body-color);
     z-index: -1;
   }
-  .fly-head {
-    overflow: hidden;
-    position: fixed;
-    pointer-events: none;
-    visibility: hidden;
-    transition: top 0.2s ease-out, opacity 0.2s;
-  }
-  .thead-style {
-    display: flex;
-    align-items: center;
-    min-width: 0;
-    height: 2.5rem;
-    font-weight: 500;
-    font-size: 0.75rem;
-    color: var(--dark-color);
-    background-color: var(--board-bg-color);
-    box-shadow: inset 0 -1px 0 0 var(--theme-bg-focused-color);
-    user-select: none;
-  }
 </style>
diff --git a/packages/ui/src/components/icons/ArrowLeft.svelte b/packages/ui/src/components/icons/ArrowLeft.svelte
index 32ecbc16d9..358e0fd5cc 100644
--- a/packages/ui/src/components/icons/ArrowLeft.svelte
+++ b/packages/ui/src/components/icons/ArrowLeft.svelte
@@ -20,6 +20,6 @@
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M12.7,7.5H3.9L7,4.4L6.3,3.6l-4,4L2,8l0.4,0.4l4,4L7,11.6L3.9,8.5h8.8c0.3,0,0.5-0.2,0.5-0.5S12.9,7.5,12.7,7.5z"
+    d="M13.1,7.5H4.3l3.1-3.1L6.7,3.6l-4,4L2.4,8l0.4,0.4l4,4l0.6-0.8L4.3,8.5h8.8c0.3,0,0.5-0.2,0.5-0.5S13.3,7.5,13.1,7.5z"
   />
 </svg>
diff --git a/packages/ui/src/components/icons/ArrowRight.svelte b/packages/ui/src/components/icons/ArrowRight.svelte
new file mode 100644
index 0000000000..82f3a47f75
--- /dev/null
+++ b/packages/ui/src/components/icons/ArrowRight.svelte
@@ -0,0 +1,25 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 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">
+  <path
+    d="M2.4,8c0,0.3,0.2,0.5,0.5,0.5h8.8l-3.1,3.1l0.6,0.8l4-4L13.6,8l-0.3-0.4l-4-4L8.6,4.4l3.1,3.1l-8.8,0C2.7,7.5,2.4,7.7,2.4,8z"
+  />
+</svg>
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 1b67901c83..cf2c609d2b 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -114,6 +114,7 @@ export { default as IconInfo } from './components/icons/Info.svelte'
 export { default as IconBlueCheck } from './components/icons/BlueCheck.svelte'
 export { default as IconCheck } from './components/icons/Check.svelte'
 export { default as IconArrowLeft } from './components/icons/ArrowLeft.svelte'
+export { default as IconArrowRight } from './components/icons/ArrowRight.svelte'
 export { default as IconNavPrev } from './components/icons/NavPrev.svelte'
 export { default as IconNavNext } from './components/icons/NavNext.svelte'
 export { default as IconDPCalendar } from './components/calendar/icons/DPCalendar.svelte'
diff --git a/packages/ui/src/panelup.ts b/packages/ui/src/panelup.ts
index 6fc1a2b2f8..ff1522ab49 100644
--- a/packages/ui/src/panelup.ts
+++ b/packages/ui/src/panelup.ts
@@ -8,7 +8,6 @@ export interface PanelProps {
   _class: string
   element?: PopupAlignment
   rightSection?: AnyComponent
-  fullSize?: boolean
 }
 
 export const panelstore = writable<{ panel?: PanelProps | undefined }>({ panel: undefined })
@@ -17,7 +16,13 @@ let currentLocation: string | undefined
 location.subscribe((loc) => {
   if (loc.fragment !== currentLocation && loc.fragment !== undefined && loc.fragment.trim().length > 0) {
     const props = decodeURIComponent(loc.fragment).split('|')
-    showPanel(props[0] as AnyComponent, props[1], props[2], (props[3] ?? undefined) as PopupAlignment)
+    showPanel(
+      props[0] as AnyComponent,
+      props[1],
+      props[2],
+      (props[3] ?? undefined) as PopupAlignment,
+      (props[4] ?? undefined) as AnyComponent
+    )
   } else if (
     (loc.fragment === undefined || (loc.fragment !== undefined && loc.fragment.trim().length === 0)) &&
     currentLocation !== undefined
@@ -47,7 +52,7 @@ export function showPanel (
   element?: PopupAlignment,
   rightSection?: AnyComponent
 ): void {
-  const newLoc = getPanelURI(component, _id, _class, element)
+  const newLoc = getPanelURI(component, _id, _class, element, rightSection)
   if (currentLocation === newLoc) {
     return
   }
diff --git a/packages/ui/src/popups.ts b/packages/ui/src/popups.ts
index f391eca3d8..bf59b71ff8 100644
--- a/packages/ui/src/popups.ts
+++ b/packages/ui/src/popups.ts
@@ -198,8 +198,8 @@ export function fitPopupElement (modalHTML: HTMLElement, element?: PopupAlignmen
     } else if (element === 'float') {
       newProps.top = 'calc(var(--status-bar-height) + .25rem)'
       newProps.bottom = '.25rem'
-      newProps.width = '40rem'
-      newProps.maxWidth = '40%'
+      newProps.width = '40%'
+      newProps.maxWidth = '60%'
       newProps.right = '.25rem'
       show = true
     } else if (element === 'account') {
diff --git a/plugins/activity-resources/src/components/Activity.svelte b/plugins/activity-resources/src/components/Activity.svelte
index 0aff89389d..37c8ae358d 100644
--- a/plugins/activity-resources/src/components/Activity.svelte
+++ b/plugins/activity-resources/src/components/Activity.svelte
@@ -87,7 +87,7 @@
     {/if}
   </div>
 {:else}
-  <div class="mt-4 pb-4 bottom-highlight-select">
+  <div class="pb-6 bottom-highlight-select">
     <slot />
   </div>
   <div class="flex-row-center h-14 px-3 mt-4 antiTitle">
diff --git a/plugins/contact-resources/src/components/ChannelEditor.svelte b/plugins/contact-resources/src/components/ChannelEditor.svelte
index ce60543bdc..3a2c8711b7 100644
--- a/plugins/contact-resources/src/components/ChannelEditor.svelte
+++ b/plugins/contact-resources/src/components/ChannelEditor.svelte
@@ -16,7 +16,7 @@
   import { createEventDispatcher, onMount } from 'svelte'
   import type { IntlString } from '@anticrm/platform'
   import { translate } from '@anticrm/platform'
-  import { Button, Icon, IconClose, IconBlueCheck } from '@anticrm/ui'
+  import { Button, Icon, IconClose, IconBlueCheck, IconArrowRight } from '@anticrm/ui'
 
   export let value: string = ''
   export let placeholder: IntlString
@@ -60,6 +60,7 @@
         >
           <div class="icon"><Icon icon={IconClose} size={'inline'} /></div>
         </div>
+        <Button kind={'transparent'} size={'small'} icon={IconArrowRight} on:click={() => dispatch('update', 'open')} />
         <Button kind={'transparent'} size={'small'} icon={IconBlueCheck} on:click={() => dispatch('close', value)} />
       </div>
     </div>
diff --git a/plugins/contact-resources/src/components/ChannelsDropdown.svelte b/plugins/contact-resources/src/components/ChannelsDropdown.svelte
index 0ec52358dc..9a0384782a 100644
--- a/plugins/contact-resources/src/components/ChannelsDropdown.svelte
+++ b/plugins/contact-resources/src/components/ChannelsDropdown.svelte
@@ -25,23 +25,19 @@
   import { getChannelProviders } from '../utils'
   import ChannelEditor from './ChannelEditor.svelte'
   import { NotificationClientImpl } from '@anticrm/notification-resources'
-  import { onDestroy } from 'svelte'
 
   export let value: AttachedData<Channel>[] | Channel | null
-  export let editable = false
+  export let editable: boolean = false
   export let kind: ButtonKind = 'no-border'
   export let size: ButtonSize = 'small'
   export let length: 'short' | 'full' = 'full'
   export let shape: 'circle' | undefined = undefined
-  // export let reverse: boolean = false
   export let integrations: Set<Ref<Doc>> = new Set<Ref<Doc>>()
 
   const notificationClient = NotificationClientImpl.getClient()
   const lastViews = notificationClient.getLastViews()
   const dispatch = createEventDispatcher()
 
-  let editMode = false
-
   interface Item {
     label: IntlString
     icon: Asset
@@ -140,8 +136,8 @@
   }
   $: if (providers) updateMenu()
 
-  const dropItem = (n: number): void => {
-    displayItems = displayItems.filter((it, i) => i !== n)
+  const dropItem = (n: number): Item[] => {
+    return displayItems.filter((it, i) => i !== n)
   }
   const saveItems = (): void => {
     value = filterUndefined(displayItems)
@@ -156,15 +152,10 @@
       ev.target as HTMLElement,
       (result) => {
         if (result !== undefined) {
-          if (result == null || result === '') dropItem(n)
+          if (result === null || result === '') displayItems = dropItem(n)
           else displayItems[n].value = result
-        } else if (displayItems[n].value === '') dropItem(n)
-        saveItems()
-        if (actions.length > 0 && addBtn) {
-          if (result !== undefined) addBtn.click()
-          else disableEdit()
-        } else {
-          disableEdit()
+          saveItems()
+          if (displayItems.length < providers.size && addBtn) addBtn.click()
         }
       },
       (result) => {
@@ -172,22 +163,26 @@
           if (result === 'left') {
             closePopup()
             if (displayItems[n].value === '') {
-              dropItem(n)
+              displayItems = dropItem(n)
               saveItems()
             }
-            if (n === 0) addBtn.click()
-            else btns[n - 1].click()
+            if (n === 0) {
+              if (addBtn) addBtn.click()
+              else btns[displayItems.length - 1].click()
+            } else btns[n - 1].click()
           } else if (result === 'right') {
             closePopup()
             if (displayItems[n].value === '') {
-              dropItem(n)
+              displayItems = dropItem(n)
               saveItems()
-              if (n === displayItems.length) addBtn.click()
-              else btns[n + 1].click()
-            } else {
-              if (n === displayItems.length - 1) addBtn.click()
-              else btns[n + 1].click()
             }
+            if (n === displayItems.length - 1) {
+              if (addBtn) addBtn.click()
+              else btns[0].click()
+            } else btns[n + 1].click()
+          } else if (result === 'open') {
+            closePopup()
+            dispatch('open', { presenter: channel.presenter })
           }
         }
       }
@@ -198,11 +193,7 @@
       Menu,
       { actions },
       ev.target as HTMLElement,
-      (result) => {
-        if (result === undefined) {
-          disableEdit()
-        }
-      },
+      () => {},
       (result) => {
         if (result !== undefined && displayItems.length > 0) {
           if (result === 'left') {
@@ -217,31 +208,9 @@
     )
   }
   let copied: boolean = false
-  let div: HTMLDivElement
-
-  function listener (e: MouseEvent): void {
-    if (e.target !== null && !div.contains(e.target as Node)) {
-      disableEdit()
-    }
-  }
-
-  function enableEdit () {
-    window.addEventListener('click', listener)
-    editMode = true
-  }
-
-  function disableEdit () {
-    window.removeEventListener('click', listener)
-    editMode = false
-  }
-
-  onDestroy(() => {
-    window.removeEventListener('click', listener)
-  })
 </script>
 
 <div
-  bind:this={div}
   class="{displayItems.length === 0 ? 'clear-mins' : 'buttons-group'} {kind === 'no-border'
     ? 'xsmall-gap'
     : 'xxsmall-gap'}"
@@ -256,7 +225,7 @@
         {shape}
         click={item.value === ''}
         on:click={(ev) => {
-          if (editMode) editChannel(item, i, ev)
+          if (editable) editChannel(item, i, ev)
         }}
       />
     {:else}
@@ -270,12 +239,12 @@
           {kind}
           {size}
           {shape}
-          highlight={item.integration || item.notification || editMode}
+          highlight={item.integration || item.notification}
           on:click={(ev) => {
-            if (editMode) {
+            if (editable) {
               editChannel(item, i, ev)
             } else {
-              dispatch('click', item)
+              dispatch('open', item)
               if (!copied) {
                 navigator.clipboard.writeText(item.value)
                 copied = true
@@ -293,12 +262,11 @@
     <Button
       bind:input={addBtn}
       icon={contact.icon.SocialEdit}
-      highlight={editMode}
       label={displayItems.length === 0 ? presentation.string.AddSocialLinks : undefined}
       {kind}
       {size}
       {shape}
-      on:click={editMode ? showMenu : enableEdit}
+      on:click={showMenu}
     />
   {/if}
 </div>
@@ -334,6 +302,7 @@
       transition-duration: 0.15s;
       transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
       pointer-events: none;
+      z-index: 1000;
     }
     &:hover .tooltip {
       transform: translate(-50%, -0.5rem) scale(1);
diff --git a/plugins/contact-resources/src/components/ChannelsEditor.svelte b/plugins/contact-resources/src/components/ChannelsEditor.svelte
index f0bcb66311..c6fbe5ebd5 100644
--- a/plugins/contact-resources/src/components/ChannelsEditor.svelte
+++ b/plugins/contact-resources/src/components/ChannelsEditor.svelte
@@ -20,7 +20,6 @@
 
   import { ChannelProvider, Channel } from '@anticrm/contact'
   import { showPanel } from '@anticrm/ui'
-  import view from '@anticrm/view'
   import contact from '../plugin'
   import ChannelsDropdown from './ChannelsDropdown.svelte'
 
@@ -105,11 +104,11 @@
     Promise.all(promises)
   }
 
-  function click (ev: any) {
+  function _open (ev: any) {
     if (ev.detail.presenter !== undefined && Array.isArray(channels)) {
       const channel = channels[0]
       if (channel !== undefined) {
-        showPanel(view.component.EditDoc, channel.attachedTo, channel.attachedToClass, 'content', ev.detail.presenter)
+        showPanel(ev.detail.presenter, channel.attachedTo, channel.attachedToClass, 'float')
       }
     }
   }
@@ -126,5 +125,5 @@
   on:change={(e) => {
     if (editable) save(e.detail)
   }}
-  on:click={click}
+  on:open={_open}
 />
diff --git a/plugins/contact-resources/src/components/ChannelsPresenter.svelte b/plugins/contact-resources/src/components/ChannelsPresenter.svelte
index 2c6d48f954..cead3403a1 100644
--- a/plugins/contact-resources/src/components/ChannelsPresenter.svelte
+++ b/plugins/contact-resources/src/components/ChannelsPresenter.svelte
@@ -27,14 +27,14 @@
   export let length: 'short' | 'full' = 'short'
   export let shape: 'circle' | undefined = 'circle'
 
-  function click (ev: any) {
+  function _open (ev: any) {
     if (ev.detail.presenter !== undefined && Array.isArray(value)) {
       const channel = value[0]
       if (channel !== undefined) {
-        showPanel(ev.detail.presenter, channel.attachedTo, channel.attachedToClass, 'float', ev.detail.presenter)
+        showPanel(ev.detail.presenter, channel.attachedTo, channel.attachedToClass, 'float')
       }
     }
   }
 </script>
 
-<ChannelsDropdown bind:value {length} {kind} {size} {shape} {editable} on:click={click} />
+<ChannelsDropdown bind:value {length} {kind} {size} {shape} {editable} on:open={_open} />
diff --git a/plugins/contact-resources/src/components/Contacts.svelte b/plugins/contact-resources/src/components/Contacts.svelte
index cfd05cc2fc..568d6a9247 100644
--- a/plugins/contact-resources/src/components/Contacts.svelte
+++ b/plugins/contact-resources/src/components/Contacts.svelte
@@ -66,7 +66,7 @@
     />
   </div>
 
-  <Scroller>
+  <Scroller tableFade>
     {#await tableDescriptor then descr}
       {#if descr}
         <TableBrowser
diff --git a/plugins/contact-resources/src/components/EditPerson.svelte b/plugins/contact-resources/src/components/EditPerson.svelte
index 3cd7e74fa0..c144fca1e7 100644
--- a/plugins/contact-resources/src/components/EditPerson.svelte
+++ b/plugins/contact-resources/src/components/EditPerson.svelte
@@ -143,9 +143,8 @@
             attachedTo={object._id}
             attachedClass={object._class}
             {editable}
-            {integrations}
+            bind:integrations
             shape={'circle'}
-            on:click
           />
         </div>
 
diff --git a/plugins/gmail-resources/src/components/Main.svelte b/plugins/gmail-resources/src/components/Main.svelte
index 88df2ee34e..99e715fd37 100644
--- a/plugins/gmail-resources/src/components/Main.svelte
+++ b/plugins/gmail-resources/src/components/Main.svelte
@@ -14,7 +14,6 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import type { AnyComponent } from '@anticrm/ui'
   import { Ref, Doc, Class } from '@anticrm/core'
   import contact, { Channel } from '@anticrm/contact'
   import { SharedMessage } from '@anticrm/gmail'
@@ -28,10 +27,8 @@
 
   export let _id: Ref<Doc>
   export let _class: Ref<Class<Doc>>
-  export let rightSection: AnyComponent | undefined = undefined
 
   // export let object: Contact
-  // $: console.log('!!!!!!!!!!!! id: ', _id, ' - class: ', _class)
   let object: any
   let newMessage: boolean = false
   let currentMessage: SharedMessage | undefined = undefined
@@ -76,7 +73,7 @@
   <Panel
     icon={contact.icon.Email}
     title={'Email'}
-    {rightSection}
+    withoutActivity
     {object}
     isHeader={false}
     isAside={false}
diff --git a/plugins/inventory-resources/src/components/Products.svelte b/plugins/inventory-resources/src/components/Products.svelte
index 0124fb4a4e..c5e2ae7813 100644
--- a/plugins/inventory-resources/src/components/Products.svelte
+++ b/plugins/inventory-resources/src/components/Products.svelte
@@ -67,7 +67,7 @@
   />
 </div>
 
-<Scroller>
+<Scroller tableFade>
   {#await tableDescriptor then descr}
     {#if descr}
       <Table
diff --git a/plugins/lead-resources/src/components/Customers.svelte b/plugins/lead-resources/src/components/Customers.svelte
index bd78e6d712..47a1b85e49 100644
--- a/plugins/lead-resources/src/components/Customers.svelte
+++ b/plugins/lead-resources/src/components/Customers.svelte
@@ -49,7 +49,7 @@
   />
 </div>
 
-<Scroller>
+<Scroller tableFade>
   {#await tableDescriptor then descr}
     {#if descr}
       <Table
diff --git a/plugins/recruit-resources/src/components/ApplicationsView.svelte b/plugins/recruit-resources/src/components/ApplicationsView.svelte
index 26ae510e4a..f01498beef 100644
--- a/plugins/recruit-resources/src/components/ApplicationsView.svelte
+++ b/plugins/recruit-resources/src/components/ApplicationsView.svelte
@@ -82,6 +82,6 @@
   <Button icon={IconAdd} label={recruit.string.ApplicationCreateLabel} kind={'primary'} on:click={showCreateDialog} />
 </div>
 
-<Scroller>
+<Scroller tableFade>
   <TableBrowser _class={recruit.class.Applicant} {config} {options} query={resultQuery} showNotification />
 </Scroller>
diff --git a/plugins/recruit-resources/src/components/Candidates.svelte b/plugins/recruit-resources/src/components/Candidates.svelte
index b4df0a0208..73d79574d0 100644
--- a/plugins/recruit-resources/src/components/Candidates.svelte
+++ b/plugins/recruit-resources/src/components/Candidates.svelte
@@ -93,7 +93,7 @@
     mode: 'browser'
   }}
 />
-<Scroller>
+<Scroller tableFade>
   {#await tableDescriptor then descr}
     {#if descr}
       <TableBrowser
diff --git a/plugins/recruit-resources/src/components/Vacancies.svelte b/plugins/recruit-resources/src/components/Vacancies.svelte
index 6b9cdf50fa..be200b3ec6 100644
--- a/plugins/recruit-resources/src/components/Vacancies.svelte
+++ b/plugins/recruit-resources/src/components/Vacancies.svelte
@@ -89,7 +89,7 @@
   />
   <Button icon={IconAdd} label={recruit.string.VacancyCreateLabel} kind={'primary'} on:click={showCreateDialog} />
 </div>
-<Scroller>
+<Scroller tableFade>
   <Table
     _class={recruit.class.Vacancy}
     config={[
diff --git a/plugins/tags-resources/src/components/TagsCategoryPopup.svelte b/plugins/tags-resources/src/components/TagsCategoryPopup.svelte
index 9ba22baf08..c4b1e3c2d9 100644
--- a/plugins/tags-resources/src/components/TagsCategoryPopup.svelte
+++ b/plugins/tags-resources/src/components/TagsCategoryPopup.svelte
@@ -183,13 +183,13 @@
 </div>
 
 <style lang="scss">
-  .counter {
-    padding-right: 0.125rem;
-    min-width: 1.5rem;
-    text-align: right;
-    font-size: 0.8125rem;
-    color: var(--caption-color);
-  }
+  // .counter {
+  //   padding-right: 0.125rem;
+  //   min-width: 1.5rem;
+  //   text-align: right;
+  //   font-size: 0.8125rem;
+  //   color: var(--caption-color);
+  // }
   .empty {
     display: flex;
     justify-content: center;
diff --git a/plugins/tags-resources/src/components/TagsView.svelte b/plugins/tags-resources/src/components/TagsView.svelte
index 19100f070e..e1893c85ad 100644
--- a/plugins/tags-resources/src/components/TagsView.svelte
+++ b/plugins/tags-resources/src/components/TagsView.svelte
@@ -108,7 +108,7 @@
     updateResultQuery(search, category)
   }}
 />
-<Scroller>
+<Scroller tableFade>
   <TableBrowser
     _class={tags.class.TagElement}
     config={[
diff --git a/plugins/task-resources/src/components/AssignedTasks.svelte b/plugins/task-resources/src/components/AssignedTasks.svelte
index 14ff94b706..fb2e14b0dc 100644
--- a/plugins/task-resources/src/components/AssignedTasks.svelte
+++ b/plugins/task-resources/src/components/AssignedTasks.svelte
@@ -99,7 +99,7 @@
   on:change={(evt) => updateCategory(evt.detail)}
 />
 
-<Scroller>
+<Scroller tableFade>
   <Table
     {_class}
     config={[
diff --git a/plugins/telegram-resources/src/components/Chat.svelte b/plugins/telegram-resources/src/components/Chat.svelte
index 9a477fc283..b8b3045c01 100644
--- a/plugins/telegram-resources/src/components/Chat.svelte
+++ b/plugins/telegram-resources/src/components/Chat.svelte
@@ -24,7 +24,6 @@
   import { createQuery, getClient } from '@anticrm/presentation'
   import setting, { Integration } from '@anticrm/setting'
   import type { NewTelegramMessage, SharedTelegramMessage, TelegramMessage } from '@anticrm/telegram'
-  import type { AnyComponent } from '@anticrm/ui'
   import { Button, eventToHTMLElement, IconShare, Tooltip, Scroller, showPopup } from '@anticrm/ui'
   import telegram from '../plugin'
   import Connect from './Connect.svelte'
@@ -34,7 +33,6 @@
 
   export let _id: Ref<Contact>
   export let _class: Ref<Class<Contact>>
-  export let rightSection: AnyComponent | undefined = undefined
 
   let object: Contact
   let channel: Channel | undefined = undefined
@@ -77,7 +75,7 @@
       telegram.class.Message,
       { attachedTo: channelId },
       (res) => {
-        messages = res.reverse()
+        messages = res
         if (channel !== undefined) {
           notificationClient.updateLastView(channel._id, channel._class, undefined, true)
         }
@@ -191,7 +189,7 @@
   <Panel
     icon={TelegramIcon}
     title={'Telegram'}
-    {rightSection}
+    withoutActivity
     {object}
     isHeader={false}
     isAside={false}
@@ -203,27 +201,43 @@
       You and {formatName(object.name)}
     </svelte:fragment>
     <svelte:fragment slot="tools">
-      <Tooltip label={telegram.string.Share}>
+      {#if integration === undefined}
         <Button
-          icon={IconShare}
-          kind={'transparent'}
-          size={'medium'}
-          on:click={async () => {
-            selectable = !selectable
+          label={telegram.string.Connect}
+          kind={'primary'}
+          on:click={(e) => {
+            showPopup(Connect, {}, eventToHTMLElement(e), onConnectClose)
           }}
         />
-      </Tooltip>
+      {:else if integration.disabled}
+        <Button
+          label={setting.string.Reconnect}
+          kind={'primary'}
+          on:click={(e) => {
+            showPopup(Reconnect, {}, eventToHTMLElement(e), onReconnect)
+          }}
+        />
+      {:else}
+        <Tooltip label={telegram.string.Share}>
+          <Button
+            icon={IconShare}
+            kind={'transparent'}
+            size={'medium'}
+            on:click={async () => {
+              selectable = !selectable
+            }}
+          />
+        </Tooltip>
+      {/if}
     </svelte:fragment>
 
-    <div class="telegram-content" class:selectable>
-      <Scroller bottomStart autoscroll>
-        {#if messages && accounts}
-          <Messages messages={convertMessages(messages, accounts)} {selectable} bind:selected />
-        {/if}
-      </Scroller>
-    </div>
+    <Scroller bottomStart autoscroll>
+      {#if messages && accounts}
+        <Messages messages={convertMessages(messages, accounts)} {selectable} bind:selected />
+      {/if}
+    </Scroller>
 
-    <div class="ref-input" class:selectable>
+    <div class="popupPanel-body__main-header ref-input" class:selectable>
       {#if selectable}
         <div class="flex-between">
           <span>{selected.size} messages selected</span>
@@ -242,26 +256,8 @@
             </div>
           </div>
         </div>
-      {:else if integration === undefined}
-        <div class="flex-center">
-          <Button
-            label={telegram.string.Connect}
-            kind={'primary'}
-            on:click={(e) => {
-              showPopup(Connect, {}, eventToHTMLElement(e), onConnectClose)
-            }}
-          />
-        </div>
-      {:else if integration.disabled}
-        <div class="flex-center">
-          <Button
-            label={setting.string.Reconnect}
-            kind={'primary'}
-            on:click={(e) => {
-              showPopup(Reconnect, {}, eventToHTMLElement(e), onReconnect)
-            }}
-          />
-        </div>
+      {:else if integration === undefined || integration.disabled}
+        <div class="flex-center h-18">No integration</div>
       {:else}
         <AttachmentRefInput
           space={telegram.space.Telegram}
@@ -276,7 +272,7 @@
 
 <style lang="scss">
   .ref-input {
-    padding: 0 0 1.5rem;
+    padding: 0.5rem 0 1.5rem;
 
     &.selectable {
       padding: 1rem 0;
@@ -284,14 +280,4 @@
       border-top: 1px solid var(--divider-color);
     }
   }
-
-  .telegram-content {
-    padding-bottom: 1.5rem;
-    min-height: 0;
-    height: 100%;
-
-    &.selectable {
-      padding-bottom: 0;
-    }
-  }
 </style>
diff --git a/plugins/telegram-resources/src/components/Message.svelte b/plugins/telegram-resources/src/components/Message.svelte
index f18b307da8..096042ac6c 100644
--- a/plugins/telegram-resources/src/components/Message.svelte
+++ b/plugins/telegram-resources/src/components/Message.svelte
@@ -32,29 +32,31 @@
   const dispatch = createEventDispatcher()
 </script>
 
-<div
-  class="message-row"
-  class:selectable
-  class:selected-row={selected}
-  on:click={() => {
-    dispatch('select', message)
-  }}
->
-  <div class="check-box">
-    {#if selectable}<CheckBox circle primary bind:checked={selected} />{/if}
-  </div>
-  <div class="message-container" class:out={!message.incoming}>
-    <div class="message" class:outcoming={!message.incoming} class:selected>
-      {#if showName}
-        <div class="name" style="color: {getPlatformColorForText(message.sender)}">{formatName(message.sender)}</div>
-      {/if}
-      {#if attachments}
-        <AttachmentList {attachments} />
-      {/if}
-      <div class="flex">
-        <div class="caption-color mr-4"><MessageViewer message={message.content} /></div>
-        <div class="time">
-          {new Date(message.sendOn).toLocaleString('default', { hour: 'numeric', minute: 'numeric' })}
+<div class="message-row-bg" class:selectable class:selected-row={selected}>
+  <div
+    class="message-row"
+    class:selectable
+    class:selected-row={selected}
+    on:click={() => {
+      dispatch('select', message)
+    }}
+  >
+    <div class="check-box">
+      {#if selectable}<CheckBox circle primary bind:checked={selected} />{/if}
+    </div>
+    <div class="message-container" class:out={!message.incoming}>
+      <div class="message" class:outcoming={!message.incoming} class:selected>
+        {#if showName}
+          <div class="name" style="color: {getPlatformColorForText(message.sender)}">{formatName(message.sender)}</div>
+        {/if}
+        {#if attachments}
+          <AttachmentList {attachments} />
+        {/if}
+        <div class="flex">
+          <div class="caption-color mr-4"><MessageViewer message={message.content} /></div>
+          <div class="time">
+            {new Date(message.sendOn).toLocaleString('default', { hour: 'numeric', minute: 'numeric' })}
+          </div>
         </div>
       </div>
     </div>
@@ -62,36 +64,51 @@
 </div>
 
 <style lang="scss">
+  .message-row-bg {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    min-height: 0;
+  }
   .message-row {
     display: flex;
     justify-content: stretch;
     align-items: center;
+    margin: 0 auto;
+    width: 100%;
+    min-width: 0;
+    max-width: 900px;
+  }
 
-    &.selectable {
-      cursor: pointer;
+  .message-row.selectable,
+  .message-row-bg.selectable {
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--button-bg-hover);
+    }
+    &.selected-row {
+      background-color: var(--button-bg-color);
 
       &:hover {
-        background-color: var(--highlight-hover);
+        background-color: var(--button-bg-hover);
       }
-      &.selected-row {
-        background-color: var(--highlight-select);
+    }
+    .message {
+      cursor: pointer;
+    }
+    .selected {
+      background-color: var(--primary-bg-color);
 
-        &:hover {
-          background-color: var(--highlight-hover);
-        }
-      }
-      .message {
-        cursor: pointer;
-      }
-      .selected {
-        background-color: var(--primary-bg-color);
-
-        &:hover {
-          background-color: var(--primary-bg-hover);
-        }
+      &:hover {
+        background-color: var(--primary-bg-hover);
       }
     }
   }
+
   .check-box {
     display: flex;
     justify-content: center;
diff --git a/plugins/view-resources/src/components/BooleanEditor.svelte b/plugins/view-resources/src/components/BooleanEditor.svelte
index dea90f3037..efaed740a2 100644
--- a/plugins/view-resources/src/components/BooleanEditor.svelte
+++ b/plugins/view-resources/src/components/BooleanEditor.svelte
@@ -69,6 +69,7 @@
     span {
       margin-left: 0.25rem;
       width: 1.6rem;
+      white-space: nowrap;
       text-transform: capitalize;
       font-weight: 500;
       color: var(--theme-caption-color);
diff --git a/plugins/view-resources/src/components/BooleanPresenter.svelte b/plugins/view-resources/src/components/BooleanPresenter.svelte
index 43e8fe6264..047fa7a008 100644
--- a/plugins/view-resources/src/components/BooleanPresenter.svelte
+++ b/plugins/view-resources/src/components/BooleanPresenter.svelte
@@ -59,6 +59,7 @@
     span {
       margin-left: 0.25rem;
       width: 1.6rem;
+      white-space: nowrap;
       text-transform: capitalize;
       font-weight: 500;
       color: var(--theme-caption-color);
diff --git a/plugins/view-resources/src/components/EditDoc.svelte b/plugins/view-resources/src/components/EditDoc.svelte
index 0ea4bb3997..021e0a48a5 100644
--- a/plugins/view-resources/src/components/EditDoc.svelte
+++ b/plugins/view-resources/src/components/EditDoc.svelte
@@ -14,11 +14,11 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import contact, { ChannelProvider, formatName } from '@anticrm/contact'
-  import core, { Class, ClassifierKind, Doc, getCurrentAccount, Mixin, Obj, Ref, Space } from '@anticrm/core'
+  import contact, { formatName } from '@anticrm/contact'
+  import core, { Class, ClassifierKind, Doc, Mixin, Obj, Ref } from '@anticrm/core'
   import notification from '@anticrm/notification'
   import { Panel } from '@anticrm/panel'
-  import { Asset, getResource, IntlString, translate } from '@anticrm/platform'
+  import { Asset, getResource, translate } from '@anticrm/platform'
   import {
     AttributesBar,
     createQuery,
@@ -26,7 +26,6 @@
     getClient,
     KeyedAttribute
   } from '@anticrm/presentation'
-  import setting, { IntegrationType } from '@anticrm/setting'
   import { AnyComponent, Component } from '@anticrm/ui'
   import view from '@anticrm/view'
   import { createEventDispatcher, onDestroy } from 'svelte'
@@ -36,7 +35,6 @@
 
   export let _id: Ref<Doc>
   export let _class: Ref<Class<Doc>>
-  export let rightSection: AnyComponent | undefined = undefined
 
   let lastId: Ref<Doc> = _id
   let lastClass: Ref<Class<Doc>> = _class
@@ -237,51 +235,6 @@
   }
   let panelWidth: number = 0
   let innerWidth: number = 0
-
-  const accountId = getCurrentAccount()._id
-  let channelProviders: ChannelProvider[] | undefined
-  let currentProviders: ChannelProvider[] | undefined
-  let integrations: Set<Ref<IntegrationType>> = new Set<Ref<IntegrationType>>()
-  let displayedIntegrations:
-    | {
-        icon: Asset | undefined
-        label: IntlString
-        presenter: AnyComponent | undefined
-        value: string
-      }[]
-    | undefined = []
-
-  client.findAll(contact.class.ChannelProvider, {}).then((res) => {
-    channelProviders = res
-  })
-  const settingsQuery = createQuery()
-  $: settingsQuery.query(
-    setting.class.Integration,
-    { space: accountId as string as Ref<Space>, disabled: false },
-    (res) => {
-      integrations = new Set(res.map((p) => p.type))
-    }
-  )
-  const channelsQuery = createQuery()
-  $: _id &&
-    integrations &&
-    channelProviders &&
-    channelsQuery.query(contact.class.Channel, { attachedTo: _id }, (res) => {
-      const channels = res
-      currentProviders = channelProviders?.filter((provider) =>
-        provider.integrationType ? integrations.has(provider.integrationType as Ref<IntegrationType>) : false
-      )
-      displayedIntegrations = []
-      currentProviders?.forEach((provider) => {
-        displayedIntegrations?.push({
-          icon: provider.icon,
-          label: provider.label,
-          presenter: provider.presenter,
-          value: channels.filter((ch) => ch.provider === provider._id)[0].value
-        })
-      })
-    })
-
   let minimize: boolean = false
 </script>
 
@@ -295,7 +248,6 @@
   <Panel
     {icon}
     {title}
-    {rightSection}
     {object}
     bind:minimize
     isHeader={false}
@@ -321,23 +273,18 @@
       {/if}
     </svelte:fragment>
 
-    <div class="main-editor">
-      {#if mainEditor}
-        <Component
-          is={mainEditor}
-          props={{ object }}
-          on:open={(ev) => {
-            ignoreKeys = ev.detail.ignoreKeys
-            ignoreMixins = new Set(ev.detail.ignoreMixins)
-            updateKeys()
-            getMixins()
-          }}
-          on:click={(ev) => {
-            rightSection = ev.detail.presenter
-          }}
-        />
-      {/if}
-    </div>
+    {#if mainEditor}
+      <Component
+        is={mainEditor}
+        props={{ object }}
+        on:open={(ev) => {
+          ignoreKeys = ev.detail.ignoreKeys
+          ignoreMixins = new Set(ev.detail.ignoreMixins)
+          updateKeys()
+          getMixins()
+        }}
+      />
+    {/if}
     {#each collectionEditors as collection}
       {#if collection.editor}
         <div class="mt-6">
@@ -357,11 +304,3 @@
     {/each}
   </Panel>
 {/if}
-
-<style lang="scss">
-  .main-editor {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-  }
-</style>
diff --git a/plugins/view-resources/src/components/TableView.svelte b/plugins/view-resources/src/components/TableView.svelte
index 9c52f051b7..29db07b9cf 100644
--- a/plugins/view-resources/src/components/TableView.svelte
+++ b/plugins/view-resources/src/components/TableView.svelte
@@ -35,6 +35,6 @@
     mode: 'browser'
   }}
 />
-<Scroller>
+<Scroller tableFade>
   <TableBrowser {_class} {config} {options} query={resultQuery} {baseMenuClass} showNotification />
 </Scroller>
diff --git a/tests/sanity/tests/settings.spec.ts b/tests/sanity/tests/settings.spec.ts
index 3b9818b04f..84f2cad8ff 100644
--- a/tests/sanity/tests/settings.spec.ts
+++ b/tests/sanity/tests/settings.spec.ts
@@ -27,14 +27,13 @@ test.describe('contact tests', () => {
     await page.fill('[placeholder="Location"]', 'LoPlaza')
     // Click .flex-center.icon-button
     await page.click('text=Edit profile John Appleseed LoPlaza >> button')
-    await page.click('text=Edit profile John Appleseed LoPlaza >> button')
     // await page.click('button:has-text("Add social links")')
     // Click [placeholder="john\.appleseed\@apple\.com"]
     await page.click('button:has-text("Email")')
     // Fill [placeholder="john\.appleseed\@apple\.com"]
     await page.fill('[placeholder="john\\.appleseed\\@apple\\.com"]', 'wer@qwe.com')
     // Click text=Apply
-    await page.click('.button.transparent')
+    await page.click('button:nth-child(3)')
   })
   test('create-template', async ({ page }) => {
     // Go to http://localhost:8083/workbench%3Acomponent%3AWorkbenchApp