diff --git a/public/booking.css b/public/booking.css
new file mode 100644
index 0000000000000000000000000000000000000000..6c515f8f1c4231e6b9f325d73beecbb60370b042
--- /dev/null
+++ b/public/booking.css
@@ -0,0 +1,74 @@
+/* styles.css */
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ margin: 0;
+ padding: 0;
+}
+
+.container {
+ width: 80%;
+ margin: 0 auto;
+ padding-top: 30px;
+}
+
+h1 {
+ text-align: center;
+}
+
+.tour-list {
+ background-color: #fff;
+ padding: 20px;
+ margin-bottom: 20px;
+ border-radius: 5px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.tour-list ul {
+ list-style: none;
+ padding: 0;
+}
+
+.tour-list li {
+ margin: 10px 0;
+ padding: 10px;
+ background-color: #f9f9f9;
+ border-radius: 5px;
+ border: 1px solid #ddd;
+}
+
+.booking-form {
+ background-color: #fff;
+ padding: 20px;
+ border-radius: 5px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.booking-form form {
+ display: flex;
+ flex-direction: column;
+}
+
+.booking-form label {
+ margin-bottom: 5px;
+}
+
+.booking-form input {
+ padding: 8px;
+ margin-bottom: 15px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+}
+
+.booking-form button {
+ background-color: #4CAF50;
+ color: white;
+ border: none;
+ padding: 10px;
+ cursor: pointer;
+ border-radius: 5px;
+}
+
+.booking-form button:hover {
+ background-color: #45a049;
+}
diff --git a/routes/tourRoutes.js b/routes/tourRoutes.js
index 2aeadb7156d686d67ab20168bb7b022741e7730d..c1d6cf175b9780117bb1fc57d3d81d62a2cc021a 100644
--- a/routes/tourRoutes.js
+++ b/routes/tourRoutes.js
@@ -34,7 +34,7 @@ router.post('/edit-profile', tourController.updateProfile);// อัปเดต
//จองทัวร์
router.get('/my-bookings', tourController.getUserBookings);
-router.post('/create', tourController.createBooking);
+router.post('/createbooking', tourController.createBooking);
router.post('/cancel/:id', tourController.cancelBooking);
module.exports = router;
diff --git a/views/booking.ejs b/views/booking.ejs
new file mode 100644
index 0000000000000000000000000000000000000000..9ac28eca99b76eeacbfc2ae5e3fd77cfc1631fda
--- /dev/null
+++ b/views/booking.ejs
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Book a Tour</title>
+ <link rel="stylesheet" href="/css/booking.css">
+</head>
+<body>
+ <div class="container">
+ <h1>Tour Booking</h1>
+
+ <!-- แสดงรายการทัวร์ -->
+ <div class="tour-list">
+ <h2>Available Tours</h2>
+ <ul>
+ <% tours.forEach(function(tour) { %>
+ <li>
+ <strong><%= tour.name %></strong><br>
+ <%= tour.description %><br>
+ Price: <%= tour.price %> USD<br>
+ Duration: <%= tour.duration %> days<br>
+ <a href="/book/<%= tour.id %>">Book this Tour</a>
+ </li>
+ <% }); %>
+ </ul>
+ </div>
+
+ <!-- ช่องกรอกข้อมูลจอง -->
+ <div class="booking-form">
+ <h2>Book a Tour</h2>
+ <form action="/api/create-booking" method="POST">
+ <label for="tour-id">Tour ID</label>
+ <input type="number" id="tour-id" name="tour-id" required>
+
+ <button type="submit">Book Now</button>
+ </form>
+ </div>
+ </div>
+
+</body>
+</html>
diff --git a/views/myBookings.ejs b/views/my-bookings.ejs
similarity index 100%
rename from views/myBookings.ejs
rename to views/my-bookings.ejs