diff --git a/public/Images/Icones/insy2s.png b/public/Images/Icones/insy2s.png
new file mode 100644
index 0000000000000000000000000000000000000000..d2b164f330d6423b2902cedc28b8489a74e4656d
Binary files /dev/null and b/public/Images/Icones/insy2s.png differ
diff --git a/public/Images/Projets/meetingplannr.jpg b/public/Images/Projets/meetingplannr.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..80505741dcf815b0304f1f7fdd35d7678b786d73
Binary files /dev/null and b/public/Images/Projets/meetingplannr.jpg differ
diff --git a/public/Pages/Projets.html b/public/Pages/Projets.html
index 97d061df223b185592bd27a620031c4d6043e002..8f89eb024ab64894e158cc80d8c7570c7df8aaac 100644
--- a/public/Pages/Projets.html
+++ b/public/Pages/Projets.html
@@ -73,6 +73,14 @@
                     </div>
                 </a>
             </li>
+            <li>
+                <a href="./Projets/MeetingPlannr.html">
+                    <img src="../Images/Projets/meetingplannr.jpg" alt="MeetingPlannr">
+                    <div class="title">
+                        <p>MeetingPlannr</p>
+                    </div>
+                </a>
+            </li>
         </ul>
 
     </div>
diff --git a/public/Pages/Projets/Pizzaland.html b/public/Pages/Projets/MeetingPlannr.html
similarity index 50%
rename from public/Pages/Projets/Pizzaland.html
rename to public/Pages/Projets/MeetingPlannr.html
index 8161c2cf23d6ea1d5365e056b857a86964a44141..e6e10770f21abcac03814d039d976a770b6ebd15 100644
--- a/public/Pages/Projets/Pizzaland.html
+++ b/public/Pages/Projets/MeetingPlannr.html
@@ -11,24 +11,22 @@
         <a href="../Projets.html">Mes projets</a>
     </div>
     <header>
-        <a href="https://gitlab.univ-lille.fr/sae-pizzaland/pizzaland-cancel-mirey" target="_blank">
+        <a href="https://gitlab.univ-lille.fr/paul.cancel.etu/meetingplannr" target="_blank">
         <h2>
-            Rest API : "Pizzaland"
+            Application de gestion de rendez-vous "MeetingPlannr"
         </h2>
-        </a>
+    </a>
     </header>
     <section id="projets">
-            <img src="../../Images/Projets/Pizzaland.png" alt="Pizzaland">
+            <img src="../../Images/Projets/meetingplannr.jpg" alt="MeetingPlannr">
         <header>
             <h1>Présentation</h1>
         </header>
         <article>
-            <h5> Nous avons créé en duo une API permettant la gestion d'une base de données d'une pizzeria,
-                en incluant la gestion d'ingrédients, des users, de pizzas et de commandes.
-                Cette API est basée sur la méthode REST et tourne à l'intérieur d'un serveur tomcat,
-                elle gère une base de données en Postgresql et elle utilise également uniquement des
-                objets json. Un système d'identification est également inclus permettant de sécuriser
-                les opérations visant à changer la base de données.
+            <h5> Nous avons réalisé en duo, une application de gestion de rendez-vous professionnels nommés "MeetingPlannr".
+                L'application permet de créer des rendez-vous, de les modifier et de les supprimer. Les rendez-vous sont
+                stockés dans une base de données postgresql. L'application est réalisée en Spring Boot et utilise des jsp pour
+                l'affichage. l'application est également sécurisée par un système de login utilisant Spring Security.
             </h5>
         </article>
         <header>
@@ -37,41 +35,46 @@
         <article>
             <ul>
                 <li>
-                    <h4>Java programmation objet</h4>
+                    <h4>Spring Boot</h4>
                 </li>
                 <li>
-                    <h4>REST</h4>
-                </li>
-                <li>
-                    <h4>Tomcat</h4>
-                </li>
-                <li>
-                    <h4>JEE</h4>
+                    <h4>jsp/css</h4>
                 </li>
                 <li>
                     <h4>Git</h4>
                 </li>
+            </ul>
+            
+        </article>
+        <header>
+            <h1>Savoirs-faire</h1>
+        </header>
+        <article>
+            <ul class="savoirsfaire">
                 <li>
-                    <h4>Bruno</h4>
+                    <h4>Utilisation de frameworks.</h4>
                 </li>
                 <li>
