diff --git a/src/assets/styles/style.css b/src/assets/styles/style.css
index 677c62c9..3780fbed 100644
--- a/src/assets/styles/style.css
+++ b/src/assets/styles/style.css
@@ -284,7 +284,10 @@ button, a { transition: var(--transition); }
   #HEADER
 \*-----------------------------------*/
 
-.header-contact { display: none; }
+.header-contact { 
+  display: none;
+  white-space: nowrap;
+}
 
 .header {
   background: var(--alice-blue-1);
@@ -434,7 +437,7 @@ button, a { transition: var(--transition); }
   display: grid;
   grid-template-columns: 35% 45%;
   align-items: center;
-  width: 100%;
+  width: 100%;  
  }
 
 
@@ -1137,7 +1140,7 @@ button, a { transition: var(--transition); }
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
-  align-items: center;
+  align-items: flex-start;
   row-gap: 50px;
 }
 
@@ -1198,18 +1201,23 @@ button, a { transition: var(--transition); }
 }
 
 .social-list {
-  display: flex;
-  align-items: center;
+  display: grid;
+  grid-template-columns: repeat(2 , 1fr); 
+  align-items: start;
   gap: 20px;
   margin-bottom: 20px;
 }
 
 .social-link {
-  font-size: 35px;
+  display: flex;  
+  align-items: center;
+  gap: 1rem;
+  font-size: 18px;
 }
 
 .social-link ion-icon {
   --ionicon-stroke-width: 40px;
+  font-size: 30px;
 }
 
 .social-link:is(:hover, :focus) {
@@ -1219,6 +1227,9 @@ button, a { transition: var(--transition); }
 .copyright {
   font-size: var(--fs-6);
 }
+#copyright-year{
+  display: inline;
+}
 
 .copyright > a {
   display: inline-flex;
@@ -1430,9 +1441,8 @@ button, a { transition: var(--transition); }
   .footer-text { max-width: 90%; }
 
   .footer-bottom {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: space-between;
+    display: flex; 
+    justify-content: center;
     align-items: center;
     padding-block: 30px;
   }
@@ -1440,6 +1450,42 @@ button, a { transition: var(--transition); }
   .social-list { margin-bottom: 0; }
 
 }
+/*
+  * responsive for max-width 1226 for hero banner 
+ */
+ @media (max-width: 1226px) {
+  .hero-banner{  
+    background-size: contain;
+    background-position: center left;
+  }
+ }
+ @media (max-width: 1074px) {
+  .hero-form{
+    display: flex !important;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    width: 400px !important;
+  }
+  .hero-banner{
+    background-position: center left;
+    background-size: contain;
+    width: 57%;
+    height: 108vh;
+    top: 22px;
+    left: 42%;
+  }
+  
+ }
+ @media (max-width:998px) and (min-width:768px) {
+  .hero-form{
+    display: none !important;
+  }
+   .hero-content{
+    position: relative;
+    bottom: 81px;
+  }
+ }
 
 
 
diff --git a/src/index.html b/src/index.html
index 39791622..abeab23f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -528,7 +528,7 @@
           <ion-icon name="person-outline"></ion-icon>
         </a>
 
-        <button class="btn" id="theme-toggle" aria-label="Toggle dark mode" title="Toggle theme" style="min-width:40px;min-height:40px;display:flex;align-items:center;gap:8px;padding-inline:10px;">
+        <button class="btn" id="theme-toggle" aria-label="Toggle dark mode" title="Toggle theme" style="min-width:71px;min-height:40px;display:flex;align-items:center;gap:8px;padding-inline:10px;">
           <ion-icon id="theme-toggle-icon" name="moon-outline"></ion-icon>
           <span id="theme-toggle-text">Dark</span>
         </button>
@@ -1750,66 +1750,58 @@ <h2 id="footer-faq-title" class="h2 section-title" style="color:#e2e8f0; text-al
             <a href="./tandc.html" class="footer-link">Terms & conditions</a>
           </li>
 
-        </ul>
-
-        <ul class="footer-list">
+        </ul> 
 
+        <ul class="footer-list"> 
           <li>
-            <p class="footer-list-title"> </p>
+            <p class="footer-list-title">Social Links</p>
           </li>
 
-        </ul>
-
-      </div>
-
-      <div class="footer-bottom">
-
-        <ul class="social-list"> 
-
+          <div class="social-list">
           <li>
             <a href="#" class="social-link">
-              <ion-icon name="logo-facebook"></ion-icon>
+              <ion-icon name="logo-facebook"></ion-icon>Facebook
             </a>
           </li>
 
           <li>
             <a href="https://www.instagram.com/akashh_shelke/" class="social-link" target="_blank">
-              <ion-icon name="logo-instagram"></ion-icon>
+              <ion-icon name="logo-instagram"></ion-icon>Instagram
             </a>
           </li>
 
           <li>
             <a href="https://x.com/akashshelke07" class="social-link" target="_blank">
-              <ion-icon name="logo-twitter"></ion-icon>
+              <ion-icon name="logo-twitter"></ion-icon>Twitter
             </a>
           </li>
 
           <li>
             <a href="https://www.linkedin.com/in/akash-shelke-5b1520259/?originalSubdomain=in" class="social-link" target="_blank">
-              <ion-icon name="logo-linkedin"></ion-icon>
+              <ion-icon name="logo-linkedin"></ion-icon>Linkdin
             </a>
           </li>
 
           <li>
             <a href="#" class="social-link">
-              <ion-icon name="logo-github"></ion-icon>
+              <ion-icon name="logo-github"></ion-icon>Github
             </a>
           </li>
 
           <li>
             <a href="#" class="social-link">
-              <ion-icon name="mail-outline"></ion-icon>
-            </a>
-          </li>
-
-          <li>
-            <a href="https://github.com/InnoWebLabs/Vehigo?tab=readme-ov-file" class="social-link" target="_blank">
-              <ion-icon name="logo-github"></ion-icon>
+              <ion-icon name="mail-outline"></ion-icon>Email 
             </a>
           </li>
+           </div>
+ 
 
         </ul>
 
+      </div>
+
+      <div class="footer-bottom">
+
         <p class="copyright">
           &copy; <span id="copyright-year"></span> <a href="#">VehiGo</a> Contact us through
         </p>