Index: backend/controllers/forumController.js
===================================================================
--- backend/controllers/forumController.js	(revision 420d7b9b1837b208cbebd6615b98ec8012e3d42e)
+++ backend/controllers/forumController.js	(revision 909821d87b77e470a89d64f5600d2259fb44dc15)
@@ -1,23 +1,23 @@
-const prisma = require("../lib/prisma");
-const ForumPost = require("../models/ForumPost");
-const Comment = require("../models/Comment");
-const filter = require("leo-profanity");
-const mkProfanity = require("../filters/macedonianProfanity");
+const prisma = require('../lib/prisma');
+const ForumPost = require('../models/ForumPost');
+const Comment = require('../models/Comment');
+const filter = require('leo-profanity');
+const mkProfanity = require('../filters/macedonianProfanity');
 filter.add(mkProfanity);
-const safeWords = require("../filters/safeWords");
-const { analyzePostContent } = require("../ai/processRequestAi");
-const { createReviewPost } = require("./reviewController");
-const verifyModeratorStatus = require("../services/checkModeratorStatus");
-const { resetPostCheckCounter } = require("../services/forumCountersReset");
+const safeWords = require('../filters/safeWords');
+const { analyzePostContent } = require('../ai/processRequestAi');
+const { createReviewPost } = require('./reviewController');
+const verifyModeratorStatus = require('../services/checkModeratorStatus');
+const { resetPostCheckCounter } = require('../services/forumCountersReset');
 const {
   sendDeletedFromForumEmail,
   sendDeletedCommentEmail,
   sendCommentedNotificationEmail,
-} = require("../services/emailService");
+} = require('../services/emailService');
 const createForumPost = async (req, res) => {
   const { title, content, authorId, authorName, topic, challengeId } = req.body;
   if (!title || !content || !authorId || !authorName || !topic) {
     return res.status(400).json({
-      error: "Title, content, authorId, and authorName are required",
+      error: 'Title, content, authorId, and authorName are required',
     });
   }
@@ -29,5 +29,5 @@
     const postCounter = user.postCounter;
     const postCheckCounter = user.postCheckCounter;
-    console.log("Post check:", postCheckCounter);
+    console.log('Post check:', postCheckCounter);
 
     if (postCounter >= -11) {
@@ -46,9 +46,9 @@
       if (isProfane) {
         return res.status(400).json({
-          error: "Content contains inappropriate language",
+          error: 'Content contains inappropriate language',
         });
       } else if (filter.check(post.content)) {
         return res.status(400).json({
-          error: "Content contains inappropriate language",
+          error: 'Content contains inappropriate language',
         });
       } else if (post.content.length > 200) {
@@ -58,9 +58,9 @@
           return;
         } catch (reviewError) {
-          console.error("Error submitting post for review:", reviewError);
+          console.error('Error submitting post for review:', reviewError);
           return res.status(500).json({
             error:
               reviewError.message ||
-              "Failed to submit post for review due to an internal error.",
+              'Failed to submit post for review due to an internal error.',
           });
         }
@@ -68,6 +68,6 @@
         return res.status(202).json({
           message:
-            "Would you like to send this post to moderator for approval?",
-          reason: "USER_FLAGGED",
+            'Would you like to send this post to moderator for approval?',
+          reason: 'USER_FLAGGED',
         });
       } else if (
@@ -80,6 +80,6 @@
         try {
           const aiResponse = await analyzePostContent(post.title, post.content);
-          if (aiResponse.aiResponse === "INAPPROPRIATE") {
-            console.log("AI analysis says INAPPROPRIATE:", aiResponse.reason);
+          if (aiResponse.aiResponse === 'INAPPROPRIATE') {
+            console.log('AI analysis says INAPPROPRIATE:', aiResponse.reason);
             await prisma.users.update({
               where: { id: authorId },
@@ -89,11 +89,11 @@
             });
             return res.status(400).json({
-              error: "Content is not appropriate for the forum",
+              error: 'Content is not appropriate for the forum',
             });
           }
         } catch (error) {
-          console.error("AI analysis error:", error);
+          console.error('AI analysis error:', error);
           return res.status(500).json({
-            error: "AI analysis failed, please try again later",
+            error: 'AI analysis failed, please try again later',
           });
         }
@@ -118,15 +118,15 @@
       await resetPostCheckCounter(authorId);
       res.status(201).json({
-        message: "Forum post created successfully",
+        message: 'Forum post created successfully',
         post: savedPost,
       });
     } else {
       return res.status(400).json({
-        error: "You have reached the daily limit for creating posts.",
+        error: 'You have reached the daily limit for creating posts.',
       });
     }
   } catch (err) {
-    console.error("Server error:", err);
-    res.status(500).json({ error: "Internal server error" });
+    console.error('Server error:', err);
+    res.status(500).json({ error: 'Internal server error' });
   }
 };
@@ -179,5 +179,5 @@
     const filters = [];
     let orderBy = [];
-    if (topic && topic !== "all") {
+    if (topic && topic !== 'all') {
       filters.push({ topic });
     }
@@ -191,11 +191,11 @@
       }
     }
-    if (sort === "past-week" || sort === "past-month" || sort === "past-year") {
+    if (sort === 'past-week' || sort === 'past-month' || sort === 'past-year') {
       const fromDate = new Date();
-      if (sort === "past-week") {
+      if (sort === 'past-week') {
         fromDate.setDate(fromDate.getDate() - 7);
-      } else if (sort === "past-month") {
+      } else if (sort === 'past-month') {
         fromDate.setDate(fromDate.getDate() - 30);
-      } else if (sort === "past-year") {
+      } else if (sort === 'past-year') {
         fromDate.setDate(fromDate.getDate() - 365);
       }
@@ -206,11 +206,11 @@
       });
     } else if (!commentSort) {
-      orderBy.push({ date_created: "desc" });
+      orderBy.push({ date_created: 'desc' });
     }
     if (search) {
       filters.push({
         OR: [
-          { title: { contains: search, mode: "insensitive" } },
-          { content: { contains: search, mode: "insensitive" } },
+          { title: { contains: search, mode: 'insensitive' } },
+          { content: { contains: search, mode: 'insensitive' } },
         ],
       });
@@ -220,11 +220,11 @@
     const whereCondition = filters.length > 0 ? { AND: filters } : {};
 
-    if (commentSort === "most-popular") {
-      orderBy.push({ comment_count: "desc" });
-
-      orderBy.push({ date_created: "desc" });
-    } else if (commentSort === "least-popular") {
-      orderBy.push({ comment_count: "asc" });
-      orderBy.push({ date_created: "desc" });
+    if (commentSort === 'most-popular') {
+      orderBy.push({ comment_count: 'desc' });
+
+      orderBy.push({ date_created: 'desc' });
+    } else if (commentSort === 'least-popular') {
+      orderBy.push({ comment_count: 'asc' });
+      orderBy.push({ date_created: 'desc' });
     }
 
@@ -254,5 +254,5 @@
     }));
     if (
-      (sort === "past-week" || sort === "past-month" || sort == "past-year") &&
+      (sort === 'past-week' || sort === 'past-month' || sort == 'past-year') &&
       !commentSort
     ) {
@@ -261,18 +261,18 @@
 
     // Set cache control headers to prevent caching
-    res.set("Cache-Control", "no-store, no-cache, must-revalidate, private");
-    res.set("Pragma", "no-cache");
-    res.set("Expires", "0");
+    res.set('Cache-Control', 'no-store, no-cache, must-revalidate, private');
+    res.set('Pragma', 'no-cache');
+    res.set('Expires', '0');
 
     // Add response information to help debug the filtering
-    res.set("X-Total-Posts", forumPosts.length.toString());
-    res.set("X-Filter-Topic", topic || "none");
-    res.set("X-Filter-Applied", JSON.stringify(whereCondition));
-    res.set("X-Sort-Order", JSON.stringify(orderBy));
+    res.set('X-Total-Posts', forumPosts.length.toString());
+    res.set('X-Filter-Topic', topic || 'none');
+    res.set('X-Filter-Applied', JSON.stringify(whereCondition));
+    res.set('X-Sort-Order', JSON.stringify(orderBy));
 
     res.status(200).json({ forumPosts, totalCount });
   } catch (err) {
-    console.error("Server error:", err);
-    res.status(500).json({ error: "Internal server error" });
+    console.error('Server error:', err);
+    res.status(500).json({ error: 'Internal server error' });
   }
 };
@@ -281,14 +281,102 @@
   const userId = req.user.sub;
   try {
-    const posts = await prisma.forum_posts.findMany({
-      where: { author_id: userId },
-      orderBy: {
-        date_created: "desc",
-      },
-    });
-    res.status(200).json(posts);
+    const page = parseInt(req.query.page) || 1;
+    const limit = parseInt(req.query.limit) || 20;
+    const skip = (page - 1) * limit;
+    const take = limit;
+
+    const {
+      topic,
+      date: selectedDate,
+      sort: dateSort,
+      commentSort,
+      search: searchText,
+    } = req.query;
+
+    const filters = [];
+    let orderBy = [];
+
+    filters.push({ author_id: userId });
+
+    if (topic && topic !== 'all') {
+      filters.push({ topic: topic.trim() });
+    }
+
+    if (selectedDate) {
+      const dateObj = new Date(selectedDate);
+      filters.push({ date_created: dateObj });
+    }
+
+    if (
+      dateSort === 'past-week' ||
+      dateSort === 'past-month' ||
+      dateSort === 'past-year'
+    ) {
+      const fromDate = new Date();
+      if (dateSort === 'past-week') fromDate.setDate(fromDate.getDate() - 7);
+      if (dateSort === 'past-month') fromDate.setMonth(fromDate.getMonth() - 1);
+      if (dateSort === 'past-year')
+        fromDate.setFullYear(fromDate.getFullYear() - 1);
+      filters.push({ date_created: { gte: fromDate } });
+    }
+
+    if (searchText && searchText.trim()) {
+      const search = searchText.trim();
+      filters.push({
+        OR: [
+          { title: { contains: search, mode: 'insensitive' } },
+          { content: { contains: search, mode: 'insensitive' } },
+        ],
+      });
+    }
+
+    const whereCondition = filters.length > 0 ? { AND: filters } : {};
+
+    if (commentSort && commentSort !== 'none') {
+      if (commentSort === 'most-popular') {
+        orderBy.push({ comment_count: 'desc' });
+      } else {
+        orderBy.push({ comment_count: 'asc' });
+      }
+      orderBy.push({ date_created: 'desc' });
+    } else {
+      orderBy.push({ date_created: 'desc' });
+    }
+
+    const [posts, totalCount] = await Promise.all([
+      prisma.forum_posts.findMany({
+        where: whereCondition,
+        orderBy: orderBy,
+        skip: skip,
+        take: take,
+        include: {
+          challenges: {
+            select: {
+              id: true,
+              title: true,
+            },
+          },
+        },
+      }),
+      prisma.forum_posts.count({
+        where: whereCondition,
+      }),
+    ]);
+
+    // Map posts to include challengeTitle
+    const processedPosts = posts.map((post) => ({
+      ...post,
+      challengeTitle: post.challenges?.title || null,
+    }));
+
+    res.status(200).json({
+      posts: processedPosts,
+      totalCount,
+      totalPages: Math.ceil(totalCount / limit),
+      currentPage: page,
+    });
   } catch (err) {
-    console.error("Error fetching posts by user:", err);
-    res.status(500).json({ error: "Failed to fetch user posts" });
+    console.error('Error fetching posts by user:', err);
+    res.status(500).json({ error: 'Failed to fetch user posts' });
   }
 };
@@ -308,5 +396,5 @@
 
     if (!post) {
-      return res.status(404).json({ error: "Forum post not found" });
+      return res.status(404).json({ error: 'Forum post not found' });
     }
 
@@ -316,5 +404,5 @@
     if (!isAuthor && !isUserModerator) {
       return res.status(403).json({
-        error: "You do not have permission to delete this post",
+        error: 'You do not have permission to delete this post',
       });
     }
@@ -335,9 +423,9 @@
     return res.status(204).send();
   } catch (err) {
-    if (err.code === "P2025") {
-      return res.status(404).json({ error: "Forum post not found" });
-    }
-    console.error("Server error:", err);
-    res.status(500).json({ error: "Internal server error" });
+    if (err.code === 'P2025') {
+      return res.status(404).json({ error: 'Forum post not found' });
+    }
+    console.error('Server error:', err);
+    res.status(500).json({ error: 'Internal server error' });
   }
 };
@@ -349,5 +437,5 @@
   if (!post_id || !content || !authorId || !authorName) {
     return res.status(400).json({
-      error: "post_id, content, authorId, and authorName are required",
+      error: 'post_id, content, authorId, and authorName are required',
     });
   }
@@ -362,7 +450,7 @@
     const profane = filter.check(comment.content);
     if (profane) {
-      console.log("not safe words or profanity detected!");
+      console.log('not safe words or profanity detected!');
       return res.status(400).json({
-        error: "Content contains inappropriate language or is not on topic",
+        error: 'Content contains inappropriate language or is not on topic',
       });
     }
@@ -395,10 +483,10 @@
     }
     res.status(201).json({
-      message: "Comment created successfully",
+      message: 'Comment created successfully',
       comment: savedComment,
     });
   } catch (err) {
-    console.error("Server error:", err);
-    res.status(500).json({ error: "Internal server error" });
+    console.error('Server error:', err);
+    res.status(500).json({ error: 'Internal server error' });
   }
 };
@@ -410,5 +498,5 @@
     return res
       .status(400)
-      .json({ error: "post_id query parameter is required" });
+      .json({ error: 'post_id query parameter is required' });
   }
 
@@ -419,5 +507,5 @@
       },
       orderBy: {
-        dateCreated: "desc",
+        dateCreated: 'desc',
       },
     });
@@ -436,6 +524,6 @@
     res.status(200).json(comments);
   } catch (err) {
-    console.error("Server error:", err);
-    res.status(500).json({ error: "Internal server error" });
+    console.error('Server error:', err);
+    res.status(500).json({ error: 'Internal server error' });
   }
 };
@@ -451,5 +539,5 @@
 
     if (!comment) {
-      return res.status(404).json({ error: "Comment not found" });
+      return res.status(404).json({ error: 'Comment not found' });
     }
 
@@ -462,5 +550,5 @@
       return res
         .status(404)
-        .json({ error: "Post associated with comment not found" });
+        .json({ error: 'Post associated with comment not found' });
     }
 
@@ -470,5 +558,5 @@
     if (!isUserModerator && !isAuthor) {
       return res.status(403).json({
-        error: "You do not have permission to delete this comment",
+        error: 'You do not have permission to delete this comment',
       });
     }
@@ -501,9 +589,9 @@
     return res.status(204).send();
   } catch (err) {
-    if (err.code === "P2025") {
-      return res.status(404).json({ error: "Comment not found" });
-    }
-    console.error("Server error:", err);
-    res.status(500).json({ error: "Internal server error" });
+    if (err.code === 'P2025') {
+      return res.status(404).json({ error: 'Comment not found' });
+    }
+    console.error('Server error:', err);
+    res.status(500).json({ error: 'Internal server error' });
   }
 };
Index: backend/controllers/reviewController.js
===================================================================
--- backend/controllers/reviewController.js	(revision 420d7b9b1837b208cbebd6615b98ec8012e3d42e)
+++ backend/controllers/reviewController.js	(revision 909821d87b77e470a89d64f5600d2259fb44dc15)
@@ -1,16 +1,16 @@
-const prisma = require("../lib/prisma");
-const ToBeReviewedPost = require("../models/ToBeReviewedPost");
-const ForumPost = require("../models/ForumPost");
-const ForumController = require("./forumController");
-const filter = require("leo-profanity");
-const safeWords = require("../filters/safeWords");
-const verifyModeratorStatus = require("../services/checkModeratorStatus");
-const { resetPostCheckCounter } = require("../services/forumCountersReset");
+const prisma = require('../lib/prisma');
+const ToBeReviewedPost = require('../models/ToBeReviewedPost');
+const ForumPost = require('../models/ForumPost');
+const ForumController = require('./forumController');
+const filter = require('leo-profanity');
+const safeWords = require('../filters/safeWords');
+const verifyModeratorStatus = require('../services/checkModeratorStatus');
+const { resetPostCheckCounter } = require('../services/forumCountersReset');
 const {
   sendApprovalEmail,
   sendDeletionEmail,
   sendModeratorManyPendingPostsEmail,
-} = require("../services/emailService");
-const { equal } = require("assert");
+} = require('../services/emailService');
+const { equal } = require('assert');
 
 const createReviewPost = async (req, res) => {
@@ -59,9 +59,9 @@
     await resetPostCheckCounter(authorId);
     return res.status(201).json({
-      message: "Post submitted for moderator approval",
-    });
-  } catch (err) {
-    console.error("Server error:", err);
-    res.status(500).json({ error: "Internal server error" });
+      message: 'Post submitted for moderator approval',
+    });
+  } catch (err) {
+    console.error('Server error:', err);
+    res.status(500).json({ error: 'Internal server error' });
   }
 };
@@ -71,7 +71,7 @@
     const { userId } = req.params;
     await resetPostCheckCounter(userId);
-    res.status(200).json({ message: "Post check counter reset successfully" });
+    res.status(200).json({ message: 'Post check counter reset successfully' });
   } catch (e) {
-    console.error("Error resetting post check counter:", e);
+    console.error('Error resetting post check counter:', e);
   }
 };
@@ -82,8 +82,8 @@
       page = 0,
       limit = 5,
-      search = "",
-      date = "",
-      topic = "all",
-      dateSort = "newest",
+      search = '',
+      date = '',
+      topic = 'all',
+      dateSort = 'newest',
     } = req.query;
     const skip = parseInt(page) * parseInt(limit);
@@ -92,5 +92,5 @@
     if (!hasModeratorStatus) {
       return res.status(403).json({
-        error: "Access denied. Only moderators can access review posts.",
+        error: 'Access denied. Only moderators can access review posts.',
       });
     }
@@ -102,7 +102,7 @@
         whereClause.AND.push({
           OR: [
-            { title: { contains: search, mode: "insensitive" } },
-            { content: { contains: search, mode: "insensitive" } },
-            { author_name: { contains: search, mode: "insensitive" } },
+            { title: { contains: search, mode: 'insensitive' } },
+            { content: { contains: search, mode: 'insensitive' } },
+            { author_name: { contains: search, mode: 'insensitive' } },
           ],
         });
@@ -122,5 +122,5 @@
         });
       }
-      if (topic && topic !== "all") {
+      if (topic && topic !== 'all') {
         whereClause.AND.push({
           topic: {
@@ -139,5 +139,5 @@
           take: parseInt(limit),
           orderBy: {
-            created_at: dateSort === "oldest" ? "asc" : "desc",
+            created_at: dateSort === 'oldest' ? 'asc' : 'desc',
           },
           include: {
@@ -159,10 +159,10 @@
       res.status(200).json({ posts: reviewPosts, totalPages });
     } catch (dbError) {
-      console.error("Database query error:", dbError);
-      res.status(500).json({ error: "Error fetching posts from database" });
-    }
-  } catch (err) {
-    console.error("Server error:", err);
-    res.status(500).json({ error: "Internal server error" });
+      console.error('Database query error:', dbError);
+      res.status(500).json({ error: 'Error fetching posts from database' });
+    }
+  } catch (err) {
+    console.error('Server error:', err);
+    res.status(500).json({ error: 'Internal server error' });
   }
 };
@@ -177,5 +177,5 @@
       },
       orderBy: {
-        created_at: "desc",
+        created_at: 'desc',
       },
     });
@@ -184,31 +184,41 @@
   } catch (err) {
     console.error("Error fetching user's pending posts:", err);
-    res.status(500).json({ error: "Failed to fetch pending posts" });
+    res.status(500).json({ error: 'Failed to fetch pending posts' });
   }
 };
 
 const deleteReviewPost = async (req, res) => {
-  const { id } = req.params;
-  const { userId } = req.params;
-  const hasModeratorStatus = await verifyModeratorStatus(userId);
-  if (!hasModeratorStatus) {
-    console.log("Access denied: User is not a moderator");
-    return res.status(403).json({
-      error: "Access denied. Only moderators can access review posts.",
-    });
-  }
+  const { id, userId } = req.params;
+
   try {
     const post = await prisma.to_be_reviewed.findUnique({
       where: { id },
     });
+
+    if (!post) {
+      return res.status(404).json({ error: 'Forum post not found' });
+    }
+
+    const isAuthor = post.author_id === userId;
+    const isModerator = await verifyModeratorStatus(userId);
+
+    if (!isAuthor && !isModerator) {
+      console.log('Access denied: Not author or moderator');
+      return res.status(403).json({
+        error:
+          'Access denied. Only the author or a moderator can delete this post.',
+      });
+    }
+
     const author = await prisma.users.findUnique({
       where: { id: post.author_id },
       select: { email: true },
     });
+
     await prisma.to_be_reviewed.delete({
       where: { id },
     });
 
-    if (author && author.email) {
+    if (author?.email) {
       sendDeletionEmail(author.email, post.title);
     }
@@ -216,9 +226,9 @@
     res.status(204).send();
   } catch (err) {
-    if (err.code === "P2025") {
-      return res.status(404).json({ error: "Forum post not found" });
-    }
-    console.error("Server error:", err);
-    res.status(500).json({ error: "Internal server error" });
+    if (err.code === 'P2025') {
+      return res.status(404).json({ error: 'Forum post not found' });
+    }
+    console.error('Server error:', err);
+    res.status(500).json({ error: 'Internal server error' });
   }
 };
@@ -232,7 +242,7 @@
 
     if (!hasModeratorStatus) {
-      console.log("Access denied: User is not a moderator");
+      console.log('Access denied: User is not a moderator');
       return res.status(403).json({
-        error: "Access denied. Only moderators can access review posts.",
+        error: 'Access denied. Only moderators can access review posts.',
       });
     }
@@ -243,5 +253,5 @@
 
     if (!postToApprove) {
-      return res.status(404).json({ error: "Post not found" });
+      return res.status(404).json({ error: 'Post not found' });
     }
 
@@ -280,10 +290,10 @@
 
     res.status(200).json({
-      message: "Post approved and published successfully",
+      message: 'Post approved and published successfully',
       post: newForumPost,
     });
   } catch (err) {
-    console.error("Error approving post:", err);
-    res.status(500).json({ error: "Failed to approve post" });
+    console.error('Error approving post:', err);
+    res.status(500).json({ error: 'Failed to approve post' });
   }
 };
Index: backend/controllers/taskController.js
===================================================================
--- backend/controllers/taskController.js	(revision 420d7b9b1837b208cbebd6615b98ec8012e3d42e)
+++ backend/controllers/taskController.js	(revision 909821d87b77e470a89d64f5600d2259fb44dc15)
@@ -1,7 +1,6 @@
-const { get } = require("http");
-const prisma = require("../lib/prisma");
-const verifyModeratorStatus = require("../services/checkModeratorStatus");
-const Challenge = require("../models/challenge");
-const { at } = require("../filters/macedonianProfanity");
+const { get } = require('http');
+const prisma = require('../lib/prisma');
+const verifyModeratorStatus = require('../services/checkModeratorStatus');
+const Challenge = require('../models/challenge');
 
 //Helper functions
@@ -12,5 +11,5 @@
         return value.toISOString();
       }
-      if (typeof value === "bigint") {
+      if (typeof value === 'bigint') {
         return value.toString();
       }
@@ -20,23 +19,53 @@
 };
 
-const getAllTasks = async (req, res) => {
+const getChallenges = async (req, res) => {
   const userId = req.user.sub;
+  const page = parseInt(req.query.page) || 0;
+  const limit = parseInt(req.query.limit) || 20;
+  const searchText = req.query.searchText;
+  const dateSort = req.query.dateSort;
+  const selectedDate = req.query.selectedDate;
 
   try {
     const isModerator = await verifyModeratorStatus(userId);
     if (!isModerator) {
-      return res.status(403).json({ message: "Access denied" });
-    }
-    const page = parseInt(req.query.page) || 1;
-    const pageSize = parseInt(req.query.pageSize) || 10;
+      return res.status(403).json({ message: 'Access denied' });
+    }
+    let filters = [];
+    orderBy = [];
+    if (dateSort) {
+      orderBy.push({ solving_date: 'asc' });
+    } else {
+      orderBy.push({ solving_date: 'desc' });
+    }
+    if (searchText) {
+      filters.push({
+        OR: [
+          { title: { contains: searchText, mode: 'insensitive' } },
+          { content: { contains: searchText, mode: 'insensitive' } },
+        ],
+      });
+    }
+    if (selectedDate) {
+      const formattedDate = new Date(selectedDate);
+      if (!isNaN(formattedDate.getTime())) {
+        filters.push({ solving_date: formattedDate });
+      } else {
+        console.error(`Invalid date provided: "${selectedDate}"`);
+      }
+    }
+    const whereCondition = filters.length > 0 ? { AND: filters } : {};
 
     const [challenges, total] = await Promise.all([
       prisma.challenges.findMany({
         include: { test_cases: true },
-        orderBy: { solving_date: "desc" },
-        skip: (page - 1) * pageSize,
-        take: pageSize,
+        orderBy: orderBy,
+        skip: (page - 1) * limit,
+        take: limit,
+        where: whereCondition,
       }),
-      prisma.challenges.count(),
+      prisma.challenges.count({
+        where: whereCondition,
+      }),
     ]);
 
@@ -57,14 +86,14 @@
       challenges: processedChallenges,
       total,
-      totalPages: Math.ceil(total / pageSize),
+      totalPages: Math.ceil(total / limit),
       currentPage: page,
-      pageSize,
-    });
-  } catch (error) {
-    console.error("Error fetching all challenges:", error);
+      limit,
+    });
+  } catch (error) {
+    console.error('Error fetching all challenges:', error);
     res.status(500).json({
-      message: "Internal server error",
+      message: 'Internal server error',
       error: error.message,
-      stack: process.env.NODE_ENV === "development" ? error.stack : undefined,
+      stack: process.env.NODE_ENV === 'development' ? error.stack : undefined,
     });
   }
@@ -104,5 +133,5 @@
     });
     if (tasks.length === 0) {
-      return res.status(404).json({ message: "No tasks found for this date" });
+      return res.status(404).json({ message: 'No tasks found for this date' });
     }
 
@@ -113,6 +142,6 @@
         safeTask.test_cases = safeTask.test_cases.map((testCase) => ({
           id: testCase.id,
-          input: testCase.input || "",
-          output: testCase.output || "",
+          input: testCase.input || '',
+          output: testCase.output || '',
           challenge_id: testCase.challenge_id,
         }));
@@ -122,13 +151,13 @@
     });
 
-    res.setHeader("Content-Type", "application/json");
+    res.setHeader('Content-Type', 'application/json');
     res.status(200).json(processedTasks);
   } catch (error) {
-    console.error("Error fetching tasks:", error);
+    console.error('Error fetching tasks:', error);
 
     res.status(500).json({
-      message: "Internal server error",
+      message: 'Internal server error',
       error: error.message,
-      stack: process.env.NODE_ENV === "development" ? error.stack : undefined,
+      stack: process.env.NODE_ENV === 'development' ? error.stack : undefined,
     });
   }
@@ -137,5 +166,5 @@
 const getTasksForForumPost = async (req, res) => {
   try {
-    console.log("Called");
+    console.log('Called');
     const now = new Date();
     const today = new Date(
@@ -156,5 +185,5 @@
         },
       },
-      orderBy: { solving_date: "desc" },
+      orderBy: { solving_date: 'desc' },
     });
 
@@ -174,9 +203,9 @@
     res.status(200).json(processedChallenges);
   } catch (err) {
-    console.error("Error fetching tasks for forum post:", err);
+    console.error('Error fetching tasks for forum post:', err);
     res.status(500).json({
-      message: "Internal server error",
+      message: 'Internal server error',
       error: err.message,
-      stack: process.env.NODE_ENV === "development" ? err.stack : undefined,
+      stack: process.env.NODE_ENV === 'development' ? err.stack : undefined,
     });
   }
