diff --git a/components/DuesActionCard.vue b/components/DuesActionCard.vue
index 1801f93..90e3346 100644
--- a/components/DuesActionCard.vue
+++ b/components/DuesActionCard.vue
@@ -151,27 +151,21 @@
             </p>
           </div>
           
-          <div class="date-picker-wrapper">
-            <label class="date-picker-label">Payment Date</label>
-            <VueDatePicker
-              v-model="selectedPaymentModel"
-              :timezone="{ 
-                timezone: 'Europe/Monaco',
-                emitTimezone: 'UTC'
-              }"
-              :format="'dd/MM/yyyy (Monaco)'"
-              :max-date="new Date()"
-              placeholder="Select payment date"
-              :enable-time-picker="false"
-              auto-apply
-              :clearable="false"
-              :required="true"
-              @update:model-value="handleDateUpdate"
-            />
-            <div class="text-caption text-medium-emphasis mt-1">
-              Select the date when the payment was received
-            </div>
-          </div>
+          <v-text-field
+            v-model="selectedPaymentDate"
+            label="Payment Date*"
+            type="date"
+            :rules="[
+              v => !!v || 'Payment date is required',
+              v => !v || new Date(v).getTime() <= new Date().setHours(23,59,59,999) || 'Payment date cannot be in the future'
+            ]"
+            variant="outlined"
+            prepend-inner-icon="mdi-calendar"
+            required
+            :max="new Date().toISOString().split('T')[0]"
+            hint="Select the date when the payment was received"
+            persistent-hint
+          />
           
           <v-alert 
             v-if="selectedPaymentDate && isDateInFuture" 
diff --git a/components/DuesPaymentBanner.vue b/components/DuesPaymentBanner.vue
index f1c93da..c6d551c 100644
--- a/components/DuesPaymentBanner.vue
+++ b/components/DuesPaymentBanner.vue
@@ -18,7 +18,7 @@
         
         <v-card 
           class="payment-details-card pa-3" 
-          color="rgba(0,0,0,0.1)" 
+          color="rgba(0,0,0,0.8)" 
           variant="outlined"
         >
           <div class="text-subtitle-1 font-weight-bold mb-2 text-white">
@@ -112,27 +112,21 @@
           </p>
         </div>
         
-        <div class="date-picker-wrapper">
-          <label class="date-picker-label">Payment Date</label>
-          <VueDatePicker
-            v-model="selectedPaymentModel"
-            :timezone="{ 
-              timezone: 'Europe/Monaco',
-              emitTimezone: 'UTC'
-            }"
-            :format="'dd/MM/yyyy (Monaco)'"
-            :max-date="new Date()"
-            placeholder="Select payment date"
-            :enable-time-picker="false"
-            auto-apply
-            :clearable="false"
-            :required="true"
-            @update:model-value="handleDateUpdate"
-          />
-          <div class="text-caption text-medium-emphasis mt-1">
-            Select the date when the payment was received
-          </div>
-        </div>
+        <v-text-field
+          v-model="selectedPaymentDate"
+          label="Payment Date*"
+          type="date"
+          :rules="[
+            v => !!v || 'Payment date is required',
+            v => !v || new Date(v).getTime() <= new Date().setHours(23,59,59,999) || 'Payment date cannot be in the future'
+          ]"
+          variant="outlined"
+          prepend-inner-icon="mdi-calendar"
+          required
+          :max="new Date().toISOString().split('T')[0]"
+          hint="Select the date when the payment was received"
+          persistent-hint
+        />
         
         <v-alert 
           v-if="selectedPaymentDate && isDateInFuture"