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;
