diff --git a/src/components/FooterSection.module.css b/src/components/FooterSection.module.css
index 42ede3d..16b8da1 100644
--- a/src/components/FooterSection.module.css
+++ b/src/components/FooterSection.module.css
@@ -6,7 +6,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
+  background-color: var(--bg-page);
 }
 
 .bgContainer {
@@ -30,7 +31,7 @@
   flex-direction: column;
   align-items: center;
   text-align: center;
-  margin-top: -60px; /* aligns with visual layout */
+  margin-top: 84px;
 }
 
 .ctaTitle {
@@ -46,8 +47,8 @@
   line-height: var(--line-height-body-large);
   color: var(--text-secondary);
   font-weight: 500;
-  letter-spacing: 0.04em;
-  margin-bottom: 40px;
+  letter-spacing: var(--letter-spacing-eyebrow);
+  margin-bottom: 24px;
 }
 
 .socialRow {
@@ -63,44 +64,37 @@
   gap: 12px;
   color: var(--text-primary);
   text-decoration: none;
-  transition: transform 0.2s ease;
+  transition: color 0.2s ease, transform 0.2s ease;
 }
 
 .socialItem:hover {
-  transform: translateY(-4px);
+  color: var(--accent-default);
+  transform: translateY(-2px);
 }
 
-.iconCircle {
+.socialItem:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 6px;
+  border-radius: var(--radius-sm);
+}
+
+.socialIcon {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--size-social-button);
-  height: var(--size-social-button);
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.6);
-  backdrop-filter: blur(12px);
-  border: 1px solid var(--border-default);
-  color: var(--text-primary);
-  box-shadow: 0 4px 12px var(--shadow-color);
-  transition: all 0.2s ease;
+  width: 48px;
+  height: 48px;
 }
 
-.socialItem:hover .iconCircle {
-  border-color: var(--accent-default);
-  color: var(--accent-default);
-  background: rgba(255, 255, 255, 0.9);
+.socialIcon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
 }
 
