diff --git a/packages/presentation/src/components/SpaceCreateCard.svelte b/packages/presentation/src/components/SpaceCreateCard.svelte
new file mode 100644
index 0000000000..5976da224c
--- /dev/null
+++ b/packages/presentation/src/components/SpaceCreateCard.svelte
@@ -0,0 +1,116 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 Hardcore Engineering Inc.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+
+<script lang="ts">
+  import type { IntlString } from '@anticrm/platform'
+
+  import { createEventDispatcher } from 'svelte'
+  import { Button, Label } from '@anticrm/ui'
+
+  export let label: IntlString
+  export let okAction: () => void
+  export let canSave: boolean = false
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<form class="card-container" on:submit|preventDefault={ () => {} }>
+  <div class="card-bg" />
+  <div class="flex-between header">
+    <div class="overflow-label label"><Label {label} /></div>
+    {#if $$slots.error}
+      <div class="flex-grow error">
+        <slot name="error" />
+      </div>
+    {/if}
+  </div>
+  <div class="content"><slot /></div>
+  <div class="footer">
+    <Button disabled={!canSave} label={'Create'} size={'small'} transparent primary on:click={() => { okAction(); dispatch('close') }} />
+    <Button label={'Cancel'} size={'small'} transparent on:click={() => { dispatch('close') }} />
+  </div>
+</form>
+
+<style lang="scss">
+  .card-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 20rem;
+    min-width: 20rem;
+    max-width: 20rem;
+    border-radius: 1.25rem;
+
+    .header {
+      position: relative;
+      flex-shrink: 0;
+      padding: 1.75rem;
+
+      .label {
+        font-weight: 500;
+        font-size: 1rem;
+        color: var(--theme-caption-color);
+      }
+
+      .error {
+        position: absolute;
+        display: flex;
+        top: 3.25rem;
+        left: 1.75rem;
+        right: 1.75rem;
+        font-weight: 500;
+        font-size: .75rem;
+        color: var(--system-error-color);
+        &:empty { visibility: hidden; }
+      }
+    }
+
+    .content {
+      flex-shrink: 0;
+      flex-grow: 1;
+      margin: 0 1.75rem .75rem;
+      height: fit-content;
+    }
+
+    .footer {
+      flex-shrink: 0;
+      display: grid;
+      grid-auto-flow: column;
+      direction: rtl;
+      justify-content: start;
+      align-items: center;
+      column-gap: .75rem;
+      padding: 1rem 1.75rem 1.75rem;
+      height: 5.25rem;
+      mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
+      overflow: hidden;
+      border-radius: 0 0 1.25rem 1.25rem;
+    }
+
+    .card-bg {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: var(--theme-card-bg);
+      border-radius: 1.25rem;
+      backdrop-filter: blur(24px);
+      box-shadow: var(--theme-card-shadow);
+      z-index: -1;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/packages/presentation/src/index.ts b/packages/presentation/src/index.ts
index a7c24bb1c8..88fa30bc81 100644
--- a/packages/presentation/src/index.ts
+++ b/packages/presentation/src/index.ts
@@ -27,3 +27,4 @@ export { default as Channels } from './components/Channels.svelte'
 export { default as Backlink } from './components/Backlink.svelte'
 export { default as PDFViewer } from './components/PDFViewer.svelte'
 export { default as MessageBox } from './components/MessageBox.svelte'
+export { default as SpaceCreateCard } from './components/SpaceCreateCard.svelte'
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 8a8909ed26..744e6a778d 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -85,7 +85,7 @@
   --theme-bg-focused-color: rgba(255, 255, 255, .1);
   --theme-bg-focused-border: rgba(255, 255, 255, .4);
   --theme-bg-accent-error: rgba(251, 158, 158, .06);
-  --theme-on-color: #94AEF3;
+  --theme-on-color: #4474F6;
   --theme-off-color: #77818E;
   --theme-bg-check: #F2F2F2;
   --theme-tooltip-color: #2C2C34;
@@ -155,7 +155,7 @@
   --theme-bg-focused-color: rgba(255, 255, 255, .1);
   --theme-bg-focused-border: rgba(255, 255, 255, .4);
   --theme-bg-accent-error: rgba(251, 158, 158, .06);
-  --theme-on-color: #94AEF3;
+  --theme-on-color: #4474F6;
   --theme-off-color: #77818E;
   --theme-bg-check: #F2F2F2;
   --theme-tooltip-color: #4D4C58;
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 5f9e52df43..2280e1a8cc 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -161,6 +161,7 @@ table {
 .step-tb75 + .step-tb75 { margin-top: .75rem; }
 
 .ml-2 { margin-left: .5rem; }
+.mr-1 { margin-right: .25rem; }
 .mt-5 { margin-top: 1.25rem; }
 .mb-1 { margin-bottom: .25rem; }
 
diff --git a/packages/ui/img/google.svg b/packages/ui/img/google.svg
new file mode 100644
index 0000000000..d165497322
--- /dev/null
+++ b/packages/ui/img/google.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#B82C2E;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#6FA94C;}
+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#687EB9;}
+	.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#E6C12D;}
+</style>
+<g>
+	<path class="st0" d="M4.9,11.3c0.6-1.3,1.5-2.5,2.5-3.6c2.3-2.4,5.1-3.9,8.4-4.5c4.6-0.7,8.7,0.4,12.3,3.4c0.2,0.2,0.3,0.3,0,0.5
+		c-1.3,1.2-2.5,2.5-3.7,3.7c-0.1,0.1-0.2,0.3-0.4,0.1c-3.1-2.9-8.2-2.8-11.6,0.3c-1.1,1.1-2,2.3-2.5,3.8c-0.1-0.1-0.2-0.1-0.2-0.2
+		C8,13.7,6.5,12.5,4.9,11.3z"/>
+	<path class="st1" d="M9.8,20.9c0.4,1.1,1,2.2,1.8,3.1c2.1,2.3,4.7,3.3,7.9,3c1.5-0.2,2.8-0.6,4-1.4c0.1,0.1,0.2,0.2,0.4,0.3
+		c1.5,1.1,2.9,2.3,4.4,3.4c-1.6,1.5-3.5,2.5-5.6,3.1c-5,1.3-9.6,0.5-13.7-2.8c-1.7-1.3-3-3-4-4.9C6.5,23.4,8.2,22.2,9.8,20.9z"/>
+	<path class="st2" d="M28.2,29.4c-1.5-1.1-2.9-2.3-4.4-3.4c-0.1-0.1-0.2-0.2-0.4-0.3c1-0.8,1.8-1.6,2.3-2.8c0.2-0.4,0.4-0.9,0.5-1.4
+		c0.1-0.3,0.1-0.5-0.3-0.5c-2.4,0-4.8,0-7.2,0c-0.5,0-0.5,0-0.5-0.5c0-1.6,0-3.3,0-4.9c0-0.3,0.1-0.4,0.4-0.4c4.5,0,8.9,0,13.4,0
+		c0.2,0,0.4,0,0.4,0.3c0.6,3.9,0.1,7.6-1.9,11.1C29.9,27.6,29.2,28.6,28.2,29.4z"/>
+	<path class="st3" d="M9.8,20.9c-1.6,1.3-3.3,2.5-4.9,3.8c-0.8-1.5-1.3-3.1-1.5-4.7c-0.4-2.9,0-5.6,1.3-8.3c0.1-0.1,0.2-0.3,0.2-0.4
+		c1.6,1.2,3.1,2.4,4.7,3.6C9.7,14.9,9.8,15,9.8,15C9.2,17,9.2,18.9,9.8,20.9z"/>
+</g>
+</svg>
diff --git a/packages/ui/img/tesla.svg b/packages/ui/img/tesla.svg
new file mode 100644
index 0000000000..6eac18dd43
--- /dev/null
+++ b/packages/ui/img/tesla.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_2_);}
+</style>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="14.3791" y1="-2.5354" x2="21.6209" y2="38.5354">
+	<stop  offset="5.076140e-03" style="stop-color:#C52229"/>
+	<stop  offset="1" style="stop-color:#802022"/>
+</linearGradient>
+<rect class="st0" width="36" height="36"/>
+<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="18" y1="6.2743" x2="18" y2="29.7257">
+	<stop  offset="0" style="stop-color:#FFFFFF"/>
+	<stop  offset="0.5066" style="stop-color:#FDFDFD"/>
+	<stop  offset="0.7696" style="stop-color:#F5F5F5"/>
+	<stop  offset="0.9763" style="stop-color:#E8E8E8"/>
+	<stop  offset="1" style="stop-color:#E6E6E6"/>
+</linearGradient>
+<path class="st1" d="M7.3,9.8c2.8-1.1,7.4-1.3,9.4-1.2l1.3,1.6l1.3-1.6c2-0.1,6.6,0.1,9.4,1.2c-0.4,0.7-2.1,1.8-3,2
+	c-0.1-1.4-2.1-1.7-4-1.7L18,29.7l-3.7-19.7c-2,0-4,0.3-4,1.7C9.4,11.6,7.7,10.5,7.3,9.8L7.3,9.8z M6,7.8l0.7,1.1
+	c2.7-1,5.9-1.4,9.3-1.5c1.3,0,2.6,0,3.9,0c3.4,0.1,6.6,0.6,9.3,1.5L30,7.8c-3.2-1.1-6.6-1.4-10-1.5c-1.3,0-2.6,0-4,0
+	C12.6,6.4,9.2,6.7,6,7.8L6,7.8z"/>
+</svg>
diff --git a/packages/ui/src/components/ActionIcon.svelte b/packages/ui/src/components/ActionIcon.svelte
index a2b9f3f2ae..29dde6638d 100644
--- a/packages/ui/src/components/ActionIcon.svelte
+++ b/packages/ui/src/components/ActionIcon.svelte
@@ -24,7 +24,7 @@
   export let direction: TooltipAligment | undefined
   export let icon: Asset | AnySvelteComponent
   export let size: 'small' | 'medium' | 'large'
-  export let action: () => Promise<void>
+  export let action: (ev?: Event) => Promise<void>
   export let invisible: boolean = false
 </script>
 
diff --git a/packages/ui/src/components/Dropdown.svelte b/packages/ui/src/components/Dropdown.svelte
new file mode 100644
index 0000000000..61aa156429
--- /dev/null
+++ b/packages/ui/src/components/Dropdown.svelte
@@ -0,0 +1,101 @@
+<!--
+// 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 { onMount } from 'svelte'
+  import type { IntlString, Asset } from '@anticrm/platform'
+
+  import Label from './Label.svelte'
+  import Icon from './Icon.svelte'
+  import { showPopup } from '..'
+  import type { AnySvelteComponent, ListItem } from '../types'
+  import DropdownPopup from './DropdownPopup.svelte'
+  import Add from './icons/Add.svelte'
+
+  import tesla from '../../img/tesla.svg'
+  import google from '../../img/google.svg'
+
+  export let icon: Asset | AnySvelteComponent = Add
+  export let label: IntlString
+  export let placeholder: IntlString
+  export let items: ListItem[] = [{ item: tesla, label: 'Tesla' }, { item: google, label: 'Google' }]
+  export let selected: ListItem | undefined
+  export let show: boolean = false
+
+  let btn: HTMLElement
+  let container: HTMLElement
+
+  onMount(() => {
+    if (btn && show) {
+      btn.click()
+      show = false
+    }
+  })
+</script>
+
+<div class="flex-row-center container" bind:this={container}
+  on:click|preventDefault={() => {
+    btn.focus()
+    showPopup(DropdownPopup, { title: label, caption: 'suggested', items }, container, (result) => {
+      if (result) selected = result
+    })
+  }}
+>
+  <button class="btn" class:selected bind:this={btn}>
+    {#if selected}
+      <img src={selected.item} alt={selected.label} />
+    {:else}
+      {#if typeof (icon) === 'string'}
+        <Icon {icon} size={'small'} />
+      {:else}
+        <svelte:component this={icon} size={'small'} />
+      {/if}
+    {/if}
+  </button>
+
+  <div class="selectUser">
+    <div class="title"><Label {label} /></div>
+    <div class="caption-color" class:empty={selected ? false : true}>
+      {#if selected}{selected.label}{:else}<Label label={placeholder} />{/if}
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  .container { cursor: pointer; }
+  .btn {
+    width: 2.25rem;
+    height: 2.25rem;
+    color: var(--theme-caption-color);
+    background-color: transparent;
+    border: 1px solid var(--theme-card-divider);
+    border-radius: .5rem;
+    overflow: hidden;
+  }
+  .selected {
+    border-color: transparent;
+    img { max-width: fit-content; }
+  }
+
+  .selectUser {
+    margin-left: .75rem;
+    .title {
+      font-size: .75rem;
+      font-weight: 500;
+      color: var(--theme-content-accent-color);
+    }
+    .empty { color: var(--theme-content-trans-color); }
+  }
+</style>
diff --git a/packages/ui/src/components/DropdownPopup.svelte b/packages/ui/src/components/DropdownPopup.svelte
new file mode 100644
index 0000000000..c5db78a49c
--- /dev/null
+++ b/packages/ui/src/components/DropdownPopup.svelte
@@ -0,0 +1,130 @@
+<!--
+// 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 type { IntlString } from '@anticrm/platform'
+  import { createEventDispatcher } from 'svelte'
+
+  import Label from './Label.svelte'
+  import EditWithIcon from './EditWithIcon.svelte'
+  import IconSearch from './icons/Search.svelte'
+  import type { ListItem } from '../types'
+
+  export let title: IntlString
+  export let caption: IntlString
+  export let items: ListItem[]
+  export let header: boolean = true
+
+  let search: string = ''
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<div class="popup">
+  <div class="card-bg" />
+  <div class="title"><Label label={title} /></div>
+  {#if header}
+    <div class="flex-col header">
+      <EditWithIcon icon={IconSearch} bind:value={search} placeholder={'Search...'} />
+      <div class="caption"><Label label={caption} /></div>
+    </div>
+  {/if}
+  <div class="scroll">
+    <div class="flex-col box">
+      {#each items.filter((x) => x.label.toLowerCase().includes(search.toLowerCase())) as item}
+        <button class="flex-row-center menu-item" on:click={() => { dispatch('close', item) }}>
+          <div class="flex-center img">
+            <img src={item.item} alt={item.label} />
+          </div>
+          <div class="flex-grow caption-color">{item.label}</div>
+        </button>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  .popup {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    border-radius: .75rem;
+  }
+
+  .title {
+    margin: 1rem 1rem .25rem;
+    font-weight: 500;
+    color: var(--theme-caption-color);
+  }
+  .header {
+    margin: .25rem 1rem 0;
+    text-align: left;
+    .caption {
+      margin-top: .5rem;
+      font-size: .75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      color: var(--theme-content-trans-color);
+    }
+  }
+
+  .scroll {
+    flex-grow: 1;
+    padding: .5rem;
+    overflow-x: hidden;
+    overflow-y: auto;
+    .box {
+      margin-right: 1px;
+      height: 100%;
+    }
+  }
+
+  .menu-item {
+    text-align: left;
+    padding: .5rem;
+    border-radius: .5rem;
+
+    .img {
+      margin-right: .75rem;
+      width: 2.25rem;
+      height: 2.25rem;
+      color: var(--theme-caption-color);
+      border-radius: .5rem;
+      overflow: hidden;
+
+      img {
+        max-width: fit-content;
+      }
+    }
+
+    &:hover { background-color: var(--theme-button-bg-focused); }
+    &:focus {
+      box-shadow: 0 0 0 3px var(--primary-button-outline);
+      z-index: 1;
+    }
+  }
+
+  .card-bg {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: var(--theme-card-bg);
+      border-radius: .75rem;
+      backdrop-filter: blur(24px);
+      box-shadow: var(--theme-card-shadow);
+      z-index: -1;
+    }
+</style>
diff --git a/packages/ui/src/components/EditBox.svelte b/packages/ui/src/components/EditBox.svelte
index e283428cba..6b901139c3 100644
--- a/packages/ui/src/components/EditBox.svelte
+++ b/packages/ui/src/components/EditBox.svelte
@@ -15,10 +15,13 @@
 
 <script lang="ts">
   import { createEventDispatcher, onMount } from 'svelte'
-  import type { IntlString } from '@anticrm/platform'
+  import type { IntlString, Asset } from '@anticrm/platform'
+  import type { AnySvelteComponent } from '../types'
   import Label from './Label.svelte'
+  import Icon from './Icon.svelte'
 
   export let label: IntlString | undefined
+  export let icon: Asset | AnySvelteComponent | undefined = undefined
   export let maxWidth: string | undefined
   export let value: string | undefined
   export let placeholder: string = 'placeholder'
@@ -53,12 +56,23 @@
 <div class="container" on:click={() => { input.focus() }}>
   <div class="hidden-text" bind:this={text}></div>
   {#if label}<div class="label"><Label label={label}/></div>{/if}
-  <div class="wrap">
-    {#if password}
-      <input bind:this={input} type="password" bind:value {placeholder} {style} on:input={(ev) => ev.target && computeSize(ev.target)} on:change/>
-    {:else}
-      <input bind:this={input} type="text" bind:value {placeholder} {style} on:input={(ev) => ev.target && computeSize(ev.target)} on:change/>
+  <div class="flex-row-center">
+    {#if icon}
+      <div class="icon">
+        {#if typeof (icon) === 'string'}
+          <Icon {icon} size={'small'}/>
+        {:else}
+          <svelte:component this={icon} size={'small'} />
+        {/if}
+      </div>
     {/if}
+    <div class="wrap">
+      {#if password}
+        <input bind:this={input} type="password" bind:value {placeholder} {style} on:input={(ev) => ev.target && computeSize(ev.target)} on:change/>
+      {:else}
+        <input bind:this={input} type="text" bind:value {placeholder} {style} on:input={(ev) => ev.target && computeSize(ev.target)} on:change/>
+      {/if}
+    </div>
   </div>
 </div>
 
@@ -95,22 +109,26 @@
     margin-bottom: .25rem;
     font-size: .75rem;
     font-weight: 500;
-    color: var(--theme-caption-color);
-    opacity: .8;
+    color: var(--theme-content-accent-color);
     pointer-events: none;
     user-select: none;
   }
 
+  .icon {
+    margin-right: .25rem;
+    transform-origin: center center;
+    transform: scale(.75);
+    color: var(--theme-content-trans-color);
+  }
+
   input {
     margin: 0;
     padding: 0;
-    color: inherit;
+    color: var(--theme-caption-color);
     border: none;
     border-radius: 2px;
 
-    &::placeholder {
-      color: var(--theme-content-dark-color);
-    }
+    &::placeholder { color: var(--theme-content-dark-color); }
 
     &::-webkit-contacts-auto-fill-button,
     &::-webkit-credentials-auto-fill-button {
diff --git a/packages/ui/src/components/Toggle.svelte b/packages/ui/src/components/Toggle.svelte
index e939c85560..bf29a2841a 100644
--- a/packages/ui/src/components/Toggle.svelte
+++ b/packages/ui/src/components/Toggle.svelte
@@ -72,7 +72,7 @@
       border-radius: 3.125rem;
       // vertical-align: top;
       background-color: var(--theme-off-color);
-      border: 1px solid transparent;
+      border: 1px solid rgba(0, 0, 0, .1);
       transition: left .2s;
       &:before {
         content: '';
diff --git a/packages/ui/src/components/ToggleWithLabel.svelte b/packages/ui/src/components/ToggleWithLabel.svelte
index 02d1377219..3b1d151383 100644
--- a/packages/ui/src/components/ToggleWithLabel.svelte
+++ b/packages/ui/src/components/ToggleWithLabel.svelte
@@ -43,7 +43,7 @@
     span {
       display: block;
       font-size: .75rem;
-      color: var(--theme-caption-trans-color);
+      color: var(--theme-content-trans-color);
     }
   }
 </style>
diff --git a/packages/ui/src/components/icons/Folder.svelte b/packages/ui/src/components/icons/Folder.svelte
index b2616e60b9..0f090fe7c8 100644
--- a/packages/ui/src/components/icons/Folder.svelte
+++ b/packages/ui/src/components/icons/Folder.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'var(--theme-caption-color)'
+  const fill: string = 'currentColor'
 </script>
 
 <svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index c754294b6f..41c4fc2082 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -58,6 +58,7 @@ export { default as Popup } from './components/Popup.svelte'
 export { default as CircleButton } from './components/CircleButton.svelte'
 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 IconAdd } from './components/icons/Add.svelte'
 export { default as IconClose } from './components/icons/Close.svelte'
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index 65c7bc9921..6d1d018f97 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -33,7 +33,7 @@ export type AnyComponent = Resource<AnySvelteComponent>
 export interface Action {
   label: IntlString
   icon: Asset | AnySvelteComponent
-  action: (props: any) => Promise<void>
+  action: (props: any, ev?: Event) => Promise<void>
 }
 
 export interface IPopupItem {
@@ -65,3 +65,8 @@ export interface LabelAndProps {
   component?: AnySvelteComponent | AnyComponent
   props?: any
 }
+
+export interface ListItem {
+  item: any | undefined
+  label: string
+}
diff --git a/plugins/recruit-resources/src/components/CreateCandidates.svelte b/plugins/recruit-resources/src/components/CreateCandidates.svelte
index 3bcaca2805..4a6509b52f 100644
--- a/plugins/recruit-resources/src/components/CreateCandidates.svelte
+++ b/plugins/recruit-resources/src/components/CreateCandidates.svelte
@@ -15,9 +15,9 @@
 
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
-  import { TextArea, EditBox, Dialog, ToggleWithLabel, Grid } from '@anticrm/ui'
+  import { IconFolder, EditBox, ToggleWithLabel, Grid } from '@anticrm/ui'
 
-  import { getClient } from '@anticrm/presentation'
+  import { getClient, SpaceCreateCard } from '@anticrm/presentation'
 
   import recruit from '../plugin'
   import core from '@anticrm/core'
@@ -39,13 +39,15 @@
   }
 </script>
 
-<Dialog label={recruit.string.CreateCandidates} 
-        okLabel={recruit.string.CreateCandidates} 
-        okAction={createCandidates}
-        on:close={() => { dispatch('close') }}>
-  <Grid column={1}>
-    <EditBox label={recruit.string.CandidatesName} bind:value={name} focus/>
-    <TextArea label={recruit.string.CandidatesDescription} bind:value={description}/>
+<SpaceCreateCard
+  label={recruit.string.CreateCandidates} 
+  okAction={createCandidates}
+  canSave={name ? true : false}
+  on:close={() => { dispatch('close') }}
+>
+  <Grid column={1} rowGap={1.5}>
+    <EditBox label={recruit.string.CandidatesName} icon={IconFolder} bind:value={name} placeholder={'The Boring Pool'} focus/>
+    <!-- <TextArea label={recruit.string.CandidatesDescription} bind:value={description}/> -->
     <ToggleWithLabel label={recruit.string.MakePrivate} description={recruit.string.MakePrivateDescription}/>
   </Grid>
-</Dialog>
+</SpaceCreateCard>
diff --git a/plugins/recruit-resources/src/components/CreateVacancy copy.svelte b/plugins/recruit-resources/src/components/CreateVacancy copy.svelte
new file mode 100644
index 0000000000..4d5c606e1e
--- /dev/null
+++ b/plugins/recruit-resources/src/components/CreateVacancy copy.svelte	
@@ -0,0 +1,98 @@
+<!--
+// 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 { createEventDispatcher } from 'svelte'
+  import { TextArea, EditBox, Dialog, ToggleWithLabel, Tabs, Section, Grid, IconFile } from '@anticrm/ui'
+
+  import { getClient } from '@anticrm/presentation'
+  import Recruiting from './icons/Recruiting.svelte'
+
+  import recruit from '../plugin'
+  import core from '@anticrm/core'
+  import view from '@anticrm/view'
+
+  const dispatch = createEventDispatcher()
+
+  let name: string = ''
+  let description: string = ''
+
+  const client = getClient()
+
+  const colors = [
+    '#7C6FCD',
+    '#6F7BC5',
+    '#A5D179',
+    '#77C07B',
+    '#F28469'
+  ]
+
+  async function createVacancy() {
+    const id = await client.createDoc(recruit.class.Vacancy, core.space.Model, {
+      name,
+      description,
+      private: false,
+      members: [],
+      states: [],
+      order: []
+    })
+    const s1 = await client.createDoc(core.class.State, id, {
+      title: 'Initial',
+      color: colors[0]
+    })
+    const s2 = await client.createDoc(core.class.State, id, {
+      title: 'Interview 1',
+      color: colors[1]
+    })
+    const s3 = await client.createDoc(core.class.State, id, {
+      title: 'Interview 2',
+      color: colors[2]
+    })
+    const s4 = await client.createDoc(core.class.State, id, {
+      title: 'Interview 3',
+      color: colors[3]
+    })
+    const s5 = await client.createDoc(core.class.State, id, {
+      title: 'Interview 4',
+      color: colors[4]
+    })
+    const s6 = await client.createDoc(core.class.State, id, {
+      title: 'Final',
+      color: colors[0]
+    })
+    // await client.updateDoc(recruit.class.Vacancy, core.space.Model, id, {
+    // })
+    await client.createDoc(view.class.Kanban, id, {
+      attachedTo: id,
+      states: [s1, s2, s3, s4, s5, s6],
+      order: []
+    })
+  }
+</script>
+
+<Dialog label={recruit.string.CreateVacancy} 
+        okLabel={recruit.string.CreateVacancy} 
+        okAction={createVacancy}
+        on:close={() => { dispatch('close') }}>
+  <Section icon={IconFile} label={'General Information'}>
+    <Grid column={1}>
+      <EditBox label={recruit.string.VacancyName} bind:value={name} placeholder="Software Engineer" maxWidth="39rem" focus/>
+      <TextArea label={recruit.string.VacancyDescription} bind:value={description} placeholder="Start typing..."/>
+      <ToggleWithLabel label={recruit.string.MakePrivate} description={recruit.string.MakePrivateDescription}/>
+    </Grid>
+  </Section>
+  <Section icon={Recruiting} label={'Vacancy Members'}>
+  </Section>
+</Dialog>
diff --git a/plugins/recruit-resources/src/components/CreateVacancy.svelte b/plugins/recruit-resources/src/components/CreateVacancy.svelte
index 4d5c606e1e..715556ca2a 100644
--- a/plugins/recruit-resources/src/components/CreateVacancy.svelte
+++ b/plugins/recruit-resources/src/components/CreateVacancy.svelte
@@ -15,10 +15,11 @@
 
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
-  import { TextArea, EditBox, Dialog, ToggleWithLabel, Tabs, Section, Grid, IconFile } from '@anticrm/ui'
+  import { EditBox, Grid, Dropdown } from '@anticrm/ui'
 
-  import { getClient } from '@anticrm/presentation'
-  import Recruiting from './icons/Recruiting.svelte'
+  import { getClient, SpaceCreateCard } from '@anticrm/presentation'
+  import Company from './icons/Company.svelte'
+  import Vacancy from './icons/Vacancy.svelte'
 
   import recruit from '../plugin'
   import core from '@anticrm/core'
@@ -82,17 +83,14 @@
   }
 </script>
 
-<Dialog label={recruit.string.CreateVacancy} 
-        okLabel={recruit.string.CreateVacancy} 
-        okAction={createVacancy}
-        on:close={() => { dispatch('close') }}>
-  <Section icon={IconFile} label={'General Information'}>
-    <Grid column={1}>
-      <EditBox label={recruit.string.VacancyName} bind:value={name} placeholder="Software Engineer" maxWidth="39rem" focus/>
-      <TextArea label={recruit.string.VacancyDescription} bind:value={description} placeholder="Start typing..."/>
-      <ToggleWithLabel label={recruit.string.MakePrivate} description={recruit.string.MakePrivateDescription}/>
-    </Grid>
-  </Section>
-  <Section icon={Recruiting} label={'Vacancy Members'}>
-  </Section>
-</Dialog>
+<SpaceCreateCard 
+  label={recruit.string.CreateVacancy} 
+  okAction={createVacancy}
+  canSave={name ? true : false}
+  on:close={() => { dispatch('close') }}
+>
+  <Grid column={1} rowGap={1.5}>
+    <EditBox label={recruit.string.VacancyName} bind:value={name} icon={Vacancy} placeholder="The boring vacancy" maxWidth="39rem" focus/>
+    <Dropdown icon={Company} label={'Company *'} placeholder={'The Boring Company'} />
+  </Grid>
+</SpaceCreateCard>
diff --git a/plugins/recruit-resources/src/components/icons/Vacancy.svelte b/plugins/recruit-resources/src/components/icons/Vacancy.svelte
index 1385f7367d..d355d674b4 100644
--- a/plugins/recruit-resources/src/components/icons/Vacancy.svelte
+++ b/plugins/recruit-resources/src/components/icons/Vacancy.svelte
@@ -16,7 +16,7 @@
 
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'var(--theme-caption-color)'
+  const fill: string = 'currentColor'
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
diff --git a/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte b/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte
index c7130ff1cc..70e0ffdc72 100644
--- a/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte
+++ b/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte
@@ -43,8 +43,8 @@
   const addSpace: Action = {
     label: model.addSpaceLabel,
     icon: IconAdd,
-    action: async (): Promise<void> => {
-      showPopup(model.createComponent, {}, 'right')
+    action: async (_id: Ref<Doc>, ev?: Event): Promise<void> => {
+      showPopup(model.createComponent, {}, ev?.target as HTMLElement)
     }
   }
 
diff --git a/plugins/workbench-resources/src/components/navigator/TreeElement.svelte b/plugins/workbench-resources/src/components/navigator/TreeElement.svelte
index 31c1c6174f..69cb16addd 100644
--- a/plugins/workbench-resources/src/components/navigator/TreeElement.svelte
+++ b/plugins/workbench-resources/src/components/navigator/TreeElement.svelte
@@ -54,7 +54,7 @@
   </span>
   {#each actions as action}
     <div class="tool">
-      <ActionIcon label={action.label} icon={action.icon} size={'small'} action={() => { action.action(_id) }} />
+      <ActionIcon label={action.label} icon={action.icon} size={'small'} action={(ev) => { action.action(_id, ev) }} />
     </div>
   {/each}
   {#if notifications > 0 && collapsed}