diff --git a/payment_backend/app.py b/payment_backend/app.py
index 07a5a51..d077c52 100644
--- a/payment_backend/app.py
+++ b/payment_backend/app.py
@@ -89,8 +89,11 @@ def query_order():
     offset = (page - 1) * page_size
     limit = page_size
 
-    orders = order_service.query_order(name, phone, email, wallet_address, offset, limit)
-    return jsonify({"orders": orders}), 200
+    if name or phone or email or wallet_address:
+        orders, order_count = order_service.query_order(name, phone, email, wallet_address, offset, limit)
+    else:
+        orders, order_count = [], 0
+    return jsonify({"orders": orders, "totalOrders": order_count}), 200
 
 
 order_status = config.order.order_status
diff --git a/payment_backend/repositories/order.py b/payment_backend/repositories/order.py
index 7a41b3c..3f35e39 100644
--- a/payment_backend/repositories/order.py
+++ b/payment_backend/repositories/order.py
@@ -50,9 +50,21 @@ class OrderRepository:
             query_columns=['order_id', 'name', 'phone', 'email', 'quant', 'payment_method', 'from_address',
                            'create_timestamp', 'update_timestamp', 'status']
         )
-        select_sql = f"{select_sql} LIMIT %s OFFSET %s"
+        select_sql = f"{select_sql} ORDER BY update_timestamp DESC LIMIT %s OFFSET %s"
         params = params + [limit, offset]
+        logger.debug(f'querying order {order.id} info')
+        logger.debug(f'select_sql: {select_sql}')
+        logger.debug(f'params: {params}')
         cursor = self.db.execute_query(select_sql, params)
         result = cursor.fetchmany(limit)
         cursor.close()
         return result
+
+    def count(self, order):
+        select_sql, params = order.select_sql(
+            query_columns=['count(*)']
+        )
+        cursor = self.db.execute_query(select_sql, params)
+        result = cursor.fetchone()[0]
+        cursor.close()
+        return result
diff --git a/payment_backend/services/order.py b/payment_backend/services/order.py
index 6599676..efa8c5a 100644
--- a/payment_backend/services/order.py
+++ b/payment_backend/services/order.py
@@ -19,8 +19,9 @@ class OrderService:
 
     def query_order(self, name=None, phone=None, email=None, wallet_address=None,
                     offset=0, limit=10):
-        orders = self.order_repo.query(Order(name=name, phone=phone, email=email, from_address=wallet_address),
-                                       offset, limit)
+        order_obj = Order(name=name, phone=phone, email=email, from_address=wallet_address)
+        orders = self.order_repo.query(order_obj, offset, limit)
+        order_count = self.order_repo.count(order_obj)
         cleaned_orders = []
         for order in orders:
             cleaned_order = []
@@ -44,7 +45,7 @@ class OrderService:
                         v = ''
                 cleaned_order.append(v)
             cleaned_orders.append(cleaned_order)
-        return cleaned_orders
+        return cleaned_orders, order_count
 
     def create_order(self, name, phone, email, quant, payment_method, wallet_address):
         date_str = current().strftime('%Y%m%d%H%M%S')
