diff --git a/blog.css b/blog.css
new file mode 100644
index 00000000..c1bdf0ab
--- /dev/null
+++ b/blog.css
@@ -0,0 +1,309 @@
+/* Shadow Effect on Image */
+.thumbnail {
+    display: inline-block;
+    border-radius: 12px; /* Increased border radius for a smoother look */
+    overflow: hidden; /* Ensures the shadow stays within rounded corners */
+  }
+  
+  .thumbnail-img {
+    width: 100%;
+    height: auto;
+    border-radius: 12px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 4px 15px rgba(0, 0, 0, 0.3); /* Layered shadow for more depth */
+    transition: box-shadow 0.4s ease; /* Smooth transition for hover */
+  }
+  
+  /* Hover Effect */
+  .thumbnail-img:hover {
+    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.4); /* Stronger shadow on hover */
+  }
+  
+  /* Content Container */
+.content-container {
+    background-color: #1e1e1e; /* Dark background for better readability */
+    padding: 20px 30px;
+    border-radius: 10px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* Shadow for depth */
+    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effect */
+  }
+  
+  /* Content Text */
+  .content p {
+    color: #f5f5f5; /* Light color for dark background */
+    font-family: 'Roboto', sans-serif;
+    font-size: 18px;
+    line-height: 1.8;
+    text-align: justify;
+    margin: 0;
+  }
+  
+  /* Heading Style */
+  .content-container .display-1 {
+    font-weight: 600;
+    font-size: 24px;
+    color: #f9b0b0; /* Slightly brighter color for the title */
+    margin-bottom: 10px;
+    text-align: center;
+  }
+  
+  /* Hover Effect */
+  .content-container:hover {
+    transform: scale(1.02); /* Slight zoom effect */
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6); /* Enhanced shadow on hover */
+  }
+  
+  /* Additional Styling for Links */
+  .content-container a {
+    color: #f9b0b0;
+    transition: color 0.3s ease;
+  }
+  
+  .content-container a:hover {
+    color: #e56b6f; /* Brighter color on hover */
+  }
+  
+  /* Container Styling */
+.post-footer-container {
+    background-color: #1e1e1e;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  }
+  
+  /* Tags Styling */
+  .tag-link {
+    background-color: #333;
+    color: #f9b0b0;
+    margin: 5px;
+    padding: 8px 15px;
+    border-radius: 20px;
+    font-weight: 500;
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
+  
+  .tag-link:hover {
+    background-color: #f9b0b0;
+    color: #333;
+  }
+  
+  /* Author Section Styling */
+  .author-avatar {
+    width: 100px; /* Increased size */
+    height: 100px; /* Increased size */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 15px;
+  }
+  
+  .author-avatar img {
+    width: 100%; /* Makes the image responsive */
+    height: auto; /* Maintains aspect ratio */
+    border-radius: 50%; /* Keeps it circular */
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Retains shadow effect */
+  }
+  
+  .author-name {
+    font-size: 20px;
+    color: #f9b0b0;
+    margin: 10px 0 5px;
+  }
+  
+  .author-bio {
+    font-size: 14px;
+    color: #ddd;
+    margin-bottom: 10px;
+  }
+  
+  /* Social Media Links */
+  .social-links .social-icon {
+    color: #f9b0b0;
+    font-size: 18px;
+    margin: 0 8px;
+    padding: 8px;
+    border-radius: 50%;
+    background-color: #333;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+  }
+  
+  .social-links .social-icon:hover {
+    background-color: #f9b0b0;
+    color: #333;
+    transform: scale(1.1);
+  }
+  
+  /* Post Navigation Container */
+.post-navigation {
+    background-color: #2a2a2a; /* Dark background for contrast */
+    padding: 30px; /* Increased padding for better spacing */
+    border-radius: 10px; /* More pronounced border radius */
+    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
+  }
+  
+  /* Post Container */
+  .post-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch; /* Ensures the cards are of equal height */
+  }
+  
+  /* Post Card */
+  .post-card {
+    background-color: #3b3b3b; /* Slightly lighter background for post cards */
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    width: 48%; /* Adjusting width for proper spacing */
+    display: flex; /* Flex layout for content alignment */
+    flex-direction: column; /* Stack content vertically */
+  }
+  
+  .post-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7); /* Enhanced shadow on hover */
+  }
+  
+  /* Navigation Label */
+  .nav-label {
+    padding: 15px;
+    color: #f9b0b0; /* Light color for links */
+    font-weight: bold;
+    text-align: center; /* Center-align label text */
+  }
+  
+  /* Navigation Link */
+  .nav-link {
+    color: inherit;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    justify-content: center; /* Center align for the entire link */
+    transition: color 0.3s ease;
+    font-size: 1.2rem; /* Increased font size for better readability */
+  }
+  
+  .nav-link:hover {
+    color: #f9b0b0; /* Hover color change */
+  }
+  
+  /* Post Article */
+  .post-article {
+    display: flex;
+    flex-direction: column; /* Stack image and content */
+    flex: 1; /* Ensure equal height for content */
+  }
+  
+  /* Post Image */
+  .post-image img {
+    width: 100%;
+    height: auto;
+    border-bottom: 4px solid #f9b0b0; /* Bottom border for image */
+    transition: transform 0.3s ease; /* Smooth scale on hover */
+  }
+  
+  .post-image img:hover {
+    transform: scale(1.05); /* Slight scale effect on hover */
+  }
+  
+  /* Post Content */
+  .post-content {
+    padding: 15px;
+    flex-grow: 1; /* Allow content to fill available space */
+  }
+  
+  /* Post Category */
+  .post-category {
+    margin-bottom: 10px;
+    text-align: center; /* Center the category */
+  }
+  
+  .category-link {
+    background-color: #555; /* Category background */
+    color: #f9b0b0;
+    padding: 8px 12px; /* More padding for better touch area */
+    border-radius: 20px;
+    text-decoration: none;
+    font-size: 14px;
+    transition: background-color 0.3s ease, color 0.3s ease; /* Added transition */
+  }
+  
+  .category-link:hover {
+    background-color: #f9b0b0; /* Change category background on hover */
+    color: #333; /* Change text color on hover */
+  }
+  
+  /* Post Title */
+  .post-title {
+    font-size: 1.4rem; /* Increased font size for titles */
+    color: #ffffff; /* White text for contrast */
+    text-decoration: none;
+    transition: color 0.3s ease;
+  }
+  
+  .post-title:hover {
+    color: #f9b0b0; /* Change title color on hover */
+    text-decoration: underline; /* Underline on hover for emphasis */
+  }
+  
+  /* Section Title */
+.section-title {
+    text-align: center;
+    color: #f9b0b0; /* Light color for contrast */
+    font-size: 2rem; /* Larger font size for title */
+    margin-bottom: 20px;
+    transition: color 0.3s ease, text-shadow 0.3s ease; /* Smooth transitions */
+  }
+  
+  .section-title:hover {
+    color: #ea5541; /* Change to pink on hover */
+    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Subtle shadow effect */
+  }
+  /* Categories Section */
+.categories {
+    background-color: #2a2a2a; /* Dark background */
+    padding: 30px; /* Padding for spacing */
+    border-radius: 10px; /* Rounded corners */
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Subtle shadow */
+    margin: 30px 0; /* Margin to separate from other sections */
+  }
+  
+  /* Category Heading */
+  .category-heading {
+    text-align: center;
+    color: #f9b0b0; /* Light color for contrast */
+    font-size: 2rem; /* Larger font size for heading */
+    margin-bottom: 20px; /* Space below heading */
+    transition: color 0.3s ease; /* Smooth color transition */
+  }
+  
+  /* Category Item */
+  .category-list {
+    display: flex;
+    flex-direction: column; /* Stack items vertically */
+  }
+  
+  .category-item {
+    margin-bottom: 15px; /* Space between items */
+  }
+  
+  .category-link {
+    display: block;
+    background-color: #3b3b3b; /* Dark background for links */
+    padding: 15px; /* Padding for clickable area */
+    border-radius: 5px; /* Rounded corners */
+    text-decoration: none; /* Remove underline */
+    color: #ffffff; /* White text for contrast */
+    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
+  }
+  
+  .category-link:hover {
+    background-color: #ea5541; /* Pink background on hover */
+    transform: translateY(-2px); /* Slight lift on hover */
+  }
+  
+  .category-link span {
+    font-size: 1.2rem; /* Slightly larger font size for text */
+  }
+  
+  
\ No newline at end of file
diff --git a/blog.html b/blog.html
index f8b074bd..bb74ba65 100644
--- a/blog.html
+++ b/blog.html
@@ -20,6 +20,7 @@
   <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> -->
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="Scroll_and_progressbar.css">
+  <link rel="stylesheet" href="blog.css">
 
 
 
