diff --git a/frontend/src/Pages/booking.jsx b/frontend/src/Pages/booking.jsx
index cbcf873..5aaeca4 100644
--- a/frontend/src/Pages/booking.jsx
+++ b/frontend/src/Pages/booking.jsx
@@ -1,16 +1,16 @@
-import React, { useState, useEffect } from 'react';
-import { IoCalendarOutline, IoArrowBack } from 'react-icons/io5';
-import { useNavigate } from 'react-router-dom';
-import axios from 'axios';
-import DatePicker from 'react-datepicker'; // Import DatePicker
-import 'react-datepicker/dist/react-datepicker.css'; // Import default styles
+import React, { useState, useEffect } from "react";
+import { IoCalendarOutline, IoArrowBack } from "react-icons/io5";
+import { useNavigate } from "react-router-dom";
+import axios from "axios";
+import DatePicker from "react-datepicker"; // Import DatePicker
+import "react-datepicker/dist/react-datepicker.css"; // Import default styles
 
 const BookingPage = () => {
   const [station, setStation] = useState("");
   const [selectedStation, setSelectedStation] = useState(null);
   const [date, setDate] = useState(null); // Date initialized as null
   const [services, setServices] = useState([
-    { id: "cloak", name: "Cloak Room Booking", availability: 0 },
+    { id: "cloak", name: "Clock Room Booking", availability: 0 },
     { id: "wheelchair", name: "Wheelchair Booking", availability: 0 },
     { id: "coolie", name: "Coolie Booking", availability: 0 },
   ]);
@@ -47,7 +47,8 @@ const BookingPage = () => {
       const response = await axios.get(
         `http://localhost:3000/station/${stationId}/bookings`
       );
-      const { coolieBookings, wheelchairBookings, cloakroomBookings } = response.data;
+      const { coolieBookings, wheelchairBookings, cloakroomBookings } =
+        response.data;
 
       setServices([
         {
@@ -125,7 +126,7 @@ const BookingPage = () => {
     } catch (error) {
       alert(
         "Failed to complete the booking: " +
-        (error.response?.data?.message || "Unknown error")
+          (error.response?.data?.message || "Unknown error")
       );
     }
   };
@@ -146,7 +147,7 @@ const BookingPage = () => {
     } catch (error) {
       alert(
         "Failed to complete the booking: " +
-        (error.response?.data?.message || "Unknown error")
+          (error.response?.data?.message || "Unknown error")
       );
     }
   };
@@ -165,7 +166,7 @@ const BookingPage = () => {
     } catch (error) {
       alert(
         "Failed to complete the booking: " +
-        (error.response?.data?.message || "Unknown error")
+          (error.response?.data?.message || "Unknown error")
       );
     }
   };
@@ -183,42 +184,47 @@ const BookingPage = () => {
   };
 
   // Render booking form for selected service
+
   const renderBookingForm = () => {
     if (!selectedService) return null;
 
     if (selectedService === "cloak") {
       return (
-        <form onSubmit={handleFormSubmit} className="mt-4">
-          <h2 className="text-xl font-bold">Cloak Room Booking</h2>
-          <label>
-            Number of items:
+        <form onSubmit={handleFormSubmit} className="mt-6">
+          <h2 className="text-2xl font-bold text-blue-600">
+            Cloak Room Booking
+          </h2>
+          <label className="block mt-4">
+            Number of Items:
             <input
               type="number"
               value={formData.items || ""}
-              onChange={(e) => setFormData({ ...formData, items: e.target.value })}
+              onChange={(e) =>
+                setFormData({ ...formData, items: e.target.value })
+              }
               required
-              className="w-full px-4 py-2 mt-2 border border-gray-300 rounded-lg"
+              className="w-full px-4 py-2 mt-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 transition duration-200"
             />
           </label>
-          <label>
+          <label className="block mt-4">
             Start Date:
             <DatePicker
               selected={formData.startDate}
               onChange={(date) => setFormData({ ...formData, startDate: date })}
-              className="w-full px-4 py-2 mt-2 border border-gray-300 rounded-lg"
+              className="w-full px-4 py-2 mt-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 transition duration-200"
             />
           </label>
-          <label>
+          <label className="block mt-4">
             End Date:
             <DatePicker
               selected={formData.endDate}
               onChange={(date) => setFormData({ ...formData, endDate: date })}
-              className="w-full px-4 py-2 mt-2 border border-gray-300 rounded-lg"
+              className="w-full px-4 py-2 mt-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 transition duration-200"
             />
           </label>
           <button
             type="submit"
-            className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-150"
+            className="mt-6 px-5 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200 shadow-md"
           >
             Submit Booking
           </button>
@@ -226,9 +232,9 @@ const BookingPage = () => {
       );
     } else if (selectedService === "coolie") {
       return (
-        <form onSubmit={handleFormSubmit} className="mt-4">
-          <h2 className="text-xl font-bold">Coolie Booking</h2>
-          <label>
+        <form onSubmit={handleFormSubmit} className="mt-6">
+          <h2 className="text-2xl font-bold text-blue-600">Coolie Booking</h2>
+          <label className="block mt-4">
             Pickup Location:
             <input
               type="text"
@@ -237,10 +243,10 @@ const BookingPage = () => {
                 setFormData({ ...formData, pickupLocation: e.target.value })
               }
               required
-              className="w-full px-4 py-2 mt-2 border border-gray-300 rounded-lg"
+              className="w-full px-4 py-2 mt-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 transition duration-200"
             />
           </label>
-          <label>
+          <label className="block mt-4">
             Departure Location:
             <input
               type="text"
@@ -249,20 +255,20 @@ const BookingPage = () => {
                 setFormData({ ...formData, departureLocation: e.target.value })
               }
               required
-              className="w-full px-4 py-2 mt-2 border border-gray-300 rounded-lg"
+              className="w-full px-4 py-2 mt-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 transition duration-200"
             />
           </label>
-          <label>
+          <label className="block mt-4">
             Booking Date:
             <DatePicker
               selected={formData.bookingDate}
               onChange={(date) =>
                 setFormData({ ...formData, bookingDate: date })
               }
-              className="w-full px-4 py-2 mt-2 border border-gray-300 rounded-lg"
+              className="w-full px-4 py-2 mt-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 transition duration-200"
             />
           </label>
-          <label>
+          <label className="block mt-4">
             Booking Time:
             <input
               type="time"
@@ -271,12 +277,12 @@ const BookingPage = () => {
                 setFormData({ ...formData, bookingTime: e.target.value })
               }
               required
-              className="w-full px-4 py-2 mt-2 border border-gray-300 rounded-lg"
+              className="w-full px-4 py-2 mt-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 transition duration-200"
             />
           </label>
           <button
             type="submit"
-            className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-150"
+            className="mt-6 px-5 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200 shadow-md"
           >
             Submit Booking
           </button>
@@ -284,19 +290,21 @@ const BookingPage = () => {
       );
     } else if (selectedService === "wheelchair") {
       return (
-        <form onSubmit={handleFormSubmit} className="mt-4">
-          <h2 className="text-xl font-bold">Wheelchair Booking</h2>
-          <label>
+        <form onSubmit={handleFormSubmit} className="mt-6">
+          <h2 className="text-2xl font-bold text-blue-600">
+            Wheelchair Booking
+          </h2>
+          <label className="block mt-4">
             Booking Date:
             <DatePicker
               selected={formData.bookingDate}
               onChange={(date) =>
                 setFormData({ ...formData, bookingDate: date })
               }
-              className="w-full px-4 py-2 mt-2 border border-gray-300 rounded-lg"
+              className="w-full px-4 py-2 mt-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 transition duration-200"
             />
           </label>
-          <label>
+          <label className="block mt-4">
             Booking Time:
             <input
               type="time"
@@ -305,12 +313,12 @@ const BookingPage = () => {
                 setFormData({ ...formData, bookingTime: e.target.value })
               }
               required
-              className="w-full px-4 py-2 mt-2 border border-gray-300 rounded-lg"
+              className="w-full px-4 py-2 mt-2 border border-teal-300 rounded-lg focus:ring-2 focus:ring-teal-400 transition duration-200"
             />
           </label>
           <button
             type="submit"
-            className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-150"
+            className="mt-6 px-5 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200 shadow-md"
           >
             Submit Booking
           </button>
@@ -320,26 +328,28 @@ const BookingPage = () => {
   };
 
   return (
-    <div className="max-w-2xl mx-auto p-4 bg-gray-100 rounded-lg shadow-md">
+    <div className="max-w-5xl mx-auto p-6 bg-white rounded-lg shadow-lg">
       <button
         onClick={() => navigate(-1)}
-        className="flex items-center mb-4 text-gray-700 hover:text-blue-600 transition duration-200"
+        className="flex items-center mb-6 text-gray-800 hover:text-blue-700 transition duration-200"
       >
         <IoArrowBack className="mr-2" />
         Go Back
       </button>
-      <h1 className="text-2xl font-bold mb-4">Booking Page</h1>
+      <h1 className="text-3xl font-bold mb-6 text-gray-800">Booking Page</h1>
 
-      <div className="mb-4">
-        <label className="block text-gray-700">Search for a Station</label>
+      <div className="mb-6">
+        <label className="block text-gray-700 font-medium">
+          Search for a Station
+        </label>
         <input
           type="text"
           value={station}
           onChange={handleStationInputChange}
           placeholder="Type to search..."
-          className="w-full px-4 py-2 border border-gray-300 rounded-lg"
+          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-400 transition duration-200"
         />
-        {noResults && <p className="text-red-600">No results found.</p>}
+        {noResults && <p className="text-red-600 mt-2">No results found.</p>}
       </div>
 
       {stationSuggestions.length > 0 && (
@@ -348,7 +358,7 @@ const BookingPage = () => {
             <li
               key={suggestion._id}
               onClick={() => handleStationSelect(suggestion)}
-              className="p-2 cursor-pointer hover:bg-gray-100"
+              className="p-3 cursor-pointer hover:bg-gray-100 transition duration-150"
             >
               {suggestion.name}
             </li>
@@ -358,7 +368,7 @@ const BookingPage = () => {
 
       {loading && <p className="text-blue-600">Loading services...</p>}
 
-      <div className="flex flex-wrap justify-between mt-4">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
         {services.map((service) => (
           <div
             key={service.id}
@@ -375,12 +385,14 @@ const BookingPage = () => {
               )}
               <p className="mt-1">Available: {service.availability}</p>
             </div>
-            <button
-              onClick={() => handleBookNow(service.id)}
-              className="mt-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-150"
-            >
-              Book Now
-            </button>
+            <div className="flex justify-center">
+              <button
+                onClick={() => handleBookNow(service.id)}
+                className="mt-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-150"
+              >
+                Book Now
+              </button>
+            </div>
           </div>
         ))}
       </div>