diff --git a/www/credits.html b/www/credits.html
index a2a8226..ffeb568 100644
--- a/www/credits.html
+++ b/www/credits.html
@@ -25,171 +25,225 @@
     </nav>
 
     <main class="credits">
-        <div class="titre">
-            <h1>Crédits</h1>
-            <p>Découvrez les personnes et ressources qui ont contribué au fait que ce site puisse voir le jour.</p>
-        </div>
+        <header class="introduction">
+            <div class="introduction">
+                <h1>Crédits</h1>
+                <p>Découvrez les personnes et ressources qui ont contribué au fait que ce site puisse voir le jour.</p>
+                <a href="#premiereBox">Plus d'infos</a>
+            </div>
+        </header>
 
-        <div class="grille">
-            <div class="soustitre">
-                <h3>Warframe</h3>
-            </div>
-            <div class="description">
-                <p>
-                    Le site internet de Warframe a été consulté afin d'obtenir des images et vidéos authentiques du jeux.
-                </p>
-            </div>
-            <div class="bouton"><a href="https://www.warframe.com/fr/game/about">Voir la source</a></div>
-        </div>
+        <section>
+            <article id="premiereBox">
+                <div class="box">
+                    <h2>Warframe</h2>
+                    <p class="contenu">
+                        Le site internet de Warframe a été consulté afin d'obtenir des images et vidéos authentiques du jeux.
+                    </p>
+                    <div class="bouton"><a href="https://www.warframe.com/fr/game/about">Voir la source</a></div>
+                </div>
+            </article>
 
-        <div class="grille">
-            <div class="soustitre">
-                <h3>Léa Dezothez</h3>
-            </div>
-            <div class="description">
-                <ul>
-                    <li>Pour connaître le rôle de Léa, rendez-vous sur la page de l'équipe en cliquant sur le bouton.</li>
-                    <li>Léa a également fournis la vaste majorité des images.</li>
-                </ul>
-            </div>
-            <div class="bouton"><a href="team.html#goToLea">Voir la personne</a></div>
-        </div>
+            <article>
+                <div class="box">
+                    <h2>Léa Dezothez</h2>
+                    <ul>
+                        <li class="contenu">
+                            Pour connaître le rôle de Léa, rendez-vous sur la page de l'équipe en cliquant sur le bouton.
+                        </li>
+                        <li class="contenu">
+                            Léa a également fournis la vaste majorité des images.
+                        </li>
+                    </ul>
+                    <div class="bouton"><a href="team.html#lea">Voir la personne</a></div>
+                </div>
+            </article>
 
-        <div class="grille">
-            <div class="soustitre">
-                <h3>Jérémy Hébert</h3>
-            </div>
-            <div class="description">
-                <ul>
-                    <li>Pour connaître le rôle de Jérémy, rendez-vous sur la page de l'équipe en cliquant sur le bouton.</li>
-                </ul>
-            </div>
-            <div class="bouton"><a href="team.html#goToJeremy">Voir la personne</a></div>
-        </div>
+            <article>
+                <div class="box">
+                    <h2>Jérémy Hébert</h2>
+                    <ul>
+                        <li class="contenu">
+                            Pour connaître le rôle de Jérémy, rendez-vous sur la page de l'équipe en cliquant sur le bouton.
+                        </li>
+                        <li class="contenu">
+                            Jérémy a également fournis les logos ainsi que l'image se trouvant dans la page de réponse au formulaire.
+                        </li>
+                    </ul>
+                    <div class="bouton"><a href="team.html#jeremy">Voir la personne</a></div>
+                </div>
+            </article>
 
-        <div class="grille">
-            <div class="soustitre">
-                <h3>Andres</h3>
-            </div>
-            <div class="description">
-                <ul>
-                    <li>Pour connaître le rôle de Andres, rendez-vous sur la page de l'équipe en cliquant sur le bouton.</li>
-                </ul>
-            </div>
-            <div class="bouton"><a href="team.html#goToAndres">Voir la personne</a></div>
-        </div>
+            <article>
+                <div class="box">
+                    <h2>Andres David Herrera Escorcia</h2>
+                    <p class="contenu">
+                        Pour connaître le rôle de Andres, rendez-vous sur la page de l'équipe en cliquant sur le bouton.
+                    </p>
+                    <div class="bouton"><a href="team.html#andres">Voir la personne</a></div>
+                </div>
+            </article>
 
-        <div class="grille">
-            <div class="soustitre">
-                <h3>Stanislas Royal</h3>
-            </div>
-            <div class="description">
-                <ul>
-                    <li>Pour connaître le rôle de Stanislas, rendez-vous sur la page de l'équipe en cliquant sur le bouton.</li>
-                </ul>
-            </div>
-            <div class="bouton"><a href="team.html#goToStanislas">Voir la personne</a></div>
-        </div>
+            <article>
+                <div class="box">
+                    <h2>Stanislas Royal</h2>
+                    <p class="contenu">
+                        Pour connaître le rôle de Stanislas, rendez-vous sur la page de l'équipe en cliquant sur le bouton.
+                    </p>
+                    <div class="bouton"><a href="team.html#stanislas">Voir la personne</a></div>
+                </div>
+            </article>
 
