diff --git a/src/pages/leaderboard.module.css b/src/pages/leaderboard.module.css
index a260024..30508ff 100644
--- a/src/pages/leaderboard.module.css
+++ b/src/pages/leaderboard.module.css
@@ -1,28 +1,63 @@
 .container {
-  padding: 2rem 2rem;
-  width: 100%;
-  height: 100%;
+  padding: 2rem;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-around;
 }
 
-.board {
-  padding: 2rem 2rem;
-  margin-right: 1rem;
+.board,
+.boardDetail {
   flex: 1;
   height: 50rem;
+  padding: 2rem;
+  border-radius: 0.5rem;
   display: flex;
   flex-direction: column;
   align-items: center;
-  -webkit-box-shadow: 0px 5px 15px 8px #e4e7fb;
-  box-shadow: 0px 5px 15px 8px #e4e7fb;
-  border-radius: 0.5rem;
+  box-shadow: 0 5px 15px 8px #e4e7fb;
+}
+
+.board {
+  margin-right: 1rem;
+  background-color: #ffffff;
+}
+
+.boardDetail {
+  margin-left: 1rem;
+  background-color: #ffffff;
+}
+
+.loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-color: rgba(255, 255, 255, 0.9);
+  z-index: 9;
+}
+
+.loading img {
+  width: 150px;
+  height: 150px;
+}
+
+.loading p {
+  margin-top: 10px;
+  font-size: 24px;
+  color: #333;
 }
 
 .leaderboardStairs {
-  padding: 2rem 2rem;
+  width: 100%;
+  height: 50%;
+  padding: 2rem;
   background-color: #f5f5f5;
   border: 1px solid #ddd;
   border-radius: 5px;
@@ -32,32 +67,28 @@
   align-items: flex-start;
 }
 
-.leaderboardStairs h3 {
-  font-size: 18px;
-  color: #333;
-}
 .leaderboardBar {
   display: flex;
   align-items: center;
   margin: 0.5rem 0;
   padding: 0.5rem;
 }
