diff --git a/project-app/components/Footer/Footer.jsx b/project-app/components/Footer/Footer.jsx
index f3bee6f..8042b20 100644
--- a/project-app/components/Footer/Footer.jsx
+++ b/project-app/components/Footer/Footer.jsx
@@ -1,21 +1,34 @@
+import Link from "next/link";
+import {
+  AiFillFacebook,
+  AiFillInstagram,
+  AiOutlineTwitter,
+} from "react-icons/ai";
 
-import Link from "next/link"
-import {AiFillFacebook,AiFillInstagram,AiOutlineTwitter} from "react-icons/ai";
-
-
-
-
-
-export default function Footer () {
-    return (
-        <footer className=" border-black border-2 h-20 m-[0.2rem] pl-[43%] bg-[#004F54]">
-        <div class="flex justify-evenly items-center space-x-8 space-y-1 h-auto w-min">
-          <div class="item w-12 h-12"><a href="https://www.facebook.com" target='blank'><AiFillFacebook className="h-12 w-12 rounded-md m-0 shadow-md text-gray-50"/></a></div>
-          <div class="item w-12 h-12"><a href="https://www.instagram.com" target='blank'><AiFillInstagram className="h-12 w-12 rounded-md m-0 shadow-md text-gray-50"/></a></div>
-          <div class="item w-12 h-12"><a href="https://www.twitter.com" target='blank'><AiOutlineTwitter className="h-12 w-12 rounded-md m-0 shadow-md text-gray-50"/></a></div>
+export default function Footer() {
+  return (
+    <footer className=" border-black border-2 h-20 m-[0.2rem] pl-[43%] bg-[#004F54]">
+      <div className="flex justify-evenly items-center space-x-8 space-y-1 h-auto w-min">
+        <div className="item w-12 h-12">
+          <a href="https://www.facebook.com" target="blank">
+            <AiFillFacebook className="h-12 w-12 rounded-md m-0 shadow-md text-gray-50" />
+          </a>
+        </div>
+        <div className="item w-12 h-12">
+          <a href="https://www.instagram.com" target="blank">
+            <AiFillInstagram className="h-12 w-12 rounded-md m-0 shadow-md text-gray-50" />
+          </a>
         </div>
-        <p className="text-base pl-[4%] m-[.1rem] tracking-wider font-normal text-gray-50"> Copyright &copy;2022</p>
-      </footer>
-    )
+        <div className="item w-12 h-12">
+          <a href="https://www.twitter.com" target="blank">
+            <AiOutlineTwitter className="h-12 w-12 rounded-md m-0 shadow-md text-gray-50" />
+          </a>
+        </div>
+      </div>
+      <p className="text-base pl-[4%] m-[.1rem] tracking-wider font-normal text-gray-50">
+        {" "}
+        Copyright &copy;2022
+      </p>
+    </footer>
+  );
 }
-
diff --git a/project-app/components/Weather/SearchBar.jsx b/project-app/components/Weather/SearchBar.jsx
index 8245ebd..af99828 100644
--- a/project-app/components/Weather/SearchBar.jsx
+++ b/project-app/components/Weather/SearchBar.jsx
@@ -2,7 +2,7 @@ import React from "react";
 
 const SearchBar = ({ fetchWeather, handleChange, city }) => {
   return (
-    <div className="w-80 ml-28">
+    <div className="w-96 xl:w-80 ml-4 xl:ml-40 mr-4">
       <label
         htmlFor="default-search"
         className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300"
diff --git a/project-app/components/Weather/Weather.jsx b/project-app/components/Weather/Weather.jsx
index 6eca7bd..235429a 100644
--- a/project-app/components/Weather/Weather.jsx
+++ b/project-app/components/Weather/Weather.jsx
@@ -26,7 +26,7 @@ const Weather = () => {
     console.log(data);
     setWeatherObject(data);
     //uncomment the below city State after development stage - means each time you make a change, props cant be found
-    setCity("");
+    // setCity("");
   }
 
   useEffect(() => {
@@ -34,24 +34,26 @@ const Weather = () => {
   }, []);
 
   return (
-    <div id="weather" className="mt-4">
-      <h2 className="text-6xl font-bold ml-4">Weather Forecast</h2>
+    <div id="weather" className="mt-8">
+      <h2 className="text-3xl text-[#004F54] md:text-5xl font-bold ml-40">
+        Check The Weather
+      </h2>
+      <div className="flex flex-col sm:flex-row md:justify-start">
+        <SearchBar
+          handleChange={handleChange}
+          fetchWeather={fetchWeather}
+          city={city}
+        />
+        <WeatherReqs />
+      </div>
       <div className="weather">
-        <div>
-          <SearchBar
-            handleChange={handleChange}
-            fetchWeather={fetchWeather}
-            city={city}
-          />
-          <WeatherForecast
-            weatherObject={weatherObject}
-            handleChange={handleChange}
-            fetchWeather={fetchWeather}
-            city={city}
-          />
-        </div>
+        <WeatherForecast
+          weatherObject={weatherObject}
+          handleChange={handleChange}
+          fetchWeather={fetchWeather}
+          city={city}
+        />
       </div>
-      <WeatherReqs />
     </div>
   );
 };
diff --git a/project-app/components/Weather/WeatherForecast.jsx b/project-app/components/Weather/WeatherForecast.jsx
index 196d111..9f7a739 100644
--- a/project-app/components/Weather/WeatherForecast.jsx
+++ b/project-app/components/Weather/WeatherForecast.jsx
@@ -1,19 +1,31 @@
 import React from "react";
 
 const WeatherForecast = ({ weatherObject }) => {
+  function datConvertor(timeStamp) {
+    let unix = timeStamp;
+    let milliSeconds = unix * 1000;
+    let dateObject = new Date(milliSeconds);
+    let displayDate = dateObject.toLocaleString("en-US", { weekday: "long" });
+    return displayDate;
+  }
+
   return (
     //main div container
-    <div className="flex justify-evenly mb-4 mt-4 ml-4 ">
+    <div className=" flex flex-col xl:flex-row justify-between md:justify-evenly mb-4 mt-4 ml-4 mr-4 bg-[url('/weather-background.jpg')] bg-cover">
       {/* todays weather stats */}
-      <div className="flex justify-evenly rounded bg-stone-300 p-2  w-2/5">
+      <div className="flex justify-between md:justify-evenly rounded bg-[#004F54]/75 p-2 md:pt-10 w-full xl:w-2/5 xl:mt-4 xl:mb-4">
         <div>
-          <h2 className="text-5xl font-bold mb-6 mt-5">Today</h2>
+          <h2 className="text-2xl text-white lg:text-5xl font-bold mb-6 mt-5">
+            Today
+          </h2>
 
-          <div className="text-2xl font-bold">{weatherObject?.city.name}</div>
-          <h1 className="text-6xl font-bold mt-3">
+          <div className="text-2xl text-white font-bold">
+            {weatherObject?.city.name}
+          </div>
+          <h1 className="text-3xl text-white lg:text-6xl font-bold mt-3">
             {Math.floor(weatherObject?.list[0].main.temp)}°C{" "}
           </h1>
-          <h2 className="text-xl font-bold">
+          <h2 className="text-xl text-white font-bold">
             {weatherObject?.list[0].weather[0].description}
           </h2>
         </div>
@@ -26,19 +38,28 @@ const WeatherForecast = ({ weatherObject }) => {
         </div>
 
         <div className="flex-col content-center mt-5">
-          <h3 className="font-bold">feels like:</h3>
-          <span>{Math.floor(weatherObject?.list[0].main.feels_like)}°C</span>
-          <h3 className="font-bold mt-5">humidity:</h3>
-          <span> {weatherObject?.list[0].main.humidity}%</span>
-          <h3 className="font-bold mt-5">wind speed:</h3>
-          <span>{weatherObject?.list[0].wind.speed}m/s</span>
+          <h3 className="font-bold text-white">feels like:</h3>
+          <span className="text-white">
+            {Math.floor(weatherObject?.list[0].main.feels_like)}°C
+          </span>
+          <h3 className="font-bold text-white mt-5">humidity:</h3>
+          <span className="text-white">
+            {" "}
+            {weatherObject?.list[0].main.humidity}%
+          </span>
+          <h3 className="font-bold text-white mt-5">wind speed:</h3>
+          <span className="text-white">
+            {weatherObject?.list[0].wind.speed}m/s
+          </span>
         </div>
       </div>
       {/* 5 day forecast cards */}
-      <div className="flex justify-between rounded bg-stone-300 ">
-        <div className="flex-col rounded shadow-lg mt-4 mb-4 w-48 p-4 ml-4 flex justify-evenly items-center text-xl font-bold mb-4">
-          <p>{weatherObject?.list[8].dt_txt.slice(0, 10)}</p>
-          <p className="text-3xl">
+      <div className="flex justify-evenly rounded bg-[#004F54]/75 w-full xl:w-2/5 mt-4 mb-4">
+        <div className="flex flex-col rounded border shadow-lg mt-4 mb-4 w-48 p-4 ml-4 justify-evenly items-center text-xl font-bold mb-4">
+          <p className="text-white">
+            {datConvertor(weatherObject?.list[8].dt)}
+          </p>
+          <p className="text-3xl text-white">
             {" "}
             {Math.floor(weatherObject?.list[8].main.temp)}°C
           </p>
@@ -47,11 +68,15 @@ const WeatherForecast = ({ weatherObject }) => {
             viewBox="0 0 32 32"
             className="fill-current h-40 w-40 text-yellow-300"
           />
-          <p>{weatherObject?.list[8].weather[0].description}</p>
+          <p className="text-white">
+            {weatherObject?.list[8].weather[0].description}
+          </p>
         </div>
-        <div className="flex-col shadow-lg rounded mt-4 mb-4 w-48 p-4 ml-4 flex justify-evenly items-center text-xl font-bold mb-4">
-          <p>{weatherObject?.list[16].dt_txt.slice(0, 10)}</p>
-          <p className="text-3xl">
+        <div className="flex-col shadow-lg  border rounded mt-4 mb-4 w-48 p-4 ml-4 flex justify-evenly items-center text-xl font-bold mb-4">
+          <p className="text-white">
+            {datConvertor(weatherObject?.list[16].dt)}
+          </p>
+          <p className="text-3xl text-white">
             {" "}
             {Math.floor(weatherObject?.list[16].main.temp)}°C
           </p>
@@ -60,10 +85,14 @@ const WeatherForecast = ({ weatherObject }) => {
             viewBox="0 0 32 32"
             className="fill-current h-40 w-40 text-yellow-300"
           />
-          <p>{weatherObject?.list[16].weather[0].description}</p>
+          <p className="text-white">
+            {weatherObject?.list[16].weather[0].description}
+          </p>
         </div>
-        <div className="flex-col rounded shadow-lg mt-4 mb-4 w-48 p-4 ml-4 flex justify-evenly items-center text-xl font-bold mb-4">
-          <p>{weatherObject?.list[24].dt_txt.slice(0, 10)}</p>
+        <div className="flex-col rounded  border shadow-lg mt-4 mb-4 w-48 p-4 ml-4 flex justify-evenly items-center text-xl text-white font-bold mb-4">
+          <p className="text-white">
+            {datConvertor(weatherObject?.list[24].dt)}
+          </p>
           <p className="text-3xl">
             {" "}
             {Math.floor(weatherObject?.list[24].main.temp)}°C
@@ -73,11 +102,15 @@ const WeatherForecast = ({ weatherObject }) => {
             viewBox="0 0 32 32"
             className="fill-current h-40 w-40 text-yellow-300"
           />
-          <p>{weatherObject?.list[24].weather[0].description}</p>
+          <p className="text-white">
+            {weatherObject?.list[24].weather[0].description}
+          </p>
         </div>
-        <div className="flex-col rounded shadow-lg mt-4 mb-4 w-48 p-4 ml-4 mr-4 flex justify-evenly items-center text-xl font-bold mb-4">
-          <p>{weatherObject?.list[32].dt_txt.slice(0, 10)}</p>
-          <p className="text-3xl">
+        <div className="flex-col rounded  border shadow-lg mt-4 mb-4 w-48 p-4 ml-4 mr-4 flex justify-evenly items-center text-xl font-bold mb-4">
+          <p className="text-white">
+            {datConvertor(weatherObject?.list[32].dt)}
+          </p>
+          <p className="text-3xl text-white">
             {" "}
             {Math.floor(weatherObject?.list[32].main.temp)}°C
           </p>
@@ -86,7 +119,9 @@ const WeatherForecast = ({ weatherObject }) => {
             viewBox="0 0 32 32"
             className="fill-current h-40 w-40 text-yellow-300"
           />
-          <p>{weatherObject?.list[32].weather[0].description}</p>
+          <p className="text-white">
+            {weatherObject?.list[32].weather[0].description}
+          </p>
         </div>
       </div>
     </div>
diff --git a/project-app/components/Weather/WeatherReqs.jsx b/project-app/components/Weather/WeatherReqs.jsx
index 03f71dc..7db444b 100644
--- a/project-app/components/Weather/WeatherReqs.jsx
+++ b/project-app/components/Weather/WeatherReqs.jsx
@@ -1,36 +1,109 @@
-import React from 'react'
+import React from "react";
+import Image from "next/image";
 
 const WeatherReqs = () => {
+  const [showModal, setShowModal] = React.useState(false);
   return (
-    <div className='bg-blue-300 ml-4 mr-4 '>
-        <h1 className='text-4xl font-bold ml-4'>Weather Requirements</h1>
-        <div className='flex justify-evenly'>
-        <div>
-            
-            <h2 className='text-2xl font-bold ml-4'>Hot weather</h2>
-            <p className='ml-4'>For hotter weather here are some things we recommend:</p>
-                <ul className='ml-4'>
-                    <li>Sun-screen</li>
-                    <li>Hat</li>
-                    <li>Sunglasses</li>
-                    <li>Water</li>
+    <>
+      <button
+        className="bg-[#004F54] ml-4 md:ml-1 text-white font-bold uppercase text-xs md:text-sm px-4 py-2 md:px-2 md:py-2 mt-2 sm:mt-0 rounded shadow hover:shadow-lg outline-none 
+        focus:outline-none mr-1 mb-1 ease-linear transition-all duration-100 w-24"
+        type="button"
+        onClick={() => setShowModal(true)}
+      >
+        Weather Tips
+      </button>
+
+      {showModal ? (
+        <>
+          <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
+            <div className="relative w-auto my-6 mx-auto max-w-6xl">
+              {/*content*/}
+              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+                {/*header*/}
+                <div className="flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t">
+                  <h3 className="ml-6 text-5xl font-bold text-[#004F54]">
+                    Weather Tips
+                  </h3>
+                  <button
+                    className="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
+                    onClick={() => setShowModal(false)}
+                  >
+                    <span className="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
+                      ×
+                    </span>
+                  </button>
+                </div>
+                {/*body*/}
+                <div className="flex">
+                  {/* hot icons div */}
+                  <div className="relative p-6 flex-auto">
+                    {/* hot icons */}
+                    <div className="flex p-4">
+                      <div className="mr-10 bg-red-600 rounded-xl shadow-2xl p-4">
+                        <Image src="/sunglasses.svg" width={100} height={100} />
+                      </div>
+                      <div className="bg-red-600 rounded-xl shadow-2xl p-4">
+                        <Image src="/cap.svg" width={100} height={100} />
+                      </div>
+                    </div>
+                    <div className="flex p-4">
+                      <div className="mr-10 bg-red-600 rounded-xl shadow-2xl p-4">
+                        <Image src="/water.svg" width={100} height={100} />
+                      </div>
+                      <div className="bg-red-600 rounded-xl shadow-2xl p-4">
+                        <Image src="/sun-cream.svg" width={100} height={100} />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* cold icons div */}
+                  <div className="relative p-6 flex-auto ml-16">
+                    {/* cold icons */}
+                    <div className="flex p-4">
+                      <div className="mr-10 bg-sky-600 rounded-xl shadow-2xl p-4">
+                        <Image src="/jacket.svg" width={100} height={100} />
+                      </div>
+                      <div className="bg-sky-600 rounded-xl shadow-2xl p-4">
+                        <Image src="/gloves.svg" width={100} height={100} />
+                      </div>
+                    </div>
+                    <div className="flex p-4">
+                      <div className="mr-10 bg-sky-600 rounded-xl shadow-2xl p-4">
+                        <Image src="/boots.svg" width={100} height={100} />
+                      </div>
+                      <div className="bg-sky-600 rounded-xl shadow-2xl p-4">
+                        <Image src="/winter-hat.svg" width={100} height={100} />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <ul className="m-8 text-xl font-bold">
+                  <h2 className="text-2xl">Checklist</h2>
+                  <li>- Stay hydrated</li>
+                  <li>- Take appropriate clothing</li>
+                  <li>- Be prepared for sudden changes in weather</li>
+                  <li>- Wear a rucksack to carry essentials</li>
                 </ul>
-        </div>
-        <div>
-            <h2 className='text-2xl font-bold ml-4'>Cold weather</h2>
-            <p className='ml-4'>For colder weather here are some things we recommend:</p>
-            <ul className='ml-4'>
-                <li>Warm headwear</li>
-                <li>Jacket</li>
-                <li>Gloves</li>
-                <li>Water-proof boots</li>
-                <li>Thick socks</li>
-            </ul>
-            
+                {/*footer*/}
+                <div className="flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b">
+                  <button
+                    className="text-[#004F54] background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-100"
+                    type="button"
+                    onClick={() => setShowModal(false)}
+                  >
+                    Close
+                  </button>
+                </div>
+              </div>
             </div>
-        </div>
-    </div>
-  )
-}
+          </div>
+          <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
+        </>
+      ) : null}
+    </>
+  );
+};
 
-export default WeatherReqs
\ No newline at end of file
+export default WeatherReqs;
diff --git a/project-app/public/boots.svg b/project-app/public/boots.svg
new file mode 100644
index 0000000..e7079c9
--- /dev/null
+++ b/project-app/public/boots.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="61.818px" height="61.818px" viewBox="0 0 61.818 61.818" style="enable-background:new 0 0 61.818 61.818;"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M33.625,58.991c-6.416,0-14.066-0.201-22.741-0.6c-0.204,0.021-0.813,0.036-1.348-0.58
+			c-0.109-0.127-0.203-0.277-0.29-0.439c-0.488,0.354-0.825,0.907-0.865,1.554c-0.068,1.149,0.806,2.137,1.955,2.206
+			c0.805,0.046,11.724,0.687,22.76,0.687c8.804,0,17.687-0.408,21.556-1.847c1.079-0.4,1.628-1.601,1.229-2.68
+			c-0.187-0.498-0.547-0.877-0.981-1.106c0.014,0.207,0.028,0.415,0.031,0.637l0.003,0.279l-0.229,0.156
+			C54.448,57.434,51.661,58.991,33.625,58.991z"/>
+		<path d="M10.499,36.71c1.126,7.912,0.716,9.839,0.097,12.757c-0.195,0.915-0.415,1.953-0.609,3.314
+			c-0.377,2.641-0.058,3.744,0.234,4.203c0.035,0.056,0.07,0.105,0.103,0.145c0.173,0.199,0.343,0.228,0.428,0.228l0.081-0.021
+			l0.052,0.015c8.678,0.397,16.33,0.6,22.741,0.6c15.076,0,19.285-1.096,20.256-1.451c-0.009-0.192-0.025-0.372-0.045-0.552
+			c-0.35-3.42-2.525-4.602-5.694-6.316c-0.946-0.514-2.019-1.092-3.121-1.78c-4.968-3.102-13.84-6.751-13.929-6.786l-0.466-0.192
+			l0.175-0.473c1.686-4.553,1.834-35.983,1.846-40.348C31.776,0.016,30.961,0,30.199,0C20.185,0,19.77,2.714,19.766,2.742
+			L19.28,7.147l-0.55-4.372C18.545,1.298,15.315,0.45,9.867,0.45c-1.761,0-3.303,0.092-4.061,0.146
+			c0.745,15.21,2.019,21.69,3.252,27.956C9.577,31.179,10.064,33.661,10.499,36.71z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/project-app/public/cap.svg b/project-app/public/cap.svg
new file mode 100644
index 0000000..708abfd
--- /dev/null
+++ b/project-app/public/cap.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M395.13,105.739H228.174c-64.445,0-116.87,52.429-116.87,116.87v100.174v50.087H16.696C7.479,372.87,0,380.343,0,389.565
+			c0,9.223,7.479,16.696,16.696,16.696h478.609c9.217,0,16.696-7.473,16.696-16.696V222.609
+			C512,158.168,459.576,105.739,395.13,105.739z M311.652,289.391c0,9.206-7.49,16.696-16.696,16.696H144.696v-66.783h150.261
+			c9.206,0,16.696,7.49,16.696,16.696V289.391z M478.609,372.87h-66.783V222.609c0-32.689-13.527-62.247-35.233-83.478h18.538
+			c46.032,0,83.478,37.446,83.478,83.478V372.87z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/project-app/public/gloves.svg b/project-app/public/gloves.svg
new file mode 100644
index 0000000..b05b921
--- /dev/null
+++ b/project-app/public/gloves.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512.002 512.002" style="enable-background:new 0 0 512.002 512.002;" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path d="M404.009,312.006V120.877c0-36.1-35.618-61.768-69.899-50.125c-8.944-27.958-39.236-43.601-67.4-34.036
+				c-15.648-48.935-85.178-48.973-100.839,0C131.549,25.06,95.972,50.783,95.972,86.842v65.987
+				c-33.688-9.595-67.399,15.8-67.399,50.907v108.272c0,31.344,21.186,57.836,49.988,65.908c0,13.281,0,101.168,0,114.865
+				c0,10.615,8.606,19.22,19.22,19.22h237.019c10.615,0,19.22-8.606,19.22-19.22c0-13.684,0-101.584,0-114.865
+				C382.825,369.843,404.009,343.352,404.009,312.006z M315.581,473.559H117.002v-15.074h198.579V473.559z"/>
+			<path d="M423.882,67.622c-10.615,0-19.22,8.606-19.22,19.22s8.606,19.22,19.22,19.22c11.638,0,21.106,9.468,21.106,21.106
+				v184.839c0,31.861-15.635,61.874-41.823,80.287c-5.119,3.599-8.166,9.465-8.166,15.723v65.544h-11.444
+				c-10.615,0-19.22,8.606-19.22,19.22c0,10.615,8.606,19.22,19.22,19.22h30.664c10.615,0,19.22-8.606,19.22-19.22v-75.254
+				c31.476-25.855,49.989-64.583,49.989-105.522v-184.88c0-0.018,0-0.035,0-0.051C483.375,94.284,456.683,67.622,423.882,67.622z"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/project-app/public/jacket.svg b/project-app/public/jacket.svg
new file mode 100644
index 0000000..5d3c162
--- /dev/null
+++ b/project-app/public/jacket.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 328.249 328.249" style="enable-background:new 0 0 328.249 328.249;" xml:space="preserve">
+<g>
+	<path d="M156.597,30.896h-22.698c-3.105,0-5.621,2.517-5.621,5.621v18.334l-22.02,0c-11.256,0-21.51,6.471-26.354,16.631
+		L5.598,227.327c-1.382,2.899-0.196,6.372,2.672,7.819l1.086,0.548l-8.672,16.439c-1.523,2.886-0.417,6.461,2.469,7.983
+		l12.543,6.618c2.886,1.523,6.461,0.417,7.983-2.469l8.893-16.857l1.324,0.668c1.406,0.709,3.036,0.828,4.53,0.33
+		c1.494-0.498,2.727-1.571,3.426-2.982l52.901-106.745l-0.031,23.847c-6.034,3.443-10.11,9.925-10.11,17.369
+		c0,6.58,3.192,12.4,8.097,16.045c-8.977,2.181-15.651,10.251-15.651,19.899c0,9.033,5.849,16.684,13.96,19.416
+		c-3.932,3.652-6.406,8.851-6.406,14.64c0,7.388,4.017,13.824,9.975,17.287l-0.031,24.257c-0.002,1.568,0.62,3.073,1.728,4.183
+		c1.108,1.11,2.612,1.733,4.181,1.733h56.131V30.896z"/>
+	<path d="M327.566,252.132l-8.678-16.449l1.065-0.538c2.868-1.447,4.055-4.919,2.672-7.819L248.32,71.483
+		c-4.844-10.16-15.098-16.631-26.354-16.631l-22.021,0V36.517c0-3.104-2.517-5.621-5.621-5.621h-22.727v266.457h56.253
+		c1.569,0,3.073-0.624,4.182-1.734c1.108-1.11,1.73-2.616,1.727-4.184l-0.038-24.308c5.91-3.475,9.888-9.883,9.888-17.234
+		c0-5.789-2.475-10.988-6.406-14.64c8.111-2.732,13.96-10.383,13.96-19.416c0-9.648-6.674-17.718-15.651-19.899
+		c4.905-3.645,8.097-9.465,8.097-16.045c0-7.42-4.05-13.881-10.051-17.333l-0.037-23.777l52.848,106.64
+		c0.699,1.411,1.932,2.484,3.426,2.982c1.494,0.498,3.124,0.379,4.53-0.33l1.344-0.678l8.899,16.868
+		c1.523,2.887,5.097,3.992,7.983,2.469l12.543-6.618C327.983,258.593,329.088,255.018,327.566,252.132z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/project-app/public/sun-cream.svg b/project-app/public/sun-cream.svg
new file mode 100644
index 0000000..fa82097
--- /dev/null
+++ b/project-app/public/sun-cream.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 330 330" style="enable-background:new 0 0 330 330;" xml:space="preserve">
+<g id="XMLID_865_">
+	<path id="XMLID_866_" d="M68.639,230h192.723l18.582-213.701c0.364-4.187-1.046-8.337-3.887-11.435
+		C273.215,1.764,269.203,0,264.999,0l-200,0.013c-4.204,0-8.215,1.765-11.056,4.864c-2.842,3.098-4.251,7.247-3.887,11.436
+		L68.639,230z M165,80c24.812,0,45,20.188,45,45s-20.188,45-45,45c-24.813,0-45-20.188-45-45S140.188,80,165,80z"/>
+	<path id="XMLID_869_" d="M85,330h160c8.284,0,15-6.716,15-15v-55H70v55C70,323.284,76.716,330,85,330z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/project-app/public/sunglasses.svg b/project-app/public/sunglasses.svg
new file mode 100644
index 0000000..eed4c17
--- /dev/null
+++ b/project-app/public/sunglasses.svg
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 430.456 430.456" style="enable-background:new 0 0 430.456 430.456;" xml:space="preserve">
+<g>
+	<path d="M35.154,221.054L68.625,58.71c2.055-9.965,11.521-17.411,18.612-17.411h20v-30h-20c-22.131,0-43.212,18.164-47.994,41.353
+		L0,242.995c2.281-2.268,4.679-4.433,7.221-6.46C15.312,230.084,24.654,224.935,35.154,221.054z"/>
+	<path d="M340.733,242.338c-56.615,0-89.443,11.872-102.385,41.523c-7.17-3.2-15.012-4.923-23.12-4.923s-15.95,1.722-23.12,4.923
+		c-12.942-29.65-45.771-41.523-102.385-41.523c-60.534,0-80.96,28.224-85.935,56.564c-5.949,33.885,13.154,93.721,56.706,113.158
+		c67.127,29.958,132.89-41.199,137.01-96.394c4.856-4.318,11.11-6.728,17.724-6.728s12.867,2.41,17.724,6.728
+		c4.12,55.195,69.883,126.352,137.01,96.394c43.552-19.437,62.655-79.273,56.706-113.158
+		C421.692,270.562,401.267,242.338,340.733,242.338z"/>
+	<path d="M361.831,58.709l33.471,162.344c10.5,3.881,19.842,9.031,27.933,15.481c2.542,2.026,4.939,4.191,7.221,6.46L391.213,52.652
+		c-4.781-23.189-25.862-41.353-47.994-41.353h-20v30h20C350.31,41.299,359.776,48.745,361.831,58.709z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/project-app/public/water.svg b/project-app/public/water.svg
new file mode 100644
index 0000000..1e3660b
--- /dev/null
+++ b/project-app/public/water.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 297 297" style="enable-background:new 0 0 297 297;" xml:space="preserve">
+<g>
+	<path d="M105.966,62.077h85.069c5.424,0,9.821-4.397,9.821-9.821v-2.335c0-5.424-4.397-9.821-9.821-9.821h-85.069
+		c-5.424,0-9.821,4.397-9.821,9.821v2.335C96.145,57.68,100.542,62.077,105.966,62.077z"/>
+	<path d="M159.077,10.577C159.077,4.736,154.341,0,148.5,0s-10.577,4.736-10.577,10.577v15.657h21.154V10.577z"/>
+	<path d="M208.259,145.454V91.003c0-8.303-6.755-15.058-15.059-15.058h-89.401c-8.303,0-15.059,6.755-15.059,15.058v54.451
+		c18.911,3.686,32.788,20.383,32.788,41.018c0,20.635-13.877,37.332-32.788,41.018v54.451c0,8.303,6.755,15.059,15.059,15.059
+		h89.401c8.303,0,15.059-6.755,15.059-15.059V227.49c-18.911-3.686-32.788-20.383-32.788-41.018
+		C175.471,165.837,189.348,149.14,208.259,145.454z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/project-app/public/weather-background.jpg b/project-app/public/weather-background.jpg
new file mode 100644
index 0000000..e59865d
Binary files /dev/null and b/project-app/public/weather-background.jpg differ
diff --git a/project-app/public/winter-hat.svg b/project-app/public/winter-hat.svg
new file mode 100644
index 0000000..78e6e25
--- /dev/null
+++ b/project-app/public/winter-hat.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M481.924,363.465H30.076c-10.345,0-18.732,8.387-18.732,18.732v111.072c0,10.345,8.387,18.732,18.732,18.732h451.849
+			c10.345,0,18.732-8.387,18.732-18.732V382.197C500.656,371.852,492.269,363.465,481.924,363.465z M299.96,456.464H212.04
+			c-10.345,0-18.732-8.387-18.732-18.732s8.387-18.732,18.732-18.732h87.919c10.345,0,18.732,8.387,18.732,18.732
+			S310.304,456.464,299.96,456.464z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M309.578,89.508c4.603-8.557,7.222-18.332,7.222-28.709C316.799,27.275,289.525,0,256,0s-60.799,27.275-60.799,60.799
+			c0,10.389,2.624,20.174,7.235,28.736C108.804,110.661,51.138,190.83,51.138,277.279v48.722c7.633,0,153.601,0,161.555,0V161.005
+			c0-21.731,17.674-39.411,39.399-39.411c0.945,0-1.582,0,7.817,0c21.724,0,39.399,17.68,39.399,39.411v164.996
+			c7.963,0,153.928,0,161.555,0v-48.722C460.862,191.555,403.864,110.704,309.578,89.508z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/project-app/tailwind.config.js b/project-app/tailwind.config.js
index f4cb967..0d1ea64 100644
--- a/project-app/tailwind.config.js
+++ b/project-app/tailwind.config.js
@@ -7,11 +7,10 @@ module.exports = {
   theme: {
     extend: {
       backgroundImage: {
-        'hero-background': "url('/hero-background.png')",
-       
-      }
+        "hero-background": "url('/hero-background.png')",
+        "weather-background": "url('/weather-background.jpg')",
+      },
     },
   },
   plugins: [],
-}
-
+};