diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f1dd4a5
--- /dev/null
+++ b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Room Booking App</title>
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div class="container">
+<h1>Room Booking</h1>
+<form id="booking-form">
+<label>Name:<input type="text" id="name" required></label>
+<label>Email:<input type="email" id="email" required></label>
+<label>Room:<input type="text" id="room" required></label>
+<label>Date:<input type="date" id="date" required></label>
+<label>Start Time:<input type="time" id="start" required></label>
+<label>End Time:<input type="time" id="end" required></label>
+<button type="submit">Book</button>
+</form>
+<h2>Bookings</h2>
+<table id="bookings"></table>
+</div>
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..1793fa2
--- /dev/null
+++ b/script.js
@@ -0,0 +1,37 @@
+const form = document.getElementById('booking-form');
+const table = document.getElementById('bookings');
+
+function loadBookings() {
+  const bookings = JSON.parse(localStorage.getItem('bookings') || '[]');
+  table.innerHTML = '<tr><th>Name</th><th>Email</th><th>Room</th><th>Date</th><th>Start</th><th>End</th><th>Email</th></tr>';
+  bookings.forEach((b, i) => {
+    const row = document.createElement('tr');
+    row.innerHTML = `<td>${b.name}</td><td>${b.email}</td><td>${b.room}</td><td>${b.date}</td><td>${b.start}</td><td>${b.end}</td>`;
+    const emailLink = document.createElement('a');
+    emailLink.href = `mailto:${b.email}?subject=Booking%20Details&body=Room:%20${b.room}%0ADate:%20${b.date}%0AStart:%20${b.start}%0AEnd:%20${b.end}`;
+    emailLink.textContent = 'Send';
+    const cell = document.createElement('td');
+    cell.appendChild(emailLink);
+    row.appendChild(cell);
+    table.appendChild(row);
+  });
+}
+
+form.addEventListener('submit', e => {
+  e.preventDefault();
+  const booking = {
+    name: form.name.value,
+    email: form.email.value,
+    room: form.room.value,
+    date: form.date.value,
+    start: form.start.value,
+    end: form.end.value
+  };
+  const bookings = JSON.parse(localStorage.getItem('bookings') || '[]');
+  bookings.push(booking);
+  localStorage.setItem('bookings', JSON.stringify(bookings));
+  form.reset();
+  loadBookings();
+});
+
+window.addEventListener('load', loadBookings);
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..cece92d
--- /dev/null
+++ b/style.css
@@ -0,0 +1,9 @@
+body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
+.container { max-width: 600px; margin: auto; padding: 20px; }
+form label { display: block; margin-bottom: 10px; }
+#bookings { width: 100%; border-collapse: collapse; margin-top: 20px; }
+#bookings th, #bookings td { border: 1px solid #ccc; padding: 8px; text-align: left; }
+#bookings tr:nth-child(even) { background-color: #f2f2f2; }
+@media (max-width: 600px) {
+  form label { display: flex; flex-direction: column; }
+}
