diff --git a/plugins/workbench-resources/src/components/ServerManager.svelte b/plugins/workbench-resources/src/components/ServerManager.svelte
index 5cd23b629f..80700cbc5c 100644
--- a/plugins/workbench-resources/src/components/ServerManager.svelte
+++ b/plugins/workbench-resources/src/components/ServerManager.svelte
@@ -10,9 +10,13 @@
   import ServerManagerGeneral from './ServerManagerGeneral.svelte'
 
   import { getEmbeddedLabel } from '@hcengineering/platform'
-  import { Panel, TabItem, TabList } from '@hcengineering/ui'
+  import { createEventDispatcher } from 'svelte'
+  import presentation from '@hcengineering/presentation'
+  import { Header, TabItem, Switcher, Breadcrumb, IconSettings, ButtonIcon, IconClose } from '@hcengineering/ui'
   import ServerManagerAccountStatistics from './ServerManagerAccountStatistics.svelte'
 
+  const dispatch = createEventDispatcher()
+
   const tabs: TabItem[] = [
     {
       id: 'general',
@@ -42,35 +46,46 @@
   let selectedTab: string | number = tabs[0].id
 </script>
 
-<Panel on:close isFullSize useMaxWidth={true}>
-  <svelte:fragment slot="title">
-    <span class="p-3"> Server manager </span>
-    <TabList
-      items={tabs}
-      bind:selected={selectedTab}
-      kind={'separated'}
-      on:select={(result) => {
-        selectedTab = result.detail.id
-      }}
-    />
-  </svelte:fragment>
-  {#if selectedTab === 'general'}
-    <ServerManagerGeneral />
-  {:else if selectedTab === 'users'}
-    <ServerManagerUsers />
-  {:else if selectedTab === 'statistics'}
-    <ServerManagerServerStatistics />
-  {:else if selectedTab === 'statistics-front'}
-    <ServerManagerFrontStatistics />
-  {:else if selectedTab === 'statistics-collab'}
-    <ServerManagerCollaboratorStatistics />
-  {:else if selectedTab === 'account'}
-    <ServerManagerAccountStatistics />
-  {/if}
-</Panel>
+<div class="hulyComponent">
+  <Header type={'type-panel'} freezeBefore>
+    <svelte:fragment slot="beforeTitle">
+      <ButtonIcon
+        icon={IconClose}
+        kind={'secondary'}
+        size={'small'}
+        tooltip={{ label: presentation.string.Close }}
+        on:click={() => dispatch('close')}
+      />
+    </svelte:fragment>
 
-<style lang="scss">
-  .greyed {
-    color: rgba(black, 0.5);
-  }
-</style>
+    <Breadcrumb icon={IconSettings} title={'Server manager'} size={'large'} isCurrent />
+
+    <svelte:fragment slot="actions">
+      <Switcher
+        name={'swManagerMode'}
+        items={tabs}
+        bind:selected={selectedTab}
+        kind={'subtle'}
+        on:select={(result) => {
+          selectedTab = result.detail.id
+        }}
+      />
+    </svelte:fragment>
+  </Header>
+
+  <div class="hulyComponent-content__column content">
+    {#if selectedTab === 'general'}
+      <ServerManagerGeneral />
+    {:else if selectedTab === 'users'}
+      <ServerManagerUsers />
+    {:else if selectedTab === 'statistics'}
+      <ServerManagerServerStatistics />
+    {:else if selectedTab === 'statistics-front'}
+      <ServerManagerFrontStatistics />
+    {:else if selectedTab === 'statistics-collab'}
+      <ServerManagerCollaboratorStatistics />
+    {:else if selectedTab === 'account'}
+      <ServerManagerAccountStatistics />
+    {/if}
+  </div>
+</div>