-.leaderboardPosition {
-  flex: 1;
-  text-align: right;
-  display: flex;
-  padding-right: 1rem;
+
+.leaderboardPosition,
+.leaderboardName {
+  flex: 2;
   font-weight: bold;
 }
 
 .leaderboardName {
-  flex: 3;
   height: 2rem;
   display: flex;
   align-items: center;
-  padding-left: 1rem;
-  font-weight: bold;
-  font-size: 1.18rem;
+}
+
+.leaderboardPosition img {
+  /* width: 82px; */
+  height: 50px;
 }
 
 hr {
@@ -76,17 +107,19 @@ hr {
 }
 
 .leftDetails {
-  display: flex;
+  width: 100%;
+  height: 100%;
+  padding: 1rem 4rem;
   background-color: #f5f5f5;
   border: 1px solid #ddd;
   border-radius: 5px;
-  padding: 1rem 4rem;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   flex-direction: column;
   align-items: left;
 }
+
 .userInfo {
-  margin-top: 1rem;
+  margin-top: 2rem;
   text-align: left;
 }
 
@@ -97,24 +130,9 @@ hr {
 
 .avatar img {
   border-radius: 50%;
-  width: 100px;
   height: 100px;
 }
 
-.boardDetail {
-  padding: 2rem 2rem;
-  margin-left: 1rem;
-  flex: 1.5;
-  height: 50rem;
-  background-color: #ffffff;
-  -webkit-box-shadow: 0px 5px 15px 8px #e4e7fb;
-  box-shadow: 0px 5px 15px 8px #e4e7fb;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  border-radius: 0.5rem;
-}
-
 #header {
   text-align: center;
   margin-bottom: 20px;
@@ -147,10 +165,7 @@ tbody tr {
   transition: background-color 0.3s;
 }
 
-.selectedRow {
-  background-color: #f0f0f0;
-}
-
+.selectedRow,
 tbody tr:hover {
   background-color: #f0f0f0;
 }
@@ -174,7 +189,17 @@ tbody tr:hover {
   background-color: #ddd;
   cursor: not-allowed;
 }
+table {
+  width: 100%;
+  overflow-x: auto;
+}
 
+th,
+td {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
 @media (max-width: 768px) {
   .container {
     flex-direction: column;
@@ -182,20 +207,86 @@ tbody tr:hover {
     padding: 1rem;
   }
 
-  .board {
-    margin-right: 0;
+  .board,
+  .boardDetail {
+    margin: 0;
+    margin-bottom: 1rem;
+    height: auto;
+  }
+
+  .avatar img {
+    border-radius: 50%;
+    height: 100px;
+  }
+}
+
+@media (max-width: 576px) {
+  .container {
+    padding: 1rem;
+  }
+
+  .board,
+  .boardDetail {
+    margin: 0;
+    margin-bottom: 1rem;
+    height: auto;
+  }
+  .avatarUsername {
+    flex-direction: column;
+  }
+  .avatar img {
+    border-radius: 50%;
+    height: 50px;
+  }
+  table {
+    font-size: 14px;
+  }
+  .number,
+  .name,
+  .points {
+    padding: 5px;
+  }
+}
+
+@media (max-width: 320px) {
+  .container {
+    padding: 1rem;
+  }
+
+  .board,
+  .boardDetail {
+    margin: 0;
     margin-bottom: 1rem;
     height: auto;
   }
+  table {
+    font-size: 14px;
+  }
+  .avatarUsername {
+    flex-direction: column;
+  }
+  .avatar img {
+    border-radius: 50%;
+    height: 50px;
+  }
+}
 
+@media (max-width: 280px) {
+  .container {
+    padding: 1rem;
+  }
+  table {
+    font-size: 14px;
+  }
+  .board,
   .boardDetail {
-    margin-left: 0;
-    margin-top: 1rem;
+    margin: 0;
+    margin-bottom: 1rem;
     height: auto;
   }
 
   .avatar img {
-    width: 100px;
-    height: 100px;
+    border-radius: 50%;
+    height: 50px;
   }
 }
diff --git a/src/pages/leaderboard.tsx b/src/pages/leaderboard.tsx
index b27269c..6f509b5 100644
--- a/src/pages/leaderboard.tsx
+++ b/src/pages/leaderboard.tsx
@@ -7,6 +7,7 @@ export default function Leaderboard() {
   const [contributors, setContributors] = useState([]);
   const [selectedContributor, setSelectedContributor] = useState(null);
   const [currentPage, setCurrentPage] = useState(1);
+  const [loading, setLoading] = useState(true);
   const itemsPerPage = 7;
 
   const fetchData = async () => {
@@ -19,12 +20,15 @@ export default function Leaderboard() {
       }
     } catch (err) {
       console.error("Error fetching data:", err);
+    } finally {
+      setLoading(false);
     }
   };
 
   useEffect(() => {
     fetchData();
   }, []);
+
   useEffect(() => {
     if (contributors.length > 0) {
       setSelectedContributor(contributors[0]);
@@ -58,136 +62,149 @@ export default function Leaderboard() {
     >
       <main>
         <div className={styles.container}>
-          <div className={styles.board}>
-            <div className={styles.leaderboardStairs}>
-              <h2>Contribution Leaders</h2>
-              {contributors.length > 0 && (
-                <div className={styles.leaderboardBar}>
-                  <div className={styles.leaderboardPosition}>
-                    <span>
-                      <img src="/img/medals/first.png" alt="" />
-                    </span>
-                  </div>
-                  <div className={styles.leaderboardName}>
-                    {contributors[0]._id.username}
-                  </div>
-                </div>
-              )}
-              {contributors.length > 1 && (
-                <div className={styles.leaderboardBar}>
-                  <div className={styles.leaderboardPosition}>
-                    <span>
-                      <img src="/img/medals/second.png" alt="" />
-                    </span>
-                  </div>
-                  <div className={styles.leaderboardName}>
-                    {contributors[1]._id.username}
+          {loading ? (
+            <div className={styles.loading}>
+              <img src="/img/loading.gif" alt="Loading..." />
+              <p>Loading...</p>
+            </div>
+          ) : (
+            <>
+              <div className={styles.board}>
+                {selectedContributor && (
+                  <div className={styles.leftDetails}>
+                    <div className={styles.avatarUsername}>
+                      <div className={`${styles.avatar} avatar`}>
+                        <img
+                          src={`https://avatars.githubusercontent.com/u/${selectedContributor._id.userId}?v=4`}
+                          alt={`${selectedContributor._id.username}'s Image`}
+                        />
+                      </div>
+                      &nbsp; &nbsp; &nbsp; &nbsp;
+                      <h3 className={styles.userName}>
+                        {selectedContributor._id.username}
+                      </h3>
+                    </div>
+                    <div className={styles.userInfo}>
+                      <p>
+                        <strong>Number of Contributions: </strong>
+                        {selectedContributor.total}
+                      </p>
+                      <p>
+                        <strong>Repository:</strong>{" "}
+                        {selectedContributor._id.username}
+                      </p>
+                      <p>
+                        <strong>Type:</strong>{" "}
+                        {selectedContributor.types
+                          .map(
+                            (type) =>
+                              `${type.count} ${type.type}${
+                                type.count > 1 ? "s" : ""
+                              }`
+                          )
+                          .join(", ")}
+                      </p>
+                    </div>
                   </div>
+                )}
+                <hr />
+                <div className={styles.leaderboardStairs}>
+                  <h2>Contribution Leaders</h2>
+                  {contributors.length > 0 && (
+                    <div className={styles.leaderboardBar}>
+                      <div className={styles.leaderboardPosition}>
+                        <img src="/img/medals/first.png" alt="" />
+                      </div>
+                      <div className={styles.leaderboardName}>
+                        {contributors[0]._id.username}
+                      </div>
+                    </div>
+                  )}
+                  {contributors.length > 1 && (
+                    <div className={styles.leaderboardBar}>
+                      <div className={styles.leaderboardPosition}>
+                        <>
+                          <img src="/img/medals/second.png" alt="" />
+                        </>
+                      </div>
+                      <div className={styles.leaderboardName}>
+                        {contributors[1]._id.username}
+                      </div>
+                    </div>
+                  )}
+                  {contributors.length > 2 && (
+                    <div className={styles.leaderboardBar}>
+                      <div className={styles.leaderboardPosition}>
+                        <span>
+                          <img src="/img/medals/third.png" alt="" />
+                        </span>
+                      </div>
+                      <div className={styles.leaderboardName}>
+                        {contributors[2]._id.username}
+                      </div>
+                    </div>
+                  )}
                 </div>
-              )}
-              {contributors.length > 2 && (
-                <div className={styles.leaderboardBar}>
-                  <div className={styles.leaderboardPosition}>
-                    <span>
-                      <img src="/img/medals/third.png" alt="" />
-                    </span>
-                  </div>
-                  <div className={styles.leaderboardName}>
-                    {contributors[2]._id.username}
-                  </div>
+              </div>
+
+              <div className={styles.boardDetail}>
+                <div id="header">
+                  <h1>Contributions Leaderboard</h1>
                 </div>
-              )}
-            </div>
-            <hr />
-            {selectedContributor && (
-              <div className={styles.leftDetails}>
-                <div className={styles.avatarUsername}>
-                  <div className={`${styles.avatar} avatar`}>
-                    <img
-                      src={`https://avatars.githubusercontent.com/u/${selectedContributor._id.userId}?v=4`}
-                      alt={`${selectedContributor._id.username}'s Image`}
-                    />
-                  </div>
-                  &nbsp; &nbsp; &nbsp; &nbsp;
-                  <h3 className={styles.userName}>
-                    {selectedContributor._id.username}
-                  </h3>
+                <br />
+                <div id="leaderboard">
+                  <table>
+                    <thead>
+                      <tr className={styles["header-row"]}>
+                        <th className={styles.number}>Position</th>
+                        <th className={styles.name}>Name</th>
+                        <th className={styles.points}>Contributions</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {contributors
+                        .slice(startIndex, endIndex)
+                        .map((contributor, index) => (
+                          <tr
+                            key={contributor._id.userId}
+                            onClick={() => handleContributorSelect(contributor)}
+                            className={
+                              selectedContributor === contributor
+                                ? `${styles.selectedRow} ${styles.selected}`
+                                : styles.notSelectedRow
+                            }
+                          >
+                            <td className={styles.number}>
+                              {startIndex + index + 1}
+                            </td>
+                            <td className={styles.name}>
+                              {contributor._id.username}
+                            </td>
+                            <td className={styles.points}>
+                              {contributor.total}
+                            </td>
+                          </tr>
+                        ))}
+                    </tbody>
+                  </table>
                 </div>
-                <div className={styles.userInfo}>
-                  <p>
-                    <strong>Number of Contributions: </strong>
-                    {selectedContributor.total}
-                  </p>
-                  <p>
-                    <strong>Repository:</strong>{" "}
-                    {selectedContributor._id.username}
-                  </p>
-                  <p>
-                    <strong>Type:</strong>{" "}
-                    {selectedContributor.types
-                      .map(
-                        (type) =>
-                          `${type.count} ${type.type}${
-                            type.count > 1 ? "s" : ""
-                          }`
-                      )
-                      .join(", ")}
-                  </p>
+                <div className={styles.pagination}>
+                  <button
+                    onClick={handlePreviousPage}
+                    disabled={currentPage === 1}
+                  >
+                    Previous
+                  </button>
+                  <button
+                    onClick={handleNextPage}
+                    disabled={endIndex >= contributors.length}
+                  >
+                    Next
+                  </button>
                 </div>
               </div>
-            )}
-          </div>
-          <div className={styles.boardDetail}>
-            <div id="header">
-              <h1>Contributions Leaderboard</h1>
-            </div>
-            <br />
-            <div id="leaderboard">
-              <table>
-                <thead>
-                  <tr className={styles["header-row"]}>
-                    <th className={styles.number}>Position</th>
-                    <th className={styles.name}>Name</th>
-                    <th className={styles.points}>Contributions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {contributors
-                    .slice(startIndex, endIndex)
-                    .map((contributor, index) => (
-                      <tr
-                        key={contributor._id.userId}
-                        onClick={() => handleContributorSelect(contributor)}
-                        className={
-                          selectedContributor === contributor
-                            ? `${styles.selectedRow} ${styles.selected}`
-                            : styles.notSelectedRow
-                        }
-                      >
-                        <td className={styles.number}>
-                          {startIndex + index + 1}
-                        </td>
-                        <td className={styles.name}>
-                          {contributor._id.username}
-                        </td>
-                        <td className={styles.points}>{contributor.total}</td>
-                      </tr>
-                    ))}
-                </tbody>
-              </table>
-            </div>
-            <div className={styles.pagination}>
-              <button onClick={handlePreviousPage} disabled={currentPage === 1}>
-                Previous
-              </button>
-              <button
-                onClick={handleNextPage}
-                disabled={endIndex >= contributors.length}
-              >
-                Next
-              </button>
-            </div>
-          </div>
+            </>
+          )}
         </div>
       </main>
     </Layout>
diff --git a/static/img/loading.gif b/static/img/loading.gif
new file mode 100644
index 0000000..414f1e4
Binary files /dev/null and b/static/img/loading.gif differ
diff --git a/static/img/medals/first.png b/static/img/medals/first.png
index 4b6a2ff..8f1913a 100644
Binary files a/static/img/medals/first.png and b/static/img/medals/first.png differ
diff --git a/static/img/medals/second.png b/static/img/medals/second.png
index 16b921d..7812dfe 100644
Binary files a/static/img/medals/second.png and b/static/img/medals/second.png differ
diff --git a/static/img/medals/third.png b/static/img/medals/third.png
index c0ac7c3..ac4fa68 100644
Binary files a/static/img/medals/third.png and b/static/img/medals/third.png differ