diff --git a/index.html b/index.html
index b7e7d7d..3d3e6dc 100644
--- a/index.html
+++ b/index.html
@@ -6,69 +6,100 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Pismont Quentin</title>
     <link rel="stylesheet" href="styles.css">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
 </head>
 
 <body>
-    <section id="header">
-        <img src="face.jpg" alt="Votre Photo" id="profile-photo">
+    <header class="section">
+        <img src="face.jpg" alt="Votre Photo" id="profile-photo" style="max-width: 150px; border-radius: 50%;">
         <h1>Pismont Quentin</h1>
         <p>Lead Developer</p>
-    </section>
+        <button id="theme-toggle">Toggle Theme</button>
+    </header>
 
-    <section id="about-me">
-        <h2>À propos de moi</h2>
-        <p>Passionné et expérimenté en développement, je maîtrise NodeJS, React et TypeScript, avec une expertise solide en bases de données tels que MariaDB et PostgreSQL. </p>
-        <p>J'ai également des compétences avancées en déploiement et intégration continue grâce à Docker, Docker Swarm, GitLab et Linux.</p>
-        <p>Toujours avide d'apprendre et d'évoluer, je cherche activement des opportunités pour me plonger davantage dans le langage Rust, avec l'intention de m'y spécialiser à terme. </p>
-        <p>Disponible pour de nouvelles opportunités stimulantes et enrichissantes.</p>
-    </section>
+    <main class="container">
+        <section id="about-me" class="section">
+            <h2>À propos de moi</h2>
+            <p>Passionné et expérimenté en développement, je maîtrise NodeJS, React et TypeScript, avec une expertise solide en bases de données tels que MariaDB et PostgreSQL.</p>
+            <p>J'ai également des compétences avancées en déploiement et intégration continue grâce à Docker, Docker Swarm, GitLab et Linux.</p>
+            <p>Toujours avide d'apprendre et d'évoluer, je cherche activement des opportunités pour me plonger davantage dans le langage Rust, avec l'intention de m'y spécialiser à terme.</p>
+            <p>Disponible pour de nouvelles opportunités stimulantes et enrichissantes.</p>
+        </section>
 
-    <section id="experiences">
-        <h2>Experiences</h2>
-        <div class="card">
-            <h3>Lead Web Developer</h3>
-            <h5>sept. 2019 - aujourd'hui</h5>
-            <hr/>
-            <p>GitLab · Docker Swarm · Node.js · React · Docker · PHP · JavaScript · MySQL · Git · Linux · TypeScript · Méthodes agiles · Scrum · Intégration continue</p>
-        </div>
-        <div class="card">
-            <h3>Fullstack Web Developer</h3>
-            <h5>aout 2016 - sept. 2019</h5>
-            <hr/>
-            <p>Maintenance et creation </p>
-            <p>Node.js · React · PHP · JavaScript · MySQL · Git · Linux · TypeScript · Méthodes agiles · Scrum</p>
-        </div>
-    </section>
+        <section id="experiences" class="section">
+            <h2>Expériences</h2>
+            <div class="card">
+                <h3>Lead Web Developer</h3>
+                <h5>sept. 2019 - aujourd'hui</h5>
+                <hr/>
+                <p>GitLab · Docker Swarm · Node.js · React · Docker · PHP · JavaScript · MySQL · Git · Linux · TypeScript · Méthodes agiles · Scrum · Intégration continue</p>
+            </div>
+            <div class="card">
+                <h3>Fullstack Web Developer</h3>
+                <h5>août 2016 - sept. 2019</h5>
+                <hr/>
+                <p>Maintenance et création</p>
+                <p>Node.js · React · PHP · JavaScript · MySQL · Git · Linux · TypeScript · Méthodes agiles · Scrum</p>
+            </div>
+        </section>
 
