From a22e1408b3ee5a5167c9fd300922732f0eacb026 Mon Sep 17 00:00:00 2001
From: Diya-od <diyaodedara245@gmail.com>
Date: Tue, 2 Jun 2026 21:52:54 +0530
Subject: [PATCH 1/6] add dynamic clear button to leaderboard search

---
 frontend/leaderboard.html | 24 +++++++++++++++++++++++-
 frontend/styles/main.css  | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/frontend/leaderboard.html b/frontend/leaderboard.html
index f7c46088..15458662 100644
--- a/frontend/leaderboard.html
+++ b/frontend/leaderboard.html
@@ -81,6 +81,14 @@ <h1 class="page-title">Leaderboard</h1>
               autocomplete="off"
               spellcheck="false"
             />
+            <button
+              type="button"
+              id="clear-search"
+              class="clear-search-btn"
+              aria-label="Clear search"
+            >
+              ✕
+            </button>
             <span class="search-result-count" id="search-result-count"></span>
             <kbd class="search-shortcut" id="search-shortcut">Ctrl+K</kbd>
           </div>
@@ -146,11 +154,25 @@ <h1 class="page-title">Leaderboard</h1>
 
         const searchInput = document.getElementById("leaderboard-search");
         const shortcutBadge = document.getElementById("search-shortcut");
+        const clearBtn = document.getElementById("clear-search");
 
         searchInput.addEventListener("input", (e) => {
           currentSearchTerm = e.target.value.toLowerCase().trim();
+          
+          clearBtn.style.display =
+          e.target.value.trim() !== "" ? "flex" : "none";
+
           applyFiltersAndRender();
         });
+        clearBtn.addEventListener("click", () => {
+  searchInput.value = "";
+  currentSearchTerm = "";
+
+  clearBtn.style.display = "none";
+
+  searchInput.focus();
+  applyFiltersAndRender();
+});
 
         searchInput.addEventListener("focus", () => {
           shortcutBadge.style.opacity = "0";
@@ -196,7 +218,7 @@ <h1 class="page-title">Leaderboard</h1>
               applyFiltersAndRender();
             }
           });
-
+          clearBtn.style.display = "none";
         fetchLeaderboardData();
       });
 
diff --git a/frontend/styles/main.css b/frontend/styles/main.css
index 3c4d5781..accd6792 100644
--- a/frontend/styles/main.css
+++ b/frontend/styles/main.css
@@ -2305,6 +2305,39 @@ body::-webkit-scrollbar-thumb {
   transition: opacity 0.15s ease;
   user-select: none;
 }