-        <div class="grille">
-            <div class="soustitre">
-                <h3>Création de Warframe</h3>
-            </div>
-            <div class="description">
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-            <div class="bouton"><a href="TODO">Voir la source</a></div>
-        </div>
+            <article>
+                <div class="box">
+                    <h2>Discotools.xyz</h2>
+                    <p class="contenu">
+                        Discotools.xyz a permi la création du bouclier présent dans le logo ainsi que le favicon.
+                    </p>
+                    <div class="bouton"><a href="https://discotools.xyz/fr/icons-editor">Voir la source</a></div>
+                </div>
+            </article>
 
-        <div class="grille">
-            <div class="soustitre">
-                <h3>L’objectif</h3>
-            </div>
-            <div class="description">
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-            <div class="bouton"><a href="TODO">Voir la source</a></div>
-        </div>
+            <article>
+                <div class="box">
+                    <h2>Figma</h2>
+                    <p class="contenu">
+                        Figma a été utiliser dans la conception du logo, du favicon et de l'image de remerciement pour avoir remplis le formulaire.
+                    </p>
+                    <div class="bouton"><a href="https://www.figma.com/fr-fr/">Voir la source</a></div>
+                </div>
+            </article>
 
-        <div class="grille">
-            <div class="soustitre">
-                <h3>Les secrets</h3>
-            </div>
-            <div class="description">
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-            <div class="bouton"><a href="TODO">Voir la source</a></div>
-        </div>
+            <article>
+                <div class="box">
+                    <h2>Lyco Canario</h2>
+                    <p class="contenu">
+                        Lyco Canario est derrière la poule utilisée dans l'image de remerciement pour avoir remplis le formulaire.
+                    </p>
+                    <div class="bouton"><a href="https://dribbble.com/lycocanario">Voir la source</a></div>
+                </div>
+            </article>
 
-        <div class="grille">
-            <div class="soustitre">
-                <h3>L’évolution</h3>
-            </div>
-            <div class="description">
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-            <div class="bouton"><a href="TODO">Voir la source</a></div>
-        </div>
+            <article>
+                <div class="box">
+                    <h2>Visual Studio Code</h2>
+                    <p class="contenu">
+                        Visual Studio Code a été l'outil de développement utilisé pour l'ensemble du projet.
+                    </p>
+                    <div class="bouton"><a href="https://code.visualstudio.com/">Voir la source</a></div>
+                </div>
+            </article>
 
-        <div class="grille">
-            <div class="soustitre">
-                <h3>Coming soon...</h3>
-            </div>
-            <div class="description">
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-            <div class="bouton"><a href="TODO">Voir la source</a></div>
-        </div>
+            <article>
+                <div class="box">
+                    <h2>/noclip</h2>
+                    <p class="contenu">
+                        Le documentaire sur Warframe conçu par /noclip a servit à rédiger la page sur l'histoire de Digital Extremes.
+                    </p>
+                    <div class="bouton"><a href="https://www.youtube.com/watch?v=UOE6528pwFc&list=PL-THgg8QnvU7Weo1mCM9H2AXljC7UrDm8&index=2">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Jacob Deschamps & Josianne Fortin</h2>
+                    <p class="contenu">
+                        La théorie fournie par le corps professoral a dépanné l'équipe à de multiples reprises.
+                    </p>
+                    <div class="bouton"><a href="https://moodle.cegepsherbrooke.qc.ca/course/view.php?id=1518">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Gitea</h2>
+                    <p class="contenu">
+                        Les systèmes de Gitea ont permi un travail connecté durant l'ensemble du projet.
+                    </p>
+                    <div class="bouton"><a href="https://about.gitea.com/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>ChatGPT</h2>
+                    <p class="contenu">
+                        ChatGPT a permi la rédaction de certains texte du site.
+                    </p>
+                    <div class="bouton"><a href="https://chatgpt.com/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Gemini</h2>
+                    <p class="contenu">
+                        Gemini a permi la rédaction de certains texte du site.
+                    </p>
+                    <div class="bouton"><a href="https://gemini.google.com/app">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Moqups</h2>
+                    <p class="contenu">
+                        Moqups a permis de créé la maquette autour de laquelle c'est articulé le style artistique du site.
+                    </p>
+                    <div class="bouton"><a href="https://moqups.com/fr/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Google Maps</h2>
+                    <p class="contenu">
+                        Google Maps a permi l'intégration de la map sur le site.
+                    </p>
+                    <div class="bouton"><a href="https://www.google.com/maps">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>World Wide Web Consortium</h2>
+                    <p class="contenu">
+                        Les validateurs du World Wide Web Consortium ont permi la révison du code de l'ensemble du site.
+                    </p>
+                    <div class="bouton"><a href="https://validator.w3.org/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Brave Search</h2>
+                    <p class="contenu">
+                        Le moteur de recherche Brave Search a dépanné a de multiples reprises.
+                    </p>
+                    <div class="bouton"><a href="https://search.brave.com/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Google</h2>
+                    <p class="contenu">
+                        Le moteur de recherche Google a dépanné a de multiples reprises.
+                    </p>
+                    <div class="bouton"><a href="https://www.google.com/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>DuckDuckGo</h2>
+                    <p class="contenu">
+                        Le moteur de recherche DuckDuckGo a dépanné a de multiples reprises.
+                    </p>
+                    <div class="bouton"><a href="https://duckduckgo.com/">Voir la source</a></div>
+                </div>
+            </article>
+        </section>
     </main>
 
     <footer>
