diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..6f3a2913e
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
old mode 100755
new mode 100644
index 5cb025cef..d280357b6
--- a/css/style.css
+++ b/css/style.css
@@ -1,5 +1,4 @@
-
- /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
+/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
 
 body {
     font-family: 'Roboto', sans-serif;
@@ -8,6 +7,7 @@ body {
 
 /**
  * Add your custom styles below
+
  * 
  * Remember: 
  * - Be organised, use comments and separate your styles into meaningful chunks
@@ -17,3 +17,202 @@ body {
  */
 
 
+body {
+    font-family: "Roboto", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    width: 100%;
+}
+
+/* Header styles */
+
+header {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    height: 50px;
+    width: 100vw;
+}
+
+
+
+#logo {
+    display: flex;
+    max-width: 1.5rem;
+
+}
+
+/* Nav and Links */
+
+nav {
+    display: flex;
+    margin-left: 20px;
+    gap: 25px;
+}
+
+nav :first-child {
+    font-weight: bold;
+}
+
+a:hover {
+    color: #c05326;
+}
+
+a {
+    text-decoration: none;
+    color: rgb(137, 134, 134);
+}
+
+/* First Section */
+
+.first_section {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    width: 100vw;
+    height: 90vh;
+    background-image: url(/img/first-background.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+h1 {
+    font-weight: lighter;
+    font-size: 2.95rem;
+    margin: 0;
+    padding: 0;
+}
+
+.first_section p {
+    letter-spacing: 0.07rem;
+    font-size: 1.5rem;
+    font-weight: lighter;
+}
+
+button {
+    margin-top: 24px;
+    width: 150px;
+    height: 45px;
+    background-color: #c05326;
+    border-radius: 6%;
+}
+
+/* Second section */
+
+section.second_section{
+    align-items: center;
+    display: flex;
+        justify-content: center;
+}
+
+.icons{
+    display: flex;
+}
+
+.icon_banner 
+{
+    flex-direction: row;
+    padding: 5rem;
+    vertical-align: top;
+    display: inline-block;
+    text-align: center;
+    width: 200px;
+            
+    }
+
+.icon_banner a {
+    font-size: 19px;
+}
+
+.second_section h2 {
+    display: flex;
+    justify-content: center;
+    font-weight: lighter;
+    font-size: 1.7rem;
+    margin-top: 5%;
+}
+
+/* extended feature */
+
+.extended_feature {
+    display: flex;
+}
+
+.text-button-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #E0633A1A;
+}
+
+.text-button-container h2 {
+    font-style: italic;
+    font-weight: 400;
+    font-size: 42px;
+    display: flex;
+
+}
+
+.text-button-container button {
+    color: white;
+    border: none;
+}
+
+.text-button-container h2{
+    display: flex;
+    text-align: center;
+}
+
+.text-button-container h2 p{
+    color: #E0633A;
+}
+
+/* Footer */
+
+footer {
+    width: 100%;
+    border: 2px solid rgb(238, 234, 234);
+    border-right: 0;
+    border-left: 0;
+    border-bottom: 0;
+    margin-top: 7%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.footer_imgs_wrapper {
+    display: flex;
+    justify-content: space-between;
+    width: 10%;
+}
+
+.footer_imgs_wrapper div {
+    width: 30px;
+    height: 30px;
+    border: 2px solid rgb(238, 234, 234);
+    border-radius: 50%;
+}
+
+
+#footer_text1 {
+    font-size: 0.7rem;
+    font-weight: bold;
+    color: rgb(110, 107, 107);
+    letter-spacing: 0.06rem;
+}
+
+#footer_text2 {
+    color: rgb(201, 189, 189);
+    font-size: small;
+}
+
+
+/* store */
+
+
+.store_order {
+    display: flex;
+    flex-direction: row;
+}
diff --git a/img/homepage-feature.png b/img/homepage-feature.png
new file mode 100644
index 000000000..3500b2e4c
Binary files /dev/null and b/img/homepage-feature.png differ
diff --git a/img/store-image_by-andrew-neel-unsplash.jpg b/img/store-image_by-andrew-neel-unsplash.jpg
new file mode 100644
index 000000000..a8ad89099
Binary files /dev/null and b/img/store-image_by-andrew-neel-unsplash.jpg differ
diff --git a/index.html b/index.html
old mode 100755
new mode 100644
index 3e742ef04..7e291c601
--- a/index.html
+++ b/index.html
@@ -8,12 +8,145 @@
     <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/style.css">
     <link rel="shortcut icon" type="image/x-icon"  href="favicon.ico">
+    <script src="https://kit.fontawesome.com/a6d80728cd.js" crossorigin="anonymous"></script>
 </head>
 <body>
+      
+
+
+    <header>
+                <img class="header_logo" id="logo"
+        src="img/karma-logo.svg"
+        alt="Karma logo"
+          />
+      <nav>
+        <a href="">Meet Karma</a>
+        <a href="">How it Works</a>
+        <a href="">Store</a>
+        <a href="">Blog</a>
+        <a href="">Help</a>
+        <a href="">Login</a>
+      </nav>
+    </header>
+
+    <main>
+
+        <section>
+      <section class="first_section">
+        <h1>Introducing Karma</h1>
+        <p>Bring WiFi with you, everywhere you go</p>
+        <button>Learn More</button>
+      </section>
+
+      <section class="second_section">
+
+        <div1>
+        <h2>Everyone needs a little Karma</h2>
+        </div>
+        
+          <div class="icon_banner">  
+            <a href="#">
+            <img
+            src="img/icon-devices.svg"
+            alt="icon-devices"
+            width="150"
+            height="150"
+            class="icons"
+            />
+            <a>Internet for all devices</a>
+          </div>
+
+          <div class="icon_banner">  
+            <a href="#">
+            <img
+            src="img/icon-coffee.svg"
+            alt="icon-devices"
+             width="150"
+            height="150"
+            class="icons"
+            /> <a>Boost your productivity
+            </a>
+          </div>
+
+          <div class="icon_banner"> 
+            <a href="#">
+            <img
+            src="img/icon-refill.svg"
+            alt="icon-devices"
+             width="150"
+            height="150"
+            class="icons"
+            /> <a>Pay as you go
+            </a>
+          </div>
+
+      </section>
+      <div class="extended_feature">
+        <div class="homepage_feature">
+          <img src="/img/homepage-feature.png" alt="homepage-feature" />
+        </div>
+        <div class="text-button-container">
+          <h2>
+            <span style="color:#E0633A;">"</span>Wherever I am, I just dont worry about my connection anymore!<span style="color:#E0633A;">"</span></h2>
+          <button>Get Karma today</button>
+        </div>
+      </div>
+
+           
+            
+        </main>
+
+
+        <footer class="footer">
+            <p> 
+                Join us on
+            </p>
+
+             <section>
+                <a href="#">
+            <img
+            src="img/twitter-icon.svg"
+            alt="twitter"
+            width="30"
+            height="30"
+            class="small_icons"
+            />
+            </a>
+
+            <a href="#">
+            <img
+            src="img/facebook-icon.svg"
+            alt="facebook"
+            width="30"
+            height="30"
+            class="small_icons"
+            />
+            </a>
+
+            <a href="#">
+            <img
+            src="img/instagram-icon.svg"
+            alt="instagram"
+            width="30"
+            height="30"
+            class="small_icons"
+            />
+            </a>
+
+            </section>
+
+             <p> 
+                © Karma Mobility, Inc.
+            </p>
+
+        </footer>
+
+    </section>
 
-    <!-- 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 -->
 
+      <p id = "footer_text2"> <i class="fa-regular fa-copyright"></i>Karma Mobility, Inc</p>
+    </footer>
 </body>
 </html>
diff --git a/store.html b/store.html
new file mode 100644
index 000000000..90f2843de
--- /dev/null
+++ b/store.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Karma Store</title>
+    <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="shortcut icon" type="image/x-icon"  href="favicon.ico">
+    <script src="https://kit.fontawesome.com/a6d80728cd.js" crossorigin="anonymous"></script>
+</head>
+
+<body>
+
+      <header class="store_header">
+                <img class="header_logo" id="logo"
+        src="img/karma-logo.svg"
+        alt="Karma logo"
+          />
+      <nav>
+        <a href="">Meet Karma</a>
+        <a href="">How it Works</a>
+        <a href="">Store</a>
+        <a href="">Blog</a>
+        <a href="">Help</a>
+        <a href="">Login</a>
+      </nav>
+    </header>
+
+  
+<main>
+<section class="store_order">
+
+
+  </head>
+  <body>
+    <div class="testbox">
+      <form action="/">
+    
+        <div>
+  <h1 class="storehdr">Order your Karma Wifi device today!</h1>
+</div>
+                <section class="order-page">
+        <div class="form">
+          <h1>Order your Karma wifi<br />device today!</h1>
+
+
+              
+              
+                 <div style="float:left;" class="item">
+            <label for="fname"> First Name<span>*</span></label>
+            <input id="fname" type="text" name="fname" required/>
+          </div>
+          <div class="item">
+            <label for="lname"> Last Name<span>*</span></label>
+            <input id="lname" type="text" name="lname" required/>
+          </div>
+        
+
+<div style="clear:both">
+          <div class="item">
+            <label for="address">Address<span>*</span></label>
+            <input id="address" type="text"   name="address" required/>
+          </div>
+          <div class="item">
+            <label for="address2">Address <span>2</span></label>
+            <input id="address2" type="text"   name="address2" required/>
+          </div>
+            <label for="cars">City*</label>
+  <select name="city" id="city">
+    <option value="select">select a city</option>
+    <option value="Birmingham">Birmingham</option>
+    <option value="London">London</option>
+    <option value="Manchester">Manchester</option>
+    <option value="Leeds">Leeds</option>
+  </select>
+  <br><br>
+  <input type="submit" value="Submit">
+          <div class="item">
+            <label for="pcode">Post Code<span>*</span></label>
+            <input id="pcode" type="text" name="pcode" required/>
+          </div>
+          
+        </div>
+        <div class="question">
+          <label>Select colour</label>
+          <div class="question-answer">
+            <div>
+              <input type="radio" value="none" id="radio_1" name="type"/>
+              <label for="radio_1" class="radio"><span>Karma orange</span></label>
+            </div>
+            <div>
+              <input  type="radio" value="none" id="radio_2" name="type"/>
+              <label for="radio_2" class="radio"><span>Space grey</span></label>
+            </div>
+
+            <input type="checkbox" id="t&c" name="t&c" value="t&c">
+  <label for="t&c">By placing your order you agree to Karma's Terms and Conditions. *
+Place my order</label><br>
+
+            <button>Place my order</button>
+          </div>
+        </div>
+
+
+
+    </div>
+
+    
+    <div class="storeimg">
+        <img src="/img/store-image_by-andrew-neel-unsplash.jpg" alt="" height="1235" width="700" />
+    </div>
+
+
+
+</section>
+
+</main>
+
+   <footer class="footer">
+            <p> 
+                Join us on
+            </p>
+
+             <section>
+                <a href="#">
+            <img
+            src="img/twitter-icon.svg"
+            alt="twitter"
+            width="30"
+            height="30"
+            class="small_icons"
+            />
+            </a>
+
+            <a href="#">
+            <img
+            src="img/facebook-icon.svg"
+            alt="facebook"
+            width="30"
+            height="30"
+            class="small_icons"
+            />
+            </a>
+
+            <a href="#">
+            <img
+            src="img/instagram-icon.svg"
+            alt="instagram"
+            width="30"
+            height="30"
+            class="small_icons"
+            />
+            </a>
+
+            </section>
+
+             <p> 
+                © Karma Mobility, Inc.
+            </p>
+
+        </footer>
+
+      
+</body>
+</html>