@@ -200,5 +229,5 @@
 
     if (testCases.length === 0) {
-      return res.status(404).json({ message: "No test cases found for today" });
+      return res.status(404).json({ message: 'No test cases found for today' });
     }
 
@@ -206,11 +235,11 @@
       testCases[Math.floor(Math.random() * testCases.length)];
 
-    res.setHeader("Content-Type", "application/json");
+    res.setHeader('Content-Type', 'application/json');
     res.status(200).json(randomTestCase);
   } catch (error) {
-    console.error("Error fetching test cases:", error);
+    console.error('Error fetching test cases:', error);
     res
       .status(500)
-      .json({ message: "Internal server error", error: error.message });
+      .json({ message: 'Internal server error', error: error.message });
   }
 };
@@ -231,5 +260,5 @@
     });
     if (challenges.length === 0) {
-      return res.status(404).json({ message: "No tasks found for this date" });
+      return res.status(404).json({ message: 'No tasks found for this date' });
     }
 
@@ -240,6 +269,6 @@
         safeTask.test_cases = safeTask.test_cases.map((testCase) => ({
           id: testCase.id,
-          input: testCase.input || "",
-          output: testCase.output || "",
+          input: testCase.input || '',
+          output: testCase.output || '',
           challenge_id: testCase.challenge_id,
         }));
@@ -250,9 +279,9 @@
     res.status(200).json(parsedChallenges);
   } catch (error) {
-    console.error("Error searching tasks by date:", error);
+    console.error('Error searching tasks by date:', error);
     res.status(500).json({
-      message: "Internal server error",
+      message: 'Internal server error',
       error: error.message,
-      stack: process.env.NODE_ENV === "development" ? error.stack : undefined,
+      stack: process.env.NODE_ENV === 'development' ? error.stack : undefined,
     });
   }
@@ -273,12 +302,12 @@
     });
     if (!testCase) {
-      return res.status(404).json({ message: "Test case not found" });
+      return res.status(404).json({ message: 'Test case not found' });
     }
     res.status(200).json(testCase);
   } catch (error) {
-    console.error("Error fetching specific test case by ID:", error);
+    console.error('Error fetching specific test case by ID:', error);
     res
       .status(500)
-      .json({ message: "Internal server error", error: error.message });
+      .json({ message: 'Internal server error', error: error.message });
   }
 };
@@ -300,13 +329,13 @@
       return res
         .status(404)
-        .json({ message: "No test cases found for this task" });
+        .json({ message: 'No test cases found for this task' });
     }
 
     res.status(200).json(testCases);
   } catch (error) {
-    console.error("Error fetching all test cases for task:", error);
+    console.error('Error fetching all test cases for task:', error);
     res
       .status(500)
-      .json({ message: "Internal server error", error: error.message });
+      .json({ message: 'Internal server error', error: error.message });
   }
 };
@@ -317,5 +346,5 @@
 
   if (!testCaseId) {
-    return res.status(400).json({ message: "testCaseId is required" });
+    return res.status(400).json({ message: 'testCaseId is required' });
   }
 
@@ -328,29 +357,29 @@
     res.status(200).json({ user: updatedUser });
   } catch (error) {
-    console.error("Error updating user daily test case ID:", error);
-    if (error.code === "P2025") {
-      return res.status(404).json({ message: "User not found" });
+    console.error('Error updating user daily test case ID:', error);
+    if (error.code === 'P2025') {
+      return res.status(404).json({ message: 'User not found' });
     }
     res
       .status(500)
-      .json({ message: "Internal server error", error: error.message });
+      .json({ message: 'Internal server error', error: error.message });
   }
 };
 
 const RANK_DATA = {
-  Novice: { id: 1, title: "Novice", requiredPoints: 0 },
-  Learner: { id: 2, title: "Learner", requiredPoints: 300 },
-  "Junior Developer": { id: 3, title: "Junior Developer", requiredPoints: 800 },
-  Developer: { id: 4, title: "Developer", requiredPoints: 1500 },
-  "Senior Developer": {
+  Novice: { id: 1, title: 'Novice', requiredPoints: 0 },
+  Learner: { id: 2, title: 'Learner', requiredPoints: 300 },
+  'Junior Developer': { id: 3, title: 'Junior Developer', requiredPoints: 800 },
+  Developer: { id: 4, title: 'Developer', requiredPoints: 1500 },
+  'Senior Developer': {
     id: 5,
-    title: "Senior Developer",
+    title: 'Senior Developer',
     requiredPoints: 2500,
   },
-  Expert: { id: 6, title: "Expert", requiredPoints: 4000 },
-  Master: { id: 7, title: "Master", requiredPoints: 6000 },
-  "Grand Master": { id: 8, title: "Grand Master", requiredPoints: 8500 },
-  "FINKI Royalty": { id: 9, title: "FINKI Royalty", requiredPoints: 11000 },
-  "FINKI Legend": { id: 10, title: "FINKI Legend", requiredPoints: 16000 },
+  Expert: { id: 6, title: 'Expert', requiredPoints: 4000 },
+  Master: { id: 7, title: 'Master', requiredPoints: 6000 },
+  'Grand Master': { id: 8, title: 'Grand Master', requiredPoints: 8500 },
+  'FINKI Royalty': { id: 9, title: 'FINKI Royalty', requiredPoints: 11000 },
+  'FINKI Legend': { id: 10, title: 'FINKI Legend', requiredPoints: 16000 },
 };
 
@@ -364,5 +393,5 @@
     }
   }
-  return RANK_DATA["Novice"];
+  return RANK_DATA['Novice'];
 }
 
@@ -396,17 +425,17 @@
     str
       .toString()
-      .replace(/[^\w.-]/g, "")
+      .replace(/[^\w.-]/g, '')
       .trim()
       .toLowerCase();
 
   const normalizeArray = (str) => {
-    const cleaned = str.replace(/[\[\]]/g, "");
+    const cleaned = str.replace(/[\[\]]/g, '');
     return cleaned
       .split(/[\s,]+/)
-      .filter((val) => val !== "")
+      .filter((val) => val !== '')
       .map((val) => val.trim());
   };
 
