diff --git a/messages/en.json b/messages/en.json
index b472350..66bae38 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -148,7 +148,8 @@
     "topUpNote": "Note: This is a development environment. No real payment will be processed.",
     "processing": "Processing...",
     "topUpNow": "Top Up Now",
-    "cancel": "Cancel"
+    "cancel": "Cancel",
+    "instantTopUp": "Instant top-up available"
   },
   "studio": {
     "title": "AI Prompt Studio",
diff --git a/messages/zh.json b/messages/zh.json
index 2b84855..c65a381 100644
--- a/messages/zh.json
+++ b/messages/zh.json
@@ -148,7 +148,8 @@
     "topUpNote": "注意：这是开发环境，不会进行真实的支付处理。",
     "processing": "处理中...",
     "topUpNow": "立即充值",
-    "cancel": "取消"
+    "cancel": "取消",
+    "instantTopUp": "支持即时充值"
   },
   "studio": {
     "title": "AI 提示词工作室",
diff --git a/src/app/credits/page.tsx b/src/app/credits/page.tsx
index 940afcd..8775aa2 100644
--- a/src/app/credits/page.tsx
+++ b/src/app/credits/page.tsx
@@ -248,94 +248,92 @@ export default function CreditsPage() {
           <p className="text-muted-foreground">{t('subtitle')}</p>
         </div>
 
-        {/* Stats Cards */}
+        {/* Balance and Top-up Section */}
         {stats && (
-          <div className="space-y-4 mb-8">
-            {/* Balance Card with Top-up Button */}
-            <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-end">
-              <Card className="flex-1 p-6 bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-950/20 dark:to-emerald-950/20 border-green-200/50 dark:border-green-800/50">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center space-x-3">
-                    <div className="p-2 rounded-full bg-green-500">
-                      <CreditCard className="w-5 h-5 text-white" />
+          <div className="space-y-6 mb-8">
+            {/* Main Balance Card */}
+            <Card className="overflow-hidden">
+              <div className="bg-gradient-to-br from-green-50 via-emerald-50 to-teal-50 dark:from-green-950/30 dark:via-emerald-950/30 dark:to-teal-950/30 p-6 sm:p-8">
+                <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+                  {/* Balance Display */}
+                  <div className="flex items-center space-x-4">
+                    <div className="p-3 rounded-full bg-green-500 shadow-lg">
+                      <CreditCard className="w-6 h-6 text-white" />
                     </div>
                     <div>
-                      <p className="text-sm font-medium text-green-700 dark:text-green-300">{t('currentBalance')}</p>
-                      <p className="text-2xl font-bold text-green-800 dark:text-green-200">
+                      <p className="text-sm font-medium text-green-700 dark:text-green-300 mb-1">
+                        {t('currentBalance')}
+                      </p>
+                      <p className="text-3xl sm:text-4xl font-bold text-green-800 dark:text-green-200">
                         ${stats.currentBalance.toFixed(2)}
                       </p>
                     </div>
                   </div>
-                </div>
-              </Card>
-              
-              <Button
-                onClick={() => setShowTopUpModal(true)}
-                className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-6 py-2 rounded-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200"
-              >
-                <Plus className="w-4 h-4 mr-2" />
-                {t('topUp')}
-              </Button>
-            </div>
-
-            {/* Other Stats */}
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-              <Card className="p-6">
-                <div className="flex items-center space-x-3">
-                  <div className="p-2 rounded-full bg-blue-500">
-                    <TrendingUp className="w-5 h-5 text-white" />
+                  
+                  {/* Top-up Button */}
+                  <div className="flex flex-col items-stretch sm:items-end gap-2 w-full sm:w-auto">
+                    <Button
+                      onClick={() => setShowTopUpModal(true)}
+                      size="lg"
+                      className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-8 py-3 rounded-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105"
+                    >
+                      <Plus className="w-5 h-5 mr-2" />
+                      {t('topUp')}
+                    </Button>
+                    <p className="text-xs text-green-600 dark:text-green-400 text-center sm:text-right">
+                      {t('instantTopUp')}
+                    </p>
                   </div>
-                  <div>
-                    <p className="text-sm font-medium text-muted-foreground">{t('totalEarned')}</p>
-                    <p className="text-xl font-bold text-foreground">${stats.totalEarned.toFixed(2)}</p>
+                </div>
+              </div>
+            </Card>
+
+            {/* Stats Overview */}
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+              <Card className="p-4 sm:p-5 hover:shadow-md transition-shadow duration-200">
+                <div className="flex items-center space-x-3">
+                  <div className="p-2 rounded-full bg-blue-500/10 dark:bg-blue-500/20">
+                    <TrendingUp className="w-4 h-4 text-blue-500" />
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <p className="text-xs font-medium text-muted-foreground truncate">{t('totalEarned')}</p>
+                    <p className="text-lg font-bold text-foreground">${stats.totalEarned.toFixed(2)}</p>
                   </div>
                 </div>
               </Card>
 
-              <Card className="p-6">
+              <Card className="p-4 sm:p-5 hover:shadow-md transition-shadow duration-200">
                 <div className="flex items-center space-x-3">
-                  <div className="p-2 rounded-full bg-blue-500">
-                    <TrendingUp className="w-5 h-5 text-white" />
+                  <div className="p-2 rounded-full bg-red-500/10 dark:bg-red-500/20">
+                    <TrendingDown className="w-4 h-4 text-red-500" />
                   </div>
-                  <div>
-                    <p className="text-sm font-medium text-muted-foreground">{t('totalEarned')}</p>
-                    <p className="text-xl font-bold text-foreground">${stats.totalEarned.toFixed(2)}</p>
+                  <div className="min-w-0 flex-1">
+                    <p className="text-xs font-medium text-muted-foreground truncate">{t('totalSpent')}</p>
+                    <p className="text-lg font-bold text-foreground">${stats.totalSpent.toFixed(2)}</p>
                   </div>
                 </div>
               </Card>
 
-              <Card className="p-6">
+              <Card className="p-4 sm:p-5 hover:shadow-md transition-shadow duration-200">
                 <div className="flex items-center space-x-3">
-                  <div className="p-2 rounded-full bg-red-500">
-                    <TrendingDown className="w-5 h-5 text-white" />
+                  <div className="p-2 rounded-full bg-emerald-500/10 dark:bg-emerald-500/20">
+                    <Calendar className="w-4 h-4 text-emerald-500" />
                   </div>
-                  <div>
-                    <p className="text-sm font-medium text-muted-foreground">{t('totalSpent')}</p>
-                    <p className="text-xl font-bold text-foreground">${stats.totalSpent.toFixed(2)}</p>
+                  <div className="min-w-0 flex-1">
+                    <p className="text-xs font-medium text-muted-foreground truncate">{t('thisMonthEarned')}</p>
+                    <p className="text-lg font-bold text-foreground">${stats.thisMonthEarned.toFixed(2)}</p>
                   </div>
                 </div>
               </Card>
 
-              <Card className="p-6">
+              <Card className="p-4 sm:p-5 hover:shadow-md transition-shadow duration-200">
                 <div className="flex items-center space-x-3">
-                  <div className="p-2 rounded-full bg-emerald-500">
-                    <Calendar className="w-5 h-5 text-white" />
+                  <div className="p-2 rounded-full bg-orange-500/10 dark:bg-orange-500/20">
+                    <Calendar className="w-4 h-4 text-orange-500" />
                   </div>
-                  <div>
-                    <p className="text-sm font-medium text-muted-foreground">{t('thisMonthEarned')}</p>
-                    <p className="text-xl font-bold text-foreground">${stats.thisMonthEarned.toFixed(2)}</p>
-                  </div>
-                </div>
-              </Card>
-
-              <Card className="p-6">
-                <div className="flex items-center space-x-3">
-                  <div className="p-2 rounded-full bg-orange-500">
-                    <Calendar className="w-5 h-5 text-white" />
-                  </div>
-                  <div>
-                    <p className="text-sm font-medium text-muted-foreground">{t('thisMonthSpent')}</p>
-                    <p className="text-xl font-bold text-foreground">${stats.thisMonthSpent.toFixed(2)}</p>
+                  <div className="min-w-0 flex-1">
+                    <p className="text-xs font-medium text-muted-foreground truncate">{t('thisMonthSpent')}</p>
+                    <p className="text-lg font-bold text-foreground">${stats.thisMonthSpent.toFixed(2)}</p>
                   </div>
                 </div>
               </Card>