diff --git a/index.html b/index.html
index 51cf7bbdf..5dae77c6f 100644
--- a/index.html
+++ b/index.html
@@ -23,6 +23,39 @@
 </head>
 
 <body id="page-top">
+    <div>
+    <h3>Data Sensor Cuaca Kota Cerdas</h3>
+    <p id="cuaca">Memuat data...</p>
+</div>
+<script>
+    // --- GANTI NILAI INI ---
+    const apiKey = 'MASUKKAN_API_KEY_KAMU'; // << HARUS DIGANTI!
+    const city = 'Bandung'; // << GANTI NAMA KOTA ANDA
+    // Konstruksi URL yang BENAR menggunakan Template Literal (backtick: `)
+    const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
+    fetch(apiUrl)
+        .then(response => {
+            if (!response.ok) {
+                // Memberi pesan kesalahan jika API Key/Kota salah
+                throw new Error(`HTTP error! Status: ${response.status}. Cek kembali API Key dan nama kota.`);
+            }
+            return response.json();
+        })
+        .then(data => {
+            // Ambil data yang diperlukan
+            const suhu = data.main.temp;
+            const kelembapan = data.main.humidity;
+            const namaKota = data.name;
+            // Update elemen HTML menggunakan Template Literal yang BENAR
+            document.getElementById("cuaca").innerText =
+                `Lokasi: ${namaKota} | Suhu: ${suhu}°C | Kelembapan: ${kelembapan}%`;
+        })
+        .catch(error => {
+            // Tampilkan pesan kesalahan jika fetch gagal
+            document.getElementById("cuaca").innerText = `Gagal mengambil data. (${error.message})`;
+            console.error(error);
+        });
+</script>
 
     <!-- Page Wrapper -->
     <div id="wrapper">
@@ -756,4 +789,4 @@ <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
