diff --git a/index.html b/index.html
index 9af6254..338ce98 100644
--- a/index.html
+++ b/index.html
@@ -11024,15 +11024,23 @@
             // Use unlockedSkills if available, otherwise fall back to basic_attack only
             const unlockedSkills = playerStats.unlockedSkills || ['basic_attack'];
             unlockedSkills.forEach(skillId => {
-                const skill = SKILLS[skillId];
-                if (!skill) return; // Skip if skill doesn't exist
+                // Check both hardcoded SKILLS and database SKILLS_DB
+                const hardcodedSkill = SKILLS[skillId];
+                const dbSkill = SKILLS_DB[skillId];
+                const skillInfo = getSkillForClass(skillId, playerStats.class);
+
+                if (!hardcodedSkill && !dbSkill) return; // Skip if skill doesn't exist
+
+                const displayName = skillInfo?.displayName || hardcodedSkill?.name || dbSkill?.name || skillId;
+                const icon = hardcodedSkill?.icon || '⚔️';
+                const mpCost = hardcodedSkill?.mpCost || dbSkill?.mpCost || 0;
 
                 const btn = document.createElement('button');
                 btn.className = 'skill-btn';
                 btn.dataset.skillId = skillId;
                 btn.innerHTML = `
-                    <span class="skill-name">${skill.icon} ${skill.name}</span>
-                    <span class="skill-cost ${skill.mpCost === 0 ? 'free' : ''}">${skill.mpCost > 0 ? skill.mpCost + ' MP' : 'Free'}</span>
+                    <span class="skill-name">${icon} ${displayName}</span>
+                    <span class="skill-cost ${mpCost === 0 ? 'free' : ''}">${mpCost > 0 ? mpCost + ' MP' : 'Free'}</span>
                 `;
                 btn.onclick = () => executePlayerSkill(skillId);
                 skillsContainer.appendChild(btn);