diff --git a/frontend/src/pages/Blogs.js b/frontend/src/pages/Blogs.js
index cad5397d..dd95444b 100644
--- a/frontend/src/pages/Blogs.js
+++ b/frontend/src/pages/Blogs.js
@@ -1,3 +1,27 @@
+const blogPosts = [
+    {
+        title: "Mastering Vocabulary: 10 Words to Boost Your Language Skills",
+        excerpt: "Expand your vocabulary and improve your language proficiency with these essential words...",
+        date: "2023-05-15",
+        tags: "Vocabulary, Learning Tips",
+        imagePath: "../assets/blog/4.webp"
+    },
+    {
+        title: "Essential Grammar Rules for Clear Communication",
+        excerpt: "Master these fundamental grammar rules to enhance your language skills and communicate more effectively...",
+        date: "2023-05-20",
+        tags: "Grammar, Writing",
+        imagePath: "../assets/blog/2.webp"
+    },
+    {
+        title: "Mastering Pronunciation: Tips and Tricks",
+        excerpt: "Improve your accent and speak more clearly with these pronunciation techniques...",
+        date: "2023-05-25",
+        tags: "Pronunciation, Speaking",
+        imagePath: "../assets/blog/3.webp"
+    }
+];
+
 export function renderBlogs(container) {
     container.innerHTML = `
         <div class="container mx-auto px-4 py-8">
@@ -7,29 +31,9 @@ export function renderBlogs(container) {
             </header>
 
             <div class="flex flex-col md:flex-row gap-8">
-                <main class="md:w-2/3">
+                <main class="md:w-2/3" id="blog-posts-container">
                     <div class="grid gap-6">
-                        ${renderBlogPost(
-                            "Mastering Vocabulary: 10 Words to Boost Your Language Skills",
-                            "Expand your vocabulary and improve your language proficiency with these essential words...",
-                            "2023-05-15",
-                            "Vocabulary, Learning Tips",
-                            "../assets/blog/4.webp"
-                        )}
-                        ${renderBlogPost(
-                            "Essential Grammar Rules for Clear Communication",
-                            "Master these fundamental grammar rules to enhance your language skills and communicate more effectively...",
-                            "2023-05-20",
-                            "Grammar, Writing",
-                            "../assets/blog/2.webp"
-                        )}
-                        ${renderBlogPost(
-                            "Mastering Pronunciation: Tips and Tricks",
-                            "Improve your accent and speak more clearly with these pronunciation techniques...",
-                            "2023-05-25",
-                            "Pronunciation, Speaking",
-                            "../assets/blog/3.webp"
-                        )}
+                        ${renderBlogPosts(blogPosts)}
                     </div>
                 </main>
 
@@ -41,6 +45,22 @@ export function renderBlogs(container) {
             </div>
         </div>
     `;
+
+    document.getElementById('search-input').addEventListener('input', function () {
+        const query = this.value.toLowerCase();
+        const filteredPosts = blogPosts.filter(post =>
+            post.title.toLowerCase().includes(query) ||
+            post.excerpt.toLowerCase().includes(query) ||
+            post.tags.toLowerCase().includes(query)
+        );
+
+        const blogPostsContainer = document.getElementById('blog-posts-container');
+        blogPostsContainer.innerHTML = `<div class="grid gap-6">${renderBlogPosts(filteredPosts)}</div>`;
+    });
+}
+
+function renderBlogPosts(posts) {
+    return posts.map(post => renderBlogPost(post.title, post.excerpt, post.date, post.tags, post.imagePath)).join('');
 }
 
 function renderBlogPost(title, excerpt, date, tags, imagePath) {
@@ -58,19 +78,11 @@ function renderBlogPost(title, excerpt, date, tags, imagePath) {
                     </svg>
                     <time datetime="${date}">${formatDate(date)}</time>
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l5 5a2 2 0 01.586 1.414v5c0 .512-.195 1.024-.586 1.414l-5 5a2 2 0 01-1.414.586H7a2 2 0 01-2-2v-8a2 2 0 012-2z" />
                     </svg>
-                    <span>${tags}</span>
+                    <span class="font-medium text-gray-900 dark:text-white">${tags}</span>
                 </div>
             </div>
-            <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
-                <a href="#" class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-                    </svg>
-                    Read More
-                </a>
-            </div>
         </article>
     `;
 }
@@ -80,7 +92,7 @@ function renderSearchWidget() {
         <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6">
             <h2 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Search</h2>
             <div class="relative">
-                <input type="text" placeholder="Search blog posts" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md pl-10 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+                <input type="text" id="search-input" placeholder="Search blog posts" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md pl-10 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 dark:text-gray-300 absolute left-3 top-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                 </svg>
@@ -90,8 +102,8 @@ function renderSearchWidget() {
 }
 
 function renderCategoriesWidget() {
-    return `
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6">
+    // Your categories widget code here
+    return `<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6">
             <h2 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Categories</h2>
             <ul class="space-y-2">
                 <li><a href="/blog/category/vocabulary" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Vocabulary</a></li>
@@ -100,24 +112,25 @@ function renderCategoriesWidget() {
                 <li><a href="/blog/category/culture" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Culture</a></li>
                 <li><a href="/blog/category/learning-tips" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Learning Tips</a></li>
             </ul>
-        </div>
-    `;
+        </div>`;
 }
 
 function renderRecentPostsWidget() {
-    return `
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+    // Your recent posts widget code here
+    return `<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
             <h2 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Recent Posts</h2>
             <ul class="space-y-2">
                 <li><a href="/blog/post-4" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">The Art of Conversation</a></li>
                 <li><a href="/blog/post-5" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Idioms Around the World</a></li>
                 <li><a href="/blog/post-6" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Effective Note-Taking Strategies</a></li>
             </ul>
-        </div>
-    `;
+        </div>`;
 }
 
-function formatDate(dateString) {
-    const options = { year: 'numeric', month: 'long', day: 'numeric' };
-    return new Date(dateString).toLocaleDateString('en-US', options);
+function formatDate(date) {
+    return new Date(date).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+    });
 }
diff --git a/frontend/src/styles/output.css b/frontend/src/styles/output.css
index b1343ad6..54b15c0d 100644
--- a/frontend/src/styles/output.css
+++ b/frontend/src/styles/output.css
@@ -1354,6 +1354,10 @@ video {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;