diff --git a/src/homePage/Homepage.css b/src/homePage/Homepage.css
new file mode 100644
index 0000000..018d5c6
--- /dev/null
+++ b/src/homePage/Homepage.css
@@ -0,0 +1,126 @@
+.colored-section {
+    background-color: #e7dec8;
+    color: #000000;
+    white-space: nowrap;
+}
+
+
+.white-section {
+    background-color: #ffffff;
+    padding-top: 10rem;
+    padding-bottom: 5rem;
+    padding-left: 18%;
+}
+
+#title .container-fluid {
+    padding: 5% 34% 6%;
+    text-align: left;
+    font-family: "Georgia";
+}
+
+#features .container-fluid {
+    padding: 2% 14% 4%;
+    text-align: left;
+    font-family: "Georgia";
+}
+
+
+.housesIntro{
+    width: 1200px;
+    height: 800px;
+}
+
+.contactIntro{
+    padding-left: 30%;
+    padding-right: 30%;
+    padding-bottom: 80px;
+}
+
+.headerImg{
+    width: 1200px;
+    height: 800px;
+}
+
+.button-1 {
+    background-color: rgb(0, 0, 0);
+    border-color: transparent;
+    color: #ffffff;
+    font-size: 20px;
+}
+
+.button-1:hover {
+    background-color: rgb(92, 92, 92);
+    color: #ffffff;
+    border-color: transparent;
+}
+
+.buttonhelper {
+    padding-left: 45%;
+    padding-top: 15px;
+}
+
+.buttonka{
+    padding-top: 2px;
+}
+
+.prev-icon,
+.next-icon {
+  height: 210px;
+  width: 100px;
+  outline: black;
+  background-size: 100%, 100%;
+  border-radius: 50%;
+  background-image: none;
+  text-shadow: 2px 2px 5px black;
+}
+
+.next-icon:after
+{
+  content: '>';
+  font-size: 140px;
+  color: rgb(255, 255, 255);
+  text-shadow: 2px 2px 5px black;
+}
+
+.prev-icon:after {
+  content: '<';
+  font-size: 140px;
+  color: rgb(255, 255, 255);
+  text-shadow: 2px 2px 5px black;
+}
+
+ol.carousel-indicators {
+    position: absolute;
+    bottom: 5px;
+    margin: 0;
+    left: 0;
+    right: 0;
+    width: auto;
+ }
+ 
+ ol.carousel-indicators li,
+ ol.carousel-indicators li.active {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    border-radius: 50%;
+    border: 0;
+    background: transparent;
+    box-shadow: 0 0 1px 1px black;
+ }
+ 
+ ol.carousel-indicators li {
+    background: rgb(255, 255, 255);
+    margin-left: .5rem;
+    margin-right: .5rem;
+    box-shadow: 0 0 1px 1px black;
+ }
+ 
+ ol.carousel-indicators li.active {
+    background: #17a2b8;
+    box-shadow: 0 0 1px 1px black;
+ }
+
+.homePage{
+    padding-bottom: 15%;
+}
\ No newline at end of file
diff --git a/src/homePage/Homepage.js b/src/homePage/Homepage.js
new file mode 100644
index 0000000..dc2ce32
--- /dev/null
+++ b/src/homePage/Homepage.js
@@ -0,0 +1,103 @@
+import { Component } from "react";
+import "./Homepage.css";
+import house1 from "../images/house1.jpg";
+import house2 from "../images/house2.jpg";
+import house3 from "../images/house3.jpg";
+import house4 from "../images/house4.jpg";
+import Carousel from "react-bootstrap/Carousel";
+import Button from "react-bootstrap/Button";
+import { withTranslation } from "react-i18next";
+
+
+
+class Homepage extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      nextIcon: <span className="next-icon"></span>,
+      prevIcon: <span className="prev-icon"></span>,
+    };
+  }
+
+  render() {
+    const { t } = this.props;
+    const { nextIcon, prevIcon } = this.state;
+    return (
+      <div className="homePage">
+        <section className="colored-section" id="title">
+          <div className="container-fluid">
+            <div className="row">
+              <div className="col-12">
+                <h1 className="big-heading">{t("Slogan_1")}</h1>
+                <h1 className="big-heading">{t("Slogan_2")}</h1>
+              </div>
+            </div>
+          </div>
+        </section>
+        <section className="white-section">
+          <div className="housesIntro">
+            <Carousel nextIcon={nextIcon} prevIcon={prevIcon}>
+              <Carousel.Item>
+                <img className="headerImg" src={house1} alt="First House" />
+                <Carousel.Caption>
+                  <h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>100 Charlie Rogers, Kanata, ON K2V 1A7</h3>
+                  <h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
+                  <div className="buttonka">
+                    <Button href="/listings" variant="info">{t("Info")}</Button>
+                  </div>
+                </Carousel.Caption>
+              </Carousel.Item>
+              <Carousel.Item>
+                <img className="headerImg" src={house2} alt="Second House" />
+                <Carousel.Caption>
+                  <h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1490 Youville Drive, Orléans, ON K1C 2X8</h3>
+                  <h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
+                  <div className="buttonka">
+                    <Button href="/listings" variant="info">{t("Info")}</Button>
+                  </div>
+                </Carousel.Caption>
+              </Carousel.Item>
+              <Carousel.Item>
+                <img className="headerImg" src={house3} alt="Third House" />
+                <Carousel.Caption>
+                  <h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>8720 Russell Road, Navan, ON K4B 1J1</h3>
+                  <h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
+                  <div className="buttonka">
+                    <Button href="/listings" variant="info">{t("Info")}</Button>
+                  </div>
+                </Carousel.Caption>
+              </Carousel.Item>
+              <Carousel.Item>
+                <img className="headerImg" src={house4} alt="Fourth House" />
+                <Carousel.Caption>
+                  <h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>2785 8th Line Road, Metcalfe, ON K0A 2P0</h3>
+                  <h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
+                  <div className="buttonka">
+                    <Button href="/listings" variant="info">{t("Info")}</Button>
+                  </div>
+                </Carousel.Caption>
+              </Carousel.Item>
+            </Carousel>
+            <section className="colored-section" id="features">
+              <div className="container-fluid">
+                <div className="row">
+                  <div className="col-12">
+                    <h2 style={{ paddingLeft: "22rem", paddingBottom: "1rem", fontFamily: "Trebuchet MS" }}>{t("Desc")}</h2>
+                    <p style={{ fontSize: "110%" }}>{t("Home1")}<br></br>
+                    {t("Home2")}<br></br>
+                    {t("Home3")}<br></br>
+                    {t("Home4")}<br></br>
+                    {t("Home5")}<br></br>
+                    {t("Home6")}</p>
+                  </div>
+                </div>
+              </div>
+            </section>
+          </div>
+        </section>
+      </div>
+    );
+  }
+}
+
+export default withTranslation()(Homepage);