diff --git a/index.html b/index.html
index e36a1dd..48b8d90 100644
--- a/index.html
+++ b/index.html
@@ -1,473 +1,73 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
-  <meta charset="UTF-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Weather app</title>
-  <link rel="stylesheet" href="css/style.css" />
-  <link rel="stylesheet" href="css/modal.css" />
-  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-  <script src="https://kit.fontawesome.com/f5c8e13b2d.js" crossorigin="anonymous"></script>
-</head>
-
-<body>
-  <!-- || LOCATION MODAL -->
-  <!-- The Modal -->
-  <div id="generic_modal" class="modal" data-open="open" data-closable="no">
-    <!-- Modal content -->
-    <div class="modal-content dynamic-bg">
-      <!-- close button -->
-      <!-- <span class="close">&times;</span> -->
-
-      <!-- contents inside modal -->
-      <h2>This app uses your current location</h2>
-      <p>
-        This app uses your location to provide better results. Please allow
-        location permission
-        <!-- end of contents inside modal -->
-      </p>
-      <!-- an IIFE is set to invoke the function on button call -->
-      <button class="ok-btn" onclick="(() => {
-            updateCurrentLocation()
-            closeModal(true)
-        })()">
-        Ok
-      </button>
-    </div>
-  </div>
-
-  <!-- || STARTING -->
-  <div class="container">
-    <!--|| MAIN WEATHER REPORT BOX (RIGHT-SIDE) -->
-    <div class="weather-report">
-      <!-- || NAVIGATION BAR -->
-      <nav>
-        <div class="location">
-          <h2 id="city">New Delhi</h2>
-          <h3 id="country">
-            <i class="fa-sharp fa-solid fa-location-dot"></i>India
-          </h3>
-        </div>
-        <div class="search-area">
-          <input type="text" id="search" placeholder="Enter city name..." spellcheck="false" />
-          <button><i class="fa-solid fa-magnifying-glass"></i></button>
-        </div>
-        <div class="hamburger">
-          <span class="bar"></span>
-          <span class="bar"></span>
-          <span class="bar"></span>
-        </div>
-
-        <!-- Dark Mode button -->
-        <div class="dark-mode-toggle">
-          <label class="switch">
-            <input type="checkbox" id="darkModeToggle" />
-            <span class="slider round"></span>
-          </label>
-          <span id="darkModeText">Dark Mode</span>
-        </div>
-      </nav>
-
-      <!-- || CURRENT WEATHER STATUS BOX -->
-      <div class="current-status">
-        <!-- BOX-1  MAIN WEATHER BOX-->
-        <div class="weather weather-box1">
-          <div class="weather-heading">
-            <div class="weather-icon">
-              <i class="fa-solid fa-cloud"></i>
-            </div>
-            <div class="weather-description">
-              <h3>weather</h3>
-              <h4>What's the weather.</h4>
-            </div>
-          </div>
-          <div class="weather-temperature">
-            <div class="temperature">
-              <div class="temp">
-                <h2 id="temp">22</h2>
-                <img src="images/celsius.svg" alt="" />
-              </div>
-              <img id="weather-icon" src="images/clear.png" alt="" />
-            </div>
-            <p id="description">Partly Cloudy</p>
-          </div>
-
-          <div class="weather-details">
-            <div class="box">
-              <p>Pressure</p>
-              <h3 id="pressure">800mb</h3>
-            </div>
-            <div class="box">
-              <p>Visibility</p>
-              <h3 id="visibility">4.3 km</h3>
-            </div>
-
-            <div class="box">
-              <p>Humidity</p>
-              <h3 id="humidity">87%</h3>
-            </div>
-          </div>
-        </div>
-
-        <!--|| Box-2 -->
-        <!-- Sunrise and Sunset-->
-        <div class="weather weather-box2">
-          <div class="more-details">
-            <div class="more-detail-box">
-              <p>Sunrise & Sunset</p>
-              <div class="sunrise-sunset">
-                <div class="sunrise">
-                  <span>🌄</span>
-                  <div class="sunrise-status">
-                    <p>Sunrise</p>
-                    <h3 id="sunrise-time">6:41 AM</h3>
-                  </div>
-                </div>
-                <div class="sunset">
-                  <span>🌆</span>
-                  <div class="sunset-status">
-                    <p>Sunset</p>
-                    <h3 id="sunset-time">5:56 PM</h3>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- and UVI Index  -->
-
-            <div class="more-detail-box uvi-rays-area">
-              <img src="images/clear.png" alt="" />
-              <div class="uvi-mesurement">
-                <div class="uvi-rays-status">
-                  <div id="uvi-rays">20 UVI</div>
-                  <div class="uvi-level">Moderate</div>
-                </div>
-                <div class="uvi-level-desc">
-                  <span class="uvi-level2">Moderate</span> risk of from UV
-                  rays
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- || 24 HOURS WEATHER UPDATES -->
-      <div class="hourly-temperature">
-        <div class="hourly-temperature-heading">
-          <h2>
-            How's the <br />
-            temperature today at?
-          </h2>
-        </div>
-        <div class="today-at">
-          <div class="hours-box">
-            <p class="hours">00:00 AM</p>
-            <img class="hourly-icon" src="images/clear.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
-
-          <div class="hours-box">
-            <p class="hours">01:00 AM</p>
-            <img class="hourly-icon" src="images/clouds.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
-
-          <div class="hours-box">
-            <p class="hours">02:00 AM</p>
-            <img class="hourly-icon" src="images/clouds.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
-
-          <div class="hours-box">
-            <p class="hours">03:00 AM</p>
-            <img class="hourly-icon" src="images/clouds.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
-
-          <div class="hours-box">
-            <p class="hours">04:00 AM</p>
-            <img class="hourly-icon" src="images/clouds.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
-
-          <div class="hours-box">
-            <p class="hours">05:00 AM</p>
-            <img class="hourly-icon" src="images/clouds.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
-
-          <div class="hours-box">
-            <p class="hours">06:00 AM</p>
-            <img class="hourly-icon" src="images/clouds.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
-
-          <div class="hours-box">
-            <p class="hours">07:00 AM</p>
-            <img class="hourly-icon" src="images/clouds.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
-
-          <div class="hours-box">
-            <p class="hours">08:00 AM</p>
-            <img class="hourly-icon" src="images/clouds.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
-
-          <div class="hours-box">
-            <p class="hours">09:00 AM</p>
-            <img class="hourly-icon" src="images/clouds.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
-
-          <div class="hours-box">
-            <p class="hours">10:00 AM</p>
-            <img class="hourly-icon" src="images/clouds.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
-
-          <div class="hours-box">
-            <p class="hours">11:00 AM</p>
-            <img class="hourly-icon" src="images/clouds.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
-
-          <div class="hours-box">
-            <p class="hours">12:00 PM</p>
-            <img class="hourly-icon" src="images/clouds.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
-
-          <div class="hours-box">
-            <p class="hours">01:00 PM</p>
-            <img class="hourly-icon" src="images/clouds.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
-
-          <div class="hours-box">
-            <p class="hours">02:00 PM</p>
-            <img class="hourly-icon" src="images/clouds.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
+    <!-- Meta tags for responsiveness and character encoding -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-          <div class="hours-box">
-            <p class="hours">03:00 PM</p>
-            <img class="hourly-icon" src="images/clouds.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
+    <!-- Page title -->
+    <title>My Project</title>
 
