diff --git a/titles/idac/templates/ranking/js/scripts.js b/titles/idac/templates/ranking/js/scripts.js
index 5afaa44..64bd303 100644
--- a/titles/idac/templates/ranking/js/scripts.js
+++ b/titles/idac/templates/ranking/js/scripts.js
@@ -149,19 +149,29 @@ const getLeaderBadge = () => {
 const renderTeamRankingTable = (rankingData) => {
     const rowsHtml = rankingData.map((ranking, i) => `
         <tr id="rank-${i + 1}" class="align-middle">
-            <td rowspan="2" class="fs-4 text-center">${ranking.rank}</td>
+            <td rowspan="2" class="text-center">
+                <span class="fs-5 d-md-none">${ranking.rank}</span>
+                <span class="fs-4 d-none d-md-inline">${ranking.rank}</span>
+            </td>
             <td>
                 <div class="d-flex justify-content-between align-items-center">
-                    <span class=" fs-5 fw-bold">${ranking.team_name}</span>
-                    ${getLeagueBadge(ranking.league_rank_id)}
+                    <span class="fw-bold d-md-none">${ranking.team_name}</span>
+                    <span class="fs-5 fw-bold d-none d-md-inline">${ranking.team_name}</span>
+                    
+                    <div class="ms-1">
+                        ${getLeagueBadge(ranking.league_rank_id)}
+                    </div>
                 </div>
             </td>
-            <td class="fs-4">${ranking.point} pts</td>
+            <td class="text-end text-md-start">
+                <span class="d-md-none">${ranking.point} pts</span>
+                <span class="fs-4 d-none d-md-inline">${ranking.point} pts</span>
+            </td>
             <td class="d-none d-lg-table-cell">${ranking.store_name}</td>
         </tr>
         <tr class="align-middle">
             <td colspan="3" class="text-muted small">
-                <div class="d-flex flex-wrap align-items-center gap-3">
+                <div class="d-flex flex-wrap align-items-center gap-1">
                     
                     <div class="d-flex align-items-center">
                         ${getAceBadge()} 
@@ -187,10 +197,10 @@ const renderTeamRankingTable = (rankingData) => {
             <table class="table table-hover">
                 <thead>
                     <tr>
-                        <th scope="col" class="text-center" style="width: 5%;">#</th>
-                        <th scope="col" style="width: 40%;">Team Name</th>
-                        <th scope="col" style="width: 25%;">Points</th>
-                        <th scope="col" class="d-none d-lg-table-cell" style="width: 30%;">Store</th>
+                        <th scope="col" class="text-center">#</th>
+                        <th scope="col">Team Name</th>
+                        <th scope="col" class="text-end text-md-start">Points</th>
+                        <th scope="col" class="d-none d-lg-table-cell">Store</th>
                     </tr>
                 </thead>
                 <tbody>