diff --git a/client/src/components/Admin-Bookings/Admin-Bookings.css b/client/src/components/Admin-Bookings/Admin-Bookings.css
deleted file mode 100644
index e69de29..0000000
diff --git a/client/src/components/Admin-Bookings/Admin-Bookings.jsx b/client/src/components/Admin-Bookings/Admin-Bookings.jsx
deleted file mode 100644
index e69de29..0000000
diff --git a/client/src/components/Admin-Bookings/Admin_Booking_Table.jsx b/client/src/components/Admin-Bookings/Admin_Booking_Table.jsx
new file mode 100644
index 0000000..9be9543
--- /dev/null
+++ b/client/src/components/Admin-Bookings/Admin_Booking_Table.jsx
@@ -0,0 +1,153 @@
+import React, { useState } from "react";
+import Booking_Data from "../../helpers/Admin_Booking_Data";
+
+const BookingTable = () => {
+  const [bookedTickets, setBookedTickets] = useState(Booking_Data);
+
+  const [formData, setFormData] = useState({
+    user: "",
+    movie: "",
+    date: "",
+    time: "",
+    category: "Economy",
+    seats: "",
+    status: "Payment Successful",
+  });
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prevData) => ({ ...prevData, [name]: value }));
+  };
+
+  const handleBooking = () => {
+    const newTicket = { ...formData };
+    setBookedTickets((prevTickets) => [...prevTickets, newTicket]);
+    setFormData({
+      user: "",
+      movie: "",
+      date: "",
+      time: "",
+      category: "Economy",
+      seats: "",
+      status: "Payment Successful",
+    });
+  };
+
+  const handleRemove = (index) => {
+    const updatedTickets = [...bookedTickets];
+    updatedTickets.splice(index, 1);
+    setBookedTickets(updatedTickets);
+  };
+
+  return (
+    <div className="booking-container">
+      <div className="booking-table-container">
+        <div className="booking-table">
+          <table>
+            <thead>
+              <tr>
+                <th>User</th>
+                <th>Movie</th>
+                <th>Date</th>
+                <th>Time</th>
+                <th>Category</th>
+                <th>Seats</th>
+                <th>Status</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {bookedTickets.map((ticket, index) => (
+                <tr
+                  key={index}
+                  className={`${
+                    index % 2 === 0 ? "even-row" : "odd-row"
+                  } ${ticket.status.toLowerCase()}`}
+                >
+                  <td>{ticket.user}</td>
+                  <td>{ticket.movie}</td>
+                  <td>{ticket.date}</td>
+                  <td>{ticket.time}</td>
+                  <td>{ticket.category}</td>
+                  <td>{ticket.seats}</td>
+                  <td>{ticket.status}</td>
+                  <td>
+                    <button onClick={() => handleRemove(index)}>Remove</button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="booking-form">
+        <form>
+          <label>User:</label>
+          <input
+            type="text"
+            name="user"
+            value={formData.user}
+            onChange={handleChange}
+          />
+
+          <label>Movie:</label>
+          <input
+            type="text"
+            name="movie"
+            value={formData.movie}
+            onChange={handleChange}
+          />
+
+          <label>Date:</label>
+          <input
+            type="date"
+            name="date"
+            value={formData.date}
+            onChange={handleChange}
+          />
+
+          <label>Time:</label>
+          <input
+            type="time"
+            name="time"
+            value={formData.time}
+            onChange={handleChange}
+          />
+
+          <label>Category:</label>
+          <select
+            name="category"
+            value={formData.category}
+            onChange={handleChange}
+          >
+            <option value="Economy">Economy</option>
+            <option value="Business">Business</option>
+            <option value="First Class">First Class</option>
+          </select>
+
+          <label>Seats:</label>
+          <input
+            type="text"
+            name="seats"
+            value={formData.seats}
+            onChange={handleChange}
+          />
+
+          <label>Status:</label>
+          <select name="status" value={formData.status} onChange={handleChange}>
+            <option value="Payment Successful">Payment Successful</option>
+            <option value="Pending">Pending</option>
+            <option value="Cancel">Cancel</option>
+          </select>
+
+          <button type="button" onClick={handleBooking}>
+            Book a Ticket
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default BookingTable;
diff --git a/client/src/helpers/Admin_Booking_Data.jsx b/client/src/helpers/Admin_Booking_Data.jsx
new file mode 100644
index 0000000..025429f
--- /dev/null
+++ b/client/src/helpers/Admin_Booking_Data.jsx
@@ -0,0 +1,94 @@
+const Booking_Data = [
+  {
+    user: "u_name01",
+    movie: "Avatar",
+    date: "2024-01-01",
+    time: "08.00pm",
+    category: "Economy",
+    seats: "12,13,14",
+    status: "Payment Successful",
+  },
+  {
+    user: "u_name02",
+    movie: "Batman",
+    date: "2024-02-01",
+    time: "05.00pm",
+    category: "First Class",
+    seats: "1,2",
+    status: "Cancel",
+  },
+  {
+    user: "u_name03",
+    movie: "Avatar",
+    date: "2024-01-01",
+    time: "08.00pm",
+    category: "Economy",
+    seats: "18,19",
+    status: "Payment Pending",
+  },
+  {
+    user: "u_name04",
+    movie: "Avatar",
+    date: "2024-01-01",
+    time: "08.00pm",
+    category: "Economy",
+    seats: "30,31",
+    status: "Payment Successful",
+  },
+  {
+    user: "u_name05",
+    movie: "Avatar",
+    date: "2024-01-01",
+    time: "08.00pm",
+    category: "Economy",
+    seats: "24,25",
+    status: "Payment Successful",
+  },
+  {
+    user: "u_name06",
+    movie: "Avatar",
+    date: "2024-01-01",
+    time: "08.00pm",
+    category: "Business",
+    seats: "7,8",
+    status: "Payment Successful",
+  },
+  {
+    user: "u_name07",
+    movie: "Avatar",
+    date: "2024-01-01",
+    time: "08.00pm",
+    category: "First Class",
+    seats: "5",
+    status: "Payment Successful",
+  },
+  {
+    user: "u_name08",
+    movie: "Avatar",
+    date: "2024-01-01",
+    time: "08.00pm",
+    category: "Business",
+    seats: "13",
+    status: "Payment Successful",
+  },
+  {
+    user: "u_name09",
+    movie: "Avatar",
+    date: "2024-01-01",
+    time: "08.00pm",
+    category: "Business",
+    seats: "9,10,11,12,15",
+    status: "Cancel",
+  },
+  {
+    user: "u_name10",
+    movie: "Avatar",
+    date: "2024-01-01",
+    time: "08.00pm",
+    category: "Economy",
+    seats: "20,21",
+    status: "Payment Successful",
+  },
+];
+
+export default Booking_Data;
diff --git a/client/src/index.css b/client/src/index.css
index b73006f..7dcb787 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,4 +1,4 @@
-:root{
+/* :root{
   background-color: #161616;
   color: #D80000;
 }
@@ -6,7 +6,7 @@
 html{
   background-color: #f5f5f5;
   font-family: 'Roboto', sans-serif;
-} 
+}  */
 
 *{
   margin: 0;
@@ -14,8 +14,8 @@ html{
   box-sizing: border-box;
 }
 
-p{
+/* p{
   color: #ffffff;
 
-} 
+}  */
 
diff --git a/client/src/pages/Admin/Admin_Bookings.jsx b/client/src/pages/Admin/Admin_Bookings.jsx
index d25e29a..3616c7d 100644
--- a/client/src/pages/Admin/Admin_Bookings.jsx
+++ b/client/src/pages/Admin/Admin_Bookings.jsx
@@ -1,9 +1,13 @@
-function Admin_Booking() {
+import "./Admin_Bookings.css";
+import React from "react";
+import BookingTable from "../components/Admin-Bookings/Admin_Booking_Table";
+
+const BookingPage = () => {
   return (
-    <div>
-      <h1>bookings</h1>
+    <div className="Admin_Booking_Page">
+      <BookingTable />
     </div>
   );
-}
+};
 
-export default Admin_Booking;
+export default BookingPage;
diff --git a/client/src/pages/Admin/Admin_Layout.css b/client/src/pages/Admin/Admin_Layout.css
index 4c61631..f25661f 100644
--- a/client/src/pages/Admin/Admin_Layout.css
+++ b/client/src/pages/Admin/Admin_Layout.css
@@ -5,6 +5,7 @@
 
 .Header-Section {
     top: 0;
+    left: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -42,6 +43,8 @@
     margin-top: 4rem;
     display: flex;
     flex-direction: row;
+    height: 100vh;
+    width: 100%;
 }
 
 .Left-Side-Navbar {
diff --git a/client/src/pages/Admin_Bookings.css b/client/src/pages/Admin_Bookings.css
new file mode 100644
index 0000000..1ddfd08
--- /dev/null
+++ b/client/src/pages/Admin_Bookings.css
@@ -0,0 +1,112 @@
+/* .Admin_Booking_Page {
+  width: 75vw;
+  height: auto;
+}
+
+.booking-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow-x: auto;
+}
+
+.booking-table-container {
+  width: 100%;
+  margin: 0 auto;
+}
+
+.booking-table {
+  border-collapse: collapse;
+  width: 100%;
+  margin-top: 20px;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.booking-table th,
+.booking-table td {
+  padding: 12px;
+  text-align: center;
+  width: 150px;
+}
+
+.booking-table thead {
+  background-color: #161616;
+  color: white;
+}
+
+.booking-table tbody {
+  background-color: #f9f9f9;
+}
+
+.booking-table tr {
+  border-bottom: 1px solid #ddd;
+}
+
+.booking-table tr:last-child {
+  border-bottom: none;
+}
+
+.booking-table td {
+  padding: 12px;
+}
+
+.booking-table .even-row {
+  background-color: #f8f8f8;
+}
+
+.booking-table .odd-row {
+  background-color: #eeeeee;
+}
+
+.booking-table .success {
+  color: #008000;
+}
+
+.booking-table .pending {
+  color: #000000;
+}
+
+.booking-table .cancel {
+  color: #ff0000;
+}
+
+.booking-form {
+  max-width: 400px;
+  margin: 20px;
+  align-self: flex-start;
+  margin-top: 60px;
+}
+
+.booking-form form {
+  padding: 20px;
+  background: #f4f4f4;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.booking-form label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.booking-form input,
+.booking-form select {
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 16px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+}
+
+.booking-form button {
+  background: #D80000;
+  color: white;
+  padding: 10px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+} */
\ No newline at end of file