diff --git a/frontend/css/style.css b/frontend/css/style.css
index 17e2d78..6d6e4dc 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -748,11 +748,13 @@ td {
   cursor: pointer;
   position: relative;
   vertical-align: middle;
-  height: inherit; /* Ensure td takes full height of tr */
+  height: inherit;
+  /* Ensure td takes full height of tr */
 }
 
 #customerTable td {
-  display: table-cell; /* Force correct display mode */
+  display: table-cell;
+  /* Force correct display mode */
 }
 
 tr:hover td {
@@ -1546,6 +1548,38 @@ td.overflow-cell {
   font-size: 0.75rem;
 }
 
+.product-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 10px;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  background-color: #e6f7ed;
+  color: #23a059;
+  border: 1px solid #b7ebc6;
+  margin: 2px;
+  line-height: 1.6;
+}
+
+.product-badge-blue {
+  background-color: #e6f7ff;
+  color: #1890ff;
+  border-color: #91d5ff;
+}
+
+.product-badge-purple {
+  background-color: #f9f0ff;
+  color: #722ed1;
+  border-color: #d3adf7;
+}
+
+.product-badge-orange {
+  background-color: #fff7e6;
+  color: #fa8c16;
+  border-color: #ffd591;
+}
+
 .status-active {
   background-color: #d4edda;
   color: #155724;
@@ -2872,11 +2906,21 @@ tr:hover .action-cell {
 }
 
 @keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes zoomIn {
-  from { transform: scale(0.9); }
-  to { transform: scale(1); }
+  from {
+    transform: scale(0.9);
+  }
+
+  to {
+    transform: scale(1);
+  }
 }
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
index dd6dcef..3ebe1fe 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -317,8 +317,8 @@
                         <div class="filter-group">
                             <label for="trialSortOrder">排序：</label>
                             <select id="trialSortOrder" class="filter-select">
-                                <option value="desc">结束时间倒序</option>
-                                <option value="asc">结束时间顺序</option>
+                                <option value="createdAtDesc">创建时间倒序</option>
+                                <option value="endTimeDesc">结束时间倒序</option>
                             </select>
                         </div>
                     </div>
@@ -625,6 +625,14 @@
                                         <i class="fas fa-angle-double-right"></i>
                                     </button>
                                 </div>
+                                <div class="pagination-size">
+                                    <select id="followupPageSizeSelect">
+                                        <option value="10">10条/页</option>
+                                        <option value="20">20条/页</option>
+                                        <option value="50">50条/页</option>
+                                        <option value="100">100条/页</option>
+                                    </select>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -1180,9 +1188,9 @@
     </div>
 
     <!-- Scripts -->
-    <script src="/static/js/main.js?v=5.2"></script>
+    <script src="/static/js/main.js?v=5.5"></script>
     <script src="/static/js/trial-periods.js?v=1.3"></script>
-    <script src="/static/js/trial-periods-page.js?v=1.6"></script>
+    <script src="/static/js/trial-periods-page.js?v=1.9"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/frontend/js/trial-periods-page.js b/frontend/js/trial-periods-page.js
index 2f96d70..83ad789 100644
--- a/frontend/js/trial-periods-page.js
+++ b/frontend/js/trial-periods-page.js
@@ -10,7 +10,7 @@ let trialTotalPages = 0;
 let customersMap = {}; // Map of customer ID to customer name
 let trialStartDateFilter = '';
 let trialEndDateFilter = '';
-let trialSortOrder = 'desc';
+let trialSortOrder = 'createdAtDesc';
 
 // Initialize trial periods page
 function initTrialPeriodsPage() {
@@ -83,7 +83,7 @@ function initTrialPeriodsPage() {
     // 为编辑弹窗的意向产品复选框添加监听器，控制时间字段显示
     const editIntendedProductCheckboxes = document.querySelectorAll('input[name="editIntendedProduct"]');
     editIntendedProductCheckboxes.forEach(checkbox => {
-        checkbox.addEventListener('change', function() {
+        checkbox.addEventListener('change', function () {
             updateEditTrialTimeFieldsVisibility();
         });
     });
@@ -362,11 +362,18 @@ function applyTrialFiltersAndSort() {
         });
     }
 
-    // Sort by end time
+    // Sorting logic
     filtered.sort((a, b) => {
-        const dateA = new Date(a.endTime);
-        const dateB = new Date(b.endTime);
-        return trialSortOrder === 'asc' ? dateA - dateB : dateB - dateA;
+        if (trialSortOrder === 'createdAtDesc') {
+            const dateA = new Date(a.createdAt || 0);
+            const dateB = new Date(b.createdAt || 0);
+            return dateB - dateA; // Default: Created time descending
+        } else if (trialSortOrder === 'endTimeDesc') {
+            const dateA = new Date(a.endTime || 0);
+            const dateB = new Date(b.endTime || 0);
+            return dateB - dateA; // End time descending
+        }
+        return 0;
     });
 
     filteredTrialPeriodsData = filtered;
@@ -522,16 +529,34 @@ function renderTrialPeriodsTable() {
         // 检查意向产品是否包含"数据闭环"
         // 如果只包含 robogo 或其他，则不显示试用相关信息
         const hasDataLoop = intendedProduct.includes('数据闭环');
-        
+
         // 根据是否有数据闭环来决定显示内容
         const statusCell = hasDataLoop ? statusBadge : '<span style="color: #999;">-</span>';
         const startTimeCell = hasDataLoop ? startTime : '<span style="color: #999;">-</span>';
         const endTimeCell = hasDataLoop ? endTime : '<span style="color: #999;">-</span>';
 
+        // 生成意向产品标签
+        const productBadges = (period.intendedProduct || '').split(',')
+            .map(p => p.trim())
+            .filter(p => p)
+            .map(p => {
+                let colorClass = '';
+                if (p.includes('数据闭环')) {
+                    colorClass = ''; // 保持默认绿色
+                } else if (p.toLowerCase().includes('robogo')) {
+                    colorClass = 'product-badge-blue';
+                } else if (p.includes('数据生成')) {
+                    colorClass = 'product-badge-orange';
+                } else {
+                    colorClass = 'product-badge-purple'; // 其他类型用紫色
+                }
+                return `<span class="product-badge ${colorClass}">${p}</span>`;
+            }).join('');
+
         row.innerHTML = `
             <td><strong>${customerName}</strong></td>
             <td>${source}</td>
-            <td>${intendedProduct}</td>
+            <td>${productBadges}</td>
             <td>${statusCell}</td>
             <td>${startTimeCell}</td>
             <td>${endTimeCell}</td>
@@ -659,11 +684,11 @@ function openEditTrialModal(periodId) {
 function updateEditTrialTimeFieldsVisibility() {
     const intendedProduct = getIntendedProductValue('editTrialIntendedProduct', 'editTrialIntendedProductOther');
     const hasDataLoop = intendedProduct.includes('数据闭环');
-    
+
     const startTimeGroup = document.getElementById('editTrialStartTimeGroup');
     const endTimeGroup = document.getElementById('editTrialEndTimeGroup');
     const isTrialGroup = document.getElementById('editTrialIsTrialGroup');
-    
+
     if (startTimeGroup && endTimeGroup && isTrialGroup) {
         if (hasDataLoop) {
             startTimeGroup.style.display = 'block';