diff --git a/_includes/head-custom-metadata.html b/_includes/head-custom-metadata.html
new file mode 100644
index 0000000..6f426e0
--- /dev/null
+++ b/_includes/head-custom-metadata.html
@@ -0,0 +1,5 @@
+<meta charset='utf-8'>
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
+<link rel="icon" type="image/x-icon" href="/assets/images/team-logo-optimized.webp">
\ No newline at end of file
diff --git a/_includes/head-custom.html b/_includes/head-custom.html
index 21e30c2..1db0d10 100644
--- a/_includes/head-custom.html
+++ b/_includes/head-custom.html
@@ -1,3 +1,4 @@
+<!-- start custom head snippets, customize with your own _includes/head-custom.html file -->
 
 <!-- Setup theme-color -->
 {% include head-custom-theme-colors.html %}
@@ -5,25 +6,33 @@
 <!-- Setup Google Analytics -->
 {% include head-custom-google-analytics.html %}
 
-<!-- link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | relative_url }}" -->
+
+<!-- Setup favicon, stylesheets and metadata -->
+{% include head-custom-metadata.html %}
+
 
 <header>
-<div class="container">
+  <div class="container">
     <center>
-      <img src="/assets/images/team-logo.svg" alt="Cyb3rM0nk3ys logo" width="7%" height="7%"/>
+      <img src="/assets/images/team-logo.png" alt="Cyb3rM0nk3ys logo" width="7%" height="7%"/>
+
       <a id="a-title" href="/">
         <h1>Cyb3rM0nk3ys</h1>
       </a>
-      <h2>Cyb3rM0nk3ys is a CTF team based in Verona.</h2>
+      <h2>Cyb3rM0nk3ys is a ...CTF team...</h2>
 
-      <a href="/">
+      <a href="/home">
         Home</a>
+      <a href="/about">
+        About us
+      </a>
+      <a href="/join">
+        Join us</a>
       <a href="/members">
         Monkeys</a>
-      <a href="/join">
-        Join us</a>  
+      <!-- profiles -->
     </center>
   </div>
 </header>
 
-<!-- end custom head snippets -->
+<!-- end custom head snippets -->
\ No newline at end of file
diff --git a/_layouts/404.html b/_layouts/404.html
index 7bec1b9..2b293e3 100644
--- a/_layouts/404.html
+++ b/_layouts/404.html
@@ -2,10 +2,7 @@
 <html lang="{{ site.lang | default: " en-US" }}">
 
 <head>
-    <meta charset='utf-8'>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
+
     {% include head-custom.html %}
 
     {% seo %}
@@ -14,7 +11,9 @@
 <body>
     <div class="container">
         <center>
-            <b><h1>404 ~ banana not found</h1></b>
+            <b>
+                <h1>404 ~ banana not found</h1>
+            </b>
             <section id="main_content">
                 <div id="gif-container">
                     <img id="gif" src="">
@@ -27,11 +26,37 @@
             // chatGPT make a js function that returns a random GIF
             function getRandomGif() {
                 const gifFiles = [
-                    "shocked-monkey1.gif",
-                    "shocked-monkey2.gif",
+                    "shocked-monkey1",
+                    "shocked-monkey2",
+                    "shocked-monkey3",
+                    "angry-monkey",
+                    "type-monkey",
                 ];
-                const randomGif = gifFiles[Math.floor(Math.random() * gifFiles.length)];
-                document.getElementById("gif").src = `/assets/gifs/${randomGif}`;
+                const randomIndex = Math.floor(Math.random() * gifFiles.length);
+                const randomGif = gifFiles[randomIndex];
+                const placeholderImage = new Image();
+
+                // Preload webp image as a placeholder
+                placeholderImage.src = `assets/images/gifs-first-image/${randomGif.concat(".webp")}`;
+                placeholderImage.onload = function () {
+                    // Once the webp image is loaded, set it as the placeholder
+                    let existingImage = document.getElementById("gif");
+
+                    existingImage.parentNode.replaceChild(placeholderImage, existingImage);
+                    placeholderImage.id = "gif"
+
+                    // Load the actual GIF in the background
+                    const actualGif = new Image();
+                    actualGif.src = `assets/gifs/${randomGif.concat(".gif")}`;
+                    actualGif.onload = function () {
+                        // Replace the placeholder with the loaded GIF
+                        existingImage = document.getElementById("gif");
+
+                        existingImage.parentNode.replaceChild(actualGif, existingImage);
+                        existingImage.id = "gif"
+                    };
+                };
+
             }
             window.onload = getRandomGif;
         </script>
diff --git a/_layouts/achievement.html b/_layouts/achievement.html
index 336bb0c..c061016 100644
--- a/_layouts/achievement.html
+++ b/_layouts/achievement.html
@@ -2,10 +2,7 @@
 <html lang="{{ site.lang | default: " en-US" }}">
 
 <head>
-  <meta charset='utf-8'>
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
+
   {% include head-custom.html %}
 
   {% seo %}
@@ -14,8 +11,8 @@
 <body>
   <div class="container">
     <section id="writeup">
