From cfebe6be4f97f32eac360eb6c8b9633e6db866f2 Mon Sep 17 00:00:00 2001
From: Guillaume-El <guillaume.el-bawab@student.uclouvain.be>
Date: Tue, 29 Oct 2024 11:36:31 +0100
Subject: [PATCH] add style for blog pages and light/dark mode

---
 blogs/Phoenix.html   |  76 ++++++++++++++++++++++++++--
 blogs/abhinav.html   |  90 ++++++++++++++++++++++++++++++---
 blogs/abhishek.html  |  74 +++++++++++++++++++++++++--
 blogs/alexis.html    |  78 ++++++++++++++++++++++++++---
 blogs/anuran.html    |  74 +++++++++++++++++++++++++--
 blogs/arvind.html    |  76 ++++++++++++++++++++++++++--
 blogs/blog.css       | 117 ++++++++++++++++++++++++++++++++++++++++++-
 blogs/dan.html       |  76 ++++++++++++++++++++++++++--
 blogs/disha.html     |  78 +++++++++++++++++++++++++++--
 blogs/elise.html     |  74 +++++++++++++++++++++++++--
 blogs/elizabeth.html |  75 +++++++++++++++++++++++++--
 blogs/eslem.html     |  74 +++++++++++++++++++++++++--
 blogs/manish.html    |  76 ++++++++++++++++++++++++++--
 blogs/nalowa.html    |  74 +++++++++++++++++++++++++--
 blogs/omkar.html     |  74 +++++++++++++++++++++++++--
 blogs/pagsum.html    |  74 +++++++++++++++++++++++++--
 blogs/prasanna.html  |  76 ++++++++++++++++++++++++++--
 blogs/rayarka2.html  |  76 ++++++++++++++++++++++++++--
 blogs/rayarka26.html |  76 ++++++++++++++++++++++++++--
 blogs/rayarka3.html  |  76 ++++++++++++++++++++++++++--
 blogs/shelby.html    |  74 +++++++++++++++++++++++++--
 blogs/shruti.html    |  76 ++++++++++++++++++++++++++--
 blogs/tannistha.html |  74 +++++++++++++++++++++++++--
 blogs/vidhisha.html  |  74 +++++++++++++++++++++++++--
 blogs/wesley.html    |  74 +++++++++++++++++++++++++--
 25 files changed, 1826 insertions(+), 110 deletions(-)
diff --git a/blogs/Phoenix.html b/blogs/Phoenix.html
index 5089ad6..dd9136b 100644
--- a/blogs/Phoenix.html
+++ b/blogs/Phoenix.html
@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
     <title>Blog: The Miraculous Tale of Bless</title>
@@ -14,7 +15,7 @@
 
 <body>
 
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -23,10 +24,49 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
-      <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b22-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
+      <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b22-poster.jpg')] bg-no-repeat bg-cover snap-center rounded-xl">
 
       </div>
 
@@ -110,7 +150,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       <div class=" flex-1 flex flex-col items-center justify-center ">
         <div class="text-2xl">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -119,7 +159,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -128,7 +168,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -140,6 +180,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
         </div>
       </div>
       <!-- Social icons end -->
+
+                  <!-- Scroll to top -->
+                  <div class="md:pr-8 hover-effect">
+                    <a href="#top">
+                      <button id="bttbutton" title="backtotop">
+                        <img src="../image.svg" class="top-arrow" />
+                      </button>
+                    </a>
+                  </div>
+                  <!-- Scroll to top -->
+            
+                  <script>
+                    const bttButton = document.getElementById('bttbutton');
+                  
+                    window.addEventListener('scroll', function() {
+                      // Calculer la hauteur de la fenêtre + position de défilement
+                      const scrollPosition = window.scrollY;
+                      const windowHeight = window.innerHeight;
+                      // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+                      if (scrollPosition <= 0) {
+                        bttButton.style.display = "none";
+                      } else {
+                        bttButton.style.display = "block";
+                      }
+                    });
+                  </script>
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
diff --git a/blogs/abhinav.html b/blogs/abhinav.html
index 7428e39..07be51b 100644
--- a/blogs/abhinav.html
+++ b/blogs/abhinav.html
@@ -6,13 +6,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
+    
+.
+    <!-- <link rel="stylesheet" href="../output.css" /> -->
     <title>Blog: Abhinav</title>
 
 </head>
 <body>
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -21,8 +25,57 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
+                  <!-- google translate -->
+                  <div id="google_translate_element">
+                    <script
+                      type="text/javascript"
+                      src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
+                    ></script>
+                  </div>
+      
+                
+                <!-- google translate -->
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
       <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b9-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
 
@@ -111,7 +164,7 @@ <h3 class="text-xl xl:text-2xl font-semibold tracking-wide">Fortunately, the fol
     <!-- Footer section  -->
   
 
-  <footer class="bg-black z-50 text-white ">
+  <footer class="bg-black text-white shadow-inner pt-4 pb-8">
 
     <div class=" flex p-5 justify-between ">
 
@@ -148,7 +201,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       <div class=" flex-1 flex flex-col items-center justify-center ">
         <div class="text-2xl">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -157,7 +210,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -166,7 +219,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -179,6 +232,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       </div>
       <!-- Social icons end -->
 
