diff --git a/Karma - desktop - Store.png b/Karma - desktop - Store.png
new file mode 100644
index 000000000..9e9aad17a
Binary files /dev/null and b/Karma - desktop - Store.png differ
diff --git a/Karma design.jpg b/Karma design.jpg
new file mode 100644
index 000000000..cd4d9260c
Binary files /dev/null and b/Karma design.jpg differ
diff --git a/Karma design.zip b/Karma design.zip
new file mode 100644
index 000000000..c078da89c
Binary files /dev/null and b/Karma design.zip differ
diff --git a/css/sto b/css/sto
new file mode 100644
index 000000000..e69de29bb
diff --git a/css/store.css b/css/store.css
new file mode 100644
index 000000000..59c08216e
--- /dev/null
+++ b/css/store.css
@@ -0,0 +1,313 @@
+
+
+/*nav bar or headear*/
+.nav-list {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    list-style: none;
+    position: relative;
+  
+  }
+  
+  .nav-items {
+    display: flex;
+    padding: 0 1.5rem;
+  
+  }
+  
+  .nav-links {
+    color: var(--grey);
+    text-decoration: none;
+    display: inline-block;
+    text-align: center;
+    position: relative;
+  }
+  
+  .nav-links:hover {
+    color: var(--orange);
+  }
+  
+  .nav-items:first-child > a {
+    color: var(--grey-dark);
+  }
+  
+  .nav-items:first-child > a:hover{
+    color: var(--orange);
+  }
+  
+  
+  
+  /* main */
+  .main {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+  
+  /* form section*/
+  .form {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    padding: 2rem;
+    gap: 30px;
+  }
+  /* form */
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    
+  }
+  
+  
+  .form h1 {
+    color: var(--orange);
+   
+  }
+  
+  
+  label {
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--grey);
+  }
+  
+  .fieldset {
+    display: flex;
+   flex-direction: row;
+    align-items: stretch;
+    flex-wrap: wrap;
+    border: none;
+    gap: 30px;
+  }
+  
+  .name {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: 5px;
+  }
+  
+  
+  input{
+    height: 30px;
+    padding: 2px;
+  }
+  
+  input:focus {
+    outline-color: var(--black) ;
+  } 
+  
+  input[type="checkbox"] {
+    color: var(--orange);
+    background-color: var(--orange);
+  }
+  
+  .address{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 5px;
+  }
+  #postcode {
+    width: 100px;
+    text-transform: uppercase;
+  }
+  /* select & option */
+  select {
+    font-style: italic;
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--grey-dark);
+    width: 250px;
+    height: 30px;
+  }
+  
+  select:focus {
+    outline-color: var(--orange) ;
+  }
+  
+  /* radio-box */
+  .radio-box {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 10px;
+  }
+  
+  .radio-box legend {
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--grey-dark);
+  }
+  
+  .radio-box ul {
+    display: flex;
+    gap: 20px;
+    list-style: none;
+  }
+  
+  /* changed radio-box color */
+  .radio-box input[type="radio"] {
+  appearance: none;
+  width: 15px;
+  height: 15px;
+  border: 1px solid var(--grey-dark);
+  border-radius: 50%;
+  background-clip: content-box;
+  padding: 2px;
+  display: inline-block;
+  margin-right: .1rem;
+  vertical-align: -3px;
+  }
+  
+  .radio-box input[type="radio"]:checked {
+  background-color: var(--orange);
+  }
+  
+  /* check box */
+  .check-box {
+    gap: 2px;
+    margin-top: 20px;
+  }
+  
+  .check-box a {
+    color: var(--orange);
+  }
+  
+  /* change checkbox mark */
+  
+  .check-box input[type="checkbox"] {
+  appearance: none;
+  width: 15px;
+  height: 15px;
+  border: 1px solid var(--grey-dark);
+  border-radius: 20%;
+  background-clip: content-box;
+  padding: 1px;
+  background-color: var(--white);
+  display: inline-block;
+  margin-right: .1rem;
+  vertical-align: -3px;
+  }
+  
+  .check-box input[type="checkbox"]:checked {
+  background-image: url(/level-2/checkmark.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  background-color: transparent;
+  }
+  
+  /* button */
+  button {
+    background-color: var(--orange);
+    color: var(--white);
+    border: 1px solid var(--orange);
+    border-radius: 5px;
+    padding: 10px 25px;
+    transition: all .3s ease-in-out;
+  }
+  
+  button:hover {
+    color: var(--orange);
+    background-color: var(--white);
+    border: 1px solid var(--orange);
+  }
+  /* section two */
+  
+  .img-section {
+    background-image: url("/level-2/store-image_by-andrew-neel-unsplash.jpg");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    width: 50%;
+    margin: 0;
+  }
+  
+  /* tablet and mobile size */
+  @media screen and (max-width: 890px) {
+  
+    /* fix textbox names */
+    .fieldset {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    flex-wrap: wrap;
+    }
+  
+  /* fix positions */
+     .store-main {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  
+  select {
+    width: 320px;
+  }
+  
+  .form-section {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 2rem;
+    gap: 30px;
+  }
+  
+  .img-section {
+    background-image: url("/level-2/store-image_by-andrew-neel-unsplash.jpg");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 100vh;
+    width: 100%;
+    margin: 0;
+    padding: 2rem;
+  }
+  
+  .radio-box ul {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    list-style: none;
+  }
+  }
+  
+  /* mobile size */
+  @media screen and (max-width: 489px) {
+  
+  
+    .form-section h1 {
+        text-align: center;
+    }
+  
+  }
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
old mode 100755
new mode 100644
index 5cb025cef..67c753b0c
--- a/css/style.css
+++ b/css/style.css
@@ -1,9 +1,124 @@
 
- /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
+
 
 body {
     font-family: 'Roboto', sans-serif;
     -webkit-font-smoothing: antialiased;
+    font-weight: 500;
+
+}
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2rem 8rem;
+    width: auto;
+ }
+
+ .nav-list{
+    display: block;
+    min-width: 2rem;
+    min-height: 2rem;
+ }
+
+ /* navigation */
+
+ .nav-list {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    list-style: none;
+
+ }
+
+ .nav-items {
+    display: flex;
+    padding: 0 1.5rem;
+
+ }
+
+ .nav-links {
+    color: var(--grey);
+    text-decoration: none;
+ }
+ .nav-links:hover {
+    color: var(--orange);
+ }
+
+ .nav-items:first-child > a {
+    color: var(--grey-dark);
+ }
+
+ .nav-items:first-child > a:hover{
+    color: var(--orange);
+ }
+
+ /* main */
+
+ main {
+    display: flex;
+    flex-direction: column;
+
+ }
+
+ /* First section */
+
+.hero {
+    background-image: url(/img/first-background.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    padding: 12rem 0;
+    color: var(--white);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;
+    margin: 0;
+}
+
+.hero h2 {
+    font-weight: 200;
+    font-size: 35px;
+    text-align: center;
+}
+
+.hero h5 {
+    margin-top: -1rem;
+    margin-bottom: 2rem;
+    font-weight: 50;
+    font-size: 20px;
+}
+
+.hero button {
+    background-color: var(--orange);
+    border: none;
+    padding: .8rem 1rem;
+    border-radius: 5px;
+}
+.hero button:hover {
+    background-color: var(--grey-dark);
+}
+
+.hero button a {
+    text-decoration: none;
+    color: var(--white);
+}
+
+/* Second section */
+section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 4rem;
+    margin-bottom: 3rem;
+}
+
+section h2 {
+    font-weight: 200;
+    font-size: 35px;
 }
 
 /**
@@ -16,4 +131,245 @@ body {
  * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
  */
 
+}
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2rem 8rem;
+    width: auto;
+ }
+
+ .nav-list{
+    display: block;
+    min-width: 2rem;
+    min-height: 2rem;
+ }
+
+ /* navigation */
+
+ .nav-list {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    list-style: none;
+
+ }
+
+ .nav-items {
+    display: flex;
+    padding: 0 1.5rem;
+
+ }
+
+ .nav-links {
+    color: var(--grey);
+    text-decoration: none;
+ }
+ .nav-links:hover {
+    color: var(--orange);
+ }
+
+ .nav-items:first-child > a {
+    color: var(--grey-dark);
+ }
+
+ .nav-items:first-child > a:hover{
+    color: var(--orange);
+ }
+
+ /* main */
+
+ main {
+    display: flex;
+    flex-direction: column;
+
+ }
+
+ /* First section */
+
+.hero {
+    background-image: url(/img/first-background.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    padding: 12rem 0;
+    color: var(--white);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;
+    margin: 0;
+}
+
+.hero h2 {
+    font-weight: 200;
+    font-size: 35px;
+    text-align: center;
+}
+
+.hero h5 {
+    margin-top: -1rem;
+    margin-bottom: 2rem;
+    font-weight: 50;
+    font-size: 20px;
+}
+
+.hero button {
+    background-color: var(--orange);
+    border: none;
+    padding: .8rem 1rem;
+    border-radius: 5px;
+}
+.hero button:hover {
+    background-color: var(--grey-dark);
+}
+
+.hero button a {
+    text-decoration: none;
+    color: var(--white);
+}
+
+/* Second section */
+section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 4rem;
+    margin-bottom: 3rem;
+}
+
+section h2 {
+    font-weight: 200;
+    font-size: 35px;
+}
+
+article {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+
+
+}
+
+article h5 {
+    font-weight: 200;
+    font-size: 20px;
+
+}
+
+article img {
+    width: 120px;
+    height: 120px;
+}
+
+.text {
+    margin: 3rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+
+}
+
+
+/add new section/
+
+
+.new{
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: 1.5fr 2fr;
+
+
+}
+
+.new-img {
+    background-color: #363434;
+    height: 100%;
+    background-image: url(/homepage-desktop.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+
+}
+
+.new-text {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4rem;
+    padding: 5rem;
+    background-color:rgb(230, 200, 175);
+    color: var(--grey-dark);
+    font-weight: 400;
+    font-size: 34px;
+    text-align: center;
+
+}
+
+.new-text p {
+    font-style: italic;
+}
+
+.new-text p span {
+    color: var(--orange);
+}
+
+.new-text a {
+    background-color: var(--orange);
+    border: none;
+    padding: .8rem 1rem;
+    border-radius: 5px;
+    text-decoration: none;
+    color: var(--white);
+    font-size: 12px;
+}
+.new-text a:hover {
+    background-color: var(--grey-dark);
+}
+
+
+
+
+/* footer */
+footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-top: 1px solid var(--grey);
+    margin: 0 9rem;
+    padding: 2rem 0;
+    gap: 1rem;
+}
+
+footer ul {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    list-style: none;
+}
+footer ul li a {
+    display: block;
+    border: 1px solid var(--grey);
+    padding: 1rem;
+    border-radius: 50%;
+    margin: 10px;
+}
+
+footer ul li a img{
+    max-width: 1rem;
+    max-height: 1rem;
+} 
+
+footer h2 {
+    font-weight: 400;
+}
+
+footer h4 {
+    font-weight: 200;
+    color:rgb(58, 56, 56);
+}
 
