Index: client/src/Dashboard/DashboardLayout.jsx
===================================================================
--- client/src/Dashboard/DashboardLayout.jsx	(revision 1e3d82503382ae48646e42a0bf7b8549a7af9ca5)
+++ client/src/Dashboard/DashboardLayout.jsx	(revision 5e94396ee2464be567b7a88697d50c651469146b)
@@ -6,6 +6,7 @@
   return (
     <div data-theme="luxury" className="dashboard flex h-screen bg-base-100">
-      <Navbar></Navbar>
-      <div className="h-full w-full overflow-y-auto">
+      <Navbar />
+      {/* Main content area */}
+      <div className="flex-1 h-full overflow-y-auto lg:ml-0 pt-20 lg:pt-0">
         <Outlet />
       </div>
Index: client/src/Dashboard/components/ManageChallenges.jsx
===================================================================
--- client/src/Dashboard/components/ManageChallenges.jsx	(revision 1e3d82503382ae48646e42a0bf7b8549a7af9ca5)
+++ client/src/Dashboard/components/ManageChallenges.jsx	(revision 5e94396ee2464be567b7a88697d50c651469146b)
@@ -115,5 +115,5 @@
     try {
       setLoading(true);
-
+      console.log(challengeId);
       await deleteTask(challengeId);
       setChallenges(
@@ -151,20 +151,17 @@
 
   return (
-    <div className="min-h-screen bg-base-100 p-3 sm:p-4 lg:p-6">
-      <h1 className="text-2xl sm:text-3xl font-bold ml-2 sm:ml-4 lg:ml-8 mb-6 sm:mb-8 lg:mb-12">
-        Manage Challenges
-      </h1>
-      <div className="flex flex-col lg:flex-row gap-4 sm:gap-6 lg:gap-8 ml-2 sm:ml-4 lg:ml-8 mx-auto">
+    <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 lg:w-[310px] flex-shrink-0 order-1 lg:order-1">
+        <div className="w-full md:w-[310px] flex-shrink-0 ">
           <div className="sticky top-6">
-            <div className="card bg-base-200 shadow-md p-3 sm:p-4">
-              <h2 className="font-semibold text-base sm:text-lg mb-3 sm:mb-4">
-                Search by date:
-              </h2>
-
+            <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-3 sm:mb-4"
+                class="cally bg-base-100 border border-base-300 shadow-md rounded-box w-full mb-4"
               >
                 <svg
@@ -195,6 +192,7 @@
               </calendar-date>
 
+              {/* Search button */}
               <button
-                className="btn btn-block border-amber-400 btn-sm sm:btn-md"
+                className="btn btn-block border-amber-400"
                 onClick={() => {
                   if (calendarRef.current) {
@@ -213,5 +211,5 @@
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  className="h-4 w-4 sm:h-5 sm:w-5 mr-2"
+                  className="h-5 w-5 mr-2"
                   fill="none"
                   viewBox="0 0 24 24"
@@ -228,13 +226,13 @@
               </button>
             </div>
-            <div className="mt-4 sm:mt-6 w-full">
+            <div className="mt-6 w-full">
               {/* Add new challenge button */}
               <button
-                className="btn btn-block btn-outline border-amber-400 gap-2 btn-sm sm:btn-md"
+                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-4 h-4 sm:w-5 sm:h-5"
+                  className="w-5 h-5"
                   viewBox="0 0 24 24"
                   fill="none"
@@ -244,6 +242,5 @@
                   <path d="M12 5v14M5 12h14" />
                 </svg>
-                <span className="hidden sm:inline">Add New Challenge</span>
-                <span className="sm:hidden">Add Challenge</span>
+                Add New Challenge
               </button>
             </div>
@@ -252,16 +249,16 @@
 
         {/* Main content area */}
-        <div className="flex-1 order-2 lg:order-2">
+        <div className="flex-1">
           {loading ? (
-            <div className="flex justify-center items-center h-32 sm:h-48 lg:h-64">
-              <span className="loading loading-spinner loading-md sm:loading-lg"></span>
+            <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-4 sm:space-y-6">
+            <div className="space-y-6">
               {challenges.map((challenge) => (
                 <div key={challenge.id} className="card bg-base-200 shadow-md">
-                  <div className="card-body p-3 sm:p-4 lg:p-6">
-                    <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 sm:gap-4">
-                      <h2 className="card-title text-lg sm:text-xl font-bold line-clamp-2">
+                  <div className="card-body">
+                    <div className="flex justify-between items-center">
+                      <h2 className="card-title text-xl font-bold">
                         {challenge.title
                           .split("-")
@@ -272,39 +269,22 @@
                           .join(" ")}
                       </h2>
-                      <div className="badge badge-tertiary p-2 sm:p-4 text-xs sm:text-sm whitespace-nowrap">
+                      <div className="badge badge-tertiary p-4">
                         {new Date(challenge.solving_date).toLocaleDateString()}
                       </div>
                     </div>
 
-                    <p className="text-base-content/80 mt-2 text-sm sm:text-base line-clamp-2 sm:line-clamp-3">
+                    <p className="text-base-content/80 mt-2 line-clamp-2">
                       {challenge.content}
                     </p>
 
                     {challenge.examples && challenge.examples.length > 0 && (
-                      <div className="mt-3 sm:mt-4 card bg-base-300 p-2 sm:p-3">
-                        <h3 className="font-large mb-2 text-sm sm:text-base">
-                          Examples:
-                        </h3>
-                        <div className=" flex flex-col md:flex-row md:gap-20 space-y-2 sm:space-y-3 md:flex-row md:space-y-0 md:space-x-4 w-full max-w-[80%]">
+                      <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="break-words font-bold whitespace-pre-line "
-                            >
+                            <div key={index} className="font-mono text-sm">
                               <p className="pl-2 border-l-2 border-amber-400 mt-1">
-                                <span className="underline ">Input: </span>
-                                {example.input &&
-                                  example.input.includes("\n") && <br />}
-                                {(example.input &&
-                                  example.input.replace(/^"|"$/g, "")) ||
-                                  "N/A"}
-                                <br />
-                                <br />
-                                <span className="underline">Output: </span>
-                                {example.output &&
-                                  example.output.includes("\n") && <br />}
-                                {(example.output &&
-                                  example.output.replace(/^"|"$/g, "")) ||
-                                  "N/A"}
+                                Input: "{example.input || "N/A"}" <br />
+                                Output: "{example.output || "N/A"}"
                               </p>
                             </div>
@@ -314,7 +294,7 @@
                     )}
 
-                    <div className="card-actions flex-col sm:flex-row justify-between mt-3 sm:mt-4 gap-2">
+                    <div className="card-actions justify-between mt-4">
                       <button
-                        className="btn btn-sm btn-tertiary w-full sm:w-auto"
+                        className="btn btn-sm btn-teritary"
                         onClick={() => fetchTestCases(challenge.id)}
                       >
@@ -325,5 +305,5 @@
 
                       <button
-                        className="btn btn-sm btn-error btn-outline w-full sm:w-auto"
+                        className="btn btn-sm btn-error btn-outline"
                         onClick={() =>
                           showModal(
@@ -340,22 +320,20 @@
                     {expandedChallenge === challenge.id &&
                       challenge.test_cases && (
-                        <div className="mt-3 sm:mt-4 card bg-base-300 p-3 sm:p-4">
-                          <h3 className="font-medium mb-2 text-sm sm:text-base">
-                            Test Cases:
-                          </h3>
-                          <div className="space-y-3 sm:space-y-4 max-h-48 sm:max-h-60 overflow-y-auto">
+                        <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 p-2 sm:p-3"
+                                className="card bg-base-100 max-w-250 p-3"
                               >
-                                <h4 className="font-medium text-sm sm:text-base">
+                                <h4 className="font-medium">
                                   Test Case {index + 1}
                                 </h4>
-                                <div className="font-mono text-xs sm:text-sm">
+                                <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-32 sm:max-h-40 overflow-y-auto">
-                                      <pre className="bg-base-300 p-2 rounded whitespace-pre-wrap break-words w-full overflow-hidden text-xs sm:text-sm">
+                                    <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>
@@ -364,6 +342,6 @@
                                   <div className="pl-2 border-l-2 border-green-400 mt-2">
                                     <p>Expected Output:</p>
-                                    <div className="max-h-32 sm:max-h-40 overflow-y-auto">
-                                      <pre className="bg-base-300 p-2 rounded whitespace-pre-wrap break-words w-full overflow-hidden text-xs sm:text-sm">
+                                    <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>
@@ -379,26 +357,22 @@
                 </div>
               ))}
-              {challenges.length == 1 && (
-                <button
-                  className="block mx-auto cursor-pointer hover:underline text-sm sm:text-base"
-                  onClick={() => handleViewAll()}
-                >
-                  View all challenges
-                </button>
-              )}
+              <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-12 sm:py-16">
-              <p className="text-sm sm:text-base">
-                No available challenges for the selected date.
-              </p>
+            <div className="text-center text-base-content/60 py-16">
+              <p>No available challenges for the selected date.</p>
             </div>
           )}
           {!loading && challenges.length > 1 && (
-            <div className="flex flex-wrap justify-center gap-1 sm:gap-2 mt-6 sm:mt-8">
+            <div className="flex justify-center gap-2 mt-8">
               {Array.from({ length: totalPages }, (_, idx) => (
                 <button
                   key={idx + 1}
-                  className={`btn btn-xs sm:btn-sm ${
+                  className={`btn btn-sm ${
                     currentPage === idx + 1 ? "border-amber-400" : "btn-ghost"
                   }`}
@@ -414,18 +388,18 @@
       </div>
 
-      {/* Modal */}
+      {/* Modal (unchanged) */}
       {modal.isOpen && (
         <div
-          className="fixed inset-0 z-50 flex items-center justify-center  bg-opacity-50 backdrop-blur-sm p-4"
+          className="fixed inset-0 z-50 flex items-center justify-center bg-opacity-50 backdrop-blur-sm"
           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="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" && (
-                <div className="w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-error flex items-center justify-center shrink-0">
+                <div className="w-8 h-8 rounded-full bg-error flex items-center justify-center shrink-0">
                   <svg
-                    className="w-4 h-4 sm:w-5 sm:h-5 text-error-content"
+                    className="w-5 h-5 text-error-content"
                     fill="none"
                     stroke="currentColor"
@@ -442,7 +416,7 @@
               )}
               {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">
+                <div className="w-8 h-8 rounded-full bg-success flex items-center justify-center shrink-0">
                   <svg
-                    className="w-4 h-4 sm:w-5 sm:h-5 text-success-content"
+                    className="w-5 h-5 text-success-content"
                     fill="none"
                     stroke="currentColor"
@@ -458,14 +432,14 @@
                 </div>
               )}
-              <h3 className="font-bold text-base sm:text-lg" id="modal-title">
+              <h3 className="font-bold text-lg" id="modal-title">
                 Delete Challenge
               </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">
+            <p className="py-4">{modal.message}</p>
+            <div className="flex justify-end gap-3 mt-4">
               {modal.type === "confirm" ? (
                 <>
                   <button
-                    className="btn btn-ghost btn-sm sm:btn-md"
+                    className="btn btn-ghost"
                     onClick={closeModal}
                     disabled={loading}
@@ -474,5 +448,5 @@
                   </button>
                   <button
-                    className="btn btn-error btn-sm sm:btn-md"
+                    className="btn btn-error"
                     onClick={confirmDelete}
                     disabled={loading}
@@ -489,8 +463,5 @@
                 </>
               ) : (
-                <button
-                  className="btn btn-primary btn-sm sm:btn-md"
-                  onClick={closeModal}
-                >
+                <button className="btn btn-primary" onClick={closeModal}>
                   OK
                 </button>
Index: client/src/Dashboard/components/Navbar.jsx
===================================================================
--- client/src/Dashboard/components/Navbar.jsx	(revision 1e3d82503382ae48646e42a0bf7b8549a7af9ca5)
+++ client/src/Dashboard/components/Navbar.jsx	(revision 5e94396ee2464be567b7a88697d50c651469146b)
@@ -1,3 +1,3 @@
-import React from "react";
+import React, { useState } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import logoIcon from "../../assets/images/logoIcon.png";
@@ -11,4 +11,5 @@
   const location = useLocation();
   const { user } = useAuth();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   const isActive = (path) => {
@@ -65,211 +66,483 @@
 
   return (
-    <nav className="dashboard__navbar w-80 min-h-screen bg-base-200 text-base-content border-r border-base-content/10 flex flex-col">
-      <div className="p-4 border-b border-base-content/10">
-        <p
-          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" />
-        </p>
+    <>
+      {/* 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">
+          <p
+            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" />
+          </p>
+        </div>
+
+        <div className="flex-1 py-8">
+          <ul className="menu menu-lg 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"
+                }`}
+                onClick={() => navigate("/dashboard")}
+              >
+                <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="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+                </svg>
+                Challenge of the Day
+              </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"
+                }`}
+                onClick={() => navigate("/dashboard/leaderboard")}
+              >
+                <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="M18 20V10M12 20V4M6 20v-6"></path>
+                </svg>
+                Leaderboard
+              </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"
+                }`}
+                onClick={() => navigate("/dashboard/forum")}
+              >
+                <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="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>
+                Forum
+              </button>
+            </li>
+            <li>
+              <button
+                className={`flex items-center gap-4 px-4 py-3 rounded-lg transition-colors ${
+                  isActive("/dashboard/user-posts")
+                    ? "bg-[#FFB800] text-black"
+                    : "hover:bg-[#FFB800] hover:text-black"
+                }`}
+                onClick={() => navigate("/dashboard/user-posts")}
+              >
+                <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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                  <polyline points="14 2 14 8 20 8"></polyline>
+                  <line x1="16" y1="13" x2="8" y2="13"></line>
+                  <line x1="16" y1="17" x2="8" y2="17"></line>
+                  <polyline points="10 9 9 9 8 9"></polyline>
+                </svg>
+                Your Forum Posts
+              </button>
+            </li>
+            {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")}
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="w-5 h-5"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                    >
+                      <rect
+                        x="3"
+                        y="3"
+                        width="18"
+                        height="18"
+                        rx="2"
+                        ry="2"
+                      ></rect>
+                      <line x1="3" y1="9" x2="21" y2="9"></line>
+                      <line x1="3" y1="15" x2="21" y2="15"></line>
+                      <line x1="9" y1="3" x2="9" y2="21"></line>
+                      <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")}
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="w-5 h-5"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                    >
+                      <rect
+                        x="3"
+                        y="3"
+                        width="18"
+                        height="18"
+                        rx="2"
+                        ry="2"
+                      ></rect>
+                      <line x1="3" y1="9" x2="21" y2="9"></line>
+                      <line x1="3" y1="15" x2="21" y2="15"></line>
+                      <line x1="9" y1="3" x2="9" y2="21"></line>
+                      <line x1="15" y1="3" x2="15" y2="21"></line>
+                    </svg>
+                    Manage Challenges
+                  </button>
+                </li>
+              </>
+            )}
+          </ul>
+        </div>
+
+        <div className="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"
+            }`}
+            onClick={() => navigate("/dashboard/profile")}
+          >
+            <img
+              src={pp}
+              alt="Profile"
+              className="w-10 h-10 rounded-full border-2 border-base-content/10"
+            />
+            <div className="flex flex-col items-start cursor-pointer">
+              <span className="font-medium text-left">
+                {user && user.username}
+              </span>
+              <span className="text-sm text-base-content/70 mt-2">
+                {user && <RankBadgeNav rankName={user.rank} size="sm" />}
+              </span>
+            </div>
+          </button>
+        </div>
+      </nav>
+
+      {/* Mobile Top Menu Bar - visible on tablet and below */}
+      <div className="lg:hidden fixed top-0 left-0 right-0 z-50 bg-base-200 border-b border-base-content/10">
+        {/* ...existing mobile menu code... */}
+        <div className="flex items-center justify-between p-4">
+          <div
+            onClick={() => navigate("/")}
+            className="flex items-center gap-2 cursor-pointer"
+          >
+            <img src={logoIcon} alt="Logo" className="w-10 h-auto" />
+            <img src={logoText} alt="Logo Text" className="w-24 h-auto" />
+          </div>
+
+          <button
+            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+            className="p-2 rounded-lg hover:bg-base-300 transition-colors"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="w-6 h-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              {isMobileMenuOpen ? (
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              ) : (
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
+              )}
+            </svg>
+          </button>
+        </div>
+
+        {/* Mobile Menu Dropdown */}
+        {isMobileMenuOpen && (
+          <div className="border-t border-base-content/10 bg-base-200">
+            <div className="max-h-[calc(100vh-80px)] overflow-y-auto">
+              <ul className="p-4 space-y-2">
+                <li>
+                  <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"
+                    }`}
+                    onClick={() => {
+                      navigate("/dashboard");
+                      setIsMobileMenuOpen(false);
+                    }}
+                  >
+                    <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="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+                    </svg>
+                    Challenge of the Day
+                  </button>
+                </li>
+                <li>
+                  <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"
+                    }`}
+                    onClick={() => {
+                      navigate("/dashboard/leaderboard");
+                      setIsMobileMenuOpen(false);
+                    }}
+                  >
+                    <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="M18 20V10M12 20V4M6 20v-6"></path>
+                    </svg>
+                    Leaderboard
+                  </button>
+                </li>
+                <li>
+                  <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"
+                    }`}
+                    onClick={() => {
+                      navigate("/dashboard/forum");
+                      setIsMobileMenuOpen(false);
+                    }}
+                  >
+                    <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="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>
+                    Forum
+                  </button>
+                </li>
+                <li>
+                  <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"
+                    }`}
+                    onClick={() => {
+                      navigate("/dashboard/user-posts");
+                      setIsMobileMenuOpen(false);
+                    }}
+                  >
+                    <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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                      <polyline points="14 2 14 8 20 8"></polyline>
+                      <line x1="16" y1="13" x2="8" y2="13"></line>
+                      <line x1="16" y1="17" x2="8" y2="17"></line>
+                      <polyline points="10 9 9 9 8 9"></polyline>
+                    </svg>
+                    Your Forum Posts
+                  </button>
+                </li>
+                {user && user.isModerator && (
+                  <>
+                    <hr className="my-2" />
+                    <li>
+                      <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"
+                        }`}
+                        onClick={() => {
+                          navigate("/dashboard/manage-posts");
+                          setIsMobileMenuOpen(false);
+                        }}
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="w-5 h-5"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                        >
+                          <rect
+                            x="3"
+                            y="3"
+                            width="18"
+                            height="18"
+                            rx="2"
+                            ry="2"
+                          ></rect>
+                          <line x1="3" y1="9" x2="21" y2="9"></line>
+                          <line x1="3" y1="15" x2="21" y2="15"></line>
+                          <line x1="9" y1="3" x2="9" y2="21"></line>
+                          <line x1="15" y1="3" x2="15" y2="21"></line>
+                        </svg>
+                        Manage Posts
+                      </button>
+                    </li>
+                    <li>
+                      <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"
+                        }`}
+                        onClick={() => {
+                          navigate("/dashboard/manage-challenges");
+                          setIsMobileMenuOpen(false);
+                        }}
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="w-5 h-5"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                        >
+                          <rect
+                            x="3"
+                            y="3"
+                            width="18"
+                            height="18"
+                            rx="2"
+                            ry="2"
+                          ></rect>
+                          <line x1="3" y1="9" x2="21" y2="9"></line>
+                          <line x1="3" y1="15" x2="21" y2="15"></line>
+                          <line x1="9" y1="3" x2="9" y2="21"></line>
+                          <line x1="15" y1="3" x2="15" y2="21"></line>
+                        </svg>
+                        Manage Challenges
+                      </button>
+                    </li>
+                  </>
+                )}
+
+                {/* Profile section in mobile menu */}
+                <hr className="my-2" />
+                <li>
+                  <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"
+                    }`}
+                    onClick={() => {
+                      navigate("/dashboard/profile");
+                      setIsMobileMenuOpen(false);
+                    }}
+                  >
+                    <img
+                      src={pp}
+                      alt="Profile"
+                      className="w-8 h-8 rounded-full border-2 border-base-content/10"
+                    />
+                    <div className="flex flex-col items-start">
+                      <span className="font-medium text-left">
+                        {user && user.username}
+                      </span>
+                      <span className="text-sm text-base-content/70">
+                        {user && (
+                          <RankBadgeNav rankName={user.rank} size="sm" />
+                        )}
+                      </span>
+                    </div>
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+        )}
       </div>
-
-      <div className="flex-1 py-8">
-        <ul className="menu menu-lg 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"
-              }`}
-              onClick={() => navigate("/dashboard")}
-            >
-              <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="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
-              </svg>
-              Challenge of the Day
-            </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"
-              }`}
-              onClick={() => navigate("/dashboard/leaderboard")}
-            >
-              <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="M18 20V10M12 20V4M6 20v-6"></path>
-              </svg>
-              Leaderboard
-            </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"
-              }`}
-              onClick={() => navigate("/dashboard/forum")}
-            >
-              <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="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>
-              Forum
-            </button>
-          </li>
-          <li>
-            <button
-              className={`flex items-center gap-4 px-4 py-3 rounded-lg transition-colors ${
-                isActive("/dashboard/user-posts")
-                  ? "bg-[#FFB800] text-black"
-                  : "hover:bg-[#FFB800] hover:text-black"
-              }`}
-              onClick={() => navigate("/dashboard/user-posts")}
-            >
-              <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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
-                <polyline points="14 2 14 8 20 8"></polyline>
-                <line x1="16" y1="13" x2="8" y2="13"></line>
-                <line x1="16" y1="17" x2="8" y2="17"></line>
-                <polyline points="10 9 9 9 8 9"></polyline>
-              </svg>
-              Your Forum Posts
-            </button>
-          </li>
-          {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")}
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="w-5 h-5"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                  >
-                    <rect
-                      x="3"
-                      y="3"
-                      width="18"
-                      height="18"
-                      rx="2"
-                      ry="2"
-                    ></rect>
-                    <line x1="3" y1="9" x2="21" y2="9"></line>
-                    <line x1="3" y1="15" x2="21" y2="15"></line>
-                    <line x1="9" y1="3" x2="9" y2="21"></line>
-                    <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")}
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="w-5 h-5"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                  >
-                    <rect
-                      x="3"
-                      y="3"
-                      width="18"
-                      height="18"
-                      rx="2"
-                      ry="2"
-                    ></rect>
-                    <line x1="3" y1="9" x2="21" y2="9"></line>
-                    <line x1="3" y1="15" x2="21" y2="15"></line>
-                    <line x1="9" y1="3" x2="9" y2="21"></line>
-                    <line x1="15" y1="3" x2="15" y2="21"></line>
-                  </svg>
-                  Manage Challenges
-                </button>
-              </li>
-            </>
-          )}
-        </ul>
-      </div>
-
-      <div className="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"
-          }`}
-          onClick={() => navigate("/dashboard/profile")}
-        >
-          <img
-            src={pp}
-            alt="Profile"
-            className="w-10 h-10 rounded-full border-2 border-base-content/10"
-          />
-          <div className="flex flex-col items-start cursor-pointer">
-            <span className="font-medium text-left">
-              {user && user.username}
-            </span>
-            <span className="text-sm text-base-content/70 mt-2">
-              {user && <RankBadgeNav rankName={user.rank} size="sm" />}
-            </span>
-          </div>
-        </button>
-      </div>
-    </nav>
+    </>
   );
 }