diff --git a/index.html b/index.html
index 71149fb..9211027 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,95 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Propacity</title>
+    <title>Weather App - Propacity</title>
     <link rel="shortcut icon" href="./src/assets/icons/logo.png" type="image/x-icon">
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f0f0f0; /* Light gray background */
+        }
+        h1 {
+            text-align: center;
+        }
+        #weather {
+            margin: 20px auto;
+            padding: 15px;
+            background: white;
+            border-radius: 5px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            max-width: 400px; /* Limit width */
+            text-align: center; /* Center text in weather div */
+        }
+        button {
+            display: block;
+            margin: 20px auto;
+            padding: 10px 15px;
+            background-color: #007BFF; /* Bootstrap primary color */
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+        }
+        button:hover {
+            background-color: #0056b3; /* Darker shade on hover */
+        }
+    </style>
+</head>
+<body>
+    <div id="root">
+        <h1>Weather App</h1>
+        <div id="weather">Loading weather data...</div>
+        <button id="current-location">Get Weather at Current Location</button>
+    </div>
+    <script type="module">
+        async function fetchWeather(lat, lon) {
+            const apiKey = 'YOUR_API_KEY'; // Replace with your actual API key
+            const response = await fetch(`https://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${lat},${lon}`);
+            const data = await response.json();
+
+            if (response.ok) {
+                document.getElementById('weather').innerHTML = `
+                    <h2>Weather in ${data.location.name}</h2>
+                    <p>Temperature: ${data.current.temp_c}°C</p>
+                    <p>Condition: ${data.current.condition.text}</p>
+                `;
+            } else {
+                document.getElementById('weather').innerHTML = `
+                    <p>Error: ${data.error.message}</p>
+                `;
+            }
+        }
+
+        function getLocation() {
+            if (navigator.geolocation) {
+                navigator.geolocation.getCurrentPosition(
+                    position => {
+                        const lat = position.coords.latitude;
+                        const lon = position.coords.longitude;
+                        fetchWeather(lat, lon);
+                    },
+                    error => {
+                        console.error('Error getting location:', error);
+                        document.getElementById('weather').innerHTML = '<p>Unable to retrieve your location.</p>';
+                    }
+                );
+            } else {
+                document.getElementById('weather').innerHTML = '<p>Geolocation is not supported by this browser.</p>';
+            }
+        }
+
+        window.onload = () => {
+            getLocation(); // Automatically fetch location on load
+        };
+
+        document.getElementById('current-location').addEventListener('click', getLocation); // Button for manual location retrieval
+    </script>
+</body>
 </html>
+
