diff --git a/components/footer.html b/components/footer.html
index 76e008a..0a6ae71 100644
--- a/components/footer.html
+++ b/components/footer.html
@@ -1,14 +1,94 @@
 <footer class="site-footer">
   <div class="container">
     <div class="row">
-      <div class="col-lg-12 col-12">
-        <div class="copyright-text-wrap">
-          <p class="mb-0">
-            <span class="copyright-text">Copyright © 2026 <a href="#">Mohammed Al-yaseen</a>. All rights reserved.</span>
-            <!-- <span class="copyright-text">Design: <a href="https://templatemo.com" target="_blank">TemplateMo</a></span> -->
+      <!-- Footer Brand & Description -->
+      <div class="col-lg-4 col-md-6 col-12 mb-4 mb-lg-0">
+        <div class="footer-brand">
+          <h3 class="footer-brand-name">Mohammed Al-yaseen</h3>
+          <p class="footer-description">
+            Senior Frontend Developer passionate about building exceptional user experiences 
+            and scalable web applications.
           </p>
         </div>
       </div>
+
+      <!-- Quick Links -->
+      <div class="col-lg-2 col-md-6 col-12 mb-4 mb-lg-0">
+        <h4 class="footer-heading">Quick Links</h4>
+        <ul class="footer-menu">
+          <li class="footer-menu-item">
+            <a href="#section_1" class="footer-menu-link click-scroll">Home</a>
+          </li>
+          <li class="footer-menu-item">
+            <a href="#section_2" class="footer-menu-link click-scroll">About</a>
+          </li>
+          <li class="footer-menu-item">
+            <a href="#section_3" class="footer-menu-link click-scroll">Services</a>
+          </li>
+          <li class="footer-menu-item">
+            <a href="#section_4" class="footer-menu-link click-scroll">Projects</a>
+          </li>
+          <li class="footer-menu-item">
+            <a href="#section_5" class="footer-menu-link click-scroll">Contact</a>
+          </li>
+        </ul>
+      </div>
+
+      <!-- Contact Info -->
+      <div class="col-lg-3 col-md-6 col-12 mb-4 mb-lg-0">
+        <h4 class="footer-heading">Get In Touch</h4>
+        <ul class="footer-contact">
+          <li class="footer-contact-item">
+            <i class="bi bi-envelope-fill"></i>
+            <a href="mailto:mohammed.o.alyaseen@gmail.com">mohammed.o.alyaseen@gmail.com</a>
+          </li>
+          <li class="footer-contact-item">
+            <i class="bi bi-telephone-fill"></i>
+            <a href="tel:+963-962-469-482">+963-962-469-482</a>
+          </li>
+          <li class="footer-contact-item">
+            <i class="bi bi-geo-alt-fill"></i>
+            <span>Damascus, Syria</span>
+          </li>
+        </ul>
+      </div>
+
+      <!-- Social Media -->
+      <div class="col-lg-3 col-md-6 col-12">
+        <h4 class="footer-heading">Follow Me</h4>
+        <div class="footer-social">
+          <ul class="social-icon">
+            <li class="social-icon-item">
+              <a href="https://www.linkedin.com/in/mohammed-al-yaseen-79b056161/" 
+                 class="social-icon-link" 
+                 target="_blank" 
+                 aria-label="LinkedIn">
+                <i class="bi bi-linkedin"></i>
+              </a>
+            </li>
+            <li class="social-icon-item">
+              <a href="https://github.com/mohammed-alyaseen" 
+                 class="social-icon-link" 
+                 target="_blank" 
+                 aria-label="GitHub">
+                <i class="bi bi-github"></i>
+              </a>
+            </li>
+            <li class="social-icon-item">
+              <a href="https://www.facebook.com/profile.php?id=100010330412662" 
+                 class="social-icon-link" 
+                 target="_blank" 
+                 aria-label="Facebook">
+                <i class="bi bi-facebook"></i>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <!-- Copyright -->
+   
     </div>
   </div>
 </footer> 
