diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 000000000..838c4c240
Binary files /dev/null and b/.DS_Store differ
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..03d08d573
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "livePreview.defaultPreviewPath": "/index.html"
+}
diff --git a/css/style.css b/css/style.css
index 5cb025cef..fbe4c6986 100755
--- a/css/style.css
+++ b/css/style.css
@@ -1,9 +1,22 @@
+/* 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 */
+:root {
+  --dark-gray: rgb(75, 75, 75);
+  --light-gray: rgb(171, 171, 171);
+  --lighter-gray: rgb(249, 249, 249);
+  --white: rgb(255, 255, 255);
+  --orange: rgb(241, 91, 42);
+  --light-orange: rgb(252, 239, 235);
 
+  --h3-color: var(--dark-gray);
+
+  font-size: 16px;
+}
 body {
-    font-family: 'Roboto', sans-serif;
-    -webkit-font-smoothing: antialiased;
+  font-family: "Roboto", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  color: var(--dark-gray);
+  text-align: center;
 }
 
 /**
@@ -16,4 +29,306 @@ body {
  * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
  */
 
+/* General styles, */
+h1,
+h2,
+h3 {
+  font-weight: 300;
+  line-height: 1.2em;
+  margin: 0;
+}
+
+h1 {
+  font-size: 72px;
+  color: var(--white);
+}
+h2 {
+  font-size: 60px;
+  color: var(--dark-gray);
+}
+h3 {
+  font-size: 40px;
+  color: var(--h3-color);
+}
+
+p {
+  font-size: 25px;
+}
+
+li {
+  list-style: none;
+}
+
+a {
+  color: var(--orange);
+  transition: all 0.2s ease-in;
+}
+
+hr {
+  width: 80%;
+  margin-top: 0;
+}
+
+.primary-btn {
+  color: var(--white);
+  background-color: var(--orange);
+  border: none;
+  border-radius: 0.3rem;
+  padding: 1rem 2rem;
+  font-size: 1.2rem;
+  transition: all 0.2s ease-in;
+  text-decoration: none;
+}
+
+.primary-btn:hover {
+  color: var(--orange);
+  background-color: var(--white);
+}
+/* Header styles */
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+  height: 4rem;
+  padding: 1.5rem 7rem;
+  background-color: var(--lighter-gray);
+}
+
+.header a {
+  display: flex;
+}
+
+.nav-menu {
+  display: flex;
+  align-items: center;
+  gap: 3rem;
+  font-size: 1.3rem;
+}
+
+.nav-menu a {
+  color: var(--light-gray);
+  text-decoration: none;
+}
+
+.nav-menu a:hover {
+  color: var(--orange);
+}
+
+.nav-menu .current-menu-item {
+  color: var(--dark-gray);
+  font-weight: 600;
+}
+
+/* Hero styles */
+
+.hero {
+  --h3-color: var(--white);
+  background: url(../img/first-background.jpg) no-repeat center/cover;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 700px;
+}
+
+.hero h1 {
+  margin-bottom: 2rem;
+}
+
+.hero h3 {
+  margin-bottom: 2rem;
+}
+
+.hero button {
+  margin: 2rem 0px;
+}
+
+/* Content Styles */
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 5rem 0;
+}
+.content h2 {
+  margin: 3rem 0;
+}
+.feature-list {
+  display: flex;
+  gap: 3rem;
+}
+
+.feature {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  width: 350px;
+}
+
+.feature img {
+  width: 120px;
+}
+
+/* Store Feature Styles */
+
+.store-ft {
+  display: flex;
+  margin-bottom: 5rem;
+}
+
+.store-ft > img {
+  max-width: 40%;
+  flex-grow: 1;
+}
 