-        <small>{{ page.date | date: "%-d %B %Y" }}</small>
-        <h1><b>{{ page.title }}</b></h1>
+      <small>{{ page.date | date: "%-d %B %Y" }}</small>
+      <h1><b>{{ page.title }}</b></h1>
       <hr>
       {{content}}
     </section>
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index 93bbcf9..a326254 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -1,22 +1,20 @@
 <!DOCTYPE html>
-<html lang="{{ site.lang | default: "en-US" }}">
-  <head>
-    <meta charset='utf-8'>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
-    {% include head-custom.html %}
+<html lang="{{ site.lang | default: " en-US" }}">
 
-{% seo %}
-  </head>
+<head>
 
-  <body>
-    <div class="container">
-      <section id="main_content">
-        <div id="ascii-art"></div>
-        <div id="left-column">
-          <!-- mi annoiavo di questi investigatori scarsi quindi ho deciso di leakare una vera flag :) -->
-          <pre>
+  {% include head-custom.html %}
+
+  {% seo %}
+</head>
+
+<body>
+  <div class="container">
+    <section id="main_content">
+      <div id="ascii-art"></div>
+      <div id="left-column">
+        <!-- mi annoiavo di questi investigatori scarsi quindi ho deciso di leakare una vera flag :) -->
+        <pre>
             ██                                                                    
             ██        ██████████        ████████████        
             ██████████▒▒▒▒▒▒▒▒▒▒████████▒▒▒▒▒▒▒▒▒▒▒▒██  
@@ -67,11 +65,12 @@
                   ░░░░░░██░░▒▒████████████████████████░░▒▒████░░░░░░░░░░░░░░░░    
                     ░░░░░░████░░░░░░░░░░░░░░░░░░░░░░░░████░░░░░░░░░░░░░░░░            
           </pre>
-        </div>
-        <div id="right-column">
-          {{ content }}
-        </div>
-      </section>
-    </div>
-  </body>
-</html>
+      </div>
+      <div id="right-column">
+        {{ content }}
+      </div>
+    </section>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/_layouts/post.html b/_layouts/post.html
index fced31d..963ce98 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -2,10 +2,7 @@
 <html lang="{{ site.lang | default: " en-US" }}">
 
 <head>
-  <meta charset='utf-8'>
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
+
   {% include head-custom.html %}
 
   {% seo %}
@@ -14,9 +11,9 @@
 <body>
   <div class="container">
     <section id="writeup">
-        <small>{{ page.date | date: "%-d %B %Y" }}</small>
-        <h1><b>{{ page.title }}</b></h1>
-        <p class="view">by {{ page.author | default: site.author }} | Category: {{ page.chall-category }}</p>
+      <small>{{ page.date | date: "%-d %B %Y" }}</small>
+      <h1><b>{{ page.title }}</b></h1>
+      <p class="view">by {{ page.author | default: site.author }} | Category: {{ page.chall-category }}</p>
       <hr>
       {{content}}
 
diff --git a/assets/gifs/angry-monkey.gif b/assets/gifs/angry-monkey.gif
new file mode 100644
index 0000000..89490e2
Binary files /dev/null and b/assets/gifs/angry-monkey.gif differ
diff --git a/assets/gifs/shocked-monkey3.gif b/assets/gifs/shocked-monkey3.gif
new file mode 100644
index 0000000..950dcb8
Binary files /dev/null and b/assets/gifs/shocked-monkey3.gif differ
diff --git a/assets/gifs/type-monkey.gif b/assets/gifs/type-monkey.gif
new file mode 100644
index 0000000..dca7f27
Binary files /dev/null and b/assets/gifs/type-monkey.gif differ
diff --git a/assets/images/gifs-first-image/angry-monkey.webp b/assets/images/gifs-first-image/angry-monkey.webp
new file mode 100644
index 0000000..de13008
Binary files /dev/null and b/assets/images/gifs-first-image/angry-monkey.webp differ
diff --git a/assets/images/gifs-first-image/shocked-monkey1.webp b/assets/images/gifs-first-image/shocked-monkey1.webp
new file mode 100644
index 0000000..74b2d1b
Binary files /dev/null and b/assets/images/gifs-first-image/shocked-monkey1.webp differ
diff --git a/assets/images/gifs-first-image/shocked-monkey2.webp b/assets/images/gifs-first-image/shocked-monkey2.webp
new file mode 100644
index 0000000..05e31b4
Binary files /dev/null and b/assets/images/gifs-first-image/shocked-monkey2.webp differ
diff --git a/assets/images/gifs-first-image/shocked-monkey3.webp b/assets/images/gifs-first-image/shocked-monkey3.webp
new file mode 100644
index 0000000..28ed4c8
Binary files /dev/null and b/assets/images/gifs-first-image/shocked-monkey3.webp differ
diff --git a/assets/images/gifs-first-image/type-monkey.webp b/assets/images/gifs-first-image/type-monkey.webp
new file mode 100644
index 0000000..c1169ea
Binary files /dev/null and b/assets/images/gifs-first-image/type-monkey.webp differ
diff --git a/assets/images/team-logo-optimized.webp b/assets/images/team-logo-optimized.webp
new file mode 100644
index 0000000..44b27f6
Binary files /dev/null and b/assets/images/team-logo-optimized.webp differ
diff --git a/assets/images/team-logo.png b/assets/images/team-logo.png
new file mode 100644
index 0000000..e40e336
Binary files /dev/null and b/assets/images/team-logo.png differ