diff --git a/www/css/style.css b/www/css/style.css
index e88846f..6177706 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -1070,14 +1070,14 @@ Couleur texte : #FFEFE5
 /* AUTEUR: Jeremy */
 /****************************/
 .credits {
-    background: #13172c url("../images/imagesTeam/Intro.png") center;
+    background: #C19F8A center;
     background-size: cover;
     background-position: top;
     color: #ffefe5;
 }
 
 .credits header.introduction {
-    background: #13172c url("../images/imagesDE/temporaire.webp") center/cover fixed;
+    background: #13172c url("../images/ImagesCredits/temporaire.webp") center/cover fixed;
     background-position: top;
     height: 100vh;
     display: block;
@@ -1096,6 +1096,36 @@ Couleur texte : #FFEFE5
     height: 100vh;
 }
 
+.credits header.introduction div.introduction a {
+    display: inline-block;
+    text-decoration: none;
+    color: #ffefe5;
+    padding: 10.8px 16px;
+    margin: 160px 4px;
+    background-color: #13172c;
+    border-radius: 20px;
+}
+
+.credits header.introduction div.introduction a:hover {
+    border-radius: 20px;
+    background-color: #b47871;
+}
+
+.credits main {
+    margin: auto;
+}
+
+.credits header.introduction h1,
+.credits header.introduction p {
+    line-height: 5;
+    font-size: 2rem;
+}
+
+.credits header.introduction div.introduction {
+    background-color: #13172cd5;
+    height: 100vh;
+}
+
 .credits div.bouton a {
     display: inline-block;
     text-decoration: none;
@@ -1115,58 +1145,28 @@ Couleur texte : #FFEFE5
     margin: auto;
 }
 
-.credits div.titre {
-    text-align: center;
-    font-size: 2rem;
-    padding-top: 66px;
-}
-
-.credits div.grille {
-    background-color: rgba(115, 110, 154, 0.9);
-    border-radius: 20px;
-    display: grid;
-    align-items: flex-start;
-    grid-template-areas:
-        "soustitre soustitre"
-        "description description"
-        "bouton bouton";
-    /*grid-template-columns: 1fr 3fr;*/
-    padding: 16px;
-    margin: 16px 5%;
-    text-align: center;
-}
-
-.credits div.bouton {
-    grid-area: bouton;
-    grid-template-columns: 15%;
+.credits section article {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 16px;
-}
-
-.credits div.soustitre {
-    grid-area: soustitre;
-    grid-template-columns: 85%;
-    text-align: center;
-}
-
-.credits div.description {
-    grid-area: description;
-    grid-template-columns: 85%;
-}
-
-.credits div.image img {
-    width: 100%;
-    aspect-ratio: 1 / 1;
-    /* hauteur = largeur */
-    border-radius: 20%;
     padding: 16px;
+    align-items: center;
 }
 
-.credits div.grilleDroite:hover,
-.credits div.grilleGauche:hover {
-    background-color: rgba(39, 58, 86, 90%);
+.credits section article div.box {
+    background-color: rgba(19, 23, 44, 0.8);
+    padding: 16px;
+    margin: 16px;
+    border-radius: 20px;
+}
+
+.credits section article div.box:hover {
+    background-color: rgba(39, 58, 86, 0.9);
+}
+
+.credits section article h2,
+.credits section article h3,
+.credits section article .contenu {
+    padding: 8px 0;
+    list-style: none;
 }
 
 /****************************/
diff --git a/www/images/ImagesCredits/Credits.png b/www/images/ImagesCredits/Credits.png
new file mode 100644
index 0000000..198bf57
Binary files /dev/null and b/www/images/ImagesCredits/Credits.png differ
diff --git a/www/images/imagesDE/temporaire.webp b/www/images/ImagesCredits/temporaire.webp
similarity index 100%
rename from www/images/imagesDE/temporaire.webp
rename to www/images/ImagesCredits/temporaire.webp
diff --git a/www/images/imagesDE/DELogo-WhiteOnBlueRGB.png b/www/images/imagesDE/DELogo-WhiteOnBlueRGB.png
deleted file mode 100644
index e4dd4a9..0000000
Binary files a/www/images/imagesDE/DELogo-WhiteOnBlueRGB.png and /dev/null differ
diff --git a/www/images/imagesTeam/Introduction.png b/www/images/imagesTeam/Introduction.png
deleted file mode 100644
index 8be7089..0000000
Binary files a/www/images/imagesTeam/Introduction.png and /dev/null differ