Index: frontend/src/Components/BecomeAHost/BecomeAHost.js
===================================================================
--- frontend/src/Components/BecomeAHost/BecomeAHost.js	(revision efaa05348a3e0dac884385ba4dd765baaeb47ec6)
+++ frontend/src/Components/BecomeAHost/BecomeAHost.js	(revision efaa05348a3e0dac884385ba4dd765baaeb47ec6)
@@ -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 efaa05348a3e0dac884385ba4dd765baaeb47ec6)
+++ frontend/src/Components/BecomeAHost/BecomeAHostOverlay.js	(revision efaa05348a3e0dac884385ba4dd765baaeb47ec6)
@@ -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 efaa05348a3e0dac884385ba4dd765baaeb47ec6)
+++ frontend/src/Components/BecomeAHost/Overlay.js	(revision efaa05348a3e0dac884385ba4dd765baaeb47ec6)
@@ -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 efaa05348a3e0dac884385ba4dd765baaeb47ec6)
+++ frontend/src/Components/BecomeAHost/Review.js	(revision efaa05348a3e0dac884385ba4dd765baaeb47ec6)
@@ -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;
