diff --git a/css/store.css b/css/store.css
new file mode 100644
index 000000000..64c22e52a
--- /dev/null
+++ b/css/store.css
@@ -0,0 +1,111 @@
+/* General */
+:root {
+    --orange: #E0633A;
+    --light__grey: #848993;
+    --lighter__grey: #F1F2F3;
+    --dark__grey: #4D5057;
+    --white: #FFF;
+    --light-orange: rgba(224, 99, 58, 0.1);
+}
+
+.store__main h1 {
+    color: var(--orange);
+    font-size: 2rem;
+    font-weight: 500;
+}
+
+/* Grid */
+
+.store__main {
+    display: grid;
+    grid-template-columns: 50% 50%;
+    grid-gap: 1rem;
+}
+
+.store__main > * {
+    grid-column: 1;
+}
+
+.heading_and_form {
+    display: inline-block;
+    margin: 2rem auto;
+}
+
+/* Form */
+
+.left__container {
+    grid-column: 1 / 2;
+    display: flex;
+    flex-direction: column;
+}
+
+form {
+    font-size: 0.8rem;
+    color: rgba(102, 102, 102, 1);
+}
+
+#first-name,
+#last-name,
+#address-1,
+#address-2,
+#address-city,
+#address-postcode {
+    height: 2rem;
+    border-radius: 0.2rem;
+    margin-right: 1rem;
+}
+
+#address-1, #address-2 {
+    max-width: 320px;;
+}
+
+#address-city {
+    width: 180px;
+}
+
+#address-postcode {
+    width: 125px;
+}
+
+.radio__buttons {
+    margin-right: 1rem;
+    margin-bottom: 2rem;
+}
+
+.label-and-input {
+    margin-bottom: 1.5rem;
+}
+
+.terms-label-and-input {
+    margin-bottom: 1rem;
+}
+
+#terms__link {
+    text-decoration: underline;
+    color: var(--orange);
+}
+
+.flex__column {
+    display: flex;
+    flex-direction: column;
+}
+
+.flex__row {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+fieldset {
+    border: none;
+}
+
+#space-grey, #karma-orange {
+    accent-color: var(--orange);
+}
+
+/* Store image */
+
+.right__container {
+    grid-column: 2 / -1;
+}
+
diff --git a/css/style.css b/css/style.css
index 5cb025cef..47b4d576f 100755
--- a/css/style.css
+++ b/css/style.css
@@ -1,19 +1,220 @@
 
