diff --git a/.release-please-manifest.json b/.release-please-manifest.json
index 0bbe194..6bbfeb6 100644
--- a/.release-please-manifest.json
+++ b/.release-please-manifest.json
@@ -1 +1 @@
-{".":"0.4.1"}
+{".":"0.5.0"}
diff --git a/index.html b/index.html
index 9b25273..22dc97a 100644
--- a/index.html
+++ b/index.html
@@ -43,7 +43,7 @@ <h1 class="text-2xl font-bold">Cashflow Simulator</h1>
           </p>
         </div>
         <div class="flex items-center gap-3">
-          <span class="text-sm text-blue-200">v0.4.1</span>
+          <span class="text-sm text-blue-200">v0.5.0</span>
           <button
             @click="toggleTheme"
             class="text-white hover:text-blue-200 text-2xl"
@@ -1072,8 +1072,8 @@ <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
                     const zeroY = yScale.getPixelForValue(0);
                     if (zeroY >= top && zeroY <= bottom) {
                       ctx.save();
-                      ctx.strokeStyle = '#9ca3af';
-                      ctx.lineWidth = 2;
+                      ctx.strokeStyle = darkMode.value ? '#e5e7eb' : '#374151';
+                      ctx.lineWidth = 2.5;
                       ctx.setLineDash([]);
                       ctx.beginPath();
                       ctx.moveTo(xLeft, zeroY);
@@ -1086,13 +1086,12 @@ <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
                 // Draw a stronger x-axis baseline
                 xAxisLine: {
                   afterDraw: chart => {
-                    const xScale = chart.scales.x;
                     const ctx = chart.ctx;
-                    const { left, right, top, bottom } = chart.chartArea;
+                    const { left, right, bottom } = chart.chartArea;
                     const xBottomY = bottom;
                     ctx.save();
-                    ctx.strokeStyle = '#9ca3af';
-                    ctx.lineWidth = 2;
+                    ctx.strokeStyle = darkMode.value ? '#e5e7eb' : '#374151';
+                    ctx.lineWidth = 2.5;
                     ctx.setLineDash([]);
                     ctx.beginPath();
                     ctx.moveTo(left, xBottomY);
@@ -1123,13 +1122,13 @@ <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
                     label: 'Income',
                     data: incomeData,
                     backgroundColor: 'rgba(34, 197, 94, 1)',
-                    order: -1,
+                    order: 2,
                   },
                   {
                     label: 'Expense',
                     data: expenseData,
                     backgroundColor: 'rgba(239, 68, 68, 1)',
-                    order: -1,
+                    order: 2,
                   },
                   {
                     label: 'Balance',
diff --git a/package.json b/package.json
index e1a20eb..e5e5c0c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cf-sim",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Visualize your income, expenses, and balance over time",
   "type": "module",
   "scripts": {
diff --git a/src/style.css b/src/style.css
index 7878de2..ddd5280 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,7 +1,7 @@
     [v-cloak] { display: none; }
     .fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
     .fade-enter-from, .fade-leave-to { opacity: 0; }
-    .chart-container { position: relative; height: 300px; width: 100%; }
+    .chart-container { position: relative; height: 350px; width: 100%; }
     .error-msg { color: var(--color-error); font-size: 0.875rem; margin-top: 0.25rem; }
     .toggle-icon::before { color: inherit; }
     .toggle-icon.fold::after { content: '▶'; color: inherit; }