diff --git a/src/assets/styles/About.module.scss b/src/assets/styles/About.module.scss
index 6ff0af7..63dca84 100644
--- a/src/assets/styles/About.module.scss
+++ b/src/assets/styles/About.module.scss
@@ -1,5 +1,25 @@
 @use './variables' as *;
 
+/* Section styling */
+.sectionTitle {
+  font-size: 2.25rem;
+  margin-bottom: 1.5rem;
+  position: relative;
+  padding-bottom: 1rem;
+  display: inline-block;
+}
+
+.sectionTitle::after {
+  content: "";
+  position: absolute;
+  width: 50px;
+  height: 3px;
+  background: $accent-fire;
+  bottom: 0;
+  left: 0;
+  box-shadow: $glow-effect;
+}
+
 .profileImage {
   width: 100%;
   aspect-ratio: 1/1;
@@ -31,8 +51,8 @@
 .introText {
   font-size: 1.1rem;
   line-height: 1.8;
-  color: var(--text-ash);
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  color: $text-ash;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
 }
 
 .introText p {
@@ -47,7 +67,7 @@
   color: $accent-fire;
 }
 
-.connect-link {
+.connectLink {
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -542,4 +562,57 @@
   color: $text-ash;
   font-size: 0.9rem;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+@media (max-width: 992px) {
+  .pageTitle {
+    font-size: 2.5rem;
+  }
+
+  .timeline:before {
+    left: 2rem;
+  }
+
+  .timelineItem:nth-child(odd) .timeline-content,
+  .timelineItem:nth-child(even) .timeline-content {
+    width: calc(100% - 3rem);
+    margin-left: 3rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .timelineDot {
+    left: 2rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .pageTitle {
+    font-size: 2rem;
+  }
+
+  .introText {
+    margin-top: 2rem;
+  }
+}
+
+@media (max-width: 576px) {
+  .pageTitle {
+    font-size: 1.8rem;
+  }
+
+  .sectionTitle {
+    font-size: 1.8rem;
+  }
+
+  .testimonialAuthor {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .authorInfo {
+    margin-top: 1rem;
+    text-align: center;
+  }
 }
\ No newline at end of file
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index 4dbd0c1..9a760c0 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -48,36 +48,36 @@ export const About = () => {
         <div className="container">
           <div className="row">
             <div className="col-lg-4">
-              <h2 className={`section-title ${style.sectionTitle}`}>The Master Behind the Mask</h2>
-              <div className="profile-image">
+              <h2 className={`${style.sectionTitle}`}>The Master Behind the Mask</h2>
+              <div className={style.profileImage}>
                 <img src="/images/profile.jpg" alt="SecCodeSmith" />
               </div>
             </div>
             <div className="col-lg-8">
-              <div className="intro-text">
-                <p>Greetings, seeker of digital arcana. I am <strong>SecCodeSmith</strong>, a master craftsman of code and conductor of silicon. For over a decade, I have been forging robust solutions across the realms of embedded systems, machine learning, and web development.</p>
+              <div className={style.introText}>
+                <p className={style.introText}>Greetings, seeker of digital arcana. I am <strong>SecCodeSmith</strong>, a master craftsman of code and conductor of silicon. For over a decade, I have been forging robust solutions across the realms of embedded systems, machine learning, and web development.</p>
 
-                <p>My journey began in the depths of <span className="accent">low-level programming</span>, where I learned to bend hardware to my will through carefully crafted instructions. From the arcane energies of microcontrollers to the vast landscapes of cloud architecture, I have honed my skills to create solutions that stand the test of time.</p>
+                <p className={style.introText}>My journey began in the depths of <span className={style.accent}>low-level programming</span>, where I learned to bend hardware to my will through carefully crafted instructions. From the arcane energies of microcontrollers to the vast landscapes of cloud architecture, I have honed my skills to create solutions that stand the test of time.</p>
 
-                <p>What distinguishes my work is the <strong>meticulous attention to security</strong> and performance. Like a blacksmith who understands that a sword's true value lies not just in its edge but in the integrity of its steel, I craft code that is not merely functional but resilient against the chaotic forces of the digital wilderness.</p>
+                <p className={style.introText}>What distinguishes my work is the <strong>meticulous attention to security</strong> and performance. Like a blacksmith who understands that a sword's true value lies not just in its edge but in the integrity of its steel, I craft code that is not merely functional but resilient against the chaotic forces of the digital wilderness.</p>
 
-                <p>Beyond the technical realms, I am a devoted practitioner of open-source sorcery, contributing to projects that empower others to create and innovate. When not at the forge, I can be found exploring the ancient texts of computer science, delving into new programming languages, or mentoring apprentices on their own journey.</p>
+                <p className={style.introText}>Beyond the technical realms, I am a devoted practitioner of open-source sorcery, contributing to projects that empower others to create and innovate. When not at the forge, I can be found exploring the ancient texts of computer science, delving into new programming languages, or mentoring apprentices on their own journey.</p>
 
                 <div className="mt-4">
-                  <a href="#" className="connect-link">
-                    <i className="fab fa-github connect-icon"></i>
+                  <a href="#" className={style.connectLink}>
+                    <i className={`fab fa-github ${style.connectIcon}`}></i>
                     <span>GitHub</span>
                   </a>
-                  <a href="#" className="connect-link">
-                    <i className="fab fa-linkedin connect-icon"></i>
+                  <a href="#" className={style.connectLink}>
+                    <i className={`fab fa-linkedin ${style.connectIcon}`}></i>
                     <span>LinkedIn</span>
                   </a>
-                  <a href="#" className="connect-link">
-                    <i className="fab fa-twitter connect-icon"></i>
+                  <a href="#" className={style.connectLink}>
+                    <i className={`fab fa-twitter ${style.connectIcon}`}></i>
                     <span>Twitter</span>
                   </a>
-                  <a href="#" className="connect-link">
-                    <i className="fas fa-envelope connect-icon"></i>
+                  <a href="#" className={style.connectLink}>
+                    <i className={`fas fa-envelope ${style.connectIcon}`}></i>
                     <span>Email</span>
                   </a>
                 </div>
@@ -92,18 +92,18 @@ export const About = () => {
         <div className="container">
           <div className="row mb-4">
             <div className="col-12">
-              <h2 className={`section-title ${style.sectionTitle}`}>Forging Principles</h2>
+              <h2 className={` ${style.sectionTitle}`}>Forging Principles</h2>
             </div>
           </div>
           <div className={`row g-4 ${style.row}`}>
             {data.coreValues.map((value, index) => (
               <div className="col-md-6 col-lg-3" key={index}>
-                <div className={`value-card h-100 ${style.valueCard}`}>
-                  <div className={`value-icon ${style.valueIcon}`}>
+                <div className={` h-100 ${style.valueCard}`}>
+                  <div className={style.valueIcon}>
                     <i className={value.icon}></i>
                   </div>
-                  <h3 className={`value-title ${style.valueTitle}`}>{value.title}</h3>
-                  <p className={`value-text ${style.valueText}`}>{value.description}</p>
+                  <h3 className={`${style.valueTitle}`}>{value.title}</h3>
+                  <p className={`${style.valueText}`}>{value.description}</p>
                 </div>
               </div>
             ))}
@@ -117,35 +117,37 @@ export const About = () => {
         <div className="container">
           <div className="row mb-4">
             <div className="col-12">
-              <h2 className={`section-title ${style.sectionTitle}`}>Arsenal of Expertise</h2>
+              <h2 className={`${style.sectionTitle}`}>Arsenal of Expertise</h2>
             </div>
           </div>
           <div className="row g-4">
             {data.technicalArsenal.map((value, index) => (
-              <div className="skill-card h-100" key={index}>
-                <div className="skill-header">
-                  <div className="skill-icon">
-                    <i className={value.icon}></i>
+              <div className="col-md-6 col-lg-3" key={index}>
+                <div className={`h-100 ${style.skillCard}`} key={index}>
+                  <div className={`${style.skillHeader}`}>
+                    <div className={`skill-icon ${style.skillIcon}`}>
+                      <i className={value.icon}></i>
+                    </div>
+                    <h3 className={`skill-title ${style.skillTitle}`}>{value.title}</h3>
                   </div>
-                  <h3 className="skill-title">${value.title}</h3>
+                  <ul className="list-unstyled">
+                    {value.skills.map((skillItem, skillIndex) => (
+                      <li className="mb-2" key={skillIndex}>
+                        <i className={`fas fa-check skill-check ${style.skillCheck}`}></i>
+                        <span>{skillItem}</span>
+                      </li>
+                    ))}
+                  </ul>
                 </div>
-                <ul className="list-unstyled">
-                  {value.skills.map((skillItem, skillIndex) => (
-                    <li className="mb-2" key={skillIndex}>
-                      <i className={`fas fa-check skill-check `}></i>
-                      <span>{skillItem}</span>
-                    </li>
-                  ))}
-                </ul>
               </div>
             ))}
 
+          </div>
         </div>
-      </div>
-    </section >
+      </section >
 
-      {/* Professional Journey Section */ }
-      < section className = "py-5 bg-dark" >
+      {/* Professional Journey Section */}
+      < section className="py-5 bg-dark" >
         <div className="container">
           <div className="row mb-5">
             <div className="col-12 text-center">
@@ -210,66 +212,66 @@ export const About = () => {
         </div>
       </section >
 
-  {/* Testimonials Section */ }
-  < section className = "py-5" >
-    <div className="container">
-      <div className="row mb-4">
-        <div className="col-12">
-          <h2 className={`section-title ${style.sectionTitle}`}>Tales from the Guild</h2>
-        </div>
-      </div>
-      <div className="row">
-        <div className="col-lg-8 mx-auto">
-          {/* Testimonial 1 */}
-          <div className="testimonial">
-            <div className="testimonial-content">
-              "Working with SecCodeSmith transformed our approach to IoT security. Their expertise in both embedded systems and network security allowed us to create a solution that our clients trust implicitly. The attention to detail and foresight regarding potential vulnerabilities saved us from what could have been catastrophic security incidents."
-            </div>
-            <div className="d-flex align-items-center gap-3 testimonial-author">
-              <div className="author-avatar">
-                <img src="/images/testimonials/alexandra.jpg" alt="Alexandra Foster" />
-              </div>
-              <div className="author-info">
-                <h4 className="author-name">Alexandra Foster</h4>
-                <div className="author-title">CTO, ConnectedWorld Technologies</div>
-              </div>
+      {/* Testimonials Section */}
+      < section className="py-5" >
+        <div className="container">
+          <div className="row mb-4">
+            <div className="col-12">
+              <h2 className={`section-title ${style.sectionTitle}`}>Tales from the Guild</h2>
             </div>
           </div>
+          <div className="row">
+            <div className="col-lg-8 mx-auto">
+              {/* Testimonial 1 */}
+              <div className="testimonial">
+                <div className="testimonial-content">
+                  "Working with SecCodeSmith transformed our approach to IoT security. Their expertise in both embedded systems and network security allowed us to create a solution that our clients trust implicitly. The attention to detail and foresight regarding potential vulnerabilities saved us from what could have been catastrophic security incidents."
+                </div>
+                <div className="d-flex align-items-center gap-3 testimonial-author">
+                  <div className="author-avatar">
+                    <img src="/images/testimonials/alexandra.jpg" alt="Alexandra Foster" />
+                  </div>
+                  <div className="author-info">
+                    <h4 className="author-name">Alexandra Foster</h4>
+                    <div className="author-title">CTO, ConnectedWorld Technologies</div>
+                  </div>
+                </div>
+              </div>
 
-          {/* Testimonial 2 */}
-          <div className="testimonial">
-            <div className="testimonial-content">
-              "The custom firmware developed by SecCodeSmith for our industrial controllers exceeded all expectations. Not only was the code incredibly efficient, but the documentation was meticulous—something rare in our industry. Three years later, we're still building upon that solid foundation with minimal issues."
-            </div>
-            <div className="d-flex align-items-center gap-3 testimonial-author">
-              <div className="author-avatar">
-                <img src="/images/testimonials/marcus.jpg" alt="Marcus Chen" />
+              {/* Testimonial 2 */}
+              <div className="testimonial">
+                <div className="testimonial-content">
+                  "The custom firmware developed by SecCodeSmith for our industrial controllers exceeded all expectations. Not only was the code incredibly efficient, but the documentation was meticulous—something rare in our industry. Three years later, we're still building upon that solid foundation with minimal issues."
+                </div>
+                <div className="d-flex align-items-center gap-3 testimonial-author">
+                  <div className="author-avatar">
+                    <img src="/images/testimonials/marcus.jpg" alt="Marcus Chen" />
+                  </div>
+                  <div className="author-info">
+                    <h4 className="author-name">Marcus Chen</h4>
+                    <div className="author-title">Lead Engineer, Precision Automation Inc.</div>
+                  </div>
+                </div>
               </div>
-              <div className="author-info">
-                <h4 className="author-name">Marcus Chen</h4>
-                <div className="author-title">Lead Engineer, Precision Automation Inc.</div>
-              </div>
-            </div>
-          </div>
 
-          {/* Testimonial 3 */}
-          <div className="testimonial">
-            <div className="testimonial-content">
-              "I've collaborated with numerous developers over my 20-year career, but SecCodeSmith stands apart for their ability to bridge the gap between theoretical concepts and practical implementation. Their machine learning models for anomaly detection operate efficiently even on our limited hardware, which competitors claimed was impossible."
-            </div>
-            <div className="d-flex align-items-center gap-3 testimonial-author">
-              <div className="author-avatar">
-                <img src="/images/testimonials/sophia.jpg" alt="Sophia Rodriguez" />
-              </div>
-              <div className="author-info">
-                <h4 className="author-name">Sophia Rodriguez</h4>
-                <div className="author-title">Research Director, Advanced Sensing Lab</div>
+              {/* Testimonial 3 */}
+              <div className="testimonial">
+                <div className="testimonial-content">
+                  "I've collaborated with numerous developers over my 20-year career, but SecCodeSmith stands apart for their ability to bridge the gap between theoretical concepts and practical implementation. Their machine learning models for anomaly detection operate efficiently even on our limited hardware, which competitors claimed was impossible."
+                </div>
+                <div className="d-flex align-items-center gap-3 testimonial-author">
+                  <div className="author-avatar">
+                    <img src="/images/testimonials/sophia.jpg" alt="Sophia Rodriguez" />
+                  </div>
+                  <div className="author-info">
+                    <h4 className="author-name">Sophia Rodriguez</h4>
+                    <div className="author-title">Research Director, Advanced Sensing Lab</div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </div>
       </section >
     </>
   );