diff --git a/static/index.html b/static/index.html
index d80914d..d5b8bbe 100644
--- a/static/index.html
+++ b/static/index.html
@@ -359,18 +359,21 @@ function renderBackupList(items) {
     list.innerHTML = '<div class="empty"><div class="empty-icon">📭</div>Nenhum backup encontrado</div>';
     return;
   }
-  list.innerHTML = items.map(item => `
+  list.innerHTML = items.map(item => {
+    const appName = getAppBaseName(item.name);
+    return `
     <div class="backup-item">
-      <div class="bi-left">
-        <span class="bi-name">${item.name}</span>
-        <span class="bi-date">${formatDateTime(item.modified)}</span>
+      <div class="bi-left" style="flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0;">
+        <span class="badge yellow" style="min-width: 100px; max-width: 120px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${appName}">${appName}</span>
+        <span class="bi-name" style="flex: 1; min-width: 0;">${item.name}</span>
+        <span class="bi-date" style="white-space: nowrap; margin-right: 10px;">${formatDateTime(item.modified)}</span>
       </div>
       <div class="bi-right">
-        <span class="bi-size">${formatSize(item.size)}</span>
+        <span class="bi-size" style="min-width: 60px; text-align: right;">${formatSize(item.size)}</span>
         <button class="restore-btn" onclick="openRestoreModal('${currentTab}', '${item.name}', '${item.size}')">Restaurar</button>
       </div>
     </div>
-  `).join('');
+  `}).join('');
 }
 
 function renderRepos(grouped) {
@@ -659,6 +662,12 @@ function getTypeLabel(type) {
   return {apps:'📦 Apps', bd:'🗄️ Banco de Dados', git:'🐙 Git Full', repos:'📁 Repositórios'}[type] || type;
 }
 
+function getAppBaseName(filename) {
+  const match = filename.match(/(.*?)(?:-\d{8}_\d{6})/);
+  if (match) return match[1];
+  return filename.split('-')[0];
+}
+
 // Auto-refresh every 30s
 setInterval(() => {
   if (document.getElementById('app').style.display !== 'none') {