diff --git a/src/App.tsx b/src/App.tsx
index 4c73a8f..772ebfc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import Header from "./components/header/Header";
 import HomePage from "./pages/home/HomePage";
 import useLocalStorage from "use-local-storage";
-import Footer from "./components/footer/Footer";
 
 
 function App() {
@@ -11,7 +10,6 @@ function App() {
         <div className={'wrapper'} data-theme={isDark ? 'dark' : 'light'}>
             <Header isDark={isDark} setIsDark={setIsDark}/>
             <HomePage/>
-            <Footer/>
         </div>
     );
 }
diff --git a/src/components/HourlyForecast/HourlyForecast.module.scss b/src/components/HourlyForecast/HourlyForecast.module.scss
index 7ddfb80..c0f7920 100644
--- a/src/components/HourlyForecast/HourlyForecast.module.scss
+++ b/src/components/HourlyForecast/HourlyForecast.module.scss
@@ -9,41 +9,23 @@
   h2{
     text-align: center;
   }
+  @media (max-width: 529px) {
+    padding: 20px 10px;
+  }
 }
 .items{
   margin-top: 1.4em;
   display: flex;
   justify-content: space-between;
-}
-.item{
-  text-align: center;
-  padding: 20px 15px;
-  border-radius: 2em;
-  box-shadow: 8px 9px 11px 0 rgba(0, 0, 0, 0.50);
-  width: 15%;
-  .icon{
-    position: relative;
-    width: 100%;
-    height: 140px;
-    img{
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      -webkit-filter: drop-shadow(3px 5px 5px #363535);
-      filter: drop-shadow(3px 5px 5px #363535);
-    }
-  }
-  .time{
-    font-size: 1.33em;
-    font-weight: 700;
+  @media (max-width: 1024px) {
+    flex-wrap: wrap;
+    justify-content: start;
+    column-gap: 1em;
+    row-gap: 1em;
   }
-  p{
-    font-weight: 700;
-    font-size: 1.1em;
-    & + p{
-      margin-top: 5px;
-    }
+  @media (max-width: 529px) {
+    column-gap: 0;
+    justify-content: space-between;
   }
+
 }
\ No newline at end of file
diff --git a/src/components/HourlyForecast/HourlyForecast.tsx b/src/components/HourlyForecast/HourlyForecast.tsx
index 093b503..8985b0b 100644
--- a/src/components/HourlyForecast/HourlyForecast.tsx
+++ b/src/components/HourlyForecast/HourlyForecast.tsx
@@ -2,13 +2,13 @@ import React, {useEffect} from 'react';
 import s from './HourlyForecast.module.scss'
 import {useAppDispatch, useAppSelector} from "../../hooks/hooks";
 import {hourlyForecastThunk} from "../../store/thunks/hourlyForecast.thunk";
-import Icon from "../imageIcon/Icon";
 import {toast} from "react-toastify";
+import HourlyForecastItem from "../hourlyForecastItem/HourlyForecastItem";
 
-const HourlyForecast = React.memo(() => {
+const HourlyForecast = () => {
     const name = useAppSelector(state => state.currentWeather.name)
     const error = useAppSelector(state => state.hourlyWeather.error)
-    const {list} = useAppSelector(state => state.hourlyWeather)
+    const list  = useAppSelector(state => state.hourlyWeather.list)
     const dispatch = useAppDispatch()
     useEffect(() => {
         name && dispatch(hourlyForecastThunk(name))
@@ -18,19 +18,10 @@ const HourlyForecast = React.memo(() => {
         <div className={s.body}>
             <h2 className="title">Hourly Forecast:</h2>
             <div className={s.items}>
-                {list.map((item, index) => {
-                    return <div key={index} className={s.item}>
-                        <div className={s.time}>{item.dt_txt && item.dt_txt.slice(10,16)}</div>
-                        <div className={s.icon}>
-                            <Icon icon={item.weather[0].icon} />
-                        </div>
-                        <p className={s.temp}>{item.main.temp && Math.round(item.main.temp - 273.15)}°C</p>
-                        <p className={s.speed}>{item.wind.speed && Math.round(item.wind.speed)}km/h</p>
-                    </div>
-                })}
+                {list.map((item, index) => <HourlyForecastItem item={item} key={index}/>)}
             </div>
         </div>
     );
-});
+};
 
 export default HourlyForecast;
\ No newline at end of file
diff --git a/src/components/currentWeather/CurrentWeather.module.scss b/src/components/currentWeather/CurrentWeather.module.scss
index 51cabba..437cf5b 100644
--- a/src/components/currentWeather/CurrentWeather.module.scss
+++ b/src/components/currentWeather/CurrentWeather.module.scss
@@ -9,6 +9,21 @@
   justify-content: space-between;
   align-items: center;
   color: var(--primary-color);
+  @media (max-width: 1024px) {
+    justify-content: start;
+    column-gap: 4em;
+    flex-wrap: wrap;
+  }
+  @media (max-width: 768px) {
+    justify-content: center;
+    column-gap: 1em;
+    row-gap: 1em;
+    width: 100%;
+  }
+  @media (max-width: 529px) {
+    padding: 20px 10px;
+    row-gap: 0;
+  }
   .degree, .feelsLike{
     background: linear-gradient(80deg, var(--primary-color) -2.93%, var(--primary-color) 212.44%);
     background-clip: text;
@@ -22,7 +37,7 @@
     color: var(--primary-color);
   }
   .feelsLike{
-    margin-top: -11px;
+    margin-top: -7px;
     padding-left: .5em;
     font-size: 1.1em;
     font-weight: 600;
@@ -36,5 +51,9 @@
     margin-left: -2em;
     -webkit-filter: drop-shadow(3px 3px 3px #000);
     filter: drop-shadow(3px 3px 3px #000);
+    @media (max-width: 1300px){
+      width: 9em;
+      margin-left: 0;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/components/currentWeather/CurrentWeather.tsx b/src/components/currentWeather/CurrentWeather.tsx
index f18a80c..c2c3d27 100644
--- a/src/components/currentWeather/CurrentWeather.tsx
+++ b/src/components/currentWeather/CurrentWeather.tsx
@@ -5,15 +5,14 @@ import Icon from '../imageIcon/Icon';
 import CurrentWeatherInfo from "../currentWeatherInfo/CurrentWeatherInfo";
 import {currentWeatherThunk} from "../../store/thunks/currentWeather.thunk";
 
-const CurrentWeather = React.memo(() => {
-    console.log('CurrentWeather')
+const CurrentWeather = () => {
     const dispatch = useAppDispatch()
     const temp = useAppSelector(state => state.currentWeather.temp)
     const weather = useAppSelector(state => state.currentWeather.weather)
     const feels_like = useAppSelector(state => state.currentWeather.feels_like)
 
     useEffect(() => {
-        dispatch(currentWeatherThunk('astana'))
+        dispatch(currentWeatherThunk(JSON.parse(String(localStorage.getItem("city"))) || 'astana'))
     }, [dispatch]);
 
     return (
@@ -26,6 +25,6 @@ const CurrentWeather = React.memo(() => {
             <CurrentWeatherInfo />
         </div>
     );
-});
+};
 
 export default CurrentWeather;
\ No newline at end of file
diff --git a/src/components/currentWeatherAbout/CurrentWeatherAbout.module.scss b/src/components/currentWeatherAbout/CurrentWeatherAbout.module.scss
index 4cdb110..217a2fc 100644
--- a/src/components/currentWeatherAbout/CurrentWeatherAbout.module.scss
+++ b/src/components/currentWeatherAbout/CurrentWeatherAbout.module.scss
@@ -7,13 +7,26 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  @media (max-width: 768px) {
+    padding: 30px;
+    width: 100%;
+  }
+  @media (max-width: 529px) {
+    padding: 30px 10px;
+  }
 }
 .city{
   text-align: center;
   font-size: 3em;
   font-weight: 700;
+  @media (max-width: 1024px) {
+    font-size: 2.4em;
+  }
+  @media (max-width: 529px) {
+    font-size: 2.1em;
+  }
   & p{
     margin-top: .4em;
-    font-size: .6em;
+    font-size: .55em;
   }
 }
\ No newline at end of file
diff --git a/src/components/currentWeatherInfo/CurrentWeatherInfo.module.scss b/src/components/currentWeatherInfo/CurrentWeatherInfo.module.scss
index da8f604..2a3dac2 100644
--- a/src/components/currentWeatherInfo/CurrentWeatherInfo.module.scss
+++ b/src/components/currentWeatherInfo/CurrentWeatherInfo.module.scss
@@ -1,5 +1,8 @@
 .content{
   width: 36%;
+  @media (max-width: 1024px) {
+    width: 100%;
+  }
   h3{
     font-size: 1em;
     margin: 0;
@@ -10,6 +13,12 @@
     justify-content: space-between;
     flex-wrap: wrap;
     row-gap: 1.2em;
+    @media (max-width: 1024px) {
+      flex-wrap: nowrap;
+    }
+    @media (max-width: 529px) {
+      flex-wrap: wrap;
+    }
   }
   .description{
     text-transform: uppercase;
diff --git a/src/components/currentWeatherInfo/CurrentWeatherInfo.tsx b/src/components/currentWeatherInfo/CurrentWeatherInfo.tsx
index 2bc78c3..c100691 100644
--- a/src/components/currentWeatherInfo/CurrentWeatherInfo.tsx
+++ b/src/components/currentWeatherInfo/CurrentWeatherInfo.tsx
@@ -8,8 +8,6 @@ const CurrentWeatherInfo = () => {
     return (
         <div className={s.content}>
             <div className={s.body}>
-                {/*<p className={s.maxTemp}>Temp max <span>{state.temp_max && Math.round(state.temp_max)}°C</span></p>*/}
-                {/*<p className={s.minTemp}>Temp min <span>{state.temp_min && Math.round(state.temp_min)}°C</span></p>*/}
                 <div className={s.item}>
                     <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 322.881 322.881"><g>
                         <path d="M161.288,106.839c-3.304,2.498-3.957,7.201-1.459,10.506c18.253,24.142,48.873,70.369,48.873,108.734
@@ -55,8 +53,7 @@ const CurrentWeatherInfo = () => {
                 </div>
                 <div className={s.item}>
                     <svg fill="#000000" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
-                         viewBox="0 0 188.377 188.377" >
-<g>
+                         viewBox="0 0 188.377 188.377" ><g>
 	<g>
 		<g>
 			<path d="M158.717,24.669c-5.23-12.101-17.528-20.058-31.432-20.058c-17.526,0-32,12.741-33.825,29.07
@@ -77,7 +74,7 @@ const CurrentWeatherInfo = () => {
 		</g>
 	</g>
 </g>
-</svg>
+                    </svg>
                     <p className={s.cloudy}><span>{state.pressure && state.pressure}hPa</span> <br/>Pressure</p>
                 </div>
             </div>
diff --git a/src/components/footer/Footer.module.scss b/src/components/footer/Footer.module.scss
deleted file mode 100644
index 898b40c..0000000
--- a/src/components/footer/Footer.module.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.footer{
-  margin-top: 2em;
-  position: relative;
-  z-index: 10;
-  padding: 1.2em 0;
-  color: var(--primary-color);
-}
-.items{
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
\ No newline at end of file
diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
deleted file mode 100644
index 0b83ab0..0000000
--- a/src/components/footer/Footer.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import s from './Footer.module.scss'
-
-const Footer = React.memo(() => {
-    return (
-        <footer className={s.footer}>
-            <div className={'container'}>
-                Footer
-            </div>
-        </footer>
-    );
-});
-
-export default Footer;
\ No newline at end of file
diff --git a/src/components/header/Header.module.scss b/src/components/header/Header.module.scss
index bad6cf2..1dd0cbf 100644
--- a/src/components/header/Header.module.scss
+++ b/src/components/header/Header.module.scss
@@ -1,11 +1,16 @@
 .header{
   position: relative;
   z-index: 10;
-  padding: 1.2em 0;
+  padding: .9em 0;
   color: var(--primary-color);
 }
 .items{
   display: flex;
   justify-content: space-between;
   align-items: center;
+  column-gap: 10px;
+  @media (max-width: 529px) {
+    flex-wrap: wrap;
+    row-gap: .6em;
+  }
 }
\ No newline at end of file
diff --git a/src/components/hourlyForecastItem/HourlyForecastItem.module.scss b/src/components/hourlyForecastItem/HourlyForecastItem.module.scss
new file mode 100644
index 0000000..d9ffe36
--- /dev/null
+++ b/src/components/hourlyForecastItem/HourlyForecastItem.module.scss
@@ -0,0 +1,42 @@
+.item{
+  text-align: center;
+  padding: 15px;
+  border-radius: 2em;
+  box-shadow: 8px 9px 11px 0 rgba(0, 0, 0, 0.50);
+  width: 15%;
+  @media (max-width: 1024px) {
+    width: 23%;
+  }
+  @media (max-width: 728px) {
+    width: 31%;
+  }
+  @media (max-width: 529px) {
+    width: 48%;
+  }
+  .icon{
+    position: relative;
+    width: 100%;
+    img{
+      @media (max-width: 1300px) {
+        width: 6.4em;
+        height: 6.4em;
+      }
+      margin: 0 auto;
+      width: 7em;
+      height: 7em;
+      -webkit-filter: drop-shadow(3px 5px 5px #363535);
+      filter: drop-shadow(3px 5px 5px #363535);
+    }
+  }
+  .time{
+    font-size: 1.33em;
+    font-weight: 700;
+  }
+  p{
+    font-weight: 700;
+    font-size: 1.1em;
+    & + p{
+      margin-top: 5px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/hourlyForecastItem/HourlyForecastItem.tsx b/src/components/hourlyForecastItem/HourlyForecastItem.tsx
new file mode 100644
index 0000000..1444b31
--- /dev/null
+++ b/src/components/hourlyForecastItem/HourlyForecastItem.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import s from './HourlyForecastItem.module.scss'
+import Icon from "../imageIcon/Icon";
+import {HourlyForecastInfo} from "../../models/hourlyForecast.models";
+
+interface IHourlyForecastItem{
+    item: HourlyForecastInfo
+}
+
+const HourlyForecastItem: React.FC<IHourlyForecastItem> = ({item}) => {
+    return (
+        <div className={s.item}>
+            <div className={s.time}>{item.dt_txt && item.dt_txt.slice(10,16)}</div>
+            <div className={s.icon}>
+                <Icon icon={item.weather[0].icon} />
+            </div>
+            <p className={s.temp}>{item.main.temp && Math.round(item.main.temp - 273.15)}°C</p>
+            <p className={s.speed}>{item.wind.speed && Math.round(item.wind.speed)}km/h</p>
+        </div>
+    );
+};
+
+export default HourlyForecastItem;
\ No newline at end of file
diff --git a/src/components/searchBlock/SearchBlock.module.scss b/src/components/searchBlock/SearchBlock.module.scss
index 14f4b2c..78df897 100644
--- a/src/components/searchBlock/SearchBlock.module.scss
+++ b/src/components/searchBlock/SearchBlock.module.scss
@@ -2,9 +2,18 @@
   display: flex;
   align-items: end;
   column-gap: 2em;
+  @media (max-width: 1024px) {
+    align-items: center;
+  }
+  @media (max-width: 768px) {
+    column-gap: 1em;
+  }
+  @media (max-width: 529px) {
+    width: 100%;
+  }
   & input{
     width: 36em;
-    padding: 5px 2em;
+    padding: 5px 1.4em;
     border-radius: 40px;
     border: 1px solid var(--primary-color);
     background: var(--background-color);
@@ -13,6 +22,16 @@
       transition: box-shadow .3s;
       box-shadow: 0 2px 20px 2px rgba(0, 0, 0, 0.25);
     }
+    @media (max-width: 1300px) {
+      width: 27em;
+    }
+    @media (max-width: 1024px) {
+      width: 22em;
+    }
+    @media (max-width: 768px) {
+      width: 100%;
+      padding: 3px 1em;
+    }
   }
   button{
     background-color: var(--foreground-color);
diff --git a/src/components/searchBlock/SearchBlock.tsx b/src/components/searchBlock/SearchBlock.tsx
index 5b0e138..0de1f12 100644
--- a/src/components/searchBlock/SearchBlock.tsx
+++ b/src/components/searchBlock/SearchBlock.tsx
@@ -2,20 +2,24 @@ import React, {ChangeEvent, useState} from 'react';
 import s from "./SearchBlock.module.scss";
 import {useAppDispatch} from "../../hooks/hooks";
 import {currentWeatherThunk} from "../../store/thunks/currentWeather.thunk";
+import useLocalStorage from "use-local-storage";
 
 const SearchBlock = () => {
     const [data, setData] = useState('')
+    const [value, setValue] = useLocalStorage('city', '')
     const dispatch = useAppDispatch()
     const changeData = (e: ChangeEvent<HTMLInputElement>) => setData(e.target.value)
     const send = () => {
         if (data.length > 0){
             dispatch(currentWeatherThunk(data))
+            setValue(data)
             setData('')
         }
     }
     const sendEnter = (e:  React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === 'Enter' && data.length > 0){
             dispatch(currentWeatherThunk(data))
+            setValue(data)
             setData('')
         }
     }
diff --git a/src/index.scss b/src/index.scss
index 4054922..50cf824 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -53,7 +53,7 @@ main{
 	min-height: 100vh;
 	transition: all .3s;
 	margin: 0;
-	padding: 0;
+	padding: 0 0 .9em 0;
 	box-sizing: border-box;
 	font-size: 18px;
 	font-family: "Roboto", sans-serif;
@@ -115,4 +115,27 @@ button {
 .title{
 	font-size: 1.77em;
 	font-weight: 700;
+}
+
+@media (max-width: 1300px) {
+	.container{
+		max-width: 990px;
+	}
+}
+@media (max-width: 1024px) {
+	.wrapper{
+		font-size: 16px;
+	}
+	.container{
+		max-width: 738px;
+	}
+}
+@media (max-width: 768px) {
+	.wrapper{
+		font-size: 15px;
+	}
+	.container{
+		padding: 0 15px;
+		max-width: 100%;
+	}
 }
\ No newline at end of file
diff --git a/src/pages/home/HomePage.module.scss b/src/pages/home/HomePage.module.scss
index a681639..ac8e1e8 100644
--- a/src/pages/home/HomePage.module.scss
+++ b/src/pages/home/HomePage.module.scss
@@ -3,5 +3,5 @@
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
-  row-gap: 1.3em;
+  row-gap: 1em;
 }
\ No newline at end of file
diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index 31d254f..c23df73 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -6,7 +6,6 @@ import HourlyForecast from "../../components/HourlyForecast/HourlyForecast";
 import {ToastContainer} from "react-toastify";
 
 const HomePage = React.memo(() => {
-    console.log('HomePage')
     return (
         <>
             <ToastContainer position="top-left" autoClose={5000}/>
@@ -15,7 +14,6 @@ const HomePage = React.memo(() => {
                     <CurrentWeatherAbout />
                     <CurrentWeather />
                     <HourlyForecast />
-                    {/*<DailyForecast />*/}
                 </div>
             </main>
         </>