diff --git a/resources/views/balances/index.blade.php b/resources/views/balances/index.blade.php
index e1db4da..0cac490 100644
--- a/resources/views/balances/index.blade.php
+++ b/resources/views/balances/index.blade.php
@@ -3,103 +3,104 @@
 @section('title', '余额')
 
 @section('content')
-    <h1><small class="fs-5">余额</small>
-        {{ bcadd($balance, 0, 2) }}
-        <small class="fs-5">元</small></h1>
-    <p><small class="text-danger"><i class="bi bi-exclamation-circle"></i> 余额不可用于提现</small></p>
+    <div class="d-flex justify-content-center align-items-center h-screen" style="height: 85vh">
+        <div class="text-center">
+            <h1 class="display-1">
+                <small class="fs-4">余额</small>
+
+                {{ bcadd($balance, 0, 2) }}
+
+                <small class="fs-4">元</small>
+            </h1>
+            <p><small class="text-danger"><i class="bi bi-exclamation-circle"></i> 余额不可用于提现</small></p>
+
+            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#chargeModal">
+                添加余额
+            </button>
+        </div>
 
 
-    <h2>充值余额</h2>
-    <form name="charge" method="POST" target="_blank" class="form-horizontal" action="{{ route('balances.store') }}"
-          onsubmit="return confirm('请注意: 由于计费方式的特殊性和虚拟商品的特性，如果非人为的质量问题，我们不提供退款。请合理充值。')">
-        @csrf
+    </div>
 
-        <input type="radio" name="payment" id="wechat" value="wechat" checked>
-        <label for="wechat"> <i class="bi bi-wechat"></i> 微信支付</label>
+    <!-- Modal -->
+    <div class="modal fade" id="chargeModal" tabindex="-1" aria-labelledby="chargeModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h1 class="modal-title fs-5" id="chargeModalLabel">充值</h1>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <form name="charge" id="charge" method="POST" target="_blank" class="form-horizontal"
+                          action="{{ route('balances.store') }}"
+                          onsubmit="return confirm('请注意: 由于计费方式的特殊性和虚拟商品的特性，如果非人为的质量问题，我们不提供退款。请合理充值。')">
+                        @csrf
 
-        <input type="radio" name="payment" id="alipay" value="alipay">
-        <label for="alipay"> <i class="bi bi-alipay"></i> 支付宝</label>
+                        <div class="form-floating mb-3">
+                            <input type="number" id="amount" name="amount" value="10" min="1" max="1000"
+                                   class="form-control" placeholder="输入一个整数金额">
+                            <label for="amount">金额</label>
+                        </div>
 
-        <div class="row col-6 col-lg-3">
-            <div class="input-group mt-2 mb-3 w-100 col-2">
-                <button class="btn btn-outline-secondary" type="submit">充值</button>
-
-
-                <input type="number" id="amount" name="amount" value="10" min="1" max="1000"
-                       class="form-control text-center"
-                       aria-label="充值金额">
-
-                <span class="input-group-text">元</span>
-
-                <button class="btn btn-outline-secondary" type="submit">充值</button>
+                        <input type="radio" name="payment" id="wechat" value="wechat" checked>
+                        <label for="wechat"> <i class="bi bi-wechat"></i> 微信支付</label>
 
+                        <input type="radio" name="payment" id="alipay" value="alipay">
+                        <label for="alipay"> <i class="bi bi-alipay"></i> 支付宝</label>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal"
+                            onclick="document.getElementById('charge').submit()">充值
+                    </button>
+                </div>
             </div>
         </div>
-
-    </form>
-
-    <div class="mt-2">
-        <div>
-            请注意: 由于计费方式的特殊性和虚拟商品的特性，如果非人为的质量问题，我们不提供退款。请合理充值。
-            <br/>
-            <a
-                target="_blank"
-                href="https://forum.laecloud.com/d/4-wo-chong-zhi-hou-jin-e-mei-you-li-ji-dao-zhang"
-            >
-                必看! 充值后金额没有立即到账的原因。
-            </a>
-        </div>
     </div>
 
 
-    <h2 class="mt-3">充值记录</h2>
-    <div class="overflow-auto">
-        <table class="table table-hover">
-            <thead>
-            <tr>
-                <th scope="col">订单号</th>
-                <th scope="col">支付方式</th>
-                <th scope="col">金额</th>
-                <th scope="col">完成时间</th>
-            </tr>
-            </thead>
-            <tbody>
-            @foreach($balances as $b)
+
+
+    <div style="margin-top: 200px;padding-top: 50px" id="chargeLogs">
+        <h2 class="mt-3">充值记录</h2>
+        <div class="overflow-auto">
+            <table class="table table-hover">
+                <thead>
                 <tr>
-                    <td>{{ $b->order_id }}</td>
-                    <td>
-                        <x-payment :payment="$b->payment"></x-payment>
-                    </td>
-                    <td>
-                        {{ $b->amount }}
-                    </td>
-                    <td>
-                        {{ $b->paid_at }}
-                    </td>
+                    <th scope="col">订单号</th>
+                    <th scope="col">支付方式</th>
+                    <th scope="col">金额</th>
+                    <th scope="col">完成时间</th>
                 </tr>
-            @endforeach
+                </thead>
+                <tbody>
+                @foreach($balances as $b)
+                    <tr>
+                        <td>{{ $b->order_id }}</td>
+                        <td>
+                            <x-payment :payment="$b->payment"></x-payment>
+                        </td>
+                        <td>
+                            {{ $b->amount }}
+                        </td>
+                        <td>
+                            {{ $b->paid_at }}
+                        </td>
+                    </tr>
+                @endforeach
 
-            </tbody>
-        </table>
+                </tbody>
+            </table>
+        </div>
+
+        {{ $balances->links() }}
     </div>
 
-    {{ $balances->links() }}
-
-
-    {{-- <script>
-        let rate = {{ $drops_rate }};
-        let to_drops = document.querySelector('#to_drops')
-        let amount = document.querySelector('#amount')
-
-        amount.addEventListener('change', (el) => calc(el.target))
-
-        function calc(el) {
-            to_drops.innerText = (el.value * rate)
-        }
-
-        calc(amount)
-
-
-    </script> --}}
+    <script>
+        @if (Request::has('page'))
+            window.location.href = '#chargeLogs';
+        @endif
+    </script>
 
 @endsection