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