Index: client/src/CreatePost/CreatePost.jsx
===================================================================
--- client/src/CreatePost/CreatePost.jsx	(revision 506e3de48733205c35fd4cacf80862431905d04f)
+++ client/src/CreatePost/CreatePost.jsx	(revision f8d8c7f9fc257803f2587791a75fade17bb8194f)
@@ -124,17 +124,20 @@
 
   return (
-    <div data-theme="luxury" className="min-h-screen bg-base-100 p-6">
-      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
-        <div className="flex items-center justify-between mb-8">
-          <h2 className="text-3xl font-bold text-base-content">
+    <div
+      data-theme="luxury"
+      className="min-h-screen bg-base-100 p-3 sm:p-4 lg:p-6"
+    >
+      <div className="max-w-4xl mx-auto px-2 sm:px-4 lg:px-8 w-full">
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-6 sm:mb-8 gap-4">
+          <h2 className="text-2xl sm:text-3xl font-bold text-base-content">
             Create a Post
           </h2>
           <button
             onClick={() => navigate("/dashboard/forum")}
-            className="btn btn-outline gap-2"
+            className="btn btn-outline btn-sm sm:btn-md gap-2 w-full sm:w-auto"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              className="w-5 h-5"
+              className="w-4 h-4 sm:w-5 sm:h-5"
               viewBox="0 0 24 24"
               fill="none"
@@ -152,5 +155,5 @@
           className="card bg-base-200 shadow-xl w-full relative"
         >
-          <div className="absolute top-6 right-6 z-10">
+          <div className="absolute top-4 sm:top-6 right-4 sm:right-6 z-10">
             <div className="dropdown dropdown-hover dropdown-end">
               <div
@@ -161,5 +164,5 @@
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  className="w-5 h-5"
+                  className="w-4 h-4 sm:w-5 sm:h-5"
                   fill="none"
                   viewBox="0 0 24 24"
@@ -176,9 +179,11 @@
               <div
                 tabIndex={0}
-                className="dropdown-content z-[1] card card-compact w-80 p-2 shadow bg-base-200 text-base-content border border-base-300"
+                className="dropdown-content z-[1] card card-compact w-72 sm:w-80 p-2 shadow bg-base-200 text-base-content border border-base-300"
               >
                 <div className="card-body">
-                  <h3 className="font-bold text-lg mb-3">Posting Guidelines</h3>
-                  <div className="space-y-2 text-sm">
+                  <h3 className="font-bold text-base sm:text-lg mb-3">
+                    Posting Guidelines
+                  </h3>
+                  <div className="space-y-2 text-xs sm:text-sm">
                     <div className="flex items-start gap-2">
                       <span className="text-success">✓</span>
@@ -222,9 +227,11 @@
           </div>
 
-          <div className="card-body p-6 sm:p-8">
-            <div className="space-y-8">
+          <div className="card-body p-4 sm:p-6 lg:p-8">
+            <div className="space-y-6 sm:space-y-8">
               <div className="form-control w-full">
                 <label className="label mb-1.5">
-                  <span className="label-text text-lg font-medium">Title</span>
+                  <span className="label-text text-base sm:text-lg font-medium">
+                    Title
+                  </span>
                 </label>
                 <input
@@ -233,5 +240,5 @@
                   onChange={(e) => setTitle(e.target.value)}
                   placeholder="Enter your post title"
-                  className="input input-bordered input-lg w-full focus:input-primary"
+                  className="input input-bordered input-md sm:input-lg w-full focus:input-primary"
                   required
                 />
@@ -240,5 +247,5 @@
               <div className="flex flex-col form-control w-full">
                 <label className="label mb-1.5">
-                  <span className="label-text text-lg font-medium">
+                  <span className="label-text text-base sm:text-lg font-medium">
                     Content
                   </span>
@@ -248,5 +255,5 @@
                   onChange={(e) => setContent(e.target.value)}
                   placeholder="Write your post content here..."
-                  className="textarea textarea-bordered min-h-[300px] sm:min-h-[400px] w-full text-base leading-relaxed focus:textarea-primary p-4"
+                  className="textarea textarea-bordered min-h-[250px] sm:min-h-[300px] lg:min-h-[400px] w-full text-sm sm:text-base leading-relaxed focus:textarea-primary p-3 sm:p-4"
                   required
                 ></textarea>
@@ -254,9 +261,9 @@
             </div>
 
-            <div className="card-actions justify-end mt-8">
+            <div className="card-actions justify-end mt-6 sm:mt-8 gap-3 flex-col sm:flex-row">
               <button
                 type="button"
                 onClick={() => navigate("/dashboard/forum")}
-                className="btn btn-ghost btn-lg"
+                className="btn btn-ghost btn-md sm:btn-lg w-full sm:w-auto order-2 sm:order-1"
                 disabled={isSubmitting}
               >
@@ -265,5 +272,5 @@
               <button
                 type="submit"
-                className="btn border-amber-400 btn-lg"
+                className="btn border-amber-400 btn-md sm:btn-lg w-full sm:w-auto order-1 sm:order-2"
                 disabled={isSubmitting}
               >
@@ -285,15 +292,15 @@
       {modal.isOpen && (
         <div
-          className="fixed inset-0 z-50 flex items-center justify-center  bg-opacity-50 backdrop-blur-xs"
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-xs p-4"
           aria-labelledby="modal-title"
           role="dialog"
           aria-modal="true"
         >
-          <div className="bg-base-200 rounded-lg shadow-xl p-6 w-full max-w-md mx-4">
+          <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 === "success" && (
-                <div className="w-8 h-8 rounded-full bg-success flex items-center justify-center shrink-0">
+                <div className="w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-success flex items-center justify-center shrink-0">
                   <svg
-                    className="w-5 h-5 text-success-content"
+                    className="w-4 h-4 sm:w-5 sm:h-5 text-success-content"
                     fill="none"
                     stroke="currentColor"
@@ -310,7 +317,7 @@
               )}
               {modal.type === "pending" && (
-                <div className="w-8 h-8 rounded-full bg-warning flex items-center justify-center shrink-0">
+                <div className="w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-warning flex items-center justify-center shrink-0">
                   <svg
-                    className="w-5 h-5 text-warning-content"
+                    className="w-4 h-4 sm:w-5 sm:h-5 text-warning-content"
                     fill="none"
                     stroke="currentColor"
@@ -327,7 +334,7 @@
               )}
               {(modal.type === "auth" || modal.type === "error") && (
-                <div className="w-8 h-8 rounded-full bg-error flex items-center justify-center shrink-0">
+                <div className="w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-error flex items-center justify-center shrink-0">
                   <svg
-                    className="w-5 h-5 text-error-content"
+                    className="w-4 h-4 sm:w-5 sm:h-5 text-error-content"
                     fill="none"
                     stroke="currentColor"
@@ -352,5 +359,5 @@
                 </div>
               )}
-              <h3 className="font-bold text-lg" id="modal-title">
+              <h3 className="font-bold text-base sm:text-lg" id="modal-title">
                 {modal.type === "success" && "Success!"}
                 {modal.type === "pending" && "Pending Approval"}
@@ -359,7 +366,7 @@
               </h3>
             </div>
-            <p className="py-4 flex items-center gap-3">
+            <div className="py-3 sm:py-4 flex items-center gap-3">
               {modal.type === "moderatorPrompt" && (
-                <span className="inline-flex items-center justify-center w-8 h-8 aspect-square rounded-full text-warning">
+                <span className="inline-flex items-center justify-center w-6 h-6 sm:w-8 sm:h-8 aspect-square rounded-full text-warning">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -377,11 +384,13 @@
                 </span>
               )}
-              <span className="font-bold">{modal.message}</span>
-            </p>
-            <div className="flex justify-end gap-2 mt-8">
+              <span className="font-bold text-sm sm:text-base">
+                {modal.message}
+              </span>
+            </div>
+            <div className="flex justify-end gap-2 mt-6 sm:mt-8">
               {modal.type === "moderatorPrompt" ? (
                 <>
                   <button
-                    className="btn btn-success"
+                    className="btn btn-success btn-sm sm:btn-md"
                     onClick={() => handleModeratorDecision("yes")}
                   >
@@ -389,5 +398,5 @@
                   </button>
                   <button
-                    className="btn btn-error"
+                    className="btn btn-error btn-sm sm:btn-md"
                     onClick={() => handleModeratorDecision("no")}
                   >
@@ -396,5 +405,8 @@
                 </>
               ) : (
-                <button className="btn btn-primary" onClick={closeModal}>
+                <button
+                  className="btn btn-primary btn-sm sm:btn-md"
+                  onClick={closeModal}
+                >
                   OK
                 </button>
Index: client/src/Dashboard/DashboardLayout.jsx
===================================================================
--- client/src/Dashboard/DashboardLayout.jsx	(revision 506e3de48733205c35fd4cacf80862431905d04f)
+++ client/src/Dashboard/DashboardLayout.jsx	(revision f8d8c7f9fc257803f2587791a75fade17bb8194f)
@@ -5,12 +5,10 @@
 const DashboardLayout = () => {
   return (
-    <div
-      data-theme="luxury"
-      className="dashboard h-screen flex bg-base-100 overflow-hidden"
-    >
-      <Navbar />
-      <div className="flex-1 w-full h-full overflow-y-auto">
-        <Outlet />
-      </div>
+    <div data-theme="luxury" className="dashboard h-screen bg-base-100">
+      <Navbar>
+        <div className="h-full w-full overflow-y-auto">
+          <Outlet />
+        </div>
+      </Navbar>
     </div>
   );
Index: client/src/Dashboard/components/Forum.jsx
===================================================================
--- client/src/Dashboard/components/Forum.jsx	(revision 506e3de48733205c35fd4cacf80862431905d04f)
+++ client/src/Dashboard/components/Forum.jsx	(revision f8d8c7f9fc257803f2587791a75fade17bb8194f)
@@ -93,23 +93,22 @@
 
   return (
-    <div
-      data-theme="luxury"
-      className="dashboard h-screen flex bg-base-100 overflow-hidden"
-    >
-      <div className="flex flex-col md:flex-row gap-6 p-6 h-full overflow-y-auto w-full">
-        <div className="flex-1 ml-8 mb-6">
-          <h1 className="text-4xl font-bold mb-10">Forum Posts</h1>
+    <div data-theme="luxury" className="min-h-screen bg-base-100">
+      <div className="flex flex-col lg:flex-row gap-4 lg:gap-6 p-4 sm:p-6 w-full">
+        <div className="flex-1 order-2 lg:order-1">
+          <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold mb-6 lg:mb-10">
+            Forum Posts
+          </h1>
 
           {loading ? (
-            <div className="flex justify-center items-center h-64">
-              <span className="loading loading-spinner loading-lg"></span>
+            <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>
           ) : (
             <>
-              <div className="space-y-4 pb-8">
+              <div className="space-y-3 sm:space-y-4 pb-6 sm:pb-8">
                 {posts.map((post) => (
                   <div
                     key={post.id}
-                    className="p-4 border rounded-lg shadow-sm hover:shadow-md transition  relative"
+                    className="p-3 sm:p-4 lg:p-6 border rounded-lg shadow-sm hover:shadow-md transition relative bg-base-200"
                   >
                     {(post.author_name === user.name ||
@@ -117,5 +116,5 @@
                       user.isModerator) && (
                       <button
-                        className=" absolute top-2 right-2 p-1.5 cursor-pointer rounded-full hover:bg-gray-600 transition-colors"
+                        className="absolute top-2 right-2 p-1.5 cursor-pointer rounded-full hover:bg-gray-600 transition-colors"
                         onClick={(e) => {
                           e.stopPropagation();
@@ -127,11 +126,15 @@
                         }}
                       >
-                        <img src={trashIcon} alt="Delete" className="w-6 h-6" />
+                        <img
+                          src={trashIcon}
+                          alt="Delete"
+                          className="w-4 h-4 sm:w-5 sm:h-5 lg:w-6 lg:h-6"
+                        />
                       </button>
                     )}
 
-                    <div className="flex items-center gap-4 mt-2">
+                    <div className="flex items-center gap-2 sm:gap-4 mt-2 pr-8 sm:pr-10">
                       <h2
-                        className="text-3xl font-semibold mb-2 cursor-pointer hover:underline"
+                        className="text-lg sm:text-xl lg:text-2xl xl:text-3xl font-semibold mb-2 cursor-pointer hover:underline line-clamp-2"
                         onClick={() => {
                           console.log("Post clicked:", post);
@@ -145,9 +148,9 @@
                     </div>
 
-                    <p className="text-m text-gray-500">
+                    <p className="text-xs sm:text-sm lg:text-base text-gray-500 mb-2">
                       By {post.author_name},{" "}
                       <span>{post.date_created?.split("T")[0]}</span>
                     </p>
-                    <p className="mt-2 text-gray-400 text-xl">
+                    <p className="mt-2 text-gray-400 text-sm sm:text-base lg:text-lg xl:text-xl line-clamp-3 sm:line-clamp-none">
                       {post.content && post.content.length > 300
                         ? post.content.slice(0, 300) + "..."
@@ -155,5 +158,5 @@
                     </p>
                     <div
-                      className="mt-4 flex justify-end"
+                      className="mt-3 sm:mt-4 flex justify-end items-center gap-2 cursor-pointer"
                       onClick={(e) => {
                         navigate(`/dashboard/forum-detail/${post.id}`, {
@@ -162,9 +165,11 @@
                       }}
                     >
-                      <p className="mr-4">{post.comment_count}</p>
+                      <p className="text-sm sm:text-base">
+                        {post.comment_count}
+                      </p>
                       <img
                         src={commentIcon}
                         alt="Comment"
-                        className="w-6 h-6 cursor-pointer hover:opacity-80"
+                        className="w-4 h-4 sm:w-5 sm:h-5 lg:w-6 lg:h-6 hover:opacity-80"
                       />
                     </div>
@@ -173,8 +178,8 @@
               </div>
               {hasMore && (
-                <div className="flex justify-center mt-6">
+                <div className="flex justify-center mt-4 sm:mt-6">
                   <button
                     onClick={handleLoadMore}
-                    className={`btn btn-outline mb-6 ${
+                    className={`btn btn-outline mb-4 sm:mb-6 ${
                       loadingMore ? "btn-disabled" : ""
                     }`}
@@ -196,11 +201,11 @@
         </div>
 
-        <div className="w-full md:w-1/4">
-          <div className="flex flex-row justify-end p-6 rounded-lg shadow-md">
+        <div className="w-full lg:w-1/4 order-1 lg:order-2">
+          <div className="flex flex-row justify-center lg:justify-end p-4 sm:p-6 rounded-lg shadow-md bg-base-100">
             <button
               onClick={() => {
                 navigate("/dashboard/create-post");
               }}
-              className="cursor-pointer px-6 py-3 bg-yellow-500 text-black rounded hover:bg-yellow-600"
+              className="cursor-pointer px-4 py-2 sm:px-6 sm:py-3 bg-yellow-500 text-black rounded hover:bg-yellow-600 text-sm sm:text-base font-medium w-full sm:w-auto"
             >
               Create a Post
@@ -213,10 +218,10 @@
       {modal.isOpen && (
         <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-opacity-50 backdrop-blur-sm"
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black 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-6 w-full max-w-md mx-4">
+          <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" && (
@@ -254,14 +259,14 @@
                 </div>
               )}
-              <h3 className="font-bold text-lg" id="modal-title">
+              <h3 className="font-bold text-base sm:text-lg" id="modal-title">
                 Delete Post
               </h3>
             </div>
-            <p className="py-4">{modal.message}</p>
-            <div className="flex justify-end gap-3 mt-4">
+            <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"
+                    className="btn btn-ghost btn-sm sm:btn-md"
                     onClick={closeModal}
                     disabled={isDeleting}
@@ -270,5 +275,5 @@
                   </button>
                   <button
-                    className="btn btn-error"
+                    className="btn btn-error btn-sm sm:btn-md"
                     onClick={confirmDelete}
                     disabled={isDeleting}
@@ -285,5 +290,8 @@
                 </>
               ) : (
-                <button className="btn btn-primary" onClick={closeModal}>
+                <button
+                  className="btn btn-primary btn-sm sm:btn-md"
+                  onClick={closeModal}
+                >
                   OK
                 </button>
Index: client/src/Dashboard/components/ManageChallenges.jsx
===================================================================
--- client/src/Dashboard/components/ManageChallenges.jsx	(revision 506e3de48733205c35fd4cacf80862431905d04f)
+++ client/src/Dashboard/components/ManageChallenges.jsx	(revision f8d8c7f9fc257803f2587791a75fade17bb8194f)
@@ -151,15 +151,20 @@
 
   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">
-        <div className="w-full md:w-[310px] flex-shrink-0 ">
+    <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">
+        {/* Left sidebar with calendar */}
+        <div className="w-full lg:w-[310px] flex-shrink-0 order-1 lg:order-1">
           <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>
+            <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>
 
               <calendar-date
                 ref={calendarRef}
-                class="cally bg-base-100 border border-base-300 shadow-md rounded-box w-full mb-4"
+                class="cally bg-base-100 border border-base-300 shadow-md rounded-box w-full mb-3 sm:mb-4"
               >
                 <svg
@@ -191,5 +196,5 @@
 
               <button
-                className="btn btn-block border-amber-400"
+                className="btn btn-block border-amber-400 btn-sm sm:btn-md"
                 onClick={() => {
                   if (calendarRef.current) {
@@ -208,5 +213,5 @@
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5 mr-2"
+                  className="h-4 w-4 sm:h-5 sm:w-5 mr-2"
                   fill="none"
                   viewBox="0 0 24 24"
@@ -223,12 +228,13 @@
               </button>
             </div>
-            <div className="mt-6 w-full">
+            <div className="mt-4 sm:mt-6 w-full">
+              {/* Add new challenge button */}
               <button
-                className="btn btn-block btn-outline  border-amber-400 gap-2"
+                className="btn btn-block btn-outline border-amber-400 gap-2 btn-sm sm:btn-md"
                 onClick={() => navigate("/dashboard/create-new-challenge")}
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  className="w-5 h-5"
+                  className="w-4 h-4 sm:w-5 sm:h-5"
                   viewBox="0 0 24 24"
                   fill="none"
@@ -238,5 +244,6 @@
                   <path d="M12 5v14M5 12h14" />
                 </svg>
-                Add New Challenge
+                <span className="hidden sm:inline">Add New Challenge</span>
+                <span className="sm:hidden">Add Challenge</span>
               </button>
             </div>
@@ -244,16 +251,17 @@
         </div>
 
-        <div className="flex-1">
+        {/* Main content area */}
+        <div className="flex-1 order-2 lg:order-2">
           {loading ? (
-            <div className="flex justify-center items-center h-64">
-              <span className="loading loading-spinner loading-lg"></span>
+            <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>
           ) : challenges.length > 0 ? (
-            <div className="space-y-6">
+            <div className="space-y-4 sm: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">
+                  <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">
                         {challenge.title
                           .split("-")
@@ -264,19 +272,24 @@
                           .join(" ")}
                       </h2>
-                      <div className="badge badge-tertiary p-4">
+                      <div className="badge badge-tertiary p-2 sm:p-4 text-xs sm:text-sm whitespace-nowrap">
                         {new Date(challenge.solving_date).toLocaleDateString()}
                       </div>
                     </div>
 
-                    <p className="text-base-content/80 mt-2 line-clamp-2">
+                    <p className="text-base-content/80 mt-2 text-sm sm:text-base line-clamp-2 sm:line-clamp-3">
                       {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">
+                      <div className="mt-3 sm:mt-4 card bg-base-300 p-2 sm:p-3">
+                        <h3 className="font-medium mb-2 text-sm sm:text-base">
+                          Examples:
+                        </h3>
+                        <div className="space-y-2 sm:space-y-3">
                           {challenge.examples.map((example, index) => (
-                            <div key={index} className="font-mono text-sm">
+                            <div
+                              key={index}
+                              className="font-mono text-xs sm:text-sm"
+                            >
                               <p className="pl-2 border-l-2 border-amber-400 mt-1">
                                 Input: "{example.input || "N/A"}" <br />
@@ -289,7 +302,7 @@
                     )}
 
-                    <div className="card-actions justify-between mt-4">
+                    <div className="card-actions flex-col sm:flex-row justify-between mt-3 sm:mt-4 gap-2">
                       <button
-                        className="btn btn-sm btn-teritary"
+                        className="btn btn-sm btn-tertiary w-full sm:w-auto"
                         onClick={() => fetchTestCases(challenge.id)}
                       >
@@ -300,5 +313,5 @@
 
                       <button
-                        className="btn btn-sm btn-error btn-outline"
+                        className="btn btn-sm btn-error btn-outline w-full sm:w-auto"
                         onClick={() =>
                           showModal(
@@ -315,20 +328,22 @@
                     {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">
+                        <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">
                             {challenge.test_cases.map((testCase, index) => (
                               <div
                                 key={testCase.id}
-                                className="card bg-base-100 max-w-250 p-3"
+                                className="card bg-base-100 p-2 sm:p-3"
                               >
-                                <h4 className="font-medium">
+                                <h4 className="font-medium text-sm sm:text-base">
                                   Test Case {index + 1}
                                 </h4>
-                                <div className="font-mono text-sm">
+                                <div className="font-mono text-xs sm: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">
+                                    <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">
                                         {testCase.input || "N/A"}
                                       </pre>
@@ -337,6 +352,6 @@
                                   <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">
+                                    <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">
                                         {testCase.output || "N/A"}
                                       </pre>
@@ -353,5 +368,5 @@
               ))}
               <button
-                className="block mx-auto  cursor-pointer hover:underline"
+                className="block mx-auto cursor-pointer hover:underline text-sm sm:text-base"
                 onClick={() => handleViewAll()}
               >
@@ -360,14 +375,16 @@
             </div>
           ) : (
-            <div className="text-center text-base-content/60 py-16">
-              <p>No available challenges for the selected date.</p>
+            <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>
           )}
           {!loading && challenges.length > 1 && (
-            <div className="flex justify-center gap-2 mt-8">
+            <div className="flex flex-wrap justify-center gap-1 sm:gap-2 mt-6 sm:mt-8">
               {Array.from({ length: totalPages }, (_, idx) => (
                 <button
                   key={idx + 1}
-                  className={`btn btn-sm ${
+                  className={`btn btn-xs sm:btn-sm ${
                     currentPage === idx + 1 ? "border-amber-400" : "btn-ghost"
                   }`}
@@ -383,17 +400,18 @@
       </div>
 
+      {/* Modal */}
       {modal.isOpen && (
         <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-opacity-50 backdrop-blur-sm"
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black 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-6 w-full max-w-md mx-4">
+          <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" && (
-                <div className="w-8 h-8 rounded-full bg-error flex items-center justify-center shrink-0">
+                <div className="w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-error flex items-center justify-center shrink-0">
                   <svg
-                    className="w-5 h-5 text-error-content"
+                    className="w-4 h-4 sm:w-5 sm:h-5 text-error-content"
                     fill="none"
                     stroke="currentColor"
@@ -410,7 +428,7 @@
               )}
               {modal.type === "success" && (
-                <div className="w-8 h-8 rounded-full bg-success flex items-center justify-center shrink-0">
+                <div className="w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-success flex items-center justify-center shrink-0">
                   <svg
-                    className="w-5 h-5 text-success-content"
+                    className="w-4 h-4 sm:w-5 sm:h-5 text-success-content"
                     fill="none"
                     stroke="currentColor"
@@ -426,14 +444,14 @@
                 </div>
               )}
-              <h3 className="font-bold text-lg" id="modal-title">
+              <h3 className="font-bold text-base sm:text-lg" id="modal-title">
                 Delete Challenge
               </h3>
             </div>
-            <p className="py-4">{modal.message}</p>
-            <div className="flex justify-end gap-3 mt-4">
+            <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"
+                    className="btn btn-ghost btn-sm sm:btn-md"
                     onClick={closeModal}
                     disabled={loading}
@@ -442,5 +460,5 @@
                   </button>
                   <button
-                    className="btn btn-error"
+                    className="btn btn-error btn-sm sm:btn-md"
                     onClick={confirmDelete}
                     disabled={loading}
@@ -457,5 +475,8 @@
                 </>
               ) : (
-                <button className="btn btn-primary" onClick={closeModal}>
+                <button
+                  className="btn btn-primary btn-sm sm:btn-md"
+                  onClick={closeModal}
+                >
                   OK
                 </button>
Index: client/src/Dashboard/components/Navbar.jsx
===================================================================
--- client/src/Dashboard/components/Navbar.jsx	(revision 506e3de48733205c35fd4cacf80862431905d04f)
+++ client/src/Dashboard/components/Navbar.jsx	(revision f8d8c7f9fc257803f2587791a75fade17bb8194f)
@@ -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";
@@ -7,5 +7,60 @@
 import { useAuth } from "@/contexts/AuthContext";
 
-export default function Navbar() {
+// Sidebar Provider Component
+const SidebarProvider = ({ children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="drawer lg:drawer-open">
+      <input
+        id="drawer-toggle"
+        type="checkbox"
+        className="drawer-toggle"
+        checked={isOpen}
+        onChange={() => setIsOpen(!isOpen)}
+      />
+      <div className="drawer-content flex flex-col">
+        {/* Mobile navbar */}
+        <div className="navbar bg-base-200 lg:hidden border-b border-base-content/10">
+          <div className="flex-none">
+            <label htmlFor="drawer-toggle" className="btn btn-square btn-ghost">
+              <svg
+                className="w-6 h-6"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M4 6h16M4 12h16M4 18h16"
+                ></path>
+              </svg>
+            </label>
+          </div>
+          <div className="flex-1">
+            <a href="/" className="flex items-center gap-2">
+              <img src={logoIcon} alt="Logo" className="w-8 h-auto" />
+              <img src={logoText} alt="Logo Text" className="w-24 h-auto" />
+            </a>
+          </div>
+        </div>
+
+        {/* Main content */}
+        <main className="flex-1 p-0">{children}</main>
+      </div>
+
+      {/* Sidebar */}
+      <div className="drawer-side">
+        <label htmlFor="drawer-toggle" className="drawer-overlay"></label>
+        <AppSidebar onClose={() => setIsOpen(false)} />
+      </div>
+    </div>
+  );
+};
+
+// Sidebar Component
+const AppSidebar = ({ onClose }) => {
   const navigate = useNavigate();
   const location = useLocation();
@@ -58,6 +113,12 @@
   };
 
+  const handleNavigation = (path) => {
+    navigate(path);
+    onClose?.();
+  };
+
   return (
-    <nav className="dashboard__navbar w-80 min-h-screen bg-base-200 text-base-content border-r border-base-content/10">
+    <aside className="w-80 min-h-full bg-base-200 text-base-content border-r border-base-content/10 flex flex-col">
+      {/* Sidebar Header */}
       <div className="p-4 border-b border-base-content/10">
         <a href="/" className="flex items-center gap-2">
@@ -67,5 +128,6 @@
       </div>
 
-      <div className=" py-8">
+      {/* Sidebar Content */}
+      <div className="flex-1 py-8">
         <ul className="menu menu-lg gap-2">
           <li>
@@ -76,9 +138,9 @@
                   : "hover:bg-[#FFB800] hover:text-black"
               }`}
-              onClick={() => navigate("/dashboard")}
+              onClick={() => handleNavigation("/dashboard")}
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                className="w-5 h-5"
+                className="w-5 h-5 shrink-0"
                 viewBox="0 0 24 24"
                 fill="none"
@@ -88,5 +150,5 @@
                 <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>Challenge of the Day</span>
             </button>
           </li>
@@ -98,9 +160,9 @@
                   : "hover:bg-[#FFB800] hover:text-black"
               }`}
-              onClick={() => navigate("/dashboard/leaderboard")}
+              onClick={() => handleNavigation("/dashboard/leaderboard")}
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                className="w-5 h-5"
+                className="w-5 h-5 shrink-0"
                 viewBox="0 0 24 24"
                 fill="none"
@@ -110,5 +172,5 @@
                 <path d="M18 20V10M12 20V4M6 20v-6"></path>
               </svg>
-              Leaderboard
+              <span>Leaderboard</span>
             </button>
           </li>
@@ -120,9 +182,9 @@
                   : "hover:bg-[#FFB800] hover:text-black"
               }`}
-              onClick={() => navigate("/dashboard/forum")}
+              onClick={() => handleNavigation("/dashboard/forum")}
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                className="w-5 h-5"
+                className="w-5 h-5 shrink-0"
                 viewBox="0 0 24 24"
                 fill="none"
@@ -135,11 +197,12 @@
                 <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
               </svg>
-              Forum
+              <span>Forum</span>
             </button>
           </li>
           {user && user.isModerator && (
             <>
-              <hr />
-
+              <li>
+                <div className="divider my-2"></div>
+              </li>
               <li>
                 <button
@@ -149,9 +212,9 @@
                       : "hover:bg-[#FFB800] hover:text-black"
                   }`}
-                  onClick={() => navigate("/dashboard/manage-posts")}
+                  onClick={() => handleNavigation("/dashboard/manage-posts")}
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    className="w-5 h-5"
+                    className="w-5 h-5 shrink-0"
                     viewBox="0 0 24 24"
                     fill="none"
@@ -172,5 +235,5 @@
                     <line x1="15" y1="3" x2="15" y2="21"></line>
                   </svg>
-                  Manage Posts
+                  <span>Manage Posts</span>
                 </button>
               </li>
@@ -182,9 +245,11 @@
                       : "hover:bg-[#FFB800] hover:text-black"
                   }`}
-                  onClick={() => navigate("/dashboard/manage-challenges")}
+                  onClick={() =>
+                    handleNavigation("/dashboard/manage-challenges")
+                  }
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    className="w-5 h-5"
+                    className="w-5 h-5 shrink-0"
                     viewBox="0 0 24 24"
                     fill="none"
@@ -205,5 +270,5 @@
                     <line x1="15" y1="3" x2="15" y2="21"></line>
                   </svg>
-                  Manage Challenges
+                  <span>Manage Challenges</span>
                 </button>
               </li>
@@ -213,23 +278,24 @@
       </div>
 
-      <div className="absolute bottom-0 w-80 left-0 right-0 p-4 border-t border-base-content/10">
+      {/* Sidebar Footer */}
+      <div className="p-4 border-t border-base-content/10">
         <button
-          className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
+          className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors w-full ${
             isActive("/dashboard/profile")
               ? "bg-[#FFB800] text-black"
               : "hover:bg-[#FFB800] hover:text-black"
           }`}
-          onClick={() => navigate("/dashboard/profile")}
+          onClick={() => handleNavigation("/dashboard/profile")}
         >
           <img
             src={pp}
             alt="Profile"
-            className="w-10 h-10 rounded-full border-2 border-base-content/10"
+            className="w-10 h-10 rounded-full border-2 border-base-content/10 shrink-0"
           />
-          <div className="flex flex-col items-start cursor-pointer">
+          <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 mt-2">
+            <span className="text-sm text-base-content/70 mt-1">
               {user && <RankBadgeNav rankName={user.rank} size="sm" />}
             </span>
@@ -237,5 +303,10 @@
         </button>
       </div>
-    </nav>
+    </aside>
   );
+};
+
+// Main Navbar Component (now acts as a layout wrapper)
+export default function Navbar({ children }) {
+  return <SidebarProvider>{children}</SidebarProvider>;
 }
Index: client/src/LandingPage/LandingPage.jsx
===================================================================
--- client/src/LandingPage/LandingPage.jsx	(revision 506e3de48733205c35fd4cacf80862431905d04f)
+++ client/src/LandingPage/LandingPage.jsx	(revision f8d8c7f9fc257803f2587791a75fade17bb8194f)
@@ -10,5 +10,5 @@
 const LandingPage = () => {
   return (
-    <div data-theme="luxury" className="h-screen overflow-y-auto">
+    <div data-theme="luxury" className="min-h-screen w-full overflow-x-hidden">
       <NavbarLanding />
       <Hero />
Index: client/src/LandingPage/components/Hero.jsx
===================================================================
--- client/src/LandingPage/components/Hero.jsx	(revision 506e3de48733205c35fd4cacf80862431905d04f)
+++ client/src/LandingPage/components/Hero.jsx	(revision f8d8c7f9fc257803f2587791a75fade17bb8194f)
@@ -9,29 +9,42 @@
   return (
     <div
-      className="hero min-h-[80vh]"
+      className="hero min-h-[70vh] sm:min-h-[80vh] w-full"
       style={{
         backgroundImage: `url(${hero})`,
       }}
     >
-      <div className="hero-overlay "></div>
-      <div className="hero-content text-neutral-content text-center bg-black/70 p-20 rounded-lg">
+      <div className="hero-overlay"></div>
+      <div className="hero-content text-neutral-content text-center bg-black/70 p-6 sm:p-12 lg:p-20 rounded-lg mx-4 max-w-4xl">
         <div className="w-full">
-          {!user && <h1 className="mb-5 text-6xl font-bold">FINKI RANKED</h1>}
+          {!user && (
+            <h1 className="mb-4 sm:mb-5 text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
+              FINKI RANKED
+            </h1>
+          )}
           {user && (
-            <h1 className="mb-5 text-4xl font-bold">
+            <h1 className="mb-4 sm:mb-5 text-2xl sm:text-3xl lg:text-4xl font-bold leading-tight">
               Welcome back, {user.username}
             </h1>
           )}
 
-          <p className="mb-5">Daily coding challenges for FINKI students</p>
+          <p className="mb-4 sm:mb-5 text-sm sm:text-base lg:text-lg px-2">
+            Daily coding challenges for FINKI students
+          </p>
           {!user && (
-            <a className="btn btn-xl" onClick={() => navigate("/login")}>
+            <button
+              className="btn btn-sm sm:btn-md lg:btn-lg xl:btn-xl px-6 sm:px-8"
+              onClick={() => navigate("/login")}
+            >
               Join now
-            </a>
+            </button>
           )}
           {user && (
-            <a className="btn btn-xl" onClick={() => navigate("/dashboard")}>
-              Solve today's challenge
-            </a>
+            <button
+              className="btn btn-sm sm:btn-md lg:btn-lg xl:btn-xl px-6 sm:px-8"
+              onClick={() => navigate("/dashboard")}
+            >
+              <span className="hidden sm:inline">Solve today's challenge</span>
+              <span className="sm:hidden">Solve Challenge</span>
+            </button>
           )}
         </div>
Index: client/src/LandingPage/components/Intro.jsx
===================================================================
--- client/src/LandingPage/components/Intro.jsx	(revision 506e3de48733205c35fd4cacf80862431905d04f)
+++ client/src/LandingPage/components/Intro.jsx	(revision f8d8c7f9fc257803f2587791a75fade17bb8194f)
@@ -3,10 +3,16 @@
 const Intro = () => {
   return (
-    <div className="hero bg-base-200 min-h-[80vh]">
-      <div className="hero-content flex-col lg:flex-row-reverse">
-        <img src={logoIcon} className="max-w-sm rounded-lg" />
-        <div>
-          <h1 className="text-5xl font-bold">What is FINKI Ranked?</h1>
-          <p className="py-6 leading-loose">
+    <div className="hero bg-base-200 min-h-[60vh] sm:min-h-[70vh] lg:min-h-[80vh] py-8 sm:py-12">
+      <div className="hero-content flex-col lg:flex-row-reverse gap-8 lg:gap-12 px-4 sm:px-6 lg:px-8 max-w-7xl">
+        <img
+          src={logoIcon}
+          className="w-48 sm:w-64 md:w-80 lg:max-w-sm rounded-lg shadow-lg"
+          alt="FINKI Ranked Logo"
+        />
+        <div className="text-center lg:text-left">
+          <h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">
+            What is FINKI Ranked?
+          </h1>
+          <p className="py-3 sm:py-4 lg:py-6 leading-relaxed text-sm sm:text-base lg:text-lg">
             FINKI Ranked is a web platform where students receive a daily
             task/challenge, compete to solve it, and are ranked according to the
@@ -15,5 +21,5 @@
             and communication between students.
           </p>
-          <p className="py-6 leading-loose">
+          <p className="py-3 sm:py-4 lg:py-6 leading-relaxed text-sm sm:text-base lg:text-lg">
             The goal of our application is to create a platform for programming
             challenges that will allow FINKI students to solve algorithmic tasks
Index: client/src/LandingPage/components/LeaderBoardEx.jsx
===================================================================
--- client/src/LandingPage/components/LeaderBoardEx.jsx	(revision 506e3de48733205c35fd4cacf80862431905d04f)
+++ client/src/LandingPage/components/LeaderBoardEx.jsx	(revision f8d8c7f9fc257803f2587791a75fade17bb8194f)
@@ -88,7 +88,8 @@
     return (
       <div data-theme="luxury" className="min-h-screen flex bg-base-100">
-        {/* {!landing ? <Navbar /> : null} */}
-        <div className="flex w-full flex-col justify-center items-center p-20 gap-10">
-          <h1 className="text-4xl font-bold">Leaderboard</h1>
+        <div className="flex w-full flex-col justify-center items-center p-4 sm:p-8 lg:p-20 gap-6 sm:gap-8 lg:gap-10">
+          <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-center">
+            Leaderboard
+          </h1>
           <div className="loading loading-spinner loading-lg"></div>
         </div>
@@ -100,12 +101,13 @@
     return (
       <div data-theme="luxury" className="min-h-screen flex bg-base-100">
-        {/* {!landing ? <Navbar /> : null} */}
-        <div className="flex w-full flex-col justify-center items-center p-20 gap-10">
-          <h1 className="text-4xl font-bold">Leaderboard</h1>
-          <div className="alert alert-error">
-            <span>{error}</span>
+        <div className="flex w-full flex-col justify-center items-center p-4 sm:p-8 lg:p-20 gap-6 sm:gap-8 lg:gap-10">
+          <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-center">
+            Leaderboard
+          </h1>
+          <div className="alert alert-error max-w-md">
+            <span className="text-sm sm:text-base">{error}</span>
           </div>
           <button
-            className="btn btn-tertiary"
+            className="btn btn-sm sm:btn-md lg:btn-lg btn-tertiary"
             onClick={() => fetchLeaderboard(1, false)}
           >
@@ -120,23 +122,23 @@
     <>
       <div data-theme="luxury" className="min-h-screen flex bg-base-100">
-        {/* {!landing ? <Navbar /> : null} */}
-
-        <div className="flex w-full flex-col items-center p-20 gap-10">
-          <h1 className="text-4xl font-bold">Leaderboard</h1>
-          <p>Note: The leaderboard updates every 5 minutes</p>
+        <div className="flex w-full flex-col items-center p-4 sm:p-8 lg:p-20 gap-6 sm:gap-8 lg:gap-10">
+          <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-center">
+            Leaderboard
+          </h1>
+          <p className="text-sm sm:text-base text-center">
+            Note: The leaderboard updates every 5 minutes
+          </p>
 
           {pagination && (
-            <div className="flex">
+            <div className="stats stats-vertical sm:stats-horizontal shadow">
               <div className="stat">
-                <div className="stat-title">Total Users</div>
-
-                <div className="text-3xl flex justify-center items-center">
+                <div className="stat-title text-xs sm:text-sm">Total Users</div>
+                <div className="stat-value text-lg sm:text-2xl lg:text-3xl">
                   {pagination.totalUsers}
                 </div>
               </div>
               <div className="stat">
-                <div className="stat-title">Showing</div>
-
-                <div className="text-3xl flex justify-center items-center">
+                <div className="stat-title text-xs sm:text-sm">Showing</div>
+                <div className="stat-value text-lg sm:text-2xl lg:text-3xl">
                   {leaderboard.length}
                 </div>
@@ -145,13 +147,15 @@
           )}
 
-          <div className="w-full max-w-4xl">
-            <div className="rounded-box border border-base-content/5 bg-base-100">
-              <table className="table w-full">
+          <div className="w-full max-w-6xl px-2 sm:px-4">
+            <div className="rounded-box border border-base-content/5 bg-base-100 overflow-x-auto">
+              <table className="table table-xs sm:table-sm lg:table-md w-full">
                 <thead>
                   <tr>
-                    <th>Rank</th>
-                    <th>Username</th>
-                    <th>Rank Tier</th>
-                    <th>Points</th>
+                    <th className="text-xs sm:text-sm">Rank</th>
+                    <th className="text-xs sm:text-sm">Username</th>
+                    <th className="text-xs sm:text-sm hidden sm:table-cell">
+                      Rank Tier
+                    </th>
+                    <th className="text-xs sm:text-sm">Points</th>
                   </tr>
                 </thead>
@@ -159,12 +163,18 @@
                   {leaderboard.map((user, index) => (
                     <tr key={user.id} className="hover">
-                      <th>{getPosition(index)}</th>
-                      <td className="font-medium">{user.username}</td>
-                      <td>
+                      <th className="text-xs sm:text-sm">
+                        {getPosition(index)}
+                      </th>
+                      <td className="font-medium text-xs sm:text-sm truncate max-w-24 sm:max-w-none">
+                        {user.username}
+                      </td>
+                      <td className="hidden sm:table-cell">
                         <div>
-                          <RankBadge rankName={user.rank} />
+                          <RankBadge rankName={user.rank} size="sm" />
                         </div>
                       </td>
-                      <td className="font-mono font-bold">{user.points}</td>
+                      <td className="font-mono font-bold text-xs sm:text-sm">
+                        {user.points}
+                      </td>
                     </tr>
                   ))}
@@ -175,6 +185,8 @@
 
           {error && leaderboard.length > 0 && (
-            <div className="alert alert-warning">
-              <span>Error loading more data: {error}</span>
+            <div className="alert alert-warning max-w-md">
+              <span className="text-sm sm:text-base">
+                Error loading more data: {error}
+              </span>
             </div>
           )}
@@ -182,5 +194,5 @@
           {pagination && pagination.hasNextPage && (
             <button
-              className={`btn btn-lg ${
+              className={`btn btn-sm sm:btn-md lg:btn-lg ${
                 loadingMore ? "btn-disabled" : "btn-primary"
               }`}
@@ -190,6 +202,6 @@
               {loadingMore ? (
                 <>
-                  <span className="loading loading-spinner"></span>
-                  Loading...
+                  <span className="loading loading-spinner loading-sm"></span>
+                  <span className="hidden sm:inline">Loading...</span>
                 </>
               ) : (
@@ -201,5 +213,7 @@
           {pagination && !pagination.hasNextPage && leaderboard.length > 0 && (
             <div className="text-center text-base-content/70">
-              <p>You've reached the end of the leaderboard!</p>
+              <p className="text-sm sm:text-base">
+                You've reached the end of the leaderboard!
+              </p>
             </div>
           )}
Index: client/src/LandingPage/components/NavbarLanding.jsx
===================================================================
--- client/src/LandingPage/components/NavbarLanding.jsx	(revision 506e3de48733205c35fd4cacf80862431905d04f)
+++ client/src/LandingPage/components/NavbarLanding.jsx	(revision f8d8c7f9fc257803f2587791a75fade17bb8194f)
@@ -10,20 +10,31 @@
   };
   return (
-    <div className="navbar bg-base-100 shadow-sm justify-between p-6">
-      <div className="navbar-start ml-10">
-        <a className="btn btn-ghost">
-          <img src={logoIcon} alt="Logo" className="h-10 w-auto" />
-          <img src={logoText} alt="Logo" className="h-10 w-auto" />
+    <div className="navbar bg-base-100 shadow-sm justify-between p-4 sm:p-6">
+      <div className="navbar-start ml-2 sm:ml-4 lg:ml-10">
+        <a className="btn btn-ghost p-1 sm:p-2">
+          <img src={logoIcon} alt="Logo" className="h-8 sm:h-10 w-auto" />
+          <img
+            src={logoText}
+            alt="Logo"
+            className="h-8 sm:h-10 w-auto hidden xs:block"
+          />
         </a>
       </div>
-      <div className="navbar-end mr-10">
+      <div className="navbar-end mr-2 sm:mr-4 lg:mr-10">
         {!user && (
-          <button className="btn btn-lg" onClick={handleRegisterClick}>
+          <button
+            className="btn btn-sm sm:btn-md lg:btn-lg"
+            onClick={handleRegisterClick}
+          >
             Register
           </button>
         )}
         {user && (
-          <button className="btn btn-lg" onClick={() => navigate("/dashboard")}>
-            To Dashboard
+          <button
+            className="btn btn-sm sm:btn-md lg:btn-lg"
+            onClick={() => navigate("/dashboard")}
+          >
+            <span className="hidden sm:inline">To Dashboard</span>
+            <span className="sm:hidden">Dashboard</span>
           </button>
         )}
Index: client/src/LandingPage/components/OurRankSystem.jsx
===================================================================
--- client/src/LandingPage/components/OurRankSystem.jsx	(revision 506e3de48733205c35fd4cacf80862431905d04f)
+++ client/src/LandingPage/components/OurRankSystem.jsx	(revision f8d8c7f9fc257803f2587791a75fade17bb8194f)
@@ -26,21 +26,23 @@
       <div
         data-theme="luxury"
-        className="dashboard bg-base-200 flex overflow-none p-20"
+        className="dashboard bg-base-200 flex overflow-none py-8 sm:py-12 lg:py-20 px-4 sm:px-8 lg:px-20"
       >
-        <div className="flex w-full flex-col justify-center items-center p-20 gap-10">
-          <h1 className="text-4xl font-bold">Our Ranking System</h1>
-          <p className="text-lg text-center max-w-2xl">
+        <div className="flex w-full flex-col justify-center items-center gap-6 sm:gap-8 lg:gap-10 max-w-7xl mx-auto">
+          <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-center">
+            Our Ranking System
+          </h1>
+          <p className="text-sm sm:text-base lg:text-lg text-center max-w-2xl">
             Climb the ranks and show your coding prowess! Each rank represents
             your dedication and skill level in competitive programming.
           </p>
 
-          <div className="rounded-box border border-base-content/5 bg-base-100 w-full max-w-4xl p-10">
-            <table className="table">
+          <div className="rounded-box border border-base-content/5 bg-base-100 w-full max-w-6xl p-4 sm:p-6 lg:p-10 overflow-x-auto">
+            <table className="table table-xs sm:table-sm lg:table-md w-full">
               <thead>
                 <tr>
-                  <th>Rank #</th>
-                  <th>Title</th>
-                  <th>Required Points</th>
-                  <th>Icon</th>
+                  <th className="text-xs sm:text-sm">Rank #</th>
+                  <th className="text-xs sm:text-sm">Title</th>
+                  <th className="text-xs sm:text-sm">Required Points</th>
+                  <th className="text-xs sm:text-sm">Icon</th>
                 </tr>
               </thead>
@@ -51,12 +53,19 @@
                   return (
                     <tr key={rank.id} className="hover">
-                      <th>{rank.id}</th>
-                      <td className="font-medium">{rank.title}</td>
-                      <td className="font-mono font-bold">
-                        {rank.requiredPoints.toLocaleString()} pts
+                      <th className="text-xs sm:text-sm">{rank.id}</th>
+                      <td className="font-medium text-xs sm:text-sm">
+                        {rank.title}
+                      </td>
+                      <td className="font-mono font-bold text-xs sm:text-sm">
+                        <span className="hidden sm:inline">
+                          {rank.requiredPoints.toLocaleString()} pts
+                        </span>
+                        <span className="sm:hidden">
+                          {rank.requiredPoints.toLocaleString()}
+                        </span>
                       </td>
                       <td>
                         <svg
-                          className={`w-6 h-6 ${
+                          className={`w-4 h-4 sm:w-5 sm:h-5 lg:w-6 lg:h-6 ${
                             isGlowing ? "breathing-glow" : ""
                           }`}
@@ -82,11 +91,13 @@
           </div>
 
-          <div className="text-center text-base-content/70 max-w-2xl">
-            <p className="mb-4">
-              <strong>How to earn points:</strong>
+          <div className="text-center text-base-content/70 max-w-4xl w-full">
+            <p className="mb-4 text-sm sm:text-base font-semibold">
+              How to earn points:
             </p>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
-              <div className="bg-base-100 p-6 rounded-lg">
-                <h3 className="font-semibold mb-2">Early bird gets the worm</h3>
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 text-xs sm:text-sm">
+              <div className="bg-base-100 p-4 sm:p-6 rounded-lg">
+                <h3 className="font-semibold mb-2 text-sm sm:text-base">
+                  Early bird gets the worm
+                </h3>
                 <p>
                   Solve the challenges as early as you can every day. Remember
@@ -94,6 +105,6 @@
                 </p>
               </div>
-              <div className="bg-base-100 p-6 rounded-lg">
-                <h3 className="font-semibold mb-2">
+              <div className="bg-base-100 p-4 sm:p-6 rounded-lg">
+                <h3 className="font-semibold mb-2 text-sm sm:text-base">
                   As few attempts as possible
                 </h3>
Index: client/src/LandingPage/components/VisionSection.jsx
===================================================================
--- client/src/LandingPage/components/VisionSection.jsx	(revision 506e3de48733205c35fd4cacf80862431905d04f)
+++ client/src/LandingPage/components/VisionSection.jsx	(revision f8d8c7f9fc257803f2587791a75fade17bb8194f)
@@ -7,9 +7,11 @@
   const user = useAuth();
   return (
-    <div className="hero bg-base-200 min-h-[80vh]">
-      <div className="hero-content flex-col lg:flex-row-reverse">
-        <div className="flex flex-col p-10 text-center lg:text-left">
-          <h1 className="text-5xl font-bold">How does it work?</h1>
-          <p className="py-6 leading-loose">
+    <div className="hero bg-base-200 min-h-[60vh] sm:min-h-[70vh] lg:min-h-[80vh] py-8 sm:py-12">
+      <div className="hero-content flex-col lg:flex-row-reverse gap-8 lg:gap-12 px-4 sm:px-6 lg:px-8 max-w-7xl">
+        <div className="flex flex-col p-4 sm:p-6 lg:p-10 text-center lg:text-left">
+          <h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">
+            How does it work?
+          </h1>
+          <p className="py-3 sm:py-4 lg:py-6 leading-relaxed text-sm sm:text-base lg:text-lg mb-4 sm:mb-6">
             Every day we post a new coding problem at precisely 7am. If you have
             made an account using your students email address, you get access to
@@ -20,6 +22,6 @@
             leaderboard.
           </p>
-          <a
-            className="btn btn-xl w-80 bg-black"
+          <button
+            className="btn btn-sm sm:btn-md lg:btn-lg xl:btn-xl w-full sm:w-64 lg:w-80 bg-black text-white hover:bg-gray-800 mx-auto lg:mx-0"
             onClick={() => {
               user ? navigate("/dashboard") : navigate("/register");
@@ -27,7 +29,11 @@
           >
             Join now
-          </a>
+          </button>
         </div>
-        <img src={lista} className="w-100 h-100" />
+        <img
+          src={lista}
+          className="w-48 sm:w-64 md:w-80 lg:w-100 h-auto max-w-full"
+          alt="Leaderboard illustration"
+        />
       </div>
     </div>