diff --git a/public/icons/cross.svg b/public/icons/cross.svg
new file mode 100644
index 00000000..0ded326d
--- /dev/null
+++ b/public/icons/cross.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.94025 5L0.227936 1.28769L1.2886 0.227029L5.00091 3.93934L8.71322 0.227029L9.77388 1.28769L6.06157 5L9.77388 8.71231L8.71322 9.77297L5.00091 6.06066L1.2886 9.77297L0.227936 8.71231L3.94025 5Z" fill="#D00820"/>
+</svg>
diff --git a/public/icons/plus-button.svg b/public/icons/plus-button.svg
new file mode 100644
index 00000000..90a81b02
--- /dev/null
+++ b/public/icons/plus-button.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 19V12H21V19H28V21H21L21 28H19L19 21H12V19H19Z" fill="#404040"/>
+<rect x="1" y="1" width="38" height="38" rx="11" stroke="#404040" stroke-width="2"/>
+</svg>
diff --git a/public/icons/plus.svg b/public/icons/plus.svg
new file mode 100644
index 00000000..d9f84d23
--- /dev/null
+++ b/public/icons/plus.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.25098 5.25V0L6.75098 0V5.25L12.001 5.25V6.75L6.75098 6.75L6.75098 12H5.25098L5.25098 6.75H0.000976563L0.000976563 5.25H5.25098Z" fill="#141414"/>
+</svg>
diff --git a/src/components/Inbox/CreateModalContent.module.scss b/src/components/Inbox/CreateModalContent.module.scss
new file mode 100644
index 00000000..fc1b2f1b
--- /dev/null
+++ b/src/components/Inbox/CreateModalContent.module.scss
@@ -0,0 +1,9 @@
+.CreateModalContent {
+  padding: 24px;
+  .footer {
+    padding-top: 12px;
+    display: flex;
+    justify-content: space-around;
+    gap: 12px;
+  }
+}
diff --git a/src/components/Inbox/CreateModalContent.tsx b/src/components/Inbox/CreateModalContent.tsx
new file mode 100644
index 00000000..c1f927c8
--- /dev/null
+++ b/src/components/Inbox/CreateModalContent.tsx
@@ -0,0 +1,112 @@
+import { createSignal, For, createEffect } from 'solid-js'
+import styles from './CreateModalContent.module.scss'
+import { t } from '../../utils/intl'
+import InviteUser from './InviteUser'
+import type { Author } from '../../graphql/types.gen'
+import { hideModal } from '../../stores/ui'
+import { useInbox } from '../../context/inbox'
+
+type inviteUser = Author & { selected: boolean }
+type query =
+  | {
+      theme: string
+      members: string[]
+    }
+  | undefined
+type Props = {
+  users: Author[]
+}
+
+const CreateModalContent = (props: Props) => {
+  const inviteUsers: inviteUser[] = props.users.map((user) => ({ ...user, selected: false }))
+  const [theme, setTheme] = createSignal<string>('')
+  const [slugs, setSlugs] = createSignal<string[]>([])
+  const [collectionToInvite, setCollectionToInvite] = createSignal<inviteUser[]>(inviteUsers)
+  let textInput: HTMLInputElement
+
+  const reset = () => {
+    setTheme('')
+    setSlugs([])
+    hideModal()
+  }
+
+  createEffect(() => {
+    setSlugs(() => {
+      return collectionToInvite()
+        .filter((user) => {
+          return user.selected === true
+        })
+        .map((user) => {
+          return user['slug']
+        })
+    })
+    if (slugs().length > 2 && theme().length === 0) {
+      setTheme(t('group_chat'))
+    }
+  })
+
+  const handleSetTheme = () => {
+    setTheme(textInput.value.length > 0 && textInput.value)
+  }
+
+  const handleClick = (user) => {
+    setCollectionToInvite((userCollection) => {
+      return userCollection.map((clickedUser) =>
+        user.slug === clickedUser.slug ? { ...clickedUser, selected: !clickedUser.selected } : clickedUser
+      )
+    })
+  }
+
+  const { chatEntities, actions } = useInbox()
+
+  console.log('!!! chatEntities:', chatEntities)
+
+  const handleCreate = async () => {
+    try {
+      const initChat = await actions.createChat(slugs(), theme())
+      console.debug('[initChat]', initChat)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  return (
+    <div class={styles.CreateModalContent}>
+      <h4>{t('create_chat')}</h4>
+      {slugs().length > 2 && (
+        <input
+          ref={textInput}
+          onInput={handleSetTheme}
+          type="text"
+          required={true}
+          class="form-control form-control-lg fs-3"
+          placeholder={t('discourse_theme')}
+        />
+      )}
+
+      <div class="invite-recipients" style={{ height: '400px', overflow: 'auto' }}>
+        <For each={collectionToInvite()}>
+          {(author) => (
+            <InviteUser onClick={() => handleClick(author)} author={author} selected={author.selected} />
+          )}
+        </For>
+      </div>
+
+      <div class={styles.footer}>
+        <button type="button" class="btn btn-lg fs-3 btn-outline-danger" onClick={reset}>
+          {t('cancel')}
+        </button>
+        <button
+          type="button"
+          class="btn btn-lg fs-3 btn-outline-primary"
+          onClick={handleCreate}
+          disabled={slugs().length === 0}
+        >
+          {slugs().length > 2 ? t('create_group') : t('create_chat')}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default CreateModalContent
diff --git a/src/components/Inbox/DialogCard.tsx b/src/components/Inbox/DialogCard.tsx
index dcfb7021..a9a4dcd3 100644
--- a/src/components/Inbox/DialogCard.tsx
+++ b/src/components/Inbox/DialogCard.tsx
@@ -14,19 +14,9 @@ type DialogProps = {
 }
 
 const DialogCard = (props: DialogProps) => {
-  const { chatEntities, actions } = useInbox()
-  const handleOpenChat = async () => {
-    try {
-      const initChat = await actions.createChat([props.author.slug, props.ownSlug])
-      console.debug('[initChat]', initChat)
-    } catch (error) {
-      console.error(error)
-    }
-  }
-
   return (
     //DialogCardView - подумать
-    <div class={styles.DialogCard} onClick={handleOpenChat}>
+    <div class={styles.DialogCard}>
       <div class={styles.avatar}>
         <DialogAvatar name={props.author.name} url={props.author.userpic} online={props.online} />
       </div>
diff --git a/src/components/Inbox/InviteUser.module.scss b/src/components/Inbox/InviteUser.module.scss
new file mode 100644
index 00000000..6f4804ac
--- /dev/null
+++ b/src/components/Inbox/InviteUser.module.scss
@@ -0,0 +1,35 @@
+.InviteUser {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-basis: 0;
+  flex-grow: 1;
+  min-width: 0;
+  padding: 12px;
+  gap: 10px;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+
+  &:hover {
+    background: rgba(#f7f7f7, 0.65);
+  }
+
+  .name {
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 500;
+    font-size: 14px;
+  }
+
+  .action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    background: #f7f7f7;
+    border-radius: 6px;
+  }
+}
diff --git a/src/components/Inbox/InviteUser.tsx b/src/components/Inbox/InviteUser.tsx
new file mode 100644
index 00000000..4fe85ed8
--- /dev/null
+++ b/src/components/Inbox/InviteUser.tsx
@@ -0,0 +1,22 @@
+import styles from './InviteUser.module.scss'
+import DialogAvatar from './DialogAvatar'
+import type { Author } from '../../graphql/types.gen'
+import { Icon } from '../_shared/Icon'
+
+type DialogProps = {
+  author: Author
+  selected: boolean
+  onClick: () => void
+}
+
+const InviteUser = (props: DialogProps) => {
+  return (
+    <div class={styles.InviteUser} onClick={props.onClick}>
+      <DialogAvatar name={props.author.name} url={props.author.userpic} />
+      <div class={styles.name}>{props.author.name}</div>
+      <div class={styles.action}>{props.selected ? <Icon name="cross" /> : <Icon name="plus" />}</div>
+    </div>
+  )
+}
+
+export default InviteUser
diff --git a/src/components/Inbox/Search.module.scss b/src/components/Inbox/Search.module.scss
index 207ad6a6..a92c66bc 100644
--- a/src/components/Inbox/Search.module.scss
+++ b/src/components/Inbox/Search.module.scss
@@ -8,7 +8,7 @@
 
     input {
       display: block;
-      height: 40px;
+      height: 36px;
       border: none;
       box-shadow: none;
       padding: 10px 36px 10px 12px;
@@ -38,7 +38,7 @@
       position: absolute;
       width: 16px;
       height: 16px;
-      top: 12px;
+      top: 10px;
       right: 12px;
       opacity: 0.5;
     }
diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx
index d90cd6df..d1262857 100644
--- a/src/components/Nav/Header.tsx
+++ b/src/components/Nav/Header.tsx
@@ -84,7 +84,7 @@ export const Header = (props: Props) => {
         [styles.headerWithTitle]: Boolean(props.title)
       }}
     >
-      <Modal name="auth">
+      <Modal variant="wide" name="auth">
         <AuthModal />
       </Modal>
 
diff --git a/src/components/Nav/Modal.scss b/src/components/Nav/Modal.module.scss
similarity index 75%
rename from src/components/Nav/Modal.scss
rename to src/components/Nav/Modal.module.scss
index 8c7bc2f0..746202e0 100644
--- a/src/components/Nav/Modal.scss
+++ b/src/components/Nav/Modal.module.scss
@@ -1,4 +1,4 @@
-.modalwrap {
+.backdrop {
   align-items: center;
   background: rgb(20 20 20 / 70%);
   display: flex;
@@ -10,9 +10,16 @@
   position: fixed;
   top: 0;
   width: 100%;
-  z-index: 10;
+  z-index: 100;
+}
 
-  .close-control {
+.modal {
+  background: #fff;
+  max-width: 1000px;
+  position: relative;
+  width: 80%;
+
+  .close {
     position: absolute;
     top: 1em;
     cursor: pointer;
@@ -41,19 +48,16 @@
       // top: 11em;
     }
   }
-}
 
-.modalwrap__inner {
-  background: #fff;
-  max-width: 1000px;
-  position: relative;
-  width: 80%;
-}
-
-.modalwrap__content {
-  padding: $container-padding-x;
-
-  @media (min-width: 800px) and (max-width: 991px) {
-    padding: 10rem 6rem;
+  &.narrow {
+    max-width: 460px;
+    width: 50%;
+    @media (min-width: 800px) and (max-width: 991px) {
+      width: 80%;
+    }
+    .close {
+      right: 12px;
+      top: 12px;
+    }
   }
 }
diff --git a/src/components/Nav/Modal.tsx b/src/components/Nav/Modal.tsx
index 2ebe709d..51b55eac 100644
--- a/src/components/Nav/Modal.tsx
+++ b/src/components/Nav/Modal.tsx
@@ -1,22 +1,24 @@
 import { createEffect, createSignal, Show } from 'solid-js'
 import type { JSX } from 'solid-js'
 import { getLogger } from '../../utils/logger'
-import './Modal.scss'
 import { hideModal, useModalStore } from '../../stores/ui'
 import { useEscKeyDownHandler } from '../../utils/useEscKeyDownHandler'
+import { clsx } from 'clsx'
+import styles from './Modal.module.scss'
 
 const log = getLogger('modal')
 
 interface ModalProps {
   name: string
+  variant: 'narrow' | 'wide'
   children: JSX.Element
 }
 
 export const Modal = (props: ModalProps) => {
   const { modal } = useModalStore()
 
-  const wrapClick = (event: { target: Element }) => {
-    if (event.target.classList.contains('modalwrap')) hideModal()
+  const backdropClick = (event: Event) => {
+    hideModal()
   }
 
   useEscKeyDownHandler(() => hideModal())
@@ -30,10 +32,16 @@ export const Modal = (props: ModalProps) => {
 
   return (
     <Show when={visible()}>
-      <div class="modalwrap" onClick={wrapClick}>
-        <div class="modalwrap__inner">
+      <div class={styles.backdrop} onClick={backdropClick}>
+        <div
+          class={clsx(styles.modal, {
+            [styles.wide]: props.variant === 'wide',
+            [styles.narrow]: props.variant === 'narrow'
+          })}
+          onClick={(event) => event.stopPropagation()}
+        >
           {props.children}
-          <div class="close-control" onClick={hideModal}>
+          <div class={styles.close} onClick={hideModal}>
             <svg width="16" height="18" viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg">
               <path
                 d="M7.99987 7.52552L14.1871 0.92334L15.9548 2.80968L9.76764 9.41185L15.9548 16.014L14.1871 17.9004L7.99987 11.2982L1.81269 17.9004L0.0449219 16.014L6.23211 9.41185L0.0449225 2.80968L1.81269 0.92334L7.99987 7.52552Z"
diff --git a/src/components/Pages/about/ManifestPage.tsx b/src/components/Pages/about/ManifestPage.tsx
index 02d02014..2998b4bc 100644
--- a/src/components/Pages/about/ManifestPage.tsx
+++ b/src/components/Pages/about/ManifestPage.tsx
@@ -15,10 +15,10 @@ export const ManifestPage = () => {
 
   return (
     <PageWrap>
-      <Modal name="feedback">
+      <Modal variant="wide" name="feedback">
         <Feedback />
       </Modal>
-      <Modal name="subscribe">
+      <Modal variant="wide" name="subscribe">
         <Subscribe />
       </Modal>
       <article class="container container--static-page">
diff --git a/src/components/Views/Inbox.tsx b/src/components/Views/Inbox.tsx
index 18095ecc..ca076a1b 100644
--- a/src/components/Views/Inbox.tsx
+++ b/src/components/Views/Inbox.tsx
@@ -12,6 +12,10 @@ import { loadRecipients, loadChats } from '../../stores/inbox'
 import { t } from '../../utils/intl'
 import '../../styles/Inbox.scss'
 import { useInbox } from '../../context/inbox'
+import { Modal } from '../Nav/Modal'
+import { showModal } from '../../stores/ui'
+import InviteUser from '../Inbox/InviteUser'
+import CreateModalContent from '../Inbox/CreateModalContent'
 
 const OWNER_ID = '501'
 const client = createClient({
@@ -133,21 +137,30 @@ export const InboxView = () => {
     formParent.dataset.replicatedValue = postMessageText()
   })
 
-  // FIXME: прописать типы
-  // const { chatEntitieies, actions: { createCaht }} = useInbox()
-  // const { actions: { createCaht }} = useInbox()
-
+  const handleOpenInviteModal = (event: Event) => {
+    event.preventDefault()
+    showModal('inviteToChat')
+  }
   return (
     <div class="messages container">
+      <Modal variant="narrow" name="inviteToChat">
+        <CreateModalContent users={recipients()} />
+      </Modal>
       <div class="row">
         <div class="chat-list col-md-4">
-          <Search placeholder="Поиск" onChange={getQuery} />
+          <div class="sidebar-header">
+            <Search placeholder="Поиск" onChange={getQuery} />
+            <div onClick={handleOpenInviteModal}>
+              <Icon name="plus-button" style={{ width: '40px', height: '40px' }} />
+            </div>
+          </div>
+
           <div class="chat-list__types">
             <ul>
               <li>
                 <strong>{t('All')}</strong>
               </li>
-              <li onClick={handleGetChats}>{t('Conversations')}</li>
+              <li onClick={handleGetChats}>{t('Personal')}</li>
               <li>{t('Groups')}</li>
             </ul>
           </div>
diff --git a/src/context/inbox.tsx b/src/context/inbox.tsx
index f111d126..e3b41d44 100644
--- a/src/context/inbox.tsx
+++ b/src/context/inbox.tsx
@@ -7,7 +7,7 @@ import { createStore } from 'solid-js/store'
 type InboxContextType = {
   chatEntities: { [chatId: string]: Message[] }
   actions: {
-    createChat: (members: string[], title?: string) => Promise<void>
+    createChat: (members: string[], title: string) => Promise<void>
   }
 }
 
@@ -20,8 +20,8 @@ export function useInbox() {
 export const InboxProvider = (props: { children: JSX.Element }) => {
   const [chatEntities, setChatEntities] = createStore({})
 
-  const createChat = async (members: string[]) => {
-    const chat = await apiClient.createChat({ members })
+  const createChat = async (members: string[], title: string) => {
+    const chat = await apiClient.createChat({ members, title })
     setChatEntities((s) => {
       s[chat.id] = chat
     })
@@ -31,6 +31,7 @@ export const InboxProvider = (props: { children: JSX.Element }) => {
   const actions = {
     createChat
   }
+
   const value: InboxContextType = { chatEntities, actions }
   return <InboxContext.Provider value={value}>{props.children}</InboxContext.Provider>
 }
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 9d544a05..49cd9358 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -181,7 +181,12 @@
   "zine": "журнал",
   "shout": "пост",
   "discussion": "дискурс",
-  "Conversations": "Переписки",
+  "Personal": "Личные",
   "Groups": "Группы",
-  "All": "Все"
+  "All": "Все",
+  "create_chat": "Создать чат",
+  "create_group": "Создать группу",
+  "discourse_theme": "Тема дискурса",
+  "cancel": "Отмена",
+  "group_chat": "Общий чат"
 }
diff --git a/src/stores/ui.ts b/src/stores/ui.ts
index cbff3f54..79730db3 100644
--- a/src/stores/ui.ts
+++ b/src/stores/ui.ts
@@ -4,7 +4,7 @@ import type { AuthModalSearchParams, ConfirmEmailSearchParams } from '../compone
 import type { RootSearchParams } from '../components/types'
 
 export const [locale, setLocale] = createSignal('ru')
-export type ModalType = 'auth' | 'subscribe' | 'feedback' | 'thank' | 'donate'
+export type ModalType = 'auth' | 'subscribe' | 'feedback' | 'thank' | 'donate' | 'inviteToChat'
 type WarnKind = 'error' | 'warn' | 'info'
 
 export interface Warning {
@@ -18,7 +18,8 @@ export const MODALS: Record<ModalType, ModalType> = {
   subscribe: 'subscribe',
   feedback: 'feedback',
   thank: 'thank',
-  donate: 'donate'
+  donate: 'donate',
+  inviteToChat: 'inviteToChat'
 }
 
 const [modal, setModal] = createSignal<ModalType | null>(null)
diff --git a/src/styles/Inbox.scss b/src/styles/Inbox.scss
index 57709423..ea766bbe 100644
--- a/src/styles/Inbox.scss
+++ b/src/styles/Inbox.scss
@@ -17,7 +17,7 @@ main {
   flex: 1;
   flex-direction: column;
   position: fixed;
-  z-index: 9;
+  z-index: 900;
 
   .row {
     flex: 1;
@@ -41,6 +41,12 @@ main {
 
   $fade-height: 10px;
 
+  .sidebar-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
   .holder {
     overflow: hidden;
     flex: 1;
@@ -105,11 +111,13 @@ main {
 
   li {
     margin-right: 1em;
+    color: #696969;
   }
 
   strong {
     border-bottom: 3px solid;
     font-weight: normal;
+    color: #000;
   }
 }
 
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 34ae8298..f568686d 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -4,6 +4,8 @@
 @import 'bootstrap/scss/containers';
 @import 'bootstrap/scss/grid';
 @import 'bootstrap/scss/bootstrap-utilities';
+@import 'bootstrap/scss/forms';
+@import 'bootstrap/scss/buttons';
 
 :root {
   --background-color: #fff;