diff --git a/index.html b/index.html
index 6e63a2a..8d1e3ad 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
 <html lang="fr">
   <head>
     <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Portfolio PRADIER Hugo</title>
 
@@ -13,37 +14,98 @@
       integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
       crossorigin="anonymous"
     />
+
+    <!-- Font Awesome -->
+    <script
+      src="https://kit.fontawesome.com/14273d579a.js"
+      crossorigin="anonymous"
+    ></script>
+
+    <!-- Icon Bootstrap -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
+    />
   </head>
 
   <body>
-    <header>
-      <!-- Barre de navigation -->
-      <nav class="bg-light">
+    <!-- Barre de navigation -->
+    <header class="py-4">
+      <nav class="navbar navbar-expand-md fixed-top navbar-light bg-light">
         <div class="container">
-          <div class="bg-secondary py-4"></div>
+          <a class="navbar-brand text-uppercase fw-bold" href="#">
+            <span class="bg-secondary bg-gradient p-1 rounded-3 text-light"
+              >Hugo</span
+            >
+            PRADIER
+          </a>
+          <button
+            class="navbar-toggler"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#navbarNav"
+            aria-controls="navbarNav"
+            aria-expanded="false"
+            aria-label="Toggle navigation"
+          >
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div
+            class="collapse navbar-collapse justify-content-end"
+            id="navbarNav"
+          >
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link" href="#accueil">Accueil </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#apropos">À propos de moi</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#experiences">Expériences</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#parcours">Parcours</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#competences">Compétences</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#projets">Projets</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#contact">Contact</a>
+              </li>
+            </ul>
+          </div>
         </div>
       </nav>
     </header>
 
     <main>
       <!-- Accueil -->
-      <section class="my-5">
+      <section id="accueil" class="my-5">
         <div class="container">
-          <div class="row">
-            <div class="col">
-              <h1>Je suis Hugo PRADIER, Alternant Développeur</h1>
-              <h2>Bienvenue sur mon portfolio</h2>
+          <div class="row gy-4 align-items-center">
+            <div class="col-12 col-md-6">
+              <h1 class="fw-bold">
+                Je suis Hugo PRADIER, <br />
+                Alternant Développeur
+              </h1>
+              <h2 class="fw-light">Bienvenue sur mon portfolio !</h2>
               <button
+                class="btn btn-secondary mt-5"
                 onclick="window.open('./assets/pdf/CV PRADIER Hugo.pdf', '_blank')"
               >
                 Télécharger mon CV
               </button>
             </div>
-            <div class="col">
+            <div class="col-12 col-md-6">
               <img
                 src="./assets/images/photoIdentite.jpg"
                 alt="Photo de Hugo PRADIER"
-                class="w-100"
+                width="95%"
+                class="rounded-3 shadow"
               />
             </div>
           </div>
@@ -51,7 +113,7 @@
       </section>
 
       <!-- À propos de moi -->
-      <section class="py-5">
+      <section id="apropos" class="py-5 bg-light">
         <div class="container">
           <div class="row">
             <div class="col">
@@ -79,10 +141,10 @@
         </div>
       </section>
 
-      <!-- Mon parcours -->
-      <section class="py-5">
+      <!-- Experiences -->
+      <section id="experiences" class="py-5">
         <div class="container">
-          <h2>Mon parcours</h2>
+          <h2>Experiences</h2>
           <div class="row gy-4 mt-4">
             <div class="col-3">
               <div class="bg-secondary h-100 w-100 py-5"></div>
@@ -100,10 +162,10 @@
         </div>
       </section>
 
-      <!-- Mes expériences professionnelles -->
-      <section class="py-5">
+      <!-- Parcours -->
+      <section id="parcours" class="py-5">
         <div class="container">
-          <h2>Mes expériences professionnelles</h2>
+          <h2>Parcours</h2>
           <div class="row gy-4 mt-4">
             <div class="col-3">
               <div class="bg-secondary h-100 w-100 py-5"></div>
@@ -121,46 +183,44 @@
         </div>
       </section>
 
-      <!-- Mes compétences -->
-      <section class="py-5 bg-light">
+      <!-- Compétences -->
+      <section id="competences" class="py-5 bg-light">
         <div class="container">
-          <h2>Mes compétences</h2>
-          <h3>Développement web et design</h3>
+          <h2>Compétences</h2>
+
           <!-- Developpement -->
-          <div class="row gy-4 mt-5">
-            <div class="col-12 col-md-7">
-              <div class="bg-secondary h-100 w-100 py-5"></div>
-            </div>
-            <div class="col-12 offset-md-1 col-md-4">
-              <img
-                src="./assets/images/ecranCode.jpg"
-                alt="Écran montrant du code"
-                width="100%"
-              />
-            </div>
+          <h3>Développement</h3>
+          <div class="col-12">
+            <div class="bg-secondary h-100 w-100 py-5"></div>
           </div>
 
-          <!-- Design -->
-          <div class="row gy-4 mt-5">
-            <div class="col-12 col-md-4">
-              <img
-                src="./assets/images/maquetteSite.png"
-                alt="Écran montrant une maquette de site web"
-                width="100%"
-              />
-            </div>
-            <div class="col-12 offset-md-1 col-md-7">
-              <div class="bg-secondary h-100 w-100 py-5"></div>
-            </div>
+          <!-- Gestion de projet et collaboration -->
+          <h3>Gestion de projet et collaboration</h3>
+          <div class="col-12">
+            <div class="bg-secondary h-100 w-100 py-5"></div>
+          </div>
+
+          <!-- Gestion de projet et collaboration -->
+          <h3>Gestion de projet et collaboration</h3>
+          <div class="col-12">
+            <div class="bg-secondary h-100 w-100 py-5"></div>
+          </div>
+
+          <!-- Outils -->
+
+          <h3>Outils</h3>
+          <div class="col-12">
+            <div class="bg-secondary h-100 w-100 py-5">
           </div>
+
+
         </div>
       </section>
 
-      <!-- Mes projets -->
-      <section class="py-5">
+      <!-- Projets -->
+      <section id="projets" class="py-5">
         <div class="container">
-          <h2>Mes projets</h2>
-          <h3>Projets scolaire et en entreprise</h3>
+          <h2>Projets</h2>
           <div class="row gy-4 mt-4">
             <div class="col-3">
               <div class="bg-secondary h-100 w-100 py-5"></div>
@@ -179,19 +239,15 @@
       </section>
 
       <!-- Contact -->
-      <section class="py-5 bg-light">
+      <section id="contact" class="py-5 bg-light">
         <div class="container">
-          <h2>Formulaire de contact</h2>
+          <h2>Contact</h2>
 
           <div class="row gy-4 mt-5">
-            <div class="col-12 col-md-5">
-              <img
-                src="./assets/images/contact.jpg"
-                alt="Image d'une touche de clavier pour contacter"
-                width="100%"
-              />
+            <div class="col-6">
+              <div class="bg-secondary h-100 w-100 py-5"></div>
             </div>
-            <div class="col-12 offset-md-1 col-md-6">
+            <div class="col-6">
               <div class="bg-secondary h-100 w-100 py-5"></div>
             </div>
           </div>
@@ -210,7 +266,16 @@
             <div class="bg-secondary py-5"></div>
           </div>
           <div class="col-12 col-md-4">
-            <div class="bg-secondary py-5"></div>
+            <div>
+              <ul class="list-inline text-center">
+                <li class="list-inline-item">
+                  <i class="bi bi-linkedin fa-5x"></i>
+                </li>
+                <li class="list-inline-item">
+                  <i class="bi bi-github fa-5x"></i>
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
       </div>
