Index: my-react-app/src/App.js
===================================================================
--- my-react-app/src/App.js	(revision 9293100fbbd0319c25843910f90ad85ef3a774ec)
+++ my-react-app/src/App.js	(revision e35d0e9e0264bb56d95cfb26ca9b4204cd9dd260)
@@ -1,3 +1,3 @@
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import {BrowserRouter as Router, Route, Routes, useNavigate} from 'react-router-dom';
 import Customers from './components/Customers';
 import Layout from "./components/Layout";
@@ -39,16 +39,19 @@
 
 const Home = () => {
+    const navigate = useNavigate();
+
     const todayDate = new Date().toISOString().split('T')[0]; // Get today's date in 'YYYY-MM-DD' format
 
     const [date, setDate] = useState(todayDate);
     const [selectedTime, setSelectedTime] = useState('');
-    const [formatedDateTime, setFormatedDateTime] = useState('')
     const [numPeople, setNumPeople] = useState(2);
     const [searchValue, setSearchValue] = useState('');
     const [timeSlots, setTimeSlots] = useState([]);
-
     let [filteredRestaurants, setFilteredRestaurants] = useState([]);
+
     const cuisineTypes = useContext(CuisineContext);
     const [showCuisineSearch, setShowCuisineSearch] = useState(true);
+
+    const [formatedDateTime, setFormatedDateTime] = useState('')
 
     useEffect(() => {
@@ -165,4 +168,16 @@
     };
 
+    const handleTimeSlotClick = (table, timeSlot, restaurant) => {
+        const tableNumber = table.id;
+        const formattedTimeSlot = timeSlot;
+        const restaurantId = restaurant.restaurantId;
+
+        const encodedTableNumber = encodeURI(tableNumber);
+        const encodedTimeSlot = encodeURIComponent(formattedTimeSlot);
+        const encodedRestaurantId = encodeURIComponent(restaurantId);
+
+        navigate(`/reservationConfirmation/${encodedTableNumber}/${encodedTimeSlot}/${encodedRestaurantId}`);
+    }
+
     const renderTimeSlots = (tablesList, restaurant) => {
         const [year, month, day] = date.split("-");
@@ -179,5 +194,5 @@
         return tablesList.flatMap(table => {
             // Render capacity header when encountering a new capacity
-            if (!renderedTimeSlots[table.capacity]) {
+            if (!renderedTimeSlots[table.capacity] && numPeople <= table.capacity) {
                 renderedTimeSlots[table.capacity] = 0;
                 return (
@@ -185,8 +200,9 @@
                         <h3>Table for: {table.capacity}</h3>
                         {table.timeSlots.map((timeSlot, index) => {
-                            const timeSlotTime = new Date(timeSlot).getTime();
+                            let timeSlotTime = new Date(timeSlot).getTime();
+
                             const tableCapacity = table.capacity;
                             // Check if the time slot is after the current time, numPeople is less than or equal to tableCapacity, and limit to 5 slots
-                            if (timeSlotTime > timestamp && numPeople <= tableCapacity && renderedTimeSlots[tableCapacity] < 5) {
+                            if (timeSlotTime >= timestamp && numPeople <= tableCapacity && renderedTimeSlots[tableCapacity] < 5) {
                                 renderedTimeSlots[tableCapacity]++;
                                 const timeSlotDateTime = new Date(timeSlot);
@@ -259,5 +275,5 @@
                 </div>
 
-                <div>
+                <div className="border-0">
                     {filteredRestaurants.map((restaurant) => (
                         <div key={restaurant.id} className="card mb-3">
Index: my-react-app/src/components/ReservationConfirmation.js
===================================================================
--- my-react-app/src/components/ReservationConfirmation.js	(revision 9293100fbbd0319c25843910f90ad85ef3a774ec)
+++ my-react-app/src/components/ReservationConfirmation.js	(revision e35d0e9e0264bb56d95cfb26ca9b4204cd9dd260)
@@ -114,6 +114,9 @@
                                 <button type="submit" className="btn btn-primary">Submit</button>
                             </div>
-                            <div className="col-md-6">
-                                <a href="/restaurants" className="btn btn-primary">Back to Home</a>
+                            <div className="card-footer">
+                                <a href="/restaurants" className="btn btn-primary">Back to Restaurants</a>
+                            </div>
+                            <div className="card-footer">
+                                <a href="/" className="btn btn-primary">Back to Home</a>
                             </div>
                         </form>
Index: src/main/java/com/example/rezevirajmasa/demo/service/RestaurantService.java
===================================================================
--- src/main/java/com/example/rezevirajmasa/demo/service/RestaurantService.java	(revision 9293100fbbd0319c25843910f90ad85ef3a774ec)
+++ src/main/java/com/example/rezevirajmasa/demo/service/RestaurantService.java	(revision e35d0e9e0264bb56d95cfb26ca9b4204cd9dd260)
@@ -16,5 +16,4 @@
     Restaurant updateRestaurant(Long restaurantId, String name, String cuisineType, String address, String phone, String operatingHours, String website, String socialMediaLinks, BigDecimal rating, List<Long> tablesList);
     Restaurant deleteRestaurant(Long restaurantId);
-
     Restaurant findById(Long restaurantId);
     List<Restaurant> listRestaurantBy(String search);