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 35a11b7d..66a27c5e 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -298,6 +298,7 @@
   "Show lyrics": "Show lyrics",
   "Show more": "Show more",
   "Show table of contents": "Show table of contents",
+  "Site search": "Site search",
   "Slug": "Slug",
   "Social networks": "Social networks",
   "Society": "Society",
diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json
index a4daed51..61695ca5 100644
--- a/public/locales/ru/translation.json
+++ b/public/locales/ru/translation.json
@@ -315,6 +315,7 @@
   "Show lyrics": "Текст песни",
   "Show more": "Читать дальше",
   "Show table of contents": "Показать главление",
+  "Site search": "Поиск по сайту",
   "Slug": "Постоянная ссылка",
   "Social networks": "Социальные сети",
   "Society": "Общество",
diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx
index ab5c524d..85c95fd1 100644
--- a/src/components/Nav/Header/Header.tsx
+++ b/src/components/Nav/Header/Header.tsx
@@ -23,6 +23,11 @@ import { Snackbar } from '../Snackbar'
 import { Link } from './Link'
 
 import styles from './Header.module.scss'
+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
@@ -182,6 +187,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 e5c85f61..28a76f83 100644
--- a/src/components/Nav/HeaderAuth.tsx
+++ b/src/components/Nav/HeaderAuth.tsx
@@ -127,10 +127,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 2bf290fe..baf30a2a 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 a1fe5380..14c5e40c 100644
--- a/src/components/Nav/Modal/Modal.tsx
+++ b/src/components/Nav/Modal/Modal.tsx
@@ -45,7 +45,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..8e114340
--- /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 aa555272..b807086b 100644
--- a/src/stores/ui.ts
+++ b/src/stores/ui.ts
@@ -23,6 +23,7 @@ export type ModalType =
   | 'editorInsertLink'
   | 'followers'
   | 'following'
+  | 'search'
 
 export const MODALS: Record<ModalType, ModalType> = {
   auth: 'auth',
@@ -38,6 +39,7 @@ export const MODALS: Record<ModalType, ModalType> = {
   editorInsertLink: 'editorInsertLink',
   followers: 'followers',
   following: 'following',
+  search: 'search',
 }
 
 const [modal, setModal] = createSignal<ModalType>(null)