diff --git a/src/navigation.ts b/src/navigation.ts
index d45bf76..38a543e 100644
--- a/src/navigation.ts
+++ b/src/navigation.ts
@@ -27,12 +27,12 @@ export const getHeaderData = (lang = 'en') => {
         links: [
           { text: t.navigation.about, href: getPermalink('/aboutme', 'page', lang), isHashLink: false },
           { text: t.navigation.resume, href: getPermalink('/aboutme', 'page', lang) + '#resume', isHashLink: true },
+          { text: t.navigation.skills, href: getPermalink('/aboutme', 'page', lang) + '#skills', isHashLink: true },
           {
             text: t.navigation.certifications,
             href: getPermalink('/aboutme', 'page', lang) + '#certifications',
             isHashLink: true,
           },
-          { text: t.navigation.skills, href: getPermalink('/aboutme', 'page', lang) + '#skills', isHashLink: true },
           {
             text: t.navigation.education,
             href: getPermalink('/aboutme', 'page', lang) + '#education',
diff --git a/src/pages/[lang]/aboutme.astro b/src/pages/[lang]/aboutme.astro
index df6a85f..d7fab46 100644
--- a/src/pages/[lang]/aboutme.astro
+++ b/src/pages/[lang]/aboutme.astro
@@ -417,7 +417,7 @@ const metadata = {
   </Hero>
 
   <!-- Enhanced About Section -->
-  <div class="content-section stagger-animation">
+  <div id="about"class="content-section stagger-animation">
     <Content
       id="about"
       columns={2}
@@ -451,7 +451,7 @@ const metadata = {
   </div>
 
   <!-- Enhanced Work Experience -->
-  <div class="content-section stagger-animation">
+  <div id="resume" class="content-section stagger-animation" >
     <ModernWorkExperience
       id="resume"
       title={t.resume.title}
@@ -472,7 +472,7 @@ const metadata = {
   </div>
 
   <!-- Enhanced Skills Section with Modern Interactive Pills -->
-  <div class="content-section stagger-animation">
+  <div id="skills" class="content-section stagger-animation">
     <ModernSkills
       id="skills"
       title={t.skills.title}
@@ -489,7 +489,7 @@ const metadata = {
   </div>
 
   <!-- Enhanced Certifications with Modern Grid -->
-  <div class="content-section stagger-animation">
+  <div id="certifications" class="content-section stagger-animation">
     <ModernCertifications
       id="certifications"
       title={t.certifications.title}
@@ -508,7 +508,7 @@ const metadata = {
   </div>
 
   <!-- Enhanced Education -->
-  <div class="content-section stagger-animation">
+  <div id="education" class="content-section stagger-animation">
     <ModernEducation
       id="education"
       title={t.education.title}