+      <!-- Scroll to top -->
+      <div class="md:pr-8 hover-effect">
+        <a href="#top">
+          <button id="bttbutton" title="backtotop">
+            <img src="../image.svg" class="top-arrow" />
+          </button>
+        </a>
+      </div>
+      <!-- Scroll to top -->
+
+      <script>
+        const bttButton = document.getElementById('bttbutton');
+      
+        window.addEventListener('scroll', function() {
+          // Calculer la hauteur de la fenêtre + position de défilement
+          const scrollPosition = window.scrollY;
+          const windowHeight = window.innerHeight;
+          // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+          if (scrollPosition <= 0) {
+            bttButton.style.display = "none";
+          } else {
+            bttButton.style.display = "block";
+          }
+        });
+      </script>
+
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
@@ -194,6 +273,5 @@ <h3 class="text-2xl text-center">Subscribe to our newsletter</h3>
     </div>
 
   </footer>
-    
 </body>
 </html>
\ No newline at end of file
diff --git a/blogs/abhishek.html b/blogs/abhishek.html
index 46d75fe..43c4273 100644
--- a/blogs/abhishek.html
+++ b/blogs/abhishek.html
@@ -6,13 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
     <title>Blog: Abhishek</title>
 
 </head>
 <body>
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -21,8 +22,47 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
       <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b11-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
 
@@ -129,7 +169,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       <div class=" flex-1 flex flex-col items-center justify-center ">
         <div class="text-2xl">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -138,7 +178,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -147,7 +187,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -160,6 +200,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       </div>
       <!-- Social icons end -->
 
+            <!-- Scroll to top -->
+            <div class="md:pr-8 hover-effect">
+              <a href="#top">
+                <button id="bttbutton" title="backtotop">
+                  <img src="../image.svg" class="top-arrow" />
+                </button>
+              </a>
+            </div>
+            <!-- Scroll to top -->
+      
+            <script>
+              const bttButton = document.getElementById('bttbutton');
+            
+              window.addEventListener('scroll', function() {
+                // Calculer la hauteur de la fenêtre + position de défilement
+                const scrollPosition = window.scrollY;
+                const windowHeight = window.innerHeight;
+                // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+                if (scrollPosition <= 0) {
+                  bttButton.style.display = "none";
+                } else {
+                  bttButton.style.display = "block";
+                }
+              });
+            </script>
+
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
diff --git a/blogs/alexis.html b/blogs/alexis.html
index 9fd03f3..499ca23 100644
--- a/blogs/alexis.html
+++ b/blogs/alexis.html
@@ -6,13 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
     <title>Blog: Alexis</title>
 
 </head>
 <body>
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -21,8 +22,47 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
       <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b12-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
 
@@ -123,7 +163,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       <div class=" flex-1 flex flex-col items-center justify-center ">
         <div class="text-2xl">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -131,8 +171,8 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
                   d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
               </svg>
             </a>
-          </div>
-          <div>
+          </div >
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -140,8 +180,8 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
                   d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
               </svg>
             </a>
-          </div>
-          <div>
+          </div >
+          <div class="hover:scale-110 transition-all">
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -154,6 +194,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       </div>
       <!-- Social icons end -->
 
+            <!-- Scroll to top -->
+            <div class="md:pr-8 hover-effect">
+              <a href="#top">
+                <button id="bttbutton" title="backtotop">
+                  <img src="../image.svg" class="top-arrow" />
+                </button>
+              </a>
+            </div>
+            <!-- Scroll to top -->
+      
+            <script>
+              const bttButton = document.getElementById('bttbutton');
+            
+              window.addEventListener('scroll', function() {
+                // Calculer la hauteur de la fenêtre + position de défilement
+                const scrollPosition = window.scrollY;
+                const windowHeight = window.innerHeight;
+                // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+                if (scrollPosition <= 0) {
+                  bttButton.style.display = "none";
+                } else {
+                  bttButton.style.display = "block";
+                }
+              });
+            </script>
+
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
diff --git a/blogs/anuran.html b/blogs/anuran.html
index e031915..36a2308 100644
--- a/blogs/anuran.html
+++ b/blogs/anuran.html
@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
     <title>Blog: Anuran</title>
 </head>
 <body>
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -20,8 +21,47 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
       <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b5-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
 
@@ -116,7 +156,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       <div class=" flex-1 flex flex-col items-center justify-center ">
         <div class="text-2xl">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -125,7 +165,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -134,7 +174,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -147,6 +187,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       </div>
       <!-- Social icons end -->
 
+            <!-- Scroll to top -->
+            <div class="md:pr-8 hover-effect">
+              <a href="#top">
+                <button id="bttbutton" title="backtotop">
+                  <img src="../image.svg" class="top-arrow" />
+                </button>
+              </a>
+            </div>
+            <!-- Scroll to top -->
+      
+            <script>
+              const bttButton = document.getElementById('bttbutton');
+            
+              window.addEventListener('scroll', function() {
+                // Calculer la hauteur de la fenêtre + position de défilement
+                const scrollPosition = window.scrollY;
+                const windowHeight = window.innerHeight;
+                // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+                if (scrollPosition <= 0) {
+                  bttButton.style.display = "none";
+                } else {
+                  bttButton.style.display = "block";
+                }
+              });
+            </script>
+
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
diff --git a/blogs/arvind.html b/blogs/arvind.html
index fc0cc39..175ff03 100644
--- a/blogs/arvind.html
+++ b/blogs/arvind.html
@@ -6,13 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
     <title>Blog: Arvind</title>
 
 </head>
 <body>
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -21,10 +22,49 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
-      <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b21-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
+      <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b21-poster.jpg')] bg-no-repeat bg-cover snap-center rounded-xl">
 
       </div>
 