-                    <h4>PostgreSQL</h4>
+                    <h4>Apprentissage de l'ergonomie pour les fonctionnalités.</h4>
                 </li>
             </ul>
-            
         </article>
         <header>
-            <h1>Savoirs-faire</h1>
+            <h1>Savoir être</h1>
         </header>
         <article>
             <ul class="savoirsfaire">
                 <li>
-                    <h4>Créer et utiliser une API</h4>
+                    <h4>Travailler en équipe (Leader)</h4>
+                </li>
+                <li>
+                    <h4>Travailler sous pression (Temps)</h4>
                 </li>
                 <li>
-                    <h4>Gérer une base de données via un serveur web</h4>
+                    <h4>Comprendre les attendus nécessaires pour la soutenance</h4>
                 </li>
             </ul>
+            
         </article>
     </section>
 
diff --git a/public/Styles/styles.css b/public/Styles/styles.css
index e336e0e5170d73946ecef23d59e7b716806ef208..8f83ae060fe0926d5323f539210317fc776b9f1e 100644
--- a/public/Styles/styles.css
+++ b/public/Styles/styles.css
@@ -335,3 +335,124 @@ article h3{
     display: list-item;
     margin-left: 6em;
 }
+
+.popup {
+    display: none;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgb(26, 26, 26);
+    padding: 20px;
+    border: 2px solid white;
+    z-index: 1000;
+    min-width: 200px;
+    text-align: center;
+}
+
+.popup-title {
+    font-size: 1.5em;
+    margin-bottom: 10px;
+    letter-spacing: 0.2em;
+}
+
+.popup-close {
+    position: absolute;
+    right: 10px;
+    top: 5px;
+    cursor: pointer;
+    font-size: 1.2em;
+    color: white;
+}
+
+.popup-close:hover {
+    color: #ddd;
+}
+
+.overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 999;
+}
+
+.popup-content {
+    margin-top: 10px;
+    font-size: 1em;
+    line-height: 1.4;
+    color: #ddd;
+}
+
+.stage-container {
+    background-color: #242424;
+    width: 60%;
+    margin-left: 9em;
+    padding: 2em;
+}
+
+.stage-title {
+    font-size: 1.5em;
+    margin-bottom: 1em;
+    border-bottom: 1px solid #666;
+    padding-bottom: 0.5em;
+}
+
+.stage-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1em;
+}
+
+.company-info {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1em;
+}
+
+.company-logo {
+    width: 60px;
+    height: auto;
+    margin-right: 1em;
+}
+
+.company-details {
+    line-height: 1.4;
+}
+
+.stage-section {
+    margin-bottom: 1.5em;
+}
+
+.stage-section h4 {
+    color: #aaa;
+    margin-bottom: 0.5em;
+    font-size: 1.1em;
+}
+
+.stage-section ul {
+    list-style-type: none;
+    padding-left: 1em;
+}
+
+.stage-section li {
+    margin-bottom: 0.5em;
+    line-height: 1.4;
+}
+
+.tech-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5em;
+    margin-top: 1em;
+}
+
+.tech-tag {
+    background-color: #333;
+    padding: 0.3em 0.8em;
+    border-radius: 15px;
+    font-size: 0.9em;
+}
diff --git a/public/index.html b/public/index.html
index 1ce62701b3c0d6ea089882c49a410b2a46929d93..a1bc0bee83ff556fffbba27cb836c719faadb054 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,39 @@
 <meta charset="UTF-8" />
 <title>Page</title>
 <link rel="stylesheet" href="./Styles/styles.css" />