-          <div class="hours-box">
-            <p class="hours">04:00 PM</p>
-            <img class="hourly-icon" src="images/clouds.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
+    <!-- Link to external stylesheets -->
+    <link rel="stylesheet" href="styles.css">
 
-          <div class="hours-box">
-            <p class="hours">05:00 PM</p>
-            <img class="hourly-icon" src="images/clouds.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
-
-          <div class="hours-box">
-            <p class="hours">06:00 PM</p>
-            <img class="hourly-icon" src="images/clouds.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
-
-          <div class="hours-box">
-            <p class="hours">07:00 PM</p>
-            <img class="hourly-icon" src="images/clouds.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
-
-          <div class="hours-box">
-            <p class="hours">08:00 PM</p>
-            <img class="hourly-icon" src="images/clouds.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
-
-          <div class="hours-box">
-            <p class="hours">09:00 PM</p>
-            <img class="hourly-icon" src="images/clouds.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
-
-          <div class="hours-box">
-            <p class="hours">10:00 PM</p>
-            <img class="hourly-icon" src="images/clouds.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
-
-          <div class="hours-box">
-            <p class="hours">11:00 PM</p>
-            <img class="hourly-icon" src="images/clouds.png" alt="" />
-            <p class="hours-temp">21.8 °c</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- || SLIDEBAR -->
-    <div class="slidebar">
-      <!-- Time and Date -->
-      <div class="time-date">
-        <h2 class="time">12:03:40 AM</h2>
-        <p class="date">7 March 2023, Monday</p>
-      </div>
-
-      <div class="aqi-prediction-container">
-        <div class="aqi-prediction">
-        </div>
-        <div class="aqi-prediction-content">
-          <h2 class="aqi-title">Air Quality</h2>
-          <p>Main pollutant : PM 2.5</p>
-          <div class="current-aqi">
-            <div class="aqi-level">
-              <div class="aqi">390</div>
-              <span>AQI</span>
-            </div>
-            <div class="consern-level">Standard</div>
-          </div>
-        </div>
-      </div>
-
-      <!-- || Next 6 Days Weather report -->
-      <div class="weather-prediction">
-        <h3>3 Days Forecast</h3>
-
-        <div class="days-box">
-          <div>
-            <img class="days-icon" src="images/clouds.png" alt="" />
-            <div class="days">
-              <div class="prediction-day">Sunday 10</div>
-              <div class="prediction-desc">Cloudy</div>
-            </div>
-          </div>
-
-          <div class="days-temp">26°c <span>/</span> 19°c</div>
-        </div>
-
-        <div class="days-box">
-          <div>
-            <img class="days-icon" src="images/clouds.png" alt="" />
-            <div class="days">
-              <div class="prediction-day">Sunday 10</div>
-              <div class="prediction-desc">Cloudy</div>
-            </div>
-          </div>
-
-          <div class="days-temp">26°c <span>/</span> 19°c</div>
-        </div>
-
-        <div class="days-box">
-          <div>
-            <img class="days-icon" src="images/clouds.png" alt="" />
-            <div class="days">
-              <div class="prediction-day">Sunday 10</div>
-              <div class="prediction-desc">Cloudy</div>
-            </div>
-          </div>
-
-          <div class="days-temp">26°c <span>/</span> 19°c</div>
+    <!-- Optional: link to external fonts or icons -->
+</head>
+<body>
+    <!-- Header Section -->
+    <header>
+        <!-- Site logo or branding -->
+        <div class="logo">
+            <h1>Project Name</h1>
         </div>
