diff --git a/ranking/rank.js b/ranking/rank.js
index c37e59f..e0d0360 100644
--- a/ranking/rank.js
+++ b/ranking/rank.js
@@ -1,4 +1,4 @@
-window.loadHeader(function(headerContainer) {
+window.loadHeader(async function(headerContainer) {
     const rankButton = headerContainer.querySelector('.menu-item.rank');
     if (rankButton) {
         rankButton.classList.add('active');
@@ -110,13 +110,33 @@ window.loadHeader(function(headerContainer) {
     };
 
     let cachedLeaderboardData = null;
+    let mappingCache = null;
 
-    const renderRankings = (mode) => {
+    const renderRankings = async (mode) => {
         const container = document.getElementById('ranking-cards-container');
         if (!container || !cachedLeaderboardData) return;
         
         container.innerHTML = ''; 
 
+        if (!mappingCache) {
+            const fetchJson = url => fetch(url).then(r => r.ok ? r.json() : []);
+            mappingCache = await Promise.all([
+                fetchJson('/assets/mapping/clothing.json'),
+                fetchJson('/assets/mapping/headgear.json'),
+                fetchJson('/assets/mapping/shoes.json'),
+                fetchJson('/assets/mapping/weapons.json')
+            ]);
+        }
+        const [clothing, headgear, shoes, weapons] = mappingCache;
+
+        const getImg = (list, id, folder) => {
+            const fallback = "/assets/weapons/NotFound^w.png";
+            if (id === undefined || id === null) return fallback;
+            const item = list.find(i => String(i.id) === String(id));
+            if (item && item.image) return `../assets/${folder}/${item.image}`;
+            return fallback;
+        };
+
         const modeMap = { 'regular': 0, 'gachi': 1, 'fes': 2 };
         const apiModeKey = `mode_${modeMap[mode] || 0}`;
         const players = cachedLeaderboardData[apiModeKey] || [];
@@ -130,6 +150,11 @@ window.loadHeader(function(headerContainer) {
                 ? `<img src="/assets/en/svg/ui/34b4b97a4411.svg" class="rank-power-icon">` 
                 : '';
 
+            const weaponImg = getImg(weapons, player.weapon, 'weapons');
+            const headImg = getImg(headgear, player.headgear, 'headgear');
+            const clothesImg = getImg(clothing, player.clothes, 'clothing');
+            const shoesImg = getImg(shoes, player.shoes, 'shoes');
+
             const card = document.createElement('div');
             card.className = `rank-card-container`;
             card.innerHTML = `
@@ -142,10 +167,22 @@ window.loadHeader(function(headerContainer) {
                 </div>
                 <div class="rank-power-value">${displayScore}</div>
                 <div class="rank-gear-row">
-                    <img src="/assets/en/ui/gearbigbg.png" class="gear-main">
-                    <img src="/assets/en/ui/gearsmallbg.png" class="gear-sub">
-                    <img src="/assets/en/ui/gearsmallbg.png" class="gear-sub">
-                    <img src="/assets/en/ui/gearsmallbg.png" class="gear-sub">
+                    <div class="gear-wrapper main">
+                        <img src="/assets/en/ui/gearbigbg.png" class="gear-bg">
+                        <img src="${weaponImg}" class="gear-icon" onerror='this.src="/assets/weapons/NotFound^w.png"'>
+                    </div>
+                    <div class="gear-wrapper sub">
+                        <img src="/assets/en/ui/gearsmallbg.png" class="gear-bg">
+                        <img src="${headImg}" class="gear-icon" onerror='this.src="/assets/weapons/NotFound^w.png"'>
+                    </div>
+                    <div class="gear-wrapper sub">
+                        <img src="/assets/en/ui/gearsmallbg.png" class="gear-bg">
+                        <img src="${clothesImg}" class="gear-icon" onerror='this.src="/assets/weapons/NotFound^w.png"'>
+                    </div>
+                    <div class="gear-wrapper sub">
+                        <img src="/assets/en/ui/gearsmallbg.png" class="gear-bg">
+                        <img src="${shoesImg}" class="gear-icon" onerror='this.src="/assets/weapons/NotFound^w.png"'>
+                    </div>
                 </div>
             `;
             container.appendChild(card);
diff --git a/ranking/styles.css b/ranking/styles.css
index ebbaf85..a00cf00 100644
--- a/ranking/styles.css
+++ b/ranking/styles.css
@@ -270,10 +270,46 @@ body {
     left: 510px;
     top: 95px;
     display: flex;
+    align-items: flex-end;
     gap: 12px;
     z-index: 3;
 }
 
+.gear-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.gear-wrapper.main {
+    width: 130px;
+    height: 112px;
+}
+
+.gear-wrapper.sub {
+    width: 84px; 
+    height: 73px;
+}
+
+.gear-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    object-fit: contain;
+}
+
+.gear-icon {
+    position: relative;
+    z-index: 2;
+    width: 85%;
+    height: 85%;
+    object-fit: contain;
+}
+
 .gear-main { width: 130px; height: 112px; }
 .gear-sub { width: 84px; height: 73px; }