diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 2b5520a..4d2134b 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -284,18 +284,27 @@ export default function ProfilePage() {
               <FormFieldSkeleton />
             ) : (
               <div className="bg-card rounded-lg border border-border overflow-hidden">
-                <div className="p-4 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30 border-b border-border">
+                <div className={`p-4 border-b border-border ${profile?.subscribePlan === 'pro' 
+                    ? 'bg-gradient-to-r from-amber-50/50 to-orange-50/50 dark:from-amber-950/10 dark:to-orange-950/10' 
+                    : 'bg-gradient-to-r from-slate-50/50 to-gray-50/50 dark:from-slate-900/10 dark:to-gray-900/10'
+                  }`}>
                   <div className="flex items-center space-x-3">
-                    <div className={`p-2 rounded-full ${profile?.subscribePlan === 'pro' ? 'bg-gradient-to-r from-yellow-400 to-orange-400' : 'bg-gray-100 dark:bg-gray-700'}`}>
+                    <div className={`p-2.5 rounded-full ${profile?.subscribePlan === 'pro' 
+                        ? 'bg-gradient-to-br from-amber-500 to-orange-500' 
+                        : 'bg-gradient-to-br from-slate-400 to-gray-500'
+                      }`}>
                       {profile?.subscribePlan === 'pro' ? (
                         <Crown className="w-4 h-4 text-white" />
                       ) : (
-                        <Star className="w-4 h-4 text-gray-600 dark:text-gray-400" />
+                        <Star className="w-4 h-4 text-white" />
                       )}
                     </div>
                     <div className="flex-1 min-w-0">
                       <h3 className="font-semibold text-foreground text-sm sm:text-base">{t('currentPlan')}</h3>
-                      <p className="text-xs sm:text-sm text-muted-foreground truncate">
+                      <p className={`text-xs sm:text-sm truncate font-medium ${profile?.subscribePlan === 'pro' 
+                          ? 'text-orange-600 dark:text-orange-400' 
+                          : 'text-muted-foreground'
+                        }`}>
                         {profile?.subscribePlan === 'pro' ? t('proPlan') : t('freePlan')}
                       </p>
                     </div>
@@ -304,17 +313,19 @@ export default function ProfilePage() {
                 
                 <div className="p-4 space-y-4">
                   {/* Credit Balance */}
-                  <div className="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-950/30 dark:to-emerald-950/30 rounded-lg p-3">
+                  <div className="bg-gradient-to-r from-green-50/50 to-emerald-50/50 dark:from-green-950/10 dark:to-emerald-950/10 rounded-lg p-4 border border-border">
                     <div className="flex items-center justify-between">
-                      <div className="flex items-center space-x-2">
-                        <CreditCard className="w-4 h-4 text-green-600 dark:text-green-400" />
-                        <span className="text-sm font-medium text-foreground">{t('creditBalance')}</span>
+                      <div className="flex items-center space-x-3">
+                        <div className="p-2 rounded-full bg-gradient-to-br from-green-500 to-emerald-600">
+                          <CreditCard className="w-4 h-4 text-white" />
+                        </div>
+                        <span className="text-sm font-semibold text-foreground">{t('creditBalance')}</span>
                       </div>
                       <div className="text-right">
-                        <div className="text-xl font-bold text-green-600 dark:text-green-400">
+                        <div className="text-2xl font-bold text-green-600 dark:text-green-400">
                           ${(creditInfo?.totalBalance || 0).toFixed(2)}
                         </div>
-                        <div className="text-xs text-muted-foreground">{t('usdCredit')}</div>
+                        <div className="text-xs font-medium text-muted-foreground">{t('usdCredit')}</div>
                       </div>
                     </div>
                   </div>