diff --git a/src/App.js b/src/App.js
index 7c27a21..010fc5b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,28 +1,11 @@
 import { Component } from "react";
+import Homepage from './homePage/Homepage'
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <h1>Kene's Crib</h1>
-          <p>Real Website loading.......</p>
-        </header>
-        <section>
-          <h1>hello everyone</h1>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
-        </section>
+        <Homepage/>
       </div>
     );
   }
diff --git a/src/homePage/homepage.css b/src/homePage/homepage.css
index e69de29..5109d91 100644
--- a/src/homePage/homepage.css
+++ b/src/homePage/homepage.css
@@ -0,0 +1,32 @@
+
+.colored-section {
+    background-color: #a77a32;
+    color: #ffffff;
+}
+
+.colored-section2 {
+    background-color: #ffe609;
+    color: #000000;
+    white-space: nowrap;
+}
+
+.colored-section3 {
+    background-color: #cfd3ce;
+    color: #ffffff;
+}
+
+.white-section {
+    background-color: #ffffff;
+}
+
+#title .container-fluid {
+    padding: 4% 32% 6%;
+    text-align: left;
+    font-family: "Georgia";
+}
+
+#features .container-fluid {
+    padding: 3% 5% ;
+    text-align: left;
+
+}
\ No newline at end of file
diff --git a/src/homePage/homepage.js b/src/homePage/homepage.js
index e69de29..7ff48d6 100644
--- a/src/homePage/homepage.js
+++ b/src/homePage/homepage.js
@@ -0,0 +1,24 @@
+import { Component } from "react";
+import './Homepage.css'
+
+class Homepage extends Component {
+    render() {
+        return (
+            <div className="Homepage">
+                <section className="colored-section2" id="title">
+                    <div className="container-fluid">
+                        <div className="row">
+                            <div className="col-12">
+                                <h1 className="big-heading">YOU ARE NOT BUYING A HOUSE, </h1>
+                                <h1 className="big-heading">YOU ARE BUYING A LIFESTYLE. </h1>
+                                
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+    );
+  }
+}
+
+export default Homepage;