diff --git a/templates/logs.html b/templates/logs.html
index e7fd07e..ae5954d 100644
--- a/templates/logs.html
+++ b/templates/logs.html
@@ -2,39 +2,135 @@
 <html>
 <head>
     <title>Today's Scan Logs</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+            line-height: 1.6;
+            color: #333;
+            background-color: #f5f5f5;
+            padding: 20px;
+        }
+
+        h1 {
+            text-align: center;
+            color: #2c3e50;
+            margin: 20px 0;
+            font-size: 1.8rem;
+        }
+
+        #logs-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+
         table {
-            width: 80%;
-            margin: 20px auto;
+            width: 100%;
             border-collapse: collapse;
+            background: white;
         }
+
         th, td {
-            padding: 8px;
+            padding: 12px 15px;
             text-align: left;
-            border: 1px solid #ddd;
+            border-bottom: 1px solid #eee;
         }
+
         th {
-            background-color: #f2f2f2;
+            background-color: #f8f9fa;
+            font-weight: 600;
+            color: #2c3e50;
+            white-space: nowrap;
         }
+
+        tr:hover {
+            background-color: #f8f9fa;
+        }
+
         .empty-name {
+            background-color: #fff3f3;
+        }
+
+        .empty-name:hover {
             background-color: #ffe6e6;
         }
+
         .retry-button {
-            padding: 5px 10px;
+            padding: 8px 16px;
             background-color: #4CAF50;
             color: white;
             border: none;
             border-radius: 4px;
             cursor: pointer;
+            font-size: 0.9rem;
+            transition: all 0.3s ease;
         }
+
         .retry-button:hover {
             background-color: #45a049;
+            transform: translateY(-1px);
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+
+        .retry-button:active {
+            transform: translateY(0);
+        }
+
+        /* 响应式设计 */
+        @media screen and (max-width: 768px) {
+            body {
+                padding: 10px;
+            }
+
+            h1 {
+                font-size: 1.5rem;
+            }
+
+            table {
+                display: block;
+                overflow-x: auto;
+                -webkit-overflow-scrolling: touch;
+            }
+
+            th, td {
+                padding: 10px;
+                font-size: 0.9rem;
+            }
+
+            .retry-button {
+                padding: 6px 12px;
+                font-size: 0.8rem;
+            }
+        }
+
+        /* 加载动画 */
+        .loading {
+            text-align: center;
+            padding: 20px;
+            color: #666;
+        }
+
+        /* 空状态样式 */
+        .empty-state {
+            text-align: center;
+            padding: 40px 20px;
+            color: #666;
         }
     </style>
 </head>
 <body>
-    <h1 style="text-align: center;">Today's Scan Logs</h1>
+    <h1>Today's Scan Logs</h1>
     <div id="logs-container">
         <table>
             <thead>
@@ -50,8 +146,10 @@
     </div>
 
     <script>
-        // 加载日志数据
         function loadLogs() {
+            const logsBody = $('#logs-body');
+            logsBody.html('<tr><td colspan="3" class="loading">Loading...</td></tr>');
+
             $.ajax({
                 url: '/scanlogs/today',
                 method: 'GET',
@@ -59,6 +157,11 @@
                     const tbody = $('#logs-body');
                     tbody.empty();
                     
+                    if (!response.logs || response.logs.length === 0) {
+                        tbody.html('<tr><td colspan="3" class="empty-state">No logs found</td></tr>');
+                        return;
+                    }
+                    
                     response.logs.forEach(function(log) {
                         const row = $('<tr>');
                         if (!log.name) {
@@ -82,23 +185,25 @@
                     });
                 },
                 error: function(xhr, status, error) {
-                    alert('Failed to load logs: ' + error);
+                    const tbody = $('#logs-body');
+                    tbody.html('<tr><td colspan="3" class="empty-state">Failed to load logs: ' + error + '</td></tr>');
                 }
             });
         }
 
-        // 重试处理条码
         function retryBarcode(barcode) {
             $.ajax({
                 url: '/barcode',
                 method: 'POST',
                 data: JSON.stringify({ 
-                    data: barcode
+                    data: {
+                        data: barcode
+                    }
                 }),
                 contentType: 'application/json',
                 success: function(response) {
                     alert('Barcode has been added to queue');
-                    loadLogs();  // 重新加载数据
+                    loadLogs();
                 },
                 error: function(xhr, status, error) {
                     alert('Failed to process barcode: ' + error);
@@ -106,11 +211,8 @@
             });
         }
 
-        // 页面加载时获取数据
         $(document).ready(function() {
             loadLogs();
-            
-            // 每30秒自动刷新一次
             setInterval(loadLogs, 30000);
         });
     </script>