+.store-ft-nav {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+  max-width: 60%;
+  background-color: var(--light-orange);
+}
+
+.store-ft-nav > h3 {
+  margin: 0 3rem 3rem;
+  font-style: italic;
+}
+
+.color-orange {
+  color: var(--orange);
+}
+
+/* Store page styles */
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-row {
+  display: flex;
+  align-items: center;
+}
+
+.gap-0-5 {
+  gap: 0.5rem;
+}
+
+.store {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.store-main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: left;
+  padding: 5rem;
+}
+
+.store-main > h2 {
+  color: var(--orange);
+  margin-bottom: 3rem;
+  font-weight: 500;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-rows: repeat(4, 1fr);
+  grid-template-columns: repeat(6, 1fr);
+  row-gap: 1.25rem;
+  column-gap: 1rem;
+  margin-bottom: 3rem;
+}
+
+.col-2 {
+  grid-column: span 2;
+}
+
+.col-3 {
+  grid-column: span 3;
+}
+
+.col-4 {
+  grid-column: span 4;
+}
+
+.col-6 {
+  grid-column: span 6;
+}
+
+.form-end-label {
+  margin: 0 0.5rem 0 0;
+  font-weight: 400;
+}
+
+.margin-bottom-2 {
+  margin-bottom: 2rem;
+}
+
+.accent-color-orange {
+  accent-color: var(--orange);
+}
+
+label {
+  color: var(--dark-gray);
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+input {
+  color: var(--dark-gray);
+  height: 2.5rem;
+  border-radius: 0.5rem;
+  border-width: 1px;
+}
+
+select {
+  color: var(--dark-gray);
+  border-radius: 0.5rem;
+  border-width: 1px;
+  flex-grow: 1;
+}
+
+.store-img {
+  height: 100%;
+  max-width: 100%;
+  object-fit: cover;
+}
+
+/* Footer Styles */
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 12rem;
+  padding: 1rem 0;
+}
+
+.social-media {
+  display: flex;
+  margin: 1rem;
+  gap: 1rem;
+}
+
+.social-media img {
+  width: 30px;
+}
+
+.circle {
+  border: 0.1px solid var(--dark-gray);
+  border-radius: 50%;
+  padding: 15px;
+  height: 30px;
+}
+
+.copyright {
+  color: var(--light-gray);
+}
diff --git a/img/.DS_Store b/img/.DS_Store
new file mode 100644
index 000000000..21a368622
Binary files /dev/null and b/img/.DS_Store differ
diff --git a/index.html b/index.html
index 3e742ef04..3047a4e43 100755
--- a/index.html
+++ b/index.html
@@ -1,19 +1,84 @@
 <!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="shortcut icon" type="image/x-icon"  href="favicon.ico">
-</head>
-<body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="description" content="Internet for all devices" />
+    <meta name="keywords" content="Wifi,Internet,productivity,karma" />
 
+    <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" />
+  </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 -->
 
-</body>
+    <header class="header">
+      <a href="index.html"> <img src="img/karma-logo.svg" alt="karma-logo" /> </a>
+      <nav class="nav-menu">
+        <li><a class="current-menu-item" href="#">Meet Karma</a></li>
+        <li><a href="#">How it Works</a></li>
+        <li><a href="store.html">Store</a></li>
+        <li><a href="#">Blog</a></li>
+        <li><a href="#">Help</a></li>
+        <li><a href="#">Login</a></li>
+      </nav>
+    </header>
+    <main>
+      <!-- Hero Section -->
+      <section class="hero">
+        <h1>Introducing Karma</h1>
+        <h3>Bring WiFi with you, everywhere you go</h3>
+        <button class="primary-btn">Learn More</button>
+      </section>
+      <!-- Content Section -->
+      <section class="content">
+        <h2>Everyone needs a little Karma</h2>
+        <div class="feature-list">
+          <!-- feature-1 -->
+          <div class="feature">
+            <img src="img/icon-devices.svg" alt="icon-devices" />
+            <p>Internet for all devices</p>
+          </div>
+          <!-- feature-2 -->
+          <div class="feature">
+            <img src="img/icon-coffee.svg" alt="icon-coffee" />
+            <p>Boost your productivity</p>
+          </div>
+          <!-- feature-3 -->
+          <div class="feature">
+            <img src="img/icon-refill.svg" alt="icon-refill" />
+            <p>Pay as You Go</p>
+          </div>
+        </div>
+      </section>
+
+      <!-- Store feature section -->
+      <section class="store-ft">
+        <img src="level-2/homepage-feature.png" alt=" a woman looks tablet" />
+        <div class="store-ft-nav">
+          <h3>
+            <span class="color-orange">"</span>Wherever I am, I just don't worry about my connection anymore! <span class="color-orange">"</span>
+          </h3>
+          <a class="primary-btn" href="store.html">Get Karma today</a>
+        </div>
+      </section>
+    </main>
+    <hr />
+    <footer class="footer">
+      <div>Join us on</div>
+      <!-- Social Media Logos -->
+      <div class="social-media">
+        <div class="circle"><img src="img/twitter-icon.svg" alt="twitter-icon" /></div>
+        <div class="circle"><img src="img/facebook-icon.svg" alt="facebook-icon" /></div>
+        <div class="circle"><img src="img/instagram-icon.svg" alt="instagram-icon" /></div>
+      </div>
+      <!-- Copyright -->
+      <div class="copyright">&copy; Karma Mobility, Inc.</div>
+    </footer>
+  </body>
 </html>