+.clear-search-btn {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--red);
+  width: 26px;
+  height: 26px;
+  border-radius: 4px;
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-family: "Fira Code", monospace;
+  font-size: 0.8rem;
+
+  transition: all 0.2s ease;
+}
+
+.clear-search-btn:hover {
+  border-color: var(--red);
+  background: rgba(255, 51, 51, 0.12);
+
+  box-shadow:
+    0 0 10px rgba(255, 51, 51, 0.25),
+    inset 0 0 8px rgba(255, 51, 51, 0.08);
+
+  text-shadow: 0 0 6px rgba(255, 51, 51, 0.8);
+}
+
+.clear-search-btn:active {
+  transform: scale(0.95);
+}
 
 .no-results {
   text-align: center;

From 8ecdb5ada0dde81b8f56cc2bbd55c9e7fe9240e1 Mon Sep 17 00:00:00 2001
From: Diya-od <diyaodedara245@gmail.com>
Date: Wed, 3 Jun 2026 22:40:31 +0530
Subject: [PATCH 2/6] change according to suggestion

---
 frontend/leaderboard.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/leaderboard.html b/frontend/leaderboard.html
index 15458662..752a2344 100644
--- a/frontend/leaderboard.html
+++ b/frontend/leaderboard.html
@@ -81,6 +81,9 @@ <h1 class="page-title">Leaderboard</h1>
               autocomplete="off"
               spellcheck="false"
             />
+            
+            <span class="search-result-count" id="search-result-count"></span>
+            <kbd class="search-shortcut" id="search-shortcut">Ctrl+K</kbd>
             <button
               type="button"
               id="clear-search"
@@ -89,8 +92,6 @@ <h1 class="page-title">Leaderboard</h1>
             >
               ✕
             </button>
-            <span class="search-result-count" id="search-result-count"></span>
-            <kbd class="search-shortcut" id="search-shortcut">Ctrl+K</kbd>
           </div>
         </div>
 

From fdc769b026750c3872d3a330a63450f129d9701d Mon Sep 17 00:00:00 2001
From: Diya-od <diyaodedara245@gmail.com>
Date: Fri, 5 Jun 2026 16:33:48 +0530
Subject: [PATCH 3/6] Add scroll to top button

---
 frontend/leaderboard.html | 65 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 64 insertions(+), 1 deletion(-)

diff --git a/frontend/leaderboard.html b/frontend/leaderboard.html
index 752a2344..9940d62e 100644
--- a/frontend/leaderboard.html
+++ b/frontend/leaderboard.html
@@ -11,6 +11,47 @@
       rel="stylesheet"
     />
     <link rel="stylesheet" href="styles/main.css" />
+    <style>
+#scrollTopBtn {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+
+  display: none;
+  z-index: 999;
+
+  padding: 0.7rem 1rem;
+
+  font-family: "Fira Code", monospace;
+  font-size: 0.8rem;
+  font-weight: 600;
+
+  color: var(--green);
+  background: rgba(0, 0, 0, 0.85);
+
+  border: 1px solid var(--green);
+  border-radius: 6px;
+
+  cursor: pointer;
+
+  text-shadow: 0 0 5px rgba(0, 255, 100, 0.5);
+  box-shadow: 0 0 10px rgba(0, 255, 100, 0.15);
+
+  transition: all 0.25s ease;
+}
+
+#scrollTopBtn:hover {
+  transform: translateY(-3px);
+  background: rgba(0, 255, 100, 0.08);
+  box-shadow:
+    0 0 12px rgba(0, 255, 100, 0.35),
+    0 0 20px rgba(0, 255, 100, 0.15);
+}
+
+#scrollTopBtn:active {
+  transform: translateY(0);
+}
+</style>
     <link rel="icon" type="image/png" href="assets/logo.png" />
     <script src="js/navbar.js"></script>
   </head>
@@ -81,7 +122,7 @@ <h1 class="page-title">Leaderboard</h1>
               autocomplete="off"
               spellcheck="false"
             />
-            
+
             <span class="search-result-count" id="search-result-count"></span>
             <kbd class="search-shortcut" id="search-shortcut">Ctrl+K</kbd>
             <button
@@ -145,6 +186,10 @@ <h1 class="page-title">Leaderboard</h1>
       </div>
     </main>
 
+    <button id="scrollTopBtn" aria-label="Scroll to top">
+        [ ↑ TOP ]
+      </button>
+
     <script>
       document.addEventListener("DOMContentLoaded", () => {
         document.querySelectorAll(".tab").forEach((tab) => {
@@ -220,6 +265,24 @@ <h1 class="page-title">Leaderboard</h1>
             }
           });
           clearBtn.style.display = "none";
+
+          const scrollTopBtn = document.getElementById("scrollTopBtn");
+
+window.addEventListener("scroll", () => {
+  if (window.scrollY > 300) {
+    scrollTopBtn.style.display = "block";
+  } else {
+    scrollTopBtn.style.display = "none";
+  }
+});
+
+scrollTopBtn.addEventListener("click", () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth",
+  });
+});
+
         fetchLeaderboardData();
       });
 

