diff --git a/public/index.html b/public/index.html
index 6fe8f2b..2217f6d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -42,4 +42,5 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
+  
 </html>
diff --git a/src/common/constants/constants.ts b/src/common/constants/constants.ts
index 13af4ec..4074999 100644
--- a/src/common/constants/constants.ts
+++ b/src/common/constants/constants.ts
@@ -3,9 +3,11 @@ export const PAGES_PATHS = {
   SIGN_UP: '/signup',
   HOME: '/',
   RESET_PASS: '/reset-password',
+  SEARCH: '/search',
+  FAVORITES: '/favorites',
 }
 
-export const ButtonLables = {
+export const ButtonLabels = {
   approve: 'Approve',
   delete: 'Delete',
   edit: 'Edit',
@@ -17,3 +19,5 @@ export const HttpMethods = {
   PUT: 'put',
   DELETE: 'delete',
 }
+
+export const AUTH_PAGES = [PAGES_PATHS.LOG_IN, PAGES_PATHS.SIGN_UP, PAGES_PATHS.RESET_PASS]
diff --git a/src/features/showroom/components/showroom-property-thumbnail/showroom-property-thumbnail.tsx b/src/features/showroom/components/showroom-property-thumbnail/showroom-property-thumbnail.tsx
index b135047..9a76746 100644
--- a/src/features/showroom/components/showroom-property-thumbnail/showroom-property-thumbnail.tsx
+++ b/src/features/showroom/components/showroom-property-thumbnail/showroom-property-thumbnail.tsx
@@ -2,7 +2,7 @@ import { FC } from 'react'
 import classnames from 'classnames/bind'
 import { Button } from 'primereact/button'
 
-import { ButtonLables } from 'common/constants/constants'
+import { ButtonLabels } from 'common/constants/constants'
 import { UtilService } from 'common/services/util-service'
 
 import { ShowroomUtilService } from 'features/showroom/services/showroom-util-service'
@@ -50,21 +50,21 @@ export const ShowroomPropertyThumbnail: FC<Props> = ({ thumbnail, type, role })
         <div className={cx(style.thumbnailActions, actionsStyle, type === 'list' && borderActionsStyle)}>
           {thumbnail.status === 'pending' && role !== 'client' && (
             <Button
-              label={ButtonLables.approve}
+              label={ButtonLabels.approve}
               onClick={() => ShowroomUtilService.handleApprove(thumbnail.id)}
               className='smallButton'
             />
           )}
           <div onClick={() => ShowroomUtilService.handleDeleteProprety(thumbnail.id)}>
             {thumbnail.status === 'pending' && role !== 'client' ? (
-              <Button className='p-button-danger p-button-text smallButton' label={ButtonLables.delete} />
+              <Button className='p-button-danger p-button-text smallButton' label={ButtonLabels.delete} />
             ) : (
-              <Button className='p-button-danger smallButton' label={ButtonLables.delete} />
+              <Button className='p-button-danger smallButton' label={ButtonLabels.delete} />
             )}
           </div>
           <Button
             className='p-button-info p-button-text smallButton'
-            label={ButtonLables.edit}
+            label={ButtonLabels.edit}
             onClick={() => ShowroomUtilService.handleEdit(thumbnail.id)}
           />
         </div>
diff --git a/src/features/showroom/components/showroom-search-bar/showroom-search-bar.module.scss b/src/features/showroom/components/showroom-search-bar/showroom-search-bar.module.scss
new file mode 100644
index 0000000..780b9b7
--- /dev/null
+++ b/src/features/showroom/components/showroom-search-bar/showroom-search-bar.module.scss
@@ -0,0 +1,10 @@
+.searchBar {
+  &InputCategoryHolder {
+    background: transparent !important;
+    padding: 0 !important;
+  }
+
+  &InputCategory {
+    border: 0 !important;
+  }
+}
diff --git a/src/features/showroom/components/showroom-search-bar/showroom-search-bar.tsx b/src/features/showroom/components/showroom-search-bar/showroom-search-bar.tsx
new file mode 100644
index 0000000..ffc020b
--- /dev/null
+++ b/src/features/showroom/components/showroom-search-bar/showroom-search-bar.tsx
@@ -0,0 +1,47 @@
+import { Dropdown, DropdownChangeParams } from 'primereact/dropdown'
+import { useNavigate } from 'react-router-dom'
+import { InputText } from 'primereact/inputtext'
+import classNames from 'classnames'
+import { useState } from 'react'
+
+import { PAGES_PATHS } from 'common/constants/constants'
+
+import { DROPDOWN_PLACEHOLDER } from 'features/top-bar/constants/top-bar-constants'
+
+import style from './showroom-search-bar.module.scss'
+
+export const SearchBar = () => {
+  const [selectCategory, setSelectedCategory] = useState(null)
+
+  const navigate = useNavigate()
+
+  const categories = [{ name: 'Category 1' }, { name: 'Category 2' }, { name: 'Category 3' }]
+
+  const onCityChange = (e: DropdownChangeParams) => {
+    setSelectedCategory(e.value)
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const textBox = event.target as HTMLInputElement
+
+    if (event.key === 'Enter') {
+      navigate(`${PAGES_PATHS.SEARCH}/${textBox.value}`)
+    }
+  }
+
+  return (
+    <div className='p-inputgroup'>
+      <span className={classNames('p-inputgroup-addon', style.searchBarInputCategoryHolder)}>
+        <Dropdown
+          className={style.searchBarInputCategory}
+          value={selectCategory}
+          options={categories}
+          onChange={onCityChange}
+          optionLabel='name'
+          placeholder={DROPDOWN_PLACEHOLDER}
+        />
+      </span>
+      <InputText onKeyDown={handleKeyDown} />
+    </div>
+  )
+}
diff --git a/src/features/top-bar/assets/favourites-icon.svg b/src/features/top-bar/assets/favourites-icon.svg
new file mode 100644
index 0000000..1b3b5bb
--- /dev/null
+++ b/src/features/top-bar/assets/favourites-icon.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.87502 14.3332L6.43752 13.0207C4.9653 11.6734 3.63558 10.3365 2.44835 9.00984C1.26058 7.68373 0.666687 6.22206 0.666687 4.62484C0.666687 3.31928 1.10419 2.229 1.97919 1.354C2.85419 0.479004 3.94446 0.0415039 5.25002 0.0415039C5.98613 0.0415039 6.68058 0.197615 7.33335 0.509837C7.98613 0.822615 8.54169 1.24984 9.00002 1.7915C9.45835 1.24984 10.0139 0.822615 10.6667 0.509837C11.3195 0.197615 12.0139 0.0415039 12.75 0.0415039C14.0556 0.0415039 15.1459 0.479004 16.0209 1.354C16.8959 2.229 17.3334 3.31928 17.3334 4.62484C17.3334 6.22206 16.7431 7.68734 15.5625 9.02067C14.382 10.354 13.0417 11.6943 11.5417 13.0415L10.125 14.3332C9.80558 14.6387 9.43058 14.7915 9.00002 14.7915C8.56947 14.7915 8.19446 14.6387 7.87502 14.3332ZM8.20835 3.45817C7.80558 2.88873 7.37502 2.45456 6.91669 2.15567C6.45835 1.85734 5.9028 1.70817 5.25002 1.70817C4.41669 1.70817 3.72224 1.98595 3.16669 2.5415C2.61113 3.09706 2.33335 3.7915 2.33335 4.62484C2.33335 5.34706 2.5903 6.11428 3.10419 6.9265C3.61808 7.73928 4.2328 8.52762 4.94835 9.2915C5.66335 10.0554 6.39947 10.7707 7.15669 11.4373C7.91335 12.104 8.5278 12.6526 9.00002 13.0832C9.47224 12.6526 10.087 12.104 10.8442 11.4373C11.6009 10.7707 12.337 10.0554 13.0525 9.2915C13.7675 8.52762 14.382 7.73928 14.8959 6.9265C15.4097 6.11428 15.6667 5.34706 15.6667 4.62484C15.6667 3.7915 15.3889 3.09706 14.8334 2.5415C14.2778 1.98595 13.5834 1.70817 12.75 1.70817C12.0972 1.70817 11.5417 1.85734 11.0834 2.15567C10.625 2.45456 10.1945 2.88873 9.79169 3.45817C9.69446 3.59706 9.57641 3.70123 9.43752 3.77067C9.29863 3.84012 9.1528 3.87484 9.00002 3.87484C8.84724 3.87484 8.70141 3.84012 8.56252 3.77067C8.42363 3.70123 8.30558 3.59706 8.20835 3.45817Z" fill="#4D5464"/>
+</svg>
diff --git a/src/features/top-bar/assets/user-icon.svg b/src/features/top-bar/assets/user-icon.svg
new file mode 100644
index 0000000..749bcf5
--- /dev/null
+++ b/src/features/top-bar/assets/user-icon.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.99998 7.00016C6.08331 7.00016 5.29859 6.67377 4.64581 6.021C3.99304 5.36822 3.66665 4.5835 3.66665 3.66683C3.66665 2.75016 3.99304 1.96544 4.64581 1.31266C5.29859 0.659885 6.08331 0.333496 6.99998 0.333496C7.91665 0.333496 8.70137 0.659885 9.35415 1.31266C10.0069 1.96544 10.3333 2.75016 10.3333 3.66683C10.3333 4.5835 10.0069 5.36822 9.35415 6.021C8.70137 6.67377 7.91665 7.00016 6.99998 7.00016ZM1.33331 13.6668C0.781027 13.6668 0.333313 13.2191 0.333313 12.6668V11.3335C0.333313 10.8613 0.45498 10.4271 0.698313 10.031C0.941091 9.63544 1.26387 9.3335 1.66665 9.12516C2.52776 8.69461 3.40276 8.37155 4.29165 8.156C5.18054 7.941 6.08331 7.8335 6.99998 7.8335C7.91665 7.8335 8.81942 7.941 9.70831 8.156C10.5972 8.37155 11.4722 8.69461 12.3333 9.12516C12.7361 9.3335 13.0589 9.63544 13.3016 10.031C13.545 10.4271 13.6666 10.8613 13.6666 11.3335V12.6668C13.6666 13.2191 13.2189 13.6668 12.6666 13.6668H1.33331ZM1.99998 11.3335C1.99998 11.7017 2.29846 12.0002 2.66665 12.0002H11.3333C11.7015 12.0002 12 11.7017 12 11.3335C12 11.1807 11.9619 11.0418 11.8858 10.9168C11.8091 10.7918 11.7083 10.6946 11.5833 10.6252C10.8333 10.2502 10.0764 9.96877 9.31248 9.781C8.54859 9.59377 7.77776 9.50016 6.99998 9.50016C6.2222 9.50016 5.45137 9.59377 4.68748 9.781C3.92359 9.96877 3.16665 10.2502 2.41665 10.6252C2.29165 10.6946 2.19109 10.7918 2.11498 10.9168C2.03831 11.0418 1.99998 11.1807 1.99998 11.3335ZM6.99998 5.3335C7.45831 5.3335 7.85081 5.17016 8.17748 4.8435C8.50359 4.51738 8.66665 4.12516 8.66665 3.66683C8.66665 3.2085 8.50359 2.81627 8.17748 2.49016C7.85081 2.1635 7.45831 2.00016 6.99998 2.00016C6.54165 2.00016 6.14942 2.1635 5.82331 2.49016C5.49665 2.81627 5.33331 3.2085 5.33331 3.66683C5.33331 4.12516 5.49665 4.51738 5.82331 4.8435C6.14942 5.17016 6.54165 5.3335 6.99998 5.3335Z" fill="#4D5464"/>
+</svg>
diff --git a/src/features/top-bar/components/top-bar/top-bar.module.scss b/src/features/top-bar/components/top-bar/top-bar.module.scss
new file mode 100644
index 0000000..0cda42b
--- /dev/null
+++ b/src/features/top-bar/components/top-bar/top-bar.module.scss
@@ -0,0 +1,54 @@
+.topBar {
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+
+  &Elements {
+    max-width: 1100px;
+    width: 100%;
+    margin: 22px auto;
+    display: flex;
+  }
+
+  &Element {
+    margin: auto 15px;
+    font-weight: 600;
+    font-size: 14px;
+    color: var(--gray-500);
+  }
+
+  &Search {
+    width: 688px;
+  }
+
+  &Link {
+    display: flex;
+    text-decoration: none;
+  }
+
+  &Link:hover {
+    span {
+      color: var(--primary-300) !important;
+    }
+    svg path {
+      fill: var(--primary-300) !important;
+    }
+  }
+
+  &LinkIcon {
+    margin: auto 6px;
+  }
+
+  &LinkText {
+    color: var(--gray-600);
+    font-size: 14px;
+    margin: auto;
+  }
+
+  &Divider {
+    margin: 0;
+    width: 100%;
+    height: 1px;
+    border: 1px solid var(--gray-200);
+  }
+}
diff --git a/src/features/top-bar/components/top-bar/top-bar.tsx b/src/features/top-bar/components/top-bar/top-bar.tsx
new file mode 100644
index 0000000..76636b3
--- /dev/null
+++ b/src/features/top-bar/components/top-bar/top-bar.tsx
@@ -0,0 +1,48 @@
+import { Link } from 'react-router-dom'
+
+import { AUTH_PAGES, PAGES_PATHS } from 'common/constants/constants'
+import { useStore } from 'store/store'
+
+import { SearchBar } from 'features/showroom/components/showroom-search-bar/showroom-search-bar'
+
+import { ReactComponent as AssistLogo } from 'common/assets/logo-assist.svg'
+import { ReactComponent as FavIcon } from '../../assets/favourites-icon.svg'
+import { ReactComponent as UserIcon } from '../../assets/user-icon.svg'
+
+import style from './top-bar.module.scss'
+
+export const TopBar = () => {
+  const { authStore } = useStore()
+  const { userName } = authStore
+
+  if (AUTH_PAGES.includes(document.location.pathname)) return <></>
+
+  return (
+    <section className={style.topBar}>
+      <div className={style.topBarElements}>
+        <div className={style.topBarElement}>
+          <Link to={PAGES_PATHS.HOME}>
+            <AssistLogo />
+          </Link>
+        </div>
+        <div className={style.topBarSearch}>
+          <SearchBar />
+        </div>
+        <div className={style.topBarElement}>
+          <Link to={PAGES_PATHS.FAVORITES} className={style.topBarLink}>
+            <FavIcon className={style.topBarLinkIcon} />
+            <span className={style.topBarLinkText}>Favorites</span>
+          </Link>
+        </div>
+        <div className={style.topBarElement}>
+          {/**replace the link to PAGES_PATHS.settings when the PR will be merged */}
+          <Link to={'/setting/profile'} className={style.topBarLink}>
+            <UserIcon className={style.topBarLinkIcon} />
+            <span className={style.topBarLinkText}>{userName || 'My account'}</span>
+          </Link>
+        </div>
+      </div>
+      <hr className={style.topBarDivider} />
+    </section>
+  )
+}
diff --git a/src/features/top-bar/constants/top-bar-constants.tsx b/src/features/top-bar/constants/top-bar-constants.tsx
new file mode 100644
index 0000000..b51ed21
--- /dev/null
+++ b/src/features/top-bar/constants/top-bar-constants.tsx
@@ -0,0 +1 @@
+export const DROPDOWN_PLACEHOLDER = 'Category'
diff --git a/src/index.css b/src/index.css
index 0a1dcb6..69fddb0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,3 +5,8 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
diff --git a/src/pages/page-router.tsx b/src/pages/page-router.tsx
index a842a6e..d072528 100644
--- a/src/pages/page-router.tsx
+++ b/src/pages/page-router.tsx
@@ -1,5 +1,6 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 
+import { TopBar } from 'features/top-bar/components/top-bar/top-bar'
 import { PAGES_PATHS } from '../common/constants/constants'
 import { PageAllComponents } from './page-all-components'
 import { PageAuth } from './page-auth/page-auth'
@@ -7,8 +8,9 @@ import { PageAuth } from './page-auth/page-auth'
 export const PageRouter = () => {
   return (
     <BrowserRouter>
+      <TopBar />
       <Routes>
-        <Route path={PAGES_PATHS.HOME} element={<PageAllComponents />}></Route>
+        <Route path={PAGES_PATHS.HOME} element={<PageAllComponents />} />
         <Route path={PAGES_PATHS.LOG_IN} element={<PageAuth type='login' />} />
         <Route path={PAGES_PATHS.SIGN_UP} element={<PageAuth type='signup' />} />
         <Route path={PAGES_PATHS.RESET_PASS} element={<PageAuth type='reset' />} />