diff --git a/models/recruit/src/index.ts b/models/recruit/src/index.ts
index 4b69794a39b..74eaab2290d 100644
--- a/models/recruit/src/index.ts
+++ b/models/recruit/src/index.ts
@@ -676,6 +676,7 @@ export function createModel (builder: Builder): void {
     }
     return model
   }
+
   builder.createDoc(
     view.class.Viewlet,
     core.space.Model,
@@ -754,6 +755,60 @@ export function createModel (builder: Builder): void {
     recruit.viewlet.ListApplicant
   )
 
+  builder.createDoc(
+    view.class.Viewlet,
+    core.space.Model,
+    {
+      attachTo: recruit.class.Vacancy,
+      descriptor: view.viewlet.List,
+      config: [
+        { key: '', displayProps: { fixed: 'left', key: 'app' } },
+        'description',
+        {
+          key: '@applications',
+          label: recruit.string.Applications
+        },
+        { key: '', displayProps: { grow: true } },
+        {
+          key: '$lookup.company',
+          displayProps: { key: '$lookup.company', fixed: 'right' }
+        },
+        {
+          key: 'location',
+          displayProps: { key: 'location', fixed: 'right' }
+        }
+      ],
+      configOptions: {
+        hiddenKeys: ['name', 'space', 'modifiedOn'],
+        sortable: true
+      },
+      baseQuery: {
+        doneState: null,
+        '$lookup.space.archived': false
+      },
+      viewOptions: {
+        groupBy: ['company', 'location', 'dueTo', 'createdBy'],
+        orderBy: [
+          ['company', SortingOrder.Ascending],
+          ['dueTo', SortingOrder.Ascending],
+          ['modifiedOn', SortingOrder.Descending],
+          ['createdOn', SortingOrder.Descending]
+        ],
+        other: [
+          {
+            key: 'shouldShowAll',
+            type: 'toggle',
+            defaultValue: false,
+            actionTarget: 'category',
+            action: view.function.ShowEmptyGroups,
+            label: view.string.ShowEmptyGroups
+          }
+        ]
+      }
+    },
+    recruit.viewlet.ListVacancy
+  )
+
   builder.createDoc(
     view.class.Viewlet,
     core.space.Model,
diff --git a/models/recruit/src/plugin.ts b/models/recruit/src/plugin.ts
index d7cc616f455..621b36fa47b 100644
--- a/models/recruit/src/plugin.ts
+++ b/models/recruit/src/plugin.ts
@@ -115,6 +115,7 @@ export default mergeIds(recruitId, recruit, {
   viewlet: {
     TableCandidate: '' as Ref<Viewlet>,
     TableVacancy: '' as Ref<Viewlet>,
+    ListVacancy: '' as Ref<Viewlet>,
     ApplicantTable: '' as Ref<Viewlet>,
     ApplicantKanban: '' as Ref<Viewlet>,
     ListApplicant: '' as Ref<Viewlet>,
diff --git a/plugins/recruit-resources/src/components/Vacancies.svelte b/plugins/recruit-resources/src/components/Vacancies.svelte
index 0f34c09e709..98d455b2344 100644
--- a/plugins/recruit-resources/src/components/Vacancies.svelte
+++ b/plugins/recruit-resources/src/components/Vacancies.svelte
@@ -13,18 +13,12 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import core, { Doc, DocumentQuery, Ref } from '@hcengineering/core'
+  import core, { Doc, DocumentQuery, Ref, WithLookup } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
   import { Vacancy } from '@hcengineering/recruit'
-  import { Button, IconAdd, Label, Loading, SearchEdit, showPopup, tableToCSV } from '@hcengineering/ui'
+  import { Button, Component, IconAdd, Label, Loading, SearchEdit, showPopup, tableToCSV } from '@hcengineering/ui'
   import view, { BuildModelKey, ViewOptions, Viewlet, ViewletPreference } from '@hcengineering/view'
-  import {
-    FilterBar,
-    FilterButton,
-    TableBrowser,
-    ViewletSelector,
-    ViewletSettingButton
-  } from '@hcengineering/view-resources'
+  import { FilterBar, FilterButton, ViewletSelector, ViewletSettingButton } from '@hcengineering/view-resources'
   import recruit from '../plugin'
   import CreateVacancy from './CreateVacancy.svelte'
 
@@ -97,7 +91,7 @@
     ]
   ])
 
-  let viewlet: Viewlet | undefined
+  let viewlet: WithLookup<Viewlet> | undefined
   let loading = true
 
   let preference: ViewletPreference | undefined
@@ -126,6 +120,15 @@
     <span class="ac-header__title"><Label label={recruit.string.Vacancies} /></span>
   </div>
   <div class="ac-header-full medium-gap mb-1">
+    <ViewletSelector
+      bind:loading
+      bind:viewlet
+      bind:preference
+      viewletQuery={{
+        attachTo: recruit.class.Vacancy,
+        descriptor: { $in: [view.viewlet.Table, view.viewlet.List] }
+      }}
+    />
     <Button
       label={recruit.string.Export}
       on:click={() => {
@@ -155,16 +158,6 @@
     <FilterButton _class={recruit.class.Vacancy} />
   </div>
   <div class="ac-header-full medium-gap">
-    <ViewletSelector
-      hidden
-      viewletQuery={{
-        attachTo: recruit.class.Vacancy,
-        descriptor: view.viewlet.Table
-      }}
-      bind:preference
-      bind:loading
-      bind:viewlet
-    />
     <ViewletSettingButton bind:viewOptions bind:viewlet />
     <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
   </div>
@@ -179,17 +172,21 @@
 
 {#if loading}
   <Loading />
-{:else if viewlet}
-  <TableBrowser
-    _class={recruit.class.Vacancy}
-    config={createConfig(viewlet, preference, applications)}
-    options={viewlet.options}
-    tableId={'vacanciesData'}
-    query={{
-      ...resultQuery,
-      archived
+{:else if viewlet && viewlet?.$lookup?.descriptor?.component}
+  <Component
+    is={viewlet.$lookup.descriptor.component}
+    props={{
+      _class: recruit.class.Vacancy,
+      options: viewlet.options,
+      config: createConfig(viewlet, preference, applications),
+      viewlet,
+      viewOptions,
+      viewOptionsConfig: viewlet.viewOptions?.other,
+      query: {
+        ...resultQuery,
+        archived
+      },
+      totalQuery: {}
     }}
-    totalQuery={{}}
-    showNotification
   />
 {/if}