@@ -111,7 +151,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       <div class=" flex-1 flex flex-col items-center justify-center ">
         <div class="text-2xl">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -120,7 +160,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -129,7 +169,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -142,6 +182,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       </div>
       <!-- Social icons end -->
 
+            <!-- Scroll to top -->
+            <div class="md:pr-8 hover-effect">
+              <a href="#top">
+                <button id="bttbutton" title="backtotop">
+                  <img src="../image.svg" class="top-arrow" />
+                </button>
+              </a>
+            </div>
+            <!-- Scroll to top -->
+      
+            <script>
+              const bttButton = document.getElementById('bttbutton');
+            
+              window.addEventListener('scroll', function() {
+                // Calculer la hauteur de la fenêtre + position de défilement
+                const scrollPosition = window.scrollY;
+                const windowHeight = window.innerHeight;
+                // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+                if (scrollPosition <= 0) {
+                  bttButton.style.display = "none";
+                } else {
+                  bttButton.style.display = "block";
+                }
+              });
+            </script>
+
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
diff --git a/blogs/blog.css b/blogs/blog.css
index c6704a8..1b23280 100644
--- a/blogs/blog.css
+++ b/blogs/blog.css
@@ -5,10 +5,17 @@
     padding: 0;
     box-sizing: border-box;
     font-family: 'Poppins', sans-serif;
+    /* background-color: rgb(55, 65, 81); */
+    /* transition: 0.3s; */
+}
+
+body{
+    background-color: rgb(216, 222, 223)
 }
 
 html{
     font-size: 10px;
+    scroll-behavior: smooth;    /* gives a smooth scroll effect */
 }
 
 h1{
@@ -19,4 +26,112 @@ h1{
 main .p {
     color: #5b5963;
 
-}
\ No newline at end of file
+}
+
+/* make the header sticky on scroll */
+#header {
+	position: fixed;
+	top: 0;
+	transition: 0.25s;
+	width: 100%;
+    height: 10rem;
+	z-index: 100;
+}
+
+.add_border{
+  border-bottom: 2px solid #ae642c;
+  /* give a bottom shadow */
+  box-shadow:  0px 10px 10px 0px rgba(0, 0, 0, 0.4);
+}
+.nav-hidden{
+	top: -100px;
+}
+
+.header-container{
+    padding-left: 10px;
+    padding-right: 10px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%;
+    /* background-color: #f9d6b7; */
+    background-color: (203, 213, 225, 1)
+}
+
+.back-arrow, .home{
+    height: 30px;
+    width: 30px;
+    position: relative;
+}
+
+body,
+.back-arrow,
+.home,
+.ri-moon-line,
+.ri-sun-line,
+.header-container{
+    transition: 0.3s;
+}
+
+.back-arrow:hover, .home:hover{
+    scale: 1.1;
+}
+
+.logo-container{
+    flex-direction: row;
+    display: flex;
+    column-gap: 20px;
+}
+
+/* --- LOGOS --- */
+
+#switch{
+    font-size: 2.5rem;
+}
+
+.ri-moon-line:hover{
+    color: red;
+    cursor: pointer;
+}
+
+.ri-sun-line{
+    color: white;
+}
+
+.ri-sun-line:hover{
+    color:rgb(218, 185, 21);
+    cursor: pointer;
+}
+
+.hover-effect{
+    position: fixed;
+    bottom:15px;
+    right: 28px;
+  }
+
+.top-arrow{
+    width: 40px;
+    height: 40px;
+    transition: 0.2s ease;
+}
+
+.top-arrow:hover{
+    transform: scale(1.1);
+}
+
+/* FOOTER */
+footer{
+    font-size: 1.4rem;
+}
+
+/* --- DARK MOD --- */
+
+body.dark-mode{
+    background-color: rgba(180, 83, 9, 0.605);
+}
+  
+.dark-mode .header-container {
+    background-color: #78350f; /* Fond pour le header en mode sombre */
+    transition: 0.2;
+}
diff --git a/blogs/dan.html b/blogs/dan.html
index 3d25aec..5d5474b 100644
--- a/blogs/dan.html
+++ b/blogs/dan.html
@@ -6,13 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
     <title>Blog: Dan</title>
 
 </head>
 <body>
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -21,8 +22,47 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
         <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b1-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
 
@@ -103,7 +143,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       <div class=" flex-1 flex flex-col items-center justify-center ">
         <div class="text-2xl">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -111,8 +151,8 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
                   d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
               </svg>
             </a>
-          </div>
-          <div>
+          </div >
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -121,7 +161,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -134,6 +174,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       </div>
       <!-- Social icons end -->
 
+            <!-- Scroll to top -->
+            <div class="md:pr-8 hover-effect">
+              <a href="#top">
+                <button id="bttbutton" title="backtotop">
+                  <img src="../image.svg" class="top-arrow" />
+                </button>
+              </a>
+            </div>
+            <!-- Scroll to top -->
+      
+            <script>
+              const bttButton = document.getElementById('bttbutton');
+            
+              window.addEventListener('scroll', function() {
+                // Calculer la hauteur de la fenêtre + position de défilement
+                const scrollPosition = window.scrollY;
+                const windowHeight = window.innerHeight;
+                // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+                if (scrollPosition <= 0) {
+                  bttButton.style.display = "none";
+                } else {
+                  bttButton.style.display = "block";
+                }
+              });
+            </script>
+
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
diff --git a/blogs/disha.html b/blogs/disha.html
index a648f96..9149082 100644
--- a/blogs/disha.html
+++ b/blogs/disha.html
@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
     <title>Blog: Disha</title>
 </head>
 <body>
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -20,8 +21,49 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header"20>
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+    
+    
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
       <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b4-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
 
