From 6a5f1ed4791f0a7d74e51ad548e91ef9b839fb35 Mon Sep 17 00:00:00 2001
From: Denis Bykhov <bykhov.denis@gmail.com>
Date: Sat, 14 Jan 2023 16:54:54 +0600
Subject: [PATCH] List extract (#2505)

---
 models/attachment/src/index.ts                |   2 +-
 models/board/src/index.ts                     |   6 +-
 models/calendar/src/index.ts                  |   4 +-
 models/chunter/src/index.ts                   |   6 +-
 models/contact/src/index.ts                   |  38 +-
 models/contact/src/plugin.ts                  |   3 +
 models/document/src/index.ts                  |   4 +-
 models/hr/src/index.ts                        |   2 +-
 models/inventory/src/index.ts                 |  17 +-
 models/inventory/src/plugin.ts                |   1 +
 models/lead/src/index.ts                      |  40 +-
 models/lead/src/plugin.ts                     |   4 +-
 models/recruit/src/index.ts                   |  12 +-
 models/recruit/src/review.ts                  |   4 +-
 models/request/src/index.ts                   |   2 +-
 models/tags/src/index.ts                      |   4 +-
 models/task/src/index.ts                      |  31 +-
 models/task/src/plugin.ts                     |   4 +-
 models/tracker/src/index.ts                   | 105 ++++--
 models/tracker/src/plugin.ts                  |   3 +-
 models/view/src/index.ts                      |  50 ++-
 models/view/src/plugin.ts                     |   8 +-
 models/workbench/src/index.ts                 |   2 +-
 packages/kanban/src/components/Kanban.svelte  |  56 +--
 packages/presentation/lang/en.json            |   3 +-
 packages/presentation/lang/ru.json            |   3 +-
 packages/presentation/src/plugin.ts           |   3 +-
 packages/presentation/src/utils.ts            |   4 +-
 packages/ui/src/components/TimeSince.svelte   |   4 +-
 .../src/components/KanbanView.svelte          |  10 +-
 .../src/components/TableView.svelte           |   2 +-
 .../src/components/CalendarView.svelte        |  11 +-
 plugins/contact-assets/lang/en.json           |   3 +-
 plugins/contact-assets/lang/ru.json           |   3 +-
 .../src/components/ContactRefPresenter.svelte |  33 ++
 .../src/components/EmployeePresenter.svelte   |  15 +-
 .../components/EmployeeRefPresenter.svelte    |  39 ++
 .../src/components/PersonPresenter.svelte     |  47 ++-
 .../src/components/PersonRefPresenter.svelte  |  59 +++
 plugins/contact-resources/src/index.ts        |  21 +-
 plugins/contact-resources/src/plugin.ts       |   7 +-
 plugins/contact-resources/src/utils.ts        |  36 +-
 .../components/CategoryRefPresenter.svelte    |  33 ++
 plugins/inventory-resources/src/index.ts      |   2 +
 plugins/lead-assets/lang/en.json              |   3 +-
 plugins/lead-assets/lang/ru.json              |   5 +-
 .../src/components/CreateLead.svelte          |  29 +-
 .../src/components/Leads.svelte               |   4 +-
 .../src/components/LeadsPopup.svelte          |   6 +-
 plugins/lead-resources/src/plugin.ts          |   4 +-
 .../src/components/Applications.svelte        |   4 +-
 .../src/components/ApplicationsPopup.svelte   |   2 +-
 .../VacancyApplicationsPopup.svelte           |   2 +-
 .../src/components/AssignedTasks.svelte       |  11 +-
 .../src/components/Dashboard.svelte           |  14 +-
 .../src/components/StatusTableView.svelte     |  35 +-
 .../src/components/kanban/KanbanView.svelte   |  18 +-
 .../state/DoneStateRefPresenter.svelte        |  33 ++
 .../components/state/StateRefPresenter.svelte |  31 ++
 plugins/task-resources/src/index.ts           |   4 +
 .../src/components/issues/Active.svelte       |   2 +-
 .../issues/AssigneePresenter.svelte           |  21 +-
 .../src/components/issues/Backlog.svelte      |   2 +-
 .../src/components/issues/Issues.svelte       |   2 +-
 .../components/issues/IssuesContent.svelte    |  19 +-
 .../src/components/issues/IssuesList.svelte   | 355 ------------------
 .../issues/IssuesListBrowser.svelte           |  82 ----
 .../src/components/issues/IssuesView.svelte   |  23 +-
 .../src/components/issues/KanbanView.svelte   | 114 +++---
 .../src/components/issues/ListView.svelte     |  83 ----
 .../issues/PriorityRefPresenter.svelte        |  74 ++++
 .../issues/StatusRefPresenter.svelte          |  32 ++
 .../components/issues/edit/EditIssue.svelte   |  87 +----
 .../issues/edit/SubIssueList.svelte           |   4 +-
 .../issues/edit/SubIssueSelector.svelte       |   4 +-
 .../issues/edit/SubIssuesSelector.svelte      |  55 ++-
 .../issues/timereport/ReportsPopup.svelte     |   2 +-
 .../src/components/myissues/MyIssues.svelte   |   6 +-
 .../components/projects/EditProject.svelte    |   2 +-
 .../src/components/sprints/EditSprint.svelte  |   2 +-
 .../components/sprints/IssueStatistics.svelte |  10 +-
 .../components/sprints/SprintEditor.svelte    |   9 +-
 .../sprints/SprintRefPresenter.svelte         |  76 ++++
 .../templates/IssueTemplatesContent.svelte    |  23 +-
 .../templates/IssueTemplatesView.svelte       |   7 +-
 .../components/templates/TemplatesList.svelte |  65 ----
 plugins/tracker-resources/src/index.ts        |  22 +-
 plugins/tracker-resources/src/plugin.ts       |  15 +-
 plugins/tracker-resources/src/types.ts        |   2 +-
 plugins/tracker-resources/src/utils.ts        | 193 +++-------
 plugins/tracker/src/index.ts                  |   2 +-
 plugins/view-assets/lang/en.json              |   8 +-
 plugins/view-assets/lang/ru.json              |   8 +-
 .../src/components/ClassRefPresenter.svelte   |  26 ++
 .../src/components/FixedColumn.svelte         |  17 +-
 .../src/components/ObjectPresenter.svelte     |   2 +-
 .../src/components/TableView.svelte           |   5 +-
 .../src/components/UpDownNavigator.svelte     |   5 +-
 .../src/components/ViewOptions.svelte         |  91 +++++
 .../src/components/ViewOptionsButton.svelte   |  72 ----
 .../src/components/ViewOptionsPopup.svelte    |  37 --
 .../src/components/ViewletSetting.svelte      |  67 ++--
 .../components/ViewletSettingButton.svelte    |  38 +-
 .../src/components/list}/GrowPresenter.svelte |   0
 .../src/components/list/List.svelte           | 211 +++++++++++
 .../src/components/list/ListCategory.svelte   | 140 +++++++
 .../src/components/list/ListHeader.svelte     | 135 +++++++
 .../src/components/list/ListItem.svelte       | 223 +++++++++++
 .../src/components/list/ListView.svelte       |  74 ++++
 plugins/view-resources/src/index.ts           |  10 +-
 plugins/view-resources/src/plugin.ts          |   7 +-
 plugins/view-resources/src/selection.ts       |  49 ++-
 plugins/view-resources/src/utils.ts           |  58 ++-
 plugins/view-resources/src/viewOptions.ts     |  34 +-
 plugins/view/src/index.ts                     | 103 ++++-
 .../src/components/Archive.svelte             |   2 +-
 .../src/components/SpaceBrowser.svelte        |   2 +-
 .../src/components/SpaceContent.svelte        |  19 +-
 .../src/components/SpaceHeader.svelte         |  10 +-
 .../src/components/SpaceView.svelte           |   6 +-
 server/core/src/fulltext.ts                   |   2 +-
 tests/docker-compose.yaml                     |   4 +-
 tests/sanity/tests/tracker.layout.spec.ts     |  10 +-
 tests/sanity/tests/tracker.spec.ts            |   6 +-
 124 files changed, 2382 insertions(+), 1445 deletions(-)
 create mode 100644 plugins/contact-resources/src/components/ContactRefPresenter.svelte
 create mode 100644 plugins/contact-resources/src/components/EmployeeRefPresenter.svelte
 create mode 100644 plugins/contact-resources/src/components/PersonRefPresenter.svelte
 create mode 100644 plugins/inventory-resources/src/components/CategoryRefPresenter.svelte
 create mode 100644 plugins/task-resources/src/components/state/DoneStateRefPresenter.svelte
 create mode 100644 plugins/task-resources/src/components/state/StateRefPresenter.svelte
 delete mode 100644 plugins/tracker-resources/src/components/issues/IssuesList.svelte
 delete mode 100644 plugins/tracker-resources/src/components/issues/IssuesListBrowser.svelte
 delete mode 100644 plugins/tracker-resources/src/components/issues/ListView.svelte
 create mode 100644 plugins/tracker-resources/src/components/issues/PriorityRefPresenter.svelte
 create mode 100644 plugins/tracker-resources/src/components/issues/StatusRefPresenter.svelte
 create mode 100644 plugins/tracker-resources/src/components/sprints/SprintRefPresenter.svelte
 delete mode 100644 plugins/tracker-resources/src/components/templates/TemplatesList.svelte
 create mode 100644 plugins/view-resources/src/components/ClassRefPresenter.svelte
 create mode 100644 plugins/view-resources/src/components/ViewOptions.svelte
 delete mode 100644 plugins/view-resources/src/components/ViewOptionsButton.svelte
 delete mode 100644 plugins/view-resources/src/components/ViewOptionsPopup.svelte
 rename plugins/{tracker-resources/src/components/issues => view-resources/src/components/list}/GrowPresenter.svelte (100%)
 create mode 100644 plugins/view-resources/src/components/list/List.svelte
 create mode 100644 plugins/view-resources/src/components/list/ListCategory.svelte
 create mode 100644 plugins/view-resources/src/components/list/ListHeader.svelte
 create mode 100644 plugins/view-resources/src/components/list/ListItem.svelte
 create mode 100644 plugins/view-resources/src/components/list/ListView.svelte

diff --git a/models/attachment/src/index.ts b/models/attachment/src/index.ts
index 700933b867..87dd56f0e3 100644
--- a/models/attachment/src/index.ts
+++ b/models/attachment/src/index.ts
@@ -77,7 +77,7 @@ export class TSavedAttachments extends TPreference implements SavedAttachments {
 export function createModel (builder: Builder): void {
   builder.createModel(TAttachment, TPhoto, TSavedAttachments)
 
-  builder.mixin(attachment.class.Attachment, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(attachment.class.Attachment, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: attachment.component.AttachmentPresenter
   })
 
diff --git a/models/board/src/index.ts b/models/board/src/index.ts
index bfcbb00c33..cd55f2d18e 100644
--- a/models/board/src/index.ts
+++ b/models/board/src/index.ts
@@ -212,15 +212,15 @@ export function createModel (builder: Builder): void {
     editor: board.component.EditCard
   })
 
-  builder.mixin(board.class.Card, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(board.class.Card, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: board.component.CardPresenter
   })
 
-  builder.mixin(board.class.Board, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(board.class.Board, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: board.component.BoardPresenter
   })
 
-  builder.mixin(board.class.CardCover, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(board.class.CardCover, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: board.component.CardCoverPresenter
   })
 
diff --git a/models/calendar/src/index.ts b/models/calendar/src/index.ts
index ff1d25b307..d0bc1d0ab8 100644
--- a/models/calendar/src/index.ts
+++ b/models/calendar/src/index.ts
@@ -187,7 +187,7 @@ export function createModel (builder: Builder): void {
     calendar.action.SaveEventReminder
   )
 
-  builder.mixin(calendar.mixin.Reminder, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(calendar.mixin.Reminder, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: calendar.component.ReminderPresenter
   })
 
@@ -195,7 +195,7 @@ export function createModel (builder: Builder): void {
     editor: calendar.component.EditEvent
   })
 
-  builder.mixin(calendar.class.Event, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(calendar.class.Event, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: calendar.component.EventPresenter
   })
 }
diff --git a/models/chunter/src/index.ts b/models/chunter/src/index.ts
index beeea80e80..00c36b7145 100644
--- a/models/chunter/src/index.ts
+++ b/models/chunter/src/index.ts
@@ -190,11 +190,11 @@ export function createModel (builder: Builder, options = { addApplication: true
     getName: chunter.function.GetDmName
   })
 
-  builder.mixin(chunter.class.DirectMessage, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(chunter.class.DirectMessage, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: chunter.component.DmPresenter
   })
 
-  builder.mixin(chunter.class.Channel, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(chunter.class.Channel, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: chunter.component.ChannelPresenter
   })
 
@@ -404,7 +404,7 @@ export function createModel (builder: Builder, options = { addApplication: true
     )
   }
 
-  builder.mixin(chunter.class.Comment, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(chunter.class.Comment, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: chunter.component.CommentPresenter
   })
 
diff --git a/models/contact/src/index.ts b/models/contact/src/index.ts
index f454c0b98a..55d297c384 100644
--- a/models/contact/src/index.ts
+++ b/models/contact/src/index.ts
@@ -48,7 +48,7 @@ import attachment from '@hcengineering/model-attachment'
 import chunter from '@hcengineering/model-chunter'
 import core, { TAccount, TAttachedDoc, TDoc, TSpace } from '@hcengineering/model-core'
 import presentation from '@hcengineering/model-presentation'
-import view, { actionTemplates, createAction, ViewAction } from '@hcengineering/model-view'
+import view, { actionTemplates, createAction, ViewAction, Viewlet } from '@hcengineering/model-view'
 import workbench from '@hcengineering/model-workbench'
 import type { Asset, IntlString, Resource } from '@hcengineering/platform'
 import setting from '@hcengineering/setting'
@@ -204,7 +204,7 @@ export function createModel (builder: Builder): void {
     contact.app.Contacts
   )
 