-    <section id="skills">
-        <h2>Compétences</h2>
-        <ul>
-            <li>NodeJS /w Typescript</li>
-            <li>React /w Typescript & ViteJS</li>
-            <li>Linux</li>
-            <li>MariaDB</li>
-            <li>PostgreSQL</li>
-            <li>Docker + Swarm</li>
-            <li>CI/CD avec Gitlab et Gitea</li>
-            <li>Rust</li>
-        </ul>
-    </section>
+        <section id="skills" class="section">
+            <h2>Compétences</h2>
+            <ul>
+                <li>NodeJS /w Typescript</li>
+                <li>Bun</li>
+                <li>React /w Typescript & ViteJS</li>
+                <li>Linux</li>
+                <li>MariaDB</li>
+                <li>PostgreSQL</li>
+                <li>Docker + Swarm</li>
+                <li>CI/CD avec Gitlab et Gitea</li>
+                <li>Rust</li>
+            </ul>
+        </section>
+
+        <section id="projects" class="section">
+            <h2>Projets</h2>
+            <div class="card">
+                <h3><a style="color: inherit" href="https://gitea.qpismont.fr/qpismont/imgproxy-rs">ImgProxy-rs</a></h3>
+                <p>Ce projet consiste en un proxy d'images développé en Rust, utilisant la bibliothèque Tokio pour la gestion asynchrone des requêtes.</p>
+                <p>Le proxy mettra en cache les images en mémoire, sur le disque dur ou sur Amazon S3 pour une récupération rapide ultérieure.</p>
+                <p>De plus, il permettra d'effectuer des manipulations d'images telles que le zoom, le rognage, etc., en utilisant la puissante bibliothèque de traitement d'images, Libvips.</p>
+            </div>
+            <div class="card">
+                <h3>Trepa</h3>
+                <p>Ce projet vise à développer une plateforme de streaming vidéo moderne et évolutive en utilisant l'architecture de microservices.</p>
+                <p>Chaque microservice sera développé en NodeJS avec NestJS comme framework backend et utilisera PostgreSQL pour le stockage des données.</p>
+                <p>Les utilisateurs pourront uploader des vidéos via l'interface web en React et les regarder en streaming avec une expérience utilisateur fluide.</p>
+            </div>
+        </section>
+    </main>
+
+    <footer>
+        <p>&copy; 2024 Pismont Quentin. Tous droits réservés.</p>
+    </footer>
+
+    <script>
+        const toggleButton = document.getElementById('theme-toggle');
+        const body = document.body;
+    
+        toggleButton.addEventListener('click', () => {
+            body.classList.toggle('dark-mode');
+        });
+    
+        if (localStorage.getItem('theme') === 'dark') {
+            body.classList.add('dark-mode');
+        }
+    
+        toggleButton.addEventListener('click', () => {
+            if (body.classList.contains('dark-mode')) {
+                localStorage.setItem('theme', 'dark');
+            } else {
+                localStorage.setItem('theme', 'light');
+            }
+        });
+    </script>    
 
-    <section id="projects">
-        <h2>Projets</h2>
-        <div class="card" style="background-color: rgba(255, 228, 196, 0.315);">
-            <h3><a style="color: inherit" href="https://gitea.qpismont.fr/qpismont/imgproxy-rs">ImgProxy-rs</a></h3>
-            <p>Ce projet consiste en un proxy d'images développé en Rust, utilisant la bibliothèque Tokio pour la gestion asynchrone des requêtes.</p>
-            <p>Le proxy mettra en cache les images en mémoire, sur le disque dur ou sur Amazon S3 pour une récupération rapide ultérieure.</p>
-            <p>De plus, il permettra d'effectuer des manipulations d'images telles que le zoom, le rognage, etc., en utilisant la puissante bibliothèque de traitement d'images, Libvips.</p>
-        </div>
-        <div class="card" style="background-color: rgba(206, 255, 196, 0.315);">
-            <h3>Trepa</h3>
-            <p>Ce projet vise à développer une plateforme de streaming vidéo moderne et évolutive en utilisant l'architecture de microservices.</p>
-            <p>Chaque microservice sera développé en NodeJS avec NestJS comme framework backend et utilisera PostgreSQL pour le stockage des données.</p>
-            <p>Les utilisateurs pourront uploader des vidéos via l'interface web en React et les regarder en streaming avec une expérience utilisateur fluide.</p>
-        </div>
-    </section>
 </body>
 
 </html>
