diff --git a/css/store.css b/css/store.css
index 9c331984a..b5b7dfe48 100644
--- a/css/store.css
+++ b/css/store.css
@@ -7,6 +7,10 @@ body {
 main{
     width: 100%;
 }
+.header .logo{ 
+    width: 50px; 
+} 
+
 img{
     width: 50%;
     float: right;
@@ -16,25 +20,24 @@ form{
 }
 .store-form{
     margin-top: 80px;
-    width: 40%;
+    width: 50%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    text-align: justify;
-    margin-left: 5%;
-    margin-right: 5%;
+    text-align: flex-start;
 }
 .store-form h1{
+    text-align: center;
     margin-top: 60px;
     font-size: 45px;
-    font-weight: 500;
-    letter-spacing: 1px;
+    font-weight: 400;
     color: #cc5500;
 }
 .store-form .input-box{
     margin-bottom:30px ; 
     width: 100%; 
+    font-weight: 500;
 }
 .store-form .input-group{
     display: flex;
@@ -46,13 +49,15 @@ form{
     border: 2px solid #686868;
     border-radius: 5px;
     width: 90%;
-    height: 35px;
+    height: 45px;
+    
 }
 .store-form .input-box select{
     border: 2px solid #686868;
     border-radius: 5px;
     width: 95%;
-    height: 40px;
+    height: 50px;
+    color: #686868;
 }
 .store-form .check-box input{
     border: 2px solid #686868;
@@ -69,7 +74,7 @@ label {
     width: 40%;
 	background: hwb(25 7% 3% / 0.943);
 	padding: 15px 35px;
-    margin: 30px;
+    margin-top: 30px; 
 	border: 0;
 	border-radius: 3px;
 	letter-spacing: 1px;
@@ -114,13 +119,6 @@ label {
 .radio input:checked + .radio__radio::after{
     transform: scale(1);
 }
-/*.check-box{
-    display: flex;
-    justify-content: center ;
-    align-items: baseline; 
-    text-align:justify; 
-    cursor: pointer;
-} */
 .check-box p{
     color: #535353;
 }
@@ -148,10 +146,56 @@ label {
 
 }
 .checkmark::after{  
-     content: url(../level-2/checkmark.svg); 
+    content: url(../level-2/checkmark.svg); 
     display: none; 
 }
 .check-box input:checked + .checkmark::after {  
     display: block; 
 }
 
+@media screen and (max-width:768px){
+   .right-image{
+    margin-top: 1250px;
+    width:100%
+   }
+   .store-form{
+    position: absolute; 
+    width: 100%; 
+   }
+   .store-form h1{
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+   }
+   .input-group{
+    flex-direction: column;
+    width: 100%;
+   }
+   .radio-group{
+    flex-direction: column ;
+    align-items: flex-start;
+   }
+   .radio{
+    margin-bottom: 0;
+   }
+   .postCode{
+    width: 40%;
+   }
+   .store-form{
+    width: 80%;
+   }
+   .check-box p{
+    margin-left: 15px;
+   }
+   .check-box{
+    margin-top: 40px;
+   }
+
+   .store-form .button{
+    width: auto;
+	padding: 25px 50px;
+    margin-left: 30%;
+} 
+    
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index b6b5efce6..6dd9e51d7 100755
--- a/css/style.css
+++ b/css/style.css
@@ -17,11 +17,11 @@ body {
  */
 
 
- header{
+ .header{
     top: 0;
     left: 0;
     position: fixed;
-    height: 80px;
+    height: 80px; 
     display: flex;
     justify-content: space-around;
     align-items: center;
@@ -29,9 +29,10 @@ body {
     background-color: 	#F5F5F5;
     z-index: 1000;
 }
-header .logo{
-    margin-left: 60px;
-}
+.header .logo{ 
+    margin-left: 40px;
+    width: 30px; 
+} 
 ul{
     display: flex;
     list-style-type: none;
@@ -50,12 +51,14 @@ ul li a:hover{
 li a:hover::after{
     width: 100%;
 }
-    
+.menu-hamburger{
+    display: none;
+} 
 .content-up{
     padding-top: 80px;
     background-image: url("../img/first-background.jpg");
     width: 100%; 
-    height: 650px;
+    height: 650px; 
     display: flex; 
     flex-direction: column;
     align-items: center; 
@@ -121,6 +124,7 @@ footer{
     bottom: 0;
     width: 100%;
     background-color: white;
+    margin-top: 80px; 
 }
 footer .footer-content h4{
     font-size: large;
@@ -129,8 +133,8 @@ footer .footer-content h4{
 
 footer .footer-content ul li a img {
     border: 1px solid #D3D3D3;
-    border-radius: 40%;
-    padding: 7px ;
+    border-radius: 60%;
+    padding: 5px ;
     opacity: 0.7;
     
 }
@@ -147,9 +151,7 @@ footer .footer-bottom{
     align-items: center; 
 }
 .new-section-img{
-     width: 35%; 
-
-    
+     width: 35%;   
 }
 .new-section .new-right{
     display: flex;
@@ -172,10 +174,85 @@ footer .footer-bottom{
     border: none;
     font-weight: 600;
     text-transform: capitalize;
-    border-radius: 5px;
+    border-radius: 10px;
    
 }
 .new-section span{
     color: #cc5500;
 
 }
+@media screen and (max-width:768px) {
+   .header ul{
+    flex-direction: column; 
+    position: absolute;
+    top: 55px;
+    right: 0;
+    background-color: #F5F5F5;
+    font-size: 20px;
+    width: 100%;
+    text-align: center;
+    display: none ;
+   }
+   .header li{
+    margin-top: 10px;
+   }
+    .header .logo{
+    position: absolute;
+    left: 25px;
+    width: 25px;
+   } 
+    .menu-hamburger{
+        display:block;
+        position: absolute;
+        top: 25px;
+        right: 20px;
+    } 
+    .active{
+        display: block;
+    }
+    .content-up{
+      background-size: 100% 100%;
+    }
+    .content-up h1 {
+        align-items: center;
+        text-align: center;
+        margin-top: 60px;
+        font-size: 50px;
+    }  
+    .content-up p {
+        font-size: 30px;
+    }    
+    .Learn-More-button{
+        padding: 25px 40px;
+        font-size: x-large;
+        font-weight: lighter;
+    }
+    .content-down .row1{
+        flex-direction: column;
+        height: 50%;
+        margin-top: 50px;
+        margin-bottom: 50px;
+    }
+    .new-section{
+        flex-direction: column;
+    }
+    .new-section img{
+        width: 100%;
+        height: auto;
+    }
+    .new-section p{
+        margin: 70px 55px ;
+        padding: 25px;
+        text-align: center;
+        font-weight: 400;
+    }
+    .new-section button{
+        display: flex;
+        align-items: center;
+        padding: 25px 65px;
+        margin-bottom: 70px;
+        font-size: x-large;
+        font-weight: 400;
+    }
+
+}
diff --git a/index.html b/index.html
index 510878861..5ca7d5d39 100755
--- a/index.html
+++ b/index.html
@@ -14,23 +14,28 @@
     <!-- 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="logo">
-            <img src="./img/karma-logo.svg" alt="logo" >
-        </div>
-        <div class="container">
-            <ul>
-                <li><a href="index.html" class="current">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="#" class="login_button">login</a></li>
 
-            </ul>
-        </div>
-    </header>
     <main>
+        <div class="header">
+            <div class="logo">
+                <img src="../img/karma-logo.svg" alt="logo" >
+            </div>
+            <div class="container">
+                <div class="nav-list" id="nav-bar" ></div> <!--id="nav-bar"-->
+                <ul>
+                    <li><a href="index.html" class="current">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="#" class="login_button">login</a></li>
+    
+                </ul>
+                <div class="menu-hamburger" id="hamburger-button">
+                    <img src="../level-3/menu-hamburger.svg" alt="" height="35px" width="35px" >
+                </div>
+            </div>
+        </div>
         <div class="content-up">
                 <h1>Introducing Karma</h1>
                 <p>Bring WiFi with you, everywhere you go.</p>
@@ -81,4 +86,11 @@ <h4>Join us on</h4>
         </div>
     </footer>
 </body>
+  <script>
+                const hamburgerButton = document.getElementById('hamburger-button');
+                const navList = document.getElementById('nav-bar');
+                hamburgerButton.addEventListener('click', ()=>{
+                    navList.classList.toggle('active');
+                })
+            </script>      
 </html>
diff --git a/store.html b/store.html
index ade4306f1..87ee9b27b 100644
--- a/store.html
+++ b/store.html
@@ -11,11 +11,14 @@
         <link rel="shortcut icon" type="image/x-icon"  href="favicon.ico">
     </head>
     <body>
-            <header>
+           
+        <main>
+            <div class="header">
                 <div class="logo">
-                    <img src="./img/karma-logo.svg" alt="logo" width="30px" height="30px">
+                    <img src="../img/karma-logo.svg" alt="logo" >
                 </div>
                 <div class="container">
+                    <div class="nav-list" id="nav-bar" ></div> 
                     <ul>
                         <li><a href="index.html" class="current">Meet Karma</a></li>
                         <li><a href="#">How it works</a></li>
@@ -23,31 +26,33 @@
                         <li><a href="#">Blog</a></li>
                         <li><a href="#">Help</a></li>
                         <li><a href="#" class="login_button">login</a></li>
-
+        
                     </ul>
+                    <div class="menu-hamburger" id="hamburger-button">
+                        <img src="../level-3/menu-hamburger.svg" alt="" height="35px" width="35px" >
+                    </div>
                 </div>
-            </header>
-        <main>
+            </div>
                 <img class="right-image" src="./level-2/store-image_by-andrew-neel-unsplash.jpg" alt="" >
                 <div class="store-form">
                     <h1>Order your Karma wifi divice today!</h1> 
                     <form action="#">
                         <div class="input-group">
                             <div class="input-box">
-                                <label class="details">First Name*</label>
+                                <label >First Name*</label>
                                 <input type="text" placeholder="" required>
                             </div>
                             <div class="input-box">
-                                <label class="details">Last Name*</label>
+                                <label >Last Name*</label>
                                 <input type="text" placeholder="" required>
                             </div>
                         </div>
                         <div class="input-box">
-                            <label class="details">Adress*</label>
+                            <label >Adress*</label>
                             <input type="email" placeholder="" required>
                         </div>
                         <div class="input-box">
-                            <label class="details">Adress2*</label>
+                            <label>Adress2*</label>
                             <input type="email" placeholder="" required>
                         </div>
                         <div class="input-group">
@@ -63,10 +68,12 @@ <h1>Order your Karma wifi divice today!</h1>
                             </div>
                             <div class="input-box">
                                 <label class="details">Post code*</label>
-                                <input type="text" placeholder="" required>
+                                <div class="postCode">
+                                    <input type="text" placeholder=""  required>
+                                </div>
                             </div>
                         </div>
-                            <label class="details">Select Color</label>
+                            <label >Select Color</label>
                             <div class="radio-group">
                                 <label class="radio">
                                     <input type="radio" value="Karma-orange" name="color" >
@@ -82,7 +89,7 @@ <h1>Order your Karma wifi divice today!</h1>
                                 </label>
                             </div>
                         <div class="check-box">
-                            <label class="check">
+                            <label >
                                 <input type="checkbox" > 
                                 <div class="checkmark"></div>
                                 <p class="conditions">By placing your order you agree to <span class="orange-codition"><u>Karma's Terms and Conditions</u></span>  *</p>