diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 1f100a6aa6..2864c569ef 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -45,6 +45,8 @@
   --primary-color-skyblue: #93CAF3;
   --primary-color-pink: #FA8DA1;
 
+  --dark-turquoise-01: #45AEA3;
+
   --highlight-red: #F96E50;
 }
 
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index ebcc48e24f..0ee3c596a2 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -183,6 +183,7 @@ p:last-child { margin-block-end: 0; }
 }
 
 /* Margins & Paddings */
+.step-lr25 + .step-lr25 { margin-left: .25rem; }
 .step-lr75 + .step-lr75 { margin-left: .75rem; }
 .step-tb75 + .step-tb75 { margin-top: .75rem; }
 
@@ -397,33 +398,3 @@ a.no-line {
 .border-primary-button { border-color: var(--primary-button-border); }
 .border-button-enabled { border: 1px solid var(--theme-button-border-enabled); }
 .bottom-divider { border-bottom: 1px solid var(--theme-menu-divider); }
-
-/* Popups */
-// .popup-top-right::after, .popup-top-right::before, .popup-top-left::after, .popup-top-left::before, .popup-bottom-right::after, .popup-bottom-right::before, .popup-bottom-left::after, .popup-bottom-left::before {
-//   content: '';
-//   position: absolute;
-//   width: .625rem;
-//   height: 1.75rem;
-//   clip-path: path('M0.6,8.3l2.7,2.4C4.4,11.8,5,12.8,5,14C5,13.1,5,0.9,5,0c0,1.2-0.6,2.2-1.7,3.2L0.6,5.7 c-0.7,0.6-0.8,1.7-0.2,2.5C0.5,8.2,0.5,8.3,0.6,8.3z');
-// }
-
-// .popup-top-right::after, .popup-top-right::before, .popup-top-left::after, .popup-top-left::before
-//   { transform: rotate(-90deg); }
-// .popup-bottom-right::after, .popup-bottom-right::before, .popup-bottom-left::after, .popup-bottom-left::before
-//   { transform: rotate(90deg); }
-// .popup-top-right::after, .popup-top-left::after, .popup-bottom-right::after, .popup-bottom-left::after
-//   { background-color: var(--theme-button-bg-hovered); }
-// .popup-top-right::before, .popup-top-left::before, .popup-bottom-right::before, .popup-bottom-left::before
-//   { background-color: var(--theme-button-bg-hovered); box-shadow: inset 0 0 0 2rem var(--theme-button-border-enabled); }
-// .popup-top-right::after, .popup-top-left::after
-//   { bottom: -.875rem; }
-// .popup-top-right::before, .popup-top-left::before
-//   { bottom: -.9375rem; }
-// .popup-bottom-right::after, .popup-bottom-left::after
-//   { top: -.875rem; }
-// .popup-bottom-right::before, .popup-bottom-left::before
-//   { top: -.9375rem; }
-// .popup-top-left::after, .popup-top-left::before, .popup-bottom-left::after, .popup-bottom-left::before
-//   { right: 1.5rem; }
-// .popup-top-right::after, .popup-top-right::before, .popup-bottom-right::after, .popup-bottom-right::before
-//   { left: 1.5rem; }
diff --git a/packages/ui/src/components/StatusesBar.svelte b/packages/ui/src/components/StatusesBar.svelte
new file mode 100644
index 0000000000..d9b5921559
--- /dev/null
+++ b/packages/ui/src/components/StatusesBar.svelte
@@ -0,0 +1,70 @@
+<!--
+// Copyright © 2020 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.
+-->
+
+<script lang="ts">
+  import { IntlString } from '@anticrm/platform'
+  import Label from './Label.svelte'
+  import StatusesBarElement from './StatusesBarElement.svelte'
+
+  export let items: IntlString[]
+                    = ['New' as IntlString, 'In progress' as IntlString, 'Interview' as IntlString, 'Interview' as IntlString, 'Final' as IntlString]
+  export let selected: IntlString | undefined = undefined
+</script>
+
+<div class="flex-row-center statusesbar-container">
+  {#each items as item, i}
+    <div
+      class="flex-row-center cursor-pointer step-lr25"
+      class:selected={item === selected}
+      on:click={() => {
+        if (item !== selected) selected = item
+      }}
+    >
+      <StatusesBarElement side={'left'} kind={i ? 'arrow' : 'round'} selected={item === selected} />
+      <div class="flex-row-center overflow-label label">
+        <Label label={item} />
+      </div>
+      <StatusesBarElement side={'right'} kind={i < items.length - 1 ? 'arrow' : 'round'} selected={item === selected} />
+    </div>
+  {/each}
+</div>
+
+<style lang="scss">
+  .statusesbar-container {
+    overflow-x: auto;
+    padding: .125rem 0;
+    &::-webkit-scrollbar:horizontal { height: .125rem; }
+    &::-webkit-scrollbar-track { margin: .25rem; }
+    &::-webkit-scrollbar-thumb { background-color: var(--theme-bg-accent-color); }
+  }
+  .label {
+    padding: .5rem 2rem;
+    height: 2.25rem;
+    max-height: 2.25rem;
+    color: var(--theme-caption-color);
+    background-color: var(--theme-button-bg-enabled);
+    border-top: 1px solid var(--theme-button-border-enabled);
+    border-bottom: 1px solid var(--theme-button-border-enabled);
+  }
+
+  .selected {
+    cursor: auto;
+
+    .label {
+      background-color: var(--dark-turquoise-01);
+      border-color: transparent;
+    }
+  }
+</style>
diff --git a/packages/ui/src/components/StatusesBarElement.svelte b/packages/ui/src/components/StatusesBarElement.svelte
new file mode 100644
index 0000000000..f4e2221287
--- /dev/null
+++ b/packages/ui/src/components/StatusesBarElement.svelte
@@ -0,0 +1,52 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 Hardcore Engineering Inc.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+
+<script lang="ts">
+  export let side: 'left' | 'right'
+  export let kind: 'round' | 'arrow'
+  export let selected: boolean = false
+</script>
+
+<svg
+  width=".5rem" height="2.25rem" viewBox="0 0 8 36"
+  class:selected
+  xmlns="http://www.w3.org/2000/svg"
+>
+  {#if side === 'left' && kind === 'arrow'}
+    <path class="bg" d="M1,0C0.3,0-0.2,0.7,0.1,1.4l6,15.9c0.2,0.5,0.2,1,0,1.4l-6,15.9C-0.2,35.3,0.3,36,1,36h7V0H1z"/>
+    <path class="border" d="M1,35l6-15.9c0.3-0.7,0.3-1.4,0-2.1L1,1h7V0H1C0.7,0,0.4,0.2,0.2,0.4C0,0.7-0.1,1,0.1,1.4 l6,15.9c0.2,0.5,0.2,1,0,1.4l-6,15.9C-0.1,35,0,35.3,0.2,35.6S0.7,36,1,36h7v-1H1z"/>
+  {:else if side === 'left' && kind === 'round'}
+    <path class="bg" d="M0,8v10v10c0,4.4,3.6,8,8,8V0C3.6,0,0,3.6,0,8z"/>
+    <path class="border" d="M1,28V8c0-3.9,3.1-7,7-7V0C3.6,0,0,3.6,0,8v20c0,4.4,3.6,8,8,8v-1C4.1,35,1,31.9,1,28z"/>
+  {:else if side === 'right' && kind === 'arrow'}
+    <path class="bg" d="M1.8,1.3C1.5,0.5,0.8,0,0,0v36c0.8,0,1.5-0.5,1.8-1.3l6.1-16c0.2-0.5,0.2-1,0-1.4L1.8,1.3z"/>
+    <path class="border" d="M1.8,1.3L1.8,1.3L1.8,1.3c0,0-0.1-0.2-0.1-0.3L1.6,0.8C1.2,0.3,0.6,0,0,0v1 c0.4,0,0.7,0.3,0.9,0.6l6.1,16c0.1,0.2,0.1,0.5,0,0.7l-6.1,16C0.7,34.7,0.4,35,0,35v1c0.8,0,1.5-0.5,1.8-1.3l6.1-16 c0.2-0.5,0.2-1,0-1.4L1.8,1.3z"/>
+  {:else if side === 'right' && kind === 'round'}
+    <path class="bg" d="M0,0v36c4.4,0,8-3.6,8-8V8C8,3.6,4.4,0,0,0z"/>
+    <path class="border" d="M0,0v1c3.9,0,7,3.1,7,7v20c0,3.9-3.1,7-7,7v1c4.4,0,8-3.6,8-8V8C8,3.6,4.4,0,0,0z"/>
+  {:else}
+    <rect x={0} y={0} width={'100%'} height={'100%'} fill={'red'} opacity={.5} />
+  {/if}
+</svg>
+
+<style lang="scss">
+  .bg { fill: var(--theme-button-bg-enabled); }
+  .border { fill: var(--theme-button-border-enabled); }
+  .selected {
+    .bg { fill: var(--dark-turquoise-01); }
+    .border { fill: transparent; }
+  }
+</style>
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 6a858f90da..789c0237d0 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -61,6 +61,7 @@ export { default as Link } from './components/Link.svelte'
 export { default as TimeSince } from './components/TimeSince.svelte'
 export { default as Dropdown } from './components/Dropdown.svelte'
 export { default as DumbDropdown } from './components/DumbDropdown.svelte'
+export { default as StatusesBar } from './components/StatusesBar.svelte'
 
 export { default as IconAdd } from './components/icons/Add.svelte'
 export { default as IconClose } from './components/icons/Close.svelte'