diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 8cfdc076..61dfd54f 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -335,6 +335,7 @@
   "This post has not been rated yet": "This post has not been rated yet",
   "This way we ll realize that you re a real person and ll take your vote into account. And you ll see how others voted": "This way we ll realize that you re a real person and ll take your vote into account. And you ll see how others voted",
   "This way you ll be able to subscribe to authors, interesting topics and customize your feed": "This way you ll be able to subscribe to authors, interesting topics and customize your feed",
+  "To find publications, art, comments, authors and topics of interest to you, just start typing your query": "To find publications, art, comments, authors and topics of interest to you, just start typing your query",
   "To leave a comment please": "To leave a comment please",
   "To write a comment, you must": "To write a comment, you must",
   "Top authors": "Authors rating",
diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json
index 1c379fac..9075a05e 100644
--- a/public/locales/ru/translation.json
+++ b/public/locales/ru/translation.json
@@ -353,6 +353,7 @@
   "This post has not been rated yet": "Эту публикацию еще пока никто не оценил",
   "This way we ll realize that you re a real person and ll take your vote into account. And you ll see how others voted": "Так мы поймем, что вы реальный человек, и учтем ваш голос. А вы увидите, как проголосовали другие",
   "This way you ll be able to subscribe to authors, interesting topics and customize your feed": "Так вы сможете подписаться на авторов, интересные темы и настроить свою ленту",
+  "To find publications, art, comments, authors and topics of interest to you, just start typing your query": "Для поиска публикаций, искусства, комментариев, интересных вам авторов и тем, просто начните вводить ваш запрос",
   "To leave a comment please": "Чтобы оставить комментарий, необходимо",
   "To write a comment, you must": "Чтобы написать комментарий, необходимо",
   "Top authors": "Рейтинг авторов",