@@ -158,9 +200,9 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
 
       <!-- Social icons  -->
       <div class=" flex-1 flex flex-col items-center justify-center ">
-        <div class="text-2xl">Follow us on</div>
+        <div class="text-2xl font-medium">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -169,7 +211,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -178,7 +220,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -191,6 +233,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       </div>
       <!-- Social icons end -->
 
+            <!-- Scroll to top -->
+            <div class="md:pr-8 hover-effect">
+              <a href="#top">
+                <button id="bttbutton" title="backtotop">
+                  <img src="../image.svg" class="top-arrow" />
+                </button>
+              </a>
+            </div>
+            <!-- Scroll to top -->
+      
+            <script>
+              const bttButton = document.getElementById('bttbutton');
+            
+              window.addEventListener('scroll', function() {
+                // Calculer la hauteur de la fenêtre + position de défilement
+                const scrollPosition = window.scrollY;
+                const windowHeight = window.innerHeight;
+                // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+                if (scrollPosition <= 0) {
+                  bttButton.style.display = "none";
+                } else {
+                  bttButton.style.display = "block";
+                }
+              });
+            </script>
+
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
diff --git a/blogs/elise.html b/blogs/elise.html
index 0963ce3..f14b872 100644
--- a/blogs/elise.html
+++ b/blogs/elise.html
@@ -6,13 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
     <title>Blog: Elise</title>
 
 </head>
 <body>
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -21,8 +22,47 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
       <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b11-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
 
@@ -232,7 +272,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       <div class=" flex-1 flex flex-col items-center justify-center ">
         <div class="text-2xl">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -241,7 +281,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -250,7 +290,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -263,6 +303,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       </div>
       <!-- Social icons end -->
 
+            <!-- Scroll to top -->
+            <div class="md:pr-8 hover-effect">
+              <a href="#top">
+                <button id="bttbutton" title="backtotop">
+                  <img src="../image.svg" class="top-arrow" />
+                </button>
+              </a>
+            </div>
+            <!-- Scroll to top -->
+      
+            <script>
+              const bttButton = document.getElementById('bttbutton');
+            
+              window.addEventListener('scroll', function() {
+                // Calculer la hauteur de la fenêtre + position de défilement
+                const scrollPosition = window.scrollY;
+                const windowHeight = window.innerHeight;
+                // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+                if (scrollPosition <= 0) {
+                  bttButton.style.display = "none";
+                } else {
+                  bttButton.style.display = "block";
+                }
+              });
+            </script>
+
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
diff --git a/blogs/elizabeth.html b/blogs/elizabeth.html
index 7a18cc1..3fe3488 100644
--- a/blogs/elizabeth.html
+++ b/blogs/elizabeth.html
@@ -6,12 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
     <title>Blog: Elizabeth</title>
 </head>
 <body>
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -20,8 +22,47 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
       <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b7-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
 
@@ -156,7 +197,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       <div class=" flex-1 flex flex-col items-center justify-center ">
         <div class="text-2xl">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -165,7 +206,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -174,7 +215,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -187,6 +228,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       </div>
       <!-- Social icons end -->
 
+            <!-- Scroll to top -->
+            <div class="md:pr-8 hover-effect">
+              <a href="#top">
+                <button id="bttbutton" title="backtotop">
+                  <img src="../image.svg" class="top-arrow" />
+                </button>
+              </a>
+            </div>
+            <!-- Scroll to top -->
+      
+            <script>
+              const bttButton = document.getElementById('bttbutton');
+            
+              window.addEventListener('scroll', function() {
+                // Calculer la hauteur de la fenêtre + position de défilement
+                const scrollPosition = window.scrollY;
+                const windowHeight = window.innerHeight;
+                // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+                if (scrollPosition <= 0) {
+                  bttButton.style.display = "none";
+                } else {
+                  bttButton.style.display = "block";
+                }
+              });
+            </script>
+
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
diff --git a/blogs/eslem.html b/blogs/eslem.html
index 2d7cef8..2f294a0 100644
--- a/blogs/eslem.html
+++ b/blogs/eslem.html
@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
     <title>Blog: Eslem</title>
 </head>
 <body>
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -20,8 +21,47 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
       <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b2-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
 
@@ -105,7 +145,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       <div class=" flex-1 flex flex-col items-center justify-center ">
         <div class="text-2xl">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -114,7 +154,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -123,7 +163,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -136,6 +176,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       </div>
       <!-- Social icons end -->
 
