diff --git a/public/img/icon/aws.png b/public/img/icon/aws.png
new file mode 100644
index 0000000..f5f5dfa
Binary files /dev/null and b/public/img/icon/aws.png differ
diff --git a/public/img/icon/azure.png b/public/img/icon/azure.png
new file mode 100644
index 0000000..4d6995f
Binary files /dev/null and b/public/img/icon/azure.png differ
diff --git a/public/img/icon/postman.png b/public/img/icon/postman.png
new file mode 100644
index 0000000..6900db6
Binary files /dev/null and b/public/img/icon/postman.png differ
diff --git a/src/app/public/pages/home/home.component.html b/src/app/public/pages/home/home.component.html
index 0dfe7cf..2893d18 100644
--- a/src/app/public/pages/home/home.component.html
+++ b/src/app/public/pages/home/home.component.html
@@ -17,9 +17,7 @@
       </div>
       <div class="md:w-1/2 flex justify-center">
         <div
-          class="profile-container w-64 h-64 rounded-full overflow-hidden border-4 border-primary-dark dark:border-primary-light shadow-xl transition duration-300 transform hover:scale-105 profile-shadow"
-          [class.rotate-3d]="isRotating"
-          (click)="toggleRotation()">
+          class="profile-container w-64 h-64 rounded-full overflow-hidden border-4 border-primary-dark dark:border-primary-light shadow-xl transition duration-300 transform hover:scale-105 profile-shadow">
           <img
             src="img/pp.jpeg"
             alt="Johan Leroy"
@@ -29,9 +27,9 @@
       </div>
     </div>
 
-    <h2 class="text-4xl font-bold text-center text-primary-blue dark:text-primary-light my-5">Mes compétences</h2>
+    <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-3 lg:grid-cols-5 gap-6 mb-16">
+    <div class="grid grid-cols-1 md:grid-cols-4 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>
@@ -178,6 +176,13 @@
               <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/phpstorm.png" alt="phpstorm" class="max-w-full max-h-full" />
@@ -201,26 +206,11 @@
           </div>
         </div>
       </div>
-
-      <!-- Centres d'intérêt -->
-      <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">Centres d'intérêt</h3>
-          <div class="flex flex-wrap gap-2">
-            <span class="bg-primary-accent text-white px-3 py-1 rounded-full text-sm hover:bg-opacity-80 transition-all duration-300">Jeux vidéo</span>
-            <span class="bg-primary-accent text-white px-3 py-1 rounded-full text-sm hover:bg-opacity-80 transition-all duration-300">Films & Séries</span>
-            <span class="bg-primary-accent text-white px-3 py-1 rounded-full text-sm hover:bg-opacity-80 transition-all duration-300">DJ</span>
-            <span class="bg-primary-accent text-white px-3 py-1 rounded-full text-sm hover:bg-opacity-80 transition-all duration-300">Projet personnel</span>
-          </div>
-        </div>
-      </div>
     </div>
 
-    <!-- Technologies débutantes -->
-    <h3 class="text-2xl font-semibold text-primary-blue dark:text-primary-light mb-6 text-center">Technologies en apprentissage</h3>
-
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+    <!-- Technologies manipulé -->
+    <h3 class="text-2xl font-semibold text-primary-blue dark:text-primary-light mb-6 text-center">Autres technologies manipulées</h3>
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-16">
       <!-- Langages débutants -->
       <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-light dark:border-primary-white rounded-t-lg"></div>
@@ -262,7 +252,7 @@
       <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-light dark:border-primary-white rounded-t-lg"></div>
         <div class="p-6">
-          <h3 class="text-xl font-semibold mb-6 text-[#3E92CC]">Frameworks</h3>
+          <h3 class="text-xl font-semibold mb-6 text-primary-light dark:text-primary-white">Frameworks</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">
@@ -292,7 +282,7 @@
       <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-light dark:border-primary-white rounded-t-lg"></div>
         <div class="p-6">
-          <h3 class="text-xl font-semibold mb-6 text-[#3E92CC]">Bases de données</h3>
+          <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="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">
@@ -310,6 +300,83 @@
           </div>
         </div>
       </div>
