Index: backend/controllers/taskController.js
===================================================================
--- backend/controllers/taskController.js	(revision e08f729d597e558b87f81375e7240ecd63e86070)
+++ backend/controllers/taskController.js	(revision fc18704d5a38d331d7c9a1b5820cc20517ca1c63)
@@ -191,13 +191,8 @@
 
   try {
-    const parsedDate = new Date(date);
-    const startOfDay = new Date(parsedDate.setHours(0, 0, 0, 0));
-    const endOfDay = new Date(parsedDate.setHours(24, 0, 0, 0));
-
     const challenges = await prisma.challenges.findMany({
       where: {
         solving_date: {
-          gte: startOfDay,
-          lt: endOfDay,
+          equals: new Date(date),
         },
       },
@@ -330,10 +325,14 @@
   Novice: { id: 1, title: "Novice", requiredPoints: 0 },
   Learner: { id: 2, title: "Learner", requiredPoints: 300 },
-  Coder: { id: 3, title: "Coder", requiredPoints: 800 },
-  "Problem Solver": { id: 4, title: "Problem Solver", requiredPoints: 1500 },
-  Algorithmist: { id: 5, title: "Algorithmist", requiredPoints: 2500 },
-  "Hacker Mage": { id: 6, title: "Hacker Mage", requiredPoints: 4000 },
-  Challenger: { id: 7, title: "Challenger", requiredPoints: 6000 },
-  "Code Master": { id: 8, title: "Code Master", requiredPoints: 8500 },
+  "Junior Developer": { id: 3, title: "Junior Developer", requiredPoints: 800 },
+  Developer: { id: 4, title: "Developer", requiredPoints: 1500 },
+  "Senior Developer": {
+    id: 5,
+    title: "Senior Developer",
+    requiredPoints: 2500,
+  },
+  Expert: { id: 6, title: "Expert", requiredPoints: 4000 },
+  Master: { id: 7, title: "Master", requiredPoints: 6000 },
+  "Grand Master": { id: 8, title: "Grand Master", requiredPoints: 8500 },
   "FINKI Royalty": { id: 9, title: "FINKI Royalty", requiredPoints: 11000 },
   "FINKI Legend": { id: 10, title: "FINKI Legend", requiredPoints: 16000 },
Index: client/src/Dashboard/components/Navbar.jsx
===================================================================
--- client/src/Dashboard/components/Navbar.jsx	(revision e08f729d597e558b87f81375e7240ecd63e86070)
+++ client/src/Dashboard/components/Navbar.jsx	(revision fc18704d5a38d331d7c9a1b5820cc20517ca1c63)
@@ -4,5 +4,5 @@
 import logoText from "../../assets/images/logoText.png";
 import pp from "../../assets/images/pp.svg";
-import RankBadge from "@/utils/RankBadge";
+import RankBadgeNav from "@/utils/RankBadgeForNavbar";
 import { useAuth } from "@/contexts/AuthContext";
 
@@ -123,8 +123,9 @@
             </button>
           </li>
-        </ul>
-        {user && user.isModerator && (
-          <div className="border-t border-base-content/10 pt-2 w-full">
-            <ul className="menu menu-lg gap-2 ">
+
+          {user && user.isModerator && (
+            <>
+              <hr />
+
               <li>
                 <button
@@ -193,7 +194,7 @@
                 </button>
               </li>
-            </ul>
-          </div>
-        )}
+            </>
+          )}
+        </ul>
       </div>
 
@@ -217,5 +218,5 @@
             </span>
             <span className="text-sm text-base-content/70 mt-2">
-              {user && <RankBadge rankName={user.rank} size="sm" />}
+              {user && <RankBadgeNav rankName={user.rank} size="sm" />}
             </span>
           </div>
Index: client/src/Dashboard/components/Profile.jsx
===================================================================
--- client/src/Dashboard/components/Profile.jsx	(revision e08f729d597e558b87f81375e7240ecd63e86070)
+++ client/src/Dashboard/components/Profile.jsx	(revision fc18704d5a38d331d7c9a1b5820cc20517ca1c63)
@@ -3,5 +3,5 @@
 import pp from "../../assets/images/pp.svg";
 import Navbar from "./Navbar";
-import RankBadge from "@/utils/RankBadge.jsx";
+import RankBadgeNav from "@/utils/RankBadgeForNavbar";
 import { useAuth } from "../../contexts/AuthContext.jsx";
 import { useNavigate } from "react-router-dom";
@@ -39,5 +39,5 @@
                 <div className="mt-4">
                   <div className="text-lg">
-                    <RankBadge rankName={user.rank} size="lg" />
+                    <RankBadgeNav rankName={user.rank} size="lg" />
                   </div>
                   <p className="text-lg mt-5">
Index: client/src/LandingPage/components/LeaderBoardEx.jsx
===================================================================
--- client/src/LandingPage/components/LeaderBoardEx.jsx	(revision e08f729d597e558b87f81375e7240ecd63e86070)
+++ client/src/LandingPage/components/LeaderBoardEx.jsx	(revision fc18704d5a38d331d7c9a1b5820cc20517ca1c63)
@@ -118,89 +118,93 @@
 
   return (
-    <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>
-
-        {pagination && (
-          <div className="flex">
-            <div className="stat">
-              <div className="stat-title">Total Users</div>
-
-              <div className="text-3xl flex justify-center items-center">
-                {pagination.totalUsers}
+    <>
+      <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>
+
+          {pagination && (
+            <div className="flex">
+              <div className="stat">
+                <div className="stat-title">Total Users</div>
+
+                <div className="text-3xl flex justify-center items-center">
+                  {pagination.totalUsers}
+                </div>
               </div>
-            </div>
-            <div className="stat">
-              <div className="stat-title">Showing</div>
-
-              <div className="text-3xl flex justify-center items-center">
-                {leaderboard.length}
+              <div className="stat">
+                <div className="stat-title">Showing</div>
+
+                <div className="text-3xl flex justify-center items-center">
+                  {leaderboard.length}
+                </div>
               </div>
             </div>
+          )}
+
+          <div className="w-full max-w-4xl">
+            <div className="rounded-box border border-base-content/5 bg-base-100">
+              <table className="table w-full">
+                <thead>
+                  <tr>
+                    <th>Rank</th>
+                    <th>Username</th>
+                    <th>Rank Tier</th>
+                    <th>Points</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {leaderboard.map((user, index) => (
+                    <tr key={user.id} className="hover">
+                      <th>{getPosition(index)}</th>
+                      <td className="font-medium">{user.username}</td>
+                      <td>
+                        <div>
+                          <RankBadge rankName={user.rank} />
+                        </div>
+                      </td>
+                      <td className="font-mono font-bold">{user.points}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
           </div>
-        )}
-
-        <div className="w-full max-w-4xl">
-          <div className="rounded-box border border-base-content/5 bg-base-100">
-            <table className="table w-full">
-              <thead>
-                <tr>
-                  <th>Rank</th>
-                  <th>Username</th>
-                  <th>Rank Tier</th>
-                  <th>Points</th>
-                </tr>
-              </thead>
-              <tbody>
-                {leaderboard.map((user, index) => (
-                  <tr key={user.id} className="hover">
-                    <th>{getPosition(index)}</th>
-                    <td className="font-medium">{user.username}</td>
-                    <td>
-                      <RankBadge rankName={user.rank} size="md" />
-                    </td>
-                    <td className="font-mono font-bold">{user.points}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
+
+          {error && leaderboard.length > 0 && (
+            <div className="alert alert-warning">
+              <span>Error loading more data: {error}</span>
+            </div>
+          )}
+
+          {pagination && pagination.hasNextPage && (
+            <button
+              className={`btn btn-lg ${
+                loadingMore ? "btn-disabled" : "btn-primary"
+              }`}
+              onClick={handleLoadMore}
+              disabled={loadingMore}
+            >
+              {loadingMore ? (
+                <>
+                  <span className="loading loading-spinner"></span>
+                  Loading...
+                </>
+              ) : (
+                "Load More"
+              )}
+            </button>
+          )}
+
+          {pagination && !pagination.hasNextPage && leaderboard.length > 0 && (
+            <div className="text-center text-base-content/70">
+              <p>You've reached the end of the leaderboard!</p>
+            </div>
+          )}
         </div>
-
-        {error && leaderboard.length > 0 && (
-          <div className="alert alert-warning">
-            <span>Error loading more data: {error}</span>
-          </div>
-        )}
-
-        {pagination && pagination.hasNextPage && (
-          <button
-            className={`btn btn-lg ${
-              loadingMore ? "btn-disabled" : "btn-primary"
-            }`}
-            onClick={handleLoadMore}
-            disabled={loadingMore}
-          >
-            {loadingMore ? (
-              <>
-                <span className="loading loading-spinner"></span>
-                Loading...
-              </>
-            ) : (
-              "Load More"
-            )}
-          </button>
-        )}
-
-        {pagination && !pagination.hasNextPage && leaderboard.length > 0 && (
-          <div className="text-center text-base-content/70">
-            <p>You've reached the end of the leaderboard!</p>
-          </div>
-        )}
       </div>
-    </div>
+    </>
   );
 };
Index: client/src/LandingPage/components/OurRankSystem.jsx
===================================================================
--- client/src/LandingPage/components/OurRankSystem.jsx	(revision e08f729d597e558b87f81375e7240ecd63e86070)
+++ client/src/LandingPage/components/OurRankSystem.jsx	(revision fc18704d5a38d331d7c9a1b5820cc20517ca1c63)
@@ -8,75 +8,104 @@
 
   return (
-    <div
-      data-theme="luxury"
-      className="dashboard bg-base-200 flex overflow-none p-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">
-          Climb the ranks and show your coding prowess! Each rank represents
-          your dedication and skill level in competitive programming.
-        </p>
+    <>
+      <style>
+        {`
+          @keyframes breathe {
+            0%, 100% {
+              filter: drop-shadow(0 0 3px var(--glow-color));
+            }
+            50% {
+              filter: drop-shadow(0 0 8px var(--glow-color));
+            }
+          }
+          .breathing-glow {
+            animation: breathe 2.5s ease-in-out infinite;
+          }
+        `}
+      </style>
+      <div
+        data-theme="luxury"
+        className="dashboard bg-base-200 flex overflow-none p-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">
+            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">
-            <thead>
-              <tr>
-                <th>Rank #</th>
-                <th>Title</th>
-                <th>Required Points</th>
-                <th>Icon</th>
-              </tr>
-            </thead>
-            <tbody>
-              {rankData.map((rank) => (
-                <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
-                  </td>
-                  <td>
-                    <div className="flex items-center gap-2">
-                      <img
-                        src={rank.icon}
-                        alt={rank.title}
-                        className="w-8 h-8"
-                        onError={(e) => {
-                          e.target.style.display = "none";
-                        }}
-                      />
-                    </div>
-                  </td>
+          <div className="rounded-box border border-base-content/5 bg-base-100 w-full max-w-4xl p-10">
+            <table className="table">
+              <thead>
+                <tr>
+                  <th>Rank #</th>
+                  <th>Title</th>
+                  <th>Required Points</th>
+                  <th>Icon</th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+              </thead>
+              <tbody>
+                {rankData.map((rank) => {
+                  const isGlowing = rank.id >= 4; // Developer rank is ID 4
 
-        <div className="text-center text-base-content/70 max-w-2xl">
-          <p className="mb-4">
-            <strong>How to earn points:</strong>
-          </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>
-              <p>
-                Solve the challenges as early as you can every day. Remember
-                they start 7 AM sharp
-              </p>
-            </div>
-            <div className="bg-base-100 p-6 rounded-lg">
-              <h3 className="font-semibold mb-2">
-                As few attempts as possible
-              </h3>
-              <p>
-                Every additional attempt on the excercise earns you less points
-              </p>
+                  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
+                      </td>
+                      <td>
+                        <svg
+                          className={`w-6 h-6 ${
+                            isGlowing ? "breathing-glow" : ""
+                          }`}
+                          viewBox="0 0 24 24"
+                          fill={rank.color || "#FFFFFF"}
+                          xmlns="http://www.w3.org/2000/svg"
+                          style={
+                            isGlowing
+                              ? {
+                                  "--glow-color": rank.color,
+                                }
+                              : {}
+                          }
+                        >
+                          <path d="M12 22L2 15.5V2H22V15.5L12 22Z" />
+                        </svg>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+
+          <div className="text-center text-base-content/70 max-w-2xl">
+            <p className="mb-4">
+              <strong>How to earn points:</strong>
+            </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>
+                <p>
+                  Solve the challenges as early as you can every day. Remember
+                  they start 7 AM sharp
+                </p>
+              </div>
+              <div className="bg-base-100 p-6 rounded-lg">
+                <h3 className="font-semibold mb-2">
+                  As few attempts as possible
+                </h3>
+                <p>
+                  Every additional attempt on the excercise earns you less
+                  points
+                </p>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
Index: client/src/contexts/AuthContext.jsx
===================================================================
--- client/src/contexts/AuthContext.jsx	(revision e08f729d597e558b87f81375e7240ecd63e86070)
+++ client/src/contexts/AuthContext.jsx	(revision fc18704d5a38d331d7c9a1b5820cc20517ca1c63)
@@ -116,5 +116,5 @@
       localStorage.removeItem("lastResetDate");
       localStorage.removeItem("user");
-
+      navigate("/");
       await supabase.auth.signOut();
 
Index: client/src/routes/ProtectedRoute.jsx
===================================================================
--- client/src/routes/ProtectedRoute.jsx	(revision e08f729d597e558b87f81375e7240ecd63e86070)
+++ client/src/routes/ProtectedRoute.jsx	(revision fc18704d5a38d331d7c9a1b5820cc20517ca1c63)
@@ -5,4 +5,6 @@
   const { user, loading } = useAuth();
   const location = useLocation();
+  const isLogout = localStorage.getItem("logout");
+  console.log(isLogout);
   // if (loading) {
   //   return (
Index: client/src/utils/RankBadge.jsx
===================================================================
--- client/src/utils/RankBadge.jsx	(revision e08f729d597e558b87f81375e7240ecd63e86070)
+++ client/src/utils/RankBadge.jsx	(revision fc18704d5a38d331d7c9a1b5820cc20517ca1c63)
@@ -1,22 +1,49 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { getRankBadgeProps } from "./rankUtils";
 
 const RankBadge = ({ rankName, size = "md", className = "" }) => {
-  const {
-    rankInfo,
-    className: badgeClassName,
-    style,
-    iconClassName,
-  } = getRankBadgeProps(rankName, size);
+  const { rankInfo, style: textStyle } = useMemo(
+    () => getRankBadgeProps(rankName, size),
+    [rankName, size]
+  );
+
+  const isGlowing = rankInfo?.id >= 4;
 
   return (
-    <div className={`${badgeClassName} ${className}`} style={style}>
-      <img
-        src={rankInfo.icon}
-        alt={rankInfo.title}
-        className={iconClassName}
-      />
-      <span>{rankName}</span>
-    </div>
+    <>
+      <style>
+        {`
+          @keyframes breathe {
+            0%, 100% {
+              filter: drop-shadow(0 0 3px var(--glow-color));
+            }
+            50% {
+              filter: drop-shadow(0 0 8px var(--glow-color));
+            }
+          }
+          .breathing-glow {
+            animation: breathe 2.5s ease-in-out infinite;
+          }
+        `}
+      </style>
+      <div className="flex gap-3">
+        <span className="w-25 font-bold">{rankName}</span>
+        <svg
+          className={`w-6 h-6 ${isGlowing ? "breathing-glow" : ""}`}
+          viewBox="0 0 24 24"
+          fill={rankInfo?.color || "#FFFFFF"}
+          xmlns="http://www.w3.org/2000/svg"
+          style={
+            isGlowing
+              ? {
+                  "--glow-color": rankInfo.color,
+                }
+              : {}
+          }
+        >
+          <path d="M12 22L2 15.5V2H22V15.5L12 22Z" />
+        </svg>
+      </div>
+    </>
   );
 };
Index: client/src/utils/RankBadgeForNavbar.jsx
===================================================================
--- client/src/utils/RankBadgeForNavbar.jsx	(revision fc18704d5a38d331d7c9a1b5820cc20517ca1c63)
+++ client/src/utils/RankBadgeForNavbar.jsx	(revision fc18704d5a38d331d7c9a1b5820cc20517ca1c63)
@@ -0,0 +1,25 @@
+import React, { useMemo } from "react";
+import { getRankBadgeProps } from "./rankUtils";
+
+const RankBadgeNav = ({ rankName, size = "md", className = "" }) => {
+  const {
+    rankInfo,
+    className: badgeClassName,
+    style,
+  } = useMemo(() => getRankBadgeProps(rankName, size), [rankName, size]);
+
+  const isGlowing = rankInfo?.id >= 4;
+
+  // Add a static box-shadow for the glow effect if the rank is high enough
+  const finalStyle = isGlowing
+    ? { ...style, boxShadow: `0 0 8px  ${rankInfo.color}` }
+    : style;
+
+  return (
+    <div className={`${badgeClassName} ${className}`} style={finalStyle}>
+      <span>{rankName}</span>
+    </div>
+  );
+};
+
+export default RankBadgeNav;
Index: client/src/utils/rankUtils.js
===================================================================
--- client/src/utils/rankUtils.js	(revision e08f729d597e558b87f81375e7240ecd63e86070)
+++ client/src/utils/rankUtils.js	(revision fc18704d5a38d331d7c9a1b5820cc20517ca1c63)
@@ -1,83 +1,83 @@
-import noviceIcon from '../assets/rankIcons/novice.png';
-import learnerIcon from '../assets/rankIcons/learner.png';
-import coderIcon from '../assets/rankIcons/coder.png';
-import problemSolverIcon from '../assets/rankIcons/problemsolver.png';
-import algorithmistIcon from '../assets/rankIcons/algorithmist.png';
-import hackerMageIcon from '../assets/rankIcons/hackermage.png';
-import challengerIcon from '../assets/rankIcons/challenger.png';
-import codeMasterIcon from '../assets/rankIcons/codemaster.png';
-import finkiRoyaltyIcon from '../assets/rankIcons/royalty.png';
-import finkiLegendIcon from '../assets/rankIcons/finkilegend.png';
+import noviceIcon from "../assets/rankIcons/novice.png";
+import learnerIcon from "../assets/rankIcons/learner.png";
+import coderIcon from "../assets/rankIcons/coder.png";
+import problemSolverIcon from "../assets/rankIcons/problemsolver.png";
+import algorithmistIcon from "../assets/rankIcons/algorithmist.png";
+import hackerMageIcon from "../assets/rankIcons/hackermage.png";
+import challengerIcon from "../assets/rankIcons/challenger.png";
+import codeMasterIcon from "../assets/rankIcons/codemaster.png";
+import finkiRoyaltyIcon from "../assets/rankIcons/royalty.png";
+import finkiLegendIcon from "../assets/rankIcons/finkilegend.png";
 
 export const RANK_DATA = {
   Novice: {
     id: 1,
-    title: 'Novice',
+    title: "Novice",
     requiredPoints: 0,
     icon: noviceIcon,
-    color: '#A0AEC0',
+    color: "	#e4b685", // Bronze
   },
   Learner: {
     id: 2,
-    title: 'Learner',
+    title: "Learner",
     requiredPoints: 300,
     icon: learnerIcon,
-    color: '#4299E1',
+    color: "#ac4f00", // Slightly darker Bronze
   },
-  Coder: {
+  "Junior Developer": {
     id: 3,
-    title: 'Coder',
+    title: "Junior Developer",
     requiredPoints: 800,
     icon: coderIcon,
-    color: '#48BB78',
+    color: "#7e3a06", // Darker Bronze / Sienna
   },
-  'Problem Solver': {
+  Developer: {
     id: 4,
-    title: 'Problem Solver',
+    title: "Developer",
     requiredPoints: 1500,
     icon: problemSolverIcon,
-    color: '#38B2AC',
+    color: "#cccccc", // Silver
   },
-  Algorithmist: {
+  "Senior Developer": {
     id: 5,
-    title: 'Algorithmist',
+    title: "Senior Developer",
     requiredPoints: 2500,
     icon: algorithmistIcon,
-    color: '#805AD5',
+    color: "#a4a4a4", // Slightly darker Silver
   },
-  'Hacker Mage': {
+  Expert: {
     id: 6,
-    title: 'Hacker Mage',
+    title: "Expert",
     requiredPoints: 4000,
     icon: hackerMageIcon,
-    color: '#D69E2E',
+    color: "#6a6a6a", // Darker Silver
   },
-  Challenger: {
+  Master: {
     id: 7,
-    title: 'Challenger',
+    title: "Master",
     requiredPoints: 6000,
     icon: challengerIcon,
-    color: '#F56565',
+    color: "#eddd82", // Gold
   },
-  'Code Master': {
+  "Grand Master": {
     id: 8,
-    title: 'Code Master',
+    title: "Grand Master",
     requiredPoints: 8500,
     icon: codeMasterIcon,
-    color: '#ED8936',
+    color: "#F4C430", // Saffron / Richer Gold
   },
-  'FINKI Royalty': {
+  "FINKI Royalty": {
     id: 9,
-    title: 'FINKI Royalty',
+    title: "FINKI Royalty",
     requiredPoints: 11000,
     icon: finkiRoyaltyIcon,
-    color: '#ECC94B',
+    color: "#E5B80B", // Darker Gold
   },
-  'FINKI Legend': {
+  "FINKI Legend": {
     id: 10,
-    title: 'FINKI Legend',
+    title: "FINKI Legend",
     requiredPoints: 16000,
     icon: finkiLegendIcon,
-    color: '#9F7AEA',
+    color: "#00BFFF", // Bright Blue (DeepSkyBlue)
   },
 };
@@ -89,5 +89,5 @@
  */
 export const getRankInfo = (rankName) => {
-  return RANK_DATA[rankName] || RANK_DATA['Novice'];
+  return RANK_DATA[rankName] || RANK_DATA["Novice"];
 };
 
@@ -104,17 +104,17 @@
  * @returns {object} Props for styling the rank badge
  */
-export const getRankBadgeProps = (rankName, size = 'md') => {
+export const getRankBadgeProps = (rankName, size = "md") => {
   const rankInfo = getRankInfo(rankName);
 
   const sizeClasses = {
-    sm: 'text-xs px-2 py-1',
-    md: 'text-sm px-3 py-1',
-    lg: 'text-base px-4 py-2',
+    sm: "text-xs px-2 py-1",
+    md: "text-sm px-3 py-1",
+    lg: "text-base px-4 py-2",
   };
 
   const iconSizes = {
-    sm: 'w-4 h-4',
-    md: 'w-5 h-5',
-    lg: 'w-6 h-6',
+    sm: "w-4 h-4",
+    md: "w-5 h-5",
+    lg: "w-6 h-6",
   };
 
@@ -124,5 +124,5 @@
     style: {
       backgroundColor: rankInfo.color,
-      color: '#FFFFFF',
+      color: "#FFFFFF",
     },
     iconClassName: iconSizes[size],