From 28012992ac40bedce3d2392c0a608ef04b6354df Mon Sep 17 00:00:00 2001
From: Diya-od <diyaodedara245@gmail.com>
Date: Sun, 7 Jun 2026 23:13:39 +0530
Subject: [PATCH 4/6] add up button for mobile

---
 frontend/leaderboard.html | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/leaderboard.html b/frontend/leaderboard.html
index e8ab46cd..84a13909 100644
--- a/frontend/leaderboard.html
+++ b/frontend/leaderboard.html
@@ -39,6 +39,15 @@
 
   transition: all 0.25s ease;
 }
+#scrollTopBtn {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  #scrollTopBtn {
+    display: none;
+  }
+}
 
 #scrollTopBtn:hover {
   transform: translateY(-3px);
@@ -274,7 +283,8 @@ <h1 class="page-title">Leaderboard</h1>
           const scrollTopBtn = document.getElementById("scrollTopBtn");
 
 window.addEventListener("scroll", () => {
-  if (window.scrollY > 300) {
+  
+  if (window.innerWidth <= 768 && window.scrollY > 300) {
     scrollTopBtn.style.display = "block";
   } else {
     scrollTopBtn.style.display = "none";

From 5fc77e214b1299c23fc4184037d13df0184cc7cc Mon Sep 17 00:00:00 2001
From: Diya-od <diyaodedara245@gmail.com>
Date: Mon, 8 Jun 2026 22:30:46 +0530
Subject: [PATCH 5/6] required things added in up button

---
 frontend/js/leaderboard/mobile-scroll-top.js | 20 ++++++
 frontend/js/load-leaderboard.js              |  0
 frontend/leaderboard.html                    | 75 ++------------------
 frontend/styles/main.css                     | 39 ++++++++++
 4 files changed, 64 insertions(+), 70 deletions(-)
 create mode 100644 frontend/js/leaderboard/mobile-scroll-top.js
 delete mode 100644 frontend/js/load-leaderboard.js

diff --git a/frontend/js/leaderboard/mobile-scroll-top.js b/frontend/js/leaderboard/mobile-scroll-top.js
new file mode 100644
index 00000000..722a3ba8
--- /dev/null
+++ b/frontend/js/leaderboard/mobile-scroll-top.js
@@ -0,0 +1,20 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const scrollTopBtn = document.getElementById("scrollTopBtn");
+
+  if (!scrollTopBtn) return;
+
+  window.addEventListener("scroll", () => {
+    if (window.innerWidth <= 768 && window.scrollY > 300) {
+      scrollTopBtn.style.display = "flex";
+    } else {
+      scrollTopBtn.style.display = "none";
+    }
+  });
+
+  scrollTopBtn.addEventListener("click", () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  });
+});
\ No newline at end of file
diff --git a/frontend/js/load-leaderboard.js b/frontend/js/load-leaderboard.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/frontend/leaderboard.html b/frontend/leaderboard.html
index 93421e03..71856fc3 100644
--- a/frontend/leaderboard.html
+++ b/frontend/leaderboard.html
@@ -11,56 +11,6 @@
       rel="stylesheet"
     />
     <link rel="stylesheet" href="styles/main.css" />
-    <style>
-#scrollTopBtn {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-
-  display: none;
-  z-index: 999;
-
-  padding: 0.7rem 1rem;
-
-  font-family: "Fira Code", monospace;
-  font-size: 0.8rem;
-  font-weight: 600;
-
-  color: var(--green);
-  background: rgba(0, 0, 0, 0.85);
-
-  border: 1px solid var(--green);
-  border-radius: 6px;
-
-  cursor: pointer;
-
-  text-shadow: 0 0 5px rgba(0, 255, 100, 0.5);
-  box-shadow: 0 0 10px rgba(0, 255, 100, 0.15);
-
-  transition: all 0.25s ease;
-}
-#scrollTopBtn {
-  display: none;
-}
-
-@media (max-width: 768px) {
-  #scrollTopBtn {
-    display: none;
-  }
-}
-
-#scrollTopBtn:hover {
-  transform: translateY(-3px);
-  background: rgba(0, 255, 100, 0.08);
-  box-shadow:
-    0 0 12px rgba(0, 255, 100, 0.35),
-    0 0 20px rgba(0, 255, 100, 0.15);
-}
-
-#scrollTopBtn:active {
-  transform: translateY(0);
-}
-</style>
     <link rel="icon" type="image/png" href="assets/logo.png" />
     <script src="js/navbar.js"></script>
     <script src="js/leaderboard/tooltip.js"></script>
