Index: my-react-app/src/App.js
===================================================================
--- my-react-app/src/App.js	(revision c63036ab16a14814936f12df8a962c114af9774b)
+++ my-react-app/src/App.js	(revision 9293100fbbd0319c25843910f90ad85ef3a774ec)
@@ -13,4 +13,5 @@
 import axios from "axios";
 import { CuisineContext } from './components/CuisineContext';
+import RestaurantInfo from "./components/RestaurantInfo";
 
 const App = () => {
@@ -42,9 +43,12 @@
     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);
 
     useEffect(() => {
@@ -112,4 +116,5 @@
                 const dateTime = new Date(Date.UTC(year, month - 1, day, selectedHours, selectedMinutes));
                 formattedDateTime = dateTime.toISOString().slice(0, 16).replace('T', ' ');
+                setFormatedDateTime(formattedDateTime);
             }
         } else {
@@ -139,5 +144,7 @@
             const response = await axios.post('http://localhost:8080/api/search', data);
             const filteredRestaurants = response.data;
+            setFilteredRestaurants(filteredRestaurants);
             console.log(filteredRestaurants);
+            setShowCuisineSearch(false);
             // Handle response accordingly
         } catch (error) {
@@ -150,11 +157,58 @@
         try {
             const response = await axios.post(`http://localhost:8080/api/search/shortcut/${cuisineName}`, cuisineName);
-            // Handle the response as needed
-            console.log(response.data); // Log the response data, for example
+            console.log(response.data);
+            setFilteredRestaurants(response.data)
         } catch (error) {
             console.error('Error searching by cuisine:', error);
-            // Handle errors, such as displaying an error message to the user
-        }
-    };
+        }
+        setShowCuisineSearch(false);
+    };
+
+    const renderTimeSlots = (tablesList, restaurant) => {
+        const [year, month, day] = date.split("-");
+        const [hours, minutes] = selectedTime.split(":");
+        const dateTime = new Date(year, month - 1, day, hours, minutes); // month is zero-based
+
+        let timestamp = dateTime.getTime();
+        if (isNaN(timestamp)) {
+            timestamp = Date.now();
+        }
+
+        let renderedTimeSlots = {}; // Object to store rendered slots for each table capacity
+
+        return tablesList.flatMap(table => {
+            // Render capacity header when encountering a new capacity
+            if (!renderedTimeSlots[table.capacity]) {
+                renderedTimeSlots[table.capacity] = 0;
+                return (
+                    <div key={table.capacity}>
+                        <h3>Table for: {table.capacity}</h3>
+                        {table.timeSlots.map((timeSlot, index) => {
+                            const 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) {
+                                renderedTimeSlots[tableCapacity]++;
+                                const timeSlotDateTime = new Date(timeSlot);
+                                const formattedDateTime = timeSlotDateTime.toLocaleString(); // Format for both date and time
+
+                                return (
+                                    <button key={index} className="btn btn-primary me-2 mb-2" onClick={() => handleTimeSlotClick(table, timeSlot, restaurant)}>
+                                        {formattedDateTime} {/* Display both date and time */}
+                                    </button>
+                                );
+                            } else {
+                                return null; // Render nothing if the condition is not met
+                            }
+                        })}
+                    </div>
+                );
+            } else {
+                // If capacity has been rendered, return null to avoid duplicate rendering
+                return null;
+            }
+        });
+    }
+
 
 
@@ -204,21 +258,34 @@
                     <button className="btn btn-outline-success" type="submit">Search</button>
                 </div>
-                <form>
+
+                <div>
+                    {filteredRestaurants.map((restaurant) => (
+                        <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">
+                                    {renderTimeSlots(restaurant.tablesList.flatMap((table) => table), restaurant)}
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+
+
+                {showCuisineSearch && (
                     <div className="mb-3">
                         <h2 className="display-2">Search by cuisine type</h2>
-                        <ul className="list-group">
-                            {cuisineTypes.map((cuisine, index) => (
-                                <li key={index} className="list-group-item">
-                                    <button type="button" className="btn btn-outline-primary"
-                                            onClick={() => handleSearchByCuisine(cuisine)}>
-                                        {cuisine}
-                                    </button>
-                                </li>
-                            ))}
-                        </ul>
-                    </div>
-                </form>
-
-
+                    <ul className="list-group">
+                        {cuisineTypes.map((cuisine, index) => (
+                            <li key={index} className="list-group-item">
+                                <button type="button" className="btn btn-outline-primary"
+                                        onClick={() => handleSearchByCuisine(cuisine)}>
+                                    {cuisine}
+                                </button>
+                            </li>
+                        ))}
+                    </ul>
+                </div>)}
             </form>
         </div>
Index: src/main/java/com/example/rezevirajmasa/demo/repository/RestaurantRepository.java
===================================================================
--- src/main/java/com/example/rezevirajmasa/demo/repository/RestaurantRepository.java	(revision c63036ab16a14814936f12df8a962c114af9774b)
+++ src/main/java/com/example/rezevirajmasa/demo/repository/RestaurantRepository.java	(revision 9293100fbbd0319c25843910f90ad85ef3a774ec)
@@ -5,9 +5,10 @@
 import org.springframework.data.jpa.repository.JpaRepository;
 import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
 
 import java.util.List;
 
 public interface RestaurantRepository extends JpaRepository<Restaurant, Long> {
-    List<Restaurant> findAllByNameLike(String search);
+    List<Restaurant> findAllByNameLikeIgnoreCase(String search);
     List<Restaurant> findAllByCuisineTypeContaining(String search);
     @Query("SELECT DISTINCT r.cuisineType FROM Restaurant r")
Index: src/main/java/com/example/rezevirajmasa/demo/service/impl/RestaurantServiceImpl.java
===================================================================
--- src/main/java/com/example/rezevirajmasa/demo/service/impl/RestaurantServiceImpl.java	(revision c63036ab16a14814936f12df8a962c114af9774b)
+++ src/main/java/com/example/rezevirajmasa/demo/service/impl/RestaurantServiceImpl.java	(revision 9293100fbbd0319c25843910f90ad85ef3a774ec)
@@ -175,5 +175,5 @@
                     .collect(Collectors.toList());
         } else {
-            List<Restaurant> restaurantList = restaurantRepository.findAllByNameLike(search);
+            List<Restaurant> restaurantList = restaurantRepository.findAllByNameLikeIgnoreCase(search);
             if (restaurantList.isEmpty()) {
                 restaurantList = restaurantRepository.findAllByCuisineTypeContaining(search);