+<script>
+    const skillDescriptions = {
+        'Java': 'Langage principal utilisé en POO. Apprentissage de JavaFX, JEE, Spring Boot et Android.',
+        'Python': 'Utilisé pour le développement de scripts et l\'analyse de données. Expérience avec les bibliothèques pandas, numpy mais également la représentation graphique avec .',
+        'SQL': 'Conception et gestion de bases de données relationnelles. Maîtrise des requêtes complexes et de l\'optimisation.',
+        'HTML': 'Création de structures web sémantiques et accessibles.',
+        'CSS': 'Stylisation avancée et responsive design.',
+        'GIT': 'Gestion de version et collaboration. Maîtrise des workflows Git et des bonnes pratiques.',
+        'Jakartaa EE': 'Développement d\'applications d\'entreprise avec Java EE/Jakarta EE.',
+        'JavaScript': 'Développement front-end et manipulation du DOM. Utilisation des fonctionnalités modernes ES6+.',
+        'Docker': 'Conteneurisation d\'applications et gestion des environnements de développement.',
+        'React': 'Création d\'interfaces utilisateur dynamiques et réutilisables. Utilisation pour des projets tels que l\'application de gestion de formation pour Insy2s.',
+        'Redux': 'Gestion d\'état pour applications React complexes.',
+        'Spring Boot': 'Développement d\'applications Java avec Spring Boot et Spring Framework. Utilisation sur le projet MeetingPlannr',
+        'Kotlin': 'Développement backend avancé.',
+        'MongoDb': 'Gestion de bases de données NoSQL et requêtes agrégées.',
+        'Jira': 'Gestion de projet agile et suivi des tâches. Utilisation lors du stage chez Insy2s.',
+        'Bash': 'Scripts shell et automatisation sous Linux. Utilisation régulière pour automatiser des tâches sessions.',
+        'Gitlab Pages': 'Déploiement de sites statiques avec Gitlab Pages. Utilisé notamment pour ce portfolio :).'
+    };
+
+    function showPopup(skillName) {
+        document.getElementById('popup-title').textContent = skillName;
+        document.getElementById('popup-content').textContent = skillDescriptions[skillName] || 'Description à venir';
+        document.getElementById('popup').style.display = 'block';
+        document.getElementById('overlay').style.display = 'block';
+    }
+
+    function closePopup() {
+        document.getElementById('popup').style.display = 'none';
+        document.getElementById('overlay').style.display = 'none';
+    }
+</script>
 </head>
 <body>
     <div class="topnav">
@@ -54,108 +87,103 @@
                     <article>
                         <ul>
                             <li>
-                                <script>
-                                    function showPopup() {
-                                        alert("Compétence: Java");
-                                    }
-                                </script>
-                                <img src="./Images/Icones/Java.png" alt="java" onclick="showPopup()">
+                                <img src="./Images/Icones/Java.png" alt="java" onclick="showPopup('Java')">
                                 <div class="title">
                                     <p>Java</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/Python.png" alt="Python">
+                                <img src="./Images/Icones/Python.png" alt="Python" onclick="showPopup('Python')">
                                 <div class="title">
                                     <p>Python</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/SQL.png" alt="SQL">
+                                <img src="./Images/Icones/SQL.png" alt="SQL" onclick="showPopup('SQL')">
                                 <div class="title">
                                     <p>SQL</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/html.png" alt="HTML">
+                                <img src="./Images/Icones/html.png" alt="HTML" onclick="showPopup('HTML')">
                                 <div class="title">
                                     <p>HTML</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/css.png" alt="CSS">
+                                <img src="./Images/Icones/css.png" alt="CSS" onclick="showPopup('CSS')">
                                 <div class="title">
                                     <p>CSS</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/git.png" alt="GIT">
+                                <img src="./Images/Icones/git.png" alt="GIT" onclick="showPopup('GIT')">
                                 <div class="title">
                                     <p>GIT</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/JakartaEE.png" alt="JEE">
+                                <img src="./Images/Icones/JakartaEE.png" alt="JEE" onclick="showPopup('Jakartaa EE')">
                                 <div class="title">
                                     <p>JEE</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/JavaScript.png" alt="JS">
+                                <img src="./Images/Icones/JavaScript.png" alt="JS" onclick="showPopup('JavaScript')">
                                 <div class="title">
                                     <p>JS</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/Docker.png" alt="DOCKER">
+                                <img src="./Images/Icones/Docker.png" alt="DOCKER" onclick="showPopup('Docker')">
                                 <div class="title">
                                     <p>Docker</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/React.png" alt="REACT">
+                                <img src="./Images/Icones/React.png" alt="REACT" onclick="showPopup('React')">
                                 <div class="title">
                                     <p>React</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/Redux.png" alt="REDUX">
+                                <img src="./Images/Icones/Redux.png" alt="REDUX" onclick="showPopup('Redux')">
                                 <div class="title">
                                     <p>Redux</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/SpringBoot.png" alt="SPRINGBOOT">
+                                <img src="./Images/Icones/SpringBoot.png" alt="SPRINGBOOT" onclick="showPopup('Spring Boot')">
                                 <div class="title">
                                     <p>Spring</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/Kotlin.png" alt="KOTLIN">
+                                <img src="./Images/Icones/Kotlin.png" alt="KOTLIN" onclick="showPopup('Kotlin')">
                                 <div class="title">
                                     <p>Kotlin</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/MongoDb.svg" alt="MONGODB">