@@ -61,9 +62,10 @@ <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>
+          <a href="#" class="profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleDropdown()">
+                        
+            <img 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>
 
           <!-- Dropdown Menu -->
           <ul class="dropdown-menu" id="dropdownMenu">
@@ -396,92 +398,180 @@ <h2>Forgot Password</h2>
       <!-- <div class="col-8"> -->
       <article id="post">
         <!--article heading-->
-        <div class="heading text-center">
-          <div class="Category">
-            <a href="#" class="nav-link" id="travel">Travel</a>
+       
+        
+        <div class="heading text-center" style="padding: 20px; background-color: #30322f; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">
+          <div class="Category" style="display: inline-block; margin-bottom: 10px;">
+            <a href="#" class="nav-link" id="travel" style="color: #ea5541; font-weight: bold; font-size: 1.2rem;">Travel</a>
           </div>
-          <a href="bookmarks.html" class="nav-link"
-            style="float: right; margin-left: auto; color: #f9b0b0; transition: all 0.4s ease-in-out;">My Reading
-            List</a>
-          <div class="title">
-            <h2 class="text-title text-dark display-1" looking for feedback></h2>
+          <a href="bookmarks.html" class="nav-link button" style="float: right; margin-left: auto;">
+            My Reading List
+          </a>
+        
+          <div class="title" style="margin-top: 20px;">
+            <h2 class="text-title" style="font-size: 2.5rem; font-weight: 700; color: #f9b0b0;">Looking for Feedback</h2>
           </div>
