Index: client/src/Dashboard/components/Navbar.jsx
===================================================================
--- client/src/Dashboard/components/Navbar.jsx	(revision 541d02f2b464b3bddd80cdf36387be86458dc896)
+++ client/src/Dashboard/components/Navbar.jsx	(revision 229181032a0b6c2b6df07c1fc361064d48f414ed)
@@ -4,4 +4,5 @@
 import logoText from '../../assets/images/logoText.png';
 import pp from '../../assets/images/pp.svg';
+import RankBadge from "@/utils/RankBadge.jsx";
 
 export default function Navbar() {
@@ -118,5 +119,5 @@
           >
             <span className="font-medium text-left">{user.username}</span>
-            <span className="text-sm text-base-content/70">{user.rank}</span>
+            <RankBadge rankName={user.rank} size="md" />
           </div>
         </button>
Index: client/src/Dashboard/components/Profile.jsx
===================================================================
--- client/src/Dashboard/components/Profile.jsx	(revision 541d02f2b464b3bddd80cdf36387be86458dc896)
+++ client/src/Dashboard/components/Profile.jsx	(revision 229181032a0b6c2b6df07c1fc361064d48f414ed)
@@ -3,4 +3,5 @@
 import pp from "../../assets/images/pp.svg";
 import Navbar from "./Navbar";
+import RankBadge from "@/utils/RankBadge.jsx";
 
 const Profile = () => {
@@ -35,7 +36,7 @@
             <div className="mt-4">
               <p className="text-lg">
-                <span className="font-bold">Rank:</span> {user.rank}
+                <RankBadge rankName={user.rank} size="lg" />
               </p>
-              <p className="text-lg">
+              <p className="text-lg mt-5">
                 <span className="font-bold">Points:</span> {user.points}
               </p>