diff --git a/components/DuesPaymentBanner.vue b/components/DuesPaymentBanner.vue
index c6d551c..ab5196c 100644
--- a/components/DuesPaymentBanner.vue
+++ b/components/DuesPaymentBanner.vue
@@ -18,28 +18,28 @@
         
         <v-card 
           class="payment-details-card pa-3" 
-          color="rgba(0,0,0,0.8)" 
+          color="rgba(255,255,255,0.95)" 
           variant="outlined"
         >
-          <div class="text-subtitle-1 font-weight-bold mb-2 text-white">
-            <v-icon left size="small" class="text-white">mdi-bank</v-icon>
+          <div class="text-subtitle-1 font-weight-bold mb-2 text-black">
+            <v-icon left size="small" class="text-black">mdi-bank</v-icon>
             Payment Details
           </div>
           
           <v-row dense>
             <v-col cols="12" sm="4" md="3">
-              <div class="text-caption font-weight-bold text-white">Amount:</div>
-              <div class="text-body-2 text-white">€{{ config.membershipFee }}/year</div>
+              <div class="text-caption font-weight-bold text-black">Amount:</div>
+              <div class="text-body-2 text-black">€{{ config.membershipFee }}/year</div>
             </v-col>
             
             <v-col cols="12" sm="8" md="5" v-if="config.iban">
-              <div class="text-caption font-weight-bold text-white">IBAN:</div>
-              <div class="text-body-2 font-family-monospace text-white">{{ config.iban }}</div>
+              <div class="text-caption font-weight-bold text-black">IBAN:</div>
+              <div class="text-body-2 font-family-monospace text-black">{{ config.iban }}</div>
             </v-col>
             
             <v-col cols="12" sm="12" md="4" v-if="config.accountHolder">
-              <div class="text-caption font-weight-bold text-white">Account Holder:</div>
-              <div class="text-body-2 text-white">{{ config.accountHolder }}</div>
+              <div class="text-caption font-weight-bold text-black">Account Holder:</div>
+              <div class="text-body-2 text-black">{{ config.accountHolder }}</div>
             </v-col>
           </v-row>
 
@@ -47,12 +47,12 @@
 
           <v-row dense>
             <v-col cols="12">
-              <div class="text-caption font-weight-bold text-white">Payment Reference:</div>
-              <div class="text-body-2 font-family-monospace text-white" style="background-color: rgba(255, 255, 255, 0.2); padding: 8px; border-radius: 4px; border-left: 4px solid #ffffff;">
+              <div class="text-caption font-weight-bold text-black">Payment Reference:</div>
+              <div class="text-body-2 font-family-monospace text-black" style="background-color: rgba(0, 0, 0, 0.1); padding: 8px; border-radius: 4px; border-left: 4px solid #000000;">
                 {{ memberData?.member_id || 'Member ID pending' }}
               </div>
-              <div class="text-caption text-white mt-1" style="opacity: 0.9;">
-                <v-icon size="small" class="mr-1 text-white">mdi-information-outline</v-icon>
+              <div class="text-caption text-black mt-1">
+                <v-icon size="small" class="mr-1 text-black">mdi-information-outline</v-icon>
                 Please include your member ID in the wire transfer reference for identification
               </div>
             </v-col>
@@ -60,8 +60,8 @@
 
           <v-divider class="my-2 border-opacity-50" />
           
-          <div class="text-caption d-flex align-center text-white" style="opacity: 0.9;">
-            <v-icon size="small" class="mr-1 text-white">mdi-information-outline</v-icon>
+          <div class="text-caption d-flex align-center text-black">
+            <v-icon size="small" class="mr-1 text-black">mdi-information-outline</v-icon>
             {{ daysRemaining > 0 ? `${daysRemaining} days remaining` : 'Payment overdue' }} 
             before account suspension
           </div>