-          <div class="meta">
-            <a href="#" class="link display-2 text-secondary px-1">
-              <i class="fa-solid fa-user" style="color:  #f9b0b0;" id="fa"></i>anshika arora
+        
+          <div class="meta" style="margin-top: 15px; font-size: 1rem; color: #f9b0b0;">
+            <a href="#" class="link text-secondary px-2 meta-item" style="display: inline-flex; align-items: center;">
+              <i class="fa-solid fa-user" style="color: #ea5541; margin-right: 5px; font-size: 1.3rem;"></i> Anshika Arora
             </a>
-            <a href="#" class="link display-2 text-secondary px-1">
-              <i class="fa-solid fa-clock" style="color:  #f9b0b0;" id="fa"></i>feb 12, 2021
+            <a href="#" class="link text-secondary px-2 meta-item" style="display: inline-flex; align-items: center;">
+              <i class="fa-solid fa-clock" style="color: #ea5541; margin-right: 5px; font-size: 1.3rem;"></i> Feb 12, 2021
             </a>
-            <a href="./blog.html#coment" class="link display-2 text-secondary px-1">
-              <i class="fa-solid fa-comments" style="color:  #f9b0b0;" id="fa"></i>3
+            <a href="./blog.html#coment" class="link text-secondary px-2 meta-item" style="display: inline-flex; align-items: center;">
+              <i class="fa-solid fa-comments" style="color: #ea5541; margin-right: 5px; font-size: 1.3rem;"></i> 3
             </a>
-            <a href="#" class="link display-2 text-secondary px-1 bookmark-btn" id="bookmark">
-              <i class="fa-solid fa-bookmark" style="color: #f9b0b0;" id="bookmark-icon"></i>
-              <span id="bookmark-text" style="color: f9b0b0;">Bookmark</span>
+            <a href="#" class="link text-secondary px-2 meta-item" id="bookmark" style="display: inline-flex; align-items: center;">
+              <i class="fa-solid fa-bookmark" style="color: #ea5541; margin-right: 5px; font-size: 1.3rem;" id="bookmark-icon"></i>
+              <span id="bookmark-text" style="color: #f9b0b0;">Bookmark</span>
             </a>
           </div>
-
-
         </div>