-  if (outputType === "integer") {
+  if (outputType === 'integer') {
     const cleanedUserOutput = normalizeString(userOutput);
     const cleanedExpectedOutput = normalizeString(expectedOutput);
@@ -414,5 +443,5 @@
   }
 
-  if (outputType === "float") {
+  if (outputType === 'float') {
     const cleanedUserOutput = normalizeString(userOutput);
     const cleanedExpectedOutput = normalizeString(expectedOutput);
@@ -424,5 +453,5 @@
   }
 
-  if (outputType === "array") {
+  if (outputType === 'array') {
     const userArr = normalizeArray(userOutput);
     const expectedArr = normalizeArray(expectedOutput);
@@ -444,5 +473,5 @@
   try {
     if (!testCaseId || !userOutput || !userId) {
-      return res.status(400).json({ message: "Missing required fields" });
+      return res.status(400).json({ message: 'Missing required fields' });
     }
     const testCase = await prisma.test_cases.findUnique({
@@ -455,13 +484,13 @@
       return res
         .status(400)
-        .json({ message: "Test case does not belong to the task" });
+        .json({ message: 'Test case does not belong to the task' });
     }
     let user = await prisma.users.findUnique({ where: { id: userId } });
 
     if (!user) {
-      return res.status(404).json({ message: "User not found" });
+      return res.status(404).json({ message: 'User not found' });
     }
     if (user.solvedDailyChallenge) {
-      return res.status(404).json({ message: "User daily challenge solved" });
+      return res.status(404).json({ message: 'User daily challenge solved' });
     }
     let attempts = user.attempts || 0;
@@ -485,7 +514,7 @@
       const attemptScore = getAttemptScore(attempts + 1);
       const difficultyScore =
-        task.difficulty === "Easy"
+        task.difficulty === 'Easy'
           ? 10
-          : task.difficulty === "Medium"
+          : task.difficulty === 'Medium'
           ? 20
           : 30;
@@ -507,5 +536,5 @@
       const responseUser = { ...updatedUser };
 
-      if (typeof responseUser.points === "bigint") {
+      if (typeof responseUser.points === 'bigint') {
         responseUser.points = responseUser.points.toString();
       }
@@ -518,5 +547,5 @@
       return res.status(200).json({
         success: true,
-        message: "Challenge solved successfully!",
+        message: 'Challenge solved successfully!',
         scoreAwarded: totalScore,
         newTotalPoints: responseUser.points,
@@ -534,7 +563,7 @@
       return res.status(200).json({
         success: false,
-        message: "Incorrect solution. Try again!",
+        message: 'Incorrect solution. Try again!',
         attemptsMade:
-          typeof newAttempts === "bigint"
+          typeof newAttempts === 'bigint'
             ? newAttempts.toString()
             : newAttempts,
@@ -542,7 +571,7 @@
     }
   } catch (error) {
-    console.error("Error evaluating task:", error);
+    console.error('Error evaluating task:', error);
     return res.status(500).json({
-      message: "Internal server error during evaluation.",
+      message: 'Internal server error during evaluation.',
       error: error.message,
     });
@@ -557,5 +586,5 @@
     if (!isModeratorOrAdmin) {
       return res.status(403).json({
-        message: "You do not have permission to create challenges",
+        message: 'You do not have permission to create challenges',
       });
     }
@@ -584,11 +613,11 @@
       expired: false,
       examples: examples,
-      output_type: output_type || "string",
-      difficulty: difficulty || "Easy",
+      output_type: output_type || 'string',
+      difficulty: difficulty || 'Easy',
     });
     const validation = challenge.validate();
     if (!validation.isValid) {
       return res.status(400).json({
-        message: "Challenge validation failed",
+        message: 'Challenge validation failed',
         errors: validation.errors,
       });
@@ -615,5 +644,5 @@
 
     res.status(201).json({
-      message: "Challenge created successfully",
+      message: 'Challenge created successfully',
       challenge: {
         id: createdChallenge.id,
@@ -624,9 +653,9 @@
     });
   } catch (error) {
-    console.error("Error creating challenge:", error);
+    console.error('Error creating challenge:', error);
     res.status(500).json({
-      message: "Internal server error",
+      message: 'Internal server error',
       error: error.message,
-      stack: process.env.NODE_ENV === "development" ? error.stack : undefined,
+      stack: process.env.NODE_ENV === 'development' ? error.stack : undefined,
     });
   }
@@ -650,17 +679,17 @@
 
       res.status(200).json({
-        message: "Challenge and associated test cases deleted successfully",
+        message: 'Challenge and associated test cases deleted successfully',
       });
     } else {
       res.status(403).json({
-        message: "You do not have permission to delete this challenge",
-      });
-    }
-  } catch (error) {
-    console.error("Error deleting challenge:", error);
+        message: 'You do not have permission to delete this challenge',
+      });
+    }
+  } catch (error) {
+    console.error('Error deleting challenge:', error);
     res.status(500).json({
-      message: "Internal server error",
+      message: 'Internal server error',
       error: error.message,
-      stack: process.env.NODE_ENV === "development" ? error.stack : undefined,
+      stack: process.env.NODE_ENV === 'development' ? error.stack : undefined,
     });
   }
@@ -674,5 +703,5 @@
   fetchTestCaseForToday,
   evaluateTask,
-  getAllTasks,
+  getChallenges,
   getAllTestCasesForTask,
   deleteTask,
Index: backend/routers/taskRouter.js
===================================================================
--- backend/routers/taskRouter.js	(revision 420d7b9b1837b208cbebd6615b98ec8012e3d42e)
+++ backend/routers/taskRouter.js	(revision 909821d87b77e470a89d64f5600d2259fb44dc15)
@@ -1,22 +1,22 @@
-const express = require("express");
+const express = require('express');
 const router = express.Router();
-const taskController = require("../controllers/taskController");
+const taskController = require('../controllers/taskController');
 
-router.get("/all", taskController.getAllTasks);
-router.get("/", taskController.getTaskByDate);
-router.get("/forum-post", taskController.getTasksForForumPost);
-router.get("/:id/test-case", taskController.fetchTestCaseForToday);
-router.get("/:id/test-cases", taskController.getAllTestCasesForTask);
-router.get("/test-cases/:testCaseId", taskController.getSpecificTestCaseById);
-router.get("/search", taskController.searchTaskByDate);
+router.get('/', taskController.getChallenges);
+router.get('/today', taskController.getTaskByDate);
+router.get('/forum-post', taskController.getTasksForForumPost);
+router.get('/:id/test-case', taskController.fetchTestCaseForToday);
+router.get('/:id/test-cases', taskController.getAllTestCasesForTask);
+router.get('/test-cases/:testCaseId', taskController.getSpecificTestCaseById);
+router.get('/search', taskController.searchTaskByDate);
 router.put(
-  "/users/:userId/daily-test-case-id",
+  '/users/:userId/daily-test-case-id',
   taskController.updateUserDailyChallengeId
 );
 
-router.post("/:id/evaluate", taskController.evaluateTask);
-router.post("/create", taskController.createNewTask);
+router.post('/:id/evaluate', taskController.evaluateTask);
+router.post('/create', taskController.createNewTask);
 
-router.delete("/:id", taskController.deleteTask);
+router.delete('/:id', taskController.deleteTask);
 
 module.exports = router;
Index: backend/scripts/dailyResets.js
===================================================================
--- backend/scripts/dailyResets.js	(revision 420d7b9b1837b208cbebd6615b98ec8012e3d42e)
+++ backend/scripts/dailyResets.js	(revision 909821d87b77e470a89d64f5600d2259fb44dc15)
@@ -91,2 +91,4 @@
   process.exit(0);
 });
+
+dailyResets();
Index: backend/scripts/scriptForTesting.js
===================================================================
--- backend/scripts/scriptForTesting.js	(revision 420d7b9b1837b208cbebd6615b98ec8012e3d42e)
+++ backend/scripts/scriptForTesting.js	(revision 909821d87b77e470a89d64f5600d2259fb44dc15)
@@ -23,7 +23,7 @@
 
 //     console.log(
-//       "Querying between (UTC dates):",
+//       'Querying between (UTC dates):',
 //       startOfEffectiveDay.toISOString(),
-//       "and",
+//       'and',
 //       startOfNextDay.toISOString()
 //     );
@@ -46,5 +46,5 @@
 //       console.log(challenges);
 //     } else {
-//       console.log("No challenges found for today.");
+//       console.log('No challenges found for today.');
 //     }
 //   } catch (error) {
@@ -53,5 +53,5 @@
 //   } finally {
 //     await prisma.$disconnect();
-//     console.log("Disconnected from database.");
+//     console.log('Disconnected from database.');
 //   }
 // }
@@ -80,71 +80,71 @@
 // resetUsers();
 
-async function sendmailToModerators() {
-  try {
-    // 1. Define the time threshold (24 hours ago)
-    const oneDayAgo = new Date();
-    oneDayAgo.setDate(oneDayAgo.getDate());
+// async function sendmailToModerators() {
+//   try {
+//     // 1. Define the time threshold (24 hours ago)
+//     const oneDayAgo = new Date();
+//     oneDayAgo.setDate(oneDayAgo.getDate());
 
-    // 2. Check if there are any posts older than the threshold
-    const posts = await prisma.to_be_reviewed.findMany({
-      where: {
-        created_at: {
-          lt: oneDayAgo, // 'lt' means "less than"
-        },
-      },
-      select: {
-        title: true,
-        created_at: true,
-      },
-      orderBy: {
-        created_at: 'asc',
-      },
-    });
+//     // 2. Check if there are any posts older than the threshold
+//     const posts = await prisma.to_be_reviewed.findMany({
+//       where: {
+//         created_at: {
+//           lt: oneDayAgo, // 'lt' means "less than"
+//         },
+//       },
+//       select: {
+//         title: true,
+//         created_at: true,
+//       },
+//       orderBy: {
+//         created_at: 'asc',
+//       },
+//     });
 
-    console.log(`Found ${posts.length} post(s) older than 24 hours.`);
+//     console.log(`Found ${posts.length} post(s) older than 24 hours.`);
 
-    // 3. If no old posts, exit gracefully
-    if (posts.length === 0) {
-      console.log('No old posts to review. No emails sent.');
-      return;
-    }
-    console.log('Posts awaiting review:');
-    posts.forEach((post, index) => {
-      console.log(
-        `${index + 1}. ${post.title} (ID: ${
-          post.id
-        }) - Created at: ${post.created_at.toISOString()}`
-      );
-    });
+//     // 3. If no old posts, exit gracefully
+//     if (posts.length === 0) {
+//       console.log('No old posts to review. No emails sent.');
+//       return;
+//     }
+//     console.log('Posts awaiting review:');
+//     posts.forEach((post, index) => {
+//       console.log(
+//         `${index + 1}. ${post.title} (ID: ${
+//           post.id
+//         }) - Created at: ${post.created_at.toISOString()}`
+//       );
+//     });
 
-    // 4. If there are old posts, get all moderators
-    const moderators = await prisma.users.findMany({
-      where: {
-        isModerator: true,
-      },
-      select: {
-        email: true, // Only select the email field
-      },
-    });
+//     // 4. If there are old posts, get all moderators
+//     const moderators = await prisma.users.findMany({
+//       where: {
+//         isModerator: true,
+//       },
+//       select: {
+//         email: true, // Only select the email field
+//       },
+//     });
 
-    if (moderators.length === 0) {
-      console.log(
-        'Found old posts, but no moderators are defined in the system.'
-      );
-      return;
-    }
+//     if (moderators.length === 0) {
+//       console.log(
+//         'Found old posts, but no moderators are defined in the system.'
+//       );
+//       return;
+//     }
 
-    const moderatorEmails = moderators.map((m) => m.email);
+//     const moderatorEmails = moderators.map((m) => m.email);
 
-    moderatorEmails.forEach((email) => {
-      sendModeratorEmail(email, posts);
-    });
-  } catch (error) {
-    console.error('Error in sendEmailToModerators script:', error);
-    process.exitCode = 1;
-  } finally {
-    await prisma.$disconnect();
-  }
-}
+//     moderatorEmails.forEach((email) => {
+//       sendModeratorEmail(email, posts);
+//     });
+//   } catch (error) {
+//     console.error('Error in sendEmailToModerators script:', error);
+//     process.exitCode = 1;
+//   } finally {
+//     await prisma.$disconnect();
+//   }
+// }
 
-sendmailToModerators();
+// sendmailToModerators();
Index: client/src/Dashboard/DashboardLayout.jsx
===================================================================
--- client/src/Dashboard/DashboardLayout.jsx	(revision 420d7b9b1837b208cbebd6615b98ec8012e3d42e)
+++ client/src/Dashboard/DashboardLayout.jsx	(revision 909821d87b77e470a89d64f5600d2259fb44dc15)
@@ -1,6 +1,6 @@
-import React, { useState } from "react";
+import React, { useState } from 'react';
 
-import { Outlet, useSearchParams } from "react-router-dom";
-import Navbar from "./components/Navbar";
+import { Outlet, useSearchParams } from 'react-router-dom';
+import Navbar from './components/Navbar';
 
 const DashboardLayout = () => {
Index: client/src/Dashboard/components/CalendarPopover.jsx
===================================================================
--- client/src/Dashboard/components/CalendarPopover.jsx	(revision 420d7b9b1837b208cbebd6615b98ec8012e3d42e)
+++ client/src/Dashboard/components/CalendarPopover.jsx	(revision 909821d87b77e470a89d64f5600d2259fb44dc15)
@@ -1,6 +1,12 @@
-import React, { useRef, useEffect } from "react";
-import "cally";
+import React, { useRef, useEffect } from 'react';
+import 'cally';
 
-const CalendarPopover = ({ isOpen, onClose, onDateSelect, selectedDate }) => {
+const CalendarPopover = ({
+  isOpen,
+  onClose,
+  onDateSelect,
+  selectedDate,
+  isFromManageChallenges,
+}) => {
   const popoverRef = useRef(null);
   const calendarRef = useRef(null);
@@ -13,13 +19,12 @@
     };
     if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener('mousedown', handleClickOutside);
     }
     // Cleanup the event listener
     return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [isOpen, onClose]);
 
-  // Effect to set the calendar's initial value when it opens
   useEffect(() => {
     if (isOpen && calendarRef.current && selectedDate) {
@@ -27,5 +32,5 @@
       const timezoneOffset = date.getTimezoneOffset() * 60000;
       const adjustedDate = new Date(date.getTime() - timezoneOffset);
-      calendarRef.current.value = adjustedDate.toISOString().split("T")[0];
+      calendarRef.current.value = adjustedDate.toISOString().split('T')[0];
     }
   }, [isOpen, selectedDate]);
@@ -36,5 +41,5 @@
     const handleDateChange = (event) => {
       if (event.target.value) {
-        const selected = new Date(event.target.value + "T00:00:00");
+        const selected = new Date(event.target.value + 'T00:00:00');
         onDateSelect(selected);
         onClose();
@@ -43,10 +48,10 @@
 
     if (isOpen && calendarEl) {
-      calendarEl.addEventListener("change", handleDateChange);
+      calendarEl.addEventListener('change', handleDateChange);
     }
 
     return () => {
       if (calendarEl) {
-        calendarEl.removeEventListener("change", handleDateChange);
+        calendarEl.removeEventListener('change', handleDateChange);
       }
     };
@@ -59,5 +64,5 @@
   const timezoneOffset = today.getTimezoneOffset() * 60000; // Get timezone offset in milliseconds
   const adjustedDate = new Date(today.getTime() - timezoneOffset); // Adjust to UTC
-  const maxDate = adjustedDate.toISOString().split("T")[0];
+  const maxDate = adjustedDate.toISOString().split('T')[0];
 
   return (
@@ -69,5 +74,5 @@
         ref={calendarRef}
         class="cally bg-base-100 border border-base-300 shadow-md rounded-box w-full mb-4"
-        max={maxDate}
+        max={isFromManageChallenges ? '' : maxDate}
       >
         <svg
Index: client/src/Dashboard/components/Forum.jsx
===================================================================
--- client/src/Dashboard/components/Forum.jsx	(revision 420d7b9b1837b208cbebd6615b98ec8012e3d42e)
+++ client/src/Dashboard/components/Forum.jsx	(revision 909821d87b77e470a89d64f5600d2259fb44dc15)
@@ -1,12 +1,12 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
-import commentIcon from "../../assets/images/comment.svg";
-import trashIcon from "../../assets/images/delete.svg"; // Add this import
-import Navbar from "./Navbar";
-import { getForumPosts, deleteForumPost } from "@/services/forumService";
-import { useAuth } from "@/contexts/AuthContext";
-import { DatePicker } from "react-daisyui-timetools";
-import "react-datepicker/dist/react-datepicker.css";
-import CalendarPopover from "./CalendarPopover";
+import React, { useState, useEffect, useCallback } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import commentIcon from '../../assets/images/comment.svg';
+import trashIcon from '../../assets/images/delete.svg';
+import Navbar from './Navbar';
+import { getForumPosts, deleteForumPost } from '@/services/forumService';
+import { useAuth } from '@/contexts/AuthContext';
+import { DatePicker } from 'react-daisyui-timetools';
+import 'react-datepicker/dist/react-datepicker.css';
+import CalendarPopover from './CalendarPopover';
 // import { useForumSearchParams } from "../../contexts/ForumSearchParamsContext";
 const Forum = () => {
@@ -22,6 +22,6 @@
   const [modal, setModal] = useState({
     isOpen: false,
-    message: "",
-    type: "",
+    message: '',
+    type: '',
     postId: null,
   });
@@ -31,9 +31,9 @@
 
   const defaultFilters = {
-    topic: "all",
-    dateSort: "newest",
+    topic: 'all',
+    dateSort: 'newest',
     selectedDate: null,
-    commentSort: "none",
-    searchText: "",
+    commentSort: 'none',
+    searchText: '',
   };
 
@@ -49,10 +49,10 @@
   const [showFilters, setShowFilters] = useState(false);
 
-  const showModal = (message, type = "info", postId = null) => {
+  const showModal = (message, type = 'info', postId = null) => {
     setModal({ isOpen: true, message, type, postId });
   };
 
   const closeModal = () => {
-    setModal({ isOpen: false, message: "", type: "", postId: null });
+    setModal({ isOpen: false, message: '', type: '', postId: null });
   };
 
@@ -64,6 +64,4 @@
     }
   };
-
-  // Only fetch posts on component mount
 
   const fetchPosts = useCallback(
@@ -103,8 +101,8 @@
         setPage(pageNum);
       } catch (error) {
-        console.error("Error fetching forum posts:", error);
+        console.error('Error fetching forum posts:', error);
 
         if (error.response) {
-          console.error("Error response:", error.response);
+          console.error('Error response:', error.response);
         }
 
@@ -120,5 +118,5 @@
   );
   useEffect(() => {
-    const pageFromUrl = parseInt(forumSearchParams.get("page") || "1", 10);
+    const pageFromUrl = parseInt(forumSearchParams.get('page') || '1', 10);
     const filtersFromUrl = { ...defaultFilters };
     for (const [key, value] of forumSearchParams.entries()) {
@@ -132,5 +130,4 @@
   }, [forumSearchParams, fetchPosts]);
 
-  // Apply all selected filters
   const applyFilters = () => {
     const newSearchParams = new URLSearchParams();
@@ -141,17 +138,19 @@
       }
     }
-    newSearchParams.set("page", "1");
+    newSearchParams.set('page', '1');
     setForumSearchParams(newSearchParams);
   };
-  const handleRemoveFilter = (filterKeyToRemove) => {
-    const newSearchParams = new URLSearchParams(forumSearchParams);
-    const newFilters = {
-      ...filters,
-      [filterKeyToRemove]: defaultFilters[filterKeyToRemove],
-    };
-    newSearchParams.delete(filterKeyToRemove);
-    newSearchParams.set("page", "1");
-    setForumSearchParams(newSearchParams);
+
+  const handleRemoveFilter = (filterKey) => {
+    const newFilters = { ...filters, [filterKey]: defaultFilters[filterKey] };
     setFilters(newFilters);
+
+    if (forumSearchParams.has(filterKey)) {
+      const newSearchParams = new URLSearchParams(forumSearchParams);
+      newSearchParams.delete(filterKey);
+      setPage(1);
+      newSearchParams.set('page', '1');
+      setForumSearchParams(newSearchParams);
+    }
   };
 
@@ -161,5 +160,5 @@
     const freshDefaultFilters = { ...defaultFilters };
     setFilters(freshDefaultFilters);
-    setForumSearchParams({ page: "1" });
+    setForumSearchParams({ page: '1' });
 
     setPage(1);
@@ -173,15 +172,15 @@
 
       await fetchPosts(1, false, { ...filters });
-      showModal("Post deleted successfully.", "success");
+      showModal('Post deleted successfully.', 'success');
     } catch (error) {
-      console.error("Error deleting post:", error);
+      console.error('Error deleting post:', error);
     }
   };
   const formatFilterLabel = (value) => {
-    if (!value) return "";
+    if (!value) return '';
     return value
-      .split("-")
+      .split('-')
       .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-      .join(" ");
+      .join(' ');
   };
 
@@ -192,49 +191,50 @@
           <div className="flex flex-col">
             {/* Sticky Header Section */}
-            <div className=" border-base-300 shadow-sm">
-              <div className="flex xs:flex-row gap-2 sm:gap-3 w-full lg:w-auto justify-end p-2">
-                <div className="flex gap-3 justify-end">
-                  <button
-                    onClick={() => navigate("/dashboard/create-post")}
-                    className="btn bg-[#FFB800] text-black btn-sm gap-1"
-                  >
-                    <svg
-                      className="w-4 h-4"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="2"
-                        d="M12 4v16m8-8H4"
-                      />
-                    </svg>
-                    <span className="hidden sm:inline">Create Post</span>
-                  </button>
-                  <button
-                    onClick={() => navigate("/dashboard/user-posts")}
-                    className="btn btn-outline btn-sm gap-1"
-                  >
-                    <svg
-                      className="w-4 h-4"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="2"
-                        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-                      />
-                    </svg>
-                    <span className="hidden sm:inline">Your Posts</span>
-                  </button>
-                </div>
-              </div>
+            <div className="pt-3 pr-3 flex gap-3 justify-end">
+              <button
+                onClick={() => navigate('/dashboard/create-post')}
+                className="btn bg-[#FFB800] text-black btn-sm gap-1"
+              >
+                <svg
+                  className="w-4 h-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M12 4v16m8-8H4"
+                  />
+                </svg>
+                <span className="hidden sm:inline">Create Post</span>
+              </button>
+              <button
+                onClick={() => {
+                  navigate(`/dashboard/user-posts`, {
+                    state: {
+                      fromForumSearch: forumSearchParams.toString(),
+                    },
+                  });
+                }}
+                className="btn btn-outline btn-sm gap-1"
+              >
+                <svg
+                  className="w-4 h-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                  />
+                </svg>
+                <span className="hidden sm:inline">Your Posts</span>
+              </button>
             </div>
-
             {/* Filter Navbar */}
             <div className="border-b border-base-300 shadow-sm">
@@ -245,16 +245,15 @@
                     Filters
                     {/* Active filter count indicator */}
-                    {(filters.topic !== "all" ||
-                      filters.dateSort !== "newest" ||
+                    {(filters.topic !== 'all' ||
+                      filters.dateSort !== 'newest' ||
                       filters.selectedDate ||
-                      filters.commentSort !== "none" ||
                       (filters.searchText && filters.searchText.trim())) && (
                       <span className="badge badge-sm bg-yellow-500 text-black border-none">
                         {
                           [
-                            filters.topic !== "all",
-                            filters.dateSort !== "newest",
+                            filters.topic !== 'all',
+                            filters.dateSort !== 'newest',
                             filters.selectedDate,
-                            filters.commentSort !== "none",
+                            filters.commentSort !== 'none',
                             filters.searchText && filters.searchText.trim(),
                           ].filter(Boolean).length
@@ -269,5 +268,5 @@
                     <svg
                       className={`w-5 h-5 transition-transform duration-200 ${
-                        showFilters ? "rotate-180" : ""
+                        showFilters ? 'rotate-180' : ''
                       }`}
                       fill="none"
@@ -288,11 +287,11 @@
                 <div
                   className={`transition-all duration-300 ${
-                    showFilters ? "block opacity-100" : "hidden opacity-0"
+                    showFilters ? 'block opacity-100' : 'hidden opacity-0'
                   } lg:block lg:opacity-100`}
                 >
-                  {/* Mobile-First Filter Layout */}
-                  <div className="space-y-3 lg:space-y-0 lg:grid lg:grid-cols-6 xl:grid-cols-8 lg:gap-3 mb-3 max-w-full">
+                  {/* Mobile-First Filter Layout - Compact Version */}
+                  <div className="space-y-2 lg:space-y-0 lg:grid lg:grid-cols-6 xl:grid-cols-8 lg:gap-2 mb-2 max-w-full">
                     {/* Search Filter - Full width on mobile, 2 cols on desktop */}
-                    <div className="flex flex-col gap-1.5 lg:col-span-2">
+                    <div className="flex flex-col gap-1 lg:col-span-2">
                       <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
                         Search Posts
@@ -310,12 +309,12 @@
                           }
                           onKeyDown={(e) => {
-                            if (e.key === "Enter") {
+                            if (e.key === 'Enter') {
                               applyFilters();
                             }
                           }}
-                          className="input input-sm input-bordered w-full text-sm pl-9 pr-3"
+                          className="input input-sm input-bordered w-full text-xs pl-8 pr-2 h-8"
                         />
                         <svg
-                          className="z-10 w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
+                          className="z-10 w-3.5 h-3.5 absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400"
                           fill="none"
                           stroke="currentColor"
@@ -333,7 +332,7 @@
 
                     {/* Mobile: 2-column grid for selects */}
-                    <div className="grid grid-cols-2 gap-3 lg:contents">
+                    <div className="grid grid-cols-2 gap-2 lg:contents">
                       {/* Topic Filter */}
-                      <div className="flex flex-col gap-1.5 lg:col-span-1">
+                      <div className="flex flex-col gap-1 lg:col-span-1">
                         <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
                           Topic
@@ -344,5 +343,5 @@
                             setFilters({ ...filters, topic: e.target.value })
                           }
-                          className="select select-sm select-bordered w-full text-sm"
+                          className="select select-sm select-bordered w-full text-xs h-8 min-h-8"
                         >
                           <option value="all">All Topics</option>
@@ -355,5 +354,5 @@
 
                       {/* Date Sort */}
-                      <div className="flex flex-col gap-1.5 lg:col-span-1">
+                      <div className="flex flex-col gap-1 lg:col-span-1">
                         <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
                           Date Order
@@ -362,7 +361,10 @@
                           value={filters.dateSort}
                           onChange={(e) =>
-                            setFilters({ ...filters, dateSort: e.target.value })
+                            setFilters({
+                              ...filters,
+                              dateSort: e.target.value,
+                            })
                           }
-                          className="select select-sm select-bordered w-full text-sm"
+                          className="select select-sm select-bordered w-full text-xs h-8 min-h-8"
                         >
                           <option value="newest">Most Recent</option>
@@ -375,8 +377,8 @@
 
                     {/* Mobile: Single column for date picker and popularity */}
-                    <div className="space-y-3 lg:space-y-0 lg:contents">
-                      <div className="flex flex-col gap-1.5 lg:col-span-1">
+                    <div className="space-y-2 lg:space-y-0 lg:contents">
+                      <div className="flex flex-col gap-1 lg:col-span-1">
                         <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
-                          Popularity
+                          Populrarity
                         </label>
                         <select
@@ -388,5 +390,5 @@
                             })
                           }
-                          className="select select-sm select-bordered w-full text-sm"
+                          className="select select-sm select-bordered w-full text-xs h-8 min-h-8"
                         >
                           <option value="none">No Sorting</option>
@@ -396,5 +398,5 @@
                       </div>
                       {/* Specific Date Filter */}
-                      <div className="relative flex flex-col gap-1.5 lg:col-span-1">
+                      <div className="relative flex flex-col gap-1 lg:col-span-1">
                         <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
                           Specific Date
@@ -410,19 +412,19 @@
                                 ? new Date(
                                     filters.selectedDate
-                                  ).toLocaleDateString("en-US", {
-                                    year: "numeric",
-                                    month: "short",
-                                    day: "numeric",
+                                  ).toLocaleDateString('en-US', {
+                                    year: 'numeric',
+                                    month: 'short',
+                                    day: 'numeric',
                                   })
-                                : "" // Use empty string so placeholder is visible
+                                : '' // Use empty string so placeholder is visible
                             }
                             placeholder="Select date"
                             // Style to match other inputs and add cursor-pointer
-                            className="input input-sm input-bordered w-full text-sm pl-9 pr-3 cursor-pointer"
+                            className="input input-sm input-bordered w-full text-xs pl-8 pr-2 cursor-pointer h-8"
                           />
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
                             // Position the icon inside the input field
-                            className="z-10 w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
+                            className="z-10 w-3.5 h-3.5 absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400"
                             fill="none"
                             viewBox="0 0 24 24"
@@ -433,5 +435,5 @@
                               strokeLinejoin="round"
                               strokeWidth={2}
-                              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 002 2z"
                             />
                           </svg>
@@ -445,4 +447,5 @@
                             setFilters({ ...filters, selectedDate: date });
                           }}
+                          isFromManageChallenges={false}
                         />
                       </div>
@@ -450,18 +453,17 @@
 
                     {/* Action Buttons */}
-                    <div className="flex flex-col gap-1.5 lg:col-span-1">
+                    <div className="flex flex-col gap-1 lg:col-span-1">
                       <label className="text-xs font-medium text-gray-500 uppercase tracking-wide opacity-0">
                         Actions
                       </label>
-                      <div className="flex gap-2">
-                        {(filters.topic !== "all" ||
-                          filters.dateSort !== "newest" ||
+                      <div className="flex gap-1.5">
+                        {(filters.topic !== 'all' ||
+                          filters.dateSort !== 'newest' ||
                           filters.selectedDate ||
-                          filters.commentSort !== "none" ||
                           (filters.searchText &&
                             filters.searchText.trim())) && (
                           <button
                             onClick={clearFilters}
-                            className="cursor-pointer px-2.5 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 text-xs font-medium transition-colors duration-200 flex-1 lg:flex-none"
+                            className="cursor-pointer px-2 py-1.5 bg-gray-500 text-white rounded-md hover:bg-gray-600 text-xs font-medium transition-colors duration-200 flex-1 lg:flex-none h-8"
                           >
                             <span className="lg:hidden">Clear Filters</span>
@@ -473,5 +475,5 @@
                         <button
                           onClick={applyFilters}
-                          className="cursor-pointer px-2.5 py-2 bg-yellow-500 text-black rounded-lg hover:bg-yellow-600 text-xs font-medium transition-colors duration-200 flex-1 lg:flex-none"
+                          className="cursor-pointer px-2 py-1.5 bg-yellow-500 text-black rounded-md hover:bg-yellow-600 text-xs font-medium transition-colors duration-200 flex-1 lg:flex-none h-8"
                         >
                           <span className="lg:hidden">Apply Filters</span>
@@ -486,15 +488,15 @@
                   {/* Active Filters Display - Improved Mobile Layout */}
                   <div className="flex flex-wrap gap-1.5 sm:gap-2">
-                    {filters.topic !== "all" && (
-                      <span className="badge badge-outline  flex items-center gap-1 px-2 py-1">
+                    {filters.topic !== 'all' && (
+                      <span className="badge badge-outline badge-sm flex items-center gap-1 px-2 py-1">
                         <span className="font-medium text-xs">
-                          {filters.topic === "general"
-                            ? "General"
-                            : "Daily Challenge"}
+                          {filters.topic === 'general'
+                            ? 'General'
+                            : 'Daily Challenge'}
                         </span>
                         <button
                           type="button"
                           className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none"
-                          onClick={() => handleRemoveFilter("topic")}
+                          onClick={() => handleRemoveFilter('topic')}
                           aria-label="Remove topic filter"
                         >
@@ -504,5 +506,5 @@
                     )}
                     {filters.searchText && filters.searchText.trim() && (
-                      <span className="badge badge-outline  flex items-center gap-1 px-2 py-1 max-w-[200px]">
+                      <span className="badge badge-outline badge-sm flex items-center gap-1 px-2 py-1 max-w-[200px]">
                         <span className="font-medium text-xs truncate">
                           "{filters.searchText.trim()}"
@@ -511,5 +513,5 @@
                           type="button"
                           className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none"
-                          onClick={() => handleRemoveFilter("searchText")}
+                          onClick={() => handleRemoveFilter('searchText')}
                           aria-label="Remove search filter"
                         >
@@ -518,6 +520,23 @@
                       </span>
                     )}
-                    {filters.dateSort !== "newest" && (
-                      <span className="badge badge-outline flex items-center gap-1 px-2 py-1">
+                    {filters.commentSort != 'none' &&
+                      filters.commentSort.trim() && (
+                        <span className="badge badge-outline badge-sm flex items-center gap-1 px-2 py-1 max-w-[200px]">
+                          <span className="font-medium text-xs truncate">
+                            {formatFilterLabel(filters.commentSort)}
+                          </span>
+                          <button
+                            type="button"
+                            className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none"
+                            onClick={() => handleRemoveFilter('commentSort')}
+                            aria-label="Remove search filter"
+                          >
+                            ×
+                          </button>
+                        </span>
+                      )}
+
+                    {filters.dateSort !== 'newest' && (
+                      <span className="badge badge-outline badge-sm flex items-center gap-1 px-2 py-1">
                         <span className="font-medium text-xs">
                           {formatFilterLabel(filters.dateSort)}
@@ -526,5 +545,5 @@
                           type="button"
                           className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none"
-                          onClick={() => handleRemoveFilter("dateSort")}
+                          onClick={() => handleRemoveFilter('dateSort')}
                           aria-label="Remove sort filter"
                         >
@@ -534,12 +553,12 @@
                     )}
                     {filters.selectedDate && (
-                      <span className="badge badge-outline  flex items-center gap-1 px-2 py-1">
+                      <span className="badge badge-outline badge-sm flex items-center gap-1 px-2 py-1">
                         <span className="font-medium text-xs">
                           {new Date(filters.selectedDate).toLocaleDateString(
-                            "en-US",
+                            'en-US',
                             {
-                              year: "numeric",
-                              month: "short",
-                              day: "numeric",
+                              year: 'numeric',
+                              month: 'short',
+                              day: 'numeric',
                             }
                           )}
@@ -548,23 +567,6 @@
                           type="button"
                           className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none"
-                          onClick={() => handleRemoveFilter("selectedDate")}
+                          onClick={() => handleRemoveFilter('selectedDate')}
                           aria-label="Remove date filter"
-                        >
-                          ×
-                        </button>
-                      </span>
-                    )}
-                    {filters.commentSort !== "none" && (
-                      <span className="badge badge-outline  flex items-center gap-1 px-2 py-1">
-                        <span className="font-medium text-xs">
-                          {filters.commentSort === "most-popular"
-                            ? "Most Popular"
-                            : "Least Popular"}
-                        </span>
-                        <button
-                          type="button"
-                          className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none"
-                          onClick={() => handleRemoveFilter("commentSort")}
-                          aria-label="Remove popularity filter"
                         >
                           ×
@@ -608,17 +610,17 @@
                     <div
                       key={post.id}
-                      className="card bg-base-200 shadow-lg hover:shadow-xl transition-all duration-300 border h-full flex flex-col"
+                      className="card bg-base-200 shadow-md md:scale-95 lg:scale-100 hover:shadow-lg transition-all duration-300 border h-full flex flex-col"
                     >
-                      <div className="card-body p-3 sm:p-4 lg:p-5 xl:p-6 flex flex-col h-full relative">
+                      <div className="card-body p-2 sm:p-3 md:p-2.5 lg:p-4 xl:p-5 flex flex-col h-full relative">
                         {(post.author_name === user.name ||
                           post.author_name === user.username ||
                           user.isModerator) && (
                           <button
-                            className="absolute top-2 right-2 p-1.5 cursor-pointer rounded-full hover:bg-base-300 transition-colors"
+                            className="absolute top-1 right-1 p-1 cursor-pointer rounded-full hover:bg-base-300 transition-colors"
                             onClick={(e) => {
                               e.stopPropagation();
                               showModal(
-                                "Are you sure you want to delete this post? This action cannot be undone.",
-                                "confirm",
+                                'Are you sure you want to delete this post? This action cannot be undone.',
+                                'confirm',
                                 post.id
                               );
@@ -628,5 +630,5 @@
                               src={trashIcon}
                               alt="Delete"
-                              className="w-4 h-4 sm:w-5 sm:h-5"
+                              className="w-3 h-3 sm:w-4 sm:h-4"
                             />
                           </button>
@@ -634,5 +636,5 @@
 
                         <h1
-                          className="text-lg sm:text-xl lg:text-2xl font-bold mb-4 pr-16 sm:pr-20 cursor-pointer"
+                          className="text-base sm:text-lg md:text-base lg:text-xl font-bold mb-2 pr-8 sm:pr-12 cursor-pointer line-clamp-2"
                           onClick={() => {
                             navigate(`/dashboard/forum-detail/${post.id}`, {
@@ -647,18 +649,18 @@
                         </h1>
 
-                        <div className="flex flex-wrap items-center gap-1 sm:gap-2 mb-0.5">
+                        <div className="flex flex-wrap items-center gap-1 mb-0.5">
                           <span
-                            className={`inline-block text-xs font-semibold px-1.5 py-0.5 rounded ${
-                              post.topic === "general"
-                                ? "bg-blue-100 text-blue-800"
-                                : "bg-green-100 text-green-800"
+                            className={`inline-block text-xs font-medium px-1 py-0.5 rounded ${
+                              post.topic === 'general'
+                                ? 'bg-blue-100 text-blue-800'
+                                : 'bg-green-100 text-green-800'
                             }`}
                           >
-                            {post.topic === "general"
-                              ? "General"
-                              : "Daily Challenge"}
+                            {post.topic === 'general'
+                              ? 'General'
+                              : 'Daily Challenge'}
                           </span>
                           {post.challengeTitle && (
-                            <span className="inline-block bg-yellow-100 text-yellow-800 text-xs font-semibold px-1.5 py-0.5 rounded">
+                            <span className="inline-block bg-yellow-100 text-yellow-800 text-xs font-medium px-1 py-0.5 rounded truncate max-w-[120px]">
                               {post.challengeTitle}
                             </span>
@@ -666,6 +668,6 @@
                         </div>
 
-                        <p className="text-xs sm:text-sm text-base-content/70 mb-2 sm:mb-6">
-                          By{" "}
+                        <p className="text-xs text-base-content/70 mb-1 sm:mb-2">
+                          By{' '}
                           <span className="font-semibold">
                             {post.author_name}
@@ -674,9 +676,9 @@
                           <span className="italic">
                             {new Date(post.date_created).toLocaleDateString(
-                              "en-US",
+                              'en-US',
                               {
-                                year: "numeric",
-                                month: "short",
-                                day: "numeric",
+                                year: 'numeric',
+                                month: 'short',
+                                day: 'numeric',
                               }
                             )}
@@ -684,13 +686,13 @@
                         </p>
 
-                        <p className="hidden sm:block text-lg text-base-content/80 line-clamp-1">
-                          {post.content && post.content.length > 60
-                            ? post.content.slice(0, 60) + "..."
+                        <p className="hidden sm:block text-sm md:text-xs lg:text-sm text-base-content/80 line-clamp-1 mb-auto">
+                          {post.content && post.content.length > 50
+                            ? post.content.slice(0, 50) + '...'
                             : post.content}
                         </p>
 
-                        <div className="card-actions justify-end mt-4">
+                        <div className="card-actions justify-end mt-2">
                           <div
-                            className="flex items-center gap-1.5 sm:gap-2 cursor-pointer"
+                            className="flex items-center gap-1 cursor-pointer"
                             onClick={() => {
                               navigate(`/dashboard/forum-detail/${post.id}`, {
@@ -699,5 +701,5 @@
                             }}
                           >
-                            <p className="text-xs sm:text-sm font-medium">
+                            <p className="text-xs font-medium">
                               {post.comment_count}
                             </p>
@@ -705,5 +707,5 @@
                               src={commentIcon}
                               alt="Comment"
-                              className="w-4 h-4 sm:w-5 sm:h-5 hover:opacity-80"
+                              className="w-3.5 h-3.5 sm:w-4 sm:h-4 hover:opacity-80"
                             />
                           </div>
@@ -721,5 +723,5 @@
                     onClick={() => {
                       const newPage = page - 1;
-                      forumSearchParams.set("page", newPage.toString());
+                      forumSearchParams.set('page', newPage.toString());
                       setForumSearchParams(forumSearchParams);
                     }}
@@ -734,8 +736,8 @@
                       key={idx}
                       className={`btn btn-sm px-2 sm:px-3 ${
-                        page - 1 === idx ? "border-amber-400" : "btn-ghost"
+                        page - 1 === idx ? 'border-amber-400' : 'btn-ghost'
                       }`}
                       onClick={() => {
-                        forumSearchParams.set("page", (idx + 1).toString());
+                        forumSearchParams.set('page', (idx + 1).toString());
                         setForumSearchParams(forumSearchParams);
                       }}
@@ -756,5 +758,5 @@
                       className="btn btn-sm border-amber-400 px-2 sm:px-3"
                       onClick={() => {
-                        forumSearchParams.set("page", page.toString());
+                        forumSearchParams.set('page', page.toString());
                         setForumSearchParams(forumSearchParams);
                       }}
@@ -768,8 +770,8 @@
                     <button
                       className={`btn btn-sm px-2 sm:px-3 ${
-                        page === totalPages ? "border-amber-400" : "btn-ghost"
+                        page === totalPages ? 'border-amber-400' : 'btn-ghost'
                       }`}
                       onClick={() => {
-                        forumSearchParams.set("page", totalPages.toString());
+                        forumSearchParams.set('page', totalPages.toString());
                         setForumSearchParams(forumSearchParams);
                       }}
@@ -784,5 +786,5 @@
                     onClick={() => {
                       const newPage = page + 1;
-                      forumSearchParams.set("page", newPage.toString());
+                      forumSearchParams.set('page', newPage.toString());
                       setForumSearchParams(forumSearchParams);
                     }}
@@ -809,5 +811,5 @@
           <div className="bg-base-200 rounded-lg shadow-xl p-4 sm:p-6 w-full max-w-sm sm:max-w-md mx-4">
             <div className="flex items-center gap-3 mb-4">
-              {modal.type === "confirm" && (
+              {modal.type === 'confirm' && (
                 <div className="w-8 h-8 rounded-full bg-error flex items-center justify-center shrink-0">
                   <svg
@@ -826,5 +828,5 @@
                 </div>
               )}
-              {modal.type === "success" && (
+              {modal.type === 'success' && (
                 <div className="w-8 h-8 rounded-full bg-success flex items-center justify-center shrink-0">
                   <svg
@@ -849,5 +851,5 @@
             <p className="py-3 sm:py-4 text-sm sm:text-base">{modal.message}</p>
             <div className="flex justify-end gap-2 sm:gap-3 mt-3 sm:mt-4">
-              {modal.type === "confirm" ? (
+              {modal.type === 'confirm' ? (
                 <>
                   <button
@@ -869,5 +871,5 @@
                       </>
                     ) : (
-                      "Delete"
+                      'Delete'
                     )}
                   </button>
Index: client/src/Dashboard/components/ManageChallenges.jsx
===================================================================
--- client/src/Dashboard/components/ManageChallenges.jsx	(revision 420d7b9b1837b208cbebd6615b98ec8012e3d42e)
+++ client/src/Dashboard/components/ManageChallenges.jsx	(revision 909821d87b77e470a89d64f5600d2259fb44dc15)
@@ -1,12 +1,12 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from 'react';
 import {
-  getAllTasks,
+  getChallenges,
   deleteTask,
   searchTaskByDate,
-} from "@/services/taskService";
-import { useAuth } from "@/contexts/AuthContext";
-import { useNavigate, useSearchParams } from "react-router-dom";
-
-import "cally";
+} from '@/services/taskService';
+import { useAuth } from '@/contexts/AuthContext';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import CalendarPopover from './CalendarPopover';
+import 'cally';
 const PAGE_SIZE = 10;
 
@@ -18,66 +18,41 @@
   const [expandedChallenge, setExpandedChallenge] = useState(null);
   const navigate = useNavigate();
+  const [showFilters, setShowFilters] = useState(false);
   const { user } = useAuth();
   const calendarRef = useRef(null);
   const [searchParams, setSearchParams] = useSearchParams();
+  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
+
+  const defaultFilters = {
+    dateSort: 'newest',
+    selectedDate: null,
+    searchText: '',
+  };
+  const [filters, setFilters] = useState(() => {
+    const initialFilters = { ...defaultFilters };
+    for (const [key, value] of searchParams.entries()) {
+      if (key in initialFilters) {
+        initialFilters[key] = value;
+      }
+    }
+    return initialFilters;
+  });
   const [modal, setModal] = useState({
     isOpen: false,
-    message: "",
-    type: "",
+    message: '',
+    type: '',
     challengeId: null,
   });
   useEffect(() => {
-    const fetchChallengesAndStyleCalendar = async () => {
+    const fetchChallenges = async () => {
       setLoading(true);
-      const dateParam = searchParams.get("date");
+      const dateParam = searchParams.get('date');
 
       try {
-        if (dateParam) {
-          const data = await searchTaskByDate(dateParam);
-          setChallenges(data);
-          setTotalPages(1);
-          setCurrentPage(1);
-
-          if (calendarRef.current) {
-            calendarRef.current.value = dateParam;
-
-            calendarRef.current.style.setProperty(
-              "--cally-selected-background",
-              "white"
-            );
-            calendarRef.current.style.setProperty(
-              "--cally-selected-color",
-              "#1f2937"
-            );
-
-            calendarRef.current.style.setProperty(
-              "--cally-today-background",
-              "transparent"
-            );
-            calendarRef.current.style.setProperty(
-              "--cally-today-color",
-              "inherit"
-            );
-          }
-        } else {
-          console.log(currentPage);
-          const data = await getAllTasks(currentPage, PAGE_SIZE);
-          setChallenges(data.challenges);
-          setTotalPages(data.totalPages);
-          console.log(totalPages);
-
-          if (calendarRef.current) {
-            calendarRef.current.style.removeProperty(
-              "--cally-selected-background"
-            );
-            calendarRef.current.style.removeProperty("--cally-selected-color");
-            calendarRef.current.style.removeProperty(
-              "--cally-today-background"
-            );
-            calendarRef.current.style.removeProperty("--cally-today-color");
-          }
-        }
+        const data = await getChallenges(currentPage, PAGE_SIZE, filters);
+        setChallenges(data.challenges);
+        setTotalPages(data.totalPages);
       } catch (err) {
-        console.error("Failed to fetch challenges:", err);
+        console.error('Failed to fetch challenges:', err);
         setChallenges([]);
       } finally {
@@ -86,5 +61,5 @@
     };
 
-    fetchChallengesAndStyleCalendar();
+    fetchChallenges();
   }, [currentPage, searchParams]);
   const fetchTestCases = async (challengeId) => {
@@ -100,17 +75,35 @@
     }
   };
+  const applyFilters = () => {
+    const newSearchParams = new URLSearchParams();
+    for (const [key, value] of Object.entries(filters)) {
+      if (value && value.toString() !== defaultFilters[key]?.toString()) {
+        newSearchParams.set(key, value);
+      }
+    }
+    newSearchParams.set('page', '1');
+    setCurrentPage(1);
+    setSearchParams(newSearchParams);
+  };
+  const handleRemoveFilter = (filterKey) => {
+    const newFilters = { ...filters, [filterKey]: defaultFilters[filterKey] };
+    setFilters(newFilters);
+
+    const newSearchParams = new URLSearchParams(searchParams);
+    newSearchParams.delete(filterKey);
+    newSearchParams.set('page', '1');
+    setCurrentPage(1);
+    setSearchParams(newSearchParams);
+  };
+
+  const clearFilters = () => {
+    const freshDefaultFilters = { ...defaultFilters };
+    setFilters(freshDefaultFilters);
+    setSearchParams({ page: '1' });
+    setCurrentPage(1);
+  };
+
   const handleViewAll = async () => {
-    setLoading(true);
-    setSearchParams({});
-    try {
-      const data = await getAllTasks(1, PAGE_SIZE);
-      setChallenges(data.challenges);
-      setTotalPages(data.totalPages);
-      setCurrentPage(1);
-    } catch (err) {
-      console.error("Failed to fetch all challenges:", err);
-    } finally {
-      setLoading(false);
-    }
+    clearFilters();
   };
 
@@ -123,7 +116,7 @@
         challenges.filter((challenge) => challenge.id !== challengeId)
       );
-      showModal("Challenge deleted successfully.", "success");
+      showModal('Challenge deleted successfully.', 'success');
     } catch (err) {
-      showModal(`Failed to delete challenge: ${err.message}`, "error");
+      showModal(`Failed to delete challenge: ${err.message}`, 'error');
     } finally {
       setLoading(false);
@@ -131,10 +124,10 @@
   };
 
-  const showModal = (message, type = "info", challengeId = null) => {
+  const showModal = (message, type = 'info', challengeId = null) => {
     setModal({ isOpen: true, message, type, challengeId });
   };
 
   const closeModal = () => {
-    setModal({ isOpen: false, message: "", type: "", challengeId: null });
+    setModal({ isOpen: false, message: '', type: '', challengeId: null });
   };
 
@@ -147,148 +140,385 @@
   };
 
-  const searchByDate = (date) => {
-    if (date) {
-      setSearchParams({ date });
-    }
-  };
-
   return (
-    <div className="p-6">
-      <h1 className="text-3xl font-bold ml-8 mb-12">Manage Challenges</h1>
-      <div className="flex flex-col md:flex-row gap-8 ml-8 mx-auto">
-        {/* Left sidebar with calendar */}
-        <div className="w-full md:w-[310px] flex-shrink-0 ">
-          <div className="sticky top-6">
-            <div className="card bg-base-200 shadow-md p-4">
-              <h2 className="font-semibold text-lg mb-4">Search by date:</h2>
-
-              {/* Calendar component */}
-              <calendar-date
-                ref={calendarRef}
-                class="cally bg-base-100 border border-base-300 shadow-md rounded-box w-full mb-4"
+    <div>
+      <div className="sticky top-0 z-20 bg-base-100 ">
+        <div className="flex flex-col">
+          {/* Add New Challenge Button */}
+          <div className="w-full flex justify-end pt-3 pr-3 ">
+            <button
+              className="btn btn-outline btn-sm border-amber-400 gap-2"
+              onClick={() => navigate('/dashboard/create-new-challenge')}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
               >
-                <svg
-                  aria-label="Previous"
-                  className="fill-current size-4"
-                  slot="previous"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
+                <path d="M12 5v14M5 12h14" />
+              </svg>
+              Add New Challenge
+            </button>
+          </div>
+          <div className="border-b border-base-300 shadow-sm">
+            <div className="p-3 sm:p-4 md:pl-12 w-full max-w-full mx-auto">
+              {/* Mobile Filter Toggle */}
+              <div className="flex items-center justify-between mb-3 lg:hidden">
+                <h3 className="text-base sm:text-lg font-semibold flex items-center gap-2">
+                  Filters
+                  {/* Active filter count indicator */}
+                  {(filters.topic !== 'all' ||
+                    filters.dateSort !== 'newest' ||
+                    filters.selectedDate ||
+                    (filters.searchText && filters.searchText.trim())) && (
+                    <span className="badge badge-sm bg-yellow-500 text-black border-none">
+                      {
+                        [
+                          filters.topic !== 'all',
+                          filters.dateSort !== 'newest',
+                          filters.selectedDate,
+                          filters.searchText && filters.searchText.trim(),
+                        ].filter(Boolean).length
+                      }
+                    </span>
+                  )}
+                </h3>
+                <button
+                  onClick={() => setShowFilters(!showFilters)}
+                  className="btn btn-sm btn-ghost px-2"
                 >
-                  <path
-                    fill="currentColor"
-                    d="M15.75 19.5 8.25 12l7.5-7.5"
-                  ></path>
-                </svg>
-                <svg
-                  aria-label="Next"
-                  className="fill-current size-4"
-                  slot="next"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    fill="currentColor"
-                    d="m8.25 4.5 7.5 7.5-7.5 7.5"
-                  ></path>
-                </svg>
-                <calendar-month></calendar-month>
-              </calendar-date>
-
-              {/* Search button */}
-              <button
-                className="btn btn-block border-amber-400"
-                onClick={() => {
-                  if (calendarRef.current) {
-                    const selectedDate = calendarRef.current.value;
-                    searchByDate(selectedDate);
-                  }
-
-                  const calendarElement =
-                    document.querySelector("calendar-date");
-                  if (calendarElement) {
-                    const selectedDate = calendarElement.value;
-                    searchByDate(selectedDate);
-                  }
-                }}
+                  <svg
+                    className={`w-5 h-5 transition-transform duration-200 ${
+                      showFilters ? 'rotate-180' : ''
+                    }`}
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M19 9l-7 7-7-7"
+                    />
+                  </svg>
+                </button>
+              </div>
+
+              {/* Filter Controls */}
+              <div
+                className={`transition-all duration-300 ${
+                  showFilters ? 'block opacity-100' : 'hidden opacity-0'
+                } lg:block lg:opacity-100`}
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5 mr-2"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                  />
-                </svg>
-                Search
-              </button>
-            </div>
-            <div className="mt-6 w-full">
-              {/* Add new challenge button */}
-              <button
-                className="btn btn-block btn-outline  border-amber-400 gap-2"
-                onClick={() => navigate("/dashboard/create-new-challenge")}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="w-5 h-5"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                >
-                  <path d="M12 5v14M5 12h14" />
-                </svg>
-                Add New Challenge
-              </button>
+                {/* Filter Layout */}
+                <div className="space-y-2 lg:space-y-0 lg:grid lg:grid-cols-6 xl:grid-cols-8 lg:gap-2 mb-2 max-w-full">
+                  {/* Search Filter - Wider */}
+                  <div className="flex flex-col gap-1 lg:col-span-2">
+                    <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                      Search Challenges
+                    </label>
+                    <div className="relative">
+                      <input
+                        type="text"
+                        placeholder="Search titles and content..."
+                        value={filters.searchText}
+                        onChange={(e) =>
+                          setFilters({
+                            ...filters,
+                            searchText: e.target.value,
+                          })
+                        }
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter') {
+                            applyFilters();
+                          }
+                        }}
+                        className="input input-sm input-bordered w-full text-xs pl-8 pr-2 h-8"
+                      />
+                      <svg
+                        className="z-10 w-3.5 h-3.5 absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+
+                  {/* Date Sort - Wider */}
+                  <div className="flex flex-col gap-1 lg:col-span-2 xl:col-span-2">
+                    <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                      Date Order
+                    </label>
+                    <select
+                      value={filters.dateSort}
+                      onChange={(e) =>
+                        setFilters({
+                          ...filters,
+                          dateSort: e.target.value,
+                        })
+                      }
+                      className="select select-sm select-bordered w-full text-xs h-8 min-h-8"
+                    >
+                      <option value="newest">Most Recent</option>
+                      <option value="oldest">Oldest First</option>
+                    </select>
+                  </div>
+
+                  {/* Specific Date Filter - Wider */}
+                  <div className="relative flex flex-col gap-1 lg:col-span-2 xl:col-span-2">
+                    <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                      Specific Date
+                    </label>
+
+                    <div className="relative">
+                      <input
+                        type="text"
+                        readOnly
+                        onClick={() => setIsCalendarOpen(!isCalendarOpen)}
+                        value={
+                          filters.selectedDate
+                            ? new Date(filters.selectedDate).toLocaleDateString(
+                                'en-US',
+                                {
+                                  year: 'numeric',
+                                  month: 'short',
+                                  day: 'numeric',
+                                }
+                              )
+                            : ''
+                        }
+                        placeholder="Select date"
+                        className="input input-sm input-bordered w-full text-xs pl-8 pr-2 cursor-pointer h-8"
+                      />
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="z-10 w-3.5 h-3.5 absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 002 2z"
+                        />
+                      </svg>
+                    </div>
+                    <CalendarPopover
+                      isOpen={isCalendarOpen}
+                      onClose={() => setIsCalendarOpen(false)}
+                      selectedDate={filters.selectedDate}
+                      onDateSelect={(date) => {
+                        setFilters({ ...filters, selectedDate: date });
+                      }}
+                      isFromManageChallenges={true}
+                    />
+                  </div>
+
+                  {/* Action Buttons */}
+                  <div className="flex flex-col gap-1 lg:col-span-1">
+                    <label className="text-xs font-medium text-gray-500 uppercase tracking-wide opacity-0">
+                      Actions
+                    </label>
+                    <div className="flex gap-1.5">
+                      {(filters.topic !== 'all' ||
+                        filters.dateSort !== 'newest' ||
+                        filters.selectedDate ||
+                        (filters.searchText && filters.searchText.trim())) && (
+                        <button
+                          onClick={clearFilters}
+                          className="cursor-pointer px-2 py-1.5 bg-gray-500 text-white rounded-md hover:bg-gray-600 text-xs font-medium transition-colors duration-200 flex-1 lg:flex-none h-8"
+                        >
+                          <span className="lg:hidden">Clear</span>
+                          <span className="hidden lg:inline">
+                            Clear Filters
+                          </span>
+                        </button>
+                      )}
+                      <button
+                        onClick={applyFilters}
+                        className="cursor-pointer px-2 py-1.5 bg-yellow-500 text-black rounded-md hover:bg-yellow-600 text-xs font-medium transition-colors duration-200 flex-1 lg:flex-none h-8"
+                      >
+                        <span className="lg:hidden">Apply</span>
+                        <span className="hidden lg:inline">Apply Filters</span>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Active Filters Display */}
+                <div className="flex flex-wrap gap-1.5 sm:gap-2">
+                  {filters.searchText && filters.searchText.trim() && (
+                    <span className="badge badge-outline badge-sm flex items-center gap-1 px-2 py-1 max-w-[200px]">
+                      <span className="font-medium text-xs truncate">
+                        "{filters.searchText.trim()}"
+                      </span>
+                      <button
+                        type="button"
+                        className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none"
+                        onClick={() => handleRemoveFilter('searchText')}
+                        aria-label="Remove search filter"
+                      >
+                        ×
+                      </button>
+                    </span>
+                  )}
+                  {filters.dateSort !== 'newest' && (
+                    <span className="badge badge-outline badge-sm flex items-center gap-1 px-2 py-1">
+                      <span className="font-medium text-xs">
+                        {filters.dateSort === 'oldest'
+                          ? 'Oldest First'
+                          : 'Most Recent'}
+                      </span>
+                      <button
+                        type="button"
+                        className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none"
+                        onClick={() => handleRemoveFilter('dateSort')}
+                        aria-label="Remove sort filter"
+                      >
+                        ×
+                      </button>
+                    </span>
+                  )}
+                  {filters.selectedDate && (
+                    <span className="badge badge-outline badge-sm flex items-center gap-1 px-2 py-1">
+                      <span className="font-medium text-xs">
+                        {new Date(filters.selectedDate).toLocaleDateString(
+                          'en-US',
+                          {
+                            year: 'numeric',
+                            month: 'short',
+                            day: 'numeric',
+                          }
+                        )}
+                      </span>
+                      <button
+                        type="button"
+                        className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none"
+                        onClick={() => handleRemoveFilter('selectedDate')}
+                        aria-label="Remove date filter"
+                      >
+                        ×
+                      </button>
+                    </span>
+                  )}
+                </div>
+              </div>
             </div>
           </div>
         </div>
-
-        {/* Main content area */}
-        <div className="flex-1">
-          {loading ? (
-            <div className="flex justify-center items-center h-64">
-              <span className="loading loading-spinner loading-lg"></span>
-            </div>
-          ) : challenges.length > 0 ? (
-            <div className="space-y-6">
-              {challenges.map((challenge) => (
-                <div key={challenge.id} className="card bg-base-200 shadow-md">
-                  <div className="card-body">
-                    <div className="flex justify-between items-center">
-                      <h2 className="card-title text-xl font-bold">
-                        {challenge.title
-                          .split("-")
-                          .map(
-                            (word) =>
-                              word.charAt(0).toUpperCase() + word.slice(1)
-                          )
-                          .join(" ")}
-                      </h2>
-                      <div className="badge badge-tertiary p-4">
-                        {new Date(challenge.solving_date).toLocaleDateString()}
+      </div>
+
+      {/* Main content area */}
+      <div className="p-3 sm:p-4 md:p-6 md:pl-12 w-full">
+        {loading ? (
+          <div className="flex justify-center items-center h-64">
+            <span className="loading loading-spinner loading-lg"></span>
+          </div>
+        ) : challenges.length > 0 ? (
+          <div className="space-y-6">
+            {challenges.map((challenge) => (
+              <div key={challenge.id} className="card bg-base-200 shadow-md">
+                <div className="card-body">
+                  <div className="flex justify-between items-center">
+                    <h2 className="card-title text-xl font-bold">
+                      {challenge.title
+                        .split('-')
+                        .map(
+                          (word) => word.charAt(0).toUpperCase() + word.slice(1)
+                        )
+                        .join(' ')}
+                    </h2>
+                    <div className="badge badge-tertiary p-4">
+                      {new Date(challenge.solving_date).toLocaleDateString()}
+                    </div>
+                  </div>
+
+                  <p className="text-base-content/80 mt-2 line-clamp-2">
+                    {challenge.content}
+                  </p>
+
+                  {challenge.examples && challenge.examples.length > 0 && (
+                    <div className="mt-4 card bg-base-300 p-3">
+                      <h3 className="font-medium mb-2">Examples:</h3>
+                      <div className="space-y-3">
+                        {challenge.examples.map((example, index) => (
+                          <div key={index} className="font-mono text-sm">
+                            <p className="pl-2 border-l-2 border-amber-400 mt-1">
+                              Input: "{example.input || 'N/A'}" <br />
+                              Output: "{example.output || 'N/A'}"
+                            </p>
+                          </div>
+                        ))}
                       </div>
                     </div>
-
-                    <p className="text-base-content/80 mt-2 line-clamp-2">
-                      {challenge.content}
-                    </p>
-
-                    {challenge.examples && challenge.examples.length > 0 && (
-                      <div className="mt-4 card bg-base-300 p-3">
-                        <h3 className="font-medium mb-2">Examples:</h3>
-                        <div className="space-y-3">
-                          {challenge.examples.map((example, index) => (
-                            <div key={index} className="font-mono text-sm">
-                              <p className="pl-2 border-l-2 border-amber-400 mt-1">
-                                Input: "{example.input || "N/A"}" <br />
-                                Output: "{example.output || "N/A"}"
-                              </p>
+                  )}
+
+                  <div className="card-actions justify-between mt-4">
+                    <button
+                      className="btn btn-sm btn-teritary"
+                      onClick={() => fetchTestCases(challenge.id)}
+                    >
+                      {expandedChallenge === challenge.id
+                        ? 'Hide Test Cases'
+                        : 'Show Test Cases'}
+                    </button>
+
+                    <button
+                      className="btn btn-sm btn-error btn-outline"
+                      onClick={() =>
+                        showModal(
+                          `Are you sure you want to delete challenge with title "${challenge.title}" ? This action cannot be undone.`,
+                          'confirm',
+                          challenge.id
+                        )
+                      }
+                    >
+                      Delete
+                    </button>
+                  </div>
+
+                  {expandedChallenge === challenge.id &&
+                    challenge.test_cases && (
+                      <div className="mt-4 card bg-base-300 p-4 ">
+                        <h3 className="font-medium mb-2">Test Cases:</h3>
+                        <div className="space-y-4 max-h-60 overflow-y-auto">
+                          {challenge.test_cases.map((testCase, index) => (
+                            <div
+                              key={testCase.id}
+                              className="card bg-base-100 max-w-250 p-3"
+                            >
+                              <h4 className="font-medium">
+                                Test Case {index + 1}
+                              </h4>
+                              <div className="font-mono text-sm">
+                                <div className="pl-2 border-l-2 border-amber-400 mt-1">
+                                  <p>Input:</p>
+                                  <div className="max-h-40 overflow-y-auto">
+                                    <pre className="bg-base-300 p-2 rounded whitespace-pre-wrap break-words w-full overflow-hidden">
+                                      {testCase.input || 'N/A'}
+                                    </pre>
+                                  </div>
+                                </div>
+                                <div className="pl-2 border-l-2 border-green-400 mt-2">
+                                  <p>Expected Output:</p>
+                                  <div className="max-h-40 overflow-y-auto">
+                                    <pre className="bg-base-300 p-2 rounded whitespace-pre-wrap break-words w-full overflow-hidden">
+                                      {testCase.output || 'N/A'}
+                                    </pre>
+                                  </div>
+                                </div>
+                              </div>
                             </div>
                           ))}
@@ -296,151 +526,85 @@
                       </div>
                     )}
-
-                    <div className="card-actions justify-between mt-4">
-                      <button
-                        className="btn btn-sm btn-teritary"
-                        onClick={() => fetchTestCases(challenge.id)}
-                      >
-                        {expandedChallenge === challenge.id
-                          ? "Hide Test Cases"
-                          : "Show Test Cases"}
-                      </button>
-
-                      <button
-                        className="btn btn-sm btn-error btn-outline"
-                        onClick={() =>
-                          showModal(
-                            `Are you sure you want to delete challenge with title "${challenge.title}" ? This action cannot be undone.`,
-                            "confirm",
-                            challenge.id
-                          )
-                        }
-                      >
-                        Delete
-                      </button>
-                    </div>
-
-                    {expandedChallenge === challenge.id &&
-                      challenge.test_cases && (
-                        <div className="mt-4 card bg-base-300 p-4 ">
-                          <h3 className="font-medium mb-2">Test Cases:</h3>
-                          <div className="space-y-4 max-h-60 overflow-y-auto">
-                            {challenge.test_cases.map((testCase, index) => (
-                              <div
-                                key={testCase.id}
-                                className="card bg-base-100 max-w-250 p-3"
-                              >
-                                <h4 className="font-medium">
-                                  Test Case {index + 1}
-                                </h4>
-                                <div className="font-mono text-sm">
-                                  <div className="pl-2 border-l-2 border-amber-400 mt-1">
-                                    <p>Input:</p>
-                                    <div className="max-h-40 overflow-y-auto">
-                                      <pre className="bg-base-300 p-2 rounded whitespace-pre-wrap break-words w-full overflow-hidden">
-                                        {testCase.input || "N/A"}
-                                      </pre>
-                                    </div>
-                                  </div>
-                                  <div className="pl-2 border-l-2 border-green-400 mt-2">
-                                    <p>Expected Output:</p>
-                                    <div className="max-h-40 overflow-y-auto">
-                                      <pre className="bg-base-300 p-2 rounded whitespace-pre-wrap break-words w-full overflow-hidden">
-                                        {testCase.output || "N/A"}
-                                      </pre>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            ))}
-                          </div>
-                        </div>
-                      )}
-                  </div>
                 </div>
-              ))}
-              {searchParams.get("date") && (
-                <button
-                  className="block mx-auto  cursor-pointer hover:underline"
-                  onClick={() => handleViewAll()}
-                >
-                  View all challenges
-                </button>
-              )}
-            </div>
-          ) : (
-            <div className="text-center text-base-content/60 py-16">
-              <p>No available challenges for the selected date.</p>
-            </div>
-          )}
-          {!loading && totalPages > 1 && (
-            <div className="flex justify-center items-center gap-2 mt-8">
-              {/* Previous Arrow */}
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center text-base-content/60 py-16">
+            <p>No available challenges for the selected filters.</p>
+            <button
+              onClick={clearFilters}
+              className="mt-4 cursor-pointer px-4 py-2 bg-yellow-500 text-black rounded-lg hover:bg-yellow-600 text-sm font-medium transition-colors duration-200"
+            >
+              Clear Filters
+            </button>
+          </div>
+        )}
+        {!loading && totalPages > 1 && (
+          <div className="flex justify-center items-center gap-2 mt-8">
+            {/* Previous Arrow */}
+            <button
+              className="btn btn-sm btn-ghost"
+              onClick={() => setCurrentPage(currentPage - 1)}
+              disabled={loading || currentPage === 1}
+              title="Previous Page"
+            >
+              ←
+            </button>
+
+            {/* First 3 page numbers */}
+            {Array.from({ length: Math.min(3, totalPages) }, (_, idx) => (
               <button
-                className="btn btn-sm btn-ghost"
-                onClick={() => setCurrentPage(currentPage - 1)}
-                disabled={loading || currentPage === 1}
-                title="Previous Page"
+                key={idx}
+                className={`btn btn-sm ${
+                  currentPage === idx + 1 ? 'border-amber-400' : 'btn-ghost'
+                }`}
+                onClick={() => setCurrentPage(idx + 1)}
+                disabled={loading}
               >
-                ←
+                {idx + 1}
               </button>
-
-              {/* First 3 page numbers */}
-              {Array.from({ length: Math.min(3, totalPages) }, (_, idx) => (
-                <button
-                  key={idx}
-                  className={`btn btn-sm ${
-                    currentPage === idx + 1 ? "border-amber-400" : "btn-ghost"
-                  }`}
-                  onClick={() => setCurrentPage(idx + 1)}
-                  disabled={loading}
-                >
-                  {idx + 1}
-                </button>
-              ))}
-
-              {/* Dots if more than 4 pages */}
-              {totalPages > 4 && (
-                <span className="px-2 text-gray-500">...</span>
-              )}
-
-              {/* Show current page if it's not in the first 3 or last */}
-              {currentPage > 2 && currentPage < totalPages - 1 && (
-                <button
-                  className="btn btn-sm border-amber-400"
-                  onClick={() => setCurrentPage(currentPage)}
-                  disabled={loading}
-                >
-                  {currentPage + 1}
-                </button>
-              )}
-
-              {/* Last page button if more than 3 pages */}
-              {totalPages > 3 && (
-                <button
-                  className={`btn btn-sm ${
-                    currentPage === totalPages - 1
-                      ? "border-amber-400"
-                      : "btn-ghost"
-                  }`}
-                  onClick={() => setCurrentPage(totalPages - 1)}
-                  disabled={loading}
-                >
-                  {totalPages}
-                </button>
-              )}
-
-              {/* Next Arrow */}
+            ))}
+
+            {/* Dots if more than 4 pages */}
+            {totalPages > 4 && <span className="px-2 text-gray-500">...</span>}
+
+            {/* Show current page if it's not in the first 3 or last */}
+            {currentPage > 2 && currentPage < totalPages - 1 && (
               <button
-                className="btn btn-sm btn-ghost"
-                onClick={() => setCurrentPage(currentPage + 1)}
-                disabled={loading || currentPage >= totalPages}
-                title="Next Page"
+                className="btn btn-sm border-amber-400"
+                onClick={() => setCurrentPage(currentPage)}
+                disabled={loading}
               >
-                →
+                {currentPage + 1}
               </button>
-            </div>
-          )}
-        </div>
+            )}
+
+            {/* Last page button if more than 3 pages */}
+            {totalPages > 3 && (
+              <button
+                className={`btn btn-sm ${
+                  currentPage === totalPages - 1
+                    ? 'border-amber-400'
+                    : 'btn-ghost'
+                }`}
+                onClick={() => setCurrentPage(totalPages - 1)}
+                disabled={loading}
+              >
+                {totalPages}
+              </button>
+            )}
+
+            {/* Next Arrow */}
+            <button
+              className="btn btn-sm btn-ghost"
+              onClick={() => setCurrentPage(currentPage + 1)}
+              disabled={loading || currentPage >= totalPages}
+              title="Next Page"
+            >
+              →
+            </button>
+          </div>
+        )}
       </div>
 
@@ -455,5 +619,5 @@
           <div className="bg-base-200 rounded-lg shadow-xl p-6 w-full max-w-md mx-4">
             <div className="flex items-center gap-3 mb-4">
-              {modal.type === "confirm" && (
+              {modal.type === 'confirm' && (
                 <div className="w-8 h-8 rounded-full bg-error flex items-center justify-center shrink-0">
                   <svg
@@ -472,5 +636,5 @@
                 </div>
               )}
-              {modal.type === "success" && (
+              {modal.type === 'success' && (
                 <div className="w-8 h-8 rounded-full bg-success flex items-center justify-center shrink-0">
                   <svg
@@ -495,5 +659,5 @@
             <p className="py-4">{modal.message}</p>
             <div className="flex justify-end gap-3 mt-4">
-              {modal.type === "confirm" ? (
+              {modal.type === 'confirm' ? (
                 <>
                   <button
@@ -515,5 +679,5 @@
                       </>
                     ) : (
-                      "Delete"
+                      'Delete'
                     )}
                   </button>
Index: client/src/Dashboard/components/ManagePosts.jsx
===================================================================
--- client/src/Dashboard/components/ManagePosts.jsx	(revision 420d7b9b1837b208cbebd6615b98ec8012e3d42e)
+++ client/src/Dashboard/components/ManagePosts.jsx	(revision 909821d87b77e470a89d64f5600d2259fb44dc15)
@@ -1,15 +1,15 @@
-import React, { useState, useEffect, useCallback, useRef } from "react";
-import { useSearchParams } from "react-router-dom";
-import doneAll from "../../assets/images/done-all.svg";
-import trashIcon from "../../assets/images/delete.svg";
-import { useAuth } from "@/contexts/AuthContext";
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import doneAll from '../../assets/images/done-all.svg';
+import trashIcon from '../../assets/images/delete.svg';
+import { useAuth } from '@/contexts/AuthContext';
 import {
   getReviewPosts,
   deleteReviewPost,
   approveReviewPost,
-} from "@/services/reviewService";
-import CalendarPopover from "./CalendarPopover";
-import "react-datepicker/dist/react-datepicker.css";
-import "cally";
+} from '@/services/reviewService';
+import CalendarPopover from './CalendarPopover';
+import 'react-datepicker/dist/react-datepicker.css';
+import 'cally';
 const ManagePosts = () => {
   const [posts, setPosts] = useState([]);
@@ -25,6 +25,6 @@
   const [modal, setModal] = useState({
     isOpen: false,
-    message: "",
-    type: "",
+    message: '',
+    type: '',
     postId: null,
     post: null,
@@ -34,8 +34,8 @@
   // Filter states
   const defaultFilters = {
-    topic: "all",
-    dateSort: "newest",
+    topic: 'all',
+    dateSort: 'newest',
     selectedDate: null,
-    searchText: "",
+    searchText: '',
   };
 
@@ -60,5 +60,5 @@
       }
     }
-    newSearchParams.set("page", "1");
+    newSearchParams.set('page', '1');
     setPage(1);
     setSearchParams(newSearchParams);
@@ -68,14 +68,16 @@
     setFilters(newFilters);
 
-    const newSearchParams = new URLSearchParams(searchParams);
-    newSearchParams.delete(filterKey);
-    newSearchParams.set("page", "1");
-    setPage(1);
-    setSearchParams(newSearchParams);
+    if (searchParams.has(filterKey)) {
+      const newSearchParams = new URLSearchParams(searchParams);
+      newSearchParams.delete(filterKey);
+      setPage(1);
+      newSearchParams.set('page', '1');
+      setSearchParams(newSearchParams);
+    }
   };
   const clearFilters = () => {
     const freshDefaultFilters = { ...defaultFilters };
     setFilters(freshDefaultFilters);
-    setSearchParams({ page: "1" });
+    setSearchParams({ page: '1' });
     setPage(1);
   };
@@ -92,11 +94,11 @@
 
   const openViewPostModal = (post) => {
-    showModal("", "view-post", post.id, post);
+    showModal('', 'view-post', post.id, post);
   };
   const closeModal = () => {
     setModal({
       isOpen: false,
-      message: "",
-      type: "",
+      message: '',
+      type: '',
       postId: null,
       post: null,
@@ -106,7 +108,7 @@
   const confirmAction = async () => {
     setIsActionLoading(true);
-    if (modal.type === "delete" && modal.postId) {
+    if (modal.type === 'delete' && modal.postId) {
       await handleDeletePost(modal.postId);
-    } else if (modal.type === "approve" && modal.post) {
+    } else if (modal.type === 'approve' && modal.post) {
       await handleApprovePost(modal.post);
     }
@@ -122,12 +124,12 @@
 
       const filtersForApi = {
-        searchText: searchParams.get("searchText") || "",
-        topic: searchParams.get("topic") || "all",
-        selectedDate: searchParams.get("selectedDate") || null,
-        dateSort: searchParams.get("dateSort") || "newest",
+        searchText: searchParams.get('searchText') || '',
+        topic: searchParams.get('topic') || 'all',
+        selectedDate: searchParams.get('selectedDate') || null,
+        dateSort: searchParams.get('dateSort') || 'newest',
       };
 
       try {
-        const currentPage = parseInt(searchParams.get("page") || "1", 10);
+        const currentPage = parseInt(searchParams.get('page') || '1', 10);
         setPage(currentPage);
 
@@ -142,10 +144,10 @@
         setTotalPages(data.totalPages);
       } catch (err) {
-        console.error("Error fetching review posts:", err);
+        console.error('Error fetching review posts:', err);
         setPosts([]);
         setTotalPages(0);
         setError(
           err.response?.data?.error ||
-            "Failed to fetch posts. You may not have permission."
+            'Failed to fetch posts. You may not have permission.'
         );
       } finally {
@@ -161,9 +163,9 @@
       await deleteReviewPost(postId, user.id);
       setPosts((prevPosts) => prevPosts.filter((p) => p.id !== postId));
-      showModal("Post deleted successfully.", "deleted");
+      showModal('Post deleted successfully.', 'deleted');
     } catch (err) {
-      console.error("Error deleting review post:", err);
+      console.error('Error deleting review post:', err);
       setError(
-        err.response?.data?.message || err.message || "Failed to delete post."
+        err.response?.data?.message || err.message || 'Failed to delete post.'
       );
     }
@@ -180,14 +182,16 @@
 
       await approveReviewPost(postToApprove.id, postDataForApproval, user.id);
-      setPosts((prevPosts) => prevPosts.filter((p) => p.id !== postId));
-      showModal("Post approved successfully.", "success");
+      setPosts((prevPosts) =>
+        prevPosts.filter((p) => p.id !== postToApprove.id)
+      );
+      showModal('Post approved successfully.', 'success');
     } catch (err) {
-      console.error("Error approving post:", err);
+      console.error('Error approving post:', err);
       setError(
-        err.response?.data?.message || err.message || "Failed to approve post."
+        err.response?.data?.message || err.message || 'Failed to approve post.'
       );
       showModal(
-        err.response?.data?.message || err.message || "Failed to approve post.",
-        "error"
+        err.response?.data?.message || err.message || 'Failed to approve post.',
+        'error'
       );
     }
@@ -195,15 +199,15 @@
 
   const openConfirmationModal = (type, item) => {
-    if (type === "delete") {
+    if (type === 'delete') {
       showModal(
         `Are you sure you want to delete post with title "${item.title}"? This action cannot be undone.`,
-        "delete",
+        'delete',
         item.id,
         item
       );
-    } else if (type === "approve") {
+    } else if (type === 'approve') {
       showModal(
         `Are you sure you want to approve post with title "${item.title}"? It will be published to the forum.`,
-        "approve",
+        'approve',
         item.id,
         item
@@ -233,16 +237,15 @@
                     Filters
                     {/* Active filter count indicator */}
-                    {(filters.topic !== "all" ||
-                      filters.dateSort !== "newest" ||
+                    {(filters.topic !== 'all' ||
+                      filters.dateSort !== 'newest' ||
                       filters.selectedDate ||
-                      filters.commentSort !== "none" ||
                       (filters.searchText && filters.searchText.trim())) && (
                       <span className="badge badge-sm bg-yellow-500 text-black border-none">
                         {
                           [
-                            filters.topic !== "all",
-                            filters.dateSort !== "newest",
+                            filters.topic !== 'all',
+                            filters.dateSort !== 'newest',
                             filters.selectedDate,
-                            filters.commentSort !== "none",
+                            filters.commentSort !== 'none',
                             filters.searchText && filters.searchText.trim(),
                           ].filter(Boolean).length
@@ -257,5 +260,5 @@
                     <svg
                       className={`w-5 h-5 transition-transform duration-200 ${
-                        showFilters ? "rotate-180" : ""
+                        showFilters ? 'rotate-180' : ''
                       }`}
                       fill="none"
@@ -276,11 +279,11 @@
                 <div
                   className={`transition-all duration-300 ${
-                    showFilters ? "block opacity-100" : "hidden opacity-0"
+                    showFilters ? 'block opacity-100' : 'hidden opacity-0'
                   } lg:block lg:opacity-100`}
                 >
-                  {/* Mobile-First Filter Layout */}
-                  <div className="space-y-3 lg:space-y-0 lg:grid lg:grid-cols-6 xl:grid-cols-8 lg:gap-3 mb-3 max-w-full">
+                  {/* Mobile-First Filter Layout - Compact Version */}
+                  <div className="space-y-2 lg:space-y-0 lg:grid lg:grid-cols-6 xl:grid-cols-8 lg:gap-2 mb-2 max-w-full">
                     {/* Search Filter - Full width on mobile, 2 cols on desktop */}
-                    <div className="flex flex-col gap-1.5 lg:col-span-2">
+                    <div className="flex flex-col gap-1 lg:col-span-2">
                       <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
                         Search Posts
@@ -298,12 +301,12 @@
                           }
                           onKeyDown={(e) => {
-                            if (e.key === "Enter") {
+                            if (e.key === 'Enter') {
                               applyFilters();
                             }
                           }}
-                          className="input input-sm input-bordered w-full text-sm pl-9 pr-3"
+                          className="input input-sm input-bordered w-full text-xs pl-8 pr-2 h-8"
                         />
                         <svg
-                          className="z-10 w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
+                          className="z-10 w-3.5 h-3.5 absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400"
                           fill="none"
                           stroke="currentColor"
@@ -321,7 +324,7 @@
 
                     {/* Mobile: 2-column grid for selects */}
-                    <div className="grid grid-cols-2 gap-3 lg:contents">
+                    <div className="grid grid-cols-2 gap-2 lg:contents">
                       {/* Topic Filter */}
-                      <div className="flex flex-col gap-1.5 lg:col-span-1">
+                      <div className="flex flex-col gap-1 lg:col-span-1">
                         <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
                           Topic
@@ -332,5 +335,5 @@
                             setFilters({ ...filters, topic: e.target.value })
                           }
-                          className="select select-sm select-bordered w-full text-sm"
+                          className="select select-sm select-bordered w-full text-xs h-8 min-h-8"
                         >
                           <option value="all">All Topics</option>
@@ -343,5 +346,5 @@
 
                       {/* Date Sort */}
-                      <div className="flex flex-col gap-1.5 lg:col-span-1">
+                      <div className="flex flex-col gap-1 lg:col-span-1">
                         <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
                           Date Order
@@ -355,5 +358,5 @@
                             })
                           }
-                          className="select select-sm select-bordered w-full text-sm"
+                          className="select select-sm select-bordered w-full text-xs h-8 min-h-8"
                         >
                           <option value="newest">Most Recent</option>
@@ -364,7 +367,7 @@
 
                     {/* Mobile: Single column for date picker and popularity */}
-                    <div className="space-y-3 lg:space-y-0 lg:contents">
+                    <div className="space-y-2 lg:space-y-0 lg:contents">
                       {/* Specific Date Filter */}
-                      <div className="relative flex flex-col gap-1.5 lg:col-span-1">
+                      <div className="relative flex flex-col gap-1 lg:col-span-1">
                         <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
                           Specific Date
@@ -380,19 +383,19 @@
                                 ? new Date(
                                     filters.selectedDate
-                                  ).toLocaleDateString("en-US", {
-                                    year: "numeric",
-                                    month: "short",
-                                    day: "numeric",
+                                  ).toLocaleDateString('en-US', {
+                                    year: 'numeric',
+                                    month: 'short',
+                                    day: 'numeric',
                                   })
-                                : "" // Use empty string so placeholder is visible
+                                : '' // Use empty string so placeholder is visible
                             }
                             placeholder="Select date"
                             // Style to match other inputs and add cursor-pointer
-                            className="input input-sm input-bordered w-full text-sm pl-9 pr-3 cursor-pointer"
+                            className="input input-sm input-bordered w-full text-xs pl-8 pr-2 cursor-pointer h-8"
                           />
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
                             // Position the icon inside the input field
-                            className="z-10 w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
+                            className="z-10 w-3.5 h-3.5 absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400"
                             fill="none"
                             viewBox="0 0 24 24"
@@ -403,5 +406,5 @@
                               strokeLinejoin="round"
                               strokeWidth={2}
-                              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 002 2z"
                             />
                           </svg>
@@ -415,4 +418,5 @@
                             setFilters({ ...filters, selectedDate: date });
                           }}
+                          isFromManageChallenges={false}
                         />
                       </div>
@@ -420,11 +424,11 @@
 
                     {/* Action Buttons */}
-                    <div className="flex flex-col gap-1.5 lg:col-span-1">
+                    <div className="flex flex-col gap-1 lg:col-span-1">
                       <label className="text-xs font-medium text-gray-500 uppercase tracking-wide opacity-0">
                         Actions
                       </label>
-                      <div className="flex gap-2">
-                        {(filters.topic !== "all" ||
-                          filters.dateSort !== "newest" ||
+                      <div className="flex gap-1.5">
+                        {(filters.topic !== 'all' ||
+                          filters.dateSort !== 'newest' ||
                           filters.selectedDate ||
                           (filters.searchText &&
@@ -432,5 +436,5 @@
                           <button
                             onClick={clearFilters}
-                            className="cursor-pointer px-2.5 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 text-xs font-medium transition-colors duration-200 flex-1 lg:flex-none"
+                            className="cursor-pointer px-2 py-1.5 bg-gray-500 text-white rounded-md hover:bg-gray-600 text-xs font-medium transition-colors duration-200 flex-1 lg:flex-none h-8"
                           >
                             <span className="lg:hidden">Clear Filters</span>
@@ -442,5 +446,5 @@
                         <button
                           onClick={applyFilters}
-                          className="cursor-pointer px-2.5 py-2 bg-yellow-500 text-black rounded-lg hover:bg-yellow-600 text-xs font-medium transition-colors duration-200 flex-1 lg:flex-none"
+                          className="cursor-pointer px-2 py-1.5 bg-yellow-500 text-black rounded-md hover:bg-yellow-600 text-xs font-medium transition-colors duration-200 flex-1 lg:flex-none h-8"
                         >
                           <span className="lg:hidden">Apply Filters</span>
@@ -455,16 +459,15 @@
                   {/* Active Filters Display - Improved Mobile Layout */}
                   <div className="flex flex-wrap gap-1.5 sm:gap-2">
-                    {filters.topic !== "all" && (
+                    {filters.topic !== 'all' && (
                       <span className="badge badge-outline badge-sm flex items-center gap-1 px-2 py-1">
-                        <span className="text-xs">Topic:</span>
                         <span className="font-medium text-xs">
-                          {filters.topic === "general"
-                            ? "General"
-                            : "Daily Challenge"}
+                          {filters.topic === 'general'
+                            ? 'General'
+                            : 'Daily Challenge'}
                         </span>
                         <button
                           type="button"
                           className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none"
-                          onClick={() => handleRemoveFilter("topic")}
+                          onClick={() => handleRemoveFilter('topic')}
                           aria-label="Remove topic filter"
                         >
@@ -475,5 +478,4 @@
                     {filters.searchText && filters.searchText.trim() && (
                       <span className="badge badge-outline badge-sm flex items-center gap-1 px-2 py-1 max-w-[200px]">
-                        <span className="text-xs">Search:</span>
                         <span className="font-medium text-xs truncate">
                           "{filters.searchText.trim()}"
@@ -482,5 +484,5 @@
                           type="button"
                           className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none"
-                          onClick={() => handleRemoveFilter("searchText")}
+                          onClick={() => handleRemoveFilter('searchText')}
                           aria-label="Remove search filter"
                         >
@@ -489,16 +491,15 @@
                       </span>
                     )}
-                    {filters.dateSort !== "newest" && (
+                    {filters.dateSort !== 'newest' && (
                       <span className="badge badge-outline badge-sm flex items-center gap-1 px-2 py-1">
-                        <span className="text-xs">Sort:</span>
                         <span className="font-medium text-xs">
-                          {filters.dateSort === "oldest"
-                            ? "Oldest First"
-                            : "Most Recent"}
+                          {filters.dateSort === 'oldest'
+                            ? 'Oldest First'
+                            : 'Most Recent'}
                         </span>
                         <button
                           type="button"
                           className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none"
-                          onClick={() => handleRemoveFilter("dateSort")}
+                          onClick={() => handleRemoveFilter('dateSort')}
                           aria-label="Remove sort filter"
                         >
@@ -509,12 +510,11 @@
                     {filters.selectedDate && (
                       <span className="badge badge-outline badge-sm flex items-center gap-1 px-2 py-1">
-                        <span className="text-xs">Date:</span>
                         <span className="font-medium text-xs">
                           {new Date(filters.selectedDate).toLocaleDateString(
-                            "en-US",
+                            'en-US',
                             {
-                              year: "numeric",
-                              month: "short",
-                              day: "numeric",
+                              year: 'numeric',
+                              month: 'short',
+                              day: 'numeric',
                             }
                           )}
@@ -523,5 +523,5 @@
                           type="button"
                           className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none"
-                          onClick={() => handleRemoveFilter("selectedDate")}
+                          onClick={() => handleRemoveFilter('selectedDate')}
                           aria-label="Remove date filter"
                         >
@@ -569,11 +569,11 @@
             <p className="text-xs sm:text-sm text-base-content/40 mt-2">
               {activeFilters.searchText ||
-              activeFilters.topic !== "all" ||
+              activeFilters.topic !== 'all' ||
               activeFilters.selectedDate
-                ? "Try adjusting your filters to see more posts."
-                : "No posts are currently awaiting review."}
+                ? 'Try adjusting your filters to see more posts.'
+                : 'No posts are currently awaiting review.'}
             </p>
             {(activeFilters.searchText ||
-              activeFilters.topic !== "all" ||
+              activeFilters.topic !== 'all' ||
               activeFilters.selectedDate) && (
               <button
@@ -588,5 +588,5 @@
 
         {!isLoading && (
-          <div className=" grid grid-cols-1 2xl:grid-cols-2 gap-3 sm:gap-4 lg:gap-6 p-3 sm:p-4 md:p-6 md:pl-12 w-full">
+          <div className=" grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-2 gap-3 sm:gap-4 lg:gap-6 p-3 sm:p-4 md:p-6 md:pl-12 w-full">
             {posts.map((post) => (
               <div
@@ -604,5 +604,5 @@
                     title="Approve Post"
                     className="btn btn-xs sm:btn-sm btn-success btn-circle"
-                    onClick={() => openConfirmationModal("approve", post)}
+                    onClick={() => openConfirmationModal('approve', post)}
                   >
                     <img
@@ -615,5 +615,5 @@
                     title="Delete Post"
                     className="btn btn-xs sm:btn-sm btn-error btn-circle"
-                    onClick={() => openConfirmationModal("delete", post)}
+                    onClick={() => openConfirmationModal('delete', post)}
                   >
                     <img
@@ -629,10 +629,10 @@
                   <span
                     className={`inline-block text-xs font-semibold px-1.5 py-0.5 rounded ${
-                      post.topic === "general"
-                        ? "bg-blue-100 text-blue-800"
-                        : "bg-green-100 text-green-800"
+                      post.topic === 'general'
+                        ? 'bg-blue-100 text-blue-800'
+                        : 'bg-green-100 text-green-800'
                     }`}
                   >
-                    {post.topic === "general" ? "General" : "Daily Challenge"}
+                    {post.topic === 'general' ? 'General' : 'Daily Challenge'}
                   </span>
                   {post.challengeTitle && (
@@ -647,8 +647,8 @@
                   <span className="mx-1">·</span>
                   <span className="italic">
-                    {new Date(post.created_at).toLocaleDateString("en-US", {
-                      year: "numeric",
-                      month: "short",
-                      day: "numeric",
+                    {new Date(post.created_at).toLocaleDateString('en-US', {
+                      year: 'numeric',
+                      month: 'short',
+                      day: 'numeric',
                     })}
                   </span>
@@ -656,5 +656,5 @@
                 <p className="text-sm sm:text-base text-base-content/90 whitespace-pre-line break-words">
                   {post.content && post.content.length > 60
-                    ? post.content.slice(0, 60) + "..."
+                    ? post.content.slice(0, 60) + '...'
                     : post.content}
                 </p>
@@ -670,5 +670,5 @@
               onClick={() => {
                 const newPage = page - 1;
-                searchParams.set("page", newPage.toString());
+                searchParams.set('page', newPage.toString());
                 setSearchParams(searchParams);
               }}
@@ -683,8 +683,8 @@
                 key={idx}
                 className={`btn btn-sm px-2 sm:px-3 ${
-                  page - 1 === idx ? "border-amber-400" : "btn-ghost"
+                  page - 1 === idx ? 'border-amber-400' : 'btn-ghost'
                 }`}
                 onClick={() => {
-                  searchParams.set("page", (idx + 1).toString());
+                  searchParams.set('page', (idx + 1).toString());
                   setSearchParams(searchParams);
                 }}
@@ -703,5 +703,5 @@
                 className="btn btn-sm border-amber-400 px-2 sm:px-3"
                 onClick={() => {
-                  searchParams.set("page", page.toString());
+                  searchParams.set('page', page.toString());
                   setSearchParams(searchParams);
                 }}
@@ -715,8 +715,8 @@
               <button
                 className={`btn btn-sm px-2 sm:px-3 ${
-                  page === totalPages ? "border-amber-400" : "btn-ghost"
+                  page === totalPages ? 'border-amber-400' : 'btn-ghost'
                 }`}
                 onClick={() => {
-                  searchParams.set("page", totalPages.toString());
+                  searchParams.set('page', totalPages.toString());
                   setSearchParams(searchParams);
                 }}
@@ -731,5 +731,5 @@
               onClick={() => {
                 const newPage = page + 1;
-                searchParams.set("page", newPage.toString());
+                searchParams.set('page', newPage.toString());
                 setSearchParams(searchParams);
               }}
@@ -753,5 +753,5 @@
           <div className="bg-base-200 rounded-lg shadow-xl p-4 sm:p-6  w-full max-w-xl sm:max-w-md mx-4">
             <div className="flex items-center gap-3 mb-4">
-              {(modal.type === "approve" || modal.type === "success") && (
+              {(modal.type === 'approve' || modal.type === 'success') && (
                 <div className="w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-success flex items-center justify-center shrink-0">
                   <svg
@@ -770,7 +770,7 @@
                 </div>
               )}
-              {(modal.type === "delete" ||
-                modal.type === "deleted" ||
-                modal.type === "error") && (
+              {(modal.type === 'delete' ||
+                modal.type === 'deleted' ||
+                modal.type === 'error') && (
                 <div className="w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-error flex items-center justify-center shrink-0">
                   <svg
@@ -790,12 +790,12 @@
               )}
               <h3 className="font-bold text-base sm:text-lg" id="modal-title">
-                {modal.type === "approve" && "Approve Post"}
-                {(modal.type === "deleted" || modal.type === "delete") &&
-                  "Delete Post"}
-                {(modal.type === "success" || modal.type === "error") &&
-                  "Approve Post"}
+                {modal.type === 'approve' && 'Approve Post'}
+                {(modal.type === 'deleted' || modal.type === 'delete') &&
+                  'Delete Post'}
+                {(modal.type === 'success' || modal.type === 'error') &&
+                  'Approve Post'}
               </h3>
             </div>
-            {modal.type === "view-post" && modal.post ? (
+            {modal.type === 'view-post' && modal.post ? (
               <div className="space-y-4 max-h-[70vh] overflow-y-auto pr-2">
                 <h3
@@ -810,9 +810,9 @@
                   <span className="italic">
                     {new Date(modal.post.created_at).toLocaleDateString(
-                      "en-US",
+                      'en-US',
                       {
-                        year: "numeric",
-                        month: "long",
-                        day: "numeric",
+                        year: 'numeric',
+                        month: 'long',
+                        day: 'numeric',
                       }
                     )}
@@ -829,5 +829,5 @@
             )}
             <div className="flex justify-end gap-2 sm:gap-3 mt-3 sm:mt-4">
-              {modal.type === "approve" || modal.type === "delete" ? (
+              {modal.type === 'approve' || modal.type === 'delete' ? (
                 <>
                   <button
@@ -840,5 +840,5 @@
                   <button
                     className={`btn btn-sm sm:btn-md ${
-                      modal.type === "approve" ? "btn-success" : "btn-error"
+                      modal.type === 'approve' ? 'btn-success' : 'btn-error'
                     }`}
                     onClick={confirmAction}
@@ -848,12 +848,12 @@
                       <>
                         <span className="loading loading-spinner loading-sm mr-2"></span>
-                        {modal.type === "approve"
-                          ? "Approving..."
-                          : "Deleting..."}
+                        {modal.type === 'approve'
+                          ? 'Approving...'
+                          : 'Deleting...'}
                       </>
-                    ) : modal.type === "approve" ? (
-                      "Approve"
+                    ) : modal.type === 'approve' ? (
+                      'Approve'
                     ) : (
-                      "Delete"
+                      'Delete'
                     )}
                   </button>
Index: client/src/Dashboard/components/Navbar.jsx
===================================================================
--- client/src/Dashboard/components/Navbar.jsx	(revision 420d7b9b1837b208cbebd6615b98ec8012e3d42e)
+++ client/src/Dashboard/components/Navbar.jsx	(revision 909821d87b77e470a89d64f5600d2259fb44dc15)
@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from "react";
-import { useNavigate, useLocation } from "react-router-dom";
-import logoIcon from "../../assets/images/logoIcon.png";
-import logoText from "../../assets/images/logoText.png";
-import pp from "../../assets/images/pp.svg";
-import RankBadgeNav from "@/utils/RankBadgeForNavbar";
-import { useAuth } from "@/contexts/AuthContext";
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import logoIcon from '../../assets/images/logoIcon.png';
+import logoText from '../../assets/images/logoText.png';
+import pp from '../../assets/images/pp.svg';
+import RankBadgeNav from '@/utils/RankBadgeForNavbar';
+import { useAuth } from '@/contexts/AuthContext';
 const useIsDesktop = () => {
   const [isDesktop, setIsDesktop] = useState(window.innerWidth >= 1024);
@@ -14,6 +14,6 @@
     };
 
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
   }, []);
 
@@ -27,20 +27,20 @@
   const isDesktop = useIsDesktop();
   const isActive = (path) => {
-    if (path === "/dashboard" && location.pathname === "/dashboard") {
+    if (path === '/dashboard' && location.pathname === '/dashboard') {
       return true;
     }
     if (
-      path === "/dashboard/forum" &&
-      (location.pathname === "/dashboard/forum" ||
-        location.pathname === "/dashboard/forum/create-post" ||
-        location.pathname === "/dashboard/create-post" ||
-        (location.pathname === "/dashboard/user-posts" && isDesktop) ||
-        location.pathname.startsWith("/dashboard/forum-detail/"))
+      path === '/dashboard/forum' &&
+      (location.pathname === '/dashboard/forum' ||
+        location.pathname === '/dashboard/forum/create-post' ||
+        location.pathname === '/dashboard/create-post' ||
+        (location.pathname === '/dashboard/user-posts' && isDesktop) ||
+        location.pathname.startsWith('/dashboard/forum-detail/'))
     ) {
       return true;
     }
     if (
-      path == "/dashboard/user-posts" &&
-      location.pathname === "/dashboard/user-posts"
+      path == '/dashboard/user-posts' &&
+      location.pathname === '/dashboard/user-posts'
     ) {
       return true;
@@ -48,12 +48,12 @@
 
     if (
-      path === "/dashboard/manage-posts" &&
-      location.pathname === "/dashboard/manage-posts"
+      path === '/dashboard/manage-posts' &&
+      location.pathname === '/dashboard/manage-posts'
     ) {
       return true;
     }
     if (
-      path === "/dashboard/leaderboard" &&
-      location.pathname === "/dashboard/leaderboard"
+      path === '/dashboard/leaderboard' &&
+      location.pathname === '/dashboard/leaderboard'
     ) {
       return true;
@@ -61,6 +61,6 @@
 
     if (
-      path === "/dashboard/profile" &&
-      location.pathname === "/dashboard/profile"
+      path === '/dashboard/profile' &&
+      location.pathname === '/dashboard/profile'
     ) {
       return true;
@@ -68,11 +68,11 @@
 
     if (
-      path === "/dashboard/manage-challenges" &&
-      (location.pathname === "/dashboard/manage-challenges" ||
-        location.pathname === "/dashboard/create-new-challenge")
+      path === '/dashboard/manage-challenges' &&
+      (location.pathname === '/dashboard/manage-challenges' ||
+        location.pathname === '/dashboard/create-new-challenge')
     ) {
       return true;
     }
-    if (path !== "/dashboard" && location.pathname.startsWith(path + "/")) {
+    if (path !== '/dashboard' && location.pathname.startsWith(path + '/')) {
       return true;
     }
@@ -83,29 +83,38 @@
     <>
       {/* Desktop Sidebar - hidden on tablet and below */}
-      <nav className="dashboard__navbar hidden lg:flex w-80 min-h-screen bg-base-200 text-base-content border-r border-base-content/10 flex-col flex-shrink-0">
-        <div className="p-4 border-b border-base-content/10">
+      {/* Desktop Sidebar - responsive width based on screen size */}
+      <nav className="dashboard__navbar hidden lg:flex min-h-screen bg-base-200 text-base-content border-r border-base-content/10 flex-col flex-shrink-0 w-64 xl:w-72 2xl:w-80">
+        <div className="p-3 xl:p-4 border-b border-base-content/10">
           <p
-            onClick={() => navigate("/")}
+            onClick={() => navigate('/')}
             className="flex items-center gap-2 cursor-pointer"
           >
-            <img src={logoIcon} alt="Logo" className="w-14 h-auto" />
-            <img src={logoText} alt="Logo Text" className="w-32 h-auto" />
+            <img
+              src={logoIcon}
+              alt="Logo"
+              className="w-10 xl:w-12 2xl:w-14 h-auto"
+            />
+            <img
+              src={logoText}
+              alt="Logo Text"
+              className="w-24 xl:w-28 2xl:w-32 h-auto"
+            />
           </p>
         </div>
 
-        <div className="flex-1 py-8">
-          <ul className="menu menu-lg gap-2">
+        <div className="flex-1 py-6 xl:py-8">
+          <ul className="menu menu-sm xl:menu-md gap-1 xl:gap-2">
             <li>
               <button
-                className={`flex items-center gap-4 px-4 py-3 rounded-lg transition-colors ${
-                  isActive("/dashboard")
-                    ? "bg-[#FFB800] text-black"
-                    : "hover:bg-[#FFB800] hover:text-black"
+                className={`flex items-center gap-3 xl:gap-4 px-3 xl:px-4 py-2 xl:py-3 rounded-lg transition-colors text-sm xl:text-base ${
+                  isActive('/dashboard')
+                    ? 'bg-[#FFB800] text-black'
+                    : 'hover:bg-[#FFB800] hover:text-black'
                 }`}
-                onClick={() => navigate("/dashboard")}
+                onClick={() => navigate('/dashboard')}
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  className="w-5 h-5"
+                  className="w-4 xl:w-5 h-4 xl:h-5"
                   viewBox="0 0 24 24"
                   fill="none"
@@ -115,19 +124,19 @@
                   <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                 </svg>
-                Challenge of the Day
+                <span className="truncate">Challenge of the Day</span>
               </button>
             </li>
             <li>
               <button
-                className={`flex items-center gap-4 px-4 py-3 rounded-lg transition-colors ${
-                  isActive("/dashboard/leaderboard")
-                    ? "bg-[#FFB800] text-black"
-                    : "hover:bg-[#FFB800] hover:text-black"
+                className={`flex items-center gap-3 xl:gap-4 px-3 xl:px-4 py-2 xl:py-3 rounded-lg transition-colors text-sm xl:text-base ${
+                  isActive('/dashboard/leaderboard')
+                    ? 'bg-[#FFB800] text-black'
+                    : 'hover:bg-[#FFB800] hover:text-black'
                 }`}
-                onClick={() => navigate("/dashboard/leaderboard")}
+                onClick={() => navigate('/dashboard/leaderboard')}
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  className="w-5 h-5"
+                  className="w-4 xl:w-5 h-4 xl:h-5"
                   viewBox="0 0 24 24"
                   fill="none"
@@ -137,19 +146,19 @@
                   <path d="M18 20V10M12 20V4M6 20v-6"></path>
                 </svg>
-                Leaderboard
+                <span className="truncate">Leaderboard</span>
               </button>
             </li>
             <li>
               <button
-                className={`flex items-center gap-4 px-4 py-3 rounded-lg transition-colors ${
-                  isActive("/dashboard/forum")
-                    ? "bg-[#FFB800] text-black"
-                    : "hover:bg-[#FFB800] hover:text-black"
+                className={`flex items-center gap-3 xl:gap-4 px-3 xl:px-4 py-2 xl:py-3 rounded-lg transition-colors text-sm xl:text-base ${
+                  isActive('/dashboard/forum')
+                    ? 'bg-[#FFB800] text-black'
+                    : 'hover:bg-[#FFB800] hover:text-black'
                 }`}
-                onClick={() => navigate("/dashboard/forum")}
+                onClick={() => navigate('/dashboard/forum')}
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  className="w-5 h-5"
+                  className="w-4 xl:w-5 h-4 xl:h-5"
                   viewBox="0 0 24 24"
                   fill="none"
@@ -162,5 +171,5 @@
                   <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                 </svg>
-                Forum
+                <span className="truncate">Forum</span>
               </button>
             </li>
@@ -168,17 +177,17 @@
             {user && user.isModerator && (
               <>
-                <hr />
-                <li>
-                  <button
-                    className={`flex items-center gap-4 px-4 py-3 rounded-lg transition-colors ${
-                      isActive("/dashboard/manage-posts")
-                        ? "bg-[#FFB800] text-black"
-                        : "hover:bg-[#FFB800] hover:text-black"
-                    }`}
-                    onClick={() => navigate("/dashboard/manage-posts")}
+                <hr className="my-2 xl:my-3" />
+                <li>
+                  <button
+                    className={`flex items-center gap-3 xl:gap-4 px-3 xl:px-4 py-2 xl:py-3 rounded-lg transition-colors text-sm xl:text-base ${
+                      isActive('/dashboard/manage-posts')
+                        ? 'bg-[#FFB800] text-black'
+                        : 'hover:bg-[#FFB800] hover:text-black'
+                    }`}
+                    onClick={() => navigate('/dashboard/manage-posts')}
                   >
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
-                      className="w-5 h-5"
+                      className="w-4 xl:w-5 h-4 xl:h-5"
                       viewBox="0 0 24 24"
                       fill="none"
@@ -199,19 +208,19 @@
                       <line x1="15" y1="3" x2="15" y2="21"></line>
                     </svg>
-                    Manage Posts
-                  </button>
-                </li>
-                <li>
-                  <button
-                    className={`flex items-center gap-4 px-4 py-3 rounded-lg transition-colors ${
-                      isActive("/dashboard/manage-challenges")
-                        ? "bg-[#FFB800] text-black"
-                        : "hover:bg-[#FFB800] hover:text-black"
-                    }`}
-                    onClick={() => navigate("/dashboard/manage-challenges")}
+                    <span className="truncate">Manage Posts</span>
+                  </button>
+                </li>
+                <li>
+                  <button
+                    className={`flex items-center gap-3 xl:gap-4 px-3 xl:px-4 py-2 xl:py-3 rounded-lg transition-colors text-sm xl:text-base ${
+                      isActive('/dashboard/manage-challenges')
+                        ? 'bg-[#FFB800] text-black'
+                        : 'hover:bg-[#FFB800] hover:text-black'
+                    }`}
+                    onClick={() => navigate('/dashboard/manage-challenges')}
                   >
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
-                      className="w-5 h-5"
+                      className="w-4 xl:w-5 h-4 xl:h-5"
                       viewBox="0 0 24 24"
                       fill="none"
@@ -232,5 +241,5 @@
                       <line x1="15" y1="3" x2="15" y2="21"></line>
                     </svg>
-                    Manage Challenges
+                    <span className="truncate">Manage Challenges</span>
                   </button>
                 </li>
@@ -240,23 +249,23 @@
         </div>
 
-        <div className="p-4 border-t border-base-content/10">
+        <div className="p-3 xl:p-4 border-t border-base-content/10">
           <button
-            className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
-              isActive("/dashboard/profile")
-                ? "bg-[#FFB800] text-black"
-                : "hover:bg-[#FFB800] hover:text-black"
+            className={`w-full flex items-center gap-2 xl:gap-3 px-3 xl:px-4 py-2 xl:py-3 rounded-lg transition-colors ${
+              isActive('/dashboard/profile')
+                ? 'bg-[#FFB800] text-black'
+                : 'hover:bg-[#FFB800] hover:text-black'
             }`}
-            onClick={() => navigate("/dashboard/profile")}
+            onClick={() => navigate('/dashboard/profile')}
           >
             <img
               src={pp}
               alt="Profile"
-              className="w-10 h-10 rounded-full border-2 border-base-content/10"
+              className="w-8 xl:w-10 h-8 xl:h-10 rounded-full border-2 border-base-content/10 flex-shrink-0"
             />
-            <div className="flex flex-col items-start cursor-pointer">
-              <span className="font-medium text-left">
+            <div className="flex flex-col items-start cursor-pointer min-w-0 flex-1">
+              <span className="font-medium text-left text-sm xl:text-base truncate w-full">
                 {user && user.username}
               </span>
-              <span className="text-sm text-base-content/70 mt-2">
+              <span className="text-xs xl:text-sm text-base-content/70 mt-1 xl:mt-2">
                 {user && <RankBadgeNav rankName={user.rank} size="sm" />}
               </span>
@@ -271,5 +280,5 @@
         <div className="flex items-center justify-between p-4">
           <div
-            onClick={() => navigate("/")}
+            onClick={() => navigate('/')}
             className="flex items-center gap-2 cursor-pointer"
           >
@@ -316,10 +325,10 @@
                   <button
                     className={`w-full flex items-center gap-4 px-4 py-3 rounded-lg transition-colors text-left ${
-                      isActive("/dashboard")
-                        ? "bg-[#FFB800] text-black"
-                        : "hover:bg-[#FFB800] hover:text-black"
+                      isActive('/dashboard')
+                        ? 'bg-[#FFB800] text-black'
+                        : 'hover:bg-[#FFB800] hover:text-black'
                     }`}
                     onClick={() => {
-                      navigate("/dashboard");
+                      navigate('/dashboard');
                       setIsMobileMenuOpen(false);
                     }}
@@ -341,10 +350,10 @@
                   <button
                     className={`w-full flex items-center gap-4 px-4 py-3 rounded-lg transition-colors text-left ${
-                      isActive("/dashboard/leaderboard")
-                        ? "bg-[#FFB800] text-black"
-                        : "hover:bg-[#FFB800] hover:text-black"
+                      isActive('/dashboard/leaderboard')
+                        ? 'bg-[#FFB800] text-black'
+                        : 'hover:bg-[#FFB800] hover:text-black'
                     }`}
                     onClick={() => {
-                      navigate("/dashboard/leaderboard");
+                      navigate('/dashboard/leaderboard');
                       setIsMobileMenuOpen(false);
                     }}
@@ -366,10 +375,10 @@
                   <button
                     className={`w-full flex items-center gap-4 px-4 py-3 rounded-lg transition-colors text-left ${
-                      isActive("/dashboard/forum")
-                        ? "bg-[#FFB800] text-black"
-                        : "hover:bg-[#FFB800] hover:text-black"
+                      isActive('/dashboard/forum')
+                        ? 'bg-[#FFB800] text-black'
+                        : 'hover:bg-[#FFB800] hover:text-black'
                     }`}
                     onClick={() => {
-                      navigate("/dashboard/forum");
+                      navigate('/dashboard/forum');
                       setIsMobileMenuOpen(false);
                     }}
@@ -394,10 +403,10 @@
                   <button
                     className={`w-full flex items-center gap-4 px-4 py-3 rounded-lg transition-colors text-left ${
-                      isActive("/dashboard/user-posts")
-                        ? "bg-[#FFB800] text-black"
-                        : "hover:bg-[#FFB800] hover:text-black"
+                      isActive('/dashboard/user-posts')
+                        ? 'bg-[#FFB800] text-black'
+                        : 'hover:bg-[#FFB800] hover:text-black'
                     }`}
                     onClick={() => {
-                      navigate("/dashboard/user-posts");
+                      navigate('/dashboard/user-posts');
                       setIsMobileMenuOpen(false);
                     }}
@@ -426,10 +435,10 @@
                       <button
                         className={`w-full flex items-center gap-4 px-4 py-3 rounded-lg transition-colors text-left ${
-                          isActive("/dashboard/manage-posts")
-                            ? "bg-[#FFB800] text-black"
-                            : "hover:bg-[#FFB800] hover:text-black"
+                          isActive('/dashboard/manage-posts')
+                            ? 'bg-[#FFB800] text-black'
+                            : 'hover:bg-[#FFB800] hover:text-black'
                         }`}
                         onClick={() => {
-                          navigate("/dashboard/manage-posts");
+                          navigate('/dashboard/manage-posts');
                           setIsMobileMenuOpen(false);
                         }}
@@ -462,10 +471,10 @@
                       <button
                         className={`w-full flex items-center gap-4 px-4 py-3 rounded-lg transition-colors text-left ${
-                          isActive("/dashboard/manage-challenges")
-                            ? "bg-[#FFB800] text-black"
-                            : "hover:bg-[#FFB800] hover:text-black"
+                          isActive('/dashboard/manage-challenges')
+                            ? 'bg-[#FFB800] text-black'
+                            : 'hover:bg-[#FFB800] hover:text-black'
                         }`}
                         onClick={() => {
-                          navigate("/dashboard/manage-challenges");
+                          navigate('/dashboard/manage-challenges');
                           setIsMobileMenuOpen(false);
                         }}
@@ -503,10 +512,10 @@
                   <button
                     className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-left ${
-                      isActive("/dashboard/profile")
-                        ? "bg-[#FFB800] text-black"
-                        : "hover:bg-[#FFB800] hover:text-black"
+                      isActive('/dashboard/profile')
+                        ? 'bg-[#FFB800] text-black'
+                        : 'hover:bg-[#FFB800] hover:text-black'
                     }`}
                     onClick={() => {
-                      navigate("/dashboard/profile");
+                      navigate('/dashboard/profile');
                       setIsMobileMenuOpen(false);
                     }}
Index: client/src/Dashboard/components/Task.jsx
===================================================================
--- client/src/Dashboard/components/Task.jsx	(revision 420d7b9b1837b208cbebd6615b98ec8012e3d42e)
+++ client/src/Dashboard/components/Task.jsx	(revision 909821d87b77e470a89d64f5600d2259fb44dc15)
@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from "react";
-
-import { useNavigate } from "react-router-dom";
-import { useAuth } from "@/contexts/AuthContext";
+import React, { useEffect, useState } from 'react';
+
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '@/contexts/AuthContext';
 import {
   getTaskForDate,
@@ -9,5 +9,5 @@
   getSpecificTestCase,
   updateUserDailyTestCaseId,
-} from "@/services/taskService";
+} from '@/services/taskService';
 
 const Task = () => {
@@ -15,5 +15,5 @@
   const [task, setTask] = useState(null);
   const [testCase, setTestCase] = useState(null);
-  const [evalResult, setEvalResult] = useState("");
+  const [evalResult, setEvalResult] = useState('');
   const [isCorrect, setIsCorrect] = useState(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -31,5 +31,5 @@
     if (user && !user.solvedDailyChallenge) {
       setIsCorrect(null);
-      setEvalResult("");
+      setEvalResult('');
       setIsUserOutputEmpty(true);
     }
@@ -43,28 +43,28 @@
         const taskData = data[0];
         let processedTitle = taskData.title
-          .split("-")
+          .split('-')
           .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-          .join(" ");
+          .join(' ');
 
         setTask({
           id: taskData.id,
-          title: processedTitle || "Daily Challenge",
-          content: taskData.content || "No description available",
+          title: processedTitle || 'Daily Challenge',
+          content: taskData.content || 'No description available',
           examples: taskData.examples || [],
         });
       } else {
         setTask({
-          title: "No Challenge Available",
-          content: "There is no challenge available for today.",
-          examples: [{ input: "N/A", output: "N/A" }],
+          title: 'No Challenge Available',
+          content: 'There is no challenge available for today.',
+          examples: [{ input: 'N/A', output: 'N/A' }],
         });
       }
     } catch (error) {
-      console.error("Error fetching task:", error);
+      console.error('Error fetching task:', error);
       setTask({
-        title: "Error Loading Challenge",
+        title: 'Error Loading Challenge',
         content:
           "There was an error loading today's challenge. Please try again later.",
-        examples: [{ input: "N/A", output: "N/A" }],
+        examples: [{ input: 'N/A', output: 'N/A' }],
       });
     }
@@ -113,5 +113,5 @@
             } catch (error) {
               console.error(
-                "Failed to update daily_test_case_id on backend:",
+                'Failed to update daily_test_case_id on backend:',
                 error
               );
@@ -119,9 +119,9 @@
           } else {
             console.warn(
-              "User ID not available, cannot update daily_test_case_id on backend."
+              'User ID not available, cannot update daily_test_case_id on backend.'
             );
           }
         } else {
-          console.warn("No random test case found for the task:", challengeId);
+          console.warn('No random test case found for the task:', challengeId);
         }
       }
@@ -133,9 +133,9 @@
         });
       } else {
-        console.error("No valid test case data to set after fetch attempts.");
+        console.error('No valid test case data to set after fetch attempts.');
         setTestCase(null);
       }
     } catch (error) {
-      console.error("Error in fetchTestCaseLogic (outer try):", error);
+      console.error('Error in fetchTestCaseLogic (outer try):', error);
       setTestCase(null);
     }
@@ -152,5 +152,5 @@
   async function handleSubmitSolution() {
     if (!task || !task.examples || task.examples.length === 0) {
-      alert("No challenge is currently available");
+      alert('No challenge is currently available');
       return;
     }
@@ -158,6 +158,6 @@
 
     try {
-      const userOutput = document.getElementById("userOutput").value;
-      if (userOutput.trim() === "") {
+      const userOutput = document.getElementById('userOutput').value;
+      if (userOutput.trim() === '') {
         return;
       }
@@ -189,6 +189,6 @@
       }
     } catch (error) {
-      console.error("Error evaluating solution:", error);
-      alert("Something went wrong. Try again later.");
+      console.error('Error evaluating solution:', error);
+      alert('Something went wrong. Try again later.');
     } finally {
       setIsSubmitting(false);
@@ -215,6 +215,6 @@
         <div className="container mx-auto max-w-4xl p-6" data-theme="luxury">
           {!showTask ? (
-            <div className="card bg-base-200 shadow-xl">
-              <div className="card-body items-center ">
+            <div className="card bg-base-200 shadow-xl w-full sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl  mx-auto">
+              <div className="card-body items-center max-h-[90vh] ">
                 <div className="flex items-center justify-center w-16 h-16 rounded-full bg-primary/10">
                   <svg
@@ -230,5 +230,5 @@
                 </div>
                 <h1 className="card-title text-4xl font-bold mb-6">
-                  Challenge for {new Date().toLocaleDateString("en-GB")}
+                  Challenge for {new Date().toLocaleDateString('en-GB')}
                 </h1>
                 <div className="divider"></div>
@@ -279,6 +279,6 @@
                     </svg>
                     {user.solvedDailyChallenge
-                      ? "View Challenge"
-                      : "Start Challenge"}
+                      ? 'View Challenge'
+                      : 'Start Challenge'}
                   </button>
                 </div>
@@ -286,175 +286,205 @@
             </div>
           ) : (
-            <div className="card bg-base-200 shadow-xl">
-              <div className="card-body">
-                <div className="flex items-center gap-4 mb-8">
-                  <h1 className="card-title text-3xl text-left flex-1">
-                    Challenge for {today}
-                  </h1>
-                </div>
-
-                {user.solvedDailyChallenge && (
-                  <div className="alert alert-info mb-4">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      className="w-6 h-6 stroke-current"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="2"
-                        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                      ></path>
-                    </svg>
-                    <span>
-                      You have already completed today's challenge. Come back
-                      tomorrow at 7 AM for a new challenge!
-                    </span>
+            <div className="w-full max-w-7xl mx-auto px-2 sm:px-4 lg:px-6">
+              <div className="card bg-base-200 shadow-xl">
+                <div className="card-body p-3 sm:p-6 lg:p-8">
+                  {/* Header Section */}
+                  <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 mb-4 sm:mb-6 lg:mb-8">
+                    <h1 className="card-title text-xl sm:text-2xl lg:text-3xl text-left flex-1 break-words">
+                      Challenge for {today}
+                    </h1>
                   </div>
-                )}
-
-                {task ? (
-                  <>
-                    <div className="card bg-base-300 mb-2">
-                      <div className="card-body">
-                        <h2 className="card-title mb-1 underline">
-                          Problem: {task.title || "Daily Challenge"}
-                        </h2>
-                        <p className="text-lg leading-relaxed  break-words font-bold whitespace-pre-line">
-                          {task.content || "No description available"}
-                        </p>
+
+                  {/* Already Completed Alert */}
+                  {user.solvedDailyChallenge && (
+                    <div className="alert alert-info mb-3 sm:mb-4 text-sm sm:text-base">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        className="w-4 h-4 sm:w-6 sm:h-6 stroke-current shrink-0"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                        ></path>
+                      </svg>
+                      <span className="break-words">
+                        You have already completed today's challenge. Come back
+                        tomorrow at 7 AM for a new challenge!
+                      </span>
+                    </div>
+                  )}
+
+                  {task ? (
+                    <>
+                      {/* Problem Section */}
+                      <div className="card bg-base-300 mb-3 sm:mb-4 lg:mb-6">
+                        <div className="card-body p-3 sm:p-4 lg:p-6">
+                          <h2 className="card-title text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 underline break-words">
+                            Problem: {task.title || 'Daily Challenge'}
+                          </h2>
+                          <p className="text-sm sm:text-base lg:text-lg leading-relaxed break-words font-bold whitespace-pre-line">
+                            {task.content || 'No description available'}
+                          </p>
+                        </div>
                       </div>
-                    </div>
-
-                    <div className="space-y-6 mb-8">
-                      <div className="card bg-primary/5">
-                        <div className="card-body">
-                          <h3 className="card-title underline">Your Input:</h3>
-                          <div
-                            className={`text-xl font-mono mt-3 break-words max-h-45 overflow-y-auto font-bold ${
-                              testCase &&
-                              testCase.input &&
-                              testCase.input.includes("\n")
-                                ? "whitespace-pre-line"
-                                : "whitespace-normal"
-                            }`}
-                          >
-                            {testCase &&
-                              testCase.input &&
-                              testCase.input.replace(/^"|"$/g, "")}
+
+                      {/* Input and Examples Section */}
+                      <div className="space-y-3 sm:space-y-4 lg:space-y-6 mb-4 sm:mb-6 lg:mb-8">
+                        {/* Your Input Card */}
+                        <div className="card bg-primary/5">
+                          <div className="card-body p-3 sm:p-4 lg:p-6">
+                            <h3 className="card-title text-base sm:text-lg lg:text-xl underline mb-2 sm:mb-3">
+                              Your Input:
+                            </h3>
+                            <div
+                              className={`text-sm sm:text-base lg:text-lg xl:text-xl font-mono break-words max-h-32 sm:max-h-40 lg:max-h-48 overflow-y-auto font-bold p-2 sm:p-3 bg-base-100 rounded ${
+                                testCase &&
+                                testCase.input &&
+                                testCase.input.includes('\n')
+                                  ? 'whitespace-pre-line'
+                                  : 'whitespace-normal'
+                              }`}
+                            >
+                              {testCase &&
+                                testCase.input &&
+                                testCase.input.replace(/^"|"$/g, '')}
+                            </div>
+                          </div>
+                        </div>
+
+                        {/* Examples Card */}
+                        <div className="card bg-base-300">
+                          <div className="card-body p-3 sm:p-4 lg:p-6">
+                            <h3 className="card-title text-base sm:text-lg lg:text-xl mb-2 sm:mb-3">
+                              Examples:
+                            </h3>
+                            <div className="space-y-3 sm:space-y-4 lg:space-y-5">
+                              {task.examples.map((example, index) => (
+                                <div
+                                  key={index}
+                                  className="font-mono text-xs sm:text-sm lg:text-base break-words font-bold whitespace-pre-line bg-base-100 p-2 sm:p-3 rounded"
+                                >
+                                  <div className="pl-2 sm:pl-3 border-l-2 border-amber-400">
+                                    <p className="mb-1 sm:mb-2">
+                                      <span className="font-semibold">
+                                        Input:
+                                      </span>{' '}
+                                      {example.input || 'N/A'}
+                                    </p>
+                                    <p>
+                                      <span className=" font-semibold">
+                                        Output:
+                                      </span>{' '}
+                                      {example.output || 'N/A'}
+                                    </p>
+                                  </div>
+                                </div>
+                              ))}
+                            </div>
                           </div>
                         </div>
                       </div>
-
-                      <div className="card bg-base-300">
-                        <div className="card-body">
-                          <h3 className="card-title">Examples:</h3>
-                          <div className="space-y-5 mt-2">
-                            {task.examples.map((example, index) => (
-                              <div
-                                key={index}
-                                className="font-mono mt-3 break-words font-bold whitespace-pre-line"
-                              >
-                                <p className="pl-2 border-l-2 border-amber-400 mt-1">
-                                  Input: {example.input || "N/A"} <br />
-                                  <br />
-                                  Output: {example.output || "N/A"}
-                                </p>
-                              </div>
-                            ))}
-                          </div>
+                    </>
+                  ) : (
+                    <div className="flex justify-center items-center py-8 sm:py-12 lg:py-16">
+                      <span className="loading loading-spinner loading-md sm:loading-lg"></span>
+                    </div>
+                  )}
+
+                  {/* Submit Solution Section */}
+                  <div className="card bg-base-300">
+                    <div className="card-body p-3 sm:p-4 lg:p-6">
+                      <h3 className="card-title text-base sm:text-lg lg:text-xl mb-3 sm:mb-4">
+                        Submit Your Solution
+                      </h3>
+
+                      <textarea
+                        id="userOutput"
+                        type="text"
+                        placeholder={
+                          user.solvedDailyChallenge
+                            ? 'Challenge already completed'
+                            : 'Enter your output here...'
+                        }
+                        onChange={(e) => {
+                          const value = e.target.value;
+                          setIsUserOutputEmpty(value.trim() === '');
+                        }}
+                        className={`textarea textarea-bordered w-full mb-3 sm:mb-4 text-sm sm:text-base resize-none ${
+                          isCorrect === null
+                            ? ''
+                            : isCorrect
+                            ? 'border-green-500'
+                            : 'border-red-500'
+                        }`}
+                        rows="4"
+                        style={{ minHeight: '100px', maxHeight: '200px' }}
+                        disabled={user.solvedDailyChallenge || isSubmitting}
+                      />
+
+                      {user.solvedDailyChallenge && (
+                        <p className="text-sm sm:text-base lg:text-lg text-success mb-3 sm:mb-4">
+                          You earned:{' '}
+                          <span className="font-bold">{user.daily_points}</span>{' '}
+                          points for today's task
+                        </p>
+                      )}
+
+                      {isSubmitting && (
+                        <div className="flex justify-center items-center my-2 sm:my-3 text-sm sm:text-base">
+                          <span className="loading loading-spinner loading-sm sm:loading-md mr-2"></span>
+                          <span>Evaluating your solution...</span>
                         </div>
+                      )}
+
+                      <p
+                        className={`mb-4 sm:mb-6 lg:mb-8 text-sm sm:text-base lg:text-lg break-words ${
+                          isCorrect
+                            ? 'text-success'
+                            : isCorrect === false
+                            ? 'text-error'
+                            : ''
+                        }`}
+                      >
+                        {evalResult}
+                      </p>
+
+                      {/* Action Buttons */}
+                      <div className="flex flex-col sm:flex-row justify-end gap-2 sm:gap-4">
+                        <button
+                          onClick={() => {
+                            handleGoBack();
+                          }}
+                          className="btn border-amber-400 btn-sm sm:btn-md lg:btn-lg order-2 sm:order-1"
+                          disabled={isSubmitting}
+                        >
+                          Go Back
+                        </button>
+                        <button
+                          onClick={() => handleSubmitSolution()}
+                          className={`btn btn-sm sm:btn-md lg:btn-lg order-1 sm:order-2 ${
+                            user.solvedDailyChallenge || isSubmitting
+                              ? 'btn-disabled'
+                              : 'border-amber-400'
+                          }`}
+                          disabled={
+                            user.solvedDailyChallenge ||
+                            isSubmitting ||
+                            isUserOutputEmpty
+                          }
+                        >
+                          {isSubmitting ? (
+                            <span className="loading loading-spinner loading-xs sm:loading-sm"></span>
+                          ) : user.solvedDailyChallenge ? (
+                            'Already Completed'
+                          ) : (
+                            'Submit Solution'
+                          )}
+                        </button>
                       </div>
-                    </div>
-                  </>
-                ) : (
-                  <div className="flex justify-center items-center py-12">
-                    <span className="loading loading-spinner loading-lg"></span>
-                  </div>
-                )}
-
-                <div className="card bg-base-300">
-                  <div className="card-body">
-                    <h3 className="card-title mb-4">Submit Your Solution</h3>
-                    <textarea
-                      id="userOutput"
-                      type="text"
-                      placeholder={
-                        user.solvedDailyChallenge
-                          ? "Challenge already completed"
-                          : "Enter your output here..."
-                      }
-                      onChange={(e) => {
-                        const value = e.target.value;
-                        setIsUserOutputEmpty(value.trim() === "");
-                      }}
-                      className={`textarea textarea-bordered textarea-lg w-full mb-4 ${
-                        isCorrect === null
-                          ? ""
-                          : isCorrect
-                          ? "border-green-500"
-                          : "border-red-500"
-                      }`}
-                      rows="6"
-                      disabled={user.solvedDailyChallenge || isSubmitting}
-                    />
-                    {user.solvedDailyChallenge && (
-                      <p className="text-lg text-success">
-                        You earned: {user.daily_points} for today's task
-                      </p>
-                    )}
-
-                    {isSubmitting && (
-                      <div className="flex justify-center items-center my-2">
-                        <span className="loading loading-spinner loading-md mr-2"></span>
-                        <span>Evaluating your solution...</span>
-                      </div>
-                    )}
-
-                    <p
-                      className={`mt-2 mb-10 text-lg ${
-                        isCorrect
-                          ? "text-success"
-                          : isCorrect === false
-                          ? "text-error"
-                          : ""
-                      }`}
-                    >
-                      {evalResult}
-                    </p>
-
-                    <div className="card-actions justify-end gap-4">
-                      <button
-                        onClick={() => {
-                          handleGoBack();
-                        }}
-                        className="btn border-amber-400 btn-lg"
-                        disabled={isSubmitting}
-                      >
-                        Go Back
-                      </button>
-                      <button
-                        onClick={() => handleSubmitSolution()}
-                        className={`btn btn-lg ${
-                          user.solvedDailyChallenge || isSubmitting
-                            ? "btn-disabled"
-                            : "border-amber-400"
-                        }`}
-                        disabled={
-                          user.solvedDailyChallenge ||
-                          isSubmitting ||
-                          isUserOutputEmpty
-                        }
-                      >
-                        {isSubmitting ? (
-                          <span className="loading loading-spinner"></span>
-                        ) : user.solvedDailyChallenge ? (
-                          "Already Completed"
-                        ) : (
-                          "Submit Solution"
-                        )}
-                      </button>
                     </div>
                   </div>
Index: client/src/Dashboard/components/UserPosts.jsx
===================================================================
--- client/src/Dashboard/components/UserPosts.jsx	(revision 420d7b9b1837b208cbebd6615b98ec8012e3d42e)
+++ client/src/Dashboard/components/UserPosts.jsx	(revision 909821d87b77e470a89d64f5600d2259fb44dc15)
@@ -1,10 +1,13 @@
-import { useAuth } from "../../contexts/AuthContext.jsx";
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { getPendingPosts } from "@/services/reviewService";
-import { getAllPostsByUser } from "@/services/forumService.js";
-import commentIcon from "../../assets/images/comment.svg";
-import { DatePicker } from "react-daisyui-timetools";
-import "react-datepicker/dist/react-datepicker.css";
+import { useAuth } from '../../contexts/AuthContext.jsx';
+import { act, useEffect, useState } from 'react';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { getPendingPosts } from '@/services/reviewService';
+import { getAllPostsByUser, deleteForumPost } from '@/services/forumService.js';
+import { deleteReviewPost } from '@/services/reviewService';
+import commentIcon from '../../assets/images/comment.svg';
+import CalendarPopover from './CalendarPopover.jsx';
+import { DatePicker } from 'react-daisyui-timetools';
+import 'react-datepicker/dist/react-datepicker.css';
+import trashIcon from '../../assets/images/delete.svg';
 
 const UserPosts = () => {
@@ -12,130 +15,204 @@
   const [approvedPosts, setApprovedPosts] = useState([]);
   const [pendingPosts, setPendingPosts] = useState([]);
+  const location = useLocation();
+  const fromPath = location.state?.from || '/dashboard/forum';
+
+  const fromForumSearchPrams = location.state?.fromForumSearch;
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
   const [loading, setLoading] = useState(true);
-  const [activeTab, setActiveTab] = useState("published");
+  const [activeTab, setActiveTab] = useState('published');
   const navigate = useNavigate();
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [pendingCurrentPage, setPendingCurrentPage] = useState(() => {
+    return parseInt(searchParams.get('pendingPage') || '1', 10);
+  });
+  const PENDING_PAGE_SIZE = 10;
 
   // Filter states
   const defaultFilters = {
-    topic: "all", // "all", "general", "daily-challenge"
-    dateSort: "newest", // "newest", "oldest"
-    selectedDate: null, // specific date filter
-    commentSort: "none", // "none", "most-popular", "least-popular"
-    searchText: "", // text search in title and content
+    topic: 'all',
+    dateSort: 'newest',
+    selectedDate: null,
+    commentSort: 'none',
+    searchText: '',
   };
-
-  const [filters, setFilters] = useState({ ...defaultFilters });
-  const [appliedFilters, setAppliedFilters] = useState({ ...defaultFilters });
-  const [showFilters, setShowFilters] = useState(false);
-
-  // Apply filters to posts
-  const applyFiltersToApprovedPosts = (posts, activeFilters) => {
-    let filteredPosts = [...posts];
-
-    // 1. Apply text search filter
-    if (activeFilters.searchText && activeFilters.searchText.trim()) {
-      const searchTerm = activeFilters.searchText.trim().toLowerCase();
-      filteredPosts = filteredPosts.filter((post) => {
-        const titleMatch =
-          post.title && post.title.toLowerCase().includes(searchTerm);
-        const contentMatch =
-          post.content && post.content.toLowerCase().includes(searchTerm);
-        return titleMatch || contentMatch;
-      });
+  const [modal, setModal] = useState({
+    isOpen: false,
+    message: '',
+    type: '',
+    postId: null,
+  });
+  const showModal = (message, type = 'info', postId = null) => {
+    setModal({ isOpen: true, message, type, postId });
+  };
+
+  const closeModal = () => {
+    setModal({ isOpen: false, message: '', type: '', postId: null });
+  };
+
+  const confirmDelete = async () => {
+    if (modal.postId) {
+      setIsDeleting(true);
+      await handleDeletePost(modal.postId);
+      setIsDeleting(false);
     }
-
-    // 2. Apply topic filter
-    if (activeFilters.topic && activeFilters.topic !== "all") {
-      filteredPosts = filteredPosts.filter(
-        (post) => post.topic === activeFilters.topic
-      );
-    }
-
-    // 3. Apply specific date filter
-    if (activeFilters.selectedDate) {
+  };
+  const confirmRemoval = async () => {
+    if (modal.postId) {
+      setIsDeleting(true);
       try {
-        const filterDate =
-          activeFilters.selectedDate instanceof Date
-            ? new Date(activeFilters.selectedDate)
-            : new Date(String(activeFilters.selectedDate));
-
-        if (!isNaN(filterDate.getTime())) {
-          filterDate.setHours(0, 0, 0, 0);
-          const nextDay = new Date(filterDate);
-          nextDay.setDate(nextDay.getDate() + 1);
-
-          filteredPosts = filteredPosts.filter((post) => {
-            const postDate = new Date(post.date_created);
-            return postDate >= filterDate && postDate < nextDay;
-          });
+        await deleteReviewPost(modal.postId, user.id);
+
+        const data = await getPendingPosts();
+        setPendingPosts(data);
+
+        const newTotalPages = Math.ceil(data.length / PENDING_PAGE_SIZE);
+        if (pendingCurrentPage > newTotalPages && newTotalPages > 0) {
+          handlePendingPageChange(newTotalPages);
         }
-      } catch (err) {
-        console.error("Error in date filtering:", err);
+
+        closeModal();
+        showModal('Post removed successfully.', 'success');
+      } catch (error) {
+        console.error('Error removing post:', error);
+        closeModal();
+        showModal('Failed to remove post. Please try again.', 'error');
+      } finally {
+        setIsDeleting(false);
       }
     }
-
-    // 4. Apply comment popularity sorting
-    if (activeFilters.commentSort && activeFilters.commentSort !== "none") {
-      filteredPosts = filteredPosts.sort((a, b) => {
-        if (activeFilters.commentSort === "most-popular") {
-          return (
-            b.comment_count - a.comment_count ||
-            new Date(b.date_created) - new Date(a.date_created)
-          );
-        } else {
-          return (
-            a.comment_count - b.comment_count ||
-            new Date(b.date_created) - new Date(a.date_created)
-          );
+  };
+  const handleDeletePost = async (postId) => {
+    try {
+      await deleteForumPost(postId);
+
+      const filtersForBackend = { ...defaultFilters };
+      for (const [key, value] of searchParams.entries()) {
+        if (key in filtersForBackend) {
+          filtersForBackend[key] = value;
         }
-      });
+      }
+      const approvedData = await getAllPostsByUser(
+        currentPage,
+        10,
+        filtersForBackend
+      );
+      setApprovedPosts(approvedData.posts || []);
+      setTotalPages(approvedData.totalPages || 1);
+
+      closeModal();
+      showModal('Post deleted successfully.', 'success');
+    } catch (error) {
+      console.error('Error deleting post:', error);
+      closeModal();
+      showModal('Failed to delete post. Please try again.', 'error');
     }
-    // 5. Apply date sorting (if comment sorting wasn't applied)
-    else if (activeFilters.dateSort) {
-      filteredPosts = filteredPosts.sort((a, b) => {
-        const dateA = new Date(a.date_created);
-        const dateB = new Date(b.date_created);
-
-        if (activeFilters.dateSort === "oldest") {
-          return dateA - dateB;
-        } else {
-          return dateB - dateA;
-        }
-      });
+  };
+
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [filters, setFilters] = useState({ ...defaultFilters });
+  const [appliedFilters, setAppliedFilters] = useState(() => {
+    //Useful?
+    const initialFilters = { ...defaultFilters };
+    for (const [key, value] of searchParams.entries()) {
+      if (key in initialFilters) {
+        initialFilters[key] = value;
+      }
     }
-
-    return filteredPosts;
+    return initialFilters;
+  });
+  const [showFilters, setShowFilters] = useState(false);
+  const pendingTotalPages = Math.ceil(pendingPosts.length / PENDING_PAGE_SIZE);
+  const paginatedPendingPosts = pendingPosts.slice(
+    (pendingCurrentPage - 1) * PENDING_PAGE_SIZE,
+    pendingCurrentPage * PENDING_PAGE_SIZE
+  );
+
+  const applyFilters = () => {
+    const newSearchParams = new URLSearchParams();
+    for (const [key, value] of Object.entries(filters)) {
+      if (value && String(value) !== String(defaultFilters[key])) {
+        newSearchParams.set(key, value);
+      }
+    }
+    newSearchParams.set('page', '1');
+    setCurrentPage(1);
+    if (searchParams.get('pendingPage')) {
+      newSearchParams.set('pendingPage', searchParams.get('pendingPage'));
+    }
+    setSearchParams(newSearchParams);
   };
-
-  // Apply all selected filters
-  const applyFilters = () => {
-    console.log("Applying filters:", filters);
-    const currentFilters = { ...filters };
-    setAppliedFilters(currentFilters);
+  const handleRemoveFilter = (filterKey) => {
+    const newFilters = { ...filters, [filterKey]: defaultFilters[filterKey] };
+    setFilters(newFilters);
+
+    if (searchParams.has(filterKey)) {
+      setAppliedFilters(newFilters);
+
+      const newSearchParams = new URLSearchParams(searchParams);
+      newSearchParams.delete(filterKey);
+      setCurrentPage(1);
+      newSearchParams.set('page', '1');
+      setSearchParams(newSearchParams);
+    } else {
+      setAppliedFilters(newFilters);
+    }
   };
 
-  // Clear all filters and reset to default
   const clearFilters = () => {
-    console.log("Clearing filters, using defaults:", defaultFilters);
-    const freshDefaultFilters = { ...defaultFilters };
-    setFilters(freshDefaultFilters);
-    setAppliedFilters(freshDefaultFilters);
+    setFilters({ ...defaultFilters });
+    setAppliedFilters({ defaultFilters });
+    const newSearchParams = new URLSearchParams();
+    newSearchParams.set('page', '1');
+    if (searchParams.get('pendingPage')) {
+      newSearchParams.set('pendingPage', searchParams.get('pendingPage'));
+    }
+    setCurrentPage(1);
+    setSearchParams(newSearchParams);
+  };
+  const handlePendingPageChange = (newPage) => {
+    setPendingCurrentPage(newPage);
+    const newSearchParams = new URLSearchParams(searchParams);
+    newSearchParams.set('pendingPage', newPage.toString());
+    setSearchParams(newSearchParams);
+  };
+  const formatFilterLabel = (value) => {
+    if (!value) return '';
+    return value
+      .split('-')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ');
   };
   useEffect(() => {
-    if (user) {
-      const fetchAllPosts = async () => {
+    const pendingPageFromUrl = parseInt(
+      searchParams.get('pendingPage') || '1',
+      10
+    );
+    setPendingCurrentPage(pendingPageFromUrl);
+  }, [searchParams]);
+  useEffect(() => {
+    if (user?.id) {
+      const fetchPosts = async () => {
+        setLoading(true);
         try {
-          setLoading(true);
-
-          const [approvedData, pendingData] = await Promise.all([
-            getAllPostsByUser(),
-            getPendingPosts(),
-          ]);
-
-          setApprovedPosts(approvedData);
-
-          setPendingPosts(pendingData);
+          const filtersForBackend = { ...defaultFilters };
+          for (const [key, value] of searchParams.entries()) {
+            if (key in filtersForBackend) {
+              filtersForBackend[key] = value;
+            }
+          }
+          const approvedData = await getAllPostsByUser(
+            currentPage,
+            10,
+            filtersForBackend
+          );
+          setApprovedPosts(approvedData.posts || []);
+          setTotalPages(approvedData.totalPages || 1);
         } catch (error) {
-          console.error("Error fetching user posts:", error);
+          console.error('Error fetching user posts:', error);
+          setApprovedPosts([]); // Clear posts on error
+          setTotalPages(1);
         } finally {
           setLoading(false);
@@ -143,66 +220,31 @@
       };
 
-      fetchAllPosts();
+      fetchPosts();
     }
-  }, [user?.id]);
-
-  // Apply filters to get filtered posts
-  const filteredApprovedPosts = applyFiltersToApprovedPosts(
-    approvedPosts,
-    appliedFilters
-  );
-
-  if (loading) {
-    return (
-      <div className="flex justify-center items-center h-full">
-        <span className="loading loading-spinner loading-lg"></span>
-      </div>
-    );
-  }
+  }, [user?.id, searchParams, currentPage]);
+
+  useEffect(() => {
+    const fetchPendingPosts = async () => {
+      const data = await getPendingPosts();
+      setPendingPosts(data);
+    };
+    fetchPendingPosts();
+  }, []);
 
   return (
     <div data-theme="luxury" className="min-h-screen bg-base-100">
       <div className="flex flex-col h-screen">
-        {/* Sticky Header Section */}
-        <div className="sticky top-0 z-10 bg-base-100 border-b border-base-300 shadow-sm">
-          <div className="p-4 sm:p-6 sm:pl-12 w-full">
-            <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
-              <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-center lg:text-left">
-                Your Posts
-              </h1>
-              <div className="flex flex-col sm:flex-row gap-2 sm:gap-3 lg:gap-4 w-full lg:w-auto">
-                <button
-                  onClick={() => {
-                    navigate("/dashboard/create-post");
-                  }}
-                  className="cursor-pointer px-3 py-2 sm:px-4 sm:py-2.5 md:px-6 md:py-3 bg-yellow-500 text-black rounded-lg hover:bg-yellow-600 text-sm sm:text-base font-medium transition-colors duration-200 flex-1 xs:flex-none lg:whitespace-nowrap"
-                >
-                  Create a Post
-                </button>
-                <button
-                  onClick={() => {
-                    navigate("/dashboard/forum");
-                  }}
-                  className="cursor-pointer px-3 py-2 sm:px-4 sm:py-2.5 md:px-6 md:py-3 bg-yellow-500 text-black rounded-lg hover:bg-yellow-600 text-sm sm:text-base font-medium transition-colors duration-200 flex-1 xs:flex-none lg:whitespace-nowrap"
-                >
-                  View Forum
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Tab Navigation */}
-        <div className="sticky top-[73px] z-10 bg-base-200 border-b border-base-300 shadow-sm">
-          <div className="p-3 sm:p-4 sm:pl-12 w-full max-w-full mx-auto">
-            <div className="flex justify-center mb-4">
+        <div className="sticky top-0 z-20 bg-base-100">
+          <div className="p-3 sm:p-3 sm:pl-12 w-full max-w-full mx-auto">
+            <div className="flex justify-center items-center gap-4 relative">
+              {/* Center - Tab buttons */}
               <div className="rounded-lg bg-base-300 p-1 flex gap-2 w-full max-w-md sm:w-auto">
                 <button
                   className={`tab tab-sm sm:tab-md lg:tab-lg rounded-lg flex-1 sm:flex-initial ${
-                    activeTab === "published"
-                      ? "tab-active bg-[#FFB800] text-black hover:text-black"
-                      : "hover:bg-base-200"
+                    activeTab === 'published'
+                      ? 'tab-active bg-[#FFB800] text-black hover:text-black'
+                      : 'hover:bg-base-200'
                   }`}
-                  onClick={() => setActiveTab("published")}
+                  onClick={() => setActiveTab('published')}
                 >
                   <svg
@@ -220,14 +262,14 @@
                   </svg>
                   <span className="text-xs sm:text-sm lg:text-base">
-                    Published ({filteredApprovedPosts.length})
+                    Published ({approvedPosts.length})
                   </span>
                 </button>
                 <button
                   className={`tab tab-sm sm:tab-md lg:tab-lg rounded-lg flex-1 sm:flex-initial ${
-                    activeTab === "pending"
-                      ? "tab-active bg-[#FFB800] text-black hover:text-black"
-                      : "hover:bg-base-200"
+                    activeTab === 'pending'
+                      ? 'tab-active bg-[#FFB800] text-black hover:text-black'
+                      : 'hover:bg-base-200'
                   }`}
-                  onClick={() => setActiveTab("pending")}
+                  onClick={() => setActiveTab('pending')}
                 >
                   <svg
@@ -249,216 +291,399 @@
                 </button>
               </div>
+
+              {/* Right side - Action buttons */}
+              <div className="flex gap-3 absolute right-0">
+                <button
+                  onClick={() => navigate('/dashboard/create-post')}
+                  className="btn bg-[#FFB800] text-black btn-sm gap-1"
+                >
+                  <svg
+                    className="w-4 h-4"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M12 4v16m8-8H4"
+                    />
+                  </svg>
+                  <span className="hidden sm:inline">Create Post</span>
+                </button>
+                <button
+                  onClick={() => {
+                    const targetUrl = fromForumSearchPrams
+                      ? `${fromPath}?${fromForumSearchPrams}`
+                      : fromPath;
+                    navigate(targetUrl);
+                  }}
+                  className="btn btn-outline btn-sm gap-1"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="w-4 h-4 "
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                  >
+                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                    <circle cx="9" cy="7" r="4"></circle>
+                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+                  </svg>
+                  <span className="hidden sm:inline">View Forum</span>
+                </button>
+              </div>
             </div>
-
-            {/* Filters only show for published tab */}
-            {activeTab === "published" && (
-              <>
-                {/* Mobile Filter Toggle */}
-                <div className="flex items-center justify-between mb-3 lg:hidden">
-                  <h3 className="text-lg font-semibold">Filters</h3>
-                  <button
-                    onClick={() => setShowFilters(!showFilters)}
-                    className="btn btn-sm btn-ghost"
+          </div>
+          <div className="flex flex-col">
+            {/* Sticky Header Section */}
+
+            {/* Filter Navbar */}
+            {activeTab == 'published' && (
+              <div className="border-b border-base-300 shadow-sm">
+                <div className="p-3 sm:p-4 md:pl-12 w-full max-w-full mx-auto">
+                  {/* Mobile Filter Toggle */}
+                  <div className="flex items-center justify-between mb-3 lg:hidden ">
+                    <h3 className="text-base sm:text-lg font-semibold flex items-center gap-2">
+                      Filters
+                      {/* Active filter count indicator */}
+                      {(filters.topic !== 'all' ||
+                        filters.dateSort !== 'newest' ||
+                        filters.selectedDate ||
+                        (filters.searchText && filters.searchText.trim())) && (
+                        <span className="badge badge-sm bg-yellow-500 text-black border-none">
+                          {
+                            [
+                              filters.topic !== 'all',
+                              filters.dateSort !== 'newest',
+                              filters.selectedDate,
+                              filters.commentSort !== 'none',
+                              filters.searchText && filters.searchText.trim(),
+                            ].filter(Boolean).length
+                          }
+                        </span>
+                      )}
+                    </h3>
+                    <button
+                      onClick={() => setShowFilters(!showFilters)}
+                      className="btn btn-sm btn-ghost px-2"
+                    >
+                      <svg
+                        className={`w-5 h-5 transition-transform duration-200 ${
+                          showFilters ? 'rotate-180' : ''
+                        }`}
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M19 9l-7 7-7-7"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+
+                  {/* Filter Controls */}
+                  <div
+                    className={`transition-all duration-300 ${
+                      showFilters ? 'block opacity-100' : 'hidden opacity-0'
+                    } lg:block lg:opacity-100`}
                   >
-                    <svg
-                      className={`w-4 h-4 transition-transform ${
-                        showFilters ? "rotate-180" : ""
-                      }`}
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="2"
-                        d="M19 9l-7 7-7-7"
-                      />
-                    </svg>
-                  </button>
-                </div>
-
-                {/* Filter Controls */}
-                <div className={`${showFilters ? "block" : "hidden"} lg:block`}>
-                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 xl:grid-cols-8 gap-3 mb-3 max-w-full">
-                    {/* Search Filter - Takes 2 columns to be wider */}
-                    <div className="flex flex-col gap-1 sm:col-span-2 lg:col-span-2">
-                      <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
-                        Search Posts
-                      </label>
-                      <input
-                        type="text"
-                        placeholder="Search titles and content..."
-                        value={filters.searchText}
-                        onChange={(e) =>
-                          setFilters({ ...filters, searchText: e.target.value })
-                        }
-                        className="input input-sm input-bordered w-full text-sm"
-                      />
-                    </div>
-
-                    {/* Topic Filter */}
-                    <div className="flex flex-col gap-1">
-                      <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
-                        Topic
-                      </label>
-                      <select
-                        value={filters.topic}
-                        onChange={(e) =>
-                          setFilters({ ...filters, topic: e.target.value })
-                        }
-                        className="select select-sm select-bordered w-full text-sm"
-                      >
-                        <option value="all">All Topics</option>
-                        <option value="general">General</option>
-                        <option value="daily-challenge">Daily Challenge</option>
-                      </select>
-                    </div>
-
-                    {/* Date Sort */}
-                    <div className="flex flex-col gap-1">
-                      <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
-                        Date Order
-                      </label>
-                      <select
-                        value={filters.dateSort}
-                        onChange={(e) =>
-                          setFilters({ ...filters, dateSort: e.target.value })
-                        }
-                        className="select select-sm select-bordered w-full text-sm"
-                      >
-                        <option value="newest">Most Recent</option>
-                        <option value="oldest">Oldest First</option>
-                      </select>
-                    </div>
-
-                    {/* Specific Date Filter */}
-                    <div className="flex flex-col gap-1">
-                      <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
-                        Specific Date
-                      </label>
-                      <DatePicker
-                        className="input input-sm input-bordered w-full text-sm"
-                        selected={
-                          filters.selectedDate instanceof Date
-                            ? filters.selectedDate
-                            : filters.selectedDate
-                            ? new Date(filters.selectedDate)
-                            : null
-                        }
-                        onChange={(date) => {
-                          if (date) {
-                            try {
-                              const validDate = new Date(date);
-                              if (!isNaN(validDate.getTime())) {
-                                setFilters({
-                                  ...filters,
-                                  selectedDate: validDate,
-                                });
-                              } else {
-                                console.error("Invalid date selected:", date);
-                                setFilters({ ...filters, selectedDate: null });
+                    {/* Mobile-First Filter Layout - Compact Version */}
+                    <div className="space-y-2 lg:space-y-0 lg:grid lg:grid-cols-6 xl:grid-cols-8 lg:gap-2 mb-2 max-w-full">
+                      {/* Search Filter - Full width on mobile, 2 cols on desktop */}
+                      <div className="flex flex-col gap-1 lg:col-span-2">
+                        <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                          Search Posts
+                        </label>
+                        <div className="relative">
+                          <input
+                            type="text"
+                            placeholder="Search titles and content..."
+                            value={filters.searchText}
+                            onChange={(e) =>
+                              setFilters({
+                                ...filters,
+                                searchText: e.target.value,
+                              })
+                            }
+                            onKeyDown={(e) => {
+                              if (e.key === 'Enter') {
+                                applyFilters();
                               }
-                            } catch (err) {
-                              console.error("Error processing date:", err);
-                              setFilters({ ...filters, selectedDate: null });
+                            }}
+                            className="input input-sm input-bordered w-full text-xs pl-8 pr-2 h-8"
+                          />
+                          <svg
+                            className="z-10 w-3.5 h-3.5 absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth="2"
+                              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+
+                      {/* Mobile: 2-column grid for selects */}
+                      <div className="grid grid-cols-2 gap-2 lg:contents">
+                        {/* Topic Filter */}
+                        <div className="flex flex-col gap-1 lg:col-span-1">
+                          <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                            Topic
+                          </label>
+                          <select
+                            value={filters.topic}
+                            onChange={(e) =>
+                              setFilters({ ...filters, topic: e.target.value })
                             }
-                          } else {
-                            setFilters({ ...filters, selectedDate: null });
-                          }
-                        }}
-                        placeholder="Select date"
-                        maxDate={new Date()}
-                        dateFormat="MM/dd/yyyy"
-                        showYearDropdown
-                        showMonthDropdown
-                        isClearable={true}
-                      />
-                    </div>
-
-                    {/* Comment Sort */}
-                    <div className="flex flex-col gap-1">
-                      <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
-                        Popularity
-                      </label>
-                      <select
-                        value={filters.commentSort}
-                        onChange={(e) =>
-                          setFilters({
-                            ...filters,
-                            commentSort: e.target.value,
-                          })
-                        }
-                        className="select select-sm select-bordered w-full text-sm"
-                      >
-                        <option value="none">No Sorting</option>
-                        <option value="most-popular">Most Popular</option>
-                        <option value="least-popular">Least Popular</option>
-                      </select>
-                    </div>
-
-                    {/* Clear Filters & Apply Buttons */}
-                    <div className="flex flex-col gap-1">
-                      <label className="text-xs font-medium text-gray-500 uppercase tracking-wide opacity-0">
-                        Actions
-                      </label>
-                      <div className="flex gap-1">
-                        <button
-                          onClick={clearFilters}
-                          className="cursor-pointer px-2 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 text-xs font-medium w-16"
-                        >
-                          Clear
-                        </button>
-                        <button
-                          onClick={applyFilters}
-                          className="cursor-pointer px-2 py-2 bg-yellow-500 text-black rounded hover:bg-yellow-600 text-xs font-medium w-16"
-                        >
-                          Apply
-                        </button>
+                            className="select select-sm select-bordered w-full text-xs h-8 min-h-8"
+                          >
+                            <option value="all">All Topics</option>
+                            <option value="general">General</option>
+                            <option value="daily-challenge">
+                              Daily Challenge
+                            </option>
+                          </select>
+                        </div>
+
+                        {/* Date Sort */}
+                        <div className="flex flex-col gap-1 lg:col-span-1">
+                          <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                            Date Order
+                          </label>
+                          <select
+                            value={filters.dateSort}
+                            onChange={(e) =>
+                              setFilters({
+                                ...filters,
+                                dateSort: e.target.value,
+                              })
+                            }
+                            className="select select-sm select-bordered w-full text-xs h-8 min-h-8"
+                          >
+                            <option value="newest">Most Recent</option>
+                            <option value="past-week">Past Week</option>
+                            <option value="past-month">Past Month</option>
+                            <option value="past-year">Past Year</option>
+                          </select>
+                        </div>
+                      </div>
+
+                      {/* Mobile: Single column for date picker and popularity */}
+                      <div className="space-y-2 lg:space-y-0 lg:contents">
+                        <div className="flex flex-col gap-1 lg:col-span-1">
+                          <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                            Populrarity
+                          </label>
+                          <select
+                            value={filters.commentSort}
+                            onChange={(e) =>
+                              setFilters({
+                                ...filters,
+                                commentSort: e.target.value,
+                              })
+                            }
+                            className="select select-sm select-bordered w-full text-xs h-8 min-h-8"
+                          >
+                            <option value="none">No Sorting</option>
+                            <option value="most-popular">Most Popular</option>
+                            <option value="least-popular">Least Popular</option>
+                          </select>
+                        </div>
+                        {/* Specific Date Filter */}
+                        <div className="relative flex flex-col gap-1 lg:col-span-1">
+                          <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                            Specific Date
+                          </label>
+
+                          <div className="relative">
+                            <input
+                              type="text"
+                              readOnly // Makes the input non-editable by typing
+                              onClick={() => setIsCalendarOpen(!isCalendarOpen)} // Opens popover on click
+                              value={
+                                filters.selectedDate
+                                  ? new Date(
+                                      filters.selectedDate
+                                    ).toLocaleDateString('en-US', {
+                                      year: 'numeric',
+                                      month: 'short',
+                                      day: 'numeric',
+                                    })
+                                  : '' // Use empty string so placeholder is visible
+                              }
+                              placeholder="Select date"
+                              // Style to match other inputs and add cursor-pointer
+                              className="input input-sm input-bordered w-full text-xs pl-8 pr-2 cursor-pointer h-8"
+                            />
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              // Position the icon inside the input field
+                              className="z-10 w-3.5 h-3.5 absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              stroke="currentColor"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 002 2z"
+                              />
+                            </svg>
+                          </div>
+                          {/* Render the popover here */}
+                          <CalendarPopover
+                            isOpen={isCalendarOpen}
+                            onClose={() => setIsCalendarOpen(false)}
+                            selectedDate={filters.selectedDate}
+                            onDateSelect={(date) => {
+                              setFilters({ ...filters, selectedDate: date });
+                            }}
+                            isFromManageChallenges={false}
+                          />
+                        </div>
+                      </div>
+
+                      {/* Action Buttons */}
+                      <div className="flex flex-col gap-1 lg:col-span-1">
+                        <label className="text-xs font-medium text-gray-500 uppercase tracking-wide opacity-0">
+                          Actions
+                        </label>
+                        <div className="flex gap-1.5">
+                          {(filters.topic !== 'all' ||
+                            filters.dateSort !== 'newest' ||
+                            filters.selectedDate ||
+                            (filters.searchText &&
+                              filters.searchText.trim())) && (
+                            <button
+                              onClick={clearFilters}
+                              className="cursor-pointer px-2 py-1.5 bg-gray-500 text-white rounded-md hover:bg-gray-600 text-xs font-medium transition-colors duration-200 flex-1 lg:flex-none h-8"
+                            >
+                              <span className="lg:hidden">Clear Filters</span>
+                              <span className="hidden lg:inline">
+                                Clear Filters
+                              </span>
+                            </button>
+                          )}
+                          <button
+                            onClick={applyFilters}
+                            className="cursor-pointer px-2 py-1.5 bg-yellow-500 text-black rounded-md hover:bg-yellow-600 text-xs font-medium transition-colors duration-200 flex-1 lg:flex-none h-8"
+                          >
+                            <span className="lg:hidden">Apply Filters</span>
+                            <span className="hidden lg:inline">
+                              Apply Filters
+                            </span>
+                          </button>
+                        </div>
                       </div>
                     </div>
-                  </div>
-
-                  {/* Active Filters Display */}
-                  <div className="flex flex-wrap gap-2">
-                    {filters.topic !== "all" && (
-                      <span className="badge badge-outline badge-sm">
-                        Topic:{" "}
-                        {filters.topic === "general"
-                          ? "General"
-                          : "Daily Challenge"}
-                      </span>
-                    )}
-                    {filters.searchText && filters.searchText.trim() && (
-                      <span className="badge badge-outline badge-sm">
-                        Search: "{filters.searchText.trim()}"
-                      </span>
-                    )}
-                    {filters.dateSort !== "newest" && (
-                      <span className="badge badge-outline badge-sm">
-                        Sort:{" "}
-                        {filters.dateSort === "oldest"
-                          ? "Oldest First"
-                          : "Most Recent"}
-                      </span>
-                    )}
-                    {filters.selectedDate && (
-                      <span className="badge badge-outline badge-sm">
-                        Date:{" "}
-                        {filters.selectedDate instanceof Date
-                          ? filters.selectedDate.toLocaleDateString()
-                          : new Date(filters.selectedDate).toLocaleDateString()}
-                      </span>
-                    )}
-                    {filters.commentSort !== "none" && (
-                      <span className="badge badge-outline badge-sm">
-                        {filters.commentSort === "most-popular"
-                          ? "Most Popular"
-                          : "Least Popular"}
-                      </span>
-                    )}
+
+                    {/* Active Filters Display - Improved Mobile Layout */}
+                    <div className="flex flex-wrap gap-1.5 sm:gap-2">
+                      {filters.topic !== 'all' && (
+                        <span className="badge badge-outline badge-sm flex items-center gap-1 px-2 py-1">
+                          <span className="font-medium text-xs">
+                            {filters.topic === 'general'
+                              ? 'General'
+                              : 'Daily Challenge'}
+                          </span>
+                          <button
+                            type="button"
+                            className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none"
+                            onClick={() => handleRemoveFilter('topic')}
+                            aria-label="Remove topic filter"
+                          >
+                            ×
+                          </button>
+                        </span>
+                      )}
+                      {filters.searchText && filters.searchText.trim() && (
+                        <span className="badge badge-outline badge-sm flex items-center gap-1 px-2 py-1 max-w-[200px]">
+                          <span className="font-medium text-xs truncate">
+                            "{filters.searchText.trim()}"
+                          </span>
+                          <button
+                            type="button"
+                            className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none"
+                            onClick={() => handleRemoveFilter('searchText')}
+                            aria-label="Remove search filter"
+                          >
+                            ×
+                          </button>
+                        </span>
+                      )}
+                      {filters.commentSort != 'none' &&
+                        filters.commentSort.trim() && (
+                          <span className="badge badge-outline badge-sm flex items-center gap-1 px-2 py-1 max-w-[200px]">
+                            <span className="font-medium text-xs truncate">
+                              {formatFilterLabel(filters.commentSort)}
+                            </span>
+                            <button
+                              type="button"
+                              className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none"
+                              onClick={() => handleRemoveFilter('commentSort')}
+                              aria-label="Remove search filter"
+                            >
+                              ×
+                            </button>
+                          </span>
+                        )}
+                      {filters.dateSort !== 'newest' && (
+                        <span className="badge badge-outline badge-sm flex items-center gap-1 px-2 py-1">
+                          <span className="font-medium text-xs">
+                            {filters.dateSort === 'oldest'
+                              ? 'Oldest First'
+                              : 'Most Recent'}
+                          </span>
+                          <button
+                            type="button"
+                            className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none"
+                            onClick={() => handleRemoveFilter('dateSort')}
+                            aria-label="Remove sort filter"
+                          >
+                            ×
+                          </button>
+                        </span>
+                      )}
+                      {filters.selectedDate && (
+                        <span className="badge badge-outline badge-sm flex items-center gap-1 px-2 py-1">
+                          <span className="font-medium text-xs">
+                            {new Date(filters.selectedDate).toLocaleDateString(
+                              'en-US',
+                              {
+                                year: 'numeric',
+                                month: 'short',
+                                day: 'numeric',
+                              }
+                            )}
+                          </span>
+                          <button
+                            type="button"
+                            className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none"
+                            onClick={() => handleRemoveFilter('selectedDate')}
+                            aria-label="Remove date filter"
+                          >
+                            ×
+                          </button>
+                        </span>
+                      )}
+                    </div>
                   </div>
                 </div>
-              </>
+              </div>
             )}
           </div>
@@ -466,5 +691,5 @@
 
         {/* Main Content Area */}
-        <div className="flex-1">
+        <div className="flex-1 overflow-y-auto">
           {loading ? (
             <div className="flex justify-center items-center h-full">
@@ -473,13 +698,13 @@
           ) : (
             <div className="h-full">
-              <div className="overflow-y-auto">
+              <div className="flex items-center">
                 <div className="p-4 sm:p-6 sm:pl-12 w-full">
                   {/* Tab Content */}
                   <div className="animate-fadeIn">
-                    {activeTab === "published" && (
+                    {activeTab === 'published' && (
                       <div>
-                        {filteredApprovedPosts.length > 0 ? (
-                          <div className="grid gap-3 sm:gap-4 md:grid-cols-2 xl:grid-cols-3">
-                            {filteredApprovedPosts.map((post) => (
+                        {approvedPosts.length > 0 ? (
+                          <div className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-2 3xl:grid-cols-4 gap-4 lg:gap-6">
+                            {approvedPosts.map((post) => (
                               <div
                                 key={post.id}
@@ -487,4 +712,21 @@
                               >
                                 <div className="card-body p-3 sm:p-4 lg:p-6 flex flex-col h-full">
+                                  <button
+                                    className="absolute top-1 right-1 p-1 cursor-pointer rounded-full hover:bg-base-300 transition-colors"
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      showModal(
+                                        `Are you sure you want to delete post with title '${post.title}' ? This action cannot be undone.`,
+                                        'confirm',
+                                        post.id
+                                      );
+                                    }}
+                                  >
+                                    <img
+                                      src={trashIcon}
+                                      alt="Delete"
+                                      className="w-3 h-3 sm:w-5 sm:h-5"
+                                    />
+                                  </button>
                                   <div className="flex">
                                     <h3
@@ -496,5 +738,5 @@
                                             state: {
                                               post,
-                                              from: "/dashboard/user-posts",
+                                              from: '/dashboard/user-posts',
                                             },
                                           }
@@ -507,21 +749,26 @@
 
                                   {/* Topic Badge */}
-                                  <div className="mb-2">
+                                  <div className="flex flex-wrap items-center gap-1.5 sm:gap-2 mb-2">
                                     <span
-                                      className={`inline-block text-xs font-semibold px-2 py-1 rounded ${
-                                        post.topic === "general"
-                                          ? "bg-blue-100 text-blue-800"
-                                          : "bg-green-100 text-green-800"
+                                      className={`inline-block text-xs font-semibold px-1.5 py-0.5 rounded ${
+                                        post.topic === 'general'
+                                          ? 'bg-blue-100 text-blue-800'
+                                          : 'bg-green-100 text-green-800'
                                       }`}
                                     >
-                                      {post.topic === "general"
-                                        ? "General"
-                                        : "Daily Challenge"}
+                                      {post.topic === 'general'
+                                        ? 'General'
+                                        : 'Daily Challenge'}
                                     </span>
+                                    {post.challengeTitle && (
+                                      <span className="inline-block bg-yellow-100 text-yellow-800 text-xs font-semibold px-1.5 py-0.5 rounded">
+                                        {post.challengeTitle}
+                                      </span>
+                                    )}
                                   </div>
 
                                   <p className="mt-2 text-gray-400 text-xs sm:text-sm lg:text-base line-clamp-3 flex-grow">
                                     {post.content && post.content.length > 150
-                                      ? post.content.slice(0, 150) + "..."
+                                      ? post.content.slice(0, 150) + '...'
                                       : post.content}
                                   </p>
@@ -542,8 +789,8 @@
                                     {new Date(
                                       post.date_created
-                                    ).toLocaleDateString("en-US", {
-                                      year: "numeric",
-                                      month: "short",
-                                      day: "numeric",
+                                    ).toLocaleDateString('en-US', {
+                                      year: 'numeric',
+                                      month: 'short',
+                                      day: 'numeric',
                                     })}
                                   </div>
@@ -564,4 +811,112 @@
                               </div>
                             ))}
+                            {!loading && (
+                              <div className="md:col-span-2 2xl:col-span-2 3xl:col-span-4 flex justify-center items-center gap-1 sm:gap-2 mt-6 sm:mt-8">
+                                <button
+                                  className="btn btn-sm btn-ghost px-2 sm:px-3"
+                                  onClick={() => {
+                                    const newPage = currentPage - 1;
+                                    searchParams.set(
+                                      'page',
+                                      newPage.toString()
+                                    );
+                                    setCurrentPage(newPage);
+                                    setSearchParams(searchParams);
+                                  }}
+                                  disabled={loading || currentPage === 1}
+                                  title="Previous Page"
+                                >
+                                  ←
+                                </button>
+
+                                {Array.from(
+                                  { length: Math.min(3, totalPages) },
+                                  (_, idx) => (
+                                    <button
+                                      key={idx}
+                                      className={`btn btn-sm px-2 sm:px-3 ${
+                                        currentPage - 1 === idx
+                                          ? 'border-amber-400'
+                                          : 'btn-ghost'
+                                      }`}
+                                      onClick={() => {
+                                        searchParams.set(
+                                          'page',
+                                          (idx + 1).toString()
+                                        );
+                                        setSearchParams(searchParams);
+                                        setCurrentPage(idx + 1);
+                                      }}
+                                      disabled={loading}
+                                    >
+                                      {idx + 1}
+                                    </button>
+                                  )
+                                )}
+
+                                {totalPages > 3 && (
+                                  <span className="px-1 sm:px-2 text-gray-500 text-sm">
+                                    ...
+                                  </span>
+                                )}
+
+                                {currentPage > 2 &&
+                                  currentPage < totalPages - 1 && (
+                                    <button
+                                      className="btn btn-sm border-amber-400 px-2 sm:px-3"
+                                      onClick={() => {
+                                        searchParams.set(
+                                          'page',
+                                          currentPage.toString()
+                                        );
+                                        setSearchParams(searchParams);
+                                      }}
+                                      disabled={loading}
+                                    >
+                                      {currentPage + 1}
+                                    </button>
+                                  )}
+
+                                {totalPages > 3 && (
+                                  <button
+                                    className={`btn btn-sm px-2 sm:px-3 ${
+                                      currentPage === totalPages
+                                        ? 'border-amber-400'
+                                        : 'btn-ghost'
+                                    }`}
+                                    onClick={() => {
+                                      searchParams.set(
+                                        'page',
+                                        totalPages.toString()
+                                      );
+                                      setSearchParams(searchParams);
+                                      setCurrentPage(totalPages);
+                                    }}
+                                    disabled={loading}
+                                  >
+                                    {totalPages}
+                                  </button>
+                                )}
+
+                                <button
+                                  className="btn btn-sm btn-ghost px-2 sm:px-3"
+                                  onClick={() => {
+                                    const newPage = currentPage + 1;
+                                    searchParams.set(
+                                      'page',
+                                      newPage.toString()
+                                    );
+                                    setSearchParams(searchParams);
+                                    setCurrentPage(newPage);
+                                  }}
+                                  disabled={
+                                    loading || currentPage === totalPages
+                                  }
+                                  title="Next Page"
+                                >
+                                  →
+                                </button>
+                              </div>
+                            )}
                           </div>
                         ) : (
@@ -587,14 +942,14 @@
                             <p className="text-xs sm:text-sm text-base-content/40 mt-2">
                               {appliedFilters.searchText ||
-                              appliedFilters.topic !== "all" ||
+                              appliedFilters.topic !== 'all' ||
                               appliedFilters.selectedDate ||
-                              appliedFilters.commentSort !== "none"
-                                ? "Try adjusting your filters to see more posts."
-                                : "Start creating content to see your published posts here!"}
+                              appliedFilters.commentSort !== 'none'
+                                ? 'Try adjusting your filters to see more posts.'
+                                : 'Start creating content to see your published posts here!'}
                             </p>
                             {(appliedFilters.searchText ||
-                              appliedFilters.topic !== "all" ||
+                              appliedFilters.topic !== 'all' ||
                               appliedFilters.selectedDate ||
-                              appliedFilters.commentSort !== "none") && (
+                              appliedFilters.commentSort !== 'none') && (
                               <button
                                 onClick={clearFilters}
@@ -609,67 +964,160 @@
                     )}
 
-                    {activeTab === "pending" && (
+                    {activeTab === 'pending' && (
                       <div>
-                        <div className="flex items-center mb-4 sm:mb-6">
-                          <div className="w-1 h-6 sm:h-8 bg-warning rounded-full mr-2 sm:mr-4"></div>
-                          <h2 className="text-base sm:text-lg lg:text-xl font-semibold text-base-content">
-                            Awaiting Approval
-                          </h2>
-                          <div className="flex-1 h-px bg-gradient-to-r from-[#FFB800]/30 to-transparent ml-2 sm:ml-4"></div>
-                        </div>
-
                         {pendingPosts.length > 0 ? (
-                          <div className="grid gap-3 sm:gap-4 md:grid-cols-2 xl:grid-cols-3">
-                            {pendingPosts.map((post) => (
-                              <div
-                                key={post.id}
-                                className="card bg-base-200 shadow-lg transition-all duration-300 border border-warning/20 relative overflow-hidden h-full flex flex-col"
-                              >
-                                <div className="absolute top-0 left-0 w-full h-1"></div>
-
-                                <div className="card-body p-3 sm:p-4 lg:p-6 flex flex-col h-full">
-                                  <h3 className="card-title text-sm sm:text-base lg:text-lg mb-2 sm:mb-3 text-base-content line-clamp-2">
-                                    {post.title}
-                                  </h3>
-                                  <p className="text-xs sm:text-sm text-base-content/70 mt-2 line-clamp-3 flex-grow">
-                                    {post.content}
-                                  </p>
-
-                                  <div className="flex items-center text-xs sm:text-sm text-base-content/60 mb-3 sm:mb-4 mt-2">
-                                    <svg
-                                      className="w-3 h-3 sm:w-4 sm:h-4 mr-2"
-                                      fill="none"
-                                      stroke="currentColor"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <path
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        strokeWidth="2"
-                                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                                      ></path>
-                                    </svg>
-                                    Submitted{" "}
-                                    {new Date(
-                                      post.created_at
-                                    ).toLocaleDateString("en-US", {
-                                      year: "numeric",
-                                      month: "short",
-                                      day: "numeric",
-                                    })}
-                                  </div>
-
-                                  <div className="card-actions justify-end mt-auto">
-                                    <div className="flex items-center space-x-2">
-                                      <div className="flex items-center text-xs text-warning">
-                                        <div className="w-2 h-2 sm:w-3 sm:h-3 mr-1.5 bg-warning rounded-full animate-pulse"></div>
-                                        Under Review
+                          <>
+                            <div className="grid gap-3 sm:gap-4 md:grid-cols-2 xl:grid-cols-3">
+                              {paginatedPendingPosts.map((post) => (
+                                <div
+                                  key={post.id}
+                                  className="card bg-base-200 shadow-lg transition-all duration-300 border border-warning/20 relative overflow-hidden h-full flex flex-col"
+                                >
+                                  <button
+                                    className="absolute top-1 right-1 p-1 cursor-pointer rounded-full hover:bg-base-300 transition-colors"
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      showModal(
+                                        `Are you sure you want to remove post with title '${post.title}' from review? This action cannot be undone.`,
+                                        'confirmRemoval',
+                                        post.id
+                                      );
+                                    }}
+                                  >
+                                    <img
+                                      src={trashIcon}
+                                      alt="Delete"
+                                      className="w-3 h-3 sm:w-4 sm:h-4"
+                                    />
+                                  </button>
+                                  <div className="absolute top-0 left-0 w-full h-1"></div>
+
+                                  <div className="card-body p-3 sm:p-4 lg:p-6 flex flex-col h-full">
+                                    <h3 className="card-title text-sm sm:text-base lg:text-lg mb-2 sm:mb-3 text-base-content line-clamp-2">
+                                      {post.title}
+                                    </h3>
+                                    <p className="text-xs sm:text-sm text-base-content/70 mt-2 line-clamp-3 flex-grow">
+                                      {post.content}
+                                    </p>
+
+                                    <div className="flex items-center text-xs sm:text-sm text-base-content/60 mb-3 sm:mb-4 mt-2">
+                                      <svg
+                                        className="w-3 h-3 sm:w-4 sm:h-4 mr-2"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        viewBox="0 0 24 24"
+                                      >
+                                        <path
+                                          strokeLinecap="round"
+                                          strokeLinejoin="round"
+                                          strokeWidth="2"
+                                          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                                        ></path>
+                                      </svg>
+                                      Submitted{' '}
+                                      {new Date(
+                                        post.created_at
+                                      ).toLocaleDateString('en-US', {
+                                        year: 'numeric',
+                                        month: 'short',
+                                        day: 'numeric',
+                                      })}
+                                    </div>
+
+                                    <div className="card-actions justify-end mt-auto">
+                                      <div className="flex items-center space-x-2">
+                                        <div className="flex items-center text-xs text-warning">
+                                          <div className="w-2 h-2 sm:w-3 sm:h-3 mr-1.5 bg-warning rounded-full animate-pulse"></div>
+                                          Under Review
+                                        </div>
                                       </div>
                                     </div>
                                   </div>
                                 </div>
+                              ))}
+                            </div>
+                            {pendingTotalPages >= 1 && (
+                              <div className="md:col-span-2 xl:col-span-3 flex justify-center items-center gap-1 sm:gap-2 mt-6 sm:mt-8">
+                                <button
+                                  className="btn btn-sm btn-ghost px-2 sm:px-3"
+                                  onClick={() =>
+                                    handlePendingPageChange(
+                                      pendingCurrentPage - 1
+                                    )
+                                  }
+                                  disabled={pendingCurrentPage === 1}
+                                  title="Previous Page"
+                                >
+                                  ←
+                                </button>
+                                {Array.from(
+                                  { length: Math.min(3, pendingTotalPages) },
+                                  (_, idx) => (
+                                    <button
+                                      key={idx}
+                                      className={`btn btn-sm px-2 sm:px-3 ${
+                                        pendingCurrentPage === idx + 1
+                                          ? 'border-amber-400'
+                                          : 'btn-ghost'
+                                      }`}
+                                      onClick={() =>
+                                        handlePendingPageChange(idx + 1)
+                                      }
+                                    >
+                                      {idx + 1}
+                                    </button>
+                                  )
+                                )}
+                                {pendingTotalPages > 3 && (
+                                  <span className="px-1 sm:px-2 text-gray-500 text-sm">
+                                    ...
+                                  </span>
+                                )}
+                                {pendingCurrentPage > 2 &&
+                                  pendingCurrentPage <
+                                    pendingTotalPages - 1 && (
+                                    <button
+                                      className="btn btn-sm border-amber-400 px-2 sm:px-3"
+                                      onClick={() =>
+                                        handlePendingPageChange(
+                                          pendingCurrentPage
+                                        )
+                                      }
+                                    >
+                                      {pendingCurrentPage}
+                                    </button>
+                                  )}
+
+                                {pendingTotalPages > 3 && (
+                                  <button
+                                    className={`btn btn-sm px-2 sm:px-3 ${
+                                      pendingCurrentPage === pendingTotalPages
+                                        ? 'border-amber-400'
+                                        : 'btn-ghost'
+                                    }`}
+                                    onClick={() =>
+                                      handlePendingPageChange(pendingTotalPages)
+                                    }
+                                  >
+                                    {pendingTotalPages}
+                                  </button>
+                                )}
+                                <button
+                                  className="btn btn-sm btn-ghost px-2 sm:px-3"
+                                  onClick={() =>
+                                    handlePendingPageChange(
+                                      pendingCurrentPage + 1
+                                    )
+                                  }
+                                  disabled={
+                                    pendingCurrentPage === pendingTotalPages
+                                  }
+                                  title="Next Page"
+                                >
+                                  →
+                                </button>
                               </div>
-                            ))}
-                          </div>
+                            )}
+                          </>
                         ) : (
                           <div className="text-center py-8 sm:py-12">
@@ -707,4 +1155,137 @@
         </div>
       </div>
+      {modal.isOpen && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-opacity-50 backdrop-blur-sm p-4"
+          aria-labelledby="modal-title"
+          role="dialog"
+          aria-modal="true"
+        >
+          <div className="bg-base-200 rounded-lg shadow-xl p-4 sm:p-6 w-full max-w-sm sm:max-w-md mx-4">
+            <div className="flex items-center gap-3 mb-4">
+              {(modal.type === 'confirm' ||
+                modal.type === 'confirmRemoval') && (
+                <div className="w-8 h-8 rounded-full bg-error flex items-center justify-center shrink-0">
+                  <svg
+                    className="w-5 h-5 text-error-content"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                    ></path>
+                  </svg>
+                </div>
+              )}
+              {modal.type === 'success' && (
+                <div className="w-8 h-8 rounded-full bg-success flex items-center justify-center shrink-0">
+                  <svg
+                    className="w-5 h-5 text-success-content"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M5 13l4 4L19 7"
+                    ></path>
+                  </svg>
+                </div>
+              )}
+              {modal.type === 'error' && (
+                <div className="w-8 h-8 rounded-full bg-error flex items-center justify-center shrink-0">
+                  <svg
+                    className="w-5 h-5 text-error-content"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M6 18L18 6M6 6l12 12"
+                    ></path>
+                  </svg>
+                </div>
+              )}
+              <h3 className="font-bold text-base sm:text-lg" id="modal-title">
+                {modal.type === 'confirm'
+                  ? 'Delete Post'
+                  : modal.type === 'success'
+                  ? 'Success'
+                  : modal.type === 'confirmRemoval'
+                  ? 'Remove Post'
+                  : 'Error'}
+              </h3>
+            </div>
+            <p className="py-3 sm:py-4 text-sm sm:text-base">{modal.message}</p>
+            <div className="flex justify-end gap-2 sm:gap-3 mt-3 sm:mt-4">
+              {modal.type === 'confirm' ? (
+                <>
+                  <button
+                    className="btn btn-ghost btn-sm sm:btn-md"
+                    onClick={closeModal}
+                    disabled={isDeleting}
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    className="btn btn-error btn-sm sm:btn-md"
+                    onClick={confirmDelete}
+                    disabled={isDeleting}
+                  >
+                    {isDeleting ? (
+                      <>
+                        <span className="loading loading-spinner loading-sm mr-2"></span>
+                        Deleting...
+                      </>
+                    ) : (
+                      'Delete'
+                    )}
+                  </button>
+                </>
+              ) : modal.type === 'confirmRemoval' ? (
+                <>
+                  <button
+                    className="btn btn-ghost btn-sm sm:btn-md"
+                    onClick={closeModal}
+                    disabled={isDeleting}
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    className="btn btn-error btn-sm sm:btn-md"
+                    onClick={confirmRemoval}
+                    disabled={isDeleting}
+                  >
+                    {isDeleting ? (
+                      <>
+                        <span className="loading loading-spinner loading-sm mr-2"></span>
+                        Removing...
+                      </>
+                    ) : (
+                      'Remove'
+                    )}
+                  </button>
+                </>
+              ) : (
+                <button
+                  className="btn btn-primary btn-sm sm:btn-md"
+                  onClick={closeModal}
+                >
+                  OK
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
Index: client/src/services/forumService.js
===================================================================
--- client/src/services/forumService.js	(revision 420d7b9b1837b208cbebd6615b98ec8012e3d42e)
+++ client/src/services/forumService.js	(revision 909821d87b77e470a89d64f5600d2259fb44dc15)
@@ -1,3 +1,3 @@
-import apiClient from "./apiClient";
+import apiClient from './apiClient';
 
 export const getForumPosts = async (page, limit, filters = null) => {
@@ -13,5 +13,5 @@
   if (filters) {
     // Add topic filter - make sure it's really topic=daily-challenge, not topic=daily%2Dchallenge
-    if (filters.topic && filters.topic !== "all") {
+    if (filters.topic && filters.topic !== 'all') {
       url += `&topic=${filters.topic}`;
     }
@@ -36,13 +36,13 @@
           // Log combined filter details when using specific date with other filters
         } else {
-          console.error("Invalid date object:", filters.selectedDate);
+          console.error('Invalid date object:', filters.selectedDate);
         }
       } catch (err) {
-        console.error("Error formatting date:", err, filters.selectedDate);
+        console.error('Error formatting date:', err, filters.selectedDate);
       }
     }
 
     // Add comment sort filter
-    if (filters.commentSort && filters.commentSort !== "none") {
+    if (filters.commentSort && filters.commentSort !== 'none') {
       url += `&commentSort=${filters.commentSort}`;
     }
@@ -71,10 +71,44 @@
 };
 export const createForumPost = async (postData) => {
-  return await apiClient.post("/forum/posts", postData);
+  return await apiClient.post('/forum/posts', postData);
 };
-export const getAllPostsByUser = async () => {
-  return await apiClient.get("/forum/user-posts");
+export const getAllPostsByUser = async (page = 1, limit = 20, filters = {}) => {
+  page = Number(page) || 1;
+  limit = Number(limit) || 20;
+
+  const timestamp = new Date().getTime();
+  let url = `/forum/user-posts?page=${page}&limit=${limit}&_t=${timestamp}`;
+
+  if (filters) {
+    if (filters.topic && filters.topic !== 'all') {
+      url += `&topic=${filters.topic}`;
+    }
+
+    if (filters.dateSort && filters.dateSort !== 'newest') {
+      url += `&sort=${filters.dateSort}`;
+    }
+    if (filters.selectedDate) {
+      const dateObj = new Date(String(filters.selectedDate));
+
+      if (!isNaN(dateObj.getTime())) {
+        url += `&date=${dateObj}`;
+      }
+    }
+    if (filters.commentSort && filters.commentSort !== 'none') {
+      url += `&commentSort=${filters.commentSort}`;
+    }
+    if (filters.searchText && filters.searchText.trim()) {
+      url += `&search=${encodeURIComponent(filters.searchText.trim())}`;
+    }
+  }
+
+  try {
+    const apiResponse = await apiClient.get(url);
+    return apiResponse;
+  } catch (err) {
+    console.error(`API error for ${url}:`, err);
+    throw err;
+  }
 };
-
 //Comment functions
 
@@ -83,5 +117,5 @@
 };
 export const createComment = async (commentData) => {
-  return apiClient.post("/forum/comments", commentData);
+  return apiClient.post('/forum/comments', commentData);
 };
 export const deleteComment = async (commentId) => {
Index: client/src/services/taskService.js
===================================================================
--- client/src/services/taskService.js	(revision 420d7b9b1837b208cbebd6615b98ec8012e3d42e)
+++ client/src/services/taskService.js	(revision 909821d87b77e470a89d64f5600d2259fb44dc15)
@@ -1,9 +1,9 @@
-import apiClient from "./apiClient";
+import apiClient from './apiClient';
 
 export const getTaskForDate = async () => {
-  return await apiClient.get(`/task`);
+  return await apiClient.get(`/task/today`);
 };
 export const getTasksForForumPost = async () => {
-  return await apiClient.get("/task/forum-post");
+  return await apiClient.get('/task/forum-post');
 };
 export const getTestCaseForTask = async (taskId) => {
@@ -26,6 +26,23 @@
 };
 
-export const getAllTasks = async (page = 1, pageSize = 10) => {
-  return await apiClient.get(`/task/all?page=${page}&pageSize=${pageSize}`);
+export const getChallenges = async (page, limit, filters = null) => {
+  page = Number(page) || 0;
+  limit = Number(limit) || 20;
+  const timestamp = new Date().getTime();
+  let url = `/task?page=${page}&limit=${limit}&_t=${timestamp}`;
+  const defaultFilters = {
+    searchText: '',
+    dateSort: 'newest',
+    selectedDate: '',
+  };
+  if (filters) {
+    for (const [key, value] of Object.entries(filters)) {
+      if (value && value.toString() !== defaultFilters[key].toString()) {
+        url += `&${key}=${value}`;
+      }
+    }
+  }
+
+  return await apiClient.get(url.toString());
 };
 
