diff --git a/public/img/icon/debian.png b/public/img/icon/debian.png
new file mode 100644
index 0000000..c42d441
Binary files /dev/null and b/public/img/icon/debian.png differ
diff --git a/public/img/icon/docker.png b/public/img/icon/docker.png
new file mode 100644
index 0000000..a2a60b9
Binary files /dev/null and b/public/img/icon/docker.png differ
diff --git a/public/img/icon/eclipse.png b/public/img/icon/eclipse.png
new file mode 100644
index 0000000..3cf21fa
Binary files /dev/null and b/public/img/icon/eclipse.png differ
diff --git a/public/img/icon/firebase.png b/public/img/icon/firebase.png
new file mode 100644
index 0000000..d376969
Binary files /dev/null and b/public/img/icon/firebase.png differ
diff --git a/public/img/icon/swagger.png b/public/img/icon/swagger.png
new file mode 100644
index 0000000..3efd6c9
Binary files /dev/null and b/public/img/icon/swagger.png differ
diff --git a/public/img/icon/ubuntu.png b/public/img/icon/ubuntu.png
new file mode 100644
index 0000000..83e6f62
Binary files /dev/null and b/public/img/icon/ubuntu.png differ
diff --git a/public/img/icon/windows.png b/public/img/icon/windows.png
new file mode 100644
index 0000000..4a9d7e1
Binary files /dev/null and b/public/img/icon/windows.png differ
diff --git a/src/app/public/pages/home/home.component.html b/src/app/public/pages/home/home.component.html
index 2893d18..281cb9a 100644
--- a/src/app/public/pages/home/home.component.html
+++ b/src/app/public/pages/home/home.component.html
@@ -29,14 +29,13 @@
 
     <h2 class="text-4xl font-bold text-center text-primary-blue dark:text-primary-light my-12">Mes compétences</h2>
     <h3 class="text-2xl font-semibold text-primary-blue dark:text-primary-light mb-6 text-center">Technologies maîtrisées</h3>
-    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-16">
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
       <!-- Langages -->
       <div class="bg-white dark:bg-black rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
         <div class="border-t-4 border-primary-blue dark:border-primary-light rounded-t-lg"></div>
         <div class="p-6">
           <h3 class="text-xl font-semibold mb-6 text-primary-blue dark:text-primary-light">Langages</h3>
-          <div class="grid grid-cols-3 gap-4">
-
+          <div class="grid grid-cols-5 gap-4">
             <div class="flex flex-col items-center">
               <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
                 <img src="img/icon/java.png" alt="java" class="max-w-full max-h-full" />
@@ -80,7 +79,7 @@
         <div class="border-t-4 border-primary-blue dark:border-primary-light rounded-t-lg"></div>
         <div class="p-6">
           <h3 class="text-xl font-semibold mb-6 text-primary-blue dark:text-primary-light">Frameworks</h3>
-          <div class="grid grid-cols-3 gap-4">
+          <div class="grid grid-cols-5 gap-4">
             <div class="flex flex-col items-center">
               <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
                 <img src="img/icon/angular.png" alt="angular" class="max-w-full max-h-full" />
@@ -124,7 +123,7 @@
         <div class="border-t-4 border-primary-blue dark:border-primary-light rounded-t-lg"></div>
         <div class="p-6">
           <h3 class="text-xl font-semibold mb-6 text-primary-blue dark:text-primary-light">Bases de données</h3>
-          <div class="grid grid-cols-3 gap-4">
+          <div class="grid grid-cols-4 gap-4">
             <div class="flex flex-col items-center">
               <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
                 <img src="img/icon/mariaDB.png" alt="mariaDB" class="max-w-full max-h-full" />
@@ -156,33 +155,12 @@
         </div>
       </div>
 
-      <!-- Outils -->
+      <!-- IDE -->
       <div class="bg-white dark:bg-black rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
         <div class="border-t-4 border-primary-blue dark:border-primary-light rounded-t-lg"></div>
         <div class="p-6">
-          <h3 class="text-xl font-semibold mb-6 text-primary-blue dark:text-primary-light">Outils</h3>
-          <div class="grid grid-cols-3 gap-4">
-            <div class="flex flex-col items-center">
-              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
-                <img src="img/icon/androidStudio.png" alt="android studio" class="max-w-full max-h-full" />
-              </div>
-              <span class="text-xs text-primary-blue dark:text-primary-light text-center">Android</span>
-            </div>
-
-            <div class="flex flex-col items-center">
-              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
-                <img src="img/icon/git.png" alt="git" class="max-w-full max-h-full" />
-              </div>
-              <span class="text-xs text-primary-blue dark:text-primary-light text-center">Git</span>
-            </div>
-
-            <div class="flex flex-col items-center">
-              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
-                <img src="img/icon/postman.png" alt="Postman" class="max-w-full max-h-full" />
-              </div>
-              <span class="text-xs text-primary-blue dark:text-primary-light text-center">Postman</span>
-            </div>
-
+          <h3 class="text-xl font-semibold mb-6 text-primary-blue dark:text-primary-light">IDE</h3>
+          <div class="grid grid-cols-5 gap-4">
             <div class="flex flex-col items-center">
               <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
                 <img src="img/icon/phpstorm.png" alt="phpstorm" class="max-w-full max-h-full" />
