diff --git a/index.html b/index.html
new file mode 100644
index 00000000..41605e73
--- /dev/null
+++ b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Weather App</title>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="style.css" rel="stylesheet">
+</head>
+<body>
+    <div class="container mt-5 center-content">
+        <h1 class="mb-4 text-center">Weather App</h1>
+        <div class="form-group text-center">
+            <input type="text" id="cityInput" class="form-control" placeholder="Enter city name">
+            <button id="searchBtn" class="btn btn-primary mt-2">Search</button>
+        </div>
+        <div id="weatherInfo" class="mt-4"></div>
+        <div id="forecastInfo" class="mt-4"></div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/main.js b/main.js
new file mode 100644
index 00000000..cd2a617a
--- /dev/null
+++ b/main.js
@@ -0,0 +1,54 @@
+$(document).ready(function () {
+  const apiKey = '9a8359cd2576df91c6c91e74bb622c7a';
+  const baseUrl = 'http://api.openweathermap.org/data/2.5';
+  const weatherInfo = $('#weatherInfo');
+  const forecastInfo = $('#forecastInfo');
+  let city = '';
+
+  $('#searchBtn').click(function () {
+      city = $('#cityInput').val().trim();
+      if (city === '') {
+          alert('Please enter a city name');
+          return;
+      }
+
+      fetchCurrentWeather();
+      fetchForecast();
+  });
+
+  function fetchCurrentWeather() {
+    const currentWeatherUrl = `${baseUrl}/weather?q=${city}&appid=${apiKey}&units=imperial`;
+    fetch(currentWeatherUrl)
+        .then(response => response.json())
+        .then(data => {
+            const { name, main, weather } = data;
+            const currentWeatherHtml = `
+                <h2>Current Weather in ${name}</h2>
+                <p>Temperature: ${main.temp}°F</p>
+                <p>Conditions: ${weather[0].description}</p>
+                <img src="http://openweathermap.org/img/wn/${weather[0].icon}.png">
+            `;
+            weatherInfo.html(currentWeatherHtml);
+        })
+}
+
+function fetchForecast() {
+  const forecastUrl = `${baseUrl}/forecast?q=${city}&appid=${apiKey}&units=imperial`;
+  fetch(forecastUrl)
+      .then(response => response.json())
+      .then(data => {
+          const forecast = data.list.filter(item => item.dt_txt.includes('12:00:00'));
+          const forecastHtml = forecast.map(item => `
+              <div class="card mb-2">
+                  <div class="card-body">
+                      <h5 class="card-title">${new Date(item.dt * 1000).toLocaleDateString('en-US', { weekday: 'long' })}</h5>
+                      <p>Temperature: ${item.main.temp}°F</p>
+                      <p>Conditions: ${item.weather[0].description}</p>
+                      <img src="http://openweathermap.org/img/wn/${item.weather[0].icon}.png">
+                  </div>
+              </div>
+          `).join('');
+          forecastInfo.html(`<h2>5-Day Forecast</h2>${forecastHtml}`);
+      })
+}
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..ce741b23
--- /dev/null
+++ b/style.css
@@ -0,0 +1,14 @@
+body {
+    background-color: #f8f9fa;
+}
+
+.center-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#forecastInfo {
+  display: flex;
+  flex-direction: row;
+}
\ No newline at end of file
