diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 46c150e15..eb3262620 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -16,14 +16,14 @@ Please complete the details below this message
 
 # Your Details
 
-- Your Name:
-- Your City:
-- Your Slack Name:
+- Your Name: Zahraa
+- Your City: London Turing
+- Your Slack Name: Zahraa Tayyar
 
 # Homework Details
 
-- Module:
-- Week:
+- Module: HTML/ CSS 1
+- Week: 2
 
 # Notes
 
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/store.css b/css/store.css
new file mode 100644
index 000000000..5fc337541
--- /dev/null
+++ b/css/store.css
@@ -0,0 +1,113 @@
+
+/* main */
+
+.main_store {
+    display: flex;
+    flex-direction: row;
+    margin:0;
+    color:gray;
+}
+
+.store_title {
+    color: #E14E00;
+    margin-top:0;
+}
+
+/* Form */
+
+.order_form{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin: 7rem;
+}
+
+.input {
+    border:solid 1.5px gray;
+    border-radius: 5px;
+    padding: 1rem;
+    width:100%;
+    margin-top: 1rem;
+}
+
+/* Form Divs*/
+
+fieldset {
+    border: none;
+    display:flex;
+    gap: 2rem;
+    width:auto;
+}
+
+.name_section {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 5rem;
+    margin-top: 4rem;
+    margin-bottom: 2rem;;
+    width: 100%;
+}
+
+.address_section {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 2rem;
+    width:100%;
+}
+
+#address {
+    margin-bottom:2rem;
+}
+
+.location_section {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 2rem;
+    width:100%;
+    margin-bottom: 2rem;
+}
+
+.colour_section {
+    margin: 2rem 0 7rem 0;
+}
+
+.colour_title {
+    margin: 2rem 0 1rem 0;
+}
+
+.terms_cond {
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    margin-bottom:3rem;
+    width: 100%;
+}
+
+.button {
+    background-color: #E14E00;
+    padding: 1rem;
+    justify-content: left;
+    color: white;
+    border-radius: 0.2rem;;
+    border: none;
+    margin-right: 50%;
+}
+
+/* Radio Styling */
+
+/* Checkbox Styling */
+
+input [type="checkbox"]:before {
+    color: #E14E00;
+    transform: scale(0);
+}
+
+/* image */
+
+.store_image1 {
+    max-width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 5cb025cef..3e234109c 100755
--- a/css/style.css
+++ b/css/style.css
@@ -15,5 +15,159 @@ body {
  * 
  * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
  */
+ 
 
 
+ /* Header */
+
+ header {
+    padding: 0;
+    margin: 0;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    background-color: #F2F2F2;
+ }
+
+ .header_logo_container { 
+  max-height: 45px;
+  width: auto;
+  margin-left: 7rem;
+  /* border: 4px solid blue; */
+ }
+
+ /* Navigation */
+
+  .nav_list_container {
+    display:flex;
+    flex-direction: row;
+    /* justify-content:space-between; */
+    align-items: center;
+    list-style: none;
+    gap: 5rem;
+    /* float:right; */
+    padding-right: 7rem;
+    color: grey;
+  }
+
+  .nav_item {
+    padding: 0.1rem 0;
+    margin: 0;
+    color: gray;
+  }
+
+  .nav_item:hover,
+  .nac_item:focus {
+    color: #E14E00;
+    font-weight: bold;
+  }
+
+  #navmeetkarma {
+    font-weight: bold;
+  }
+
+  /* Main */
+
+  /* Hero */
+
+  .hero {
+    background-image: url(/img/first-background.jpg);
+    background-size: cover;
+    background-position: center;
+    background-repeat: none;
+    margin-bottom: 10rem;
+  }
+
+  .introtext {
+    color: white;
+    text-align: center;
+    padding: 24rem;
+  }
+
+  /* article */
+
+  .title {
+    text-align: center;
+  }
+
+  .main_article{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    padding-bottom: 5rem;
+  }
+
+  .icons {
+    padding: 5rem;
+    height: 10rem;
+    margin: 5rem;
+  }
+
+  .icon_payg,
+  .icon_coffee,
+  .icon_devices {
+    height: 15rem;
+  }
+
+  .sep_line {
+    margin:0 12rem;
+    opacity: 50%;
+  }
+
+  /* Home Page Feature */
+
+  .home_feature {
+    display:flex;
+    background-color:#FFE8DE;
+  }
+
+  .feature_text {
+    text-align: center;
+    justify-content: center;
+    padding: 12rem 20rem 10rem 0;
+  }
+
+  .feature_image {
+    height: 35rem;
+    margin-right: 20rem;
+  }
+
+  /* Footer */
+
+  .footer_text {
+    text-align: center;
+    padding: 10px;
+  }
+
+  ul {
+    list-style: none;
+  }
+
+  .contact_icon_container {
+    display:flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 5px;
+    padding: 5px;
+  }
+
+  .contact_icon {
+    height: 30px;
+    width: 30px;
+    border: solid grey;
+    border-radius: 20px;
+    padding: 10px;
+    margin: 0 20px;
+  }
+
+  .contact_icon:hover {
+    background-color: #FFE8DE;
+    border-color: black;
+  }
+
+  .copyright {
+    padding: 10px;
+    text-align: center;
+    color: gray;
+  }
+  
\ No newline at end of file
diff --git a/index.html b/index.html
index 3e742ef04..2aeefaa4d 100755
--- a/index.html
+++ b/index.html
@@ -15,5 +15,121 @@
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
     <!-- All the images you need are in the 'img' folder -->
 
+    <header class="header">
+        <div class="header_logo_container">
+            <a href="#" class="header_logo_link">
+                <img
+                 src="img/karma-logo.svg"
+                 alt="Logo for Karma"
+                 class="header_logo"
+               />
+              </a>
+        </div>
+        <nav>
+            <ul class="nav_list_container">
+                <li>
+                  <a class="nav_item" id="navmeetkarma" href="/index.html">Meet Karma</a>
+                </li>
+                <li class="nav_list">
+                  <a class="nav_item" href="#">How it Works</a>
+                </li>
+                <li class="nav_list">
+                  <a class="nav_item" href="/store.html">Store</a>
+                </li>
+                <li class="nav_list">
+                  <a class="nav_item" href="#">Blog</a>
+                </li>
+                <li class="nav_list">
+                  <a class="nav_item" href="#">Help</a>
+                </li>
+                <li class="nav_list">
+                  <a class="nav_item" href="#">Login</a>
+                </li>
+              </ul>
+        </nav>
+    </header>
+
+    <main class="main">
+        <section class="hero">
+            <div class="introtext">
+                <h1>Introducing Karma</h1>
+                <h2>Bring WiFi with you, everywhere you go.</h2>
+            </div>
+        </Section>
+        <h1 class="title">Everyone needs a little Karma</h1>
+        <article class="main_article">
+            <div class="icons">
+                <a href="#">
+                    <img
+                    src="/img/icon-devices.svg"
+                    alt="icon of internet coming from devices"
+                    class="icon_devices">
+                </a>
+                <h2>Internet for all devices</h2>
+            </div>
+
+            <div class="icons">
+                <a href="#">
+                    <img
+                    src="/img/icon-coffee.svg"
+                    alt="icon of coffee"
+                    class="icon_coffee">
+                </a>
+                <h2>Boost your productivity</h2>
+            </div>
+            <div class="icons">
+                <a href="#">
+                    <img
+                    src="/img/icon-refill.svg"
+                    alt="icon of coffee"
+                    class="icon_payg">
+                </a>
+                <h2>Pay as You Go</h2>
+            </div>
+        </article>
+        <section class="home_feature">
+            <a href="#">
+                <img
+                src="/level-2/homepage-feature.png"
+                alt="Woman smiling at camera"
+                class="feature_image">
+            </a>
+            <h2 class="feature_text">"Wherever I am, I just don't worry about my connection anymore!"</h2>
+        </section>
+    </main>
+
+    <!-- <hr class="sep_line"> -->
+
+    <footer>
+        <h3 class="footer_text">Join us on</h3>
+        <ul class="contact_icon_container">
+            <li>
+                <a href="#">
+                    <img
+                    src="/img/twitter-icon.svg"
+                    alt="twitter icon"
+                    class="contact_icon">
+            </li>
+            <li>
+                <a href="#">
+                    <img
+                    src="/img/facebook-icon.svg"
+                    alt="facebook icon"
+                    class="contact_icon">
+                </a>
+            </li>
+            <li>
+                <a href="#">
+                    <img
+                    src="/img/instagram-icon.svg"
+                    alt="instagram icon"
+                    class="contact_icon">
+                </a>
+            </li>
+        </ul>
+        <div class="copyright">
+            <p>Karma Mobility, Inc.</p>
+        </div>
+    </footer>
 </body>
 </html>
diff --git a/store.html b/store.html
new file mode 100644
index 000000000..16c4eeb9c
--- /dev/null
+++ b/store.html
@@ -0,0 +1,147 @@
+<!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</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 class="header">
+        <div class="header_logo_container">
+            <a href="#" class="header_logo_link">
+                <img
+                 src="img/karma-logo.svg"
+                 alt="Logo for Karma"
+                 class="header_logo"
+               />
+              </a>
+        </div>
+        <nav>
+            <ul class="nav_list_container">
+                <li>
+                  <a class="nav_item" id="navmeetkarma" href="/index.html">Meet Karma</a>
+                </li>
+                <li class="nav_list">
+                  <a class="nav_item" href="#">How it Works</a>
+                </li>
+                <li class="nav_list">
+                  <a class="nav_item" href="/store.html">Store</a>
+                </li>
+                <li class="nav_list">
+                  <a class="nav_item" href="#">Blog</a>
+                </li>
+                <li class="nav_list">
+                  <a class="nav_item" href="#">Help</a>
+                </li>
+                <li class="nav_list">
+                  <a class="nav_item" href="#">Login</a>
+                </li>
+              </ul>
+        </nav>
+    </header>
+
+    <main class="main_store">
+        <form class="order_form">
+            <div class="store_title">
+                <h1>Order your Karma wifi device today!</h1>
+            </div>
+            <div class="name_section">
+                <div>
+                    <label for="first_name">First name *</label>
+                    <input style="text" class="input" id="first_name" name="first_name" required>
+                </div>
+                <div>
+                    <label for="last_name">Last name *</label>
+                    <input style="text" class="input" id="last_name" name="last_name" required>
+                </div>
+            </div>
+            <div class="address_section">
+                <div>
+                    <label for="address">Address *</label>
+                    <input style="text" class="input" id="address" name="address" required>
+                </div>
+                <div>
+                    <label for="address2">Address 2</label>
+                    <input style="text" class="input" id="address2" name="address2">
+                </div>
+            </div>
+            <div class="location_section">
+                <div>
+                    <label for="city">City *</label>
+                    <select id="city" name="city" class="input" required>
+                        <option value="">Select your city...</option>
+                        <option value="UK">UK</option>
+                        <option value="USA">USA</option>
+                        <option value="France">France</option>
+                    </select>
+                </div>
+                <div>
+                    <label for="postcode">Postcode *</label>
+                    <input style="text" class="input" id="postcode" name="postcode">
+                </div>
+            </div>
+            <fieldset class="colour_section">
+                <legend class="colour_title">Select a colour</legend>
+                <input type="radio" value="Karma range" name="colour" class="input" id="karma_orange">
+                <label for="karma_orange">Karma Orange</label>
+                <input type="radio" value="Space Grey" name="colour" class="input" id="space_grey"> 
+                <label for="space_grey">Space Grey</label>
+            </fieldset>
+            <div class="terms_cond">
+                <input type="checkbox" class="input" id="tc">
+                <label for="tc">By placing your order you agree to 
+                    <a href="">Karma's Terms and Conditions. *</a>
+                </label>
+            </div>         
+            <button type="submit" class="button">Place my order</button>
+        </form>
+        <div class="store_image">
+            <a href="#">
+                <img
+                src="/level-2/store-image_by-andrew-neel-unsplash.jpg"
+                alt="woman working on her laptop sitting on a long desk"
+                class="store_image1">
+            </a>
+        </div>
+    </main>
+
+    <footer>
+        <h3 class="footer_text">Join us on</h3>
+        <ul class="contact_icon_container">
+            <li>
+                <a href="#">
+                    <img
+                    src="/img/twitter-icon.svg"
+                    alt="twitter icon"
+                    class="contact_icon">
+            </li>
+            <li>
+                <a href="#">
+                    <img
+                    src="/img/facebook-icon.svg"
+                    alt="facebook icon"
+                    class="contact_icon">
+                </a>
+            </li>
+            <li>
+                <a href="#">
+                    <img
+                    src="/img/instagram-icon.svg"
+                    alt="instagram icon"
+                    class="contact_icon">
+                </a>
+            </li>
+        </ul>
+        <div class="copyright">
+            <p>Karma Mobility, Inc.</p>
+        </div>
+    </footer>
+
+</body>
\ No newline at end of file