Index: frontend/src/Components/Listings/FilterButton.js
===================================================================
--- frontend/src/Components/Listings/FilterButton.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
+++ frontend/src/Components/Listings/FilterButton.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
@@ -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 5528b99794e1d3a36baa8eb2f1829125b75f0174)
+++ frontend/src/Components/Listings/HotelListing.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
@@ -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 5528b99794e1d3a36baa8eb2f1829125b75f0174)
+++ frontend/src/Components/Listings/RestaurantListing.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
@@ -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 5528b99794e1d3a36baa8eb2f1829125b75f0174)
+++ frontend/src/Components/Listings/SortButton.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
@@ -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 5528b99794e1d3a36baa8eb2f1829125b75f0174)
+++ frontend/src/Components/Listings/TransportListing.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
@@ -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;
