Index: frontend/src/Components/UserPanel/HotelReservationListing.js
===================================================================
--- frontend/src/Components/UserPanel/HotelReservationListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/UserPanel/HotelReservationListing.js	(revision 07f4e8b52fa18ab7781f9660c09d7982d8cd5a0b)
@@ -12,5 +12,6 @@
 import data from "bootstrap/js/src/dom/data";
 import {AiOutlinePlusCircle} from "react-icons/ai";
-import {MdOutlineRateReview} from "react-icons/md";
+import { MdCancel } from "react-icons/md";
+import { MdOutlineRateReview } from "react-icons/md"
 import useFormData from "../Hooks/useFormData";
 import useCreate from "../Hooks/useCreate";
@@ -26,4 +27,5 @@
 
     console.log(props.data)
+    const { createEntity } = useCreate();
     const dateFormatter = (str) => {
         const inputDate = new Date(str);
@@ -114,4 +116,18 @@
                         <h3>Вкупна цена: <br></br>{props.data.transportRoute.price}$</h3>
                     </Col>}
+                {(!props.past) && <Col className="d-flex flex-column justify-content-center align-content-center">
+                    {<Container id={'ocn'} onClick={(e) => {
+                        console.log(e.target)
+                        if (e.target.id === 'icon') {
+                            createEntity(`/restaurant/${props.data.reservationId}/cancel`, props.setChanged, props.setChanged)
+                            window.location.href="/reservations"
+                        }
+                    }}>
+                        <h5 id={'icon'}>Откажи<br/>резервација</h5>
+                        <div className="d-flex justify-content-center align-content-center">
+                            <MdCancel size={50} color="#159895"/></div>
+
+                    </Container>}
+                </Col>}
                 {(props.past) && <Col className="d-flex flex-column justify-content-center align-content-center">
                     {!props.data.reviewed && <Container id={'ocn'} onClick={(e) => {
@@ -132,6 +148,6 @@
             </Row>
         </Container>
-        {props.type === 'hotel' && <HotelReservationModal show={show} handleClose={handleClose} data={props.data}/>}
-        <ReviewModal type={props.type} showReview={showReview} handleCloseReview={handleCloseReview} data={props.data}/>
+        {props.type === 'hotel' && <HotelReservationModal setChanged={props.setChanged} show={show} handleClose={handleClose} data={props.data}/>}
+        <ReviewModal setChanged={props.setChanged} type={props.type} showReview={showReview} handleCloseReview={handleCloseReview} data={props.data}/>
     </>)
 }
Index: frontend/src/Components/UserPanel/HotelReservationModal.js
===================================================================
--- frontend/src/Components/UserPanel/HotelReservationModal.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/UserPanel/HotelReservationModal.js	(revision 07f4e8b52fa18ab7781f9660c09d7982d8cd5a0b)
@@ -5,6 +5,9 @@
 import {TbToolsKitchen2} from "react-icons/tb";
 import React from "react";
+import useCreate from "../Hooks/useCreate";
 
 const HotelReservationModal = (props) => {
+
+    const {createEntity} = useCreate();
 
     const dateFormatter = (str) => {
@@ -17,4 +20,6 @@
             hour12: false,
         };
+
+        console.log(props)
 
         return inputDate.toLocaleString('de-DE', options);
@@ -189,4 +194,11 @@
                         Затвори
                     </Button>
+                    <Button variant="danger" onClick={() => {
+                        createEntity(`/hotel/${props.data.reservationId}/cancel`, props.setChanged)
+                        props.handleClose()
+                    }
+                    }>
+                        Откажи резервација
+                    </Button>
                 </Modal.Footer>
             </Modal>
Index: frontend/src/Components/UserPanel/PastHotelReservations.js
===================================================================
--- frontend/src/Components/UserPanel/PastHotelReservations.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/UserPanel/PastHotelReservations.js	(revision 07f4e8b52fa18ab7781f9660c09d7982d8cd5a0b)
@@ -10,5 +10,5 @@
         <>
             {!isLoading && data.map((res) => {
-                return (<HotelReservationListing past={true} data={res} type={'hotel'}></HotelReservationListing>)
+                return (<HotelReservationListing setChanged={setChanged} past={true} data={res} type={'hotel'}></HotelReservationListing>)
             })}
             {(!isLoading && data.length === 0) && <h3 className={'my-5'}>Нема податоци за одбраните критериуми!</h3>}
Index: frontend/src/Components/UserPanel/PastRestaurantReservations.js
===================================================================
--- frontend/src/Components/UserPanel/PastRestaurantReservations.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/UserPanel/PastRestaurantReservations.js	(revision 07f4e8b52fa18ab7781f9660c09d7982d8cd5a0b)
@@ -11,5 +11,6 @@
         <>
             {!isLoading && data.map((res) => {
-                return (<HotelReservationListing past={true} data={res} type={'restaurant'}></HotelReservationListing>)
+                console.log(res)
+                return (<HotelReservationListing setChanged={setChanged} past={true} data={res} type={'restaurant'}></HotelReservationListing>)
             })}
             {(!isLoading && data.length === 0) && <h3 className={'my-5'}>Нема податоци за одбраните критериуми!</h3>}
Index: frontend/src/Components/UserPanel/PastTransportReservations.js
===================================================================
--- frontend/src/Components/UserPanel/PastTransportReservations.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/UserPanel/PastTransportReservations.js	(revision 07f4e8b52fa18ab7781f9660c09d7982d8cd5a0b)
@@ -10,5 +10,5 @@
         <>
             {!isLoading && data.map((res) => {
-                return (<HotelReservationListing past={true} data={res} type={'transport'}></HotelReservationListing>)
+                return (<HotelReservationListing setChanged={setChanged} past={true} data={res} type={'transport'}></HotelReservationListing>)
             })}
 
Index: frontend/src/Components/UserPanel/ReviewModal.js
===================================================================
--- frontend/src/Components/UserPanel/ReviewModal.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/UserPanel/ReviewModal.js	(revision 07f4e8b52fa18ab7781f9660c09d7982d8cd5a0b)
@@ -10,4 +10,5 @@
         description: "",
     }
+    console.log(props)
 
     const {createEntity} = useCreate();
@@ -80,16 +81,19 @@
                                 ...formData,
                                 hotelId: props.data.hotelId,
-                                userId: 1
+                                userId: 1,
+                                reservationId: props.data.reservationId
                             } :
                             props.type === 'restaurant' ? {
-                                    ...formData,
-                                    restaurantId: props.data.restaurantId,
-                                    userId: 1
-                                } : {
+                                ...formData,
+                                restaurantId: props.data.restaurantId,
+                                userId: 1,
+                                reservationId: props.data.reservationId
+                            } : {
                                 ...formData,
                                 transportId: props.data.transportId,
-                                userId: 1
+                                userId: 1,
+                                reservationId: props.data.reservationId
                             }
-                                createEntity('/review/add', dataToPost)
+                        createEntity('/review/add', dataToPost, props.setChanged)
                         setFormData(dummy)
                         props.handleCloseReview()
