diff --git a/src/components/comments-list/comments-list.tsx b/src/components/comments-list/comments-list.tsx
index 9d3809a..89fad6e 100644
--- a/src/components/comments-list/comments-list.tsx
+++ b/src/components/comments-list/comments-list.tsx
@@ -8,10 +8,12 @@ interface CommentsListProps {
   offerId: OfferFullInfo['id'];
 }
 
+const MAX_COUNT_COMMENTS = 10;
+
 function CommentsList ({offerId}: CommentsListProps) {
   const {fetchComments} = useActionCreators(commentsActions);
   const postCommentStatus = useAppSelector(commentsSelectors.statusPostRequest);
-  const comments = useAppSelector(commentsSelectors.comments);
+  const comments = useAppSelector(commentsSelectors.sortedComments).slice(0, MAX_COUNT_COMMENTS);
   const commentsCount = comments.length;
 
   useEffect(() => {
diff --git a/src/components/favorite-button/favorite-button.tsx b/src/components/favorite-button/favorite-button.tsx
index 73508b7..2d5dfbf 100644
--- a/src/components/favorite-button/favorite-button.tsx
+++ b/src/components/favorite-button/favorite-button.tsx
@@ -3,8 +3,10 @@ import {OfferShortInfo} from '../../types/offer.ts';
 import {useActionCreators, useAppSelector} from '../../hooks/store.ts';
 import {favoritesActions, favoritesSelectors} from '../../store/slices/favorites.ts';
 import {useState} from 'react';
-import {RequestStatus} from '../../const.ts';
+import {AppRoute, AuthStatus, RequestStatus} from '../../const.ts';
 import {toast} from 'react-toastify';
+import {useNavigate} from 'react-router-dom';
+import {userSelectors} from '../../store/slices/user.ts';
 
 interface FavoriteButtonProps {
   componentType: 'place-card' | 'offer';
@@ -27,12 +29,24 @@ function FavoriteButton({componentType, isFavorite, offerId}: FavoriteButtonProp
   const [isFavoriteCurrent, setIsFavoriteCurrent] = useState(isFavorite);
   const {toggleFavorite} = useActionCreators(favoritesActions);
   const statusToggleFavorite = useAppSelector(favoritesSelectors.statusToggleFavorite);
+  const authStatus = useAppSelector(userSelectors.authStatus);
+  const navigate = useNavigate();
+
+  const isAuth = authStatus === AuthStatus.Auth;
 
   const onClickHandler = () => {
-    toast.promise(toggleFavorite({status: Number(!isFavoriteCurrent) as 0 | 1, offerId})
-      .unwrap()
-      .then(() => setIsFavoriteCurrent(!isFavoriteCurrent)), {
-      pending: 'Запрос отправляется',
+    if (!isAuth) {
+      navigate(AppRoute.Login);
+    }
+
+    toast.promise(toggleFavorite({status: Number(!isFavoriteCurrent) as 0 | 1, offerId}).unwrap(), {
+      pending: 'Sending request',
+      success: {
+        render() {
+          setIsFavoriteCurrent(!isFavoriteCurrent);
+          return 'Success';
+        }
+      },
     });
   };
 
@@ -41,7 +55,7 @@ function FavoriteButton({componentType, isFavorite, offerId}: FavoriteButtonProp
       className={
         classNames(
           `${componentType}__bookmark-button button`,
-          isFavoriteCurrent && `${componentType}__bookmark-button--active`)
+          isFavoriteCurrent && isAuth && `${componentType}__bookmark-button--active`)
       }
       type="button"
       onClick={onClickHandler}
diff --git a/src/components/form-review/const.ts b/src/components/form-review/const.ts
new file mode 100644
index 0000000..13dc888
--- /dev/null
+++ b/src/components/form-review/const.ts
@@ -0,0 +1,5 @@
+const MIN_LENGTH_COMMENT = 50;
+const MAX_LENGTH_COMMENT = 300;
+const MIN_STARS_COMMENT = 1;
+
+export {MAX_LENGTH_COMMENT, MIN_STARS_COMMENT, MIN_LENGTH_COMMENT};
diff --git a/src/components/form-review/form-review.tsx b/src/components/form-review/form-review.tsx
index 3080723..e8b30cc 100644
--- a/src/components/form-review/form-review.tsx
+++ b/src/components/form-review/form-review.tsx
@@ -1,45 +1,75 @@
-import {MIN_LENGTH_COMMENT, MIN_STARS_COMMENT, RATING_STARS} from '../../const.ts';
-import {StarTitle, StarValue} from '../rating-star/rating-star.tsx';
-import RatingStar from '../rating-star/rating-star.tsx';
-import {FormEvent, useRef, useState} from 'react';
+import {RATING_STARS} from '../../const.ts';
+import RatingStar, {StarTitle} from '../rating-star/rating-star.tsx';
+import {FormEvent, useState} from 'react';
 import {useActionCreators} from '../../hooks/store.ts';
 import {commentsActions} from '../../store/slices/comments.ts';
 import {OfferFullInfo} from '../../types/offer.ts';
+import {MAX_LENGTH_COMMENT, MIN_LENGTH_COMMENT} from './const.ts';
+import {toast} from 'react-toastify';
 
 type FormReviewProps = {
   offerId: OfferFullInfo['id'];
 };
 
-type InitialForm = {
-  comment: string;
-  rating: StarValue;
+type Form = HTMLFormElement & {
+  rating: RadioNodeList;
+  review: HTMLTextAreaElement;
 };
 
-const INITIAL_FORM_VALUE: InitialForm = {
-  comment: '',
-  rating: RATING_STARS['unknown'],
-};
+const verifyForm = (comment: string, rating: string) =>
+  comment.length <= MIN_LENGTH_COMMENT || comment.length > MAX_LENGTH_COMMENT || Number(rating) === RATING_STARS.unknown;
 
 function FormReview({offerId}: FormReviewProps) {
-  const [textAreaValue, setTextAreaValue] = useState(INITIAL_FORM_VALUE.comment);
-  const [ratingStar, setRatingStar] = useState(INITIAL_FORM_VALUE.rating);
+  const [isSubmitDisabled, setIsSubmitDisabled] = useState(true);
+  const [isFormDisabled, setIsFormDisabled] = useState(false);
   const {postComment} = useActionCreators(commentsActions);
-  const formRef = useRef(null);
+
+  const onChangeForm = (evt: FormEvent<HTMLFormElement>) => {
+    const form = evt.currentTarget as Form;
+    const rating = form.rating.value;
+    const comment = form.review.value;
+    setIsSubmitDisabled(verifyForm(comment, rating));
+  };
 
   const onFormSubmit = (evt: FormEvent<HTMLFormElement>) => {
     evt.preventDefault();
-    postComment({offerId, body: {comment: textAreaValue, rating: ratingStar}})
-      .unwrap()
-      .then(() => {
-        setTextAreaValue(INITIAL_FORM_VALUE.comment);
-        setRatingStar(INITIAL_FORM_VALUE.rating);
-      });
+    const form = evt.currentTarget as Form;
+
+    const clearForm = () => {
+      form.reset();
+      setIsSubmitDisabled(true);
+      setIsFormDisabled(false);
+    };
+
+    const commentToSend = {
+      offerId,
+      body: {
+        comment: form.review.value,
+        rating: Number(form.rating.value),
+      },
+    };
+    setIsFormDisabled(true);
+    toast.promise(postComment(commentToSend).unwrap(), {
+      pending: 'Sending comment',
+      success: {
+        render() {
+          clearForm();
+          return 'Comment sent';
+        }
+      },
+      error: {
+        render() {
+          setIsFormDisabled(false);
+          return 'Failed to send comment';
+        }
+      }
+    });
   };
 
   return (
     <form
-      ref={formRef}
       onSubmit={(evt) => onFormSubmit(evt)}
+      onChange={(evt) => onChangeForm(evt)}
       className="reviews__form form"
       action="#"
       method="post"
@@ -49,21 +79,19 @@ function FormReview({offerId}: FormReviewProps) {
         {Object.entries(RATING_STARS).slice(1).map(([starTitle, starValue]) =>
           (
             <RatingStar
-              onClickHandle={setRatingStar}
               key={starTitle}
               starTitle={starTitle as StarTitle}
               starValue={starValue}
-              currentValue={ratingStar}
+              isDisabled={isFormDisabled}
             />
           )
         )}
       </div>
       <textarea
-        onChange={(evt) => setTextAreaValue(evt.target.value)}
-        value={textAreaValue}
         className="reviews__textarea form__textarea"
         id="review" name="review"
         placeholder="Tell how was your stay, what you like and what can be improved"
+        disabled={isFormDisabled}
       />
       <div className="reviews__button-wrapper">
         <p className="reviews__help">
@@ -73,7 +101,7 @@ function FormReview({offerId}: FormReviewProps) {
         <button
           className="reviews__submit form__submit button"
           type="submit"
-          disabled={textAreaValue.length < MIN_LENGTH_COMMENT || ratingStar < MIN_STARS_COMMENT}
+          disabled={isSubmitDisabled || isFormDisabled}
         >
           Submit
         </button>
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index ef23b75..35f7d0f 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -38,7 +38,7 @@ function Header() {
           <div className="header__avatar-wrapper user__avatar-wrapper">
             {userInfo?.avatarUrl && <img className="user__avatar" src={userInfo.avatarUrl} alt="avatar"/>}
           </div>
-          {userInfo?.name && <span className="header__user-name user__name">{userInfo.name}</span>}
+          {userInfo?.email && <span className="header__user-name user__name">{userInfo.email}</span>}
           <span className="header__favorite-count">{favoritesCount}</span>
         </Link>
       </li>
diff --git a/src/components/map/map.tsx b/src/components/map/map.tsx
index 62c7b0e..5b25cae 100644
--- a/src/components/map/map.tsx
+++ b/src/components/map/map.tsx
@@ -4,7 +4,7 @@ import {Icon, layerGroup, Marker} from 'leaflet';
 import {CITIES, MARKER_ACTIVE_OPTIONS, MARKER_DEFAULT_OPTIONS} from '../../const';
 import 'leaflet/dist/leaflet.css';
 import useMap from '../../hooks/use-map.tsx';
-import {OfferShortInfo} from '../../types/offer.ts';
+import {OfferFullInfo, OfferShortInfo} from '../../types/offer.ts';
 import {useAppSelector} from '../../hooks/store.ts';
 import {offersSelectors} from '../../store/slices/offers.ts';
 
@@ -12,13 +12,13 @@ type MapProps = {
   city: typeof CITIES[number];
   offers: OfferShortInfo[];
   container: string;
+  currentOffer?: OfferFullInfo;
 };
 
 const defaultCustomIcon = new Icon(MARKER_DEFAULT_OPTIONS);
-
 const currentCustomIcon = new Icon(MARKER_ACTIVE_OPTIONS);
 
-function Map({container, city, offers}: MapProps) {
+function Map({container, city, offers, currentOffer}: MapProps) {
   const activeOffer = useAppSelector(offersSelectors.activeOffer);
 
   const mapRef = useRef(null);
@@ -40,6 +40,15 @@ function Map({container, city, offers}: MapProps) {
               : defaultCustomIcon
           )
           .addTo(markerLayer);
+
+        if (currentOffer) {
+          const currentOfferMarker = new Marker({
+            lat: currentOffer.location.latitude,
+            lng: currentOffer.location.longitude
+          });
+
+          currentOfferMarker.setIcon(currentCustomIcon).addTo(map);
+        }
       });
 
       map.flyTo([city.location.latitude, city.location.longitude], 12);
diff --git a/src/components/offers-list/offers-list.tsx b/src/components/offers-list/offers-list.tsx
index 8fd4e9d..2e0b47f 100644
--- a/src/components/offers-list/offers-list.tsx
+++ b/src/components/offers-list/offers-list.tsx
@@ -20,14 +20,27 @@ function OffersList ({offersByCity, city}: OffersListProps) {
   const {setActiveOffer} = useActionCreators(offersActions);
   const status = useAppSelector(offersSelectors.status);
 
-  const offersSorted = sortOffers(activeSortOption, offersByCity);
-
   if (status === RequestStatus.Loading) {
     return (
       <OffersListLoader />
     );
   }
 
+  if (offersByCity.length === 0) {
+    return (
+      <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 {city.name}
+          </p>
+        </div>
+      </section>
+    );
+  }
+
+  const offersSorted = sortOffers(activeSortOption, offersByCity);
+
   return (
     <section className="cities__places places">
       <h2 className="visually-hidden">Places</h2>
diff --git a/src/components/rating-star/rating-star.tsx b/src/components/rating-star/rating-star.tsx
index 745638c..44ddf79 100644
--- a/src/components/rating-star/rating-star.tsx
+++ b/src/components/rating-star/rating-star.tsx
@@ -6,11 +6,10 @@ export type StarValue = (typeof RATING_STARS)[keyof typeof RATING_STARS]
 interface RatingStar {
   starTitle: StarTitle;
   starValue: StarValue;
-  currentValue: StarValue;
-  onClickHandle: React.Dispatch<React.SetStateAction<StarValue>>;
+  isDisabled?: boolean;
 }
 
-function RatingStar({starTitle, starValue, onClickHandle, currentValue}: RatingStar) {
+function RatingStar({starTitle, starValue, isDisabled}: RatingStar) {
   return (
     <>
       <input
@@ -19,10 +18,9 @@ function RatingStar({starTitle, starValue, onClickHandle, currentValue}: RatingS
         value={starValue}
         id={`${starValue}-stars`}
         type="radio"
-        checked={currentValue === starValue}
+        disabled={isDisabled}
       />
       <label
-        onClick={() => onClickHandle(starValue)}
         htmlFor={`${starValue}-stars`}
         className="reviews__rating-label form__rating-label"
         title={starTitle}
diff --git a/src/components/rating/rating.tsx b/src/components/rating/rating.tsx
index b36d566..e304d19 100644
--- a/src/components/rating/rating.tsx
+++ b/src/components/rating/rating.tsx
@@ -1,12 +1,12 @@
 import {OfferShortInfo} from '../../types/offer.ts';
 import {getRatingValue} from '../../utils/common.ts';
 
-interface FavoriteButtonProps {
+interface RatingProps {
   componentType: 'place-card' | 'offer' | 'reviews';
   rating: OfferShortInfo['rating'];
 }
 
-function Rating({componentType, rating}: FavoriteButtonProps) {
+function Rating({componentType, rating}: RatingProps) {
 
   return (
     <div className={`${componentType}__rating rating`}>
@@ -14,6 +14,7 @@ function Rating({componentType, rating}: FavoriteButtonProps) {
         <span style={{width: `${getRatingValue(rating)}%`,}}></span>
         <span className="visually-hidden">Rating</span>
       </div>
+      {componentType === 'offer' && <span className="offer__rating-value rating__value">{rating}</span>}
     </div>
   );
 }
diff --git a/src/const.ts b/src/const.ts
index d6e6dc1..031f84f 100644
--- a/src/const.ts
+++ b/src/const.ts
@@ -16,9 +16,6 @@ const RATING_STARS = {
   'terribly': 1,
 } as const;
 
-const MIN_LENGTH_COMMENT = 50;
-const MIN_STARS_COMMENT = 1;
-
 const CITIES = [
   {name: 'Paris', location: {latitude: 48.85661, longitude: 2.351499, zoom: 13}, slug: 'paris'},
   {name: 'Cologne', location: {latitude: 50.938361, longitude: 6.959974, zoom: 13}, slug: 'cologne'},
@@ -94,8 +91,6 @@ export {
   DEFAULT_CITY_SLUG,
   DATE_FORMAT,
   DATE_FORMAT_ATTRIBUTE,
-  MIN_STARS_COMMENT,
-  MIN_LENGTH_COMMENT,
   MARKER_DEFAULT_OPTIONS,
   MARKER_ACTIVE_OPTIONS,
   RequestStatus,
diff --git a/src/pages/main/main.tsx b/src/pages/main/main.tsx
index 64ad5c0..61bd424 100644
--- a/src/pages/main/main.tsx
+++ b/src/pages/main/main.tsx
@@ -10,6 +10,7 @@ import {useEffect} from 'react';
 import OffersList from '../../components/offers-list/offers-list.tsx';
 import {toast} from 'react-toastify';
 import {AxiosError} from 'axios';
+import {classNames} from '../../utils/class-names/class-names.ts';
 
 export type MainProps = {
   title?: string;
@@ -40,8 +41,9 @@ function Main({title = 'Main', citySlug}: MainProps) {
   }
 
   const offersByCity = allOffers.filter((offer) => offer.city.name === activeCity.name);
+
   return (
-    <div className="page page--gray page--main">
+    <div className={classNames('page page--gray page--main', offersByCity.length === 0 && 'page__main--index-empty')}>
       <Header />
       <main className="page__main page__main--index">
         <h1 className="visually-hidden">Cities</h1>
@@ -53,11 +55,11 @@ function Main({title = 'Main', citySlug}: MainProps) {
           </section>
         </div>
         <div className="cities">
-          <div className="cities__places-container container">
+          <div className={classNames('cities__places-container container', offersByCity.length === 0 && 'cities__places-container--empty')}>
             <OffersList offersByCity={offersByCity} city={activeCity} />
             <div className="cities__right-section">
               {
-                activeCity && <Map container="cities" city={activeCity} offers={offersByCity} />
+                activeCity && offersByCity.length > 0 && <Map container="cities" city={activeCity} offers={offersByCity} />
               }
             </div>
           </div>
diff --git a/src/pages/offer/offer.tsx b/src/pages/offer/offer.tsx
index 6ea9891..8217f56 100644
--- a/src/pages/offer/offer.tsx
+++ b/src/pages/offer/offer.tsx
@@ -11,7 +11,6 @@ import {AuthStatus, CITIES} from '../../const.ts';
 import Map from '../../components/map/map.tsx';
 import OfferCard from '../../components/offer-card/offer-card.tsx';
 import {useActionCreators, useAppSelector} from '../../hooks/store.ts';
-import {offersActions} from '../../store/slices/offers.ts';
 import {useEffect} from 'react';
 import {offerFullInfoActions, offerFullInfoSelectors} from '../../store/slices/offer-full-info.ts';
 import {offersNearActions, offersNearSelectors} from '../../store/slices/offers-near.ts';
@@ -22,9 +21,11 @@ interface OfferProps {
   title?: string;
 }
 
+const MAX_COUNT_IMAGES = 6;
+const MAX_COUNT_NEAR_OFFERS = 3;
+
 function Offer({title = 'Offer'}: OfferProps) {
   useDocumentTitle(title);
-  const {setActiveOffer} = useActionCreators(offersActions);
   const {fetchOfferFullInfo} = useActionCreators(offerFullInfoActions);
   const {fetchOffersNear} = useActionCreators(offersNearActions);
 
@@ -40,7 +41,7 @@ function Offer({title = 'Offer'}: OfferProps) {
   }, [fetchOfferFullInfo, fetchOffersNear, offerId]);
 
   const offerFullInfo = useAppSelector(offerFullInfoSelectors.offerFullInfo);
-  const offersNear = useAppSelector(offersNearSelectors.offersNear);
+  const offersNear = useAppSelector(offersNearSelectors.offersNear).slice(0, MAX_COUNT_NEAR_OFFERS);
 
 
   if (!offerFullInfo) {
@@ -72,11 +73,13 @@ function Offer({title = 'Offer'}: OfferProps) {
         <section className="offer">
           <div className="offer__gallery-container container">
             <div className="offer__gallery">
-              {images.map((image) => (
-                <div key={image} className="offer__image-wrapper">
-                  <img className="offer__image" src={image} alt="Photo studio"/>
-                </div>
-              ))}
+              {
+                images.slice(0, MAX_COUNT_IMAGES).map((image) => (
+                  <div key={image} className="offer__image-wrapper">
+                    <img className="offer__image" src={image} alt="Photo studio"/>
+                  </div>
+                ))
+              }
             </div>
           </div>
           <div className="offer__container container">
@@ -98,10 +101,10 @@ function Offer({title = 'Offer'}: OfferProps) {
                   {capitalizeFirstLetter(type)}
                 </li>
                 <li className="offer__feature offer__feature--bedrooms">
-                  {bedrooms} Bedrooms
+                  {`${bedrooms} Bedroom${bedrooms > 1 ? 's' : ''}`}
                 </li>
                 <li className="offer__feature offer__feature--adults">
-                  Max {maxAdults} adults
+                  {`Max ${maxAdults} adult${maxAdults > 1 ? 's' : ''}`}
                 </li>
               </ul>
               <div className="offer__price">
@@ -128,7 +131,7 @@ function Offer({title = 'Offer'}: OfferProps) {
               </section>
             </div>
           </div>
-          {cityFullInfo && <Map container="offer" city={cityFullInfo} offers={offersNear}/>}
+          {cityFullInfo && <Map container="offer" city={cityFullInfo} currentOffer={offerFullInfo} offers={offersNear}/>}
         </section>
         <div className="container">
           <section className="near-places places">
@@ -140,7 +143,6 @@ function Offer({title = 'Offer'}: OfferProps) {
                     key={nearOffer.id}
                     offer={nearOffer}
                     componentType="near-places"
-                    hoverHandler={() => setActiveOffer(nearOffer)}
                   />
                 )
               )}
diff --git a/src/store/slices/comments.ts b/src/store/slices/comments.ts
index 09bb646..74a2061 100644
--- a/src/store/slices/comments.ts
+++ b/src/store/slices/comments.ts
@@ -1,7 +1,8 @@
-import {createSlice} from '@reduxjs/toolkit';
+import {createSelector, createSlice} from '@reduxjs/toolkit';
 import {RequestStatus} from '../../const.ts';
 import {Comment} from '../../types/comment.ts';
 import {fetchCommentsAction, postCommentAction} from '../thunks/comments.ts';
+import {sortCommentsByDate} from '../../utils/sort.ts';
 
 interface CommentsState {
   comments: Comment[];
@@ -52,6 +53,13 @@ const commentsActions = {
   fetchComments: fetchCommentsAction,
   postComment: postCommentAction,
 };
-const commentsSelectors = commentsSlice.selectors;
+const commentsSelectors = {
+  ...commentsSlice.selectors,
+  sortedComments:
+    createSelector(
+      commentsSlice.selectors.comments,
+      (comments) => comments.toSorted(sortCommentsByDate)
+    ),
+};
 
 export { commentsSlice, commentsActions, commentsSelectors };
diff --git a/src/utils/common.ts b/src/utils/common.ts
index eed0abe..699ae07 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -1,7 +1,7 @@
 import {CityName, OfferShortInfo} from '../types/offer.ts';
 import {CITIES} from '../const.ts';
 
-const getRatingValue = (rating: OfferShortInfo['rating']) => (rating * 100) / 5;
+const getRatingValue = (rating: OfferShortInfo['rating']) => (Math.round(rating) * 100) / 5;
 
 const capitalizeFirstLetter = (string: string) => string.charAt(0).toUpperCase() + string.slice(1);
 
diff --git a/src/utils/sort.ts b/src/utils/sort.ts
index 8dd14b1..29425ea 100644
--- a/src/utils/sort.ts
+++ b/src/utils/sort.ts
@@ -1,5 +1,6 @@
 import {OfferShortInfo} from '../types/offer.ts';
 import {SortOption} from '../components/sort/const.ts';
+import {Comment} from '../types/comment.ts';
 
 function sortOffers (sortType: SortOption, offers: OfferShortInfo[]) {
   switch (sortType) {
@@ -16,4 +17,8 @@ function sortOffers (sortType: SortOption, offers: OfferShortInfo[]) {
   }
 }
 
+export function sortCommentsByDate(commentA: Comment, commentB: Comment) {
+  return new Date(commentB.date).getTime() - new Date(commentA.date).getTime();
+}
+
 export {sortOffers};