+            <!-- Scroll to top -->
+            <div class="md:pr-8 hover-effect">
+              <a href="#top">
+                <button id="bttbutton" title="backtotop">
+                  <img src="../image.svg" class="top-arrow" />
+                </button>
+              </a>
+            </div>
+            <!-- Scroll to top -->
+      
+            <script>
+              const bttButton = document.getElementById('bttbutton');
+            
+              window.addEventListener('scroll', function() {
+                // Calculer la hauteur de la fenêtre + position de défilement
+                const scrollPosition = window.scrollY;
+                const windowHeight = window.innerHeight;
+                // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+                if (scrollPosition <= 0) {
+                  bttButton.style.display = "none";
+                } else {
+                  bttButton.style.display = "block";
+                }
+              });
+            </script>
+
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
diff --git a/blogs/manish.html b/blogs/manish.html
index db2dd55..5ef6558 100644
--- a/blogs/manish.html
+++ b/blogs/manish.html
@@ -6,13 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
     <title>Blog: Manish</title>
 
 </head>
 <body>
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -21,8 +22,49 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+
+
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+    
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
       <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b15-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
 
@@ -113,7 +155,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       <div class=" flex-1 flex flex-col items-center justify-center ">
         <div class="text-2xl">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -122,7 +164,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -131,7 +173,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -144,6 +186,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       </div>
       <!-- Social icons end -->
 
+                  <!-- Scroll to top -->
+                  <div class="md:pr-8 hover-effect">
+                    <a href="#top">
+                      <button id="bttbutton" title="backtotop">
+                        <img src="../image.svg" class="top-arrow" />
+                      </button>
+                    </a>
+                  </div>
+                  <!-- Scroll to top -->
+            
+                  <script>
+                    const bttButton = document.getElementById('bttbutton');
+                  
+                    window.addEventListener('scroll', function() {
+                      // Calculer la hauteur de la fenêtre + position de défilement
+                      const scrollPosition = window.scrollY;
+                      const windowHeight = window.innerHeight;
+                      // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+                      if (scrollPosition <= 0) {
+                        bttButton.style.display = "none";
+                      } else {
+                        bttButton.style.display = "block";
+                      }
+                    });
+                  </script>
+
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
diff --git a/blogs/nalowa.html b/blogs/nalowa.html
index 00f7fdd..cc219f9 100644
--- a/blogs/nalowa.html
+++ b/blogs/nalowa.html
@@ -6,13 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
     <title>Blog: Nalowa</title>
 
 </head>
 <body>
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -21,8 +22,47 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
       <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b14-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
 
@@ -120,7 +160,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       <div class=" flex-1 flex flex-col items-center justify-center ">
         <div class="text-2xl">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -129,7 +169,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -138,7 +178,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -151,6 +191,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       </div>
       <!-- Social icons end -->
 
+                  <!-- Scroll to top -->
+                  <div class="md:pr-8 hover-effect">
+                    <a href="#top">
+                      <button id="bttbutton" title="backtotop">
+                        <img src="../image.svg" class="top-arrow" />
+                      </button>
+                    </a>
+                  </div>
+                  <!-- Scroll to top -->
+            
+                  <script>
+                    const bttButton = document.getElementById('bttbutton');
+                  
+                    window.addEventListener('scroll', function() {
+                      // Calculer la hauteur de la fenêtre + position de défilement
+                      const scrollPosition = window.scrollY;
+                      const windowHeight = window.innerHeight;
+                      // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+                      if (scrollPosition <= 0) {
+                        bttButton.style.display = "none";
+                      } else {
+                        bttButton.style.display = "block";
+                      }
+                    });
+                  </script>
+
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
diff --git a/blogs/omkar.html b/blogs/omkar.html
index 9197078..21bc67a 100644
--- a/blogs/omkar.html
+++ b/blogs/omkar.html
@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
     <title>Blog: Omkar</title>
 </head>
 <body>
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -20,8 +21,47 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
       <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b6-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
 
@@ -107,7 +147,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       <div class=" flex-1 flex flex-col items-center justify-center ">
         <div class="text-2xl">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -116,7 +156,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -125,7 +165,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -138,6 +178,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       </div>
       <!-- Social icons end -->
 
+                  <!-- Scroll to top -->
+                  <div class="md:pr-8 hover-effect">
+                    <a href="#top">
+                      <button id="bttbutton" title="backtotop">
+                        <img src="../image.svg" class="top-arrow" />
+                      </button>
+                    </a>
+                  </div>
+                  <!-- Scroll to top -->
+            
+                  <script>
+                    const bttButton = document.getElementById('bttbutton');
+                  
+                    window.addEventListener('scroll', function() {
+                      // Calculer la hauteur de la fenêtre + position de défilement
+                      const scrollPosition = window.scrollY;
+                      const windowHeight = window.innerHeight;
+                      // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+                      if (scrollPosition <= 0) {
+                        bttButton.style.display = "none";
+                      } else {
+                        bttButton.style.display = "block";
+                      }
+                    });
+                  </script>
+
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
diff --git a/blogs/pagsum.html b/blogs/pagsum.html
index 42daca3..ba9f909 100644
--- a/blogs/pagsum.html
+++ b/blogs/pagsum.html
@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
     <title>Blog: Urooz</title>
 </head>
 <body>
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -20,8 +21,47 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
       <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b8-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
 
@@ -113,7 +153,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       <div class=" flex-1 flex flex-col items-center justify-center ">
         <div class="text-2xl">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -122,7 +162,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -130,7 +170,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
                   d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
               </svg>
             </a>
-          </div>
+          </div class="hover:scale-110 transition-all">
           <div>
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
@@ -144,6 +184,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       </div>
       <!-- Social icons end -->
 
