diff --git a/COM-2305/Project/api/reservation/post.php b/COM-2305/Project/api/reservation/post.php
index 2e5056b..9dc82ef 100644
--- a/COM-2305/Project/api/reservation/post.php
+++ b/COM-2305/Project/api/reservation/post.php
@@ -2,6 +2,8 @@
 header("Content-Type: application/json; charset=UTF-8");
 header("Access-Control-Allow-Origin: *");
 
+include("../connected.php");
+
 $response = [];
 
 try {
@@ -11,10 +13,8 @@
       exit;
    }
 
-   include("../connected.php");
    include("../../function/reservation/valid-reservation.php");
    include("../../function/reservation/valid-student.php");
-   include("../../function/page.php");
 
    $reservation_date = $_POST['reservation_date'];
    $student_id = $_POST['student_id'];
diff --git a/COM-2305/Project/index.html b/COM-2305/Project/index.html
index a7b366d..a8e8f87 100644
--- a/COM-2305/Project/index.html
+++ b/COM-2305/Project/index.html
@@ -7,6 +7,9 @@
 		<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css" rel="stylesheet" />
 		<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>
 		<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+		<script>
+			const API_BASE_URL = "http://localhost:3000/Project/api";
+		</script>
 		<style>
 			html,
 			body {
@@ -33,265 +36,6 @@
 		<div class="container mx-auto p-4 h-full">
 			<div id="calendar"></div>
 		</div>
-
-		<script>
-			document.addEventListener("DOMContentLoaded", function () {
-				const calendarEl = document.getElementById("calendar");
-				const calendar = new FullCalendar.Calendar(calendarEl, {
-					locale: "th",
-					initialView: "dayGridMonth",
-					selectable: true,
-					selectMirror: true,
-					selectAllow: (selectInfo) => {
-						const day = new Date(selectInfo.start).getDay();
-						return day !== 0 && day !== 6;
-					},
-					events: async (fetchInfo, successCallback, failureCallback) => {
-						try {
-							console.log("Fetching events...");
-							const response = await fetch("http://localhost:3000/Project/api/reservation/get.php?student_id=66143000");
-							console.log("Response:", response);
-							const data = await response.json();
-							console.log("Data:", data);
-							const events = data.flatMap((event) =>
-								[
-									{
-										title: `${event.time_slot_1} ${event.goto_slot_1}`,
-										start: event.reservation_date,
-										end: event.reservation_date,
-										extendedProps: {
-											time_slot_1: event.time_slot_1,
-											goto_slot_1: event.goto_slot_1,
-											time_slot_2: event.time_slot_2,
-											goto_slot_2: event.goto_slot_2,
-										},
-									},
-									event.time_slot_2 && event.goto_slot_2
-										? {
-												title: `${event.time_slot_2} ${event.goto_slot_2}`,
-												start: event.reservation_date,
-												end: event.reservation_date,
-												extendedProps: {
-													time_slot_1: event.time_slot_1,
-													goto_slot_1: event.goto_slot_1,
-													time_slot_2: event.time_slot_2,
-													goto_slot_2: event.goto_slot_2,
-												},
-											}
-										: null,
-								].filter(Boolean),
-							);
-							successCallback(events);
-						} catch (error) {
-							console.error("Error fetching events:", error);
-							failureCallback(error);
-						}
-					},
-					eventClick: async (info) => {
-						const result = await Swal.fire({
-							title: "ต้องการที่จะยกเลิกวันจองทั้งหมดในวันนี้",
-							showCancelButton: true,
-							confirmButtonText: "ยืนยัน",
-							cancelButtonText: "ยกเลิก",
-						});
-						if (result.isConfirmed) {
-							const eventsToRemove = calendar.getEvents().filter((event) => event.startStr === info.event.startStr);
-
-							try {
-								console.log("Deleting event:", info.event);
-								const response = await fetch("http://localhost:3000/Project/api/reservation/delete.php", {
-									method: "POST",
-									headers: {
-										"Content-Type": "application/json",
-									},
-									body: JSON.stringify({
-										reservation_date: info.event.startStr,
-										student_id: "66143000",
-										day_of_week: new Date(info.event.startStr).toLocaleDateString("th-TH", { weekday: "long" }),
-										time_slot_1: info.event.extendedProps.time_slot_1,
-										goto_slot_1: info.event.extendedProps.goto_slot_1,
-										time_slot_2: info.event.extendedProps.time_slot_2,
-										goto_slot_2: info.event.extendedProps.goto_slot_2,
-									}),
-								});
-								console.log("Response:", response);
-								const data = await response.json();
-								console.log("Data:", data);
-
-								if (response.ok) {
-									eventsToRemove.forEach((event) => event.remove());
-									Swal.fire("ลบแล้ว!", "การจองทั้งหมดในวันนี้ถูกลบแล้ว", "success");
-								} else {
-									Swal.fire("ผิดพลาด!", "เกิดข้อผิดพลาดในการลบการจอง", "error");
-								}
-							} catch (error) {
-								console.error("Error deleting event:", error);
-								Swal.fire("ผิดพลาด!", "เกิดข้อผิดพลาดในการลบการจอง", "error");
-							}
-						}
-					},
-					select: async (info) => {
-						const HTML = `
-                  <select class="swal2-select" id="goto_slot_1" required>
-                     <option value="ไปแม่ริม">ไปแม่ริม</option>
-                     <option value="ไปเวียงบัว">ไปเวียงบัว</option>
-                     </select><br/>
-                     <select class="swal2-select" id="time_slot_1" required>
-                       <option value="07:30">07:30</option>
-                       <option value="10:00">10:00</option>
-                       <option value="15:00">15:00</option>
-                       <option value="16:30">16:30</option>
-                       <option value="17:45">17:45</option>
-                     </select><br/>
-                     <select class="swal2-select" id="goto_slot_2">
-                       <option value="">-</option>
-                       <option value="ไปแม่ริม">ไปแม่ริม</option>
-                       <option value="ไปเวียงบัว">ไปเวียงบัว</option>
-                     </select><br/>
-                     <select class="swal2-select" id="time_slot_2">
-                       <option value="">-</option>
-                       <option value="07:30">07:30</option>
-                       <option value="10:00">10:00</option>
-                       <option value="15:00">15:00</option>
-                       <option value="16:30">16:30</option>
-                       <option value="17:45">17:45</option>
-                     </select><br/>
-                  `;
-
-						const result = await Swal.fire({
-							title: "",
-							html: HTML,
-							focusConfirm: false,
-							preConfirm: () => [
-								document.getElementById("time_slot_1").value,
-								document.getElementById("goto_slot_1").value,
-								document.getElementById("time_slot_2").value,
-								document.getElementById("goto_slot_2").value,
-							],
-						});
-
-						function existingEvents(startDate) {
-							const existingEvents = calendar.getEvents().filter((event) => event.startStr === startDate);
-
-							existingEvents.forEach((event) => event.remove());
-						}
-
-						if (result.isConfirmed) {
-							const [time_slot_1, goto_slot_1, time_slot_2, goto_slot_2] = result.value;
-							const startDate = info.startStr;
-							const endDate = info.endStr;
-							const dayOfWeek = new Date(startDate).toLocaleDateString("th-TH", { weekday: "long" });
-
-							existingEvents(startDate);
-
-							if (startDate === endDate) {
-								const day = new Date(startDate).getDay();
-								if (day !== 0 && day !== 6) {
-									addEvent(calendar, startDate, time_slot_1, goto_slot_1, time_slot_2, goto_slot_2);
-								}
-							} else {
-								let start = new Date(startDate);
-								const end = new Date(endDate);
-								end.setDate(end.getDate() - 1);
-
-								while (start <= end) {
-									const currentDate = start.toISOString().split("T")[0];
-									const day = new Date(currentDate).getDay();
-									existingEvents(currentDate);
-
-									if (day !== 0 && day !== 6) {
-										addEvent(calendar, currentDate, time_slot_1, goto_slot_1, time_slot_2, goto_slot_2);
-									}
-									start.setDate(start.getDate() + 1);
-								}
-							}
-
-							const reservations = [];
-							let start = new Date(startDate);
-							const end = new Date(endDate);
-							end.setDate(end.getDate() - 1);
-
-							while (start <= end) {
-								const currentDate = start.toISOString().split("T")[0];
-								const day = new Date(currentDate).getDay();
-
-								if (day !== 0 && day !== 6) {
-									reservations.push({
-										reservation_date: currentDate,
-										status: null,
-										student_id: "66143000",
-										day_of_week: new Date(currentDate).toLocaleDateString("th-TH", { weekday: "long" }),
-										time_slot_1,
-										goto_slot_1,
-										time_slot_2,
-										goto_slot_2,
-									});
-								}
-								start.setDate(start.getDate() + 1);
-							}
-
-							try {
-								console.log("Posting reservations:", reservations);
-								const responses = await Promise.all(
-									reservations.map((reservation) =>
-										fetch("http://localhost:3000/Project/api/reservation/post.php", {
-											method: "POST",
-											headers: {
-												"Content-Type": "application/json",
-											},
-											body: JSON.stringify(reservation),
-										}),
-									),
-								);
-								console.log("Responses:", responses);
-								const data = await Promise.all(responses.map((response) => response.json()));
-								console.log("Data:", data);
-
-								if (responses.every((response) => response.ok)) {
-									Swal.fire("จองแล้ว!", "", "success");
-								} else {
-									Swal.fire("ผิดพลาด!", "เกิดข้อผิดพลาดในการจองรถ", "error");
-								}
-							} catch (error) {
-								console.error("Error posting reservations:", error);
-								Swal.fire("ผิดพลาด!", "เกิดข้อผิดพลาดในการจองรถ", "error");
-							}
-						}
-						calendar.unselect();
-					},
-				});
-				calendar.render();
-			});
-
-			function addEvent(calendar, date, time_slot_1, goto_slot_1, time_slot_2, goto_slot_2) {
-				calendar.addEvent({
-					title: `${time_slot_1} ${goto_slot_1}`,
-					start: date,
-					end: date,
-					extendedProps: {
-						time_slot_1,
-						goto_slot_1,
-						time_slot_2,
-						goto_slot_2,
-					},
-					allDay: true,
-				});
-
-				if (time_slot_2 && goto_slot_2) {
-					calendar.addEvent({
-						title: `${time_slot_2} ${goto_slot_2}`,
-						start: date,
-						end: date,
-						extendedProps: {
-							time_slot_1,
-							goto_slot_1,
-							time_slot_2,
-							goto_slot_2,
-						},
-						allDay: true,
-					});
-				}
-			}
-		</script>
+		<script type="module" src="./script/calendar.js"></script>
 	</body>
 </html>
diff --git a/COM-2305/Project/script/alerts.js b/COM-2305/Project/script/alerts.js
new file mode 100644
index 0000000..44cde17
--- /dev/null
+++ b/COM-2305/Project/script/alerts.js
@@ -0,0 +1,62 @@
+/* eslint-disable no-undef */
+/* eslint-disable no-unused-vars */
+
+async function showDeleteConfirmation() {
+	return await Swal.fire({
+		title: "ต้องการที่จะยกเลิกวันจองทั้งหมดในวันนี้",
+		showCancelButton: true,
+		confirmButtonText: "ยืนยัน",
+		cancelButtonText: "ยกเลิก",
+	});
+}
+
+async function showReservationForm() {
+	const HTML = `
+      <select class="swal2-select" id="goto_slot_1" required>
+         <option value="ไปแม่ริม">ไปแม่ริม</option>
+         <option value="ไปเวียงบัว">ไปเวียงบัว</option>
+      </select><br/>
+      <select class="swal2-select" id="time_slot_1" required>
+         <option value="07:30">07:30</option>
+         <option value="10:00">10:00</option>
+         <option value="15:00">15:00</option>
+         <option value="16:30">16:30</option>
+         <option value="17:45">17:45</option>
+      </select><br/>
+      <select class="swal2-select" id="goto_slot_2">
+         <option value="">-</option>
+         <option value="ไปแม่ริม">ไปแม่ริม</option>
+         <option value="ไปเวียงบัว">ไปเวียงบัว</option>
+      </select><br/>
+      <select class="swal2-select" id="time_slot_2">
+         <option value="">-</option>
+         <option value="07:30">07:30</option>
+         <option value="10:00">10:00</option>
+         <option value="15:00">15:00</option>
+         <option value="16:30">16:30</option>
+         <option value="17:45">17:45</option>
+      </select><br/>
+   `;
+
+	return await Swal.fire({
+		title: "",
+		html: HTML,
+		focusConfirm: false,
+		preConfirm: () => [
+			document.getElementById("time_slot_1").value,
+			document.getElementById("goto_slot_1").value,
+			document.getElementById("time_slot_2").value,
+			document.getElementById("goto_slot_2").value,
+		],
+	});
+}
+
+function showSuccessMessage(title, text) {
+	Swal.fire(title, text, "success");
+}
+
+function showErrorMessage(title, text) {
+	Swal.fire(title, text, "error");
+}
+
+export { showDeleteConfirmation, showErrorMessage, showReservationForm, showSuccessMessage };
diff --git a/COM-2305/Project/script/calendar.js b/COM-2305/Project/script/calendar.js
new file mode 100644
index 0000000..faaeeea
--- /dev/null
+++ b/COM-2305/Project/script/calendar.js
@@ -0,0 +1,25 @@
+/* eslint-disable no-undef */
+import { handleEventClick, handleSelect } from "./events.js";
+import { fetchEvents } from "./fetch.js";
+
+let calendar;
+
+document.addEventListener("DOMContentLoaded", function () {
+	const calendarEl = document.getElementById("calendar");
+	calendar = new FullCalendar.Calendar(calendarEl, {
+		locale: "th",
+		initialView: "dayGridMonth",
+		selectable: true,
+		selectMirror: true,
+		selectAllow: (selectInfo) => {
+			const day = new Date(selectInfo.start).getDay();
+			return day !== 0 && day !== 6;
+		},
+		events: fetchEvents,
+		eventClick: handleEventClick,
+		select: handleSelect,
+	});
+	calendar.render();
+});
+
+export { calendar };
diff --git a/COM-2305/Project/script/events.js b/COM-2305/Project/script/events.js
new file mode 100644
index 0000000..3fed6c6
--- /dev/null
+++ b/COM-2305/Project/script/events.js
@@ -0,0 +1,109 @@
+/* eslint-disable no-undef */
+
+import { showDeleteConfirmation, showErrorMessage, showReservationForm, showSuccessMessage } from "./alerts.js";
+import { calendar } from "./calendar.js";
+import { addEvent, createReservations, existingEvents } from "./utils.js";
+
+async function handleEventClick(info) {
+	const result = await showDeleteConfirmation();
+	if (result.isConfirmed) {
+		const eventsToRemove = calendar.getEvents().filter((event) => event.startStr === info.event.startStr);
+
+		try {
+			console.log("Deleting event:", info.event);
+			const response = await fetch(`${API_BASE_URL}/reservation/delete.php`, {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({
+					reservation_date: info.event.startStr,
+					student_id: "66143000",
+					day_of_week: new Date(info.event.startStr).toLocaleDateString("th-TH", { weekday: "long" }),
+					time_slot_1: info.event.extendedProps.time_slot_1,
+					goto_slot_1: info.event.extendedProps.goto_slot_1,
+					time_slot_2: info.event.extendedProps.time_slot_2,
+					goto_slot_2: info.event.extendedProps.goto_slot_2,
+				}),
+			});
+			console.log("Response:", response);
+			const data = await response.json();
+			console.log("Data:", data);
+
+			if (response.ok) {
+				eventsToRemove.forEach((event) => event.remove());
+				showSuccessMessage("ลบแล้ว!", "การจองทั้งหมดในวันนี้ถูกลบแล้ว");
+			} else {
+				showErrorMessage("ผิดพลาด!", "เกิดข้อผิดพลาดในการลบการจอง");
+			}
+		} catch (error) {
+			console.error("Error deleting event:", error);
+			showErrorMessage("ผิดพลาด!", "เกิดข้อผิดพลาดในการลบการจอง");
+		}
+	}
+}
+
+async function handleSelect(info) {
+	const result = await showReservationForm();
+	if (result.isConfirmed) {
+		const [time_slot_1, goto_slot_1, time_slot_2, goto_slot_2] = result.value;
+		const startDate = info.startStr;
+		const endDate = info.endStr;
+
+		existingEvents(calendar, startDate);
+
+		if (startDate === endDate) {
+			const day = new Date(startDate).getDay();
+			if (day !== 0 && day !== 6) {
+				addEvent(calendar, startDate, time_slot_1, goto_slot_1, time_slot_2, goto_slot_2);
+			}
+		} else {
+			let start = new Date(startDate);
+			const end = new Date(endDate);
+			end.setDate(end.getDate() - 1);
+
+			while (start <= end) {
+				const currentDate = start.toISOString().split("T")[0];
+				const day = new Date(currentDate).getDay();
+				existingEvents(calendar, currentDate);
+
+				if (day !== 0 && day !== 6) {
+					addEvent(calendar, currentDate, time_slot_1, goto_slot_1, time_slot_2, goto_slot_2);
+				}
+				start.setDate(start.getDate() + 1);
+			}
+		}
+
+		const reservations = createReservations(startDate, endDate, time_slot_1, goto_slot_1, time_slot_2, goto_slot_2);
+
+		try {
+			console.log("Posting reservations:", reservations);
+			const responses = await Promise.all(
+				reservations.map((reservation) =>
+					fetch(`${API_BASE_URL}/reservation/post.php`, {
+						method: "POST",
+						headers: {
+							"Content-Type": "application/json",
+						},
+						body: JSON.stringify(reservation),
+					}),
+				),
+			);
+			console.log("Responses:", responses);
+			const data = await Promise.all(responses.map((response) => response.json()));
+			console.log("Data:", data);
+
+			if (responses.every((response) => response.ok)) {
+				showSuccessMessage("จองแล้ว!", "");
+			} else {
+				showErrorMessage("ผิดพลาด!", "เกิดข้อผิดพลาดในการจองรถ");
+			}
+		} catch (error) {
+			console.error("Error posting reservations:", error);
+			showErrorMessage("ผิดพลาด!", "เกิดข้อผิดพลาดในการจองรถ");
+		}
+	}
+	calendar.unselect();
+}
+
+export { handleEventClick, handleSelect };
diff --git a/COM-2305/Project/script/fetch.js b/COM-2305/Project/script/fetch.js
new file mode 100644
index 0000000..3fc36d7
--- /dev/null
+++ b/COM-2305/Project/script/fetch.js
@@ -0,0 +1,45 @@
+/* eslint-disable no-undef */
+
+async function fetchEvents(fetchInfo, successCallback, failureCallback) {
+	try {
+		console.log("Fetching events...");
+		const response = await fetch(`${API_BASE_URL}/reservation/get.php?student_id=66143000`);
+		console.log("Response:", response);
+		const data = await response.json();
+		console.log("Data:", data);
+		const events = data.flatMap((event) =>
+			[
+				{
+					title: `${event.time_slot_1} ${event.goto_slot_1}`,
+					start: event.reservation_date,
+					end: event.reservation_date,
+					extendedProps: {
+						time_slot_1: event.time_slot_1,
+						goto_slot_1: event.goto_slot_1,
+						time_slot_2: event.time_slot_2,
+						goto_slot_2: event.goto_slot_2,
+					},
+				},
+				event.time_slot_2 && event.goto_slot_2
+					? {
+							title: `${event.time_slot_2} ${event.goto_slot_2}`,
+							start: event.reservation_date,
+							end: event.reservation_date,
+							extendedProps: {
+								time_slot_1: event.time_slot_1,
+								goto_slot_1: event.goto_slot_1,
+								time_slot_2: event.time_slot_2,
+								goto_slot_2: event.goto_slot_2,
+							},
+						}
+					: null,
+			].filter(Boolean),
+		);
+		successCallback(events);
+	} catch (error) {
+		console.error("Error fetching events:", error);
+		failureCallback(error);
+	}
+}
+
+export { fetchEvents };
diff --git a/COM-2305/Project/script/utils.js b/COM-2305/Project/script/utils.js
new file mode 100644
index 0000000..6632a38
--- /dev/null
+++ b/COM-2305/Project/script/utils.js
@@ -0,0 +1,61 @@
+function addEvent(calendar, date, time_slot_1, goto_slot_1, time_slot_2, goto_slot_2) {
+	calendar.addEvent({
+		title: `${time_slot_1} ${goto_slot_1}`,
+		start: date,
+		end: date,
+		extendedProps: {
+			time_slot_1,
+			goto_slot_1,
+			time_slot_2,
+			goto_slot_2,
+		},
+	});
+	if (time_slot_2 && goto_slot_2) {
+		calendar.addEvent({
+			title: `${time_slot_2} ${goto_slot_2}`,
+			start: date,
+			end: date,
+			extendedProps: {
+				time_slot_1,
+				goto_slot_1,
+				time_slot_2,
+				goto_slot_2,
+			},
+		});
+	}
+}
+
+function createReservations(startDate, endDate, time_slot_1, goto_slot_1, time_slot_2, goto_slot_2) {
+	const reservations = [];
+	let start = new Date(startDate);
+	const end = new Date(endDate);
+	end.setDate(end.getDate() - 1);
+
+	while (start <= end) {
+		const currentDate = start.toISOString().split("T")[0];
+		const day = new Date(currentDate).getDay();
+
+		if (day !== 0 && day !== 6) {
+			reservations.push({
+				reservation_date: currentDate,
+				status: null,
+				student_id: "66143000",
+				day_of_week: new Date(currentDate).toLocaleDateString("th-TH", { weekday: "long" }),
+				time_slot_1,
+				goto_slot_1,
+				time_slot_2,
+				goto_slot_2,
+			});
+		}
+		start.setDate(start.getDate() + 1);
+	}
+
+	return reservations;
+}
+
+function existingEvents(calendar, startDate) {
+	const existingEvents = calendar.getEvents().filter((event) => event.startStr === startDate);
+	existingEvents.forEach((event) => event.remove());
+}
+
+export { addEvent, createReservations, existingEvents };