diff --git a/blog.html b/blog.html
index 8ff72c3..b71631f 100644
--- a/blog.html
+++ b/blog.html
@@ -61,16 +61,49 @@ <h2>WordWise</h2>
 
         <div class="dropdown">
           <!-- Profile Icon -->
-          <a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
-            <i class="fas fa-user-circle"></i>
+
+          <a href="javascript:void(0);" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
+              <i class="fas fa-user-circle"></i>
           </a>
+      
 
           <!-- Dropdown Menu -->
-          <ul class="dropdown-menu" id="dropdownMenu">
-            <li><a href="#login" onclick="openForm('login')">Login</a></li>
-            <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
+          <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
+              <li><a href="./profile.html">My Profile</a></li>
+              <li><a href="#login" onclick="openForm('login')">Login</a></li>
+              <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
           </ul>
-        </div>
+      </div>
+
+      <script>
+          // Function to toggle the visibility of the dropdown menu
+          function toggleMenu() {
+              const menu = document.getElementById('profileMenu');
+              menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
+          }
+
+          // Close the dropdown if the user clicks outside of it
+          window.onclick = function(event) {
+              const menu = document.getElementById('profileMenu');
+              if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
+                  menu.style.display = 'none';
+              }
+          }
+      
+          // Update the profile image in the dropdown menu based on the selected avatar stored in localStorage
+          document.addEventListener("DOMContentLoaded", function() {
+              // Retrieve the saved avatar from localStorage
+              const savedAvatar = localStorage.getItem("selectedAvatar");
+      
+              // If an avatar is saved, update the profile image
+              if (savedAvatar) {
+                  const dropdownProfileImage = document.getElementById("dropdownProfileImage");
+                  if (dropdownProfileImage) {
+                      dropdownProfileImage.src = savedAvatar;  // Update the image source
+                  }
+              }
+          });
+      </script>
 
 
 
diff --git a/category.html b/category.html
index 6288231..aca00a2 100644
--- a/category.html
+++ b/category.html
@@ -73,16 +73,49 @@ <h2>WordWise</h2>
        
         <div class="dropdown">
             <!-- Profile Icon -->
-            <a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
+
+            <a href="javascript:void(0);" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
                 <i class="fas fa-user-circle"></i>
             </a>
         
+
             <!-- Dropdown Menu -->
-            <ul class="dropdown-menu" id="dropdownMenu">
+            <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
+                <li><a href="./profile.html">My Profile</a></li>
                 <li><a href="#login" onclick="openForm('login')">Login</a></li>
                 <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
             </ul>
         </div>
+
+        <script>
+            // Function to toggle the visibility of the dropdown menu
+            function toggleMenu() {
+                const menu = document.getElementById('profileMenu');
+                menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
+            }
+
+            // Close the dropdown if the user clicks outside of it
+            window.onclick = function(event) {
+                const menu = document.getElementById('profileMenu');
+                if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
+                    menu.style.display = 'none';
+                }
+            }
+        
+            // Update the profile image in the dropdown menu based on the selected avatar stored in localStorage
+            document.addEventListener("DOMContentLoaded", function() {
+                // Retrieve the saved avatar from localStorage
+                const savedAvatar = localStorage.getItem("selectedAvatar");
+        
+                // If an avatar is saved, update the profile image
+                if (savedAvatar) {
+                    const dropdownProfileImage = document.getElementById("dropdownProfileImage");
+                    if (dropdownProfileImage) {
+                        dropdownProfileImage.src = savedAvatar;  // Update the image source
+                    }
+                }
+            });
+        </script>
      
         
      
diff --git a/contact_us.html b/contact_us.html
index 369b587..9384692 100644
--- a/contact_us.html
+++ b/contact_us.html
@@ -117,16 +117,48 @@ <h2>WordWise</h2>
 
       <div class="dropdown">
         <!-- Profile Icon -->
-        <a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
-          <i class="fas fa-user-circle"></i>
+
+        <a href="javascript:void(0);" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
+            <i class="fas fa-user-circle"></i>
         </a>
 
         <!-- Dropdown Menu -->
-        <ul class="dropdown-menu" id="dropdownMenu">
-          <li><a href="#login" onclick="openForm('login')">Login</a></li>
-          <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
+        <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
+            <li><a href="./profile.html">My Profile</a></li>
+            <li><a href="#login" onclick="openForm('login')">Login</a></li>
+            <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
         </ul>
-      </div>
+    </div>
+
+    <script>
+        // Function to toggle the visibility of the dropdown menu
+        function toggleMenu() {
+            const menu = document.getElementById('profileMenu');
+            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
+        }
+
+        // Close the dropdown if the user clicks outside of it
+        window.onclick = function(event) {
+            const menu = document.getElementById('profileMenu');
+            if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
+                menu.style.display = 'none';
+            }
+        }
+    
+        // Update the profile image in the dropdown menu based on the selected avatar stored in localStorage
+        document.addEventListener("DOMContentLoaded", function() {
+            // Retrieve the saved avatar from localStorage
+            const savedAvatar = localStorage.getItem("selectedAvatar");
+    
+            // If an avatar is saved, update the profile image
+            if (savedAvatar) {
+                const dropdownProfileImage = document.getElementById("dropdownProfileImage");
+                if (dropdownProfileImage) {
+                    dropdownProfileImage.src = savedAvatar;  // Update the image source
+                }
+            }
+        });
+    </script>
 
 
 