diff --git a/store.html b/store.html
new file mode 100644
index 000000000..806da5178
--- /dev/null
+++ b/store.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="description" content="Internet for all devices" />
+    <meta name="keywords" content="Wifi,Internet,productivity,karma" />
+    <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" />
+  </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 class="header">
+      <a href="index.html"> <img src="img/karma-logo.svg" alt="karma-logo" /> </a>
+      <nav class="nav-menu">
+        <li><a href="index.html">Meet Karma</a></li>
+        <li><a href="#">How it Works</a></li>
+        <li><a class="current-menu-item" href="#">Store</a></li>
+        <li><a href="#">Blog</a></li>
+        <li><a href="#">Help</a></li>
+        <li><a href="#">Login</a></li>
+      </nav>
+    </header>
+    <main>
+      <!-- Store section -->
+      <section class="store">
+        <div class="store-main">
+          <h2>Order your Karma wifi device today!</h2>
+          <form class="flex-column">
+            <div class="form-grid">
+              <div class="col-3 flex-column">
+                <label for="name">First name *</label>
+                <input type="text" id="name" />
+              </div>
+              <div class="col-3 flex-column">
+                <label for="last-name">Last name *</label>
+                <input type="text" id="last-name" />
+              </div>
+              <div class="col-6 flex-column">
+                <label for="address">Address *</label>
+                <input type="text" id="address" />
+              </div>
+              <div class="col-6 flex-column">
+                <label for="address-2">Address 2 *</label>
+                <input type="text" id="address-2" />
+              </div>
+
+              <div class="col-4 flex-column">
+                <label for="city">City *</label>
+                <select id="city" name="city">
+                  <option value="" disabled selected>Select your city...</option>
+                  <option value="manchester">Manchester</option>
+                  <option value="stockport">Stockport</option>
+                  <option value="bolton">Bolton</option>
+                  <option value="trafford">Trafford</option>
+                </select>
+              </div>
+              <div class="col-2 flex-column">
+                <label for="postcode">Postcode *</label>
+                <input type="text" id="postcode" />
+              </div>
+            </div>
+            <div class="flex-column margin-bottom-2">
+              <label for="">Select a colour </label>
+              <div class="flex-row gap-0-5">
+                <input class="accent-color-orange" type="radio" id="karma-orange" name="colour" value="karma-orange" />
+
+                <label class="form-end-label" for="karma-orange">Karma orange</label>
+                <input class="accent-color-orange" type="radio" id="space-grey" name="colour" value="space-grey" />
+                <label class="form-end-label" for="space-grey">Space Grey</label>
+              </div>
+            </div>
+            <div class="flex-row gap-0-5 margin-bottom-2">
+              <input class="accent-color-orange" type="checkbox" id="tc" name="tc" value="tc" />
+              <label class="form-end-label" for="tc">By placing your order you agree to Karma's <a href="#">Terms and Conditions</a>. *</label>
+            </div>
+            <div class="flex-row">
+              <button type="submit" class="primary-btn">Place my order</button>
+            </div>
+          </form>
+        </div>
+        <img class="store-img" src="level-2/store-image_by-andrew-neel-unsplash.jpg" alt="a woman looks laptop" />
+      </section>
+    </main>
+    <hr />
+    <footer class="footer">
+      <div>Join us on</div>
+      <!-- Social Media Logos -->
+      <div class="social-media">
+        <div class="circle"><img src="img/twitter-icon.svg" alt="twitter-icon" /></div>
+        <div class="circle"><img src="img/facebook-icon.svg" alt="facebook-icon" /></div>
+        <div class="circle"><img src="img/instagram-icon.svg" alt="instagram-icon" /></div>
+      </div>
+      <!-- Copyright -->
+      <div class="copyright">&copy; Karma Mobility, Inc.</div>
+    </footer>
+  </body>
+</html>