diff --git a/components/ViewMemberDialog.vue b/components/ViewMemberDialog.vue
index c94a73d..6b0d487 100644
--- a/components/ViewMemberDialog.vue
+++ b/components/ViewMemberDialog.vue
@@ -269,24 +269,20 @@
         </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"
+          <v-text-field
+            v-model="selectedPaymentDate"
+            label="Payment Date"
+            type="date"
+            :max="todayDate"
+            variant="outlined"
+            density="comfortable"
+            prepend-inner-icon="mdi-calendar"
+            :error="isDateInFuture"
+            :error-messages="isDateInFuture ? 'Future dates are not allowed' : ''"
             @update:model-value="handleDateUpdate"
           />
           <div class="text-caption text-medium-emphasis mt-1">
-            Select the date when the payment was received
+            Select the date when the payment was received (Monaco timezone)
           </div>
         </div>
         
@@ -488,10 +484,8 @@ watch(showPaymentDateDialog, (isOpen) => {
 });
 
 // Methods
-const handleDateUpdate = (date: Date | null) => {
-  if (date) {
-    selectedPaymentDate.value = date.toISOString().split('T')[0];
-  }
+const handleDateUpdate = (dateString: string) => {
+  selectedPaymentDate.value = dateString;
 };
 
 const cancelPaymentDialog = () => {