diff --git a/assets/css/routes/user-center/credits.css b/assets/css/routes/user-center/credits.css
index e8b3ce12..8a6ce139 100644
--- a/assets/css/routes/user-center/credits.css
+++ b/assets/css/routes/user-center/credits.css
@@ -30,8 +30,7 @@
 .uc-assets-row--dual > .uc-assets-col {
   display: contents;
 }
-.uc-assets-row--dual > .uc-assets-col:first-child > .uc-asset-card,
-.uc-assets-row--dual > .uc-assets-col:first-child > .uc-card-pass {
+.uc-assets-row--dual > .uc-assets-col:first-child > .uc-asset-card {
   grid-column: 1;
 }
 .uc-assets-row--dual > .uc-assets-col:last-child > .uc-asset-card,
diff --git a/assets/js/credits.js b/assets/js/credits.js
index 9e3b5406..cebda6c0 100644
--- a/assets/js/credits.js
+++ b/assets/js/credits.js
@@ -271,6 +271,20 @@
 		var roots = document.querySelectorAll('[data-aksrt-card-pass]');
 		if (!roots || !roots.length) return;
 
+		var modal = document.querySelector('[data-aksrt-card-pass-modal]');
+		if (modal) {
+			modal.querySelectorAll('[data-aksrt-card-pass-close]').forEach(function (btn) {
+				if (btn.dataset.aksrtCardPassCloseBound === '1') return;
+				btn.dataset.aksrtCardPassCloseBound = '1';
+				btn.addEventListener('click', function () { closeModal(modal); });
+			});
+		}
+		document.querySelectorAll('[data-aksrt-card-pass-open]').forEach(function (btn) {
+			if (btn.dataset.aksrtCardPassOpenBound === '1') return;
+			btn.dataset.aksrtCardPassOpenBound = '1';
+			btn.addEventListener('click', function () { openModal(modal); });
+		});
+
 		Array.prototype.forEach.call(roots, function (root) {
 			var tip = root.querySelector('[data-aksrt-card-tip]');
 			var busy = false;
diff --git a/inc/helpers/user-center-renderers/credits-wallet.php b/inc/helpers/user-center-renderers/credits-wallet.php
index 95eb7e51..cfb76696 100644
--- a/inc/helpers/user-center-renderers/credits-wallet.php
+++ b/inc/helpers/user-center-renderers/credits-wallet.php
@@ -92,30 +92,41 @@ $mark = (string) ($charge_view['currency_mark'] ?? '元');
 			<button type="button" class="but b-blue-2" data-aksrt-charge-open><?php esc_html_e('充值', 'aksrt'); ?></button>
 		</div>
 	</div>
-	<?php if ($withdraw_on) : ?>
-		<div class="uc-asset-card__foot muted-2-color em09 mt6">
-			<span><?php printf(esc_html__('冻结中 %s', 'aksrt'), esc_html($normalize_balance($withdraw_pending_hold)->formatted())); ?></span>
+	<?php if ($withdraw_on || !empty($card_pass_balance['enabled'])) : ?>
+		<div class="uc-asset-card__foot muted-2-color em09 mt6 flex jsb ac">
+			<?php if ($withdraw_on) : ?>
+				<span><?php printf(esc_html__('冻结中 %s', 'aksrt'), esc_html($normalize_balance($withdraw_pending_hold)->formatted())); ?></span>
+			<?php else : ?>
+				<span></span>
+			<?php endif; ?>
+			<?php if (!empty($card_pass_balance['enabled'])) : ?>
+				<button type="button" class="uc-asset-card__head-action muted-color px12" data-aksrt-card-pass-open>
+					<?php esc_html_e('卡密兑换', 'aksrt'); ?>
+					<i class="fa fas fa-angle-right em12 ml3" aria-hidden="true"></i>
+				</button>
+			<?php endif; ?>
 		</div>
 	<?php endif; ?>
 </div>
 
 <?php if (!empty($card_pass_balance['enabled'])) : ?>
-<div class="uc-card-pass" data-aksrt-card-pass="balance">
-	<div class="uc-card-pass__title">
-		<i class="fa fas fa-ticket-alt" aria-hidden="true"></i>
-		<span><?php esc_html_e('卡密兑换余额', 'aksrt'); ?></span>
+<div class="uc-modal" id="aksrt-card-pass-modal" hidden data-aksrt-card-pass-modal data-aksrt-card-pass="balance">
+	<div class="uc-modal__overlay" data-aksrt-card-pass-close></div>
+	<div class="uc-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="aksrt-card-pass-title">
+		<button type="button" class="uc-modal__close" data-aksrt-card-pass-close aria-label="<?php esc_attr_e('关闭', 'aksrt'); ?>"><i class="fa fas fa-times" aria-hidden="true"></i></button>
+		<h3 id="aksrt-card-pass-title" class="uc-modal__title"><i class="fa fas fa-ticket-alt mr6" aria-hidden="true"></i><?php esc_html_e('卡密兑换余额', 'aksrt'); ?></h3>
+		<?php if (!empty($card_pass_balance['desc'])) : ?>
+			<div class="uc-modal__desc muted-box em09"><?php echo esc_html((string) $card_pass_balance['desc']); ?></div>
+		<?php endif; ?>
+		<?php if (empty($card_pass_balance['only_password'])) : ?>
+			<input type="text" class="uc-card-pass__input" name="aksrt_card_no" data-aksrt-card-no autocomplete="off" placeholder="<?php esc_attr_e('请输入卡号', 'aksrt'); ?>">
+		<?php endif; ?>
+		<input type="text" class="uc-card-pass__input" name="aksrt_card_password" data-aksrt-card-password autocomplete="off" placeholder="<?php esc_attr_e('请输入卡密', 'aksrt'); ?>">
+		<button type="button" class="uc-card-pass__btn" data-aksrt-card-redeem data-type="balance">
+			<?php esc_html_e('兑换余额', 'aksrt'); ?>
+		</button>
+		<p class="uc-card-pass__tip" data-aksrt-card-tip></p>
 	</div>
-	<?php if (!empty($card_pass_balance['desc'])) : ?>
-		<p class="uc-card-pass__desc"><?php echo esc_html((string) $card_pass_balance['desc']); ?></p>
-	<?php endif; ?>
-	<?php if (empty($card_pass_balance['only_password'])) : ?>
-		<input type="text" class="uc-card-pass__input" name="aksrt_card_no" data-aksrt-card-no autocomplete="off" placeholder="<?php esc_attr_e('请输入卡号', 'aksrt'); ?>">
-	<?php endif; ?>
-	<input type="text" class="uc-card-pass__input" name="aksrt_card_password" data-aksrt-card-password autocomplete="off" placeholder="<?php esc_attr_e('请输入卡密', 'aksrt'); ?>">
-	<button type="button" class="uc-card-pass__btn" data-aksrt-card-redeem data-type="balance">
-		<?php esc_html_e('兑换余额', 'aksrt'); ?>
-	</button>
-	<p class="uc-card-pass__tip" data-aksrt-card-tip></p>
 </div>
 <?php endif; ?>