diff --git a/level-2/homepage-feature.png b/homepage-feature.png
similarity index 100%
rename from level-2/homepage-feature.png
rename to homepage-feature.png
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
index 3e742ef04..1d70c1da2 100755
--- a/index.html
+++ b/index.html
@@ -3,17 +3,74 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>Karma</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">
+    <title>Karma</title>
 </head>
 <body>
 
-    <!-- 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>
+        <a class="nav-list" href="index.html"><img src="/img/karma-logo.svg" alt="karma logo"></a>
+        <nav>
+            <ul class="nav-list">
+                <li class="nav-items" ><a class="nav-links" href="#">Meet Karma</a></li>
+                <li class="nav-items" ><a class="nav-links" href="#">How it Works</a></li>
+                <li class="nav-items" ><a class="nav-links" href="#">Store</a></li>
+                <li class="nav-items" ><a class="nav-links" href="#">Blog</a></li>
+                <li class="nav-items" ><a class="nav-links" href="#">Help</a></li>
+                <li class="nav-items" ><a class="nav-links" href="#">Login</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main>
+        <section class="hero">
+            <h2>Introducing Karma</h2>
+            <h5>Bring WiFi with you, everywhere you go.</h5>
+            <button><a href="#">Learn More</a></button>
+        </section>
+        <section>
+            <h2>
+                Everyone needs a little Karma.
+            </h2>
+            <article>
+                <div class="text">
+                    <img src="/img/icon-devices.svg" alt="deviceicon">
+                    <h5>Internet for all devices</h5>
+                </div>
+                <div class="text">
+                    <img src="/img/icon-coffee.svg" alt="coffeeicon">
+                    <h5>Boost your productivity</h5>
+                </div>
+                <div class="text">
+                    <img src="/img/icon-refill.svg" alt="refillicon">
+                    <h5>Pay sd You Go</h5>
+                </div>    
+            </article>
+        </section>
+
 
