Index: frontend/src/App.css
===================================================================
--- frontend/src/App.css	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/App.css	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,66 @@
+.App {
+  text-align: center;
+}
+
+
+
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+.ikona {
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.temno {
+  color: #1A5F7A;
+  font-weight: 800;
+  font-size: 1.5rem;
+}
+
+.svetlo {
+  color: #57C5B6;
+  font-weight: 500;
+  font-size: 1.5rem;
+}
+
+.tab-item {
+
+}
+
+.img-link {
+  text-decoration: none;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
Index: frontend/src/App.js
===================================================================
--- frontend/src/App.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/App.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,80 @@
+import logo from './logo.svg';
+import './App.css';
+import Navigation from './Components/Layout/Navbar/Navigation';
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap/dist/js/bootstrap.js';
+import HomeCarousel from './Components/Layout/CarouselHome/Carousel';
+import {Card, Container} from 'react-bootstrap';
+import TabComponent from './Components/Tab/Tab';
+import Offers from './Components/Layout/Offers/Offers';
+import MostVisitedBar from './Components/MostVisited/MostVisitedBar';
+import Review from './Components/BecomeAHost/Review';
+import MostPopularRoutesCont from './Components/MostPopularRoutes/MostPopularRoutesCont';
+import BecomeAHost from "./Components/BecomeAHost/BecomeAHost"
+import HomePage from './Pages/HomePage';
+import LoginPage from './Pages/LoginPage';
+import RegistrationPage from './Pages/RegistrationPage'
+import SearchPage from './Pages/SearchPage';
+import HotelDetailsPage from './Pages/HotelDetailsPage';
+import ProfilePage from './Pages/ProfilePage';
+import ResourcesPage from './Pages/ResourcesPage';
+import LoginForm from './Components/Login/LoginForm';
+import StaticExample from './Components/Modal';
+import TransportDetailsPage from './Pages/TransportDetailsPage';
+import NoBusinessRegisteredError from './Pages/NoBusinessRegisteredError';
+import HotelEditPage from './Pages/HotelEditPage';
+import RestaurantEditPage from './Pages/RestaurantEditPage';
+import TransportEditPage from './Pages/TransportEditPage';
+import RestaurantDetailsPage from './Pages/RestaurantDetailsPage';
+import {BrowserRouter, Route, Routes} from 'react-router-dom';
+import LoginErrorPage from "./Pages/LoginErrorPage";
+import {AuthProvider} from "./Components/Context/AuthContext";
+import PrivateRoute from "./Components/Misc/PrivateRoute";
+import ProfilesManagementPage from "./Pages/ProfilesManagementPage";
+import UserReservationsManagement from "./Pages/UserReservationsManagement";
+
+
+function App() {
+
+    return (
+        <div className="App" style={{overflow: 'hidden'}}>
+            <AuthProvider>
+                <BrowserRouter>
+                    <Routes>
+                        <Route path='/login' element={<LoginPage/>}/>
+                        <Route path='/register' element={<RegistrationPage/>}/>
+                        <Route path='/profile' element={<PrivateRoute><ProfilePage/></PrivateRoute>}/>
+                        <Route path='/profiles' element={<PrivateRoute><ProfilesManagementPage/></PrivateRoute>}/>
+                        <Route path='/reservations' element={<PrivateRoute><UserReservationsManagement/></PrivateRoute>}/>
+                        <Route path="/resources" exact element={<PrivateRoute><NoBusinessRegisteredError
+                            hasRegistration="false"/></PrivateRoute>}/>
+                        <Route path="/resources/hotel"
+                               element={<PrivateRoute><ResourcesPage tab="/hotel"/></PrivateRoute>}/>
+                        <Route path="/resources/hotel/:hotelId" element={<PrivateRoute><HotelEditPage/></PrivateRoute>}/>
+                        <Route path="/resources/restaurant"
+                               element={<PrivateRoute><ResourcesPage tab="/restaurant"/></PrivateRoute>}/>
+                        <Route path='/resources/restaurant/:restaurantId'
+                               element={<PrivateRoute><RestaurantEditPage/></PrivateRoute>}/>
+                        <Route path="/resources/transport"
+                               element={<PrivateRoute><ResourcesPage tab="/transport"/></PrivateRoute>}/>
+                        <Route path="/resources/transport/:transportId"
+                               element={<PrivateRoute><TransportEditPage/></PrivateRoute>}/>
+                        <Route path="/home" element={<HomePage/>}/>
+                        <Route path="/error" element={<LoginErrorPage/>}/>
+                        <Route path='/details/transport' element={<TransportDetailsPage></TransportDetailsPage>}/>
+                        <Route path='/details/hotel' element={<HotelDetailsPage></HotelDetailsPage>}/>
+                        <Route path='/details/restaurant' element={<RestaurantDetailsPage></RestaurantDetailsPage>}/>
+                        <Route path="/search/hotel/:hotelLocation/:dateFrom/:dateTo/:numBeds"
+                               element={<SearchPage type="hotel"/>}/>
+                        <Route path="/search/transport/:from/:to/:date/:numPassengers"
+                               element={<SearchPage type="transport"/>}/>
+                        <Route path="/search/restaurant/:restaurantLocation/:date/:hourFrom/:hourTo/:numPeople"
+                               element={<SearchPage type="restaurant"/>}/>
+                    </Routes>
+                </BrowserRouter>
+            </AuthProvider>
+        </div>
+    );
+}
+
+export default App;
Index: frontend/src/App.test.js
===================================================================
--- frontend/src/App.test.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/App.test.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
Index: frontend/src/Components/AdminPanel/AllProfilesTable.js
===================================================================
--- frontend/src/Components/AdminPanel/AllProfilesTable.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/AdminPanel/AllProfilesTable.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,77 @@
+import useGet from "../Hooks/useGet";
+import {Container} from "react-bootstrap";
+import { FaLock, FaLockOpen } from "react-icons/fa";
+import React from "react";
+import useApprove from "../Hooks/useApprove";
+
+const AllProfilesTable = () => {
+
+    const { data, isLoading, setData, getData, setChanged } = useGet('/user')
+    const { getData: approveProfile} = useApprove()
+
+    !isLoading && console.log(data)
+
+    const dateFormatter = (str) => {
+        const inputDate = new Date(str);
+
+        const options = {
+            year: '2-digit',
+            month: '2-digit',
+            day: '2-digit',
+            hour12: false,
+        };
+
+        return inputDate.toLocaleString('mk-MK', options);
+
+    }
+
+    return (
+        <>
+            <Container fluid >
+                <table className="table table-hover">
+                    <thead>
+                    <tr>
+                        <th scope="col"></th>
+                        <th scope="col">Име и презиме</th>
+                        <th scope="col">Адреса</th>
+                        <th scope="col">Email</th>
+                        <th scope="col">Датум на раѓање</th>
+                        <th scope="col">Контакт телефон</th>
+                        <th>Акции</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {!isLoading && data.map((f, i) => { return <tr key={f.userID}>
+                        <th style={{verticalAlign: "middle"}} scope="row">{i + 1}</th>
+                        <td style={{verticalAlign: "middle"}}>{f.name + ' ' + f.surname}</td>
+                        <td style={{verticalAlign: "middle"}}>{f.address}</td>
+                        <td style={{verticalAlign: "middle"}}>{f.email}</td>
+                        <td style={{verticalAlign: "middle"}}>{dateFormatter(f.birthDate)}</td>
+                        <td style={{verticalAlign: "middle"}}>{f.contact}</td>
+                        <td style={{verticalAlign: "middle"}}>
+                            {f.accountNonLocked &&
+                                <FaLock size={'2.2em'} color={'#159895'} onClick={() => {
+                                    approveProfile('/users/lock/' + f.userID).then(() => {
+                                        setChanged((prev) => {
+                                            return Math.random();
+                                        })
+                                    })
+                                }}/>}
+                            {!f.accountNonLocked &&
+                                <FaLockOpen size={'2.2em'} color={'#159895'} onClick={() => {
+                                    approveProfile('/users/unlock/' + f.userID).then(() => {
+                                        setChanged((prev) => {
+                                            return Math.random();
+                                        })
+                                    })
+                                }}/>}
+                        </td>
+                    </tr>})}
+                    </tbody>
+                </table>
+            </Container>
+        </>
+    )
+}
+
+export default AllProfilesTable;
Index: frontend/src/Components/AdminPanel/UnapprovedBusinessesTable.js
===================================================================
--- frontend/src/Components/AdminPanel/UnapprovedBusinessesTable.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/AdminPanel/UnapprovedBusinessesTable.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,48 @@
+import useGet from "../Hooks/useGet";
+import {Container} from "react-bootstrap";
+import {FaCheckCircle} from "react-icons/fa";
+import React from "react";
+import useApprove from "../Hooks/useApprove";
+
+const UnapprovedBusinessesTable = () => {
+
+    const { data, isLoading, setData, getData, setChanged } = useGet('/business/unapproved');
+    const { getData: approveBusiness} = useApprove();
+
+    return (
+        <>
+            <Container fluid >
+                <table className="table table-hover">
+                    <thead>
+                    <tr>
+                        <th scope="col">Ред. бр.</th>
+                        <th scope="col">Име на фирма</th>
+                        <th scope="col">Адреса</th>
+                        <th scope="col">Даночен број</th>
+                        <th scope="col">Одговорно лице</th>
+                        <th>Одобри</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {!isLoading && data.map((f, i) => { return <tr key={f.businessId}>
+                        <th style={{verticalAlign: "middle"}} scope="row">{i + 1}</th>
+                        <td style={{verticalAlign: "middle"}}>{f.name}</td>
+                        <td style={{verticalAlign: "middle"}}>{f.address}</td>
+                        <td style={{verticalAlign: "middle"}}>{f.edbs}</td>
+                        <td style={{verticalAlign: "middle"}}>{f.user.name + " " + f.user.surname}</td>
+                        <td style={{verticalAlign: "middle"}}><FaCheckCircle size={'2.2em'} color={'#159895'} onClick={() => {
+                            approveBusiness('/business/approve/' + f.businessId).then(() => {
+                                setChanged((prev) => {
+                                    return Math.random();
+                                })
+                            })
+                        }}/></td>
+                    </tr>})}
+                    </tbody>
+                </table>
+            </Container>
+        </>
+    )
+}
+
+export default UnapprovedBusinessesTable;
Index: frontend/src/Components/AdminPanel/UnapprovedProfilesTable.js
===================================================================
--- frontend/src/Components/AdminPanel/UnapprovedProfilesTable.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/AdminPanel/UnapprovedProfilesTable.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,66 @@
+import useGet from "../Hooks/useGet";
+import {Container} from "react-bootstrap";
+import {FaCheckCircle} from "react-icons/fa";
+import React from "react";
+import useApprove from "../Hooks/useApprove";
+
+const UnapprovedProfilesTable = () => {
+
+    const { data, isLoading, setData, getData, setChanged } = useGet('/users/unapproved')
+    const { getData: approveProfile} = useApprove()
+
+    !isLoading && console.log(data)
+
+    const dateFormatter = (str) => {
+        const inputDate = new Date(str);
+
+        const options = {
+            year: '2-digit',
+            month: '2-digit',
+            day: '2-digit',
+            hour12: false,
+        };
+
+        return inputDate.toLocaleString('mk-MK', options);
+
+    }
+
+    return (
+        <>
+            <Container fluid >
+                <table className="table table-hover">
+                    <thead>
+                    <tr>
+                        <th scope="col"></th>
+                        <th scope="col">Име и презиме</th>
+                        <th scope="col">Адреса</th>
+                        <th scope="col">Email</th>
+                        <th scope="col">Датум на раѓање</th>
+                        <th scope="col">Контакт телефон</th>
+                        <th>Одобри</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {!isLoading && data.map((f, i) => { return <tr key={f.userID}>
+                        <th style={{verticalAlign: "middle"}} scope="row">{i + 1}</th>
+                        <td style={{verticalAlign: "middle"}}>{f.name + ' ' + f.surname}</td>
+                        <td style={{verticalAlign: "middle"}}>{f.address}</td>
+                        <td style={{verticalAlign: "middle"}}>{f.email}</td>
+                        <td style={{verticalAlign: "middle"}}>{dateFormatter(f.birthDate)}</td>
+                        <td style={{verticalAlign: "middle"}}>{f.contact}</td>
+                        <td style={{verticalAlign: "middle"}}><FaCheckCircle size={'2.2em'} color={'#159895'} onClick={() => {
+                            approveProfile('/users/approve/' + f.userID).then(() => {
+                                setChanged((prev) => {
+                                    return Math.random();
+                                })
+                            })
+                        }}/></td>
+                    </tr>})}
+                    </tbody>
+                </table>
+            </Container>
+        </>
+    )
+}
+
+export default UnapprovedProfilesTable;
Index: frontend/src/Components/BecomeAHost/BecomeAHost.js
===================================================================
--- frontend/src/Components/BecomeAHost/BecomeAHost.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/BecomeAHost/BecomeAHost.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,30 @@
+import { Button } from "react-bootstrap";
+import { Container } from "react-bootstrap";
+import { HiMagnifyingGlass } from "react-icons/hi2"
+import { AiOutlineInfoCircle } from "react-icons/ai"
+import BecomeAHostOverlay from "./BecomeAHostOverlay";
+import Review from "./Review";
+
+
+function BecomeAHost() {
+    return (
+        <>
+            <Container  className="rounded-5 my-5" style={{padding: "15% 35%", backgroundColor: "#57C5B6", marginTop: "10% !important"}}>
+                <Container fluid="sm" className="rounded-5 mx-auto my-auto py-5" style={{backgroundColor: "#ffffff", zIndex: "999999"}}>
+                    <h2>Регистрирај бизнис!</h2>
+                    <p>
+                        Зголеми ја заработката и отвори нови можности за својот бизнис
+                    </p>
+                    <Button type="button" style={{backgroundColor: "#159895"}} size="lg">
+                        <span className="ikona my-1"><AiOutlineInfoCircle/></span>
+                        <span className="ikona mx-3">Дознај повеќе</span>
+                    </Button>
+                </Container>
+            </Container>
+            <BecomeAHostOverlay>
+            </BecomeAHostOverlay>
+        </>
+    );
+}
+
+export default BecomeAHost;
Index: frontend/src/Components/BecomeAHost/BecomeAHostOverlay.js
===================================================================
--- frontend/src/Components/BecomeAHost/BecomeAHostOverlay.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/BecomeAHost/BecomeAHostOverlay.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,25 @@
+import { Container } from 'react-bootstrap';
+import Review from "./Review";
+
+function BecomeAHostOverlay() {
+    return (
+        <>
+            <Container>
+                <Container style={{position: 'relative', top: '-750px', left: "-550px", zIndex: '1'}}>
+                    <Review/  >
+                </Container>
+                <Container style={{position: 'relative', top: '-600px', left: "650px", zIndex: '1'}}>
+                    <Review/  >
+                </Container>
+                <Container style={{position: 'relative', top: '-1250px', left: "550px", zIndex: '1'}}>
+                    <Review/  >
+                </Container>
+                <Container style={{position: 'relative', top: '-900px', left: "-200px", zIndex: '1'}}>
+                    <Review/>
+                </Container>
+            </Container>
+        </>
+    );
+}
+
+export default BecomeAHostOverlay;
Index: frontend/src/Components/BecomeAHost/Overlay.js
===================================================================
--- frontend/src/Components/BecomeAHost/Overlay.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/BecomeAHost/Overlay.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,13 @@
+import { Container } from 'react-bootstrap';
+
+function BecomeAHostOverlay() {
+    return (
+        <>
+            <Container style={{position: 'relative'}}>
+
+            </Container>
+        </>
+    );
+}
+
+export default BecomeAHostOverlay;
Index: frontend/src/Components/BecomeAHost/Review.js
===================================================================
--- frontend/src/Components/BecomeAHost/Review.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/BecomeAHost/Review.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,46 @@
+import React from "react";
+import { Col, Container, Row, Image } from "react-bootstrap";
+import { AiOutlineStar, AiFillStar } from 'react-icons/ai';
+
+function Review (props) {
+
+    const generateStars = () => {
+        const stars = [];
+        for (let i = 0; i < props.review.numStar; i++) {
+          stars.push(
+            <Col key={i} style={{display: "inline-block"}} className="w-20 px-0">
+              <AiFillStar size="2rem" color="#159895" />
+            </Col>
+          );
+        }
+        for (let i = 0; i < 5 - props.review.numStar; i++) {
+          stars.push(
+            <Col key={i + 3} style={{display: "inline-block"}} className="w-20 px-0">
+              <AiOutlineStar size="2rem" color="#159895" />
+            </Col>
+          );
+        }
+        return stars;
+      }    
+    
+    return (
+        <Container style={{padding: '2em', width: '18em', height: '15em', backgroundColor: 'lightgray', borderRadius: '1rem', position: "aboslute", top: "-410px", left: "-600px"}}>
+            <Row>
+                <Col>
+                    <Image src="https://i.pinimg.com/originals/f1/0f/f7/f10ff70a7155e5ab666bcdd1b45b726d.jpg" width={50} height={50} className="rounded-5"></Image>
+                </Col>
+                <Col className="my-auto">
+                    <span>{props.review.title}</span>
+                </Col>
+            </Row>
+            <Row>
+                <span className="my-3 border">{props.review.description}</span>
+            </Row>
+            <Row className="w-100 mx-auto" style={{maxWidth: "100%"}}>
+                {generateStars()}
+            </Row>
+        </Container>
+    );
+}
+
+export default Review;
Index: frontend/src/Components/Context/AuthContext.js
===================================================================
--- frontend/src/Components/Context/AuthContext.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Context/AuthContext.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,52 @@
+import React, { createContext, useContext, useState, useEffect } from 'react'
+
+const AuthContext = createContext()
+
+const AuthProvider = ({ children }) => {
+    const [user, setUser] = useState(null)
+
+    useEffect(() => {
+        const storedUser = JSON.parse(localStorage.getItem('user'))
+        setUser(storedUser)
+    }, [])
+
+    const getUser = () => {
+        return JSON.parse(localStorage.getItem('user'))
+    }
+
+    const userIsAuthenticated = () => {
+        return localStorage.getItem('user') !== null
+    }
+
+    const userLogin = user => {
+        localStorage.setItem('user', JSON.stringify(user))
+        setUser(user)
+    }
+
+    const userLogout = () => {
+        localStorage.removeItem('user')
+        setUser(null)
+    }
+
+    const contextValue = {
+        user,
+        getUser,
+        userIsAuthenticated,
+        userLogin,
+        userLogout,
+    }
+
+    return (
+        <AuthContext.Provider value={contextValue}>
+            {children}
+        </AuthContext.Provider>
+    )
+}
+
+export default AuthContext
+
+export function useAuth() {
+    return useContext(AuthContext)
+}
+
+export { AuthProvider }
Index: frontend/src/Components/Forms/AddHotelForm.js
===================================================================
--- frontend/src/Components/Forms/AddHotelForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Forms/AddHotelForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,137 @@
+import React from "react";
+import { useRef } from "react";
+import { Form, Button, Container } from "react-bootstrap";
+import { GiConfirmed } from "react-icons/gi";
+import useCreateHotel from "../Hooks/Hotel/useCreateHotel.js";
+import axios from "axios";
+import useFormData from "../Hooks/useFormData.js";
+
+const AddHotelForm = (props) => {
+  const { createHotel } = useCreateHotel();
+
+  console.log(props.hotel)
+
+  const dummy = {
+    hotelName: "",
+    hotelLocation: "",
+    petFriendly: false,
+    parking: false,
+    internetAvailable: false,
+    hotelDescripiton: "",
+    hotelEDBS: "",
+  }
+
+  const edit = props.hotel != null
+
+  console.log(edit)
+
+  const { formData, onFormChange, onCheckBoxChange, setFormData } = useFormData(edit ? props.hotel : dummy);
+
+
+  const { addHotel } = useCreateHotel();
+
+  return (
+    <>
+      <Container
+        className="rounded-5 m-5 my-auto mx-auto py-2 px-5"
+        style={{ backgroundColor: "#ffffff" }}
+      >
+        <Form>
+          <Form.Group className="mb-3" controlId="hotelName">
+            <Form.Label>Име на сместувањето</Form.Label>
+            <Form.Control
+              type="text"
+              name="hotelName"
+              placeholder="Внесете го името на сместувањето"
+              value={formData.hotelName}
+              onChange={onFormChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="hotelDescription">
+            <Form.Label>Опис</Form.Label>
+            <Form.Control
+              as="textarea"
+              name="hotelDescripiton"
+              placeholder="Внесете опис на сместувањето"
+              value={formData.hotelDescripiton}
+              onChange={onFormChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="hotelAddress">
+            <Form.Label>Локација</Form.Label>
+            <Form.Control
+              type="text"
+              name="hotelLocation"
+              placeholder="Внесете ја адресата на сместувањето"
+              value={formData.hotelLocation}
+              onChange={onFormChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="hotelFilters">
+            <Form.Label>Филтри</Form.Label>
+            <Form.Check
+              type="checkbox"
+              label="Паркинг"
+              name="parking"
+              value={formData.parking}
+              onChange={onCheckBoxChange}
+            />
+            <Form.Check
+              type="checkbox"
+              label="Pet friendly"
+              name="petFriendly"
+              value={formData.petFriendly}
+              onChange={onCheckBoxChange}
+            />
+            <Form.Check
+              type="checkbox"
+              name="internetAvailable"
+              label="Интернет"
+              value={formData.internetAvailable}
+              onChange={onCheckBoxChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="hotelPhone">
+            <Form.Label>Контакт телефон</Form.Label>
+            <Form.Control
+              type="text"
+              name="hotelEDBS"
+              placeholder="Внесете контакт телефон"
+              value={formData.hotelEDBS}
+              onChange={onFormChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="my-1 justify-content-center">
+            <Button
+              type="submit"
+              style={{ backgroundColor: "#159895" }}
+              size="md"
+              onClick={(e) => {
+                e.preventDefault();
+                console.log(formData);
+                createHotel(formData, edit);
+                props.refresh((prevState) => {
+                  return prevState + 1;
+                })
+                if(!edit)
+                  props.closeModal()
+              }}
+            >
+              <span className="ikona my-1">
+                <GiConfirmed />
+              </span>
+              <span className="ikona mx-3">Поднеси апликација</span>
+            </Button>
+          </Form.Group>
+        </Form>
+      </Container>
+    </>
+  );
+};
+
+export default AddHotelForm;
Index: frontend/src/Components/Forms/AddItemMenuForm.js
===================================================================
--- frontend/src/Components/Forms/AddItemMenuForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Forms/AddItemMenuForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,92 @@
+import React from "react";
+import { Form, Button, Container } from "react-bootstrap";
+import { GiConfirmed } from "react-icons/gi";
+import useFormData from "../Hooks/useFormData";
+import useCreateMenu from "../Hooks/Restaurant/useCreateMenu"
+
+const AddItemMenuForm = (props) => {
+  const { createMenu } = useCreateMenu();
+
+  const edit = props.menu
+  const dummy =     {
+    name: "",
+    ingredients: "",
+    price: 0,
+  }
+
+  const { formData, onFormChange, onCheckBoxChange, setFormData } = useFormData(
+    // {
+    //   name: "",
+    //   ingredients: "",
+    //   price: 0,
+    // }
+    edit ? props.menu : dummy
+  );
+
+  return (
+    <>
+      <Container
+        className="rounded-5 m-5 my-auto mx-auto py-2 px-5"
+        style={{ backgroundColor: "#ffffff" }}
+      >
+        <Form>
+          <Form.Group className="mb-3" controlId="itemName">
+            <Form.Label>Име на ставката</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder="Внесете го името на ставката "
+              value={formData.name}
+              onChange={onFormChange}
+              name="name"
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="itemIngrediеnts">
+            <Form.Label>Состојки на ставката</Form.Label>
+            <Form.Control
+              type="textarea"
+              placeholder="Внесете ги состојките на ставката"
+              value={formData.ingredients}
+              onChange={onFormChange}
+              name="ingredients"
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="itemPrice">
+            <Form.Label>Цена на ставка</Form.Label>
+            <Form.Control
+              type="number"
+              placeholder="Внесете ја цената на ставката"
+              value={formData.price}
+              onChange={onFormChange}
+              name="price"
+              max={999}
+            />
+          </Form.Group>
+
+          <Form.Group className="my-1 justify-content-center">
+            <Button
+              type="submit"
+              style={{ backgroundColor: "#159895" }}
+              size="md"
+              onClick={(e) => {
+                e.preventDefault();
+                createMenu(props.Id, formData)
+                props.refresh((prevState) => {
+                  return prevState + 1;
+                })
+              }}
+            >
+              <span className="ikona my-1">
+                <GiConfirmed />
+              </span>
+              <span className="ikona mx-3">Поднеси апликација</span>
+            </Button>
+          </Form.Group>
+        </Form>
+      </Container>
+    </>
+  );
+};
+
+export default AddItemMenuForm;
Index: frontend/src/Components/Forms/AddRestaurantForm.js
===================================================================
--- frontend/src/Components/Forms/AddRestaurantForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Forms/AddRestaurantForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,102 @@
+import React, { useEffect } from "react";
+import { Form, Button, Container } from "react-bootstrap";
+import { GiConfirmed } from "react-icons/gi";
+import useCreateRestaurant from "../Hooks/Restaurant/useCreateRestaurant";
+import useFormData from "../Hooks/useFormData";
+import useGet from "../Hooks/useGet";
+
+const AddRestaurantForm = (props) => {
+
+  const { createRestaurant } = useCreateRestaurant();
+  var dummy = {
+    restaurantName: "",
+    restaurantLocation: "",
+    cousineType: "",
+    restaurantDescription: "",
+    restaurantEdbs: "111",
+  }
+
+  const edit = props.restaurant != null
+
+  const { formData, onFormChange, onCheckBoxChange, setFormData } = useFormData(edit ? props.restaurant : dummy);
+
+  console.log(formData)
+
+  return (
+    <>
+      <Container
+        className="rounded-5 m-5 my-auto mx-auto py-2 px-5"
+        style={{ backgroundColor: "#ffffff" }}
+      >
+        <Form>
+          <Form.Group className="mb-3" controlId="restaurantName">
+            <Form.Label>Име на ресторант</Form.Label>
+            <Form.Control
+              type="text"
+              name="restaurantName"
+              placeholder="Внесете го името на ресторантот"
+              value={formData.restaurantName}
+              onChange={onFormChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="restaurantLocation">
+            <Form.Label>Локација на ресторант</Form.Label>
+            <Form.Control
+              type="text"
+              name="restaurantLocation"
+              placeholder="Внесете ја локацијата на ресторантот"
+              value={formData.restaurantLocation}
+              onChange={onFormChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="restaurantDescription">
+            <Form.Label>Опис</Form.Label>
+            <Form.Control
+              as="textarea"
+              name="restaurantDescription"
+              placeholder="Внесете опис на ресторантот"
+              value={formData.restaurantDescription}
+              onChange={onFormChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="restaurantCuisine">
+            <Form.Label>Тип кујна</Form.Label>
+            <Form.Control
+              type="text"
+              name="cousineType"
+              placeholder="Внесете го типот на кујна"
+              value={formData.cousineType}
+              onChange={onFormChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="my-1 justify-content-center">
+            <Button
+              type="submit"
+              style={{ backgroundColor: "#159895" }}
+              size="md"
+              onClick={(e) => {
+                e.preventDefault()
+                createRestaurant(formData, edit);
+                props.refresh((prevState) => {
+                  return prevState + 1;
+                })
+                props.closeModal()
+              }}
+            >
+              <span className="ikona my-1">
+                <GiConfirmed />
+              </span>
+              <span className="ikona mx-3">Поднеси апликација</span>
+            </Button>
+          </Form.Group>
+        </Form>
+      </Container>
+    </>
+  );
+};
+
+export default AddRestaurantForm;
Index: frontend/src/Components/Forms/AddRoomAvailablityForm.js
===================================================================
--- frontend/src/Components/Forms/AddRoomAvailablityForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Forms/AddRoomAvailablityForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,79 @@
+import React from "react";
+import { Form, Button, Container } from "react-bootstrap";
+import { GiConfirmed } from "react-icons/gi";
+import useCreateRoomAvailiability from "../Hooks/Hotel/useCreateRoomAvailability";
+import useFormData from "../Hooks/useFormData";
+
+const AddRoomAvailablityForm = (props) => {
+  
+  const { createRoomAvailability } = useCreateRoomAvailiability(props.hotelRoomId);
+  console.log(props.hotelRoomId)
+  const { formData, onFormChange, onCheckBoxChange, setFormData } = useFormData(
+    {
+      dateFrom: Date.now(),
+      dateTo: Date.now(),
+      numberOfBeds: 0,
+    }
+  );
+
+  return (
+    <>
+      <Container
+        className="rounded-5 m-5 my-auto mx-auto py-2 px-5"
+        style={{ backgroundColor: "#ffffff" }}
+      >
+        <Form>
+          <Form.Group className="mb-3" controlId="roomAvailabilityFrom">
+            <Form.Label>Датом од</Form.Label>
+            <Form.Control
+              type="date"
+              placeholder="Внесете го датумот на сместување"
+              value={formData.dateFrom}
+              onChange={onFormChange}
+              name="dateFrom"
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="roomAvailabilityTo">
+            <Form.Label>Датум до</Form.Label>
+            <Form.Control
+              type="date"
+              placeholder="Внесете го датумот на напуштање"
+              name="dateTo"
+              value={formData.dateTo}
+              onChange={onFormChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="roomAvailabilityNumRooms">
+            <Form.Label>Број на соби</Form.Label>
+            <Form.Control
+              type="num"
+              placeholder="Внесете го бројот на соби"
+              value={formData.numberOfBeds}
+              onChange={onFormChange}
+              name="numberOfBeds"
+            />
+          </Form.Group>
+
+          <Form.Group className="my-1 justify-content-center">
+            <Button
+              type="button"
+              style={{ backgroundColor: "#159895" }}
+              size="md"
+              onClick={() => {
+                createRoomAvailability(formData, props.hotelRoomId)
+              }}
+            >
+              <span className="ikona my-1">
+                <GiConfirmed />
+              </span>
+              <span className="ikona mx-3">Поднеси апликација</span>
+            </Button>
+          </Form.Group>
+        </Form>
+      </Container>
+    </>
+  );
+};
+export default AddRoomAvailablityForm;
Index: frontend/src/Components/Forms/AddRoomForm.js
===================================================================
--- frontend/src/Components/Forms/AddRoomForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Forms/AddRoomForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,139 @@
+import React from "react";
+import { Form, Button, Container } from "react-bootstrap";
+import { GiConfirmed } from "react-icons/gi"
+import useCreateHotelRoom from "../Hooks/Hotel/useCreateHotelRoom.js";
+import axios from "axios";
+import useFormData from "../Hooks/useFormData";
+
+
+const AddRoomForm = (props) => {
+  const { createHotelRoom } = useCreateHotelRoom(props.hotelId);
+  const edit = props.room
+  const dummy = {
+    hotelRoomDescription: "",
+    hotelRoomName: "",
+    numOfBeds: "",
+    price: "",
+    kitchenAvailable: false,
+    airConditioning: false,
+    balcony: false,
+  }
+
+  console.log(edit)
+
+  const { formData, onFormChange, onCheckBoxChange, setFormData } = useFormData(
+// {
+//
+//     hotelRoomDescription: "",
+//     hotelRoomName: "",
+//     numBeds: "",
+//     price: "",
+//     kitchenAvailable: false,
+//     airConditioning: false,
+//     balcony: false,
+// }
+    edit ? props.room : dummy
+  );
+
+    return (<>
+              <Container
+        className="rounded-5 m-5 my-auto mx-auto py-2 px-5"
+        style={{ backgroundColor: "#ffffff" }}
+      >
+        <Form>
+          <Form.Group className="mb-3" controlId="roomName">
+            <Form.Label>Име на соба</Form.Label>
+            <Form.Control 
+            type="text"
+            placeholder="Внесете го името на собата"
+            value={formData.hotelRoomName}
+            name="hotelRoomName"
+            onChange={onFormChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="numBeds">
+            <Form.Label>Број на кревети</Form.Label>
+            <Form.Control 
+            type="number" 
+            placeholder="Внесете го бројот на кревети" 
+            value={formData.numOfBeds}
+            name="numOfBeds"
+            onChange={onFormChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="roomDescription">
+            <Form.Label>Опис</Form.Label>
+            <Form.Control 
+            as="textarea" 
+            placeholder="Внесете опис на собата" 
+            name="hotelRoomDescription"
+            value={formData.hotelRoomDescription}
+            onChange={onFormChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="roomPrice">
+            <Form.Label>Цена од ноќ</Form.Label>
+            <Form.Control 
+            type="number" 
+            placeholder="Внесете ја цената од ноќ" 
+            value={formData.price}
+            name="price"
+            onChange={onFormChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="roomFilters">
+            <Form.Label>Филтри</Form.Label>
+            <Form.Check 
+            type="checkbox" 
+            label="Кујна"
+            name="kitchenAvailable"
+            checked={formData.kitchenAvailable}
+            onChange={onCheckBoxChange}
+            />
+            <Form.Check 
+            type="checkbox" 
+            label="Клима"
+            checked={formData.airConditioning}
+            name="airConditioning"
+            onChange={onCheckBoxChange}
+            />
+            <Form.Check 
+            type="checkbox" 
+            label="Тераса"
+            name="balcony"
+            checked={formData.balcony}
+            onChange={onCheckBoxChange}
+            />
+
+          </Form.Group>
+
+          <Form.Group className="my-1 justify-content-center">
+            <Button
+              type="submit"
+              style={{ backgroundColor: "#159895" }}
+              size="md"
+              onClick={(e) => {
+                e.preventDefault();
+                props.refresh((prev) => {
+                  return ++prev;
+                })
+                createHotelRoom(formData);
+                props.closeModal();
+              }}
+            >
+              <span className="ikona my-1">
+                <GiConfirmed />
+              </span>
+              <span className="ikona mx-3">Поднеси апликација</span>
+            </Button>
+          </Form.Group>
+        </Form>
+      </Container>
+    </>)
+}
+
+export default AddRoomForm;
Index: frontend/src/Components/Forms/AddTableAvailabilityForm.js
===================================================================
--- frontend/src/Components/Forms/AddTableAvailabilityForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Forms/AddTableAvailabilityForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,77 @@
+import React from "react";
+import { Form, Button, Container } from "react-bootstrap";
+import { GiConfirmed } from "react-icons/gi";
+import useFormData from "../Hooks/useFormData";
+import useCreateTableAvailability from "../Hooks/Restaurant/useCreateTableAvailability";
+
+const AddTableAvailablityForm = (props) => {
+  const { createTableAvailability } = useCreateTableAvailability();
+  console.log(props.hotelRoomId);
+  const { formData, onFormChange, onCheckBoxChange, setFormData } = useFormData(
+    {
+      numTables: "",
+      hourFrom: new Date().getTime(),
+      hourTo: new Date().getTime(),
+      restaurantTable: props.table,
+    }
+  );
+
+  return (
+    <>
+      <Container
+        className="rounded-5 m-5 my-auto mx-auto py-2 px-5"
+        style={{ backgroundColor: "#ffffff" }}
+      >
+        <Form>
+          <Form.Group className="mb-3" controlId="roomAvailabilityFrom">
+            <Form.Label>Време од</Form.Label>
+            <Form.Control
+              type="datetime-local"
+              placeholder="Внесете го времето на доаѓање"
+              value={formData.hourFrom}
+              onChange={onFormChange}
+              name="hourFrom"
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="roomAvailabilityTo">
+            <Form.Label>Време до</Form.Label>
+            <Form.Control
+              type="datetime-local"
+              placeholder="Внесете го времето на напуштање"
+              value={formData.hourTo}
+              onChange={onFormChange}
+              name="hourTo"
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="roomAvailabilityNumRooms">
+            <Form.Label>Број на маси</Form.Label>
+            <Form.Control type="num" placeholder="Внесете го бројот на особи"
+            value={formData.numTables}
+            onChange={onFormChange}
+            name="numTables"
+            />
+          </Form.Group>
+
+          <Form.Group className="my-1 justify-content-center">
+            <Button
+              type="button"
+              style={{ backgroundColor: "#159895" }}
+              size="md"
+              onClick={() => {
+                createTableAvailability(formData, props.table.tableId)
+              }}
+            >
+              <span className="ikona my-1">
+                <GiConfirmed />
+              </span>
+              <span className="ikona mx-3">Поднеси апликација</span>
+            </Button>
+          </Form.Group>
+        </Form>
+      </Container>
+    </>
+  );
+};
+export default AddTableAvailablityForm;
Index: frontend/src/Components/Forms/AddTableForm.js
===================================================================
--- frontend/src/Components/Forms/AddTableForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Forms/AddTableForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,78 @@
+import React from "react";
+import { Form, Button, Container } from "react-bootstrap";
+import { GiConfirmed } from "react-icons/gi"
+import useCreateTable from "../Hooks/Restaurant/useCreateTable";
+import useFormData from "../Hooks/useFormData";
+
+const AddTableForm = (props) => {
+
+  const { createTable } = useCreateTable();
+
+  console.log("OD FORMATA")
+  console.log(props.data)
+
+  const dummy = {
+    numberOfSeats: ""
+  }
+
+  const { formData, onFormChange, onCheckBoxChange, setFormData } = useFormData(
+      props.data ? props.data : dummy
+  );
+
+    return (<>
+              <Container
+        className="rounded-5 m-5 my-auto mx-auto py-2 px-5"
+        style={{ backgroundColor: "#ffffff" }}
+      >
+        <Form>
+          <Form.Group className="mb-3" controlId="numPeople">
+            <Form.Label>Број на луѓе</Form.Label>
+            <Form.Control 
+            type="number"
+            value={formData.noSeats}
+            onChange={onFormChange}
+            name={'noSeats'}
+            placeholder="Внесете го бројот на луѓе" />
+          </Form.Group>
+
+          {/*<Form.Group className="mb-3" controlId="tableStartingTime">*/}
+          {/*  <Form.Label>Време на резервација</Form.Label>*/}
+          {/*  <Form.Control */}
+          {/*  type="time"*/}
+          {/*  value={formData.startTime}*/}
+          {/*  onChange={onFormChange} */}
+          {/*  placeholder="Внесете времето на резервацијата" />*/}
+          {/*</Form.Group>*/}
+
+          {/*<Form.Group className="mb-3" controlId="tableTimeReservation">*/}
+          {/*  <Form.Label>Времетраење на резервација</Form.Label>*/}
+          {/*  <Form.Control */}
+          {/*  type="time"*/}
+          {/*  value={formData.endTime}*/}
+          {/*  onChange={onFormChange} */}
+          {/*  placeholder="Внесете го времетраењето на резервацијата" />*/}
+          {/*</Form.Group>*/}
+
+          <Form.Group className="my-1 justify-content-center">
+            <Button
+              type="submit"
+              style={{ backgroundColor: "#159895" }}
+              size="md"
+              onClick={(e) => {
+                e.preventDefault();
+                console.log(formData);
+                createTable(props.restaurantId, formData, props.refresh);
+              }}
+            >
+              <span className="ikona my-1">
+                <GiConfirmed />
+              </span>
+              <span className="ikona mx-3">Поднеси апликација</span>
+            </Button>
+          </Form.Group>
+        </Form>
+      </Container>
+    </>)
+}
+
+export default AddTableForm;
Index: frontend/src/Components/Forms/AddTransportForm.js
===================================================================
--- frontend/src/Components/Forms/AddTransportForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Forms/AddTransportForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,127 @@
+import React from "react";
+import { Form, Button, Container } from "react-bootstrap";
+import { GiConfirmed } from "react-icons/gi";
+import useCreateTransport from "../Hooks/Transport/useCreateTransport";
+import useFormData from "../Hooks/useFormData";
+
+const AddTransportForm = (props) => {
+  const { createTransport } = useCreateTransport();
+
+  const dummy = {
+      transportName: "",
+      carBrand: "",
+      carType: "",
+      carManufacturedYear: 1900,
+      noPassengers: 0,
+      noBags: 0,
+      EMBG: "111",
+      carPlate: "",
+  }
+
+  const edit = props.transport != null
+
+  console.log(edit)
+
+  const { formData, onFormChange, onCheckBoxChange, setFormData } = useFormData(edit ? props.transport : dummy);
+
+  return (
+    <>
+      <Container
+        className="rounded-5 m-5 my-auto mx-auto py-2 px-5"
+        style={{ backgroundColor: "#ffffff" }}
+      >
+        <Form>
+          <Form.Group className="mb-3" controlId="transportName">
+            <Form.Label>Име на транспорт</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder="Внесете го името на транспортот"
+              name="transportName"
+              value={formData.transportName}
+              onChange={onFormChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="transportYear">
+            <Form.Label>Година на возило</Form.Label>
+            <Form.Control
+              type="number"
+              placeholder="Внесете ја годината на возилото"
+              name="carManufacturedYear"
+              value={formData.carManufacturedYear}
+              onChange={onFormChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="transportType">
+            <Form.Label>Тип на возило</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder="Внесете го типот на возило"
+              name="carType"
+              value={formData.carType}
+              onChange={onFormChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="transportRegistration">
+            <Form.Label>Регистрација</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder="Внесете ја регистрацијата"
+              name="carPlate"
+              value={formData.carPlate}
+              onChange={onFormChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="numPassengers">
+            <Form.Label>Број на патници</Form.Label>
+            <Form.Control
+              type="number"
+              placeholder="Внесете го бројот на патници"
+              name="noPassengers"
+              value={formData.noPassengers}
+              onChange={onFormChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="numLuggage">
+            <Form.Label>Број на торби</Form.Label>
+            <Form.Control
+              type="number"
+              placeholder="Внесете го бројот на торби"
+              name="noBags"
+              value={formData.noBags}
+              onChange={onFormChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="my-1 justify-content-center">
+            <Button
+              type="button"
+              style={{ backgroundColor: "#159895" }}
+              size="md"
+              onClick={() => {
+                console.log(formData);
+                createTransport(formData, edit);
+                props.refresh((prev) => {
+                  return ++prev;
+                })
+                if(!edit)
+                    props.closeModal()
+              }}
+            >
+              <span className="ikona my-1">
+                <GiConfirmed />
+              </span>
+              <span className="ikona mx-3">Поднеси апликација</span>
+            </Button>
+          </Form.Group>
+        </Form>
+      </Container>
+    </>
+  );
+};
+
+export default AddTransportForm;
Index: frontend/src/Components/Forms/AddTripForm.js
===================================================================
--- frontend/src/Components/Forms/AddTripForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Forms/AddTripForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,321 @@
+import React, {useState} from "react";
+import {Form, Button, Container, Row, Col} from "react-bootstrap";
+import {GiConfirmed} from "react-icons/gi";
+import useFormData from "../Hooks/useFormData";
+import useCreateTrip from "../Hooks/Transport/useCreateTrip";
+import {AiOutlinePlusCircle} from "react-icons/ai";
+import useFormNested from "../useFormNested";
+
+const AddTripForm = (props) => {
+    const {createTrip} = useCreateTrip(props.transportId);
+    console.log(props.transportId)
+    const [wayPoints, setWayPoints] = useState([]);
+    const [dependencies, setDependencies] = useState([]);
+    const [routeCount, setRouteCount] = useState(0);
+    const [showRouteCol, setRouteCol] = useState(false);
+    let wayPointNames
+    const findDependantRoutes = (routes, waypoints, i) => {
+
+        const dependency = []
+        console.log('OD fja')
+        console.log(Object.values(waypoints))
+        const objVal = Object.values(waypoints)
+        const searchingRoute = Object.values(waypoints)[i]
+        const fromIndex = routes.findIndex(x => searchingRoute.from === x)
+        const toIndex = routes.findIndex(x => searchingRoute.to === x)
+        for(let j = 0; j < objVal.length; j++)
+        {
+            const start = routes.findIndex(x => objVal[j].from === x)
+            const end = routes.findIndex(x => objVal[j].to === x)
+            if(start >= fromIndex && start < toIndex)
+            {
+                dependency.push(j)
+            }
+            else if(end >= toIndex && end < toIndex)
+            {
+                dependency.push(j)
+            }
+            else if(fromIndex >= start && fromIndex < end)
+            {
+                dependency.push(j)
+            }
+        }
+        return dependency;
+    }
+
+    const {formData, onFormChange, onCheckBoxChange, setFormData} = useFormData(
+        {
+            transport: "",
+            from: "",
+            to: "",
+            freeSpace: "",
+            date: new Date().getDate(),
+            time: new Date().getDate(),
+            routeWaypointLocation: [],
+        }
+    );
+
+    const {
+        formData: routesFormData,
+        onFormChange: routesFormChange,
+        setFormData: routesSetFormData
+    } = useFormNested({});
+
+    const [routes, setRoutes] = useState([]);
+
+    const newWaypoint = (
+        <>
+            <Form.Group className="mb-3" controlId="tripFrom">
+                <Form.Label>Попатна дестинација</Form.Label>
+                <Form.Control
+                    type="text"
+                    placeholder="Внесете го градот на поаѓање"
+                    // value={formData.departureLocation}
+                    // onChange={onFormChange}
+                    name="routeWaypointLocation"
+                />
+            </Form.Group>
+        </>
+    );
+
+    return (
+        <>
+            <Container
+                className="rounded-5 m-5 my-auto mx-auto py-2 px-5"
+                style={{backgroundColor: "#ffffff"}}
+            >
+                <Form>
+                    <Row>
+                        <Row>
+                            <Form.Group className="mb-3" controlId="tripFrom">
+                                <Form.Label>Дестинација на поаѓање</Form.Label>
+                                <Form.Control
+                                    type="text"
+                                    placeholder="Внесете го градот на поаѓање"
+                                    value={formData.from}
+                                    onChange={onFormChange}
+                                    name="from"
+                                />
+                            </Form.Group>
+
+                            <Form.Group className="mb-3" controlId="tripTo">
+                                <Form.Label>Дестинација на пристигање</Form.Label>
+                                <Form.Control
+                                    type="text"
+                                    placeholder="Внесете го градот на пристигање"
+                                    value={formData.to}
+                                    onChange={onFormChange}
+                                    name="to"
+                                />
+                            </Form.Group>
+
+                            <Form.Group className="mb-3" controlId="tripDate">
+                                <Form.Label>Датум и време на поаѓање</Form.Label>
+                                <Form.Control
+                                    type="datetime-local"
+                                    placeholder="Внесете го датумот на поаѓање"
+                                    value={formData.date}
+                                    onChange={onFormChange}
+                                    name="date"
+                                />
+                            </Form.Group>
+
+                            <Form.Group className="mb-3" controlId="tripRoute">
+                                <Form.Label className="d-flex justify-content-between align-items-center">
+                                    Попатни дестинации
+                                    <AiOutlinePlusCircle
+                                        onClick={() => {
+                                            const wayPoints = document.getElementsByName(
+                                                "routeWaypointLocation"
+                                            );
+                                            if (wayPoints.length == 0) {
+                                                setFormData({
+                                                    ...formData,
+                                                    routeWaypointLocation: [formData.from],
+                                                });
+                                                setRouteCount((prev) => {
+                                                    return prev + 1;
+                                                });
+                                                console.log(formData);
+                                            }
+                                            if (
+                                                wayPoints.length == 0 ||
+                                                wayPoints[wayPoints.length - 1].value.length > 0
+                                            ) {
+                                                setRouteCount((prevState) => {
+                                                    return prevState + 1;
+                                                });
+                                                console.log(routeCount);
+                                                setWayPoints((prevState) => {
+                                                    return [...prevState, newWaypoint];
+                                                });
+                                            }
+                                        }}
+                                        id="add-route"
+                                        size={30}
+                                        color="#159895"
+                                    ></AiOutlinePlusCircle>
+                                </Form.Label>
+                            </Form.Group>
+                            {!showRouteCol && wayPoints}
+                        </Row>
+                        {showRouteCol && console.log(routes)}
+                        {showRouteCol && console.log(routesFormData)}
+                        {dependencies !== [] && console.log(dependencies)}
+                        {(showRouteCol && dependencies !== []) && (
+                            routes.map((route, i) => {
+                                return (
+                                    <Row>
+                                        <Form.Group className="mb-3" controlId="tripTo" key={i}>
+                                            <Row>
+                                                {/*{console.log(findDependantRoutes(routesFormData, wayPointNames, i))}*/}
+                                                <Col routeId={i}>
+                                                    <Form.Label>Рута</Form.Label>
+                                                    <Form.Control
+                                                        type="text"
+                                                        placeholder="Внесете го градот на пристигање"
+                                                        value={route.from + " - " + route.to}
+                                                        disabled
+                                                        onChange={routesFormChange}
+                                                        name="arrivalLocation"
+                                                    />
+                                                </Col>
+                                                <Col routeId={i} dependantRoutes={dependencies[i].join(',')}>
+                                                    <Form.Label>Слободни места</Form.Label>
+                                                    <Form.Control
+                                                        type="text"
+                                                        placeholder="Внесете го бројот на слободни места"
+                                                        value={routesFormData[i].freeSpace}
+                                                        onChange={routesFormChange}
+                                                        name="freeSpace"
+                                                    />
+                                                </Col>
+                                                <Col routeId={i}>
+                                                    <Form.Label>Време на пристигнување</Form.Label>
+                                                    <Form.Control
+                                                        type="datetime-local"
+                                                        placeholder="Внесете го времето на пристигање"
+                                                        value={routesFormData[i].arrival}
+                                                        onChange={routesFormChange}
+                                                        name="arrival"
+                                                    />
+                                                </Col>
+                                                <Col routeId={i}>
+                                                    <Form.Label>Цена</Form.Label>
+                                                    <Form.Control
+                                                        type="text"
+                                                        placeholder="Внесете ја цената за рутата"
+                                                        value={routesFormData[i].price}
+                                                        onChange={routesFormChange}
+                                                        name="price"
+                                                    />
+                                                </Col>
+                                            </Row>
+                                        </Form.Group>
+                                    </Row>)
+                            })
+                        )}
+                    </Row>
+                    <Row>
+                        <Form.Group className="my-1 justify-content-center">
+                            <Button
+                                type="button"
+                                style={{backgroundColor: "#159895"}}
+                                size="md"
+                                onClick={() => {
+                                    document.getElementById("add-route").style.display = "none";
+
+                                    const wayPoints = document.getElementsByName(
+                                        "routeWaypointLocation"
+                                    );
+                                    wayPointNames = formData["routeWaypointLocation"];
+                                    console.log(wayPointNames);
+                                    for (let i = 0; i < routeCount - 1; i++) {
+                                        wayPointNames.push(wayPoints[i].value);
+                                    }
+                                    wayPointNames.push(formData.to);
+
+                                    setFormData({
+                                        ...formData,
+                                        routeWaypointLocation: wayPointNames,
+                                    });
+
+                                    let routesVar = [];
+                                    let routesForm = {};
+                                    let count = 0;
+                                    for (let i = 0; i < wayPointNames.length; i++) {
+                                        for (let j = i + 1; j < wayPointNames.length; j++) {
+                                            routesForm = {
+                                                ...routesForm, [count++]: {
+                                                    from: wayPointNames[i],
+                                                    to: wayPointNames[j],
+                                                    price: 0,
+                                                    departure: new Date().getDate(),
+                                                    arrival: new Date().getDate(),
+                                                    freeSpace: 0,
+                                                    order: i
+                                                }
+                                            }
+
+                                            routesVar.push({
+                                                from: wayPointNames[i],
+                                                to: wayPointNames[j],
+                                                price: 0,
+                                                departure: Date(),
+                                                arrival: Date(),
+                                                freeSpace: 0,
+                                                order: i
+                                            })
+                                        }
+                                    }
+
+                                    for (let i = 0; i < Object.values(routesForm).length; i++) {
+                                        console.log(findDependantRoutes(wayPointNames, routesForm, i))
+                                        setDependencies(prevState => [...prevState, findDependantRoutes(wayPointNames, routesForm, i)])
+                                    }
+                                    console.log('VO STATEOOOO')
+                                    console.log(dependencies)
+                                    routesSetFormData(routesForm)
+                                    setRoutes(routesVar)
+                                    setRouteCol(true)
+                                    props.setSize();
+                                }}
+                            >
+                <span className="ikona my-1">
+                  <GiConfirmed/>
+                </span>
+                                <span className="ikona mx-3">Заврши внес на рути</span>
+                            </Button>
+                        </Form.Group>
+                        <Form.Group className="my-1 justify-content-center">
+                            <Button
+                                type="submit"
+                                style={{backgroundColor: "#159895"}}
+                                size="md"
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    const dataToSend = {
+                                        ...formData,
+                                        routes: Object.values(routesFormData)
+                                    }
+                                    console.log(dataToSend)
+                                    createTrip(dataToSend)
+                                    props.refresh((prev) => {
+                                        return prev + 1;
+                                    })
+                                }}
+                            >
+                <span className="ikona my-1">
+                  <GiConfirmed/>
+                </span>
+                                <span className="ikona mx-3">Поднеси апликација</span>
+                            </Button>
+                        </Form.Group>
+                    </Row>
+                </Form>
+            </Container>
+        </>
+    );
+};
+
+export default AddTripForm;
Index: frontend/src/Components/Forms/ChangePasswordForm.js
===================================================================
--- frontend/src/Components/Forms/ChangePasswordForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Forms/ChangePasswordForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,58 @@
+import React from "react";
+import { useState } from "react";
+import { Container, Form, Button } from "react-bootstrap";
+import { AiFillLock } from "react-icons/ai"
+
+const ChangePasswordForm = () => {
+
+    const [hidePassword, setHidePassword] = useState(true);
+    const type = hidePassword ? "password" : "text";
+    const toggleHide = () => {
+        setHidePassword(!hidePassword)
+    }
+    
+
+  return (
+    <>
+      <Container
+        className="rounded-5 m-5 my-auto mx-auto py-2 px-5"
+        style={{ backgroundColor: "#ffffff" }}
+      >
+        <Form>
+          <Form.Group className="mb-3" controlId="currentPassword">
+            <Form.Label>Постоечка лозинка</Form.Label>
+            <Form.Control type="password" placeholder="Внесете ја постоечката лозинка..." />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="newPasswrod">
+            <Form.Label>Нова лозинка</Form.Label>
+            <Form.Control type={type} placeholder="Внесете ја новата лозинка..." />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="newPasswrod">
+            <Form.Label>Повторена нова лозинка</Form.Label>
+            <Form.Control type={type} placeholder="Внесете ја новата лозинка повторно..." />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="formBasicCheckbox">
+            <Form.Check type="checkbox" label="Прикажи лозинки" onChange={toggleHide} />
+          </Form.Group>
+          <Form.Group className="my-1">
+            <Button
+              type="submit"
+              style={{ backgroundColor: "#159895" }}
+              size="md"
+            >
+              <span className="ikona my-1">
+                <AiFillLock />
+              </span>
+              <span className="ikona mx-3">Зачувај промена</span>
+            </Button>
+          </Form.Group>
+        </Form>
+      </Container>
+    </>
+  );
+};
+
+export default ChangePasswordForm;
Index: frontend/src/Components/Forms/EditMainRouteForm.js
===================================================================
--- frontend/src/Components/Forms/EditMainRouteForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Forms/EditMainRouteForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,85 @@
+import React from "react";
+import useGet from "../Hooks/useGet";
+import {Col, Container, Row, Table} from "react-bootstrap";
+import AddRoomForm from "./AddRoomForm";
+import AddTripForm from "./AddTripForm";
+
+
+const EditMainRouteForm = (props) => {
+
+    console.log(props.route)
+
+    const dateFormatter = (str) => {
+        const inputDate = new Date(str);
+
+        const options = {
+            year: '2-digit',
+            month: '2-digit',
+            day: '2-digit',
+            hours: '2-digit',
+            minutes: '2-digit'
+        };
+
+        return inputDate.toLocaleString('en-GB', options);
+    }
+
+    const {
+        data,
+        isLoading,
+        setData,
+        getData
+    } = useGet(`/transport/${props.route.id}/available`)
+
+    !isLoading && console.log(data)
+
+    return (
+        <>
+            <Row>
+                <Col>
+                    <AddTripForm transportId={props.route.id} refresh={props.refresh}/>
+                </Col>
+                <Col>
+                    <Container>
+                        <Table>
+                            <thead>
+                            <tr>
+                                <th>#</th>
+                                <th>Од - До</th>
+                                <th>Време тргање</th>
+                                <th>Време пристигање</th>
+                                <th>Број патници</th>
+                                <th>Цена</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {!isLoading && data != null && data.map((avail) => {
+                                return (
+                                    avail.routes.map((route, i) => {
+                                        return (<tr>
+                                            <td>
+                                                {i + 1}
+                                            </td>
+                                            <td>
+                                                {route.from} - {route.to}
+                                            </td>
+                                            <td>
+                                                {dateFormatter(route.departure)}
+                                            </td>
+                                            <td>
+                                                {dateFormatter(route.arrival)}
+                                            </td>
+                                            <td>
+                                                {route.freeSpace}
+                                            </td>
+                                        </tr>)
+                            }))})}
+                            </tbody>
+                        </Table>
+                    </Container>
+                </Col>
+            </Row>
+        </>
+    )
+}
+
+export default EditMainRouteForm
Index: frontend/src/Components/Forms/EditRoomForm.js
===================================================================
--- frontend/src/Components/Forms/EditRoomForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Forms/EditRoomForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,77 @@
+import React from "react";
+import useGet from "../Hooks/useGet";
+import {Col, Container, Row, Table} from "react-bootstrap";
+import AddRoomForm from "./AddRoomForm";
+
+
+const EditRoomForm = (props) => {
+
+    console.log(props.room)
+
+    const dateFormatter = (str) => {
+        const inputDate = new Date(str);
+
+        const options = {
+            year: '2-digit',
+            month: '2-digit',
+            day: '2-digit'
+        };
+
+        return inputDate.toLocaleString('en-GB', options);
+    }
+
+    const {
+        data,
+        isLoading,
+        setData,
+        getData
+    } = useGet(`/hotel/rooms/${props.room.hotelRoomId}/available`)
+
+    console.log(`/hotel/rooms/${props.room.hotelRoomId}/available`)
+
+    !isLoading && console.log(data)
+
+    return (
+        <>
+            <Row>
+                <Col>
+                    <AddRoomForm roomId={props.room.hotelRoomId} refresh={props.refresh} room={props.room}/>
+                </Col>
+                <Col>
+                    <Container>
+                        <Table>
+                            <thead>
+                            <tr>
+                                <th>#</th>
+                                <th>Oд</th>
+                                <th>До</th>
+                                <th>Цена</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {!isLoading && data != null && data.map((avail, i) => {
+                                return (<tr>
+                                    <td>
+                                        {i + 1}
+                                    </td>
+                                    <td>
+                                        {dateFormatter(avail.dateFrom)}
+                                    </td>
+                                    <td>
+                                        {dateFormatter(avail.dateTo)}
+                                    </td>
+                                    <td>
+                                        {avail.numberOfBeds}
+                                    </td>
+                                </tr>)
+                            })}
+                            </tbody>
+                        </Table>
+                    </Container>
+                </Col>
+            </Row>
+        </>
+    )
+}
+
+export default EditRoomForm
Index: frontend/src/Components/Forms/EditTableForm.js
===================================================================
--- frontend/src/Components/Forms/EditTableForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Forms/EditTableForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,76 @@
+import React from "react";
+import {Col, Container, Row, Table} from "react-bootstrap";
+import AddTableForm from "./AddTableForm";
+import useGet from "../Hooks/useGet";
+
+const EditTableForm = (props) => {
+
+    const {
+        data,
+        isLoading,
+        setData,
+        getData
+    } = useGet(`/restaurant/table/${props.table.tableId}/availible`)
+
+    !isLoading && console.log(data)
+
+    const dateFormatter = (str) => {
+        const inputDate = new Date(str);
+
+        const options = {
+            year: '2-digit',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false,
+        };
+
+        return inputDate.toLocaleString('en-GB', options);
+
+    }
+
+    return (
+        <>
+            <Row>
+                <Col>
+                    <AddTableForm data={props.table}></AddTableForm>
+                </Col>
+                <Col>
+                    <Container>
+                        <Table>
+                            <thead>
+                            <tr>
+                                <th>#</th>
+                                <th>Достапно од</th>
+                                <th>Достапно до</th>
+                                <th>Број на маси</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {!isLoading && data != null && data.map((avail, i) => {
+                                return (<tr>
+                                    <td>
+                                        {i + 1}
+                                    </td>
+                                    <td>
+                                        {dateFormatter(avail.hourFrom)}
+                                    </td>
+                                    <td>
+                                        {dateFormatter(avail.hourTo)}
+                                    </td>
+                                    <td>
+                                        {avail.numTables}
+                                    </td>
+                                </tr>)
+                            })}
+                            </tbody>
+                        </Table>
+                    </Container>
+                </Col>
+            </Row>
+        </>
+    )
+}
+
+export default EditTableForm;
Index: frontend/src/Components/Forms/RegisterBusinessForm.js
===================================================================
--- frontend/src/Components/Forms/RegisterBusinessForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Forms/RegisterBusinessForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,108 @@
+import React from "react";
+import { Form, Button, Container } from "react-bootstrap";
+import { GiConfirmed } from "react-icons/gi"
+import useCreateBusiness from "../Hooks/Business/useCreateBusiness";
+import useFormData from "../Hooks/useFormData";
+
+const RegisterBusinessForm = (props) => {
+
+  const { createBusiness } = useCreateBusiness();
+
+  const { formData, onFormChange, onCheckBoxChange, setFormData } = useFormData({
+    name: "",
+    address: "",
+    edbs: "",
+    odgovornoLice: "",
+    phone: "",
+    approved: false
+  });
+
+    return (<>
+              <Container
+        className="rounded-5 m-5 my-auto mx-auto py-2 px-5"
+        style={{ backgroundColor: "#ffffff" }}
+      >
+        <Form>
+          <Form.Group className="mb-3" controlId="businessName">
+            <Form.Label>Име на фирмата</Form.Label>
+            <Form.Control 
+            type="text"
+            value={formData.name}
+            onChange={onFormChange}
+            name="name"
+            placeholder="Внесете го името на фирмата" />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="businessAddress">
+            <Form.Label>Адреса на фирмата</Form.Label>
+            <Form.Control 
+            type="text" 
+            value={formData.address}
+            onChange={onFormChange}
+            name="address"
+            placeholder="Внесете ја адресата на фирмата" />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="businessIDN">
+            <Form.Label>Единствен даночен број</Form.Label>
+            <Form.Control 
+            type="text" 
+            value={formData.edbs}
+            onChange={onFormChange}
+            name="edbs"
+            placeholder="Внесете ЕДБС" />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="businessDirector">
+            <Form.Label>Одговорно лице</Form.Label>
+            <Form.Control 
+            type="text" 
+            value={formData.odgovornoLice}
+            onChange={onFormChange}
+            name="odgovornoLice"
+            placeholder="Внесете одговорно лице" />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="businessPhone">
+            <Form.Label>Контакт телефон</Form.Label>
+            <Form.Control 
+            type="text" 
+            value={formData.phone}
+            onChange={onFormChange}
+            name="phone"
+            placeholder="Внесете контакт телефон" />
+          </Form.Group>
+
+
+          <Form.Group className="mb-3" controlId="businessEULA">
+            <Form.Check type="checkbox" label="Се согласувам со правилата и условите за користење"/>
+          </Form.Group>
+          <Form.Group className="my-1 justify-content-center">
+            <Button
+              type="submit"
+              style={{ backgroundColor: "#159895" }}
+              size="md"
+              onClick={(e) => {
+                e.preventDefault();
+                console.log(formData);
+                const dataToSend = {
+                  ...formData,
+                  userId: 1
+                }
+                createBusiness(formData);
+                props.edit(1)
+                props.hide()
+              }}
+            >
+              <span className="ikona my-1">
+                <GiConfirmed />
+              </span>
+              <span className="ikona mx-3">Поднеси апликација</span>
+            </Button>
+          </Form.Group>
+        </Form>
+      </Container>
+    </>)
+}
+
+export default RegisterBusinessForm;
Index: frontend/src/Components/Hooks/Business/useCreateBusiness.js
===================================================================
--- frontend/src/Components/Hooks/Business/useCreateBusiness.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/Business/useCreateBusiness.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,35 @@
+import React from "react";
+
+import axios from "../../../axios.js";
+import { useNavigate } from "react-router-dom";
+
+const useCreateBusiness = () => {
+
+    //const history = useNavigate();
+    const createBusiness = async (business) => {
+		console.log({business})
+		console.log(business)
+        await axios
+	            .post(`/business/add`, business, {
+					params: {
+						userId: localStorage.getItem("userId")
+					}
+				}) 
+	            .then((res) => {
+					//window.location.reload()
+	                //history.push('/hotel');
+	            })
+	            .catch((err) => {
+	                console.log(err);
+	            })
+	            .finally(() => {
+	            });
+    }
+
+	return {
+		createBusiness
+	};
+
+}
+
+export default useCreateBusiness;
Index: frontend/src/Components/Hooks/FilesUpload/useFileChange.js
===================================================================
--- frontend/src/Components/Hooks/FilesUpload/useFileChange.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/FilesUpload/useFileChange.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,43 @@
+import axios from "../../../axios";
+import { useState } from "react";
+
+const useFileChange = () => {
+    const [selectedFiles, setSelectedFiles] = useState([]);
+
+    const onFileChangeHandler = (files, type, id, refresh) => {
+        setSelectedFiles(files);
+
+        const formData = new FormData();
+
+        files.forEach((x) => formData.append('files', x))
+        //
+        // for (let i = 0; i < files.length; i++) {
+        //
+        // }
+
+
+        axios.post(`/upload/${type}/${id}`, formData, {
+            headers: {
+                'Content-Type': 'multipart/form-data'
+            }
+        })
+            .then(res => {
+                if (res.status === 200) {
+                    console.log(res.data);
+                    refresh((prev) => ++prev)
+                    alert("File(s) uploaded successfully.");
+                } else {
+                    console.error("File upload failed:", res.data);
+                    alert("File upload failed.");
+                }
+            })
+            .catch(error => {
+                console.error("Error uploading file(s):", error);
+                alert("An error occurred while uploading files.");
+            });
+    };
+
+    return { onFileChangeHandler, selectedFiles };
+};
+
+export default useFileChange;
Index: frontend/src/Components/Hooks/Hotel/useCreateHotel.js
===================================================================
--- frontend/src/Components/Hooks/Hotel/useCreateHotel.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/Hotel/useCreateHotel.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,51 @@
+import React from "react";
+
+import axios from "../../../axios.js";
+import { useNavigate } from "react-router-dom";
+
+const useCreateHotel = () => {
+
+    const createHotel = async (hotel, edit) => {
+		console.log({hotel})
+		console.log(hotel)
+		console.log("vo createhotel")
+
+		if(!edit)
+		{
+			await axios
+			.post(`/hotel/add`, hotel, {
+				params: {
+					userId: JSON.parse(localStorage.getItem("user")).userId
+				}
+			}) 
+			.then((res) => {
+				//history.push('/hotel');
+			})
+			.catch((err) => {
+				console.log(err);
+			})
+			.finally(() => {
+			});
+		}
+		else
+		{
+			await axios
+			.post(`/hotel/edit`, hotel) 
+			.then((res) => {
+			})
+			.catch((err) => {
+				console.log(err);
+			})
+			.finally(() => {
+			});
+		}
+
+    }
+
+	return {
+		createHotel
+	};
+
+}
+
+export default useCreateHotel;
Index: frontend/src/Components/Hooks/Hotel/useCreateHotelRoom.js
===================================================================
--- frontend/src/Components/Hooks/Hotel/useCreateHotelRoom.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/Hotel/useCreateHotelRoom.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,34 @@
+import React from "react";
+
+import axios from "../../../axios.js";
+import { useNavigate } from "react-router-dom";
+
+const useCreateHotelRoom = (hotelId) => {
+
+    const createHotelRoom = async (hotelRoom) => {
+		console.log({hotelRoom})
+		console.log(hotelRoom)
+        await axios
+	            .post(`/hotel/rooms/add`, hotelRoom, {
+					params: {
+                        userId: localStorage.getItem("userId"),
+                        hotelId: hotelId
+					}
+				}) 
+	            .then((res) => {
+	                //history.push('/hotel');
+	            })
+	            .catch((err) => {
+	                console.log(err);
+	            })
+	            .finally(() => {
+	            });
+    }
+
+	return {
+		createHotelRoom
+	};
+
+}
+
+export default useCreateHotelRoom;
Index: frontend/src/Components/Hooks/Hotel/useCreateRoomAvailability.js
===================================================================
--- frontend/src/Components/Hooks/Hotel/useCreateRoomAvailability.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/Hotel/useCreateRoomAvailability.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,33 @@
+import React from "react";
+
+import axios from "../../../axios.js";
+import { useNavigate } from "react-router-dom";
+
+const useCreateRoomAvailiability = (hotelRoomId) => {
+
+    const createRoomAvailability = async (hotelRoomAvailable, id) => {
+		console.log({hotelRoomAvailable})
+		console.log(hotelRoomAvailable)
+        await axios
+	            .post(`/hotel/rooms/available/${id}/add`, hotelRoomAvailable, {
+					params: {
+                        hotelId: hotelRoomId
+					}
+				}) 
+	            .then((res) => {
+	                //history.push('/hotel');
+	            })
+	            .catch((err) => {
+	                console.log(err);
+	            })
+	            .finally(() => {
+	            });
+    }
+
+	return {
+		createRoomAvailability
+	};
+
+}
+
+export default useCreateRoomAvailiability;
Index: frontend/src/Components/Hooks/Hotel/useEditHotel.js
===================================================================
--- frontend/src/Components/Hooks/Hotel/useEditHotel.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/Hotel/useEditHotel.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,26 @@
+import React from "react";
+import axios from "axios";
+import { useHistory } from 'react-router-dom';
+
+const useEditHotel = () => {
+
+    const history = useHistory();
+    const editHotel = async ({hotel}) => {
+        await axios
+	            .post(`/hotel/edit`, hotel) 
+	            .then((res) => {
+	                history.push('/hotel');
+	            })
+	            .catch((err) => {
+	                console.log(err);
+	            })
+	            .finally(() => {
+	            });
+    } 
+    return (
+        editHotel
+    )
+
+}
+
+export default useEditHotel;
Index: frontend/src/Components/Hooks/Hotel/useRemoveHotel.js
===================================================================
--- frontend/src/Components/Hooks/Hotel/useRemoveHotel.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/Hotel/useRemoveHotel.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,26 @@
+import React from "react";
+import axios from "axios";
+import { useHistory } from 'react-router-dom';
+
+const useRemoveHotel = () => {
+
+    const history = useHistory();
+    const removeHotel = async ({id}) => {
+        await axios
+	            .get(`/hotel/delete?userId=` + id) 
+	            .then((res) => {
+	                history.push('/hotel');
+	            })
+	            .catch((err) => {
+	                console.log(err);
+	            })
+	            .finally(() => {
+	            });
+    } 
+    return (
+        removeHotel
+    )
+
+}
+
+export default useRemoveHotel;
Index: frontend/src/Components/Hooks/Restaurant/useCreateMenu.js
===================================================================
--- frontend/src/Components/Hooks/Restaurant/useCreateMenu.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/Restaurant/useCreateMenu.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,34 @@
+import React from "react";
+import axios from "../../../axios";
+import { useNavigate } from 'react-router-dom';
+
+const useCreateMenu = () => {
+
+	const navigator = useNavigate();
+
+    const createMenu = async (id, menu) => {
+		console.log(menu)
+        console.log(id)
+        await axios
+	            .post(`/restaurant/` + id + "/menu/add", menu) 
+	            .then((res) => {
+					console.log("NOVO MENI");
+					console.log(res)
+					//window.location.reload()
+					//navigator("/resources/restaurant/" + id)
+	                //history.push('/restaurant');
+	            })
+	            .catch((err) => {
+	                console.log(err);
+	            })
+	            .finally(() => {
+	            });
+	}
+	
+
+    return {
+        createMenu
+	}
+}
+
+export default useCreateMenu;
Index: frontend/src/Components/Hooks/Restaurant/useCreateRestaurant.js
===================================================================
--- frontend/src/Components/Hooks/Restaurant/useCreateRestaurant.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/Restaurant/useCreateRestaurant.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,54 @@
+import React from "react";
+import axios from "../../../axios";
+import { useNavigate } from 'react-router-dom';
+
+const useCreateRestaurant = () => {
+
+	const navigator = useNavigate();
+
+    const createRestaurant = async (restaurant, edit) => {
+		console.log(restaurant)
+		if(!edit)
+		{
+			console.log(restaurant)
+			await axios
+			.post(`/restaurant/add`, restaurant, {
+				params: {
+					userId: JSON.parse(localStorage.getItem('user')).userId,
+				}
+			}) 
+			.then((res) => {
+				// console.log(res)
+				// window.location.reload()
+			})
+			.catch((err) => {
+				console.log(err);
+			})
+			.finally(() => {
+			});
+		}
+		else
+		{
+			await axios
+			.post(`/restaurant/edit`, restaurant) 
+			.then((res) => {
+				console.log(res)
+				//window.location.reload()
+				//navigator("/resources/restaurant")
+				//history.push('/restaurant');
+			})
+			.catch((err) => {
+				console.log(err);
+			})
+			.finally(() => {
+			});
+		}
+
+    }
+
+    return {
+        createRestaurant
+	}
+}
+
+export default useCreateRestaurant;
Index: frontend/src/Components/Hooks/Restaurant/useCreateTable.js
===================================================================
--- frontend/src/Components/Hooks/Restaurant/useCreateTable.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/Restaurant/useCreateTable.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,30 @@
+import React from "react";
+import axios from "../../../axios";
+import { useNavigate } from 'react-router-dom';
+
+const useCreateTable = () => {
+
+    const createTable = async (id, table, refresh) => {
+		console.log(table)
+        await axios
+	            .post(`/restaurant/table/${id}/add`, null, {
+					params: table
+				})
+	            .then((res) => {
+					console.log(res)
+					refresh(prev => ++prev)
+	                //history.push('/restaurant');
+	            })
+	            .catch((err) => {
+	                console.log(err);
+	            })
+	            .finally(() => {
+	            });
+    }
+
+    return {
+        createTable
+	}
+}
+
+export default useCreateTable;
Index: frontend/src/Components/Hooks/Restaurant/useCreateTableAvailability.js
===================================================================
--- frontend/src/Components/Hooks/Restaurant/useCreateTableAvailability.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/Restaurant/useCreateTableAvailability.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,30 @@
+import React from "react";
+
+import axios from "../../../axios.js";
+import { useNavigate } from "react-router-dom";
+
+const useCreateTableAvailability = () => {
+
+    const createTableAvailability = async (restaurantTableAvailible, id) => {
+		console.log({restaurantTableAvailible})
+		console.log(restaurantTableAvailible)
+        await axios
+	            .post(`/restaurant/table/${id}/available/add`, restaurantTableAvailible, {
+				}) 
+	            .then((res) => {
+	                //history.push('/hotel');
+	            })
+	            .catch((err) => {
+	                console.log(err);
+	            })
+	            .finally(() => {
+	            });
+    }
+
+	return {
+		createTableAvailability
+	};
+
+}
+
+export default useCreateTableAvailability;
Index: frontend/src/Components/Hooks/Restaurant/useEditRestaurant.js
===================================================================
--- frontend/src/Components/Hooks/Restaurant/useEditRestaurant.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/Restaurant/useEditRestaurant.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,26 @@
+import React from "react";
+import axios from "axios";
+import { useHistory } from 'react-router-dom';
+
+const useEditRestaurant = () => {
+
+    const history = useHistory();
+    const editRestaurant = async ({restaurnat}) => {
+        await axios
+	            .post(`/restaurant/edit`,user) 
+	            .then((res) => {
+	                history.push('/restaurant');
+	            })
+	            .catch((err) => {
+	                console.log(err);
+	            })
+	            .finally(() => {
+	            });
+    } 
+    return (
+        editRestaurant
+    )
+
+}
+
+export default useEditRestaurant;
Index: frontend/src/Components/Hooks/Restaurant/useRemoveRestaruant.js
===================================================================
--- frontend/src/Components/Hooks/Restaurant/useRemoveRestaruant.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/Restaurant/useRemoveRestaruant.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,26 @@
+import React from "react";
+import axios from "axios";
+import { useHistory } from 'react-router-dom';
+
+const useRemoveRestaurant = () => {
+
+    const history = useHistory();
+    const removeRestaurant = async ({id}) => {
+        await axios
+	            .get(`/restaurant/delete?restaurantId=` + id) 
+	            .then((res) => {
+	                history.push('/restaurant');
+	            })
+	            .catch((err) => {
+	                console.log(err);
+	            })
+	            .finally(() => {
+	            });
+    } 
+    return (
+        removeRestaurant
+    )
+
+}
+
+export default useRemoveRestaurant;
Index: frontend/src/Components/Hooks/Review/useCreateReview.js
===================================================================
--- frontend/src/Components/Hooks/Review/useCreateReview.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/Review/useCreateReview.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,26 @@
+import React from "react";
+import axios from "axios";
+import { useHistory } from 'react-router-dom';
+
+const useCreateReview = () => {
+
+    const history = useHistory();
+    const createReview = async ({review}) => {
+        await axios
+	            .post(`/review/add`, user) 
+	            .then((res) => {
+	                history.push('/review');
+	            })
+	            .catch((err) => {
+	                console.log(err);
+	            })
+	            .finally(() => {
+	            });
+    } 
+    return (
+            createReview
+    )
+
+}
+
+export default useCreateReview;
Index: frontend/src/Components/Hooks/Review/useDeleteReview.js
===================================================================
--- frontend/src/Components/Hooks/Review/useDeleteReview.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/Review/useDeleteReview.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,26 @@
+import React from "react";
+import axios from "axios";
+import { useHistory } from 'react-router-dom';
+
+const useRemoveReview = () => {
+
+    const history = useHistory();
+    const removeReview = async ({id}) => {
+        await axios
+	            .get(`/review/delete?userId=` + id) 
+	            .then((res) => {
+	                history.push('/review');
+	            })
+	            .catch((err) => {
+	                console.log(err);
+	            })
+	            .finally(() => {
+	            });
+    } 
+    return (
+        removeReview
+    )
+
+}
+
+export default useRemoveReview;
Index: frontend/src/Components/Hooks/Review/useEditReview.js
===================================================================
--- frontend/src/Components/Hooks/Review/useEditReview.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/Review/useEditReview.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,26 @@
+import React from "react";
+import axios from "axios";
+import { useHistory } from 'react-router-dom';
+
+const useEditReview = () => {
+
+    const history = useHistory();
+    const editReview = async ({review}) => {
+        await axios
+	            .post(`/review/edit`, review) 
+	            .then((res) => {
+	                history.push('/review');
+	            })
+	            .catch((err) => {
+	                console.log(err);
+	            })
+	            .finally(() => {
+	            });
+    } 
+    return (
+        editReview
+    )
+
+}
+
+export default useEditReview;
Index: frontend/src/Components/Hooks/Transport/useCreateTransport.js
===================================================================
--- frontend/src/Components/Hooks/Transport/useCreateTransport.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/Transport/useCreateTransport.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,44 @@
+import React from "react";
+import axios from "../../../axios";
+import { useHistory } from 'react-router-dom';
+
+const useCreateTransport = () => {
+	const userId = JSON.parse(localStorage.getItem('user')).userId
+    const createTransport = async (transport, edit) => {
+			if(!edit)
+			{
+				await axios
+	            .post(`/transport/add/` + userId, transport)
+	            .then((res) => {
+	                //history.push('/transport');
+					console.log(res)
+	            })
+	            .catch((err) => {
+	                console.log(err);
+	            })
+	            .finally(() => {
+	            });
+			}
+			else
+			{
+				await axios
+	            .post(`/transport/edit`, transport) 
+	            .then((res) => {
+	                //history.push('/transport');
+					console.log(res)
+	            })
+	            .catch((err) => {
+	                console.log(err);
+	            })
+	            .finally(() => {
+	            });
+			}
+    }
+
+    return {
+        createTransport
+	}
+
+}
+
+export default useCreateTransport;
Index: frontend/src/Components/Hooks/Transport/useCreateTrip.js
===================================================================
--- frontend/src/Components/Hooks/Transport/useCreateTrip.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/Transport/useCreateTrip.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,34 @@
+import React from "react";
+
+import axios from "../../../axios.js";
+import { useNavigate } from "react-router-dom";
+
+const useCreateTrip = (transportId) => {
+
+    const createTrip = async (trip) => {
+		console.log({trip})
+		console.log(trip)
+        await axios
+	            .post(`/transport/available/add`, trip, {
+					params: {
+                        userId: localStorage.getItem("userId"),
+                        transportId: transportId
+					}
+				}) 
+	            .then((res) => {
+	                //history.push('/hotel');
+	            })
+	            .catch((err) => {
+	                console.log(err);
+	            })
+	            .finally(() => {
+	            });
+    }
+
+	return {
+		createTrip
+	};
+
+}
+
+export default useCreateTrip;
Index: frontend/src/Components/Hooks/Transport/useEditTransport.js
===================================================================
--- frontend/src/Components/Hooks/Transport/useEditTransport.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/Transport/useEditTransport.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,26 @@
+import React from "react";
+import axios from "axios";
+import { useHistory } from 'react-router-dom';
+
+const useEditTransport = () => {
+
+    const history = useHistory();
+    const editTransport = async ({transport}) => {
+        await axios
+	            .post(`/transport/edit`, transport) 
+	            .then((res) => {
+	                history.push('/transport');
+	            })
+	            .catch((err) => {
+	                console.log(err);
+	            })
+	            .finally(() => {
+	            });
+    } 
+    return (
+        editTransport
+    )
+
+}
+
+export default useEditTransport;
Index: frontend/src/Components/Hooks/Transport/useRemoveTransport.js
===================================================================
--- frontend/src/Components/Hooks/Transport/useRemoveTransport.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/Transport/useRemoveTransport.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,26 @@
+import React from "react";
+import axios from "axios";
+import { useHistory } from 'react-router-dom';
+
+const useRemoveTransport = () => {
+
+    const history = useHistory();
+    const removeTransort = async ({id}) => {
+        await axios
+	            .get(`/transport/delete?transportId=` + id) 
+	            .then((res) => {
+	                history.push('/transport');
+	            })
+	            .catch((err) => {
+	                console.log(err);
+	            })
+	            .finally(() => {
+	            });
+    } 
+    return (
+        removeTransport
+    )
+
+}
+
+export default useRemoveTransport;
Index: frontend/src/Components/Hooks/User/useCreateUser.js
===================================================================
--- frontend/src/Components/Hooks/User/useCreateUser.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/User/useCreateUser.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,26 @@
+import React from "react";
+import axios from "../../../axios.js";
+import { useHistory, useNavigate } from 'react-router-dom';
+
+const useCreateUser = () => {
+
+    const navigator = useNavigate()
+    const createUser = async (user) => {
+        await axios
+	            .post(`/register`, user) 
+	            .then((res) => {
+	                navigator("/login")
+	            })
+	            .catch((err) => {
+	                console.log(err);
+	            })
+	            .finally(() => {
+	            });
+    } 
+    return {
+            createUser
+	}
+
+}
+
+export default useCreateUser;
Index: frontend/src/Components/Hooks/User/useEditUser.js
===================================================================
--- frontend/src/Components/Hooks/User/useEditUser.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/User/useEditUser.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,26 @@
+import React from "react";
+import axios from "axios";
+import { useHistory } from 'react-router-dom';
+
+const useEditUser = () => {
+
+    const history = useHistory();
+    const editUser = async ({user}) => {
+        await axios
+	            .post(`/user/edit`, user) 
+	            .then((res) => {
+	                history.push('/user');
+	            })
+	            .catch((err) => {
+	                console.log(err);
+	            })
+	            .finally(() => {
+	            });
+    } 
+    return (
+        editUser
+    )
+
+}
+
+export default useEditUser;
Index: frontend/src/Components/Hooks/User/useLogin.js
===================================================================
--- frontend/src/Components/Hooks/User/useLogin.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/User/useLogin.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,64 @@
+import React from "react";
+
+import axios from "../../../axios.js";
+import { Navigate, useAsyncValue, useNavigate } from "react-router-dom";
+import LoginForm from "../../Login/LoginForm.js";
+import {useAuth} from "../../Context/AuthContext";
+
+const useLogin = () => {
+
+    const navigator = useNavigate()
+	const Auth = useAuth();
+    //const history = useNavigate();
+    const login = async (loginData) => {
+		console.log({loginData})
+		console.log(loginData)
+        await axios
+	            .post(`/api/login`, {
+                    username: loginData.email,
+                    password: loginData.password
+                }, {
+                    headers: { 
+                        "Content-Type": "application/x-www-form-urlencoded"
+                    }
+                }) 
+	            .then((res) => {
+					console.log("RES LOGIN")
+					console.log(res)
+					if(res.status === 200)
+					{
+						const user = {
+							sessionId: res.data.auth.details.sessionId,
+							userId: res.data.auth.principal.userID,
+							username: res.data.auth.principal.username,
+							role: res.data.auth.principal.role,
+							name: res.data.auth.principal.name,
+							surname: res.data.auth.principal.surname,
+						}
+						Auth.userLogin(user);
+						console.log(user)
+					}
+					const sessionId = res.data.auth.details.sessionId;
+					const userId = res.data.auth.principal.userID;
+
+					localStorage.setItem("sessionId", sessionId);
+					localStorage.setItem("userId", userId);
+					if(sessionId === null)
+					{
+					}
+                    navigator("/home")
+	            })
+	            .catch((err) => {
+	                console.log(err);
+	            })
+	            .finally(() => {
+	            });
+    }
+
+	return {
+		login
+	};
+
+}
+
+export default useLogin;
Index: frontend/src/Components/Hooks/User/useRemoveUser.js
===================================================================
--- frontend/src/Components/Hooks/User/useRemoveUser.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/User/useRemoveUser.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,26 @@
+import React from "react";
+import axios from "axios";
+import { useHistory } from 'react-router-dom';
+
+const useRemoveUser = () => {
+
+    const history = useHistory();
+    const removeUser = async ({id}) => {
+        await axios
+	            .get(`/user/delete?userId=` + id) 
+	            .then((res) => {
+	                history.push('/user');
+	            })
+	            .catch((err) => {
+	                console.log(err);
+	            })
+	            .finally(() => {
+	            });
+    } 
+    return (
+        removeUser
+    )
+
+}
+
+export default useRemoveUser;
Index: frontend/src/Components/Hooks/useApprove.js
===================================================================
--- frontend/src/Components/Hooks/useApprove.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/useApprove.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,31 @@
+import axios from "../../axios";
+import { useState, useEffect, useContext } from 'react';
+
+const useApprove = (url, dep) => {
+
+    const [data, setData] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [changed, setChanged] = useState(0)
+    const getData = async (uurl) => {
+        await axios.
+        get(uurl).then((res) => {
+            setData(res.data);
+        }).catch((error) => {
+            console.log(error)
+        })
+            .finally(() => {
+                setIsLoading(false);
+            });
+    };
+
+    return {
+        data,
+        setData,
+        isLoading,
+        getData,
+        setChanged
+    };
+};
+
+
+export default useApprove;
Index: frontend/src/Components/Hooks/useCreate.js
===================================================================
--- frontend/src/Components/Hooks/useCreate.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/useCreate.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,34 @@
+import axios from "../../axios";
+
+const useCreate = () => {
+
+    //const history = useNavigate();
+    const createEntity = async (url, entity, getData, getData2) => {
+        console.log(entity)
+        await axios
+            .post(url, null, {
+                params: entity,
+                // headers: {
+                //     'Content-Type': 'multipart/form-data'
+                // }
+            })
+            .then((res) => {
+                //history.push('/hotel');
+                console.log(res)
+                getData(prev => ++prev)
+                getData2(prev => ++prev)
+            })
+            .catch((err) => {
+                console.log(err);
+            })
+            .finally(() => {
+            });
+    }
+
+    return {
+        createEntity
+    };
+
+}
+
+export default useCreate;
Index: frontend/src/Components/Hooks/useFormData.js
===================================================================
--- frontend/src/Components/Hooks/useFormData.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/useFormData.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,31 @@
+import { useState } from 'react';
+
+const useFormData = (editData) => {
+  const [formData, setData] = useState({ ...editData });
+
+  const onFormChange = (e) => {
+    setData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const onCheckBoxChange = (e) => {
+    setData((prevData) => ({
+        ...prevData,
+        [e.target.name]: !prevData[e.target.name],
+    }));
+  }
+
+  const setFormData = (newData) => {
+    setData({...newData});
+  }
+  return {
+    formData,
+    onFormChange,
+    onCheckBoxChange,
+    setFormData
+  };
+};
+
+export default useFormData;
Index: frontend/src/Components/Hooks/useGet.js
===================================================================
--- frontend/src/Components/Hooks/useGet.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Hooks/useGet.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,44 @@
+import axios from "../../axios";
+import {useState, useEffect, useContext} from 'react';
+
+const useGet = (url, dep) => {
+
+    console.log(url)
+    const [data, setData] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [changed, setChanged] = useState(0)
+    const getData = async (uurl) => {
+        console.log(localStorage.getItem("sessionId"))
+        console.log("url od get " + uurl)
+        await axios.get(uurl, {maxRedirects: 0}).then((res) => {
+            console.log(res);
+            // if(res.request.responseURL.includes('8080'))
+            // {
+            //     window.location.href = "/login"
+            // }
+            setData(res.data);
+        }).catch((error) => {
+            console.log(error)
+            // window.location.href = '/error'
+        })
+            .finally(() => {
+                setIsLoading(false);
+            });
+    };
+
+    useEffect(() => {
+        setIsLoading(true);
+        getData(url);
+    }, [dep, url, changed]);
+
+    return {
+        data,
+        setData,
+        isLoading,
+        getData,
+        setChanged
+    };
+};
+
+
+export default useGet;
Index: frontend/src/Components/HotelDetails/ContactBar.js
===================================================================
--- frontend/src/Components/HotelDetails/ContactBar.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/HotelDetails/ContactBar.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,29 @@
+import React from "react";
+import { Col, Container, Row, Button } from "react-bootstrap";
+import { RiContactsFill } from "react-icons/ri"
+
+const ContactBar = () => {
+    return (<>
+                <Container
+        className="py-3 px-4 my-4 h-100"
+        style={{
+          backgroundColor: "#159895",
+          borderRadius: "1em"
+        }}
+      >
+            <Row>
+                <Col className="d-flex flex-column justify-content-center m-auto p-auto" style={{color: "white"}}>
+                    <h4 style={{marginBottom: "0"}}>Имате прашања? Контактирајте со сопственикот.</h4>
+                </Col>
+                <Col style={{textAlign: "right"}}>
+                    <Button type="submit" style={{backgroundColor: "#159895", border: "2px solid white"}} size="md">
+                        <span className="ikona my-1" color="white"><RiContactsFill style={{color: "white"}}/></span>
+                        <span className="ikona mx-3">Контакт</span>
+                    </Button>
+                </Col>
+            </Row>
+        </Container>
+    </>)
+}
+
+export default ContactBar;
Index: frontend/src/Components/HotelDetails/DescriptionContainer.js
===================================================================
--- frontend/src/Components/HotelDetails/DescriptionContainer.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/HotelDetails/DescriptionContainer.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,25 @@
+import React from "react";
+import { Container } from "react-bootstrap";
+
+const DescriptionContainer = (props) => {
+  const type = props.type == "hotel" ? "сместувањето" : props.type == "restaurant" ? "ресторанот" : "превозот";
+
+    return <>
+        <Container
+        className="py-3 px-4 my-4 h-100"
+        style={{
+          border: "4px solid #1A5F7A",
+          borderRadius: "1em",
+          boxShadow: "0 3px 5px #1A5F7A",
+          maxHeight: "90%"
+        }}
+      >
+            <h3 className="mb-3" style={{textAlign: "left", color: "#159895"}}>Опис на {type}</h3>
+            <p style={{textAlign: "left", fontSize: "1.2em"}}>
+            {props.data}
+            </p>
+        </Container>
+    </>
+}
+
+export default DescriptionContainer
Index: frontend/src/Components/HotelDetails/ReviewsCarousel.js
===================================================================
--- frontend/src/Components/HotelDetails/ReviewsCarousel.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/HotelDetails/ReviewsCarousel.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,37 @@
+import React from "react";
+import Carousel from "react-bootstrap/Carousel";
+import Review from "../BecomeAHost/Review";
+import {useState} from "react";
+import {Container} from "react-bootstrap";
+import review from "../BecomeAHost/Review";
+
+const ReviewsCarousel = (props) => {
+    document.body.style.backgroundColor = "white";
+
+    const [index, setIndex] = useState(0);
+
+    const handleSelect = (selectedIndex) => {
+        setIndex(selectedIndex);
+    };
+    return (<>
+        <Container
+            className="py-3 px-1 my-4">
+            <Carousel className="w-100" activeIndex={index} onSelect={handleSelect} indicators={false}>
+                {props.reviews.length === 0 && <Carousel.Item>
+                    <Container>
+                        <h4>За избраниот ресурс се уште не се достапни оценки!</h4>
+                    </Container>
+                </Carousel.Item>}
+                {props.reviews.map((rev) => {
+                    return (
+                        <Carousel.Item>
+                            <Review key={review.reviewId} review={rev}></Review>
+                        </Carousel.Item>
+                    )
+                })}
+            </Carousel>
+        </Container>
+    </>)
+}
+
+export default ReviewsCarousel;
Index: frontend/src/Components/HotelDetails/Room.js
===================================================================
--- frontend/src/Components/HotelDetails/Room.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/HotelDetails/Room.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,105 @@
+import React, {useState} from "react";
+import {Container, Row, Col, Image} from "react-bootstrap";
+import {LuFan} from "react-icons/lu";
+import {TbToolsKitchen2} from "react-icons/tb"
+import {MdBalcony} from "react-icons/md"
+import Carousel from "react-bootstrap/Carousel";
+
+const Room = (props) => {
+    console.log("OD SOBATA")
+    const [index, setIndex] = useState(0);
+    const handleSelect = (selectedIndex) => {
+        setIndex(selectedIndex);
+    };
+    console.log(props)
+    return (
+        <>
+            <Container style={{width: "100%"}}>
+                <Row className="g-0">
+                    <Col
+                        className="d-flex justify-content-center"
+                        style={{maxWidth: "40%"}}
+                    >
+                        <Carousel activeIndex={index} onSelect={handleSelect}>
+                            {props.data.images.map(img => {
+                                let link = img.url;
+                                if (img.url.includes('Desktop')) {
+                                    link = 'http://localhost:8080/download?fileName=' + encodeURIComponent(img.url);
+                                }
+                                return (<Carousel.Item>
+                                    <Image src={link}/>
+                                </Carousel.Item>)
+                            })}
+                            {props.data.images.length === 0 && <h4>
+                                Не се достапни слики!
+                            </h4>}
+                        </Carousel>
+                    </Col>
+                    <Col>
+                        <Container className="m-auto">
+                            <Row>
+                                <h5 style={{textAlign: "left"}}>
+                                    {props.data.hotelRoomName}
+                                </h5>
+                            </Row>
+                            <Row>
+                                {props.data.airCondition && <Col className="col-auto">
+                                    <Container className="py-1 px-1">
+                                        <Row className="d-flex flex-row">
+                                            <Col className="m-0 w-25 py-1">
+                                                <LuFan
+                                                    className="my-0 "
+                                                    color="#159895"
+                                                    size={25}
+                                                ></LuFan>
+                                            </Col>
+                                            <Col className="w-75 d-flex p-0">
+                                                <h6 style={{fontSize: "10px"}} className="m-auto">
+                                                    Климатизирано
+                                                </h6>
+                                            </Col>
+                                        </Row>
+                                    </Container>
+                                </Col>}
+                                {props.data.kitchenAvailable && <Col className="col-auto">
+                                    <Container
+                                        className="py-1 px-1">
+                                        <Row className="d-flex flex-row">
+                                            <Col className="m-0 w-25 py-1">
+                                                <TbToolsKitchen2 className="my-0 " color="#159895"
+                                                                 size={25}></TbToolsKitchen2>
+                                            </Col>
+                                            <Col className="w-75 d-flex p-0">
+                                                <h6 style={{fontSize: "10px"}} className="m-auto">Кујна</h6>
+                                            </Col>
+                                        </Row>
+                                    </Container>
+                                </Col>}
+                                {props.data.balcony && <Col className="col-auto">
+                                    <Container
+                                        className="py-1 px-1">
+                                        <Row className="d-flex flex-row">
+                                            <Col className="m-0 w-25 py-1">
+                                                <MdBalcony className="my-0 " color="#159895" size={25}></MdBalcony>
+                                            </Col>
+                                            <Col className="w-75 d-flex p-0">
+                                                <h6 style={{fontSize: "10px"}} className="m-auto">Тераса</h6>
+                                            </Col>
+                                        </Row>
+                                    </Container>
+                                </Col>}
+                            </Row>
+                            <Row>
+                                <p style={{textAlign: "left", textDecoration: "none"}}>
+                                    {props.data.hotelRoomDescription}
+                                </p>
+                            </Row>
+                        </Container>
+                    </Col>
+                </Row>
+            </Container>
+        </>
+);
+};
+
+export default Room;
Index: frontend/src/Components/HotelDetails/RoomRow.js
===================================================================
--- frontend/src/Components/HotelDetails/RoomRow.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/HotelDetails/RoomRow.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,55 @@
+import React, {useState} from "react";
+import Room from "./Room";
+import Form from "react-bootstrap/Form";
+import {Button} from "react-bootstrap";
+import useCreate from "../Hooks/useCreate";
+const RoomRow = (props) => {
+    const {createEntity} = useCreate()
+    const [getData, setData] = useState(0);
+    const room = props.room
+    console.log(props.data)
+    return (
+        <>
+            <tr>
+                <td>
+                    <Room data={room}></Room>
+                </td>
+                <td>{room.price}$</td>
+                <td>
+                    <Form.Select aria-label="Default select example" name={'numberOfBeds'}
+                    onChange={(e) => {
+                        setData(e.target.value);
+                    }}>
+                        <option></option>
+                        {[...Array(props.data.find(x => x.hotelRoom.hotelRoomId === room.hotelRoomId).numberOfBeds).keys()].map(x => {
+                            return (
+                                <option value={x+1}  >{x + 1}</option>
+                            )
+                        })}
+                    </Form.Select>
+                </td>
+                <td>
+                    <Button
+                        onClick={() => {
+                            createEntity('hotel/reserve', {
+                                hotelRoomId: room.hotelRoomId,
+                                userId: 1,
+                                hotelRoomAvailableId: props.availableId,
+                                from: props.from,
+                                to: props.to,
+                                numberOfBeds: getData
+                            })
+                        }}
+                        className="m-2"
+                        size="md"
+                        style={{backgroundColor: "#159895"}}
+                    >
+                        Резервирај
+                    </Button>
+                </td>
+            </tr>
+        </>
+    )
+}
+
+export default RoomRow
Index: frontend/src/Components/HotelDetails/RoomsTable.js
===================================================================
--- frontend/src/Components/HotelDetails/RoomsTable.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/HotelDetails/RoomsTable.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,39 @@
+import React from "react";
+import Form from "react-bootstrap/Form";
+import FaHotel from "react-icons/fa";
+import {Button} from "react-bootstrap";
+import useCreate from "../Hooks/useCreate";
+import RoomRow from "./RoomRow";
+
+const RoomsTable = (props) => {
+
+
+    return (
+        <>
+            <table className="m-auto table table-hover table-responsive">
+                <thead>
+                <tr>
+                    <th scope="col">Тип на соба</th>
+                    <th scope="col">Цена</th>
+                    <th scope="col">Колку единици?</th>
+                    <th scope="col"></th>
+                </tr>
+                </thead>
+                <tbody>
+                {Array.from(new Set(props.data.map(x => x.hotelRoom))).map((room) => {
+                    return (
+                        <>
+                            <RoomRow
+                                availableId={props.data.filter(x => x.hotelRoom.hotelRoomId === room.hotelRoomId).
+                                map(x => x.hotelRoomAvailableId)[0]}
+                                data={props.data} room={room} from={props.from} to={props.to}/>
+                        </>
+                    );
+                })}
+                </tbody>
+            </table>
+        </>
+    );
+};
+
+export default RoomsTable;
Index: frontend/src/Components/HotelEdit/HotelEditForm.js
===================================================================
--- frontend/src/Components/HotelEdit/HotelEditForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/HotelEdit/HotelEditForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,101 @@
+import React from "react";
+import { Form, Button, Container } from "react-bootstrap";
+import { GiConfirmed } from "react-icons/gi";
+import useFormData from "../Hooks/useFormData";
+
+const HotelEditForm = (props) => {
+  console.log(props.hotel);
+
+  const { formData, onFormChange, onCheckBoxChange, setFormData } = useFormData(
+    {...props.hotel}
+  );
+
+  return (
+    <>
+      <Container
+        className="rounded-5 m-5 my-auto mx-auto py-2 px-5"
+        style={{ backgroundColor: "#ffffff" }}
+      >
+        <Form>
+          <Form.Group className="mb-3" controlId="hotelName">
+            <Form.Label>Име на сместувањето</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder="Внесете го името на сместувањето"
+              name="hotelName"
+              value={formData.hotelName}
+              onChange={onFormChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="hotelDescription">
+            <Form.Label>Опис</Form.Label>
+            <Form.Control
+              as="textarea"
+              placeholder="Внесете опис на сместувањето"
+              name="hotelDescripiton"
+              value={formData.hotelDescripiton}
+              onChange={onFormChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="hotelAddress">
+            <Form.Label>Локација</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder="Внесете ја адресата на сместувањето"
+              name="hotelLocation"
+              value={formData.hotelLocation}
+              onChange={onFormChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="hotelFilters">
+            <Form.Label>Филтри</Form.Label>
+            <Form.Check
+              type="checkbox"
+              label="Паркинг"
+              name="parking"
+              checked={formData.parking}
+              onChange={onCheckBoxChange}
+            />
+            <Form.Check
+              type="checkbox"
+              label="Pet friendly"
+              name="petFriendly"
+              checked={formData.petFriendly}
+              onChange={onCheckBoxChange}
+            />
+            <Form.Check
+              type="checkbox"
+              label="Интернет"
+              name="internetAvailable"
+              checked={formData.internetAvailable}
+              onChange={onCheckBoxChange}
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3" controlId="hotelPhone">
+            <Form.Label>Контакт телефон</Form.Label>
+            <Form.Control type="text" placeholder="Внесете контакт телефон" />
+          </Form.Group>
+
+          <Form.Group className="my-1 justify-content-center">
+            <Button
+              type="submit"
+              style={{ backgroundColor: "#159895" }}
+              size="md"
+            >
+              <span className="ikona my-1">
+                <GiConfirmed />
+              </span>
+              <span className="ikona mx-3">Зачувај промени</span>
+            </Button>
+          </Form.Group>
+        </Form>
+      </Container>
+    </>
+  );
+};
+
+export default HotelEditForm;
Index: frontend/src/Components/HotelEdit/HotelEditTab.js
===================================================================
--- frontend/src/Components/HotelEdit/HotelEditTab.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/HotelEdit/HotelEditTab.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,120 @@
+import React from "react";
+import {Container, Col, Row, Image, Nav, Tab} from "react-bootstrap";
+import {useState} from "react";
+import {FaTaxi, FaHotel} from "react-icons/fa";
+import {MdOutlineStickyNote2} from "react-icons/md";
+import AddNew from "../Resources/AddNew";
+import {BiData} from "react-icons/bi"
+import RoomListing from "./RoomListing";
+import HotelEditForm from "./HotelEditForm";
+import AddHotelForm from "../Forms/AddHotelForm";
+import EditModal from "../Resources/EditModal";
+import AddAvailability from "../Resources/AddAvailability";
+import useGet from "../Hooks/useGet";
+import ReservationListing from "./ReservationListing";
+
+function HotelEditTab(props) {
+    const [activeTab, setActiveTab] = useState("/hotel");
+    const [modalData, setModalData] = useState("");
+    const [show, setShow] = useState(false);
+
+    console.log(props)
+
+    const {
+        data,
+        isLoading,
+        setData,
+        getData,
+        setChanged
+    } = useGet(`/hotel/${props.displayRoom.hotelId}/reservations/active`)
+
+    !isLoading && console.log(data)
+
+    const handleClose = () => setShow(false);
+    const handleShow = () => {
+        //e.preventDefault();
+        setShow(true);
+
+    };
+
+    const showModal = (modalData) => {
+        setModalData(modalData);
+        handleShow();
+    }
+    console.log(props.displayRoom)
+
+    const handleSelect = (eventKey) => {
+        setActiveTab(eventKey);
+    };
+
+    return (
+        <Container className="rounded-5">
+            <Tab.Container
+                activeKey={activeTab}
+                onSelect={handleSelect}
+                className="bg-dark rounded-5"
+            >
+                <Nav
+                    fill
+                    variant="tabs"
+                    className="bg-body rounded-top-5"
+                    activeKey="/hotel"
+                    id="tab_item"
+                >
+                    <Nav.Item className="tab_item rounded-5">
+                        <Nav.Link eventKey="/hotel" className="text-left rounded-5">
+              <span className="ikona">
+                <FaHotel
+                    color="#159895"
+                    style={{lineHeight: "100em"}}
+                    size={"1.5em"}
+                    className="mx-3"
+                />
+              </span>
+                            <span className="ikona">Соби</span>
+                        </Nav.Link>
+                    </Nav.Item>
+                    <Nav.Item className="tab_item">
+                        <Nav.Link eventKey="/restaurant">
+              <span className="ikona">
+                <MdOutlineStickyNote2 color="#159895" size={"1.5em"} className="mx-3"/>
+              </span>
+                            <span className="ikona">Резервации</span>
+                        </Nav.Link>
+                    </Nav.Item>
+                    <Nav.Item className="tab_item rounded-5">
+                        <Nav.Link eventKey="/transport" className="text-left rounded-5">
+              <span className="ikona">
+                <BiData color="#159895" size={"1.5em"} className="mx-3"/>
+              </span>
+                            <span className="ikona">Општи податоци</span>
+                        </Nav.Link>
+                    </Nav.Item>
+                </Nav>
+
+                <Tab.Content className="py-5 px-3 border rounded-bottom-5 bg-light">
+                    <Tab.Pane eventKey="/hotel">
+                        {props.displayRoom.hotelRooms.map((room) => {
+                            return <RoomListing key={room.hotelRoomId} data={room} showModal={showModal}/>
+                        })}
+                        <EditModal show={show} handleClose={handleClose} type="room" room={modalData}></EditModal>
+                        <AddNew Id={props.displayRoom.hotelId} refresh={props.refresh} type="room"/>
+                    </Tab.Pane>
+                    <Tab.Pane eventKey="/restaurant">
+                        {!isLoading && data.map((res) => {
+                            return (
+                                <ReservationListing data={res}/>
+                            )
+                        })}
+                        {/*<AddNew type="restaurant"/>*/}
+                    </Tab.Pane>
+                    <Tab.Pane eventKey="/transport">
+                        <AddHotelForm refresh={props.refresh} hotel={props.displayRoom}/>
+                    </Tab.Pane>
+                </Tab.Content>
+            </Tab.Container>
+        </Container>
+    );
+}
+
+export default HotelEditTab;
Index: frontend/src/Components/HotelEdit/ReservationListing.js
===================================================================
--- frontend/src/Components/HotelEdit/ReservationListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/HotelEdit/ReservationListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,30 @@
+import {Col, Container, Row} from "react-bootstrap";
+import React from "react";
+
+const ReservationListing = (props) => {
+    return(
+        <>
+            <Container className="py-3 px-1 my-4"
+                       style={{
+                           border: "4px solid #159895",
+                           borderRadius: "1em",
+                           boxShadow: "0 3px 5px #159895",
+                           maxWidth: "90%",
+                       }}>
+                <Row>
+                    <Col md={8} className="d-flex flex-column justify-content-start ps-5">
+                        <h3 style={{fontWeight: "bold"}} className={'text-start'}>Резервација за:</h3>
+                        <h4 className={'text-start'}>{props.data.hotelRoom.hotelRoomName}</h4>
+                        <h4 className={'text-start'}>{props.data.user.name + ' ' + props.data.user.surname}</h4>
+                        <h5 className={'text-start'}>{props.data.dateFrom + ' - ' + props.data.dateTo}</h5>
+                    </Col>
+                    <Col md={4} className="d-flex flex-column justify-content-center align-content-center">
+                        <h3>Вкупна цена: <br></br>{props.data.hotelRoom.price}$</h3>
+                    </Col>
+                </Row>
+            </Container>
+        </>
+    )
+}
+
+export default ReservationListing;
Index: frontend/src/Components/HotelEdit/RoomListing.js
===================================================================
--- frontend/src/Components/HotelEdit/RoomListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/HotelEdit/RoomListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,55 @@
+import React from "react";
+import {useState} from "react";
+import {Col, Container, Row, Image, Modal, Button} from "react-bootstrap";
+import LoginForm from "../Login/LoginForm";
+import ChangePasswordForm from "../Forms/ChangePasswordForm";
+import {AiOutlinePlusCircle} from "react-icons/ai"
+import AddAvailability from "../Resources/AddAvailability";
+import AddImages from "../Resources/AddImages";
+
+
+const RoomListing = (props) => {
+
+    const type = props.type == "hotel" ? "сместувањето" : props.type == "restaurant" ? "ресторанот" : "превозот";
+    return (
+        <>
+            <Container className="py-3 px-1 my-4"
+                       style={{
+                           border: "4px solid #159895",
+                           borderRadius: "1em",
+                           boxShadow: "0 3px 5px #159895",
+                           maxWidth: "90%",
+                       }}>
+                <Row>
+                    <Col className="d-flex justify-content-center">
+                        <Image onClick={(e) => {
+                            e.preventDefault();
+                            props.showModal(props.data);
+                            console.log("kliknav")
+                        }}
+                            src="https://img.freepik.com/free-photo/luxury-classic-modern-bedroom-suite-hotel_105762-1787.jpg?w=200"
+                            style={{
+                                height: "8em",
+                                borderRadius: "1em",
+                                boxShadow: "0 4px 20px lightblue",
+                                maxWidth: "100%",
+                            }}
+                        ></Image>
+                    </Col>
+                    <Col className="d-flex flex-column justify-content-center" style={{textAlign: "left"}}>
+                        <h2>{props.data.hotelRoomName}</h2>
+                        <h2>Цена по ноќ: {props.data.price}</h2>
+                    </Col>
+                    <Col className="d-flex flex-column justify-content-center align-content-center">
+                        <AddImages type="room" Id={props.data.hotelRoomId} />
+                    </Col>
+
+                    <Col className="d-flex flex-column justify-content-center align-content-center">
+                        <AddAvailability type="room" hotelRoomId={props.data.hotelRoomId} />
+                    </Col>
+                </Row>
+            </Container>
+    </>)
+}
+
+export default RoomListing;
Index: frontend/src/Components/ImageUpload/ImageUpload.js
===================================================================
--- frontend/src/Components/ImageUpload/ImageUpload.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/ImageUpload/ImageUpload.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import { Button, Container, FormControl, FormGroup, FormLabel, Image } from "react-bootstrap";
+import useFileChange from "../Hooks/FilesUpload/useFileChange";
+
+const ImageUpload = () => {
+    const { onFileChangeHandler } = useFileChange();
+    const [selectedFiles, setSelectedFiles] = useState([]);
+
+    return (
+        <Container>
+            <FormGroup className="mb-3">
+                <FormLabel>Upload Images:</FormLabel>
+                <FormControl
+                    type="file"
+                    multiple
+                    onChange={(e) => setSelectedFiles(Array.from(e.target.files))}
+                />
+            </FormGroup>
+            <Button onClick={() => onFileChangeHandler(selectedFiles)}>
+                Upload Files
+            </Button>
+            <Container>
+                {selectedFiles.map((file, index) => (
+                    <Image
+                        key={index}
+                        onClick={() => {}}
+                        fluid
+                        src={URL.createObjectURL(file)}
+                        alt={`Uploaded Image ${index + 1}`}
+                    />
+                ))}
+            </Container>
+        </Container>
+    );
+};
+
+export default ImageUpload;
Index: frontend/src/Components/Layout/CarouselHome/Carousel.js
===================================================================
--- frontend/src/Components/Layout/CarouselHome/Carousel.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Layout/CarouselHome/Carousel.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,43 @@
+import React from 'react';
+import { useState } from 'react';
+import Carousel from 'react-bootstrap/Carousel';
+
+function HomeCarousel() {
+  const [index, setIndex] = useState(0);
+
+  const handleSelect = (selectedIndex) => {
+    setIndex(selectedIndex);
+  };
+
+  return (
+    <Carousel activeIndex={index} onSelect={handleSelect}>
+      <Carousel.Item>
+        <img
+          className="d-block w-100 h-400 rounded-5"
+          src="https://www.kovz.gov.mk/articleImage.img/2022/08/05/JPG_010_-_Jovan_Kaneo_church_in_Ohrid__panorama-min.jpg"
+          alt="First slide"
+          style={{height:"50vh"}}
+        />
+      </Carousel.Item>
+      <Carousel.Item>
+        <img
+          className="d-block w-100 rounded-5"
+          src="https://macedonia-timeless.com/wp-content/uploads/2018/08/dojran-ezero.jpg"
+          alt="Second slide"
+          style={{height:"50vh"}}
+        />
+
+      </Carousel.Item>
+      <Carousel.Item>
+        <img
+          className="d-block w-100 rounded-5"
+          src="https://i.imgur.com/NFlxbqY.jpg"
+          alt="Third slide"
+          style={{height:"50vh"}}
+        />
+      </Carousel.Item>
+    </Carousel>
+  );
+}
+
+export default HomeCarousel;
Index: frontend/src/Components/Layout/Listings/ListingCard.js
===================================================================
--- frontend/src/Components/Layout/Listings/ListingCard.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Layout/Listings/ListingCard.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,7 @@
+import { Container } from "react-bootstrap";
+
+function ListCard(props) {
+  return <Container className="my-5">{props.children}</Container>;
+}
+
+export default ListCard;
Index: frontend/src/Components/Layout/Navbar/Navigation.js
===================================================================
--- frontend/src/Components/Layout/Navbar/Navigation.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Layout/Navbar/Navigation.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,121 @@
+import {Button, Modal} from "react-bootstrap";
+import React, {useState} from "react";
+import { Container, Image, Navbar } from "react-bootstrap";
+import { Nav } from "react-bootstrap";
+import { BsFillPersonFill } from "react-icons/bs";
+import { useNavigate } from "react-router-dom";
+import useGet from "../../Hooks/useGet";
+import axios from "../../../axios.js";
+import {useAuth} from "../../Context/AuthContext";
+import ImageUpload from "../../ImageUpload/ImageUpload";
+//import logo from 'assets/images/logo.png';
+//src="https://upload.wikimedia.org/wikipedia/commons/0/08/Vergina_Sun_-_Golden_Larnax.png"
+
+function Navigation(props) {
+  const navigator = useNavigate();
+  const Auth = useAuth();
+  const isLoggedIn = Auth.userIsAuthenticated();
+
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  return (
+    <>
+      <Navbar
+        bg="white"
+        variant="white"
+        expand="md"
+        className={props.mt == "0" ? "px-5 m-4" : ""}
+      >
+        <Container>
+          <Navbar.Brand href="/home">
+            <span className="ikona">
+              <Image
+                id="background-img"
+                src="https://i.ibb.co/BwtmZqX/logo.png"
+                width={60}
+                height={60}
+              ></Image>
+            </span>
+            <span className="mx-3 ikona">
+              <span className="svetlo">Tour</span>
+              <span className="temno">Mate</span>
+            </span>
+          </Navbar.Brand>
+          <Navbar.Toggle aria-controls="navbarScroll" />
+          <Navbar.Collapse id="navbarScroll">
+            <Nav className="ms-auto" navbarScroll>
+              <Nav.Link className="m-2" href="/home">
+                Home
+              </Nav.Link>
+              <Nav.Link className="m-2" href="#features">
+                Features
+              </Nav.Link>
+              <Nav.Link className="m-2" href="#pricing">
+                <Button onClick={handleShow}></Button>
+              </Nav.Link>
+              {!isLoggedIn && (
+                <Button
+                  className="m-2"
+                  size="md"
+                  style={{ backgroundColor: "#159895" }}
+                  onClick={() => {
+                    navigator("/login");
+                  }}
+                >
+                  <BsFillPersonFill size={"1.5em"}></BsFillPersonFill> Најави се
+                </Button>
+              )}
+              {isLoggedIn && (
+                <>
+                  <Nav.Link className="m-2" href="/profile">
+                    {Auth.getUser().username}
+                  </Nav.Link>
+                  <Button
+                    className="m-2"
+                    size="md"
+                    style={{ backgroundColor: "#159895" }}
+                    onClick={async () => {
+                      await axios.get("/logout")
+                      .then((res) => {
+                        console.log(res);
+                        Auth.userLogout();
+                      })
+                      .catch((err) => {
+                        console.log(err)
+                        window.location.href="/login"
+                      })
+                    }}
+                  >
+                    <BsFillPersonFill size={"1.5em"}></BsFillPersonFill> 
+                    Одјави се
+                  </Button>
+                </>
+              )}
+            </Nav>
+          </Navbar.Collapse>
+        </Container>
+      </Navbar>
+      <br />
+
+      <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title>Modal heading</Modal.Title>
+        </Modal.Header>
+        <Modal.Body><ImageUpload/></Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={handleClose}>
+            Close
+          </Button>
+          <Button variant="primary" onClick={handleClose}>
+            Save Changes
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+}
+
+export default Navigation;
Index: frontend/src/Components/Layout/Offers/Offers.js
===================================================================
--- frontend/src/Components/Layout/Offers/Offers.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Layout/Offers/Offers.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,125 @@
+import React from 'react';
+import { Col, Container, Row, Image } from 'react-bootstrap';
+
+function Offers() {
+  return (
+    <>
+        <Container fluid="md" className='my-5'>
+            <Row>
+                <Col>
+                    <a href='#' className='img-link'>
+                        <Container>
+                            <div style={{position: "relative"}}>
+                                    <Image
+                                        className="d-block w-100 rounded-5 mb-5"
+                                        style={{height: "53.2vh"}}
+                                        src="https://archello.com/thumbs/images/2020/08/09/comelite-architecture-structure-and-interior-design-contemporary-luxury-apartment-design-apartments-archello.1596935634.5614.jpg?fit=crop&w=414&h=518"
+                                        alt="Second slide"
+                                    />
+                                    <div
+                                        style={{
+                                            position: "absolute",
+                                            top: 0,
+                                            left: 0,
+                                            width: "100%",
+                                            height: "100%",
+                                            backgroundColor: "rgba(0, 0, 0, 0.5)", // Adjust the opacity (last value) as needed
+                                        }}
+                                        className="rounded-5"
+                                    />
+                            </div>
+                            <h4 style={{marginTop: "-25%", color: "white", zIndex: "99999", position: "relative"}}>
+                                Апартмани
+                            </h4>
+                        </Container>
+                    </a>
+                </Col>
+                <Col>
+                    <a href='#' className='img-link'>
+                        <Container className='mb-5'>
+                            <div style={{position: "relative"}}>
+                                <Image
+                                    className="d-block w-100 rounded-5 mb-5"
+                                    style={{height: "25vh"}}
+                                    src="https://i.ibb.co/V9vHbBT/303065972-497838965514102-2603054556040313705-n.jpg"
+                                    alt="Second slide"
+                                />
+                                <div
+                                    style={{
+                                        position: "absolute",
+                                        top: 0,
+                                        left: 0,
+                                        width: "100%",
+                                        height: "100%",
+                                        backgroundColor: "rgba(0, 0, 0, 0.5)", // Adjust the opacity (last value) as needed
+                                    }}
+                                    className="rounded-5"
+                                />
+                            </div>
+                            <h4 style={{marginTop: "-25%", color: "white", zIndex: "99999", position: "relative"}}>
+                                Традиционална кујна
+                            </h4>
+                        </Container>
+                        </a>
+                    <a href='#' className='img-link'>
+                        <Container>
+                            <div style={{position: "relative"}}>
+                                    <Image
+                                        className="d-block w-100 rounded-5 mb-5"
+                                        style={{height: "25vh"}}
+                                        src="https://www.tastingtable.com/img/gallery/20-italian-dishes-you-need-to-try-at-least-once/l-intro-1643403830.jpg"
+                                        alt="Second slide"
+                                    />
+                                    <div
+                                        style={{
+                                            position: "absolute",
+                                            top: 0,
+                                            left: 0,
+                                            width: "100%",
+                                            height: "100%",
+                                            backgroundColor: "rgba(0, 0, 0, 0.5)", // Adjust the opacity (last value) as needed
+                                        }}
+                                        className="rounded-5"
+                                    />
+                                </div>
+                            <h4 style={{marginTop: "-25%", color: "white", zIndex: "99999", position: "relative"}}>
+                                Интернационална кујна
+                            </h4>
+                        </Container>
+                    </a>
+                </Col>
+                <Col>
+                    <a href='#' className='img-link'>
+                        <Container>
+                            <div style={{position: "relative"}}>
+                                    <Image
+                                        className="d-block w-100 rounded-5 mb-5"
+                                        style={{height: "53.2vh"}}
+                                        src="https://img.freepik.com/premium-photo/vertical-warm-toned-portrait-white-labrador-dog-lying-bed-cozy-home-interior-lit-by-sunlight-copy-space_236854-29020.jpg?w=2000"
+                                        alt="Second slide"
+                                    />
+                                    <div
+                                        style={{
+                                            position: "absolute",
+                                            top: 0,
+                                            left: 0,
+                                            width: "100%",
+                                            height: "100%",
+                                            backgroundColor: "rgba(0, 0, 0, 0.5)", // Adjust the opacity (last value) as needed
+                                        }}
+                                        className="rounded-5"
+                                    />
+                            </div>
+                            <h4 style={{marginTop: "-25%", color: "white", zIndex: "99999", position: "relative"}}>
+                                Pet friendly
+                            </h4>
+                        </Container>
+                    </a>
+                </Col>
+            </Row>
+        </Container>
+    </>
+  );
+}
+
+export default Offers;
Index: frontend/src/Components/Listings/FilterButton.js
===================================================================
--- frontend/src/Components/Listings/FilterButton.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Listings/FilterButton.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,136 @@
+import React from "react";
+import { Col, Form, InputGroup, NavDropdown, Row, Button } from "react-bootstrap";
+import Dropdown from "react-bootstrap/Dropdown";
+import { BiFilterAlt } from "react-icons/bi";
+
+const FilterButton = () => {
+  return (
+    <Dropdown autoClose="outside">
+      <Dropdown.Toggle variant="success" id="dropdown-basic" size="lg">
+        <span className="ikona my-1">
+          <BiFilterAlt />
+        </span>
+        <span className="ikona mx-3">Филтри</span>
+      </Dropdown.Toggle>
+
+      <Dropdown.Menu>
+        <Dropdown.Item>
+          <NavDropdown
+            id="filter-room-type"
+            title="Тип на соба"
+            menuVariant="light"
+            drop="start"
+            autoClose="outside"
+          >
+            <NavDropdown.Item>
+              <Form.Check type="checkbox" id={`check-room`} label="Соба" />
+            </NavDropdown.Item>
+            <NavDropdown.Item>
+              <Form.Check
+                type="checkbox"
+                id={`check-apartment    `}
+                label="Апартман"
+              />
+            </NavDropdown.Item>
+            <NavDropdown.Item href="#action/3.3">
+              <Form.Check type="checkbox" id={`default-check`} label="Стан" />
+            </NavDropdown.Item>
+          </NavDropdown>
+        </Dropdown.Item>
+        <Dropdown.Item>
+          <NavDropdown
+            id="filter-room-type"
+            title="Број на ѕвезди"
+            menuVariant="light"
+            drop="start"
+            autoClose="outside"
+          >
+            <NavDropdown.Item>
+              <Form.Check type="checkbox" id={`check-stars-1`} label="1" />
+            </NavDropdown.Item>
+            <NavDropdown.Item>
+              <Form.Check type="checkbox" id={`check-stars-2`} label="2" />
+            </NavDropdown.Item>
+            <NavDropdown.Item href="#action/3.3">
+              <Form.Check type="checkbox" id={`check-stars-3`} label="3" />
+            </NavDropdown.Item>
+            <NavDropdown.Item href="#action/3.3">
+              <Form.Check type="checkbox" id={`check-stars-4`} label="4" />
+            </NavDropdown.Item>
+            <NavDropdown.Item href="#action/3.3">
+              <Form.Check type="checkbox" id={`check-stars-5`} label="5" />
+            </NavDropdown.Item>
+          </NavDropdown>
+        </Dropdown.Item>
+        <Dropdown.Item>
+          <NavDropdown
+            id="filter-price-range"
+            title="Ценовен ранг"
+            menuVariant="light"
+            drop="start"
+            autoClose="outside"
+          >
+            <NavDropdown.Item>
+              <Row className="gx-3">
+                <Col className="mb-3">
+                  <Form.Control
+                    size="sm"
+                    type="text"
+                    placeholder="Од"
+                    id="price-from"
+                  ></Form.Control>
+                </Col>
+                <Col>
+                  <Form.Control
+                    size="sm"
+                    type="text"
+                    placeholder="До"
+                    id="price-to"
+                  ></Form.Control>
+                </Col>
+                <Col>
+                <Button
+                  type="submit"
+                  style={{ backgroundColor: "#159895" }}
+                  size="sm"
+                  className="w-100"
+                >
+                  <span className="ikona mx-3">ОК</span>
+                </Button>
+                </Col>
+              </Row>
+            </NavDropdown.Item>
+          </NavDropdown>
+        </Dropdown.Item>
+        <Dropdown.Item href="#/action-1">
+          <Form.Check type="checkbox" id={`default-check`} label="Паркинг" />
+        </Dropdown.Item>
+        <Dropdown.Item href="#/action-2">
+          <Form.Check
+            type="checkbox"
+            id={`default-check`}
+            label="Pet friendly"
+          />
+        </Dropdown.Item>
+        <Dropdown.Item href="#/action-3">
+          <Form.Check type="checkbox" id={`default-check`} label="Кујна" />
+        </Dropdown.Item>
+        <Dropdown.Item href="#/action-3">
+          <Form.Check type="checkbox" id={`default-check`} label="Интернет" />
+        </Dropdown.Item>
+        <Dropdown.Item href="#/action-3">
+          <Form.Check type="checkbox" id={`default-check`} label="Тераса" />
+        </Dropdown.Item>
+        <Dropdown.Item href="#/action-3">
+          <Form.Check
+            type="checkbox"
+            id={`default-check`}
+            label="Климатизирано"
+          />
+        </Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+export default FilterButton;
Index: frontend/src/Components/Listings/HotelListing.js
===================================================================
--- frontend/src/Components/Listings/HotelListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Listings/HotelListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,123 @@
+import {Col, Container, Image, Row, Button} from "react-bootstrap";
+import {BsFillPersonFill} from "react-icons/bs";
+import {MdOutlineLocalOffer} from "react-icons/md";
+import {Link} from "react-router-dom";
+
+function HotelListing(props) {
+    console.log(props)
+    return (
+        <>
+            <Container
+                className="py-3 px-1 my-4"
+                style={{
+                    border: "4px solid lightblue",
+                    borderRadius: "1em",
+                    boxShadow: "0 3px 5px lightblue",
+                    maxWidth: "60%",
+                }}
+            >
+                <Row className="mx-1 my-1" style={{textAlign: "left"}}>
+                    <Col className="d-flex justify-content-center">
+                        <Image
+                            src="https://www.imgacademy.com/sites/default/files/legacyhotel.jpg"
+                            style={{
+                                height: "15em",
+                                borderRadius: "1em",
+                                boxShadow: "0 4px 20px lightblue",
+                                maxWidth: "100%",
+                            }}
+                        ></Image>
+                    </Col>
+                    <Col>
+                        <Row>
+                            <h3>{props.data.hotelName}</h3>
+                        </Row>
+                        <Row>
+                            <h8>{props.data.hotelLocation}, Македонија</h8>
+                        </Row>
+                        <Row className="mt-3 ml-2">
+                            <Col className="md-4">
+                                <h4 style={{fontWeight: "bold"}}></h4>
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col className="ml-5">
+                                {/* <h5>{props.data.hotelCaption}</h5> */}
+                                <h5>Краток опис</h5>
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col>
+                                <h6>{props.data.hotelDescripiton}</h6>
+                            </Col>
+                        </Row>
+                    </Col>
+                    <Col>
+                        <Container
+                            fluid
+                            className="px-0"
+                            style={{
+                                display: "flex",
+                                flexDirection: "column",
+                                alignItems: "flex-end",
+                                justifyContent: "space-between",
+                                height: "100%",
+                            }}
+                        >
+                            <Row className="justify-self-end" style={{textAlign: "right"}}>
+                                <Col style={{textAlign: "right"}}>
+                                    <h6>Многу добро</h6>
+                                </Col>
+                                <Col>
+                  <span
+                      style={{
+                          backgroundColor: "#159895",
+                          padding: "0.75em",
+                          fontWeight: "bold",
+                          fontSize: "1.25rem",
+                          borderRadius: "0.75em",
+                          color: "white",
+                      }}
+                  >
+                    {/* {props.data.hotelRating} */}
+                      9.1
+                  </span>
+                                </Col>
+                            </Row>
+                            <Row className="w-75 justify-self-end">
+                                <Container
+                                    className="justify-self-end"
+                                    style={{textAlign: "right"}}
+                                >
+                                    <Row>
+                                        <h4>{props.data.totalPrice}$</h4>
+                                    </Row>
+                                    <Row className="w-100">
+                                        <Link
+                                            to="/details/hotel"
+                                            state={{data: props.data, from: props.from, to: props.to}}
+                                            className="w-100"
+                                        >
+                                            <Button
+                                                className="m-2"
+                                                size="md"
+                                                style={{backgroundColor: "#159895"}}
+                                                onClick={() => {
+                                                }}
+                                            >
+                                                <MdOutlineLocalOffer size={"1.5em"}></MdOutlineLocalOffer>{" "}
+                                                Кон понудата
+                                            </Button>
+                                        </Link>
+                                    </Row>
+                                </Container>
+                            </Row>
+                        </Container>
+                    </Col>
+                </Row>
+            </Container>
+        </>
+    );
+}
+
+export default HotelListing;
Index: frontend/src/Components/Listings/RestaurantListing.js
===================================================================
--- frontend/src/Components/Listings/RestaurantListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Listings/RestaurantListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,122 @@
+import {Col, Container, Image, Row, Button} from "react-bootstrap";
+import {BsFillPersonFill} from "react-icons/bs";
+import {MdOutlineLocalOffer} from "react-icons/md";
+import {Link} from "react-router-dom";
+
+function RestaurantListing(props) {
+    console.log(props)
+    return (
+        <>
+            <Container
+                className="py-3 px-1 my-4"
+                style={{
+                    border: "4px solid lightblue",
+                    borderRadius: "1em",
+                    boxShadow: "0 3px 5px lightblue",
+                    maxWidth: "60%",
+                }}
+            >
+                <Row className="mx-1 my-1" style={{textAlign: "left"}}>
+                    <Col className="d-flex justify-content-center">
+                        <Image
+                            src="https://www.imgacademy.com/sites/default/files/legacyhotel.jpg"
+                            style={{
+                                height: "15em",
+                                borderRadius: "1em",
+                                boxShadow: "0 4px 20px lightblue",
+                                maxWidth: "100%",
+                            }}
+                        ></Image>
+                    </Col>
+                    <Col>
+                        <Row>
+                            <h3>{props.data.restaurantName}</h3>
+                        </Row>
+                        <Row>
+                            <h8>{props.data.restaurantLocation}, Македонија</h8>
+                        </Row>
+                        <Row className="mt-3 ml-2">
+                            <Col className="md-4">
+                                <h4 style={{fontWeight: "bold"}}></h4>
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col className="ml-5">
+                                {/* <h5>{props.data.hotelCaption}</h5> */}
+                                <h5>Тип на кујна</h5>
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col>
+                                <h6>{props.data.cousineType}</h6>
+                            </Col>
+                        </Row>
+                    </Col>
+                    <Col>
+                        <Container
+                            fluid
+                            className="px-0"
+                            style={{
+                                display: "flex",
+                                flexDirection: "column",
+                                alignItems: "flex-end",
+                                justifyContent: "space-between",
+                                height: "100%",
+                            }}
+                        >
+                            <Row className="justify-self-end" style={{textAlign: "right"}}>
+                                <Col style={{textAlign: "right"}}>
+                                    <h6>Многу добро</h6>
+                                </Col>
+                                <Col>
+                  <span
+                      style={{
+                          backgroundColor: "#159895",
+                          padding: "0.75em",
+                          fontWeight: "bold",
+                          fontSize: "1.25rem",
+                          borderRadius: "0.75em",
+                          color: "white",
+                      }}
+                  >
+                     {props.data.averageScore.toFixed(1)}
+                  </span>
+                                </Col>
+                            </Row>
+                            <Row className="w-75 justify-self-end">
+                                <Container
+                                    className="justify-self-end"
+                                    style={{textAlign: "right"}}
+                                >
+                                    <Row>
+
+                                    </Row>
+                                    <Row className="w-100">
+                                        <Link
+                                            to="/details/restaurant"
+                                            state={{data: props.data, params: props.params}}
+                                            className="w-100"
+                                        >
+                                            <Button
+                                                className="m-2"
+                                                size="md"
+                                                style={{backgroundColor: "#159895"}}
+                                                onClick={() => {
+                                                }}
+                                            >
+                                                <MdOutlineLocalOffer size={"1.5em"}></MdOutlineLocalOffer>{" "}
+                                                Кон понудата
+                                            </Button>
+                                        </Link>
+                                    </Row>
+                                </Container>
+                            </Row>
+                        </Container>
+                    </Col>
+                </Row>
+            </Container>
+        </>
+    );
+}
+
+export default RestaurantListing;
Index: frontend/src/Components/Listings/SortButton.js
===================================================================
--- frontend/src/Components/Listings/SortButton.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Listings/SortButton.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,24 @@
+import React from "react";
+import Dropdown from 'react-bootstrap/Dropdown';
+import { BsSortUp } from "react-icons/bs"
+
+const SortButton = () => {
+    return (
+        <Dropdown>
+          <Dropdown.Toggle variant="success" id="dropdown-basic" size="lg">
+          <span className="ikona my-1"><BsSortUp/></span>
+              <span className="ikona mx-3">Сортирај</span>
+          </Dropdown.Toggle>
+    
+          <Dropdown.Menu>
+            <Dropdown.Item href="#/action-1">Цена растечки</Dropdown.Item>
+            <Dropdown.Item href="#/action-2">Цена опаѓачки</Dropdown.Item>
+            <Dropdown.Item href="#/action-3">Име растечки</Dropdown.Item>
+            <Dropdown.Item href="#/action-3">Име опаѓачки</Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown>
+      );
+}
+
+
+  export default SortButton;
Index: frontend/src/Components/Listings/TransportListing.js
===================================================================
--- frontend/src/Components/Listings/TransportListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Listings/TransportListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,92 @@
+import React from "react";
+import { Container, Row, Col, Button } from "react-bootstrap";
+import { RxDot } from "react-icons/rx";
+import Line from "../TransportDetails/Line";
+import Waypoint from "../TransportDetails/Waypoint";
+import FinalPoint from "../TransportDetails/FinalPoint";
+import { MdOutlineLocalOffer } from "react-icons/md";
+import { Link } from "react-router-dom"
+
+const TransportListing = (props) => {
+  
+
+
+  return (
+    <>
+      <Container
+        className="py-4 px-3 my-4"
+        style={{
+          border: "4px solid lightblue",
+          borderRadius: "1em",
+          boxShadow: "0 3px 5px lightblue",
+          maxWidth: "60%",
+        }}
+      >
+        <Row>
+          <Col>
+            <Waypoint left="true" city={props.data.from} time={props.data.date}></Waypoint>
+            <Waypoint left="true" city={props.data.routes.join(", ")} time={props.data.date} routes="true"></Waypoint>
+            <FinalPoint left="true" city={props.data.to} time={props.data.time}></FinalPoint>
+          </Col>
+          <Col>
+            <Container
+              fluid
+              className="px-0"
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "flex-end",
+                justifyContent: "space-between",
+                height: "100%",
+              }}
+            >
+              <Row className="justify-self-end mr-5 mb-3" style={{ textAlign: "right" }}>
+                <Col style={{ textAlign: "right" }}>
+                  <h6 className="my-auto">Многу добро</h6>
+                </Col>
+                <Col>
+                  <span className="my-auto"
+                    style={{
+                      backgroundColor: "#159895",
+                      padding: "0.75em",
+                      fontWeight: "bold",
+                      fontSize: "1.25rem",
+                      borderRadius: "0.75em",
+                      color: "white",
+                    }}
+                  >
+                    9.1
+                  </span>
+                </Col>
+              </Row>
+              <Row className="w-50 justify-self-end">
+                <Container
+                  className="justify-self-end"
+                  style={{ textAlign: "right" }}
+                >
+                  <Row>
+                    <h4>{props.data.price}$</h4>
+                  </Row>
+                  <Row className="w-100">
+                    <Link to="/details/transport" state={ {data: props.data, params: props.params} }>
+                    <Button
+                      className="m-2"
+                      size="md"
+                      style={{ backgroundColor: "#159895" }}
+                    >
+                      <MdOutlineLocalOffer size={"1.5em"}></MdOutlineLocalOffer>{" "}
+                      Кон понудата
+                    </Button>
+                    </Link>
+                  </Row>
+                </Container>
+              </Row>
+            </Container>
+          </Col>
+        </Row>
+      </Container>
+    </>
+  );
+};
+
+export default TransportListing;
Index: frontend/src/Components/Login/LoginForm.js
===================================================================
--- frontend/src/Components/Login/LoginForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Login/LoginForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,78 @@
+import React from "react";
+import { Container, Form, Button } from "react-bootstrap";
+import { AiFillLock } from "react-icons/ai";
+import useFormData from "../Hooks/useFormData";
+import useLogin from "../Hooks/User/useLogin";
+import { Link } from "react-router-dom";
+
+const LoginForm = () => {
+  const { formData, onFormChange, onCheckBoxChange, setFormData } = useFormData(
+    {
+      email: "",
+      password: "",
+    }
+  );
+
+  const { login } = useLogin();
+
+  return (
+    <Container
+      className="rounded-5 m-5 my-auto mx-auto py-5 px-5"
+      style={{ backgroundColor: "#ffffff" }}
+    >
+      <Form>
+        <Form.Group className="mb-3" controlId="formBasicEmail">
+          <Form.Label>Е-адреса</Form.Label>
+          <Form.Control
+            type="email"
+            placeholder="Enter email"
+            name="email"
+            onChange={onFormChange}
+            value={formData.email}
+          />
+          <Form.Text className="text-muted">
+            Вашите податоци никогаш нема да бидат споделени.
+          </Form.Text>
+        </Form.Group>
+
+        <Form.Group className="mb-3" controlId="formBasicPassword">
+          <Form.Label>Лозинка</Form.Label>
+          <Form.Control
+            type="password"
+            placeholder="Password"
+            name="password"
+            onChange={onFormChange}
+            value={formData.password}
+          />
+        </Form.Group>
+        <Form.Group className="mb-3" controlId="formBasicCheckbox">
+          <Form.Check type="checkbox" label="Check me out" />
+        </Form.Group>
+        <Link to={"/register"} style={{textDecoration: "none"}}>
+          <Form.Text className="text-muted" style={{color: "#159895!important"}} >
+            Регистритрај се
+          </Form.Text>
+        </Link>
+        <Form.Group className="my-1">
+          <Button
+            type="submit"
+            style={{ backgroundColor: "#159895" }}
+            size="md"
+            onClick={(e) => {
+              e.preventDefault();
+              console.log(formData);
+              login(formData)
+            }}
+          >
+            <span className="ikona my-1">
+              <AiFillLock />
+            </span>
+            <span className="ikona mx-3">Најави се</span>
+          </Button>
+        </Form.Group>
+      </Form>
+    </Container>
+  );
+};
+
+export default LoginForm;
Index: frontend/src/Components/Misc/PrivateRoute.js
===================================================================
--- frontend/src/Components/Misc/PrivateRoute.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Misc/PrivateRoute.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,10 @@
+import React from 'react'
+import { Navigate } from 'react-router-dom'
+import {useAuth} from "../Context/AuthContext";
+
+function PrivateRoute({ children }) {
+  const { userIsAuthenticated } = useAuth()
+  return userIsAuthenticated() ? children : <Navigate to="/login" />
+}
+
+export default PrivateRoute
Index: frontend/src/Components/Modal.js
===================================================================
--- frontend/src/Components/Modal.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Modal.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+
+function StaticExample() {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  return (
+    <>
+      <Button variant="primary" onClick={handleShow}>
+        Launch demo modal
+      </Button>
+
+      <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title>Modal heading</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>Woohoo, you are reading this text in a modal!</Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={handleClose}>
+            Close
+          </Button>
+          <Button variant="primary" onClick={handleClose}>
+            Save Changes
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+}
+
+export default StaticExample;
Index: frontend/src/Components/MostPopularRoutes/MostPopularRoutesCont.js
===================================================================
--- frontend/src/Components/MostPopularRoutes/MostPopularRoutesCont.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/MostPopularRoutes/MostPopularRoutesCont.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,31 @@
+import React from "react";
+import Route from "./Route";
+import { Col, Container, Row } from "react-bootstrap";
+
+const MostPopularRoutesCont = () => {
+    return(
+        <>
+            <Container className="my-5">
+                <h3 style={{textAlign: "left"}} className="mb-5">Најпребарувани рути</h3>    
+                <Row className="my-3">
+                    <Col>
+                        <Route destination1="Скопје" destination2="Битола" imag1="https://netpress.com.mk/wp-content/uploads/2021/03/skopje-voin-na-konj-centar.jpg" imag2="https://i.imgur.com/MKEXLI5.png"/>
+                    </Col>
+                    <Col>
+                        <Route destination1="Скопје" destination2="Тетово" imag1="https://netpress.com.mk/wp-content/uploads/2021/03/skopje-voin-na-konj-centar.jpg" imag2="https://www.kovz.gov.mk/articleImage.img/2022/07/06/_B2C3197-min.jpg"/>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col>
+                        <Route destination1="Скопје" destination2="Велес" imag1="https://netpress.com.mk/wp-content/uploads/2021/03/skopje-voin-na-konj-centar.jpg" imag2="https://i.imgur.com/UmcAwJS.png"/>
+                    </Col>
+                    <Col>
+                        <Route destination1="Скопје" destination2="Охрид" imag1="https://netpress.com.mk/wp-content/uploads/2021/03/skopje-voin-na-konj-centar.jpg" imag2="https://i.imgur.com/aRfzEFm.jpg"/>
+                    </Col>
+                </Row>
+            </Container>
+        </>
+    )
+}
+
+export default MostPopularRoutesCont
Index: frontend/src/Components/MostPopularRoutes/Route.js
===================================================================
--- frontend/src/Components/MostPopularRoutes/Route.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/MostPopularRoutes/Route.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,43 @@
+import React from "react";
+import { Col, Container, Image, Row } from "react-bootstrap";
+import { TbArrowsExchange } from "react-icons/tb"
+
+const Route = (props) => {
+    return (
+        <>
+            <Container className="border py-2 rounded-3" style={{borderColor: "#1A5F7A", borderWidth: "3px"}}>
+                <Row>
+                    <Col>
+                        <Image
+                            src={props.imag1}
+                            className="thumbnail rounded"
+                            width={75}
+                            height={75}
+                        />
+                    </Col>
+                    <Col>
+                        <h5 className="w-25">{props.destination1}</h5>
+                    </Col>
+                    <Col className="my-auto">
+                        <TbArrowsExchange size="3rem" color="#159895"></TbArrowsExchange>
+                    </Col>
+                    <Col clas>
+                        <h5 className="w-25">{props.destination2}</h5>
+                    </Col>
+                    <Col>
+                        <Image
+                            src={props.imag2}
+                            className="thumbnail rounded"
+                            width={75}
+                            height={75}
+                        />
+                    </Col>
+                </Row>
+            </Container>
+
+            
+        </>
+    )
+}
+
+export default Route;
Index: frontend/src/Components/MostVisited/Destination.js
===================================================================
--- frontend/src/Components/MostVisited/Destination.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/MostVisited/Destination.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,26 @@
+import React from "react";
+import { Col, Container, Row, Image } from "react-bootstrap";
+
+const Destination = (props) => {
+    return (
+        <>
+            <Container className="border py-2 rounded-3" style={{borderColor: "#1A5F7A", borderWidth: "3px"}}>
+                <Row>
+                    <Col>
+                        <Image
+                            src={props.imag}
+                            className="thumbnail rounded"
+                            width={75}
+                            height={75}
+                        />
+                    </Col>
+                    <Col>
+                        <h5 className="w-25">{props.destination}</h5>
+                    </Col>
+                </Row>
+            </Container>
+        </>
+    )
+}
+
+export default Destination;
Index: frontend/src/Components/MostVisited/MostVisitedBar.js
===================================================================
--- frontend/src/Components/MostVisited/MostVisitedBar.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/MostVisited/MostVisitedBar.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,43 @@
+import React from "react";
+import Destination from "./Destination";
+import { Container, Row, Col, Image } from "react-bootstrap";
+
+const MostVisitedBar = () => {
+    return (
+        <>
+            <Container className="my-5">
+                <h3 style={{textAlign: "left"}} className="mb-5">Најпосетувани дестинации во Македонија</h3>
+                <Row className="my-3">
+                    <Col className="w-25"> 
+                        <Destination imag="https://netpress.com.mk/wp-content/uploads/2021/03/skopje-voin-na-konj-centar.jpg" destination="Скопје"></Destination>
+                    </Col>
+                    <Col className="w-25">
+                        <Destination imag="https://i.imgur.com/Iv1qDid.png" destination="Крушево"></Destination>
+                    </Col>
+                    <Col className="w-25"> 
+                        <Destination imag="https://i.imgur.com/aRfzEFm.jpg" destination="Охрид"></Destination>
+                    </Col>
+                    <Col className="w-25">
+                        <Destination imag="https://scontent.fskp4-1.fna.fbcdn.net/v/t1.6435-9/139339650_2860623610819063_7442736283701492085_n.jpg?_nc_cat=107&ccb=1-7&_nc_sid=a26aad&_nc_ohc=s8XtKBc6LKoAX-442-c&_nc_ht=scontent.fskp4-1.fna&oh=00_AfC3P9wA3dVZWI3i9_ZFT-W4jWbLEwypw79y7Lt-3DzhyA&oe=64B3BF6C" destination="Маврово"></Destination>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col className="w-25"> 
+                        <Destination imag="https://netpress.com.mk/wp-content/uploads/2021/03/skopje-voin-na-konj-centar.jpg" destination="Скопје"></Destination>
+                    </Col>
+                    <Col className="w-25">
+                        <Destination imag="https://i.imgur.com/Iv1qDid.png" destination="Крушево"></Destination>
+                    </Col>
+                    <Col className="w-25"> 
+                        <Destination imag="https://i.imgur.com/aRfzEFm.jpg" destination="Охрид"></Destination>
+                    </Col>
+                    <Col className="w-25">
+                        <Destination imag="https://scontent.fskp4-1.fna.fbcdn.net/v/t1.6435-9/139339650_2860623610819063_7442736283701492085_n.jpg?_nc_cat=107&ccb=1-7&_nc_sid=a26aad&_nc_ohc=s8XtKBc6LKoAX-442-c&_nc_ht=scontent.fskp4-1.fna&oh=00_AfC3P9wA3dVZWI3i9_ZFT-W4jWbLEwypw79y7Lt-3DzhyA&oe=64B3BF6C" destination="Маврово"></Destination>
+                    </Col>
+                </Row>
+            </Container>
+        </>
+    )
+}
+
+export default MostVisitedBar
Index: frontend/src/Components/ProfilePage/DataForm.js
===================================================================
--- frontend/src/Components/ProfilePage/DataForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/ProfilePage/DataForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,143 @@
+import React from "react";
+import { useState } from "react";
+import { Container, Row, Col, Form, Button, Modal } from "react-bootstrap";
+import { AiOutlineSave, AiOutlineKey } from "react-icons/ai";
+import ChangePasswordForm from "../Forms/ChangePasswordForm";
+
+const DataForm = (props) => {
+
+
+  const [show, setShow] = useState(false);
+
+  const handleClose = () =>  setShow(false);
+  const handleShow = (e) => { 
+    e.preventDefault();
+    setShow(true);
+  }
+
+  return (
+    <>
+      <Container
+        className="w-75 rounded-5 m-5 my-auto mx-auto py-5 px-5"
+        style={{ backgroundColor: "#159895", color: "white" }}
+      >
+        <h2 className="mb-5" style={{ color: "white" }}>
+          Податоци за корисникот
+        </h2>
+        <Form>
+          <Row className="mb-3">
+            <Form.Group as={Col} controlId="name">
+              <Form.Label>Име</Form.Label>
+              <Form.Control type="text" value={props.data["name"]} />
+            </Form.Group>
+
+            <Form.Group as={Col} controlId="surname">
+              <Form.Label>Презиме</Form.Label>
+              <Form.Control
+                type="text"
+                placeholder=""
+                value={props.data["surname"]}
+              />
+            </Form.Group>
+          </Row>
+
+          <Row className="mb-3">
+            <Form.Group as={Col} controlId="name">
+              <Form.Label>Датум на раѓање</Form.Label>
+              <Form.Control type="date" value={props.data["dateOfBirth"]} />
+            </Form.Group>
+
+            <Form.Group as={Col} controlId="surname">
+              <Form.Label>Држава</Form.Label>
+              <Form.Control
+                type="text"
+                placeholder=""
+                value={props.data["country"]}
+              />
+            </Form.Group>
+          </Row>
+
+          <Form.Group className="mb-3" controlId="address">
+            <Form.Label>Адреса</Form.Label>
+            <Form.Control type="text" value={props.data["address"]} />
+          </Form.Group>
+
+          <Row className="mb-3">
+            <Form.Group as={Col} controlId="city">
+              <Form.Label>Град</Form.Label>
+              <Form.Control type="text" value={props.data["city"]} />
+            </Form.Group>
+
+            <Form.Group as={Col} controlId="zip">
+              <Form.Label>Поштенски број</Form.Label>
+              <Form.Control
+                type="text"
+                placeholder=""
+                value={props.data["zip"]}
+              />
+            </Form.Group>
+          </Row>
+
+          <Row className="mb-5">
+            <Form.Group as={Col} controlId="email">
+              <Form.Label>Email</Form.Label>
+              <Form.Control type="email" value={props.data["email"]} />
+            </Form.Group>
+
+            <Form.Group as={Col} controlId="mobile">
+              <Form.Label>Телефонски број</Form.Label>
+              <Form.Control
+                type="text"
+                placeholder=""
+                value={props.data["mobile"]}
+              />
+            </Form.Group>
+          </Row>
+
+          <Row>
+            <Col style={{textAlign: "right"}}>
+              <Button
+                type="submit"
+                style={{
+                  backgroundColor: "#159895",
+                  border: "2px solid white",
+                }}
+                size="md"
+              >
+                <span className="ikona my-1" color="white">
+                  <AiOutlineSave style={{ color: "white" }} />
+                </span>
+                <span className="ikona mx-3">Зачувај промени</span>
+              </Button>
+            </Col>
+            <Col style={{textAlign: "left"}}>
+              <Button
+                type="submit"
+                style={{
+                  backgroundColor: "#159895",
+                  border: "2px solid white",
+                }}
+                size="md"
+                onClick={handleShow}
+              >
+                <span className="ikona my-1" color="white">
+                  <AiOutlineKey style={{ color: "white" }} />
+                </span>
+                <span className="ikona mx-3">Промени лозинка</span>
+              </Button>
+            </Col>
+          </Row>
+        </Form>
+      </Container>
+
+      <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title style={{color: "#159895"}}>Промена на лозинка</Modal.Title>
+        </Modal.Header>
+        <Modal.Body><ChangePasswordForm></ChangePasswordForm></Modal.Body>
+      </Modal>
+    </>
+  );
+};
+
+export default DataForm;
Index: frontend/src/Components/Registration/RegistrationForm.js
===================================================================
--- frontend/src/Components/Registration/RegistrationForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Registration/RegistrationForm.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,234 @@
+import { useState } from "react";
+import React from "react";
+import { Container, Form, Button, FormControl, FormLabel, Row, Col, InputGroup } from "react-bootstrap";
+import { AiFillLock, AiOutlineMail, AiOutlinePhone, AiOutlineKey } from "react-icons/ai"
+import useFormData from "../Hooks/useFormData";
+import useCreateHotel from "../Hooks/Hotel/useCreateHotel";
+import useCreateUser from "../Hooks/User/useCreateUser";
+
+
+const RegistrationForm = () => {
+    const [validated, setValidated] = useState(false)
+
+    const handleSubmit = (event) => {
+        const form = event.currentTarget;
+        if (form.checkValidity() === false) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+        event.preventDefault();
+        createUser(formData)
+    
+        setValidated(true);
+      };
+
+    const { createUser } = useCreateUser();
+
+    const { formData, onFormChange, onCheckBoxChange, setFormData } = useFormData({
+      name: "",
+      surname: "",
+      email: "",
+      password: "",
+      birthDate: Date.now(),
+      address: "",
+      contact: "111",
+    });
+
+    return (
+        <Container className="rounded-5 m-5 my-auto mx-auto py-5 px-5" style={{backgroundColor: "#ffffff"}}>
+        <Form noValidate validated={validated} onSubmit={handleSubmit}>
+          <Row className="mb-3">
+            <Form.Group as={Col} md="4" controlId="validationCustom01">
+              <Form.Label>Име</Form.Label>
+              <Form.Control
+                required
+                type="text"
+                placeholder="Име"
+                name="name"
+                value={formData.name}
+                onChange={onFormChange}
+              />
+              <Form.Control.Feedback>Во ред!</Form.Control.Feedback>
+              <Form.Control.Feedback type="invalid">
+                Име е задолжително
+                </Form.Control.Feedback>
+            </Form.Group>
+            <Form.Group as={Col} md="4" controlId="validationCustom02">
+              <Form.Label>Презиме</Form.Label>
+              <Form.Control
+                required
+                type="text"
+                placeholder="Презиме"
+                name="surname"
+                value={formData.surname}
+                onChange={onFormChange}
+              />
+              <Form.Control.Feedback>Во ред!</Form.Control.Feedback>
+              <Form.Control.Feedback type="invalid">
+                Презиме е задолжително
+                </Form.Control.Feedback>
+            </Form.Group>
+            <Form.Group as={Col} md="4" controlId="validationCustomUsername">
+              <Form.Label>Датум на раѓање</Form.Label>
+              <InputGroup hasValidation>
+                <Form.Control
+                    size="md"
+                    type="date"
+                    placeholder="Датум"
+                    name="birthDate"
+                    value={formData.birthDate}
+                    onChange={onFormChange}
+                    required
+                ></Form.Control>
+                <Form.Control.Feedback type="invalid">
+                  Датум на раѓање е задолжителен
+                </Form.Control.Feedback>
+              </InputGroup>
+            </Form.Group>
+          </Row>
+          <Row className="mb-3">
+          <Form.Group as={Col} md="4" controlId="validationCustom01">
+              <Form.Label>Држава</Form.Label>
+              <Form.Control
+                required
+                type="text"
+                placeholder="Држава"
+                
+              />
+              <Form.Control.Feedback>Во ред!</Form.Control.Feedback>
+              <Form.Control.Feedback type="invalid">
+                Држава е задолжително
+                </Form.Control.Feedback>
+            </Form.Group>
+            <Form.Group as={Col} md="4" controlId="validationCustom01">
+              <Form.Label>Град</Form.Label>
+              <Form.Control
+                required
+                type="text"
+                placeholder="Град"
+                
+              />
+              <Form.Control.Feedback>Во ред!</Form.Control.Feedback>
+              <Form.Control.Feedback type="invalid">
+                Град е задолжителен
+                </Form.Control.Feedback>
+            </Form.Group>
+            <Form.Group as={Col} md="4" controlId="validationCustom01">
+              <Form.Label>Поштенски код</Form.Label>
+              <Form.Control
+                required
+                type="text"
+                placeholder="Поштенски код"
+                
+              />
+              <Form.Control.Feedback>Во ред!</Form.Control.Feedback>
+              <Form.Control.Feedback type="invalid">
+                Поштенски код е задолжителен
+                </Form.Control.Feedback>
+            </Form.Group>
+          </Row>
+          <Row className="mb-3">
+          <Form.Group as={Col} controlId="validationCustom01">
+              <Form.Label>Адреса</Form.Label>
+              <Form.Control
+                required
+                type="text"
+                placeholder="Адреса"
+                name="address"
+                value={formData.address}
+                onChange={onFormChange}
+              />
+              <Form.Control.Feedback>Во ред!</Form.Control.Feedback>
+              <Form.Control.Feedback type="invalid">
+                Адреса е задолжително
+                </Form.Control.Feedback>
+            </Form.Group>
+          </Row>
+          <Row className="mb-3">
+            <Form.Group as={Col} md="6" controlId="validationCustomUsername">
+            <Form.Label>Е-маил</Form.Label>
+            <InputGroup hasValidation>
+            <InputGroup.Text id="inputGroupPrepend"><span className="ikona "><AiOutlineMail/></span></InputGroup.Text>
+                <Form.Control
+                type="email"
+                placeholder="Е-маил"
+                aria-describedby="inputGroupPrepend"
+                name="email"
+                value={formData.email}
+                onChange={onFormChange}
+                required
+                />
+                <Form.Control.Feedback type="invalid">
+                Е-маил е задолжителен
+                </Form.Control.Feedback>
+            </InputGroup>
+            </Form.Group>
+            <Form.Group as={Col} md="6" controlId="validationCustomUsername">
+            <Form.Label>Телефон</Form.Label>
+            <InputGroup hasValidation>
+                <InputGroup.Text id="inputGroupPrepend"><span className="ikona "><AiOutlinePhone/></span></InputGroup.Text>
+                <Form.Control
+                type="text"
+                placeholder="Телефон"
+                aria-describedby="inputGroupPrepend"
+                name="contact"
+                value={formData.contact}
+                onChange={onFormChange}
+                />
+            </InputGroup>
+            </Form.Group>
+          </Row>
+          <hr></hr>
+          <Row className="mb-3">
+            <Form.Group as={Col} md="6" controlId="validationCustomUsername">
+            <Form.Label>Лозинка</Form.Label>
+            <InputGroup hasValidation>
+            <InputGroup.Text id="inputGroupPrepend"><span className="ikona "><AiOutlineKey/></span></InputGroup.Text>
+                <Form.Control
+                type="text"
+                placeholder="Лозинка"
+                aria-describedby="inputGroupPrepend"
+                name="password"
+                value={formData.password}
+                onChange={onFormChange}
+                required
+                />
+                <Form.Control.Feedback type="invalid">
+                Лозинката мора да содржи најмалку 8 карактери, една голема буква, еден број и еден специјален знак
+                </Form.Control.Feedback>
+            </InputGroup>
+            </Form.Group>
+            <Form.Group as={Col} md="6" controlId="validationCustomUsername">
+            <Form.Label>Повторена лозинка</Form.Label>
+            <InputGroup hasValidation>
+                <InputGroup.Text id="inputGroupPrepend"><span className="ikona "><AiOutlineKey/></span></InputGroup.Text>
+                <Form.Control
+                type="password"
+                placeholder="Лозинка"
+                aria-describedby="inputGroupPrepend"
+                required
+                />
+                <Form.Control.Feedback type="invalid">
+                Лозинките не се совпаѓаат
+                </Form.Control.Feedback>
+            </InputGroup>
+            </Form.Group>
+          </Row>
+          <hr></hr>
+          <Form.Group className="mb-3">
+            <Form.Check
+              required
+              label="Се согласувам со правилата и условите за користење"
+              feedback="Мора да се согласите пред да продолжите"
+              feedbackType="invalid"
+            />
+          </Form.Group>
+          <Button type="submit" style={{backgroundColor: "#159895"}} size="md">
+              <span className="ikona mx-3">Регистрирај се</span>
+            </Button>
+        </Form>
+        </Container>
+      );    
+};
+
+export default RegistrationForm;
Index: frontend/src/Components/Resources/AddAvailability.js
===================================================================
--- frontend/src/Components/Resources/AddAvailability.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Resources/AddAvailability.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,54 @@
+import React from "react";
+import { Container, Row, Modal, Im } from "react-bootstrap";
+import { useState } from "react";
+import { AiOutlinePlusCircle } from "react-icons/ai"
+import AddHotelForm from "../Forms/AddHotelForm";
+import AddRoomForm from "../Forms/AddRoomForm";
+import AddRestaurantForm from "../Forms/AddRestaurantForm";
+import AddTransportForm from "../Forms/AddTransportForm";
+import AddItemMenuForm from "../Forms/AddItemMenuForm";
+import AddRoomAvailablityForm from "../Forms/AddRoomAvailablityForm";
+import AddTableAvailablityForm from "../Forms/AddTableAvailabilityForm";
+
+const AddAvailability = (props) => {
+
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+    const handleShow = (e) => {
+      e.preventDefault();
+      setShow(true);
+
+    };
+
+
+    return(<>
+        <Container onClick={handleShow}>
+        <h5>Додади<br/>расположливост</h5>
+                  <div className="d-flex justify-content-center align-content-center"><AiOutlinePlusCircle size={50} color="#159895"></AiOutlinePlusCircle></div>
+                  
+        </Container>
+
+        <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title style={{ color: "#159895" }}>
+            {props.type === "hotel" && "Додавање на хотел"}
+            {props.type === "room" && "Додавање на расположливост за соба"} 
+            {props.type === "restaurant" && "Додавање на ресторант"}
+            {props.type === "transport" && "Додавање на транспорт"}
+            {props.type === "menu" && "Додавање на ставка во мени"}
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+            {props.type === "hotel" && <AddHotelForm/>}
+            {props.type === "room" && <AddRoomAvailablityForm hotelRoomId={props.hotelRoomId}/>}
+            {props.type === "table" && <AddTableAvailablityForm table={props.table}/>}
+            {props.type === "restaurant" && <AddRestaurantForm/>}
+            {props.type === "transport" && <AddTransportForm/>}
+            {props.type === "menu" && <AddItemMenuForm/>}
+        </Modal.Body>
+      </Modal>
+    </>)
+}
+
+export default AddAvailability;
Index: frontend/src/Components/Resources/AddImages.js
===================================================================
--- frontend/src/Components/Resources/AddImages.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Resources/AddImages.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,100 @@
+import React from "react";
+import {Container, Row, Modal, Image, FormGroup, FormLabel, FormControl, Button} from "react-bootstrap";
+import {useState} from "react";
+import {AiOutlinePlusCircle} from "react-icons/ai"
+import AddHotelForm from "../Forms/AddHotelForm";
+import AddRoomForm from "../Forms/AddRoomForm";
+import AddRestaurantForm from "../Forms/AddRestaurantForm";
+import AddTransportForm from "../Forms/AddTransportForm";
+import AddItemMenuForm from "../Forms/AddItemMenuForm";
+import AddRoomAvailablityForm from "../Forms/AddRoomAvailablityForm";
+import AddTableAvailablityForm from "../Forms/AddTableAvailabilityForm";
+import {FaImage} from "react-icons/fa";
+import useGet from "../Hooks/useGet";
+import useFileChange from "../Hooks/FilesUpload/useFileChange";
+
+
+const AddImages = (props) => {
+
+    const [show, setShow] = useState(false);
+    const {data, isLoading, getData, setData, setChanged} = useGet(`/${props.type}/${props.Id}/images`)
+    const { onFileChangeHandler } = useFileChange();
+    const [selectedFiles, setSelectedFiles] = useState([]);
+
+    console.log(props.Id)
+
+    const handleClose = () => setShow(false);
+    const handleShow = (e) => {
+        e.preventDefault();
+        setShow(true);
+
+    };
+
+    !isLoading && console.log(data)
+
+
+    return (<>
+        <Container onClick={handleShow}>
+            <h5>Слики</h5>
+            <div className="d-flex justify-content-center align-content-center"><FaImage size={50}
+                                                                                         color="#159895"></FaImage>
+            </div>
+
+        </Container>
+
+        {handleShow && <Modal size={'xl'} show={show} onHide={handleClose}>
+            <Modal.Header closeButton>
+                <Modal.Title style={{color: "#159895"}}>
+                    Слики за ресурс
+                </Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <Container>
+                    {!isLoading && data.map((image) => {
+                        let link = image.url;
+                        console.log("SLIKATAAA")
+                        console.log(image)
+                        if (image.url.includes('Desktop')) {
+                            link = 'http://localhost:8080/download?fileName=' + encodeURIComponent(image.url);
+                        }
+                        console.log(link)
+                        return (
+                            <Image src={link} thumbnail width={171} height={180}/>
+                        )
+                    })}
+                </Container>
+                <Container>
+                    <FormGroup className="mb-3">
+                        <FormLabel>Upload Images:</FormLabel>
+                        <FormControl
+                            type="file"
+                            multiple
+                            onChange={(e) => setSelectedFiles(Array.from(e.target.files))}
+                        />
+                    </FormGroup>
+                    <Button onClick={() => {
+                        // setChanged((prev) => ++prev)
+                        onFileChangeHandler(selectedFiles, props.type, props.Id, setChanged)
+                        // setChanged((prev) => ++prev)
+                    }}>
+                        Upload Files
+                    </Button>
+                    <Container>
+                        {selectedFiles.map((file, index) => (
+                            <Image
+                                key={index}
+                                onClick={() => {
+                                }}
+                                fluid
+                                src={URL.createObjectURL(file)}
+                                alt={`Uploaded Image ${index + 1}`}
+                            />
+                        ))}
+                    </Container>
+                </Container>
+            </Modal.Body>
+        </Modal>}
+    </>)
+}
+
+export default AddImages;
Index: frontend/src/Components/Resources/AddNew.js
===================================================================
--- frontend/src/Components/Resources/AddNew.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Resources/AddNew.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,70 @@
+import React from "react";
+import { Container, Row, Modal } from "react-bootstrap";
+import { useState } from "react";
+import { AiOutlinePlusCircle } from "react-icons/ai"
+import AddHotelForm from "../Forms/AddHotelForm";
+import AddRoomForm from "../Forms/AddRoomForm";
+import AddRestaurantForm from "../Forms/AddRestaurantForm";
+import AddTransportForm from "../Forms/AddTransportForm";
+import AddItemMenuForm from "../Forms/AddItemMenuForm";
+import AddTripForm from "../Forms/AddTripForm";
+import AddTableForm from "../Forms/AddTableForm";
+
+const AddNew = (props) => {
+
+    const [show, setShow] = useState(false || props.show);
+    const [size, setSize] = useState("md");
+    console.log(props.show)
+
+    const handleClose = () => {
+      setSize("md");
+      setShow(false);
+    }
+
+    const handleShow = (e) => {
+      e.preventDefault();
+      setShow(true);
+
+    };
+
+    const setSizeXl = () => {
+        setSize("xl")
+    }
+
+
+    return(<>
+        <Container onClick={handleShow}>
+            <Row>
+                <h1><AiOutlinePlusCircle size={80} color="#159895"></AiOutlinePlusCircle></h1>
+            </Row>
+            <Row>
+                <h3 style={{color: "#159895"}}>Додади нов</h3>
+            </Row>
+        </Container>
+
+        <Modal show={show} onHide={handleClose} size={size}>
+        <Modal.Header closeButton>
+          <Modal.Title style={{ color: "#159895" }}>
+            {props.type === "hotel" && "Додавање на хотел"}
+            {props.type === "room" && "Додавање на соба"} 
+            {props.type === "restaurant" && "Додавање на ресторант"}
+            {props.type === "transport" && "Додавање на транспорт"}
+            {props.type === "menu" && "Додавање на ставка во мени"}
+            {props.type === "route" && "Додавање на рута"}
+            {props.type === "table" && "Додавање на маси"}
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+            {props.type === "hotel" && <AddHotelForm closeModal={handleClose} refresh={props.refresh}/>}
+            {props.type === "room" && <AddRoomForm closeModal={handleClose} refresh={props.refresh} hotelId={props.Id}/>}
+            {props.type === "restaurant" && <AddRestaurantForm edit="false" closeModal={handleClose} refresh={props.refresh}/>}
+            {props.type === "transport" && <AddTransportForm closeModal={handleClose} refresh={props.refresh}/>}
+            {props.type === "menu" && <AddItemMenuForm Id={props.Id} refresh={props.refresh}/>}
+            {props.type === "route" && <AddTripForm transportId={props.transport.transportID} setSize={setSizeXl} refresh={props.refresh}/>}
+            {props.type === "table" && <AddTableForm restaurantId={props.Id} refresh={props.refresh}/>}
+        </Modal.Body>
+      </Modal>
+    </>)
+}
+
+export default AddNew;
Index: frontend/src/Components/Resources/EditModal.js
===================================================================
--- frontend/src/Components/Resources/EditModal.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Resources/EditModal.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,46 @@
+import React from "react";
+import { Container, Row, Modal } from "react-bootstrap";
+import { useState } from "react";
+import { AiOutlinePlusCircle } from "react-icons/ai"
+import AddHotelForm from "../Forms/AddHotelForm";
+import AddRoomForm from "../Forms/AddRoomForm";
+import AddRestaurantForm from "../Forms/AddRestaurantForm";
+import AddTransportForm from "../Forms/AddTransportForm";
+import AddItemMenuForm from "../Forms/AddItemMenuForm";
+import AddTripForm from "../Forms/AddTripForm";
+import EditTableForm from "../Forms/EditTableForm";
+import EditRoomForm from "../Forms/EditRoomForm";
+import EditMainRouteForm from "../Forms/EditMainRouteForm";
+
+const EditModal = (props) => {
+
+
+
+
+    return(<>
+        <Modal show={props.show} onHide={props.handleClose} size={'lg'}>
+        <Modal.Header closeButton>
+          <Modal.Title style={{ color: "#159895" }}>
+            {props.type === "hotel" && "Додавање на хотел"}
+            {props.type === "room" && "Додавање на соба"} 
+            {props.type === "restaurant" && "Додавање на ресторант"}
+            {props.type === "transport" && "Додавање на транспорт"}
+            {props.type === "menu" && "Додавање на ставка во мени"}
+            {props.type === "route" && "Додавање на рута"}
+            {props.type === "table" && "Промена на маса"}
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+            {props.type === "hotel" && <AddHotelForm refresh={props.refresh}/>}
+            {props.type === "room" && <EditRoomForm refresh={props.refresh} room={props.room}/>}
+            {props.type === "restaurant" && <AddRestaurantForm edit="false" refresh={props.refresh}/>}
+            {props.type === "transport" && <AddTransportForm/>}
+            {props.type === "menu" && <AddItemMenuForm Id={props.Id} refresh={props.refresh} menu={props.menu}/>}
+            {props.type === "route" && <EditMainRouteForm route={props.route} refresh={props.refresh}/>}
+            {props.type === "table" && <EditTableForm table={props.table}/>}
+        </Modal.Body>
+      </Modal>
+    </>)
+}
+
+export default EditModal;
Index: frontend/src/Components/Resources/ResourceListing.js
===================================================================
--- frontend/src/Components/Resources/ResourceListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Resources/ResourceListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,76 @@
+import React from "react";
+import {useState} from "react";
+import {Col, Container, Row, Image, Modal, Button} from "react-bootstrap";
+import LoginForm from "../Login/LoginForm";
+import ChangePasswordForm from "../Forms/ChangePasswordForm";
+import AddAvailability from "./AddAvailability";
+import AddImages from "./AddImages";
+
+const ResourceListing = (props) => {
+
+    const type = props.type == "hotel" ? "сместувањето" : props.type == "restaurant" ? "ресторанот" : "превозот";
+    const name = props.type == "hotel" ? props.data.hotelName : props.type == "restaurant" ? props.data.restaurantName : props.data.transportName
+    const id = props.type == "hotel" ? props.data.hotelId : props.type == "restaurant" ? props.data.restaurantID : props.data.transportID
+    console.log(props.data)
+    return (<>
+        <a  style={{textDecoration: "none", color: "black"}} href={`${props.type}/${id}`}>
+            <Container className="py-3 px-1 my-4"
+                       style={{
+                           border: "4px solid #159895",
+                           borderRadius: "1em",
+                           boxShadow: "0 3px 5px #159895",
+                           maxWidth: "90%",
+                       }}>
+                <Row>
+                    <Col className="d-flex justify-content-center">
+                        <Image
+                            src="https://www.imgacademy.com/sites/default/files/legacyhotel.jpg"
+                            style={{
+                                height: "8em",
+                                borderRadius: "1em",
+                                boxShadow: "0 4px 20px lightblue",
+                                maxWidth: "100%",
+                            }}
+                        ></Image>
+                    </Col>
+                    <Col>
+                        <h2 style={{textAlign: "left"}}>{name}</h2>
+                        {props.type === "hotel" && (<>
+                            <h5 style={{textAlign: "left"}}>{props.data.hotelLocation}</h5>
+                            <h5 style={{textAlign: "left"}}>{props.data.hotelEmail}</h5>
+                        </>)}
+                        {props.type === "restaurant" && (<>
+                            <h5 style={{textAlign: "left"}}>{props.data.restaurantLocation}</h5>
+                            <h5 style={{textAlign: "left"}}>{props.data.cousineType} кујна</h5>
+                        </>)}
+                        {props.type === "transport" && (<>
+                            <h5 style={{textAlign: "left"}}>{props.data.carBrand}</h5>
+                            <h5 style={{textAlign: "left"}}>{props.data.carPlate}</h5>
+                        </>)}
+                    </Col>
+
+                    <Col className="d-flex flex-column justify-content-center align-content-center">
+                        <AddImages type={props.type} Id={id} />
+                    </Col>
+                    <Col className="d-flex justify-content-center align-content-center">
+                  <span
+                      style={{
+                          backgroundColor: "#159895",
+                          padding: "0.75em",
+                          fontWeight: "bold",
+                          fontSize: "1.8rem",
+                          borderRadius: "0.75em",
+                          color: "white",
+                          margin: "auto"
+                      }}
+                  >
+                    9.1
+                  </span>
+                    </Col>
+                </Row>
+            </Container>
+        </a>
+    </>)
+}
+
+export default ResourceListing;
Index: frontend/src/Components/Resources/ResourcesTab.js
===================================================================
--- frontend/src/Components/Resources/ResourcesTab.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Resources/ResourcesTab.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,119 @@
+import React, {useTransition} from "react";
+import {Container, Col, Row, Image, Nav, Tab} from "react-bootstrap";
+import {useState} from "react";
+import {FaTaxi, FaHotel} from "react-icons/fa";
+import {MdRestaurant} from "react-icons/md";
+import AddNew from "./AddNew";
+import ResourceListing from "./ResourceListing";
+import {Link} from "react-router-dom";
+import useGet from "../Hooks/useGet";
+
+function ResourcesTab(props) {
+    const [activeTab, setActiveTab] = useState(props.tab);
+    const userId = JSON.parse(localStorage.getItem("user")).userId;
+    const {data, setData, isLoading, getData, setChanged} = useGet(`${props.tab}/user/${userId}`);
+
+    const handleSelect = (eventKey) => {
+        setActiveTab(eventKey);
+        props.refresh(eventKey);
+    };
+
+    return (
+        <Container className="rounded-5">
+            <Tab.Container
+                activeKey={activeTab}
+                onSelect={handleSelect}
+                className="bg-dark rounded-5"
+            >
+                <Nav
+                    fill
+                    variant="tabs"
+                    className="bg-body rounded-top-5"
+                    activeKey="/hotel"
+                    id="tab_item"
+                >
+                    <Nav.Item className="tab_item rounded-5">
+                        <Nav.Link href="/resources/hotel" className="text-left rounded-5">
+              <span className="ikona">
+                <FaHotel
+                    color="#159895"
+                    style={{lineHeight: "100em"}}
+                    size={"1.5em"}
+                    className="mx-3"
+                />
+              </span>
+                            <span className="ikona">Сместувања</span>
+                        </Nav.Link>
+                    </Nav.Item>
+                    <Nav.Item className="tab_item">
+                        <Nav.Link href="/resources/restaurant">
+              <span className="ikona">
+                <MdRestaurant color="#159895" size={"1.5em"} className="mx-3"/>
+              </span>
+                            <span className="ikona">Ресторани</span>
+                        </Nav.Link>
+                    </Nav.Item>
+                    <Nav.Item className="tab_item rounded-5">
+                        <Nav.Link
+                            href="/resources/transport"
+                            className="text-left rounded-5"
+                        >
+              <span className="ikona">
+                <FaTaxi color="#159895" size={"1.5em"} className="mx-3"/>
+              </span>
+                            <span className="ikona">Превоз</span>
+                        </Nav.Link>
+                    </Nav.Item>
+                </Nav>
+
+                <Tab.Content className="py-5 px-3 border rounded-bottom-5 bg-light">
+                    <Tab.Pane eventKey="/hotel" key="hotelPane">
+                        {props.tab == "/hotel" && !isLoading && data != null &&
+                            data.map((hotel) => {
+                                return (
+                                    //<Link style={{textDecoration: "none"}} key={hotel.hotelId} to={"/resources/hotel/" + hotel.hotelId}>
+                                    <ResourceListing
+                                        on
+                                        key={hotel.hotelId}
+                                        id={hotel.hotelId}
+                                        type="hotel"
+                                        data={hotel}
+                                    />
+                                    //</Link>
+                                );
+                            })}
+                        <AddNew type="hotel" refresh={setChanged}/>
+                    </Tab.Pane>
+                    <Tab.Pane eventKey="/restaurant" key="restaurantPane">
+                        {props.tab == "/restaurant" && !isLoading && data != null &&
+                            data.map((restaurant) => {
+                                return (
+                                    <ResourceListing
+                                        key={restaurant.restaurantID}
+                                        type="restaurant"
+                                        data={restaurant}
+                                    />);
+                            })}
+                        <AddNew type="restaurant" refresh={setChanged}/>
+                    </Tab.Pane>
+                    <Tab.Pane eventKey="/transport" key="transportPane">
+                        {props.tab == "/transport" && !isLoading && data.length > 0 &&
+                            data.map((transport) => {
+                                return (
+                                    <ResourceListing
+                                        key={transport.transportId}
+                                        id={transport.transportId}
+                                        type="transport"
+                                        data={transport}
+                                    />
+                                );
+                            })}
+                        <AddNew type="transport" refresh={setChanged}/>
+                    </Tab.Pane>
+                </Tab.Content>
+            </Tab.Container>
+        </Container>
+    );
+}
+
+export default ResourcesTab;
Index: frontend/src/Components/RestaurantDetails/Carousel.js
===================================================================
--- frontend/src/Components/RestaurantDetails/Carousel.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/RestaurantDetails/Carousel.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,19 @@
+import React from 'react';
+import { useState } from 'react';
+import Carousel from 'react-bootstrap/Carousel';
+import Menu from './Menu';
+import { Row } from 'react-bootstrap';
+
+function MenuCarousel(props) {
+
+    return (
+        <>
+            <hr className='m-3'></hr>
+            <Row className='d-flex justify-content-center align-items-center'><h2>Мени</h2></Row>
+            <hr className='m-2'></hr>
+            <Menu menu={props.menu}></Menu>
+        </>
+    );
+}
+
+export default MenuCarousel;
Index: frontend/src/Components/RestaurantDetails/Menu.js
===================================================================
--- frontend/src/Components/RestaurantDetails/Menu.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/RestaurantDetails/Menu.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,49 @@
+import React, {useState} from "react";
+import {Col, Container, Row, Carousel} from "react-bootstrap";
+import MenuItem from "./MenuItem";
+
+const Menu = (props) => {
+    const menu = props.menu
+
+    console.log(menu)
+    const partitionBy3 = (arr) => {
+        const rowPartitions = Array.from({length: Math.ceil(arr.length / 5)}, (v, i) =>
+            arr.slice(i * 5, i * 5 + 5)
+        );
+        return Array.from({length: Math.ceil(rowPartitions.length / 2)}, (v, i) =>
+            rowPartitions.slice(i * 2, i * 2 + 2)
+        );
+    }
+
+    const [ind, setIndex] = useState(0);
+
+    const handleSelect = (selectedIndex) => {
+        setIndex(selectedIndex);
+    };
+
+
+    return (<>
+        <Carousel activeIndex={ind} onSelect={handleSelect} indicators={false}>
+            {partitionBy3(menu).map((slides, index) => {
+                return (
+                    <Carousel.Item key={index}>
+                        {slides.map((row) => {
+                            return (
+                                <Row>
+                                    {row.map((menuItem) => {
+                                        return (
+                                            <Col>
+                                                <MenuItem data={menuItem}/>
+                                            </Col>
+                                        )
+                                    })}
+                                </Row>
+                            )
+                        })}
+                    </Carousel.Item>)
+            })}
+        </Carousel>
+    </>)
+}
+
+export default Menu;
Index: frontend/src/Components/RestaurantDetails/MenuItem.js
===================================================================
--- frontend/src/Components/RestaurantDetails/MenuItem.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/RestaurantDetails/MenuItem.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,48 @@
+import React from "react";
+import {Col, Row, Image, Container} from "react-bootstrap";
+
+const MenuItem = (props) => {
+
+    const data = props.data;
+    return (<>
+
+        <a href="#" style={{textDecoration: "none", color: "black"}}>
+            <Container className="py-3 px-1 my-4"
+                       style={{
+                           border: "4px solid #159895",
+                           borderRadius: "1em",
+                           boxShadow: "0 3px 5px #159895",
+                           maxWidth: "90%"
+                       }}>
+                <Row>
+                    <Col className="d-flex justify-content-center mb-3">
+                        <Image
+                            src="https://www.tasteofhome.com/wp-content/uploads/2019/01/medium-rare-steak-shutterstock_706040446.jpg"
+                            style={{
+                                height: "7em",
+                                borderRadius: "1em",
+                                boxShadow: "0 4px 20px lightblue",
+                                maxWidth: "100%",
+                            }}
+                        ></Image>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col className="d-flex flex-column justify-content-center " style={{textAlign: "center"}}>
+                        <h4>{data.name}</h4>
+                        <h6>{data.ingredients}</h6>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col className="d-flex flex-column justify-content-center align-content-center">
+
+                        <h5>Цена: {data.price}$</h5>
+                    </Col>
+                </Row>
+            </Container>
+        </a>
+
+    </>)
+}
+
+export default MenuItem;
Index: frontend/src/Components/RestaurantDetails/Table.js
===================================================================
--- frontend/src/Components/RestaurantDetails/Table.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/RestaurantDetails/Table.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,38 @@
+import {Col, Container, Image, Row} from "react-bootstrap";
+import React from "react";
+import { LuFan } from "react-icons/lu";
+import { TbToolsKitchen2 } from "react-icons/tb"
+import { MdBalcony } from "react-icons/md"
+
+const Table = (props) => {
+    return (
+        <>
+            <Container className="px-1 w-100">
+                <Row>
+                    <Col className="d-flex justify-content-center">
+                        <Image onClick={(e) => {
+                            e.preventDefault();
+                            console.log(props.data)
+                            props.showModal(props.data)
+                        }}
+                               src="https://cdnimg.webstaurantstore.com/uploads/seo_category/2019/5/table-dining-sets.jpg"
+                               style={{
+                                   height: "8em",
+                                   borderRadius: "1em",
+                                   boxShadow: "0 4px 20px lightblue",
+                                   maxWidth: "100%",
+                               }}
+                        ></Image>
+                    </Col>
+                    <Col className="d-flex flex-column justify-content-center" style={{textAlign: "left"}}>
+                        <h3>Маса</h3>
+                        <h3>Број на луѓе {props.data.noSeats}</h3>
+                    </Col>
+
+                </Row>
+            </Container>
+        </>
+    );
+};
+
+export default Table;
Index: frontend/src/Components/RestaurantDetails/TableRow.js
===================================================================
--- frontend/src/Components/RestaurantDetails/TableRow.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/RestaurantDetails/TableRow.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,83 @@
+import React from "react";
+import { useState } from "react";
+import { Col, Container, Row, Image, Modal, Button } from "react-bootstrap";
+import Form from "react-bootstrap/Form";
+import useCreate from "../Hooks/useCreate";
+import Table from "./Table";
+import tab from "../Tab/Tab";
+const TableRow = (props) => {
+    const {createEntity} = useCreate()
+    const [getData, setData] = useState(0);
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+    const handleShow = () => setShow(true);
+    const table = props.table
+    console.log(props)
+    console.log(table)
+    return (
+        <>
+            <tr>
+                <td>
+                    <Table data={table}></Table>
+                </td>
+                <td>
+                    <Form.Select aria-label="Default select example" name={'numberOfBeds'}
+                                 onChange={(e) => {
+                                     setData(e.target.value);
+                                 }}>
+                        <option></option>
+                        {[...Array(props.data.find(x => x.restaurantTable.tableId === table.tableId).numTables).keys()].map(x => {
+                            return (
+                                <option value={x+1}  >{x + 1}</option>
+                            )
+                        })}
+                    </Form.Select>
+                </td>
+                <td>
+                    <Button
+                        onClick={handleShow}
+                        className="m-2"
+                        size="md"
+                        style={{backgroundColor: "#159895"}}
+                    >
+                        Резервирај
+                    </Button>
+                </td>
+            </tr>
+
+            <Modal show={show} onHide={handleClose}>
+                <Modal.Header closeButton>
+                    <Modal.Title>Потврда на резервација</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    <h3>Резервација на маса во ресторан</h3>
+                    <h3>На ден:<b>{' ' + props.params.date}</b></h3>
+                    <h3>Време од:<b>{' ' + props.params.hourFrom}</b></h3>
+                    <h3>Време до:<b>{' ' + props.params.hourTo}</b></h3>
+                    <h3>Маса за {table.noSeats} луѓе</h3>
+                </Modal.Body>
+                <Modal.Footer>
+                    <Button variant="secondary" onClick={handleClose}>
+                        Close
+                    </Button>
+                    <Button variant="primary" onClick={() => {
+                        createEntity('restaurant/reserve', {
+                            restaurantTableId: table.tableId,
+                            userId: 1,
+                            restaurantAvailibleId: props.availableId,
+                            hourFrom: props.params.hourFrom,
+                            hourTo: props.params.hourTo,
+                            date: props.params.date
+                        })
+                        handleClose();
+                    }}>
+                        Резервирај
+                    </Button>
+                </Modal.Footer>
+            </Modal>
+        </>
+    )
+}
+
+export default TableRow
Index: frontend/src/Components/RestaurantDetails/TablesTable.js
===================================================================
--- frontend/src/Components/RestaurantDetails/TablesTable.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/RestaurantDetails/TablesTable.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,41 @@
+import React from "react";
+import Form from "react-bootstrap/Form";
+import FaHotel from "react-icons/fa";
+import {Button} from "react-bootstrap";
+import useCreate from "../Hooks/useCreate";
+import TableRow from "./TableRow";
+
+const TablesTable = (props) => {
+
+    console.log(props)
+
+
+    return (
+        <>
+            <table className="m-auto table table-hover table-responsive">
+                <thead>
+                <tr>
+                    <th scope="col">Тип на маса</th>
+                    <th scope="col">Колку единици?</th>
+                    <th scope="col"></th>
+                </tr>
+                </thead>
+                <tbody>
+                {Array.from(new Set(props.data.map(x => x.restaurantTable))).map((table) => {
+                    return (
+                        <>
+                            <TableRow
+                                params={props.params}
+                                availableId={props.data.filter(x => x.restaurantTable.tableId === table.tableId).
+                                map(x => x.restaurantAvailibleId)[0]}
+                                data={props.data} table={table} from={props.from} to={props.to}/>
+                        </>
+                    );
+                })}
+                </tbody>
+            </table>
+        </>
+    );
+};
+
+export default TablesTable;
Index: frontend/src/Components/RestaurantEdit/MenuListing.js
===================================================================
--- frontend/src/Components/RestaurantEdit/MenuListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/RestaurantEdit/MenuListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,50 @@
+import React from "react";
+import { useState } from "react";
+import { Col, Container, Row, Image, Modal, Button } from "react-bootstrap";
+import LoginForm from "../Login/LoginForm";
+import ChangePasswordForm from "../Forms/ChangePasswordForm";
+import { AiOutlinePlusCircle } from "react-icons/ai"
+import EditModal from "../Resources/EditModal";
+
+const MenuListing = (props) => {
+
+    const type = props.type == "hotel" ? "сместувањето" : props.type == "restaurant" ? "ресторанот" : "превозот";
+    console.log(props.data)
+    return(<>
+    <a href="#" onClick={(e) => {e.preventDefault(); props.showModal(props.data);
+    console.log("kliknav")} } style={{textDecoration: "none", color:"black"}}>
+        <Container className="py-3 px-1 my-4"
+        style={{
+          border: "4px solid #159895",
+          borderRadius: "1em",
+          boxShadow: "0 3px 5px #159895",
+          maxWidth: "90%",
+        }}>
+            <Row>
+                <Col className="d-flex justify-content-center">
+                    <Image
+                    src="https://www.tasteofhome.com/wp-content/uploads/2019/01/medium-rare-steak-shutterstock_706040446.jpg"
+                    style={{
+                        height: "8em",
+                        borderRadius: "1em",
+                        boxShadow: "0 4px 20px lightblue",
+                        maxWidth: "100%",
+                    }}
+                    ></Image>
+                </Col>
+                <Col className="d-flex flex-column justify-content-center" style={{textAlign: "left"}}>
+                    <h2>{props.data.name}</h2>
+                    <h6>{props.data.ingredients}</h6>
+                </Col>
+                
+                <Col className="d-flex flex-column justify-content-center align-content-center">
+                  <h5>Цена:</h5>
+                  <h4>{props.data.price}$</h4>
+                </Col>
+            </Row>
+        </Container>
+        </a>
+    </>)
+}
+
+export default MenuListing;
Index: frontend/src/Components/RestaurantEdit/RestaurantEditTab.js
===================================================================
--- frontend/src/Components/RestaurantEdit/RestaurantEditTab.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/RestaurantEdit/RestaurantEditTab.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,125 @@
+import React from "react";
+import { Container, Col, Row, Image, Nav, Tab } from "react-bootstrap";
+import { useState } from "react";
+import { FaTaxi, FaHotel } from "react-icons/fa";
+import { MdOutlineStickyNote2, MdOutlineTableBar } from "react-icons/md";
+import AddNew from "../Resources/AddNew";
+import { BiData } from "react-icons/bi";
+import AddRestaurantForm from "../Forms/AddRestaurantForm";
+import MenuListing from "./MenuListing";
+import TableListing from "./TableListing";
+import EditModal from "../Resources/EditModal";
+
+function RestaurantEditTab(props) {
+  
+
+  const [activeTab, setActiveTab] = useState("/hotel");
+  const [modalData, setModalData] = useState("")
+  const [changed, setChanged] = useState(0)
+
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => {
+    //e.preventDefault();
+    setShow(true);
+
+  };
+
+  const showModal = (modalData) => {
+      setModalData(modalData);
+      handleShow();
+  }
+
+  const handleSelect = (eventKey) => {
+    setActiveTab(eventKey);
+  };
+
+  console.log(props.displayMenu.restaurantID)
+  return (
+    <Container className="rounded-5">
+      <Tab.Container
+        activeKey={activeTab}
+        onSelect={handleSelect}
+        className="bg-dark rounded-5"
+      >
+        <Nav
+          fill
+          variant="tabs"
+          className="bg-body rounded-top-5"
+          activeKey="/hotel"
+          id="tab_item"
+        >
+          <Nav.Item className="tab_item rounded-5">
+            <Nav.Link eventKey="/hotel" className="text-left rounded-5">
+              <span className="ikona">
+                <FaHotel
+                  color="#159895"
+                  style={{ lineHeight: "100em" }}
+                  size={"1.5em"}
+                  className="mx-3"
+                />
+              </span>
+              <span className="ikona">Мени</span>
+            </Nav.Link>
+          </Nav.Item>
+          <Nav.Item className="tab_item rounded-5">
+            <Nav.Link eventKey="/masi" className="text-left rounded-5">
+              <span className="ikona">
+                <MdOutlineTableBar
+                  color="#159895"
+                  style={{ lineHeight: "100em" }}
+                  size={"1.5em"}
+                  className="mx-3"
+                />
+              </span>
+              <span className="ikona">Маси</span>
+            </Nav.Link>
+          </Nav.Item>
+          <Nav.Item className="tab_item">
+            <Nav.Link eventKey="/restaurant">
+              <span className="ikona">
+                <MdOutlineStickyNote2 color="#159895" size={"1.5em"} className="mx-3" />
+              </span>
+              <span className="ikona">Резервации</span>
+            </Nav.Link>
+          </Nav.Item>
+          <Nav.Item className="tab_item rounded-5">
+            <Nav.Link eventKey="/transport" className="text-left rounded-5">
+              <span className="ikona">
+                <BiData color="#159895" size={"1.5em"} className="mx-3" />
+              </span>
+              <span className="ikona">Општи податоци</span>
+            </Nav.Link>
+          </Nav.Item>
+        </Nav>
+
+        <Tab.Content className="py-5 px-3 border rounded-bottom-5 bg-light">
+          <Tab.Pane eventKey="/hotel">
+          {props.displayMenu.menus.map((menu) => {
+              return <MenuListing key={menu.menuId} data={menu} showModal={showModal}/>
+            })}
+            {activeTab === '/hotel' && <EditModal show={show} refresh={props.refresh} handleClose={handleClose} type="menu" menu={modalData}></EditModal>}
+            <AddNew Id={props.displayMenu.restaurantID} refresh={props.refresh} type="menu"/>
+          </Tab.Pane>
+          <Tab.Pane eventKey="/masi">
+           {props.displayMenu.tables.map((table) => {
+              return <TableListing key={table.tableId} showModal={showModal} data={table}/>
+            })}
+            {activeTab === '/masi' && <EditModal show={show} handleClose={handleClose} refresh={props.refresh} type="table"
+                        table={modalData}></EditModal>}
+            <AddNew Id={props.displayMenu.restaurantID} refresh={props.refresh} type="table"/>
+          </Tab.Pane>
+          <Tab.Pane eventKey="/restaurant">
+            <AddNew type="restaurant"/>
+          </Tab.Pane>
+          <Tab.Pane eventKey="/transport">
+            <AddRestaurantForm refresh={props.refresh} restaurant={props.displayMenu}/>
+          </Tab.Pane>
+        </Tab.Content>
+      </Tab.Container>
+    </Container>
+  );
+}
+
+export default RestaurantEditTab;
Index: frontend/src/Components/RestaurantEdit/TableListing.js
===================================================================
--- frontend/src/Components/RestaurantEdit/TableListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/RestaurantEdit/TableListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,51 @@
+import React from "react";
+import { useState } from "react";
+import { Col, Container, Row, Image, Modal, Button } from "react-bootstrap";
+import LoginForm from "../Login/LoginForm";
+import ChangePasswordForm from "../Forms/ChangePasswordForm";
+import { AiOutlinePlusCircle } from "react-icons/ai"
+import AddAvailability from "../Resources/AddAvailability";
+
+const TableListing = (props) => {
+
+    const type = props.type == "hotel" ? "сместувањето" : props.type == "restaurant" ? "ресторанот" : "превозот";
+    console.log(props.data)
+    return(<>
+        <Container className="py-3 px-1 my-4"
+        style={{
+          border: "4px solid #159895",
+          borderRadius: "1em",
+          boxShadow: "0 3px 5px #159895",
+          maxWidth: "90%",
+        }}>
+            <Row>
+                <Col className="d-flex justify-content-center">
+                    <Image onClick={(e) => {
+                        e.preventDefault();
+                        console.log(props.data)
+                        props.showModal(props.data)
+                    }}
+                    src="https://cdnimg.webstaurantstore.com/uploads/seo_category/2019/5/table-dining-sets.jpg"
+                    style={{
+                        height: "8em",
+                        borderRadius: "1em",
+                        boxShadow: "0 4px 20px lightblue",
+                        maxWidth: "100%",
+                    }}
+                    ></Image>
+                </Col>
+                <Col className="d-flex flex-column justify-content-center" style={{textAlign: "left"}}>
+                    <h2>Маса</h2>
+                    <h2>Број на луѓе {props.data.noSeats}</h2>
+                </Col>
+                
+                <Col className="d-flex flex-column justify-content-center align-content-center">
+                  <AddAvailability type="table" table={props.data}/>
+                </Col>
+
+            </Row>
+        </Container>
+    </>)
+}
+
+export default TableListing;
Index: frontend/src/Components/SearchCriterias/SearchCriteriasBar.js
===================================================================
--- frontend/src/Components/SearchCriterias/SearchCriteriasBar.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/SearchCriterias/SearchCriteriasBar.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,21 @@
+import React from "react";
+import { Container, Form, Button, Row, Col } from "react-bootstrap";
+import useFormData from "../Hooks/useFormData";
+import SearchCriteriasHotel from "./SearchCriteriasHotel";
+import SearchCriteriasTransport from "./SearchCriteriasTransport";
+import SearchCriteriasRestaurant from "./SearchCriteriasRestaurant";
+
+const SearchCriteriasBar = (props) => {
+
+    const { criterias, type } = props
+
+    return (
+        <>
+            {type === 'hotel' && <SearchCriteriasHotel criterias={criterias}/>}
+            {type === 'transport' && <SearchCriteriasTransport showButton={props.showButton} criterias={criterias}/>}
+            {type === 'restaurant' && <SearchCriteriasRestaurant criterias={criterias}/>}
+        </>
+    )
+}
+
+export default SearchCriteriasBar;
Index: frontend/src/Components/SearchCriterias/SearchCriteriasHotel.js
===================================================================
--- frontend/src/Components/SearchCriterias/SearchCriteriasHotel.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/SearchCriterias/SearchCriteriasHotel.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,98 @@
+import React from "react";
+import { Container, Form, Button, Row, Col } from "react-bootstrap";
+import useFormData from "../Hooks/useFormData";
+
+const SearchCriteriasHotel = (props) => {
+
+  const { formData, onFormChange, onCheckBoxChange, setFormData} = useFormData(props.criterias)
+
+
+
+  return (
+    <>
+      <Container
+        className="p-1 pb-0 mb-5 mt-3 rounded-2"
+        style={{ backgroundColor: "#002B5B", width: "65%"}}
+      >
+        <Form className="rounded-5">
+          <Row className="gx-1">
+            <Col>
+              <Form.Floating className="mb-3">
+                <Form.Control
+                  size="md"
+                  type="text"
+                  placeholder="Каде ќе патувате?:"
+                  id="location"
+                  name="hotelLocation"
+                  onChange={onFormChange}
+                  value={formData.hotelLocation}
+                ></Form.Control>
+                <label htmlFor="location">Локација:</label>
+              </Form.Floating>
+            </Col>
+            <Col>
+              <Form.Floating className="mb-3">
+                <Form.Control
+                  size="md"
+                  type="date"
+                  placeholder="Датум на пристигнување:"
+                  id="dateFrom"
+                  name="dateFrom"
+                  onChange={onFormChange}
+                  value={formData.dateFrom}
+                ></Form.Control>
+                <label htmlFor="dateFrom">Датум на пристигнување:</label>
+              </Form.Floating>
+            </Col>
+            <Col>
+              <Form.Floating className="mb-3">
+                <Form.Control
+                  size="md"
+                  type="date"
+                  placeholder="Датум на заминување:"
+                  id="dateTo"
+                  name="dateTo"
+                  onChange={onFormChange}
+                  value={formData.dateTo}
+                ></Form.Control>
+                <label htmlFor="dateTo">Датум на заминување:</label>
+              </Form.Floating>
+            </Col>
+            <Col>
+              <Form.Floating className="mb-3">
+                <Form.Control
+                  size="md"
+                  type="number"
+                  placeholder="Број на гости:"
+                  id="floatingPassengers"
+                  name="numBeds"
+                  onChange={onFormChange}
+                  value={formData.numBeds}
+                ></Form.Control>
+                <label htmlFor="floatingPassengers">Број на гости:</label>
+              </Form.Floating>
+            </Col>
+            <Col>
+              <Form.Group className="my-1">
+                <Button
+                  type="submit"
+                  style={{ backgroundColor: "#159895" }}
+                  size="lg"
+                  className="w-100"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    window.location.href = `/search/hotel/${formData.hotelLocation}/${formData.dateFrom}/${formData.dateTo}/${formData.numBeds}`
+                  }}
+                >
+                  <span className="ikona mx-3">Пребарај</span>
+                </Button>
+              </Form.Group>
+            </Col>
+          </Row>
+        </Form>
+      </Container>
+    </>
+  );
+};
+
+export default SearchCriteriasHotel;
Index: frontend/src/Components/SearchCriterias/SearchCriteriasRestaurant.js
===================================================================
--- frontend/src/Components/SearchCriterias/SearchCriteriasRestaurant.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/SearchCriterias/SearchCriteriasRestaurant.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,124 @@
+import React from "react";
+import {Container, Form, Button, Row, Col} from "react-bootstrap";
+import useFormData from "../Hooks/useFormData";
+import {HiMagnifyingGlass} from "react-icons/hi2";
+
+
+const timeOfArrival = () => {
+    let times = [];
+
+    for (let i = 0; i <= 23; i++) {
+        for (let j = 0; j <= 30; j += 30) {
+            let hour = i.toString().padStart(2, "0");
+            let minutes = j.toString().padStart(2, "0");
+            times.push(`${hour}:${minutes}`);
+        }
+    }
+
+    return times;
+};
+
+const SearchCriteriasRestaurant = (props) => {
+
+    const {formData, onFormChange, onCheckBoxChange, setFormData} = useFormData(props.criterias)
+    const a = timeOfArrival();
+
+    return (
+        <>
+            <Container
+                className="p-1 pb-0 mb-5 mt-3 rounded-2"
+                style={{backgroundColor: "#002B5B", width: "65%"}}
+            >
+                <Form>
+                    <Row>
+                        <Col>
+                            <Form.Floating className="mb-3">
+                                <Form.Control
+                                    size="lg"
+                                    type="text"
+                                    placeholder="Место:"
+                                    id="location"
+                                    name={'restaurantLocation'}
+                                    value={formData.restaurantLocation}
+                                    onChange={onFormChange}
+                                ></Form.Control>
+                                <label htmlFor="location">Место:</label>
+                            </Form.Floating>
+                        </Col>
+                        <Col>
+                            <Form.Floating className="mb-3">
+                                <Form.Control
+                                    size="md"
+                                    type="date"
+                                    step={3600000}
+                                    placeholder="Час од:"
+                                    id="dateFrom"
+                                    name={'date'}
+                                    value={formData.date}
+                                    onChange={onFormChange}
+                                ></Form.Control>
+                                <label htmlFor="dateFrom">Датум:</label>
+                            </Form.Floating>
+                        </Col>
+                        <Col>
+                            <Form.Floating className="mb-3">
+                                <Form.Select size="md"
+                                             name={'hourFrom'}
+                                             value={formData.hourFrom}
+                                             onChange={onFormChange}>
+                                    <option>Изберете време:</option>
+                                    {a.map((x) => {
+                                        return <option key={x}>{x}</option>;
+                                    })}
+                                </Form.Select>
+                                <label htmlFor="hour">Час од:</label>
+                            </Form.Floating>
+                        </Col>
+                        <Col>
+                            <Form.Floating className="mb-3">
+                                <Form.Select size="md"
+                                             name={'hourTo'}
+                                             value={formData.hourTo}
+                                             onChange={onFormChange}>
+                                    <option>Изберете време:</option>
+                                    {a.filter((x) => x > formData.hourFrom).map((x) => {
+                                        return <option key={x}>{x}</option>;
+                                    })}
+                                </Form.Select>
+                                <label htmlFor="hour">Час до:</label>
+                            </Form.Floating>
+                        </Col>
+                        <Col>
+                            <Form.Floating className="mb-3">
+                                <Form.Control
+                                    size="md"
+                                    type="number"
+                                    placeholder="Број на гости:"
+                                    id="floatingPassengers"
+                                    name={'numPeople'}
+                                    value={formData.numPeople}
+                                    onChange={onFormChange}
+                                ></Form.Control>
+                                <label htmlFor="floatingPassengers">Број на гости:</label>
+                            </Form.Floating>
+                        </Col>
+                        <Col>
+                            <Form.Group className="my-1">
+                                <Button type="submit" style={{backgroundColor: "#159895"}} size="lg" onClick={(e) => {
+                                    e.preventDefault();
+                                    window.location.href = `/search/restaurant/${formData.restaurantLocation}/${formData.date}/${formData.hourFrom}/${formData.hourTo}/${formData.numPeople}`
+
+                                }}>
+                                    <span className="ikona my-1"><HiMagnifyingGlass/></span>
+                                    <span className="ikona mx-3">Пребарај</span>
+                                </Button>
+                            </Form.Group>
+                        </Col>
+                    </Row>
+                </Form>
+            </Container>
+        </>
+    );
+};
+
+export default SearchCriteriasRestaurant;
Index: frontend/src/Components/SearchCriterias/SearchCriteriasTransport.js
===================================================================
--- frontend/src/Components/SearchCriterias/SearchCriteriasTransport.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/SearchCriterias/SearchCriteriasTransport.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,96 @@
+import React from "react";
+import { Container, Form, Button, Row, Col } from "react-bootstrap";
+import useFormData from "../Hooks/useFormData";
+
+const SearchCriteriasTransport = (props) => {
+
+    const { formData, onFormChange, onCheckBoxChange, setFormData} = useFormData(props.criterias)
+
+    return (
+        <>
+            <Container
+                className="p-1 pb-0 mb-5 mt-3 rounded-2"
+                style={{ backgroundColor: "#002B5B", width: "65%"}}
+            >
+                <Form className="rounded-5">
+                    <Row className="gx-1">
+                        <Col>
+                            <Form.Floating className="mb-3">
+                                <Form.Control
+                                    size="md"
+                                    type="text"
+                                    placeholder="Од?:"
+                                    id="location"
+                                    name="from"
+                                    onChange={onFormChange}
+                                    value={formData.from}
+                                ></Form.Control>
+                                <label htmlFor="location">Од:</label>
+                            </Form.Floating>
+                        </Col>
+                        <Col>
+                            <Form.Floating className="mb-3">
+                                <Form.Control
+                                    size="md"
+                                    type="text"
+                                    placeholder="Од?:"
+                                    id="location"
+                                    name="to"
+                                    onChange={onFormChange}
+                                    value={formData.to}
+                                ></Form.Control>
+                                <label htmlFor="location">До:</label>
+                            </Form.Floating>
+                        </Col>
+                        <Col>
+                            <Form.Floating className="mb-3">
+                                <Form.Control
+                                    size="md"
+                                    type="date"
+                                    placeholder="Датум на заминување:"
+                                    id="dateTo"
+                                    name="date"
+                                    onChange={onFormChange}
+                                    value={formData.date}
+                                ></Form.Control>
+                                <label htmlFor="dateTo">Датум:</label>
+                            </Form.Floating>
+                        </Col>
+                        <Col>
+                            <Form.Floating className="mb-3">
+                                <Form.Control
+                                    size="md"
+                                    type="number"
+                                    placeholder="Број на патници:"
+                                    id="floatingPassengers"
+                                    name="numBeds"
+                                    onChange={onFormChange}
+                                    value={formData.numPassengers}
+                                ></Form.Control>
+                                <label htmlFor="floatingPassengers">Број на патници:</label>
+                            </Form.Floating>
+                        </Col>
+                        {props.showButton !== false && <Col>
+                            <Form.Group className="my-1">
+                                <Button
+                                    type="submit"
+                                    style={{backgroundColor: "#159895"}}
+                                    size="lg"
+                                    className="w-100"
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        window.location.href = `/search/transport/${formData.from}/${formData.to}/${formData.date}/${formData.numPassengers}`
+                                    }}
+                                >
+                                    <span className="ikona mx-3">Пребарај</span>
+                                </Button>
+                            </Form.Group>
+                        </Col>}
+                    </Row>
+                </Form>
+            </Container>
+        </>
+    );
+};
+
+export default SearchCriteriasTransport;
Index: frontend/src/Components/Tab/Tab.js
===================================================================
--- frontend/src/Components/Tab/Tab.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Tab/Tab.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { Container, Nav } from "react-bootstrap";
+import { Tab } from "react-bootstrap";
+import TabFormHotel from "./TabFormHotel";
+import TabFormRestaurant from "./TabFormRestaurant";
+import TabFormTransport from "./TabFormTransport";
+import { FaHotel, FaTaxi } from 'react-icons/fa'
+import { MdRestaurant } from "react-icons/md"
+
+function TabComponent() {
+  const [activeTab, setActiveTab] = useState("/hotel");
+
+  const handleSelect = (eventKey) => {
+    setActiveTab(eventKey);
+  };
+  
+
+  return (
+    <Container className='rounded-5'>
+      <Tab.Container 
+        activeKey={activeTab}
+        onSelect={handleSelect}
+        className="bg-dark rounded-5"
+      >
+        <Nav
+          fill
+          variant="tabs"
+          className="bg-body rounded-top-5"
+          activeKey="/hotel"
+          id="tab_item"
+        >
+          <Nav.Item className="tab_item rounded-5">
+            <Nav.Link href="/hotel" className="text-left rounded-5">
+              <span className="ikona"><FaHotel color="#159895" style={{lineHeight: "100em"}} size={"1.5em"} className="mx-3"/></span>
+              <span className="ikona">Сместување</span>
+            </Nav.Link>
+          </Nav.Item>
+          <Nav.Item className="tab_item">
+            <Nav.Link eventKey="/restaurant">
+              <span className="ikona"><MdRestaurant color="#159895" size={"1.5em"} className="mx-3"/></span><
+                span className="ikona">Ресторан</span>
+            </Nav.Link>
+          </Nav.Item>
+          <Nav.Item className="tab_item rounded-5">
+            <Nav.Link eventKey="/transport" className="text-left rounded-5"><span className="ikona"><FaTaxi color="#159895" size={"1.5em"} className="mx-3"/></span>
+            <span className="ikona">Превоз</span>
+          </Nav.Link>
+          </Nav.Item>
+        </Nav>
+
+        <Tab.Content className="py-5 px-3 border rounded-bottom-5 bg-light">
+          <Tab.Pane eventKey="/hotel">
+            <TabFormHotel/>
+          </Tab.Pane>
+          <Tab.Pane eventKey="/restaurant">
+            <TabFormRestaurant/>
+          </Tab.Pane>
+          <Tab.Pane eventKey="/transport">
+            <TabFormTransport/>
+          </Tab.Pane>
+        </Tab.Content>
+      </Tab.Container>
+    </Container>
+  );
+}
+
+export default TabComponent;
Index: frontend/src/Components/Tab/TabFormHotel.js
===================================================================
--- frontend/src/Components/Tab/TabFormHotel.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Tab/TabFormHotel.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,92 @@
+import React from "react";
+import { Button, Col, Container, Form, Row } from "react-bootstrap";
+import { FaMagnet } from "react-icons/fa"
+import { HiMagnifyingGlass } from "react-icons/hi2"
+import useFormData from "../Hooks/useFormData";
+
+function TabFormHotel() {
+
+  const { formData, onFormChange, setFormData } = useFormData({
+    hotelLocation: undefined,
+    dateFrom: undefined,
+    dateTo: undefined,
+    numBeds: undefined
+  })
+
+  return (
+    <Form className='rounded-5' >
+      <Row>
+        <Col>
+          <Form.Floating className="mb-3">
+            <Form.Control
+              size="md"
+              type="text"
+              placeholder="Каде ќе патувате?:"
+              id="location"
+              name="hotelLocation"
+              value={formData.hotelLocation}
+              onChange={onFormChange}
+            ></Form.Control>
+            <label htmlFor="location">Локација:</label>
+          </Form.Floating>
+        </Col>
+        <Col>
+          <Form.Floating className="mb-3">
+            <Form.Control
+              size="md"
+              type="date"
+              placeholder="Датум на пристигнување:"
+              id="dateFrom"
+              name="dateFrom"
+              value={formData.dateFrom}
+              onChange={onFormChange}
+            ></Form.Control>
+            <label htmlFor="dateFrom">Датум на пристигнување:</label>
+          </Form.Floating>
+        </Col>
+        <Col>
+          <Form.Floating className="mb-3">
+            <Form.Control
+              size="md"
+              type="date"
+              placeholder="Датум на заминување:"
+              id="dateTo"
+              name="dateTo"
+              value={formData.dateTo}
+              onChange={onFormChange}
+            ></Form.Control>
+            <label htmlFor="dateTo">Датум на заминување:</label>
+          </Form.Floating>
+        </Col>
+        <Col>
+          <Form.Floating className="mb-3">
+            <Form.Control
+              size="md"
+              type="number"
+              placeholder="Број на гости:"
+              id="floatingPassengers"
+              name="numBeds"
+              value={formData.numBeds}
+              onChange={onFormChange}
+            ></Form.Control>
+            <label htmlFor="floatingPassengers">Број на гости:</label>
+          </Form.Floating>
+
+          <Form.Group className="my-1">
+            <Button type="submit" style={{backgroundColor: "#159895"}} size="lg" 
+            onClick={(e) => {
+              e.preventDefault();
+              window.location.href = `/search/hotel/${formData.hotelLocation}/${formData.dateFrom}/${formData.dateTo}/${formData.numBeds}`
+            }}>
+              <span className="ikona my-1"><HiMagnifyingGlass/></span>
+              <span className="ikona mx-3">Пребарај</span>
+            </Button>
+          </Form.Group>
+        </Col>
+
+      </Row>
+    </Form>
+  );
+}
+
+export default TabFormHotel;
Index: frontend/src/Components/Tab/TabFormRestaurant.js
===================================================================
--- frontend/src/Components/Tab/TabFormRestaurant.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Tab/TabFormRestaurant.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,120 @@
+import React from "react";
+import {Button, Col, Container, Form, Row} from "react-bootstrap";
+import {HiMagnifyingGlass} from "react-icons/hi2"
+import useFormData from "../Hooks/useFormData";
+
+const timeOfArrival = () => {
+    let times = [];
+
+    for (let i = 0; i <= 23; i++) {
+        for (let j = 0; j <= 30; j += 30) {
+            let hour = i.toString().padStart(2, "0");
+            let minutes = j.toString().padStart(2, "0");
+            times.push(`${hour}:${minutes}`);
+        }
+    }
+
+    return times;
+};
+function TabFormRestaurant() {
+    const {formData, onFormChange, setFormData} = useFormData({
+        restaurantLocation: '',
+        date: '',
+        hourFrom: '',
+        hourTo: '',
+        numPeople: ''
+    })
+
+
+    const a = timeOfArrival();
+
+    return (
+        <Form>
+            <Row>
+                <Col>
+                    <Form.Floating className="mb-3">
+                        <Form.Control
+                            size="lg"
+                            type="text"
+                            placeholder="Место:"
+                            id="location"
+                            name={'restaurantLocation'}
+                            value={formData.restaurantLocation}
+                            onChange={onFormChange}
+                        ></Form.Control>
+                        <label htmlFor="location">Место:</label>
+                    </Form.Floating>
+                </Col>
+                <Col>
+                    <Form.Floating className="mb-3">
+                        <Form.Control
+                            size="md"
+                            type="date"
+                            step={3600000}
+                            placeholder="Час од:"
+                            id="dateFrom"
+                            name={'date'}
+                            value={formData.date}
+                            onChange={onFormChange}
+                        ></Form.Control>
+                        <label htmlFor="dateFrom">Датум:</label>
+                    </Form.Floating>
+                </Col>
+                <Col>
+                    <Form.Floating className="mb-3">
+                        <Form.Select size="md"
+                         name={'hourFrom'}
+                         value={formData.hourFrom}
+                         onChange={onFormChange}>
+                            <option>Изберете време:</option>
+                            {a.map((x) => {
+                                return <option key={x}>{x}</option>;
+                            })}
+                        </Form.Select>
+                        <label htmlFor="hour">Час од:</label>
+                    </Form.Floating>
+                </Col>
+                <Col>
+                    <Form.Floating className="mb-3">
+                        <Form.Select size="md"
+                         name={'hourTo'}
+                         value={formData.hourTo}
+                         onChange={onFormChange}>
+                            <option>Изберете време:</option>
+                            {a.filter((x) => x > formData.hourFrom).map((x) => {
+                                return <option key={x}>{x}</option>;
+                            })}
+                        </Form.Select>
+                        <label htmlFor="hour">Час до:</label>
+                    </Form.Floating>
+                </Col>
+                <Col>
+                    <Form.Floating className="mb-3">
+                        <Form.Control
+                            size="md"
+                            type="number"
+                            placeholder="Број на гости:"
+                            id="floatingPassengers"
+                            name={'numPeople'}
+                            value={formData.numPeople}
+                            onChange={onFormChange}
+                        ></Form.Control>
+                        <label htmlFor="floatingPassengers">Број на гости:</label>
+                    </Form.Floating>
+                    <Form.Group className="my-1">
+                        <Button type="submit" style={{backgroundColor: "#159895"}} size="lg" onClick={(e) => {
+                            e.preventDefault();
+                            window.location.href = `/search/restaurant/${formData.restaurantLocation}/${formData.date}/${formData.hourFrom}/${formData.hourTo}/${formData.numPeople}`
+
+                        }}>
+                            <span className="ikona my-1"><HiMagnifyingGlass/></span>
+                            <span className="ikona mx-3">Пребарај</span>
+                        </Button>
+                    </Form.Group>
+                </Col>
+            </Row>
+        </Form>
+    );
+}
+
+export default TabFormRestaurant;
Index: frontend/src/Components/Tab/TabFormTransport.js
===================================================================
--- frontend/src/Components/Tab/TabFormTransport.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Tab/TabFormTransport.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,88 @@
+import React from "react";
+import { Button, Col, Container, Form, Row } from "react-bootstrap";
+import { HiMagnifyingGlass } from "react-icons/hi2"
+import useFormData from "../Hooks/useFormData";
+
+function TabFormTransport() {
+
+  const { formData, onFormChange, setFormData } = useFormData({
+    from: undefined,
+    to: undefined,
+    date: undefined,
+    numPassengers: 0
+  })
+
+  return (
+    <Form>
+      <Row>
+        <Col>
+          <Form.Floating className="mb-3">
+            <Form.Control
+              size="md"
+              type="text"
+              placeholder="Од:"
+              id="floatingFrom"
+              value={formData.from}
+              name={'from'}
+              onChange={onFormChange}
+            ></Form.Control>
+            <label htmlFor="floatingFrom">Од:</label>
+          </Form.Floating>
+        </Col>
+        <Col>
+          <Form.Floating className="mb-3">
+            <Form.Control
+              size="md"
+              type="text"
+              placeholder="До:"
+              id="floatingTo"
+              name={'to'}
+              value={formData.to}
+              onChange={onFormChange}
+            ></Form.Control>
+            <label htmlFor="floatingTo">До:</label>
+          </Form.Floating>
+        </Col>
+        <Col>
+          <Form.Floating className="mb-3">
+            <Form.Control
+              size="md"
+              type="date"
+              placeholder="Датум:"
+              id="floatingDate"
+              name={'date'}
+              value={formData.date}
+              onChange={onFormChange}
+            ></Form.Control>
+            <label htmlFor="floatingDate">Датум:</label>
+          </Form.Floating>
+        </Col>
+        <Col>
+          <Form.Floating className="mb-3">
+            <Form.Control
+              size="md"
+              type="number"
+              placeholder="Број на патници:"
+              name={'numPassengers'}
+              id="floatingPassengers"
+              value={formData.numPassengers}
+              onChange={onFormChange}
+            ></Form.Control>
+            <label htmlFor="floatingPassengers">Број на патници:</label>
+          </Form.Floating>
+          <Form.Group className="my-1">
+            <Button type="submit" style={{backgroundColor: "#159895"}} size="lg" onClick={(e) => {
+              e.preventDefault();
+              window.location.href = `/search/transport/${formData.from}/${formData.to}/${formData.date}/${formData.numPassengers}`
+            }}>
+              <span className="ikona my-1"><HiMagnifyingGlass/></span>
+              <span className="ikona mx-3">Пребарај</span>
+            </Button>
+          </Form.Group>
+        </Col>
+      </Row>
+    </Form>
+  );
+}
+
+export default TabFormTransport;
Index: frontend/src/Components/TransportDetails/FinalPoint.js
===================================================================
--- frontend/src/Components/TransportDetails/FinalPoint.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/TransportDetails/FinalPoint.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,38 @@
+import React from "react";
+import { Container, Row, Col } from "react-bootstrap";
+import { RxDotFilled } from "react-icons/rx"
+import Line from "./Line";
+
+const FinalPoint = (props) => {
+  console.log(props.left)
+  const style = props.left === "true" ? {textAlign: "left"} : {}
+  console.log(style)
+
+  const getTimeAsString = (dateString) => {
+    const date = new Date(dateString)
+    return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+  }
+
+  return (
+    <>
+      <Row>
+        {props.left === "true" && <Col className="d-flex flex-column justify-content-center col-md-4" style={{paddingLeft: "2.6rem"}}>
+            <h5 className="m-auto">{getTimeAsString(props.time)}</h5>
+        </Col>  }
+        <Col md="auto">
+          <RxDotFilled size={"4rem"} color="#159895"></RxDotFilled>
+        </Col>
+        <Col className="d-flex flex-column justify-content-center">
+          <h3 className="my-auto" style={style}>{props.city}</h3>
+        </Col>
+        {props.left !== "true" && <Col className="d-flex flex-column justify-content-center">
+            <h5>{getTimeAsString(props.time)}</h5>
+        </Col>  }
+      </Row>
+      <Row> 
+      </Row>
+    </>
+  );
+};
+
+export default FinalPoint;
Index: frontend/src/Components/TransportDetails/Line.js
===================================================================
--- frontend/src/Components/TransportDetails/Line.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/TransportDetails/Line.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,10 @@
+import React from "react";
+
+const Line = (props) => {
+    const left = props.left === "true" ? "1.8rem" : "1.85rem";
+    return (<>
+        <div style={{borderLeft: "5px solid #159895", height: "3em", marginLeft: left, marginTop: "-1.4rem", marginBottom: "-1.4rem"}}></div>
+    </>)
+}
+
+export default Line;
Index: frontend/src/Components/TransportDetails/RouteContainer.js
===================================================================
--- frontend/src/Components/TransportDetails/RouteContainer.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/TransportDetails/RouteContainer.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,32 @@
+import React from "react";
+import { Container, Row, Col } from "react-bootstrap";
+import { RxDot } from "react-icons/rx"
+import Line from "./Line";
+import Waypoint from "./Waypoint";
+import FinalPoint from "./FinalPoint";
+
+const RouteContainer = (props) => {
+  console.log("VO KONTEJNERO")
+  console.log(props.data)
+  return (
+    <>
+      <Container
+        className="py-3 px-4 my-4"
+        style={{
+          border: "4px solid #159895",
+          borderRadius: "1em",
+          boxShadow: "0 3px 5px #159895",
+          maxWidth: "60%",
+        }}
+      >
+        <Waypoint city={props.data.from} time={''}></Waypoint>
+        {props.data.routes && props.data.routes.map((route, i) => {
+          return <Waypoint city={route} time={props.data.times[i]}></Waypoint>
+        })}
+        <FinalPoint city={props.data.to} time={props.data.time}></FinalPoint>
+      </Container>
+    </>
+  );
+};
+
+export default RouteContainer;
Index: frontend/src/Components/TransportDetails/Waypoint.js
===================================================================
--- frontend/src/Components/TransportDetails/Waypoint.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/TransportDetails/Waypoint.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,61 @@
+import React from "react";
+import {Container, Row, Col} from "react-bootstrap";
+import {RxDot} from "react-icons/rx"
+import Line from "./Line";
+
+const Waypoint = (props) => {
+    console.log(props.left)
+    const style = props.left === "true" ? {textAlign: "left"} : {}
+    console.log(style)
+
+    const getTimeAsString = (dateString) => {
+        if(dateString === '')
+            return ''
+        const date = new Date(dateString)
+        return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+    }
+
+    return (
+        <>
+            <Row className="d-flex flex-row gap-0">
+                {props.left === "true" &&
+                    <Col className="d-flex flex-column justify-content-center col-md-4" style={{paddingLeft: "2.6rem"}}>
+                        <h5 style={{color: props.routes === "true" ? "white" : ""}}
+                            className="m-auto">{getTimeAsString(props.time)}</h5>
+                    </Col>}
+                <Col md="auto">
+                    <RxDot size={"4rem"} color="#159895"></RxDot>
+                </Col>
+                <Col className="d-flex flex-column justify-content-center">
+                    <h3 className="my-auto" style={{
+                        ...style,
+                        fontSize: props.routes === "true" ? "1.3rem" : "",
+                        color: props.routes === "true" ? "#708090	" : ""
+                    }}>{props.city}</h3>
+                </Col>
+                {props.left !== "true" && <Col className="d-flex flex-column justify-content-center">
+                    <h5>{getTimeAsString(props.time)}</h5>
+                </Col>}
+            </Row>
+            <Row className="d-flex flex-row gap-0">
+                {props.left === "true" &&
+                    <Col className="d-flex flex-column justify-content-center col-md-4" style={{paddingLeft: "2.6rem"}}>
+
+                    </Col>}
+                <Col md="auto">
+                    <Line left={props.left}> </Line>
+                </Col>
+                <Col className="d-flex flex-column justify-content-center">
+                </Col>
+                {props.left !== "true" && <Col className="d-flex flex-column justify-content-center">
+
+                </Col>}
+            </Row>
+            {/*<Row>*/}
+            {/*<Line left={props.left}> </Line>*/}
+            {/*</Row>*/}
+        </>
+    );
+};
+
+export default Waypoint;
Index: frontend/src/Components/TransportEdit/TransportEditTab.js
===================================================================
--- frontend/src/Components/TransportEdit/TransportEditTab.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/TransportEdit/TransportEditTab.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,85 @@
+import React from "react";
+import { Container, Col, Row, Image, Nav, Tab } from "react-bootstrap";
+import { useState } from "react";
+import { FaTaxi, FaHotel } from "react-icons/fa";
+import { MdOutlineStickyNote2 } from "react-icons/md";
+import AddNew from "../Resources/AddNew";
+import { BiData } from "react-icons/bi";
+import AddTransportForm from "../Forms/AddTransportForm";
+import TransportListing from "./TransportListing";
+import useGet from "../Hooks/useGet";
+
+function TransportEditTab(props) {
+  const [activeTab, setActiveTab] = useState("/hotel");
+  console.log(props.displayRoute)
+
+
+  const handleSelect = (eventKey) => {
+    setActiveTab(eventKey);
+  };
+
+  return (
+    <Container className="rounded-5">
+      <Tab.Container
+        activeKey={activeTab}
+        onSelect={handleSelect}
+        className="bg-dark rounded-5"
+      >
+        <Nav
+          fill
+          variant="tabs"
+          className="bg-body rounded-top-5"
+          activeKey="/hotel"
+          id="tab_item"
+        >
+          <Nav.Item className="tab_item rounded-5">
+            <Nav.Link eventKey="/hotel" className="text-left rounded-5">
+              <span className="ikona">
+                <FaHotel
+                  color="#159895"
+                  style={{ lineHeight: "100em" }}
+                  size={"1.5em"}
+                  className="mx-3"
+                />
+              </span>
+              <span className="ikona">Рути</span>
+            </Nav.Link>
+          </Nav.Item>
+          <Nav.Item className="tab_item">
+            <Nav.Link eventKey="/restaurant">
+              <span className="ikona">
+                <MdOutlineStickyNote2 color="#159895" size={"1.5em"} className="mx-3" />
+              </span>
+              <span className="ikona">Резервации</span>
+            </Nav.Link>
+          </Nav.Item>
+          <Nav.Item className="tab_item rounded-5">
+            <Nav.Link eventKey="/transport" className="text-left rounded-5">
+              <span className="ikona">
+                <BiData color="#159895" size={"1.5em"} className="mx-3" />
+              </span>
+              <span className="ikona">Општи податоци</span>
+            </Nav.Link>
+          </Nav.Item>
+        </Nav>
+
+        <Tab.Content className="py-5 px-3 border rounded-bottom-5 bg-light">
+          <Tab.Pane eventKey="/hotel">
+            {props.displayRoute && props.displayRoute.availableRoutes.map((route) => {
+              return <TransportListing data={route}/>
+            })}  
+            <AddNew type="route" transport={props.displayRoute} refresh={props.refresh}/>
+          </Tab.Pane>
+          <Tab.Pane eventKey="/restaurant">
+            <AddNew type="restaurant"/>
+          </Tab.Pane>
+          <Tab.Pane eventKey="/transport">
+            <AddTransportForm transport={props.displayRoute} refresh={props.refresh}/>
+          </Tab.Pane>
+        </Tab.Content>
+      </Tab.Container>
+    </Container>
+  );
+}
+
+export default TransportEditTab;
Index: frontend/src/Components/TransportEdit/TransportListing.js
===================================================================
--- frontend/src/Components/TransportEdit/TransportListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/TransportEdit/TransportListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,47 @@
+import React from "react";
+import {useState} from "react";
+import {Col, Container, Row, Image, Modal, Button} from "react-bootstrap";
+import LoginForm from "../Login/LoginForm";
+import ChangePasswordForm from "../Forms/ChangePasswordForm";
+import {AiOutlinePlusCircle} from "react-icons/ai"
+
+const TransportListing = (props) => {
+
+    //const type = props.type == "hotel" ? "сместувањето" : props.type == "restaurant" ? "ресторанот" : "превозот";
+    return (<>
+        <a href="#" style={{textDecoration: "none", color: "black"}}>
+            <Container className="py-3 px-1 my-4"
+                       style={{
+                           border: "4px solid #159895",
+                           borderRadius: "1em",
+                           boxShadow: "0 3px 5px #159895",
+                           maxWidth: "90%",
+                       }}>
+                <Row>
+                    <Col className="d-flex justify-content-center">
+                        <Image
+                            src="https://samsung.teveotecno.com.ar/wp-content/uploads/2022/07/how-to-create-and-draw-custom-routes-with-google-maps_62d4ad146140d.jpeg"
+                            style={{
+                                height: "8em",
+                                borderRadius: "1em",
+                                boxShadow: "0 4px 20px lightblue",
+                                maxWidth: "100%",
+                            }}
+                        ></Image>
+                    </Col>
+                    <Col className="d-flex flex-column justify-content-center" style={{textAlign: "left"}}>
+                        <h2>{props.data.from} - {props.data.to}</h2>
+                        <h6>{props.data.routes.map(x => x).join(", ")}</h6>
+                    </Col>
+
+                    <Col className="d-flex flex-column justify-content-center align-content-center">
+                        <h5>Цена:</h5>
+                         <h4>{props.data.maxPrice}$</h4>
+                    </Col>
+                </Row>
+            </Container>
+        </a>
+    </>)
+}
+
+export default TransportListing;
Index: frontend/src/Components/UserPanel/ActiveHotelReservations.js
===================================================================
--- frontend/src/Components/UserPanel/ActiveHotelReservations.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/UserPanel/ActiveHotelReservations.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,20 @@
+import HotelReservationListing from "./HotelReservationListing";
+import React from "react";
+import useGet from "../Hooks/useGet";
+
+const ActiveHotelReservations = () => {
+
+    const {data, isLoading, setData, getData, setChanged} = useGet('/hotel/reservations/user/1')
+
+    return (
+        <>
+            {!isLoading && data.map((res) => {
+                return (<HotelReservationListing data={res} type={'hotel'}></HotelReservationListing>)
+            })}
+
+            {(!isLoading && data.length === 0) && <h3 className={'my-5'}>Нема податоци за одбраните критериуми!</h3>}
+        </>
+    )
+}
+
+export default ActiveHotelReservations;
Index: frontend/src/Components/UserPanel/ActiveRestaurantReservations.js
===================================================================
--- frontend/src/Components/UserPanel/ActiveRestaurantReservations.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/UserPanel/ActiveRestaurantReservations.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,20 @@
+import HotelReservationListing from "./HotelReservationListing";
+import React from "react";
+import useGet from "../Hooks/useGet";
+
+const ActiveRestaurantReservations = () => {
+
+    const {data, isLoading, setData, getData, setChanged} = useGet('/restaurant/reservations/user/1')
+
+    return (
+        <>
+            {!isLoading && data.map((res) => {
+                return (<HotelReservationListing data={res} type={'restaurant'}></HotelReservationListing>)
+            })}
+
+            {(!isLoading && data.length === 0) && <h3 className={'my-5'}>Нема податоци за одбраните критериуми!</h3>}
+        </>
+    )
+}
+
+export default ActiveRestaurantReservations;
Index: frontend/src/Components/UserPanel/ActiveTransportReservations.js
===================================================================
--- frontend/src/Components/UserPanel/ActiveTransportReservations.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/UserPanel/ActiveTransportReservations.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,20 @@
+import HotelReservationListing from "./HotelReservationListing";
+import React from "react";
+import useGet from "../Hooks/useGet";
+
+const ActiveTransportReservations = () => {
+
+    const {data, isLoading, setData, getData, setChanged} = useGet('/transport/reservations/user/1')
+
+    return (
+        <>
+            {!isLoading && data.map((res) => {
+                return (<HotelReservationListing data={res} type={'transport'}></HotelReservationListing>)
+            })}
+
+            {(!isLoading && data.length === 0) && <h3 className={'my-5'}>Нема податоци за одбраните критериуми!</h3>}
+        </>
+    )
+}
+
+export default ActiveTransportReservations;
Index: frontend/src/Components/UserPanel/HotelReservationListing.js
===================================================================
--- frontend/src/Components/UserPanel/HotelReservationListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/UserPanel/HotelReservationListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,139 @@
+import React from "react";
+import {useState} from "react";
+import {Col, Container, Row, Image, Modal, Button, Form} from "react-bootstrap";
+import LoginForm from "../Login/LoginForm";
+import ChangePasswordForm from "../Forms/ChangePasswordForm";
+import {FaCalendarAlt} from "react-icons/fa";
+import {MdBalcony, MdLocationOn} from "react-icons/md";
+import AddAvailability from "../Resources/AddAvailability";
+import {LuFan} from "react-icons/lu";
+import {TbToolsKitchen2} from "react-icons/tb";
+import useGet from "../Hooks/useGet";
+import data from "bootstrap/js/src/dom/data";
+import {AiOutlinePlusCircle} from "react-icons/ai";
+import {MdOutlineRateReview} from "react-icons/md";
+import useFormData from "../Hooks/useFormData";
+import useCreate from "../Hooks/useCreate";
+import HotelReservationModal from "./HotelReservationModal";
+import ReviewModal from "./ReviewModal";
+
+
+const HotelReservationListing = (props) => {
+
+    const type = props.type == "hotel" ? "сместувањето" : props.type == "restaurant" ? "ресторанот" : "превозот";
+    // const name = props.type == "hotel" ? props.data.hotelName : props.type == "restaurant" ? props.data.restaurantName : props.data.transportName
+    // const id = props.type == "hotel" ? props.data.hotelId : props.type == "restaurant" ? props.data.restaurantID : props.data.transportID
+
+    console.log(props.data)
+    const dateFormatter = (str) => {
+        const inputDate = new Date(str);
+
+        const options = props.type === 'hotel' ? {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour12: false,
+        } : {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false,
+        };
+
+        return inputDate.toLocaleString('de-DE', options);
+
+    }
+
+    console.log(props)
+
+    const [showReview, setShowReview] = useState(false);
+
+    const handleCloseReview = () => setShowReview(false);
+    const handleShowReview = () => setShowReview(true);
+
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+    const handleShow = () => setShow(true);
+
+    return (<>
+        <Container onClick={(e) => {
+            if (e.target.id !== 'icon') {
+                handleShow();
+            }
+        }} className="py-3 px-1 my-4"
+                   style={{
+                       border: "4px solid #159895",
+                       borderRadius: "1em",
+                       boxShadow: "0 3px 5px #159895",
+                       maxWidth: "90%",
+                   }}>
+            <Row>
+                <Col className="d-flex justify-content-center">
+                    {props.type !== 'transport' && <Image
+                        src="https://www.imgacademy.com/sites/default/files/legacyhotel.jpg"
+                        style={{
+                            height: "8em",
+                            borderRadius: "1em",
+                            boxShadow: "0 4px 20px lightblue",
+                            maxWidth: "100%",
+                        }}
+                    ></Image>}
+                    {props.type === 'transport' && <Image
+                        src="https://samsung.teveotecno.com.ar/wp-content/uploads/2022/07/how-to-create-and-draw-custom-routes-with-google-maps_62d4ad146140d.jpeg"
+                        style={{
+                            height: "8em",
+                            borderRadius: "1em",
+                            boxShadow: "0 4px 20px lightblue",
+                            maxWidth: "80%",
+                        }}
+                    ></Image>}
+                </Col>
+                <Col className={'d-flex flex-column justify-content-center'}>
+                    {props.type === "hotel" && (<>
+                        <h2 style={{textAlign: "left"}}>{props.data.hotelName}</h2>
+                        <h5 style={{textAlign: "left"}}>{props.data.hotelLocation}</h5>
+                        <h5 style={{textAlign: "left"}}>{dateFormatter(props.data.dateFrom) + ' - ' + dateFormatter(props.data.dateTo)}</h5>
+                    </>)}
+                    {props.type === "restaurant" && (<>
+                        <h2 style={{textAlign: "left"}}>{props.data.restaurantName}</h2>
+                        <h5 style={{textAlign: "left"}}>{props.data.restaurantLocation}</h5>
+                        <h5 style={{textAlign: "left"}}>{dateFormatter(props.data.dateFrom) + ' - ' + dateFormatter(props.data.dateTo)}</h5>
+                    </>)}
+                    {props.type === "transport" && (<>
+                        <h5 style={{textAlign: "left"}}>{props.data.carBrand + ' ' + props.data.carType}</h5>
+                        <h5 style={{textAlign: "left"}}>{props.data.transportRoute.from + ' - ' + props.data.transportRoute.to}</h5>
+                        <h5 style={{textAlign: "left"}}>{dateFormatter(props.data.transportRoute.departure) + ' - ' + dateFormatter(props.data.transportRoute.arrival)}</h5>
+                        <h5 style={{textAlign: "left"}}>{props.data.owner.name + ' ' + props.data.owner.surname}</h5>
+                    </>)}
+                </Col>
+                {props.type === 'transport' &&
+                    <Col className="d-flex flex-column justify-content-center align-content-center">
+                        <h3>Вкупна цена: <br></br>{props.data.transportRoute.price}$</h3>
+                    </Col>}
+                {(props.past) && <Col className="d-flex flex-column justify-content-center align-content-center">
+                    {!props.data.reviewed && <Container id={'ocn'} onClick={(e) => {
+                        console.log(e.target)
+                        if (e.target.id === 'icon') {
+                            handleShowReview();
+                        }
+                    }}>
+                        <h5 id={'icon'}>Додади<br/>оценка</h5>
+                        <div className="d-flex justify-content-center align-content-center">
+                            <MdOutlineRateReview size={50} color="#159895"/></div>
+
+                    </Container>}
+                    {props.data.reviewed && <Container>
+                        <h5>Веќе имате <br/>оставено оценка<br/>за оваа резервација</h5>
+                    </Container>}
+                </Col>}
+            </Row>
+        </Container>
+        {props.type === 'hotel' && <HotelReservationModal show={show} handleClose={handleClose} data={props.data}/>}
+        <ReviewModal type={props.type} showReview={showReview} handleCloseReview={handleCloseReview} data={props.data}/>
+    </>)
+}
+
+export default HotelReservationListing;
Index: frontend/src/Components/UserPanel/HotelReservationModal.js
===================================================================
--- frontend/src/Components/UserPanel/HotelReservationModal.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/UserPanel/HotelReservationModal.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,198 @@
+import {Button, Col, Container, Image, Modal, Row} from "react-bootstrap";
+import {FaCalendarAlt} from "react-icons/fa";
+import {MdBalcony, MdLocationOn} from "react-icons/md";
+import {LuFan} from "react-icons/lu";
+import {TbToolsKitchen2} from "react-icons/tb";
+import React from "react";
+
+const HotelReservationModal = (props) => {
+
+    const dateFormatter = (str) => {
+        const inputDate = new Date(str);
+
+        const options = {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour12: false,
+        };
+
+        return inputDate.toLocaleString('de-DE', options);
+
+    }
+
+    return (
+        <>
+            <Modal size={"xl"} show={props.show} onHide={props.handleClose}>
+                <Modal.Header closeButton>
+                    <Modal.Title>Детали за резервација</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    <Container className="py-3 px-1 my-4" style={{maxWidth: "90%"}}>
+                        <Row className={'mb-3'}>
+                            <Col className={'px-4'}>
+                                <h3>{props.data.hotelName}</h3>
+                            </Col>
+                            <Col>
+
+                            </Col>
+                        </Row>
+                        <Row className={'mb-3'}>
+                            <Col className={'d-flex flex-column justify-content-between'}>
+                                <Row>
+                                    <Col md={'auto'}
+                                         className={'d-flex flex-column justify-content-center align-items-center ms-3'}>
+                                        <FaCalendarAlt size={'2em'}/>
+                                    </Col>
+                                    <Col md={'auto'} style={{borderRight: '1px solid black'}}>
+                                        <Row className={'w-75'}>
+                                            <h6>Пријавување</h6>
+                                        </Row>
+                                        <Row>
+                                            <h5>{dateFormatter(props.data.dateFrom)}</h5>
+                                        </Row>
+
+                                    </Col>
+                                    <Col>
+                                        <Row>
+                                            <h6>Одјавување</h6>
+                                        </Row>
+                                        <Row>
+                                            <h5>{dateFormatter(props.data.dateTo)}</h5>
+                                        </Row>
+                                    </Col>
+                                    <Col md={7}>
+
+                                    </Col>
+                                </Row>
+                                <Row>
+                                    <Col md={'auto'}
+                                         className={'d-flex flex-column justify-content-center align-items-center ms-3'}>
+                                        <MdLocationOn size={'2em'}/>
+                                    </Col>
+                                    <Col md={'auto'}>
+                                        <Row className={'w-75'}>
+                                            <h6>Адреса</h6>
+                                        </Row>
+                                        <Row>
+                                            <h5>ул. Македонска бр. 10</h5>
+                                        </Row>
+                                    </Col>
+                                    <Col>
+                                    </Col>
+
+                                </Row>
+                            </Col>
+                            <Col className={'d-flex flex-column align-items-center'}>
+                                <Image
+                                    src="https://www.imgacademy.com/sites/default/files/legacyhotel.jpg"
+                                    style={{
+                                        height: "10em",
+                                        borderRadius: "1em",
+                                        boxShadow: "0 4px 20px lightblue",
+                                        maxWidth: "100%",
+                                    }}
+                                ></Image>
+                            </Col>
+
+                        </Row>
+                    </Container>
+                    <Container>
+                        <Row className={'mb-3'}>
+                            <h4>Детали за собата</h4>
+                        </Row>
+                        <Row>
+                            <Col className="d-flex justify-content-center">
+                                <Image
+                                    src="https://img.freepik.com/free-photo/luxury-classic-modern-bedroom-suite-hotel_105762-1787.jpg?w=200"
+                                    style={{
+                                        height: "10em",
+                                        borderRadius: "1em",
+                                        boxShadow: "0 4px 20px lightblue",
+                                        maxWidth: "100%",
+                                    }}
+                                ></Image>
+                            </Col>
+                            <Col className="d-flex flex-column justify-content-center" style={{textAlign: "left"}}>
+                                <Row><h4>{props.data.hotelRoom.hotelRoomName}</h4></Row>
+                                <Row>
+                                    {props.data.hotelRoom.airConditioning && <Col className="col-auto">
+                                        <Container className="py-1 px-1">
+                                            <Row className="d-flex flex-row">
+                                                <Col className="m-0 w-25 py-1">
+                                                    <LuFan
+                                                        className="my-0 "
+                                                        color="#159895"
+                                                        size={40}
+                                                    ></LuFan>
+                                                </Col>
+                                                <Col className="w-75 d-flex p-0">
+                                                    <h6 style={{fontSize: "14px"}} className="m-auto">
+                                                        Климатизирано
+                                                    </h6>
+                                                </Col>
+                                            </Row>
+                                        </Container>
+                                    </Col>}
+                                    {props.data.hotelRoom.kitchenAvailable && <Col className="col-auto">
+                                        <Container
+                                            className="py-1 px-1">
+                                            <Row className="d-flex flex-row">
+                                                <Col className="m-0 w-25 py-1">
+                                                    <TbToolsKitchen2 className="my-0 " color="#159895"
+                                                                     size={40}></TbToolsKitchen2>
+                                                </Col>
+                                                <Col className="w-75 d-flex p-0">
+                                                    <h6 style={{fontSize: "14px"}} className="m-auto">Кујна</h6>
+                                                </Col>
+                                            </Row>
+                                        </Container>
+                                    </Col>}
+                                    {props.data.hotelRoom.balcony && <Col className="col-auto">
+                                        <Container
+                                            className="py-1 px-1">
+                                            <Row className="d-flex flex-row">
+                                                <Col className="m-0 w-25 py-1">
+                                                    <MdBalcony className="my-0 " color="#159895" size={40}></MdBalcony>
+                                                </Col>
+                                                <Col className="w-75 d-flex p-0">
+                                                    <h6 style={{fontSize: "14px"}} className="m-auto">Тераса</h6>
+                                                </Col>
+                                            </Row>
+                                        </Container>
+                                    </Col>}
+                                </Row>
+                            </Col>
+                        </Row>
+                    </Container>
+                    <Container className={'border mt-3 w-75 py-3 rounded-3'}>
+                        <Row className={'mb-3'}>
+                            <Col>
+                                <h5>4 Ноќевања</h5>
+                            </Col>
+                            <Col>
+                                <h5 className={'text-end'}>32$</h5>
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col>
+                                <h5>Вкупно</h5>
+                            </Col>
+                            <Col>
+                                <h4 className={'text-end'}>128$</h4>
+                            </Col>
+                        </Row>
+                    </Container>
+                </Modal.Body>
+                <Modal.Footer>
+                    <Button variant="secondary" onClick={props.handleClose}>
+                        Затвори
+                    </Button>
+                </Modal.Footer>
+            </Modal>
+
+        </>
+    )
+}
+
+export default HotelReservationModal;
Index: frontend/src/Components/UserPanel/PastHotelReservations.js
===================================================================
--- frontend/src/Components/UserPanel/PastHotelReservations.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/UserPanel/PastHotelReservations.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,19 @@
+import HotelReservationListing from "./HotelReservationListing";
+import React from "react";
+import useGet from "../Hooks/useGet";
+
+const PastHotelReservations = () => {
+
+    const {data, isLoading, setData, getData, setChanged} = useGet('/hotel/reservations/user/1/past')
+
+    return (
+        <>
+            {!isLoading && data.map((res) => {
+                return (<HotelReservationListing past={true} data={res} type={'hotel'}></HotelReservationListing>)
+            })}
+            {(!isLoading && data.length === 0) && <h3 className={'my-5'}>Нема податоци за одбраните критериуми!</h3>}
+        </>
+    )
+}
+
+export default PastHotelReservations;
Index: frontend/src/Components/UserPanel/PastRestaurantReservations.js
===================================================================
--- frontend/src/Components/UserPanel/PastRestaurantReservations.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/UserPanel/PastRestaurantReservations.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,20 @@
+import HotelReservationListing from "./HotelReservationListing";
+import React from "react";
+import useGet from "../Hooks/useGet";
+
+const PastRestaurantReservations = () => {
+
+    const {data, isLoading, setData, getData, setChanged} = useGet('/restaurant/reservations/user/1/past')
+    !isLoading && console.log(data)
+
+    return (
+        <>
+            {!isLoading && data.map((res) => {
+                return (<HotelReservationListing past={true} data={res} type={'restaurant'}></HotelReservationListing>)
+            })}
+            {(!isLoading && data.length === 0) && <h3 className={'my-5'}>Нема податоци за одбраните критериуми!</h3>}
+        </>
+    )
+}
+
+export default PastRestaurantReservations;
Index: frontend/src/Components/UserPanel/PastTransportReservations.js
===================================================================
--- frontend/src/Components/UserPanel/PastTransportReservations.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/UserPanel/PastTransportReservations.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,20 @@
+import HotelReservationListing from "./HotelReservationListing";
+import React from "react";
+import useGet from "../Hooks/useGet";
+
+const PastTransportReservations = () => {
+
+    const {data, isLoading, setData, getData, setChanged} = useGet('/transport/reservations/user/1/past')
+
+    return (
+        <>
+            {!isLoading && data.map((res) => {
+                return (<HotelReservationListing past={true} data={res} type={'transport'}></HotelReservationListing>)
+            })}
+
+            {(!isLoading && data.length === 0) && <h3 className={'my-5'}>Нема податоци за одбраните критериуми!</h3>}
+        </>
+    )
+}
+
+export default PastTransportReservations;
Index: frontend/src/Components/UserPanel/ReviewModal.js
===================================================================
--- frontend/src/Components/UserPanel/ReviewModal.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/UserPanel/ReviewModal.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,106 @@
+import {Button, Form, Modal, Row} from "react-bootstrap";
+import React from "react";
+import useFormData from "../Hooks/useFormData";
+import useCreate from "../Hooks/useCreate";
+
+const ReviewModal = (props) => {
+    const dummy = {
+        tite: "",
+        numStars: "",
+        description: "",
+    }
+
+    const {createEntity} = useCreate();
+
+    const {formData, setFormData, onFormChange} = useFormData(dummy)
+
+    return (
+        <>
+            <Modal show={props.showReview} onHide={props.handleCloseReview}>
+                <Modal.Header closeButton>
+                    <Modal.Title>Внесување оценка по резервација</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    <Form>
+                        <Row>
+                            <Form.Floating className="mb-3">
+                                <Form.Control
+                                    size="md"
+                                    type="text"
+                                    placeholder="Каде ќе патувате?:"
+                                    id="title"
+                                    name="title"
+                                    onChange={onFormChange}
+                                    value={formData.title}
+                                ></Form.Control>
+                                <label style={{left: '10px'}} htmlFor="location">Наслов:</label>
+                            </Form.Floating>
+                        </Row>
+                        <Row>
+                            <Form.Floating className="mb-3">
+                                <Form.Control
+                                    size="md"
+                                    type="number"
+                                    max={5}
+                                    min={1}
+                                    placeholder="Каде ќе патувате?:"
+                                    id="numStars"
+                                    name="numStars"
+                                    onChange={onFormChange}
+                                    value={formData.numStars}
+                                ></Form.Control>
+                                <label style={{left: '10px'}} htmlFor="location">Број на ѕвезди:</label>
+                            </Form.Floating>
+                        </Row>
+
+                        <Row>
+                            <Form.Floating className="mb-3">
+                                <Form.Control
+                                    size="md"
+                                    as="textarea"
+                                    placeholder="Каде ќе патувате?:"
+                                    id="description"
+                                    name="description"
+                                    onChange={onFormChange}
+                                    value={formData.description}
+                                ></Form.Control>
+                                <label style={{left: '10px'}} htmlFor="location">Опис:</label>
+                            </Form.Floating>
+                        </Row>
+
+                    </Form>
+                </Modal.Body>
+                <Modal.Footer>
+                    <Button variant="secondary" onClick={props.handleClose}>
+                        Затвори
+                    </Button>
+                    <Button variant="primary" onClick={() => {
+                        // console.log(props.data.hotelId)
+                        const dataToPost = props.type === 'hotel' ? {
+                                ...formData,
+                                hotelId: props.data.hotelId,
+                                userId: 1
+                            } :
+                            props.type === 'restaurant' ? {
+                                    ...formData,
+                                    restaurantId: props.data.restaurantId,
+                                    userId: 1
+                                } : {
+                                ...formData,
+                                transportId: props.data.transportId,
+                                userId: 1
+                            }
+                                createEntity('/review/add', dataToPost)
+                        setFormData(dummy)
+                        props.handleCloseReview()
+                    }
+                    }>
+                        Зачувај
+                    </Button>
+                </Modal.Footer>
+            </Modal>
+        </>
+    )
+}
+
+export default ReviewModal;
Index: frontend/src/Components/UserPanel/TypeSelectionTab.js
===================================================================
--- frontend/src/Components/UserPanel/TypeSelectionTab.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/UserPanel/TypeSelectionTab.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,115 @@
+import React, {useState} from "react";
+import {Container, Nav, Tabs} from "react-bootstrap";
+import {Tab} from "react-bootstrap";
+import {FaHotel, FaTaxi} from 'react-icons/fa'
+import {MdRestaurant} from "react-icons/md"
+import HotelReservationListing from "./HotelReservationListing";
+import UnapprovedBusinessesTable from "../AdminPanel/UnapprovedBusinessesTable";
+import UnapprovedProfilesTable from "../AdminPanel/UnapprovedProfilesTable";
+import AllProfilesTable from "../AdminPanel/AllProfilesTable";
+import useGet from "../Hooks/useGet";
+import ActiveHotelReservations from "./ActiveHotelReservations";
+import PastHotelReservations from "./PastHotelReservations";
+import ActiveRestaurantReservations from "./ActiveRestaurantReservations";
+import PastRestaurantReservations from "./PastRestaurantReservations";
+import ActiveTransportReservations from "./ActiveTransportReservations";
+import PastTransportReservations from "./PastTransportReservations";
+
+function TypeSelectionTab() {
+    const [activeTab, setActiveTab] = useState("/hotel");
+    const handleSelect = (eventKey) => {
+        setActiveTab(eventKey);
+    };
+
+
+    return (
+        <Container className='rounded-5'>
+            <Tab.Container
+                activeKey={activeTab}
+                onSelect={handleSelect}
+                className="bg-dark rounded-5"
+            >
+                <Nav
+                    fill
+                    variant="tabs"
+                    className="bg-body rounded-top-5"
+                    activeKey="/hotel"
+                    id="tab_item"
+                >
+                    <Nav.Item className="tab_item rounded-5">
+                        <Nav.Link eventKey="/hotel" className="text-left rounded-5">
+                            <span className="ikona"><FaHotel color="#159895" style={{lineHeight: "100em"}}
+                                                             size={"1.5em"} className="mx-3"/></span>
+                            <span className="ikona">Сместување</span>
+                        </Nav.Link>
+                    </Nav.Item>
+                    <Nav.Item className="tab_item">
+                        <Nav.Link eventKey="/restaurant">
+                            <span className="ikona"><MdRestaurant color="#159895" size={"1.5em"}
+                                                                  className="mx-3"/></span><
+                            span className="ikona">Ресторан</span>
+                        </Nav.Link>
+                    </Nav.Item>
+                    <Nav.Item className="tab_item rounded-5">
+                        <Nav.Link eventKey="/transport" className="text-left rounded-5"><span className="ikona"><FaTaxi
+                            color="#159895" size={"1.5em"} className="mx-3"/></span>
+                            <span className="ikona">Превоз</span>
+                        </Nav.Link>
+                    </Nav.Item>
+                </Nav>
+
+                <Tab.Content className="py-5 px-3 border rounded-bottom-5 bg-light">
+                    <Tab.Pane eventKey="/hotel">
+                        <Container>
+                            <Tabs
+                                fill
+                                defaultActiveKey="home"
+                                id="uncontrolled-tab-example"
+                                className="mb-3"
+                            >
+                                <Tab eventKey="home" title="Активни резервации">
+                                    <ActiveHotelReservations></ActiveHotelReservations>
+                                </Tab>
+                                <Tab eventKey="profile" title="Претходни резервации">
+                                    <PastHotelReservations></PastHotelReservations>
+                                </Tab>
+                            </Tabs>
+                        </Container>
+                    </Tab.Pane>
+                    <Tab.Pane eventKey="/restaurant">
+                        <Tabs
+                            fill
+                            defaultActiveKey="home"
+                            id="uncontrolled-tab-example"
+                            className="mb-3"
+                        >
+                            <Tab eventKey="home" title="Активни резервации">
+                                <ActiveRestaurantReservations></ActiveRestaurantReservations>
+                            </Tab>
+                            <Tab eventKey="profile" title="Претходни резервации">
+                                <PastRestaurantReservations></PastRestaurantReservations>
+                            </Tab>
+                        </Tabs>
+                    </Tab.Pane>
+                    <Tab.Pane eventKey="/transport">
+                        <Tabs
+                            fill
+                            defaultActiveKey="home"
+                            id="uncontrolled-tab-example"
+                            className="mb-3"
+                        >
+                            <Tab eventKey="home" title="Активни резервации">
+                                <ActiveTransportReservations></ActiveTransportReservations>
+                            </Tab>
+                            <Tab eventKey="profile" title="Претходни резервации">
+                                <PastTransportReservations></PastTransportReservations>
+                            </Tab>
+                        </Tabs>
+                    </Tab.Pane>
+                </Tab.Content>
+            </Tab.Container>
+        </Container>
+    );
+}
+
+export default TypeSelectionTab;
Index: frontend/src/Components/useFormNested.js
===================================================================
--- frontend/src/Components/useFormNested.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/useFormNested.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,44 @@
+import {useState} from 'react';
+
+const useFormNested = (editData) => {
+    const [formData, setData] = useState({...editData});
+
+    const onFormChange = (e) => {
+        console.log(e)
+
+        const dependantRoutes = e.target.name === 'freeSpace' ? e.target.parentElement.getAttribute('dependantRoutes').split(',') : undefined;
+        console.log(dependantRoutes)
+
+        let updatedData = {
+            ...formData,
+            [e.target.parentElement.attributes.routeId.value]: {
+                ...formData[e.target.parentElement.attributes.routeId.value],
+                [e.target.name]: e.target.value
+            },
+        }
+
+        if (e.target.name === 'freeSpace')
+            dependantRoutes.forEach(x => {
+                updatedData = {
+                    ...updatedData,
+                    [x]: {
+                        ...formData[x],
+                        [e.target.name]: e.target.value
+                    },
+                }
+            })
+        setData(updatedData);
+        console.log(updatedData)
+    };
+
+    const setFormData = (newData) => {
+        setData({...newData});
+    }
+    return {
+        formData,
+        onFormChange,
+        setFormData
+    };
+};
+
+export default useFormNested;
Index: frontend/src/Pages/HomePage.js
===================================================================
--- frontend/src/Pages/HomePage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Pages/HomePage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,51 @@
+import React from "react";
+import Navigation from '../Components/Layout/Navbar/Navigation';
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap/dist/js/bootstrap.js';
+import HomeCarousel from '../Components/Layout/CarouselHome/Carousel';
+import { Card, Container } from 'react-bootstrap';
+import TabComponent from '../Components/Tab/Tab';
+import Offers from '../Components/Layout/Offers/Offers';
+import MostVisitedBar from '../Components/MostVisited/MostVisitedBar';
+import MostPopularRoutesCont from '../Components/MostPopularRoutes/MostPopularRoutesCont';
+import BecomeAHost from "../Components/BecomeAHost/BecomeAHost"
+
+const HomePage = () => {
+
+    document.body.style.backgroundColor="white"
+
+  return (
+    <>
+      <Navigation mt="0"/>
+      <Container fluid="lg" className="rounded-pill">
+        <HomeCarousel className="rounded-pill" />
+        <Container
+          style={{
+            maxWidth: "80%",
+            marginTop: "-5%",
+            zIndex: "10000000",
+            position: "relative",
+          }}
+          className="rounded-5"
+          fluid
+        >
+          <TabComponent className="rounded-5 shadow"></TabComponent>
+        </Container>
+      </Container>
+      <Container className="mt-5 mb-5">
+        <Offers></Offers>
+      </Container>
+      <Container className="my-5">
+        <MostVisitedBar></MostVisitedBar>
+      </Container>
+      <Container>
+        <MostPopularRoutesCont></MostPopularRoutesCont>
+      </Container>
+      <Container className="my-5">
+        {/*<BecomeAHost></BecomeAHost>*/}
+      </Container>
+    </>
+  );
+};
+
+export default HomePage;
Index: frontend/src/Pages/HotelDetailsPage.js
===================================================================
--- frontend/src/Pages/HotelDetailsPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Pages/HotelDetailsPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,177 @@
+import React from "react";
+import LoginForm from "../Components/Login/LoginForm";
+import {Container, Row, Col, Form, FloatingLabel, Modal, Button} from "react-bootstrap";
+import Navigation from "../Components/Layout/Navbar/Navigation";
+import Carousel from "react-bootstrap/Carousel";
+import { useState } from "react";
+import DescriptionContainer from "../Components/HotelDetails/DescriptionContainer";
+import ReviewsCarousel from "../Components/HotelDetails/ReviewsCarousel";
+import RoomsTable from "../Components/HotelDetails/RoomsTable";
+import ContactBar from "../Components/HotelDetails/ContactBar";
+import { useLocation } from "react-router-dom";
+
+const HotelDetailsPage = (props) => {
+  document.body.style.backgroundColor = "white";
+
+  const [index, setIndex] = useState(0);
+
+  const location = useLocation();
+  const { data, from, to } = location.state;
+  console.log(location)
+  console.log("DETAILS ")
+  console.log(data)
+
+  const handleSelect = (selectedIndex) => {
+    setIndex(selectedIndex);
+  };
+
+  return (
+    <>
+      <Navigation />
+      <Container className="my-3">
+        <Row className="d-flex justify-content-between">
+          <Col style={{textAlign: "left"}}>
+            <h2 style={{color: "#159895"}}>{data.hotelName}</h2>
+          </Col>
+          <Col>
+            <Container>
+              <Row className="mb-4">
+                <Col style={{textAlign: "right"}}>
+                  <span
+                    style={{
+                      backgroundColor: "#159895",
+                      padding: "0.75em",
+                      fontWeight: "bold",
+                      fontSize: "1.25rem",
+                      borderRadius: "0.75em",
+                      color: "white",
+                    }}
+                  >
+                    {data.averageScore.toFixed(1)}
+                  </span>
+                </Col>
+              </Row>
+            </Container>
+          </Col>
+        </Row>
+        <Row>
+          <Col
+            className="p-3 rounded-4"
+            sm={3}
+            style={{ backgroundColor: "#002B5B" }}
+          >
+            <Row>
+              <h3 className="mb-5 mt-3" style={{color: "white"}}>Критериуми од пребарувањето</h3>
+              <Form.Floating className="mb-3">
+                <Form.Control
+                  size="md"
+                  type="text"
+                  placeholder="Каде ќе патувате?:"
+                  id="location"
+                  value={data.hotelLocation}
+                ></Form.Control>
+                <label style={{left: "10px"}} htmlFor="location">Локација:</label>
+              </Form.Floating>
+            </Row>
+            <Row>
+              <Form.Floating className="mb-3">
+                <Form.Control
+                  size="md"
+                  type="date"
+                  placeholder="Датум на пристигнување:"
+                  id="dateFrom"
+                  value={from}
+                ></Form.Control>
+                <label style={{left: "10px"}} htmlFor="dateFrom">Датум на пристигнување:</label>
+              </Form.Floating>
+            </Row>
+            <Row>
+              <Form.Floating className="mb-3">
+                <Form.Control
+                  size="md"
+                  type="date"
+                  placeholder="Датум на заминување:"
+                  id="dateTo"
+                  value={to}
+                ></Form.Control>
+                <label style={{left: "10px"}} htmlFor="dateTo">Датум на заминување:</label>
+              </Form.Floating>
+            </Row>
+            <Row>
+              <Form.Floating className="mb-3">
+                <Form.Control
+                  size="md"
+                  type="number"
+                  placeholder="Број на гости:"
+                  id="floatingPassengers"
+                ></Form.Control>
+                <label style={{left: "10px"}} htmlFor="floatingPassengers">Број на гости:</label>
+              </Form.Floating>
+            </Row>
+          </Col>
+          <Col>
+            <Container>
+              <Row>
+                <Carousel activeIndex={index} onSelect={handleSelect}>
+                  {data.images.map((image) => {
+                    let link = image.url;
+                    console.log("SLIKATAAA")
+                    console.log(image)
+                    if (image.url.includes('Desktop')) {
+                      link = 'http://localhost:8080/download?fileName=' + encodeURIComponent(image.url);
+                    }
+                    return (
+                        <Carousel.Item>
+                          <img
+                              className="d-block w-100 h-400 rounded-5"
+                              src={link}
+                              alt="First slide"
+                              style={{ height: "50vh" }}
+                          />
+                        </Carousel.Item>
+                    )
+                  })}
+                  <Carousel.Item>
+                    <img
+                      className="d-block w-100 h-400 rounded-5"
+                      src="https://www.kovz.gov.mk/articleImage.img/2022/08/05/JPG_010_-_Jovan_Kaneo_church_in_Ohrid__panorama-min.jpg"
+                      alt="First slide"
+                      style={{ height: "50vh" }}
+                    />
+                  </Carousel.Item>
+                  <Carousel.Item>
+                    <img
+                      className="d-block w-100 rounded-5"
+                      src="https://macedonia-timeless.com/wp-content/uploads/2018/08/dojran-ezero.jpg"
+                      alt="Second slide"
+                      style={{ height: "50vh" }}
+                    />
+                  </Carousel.Item>
+                  <Carousel.Item>
+                    <img
+                      className="d-block w-100 rounded-5"
+                      src="https://i.imgur.com/NFlxbqY.jpg"
+                      alt="Third slide"
+                      style={{ height: "50vh" }}
+                    />
+                  </Carousel.Item>
+                </Carousel>
+              </Row>
+              <Row>
+                <Container></Container>
+              </Row>
+            </Container>
+          </Col>
+        </Row>
+        <Row className="mb-5">
+          <Col className="col-md-8"><DescriptionContainer data={data.hotelDescripiton} type="hotel"></DescriptionContainer></Col>
+          <Col className="col-md-4"><ReviewsCarousel reviews={data.hotelReviews}></ReviewsCarousel></Col>
+        </Row>
+        <Row className="mb-3"><RoomsTable from={from} to={to} data={data.hotelRooms}></RoomsTable></Row>
+        <Row><ContactBar></ContactBar></Row>
+      </Container>
+    </>
+  );
+};
+
+export default HotelDetailsPage;
Index: frontend/src/Pages/HotelEditPage.js
===================================================================
--- frontend/src/Pages/HotelEditPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Pages/HotelEditPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,61 @@
+import React, {useState} from "react";
+import {Container, Col, Row, Image} from "react-bootstrap";
+import Navigation from "../Components/Layout/Navbar/Navigation";
+import ResourcesTab from "../Components/Resources/ResourcesTab";
+import HotelEditTab from "../Components/HotelEdit/HotelEditTab";
+import useGet from "../Components/Hooks/useGet";
+import {Navigate, useParams} from "react-router-dom";
+import {useAuth} from "../Components/Context/AuthContext";
+
+
+const HotelEditPage = () => {
+
+    const params = useParams();
+    const link = "/hotel/list/" + params.hotelId;
+    const [changed, setChanged] = useState(0)
+    const {data, setData, isLoading, getData} = useGet(link, changed);
+
+
+    console.log(data)
+    return (
+        <>
+            <Navigation/>
+            {!isLoading && <Container>
+                <Row className="mb-5">
+                    <h2 style={{color: "#159895", textAlign: "left"}}>Мои ресурси</h2>
+                </Row>
+                <Row className="mb-5">
+                    <Col>
+                        <Row className="d-flex mb-3">
+                            <Col
+                                className="d-flex justify-content-center"
+                                style={{maxWidth: "30%"}}
+                            >
+                                <Image
+                                    src="https://t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
+                                    style={{
+                                        height: "5em",
+                                        borderRadius: "50%",
+                                        maxWidth: "100%",
+                                    }}
+                                    className="m-auto"
+                                ></Image>
+                            </Col>
+                            <Col className="d-flex justify-content-center">
+                                <Container className="pt-2" style={{textAlign: "left"}}>
+                                    <h4>{data.hotelName}</h4>
+                                    <h5>{data.hotelLocation}</h5>
+                                </Container>
+                            </Col>
+                        </Row>
+                    </Col>
+                </Row>
+                <Row>
+                    <HotelEditTab refresh={setChanged} displayRoom={data}/>
+                </Row>
+            </Container>}
+        </>
+    );
+};
+
+export default HotelEditPage;
Index: frontend/src/Pages/LoginErrorPage.js
===================================================================
--- frontend/src/Pages/LoginErrorPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Pages/LoginErrorPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,59 @@
+import React, { useEffect } from "react";
+import { useState } from "react";
+import Navigation from "../Components/Layout/Navbar/Navigation";
+import { Row, Col, Container, Button, Modal } from "react-bootstrap";
+import { IoBusinessSharp } from "react-icons/io5";
+import RegisterBusinessForm from "../Components/Forms/RegisterBusinessForm";
+import useGet from "../Components/Hooks/useGet";
+import { useNavigate } from "react-router-dom";
+
+const NoBusinessRegisteredError = (props) => {
+    const [show, setShow] = useState(false);
+    const [changed, setChanged] = useState(0);
+    const userId = localStorage.getItem("userId")
+    const [registered, setRegistered] = useState(false);
+    let checked = false;
+    const navigator = useNavigate()
+
+    const handleClose = () => setShow(false);
+    const handleShow = (e) => {
+        e.preventDefault();
+        setShow(true);
+    };
+
+
+    return (
+        <>
+            <Navigation></Navigation>
+                <Container>
+                    <Row className="mt-5 mb-3">
+                        <Col>
+                            <h3 style={{ color: "#159895" }}>
+                                Немате доволни привилегии или бараниот ресурс не е достапен!
+                            </h3>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col>
+                            <Button
+                                type="button"
+                                href={"/home"}
+                                style={{
+                                    backgroundColor: "#159895",
+                                    border: "2px solid white",
+                                }}
+                                size="lg"
+                            >
+                <span className="ikona my-1" color="white">
+                  <IoBusinessSharp style={{ color: "white" }} />
+                </span>
+                                <span className="ikona mx-3">Кон почетната страница</span>
+                            </Button>
+                        </Col>
+                    </Row>
+                </Container>
+        </>
+    );
+};
+
+export default NoBusinessRegisteredError;
Index: frontend/src/Pages/LoginPage.js
===================================================================
--- frontend/src/Pages/LoginPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Pages/LoginPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,36 @@
+import React from "react";
+import LoginForm from "../Components/Login/LoginForm";
+import { Container } from "react-bootstrap";
+import Navigation from "../Components/Layout/Navbar/Navigation";
+import {useAuth} from "../Components/Context/AuthContext";
+import {Navigate} from "react-router-dom";
+
+
+const LoginPage = () => {
+  document.body.style.backgroundColor = "#159895";
+  document.body.style.marginTop = "auto";
+  document.body.style.marginBottom = "auto";
+
+  const Auth = useAuth();
+  const isLoggedIn = Auth.userIsAuthenticated();
+
+    if (isLoggedIn) {
+        return <Navigate to={'/home'}/>
+    }
+
+  return (
+    <>
+      {" "}
+      <Container fluid className="px-0">
+        <Navigation />
+      </Container>
+      <Container className="mt-5">
+        <Container style={{ width: "40%" }}>
+          <LoginForm></LoginForm>
+        </Container>
+      </Container>
+    </>
+  );
+};
+
+export default LoginPage;
Index: frontend/src/Pages/NoBusinessRegisteredError.js
===================================================================
--- frontend/src/Pages/NoBusinessRegisteredError.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Pages/NoBusinessRegisteredError.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,147 @@
+import React, { useEffect } from "react";
+import { useState } from "react";
+import Navigation from "../Components/Layout/Navbar/Navigation";
+import { Row, Col, Container, Button, Modal } from "react-bootstrap";
+import { IoBusinessSharp } from "react-icons/io5";
+import RegisterBusinessForm from "../Components/Forms/RegisterBusinessForm";
+import useGet from "../Components/Hooks/useGet";
+import {Navigate, useNavigate} from "react-router-dom";
+import {useAuth} from "../Components/Context/AuthContext";
+
+const NoBusinessRegisteredError = (props) => {
+  const [show, setShow] = useState(false);
+  const [changed, setChanged] = useState(0);
+  const Auth = useAuth();
+  const isLoggedIn = Auth.userIsAuthenticated();
+  const userId = localStorage.getItem("userId")
+  const [registered, setRegistered] = useState(false);
+  let checked = false;
+  const navigator = useNavigate()
+
+  const handleClose = () => setShow(false);
+  const handleShow = (e) => {
+    e.preventDefault();
+    setShow(true);
+  };
+  
+  const { data: firma, isLoading: firmaIsLoading, getData: getFirmi} = useGet("/business/" + userId + "/unapproved", changed)
+  
+
+  useEffect(() => {
+    
+    console.log(firma)
+    setRegistered(() => {
+      return firma !== null && firma.length > 0
+    })
+    
+  }, [firmaIsLoading])
+
+  // useEffect(() => {
+    
+  //   setRegistered(() => {
+  //     console.log(data)
+  //     return data !== null && data
+  //   })
+    
+  // }, [isLoading])
+
+
+  if(!isLoggedIn)
+  {
+    return <Navigate to={'/login'}/>
+  }
+
+  !firmaIsLoading && firma && firma.length > 0 && firma[0].approved && navigator("/resources/hotel")
+  
+
+  return (
+    <>
+      <Navigation></Navigation>
+      {!registered && (
+        <Container>
+          <Row className="mt-5 mb-3">
+            <Col>
+              <h3 style={{ color: "#159895" }}>
+                За да менаџирате со Вашите ресурси мора да имате регистрирано
+                фирма одобрена од администраторот!
+              </h3>
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <Button
+                type="button"
+                onClick={handleShow}
+                style={{
+                  backgroundColor: "#159895",
+                  border: "2px solid white",
+                }}
+                size="lg"
+              >
+                <span className="ikona my-1" color="white">
+                  <IoBusinessSharp style={{ color: "white" }} />
+                </span>
+                <span className="ikona mx-3">Регистрирај фирма</span>
+              </Button>
+            </Col>
+          </Row>
+        </Container>
+      )}
+      {registered && (
+        <>
+          <Container>
+            <Row className="mt-5">
+              <Col className="mb-5">
+                <h3 className="mb-5" style={{ color: "#159895" }}>
+                  {" "}
+                  За да менаџирате со Вашите ресурси мора да имате регистрирано
+                  фирма одобрена од администраторот!
+                </h3>
+                <h4 style={{ color: "#159895" }}>
+                  Тековни неодобрени регистрации
+                </h4>
+              </Col>
+            </Row>
+            <Row>
+              <Container className="w-75">
+                <table className="table table-hover">
+                  <thead>
+                    <tr>
+                      <th scope="col">Ред. бр.</th>
+                      <th scope="col">Име на фирма</th>
+                      <th scope="col">Адреса</th>
+                      <th scope="col">Даночен број</th>
+                      <th scope="col">Одговорно лице</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {!firmaIsLoading && firma.map((f, i) => { return <tr key={f.businessId}>
+                      <th scope="row">{i + 1}</th>
+                      <td>{f.name}</td>
+                      <td>{f.address}</td>
+                      <td>{f.edbs}</td>
+                      <td>{f.user.name + " " + f.user.surname}</td>
+                    </tr>})}
+                  </tbody>
+                </table>
+              </Container>
+            </Row>
+          </Container>
+        </>
+      )}
+
+      <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title style={{ color: "#159895" }}>
+            Регистрација на фирма
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+            <RegisterBusinessForm hide={handleClose} edit={setChanged}></RegisterBusinessForm>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
+
+export default NoBusinessRegisteredError;
Index: frontend/src/Pages/ProfilePage.js
===================================================================
--- frontend/src/Pages/ProfilePage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Pages/ProfilePage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,84 @@
+import React from "react";
+import { useState } from "react";
+import { Col, Container, Row, Image, Button, Modal } from "react-bootstrap";
+import Navigation from "../Components/Layout/Navbar/Navigation";
+import { MdBusinessCenter } from "react-icons/md";
+import DataForm from "../Components/ProfilePage/DataForm";
+import LoginForm from "../Components/Login/LoginForm";
+import ChangePasswordForm from "../Components/Forms/ChangePasswordForm";
+import useGet from "../Components/Hooks/useGet";
+import {useAuth} from "../Components/Context/AuthContext";
+import {Navigate} from "react-router-dom";
+
+const ProfilePage = () => {
+
+    const { data, setData, isLoading, getData } = useGet("/principal");
+
+
+
+    const profileData = {
+        "name": "Марко",
+        "surname": "Марковски",
+        "address": "ул. Раскрсница бр. 10",
+        "dateOfBirth": "2002-01-01",
+        "country": "Македонија",
+        "zip": "1000",
+        "city": "Скопје",
+        "email": "user@mail.com",
+        "mobile": "075/500-000"
+    }
+
+
+
+  return (
+    <>
+      <Navigation />
+    {!isLoading && <Container>
+        <Row className="mb-5">
+          <h2 style={{ color: "#159895", textAlign: "left" }}>Мојот профил</h2>
+        </Row>
+        <Row className="mb-5">
+          <Col>
+            <Row className="d-flex mb-3">
+              <Col className="d-flex justify-content-center" style={{maxWidth: "30%"}}>
+                <Image
+                  src="https://t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
+                  style={{
+                    height: "5em",
+                    borderRadius: "50%",
+                    maxWidth: "100%",
+                  }}
+                  className="m-auto"
+                ></Image>
+              </Col>
+              <Col className="d-flex justify-content-center">
+                <Container className="pt-2" style={{ textAlign: "left" }}>
+                  <h4>{data.name + " " + data.surname}</h4>
+                  <h5>{data.email}</h5>
+                </Container>
+              </Col>
+            </Row>
+          </Col>
+          <Col style={{textAlign: "right"}}>
+            <Button
+              type="button"
+              style={{ backgroundColor: "#159895", border: "2px solid white" }}
+              size="lg"
+              href="/resources"
+            >
+              <span className="ikona my-1" color="white">
+                <MdBusinessCenter style={{ color: "white" }} />
+              </span>
+              <span className="ikona mx-3">Мои ресурси</span>
+            </Button>
+          </Col>
+        </Row>
+        <Row className="mb-5">
+            {!isLoading && <DataForm data={data}></DataForm>}
+        </Row>
+      </Container>}
+    </>
+  );
+};
+
+export default ProfilePage;
Index: frontend/src/Pages/ProfilesManagementPage.js
===================================================================
--- frontend/src/Pages/ProfilesManagementPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Pages/ProfilesManagementPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,47 @@
+import React from "react";
+import {Container, Col, Row, Image, Tabs, Tab} from "react-bootstrap";
+import Navigation from "../Components/Layout/Navbar/Navigation";
+import ResourcesTab from "../Components/Resources/ResourcesTab";
+import {useState} from "react";
+import useGet from "../Components/Hooks/useGet";
+import {useAuth} from "../Components/Context/AuthContext";
+import {Navigate} from "react-router-dom";
+import {FaCheckCircle} from "react-icons/fa";
+import UnapprovedBusinessesTable from "../Components/AdminPanel/UnapprovedBusinessesTable";
+import UnapprovedProfilesTable from "../Components/AdminPanel/UnapprovedProfilesTable";
+import AllProfilesTable from "../Components/AdminPanel/AllProfilesTable";
+
+const ProfilesManagementPage = (props) => {
+
+    console.log(props.tab)
+
+
+    return (
+        <>
+            <Navigation/>
+            <Container>
+                <Row className="mb-5">
+                    <h2 style={{color: "#159895", textAlign: "left"}}>Менаџмент со профили</h2>
+                </Row>
+            </Container>
+            <Container>
+                <Tabs
+                    defaultActiveKey="home"
+                    id="uncontrolled-tab-example"
+                    className="mb-3"
+                >
+                    <Tab eventKey="home" title="Неодобрени регистрации за фирма">
+                        <UnapprovedBusinessesTable/>
+                    </Tab>
+                    <Tab eventKey="profile" title="Неверифицирани профили">
+                        <UnapprovedProfilesTable/>
+                    </Tab>
+                    <Tab eventKey="contact" title="Сите профили">
+                        <AllProfilesTable/>
+                    </Tab>
+                </Tabs>
+            </Container>
+        </>)
+}
+
+export default ProfilesManagementPage;
Index: frontend/src/Pages/RegistrationPage.js
===================================================================
--- frontend/src/Pages/RegistrationPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Pages/RegistrationPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,26 @@
+import React from "react";
+import LoginForm from "../Components/Login/LoginForm";
+import { Container } from "react-bootstrap";
+import Navigation from "../Components/Layout/Navbar/Navigation";
+import RegistrationForm from "../Components/Registration/RegistrationForm";
+
+const RegistrationPage = () => {
+  document.body.style.backgroundColor = "#159895";
+  document.body.style.marginTop = "auto";
+  document.body.style.marginBottom = "auto";
+  return (
+    <>
+      {" "}
+      <Container fluid className="px-0">
+        <Navigation />
+      </Container>
+      <Container className="mt-5">
+        <Container style={{ width: "70%" }}>
+          <RegistrationForm></RegistrationForm>
+        </Container>
+      </Container>
+    </>
+  );
+};
+
+export default RegistrationPage;
Index: frontend/src/Pages/ResourcesPage.js
===================================================================
--- frontend/src/Pages/ResourcesPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Pages/ResourcesPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,56 @@
+import React from "react";
+import {Container, Col, Row, Image} from "react-bootstrap";
+import Navigation from "../Components/Layout/Navbar/Navigation";
+import ResourcesTab from "../Components/Resources/ResourcesTab";
+import {useState} from "react";
+import useGet from "../Components/Hooks/useGet";
+import {useAuth} from "../Components/Context/AuthContext";
+import {Navigate} from "react-router-dom";
+
+const ResourcesPage = (props) => {
+
+    const Auth = useAuth();
+    const user = Auth.getUser();
+
+    return (
+        <>
+            <Navigation/>
+            {<Container>
+                <Row className="mb-5">
+                    <h2 style={{color: "#159895", textAlign: "left"}}>Мои ресурси</h2>
+                </Row>
+                <Row className="mb-5">
+                    <Col>
+                        <Row className="d-flex mb-3">
+                            <Col
+                                className="d-flex justify-content-center"
+                                style={{maxWidth: "30%"}}
+                            >
+                                <Image
+                                    src="https://t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
+                                    style={{
+                                        height: "5em",
+                                        borderRadius: "50%",
+                                        maxWidth: "100%",
+                                    }}
+                                    className="m-auto"
+                                ></Image>
+                            </Col>
+                            <Col className="d-flex justify-content-center">
+                                <Container className="pt-2" style={{textAlign: "left"}}>
+                                    <h4>{user.name + " " + user.surname}</h4>
+                                    <h5>{user.username}</h5>
+                                </Container>
+                            </Col>
+                        </Row>
+                    </Col>
+                </Row>
+                <Row>
+                    <ResourcesTab tab={props.tab}></ResourcesTab>
+                </Row>
+            </Container>}
+        </>
+    );
+};
+
+export default ResourcesPage;
Index: frontend/src/Pages/RestaurantDetailsPage.js
===================================================================
--- frontend/src/Pages/RestaurantDetailsPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Pages/RestaurantDetailsPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,179 @@
+import React from "react";
+import LoginForm from "../Components/Login/LoginForm";
+import {Container, Row, Col, Form} from "react-bootstrap";
+import Navigation from "../Components/Layout/Navbar/Navigation";
+import Carousel from "react-bootstrap/Carousel";
+import {useState} from "react";
+import DescriptionContainer from "../Components/HotelDetails/DescriptionContainer";
+import ReviewsCarousel from "../Components/HotelDetails/ReviewsCarousel";
+import RoomsTable from "../Components/HotelDetails/RoomsTable";
+import ContactBar from "../Components/HotelDetails/ContactBar";
+import Menu from "../Components/RestaurantDetails/Menu";
+import MenuCarousel from "../Components/RestaurantDetails/Carousel";
+import {useLocation} from "react-router-dom";
+import TablesTable from "../Components/RestaurantDetails/TablesTable";
+
+const RestaurantDetailsPage = (props) => {
+    document.body.style.backgroundColor = "white";
+
+    const [index, setIndex] = useState(0);
+    const location = useLocation();
+    const {data, params: formData} = location.state;
+
+    const handleSelect = (selectedIndex) => {
+        setIndex(selectedIndex);
+    };
+
+    return (
+        <>
+            <Navigation/>
+            <Container className="my-3">
+                <Row className="d-flex justify-content-between">
+                    <Col style={{textAlign: "left"}}>
+                        <h2 style={{color: "#159895"}}>{data.restaurantName}</h2>
+                    </Col>
+                    <Col>
+                        <Container>
+                            <Row className="mb-4">
+                                <Col style={{textAlign: "right"}}>
+                  <span
+                      style={{
+                          backgroundColor: "#159895",
+                          padding: "0.75em",
+                          fontWeight: "bold",
+                          fontSize: "1.25rem",
+                          borderRadius: "0.75em",
+                          color: "white",
+                      }}
+                  >
+                    {data.averageScore.toFixed(1)}
+                  </span>
+                                </Col>
+                            </Row>
+                        </Container>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col
+                        className="p-3 rounded-4"
+                        sm={3}
+                        style={{backgroundColor: "#002B5B"}}
+                    >
+                        <Row>
+                            <h3 className="mb-5 mt-3" style={{color: "white"}}>Критериуми од пребарувањето</h3>
+                            <Form.Floating className="mb-3">
+                                <Form.Control
+                                    size="md"
+                                    type="text"
+                                    placeholder="Каде ќе патувате?:"
+                                    id="location"
+                                    name={'restaurantLocation'}
+                                    value={formData.restaurantLocation}
+                                ></Form.Control>
+                                <label style={{left: "10px"}} htmlFor="location">Локација:</label>
+                            </Form.Floating>
+                        </Row>
+                        <Row>
+                            <Form.Floating className="mb-3">
+                                <Form.Control
+                                    size="md"
+                                    type="date"
+                                    placeholder="Датум на резервација:"
+                                    id="date"
+                                    name={'date'}
+                                    value={formData.date}
+                                ></Form.Control>
+                                <label style={{left: "10px"}} htmlFor="dateFrom">Датум на резерација:</label>
+                            </Form.Floating>
+                        </Row>
+                        <Row>
+                            <Col>
+                                <Form.Floating className="mb-3">
+                                    <Form.Control
+                                        size="lg"
+                                        type="text"
+                                        placeholder="Место:"
+                                        id="location"
+                                        name={'hourFrom'}
+                                        value={formData.hourFrom}
+                                    ></Form.Control>
+                                    <label style={{left: "10px"}} htmlFor="location">Време од:</label>
+                                </Form.Floating>
+                            </Col>
+                            <Col>
+                                <Form.Floating className="mb-3">
+                                    <Form.Control
+                                        size="lg"
+                                        type="text"
+                                        placeholder="Место:"
+                                        id="location"
+                                        name={'hourTo'}
+                                        value={formData.hourTo}
+                                    ></Form.Control>
+                                    <label style={{left: "10px"}} htmlFor="location">Време до:</label>
+                                </Form.Floating>
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Form.Floating className="mb-3">
+                                <Form.Control
+                                    size="md"
+                                    type="number"
+                                    placeholder="Број на гости:"
+                                    id="floatingPassengers"
+                                    name={'numPeople'}
+                                    value={formData.numPeople}
+                                ></Form.Control>
+                                <label style={{left: "10px"}} htmlFor="floatingPassengers">Број на гости:</label>
+                            </Form.Floating>
+                        </Row>
+                    </Col>
+                    <Col>
+                        <Container>
+                            <Row>
+                                <Carousel activeIndex={index} onSelect={handleSelect}>
+                                    <Carousel.Item>
+                                        <img
+                                            className="d-block w-100 h-400 rounded-5"
+                                            src="https://emagazin.mk/wp-content/uploads/2022/03/Karos_Photography-7795.jpg"
+                                            alt="First slide"
+                                            style={{height: "50vh"}}
+                                        />
+                                    </Carousel.Item>
+                                    <Carousel.Item>
+                                        <img
+                                            className="d-block w-100 rounded-5"
+                                            src="https://emagazin.mk/wp-content/uploads/2022/03/Karos_Photography-7871.jpg"
+                                            alt="Second slide"
+                                            style={{height: "50vh"}}
+                                        />
+                                    </Carousel.Item>
+                                    <Carousel.Item>
+                                        <img
+                                            className="d-block w-100 rounded-5"
+                                            src="https://lh5.googleusercontent.com/p/AF1QipMQAwahuuJCJ2rDUYNrhnwiX1070adTsM6LmzV5=w480-h300-k-n"
+                                            alt="Third slide"
+                                            style={{height: "50vh"}}
+                                        />
+                                    </Carousel.Item>
+                                </Carousel>
+                            </Row>
+                            <Row>
+                                <Container></Container>
+                            </Row>
+                        </Container>
+                    </Col>
+                </Row>
+                <Row className="mb-5">
+                    <Col className="col-md-8"><DescriptionContainer data={data.restaurantDescription} type="restaurant"></DescriptionContainer></Col>
+                    <Col className="col-md-4"><ReviewsCarousel reviews={data.reviews}></ReviewsCarousel></Col>
+                </Row>
+                <Row className="mb-3"><MenuCarousel menu={data.menus}></MenuCarousel></Row>
+                <Row><TablesTable params={formData} data={data.tables}></TablesTable></Row>
+                <Row><ContactBar></ContactBar></Row>
+            </Container>
+        </>
+    );
+};
+
+export default RestaurantDetailsPage;
Index: frontend/src/Pages/RestaurantEditPage.js
===================================================================
--- frontend/src/Pages/RestaurantEditPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Pages/RestaurantEditPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import { Container, Col, Row, Image } from "react-bootstrap";
+import Navigation from "../Components/Layout/Navbar/Navigation";
+import ResourcesTab from "../Components/Resources/ResourcesTab";
+import HotelEditTab from "../Components/HotelEdit/HotelEditTab";
+import RestaurantEditTab from "../Components/RestaurantEdit/RestaurantEditTab";
+import useGet from "../Components/Hooks/useGet";
+import {Navigate, useParams, useSearchParams} from "react-router-dom";
+import {useAuth} from "../Components/Context/AuthContext";
+
+const RestaurantEditPage = () => {
+
+  const params = useParams();
+  const link = "/restaurant/" + params.restaurantId;
+  //const [changed, setChanged] = useState(0)
+  const { data, setData, isLoading, getData, setChanged } = useGet(link, "");
+
+  return (
+    <>
+      <Navigation />
+      {!isLoading && <Container>
+        <Row className="mb-5">
+          <h2 style={{ color: "#159895", textAlign: "left" }}>Мои ресурси</h2>
+        </Row>
+        <Row className="mb-5">
+          <Col>
+            <Row className="d-flex mb-3">
+              <Col
+                className="d-flex justify-content-center"
+                style={{ maxWidth: "30%" }}
+              >
+                <Image
+                  src="https://t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
+                  style={{
+                    height: "5em",
+                    borderRadius: "50%",
+                    maxWidth: "100%",
+                  }}
+                  className="m-auto"
+                ></Image>
+              </Col>
+              <Col className="d-flex justify-content-center">
+                <Container className="pt-2" style={{ textAlign: "left" }}>
+                  <h4>{data.restaurantName}</h4>
+                  <h5>{data.restaurantLocation}</h5>
+                </Container>
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+        <Row>
+            <RestaurantEditTab refresh={setChanged} displayMenu={data} edit="true"/>
+        </Row>
+      </Container>}
+    </>
+  );
+};
+
+export default RestaurantEditPage;
Index: frontend/src/Pages/SearchPage.js
===================================================================
--- frontend/src/Pages/SearchPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Pages/SearchPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,79 @@
+import React from "react";
+import Navigation from '../Components/Layout/Navbar/Navigation';
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap/dist/js/bootstrap.js';
+import HomeCarousel from '../Components/Layout/CarouselHome/Carousel';
+import { Card, Container, Nav, Row, Col } from 'react-bootstrap';
+import TabComponent from '../Components/Tab/Tab';
+import Offers from '../Components/Layout/Offers/Offers';
+import MostVisitedBar from '../Components/MostVisited/MostVisitedBar';
+import MostPopularRoutesCont from '../Components/MostPopularRoutes/MostPopularRoutesCont';
+import BecomeAHost from "../Components/BecomeAHost/BecomeAHost"
+import HotelLisitng from "../Components/Listings/HotelListing"
+import SearchCriteriasHotel from "../Components/SearchCriterias/SearchCriteriasHotel";
+import SortButton from "../Components/Listings/SortButton";
+import FilterButton from "../Components/Listings/FilterButton";
+import TransportListing from "../Components/Listings/TransportListing";
+import useGet from "../Components/Hooks/useGet";
+import { useParams } from "react-router-dom";
+import SearchCriteriasBar from "../Components/SearchCriterias/SearchCriteriasBar";
+import RestaurantDetailsPage from "./RestaurantDetailsPage";
+import RestaurantListing from "../Components/Listings/RestaurantListing";
+
+
+const SearchPage = (props) => {
+
+    const params = useParams();
+    console.log(params)
+
+
+    document.body.style.backgroundColor = "white"
+    var hotelData = {
+        "hotelName": "Име на сместувањето",
+        "hotelLocation": "Скопје, Македонија",
+        "hotelCaption": "Краток опис",
+        "hotelDescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation",
+        "hotelPrice": 504.99,
+        "hotelRating": 9.1
+
+    }
+    
+    let link = props.type === "transport" ? `/transport/search?from=${params.from}&to=${params.to}&date=${params.date}&numPassengers=${params.numPassengers}` : props.type === "hotel" ? `/hotel/search?hotelLocation=${params.hotelLocation}&dateFrom=${params.dateFrom}&dateTo=${params.dateTo}&numBeds=${params.numBeds}` : `/restaurant/search?restaurantLocation=${params.restaurantLocation}&date=${params.date}&hourFrom=${params.hourFrom}&hourTo=${params.hourTo}&numPeople=${params.numPeople}`
+    console.log(link)
+    console.log(params.date)
+    const { data, isLoading, getData, setData } = useGet(link);
+    !isLoading && console.log(data)
+    return (
+        <>
+            <Navigation></Navigation>
+            <SearchCriteriasBar type={props.type} criterias={useParams()}></SearchCriteriasBar>
+            <Container className="d-flex justify-content-end gx-5" style={{maxWidth: "60%"}}>
+                <Row>
+                    <Col>
+                        <FilterButton></FilterButton>
+                    </Col>
+                    <Col>
+                        <SortButton></SortButton>
+                    </Col>
+                </Row>
+            </Container>
+            {props.type === "hotel" && !isLoading && data && <Container fluid>
+                {data.map(hotel => {
+                    return <HotelLisitng from={params.dateFrom} to={params.dateTo} data={hotel}/>
+                })}
+                </Container>}
+            {props.type === "transport" && !isLoading && data && <Container fluid>
+                {data.map(transport => {
+                    return <TransportListing params={params} data={transport}/>
+                })}
+            </Container>}
+            {props.type === "restaurant" && !isLoading && data && <Container fluid>
+                {data.map(restaurant => {
+                    return <RestaurantListing params={params} data={restaurant}/>
+                })}
+            </Container>}
+        </>
+    )
+}
+
+export default SearchPage;
Index: frontend/src/Pages/TransportDetailsPage.js
===================================================================
--- frontend/src/Pages/TransportDetailsPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Pages/TransportDetailsPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,207 @@
+import React from "react";
+import LoginForm from "../Components/Login/LoginForm";
+import {Container, Row, Col, Form, Image, Button, Modal} from "react-bootstrap";
+import Navigation from "../Components/Layout/Navbar/Navigation";
+import Carousel from "react-bootstrap/Carousel";
+import {useState} from "react";
+import DescriptionContainer from "../Components/HotelDetails/DescriptionContainer";
+import ReviewsCarousel from "../Components/HotelDetails/ReviewsCarousel";
+import RoomsTable from "../Components/HotelDetails/RoomsTable";
+import ContactBar from "../Components/HotelDetails/ContactBar";
+import RouteContainer from "../Components/TransportDetails/RouteContainer";
+import {useLocation, useParams} from "react-router-dom";
+import SearchCriteriasTransport from "../Components/SearchCriterias/SearchCriteriasTransport";
+import SearchCriteriasBar from "../Components/SearchCriterias/SearchCriteriasBar";
+import useCreate from "../Components/Hooks/useCreate";
+
+const TransportDetailsPage = (props) => {
+    document.body.style.backgroundColor = "white";
+    const {createEntity} = useCreate()
+
+    const [index, setIndex] = useState(0);
+    const [getData, setData] = useState(0);
+
+    const location = useLocation();
+    const {data, params} = location.state;
+    const [show, setShow] = useState(false);
+    const handleClose = () => setShow(false);
+    const handleShow = () => setShow(true);
+    const route = data.transportRoutes.filter(x => x.from === params.from && x.to === params.to)[0];
+    const dateFormatter = (str) => {
+        const inputDate = new Date(str);
+
+        const options = {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour12: false,
+            hour: '2-digit',
+            minute: '2-digit'
+        };
+
+        return inputDate.toLocaleString('de-DE', options);
+
+    }
+
+    const handleSelect = (selectedIndex) => {
+        setIndex(selectedIndex);
+    };
+
+    return (
+        <>
+            <Navigation/>
+            <Container className="my-3">
+                <Row>
+                    <span><h2 style={{color: "#159895", textAlign: 'left'}}>Вашето пребарување</h2></span>
+                </Row>
+                <SearchCriteriasBar type={'transport'} showButton={false} criterias={params}></SearchCriteriasBar>
+                <Row className="d-flex justify-content-between">
+                    <Col style={{textAlign: "left"}}>
+                        <span>
+                            <h3 style={{color: "#159895"}}><b>Резултантна рута</b></h3>
+                            <h2 style={{color: "#159895"}}>{data.from} - {data.to}</h2>
+                            <h5 style={{color: "#159895"}}>({data.routes.join(", ")})</h5>
+                        </span>
+                    </Col>
+                    <Col>
+                        <Container>
+                            <Row className="mb-4">
+                                <Col style={{textAlign: "right"}}>
+                  <span
+                      style={{
+                          backgroundColor: "#159895",
+                          padding: "0.75em",
+                          fontWeight: "bold",
+                          fontSize: "1.25rem",
+                          borderRadius: "0.75em",
+                          color: "white",
+                      }}
+                  >
+                    9.1
+                  </span>
+                                </Col>
+                            </Row>
+                        </Container>
+                    </Col>
+                </Row>
+                <Row>
+                    <RouteContainer data={data}></RouteContainer>
+                </Row>
+                <hr></hr>
+                <Row>
+                    <Col>
+                        <h3>Одбрана рута</h3>
+                    </Col>
+                    <Col>
+                        <h3>{params.from + ' - ' + params.to}</h3>
+                    </Col>
+                </Row>
+                <hr></hr>
+                <Row>
+                    <Col>
+                        <h3>Очекувано време на поаѓање</h3>
+                    </Col>
+                    <Col>
+                        <h3>{dateFormatter(route.departure)}</h3>
+                    </Col>
+                </Row>
+                <hr></hr>
+                <Row>
+                    <Col>
+                        <h3>Цена</h3>
+                    </Col>
+                    <Col>
+                        <h3>{data.price}$</h3>
+                    </Col>
+                </Row>
+                <hr></hr>
+                <Row>
+                    <Col className="d-flex flex-column justify-content-center">
+                        <h3>Возач</h3>
+                    </Col>
+                    <Col className="d-flex flex-column justify-content-center">
+                        <Container className="d-flex flex-row justify-content-center mb-3" style={{paddingLeft: "28%"}}>
+                            <Col className="d-flex flex-column justify-content-center" style={{maxWidth: "30%"}}>
+                                <Image
+                                    src="https://t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
+                                    style={{
+                                        height: "4em",
+                                        borderRadius: "50%",
+                                        maxWidth: "100%",
+                                    }}
+                                    className="m-auto"
+                                ></Image>
+                            </Col>
+                            <Col className="d-flex flex-column justify-content-center">
+                                <Container className="pt-2" style={{textAlign: "left"}}>
+                                    <h4>{data.transport.owner.name} {data.transport.owner.surname.substring(0, 1)}.</h4>
+                                </Container>
+                            </Col>
+                        </Container>
+                    </Col>
+                </Row>
+                <hr></hr>
+                <Row>
+                    <Col>
+                        <h3>Возило</h3>
+                    </Col>
+                    <Col>
+                        <h3>{data.transport.carBrand + " " + data.transport.carType}</h3>
+                    </Col>
+                </Row>
+                <hr></hr>
+                <Row>
+                    <Col className="d-flex flex-column justify-content-center">
+                        <h3>Број на патници</h3>
+                    </Col>
+                    <Col md="auto" className="d-flex flex-column justify-content-center">
+                        <Form.Select onChange={(e) => {
+                            setData(e.target.value)
+                        }} aria-label="Default select example">
+                            <option></option>
+                            {[...Array(route.freeSpace).keys()].map(x => {
+                                return (
+                                    <option value={x+1}  >{x + 1}</option>
+                                )
+                            })}
+                        </Form.Select>
+                    </Col>
+                    <Col>
+                        <Button className="m-2" size="lg" style={{backgroundColor: "#159895"}} onClick={handleShow}>Резервирај</Button>
+                    </Col>
+                </Row>
+                <Row><ContactBar></ContactBar></Row>
+            </Container>
+
+            <Modal show={show} size={'lg'} onHide={handleClose}>
+                <Modal.Header closeButton>
+                    <Modal.Title>Потврда на резервација</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    <h4>Резервација на рута</h4>
+                    <h3>{route.from + ' ' + route.to}</h3>
+                    <h4>Време на поаѓање:<b>{' ' + dateFormatter(route.departure)}</b></h4>
+                    <h4>Време на престигнување:<b>{' ' + dateFormatter(route.arrival)}</b></h4>
+                    <h4>Број на патници:<b>{' ' + getData}</b></h4>
+                </Modal.Body>
+                <Modal.Footer>
+                    <Button variant="secondary" onClick={handleClose}>
+                        Close
+                    </Button>
+                    <Button variant="primary" onClick={() => {
+                        createEntity('transport/reserve', {
+                            transportRouteId: route.routeId,
+                            userId: 1,
+                            numSeats: getData
+                        })
+                        handleClose();
+                    }}>
+                        Резервирај
+                    </Button>
+                </Modal.Footer>
+            </Modal>
+        </>
+    );
+};
+
+export default TransportDetailsPage;
Index: frontend/src/Pages/TransportEditPage.js
===================================================================
--- frontend/src/Pages/TransportEditPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Pages/TransportEditPage.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,65 @@
+import React, {useState} from "react";
+import {Container, Col, Row, Image} from "react-bootstrap";
+import Navigation from "../Components/Layout/Navbar/Navigation";
+import ResourcesTab from "../Components/Resources/ResourcesTab";
+import HotelEditTab from "../Components/HotelEdit/HotelEditTab";
+import RestaurantEditTab from "../Components/RestaurantEdit/RestaurantEditTab";
+import TransportEditTab from "../Components/TransportEdit/TransportEditTab";
+import useGet from "../Components/Hooks/useGet";
+import {Navigate, useParams} from "react-router-dom";
+import {useAuth} from "../Components/Context/AuthContext";
+
+const TransportEditPage = () => {
+
+    const params = useParams();
+
+    const link = "/transport/" + params.transportId;
+
+    const {data, setData, isLoading, getData, setChanged} = useGet(link);
+
+    !isLoading && console.log(data)
+
+    return (
+        <>
+            <Navigation/>
+            {!isLoading && (
+                <Container>
+                    <Row className="mb-5">
+                        <h2 style={{color: "#159895", textAlign: "left"}}>Мои ресурси</h2>
+                    </Row>
+                    <Row className="mb-5">
+                        <Col>
+                            <Row className="d-flex mb-3">
+                                <Col
+                                    className="d-flex justify-content-center"
+                                    style={{maxWidth: "30%"}}
+                                >
+                                    <Image
+                                        src="https://t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
+                                        style={{
+                                            height: "5em",
+                                            borderRadius: "50%",
+                                            maxWidth: "100%",
+                                        }}
+                                        className="m-auto"
+                                    ></Image>
+                                </Col>
+                                <Col className="d-flex justify-content-center">
+                                    <Container className="pt-2" style={{textAlign: "left"}}>
+                                        <h4>{data.transportName}</h4>
+                                        <h5>{data.carBrand + " " + data.carType}</h5>
+                                    </Container>
+                                </Col>
+                            </Row>
+                        </Col>
+                    </Row>
+                    <Row>
+                        {data && <TransportEditTab displayRoute={data} refresh={setChanged}/>}
+                    </Row>
+                </Container>
+            )}
+        </>
+    );
+};
+
+export default TransportEditPage;
Index: frontend/src/Pages/UserReservationsManagement.js
===================================================================
--- frontend/src/Pages/UserReservationsManagement.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Pages/UserReservationsManagement.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,34 @@
+import React from "react";
+import {Container, Col, Row, Image, Tabs, Tab} from "react-bootstrap";
+import Navigation from "../Components/Layout/Navbar/Navigation";
+import ResourcesTab from "../Components/Resources/ResourcesTab";
+import {useState} from "react";
+import useGet from "../Components/Hooks/useGet";
+import {useAuth} from "../Components/Context/AuthContext";
+import {Navigate} from "react-router-dom";
+import {FaCheckCircle} from "react-icons/fa";
+import UnapprovedBusinessesTable from "../Components/AdminPanel/UnapprovedBusinessesTable";
+import UnapprovedProfilesTable from "../Components/AdminPanel/UnapprovedProfilesTable";
+import AllProfilesTable from "../Components/AdminPanel/AllProfilesTable";
+import TypeSelectionTab from "../Components/UserPanel/TypeSelectionTab";
+
+const UserReservationsManagement = (props) => {
+
+    console.log(props.tab)
+
+
+    return (
+        <>
+            <Navigation/>
+            <Container>
+                <Row className="mb-5">
+                    <h2 style={{color: "#159895", textAlign: "left"}}>Менаџмент со резервации</h2>
+                </Row>
+            </Container>
+            <Container>
+                <TypeSelectionTab/>
+            </Container>
+        </>)
+}
+
+export default UserReservationsManagement;
Index: frontend/src/axios.js
===================================================================
--- frontend/src/axios.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/axios.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,16 @@
+import axios from "axios";
+
+
+const instance = axios.create({
+    baseURL: "http://localhost:8080/",
+    withCredentials: true,
+    maxRedirects: 1,
+    beforeRedirect: (options, { headers }) => {
+        console.log(options)
+        if (options.hostname === "example.com") {
+            options.auth = "user:password";
+        }}
+
+})
+
+export default instance
Index: frontend/src/index.css
===================================================================
--- frontend/src/index.css	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/index.css	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,32 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+.backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  z-index: -10;
+  background: rgba(0, 0, 0, 0.75);
+}
+
+.modal {
+  position: fixed;
+  top: 30vh;
+  left: 10%;
+  width: 80%;
+  z-index: 10000000;
+  overflow: hidden;
+}
Index: frontend/src/index.js
===================================================================
--- frontend/src/index.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/index.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
Index: frontend/src/logo.svg
===================================================================
--- frontend/src/logo.svg	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/logo.svg	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
Index: frontend/src/reportWebVitals.js
===================================================================
--- frontend/src/reportWebVitals.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/reportWebVitals.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
Index: frontend/src/setupTests.js
===================================================================
--- frontend/src/setupTests.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/setupTests.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