- /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
+/* General */
+:root {
+    --orange: #E0633A;
+    --light__grey: #848993;
+    --lighter__grey: #F1F2F3;
+    --dark__grey: #4D5057;
+    --white: #FFF;
+    --light-orange: rgba(224, 99, 58, 0.1);
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
 
 body {
     font-family: 'Roboto', sans-serif;
     -webkit-font-smoothing: antialiased;
 }
 
-/**
- * Add your custom styles below
- * 
- * Remember: 
- * - Be organised, use comments and separate your styles into meaningful chunks
- *    for example: General styles, Navigation styles, Hero styles, Footer etc.
- * 
- * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
- */
+img {
+    width: 100%;
+}
+
+a {
+    text-decoration: none;
+    color: var(--dark__grey);
+}
+
+a:hover {
+    color: var(--orange);
+}
+
+/* Grid */
+.container {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 10rem auto 10rem;
+}
+
+.container > * {
+    grid-column: 2 / 3;
+    min-width: 0;
+}
+
+/* Navigation */
+header {
+    grid-column: 2 / 3;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+header img {
+    max-width: 1.5rem;
+}
+
+nav ul {
+    display: flex;
+    flex-direction: row;
+}
+
+nav li {
+    margin: 0 1rem;
+    list-style: none;
+}
+
+nav ul a:first-child {
+    font-weight: 500;
+}
+
+/* Hero */
+.hero {
+    grid-column: 1 / -1;
+    background-image: url(../img/first-background.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.hero .center__text {
+    padding: 13rem;
+
+}
+
+h1 {
+     font-size: 2.8rem;
+     font-weight: 300;
+     letter-spacing: 0.1rem;
+}
+
+.hero h1 {
+    color: var(--white);
+}
+
+.hero p {
+    font-size: 1.3rem;
+    font-weight: 300;
+    letter-spacing: 0.1rem;
+    color: var(--white);
+    margin-bottom: 3rem;
+}
+
+/* Buttons including submit button for store form */
+
+button, input[type=submit] {
+    color: var(--white);
+    font-size: 0.875rem;
+    letter-spacing: 0.05rem;
+    font-weight: 300;
+    background-color: var(--orange);
+    padding: 0.8rem 1.5rem;
+    border-radius: 0.3rem;
+    border-color: var(--orange);
+    border: none;
+}
+
+button,input[type=submit]:hover {
+    color: var(--orange);
+    background-color: var(--white);
+    border-color: var(--white);
+}
+
+/* Main Content */
+main h2 {
+    text-align: center;
+    font-weight: 300;
+    font-size: 2rem;
+    letter-spacing: 0.1rem;
+} 
+
+main p {
+    font-size: 1.2rem;
+}
+
+#homepage__icon {
+    max-width: 50%;
+}
+
+/* Extended Section */
+
+.extended__section {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: 40% 60%;
+    margin-bottom: 2rem;
+}
+
+.center__contents {
+    background-color: var(--light-orange);
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 5rem;
+}
+
+.extended__quote {
+    font-size: 2vmin;
+    font-style: italic;
+}
+
+.orange__text {
+    color: var(--orange);
+    font-size: 2rem;
+}
+
+/* Break Line */
+.section__break {
+    height: 1px;
+    width: 95%;
+    background-color: var(--lighter__grey);
+    justify-self: center;
+}
+
+/* Footer */
+footer {
+    grid-column: 2 / 3;
+    margin-bottom: 3rem;
+}
+
+footer p {
+    text-align: center;
+    font-size: 1rem;
+}
+
+.copyright__text {
+    color: var(--light__grey);
+}
+
+#social__icon {
+    padding: 1px;
+    margin: 0.5rem;
+    max-width: 30px;
+    text-align: center;
+    text-decoration: none;
+    border: 0.1rem solid var(--lighter__grey);
+    border-radius: 50%;
+    overflow: visible;
+}
+
+/* Other */
+.center__text {
+    text-align: center;
+}
+
+.wrapper {
+    display: flex;
+    gap: 2rem;
+    justify-content: center;
+}
+
+
 
 
diff --git a/index.html b/index.html
index 3e742ef04..3a568440e 100755
--- a/index.html
+++ b/index.html
@@ -10,10 +10,77 @@
     <link rel="shortcut icon" type="image/x-icon"  href="favicon.ico">
 </head>
 <body>
+    <div class="container">
 
-    <!-- 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>
+            <img src="img/karma-logo.svg" alt="Karma logo" />
+            <nav>
+                <ul>
+                    <a href="#"><li>Meet Karma</li></a>
+                    <a href="#"><li>How it Works</li></a>
+                    <a href="store.html"><li>Store</li></a>
+                    <a href="#"><li>Blog</li></a>
+                    <a href="#"><li>Help</li></a>
+                    <a href="#"><li>Login</li></a>
+                </ul>
+            </nav>
+        </header>
+
+        <section class="hero">
+            <div class="center__text">
+                <h1>Introducing Karma</h1>
+                <p>Bring WiFi with you, everywhere you go.</p>
+                <a href="#"><button>Learn More</button></sectio></a>
+            </div>
+        </section>
+
+        <main class="center__text">
+        
+            <h2>Everyone needs a little Karma.</h2>
+                    
+            <div class="wrapper">
+                <div class="item">
+                    <img src="img/icon-devices.svg" alt="Electronic devices" id="homepage__icon"/>
+                    <p>Internet for all devices</p>
+                </div>
+                    
+                <div class="item">
+                    <img src="img/icon-coffee.svg" alt="Hot coffee cup" id="homepage__icon" />
+                    <p>Boost your productivity</p>
+                    </div>
+                    
+                <div class="item">
+                    <img src="img/icon-refill.svg" alt="Plugged in device" id="homepage__icon" />
+                    <p>Pay as You Go</p>
+                </div>
+            </div>
+                 
+        </main>
+         
+        <section class="extended__section">
+            <div class="box"><img src="level-2/homepage-feature.png" alt="woman laughing" id="woman__laughing" /></div>
+            <div class="center__contents">
+                <div>
+                    <p class="extended__quote"><span class="orange__text">“ </span>Wherever I am, I just don't worry about my connection anymore!<span class="orange__text"> ”</span></p>
+                    <a href="store.html"><button>Get Karma Today</button></a>
+                </div>
+            </div>
+        </section>
+        
+
+        <div class="section__break"></div>
+
+        <footer>
+            <p>Join us on</p>
+            <div class="center__text">
+                <a href="#" target="_blank"><img src="img/twitter-icon.svg" alt="Twitter" id="social__icon" /></a>
+                <a href="#" target="_blank"><img src="img/facebook-icon.svg" alt="Facebook" id="social__icon" /></a>
+                <a href="#" target="_blank"><img src="img/instagram-icon.svg" alt="Instagram" id="social__icon" /></a>
+            </div>
+            <p class="copyright__text">© Karma Mobility, Inc.</p>
+        </footer>
+
+    </div> 
 
 </body>
 </html>
diff --git a/store.html b/store.html
new file mode 100644
index 000000000..f90c4e603
--- /dev/null
+++ b/store.html
@@ -0,0 +1,118 @@
+<!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>
+    <div class="container">
+        <header>
+            <img src="img/karma-logo.svg" alt="Karma logo" />
+            <nav>
+                <ul>
+                    <a href="#"><li>Meet Karma</li></a>
+                    <a href="#"><li>How it Works</li></a>
+                    <a href="#"><li>Store</li></a>
+                    <a href="#"><li>Blog</li></a>
+                    <a href="#"><li>Help</li></a>
+                    <a href="#"><li>Login</li></a>
+                </ul>
+            </nav>
+        </header>
+
+        <main class="store__main">
+            <div class="left__container">
+                <div class="heading_and_form">
+                    <h1>Order your Karma wifi device today!</h1>
+                    <form action="#">
+                        <fieldset>
+                            <div class="flex__row">
+                                <div class="label-and-input flex__column">
+                                    <label for="first-name">First Name *</label>
+                                    <input id="first-name" type="text" required />
+                                </div>
+                                <div class="label-and-input flex__column">
+                                    <label for="last-name">Last name *</label>
+                                    <input id="last-name" type="text" required />
+                                </div>
+                            </div>
+                    
+                            <div class="label-and-input flex__column">
+                                <label for="address-1">Address *</label>
+                                <input id="address-1" type="text" required />
+                            </div>
+                            <div class="label-and-input flex__column">
+                                <label for="address-2">Address 2</label>
+                                <input id="address-2" type="text" />
+                            </div>
+                    
+                            <div class="flex__row">
+                                <div class="label-and-input flex__column">
+                                    <label for="address-city">City *</label>
+                                    <select id="address-city" name="city">
+                                        <option value="">Select your city...</option>
+                                        <option value="glasgow">Glasgow</option>
+                                        <option value="edinburgh">Edinburgh</option>
+                                        <option value="tokyo">Tokyo</option>
+                                        <option value="london">London</option>
+                                    </select>
+                                </div>
+                    
+                                <div class="label-and-input flex__column">
+                                    <label for="address-postcode">Postcode *</label>
+                                    <input id="address-postcode" type="text" required />
+                                </div>
+                            </div>
+                    
+                        </fieldset>
+                        <fieldset>
+                            <legend>Select a colour</legend>
+                            <div class="flex__row">
+                                <div class="radio__buttons">
+                                    <input id="karma-orange" type="radio" name="color-preference" value="karma-orange" checked="checked" />
+                                    <label for="karma-orange">Karma Orange</label>
+                                </div>
+                    
+                                <div class="#radio__buttons">
+                                    <input id="space-grey" type="radio" name="color-preference" value="space-grey" />
+                                    <label for="space-grey">Space Grey</label>
+                                </div>
+                            </div>
+                    
+                        </fieldset>
+                        <fieldset class="terms-label-and-input">
+                            <input id="terms-and-conditions" type="checkbox" required checked="checked" />
+                            <label for="terms-and-conditions">By placing your order you agree to Karma's <a href="#" id="terms__link">Terms and Conditions</a>. *</label>
+                    
+                        </fieldset>
+                        <input type="submit" value="Place my order" />
+                    </form>
+                </div>
+            </div>
+
+            <div class="right__container">
+                <img src="level-2/store-image_by-andrew-neel-unsplash.jpg" />
+            </div>
+
+        </main>
+
+         <div class="section__break"></div>
+
+        <footer>
+            <p>Join us on</p>
+            <div class="center__text">
+                <a href="#" target="_blank"><img src="img/twitter-icon.svg" alt="Twitter" id="social__icon" /></a>
+                <a href="#" target="_blank"><img src="img/facebook-icon.svg" alt="Facebook" id="social__icon" /></a>
+                <a href="#" target="_blank"><img src="img/instagram-icon.svg" alt="Instagram" id="social__icon" /></a>
+            </div>
+            <p class="copyright__text">© Karma Mobility, Inc.</p>
+        </footer>
+    </div>
+</body>
\ No newline at end of file