\ No newline at end of file
diff --git a/components/hero.html b/components/hero.html
index 19cc17f..1dad5f0 100644
--- a/components/hero.html
+++ b/components/hero.html
@@ -1,11 +1,13 @@
 <section class="hero d-flex justify-content-center align-items-center" id="section_1">
   <div class="container">
     <div class="row">
-      <div class="col-lg-7 col-12">
+      <div class="col-lg-12 col-12">
         <div class="hero-text">
           <div class="hero-title-wrap d-flex align-items-center mb-4">
-            <img src="images/happy-bearded-young-man.jpg" class="avatar-image avatar-image-large img-fluid" alt="" />
-            <h5 class="hero-title ms-3 mb-0">Hello friend!</h5>
+            <div class="hero-image-wrapper position-relative me-4">
+              <img src="images/happy-bearded-young-man.jpg" class="hero-image img-fluid object-fit-cover" alt="" />
+            </div>
+            <h5 class="hero-title mb-0">Hello friend!</h5>
           </div>
 
           <h2 class="mb-4">Senior Frontend Engineer with 5+ years of experience</h2>
@@ -14,14 +16,10 @@
           </p>
         </div>
       </div>
-
-      <div class="col-lg-5 col-12 position-relative">
-        <img src="images/National Geographic on Instagram Photo by Stephe.jpg" class="hero-image img-fluid" alt="" />
-      </div>
     </div>
   </div>
 
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
-    <path fill="#535da1" fill-opacity="1" d="M0,160L24,160C48,160,96,160,144,138.7C192,117,240,75,288,64C336,53,384,75,432,106.7C480,139,528,181,576,208C624,235,672,245,720,240C768,235,816,213,864,186.7C912,160,960,128,1008,133.3C1056,139,1104,181,1152,202.7C1200,224,1248,224,1296,197.3C1344,171,1392,117,1416,90.7L1440,64L1440,0L1416,0C1392,0,1344,0,1296,0C1248,0,1200,0,1152,0C1104,0,1056,0,1008,0C960,0,912,0,864,0C816,0,768,0,720,0C672,0,624,0,576,0C528,0,480,0,432,0C384,0,336,0,288,0C240,0,192,0,144,0C96,0,48,0,24,0L0,0Z"></path>
+    <path fill="#6c757d" fill-opacity="1" d="M0,160L24,160C48,160,96,160,144,138.7C192,117,240,75,288,64C336,53,384,75,432,106.7C480,139,528,181,576,208C624,235,672,245,720,240C768,235,816,213,864,186.7C912,160,960,128,1008,133.3C1056,139,1104,181,1152,202.7C1200,224,1248,224,1296,197.3C1344,171,1392,117,1416,90.7L1440,64L1440,0L1416,0C1392,0,1344,0,1296,0C1248,0,1200,0,1152,0C1104,0,1056,0,1008,0C960,0,912,0,864,0C816,0,768,0,720,0C672,0,624,0,576,0C528,0,480,0,432,0C384,0,336,0,288,0C240,0,192,0,144,0C96,0,48,0,24,0L0,0Z"></path>
   </svg>
 </section> 