+        
+        <style>
+          /* Dark Mode Adjustments */
+          .heading {
+            background-color: #30322f;
+            border-radius: 8px;
+            padding: 20px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+          }
+        
+          .text-title {
+            margin: 0;
+            color: #f9b0b0;
+          }
+        
+          .Category .nav-link {
+            font-size: 1.2rem;
+            font-weight: bold;
+            color: #ea5541;
+          }
+        
+          .meta .link {
+            font-size: 1rem;
+            color: #f9b0b0;
+            font-weight: 500;
+            display: inline-flex;
+            align-items: center;
+            transition: all 0.4s ease;
+          }
+        
+          .meta i {
+            font-size: 1.3rem;
+            transition: color 0.3s;
+          }
+        
+          /* Hover Effect for Meta Items */
+          .meta .meta-item:hover {
+            background-color: rgba(249, 176, 176, 0.1);
+            color: #f9b0b0;
+            border-radius: 5px;
+            padding: 6px 8px;
+            transform: scale(1.05);
+          }
+        
+          .meta .meta-item:hover i {
+            color: #f9b0b0;
+          }
+        
+          /* Button and Hover Effects */
+          .button {
+            display: inline-block;
+            padding: 6px 12px;
+            border-radius: 5px;
+            color: #f9b0b0;
+            transition: all 0.4s ease;
+            font-weight: 600;
+          }
+        
+          .button:hover {
+            background-color: #f9b0b0;
+            color: #30322f;
+            transform: scale(1.05);
+            box-shadow: 0px 4px 12px rgba(249, 176, 176, 0.4);
+          }
+        
+          /* Responsive */
+          @media (max-width: 768px) {
+            .meta {
+              display: flex;
+              flex-wrap: wrap;
+              justify-content: center;
+            }
+        
+            .meta .link {
+              margin-top: 8px;
+            }
+        
+            .heading .title h2 {
+              font-size: 1.8rem;
+            }
+          }
+        </style>
+        
+        
+        
+        
         <!--thumbnail-->
-        <div class="thumbnail mt-3">
-          <img src="./assets/img1.webp" class="thumbnail" alt="">
+        <div class="thumbnail mt-3" style="border-radius: 8px; overflow: hidden;">
+          <img src="./assets/img1.webp" class="thumbnail-img" alt="">
         </div>
         <!--content-->
-        <div class="content text-dark display-1 secondary-title mt-3">
-          <p>
-
-
-            In the realm of mechanical marvels, our journey begins an odyssey of speed, freedom, and human ingenuity:
-            the automobile. A symphony of gears and pistons, it has reshaped the world, granting us the power to
-            traverse great distances with unparalleled ease. Join me as we delve into the rich history, exhilarating
-            innovations, and unforgettable memories that revolve around the ever-evolving wonder that is the car.
-
-            At the dawn of the 19th century, the world witnessed the birth of the automobile, a contraption that
-            combined the visions of brilliant minds like Karl Benz, Gottlieb Daimler, and Henry Ford. In these early
-            days, the car was a novelty, a wondrous oddity with a top speed of a brisk trotting horse. Yet, it laid the
-            groundwork for an automotive revolution that would forever change the landscape of our existence. Fast
-            forward to today, and the automobile stands as a symbol of progress, blending elegance and performance, as
-            we race forward into the future.
-          </p>
-
+        <div class="content-container">
+          <div class="content text-light display-1 secondary-title mt-3">
+            <p>
+              In the realm of mechanical marvels, our journey begins an odyssey of speed, freedom, and human ingenuity: the automobile.
+              A symphony of gears and pistons, it has reshaped the world, granting us the power to traverse great distances with
+              unparalleled ease. Join me as we delve into the rich history, exhilarating innovations, and unforgettable memories that
+              revolve around the ever-evolving wonder that is the car.
+        
+              At the dawn of the 19th century, the world witnessed the birth of the automobile, a contraption that combined the visions
+              of brilliant minds like Karl Benz, Gottlieb Daimler, and Henry Ford. In these early days, the car was a novelty, a wondrous
+              oddity with a top speed of a brisk trotting horse. Yet, it laid the groundwork for an automotive revolution that would
+              forever change the landscape of our existence. Fast forward to today, and the automobile stands as a symbol of progress,
+              blending elegance and performance, as we race forward into the future.
+            </p>
+          </div>
         </div>
-
+        
 
       </article>
       <!--post footer-->
