diff --git a/plugins/view-resources/src/components/FoldersBrowser.svelte b/plugins/view-resources/src/components/FoldersBrowser.svelte
index 43d5b5d2ed..182a8cbc0b 100644
--- a/plugins/view-resources/src/components/FoldersBrowser.svelte
+++ b/plugins/view-resources/src/components/FoldersBrowser.svelte
@@ -14,9 +14,9 @@
 -->
 
 <script lang="ts">
-  import { Class, Doc, DocumentQuery, Ref, SortingOrder, Space } from '@hcengineering/core'
+  import { Class, Doc, DocumentQuery, Ref, SortingOrder } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
-  import { Action, IconEdit, navigate, type Location } from '@hcengineering/ui'
+  import { Action, IconEdit, navigate, type Location, Scroller } from '@hcengineering/ui'
   import { getResource, type Resource } from '@hcengineering/platform'
   import { IntlString, Asset } from '@hcengineering/platform'
 
@@ -45,7 +45,7 @@
     foldersState = newState
   })
 
-  let selected: Ref<Doc> | undefined
+  let selected: Ref<Doc> = noParentId
   let visibleItem: Doc | undefined
 
   const q = createQuery()
@@ -65,7 +65,6 @@
   async function handleFolderSelected (_id: Ref<Doc>): Promise<void> {
     selected = _id
     visibleItem = selected !== undefined ? foldersState.folderById.get(selected) : undefined
-    const folder = foldersState.folderById.get(_id)
     if (getFolderLink) {
       const getFolderLinkFunction = await getResource(getFolderLink)
       navigate(getFolderLinkFunction(_id))
@@ -100,7 +99,7 @@
   }
 </script>
 
-<div class="folders-browser">
+<Scroller padding={'1rem 0'}>
   <TreeNode
     _id={noParentId}
     icon={allObjectsIcon}
@@ -139,11 +138,4 @@
       {/if}
     </svelte:fragment>
   </TreeNode>
-</div>
-
-<style lang="scss">
-  .folders-browser {
-    display: flex;
-    padding-top: 1rem;
-  }
-</style>
+</Scroller>
diff --git a/plugins/workbench-resources/src/components/ComponentNavigator.svelte b/plugins/workbench-resources/src/components/ComponentNavigator.svelte
index 35e96eca3c..bb381a7930 100644
--- a/plugins/workbench-resources/src/components/ComponentNavigator.svelte
+++ b/plugins/workbench-resources/src/components/ComponentNavigator.svelte
@@ -26,7 +26,10 @@
     Separator,
     showPopup,
     getLocation,
-    resolvedLocationStore
+    resolvedLocationStore,
+    deviceOptionsStore as deviceInfo,
+    defineSeparators,
+    workbenchSeparators
   } from '@hcengineering/ui'
   import { Doc, DocumentQuery, Ref, Space, mergeQueries } from '@hcengineering/core'
   import { IntlString, Asset } from '@hcengineering/platform'
@@ -64,33 +67,56 @@
     if (createComponent === undefined) return
     showPopup(createComponent, { ...createComponentProps, space }, 'top')
   }
+  defineSeparators('parentsNavigator', workbenchSeparators)
 </script>
 
 <div class="hulyComponent-content__container columns">
-  <div class="hulyComponent-content__column">
-    <Header adaptive={'disabled'}>
-      <Breadcrumb icon={navigationComponentIcon} label={navigationComponentLabel} size={'large'} />
-      <svelte:fragment slot="actions">
-        {#if createComponent}
-          <Button
-            icon={IconAdd}
-            kind={'icon'}
-            on:click={() => {
-              showCreateDialog()
-            }}
-          />
-        {/if}
-      </svelte:fragment>
-    </Header>
-    <Component
-      is={navigationComponent}
-      props={{
-        ...navigationComponentProps,
-        query: spaceQuery
-      }}
+  {#if $deviceInfo.navigator.visible}
+    <div
+      class="antiPanel-navigator {$deviceInfo.navigator.direction === 'horizontal'
+        ? 'portrait'
+        : 'landscape'} border-left"
+    >
+      <div class="hulyComponent-content__column">
+        <Header adaptive={'disabled'}>
+          <Breadcrumb icon={navigationComponentIcon} label={navigationComponentLabel} size={'large'} />
+          <svelte:fragment slot="actions">
+            {#if createComponent}
+              <Button
+                icon={IconAdd}
+                kind={'icon'}
+                on:click={() => {
+                  showCreateDialog()
+                }}
+              />
+            {/if}
+          </svelte:fragment>
+        </Header>
+        <Component
+          is={navigationComponent}
+          props={{
+            ...navigationComponentProps,
+            query: spaceQuery
+          }}
+        />
+      </div>
+      <Separator
+        name={'parentsNavigator'}
+        float={$deviceInfo.navigator.float ? 'navigator' : true}
+        index={0}
+        color={'transparent'}
+      />
+    </div>
+
+    <Separator
+      name={'parentsNavigator'}
+      float={$deviceInfo.navigator.float}
+      index={0}
+      color={'transparent'}
+      separatorSize={0}
+      short
     />
-  </div>
-  <Separator name={'navigationSection'} index={0} color={'var(--theme-divider-color)'} />
+  {/if}
   <div class="hulyComponent-content__column">
     <Header adaptive={'disabled'}>
       <Breadcrumb icon={mainComponentIcon} label={mainComponentLabel} size={'large'} />