diff --git a/src/components/Feed/ArticleCard/ArticleCard.tsx b/src/components/Feed/ArticleCard/ArticleCard.tsx
index 97f1b8ee..9c0eda98 100644
--- a/src/components/Feed/ArticleCard/ArticleCard.tsx
+++ b/src/components/Feed/ArticleCard/ArticleCard.tsx
@@ -161,13 +161,13 @@ export const ArticleCard = (props: ArticleCardProps) => {
           <a href={`/${props.article.slug || ''}`}>
             <div class={styles.shoutCardTitle}>
               <span class={styles.shoutCardLinkWrapper}>
-                <span class={styles.shoutCardLinkContainer}>{title}</span>
+                <span class={styles.shoutCardLinkContainer} innerHTML={title} />
               </span>
             </div>
 
             <Show when={!props.settings?.nosubtitle && subtitle}>
               <div class={styles.shoutCardSubtitle}>
-                <span class={styles.shoutCardLinkContainer}>{subtitle}</span>
+                <span class={styles.shoutCardLinkContainer} innerHTML={subtitle} />
               </div>
             </Show>
           </a>
diff --git a/src/components/Nav/SearchModal/SearchModal.module.scss b/src/components/Nav/SearchModal/SearchModal.module.scss
index 54c4114b..e0dc9801 100644
--- a/src/components/Nav/SearchModal/SearchModal.module.scss
+++ b/src/components/Nav/SearchModal/SearchModal.module.scss
@@ -1,11 +1,14 @@
 @mixin searchFilterControl {
+  @include font-size(1.4rem);
+
+  height: 4rem;
+
+  padding: 0 2rem;
+
   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 {
@@ -17,42 +20,50 @@
   }
 }
 
-.searchForm {
+.searchContainer {
   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;
+.searchInput {
+  @include font-size(4.8rem);
 
-    &::placeholder {
-      color: rgb(255 255 255 / 0.32);
-    }
+  width: 100%;
 
-    &:not(:placeholder-shown) + .submitControl {
-      display: block;
-    }
+  padding: 0 0 0.5rem;
+
+  background: none;
+  border: none;
+  border-bottom: 2px solid #fff;
+  color: #fff;
+  font-weight: bold;
+  outline: none;
+
+  &::placeholder {
+    color: rgb(255 255 255 / 0.32);
+  }
+
+  &:not(:placeholder-shown) + .searchButton img {
+    filter: invert(1);
   }
 }
 
-.submitControl {
-  display: none;
-  filter: invert(1);
-  height: 3.2rem;
+.searchButton {
   position: absolute;
   right: 0;
   top: 2rem;
+
   width: 3.2rem;
+  height: 3.2rem;
+
+  & img {
+    filter: invert(0.4);
+  }
 }
 
 .searchDescription {
-  color: rgb(255 255 255 / 0.64);
   @include font-size(1.6rem);
+
+  color: rgb(255 255 255 / 0.64);
 }
 
 .topicsList {
@@ -60,6 +71,7 @@
   flex-wrap: wrap;
   justify-content: center;
   gap: 1rem;
+
   margin-top: 9.6rem !important;
 }
 
@@ -90,6 +102,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
+
   margin: 6.4rem 0;
 }
 
diff --git a/src/components/Nav/SearchModal/SearchModal.tsx b/src/components/Nav/SearchModal/SearchModal.tsx
index 6c2e1c7e..456a88d3 100644
--- a/src/components/Nav/SearchModal/SearchModal.tsx
+++ b/src/components/Nav/SearchModal/SearchModal.tsx
@@ -1,47 +1,103 @@
-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'
+import { createSignal, Show, For } from 'solid-js'
+
+import { ArticleCard } from '../../Feed/ArticleCard'
+import { Button } from '../../_shared/Button'
+import { Icon } from '../../_shared/Icon'
+
+// import { PRERENDERED_ARTICLES_COUNT } from '../../Views/Home'
+
+// import { restoreScrollPosition, saveScrollPosition } from '../../../utils/scroll'
+
+import type { Shout } from '../../../graphql/types.gen'
+import { useLocalize } from '../../../context/localize'
+
+import styles from './SearchModal.module.scss'
+
+// @@TODO implement search
+// @@TODO implement throttling
+
+// @@TODO implement load more (await ...({ filters: { .. }, limit: .., offset: .. }))
+// @@TODO implement modal hiding on article click
+// @@TODO search url as const
+// @@TODO refactor switcher, filters, topics
+
+const getSearchCoincidences = ({ str, intersection }) =>
+  `<span>${str.replace(
+    new RegExp(intersection, 'g'),
+    `<span class="blackModeIntersection">${intersection}</span>`
+  )}</span>`
 
 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()
+  const searchInputRef: { current: HTMLInputElement } = { current: null }
+
+  const [isSearching, setIsSearching] = createSignal(false)
+  const [searchResultsList, setSearchResultsList] = createSignal([])
+  // const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
+
+  const handleSearch = async () => {
+    const searchValue = searchInputRef.current?.value || ''
+
+    if (Boolean(searchValue)) {
+      await fetch(`https://search.discours.io/search?q=${searchValue}`, {
+        method: 'GET',
+        headers: {
+          accept: 'application/json',
+          'content-type': 'application/json; charset=utf-8'
+        }
+      })
+        .then((data) => data.json())
+        .then((data) => {
+          console.log(data)
+
+          // if (data.length) {
+          //   const preparedSearchResultsList = [].map((article) => ({
+          //     ...article,
+          //     title: getSearchCoincidences({
+          //       str: article.title,
+          //       intersection: searchInputRef.current?.value || ''
+          //     }),
+          //     subtitle: getSearchCoincidences({
+          //       str: article.subtitle,
+          //       intersection: searchInputRef.current?.value || ''
+          //     })
+          //   }))
+          //   setSearchResultsList(preparedSearchResultsList)
+          // } else {
+          //   // @@TODO handle no search results notice
+          // }
+        })
+        .catch((error) => {
+          console.log('search request failed', error)
+        })
+    }
   }
 
   return (
-    <form method={method} action={action} onSubmit={submit} class={styles.searchForm}>
+    <div class={styles.searchContainer}>
       <input
-        type="text"
-        name="contact"
+        type="search"
         placeholder={t('Site search')}
-        ref={contactElement}
-        class={styles.searchField}
+        ref={(el) => (searchInputRef.current = el)}
+        class={styles.searchInput}
+        onInput={handleSearch}
+        onFocusIn={() => setIsSearching(true)}
+        onFocusOut={() => setIsSearching(false)}
       />
-      <button type={submit} class={styles.submitControl}>
-        <Icon name="search" />
-      </button>
-      <p class={styles.searchDescription}>
-        Для поиска публикаций, искусства, комментариев, интересных вам авторов и&nbsp;тем, просто начните
-        вводить ваш запрос
-      </p>
 
-      <ul class={clsx('view-switcher', styles.filterSwitcher)}>
+      <Button class={styles.searchButton} onClick={handleSearch} value={<Icon name="search" />} />
+
+      <p
+        class={styles.searchDescription}
+        innerHTML={t(
+          'To find publications, art, comments, authors and topics of interest to you, just start typing your query'
+        )}
+      />
+
+      {/* @@TODO handle switcher */}
+      {/* <ul class={clsx('view-switcher', styles.filterSwitcher)}>
         <li class="view-switcher__item view-switcher__item--selected">
           <button type="button">Все</button>
         </li>
@@ -51,95 +107,83 @@ export const SearchModal = () => {
         <li class="view-switcher__item">
           <button type="button">Темы</button>
         </li>
-      </ul>
+      </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>
+      {/* @@TODO handle filter */}
+      {/* <Show when={FILTERS.length}>
+        <div class={styles.filterResults}>
+          <For each={FILTERS}>
+            {(filter) => (
+              <button
+                type="button"
+                class={styles.filterResultsControl}
+                onClick={() => setActiveFilter(filter)}
+              >
+                Период времени
+              </button>
+            )}
+          </For>
+        </div>
+      </Show> */}
 
-      <div class="container-xl">
+      {/* <Show when={searchResultsList().length}> */}
+      <Show when={true}>
+        {/* <For each={searchResultsList()}> */}
+        <For
+          each={[
+            {
+              body: 'body',
+              cover: 'production/image/bbad6b10-9b44-11ee-bdef-5758f9198f7d.png',
+              createdAt: '12',
+              id: 12,
+              slug: '/',
+              authors: [
+                {
+                  id: 1,
+                  name: 'author',
+                  slug: '/'
+                }
+              ],
+              title: '',
+              subtitle: '',
+              topics: []
+            }
+          ]}
+        >
+          {(article: Shout) => (
+            <ArticleCard
+              article={article}
+              settings={{
+                isFloorImportant: true,
+                isSingle: true,
+                nodate: true
+              }}
+            />
+          )}
+        </For>
+
+        {/* @@TODO handle load more */}
+        {/* <Show when={isLoadMoreButtonVisible()}>
+          <p class="load-more-container">
+            <button class="button" onClick={loadMore}>
+              {t('Load more')}
+            </button>
+          </p>
+        </Show> */}
+      </Show>
+
+      {/* @@TODO handle topics */}
+      {/* <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>
+            {topics.map((topic) => (
+              <button type="button" class={styles.topTopic}>
+                {topic.name}
+              </button>
+            ))}
           </div>
         </div>
-      </div>
-    </form>
+      </div> */}
+    </div>
   )
 }
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 44b7e5a0..c861b448 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -1036,3 +1036,8 @@ iframe {
 .cursorPointer {
   cursor: pointer;
 }
+
+.blackModeIntersection {
+  color: var(--default-color);
+  background: #fef2f2;
+}