diff --git a/css/normalize.css b/css/normalize.css
index 957605911..b721f7a9f 100755
--- a/css/normalize.css
+++ b/css/normalize.css
@@ -15,7 +15,7 @@
  *    user zoom.
  */
 
-html {
+ html {
     font-family: sans-serif; /* 1 */
     -ms-text-size-adjust: 100%; /* 2 */
     -webkit-text-size-adjust: 100%; /* 2 */
diff --git a/css/style.css b/css/style.css
index 5cb025cef..d9a3ba5a8 100755
--- 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;
@@ -15,5 +14,234 @@ body {
  * 
  * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
  */
+header,
+main,
+
+footer {
+    padding: 0 1.5rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+header {
+    margin-top: 30px;
+}
+
+.nav-menu {
+    display: flex;
+    list-style: none;
+    flex-direction: row;
+    justify-content: end;
+
+}
+
+.nav-list {
+    margin-left: 15px;
+    padding: 0.rem 0;
+    font-family: 'sans-serif';
+    padding-bottom: 0px;
+    ;
+
+}
+
+.nav-item {
+    text-decoration: none;
+    color: rgb(153, 153, 153);
+}
+
+.nav-item:hover {
+    color: rgb(231, 51, 51);
+}
+
+.home-content {
+    margin-top: 70px;
+}
+
+.home {
+    background-image: url("../img/first-background.jpg");
+    background-size: cover;
+    height: 35rem;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    color: rgb(253, 250, 250);
+}
+
+button {
+    background-color: rgb(228, 97, 10);
+    color: rgb(255, 255, 255);
+    border: none;
+    border-radius: 5px;
+    padding: 15px;
+    padding-left: 30px;
+    padding-right: 30px;
+}
 
+.about {
+    margin-top: 4rem;
+    text-align: center;
+
+}
+
+.middle-article {
+    padding: 1rem 1;
+}
+
+.about-divs {
+    display: flex;
+    justify-content: space-around;
+    margin: 0 3rem;
+
+}
+
+.top-logo {
+    height: 30px;
+    width: 30px;
+    margin-right: 650px;
+
+
+}
+
+.middle-logo {
+    height: 100px;
+    width: auto;
+}
+
+.homepage-feature {
+    display: flex;
+    justify-content: center;
+}
+
+.homepage-feature img{
+    width: 100%;
+}
+
+.feature-content {
+    background-color:rgba(252, 179, 190, 0.235);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-self: stretch;
+    text-align: center;
+    justify-content: center;
+    width: 100%;
+    margin-bottom: 4px;
+}
+
+.feature-content p {
+    display: block;
+    font-style: italic;
+    width: 50%;
+    margin: 2rem;
+    font-size: 2rem;
+    font-weight: 200;
+}
+
+.feature-content span {
+    color: rgb(228, 97, 10);
+    font-size:  3rem;
+    font-weight: 400;
+}
+
+
+.footer-icon {
+    width: 30px;
+    height: 30px;
+}
+
+footer {
+    text-align: center;
+    padding: 3rem;
+}
+
+.copyright {
+    color: rgb(145, 145, 145);
+    font-size: 0.8rem;
+}
+
+.h2-everyone {
+    margin-left: 50px;
+    font: caption;
+    font-size: 3rem;
+    color: rgb(29, 27, 26);
+}
+
+input[type=text],
+select,
+textarea {
+    width: 100%;
+    padding: 12px;
+    border: 2px solid rgb(169, 166, 166);
+    border-radius: 4px;
+    box-sizing: border-box;
+    margin-top: 10px;
+    margin-bottom: 20px;
+    resize: vertical;
+}
+
+.store-container img {
+    width: 100%;
+    height: auto;
+}
+
+.store-container {
+    display: grid;
+    grid-template-columns: 1fr 50%;
+    padding: 20px;
+    gap: 30px;
+    color: rgb(81, 81, 81);
+}
+.store-container h1, a {
+    color: rgb(228, 97, 10);
+}
+.store-container h1{
+    font: 400;
+}
+
+.colour {
+    padding-top: 40px;
+    padding-bottom: 40px;
+
+}
+input[type='radio'] {
+    accent-color: rgb(228, 97, 10);
+}
+
+.place-order-content button{
+    margin-top: 40px;
+}
+
+
+
+form {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: 100px;
+    gap:10px;
+}
+
+.first-name {
+    grid-column: 1/4;
+}
+
+.last-name {
+    grid-column: 4/-1;
+}
+
+.Address {
+    grid-column: 1/-1;
+}
+
+.Address2 {
+    grid-column: 1/-1;
+}
+
+.city {
+    grid-column: 1/5;
+}
+
+.Postcode {
+    grid-column: 5/-1;
+}
 
+ 
\ No newline at end of file
diff --git a/index.html b/index.html
index 3e742ef04..a82e598d3 100755
--- a/index.html
+++ b/index.html
@@ -7,13 +7,88 @@
     <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">
+    <link rel="shortcuticon" 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>
+     <div class="nav-menu">
+          <img class="top-logo" src="img/karma-logo.svg" alt="karma-logo" />
+        <nav >
+         <ul class="nav-menu">
+            <li class="nav-list">
+                <a href="#" class="nav-item">Meet Karma</a>
+            </li>
+            <li class="nav-list">
+                <a href="#" class="nav-item">How it works</a>
+            </li>
+            <li class="nav-list">
+                <a href="store.html" class="nav-item">Store</a>
+            </li>
+            <li class="nav-list">
+                <a href="#" class="nav-item">Blog</a>
+            </li>
+            <li class="nav-list">
+                <a href="#" class="nav-item">Help</a>
+            </li>
+            <li class="nav-list">
+                <a href="#" class="nav-item">Login</a>
+            </li>
+         </ul>
+       </nav>
+     </div>
+     </header>
+    <main>
+        <section class="home"> 
+            <div class="home-content">
+                <h2>Introducing Karma</h2>
+                <h3>Bring WiFI with you, everywhere you go.</h3>
+                <button class="learn">Learn More</button>
+            </div>
+        </section>
 
+        <section class="about">
+            <h2 class="h2-everyone">Everyone needs a little Karma.</h2>
+                <div class="about-divs">
+                    <article class="middle-article">
+                        <img class="middle-logo" src="img/icon-devices.svg" alt="icon-devices" />
+                        <p>Internet for all devices</p>
+                    </article>
+                    <article class="middle-article">
+                        <img class="middle-logo" src="img\icon-coffee.svg" alt="icon-coffee" />
+                        <p>Boost your productivity</p>
+                    </article>
+                    <article class="middle-article">
+                        <img class="middle-logo" src="img\icon-refill.svg" alt="icon-refill" />
+                        <p>Pay as You go</p>
+                    </article>
+                </div>
+            </h2>
+        </section>
+        <selection class="homepage-feature">
+            <div class="feature-image">
+                <img   src="img\homepage-feature.png" alt="Homepage feature">
+            </div> 
+            <div class="feature-content">
+                <p class="feature-text"><span>&ldquo;</span>Wherever I am, I just don't worry about my connection anymore!<span>&rdquo;</span> </p>
+                <button class="get-karma">Get Karma today</button>
+            </div>
+        </selection>
+    </main>
+
+
+    <footer class="footer-content">
+        <hr>
+        <p>Join Us On</p>
+        <div>
+            <a href="https://twitter.com/" target="_blank"><img class="footer-icon" src="img\twitter-icon.svg" alt="twitter-icon" /></a>
+            <a href="https://facebook.com/" target="_blank"><img class="footer-icon" src="img\facebook-icon.svg" alt="facebook-icon" /></a>
+            <a href="https://instagram.com/" target="_blank"><img class="footer-icon" src="img\instagram-icon.svg" alt="instagram-icon" /></a>
+        </div>
+        <p class="copyright"><i>NazaninSaedi_2023</i> <hr>KarmaMobility, Inc.</p>
+    </footer>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/store.html b/store.html
new file mode 100644
index 000000000..d68913f84
--- /dev/null
+++ b/store.html
@@ -0,0 +1,125 @@
+<!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>
+
+    <!-- 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>
+        <div class="nav-menu">
+            <img class="top-logo" src="img\karma-logo.svg" alt="karma-logo" />
+            <nav>
+                <ul class="nav-menu">
+                    <li class="nav-list">
+                        <a href="#" class="nav-item">Meet Karma</a>
+                    </li>
+                    <li class="nav-list">
+                        <a href="#" class="nav-item">How it works</a>
+                    </li>
+                    <li class="nav-list">
+                        <a href="#" class="nav-item">Store</a>
+                    </li>
+                    <li class="nav-list">
+                        <a href="#" class="nav-item">Blog</a>
+                    </li>
+                    <li class="nav-list">
+                        <a href="#" class="nav-item">Help</a>
+                    </li>
+                    <li class="nav-list">
+                        <a href="#" class="nav-item">Login</a>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+    </header>
+    <main>
+        <div class="store-container">
+            <div class="store-content">
+                <h1>Order your Karma wifi device today!</h1>
+                <div class="form-content">
+
+                    <form>
+                        <div class="first-name">
+                            <label for="first-name">First name *</label>
+                            <input id="first-name" type="text" required />
+                        </div>
+                        <div class="last-name">
+                            <label for="last-name">Last name *</label>
+                            <input id="last-name" type="text" required />
+                        </div>
+                        <div class="Address">
+                            <label for="Address">Address *</label>
+                            <input id="Address" type="text" required />
+                        </div>
+                            
+                        <div class="Address2">
+                            <label for="Address2">Address 2</label>
+                            <input id="Address2" type="text" />
+                        </div>
+
+                        <div class="city">
+                            <label for="city">City *</label>
+                            <select id="city" name="city">
+                                <option value="initial" selected>Select your city...</option>
+                                <option value="italian">London</option>
+                                <option value="french">Birmingham</option>
+                                <option value="polish">Manchester</option>
+                                <option value="romanian">Bristol</option>
+                            </select>
+                        </div>
+                        <div class="Postcode">
+                            <label for="Postcode">Postcode *</label>
+                            <input id="Postcode" type="text" required />
+                        </div>
+
+                    </form>
+                </div>
+                <div class="colour">
+                    <p><strong>Select a colour</strong></p>
+                    <input id="orange" type="radio" name="colour" value="orange" checked />
+                    <label for="orange">Karma orange</label>
+
+                    <input id="grey" type="radio" name="colour" value="grey" />
+                    <label for="grey">Space grey</label>
+                </div>
+                <div class="place-order-content">
+                        <input id="agreement" type="checkbox" name="agreement" />
+                        <label for="agreement">By placing your order you agree to Karma's <a href="">Terms and Conditions</a>.
+                            *</label>
+                        <button class="place-order-button">Place my order</button>
+                </div>
+            </div>
+            <div>
+                <img class="store-image" src="img\store-image_by-andrew-neel-unsplash.jpg" alt="Store image">
+            </div>
+        </div>
+    </main>
+
+
+    <footer class="footer-content">
+        <hr>
+        <p>Join us on</p>
+        <div>
+            <a href="https://twitter.com/" target="_blank"><img class="footer-icon" src="img\twitter-icon.svg"
+                    alt="twitter-icon" /></a>
+            <a href="https://facebook.com/" target="_blank"><img class="footer-icon" src="img\facebook-icon.svg"
+                    alt="facebook-icon" /></a>
+            <a href="https://instagram.com/" target="_blank"><img class="footer-icon" src="img\instagram-icon.svg"
+                    alt="instagram-icon" /></a>
+        </div>
+        <p class="copyright">&copy; KarmaMobility, Inc.</p>
+    </footer>
+</body>
+
+</html>
\ No newline at end of file