-      <div class="post-footer mb-3">
-        <div class="post-tags d-flex flex-wrap justify-content-center">
-          <a href="#" class="nav-link btn bg-light">Travel</a>
-          <a href="#" class="nav-link btn bg-light">Food</a>
-          <a href="#" class="nav-link btn bg-light">Lifestyle</a>
-          <a href="#" class="nav-link btn bg-light">Technology</a>
-          <a href="#" class="nav-link btn bg-light">Fashion</a>
-
-        </div>
-        <div class="post-author text-center">
-          <div class="author-avatar">
-            <img src="./assets/face/face1.webp" class="rounded">
-
+      <div class="post-footer-container">
+        <div class="post-footer mb-3">
+          <!-- Post Tags -->
+          <div class="post-tags d-flex flex-wrap justify-content-center mb-4">
+            <a href="#" class="tag-link btn">Travel</a>
+            <a href="#" class="tag-link btn">Food</a>
+            <a href="#" class="tag-link btn">Lifestyle</a>
+            <a href="#" class="tag-link btn">Technology</a>
+            <a href="#" class="tag-link btn">Fashion</a>
           </div>
-          <div class="author-info py-2">
-            <h3 class="text-dark">Amy Tan</h3>
-            <p class="text-secondary secondary-title">
-              Author Info
-            </p>
-            <div class="post-tags d-flex flex-wrap justify-content-center">
-              <a href="#" id="facebook" class="nav-link btn bg-light"><i class="fa-brands fa-facebook"></i></a>
-              <a href="#" id="instagram" class="nav-link btn bg-light"><i class="fa-brands fa-instagram"></i></a>
-              <a href="#" id="twitter" class="nav-link btn bg-light"><i class="fa-brands fa-twitter"></i></a>
-              <a href="#" id="dribbble" class="nav-link btn bg-light"><i class="fa-brands fa-dribbble"></i></a>
-              <a href="https://github.com/ANSHIKA-26?tab=overview&from=2022-12-01&to=2022-12-31" id="github"
-                target="_blank" class="nav-link btn bg-light"><i class="fa-brands fa-github"></i></a>
-
-
+      
+          <!-- Author Section -->
+          <div class="post-author text-center">
+            <div class="author-avatar mb-2">
+              <img src="./assets/face/face1.webp" class="rounded-circle" alt="Author's avatar">
+            </div>
+            <div class="author-info py-2">
+              <h3 class="author-name">Amy Tan</h3>
+              <p class="author-bio">Author Info</p>
+      
+              <!-- Social Media Links -->
+              <div class="social-links d-flex justify-content-center mt-3">
+                <a href="#" class="social-icon" id="facebook"><i class="fa-brands fa-facebook"></i></a>
+                <a href="#" class="social-icon" id="instagram"><i class="fa-brands fa-instagram"></i></a>
+                <a href="#" class="social-icon" id="twitter"><i class="fa-brands fa-twitter"></i></a>
+                <a href="#" class="social-icon" id="dribbble"><i class="fa-brands fa-dribbble"></i></a>
+                <a href="https://github.com/ANSHIKA-26" id="github" target="_blank" class="social-icon"><i class="fa-brands fa-github"></i></a>
+              </div>
             </div>
           </div>
         </div>
+      </div>
+      
         <!--post related -->
         <!-- post related -->
         <div class="post-navigation">
@@ -546,11 +636,9 @@ <h3 class="text-dark">Amy Tan</h3>
           <div class="comments-section">
             <div class="comments-container">
               <h2 class="section-title">
-                <span class="title-text">
-                  Join the Conversation
-                </span>
+                <span class="title-text">Join the Conversation</span>
               </h2>
-
+        
               <!-- Comment Form -->
               <div class="comment-form">
                 <h3 class="form-title">Share Your Thoughts</h3>
@@ -571,7 +659,7 @@ <h3 class="form-title">Share Your Thoughts</h3>
                   </button>
                 </form>
               </div>
-
+        
               <!-- Comment List -->
               <div id="commentList" class="comment-list">
                 <!-- Existing comments will be loaded here -->
@@ -579,6 +667,7 @@ <h3 class="form-title">Share Your Thoughts</h3>
             </div>
           </div>
         </section>
+        
 
         <script>
           // Comment data structure
