diff --git a/public/pngwing 7.png b/public/pngwing 7.png
new file mode 100644
index 0000000..24390c4
Binary files /dev/null and b/public/pngwing 7.png differ
diff --git a/src/components/City/City.css b/src/components/City/City.css
index 908d5d0..451068e 100644
--- a/src/components/City/City.css
+++ b/src/components/City/City.css
@@ -1,11 +1,11 @@
-/* .button-container {
+.button-container {
   display: flex;
   flex-direction: column;
   gap: 10px;
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.5s ease, transform 0.5s ease;
-} */
+}
 
 .animated-button {
   width: 304px;
@@ -40,7 +40,7 @@
 }
 
 
-/* .button-container.visible {
+.button-container.visible {
   opacity: 1;
   transform: translateY(0);
-} */
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/City/City.js b/src/components/City/City.js
index 2594065..c1770bc 100644
--- a/src/components/City/City.js
+++ b/src/components/City/City.js
@@ -93,6 +93,9 @@ const City = (props) => {
           <option value="" style={{
                 maxWidth: 200,
             }}>Выберите город...</option>
+          <option value="Таганрог" style={{
+            maxWidth: 200,
+          }}>Таганрог</option>
           {filteredCityOptions.map(option => (
             <option key={option.id} value={option.name} style={{
                 maxWidth: 200,
diff --git a/src/components/Main/Footer.js b/src/components/Main/Footer.js
new file mode 100644
index 0000000..e44d665
--- /dev/null
+++ b/src/components/Main/Footer.js
@@ -0,0 +1,33 @@
+
+
+const Footer = () => {
+    return ( 
+        <div>
+            <div style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: '100%',
+                    marginTop: 50,
+                    marginBottom: 50,
+                }}>
+                    <img src="./logo5121.png" alt="#" style={{
+                    height: 53,
+                    width: 53,
+                }}/>
+                <span style={{
+                    color: '#F68C43',
+                    width: '30%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'start',
+                    fontWeight: 700,
+                    fontFamily: 'Raleway',
+                    fontSize: '20px',
+                }}>Путешествия <p style={{color: '#4EB0F2'}} >Просто!</p></span>
+                </div>
+        </div>
+     );
+}
+ 
+export default Footer;
\ No newline at end of file
diff --git a/src/components/Main/Header.js b/src/components/Main/Header.js
index 9245c0b..3520118 100644
--- a/src/components/Main/Header.js
+++ b/src/components/Main/Header.js
@@ -1,4 +1,6 @@
+
 const Header = () => {
+
     return ( 
         <div style={{
             height: '100%',
@@ -35,11 +37,17 @@ const Header = () => {
                     fontSize: '20px',
                 }}>Путешествия <p style={{color: '#4EB0F2'}} >Просто!</p></span>
                 </div>
-                <img src="./menu.png" alt="#" style={{
-                    height: 20,
-                    width: 32,
-                    marginRight: 10
-                }}/>
+                <button style={{
+                    backgroundColor: '#fff',
+                    border: 'none',
+                }}>
+                    <img src="./menu.png" alt="#" style={{
+                                 height: 20,
+                                 width: 32,
+                                 marginRight: 10,       
+                                    }}/>
+                </button>
+                
             </div>
         </div>
         
diff --git a/src/components/Main/Main.js b/src/components/Main/Main.js
index 90ae11b..bf2a9e1 100644
--- a/src/components/Main/Main.js
+++ b/src/components/Main/Main.js
@@ -2,26 +2,27 @@ import React, { useEffect, useState } from "react";
 import axios from "axios";
 import Header from "./Header";
 import Card from "./Card";
+import Footer from "./Footer";
 
 const Main = ({ userData }) => {
 
     const [films, setFilms] = useState([]);
-    const [gits, setGits] = useState([]);
-    const [museum, setMuseum] = useState([]);
+    const [attract, setAttract] = useState([]);
+    const [hotel, setHotel] = useState([]);
 
     const optionsFilms = {
         method: 'GET',
         url: `https://easytravel.zetcraft.ru/v1/GetAllFilmsInCity/${userData.selectedCity}`,
     };
 
-    const optionsGis = {
+    const optionsAttract = {
         method: 'GET',
-        url: `https://easytravel.zetcraft.ru/v1/GetAllGuides/${userData.selectedCity}`,
+        url: `https://easytravel.zetcraft.ru/v1/GetAllAttractionsInCity/${userData.selectedCity}`,
     };
 
-    const optionsMuseum = {
+    const optionsHotel = {
         method: 'GET',
-        url: `https://easytravel.zetcraft.ru/v1/GetAllMuseum/${userData.selectedCity}`,
+        url: `https://easytravel.zetcraft.ru/v1/GetAllHotelsInCity/${userData.selectedCity}`,
     };
 
     useEffect(() => {
@@ -33,23 +34,21 @@ const Main = ({ userData }) => {
     }, []);
 
     useEffect(() => {
-        axios.request(optionsGis).then(function (response) {
-            setGits(response.data);
+        axios.request(optionsAttract).then(function (response) {
+            setAttract(response.data);
         }).catch(function (error) {
             console.error(error);
         });
     }, []);
 
     useEffect(() => {
-        axios.request(optionsMuseum).then(function (response) {
-            setMuseum(response.data);
+        axios.request(optionsHotel).then(function (response) {
+            setHotel(response.data);
         }).catch(function (error) {
             console.error(error);
         });
     }, []);
 
-    console.log(userData.unique);
-
     return (
         <div>
         <Header />
@@ -59,6 +58,7 @@ const Main = ({ userData }) => {
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
+            marginTop: 10
         }}>
             <h2>Кино по пушкинской карте</h2>
             <div style={{
@@ -66,6 +66,7 @@ const Main = ({ userData }) => {
                 overflowX: 'auto',
                 display: 'flex',
                 justifyContent: 'center',
+                marginTop: 20
             }}>
                 <ul style={{
                     display: 'flex',
@@ -74,7 +75,8 @@ const Main = ({ userData }) => {
                 }}>
                     {films.map((film, index) => (
                         <li key={index} style={{
-                            marginRight: '10px',
+                            padding: '10px',
+                            marginRight: '30px',
                         }}>
                             <div key={index} style={{
                                 height: 200,
@@ -82,6 +84,8 @@ const Main = ({ userData }) => {
                                 display: 'flex',
                                 alignContent: 'center',
                                 flexDirection: 'column',
+                                borderRadius: '10px',
+                                boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.5)' 
                             }}>
                             <div style={{
                                 display: 'flex',
@@ -91,8 +95,16 @@ const Main = ({ userData }) => {
                                 <img src={film.imageURL} alt="#" style={{
                                     height: 110,
                                     width: 79,
+                                    marginTop: 10,
+                                    borderRadius: 10
                                 }}/>
-                                {film.filmName}
+                                <div style={{
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    width: 80,
+                                }}>{film.filmName}</div>
                             </div>
                         </div>
                     </li>
@@ -100,20 +112,86 @@ const Main = ({ userData }) => {
             </ul>
             </div>
 
-            <h2>Тур. гиды г.{userData.selectedCity}</h2>
-            <ul>
-                {gits.map((guide, index) => (
-                    <li key={index}>{guide.name}</li>
+            <h2 style={{
+                marginTop: 20,
+                marginBottom: 20
+            }}>Достопримечательности</h2>
+            <ul style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    listStyle: 'none',
+                    padding: 0,
+                    marginTop: 20,
+                    gap: 20,
+                }}>
+                {attract.map((attr, index) => (
+                    <li key={index}>
+                        <div style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 20,
+                            width: 400,
+                        }}>
+                            <img src={attr.imageURL} alt="#" style={{
+                                height: '92px',
+                                width: '107px',
+                                borderRadius: '10px'
+                            }}/>
+                            <div style={{
+                                width: 150
+                            }}>{attr.name}</div>
+                            <button style={{
+                                height: 33,
+                                width: 33,
+                                backgroundColor: 'rgb(0,0,0,0)',
+                                border: 'none'
+                            }}><img src="./pngwing 7.png" alt="#" /></button>
+                        </div>
+                    </li>    
                 ))}
             </ul>
 
-            <h2>Музеи г.{userData.selectedCity}</h2>
-            <ul>
-                {museum.map((museumItem, index) => (
-                    <li key={index}>{museumItem.name}</li>
+            <h2 style={{
+                marginBottom: 20,
+                marginTop: 20,
+            }}>Отели</h2>
+            <ul style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    listStyle: 'none',
+                    padding: 0,
+                    marginTop: 20,
+                    gap: 20,
+                }}>
+                {hotel.map((hotelItem, index) => (
+                    <li key={index}>
+                        <div style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 20
+
+                        }}>
+                            <img src={hotelItem.imageURL} alt="#" style={{
+                                height: 119,
+                                width: 184,
+                                borderRadius: 10,
+                            }}/>
+                            <div style={{
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: 20,
+                                width: 150,
+                                alignItems: 'center',
+                            }}>
+                                <div>{hotelItem.name}</div>
+                                <div>{hotelItem.price}</div>
+                            </div>
+                        </div>
+                    </li>
                 ))}
             </ul>
         </div>
+        <Footer />
         </div>
     );
 }