diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index ab2374b..b4cc01f 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -459,11 +459,20 @@ body[data-level="6"]::after {
     --glow-color: #ef4444; /* Sith Red */
 }
 
-/* Override the Tailwind duration-1000 for a better feel */
-#level-progress {
-    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+/* Ensure the parent container has a background so you can see the 'empty' part */
+#game-stats .bg-black\/10 {
+    background-color: rgba(0, 0, 0, 0.1) !important;
+    min-width: 80px; /* Ensure it hasn't collapsed to 0 width */
+    height: 6px;
 }
 
+/* Ensure the progress bar itself has a height and a visible color */
+#level-progress {
+    height: 100%;
+    background-color: var(--accent); /* This is the level color */
+    transition: width 0.3s ease-in-out !important; /* Make it smooth */
+    display: block !important;
+}
 
 /* Force Glow for the Badge */
 @keyframes force-pulse {
diff --git a/src/assets/js/script.js b/src/assets/js/script.js
index 900cf80..6388945 100644
--- a/src/assets/js/script.js
+++ b/src/assets/js/script.js
@@ -853,11 +853,19 @@ document.addEventListener('DOMContentLoaded', () => {
  */
 function renderXP(value) {
     const pb = document.getElementById('level-progress');
-    if (pb) {
-        // Ensure we don't exceed 100%
-        const percent = Math.min((value / XP_PER_LEVEL) * 100, 100);
-        pb.style.width = `${percent}%`;
-    }
+    if (!pb) return;
+
+    // 1. Ensure 'value' is a clean number
+    const currentXPNum = Number(value) || 0;
+
+    // 2. Calculate percentage (current / 45 * 100)
+    const percentage = Math.min((currentXPNum / 45) * 100, 100);
+
+    // 3. Apply to style
+    pb.style.width = `${percentage}%`;
+
+    // Debugging: uncomment this to see the math in your console
+    // console.log(`XP: ${currentXPNum}, Percent: ${percentage}%`);
 }