diff --git a/static/style.css b/static/style.css
index 920499b..78a1139 100644
--- a/static/style.css
+++ b/static/style.css
@@ -594,7 +594,7 @@ main {
 
 .progress-fill {
   height: 100%;
-  background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-400));
+  background: var(--color-primary-500);
   border-radius: var(--radius-sm);
   transition: width 0.4s ease;
 }
diff --git a/templates/status.html b/templates/status.html
index a25312e..ad3ff23 100644
--- a/templates/status.html
+++ b/templates/status.html
@@ -8,7 +8,7 @@
       <span class="status-badge badge badge-{{ 'info' if job.status.name == 'RUNNING' else 'warning' if job.status.name == 'PENDING' else 'success' if job.status.name == 'COMPLETED' else 'error' if job.status.name == 'FAILED' else 'neutral' }}" id="status-badge">
         {{ job.status.name }}
       </span>
-      <span class="status-time" id="created-time">{{ job.created_at | int }}</span>
+      <time class="status-time" id="created-time" datetime="{{ job.created_at }}">{{ job.created_at | int }}</time>
     </div>
     <h2 class="job-id" id="job-title">Job {{ job.job_id[:8] }}...</h2>
   </div>
@@ -98,6 +98,12 @@
 <script src="{{ url_for('static', filename='app.js') }}"></script>
 <script>
   document.addEventListener('DOMContentLoaded', function () {
+    var el = document.getElementById('created-time');
+    if (el) {
+      var ts = parseInt(el.getAttribute('datetime'), 10) * 1000;
+      var d = new Date(ts);
+      el.textContent = d.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit', hour12: true });
+    }
     if (typeof initStatusPage === 'function') {
       initStatusPage('{{ job.job_id }}', '{{ job.status.name }}');
     }