diff --git a/public/icons/search.svg b/public/icons/search.svg
index 045492d0..48c14f1d 100644
--- a/public/icons/search.svg
+++ b/public/icons/search.svg
@@ -1,3 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.125 3.375C6.40365 3.375 3.375 6.40365 3.375 10.125C3.375 13.8464 6.40365 16.875 10.125 16.875C11.6745 16.875 13.0964 16.3464 14.237 15.4661L19.1432 20.3698C19.4818 20.7109 20.0312 20.7109 20.3698 20.3698C20.7109 20.0312 20.7109 19.4818 20.3698 19.1432L15.4661 14.237C16.3464 13.0964 16.875 11.6745 16.875 10.125C16.875 6.40365 13.8464 3.375 10.125 3.375ZM10.125 4.875C13.0208 4.875 15.375 7.22917 15.375 10.125C15.375 13.0208 13.0208 15.375 10.125 15.375C7.22917 15.375 4.875 13.0208 4.875 10.125C4.875 7.22917 7.22917 4.875 10.125 4.875Z" fill="#141414"/>
+<path
+  d="M10.125 3.375C6.40365 3.375 3.375 6.40365 3.375 10.125C3.375 13.8464 6.40365 16.875 10.125 16.875C11.6745 16.875 13.0964 16.3464 14.237 15.4661L19.1432 20.3698C19.4818 20.7109 20.0312 20.7109 20.3698 20.3698C20.7109 20.0312 20.7109 19.4818 20.3698 19.1432L15.4661 14.237C16.3464 13.0964 16.875 11.6745 16.875 10.125C16.875 6.40365 13.8464 3.375 10.125 3.375ZM10.125 4.875C13.0208 4.875 15.375 7.22917 15.375 10.125C15.375 13.0208 13.0208 15.375 10.125 15.375C7.22917 15.375 4.875 13.0208 4.875 10.125C4.875 7.22917 7.22917 4.875 10.125 4.875Z" fill="currentColor"/>
 </svg>
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 97824a78..8cfdc076 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -289,6 +289,7 @@
   "Send": "Send",
   "Send link again": "Send link again",
   "Settings": "Settings",
+  "Site search": "Site search",
   "Share": "Share",
   "Show": "Show",
   "Show lyrics": "Show lyrics",
diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json
index 87576d99..1c379fac 100644
--- a/public/locales/ru/translation.json
+++ b/public/locales/ru/translation.json
@@ -305,6 +305,7 @@
   "Send": "Отправить",
   "Send link again": "Прислать ссылку ещё раз",
   "Settings": "Настройки",
+  "Site search": "Поиск по сайту",
   "Share": "Поделиться",
   "Short opening": "Расскажите вашу историю...",
   "Show": "Показать",
diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx
index 7dbe5026..22179cee 100644
--- a/src/components/Nav/Header/Header.tsx
+++ b/src/components/Nav/Header/Header.tsx
@@ -24,6 +24,7 @@ import { apiClient } from '../../../utils/apiClient'
 import { RANDOM_TOPICS_COUNT } from '../../Views/Home'
 import { Link } from './Link'
 import { Subscribe } from '../../_shared/Subscribe'
