diff --git a/src/Pages/login-page/login-page.tsx b/src/Pages/login-page/login-page.tsx
index 96cd2f6..933830b 100644
--- a/src/Pages/login-page/login-page.tsx
+++ b/src/Pages/login-page/login-page.tsx
@@ -45,8 +45,7 @@ export function LoginPage(): React.JSX.Element {
                     name="email"
                     placeholder="Email"
                     onChange={(event) =>
-                      setLoginInfo({ ...loginInfo, email: event.target.value })
-                    }
+                      setLoginInfo({ ...loginInfo, email: event.target.value })}
                     required
                   />
                 </div>
@@ -61,8 +60,7 @@ export function LoginPage(): React.JSX.Element {
                       setLoginInfo({
                         ...loginInfo,
                         password: event.target.value,
-                      })
-                    }
+                      })}
                     required
                   />
                 </div>
diff --git a/src/Pages/main-page/main-page.tsx b/src/Pages/main-page/main-page.tsx
index a78219c..e3227a1 100644
--- a/src/Pages/main-page/main-page.tsx
+++ b/src/Pages/main-page/main-page.tsx
@@ -24,7 +24,7 @@ export function MainPage(): React.JSX.Element {
     : `${pluralizeAndCombine('place', offers.length)} to stay in ${city.name}`;
   return (
     <div className="page page--gray page--main">
-      <Layout showFooter>
+      <Layout>
         <main className="page__main page__main--index">
           <Helmet>6 cities</Helmet>
           <h1 className="visually-hidden">Cities</h1>
diff --git a/src/Pages/offer-page/offer-page.tsx b/src/Pages/offer-page/offer-page.tsx
index e23f346..cc004f3 100644
--- a/src/Pages/offer-page/offer-page.tsx
+++ b/src/Pages/offer-page/offer-page.tsx
@@ -4,7 +4,7 @@ import { OffersList } from '../../components/offer/offers-list.tsx';
 import { Reviews } from '../../components/reviews/reviews.tsx';
 import { Map } from '../../components/map/map.tsx';
 import React, { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { Navigate, useParams } from 'react-router-dom';
 import { OfferInsideItems } from '../../components/offer/offer-inside-items.tsx';
 import { OfferHost } from '../../components/offer/offer-host.tsx';
 import { capitalize, pluralizeAndCombine } from '../../utils/string-utils.ts';
@@ -15,9 +15,11 @@ import { store, useAppSelector } from '../../store/store.ts';
 import {
   fetchNearbyOffers,
   fetchOffer,
+  fetchReviews,
   setCurrentOffer,
 } from '../../store/actions.ts';
 import { Spinner } from '../../components/spinner/Spinner.tsx';
+import { AppRoutes } from '../../dataTypes/enums/app-routes.ts';
 
 export function OfferPage(): React.JSX.Element {
   const offerId = useParams().id;
@@ -25,12 +27,17 @@ export function OfferPage(): React.JSX.Element {
     store.dispatch(setCurrentOffer(null));
     store.dispatch(fetchOffer(offerId!));
     store.dispatch(fetchNearbyOffers(offerId!));
+    store.dispatch(fetchReviews(offerId!));
   }, [offerId]);
   const nearbyOffers = useAppSelector((state) => state.nearbyOffers).slice(
     0,
     3,
   );
   const currentOffer = useAppSelector((state) => state.currentOffer);
+  const currentReviews = useAppSelector((state) => state.currentReviews);
+  if (currentOffer === undefined) {
+    return <Navigate to={AppRoutes.NotFoundPage} />;
+  }
   return (
     <div className="page">
       <Layout>
@@ -60,7 +67,7 @@ export function OfferPage(): React.JSX.Element {
                     <Rating
                       rating={currentOffer.rating}
                       usePlace="offer"
-                      isInOffer
+                      showRatingValue
                     />
                     <ul className="offer__features">
                       <li className="offer__feature offer__feature--entire">
@@ -89,7 +96,7 @@ export function OfferPage(): React.JSX.Element {
                         </p>
                       </div>
                     </div>
-                    <Reviews reviews={[]} />
+                    <Reviews reviews={currentReviews} />
                   </div>
                 </div>
                 <Map
diff --git a/src/api/api.ts b/src/api/api.ts
index e5b5d6d..dafd37d 100644
--- a/src/api/api.ts
+++ b/src/api/api.ts
@@ -6,7 +6,7 @@
 import { getToken } from '../utils/token-utils.ts';
 import { store } from '../store/store.ts';
 import { AuthorizationStatus } from '../dataTypes/enums/authorization-status.ts';
-import { setAuthorizationStatus } from '../store/actions.ts';
+import { setAuthorizationStatus, setCurrentOffer } from '../store/actions.ts';
 
 const BACKEND_URL = 'https://14.design.htmlacademy.pro/six-cities';
 const REQUEST_TIMEOUT = 5000;
@@ -40,6 +40,9 @@ export const createAPI = (): AxiosInstance => {
           setAuthorizationStatus(AuthorizationStatus.Unauthorized),
         );
       }
+      if (error.response && error.response.status === 404) {
+        store.dispatch(setCurrentOffer(undefined));
+      }
       throw error;
     },
   );
diff --git a/src/components/offer/offer-card.tsx b/src/components/offer/offer-card.tsx
index baed48e..13184bf 100644
--- a/src/components/offer/offer-card.tsx
+++ b/src/components/offer/offer-card.tsx
@@ -4,6 +4,7 @@ import { AppRoutes } from '../../dataTypes/enums/app-routes.ts';
 import cn from 'classnames';
 import { Rating } from '../rating.tsx';
 import { BookmarkButton } from '../bookmark-button.tsx';
+import { capitalize } from '../../utils/string-utils.ts';
 
 interface PlaceCardProps {
   id: string;
@@ -40,7 +41,7 @@ export function OfferCard({
       onMouseLeave={handleMouseLeave}
       className={cn(
         'place-card',
-        { cities__card: isOnMainPage },
+        { 'cities__card': isOnMainPage },
         { 'near-places__card': !isOnMainPage },
       )}
     >
@@ -82,7 +83,7 @@ export function OfferCard({
         <h2 className="place-card__name">
           <Link to={`${AppRoutes.Offer}/${id}`}>{title}</Link>
         </h2>
-        <p className="place-card__type">{type}</p>
+        <p className="place-card__type">{capitalize(type)}</p>
       </div>
     </article>
   );
diff --git a/src/components/offer/offer-gallery.tsx b/src/components/offer/offer-gallery.tsx
index a1047be..291b84b 100644
--- a/src/components/offer/offer-gallery.tsx
+++ b/src/components/offer/offer-gallery.tsx
@@ -10,7 +10,7 @@ export function OfferGallery({
   return (
     <div className="offer__gallery-container container">
       <div className="offer__gallery">
-        {imageSources.map((src) => (
+        {imageSources.slice(0, 6).map((src) => (
           <div key={`${src}`} className="offer__image-wrapper">
             <img className="offer__image" src={src} alt="Photo studio" />
           </div>
diff --git a/src/components/offer/offer-host.tsx b/src/components/offer/offer-host.tsx
index e4c288b..18b0e14 100644
--- a/src/components/offer/offer-host.tsx
+++ b/src/components/offer/offer-host.tsx
@@ -11,7 +11,17 @@ export function OfferHost({ host }: OfferHostProps): React.JSX.Element {
     <>
       <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">
+        {host.isPro ? (
+          <div className="offer__avatar-wrapper offer__avatar-wrapper--pro user__avatar-wrapper">
+            <img
+              className="offer__avatar user__avatar"
+              src={host.avatarUrl}
+              width="74"
+              height="74"
+              alt="Host avatar"
+            />
+          </div>
+        ) : (
           <img
             className="offer__avatar user__avatar"
             src={host.avatarUrl}
@@ -19,7 +29,7 @@ export function OfferHost({ host }: OfferHostProps): React.JSX.Element {
             height="74"
             alt="Host avatar"
           />
-        </div>
+        )}
         <span className="offer__user-name">{getFirstName(host.name)}</span>
         {host.isPro && <span className="offer__user-status">Pro</span>}
       </div>
diff --git a/src/components/rating.tsx b/src/components/rating.tsx
index 7db3415..621be8d 100644
--- a/src/components/rating.tsx
+++ b/src/components/rating.tsx
@@ -3,21 +3,21 @@ import React from 'react';
 interface RatingProps {
   rating: number;
   usePlace: string;
-  isInOffer?: boolean;
+  showRatingValue?: boolean;
 }
 
 export function Rating({
   rating,
-  isInOffer,
+  showRatingValue,
   usePlace,
 }: RatingProps): React.JSX.Element {
   return (
     <div className={`${usePlace}__rating rating`}>
       <div className={`${usePlace}__stars rating__stars`}>
-        <span style={{ width: `${rating * 20}%` }}></span>
+        <span style={{ width: `${Math.round(rating) * 20}%` }}></span>
         <span className="visually-hidden">Rating</span>
       </div>
-      {isInOffer && (
+      {showRatingValue && (
         <span className="offer__rating-value rating__value">{rating}</span>
       )}
     </div>
diff --git a/src/components/reviews/review-form.tsx b/src/components/reviews/review-form.tsx
index e9a25ba..143535a 100644
--- a/src/components/reviews/review-form.tsx
+++ b/src/components/reviews/review-form.tsx
@@ -1,4 +1,10 @@
 import { useState } from 'react';
+import { store, useAppSelector } from '../../store/store.ts';
+import { postReview } from '../../store/actions.ts';
+import {
+  MAX_COMMENT_LENGTH,
+  MIN_COMMENT_LENGTH,
+} from '../../consts/reviews.ts';
 
 type UserReview = {
   comment?: string;
@@ -7,16 +13,32 @@ type UserReview = {
 
 export function ReviewForm(): React.JSX.Element {
   const [review, setReview] = useState<UserReview>();
+  const offerId = useAppSelector((state) => state.currentOffer)!.id;
   const onRatingChange: React.ChangeEventHandler<HTMLInputElement> = (
     event,
   ): void => setReview({ ...review, rating: +event.target.value });
   const onCommentChange: React.ChangeEventHandler<HTMLTextAreaElement> = (
     event,
   ): void => setReview({ ...review, comment: event.target.value });
+  const handleSubmit: React.MouseEventHandler<HTMLButtonElement> = (
+    event,
+  ): void => {
+    event.preventDefault();
+    store.dispatch(
+      postReview({
+        offerId: offerId,
+        rating: review?.rating || 5,
+        comment: review?.comment || '',
+      }),
+    );
+  };
   const isValid =
-    review?.comment && review?.comment?.length >= 50 && review?.rating;
+    review?.comment &&
+    review?.comment?.length >= MIN_COMMENT_LENGTH &&
+    review?.comment?.length <= MAX_COMMENT_LENGTH &&
+    review?.rating;
   return (
-    <form className="reviews__form form" action="#" method="post">
+    <form className="reviews__form form">
       <label className="reviews__label form__label" htmlFor="review">
         Your review
       </label>
@@ -123,11 +145,20 @@ export function ReviewForm(): React.JSX.Element {
         <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>.
+          with at least{' '}
+          <b className="reviews__text-amount">
+            {MIN_COMMENT_LENGTH} characters
+          </b>{' '}
+          and no more than{' '}
+          <b className="reviews__text-amount">
+            {MAX_COMMENT_LENGTH} characters
+          </b>
+          .
         </p>
         <button
           className="reviews__submit form__submit button"
           type="submit"
+          onClick={handleSubmit}
           disabled={!isValid}
         >
           Submit
diff --git a/src/components/reviews/reviews.tsx b/src/components/reviews/reviews.tsx
index 5578d04..654da16 100644
--- a/src/components/reviews/reviews.tsx
+++ b/src/components/reviews/reviews.tsx
@@ -1,17 +1,25 @@
 import { ReviewForm } from './review-form.tsx';
 import { ReviewsList } from './reviews-list.tsx';
 import { Review } from '../../dataTypes/review.ts';
+import { useAppSelector } from '../../store/store.ts';
+import { AuthorizationStatus } from '../../dataTypes/enums/authorization-status.ts';
 
 interface ReviewsProps {
   reviews: Review[];
 }
 
 export function Reviews({ reviews }: ReviewsProps): React.JSX.Element {
+  const sortedReviews = reviews
+    .toSorted((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+    .slice(0, 10);
+  const isAuthorized =
+    useAppSelector((state) => state.authorizationStatus) ===
+    AuthorizationStatus.Authorized;
   const reviewsAvailable = reviews && reviews.length !== 0;
   return (
     <section className="offer__reviews reviews">
       {reviewsAvailable ? (
-        <ReviewsList reviews={reviews} />
+        <ReviewsList reviews={sortedReviews} />
       ) : (
         <span
           className="reviews__item"
@@ -24,7 +32,7 @@ export function Reviews({ reviews }: ReviewsProps): React.JSX.Element {
           No reviews available
         </span>
       )}
-      <ReviewForm />
+      {isAuthorized && <ReviewForm />}
     </section>
   );
 }
diff --git a/src/components/spinner/Spinner.tsx b/src/components/spinner/Spinner.tsx
index acaccd1..f667b8c 100644
--- a/src/components/spinner/Spinner.tsx
+++ b/src/components/spinner/Spinner.tsx
@@ -4,9 +4,9 @@
 
 export function Spinner({ caption }: SpinnerProps) {
   return (
-    <>
+    <div className="spinner_container">
       <div className="spinner"></div>
       {caption && <span>{caption}</span>}
-    </>
+    </div>
   );
 }
diff --git a/src/components/spinner/spinner.css b/src/components/spinner/spinner.css
index ba49813..0e25d70 100644
--- a/src/components/spinner/spinner.css
+++ b/src/components/spinner/spinner.css
@@ -7,6 +7,12 @@
   animation: spin 1s linear infinite;
 }
 
+.spinner_container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
diff --git a/src/consts/reviews.ts b/src/consts/reviews.ts
new file mode 100644
index 0000000..7d385e7
--- /dev/null
+++ b/src/consts/reviews.ts
@@ -0,0 +1,3 @@
+export const MIN_COMMENT_LENGTH = 50;
+
+export const MAX_COMMENT_LENGTH = 300;
diff --git a/src/dataTypes/enums/api-routes.ts b/src/dataTypes/enums/api-routes.ts
index 4586df3..21a2c21 100644
--- a/src/dataTypes/enums/api-routes.ts
+++ b/src/dataTypes/enums/api-routes.ts
@@ -2,4 +2,5 @@
   Offers = '/offers',
   Login = '/login',
   Logout = '/logout',
+  Comments = '/comments',
 }
diff --git a/src/dataTypes/enums/app-routes.ts b/src/dataTypes/enums/app-routes.ts
index 946058b..fafd2cf 100644
--- a/src/dataTypes/enums/app-routes.ts
+++ b/src/dataTypes/enums/app-routes.ts
@@ -3,4 +3,5 @@ export enum AppRoutes {
   Login = '/login',
   Offer = '/offer',
   Favorites = '/favorites',
+  NotFoundPage = '/not-found',
 }
diff --git a/src/dataTypes/enums/room-type.ts b/src/dataTypes/enums/room-type.ts
index 86c0b35..5dc51f5 100644
--- a/src/dataTypes/enums/room-type.ts
+++ b/src/dataTypes/enums/room-type.ts
@@ -1,4 +1,6 @@
 export enum RoomType {
   Apartment = 'Apartment',
   Room = 'Room',
+  Hotel = 'Hotel',
+  House = 'House',
 }
diff --git a/src/dataTypes/review.ts b/src/dataTypes/review.ts
index 733843c..2f2a2fb 100644
--- a/src/dataTypes/review.ts
+++ b/src/dataTypes/review.ts
@@ -7,3 +7,9 @@ export type Review = {
   comment: string;
   rating: number;
 };
+
+export type ReviewShortInfo = {
+  offerId: string;
+  comment: string;
+  rating: number;
+};
diff --git a/src/store/actions.ts b/src/store/actions.ts
index 541c743..b43a548 100644
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -10,6 +10,7 @@ import { Nullable } from 'vitest';
 import { AuthorizationStatus } from '../dataTypes/enums/authorization-status.ts';
 import { AuthInfo, LoginInfo } from '../dataTypes/user.ts';
 import { saveToken } from '../utils/token-utils.ts';
+import { Review, ReviewShortInfo } from '../dataTypes/review.ts';
 
 export const changeCity = createAction<City>('offers/changeCity');
 
@@ -27,6 +28,10 @@ export const setSorting = createAction<SortOffers>('offers/setSorting');
 
 export const setNearbyOffers = createAction<Offer[]>('offers/setNearbyOffers');
 
+export const setCurrentReviews = createAction<Review[]>(
+  'reviews/setCurrentReviews',
+);
+
 export const fetchOffers = createAsyncThunk<
   void,
   undefined,
@@ -109,3 +114,34 @@ export const logout = createAsyncThunk<
   await api.delete(ApiRoutes.Logout);
   dispatch(setAuthorizationStatus(AuthorizationStatus.Unauthorized));
 });
+
+export const fetchReviews = createAsyncThunk<
+  void,
+  Offer['id'],
+  {
+    dispatch: AppDispatch;
+    state: State;
+    extra: AxiosInstance;
+  }
+>('review/fetchReviews', async (offerId, { dispatch, extra: api }) => {
+  const { data } = await api.get<Review[]>(`${ApiRoutes.Comments}/${offerId}`);
+  dispatch(setCurrentReviews(data));
+});
+
+export const postReview = createAsyncThunk<
+  void,
+  ReviewShortInfo,
+  {
+    dispatch: AppDispatch;
+    state: State;
+    extra: AxiosInstance;
+  }
+>('review/fetchReviews', async (info, { dispatch, extra: api }) => {
+  const response = await api.post(`${ApiRoutes.Comments}/${info.offerId}`, {
+    comment: info.comment,
+    rating: info.rating,
+  });
+  if (response.status === 201) {
+    dispatch(fetchReviews(info.offerId));
+  }
+});
diff --git a/src/store/store.ts b/src/store/store.ts
index 3d060f4..e5b15a1 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -3,6 +3,7 @@ import {
   changeCity,
   setAuthorizationStatus,
   setCurrentOffer,
+  setCurrentReviews,
   setNearbyOffers,
   setOffers,
   setSorting,
@@ -17,6 +18,7 @@ import { SortOffers } from '../dataTypes/sort-offers.ts';
 import { Nullable } from 'vitest';
 import { DetailedOffer } from '../dataTypes/detailed-offer.ts';
 import { AuthorizationStatus } from '../dataTypes/enums/authorization-status.ts';
+import { Review } from '../dataTypes/review.ts';
 
 type InitialState = {
   city: City;
@@ -24,6 +26,7 @@ type InitialState = {
   sorting: SortOffers;
   currentOffer: Nullable<DetailedOffer>;
   nearbyOffers: Offer[];
+  currentReviews: Review[];
   authorizationStatus: AuthorizationStatus;
 };
 
@@ -33,6 +36,7 @@ const initialState: InitialState = {
   sorting: (offers: Offer[]) => offers,
   currentOffer: null,
   nearbyOffers: [],
+  currentReviews: [],
   authorizationStatus: AuthorizationStatus.Unknown,
 };
 
@@ -57,6 +61,9 @@ const reducer = createReducer(initialState, (builder) => {
     })
     .addCase(setAuthorizationStatus, (state, action) => {
       state.authorizationStatus = action.payload;
+    })
+    .addCase(setCurrentReviews, (state, action) => {
+      state.currentReviews = action.payload;
     });
 });