diff --git a/sponsor.html b/sponsor.html
index a261ad7..b25175d 100644
--- a/sponsor.html
+++ b/sponsor.html
@@ -192,6 +192,149 @@
             margin-bottom: 40px;
         }
 
+        .controls-header {
+            display: flex;
+            width: 100%;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 20px;
+            margin-bottom: 10px;
+        }
+
+        .cta-button {
+            background-color: var(--text-primary);
+            color: white;
+            padding: 10px 20px;
+            border-radius: 99px;
+            text-decoration: none;
+            font-weight: 600;
+            font-size: 14px;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            transition: all 0.2s;
+            cursor: pointer;
+            border: 1px solid transparent;
+        }
+
+        .cta-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        }
+
+        .cta-button.outline {
+            background-color: transparent;
+            color: var(--text-primary);
+            border: 1px solid rgba(0,0,0,0.1);
+        }
+
+        .cta-button.outline:hover {
+            border-color: var(--text-primary);
+            background-color: white;
+        }
+
+        /* Modal Styles */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0.5);
+            backdrop-filter: blur(5px);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .modal.show {
+            display: flex; /* Flex to center */
+            opacity: 1;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .modal-content {
+            background-color: white;
+            margin: auto;
+            padding: 40px;
+            border-radius: 24px;
+            width: 90%;
+            max-width: 400px;
+            position: relative;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
+            transform: scale(0.9);
+            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            text-align: center;
+        }
+
+        .modal.show .modal-content {
+            transform: scale(1);
+        }
+
+        .close-modal {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            color: #aaa;
+            font-size: 24px;
+            cursor: pointer;
+            width: 32px;
+            height: 32px;
+            background: #f5f5f7;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+        }
+
+        .close-modal:hover {
+            color: #000;
+            background: #e5e5e7;
+        }
+
+        .modal-title {
+            font-size: 24px;
+            font-weight: 700;
+            margin-bottom: 8px;
+        }
+
+        .modal-subtitle {
+            color: var(--text-secondary);
+            font-size: 14px;
+            margin-bottom: 30px;
+            line-height: 1.5;
+        }
+
+        .qr-placeholder {
+            background: #f9f9f9;
+            padding: 20px;
+            border-radius: 16px;
+            display: inline-block;
+            margin-bottom: 20px;
+        }
+
+        .qr-img {
+            width: 180px;
+            height: 180px;
+            display: block;
+        }
+
+        .alipay-btn {
+            background: #1677FF;
+            color: white;
+            display: inline-block;
+            width: 100%;
+            padding: 14px;
+            border-radius: 12px;
+            font-weight: 600;
+            text-decoration: none;
+            margin-top: 10px;
+        }
+
         .search-box {
             position: relative;
             width: 100%;
@@ -422,7 +565,13 @@
         
         <!-- Controls -->
         <div class="controls-section">
-            <h2 class="section-title">❤️ 赞助列表</h2>
+            <div class="controls-header">
+                <h2 class="section-title" style="margin-bottom: 0; text-align: left;">❤️ 赞助列表</h2>
+                <button class="cta-button outline" id="open-sponsor-modal">
+                    <i class="fas fa-heart"></i> 我要支持
+                </button>
+            </div>
+            
             <div class="search-box">
                 <i class="fas fa-search"></i>
                 <input type="text" id="sponsor-search" placeholder="搜索赞助者姓名...">
@@ -445,11 +594,36 @@
 
     </div>
 
-    <footer style="text-align: center; padding: 40px; color: var(--text-secondary); font-size: 12px; border-top: 1px solid rgba(0,0,0,0.05); margin-top: 60px;">
-        <p>© 2026 白鹿原 Minecraft 服务器. All rights reserved.</p>
-    </footer>
+    <!-- Sponsor Modal -->
+    <div id="sponsor-modal" class="modal">
+        <div class="modal-content">
+            <span class="close-modal">&times;</span>
+            <div style="width: 50px; height: 50px; background: rgba(52, 199, 89, 0.1); border-radius: 50%; color: var(--brand-green); display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 20px;">
+                <i class="fas fa-gift"></i>
+            </div>
+            <h3 class="modal-title">支持白鹿原服务器</h3>
+            <p class="modal-subtitle">您的每一次支持，都将帮助我们提升服务器性能，维持更长久的运营。</p>
+            
+            <!-- Desktop QR -->
+            <div class="desktop-only-block" id="desktop-qr-view">
+                <div class="qr-placeholder">
+                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https%3A%2F%2Fqr.alipay.com%2F2cz0344fnaulnbybhp04" alt="支付宝二维码" class="qr-img">
+                </div>
+                <p style="font-size: 13px; color: #999;">推荐使用支付宝扫码</p>
+            </div>
+
+            <!-- Mobile Button (will be shown via CSS media query logic in JS or CSS) -->
+            <div class="mobile-only-block" id="mobile-btn-view" style="display: none;">
+                <a href="https://qr.alipay.com/2cz0344fnaulnbybhp04" class="alipay-btn" target="_blank">
+                    <i class="fab fa-alipay"></i> 打开支付宝赞助
+                </a>
+                <p style="font-size: 12px; color: #999; margin-top: 16px;">点击按钮将直接跳转至支付宝转账页面</p>
+            </div>
+        </div>
+    </div>
 
     <script src="sponsor_script.js"></script>
+
     <script>
         // Inline script for mobile menu toggling (copied from script.js)
         // Since we are not using the full script.js which might have index-specific logic
@@ -476,6 +650,47 @@
                     }
                 });
             }
+
+            // Modal Logic
+            const modal = document.getElementById('sponsor-modal');
+            const btn = document.getElementById('open-sponsor-modal');
+            const span = document.getElementsByClassName('close-modal')[0];
+            const desktopView = document.getElementById('desktop-qr-view');
+            const mobileView = document.getElementById('mobile-btn-view');
+
+            // Detect Mobile
+            const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth < 768;
+
+            if (isMobile) {
+                if(desktopView) desktopView.style.display = 'none';
+                if(mobileView) mobileView.style.display = 'block';
+            } else {
+                if(desktopView) desktopView.style.display = 'block';
+                if(mobileView) mobileView.style.display = 'none';
+            }
+
+            btn.onclick = function() {
+                modal.style.display = "flex";
+                // Trigger reflow
+                void modal.offsetWidth; 
+                modal.classList.add('show');
+            }
+
+            span.onclick = function() {
+                modal.classList.remove('show');
+                setTimeout(() => {
+                    modal.style.display = "none";
+                }, 300);
+            }
+
+            window.onclick = function(event) {
+                if (event.target == modal) {
+                    modal.classList.remove('show');
+                    setTimeout(() => {
+                        modal.style.display = "none";
+                    }, 300);
+                }
+            }
         });
     </script>
 </body>