Index: my-react-app/src/App.js
===================================================================
--- my-react-app/src/App.js	(revision 2518b3a6aa84204d9520a068dae1a3b3234ea5f6)
+++ my-react-app/src/App.js	(revision c44c5ed5e6f206917070aabdd543528bf7d6b922)
@@ -19,4 +19,6 @@
 import ReservationHistory from "./components/ReservationHistory";
 import AuthContent from "./components/AuthContent";
+import MenuList from "./components/MenuList";
+import ReadOnlyMenuList from "./components/ReadOnlyMenuList";
 
 const ProtectedRoute = ({ element, isAuthenticated }) => {
@@ -326,25 +328,33 @@
                         <div key={restaurant.id} className="card mb-3">
                             <div className="card-body">
-                                <RestaurantInfo key={restaurant.id} restaurant={restaurant}/>
-                                {/*<p>Available time slots</p>*/}
-                                <div className="d-flex flex-wrap">
-                                    {restaurant.tablesList && restaurant.tablesList.length > 0 ? (
+                                <div className="row">
+                                    {/* Narrow left column: info and actions */}
+                                    <div className="col-md-4">
+                                        <RestaurantInfo key={restaurant.id} restaurant={restaurant}/>
                                         <div className="d-flex flex-wrap">
-                                            {renderTimeSlots(restaurant.tablesList, restaurant)}
+                                            {restaurant.tablesList && restaurant.tablesList.length > 0 ? (
+                                                renderTimeSlots(restaurant.tablesList, restaurant)
+                                            ) : (
+                                                <p>No tables available for reservations at this restaurant</p>
+                                            )}
                                         </div>
-                                    ) : (
-                                        <p>No tables available for reservations at this restaurant</p>
-                                    )}
+                                        <button
+                                            className="btn btn-secondary mt-3"
+                                            onClick={() => handleGoToRestaurant(restaurant.restaurantId)}
+                                        >
+                                            Go to Restaurant
+                                        </button>
+                                    </div>
+
+                                    {/* Wide right column: menu */}
+                                    <div className="col-md-8">
+                                        <ReadOnlyMenuList restaurantId={restaurant.restaurantId}/>
+                                    </div>
                                 </div>
-                                <button
-                                    className="btn btn-secondary"
-                                    onClick={() => handleGoToRestaurant(restaurant.restaurantId)}
-                                >
-                                    Go to Restaurant
-                                </button>
                             </div>
                         </div>
                     ))}
                 </div>
