Index: client/src/Dashboard/components/Navbar.jsx
===================================================================
--- client/src/Dashboard/components/Navbar.jsx	(revision 19e03e25bf4d17f3bfa968cf7dc11ac465d7948b)
+++ client/src/Dashboard/components/Navbar.jsx	(revision 36a220abcc3c3ffd6a3ca10dbe01f9e910d4b26b)
@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
-import logoIcon from '../../assets/images/logoIcon.png';
-import logoText from '../../assets/images/logoText.png';
-import pp from '../../assets/images/pp.svg';
-import RankBadgeNav from '@/utils/RankBadgeForNavbar';
-import { useAuth } from '@/contexts/AuthContext';
+import React, { useState, useEffect } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import logoIcon from "../../assets/images/logoIcon.png";
+import logoText from "../../assets/images/logoText.png";
+import pp from "../../assets/images/pp.svg";
+import RankBadgeNav from "@/utils/RankBadgeForNavbar";
+import { useAuth } from "@/contexts/AuthContext";
 const useIsDesktop = () => {
   const [isDesktop, setIsDesktop] = useState(window.innerWidth >= 1024);
@@ -14,6 +14,6 @@
     };
 
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
   }, []);
 
@@ -27,20 +27,20 @@
   const isDesktop = useIsDesktop();
   const isActive = (path) => {
-    if (path === '/dashboard' && location.pathname === '/dashboard') {
+    if (path === "/dashboard" && location.pathname === "/dashboard") {
       return true;
     }
     if (
-      path === '/dashboard/forum' &&
-      (location.pathname === '/dashboard/forum' ||
-        location.pathname === '/dashboard/forum/create-post' ||
-        location.pathname === '/dashboard/create-post' ||
-        (location.pathname === '/dashboard/user-posts' && isDesktop) ||
-        location.pathname.startsWith('/dashboard/forum-detail/'))
+      path === "/dashboard/forum" &&
+      (location.pathname === "/dashboard/forum" ||
+        location.pathname === "/dashboard/forum/create-post" ||
+        location.pathname === "/dashboard/create-post" ||
+        (location.pathname === "/dashboard/user-posts" && isDesktop) ||
+        location.pathname.startsWith("/dashboard/forum-detail/"))
     ) {
       return true;
     }
     if (
-      path == '/dashboard/user-posts' &&
-      location.pathname === '/dashboard/user-posts'
+      path == "/dashboard/user-posts" &&
+      location.pathname === "/dashboard/user-posts"
     ) {
       return true;
@@ -48,12 +48,12 @@
 
     if (
-      path === '/dashboard/manage-posts' &&
-      location.pathname === '/dashboard/manage-posts'
+      path === "/dashboard/manage-posts" &&
+      location.pathname === "/dashboard/manage-posts"
     ) {
       return true;
     }
     if (
-      path === '/dashboard/leaderboard' &&
-      location.pathname === '/dashboard/leaderboard'
+      path === "/dashboard/leaderboard" &&
+      location.pathname === "/dashboard/leaderboard"
     ) {
       return true;
@@ -61,6 +61,6 @@
 
     if (
-      path === '/dashboard/profile' &&
-      location.pathname === '/dashboard/profile'
+      path === "/dashboard/profile" &&
+      location.pathname === "/dashboard/profile"
     ) {
       return true;
@@ -68,11 +68,11 @@
 
     if (
-      path === '/dashboard/manage-challenges' &&
-      (location.pathname === '/dashboard/manage-challenges' ||
-        location.pathname === '/dashboard/create-new-challenge')
+      path === "/dashboard/manage-challenges" &&
+      (location.pathname === "/dashboard/manage-challenges" ||
+        location.pathname === "/dashboard/create-new-challenge")
     ) {
       return true;
     }
-    if (path !== '/dashboard' && location.pathname.startsWith(path + '/')) {
+    if (path !== "/dashboard" && location.pathname.startsWith(path + "/")) {
       return true;
     }
@@ -82,10 +82,8 @@
   return (
     <>
-      {/* Desktop Sidebar - hidden on tablet and below */}
-      {/* Desktop Sidebar - responsive width based on screen size */}
       <nav className="dashboard__navbar hidden lg:flex min-h-screen bg-base-200 text-base-content border-r border-base-content/10 flex-col flex-shrink-0 w-64 xl:w-72 2xl:w-80">
         <div className="p-3 xl:p-4 border-b border-base-content/10">
           <p
-            onClick={() => navigate('/')}
+            onClick={() => navigate("/")}
             className="flex items-center gap-2 cursor-pointer"
           >
@@ -104,13 +102,13 @@
 
         <div className="flex-1 py-6 xl:py-8">
-          <ul className="menu menu-sm xl:menu-md gap-1 xl:gap-2">
+          <ul className="menu menu-sm xl:menu-md 2xl:menu-lg gap-1 xl:gap-2 2xl:gap-4">
             <li>
               <button
-                className={`flex items-center gap-3 xl:gap-4 px-3 xl:px-4 py-2 xl:py-3 rounded-lg transition-colors text-sm xl:text-base ${
-                  isActive('/dashboard')
-                    ? 'bg-[#FFB800] text-black'
-                    : 'hover:bg-[#FFB800] hover:text-black'
+                className={`flex items-center gap-3 xl:gap-4 px-3 xl:px-4 py-2 xl:py-3 rounded-lg transition-colors text-sm xl:text-base 2xl:p-3 ${
+                  isActive("/dashboard")
+                    ? "bg-[#FFB800] text-black"
+                    : "hover:bg-[#FFB800] hover:text-black"
                 }`}
-                onClick={() => navigate('/dashboard')}
+                onClick={() => navigate("/dashboard")}
               >
                 <svg
@@ -129,10 +127,10 @@
             <li>
               <button
-                className={`flex items-center gap-3 xl:gap-4 px-3 xl:px-4 py-2 xl:py-3 rounded-lg transition-colors text-sm xl:text-base ${
-                  isActive('/dashboard/leaderboard')
-                    ? 'bg-[#FFB800] text-black'
-                    : 'hover:bg-[#FFB800] hover:text-black'
+                className={`flex items-center gap-3 xl:gap-4 px-3 2xl:p-3 xl:px-4 py-2 xl:py-3 rounded-lg transition-colors text-sm xl:text-base ${
+                  isActive("/dashboard/leaderboard")
+                    ? "bg-[#FFB800] text-black"
+                    : "hover:bg-[#FFB800] hover:text-black"
                 }`}
-                onClick={() => navigate('/dashboard/leaderboard')}
+                onClick={() => navigate("/dashboard/leaderboard")}
               >
                 <svg
@@ -151,10 +149,10 @@
             <li>
               <button
-                className={`flex items-center gap-3 xl:gap-4 px-3 xl:px-4 py-2 xl:py-3 rounded-lg transition-colors text-sm xl:text-base ${
-                  isActive('/dashboard/forum')
-                    ? 'bg-[#FFB800] text-black'
-                    : 'hover:bg-[#FFB800] hover:text-black'
+                className={`flex items-center gap-3 xl:gap-4 2xl:p-3 px-3 xl:px-4 py-2 xl:py-3 rounded-lg transition-colors text-sm xl:text-base ${
+                  isActive("/dashboard/forum")
+                    ? "bg-[#FFB800] text-black"
+                    : "hover:bg-[#FFB800] hover:text-black"
                 }`}
-                onClick={() => navigate('/dashboard/forum')}
+                onClick={() => navigate("/dashboard/forum")}
               >
                 <svg
@@ -180,10 +178,10 @@
                 <li>
                   <button
-                    className={`flex items-center gap-3 xl:gap-4 px-3 xl:px-4 py-2 xl:py-3 rounded-lg transition-colors text-sm xl:text-base ${
-                      isActive('/dashboard/manage-posts')
-                        ? 'bg-[#FFB800] text-black'
-                        : 'hover:bg-[#FFB800] hover:text-black'
-                    }`}
-                    onClick={() => navigate('/dashboard/manage-posts')}
+                    className={`flex items-center gap-3 xl:gap-4 2xl:p-3 px-3 xl:px-4 py-2 xl:py-3 rounded-lg transition-colors text-sm xl:text-base ${
+                      isActive("/dashboard/manage-posts")
+                        ? "bg-[#FFB800] text-black"
+                        : "hover:bg-[#FFB800] hover:text-black"
+                    }`}
+                    onClick={() => navigate("/dashboard/manage-posts")}
                   >
                     <svg
@@ -213,10 +211,10 @@
                 <li>
                   <button
-                    className={`flex items-center gap-3 xl:gap-4 px-3 xl:px-4 py-2 xl:py-3 rounded-lg transition-colors text-sm xl:text-base ${
-                      isActive('/dashboard/manage-challenges')
-                        ? 'bg-[#FFB800] text-black'
-                        : 'hover:bg-[#FFB800] hover:text-black'
-                    }`}
-                    onClick={() => navigate('/dashboard/manage-challenges')}
+                    className={`flex items-center gap-3 xl:gap-4 px-3 2xl:p-3 xl:px-4 py-2 xl:py-3 rounded-lg transition-colors text-sm xl:text-base ${
+                      isActive("/dashboard/manage-challenges")
+                        ? "bg-[#FFB800] text-black"
+                        : "hover:bg-[#FFB800] hover:text-black"
+                    }`}
+                    onClick={() => navigate("/dashboard/manage-challenges")}
                   >
                     <svg
@@ -251,10 +249,10 @@
         <div className="p-3 xl:p-4 border-t border-base-content/10">
           <button
-            className={`w-full flex items-center gap-2 xl:gap-3 px-3 xl:px-4 py-2 xl:py-3 rounded-lg transition-colors ${
-              isActive('/dashboard/profile')
-                ? 'bg-[#FFB800] text-black'
-                : 'hover:bg-[#FFB800] hover:text-black'
+            className={`w-full flex items-center gap-2 xl:gap-3 px-3 xl:px-4 2xl:p-3 py-2 xl:py-3 rounded-lg transition-colors ${
+              isActive("/dashboard/profile")
+                ? "bg-[#FFB800] text-black"
+                : "hover:bg-[#FFB800] hover:text-black"
             }`}
-            onClick={() => navigate('/dashboard/profile')}
+            onClick={() => navigate("/dashboard/profile")}
           >
             <img
@@ -263,9 +261,9 @@
               className={`w-8 xl:w-10 h-8 xl:h-10 rounded-full border-2 flex-shrink-0
     ${
-      isActive('/dashboard/profile') ? 'border-black' : 'border-base-content/10'
+      isActive("/dashboard/profile") ? "border-black" : "border-base-content/10"
     }`}
               style={
-                isActive('/dashboard/profile')
-                  ? { filter: 'brightness(0) invert(0)' }
+                isActive("/dashboard/profile")
+                  ? { filter: "brightness(0) invert(0)" }
                   : {}
               }
@@ -288,5 +286,5 @@
         <div className="flex items-center justify-between p-4">
           <div
-            onClick={() => navigate('/')}
+            onClick={() => navigate("/")}
             className="flex items-center gap-2 cursor-pointer"
           >
@@ -333,10 +331,10 @@
                   <button
                     className={`w-full flex items-center gap-4 px-4 py-3 rounded-lg transition-colors text-left ${
-                      isActive('/dashboard')
-                        ? 'bg-[#FFB800] text-black'
-                        : 'hover:bg-[#FFB800] hover:text-black'
+                      isActive("/dashboard")
+                        ? "bg-[#FFB800] text-black"
+                        : "hover:bg-[#FFB800] hover:text-black"
                     }`}
                     onClick={() => {
-                      navigate('/dashboard');
+                      navigate("/dashboard");
                       setIsMobileMenuOpen(false);
                     }}
@@ -358,10 +356,10 @@
                   <button
                     className={`w-full flex items-center gap-4 px-4 py-3 rounded-lg transition-colors text-left ${
-                      isActive('/dashboard/leaderboard')
-                        ? 'bg-[#FFB800] text-black'
-                        : 'hover:bg-[#FFB800] hover:text-black'
+                      isActive("/dashboard/leaderboard")
+                        ? "bg-[#FFB800] text-black"
+                        : "hover:bg-[#FFB800] hover:text-black"
                     }`}
                     onClick={() => {
-                      navigate('/dashboard/leaderboard');
+                      navigate("/dashboard/leaderboard");
                       setIsMobileMenuOpen(false);
                     }}
@@ -383,10 +381,10 @@
                   <button
                     className={`w-full flex items-center gap-4 px-4 py-3 rounded-lg transition-colors text-left ${
-                      isActive('/dashboard/forum')
-                        ? 'bg-[#FFB800] text-black'
-                        : 'hover:bg-[#FFB800] hover:text-black'
+                      isActive("/dashboard/forum")
+                        ? "bg-[#FFB800] text-black"
+                        : "hover:bg-[#FFB800] hover:text-black"
                     }`}
                     onClick={() => {
-                      navigate('/dashboard/forum');
+                      navigate("/dashboard/forum");
                       setIsMobileMenuOpen(false);
                     }}
@@ -411,10 +409,10 @@
                   <button
                     className={`w-full flex items-center gap-4 px-4 py-3 rounded-lg transition-colors text-left ${
-                      isActive('/dashboard/user-posts')
-                        ? 'bg-[#FFB800] text-black'
-                        : 'hover:bg-[#FFB800] hover:text-black'
+                      isActive("/dashboard/user-posts")
+                        ? "bg-[#FFB800] text-black"
+                        : "hover:bg-[#FFB800] hover:text-black"
                     }`}
                     onClick={() => {
-                      navigate('/dashboard/user-posts');
+                      navigate("/dashboard/user-posts");
                       setIsMobileMenuOpen(false);
                     }}
@@ -443,10 +441,10 @@
                       <button
                         className={`w-full flex items-center gap-4 px-4 py-3 rounded-lg transition-colors text-left ${
-                          isActive('/dashboard/manage-posts')
-                            ? 'bg-[#FFB800] text-black'
-                            : 'hover:bg-[#FFB800] hover:text-black'
+                          isActive("/dashboard/manage-posts")
+                            ? "bg-[#FFB800] text-black"
+                            : "hover:bg-[#FFB800] hover:text-black"
                         }`}
                         onClick={() => {
-                          navigate('/dashboard/manage-posts');
+                          navigate("/dashboard/manage-posts");
                           setIsMobileMenuOpen(false);
                         }}
@@ -479,10 +477,10 @@
                       <button
                         className={`w-full flex items-center gap-4 px-4 py-3 rounded-lg transition-colors text-left ${
-                          isActive('/dashboard/manage-challenges')
-                            ? 'bg-[#FFB800] text-black'
-                            : 'hover:bg-[#FFB800] hover:text-black'
+                          isActive("/dashboard/manage-challenges")
+                            ? "bg-[#FFB800] text-black"
+                            : "hover:bg-[#FFB800] hover:text-black"
                         }`}
                         onClick={() => {
-                          navigate('/dashboard/manage-challenges');
+                          navigate("/dashboard/manage-challenges");
                           setIsMobileMenuOpen(false);
                         }}
@@ -520,10 +518,10 @@
                   <button
                     className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-left ${
-                      isActive('/dashboard/profile')
-                        ? 'bg-[#FFB800] text-black'
-                        : 'hover:bg-[#FFB800] hover:text-black'
+                      isActive("/dashboard/profile")
+                        ? "bg-[#FFB800] text-black"
+                        : "hover:bg-[#FFB800] hover:text-black"
                     }`}
                     onClick={() => {
-                      navigate('/dashboard/profile');
+                      navigate("/dashboard/profile");
                       setIsMobileMenuOpen(false);
                     }}
Index: client/src/Register/Register.jsx
===================================================================
--- client/src/Register/Register.jsx	(revision 19e03e25bf4d17f3bfa968cf7dc11ac465d7948b)
+++ client/src/Register/Register.jsx	(revision 36a220abcc3c3ffd6a3ca10dbe01f9e910d4b26b)
@@ -1,13 +1,13 @@
-import React from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-import { useState } from 'react';
-import { supabase } from '../contexts/AuthContext';
-import { signInWithGoogle } from '@/services/registerLoginService';
-import { useAuth } from '../contexts/AuthContext';
+import React from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useState } from "react";
+import { supabase } from "../contexts/AuthContext";
+import { signInWithGoogle } from "@/services/registerLoginService";
+import { useAuth } from "../contexts/AuthContext";
 
 const Register = () => {
   const { register } = useAuth();
   const [formErrors, setFormErrors] = useState({});
-  const [generalError, setGeneralError] = useState('');
+  const [generalError, setGeneralError] = useState("");
   const [googleLoading, setGoogleLoading] = useState(false);
   const nav = useNavigate();
@@ -26,12 +26,12 @@
 
   const [formData, setFormData] = useState({
-    username: '',
-    email: '',
-    password: '',
-    confirmPassword: '',
-    name: '',
+    username: "",
+    email: "",
+    password: "",
+    confirmPassword: "",
+    name: "",
   });
   function validateLocalEmailFormat(email) {
-    return email.includes('@') && email.includes('.');
+    return email.includes("@") && email.includes(".");
   }
   const handleInputChange = (e) => {
@@ -44,10 +44,10 @@
       setFormErrors((prev) => ({ ...prev, [name]: undefined }));
     }
-    setGeneralError('');
+    setGeneralError("");
   };
   const handleSubmit = async (e) => {
     e.preventDefault();
     setLoading(true);
-    setGeneralError('');
+    setGeneralError("");
     setFormErrors({});
 
@@ -55,5 +55,5 @@
       setFormErrors((prev) => ({
         ...prev,
-        email: 'Please enter a valid email format.',
+        email: "Please enter a valid email format.",
       }));
       setLoading(false);
@@ -63,5 +63,5 @@
       setFormErrors((prev) => ({
         ...prev,
-        passwordMatch: 'Passwords do not match',
+        passwordMatch: "Passwords do not match",
       }));
       setLoading(false);
@@ -75,5 +75,5 @@
       !formData.confirmPassword
     ) {
-      setGeneralError('Please fill in all required fields.');
+      setGeneralError("Please fill in all required fields.");
       setLoading(false);
       return;
@@ -92,5 +92,5 @@
 
       if (result.success) {
-        nav('/dashboard');
+        nav("/dashboard");
       } else {
         if (result.errors) {
@@ -98,10 +98,10 @@
         }
         setGeneralError(
-          result.error || 'Registration failed. Please try again.'
+          result.error || "Registration failed. Please try again."
         );
       }
     } catch (error) {
-      console.error('Unexpected error in Register handleSubmit:', error);
-      setGeneralError('A client-side error occurred. Please try again.');
+      console.error("Unexpected error in Register handleSubmit:", error);
+      setGeneralError("A client-side error occurred. Please try again.");
     } finally {
       setLoading(false);
@@ -121,8 +121,8 @@
       >
         <div className="w-full max-w-xs md:max-w-sm my-auto">
-          <h1 className="text-xl 2xl:text-3xl font-bold mb-2 mt-2 text-center">
+          <h1 className="text-xl 2xl:text-3xl font-bold mb-2 mt-2 2xl:mb-5 text-center">
             Create an account
           </h1>
-          <div className="fieldset bg-base-200 border-base-300 rounded-box w-full border p-3 md:p-4 space-y-1.5 md:space-y-2">
+          <div className="fieldset bg-base-200 border-base-300 rounded-box w-full border p-3 md:p-4 space-y-1.5 md:space-y-2 2xl:space-y-4">
             <div>
               <label className="label text-sm py-0.5" htmlFor="name">
@@ -197,5 +197,5 @@
                   id="password"
                   name="password"
-                  type={showPassword.password ? 'text' : 'password'}
+                  type={showPassword.password ? "text" : "password"}
                   className="input input-sm w-full pr-8 2xl:input-lg"
                   placeholder="Password"
@@ -207,5 +207,5 @@
                   type="button"
                   className="absolute top-0 right-0 h-full px-2 flex items-center z-10"
-                  onClick={() => togglePasswordVisibility('password')}
+                  onClick={() => togglePasswordVisibility("password")}
                   tabIndex="-1"
                   disabled={loading || googleLoading}
@@ -286,5 +286,5 @@
                 <input
                   id="confirmPassword"
-                  type={showPassword.confirmPassword ? 'text' : 'password'}
+                  type={showPassword.confirmPassword ? "text" : "password"}
                   name="confirmPassword"
                   value={formData.confirmPassword}
@@ -297,5 +297,5 @@
                   type="button"
                   className="absolute top-0 right-0 h-full px-2 flex items-center z-10"
-                  onClick={() => togglePasswordVisibility('confirmPassword')}
+                  onClick={() => togglePasswordVisibility("confirmPassword")}
                   tabIndex="-1"
                   disabled={loading || googleLoading}
@@ -362,6 +362,6 @@
                 !formData.password ||
                 !formData.confirmPassword
-                  ? 'Please fill in all fields'
-                  : ''
+                  ? "Please fill in all fields"
+                  : ""
               }
             >
@@ -433,5 +433,5 @@
           <a
             href="/login"
-            className="underline mt-1 mb-3 text-sm text-center block"
+            className="underline mt-1 mb-3 2xl:mt-3 text-sm text-center block"
           >
             Already have an account?