+
+      <!-- Outils débutantes -->
+      <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-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="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" />
+              </div>
+              <span class="text-xs text-primary-light dark:text-primary-white text-center">Azure</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/aws.png" alt="aws" class="max-w-full max-h-full opacity-75" />
+              </div>
+              <span class="text-xs text-primary-light dark:text-primary-white text-center">AWS</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Centres d'intérêt -->
+    <div class="bg-primary-white dark:bg-primary-dark rounded-lg shadow-lg overflow-hidden">
+      <div class="bg-gradient-to-r from-primary-blue to-primary-light h-2 w-full"></div>
+      <div class="p-6">
+        <h2 class="text-2xl text-primary-dark dark:text-white mb-6">Centres d'intérêt</h2>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <!-- Jeux vidéo -->
+          <div class="relative group cursor-pointer">
+            <div class="absolute inset-0 bg-purple-500 rounded-lg opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
+            <div class="relative p-6 flex flex-col items-center justify-center bg-white dark:bg-black rounded-lg shadow-md transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl">
+              <div class="w-12 h-12 flex items-center justify-center rounded-full bg-purple-500 text-white mb-4">
+                <i class="fas fa-gamepad text-xl"></i>
+              </div>
+              <span class="font-medium text-primary-dark dark:text-primary-white text-center">Jeux vidéo</span>
+            </div>
+          </div>
+
+          <!-- Films & Séries -->
+          <div class="relative group cursor-pointer">
+            <div class="absolute inset-0 bg-blue-500 rounded-lg opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
+            <div class="relative p-6 flex flex-col items-center justify-center bg-white dark:bg-black rounded-lg shadow-md transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl">
+              <div class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-500 text-white mb-4">
+                <i class="fas fa-film text-xl"></i>
+              </div>
+              <span class="font-medium text-primary-dark dark:text-primary-white text-center">Films & Séries</span>
+            </div>
+          </div>
+
+          <!-- DJ -->
+          <div class="relative group cursor-pointer">
+            <div class="absolute inset-0 bg-green-500 rounded-lg opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
+            <div class="relative p-6 flex flex-col items-center justify-center bg-white dark:bg-black rounded-lg shadow-md transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl">
+              <div class="w-12 h-12 flex items-center justify-center rounded-full bg-green-500 text-white mb-4">
+                <i class="fas fa-music text-xl"></i>
+              </div>
+              <span class="font-medium text-primary-dark dark:text-primary-white text-center">DJ</span>
+            </div>
+          </div>
+
+          <!-- Projet personnel -->
+          <div class="relative group cursor-pointer">
+            <div class="absolute inset-0 bg-orange-500 rounded-lg opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
+            <div class="relative p-6 flex flex-col items-center justify-center bg-white dark:bg-black rounded-lg shadow-md transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl">
+              <div class="w-12 h-12 flex items-center justify-center rounded-full bg-orange-500 text-white mb-4">
+                <i class="fas fa-laptop-code text-xl"></i>
+              </div>
+              <span class="font-medium text-primary-dark dark:text-primary-white text-center">Projet personnel</span>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </section>
diff --git a/src/app/public/pages/home/home.component.ts b/src/app/public/pages/home/home.component.ts
index 9bd782b..daf7511 100644
--- a/src/app/public/pages/home/home.component.ts
+++ b/src/app/public/pages/home/home.component.ts
@@ -18,7 +18,6 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
   private particles: Particle[] = [];
   private particleCount = 100;
   private animationFrameId: number | null = null;
-  isRotating: boolean = false;
 
   constructor(private seoService: SeoService, private ngZone: NgZone) { }
 
@@ -32,15 +31,6 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
     this.seoService.createCanonicalLink();
   }
 
-  toggleRotation(): void {
-    if (!this.isRotating) {
-      this.isRotating = true;
-      setTimeout(() => {
-        this.isRotating = false;
-      }, 1500);
-    }
-  }
-
   ngAfterViewInit(): void {
     this.ngZone.runOutsideAngular(() => {
       this.createParticles();
diff --git a/src/index.html b/src/index.html
index 8be1a5b..436b079 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,6 +6,7 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <script src="https://kit.fontawesome.com/dbb1c9090a.js" crossorigin="anonymous"></script>
 </head>
 <body>
   <app-root></app-root>