+                  <!-- Scroll to top -->
+                  <div class="md:pr-8 hover-effect">
+                    <a href="#top">
+                      <button id="bttbutton" title="backtotop">
+                        <img src="../image.svg" class="top-arrow" />
+                      </button>
+                    </a>
+                  </div>
+                  <!-- Scroll to top -->
+            
+                  <script>
+                    const bttButton = document.getElementById('bttbutton');
+                  
+                    window.addEventListener('scroll', function() {
+                      // Calculer la hauteur de la fenêtre + position de défilement
+                      const scrollPosition = window.scrollY;
+                      const windowHeight = window.innerHeight;
+                      // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+                      if (scrollPosition <= 0) {
+                        bttButton.style.display = "none";
+                      } else {
+                        bttButton.style.display = "block";
+                      }
+                    });
+                  </script>
+
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
diff --git a/blogs/prasanna.html b/blogs/prasanna.html
index 1fab8ff..4b4bf7f 100644
--- a/blogs/prasanna.html
+++ b/blogs/prasanna.html
@@ -6,13 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
     <title>Blog: Prasanna</title>
 
 </head>
 <body>
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -21,10 +22,49 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
-      <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b22-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
+      <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b22-poster.jpg')] bg-no-repeat bg-cover snap-center rounded-xl">
 
       </div>
 
@@ -125,7 +165,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       <div class=" flex-1 flex flex-col items-center justify-center ">
         <div class="text-2xl">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -134,7 +174,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -143,7 +183,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -156,6 +196,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       </div>
       <!-- Social icons end -->
 
+                  <!-- Scroll to top -->
+                  <div class="md:pr-8 hover-effect">
+                    <a href="#top">
+                      <button id="bttbutton" title="backtotop">
+                        <img src="../image.svg" class="top-arrow" />
+                      </button>
+                    </a>
+                  </div>
+                  <!-- Scroll to top -->
+            
+                  <script>
+                    const bttButton = document.getElementById('bttbutton');
+                  
+                    window.addEventListener('scroll', function() {
+                      // Calculer la hauteur de la fenêtre + position de défilement
+                      const scrollPosition = window.scrollY;
+                      const windowHeight = window.innerHeight;
+                      // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+                      if (scrollPosition <= 0) {
+                        bttButton.style.display = "none";
+                      } else {
+                        bttButton.style.display = "block";
+                      }
+                    });
+                  </script> 
+
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
diff --git a/blogs/rayarka2.html b/blogs/rayarka2.html
index 1687894..6417f92 100644
--- a/blogs/rayarka2.html
+++ b/blogs/rayarka2.html
@@ -6,13 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
     <title>Blog: Arkaprava</title>
 
 </head>
 <body>
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -21,10 +22,49 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
-      <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b20-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
+      <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b20-poster.jpeg')] bg-no-repeat bg-cover snap-center rounded-xl">
 
       </div>
 
@@ -118,7 +158,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       <div class=" flex-1 flex flex-col items-center justify-center ">
         <div class="text-2xl">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -127,7 +167,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -136,7 +176,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -149,6 +189,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       </div>
       <!-- Social icons end -->
 
+                  <!-- Scroll to top -->
+                  <div class="md:pr-8 hover-effect">
+                    <a href="#top">
+                      <button id="bttbutton" title="backtotop">
+                        <img src="../image.svg" class="top-arrow" />
+                      </button>
+                    </a>
+                  </div>
+                  <!-- Scroll to top -->
+            
+                  <script>
+                    const bttButton = document.getElementById('bttbutton');
+                  
+                    window.addEventListener('scroll', function() {
+                      // Calculer la hauteur de la fenêtre + position de défilement
+                      const scrollPosition = window.scrollY;
+                      const windowHeight = window.innerHeight;
+                      // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+                      if (scrollPosition <= 0) {
+                        bttButton.style.display = "none";
+                      } else {
+                        bttButton.style.display = "block";
+                      }
+                    });
+                  </script>
+
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
diff --git a/blogs/rayarka26.html b/blogs/rayarka26.html
index ce5e5ca..9bf207d 100644
--- a/blogs/rayarka26.html
+++ b/blogs/rayarka26.html
@@ -6,13 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
     <title>Blog: Arkaprava</title>
 
 </head>
 <body>
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -21,10 +22,49 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
-      <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b16-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
+      <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b16-poster.jpeg')] bg-no-repeat bg-cover snap-center rounded-xl">
 
       </div>
 
@@ -116,7 +156,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       <div class=" flex-1 flex flex-col items-center justify-center ">
         <div class="text-2xl">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -125,7 +165,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -134,7 +174,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -147,6 +187,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       </div>
       <!-- Social icons end -->
 
+                  <!-- Scroll to top -->
+                  <div class="md:pr-8 hover-effect">
+                    <a href="#top">
+                      <button id="bttbutton" title="backtotop">
+                        <img src="../image.svg" class="top-arrow" />
+                      </button>
+                    </a>
+                  </div>
+                  <!-- Scroll to top -->
+            
+                  <script>
+                    const bttButton = document.getElementById('bttbutton');
+                  
+                    window.addEventListener('scroll', function() {
+                      // Calculer la hauteur de la fenêtre + position de défilement
+                      const scrollPosition = window.scrollY;
+                      const windowHeight = window.innerHeight;
+                      // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+                      if (scrollPosition <= 0) {
+                        bttButton.style.display = "none";
+                      } else {
+                        bttButton.style.display = "block";
+                      }
+                    });
+                  </script> 
+
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
diff --git a/blogs/rayarka3.html b/blogs/rayarka3.html
index 279f7ca..2b80651 100644
--- a/blogs/rayarka3.html
+++ b/blogs/rayarka3.html
@@ -6,13 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
     <title>Blog: Arkaprava</title>
 
 </head>
 <body>
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -21,10 +22,49 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
-      <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b19-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
+      <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b19-poster.jpeg')] bg-no-repeat bg-cover snap-center rounded-xl">
 
       </div>
 