-
-        <!-- <div class="days-box">
-                    <div>
-                        <img class="days-icon" src="images/clouds.png" alt="">
-                        <div class="days">
-                            <div class="prediction-day">Sunday 10</div>
-                            <div class="prediction-desc">Cloudy</div>
-
-                        </div>
-                    </div>
-
-                    <div class="days-temp">26°c <span>/</span> 19°c</div>
-                </div>
-
-                <div class="days-box">
-                    <div>
-                        <img class="days-icon" src="images/clouds.png" alt="">
-                        <div class="days">
-                            <div class="prediction-day">Sunday 10</div>
-                            <div class="prediction-desc">Cloudy</div>
-
-                        </div>
-                    </div>
-
-                    <div class="days-temp">26°c <span>/</span> 19°c</div>
-                </div>
-
-                <div class="days-box">
-                    <div>
-                        <img class="days-icon" src="images/clouds.png" alt="">
-                        <div class="days">
-                            <div class="prediction-day">Sunday 10</div>
-                            <div class="prediction-desc">Cloudy</div>
-
-                        </div>
-                    </div>
-
-                    <div class="days-temp">26°c <span>/</span> 19°c</div>
-                </div> -->
-      </div>
-    </div>
-  </div>
-
-  <!--|| FOOTER -->
-  <!-- <footer>
-        <div class="copyright">Copyrights <span style="font-size: 16px;">&copy;</span> <span id="copyright">2023</span></div>
-    </footer> -->
-
-  <div class="s-footer">
-    <footer class="footer">
-      <div class="waves">
-        <div class="wave" id="wave1"></div>
-        <div class="wave" id="wave2"></div>
-        <div class="wave" id="wave3"></div>
-        <div class="wave" id="wave4"></div>
-      </div>
-
-      <ul class="social-icon">
-        <li class="social-icon__item">
-          <a class="social-icon__link" href="https://www.facebook.com/">
-            <ion-icon name="logo-facebook"></ion-icon>
-          </a>
-        </li>
-        <li class="social-icon__item">
-          <a class="social-icon__link" href="https://github.com/devjainofficial/">
-            <ion-icon name="logo-github"></ion-icon>
-          </a>
-        </li>
-        <li class="social-icon__item">
-          <a class="social-icon__link" href="https://www.linkedin.com/in/devjainofficial/">
-            <ion-icon name="logo-linkedin"></ion-icon>
-          </a>
-        </li>
-        <li class="social-icon__item">
-          <a class="social-icon__link" href="https://www.instagram.com/devjain_official">
-            <ion-icon name="logo-instagram"></ion-icon>
-          </a>
-        </li>
-      </ul>
-      <h3>Weather App</h3>
-      <p>Copyrights &copy; 2024</p>
+        <!-- Navigation menu -->
+        <nav>
+            <ul>
+                <li><a href="#home">Home</a></li>
+                <li><a href="#about">About</a></li>
+                <li><a href="#contact">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <!-- Main Content Section -->
+    <main>
+        <!-- Hero / Introduction Section -->
+        <section id="home">
+            <h2>Welcome to Our Project</h2>
+            <p>Brief introduction or tagline goes here.</p>
+        </section>
+
+        <!-- About Section -->
+        <section id="about">
+            <h2>About Us</h2>
+            <p>Information about the project, team, or purpose.</p>
+        </section>
+
+        <!-- Contact Section -->
+        <section id="contact">
+            <h2>Contact Us</h2>
+            <form>
+                <label for="name">Name:</label>
+                <input type="text" id="name" name="name" required>
+
+                <label for="email">Email:</label>
+                <input type="email" id="email" name="email" required>
+
+                <label for="message">Message:</label>
+                <textarea id="message" name="message" required></textarea>
+
+                <button type="submit">Send</button>
+            </form>
+        </section>
+    </main>
+
+    <!-- Footer Section -->
+    <footer>
+        <p>&copy; 2025 Project Name. All rights reserved.</p>
     </footer>
-  </div>
 
-  <script src="js/main.js"></script>
-  <script>
-    // We don't need this script if the location is already located.
-    if (!localStorage.getItem('city')) {
-      let script = document.createElement("script");
-      script.src = 'js/modal.js';
-      document.head.appendChild(script);
-    }
-  </script>
-  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
-  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+    <!-- External JavaScript -->
+    <script src="script.js"></script>
 </body>
-
-</html>
\ No newline at end of file
+</html>
