Index: client/src/Dashboard/DashboardLayout.jsx
===================================================================
--- client/src/Dashboard/DashboardLayout.jsx	(revision 12803c4f7bc8c17db47d069389361c46a2228099)
+++ client/src/Dashboard/DashboardLayout.jsx	(revision c6a1688fddcafcfbd76f2d48517ea9526ff7c9b7)
@@ -9,8 +9,9 @@
       className="dashboard h-screen flex bg-base-100 overflow-hidden"
     >
-      <Navbar />
-      <div className="flex-1 w-full h-full overflow-y-auto">
-        <Outlet />
-      </div>
+      <Navbar>
+        <div className="flex-1 w-full h-full overflow-y-auto">
+          <Outlet />
+        </div>
+      </Navbar>
     </div>
   );
Index: client/src/LandingPage/LandingPage.jsx
===================================================================
--- client/src/LandingPage/LandingPage.jsx	(revision 12803c4f7bc8c17db47d069389361c46a2228099)
+++ client/src/LandingPage/LandingPage.jsx	(revision c6a1688fddcafcfbd76f2d48517ea9526ff7c9b7)
@@ -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 12803c4f7bc8c17db47d069389361c46a2228099)
+++ client/src/LandingPage/components/Hero.jsx	(revision c6a1688fddcafcfbd76f2d48517ea9526ff7c9b7)
@@ -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 12803c4f7bc8c17db47d069389361c46a2228099)
+++ client/src/LandingPage/components/Intro.jsx	(revision c6a1688fddcafcfbd76f2d48517ea9526ff7c9b7)
@@ -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 12803c4f7bc8c17db47d069389361c46a2228099)
+++ client/src/LandingPage/components/LeaderBoardEx.jsx	(revision c6a1688fddcafcfbd76f2d48517ea9526ff7c9b7)
@@ -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 12803c4f7bc8c17db47d069389361c46a2228099)
+++ client/src/LandingPage/components/NavbarLanding.jsx	(revision c6a1688fddcafcfbd76f2d48517ea9526ff7c9b7)
@@ -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 12803c4f7bc8c17db47d069389361c46a2228099)
+++ client/src/LandingPage/components/OurRankSystem.jsx	(revision c6a1688fddcafcfbd76f2d48517ea9526ff7c9b7)
@@ -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 12803c4f7bc8c17db47d069389361c46a2228099)
+++ client/src/LandingPage/components/VisionSection.jsx	(revision c6a1688fddcafcfbd76f2d48517ea9526ff7c9b7)
@@ -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>