@@ -113,7 +153,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       <div class=" flex-1 flex flex-col items-center justify-center ">
         <div class="text-2xl">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -122,7 +162,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -131,7 +171,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -144,6 +184,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       </div>
       <!-- Social icons end -->
 
+                  <!-- Scroll to top -->
+                  <div class="md:pr-8 hover-effect">
+                    <a href="#top">
+                      <button id="bttbutton" title="backtotop">
+                        <img src="../image.svg" class="top-arrow" />
+                      </button>
+                    </a>
+                  </div>
+                  <!-- Scroll to top -->
+            
+                  <script>
+                    const bttButton = document.getElementById('bttbutton');
+                  
+                    window.addEventListener('scroll', function() {
+                      // Calculer la hauteur de la fenêtre + position de défilement
+                      const scrollPosition = window.scrollY;
+                      const windowHeight = window.innerHeight;
+                      // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+                      if (scrollPosition <= 0) {
+                        bttButton.style.display = "none";
+                      } else {
+                        bttButton.style.display = "block";
+                      }
+                    });
+                  </script>
+
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
diff --git a/blogs/shelby.html b/blogs/shelby.html
index 99366e0..7f14f6a 100644
--- a/blogs/shelby.html
+++ b/blogs/shelby.html
@@ -6,13 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
     <title>Blog: Shelby</title>
 
 </head>
 <body>
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -21,8 +22,47 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
       <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b13-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
 
@@ -106,7 +146,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       <div class=" flex-1 flex flex-col items-center justify-center ">
         <div class="text-2xl">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -115,7 +155,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -124,7 +164,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -137,6 +177,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       </div>
       <!-- Social icons end -->
 
+                  <!-- Scroll to top -->
+                  <div class="md:pr-8 hover-effect">
+                    <a href="#top">
+                      <button id="bttbutton" title="backtotop">
+                        <img src="../image.svg" class="top-arrow" />
+                      </button>
+                    </a>
+                  </div>
+                  <!-- Scroll to top -->
+            
+                  <script>
+                    const bttButton = document.getElementById('bttbutton');
+                  
+                    window.addEventListener('scroll', function() {
+                      // Calculer la hauteur de la fenêtre + position de défilement
+                      const scrollPosition = window.scrollY;
+                      const windowHeight = window.innerHeight;
+                      // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+                      if (scrollPosition <= 0) {
+                        bttButton.style.display = "none";
+                      } else {
+                        bttButton.style.display = "block";
+                      }
+                    });
+                  </script>
+
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
diff --git a/blogs/shruti.html b/blogs/shruti.html
index 80dc949..cb9ab14 100644
--- a/blogs/shruti.html
+++ b/blogs/shruti.html
@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
     <title>Blog: Shruti</title>
 </head>
 <body>
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -20,10 +21,49 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
-      <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/shruti-cover.png')] bg-no-repeat bg-cover snap-center rounded-xl">
+      <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/shruti-cover.jpg')] bg-no-repeat bg-cover snap-center rounded-xl">
 
       </div>
 
@@ -102,7 +142,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       <div class=" flex-1 flex flex-col items-center justify-center ">
         <div class="text-2xl">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -111,7 +151,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -120,7 +160,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -133,6 +173,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       </div>
       <!-- Social icons end -->
 
+                  <!-- Scroll to top -->
+                  <div class="md:pr-8 hover-effect">
+                    <a href="#top">
+                      <button id="bttbutton" title="backtotop">
+                        <img src="../image.svg" class="top-arrow" />
+                      </button>
+                    </a>
+                  </div>
+                  <!-- Scroll to top -->
+            
+                  <script>
+                    const bttButton = document.getElementById('bttbutton');
+                  
+                    window.addEventListener('scroll', function() {
+                      // Calculer la hauteur de la fenêtre + position de défilement
+                      const scrollPosition = window.scrollY;
+                      const windowHeight = window.innerHeight;
+                      // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+                      if (scrollPosition <= 0) {
+                        bttButton.style.display = "none";
+                      } else {
+                        bttButton.style.display = "block";
+                      }
+                    });
+                  </script>
+
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
diff --git a/blogs/tannistha.html b/blogs/tannistha.html
index a95d124..17cd29f 100644
--- a/blogs/tannistha.html
+++ b/blogs/tannistha.html
@@ -6,13 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
     <title>Blog: Tannistha</title>
 
 </head>
 <body>
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -21,8 +22,47 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
       <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b10-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
 
@@ -108,7 +148,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       <div class=" flex-1 flex flex-col items-center justify-center ">
         <div class="text-2xl">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -117,7 +157,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -126,7 +166,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -139,6 +179,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       </div>
       <!-- Social icons end -->
 