@@ -197,12 +175,86 @@
               <span class="text-xs text-primary-blue dark:text-primary-light text-center">WebStorm</span>
             </div>
 
+            <div class="flex flex-col items-center">
+              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/eclipse.png" alt="eclipse" class="max-w-full max-h-full" />
+              </div>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">Eclipse</span>
+            </div>
+
             <div class="flex flex-col items-center">
               <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
                 <img src="img/icon/studio_code.png" alt="studio code" class="max-w-full max-h-full" />
               </div>
               <span class="text-xs text-primary-blue dark:text-primary-light text-center">VS Code</span>
             </div>
+
+            <div class="flex flex-col items-center">
+              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/androidStudio.png" alt="android studio" class="max-w-full max-h-full" />
+              </div>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">Android</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Outils -->
+      <div class="bg-white dark:bg-black rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
+        <div class="border-t-4 border-primary-blue dark:border-primary-light rounded-t-lg"></div>
+        <div class="p-6">
+          <h3 class="text-xl font-semibold mb-6 text-primary-blue dark:text-primary-light">Outils</h3>
+          <div class="grid grid-cols-3 gap-4">
+            <div class="flex flex-col items-center">
+              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/git.png" alt="git" class="max-w-full max-h-full" />
+              </div>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">Git</span>
+            </div>
+
+            <div class="flex flex-col items-center">
+              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/postman.png" alt="postman" class="max-w-full max-h-full" />
+              </div>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">Postman</span>
+            </div>
+
+            <div class="flex flex-col items-center">
+              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/docker.png" alt="docker" class="max-w-full max-h-full" />
+              </div>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">Docker</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- OS -->
+      <div class="bg-white dark:bg-black rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
+        <div class="border-t-4 border-primary-blue dark:border-primary-light rounded-t-lg"></div>
+        <div class="p-6">
+          <h3 class="text-xl font-semibold mb-6 text-primary-blue dark:text-primary-light">Systèmes d'exploitation</h3>
+          <div class="grid grid-cols-3 gap-4">
+            <div class="flex flex-col items-center">
+              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/windows.png" alt="windows" class="max-w-full max-h-full" />
+              </div>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">Windows</span>
+            </div>
+
+            <div class="flex flex-col items-center">
+              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/debian.png" alt="debian" class="max-w-full max-h-full" />
+              </div>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">Debian</span>
+            </div>
+
+            <div class="flex flex-col items-center">
+              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/ubuntu.png" alt="ubuntu" class="max-w-full max-h-full" />
+              </div>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">Ubuntu</span>
+            </div>
           </div>
         </div>
       </div>
@@ -216,7 +268,7 @@
         <div class="border-t-4 border-primary-light dark:border-primary-white rounded-t-lg"></div>
         <div class="p-6">
           <h3 class="text-xl font-semibold mb-6 text-primary-light dark:text-primary-white">Langages</h3>
-          <div class="grid grid-cols-3 gap-4">
+          <div class="grid grid-cols-4 gap-4">
             <div class="flex flex-col items-center">
               <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
                 <img src="img/icon/dart.png" alt="dart" class="max-w-full max-h-full" />
@@ -283,7 +335,7 @@
         <div class="border-t-4 border-primary-light dark:border-primary-white rounded-t-lg"></div>
         <div class="p-6">
           <h3 class="text-xl font-semibold mb-6 text-primary-light dark:text-primary-white">Bases de données</h3>
-          <div class="grid grid-cols-3 gap-4">
+          <div class="grid grid-cols-2 gap-4">
             <div class="flex flex-col items-center">
               <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
                 <img src="img/icon/SQLite.png" alt="SQLite" class="max-w-full max-h-full opacity-75" />
@@ -306,7 +358,7 @@
         <div class="border-t-4 border-primary-light dark:border-primary-white rounded-t-lg"></div>
         <div class="p-6">
           <h3 class="text-xl font-semibold mb-6 text-primary-light dark:text-primary-white">Outils</h3>
-          <div class="grid grid-cols-3 gap-4">
+          <div class="grid grid-cols-4 gap-4">
             <div class="flex flex-col items-center">
               <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
                 <img src="img/icon/azure.png" alt="azure" class="max-w-full max-h-full opacity-75" />
@@ -320,6 +372,20 @@
               </div>
               <span class="text-xs text-primary-light dark:text-primary-white text-center">AWS</span>
             </div>
+
+            <div class="flex flex-col items-center">
+              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/firebase.png" alt="firebase" class="max-w-full max-h-full opacity-75" />
+              </div>
+              <span class="text-xs text-primary-light dark:text-primary-white text-center">Firebase</span>
+            </div>
+
+            <div class="flex flex-col items-center">
+              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/swagger.png" alt="swagger" class="max-w-full max-h-full opacity-75" />
+              </div>
+              <span class="text-xs text-primary-light dark:text-primary-white text-center">Swagger</span>
+            </div>
           </div>
         </div>
       </div>