diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 8e8a394..7535905 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -15,6 +15,7 @@
         "framer-motion": "^11.11.8",
         "jwt-decode": "^4.0.0",
         "react": "^18.3.1",
+        "react-datepicker": "^7.4.0",
         "react-dom": "^18.3.1",
         "react-icons": "^5.3.0",
         "react-router-dom": "^6.26.2",
@@ -2163,6 +2164,14 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/code-block-writer": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-12.0.0.tgz",
@@ -2348,6 +2357,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
@@ -5213,6 +5231,47 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-datepicker": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-7.4.0.tgz",
+      "integrity": "sha512-vSSok4DTZ9/Os8O4HjZLxh4SZVFU6dQvoCX6mfbNdBqMsBBdzftrvMz0Nb4UUVVbgj9o8PfX84K3/31oPrTqmg==",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.23",
+        "clsx": "^2.1.1",
+        "date-fns": "^3.6.0",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17 || ^18",
+        "react-dom": "^16.9.0 || ^17 || ^18"
+      }
+    },
+    "node_modules/react-datepicker/node_modules/@floating-ui/react": {
+      "version": "0.26.24",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.24.tgz",
+      "integrity": "sha512-2ly0pCkZIGEQUq5H8bBK0XJmc1xIK/RM3tvVzY3GBER7IOD1UgmC2Y2tjj4AuS+TC+vTE1KJv2053290jua0Sw==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.2",
+        "@floating-ui/utils": "^0.2.8",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/react-datepicker/node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 511e6d6..912dd70 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,6 +18,7 @@
     "framer-motion": "^11.11.8",
     "jwt-decode": "^4.0.0",
     "react": "^18.3.1",
+    "react-datepicker": "^7.4.0",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.26.2",
diff --git a/frontend/src/Pages/booking.jsx b/frontend/src/Pages/booking.jsx
index 42a5f26..07b2e46 100644
--- a/frontend/src/Pages/booking.jsx
+++ b/frontend/src/Pages/booking.jsx
@@ -1,11 +1,17 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { IoCalendarOutline } from 'react-icons/io5';
 import { IoArrowBack } from 'react-icons/io5';
 import { useNavigate } from 'react-router-dom';
+import DatePicker from 'react-datepicker'; // Import DatePicker
+import 'react-datepicker/dist/react-datepicker.css'; // Import default styles
 
 const BookingPage = () => {
+  useEffect(() => {
+    document.title = 'Station Saarthi | Booking'; 
+  }, []);
+  
   const [station, setStation] = useState('');
-  const [date, setDate] = useState('');
+  const [date, setDate] = useState(null); // Initial date state
   const navigate = useNavigate();
 
   const services = [
@@ -67,18 +73,25 @@ const BookingPage = () => {
             />
           </div>
 
-          {/* Date input */}
+          {/* Date input with calendar */}
           <div className="mb-6">
             <label className="block text-gray-700 font-semibold mb-2">Date</label>
             <div className="relative">
-              <input
-                type="text"
-                value={date}
-                onChange={(e) => setDate(e.target.value)}
-                placeholder="DD/MM/YY"
+              <DatePicker
+                selected={date}
+                onChange={(date) => setDate(date)} // Update date state
+                dateFormat="dd/MM/yyyy" // Set your desired date format
+                placeholderText="DD/MM/YY"
                 className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
+                popperClassName="z-50" // Adjust z-index of the date picker
+                onClickOutside={() => setDate(null)} // Close calendar on outside click
+              />
+              <IoCalendarOutline 
+                className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer" 
+                size={20} 
+                onClick={() => setDate(new Date())} // Open calendar on icon click
+                onMouseDown={(e) => e.preventDefault()} // Prevent input focus on icon click
               />
-              <IoCalendarOutline className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
             </div>
           </div>