diff --git a/.gitignore b/.gitignore
index 294dfe5..b42c171 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,6 @@ node_modules
 package-lock.json
 yarn.lock
 build/
+branch_structure.json
+temp_auto_push.bat
+temp_interactive_push.bat
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
new file mode 100644
index 0000000..19419d5
--- /dev/null
+++ b/src/styles/fonts.scss
@@ -0,0 +1,3 @@
+@import url('https://fonts.googleapis.com/css?family=Pacifico');
+@import url('https://fonts.googleapis.com/css?family=Kaushan+Script');
+
diff --git a/src/styles/landing.scss b/src/styles/landing.scss
new file mode 100644
index 0000000..4305064
--- /dev/null
+++ b/src/styles/landing.scss
@@ -0,0 +1,83 @@
+.nav {
+width: 100%;
+    float: right;
+    padding: 0;
+    list-style: none;
+    padding: 0px 35px 0px 0px;
+    margin: 0px 30px 0px 0px;
+    
+}
+#skin {
+    font-family: Source Sans Pro;
+    padding: 0px 0px 0px 70px;
+    margin: 0px 0px 0px 20px; 
+}
+.nav li {
+    float: right;
+    text-align:right; 
+    padding: 0px 0px 0px 5px;
+    margin: 0px 0px 0px 5px;
+}
+.nav li a {
+    display: block;
+    padding: 0px 0px 0px 5px;
+    margin: 0px 0px 0px 5px;
+    text-decoration: none;
+    text-align: right;
+    float: right;
+} 
+.style {
+    font-family: Kaushan Script;
+}
+.polygon {
+    position: absolute;
+    width: 390px;
+    height: 517px;
+    left: 860px;
+    top: 80px;
+    background: rgb(96, 118, 192);
+    border-radius: 20px;
+    transform: rotate(-90deg);
+}
+
+.out {
+    padding: 50px;
+    font-style: normal;
+    font-weight: normal;
+    font-family: Kaushan Script;
+    font-size: 60px;
+    line-height: 116px;
+    color: #1A348D; 
+}
+
+.text {
+    position: absolute;
+    width: 624px;
+    height: 100px;
+    left: 57px;
+    top: 508px;
+    font-family: Pacifico;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 38px;
+    line-height: 146.28%;
+    color: #1A348D;
+}
+.button {
+    position: absolute;
+    width: 242px;
+    height: 86px;
+    left: 823px;
+    top: 613px;
+    background: #1A348D;
+    border-radius: 30px;
+}
+
+.practice {
+    color: red;
+}
+.mynav {
+    position: sticky;
+    top: 0;
+    background-color: #1A348D;
+}
\ No newline at end of file
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index bffbfeb..4bd1425 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -1,5 +1,11 @@
 @import "variables.scss";
+@import "landing.scss";
+@import "fonts.scss";
 
 p {
   color: $primaryColor
-}
\ No newline at end of file
+}
+h1 {
+    color: $primaryColor
+}
+
diff --git a/src/views/Home/Home.jsx b/src/views/Home/Home.jsx
index c6994f3..266493d 100644
--- a/src/views/Home/Home.jsx
+++ b/src/views/Home/Home.jsx
@@ -1,9 +1,53 @@
 import React, { Component } from "react";
 
+
 class Home extends Component {
+
   render() {
-    return <div> <p>Home Page</p></div>;
+    return (
+      <div>
+        <navbar>
+          <nav className="mynav navbar navbar-expand-lg navbar-blue justify-content-between">
+            <a className="style navbar-brand" href="/">E<span className="practice">-P</span>ractice</a>
+            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+              <span className="navbar-toggler-icon"></span>
+            </button>
+            <div className=" nav collapse navbar-collapse" id="navbarSupportedContent">
+              <ul className="navbar-nav mr-auto" id="skin">
+                <li className="nav-item active">
+                  <a className="nav-link" href="/">Home <span className="sr-only">(current)</span></a>
+                </li>
+                <li className="nav-item">
+                  <a className="nav-link" href="/">About Us</a>
+                </li>
+
+                <li className="nav-item">
+                  <a className="nav-link" href="/">How It Works</a>
+                </li>
+              </ul>
+            </div>
+            <li className="nav-link" id="skin">
+              <a className="nav-link" href="/">Login</a>
+            </li>
+            <button type="button" class="btn btn-primary">Get Started</button>
+          </nav>
+        </navbar>
+
+        <canvas id="hexagon"></canvas>
+
+        <div className="polygon">
+        </div>
+        <h1 className="out">E<span className="practice">-P</span>ractice</h1>
+        <p className="text">Develop a passion of learning, if you do, you will never cease to go</p>
+        <button type="button" class=" button btn btn-info">Start Studying</button>
+      </div>
+
+
+    );
+
   }
 }
 
+
+
 export default Home;