diff --git a/assets/css/frontend/credits.css b/assets/css/frontend/credits.css
index 1ea352a7..19241554 100644
--- a/assets/css/frontend/credits.css
+++ b/assets/css/frontend/credits.css
@@ -363,18 +363,20 @@
 
 .aksrt-vip-level-icon {
 	display: inline-block;
-	width: 1.4em;
-	height: 1.4em;
+	width: auto;
+	height: 1.1em;
+	max-width: 6em;
 	object-fit: contain;
-	vertical-align: middle;
+	vertical-align: -.15em;
 }
 
 .aksrt-vip-badge__icon {
 	display: inline-block;
-	width: 1.35em;
-	height: 1.35em;
+	width: auto;
+	height: 1.1em;
+	max-width: 6em;
 	object-fit: contain;
-	vertical-align: middle;
+	vertical-align: -.15em;
 }
 
 .aksrt-vip-badge i {
diff --git a/assets/css/frontend/vip-modal.css b/assets/css/frontend/vip-modal.css
index 42555f01..b0d486a6 100644
--- a/assets/css/frontend/vip-modal.css
+++ b/assets/css/frontend/vip-modal.css
@@ -160,9 +160,9 @@
 }
 
 .pay-vip-info {
-  padding: 0;
-  border-radius: 0;
-  background: transparent;
+  padding: 12px;
+  border-radius: 10px;
+  background: var(--surface-2, rgba(0, 0, 0, 0.04));
 }
 
 .pay-vip-info.level-1 {
@@ -219,10 +219,10 @@
 .vip-product {
   position: relative;
   padding: 12px 8px;
-  border-radius: 0;
-  border: 0;
-  background: transparent;
-  transition: none;
+  border-radius: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: var(--main-bg-color, #fff);
+  transition: border-color 0.15s, box-shadow 0.15s;
 }
 
 .aksrt-vip-product-label input:checked + .vip-product {
diff --git a/assets/css/routes/user-center/credits.css b/assets/css/routes/user-center/credits.css
index 9d39aa28..d57ba73e 100644
--- a/assets/css/routes/user-center/credits.css
+++ b/assets/css/routes/user-center/credits.css
@@ -699,9 +699,10 @@ body.uc-modal-open {
   vertical-align: middle;
 }
 
-.uc-vip-card__icon .aksrt-vip-level-icon {
-  width: 28px;
-  height: 28px;
+.uc-vip-card__icon .aksrt-vip-level-icon,
+.uc-vip-level-card .aksrt-vip-level-icon {
+  width: auto;
+  height: 1.1em;
 }
 
 .uc-vip-card__header {
@@ -1211,11 +1212,11 @@ body.uc-modal-open {
 /* Defensive: modal stylesheet also styles .pay-vip-info; keep UC cards independent */
 .uc-vip-tab .uc-vip-level-card.pay-vip-info {
   display: block;
-  background: transparent;
-  border: 0;
-  box-shadow: none;
-  border-radius: 0;
-  padding: 0;
+  background: var(--main-bg-color, var(--surface-1, #fff));
+  border: 1px solid var(--color-line-soft, rgba(0, 0, 0, 0.06));
+  box-shadow: var(--shadow-sm);
+  border-radius: var(--radius, 10px);
+  padding: 16px;
 }
 .uc-vip-level-card.level-1 {
   background: linear-gradient(180deg, rgba(246, 196, 83, 0.16), rgba(255, 255, 255, 0.02)) !important;
@@ -1227,19 +1228,28 @@ body.uc-modal-open {
   display: none;
 }
 .uc-vip-level-card .v-iconbox {
+  display: flex;
+  align-items: center;
   justify-content: flex-start;
-  gap: 0;
+  gap: 8px;
+  margin-bottom: 10px;
+  width: 100%;
 }
 .uc-vip-level-card .v-icon {
-  display: inline-flex;
   width: auto;
   height: auto;
   border-radius: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   background: transparent !important;
+  flex: 0 0 auto;
   color: inherit;
 }
 .uc-vip-level-card .v-info {
-  display: none;
+  display: block;
+  text-align: left;
+  min-width: 0;
 }
 .uc-vip-level-card__inner {
   position: relative;
@@ -1258,23 +1268,19 @@ body.uc-modal-open {
   width: 100%;
 }
 .uc-vip-level-card .v-icon {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
+  width: auto;
+  height: auto;
+  border-radius: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 0, 0, 0.05);
+  background: transparent !important;
   flex: 0 0 auto;
   color: inherit;
 }
-.uc-vip-level-card.level-1 .v-icon {
-  background: rgba(246, 196, 83, 0.22);
-  color: #866127;
-}
+.uc-vip-level-card.level-1 .v-icon,
 .uc-vip-level-card.level-2 .v-icon {
-  background: rgba(142, 68, 173, 0.16);
-  color: #6b4aa8;
+  background: transparent !important;
 }
 .uc-vip-level-card .v-info {
   text-align: left;
diff --git a/assets/css/routes/user-center/vip.css b/assets/css/routes/user-center/vip.css
index 27dc4651..e9af7886 100644
--- a/assets/css/routes/user-center/vip.css
+++ b/assets/css/routes/user-center/vip.css
@@ -24,9 +24,9 @@
   padding-inline-end: 84px;
   overflow: hidden;
   box-sizing: border-box;
-  border-radius: 0;
-  background: transparent;
-  box-shadow: none;
+  border-radius: var(--radius, 8px);
+  background: #fff;
+  box-shadow: var(--shadow-sm);
   color: var(--color-ink-2);
 }
 
@@ -112,11 +112,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: auto;
-  height: auto;
+  width: 36px;
+  height: 36px;
   flex: 0 0 auto;
-  border-radius: 0;
-  background: transparent;
+  border-radius: 50%;
+  background: var(--vip-card-soft);
   color: var(--vip-card-accent);
   font-size: 15px;
 }
diff --git a/inc/helpers/user-center-renderers/vip-tab.php b/inc/helpers/user-center-renderers/vip-tab.php
index 7ec99abc..dd52d354 100644
--- a/inc/helpers/user-center-renderers/vip-tab.php
+++ b/inc/helpers/user-center-renderers/vip-tab.php
@@ -101,6 +101,7 @@ $status_html = '<div class="uc-vip-status" role="status">'
 	. '</div>'
 	. '<div class="uc-vip-status__main uc-vip-status__main--level-' . (int) $vip_level_number . '">'
 	. '<span class="uc-vip-status__icon" aria-hidden="true">' . $status_icon . '</span>'
+	. '<span class="uc-vip-status__level">' . esc_html($vip_level_name) . '</span>'
 	. '</div>'
 	. '<div class="uc-vip-status__desc">' . esc_html($vip_description) . '</div>'
 	. '<div class="uc-vip-status__expiry"><i class="fas fa-clock" aria-hidden="true"></i><span>' . esc_html($vip_expiry_text) . '</span></div>'