diff --git a/src/components/App.tsx b/src/components/App.tsx
index bb1f2c0..e693b57 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,11 +1,41 @@
-import {MainScreen} from './pages/MainScreen';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { HelmetProvider } from 'react-helmet-async';
+import MainScreen from './pages/MainScreen';
+import Login from './pages/Login';
+import Favorites from './pages/Favorites';
+import Offer from './pages/Offer';
+import NotFound from './NotFound';
+import AppRoute, { AuthorizationStatus } from '../const';
+import PrivateRoute from './private-route';
+import { OffersType } from '../types/offer';
 
 type AppScreenProps = {
   placesCount: number;
+  offers: OffersType[];
+  favorites: OffersType[];
 }
-function App({placesCount}: AppScreenProps){
+function App({placesCount, offers, favorites}: AppScreenProps){
   return (
-    <MainScreen placesCount={placesCount}/>
+    <HelmetProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path ={AppRoute.Root} element = {<MainScreen placesCount={placesCount} offers={offers}/>} />
+          <Route path={AppRoute.Login} element={<Login/>}/>
+          <Route
+            path={AppRoute.Favorites}
+            element = {
+              <PrivateRoute
+                authorizationStatus={AuthorizationStatus.NoAuth}
+              >
+                <Favorites favorites={favorites}/>
+              </PrivateRoute>
+            }
+          />
+          <Route path={AppRoute.Offer} element={<Offer/>}/>
+          <Route path="*" element={<NotFound/>}/>
+        </Routes>
+      </BrowserRouter>
+    </HelmetProvider>
   );
 }
 export default App;
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
new file mode 100644
index 0000000..527daa1
--- /dev/null
+++ b/src/components/Logo.tsx
@@ -0,0 +1,17 @@
+import { Link } from 'react-router-dom';
+
+function Logo(){
+  return(
+    <Link className="header__logo-link header__logo-link--active" to={'/'}>
+      <img
+        className="header__logo"
+        src="img/logo.svg"
+        alt="6 cities logo"
+        width={81}
+        height={41}
+      />
+    </Link>
+  );
+}
+
+export default Logo;
diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx
new file mode 100644
index 0000000..493c6c1
--- /dev/null
+++ b/src/components/NotFound.tsx
@@ -0,0 +1,12 @@
+import { Link } from 'react-router-dom';
+
+function NotFound() {
+  return (
+    <div>
+      <h1>404 Not Found</h1>
+      <Link to="/">Go to Home Page</Link>
+    </div>
+  );
+}
+
+export default NotFound;
diff --git a/src/components/commentForm.tsx b/src/components/commentForm.tsx
new file mode 100644
index 0000000..3ee8b25
--- /dev/null
+++ b/src/components/commentForm.tsx
@@ -0,0 +1,120 @@
+import { useState } from 'react';
+
+function CommentForm() {
+  const [text, setText] = useState('');
+  return (
+    <form className="reviews__form form" action="#" method="post">
+      <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"
+          defaultValue={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" />
+          </svg>
+        </label>
+        <input
+          className="form__rating-input visually-hidden"
+          name="rating"
+          defaultValue={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" />
+          </svg>
+        </label>
+        <input
+          className="form__rating-input visually-hidden"
+          name="rating"
+          defaultValue={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" />
+          </svg>
+        </label>
+        <input
+          className="form__rating-input visually-hidden"
+          name="rating"
+          defaultValue={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" />
+          </svg>
+        </label>
+        <input
+          className="form__rating-input visually-hidden"
+          name="rating"
+          defaultValue={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" />
+          </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"
+        onChange={(evt) => setText(evt.target.value)}
+        value={text}
+      >
+      </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>.
+        </p>
+        <button
+          className="reviews__submit form__submit button"
+          type="submit"
+          disabled={undefined}
+          onClick={(evt) => evt.preventDefault()}
+        >
+          Submit
+        </button>
+      </div>
+    </form>
+  );
+}
+
+export default CommentForm;
diff --git a/src/components/favoritesList.tsx b/src/components/favoritesList.tsx
new file mode 100644
index 0000000..52ffc60
--- /dev/null
+++ b/src/components/favoritesList.tsx
@@ -0,0 +1,18 @@
+import { OffersType } from '../types/offer';
+import Card from './pages/Card';
+
+type FavoritesListProps = {
+  favorites: OffersType[];
+};
+
+function FavoritesList({ favorites }: FavoritesListProps) {
+  return (
+    <div className="favorites__places">
+      {favorites.map((favorite) => (
+        <Card key={favorite.id} offer={favorite} />
+      ))}
+    </div>
+  );
+}
+
+export default FavoritesList;
diff --git a/src/components/offersList.tsx b/src/components/offersList.tsx
new file mode 100644
index 0000000..1571d73
--- /dev/null
+++ b/src/components/offersList.tsx
@@ -0,0 +1,18 @@
+import Card from './pages/Card';
+import { OffersType } from '../types/offer';
+
+interface OffersListProps {
+  offers: OffersType[];
+}
+
+function OffersList({ offers }: OffersListProps) {
+  return (
+    <div className="cities__places-list places__list tabs__content">
+      {offers.map((offer) => (
+        <Card key={offer.id} offer={offer} />
+      ))}
+    </div>
+  );
+}
+
+export default OffersList;
diff --git a/src/components/pages/Card.tsx b/src/components/pages/Card.tsx
index 32c05b8..584c91f 100644
--- a/src/components/pages/Card.tsx
+++ b/src/components/pages/Card.tsx
@@ -1,62 +1,67 @@
-import React from 'react';
+import { useState } from 'react';
+import { OffersType } from '../../types/offer';
+import { Link } from 'react-router-dom';
 
-interface CardProps {
-  premium: boolean;
-  imageUrl: string;
-  price: string;
-  bookmarked: boolean;
-  rating: number;
-  title: string;
-  type: string;
-}
+type CardProps = {
+  offer: OffersType;
+};
 
-const Card: React.FC<CardProps> = ({ premium, imageUrl, price, bookmarked, rating, title, type }) => (
-  <article className="cities__card place-card">
-    {premium && (
-      <div className="place-card__mark">
-        <span>Premium</span>
-      </div>
-    )}
-    <div className="cities__image-wrapper place-card__image-wrapper">
-      <a href="#">
-        <img
-          className="place-card__image"
-          src={imageUrl}
-          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">{price}</b>
-          <span className="place-card__price-text">/night</span>
+function Card({ offer }: CardProps) {
+  const { id, title, imageUrl, type, rating, price, favorite, premium } = offer;
+  const [, setActive] = useState('');
+  return (
+    <article
+      className="cities__card place-card"
+      onMouseOver={() => setActive(id.toString())}
+    >
+      {premium && (
+        <div className="place-card__mark">
+          <span>Premium</span>
         </div>
-        <button
-          className={`place-card__bookmark-button button${bookmarked ? ' place-card__bookmark-button--active' : ''}`}
-          type="button"
-        >
-          <svg className="place-card__bookmark-icon" width={18} height={19}>
-            <use xlinkHref="#icon-bookmark" />
-          </svg>
-          <span className="visually-hidden">{bookmarked ? 'In bookmarks' : 'To bookmarks'}</span>
-        </button>
+      )}
+      <div className="cities__image-wrapper place-card__image-wrapper">
+        <a href="#">
+          <img
+            className="place-card__image"
+            src={imageUrl}
+            width="260"
+            height="200"
+            alt="Place image"
+          />
+        </a>
       </div>
-      <div className="place-card__rating rating">
-        <div className="place-card__stars rating__stars">
-          <span style={{ width: `${rating}%` }} />
-          <span className="visually-hidden">Rating</span>
+      <div className="place-card__info">
+        <div className="place-card__price-wrapper">
+          <div className="place-card__price">
+            <b className="place-card__price-value">&euro;{price}</b>
+            <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">
+              {favorite && <use xlinkHref="#icon-bookmark"></use>}
+            </svg>
+            <span className="visually-hidden">In bookmarks</span>
+          </button>
+        </div>
+        <div className="place-card__rating rating">
+          <div className="place-card__stars rating__stars">
+            <span style={{ width: `${(rating / 5) * 100}%` }}></span>
+            <span className="visually-hidden">Rating</span>
+          </div>
         </div>
+        <h2 className="place-card__name">
+          <Link to={`/offer/${id}`} state={offer}>
+            {title}
+          </Link>
+        </h2>
+        <p className="place-card__type">{type}</p>
       </div>
-      <h2 className="place-card__name">
-        <a href="#">{title}</a>
-      </h2>
-      <p className="place-card__type">{type}</p>
-    </div>
-  </article>
-);
-
+    </article>
+  );
+}
 
 export default Card;
+
diff --git a/src/components/pages/Favorites.tsx b/src/components/pages/Favorites.tsx
index 3b51022..2afd508 100644
--- a/src/components/pages/Favorites.tsx
+++ b/src/components/pages/Favorites.tsx
@@ -1,19 +1,26 @@
-function Favorites(){
+import { Link } from 'react-router-dom';
+import { OffersType } from '../../types/offer';
+import FavoritesList from '../favoritesList';
+import Logo from '../Logo';
+import { Helmet } from 'react-helmet-async';
+
+type FavoritesProps = {
+  favorites: OffersType[];
+};
+
+function Favorites({favorites}: FavoritesProps){
   return (
     <div className="page">
+      <Helmet>
+        <title>Избранное</title>
+      </Helmet>
       <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>
+              <Link to="/" className="header__logo-link">
+                <Logo/>
+              </Link>
             </div>
             <nav className="header__nav">
               <ul className="header__nav-list">
@@ -41,174 +48,7 @@ function Favorites(){
       </header>
       <main className="page__main page__main--favorites">
         <div className="page__favorites-container container">
-          <section className="favorites">
-            <h1 className="favorites__title">Saved listing</h1>
-            <ul className="favorites__list">
-              <li className="favorites__locations-items">
-                <div className="favorites__locations locations locations--current">
-                  <div className="locations__item">
-                    <a className="locations__item-link" href="#">
-                      <span>Amsterdam</span>
-                    </a>
-                  </div>
-                </div>
-                <div className="favorites__places">
-                  <article className="favorites__card place-card">
-                    <div className="place-card__mark">
-                      <span>Premium</span>
-                    </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"
-                        />
-                      </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">€180</b>
-                          <span className="place-card__price-text">
-                          /&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}
-                          >
-                            <use xlinkHref="#icon-bookmark" />
-                          </svg>
-                          <span className="visually-hidden">In bookmarks</span>
-                        </button>
-                      </div>
-                      <div className="place-card__rating rating">
-                        <div className="place-card__stars rating__stars">
-                          <span style={{ width: '100%' }} />
-                          <span className="visually-hidden">Rating</span>
-                        </div>
-                      </div>
-                      <h2 className="place-card__name">
-                        <a href="#">Nice, cozy, warm big bed apartment</a>
-                      </h2>
-                      <p className="place-card__type">Apartment</p>
-                    </div>
-                  </article>
-                  <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"
-                        />
-                      </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">€80</b>
-                          <span className="place-card__price-text">
-                          /&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}
-                          >
-                            <use xlinkHref="#icon-bookmark" />
-                          </svg>
-                          <span className="visually-hidden">In bookmarks</span>
-                        </button>
-                      </div>
-                      <div className="place-card__rating rating">
-                        <div className="place-card__stars rating__stars">
-                          <span style={{ width: '80%' }} />
-                          <span className="visually-hidden">Rating</span>
-                        </div>
-                      </div>
-                      <h2 className="place-card__name">
-                        <a href="#">Wood and stone place</a>
-                      </h2>
-                      <p className="place-card__type">Room</p>
-                    </div>
-                  </article>
-                </div>
-              </li>
-              <li className="favorites__locations-items">
-                <div className="favorites__locations locations locations--current">
-                  <div className="locations__item">
-                    <a className="locations__item-link" href="#">
-                      <span>Cologne</span>
-                    </a>
-                  </div>
-                </div>
-                <div className="favorites__places">
-                  <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"
-                        />
-                      </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">€180</b>
-                          <span className="place-card__price-text">
-                          /&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}
-                          >
-                            <use xlinkHref="#icon-bookmark" />
-                          </svg>
-                          <span className="visually-hidden">In bookmarks</span>
-                        </button>
-                      </div>
-                      <div className="place-card__rating rating">
-                        <div className="place-card__stars rating__stars">
-                          <span style={{ width: '100%' }} />
-                          <span className="visually-hidden">Rating</span>
-                        </div>
-                      </div>
-                      <h2 className="place-card__name">
-                        <a href="#">White castle</a>
-                      </h2>
-                      <p className="place-card__type">Apartment</p>
-                    </div>
-                  </article>
-                </div>
-              </li>
-            </ul>
-          </section>
+          <FavoritesList favorites={favorites} />
         </div>
       </main>
       <footer className="footer container">
diff --git a/src/components/pages/FavoritesEmpty.tsx b/src/components/pages/FavoritesEmpty.tsx
index 311e5c6..92f238a 100644
--- a/src/components/pages/FavoritesEmpty.tsx
+++ b/src/components/pages/FavoritesEmpty.tsx
@@ -1,3 +1,5 @@
+import Logo from '../Logo';
+
 function FavoritesEmpty(){
   return (
     <div className="page page--favorites-empty">
@@ -5,15 +7,7 @@ function FavoritesEmpty(){
         <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>
+              <Logo/>
             </div>
             <nav className="header__nav">
               <ul className="header__nav-list">
diff --git a/src/components/pages/Login.tsx b/src/components/pages/Login.tsx
index d2b9e2e..e895c81 100644
--- a/src/components/pages/Login.tsx
+++ b/src/components/pages/Login.tsx
@@ -1,19 +1,17 @@
+import Logo from '../Logo';
+import { Helmet } from 'react-helmet-async';
+
 function Login(){
   return (
     < div className="page page--gray page--login">
+      <Helmet>
+        <title>Авторизация</title>
+      </Helmet>
       <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>
+              <Logo/>
             </div>
           </div>
         </div>
diff --git a/src/components/pages/MainEmpty.tsx b/src/components/pages/MainEmpty.tsx
index 71d9aed..608b03f 100644
--- a/src/components/pages/MainEmpty.tsx
+++ b/src/components/pages/MainEmpty.tsx
@@ -1,3 +1,5 @@
+import Logo from '../Logo';
+
 function MainEmpty(){
   return (
     <div className="page page--gray page--main">
@@ -5,15 +7,7 @@ function MainEmpty(){
         <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>
+              <Logo/>
             </div>
             <nav className="header__nav">
               <ul className="header__nav-list">
diff --git a/src/components/pages/MainScreen.tsx b/src/components/pages/MainScreen.tsx
index 85d5035..4a8c031 100644
--- a/src/components/pages/MainScreen.tsx
+++ b/src/components/pages/MainScreen.tsx
@@ -1,23 +1,27 @@
-import Card from './Card';
+import Logo from '../Logo';
+import { Helmet } from 'react-helmet-async';
+import { OffersType } from '../../types/offer';
+import OffersList from '../offersList';
+import { Link } from 'react-router-dom';
+
 type MainScreenProps = {
-    placesCount: number;
-}
-export function MainScreen({placesCount}: MainScreenProps){
+  placesCount: number;
+  offers: OffersType[];
+};
+
+function MainScreen({ placesCount, offers }: MainScreenProps) {
   return (
     <div className="page page--gray page--main">
+      <Helmet>
+        <title>6 Городов</title>
+      </Helmet>
       <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>
+              <Link to='/' className="header__logo-link header__logo-link--active">
+                <Logo />
+              </Link>
             </div>
             <nav className="header__nav">
               <ul className="header__nav-list">
@@ -28,7 +32,7 @@ export function MainScreen({placesCount}: MainScreenProps){
                   >
                     <div className="header__avatar-wrapper user__avatar-wrapper"></div>
                     <span className="header__user-name user__name">
-                    Oliver.conner@gmail.com
+                      Oliver.conner@gmail.com
                     </span>
                     <span className="header__favorite-count">3</span>
                   </a>
@@ -85,11 +89,13 @@ export function MainScreen({placesCount}: MainScreenProps){
           <div className="cities__places-container container">
             <section className="cities__places places">
               <h2 className="visually-hidden">Places</h2>
-              <b className="places__found">{placesCount} places to stay in Amsterdam</b>
+              <b className="places__found">
+                {placesCount} places to stay in Amsterdam
+              </b>
               <form className="places__sorting" action="#" method="get">
                 <span className="places__sorting-caption">Sort by </span>
                 <span className="places__sorting-type" tabIndex={0}>
-                Popular
+                  Popular
                   <svg className="places__sorting-arrow" width={7} height={4}>
                     <use xlinkHref="#icon-arrow-select" />
                   </svg>
@@ -99,68 +105,22 @@ export function MainScreen({placesCount}: MainScreenProps){
                     className="places__option places__option--active"
                     tabIndex={0}
                   >
-                  Popular
+                    Popular
                   </li>
                   <li className="places__option" tabIndex={0}>
-                  Price: low to high
+                    Price: low to high
                   </li>
                   <li className="places__option" tabIndex={0}>
-                  Price: high to low
+                    Price: high to low
                   </li>
                   <li className="places__option" tabIndex={0}>
-                  Top rated first
+                    Top rated first
                   </li>
                 </ul>
               </form>
-              <div style={{ display: 'flex' }}>
-                <Card
-                  premium
-                  imageUrl="img/apartment-01.jpg"
-                  price="€120"
-                  bookmarked={false}
-                  rating={80}
-                  title="Beautiful & luxurious apartment at great location"
-                  type="Apartment"
-                />
-                <Card
-                  premium={false}
-                  imageUrl="img/room.jpg"
-                  price="€80"
-                  bookmarked
-                  rating={80}
-                  title="Wood and stone place"
-                  type="Room"
-                />
-              </div>
-              <div style={{ display: 'flex' }}>
-                <Card
-                  premium={false}
-                  imageUrl="img/apartment-02.jpg"
-                  price="€132"
-                  bookmarked
-                  rating={80}
-                  title="Canal View Prinsengracht"
-                  type="Apartment"
-                />
-                <Card
-                  premium
-                  imageUrl="img/apartment-03.jpg"
-                  price="€180"
-                  bookmarked
-                  rating={100}
-                  title="Nice, cozy, warm big bed apartment"
-                  type="Apartment"
-                />
+              <div className="cities__places-list places__list tabs__content">
+                <OffersList offers={offers}/>
               </div>
-              <Card
-                premium={false}
-                imageUrl="img/room.jpg"
-                price="€80"
-                bookmarked
-                rating={80}
-                title="Wood and stone place"
-                type="Room"
-              />
             </section>
             <div className="cities__right-section">
               <section className="cities__map map" />
@@ -169,7 +129,7 @@ export function MainScreen({placesCount}: MainScreenProps){
           </div>
         </div>
       </main>
-    </div>);
-
+    </div>
+  );
 }
 export default MainScreen;
diff --git a/src/components/pages/Offer.tsx b/src/components/pages/Offer.tsx
index cf43e62..7da2855 100644
--- a/src/components/pages/Offer.tsx
+++ b/src/components/pages/Offer.tsx
@@ -1,19 +1,18 @@
+import Logo from '../Logo';
+import { Helmet } from 'react-helmet-async';
+import CommentForm from '../commentForm';
+
 function Offer(){
   return (
     <div className="page">
+      <Helmet>
+        <title>Предложение</title>
+      </Helmet>
       <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>
+              <Logo/>
             </div>
             <nav className="header__nav">
               <ul className="header__nav-list">
@@ -202,115 +201,7 @@ function Offer(){
                     </div>
                   </li>
                 </ul>
-                <form className="reviews__form form" action="#" method="post">
-                  <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"
-                      defaultValue={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" />
-                      </svg>
-                    </label>
-                    <input
-                      className="form__rating-input visually-hidden"
-                      name="rating"
-                      defaultValue={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" />
-                      </svg>
-                    </label>
-                    <input
-                      className="form__rating-input visually-hidden"
-                      name="rating"
-                      defaultValue={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" />
-                      </svg>
-                    </label>
-                    <input
-                      className="form__rating-input visually-hidden"
-                      name="rating"
-                      defaultValue={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" />
-                      </svg>
-                    </label>
-                    <input
-                      className="form__rating-input visually-hidden"
-                      name="rating"
-                      defaultValue={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" />
-                      </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"
-                    defaultValue={''}
-                  />
-                  <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>.
-                    </p>
-                    <button
-                      className="reviews__submit form__submit button"
-                      type="submit"
-                      disabled
-                    >
-                    Submit
-                    </button>
-                  </div>
-                </form>
+                <CommentForm/>
               </section>
             </div>
           </div>
diff --git a/src/components/pages/OfferNotLogged.tsx b/src/components/pages/OfferNotLogged.tsx
index 8dbbb20..11b411f 100644
--- a/src/components/pages/OfferNotLogged.tsx
+++ b/src/components/pages/OfferNotLogged.tsx
@@ -1,3 +1,4 @@
+import Logo from '../Logo';
 function OfferNotLogged(){
   return (
     <div className="page">
@@ -5,15 +6,7 @@ function OfferNotLogged(){
         <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>
+              <Logo/>
             </div>
             <nav className="header__nav">
               <ul className="header__nav-list">
diff --git a/src/components/private-route.tsx b/src/components/private-route.tsx
new file mode 100644
index 0000000..4a4272f
--- /dev/null
+++ b/src/components/private-route.tsx
@@ -0,0 +1,20 @@
+import {Navigate} from 'react-router-dom';
+import AppRoute from '../const';
+import { AuthorizationStatus } from '../const';
+
+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/const.ts b/src/const.ts
new file mode 100644
index 0000000..15ec495
--- /dev/null
+++ b/src/const.ts
@@ -0,0 +1,14 @@
+enum AppRoute{
+    Root = '/',
+    Login = '/login',
+    Favorites = '/favorites',
+    Offer = '/offer/:id'
+}
+
+export enum AuthorizationStatus {
+    Auth = 'AUTH',
+    NoAuth = 'NO_AUTH',
+    Unknown = 'UNKNOWN',
+}
+
+export default AppRoute;
diff --git a/src/index.tsx b/src/index.tsx
index a8cf362..b80bc41 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './components/App';
+import offers from './mocks/offers';
 
 const Setting = {
   PlacesCount: 312,
-}as const;
+} as const;
 
 const root = document.getElementById('root');
 
 ReactDOM.createRoot(root as HTMLElement).render(
   <React.StrictMode>
-    <App placesCount={Setting.PlacesCount}/>
+    <App placesCount={Setting.PlacesCount} offers={offers} favorites={offers} />
   </React.StrictMode>
 );
diff --git a/src/mocks/offers.ts b/src/mocks/offers.ts
new file mode 100644
index 0000000..e0ab1b1
--- /dev/null
+++ b/src/mocks/offers.ts
@@ -0,0 +1,50 @@
+import { OffersType } from '../types/offer';
+
+const offers: OffersType[] = [
+  {
+    id: 1,
+    premium: true,
+    imageUrl: 'img/apartment-01.jpg',
+    price: 120,
+    bookmarked: false,
+    rating: 4.8,
+    title: 'Beautiful & luxurious apartment at great location',
+    type: 'Apartment',
+    favorite: true,
+  },
+  {
+    id: 2,
+    premium: false,
+    imageUrl: 'img/room.jpg',
+    price: 80,
+    bookmarked: true,
+    rating: 4,
+    title: 'Wood and stone place',
+    type: 'Room',
+    favorite: true,
+  },
+  {
+    id: 3,
+    premium: false,
+    imageUrl: 'img/apartment-02.jpg',
+    price: 132,
+    bookmarked: true,
+    rating: 4,
+    title: 'Canal View Prinsengracht',
+    type: 'Apartment',
+    favorite: true,
+  },
+  {
+    id: 4,
+    premium: true,
+    imageUrl: 'img/apartment-03.jpg',
+    price: 180,
+    bookmarked: true,
+    rating: 5,
+    title: 'Nice, cozy, warm big bed apartment',
+    type: 'Apartment',
+    favorite: true,
+  },
+];
+
+export default offers;
diff --git a/src/types/offer.ts b/src/types/offer.ts
new file mode 100644
index 0000000..01a6059
--- /dev/null
+++ b/src/types/offer.ts
@@ -0,0 +1,21 @@
+export type OffersType = {
+  id: number;
+  premium: boolean;
+  imageUrl: string;
+  price: number;
+  bookmarked: boolean;
+  rating: number;
+  title: string;
+  type: string;
+  favorite: boolean;
+};
+
+// export type Review = {
+//   comment: string;
+//   date: string;
+//   id: string;
+//   rating: number;
+//   user: User;
+// };
+
+