diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000..959b1f03e5
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,19 @@
+{
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/Thumbs.db": true,
+    "**/.rush": true,
+    "**/lib": true,
+    "**/.heft": true,
+    "**/_api-extractor-temp": true,
+    "**/svelte.config.js": true,
+    "**/postcss.config.js": true,
+    "**/node_modules": true,
+    "**/temp": true
+  },
+  "explorerExclude.backup": null
+}
\ No newline at end of file
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index 9536734400..3583581fb2 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -46,6 +46,7 @@ specifiers:
   '@rush-temp/inventory': file:./projects/inventory.tgz
   '@rush-temp/inventory-assets': file:./projects/inventory-assets.tgz
   '@rush-temp/inventory-resources': file:./projects/inventory-resources.tgz
+  '@rush-temp/kanban': file:./projects/kanban.tgz
   '@rush-temp/lead': file:./projects/lead.tgz
   '@rush-temp/lead-assets': file:./projects/lead-assets.tgz
   '@rush-temp/lead-resources': file:./projects/lead-resources.tgz
@@ -233,7 +234,6 @@ specifiers:
   koa: ^2.13.1
   koa-bodyparser: ^4.3.0
   koa-router: ^10.1.1
-  lexorank: ~1.0.4
   mime-types: ~2.1.34
   mini-css-extract-plugin: ^2.2.0
   minio: ~7.0.26
@@ -313,6 +313,7 @@ dependencies:
   '@rush-temp/inventory': file:projects/inventory.tgz
   '@rush-temp/inventory-assets': file:projects/inventory-assets.tgz
   '@rush-temp/inventory-resources': file:projects/inventory-resources.tgz_096c09b0b673a57c275d9767a12070b1
+  '@rush-temp/kanban': file:projects/kanban.tgz_096c09b0b673a57c275d9767a12070b1
   '@rush-temp/lead': file:projects/lead.tgz
   '@rush-temp/lead-assets': file:projects/lead-assets.tgz_typescript@4.5.4
   '@rush-temp/lead-resources': file:projects/lead-resources.tgz_096c09b0b673a57c275d9767a12070b1
@@ -500,7 +501,6 @@ dependencies:
   koa: 2.13.4
   koa-bodyparser: 4.3.0
   koa-router: 10.1.1
-  lexorank: 1.0.4
   mime-types: 2.1.34
   mini-css-extract-plugin: 2.4.5_webpack@5.65.0
   minio: 7.0.26
@@ -11738,7 +11738,7 @@ packages:
     dev: false
 
   file:projects/board-resources.tgz_096c09b0b673a57c275d9767a12070b1:
-    resolution: {integrity: sha512-QT/HdEwK5Qk97hQP5yYA3YqTxvjugiT5mQAwzzqG969O2bKHQ2FVR8lAvU1fMO3fwC5yhK7e7cPYmp4BkxUB7Q==, tarball: file:projects/board-resources.tgz}
+    resolution: {integrity: sha512-vNNtH4in7D54mv4ckcYvE+iLxqt10x0kpToPg+xMRl4LuXIehuKDM+x9uiSb61y7FBesLyrJ3+606D99cc+1fQ==, tarball: file:projects/board-resources.tgz}
     id: file:projects/board-resources.tgz
     name: '@rush-temp/board-resources'
     version: 0.0.0
@@ -12580,6 +12580,42 @@ packages:
       - supports-color
     dev: false
 
+  file:projects/kanban.tgz_096c09b0b673a57c275d9767a12070b1:
+    resolution: {integrity: sha512-OCiINFLnTioUd5bChs/+3XWrsG3ogWEG/EIN0xLle9bW3SFW8VEG9Zzint+nnKA9ZNSPvopQoQ0nfI+Cw27yyw==, tarball: file:projects/kanban.tgz}
+    id: file:projects/kanban.tgz
+    name: '@rush-temp/kanban'
+    version: 0.0.0
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 5.7.0_c25e8c1f4f4f7aaed27aa6f9ce042237
+      '@typescript-eslint/parser': 5.7.0_eslint@7.32.0+typescript@4.5.4
+      eslint: 7.32.0
+      eslint-config-standard-with-typescript: 21.0.1_ce2fa0c4dfa1c256100cababd749a13a
+      eslint-plugin-import: 2.25.3_eslint@7.32.0
+      eslint-plugin-node: 11.1.0_eslint@7.32.0
+      eslint-plugin-promise: 5.2.0_eslint@7.32.0
+      eslint-plugin-svelte3: 3.2.1_eslint@7.32.0+svelte@3.46.6
+      lexorank: 1.0.4
+      prettier: 2.5.1
+      prettier-plugin-svelte: 2.5.1_prettier@2.5.1+svelte@3.46.6
+      sass: 1.45.0
+      svelte: 3.46.6
+      svelte-check: 2.3.0_b04a52a339c2665a42d74bbf4bb86835
+      svelte-loader: 3.1.2_svelte@3.46.6
+      svelte-preprocess: 4.10.5_6f8bc07a13fa60df66bfb708fddfe692
+      typescript: 4.5.4
+    transitivePeerDependencies:
+      - '@babel/core'
+      - coffeescript
+      - less
+      - node-sass
+      - postcss
+      - postcss-load-config
+      - pug
+      - stylus
+      - sugarss
+      - supports-color
+    dev: false
+
   file:projects/lead-assets.tgz_typescript@4.5.4:
     resolution: {integrity: sha512-xzyDq7/BBdTObN+yQybWaB+9BuGKc3ucavQhEfQvrtRF4IryAt+SeCSX3W1bbJlZoq76OAkNf8wPXY5FAJC+3w==, tarball: file:projects/lead-assets.tgz}
     id: file:projects/lead-assets.tgz