@@ -1044,36 +1133,37 @@ <h5 class="commenter-name">${comment.name}</h5>
       <div class="col-4">
         <aside id="sidebar" class="px-1">
 
-          <!--categories-->
-          <section class="categories">
-            <center>
-              <h2 class="category-heading">Categories</h2>
-            </center>
-            <div class="category-item">
-              <a href="#" class="d-flex justify-content-between text-dark">
-                <span>Design</span>
-                <span>5</span>
-              </a>
-            </div>
-            <div class="category-item">
-              <a href="#" class="d-flex justify-content-between text-dark">
-                <span>Illustrations</span>
-                <span>10</span>
-              </a>
-            </div>
-            <div class="category-item">
-              <a href="#" class="d-flex justify-content-between text-dark">
-                <span>Fashion</span>
-                <span>5</span>
-              </a>
-            </div>
-            <div class="category-item">
-              <a href="#" class="d-flex justify-content-between text-dark">
-                <span>Graphic</span>
-                <span>4</span>
-              </a>
-            </div>
-          </section>
+         <!-- Categories Section -->
+<section class="categories">
+  <h2 class="category-heading">Categories</h2>
+  <div class="category-list">
+    <div class="category-item">
+      <a href="#" class="category-link d-flex justify-content-between text-dark">
+        <span>Design</span>
+        <span>5</span>
+      </a>
+    </div>
+    <div class="category-item">
+      <a href="#" class="category-link d-flex justify-content-between text-dark">
+        <span>Illustrations</span>
+        <span>10</span>
+      </a>
+    </div>
+    <div class="category-item">
+      <a href="#" class="category-link d-flex justify-content-between text-dark">
+        <span>Fashion</span>
+        <span>5</span>
+      </a>
+    </div>
+    <div class="category-item">
+      <a href="#" class="category-link d-flex justify-content-between text-dark">
+        <span>Graphic</span>
+        <span>4</span>
+      </a>
+    </div>
+  </div>
+</section>
+
 
           <style>
             :root {
diff --git a/category.html b/category.html
index 62882319..985c516b 100644
--- a/category.html
+++ b/category.html
@@ -73,10 +73,10 @@ <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>
-        
+            <a href="#" class="profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleDropdown()">
+                        
+                <img 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>
             <!-- Dropdown Menu -->
             <ul class="dropdown-menu" id="dropdownMenu">
                 <li><a href="#login" onclick="openForm('login')">Login</a></li>
diff --git a/contact_us.html b/contact_us.html
index 0449ebe3..12056465 100644
--- a/contact_us.html
+++ b/contact_us.html
@@ -117,9 +117,10 @@ <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>
+        <a href="#" class="profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleDropdown()">
+                        
+          <img 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>
 
         <!-- Dropdown Menu -->
         <ul class="dropdown-menu" id="dropdownMenu">
diff --git a/give_feedback.html b/give_feedback.html
index 6de6a9ef..a161bba2 100644
--- a/give_feedback.html
+++ b/give_feedback.html
@@ -119,9 +119,11 @@ <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>
+       
+        <a href="#" class="profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleDropdown()">
+                        
+          <img 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>
 
         <!-- Dropdown Menu -->
         <ul class="dropdown-menu" id="dropdownMenu">
diff --git a/index.html b/index.html
index 50413279..a6092e58 100644
--- a/index.html
+++ b/index.html
@@ -394,10 +394,12 @@ <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 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>
-                    </li>
+                    <a href="javascript:void(0);" class="profile-link" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
+                        
+                        <img 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>
+                
+                
                 
                     <!-- Dropdown Menu -->
                     <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
@@ -528,6 +530,7 @@ <h2>Forgot Password</h2>
 
 
 
+
                 <!-- Styles -->
                 <style>
                     .form-popup {
diff --git a/start_writing.html b/start_writing.html
index f198ee78..5294b06e 100644
--- a/start_writing.html
+++ b/start_writing.html
@@ -93,10 +93,10 @@ <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>
-      
+          <a href="#" class="profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleDropdown()">
+                        
+            <img 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>
           <!-- Dropdown Menu -->
           <ul class="dropdown-menu" id="dropdownMenu">
               <li><a href="#login" onclick="openForm('login')">Login</a></li>