Index: my-react-app/src/components/Reservations.js
===================================================================
--- my-react-app/src/components/Reservations.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
+++ my-react-app/src/components/Reservations.js	(revision deea3c4a0005ebc66d196fb9a5747758d15a025c)
@@ -20,5 +20,4 @@
                 }
                 const decodedToken = jwtDecode(token);
-                console.log(decodedToken)
                 const userId = decodedToken.iss;
 
@@ -49,49 +48,57 @@
         }
     };
-
-
     return (
         <div className="container">
-            <h2>Reservations</h2>
             <div className="row">
-                {reservations.map(reservation => (
-                    <div key={reservation.reservationID} className="col-md-4 mb-4">
-                        <div className="card">
-                            <div className="card-body">
-                                <div className="card-title">Reservation ID: {reservation.reservationID}</div>
-                                <div className="card-text">Restaurant: {reservation.restaurant.name}</div>
-                                <div className="card-text">Table Number: {reservation.table.id}</div>
-                                {/* Format reservation date and time */}
-                                <div className="card-text">Reservation
-                                    Date: {new Date(reservation.checkInTime).toLocaleDateString('en-US', {
-                                        weekday: 'long',
-                                        year: 'numeric',
-                                        month: 'long',
-                                        day: 'numeric'
-                                    })}</div>
-                                <div className="card-text">Reservation
-                                    Time: {new Date(reservation.checkInTime).toLocaleTimeString('en-US', {
-                                        hour: 'numeric',
-                                        minute: 'numeric',
-                                        hour12: true
-                                    })}</div>
-                                {/* End of formatted date and time */}
-                                <div className="card-text">Party Size: {reservation.partySize}</div>
-                                <div className="card-text text-danger">Special
-                                    Requests: {reservation.specialRequests}</div>
-                                <div className="card-text">Status: {reservation.status}</div>
-                                <div className="card-text text-danger">Grace period of 15 minutes +-</div>
-                                <br/>
-                                <div className="row">
-                                    <div className="col">
-                                        <button className="danger text-bg-warning border-0"
-                                                onClick={() => handleEditReservation(reservation.reservationID)}>Edit
-                                            Reservation
+                {reservations.length === 0 ? (
+                    <div className="text-center mt-5">
+                        <h4>No active reservations</h4>
+                        <p>Looking for a place to dine? Check out our <a href="/restaurants" className="text-primary">restaurants</a>.</p>
+                    </div>
+                ) : (
+                    reservations.map(reservation => (
+                        <div key={reservation.reservationID} className="col-md-4 mb-4">
+                            <div className="card h-100">
+                                <div className="card-body">
+                                    <h5 className="card-title">Reservation ID: {reservation.reservationID}</h5>
+                                    <p className="card-text">Restaurant: {reservation?.restaurant.name || "Not specified"}</p>
+                                    <p className="card-text">Table Number: {reservation?.tableNumber || "Not specified"}</p>
+                                    <p className="card-text">
+                                        Reservation Date: {reservation.checkInTime ?
+                                        new Date(reservation.checkInTime).toLocaleDateString('en-US', {
+                                            weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
+                                        }) :
+                                        "Not specified"}
+                                    </p>
+                                    <p className="card-text">
+                                        Reservation Time: {reservation.checkInTime ?
+                                        new Date(reservation.checkInTime).toLocaleTimeString('en-US', {
+                                            hour: 'numeric', minute: 'numeric', hour12: true
+                                        }) :
+                                        "Not specified"}
+                                    </p>
+                                    <p className="card-text">Reservation made on: {reservation.reservationDateTime ?
+                                        new Date(reservation.reservationDateTime).toLocaleTimeString('en-US', {
+                                            hour: 'numeric', minute: 'numeric', hour12: true
+                                        }) :
+                                        "Not specified"}  {reservation.reservationDateTime ?
+                                        new Date(reservation.reservationDateTime).toLocaleDateString('en-US', {
+                                            weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
+                                        }) :
+                                        "Not specified"} </p>
+                                    <p className="card-text">Party Size: {reservation.partySize || "Not specified"}</p>
+                                    <p className="card-text text-danger">Special Requests: {reservation.specialRequests || "None"}</p>
+                                    <p className="card-text">Status: {reservation.status || "Pending"}</p>
+                                    <p className="card-text text-danger">Grace period of 15 minutes +-</p>
+                                    <div className="d-flex justify-content-between mt-3">
+                                        <button
+                                            className="btn btn-warning"
+                                            onClick={() => handleEditReservation(reservation.reservationID)}>
+                                            Edit Reservation
                                         </button>
-                                    </div>
-                                    <div className="col">
-                                        <button className="danger text-bg-danger border-0"
-                                                onClick={() => handleCancelReservation(reservation.reservationID)}>Cancel
-                                            Reservation
+                                        <button
+                                            className="btn btn-danger"
+                                            onClick={() => handleCancelReservation(reservation.reservationID)}>
+                                            Cancel Reservation
                                         </button>
                                     </div>
@@ -99,12 +106,11 @@
                             </div>
                         </div>
-                    </div>
-                ))}
+                    ))
+                )}
             </div>
         </div>
     );
-    p
-
 };
 
 export default Reservations;
+