@@ -209,7 +159,7 @@ <h1 class="page-title">Leaderboard</h1>
     </main>
 
     <button id="scrollTopBtn" aria-label="Scroll to top">
-        [ ↑ TOP ]
+        ⮝ 
       </button>
 
     <script>
@@ -304,25 +254,6 @@ <h1 class="page-title">Leaderboard</h1>
             }
           });
           clearBtn.style.display = "none";
-
-          const scrollTopBtn = document.getElementById("scrollTopBtn");
-
-window.addEventListener("scroll", () => {
-  
-  if (window.innerWidth <= 768 && window.scrollY > 300) {
-    scrollTopBtn.style.display = "block";
-  } else {
-    scrollTopBtn.style.display = "none";
-  }
-});
-
-scrollTopBtn.addEventListener("click", () => {
-  window.scrollTo({
-    top: 0,
-    behavior: "smooth",
-  });
-});
-
         clearBtn.style.display = "none";
         setupSearchListeners();
         setupPaginationListeners();
@@ -532,5 +463,9 @@ <h1 class="page-title">Leaderboard</h1>
     <script src="js/footer.js"></script>
     <script src="js/matrix.js"></script>
     <script src="js/terminal_ui.js"></script>
+    <script src="js/leaderboard/mobile-scroll-top.js"></script>
+      
+    </script>
+
   </body>
 </html>
