Index: frontend/src/Components/HotelDetails/ContactBar.js
===================================================================
--- frontend/src/Components/HotelDetails/ContactBar.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
+++ frontend/src/Components/HotelDetails/ContactBar.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
@@ -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 5528b99794e1d3a36baa8eb2f1829125b75f0174)
+++ frontend/src/Components/HotelDetails/DescriptionContainer.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
@@ -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 5528b99794e1d3a36baa8eb2f1829125b75f0174)
+++ frontend/src/Components/HotelDetails/ReviewsCarousel.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
@@ -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 5528b99794e1d3a36baa8eb2f1829125b75f0174)
+++ frontend/src/Components/HotelDetails/Room.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
@@ -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 5528b99794e1d3a36baa8eb2f1829125b75f0174)
+++ frontend/src/Components/HotelDetails/RoomRow.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
@@ -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 5528b99794e1d3a36baa8eb2f1829125b75f0174)
+++ frontend/src/Components/HotelDetails/RoomsTable.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
@@ -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;
