diff --git a/assets/css/style.css b/assets/css/style.css
index f621354..b727cf9 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -52,7 +52,7 @@ header.hero{
 .hero::before {
     content: '';
     position: absolute;
-    background: rgba(0, 0, 0, 0.6);
+    background: rgba(73, 56, 56, 0.6);
     top: 0;
     left: 0;
     width: 100%;
@@ -227,7 +227,6 @@ header.hero{
     justify-content:space-between;
     padding: .3rem;
     transition: all .3s ease-in;
-    opacity: 1;
 }
 
 
@@ -248,6 +247,79 @@ header.hero{
     width: 80%;
 }
 
+/* about us  */
+#about-us{
+    margin: 1rem 2rem;
+    border-radius: 10px;
+    padding: 1rem;
+    display: flex;
+    justify-content: space-between;
+}
+
+#about-us .flex-items{
+   display: flex;
+   flex-direction: column;
+   width: 50%;
+}
+
+#contact-us{
+    margin: 1rem 2rem;
+    border-radius: 10px;
+    padding: 1rem;
+}
+
+#contact-us .form-control{
+    margin-top: .5rem;
+    display: flex;
+    flex-direction: column;
+    max-width: 60%;
+    line-height: 1.5;
+    margin-bottom: .5rem;
+}
+#contact-us .form-control label{
+    font-size: large;
+    font-weight: 600;
+    margin: .3rem 0;
+}
+
+#contact-us .form-control input,#contact-us .form-control textarea{
+    line-height: 2;
+    padding: .3rem;
+    border-radius: 10px;
+}
+
+/* main footer */
+#main-footer{
+    padding: 1rem;
+}
+
+#main-footer .social{
+    display: flex;
+    justify-content: center;
+    gap: 2rem;
+}
+
+#main-footer .social a{
+    text-decoration: none;
+    color: #f4f4f4;
+}
+
+#main-footer .footer-content{
+    width: 40%;
+}
+
+#main-footer .legal{
+    margin-top: .2rem;
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+}
+
+#main-footer .legal a{
+    text-decoration: none;
+    color: #f4f4f4;
+}
+
 /* utilities */
 
 .container{
diff --git a/assets/js/script.js b/assets/js/script.js
index 74cc0d0..9927605 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -11,7 +11,7 @@ centralEu.addEventListener('click', () => {
     panels.forEach(panel => panel.classList.add('hide'));
 
     panels[0].classList.toggle('hide');
-    
+
 });
 
 easternEu.addEventListener('click', () => {
@@ -25,3 +25,57 @@ asia.addEventListener('click', () => {
 
     panels[2].classList.toggle('hide');
 });
+
+
+
+function submitToAPI(e) {
+    e.preventDefault();
+    var URL = "https://jnr9lnb7cg.execute-api.us-east-1.amazonaws.com/prod/contact-us";
+
+    var Namere = /[A-Za-z]{1}[A-Za-z]/;
+    if (!Namere.test($("#name-input").val())) {
+        alert("Name can not less than 2 char");
+        return;
+    }
+
+    if ($("#email-input").val() == "") {
+        alert("Please enter your email id");
+        return;
+    }
+
+    var reeamil = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/;
+    if (!reeamil.test($("#email-input").val())) {
+        alert("Please enter valid email address");
+        return;
+    }
+
+    var name = $("#name-input").val();
+    var email = $("#email-input").val();
+    var desc = $("#description-input").val();
+    var data = {
+        name: name,
+        email: email,
+        desc: desc
+    };
+
+    $.ajax({
+        type: "POST",
+        url: URL,
+        dataType: "json",
+        crossDomain: "true",
+        contentType: "application/json; charset=utf-8",
+        data: JSON.stringify(data),
+
+
+        success: function () {
+            // clear form and show a success message
+            alert("Your message sent SucessFully !");
+            document.getElementById("contact-form").reset();
+            location.reload();
+        },
+        error: function () {
+            // show an error message
+            alert("There was some error , try dropping us an email");
+        }
+    });
+}
diff --git a/index.html b/index.html
index 578805a..0ecd9cc 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,12 @@
       rel="stylesheet"
     />
     <link rel="stylesheet" href="./assets/css/style.css" />
-    <script src="./assets/js/script.js" defer></script>
+    <link
+      rel="stylesheet"
+      media="screen and (max-width: 768px)"
+      href="./css/mobile.css"
+    />
+   
   </head>
   <body>
     <header class="hero">
@@ -33,12 +38,13 @@
           <ul id="menu">
             <li><a href="#services">Services</a></li>
             <li><a href="#key-markets">KeyMarkets</a></li>
-            <li><a href="#about">About Us</a></li>
-            <li><a href="">Contact</a></li>
+            <li><a href="#about-us">About Us</a></li>
+            <li><a href="#contact-us">Contact</a></li>
           </ul>
           <div id="lang">
             <a href="">EN</a>
             <a href="">RU</a>
+            <a href="">LV</a>
           </div>
         </div>
 
@@ -64,7 +70,7 @@ <h1>
           </div>
         </div>
 
-        <a href="#about" class="btn"
+        <a href="#contact-us" class="btn"
           ><i class="fas fa-chevron-right"></i> Contact Us</a
         >
       </div>
@@ -136,7 +142,7 @@ <h3 class="text-sports bg-dark">Import/Export</h3>
           </p>
         </div>
       </section>
-
+      <!-- key markets -->
       <section id="key-markets" class="bg-light">
         <h2>Our Key Markets</h2>
         <ul>
@@ -144,7 +150,7 @@ <h2>Our Key Markets</h2>
           <button class="btn btn-primary">Eastern Europe</button>
           <button class="btn btn-secondary">China</button>
         </ul>
-        <div class="panel eu">
+        <div class="panel eu ">
           <div class="map-img eu"></div>
           <p class="eu bg-dark">
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt
@@ -153,7 +159,7 @@ <h2>Our Key Markets</h2>
             <button class="btn">Next</button>
           </p>
         </div>
-        <div class="panel ceu hide">
+        <div class="panel ceu hide ">
           <div class="map-img eu"></div>
           <p class="eu bg-primary">
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt
@@ -170,6 +176,60 @@ <h2>Our Key Markets</h2>
           </p>
         </div>
       </section>
+
+      <section id="about-us" class="bg-light">
+        
+        <div class="flex-items">
+          <h2>About Us</h2>
+          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error aut dignissimos voluptates ipsa cumque fuga quam ipsum, numquam placeat nesciunt, beatae voluptatum id. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam iste quidem saepe obcaecati voluptate ipsam, doloremque beatae reiciendis, eum dignissimos nam, quisquam alias vero.
+          </p>
+        </div>
+        <img src="./assets/images/arving-logo.jpg" alt="">
+      </section>
+
+      <section id="contact-us" class="bg-light">
+        <h2> Book Your Free Business Consultation </h2>
+
+        <form id="contact-form" method="post">
+          <div class="form-control">
+            <label for="Name"> Your Name</label>
+            <input id="name-input" type="text" name="name" placeholder="Your Name so we know who you are !">
+            <label for="Email"> Your Email</label>
+            <input type="email" id="email-input" name="email" id="email" placeholder="So we can connect !">
+            <label for="message">Your Message</label>
+            <textarea name="message" id="description-input" placeholder="Your Message to Us !" rows="5"></textarea>
+          </div>
+
+          <button class="btn" onClick="submitToAPI(event)">Submit</button>
+        </form>
+
+
+      </section>
+
     </main>
+
+    <footer id="main-footer" class="bg-dark">
+      <div class="footer-content">
+        <img src="./assets/images/arving-logo.jpg" alt="">
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint veniam dolorem, dolorum assumenda ad sequi quo id maiores doloremque mollitia?</p>
+      </div>
+
+      <div class="social">
+        <a href=""><i class="fab fa-facebook fa-2x"></i></a>
+        <a href=""><i class="fab fa-twitter fa-2x"></i></a>
+        <a href=""><i class="fab fa-instagram fa-2x"></i></a>
+      </div>
+
+      <div class="legal">
+        <a href="">Privacy</a>
+        <a href="">Legal</a>
+      </div>
+
+  </footer>
+  <script
+  src="https://code.jquery.com/jquery-3.7.1.min.js"
+  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
+  crossorigin="anonymous" defer></script>
+    <script src="./assets/js/script.js" defer></script>
   </body>
 </html>