diff --git a/src/App.tsx b/src/App.tsx
index a21e1a8..87c602a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,8 +11,22 @@ type Offer = {
   rating: number;
   type: string;
   isPremium: boolean;
-  previewImage: string;
+  isFavorite: boolean;
   NumberOfPlaces: number;
+  previewImage: string;
+  city: {
+    name: string;
+    location: {
+      latitude: number;
+      longitude: number;
+      zoom: number;
+    };
+  };
+    location: {
+      latitude: number;
+      longitude: number;
+      zoom: number;
+    };
 };
 
 type AppProps = {
diff --git a/src/components/Favorites/Favorite.tsx b/src/components/Favorites/Favorite.tsx
index b7525f0..c8d4033 100644
--- a/src/components/Favorites/Favorite.tsx
+++ b/src/components/Favorites/Favorite.tsx
@@ -6,8 +6,22 @@ type Offer = {
   rating: number;
   type: string;
   isPremium: boolean;
-  previewImage: string;
+  isFavorite: boolean;
   NumberOfPlaces: number;
+  previewImage: string;
+  city: {
+    name: string;
+    location: {
+      latitude: number;
+      longitude: number;
+      zoom: number;
+    };
+  };
+    location: {
+      latitude: number;
+      longitude: number;
+      zoom: number;
+    };
 };
 type FavoriteProps = {
   offers: Offer[];
diff --git a/src/components/MainPage/MainPage.tsx b/src/components/MainPage/MainPage.tsx
index ee9a53a..90845e8 100644
--- a/src/components/MainPage/MainPage.tsx
+++ b/src/components/MainPage/MainPage.tsx
@@ -1,6 +1,6 @@
 import {FC} from 'react';
 import OfferList from '../Offer/OfferList';
-
+import Map from '../Map/Map';
 type Offer = {
   id: number;
   title: string;
@@ -8,13 +8,26 @@ type Offer = {
   rating: number;
   type: string;
   isPremium: boolean;
-  previewImage: string;
+  isFavorite: boolean;
   NumberOfPlaces: number;
+  previewImage: string;
+  city: {
+    name: string;
+    location: {
+      latitude: number;
+      longitude: number;
+      zoom: number;
+    };
+  };
+    location: {
+      latitude: number;
+      longitude: number;
+      zoom: number;
+    };
 };
 type MainPageProps = {
   offers: Offer[];
 };
-
 export const MainPage : FC<MainPageProps> = ({ offers }) =>
   (
     <div className="page page--gray page--main">
@@ -110,7 +123,9 @@ export const MainPage : FC<MainPageProps> = ({ offers }) =>
               </div>
             </section>
             <div className="cities__right-section">
-              <section className="cities__map map"></section>
+              <section className="cities__map map">
+                <Map offers={offers} selectedPoint={offers[3]} />
+              </section>
             </div>
           </div>
         </div>
diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
new file mode 100644
index 0000000..631251f
--- /dev/null
+++ b/src/components/Map/Map.tsx
@@ -0,0 +1,77 @@
+import {useRef, useEffect} from 'react';
+import {Icon, Marker, layerGroup} from 'leaflet';
+import useMap from '../../hooks/use-map';
+import 'leaflet/dist/leaflet.css';
+type Offer = {
+  id: number;
+  title: string;
+  price: number;
+  rating: number;
+  type: string;
+  isPremium: boolean;
+  isFavorite: boolean;
+  NumberOfPlaces: number;
+  previewImage: string;
+  city: {
+    name: string;
+    location: {
+      latitude: number;
+      longitude: number;
+      zoom: number;
+    };
+  };
+    location: {
+      latitude: number;
+      longitude: number;
+      zoom: number;
+    };
+};
+const defaultCustomIcon = new Icon({
+  iconUrl: 'https://assets.htmlacademy.ru/content/intensive/javascript-1/demo/interactive-map/pin.svg',
+  iconSize: [40, 40],
+  iconAnchor: [20, 40]
+});
+
+const currentCustomIcon = new Icon({
+  iconUrl: 'https://assets.htmlacademy.ru/content/intensive/javascript-1/demo/interactive-map/main-pin.svg',
+  iconSize: [40, 40],
+  iconAnchor: [20, 40]
+});
+type MainPageProps = {
+  offers: Offer[];
+  selectedPoint :Offer;
+};
+
+function Map(props: MainPageProps): JSX.Element {
+  const {offers, selectedPoint} = props;
+
+  const mapRef = useRef(null);
+  const map = useMap(mapRef, 'Амстердам');
+
+  useEffect(() => {
+    if (map) {
+      const markerLayer = layerGroup().addTo(map);
+      offers.forEach((offer) => {
+        const marker = new Marker({
+          lat: offer.location.latitude,
+          lng: offer.location.longitude
+        });
+        marker
+          .setIcon(
+            selectedPoint !== undefined && offer.title === selectedPoint.title
+              ? currentCustomIcon
+              : defaultCustomIcon,
+          )
+          .addTo(markerLayer);
+      });
+
+      return () => {
+        map.removeLayer(markerLayer);
+      };
+    }
+  }, [map, offers,selectedPoint]);
+
+  return <div style={{height: '500px'}} ref={mapRef}></div>;
+}
+
+export default Map;
diff --git a/src/components/Offer/Offer.tsx b/src/components/Offer/Offer.tsx
index 6c9511b..9d5bd83 100644
--- a/src/components/Offer/Offer.tsx
+++ b/src/components/Offer/Offer.tsx
@@ -207,116 +207,7 @@ export default function Offer () {
                   </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"
-                      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"
-                    >
-                      <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"
-                    >
-                      <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"
-                    >
-                      <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"
-                    >
-                      <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"
-                  />
-                  <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>
+                  <SendCommentForm /> {}
                 </form>
               </section>
             </div>
diff --git a/src/components/Offer/OfferCard.tsx b/src/components/Offer/OfferCard.tsx
index f872325..f644358 100644
--- a/src/components/Offer/OfferCard.tsx
+++ b/src/components/Offer/OfferCard.tsx
@@ -7,8 +7,22 @@ type Offer = {
   rating: number;
   type: string;
   isPremium: boolean;
-  previewImage: string;
+  isFavorite: boolean;
   NumberOfPlaces: number;
+  previewImage: string;
+  city: {
+    name: string;
+    location: {
+      latitude: number;
+      longitude: number;
+      zoom: number;
+    };
+  };
+    location: {
+      latitude: number;
+      longitude: number;
+      zoom: number;
+    };
 };
 
 type OfferCardProps = {
diff --git a/src/components/Offer/OfferList.tsx b/src/components/Offer/OfferList.tsx
index d84aa13..32825f3 100644
--- a/src/components/Offer/OfferList.tsx
+++ b/src/components/Offer/OfferList.tsx
@@ -8,8 +8,22 @@ type Offer = {
   rating: number;
   type: string;
   isPremium: boolean;
-  previewImage: string;
+  isFavorite: boolean;
   NumberOfPlaces: number;
+  previewImage: string;
+  city: {
+    name: string;
+    location: {
+      latitude: number;
+      longitude: number;
+      zoom: number;
+    };
+  };
+    location: {
+      latitude: number;
+      longitude: number;
+      zoom: number;
+    };
 };
 
 type OfferListProps = {
diff --git a/src/const.ts b/src/const.ts
new file mode 100644
index 0000000..1b7e76b
--- /dev/null
+++ b/src/const.ts
@@ -0,0 +1,5 @@
+export const URL_MARKER_DEFAULT =
+  'https://assets.htmlacademy.ru/content/intensive/javascript-1/demo/interactive-map/pin.svg';
+
+export const URL_MARKER_CURRENT =
+  'https://assets.htmlacademy.ru/content/intensive/javascript-1/demo/interactive-map/main-pin.svg';
diff --git a/src/hooks/use-map.tsx b/src/hooks/use-map.tsx
new file mode 100644
index 0000000..e8f617d
--- /dev/null
+++ b/src/hooks/use-map.tsx
@@ -0,0 +1,39 @@
+import {useEffect, useState, MutableRefObject, useRef} from 'react';
+import {Map, TileLayer} from 'leaflet';
+
+function useMap(
+  mapRef: MutableRefObject<HTMLElement | null>,
+  city: string
+): Map | null {
+  const [map, setMap] = useState<Map | null>(null);
+  const isRenderedRef = useRef<boolean>(false);
+
+  useEffect(() => {
+    if (mapRef.current !== null && !isRenderedRef.current) {
+      const instance = new Map(mapRef.current, {
+        center: {
+          lat: 52.3,
+          lng: 4.99
+        },
+        zoom: 10
+      });
+
+      const layer = new TileLayer(
+        'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png',
+        {
+          attribution:
+            '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
+        }
+      );
+
+      instance.addLayer(layer);
+
+      setMap(instance);
+      isRenderedRef.current = true;
+    }
+  }, [mapRef, city]);
+
+  return map;
+}
+
+export default useMap;
diff --git a/src/mock/offers.ts b/src/mock/offers.ts
index ac5ea3e..b253cd2 100644
--- a/src/mock/offers.ts
+++ b/src/mock/offers.ts
@@ -8,6 +8,20 @@ export const offers = [
     isPremium: true,
     previewImage: 'img/apartment-01.jpg',
     NumberOfPlaces: 1,
+    location: {
+      latitude: 52.3909553943508,
+      longitude: 4.85309666406198,
+      zoom: 0,
+    },
+    city: {
+      name: 'Amsterdam',
+      location: {
+        latitude: 52.35514938496378,
+        longitude: 4.673877537499948,
+        zoom: 8,
+      },
+    },
+    isFavorite: false,
   },
   {
     id: 2,
@@ -18,6 +32,20 @@ export const offers = [
     isPremium: false,
     previewImage: 'img/apartment-02.jpg',
     NumberOfPlaces: 1,
+    location: {
+      latitude: 52.3609553943508,
+      longitude: 4.85309666406198,
+      zoom: 0,
+    },
+    city: {
+      name: 'Amsterdam',
+      location: {
+        latitude: 52.35514938496378,
+        longitude: 4.673877537499948,
+        zoom: 8,
+      },
+    },
+    isFavorite: false,
   },
   {
     id: 3,
@@ -28,6 +56,20 @@ export const offers = [
     isPremium: false,
     previewImage: 'img/studio-01.jpg',
     NumberOfPlaces: 1,
+    location: {
+      latitude: 52.3909553943508,
+      longitude: 4.929309666406198,
+      zoom: 0,
+    },
+    city: {
+      name: 'Amsterdam',
+      location: {
+        latitude: 52.35514938496378,
+        longitude: 4.673877537499948,
+        zoom: 8,
+      },
+    },
+    isFavorite: false,
   },
   {
     id: 4,
@@ -38,5 +80,19 @@ export const offers = [
     isPremium: true,
     previewImage: 'img/studio-01.jpg',
     NumberOfPlaces: 1,
+    location: {
+      latitude: 52.3809553943508,
+      longitude: 4.939309666406198,
+      zoom: 0,
+    },
+    city: {
+      name: 'Amsterdam',
+      location: {
+        latitude: 52.35514938496378,
+        longitude: 4.673877537499948,
+        zoom: 8,
+      },
+    },
+    isFavorite: false,
   },
 ];
diff --git a/src/types/types.ts b/src/types/types.ts
new file mode 100644
index 0000000..b661606
--- /dev/null
+++ b/src/types/types.ts
@@ -0,0 +1,14 @@
+export type City = {
+  title: string;
+  lat: number;
+  lng: number;
+  zoom: number;
+};
+
+export type Point = {
+  title: string;
+  lat: number;
+  lng: number;
+};
+
+export type Points = Point[];