diff --git a/packages/kanban/.eslintrc.js b/packages/kanban/.eslintrc.js
new file mode 100644
index 0000000000..a327214967
--- /dev/null
+++ b/packages/kanban/.eslintrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ['./node_modules/@anticrm/platform-rig/profiles/ui/config/eslint.config.json'],
+  parserOptions: { tsconfigRootDir: __dirname },
+  settings: {
+    'svelte3/ignore-styles': () => true
+  }
+}
diff --git a/packages/kanban/package.json b/packages/kanban/package.json
new file mode 100644
index 0000000000..7ba07a1f67
--- /dev/null
+++ b/packages/kanban/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@anticrm/kanban",
+  "version": "0.6.0",
+  "main": "src/index.ts",
+  "author": "Anticrm Platform Contributors",
+  "license": "EPL-2.0",
+  "scripts": {
+    "build": "echo 'no build for ui'",
+    "build:docs": "api-extractor run --local",
+    "lint": "svelte-check && eslint",
+    "lint:fix": "eslint --fix src",
+    "format": "prettier --write --plugin-search-dir=. src && eslint --fix src",
+    "svelte-check": "svelte-check"
+  },
+  "devDependencies": {
+    "svelte-loader": "^3.1.2",
+    "sass": "^1.37.5",
+    "svelte-preprocess": "^4.10.5",
+    "svelte-check": "^2.2.10",
+    "@anticrm/platform-rig": "~0.6.0",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "eslint-config-standard-with-typescript": "^21.0.1",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^5.1.1",
+    "eslint-plugin-svelte3": "~3.2.1",
+    "prettier-plugin-svelte": "^2.2.0",
+    "eslint": "^7.32.0",
+    "prettier": "^2.4.1",
+    "typescript": "^4.3.5"
+  },
+  "dependencies": {
+    "@anticrm/ui": "~0.6.0",
+    "svelte": "^3.46",
+    "lexorank": "^1.0.4",
+    "@anticrm/platform": "~0.6.5",
+    "@anticrm/core": "~0.6.16",
+    "@anticrm/presentation": "~0.6.2",
+    "@anticrm/notification": "~0.6.0"
+  }
+}
diff --git a/packages/kanban/postcss.config.js b/packages/kanban/postcss.config.js
new file mode 100644
index 0000000000..88752c6cb0
--- /dev/null
+++ b/packages/kanban/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')
+  ]
+}
diff --git a/packages/kanban/src/components/Kanban.svelte b/packages/kanban/src/components/Kanban.svelte
new file mode 100644
index 0000000000..083b16a664
--- /dev/null
+++ b/packages/kanban/src/components/Kanban.svelte
@@ -0,0 +1,269 @@
+<!--
+// 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 core, { AttachedDoc, Class, Doc, DocumentQuery, DocumentUpdate, FindOptions, Ref, Space } from '@anticrm/core'
+  import { createQuery, getClient } from '@anticrm/presentation'
+  import { getPlatformColor, ScrollBox } from '@anticrm/ui'
+  import { slide } from 'svelte/transition'
+  import { DocWithRank } from '../types'
+  import { calcRank } from '../utils'
+  import KanbanPanel from './KanbanPanel.svelte'
+
+  type StateType = any
+  type Item = DocWithRank & { state: StateType; doneState: StateType | null }
+  type TypeState = { _id: StateType; title: string; color: number }
+  type ExtItem = { prev?: Item; it: Item; next?: Item }
+  type CardDragEvent = DragEvent & { currentTarget: EventTarget & HTMLDivElement }
+
+  export let _class: Ref<Class<Item>>
+  export let space: Ref<Space>
+  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
+
+  let objects: Item[] = []
+
+  const objsQ = createQuery()
+  $: objsQ.query(
+    _class,
+    {
+      space,
+      ...query,
+      ...(search !== '' ? { $search: search } : {})
+    },
+    (result) => {
+      objects = result
+    },
+    {
+      ...options
+    }
+  )
+
+  function getStateObjects (
+    objects: Item[],
+    state: TypeState,
+    dragItem?: Item // required for svelte to properly recalculate state.
+  ): ExtItem[] {
+    const stateCards = objects.filter((it) => (it as any)[fieldName] === state._id)
+    stateCards.sort((a, b) => (a as any)[rankFieldName]?.localeCompare((b as any)[rankFieldName]))
+    return stateCards.map((it, idx, arr) => ({ it, prev: arr[idx - 1], next: arr[idx + 1] }))
+  }
+
+  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,
+        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
+    }
+    let updates: DocumentUpdate<Item> = {}
+
+    if (dragCardInitialState !== state) {
+      updates = {
+        ...updates,
+        [fieldName]: state
+      }
+    }
+
+    const dragCardRank = (dragCard as any)[rankFieldName]
+    if (dragCardInitialRank !== (dragCard as any)[rankFieldName]) {
+      updates = {
+        ...updates,
+        [rankFieldName]: dragCardRank
+      }
+    }
+
+    if (Object.keys(updates).length > 0) {
+      await updateItem(dragCard, updates)
+    }
+    dragCard = undefined
+  }
+
+  const client = getClient()
+
+  let dragCard: Item | undefined
+  let dragCardInitialRank: string
+  let dragCardInitialState: StateType
+
+  let isDragging = false
+
+  async function updateDone (query: DocumentUpdate<Item>): Promise<void> {
+    isDragging = false
+    if (dragCard === undefined) {
+      return
+    }
+    await updateItem(dragCard, query)
+  }
+  function doCalcRank (
+    object: { prev?: Item; it: Item; next?: Item },
+    event: DragEvent & { currentTarget: EventTarget & HTMLDivElement }
+  ): string {
+    const rect = event.currentTarget.getBoundingClientRect()
+
+    if (event.clientY < rect.top + (rect.height * 2) / 3) {
+      return calcRank(object.prev, object.it)
+    } else {
+      return calcRank(object.it, object.next)
+    }
+  }
+  const slideD = (node: any, args: any) => (args.isDragging ? slide(node, args) : {})
+
+  function panelDragOver (event: Event, state: TypeState): void {
+    event.preventDefault()
+    const card = dragCard as any
+    if (card !== undefined && card[fieldName] !== state._id) {
+      card[fieldName] = state._id
+      const objs = getStateObjects(objects, state)
+      card[rankFieldName] = calcRank(objs[objs.length - 1]?.it, undefined)
+    }
+  }
+  function cardDragOver (evt: CardDragEvent, object: ExtItem): void {
+    if (dragCard !== undefined) {
+      ;(dragCard as any)[rankFieldName] = doCalcRank(object, evt)
+    }
+  }
+  function cardDrop (evt: CardDragEvent, object: ExtItem): void {
+    if (dragCard !== undefined) {
+      ;(dragCard as any)[rankFieldName] = doCalcRank(object, evt)
+    }
+    isDragging = false
+  }
+  function onDragStart (object: ExtItem, state: TypeState): void {
+    dragCardInitialState = state._id
+    dragCardInitialRank = (object.it as any)[rankFieldName]
+    dragCard = object.it
+    isDragging = true
+  }
+  // eslint-disable-next-line
+  let dragged: boolean = false
+
+  function toAny (object: any): any {
+    return object
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  let stateObjects: ExtItem[]
+</script>
+
+<div class="flex-col kanban-container">
+  <div class="scrollable">
+    <ScrollBox>
+      <div class="kanban-content">
+        {#each states as state}
+          {@const stateObjects = getStateObjects(objects, state, dragCard)}
+          <KanbanPanel
+            label={state.title}
+            color={getPlatformColor(state.color)}
+            on:dragover={(event) => panelDragOver(event, state)}
+            on:drop={() => {
+              move(state._id)
+              isDragging = false
+            }}
+            customHeader={$$slots.header !== undefined}
+          >            
+            <svelte:fragment slot='header'>
+              <slot name="header" state={toAny(state)} count={stateObjects.length}/>
+            </svelte:fragment>
+            <slot name="beforeCard" {state} />
+            {#each stateObjects as object}
+              {@const dragged = isDragging && object.it._id === dragCard?._id}
+              <div
+                transition:slideD|local={{ isDragging }}
+                class="step-tb75"
+                on:dragover|preventDefault={(evt) => cardDragOver(evt, object)}
+                on:drop|preventDefault={(evt) => cardDrop(evt, object)}
+              >
+                <div
+                  class="card-container"
+                  draggable={true}
+                  class:draggable={true}
+                  on:dragstart
+                  on:dragend
+                  class:dragged={dragged}
+                  on:dragstart={() => onDragStart(object, state)}
+                  on:dragend={() => {
+                    isDragging = false
+                  }}
+                >
+                  <slot name="card" object={toAny(object.it)} dragged={dragged} />
+                </div>
+              </div>
+            {/each}
+            <slot name="afterCard" {state} />
+          </KanbanPanel>
+        {/each}
+        <slot name="additionalPanel" />
+      </div>
+    </ScrollBox>
+  </div>
+  {#if isDragging}
+    <slot name="doneBar" onDone={updateDone} />
+  {/if}
+</div>
+
+<style lang="scss">
+  .kanban-container {
+    position: relative;
+    height: 100%;
+    background: var(--board-bg-color);
+  }
+  .kanban-content {
+    display: flex;
+    margin: 1.5rem 2rem;
+    height: 100%;
+  }
+
+  .scrollable {
+    height: 100%;
+  }
+  .card-container {
+    display: flex;
+    flex-direction: column;
+    padding: .5rem 1rem;
+    background-color: var(--board-card-bg-color);
+    border: 1px solid var(--board-card-bg-color);
+    border-radius: .25rem;
+    user-select: none;
+
+    &:hover { 
+      background-color: var(--board-card-bg-hover); 
+    }
+    &.draggable {
+      cursor: grab;
+    }
+    &.dragged {
+      padding: 1rem;
+      background-color: var(--board-bg-color);
+      border: unset;
+    }
+  }
+</style>
diff --git a/plugins/task-resources/src/components/kanban/KanbanCardEmpty.svelte b/packages/kanban/src/components/KanbanCardEmpty.svelte
similarity index 77%
rename from plugins/task-resources/src/components/kanban/KanbanCardEmpty.svelte
rename to packages/kanban/src/components/KanbanCardEmpty.svelte
index 35ad2e9ab5..af77e1e6e4 100644
--- a/plugins/task-resources/src/components/kanban/KanbanCardEmpty.svelte
+++ b/packages/kanban/src/components/KanbanCardEmpty.svelte
@@ -1,5 +1,5 @@
 <!--
-// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// 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
@@ -13,19 +13,8 @@
 // limitations under the License.
 -->
 
-<script lang="ts">
-  import type { IntlString } from '@anticrm/platform'
-  import { Label } from '@anticrm/ui'
-  import { IconAdd } from '@anticrm/ui'
-
-  export let label: IntlString
-</script>
-
 <div class="card-container">
-  <div class="icon">
-    <IconAdd size={'small'} />
-  </div>
-  <Label {label} />
+  <slot/>
 </div>
 
 <style lang="scss">
diff --git a/plugins/task-resources/src/components/kanban/KanbanPanel.svelte b/packages/kanban/src/components/KanbanPanel.svelte
similarity index 61%
rename from plugins/task-resources/src/components/kanban/KanbanPanel.svelte
rename to packages/kanban/src/components/KanbanPanel.svelte
index 70058ba2ba..f0a20490ac 100644
--- a/plugins/task-resources/src/components/kanban/KanbanPanel.svelte
+++ b/packages/kanban/src/components/KanbanPanel.svelte
@@ -1,5 +1,5 @@
 <!--
-// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// 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
@@ -12,29 +12,27 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 -->
-
 <script lang="ts">
   import { ScrollBox } from '@anticrm/ui'
 
   export let label: string
   export let color: string
-  // export let counter: number
-  // export let addAction: () => void | undefined
+  export let customHeader: boolean
 </script>
 
 <div class="panel-container step-lr75">
-  <div class="header">
-    <div class="bar" style="background-color: {color}" />
-    <div class="flex-between label">
-      <div>
-        <span class="lines-limit-2">{label}</span>
-        <!-- <span>({counter})</span> -->
+  {#if customHeader}
+    <slot name="header" />
+  {:else}
+    <div class="header">
+      <div class="bar" style="background-color: {color}" />
+      <div class="flex-between label">
+        <div>
+          <span class="lines-limit-2">{label}</span>
+        </div>
       </div>
-      <!-- <div class="tool ml-3" on:click|preventDefault={addAction}>
-        <IconAdd size={'small'} />
-      </div> -->
     </div>
-  </div>
+  {/if}
   <div class="scroll" on:dragover on:drop>
     <ScrollBox vertical>
       <slot />
@@ -51,7 +49,7 @@
     height: 100%;
     background-color: transparent;
     border: 1px solid transparent;
-    border-radius: .25rem;
+    border-radius: 0.25rem;
 
     .header {
       display: flex;
@@ -61,28 +59,18 @@
       user-select: none;
 
       .bar {
-        height: .375rem;
-        border-radius: .25rem;
+        height: 0.375rem;
+        border-radius: 0.25rem;
       }
       .label {
-        padding: 0 .5rem 0 1rem;
+        padding: 0 0.5rem 0 1rem;
         height: 100%;
         font-weight: 500;
         color: var(--theme-caption-color);
-        // span {
-        //   font-weight: 400;
-        //   color: var(--theme-content-dark-color);
-        // }
       }
-      // .tool {
-      //   opacity: .4;
-      //   cursor: pointer;
-      //   &:hover { opacity: 1; }
-      // }
     }
 
-    .scroll {
-      margin: 0 .75rem .75rem;
+    .scroll {      
       min-height: 0;
       height: 100%;
     }
diff --git a/packages/kanban/src/index.ts b/packages/kanban/src/index.ts
new file mode 100644
index 0000000000..bab537dc0c
--- /dev/null
+++ b/packages/kanban/src/index.ts
@@ -0,0 +1,19 @@
+//
+// 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.
+//
+
+export * from './types'
+
+export { default as Kanban } from './components/Kanban.svelte'
+export { default as KanbanCardEmpty } from './components/KanbanCardEmpty.svelte'
diff --git a/packages/kanban/src/types.ts b/packages/kanban/src/types.ts
new file mode 100644
index 0000000000..ba7e52eadb
--- /dev/null
+++ b/packages/kanban/src/types.ts
@@ -0,0 +1,8 @@
+import { Doc } from '@anticrm/core'
+
+/**
+ * @public
+ */
+export interface DocWithRank extends Doc {
+  rank: string
+}
diff --git a/packages/kanban/src/utils.ts b/packages/kanban/src/utils.ts
new file mode 100644
index 0000000000..ae91f408bb
--- /dev/null
+++ b/packages/kanban/src/utils.ts
@@ -0,0 +1,44 @@
+//
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+//
+// 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.
+//
+
+import { LexoRank, LexoDecimal, LexoNumeralSystem36 } from 'lexorank'
+import LexoRankBucket from 'lexorank/lib/lexoRank/lexoRankBucket'
+
+/**
+ * @public
+ */
+export const genRanks = (count: number): Generator<string, void, unknown> =>
+  (function * () {
+    const sys = new LexoNumeralSystem36()
+    const base = 36
+    const max = base ** 6
+    const gap = LexoDecimal.parse(Math.trunc(max / (count + 2)).toString(base), sys)
+    let cur = LexoDecimal.parse('0', sys)
+
+    for (let i = 0; i < count; i++) {
+      cur = cur.add(gap)
+      yield new LexoRank(LexoRankBucket.BUCKET_0, cur).toString()
+    }
+  })()
+
+/**
+ * @public
+ */
+export const calcRank = (prev?: { rank: string }, next?: { rank: string }): string => {
+  const a = prev?.rank !== undefined ? LexoRank.parse(prev.rank) : LexoRank.min()
+  const b = next?.rank !== undefined ? LexoRank.parse(next.rank) : LexoRank.max()
+
+  return a.between(b).toString()
+}
diff --git a/packages/kanban/svelte.config.js b/packages/kanban/svelte.config.js
new file mode 100644
index 0000000000..944a06f73e
--- /dev/null
+++ b/packages/kanban/svelte.config.js
@@ -0,0 +1,5 @@
+const sveltePreprocess = require('svelte-preprocess')
+
+module.exports = {
+    preprocess: sveltePreprocess()
+};
\ No newline at end of file
diff --git a/packages/kanban/tsconfig.json b/packages/kanban/tsconfig.json
new file mode 100644
index 0000000000..cabe5aefad
--- /dev/null
+++ b/packages/kanban/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "target": "esnext",
+    "module": "esnext",
+    "declaration": true,
+    "outDir": "./lib",
+    "strict": true,
+    "esModuleInterop": true,
+    "lib": [
+      "esnext",
+      "dom"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 5df57b7477..1c1a90fee8 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -361,6 +361,7 @@ p:last-child { margin-block-end: 0; }
 .h-full { height: 100%; }
 .h-2 { height: .5rem; }
 .h-9 { height: 2.25rem; }
+.h-18 { height: 4.5rem; }
 .w-full { width: 100%;  }
 .w-9 { width: 2.25rem; }
 .w-85 {width: 21.25rem; }
diff --git a/packages/ui/src/components/calendar/YearCalendar.svelte b/packages/ui/src/components/calendar/YearCalendar.svelte
index ecb05f7eab..a147a229e8 100644
--- a/packages/ui/src/components/calendar/YearCalendar.svelte
+++ b/packages/ui/src/components/calendar/YearCalendar.svelte
@@ -13,8 +13,6 @@
 // limitations under the License.
 -->
 <script type="ts">
-import { dataset_dev } from 'svelte/internal';
-
   import MonthCalendar from './MonthCalendar.svelte'
 
   /**
@@ -36,6 +34,7 @@ import { dataset_dev } from 'svelte/internal';
     date.setMonth(m)
     return date
   }
+  /* eslint-disable no-undef */
 </script>
 
 <div class="year-erp-calendar">
@@ -43,7 +42,6 @@ import { dataset_dev } from 'svelte/internal';
     <div class="antiComponentBox mt-2 mb-2 ml-2 mr-2 flex-grow" style={`min-width: ${minWidth};`}>
       {getMonthName(month(value, m))}
       <MonthCalendar {cellHeight} weekFormat="narrow" bind:value currentDate={month(currentDate, m)} {mondayStart} on:change>
-        <!----> eslint-disable-next-line no-undef -->
         <svelte:fragment slot="cell" let:date={date}>
           <slot name="cell" date={date} />
         </svelte:fragment>
diff --git a/plugins/board-assets/lang/en.json b/plugins/board-assets/lang/en.json
index e7933430d5..e585a81e39 100644
--- a/plugins/board-assets/lang/en.json
+++ b/plugins/board-assets/lang/en.json
@@ -41,6 +41,9 @@
     "Watch": "Watch",
     "Archive": "Archive",
     "HideDetails": "Hide Details",
-    "ShowDetails": "Show Details"
+    "ShowDetails": "Show Details",
+    "NewList": "Add another list",
+    "AddList": "Add list",
+    "NewListPlaceholder": "Enter list title..."
   }
 }
\ No newline at end of file
diff --git a/plugins/board-assets/lang/ru.json b/plugins/board-assets/lang/ru.json
index 87f10ce475..0283ddd8a1 100644
--- a/plugins/board-assets/lang/ru.json
+++ b/plugins/board-assets/lang/ru.json
@@ -41,6 +41,9 @@
     "Watch": "Отслеживать",
     "Archive": "Архивировать",
     "HideDetails": "Спрятать",
-    "ShowDetails": "Показать"
+    "ShowDetails": "Показать",
+    "NewList": "Добавить еще одну колонку",
+    "AddList": "Добавить колонку",
+    "NewListPlaceholder": "Введите заголовок колонки..."
   }
 }
\ No newline at end of file
diff --git a/plugins/board-resources/package.json b/plugins/board-resources/package.json
index 31c6834e3a..3461c2e718 100644
--- a/plugins/board-resources/package.json
+++ b/plugins/board-resources/package.json
@@ -49,6 +49,7 @@
     "@anticrm/view": "~0.6.0",
     "@anticrm/view-resources": "~0.6.0",
     "@anticrm/workbench": "~0.6.1",
-    "svelte": "^3.46"
+    "svelte": "^3.46",
+    "@anticrm/kanban": "~0.6.0"
   }
 }
diff --git a/plugins/board-resources/src/components/KanbanCard.svelte b/plugins/board-resources/src/components/KanbanCard.svelte
index 705efea31d..09e523a280 100644
--- a/plugins/board-resources/src/components/KanbanCard.svelte
+++ b/plugins/board-resources/src/components/KanbanCard.svelte
@@ -24,7 +24,6 @@
   import board from '../plugin'
 
   export let object: WithLookup<Card>
-  export let draggable: boolean
   export let dragged: boolean
 
   function showMenu (ev?: Event): void {
@@ -36,56 +35,31 @@
   }
 </script>
 
-<div class="card-container" {draggable} class:draggable on:dragstart on:dragend class:dragged>
-  <div class="flex-between mb-4">
-    <div class="flex-col">
-      <div class="fs-title cursor-pointer" on:click={showLead}>{object.title}</div>
-    </div>
-    <div class="flex-row-center">
-      <div class="mr-2">
-        <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
-      </div>
-      <ActionIcon
-        label={board.string.More}
-        action={(evt) => {
-          showMenu(evt)
-        }}
-        icon={IconMoreH}
-        size={'small'}
-      />
-    </div>
+<div class="flex-between mb-4">
+  <div class="flex-col">
+    <div class="fs-title cursor-pointer" on:click={showLead}>{object.title}</div>
   </div>
-  <div class="flex-between">
-    <div class="flex-row-center">
-      {#if (object.attachments ?? 0) > 0}
-        <div class="step-lr75"><AttachmentsPresenter value={object} /></div>
-      {/if}
-      {#if (object.comments ?? 0) > 0}
-        <div class="step-lr75"><CommentsPresenter value={object} /></div>
-      {/if}
+  <div class="flex-row-center">
+    <div class="mr-2">
+      <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
     </div>
+    <ActionIcon
+      label={board.string.More}
+      action={(evt) => {
+        showMenu(evt)
+      }}
+      icon={IconMoreH}
+      size={'small'}
+    />
+  </div>
+</div>
+<div class="flex-between">
+  <div class="flex-row-center">
+    {#if (object.attachments ?? 0) > 0}
+      <div class="step-lr75"><AttachmentsPresenter value={object} /></div>
+    {/if}
+    {#if (object.comments ?? 0) > 0}
+      <div class="step-lr75"><CommentsPresenter value={object} /></div>
+    {/if}
   </div>
 </div>
-
-<style lang="scss">
-  .card-container {
-    display: flex;
-    flex-direction: column;
-    padding: 0.5rem 1rem;
-    background-color: var(--board-card-bg-color);
-    border: 1px solid var(--board-card-bg-color);
-    border-radius: 0.25rem;
-    user-select: none;
-
-    &:hover {
-      background-color: var(--board-card-bg-hover);
-    }
-    &.draggable {
-      cursor: grab;
-    }
-    &.dragged {
-      padding: 1rem;
-      background-color: var(--board-bg-color);
-    }
-  }
-</style>
diff --git a/plugins/task-resources/src/components/kanban/KanbanPanelEmpty.svelte b/plugins/board-resources/src/components/KanbanPanelEmpty.svelte
similarity index 75%
rename from plugins/task-resources/src/components/kanban/KanbanPanelEmpty.svelte
rename to plugins/board-resources/src/components/KanbanPanelEmpty.svelte
index d3ce6945e5..cd23167c78 100644
--- a/plugins/task-resources/src/components/kanban/KanbanPanelEmpty.svelte
+++ b/plugins/board-resources/src/components/KanbanPanelEmpty.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { IconAdd, Button, EditBox, ActionIcon, IconClose } from '@anticrm/ui'
-    import { createEventDispatcher } from 'svelte';
-    import tracker from '../../plugin';
+    import { ActionIcon, Button, EditBox, IconAdd, IconClose } from '@anticrm/ui'
+    import { createEventDispatcher } from 'svelte'
+    import board from '../plugin'
 
     const dispatch = createEventDispatcher()
 
@@ -9,10 +9,10 @@
     let newPanelTitle = ''
 
     async function onAdd () {
-        if (!newPanelTitle) return;
-        dispatch('add', newPanelTitle)
-        newPanelTitle = ''
-        isAdding = false
+      if (!newPanelTitle) return
+      dispatch('add', newPanelTitle)
+      newPanelTitle = ''
+      isAdding = false
     }
 </script>
 
@@ -21,13 +21,13 @@
         <EditBox
             bind:value={newPanelTitle}
             maxWidth={'19rem'}
-            placeholder={tracker.string.NewListPlaceholder}
+            placeholder={board.string.NewListPlaceholder}
             focus={true}
         />
         <div class="list-add-controls">
             <Button
                 icon={IconAdd}
-                label={tracker.string.AddList}
+                label={board.string.AddList}
                 justify={'left'}
                 on:click={() => { onAdd() }}
             />
@@ -40,7 +40,7 @@
     {:else}
         <Button
         icon={IconAdd}
-        label={tracker.string.NewList}
+        label={board.string.NewList}
         justify={'left'}
         on:click={() => { isAdding = true }}
         />
diff --git a/plugins/board-resources/src/components/KanbanView.svelte b/plugins/board-resources/src/components/KanbanView.svelte
index a97e406556..01da619192 100644
--- a/plugins/board-resources/src/components/KanbanView.svelte
+++ b/plugins/board-resources/src/components/KanbanView.svelte
@@ -13,16 +13,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 -->
-
 <script lang="ts">
   import { Card } from '@anticrm/board'
-  import { Class, FindOptions, Ref, SortingOrder } from '@anticrm/core'
+  import { Class, FindOptions, Ref, SortingOrder, WithLookup } from '@anticrm/core'
+  import { Kanban as KanbanUI } from '@anticrm/kanban'
   import { createQuery, getClient } from '@anticrm/presentation'
   import type { Kanban, SpaceWithStates, State } from '@anticrm/task'
-  import { calcRank } from '@anticrm/task'
-  import task from '@anticrm/task'
-  import { Kanban as KanbanUI, KanbanPanelEmpty } from '@anticrm/task-resources'
-  
+  import task, { calcRank } from '@anticrm/task'
+  import KanbanCard from './KanbanCard.svelte'
+  import KanbanPanelEmpty from './KanbanPanelEmpty.svelte'
+
   export let _class: Ref<Class<Card>>
   export let space: Ref<SpaceWithStates>
   export let search: string
@@ -32,35 +32,53 @@
   let states: State[] = []
 
   const kanbanQuery = createQuery()
-  $: kanbanQuery.query(task.class.Kanban, { attachedTo: space }, result => { kanban = result[0] })
+  $: kanbanQuery.query(task.class.Kanban, { attachedTo: space }, (result) => {
+    kanban = result[0]
+  })
 
   const statesQuery = createQuery()
   $: if (kanban !== undefined) {
-    statesQuery.query(task.class.State, { space: kanban.space }, result => { states = result }, {
-      sort: {
-        rank: SortingOrder.Ascending
+    statesQuery.query(
+      task.class.State,
+      { space: kanban.space },
+      (result) => {
+        states = result
+      },
+      {
+        sort: {
+          rank: SortingOrder.Ascending
+        }
       }
-    })
+    )
+  }
+  function castObject (object: any): WithLookup<Card> {
+    return object as WithLookup<Card>
   }
 
   const client = getClient()
 
   async function addItem (title: any) {
     const lastOne = await client.findOne(
-        task.class.State,
-        { space },
-        { sort: { rank: SortingOrder.Descending } }
+      task.class.State,
+      { space },
+      { sort: { rank: SortingOrder.Descending } }
     )
     await client.createDoc(task.class.State, space, {
-        title,
-        color: 9,
-        rank: calcRank(lastOne, undefined)
+      title,
+      color: 9,
+      rank: calcRank(lastOne, undefined)
     })
   }
+  /* eslint-disable no-undef */
 </script>
 
-<KanbanUI {_class} {space} {search} {options} stateQuery={{ doneState: null }} states={states}>
+<KanbanUI {_class} {space} {search} {options} query={{ doneState: null }} states={states}
+  fieldName={'state'} rankFieldName={'rank'}>
+  <svelte:fragment slot='card' let:object let:dragged>
+    <KanbanCard object={castObject(object)} {dragged} />
+  </svelte:fragment>
+
   <svelte:fragment slot='additionalPanel'>
-    <KanbanPanelEmpty on:add={(e) => {addItem(e.detail)}} />
+    <KanbanPanelEmpty on:add={(e) => { addItem(e.detail) }} />
   </svelte:fragment>
 </KanbanUI>
diff --git a/plugins/board-resources/src/plugin.ts b/plugins/board-resources/src/plugin.ts
index 78fe882724..7c1fcaed37 100644
--- a/plugins/board-resources/src/plugin.ts
+++ b/plugins/board-resources/src/plugin.ts
@@ -62,7 +62,10 @@ export default mergeIds(boardId, board, {
     Watch: '' as IntlString,
     Archive: '' as IntlString,
     HideDetails: '' as IntlString,
-    ShowDetails: '' as IntlString
+    ShowDetails: '' as IntlString,
+    NewList: '' as IntlString,
+    AddList: '' as IntlString,
+    NewListPlaceholder: '' as IntlString
   },
   component: {
     CreateCustomer: '' as AnyComponent,
diff --git a/plugins/calendar-resources/src/components/CalendarView.svelte b/plugins/calendar-resources/src/components/CalendarView.svelte
index 48e24cc9ae..8a966401c2 100644
--- a/plugins/calendar-resources/src/components/CalendarView.svelte
+++ b/plugins/calendar-resources/src/components/CalendarView.svelte
@@ -107,16 +107,6 @@
     })
   }
 
-  function findDayEvents (events: Event[], date: Date): Event[] {
-    return events.filter((it) => {
-      const d1 = new Date(it.date)
-      const d2 = new Date(it.dueDate ?? it.date)
-      const inDays = areDatesLess(d1, date) && areDatesLess(date, d2)
-
-      return inDays && !isSameDay(d1, date) && !isSameDay(d2, date)
-    })
-  }
-
   interface ShiftType {
     yearShift: number
     monthShift: number
@@ -206,6 +196,7 @@
       }
     }
   }
+  /* eslint-disable no-undef */
 </script>
 
 <div class="fs-title ml-10 mb-2 flex-row-center">
diff --git a/plugins/contact-resources/src/components/PersonPresenter.svelte b/plugins/contact-resources/src/components/PersonPresenter.svelte
index b18c66c26c..a967e624d7 100644
--- a/plugins/contact-resources/src/components/PersonPresenter.svelte
+++ b/plugins/contact-resources/src/components/PersonPresenter.svelte
@@ -22,6 +22,7 @@
 
   export let value: Person
   export let inline: boolean = false
+  export let showLabel = true
 
   async function onClick () {
     showPanel(view.component.EditDoc, value._id, Hierarchy.mixinOrClass(value), 'full')
@@ -29,6 +30,7 @@
 </script>
 
 {#if value}
+  
   <a
     class="flex-presenter"
     class:inline-presenter={inline}
@@ -38,6 +40,8 @@
     <div class="icon">
       <Avatar size={'x-small'} avatar={value.avatar} />
     </div>
-    <span class="label">{formatName(value.name)}</span>
+    {#if showLabel}
+      <span class="label">{formatName(value.name)}</span>
+    {/if}
   </a>
 {/if}
diff --git a/plugins/lead-resources/src/components/KanbanCard.svelte b/plugins/lead-resources/src/components/KanbanCard.svelte
index 435fc82f81..d52a403d7c 100644
--- a/plugins/lead-resources/src/components/KanbanCard.svelte
+++ b/plugins/lead-resources/src/components/KanbanCard.svelte
@@ -26,71 +26,45 @@
   import notification from '@anticrm/notification'
 
   export let object: WithLookup<Lead>
-  export let draggable: boolean
   export let dragged: boolean
 
-  function showMenu (ev?: Event): void {
+  function showMenu(ev?: Event): void {
     showPopup(ContextMenu, { object }, (ev as MouseEvent).target as HTMLElement)
   }
 
-  function showLead () {
+  function showLead() {
     showPanel(view.component.EditDoc, object._id, object._class, 'full')
   }
 </script>
 
-<div class="card-container" {draggable} class:draggable on:dragstart on:dragend class:dragged={dragged}>
-  <div class="flex-between mb-4">
-    <div class="flex-col">
-      <div class="fs-title cursor-pointer" on:click={showLead}>{object.title}</div>
-    </div>
-    <div class="flex-row-center">
-      <div class="mr-2">
-        <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
-      </div>
-      <ActionIcon
-        label={lead.string.More}
-        action={(evt) => {
-          showMenu(evt)
-        }}
-        icon={IconMoreH}
-        size={'small'}
-      />
-    </div>
+<div class="flex-between mb-4">
+  <div class="flex-col">
+    <div class="fs-title cursor-pointer" on:click={showLead}>{object.title}</div>
   </div>
-  <div class="flex-between">
-    {#if object.$lookup?.attachedTo}
-      <ContactPresenter value={object.$lookup.attachedTo} />
-    {/if}
-    <div class="flex-row-center">
-      {#if (object.attachments ?? 0) > 0}
-        <div class="step-lr75"><AttachmentsPresenter value={object} /></div>
-      {/if}
-      {#if (object.comments ?? 0) > 0}
-        <div class="step-lr75"><CommentsPresenter value={object} /></div>
-      {/if}
+  <div class="flex-row-center">
+    <div class="mr-2">
+      <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
     </div>
+    <ActionIcon
+      label={lead.string.More}
+      action={(evt) => {
+        showMenu(evt)
+      }}
+      icon={IconMoreH}
+      size={'small'}
+    />
+  </div>
+</div>
+<div class="flex-between">
+  {#if object.$lookup?.attachedTo}
+    <ContactPresenter value={object.$lookup.attachedTo} />
+  {/if}
+  <div class="flex-row-center">
+    {#if (object.attachments ?? 0) > 0}
+      <div class="step-lr75"><AttachmentsPresenter value={object} /></div>
+    {/if}
+    {#if (object.comments ?? 0) > 0}
+      <div class="step-lr75"><CommentsPresenter value={object} /></div>
+    {/if}
   </div>
 </div>
-
-<style lang="scss">
-  .card-container {
-    display: flex;
-    flex-direction: column;
-    padding: .5rem 1rem;
-    background-color: var(--board-card-bg-color);
-    border: 1px solid var(--board-card-bg-color);
-    border-radius: .25rem;
-    user-select: none;
-
-    &:hover { 
-      background-color: var(--board-card-bg-hover); 
-    }
-    &.draggable {
-      cursor: grab;
-    }
-    &.dragged {
-      padding: 1rem;
-      background-color: var(--board-bg-color);
-    }
-  }
-</style>
diff --git a/plugins/recruit-resources/src/components/KanbanCard.svelte b/plugins/recruit-resources/src/components/KanbanCard.svelte
index 5b8c8d8d9a..8ec6cb2155 100644
--- a/plugins/recruit-resources/src/components/KanbanCard.svelte
+++ b/plugins/recruit-resources/src/components/KanbanCard.svelte
@@ -26,7 +26,6 @@
   import ApplicationPresenter from './ApplicationPresenter.svelte'
 
   export let object: WithLookup<Applicant>
-  export let draggable: boolean
   export let dragged: boolean
 
   function showCandidate () {
@@ -37,72 +36,43 @@
   $: doneTasks = todoItems.filter((it) => it.done)
 </script>
 
-<div class="card-container" {draggable} class:draggable on:dragstart on:dragend class:dragged={dragged}>
-  <div class="flex-between mb-3">
-    <div class="flex-row-center">
-      <Avatar avatar={object.$lookup?.attachedTo?.avatar} size={'medium'} />
-      <div class="flex-grow flex-col min-w-0 ml-2">
-        <div class="fs-title over-underline lines-limit-2" on:click={showCandidate}>
-          {formatName(object.$lookup?.attachedTo?.name ?? '')}
-        </div>
-        <div class="text-sm lines-limit-2">{object.$lookup?.attachedTo?.title ?? ''}</div>
+<div class="flex-between mb-3">
+  <div class="flex-row-center">
+    <Avatar avatar={object.$lookup?.attachedTo?.avatar} size={'medium'} />
+    <div class="flex-grow flex-col min-w-0 ml-2">
+      <div class="fs-title over-underline lines-limit-2" on:click={showCandidate}>
+        {formatName(object.$lookup?.attachedTo?.name ?? '')}
       </div>
+      <div class="text-sm lines-limit-2">{object.$lookup?.attachedTo?.title ?? ''}</div>
     </div>
-    <div class="tool mr-1 flex-row-center">
-      {#if !dragged}
+  </div>
+  <div class="tool mr-1 flex-row-center">
+    {#if !dragged}
       <div class="mr-2">
         <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
       </div>
-        <ActionIcon label={undefined} icon={IconMoreH} size={'small'} />
-      {/if}
-    </div>
-  </div>
-  <div class="flex-between">
-    <div class="flex-row-center">
-      <div class="sm-tool-icon step-lr75">
-        <ApplicationPresenter value={object} />
-        {#if todoItems.length > 0}
-          <Tooltip label={task.string.TodoItems} component={task.component.TodoItemsPopup} props={{ value: object }}>
-            <div class="ml-2">
-              ( {doneTasks?.length}/ {todoItems.length} )
-            </div>
-          </Tooltip>
-        {/if}
-      </div>
-      {#if (object.attachments ?? 0) > 0}
-        <div class="step-lr75"><AttachmentsPresenter value={object} /></div>
-      {/if}
-      {#if (object.comments ?? 0) > 0}
-        <div class="step-lr75"><CommentsPresenter value={object} /></div>
-      {/if}
-    </div>
-    <Avatar avatar={object.$lookup?.assignee?.avatar} size={'x-small'} />
+      <ActionIcon label={undefined} icon={IconMoreH} size={'small'} />
+    {/if}
   </div>
 </div>
-
-<style lang="scss">
-  .card-container {
-    display: flex;
-    flex-direction: column;
-    padding: .5rem 1rem;
-    background-color: var(--board-card-bg-color);
-    border: 1px solid var(--board-card-bg-color);
-    border-radius: .25rem;
-    user-select: none;
-
-    &:hover { 
-      background-color: var(--board-card-bg-hover); 
-    }
-    &.draggable {
-      cursor: grab;
-    }
-    &.dragged {
-      padding: 1rem;
-      background-color: var(--board-bg-color);
-      border: 1px solid var(--board-bg-color);
-    }
-  }
-  .tool {
-    align-self: start;
-  }
-</style>
+<div class="flex-between">
+  <div class="flex-row-center">
+    <div class="sm-tool-icon step-lr75">
+      <ApplicationPresenter value={object} />
+      {#if todoItems.length > 0}
+        <Tooltip label={task.string.TodoItems} component={task.component.TodoItemsPopup} props={{ value: object }}>
+          <div class="ml-2">
+            ( {doneTasks?.length}/ {todoItems.length} )
+          </div>
+        </Tooltip>
+      {/if}
+    </div>
+    {#if (object.attachments ?? 0) > 0}
+      <div class="step-lr75"><AttachmentsPresenter value={object} /></div>
+    {/if}
+    {#if (object.comments ?? 0) > 0}
+      <div class="step-lr75"><CommentsPresenter value={object} /></div>
+    {/if}
+  </div>
+  <Avatar avatar={object.$lookup?.assignee?.avatar} size={'x-small'} />
+</div>
diff --git a/plugins/task-assets/lang/en.json b/plugins/task-assets/lang/en.json
index ec1334284c..8b81c7dd63 100644
--- a/plugins/task-assets/lang/en.json
+++ b/plugins/task-assets/lang/en.json
@@ -27,11 +27,7 @@
     "Unarchive": "Unarchive",
     "MarkAsDone": "Mark as done",
     "MarkAsUndone": "Mark as undone",
-    "Kanban": "Kanban",
-    "NewList": "Add another list",
-    "AddList": "Add list",
-    "NewListPlaceholder": "Enter list title...",
-    
+    "Kanban": "Kanban",    
     "ApplicationLabelTask": "Tasks",
     "Projects": "Projects",
     "CreateProject": "New Project",
diff --git a/plugins/task-assets/lang/ru.json b/plugins/task-assets/lang/ru.json
index 353c48edd4..5fa8ec0095 100644
--- a/plugins/task-assets/lang/ru.json
+++ b/plugins/task-assets/lang/ru.json
@@ -27,11 +27,7 @@
     "Unarchive": "Разархивировать",
     "MarkAsDone": "Отметить выполненным",
     "MarkAsUndone": "Отметить невыполненным",
-    "Kanban": "Канбан",
-    "NewList": "Добавить еще одну колонку",
-    "AddList": "Добавить колонку",
-    "NewListPlaceholder": "Введите заголовок колонки...",
-    
+    "Kanban": "Канбан",    
     "ApplicationLabelTask": "Задачи",
     "Projects": "Проекты",
     "CreateProject": "Новый проект",
diff --git a/plugins/task-resources/package.json b/plugins/task-resources/package.json
index deb7fcc171..9a6e3f942b 100644
--- a/plugins/task-resources/package.json
+++ b/plugins/task-resources/package.json
@@ -48,6 +48,7 @@
     "@anticrm/chunter-resources": "~0.6.0",
     "@anticrm/workbench": "~0.6.1",
     "@anticrm/notification": "~0.6.0",
-    "@anticrm/tags": "~0.6.1"
+    "@anticrm/tags": "~0.6.1",
+    "@anticrm/kanban": "~0.6.0"
   }
 }
diff --git a/plugins/task-resources/src/components/KanbanCard.svelte b/plugins/task-resources/src/components/KanbanCard.svelte
index 91b4492fe8..49eb181ce2 100644
--- a/plugins/task-resources/src/components/KanbanCard.svelte
+++ b/plugins/task-resources/src/components/KanbanCard.svelte
@@ -25,8 +25,6 @@
   import TaskPresenter from './TaskPresenter.svelte'
 
   export let object: WithLookup<Issue>
-  export let draggable: boolean
-  export let dragged: boolean
 
   const showMenu = (ev?: Event): void => {
     showPopup(ContextMenu, { object }, ev ? (ev.target as HTMLElement) : null)
@@ -36,66 +34,41 @@
   $: doneTasks = todoItems.filter((it) => it.done)
 </script>
 
-<div class="card-container" {draggable} class:draggable on:dragstart on:dragend class:dragged={dragged}>
-  <div class="flex-between mb-2">
-    <div class="flex">
-      <TaskPresenter value={object} />
-      {#if todoItems.length > 0}
-        <Tooltip label={task.string.TodoItems} component={task.component.TodoItemsPopup} props={{ value: object }}>
-          <div class="ml-2">
-            ( {doneTasks?.length}/ {todoItems.length} )
-          </div>
-        </Tooltip>
-      {/if}
-    </div>
-    <div class="flex-row-center">
-      <div class="mr-2">
-        <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
-      </div>
-      <ActionIcon
-        label={task.string.More}
-        action={(evt) => {
-          showMenu(evt)
-        }}
-        icon={IconMoreH}
-        size={'small'}
-      />
-    </div>
+<div class="flex-between mb-2">
+  <div class="flex">
+    <TaskPresenter value={object} />
+    {#if todoItems.length > 0}
+      <Tooltip label={task.string.TodoItems} component={task.component.TodoItemsPopup} props={{ value: object }}>
+        <div class="ml-2">
+          ( {doneTasks?.length}/ {todoItems.length} )
+        </div>
+      </Tooltip>
+    {/if}
   </div>
-  <div class="caption-color mb-3 lines-limit-4">{object.name}</div>
-  <!-- <div class="text-sm lines-limit-2">{object.description}</div> -->
-  <div class="flex-between">
-    <div class="flex-row-center">
-      {#if (object.attachments ?? 0) > 0}
-        <div class="step-lr75"><AttachmentsPresenter value={object} /></div>
-      {/if}
-      {#if (object.comments ?? 0) > 0}
-        <div class="step-lr75"><CommentsPresenter value={object} /></div>
-      {/if}
+  <div class="flex-row-center">
+    <div class="mr-2">
+      <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
     </div>
-    <Avatar avatar={object.$lookup?.assignee?.avatar} size={'x-small'} />
+    <ActionIcon
+      label={task.string.More}
+      action={(evt) => {
+        showMenu(evt)
+      }}
+      icon={IconMoreH}
+      size={'small'}
+    />
   </div>
 </div>
-
-<style lang="scss">
-  .card-container {
-    display: flex;
-    flex-direction: column;
-    padding: .5rem 1rem;
-    background-color: var(--board-card-bg-color);
-    border: 1px solid var(--board-card-bg-color);
-    border-radius: .25rem;
-    user-select: none;
-
-    &:hover { 
-      background-color: var(--board-card-bg-hover); 
-    }
-    &.draggable {
-      cursor: grab;
-    }
-    &.dragged {
-      padding: 1rem;
-      background-color: var(--board-bg-color);
-    }
-  }
-</style>
+<div class="caption-color mb-3 lines-limit-4">{object.name}</div>
+<!-- <div class="text-sm lines-limit-2">{object.description}</div> -->
+<div class="flex-between">
+  <div class="flex-row-center">
+    {#if (object.attachments ?? 0) > 0}
+      <div class="step-lr75"><AttachmentsPresenter value={object} /></div>
+    {/if}
+    {#if (object.comments ?? 0) > 0}
+      <div class="step-lr75"><CommentsPresenter value={object} /></div>
+    {/if}
+  </div>
+  <Avatar avatar={object.$lookup?.assignee?.avatar} size={'x-small'} />
+</div>
diff --git a/plugins/task-resources/src/components/kanban/Kanban.svelte b/plugins/task-resources/src/components/kanban/Kanban.svelte
deleted file mode 100644
index 8bd2685528..0000000000
--- a/plugins/task-resources/src/components/kanban/Kanban.svelte
+++ /dev/null
@@ -1,233 +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 core, {
-    AttachedDoc,
-    Class,
-    Doc,
-    DocumentQuery,
-    DocumentUpdate,
-    FindOptions, Ref, Space
-  } from '@anticrm/core'
-  import { getResource } from '@anticrm/platform'
-  import { createQuery, getClient } from '@anticrm/presentation'
-  import task, { calcRank, DocWithRank } from '@anticrm/task'
-  import { AnySvelteComponent, getPlatformColor, Loading, ScrollBox } from '@anticrm/ui'
-  import { slide } from 'svelte/transition'
-  import KanbanPanel from './KanbanPanel.svelte'
-
-  type StateType = any
-  type Item = DocWithRank & { state: StateType; doneState: StateType | null }
-
-  export let _class: Ref<Class<Item>>
-  export let space: Ref<Space>
-  // export let open: AnyComponent
-  export let search: string
-  export let options: FindOptions<Item> | undefined
-  // export let config: string[]
-
-  type TypeState = { _id: StateType; title: string; color: number }
-
-  export let states: TypeState[] = []
-
-  export let stateQuery: DocumentQuery<Item> = {
-    /// doneState: null
-  }
-
-  let objects: Item[] = []
-
-  const objsQ = createQuery()
-  $: objsQ.query(
-    _class,
-    {
-      space,
-      ...stateQuery,
-      ...(search !== '' ? { $search: search } : {})
-    },
-    (result) => {
-      objects = result
-    },
-    {
-      ...options
-    }
-  )
-
-  function getStateObjects (objects: Item[], state: TypeState, dragItem?: Item): {it:Item, prev?:Item, next?: Item}[] {
-    const stateCards = objects.filter(it => it.state === state._id)
-    stateCards.sort((a, b) => a.rank.localeCompare(b.rank))
-    return stateCards.map((it, idx, arr) => ({ it, prev: arr[idx - 1], next: arr[idx + 1] }))
-  }
-
-  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,
-        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
-    }
-    let updates: DocumentUpdate<Item> = {}
-
-    if (dragCardInitialState !== state) {
-      updates = {
-        ...updates,
-        state
-      }
-    }
-  
-    if (dragCardInitialRank !== dragCard.rank) {
-      updates = {
-        ...updates,
-        rank: dragCard.rank
-      }
-    }
-
-    if (Object.keys(updates).length > 0) {
-      await updateItem(dragCard, updates)
-    }
-    dragCard = undefined
-  }
-
-  const client = getClient()
-
-  let dragCard: Item | undefined
-  let dragCardInitialRank: string
-  let dragCardInitialState: StateType
-
-  async function cardPresenter (_class: Ref<Class<Doc>>): Promise<AnySvelteComponent> {
-    const clazz = client.getHierarchy().getClass(_class)
-    const presenterMixin = client.getHierarchy().as(clazz, task.mixin.KanbanCard)
-    return await getResource(presenterMixin.card)
-  }
-
-  let isDragging = false
-
-  async function updateDone (query: DocumentUpdate<Item>): Promise<void> {
-    isDragging = false
-    if (dragCard === undefined) {
-      return
-    }
-    await updateItem(dragCard, query)
-  }
-  function doCalcRank (object: {prev?: Item, it: Item, next?: Item}, event: DragEvent & { currentTarget: EventTarget & HTMLDivElement}): string {
-    const rect = event.currentTarget.getBoundingClientRect()
-
-    if (event.clientY < rect.top + rect.height * 2 / 3) {
-      return calcRank(object.prev, object.it)
-    } else {
-      return calcRank(object.it, object.next)
-    }
-  }
-  const slideD = (node: any, args:any) => args.isDragging ? slide(node, args) : {}
-</script>
-
-{#await cardPresenter(_class)}
-  <Loading />
-{:then presenter}
-  <div class="flex-col kanban-container">
-    <div class="scrollable">
-      <ScrollBox>
-        <div class="kanban-content">
-          {#each states as state}
-            <KanbanPanel
-              label={state.title}
-              color={getPlatformColor(state.color)}
-              on:dragover={(event) => {
-                event.preventDefault()
-                if (dragCard !== undefined && dragCard.state !== state._id) {
-                  dragCard.state = state._id
-                  const objs = getStateObjects(objects, state)
-                  dragCard.rank = calcRank(objs[objs.length - 1]?.it, undefined)
-                }
-              }}
-              on:drop={() => {
-                move(state._id)
-                isDragging = false
-              }}
-            >
-              <!-- <KanbanCardEmpty label={'Create new application'} /> -->
-              {#each getStateObjects(objects, state, dragCard) as object}
-                  <div transition:slideD|local={{ isDragging }}
-                    class="step-tb75"
-                    on:dragover|preventDefault={(evt) => {
-                      if (dragCard !== undefined) {
-                        dragCard.rank = doCalcRank(object, evt)
-                      }
-                    }}
-                    on:drop|preventDefault={(evt) => {
-                      if (dragCard !== undefined) {
-                        dragCard.rank = doCalcRank(object, evt)
-                      }
-                      isDragging = false
-                    }}
-                  >
-                    <svelte:component
-                      this={presenter}
-                      object={object.it}
-                      dragged={isDragging && object.it._id === dragCard?._id}
-                      draggable={true}
-                      on:dragstart={() => {
-                        dragCardInitialState = state._id
-                        dragCardInitialRank = object.it.rank
-                        dragCard = object.it
-                        isDragging = true
-                      }}
-                      on:dragend={() => {
-                        isDragging = false
-                      }}
-                    />
-                  </div>
-              {/each}
-            </KanbanPanel>
-          {/each}
-          <slot name="additionalPanel"/>
-        </div>
-      </ScrollBox>
-    </div>
-    {#if isDragging}
-      <slot name="doneBar" onDone={updateDone} />
-    {/if}
-  </div>
-{/await}
-
-<style lang="scss">
-  .kanban-container {
-    position: relative;
-    height: 100%;
-    background: var(--board-bg-color);
-  }
-  .kanban-content {
-    display: flex;
-    margin: 1.5rem 2rem;
-    height: 100%;
-  }
-
-  .scrollable {
-    height: 100%;
-  }
-</style>
diff --git a/plugins/task-resources/src/components/kanban/KanbanEditor.svelte b/plugins/task-resources/src/components/kanban/KanbanEditor.svelte
index cffc958e15..453be07a49 100644
--- a/plugins/task-resources/src/components/kanban/KanbanEditor.svelte
+++ b/plugins/task-resources/src/components/kanban/KanbanEditor.svelte
@@ -14,10 +14,10 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Class,Ref,SortingOrder } from '@anticrm/core'
-  import { createQuery,getClient } from '@anticrm/presentation'
-  import type { DoneState,Kanban,State } from '@anticrm/task'
-  import task,{ calcRank } from '@anticrm/task'
+  import { Class, Ref, SortingOrder } from '@anticrm/core'
+  import { createQuery, getClient } from '@anticrm/presentation'
+  import type { DoneState, Kanban, State } from '@anticrm/task'
+  import task, { calcRank } from '@anticrm/task'
   import StatesEditor from '../state/StatesEditor.svelte'
 
   export let kanban: Kanban
@@ -34,7 +34,7 @@
   const hierarchy = client.getHierarchy()
 
   const statesQ = createQuery()
-  $: statesQ.query(task.class.State, { space: kanban.space }, result => { states = result}, {
+  $: statesQ.query(task.class.State, { space: kanban.space }, result => { states = result }, {
     sort: {
       rank: SortingOrder.Ascending
     }
diff --git a/plugins/task-resources/src/components/kanban/KanbanView.svelte b/plugins/task-resources/src/components/kanban/KanbanView.svelte
index b5984ee6c3..828b8b0b7c 100644
--- a/plugins/task-resources/src/components/kanban/KanbanView.svelte
+++ b/plugins/task-resources/src/components/kanban/KanbanView.svelte
@@ -16,24 +16,25 @@
 
 <script lang="ts">
   import { Class, FindOptions, Ref, SortingOrder } from '@anticrm/core'
-  import { createQuery } from '@anticrm/presentation'
-  import type { Kanban, SpaceWithStates, State } from '@anticrm/task'
-  import task, { DocWithRank, DoneState } from '@anticrm/task'
-  import KanbanUI from './Kanban.svelte'
+  import { Kanban as KanbanUI } from '@anticrm/kanban'
+  import { getResource } from '@anticrm/platform'
+  import { createQuery, getClient } from '@anticrm/presentation'
+  import type { Kanban, SpaceWithStates, State, Task } from '@anticrm/task'
+  import task from '@anticrm/task'
   import KanbanDragDone from './KanbanDragDone.svelte'
 
-  type Item = DocWithRank & { state: Ref<State>, doneState: Ref<DoneState> | null }
-
-  export let _class: Ref<Class<Item>>
+  export let _class: Ref<Class<Task>>
   export let space: Ref<SpaceWithStates>
   // export let open: AnyComponent
   export let search: string
-  export let options: FindOptions<Item> | undefined
+  export let options: FindOptions<Task> | undefined
   // export let config: string[]
 
   let kanban: Kanban
   let states: State[] = []
 
+  const client = getClient()
+
   const kanbanQuery = createQuery()
   $: kanbanQuery.query(task.class.Kanban, { attachedTo: space }, result => { kanban = result[0] })
 
@@ -45,14 +46,25 @@
       }
     })
   }
+
+  $: clazz = client.getHierarchy().getClass(_class)
+  $: presenterMixin = client.getHierarchy().as(clazz, task.mixin.KanbanCard)
+  $: cardPresenter = getResource(presenterMixin.card)
+  /* eslint-disable no-undef */
 </script>
 
-<KanbanUI {_class} {space} {search} {options} stateQuery={{ doneState: null }} states={states}>
-  // eslint-disable-next-line no-undef
-  <svelte:fragment slot='doneBar' let:onDone={onDone}>
-    <KanbanDragDone {kanban} on:done={(e) => {
-      // eslint-disable-next-line no-undef
-      onDone({ doneState: e.detail._id })
-    }} />
-  </svelte:fragment>
-</KanbanUI>
+{#await cardPresenter then presenter}
+  <KanbanUI {_class} {space} {search} {options} query={{ doneState: null }} states={states}
+    fieldName={'state'} rankFieldName={'rank'}>
+    <svelte:fragment slot='card' let:object let:dragged>
+      <svelte:component this={presenter} {object} {dragged}/>
+    </svelte:fragment>
+    // eslint-disable-next-line no-undef
+    <svelte:fragment slot='doneBar' let:onDone>
+      <KanbanDragDone {kanban} on:done={(e) => {
+        // eslint-disable-next-line no-undef
+        onDone({ doneState: e.detail._id })
+      }} />
+    </svelte:fragment>
+  </KanbanUI>
+{/await}
diff --git a/plugins/task-resources/src/index.ts b/plugins/task-resources/src/index.ts
index 62682b1422..1114623613 100644
--- a/plugins/task-resources/src/index.ts
+++ b/plugins/task-resources/src/index.ts
@@ -43,9 +43,6 @@ import TodoStatePresenter from './components/todos/TodoStatePresenter.svelte'
 import AssignedTasks from './components/AssignedTasks.svelte'
 import task from './plugin'
 
-export { default as Kanban } from './components/kanban/Kanban.svelte'
-export { default as KanbanPanelEmpty } from './components/kanban/KanbanPanelEmpty.svelte'
-
 async function createTask (object: Doc): Promise<void> {
   showPopup(CreateTask, { parent: object._id, space: object.space })
 }
diff --git a/plugins/task-resources/src/plugin.ts b/plugins/task-resources/src/plugin.ts
index e23c9564b4..dfd2e46cf6 100644
--- a/plugins/task-resources/src/plugin.ts
+++ b/plugins/task-resources/src/plugin.ts
@@ -34,10 +34,6 @@ export default mergeIds(taskId, task, {
     TodoDescriptionPlaceholder: '' as IntlString,
     Todos: '' as IntlString,
     TodoName: '' as IntlString,
-    NewList: '' as IntlString,
-    AddList: '' as IntlString,
-    NewListPlaceholder: '' as IntlString,
-
     MakePrivate: '' as IntlString,
     MakePrivateDescription: '' as IntlString,
     TaskProject: '' as IntlString,
diff --git a/plugins/tracker-assets/lang/en.json b/plugins/tracker-assets/lang/en.json
index fc4788a3a3..d2ab5cd5ab 100644
--- a/plugins/tracker-assets/lang/en.json
+++ b/plugins/tracker-assets/lang/en.json
@@ -50,7 +50,8 @@
     "DocumentColor": "",
     "Rank": "",
     "IssueTitlePlaceholder": "Issue title",
-    "IssueDescriptionPlaceholder": "Add description"
+    "IssueDescriptionPlaceholder": "Add description",
+    "AddIssueTooltip": "Add issue..."
   },
   "status": {
    
diff --git a/plugins/tracker-assets/lang/ru.json b/plugins/tracker-assets/lang/ru.json
index 89091261da..649767dc7e 100644
--- a/plugins/tracker-assets/lang/ru.json
+++ b/plugins/tracker-assets/lang/ru.json
@@ -27,7 +27,8 @@
     "Urgent": "Urgent",
     "High": "High",
     "Medium": "Medium",
-    "Low": "Low"
+    "Low": "Low",
+    "AddIssueTooltip": "Добавить задачу..."
   },
   "status": {
    
diff --git a/plugins/tracker-resources/package.json b/plugins/tracker-resources/package.json
index f0b11a6a96..f7ae79f185 100644
--- a/plugins/tracker-resources/package.json
+++ b/plugins/tracker-resources/package.json
@@ -49,6 +49,7 @@
     "@anticrm/view-resources": "~0.6.0",
     "lexorank": "~1.0.4",
     "@anticrm/text-editor": "~0.6.0",
-    "@anticrm/panel": "~0.6.0"
+    "@anticrm/panel": "~0.6.0",
+    "@anticrm/kanban": "~0.6.0"
   }
 }
diff --git a/plugins/tracker-resources/src/components/CreateIssue.svelte b/plugins/tracker-resources/src/components/CreateIssue.svelte
index 835fffc107..9f8f2705c9 100644
--- a/plugins/tracker-resources/src/components/CreateIssue.svelte
+++ b/plugins/tracker-resources/src/components/CreateIssue.svelte
@@ -13,14 +13,12 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Asset, IntlString } from '@anticrm/platform'
-  import contact, { Employee } from '@anticrm/contact'
+  import { Employee } from '@anticrm/contact'
   import core, { Data, generateId, Ref, SortingOrder } from '@anticrm/core'
-  import { OK, Status } from '@anticrm/platform'
-  import { getClient, UserBox } from '@anticrm/presentation'
+  import { Asset, IntlString } from '@anticrm/platform'
+  import { getClient } from '@anticrm/presentation'
   import { Issue, IssuePriority, IssueStatus, Team } from '@anticrm/tracker'
-  import { StyledTextBox } from '@anticrm/text-editor'
-  import ui, { EditBox, Grid, Status as StatusControl, Button, showPopup, DatePresenter, DateRangePresenter } from '@anticrm/ui'
+  import ui, { Button, DateRangePresenter, EditBox, showPopup } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import tracker from '../plugin'
   import { calcRank } from '../utils'
@@ -29,12 +27,12 @@
 
   export let space: Ref<Team>
   export let parent: Ref<Issue> | undefined
+  export let issueStatus = IssueStatus.Backlog
   
   $: _space = space
   $: _parent = parent
-  const status: Status = OK
 
-  let assignee: Ref<Employee> | null = null
+  const assignee: Ref<Employee> | null = null
 
   const object: Data<Issue> = {
     title: '',
@@ -42,7 +40,7 @@
     assignee: null,
     number: 0,
     rank: '',
-    status: IssueStatus.Backlog,
+    status: issueStatus,
     priority: IssuePriority.NoPriority,
     dueDate: null,
     comments: 0
@@ -88,25 +86,26 @@
     await client.createDoc(tracker.class.Issue, _space, value, taskId)
   }
 
-  let startDate: number | null = null
-  let targetDate: number | null = null
+  const startDate: number | null = null
+  const targetDate: number | null = null
   interface IPair {
     icon: Asset
     label: IntlString
   }
   const statuses: Array<IPair> =
     [{ icon: tracker.icon.StatusBacklog, label: tracker.string.Backlog },
-     { icon: tracker.icon.StatusTodo, label: tracker.string.Todo },
-     { icon: tracker.icon.StatusInProgress, label: tracker.string.InProgress },
-     { icon: tracker.icon.StatusDone, label: tracker.string.Done },
-     { icon: tracker.icon.StatusCanceled, label: tracker.string.Canceled }]
-  let selectStatus: IPair = statuses[0]
+      { icon: tracker.icon.StatusTodo, label: tracker.string.Todo },
+      { icon: tracker.icon.StatusInProgress, label: tracker.string.InProgress },
+      { icon: tracker.icon.StatusDone, label: tracker.string.Done },
+      { icon: tracker.icon.StatusCanceled, label: tracker.string.Canceled }]
+  // TODO: Refactor
+  let selectStatus: IPair = statuses[issueStatus]
   const priorities: Array<IPair> =
     [{ icon: tracker.icon.PriorityNoPriority, label: tracker.string.NoPriority },
-     { icon: tracker.icon.PriorityUrgent, label: tracker.string.Urgent },
-     { icon: tracker.icon.PriorityHigh, label: tracker.string.High },
-     { icon: tracker.icon.PriorityMedium, label: tracker.string.Medium },
-     { icon: tracker.icon.PriorityLow, label: tracker.string.Low }]
+      { icon: tracker.icon.PriorityUrgent, label: tracker.string.Urgent },
+      { icon: tracker.icon.PriorityHigh, label: tracker.string.High },
+      { icon: tracker.icon.PriorityMedium, label: tracker.string.Medium },
+      { icon: tracker.icon.PriorityLow, label: tracker.string.Low }]
   let selectPriority: IPair = priorities[0]
 </script>
 
diff --git a/plugins/tracker-resources/src/components/issues/Board.svelte b/plugins/tracker-resources/src/components/issues/Board.svelte
index e69de29bb2..e0f717ec2a 100644
--- a/plugins/tracker-resources/src/components/issues/Board.svelte
+++ b/plugins/tracker-resources/src/components/issues/Board.svelte
@@ -0,0 +1,143 @@
+
+<script lang="ts">
+  import contact from '@anticrm/contact'
+  import { FindOptions, Ref, WithLookup } from '@anticrm/core'
+  import { Kanban } from '@anticrm/kanban'
+  import { createQuery } from '@anticrm/presentation'
+  import { Issue, IssueStatus, Team } from '@anticrm/tracker'
+  import { Button, Component, Icon, IconAdd, IconMoreH, showPopup, Tooltip } from '@anticrm/ui'
+  import view from '@anticrm/view'
+  import tracker from '../../plugin'
+  import CreateIssue from '../CreateIssue.svelte'
+  import IssuePresenter from './IssuePresenter.svelte'
+
+  export let currentSpace: Ref<Team>
+
+  const states = [
+    {
+      _id: IssueStatus.Backlog,
+      title: 'Backlog',
+      color: 0,
+      icon: tracker.icon.StatusBacklog
+    },
+    {
+      _id: IssueStatus.InProgress,
+      title: 'In progress',
+      color: 1,
+      icon: tracker.icon.StatusInProgress
+    },
+    {
+      _id: IssueStatus.Todo,
+      title: 'To do',
+      color: 2,
+      icon: tracker.icon.StatusTodo
+    },
+    {
+      _id: IssueStatus.Done,
+      title: 'Done',
+      color: 3,
+      icon: tracker.icon.StatusDone
+    },
+    {
+      _id: IssueStatus.Canceled,
+      title: 'Canceled',
+      color: 4,
+      icon: tracker.icon.StatusCanceled
+    }
+  ]
+  /* eslint-disable no-undef */
+
+  const spaceQuery = createQuery()
+
+  let currentTeam: Team | undefined
+
+  $: spaceQuery.query(tracker.class.Team, { _id: currentSpace }, (res) => {
+    currentTeam = res.shift()
+  })
+  /* eslint-disable prefer-const */
+  /* eslint-disable no-unused-vars */
+  let issue: Issue
+
+  function toIssue (object:any): WithLookup<Issue> {
+    return object as WithLookup<Issue>
+  }
+
+  const options: FindOptions<Issue> = {
+    lookup: {
+      assignee: contact.class.Employee
+    }
+  }
+</script>
+
+{#if currentTeam}
+  <Kanban
+    _class={tracker.class.Issue}
+    space={currentSpace}
+    search=""
+    {states}
+    {options}
+    query={{}}
+    fieldName={'status'}
+    rankFieldName={'rank'}
+  >
+    <svelte:fragment slot="header" let:state let:count>
+      <div class="header flex">
+        <div class="flex-between label">
+          <div class="flex-row-center gap-2">
+            <Icon icon={state.icon} size={'small'} />
+            <span class="lines-limit-2">{state.title}</span>
+            <span class="counter ml-2">{count}</span>
+          </div>
+          <div class='flex gap-1'>
+            <Tooltip label={tracker.string.AddIssueTooltip} direction={'left'}>
+              <Button icon={IconAdd} kind={'transparent'} on:click={(evt) => {
+                showPopup(CreateIssue, { space: currentSpace, issueStatus: state._id }, evt.target)
+              }}/>
+            </Tooltip> 
+            <Button icon={IconMoreH} kind={'transparent'}/>
+          </div>
+        </div>
+      </div>
+    </svelte:fragment>
+    <svelte:fragment slot="card" let:object>
+      {@const issue = toIssue(object) }
+      <div class='flex-row h-18'>
+        <div class='flex-between mb-2'>
+          <IssuePresenter value={object} {currentTeam}/>
+          {#if issue.$lookup?.assignee }          
+            <Component is={view.component.ObjectPresenter} props={{ value: issue.$lookup.assignee, props: { showLabel: false } }}/> 
+          {/if}
+        </div>
+        <span class='fs-bold title'>
+          {object.title}
+        </span>
+        
+      </div>
+    </svelte:fragment>
+  </Kanban>
+{/if}
+<style lang="scss">
+  .header {
+    display: flex;
+    flex-direction: column;
+    height: 3rem;
+    min-height: 3rem;
+    user-select: none;
+
+    .label {
+      margin-bottom: 0.5rem;
+      height: 100%;
+      width: 100%;
+      font-weight: 500;
+      color: var(--theme-caption-color);
+      border-bottom: 1px solid var(--divider-color);
+      .counter {
+        color: rgba(var(--theme-caption-color), 0.8) !important;
+        font-weight: unset;
+      }
+    }
+  }
+  .title {
+    color: var(--theme-caption-color)
+  }
+</style>
diff --git a/plugins/tracker-resources/src/plugin.ts b/plugins/tracker-resources/src/plugin.ts
index 044cbdcdbb..6096978582 100644
--- a/plugins/tracker-resources/src/plugin.ts
+++ b/plugins/tracker-resources/src/plugin.ts
@@ -49,7 +49,6 @@ export default mergeIds(trackerId, tracker, {
     High: '' as IntlString,
     Medium: '' as IntlString,
     Low: '' as IntlString,
-  
     Title: '' as IntlString,
     Identifier: '' as IntlString,
     Description: '' as IntlString,
@@ -72,7 +71,8 @@ export default mergeIds(trackerId, tracker, {
 
     IssueTitlePlaceholder: '' as IntlString,
     IssueDescriptionPlaceholder: '' as IntlString,
-    TaskUnAssign: '' as IntlString
+    TaskUnAssign: '' as IntlString,
+    AddIssueTooltip: '' as IntlString
   },
   component: {
     NopeComponent: '' as AnyComponent,
diff --git a/plugins/view-resources/src/components/ObjectPresenter.svelte b/plugins/view-resources/src/components/ObjectPresenter.svelte
index 5f44b5f181..fc3a5d0fac 100644
--- a/plugins/view-resources/src/components/ObjectPresenter.svelte
+++ b/plugins/view-resources/src/components/ObjectPresenter.svelte
@@ -23,6 +23,7 @@
   export let _class: Ref<Class<Doc>>
   export let value: Doc | undefined
   export let attributeType: Type<any>
+  export let props: Record<string, any> = {}
 
   const client = getClient()
   let presenter: AttributeModel | undefined
@@ -44,5 +45,5 @@
 </script>
 
 {#if presenter}  
-  <svelte:component this={presenter.presenter} value={doc} {attributeType} inline />
+  <svelte:component this={presenter.presenter} value={doc} {attributeType} {...props} inline />
 {/if}
diff --git a/rush.json b/rush.json
index 2197774c46..341b7ca5a9 100644
--- a/rush.json
+++ b/rush.json
@@ -1257,6 +1257,11 @@
       "packageName": "@anticrm/model-board",
       "projectFolder": "models/board",
       "shouldPublish": true
+    },
+    {
+      "packageName": "@anticrm/kanban",
+      "projectFolder": "packages/kanban",
+      "shouldPublish": true
     }
   ]
 }