diff --git a/pages/bookings/index.tsx b/pages/bookings/index.tsx
index 5ad51831..58fbe412 100644
--- a/pages/bookings/index.tsx
+++ b/pages/bookings/index.tsx
@@ -3,6 +3,8 @@ import prisma from "../../lib/prisma";
 import { getSession, useSession } from "next-auth/client";
 import Shell from "../../components/Shell";
 import { useRouter } from "next/router";
+import dayjs from "dayjs";
+
 
 export default function Bookings({ bookings }) {
   const [, loading] = useSession();
@@ -37,6 +39,28 @@ export default function Bookings({ bookings }) {
             <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
               <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-sm">
                 <table className="min-w-full divide-y divide-gray-200">
+                  <thead className="bg-gray-50">
+                    <tr>
+                      <th
+                        scope="col"
+                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Person
+                      </th>
+                      <th
+                        scope="col"
+                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Event
+                      </th>
+                      <th
+                        scope="col"
+                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Date
+                      </th>
+                      <th scope="col" className="relative px-6 py-3">
+                        <span className="sr-only">Actions</span>
+                      </th>
+                    </tr>
+                  </thead>
                   <tbody className="bg-white divide-y divide-gray-200">
                     {bookings
                       .filter((booking) => !booking.confirmed && !booking.rejected)
@@ -70,11 +94,14 @@ export default function Bookings({ bookings }) {
                               You and {booking.attendees[0].name}
                             </div>
                           </td>
-                          {/* <td className="px-6 py-4 whitespace-nowrap">
-                          <div className="text-sm text-gray-500">
-                            {dayjs(booking.startTime).format("D MMMM YYYY HH:mm")}
-                          </div>
-                        </td> */}
+                          <td className="px-6 py-4 whitespace-nowrap">
+                            <div className="text-sm text-gray-900">
+                              {dayjs(booking.startTime).format("D MMMM YYYY")}
+                            </div>
+                            <div className="text-sm text-gray-500">
+                              {dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
+                            </div>
+                          </td>                     
                           <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                             {!booking.confirmed && !booking.rejected && (
                               <>
@@ -137,7 +164,7 @@ export async function getServerSideProps(context) {
     },
   });
 
-  const bookings = await prisma.booking.findMany({
+  const b = await prisma.booking.findMany({
     where: {
       userId: user.id,
     },
@@ -149,11 +176,17 @@ export async function getServerSideProps(context) {
       confirmed: true,
       rejected: true,
       id: true,
+      startTime: true,
+      endTime: true,
     },
     orderBy: {
-      startTime: "desc",
+      startTime: "asc",
     },
   });
 
+  const bookings = b.map(booking=>{
+    return ({...booking, startTime:booking.startTime.toISOString(), endTime:booking.endTime.toISOString(),})
+  });
+
   return { props: { bookings } };
 }