+        <section class="new">
+            <div class="new-img"></div>
+            <div class="new-text">
+                <p><span>"</span>Wherever I am, I just don't <br>worry about my connection <br>anymore!<span>"</span></p>
+                <a href="/store.html">Get Karma today</a>
+            </div>
+        </section>
+
+    </main>
+    <footer>
+        <h2>Join us on</h2>
+        <ul>
+            <li><a href="#"><img src="/img/twitter-icon.svg" alt="twitter"></a></li>
+            <li><a href="#"><img src="/img/facebook-icon.svg" alt="facebook"></a></li>
+            <li><a href="#"><img src="/img/instagram-icon.svg" alt="instagram"></a></li>
+        </ul>
+        <h4>
+            &copy;	Karma Mobility, Inc.
+        </h4>
+    </footer>
 </body>
-</html>
+</html
+
diff --git a/store.html b/store.html
new file mode 100644
index 000000000..1942ce653
--- /dev/null
+++ b/store.html
@@ -0,0 +1,119 @@
+<!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="stylesheet" href="/css/store.css">
+    <link rel="shortcut icon" type="image/x-icon"  href="favicon.ico">
+</head>
+<body>
+    <header>
+        <a class="nav-list" href="index.html"><img src="/img/karma-logo.svg" alt="karma logo"></a>
+        <nav>
+            <ul class="nav-list">
+                <li class="nav-items" ><a class="nav-links" href="#">Meet Karma</a></li>
+                <li class="nav-items" ><a class="nav-links" href="#">How it Works</a></li>
+                <li class="nav-items" ><a class="nav-links" href="#">Store</a></li>
+                <li class="nav-items" ><a class="nav-links" href="#">Blog</a></li>
+                <li class="nav-items" ><a class="nav-links" href="#">Help</a></li>
+                <li class="nav-items" ><a class="nav-links" href="#">Login</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main class="main">
+        <section class="form">
+            <h1 >Order your Karma wifi<br> device today!</h1>
+
+            <form action="https://api.web3forms.com/submit" method="POST">
+                <input type="hidden" name="access_key" value="866ec481-9f09-4e47-9b0d-71d0d1bd1895
+                ">
+                <div class="fieldset">
+                    <div class="name">
+                     <label for="f-name">First name *</label>
+                     <input type="text" id="f-name" name="f-name"required />
+                    </div>
+                    <div class="name">
+                      <label for="l-name">Last name *</label>
+                      <input type="text" id="l-name"  name="l-name"required/>
+                    </div>
+                </div>
+
+                <div class="address">
+                    <div class="name">
+                      <label for="address-one">Address *</label>
+                      <input type="text"id="address-one" name="address"required/>
+                    </div>
+                </div>
+
+                <div class="address">
+                    <div class="name">
+                      <label for="address-two">Address 2</label>
+                      <input type="text"id="address-two"/>
+                    </div>
+                </div>
+
+                <div class="fieldset">
+                    <div class="name">
+                      <label for="city">City *</label>
+                      <select name="city" id="city" required>
+                        <option value="" disabled selected>Select your city...</option>
+                        <option value="Oxford">Oxford</option>
+                        <option value="london">London</option>
+                        <option value="surry">surry</option>
+                      </select>
+                    </div>
+
+                    <div class="name">
+                      <label for="postcode">Postcode *</label>
+                      <input type="text"id="postcode"required/>
+                    </div>
+                </div>
+
+                <div class="radio-box">
+                  <legend>Select a color</legend>
+                  <ul>
+                    <li>
+                        <input type="radio" id="karma-orange" name="color" value="karma-orange" checked/>
+                        <label for="karma-orange">Karma Orange</label>
+                    </li>
+                    <li>
+                      <input type="radio" id="space-grey" name="color" value="space-grey"/>
+                      <label for="karma-orange">Space Grey</label>
+                  </li>
+                  </ul>
+                </div>
+
+                <div class="check-box">
+                  <input type="checkbox" id="termsandconditions" required>
+                  <label for="termsandconditions">By placing your order you agree to <a href="">Karma's Terms and Conditions</a> *</label>
+                </div>
+
+                <div>
+                    <button>Place my order</button>
+                </div>
+            </form>
+        </section>
+
+        <section class="img-section">
+        </section>
+    </main>
+
+    <footer>
+        <h3>Join us on</h3>
+        <ul>
+            <li><a href="#"><img src="/img/twitter-icon.svg" alt="twitter"></a></li>
+            <li><a href="#"><img src="/img/facebook-icon.svg" alt="facebook"></a></li>
+            <li><a href="#"><img src="/img/instagram-icon.svg" alt="instagram"></a></li>
+        </ul>
+        <p>
+            &copy;	Karma Mobility, Inc.
+        </p>
+    </footer>
+</body>
+</html
+
+    
\ No newline at end of file