diff --git a/give_feedback.html b/give_feedback.html
index 0fdf0b6..c68d80a 100644
--- a/give_feedback.html
+++ b/give_feedback.html
@@ -119,17 +119,49 @@ <h2>WordWise</h2>
 
       <div class="dropdown">
         <!-- Profile Icon -->
-        <a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
-          <i class="fas fa-user-circle"></i>
+
+        <a href="javascript:void(0);" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
+            <i class="fas fa-user-circle"></i>
         </a>
+    
 
         <!-- Dropdown Menu -->
-        <ul class="dropdown-menu" id="dropdownMenu">
-          <li><a href="#login" onclick="openForm('login')">Login</a></li>
-          <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
+        <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
+            <li><a href="./profile.html">My Profile</a></li>
+            <li><a href="#login" onclick="openForm('login')">Login</a></li>
+            <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
         </ul>
-      </div>
+    </div>
+
+    <script>
+        // Function to toggle the visibility of the dropdown menu
+        function toggleMenu() {
+            const menu = document.getElementById('profileMenu');
+            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
+        }
 
+        // Close the dropdown if the user clicks outside of it
+        window.onclick = function(event) {
+            const menu = document.getElementById('profileMenu');
+            if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
+                menu.style.display = 'none';
+            }
+        }
+    
+        // Update the profile image in the dropdown menu based on the selected avatar stored in localStorage
+        document.addEventListener("DOMContentLoaded", function() {
+            // Retrieve the saved avatar from localStorage
+            const savedAvatar = localStorage.getItem("selectedAvatar");
+    
+            // If an avatar is saved, update the profile image
+            if (savedAvatar) {
+                const dropdownProfileImage = document.getElementById("dropdownProfileImage");
+                if (dropdownProfileImage) {
+                    dropdownProfileImage.src = savedAvatar;  // Update the image source
+                }
+            }
+        });
+    </script>
 
 
       <!--  Login Form -->
diff --git a/index.html b/index.html
index 799e54f..d5b1871 100644
--- a/index.html
+++ b/index.html
@@ -396,8 +396,10 @@ <h2>WordWise</h2>
                 <div class="dropdown">
                     <!-- Profile Icon -->
 
+
                     <a href="javascript:void(0);" class="profile-link" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
                         <img id="dropdownProfileImage" src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg" alt="Profile Icon" style="width: 50px; height: 50px; border-radius: 50%; margin-top: -17px;">
+
                     </a>
                 
 
@@ -439,9 +441,11 @@ <h2>WordWise</h2>
                     });
                 </script>
 
+
                 
                 
 
+
                 <!-- Login Form -->
                 <div class="form-popup" id="loginForm">
                     <form class="form-container" onsubmit="return validateLoginForm()" style="max-width: 400px; margin: auto;">
diff --git a/start_writing.html b/start_writing.html
index 9d59ab9..e2c310e 100644
--- a/start_writing.html
+++ b/start_writing.html
@@ -90,19 +90,51 @@ <h2>WordWise</h2>
             <a href="contact_us.html">Contact Us</a>
             <a href="give_feedback.html">Give Feedback</a>
         </div>
-        
         <div class="dropdown">
           <!-- Profile Icon -->
-          <a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
+
+          <a href="javascript:void(0);" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
               <i class="fas fa-user-circle"></i>
           </a>
       
+
           <!-- Dropdown Menu -->
-          <ul class="dropdown-menu" id="dropdownMenu">
+          <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
+              <li><a href="./profile.html">My Profile</a></li>
               <li><a href="#login" onclick="openForm('login')">Login</a></li>
               <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
           </ul>
-        </div>
+      </div>
+
+        <script>
+            // Function to toggle the visibility of the dropdown menu
+            function toggleMenu() {
+                const menu = document.getElementById('profileMenu');
+                menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
+            }
+
+            // Close the dropdown if the user clicks outside of it
+            window.onclick = function(event) {
+                const menu = document.getElementById('profileMenu');
+                if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
+                    menu.style.display = 'none';
+                }
+            }
+        
+            // Update the profile image in the dropdown menu based on the selected avatar stored in localStorage
+            document.addEventListener("DOMContentLoaded", function() {
+                // Retrieve the saved avatar from localStorage
+                const savedAvatar = localStorage.getItem("selectedAvatar");
+        
+                // If an avatar is saved, update the profile image
+                if (savedAvatar) {
+                    const dropdownProfileImage = document.getElementById("dropdownProfileImage");
+                    if (dropdownProfileImage) {
+                        dropdownProfileImage.src = savedAvatar;  // Update the image source
+                    }
+                }
+            });
+        </script>
    
     <!--  Login Form -->
   <div class="form-popup" id="loginForm">