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;