diff --git a/frontend/styles/main.css b/frontend/styles/main.css
index 8aa49642..da6c75b6 100644
--- a/frontend/styles/main.css
+++ b/frontend/styles/main.css
@@ -2522,6 +2522,7 @@ body::-webkit-scrollbar-thumb {
 .active-page::after {
   display: none;
 }
+<<<<<<< HEAD
 
 /* ── Leaderboard Rank Change ── */
 .rank-change {
@@ -2543,4 +2544,42 @@ body::-webkit-scrollbar-thumb {
 
 .rank-neutral {
   color: var(--text-muted);
+=======
+#scrollTopBtn {
+  position: fixed;
+  right: 16px;
+  bottom: 80px;
+
+  width: 42px;
+  height: 42px;
+
+  border: 1px solid var(--green);
+  border-radius: 50%;
+
+  background: rgba(0, 0, 0, 0.9);
+  color: var(--green);
+
+  display: none;
+  align-items: center;
+  justify-content: center;
+
+  cursor: pointer;
+  z-index: 999;
+
+  font-size: 18px;
+
+  box-shadow: 0 0 8px rgba(0, 255, 100, 0.25);
+
+  transition: all 0.25s ease;
+}
+
+#scrollTopBtn:hover {
+  transform: translateY(-2px);
+}
+
+@media (min-width: 769px) {
+  #scrollTopBtn {
+    display: none !important;
+  }
+>>>>>>> 78c4107 (required things added in up button)
 }

From fc9d09ed25a88b68638de547fa0f369d92738820 Mon Sep 17 00:00:00 2001
From: Diya-od <diyaodedara245@gmail.com>
Date: Mon, 8 Jun 2026 22:46:01 +0530
Subject: [PATCH 6/6] changes

---
 frontend/js/load-leaderboard.js |   0
 frontend/leaderboard.html       | 217 +++++++++++++++++++++++++++-----
 frontend/styles/main.css        |  24 ----
 scripts/mobile-scroll-top.js    |  20 +++
 4 files changed, 207 insertions(+), 54 deletions(-)
 create mode 100644 frontend/js/load-leaderboard.js
 create mode 100644 scripts/mobile-scroll-top.js

diff --git a/frontend/js/load-leaderboard.js b/frontend/js/load-leaderboard.js
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/leaderboard.html b/frontend/leaderboard.html
index 71856fc3..442a3b38 100644
--- a/frontend/leaderboard.html
+++ b/frontend/leaderboard.html
@@ -13,30 +13,6 @@
     <link rel="stylesheet" href="styles/main.css" />
     <link rel="icon" type="image/png" href="assets/logo.png" />
     <script src="js/navbar.js"></script>
-    <script src="js/leaderboard/tooltip.js"></script>
-    <script src="js/leaderboard/render.js"></script>
-    <script src="js/leaderboard/pagination.js"></script>
-    <script src="js/leaderboard/search.js"></script>
-
-    <meta
-      name="description"
-      content="Live LeetCode leaderboard for PVG students. See overall, monthly, weekly, and daily rankings scored by problem difficulty."
-    />
-    <meta property="og:title" content="Leaderboard — CodePVG" />
-    <meta
-      property="og:description"
-      content="Live LeetCode leaderboard for PVG students. Scored by problem difficulty, updated every 5 minutes."
-    />
-    <meta
-      property="og:url"
-      content="https://codepvg.onrender.com/leaderboard"
-    />
-    <meta property="og:type" content="website" />
-    <meta
-      property="og:image"
-      content="https://codepvg.onrender.com/assets/logo.png"
-    />
-    <meta property="og:site_name" content="CodePVG" />
   </head>
 
   <body>
@@ -163,7 +139,6 @@ <h1 class="page-title">Leaderboard</h1>
       </button>
 
     <script>
-    <script nonce="__NONCE__">
       document.addEventListener("DOMContentLoaded", () => {
         document.querySelectorAll(".tab").forEach((tab) => {
           tab.addEventListener("click", () => {
@@ -255,8 +230,6 @@ <h1 class="page-title">Leaderboard</h1>
           });
           clearBtn.style.display = "none";
         clearBtn.style.display = "none";
-        setupSearchListeners();
-        setupPaginationListeners();
         fetchLeaderboardData();
       });
 
@@ -402,6 +375,18 @@ <h1 class="page-title">Leaderboard</h1>
           `;
         renderLeaderboard(filteredData);
       }
+      function getRankTag(rank) {
+        switch (rank) {
+          case 1:
+            return '<span class="privilege-tag root-tag">[ROOT]</span>';
+          case 2:
+            return '<span class="privilege-tag sudo-tag">[SUDO]</span>';
+          case 3:
+            return '<span class="privilege-tag exec-tag">[EXEC]</span>';
+          default:
+            return "";
+        }
+      }
 
       function renderLeaderboard(data) {
         const body = document.getElementById("leaderboard-body");
@@ -436,13 +421,185 @@ <h1 class="page-title">Leaderboard</h1>
 
         displayData.forEach((user, index) => {
           const rank = user.originalRank || index + 1;
-          const row = renderLeaderboardRow(user, rank);
-          const card = renderMobileCard(user, rank);
+          const tag = getRankTag(rank);
+          const leetcodeUrl = `https://leetcode.com/u/${user.id}`;
+          const easyPoints = 1;
+          const mediumPoints = 3;
+          const hardPoints = 5;
+
+          const easyScore = user.data.easySolved * easyPoints;
+          const mediumScore = user.data.mediumSolved * mediumPoints;
+          const hardScore = user.data.hardSolved * hardPoints;
+          const row = document.createElement("div");
+          row.className = "leaderboard-row";
+          row.innerHTML = `
+                    <div class="rank">${rank}</div>
+                    <div class="name-cell">${tag}${user.name}</div>
+                    <div class="username"><a href="https://leetcode.com/u/${user.id}" target="_blank" rel="noopener noreferrer" class="user-link">${user.id}
+                        <svg class="external-icon" width="12" height="12" viewBox="0 0 24 24">
+                        <path d="M14 3H21V10M21 3L10 14M21 14V21H3V3H10"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"/>
+                        </svg></a></div>
+                    <div class="easy">${user.data.easySolved}</div>
+                    <div class="medium">${user.data.mediumSolved}</div>
+                    <div class="hard">${user.data.hardSolved}</div>
+                    <div class="total">${user.data.totalSolved}</div>
+                    <div class="mobile-score tooltip-score">
+                            <span>${user.score}</span>
+                             <span class="score-caret"></span>
+                        <div class="score-tooltip">
+                            <div>
+                                Easy: ${user.data.easySolved} × ${easyPoints} = ${easyScore}
+                            </div>
+                            <div>
+                                Medium: ${user.data.mediumSolved} × ${mediumPoints} = ${mediumScore}
+                            </div>
+                            <div>
+                                Hard: ${user.data.hardSolved} × ${hardPoints} = ${hardScore}
+                            </div>
+                            <div>
+                              Questions Solved: ${user.data.totalSolved}
+                            </div>
+                            <hr>
+                            <div>
+                                <strong>Total: ${user.score}</strong>
+                            </div>
+                        </div>
+                    </div>
+                `;
           body.appendChild(row);
+
+          const card = document.createElement("div");
+          card.className = "mobile-card";
+          card.innerHTML = `
+                    <div class="mobile-card-header">
+                        <div class="mobile-rank">#${rank}</div>
+                        <div class="mobile-score tooltip-score">
+                           <span> ${user.score}</span>
+                               <span class="score-caret"></span>
+                            <div class="score-tooltip">
+                                <div>
+                                    Easy: ${user.data.easySolved} × ${easyPoints} = ${easyScore}
+                                </div>
+                                <div>
+                                    Medium: ${user.data.mediumSolved} × ${mediumPoints} = ${mediumScore}
+                                </div>
+                                <div>
+                                    Hard: ${user.data.hardSolved} × ${hardPoints} = ${hardScore}
+                                </div>
+                                <div>
+                                  Questions Solved: ${user.data.totalSolved}
+                                </div>
+                                <hr>
+                                <div>
+                                    <strong>Total: ${user.score}</strong>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    
+                    <div class="mobile-name">${tag}${user.name}</div>
+                    <div class="mobile-username"><a href="https://leetcode.com/u/${user.id}" target="_blank" rel="noopener noreferrer" class="user-link">${user.id}
+                        <svg class="external-icon" width="12" height="12" viewBox="0 0 24 24">
+                        <path d="M14 3H21V10M21 3L10 14M21 14V21H3V3H10"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"/>
+                    </svg></a></div>
+                    <div class="mobile-stats">
+                        <div class="mobile-stat">
+                            <div class="mobile-stat-number easy">${user.data.easySolved}</div>
+                            <div class="mobile-stat-label">Easy</div>
+                        </div>
+                        <div class="mobile-stat">
+                            <div class="mobile-stat-number medium">${user.data.mediumSolved}</div>
+                            <div class="mobile-stat-label">Medium</div>
+                        </div>
+                        <div class="mobile-stat">
+                            <div class="mobile-stat-number hard">${user.data.hardSolved}</div>
+                            <div class="mobile-stat-label">Hard</div>
+                        </div>
+                        <div class="mobile-stat">
+                            <div class="mobile-stat-number total">${user.data.totalSolved}</div>
+                            <div class="mobile-stat-label">Total</div>
+                        </div>
+                    </div>
+                `;
           mobileCards.appendChild(card);
         });
         renderPagination(data.length);
       }