-  builder.createDoc(
+  builder.createDoc<Viewlet>(
     view.class.Viewlet,
     core.space.Model,
     {
@@ -229,7 +229,7 @@ export function createModel (builder: Builder): void {
     pinned: true
   })
 
-  builder.createDoc(
+  builder.createDoc<Viewlet>(
     view.class.Viewlet,
     core.space.Model,
     {
@@ -237,7 +237,7 @@ export function createModel (builder: Builder): void {
       descriptor: view.viewlet.Table,
       config: [
         '',
-        '$lookup._class',
+        '_class',
         'city',
         'attachments',
         'modifiedOn',
@@ -280,7 +280,7 @@ export function createModel (builder: Builder): void {
     inlineEditor: contact.component.EmployeeArrayEditor
   })
 
-  builder.mixin(contact.class.Member, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(contact.class.Member, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: contact.component.MemberPresenter
   })
 
@@ -292,7 +292,7 @@ export function createModel (builder: Builder): void {
     inlineEditor: contact.component.EmployeeEditor
   })
 
-  builder.mixin(contact.class.Channel, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(contact.class.Channel, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: contact.component.ChannelsPresenter
   })
 
@@ -401,7 +401,7 @@ export function createModel (builder: Builder): void {
     contact.avatarProvider.Gravatar
   )
 
-  builder.mixin(contact.class.Person, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(contact.class.Person, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: contact.component.PersonPresenter
   })
 
@@ -413,22 +413,38 @@ export function createModel (builder: Builder): void {
     inlineEditor: contact.component.AccountArrayEditor
   })
 
-  builder.mixin(core.class.Account, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(core.class.Account, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: contact.component.EmployeeAccountPresenter
   })
 
-  builder.mixin(contact.class.Organization, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(contact.class.Organization, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: contact.component.OrganizationPresenter
   })
 
-  builder.mixin(contact.class.Contact, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(contact.class.Contact, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: contact.component.ContactPresenter
   })
 
-  builder.mixin(contact.class.Employee, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(contact.class.Employee, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: contact.component.EmployeePresenter
   })
 
+  builder.mixin(contact.class.Employee, core.class.Class, view.mixin.SortFuncs, {
+    func: contact.function.EmployeeSort
+  })
+
+  builder.mixin(contact.class.Person, core.class.Class, view.mixin.AttributePresenter, {
+    presenter: contact.component.PersonRefPresenter
+  })
+
+  builder.mixin(contact.class.Contact, core.class.Class, view.mixin.AttributePresenter, {
+    presenter: contact.component.ContactRefPresenter
+  })
+
+  builder.mixin(contact.class.Employee, core.class.Class, view.mixin.AttributePresenter, {
+    presenter: contact.component.EmployeeRefPresenter
+  })
+
   builder.mixin(contact.class.Employee, core.class.Class, view.mixin.IgnoreActions, {
     actions: [view.action.Delete]
   })
diff --git a/models/contact/src/plugin.ts b/models/contact/src/plugin.ts
index be462d919e..6a06fe4a7c 100644
--- a/models/contact/src/plugin.ts
+++ b/models/contact/src/plugin.ts
@@ -25,6 +25,7 @@ import { Action, ActionCategory, ViewAction } from '@hcengineering/view'
 export default mergeIds(contactId, contact, {
   component: {
     PersonPresenter: '' as AnyComponent,
+    ContactRefPresenter: '' as AnyComponent,
     ContactPresenter: '' as AnyComponent,
     EditPerson: '' as AnyComponent,
     EditOrganization: '' as AnyComponent,
@@ -35,6 +36,8 @@ export default mergeIds(contactId, contact, {
     EmployeeAccountPresenter: '' as AnyComponent,
     OrganizationEditor: '' as AnyComponent,
     EmployeePresenter: '' as AnyComponent,
+    EmployeeRefPresenter: '' as AnyComponent,
+    PersonRefPresenter: '' as AnyComponent,
     PersonEditor: '' as AnyComponent,
     Members: '' as AnyComponent,
     MemberPresenter: '' as AnyComponent,
diff --git a/models/document/src/index.ts b/models/document/src/index.ts
index 0e823e8f4c..2aaba67af3 100644
--- a/models/document/src/index.ts
+++ b/models/document/src/index.ts
@@ -224,10 +224,10 @@ export function createModel (builder: Builder): void {
     editor: document.component.EditDoc
   })
 
-  builder.mixin(document.class.Document, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(document.class.Document, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: document.component.DocumentPresenter
   })
-  builder.mixin(document.class.DocumentVersion, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(document.class.DocumentVersion, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: document.component.DocumentVersionPresenter
   })
 
diff --git a/models/hr/src/index.ts b/models/hr/src/index.ts
index a429a30263..a4018c6256 100644
--- a/models/hr/src/index.ts
+++ b/models/hr/src/index.ts
@@ -387,7 +387,7 @@ export function createModel (builder: Builder): void {
     }
   })
 
-  builder.mixin(hr.class.Request, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(hr.class.Request, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: hr.component.RequestPresenter
   })
 }
diff --git a/models/inventory/src/index.ts b/models/inventory/src/index.ts
index 2197be9468..c091dbe6bd 100644
--- a/models/inventory/src/index.ts
+++ b/models/inventory/src/index.ts
@@ -22,8 +22,7 @@ import { createAction } from '@hcengineering/model-view'
 import workbench from '@hcengineering/model-workbench'
 import notification from '@hcengineering/notification'
 import setting from '@hcengineering/setting'
-import type {} from '@hcengineering/view'
-import view from '@hcengineering/view'
+import view, { Viewlet } from '@hcengineering/view'
 import inventory from './plugin'
 
 export const DOMAIN_INVENTORY = 'inventory' as Domain
@@ -75,15 +74,19 @@ export class TVariant extends TAttachedDoc implements Variant {
 export function createModel (builder: Builder): void {
   builder.createModel(TCategory, TProduct, TVariant)
 
-  builder.mixin(inventory.class.Category, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(inventory.class.Category, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: inventory.component.CategoryPresenter
   })
 
-  builder.mixin(inventory.class.Product, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(inventory.class.Category, core.class.Class, view.mixin.AttributePresenter, {
+    presenter: inventory.component.CategoryRefPresenter
+  })
+
+  builder.mixin(inventory.class.Product, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: inventory.component.ProductPresenter
   })
 
-  builder.mixin(inventory.class.Variant, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(inventory.class.Variant, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: inventory.component.VariantPresenter
   })
 
@@ -99,13 +102,13 @@ export function createModel (builder: Builder): void {
     value: true
   })
 
-  builder.createDoc(
+  builder.createDoc<Viewlet>(
     view.class.Viewlet,
     core.space.Model,
     {
       attachTo: inventory.class.Product,
       descriptor: view.viewlet.Table,
-      config: ['', '$lookup.attachedTo', 'modifiedOn']
+      config: ['', 'attachedTo', 'modifiedOn']
     },
     inventory.viewlet.TableProduct
   )
diff --git a/models/inventory/src/plugin.ts b/models/inventory/src/plugin.ts
index c97fbe3c69..a5d1d9dc2e 100644
--- a/models/inventory/src/plugin.ts
+++ b/models/inventory/src/plugin.ts
@@ -36,6 +36,7 @@ export default mergeIds(inventoryId, inventory, {
     CreateProduct: '' as AnyComponent,
     EditProduct: '' as AnyComponent,
     CategoryPresenter: '' as AnyComponent,
+    CategoryRefPresenter: '' as AnyComponent,
     Variants: '' as AnyComponent,
     ProductPresenter: '' as AnyComponent,
     VariantPresenter: '' as AnyComponent
diff --git a/models/lead/src/index.ts b/models/lead/src/index.ts
index 3c4d20f78a..8aa973dd97 100644
--- a/models/lead/src/index.ts
+++ b/models/lead/src/index.ts
@@ -189,7 +189,7 @@ export function createModel (builder: Builder): void {
       descriptor: view.viewlet.Table,
       config: [
         '',
-        '$lookup._class',
+        '_class',
         'leads',
         'modifiedOn',
         {
@@ -212,9 +212,9 @@ export function createModel (builder: Builder): void {
       config: [
         '',
         'title',
-        '$lookup.attachedTo',
-        '$lookup.state',
-        '$lookup.doneState',
+        'attachedTo',
+        'state',
+        'doneState',
         'attachments',
         'comments',
         'modifiedOn',
@@ -227,6 +227,36 @@ export function createModel (builder: Builder): void {
     lead.viewlet.TableLead
   )
 
+  builder.createDoc(
+    view.class.Viewlet,
+    core.space.Model,
+    {
+      attachTo: lead.class.Lead,
+      descriptor: view.viewlet.List,
+      config: [
+        { key: '', props: { fixed: 'left' } },
+        { key: 'title', props: { fixed: 'left' } },
+        { key: 'state', props: { fixed: 'left' } },
+        { key: 'doneState', props: { fixed: 'left' } },
+        { key: '', presenter: view.component.GrowPresenter },
+        'attachments',
+        'comments',
+        'assignee'
+      ],
+      viewOptions: {
+        groupBy: ['assignee', 'state', 'attachedTo'],
+        orderBy: [
+          ['assignee', -1],
+          ['state', 1],
+          ['attachedTo', 1],
+          ['modifiedOn', -1]
+        ],
+        other: []
+      }
+    },
+    lead.viewlet.ListLead
+  )
+
   builder.createDoc(view.class.Viewlet, core.space.Model, {
     attachTo: lead.class.Lead,
     descriptor: task.viewlet.Kanban,
@@ -254,7 +284,7 @@ export function createModel (builder: Builder): void {
     editor: lead.component.EditLead
   })
 
-  builder.mixin(lead.class.Lead, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(lead.class.Lead, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: lead.component.LeadPresenter
   })
 
diff --git a/models/lead/src/plugin.ts b/models/lead/src/plugin.ts
index 5223da1052..77b1e4a7be 100644
--- a/models/lead/src/plugin.ts
+++ b/models/lead/src/plugin.ts
@@ -30,7 +30,6 @@ export default mergeIds(leadId, lead, {
     LeadApplication: '' as IntlString,
     Lead: '' as IntlString,
     Title: '' as IntlString,
-    Assignee: '' as IntlString,
     ManageFunnelStatuses: '' as IntlString,
     FunnelBrowser: '' as IntlString,
     GotoLeadApplication: '' as IntlString
@@ -52,7 +51,8 @@ export default mergeIds(leadId, lead, {
   },
   viewlet: {
     TableCustomer: '' as Ref<Viewlet>,
-    TableLead: '' as Ref<Viewlet>
+    TableLead: '' as Ref<Viewlet>,
+    ListLead: '' as Ref<Viewlet>
   },
   category: {
     Lead: '' as Ref<ActionCategory>
diff --git a/models/recruit/src/index.ts b/models/recruit/src/index.ts
index 0e0769c006..c2b896260c 100644
--- a/models/recruit/src/index.ts
+++ b/models/recruit/src/index.ts
@@ -351,10 +351,10 @@ export function createModel (builder: Builder): void {
       descriptor: task.viewlet.StatusTable,
       config: [
         '',
-        '$lookup.attachedTo',
-        '$lookup.assignee',
-        '$lookup.state',
-        '$lookup.doneState',
+        'attachedTo',
+        'assignee',
+        'state',
+        'doneState',
         'attachments',
         'comments',
         'modifiedOn',
@@ -415,7 +415,7 @@ export function createModel (builder: Builder): void {
     editor: recruit.component.EditVacancy
   })
 
-  builder.mixin(recruit.class.Applicant, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(recruit.class.Applicant, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: recruit.component.ApplicationPresenter
   })
 
@@ -423,7 +423,7 @@ export function createModel (builder: Builder): void {
     presenter: recruit.component.ApplicationsPresenter
   })
 
-  builder.mixin(recruit.class.Vacancy, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(recruit.class.Vacancy, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: recruit.component.VacancyPresenter
   })
 
diff --git a/models/recruit/src/review.ts b/models/recruit/src/review.ts
index 219fe2ef31..8fb186ec33 100644
--- a/models/recruit/src/review.ts
+++ b/models/recruit/src/review.ts
@@ -60,11 +60,11 @@ export function createReviewModel (builder: Builder): void {
     editor: recruit.component.EditReview
   })
 
-  builder.mixin(recruit.class.Review, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(recruit.class.Review, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: recruit.component.ReviewPresenter
   })
 
-  builder.mixin(recruit.class.Opinion, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(recruit.class.Opinion, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: recruit.component.OpinionPresenter
   })
 
diff --git a/models/request/src/index.ts b/models/request/src/index.ts
index c7ed836ae7..84434f1520 100644
--- a/models/request/src/index.ts
+++ b/models/request/src/index.ts
@@ -56,7 +56,7 @@ export function createModel (builder: Builder): void {
     editor: request.component.EditRequest
   })
 
-  builder.mixin(request.class.Request, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(request.class.Request, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: request.component.RequestPresenter
   })
 
diff --git a/models/tags/src/index.ts b/models/tags/src/index.ts
index 2209c7f27e..8224f782f5 100644
--- a/models/tags/src/index.ts
+++ b/models/tags/src/index.ts
@@ -106,10 +106,10 @@ export function createModel (builder: Builder): void {
     inlineEditor: tags.component.TagsAttributeEditor
   })
 
-  builder.mixin(tags.class.TagReference, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(tags.class.TagReference, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: tags.component.TagReferencePresenter
   })
-  builder.mixin(tags.class.TagElement, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(tags.class.TagElement, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: tags.component.TagElementPresenter
   })
 
diff --git a/models/task/src/index.ts b/models/task/src/index.ts
index e9c51c579e..5bee6066f8 100644
--- a/models/task/src/index.ts
+++ b/models/task/src/index.ts
@@ -366,29 +366,20 @@ export function createModel (builder: Builder): void {
     {
       attachTo: task.class.Issue,
       descriptor: task.viewlet.StatusTable,
-      config: [
-        '',
-        'name',
-        '$lookup.assignee',
-        '$lookup.state',
-        '$lookup.doneState',
-        'attachments',
-        'comments',
-        'modifiedOn'
-      ]
+      config: ['', 'name', 'assignee', 'state', 'doneState', 'attachments', 'comments', 'modifiedOn']
     },
     task.viewlet.TableIssue
   )
 
-  builder.mixin(task.class.Task, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(task.class.Task, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: view.component.ObjectPresenter
   })
 
-  builder.mixin(task.class.Issue, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(task.class.Issue, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: task.component.TaskPresenter
   })
 
-  builder.mixin(task.class.KanbanTemplate, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(task.class.KanbanTemplate, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: task.component.KanbanTemplatePresenter
   })
 
@@ -462,10 +453,14 @@ export function createModel (builder: Builder): void {
     inlineEditor: task.component.StateEditor
   })
 
-  builder.mixin(task.class.State, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(task.class.State, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: task.component.StatePresenter
   })
 
+  builder.mixin(task.class.State, core.class.Class, view.mixin.AttributePresenter, {
+    presenter: task.component.StateRefPresenter
+  })
+
   builder.mixin(task.class.State, core.class.Class, view.mixin.IgnoreActions, {
     actions: [view.action.Delete]
   })
@@ -474,10 +469,14 @@ export function createModel (builder: Builder): void {
     inlineEditor: task.component.DoneStateEditor
   })
 
-  builder.mixin(task.class.DoneState, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(task.class.DoneState, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: task.component.DoneStatePresenter
   })
 
+  builder.mixin(task.class.DoneState, core.class.Class, view.mixin.AttributePresenter, {
+    presenter: task.component.DoneStateRefPresenter
+  })
+
   builder.createDoc(
     view.class.ViewletDescriptor,
     core.space.Model,
@@ -504,7 +503,7 @@ export function createModel (builder: Builder): void {
     editor: task.component.Todos
   })
 
-  builder.mixin(task.class.TodoItem, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(task.class.TodoItem, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: task.component.TodoItemPresenter
   })
 
diff --git a/models/task/src/plugin.ts b/models/task/src/plugin.ts
index a2c71d1761..671b7ac249 100644
--- a/models/task/src/plugin.ts
+++ b/models/task/src/plugin.ts
@@ -58,7 +58,9 @@ export default mergeIds(taskId, task, {
     TodoItemPresenter: '' as AnyComponent,
     StatusTableView: '' as AnyComponent,
     TaskHeader: '' as AnyComponent,
-    Dashboard: '' as AnyComponent
+    Dashboard: '' as AnyComponent,
+    StateRefPresenter: '' as AnyComponent,
+    DoneStateRefPresenter: '' as AnyComponent
   },
   space: {
     TasksPublic: '' as Ref<Space>
diff --git a/models/tracker/src/index.ts b/models/tracker/src/index.ts
index 9b2778c187..563c55f191 100644
--- a/models/tracker/src/index.ts
+++ b/models/tracker/src/index.ts
@@ -73,7 +73,7 @@ import {
   trackerId,
   WorkDayLength
 } from '@hcengineering/tracker'
-import { KeyBinding } from '@hcengineering/view'
+import { KeyBinding, ViewOptionsModel } from '@hcengineering/view'
 import tracker from './plugin'
 
 import presentation from '@hcengineering/model-presentation'
@@ -467,9 +467,31 @@ export function createModel (builder: Builder): void {
     TTypeReportedTime
   )
 
+  const issuesOptions: ViewOptionsModel = {
+    groupBy: ['status', 'assignee', 'priority', 'project', 'sprint'],
+    orderBy: [
+      ['status', SortingOrder.Ascending],
+      ['priority', SortingOrder.Ascending],
+      ['modifiedOn', SortingOrder.Descending],
+      ['dueDate', SortingOrder.Descending],
+      ['rank', SortingOrder.Ascending]
+    ],
+    other: [
+      {
+        key: 'shouldShowSubIssues',
+        type: 'toggle',
+        defaultValue: false,
+        actionTartget: 'query',
+        action: tracker.function.SubIssueQuery,
+        label: tracker.string.SubIssues
+      }
+    ]
+  }
+
   builder.createDoc(view.class.Viewlet, core.space.Model, {
     attachTo: tracker.class.Issue,
-    descriptor: tracker.viewlet.List,
+    descriptor: view.viewlet.List,
+    viewOptions: issuesOptions,
     config: [
       {
         key: '',
@@ -484,7 +506,7 @@ export function createModel (builder: Builder): void {
       },
       { key: '', presenter: tracker.component.TitlePresenter, props: { shouldUseMargin: true } },
       { key: '', presenter: tracker.component.SubIssuesSelector, props: {} },
-      { key: '', presenter: tracker.component.GrowPresenter, props: { type: 'grow' } },
+      { key: '', presenter: view.component.GrowPresenter, props: { type: 'grow' } },
       { key: '', presenter: tracker.component.DueDatePresenter, props: { kind: 'list' } },
       {
         key: '',
@@ -530,11 +552,21 @@ export function createModel (builder: Builder): void {
 
   builder.createDoc(view.class.Viewlet, core.space.Model, {
     attachTo: tracker.class.IssueTemplate,
-    descriptor: tracker.viewlet.List,
+    descriptor: view.viewlet.List,
+    viewOptions: {
+      groupBy: ['assignee', 'priority', 'project', 'sprint'],
+      orderBy: [
+        ['priority', SortingOrder.Ascending],
+        ['modifiedOn', SortingOrder.Descending],
+        ['dueDate', SortingOrder.Descending],
+        ['rank', SortingOrder.Ascending]
+      ],
+      other: []
+    },
     config: [
       // { key: '', presenter: tracker.component.PriorityEditor, props: { kind: 'list', size: 'small' } },
       { key: '', presenter: tracker.component.IssueTemplatePresenter, props: { type: 'issue', shouldUseMargin: true } },
-      { key: '', presenter: tracker.component.GrowPresenter, props: { type: 'grow' } },
+      { key: '', presenter: view.component.GrowPresenter, props: { type: 'grow' } },
       // { key: '', presenter: tracker.component.DueDatePresenter, props: { kind: 'list' } },
       {
         key: '',
@@ -556,20 +588,10 @@ export function createModel (builder: Builder): void {
     ]
   })
 
-  builder.createDoc(
-    view.class.ViewletDescriptor,
-    core.space.Model,
-    {
-      label: tracker.string.List,
-      icon: view.icon.Table,
-      component: tracker.component.ListView
-    },
-    tracker.viewlet.List
-  )
-
   builder.createDoc(view.class.Viewlet, core.space.Model, {
     attachTo: tracker.class.Issue,
     descriptor: tracker.viewlet.Kanban,
+    viewOptions: issuesOptions,
     config: []
   })
 
@@ -657,11 +679,11 @@ export function createModel (builder: Builder): void {
   const sprintsId = 'sprints'
   const templatesId = 'templates'
 
-  builder.mixin(tracker.class.Issue, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(tracker.class.Issue, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: tracker.component.IssuePresenter
   })
 
-  builder.mixin(tracker.class.IssueTemplate, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(tracker.class.IssueTemplate, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: tracker.component.IssueTemplatePresenter
   })
 
@@ -669,7 +691,7 @@ export function createModel (builder: Builder): void {
     presenter: tracker.component.IssuePreview
   })
 
-  builder.mixin(tracker.class.TimeSpendReport, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(tracker.class.TimeSpendReport, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: tracker.component.TimeSpendReport
   })
 
@@ -677,7 +699,23 @@ export function createModel (builder: Builder): void {
     titleProvider: tracker.function.IssueTitleProvider
   })
 
-  builder.mixin(tracker.class.TypeIssuePriority, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(tracker.class.Issue, core.class.Class, view.mixin.ListHeaderExtra, {
+    presenters: [tracker.component.IssueStatistics]
+  })
+
+  builder.mixin(tracker.class.IssueStatus, core.class.Class, view.mixin.SortFuncs, {
+    func: tracker.function.IssueStatusSort
+  })
+
+  builder.mixin(tracker.class.TypeIssuePriority, core.class.Class, view.mixin.SortFuncs, {
+    func: tracker.function.IssuePrioritySort
+  })
+
+  builder.mixin(tracker.class.Sprint, core.class.Class, view.mixin.SortFuncs, {
+    func: tracker.function.SprintSort
+  })
+
+  builder.mixin(tracker.class.TypeIssuePriority, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: tracker.component.PriorityPresenter
   })
 
@@ -685,33 +723,40 @@ export function createModel (builder: Builder): void {
     component: view.component.ValueFilter
   })
 
-  builder.mixin(tracker.class.IssueStatus, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(tracker.class.IssueStatus, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: tracker.component.StatusPresenter
   })
 
-  builder.mixin(tracker.class.Project, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(tracker.class.IssueStatus, core.class.Class, view.mixin.AttributePresenter, {
+    presenter: tracker.component.StatusRefPresenter
+  })
+
+  builder.mixin(tracker.class.TypeIssuePriority, core.class.Class, view.mixin.AttributePresenter, {
+    presenter: tracker.component.PriorityRefPresenter
+  })
+
+  builder.mixin(tracker.class.Project, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: tracker.component.ProjectTitlePresenter
   })
 
-  builder.mixin(tracker.class.Team, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(tracker.class.Team, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: tracker.component.TeamPresenter
   })
 
-  classPresenter(
-    builder,
-    tracker.class.Project,
-    tracker.component.ProjectTitlePresenter,
-    tracker.component.ProjectSelector
-  )
+  classPresenter(builder, tracker.class.Project, tracker.component.ProjectSelector, tracker.component.ProjectSelector)
 
   builder.mixin(tracker.class.Project, core.class.Class, view.mixin.AttributeEditor, {
     inlineEditor: tracker.component.ProjectSelector
   })
 
-  builder.mixin(tracker.class.Sprint, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(tracker.class.Sprint, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: tracker.component.SprintTitlePresenter
   })
 
+  builder.mixin(tracker.class.Sprint, core.class.Class, view.mixin.AttributePresenter, {
+    presenter: tracker.component.SprintRefPresenter
+  })
+
   builder.mixin(tracker.class.Issue, core.class.Class, setting.mixin.Editable, {
     value: true
   })
diff --git a/models/tracker/src/plugin.ts b/models/tracker/src/plugin.ts
index 03450215b7..74153e7ad9 100644
--- a/models/tracker/src/plugin.ts
+++ b/models/tracker/src/plugin.ts
@@ -41,7 +41,8 @@ export default mergeIds(trackerId, tracker, {
     // Required to pass build without errorsF
     Nope: '' as AnyComponent,
     SprintSelector: '' as AnyComponent,
-    SubIssuesSelector: '' as AnyComponent
+    SubIssuesSelector: '' as AnyComponent,
+    IssueStatistics: '' as AnyComponent
   },
   app: {
     Tracker: '' as Ref<Application>
diff --git a/models/view/src/index.ts b/models/view/src/index.ts
index 688cca9b9f..6aaa838188 100644
--- a/models/view/src/index.ts
+++ b/models/view/src/index.ts
@@ -29,6 +29,7 @@ import type {
   AttributePresenter,
   BuildModelKey,
   ClassFilters,
+  ClassSortFuncs,
   CollectionEditor,
   CollectionPresenter,
   Filter,
@@ -38,13 +39,16 @@ import type {
   KeyBinding,
   KeyFilter,
   LinkPresenter,
+  ListHeaderExtra,
+  ListItemPresenter,
   ObjectEditor,
   ObjectEditorHeader,
   ObjectFactory,
+  ObjectPresenter,
   ObjectTitle,
   ObjectValidator,
   PreviewPresenter,
-  ListItemPresenter,
+  SortFunc,
   SpaceHeader,
   SpaceName,
   ViewAction,
@@ -52,7 +56,8 @@ import type {
   ViewContext,
   Viewlet,
   ViewletDescriptor,
-  ViewletPreference
+  ViewletPreference,
+  ViewOptionsModel
 } from '@hcengineering/view'
 import view from './plugin'
 
@@ -134,6 +139,11 @@ export class TAttributePresenter extends TClass implements AttributePresenter {
   presenter!: AnyComponent
 }
 
+@Mixin(view.mixin.ObjectPresenter, core.class.Class)
+export class TObjectPresenter extends TClass implements ObjectPresenter {
+  presenter!: AnyComponent
+}
+
 @Mixin(view.mixin.ListItemPresenter, core.class.Class)
 export class TListItemPresenter extends TClass implements ListItemPresenter {
   presenter!: AnyComponent
@@ -176,6 +186,16 @@ export class TObjectTitle extends TClass implements ObjectTitle {
   titleProvider!: Resource<<T extends Doc>(client: Client, ref: Ref<T>) => Promise<string>>
 }
 
+@Mixin(view.mixin.ListHeaderExtra, core.class.Class)
+export class TListHeaderExtra extends TClass implements ListHeaderExtra {
+  presenters!: AnyComponent[]
+}
+
+@Mixin(view.mixin.SortFuncs, core.class.Class)
+export class TSortFuncs extends TClass implements ClassSortFuncs {
+  func!: SortFunc
+}
+
 @Model(view.class.ViewletPreference, preference.class.Preference)
 export class TViewletPreference extends TPreference implements ViewletPreference {
   attachedTo!: Ref<Viewlet>
@@ -190,11 +210,12 @@ export class TViewletDescriptor extends TDoc implements ViewletDescriptor {
 
 @Model(view.class.Viewlet, core.class.Doc, DOMAIN_MODEL)
 export class TViewlet extends TDoc implements Viewlet {
-  attachTo!: Ref<Class<Space>>
+  attachTo!: Ref<Class<Doc>>
   descriptor!: Ref<ViewletDescriptor>
   open!: AnyComponent
   config!: (BuildModelKey | string)[]
   hiddenKeys?: string[]
+  viewOptions?: ViewOptionsModel
 }
 
 @Model(view.class.Action, core.class.Doc, DOMAIN_MODEL)
@@ -279,6 +300,9 @@ export function createModel (builder: Builder): void {
     TCollectionEditor,
     TCollectionPresenter,
     TObjectEditor,
+    TObjectPresenter,
+    TSortFuncs,
+    TListHeaderExtra,
     TViewletPreference,
     TViewletDescriptor,
     TViewlet,
@@ -330,7 +354,14 @@ export function createModel (builder: Builder): void {
   classPresenter(builder, core.class.TypeTimestamp, view.component.TimestampPresenter)
   classPresenter(builder, core.class.TypeDate, view.component.DatePresenter, view.component.DateEditor)
   classPresenter(builder, core.class.Space, view.component.ObjectPresenter)
-  classPresenter(builder, core.class.Class, view.component.ClassPresenter)
+  classPresenter(builder, core.class.Class, view.component.ClassRefPresenter)
+  builder.mixin(core.class.Space, core.class.Class, view.mixin.ObjectPresenter, {
+    presenter: view.component.SpacePresenter
+  })
+
+  builder.mixin(core.class.Class, core.class.Class, view.mixin.ObjectPresenter, {
+    presenter: view.component.ClassPresenter
+  })
 
   classPresenter(builder, core.class.TypeRelatedDocument, view.component.ObjectPresenter)
 
@@ -376,6 +407,17 @@ export function createModel (builder: Builder): void {
     view.viewlet.Table
   )
 
+  builder.createDoc(
+    view.class.ViewletDescriptor,
+    core.space.Model,
+    {
+      label: view.string.Table,
+      icon: view.icon.Table,
+      component: view.component.ListView
+    },
+    view.viewlet.List
+  )
+
   createAction(
     builder,
     {
diff --git a/models/view/src/plugin.ts b/models/view/src/plugin.ts
index 21cf16a468..1658fba407 100644
--- a/models/view/src/plugin.ts
+++ b/models/view/src/plugin.ts
@@ -58,10 +58,13 @@ export default mergeIds(viewId, view, {
     YoutubePresenter: '' as AnyComponent,
     GithubPresenter: '' as AnyComponent,
     ClassPresenter: '' as AnyComponent,
+    ClassRefPresenter: '' as AnyComponent,
     EnumEditor: '' as AnyComponent,
     HTMLEditor: '' as AnyComponent,
     MarkupEditor: '' as AnyComponent,
-    MarkupEditorPopup: '' as AnyComponent
+    MarkupEditorPopup: '' as AnyComponent,
+    ListView: '' as AnyComponent,
+    GrowPresenter: '' as AnyComponent
   },
   string: {
     Table: '' as IntlString,
@@ -84,7 +87,8 @@ export default mergeIds(viewId, view, {
     General: '' as IntlString,
     Navigation: '' as IntlString,
     Editor: '' as IntlString,
-    MarkdownFormatting: '' as IntlString
+    MarkdownFormatting: '' as IntlString,
+    List: '' as IntlString
   },
   function: {
     FilterObjectInResult: '' as Resource<(filter: Filter, onUpdate: () => void) => Promise<ObjQueryType<any>>>,
diff --git a/models/workbench/src/index.ts b/models/workbench/src/index.ts
index ed480a6850..3dae7993cb 100644
--- a/models/workbench/src/index.ts
+++ b/models/workbench/src/index.ts
@@ -48,7 +48,7 @@ export class TSpaceView extends TClass implements SpaceView {
 
 export function createModel (builder: Builder): void {
   builder.createModel(TApplication, TSpaceView, THiddenApplication)
-  builder.mixin(workbench.class.Application, core.class.Class, view.mixin.AttributePresenter, {
+  builder.mixin(workbench.class.Application, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: workbench.component.ApplicationPresenter
   })
 }
diff --git a/packages/kanban/src/components/Kanban.svelte b/packages/kanban/src/components/Kanban.svelte
index 70c1c12aed..aa2cb89a5b 100644
--- a/packages/kanban/src/components/Kanban.svelte
+++ b/packages/kanban/src/components/Kanban.svelte
@@ -13,7 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import core, { AttachedDoc, Class, Doc, DocumentQuery, DocumentUpdate, FindOptions, Ref } from '@hcengineering/core'
+  import { Class, Doc, DocumentQuery, DocumentUpdate, FindOptions, Ref, SortingOrder } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { getPlatformColor, ScrollBox, Scroller } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
@@ -22,14 +22,13 @@
   import KanbanRow from './KanbanRow.svelte'
 
   export let _class: Ref<Class<Item>>
-  export let search: string
   export let options: FindOptions<Item> | undefined = undefined
   export let states: TypeState[] = []
   export let query: DocumentQuery<Item> = {}
   export let fieldName: string
-  export let rankFieldName: string | undefined
   export let selection: number | undefined = undefined
   export let checked: Doc[] = []
+  export let dontUpdateRank: boolean = false
 
   const dispatch = createEventDispatcher()
 
@@ -38,15 +37,13 @@
   const objsQ = createQuery()
   $: objsQ.query(
     _class,
-    {
-      ...query,
-      ...(search !== '' ? { $search: search } : {})
-    },
+    query,
     (result) => {
       objects = result
       dispatch('content', objects)
     },
     {
+      sort: { rank: SortingOrder.Ascending },
       ...options
     }
   )
@@ -57,10 +54,6 @@
     dragItem?: Item // required for svelte to properly recalculate state.
   ): ExtItem[] {
     const stateCards = objects.filter((it) => (it as any)[fieldName] === state._id)
-    if (rankFieldName !== undefined) {
-      const sortField = rankFieldName
-      stateCards.sort((a, b) => (a as any)[sortField]?.localeCompare((b as any)[sortField]))
-    }
     return stateCards.map((it, idx, arr) => ({
       it,
       prev: arr[idx - 1],
@@ -69,23 +62,6 @@
     }))
   }
 
-  async function updateItem (item: Item, update: DocumentUpdate<Item>) {
-    if (client.getHierarchy().isDerived(_class, core.class.AttachedDoc)) {
-      const adoc: AttachedDoc = item as Doc as AttachedDoc
-      await client.updateCollection(
-        _class,
-        adoc.space,
-        adoc._id as Ref<Doc> as Ref<AttachedDoc>,
-        adoc.attachedTo,
-        adoc.attachedToClass,
-        adoc.collection,
-        update
-      )
-    } else {
-      await client.updateDoc(item._class, item.space, item._id, update)
-    }
-  }
-
   async function move (state: StateType) {
     if (dragCard === undefined) {
       return
@@ -99,15 +75,15 @@
       }
     }
 
-    if (rankFieldName !== undefined && dragCardInitialRank !== (dragCard as any)[rankFieldName]) {
-      const dragCardRank = (dragCard as any)[rankFieldName]
+    if (!dontUpdateRank && dragCardInitialRank !== dragCard.rank) {
+      const dragCardRank = dragCard.rank
       updates = {
         ...updates,
-        [rankFieldName]: dragCardRank
+        rank: dragCardRank
       }
     }
     if (Object.keys(updates).length > 0) {
-      await updateItem(dragCard, updates)
+      await client.update(dragCard, updates)
     }
     dragCard = undefined
   }
@@ -125,7 +101,7 @@
     if (dragCard === undefined) {
       return
     }
-    await updateItem(dragCard, query)
+    await client.update(dragCard, query)
   }
   function doCalcRank (
     object: { prev?: Item; it: Item; next?: Item },
@@ -146,26 +122,28 @@
     if (card !== undefined && card[fieldName] !== state._id) {
       card[fieldName] = state._id
       const objs = getStateObjects(objects, state)
-      if (rankFieldName !== undefined) card[rankFieldName] = calcRank(objs[objs.length - 1]?.it, undefined)
+      if (!dontUpdateRank) {
+        card.rank = calcRank(objs[objs.length - 1]?.it, undefined)
+      }
     }
   }
   function cardDragOver (evt: CardDragEvent, object: ExtItem): void {
     if (dragCard !== undefined) {
       ;(dragCard as any)[fieldName] = (dragCard as any)[fieldName]
-      if (rankFieldName !== undefined) {
-        ;(dragCard as any)[rankFieldName] = doCalcRank(object, evt)
+      if (!dontUpdateRank) {
+        dragCard.rank = doCalcRank(object, evt)
       }
     }
   }
   function cardDrop (evt: CardDragEvent, object: ExtItem): void {
-    if (dragCard !== undefined && rankFieldName !== undefined) {
-      ;(dragCard as any)[rankFieldName] = doCalcRank(object, evt)
+    if (!dontUpdateRank && dragCard !== undefined) {
+      dragCard.rank = doCalcRank(object, evt)
     }
     isDragging = false
   }
   function onDragStart (object: ExtItem, state: TypeState): void {
     dragCardInitialState = state._id
-    dragCardInitialRank = rankFieldName === undefined ? undefined : (object.it as any)[rankFieldName]
+    dragCardInitialRank = object.it.rank
     dragCard = object.it
     isDragging = true
     dispatch('obj-focus', object.it)
diff --git a/packages/presentation/lang/en.json b/packages/presentation/lang/en.json
index e990971181..dd99f49374 100644
--- a/packages/presentation/lang/en.json
+++ b/packages/presentation/lang/en.json
@@ -27,6 +27,7 @@
     "Add": "Add",
     "Edit": "Edit",
     "SelectAvatar": "Select avatar",
-    "GravatarsManaged": "Gravatars are managed through"
+    "GravatarsManaged": "Gravatars are managed through",
+    "InltPropsValue": "{value}"
   }
 }
diff --git a/packages/presentation/lang/ru.json b/packages/presentation/lang/ru.json
index 080f5102d2..3381d3950b 100644
--- a/packages/presentation/lang/ru.json
+++ b/packages/presentation/lang/ru.json
@@ -27,6 +27,7 @@
     "Add": "Добавить",
     "Edit": "Редактировать",
     "SelectAvatar": "Выбрать аватар",
-    "GravatarsManaged": "Граватары управляются через"
+    "GravatarsManaged": "Граватары управляются через",
+    "InltPropsValue": "{value}"
   }
 }
diff --git a/packages/presentation/src/plugin.ts b/packages/presentation/src/plugin.ts
index e802faf584..4356153cad 100644
--- a/packages/presentation/src/plugin.ts
+++ b/packages/presentation/src/plugin.ts
@@ -56,7 +56,8 @@ export default plugin(presentationId, {
     Add: '' as IntlString,
     Edit: '' as IntlString,
     SelectAvatar: '' as IntlString,
-    GravatarsManaged: '' as IntlString
+    GravatarsManaged: '' as IntlString,
+    InltPropsValue: '' as IntlString
   },
   metadata: {
     RequiredVersion: '' as Metadata<string>,
diff --git a/packages/presentation/src/utils.ts b/packages/presentation/src/utils.ts
index 05a6874051..a1311ac2c6 100644
--- a/packages/presentation/src/utils.ts
+++ b/packages/presentation/src/utils.ts
@@ -200,7 +200,7 @@ export async function copyTextToClipboard (text: string): Promise<void> {
 /**
  * @public
  */
-export type AttributeCategory = 'attribute' | 'inplace' | 'collection' | 'array'
+export type AttributeCategory = 'object' | 'attribute' | 'inplace' | 'collection' | 'array'
 
 /**
  * @public
@@ -215,7 +215,7 @@ export function getAttributePresenterClass (
   attribute: AnyAttribute
 ): { attrClass: Ref<Class<Doc>>, category: AttributeCategory } {
   let attrClass = attribute.type._class
-  let category: AttributeCategory = 'attribute'
+  let category: AttributeCategory = 'object'
   if (hierarchy.isDerived(attrClass, core.class.RefTo)) {
     attrClass = (attribute.type as RefTo<Doc>).to
     category = 'attribute'
diff --git a/packages/ui/src/components/TimeSince.svelte b/packages/ui/src/components/TimeSince.svelte
index 875dd26a09..34fe09ff39 100644
--- a/packages/ui/src/components/TimeSince.svelte
+++ b/packages/ui/src/components/TimeSince.svelte
@@ -32,7 +32,7 @@
 
   let time: string = ''
 
-  async function formatTime (now: number) {
+  async function formatTime (now: number, value: number) {
     let passed = now - value
     if (passed < 0) passed = 0
     if (passed < HOUR) {
@@ -48,7 +48,7 @@
     }
   }
 
-  $: formatTime($ticker)
+  $: formatTime($ticker, value)
 
   $: tooltipValue = new Date(value).toLocaleString('default', {
     minute: '2-digit',
diff --git a/plugins/board-resources/src/components/KanbanView.svelte b/plugins/board-resources/src/components/KanbanView.svelte
index fd796fd35b..5a76ffa3f9 100644
--- a/plugins/board-resources/src/components/KanbanView.svelte
+++ b/plugins/board-resources/src/components/KanbanView.svelte
@@ -15,7 +15,7 @@
 -->
 <script lang="ts">
   import board, { Card } from '@hcengineering/board'
-  import { Class, Doc, FindOptions, Ref, SortingOrder, WithLookup } from '@hcengineering/core'
+  import { Class, Doc, DocumentQuery, FindOptions, Ref, SortingOrder, WithLookup } from '@hcengineering/core'
   import { Kanban as KanbanUI } from '@hcengineering/kanban'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import type { Kanban, SpaceWithStates, State } from '@hcengineering/task'
@@ -37,7 +37,7 @@
 
   export let _class: Ref<Class<Card>>
   export let space: Ref<SpaceWithStates>
-  export let search: string
+  export let query: DocumentQuery<Card>
   export let options: FindOptions<Card> | undefined
 
   let kanban: Kanban
@@ -95,6 +95,8 @@
 
     showPopup(ContextMenu, { object }, getEventPositionElement(ev))
   }
+
+  $: resultQuery = { ...query, doneState: null, isArchived: { $nin: [true] }, space }
 </script>
 
 <ActionContext
@@ -105,12 +107,10 @@
 <KanbanUI
   bind:this={kanbanUI}
   {_class}
-  {search}
   {options}
-  query={{ doneState: null, isArchived: { $nin: [true] }, space }}
+  query={resultQuery}
   {states}
   fieldName={'state'}
-  rankFieldName={'rank'}
   on:content={(evt) => {
     listProvider.update(evt.detail)
   }}
diff --git a/plugins/board-resources/src/components/TableView.svelte b/plugins/board-resources/src/components/TableView.svelte
index 5e2dffbb87..60ab06b427 100644
--- a/plugins/board-resources/src/components/TableView.svelte
+++ b/plugins/board-resources/src/components/TableView.svelte
@@ -23,7 +23,7 @@
   {_class}
   config={[
     'title',
-    '$lookup.state',
+    'state',
     {
       key: '',
       presenter: tags.component.TagsPresenter,
diff --git a/plugins/calendar-resources/src/components/CalendarView.svelte b/plugins/calendar-resources/src/components/CalendarView.svelte
index 0363286494..07295e43a6 100644
--- a/plugins/calendar-resources/src/components/CalendarView.svelte
+++ b/plugins/calendar-resources/src/components/CalendarView.svelte
@@ -40,7 +40,6 @@
   export let options: FindOptions<Event> | undefined = undefined
   export let baseMenuClass: Ref<Class<Event>> | undefined = undefined
   export let config: (string | BuildModelKey)[]
-  export let search: string = ''
   export let createComponent: AnyComponent | undefined = undefined
 
   const mondayStart = true
@@ -49,10 +48,6 @@
   let currentDate: Date = new Date()
   let selectedDate: Date = new Date()
 
-  let resultQuery: DocumentQuery<Event>
-  $: spaceOpt = space ? { space } : {}
-  $: resultQuery = search === '' ? { ...query, ...spaceOpt } : { ...query, $search: search, ...spaceOpt }
-
   let objects: Event[] = []
 
   const q = createQuery()
@@ -67,7 +62,7 @@
       { sort: { date: SortingOrder.Ascending }, ...options }
     )
   }
-  $: update(_class, resultQuery, options)
+  $: update(_class, query, options)
 
   function areDatesLess (firstDate: Date, secondDate: Date): boolean {
     return (
@@ -256,7 +251,7 @@
             {today}
             {selected}
             {wrongMonth}
-            query={resultQuery}
+            {query}
           />
         </svelte:fragment>
       </YearCalendar>
@@ -276,7 +271,7 @@
             {today}
             {selected}
             {wrongMonth}
-            query={resultQuery}
+            {query}
             on:select={(e) => {
               currentDate = e.detail
               if (areDatesEqual(selectedDate, currentDate)) {
diff --git a/plugins/contact-assets/lang/en.json b/plugins/contact-assets/lang/en.json
index 78857cb726..a872e2eeee 100644
--- a/plugins/contact-assets/lang/en.json
+++ b/plugins/contact-assets/lang/en.json
@@ -72,6 +72,7 @@
     "Birthday": "Birthday",
     "UseImage": "Upload an image",
     "UseGravatar": "Use Gravatar",
-    "UseColor": "Use color"
+    "UseColor": "Use color",
+    "NotSpecified": "Not specified"
   }
 }
\ No newline at end of file
diff --git a/plugins/contact-assets/lang/ru.json b/plugins/contact-assets/lang/ru.json
index 9848e3fd3c..86ff8d8d88 100644
--- a/plugins/contact-assets/lang/ru.json
+++ b/plugins/contact-assets/lang/ru.json
@@ -72,6 +72,7 @@
     "Birthday": "День рождения",
     "UseImage": "Загрузить фото",
     "UseGravatar": "Использовать Gravatar",
-    "UseColor": "Использовать цвет"
+    "UseColor": "Использовать цвет",
+    "NotSpecified": "Не указан"
   }
 }
\ No newline at end of file
diff --git a/plugins/contact-resources/src/components/ContactRefPresenter.svelte b/plugins/contact-resources/src/components/ContactRefPresenter.svelte
new file mode 100644
index 0000000000..6d2469a9e1
--- /dev/null
+++ b/plugins/contact-resources/src/components/ContactRefPresenter.svelte
@@ -0,0 +1,33 @@
+<!--
+// 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">
+  import { Contact } from '@hcengineering/contact'
+  import { Ref } from '@hcengineering/core'
+  import { createQuery } from '@hcengineering/presentation'
+  import contact from '../plugin'
+  import ContactPresenter from './ContactPresenter.svelte'
+
+  export let value: Ref<Contact>
+  export let isInteractive = true
+
+  let doc: Contact | undefined
+  const query = createQuery()
+  $: value && query.query(contact.class.Contact, { _id: value }, (res) => ([doc] = res), { limit: 1 })
+</script>
+
+{#if doc}
+  <ContactPresenter value={doc} {isInteractive} />
+{/if}
diff --git a/plugins/contact-resources/src/components/EmployeePresenter.svelte b/plugins/contact-resources/src/components/EmployeePresenter.svelte
index 117fb87a49..2b92f3ae03 100644
--- a/plugins/contact-resources/src/components/EmployeePresenter.svelte
+++ b/plugins/contact-resources/src/components/EmployeePresenter.svelte
@@ -2,21 +2,14 @@
   import { Employee } from '@hcengineering/contact'
   import { WithLookup } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
-  import type { AnyComponent, AnySvelteComponent } from '@hcengineering/ui'
   import { showPopup } from '@hcengineering/ui'
+  import { PersonLabelTooltip } from '..'
   import PersonPresenter from '../components/PersonPresenter.svelte'
   import EmployeePreviewPopup from './EmployeePreviewPopup.svelte'
   import EmployeeStatusPresenter from './EmployeeStatusPresenter.svelte'
 
   export let value: WithLookup<Employee> | null | undefined
-  export let tooltipLabels:
-    | {
-        personLabel?: IntlString
-        placeholderLabel?: IntlString
-        component?: AnySvelteComponent | AnyComponent
-        props?: any
-      }
-    | undefined = undefined
+  export let tooltipLabels: PersonLabelTooltip | undefined = undefined
   export let shouldShowAvatar: boolean = true
   export let shouldShowName: boolean = true
   export let shouldShowPlaceholder = false
@@ -25,6 +18,7 @@
   export let isInteractive = true
   export let inline = false
   export let disableClick = false
+  export let defaultName: IntlString | undefined = undefined
 
   let container: HTMLElement
 
@@ -48,7 +42,7 @@
   $: handlePersonEdit = onEmployeeEdit ?? onEdit
 </script>
 
-<div bind:this={container} class:over-underline={!inline}>
+<div bind:this={container}>
   <PersonPresenter
     {value}
     {tooltipLabels}
@@ -59,6 +53,7 @@
     {shouldShowPlaceholder}
     {isInteractive}
     {inline}
+    {defaultName}
   />
 </div>
 {#if value?.$lookup?.statuses?.length}
diff --git a/plugins/contact-resources/src/components/EmployeeRefPresenter.svelte b/plugins/contact-resources/src/components/EmployeeRefPresenter.svelte
new file mode 100644
index 0000000000..74b22852a9
--- /dev/null
+++ b/plugins/contact-resources/src/components/EmployeeRefPresenter.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { Employee } from '@hcengineering/contact'
+  import { Ref } from '@hcengineering/core'
+  import { createQuery } from '@hcengineering/presentation'
+  import { ButtonKind } from '@hcengineering/ui'
+  import { PersonLabelTooltip } from '..'
+  import contact from '../plugin'
+  import EmployeePresenter from './EmployeePresenter.svelte'
+
+  export let value: Ref<Employee> | null | undefined
+  export let kind: ButtonKind = 'link'
+  export let tooltipLabels: PersonLabelTooltip | undefined = undefined
+
+  let employee: Employee | undefined
+  const query = createQuery()
+  $: value && query.query(contact.class.Employee, { _id: value }, (res) => ([employee] = res), { limit: 1 })
+
+  function getValue (
+    employee: Employee | undefined,
+    value: Ref<Employee> | null | undefined
+  ): Employee | null | undefined {
+    if (value === undefined || value === null) {
+      return value
+    }
+    return employee
+  }
+</script>
+
+<EmployeePresenter
+  value={getValue(employee, value)}
+  {tooltipLabels}
+  isInteractive={false}
+  shouldShowAvatar
+  shouldShowPlaceholder
+  defaultName={contact.string.NotSpecified}
+  shouldShowName={kind !== 'list'}
+  avatarSize={kind === 'list-header' ? 'small' : 'x-small'}
+  disableClick
+/>
diff --git a/plugins/contact-resources/src/components/PersonPresenter.svelte b/plugins/contact-resources/src/components/PersonPresenter.svelte
index 1596f45f2b..1f2b37b8cd 100644
--- a/plugins/contact-resources/src/components/PersonPresenter.svelte
+++ b/plugins/contact-resources/src/components/PersonPresenter.svelte
@@ -15,8 +15,10 @@
 <script lang="ts">
   import { formatName, Person } from '@hcengineering/contact'
   import { IntlString } from '@hcengineering/platform'
+  import presentation from '@hcengineering/presentation'
+  import { LabelAndProps } from '@hcengineering/ui'
+  import { PersonLabelTooltip } from '..'
   import PersonContent from './PersonContent.svelte'
-  import type { AnyComponent, AnySvelteComponent } from '@hcengineering/ui'
 
   export let value: Person | null | undefined
   export let inline = false
@@ -26,27 +28,40 @@
   export let shouldShowName = true
   export let shouldShowPlaceholder = false
   export let defaultName: IntlString | undefined = undefined
-  export let tooltipLabels:
-    | {
-        personLabel?: IntlString
-        placeholderLabel?: IntlString
-        component?: AnySvelteComponent | AnyComponent
-        props?: any
-      }
-    | undefined = undefined
+  export let tooltipLabels: PersonLabelTooltip | undefined = undefined
   export let avatarSize: 'inline' | 'tiny' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' = 'x-small'
   export let onEdit: ((event: MouseEvent) => void) | undefined = undefined
+
+  function getTooltip (
+    tooltipLabels: PersonLabelTooltip | undefined,
+    value: Person | null | undefined
+  ): LabelAndProps | undefined {
+    if (!tooltipLabels) {
+      return !value
+        ? undefined
+        : {
+            label: presentation.string.InltPropsValue,
+            props: { value: formatName(value.name) }
+          }
+    }
+    const component = value ? tooltipLabels.component : undefined
+    const label = value
+      ? tooltipLabels.personLabel
+        ? tooltipLabels.personLabel
+        : presentation.string.InltPropsValue
+      : undefined
+    const props = tooltipLabels.props ? tooltipLabels.props : value ? { value: formatName(value.name) } : undefined
+    return {
+      component,
+      label,
+      props
+    }
+  }
 </script>
 
 {#if value || shouldShowPlaceholder}
   <PersonContent
-    showTooltip={tooltipLabels
-      ? {
-          label: value ? tooltipLabels.personLabel : undefined,
-          component: value ? tooltipLabels.component : undefined,
-          props: value && tooltipLabels.personLabel ? { value: formatName(value.name) } : tooltipLabels.props
-        }
-      : undefined}
+    showTooltip={getTooltip(tooltipLabels, value)}
     {value}
     {inline}
     {onEdit}
diff --git a/plugins/contact-resources/src/components/PersonRefPresenter.svelte b/plugins/contact-resources/src/components/PersonRefPresenter.svelte
new file mode 100644
index 0000000000..e6d831b038
--- /dev/null
+++ b/plugins/contact-resources/src/components/PersonRefPresenter.svelte
@@ -0,0 +1,59 @@
+<!--
+// Copyright © 2022 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 contact, { Person } from '@hcengineering/contact'
+  import { Ref } from '@hcengineering/core'
+  import { IntlString } from '@hcengineering/platform'
+  import { createQuery } from '@hcengineering/presentation'
+  import { PersonLabelTooltip } from '..'
+  import PersonPresenter from './PersonPresenter.svelte'
+
+  export let value: Ref<Person> | null | undefined
+  export let inline = false
+  export let enlargedText = false
+  export let isInteractive = true
+  export let shouldShowAvatar = true
+  export let shouldShowName = true
+  export let shouldShowPlaceholder = false
+  export let defaultName: IntlString | undefined = undefined
+  export let tooltipLabels: PersonLabelTooltip | undefined = undefined
+  export let avatarSize: 'inline' | 'tiny' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' = 'x-small'
+  export let onEdit: ((event: MouseEvent) => void) | undefined = undefined
+
+  let person: Person | undefined
+  const query = createQuery()
+  $: value && query.query(contact.class.Person, { _id: value }, (res) => ([person] = res), { limit: 1 })
+
+  function getValue (person: Person | undefined, value: Ref<Person> | null | undefined): Person | null | undefined {
+    if (value === undefined || value === null) {
+      return value
+    }
+    return person
+  }
+</script>
+
+<PersonPresenter
+  value={getValue(person, value)}
+  {onEdit}
+  {avatarSize}
+  {tooltipLabels}
+  {defaultName}
+  {shouldShowAvatar}
+  {shouldShowName}
+  {shouldShowPlaceholder}
+  {enlargedText}
+  {isInteractive}
+  {inline}
+/>
diff --git a/plugins/contact-resources/src/index.ts b/plugins/contact-resources/src/index.ts
index e9af7cf6d4..4f705088e6 100644
--- a/plugins/contact-resources/src/index.ts
+++ b/plugins/contact-resources/src/index.ts
@@ -17,9 +17,9 @@
 import { Channel, Contact, Employee, formatName, getGravatarUrl } from '@hcengineering/contact'
 import { Class, Client, DocumentQuery, Ref, RelatedDocument, WithLookup } from '@hcengineering/core'
 import { leaveWorkspace } from '@hcengineering/login-resources'
-import { Resources } from '@hcengineering/platform'
+import { IntlString, Resources } from '@hcengineering/platform'
 import { Avatar, getClient, MessageBox, ObjectSearchResult, UserInfo, getFileUrl } from '@hcengineering/presentation'
-import { showPopup } from '@hcengineering/ui'
+import { AnyComponent, AnySvelteComponent, showPopup } from '@hcengineering/ui'
 import Channels from './components/Channels.svelte'
 import ChannelsDropdown from './components/ChannelsDropdown.svelte'
 import ChannelsEditor from './components/ChannelsEditor.svelte'
@@ -48,7 +48,11 @@ import OrganizationPresenter from './components/OrganizationPresenter.svelte'
 import PersonEditor from './components/PersonEditor.svelte'
 import PersonPresenter from './components/PersonPresenter.svelte'
 import SocialEditor from './components/SocialEditor.svelte'
+import ContactRefPresenter from './components/ContactRefPresenter.svelte'
+import PersonRefPresenter from './components/PersonRefPresenter.svelte'
+import EmployeeRefPresenter from './components/EmployeeRefPresenter.svelte'
 import contact from './plugin'
+import { employeeSort } from './utils'
 
 export {
   Channels,
@@ -117,6 +121,13 @@ async function openChannelURL (doc: Channel): Promise<void> {
   }
 }
 
+export interface PersonLabelTooltip {
+  personLabel?: IntlString
+  placeholderLabel?: IntlString
+  component?: AnySvelteComponent | AnyComponent
+  props?: any
+}
+
 export default async (): Promise<Resources> => ({
   actionImpl: {
     KickEmployee: kickEmployee,
@@ -126,6 +137,8 @@ export default async (): Promise<Resources> => ({
     PersonEditor,
     OrganizationEditor,
     ContactPresenter,
+    ContactRefPresenter,
+    PersonRefPresenter,
     PersonPresenter,
     OrganizationPresenter,
     ChannelsPresenter,
@@ -139,6 +152,7 @@ export default async (): Promise<Resources> => ({
     Contacts,
     EmployeeAccountPresenter,
     EmployeePresenter,
+    EmployeeRefPresenter,
     Members,
     MemberPresenter,
     EditMember,
@@ -164,6 +178,7 @@ export default async (): Promise<Resources> => ({
   function: {
     GetFileUrl: getFileUrl,
     GetGravatarUrl: getGravatarUrl,
-    GetColorUrl: (uri: string) => uri
+    GetColorUrl: (uri: string) => uri,
+    EmployeeSort: employeeSort
   }
 })
diff --git a/plugins/contact-resources/src/plugin.ts b/plugins/contact-resources/src/plugin.ts
index 626203795b..0315607ec5 100644
--- a/plugins/contact-resources/src/plugin.ts
+++ b/plugins/contact-resources/src/plugin.ts
@@ -16,6 +16,7 @@
 
 import contact, { contactId } from '@hcengineering/contact'
 import { IntlString, mergeIds } from '@hcengineering/platform'
+import { SortFunc } from '@hcengineering/view'
 
 export default mergeIds(contactId, contact, {
   string: {
@@ -61,6 +62,10 @@ export default mergeIds(contactId, contact, {
     KickEmployeeDescr: '' as IntlString,
     Email: '' as IntlString,
     CreateEmployee: '' as IntlString,
-    Inactive: '' as IntlString
+    Inactive: '' as IntlString,
+    NotSpecified: '' as IntlString
+  },
+  function: {
+    EmployeeSort: '' as SortFunc
   }
 })
diff --git a/plugins/contact-resources/src/utils.ts b/plugins/contact-resources/src/utils.ts
index a85f4ccbc9..8645e62e32 100644
--- a/plugins/contact-resources/src/utils.ts
+++ b/plugins/contact-resources/src/utils.ts
@@ -14,9 +14,9 @@
 // limitations under the License.
 //
 
-import contact, { ChannelProvider } from '@hcengineering/contact'
+import contact, { ChannelProvider, Employee, formatName } from '@hcengineering/contact'
 import { Ref, Timestamp } from '@hcengineering/core'
-import { getClient } from '@hcengineering/presentation'
+import { createQuery, getClient } from '@hcengineering/presentation'
 
 const client = getClient()
 const channelProviders = client.findAll(contact.class.ChannelProvider, {})
@@ -38,3 +38,35 @@ export function formatDate (dueDateMs: Timestamp): string {
     minute: '2-digit'
   })
 }
+
+export async function employeeSort (value: Array<Ref<Employee>>): Promise<Array<Ref<Employee>>> {
+  return await new Promise((resolve) => {
+    const query = createQuery(true)
+    query.query(contact.class.Employee, { _id: { $in: value } }, (res) => {
+      const employees = new Map(res.map((x) => [x._id, x]))
+      value.sort((a, b) => {
+        const employeeId1 = a as Ref<Employee> | null | undefined
+        const employeeId2 = b as Ref<Employee> | null | undefined
+
+        if (employeeId1 == null && employeeId2 != null) {
+          return 1
+        }
+
+        if (employeeId1 != null && employeeId2 == null) {
+          return -1
+        }
+
+        if (employeeId1 != null && employeeId2 != null) {
+          const name1 = formatName(employees.get(employeeId1)?.name ?? '')
+          const name2 = formatName(employees.get(employeeId2)?.name ?? '')
+
+          return name1.localeCompare(name2)
+        }
+
+        return 0
+      })
+      resolve(value)
+      query.unsubscribe()
+    })
+  })
+}
diff --git a/plugins/inventory-resources/src/components/CategoryRefPresenter.svelte b/plugins/inventory-resources/src/components/CategoryRefPresenter.svelte
new file mode 100644
index 0000000000..8a890f7bb2
--- /dev/null
+++ b/plugins/inventory-resources/src/components/CategoryRefPresenter.svelte
@@ -0,0 +1,33 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021, 2022 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 { Ref } from '@hcengineering/core'
+  import inventory, { Category } from '@hcengineering/inventory'
+  import { createQuery } from '@hcengineering/presentation'
+  import CategoryPresenter from './CategoryPresenter.svelte'
+
+  export let value: Ref<Category>
+  export let inline: boolean = false
+
+  let category: Category | undefined
+
+  const query = createQuery()
+  $: query.query(inventory.class.Category, { _id: value }, (res) => ([category] = res), { limit: 1 })
+</script>
+
+{#if category}
+  <CategoryPresenter {inline} value={category} />
+{/if}
diff --git a/plugins/inventory-resources/src/index.ts b/plugins/inventory-resources/src/index.ts
index 5a4eaa0795..0b42013626 100644
--- a/plugins/inventory-resources/src/index.ts
+++ b/plugins/inventory-resources/src/index.ts
@@ -19,6 +19,7 @@ import { Resources } from '@hcengineering/platform'
 import { showPopup } from '@hcengineering/ui'
 import Categories from './components/Categories.svelte'
 import CategoryPresenter from './components/CategoryPresenter.svelte'
+import CategoryRefPresenter from './components/CategoryRefPresenter.svelte'
 import CreateCategory from './components/CreateCategory.svelte'
 import EditProduct from './components/EditProduct.svelte'
 import ProductPresenter from './components/ProductPresenter.svelte'
@@ -37,6 +38,7 @@ export default async (): Promise<Resources> => ({
   component: {
     Categories,
     CategoryPresenter,
+    CategoryRefPresenter,
     ProductPresenter,
     EditProduct,
     Variants,
diff --git a/plugins/lead-assets/lang/en.json b/plugins/lead-assets/lang/en.json
index 4e88c24c17..2066b53837 100644
--- a/plugins/lead-assets/lang/en.json
+++ b/plugins/lead-assets/lang/en.json
@@ -30,6 +30,7 @@
     "Description": "Description",
     "FullDescription": "Full description",
     "FunnelPlaceholder": "The simple funnel",
-    "Members": "Members"
+    "Members": "Members",
+    "UnAssign": "Unassign"
   }
 }
\ No newline at end of file
diff --git a/plugins/lead-assets/lang/ru.json b/plugins/lead-assets/lang/ru.json
index cb2a8cd3d4..a360fa5f5d 100644
--- a/plugins/lead-assets/lang/ru.json
+++ b/plugins/lead-assets/lang/ru.json
@@ -17,7 +17,7 @@
     "Leads": "Сделки",
     "SelectCustomer": "Выбрать клиента",
     "Lead": "Сделка",
-    "Assignee": "Назначена",
+    "Assignee": "Исполнитель",
     "Title": "Загаловок",
     "LeadPlaceholder": "Простая сделка",
     "ManageFunnelStatuses": "Управление статусами воронки",
@@ -30,6 +30,7 @@
     "Description": "Описание",
     "FullDescription": "Детальное описание",
     "FunnelPlaceholder": "Простая воронка",
-    "Members": "Пользователи"
+    "Members": "Пользователи",
+    "UnAssign": "Отменить назначение"
   }
 }
\ No newline at end of file
diff --git a/plugins/lead-resources/src/components/CreateLead.svelte b/plugins/lead-resources/src/components/CreateLead.svelte
index b736e5405e..10247aab73 100644
--- a/plugins/lead-resources/src/components/CreateLead.svelte
+++ b/plugins/lead-resources/src/components/CreateLead.svelte
@@ -14,11 +14,11 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import contact, { Contact } from '@hcengineering/contact'
+  import contact, { Contact, Employee } from '@hcengineering/contact'
   import { AttachedData, generateId, Ref, SortingOrder, Space } from '@hcengineering/core'
-  import type { Customer, Lead } from '@hcengineering/lead'
+  import type { Customer, Funnel, Lead } from '@hcengineering/lead'
   import { OK, Status } from '@hcengineering/platform'
-  import { Card, getClient, SpaceSelector, UserBox } from '@hcengineering/presentation'
+  import { Card, createQuery, EmployeeBox, getClient, SpaceSelector, UserBox } from '@hcengineering/presentation'
   import task, { calcRank } from '@hcengineering/task'
   import { createFocusManager, EditBox, FocusHandler, Label, Status as StatusControl, Button } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
@@ -41,14 +41,20 @@
     return (preserveCustomer || customer === undefined) && title === ''
   }
 
-  $: client.findAll(lead.class.Funnel, {}).then((r) => {
-    if (r.find((it) => it._id === _space) === undefined) {
-      _space = r.shift()?._id as Ref<Space>
+  let funnels: Funnel[] = []
+  const funnelQuery = createQuery()
+  funnelQuery.query(lead.class.Funnel, {}, (res) => (funnels = res))
+
+  $: {
+    if (funnels.find((it) => it._id === _space) === undefined) {
+      _space = funnels[0]?._id
     }
-  })
+  }
+
+  let assignee: Ref<Employee> | undefined = undefined
 
   async function createLead () {
-    const state = await client.findOne(task.class.State, { space: _space })
+    const state = await client.findOne(task.class.State, { space: _space }, { sort: { rank: SortingOrder.Ascending } })
     if (state === undefined) {
       throw new Error('create application: state not found')
     }
@@ -145,6 +151,13 @@
   </div>
 
   <svelte:fragment slot="pool">
+    <EmployeeBox
+      focusIndex={2}
+      label={lead.string.Assignee}
+      bind:value={assignee}
+      allowDeselect
+      titleDeselect={lead.string.UnAssign}
+    />
     {#if !preserveCustomer}
       <UserBox
         focusIndex={2}
diff --git a/plugins/lead-resources/src/components/Leads.svelte b/plugins/lead-resources/src/components/Leads.svelte
index f0b844e0f0..54826b27a9 100644
--- a/plugins/lead-resources/src/components/Leads.svelte
+++ b/plugins/lead-resources/src/components/Leads.svelte
@@ -42,7 +42,7 @@
       <Scroller horizontal>
         <Table
           _class={lead.class.Lead}
-          config={['', '$lookup.state', '$lookup.doneState']}
+          config={['', 'state', 'doneState']}
           query={{ attachedTo: objectId }}
           {loadingProps}
         />
@@ -50,7 +50,7 @@
     {:else}
       <Table
         _class={lead.class.Lead}
-        config={['', '$lookup.state', '$lookup.doneState']}
+        config={['', 'state', 'doneState']}
         query={{ attachedTo: objectId }}
         {loadingProps}
       />
diff --git a/plugins/lead-resources/src/components/LeadsPopup.svelte b/plugins/lead-resources/src/components/LeadsPopup.svelte
index 402f19aff2..bd4098d70e 100644
--- a/plugins/lead-resources/src/components/LeadsPopup.svelte
+++ b/plugins/lead-resources/src/components/LeadsPopup.svelte
@@ -21,8 +21,4 @@
   export let value: Customer
 </script>
 
-<Table
-  _class={leads.class.Lead}
-  config={['', '$lookup.state', '$lookup.doneState']}
-  query={{ attachedTo: value._id }}
-/>
+<Table _class={leads.class.Lead} config={['', 'state', 'doneState']} query={{ attachedTo: value._id }} />
diff --git a/plugins/lead-resources/src/plugin.ts b/plugins/lead-resources/src/plugin.ts
index 7f0de9b44a..45c802d638 100644
--- a/plugins/lead-resources/src/plugin.ts
+++ b/plugins/lead-resources/src/plugin.ts
@@ -41,7 +41,9 @@ export default mergeIds(leadId, lead, {
     Description: '' as IntlString,
     FullDescription: '' as IntlString,
     FunnelPlaceholder: '' as IntlString,
-    Members: '' as IntlString
+    Members: '' as IntlString,
+    Assignee: '' as IntlString,
+    UnAssign: '' as IntlString
   },
   component: {
     CreateCustomer: '' as AnyComponent,
diff --git a/plugins/recruit-resources/src/components/Applications.svelte b/plugins/recruit-resources/src/components/Applications.svelte
index 6a9addde42..9cbbd56031 100644
--- a/plugins/recruit-resources/src/components/Applications.svelte
+++ b/plugins/recruit-resources/src/components/Applications.svelte
@@ -35,8 +35,8 @@
     '',
     '$lookup.space.name',
     '$lookup.space.$lookup.company',
-    '$lookup.state',
-    '$lookup.doneState'
+    'state',
+    'doneState'
   ]
   let wSection: number
 </script>
diff --git a/plugins/recruit-resources/src/components/ApplicationsPopup.svelte b/plugins/recruit-resources/src/components/ApplicationsPopup.svelte
index d1f7fc8f51..ba06b5ec80 100644
--- a/plugins/recruit-resources/src/components/ApplicationsPopup.svelte
+++ b/plugins/recruit-resources/src/components/ApplicationsPopup.svelte
@@ -23,7 +23,7 @@
 
 <Table
   _class={recruit.class.Applicant}
-  config={['', '$lookup.space.name', '$lookup.state', '$lookup.doneState']}
+  config={['', '$lookup.space.name', 'state', 'doneState']}
   query={{ attachedTo: value._id }}
   loadingProps={{ length: value.applications ?? 0 }}
 />
diff --git a/plugins/recruit-resources/src/components/VacancyApplicationsPopup.svelte b/plugins/recruit-resources/src/components/VacancyApplicationsPopup.svelte
index 44aa7471d5..2c23eda46b 100644
--- a/plugins/recruit-resources/src/components/VacancyApplicationsPopup.svelte
+++ b/plugins/recruit-resources/src/components/VacancyApplicationsPopup.svelte
@@ -35,7 +35,7 @@
 <div class="popup-table">
   <Table
     _class={recruit.class.Applicant}
-    config={['', '$lookup.attachedTo', '$lookup.state', '$lookup.doneState', 'modifiedOn']}
+    config={['', 'attachedTo', 'state', 'doneState', 'modifiedOn']}
     {options}
     query={{ ...(resultQuery ?? {}), space: value }}
     loadingProps={{ length: 0 }}
diff --git a/plugins/task-resources/src/components/AssignedTasks.svelte b/plugins/task-resources/src/components/AssignedTasks.svelte
index 167c2e6ef3..9f2b9a5dd9 100644
--- a/plugins/task-resources/src/components/AssignedTasks.svelte
+++ b/plugins/task-resources/src/components/AssignedTasks.svelte
@@ -88,16 +88,7 @@
 
 <TableBrowser
   {_class}
-  config={[
-    '',
-    '$lookup.attachedTo',
-    '$lookup.assignee',
-    '$lookup.state',
-    '$lookup.doneState',
-    'attachments',
-    'comments',
-    'modifiedOn'
-  ]}
+  config={['', 'attachedTo', 'assignee', 'state', 'doneState', 'attachments', 'comments', 'modifiedOn']}
   query={resultQuery}
   showNotification
 />
diff --git a/plugins/task-resources/src/components/Dashboard.svelte b/plugins/task-resources/src/components/Dashboard.svelte
index bcf9b71d7d..74a68d62ac 100644
--- a/plugins/task-resources/src/components/Dashboard.svelte
+++ b/plugins/task-resources/src/components/Dashboard.svelte
@@ -18,11 +18,11 @@
   import type { DoneState, SpaceWithStates, State, Task } from '@hcengineering/task'
   import task from '@hcengineering/task'
   import { BarDashboard, DashboardItem } from '@hcengineering/ui'
-  import { FilterBar } from '@hcengineering/view-resources'
   import CreateFilter from './CreateFilter.svelte'
 
   export let _class: Ref<Class<Task>>
   export let space: Ref<SpaceWithStates>
+  export let query: DocumentQuery<Task>
 
   const client = getClient()
   const hieararchy = client.getHierarchy()
@@ -85,15 +85,12 @@
 
   const docQuery = createQuery()
 
-  $: query = modified
+  $: resultQuery = modified
     ? {
-        space,
-        _id: { $in: ids }
+        _id: { $in: ids },
+        ...query
       }
-    : { space }
-  let resultQuery = {
-    space
-  }
+    : query
 
   function updateDocs (_class: Ref<Class<Task>>, states: State[], query: DocumentQuery<Task>): void {
     if (states.length === 0) {
@@ -146,7 +143,6 @@
 </script>
 
 <CreateFilter bind:value={modified} />
-<FilterBar {_class} {query} on:change={(e) => (resultQuery = e.detail)} />
 
 <div class="ml-10 mt-4">
   <BarDashboard {items} />
diff --git a/plugins/task-resources/src/components/StatusTableView.svelte b/plugins/task-resources/src/components/StatusTableView.svelte
index 9d7e2a8e4d..90ac588ce6 100644
--- a/plugins/task-resources/src/components/StatusTableView.svelte
+++ b/plugins/task-resources/src/components/StatusTableView.svelte
@@ -15,7 +15,7 @@
 -->
 <script lang="ts">
   import { Class, DocumentQuery, FindOptions, Ref, SortingOrder } from '@hcengineering/core'
-  import { createQuery } from '@hcengineering/presentation'
+  import { createQuery, getClient } from '@hcengineering/presentation'
   import { DoneState, SpaceWithStates, State, Task } from '@hcengineering/task'
   import { TabList } from '@hcengineering/ui'
   import type { TabItem } from '@hcengineering/ui'
@@ -27,26 +27,26 @@
 
   export let _class: Ref<Class<Task>>
   export let space: Ref<SpaceWithStates>
+  export let query: DocumentQuery<Task>
   export let options: FindOptions<Task> | undefined
   export let config: string[]
-  export let search: string
 
   let doneStatusesView: boolean = false
   let state: Ref<State> | undefined = undefined
   const selectedDoneStates: Set<Ref<DoneState>> = new Set<Ref<DoneState>>()
   $: resConfig = updateConfig(config)
-  let query = {}
   let doneStates: DoneState[] = []
   let itemsDS: TabItem[] = []
   let selectedDS: string[] = []
   let withoutDone: boolean = false
+  let resultQuery: DocumentQuery<Task>
 
   function updateConfig (config: string[]): string[] {
     if (state !== undefined) {
-      return config.filter((p) => p !== '$lookup.state')
+      return config.filter((p) => p !== 'state')
     }
     if (selectedDoneStates.size === 1) {
-      return config.filter((p) => p !== '$lookup.doneState')
+      return config.filter((p) => p !== 'doneState')
     }
     return config
   }
@@ -77,12 +77,11 @@
     }
   )
 
-  async function updateQuery (search: string, selectedDoneStates: Set<Ref<DoneState>>): Promise<void> {
+  const client = getClient()
+
+  async function updateQuery (query: DocumentQuery<Task>, selectedDoneStates: Set<Ref<DoneState>>): Promise<void> {
     resConfig = updateConfig(config)
-    const result = {} as DocumentQuery<Task>
-    if (search !== '') {
-      result.$search = search
-    }
+    const result = client.getHierarchy().clone(query)
     result.space = space
     if (state) {
       result.state = state
@@ -94,7 +93,7 @@
     } else if (withoutDone) {
       result.doneState = null
     }
-    query = result
+    resultQuery = result
   }
 
   function doneStateClick (id: Ref<DoneState>): void {
@@ -108,17 +107,17 @@
       selectedDS = ['NoDoneState']
       withoutDone = true
     }
-    updateQuery(search, selectedDoneStates)
+    updateQuery(query, selectedDoneStates)
   }
 
   function noDoneClick (): void {
     withoutDone = true
     selectedDS = ['NoDoneState']
     selectedDoneStates.clear()
-    updateQuery(search, selectedDoneStates)
+    updateQuery(query, selectedDoneStates)
   }
 
-  $: updateQuery(search, selectedDoneStates)
+  $: updateQuery(query, selectedDoneStates)
   const handleSelect = (result: any) => {
     if (result.type === 'select') {
       const res = result.detail
@@ -127,12 +126,12 @@
         state = undefined
         withoutDone = false
         selectedDoneStates.clear()
-        updateQuery(search, selectedDoneStates)
+        updateQuery(query, selectedDoneStates)
       } else if (res.id === 'DoneStates') {
         doneStatusesView = true
         state = undefined
         selectedDoneStates.clear()
-        updateQuery(search, selectedDoneStates)
+        updateQuery(query, selectedDoneStates)
       }
     }
   }
@@ -158,11 +157,11 @@
   {#if doneStatusesView}
     <TabList items={itemsDS} bind:selected={selectedDS} multiselect on:select={handleDoneSelect} size={'small'} />
   {:else}
-    <StatesBar bind:state {space} gap={'none'} on:change={() => updateQuery(search, selectedDoneStates)} />
+    <StatesBar bind:state {space} gap={'none'} on:change={() => updateQuery(query, selectedDoneStates)} />
   {/if}
 </div>
 <div class="statustableview-container">
-  <TableBrowser {_class} bind:query config={resConfig} {options} showNotification />
+  <TableBrowser {_class} bind:query={resultQuery} config={resConfig} {options} showNotification />
 </div>
 
 <style lang="scss">
diff --git a/plugins/task-resources/src/components/kanban/KanbanView.svelte b/plugins/task-resources/src/components/kanban/KanbanView.svelte
index ce5cda8523..13a0a2d330 100644
--- a/plugins/task-resources/src/components/kanban/KanbanView.svelte
+++ b/plugins/task-resources/src/components/kanban/KanbanView.svelte
@@ -14,7 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Class, Doc, FindOptions, Ref, SortingOrder } from '@hcengineering/core'
+  import { Class, Doc, DocumentQuery, FindOptions, Ref, SortingOrder } from '@hcengineering/core'
   import { Kanban as KanbanUI } from '@hcengineering/kanban'
   import { getResource } from '@hcengineering/platform'
   import { createQuery, getClient } from '@hcengineering/presentation'
@@ -23,7 +23,6 @@
   import { getEventPositionElement, showPopup } from '@hcengineering/ui'
   import {
     ActionContext,
-    FilterBar,
     focusStore,
     ListSelectionProvider,
     SelectDirection,
@@ -35,8 +34,7 @@
 
   export let _class: Ref<Class<Task>>
   export let space: Ref<SpaceWithStates>
-  // export let open: AnyComponent
-  export let search: string
+  export let query: DocumentQuery<Task>
   export let options: FindOptions<Task> | undefined
   export let baseMenuClass: Ref<Class<Doc>> | undefined = undefined
   // export let config: string[]
@@ -96,7 +94,8 @@
     listProvider.updateSelection(evt.detail.docs, evt.detail.value)
   }
   const onContextMenu = (evt: any) => showMenu(evt.detail.evt, evt.detail.objects)
-  let resultQuery = { doneState: null, space }
+
+  $: resultQuery = { ...query, doneState: null }
 </script>
 
 {#await cardPresenter then presenter}
@@ -105,22 +104,13 @@
       mode: 'browser'
     }}
   />
-  <FilterBar
-    {_class}
-    query={{ doneState: null, space }}
-    on:change={(e) => {
-      resultQuery = e.detail
-    }}
-  />
   <KanbanUI
     bind:this={kanbanUI}
     {_class}
-    {search}
     {options}
     query={resultQuery}
     {states}
     fieldName={'state'}
-    rankFieldName={'rank'}
     on:content={onContent}
     on:obj-focus={onObjFocus}
     checked={$selectionStore ?? []}
diff --git a/plugins/task-resources/src/components/state/DoneStateRefPresenter.svelte b/plugins/task-resources/src/components/state/DoneStateRefPresenter.svelte
new file mode 100644
index 0000000000..c3bd043308
--- /dev/null
+++ b/plugins/task-resources/src/components/state/DoneStateRefPresenter.svelte
@@ -0,0 +1,33 @@
+<!--
+// 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">
+  import { Ref } from '@hcengineering/core'
+  import { createQuery } from '@hcengineering/presentation'
+  import type { DoneState } from '@hcengineering/task'
+  import task from '@hcengineering/task'
+  import DoneStatePresenter from './DoneStatePresenter.svelte'
+
+  export let value: Ref<DoneState>
+  export let showTitle: boolean = true
+
+  let state: DoneState | undefined
+  const query = createQuery()
+  $: query.query(task.class.DoneState, { _id: value }, (res) => ([state] = res), { limit: 1 })
+</script>
+
+{#if state}
+  <DoneStatePresenter value={state} {showTitle} />
+{/if}
diff --git a/plugins/task-resources/src/components/state/StateRefPresenter.svelte b/plugins/task-resources/src/components/state/StateRefPresenter.svelte
new file mode 100644
index 0000000000..1f87f9d577
--- /dev/null
+++ b/plugins/task-resources/src/components/state/StateRefPresenter.svelte
@@ -0,0 +1,31 @@
+<!--
+// 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">
+  import { Ref } from '@hcengineering/core'
+  import { createQuery } from '@hcengineering/presentation'
+  import task, { State } from '@hcengineering/task'
+  import StatePresenter from './StatePresenter.svelte'
+
+  export let value: Ref<State>
+
+  let state: State | undefined
+  const query = createQuery()
+  $: query.query(task.class.State, { _id: value }, (res) => ([state] = res), { limit: 1 })
+</script>
+
+{#if state}
+  <StatePresenter value={state} />
+{/if}
diff --git a/plugins/task-resources/src/index.ts b/plugins/task-resources/src/index.ts
index 53176fdc5d..e77a0c1086 100644
--- a/plugins/task-resources/src/index.ts
+++ b/plugins/task-resources/src/index.ts
@@ -39,6 +39,8 @@ import TodoItemsPopup from './components/todos/TodoItemsPopup.svelte'
 import Todos from './components/todos/Todos.svelte'
 import TodoStatePresenter from './components/todos/TodoStatePresenter.svelte'
 import Dashboard from './components/Dashboard.svelte'
+import DoneStateRefPresenter from './components/state/DoneStateRefPresenter.svelte'
+import StateRefPresenter from './components/state/StateRefPresenter.svelte'
 
 export { default as AssigneePresenter } from './components/AssigneePresenter.svelte'
 
@@ -70,6 +72,8 @@ export default async (): Promise<Resources> => ({
     KanbanTemplateEditor,
     KanbanTemplateSelector,
     AssignedTasks,
+    DoneStateRefPresenter,
+    StateRefPresenter,
     TodoItemsPopup
   },
   actionImpl: {
diff --git a/plugins/tracker-resources/src/components/issues/Active.svelte b/plugins/tracker-resources/src/components/issues/Active.svelte
index ffd3add93f..fc78389d5f 100644
--- a/plugins/tracker-resources/src/components/issues/Active.svelte
+++ b/plugins/tracker-resources/src/components/issues/Active.svelte
@@ -35,4 +35,4 @@
   )
 </script>
 
-<IssuesView {query} title={tracker.string.ActiveIssues} />
+<IssuesView {query} space={currentSpace} title={tracker.string.ActiveIssues} />
diff --git a/plugins/tracker-resources/src/components/issues/AssigneePresenter.svelte b/plugins/tracker-resources/src/components/issues/AssigneePresenter.svelte
index 0692d0960f..f78fdd186c 100644
--- a/plugins/tracker-resources/src/components/issues/AssigneePresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/AssigneePresenter.svelte
@@ -15,17 +15,16 @@
 <script lang="ts">
   import contact, { Employee } from '@hcengineering/contact'
   import { Class, Doc, Ref } from '@hcengineering/core'
-  import { Issue, IssueTemplate } from '@hcengineering/tracker'
-  import { UsersPopup, getClient } from '@hcengineering/presentation'
-  import { AttributeModel } from '@hcengineering/view'
-  import { eventToHTMLElement, showPopup } from '@hcengineering/ui'
-  import { getObjectPresenter } from '@hcengineering/view-resources'
   import { IntlString } from '@hcengineering/platform'
+  import { getClient, UsersPopup } from '@hcengineering/presentation'
+  import { Issue, IssueTemplate } from '@hcengineering/tracker'
+  import { eventToHTMLElement, showPopup } from '@hcengineering/ui'
+  import { AttributeModel } from '@hcengineering/view'
+  import { getObjectPresenter } from '@hcengineering/view-resources'
   import tracker from '../../plugin'
 
   export let value: Employee | null | undefined
-  export let issueId: Ref<Issue>
-  export let issueClass: Ref<Class<Issue | IssueTemplate>> = tracker.class.Issue
+  export let object: Issue | IssueTemplate
   export let defaultClass: Ref<Class<Doc>> | undefined = undefined
   export let isEditable: boolean = true
   export let shouldShowLabel: boolean = false
@@ -52,15 +51,9 @@
       return
     }
 
-    const currentIssue = await client.findOne(issueClass, { _id: issueId })
-
-    if (currentIssue === undefined) {
-      return
-    }
-
     const newAssignee = result === null ? null : result._id
 
-    await client.update(currentIssue, { assignee: newAssignee })
+    await client.update(object, { assignee: newAssignee })
   }
 
   const handleAssigneeEditorOpened = async (event: MouseEvent) => {
diff --git a/plugins/tracker-resources/src/components/issues/Backlog.svelte b/plugins/tracker-resources/src/components/issues/Backlog.svelte
index f234c32a53..1686af05cf 100644
--- a/plugins/tracker-resources/src/components/issues/Backlog.svelte
+++ b/plugins/tracker-resources/src/components/issues/Backlog.svelte
@@ -32,4 +32,4 @@
   )
 </script>
 
-<IssuesView {query} title={tracker.string.BacklogIssues} />
+<IssuesView {query} space={currentSpace} title={tracker.string.BacklogIssues} />
diff --git a/plugins/tracker-resources/src/components/issues/Issues.svelte b/plugins/tracker-resources/src/components/issues/Issues.svelte
index 3fb24a33e6..e3cf25c876 100644
--- a/plugins/tracker-resources/src/components/issues/Issues.svelte
+++ b/plugins/tracker-resources/src/components/issues/Issues.svelte
@@ -23,4 +23,4 @@
   $: query = { space: currentSpace }
 </script>
 
-<IssuesView {query} title={tracker.string.AllIssues} />
+<IssuesView {query} space={currentSpace} title={tracker.string.AllIssues} />
diff --git a/plugins/tracker-resources/src/components/issues/IssuesContent.svelte b/plugins/tracker-resources/src/components/issues/IssuesContent.svelte
index 7aef539589..86790a7ad4 100644
--- a/plugins/tracker-resources/src/components/issues/IssuesContent.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuesContent.svelte
@@ -1,23 +1,32 @@
 <script lang="ts">
-  import { DocumentQuery, WithLookup } from '@hcengineering/core'
+  import { DocumentQuery, Ref, Space, WithLookup } from '@hcengineering/core'
+  import { Issue } from '@hcengineering/tracker'
   import { Component } from '@hcengineering/ui'
   import { Viewlet } from '@hcengineering/view'
-  import { Issue } from '@hcengineering/tracker'
-  import { viewOptionsStore } from '@hcengineering/view-resources'
+  import tracker from '../../plugin'
+  import CreateIssue from '../CreateIssue.svelte'
 
   export let viewlet: WithLookup<Viewlet>
   export let query: DocumentQuery<Issue> = {}
+  export let space: Ref<Space> | undefined
+
+  const createItemDialog = CreateIssue
+  const createItemLabel = tracker.string.AddIssueTooltip
 </script>
 
 {#if viewlet?.$lookup?.descriptor?.component}
   <Component
     is={viewlet.$lookup.descriptor.component}
     props={{
+      _class: tracker.class.Issue,
       config: viewlet.config,
       options: viewlet.options,
+      createItemDialog,
+      createItemLabel,
       viewlet,
-      query,
-      viewOptions: $viewOptionsStore
+      viewOptions: viewlet.viewOptions?.other,
+      space,
+      query
     }}
   />
 {/if}
diff --git a/plugins/tracker-resources/src/components/issues/IssuesList.svelte b/plugins/tracker-resources/src/components/issues/IssuesList.svelte
deleted file mode 100644
index c902d2f4d3..0000000000
--- a/plugins/tracker-resources/src/components/issues/IssuesList.svelte
+++ /dev/null
@@ -1,355 +0,0 @@
-<!--
-// Copyright © 2022 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 contact, { Employee } from '@hcengineering/contact'
-  import { Class, Doc, FindOptions, Ref, WithLookup } from '@hcengineering/core'
-  import { createQuery, getClient } from '@hcengineering/presentation'
-  import { Issue, IssueStatus, Team } from '@hcengineering/tracker'
-  import ui, {
-    ActionIcon,
-    Button,
-    CheckBox,
-    Component,
-    eventToHTMLElement,
-    ExpandCollapse,
-    getEventPositionElement,
-    IconAdd,
-    IconMoreH,
-    Label,
-    showPopup,
-    Spinner
-  } from '@hcengineering/ui'
-  import { AttributeModel, BuildModelKey } from '@hcengineering/view'
-  import {
-    buildModel,
-    filterStore,
-    FixedColumn,
-    getObjectPresenter,
-    LoadingProps,
-    Menu
-  } from '@hcengineering/view-resources'
-  import { onDestroy } from 'svelte'
-  import { createEventDispatcher } from 'svelte'
-  import tracker from '../../plugin'
-  import { IssuesGroupByKeys, issuesGroupEditorMap, IssuesOrderByKeys, issuesSortOrderMap } from '../../utils'
-  import CreateIssue from '../CreateIssue.svelte'
-  import IssueStatistics from '../sprints/IssueStatistics.svelte'
-  import IssuesListItem from './IssuesListItem.svelte'
-
-  export let _class: Ref<Class<Doc>>
-  export let currentSpace: Ref<Team> | undefined = undefined
-  export let groupByKey: IssuesGroupByKeys | undefined = undefined
-  export let orderBy: IssuesOrderByKeys
-  export let statuses: WithLookup<IssueStatus>[]
-  export let employees: (WithLookup<Employee> | undefined)[] = []
-  export let categories: any[] = []
-  export let baseMenuClass: Ref<Class<Doc>> | undefined = undefined
-  export let itemsConfig: (BuildModelKey | string)[]
-  export let selectedObjectIds: Doc[] = []
-  export let selectedRowIndex: number | undefined = undefined
-  export let groupedIssues: { [key: string | number | symbol]: Issue[] } = {}
-  export let loadingProps: LoadingProps | undefined = undefined
-
-  const dispatch = createEventDispatcher()
-
-  const client = getClient()
-  const objectRefs: HTMLElement[] = []
-  const baseOptions: FindOptions<Issue> = {
-    lookup: {
-      assignee: contact.class.Employee,
-      status: tracker.class.IssueStatus,
-      space: tracker.class.Team,
-      _id: {
-        subIssues: tracker.class.Issue
-      }
-    }
-  }
-  const categoryLimit: Record<any, number> = {}
-  const spaceQuery = createQuery()
-  const defaultLimit = 20
-  const autoFoldLimit = 20
-  const singleCategoryLimit = 200
-  const noCategory = '#no_category'
-
-  let currentTeam: Team | undefined
-  let personPresenter: AttributeModel
-  let isCollapsedMap: Record<any, boolean> = {}
-  let itemModels: AttributeModel[]
-  let isFilterUpdate = false
-  let groupedIssuesBeforeFilter = groupedIssues
-
-  const handleMenuOpened = async (event: MouseEvent, object: Doc, rowIndex: number) => {
-    event.preventDefault()
-    selectedRowIndex = rowIndex
-
-    if (!selectedObjectIdsSet.has(object._id)) {
-      onObjectChecked(combinedGroupedIssues, false)
-
-      selectedObjectIds = []
-    }
-
-    const items = selectedObjectIds.length > 0 ? selectedObjectIds : object
-
-    showPopup(Menu, { object: items, baseMenuClass }, getEventPositionElement(event), () => {
-      selectedRowIndex = undefined
-    })
-  }
-
-  export const onObjectChecked = (docs: Doc[], value: boolean) => {
-    dispatch('check', { docs, value })
-  }
-
-  const handleRowFocused = (object: Doc) => {
-    dispatch('row-focus', object)
-  }
-
-  const handleNewIssueAdded = (event: MouseEvent, category: any) => {
-    if (!currentSpace) {
-      return
-    }
-
-    showPopup(
-      CreateIssue,
-      { space: currentSpace, ...(groupByKey ? { [groupByKey]: category } : {}) },
-      eventToHTMLElement(event)
-    )
-  }
-
-  function toCat (category: any): any {
-    return 'cat-' + (category ?? noCategory)
-  }
-
-  const handleCollapseCategory = (category: any) => {
-    isCollapsedMap[category] = !isCollapsedMap[category]
-  }
-
-  const getLoadingElementsLength = (props: LoadingProps, options?: FindOptions<Doc>) => {
-    if (options?.limit && options?.limit > 0) {
-      return Math.min(options.limit, props.length)
-    }
-
-    return props.length
-  }
-
-  function limitGroup (
-    category: any,
-    groupes: { [key: string | number | symbol]: Issue[] },
-    categoryLimit: Record<any, number>
-  ): Issue[] {
-    const issues = groupes[category] ?? []
-    const initialLimit = Object.keys(groupes).length === 1 ? singleCategoryLimit : defaultLimit
-    const limit = categoryLimit[toCat(category)] ?? initialLimit
-    return issues.slice(0, limit)
-  }
-
-  const getInitCollapseValue = (category: any) =>
-    categories.length === 1 ? false : (groupedIssues[category]?.length ?? 0) > autoFoldLimit
-
-  const unsubscribeFilter = filterStore.subscribe(() => (isFilterUpdate = true))
-  onDestroy(unsubscribeFilter)
-
-  $: {
-    if (isFilterUpdate && groupedIssuesBeforeFilter !== groupedIssues && groupByKey) {
-      isCollapsedMap = {}
-
-      categories.forEach((category) => (isCollapsedMap[toCat(category)] = getInitCollapseValue(category)))
-
-      isFilterUpdate = false
-      groupedIssuesBeforeFilter = groupedIssues
-    }
-  }
-
-  $: spaceQuery.query(tracker.class.Team, { _id: currentSpace }, (res) => {
-    currentTeam = res.shift()
-  })
-  $: {
-    const exkeys = new Set(Object.keys(isCollapsedMap))
-    for (const c of categories) {
-      if (!exkeys.delete(toCat(c))) {
-        isCollapsedMap[toCat(c)] = getInitCollapseValue(c)
-      }
-    }
-    for (const k of exkeys) {
-      delete isCollapsedMap[k]
-    }
-  }
-  $: combinedGroupedIssues = Object.values(groupedIssues).flat(1)
-  $: options = { ...baseOptions, sort: { [orderBy]: issuesSortOrderMap[orderBy] } } as FindOptions<Issue>
-  $: headerComponent = groupByKey === undefined || groupByKey === 'assignee' ? null : issuesGroupEditorMap[groupByKey]
-  $: selectedObjectIdsSet = new Set<Ref<Doc>>(selectedObjectIds.map((it) => it._id))
-  $: objectRefs.length = combinedGroupedIssues.length
-  $: getObjectPresenter(client, contact.class.Person, { key: '' }).then((p) => {
-    personPresenter = p
-  })
-  $: buildModel({ client, _class, keys: itemsConfig, lookup: options.lookup }).then((res) => (itemModels = res))
-</script>
-
-<div class="issueslist-container">
-  {#each categories as category}
-    {@const items = groupedIssues[category] ?? []}
-    {@const limited = limitGroup(category, groupedIssues, categoryLimit) ?? []}
-    {#if headerComponent || groupByKey === 'assignee' || category === undefined}
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <div class="flex-between categoryHeader row" on:click={() => handleCollapseCategory(toCat(category))}>
-        <div class="flex-row-center gap-2 clear-mins">
-          <FixedColumn key={'issuelist_groupBy'} justify={'left'}>
-            {#if groupByKey === 'assignee' && personPresenter}
-              <svelte:component
-                this={personPresenter.presenter}
-                shouldShowLabel={true}
-                value={employees.find((x) => x?._id === category)}
-                defaultName={tracker.string.NoAssignee}
-                shouldShowPlaceholder={true}
-                isInteractive={false}
-                avatarSize={'small'}
-                enlargedText
-                {currentSpace}
-              />
-            {:else if !groupByKey}
-              <span class="text-base fs-bold overflow-label content-accent-color pointer-events-none">
-                <Label label={tracker.string.NoGrouping} />
-              </span>
-            {:else if headerComponent}
-              <Component
-                is={headerComponent}
-                props={{
-                  isEditable: false,
-                  shouldShowLabel: true,
-                  value: groupByKey ? { [groupByKey]: category } : {},
-                  statuses: groupByKey === 'status' ? statuses : undefined,
-                  issues: groupedIssues[category],
-                  width: 'min-content',
-                  kind: 'list-header',
-                  enlargedText: true,
-                  currentSpace
-                }}
-              />
-            {/if}
-          </FixedColumn>
-          <FixedColumn key={'issuelist_statistics'} justify={'left'}>
-            <IssueStatistics issues={groupedIssues[category]} />
-          </FixedColumn>
-          {#if limited.length < items.length}
-            <div class="counter">
-              {limited.length}
-              <div class="text-xs mx-1">/</div>
-              {items.length}
-            </div>
-            <ActionIcon
-              size={'small'}
-              icon={IconMoreH}
-              label={ui.string.ShowMore}
-              action={() => {
-                categoryLimit[toCat(category)] = limited.length + 20
-              }}
-            />
-          {:else}
-            <span class="counter">{items.length}</span>
-          {/if}
-        </div>
-        <Button
-          icon={IconAdd}
-          kind={'transparent'}
-          showTooltip={{ label: tracker.string.AddIssueTooltip }}
-          on:click={(event) => handleNewIssueAdded(event, category)}
-        />
-      </div>
-    {/if}
-    <ExpandCollapse isExpanded={!isCollapsedMap[toCat(category)]} duration={400}>
-      {#if itemModels}
-        {#if groupedIssues[category]}
-          {#each limited as docObject (docObject._id)}
-            <IssuesListItem
-              bind:use={objectRefs[combinedGroupedIssues.findIndex((x) => x === docObject)]}
-              {docObject}
-              model={itemModels}
-              {groupByKey}
-              selected={selectedRowIndex === combinedGroupedIssues.findIndex((x) => x === docObject)}
-              checked={selectedObjectIdsSet.has(docObject._id)}
-              {statuses}
-              {currentTeam}
-              on:check={(ev) => dispatch('check', { docs: ev.detail.docs, value: ev.detail.value })}
-              on:contextmenu={(event) =>
-                handleMenuOpened(
-                  event,
-                  docObject,
-                  combinedGroupedIssues.findIndex((x) => x === docObject)
-                )}
-              on:focus={() => {}}
-              on:mouseover={() => handleRowFocused(docObject)}
-            />
-          {/each}
-        {:else if loadingProps !== undefined}
-          {#each Array(getLoadingElementsLength(loadingProps, options)) as _, rowIndex}
-            <div class="listGrid row" class:fixed={rowIndex === selectedRowIndex}>
-              <div class="flex-center clear-mins h-full">
-                <div class="gridElement">
-                  <CheckBox checked={false} />
-                  <div class="ml-4">
-                    <Spinner size="small" />
-                  </div>
-                </div>
-              </div>
-            </div>
-          {/each}
-        {/if}
-      {/if}
-    </ExpandCollapse>
-  {/each}
-</div>
-
-<style lang="scss">
-  .issueslist-container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: max-content;
-    min-width: auto;
-    min-height: auto;
-  }
-  .categoryHeader {
-    position: sticky;
-    top: 0;
-    padding: 0 0.75rem 0 2.25rem;
-    height: 3rem;
-    min-height: 3rem;
-    min-width: 0;
-    background: var(--header-bg-color);
-    z-index: 5;
-  }
-
-  .row:not(:last-child) {
-    border-bottom: 1px solid var(--accent-bg-color);
-  }
-
-  .counter {
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    flex-shrink: 0;
-    margin-left: 1rem;
-    padding: 0.25rem 0.5rem;
-    min-width: 1.325rem;
-    text-align: center;
-    font-weight: 500;
-    font-size: 1rem;
-    line-height: 1rem;
-    color: var(--accent-color);
-    background-color: var(--body-color);
-    border: 1px solid var(--divider-color);
-    border-radius: 1rem;
-  }
-</style>
diff --git a/plugins/tracker-resources/src/components/issues/IssuesListBrowser.svelte b/plugins/tracker-resources/src/components/issues/IssuesListBrowser.svelte
deleted file mode 100644
index 39e11009d0..0000000000
--- a/plugins/tracker-resources/src/components/issues/IssuesListBrowser.svelte
+++ /dev/null
@@ -1,82 +0,0 @@
-<!--
-// Copyright © 2022 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 type { Class, Doc, Ref, WithLookup } from '@hcengineering/core'
-  import { BuildModelKey } from '@hcengineering/view'
-  import {
-    ActionContext,
-    focusStore,
-    ListSelectionProvider,
-    SelectDirection,
-    selectionStore,
-    LoadingProps
-  } from '@hcengineering/view-resources'
-  import IssuesList from './IssuesList.svelte'
-  import { Issue, IssueStatus, Team } from '@hcengineering/tracker'
-  import { Employee } from '@hcengineering/contact'
-  import { onMount } from 'svelte'
-  import { IssuesGroupByKeys, IssuesOrderByKeys } from '../../utils'
-
-  export let _class: Ref<Class<Doc>>
-  export let baseMenuClass: Ref<Class<Doc>> | undefined = undefined
-  export let itemsConfig: (BuildModelKey | string)[]
-  export let currentSpace: Ref<Team> | undefined = undefined
-  export let groupByKey: IssuesGroupByKeys | undefined = undefined
-  export let orderBy: IssuesOrderByKeys
-  export let statuses: WithLookup<IssueStatus>[]
-  export let employees: (WithLookup<Employee> | undefined)[] = []
-  export let categories: any[] = []
-  export let groupedIssues: { [key: string | number | symbol]: Issue[] } = {}
-  export let loadingProps: LoadingProps | undefined = undefined
-
-  const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {})
-
-  let issuesList: IssuesList
-
-  $: if (issuesList !== undefined) listProvider.update(Object.values(groupedIssues).flat(1))
-
-  onMount(() => {
-    ;(document.activeElement as HTMLElement)?.blur()
-  })
-</script>
-
-<ActionContext
-  context={{
-    mode: 'browser'
-  }}
-/>
-
-<IssuesList
-  bind:this={issuesList}
-  {_class}
-  {baseMenuClass}
-  {currentSpace}
-  {groupByKey}
-  {orderBy}
-  {statuses}
-  {employees}
-  {categories}
-  {itemsConfig}
-  {groupedIssues}
-  {loadingProps}
-  selectedObjectIds={$selectionStore ?? []}
-  selectedRowIndex={listProvider.current($focusStore)}
-  on:row-focus={(event) => {
-    listProvider.updateFocus(event.detail ?? undefined)
-  }}
-  on:check={(event) => {
-    listProvider.updateSelection(event.detail.docs, event.detail.value)
-  }}
-/>
diff --git a/plugins/tracker-resources/src/components/issues/IssuesView.svelte b/plugins/tracker-resources/src/components/issues/IssuesView.svelte
index 59c0223de9..65859e7227 100644
--- a/plugins/tracker-resources/src/components/issues/IssuesView.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuesView.svelte
@@ -1,21 +1,20 @@
 <script lang="ts">
-  import { DocumentQuery, WithLookup } from '@hcengineering/core'
+  import { DocumentQuery, Ref, Space, WithLookup } from '@hcengineering/core'
   import { IntlString, translate } from '@hcengineering/platform'
   import { getClient } from '@hcengineering/presentation'
   import { Issue } from '@hcengineering/tracker'
-  import { Button, IconDetails, IconDetailsFilled, location } from '@hcengineering/ui'
+  import { Button, IconDetails, IconDetailsFilled } from '@hcengineering/ui'
   import view, { Viewlet } from '@hcengineering/view'
-  import { FilterBar, ViewOptionModel, ViewOptionsButton, getActiveViewletId } from '@hcengineering/view-resources'
+  import { FilterBar, getActiveViewletId } from '@hcengineering/view-resources'
+  import ViewletSettingButton from '@hcengineering/view-resources/src/components/ViewletSettingButton.svelte'
+  import tracker from '../../plugin'
   import IssuesContent from './IssuesContent.svelte'
   import IssuesHeader from './IssuesHeader.svelte'
-  import { getDefaultViewOptionsConfig } from '../../utils'
-  import tracker from '../../plugin'
-  import { onDestroy } from 'svelte'
 
   export let query: DocumentQuery<Issue> = {}
   export let title: IntlString | undefined = undefined
   export let label: string = ''
-  export let viewOptionsConfig: ViewOptionModel[] = getDefaultViewOptionsConfig()
+  export let space: Ref<Space> | undefined
 
   export let panelWidth: number = 0
 
@@ -64,12 +63,6 @@
   let docSize: boolean = false
   $: if (docWidth <= 900 && !docSize) docSize = true
   $: if (docWidth > 900 && docSize) docSize = false
-
-  onDestroy(
-    location.subscribe(() => {
-      viewOptionsConfig = viewOptionsConfig
-    })
-  )
 </script>
 
 <IssuesHeader {viewlets} {label} bind:viewlet bind:search showLabelSelector={$$slots.label_selector}>
@@ -78,7 +71,7 @@
   </svelte:fragment>
   <svelte:fragment slot="extra">
     {#if viewlet}
-      <ViewOptionsButton viewOptionsKey={viewlet._id} config={viewOptionsConfig} />
+      <ViewletSettingButton {viewlet} />
     {/if}
     {#if asideFloat && $$slots.aside}
       <div class="buttons-divider" />
@@ -98,7 +91,7 @@
 <FilterBar _class={tracker.class.Issue} query={searchQuery} on:change={(e) => (resultQuery = e.detail)} />
 <div class="flex w-full h-full clear-mins">
   {#if viewlet}
-    <IssuesContent {viewlet} query={resultQuery} />
+    <IssuesContent {viewlet} query={resultQuery} {space} />
   {/if}
   {#if $$slots.aside !== undefined && asideShown}
     <div class="popupPanel-body__aside flex" class:float={asideFloat} class:shown={asideShown}>
diff --git a/plugins/tracker-resources/src/components/issues/KanbanView.svelte b/plugins/tracker-resources/src/components/issues/KanbanView.svelte
index 0859b1cdc4..cc8733ef04 100644
--- a/plugins/tracker-resources/src/components/issues/KanbanView.svelte
+++ b/plugins/tracker-resources/src/components/issues/KanbanView.svelte
@@ -17,7 +17,8 @@
   import { Class, Doc, DocumentQuery, Lookup, Ref, SortingOrder, WithLookup } from '@hcengineering/core'
   import { Kanban, TypeState } from '@hcengineering/kanban'
   import notification from '@hcengineering/notification'
-  import { createQuery } from '@hcengineering/presentation'
+  import { getResource } from '@hcengineering/platform'
+  import { createQuery, getClient } from '@hcengineering/presentation'
   import tags from '@hcengineering/tags'
   import { Issue, IssuesGrouping, IssuesOrdering, IssueStatus, Team } from '@hcengineering/tracker'
   import {
@@ -30,18 +31,20 @@
     showPopup,
     tooltip
   } from '@hcengineering/ui'
-  import { focusStore, ListSelectionProvider, SelectDirection, selectionStore } from '@hcengineering/view-resources'
+  import { ViewOptionModel, ViewOptions, ViewQueryOption } from '@hcengineering/view'
+  import {
+    focusStore,
+    ListSelectionProvider,
+    noCategory,
+    SelectDirection,
+    selectionStore,
+    viewOptionsStore
+  } from '@hcengineering/view-resources'
   import ActionContext from '@hcengineering/view-resources/src/components/ActionContext.svelte'
   import Menu from '@hcengineering/view-resources/src/components/Menu.svelte'
   import { onMount } from 'svelte'
   import tracker from '../../plugin'
-  import {
-    getIssueStatusStates,
-    getKanbanStatuses,
-    getPriorityStates,
-    issuesGroupBySorting,
-    issuesSortOrderMap
-  } from '../../utils'
+  import { getIssueStatusStates, getKanbanStatuses, getPriorityStates, issuesGroupBySorting } from '../../utils'
   import CreateIssue from '../CreateIssue.svelte'
   import ProjectEditor from '../projects/ProjectEditor.svelte'
   import AssigneePresenter from './AssigneePresenter.svelte'
@@ -53,24 +56,16 @@
   import StatusEditor from './StatusEditor.svelte'
   import EstimationEditor from './timereport/EstimationEditor.svelte'
 
-  export let currentSpace: Ref<Team> = tracker.team.DefaultTeam
+  export let space: Ref<Team> | undefined = undefined
   export let baseMenuClass: Ref<Class<Doc>> | undefined = undefined
   export let query: DocumentQuery<Issue> = {}
-  export let viewOptions: {
-    groupBy: IssuesGrouping
-    orderBy: IssuesOrdering
-    shouldShowEmptyGroups: boolean
-    shouldShowSubIssues: boolean
-  }
+  export let viewOptions: ViewOptionModel[] | undefined
 
-  $: currentSpace = typeof query.space === 'string' ? query.space : tracker.team.DefaultTeam
-  $: ({ groupBy, orderBy, shouldShowEmptyGroups, shouldShowSubIssues } = viewOptions)
-  $: sort = { [orderBy]: issuesSortOrderMap[orderBy] }
-  $: rankFieldName = orderBy === IssuesOrdering.Manual ? orderBy : undefined
-  $: resultQuery = {
-    ...(shouldShowSubIssues ? {} : { attachedTo: tracker.ids.NoParent }),
-    ...query
-  } as any
+  $: currentSpace = space || tracker.team.DefaultTeam
+  $: groupBy = ($viewOptionsStore.groupBy ?? noCategory) as IssuesGrouping
+  $: orderBy = $viewOptionsStore.orderBy
+  $: sort = { [orderBy[0]]: orderBy[1] }
+  $: dontUpdateRank = orderBy[0] !== IssuesOrdering.Manual
 
   const spaceQuery = createQuery()
   const statusesQuery = createQuery()
@@ -80,6 +75,28 @@
     currentTeam = res.shift()
   })
 
+  let resultQuery: DocumentQuery<any> = query
+  $: getResultQuery(query, viewOptions, $viewOptionsStore).then((p) => (resultQuery = p))
+
+  const client = getClient()
+  const hierarchy = client.getHierarchy()
+
+  async function getResultQuery (
+    query: DocumentQuery<Issue>,
+    viewOptions: ViewOptionModel[] | undefined,
+    viewOptionsStore: ViewOptions
+  ): Promise<DocumentQuery<Issue>> {
+    if (viewOptions === undefined) return query
+    let result = hierarchy.clone(query)
+    for (const viewOption of viewOptions) {
+      if (viewOption.actionTartget !== 'query') continue
+      const queryOption = viewOption as ViewQueryOption
+      const f = await getResource(queryOption.action)
+      result = f(viewOptionsStore[queryOption.key] ?? queryOption.defaultValue, query)
+    }
+    return result
+  }
+
   let issueStatuses: WithLookup<IssueStatus>[] | undefined
   $: issueStatusStates = getIssueStatusStates(issueStatuses)
   $: statusesQuery.query(
@@ -122,6 +139,12 @@
   }
   const issuesQuery = createQuery()
   let issueStates: TypeState[] = []
+  const lookupIssue: Lookup<Issue> = {
+    status: [tracker.class.IssueStatus, { category: tracker.class.IssueStatusCategory }],
+    project: tracker.class.Project,
+    sprint: tracker.class.Sprint,
+    assignee: contact.class.Employee
+  }
   $: issuesQuery.query(
     tracker.class.Issue,
     resultQuery,
@@ -129,12 +152,7 @@
       issueStates = await getKanbanStatuses(groupBy, result)
     },
     {
-      lookup: {
-        status: [tracker.class.IssueStatus, { category: tracker.class.IssueStatusCategory }],
-        project: tracker.class.Project,
-        sprint: tracker.class.Sprint,
-        assignee: contact.class.Employee
-      },
+      lookup: lookupIssue,
       sort: issuesGroupBySorting[groupBy]
     }
   )
@@ -145,17 +163,16 @@
   })
   function getIssueStates (
     groupBy: IssuesGrouping,
-    showEmptyGroups: boolean,
     states: TypeState[],
     statusStates: TypeState[],
     priorityStates: TypeState[]
   ) {
-    if (!showEmptyGroups && states.length > 0) return states
+    if (states.length > 0) return states
     if (groupBy === IssuesGrouping.Status) return statusStates
     if (groupBy === IssuesGrouping.Priority) return priorityStates
     return []
   }
-  $: states = getIssueStates(groupBy, shouldShowEmptyGroups, issueStates, issueStatusStates, priorityStates)
+  $: states = getIssueStates(groupBy, issueStates, issueStatusStates, priorityStates)
 
   const fullFilled: { [key: string]: boolean } = {}
   const getState = (state: any): WithLookup<IssueStatus> | undefined => {
@@ -174,12 +191,11 @@
   <Kanban
     bind:this={kanbanUI}
     _class={tracker.class.Issue}
-    search=""
     {states}
+    {dontUpdateRank}
     options={{ sort, lookup }}
     query={resultQuery}
     fieldName={groupBy}
-    {rankFieldName}
     on:content={(evt) => {
       listProvider.update(evt.detail)
     }}
@@ -202,18 +218,16 @@
             <span class="lines-limit-2 ml-2">{state.title}</span>
             <span class="counter ml-2 text-md">{count}</span>
           </div>
-          {#if groupBy === IssuesGrouping.Status}
-            <div class="flex gap-1">
-              <Button
-                icon={IconAdd}
-                kind={'transparent'}
-                showTooltip={{ label: tracker.string.AddIssueTooltip, direction: 'left' }}
-                on:click={() => {
-                  showPopup(CreateIssue, { space: currentSpace, status: state._id }, 'top')
-                }}
-              />
-            </div>
-          {/if}
+          <div class="flex gap-1">
+            <Button
+              icon={IconAdd}
+              kind={'transparent'}
+              showTooltip={{ label: tracker.string.AddIssueTooltip, direction: 'left' }}
+              on:click={() => {
+                showPopup(CreateIssue, { space: currentSpace, [groupBy]: state._id }, 'top')
+              }}
+            />
+          </div>
         </div>
       </div>
     </svelte:fragment>
@@ -244,7 +258,7 @@
           <AssigneePresenter
             value={issue.$lookup?.assignee}
             defaultClass={contact.class.Employee}
-            issueId={issue._id}
+            object={issue}
             isEditable={true}
           />
           <div class="flex-center mt-2">
@@ -252,8 +266,8 @@
           </div>
         </div>
         <div class="buttons-group xsmall-gap states-bar">
-          {#if issue && issueStatuses && issue.subIssues > 0}
-            <SubIssuesSelector value={issue} {currentTeam} statuses={issueStatuses} />
+          {#if issue && issue.subIssues > 0}
+            <SubIssuesSelector value={issue} {currentTeam} />
           {/if}
           <PriorityEditor value={issue} isEditable={true} kind={'link-bordered'} size={'inline'} justify={'center'} />
           <ProjectEditor
diff --git a/plugins/tracker-resources/src/components/issues/ListView.svelte b/plugins/tracker-resources/src/components/issues/ListView.svelte
deleted file mode 100644
index 996dd1d9b2..0000000000
--- a/plugins/tracker-resources/src/components/issues/ListView.svelte
+++ /dev/null
@@ -1,83 +0,0 @@
-<script lang="ts">
-  import contact, { Employee } from '@hcengineering/contact'
-  import { Class, Doc, DocumentQuery, Ref, SortingOrder, WithLookup } from '@hcengineering/core'
-  import { createQuery } from '@hcengineering/presentation'
-  import { Issue, IssueStatus, ViewOptions } from '@hcengineering/tracker'
-  import { issueSP, Scroller } from '@hcengineering/ui'
-  import { BuildModelKey } from '@hcengineering/view'
-  import tracker from '../../plugin'
-  import {
-    getCategories,
-    groupBy as groupByFunc,
-    issuesGroupKeyMap,
-    issuesOrderKeyMap,
-    issuesSortOrderMap
-  } from '../../utils'
-  import IssuesListBrowser from './IssuesListBrowser.svelte'
-
-  export let _class: Ref<Class<Doc>>
-  export let config: (string | BuildModelKey)[]
-  export let query: DocumentQuery<Issue> = {}
-  export let viewOptions: ViewOptions
-
-  $: currentSpace = typeof query.space === 'string' ? query.space : tracker.team.DefaultTeam
-  $: ({ groupBy, orderBy, shouldShowEmptyGroups, shouldShowSubIssues } = viewOptions)
-  $: groupByKey = issuesGroupKeyMap[groupBy]
-  $: orderByKey = issuesOrderKeyMap[orderBy]
-  $: subIssuesQuery = shouldShowSubIssues ? {} : { attachedTo: tracker.ids.NoParent }
-
-  const statusesQuery = createQuery()
-  let statuses: IssueStatus[] = []
-  $: statusesQuery.query(
-    tracker.class.IssueStatus,
-    { attachedTo: currentSpace },
-    (result) => {
-      statuses = [...result]
-    },
-    {
-      lookup: { category: tracker.class.IssueStatusCategory },
-      sort: { rank: SortingOrder.Ascending }
-    }
-  )
-  $: groupedIssues = groupByFunc(issues, groupBy)
-  $: categories = getCategories(groupByKey, issues, !!shouldShowEmptyGroups, statuses, employees)
-  $: employees = issues.map((x) => x.$lookup?.assignee).filter(Boolean) as Employee[]
-
-  const issuesQuery = createQuery()
-  let issues: WithLookup<Issue>[] = []
-  $: issuesQuery.query(
-    tracker.class.Issue,
-    { ...subIssuesQuery, ...query },
-    (result) => {
-      issues = result
-    },
-    {
-      sort: { [orderByKey]: issuesSortOrderMap[orderByKey] },
-      lookup: {
-        assignee: contact.class.Employee,
-        status: tracker.class.IssueStatus,
-        space: tracker.class.Team,
-        sprint: tracker.class.Sprint,
-        _id: {
-          subIssues: tracker.class.Issue
-        }
-      }
-    }
-  )
-</script>
-
-<div class="w-full h-full clear-mins">
-  <Scroller fade={issueSP}>
-    <IssuesListBrowser
-      {_class}
-      {currentSpace}
-      {groupByKey}
-      orderBy={orderByKey}
-      {statuses}
-      {employees}
-      {categories}
-      itemsConfig={config}
-      {groupedIssues}
-    />
-  </Scroller>
-</div>
diff --git a/plugins/tracker-resources/src/components/issues/PriorityRefPresenter.svelte b/plugins/tracker-resources/src/components/issues/PriorityRefPresenter.svelte
new file mode 100644
index 0000000000..72ed7e7e8d
--- /dev/null
+++ b/plugins/tracker-resources/src/components/issues/PriorityRefPresenter.svelte
@@ -0,0 +1,74 @@
+<!--
+// Copyright © 2023 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 { IssuePriority } from '@hcengineering/tracker'
+  import { Button, ButtonKind, ButtonSize, Icon, Label } from '@hcengineering/ui'
+  import { issuePriorities } from '../../utils'
+
+  export let value: IssuePriority
+
+  export let kind: ButtonKind = 'link'
+  export let size: ButtonSize = 'large'
+  export let justify: 'left' | 'center' = 'left'
+  export let width: string | undefined = undefined
+</script>
+
+{#if kind === 'list' || kind === 'list-header'}
+  <div class="priority-container">
+    <div class="icon">
+      {#if issuePriorities[value]?.icon}<Icon icon={issuePriorities[value]?.icon} {size} />{/if}
+    </div>
+    <span
+      class="{kind === 'list' ? 'ml-2 text-md' : 'ml-3 text-base'} overflow-label disabled fs-bold content-accent-color"
+    >
+      <Label label={issuePriorities[value]?.label} />
+    </span>
+  </div>
+{:else}
+  <Button
+    label={issuePriorities[value]?.label}
+    icon={issuePriorities[value]?.icon}
+    {justify}
+    {width}
+    {size}
+    {kind}
+    disabled
+  />
+{/if}
+
+<style lang="scss">
+  .priority-container {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    min-width: 0;
+    cursor: pointer;
+
+    .icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-shrink: 0;
+      width: 1rem;
+      height: 1rem;
+      color: var(--content-color);
+    }
+    &:hover {
+      .icon {
+        color: var(--caption-color) !important;
+      }
+    }
+  }
+</style>
diff --git a/plugins/tracker-resources/src/components/issues/StatusRefPresenter.svelte b/plugins/tracker-resources/src/components/issues/StatusRefPresenter.svelte
new file mode 100644
index 0000000000..f5f565dab8
--- /dev/null
+++ b/plugins/tracker-resources/src/components/issues/StatusRefPresenter.svelte
@@ -0,0 +1,32 @@
+<!--
+// Copyright © 2023 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 { Ref, WithLookup } from '@hcengineering/core'
+  import { createQuery } from '@hcengineering/presentation'
+  import tracker, { IssueStatus } from '@hcengineering/tracker'
+  import StatusPresenter from './StatusPresenter.svelte'
+
+  export let value: Ref<IssueStatus> | undefined
+  export let size: 'small' | 'medium' = 'medium'
+
+  let status: WithLookup<IssueStatus> | undefined
+
+  const query = createQuery()
+  $: query.query(tracker.class.IssueStatus, { _id: value }, (res) => ([status] = res), {
+    lookup: { category: tracker.class.IssueStatusCategory }
+  })
+</script>
+
+<StatusPresenter value={status} {size} />
diff --git a/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte b/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
index 396e4532da..3ff2c3417d 100644
--- a/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
@@ -20,7 +20,7 @@
   import { getResource } from '@hcengineering/platform'
   import presentation, { createQuery, getClient, MessageViewer } from '@hcengineering/presentation'
   import setting, { settingId } from '@hcengineering/setting'
-  import type { Issue, IssuesGrouping, IssuesOrdering, IssueStatus, Team } from '@hcengineering/tracker'
+  import type { Issue, IssueStatus, Team } from '@hcengineering/tracker'
   import {
     Button,
     EditBox,
@@ -33,14 +33,7 @@
     showPopup,
     Spinner
   } from '@hcengineering/ui'
-  import {
-    ContextMenu,
-    focusStore,
-    ListSelectionProvider,
-    SelectDirection,
-    UpDownNavigator,
-    viewOptionsStore
-  } from '@hcengineering/view-resources'
+  import { ContextMenu, UpDownNavigator } from '@hcengineering/view-resources'
   import { createEventDispatcher, onDestroy, onMount } from 'svelte'
   import { generateIssueShortLink, getIssueId } from '../../../issues'
   import tracker from '../../../plugin'
@@ -49,8 +42,6 @@
   import CopyToClipboard from './CopyToClipboard.svelte'
   import SubIssues from './SubIssues.svelte'
   import SubIssueSelector from './SubIssueSelector.svelte'
-  import { groupBy as groupByFunc, issuesOrderKeyMap, issuesSortOrderMap } from '../../../utils'
-  import contact from '@hcengineering/contact'
 
   export let _id: Ref<Issue>
   export let _class: Ref<Class<Issue>>
@@ -71,14 +62,6 @@
   let isEditing = false
   let descriptionBox: AttachmentStyledBox
 
-  let groupBy: IssuesGrouping
-  let orderBy: IssuesOrdering
-  let shouldShowSubIssues: boolean
-  $: ({ groupBy, orderBy, shouldShowSubIssues } = $viewOptionsStore)
-  $: orderByKey = issuesOrderKeyMap[orderBy]
-  $: subIssuesQuery = shouldShowSubIssues ? {} : { attachedTo: tracker.ids.NoParent }
-  $: query = { space: issue?.space }
-
   const notificationClient = getResource(notification.function.GetNotificationClient).then((res) => res())
 
   $: read(_id)
@@ -126,72 +109,6 @@
   $: isDescriptionEmpty = !new DOMParser().parseFromString(description, 'text/html').documentElement.innerText?.trim()
   $: parentIssue = issue?.$lookup?.attachedTo
 
-  let issues: WithLookup<Issue>[] = []
-  let neighbourIssues: Issue[] = []
-  const issuesQuery = createQuery()
-  const subIssuesQueryClient = createQuery()
-
-  $: if (parentIssue) {
-    subIssuesQueryClient.query(
-      tracker.class.Issue,
-      { attachedTo: parentIssue?._id },
-      async (result) => (neighbourIssues = result ?? []),
-      {
-        sort: { rank: SortingOrder.Descending }
-      }
-    )
-  } else {
-    issuesQuery.query(
-      tracker.class.Issue,
-      { ...subIssuesQuery, ...query },
-      (result) => {
-        issues = result
-      },
-      {
-        sort: { [orderByKey]: issuesSortOrderMap[orderByKey] },
-        lookup: {
-          assignee: contact.class.Employee,
-          status: tracker.class.IssueStatus,
-          space: tracker.class.Team,
-          sprint: tracker.class.Sprint,
-          _id: {
-            subIssues: tracker.class.Issue
-          }
-        }
-      }
-    )
-  }
-
-  $: groupedIssues = groupByFunc(issues, groupBy)
-  $: flatGroupedIssues = Object.values(groupedIssues ?? {}).flat(1)
-  $: issuesToNavigate = parentIssue ? neighbourIssues : flatGroupedIssues
-
-  const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {
-    if (dir === 'vertical') {
-      if (groupedIssues) {
-        const selectedRowIndex = listProvider.current($focusStore)
-        let position =
-          (of !== undefined ? issuesToNavigate.findIndex((x) => x._id === of?._id) : selectedRowIndex) ?? -1
-
-        position -= offset
-
-        if (position < 0) {
-          position = 0
-        }
-
-        if (position >= issuesToNavigate.length) {
-          position = issuesToNavigate.length - 1
-        }
-
-        listProvider.updateFocus(issuesToNavigate[position])
-      }
-    }
-  })
-
-  $: if (issue) listProvider.updateFocus(issue)
-
-  $: listProvider.update(issuesToNavigate)
-
   function edit (ev: MouseEvent) {
     ev.preventDefault()
 
diff --git a/plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte b/plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte
index 8b457c5ba0..da9dac5ef0 100644
--- a/plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte
@@ -21,6 +21,7 @@
   import { flip } from 'svelte/animate'
   import { getIssueId } from '../../../issues'
   import tracker from '../../../plugin'
+  import { subIssueListProvider } from '../../../utils'
   import Circles from '../../icons/Circles.svelte'
   import AssigneeEditor from '../AssigneeEditor.svelte'
   import DueDateEditor from '../DueDateEditor.svelte'
@@ -41,6 +42,7 @@
 
   function openIssue (target: Issue) {
     dispatch('issue-focus', target)
+    subIssueListProvider(issues, target._id)
     showPanel(tracker.component.EditIssue, target._id, target._class, 'content')
   }
 
@@ -120,7 +122,7 @@
         {issue.title}
       </span>
       {#if issue.subIssues > 0}
-        <SubIssuesSelector value={issue} {currentTeam} statuses={issueStatuses.get(issue.space)} />
+        <SubIssuesSelector value={issue} {currentTeam} />
       {/if}
     </div>
     <div class="flex-center flex-no-shrink">
diff --git a/plugins/tracker-resources/src/components/issues/edit/SubIssueSelector.svelte b/plugins/tracker-resources/src/components/issues/edit/SubIssueSelector.svelte
index cbafb72968..77552ce933 100644
--- a/plugins/tracker-resources/src/components/issues/edit/SubIssueSelector.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/SubIssueSelector.svelte
@@ -31,6 +31,7 @@
   import tracker from '../../../plugin'
   import { getIssueId } from '../../../issues'
   import IssueStatusIcon from '../IssueStatusIcon.svelte'
+  import { ListSelectionProvider } from '@hcengineering/view-resources'
 
   export let issue: WithLookup<Issue>
 
@@ -48,6 +49,7 @@
   function openParentIssue () {
     if (parentIssue) {
       closeTooltip()
+      ListSelectionProvider.Pop()
       openIssue(parentIssue._id)
     }
   }
@@ -138,7 +140,7 @@
           bind:this={subIssuesElement}
           class="flex-center sub-issues cursor-pointer"
           use:tooltip={{ label: tracker.string.OpenSubIssues, direction: 'bottom' }}
-          on:click|preventDefault={areSubIssuesLoading ? undefined : showSubIssues}
+          on:click|preventDefault={showSubIssues}
         >
           <span class="overflow-label">{subIssues?.length}</span>
           <div class="ml-2">
diff --git a/plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte b/plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte
index 8a54597693..46836d35e7 100644
--- a/plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte
@@ -13,17 +13,26 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Doc, Ref, WithLookup } from '@hcengineering/core'
+  import { Ref, SortingOrder, WithLookup } from '@hcengineering/core'
+  import { createQuery } from '@hcengineering/presentation'
   import { Issue, IssueStatus, Team } from '@hcengineering/tracker'
-  import { ButtonKind, ButtonSize, getPlatformColor } from '@hcengineering/ui'
-  import { Button, closeTooltip, ProgressCircle, SelectPopup, showPanel, showPopup } from '@hcengineering/ui'
-  import { updateFocus } from '@hcengineering/view-resources'
-  import tracker from '../../../plugin'
+  import {
+    Button,
+    ButtonKind,
+    ButtonSize,
+    closeTooltip,
+    getPlatformColor,
+    ProgressCircle,
+    SelectPopup,
+    showPanel,
+    showPopup
+  } from '@hcengineering/ui'
   import { getIssueId } from '../../../issues'
+  import tracker from '../../../plugin'
+  import { subIssueListProvider } from '../../../utils'
 
   export let value: WithLookup<Issue>
   export let currentTeam: Team | undefined
-  export let statuses: WithLookup<IssueStatus>[] | undefined
 
   export let kind: ButtonKind = 'link-bordered'
   export let size: ButtonSize = 'inline'
@@ -32,21 +41,35 @@
 
   let btn: HTMLElement
 
-  let subIssues: Issue[] | undefined
-  let doneStatus: Ref<Doc> | undefined
+  let subIssues: Issue[] = []
   let countComplate: number = 0
 
+  const query = createQuery()
+  const statusesQuery = createQuery()
+
+  let statuses: WithLookup<IssueStatus>[] = []
+
   $: if (value.$lookup?.subIssues !== undefined) {
+    query.unsubscribe()
     subIssues = value.$lookup.subIssues as Issue[]
     subIssues.sort((a, b) => (a.rank ?? '').localeCompare(b.rank ?? ''))
+  } else {
+    query.query(tracker.class.Issue, { attachedTo: value._id }, (res) => (subIssues = res), {
+      sort: { rank: SortingOrder.Ascending }
+    })
   }
+
+  statusesQuery.query(tracker.class.IssueStatus, {}, (res) => (statuses = res), {
+    lookup: { category: tracker.class.IssueStatusCategory }
+  })
+
   $: if (statuses && subIssues) {
-    doneStatus = statuses.find((s) => s.category === tracker.issueStatusCategory.Completed)?._id ?? undefined
-    if (doneStatus) countComplate = subIssues.filter((si) => si.status === doneStatus).length
+    const doneStatuses = statuses.filter((s) => s.category === tracker.issueStatusCategory.Completed).map((p) => p._id)
+    countComplate = subIssues.filter((si) => doneStatuses.includes(si.status)).length
   }
   $: hasSubIssues = (subIssues?.length ?? 0) > 0
 
-  function getIssueStatusIcon (issue: Issue) {
+  function getIssueStatusIcon (issue: Issue, statuses: WithLookup<IssueStatus>[] | undefined) {
     const status = statuses?.find((s) => issue.status === s._id)
     const category = status?.$lookup?.category
     const color = status?.color ?? category?.color
@@ -59,9 +82,11 @@
 
   function openIssue (target: Ref<Issue>) {
     if (target !== value._id) {
+      subIssueListProvider(subIssues, target)
       showPanel(tracker.component.EditIssue, target, value._class, 'content')
     }
   }
+
   function showSubIssues () {
     if (subIssues) {
       closeTooltip()
@@ -71,7 +96,7 @@
           value: subIssues.map((iss) => {
             const text = currentTeam ? `${getIssueId(currentTeam, iss)} ${iss.title}` : iss.title
 
-            return { id: iss._id, text, isSelected: iss._id === value._id, ...getIssueStatusIcon(iss) }
+            return { id: iss._id, text, isSelected: iss._id === value._id, ...getIssueStatusIcon(iss, statuses) }
           }),
           width: 'large'
         },
@@ -86,12 +111,6 @@
         },
         (selectedIssue) => {
           selectedIssue !== undefined && openIssue(selectedIssue)
-        },
-        (selectedIssue) => {
-          const focus = subIssues?.find((it) => it._id === selectedIssue.id)
-          if (focus !== undefined) {
-            updateFocus({ focus })
-          }
         }
       )
     }
diff --git a/plugins/tracker-resources/src/components/issues/timereport/ReportsPopup.svelte b/plugins/tracker-resources/src/components/issues/timereport/ReportsPopup.svelte
index 345e4e5321..b43c143604 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/ReportsPopup.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/ReportsPopup.svelte
@@ -70,7 +70,7 @@
         config={[
           '$lookup.attachedTo',
           '',
-          '$lookup.employee',
+          'employee',
           {
             key: '$lookup.attachedTo',
             presenter: ParentNamesPresenter,
diff --git a/plugins/tracker-resources/src/components/myissues/MyIssues.svelte b/plugins/tracker-resources/src/components/myissues/MyIssues.svelte
index e41d14fe5a..75fd43a5ba 100644
--- a/plugins/tracker-resources/src/components/myissues/MyIssues.svelte
+++ b/plugins/tracker-resources/src/components/myissues/MyIssues.svelte
@@ -19,10 +19,8 @@
   import type { IntlString } from '@hcengineering/platform'
   import { createQuery } from '@hcengineering/presentation'
   import type { Issue } from '@hcengineering/tracker'
-  import { ViewOptionModel } from '@hcengineering/view-resources'
 
   import tracker from '../../plugin'
-  import { getDefaultViewOptionsConfig } from '../../utils'
   import IssuesView from '../issues/IssuesView.svelte'
   import ModeSelector from '../ModeSelector.svelte'
 
@@ -36,8 +34,6 @@
   let created = { _id: { $in: [] as Ref<Issue>[] } }
   let subscribed = { _id: { $in: [] as Ref<Issue>[] } }
 
-  const viewOptionsConfig: ViewOptionModel[] = getDefaultViewOptionsConfig(true)
-
   const createdQuery = createQuery()
   $: createdQuery.query<TxCollectionCUD<Issue, Issue>>(
     core.class.TxCollectionCUD,
@@ -79,7 +75,7 @@
   $: query = getQuery(mode, { assigned, created, subscribed })
 </script>
 
-<IssuesView {query} title={tracker.string.MyIssues} {viewOptionsConfig}>
+<IssuesView {query} space={undefined} title={tracker.string.MyIssues}>
   <svelte:fragment slot="afterHeader">
     <ModeSelector {config} {mode} onChange={handleChangeMode} />
   </svelte:fragment>
diff --git a/plugins/tracker-resources/src/components/projects/EditProject.svelte b/plugins/tracker-resources/src/components/projects/EditProject.svelte
index a63ba6e600..e75ab432aa 100644
--- a/plugins/tracker-resources/src/components/projects/EditProject.svelte
+++ b/plugins/tracker-resources/src/components/projects/EditProject.svelte
@@ -34,7 +34,7 @@
   })
 </script>
 
-<IssuesView query={{ project: project._id, space: project.space }} label={project.label}>
+<IssuesView query={{ project: project._id, space: project.space }} space={project.space} label={project.label}>
   <svelte:fragment slot="label_selector">
     <Button size={'small'} kind={'link'} on:click={selectProject}>
       <svelte:fragment slot="content">
diff --git a/plugins/tracker-resources/src/components/sprints/EditSprint.svelte b/plugins/tracker-resources/src/components/sprints/EditSprint.svelte
index 15572ccc15..8dcb8605fd 100644
--- a/plugins/tracker-resources/src/components/sprints/EditSprint.svelte
+++ b/plugins/tracker-resources/src/components/sprints/EditSprint.svelte
@@ -44,7 +44,7 @@
   })
 </script>
 
-<IssuesView query={{ sprint: sprint._id, space: sprint.space }} label={sprint.label}>
+<IssuesView query={{ sprint: sprint._id, space: sprint.space }} space={sprint.space} label={sprint.label}>
   <svelte:fragment slot="label_selector">
     <div bind:this={container}>
       <Button size={'small'} kind={'link'} on:click={selectSprint}>
diff --git a/plugins/tracker-resources/src/components/sprints/IssueStatistics.svelte b/plugins/tracker-resources/src/components/sprints/IssueStatistics.svelte
index 502818bd71..35521ff4d5 100644
--- a/plugins/tracker-resources/src/components/sprints/IssueStatistics.svelte
+++ b/plugins/tracker-resources/src/components/sprints/IssueStatistics.svelte
@@ -20,13 +20,13 @@
   import tracker from '../../plugin'
   import EstimationProgressCircle from '../issues/timereport/EstimationProgressCircle.svelte'
   import TimePresenter from '../issues/timereport/TimePresenter.svelte'
-  export let issues: Issue[] | undefined = undefined
+  export let docs: Issue[] | undefined = undefined
   export let capacity: number | undefined = undefined
   export let workDayLength: WorkDayLength = WorkDayLength.EIGHT_HOURS
 
-  $: ids = new Set(issues?.map((it) => it._id) ?? [])
+  $: ids = new Set(docs?.map((it) => it._id) ?? [])
 
-  $: noParents = issues?.filter((it) => !ids.has(it.attachedTo as Ref<Issue>))
+  $: noParents = docs?.filter((it) => !ids.has(it.attachedTo as Ref<Issue>))
 
   $: rootNoBacklogIssues = noParents?.filter(
     (it) => issueStatuses.get(it.status)?.category !== tracker.issueStatusCategory.Backlog
@@ -86,12 +86,12 @@
       })
       .reduce((it, cur) => {
         return it + cur
-      }),
+      }, 0),
     3
   )
 </script>
 
-{#if issues}
+{#if docs}
   <!-- <Label label={tracker.string.SprintDay} value={}/> -->
   <div class="flex-row-center flex-no-shrink h-6" class:showWarning={totalEstimation > (capacity ?? 0)}>
     <EstimationProgressCircle value={totalReported} max={totalEstimation} />
diff --git a/plugins/tracker-resources/src/components/sprints/SprintEditor.svelte b/plugins/tracker-resources/src/components/sprints/SprintEditor.svelte
index 97edddd924..1ccdc960fd 100644
--- a/plugins/tracker-resources/src/components/sprints/SprintEditor.svelte
+++ b/plugins/tracker-resources/src/components/sprints/SprintEditor.svelte
@@ -17,8 +17,13 @@
   import { IntlString } from '@hcengineering/platform'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { Issue, IssueTemplate, Sprint, Team } from '@hcengineering/tracker'
-  import { ButtonKind, ButtonShape, ButtonSize, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
-  import DatePresenter from '@hcengineering/ui/src/components/calendar/DatePresenter.svelte'
+  import {
+    ButtonKind,
+    ButtonShape,
+    ButtonSize,
+    DatePresenter,
+    deviceOptionsStore as deviceInfo
+  } from '@hcengineering/ui'
   import { activeSprint } from '../../issues'
   import tracker from '../../plugin'
   import { getDayOfSprint } from '../../utils'
diff --git a/plugins/tracker-resources/src/components/sprints/SprintRefPresenter.svelte b/plugins/tracker-resources/src/components/sprints/SprintRefPresenter.svelte
new file mode 100644
index 0000000000..a61388adc8
--- /dev/null
+++ b/plugins/tracker-resources/src/components/sprints/SprintRefPresenter.svelte
@@ -0,0 +1,76 @@
+<!--
+// Copyright © 2023 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 { Ref } from '@hcengineering/core'
+  import { createQuery } from '@hcengineering/presentation'
+  import { Sprint, Team } from '@hcengineering/tracker'
+  import { ButtonKind, DatePresenter, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
+  import tracker from '../../plugin'
+  import { getDayOfSprint } from '../../utils'
+  import TimePresenter from '../issues/timereport/TimePresenter.svelte'
+  import SprintSelector from './SprintSelector.svelte'
+
+  export let value: Ref<Sprint>
+  export let kind: ButtonKind = 'link'
+
+  const spaceQuery = createQuery()
+  let currentTeam: Team | undefined
+  $: sprint &&
+    spaceQuery.query(tracker.class.Team, { _id: sprint.space }, (res) => {
+      ;[currentTeam] = res
+    })
+  $: workDayLength = currentTeam?.workDayLength
+
+  const sprintQuery = createQuery()
+  let sprint: Sprint | undefined
+  $: sprintQuery.query(tracker.class.Sprint, { _id: value }, (res) => {
+    ;[sprint] = res
+  })
+
+  $: twoRows = $deviceInfo.twoRows
+</script>
+
+<div
+  class="flex flex-wrap"
+  class:minus-margin={kind === 'list-header'}
+  style:flex-direction={twoRows ? 'column' : 'row'}
+>
+  <div class="flex-row-center" class:minus-margin-vSpace={kind === 'list-header'}>
+    <SprintSelector {kind} isEditable={false} enlargedText {value} />
+  </div>
+
+  {#if sprint && kind === 'list-header'}
+    <div class="flex-row-center" class:minus-margin-space={kind === 'list-header'} class:text-sm={twoRows}>
+      {#if sprint}
+        {@const now = Date.now()}
+        {@const sprintDaysFrom =
+          now < sprint.startDate
+            ? 0
+            : now > sprint.targetDate
+            ? getDayOfSprint(sprint.startDate, sprint.targetDate)
+            : getDayOfSprint(sprint.startDate, now)}
+        {@const sprintDaysTo = getDayOfSprint(sprint.startDate, sprint.targetDate)}
+        <DatePresenter value={sprint.startDate} kind={'transparent'} />
+        <span class="p-1"> / </span>
+        <DatePresenter value={sprint.targetDate} kind={'transparent'} />
+        <div class="w-2 min-w-2" />
+        <!-- Active sprint in time -->
+        <TimePresenter value={sprintDaysFrom} {workDayLength} />
+        /
+        <TimePresenter value={sprintDaysTo} {workDayLength} />
+      {/if}
+    </div>
+  {/if}
+</div>
diff --git a/plugins/tracker-resources/src/components/templates/IssueTemplatesContent.svelte b/plugins/tracker-resources/src/components/templates/IssueTemplatesContent.svelte
index e3e105669e..27f3345d85 100644
--- a/plugins/tracker-resources/src/components/templates/IssueTemplatesContent.svelte
+++ b/plugins/tracker-resources/src/components/templates/IssueTemplatesContent.svelte
@@ -1,17 +1,30 @@
 <script lang="ts">
   import { DocumentQuery, WithLookup } from '@hcengineering/core'
-  import { IssueTemplate, ViewOptions } from '@hcengineering/tracker'
+  import { IssueTemplate } from '@hcengineering/tracker'
+  import { Component } from '@hcengineering/ui'
   import { Viewlet } from '@hcengineering/view'
-  import { viewOptionsStore } from '@hcengineering/view-resources'
-  import TemplatesList from './TemplatesList.svelte'
   import tracker from '../../plugin'
+  import CreateIssueTemplate from './CreateIssueTemplate.svelte'
 
   export let viewlet: WithLookup<Viewlet>
   export let query: DocumentQuery<IssueTemplate> = {}
 
-  $: vo = $viewOptionsStore as ViewOptions
+  const createItemDialog = CreateIssueTemplate
+  const createItemLabel = tracker.string.IssueTemplate
 </script>
 
 {#if viewlet?.$lookup?.descriptor?.component}
-  <TemplatesList _class={tracker.class.IssueTemplate} config={viewlet.config} {query} viewOptions={vo} />
+  <Component
+    is={viewlet.$lookup.descriptor.component}
+    props={{
+      _class: tracker.class.IssueTemplate,
+      config: viewlet.config,
+      options: viewlet.options,
+      createItemDialog,
+      createItemLabel,
+      viewOptions: viewlet.viewOptions?.other,
+      viewlet,
+      query
+    }}
+  />
 {/if}
diff --git a/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte b/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte
index b407031f93..f96906c4a7 100644
--- a/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte
+++ b/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte
@@ -4,8 +4,9 @@
   import { getClient } from '@hcengineering/presentation'
   import { IssueTemplate } from '@hcengineering/tracker'
   import { Button, IconAdd, IconDetails, IconDetailsFilled, showPopup } from '@hcengineering/ui'
-  import view, { Viewlet } from '@hcengineering/view'
-  import { FilterBar, getActiveViewletId, ViewOptionModel, ViewOptionsButton } from '@hcengineering/view-resources'
+  import view, { Viewlet, ViewOptionModel } from '@hcengineering/view'
+  import { FilterBar, getActiveViewletId } from '@hcengineering/view-resources'
+  import ViewletSettingButton from '@hcengineering/view-resources/src/components/ViewletSettingButton.svelte'
   import tracker from '../../plugin'
   import { getDefaultViewOptionsTemplatesConfig } from '../../utils'
   import IssuesHeader from '../issues/IssuesHeader.svelte'
@@ -85,7 +86,7 @@
     />
 
     {#if viewlet}
-      <ViewOptionsButton viewOptionsKey={viewlet._id} config={viewOptionsConfig} />
+      <ViewletSettingButton {viewlet} />
     {/if}
 
     {#if asideFloat && $$slots.aside}
diff --git a/plugins/tracker-resources/src/components/templates/TemplatesList.svelte b/plugins/tracker-resources/src/components/templates/TemplatesList.svelte
deleted file mode 100644
index d0106c11e5..0000000000
--- a/plugins/tracker-resources/src/components/templates/TemplatesList.svelte
+++ /dev/null
@@ -1,65 +0,0 @@
-<script lang="ts">
-  import contact, { Employee } from '@hcengineering/contact'
-  import { Class, Doc, DocumentQuery, Ref, WithLookup } from '@hcengineering/core'
-  import { createQuery } from '@hcengineering/presentation'
-  import { IssueTemplate, ViewOptions } from '@hcengineering/tracker'
-  import { defaultSP, Scroller } from '@hcengineering/ui'
-  import { BuildModelKey } from '@hcengineering/view'
-  import tracker from '../../plugin'
-  import {
-    getCategories,
-    groupBy as groupByFunc,
-    issuesGroupKeyMap,
-    issuesOrderKeyMap,
-    issuesSortOrderMap
-  } from '../../utils'
-  import IssuesListBrowser from '../issues/IssuesListBrowser.svelte'
-
-  export let _class: Ref<Class<Doc>>
-  export let config: (string | BuildModelKey)[]
-  export let query: DocumentQuery<IssueTemplate> = {}
-  export let viewOptions: ViewOptions
-
-  $: currentSpace = typeof query.space === 'string' ? query.space : tracker.team.DefaultTeam
-  $: ({ groupBy, orderBy, shouldShowEmptyGroups, shouldShowSubIssues } = viewOptions)
-  $: groupByKey = issuesGroupKeyMap[groupBy]
-  $: orderByKey = issuesOrderKeyMap[orderBy]
-
-  $: groupedIssues = groupByFunc(issues, groupBy)
-  $: categories = getCategories(groupByKey, issues, !!shouldShowEmptyGroups, [], employees)
-  $: employees = issues.map((x) => x.$lookup?.assignee).filter(Boolean) as Employee[]
-
-  const issuesQuery = createQuery()
-  let issues: WithLookup<IssueTemplate>[] = []
-  $: issuesQuery.query(
-    tracker.class.IssueTemplate,
-    { ...query },
-    (result) => {
-      issues = result
-    },
-    {
-      sort: { [orderByKey]: issuesSortOrderMap[orderByKey] },
-      lookup: {
-        assignee: contact.class.Employee,
-        space: tracker.class.Team,
-        sprint: tracker.class.Sprint
-      }
-    }
-  )
-</script>
-
-<div class="w-full h-full clear-mins">
-  <Scroller fade={defaultSP}>
-    <IssuesListBrowser
-      {_class}
-      {currentSpace}
-      {groupByKey}
-      orderBy={orderByKey}
-      statuses={[]}
-      {employees}
-      {categories}
-      itemsConfig={config}
-      {groupedIssues}
-    />
-  </Scroller>
-</div>
diff --git a/plugins/tracker-resources/src/index.ts b/plugins/tracker-resources/src/index.ts
index 2f88515647..cf5a847c18 100644
--- a/plugins/tracker-resources/src/index.ts
+++ b/plugins/tracker-resources/src/index.ts
@@ -32,8 +32,8 @@ import IssuePreview from './components/issues/IssuePreview.svelte'
 import Issues from './components/issues/Issues.svelte'
 import IssuesView from './components/issues/IssuesView.svelte'
 import KanbanView from './components/issues/KanbanView.svelte'
-import ListView from './components/issues/ListView.svelte'
 import ModificationDatePresenter from './components/issues/ModificationDatePresenter.svelte'
+import PriorityRefPresenter from './components/issues/PriorityRefPresenter.svelte'
 import PriorityEditor from './components/issues/PriorityEditor.svelte'
 import PriorityPresenter from './components/issues/PriorityPresenter.svelte'
 import StatusEditor from './components/issues/StatusEditor.svelte'
@@ -79,7 +79,6 @@ import SprintStatusPresenter from './components/sprints/SprintStatusPresenter.sv
 import SprintTitlePresenter from './components/sprints/SprintTitlePresenter.svelte'
 
 import SubIssuesSelector from './components/issues/edit/SubIssuesSelector.svelte'
-import GrowPresenter from './components/issues/GrowPresenter.svelte'
 import EstimationEditor from './components/issues/timereport/EstimationEditor.svelte'
 import ReportedTimeEditor from './components/issues/timereport/ReportedTimeEditor.svelte'
 import TimeSpendReport from './components/issues/timereport/TimeSpendReport.svelte'
@@ -95,11 +94,14 @@ import IssueTemplates from './components/templates/IssueTemplates.svelte'
 import EditIssueTemplate from './components/templates/EditIssueTemplate.svelte'
 import TemplateEstimationEditor from './components/templates/EstimationEditor.svelte'
 import MoveAndDeleteSprintPopup from './components/sprints/MoveAndDeleteSprintPopup.svelte'
-import { moveIssuesToAnotherSprint } from './utils'
+import { moveIssuesToAnotherSprint, issueStatusSort, issuePrioritySort, sprintSort, subIssueQuery } from './utils'
 import { deleteObject } from '@hcengineering/view-resources/src/utils'
 
 import CreateTeam from './components/teams/CreateTeam.svelte'
 import TeamPresenter from './components/teams/TeamPresenter.svelte'
+import IssueStatistics from './components/sprints/IssueStatistics.svelte'
+import StatusRefPresenter from './components/issues/StatusRefPresenter.svelte'
+import SprintRefPresenter from './components/sprints/SprintRefPresenter.svelte'
 
 export async function queryIssue<D extends Issue> (
   _class: Ref<Class<D>>,
@@ -229,6 +231,8 @@ export default async (): Promise<Resources> => ({
     ModificationDatePresenter,
     PriorityPresenter,
     PriorityEditor,
+    PriorityRefPresenter,
+    SprintRefPresenter,
     ProjectEditor,
     StatusPresenter,
     StatusEditor,
@@ -246,7 +250,6 @@ export default async (): Promise<Resources> => ({
     SetParentIssueActionPopup,
     EditProject,
     IssuesView,
-    ListView,
     KanbanView,
     TeamProjects,
     Roadmap,
@@ -265,7 +268,6 @@ export default async (): Promise<Resources> => ({
     TimeSpendReport,
     EstimationEditor,
     SubIssuesSelector,
-    GrowPresenter,
     RelatedIssues,
     RelatedIssueTemplates,
     ProjectSelector,
@@ -274,7 +276,9 @@ export default async (): Promise<Resources> => ({
     EditIssueTemplate,
     TemplateEstimationEditor,
     CreateTeam,
-    TeamPresenter
+    TeamPresenter,
+    IssueStatistics,
+    StatusRefPresenter
   },
   completion: {
     IssueQuery: async (client: Client, query: string, filter?: { in?: RelatedDocument[], nin?: RelatedDocument[] }) =>
@@ -284,7 +288,11 @@ export default async (): Promise<Resources> => ({
     IssueTitleProvider: getIssueTitle,
     GetIssueId: issueIdProvider,
     GetIssueLink: issueLinkProvider,
-    GetIssueTitle: issueTitleProvider
+    GetIssueTitle: issueTitleProvider,
+    IssueStatusSort: issueStatusSort,
+    IssuePrioritySort: issuePrioritySort,
+    SprintSort: sprintSort,
+    SubIssueQuery: subIssueQuery
   },
   actionImpl: {
     EditWorkflowStatuses: editWorkflowStatuses,
diff --git a/plugins/tracker-resources/src/plugin.ts b/plugins/tracker-resources/src/plugin.ts
index 409b5e95dc..79d2706ef7 100644
--- a/plugins/tracker-resources/src/plugin.ts
+++ b/plugins/tracker-resources/src/plugin.ts
@@ -12,12 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 //
-import { Client, Doc, Ref } from '@hcengineering/core'
+import { Client, Doc, DocumentQuery, Ref } from '@hcengineering/core'
 import type { IntlString, Metadata, Resource } from '@hcengineering/platform'
 import { mergeIds } from '@hcengineering/platform'
 import { AnyComponent } from '@hcengineering/ui'
 import tracker, { trackerId } from '../../tracker/lib'
 import { IssueDraft } from '@hcengineering/tracker'
+import { SortFunc } from '@hcengineering/view'
 
 export default mergeIds(trackerId, tracker, {
   string: {
@@ -292,9 +293,11 @@ export default mergeIds(trackerId, tracker, {
     ModificationDatePresenter: '' as AnyComponent,
     PriorityPresenter: '' as AnyComponent,
     PriorityEditor: '' as AnyComponent,
+    PriorityRefPresenter: '' as AnyComponent,
     ProjectEditor: '' as AnyComponent,
     SprintEditor: '' as AnyComponent,
     StatusPresenter: '' as AnyComponent,
+    StatusRefPresenter: '' as AnyComponent,
     StatusEditor: '' as AnyComponent,
     AssigneePresenter: '' as AnyComponent,
     DueDatePresenter: '' as AnyComponent,
@@ -312,13 +315,12 @@ export default mergeIds(trackerId, tracker, {
     SetParentIssueActionPopup: '' as AnyComponent,
     EditProject: '' as AnyComponent,
     IssuesView: '' as AnyComponent,
-    ListView: '' as AnyComponent,
     KanbanView: '' as AnyComponent,
     Roadmap: '' as AnyComponent,
     TeamProjects: '' as AnyComponent,
     IssuePreview: '' as AnyComponent,
     RelationsPopup: '' as AnyComponent,
-
+    SprintRefPresenter: '' as AnyComponent,
     Sprints: '' as AnyComponent,
     SprintPresenter: '' as AnyComponent,
     SprintStatusPresenter: '' as AnyComponent,
@@ -328,7 +330,6 @@ export default mergeIds(trackerId, tracker, {
     TimeSpendReport: '' as AnyComponent,
     EstimationEditor: '' as AnyComponent,
     TemplateEstimationEditor: '' as AnyComponent,
-    GrowPresenter: '' as AnyComponent,
 
     ProjectSelector: '' as AnyComponent,
 
@@ -342,6 +343,10 @@ export default mergeIds(trackerId, tracker, {
     IssueTitleProvider: '' as Resource<(client: Client, ref: Ref<Doc>) => Promise<string>>,
     GetIssueId: '' as Resource<(doc: Doc, props: Record<string, any>) => Promise<string>>,
     GetIssueLink: '' as Resource<(doc: Doc, props: Record<string, any>) => Promise<string>>,
-    GetIssueTitle: '' as Resource<(doc: Doc, props: Record<string, any>) => Promise<string>>
+    GetIssueTitle: '' as Resource<(doc: Doc, props: Record<string, any>) => Promise<string>>,
+    IssueStatusSort: '' as SortFunc,
+    IssuePrioritySort: '' as SortFunc,
+    SprintSort: '' as SortFunc,
+    SubIssueQuery: '' as Resource<(value: any, query: DocumentQuery<Doc>) => DocumentQuery<Doc>>
   }
 })
diff --git a/plugins/tracker-resources/src/types.ts b/plugins/tracker-resources/src/types.ts
index 32bbc72aaa..2a9cf6ef59 100644
--- a/plugins/tracker-resources/src/types.ts
+++ b/plugins/tracker-resources/src/types.ts
@@ -102,5 +102,5 @@ export const issuesGroupBySorting: Record<IssuesGrouping, SortingQuery<Issue>> =
   [IssuesGrouping.Priority]: { priority: SortingOrder.Ascending },
   [IssuesGrouping.Project]: { '$lookup.project.label': SortingOrder.Ascending },
   [IssuesGrouping.Sprint]: { '$lookup.sprint.label': SortingOrder.Ascending },
-  [IssuesGrouping.NoGrouping]: {}
+  [IssuesGrouping.NoGrouping]: { rank: SortingOrder.Ascending }
 }
diff --git a/plugins/tracker-resources/src/utils.ts b/plugins/tracker-resources/src/utils.ts
index 0823a9ece0..5833b06cf9 100644
--- a/plugins/tracker-resources/src/utils.ts
+++ b/plugins/tracker-resources/src/utils.ts
@@ -13,24 +13,23 @@
 // limitations under the License.
 //
 
-import { Employee, formatName } from '@hcengineering/contact'
-import { DocumentQuery, Ref, SortingOrder, TxOperations, WithLookup } from '@hcengineering/core'
+import { Doc, DocumentQuery, Ref, SortingOrder, TxOperations, WithLookup } from '@hcengineering/core'
 import { TypeState } from '@hcengineering/kanban'
 import { Asset, IntlString, translate } from '@hcengineering/platform'
+import { createQuery } from '@hcengineering/presentation'
 import {
   Issue,
+  IssuePriority,
   IssuesDateModificationPeriod,
   IssuesGrouping,
   IssuesOrdering,
   IssueStatus,
-  IssueTemplate,
   ProjectStatus,
   Sprint,
   SprintStatus,
   Team,
   TimeReportDayType
 } from '@hcengineering/tracker'
-import { ViewOptionModel } from '@hcengineering/view-resources'
 import {
   AnyComponent,
   AnySvelteComponent,
@@ -39,6 +38,8 @@ import {
   isWeekend,
   MILLISECONDS_IN_WEEK
 } from '@hcengineering/ui'
+import { ViewOptionModel } from '@hcengineering/view'
+import { ListSelectionProvider, SelectDirection } from '@hcengineering/view-resources'
 import tracker from './plugin'
 import { defaultPriorities, defaultProjectStatuses, defaultSprintStatuses, issuePriorities } from './types'
 
@@ -306,92 +307,36 @@ const listIssueStatusOrder = [
   tracker.issueStatusCategory.Canceled
 ] as const
 
-export function getCategories (
-  key: IssuesGroupByKeys | undefined,
-  elements: Array<WithLookup<Issue | IssueTemplate>>,
-  shouldShowAll: boolean,
-  statuses: IssueStatus[],
-  employees: Employee[]
-): any[] {
-  if (key === undefined) {
-    return [undefined] // No grouping
-  }
-  const defaultStatuses = listIssueStatusOrder
-    .map((category) => statuses.filter((status) => status.category === category).map((item) => item._id))
-    .flat()
-
-  const existingCategories = Array.from(new Set(elements.map((x: any) => x[key] ?? undefined)))
-
-  if (shouldShowAll) {
-    if (key === 'status') {
-      return defaultStatuses
-    }
-
-    if (key === 'priority') {
-      return defaultPriorities
-    }
-  }
-
-  if (key === 'status') {
-    existingCategories.sort((s1, s2) => {
-      const i1 = defaultStatuses.findIndex((x) => x === s1)
-      const i2 = defaultStatuses.findIndex((x) => x === s2)
-
-      return i1 - i2
+export async function issueStatusSort (value: Array<Ref<IssueStatus>>): Promise<Array<Ref<IssueStatus>>> {
+  return await new Promise((resolve) => {
+    const query = createQuery(true)
+    query.query(tracker.class.IssueStatus, { _id: { $in: value } }, (res) => {
+      res.sort((a, b) => listIssueStatusOrder.indexOf(a.category) - listIssueStatusOrder.indexOf(b.category))
+      resolve(res.map((p) => p._id))
+      query.unsubscribe()
     })
-  }
+  })
+}
 
-  if (key === 'priority') {
-    existingCategories.sort((p1, p2) => {
-      const i1 = defaultPriorities.findIndex((x) => x === p1)
-      const i2 = defaultPriorities.findIndex((x) => x === p2)
+export async function issuePrioritySort (value: IssuePriority[]): Promise<IssuePriority[]> {
+  value.sort((a, b) => {
+    const i1 = defaultPriorities.indexOf(a)
+    const i2 = defaultPriorities.indexOf(b)
 
-      return i1 - i2
+    return i1 - i2
+  })
+  return value
+}
+
+export async function sprintSort (value: Array<Ref<Sprint>>): Promise<Array<Ref<Sprint>>> {
+  return await new Promise((resolve) => {
+    const query = createQuery(true)
+    query.query(tracker.class.Sprint, { _id: { $in: value } }, (res) => {
+      res.sort((a, b) => (b?.startDate ?? 0) - (a?.startDate ?? 0))
+      resolve(res.map((p) => p._id))
+      query.unsubscribe()
     })
-  }
-
-  if (key === 'sprint') {
-    const sprints = new Map(elements.map((x) => [x.sprint, x.$lookup?.sprint]))
-
-    existingCategories.sort((p1, p2) => {
-      const i1 = sprints.get(p1 as Ref<Sprint>)
-      const i2 = sprints.get(p2 as Ref<Sprint>)
-
-      return (i2?.startDate ?? 0) - (i1?.startDate ?? 0)
-    })
-  }
-
-  if (key === 'assignee') {
-    existingCategories.sort((a1, a2) => {
-      const employeeId1 = a1 as Ref<Employee> | null
-      const employeeId2 = a2 as Ref<Employee> | null
-
-      if (employeeId1 === null && employeeId2 !== null) {
-        return 1
-      }
-
-      if (employeeId1 !== null && employeeId2 === null) {
-        return -1
-      }
-
-      if (employeeId1 !== null && employeeId2 !== null) {
-        const name1 = formatName(employees.find((x) => x?._id === employeeId1)?.name ?? '')
-        const name2 = formatName(employees.find((x) => x?._id === employeeId2)?.name ?? '')
-
-        if (name1 > name2) {
-          return 1
-        } else if (name2 > name1) {
-          return -1
-        }
-
-        return 0
-      }
-
-      return 0
-    })
-  }
-
-  return existingCategories
+  })
 }
 
 export async function getKanbanStatuses (
@@ -506,55 +451,6 @@ export async function getPriorityStates (): Promise<TypeState[]> {
   )
 }
 
-export function getDefaultViewOptionsConfig (subIssuesValue = false): ViewOptionModel[] {
-  const groupByCategory: ViewOptionModel = {
-    key: 'groupBy',
-    label: tracker.string.Grouping,
-    defaultValue: 'status',
-    values: [
-      { id: 'status', label: tracker.string.Status },
-      { id: 'assignee', label: tracker.string.Assignee },
-      { id: 'priority', label: tracker.string.Priority },
-      { id: 'project', label: tracker.string.Project },
-      { id: 'sprint', label: tracker.string.Sprint },
-      { id: 'noGrouping', label: tracker.string.NoGrouping }
-    ],
-    type: 'dropdown'
-  }
-  const orderByCategory: ViewOptionModel = {
-    key: 'orderBy',
-    label: tracker.string.Ordering,
-    defaultValue: 'status',
-    values: [
-      { id: 'status', label: tracker.string.Status },
-      { id: 'modifiedOn', label: tracker.string.LastUpdated },
-      { id: 'priority', label: tracker.string.Priority },
-      { id: 'dueDate', label: tracker.string.DueDate },
-      { id: 'rank', label: tracker.string.Manual }
-    ],
-    type: 'dropdown'
-  }
-  const showSubIssuesCategory: ViewOptionModel = {
-    key: 'shouldShowSubIssues',
-    label: tracker.string.SubIssues,
-    defaultValue: subIssuesValue,
-    type: 'toggle'
-  }
-  const showEmptyGroups: ViewOptionModel = {
-    key: 'shouldShowEmptyGroups',
-    label: tracker.string.ShowEmptyGroups,
-    defaultValue: false,
-    type: 'toggle',
-    hidden: ({ groupBy }) => !['status', 'priority'].includes(groupBy)
-  }
-  const result: ViewOptionModel[] = [groupByCategory, orderByCategory]
-
-  result.push(showSubIssuesCategory)
-
-  result.push(showEmptyGroups)
-  return result
-}
-
 export function getDefaultViewOptionsTemplatesConfig (): ViewOptionModel[] {
   const groupByCategory: ViewOptionModel = {
     key: 'groupBy',
@@ -565,7 +461,7 @@ export function getDefaultViewOptionsTemplatesConfig (): ViewOptionModel[] {
       { id: 'priority', label: tracker.string.Priority },
       { id: 'project', label: tracker.string.Project },
       { id: 'sprint', label: tracker.string.Sprint },
-      { id: 'noGrouping', label: tracker.string.NoGrouping }
+      { id: '#no_category', label: tracker.string.NoGrouping }
     ],
     type: 'dropdown'
   }
@@ -670,3 +566,28 @@ export function getTimeReportDayType (timestamp: number): TimeReportDayType | un
     return TimeReportDayType.PreviousWorkDay
   }
 }
+
+export function subIssueQuery (value: boolean, query: DocumentQuery<Issue>): DocumentQuery<Issue> {
+  return value ? query : { ...query, attachedTo: tracker.ids.NoParent }
+}
+
+export function subIssueListProvider (subIssues: Issue[], target: Ref<Issue>): void {
+  const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {
+    if (dir === 'vertical') {
+      let pos = subIssues.findIndex((p) => p._id === of?._id)
+      pos += offset
+      if (pos < 0) {
+        pos = 0
+      }
+      if (pos >= subIssues.length) {
+        pos = subIssues.length - 1
+      }
+      listProvider.updateFocus(subIssues[pos])
+    }
+  }, false)
+  listProvider.update(subIssues)
+  const selectedIssue = subIssues.find((p) => p._id === target)
+  if (selectedIssue != null) {
+    listProvider.updateFocus(selectedIssue)
+  }
+}
diff --git a/plugins/tracker/src/index.ts b/plugins/tracker/src/index.ts
index db2fce934c..a0231d2346 100644
--- a/plugins/tracker/src/index.ts
+++ b/plugins/tracker/src/index.ts
@@ -93,7 +93,7 @@ export enum IssuesGrouping {
   Priority = 'priority',
   Project = 'project',
   Sprint = 'sprint',
-  NoGrouping = 'noGrouping'
+  NoGrouping = '#no_category'
 }
 
 /**
diff --git a/plugins/view-assets/lang/en.json b/plugins/view-assets/lang/en.json
index 49ea894705..d51744bb3a 100644
--- a/plugins/view-assets/lang/en.json
+++ b/plugins/view-assets/lang/en.json
@@ -49,6 +49,12 @@
     "MatchCriteria": "Match criteria",
     "DontMatchCriteria": "Don't match criteria",
     "View": "View",
-    "MarkupEditor": "Edit of rich content field"
+    "MarkupEditor": "Edit of rich content field",
+    "List": "List",
+    "Select": "Select",
+    "NoGrouping": "No grouping",
+    "Grouping": "Grouping",
+    "Ordering": "Ordering",
+    "Manual": "Manual"
   }
 }
diff --git a/plugins/view-assets/lang/ru.json b/plugins/view-assets/lang/ru.json
index 9d9c53ad70..bda3d1653f 100644
--- a/plugins/view-assets/lang/ru.json
+++ b/plugins/view-assets/lang/ru.json
@@ -47,6 +47,12 @@
     "MatchCriteria": "Соответсвует условию",
     "DontMatchCriteria": "Не соответвует условию",
     "View": "Вид",
-    "MarkupEditor": "Изменение форматированного поля"
+    "MarkupEditor": "Изменение форматированного поля",
+    "List": "Список",
+    "Select": "Выбрать",
+    "NoGrouping": "Нет группировки",
+    "Grouping": "Группировка",
+    "Ordering": "Сортировка",
+    "Manual": "Пользовательский"
   }
 }
diff --git a/plugins/view-resources/src/components/ClassRefPresenter.svelte b/plugins/view-resources/src/components/ClassRefPresenter.svelte
new file mode 100644
index 0000000000..54721d55a8
--- /dev/null
+++ b/plugins/view-resources/src/components/ClassRefPresenter.svelte
@@ -0,0 +1,26 @@
+<!--
+// Copyright © 2022 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 type { Class, Doc, Ref } from '@hcengineering/core'
+  import { getClient } from '@hcengineering/presentation'
+  import { Label } from '@hcengineering/ui'
+
+  export let value: Ref<Class<Doc>>
+
+  const client = getClient()
+  const _class = client.getModel().getObject(value)
+</script>
+
+<Label label={_class.label} />
diff --git a/plugins/view-resources/src/components/FixedColumn.svelte b/plugins/view-resources/src/components/FixedColumn.svelte
index 9d4fc18d58..840d159b08 100644
--- a/plugins/view-resources/src/components/FixedColumn.svelte
+++ b/plugins/view-resources/src/components/FixedColumn.svelte
@@ -21,18 +21,24 @@
   export let key: string
   export let justify: string = ''
   let prevKey = key
+  let element: HTMLDivElement | undefined
 
   let cWidth: number = 0
 
   afterUpdate(() => {
     if (prevKey !== key) {
       $fixedWidthStore[prevKey] = 0
+      $fixedWidthStore[key] = 0
       prevKey = key
+      cWidth = 0
     }
   })
 
-  $: if (cWidth > ($fixedWidthStore[key] ?? 0)) {
-    $fixedWidthStore[key] = cWidth
+  function resize (element: Element) {
+    cWidth = element.clientWidth
+    if (cWidth > ($fixedWidthStore[key] ?? 0)) {
+      $fixedWidthStore[key] = cWidth
+    }
   }
 
   onDestroy(() => {
@@ -41,13 +47,10 @@
 </script>
 
 <div
+  bind:this={element}
   class="flex-no-shrink"
   style="{justify !== '' ? `text-align: ${justify}; ` : ''} min-width: {$fixedWidthStore[key] ?? 0}px;"
-  use:resizeObserver={(element) => {
-    if (element.clientWidth > cWidth) {
-      cWidth = element.clientWidth
-    }
-  }}
+  use:resizeObserver={resize}
 >
   <slot />
 </div>
diff --git a/plugins/view-resources/src/components/ObjectPresenter.svelte b/plugins/view-resources/src/components/ObjectPresenter.svelte
index e11f69a6ea..1404e73b27 100644
--- a/plugins/view-resources/src/components/ObjectPresenter.svelte
+++ b/plugins/view-resources/src/components/ObjectPresenter.svelte
@@ -41,7 +41,7 @@
     (value as Doc)?.space === undefined
   ) {
     docQuery.query(value._class, { _id: value._id }, (r) => {
-      doc = r.shift()
+      ;[doc] = r
     })
   } else if (value?._id !== undefined && value?._class !== undefined && (value as Doc).space !== undefined) {
     docQuery.unsubscribe()
diff --git a/plugins/view-resources/src/components/TableView.svelte b/plugins/view-resources/src/components/TableView.svelte
index 57731fa957..d75e004092 100644
--- a/plugins/view-resources/src/components/TableView.svelte
+++ b/plugins/view-resources/src/components/TableView.svelte
@@ -24,9 +24,6 @@
   export let options: FindOptions<Doc> | undefined = undefined
   export let baseMenuClass: Ref<Class<Doc>> | undefined = undefined
   export let config: string[]
-  export let search: string = ''
-
-  $: resultQuery = search === '' ? { space, ...query } : { $search: search, space, ...query }
 </script>
 
 <ActionContext
@@ -34,4 +31,4 @@
     mode: 'browser'
   }}
 />
-<TableBrowser {_class} {config} {options} query={resultQuery} {baseMenuClass} showNotification />
+<TableBrowser {_class} {config} {options} {query} {baseMenuClass} showNotification />
diff --git a/plugins/view-resources/src/components/UpDownNavigator.svelte b/plugins/view-resources/src/components/UpDownNavigator.svelte
index 9a9113cf75..66e9fda944 100644
--- a/plugins/view-resources/src/components/UpDownNavigator.svelte
+++ b/plugins/view-resources/src/components/UpDownNavigator.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Doc } from '@hcengineering/core'
-  import {
+  import ui, {
     Button,
     IconNavPrev,
     IconDownOutline,
@@ -12,7 +12,6 @@
   import { tick } from 'svelte'
   import { select } from '../actionImpl'
   import { focusStore } from '../selection'
-  import tracker from '../../../tracker-resources/src/plugin'
 
   export let element: Doc
 
@@ -41,7 +40,7 @@
 <Button icon={IconDownOutline} kind={'secondary'} size={'medium'} on:click={(evt) => next(evt, true)} />
 <Button icon={IconUpOutline} kind={'secondary'} size={'medium'} on:click={(evt) => next(evt, false)} />
 <Button
-  showTooltip={{ label: tracker.string.Back, direction: 'bottom' }}
+  showTooltip={{ label: ui.string.Back, direction: 'bottom' }}
   icon={IconNavPrev}
   kind={'secondary'}
   size={'medium'}
diff --git a/plugins/view-resources/src/components/ViewOptions.svelte b/plugins/view-resources/src/components/ViewOptions.svelte
new file mode 100644
index 0000000000..375c6d3503
--- /dev/null
+++ b/plugins/view-resources/src/components/ViewOptions.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+  import { getClient } from '@hcengineering/presentation'
+  import { DropdownLabelsIntl, Label, MiniToggle } from '@hcengineering/ui'
+  import { Viewlet, ViewOptions, ViewOptionsModel } from '@hcengineering/view'
+  import { createEventDispatcher } from 'svelte'
+  import view from '../plugin'
+  import { buildConfigLookup, getKeyLabel } from '../utils'
+  import { isDropdownType, isToggleType, noCategory } from '../viewOptions'
+
+  export let viewlet: Viewlet
+  export let config: ViewOptionsModel
+  export let viewOptions: ViewOptions
+
+  const dispatch = createEventDispatcher()
+
+  const client = getClient()
+  const hierarchy = client.getHierarchy()
+  const lookup = buildConfigLookup(hierarchy, viewlet.attachTo, viewlet.config)
+
+  const groupBy = config.groupBy
+    .map((p) => {
+      return {
+        id: p,
+        label: getKeyLabel(client, viewlet.attachTo, p, lookup)
+      }
+    })
+    .concat({ id: noCategory, label: view.string.NoGrouping })
+
+  const orderBy = config.orderBy.map((p) => {
+    const key = p[0]
+    return {
+      id: key,
+      label: key === 'rank' ? view.string.Manual : getKeyLabel(client, viewlet.attachTo, key, lookup)
+    }
+  })
+</script>
+
+<div class="antiCard">
+  <div class="antiCard-group grid">
+    <span class="label"><Label label={view.string.Grouping} /></span>
+    <div class="value">
+      <DropdownLabelsIntl
+        label={view.string.Grouping}
+        items={groupBy}
+        selected={viewOptions.groupBy}
+        width="10rem"
+        justify="left"
+        on:selected={(e) => dispatch('update', { key: 'groupBy', value: e.detail })}
+      />
+    </div>
+    <span class="label"><Label label={view.string.Ordering} /></span>
+    <div class="value">
+      <DropdownLabelsIntl
+        label={view.string.Ordering}
+        items={orderBy}
+        selected={viewOptions.orderBy[0]}
+        width="10rem"
+        justify="left"
+        on:selected={(e) => {
+          const key = e.detail
+          const value = config.orderBy.find((p) => p[0] === key)
+          if (value !== undefined) {
+            dispatch('update', { key: 'orderBy', value })
+          }
+        }}
+      />
+    </div>
+    {#each config.other as model}
+      <span class="label"><Label label={model.label} /></span>
+      <div class="value">
+        {#if isToggleType(model)}
+          <MiniToggle
+            on={viewOptions[model.key]}
+            on:change={() => dispatch('update', { key: model.key, value: !viewOptions[model.key] })}
+          />
+        {:else if isDropdownType(model)}
+          {@const items = model.values.filter(({ hidden }) => !hidden?.(viewOptions))}
+          <DropdownLabelsIntl
+            label={model.label}
+            {items}
+            selected={viewOptions[model.key]}
+            width="10rem"
+            justify="left"
+            on:selected={(e) => dispatch('update', { key: model.key, value: e.detail })}
+          />
+        {/if}
+      </div>
+    {/each}
+    <slot name="extra" />
+  </div>
+</div>
diff --git a/plugins/view-resources/src/components/ViewOptionsButton.svelte b/plugins/view-resources/src/components/ViewOptionsButton.svelte
deleted file mode 100644
index 428bd25321..0000000000
--- a/plugins/view-resources/src/components/ViewOptionsButton.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<!--
-// Copyright © 2022 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 { Button, eventToHTMLElement, IconDownOutline, showPopup, Label } from '@hcengineering/ui'
-  import view from '@hcengineering/view'
-  import ViewOptionsPopup from './ViewOptionsPopup.svelte'
-  import { getViewOptions, setViewOptions, viewOptionsStore, ViewOptionModel } from '../viewOptions'
-
-  export let config: ViewOptionModel[]
-  export let viewOptionsKey: string
-
-  $: loadViewOptionsStore(config, viewOptionsKey)
-
-  function loadViewOptionsStore (config: ViewOptionModel[], key: string) {
-    viewOptionsStore.set(
-      config.reduce(
-        (options, { key, defaultValue }) => ({ [key]: defaultValue, ...options }),
-        getViewOptions(key) ?? {}
-      )
-    )
-  }
-
-  const handleOptionsEditorOpened = (event: MouseEvent) => {
-    showPopup(
-      ViewOptionsPopup,
-      { config, viewOptions: $viewOptionsStore },
-      eventToHTMLElement(event),
-      undefined,
-      (result) => {
-        if (result?.key === undefined) return
-        $viewOptionsStore[result.key] = result.value
-        setViewOptions(viewOptionsKey, $viewOptionsStore)
-      }
-    )
-  }
-</script>
-
-<Button
-  icon={view.icon.ViewButton}
-  kind={'secondary'}
-  size={'small'}
-  showTooltip={{ label: view.string.CustomizeView }}
-  on:click={handleOptionsEditorOpened}
->
-  <svelte:fragment slot="content">
-    <div class="flex-row-center clear-mins pointer-events-none">
-      <span class="text-sm font-medium"><Label label={view.string.View} /></span>
-      <div class="icon"><IconDownOutline size={'full'} /></div>
-    </div>
-  </svelte:fragment>
-</Button>
-
-<style lang="scss">
-  .icon {
-    margin-left: 0.25rem;
-    width: 0.875rem;
-    height: 0.875rem;
-    color: var(--content-color);
-  }
-</style>
diff --git a/plugins/view-resources/src/components/ViewOptionsPopup.svelte b/plugins/view-resources/src/components/ViewOptionsPopup.svelte
deleted file mode 100644
index 1b2cbd7ee6..0000000000
--- a/plugins/view-resources/src/components/ViewOptionsPopup.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script lang="ts">
-  import { DropdownLabelsIntl, MiniToggle, Label } from '@hcengineering/ui'
-  import { createEventDispatcher } from 'svelte'
-  import { isDropdownType, isToggleType, ViewOptions, ViewOptionModel } from '../viewOptions'
-
-  export let config: ViewOptionModel[]
-  export let viewOptions: ViewOptions
-
-  const dispatch = createEventDispatcher()
-</script>
-
-<div class="antiCard">
-  <div class="antiCard-group grid">
-    {#each config as model}
-      <span class="label"><Label label={model.label} /></span>
-      <div class="value">
-        {#if isToggleType(model)}
-          <MiniToggle
-            on={viewOptions[model.key]}
-            on:change={() => dispatch('update', { key: model.key, value: !viewOptions[model.key] })}
-          />
-        {:else if isDropdownType(model)}
-          {@const items = model.values.filter(({ hidden }) => !hidden?.(viewOptions))}
-          <DropdownLabelsIntl
-            label={model.label}
-            {items}
-            selected={viewOptions[model.key]}
-            width="10rem"
-            justify="left"
-            on:selected={(e) => dispatch('update', { key: model.key, value: e.detail })}
-          />
-        {/if}
-      </div>
-    {/each}
-    <slot name="extra" />
-  </div>
-</div>
diff --git a/plugins/view-resources/src/components/ViewletSetting.svelte b/plugins/view-resources/src/components/ViewletSetting.svelte
index 671a946fe1..4544e84545 100644
--- a/plugins/view-resources/src/components/ViewletSetting.svelte
+++ b/plugins/view-resources/src/components/ViewletSetting.svelte
@@ -13,16 +13,16 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import core, { AnyAttribute, ArrOf, Class, Doc, Lookup, Ref, Type } from '@hcengineering/core'
+  import core, { AnyAttribute, ArrOf, Class, Doc, Ref, Type } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
   import preferencePlugin from '@hcengineering/preference'
   import presentation, { Card, createQuery, getAttributePresenterClass, getClient } from '@hcengineering/presentation'
   import { Button, getPlatformColorForText, ToggleButton } from '@hcengineering/ui'
-  import { BuildModelKey, Viewlet, ViewletPreference } from '@hcengineering/view'
+  import { Viewlet, ViewletPreference } from '@hcengineering/view'
   import { deepEqual } from 'fast-equals'
   import { createEventDispatcher } from 'svelte'
   import view from '../plugin'
-  import { buildConfigLookup, getLookupClass, getLookupLabel, getLookupProperty } from '../utils'
+  import { buildConfigLookup, getKeyLabel } from '../utils'
 
   export let viewlet: Viewlet
 
@@ -53,7 +53,7 @@
   interface AttributeConfig {
     enabled: boolean
     label: IntlString
-    value: string | BuildModelKey
+    value: string
     _class: Ref<Class<Doc>>
   }
 
@@ -78,17 +78,21 @@
           result.push({
             value: param,
             enabled: true,
-            label: getKeyLabel(viewlet.attachTo, param, lookup),
+            label: getKeyLabel(client, viewlet.attachTo, param, lookup),
             _class: viewlet.attachTo
           })
         }
       } else {
-        result.push({
-          value: param,
-          label: param.label as IntlString,
-          enabled: true,
-          _class: viewlet.attachTo
-        })
+        if (param.key.length === 0) {
+          result.push(getObjectConfig(viewlet.attachTo, param.key))
+        } else {
+          result.push({
+            value: param.key,
+            label: param.label ?? getKeyLabel(client, viewlet.attachTo, param.key, lookup),
+            enabled: true,
+            _class: viewlet.attachTo
+          })
+        }
       }
     }
     return result
@@ -110,13 +114,19 @@
     if (hierarchy.isDerived(attribute.type._class, core.class.Collection)) return
     const value = getValue(attribute.name, attribute.type)
     if (result.findIndex((p) => p.value === value) !== -1) return
-    const typeClassId = getAttributePresenterClass(hierarchy, attribute).attrClass
-    const typeClass = hierarchy.getClass(typeClassId)
-    let presenter = hierarchy.as(typeClass, view.mixin.AttributePresenter).presenter
+    const { attrClass, category } = getAttributePresenterClass(hierarchy, attribute)
+    const typeClass = hierarchy.getClass(attrClass)
+    const mixin =
+      category === 'object'
+        ? view.mixin.ObjectPresenter
+        : category === 'collection'
+          ? view.mixin.CollectionPresenter
+          : view.mixin.AttributePresenter
+    let presenter = hierarchy.as(typeClass, mixin).presenter
     let parent = typeClass.extends
     while (presenter === undefined && parent !== undefined) {
       const pclazz = hierarchy.getClass(parent)
-      presenter = hierarchy.as(pclazz, view.mixin.AttributePresenter).presenter
+      presenter = hierarchy.as(pclazz, mixin).presenter
       parent = pclazz.extends
     }
     if (presenter === undefined) return
@@ -128,7 +138,7 @@
         enabled: false,
         _class: attribute.attributeOf
       }
-      if (result.find((it) => it._class === newValue._class && it.value === newValue.value) === undefined) {
+      if (!isExist(result, newValue)) {
         result.push(newValue)
       }
     } else {
@@ -138,11 +148,22 @@
         enabled: false,
         _class: attribute.attributeOf
       }
-      if (result.find((it) => it._class === newValue._class && it.value === newValue.value) === undefined) {
+      if (!isExist(result, newValue)) {
         result.push(newValue)
       }
     }
   }
+
+  function isExist (result: AttributeConfig[], newValue: AttributeConfig): boolean {
+    for (const res of result) {
+      if (res._class !== newValue._class) continue
+      if (typeof res.value === 'string') {
+        if (res.value === newValue.value) return true
+      }
+    }
+    return false
+  }
+
   function getConfig (viewlet: Viewlet, preference: ViewletPreference | undefined): AttributeConfig[] {
     const result = getBaseConfig(viewlet)
 
@@ -181,18 +202,6 @@
     attributes = getConfig(viewlet, undefined)
   }
 
-  function getKeyLabel<T extends Doc> (_class: Ref<Class<T>>, key: string, lookup: Lookup<T> | undefined): IntlString {
-    if (key.startsWith('$lookup') && lookup !== undefined) {
-      const lookupClass = getLookupClass(key, lookup, _class)
-      const lookupProperty = getLookupProperty(key)
-      const lookupKey = { key: lookupProperty[0] }
-      return getLookupLabel(client, lookupClass[1], lookupClass[0], lookupKey, lookupProperty[1])
-    } else {
-      const attribute = hierarchy.getAttribute(_class, key)
-      return attribute.label
-    }
-  }
-
   function setStatus (result: AttributeConfig[], preference: ViewletPreference): AttributeConfig[] {
     for (const key of result) {
       key.enabled = preference.config.findIndex((p) => deepEqual(p, key.value)) !== -1
diff --git a/plugins/view-resources/src/components/ViewletSettingButton.svelte b/plugins/view-resources/src/components/ViewletSettingButton.svelte
index 986bea4b9c..d7ef969fa0 100644
--- a/plugins/view-resources/src/components/ViewletSettingButton.svelte
+++ b/plugins/view-resources/src/components/ViewletSettingButton.svelte
@@ -13,14 +13,42 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Button, showPopup, IconDownOutline, Label } from '@hcengineering/ui'
-  import { Viewlet } from '@hcengineering/view'
-  import ViewletSetting from './ViewletSetting.svelte'
+  import { Button, eventToHTMLElement, IconDownOutline, Label, showPopup } from '@hcengineering/ui'
+  import { Viewlet, ViewOptionsModel } from '@hcengineering/view'
   import view from '../plugin'
+  import { defaulOptions, getViewOptions, setViewOptions, viewOptionsStore } from '../viewOptions'
+  import ViewletSetting from './ViewletSetting.svelte'
+  import ViewOptions from './ViewOptions.svelte'
 
   export let viewlet: Viewlet | undefined
 
   let btn: HTMLButtonElement
+
+  $: viewlet && loadViewOptionsStore(viewlet.viewOptions, viewlet._id)
+
+  function loadViewOptionsStore (config: ViewOptionsModel | undefined, key: string) {
+    if (!config) return
+    viewOptionsStore.set(getViewOptions(key) ?? defaulOptions)
+  }
+
+  function clickHandler (event: MouseEvent) {
+    if (viewlet?.viewOptions !== undefined) {
+      showPopup(
+        ViewOptions,
+        { viewlet, config: viewlet.viewOptions, viewOptions: $viewOptionsStore },
+        eventToHTMLElement(event),
+        undefined,
+        (result) => {
+          if (result?.key === undefined) return
+          $viewOptionsStore[result.key] = result.value
+          viewOptionsStore.set($viewOptionsStore)
+          setViewOptions(viewlet?._id ?? '', $viewOptionsStore)
+        }
+      )
+    } else {
+      showPopup(ViewletSetting, { viewlet }, btn)
+    }
+  }
 </script>
 
 {#if viewlet}
@@ -30,9 +58,7 @@
     size={'small'}
     showTooltip={{ label: view.string.CustomizeView }}
     bind:input={btn}
-    on:click={() => {
-      showPopup(ViewletSetting, { viewlet }, btn)
-    }}
+    on:click={clickHandler}
   >
     <svelte:fragment slot="content">
       <div class="flex-row-center clear-mins pointer-events-none">
diff --git a/plugins/tracker-resources/src/components/issues/GrowPresenter.svelte b/plugins/view-resources/src/components/list/GrowPresenter.svelte
similarity index 100%
rename from plugins/tracker-resources/src/components/issues/GrowPresenter.svelte
rename to plugins/view-resources/src/components/list/GrowPresenter.svelte
diff --git a/plugins/view-resources/src/components/list/List.svelte b/plugins/view-resources/src/components/list/List.svelte
new file mode 100644
index 0000000000..4a03f05563
--- /dev/null
+++ b/plugins/view-resources/src/components/list/List.svelte
@@ -0,0 +1,211 @@
+<!--
+// Copyright © 2023 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 core, { Class, Doc, DocumentQuery, FindOptions, Ref, Space } from '@hcengineering/core'
+  import { getResource, IntlString } from '@hcengineering/platform'
+  import { createQuery, getClient } from '@hcengineering/presentation'
+  import { AnyComponent } from '@hcengineering/ui'
+  import view, {
+    AttributeModel,
+    BuildModelKey,
+    ViewOptionModel,
+    ViewOptions,
+    ViewQueryOption
+  } from '@hcengineering/view'
+  import { createEventDispatcher } from 'svelte'
+  import { buildConfigLookup, buildModel, getCategories, getPresenter, groupBy, LoadingProps } from '../../utils'
+  import { noCategory, viewOptionsStore } from '../../viewOptions'
+  import ListCategory from './ListCategory.svelte'
+
+  export let _class: Ref<Class<Doc>>
+  export let space: Ref<Space> | undefined = undefined
+  export let query: DocumentQuery<Doc> = {}
+  export let options: FindOptions<Doc> | undefined = undefined
+  export let baseMenuClass: Ref<Class<Doc>> | undefined = undefined
+  export let config: (string | BuildModelKey)[]
+  export let selectedObjectIds: Doc[] = []
+  export let selectedRowIndex: number | undefined = undefined
+  export let loadingProps: LoadingProps | undefined = undefined
+  export let createItemDialog: AnyComponent | undefined
+  export let createItemLabel: IntlString | undefined
+  export let viewOptions: ViewOptionModel[] | undefined
+
+  const objectRefs: HTMLElement[] = []
+  let docs: Doc[] = []
+  $: groupByKey = $viewOptionsStore.groupBy ?? noCategory
+  $: orderBy = $viewOptionsStore.orderBy
+  $: groupedDocs = groupBy(docs, groupByKey)
+  let categories: any[] = []
+  $: getCategories(client, _class, docs, groupByKey).then((p) => (categories = p))
+
+  const docsQuery = createQuery()
+  $: resultOptions = { lookup, ...options, sort: { [orderBy[0]]: orderBy[1] } }
+
+  let resultQuery: DocumentQuery<Doc> = query
+  $: getResultQuery(query, viewOptions, $viewOptionsStore).then((p) => (resultQuery = p))
+
+  $: docsQuery.query(
+    _class,
+    resultQuery,
+    (res) => {
+      docs = res
+      dispatch('content', docs)
+    },
+    resultOptions
+  )
+
+  const dispatch = createEventDispatcher()
+
+  const client = getClient()
+  const hierarchy = client.getHierarchy()
+
+  $: lookup = options?.lookup ?? buildConfigLookup(client.getHierarchy(), _class, config)
+
+  const spaceQuery = createQuery()
+
+  let currentSpace: Space | undefined
+  let itemModels: AttributeModel[]
+
+  async function getResultQuery (
+    query: DocumentQuery<Doc>,
+    viewOptions: ViewOptionModel[] | undefined,
+    viewOptionsStore: ViewOptions
+  ): Promise<DocumentQuery<Doc>> {
+    if (viewOptions === undefined) return query
+    let result = hierarchy.clone(query)
+    for (const viewOption of viewOptions) {
+      if (viewOption.actionTartget !== 'query') continue
+      const queryOption = viewOption as ViewQueryOption
+      const f = await getResource(queryOption.action)
+      result = f(viewOptionsStore[queryOption.key] ?? queryOption.defaultValue, query)
+    }
+    return result
+  }
+
+  const getLoadingElementsLength = (props: LoadingProps | undefined, options?: FindOptions<Doc>) => {
+    if (!props) return undefined
+    if (options?.limit && options.limit > 0) {
+      return Math.min(options.limit, props.length)
+    }
+
+    return props.length
+  }
+
+  $: spaceQuery.query(core.class.Space, { _id: space }, (res) => {
+    ;[currentSpace] = res
+  })
+
+  function getHeader (_class: Ref<Class<Doc>>, groupByKey: string): void {
+    if (groupByKey === noCategory) {
+      headerComponent = undefined
+    } else {
+      getPresenter(client, _class, { key: groupByKey }, { key: groupByKey }).then((p) => (headerComponent = p))
+    }
+  }
+
+  let headerComponent: AttributeModel | undefined
+  $: getHeader(_class, groupByKey)
+  $: buildModel({ client, _class, keys: config, lookup }).then((res) => (itemModels = res))
+
+  function getInitIndex (categories: any, i: number): number {
+    let res = 0
+    for (let index = 0; index < i; index++) {
+      const cat = categories[index]
+      res += groupedDocs[cat].length
+    }
+    return res
+  }
+
+  function uncheckAll () {
+    dispatch('check', { docs, value: false })
+    selectedObjectIds = []
+  }
+
+  $: extraHeaders = getAdditionalHeader(_class)
+
+  function getAdditionalHeader (_class: Ref<Class<Doc>>): AnyComponent[] | undefined {
+    const clazz = hierarchy.getClass(_class)
+    let mixinClazz = hierarchy.getClass(_class)
+    let presenterMixin = hierarchy.as(clazz, view.mixin.ListHeaderExtra)
+    while (presenterMixin.presenters === undefined && mixinClazz.extends !== undefined) {
+      presenterMixin = hierarchy.as(mixinClazz, view.mixin.ListHeaderExtra)
+      mixinClazz = hierarchy.getClass(mixinClazz.extends)
+    }
+    return presenterMixin.presenters
+  }
+
+  $: flat = Object.values(groupedDocs).flat(1)
+
+  export function select (offset: 1 | -1 | 0, of?: Doc): void {
+    let pos = (of !== undefined ? flat.findIndex((it) => it._id === of._id) : selectedRowIndex) ?? -1
+    pos += offset
+    if (pos < 0) {
+      pos = 0
+    }
+    if (pos >= flat.length) {
+      pos = flat.length - 1
+    }
+    const r = objectRefs[pos]
+    selectedRowIndex = pos
+    onRow(flat[pos])
+    if (r !== undefined) {
+      r?.scrollIntoView({ behavior: 'auto', block: 'nearest' })
+    }
+  }
+
+  function onRow (object: Doc): void {
+    dispatch('row-focus', object)
+  }
+
+  $: objectRefs.length = flat.length
+</script>
+
+<div class="list-container">
+  {#each categories as category, i}
+    {@const items = groupedDocs[category] ?? []}
+    <ListCategory
+      bind:selectedRowIndex
+      {extraHeaders}
+      {space}
+      {selectedObjectIds}
+      {headerComponent}
+      initIndex={getInitIndex(categories, i)}
+      {baseMenuClass}
+      {groupByKey}
+      {itemModels}
+      singleCat={categories.length === 1}
+      {category}
+      {items}
+      {createItemDialog}
+      {createItemLabel}
+      loadingPropsLength={getLoadingElementsLength(loadingProps, options)}
+      on:check
+      on:uncheckAll={uncheckAll}
+      on:row-focus
+    />
+  {/each}
+</div>
+
+<style lang="scss">
+  .list-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: max-content;
+    min-width: auto;
+    min-height: auto;
+  }
+</style>
diff --git a/plugins/view-resources/src/components/list/ListCategory.svelte b/plugins/view-resources/src/components/list/ListCategory.svelte
new file mode 100644
index 0000000000..9aced6c6e6
--- /dev/null
+++ b/plugins/view-resources/src/components/list/ListCategory.svelte
@@ -0,0 +1,140 @@
+<!--
+// Copyright © 2023 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 { Class, Doc, Ref, Space } from '@hcengineering/core'
+  import { IntlString } from '@hcengineering/platform'
+  import {
+    AnyComponent,
+    CheckBox,
+    ExpandCollapse,
+    getEventPositionElement,
+    showPopup,
+    Spinner
+  } from '@hcengineering/ui'
+  import { AttributeModel } from '@hcengineering/view'
+  import { createEventDispatcher } from 'svelte'
+  import Menu from '../Menu.svelte'
+  import ListHeader from './ListHeader.svelte'
+  import ListItem from './ListItem.svelte'
+
+  export let category: any
+  export let headerComponent: AttributeModel | undefined
+  export let singleCat: boolean
+  export let groupByKey: string
+  export let space: Ref<Space> | undefined
+  export let baseMenuClass: Ref<Class<Doc>> | undefined
+  export let items: Doc[]
+  export let initIndex: number
+  export let createItemDialog: AnyComponent | undefined
+  export let createItemLabel: IntlString | undefined
+  export let loadingPropsLength: number | undefined
+  export let selectedObjectIds: Doc[]
+  export let itemModels: AttributeModel[]
+  export let selectedRowIndex: number | undefined
+  export let extraHeaders: AnyComponent[] | undefined
+  export let objectRefs: HTMLElement[] = []
+
+  const autoFoldLimit = 20
+  const defaultLimit = 20
+  const singleCategoryLimit = 200
+  $: initialLimit = singleCat ? singleCategoryLimit : defaultLimit
+  $: limit = initialLimit
+
+  const dispatch = createEventDispatcher()
+
+  function limitGroup (items: Doc[], limit: number): Doc[] {
+    return items.slice(0, limit)
+  }
+
+  const handleRowFocused = (object: Doc) => {
+    dispatch('row-focus', object)
+  }
+
+  const handleMenuOpened = async (event: MouseEvent, object: Doc, rowIndex: number) => {
+    event.preventDefault()
+    selectedRowIndex = rowIndex
+
+    if (!selectedObjectIdsSet.has(object._id)) {
+      dispatch('uncheckAll')
+    }
+
+    const items = selectedObjectIds.length > 0 ? selectedObjectIds : object
+
+    showPopup(Menu, { object: items, baseMenuClass }, getEventPositionElement(event), () => {
+      selectedRowIndex = undefined
+    })
+  }
+
+  $: collapsed = !singleCat && items.length > autoFoldLimit
+  $: limited = limitGroup(items, limit)
+  $: selectedObjectIdsSet = new Set<Ref<Doc>>(selectedObjectIds.map((it) => it._id))
+</script>
+
+<ListHeader
+  {groupByKey}
+  {category}
+  {space}
+  limited={limited.length}
+  {items}
+  {headerComponent}
+  {createItemDialog}
+  {createItemLabel}
+  {extraHeaders}
+  on:more={() => {
+    limit += 20
+  }}
+  on:collapse={() => {
+    collapsed = !collapsed
+  }}
+/>
+<ExpandCollapse isExpanded={!collapsed} duration={400}>
+  {#if itemModels}
+    {#if limited}
+      {#each limited as docObject, i (docObject._id)}
+        <ListItem
+          bind:use={objectRefs[initIndex + i]}
+          {docObject}
+          model={itemModels}
+          {groupByKey}
+          selected={selectedRowIndex === initIndex + i}
+          checked={selectedObjectIdsSet.has(docObject._id)}
+          on:check={(ev) => dispatch('check', { docs: ev.detail.docs, value: ev.detail.value })}
+          on:contextmenu={(event) => handleMenuOpened(event, docObject, initIndex + i)}
+          on:focus={() => {}}
+          on:mouseover={() => handleRowFocused(docObject)}
+        />
+      {/each}
+    {/if}
+  {:else if loadingPropsLength !== undefined}
+    {#each Array(Math.max(loadingPropsLength, limit)) as _, rowIndex}
+      <div class="listGrid row" class:fixed={rowIndex === selectedRowIndex}>
+        <div class="flex-center clear-mins h-full">
+          <div class="gridElement">
+            <CheckBox checked={false} />
+            <div class="ml-4">
+              <Spinner size="small" />
+            </div>
+          </div>
+        </div>
+      </div>
+    {/each}
+  {/if}
+</ExpandCollapse>
+
+<style lang="scss">
+  .row:not(:last-child) {
+    border-bottom: 1px solid var(--accent-bg-color);
+  }
+</style>
diff --git a/plugins/view-resources/src/components/list/ListHeader.svelte b/plugins/view-resources/src/components/list/ListHeader.svelte
new file mode 100644
index 0000000000..414ab6530d
--- /dev/null
+++ b/plugins/view-resources/src/components/list/ListHeader.svelte
@@ -0,0 +1,135 @@
+<!--
+// Copyright © 2023 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 { IntlString } from '@hcengineering/platform'
+  import ui, {
+    ActionIcon,
+    AnyComponent,
+    Button,
+    Component,
+    eventToHTMLElement,
+    IconAdd,
+    IconMoreH,
+    Label,
+    showPopup
+  } from '@hcengineering/ui'
+  import { createEventDispatcher } from 'svelte'
+  import { noCategory } from '../../viewOptions'
+  import FixedColumn from '../FixedColumn.svelte'
+  import view from '../../plugin'
+  import { Doc, Ref, Space } from '@hcengineering/core'
+  import { AttributeModel } from '@hcengineering/view'
+
+  export let groupByKey: string
+  export let category: any
+  export let headerComponent: AttributeModel | undefined
+  export let space: Ref<Space> | undefined
+  export let createItemDialog: AnyComponent | undefined
+  export let createItemLabel: IntlString | undefined
+  export let limited: number
+  export let items: Doc[]
+  export let extraHeaders: AnyComponent[] | undefined
+
+  const dispatch = createEventDispatcher()
+
+  const handleCreateItem = (event: MouseEvent, category: string) => {
+    if (createItemDialog === undefined) return
+    showPopup(createItemDialog, { space, ...(groupByKey ? { [groupByKey]: category } : {}) }, eventToHTMLElement(event))
+  }
+</script>
+
+{#if headerComponent || groupByKey === noCategory}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div class="flex-between categoryHeader row" on:click={() => dispatch('collapse')}>
+    <div class="flex-row-center gap-2 clear-mins caption-color">
+      <FixedColumn key={`list_groupBy_${groupByKey}`} justify={'left'}>
+        {#if groupByKey === noCategory}
+          <span class="text-base fs-bold overflow-label content-accent-color pointer-events-none">
+            <Label label={view.string.NoGrouping} />
+          </span>
+        {:else if headerComponent}
+          <svelte:component this={headerComponent.presenter} value={category} {space} kind={'list-header'} />
+        {/if}
+      </FixedColumn>
+      {#if extraHeaders}
+        {#each extraHeaders as extra}
+          <FixedColumn key={`list_groupBy_${groupByKey}_extra_${extra}`} justify={'left'}>
+            <Component is={extra} props={{ value: category, docs: items }} />
+          </FixedColumn>
+        {/each}
+      {/if}
+      {#if limited < items.length}
+        <div class="counter">
+          {limited}
+          <div class="text-xs mx-1">/</div>
+          {items.length}
+        </div>
+        <ActionIcon
+          size={'small'}
+          icon={IconMoreH}
+          label={ui.string.ShowMore}
+          action={() => {
+            dispatch('more')
+          }}
+        />
+      {:else}
+        <span class="counter">{items.length}</span>
+      {/if}
+    </div>
+    {#if createItemDialog !== undefined && createItemLabel !== undefined}
+      <Button
+        icon={IconAdd}
+        kind={'transparent'}
+        showTooltip={{ label: createItemLabel }}
+        on:click={(event) => handleCreateItem(event, category)}
+      />
+    {/if}
+  </div>
+{/if}
+
+<style lang="scss">
+  .categoryHeader {
+    position: sticky;
+    top: 0;
+    padding: 0 0.75rem 0 2.25rem;
+    height: 3rem;
+    min-height: 3rem;
+    min-width: 0;
+    background: var(--header-bg-color);
+    z-index: 5;
+  }
+
+  .row:not(:last-child) {
+    border-bottom: 1px solid var(--accent-bg-color);
+  }
+
+  .counter {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-shrink: 0;
+    margin-left: 1rem;
+    padding: 0.25rem 0.5rem;
+    min-width: 1.325rem;
+    text-align: center;
+    font-weight: 500;
+    font-size: 1rem;
+    line-height: 1rem;
+    color: var(--accent-color);
+    background-color: var(--body-color);
+    border: 1px solid var(--divider-color);
+    border-radius: 1rem;
+  }
+</style>
diff --git a/plugins/view-resources/src/components/list/ListItem.svelte b/plugins/view-resources/src/components/list/ListItem.svelte
new file mode 100644
index 0000000000..2e66c6b42a
--- /dev/null
+++ b/plugins/view-resources/src/components/list/ListItem.svelte
@@ -0,0 +1,223 @@
+<!--
+// Copyright © 2022 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 { Doc, getObjectValue } from '@hcengineering/core'
+  import notification from '@hcengineering/notification'
+  import { CheckBox, Component, deviceOptionsStore as deviceInfo, tooltip } from '@hcengineering/ui'
+  import { AttributeModel } from '@hcengineering/view'
+  import { createEventDispatcher } from 'svelte'
+  import { FixedColumn } from '../..'
+  import view from '../../plugin'
+  import Circles from '../icons/Circles.svelte'
+
+  export let use: HTMLElement
+  export let docObject: Doc
+  export let model: AttributeModel[]
+  export let groupByKey: string | undefined
+  export let checked: boolean
+  export let selected: boolean
+
+  const dispatch = createEventDispatcher()
+
+  $: compactMode = $deviceInfo.twoRows
+</script>
+
+<div
+  bind:this={use}
+  class="listGrid antiList__row row gap-2 flex-grow"
+  class:checking={checked}
+  class:mListGridFixed={selected}
+  class:mListGridSelected={selected}
+  on:contextmenu
+  on:focus
+  on:mouseover
+>
+  <div class="flex-center relative" use:tooltip={{ label: view.string.Select, direction: 'bottom' }}>
+    <div class="antiList-cells__notifyCell">
+      <div class="antiList-cells__checkCell">
+        <CheckBox
+          {checked}
+          on:value={(event) => {
+            dispatch('check', { docs: [docObject], value: event.detail })
+          }}
+        />
+      </div>
+      <Component
+        is={notification.component.NotificationPresenter}
+        showLoading={false}
+        props={{ value: docObject, kind: 'table' }}
+      />
+    </div>
+  </div>
+  {#each model as attributeModel}
+    {#if attributeModel.props?.type === 'grow'}
+      <svelte:component this={attributeModel.presenter} />
+    {:else if (!groupByKey || attributeModel.props?.excludeByKey !== groupByKey) && !(attributeModel.props?.optional && compactMode)}
+      {#if attributeModel.props?.fixed}
+        <FixedColumn key={`list_item_${attributeModel.key}`} justify={attributeModel.props.fixed}>
+          <svelte:component
+            this={attributeModel.presenter}
+            value={getObjectValue(attributeModel.key, docObject) ?? ''}
+            object={docObject}
+            kind={'list'}
+            {...attributeModel.props}
+          />
+        </FixedColumn>
+      {:else}
+        <svelte:component
+          this={attributeModel.presenter}
+          value={getObjectValue(attributeModel.key, docObject) ?? ''}
+          object={docObject}
+          kind={'list'}
+          {...attributeModel.props}
+        />
+      {/if}
+    {/if}
+  {/each}
+  {#if compactMode}
+    <div class="panel-trigger" tabindex="-1">
+      <Circles />
+      <div class="space" />
+      <Circles />
+    </div>
+    <div class="hidden-panel" tabindex="-1">
+      <div class="header">
+        <Circles />
+        <div class="space" />
+        <Circles />
+      </div>
+      <div class="scroll-box gap-2">
+        {#each model as attributeModel}
+          {@const value = getObjectValue(attributeModel.key, docObject)}
+          {#if attributeModel.props?.optional && attributeModel.props?.excludeByKey !== groupByKey && value !== undefined}
+            <svelte:component
+              this={attributeModel.presenter}
+              value={value ?? ''}
+              objectId={docObject._id}
+              groupBy={groupByKey}
+              {...attributeModel.props}
+            />
+          {/if}
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .row:not(:last-child) {
+    border-bottom: 1px solid var(--accent-bg-color);
+  }
+
+  .listGrid {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0 0.75rem 0 0.875rem;
+    width: 100%;
+    height: 2.75rem;
+    min-height: 2.75rem;
+    color: var(--theme-caption-color);
+
+    &.checking {
+      background-color: var(--highlight-select);
+      border-bottom-color: var(--highlight-select);
+
+      &:hover {
+        background-color: var(--highlight-select-hover);
+        border-bottom-color: var(--highlight-select-hover);
+      }
+    }
+
+    &.mListGridSelected {
+      background-color: var(--highlight-hover);
+    }
+
+    .hidden-panel,
+    .panel-trigger {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      top: 0;
+      bottom: 0;
+      height: 100%;
+    }
+    .hidden-panel {
+      overflow: hidden;
+      right: 0;
+      width: 80%;
+      background-color: var(--accent-bg-color);
+      opacity: 0;
+      pointer-events: none;
+      z-index: 2;
+      transition-property: opacity, width;
+      transition-duration: 0.15s;
+      transition-timing-function: var(--timing-main);
+
+      .header {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin: 0 0.25rem;
+        width: 0.375rem;
+        min-width: 0.375rem;
+        height: 100%;
+        opacity: 0.25;
+      }
+      .scroll-box {
+        overflow: auto visible;
+        display: flex;
+        align-items: center;
+        margin: 0.125rem 0.25rem 0;
+        padding: 0.25rem 0.25rem;
+        min-width: 0;
+
+        &::-webkit-scrollbar:horizontal {
+          height: 3px;
+        }
+      }
+    }
+    .panel-trigger {
+      flex-direction: column;
+      justify-content: center;
+      padding: 0 0.125rem;
+      right: 2.5rem;
+      width: 0.75rem;
+      border: 1px solid transparent;
+      border-radius: 0.25rem;
+      opacity: 0.1;
+      z-index: 1;
+      transition: opacity 0.15s var(--timing-main);
+
+      &:focus {
+        border-color: var(--primary-edit-border-color);
+        opacity: 0.25;
+      }
+      & > * {
+        pointer-events: none;
+      }
+    }
+    .hidden-panel:focus-within,
+    .hidden-panel:focus,
+    .panel-trigger:focus + .hidden-panel {
+      width: 100%;
+      opacity: 1;
+      pointer-events: all;
+    }
+    .space {
+      min-height: 0.1075rem;
+    }
+  }
+</style>
diff --git a/plugins/view-resources/src/components/list/ListView.svelte b/plugins/view-resources/src/components/list/ListView.svelte
new file mode 100644
index 0000000000..075117a217
--- /dev/null
+++ b/plugins/view-resources/src/components/list/ListView.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+  import { Class, Doc, DocumentQuery, FindOptions, Ref, Space } from '@hcengineering/core'
+  import { IntlString } from '@hcengineering/platform'
+  import { AnyComponent, issueSP, Scroller } from '@hcengineering/ui'
+  import { BuildModelKey, Viewlet } from '@hcengineering/view'
+  import { onMount } from 'svelte'
+  import {
+    ActionContext,
+    focusStore,
+    ListSelectionProvider,
+    LoadingProps,
+    SelectDirection,
+    selectionStore
+  } from '../..'
+
+  import List from './List.svelte'
+
+  export let _class: Ref<Class<Doc>>
+  export let space: Ref<Space> | undefined = undefined
+  export let query: DocumentQuery<Doc> = {}
+  export let options: FindOptions<Doc> | undefined = undefined
+  export let viewlet: Viewlet
+  export let config: (string | BuildModelKey)[]
+  export let loadingProps: LoadingProps | undefined = undefined
+  export let createItemDialog: AnyComponent | undefined
+  export let createItemLabel: IntlString | undefined
+
+  let list: List
+
+  const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {
+    if (dir === 'vertical') {
+      // Select next
+      list.select(offset, of)
+    }
+  })
+
+  onMount(() => {
+    ;(document.activeElement as HTMLElement)?.blur()
+  })
+</script>
+
+<ActionContext
+  context={{
+    mode: 'browser'
+  }}
+/>
+
+<div class="w-full h-full clear-mins">
+  <Scroller fade={issueSP}>
+    <List
+      bind:this={list}
+      {_class}
+      {space}
+      {query}
+      {config}
+      {options}
+      {loadingProps}
+      {createItemDialog}
+      {createItemLabel}
+      viewOptions={viewlet.viewOptions?.other}
+      selectedObjectIds={$selectionStore ?? []}
+      selectedRowIndex={listProvider.current($focusStore)}
+      on:row-focus={(event) => {
+        listProvider.updateFocus(event.detail ?? undefined)
+      }}
+      on:check={(event) => {
+        listProvider.updateSelection(event.detail.docs, event.detail.value)
+      }}
+      on:content={(evt) => {
+        listProvider.update(evt.detail)
+      }}
+    />
+  </Scroller>
+</div>
diff --git a/plugins/view-resources/src/index.ts b/plugins/view-resources/src/index.ts
index aec7dfb475..7cad0c61a8 100644
--- a/plugins/view-resources/src/index.ts
+++ b/plugins/view-resources/src/index.ts
@@ -22,6 +22,7 @@ import BooleanPresenter from './components/BooleanPresenter.svelte'
 import BooleanTruePresenter from './components/BooleanTruePresenter.svelte'
 import ClassAttributeBar from './components/ClassAttributeBar.svelte'
 import ClassPresenter from './components/ClassPresenter.svelte'
+import ClassRefPresenter from './components/ClassRefPresenter.svelte'
 import ColorsPopup from './components/ColorsPopup.svelte'
 import DateEditor from './components/DateEditor.svelte'
 import DatePresenter from './components/DatePresenter.svelte'
@@ -58,6 +59,9 @@ import MarkupEditor from './components/MarkupEditor.svelte'
 import MarkupEditorPopup from './components/MarkupEditorPopup.svelte'
 import SortableList from './components/list/SortableList.svelte'
 import SortableListItem from './components/list/SortableListItem.svelte'
+import ListView from './components/list/ListView.svelte'
+import GrowPresenter from './components/list/GrowPresenter.svelte'
+
 import {
   afterResult,
   beforeResult,
@@ -81,7 +85,6 @@ export { default as LinkPresenter } from './components/LinkPresenter.svelte'
 export { default as ContextMenu } from './components/Menu.svelte'
 export { default as TableBrowser } from './components/TableBrowser.svelte'
 export { default as FixedColumn } from './components/FixedColumn.svelte'
-export { default as ViewOptionsButton } from './components/ViewOptionsButton.svelte'
 export { default as ValueSelector } from './components/ValueSelector.svelte'
 export { default as ObjectBox } from './components/ObjectBox.svelte'
 export { default as ObjectPresenter } from './components/ObjectPresenter.svelte'
@@ -128,6 +131,7 @@ export default async (): Promise<Resources> => ({
   actionImpl,
   component: {
     ClassPresenter,
+    ClassRefPresenter,
     ObjectFilter,
     ValueFilter,
     TimestampFilter,
@@ -158,7 +162,9 @@ export default async (): Promise<Resources> => ({
     EnumEditor,
     FilterTypePopup,
     ValueSelector,
-    HTMLEditor
+    HTMLEditor,
+    ListView,
+    GrowPresenter
   },
   popup: {
     PositionElementAlignment
diff --git a/plugins/view-resources/src/plugin.ts b/plugins/view-resources/src/plugin.ts
index 1659f53fe1..0fd62c06cd 100644
--- a/plugins/view-resources/src/plugin.ts
+++ b/plugins/view-resources/src/plugin.ts
@@ -55,6 +55,11 @@ export default mergeIds(viewId, view, {
     AllFilters: '' as IntlString,
     MatchCriteria: '' as IntlString,
     DontMatchCriteria: '' as IntlString,
-    MarkupEditor: '' as IntlString
+    MarkupEditor: '' as IntlString,
+    Select: '' as IntlString,
+    NoGrouping: '' as IntlString,
+    Grouping: '' as IntlString,
+    Ordering: '' as IntlString,
+    Manual: '' as IntlString
   }
 })
diff --git a/plugins/view-resources/src/selection.ts b/plugins/view-resources/src/selection.ts
index 9da690ae2b..1b38164c59 100644
--- a/plugins/view-resources/src/selection.ts
+++ b/plugins/view-resources/src/selection.ts
@@ -1,7 +1,7 @@
 import { Doc } from '@hcengineering/core'
 import { panelstore } from '@hcengineering/ui'
 import { onDestroy } from 'svelte'
-import { writable } from 'svelte/store'
+import { Unsubscriber, writable } from 'svelte/store'
 
 /**
  * @public
@@ -85,22 +85,52 @@ export function updateFocus (selection?: FocusSelection): void {
   }
 }
 
+const providers: ListSelectionProvider[] = []
+
 /**
  * @public
  *
  * List selection provider
  */
 export class ListSelectionProvider implements SelectionFocusProvider {
-  _docs: Doc[] = []
+  private _docs: Doc[] = []
   _current?: FocusSelection
-  constructor (private readonly delegate: (offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection) => void) {
-    const unsubscribe = focusStore.subscribe((doc) => {
+  private readonly unsubscribe: Unsubscriber
+  constructor (
+    private readonly delegate: (offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection) => void,
+    autoDestroy = true
+  ) {
+    this.unsubscribe = focusStore.subscribe((doc) => {
       this._current = doc
     })
-    onDestroy(() => {
-      unsubscribe()
-      updateFocus(undefined)
-    })
+    providers.push(this)
+    if (autoDestroy) {
+      onDestroy(() => {
+        this.destroy()
+      })
+    }
+  }
+
+  static Pop (): void {
+    if (providers.length === 0) return
+    const last = providers[providers.length - 1]
+    last.destroy()
+  }
+
+  destroy (): void {
+    const thisIndex = providers.findIndex((p) => p === this)
+    providers.splice(thisIndex, 1)
+    if (thisIndex === providers.length) {
+      if (providers.length > 0) {
+        const current = providers[providers.length - 1]
+        const index = current.current()
+        const target = index !== undefined ? current.docs()[index] : undefined
+        updateFocus({ focus: target, provider: current })
+      } else {
+        updateFocus()
+      }
+    }
+    this.unsubscribe()
   }
 
   select (offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection): void {
@@ -143,6 +173,7 @@ export class ListSelectionProvider implements SelectionFocusProvider {
   }
 
   current (doc?: FocusSelection): number | undefined {
-    return this._docs.findIndex((it) => it._id === doc?.focus?._id)
+    const index = this._docs.findIndex((it) => it._id === (doc?.focus?._id ?? this._current?.focus?._id))
+    return index === -1 ? undefined : index
   }
 }
diff --git a/plugins/view-resources/src/utils.ts b/plugins/view-resources/src/utils.ts
index 6c6dbcadb4..f8693ef456 100644
--- a/plugins/view-resources/src/utils.ts
+++ b/plugins/view-resources/src/utils.ts
@@ -41,6 +41,7 @@ import type { BuildModelOptions, Viewlet } from '@hcengineering/view'
 import view, { AttributeModel, BuildModelKey } from '@hcengineering/view'
 import { writable } from 'svelte/store'
 import plugin from './plugin'
+import { noCategory } from './viewOptions'
 
 /**
  * Define some properties to be used to show component until data is properly loaded.
@@ -59,7 +60,7 @@ export async function getObjectPresenter (
   isCollectionAttr: boolean = false
 ): Promise<AttributeModel> {
   const hierarchy = client.getHierarchy()
-  const mixin = isCollectionAttr ? view.mixin.CollectionPresenter : view.mixin.AttributePresenter
+  const mixin = isCollectionAttr ? view.mixin.CollectionPresenter : view.mixin.ObjectPresenter
   const clazz = hierarchy.getClass(_class)
   let mixinClazz = hierarchy.getClass(_class)
   let presenterMixin = hierarchy.as(clazz, mixin)
@@ -157,7 +158,7 @@ async function getAttributePresenter (
     _class: presenterClass.attrClass,
     label: preserveKey.label ?? attribute.shortLabel ?? attribute.label,
     presenter,
-    props: {},
+    props: preserveKey.props,
     icon: presenterMixin.icon,
     attribute,
     collectionAttr: isCollectionAttr
@@ -180,7 +181,7 @@ export async function getPresenter<T extends Doc> (
       _class,
       label: label as IntlString,
       presenter: typeof presenter === 'string' ? await getResource(presenter) : presenter,
-      props: key.props,
+      props: preserveKey.props,
       collectionAttr: isCollectionAttr
     }
   }
@@ -497,3 +498,54 @@ export function getActiveViewletId (): Ref<Viewlet> | null {
 export type FixedWidthStore = Record<string, number>
 
 export const fixedWidthStore = writable<FixedWidthStore>({})
+
+export const groupBy = (docs: Doc[], key: string): { [key: string]: Doc[] } => {
+  return docs.reduce((storage: { [key: string]: Doc[] }, item: Doc) => {
+    const group = (item as any)[key] ?? undefined
+
+    storage[group] = storage[group] ?? []
+
+    storage[group].push(item)
+
+    return storage
+  }, {})
+}
+
+export async function getCategories (
+  client: TxOperations,
+  _class: Ref<Class<Doc>>,
+  docs: Doc[],
+  key: string
+): Promise<any[]> {
+  if (key === noCategory) return [undefined]
+  const hierarchy = client.getHierarchy()
+  const existingCategories = Array.from(new Set(docs.map((x: any) => x[key] ?? undefined)))
+  const attr = hierarchy.getAttribute(_class, key)
+  console.log(attr)
+  if (attr === undefined) return existingCategories
+  const attrClass = getAttributePresenterClass(hierarchy, attr).attrClass
+  console.log(attrClass)
+  const clazz = hierarchy.getClass(attrClass)
+  const sortFunc = hierarchy.as(clazz, view.mixin.SortFuncs)
+  if (sortFunc?.func === undefined) return existingCategories
+  const f = await getResource(sortFunc.func)
+
+  return await f(existingCategories)
+}
+
+export function getKeyLabel<T extends Doc> (
+  client: TxOperations,
+  _class: Ref<Class<T>>,
+  key: string,
+  lookup: Lookup<T> | undefined
+): IntlString {
+  if (key.startsWith('$lookup') && lookup !== undefined) {
+    const lookupClass = getLookupClass(key, lookup, _class)
+    const lookupProperty = getLookupProperty(key)
+    const lookupKey = { key: lookupProperty[0] }
+    return getLookupLabel(client, lookupClass[1], lookupClass[0], lookupKey, lookupProperty[1])
+  } else {
+    const attribute = client.getHierarchy().getAttribute(_class, key)
+    return attribute.label
+  }
+}
diff --git a/plugins/view-resources/src/viewOptions.ts b/plugins/view-resources/src/viewOptions.ts
index c52dd76551..8f15ec8f57 100644
--- a/plugins/view-resources/src/viewOptions.ts
+++ b/plugins/view-resources/src/viewOptions.ts
@@ -1,10 +1,16 @@
-import { IntlString } from '@hcengineering/platform'
+import { SortingOrder } from '@hcengineering/core'
 import { getCurrentLocation, locationToUrl } from '@hcengineering/ui'
+import { DropdownViewOption, ToggleViewOption, ViewOptionModel, ViewOptions } from '@hcengineering/view'
 import { writable } from 'svelte/store'
 
-export type ViewOptions = Record<string, any>
+export const noCategory = '#no_category'
 
-export const viewOptionsStore = writable<ViewOptions>({})
+export const defaulOptions: ViewOptions = {
+  groupBy: noCategory,
+  orderBy: ['modifiedBy', SortingOrder.Descending]
+}
+
+export const viewOptionsStore = writable<ViewOptions>(defaulOptions)
 
 export function isToggleType (viewOption: ViewOptionModel): viewOption is ToggleViewOption {
   return viewOption.type === 'toggle'
@@ -32,25 +38,3 @@ export function getViewOptions (prefix: string): ViewOptions | null {
   if (options === null) return null
   return JSON.parse(options)
 }
-
-export interface ViewOption {
-  type: string
-  key: string
-  defaultValue: any
-  label: IntlString
-  group?: string
-  hidden?: (viewOptions: ViewOptions) => boolean
-}
-
-export interface ToggleViewOption extends ViewOption {
-  type: 'toggle'
-  defaultValue: boolean
-}
-
-export interface DropdownViewOption extends ViewOption {
-  type: 'dropdown'
-  defaultValue: string
-  values: Array<{ label: IntlString, id: string, hidden?: (viewOptions: ViewOptions) => boolean }>
-}
-
-export type ViewOptionModel = ToggleViewOption | DropdownViewOption
diff --git a/plugins/view/src/index.ts b/plugins/view/src/index.ts
index 179e37f3fb..06d68ce239 100644
--- a/plugins/view/src/index.ts
+++ b/plugins/view/src/index.ts
@@ -26,6 +26,7 @@ import type {
   Obj,
   ObjQueryType,
   Ref,
+  SortingOrder,
   Space,
   Type,
   UXObject
@@ -128,6 +129,13 @@ export interface AttributePresenter extends Class<Doc> {
   presenter: AnyComponent
 }
 
+/**
+ * @public
+ */
+export interface ObjectPresenter extends Class<Doc> {
+  presenter: AnyComponent
+}
+
 /**
  * @public
  */
@@ -185,15 +193,35 @@ export interface ViewletDescriptor extends Doc, UXObject {
   component: AnyComponent
 }
 
+/**
+ * @public
+ */
+export interface ListHeaderExtra extends Class<Doc> {
+  presenters: AnyComponent[]
+}
+
+/**
+ * @public
+ */
+export type SortFunc = Resource<(values: any[]) => Promise<any[]>>
+
+/**
+ * @public
+ */
+export interface ClassSortFuncs extends Class<Doc> {
+  func: SortFunc
+}
+
 /**
  * @public
  */
 export interface Viewlet extends Doc {
-  attachTo: Ref<Class<Space>>
+  attachTo: Ref<Class<Doc>>
   descriptor: Ref<ViewletDescriptor>
   options?: FindOptions<Doc>
   config: (BuildModelKey | string)[]
   hiddenKeys?: string[]
+  viewOptions?: ViewOptionsModel
 }
 
 /**
@@ -395,6 +423,71 @@ export interface ViewletPreference extends Preference {
   config: (BuildModelKey | string)[]
 }
 
+/**
+ * @public
+ */
+export type ViewOptions = {
+  groupBy: string
+  orderBy: OrderOption
+} & Record<string, any>
+
+/**
+ * @public
+ */
+export interface ViewOption {
+  type: string
+  key: string
+  defaultValue: any
+  label: IntlString
+  hidden?: (viewOptions: ViewOptions) => boolean
+  actionTartget?: 'query'
+  action?: Resource<(value: any, ...params: any) => any>
+}
+
+/**
+ * @public
+ */
+export interface ViewQueryOption extends ViewOption {
+  actionTartget: 'query'
+  action: Resource<(value: any, query: DocumentQuery<Doc>) => DocumentQuery<Doc>>
+}
+
+/**
+ * @public
+ */
+export interface ToggleViewOption extends ViewOption {
+  type: 'toggle'
+  defaultValue: boolean
+}
+
+/**
+ * @public
+ */
+export interface DropdownViewOption extends ViewOption {
+  type: 'dropdown'
+  defaultValue: string
+  values: Array<{ label: IntlString, id: string, hidden?: (viewOptions: ViewOptions) => boolean }>
+}
+
+/**
+ * @public
+ */
+export type ViewOptionModel = ToggleViewOption | DropdownViewOption
+
+/**
+ * @public
+ */
+export type OrderOption = [string, SortingOrder]
+
+/**
+ * @public
+ */
+export interface ViewOptionsModel {
+  groupBy: string[]
+  orderBy: OrderOption[]
+  other: ViewOptionModel[]
+}
+
 /**
  * @public
  */
@@ -410,6 +503,7 @@ const view = plugin(viewId, {
     AttributePresenter: '' as Ref<Mixin<AttributePresenter>>,
     ListItemPresenter: '' as Ref<Mixin<ListItemPresenter>>,
     ObjectEditor: '' as Ref<Mixin<ObjectEditor>>,
+    ObjectPresenter: '' as Ref<Mixin<ObjectPresenter>>,
     ObjectEditorHeader: '' as Ref<Mixin<ObjectEditorHeader>>,
     ObjectValidator: '' as Ref<Mixin<ObjectValidator>>,
     ObjectFactory: '' as Ref<Mixin<ObjectFactory>>,
@@ -417,7 +511,9 @@ const view = plugin(viewId, {
     SpaceHeader: '' as Ref<Mixin<SpaceHeader>>,
     SpaceName: '' as Ref<Mixin<SpaceName>>,
     IgnoreActions: '' as Ref<Mixin<IgnoreActions>>,
-    PreviewPresenter: '' as Ref<Mixin<PreviewPresenter>>
+    PreviewPresenter: '' as Ref<Mixin<PreviewPresenter>>,
+    ListHeaderExtra: '' as Ref<Mixin<ListHeaderExtra>>,
+    SortFuncs: '' as Ref<Mixin<ClassSortFuncs>>
   },
   class: {
     ViewletPreference: '' as Ref<Class<ViewletPreference>>,
@@ -449,7 +545,8 @@ const view = plugin(viewId, {
     Open: '' as Ref<Action>
   },
   viewlet: {
-    Table: '' as Ref<ViewletDescriptor>
+    Table: '' as Ref<ViewletDescriptor>,
+    List: '' as Ref<ViewletDescriptor>
   },
   component: {
     ObjectPresenter: '' as AnyComponent,
diff --git a/plugins/workbench-resources/src/components/Archive.svelte b/plugins/workbench-resources/src/components/Archive.svelte
index cd4ebe7fca..cf9a1fea77 100644
--- a/plugins/workbench-resources/src/components/Archive.svelte
+++ b/plugins/workbench-resources/src/components/Archive.svelte
@@ -33,7 +33,7 @@
 {#if model}
   <TableBrowser
     _class={core.class.Space}
-    config={['', '$lookup._class', 'modifiedOn']}
+    config={['', '_class', 'modifiedOn']}
     showNotification
     baseMenuClass={core.class.Space}
     query={{
diff --git a/plugins/workbench-resources/src/components/SpaceBrowser.svelte b/plugins/workbench-resources/src/components/SpaceBrowser.svelte
index 750fbd6ff1..b1240161cb 100644
--- a/plugins/workbench-resources/src/components/SpaceBrowser.svelte
+++ b/plugins/workbench-resources/src/components/SpaceBrowser.svelte
@@ -46,11 +46,11 @@
   export let createItemLabel: IntlString = presentation.string.Create
   export let withHeader: boolean = true
   export let withFilterButton: boolean = true
+  export let search: string = ''
 
   const me = getCurrentAccount()._id
   const client = getClient()
   const spaceQuery = createQuery()
-  export let search: string = ''
   const sort: SortingQuery<Space> = {
     name: SortingOrder.Ascending
   }
diff --git a/plugins/workbench-resources/src/components/SpaceContent.svelte b/plugins/workbench-resources/src/components/SpaceContent.svelte
index deee83454c..bd914441d1 100644
--- a/plugins/workbench-resources/src/components/SpaceContent.svelte
+++ b/plugins/workbench-resources/src/components/SpaceContent.svelte
@@ -14,20 +14,28 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import type { Class, Doc, Ref, Space, WithLookup } from '@hcengineering/core'
+  import type { Class, Doc, DocumentQuery, Ref, Space, WithLookup } from '@hcengineering/core'
+  import { IntlString } from '@hcengineering/platform'
   import { createQuery } from '@hcengineering/presentation'
-  import { Component, Loading } from '@hcengineering/ui'
+  import { AnyComponent, Component, Loading } from '@hcengineering/ui'
   import view, { Viewlet, ViewletPreference } from '@hcengineering/view'
+  import { FilterBar } from '@hcengineering/view-resources'
 
   export let _class: Ref<Class<Doc>>
   export let space: Ref<Space>
-  export let search: string
+  export let search: string = ''
   export let viewlet: WithLookup<Viewlet> | undefined
+  export let createItemDialog: AnyComponent | undefined
+  export let createItemLabel: IntlString | undefined
 
   const preferenceQuery = createQuery()
   let preference: ViewletPreference | undefined
   let loading = true
 
+  let resultQuery: DocumentQuery<Doc> = {}
+
+  $: searchQuery = search === '' ? { space } : { $search: search, space }
+
   $: viewlet &&
     preferenceQuery.query(
       view.class.ViewletPreference,
@@ -48,6 +56,7 @@
       {#if loading}
         <Loading />
       {:else}
+        <FilterBar {_class} query={searchQuery} on:change={(e) => (resultQuery = e.detail)} />
         <Component
           is={viewlet.$lookup?.descriptor?.component}
           props={{
@@ -56,7 +65,9 @@
             options: viewlet.options,
             config: preference?.config ?? viewlet.config,
             viewlet,
-            search
+            createItemDialog,
+            createItemLabel,
+            query: resultQuery
           }}
         />
       {/if}
diff --git a/plugins/workbench-resources/src/components/SpaceHeader.svelte b/plugins/workbench-resources/src/components/SpaceHeader.svelte
index 174a34c272..982cc94797 100644
--- a/plugins/workbench-resources/src/components/SpaceHeader.svelte
+++ b/plugins/workbench-resources/src/components/SpaceHeader.svelte
@@ -19,7 +19,7 @@
   import presentation, { createQuery, getClient } from '@hcengineering/presentation'
   import { AnyComponent, Button, IconAdd, SearchEdit, showPanel, showPopup, TabList } from '@hcengineering/ui'
   import view, { Viewlet } from '@hcengineering/view'
-  import { ViewletSettingButton } from '@hcengineering/view-resources'
+  import { getActiveViewletId, setActiveViewletId, ViewletSettingButton } from '@hcengineering/view-resources'
   import { createEventDispatcher } from 'svelte'
   import plugin from '../plugin'
   import { classIcon } from '../utils'
@@ -71,7 +71,8 @@
   }
 
   function updateViewlets (viewlets: WithLookup<Viewlet>[]) {
-    const index = viewlets.findIndex((p) => p.descriptor === viewlet?.descriptor)
+    const _id = getActiveViewletId()
+    const index = viewlets.findIndex((p) => p._id === (viewlet?._id ?? _id))
     viewlet = index === -1 ? viewlets[0] : viewlets[index]
   }
   $: viewslist = viewlets.map((views) => {
@@ -120,7 +121,10 @@
           kind={'secondary'}
           size={'small'}
           on:select={(result) => {
-            if (result.detail !== undefined) viewlet = viewlets.find((vl) => vl._id === result.detail.id)
+            if (result.detail !== undefined) {
+              viewlet = viewlets.find((vl) => vl._id === result.detail.id)
+              if (viewlet) setActiveViewletId(viewlet._id)
+            }
           }}
         />
       {/if}
diff --git a/plugins/workbench-resources/src/components/SpaceView.svelte b/plugins/workbench-resources/src/components/SpaceView.svelte
index bbb5252ade..31577d3acd 100644
--- a/plugins/workbench-resources/src/components/SpaceView.svelte
+++ b/plugins/workbench-resources/src/components/SpaceView.svelte
@@ -18,6 +18,7 @@
   import { getClient } from '@hcengineering/presentation'
   import { AnyComponent, Component } from '@hcengineering/ui'
   import view, { Viewlet } from '@hcengineering/view'
+  import { getActiveViewletId } from '@hcengineering/view-resources'
   import type { ViewConfiguration } from '@hcengineering/workbench'
   import SpaceContent from './SpaceContent.svelte'
   import SpaceHeader from './SpaceHeader.svelte'
@@ -61,7 +62,8 @@
         }
       )
       if (header !== undefined) {
-        viewlet = viewlets[0]
+        const _id = getActiveViewletId()
+        viewlet = viewlets.find((viewlet) => viewlet._id === _id) || viewlets[0]
       }
       _class = attachTo
     }
@@ -97,5 +99,5 @@
       bind:viewlet
     />
   {/if}
-  <SpaceContent space={space._id} {_class} bind:search {viewlet} />
+  <SpaceContent space={space._id} {_class} {createItemDialog} {createItemLabel} bind:search {viewlet} />
 {/if}
diff --git a/server/core/src/fulltext.ts b/server/core/src/fulltext.ts
index bbccbef561..2ab49fd04f 100644
--- a/server/core/src/fulltext.ts
+++ b/server/core/src/fulltext.ts
@@ -172,7 +172,7 @@ export class FullTextIndex implements WithFind {
     if (docs.length === 0) {
       return toFindResult([], 0)
     }
-    const scoreSearch: number | undefined = (options?.sort as any)['#score']
+    const scoreSearch: number | undefined = (options?.sort as any)?.['#score']
 
     const resultIds = Array.from(getResultIds(ids, _id))
     let result = await this.dbStorage.findAll(
diff --git a/tests/docker-compose.yaml b/tests/docker-compose.yaml
index 954b953f2e..4111259cd0 100644
--- a/tests/docker-compose.yaml
+++ b/tests/docker-compose.yaml
@@ -106,12 +106,12 @@ services:
       - MINIO_ENDPOINT=minio
       - MINIO_ACCESS_KEY=minioadmin
       - MINIO_SECRET_KEY=minioadmin  
-      - REKONI_URL=http://rekoni:4004
+      - REKONI_URL=http://rekoni:4005
   rekoni:
     image: hardcoreeng/rekoni-service
     restart: on-failure
     ports:
-      - 4004:4004
+      - 4004:4005
     deploy:
       resources:
         limits:
diff --git a/tests/sanity/tests/tracker.layout.spec.ts b/tests/sanity/tests/tracker.layout.spec.ts
index d50050182c..3e092e9d75 100644
--- a/tests/sanity/tests/tracker.layout.spec.ts
+++ b/tests/sanity/tests/tracker.layout.spec.ts
@@ -24,8 +24,12 @@ async function createIssues (page: Page, projects?: string[], sprints?: string[]
   const issuesProps = []
   for (let index = 0; index < 5; index++) {
     const shiftedIndex = 4 - index
+    const name =
+      sprints !== undefined
+        ? getIssueName(`layout-${shiftedIndex}-${sprints[index % sprints.length]}`)
+        : getIssueName(`layout-${shiftedIndex}`)
     const issueProps = {
-      name: getIssueName(`layout-${shiftedIndex}`),
+      name,
       status: DEFAULT_STATUSES[shiftedIndex],
       assignee: shiftedIndex % 2 === 0 ? DEFAULT_USER : 'Chen Rosamund',
       priority: PRIORITIES[shiftedIndex],
@@ -83,7 +87,7 @@ test.describe('tracker layout tests', () => {
   })
 
   let issuesProps: IssueProps[] = []
-  const orders = ['Status', 'Last updated', 'Priority'] as const
+  const orders = ['Status', 'Modified', 'Priority'] as const
   const groups = ['Status', 'Assignee', 'Priority', 'Project', 'Sprint', 'No grouping'] as const
   const groupsLabels: { [key in typeof groups[number]]?: string[] } = {
     Status: DEFAULT_STATUSES,
@@ -94,7 +98,7 @@ test.describe('tracker layout tests', () => {
 
   for (const group of groups) {
     test(`issues-${group.toLowerCase()}-grouping-layout`, async ({ page }) => {
-      const locator = page.locator('.issueslist-container')
+      const locator = page.locator('.list-container')
       await setViewGroup(page, group)
 
       let groupLabels: any[]
diff --git a/tests/sanity/tests/tracker.spec.ts b/tests/sanity/tests/tracker.spec.ts
index 830f69ca9b..5e42830ffc 100644
--- a/tests/sanity/tests/tracker.spec.ts
+++ b/tests/sanity/tests/tracker.spec.ts
@@ -46,7 +46,7 @@ test('issues-status-display', async ({ page }) => {
     ['Active', ['Todo', 'In Progress']],
     ['Backlog', ['Backlog']]
   ])
-  const locator = page.locator('.issueslist-container')
+  const locator = page.locator('.list-container')
   await navigate(page)
   for (const status of DEFAULT_STATUSES) {
     await createIssue(page, { name: getIssueName(status), status })
@@ -139,8 +139,8 @@ test('report-time-from-main-view', async ({ page }) => {
 
   await page.click('text="Issues"')
   await page.click('button:has-text("View")')
-  await page.click('text="Status" >> nth=1')
-  await page.click('text="Last updated"')
+  await page.click('.value >> nth=1')
+  await page.click('text="Modified"')
   await page.keyboard.press('Escape')
 
   const values = [0.25, 0.5, 0.75, 1]