+                                <img src="./Images/Icones/MongoDb.svg" alt="MONGODB" onclick="showPopup('MongoDb')">
                                 <div class="title">
                                     <p>MongoDb</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/Jora.svg" alt="JIRA">
+                                <img src="./Images/Icones/Jora.svg" alt="JIRA" onclick="showPopup('Jira')">
                                 <div class="title">
                                     <p>Jira</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/Bash.png" alt="BASH">
+                                <img src="./Images/Icones/Bash.png" alt="BASH" onclick="showPopup('Bash')">
                                 <div class="title">
                                     <p>Bash</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/Pages.png" alt="PAGES">
+                                <img src="./Images/Icones/Pages.png" alt="PAGES" onclick="showPopup('Gitlab Pages')">
                                 <div class="title">
                                     <p>Pages</p>
                                 </div>
@@ -180,14 +208,65 @@
                             Expériences
                         </h1>
                     </header>
-                    <article>
-                        <h3>Stage - Développement Full stack : "Application pour Insy2s"</h3>
-                        <h5>
-                            Création d'une application web complète de gestion de formation
-                            lors d'un stage pour l'entreprise Insy2s
-                            <br>
-                            Durée : 8 semaines
-                        </h5>
+                    <article class="stage-container">
+                        <div class="stage-header">
+                            <div class="company-info">
+                                <img src="./Images/Icones/insy2s.png" alt="Insy2s Logo" class="company-logo">
+                                <div class="company-details">
+                                    <h3 class="stage-title">Stage - Développement Full stack</h3>
+                                    <p>Insy2s - Villeneuve d'Ascq</p>
+                                    <p>Durée : 8 semaines (Juin - Août 2024)</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="stage-section">
+                            <h4>Missions principales</h4>
+                            <ul>
+                                <li>• Conception et développement d'une application web de gestion de formation</li>
+                                <li>• Mise en place d'une architecture REST API</li>
+                                <li>• Création d'une interface utilisateur responsive avec React et Tailwind</li>
+                                <li>• Implémentation de la gestion d'état avec Redux</li>
+                                <li>• Documentation de l'API avec Swagger</li>
+                                <li>• Gestion de projet avec la méthode Agile/Scrum</li>
+                            </ul>
+                        </div>
+
+                        <div class="stage-section">
+                            <h4>Compétences techniques acquises</h4>
+                            <ul>
+                                <li>• Maîtrise du développement Full Stack Java/React</li>
+                                <li>• Expertise en développement d'API REST</li>
+                                <li>• Gestion avancée de bases de données SQL</li>
+                                <li>• Pratique des méthodologies Agiles</li>
+                            </ul>
+                        </div>
+
+                        <div class="stage-section">
+                            <h4>Savoir-être et environnement de travail</h4>
+                            <ul>
+                                <li>• Travail en télétravail complet nécessitant une forte autonomie</li>
+                                <li>• Participation active aux daily meetings et réunions d'organisation</li>
+                                <li>• Communication proactive avec l'équipe en cas de difficultés</li>
+                                <li>• Capacité d'adaptation aux outils de travail à distance</li>
+                                <li>• Gestion efficace du temps et respect des deadlines</li>
+                            </ul>
+                        </div>
+
+                        <div class="stage-section">
+                            <h4>Technologies utilisées</h4>
+                            <div class="tech-tags">
+                                <span class="tech-tag">Java</span>
+                                <span class="tech-tag">Spring Boot</span>
+                                <span class="tech-tag">PostgreSQL</span>
+                                <span class="tech-tag">React</span>
+                                <span class="tech-tag">Redux</span>
+                                <span class="tech-tag">Material UI</span>
+                                <span class="tech-tag">Docker</span>
+                                <span class="tech-tag">Git</span>
+                                <span class="tech-tag">Jira</span>
+                            </div>
+                        </div>
                     </article>
             </section>
             <div class="end">
@@ -199,5 +278,11 @@
         <a href="./Pages/Contact.html">Me contacter</a>
         <a href="./pdf/cv.pdf" target="_blank">Mon CV</a>
     </div>
+    <div id="overlay" class="overlay" onclick="closePopup()"></div>
+    <div id="popup" class="popup">
+        <span class="popup-close" onclick="closePopup()">&times;</span>
+        <div id="popup-title" class="popup-title"></div>
+        <div id="popup-content" class="popup-content"></div>
+    </div>
 </body>
 </html>