diff --git a/payment_headend/css/styles.css b/payment_headend/css/styles.css
deleted file mode 100644
index b02678f..0000000
--- a/payment_headend/css/styles.css
+++ /dev/null
@@ -1,238 +0,0 @@
-body {
-    font-family: 'Roboto', sans-serif;
-    margin: 0;
-    padding: 0;
-    background-color: #f4f7fa;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-}
-
-.container {
-    background: white;
-    border-radius: 8px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    max-width: 500px;
-    padding: 20px 30px;
-}
-
-h1 {
-    text-align: center;
-    color: #333;
-}
-
-.tips {
-    background-color: #eef3ff;
-    border-left: 4px solid #5b8def;
-    padding: 15px;
-    margin-bottom: 20px;
-    border-radius: 4px;
-    font-size: 14px;
-    color: #333;
-}
-
-.special-notice {
-    background-color: #d6e4ff;
-    padding: 1vh;
-}
-
-.form-group {
-    margin-bottom: 15px;
-}
-
-.form-group label {
-    display: block;
-    font-weight: 500;
-    margin-bottom: 5px;
-    color: #555;
-}
-
-.form-group input[type="text"],
-.form-group input[type="email"],
-.form-group input[type="number"] {
-    width: 100%;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    box-sizing: border-box;
-}
-
-.form-group input:focus {
-    border-color: #5b8def;
-    outline: none;
-    box-shadow: 0 0 5px rgba(91, 141, 239, 0.2);
-}
-
-.form-group input[type="radio"] {
-    margin-right: 10px;
-}
-
-.payment-container {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.payment-label {
-    font-weight: 500;
-    margin-right: 10px;
-}
-
-.payment-option {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    padding: 8px 15px;
-    cursor: pointer;
-    transition: border-color 0.3s, background-color 0.3s;
-}
-
-.payment-option.selected {
-    border: 2px solid #5b8def;
-    background-color: rgba(91, 141, 239, 0.1);
-}
-
-.payment-option input[type="radio"] {
-    display: none;
-}
-
-.payment-option span {
-    margin-left: 5px;
-    color: #333;
-}
-
-.payment-option img {
-    width: 24px;
-    height: 24px;
-}
-
-.dot {
-    width: 12px;
-    height: 12px;
-    background-color: #5b8def;
-    border-radius: 50%;
-    margin-right: 8px;
-}
-
-.payment-option.selected .dot {
-    background-color: #007bff;
-}
-
-button {
-    width: 100%;
-    padding: 12px;
-    background-color: #5b8def;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    font-size: 16px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.3s;
-}
-
-button:hover {
-    background-color: #487acc;
-}
-
-.el-icon {
-    --color: inherit;
-    height: 1em;
-    width: 1em;
-    line-height: 1em;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    fill: currentColor;
-    color: var(--color);
-    font-size: inherit;
-}
-
-.modal {
-    display: none; /* 初始隐藏 */
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    align-items: center;
-    justify-content: center;
-}
-
-.modal-content {
-    background: white;
-    padding: 20px;
-    border-radius: 8px;
-    width: 90%;
-    max-width: 46vh;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    position: relative;
-}
-
-.close-btn {
-    color: #aaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
-    position: absolute;
-    top: 10px;
-    right: 20px;
-    cursor: pointer;
-}
-
-.close-btn:hover,
-.close-btn:focus {
-    color: black;
-}
-
-.modal-header h2 {
-    display: flex;
-    justify-content: center; /* 标题居中 */
-    align-items: center;
-    position: relative;
-}
-
-.modal-body {
-    max-height: 45vh;
-    overflow-y: auto;
-    display: flex; /* 添加 Flexbox */
-    flex-direction: column; /* 垂直排列子元素 */
-    align-items: center; /* 水平居中 */
-    justify-content: center; /* 垂直居中 */
-    text-align: center;
-}
-
-.modal-footer {
-    margin-top: 15px;
-    text-align: center;
-}
-
-.qr-code {
-    margin-top: 15px;
-    max-width: 100%;
-    height: auto;
-    max-height: 200px;
-    display: block;
-}
-
-.payment-address {
-    margin-top: 10px;
-    font-size: 14px;
-    word-break: break-all;
-    text-align: center;
-}
-
-.address-option {
-    padding: 10px;
-    border-bottom: 1px solid #ccc;
-    cursor: pointer;
-}
-
-.address-option:hover {
-    background: #f1f1f1;
-}
\ No newline at end of file
diff --git a/payment_headend/index.html b/payment_headend/index.html
index 9de9ead..d056923 100644
--- a/payment_headend/index.html
+++ b/payment_headend/index.html
@@ -5,7 +5,228 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Recharge Page</title>
     <link href="/css/modules.fdcec670.css" rel="stylesheet"/>
-    <link rel="stylesheet" href="/css/styles.css"/>
+    <style>
+        body {
+            font-family: 'Roboto', sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f4f7fa;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+        }
+
+        .container {
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            max-width: 500px;
+            padding: 20px 30px;
+        }
+
+        h1 {
+            text-align: center;
+            color: #333;
+        }
+
+        .tips {
+            background-color: #eef3ff;
+            border-left: 4px solid #5b8def;
+            padding: 15px;
+            margin-bottom: 20px;
+            border-radius: 4px;
+            font-size: 14px;
+            color: #333;
+        }
+
+        .special-notice {
+            background-color: #d6e4ff;
+            padding: 1vh;
+        }
+
+        .form-group {
+            margin-bottom: 15px;
+        }
+
+        .form-group label {
+            display: block;
+            font-weight: 500;
+            margin-bottom: 5px;
+            color: #555;
+        }
+
+        .form-group input[type="text"],
+        .form-group input[type="email"],
+        .form-group input[type="number"] {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            box-sizing: border-box;
+        }
+
+        .form-group input:focus {
+            border-color: #5b8def;
+            outline: none;
+            box-shadow: 0 0 5px rgba(91, 141, 239, 0.2);
+        }
+
+        .form-group input[type="radio"] {
+            margin-right: 10px;
+        }
+
+        .payment-container {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .payment-label {
+            font-weight: 500;
+            margin-right: 10px;
+        }
+
+        .payment-option {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            padding: 8px 15px;
+            cursor: pointer;
+            transition: border-color 0.3s, background-color 0.3s;
+        }
+
+        .payment-option.selected {
+            border: 2px solid #5b8def;
+            background-color: rgba(91, 141, 239, 0.1);
+        }
+
+        .payment-option input[type="radio"] {
+            display: none;
+        }
+
+        .payment-option span {
+            margin-left: 5px;
+            color: #333;
+        }
+
+        .payment-option img {
+            width: 24px;
+            height: 24px;
+        }
+
+        .payment-option.selected .dot {
+            background-color: #007bff;
+        }
+
+        button {
+            width: 100%;
+            padding: 12px;
+            background-color: #5b8def;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            font-size: 16px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        button:hover {
+            background-color: #487acc;
+        }
+
+        .el-icon {
+            --color: inherit;
+            height: 1em;
+            width: 1em;
+            line-height: 1em;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            fill: currentColor;
+            color: var(--color);
+            font-size: inherit;
+        }
+
+        .modal {
+            display: none; /* 初始隐藏 */
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            align-items: center;
+            justify-content: center;
+        }
+
+        .modal-content {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            width: 90%;
+            max-width: 46vh;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            position: relative;
+        }
+
+        .close-btn {
+            color: #aaa;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+            position: absolute;
+            top: 10px;
+            right: 20px;
+            cursor: pointer;
+        }
+
+        .close-btn:hover,
+        .close-btn:focus {
+            color: black;
+        }
+
+        .modal-header h2 {
+            display: flex;
+            justify-content: center; /* 标题居中 */
+            align-items: center;
+            position: relative;
+        }
+
+        .modal-body {
+            max-height: 45vh;
+            overflow-y: auto;
+            display: flex; /* 添加 Flexbox */
+            flex-direction: column; /* 垂直排列子元素 */
+            align-items: center; /* 水平居中 */
+            justify-content: center; /* 垂直居中 */
+            text-align: center;
+        }
+
+        .modal-footer {
+            margin-top: 15px;
+            text-align: center;
+        }
+
+        .qr-code {
+            margin-top: 15px;
+            max-width: 100%;
+            height: auto;
+            max-height: 200px;
+            display: block;
+        }
+
+        .payment-address {
+            margin-top: 10px;
+            font-size: 14px;
+            word-break: break-all;
+            text-align: center;
+        }
+    </style>
     <link rel="stylesheet" href="/css/customAlert.css"/>
     <link rel="preload" href="/js/index.js" as="script">
     <script src="/js/index.js"></script>
diff --git a/payment_headend/js/index.js b/payment_headend/js/index.js
index 73e0d0c..ecd825f 100644
--- a/payment_headend/js/index.js
+++ b/payment_headend/js/index.js
@@ -243,10 +243,16 @@ function handleQuery() {
     const name = document.getElementById('nickname').value.trim();
     const phone = document.getElementById('phone').value.trim();
     const email = document.getElementById('email').value.trim();
-    const payment_address = document.getElementById('wallet').value.trim();
+    const walletAddress = document.getElementById('wallet').value.trim();
 
-    // 调用createOrder函数
-    queryOrder(name, phone, email, payment_address);
+    const queryParams = {
+        name: name,
+        phone: phone,
+        email: email,
+        wallet_address: walletAddress,
+    };
+    sessionStorage.setItem('queryParams', JSON.stringify(queryParams));
+    window.location.href = '/orderDetails.html';
 }
 
 
diff --git a/payment_headend/orderDetails.html b/payment_headend/orderDetails.html
new file mode 100644
index 0000000..6c44b84
--- /dev/null
+++ b/payment_headend/orderDetails.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Order Information</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f9f9f9;
+        }
+        .container {
+            width: 80%;
+            margin: 20px auto;
+            background: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+        table th, table td {
+            border: 1px solid #ddd;
+            padding: 8px;
+            text-align: left;
+        }
+        table th {
+            background-color: #f2f2f2;
+        }
+        .pagination {
+            margin: 20px 0;
+            text-align: center;
+        }
+        .pagination button {
+            margin: 0 5px;
+            padding: 10px 20px;
+            border: none;
+            background-color: #007bff;
+            color: white;
+            cursor: pointer;
+            border-radius: 5px;
+        }
+        .pagination button[disabled] {
+            background-color: #ccc;
+            cursor: not-allowed;
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+    <h2>Order Information</h2>
+    <table id="orderTable">
+        <thead>
+        <tr>
+            <th>Order ID</th>
+            <th>Name</th>
+            <th>Phone</th>
+            <th>Email</th>
+            <th>Quantity</th>
+            <th>Payment Method</th>
+            <th>From Address</th>
+            <th>Create Timestamp</th>
+            <th>Update Timestamp</th>
+            <th>Status</th>
+        </tr>
+        </thead>
+        <tbody>
+        <!-- Orders will be dynamically inserted here -->
+        </tbody>
+    </table>
+    <div class="pagination">
+        <button id="prevPageBtn" disabled>Previous</button>
+        <button id="nextPageBtn">Next</button>
+    </div>
+</div>
+
+<script>
+    const queryParams = JSON.parse(sessionStorage.getItem('queryParams'));
+    if (!queryParams) {
+        console.error('Query parameters not found.');
+        alert('No query parameters found. Please return to the index page.');
+        window.location.href = '/index.html';
+    }
+    queryParams.page = queryParams.page || 1;
+    queryParams.pageSize = queryParams.pageSize || 10;
+
+    // 查询接口
+    const apiBaseUrl = 'http://127.0.0.1:5000';
+    async function queryOrder() {
+        try {
+            const response = await fetch(`${apiBaseUrl}/queryOrder`, {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify(queryParams)
+            });
+
+            if (!response.ok) {
+                throw new Error('Failed to query orders');
+            }
+            const data = await response.json();
+            renderTable(data.orders);
+            updatePaginationButtons(data.totalOrders);
+        } catch (error) {
+            console.error('Network or server error:', error);
+        }
+    }
+
+    function renderTable(orders) {
+        const tbody = document.querySelector('#orderTable tbody');
+        tbody.innerHTML = ''; // 清空表格内容
+        orders.forEach(order => {
+            const row = `
+                    <tr>
+                        <td>${order[0]}</td>
+                        <td>${order[1]}</td>
+                        <td>${order[2]}</td>
+                        <td>${order[3]}</td>
+                        <td>${order[4]}</td>
+                        <td>${order[5]}</td>
+                        <td>${order[6]}</td>
+                        <td>${order[7]}</td>
+                        <td>${order[8]}</td>
+                        <td>${order[9]}</td>
+                    </tr>
+                `;
+            tbody.insertAdjacentHTML('beforeend', row);
+        });
+    }
+
+    // 更新分页按钮状态
+    function updatePaginationButtons(totalOrders) {
+        const totalPages = Math.ceil(totalOrders / queryParams.pageSize);
+        document.getElementById('prevPageBtn').disabled = queryParams.page <= 1;
+        document.getElementById('nextPageBtn').disabled = queryParams.page >= totalPages;
+    }
+
+    // 翻页操作
+    document.getElementById('prevPageBtn').addEventListener('click', () => {
+        if (queryParams.page > 1) {
+            queryParams.page -= 1;
+            queryOrder();
+        }
+    });
+
+    document.getElementById('nextPageBtn').addEventListener('click', () => {
+        queryParams.page += 1;
+        queryOrder();
+    });
+
+    // 页面加载时查询第一页
+    queryOrder();
+</script>
+</body>
+</html>