diff --git a/models/view/src/plugin.ts b/models/view/src/plugin.ts
index 055893af58..39587b70e2 100644
--- a/models/view/src/plugin.ts
+++ b/models/view/src/plugin.ts
@@ -87,8 +87,7 @@ export default mergeIds(viewId, view, {
     General: '' as IntlString,
     Navigation: '' as IntlString,
     Editor: '' as IntlString,
-    MarkdownFormatting: '' as IntlString,
-    List: '' as IntlString
+    MarkdownFormatting: '' as IntlString
   },
   function: {
     FilterObjectInResult: '' as Resource<(filter: Filter, onUpdate: () => void) => Promise<ObjQueryType<any>>>,
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 8c5f96d631..cf676bb04b 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -122,6 +122,9 @@
   --incoming-msg: rgba(67, 67, 72, .3);
   --outcoming-msg: rgba(67, 67, 72, .6);
 
+  --trans-content-05: rgba(138, 143, 152, .05);
+  --trans-content-10: rgba(138, 143, 152, .1);
+
   --theme-bg-color: #18181e;
   --theme-bg-selection: #282830;
   --theme-bg-checked: #262b39;
@@ -226,7 +229,7 @@
   --dark-color: #90959d;
   --content-color: #3c4149;
   --accent-color: #282a30;
-  --caption-color: #282a30;
+  --caption-color: #131416;
   --white-color: #fff;
   --caret-color: #6e5ed2;
   --warning-color: #f2994a;  // Dark
@@ -275,6 +278,9 @@
   --incoming-msg: rgba(67, 67, 72, .3);
   --outcoming-msg: rgba(67, 67, 72, .6);
 
+  --trans-content-05: rgba(60, 65, 73, .05);
+  --trans-content-10: rgba(60, 65, 73, .1);
+
   --theme-bg-color: #FFFFFF;
   --theme-bg-selection: #F1F1F4;
   --theme-menu-color: #E7E7E7;
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 980ff21b30..4affa10917 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -124,7 +124,10 @@ p:last-child { margin-block-end: 0; }
 
 .text-center { text-align: center; }
 
-.firstLetter span::first-letter { text-transform: uppercase; }
+.firstLetter span{
+  display: inline-block;
+  &::first-letter { text-transform: uppercase; }
+}
 
 .inline-height2 {
   line-height: 200%;
diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte
index b82e94afcc..fd0d691aed 100644
--- a/packages/ui/src/components/Scroller.svelte
+++ b/packages/ui/src/components/Scroller.svelte
@@ -30,6 +30,19 @@
   export let noStretch: boolean = false
   export let divScroll: HTMLElement | undefined = undefined
 
+  export function scroll (top: number, left?: number, behavior: 'auto' | 'smooth' = 'auto') {
+    if (divScroll && divHScroll) {
+      if (top !== 0) divScroll.scroll({ top, left: 0, behavior })
+      if (left !== 0 || left !== undefined) divHScroll.scroll({ top: 0, left, behavior })
+    }
+  }
+  export function scrollBy (top: number, left?: number, behavior: 'auto' | 'smooth' = 'auto') {
+    if (divScroll && divHScroll) {
+      if (top !== 0) divScroll.scrollBy({ top, left: 0, behavior })
+      if (left !== 0 || left !== undefined) divHScroll.scrollBy({ top: 0, left, behavior })
+    }
+  }
+
   const dispatch = createEventDispatcher()
 
   let mask: 'top' | 'bottom' | 'both' | 'none' = 'none'
diff --git a/packages/ui/src/components/TabList.svelte b/packages/ui/src/components/TabList.svelte
index 9903f00897..0dde4e98bc 100644
--- a/packages/ui/src/components/TabList.svelte
+++ b/packages/ui/src/components/TabList.svelte
@@ -43,6 +43,7 @@
 {#if items.length > 0}
   <div class="tablist-container {kind} {size}">
     {#each items as item, i}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div
         bind:this={tabs[i]}
         class="button"
diff --git a/packages/ui/src/components/Timeline.svelte b/packages/ui/src/components/Timeline.svelte
new file mode 100644
index 0000000000..544449dee0
--- /dev/null
+++ b/packages/ui/src/components/Timeline.svelte
@@ -0,0 +1,776 @@
+<!--
+// 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 { fly } from 'svelte/transition'
+  import { Timestamp } from '@hcengineering/core'
+  import { TimelinePoint, TimelineRow, TimelineState } from '../types'
+  import ui, {
+    CheckBox,
+    Icon,
+    Scroller,
+    Button,
+    resizeObserver,
+    MILLISECONDS_IN_DAY,
+    MILLISECONDS_IN_WEEK,
+    IconArrowLeft,
+    IconArrowRight,
+    IconAdd
+  } from '..'
+  import { createEventDispatcher, onMount } from 'svelte'
+
+  export let selectedRows: number[] = []
+  export let selectedRow: number | undefined = undefined
+  export let lines: TimelineRow[] | undefined = undefined
+  export let currentTime: Timestamp = new Date().setHours(0, 0, 0, 0)
+
+  const dispatch = createEventDispatcher()
+  const NOT_ENDED = MILLISECONDS_IN_WEEK * 4
+  let currentDate: Date = new Date(currentTime)
+  $: currentDate = new Date(currentTime)
+
+  export const onObjectChecked = (row: number, value: boolean) => {
+    dispatch('check', { row, value })
+  }
+  export const selectRow = (row: number) => {
+    selectedRow = row
+  }
+  const handleRowFocused = (row: number) => {
+    dispatch('row-focus', row)
+  }
+
+  let panelWidth: number = 320
+  const dayWidth: number = 5
+  let container: HTMLElement
+  let viewbox: HTMLElement
+  let scroller: Scroller
+  let scrollDir: 'horizontal' | 'vertical' | 'none' = 'none'
+
+  const locale = new Intl.NumberFormat().resolvedOptions().locale
+  const nillPoint: TimelinePoint = { label: '', date: currentDate, x: 0 }
+  const nillRect: DOMRect = { x: 0, y: 0, width: 0, height: 0, left: 0, right: 0, top: 0, bottom: 0, toJSON: () => {} }
+  const time: TimelineState = {
+    todayMarker: nillPoint,
+    offsetView: 0,
+    renderedRange: { left: nillPoint, right: nillPoint, firstDays: [] },
+    rows: undefined,
+    months: [],
+    days: [],
+    timelineBox: nillRect,
+    viewBox: nillRect
+  }
+
+  const checkRange = (reverse: boolean) => {
+    if (reverse) {
+      if (time.offsetView * -1 - time.viewBox.width <= time.renderedRange.left.x) renderPrevMonth()
+    } else {
+      if (time.offsetView * -1 + time.viewBox.width * 2 >= time.renderedRange.right.x) renderNextMonth()
+    }
+  }
+
+  const getDateByOffset = (x: number): { date: Date; delta: number } => {
+    const deltaDays = Math.floor(x / dayWidth)
+    const calcDay = new Date(currentTime + deltaDays * MILLISECONDS_IN_DAY)
+    return { date: calcDay, delta: deltaDays }
+  }
+  const getOffsetByDate = (date: Timestamp | Date): number => {
+    const tempDay = new Date(date).setHours(0, 0, 0, 0)
+    const deltaDays = Math.floor((tempDay - currentTime) / MILLISECONDS_IN_DAY)
+    return deltaDays * dayWidth
+  }
+  const getNextMonth = (date: Date): TimelinePoint => {
+    const fDate = new Date(date.getFullYear(), date.getMonth() + 1, 1, 0, 0)
+    const offDate = getOffsetByDate(fDate)
+    const lDate = Intl.DateTimeFormat(locale, { month: 'long' }).format(fDate)
+    return { date: fDate, x: offDate, label: lDate }
+  }
+  const getNextWeek = (date: Date, reverse?: boolean): TimelinePoint => {
+    const fDate = new Date(date.getTime() + MILLISECONDS_IN_WEEK * (reverse ? -1 : 1))
+    const offDate = getOffsetByDate(fDate)
+    const lDate = fDate.getDate().toString()
+    return { date: fDate, x: offDate, label: lDate }
+  }
+
+  const renderPrevMonth = () => {
+    const oldRange: TimelinePoint = time.renderedRange.left
+    const newDate: Date = new Date(oldRange.date.getFullYear(), oldRange.date.getMonth() - 1, 1, 0, 0)
+    const newRange: number = getOffsetByDate(newDate)
+    const newLabel: string = Intl.DateTimeFormat(locale, { month: 'long' }).format(newDate)
+    const newPoint: TimelinePoint = {
+      x: newRange,
+      date: newDate,
+      label: newLabel
+    }
+    time.renderedRange.left = newPoint
+    time.months = [newPoint, ...time.months]
+    while (getNextWeek(time.days[0].date, true).x > newPoint.x) {
+      const prevDay: TimelinePoint = getNextWeek(time.days[0].date, true)
+      time.days = [prevDay, ...time.days]
+    }
+  }
+  const renderNextMonth = () => {
+    const oldRange: TimelinePoint = time.renderedRange.right
+    const newDate: Date = new Date(oldRange.date.getFullYear(), oldRange.date.getMonth() + 1, 1, 0, 0)
+    const newRange: number = getOffsetByDate(newDate)
+    const newLabel: string = Intl.DateTimeFormat(locale, { month: 'long' }).format(newDate)
+    const newPoint: TimelinePoint = {
+      x: newRange,
+      date: newDate,
+      label: newLabel
+    }
+    time.renderedRange.right = newPoint
+    time.months = [...time.months, newPoint]
+    while (getNextWeek(time.days[time.days.length - 1].date).x < newPoint.x) {
+      const nextDay: TimelinePoint = getNextWeek(time.days[time.days.length - 1].date)
+      time.days = [...time.days, nextDay]
+    }
+  }
+
+  const wheelEvent = (e: WheelEvent) => {
+    e = e || window.event
+    const deltaX = -e.deltaX
+    const deltaY = e.deltaY
+    if (scrollDir === 'none' && (Math.abs(deltaX) > 2 || Math.abs(deltaY) > 2)) {
+      if (Math.abs(deltaX) > Math.abs(deltaY)) scrollDir = 'horizontal'
+      else scrollDir = 'vertical'
+    } else if (Math.abs(deltaX) <= 4 && Math.abs(deltaY) <= 4) scrollDir = 'none'
+    time.offsetView += deltaX
+    if (scrollDir === 'horizontal') {
+      mouseMoveEvent(e)
+      checkRange(deltaX > 0)
+    }
+    if (scrollDir === 'vertical') scroller.scrollBy(deltaY)
+    e.preventDefault ? e.preventDefault() : (e.returnValue = false)
+  }
+  const mouseMoveEvent = (e: MouseEvent) => {
+    const cur = e.x - time.viewBox.left
+    if (cur >= 0 && cur <= time.viewBox.width) {
+      const offset = cur - time.offsetView
+      const t = getDateByOffset(offset)
+      time.cursorMarker = {
+        label: t.date.getDate().toString(),
+        x: offset,
+        date: t.date
+      }
+    }
+  }
+  const mouseOutEvent = (e: MouseEvent) => {
+    time.cursorMarker = undefined
+  }
+  const clickEvent = (e: MouseEvent) => {
+    console.log('[Timeline] Cursor: ', time.cursorMarker)
+  }
+
+  onMount(() => {
+    container.addEventListener('wheel', wheelEvent)
+    container.addEventListener('mousemove', mouseMoveEvent)
+    container.addEventListener('mouseout', mouseOutEvent)
+    container.addEventListener('click', clickEvent)
+
+    time.timelineBox = container.getBoundingClientRect()
+    time.viewBox = viewbox.getBoundingClientRect()
+    time.offsetView = Math.floor(time.viewBox.width / 2)
+    time.todayMarker.x = 0
+    time.todayMarker.date = currentDate
+    time.todayMarker.label = Intl.DateTimeFormat(locale, { day: 'numeric', month: 'short' }).format(currentDate)
+
+    let mass: number[] = [currentTime]
+    lines?.forEach((line) => {
+      if (line.items !== undefined) {
+        let tr: number[] = []
+        line.items.forEach((it) => {
+          if (it.startDate) tr = [...tr, it.startDate]
+          if (it.targetDate) tr = [...tr, it.targetDate]
+          else if (it.startDate) tr = [...tr, it.startDate + NOT_ENDED]
+        })
+        if (tr.length > 0) {
+          mass = [...mass, ...tr]
+          tr.sort()
+          const minD: Date = new Date(tr[0])
+          const maxD: Date = new Date(tr[tr.length - 1])
+          const r = {
+            min: {
+              date: minD,
+              x: getOffsetByDate(minD)
+            },
+            max: {
+              date: maxD,
+              x: getOffsetByDate(maxD)
+            }
+          }
+          time.rows ? time.rows.push(r) : (time.rows = [r])
+        } else time.rows ? time.rows.push(null) : (time.rows = [null])
+      } else time.rows ? time.rows.push(null) : (time.rows = [null])
+    })
+    mass.sort()
+
+    let leftRange: number = getOffsetByDate(mass[0]) - time.viewBox.width * 1.5
+    const leftDate: Date = new Date(getDateByOffset(leftRange).date.setDate(1))
+    leftRange = getOffsetByDate(leftDate)
+    time.renderedRange.left = {
+      x: leftRange,
+      date: leftDate,
+      label: Intl.DateTimeFormat(locale, { month: 'long' }).format(leftDate)
+    }
+    let rightRange: number = getOffsetByDate(mass[mass.length - 1]) + time.viewBox.width * 1.5
+    const tr: Date = new Date(getDateByOffset(rightRange).date)
+    const rightDate: Date = new Date(new Date(tr.getFullYear(), tr.getMonth() + 1, 1, 0, 0).getTime() - 1)
+    rightRange = getOffsetByDate(rightDate)
+    time.renderedRange.right = {
+      x: rightRange,
+      date: rightDate,
+      label: Intl.DateTimeFormat(locale, { month: 'long' }).format(rightDate)
+    }
+
+    time.months = [time.renderedRange.left]
+    let i = 0
+    do {
+      const nextMonth: TimelinePoint = getNextMonth(time.months[i].date)
+      time.months = [...time.months, nextMonth]
+      i++
+    } while (getNextMonth(time.months[i].date).x <= time.renderedRange.right.x)
+    time.days = [
+      {
+        x: time.renderedRange.left.x,
+        date: time.renderedRange.left.date,
+        label: '1'
+      }
+    ]
+    i = 0
+    do {
+      const nextWeek: TimelinePoint = getNextWeek(time.days[i].date)
+      time.days = [...time.days, nextWeek]
+      i++
+    } while (getNextWeek(time.days[i].date).x <= time.renderedRange.right.x)
+  })
+
+  let moving: boolean = false
+  let sX: number
+  const splitterStart = (e: MouseEvent) => {
+    if (time.timelineBox.width <= 450) return
+    sX = (e.x - time.viewBox.left) * -1
+    document.addEventListener('mouseup', splitterEnd)
+    document.addEventListener('mousemove', splitterMove)
+    moving = true
+  }
+  const splitterMove = (e: MouseEvent) => {
+    if (e.x - time.timelineBox.left + sX < 300) panelWidth = 300
+    else if (time.timelineBox.right - e.x + sX < 150) panelWidth = time.timelineBox.width - 150
+    else panelWidth = e.x - time.timelineBox.left + sX
+  }
+  const splitterEnd = (e: MouseEvent) => {
+    document.removeEventListener('mousemove', splitterMove)
+    document.removeEventListener('mouseup', splitterEnd)
+    time.viewBox = viewbox.getBoundingClientRect()
+    moving = false
+  }
+</script>
+
+<div
+  class="timeline-container"
+  bind:this={container}
+  use:resizeObserver={() => {
+    time.timelineBox = container.getBoundingClientRect()
+    time.viewBox = viewbox.getBoundingClientRect()
+  }}
+>
+  <div class="timeline-header">
+    <div class="timeline-header__title" style:width={`${panelWidth}px`}>
+      <Button
+        label={ui.string.Today}
+        on:click={() => {
+          time.offsetView = Math.floor(time.viewBox.width / 2)
+        }}
+      />
+    </div>
+    <div class="timeline-header__time" bind:this={viewbox}>
+      <div class="timeline-header__time-content" style:transform={`translateX(${time.offsetView}px)`}>
+        {#if time.months}
+          {#each time.months as month}
+            <div class="month firstLetter" style:left={`${month.x}px`}>
+              {#if month.date.getMonth() === 0}
+                <b class="caption-color">{month.date.getFullYear()}</b>
+              {/if}
+              <span style="firstLetter">{month.label}</span>
+            </div>
+          {/each}
+        {/if}
+        {#if time.days}
+          {#each time.days as day}
+            <div class="day" style:left={`${day.x}px`}>{day.label}</div>
+          {/each}
+        {/if}
+        <div class="cursor" style:left={`${time.todayMarker.x}px`}>{time.todayMarker.date.getDate()}</div>
+        <!-- {#if time.cursorMarker}
+          <div class="cursor" style:left={`${time.cursorMarker.x}px`}>{time.cursorMarker.label}</div>
+        {/if} -->
+      </div>
+    </div>
+  </div>
+  <div class="timeline-background__headers" style:width={`${panelWidth}px`} />
+  <div class="timeline-background__viewbox" style:left={`${panelWidth}px`}>
+    <div class="timeline-wrapped_content" style:transform={`translateX(${time.offsetView}px)`}>
+      {#if time.months}
+        {#each time.months as month}
+          <div class="monthMarker" style:left={`${month.x}px`} />
+        {/each}
+      {/if}
+    </div>
+  </div>
+  {#if lines}
+    <Scroller bind:this={scroller}>
+      {#each lines as line, row}
+        {@const rangeRow = time.rows ? time.rows[row] : null}
+        <div
+          class="listGrid"
+          class:mListGridChecked={selectedRows.find((x) => x === row) !== undefined}
+          class:mListGridSelected={selectedRow === row}
+          on:focus={() => {}}
+          on:mousemove={(ev) => {
+            if (row !== selectedRow) {
+              handleRowFocused(row)
+            }
+            ev.preventDefault()
+          }}
+        >
+          <div class="headerWrapper" style:width={`${panelWidth}px`}>
+            <div class="gridElement">
+              <div class="eListGridCheckBox">
+                <CheckBox
+                  checked={selectedRows.filter((i) => i === row).length > 0}
+                  on:value={(event) => onObjectChecked(row, event.detail)}
+                />
+              </div>
+            </div>
+            <slot {row} />
+          </div>
+          <div class="contentWrapper" class:nullRow={rangeRow === null && !moving}>
+            <div class="timeline-wrapped_content" style:transform={`translateX(${time.offsetView}px)`}>
+              {#if line.items}
+                {#each line.items as item}
+                  {#if item.startDate}
+                    {@const target = item.targetDate ?? item.startDate + NOT_ENDED}
+                    <div
+                      class="project-item"
+                      class:noTarget={item.targetDate === null}
+                      style:left={`${getOffsetByDate(item.startDate)}px`}
+                      style:right={`${getOffsetByDate(target) + dayWidth - 1}px`}
+                      style:width={`${getOffsetByDate(target) - getOffsetByDate(item.startDate) + dayWidth - 1}px`}
+                    >
+                      <div class="project-presenter gap-2">
+                        {#if item.icon}<Icon
+                            icon={item.icon}
+                            size={item.iconSize ?? 'small'}
+                            iconProps={item.iconProps}
+                          />{/if}
+                        {#if item.presenter}<svelte:component this={item.presenter} {...item.props} />{/if}
+                        {#if item.label}<span>{item.label}</span>{/if}
+                      </div>
+                    </div>
+                  {/if}
+                {/each}
+              {/if}
+            </div>
+            {#if line.items}
+              {#if rangeRow !== null && -time.offsetView + time.viewBox.width < rangeRow.min.x}
+                <button
+                  transition:fly={{ duration: 150, x: 50, opacity: 0 }}
+                  class="timeline-action__button right"
+                  on:click={() => {
+                    if (rangeRow !== null) time.offsetView = -getOffsetByDate(rangeRow.min.date) + dayWidth * 5
+                  }}
+                >
+                  <IconArrowRight size={'small'} />
+                </button>
+              {/if}
+              {#if rangeRow !== null && -time.offsetView > rangeRow.max.x}
+                <button
+                  transition:fly={{ duration: 150, x: -50, opacity: 0 }}
+                  class="timeline-action__button left"
+                  on:click={() => {
+                    if (rangeRow !== null) time.offsetView = -getOffsetByDate(rangeRow.min.date) + dayWidth * 5
+                  }}
+                >
+                  <IconArrowLeft size={'small'} />
+                </button>
+              {/if}
+            {/if}
+            {#if rangeRow === null && selectedRow === row && time.cursorMarker && !moving}
+              <button class="timeline-action__button add" style:left={`${time.offsetView + time.cursorMarker.x}px`}>
+                <IconAdd size={'small'} />
+              </button>
+            {/if}
+          </div>
+        </div>
+      {/each}
+    </Scroller>
+    <div class="timeline-foreground__viewbox" style:left={`${panelWidth}px`}>
+      <div class="timeline-wrapped_content" style:transform={`translateX(${time.offsetView}px)`}>
+        <div class="todayMarker" style:left={`${time.todayMarker.x}px`} />
+      </div>
+    </div>
+  {/if}
+  <div class="timeline-splitter" class:moving style:left={`${panelWidth}px`} on:mousedown={splitterStart} />
+</div>
+
+<style lang="scss">
+  .timeline-container {
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+
+    & > * {
+      overscroll-behavior-x: contain;
+    }
+  }
+  .timeline-header {
+    display: flex;
+    align-items: center;
+    min-height: 4rem;
+    border-bottom: 1px solid var(--divider-color);
+  }
+  .timeline-header__title {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding: 0 2.25rem;
+    height: 100%;
+    background-color: var(--body-accent);
+    box-shadow: var(--accent-shadow);
+    // z-index: 2;
+  }
+  .timeline-header__time {
+    // overflow: hidden;
+    position: relative;
+    flex-grow: 1;
+    height: 100%;
+    background-color: var(--body-color);
+    mask-image: linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0) 0,
+      rgba(0, 0, 0, 1) 2rem,
+      rgba(0, 0, 0, 1) calc(100% - 2rem),
+      rgba(0, 0, 0, 0) 100%
+    );
+
+    &-content {
+      width: 100%;
+      height: 100%;
+      will-change: transform;
+
+      .day,
+      .month {
+        position: absolute;
+        pointer-events: none;
+      }
+      .month {
+        width: max-content;
+        top: 0.25rem;
+        font-size: 1rem;
+        color: var(--accent-color);
+
+        &:first-letter {
+          text-transform: uppercase;
+        }
+      }
+      .day {
+        bottom: 0.5rem;
+        font-size: 1rem;
+        color: var(--content-color);
+        transform: translateX(-50%);
+      }
+      .cursor {
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-bottom: 1px;
+        width: 1.75rem;
+        height: 1.75rem;
+        bottom: 0.375rem;
+        font-size: 1rem;
+        font-weight: 600;
+        color: #fff;
+        background-color: var(--primary-bg-color);
+        border-radius: 50%;
+        transform: translateX(-50%);
+        pointer-events: none;
+      }
+    }
+  }
+  .todayMarker,
+  .monthMarker {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 0;
+    height: 100%;
+    pointer-events: none;
+  }
+  .monthMarker {
+    border-left: 1px dashed var(--highlight-select);
+  }
+  .todayMarker {
+    border-left: 1px solid var(--primary-bg-color);
+  }
+
+  .timeline-background__headers,
+  .timeline-background__viewbox,
+  .timeline-foreground__viewbox {
+    overflow: hidden;
+    position: absolute;
+    top: 4rem;
+    bottom: 0;
+    height: 100%;
+    z-index: -1;
+  }
+  .timeline-background__headers {
+    left: 0;
+    background-color: var(--body-accent);
+  }
+  .timeline-background__viewbox,
+  .timeline-foreground__viewbox {
+    right: 0;
+    mask-image: linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0) 0,
+      rgba(0, 0, 0, 1) 2rem,
+      rgba(0, 0, 0, 1) calc(100% - 2rem),
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+  .timeline-foreground__viewbox {
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  .timeline-splitter,
+  .timeline-splitter::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+    transform: translateX(-50%);
+  }
+  .timeline-splitter {
+    width: 1px;
+    background-color: var(--divider-color);
+    cursor: col-resize;
+    z-index: 3;
+    transition-property: width, background-color;
+    transition-timing-function: var(--timing-main);
+    transition-duration: 0.1s;
+    transition-delay: 0s;
+
+    &:hover {
+      width: 3px;
+      background-color: var(--button-border-hover);
+      transition-duration: 0.15s;
+      transition-delay: 0.3s;
+    }
+    &::before {
+      content: '';
+      width: 10px;
+      left: 50%;
+    }
+    &.moving {
+      width: 2px;
+      background-color: var(--primary-edit-border-color);
+      transition-duration: 0.1s;
+      transition-delay: 0s;
+    }
+  }
+
+  .headerWrapper {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    min-width: 0;
+    padding-left: 0.75rem;
+    padding-right: 1.15rem;
+    // border-bottom: 1px solid var(--accent-bg-color);
+  }
+  .contentWrapper {
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    mask-image: linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0) 0,
+      rgba(0, 0, 0, 1) 2rem,
+      rgba(0, 0, 0, 1) calc(100% - 2rem),
+      rgba(0, 0, 0, 0) 100%
+    );
+
+    &.nullRow {
+      cursor: pointer;
+    }
+  }
+  .timeline-wrapped_content {
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    will-change: transform;
+  }
+
+  .timeline-action__button,
+  .project-item {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+    box-shadow: var(--button-shadow);
+  }
+  .project-item {
+    top: 0.25rem;
+    bottom: 0.25rem;
+    background-color: var(--button-bg-color);
+    border: 1px solid var(--button-border-color);
+    border-radius: 0.75rem;
+
+    &:hover {
+      background-color: var(--button-bg-hover);
+      border-color: var(--button-border-hover);
+    }
+    &.noTarget {
+      mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1) 2rem);
+      border-right-color: transparent;
+    }
+
+    .project-presenter {
+      display: flex;
+      align-items: center;
+
+      .space {
+        flex-shrink: 0;
+        width: 0.25rem;
+        min-width: 0.25rem;
+        max-width: 0.25rem;
+      }
+    }
+  }
+  .timeline-action__button {
+    top: 0.625rem;
+    bottom: 0.625rem;
+    width: 2rem;
+    color: var(--content-color);
+    background-color: var(--button-bg-color);
+    border: 1px solid var(--button-border-color);
+    border-radius: 0.5rem;
+
+    // color: var(--caption-color);
+    // font-size: 0.65rem;
+    // font-weight: 600;
+
+    &:hover {
+      color: var(--accent-color);
+      background-color: var(--button-bg-hover);
+      border-color: var(--button-border-hover);
+    }
+
+    &.left {
+      left: 1rem;
+    }
+    &.right {
+      right: 1rem;
+    }
+    &.add {
+      transform: translateX(-50%);
+      pointer-events: none;
+    }
+  }
+
+  .listGrid {
+    display: flex;
+    justify-content: stretch;
+    align-items: center;
+    flex-shrink: 0;
+    width: 100%;
+    height: 3.25rem;
+    min-height: 0;
+    color: var(--caption-color);
+    z-index: 2;
+
+    &.mListGridChecked {
+      .headerWrapper {
+        background-color: var(--highlight-select);
+      }
+      .contentWrapper {
+        background-color: var(--trans-content-05);
+      }
+      .eListGridCheckBox {
+        opacity: 1;
+      }
+    }
+
+    &.mListGridSelected {
+      .headerWrapper {
+        background-color: var(--highlight-select-hover);
+      }
+      .contentWrapper {
+        background-color: var(--trans-content-10);
+      }
+    }
+
+    .eListGridCheckBox {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+    }
+
+    &:hover .eListGridCheckBox {
+      opacity: 1;
+    }
+  }
+
+  .filler {
+    display: flex;
+    flex-grow: 1;
+  }
+
+  .gridElement {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-left: 0.5rem;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+
+  .iconPresenter {
+    padding-left: 0.45rem;
+  }
+
+  .projectPresenter {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    width: 5.5rem;
+    margin-left: 0.5rem;
+  }
+</style>
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 60184b85d9..3eb4057c3d 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -100,6 +100,7 @@ export { default as Scroller } from './components/Scroller.svelte'
 export { default as ScrollerBar } from './components/ScrollerBar.svelte'
 export { default as TabList } from './components/TabList.svelte'
 export { default as Chevron } from './components/Chevron.svelte'
+export { default as Timeline } from './components/Timeline.svelte'
 
 export { default as IconAdd } from './components/icons/Add.svelte'
 export { default as IconBack } from './components/icons/Back.svelte'
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index f4a1ad3e79..b1b337c5ff 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -13,6 +13,7 @@
 // limitations under the License.
 //
 import type { Asset, IntlString } from '@hcengineering/platform'
+import { Timestamp } from '@hcengineering/core'
 import { /* Metadata, Plugin, plugin, */ Resource /*, Service */ } from '@hcengineering/platform'
 import { /* getContext, */ SvelteComponent } from 'svelte'
 
@@ -102,6 +103,7 @@ export interface TabItem {
   icon?: Asset | AnySvelteComponent
   color?: string
   tooltip?: IntlString
+  action?: () => void
 }
 
 export type ButtonKind =
@@ -238,3 +240,43 @@ export interface DeviceOptions {
   twoRows: boolean
   theme?: any
 }
+
+export interface TimelineItem {
+  icon?: Asset | AnySvelteComponent
+  iconSize?: IconSize
+  iconProps?: Record<string, any>
+  presenter?: AnySvelteComponent
+  props?: Record<string, any>
+  label?: string
+
+  startDate: Timestamp
+  targetDate: Timestamp | undefined
+}
+export interface TimelineRow {
+  items: TimelineItem[] | undefined
+}
+export interface TimelinePoint {
+  date: Date
+  x: number
+  label?: string
+}
+export interface TimelineMinMax {
+  min: TimelinePoint
+  max: TimelinePoint
+}
+export type TTimelineRow = TimelineMinMax | null
+export interface TimelineState {
+  todayMarker: TimelinePoint
+  cursorMarker?: TimelinePoint
+  offsetView: number
+  renderedRange: {
+    left: TimelinePoint
+    right: TimelinePoint
+    firstDays: number[]
+  }
+  rows: TTimelineRow[] | undefined
+  months: TimelinePoint[]
+  days: TimelinePoint[]
+  timelineBox: DOMRect
+  viewBox: DOMRect
+}
diff --git a/plugins/tracker-assets/src/index.ts b/plugins/tracker-assets/src/index.ts
index 95dd44ff6c..5c48b1d161 100644
--- a/plugins/tracker-assets/src/index.ts
+++ b/plugins/tracker-assets/src/index.ts
@@ -70,7 +70,9 @@ loadMetadata(tracker.icon, {
   CopyBranch: `${icons}#copyBranch`,
   Duplicate: `${icons}#duplicate`,
   TimeReport: `${icons}#timeReport`,
-  Estimation: `${icons}#timeReport`
+  Estimation: `${icons}#timeReport`,
+
+  Timeline: `${icons}#timeline`
 })
 
 addStringsLoader(trackerId, async (lang: string) => await import(`../lang/${lang}.json`))
diff --git a/plugins/tracker-resources/src/components/projects/ProjectBrowser.svelte b/plugins/tracker-resources/src/components/projects/ProjectBrowser.svelte
index b175c950d9..1a717f1262 100644
--- a/plugins/tracker-resources/src/components/projects/ProjectBrowser.svelte
+++ b/plugins/tracker-resources/src/components/projects/ProjectBrowser.svelte
@@ -18,8 +18,10 @@
   import { IntlString } from '@hcengineering/platform'
   import { createQuery } from '@hcengineering/presentation'
   import { Project } from '@hcengineering/tracker'
-  import { Button, IconAdd, Label, showPopup } from '@hcengineering/ui'
+  import { Button, IconAdd, Label, showPopup, TabList } from '@hcengineering/ui'
+  import type { TabItem } from '@hcengineering/ui'
   import tracker from '../../plugin'
+  import view from '@hcengineering/view'
   import { getIncludedProjectStatuses, projectsTitleMap, ProjectsViewMode } from '../../utils'
   import NewProject from './NewProject.svelte'
   import ProjectsListBrowser from './ProjectsListBrowser.svelte'
@@ -28,6 +30,7 @@
   export let query: DocumentQuery<Project> = {}
   export let search: string = ''
   export let mode: ProjectsViewMode = 'all'
+  export let viewMode: 'list' | 'timeline' = 'list'
 
   const ENTRIES_LIMIT = 200
   const resultProjectsQuery = createQuery()
@@ -72,6 +75,17 @@
 
     mode = newMode
   }
+
+  const modeList: TabItem[] = [
+    { id: 'all', labelIntl: tracker.string.AllProjects, action: () => handleViewModeChanged('all') },
+    { id: 'backlog', labelIntl: tracker.string.BacklogProjects, action: () => handleViewModeChanged('backlog') },
+    { id: 'active', labelIntl: tracker.string.ActiveProjects, action: () => handleViewModeChanged('active') },
+    { id: 'closed', labelIntl: tracker.string.ClosedProjects, action: () => handleViewModeChanged('closed') }
+  ]
+  const viewList: TabItem[] = [
+    { id: 'list', icon: view.icon.List, tooltip: view.string.List },
+    { id: 'timeline', icon: view.icon.Timeline, tooltip: view.string.Timeline }
+  ]
 </script>
 
 <div class="fs-title flex-between header">
@@ -84,45 +98,15 @@
   <Button size="small" icon={IconAdd} label={tracker.string.Project} kind={'primary'} on:click={showCreateDialog} />
 </div>
 <div class="itemsContainer">
-  <div class="flex-center">
-    <div class="flex-center">
-      <div class="buttonWrapper">
-        <Button
-          size="small"
-          shape="rectangle-right"
-          selected={mode === 'all'}
-          label={tracker.string.AllProjects}
-          on:click={() => handleViewModeChanged('all')}
-        />
-      </div>
-      <div class="buttonWrapper">
-        <Button
-          size="small"
-          shape="rectangle"
-          selected={mode === 'backlog'}
-          label={tracker.string.BacklogProjects}
-          on:click={() => handleViewModeChanged('backlog')}
-        />
-      </div>
-      <div class="buttonWrapper">
-        <Button
-          size="small"
-          shape="rectangle"
-          selected={mode === 'active'}
-          label={tracker.string.ActiveProjects}
-          on:click={() => handleViewModeChanged('active')}
-        />
-      </div>
-      <div class="buttonWrapper">
-        <Button
-          size="small"
-          shape="rectangle-left"
-          selected={mode === 'closed'}
-          label={tracker.string.ClosedProjects}
-          on:click={() => handleViewModeChanged('closed')}
-        />
-      </div>
-    </div>
+  <div class="flex-row-center">
+    <TabList
+      items={modeList}
+      selected={mode}
+      kind={'normal'}
+      on:select={(result) => {
+        if (result.detail !== undefined && result.detail.action) result.detail.action()
+      }}
+    />
     <!-- <div class="ml-3 filterButton">
       <Button
         size="small"
@@ -134,19 +118,15 @@
       />
     </div> -->
   </div>
-  <!-- <div class="flex-center">
-    <div class="flex-center">
-      <div class="buttonWrapper">
-        <Button selected size="small" shape="rectangle-right" icon={tracker.icon.ProjectsList} />
-      </div>
-      <div class="buttonWrapper">
-        <Button size="small" shape="rectangle-left" icon={tracker.icon.ProjectsTimeline} />
-      </div>
-    </div>
-    <div class="ml-3">
-      <Button size="small" icon={IconOptions} />
-    </div>
-  </div> -->
+  <TabList
+    items={viewList}
+    selected={viewMode}
+    kind={'secondary'}
+    size={'small'}
+    on:select={(result) => {
+      if (result.detail !== undefined && result.detail.id !== viewMode) viewMode = result.detail.id
+    }}
+  />
 </div>
 <ProjectsListBrowser
   _class={tracker.class.Project}
@@ -163,6 +143,7 @@
     { key: '', presenter: tracker.component.ProjectStatusPresenter }
   ]}
   projects={resultProjects}
+  {viewMode}
 />
 
 <style lang="scss">
@@ -182,16 +163,10 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0.65rem 1.35rem 0.65rem 2.25rem;
-    border-bottom: 1px solid var(--theme-button-border-hovered);
-  }
-
-  .buttonWrapper {
-    margin-right: 1px;
-
-    &:last-child {
-      margin-right: 0;
-    }
+    padding: 0.65rem 0.75rem 0.65rem 2.25rem;
+    background-color: var(--board-bg-color);
+    border-top: 1px solid var(--divider-color);
+    border-bottom: 1px solid var(--divider-color);
   }
 
   // .filterButton {
diff --git a/plugins/tracker-resources/src/components/projects/ProjectPresenter.svelte b/plugins/tracker-resources/src/components/projects/ProjectPresenter.svelte
index 97307fba4a..3718718253 100644
--- a/plugins/tracker-resources/src/components/projects/ProjectPresenter.svelte
+++ b/plugins/tracker-resources/src/components/projects/ProjectPresenter.svelte
@@ -28,20 +28,7 @@
 
 {#if value}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="flex-presenter flex-grow" on:click={navigateToProject}>
-    <span title={value.label} class="projectLabel flex-grow">{value.label}</span>
-  </div>
+  <span title={value.label} class="fs-bold caption-color overflow-label clear-mins" on:click={navigateToProject}>
+    {value.label}
+  </span>
 {/if}
-
-<style lang="scss">
-  .projectLabel {
-    display: block;
-    min-width: 0;
-    font-weight: 500;
-    text-align: left;
-    color: var(--theme-caption-color);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-</style>
diff --git a/plugins/tracker-resources/src/components/projects/ProjectStatusPresenter.svelte b/plugins/tracker-resources/src/components/projects/ProjectStatusPresenter.svelte
index ed6a89b275..87b4f6c55d 100644
--- a/plugins/tracker-resources/src/components/projects/ProjectStatusPresenter.svelte
+++ b/plugins/tracker-resources/src/components/projects/ProjectStatusPresenter.svelte
@@ -40,28 +40,15 @@
 </script>
 
 {#if value}
-  {#if isEditable}
-    <ProjectStatusSelector
-      {kind}
-      {size}
-      {width}
-      {justify}
-      {isEditable}
-      {shouldShowLabel}
-      showTooltip={{ label: tracker.string.SetStatus }}
-      selectedProjectStatus={value.status}
-      onProjectStatusChange={handleProjectStatusChanged}
-    />
-  {:else}
-    <ProjectStatusSelector
-      {kind}
-      {size}
-      {width}
-      {justify}
-      {isEditable}
-      {shouldShowLabel}
-      selectedProjectStatus={value.status}
-      onProjectStatusChange={handleProjectStatusChanged}
-    />
-  {/if}
+  <ProjectStatusSelector
+    {kind}
+    {size}
+    {width}
+    {justify}
+    {isEditable}
+    {shouldShowLabel}
+    showTooltip={isEditable ? { label: tracker.string.SetStatus } : undefined}
+    selectedProjectStatus={value.status}
+    onProjectStatusChange={handleProjectStatusChanged}
+  />
 {/if}
diff --git a/plugins/tracker-resources/src/components/projects/ProjectsListBrowser.svelte b/plugins/tracker-resources/src/components/projects/ProjectsListBrowser.svelte
index d6b1e0809c..5d268dc0c3 100644
--- a/plugins/tracker-resources/src/components/projects/ProjectsListBrowser.svelte
+++ b/plugins/tracker-resources/src/components/projects/ProjectsListBrowser.svelte
@@ -26,19 +26,23 @@
   import { Project } from '@hcengineering/tracker'
   import { onMount } from 'svelte'
   import ProjectsList from './ProjectsList.svelte'
+  import ProjectsTimeline from './ProjectsTimeline.svelte'
 
   export let _class: Ref<Class<Doc>>
   export let itemsConfig: (BuildModelKey | string)[]
   export let loadingProps: LoadingProps | undefined = undefined
   export let projects: Project[] = []
+  export let viewMode: 'list' | 'timeline' = 'list'
 
   const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {
     if (dir === 'vertical') {
-      projectsList.onElementSelected(offset, of)
+      if (viewMode === 'list') projectsList.onElementSelected(offset, of)
+      else projectsTimeline.onElementSelected(offset, of)
     }
   })
 
   let projectsList: ProjectsList
+  let projectsTimeline: ProjectsTimeline
 
   $: if (projectsList !== undefined) {
     listProvider.update(projects)
@@ -55,18 +59,36 @@
   }}
 />
 
-<ProjectsList
-  bind:this={projectsList}
-  {_class}
-  {itemsConfig}
-  {loadingProps}
-  {projects}
-  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)
-  }}
-/>
+{#if viewMode === 'list'}
+  <ProjectsList
+    bind:this={projectsList}
+    {_class}
+    {itemsConfig}
+    {loadingProps}
+    {projects}
+    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)
+    }}
+  />
+{:else}
+  <ProjectsTimeline
+    bind:this={projectsTimeline}
+    {_class}
+    {itemsConfig}
+    {loadingProps}
+    {projects}
+    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)
+    }}
+  />
+{/if}
diff --git a/plugins/tracker-resources/src/components/projects/ProjectsTimeline.svelte b/plugins/tracker-resources/src/components/projects/ProjectsTimeline.svelte
new file mode 100644
index 0000000000..cdd46c495d
--- /dev/null
+++ b/plugins/tracker-resources/src/components/projects/ProjectsTimeline.svelte
@@ -0,0 +1,516 @@
+<!--
+// 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 from '@hcengineering/contact'
+  import { Class, Doc, FindOptions, getObjectValue, Ref, Timestamp } from '@hcengineering/core'
+  import { getClient } from '@hcengineering/presentation'
+  import { Issue, Project } from '@hcengineering/tracker'
+  import { CheckBox, Spinner, Timeline, TimelineRow } from '@hcengineering/ui'
+  import { AttributeModel, BuildModelKey } from '@hcengineering/view'
+  import { buildModel, getObjectPresenter, LoadingProps } from '@hcengineering/view-resources'
+  import { createEventDispatcher } from 'svelte'
+  import tracker from '../../plugin'
+  import ProjectPresenter from './ProjectPresenter.svelte'
+
+  export let _class: Ref<Class<Doc>>
+  export let itemsConfig: (BuildModelKey | string)[]
+  export let selectedObjectIds: Doc[] = []
+  export let selectedRowIndex: number | undefined = undefined
+  export let projects: Project[] | undefined = undefined
+  export let loadingProps: LoadingProps | undefined = undefined
+
+  const dispatch = createEventDispatcher()
+
+  const client = getClient()
+
+  const baseOptions: FindOptions<Issue> = {
+    lookup: {
+      assignee: contact.class.Employee,
+      status: tracker.class.IssueStatus
+    }
+  }
+
+  let personPresenter: AttributeModel
+
+  $: options = { ...baseOptions } as FindOptions<Project>
+  $: selectedObjectIdsSet = new Set<Ref<Doc>>(selectedObjectIds.map((it) => it._id))
+  let selectedRows: number[] = []
+  $: if (selectedObjectIdsSet.size > 0 && projects !== undefined) {
+    const tRows: number[] = []
+    selectedObjectIdsSet.forEach((it) => {
+      const index = projects?.findIndex((f) => f._id === it)
+      if (index !== undefined) tRows.push(index)
+    })
+    selectedRows = tRows
+  } else selectedRows = []
+
+  $: getObjectPresenter(client, contact.class.Person, { key: '' }).then((p) => {
+    personPresenter = p
+  })
+
+  export const onObjectChecked = (docs: Doc[], value: boolean) => {
+    dispatch('check', { docs, value })
+  }
+
+  const handleRowFocused = (object: Doc) => {
+    dispatch('row-focus', object)
+  }
+
+  export const onElementSelected = (offset: 1 | -1 | 0, docObject?: Doc) => {
+    if (!projects) return
+
+    let position =
+      (docObject !== undefined ? projects?.findIndex((x) => x._id === docObject?._id) : selectedRowIndex) ?? -1
+
+    position += offset
+    if (position < 0) position = 0
+    if (position >= projects.length) position = projects.length - 1
+    selectedRowIndex = position
+    handleRowFocused(projects[position])
+
+    // if (objectRef) {
+    //   objectRef.scrollIntoView({ behavior: 'auto', block: 'nearest' })
+    // }
+  }
+
+  const getLoadingElementsLength = (props: LoadingProps, options?: FindOptions<Doc>) => {
+    if (options?.limit && options?.limit > 0) {
+      return Math.min(options.limit, props.length)
+    }
+
+    return props.length
+  }
+
+  let itemModels: AttributeModel[] | undefined = undefined
+  $: buildModel({ client, _class, keys: itemsConfig, lookup: options.lookup }).then((res) => (itemModels = res))
+
+  let lines: TimelineRow[] | undefined
+  $: lines = projects?.map((proj) => {
+    const tR: TimelineRow = { items: [] }
+    tR.items = [
+      {
+        icon: proj.icon,
+        presenter: ProjectPresenter,
+        props: { value: proj },
+        startDate: proj.startDate as Timestamp,
+        targetDate: proj.targetDate as Timestamp
+      }
+    ]
+    return tR
+  })
+</script>
+
+{#if projects && itemModels && lines}
+  <Timeline
+    {lines}
+    {selectedRows}
+    selectedRow={selectedRowIndex}
+    on:row-focus={(ev) => {
+      if (ev.detail !== undefined && projects !== undefined) handleRowFocused(projects[ev.detail])
+    }}
+    on:check={(ev) => {
+      if (ev.detail !== undefined && projects !== undefined) onObjectChecked([projects[ev.detail.row]], ev.detail.value)
+    }}
+  >
+    <svelte:fragment let:row>
+      {#each itemModels as attributeModel, attributeModelIndex}
+        {#if attributeModelIndex === 0}
+          <div class="gridElement">
+            <div class="iconPresenter">
+              <svelte:component
+                this={attributeModel.presenter}
+                value={getObjectValue(attributeModel.key, projects[row]) ?? ''}
+                {...attributeModel.props}
+              />
+            </div>
+          </div>
+        {:else if attributeModelIndex === 1}
+          <div class="projectPresenter flex-grow">
+            <svelte:component
+              this={attributeModel.presenter}
+              value={getObjectValue(attributeModel.key, projects[row]) ?? ''}
+              {...attributeModel.props}
+            />
+          </div>
+          <div class="filler" />
+        {:else}
+          <div class="gridElement">
+            <svelte:component
+              this={attributeModel.presenter}
+              value={getObjectValue(attributeModel.key, projects[row]) ?? ''}
+              parentId={projects[row]._id}
+              {...attributeModel.props}
+            />
+          </div>
+        {/if}
+      {/each}
+    </svelte:fragment>
+  </Timeline>
+{:else if loadingProps !== undefined}
+  {#each Array(getLoadingElementsLength(loadingProps, options)) as _, rowIndex}
+    <div class="listGrid" class:fixed={rowIndex === selectedRowIndex}>
+      <div class="contentWrapper">
+        <div class="gridElement">
+          <CheckBox checked={false} />
+          <div class="ml-4">
+            <Spinner size="small" />
+          </div>
+        </div>
+      </div>
+    </div>
+  {/each}
+{/if}
+
+<style lang="scss">
+  .timeline-container {
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+
+    & > * {
+      overscroll-behavior-x: contain;
+    }
+  }
+  .timeline-header {
+    display: flex;
+    align-items: center;
+    min-height: 4rem;
+    border-bottom: 1px solid var(--divider-color);
+  }
+  .timeline-header__title {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding: 0 2.25rem;
+    height: 100%;
+    background-color: var(--body-accent);
+    box-shadow: var(--accent-shadow);
+    // z-index: 2;
+  }
+  .timeline-header__time {
+    // overflow: hidden;
+    position: relative;
+    flex-grow: 1;
+    height: 100%;
+    background-color: var(--body-color);
+    mask-image: linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0) 0,
+      rgba(0, 0, 0, 1) 2rem,
+      rgba(0, 0, 0, 1) calc(100% - 2rem),
+      rgba(0, 0, 0, 0) 100%
+    );
+
+    &-content {
+      width: 100%;
+      height: 100%;
+      will-change: transform;
+
+      .day,
+      .month {
+        position: absolute;
+        pointer-events: none;
+      }
+      .month {
+        width: max-content;
+        top: 0.25rem;
+        font-size: 1rem;
+        color: var(--accent-color);
+
+        &:first-letter {
+          text-transform: uppercase;
+        }
+      }
+      .day {
+        bottom: 0.5rem;
+        font-size: 1rem;
+        color: var(--content-color);
+        transform: translateX(-50%);
+      }
+      .cursor {
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-bottom: 1px;
+        width: 1.75rem;
+        height: 1.75rem;
+        bottom: 0.375rem;
+        font-size: 1rem;
+        font-weight: 600;
+        color: #fff;
+        background-color: var(--primary-bg-color);
+        border-radius: 50%;
+        transform: translateX(-50%);
+        pointer-events: none;
+      }
+    }
+  }
+  .todayMarker,
+  .monthMarker {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 0;
+    height: 100%;
+    pointer-events: none;
+  }
+  .monthMarker {
+    border-left: 1px dashed var(--highlight-select);
+  }
+  .todayMarker {
+    border-left: 1px solid var(--primary-bg-color);
+  }
+
+  .timeline-background__headers,
+  .timeline-background__viewbox,
+  .timeline-foreground__viewbox {
+    overflow: hidden;
+    position: absolute;
+    top: 4rem;
+    bottom: 0;
+    height: 100%;
+    z-index: -1;
+  }
+  .timeline-background__headers {
+    left: 0;
+    background-color: var(--body-accent);
+  }
+  .timeline-background__viewbox,
+  .timeline-foreground__viewbox {
+    right: 0;
+    mask-image: linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0) 0,
+      rgba(0, 0, 0, 1) 2rem,
+      rgba(0, 0, 0, 1) calc(100% - 2rem),
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+  .timeline-foreground__viewbox {
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  .timeline-splitter,
+  .timeline-splitter::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+    transform: translateX(-50%);
+  }
+  .timeline-splitter {
+    width: 1px;
+    background-color: var(--divider-color);
+    cursor: col-resize;
+    z-index: 3;
+    transition-property: width, background-color;
+    transition-timing-function: var(--timing-main);
+    transition-duration: 0.1s;
+    transition-delay: 0s;
+
+    &:hover {
+      width: 3px;
+      background-color: var(--button-border-hover);
+      transition-duration: 0.15s;
+      transition-delay: 0.3s;
+    }
+    &::before {
+      content: '';
+      width: 10px;
+      left: 50%;
+    }
+    &.moving {
+      width: 2px;
+      background-color: var(--primary-edit-border-color);
+      transition-duration: 0.1s;
+      transition-delay: 0s;
+    }
+  }
+
+  .headerWrapper {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    min-width: 0;
+    padding-left: 0.75rem;
+    padding-right: 1.15rem;
+    // border-bottom: 1px solid var(--accent-bg-color);
+  }
+  .contentWrapper {
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    mask-image: linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0) 0,
+      rgba(0, 0, 0, 1) 2rem,
+      rgba(0, 0, 0, 1) calc(100% - 2rem),
+      rgba(0, 0, 0, 0) 100%
+    );
+
+    &.nullRow {
+      cursor: pointer;
+    }
+  }
+  .timeline-wrapped_content {
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    will-change: transform;
+  }
+
+  .timeline-action__button,
+  .project-item {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+    box-shadow: var(--button-shadow);
+  }
+  .project-item {
+    top: 0.25rem;
+    bottom: 0.25rem;
+    background-color: var(--button-bg-color);
+    border: 1px solid var(--button-border-color);
+    border-radius: 0.75rem;
+
+    &:hover {
+      background-color: var(--button-bg-hover);
+      border-color: var(--button-border-hover);
+    }
+    &.noTarget {
+      mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1) 2rem);
+      border-right-color: transparent;
+    }
+
+    .project-presenter {
+      display: flex;
+      align-items: center;
+
+      .space {
+        flex-shrink: 0;
+        width: 0.25rem;
+        min-width: 0.25rem;
+        max-width: 0.25rem;
+      }
+    }
+  }
+  .timeline-action__button {
+    top: 0.625rem;
+    bottom: 0.625rem;
+    width: 2rem;
+    color: var(--content-color);
+    background-color: var(--button-bg-color);
+    border: 1px solid var(--button-border-color);
+    border-radius: 0.5rem;
+
+    &:hover {
+      color: var(--accent-color);
+      background-color: var(--button-bg-hover);
+      border-color: var(--button-border-hover);
+    }
+
+    &.left {
+      left: 1rem;
+    }
+    &.right {
+      right: 1rem;
+    }
+    &.add {
+      transform: translateX(-50%);
+      pointer-events: none;
+    }
+  }
+
+  .listGrid {
+    display: flex;
+    justify-content: stretch;
+    align-items: center;
+    flex-shrink: 0;
+    width: 100%;
+    height: 3.25rem;
+    min-height: 0;
+    color: var(--caption-color);
+    z-index: 2;
+
+    &.mListGridChecked {
+      .headerWrapper {
+        background-color: var(--highlight-select);
+      }
+      .contentWrapper {
+        background-color: var(--trans-content-05);
+      }
+      .eListGridCheckBox {
+        opacity: 1;
+      }
+    }
+
+    &.mListGridSelected {
+      .headerWrapper {
+        background-color: var(--highlight-select-hover);
+      }
+      .contentWrapper {
+        background-color: var(--trans-content-10);
+      }
+    }
+
+    .eListGridCheckBox {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+    }
+
+    &:hover .eListGridCheckBox {
+      opacity: 1;
+    }
+  }
+
+  .filler {
+    display: flex;
+    flex-grow: 1;
+  }
+
+  .gridElement {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-left: 0.5rem;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+  .projectPresenter {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    width: 5.5rem;
+    margin-left: 0.5rem;
+  }
+</style>
diff --git a/plugins/tracker/src/index.ts b/plugins/tracker/src/index.ts
index 02dca1246a..6fe7987f86 100644
--- a/plugins/tracker/src/index.ts
+++ b/plugins/tracker/src/index.ts
@@ -467,7 +467,9 @@ export default plugin(trackerId, {
     Duplicate: '' as Asset,
 
     TimeReport: '' as Asset,
-    Estimation: '' as Asset
+    Estimation: '' as Asset,
+
+    Timeline: '' as Asset
   },
   category: {
     Other: '' as Ref<TagCategory>,
diff --git a/plugins/view-assets/assets/icons.svg b/plugins/view-assets/assets/icons.svg
index 7b791bd42a..1e09562f6e 100644
--- a/plugins/view-assets/assets/icons.svg
+++ b/plugins/view-assets/assets/icons.svg
@@ -19,6 +19,11 @@
     <path d="M1 12.6C1 12.0399 1 11.7599 1.10899 11.546C1.20487 11.3578 1.35785 11.2049 1.54601 11.109C1.75992 11 2.03995 11 2.6 11H5.4C5.96005 11 6.24008 11 6.45399 11.109C6.64215 11.2049 6.79513 11.3578 6.89101 11.546C7 11.7599 7 12.0399 7 12.6V13.4C7 13.9601 7 14.2401 6.89101 14.454C6.79513 14.6422 6.64215 14.7951 6.45399 14.891C6.24008 15 5.96005 15 5.4 15H2.6C2.03995 15 1.75992 15 1.54601 14.891C1.35785 14.7951 1.20487 14.6422 1.10899 14.454C1 14.2401 1 13.9601 1 13.4V12.6Z" />
     <path d="M9 12.6C9 12.0399 9 11.7599 9.10899 11.546C9.20487 11.3578 9.35785 11.2049 9.54601 11.109C9.75992 11 10.0399 11 10.6 11H13.4C13.9601 11 14.2401 11 14.454 11.109C14.6422 11.2049 14.7951 11.3578 14.891 11.546C15 11.7599 15 12.0399 15 12.6V13.4C15 13.9601 15 14.2401 14.891 14.454C14.7951 14.6422 14.6422 14.7951 14.454 14.891C14.2401 15 13.9601 15 13.4 15H10.6C10.0399 15 9.75992 15 9.54601 14.891C9.35785 14.7951 9.20487 14.6422 9.10899 14.454C9 14.2401 9 13.9601 9 13.4V12.6Z" />
   </symbol>
+  <symbol id="timeline" viewBox="0 0 14 14">
+    <rect x="6" y="1" width="7" height="2.5" rx="0.5" />
+    <rect x="1" y="5.75" width="9" height="2.5" rx="0.5" />
+    <rect x="4" y="10.5" width="9" height="2.5" rx="0.5" />
+  </symbol>
   <symbol id="delete" viewBox="0 0 16 16">
     <path d="M13.1,3.8h-2c-0.2,0-0.4-0.2-0.5-0.4l-0.2-0.8c-0.1-0.6-0.6-1-1.2-1H6.8c-0.6,0-1.1,0.4-1.2,1L5.4,3.3 c0,0.3-0.2,0.4-0.5,0.4h-2C2.7,3.8,2.4,4,2.4,4.3s0.2,0.5,0.5,0.5h0.3c0.1,1.1,0.3,6.2,0.5,7.9c0.1,1.1,0.8,1.8,1.9,1.9 c0.8,0,1.6,0,2.4,0c0.8,0,1.5,0,2.3,0c1.1,0,1.8-0.7,1.9-1.9c0.2-1.7,0.4-6.7,0.5-7.9h0.3c0.3,0,0.5-0.2,0.5-0.5S13.4,3.8,13.1,3.8z M6.4,3.5l0.1-0.8c0-0.1,0.1-0.2,0.3-0.2h2.5c0.1,0,0.2,0.1,0.2,0.2l0.1,0.8c0,0.1,0.1,0.2,0.1,0.3H6.3C6.3,3.7,6.3,3.6,6.4,3.5z M11.3,12.5c-0.1,0.9-0.7,1-0.9,1c-1.6,0-3.2,0-4.7,0c-0.5,0-0.8-0.3-0.9-1C4.6,10.9,4.4,6,4.3,4.8h7.5C11.7,6,11.4,10.9,11.3,12.5z"/>
   </symbol>
diff --git a/plugins/view-assets/lang/en.json b/plugins/view-assets/lang/en.json
index 6e318cdab7..1fe816b041 100644
--- a/plugins/view-assets/lang/en.json
+++ b/plugins/view-assets/lang/en.json
@@ -51,6 +51,7 @@
     "View": "View",
     "MarkupEditor": "Edit of rich content field",
     "List": "List",
+    "Timeline": "Timeline",
     "Select": "Select",
     "NoGrouping": "No grouping",
     "Grouping": "Grouping",
diff --git a/plugins/view-assets/lang/ru.json b/plugins/view-assets/lang/ru.json
index f309ed2339..0dd4bbfbc1 100644
--- a/plugins/view-assets/lang/ru.json
+++ b/plugins/view-assets/lang/ru.json
@@ -49,6 +49,7 @@
     "View": "Вид",
     "MarkupEditor": "Изменение форматированного поля",
     "List": "Список",
+    "Timeline": "Временная шкала",
     "Select": "Выбрать",
     "NoGrouping": "Нет группировки",
     "Grouping": "Группировка",
diff --git a/plugins/view-assets/src/index.ts b/plugins/view-assets/src/index.ts
index 02c967ebc4..110914c2ef 100644
--- a/plugins/view-assets/src/index.ts
+++ b/plugins/view-assets/src/index.ts
@@ -21,6 +21,7 @@ loadMetadata(view.icon, {
   Table: `${icons}#table`,
   List: `${icons}#list`,
   Card: `${icons}#card`,
+  Timeline: `${icons}#timeline`,
   Delete: `${icons}#delete`,
   Move: `${icons}#move`,
   MoreH: `${icons}#more-h`,
diff --git a/plugins/view/src/index.ts b/plugins/view/src/index.ts
index 7c746b2b9f..52226ef06e 100644
--- a/plugins/view/src/index.ts
+++ b/plugins/view/src/index.ts
@@ -581,12 +581,15 @@ const view = plugin(viewId, {
     View: '' as IntlString,
     FilteredViews: '' as IntlString,
     NewFilteredView: '' as IntlString,
-    FilteredViewName: '' as IntlString
+    FilteredViewName: '' as IntlString,
+    List: '' as IntlString,
+    Timeline: '' as IntlString
   },
   icon: {
     Table: '' as Asset,
     List: '' as Asset,
     Card: '' as Asset,
+    Timeline: '' as Asset,
     Delete: '' as Asset,
     MoreH: '' as Asset,
     Move: '' as Asset,