diff --git a/pages/index.js b/pages/index.js
index a4d33cb..b001000 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -6,6 +6,7 @@ export default function Home() {
   const [input, setInput] = useState("mumbai");
   const [systemUsed, setSystemUsed] = useState("metric");
   const [weatherData, setWeatherData] = useState();
+  // const [isLoading, setIsLoading] = useState(true);
 
   const getData = async () => {
     const res = await fetch("/api/data", {
@@ -100,64 +101,62 @@ export default function Home() {
     "Saturday",
   ];
 
-  return (
+  return weatherData ? (
     <div className={styles.wrapper}>
-      {weatherData && (
-        <div className={styles.weatherWrapper}>
-          <h1 className={styles.locationTitle}>
-            {weatherData.name}, {weatherData.sys.country}
-          </h1>
+      <div className={styles.weatherWrapper}>
+        <h1 className={styles.locationTitle}>
+          {weatherData.name}, {weatherData.sys.country}
+        </h1>
 
-          <p className={styles.weatherDescription}>
-            {weatherData.weather[0].description}
-          </p>
-          <Image
-            alt="weatherIcon"
-            src={`/icons/${weatherData.weather[0].icon}.svg`}
-            height="300px"
-            width="300px"
-          />
+        <p className={styles.weatherDescription}>
+          {weatherData.weather[0].description}
+        </p>
+        <Image
+          alt="weatherIcon"
+          src={`/icons/${weatherData.weather[0].icon}.svg`}
+          height="300px"
+          width="300px"
+        />
+
+        <h1 className={styles.mainTemp}>
+          {systemUsed == "metric"
+            ? Math.round(weatherData.main.temp)
+            : Math.round(ctoF(weatherData.main.temp))}
+          °{systemUsed == "metric" ? "C" : "F"}
+        </h1>
+        <p>
+          Feels like{" "}
+          {systemUsed == "metric"
+            ? Math.round(weatherData.main.feels_like)
+            : Math.round(ctoF(weatherData.main.feels_like))}
+          °{systemUsed == "metric" ? "C" : "F"}
+        </p>
+      </div>
 
-          <h1 className={styles.mainTemp}>
-            {systemUsed == "metric"
-              ? Math.round(weatherData.main.temp)
-              : Math.round(ctoF(weatherData.main.temp))}
-            °{systemUsed == "metric" ? "C" : "F"}
-          </h1>
-          <p>
-            Feels like{" "}
-            {systemUsed == "metric"
-              ? Math.round(weatherData.main.feels_like)
-              : Math.round(ctoF(weatherData.main.feels_like))}
-            °{systemUsed == "metric" ? "C" : "F"}
-          </p>
-        </div>
-      )}
       <div className={styles.statsWrapper}>
         <div className={styles.titleAndSearch}>
-          {weatherData && (
-            <h2 style={{ textAlign: "left" }}>
-              {
-                weekday[
-                  new Date(
-                    convertTime(weatherData.dt, weatherData.timezone).input
-                  ).getUTCDay()
-                ]
-              }
-              ,{" "}
-              {systemUsed == "metric"
-                ? convertTime(weatherData.dt, weatherData.timezone)[0].split(
-                    ":"
-                  )[0]
-                : timeToAMPM(
-                    convertTime(weatherData.dt, weatherData.timezone)[0]
-                  ).split(":")[0]}
-              :00{" "}
-              {systemUsed == "imperial"
-                ? isPM(convertTime(weatherData.dt, weatherData.timezone)[0])
-                : ""}
-            </h2>
-          )}
+          <h2 style={{ textAlign: "left" }}>
+            {
+              weekday[
+                new Date(
+                  convertTime(weatherData.dt, weatherData.timezone).input
+                ).getUTCDay()
+              ]
+            }
+            ,{" "}
+            {systemUsed == "metric"
+              ? convertTime(weatherData.dt, weatherData.timezone)[0].split(
+                  ":"
+                )[0]
+              : timeToAMPM(
+                  convertTime(weatherData.dt, weatherData.timezone)[0]
+                ).split(":")[0]}
+            :00{" "}
+            {systemUsed == "imperial"
+              ? isPM(convertTime(weatherData.dt, weatherData.timezone)[0])
+              : ""}
+          </h2>
+
           <input
             type="text"
             className={styles.searchInput}
@@ -168,152 +167,153 @@ export default function Home() {
           />
         </div>
 
-        {weatherData && (
-          <div className={styles.statsBox}>
-            <div className={styles.statsCard}>
-              <p>Humidity</p>
-              <div className={styles.statsCardContent}>
-                <Image
-                  alt="weatherIcon"
-                  src={`/icons/025-humidity.png`}
-                  height="100px"
-                  width="100px"
-                />
-                <div>
-                  <h1>{weatherData.main.humidity}</h1>
-                  <p>%</p>
-                </div>
-              </div>
-            </div>
-            <div className={styles.statsCard}>
-              <p>Wind speed</p>
-              <div className={styles.statsCardContent}>
-                <Image
-                  alt="weatherIcon"
-                  src={`/icons/017-wind.png`}
-                  height="100px"
-                  width="100px"
-                />
-                <div>
-                  <h1>
-                    {systemUsed == "metric"
-                      ? weatherData.wind.speed
-                      : mpsToMph(weatherData.wind.speed)}
-                  </h1>
-                  <p>{systemUsed == "metric" ? "m/s" : "m/h"}</p>
-                </div>
-              </div>
-            </div>
-            <div className={styles.statsCard}>
-              <p>Wind direction</p>
-              <div className={styles.statsCardContent}>
-                <Image
-                  alt="weatherIcon"
-                  src={`/icons/014-compass.png`}
-                  height="100px"
-                  width="100px"
-                />
-                <div>
-                  <h1>{degToCompass(weatherData.wind.deg)}</h1>
-                </div>
-              </div>
-            </div>
-            <div className={styles.statsCard}>
-              <p>Visibility</p>
-              <div className={styles.statsCardContent}>
-                <Image
-                  alt="weatherIcon"
-                  src={`/icons/binocular.png`}
-                  height="100px"
-                  width="100px"
-                />
-                <div>
-                  <h1>
-                    {systemUsed == "metric"
-                      ? (weatherData.visibility / 1000).toPrecision(2)
-                      : kmToM(weatherData.visibility / 1000)}
-                  </h1>
-                  <p>{systemUsed == "metric" ? "km" : "miles"}</p>
-                </div>
-              </div>
-            </div>
-            <div className={styles.statsCard}>
-              <p>Sunrise</p>
-              <div className={styles.statsCardContent}>
-                <Image
-                  alt="weatherIcon"
-                  src={`/icons/040-sunrise.png`}
-                  height="100px"
-                  width="100px"
-                />
-                <div>
-                  <h1>
-                    {systemUsed == "metric"
-                      ? convertTime(
-                          weatherData.sys.sunrise,
-                          weatherData.timezone
-                        )[0]
-                      : timeToAMPM(
-                          convertTime(
-                            weatherData.sys.sunrise,
-                            weatherData.timezone
-                          )[0]
-                        )}
-                  </h1>
-                  <p>
-                    {systemUsed == "imperial"
-                      ? isPM(
-                          convertTime(
-                            weatherData.sys.sunrise,
-                            weatherData.timezone
-                          )[0]
-                        )
-                      : ""}
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div className={styles.statsCard}>
-              <p>Sunset</p>
-              <div className={styles.statsCardContent}>
-                <Image
-                  alt="weatherIcon"
-                  src={`/icons/041-sunset.png`}
-                  height="100px"
-                  width="100px"
-                />
-                <div>
-                  <h1>
-                    {systemUsed == "metric"
-                      ? convertTime(
-                          weatherData.sys.sunset,
-                          weatherData.timezone
-                        )[0]
-                      : timeToAMPM(
-                          convertTime(
-                            weatherData.sys.sunset,
-                            weatherData.timezone
-                          )[0]
-                        )}
-                  </h1>
-                  <p>
-                    {systemUsed == "imperial"
-                      ? isPM(
-                          convertTime(
-                            weatherData.sys.sunset,
-                            weatherData.timezone
-                          )[0]
-                        )
-                      : ""}
-                  </p>
-                </div>
+        <div className={styles.statsBox}>
+          <div className={styles.statsCard}>
+            <p>Humidity</p>
+            <div className={styles.statsCardContent}>
+              <Image
+                alt="weatherIcon"
+                src={`/icons/025-humidity.png`}
+                height="100px"
+                width="100px"
+              />
+              <div>
+                <h1>{weatherData.main.humidity}</h1>
+                <p>%</p>
               </div>
             </div>
           </div>
-        )}
+          <div className={styles.statsCard}>
+            <p>Wind speed</p>
+            <div className={styles.statsCardContent}>
+              <Image
+                alt="weatherIcon"
+                src={`/icons/017-wind.png`}
+                height="100px"
+                width="100px"
+              />
+              <div>
+                <h1>
+                  {systemUsed == "metric"
+                    ? weatherData.wind.speed
+                    : mpsToMph(weatherData.wind.speed)}
+                </h1>
+                <p>{systemUsed == "metric" ? "m/s" : "m/h"}</p>
+              </div>
+            </div>
+          </div>
+          <div className={styles.statsCard}>
+            <p>Wind direction</p>
+            <div className={styles.statsCardContent}>
+              <Image
+                alt="weatherIcon"
+                src={`/icons/014-compass.png`}
+                height="100px"
+                width="100px"
+              />
+              <div>
+                <h1>{degToCompass(weatherData.wind.deg)}</h1>
+              </div>
+            </div>
+          </div>
+          <div className={styles.statsCard}>
+            <p>Visibility</p>
+            <div className={styles.statsCardContent}>
+              <Image
+                alt="weatherIcon"
+                src={`/icons/binocular.png`}
+                height="100px"
+                width="100px"
+              />
+              <div>
+                <h1>
+                  {systemUsed == "metric"
+                    ? (weatherData.visibility / 1000).toPrecision(2)
+                    : kmToM(weatherData.visibility / 1000)}
+                </h1>
+                <p>{systemUsed == "metric" ? "km" : "miles"}</p>
+              </div>
+            </div>
+          </div>
+          <div className={styles.statsCard}>
+            <p>Sunrise</p>
+            <div className={styles.statsCardContent}>
+              <Image
+                alt="weatherIcon"
+                src={`/icons/040-sunrise.png`}
+                height="100px"
+                width="100px"
+              />
+              <div>
+                <h1>
+                  {systemUsed == "metric"
+                    ? convertTime(
+                        weatherData.sys.sunrise,
+                        weatherData.timezone
+                      )[0]
+                    : timeToAMPM(
+                        convertTime(
+                          weatherData.sys.sunrise,
+                          weatherData.timezone
+                        )[0]
+                      )}
+                </h1>
+                <p>
+                  {systemUsed == "imperial"
+                    ? isPM(
+                        convertTime(
+                          weatherData.sys.sunrise,
+                          weatherData.timezone
+                        )[0]
+                      )
+                    : ""}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className={styles.statsCard}>
+            <p>Sunset</p>
+            <div className={styles.statsCardContent}>
+              <Image
+                alt="weatherIcon"
+                src={`/icons/041-sunset.png`}
+                height="100px"
+                width="100px"
+              />
+              <div>
+                <h1>
+                  {systemUsed == "metric"
+                    ? convertTime(
+                        weatherData.sys.sunset,
+                        weatherData.timezone
+                      )[0]
+                    : timeToAMPM(
+                        convertTime(
+                          weatherData.sys.sunset,
+                          weatherData.timezone
+                        )[0]
+                      )}
+                </h1>
+                <p>
+                  {systemUsed == "imperial"
+                    ? isPM(
+                        convertTime(
+                          weatherData.sys.sunset,
+                          weatherData.timezone
+                        )[0]
+                      )
+                    : ""}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <p onClick={changeSystem}>Metric System</p>
         <p onClick={changeSystem}>Imperial System</p>
       </div>
     </div>
+  ) : (
+    <h1>Loading results</h1>
   );
 }
diff --git a/styles/Home.module.css b/styles/Home.module.css
index 4416912..be91276 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -11,6 +11,10 @@
   margin: 0 20px;
 }
 
+.wrapperHide {
+  display: none;
+}
+
 .weatherWrapper {
   padding: 30px;
 }