Index: my-react-app/src/components/CuisineContext.js
===================================================================
--- my-react-app/src/components/CuisineContext.js	(revision cfc16a3143db2a719a3031cf0cf4bdb718b66d4f)
+++ my-react-app/src/components/CuisineContext.js	(revision cfc16a3143db2a719a3031cf0cf4bdb718b66d4f)
@@ -0,0 +1,26 @@
+import React, { createContext, useState, useEffect } from 'react';
+import axios from 'axios';
+
+export const CuisineContext = createContext();
+
+export const CuisineProvider = ({ children }) => {
+    const [cuisineTypes, setCuisineTypes] = useState([]);
+
+    useEffect(() => {
+        const fetchCuisineTypes = async () => {
+            try {
+                const response = await axios.get('http://localhost:8080/api/cuisineTypes');
+                setCuisineTypes(response.data);
+            } catch (error) {
+                console.error('Error fetching cuisine types:', error);
+            }
+        };
+        fetchCuisineTypes();
+    }, []);
+
+    return (
+        <CuisineContext.Provider value={cuisineTypes}>
+            {children}
+        </CuisineContext.Provider>
+    );
+};
Index: my-react-app/src/components/Customers.js
===================================================================
--- my-react-app/src/components/Customers.js	(revision d24f17cb212e43f94a77a44d655ba10b4b8143d2)
+++ my-react-app/src/components/Customers.js	(revision cfc16a3143db2a719a3031cf0cf4bdb718b66d4f)
@@ -35,8 +35,7 @@
             await axios.delete(`http://localhost:8080/api/customers/delete/${customerId}`);
             setCustomers(customers.filter(customer => customer.customerID !== customerId));
-            alert('Reservation canceled successfully');
+            window.location.reload();
         } catch (error) {
             console.error("Error + " + error);
-            alert("An error occurred while deleting");
         }
     }
Index: my-react-app/src/components/RestaurantCard.js
===================================================================
--- my-react-app/src/components/RestaurantCard.js	(revision cfc16a3143db2a719a3031cf0cf4bdb718b66d4f)
+++ my-react-app/src/components/RestaurantCard.js	(revision cfc16a3143db2a719a3031cf0cf4bdb718b66d4f)
@@ -0,0 +1,22 @@
+import React from 'react';
+import StarRating from './StarRating';
+
+const RestaurantCard = ({ restaurant, onDetailClick }) => {
+    return (
+        <div className="col-md-4 mb-4">
+            <div className="card">
+                <div className="card-body">
+                    <h5 className="card-title">
+                        {restaurant.name} <StarRating rating={restaurant.rating} />
+                    </h5>
+                    <p className="card-text">{restaurant.cuisineType}</p>
+                    <p className="card-text">{restaurant.operatingHours}</p>
+                    <p className="card-text">Ul. {restaurant.address}</p>
+                </div>
+                <button onClick={() => onDetailClick(restaurant.restaurantId)} className="btn btn-primary">View Details</button>
+            </div>
+        </div>
+    );
+};
+
+export default RestaurantCard;
Index: my-react-app/src/components/RestaurantContext.js
===================================================================
--- my-react-app/src/components/RestaurantContext.js	(revision cfc16a3143db2a719a3031cf0cf4bdb718b66d4f)
+++ my-react-app/src/components/RestaurantContext.js	(revision cfc16a3143db2a719a3031cf0cf4bdb718b66d4f)
@@ -0,0 +1,27 @@
+import React, { createContext, useState, useEffect } from 'react';
+import axios from 'axios';
+
+export const RestaurantContext = createContext();
+
+export const RestaurantProvider = ({ children }) => {
+    const [restaurants, setRestaurants] = useState([]);
+
+    useEffect(() => {
+        const fetchRestaurants = async () => {
+            try {
+                const response = await axios.get('http://localhost:8080/api/restaurants');
+                setRestaurants(response.data);
+            } catch (error) {
+                console.error('Error fetching restaurants:', error);
+            }
+        };
+
+        fetchRestaurants();
+    }, []);
+
+    return (
+        <RestaurantContext.Provider value={{ restaurants }}>
+            {children}
+        </RestaurantContext.Provider>
+    );
+};
Index: my-react-app/src/components/Restaurants.js
===================================================================
--- my-react-app/src/components/Restaurants.js	(revision d24f17cb212e43f94a77a44d655ba10b4b8143d2)
+++ my-react-app/src/components/Restaurants.js	(revision cfc16a3143db2a719a3031cf0cf4bdb718b66d4f)
@@ -1,24 +1,16 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
+import React, {useState, useEffect, useContext} from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import StarRating from './StarRating';
 import { useNavigate } from 'react-router-dom';
+import {RestaurantContext} from "./RestaurantContext";
 
 const Restaurants = () => {
     const [restaurants, setRestaurants] = useState([]);
     const navigate = useNavigate();
+    const restaurantContext = useContext(RestaurantContext);
 
     useEffect(() => {
-        const fetchRestaurants = async () => {
-            try {
-                const response = await axios.get('http://localhost:8080/api/restaurants');
-                setRestaurants(response.data);
-            } catch (error) {
-                console.error('Error fetching restaurants:', error);
-            }
-        };
-
-        fetchRestaurants();
-    }, []);
+        setRestaurants(restaurantContext.restaurants);
+    }, [restaurantContext]);
 
     const handleDetailClick = (restaurantId) => {
@@ -98,5 +90,7 @@
                                 </div>
                             </div>
-                            <button onClick={() => handleDetailClick(restaurant.restaurantId)} className="btn btn-primary">View Details</button>
+                            <button onClick={() => handleDetailClick(restaurant.restaurantId)}
+                                    className="btn btn-primary">View Details
+                            </button>
                         </div>
                     </div>