+import { SearchModal } from '../SearchModal/SearchModal'
 
 type Props = {
   title?: string
@@ -183,6 +184,10 @@ export const Header = (props: Props) => {
         <ConfirmModal />
       </Modal>
 
+      <Modal variant="wide" name="search">
+        <SearchModal />
+      </Modal>
+
       <div class={clsx(styles.mainHeaderInner, 'wide-container')}>
         <nav class={clsx('row', styles.headerInner, { ['fixed']: fixed() })}>
           <div class={clsx(styles.burgerContainer, 'col-auto')}>
diff --git a/src/components/Nav/HeaderAuth.tsx b/src/components/Nav/HeaderAuth.tsx
index 1ca47d3b..1678391e 100644
--- a/src/components/Nav/HeaderAuth.tsx
+++ b/src/components/Nav/HeaderAuth.tsx
@@ -124,10 +124,10 @@ export const HeaderAuth = (props: Props) => {
 
             <Show when={!isSaveButtonVisible()}>
               <div class={styles.userControlItem}>
-                <a href="#">
+                <button onClick={() => showModal('search')}>
                   <Icon name="search" class={styles.icon} />
                   <Icon name="search" class={clsx(styles.icon, styles.iconHover)} />
-                </a>
+                </button>
               </div>
             </Show>
 
diff --git a/src/components/Nav/Modal/Modal.module.scss b/src/components/Nav/Modal/Modal.module.scss
index 54e71ee7..8e99ddc6 100644
--- a/src/components/Nav/Modal/Modal.module.scss
+++ b/src/components/Nav/Modal/Modal.module.scss
@@ -114,3 +114,29 @@
   flex-direction: column;
   height: 90vh;
 }
+
+.modal-search {
+  background: #000;
+
+  .modal {
+    background: none;
+    color: #fff;
+    height: 100vh;
+    max-width: none;
+    padding-top: 10rem;
+    width: 100% !important;
+  }
+
+  .modalInner {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .close {
+    filter: invert(1);
+    height: 3.2rem;
+    right: 0;
+    top: 2rem;
+    width: 3.2rem;
+  }
+}
diff --git a/src/components/Nav/Modal/Modal.tsx b/src/components/Nav/Modal/Modal.tsx
index 0b6e1415..52fa82f5 100644
--- a/src/components/Nav/Modal/Modal.tsx
+++ b/src/components/Nav/Modal/Modal.tsx
@@ -43,7 +43,7 @@ export const Modal = (props: Props) => {
 
   return (
     <Show when={visible()}>
-      <div class={styles.backdrop} onClick={handleHide}>
+      <div class={clsx(styles.backdrop, [styles[`modal-${props.name}`]])} onClick={handleHide}>
         <div class="wide-container">
           <div
             class={clsx(styles.modal, {
diff --git a/src/components/Nav/SearchModal/SearchModal.module.scss b/src/components/Nav/SearchModal/SearchModal.module.scss
new file mode 100644
index 00000000..54c4114b
--- /dev/null
+++ b/src/components/Nav/SearchModal/SearchModal.module.scss
@@ -0,0 +1,98 @@
+@mixin searchFilterControl {
+  background: rgb(64 64 64 / 0.5);
+  border-radius: 10rem;
+  color: #fff;
+  @include font-size(1.4rem);
+  font-weight: 500;
+  height: 4rem;
+  padding: 0 2rem;
+  white-space: nowrap;
+
+  &:hover {
+    background: #404040;
+  }
+
+  &:active {
+    color: rgb(255 255 255 / 0.4);
+  }
+}
+
+.searchForm {
+  position: relative;
+
+  .searchField {
+    background: none;
+    border: none;
+    border-bottom: 2px solid #fff;
+    color: #fff;
+    @include font-size(4.8rem);
+    font-weight: bold;
+    outline: none;
+    padding: 0 0 0.5rem;
+
+    &::placeholder {
+      color: rgb(255 255 255 / 0.32);
+    }
+
+    &:not(:placeholder-shown) + .submitControl {
+      display: block;
+    }
+  }
+}
+
+.submitControl {
+  display: none;
+  filter: invert(1);
+  height: 3.2rem;
+  position: absolute;
+  right: 0;
+  top: 2rem;
+  width: 3.2rem;
+}
+
+.searchDescription {
+  color: rgb(255 255 255 / 0.64);
+  @include font-size(1.6rem);
+}
+
+.topicsList {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 9.6rem !important;
+}
+
+.topTopic {
+  @include searchFilterControl;
+}
+
+.filterSwitcher {
+  margin: 0 0 6.4rem !important;
+  padding: 0 !important;
+
+  button {
+    color: #fff !important;
+  }
+
+  :global(.view-switcher__item--selected) {
+    button {
+      border-bottom-color: #fff !important;
+
+      &:hover {
+        background: none !important;
+      }
+    }
+  }
+}
+
+.filterResults {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin: 6.4rem 0;
+}
+
+.filterResultsControl {
+  @include searchFilterControl;
+}
diff --git a/src/components/Nav/SearchModal/SearchModal.tsx b/src/components/Nav/SearchModal/SearchModal.tsx
new file mode 100644
index 00000000..6c2e1c7e
--- /dev/null
+++ b/src/components/Nav/SearchModal/SearchModal.tsx
@@ -0,0 +1,145 @@
+import { hideModal } from '../../../stores/ui'
+import { useLocalize } from '../../../context/localize'
+import { Button } from '../../_shared/Button'
+import styles from './SearchModal.module.scss'
+import { Icon } from '../../_shared/Icon'
+import clsx from 'clsx'
+
+export const SearchModal = () => {
+  const { t } = useLocalize()
+
+  const action = '/search'
+  const method = 'get'
+  let msgElement: HTMLTextAreaElement | undefined
+  let contactElement: HTMLInputElement | undefined
+  const submit = async () => {
+    await fetch(action, {
+      method,
+      headers: {
+        accept: 'application/json',
+        'content-type': 'application/json; charset=utf-8'
+      },
+      body: JSON.stringify({ contact: contactElement?.value, message: msgElement?.textContent })
+    })
+    // hideModal()
+  }
+
+  return (
+    <form method={method} action={action} onSubmit={submit} class={styles.searchForm}>
+      <input
+        type="text"
+        name="contact"
+        placeholder={t('Site search')}
+        ref={contactElement}
+        class={styles.searchField}
+      />
+      <button type={submit} class={styles.submitControl}>
+        <Icon name="search" />
+      </button>
+      <p class={styles.searchDescription}>
+        Для поиска публикаций, искусства, комментариев, интересных вам авторов и&nbsp;тем, просто начните
+        вводить ваш запрос
+      </p>
+
+      <ul class={clsx('view-switcher', styles.filterSwitcher)}>
+        <li class="view-switcher__item view-switcher__item--selected">
+          <button type="button">Все</button>
+        </li>
+        <li class="view-switcher__item">
+          <button type="button">Публикации</button>
+        </li>
+        <li class="view-switcher__item">
+          <button type="button">Темы</button>
+        </li>
+      </ul>
+
+      <div class={styles.filterResults}>
+        <button type="button" class={styles.filterResultsControl}>
+          Период времени
+        </button>
+        <button type="button" class={styles.filterResultsControl}>
+          Рейтинг
+        </button>
+        <button type="button" class={styles.filterResultsControl}>
+          Тип постов
+        </button>
+        <button type="button" class={styles.filterResultsControl}>
+          Темы
+        </button>
+        <button type="button" class={styles.filterResultsControl}>
+          Авторы
+        </button>
+        <button type="button" class={styles.filterResultsControl}>
+          Сообщества
+        </button>
+      </div>
+
+      <div class="container-xl">
+        <div class="row">
+          <div class={clsx('col-md-18 offset-md-2', styles.topicsList)}>
+            <button type="button" class={styles.topTopic}>
+              За месяц
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #репортажи
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #интервью
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #культура
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #поэзия
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #теории
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #война в украине
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #общество
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #Экспериментальная Музыка
+            </button>
+            <button type="button" class={styles.topTopic}>
+              Рейтинг 300+
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #Протесты
+            </button>
+            <button type="button" class={styles.topTopic}>
+              Музыка
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #За линией Маннергейма
+            </button>
+            <button type="button" class={styles.topTopic}>
+              Тесты
+            </button>
+            <button type="button" class={styles.topTopic}>
+              Коллективные истории
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #личный опыт
+            </button>
+            <button type="button" class={styles.topTopic}>
+              Тоня Самсонова
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #личный опыт
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #Секс
+            </button>
+            <button type="button" class={styles.topTopic}>
+              Молоко Plus
+            </button>
+          </div>
+        </div>
+      </div>
+    </form>
+  )
+}
diff --git a/src/stores/ui.ts b/src/stores/ui.ts
index b9600651..0a22dde9 100644
--- a/src/stores/ui.ts
+++ b/src/stores/ui.ts
@@ -22,6 +22,7 @@ export type ModalType =
   | 'simplifiedEditorInsertLink'
   | 'followers'
   | 'following'
+  | 'search'
 
 export const MODALS: Record<ModalType, ModalType> = {
   auth: 'auth',
@@ -37,7 +38,8 @@ export const MODALS: Record<ModalType, ModalType> = {
   editorInsertLink: 'editorInsertLink',
   simplifiedEditorInsertLink: 'simplifiedEditorInsertLink',
   followers: 'followers',
-  following: 'following'
+  following: 'following',
+  search: 'search'
 }
 
 const [modal, setModal] = createSignal<ModalType>(null)