diff --git a/styles.css b/styles.css
index ab27bed..d7a28eb 100644
--- a/styles.css
+++ b/styles.css
@@ -1,55 +1,182 @@
+/* Import Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@400;700&display=swap');
+
+/* Variables de couleurs */
+:root {
+    --primary-color: #2a9d8f;
+    --secondary-color: #e9c46a;
+    --background-color: #f4f4f4;
+    --text-color: #333;
+    --link-color: #2a9d8f;
+    --link-hover-color: #e76f51;
+}
+
+/* Style global */
 body {
-    font-family: Arial, sans-serif;
+    font-family: 'Roboto', sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    background-color: var(--background-color);
+    color: var(--text-color);
     margin: 0;
     padding: 0;
-    background-color: #222831;  
-    color: #eeeeee; 
 }
 
-#header {
-    text-align: center;
-    background-color: #30475e; 
-    color: #eeeeee;  
-    padding: 20px 0;
+/* Liens */
+a {
+    color: var(--link-color);
+    text-decoration: none;
+    transition: color 0.3s ease;
 }
 
-#profile-photo {
-    width: 150px;
-    height: 150px;
-    border-radius: 50%;
-    margin-bottom: 15px;
-    border: 4px solid #eeeeee; 
+a:hover {
+    color: var(--link-hover-color);
 }
 
-#about-me, #skills, #projects, #experiences {
+/* Conteneur principal */
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
     padding: 20px;
-    max-width: 800px;
-    margin: 20px auto;
-    background-color: #393e46; 
-    border: 1px solid #2c2f33;
-    border-radius: 4px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);  
+}
+
+
+/* Header */
+header.section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+#theme-toggle {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background-color: var(--primary-color);
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+#theme-toggle:hover {
+    background-color: var(--secondary-color);
+}
+
+/* Sections */
+.section {
+    flex: 1 1 300px;
+    padding: 20px;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+}
+
+/* En-têtes */
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Montserrat', sans-serif;
+    margin-bottom: 10px;
+    color: var(--primary-color);
+}
+
+h1 {
+    font-size: 2.5em;
 }
 
 h2 {
-    border-bottom: 2px solid #30475e; 
-    padding-bottom: 10px;
-    margin-bottom: 15px;
+    font-size: 2em;
 }
 
-.card {
-    border: 1px solid #2c2f33;
-    padding: 10px;
-    border-radius: 4px;
-    margin-bottom: 20px;
-    background-color: #323742; 
-    transition: background-color 0.3s; 
+h3 {
+    font-size: 1.75em;
 }
 
-.card:last-child {
-    margin-bottom: 0;
+/* Boutons */
+button, .btn {
+    background-color: var(--primary-color);
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
 }
 
-.card:hover {
-    background-color: #393e46; 
+button:hover, .btn:hover {
+    background-color: var(--secondary-color);
+}
+
+/* Images */
+img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* Footer */
+footer {
+    background-color: var(--primary-color);
+    color: white;
+    text-align: center;
+    padding: 10px 0;
+    width: 100%;
+    bottom: 0;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .container {
+        flex-direction: column;
+    }
+
+    .section {
+        flex: 1 1 100%;
+    }
+}
+
+
+
+
+/* Thème sombre */
+body.dark-mode {
+    --primary-color: #1b263b;
+    --secondary-color: #415a77;
+    --background-color: #0d1b2a;
+    --text-color: #e0e1dd;
+    --link-color: #778da9;
+    --link-hover-color: #e0e1dd;
+}
+
+
+body.dark-mode h1, 
+body.dark-mode h2, 
+body.dark-mode h3, 
+body.dark-mode h4, 
+body.dark-mode h5, 
+body.dark-mode h6 {
+    color: var(--text-color);
+}
+
+body.dark-mode {
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
+body.dark-mode a {
+    color: var(--link-color);
+}
+
+body.dark-mode a:hover {
+    color: var(--link-hover-color);
+}
+
+body.dark-mode .section {
+    background-color: #1b263b;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
 }
