diff --git a/models/view/src/plugin.ts b/models/view/src/plugin.ts
index 7c33b052c9..02d7e6b83c 100644
--- a/models/view/src/plugin.ts
+++ b/models/view/src/plugin.ts
@@ -101,9 +101,7 @@ export default mergeIds(viewId, view, {
     General: '' as IntlString,
     Navigation: '' as IntlString,
     Editor: '' as IntlString,
-    MarkdownFormatting: '' as IntlString,
-    Pin: '' as IntlString,
-    Unpin: '' as IntlString
+    MarkdownFormatting: '' as IntlString
   },
   function: {
     FilterArrayAllResult: '' as FilterFunction,
diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss
index d839be6499..6fa2b0f8ff 100644
--- a/packages/theme/styles/popups.scss
+++ b/packages/theme/styles/popups.scss
@@ -317,6 +317,11 @@
   box-shadow: var(--theme-popup-shadow);
   user-select: none;
 
+  &.isDock {
+    border-radius: 0;
+    height: 100%;
+  }
+
   .ap-space {
     flex-shrink: 0;
     height: .25rem;
diff --git a/packages/ui/src/components/Dock.svelte b/packages/ui/src/components/Dock.svelte
new file mode 100644
index 0000000000..744722d347
--- /dev/null
+++ b/packages/ui/src/components/Dock.svelte
@@ -0,0 +1,52 @@
+<!--
+// Copyright © 2024 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">
+  import { dockStore, unpin } from '../popups'
+
+  function _close (result: any): void {
+    if ($dockStore?.onClose !== undefined) $dockStore.onClose(result)
+    $dockStore?.close()
+  }
+</script>
+
+{#if $dockStore !== undefined}
+  <div class="dock">
+    <svelte:component
+      this={$dockStore.is}
+      {...$dockStore.props}
+      isDock
+      on:close={(ev) => {
+        _close(ev?.detail)
+      }}
+      on:dock={() => {
+        if ($dockStore !== undefined) {
+          unpin()
+        }
+      }}
+    />
+  </div>
+{/if}
+
+<style lang="scss">
+  .dock {
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    background-color: transparent;
+    transform-origin: center;
+  }
+</style>
diff --git a/packages/ui/src/components/Popup.svelte b/packages/ui/src/components/Popup.svelte
index ebe609a912..451280a5b3 100644
--- a/packages/ui/src/components/Popup.svelte
+++ b/packages/ui/src/components/Popup.svelte
@@ -24,13 +24,13 @@
     instances.forEach((p) => p.fitPopupInstance())
   }
 
-  $: instances.length = $modal.length
+  $: instances.length = $modal.filter((p) => p.dock !== true).length
 </script>
 
 {#if $modal.length > 0}
   <slot name="popup-header" />
 {/if}
-{#each $modal as popup, i (popup.id)}
+{#each $modal.filter((p) => p.dock !== true) as popup, i (popup.id)}
   <PopupInstance
     bind:this={instances[i]}
     is={popup.is}
diff --git a/packages/ui/src/components/PopupInstance.svelte b/packages/ui/src/components/PopupInstance.svelte
index d1d581a294..0bbe05a348 100644
--- a/packages/ui/src/components/PopupInstance.svelte
+++ b/packages/ui/src/components/PopupInstance.svelte
@@ -16,7 +16,7 @@
 <script lang="ts">
   import { onMount } from 'svelte'
   import { deviceOptionsStore as deviceInfo, resizeObserver, testing } from '..'
-  import { CompAndProps, fitPopupElement } from '../popups'
+  import { CompAndProps, fitPopupElement, pin } from '../popups'
   import type { AnySvelteComponent, DeviceOptions, PopupAlignment, PopupOptions, PopupPositionElement } from '../types'
 
   export let is: AnySvelteComponent
@@ -314,6 +314,9 @@
       fullSize = !fullSize
       fitPopup(modalHTML, element, contentPanel)
     }}
+    on:dock={() => {
+      pin(popup.id)
+    }}
     on:changeContent={(ev) => {
       fitPopup(modalHTML, element, contentPanel)
       if (ev.detail?.notFit !== undefined) notFit = ev.detail.notFit
diff --git a/packages/ui/src/components/internal/Root.svelte b/packages/ui/src/components/internal/Root.svelte
index d33933457b..d944bac993 100644
--- a/packages/ui/src/components/internal/Root.svelte
+++ b/packages/ui/src/components/internal/Root.svelte
@@ -250,6 +250,7 @@
     }
 
     .app {
+      display: flex;
       height: calc(100% - var(--status-bar-height));
 
       .error {
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index aa1cefbb6f..a1f61332fb 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -252,6 +252,8 @@ export { default as NumberInput } from './components/NumberInput.svelte'
 export { default as Lazy } from './components/Lazy.svelte'
 export { default as TimeZonesPopup } from './components/TimeZonesPopup.svelte'
 
+export { default as Dock } from './components/Dock.svelte'
+
 export * from './types'
 export * from './location'
 export * from './utils'
diff --git a/packages/ui/src/popups.ts b/packages/ui/src/popups.ts
index 75b5b1032f..a105268e52 100644
--- a/packages/ui/src/popups.ts
+++ b/packages/ui/src/popups.ts
@@ -1,6 +1,6 @@
 import { getResource } from '@hcengineering/platform'
 import { type ComponentType } from 'svelte'
-import { writable } from 'svelte/store'
+import { derived, writable } from 'svelte/store'
 import type {
   AnyComponent,
   AnySvelteComponent,
@@ -29,6 +29,7 @@ export interface CompAndProps {
     fixed?: boolean
     refId?: string
   }
+  dock?: boolean
 }
 
 export interface PopupResult {
@@ -39,6 +40,10 @@ export interface PopupResult {
 
 export const popupstore = writable<CompAndProps[]>([])
 
+export const dockStore = derived(popupstore, (popups) => {
+  return popups.find((popup) => popup.dock)
+})
+
 export function updatePopup (id: string, props: Partial<CompAndProps>): void {
   popupstore.update((popups) => {
     const popupIndex = popups.findIndex((p) => p.id === id)
@@ -409,3 +414,17 @@ export function getEventPositionElement (evt: MouseEvent): PopupAlignment | unde
     getBoundingClientRect: () => rect
   }
 }
+
+export function pin (id: string): void {
+  popupstore.update((popups) => {
+    popups.forEach((p) => (p.dock = p.id === id))
+    return popups
+  })
+}
+
+export function unpin (): void {
+  popupstore.update((popups) => {
+    popups.forEach((p) => (p.dock = false))
+    return popups
+  })
+}
diff --git a/plugins/notification-resources/src/components/NotificationSettings.svelte b/plugins/notification-resources/src/components/NotificationSettings.svelte
index d6c08c86d6..78a2b824e1 100644
--- a/plugins/notification-resources/src/components/NotificationSettings.svelte
+++ b/plugins/notification-resources/src/components/NotificationSettings.svelte
@@ -34,7 +34,8 @@
     defineSeparators,
     settingsSeparators,
     Separator,
-    NavItem
+    NavItem,
+    Loading
   } from '@hcengineering/ui'
   import notification from '../plugin'
   import NotificationGroupSetting from './NotificationGroupSetting.svelte'
@@ -53,6 +54,8 @@
 
   const query = createQuery()
 
+  let loading = true
+
   query.query(notification.class.NotificationSetting, {}, (res) => {
     settings = new Map()
     for (const value of res) {
@@ -61,6 +64,7 @@
       settings.set(value.type, arr)
     }
     settings = settings
+    loading = false
   })
 
   let group: Ref<NotificationGroup> | undefined = undefined
@@ -136,13 +140,17 @@
     <div class="hulyComponent-content__column content">
       <Scroller align={'center'} padding={'var(--spacing-3)'} bottomPadding={'var(--spacing-3)'}>
         <div class="hulyComponent-content">
-          {#if group}
-            <NotificationGroupSetting {group} {settings} />
-          {/if}
-          {#if currentPreferenceGroup}
-            {#await getResource(currentPreferenceGroup.presenter) then presenter}
-              <svelte:component this={presenter} />
-            {/await}
+          {#if loading}
+            <Loading />
+          {:else}
+            {#if group}
+              <NotificationGroupSetting {group} {settings} />
+            {/if}
+            {#if currentPreferenceGroup}
+              {#await getResource(currentPreferenceGroup.presenter) then presenter}
+                <svelte:component this={presenter} />
+              {/await}
+            {/if}
           {/if}
         </div>
       </Scroller>
diff --git a/plugins/view/src/index.ts b/plugins/view/src/index.ts
index 5166412134..e537a06baa 100644
--- a/plugins/view/src/index.ts
+++ b/plugins/view/src/index.ts
@@ -197,7 +197,9 @@ const view = plugin(viewId, {
     Save: '' as IntlString,
     PublicView: '' as IntlString,
     Archived: '' as IntlString,
-    MoreActions: '' as IntlString
+    MoreActions: '' as IntlString,
+    Pin: '' as IntlString,
+    Unpin: '' as IntlString
   },
   icon: {
     Table: '' as Asset,
diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte
index ef118653a7..5d64437455 100644
--- a/plugins/workbench-resources/src/components/Workbench.svelte
+++ b/plugins/workbench-resources/src/components/Workbench.svelte
@@ -35,6 +35,7 @@
     Button,
     CompAndProps,
     Component,
+    Dock,
     IconSettings,
     Label,
     Location,
@@ -852,6 +853,7 @@
   </Popup>
   <ComponentExtensions extension={workbench.extensions.WorkbenchExtensions} />
   <BrowserNotificatator />
+  <Dock />
 {/if}
 
 <style lang="scss">