-[data-theme="dark"] .iconCircle {
-  background: rgba(9, 28, 63, 0.7);
-  border-color: var(--border-default);
-  color: var(--text-primary);
-}
-
-[data-theme="dark"] .socialItem:hover .iconCircle {
-  background: rgba(16, 63, 127, 0.9);
-  border-color: var(--accent-default);
-  color: #ffffff;
+.giteaCutout {
+  fill: var(--bg-page);
 }
 
 .socialLabel {
diff --git a/src/components/FooterSection.tsx b/src/components/FooterSection.tsx
index b113b1d..313c4ff 100644
--- a/src/components/FooterSection.tsx
+++ b/src/components/FooterSection.tsx
@@ -2,10 +2,35 @@
 
 import React from 'react';
 import Image from 'next/image';
-import { Phone, Send, Coffee } from 'lucide-react';
 import { useTheme } from '@/context/ThemeContext';
 import styles from './FooterSection.module.css';
 
+const PhoneIcon = () => (
+  <svg viewBox="2 2 20 20" aria-hidden="true">
+    <path d="M6.62 10.79a15.46 15.46 0 0 0 6.59 6.59l2.2-2.2a1.02 1.02 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2Z" />
+  </svg>
+);
+
+const LinkedInIcon = () => (
+  <svg viewBox="0 0 448 512" aria-hidden="true">
+    <path d="M100.28 448H7.4V148.9h92.88ZM53.79 108.1C24.09 108.1 0 83.5 0 53.8A53.79 53.79 0 0 1 107.58 53.8c0 29.7-24.09 54.3-53.79 54.3ZM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448Z" />
+  </svg>
+);
+
+const GiteaIcon = () => (
+  <svg viewBox="0 0 640 640" aria-hidden="true">
+    <path d="M622.7 149.8c-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.3.3-26.5.6-39.6.7v117.2l-16.6-7.9-.1-109.2c-29 .4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-.6-22.5-2.1-39 1.5-8.7 1.8-33.5 7.4-53.8 26.9-45 40.1-33.5 103.9-32.1 113.5 1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4s12.9-13.8 30.9-45.3c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6ZM125.6 353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1s7.1 59.4 15.7 94.2c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1Zm300.3 107.6s-6.1 14.5-19.6 15.4c-5.8.4-10.3-1.2-10.3-1.2s-.3-.1-5.3-2.1l-112.9-55s-10.9-5.7-12.8-15.6c-2.2-8.1 2.7-18.1 2.7-18.1L322 273s4.8-9.7 12.2-13c.6-.3 2.3-1 4.5-1.5 8.1-2.1 18 2.8 18 2.8L467.4 315s12.6 5.7 15.3 16.2c1.9 7.4-.5 14-1.8 17.2-6.3 15.4-55 113.1-55 113.1Z" />
+    <path className={styles.giteaCutout} d="m395.9 484.2-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5 21.2-17.9 33.8-11.8l27.1 13-.1-109.2 16.7-.1.1 117.1s57.4 24.2 83.1 40.1c3.7 2.3 10.2 6.8 12.9 14.4 2.1 6.1 2 13.1-1 19.3l-61 126.9c-6.2 12.7-21.4 18.1-33.9 12Z" />
+    <path d="M326.8 380.1a18 18 0 1 0 14.5 28.4l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6a18 18 0 1 0 16.6 5.9c5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3l14.1-29-12.2-6.1-14.5 29.5c-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8l-24.6 50.4Z" />
+  </svg>
+);
+
+const TelegramIcon = () => (
+  <svg viewBox="0 32 448 448" aria-hidden="true">
+    <path d="M446.7 98.6 379.1 417.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-76-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284.3 16.2 252.5c-22.1-6.9-22.5-22.1 4.6-32.7L418 66.8c18.4-6.9 34.5 4.1 28.7 31.8Z" />
+  </svg>
+);
+
 export const FooterSection: React.FC = () => {
   const { theme } = useTheme();
 
@@ -19,7 +44,8 @@ export const FooterSection: React.FC = () => {
               ? '/assets/footer-background-dark.png'
               : '/assets/footer-background 1.png'
           }
-          alt="Footer mountains background"
+          alt=""
+          aria-hidden="true"
           fill
           className={styles.bgImage}
         />
@@ -38,10 +64,8 @@ export const FooterSection: React.FC = () => {
         {/* 4 Social / Contact Links */}
         <div className={styles.socialRow}>
           {/* Phone */}
-          <a href="tel:+989388263077" className={styles.socialItem}>
-            <div className={styles.iconCircle}>
-              <Phone size={24} />
-            </div>
+          <a href="tel:+989388263077" className={styles.socialItem} aria-label="Call 09388263077">
+            <span className={styles.socialIcon}><PhoneIcon /></span>
             <span className={styles.socialLabel}>09388263077</span>
           </a>
 
@@ -52,11 +76,7 @@ export const FooterSection: React.FC = () => {
             rel="noopener noreferrer"
             className={styles.socialItem}
           >
-            <div className={styles.iconCircle}>
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.46 8.76a1.64 1.64 0 0 0 1.64-1.64A1.64 1.64 0 0 0 6.46 5.5a1.64 1.64 0 0 0-1.64 1.62c0 .9.74 1.64 1.64 1.64m1.39 9.74v-8.37H5.07v8.37h2.78Z" />
-              </svg>
-            </div>
+            <span className={styles.socialIcon}><LinkedInIcon /></span>
             <span className={styles.socialLabel}>@amiirkhl</span>
           </a>
 
@@ -67,9 +87,7 @@ export const FooterSection: React.FC = () => {
             rel="noopener noreferrer"
             className={styles.socialItem}
           >
-            <div className={styles.iconCircle}>
-              <Coffee size={24} />
-            </div>
+            <span className={styles.socialIcon}><GiteaIcon /></span>
             <span className={styles.socialLabel}>git.amiirkhl.ir</span>
           </a>
 
@@ -80,9 +98,7 @@ export const FooterSection: React.FC = () => {
             rel="noopener noreferrer"
             className={styles.socialItem}
           >
-            <div className={styles.iconCircle}>
-              <Send size={24} />
-            </div>
+            <span className={styles.socialIcon}><TelegramIcon /></span>
             <span className={styles.socialLabel}>@amiirkhl</span>
           </a>
         </div>