diff --git a/src/components/app/app.tsx b/src/components/app/app.tsx
index cf0014a..07d413a 100644
--- a/src/components/app/app.tsx
+++ b/src/components/app/app.tsx
@@ -1,13 +1,36 @@
 import MainPage from '../../pages/main-page';
+import FavoritesPage from '../../pages/favorites-page';
+import LoginPage from '../../pages/login-page';
+import OfferPage from '../../pages/offer-page';
+import NotFoundPage from '../../pages/not-found-page';
+import PrivateRoute from '../private-route/private-route';
+import { Route, BrowserRouter, Routes } from 'react-router-dom';
+import { AppRoute, AuthorizationStatus } from '../../consts';
 
 type AppProps = {
   offersCount: number;
-}
+};
 
-export default function App({offersCount}: AppProps): JSX.Element {
+export default function App({ offersCount }: AppProps): JSX.Element {
   return (
-    <MainPage
-      offersCount = {offersCount}
-    />
+    <BrowserRouter>
+      <Routes>
+        <Route
+          path={AppRoute.Main}
+          element={<MainPage offersCount={offersCount} />}
+        />
+        <Route
+          path={AppRoute.Favorites}
+          element={
+            <PrivateRoute authorizationStatus={AuthorizationStatus.Auth}>
+              <FavoritesPage />
+            </PrivateRoute>
+          }
+        />
+        <Route path={AppRoute.Login} element={<LoginPage />} />
+        <Route path={AppRoute.Offer} element={<OfferPage />} />
+        <Route path="*" element={<NotFoundPage />} />
+      </Routes>
+    </BrowserRouter>
   );
 }
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
new file mode 100644
index 0000000..b7cc6f0
--- /dev/null
+++ b/src/components/header/header.tsx
@@ -0,0 +1,42 @@
+export default function Header() {
+  return (
+    <header className="header">
+      <div className="container">
+        <div className="header__wrapper">
+          <div className="header__left">
+            <a className="header__logo-link" href="main.html">
+              <img
+                className="header__logo"
+                src="img/logo.svg"
+                alt="6 cities logo"
+                width="81"
+                height="41"
+              />
+            </a>
+          </div>
+          <nav className="header__nav">
+            <ul className="header__nav-list">
+              <li className="header__nav-item user">
+                <a
+                  className="header__nav-link header__nav-link--profile"
+                  href="#"
+                >
+                  <div className="header__avatar-wrapper user__avatar-wrapper"></div>
+                  <span className="header__user-name user__name">
+                    Oliver.conner@gmail.com
+                  </span>
+                  <span className="header__favorite-count">3</span>
+                </a>
+              </li>
+              <li className="header__nav-item">
+                <a className="header__nav-link" href="#">
+                  <span className="header__signout">Sign out</span>
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/src/components/private-route/private-route.tsx b/src/components/private-route/private-route.tsx
new file mode 100644
index 0000000..aecab12
--- /dev/null
+++ b/src/components/private-route/private-route.tsx
@@ -0,0 +1,19 @@
+import { Navigate } from 'react-router-dom';
+import { AppRoute, AuthorizationStatus } from '../../consts';
+
+type PrivateRouteProps = {
+  authorizationStatus: AuthorizationStatus;
+  children: JSX.Element;
+};
+
+function PrivateRoute(props: PrivateRouteProps): JSX.Element {
+  const { authorizationStatus, children } = props;
+
+  return authorizationStatus === AuthorizationStatus.Auth ? (
+    children
+  ) : (
+    <Navigate to={AppRoute.Login} />
+  );
+}
+
+export default PrivateRoute;
diff --git a/src/consts.ts b/src/consts.ts
new file mode 100644
index 0000000..79d34d4
--- /dev/null
+++ b/src/consts.ts
@@ -0,0 +1,12 @@
+export enum AppRoute {
+  Main = '/',
+  Login = '/login',
+  Favorites = '/favorites',
+  Offer = '/offer/:id'
+}
+
+export enum AuthorizationStatus {
+  Auth = 'AUTH',
+  NoAuth = 'NO_AUTH',
+  Unknown = 'UNKNOWN',
+}
diff --git a/src/pages/favorites-empty-page.tsx b/src/pages/favorites-empty-page.tsx
index 510c0fe..f2e825e 100644
--- a/src/pages/favorites-empty-page.tsx
+++ b/src/pages/favorites-empty-page.tsx
@@ -1,49 +1,31 @@
+import Header from '../components/header/header';
+
 export default function FavoritesEmptyPage(): JSX.Element {
   return (
     <div className="page page--favorites-empty">
-      <header className="header">
-        <div className="container">
-          <div className="header__wrapper">
-            <div className="header__left">
-              <a className="header__logo-link" href="main.html">
-                <img className="header__logo" src="img/logo.svg" alt="6 cities logo" width="81" height="41" />
-              </a>
-            </div>
-            <nav className="header__nav">
-              <ul className="header__nav-list">
-                <li className="header__nav-item user">
-                  <a className="header__nav-link header__nav-link--profile" href="#">
-                    <div className="header__avatar-wrapper user__avatar-wrapper">
-                    </div>
-                    <span className="header__user-name user__name">Oliver.conner@gmail.com</span>
-                    <span className="header__favorite-count">0</span>
-                  </a>
-                </li>
-                <li className="header__nav-item">
-                  <a className="header__nav-link" href="#">
-                    <span className="header__signout">Sign out</span>
-                  </a>
-                </li>
-              </ul>
-            </nav>
-          </div>
-        </div>
-      </header>
-
+      <Header />
       <main className="page__main page__main--favorites page__main--favorites-empty">
         <div className="page__favorites-container container">
           <section className="favorites favorites--empty">
             <h1 className="visually-hidden">Favorites (empty)</h1>
             <div className="favorites__status-wrapper">
               <b className="favorites__status">Nothing yet saved.</b>
-              <p className="favorites__status-description">Save properties to narrow down search or plan your future trips.</p>
+              <p className="favorites__status-description">
+                Save properties to narrow down search or plan your future trips.
+              </p>
             </div>
           </section>
         </div>
       </main>
       <footer className="footer">
         <a className="footer__logo-link" href="main.html">
-          <img className="footer__logo" src="img/logo.svg" alt="6 cities logo" width="64" height="33" />
+          <img
+            className="footer__logo"
+            src="img/logo.svg"
+            alt="6 cities logo"
+            width="64"
+            height="33"
+          />
         </a>
       </footer>
     </div>
diff --git a/src/pages/favorites-page.tsx b/src/pages/favorites-page.tsx
index 414db8d..4637153 100644
--- a/src/pages/favorites-page.tsx
+++ b/src/pages/favorites-page.tsx
@@ -1,34 +1,9 @@
+import Header from '../components/header/header';
+
 export default function FavoritesPage(): JSX.Element {
   return (
     <div className="page">
-      <header className="header">
-        <div className="container">
-          <div className="header__wrapper">
-            <div className="header__left">
-              <a className="header__logo-link" href="main.html">
-                <img className="header__logo" src="img/logo.svg" alt="6 cities logo" width="81" height="41" />
-              </a>
-            </div>
-            <nav className="header__nav">
-              <ul className="header__nav-list">
-                <li className="header__nav-item user">
-                  <a className="header__nav-link header__nav-link--profile" href="#">
-                    <div className="header__avatar-wrapper user__avatar-wrapper">
-                    </div>
-                    <span className="header__user-name user__name">Oliver.conner@gmail.com</span>
-                    <span className="header__favorite-count">3</span>
-                  </a>
-                </li>
-                <li className="header__nav-item">
-                  <a className="header__nav-link" href="#">
-                    <span className="header__signout">Sign out</span>
-                  </a>
-                </li>
-              </ul>
-            </nav>
-          </div>
-        </div>
-      </header>
+      <Header />
 
       <main className="page__main page__main--favorites">
         <div className="page__favorites-container container">
@@ -50,17 +25,32 @@ export default function FavoritesPage(): JSX.Element {
                     </div>
                     <div className="favorites__image-wrapper place-card__image-wrapper">
                       <a href="#">
-                        <img className="place-card__image" src="img/apartment-small-03.jpg" width="150" height="110" alt="Place image" />
+                        <img
+                          className="place-card__image"
+                          src="img/apartment-small-03.jpg"
+                          width="150"
+                          height="110"
+                          alt="Place image"
+                        />
                       </a>
                     </div>
                     <div className="favorites__card-info place-card__info">
                       <div className="place-card__price-wrapper">
                         <div className="place-card__price">
                           <b className="place-card__price-value">&euro;180</b>
-                          <span className="place-card__price-text">&#47;&nbsp;night</span>
+                          <span className="place-card__price-text">
+                            &#47;&nbsp;night
+                          </span>
                         </div>
-                        <button className="place-card__bookmark-button place-card__bookmark-button--active button" type="button">
-                          <svg className="place-card__bookmark-icon" width="18" height="19">
+                        <button
+                          className="place-card__bookmark-button place-card__bookmark-button--active button"
+                          type="button"
+                        >
+                          <svg
+                            className="place-card__bookmark-icon"
+                            width="18"
+                            height="19"
+                          >
                             <use xlinkHref="#icon-bookmark"></use>
                           </svg>
                           <span className="visually-hidden">In bookmarks</span>
@@ -68,7 +58,7 @@ export default function FavoritesPage(): JSX.Element {
                       </div>
                       <div className="place-card__rating rating">
                         <div className="place-card__stars rating__stars">
-                          <span style={{width: '100%'}}></span>
+                          <span style={{ width: '100%' }}></span>
                           <span className="visually-hidden">Rating</span>
                         </div>
                       </div>
@@ -82,17 +72,32 @@ export default function FavoritesPage(): JSX.Element {
                   <article className="favorites__card place-card">
                     <div className="favorites__image-wrapper place-card__image-wrapper">
                       <a href="#">
-                        <img className="place-card__image" src="img/room-small.jpg" width="150" height="110" alt="Place image" />
+                        <img
+                          className="place-card__image"
+                          src="img/room-small.jpg"
+                          width="150"
+                          height="110"
+                          alt="Place image"
+                        />
                       </a>
                     </div>
                     <div className="favorites__card-info place-card__info">
                       <div className="place-card__price-wrapper">
                         <div className="place-card__price">
                           <b className="place-card__price-value">&euro;80</b>
-                          <span className="place-card__price-text">&#47;&nbsp;night</span>
+                          <span className="place-card__price-text">
+                            &#47;&nbsp;night
+                          </span>
                         </div>
-                        <button className="place-card__bookmark-button place-card__bookmark-button--active button" type="button">
-                          <svg className="place-card__bookmark-icon" width="18" height="19">
+                        <button
+                          className="place-card__bookmark-button place-card__bookmark-button--active button"
+                          type="button"
+                        >
+                          <svg
+                            className="place-card__bookmark-icon"
+                            width="18"
+                            height="19"
+                          >
                             <use xlinkHref="#icon-bookmark"></use>
                           </svg>
                           <span className="visually-hidden">In bookmarks</span>
@@ -100,7 +105,7 @@ export default function FavoritesPage(): JSX.Element {
                       </div>
                       <div className="place-card__rating rating">
                         <div className="place-card__stars rating__stars">
-                          <span style={{width: '80%'}}></span>
+                          <span style={{ width: '80%' }}></span>
                           <span className="visually-hidden">Rating</span>
                         </div>
                       </div>
@@ -125,17 +130,32 @@ export default function FavoritesPage(): JSX.Element {
                   <article className="favorites__card place-card">
                     <div className="favorites__image-wrapper place-card__image-wrapper">
                       <a href="#">
-                        <img className="place-card__image" src="img/apartment-small-04.jpg" width="150" height="110" alt="Place image" />
+                        <img
+                          className="place-card__image"
+                          src="img/apartment-small-04.jpg"
+                          width="150"
+                          height="110"
+                          alt="Place image"
+                        />
                       </a>
                     </div>
                     <div className="favorites__card-info place-card__info">
                       <div className="place-card__price-wrapper">
                         <div className="place-card__price">
                           <b className="place-card__price-value">&euro;180</b>
-                          <span className="place-card__price-text">&#47;&nbsp;night</span>
+                          <span className="place-card__price-text">
+                            &#47;&nbsp;night
+                          </span>
                         </div>
-                        <button className="place-card__bookmark-button place-card__bookmark-button--active button" type="button">
-                          <svg className="place-card__bookmark-icon" width="18" height="19">
+                        <button
+                          className="place-card__bookmark-button place-card__bookmark-button--active button"
+                          type="button"
+                        >
+                          <svg
+                            className="place-card__bookmark-icon"
+                            width="18"
+                            height="19"
+                          >
                             <use xlinkHref="#icon-bookmark"></use>
                           </svg>
                           <span className="visually-hidden">In bookmarks</span>
@@ -143,7 +163,7 @@ export default function FavoritesPage(): JSX.Element {
                       </div>
                       <div className="place-card__rating rating">
                         <div className="place-card__stars rating__stars">
-                          <span style={{width: '100%'}}></span>
+                          <span style={{ width: '100%' }}></span>
                           <span className="visually-hidden">Rating</span>
                         </div>
                       </div>
@@ -161,7 +181,13 @@ export default function FavoritesPage(): JSX.Element {
       </main>
       <footer className="footer container">
         <a className="footer__logo-link" href="main.html">
-          <img className="footer__logo" src="img/logo.svg" alt="6 cities logo" width="64" height="33" />
+          <img
+            className="footer__logo"
+            src="img/logo.svg"
+            alt="6 cities logo"
+            width="64"
+            height="33"
+          />
         </a>
       </footer>
     </div>
diff --git a/src/pages/main-empty-page.tsx b/src/pages/main-empty-page.tsx
index 1b83297..5fc7395 100644
--- a/src/pages/main-empty-page.tsx
+++ b/src/pages/main-empty-page.tsx
@@ -1,34 +1,9 @@
+import Header from '../components/header/header';
+
 export default function MainEmptyPage(): JSX.Element {
   return (
     <div className="page page--gray page--main">
-      <header className="header">
-        <div className="container">
-          <div className="header__wrapper">
-            <div className="header__left">
-              <a className="header__logo-link header__logo-link--active">
-                <img className="header__logo" src="img/logo.svg" alt="6 cities logo" width="81" height="41" />
-              </a>
-            </div>
-            <nav className="header__nav">
-              <ul className="header__nav-list">
-                <li className="header__nav-item user">
-                  <a className="header__nav-link header__nav-link--profile" href="#">
-                    <div className="header__avatar-wrapper user__avatar-wrapper">
-                    </div>
-                    <span className="header__user-name user__name">Oliver.conner@gmail.com</span>
-                    <span className="header__favorite-count">3</span>
-                  </a>
-                </li>
-                <li className="header__nav-item">
-                  <a className="header__nav-link" href="#">
-                    <span className="header__signout">Sign out</span>
-                  </a>
-                </li>
-              </ul>
-            </nav>
-          </div>
-        </div>
-      </header>
+      <Header />
 
       <main className="page__main page__main--index page__main--index-empty">
         <h1 className="visually-hidden">Cities</h1>
@@ -61,7 +36,10 @@ export default function MainEmptyPage(): JSX.Element {
                 </a>
               </li>
               <li className="locations__item">
-                <a className="locations__item-link tabs__item tabs__item--active" href="#">
+                <a
+                  className="locations__item-link tabs__item tabs__item--active"
+                  href="#"
+                >
                   <span>Dusseldorf</span>
                 </a>
               </li>
@@ -73,7 +51,10 @@ export default function MainEmptyPage(): JSX.Element {
             <section className="cities__no-places">
               <div className="cities__status-wrapper tabs__content">
                 <b className="cities__status">No places to stay available</b>
-                <p className="cities__status-description">We could not find any property available at the moment in Dusseldorf</p>
+                <p className="cities__status-description">
+                  We could not find any property available at the moment in
+                  Dusseldorf
+                </p>
               </div>
             </section>
             <div className="cities__right-section"></div>
diff --git a/src/pages/main-page.tsx b/src/pages/main-page.tsx
index 08f5009..0457d70 100644
--- a/src/pages/main-page.tsx
+++ b/src/pages/main-page.tsx
@@ -1,48 +1,21 @@
 import { ReactNode } from 'react';
 import Card from '../components/card/card';
+import Header from '../components/header/header';
 
 type MainPageProps = {
   offersCount: number;
-}
+};
 
-export default function MainPage ({offersCount}: MainPageProps): JSX.Element {
+export default function MainPage({ offersCount }: MainPageProps): JSX.Element {
   const elements: ReactNode[] = [];
 
-
   for (let i = 0; i < offersCount; i++) {
     elements.push(<Card />);
   }
 
   return (
     <div className="page page--gray page--main">
-      <header className="header">
-        <div className="container">
-          <div className="header__wrapper">
-            <div className="header__left">
-              <a className="header__logo-link header__logo-link--active">
-                <img className="header__logo" src="img/logo.svg" alt="6 cities logo" width="81" height="41" />
-              </a>
-            </div>
-            <nav className="header__nav">
-              <ul className="header__nav-list">
-                <li className="header__nav-item user">
-                  <a className="header__nav-link header__nav-link--profile" href="#">
-                    <div className="header__avatar-wrapper user__avatar-wrapper">
-                    </div>
-                    <span className="header__user-name user__name">Oliver.conner@gmail.com</span>
-                    <span className="header__favorite-count">3</span>
-                  </a>
-                </li>
-                <li className="header__nav-item">
-                  <a className="header__nav-link" href="#">
-                    <span className="header__signout">Sign out</span>
-                  </a>
-                </li>
-              </ul>
-            </nav>
-          </div>
-        </div>
-      </header>
+      <Header />
 
       <main className="page__main page__main--index">
         <h1 className="visually-hidden">Cities</h1>
@@ -96,10 +69,21 @@ export default function MainPage ({offersCount}: MainPageProps): JSX.Element {
                   </svg>
                 </span>
                 <ul className="places__options places__options--custom places__options--opened">
-                  <li className="places__option places__option--active" tabIndex={0}>Popular</li>
-                  <li className="places__option" tabIndex={0}>Price: low to high</li>
-                  <li className="places__option" tabIndex={0}>Price: high to low</li>
-                  <li className="places__option" tabIndex={0}>Top rated first</li>
+                  <li
+                    className="places__option places__option--active"
+                    tabIndex={0}
+                  >
+                    Popular
+                  </li>
+                  <li className="places__option" tabIndex={0}>
+                    Price: low to high
+                  </li>
+                  <li className="places__option" tabIndex={0}>
+                    Price: high to low
+                  </li>
+                  <li className="places__option" tabIndex={0}>
+                    Top rated first
+                  </li>
                 </ul>
               </form>
               <div className="cities__places-list places__list tabs__content">
diff --git a/src/pages/not-found-page.tsx b/src/pages/not-found-page.tsx
new file mode 100644
index 0000000..3e1c783
--- /dev/null
+++ b/src/pages/not-found-page.tsx
@@ -0,0 +1,14 @@
+import { Link } from 'react-router-dom';
+
+export default function NotFoundPage(): JSX.Element {
+  return (
+    <main className="page__main">
+      <div className="favorites__status-wrapper">
+        <b className="favorites__status">404 Page not found</b>
+        <p className="favorites__status-description">
+          <Link to="/">Вернуться на главную</Link>
+        </p>
+      </div>
+    </main>
+  );
+}
diff --git a/src/pages/offer-not-logged-page.tsx b/src/pages/offer-not-logged-page.tsx
index a747640..024911b 100644
--- a/src/pages/offer-not-logged-page.tsx
+++ b/src/pages/offer-not-logged-page.tsx
@@ -6,15 +6,23 @@ export default function OfferNotLoggedPage(): JSX.Element {
           <div className="header__wrapper">
             <div className="header__left">
               <a className="header__logo-link" href="main.html">
-                <img className="header__logo" src="img/logo.svg" alt="6 cities logo" width="81" height="41" />
+                <img
+                  className="header__logo"
+                  src="img/logo.svg"
+                  alt="6 cities logo"
+                  width="81"
+                  height="41"
+                />
               </a>
             </div>
             <nav className="header__nav">
               <ul className="header__nav-list">
                 <li className="header__nav-item user">
-                  <a className="header__nav-link header__nav-link--profile" href="#">
-                    <div className="header__avatar-wrapper user__avatar-wrapper">
-                    </div>
+                  <a
+                    className="header__nav-link header__nav-link--profile"
+                    href="#"
+                  >
+                    <div className="header__avatar-wrapper user__avatar-wrapper"></div>
                     <span className="header__login">Sign in</span>
                   </a>
                 </li>
@@ -29,22 +37,46 @@ export default function OfferNotLoggedPage(): JSX.Element {
           <div className="offer__gallery-container container">
             <div className="offer__gallery">
               <div className="offer__image-wrapper">
-                <img className="offer__image" src="img/room.jpg" alt="Photo studio" />
+                <img
+                  className="offer__image"
+                  src="img/room.jpg"
+                  alt="Photo studio"
+                />
               </div>
               <div className="offer__image-wrapper">
-                <img className="offer__image" src="img/apartment-01.jpg" alt="Photo studio" />
+                <img
+                  className="offer__image"
+                  src="img/apartment-01.jpg"
+                  alt="Photo studio"
+                />
               </div>
               <div className="offer__image-wrapper">
-                <img className="offer__image" src="img/apartment-02.jpg" alt="Photo studio" />
+                <img
+                  className="offer__image"
+                  src="img/apartment-02.jpg"
+                  alt="Photo studio"
+                />
               </div>
               <div className="offer__image-wrapper">
-                <img className="offer__image" src="img/apartment-03.jpg" alt="Photo studio" />
+                <img
+                  className="offer__image"
+                  src="img/apartment-03.jpg"
+                  alt="Photo studio"
+                />
               </div>
               <div className="offer__image-wrapper">
-                <img className="offer__image" src="img/studio-01.jpg" alt="Photo studio" />
+                <img
+                  className="offer__image"
+                  src="img/studio-01.jpg"
+                  alt="Photo studio"
+                />
               </div>
               <div className="offer__image-wrapper">
-                <img className="offer__image" src="img/apartment-01.jpg" alt="Photo studio" />
+                <img
+                  className="offer__image"
+                  src="img/apartment-01.jpg"
+                  alt="Photo studio"
+                />
               </div>
             </div>
           </div>
@@ -66,7 +98,7 @@ export default function OfferNotLoggedPage(): JSX.Element {
               </div>
               <div className="offer__rating rating">
                 <div className="offer__stars rating__stars">
-                  <span style={{width: '80%'}}></span>
+                  <span style={{ width: '80%' }}></span>
                   <span className="visually-hidden">Rating</span>
                 </div>
                 <span className="offer__rating-value rating__value">4.8</span>
@@ -89,83 +121,79 @@ export default function OfferNotLoggedPage(): JSX.Element {
               <div className="offer__inside">
                 <h2 className="offer__inside-title">What&apos;s inside</h2>
                 <ul className="offer__inside-list">
-                  <li className="offer__inside-item">
-                    Wi-Fi
-                  </li>
-                  <li className="offer__inside-item">
-                    Washing machine
-                  </li>
-                  <li className="offer__inside-item">
-                    Towels
-                  </li>
-                  <li className="offer__inside-item">
-                    Heating
-                  </li>
-                  <li className="offer__inside-item">
-                    Coffee machine
-                  </li>
-                  <li className="offer__inside-item">
-                    Baby seat
-                  </li>
-                  <li className="offer__inside-item">
-                    Kitchen
-                  </li>
-                  <li className="offer__inside-item">
-                    Dishwasher
-                  </li>
-                  <li className="offer__inside-item">
-                    Cabel TV
-                  </li>
-                  <li className="offer__inside-item">
-                    Fridge
-                  </li>
+                  <li className="offer__inside-item">Wi-Fi</li>
+                  <li className="offer__inside-item">Washing machine</li>
+                  <li className="offer__inside-item">Towels</li>
+                  <li className="offer__inside-item">Heating</li>
+                  <li className="offer__inside-item">Coffee machine</li>
+                  <li className="offer__inside-item">Baby seat</li>
+                  <li className="offer__inside-item">Kitchen</li>
+                  <li className="offer__inside-item">Dishwasher</li>
+                  <li className="offer__inside-item">Cabel TV</li>
+                  <li className="offer__inside-item">Fridge</li>
                 </ul>
               </div>
               <div className="offer__host">
                 <h2 className="offer__host-title">Meet the host</h2>
                 <div className="offer__host-user user">
                   <div className="offer__avatar-wrapper offer__avatar-wrapper--pro user__avatar-wrapper">
-                    <img className="offer__avatar user__avatar" src="img/avatar-angelina.jpg" width="74" height="74" alt="Host avatar" />
+                    <img
+                      className="offer__avatar user__avatar"
+                      src="img/avatar-angelina.jpg"
+                      width="74"
+                      height="74"
+                      alt="Host avatar"
+                    />
                   </div>
-                  <span className="offer__user-name">
-                    Angelina
-                  </span>
-                  <span className="offer__user-status">
-                    Pro
-                  </span>
+                  <span className="offer__user-name">Angelina</span>
+                  <span className="offer__user-status">Pro</span>
                 </div>
                 <div className="offer__description">
                   <p className="offer__text">
-                    A quiet cozy and picturesque that hides behind a a river by the unique lightness of Amsterdam. The building is green and from 18th century.
+                    A quiet cozy and picturesque that hides behind a a river by
+                    the unique lightness of Amsterdam. The building is green and
+                    from 18th century.
                   </p>
                   <p className="offer__text">
-                    An independent House, strategically located between Rembrand Square and National Opera, but where the bustle of the city comes to rest in this alley flowery and colorful.
+                    An independent House, strategically located between Rembrand
+                    Square and National Opera, but where the bustle of the city
+                    comes to rest in this alley flowery and colorful.
                   </p>
                 </div>
               </div>
               <section className="offer__reviews reviews">
-                <h2 className="reviews__title">Reviews &middot; <span className="reviews__amount">1</span></h2>
+                <h2 className="reviews__title">
+                  Reviews &middot; <span className="reviews__amount">1</span>
+                </h2>
                 <ul className="reviews__list">
                   <li className="reviews__item">
                     <div className="reviews__user user">
                       <div className="reviews__avatar-wrapper user__avatar-wrapper">
-                        <img className="reviews__avatar user__avatar" src="img/avatar-max.jpg" width="54" height="54" alt="Reviews avatar" />
+                        <img
+                          className="reviews__avatar user__avatar"
+                          src="img/avatar-max.jpg"
+                          width="54"
+                          height="54"
+                          alt="Reviews avatar"
+                        />
                       </div>
-                      <span className="reviews__user-name">
-                        Max
-                      </span>
+                      <span className="reviews__user-name">Max</span>
                     </div>
                     <div className="reviews__info">
                       <div className="reviews__rating rating">
                         <div className="reviews__stars rating__stars">
-                          <span style={{width: '80%'}}></span>
+                          <span style={{ width: '80%' }}></span>
                           <span className="visually-hidden">Rating</span>
                         </div>
                       </div>
                       <p className="reviews__text">
-                        A quiet cozy and picturesque that hides behind a a river by the unique lightness of Amsterdam. The building is green and from 18th century.
+                        A quiet cozy and picturesque that hides behind a a river
+                        by the unique lightness of Amsterdam. The building is
+                        green and from 18th century.
                       </p>
-                      <time className="reviews__time" dateTime="2019-04-24">April 2019</time>
+                      <time className="reviews__time" dateTime="2019-04-24">
+                        April 2019
+                      </time>
                     </div>
                   </li>
                 </ul>
@@ -176,22 +204,39 @@ export default function OfferNotLoggedPage(): JSX.Element {
         </section>
         <div className="container">
           <section className="near-places places">
-            <h2 className="near-places__title">Other places in the neighbourhood</h2>
+            <h2 className="near-places__title">
+              Other places in the neighbourhood
+            </h2>
             <div className="near-places__list places__list">
               <article className="near-places__card place-card">
                 <div className="near-places__image-wrapper place-card__image-wrapper">
                   <a href="#">
-                    <img className="place-card__image" src="img/room.jpg" width="260" height="200" alt="Place image" />
+                    <img
+                      className="place-card__image"
+                      src="img/room.jpg"
+                      width="260"
+                      height="200"
+                      alt="Place image"
+                    />
                   </a>
                 </div>
                 <div className="place-card__info">
                   <div className="place-card__price-wrapper">
                     <div className="place-card__price">
                       <b className="place-card__price-value">&euro;80</b>
-                      <span className="place-card__price-text">&#47;&nbsp;night</span>
+                      <span className="place-card__price-text">
+                        &#47;&nbsp;night
+                      </span>
                     </div>
-                    <button className="place-card__bookmark-button place-card__bookmark-button--active button" type="button">
-                      <svg className="place-card__bookmark-icon" width="18" height="19">
+                    <button
+                      className="place-card__bookmark-button place-card__bookmark-button--active button"
+                      type="button"
+                    >
+                      <svg
+                        className="place-card__bookmark-icon"
+                        width="18"
+                        height="19"
+                      >
                         <use xlinkHref="#icon-bookmark"></use>
                       </svg>
                       <span className="visually-hidden">In bookmarks</span>
@@ -199,7 +244,7 @@ export default function OfferNotLoggedPage(): JSX.Element {
                   </div>
                   <div className="place-card__rating rating">
                     <div className="place-card__stars rating__stars">
-                      <span style={{width: '80%'}}></span>
+                      <span style={{ width: '80%' }}></span>
                       <span className="visually-hidden">Rating</span>
                     </div>
                   </div>
@@ -213,17 +258,32 @@ export default function OfferNotLoggedPage(): JSX.Element {
               <article className="near-places__card place-card">
                 <div className="near-places__image-wrapper place-card__image-wrapper">
                   <a href="#">
-                    <img className="place-card__image" src="img/apartment-02.jpg" width="260" height="200" alt="Place image" />
+                    <img
+                      className="place-card__image"
+                      src="img/apartment-02.jpg"
+                      width="260"
+                      height="200"
+                      alt="Place image"
+                    />
                   </a>
                 </div>
                 <div className="place-card__info">
                   <div className="place-card__price-wrapper">
                     <div className="place-card__price">
                       <b className="place-card__price-value">&euro;132</b>
-                      <span className="place-card__price-text">&#47;&nbsp;night</span>
+                      <span className="place-card__price-text">
+                        &#47;&nbsp;night
+                      </span>
                     </div>
-                    <button className="place-card__bookmark-button button" type="button">
-                      <svg className="place-card__bookmark-icon" width="18" height="19">
+                    <button
+                      className="place-card__bookmark-button button"
+                      type="button"
+                    >
+                      <svg
+                        className="place-card__bookmark-icon"
+                        width="18"
+                        height="19"
+                      >
                         <use xlinkHref="#icon-bookmark"></use>
                       </svg>
                       <span className="visually-hidden">To bookmarks</span>
@@ -231,7 +291,7 @@ export default function OfferNotLoggedPage(): JSX.Element {
                   </div>
                   <div className="place-card__rating rating">
                     <div className="place-card__stars rating__stars">
-                      <span style={{width: '80%'}}></span>
+                      <span style={{ width: '80%' }}></span>
                       <span className="visually-hidden">Rating</span>
                     </div>
                   </div>
@@ -248,17 +308,32 @@ export default function OfferNotLoggedPage(): JSX.Element {
                 </div>
                 <div className="near-places__image-wrapper place-card__image-wrapper">
                   <a href="#">
-                    <img className="place-card__image" src="img/apartment-03.jpg" width="260" height="200" alt="Place image" />
+                    <img
+                      className="place-card__image"
+                      src="img/apartment-03.jpg"
+                      width="260"
+                      height="200"
+                      alt="Place image"
+                    />
                   </a>
                 </div>
                 <div className="place-card__info">
                   <div className="place-card__price-wrapper">
                     <div className="place-card__price">
                       <b className="place-card__price-value">&euro;180</b>
-                      <span className="place-card__price-text">&#47;&nbsp;night</span>
+                      <span className="place-card__price-text">
+                        &#47;&nbsp;night
+                      </span>
                     </div>
-                    <button className="place-card__bookmark-button button" type="button">
-                      <svg className="place-card__bookmark-icon" width="18" height="19">
+                    <button
+                      className="place-card__bookmark-button button"
+                      type="button"
+                    >
+                      <svg
+                        className="place-card__bookmark-icon"
+                        width="18"
+                        height="19"
+                      >
                         <use xlinkHref="#icon-bookmark"></use>
                       </svg>
                       <span className="visually-hidden">To bookmarks</span>
@@ -266,7 +341,7 @@ export default function OfferNotLoggedPage(): JSX.Element {
                   </div>
                   <div className="place-card__rating rating">
                     <div className="place-card__stars rating__stars">
-                      <span style={{width: '100%'}}></span>
+                      <span style={{ width: '100%' }}></span>
                       <span className="visually-hidden">Rating</span>
                     </div>
                   </div>
diff --git a/src/pages/offer-page.tsx b/src/pages/offer-page.tsx
index 5cdb1cd..c1b37ba 100644
--- a/src/pages/offer-page.tsx
+++ b/src/pages/offer-page.tsx
@@ -1,56 +1,55 @@
+import Header from '../components/header/header';
+
 export default function OfferPage(): JSX.Element {
   return (
     <div className="page">
-      <header className="header">
-        <div className="container">
-          <div className="header__wrapper">
-            <div className="header__left">
-              <a className="header__logo-link" href="main.html">
-                <img className="header__logo" src="img/logo.svg" alt="6 cities logo" width="81" height="41" />
-              </a>
-            </div>
-            <nav className="header__nav">
-              <ul className="header__nav-list">
-                <li className="header__nav-item user">
-                  <a className="header__nav-link header__nav-link--profile" href="#">
-                    <div className="header__avatar-wrapper user__avatar-wrapper">
-                    </div>
-                    <span className="header__user-name user__name">Oliver.conner@gmail.com</span>
-                    <span className="header__favorite-count">3</span>
-                  </a>
-                </li>
-                <li className="header__nav-item">
-                  <a className="header__nav-link" href="#">
-                    <span className="header__signout">Sign out</span>
-                  </a>
-                </li>
-              </ul>
-            </nav>
-          </div>
-        </div>
-      </header>
+      <Header />
 
       <main className="page__main page__main--offer">
         <section className="offer">
           <div className="offer__gallery-container container">
             <div className="offer__gallery">
               <div className="offer__image-wrapper">
-                <img className="offer__image" src="img/room.jpg" alt="Photo studio" />
+                <img
+                  className="offer__image"
+                  src="img/room.jpg"
+                  alt="Photo studio"
+                />
               </div>
               <div className="offer__image-wrapper">
-                <img className="offer__image" src="img/apartment-01.jpg" alt="Photo studio" />
+                <img
+                  className="offer__image"
+                  src="img/apartment-01.jpg"
+                  alt="Photo studio"
+                />
               </div>
               <div className="offer__image-wrapper">
-                <img className="offer__image" src="img/apartment-02.jpg" alt="Photo studio" />
+                <img
+                  className="offer__image"
+                  src="img/apartment-02.jpg"
+                  alt="Photo studio"
+                />
               </div>
               <div className="offer__image-wrapper">
-                <img className="offer__image" src="img/apartment-03.jpg" alt="Photo studio" />
+                <img
+                  className="offer__image"
+                  src="img/apartment-03.jpg"
+                  alt="Photo studio"
+                />
               </div>
               <div className="offer__image-wrapper">
-                <img className="offer__image" src="img/studio-01.jpg" alt="Photo studio" />
+                <img
+                  className="offer__image"
+                  src="img/studio-01.jpg"
+                  alt="Photo studio"
+                />
               </div>
               <div className="offer__image-wrapper">
-                <img className="offer__image" src="img/apartment-01.jpg" alt="Photo studio" />
+                <img
+                  className="offer__image"
+                  src="img/apartment-01.jpg"
+                  alt="Photo studio"
+                />
               </div>
             </div>
           </div>
@@ -72,7 +71,7 @@ export default function OfferPage(): JSX.Element {
               </div>
               <div className="offer__rating rating">
                 <div className="offer__stars rating__stars">
-                  <span style={{width: '80%'}}></span>
+                  <span style={{ width: '80%' }}></span>
                   <span className="visually-hidden">Rating</span>
                 </div>
                 <span className="offer__rating-value rating__value">4.8</span>
@@ -95,130 +94,196 @@ export default function OfferPage(): JSX.Element {
               <div className="offer__inside">
                 <h2 className="offer__inside-title">What&apos;s inside</h2>
                 <ul className="offer__inside-list">
-                  <li className="offer__inside-item">
-                    Wi-Fi
-                  </li>
-                  <li className="offer__inside-item">
-                    Washing machine
-                  </li>
-                  <li className="offer__inside-item">
-                    Towels
-                  </li>
-                  <li className="offer__inside-item">
-                    Heating
-                  </li>
-                  <li className="offer__inside-item">
-                    Coffee machine
-                  </li>
-                  <li className="offer__inside-item">
-                    Baby seat
-                  </li>
-                  <li className="offer__inside-item">
-                    Kitchen
-                  </li>
-                  <li className="offer__inside-item">
-                    Dishwasher
-                  </li>
-                  <li className="offer__inside-item">
-                    Cabel TV
-                  </li>
-                  <li className="offer__inside-item">
-                    Fridge
-                  </li>
+                  <li className="offer__inside-item">Wi-Fi</li>
+                  <li className="offer__inside-item">Washing machine</li>
+                  <li className="offer__inside-item">Towels</li>
+                  <li className="offer__inside-item">Heating</li>
+                  <li className="offer__inside-item">Coffee machine</li>
+                  <li className="offer__inside-item">Baby seat</li>
+                  <li className="offer__inside-item">Kitchen</li>
+                  <li className="offer__inside-item">Dishwasher</li>
+                  <li className="offer__inside-item">Cabel TV</li>
+                  <li className="offer__inside-item">Fridge</li>
                 </ul>
               </div>
               <div className="offer__host">
                 <h2 className="offer__host-title">Meet the host</h2>
                 <div className="offer__host-user user">
                   <div className="offer__avatar-wrapper offer__avatar-wrapper--pro user__avatar-wrapper">
-                    <img className="offer__avatar user__avatar" src="img/avatar-angelina.jpg" width="74" height="74" alt="Host avatar" />
+                    <img
+                      className="offer__avatar user__avatar"
+                      src="img/avatar-angelina.jpg"
+                      width="74"
+                      height="74"
+                      alt="Host avatar"
+                    />
                   </div>
-                  <span className="offer__user-name">
-                    Angelina
-                  </span>
-                  <span className="offer__user-status">
-                    Pro
-                  </span>
+                  <span className="offer__user-name">Angelina</span>
+                  <span className="offer__user-status">Pro</span>
                 </div>
                 <div className="offer__description">
                   <p className="offer__text">
-                    A quiet cozy and picturesque that hides behind a a river by the unique lightness of Amsterdam. The building is green and from 18th century.
+                    A quiet cozy and picturesque that hides behind a a river by
+                    the unique lightness of Amsterdam. The building is green and
+                    from 18th century.
                   </p>
                   <p className="offer__text">
-                    An independent House, strategically located between Rembrand Square and National Opera, but where the bustle of the city comes to rest in this alley flowery and colorful.
+                    An independent House, strategically located between Rembrand
+                    Square and National Opera, but where the bustle of the city
+                    comes to rest in this alley flowery and colorful.
                   </p>
                 </div>
               </div>
               <section className="offer__reviews reviews">
-                <h2 className="reviews__title">Reviews &middot; <span className="reviews__amount">1</span></h2>
+                <h2 className="reviews__title">
+                  Reviews &middot; <span className="reviews__amount">1</span>
+                </h2>
                 <ul className="reviews__list">
                   <li className="reviews__item">
                     <div className="reviews__user user">
                       <div className="reviews__avatar-wrapper user__avatar-wrapper">
-                        <img className="reviews__avatar user__avatar" src="img/avatar-max.jpg" width="54" height="54" alt="Reviews avatar" />
+                        <img
+                          className="reviews__avatar user__avatar"
+                          src="img/avatar-max.jpg"
+                          width="54"
+                          height="54"
+                          alt="Reviews avatar"
+                        />
                       </div>
-                      <span className="reviews__user-name">
-                        Max
-                      </span>
+                      <span className="reviews__user-name">Max</span>
                     </div>
                     <div className="reviews__info">
                       <div className="reviews__rating rating">
                         <div className="reviews__stars rating__stars">
-                          <span style={{width: '80%'}}></span>
+                          <span style={{ width: '80%' }}></span>
                           <span className="visually-hidden">Rating</span>
                         </div>
                       </div>
                       <p className="reviews__text">
-                        A quiet cozy and picturesque that hides behind a a river by the unique lightness of Amsterdam. The building is green and from 18th century.
+                        A quiet cozy and picturesque that hides behind a a river
+                        by the unique lightness of Amsterdam. The building is
+                        green and from 18th century.
                       </p>
-                      <time className="reviews__time" dateTime="2019-04-24">April 2019</time>
+                      <time className="reviews__time" dateTime="2019-04-24">
+                        April 2019
+                      </time>
                     </div>
                   </li>
                 </ul>
                 <form className="reviews__form form" action="#" method="post">
-                  <label className="reviews__label form__label" htmlFor="review">Your review</label>
+                  <label
+                    className="reviews__label form__label"
+                    htmlFor="review"
+                  >
+                    Your review
+                  </label>
                   <div className="reviews__rating-form form__rating">
-                    <input className="form__rating-input visually-hidden" name="rating" value="5" id="5-stars" type="radio" />
-                    <label htmlFor="5-stars" className="reviews__rating-label form__rating-label" title="perfect">
+                    <input
+                      className="form__rating-input visually-hidden"
+                      name="rating"
+                      value="5"
+                      id="5-stars"
+                      type="radio"
+                    />
+                    <label
+                      htmlFor="5-stars"
+                      className="reviews__rating-label form__rating-label"
+                      title="perfect"
+                    >
                       <svg className="form__star-image" width="37" height="33">
                         <use xlinkHref="#icon-star"></use>
                       </svg>
                     </label>
 
-                    <input className="form__rating-input visually-hidden" name="rating" value="4" id="4-stars" type="radio" />
-                    <label htmlFor="4-stars" className="reviews__rating-label form__rating-label" title="good">
+                    <input
+                      className="form__rating-input visually-hidden"
+                      name="rating"
+                      value="4"
+                      id="4-stars"
+                      type="radio"
+                    />
+                    <label
+                      htmlFor="4-stars"
+                      className="reviews__rating-label form__rating-label"
+                      title="good"
+                    >
                       <svg className="form__star-image" width="37" height="33">
                         <use xlinkHref="#icon-star"></use>
                       </svg>
                     </label>
 
-                    <input className="form__rating-input visually-hidden" name="rating" value="3" id="3-stars" type="radio" />
-                    <label htmlFor="3-stars" className="reviews__rating-label form__rating-label" title="not bad">
+                    <input
+                      className="form__rating-input visually-hidden"
+                      name="rating"
+                      value="3"
+                      id="3-stars"
+                      type="radio"
+                    />
+                    <label
+                      htmlFor="3-stars"
+                      className="reviews__rating-label form__rating-label"
+                      title="not bad"
+                    >
                       <svg className="form__star-image" width="37" height="33">
                         <use xlinkHref="#icon-star"></use>
                       </svg>
                     </label>
 
-                    <input className="form__rating-input visually-hidden" name="rating" value="2" id="2-stars" type="radio" />
-                    <label htmlFor="2-stars" className="reviews__rating-label form__rating-label" title="badly">
+                    <input
+                      className="form__rating-input visually-hidden"
+                      name="rating"
+                      value="2"
+                      id="2-stars"
+                      type="radio"
+                    />
+                    <label
+                      htmlFor="2-stars"
+                      className="reviews__rating-label form__rating-label"
+                      title="badly"
+                    >
                       <svg className="form__star-image" width="37" height="33">
                         <use xlinkHref="#icon-star"></use>
                       </svg>
                     </label>
 
-                    <input className="form__rating-input visually-hidden" name="rating" value="1" id="1-star" type="radio" />
-                    <label htmlFor="1-star" className="reviews__rating-label form__rating-label" title="terribly">
+                    <input
+                      className="form__rating-input visually-hidden"
+                      name="rating"
+                      value="1"
+                      id="1-star"
+                      type="radio"
+                    />
+                    <label
+                      htmlFor="1-star"
+                      className="reviews__rating-label form__rating-label"
+                      title="terribly"
+                    >
                       <svg className="form__star-image" width="37" height="33">
                         <use xlinkHref="#icon-star"></use>
                       </svg>
                     </label>
                   </div>
-                  <textarea className="reviews__textarea form__textarea" id="review" name="review" placeholder="Tell how was your stay, what you like and what can be improved"></textarea>
+                  <textarea
+                    className="reviews__textarea form__textarea"
+                    id="review"
+                    name="review"
+                    placeholder="Tell how was your stay, what you like and what can be improved"
+                  >
+                  </textarea>
                   <div className="reviews__button-wrapper">
                     <p className="reviews__help">
-                      To submit review please make sure to set <span className="reviews__star">rating</span> and describe your stay with at least <b className="reviews__text-amount">50 characters</b>.
+                      To submit review please make sure to set{' '}
+                      <span className="reviews__star">rating</span> and describe
+                      your stay with at least{' '}
+                      <b className="reviews__text-amount">50 characters</b>.
                     </p>
-                    <button className="reviews__submit form__submit button" type="submit" disabled>Submit</button>
+                    <button
+                      className="reviews__submit form__submit button"
+                      type="submit"
+                      disabled
+                    >
+                      Submit
+                    </button>
                   </div>
                 </form>
               </section>
@@ -228,22 +293,39 @@ export default function OfferPage(): JSX.Element {
         </section>
         <div className="container">
           <section className="near-places places">
-            <h2 className="near-places__title">Other places in the neighbourhood</h2>
+            <h2 className="near-places__title">
+              Other places in the neighbourhood
+            </h2>
             <div className="near-places__list places__list">
               <article className="near-places__card place-card">
                 <div className="near-places__image-wrapper place-card__image-wrapper">
                   <a href="#">
-                    <img className="place-card__image" src="img/room.jpg" width="260" height="200" alt="Place image" />
+                    <img
+                      className="place-card__image"
+                      src="img/room.jpg"
+                      width="260"
+                      height="200"
+                      alt="Place image"
+                    />
                   </a>
                 </div>
                 <div className="place-card__info">
                   <div className="place-card__price-wrapper">
                     <div className="place-card__price">
                       <b className="place-card__price-value">&euro;80</b>
-                      <span className="place-card__price-text">&#47;&nbsp;night</span>
+                      <span className="place-card__price-text">
+                        &#47;&nbsp;night
+                      </span>
                     </div>
-                    <button className="place-card__bookmark-button place-card__bookmark-button--active button" type="button">
-                      <svg className="place-card__bookmark-icon" width="18" height="19">
+                    <button
+                      className="place-card__bookmark-button place-card__bookmark-button--active button"
+                      type="button"
+                    >
+                      <svg
+                        className="place-card__bookmark-icon"
+                        width="18"
+                        height="19"
+                      >
                         <use xlinkHref="#icon-bookmark"></use>
                       </svg>
                       <span className="visually-hidden">In bookmarks</span>
@@ -251,7 +333,7 @@ export default function OfferPage(): JSX.Element {
                   </div>
                   <div className="place-card__rating rating">
                     <div className="place-card__stars rating__stars">
-                      <span style={{width: '80%'}}></span>
+                      <span style={{ width: '80%' }}></span>
                       <span className="visually-hidden">Rating</span>
                     </div>
                   </div>
@@ -265,17 +347,32 @@ export default function OfferPage(): JSX.Element {
               <article className="near-places__card place-card">
                 <div className="near-places__image-wrapper place-card__image-wrapper">
                   <a href="#">
-                    <img className="place-card__image" src="img/apartment-02.jpg" width="260" height="200" alt="Place image" />
+                    <img
+                      className="place-card__image"
+                      src="img/apartment-02.jpg"
+                      width="260"
+                      height="200"
+                      alt="Place image"
+                    />
                   </a>
                 </div>
                 <div className="place-card__info">
                   <div className="place-card__price-wrapper">
                     <div className="place-card__price">
                       <b className="place-card__price-value">&euro;132</b>
-                      <span className="place-card__price-text">&#47;&nbsp;night</span>
+                      <span className="place-card__price-text">
+                        &#47;&nbsp;night
+                      </span>
                     </div>
-                    <button className="place-card__bookmark-button button" type="button">
-                      <svg className="place-card__bookmark-icon" width="18" height="19">
+                    <button
+                      className="place-card__bookmark-button button"
+                      type="button"
+                    >
+                      <svg
+                        className="place-card__bookmark-icon"
+                        width="18"
+                        height="19"
+                      >
                         <use xlinkHref="#icon-bookmark"></use>
                       </svg>
                       <span className="visually-hidden">To bookmarks</span>
@@ -283,7 +380,7 @@ export default function OfferPage(): JSX.Element {
                   </div>
                   <div className="place-card__rating rating">
                     <div className="place-card__stars rating__stars">
-                      <span style={{width: '80%'}}></span>
+                      <span style={{ width: '80%' }}></span>
                       <span className="visually-hidden">Rating</span>
                     </div>
                   </div>
@@ -300,17 +397,32 @@ export default function OfferPage(): JSX.Element {
                 </div>
                 <div className="near-places__image-wrapper place-card__image-wrapper">
                   <a href="#">
-                    <img className="place-card__image" src="img/apartment-03.jpg" width="260" height="200" alt="Place image" />
+                    <img
+                      className="place-card__image"
+                      src="img/apartment-03.jpg"
+                      width="260"
+                      height="200"
+                      alt="Place image"
+                    />
                   </a>
                 </div>
                 <div className="place-card__info">
                   <div className="place-card__price-wrapper">
                     <div className="place-card__price">
                       <b className="place-card__price-value">&euro;180</b>
-                      <span className="place-card__price-text">&#47;&nbsp;night</span>
+                      <span className="place-card__price-text">
+                        &#47;&nbsp;night
+                      </span>
                     </div>
-                    <button className="place-card__bookmark-button button" type="button">
-                      <svg className="place-card__bookmark-icon" width="18" height="19">
+                    <button
+                      className="place-card__bookmark-button button"
+                      type="button"
+                    >
+                      <svg
+                        className="place-card__bookmark-icon"
+                        width="18"
+                        height="19"
+                      >
                         <use xlinkHref="#icon-bookmark"></use>
                       </svg>
                       <span className="visually-hidden">To bookmarks</span>
@@ -318,7 +430,7 @@ export default function OfferPage(): JSX.Element {
                   </div>
                   <div className="place-card__rating rating">
                     <div className="place-card__stars rating__stars">
-                      <span style={{width: '100%'}}></span>
+                      <span style={{ width: '100%' }}></span>
                       <span className="visually-hidden">Rating</span>
                     </div>
                   </div>