+                  <!-- Scroll to top -->
+                  <div class="md:pr-8 hover-effect">
+                    <a href="#top">
+                      <button id="bttbutton" title="backtotop">
+                        <img src="../image.svg" class="top-arrow" />
+                      </button>
+                    </a>
+                  </div>
+                  <!-- Scroll to top -->
+            
+                  <script>
+                    const bttButton = document.getElementById('bttbutton');
+                  
+                    window.addEventListener('scroll', function() {
+                      // Calculer la hauteur de la fenêtre + position de défilement
+                      const scrollPosition = window.scrollY;
+                      const windowHeight = window.innerHeight;
+                      // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+                      if (scrollPosition <= 0) {
+                        bttButton.style.display = "none";
+                      } else {
+                        bttButton.style.display = "block";
+                      }
+                    });
+                  </script>
+
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
diff --git a/blogs/vidhisha.html b/blogs/vidhisha.html
index 44815a7..d4f8210 100644
--- a/blogs/vidhisha.html
+++ b/blogs/vidhisha.html
@@ -6,13 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
     <title>Blog: Vidhisha</title>
 </head>
 <body>
 
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -21,8 +22,47 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
       <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b23-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
 
@@ -107,7 +147,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       <div class=" flex-1 flex flex-col items-center justify-center ">
         <div class="text-2xl">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -116,7 +156,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -125,7 +165,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -138,6 +178,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       </div>
       <!-- Social icons end -->
 
+                  <!-- Scroll to top -->
+                  <div class="md:pr-8 hover-effect">
+                    <a href="#top">
+                      <button id="bttbutton" title="backtotop">
+                        <img src="../image.svg" class="top-arrow" />
+                      </button>
+                    </a>
+                  </div>
+                  <!-- Scroll to top -->
+            
+                  <script>
+                    const bttButton = document.getElementById('bttbutton');
+                  
+                    window.addEventListener('scroll', function() {
+                      // Calculer la hauteur de la fenêtre + position de défilement
+                      const scrollPosition = window.scrollY;
+                      const windowHeight = window.innerHeight;
+                      // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+                      if (scrollPosition <= 0) {
+                        bttButton.style.display = "none";
+                      } else {
+                        bttButton.style.display = "block";
+                      }
+                    });
+                  </script>
+
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
diff --git a/blogs/wesley.html b/blogs/wesley.html
index f1649dd..fb3f649 100644
--- a/blogs/wesley.html
+++ b/blogs/wesley.html
@@ -6,13 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
     <link rel="stylesheet" href="./blog.css">
     <link rel="icon" type="image/x-icon" href="logo.png" />
     <title>Blog: Wesley</title>
 </head>
 <body>
 
-    <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
+    <!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
         <div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
             <a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
             <div class="logo"><a class="logo-border" href="#">
@@ -21,8 +22,47 @@
               <a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
             </ul>
         </div>
+    </header> -->
+    
+    <header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
+      <div class="header-container">
+          <a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
+          <div class="logo-container">
+            <a class="logo-border" href="#">
+              <img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
+            </a>
+          </div>
+          <div class="logo-container">
+            <!-- <i class="ri-moon-line " id="switch"></i> -->
+            <i class="ri-moon-line " id="switch"></i>
+            <a href="../index.html" class="logo-home">
+              <img src="./img/home.png" class="home" alt="">
+            </a>
+          </div>
+          <!-- </ul> -->
+      </div>
     </header>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const switchIcon = document.getElementById('switch');
+        
+        switchIcon.addEventListener('click', function () {
+          // Toggle the dark-mode class on the body
+          document.body.classList.toggle('dark-mode');
+          
+          // Toggle icon classes between ri-moon-line and ri-sun-line
+          if (switchIcon.classList.contains('ri-moon-line')) {
+            switchIcon.classList.remove('ri-moon-line');
+            switchIcon.classList.add('ri-sun-line');
+          } else {
+            switchIcon.classList.remove('ri-sun-line');
+            switchIcon.classList.add('ri-moon-line');
+          }
+        });
+      });
+    </script>
+
     <div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
       <div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b2-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
 
@@ -106,7 +146,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       <div class=" flex-1 flex flex-col items-center justify-center ">
         <div class="text-2xl">Follow us on</div>
         <div class="flex mt-2 flex-row space-x-3 my-0">
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-5 ml-3">
               <!-- Facebook icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -115,7 +155,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="#" class=" w-10 ml-3 mr-3">
               <!-- Instagram icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -124,7 +164,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
               </svg>
             </a>
           </div>
-          <div>
+          <div class="hover:scale-110 transition-all">
             <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
               <!-- Github icon -->
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
@@ -137,6 +177,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
       </div>
       <!-- Social icons end -->
 
+                  <!-- Scroll to top -->
+                  <div class="md:pr-8 hover-effect">
+                    <a href="#top">
+                      <button id="bttbutton" title="backtotop">
+                        <img src="../image.svg" class="top-arrow" />
+                      </button>
+                    </a>
+                  </div>
+                  <!-- Scroll to top -->
+            
+                  <script>
+                    const bttButton = document.getElementById('bttbutton');
+                  
+                    window.addEventListener('scroll', function() {
+                      // Calculer la hauteur de la fenêtre + position de défilement
+                      const scrollPosition = window.scrollY;
+                      const windowHeight = window.innerHeight;
+                      // Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
+                      if (scrollPosition <= 0) {
+                        bttButton.style.display = "none";
+                      } else {
+                        bttButton.style.display = "block";
+                      }
+                    });
+                  </script>
+
     </div>
 
     <div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
