diff --git a/css/style.css b/css/style.css
index 5cb025cef..9e6f55ccb 100755
--- a/css/style.css
+++ b/css/style.css
@@ -16,4 +16,138 @@ body {
  * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
  */
 
+/* Navbar Styling */
+#navbar {
+    background: #fff;
+    color: #000;
+    overflow: auto;
+    justify-content: space-around;
+  }
 
+#navbar img{
+        width: 70px;
+        height: 70px;
+}
+
+#navbar a {
+  color: #000;
+}
+
+#navbar h1 {
+  float: left;
+  padding-top: 20px;
+}
+
+#navbar ul {
+  list-style: none;
+  float: right;
+}
+
+#navbar ul li {
+  float: left;
+}
+
+#navbar ul li a {
+  display: block;
+  padding: 20px;
+  text-align: center;
+  text-decoration: none;
+  justify-content: space-around;
+  padding-left: 25px;
+}
+
+/* Additional Current */
+#navbar ul li a:hover {
+  background: #fff;
+  color: #ff4500;
+}
+#navbar ul li a.current {
+  color: #000;
+}
+/* content */
+.hero .content {
+  background: url('/img/first-background.jpg') no-repeat center center/cover;
+  height: 100vh;
+}
+.hero .content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: #fff;
+  
+}
+.hero .karma {
+  font-size: 30px;
+}
+
+
+/* button styling */
+.btn {
+  background-color: #ff4500;
+  border: none;
+  color: #fff;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+}
+
+/* Cases */
+.cases img {
+  display: flex;
+  height: 70px;
+  width: 70px;
+}
+.section-header {
+  text-align: center;
+  padding: 20px;
+  font-size: 40px;
+  font-weight: lighter;
+}
+
+.flex-items {
+  display: flex;
+  align-items: center;
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+/* Footer */
+
+.footer {
+  
+  padding: 20px;
+  margin: 40px;
+}
+
+.social img {
+  width: 20px;
+  height: 20px;
+}
+
+.social {
+  display: flex;
+  justify-content: center;
+  padding: 0 100px;
+  align-items: center;
+}
+.footer .social > * {
+  margin-right: 30px;
+}
+.footer p {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #333;
+  opacity: 0.01px;
+  font-weight: lighter;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 3e742ef04..e28d0fbb0 100755
--- a/index.html
+++ b/index.html
@@ -14,6 +14,62 @@
     <!-- Add your HTML markup here -->
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
     <!-- All the images you need are in the 'img' folder -->
+    <header class="hero">
+        <div class="navbar" id="navbar">
+               
+            <nav class="nav">
+                <img src="./img/karma-logo.svg" alt="">
+                <ul>
+                    <li><a href="index.html" class="current">Karma</a></li>
+                    <li><a href="#">How it works</a></li>
+                    <li><a href="#">Store</a></li>
+                    <li><a href="#">Blog</a></li>
+                    <li><a href="#">Help</a></li>
+                    <li><a href="#">Login</a></li>
+                </ul>
+            </nav>
+        </div>
 
+        <div class="content">
+            <p class="karma">Introducing Karma</p>
+            <p>Bring WiFi with you, everywhere you go.</p>
+            <button class="btn">Learn More</button>
+        </div>        
+
+    </header>
+    <!-- cases -->
+    <section class="cases">
+        <header class="section-header">
+            <p>Everyone needs a little karma.</p>
+        </header>
+        <div class="flex-items">
+            <div class="img1 img">
+                <img src="/img/icon-devices.svg" alt="">
+                <p>Internet for all devices</p>
+            </div>
+            
+            <div class="img1 img">
+                <img src="/img/icon-coffee.svg" alt="">
+                <p>Internet for all devices</p>
+            </div>
+    
+            <div class="img1 img">
+                <img src="/img/icon-refill.svg" alt="">
+                <p>Internet for all devices</p>
+            </div>
+        </div>
+       
+    </section>
+
+    <footer class="footer">
+        <p>Join Us on </p>
+        <div class="social">
+            <!-- <p>Join Us on </p> -->
+            <img src="/img/twitter-icon.svg" alt="">
+            <img src="/img/facebook-icon.svg" alt="">
+            <img src="/img/instagram-icon.svg" alt="">
+        </div>
+        <p> &copy; Karma Mobility, Inc.</p>
+    </footer>
 </body>
 </html>