+
 
                 {showCuisineSearch && (
Index: my-react-app/src/components/MenuList.js
===================================================================
--- my-react-app/src/components/MenuList.js	(revision 2518b3a6aa84204d9520a068dae1a3b3234ea5f6)
+++ my-react-app/src/components/MenuList.js	(revision c44c5ed5e6f206917070aabdd543528bf7d6b922)
@@ -58,5 +58,5 @@
     return (
         <div className="container mt-4">
-            <h3 className="text-center">Menu</h3>
+            {menuItems.length > 0 && <h3 className="text-center">Menu</h3>}
             <div className="row">
                 {menuItems.map((item) => (
Index: my-react-app/src/components/ReadOnlyMenuList.js
===================================================================
--- my-react-app/src/components/ReadOnlyMenuList.js	(revision c44c5ed5e6f206917070aabdd543528bf7d6b922)
+++ my-react-app/src/components/ReadOnlyMenuList.js	(revision c44c5ed5e6f206917070aabdd543528bf7d6b922)
@@ -0,0 +1,77 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+const ITEMS_PER_PAGE = 6;
+
+const ReadOnlyMenuList = ({ restaurantId }) => {
+    const [menuItems, setMenuItems] = useState([]);
+    const [currentPage, setCurrentPage] = useState(1);
+
+    useEffect(() => {
+        const fetchMenu = async () => {
+            try {
+                const response = await axios.get(`http://localhost:8081/api/restaurant-menu/${restaurantId}`);
+                setMenuItems(response.data);
+                setCurrentPage(1); // Reset to first page on restaurant change
+            } catch (err) {
+                console.error('Failed to fetch menu:', err);
+            }
+        };
+
+        if (restaurantId) {
+            fetchMenu();
+        }
+    }, [restaurantId]);
+
+    const indexOfLastItem = currentPage * ITEMS_PER_PAGE;
+    const indexOfFirstItem = indexOfLastItem - ITEMS_PER_PAGE;
+    const currentItems = menuItems.slice(indexOfFirstItem, indexOfLastItem);
+    const totalPages = Math.ceil(menuItems.length / ITEMS_PER_PAGE);
+
+    const handlePageChange = (pageNumber) => {
+        setCurrentPage(pageNumber);
+    };
+
+    return (
+        <div className="container mt-4">
+            {menuItems.length > 0 && <h3 className="text-center">Menu</h3>}
+            <div className="row">
+                {currentItems.map((item) => (
+                    <div key={item.menuID} className="col-md-6 mb-4">
+                        <div className="card h-100 shadow-sm">
+                            <div className="card-body d-flex flex-column">
+                                <h5 className="card-title">{item.itemName}</h5>
+                                <p className="card-text">{item.description}</p>
+                                <h6 className="card-subtitle mb-2 text-muted">${item.price.toFixed(2)}</h6>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            {totalPages > 1 && (
+                <nav className="d-flex justify-content-center">
+                    <ul className="pagination">
+                        {Array.from({ length: totalPages }, (_, index) => (
+                            <li
+                                key={index + 1}
+                                className={`page-item ${currentPage === index + 1 ? 'active' : ''}`}
+                            >
+                                <button
+                                    type="button"
+                                    className="page-link"
+                                    onClick={() => handlePageChange(index + 1)}
+                                >
+                                    {index + 1}
+                                </button>
+                            </li>
+                        ))}
+                    </ul>
+                </nav>
+            )}
+        </div>
+    );
+};
+
+export default ReadOnlyMenuList;
Index: my-react-app/src/components/ReservationHistory.js
===================================================================
--- my-react-app/src/components/ReservationHistory.js	(revision 2518b3a6aa84204d9520a068dae1a3b3234ea5f6)
+++ my-react-app/src/components/ReservationHistory.js	(revision c44c5ed5e6f206917070aabdd543528bf7d6b922)
@@ -1,9 +1,12 @@
 import React, { useEffect, useState } from "react";
-import {jwtDecode} from "jwt-decode";
+import { jwtDecode } from "jwt-decode";
 import axios from "axios";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.bundle.min';
 
 const ReservationHistory = () => {
     const [reservations, setReservations] = useState([]);
     const [filteredReservations, setFilteredReservations] = useState([]);
+    const [selectedReservation, setSelectedReservation] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -14,5 +17,4 @@
     const [statusFilter, setStatusFilter] = useState("");
     const [cancellationReasonFilter, setCancellationReasonFilter] = useState("");
-
     const [startDate, setStartDate] = useState("");
     const [endDate, setEndDate] = useState("");
@@ -113,4 +115,16 @@
     if (error) return <div className="alert alert-danger">{error}</div>;
 
+    const formatDateTime = (dateString) => {
+        if (!dateString) return "N/A";
+        const date = new Date(dateString);
+        return date.toLocaleString("en-GB", {
+            day: "2-digit",
+            month: "short",
+            year: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+        });
+    };
+
     return (
         <div className="container mt-5">
@@ -140,5 +154,4 @@
                         type="date"
                         className="form-control"
-                        placeholder="Start date"
                         value={startDate}
                         onChange={(e) => setStartDate(e.target.value)}
@@ -147,5 +160,4 @@
                         type="date"
                         className="form-control"
-                        placeholder="End date"
                         value={endDate}
                         onChange={(e) => setEndDate(e.target.value)}
@@ -156,5 +168,5 @@
                         type="number"
                         className="form-control"
-                        placeholder="Filter by Party Size"
+                        placeholder="Party Size"
                         value={partySizeFilter}
                         onChange={(e) => setPartySizeFilter(e.target.value)}
@@ -167,5 +179,5 @@
                         className="form-control"
                     >
-                        <option value="">Filter by status</option>
+                        <option value="">Filter by Status</option>
                         <option value="successful">Successful</option>
                         <option value="canceled">Canceled</option>
@@ -176,5 +188,5 @@
                         type="text"
                         className="form-control"
-                        placeholder="Filter by Cancellation Reason"
+                        placeholder="Cancellation Reason"
                         value={cancellationReasonFilter}
                         onChange={(e) => setCancellationReasonFilter(e.target.value)}
@@ -198,5 +210,6 @@
                         <th>Restaurant</th>
                         <th>Table</th>
-                        <th>Date & Time</th>
+                        <th>Check In Date</th>
+                        <th>Reserved on</th>
                         <th>Party Size</th>
                         <th>Special Requests</th>
@@ -208,8 +221,9 @@
                     {filteredReservations.length > 0 ? (
                         filteredReservations.map((res, index) => (
-                            <tr key={res.id}>
+                            <tr key={res.id} onClick={() => setSelectedReservation(res)} style={{ cursor: "pointer" }}>
                                 <td>{index + 1}</td>
                                 <td>{res.restaurant?.name || "N/A"}</td>
                                 <td>{res.table?.id || "N/A"}</td>
+                                <td>{formatDateTime(res.checkInDate)}</td>
                                 <td>{new Date(res.reservationDateTime).toLocaleString()}</td>
                                 <td>{res.partySize}</td>
@@ -221,5 +235,5 @@
                     ) : (
                         <tr>
-                            <td colSpan="8" className="text-center">No reservations found.</td>
+                            <td colSpan="9" className="text-center">No reservations found.</td>
                         </tr>
                     )}
@@ -227,4 +241,52 @@
                 </table>
             </div>
+
+            {/* Modal for reservation details */}
+            {selectedReservation && (
+                <div className="modal fade show d-block" tabIndex="-1" style={{ backgroundColor: "rgba(0,0,0,0.5)" }} onClick={() => setSelectedReservation(null)}>
+                    <div className="modal-dialog modal-lg" onClick={(e) => e.stopPropagation()}>
+                        <div className="modal-content">
+                            <div className="modal-header">
+                                <h5 className="modal-title">Reservation Details</h5>
+                                <button type="button" className="btn-close" onClick={() => setSelectedReservation(null)}></button>
+                            </div>
+                            <div className="modal-body">
+                                <h6>🍽️ Restaurant Info</h6>
+                                <p><strong>Name:</strong> {selectedReservation.restaurant?.name}</p>
+                                <p><strong>Address:</strong> {selectedReservation.restaurant?.address}</p>
+                                <p><strong>Phone:</strong> {selectedReservation.restaurant?.phone}</p>
+                                <p><strong>Rating:</strong> {selectedReservation.restaurant?.rating} ⭐</p>
+                                <p><strong>Cuisine:</strong> {selectedReservation.restaurant?.cuisineType}</p>
+                                <p><strong>Hours:</strong> {selectedReservation.restaurant?.operatingHours}</p>
+                                {selectedReservation.restaurant?.website && (
+                                    <p><strong>Website:</strong> <a href={`https://${selectedReservation.restaurant.website}`} target="_blank" rel="noopener noreferrer">{selectedReservation.restaurant.website}</a></p>
+                                )}
+
+                                <hr />
+
+                                <h6>🪑 Table Info</h6>
+                                <p><strong>Location:</strong> {selectedReservation.table?.location}</p>
+                                <p><strong>Capacity:</strong> {selectedReservation.table?.capacity}</p>
+                                <p><strong>Smoking Area:</strong> {selectedReservation.table?.smokingArea ? "Yes" : "No"}</p>
+                                <p><strong>Description:</strong> {selectedReservation.table?.description}</p>
+                                <p><strong>Reservation Duration:</strong> {selectedReservation.table?.reservationDurationHours} hours</p>
+
+                                <hr />
+
+                                <h6>📋 Reservation Info</h6>
+                                <p><strong>Check-In Date:</strong> {formatDateTime(selectedReservation.checkInDate)}</p>
+                                <p><strong>Reserved on:</strong> {new Date(selectedReservation.reservationDateTime).toLocaleString()}</p>
+                                <p><strong>Party Size:</strong> {selectedReservation.partySize}</p>
+                                <p><strong>Special Requests:</strong> {selectedReservation.specialRequests || "None"}</p>
+                                <p><strong>Status:</strong> {selectedReservation.status}</p>
+                                <p><strong>Cancellation Reason:</strong> {selectedReservation.cancellationReason || "None"}</p>
+                            </div>
+                            <div className="modal-footer">
+                                <button className="btn btn-secondary" onClick={() => setSelectedReservation(null)}>Close</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
         </div>
     );
Index: my-react-app/src/components/RestaurantContext.js
===================================================================
--- my-react-app/src/components/RestaurantContext.js	(revision 2518b3a6aa84204d9520a068dae1a3b3234ea5f6)
+++ my-react-app/src/components/RestaurantContext.js	(revision c44c5ed5e6f206917070aabdd543528bf7d6b922)
@@ -12,5 +12,4 @@
             try {
                 const response = await axios.get('http://localhost:8081/api/restaurants');
-                console.log("Fetched once", response.data);
                 setRestaurants(response.data);
             } catch (error) {
Index: my-react-app/src/components/Restaurants.js
===================================================================
--- my-react-app/src/components/Restaurants.js	(revision 2518b3a6aa84204d9520a068dae1a3b3234ea5f6)
+++ my-react-app/src/components/Restaurants.js	(revision c44c5ed5e6f206917070aabdd543528bf7d6b922)
@@ -26,5 +26,4 @@
     const navigate = useNavigate();
     const restaurantContext = useContext(RestaurantContext);
-    console.log(restaurantContext)
 
     useEffect(() => {
Index: src/main/java/com/example/rezevirajmasa/demo/model/Restaurant.java
===================================================================
--- src/main/java/com/example/rezevirajmasa/demo/model/Restaurant.java	(revision 2518b3a6aa84204d9520a068dae1a3b3234ea5f6)
+++ src/main/java/com/example/rezevirajmasa/demo/model/Restaurant.java	(revision c44c5ed5e6f206917070aabdd543528bf7d6b922)
@@ -158,5 +158,5 @@
         @ManyToOne
         @JoinColumn(name = "restaurant_id")
-        private Restaurant restaurant; // Add this field
+        private Restaurant restaurant;
 
         @Column(name = "reservation_datetime")
@@ -170,10 +170,10 @@
 
         @Column(name = "status")
-        private String status; // Completed, Canceled, etc.
+        private String status;
 
         @Column(name = "cancellation_reason")
         private String cancellationReason;
 
-        @Column(name = "check_in_date") // Add this field
+        @Column(name = "check_in_date")
         private LocalDateTime checkInDate;