\ No newline at end of file
diff --git a/css/templatemo-first-portfolio-style.css b/css/templatemo-first-portfolio-style.css
index d383c8c..f6dd5fd 100644
--- a/css/templatemo-first-portfolio-style.css
+++ b/css/templatemo-first-portfolio-style.css
@@ -11,7 +11,7 @@ https://templatemo.com/tm-578-first-portfolio
 -----------------------------------------*/
 :root {
   --white-color: #ffffff;
-  --primary-color: #535da1;
+  --primary-color: #6c757d;
   --secondary-color: #14b789;
   --section-bg-color: #f9f9f9;
   --dark-color: #000000;
@@ -314,7 +314,7 @@ strong {
 }
 
 .navbar.scrolled {
-  background: rgba(83, 93, 161, 0.95);
+  background: var(--primary-color);
   backdrop-filter: blur(10px);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   padding: 10px 0;
@@ -515,12 +515,34 @@ strong {
   pointer-events: none;
 }
 
+.hero-image-wrapper {
+  position: relative;
+  width: 340px;
+  height: 340px;
+  flex-shrink: 0;
+}
+
+.hero-image-wrapper .hero-image {
+  position: relative !important;
+  top: auto !important;
+  right: auto !important;
+  left: auto !important;
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: cover;
+  border-radius: 50%;
+  border: 3px solid var(--white-color);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: auto !important;
+  margin: 0 !important;
+}
+
 .hero-image {
   position: absolute;
   z-index: 22;
   top: -44px;
   width: 340px;
-  height: 340px;
+  height: 340px !important;
   right: 67px;
   border-radius: 100%;
   border: 5px solid #FFF;
@@ -1274,10 +1296,26 @@ strong {
   SITE FOOTER              
 -----------------------------------------*/
 .site-footer {
+  background: linear-gradient(135deg, rgba(83, 93, 161, 0.05) 0%, rgba(20, 183, 137, 0.05) 100%);
   border-top: 1px solid var(--border-color);
-  padding-top: 50px;
-  padding-bottom: 50px;
-  text-align: center;
+  padding-top: 60px;
+  padding-bottom: 30px;
+  position: relative;
+  overflow: hidden;
+}
+
+.site-footer::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: linear-gradient(90deg, 
+    transparent 0%, 
+    rgba(20, 183, 137, 0.3) 50%, 
+    transparent 100%
+  );
 }
 
 .site-footer-title {
@@ -1286,52 +1324,324 @@ strong {
   text-transform: uppercase;
 }
 
-.copyright-text-wrap p,
-.copyright-text {
-  font-size: var(--copyright-font-size);
+/* Footer Brand */
+.footer-brand {
+  margin-bottom: 20px;
 }
 
-.copyright-text {
-  /* border-right: 1px solid var(--border-color); */
-  padding-right: 25px;
-  margin-right: 20px;
+.footer-brand-name {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--dark-color);
+  margin-bottom: 12px;
+  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
-.copyright-text-wrap a {
-  font-weight: var(--font-weight-bold);
+.footer-description {
+  font-size: 14px;
+  line-height: 1.7;
+  color: var(--p-color);
+  margin: 0;
 }
 
+/* Footer Headings */
+.footer-heading {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--dark-color);
+  margin-bottom: 20px;
+  position: relative;
+  padding-bottom: 10px;
+}
+
+.footer-heading::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 40px;
+  height: 3px;
+  background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
+  border-radius: 2px;
+}
+
+/* Footer Menu */
 .footer-menu {
   margin: 0;
   padding: 0;
+  list-style: none;
 }
 
 .footer-menu-item {
   list-style: none;
-  display: inline-block;
-  vertical-align: top;
+  display: block;
+  margin-bottom: 10px;
 }
 
 .footer-menu-link {
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius-medium);
-  font-size: var(--copyright-font-size);
-  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--p-color);
+  text-decoration: none;
   display: inline-block;
-  vertical-align: top;
-  text-align: center;
-  margin-right: 10px;
-  margin-bottom: 10px;
-  padding: 6px 14px;
-  min-width: 70px;
-  transition: transform 0.3s ease, color 0.3s ease;
+  transition: all 0.3s ease;
+  position: relative;
+  padding-left: 0;
+}
+
+.footer-menu-link::before {
+  content: '→';
+  position: absolute;
+  left: -20px;
+  opacity: 0;
+  transition: all 0.3s ease;
+  color: var(--secondary-color);
 }
 
 .footer-menu-link:hover {
-  background: var(--secondary-color);
+  color: var(--secondary-color);
+  padding-left: 20px;
+  transform: translateX(5px);
+}
+
+.footer-menu-link:hover::before {
+  opacity: 1;
+  left: 0;
+}
+
+/* Footer Contact */
+.footer-contact {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.footer-contact-item {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 15px;
+  font-size: 14px;
+  color: var(--p-color);
+}
+
+.footer-contact-item i {
+  color: var(--secondary-color);
+  font-size: 18px;
+  margin-right: 12px;
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+
+.footer-contact-item a {
+  color: var(--p-color);
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.footer-contact-item a:hover {
+  color: var(--secondary-color);
+}
+
+.footer-contact-item span {
+  color: var(--p-color);
+}
+
+/* Footer Social */
+.footer-social {
+  margin-top: 10px;
+}
+
+.footer-social .social-icon {
+  display: flex;
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.footer-social .social-icon-item {
+  list-style: none;
+}
+
+.footer-social .social-icon-link {
+  width: 45px;
+  height: 45px;
+  line-height: 45px;
+  text-align: center;
+  border: 2px solid var(--border-color);
+  border-radius: 50%;
+  color: var(--p-color);
+  background: var(--white-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  text-decoration: none;
+  font-size: 18px;
+}
+
+.footer-social .social-icon-link:hover {
+  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
   border-color: transparent;
   color: var(--white-color);
-  transform: translateY(-3px);
+  transform: translateY(-5px) scale(1.1);
+  box-shadow: 0 8px 20px rgba(20, 183, 137, 0.3);
+}
+
+/* Copyright */
+.copyright-text-wrap {
+  margin-top: 40px;
+  padding-top: 30px;
+  border-top: 1px solid var(--border-color);
+  text-align: center;
+}
+
+.copyright-text-wrap p,
+.copyright-text {
+  font-size: 14px;
+  color: var(--p-color);
+  margin: 0;
+}
+
+.copyright-text {
+  padding: 0;
+  margin: 0;
+}
+
+.copyright-text-wrap a {
+  font-weight: 600;
+  color: var(--primary-color);
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.copyright-text-wrap a:hover {
+  color: var(--secondary-color);
+}
+
+/* Footer Responsive Styles */
+@media (max-width: 991px) {
+  .site-footer {
+    padding-top: 50px;
+    padding-bottom: 25px;
+  }
+
+  .footer-brand {
+    text-align: center;
+    margin-bottom: 30px;
+  }
+
+  .footer-heading {
+    text-align: center;
+  }
+
+  .footer-heading::after {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .footer-menu {
+    text-align: center;
+  }
+
+  .footer-menu-item {
+    display: inline-block;
+    margin: 0 8px 10px 8px;
+  }
+
+  .footer-menu-link {
+    padding: 8px 16px;
+    border: 1px solid var(--border-color);
+    border-radius: 20px;
+    background: var(--white-color);
+  }
+
+  .footer-menu-link::before {
+    display: none;
+  }
+
+  .footer-menu-link:hover {
+    padding-left: 16px;
+    transform: none;
+    background: var(--secondary-color);
+    color: var(--white-color);
+    border-color: transparent;
+  }
+
+  .footer-contact {
+    text-align: center;
+  }
+
+  .footer-contact-item {
+    justify-content: center;
+  }
+
+  .footer-social {
+    text-align: center;
+  }
+
+  .footer-social .social-icon {
+    justify-content: center;
+  }
+}
+
+@media (max-width: 767px) {
+  .site-footer {
+    padding-top: 40px;
+    padding-bottom: 20px;
+  }
+
+  .footer-brand-name {
+    font-size: 20px;
+  }
+
+  .footer-description {
+    font-size: 13px;
+  }
+
+  .footer-heading {
+    font-size: 16px;
+    margin-bottom: 15px;
+  }
+
+  .footer-menu-item {
+    display: block;
+    margin: 0 0 8px 0;
+  }
+
+  .footer-menu-link {
+    width: 100%;
+    text-align: center;
+  }
+
+  .footer-contact-item {
+    font-size: 13px;
+    margin-bottom: 12px;
+  }
+
+  .footer-contact-item i {
+    font-size: 16px;
+    margin-right: 10px;
+  }
+
+  .footer-social .social-icon-link {
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    font-size: 16px;
+  }
+
+  .copyright-text-wrap {
+    margin-top: 30px;
+    padding-top: 20px;
+  }
+
+  .copyright-text {
+    font-size: 12px;
+  }
 }
 
 /*---------------------------------------
@@ -1801,7 +2111,7 @@ html {
 }
 
 .navbar.scrolled {
-    background-color: rgba(83, 93, 161, 0.95);
+    background-color: var(--primary-color);
     box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 }
 
diff --git a/images/happy-bearded-young-man.jpg b/images/happy-bearded-young-man.jpg
index 65b8dc9..629825e 100644
Binary files a/images/happy-bearded-young-man.jpg and b/images/happy-bearded-young-man.jpg differ