diff --git a/index.html b/index.html
index f8b29c7..e22d200 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,11 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/public/assets/images/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
+
     <title>Giovanni Josserand</title>
   </head>
   <body>
diff --git a/src/components/Experiences.jsx b/src/components/Experiences.jsx
index 8a79d11..a42d751 100644
--- a/src/components/Experiences.jsx
+++ b/src/components/Experiences.jsx
@@ -30,7 +30,7 @@ function Experiences() {
 
     return (
         <section id="experiences-section">
-            <h1>Experiences</h1>
+            <h1 className="section-title">Experiences</h1>
             <div className="experiences-container">
                 {experiencesData.map((exp) => (
                     <SingleExperience experience={exp}/>
diff --git a/src/components/Projects.jsx b/src/components/Projects.jsx
index 7f0588f..f939bb3 100644
--- a/src/components/Projects.jsx
+++ b/src/components/Projects.jsx
@@ -29,7 +29,7 @@ function Projects() {
 
     return (
         <section id="projects-section">
-            <h1>Projects</h1>
+            <h1 className="section-title">Projects</h1>
             <div className="projects-section-list">
                 <SingleProject image={codevProject.image} title={codevProject.title} description={codevProject.description} skills={codevProject.skills} color={codevProject.color} nbImage={codevProject.nbImage}/>
                 <SingleProject image={SAECProject.image} title={SAECProject.title} description={SAECProject.description} skills={SAECProject.skills} color={SAECProject.color} nbImage={SAECProject.nbImage}/>
diff --git a/src/components/Skills.jsx b/src/components/Skills.jsx
index d82b41a..5fef275 100644
--- a/src/components/Skills.jsx
+++ b/src/components/Skills.jsx
@@ -4,7 +4,7 @@ import "../styles/Skills.css";
 function Skills() {
     return (
         <section id="skills-section">
-            <h1>Skills</h1>
+            <h1 className="section-title">Skills</h1>
             <div id="languages" className="skill-category">
                 <h2>Languages</h2>
                 <div className="skills">
diff --git a/src/index.css b/src/index.css
index 7e715cd..478784b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -17,13 +17,35 @@ body {
   min-height: 100vh;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-  color: #EAEAEA;
-  text-align: center;
+
+
+h1{
+  font-size: 4rem;
+  color: white;
 }
 
+.section-title {
+  font-family: Arial;
+  font-size: 2.5rem;
+  color: #f0f0f0;
+  text-transform: uppercase;
+  letter-spacing: 0.15rem;
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.section-title::after {
+  content: '';
+  display: block;
+  width: 60px;
+  height: 3px;
+  background-color: #D95F46;
+  margin: 1rem auto 0;
+  border-radius: 2px;
+}
+
+
+
 h2{
-  color: #EAEAEA;
+  color: #f0f0f0;
 }
\ No newline at end of file
diff --git a/src/styles/Projects.css b/src/styles/Projects.css
index e7527e4..80032fb 100644
--- a/src/styles/Projects.css
+++ b/src/styles/Projects.css
@@ -2,11 +2,12 @@
     display: flex;
     flex-direction: column;
     scroll-margin-top: 40px;
+    margin-top: 100px;
 }
 
 .show-more-container {
     text-align: center;
-    margin-top: 2rem;
+
 }
 
 .show-more-link {
diff --git a/src/styles/Skills.css b/src/styles/Skills.css
index 7c2050c..79f26eb 100644
--- a/src/styles/Skills.css
+++ b/src/styles/Skills.css
@@ -2,6 +2,7 @@
     display: flex;
     flex-direction: column;
     scroll-margin-top: 40px;
+    margin-top: 100px;
 }
 
 .skills-span{