+      function renderPagination(totalItems) {
+        const pageNumbers = document.getElementById("page-numbers");
+
+        if (!pageNumbers) return;
+
+        const totalPages = Math.ceil(totalItems / itemsPerPage);
+        pageNumbers.innerHTML = "";
+
+        if (totalPages === 0) return;
+
+        function createPageBtn(i) {
+          const btn = document.createElement("button");
+          btn.classList.add("page-btn");
+          btn.textContent = i;
+
+          if (i === currentPage) {
+            btn.classList.add("active-page");
+          }
+
+          btn.onclick = () => {
+            currentPage = i;
+            applyFiltersAndRender();
+            window.scrollTo({ top: 0, behavior: "smooth" });
+          };
+
+          return btn;
+        }
+
+        const pagesToRender = [];
+        const range = 1; // Number of pages to show around the current page
+
+        pagesToRender.push(1);
+
+        if (currentPage - range > 2) {
+          pagesToRender.push("..");
+        }
+
+        for (
+          let i = Math.max(2, currentPage - range);
+          i <= Math.min(totalPages - 1, currentPage + range);
+          i++
+        ) {
+          pagesToRender.push(i);
+        }
+
+        if (currentPage + range < totalPages - 1) {
+          pagesToRender.push("..");
+        }
+
+        if (totalPages > 1) {
+          pagesToRender.push(totalPages);
+        }
+
+        pagesToRender.forEach((item) => {
+          if (item === "..") {
+            const ellipsis = document.createElement("span");
+            ellipsis.className = "page-ellipsis";
+            ellipsis.textContent = "..";
+            pageNumbers.appendChild(ellipsis);
+          } else {
+            pageNumbers.appendChild(createPageBtn(item));
+          }
+        });
+      }
       function setActiveTab(activeTab) {
         document.querySelectorAll(".tab").forEach((tab) => {
           tab.classList.remove("active");
@@ -465,7 +622,7 @@ <h1 class="page-title">Leaderboard</h1>
     <script src="js/terminal_ui.js"></script>
     <script src="js/leaderboard/mobile-scroll-top.js"></script>
       
-    </script>
+    
 
   </body>
 </html>
diff --git a/frontend/styles/main.css b/frontend/styles/main.css
index da6c75b6..71e0c73c 100644
--- a/frontend/styles/main.css
+++ b/frontend/styles/main.css
@@ -2522,29 +2522,6 @@ body::-webkit-scrollbar-thumb {
 .active-page::after {
   display: none;
 }
-<<<<<<< HEAD
-
-/* ── Leaderboard Rank Change ── */
-.rank-change {
-  display: inline-block;
-  font-size: 0.65rem;
-  font-family: "Fira Code", monospace;
-  margin-left: 0.4rem;
-  vertical-align: middle;
-  opacity: 0.85;
-}
-
-.rank-up {
-  color: var(--green);
-}
-
-.rank-down {
-  color: var(--red);
-}
-
-.rank-neutral {
-  color: var(--text-muted);
-=======
 #scrollTopBtn {
   position: fixed;
   right: 16px;
@@ -2581,5 +2558,4 @@ body::-webkit-scrollbar-thumb {
   #scrollTopBtn {
     display: none !important;
   }
->>>>>>> 78c4107 (required things added in up button)
 }
diff --git a/scripts/mobile-scroll-top.js b/scripts/mobile-scroll-top.js
new file mode 100644
index 00000000..722a3ba8
--- /dev/null
+++ b/scripts/mobile-scroll-top.js
@@ -0,0 +1,20 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const scrollTopBtn = document.getElementById("scrollTopBtn");
+
+  if (!scrollTopBtn) return;
+
+  window.addEventListener("scroll", () => {
+    if (window.innerWidth <= 768 && window.scrollY > 300) {
+      scrollTopBtn.style.display = "flex";
+    } else {
+      scrollTopBtn.style.display = "none";
+    }
+  });
+
+  scrollTopBtn.addEventListener("click", () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  });
+});
\ No newline at end of file