diff --git a/src/components/form/AppTextField.vue b/src/components/form/AppTextField.vue
index ed5dd9a..e86556a 100644
--- a/src/components/form/AppTextField.vue
+++ b/src/components/form/AppTextField.vue
@@ -29,6 +29,7 @@
             ['pl-10']: slots.prepend || prependIcon,
             ['border-red-300 text-red-900 placeholder:text-red-300 focus:border-red-500 focus:ring-red-500']:
               isInvalid,
+            ['text-right']: type === 'number',
           }"
           :disabled="disabled"
           :max="max"
diff --git a/src/components/form/AppTextareaField.vue b/src/components/form/AppTextareaField.vue
new file mode 100644
index 0000000..cc02f66
--- /dev/null
+++ b/src/components/form/AppTextareaField.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <label v-if="label" class="block font-medium text-gray-900 sm:text-sm" :for="id">
+      {{ label }}
+    </label>
+    <div class="flex flex-row rounded-md shadow-sm">
+      <slot name="before" />
+      <div class="relative flex grow flex-row items-stretch gap-3">
+        <slot name="prepend">
+          <SvgIcon
+            v-if="prependIcon"
+            aria-hidden="true"
+            :class="{
+              ['pointer-events-none absolute inset-y-0 left-0 z-20 ml-3 h-full w-5 text-gray-400']: true,
+              ['text-red-500']: isInvalid,
+            }"
+            :path="prependIcon"
+            type="mdi" />
+        </slot>
+        <textarea
+          :id="id"
+          :aria-invalid="isInvalid"
+          :class="{
+            ['block min-h-24 w-full rounded-md border-gray-300 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 disabled:cursor-not-allowed disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 sm:text-sm']: true,
+            ['rounded-none']: slots.after || slots.before,
+            ['rounded-l-md']: !slots.before,
+            ['rounded-r-md']: !slots.after,
+            ['pl-10']: slots.prepend || prependIcon,
+            ['border-red-300 text-red-900 placeholder:text-red-300 focus:border-red-500 focus:ring-red-500']:
+              isInvalid,
+          }"
+          :disabled="disabled"
+          :maxlength="maxLength"
+          :name="name"
+          :pattern="pattern"
+          :placeholder="placeholder"
+          :readonly="readonly"
+          :required="required"
+          :rows="rows"
+          :tabindex="tabindex"
+          :type="type"
+          :value="modelValue"
+          @blur="(event) => $emit('blur', event)"
+          @input="
+            (event) => $emit('update:modelValue', (event.currentTarget as HTMLInputElement).value)
+          " />
+        <slot name="append">
+          <SvgIcon
+            v-if="appendIcon"
+            aria-hidden="true"
+            class="pointer-events-none absolute inset-y-0 right-0 z-20 mr-3 h-full w-5 text-gray-400"
+            :path="appendIcon"
+            type="mdi" />
+        </slot>
+      </div>
+      <slot name="after" />
+    </div>
+
+    <ul v-if="!hideDetails" class="min-h-[1.4rem] px-3 text-xs">
+      <li v-if="!errors.length && hint">{{ hint }}</li>
+      <li v-for="error in errors" :key="`error-${error}`" class="text-red-600">
+        {{ error }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useSlots, PropType, computed } from 'vue';
+
+defineEmits(['blur', 'update:modelValue']);
+const props = defineProps({
+  modelValue: {
+    type: String as PropType<string | null>,
+    default: null,
+  },
+  label: {
+    type: String,
+    default: null,
+  },
+  id: {
+    type: String,
+    default: null,
+  },
+  autocomplete: {
+    type: String,
+    default: null,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  name: {
+    type: String,
+    default: null,
+  },
+  type: {
+    type: String,
+    default: 'text',
+  },
+  placeholder: {
+    type: String,
+    default: null,
+  },
+  errors: {
+    type: Array as PropType<String[]>,
+    default: () => [],
+  },
+  prependIcon: {
+    type: String,
+    default: '',
+  },
+  appendIcon: {
+    type: String,
+    default: '',
+  },
+  hideDetails: {
+    type: Boolean,
+    default: false,
+  },
+  hint: {
+    type: String,
+    default: '',
+  },
+  horizontal: {
+    type: Boolean,
+    default: false,
+  },
+  tabindex: {
+    type: String,
+    default: null,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  maxLength: {
+    type: [String, Number],
+    default: null,
+  },
+  pattern: {
+    type: String,
+    default: null,
+  },
+  rows: {
+    type: [String, Number],
+    default: 3,
+  },
+});
+
+const slots = useSlots();
+
+const isInvalid = computed(() => props.errors && props.errors.length > 0);
+</script>
+
+<style scoped>
+textarea {
+  field-sizing: content;
+  height: max-content;
+}
+</style>
diff --git a/src/i18n/locales/en-GB/activity.json b/src/i18n/locales/en-GB/activity.json
index f6d5f12..9a24c0e 100644
--- a/src/i18n/locales/en-GB/activity.json
+++ b/src/i18n/locales/en-GB/activity.json
@@ -1,5 +1,9 @@
 {
   "detail": {
+    "comment": {
+      "label": "Reason",
+      "placeholder": "Explain the reason for this change"
+    },
     "description": "",
     "duration": {
       "label": "Duration",
@@ -25,10 +29,6 @@
       "fail": "Unable to update attendance on {date}",
       "success": "Attendance on {date} has been updated"
     },
-    "reason": {
-      "label": "Reason",
-      "placeholder": "Explain the reason for this change"
-    },
     "title": "Attendance on {date}",
     "type": {
       "label": "Consumption Type",
diff --git a/src/i18n/locales/en-GB/subscriptions.json b/src/i18n/locales/en-GB/subscriptions.json
index 9d4e5d5..720793c 100644
--- a/src/i18n/locales/en-GB/subscriptions.json
+++ b/src/i18n/locales/en-GB/subscriptions.json
@@ -1,5 +1,9 @@
 {
   "delete": {
+    "comment": {
+      "label": "Reason",
+      "placeholder": "Explain the reason for this removal"
+    },
     "description": "Are you sure you want to delete this subscription? You won't be able to undo this action.",
     "onDelete": {
       "fail": "Unable to delete this subscription",
diff --git a/src/i18n/locales/en-GB/tickets.json b/src/i18n/locales/en-GB/tickets.json
index 5b5dd76..7f26a50 100644
--- a/src/i18n/locales/en-GB/tickets.json
+++ b/src/i18n/locales/en-GB/tickets.json
@@ -1,5 +1,9 @@
 {
   "delete": {
+    "comment": {
+      "label": "Reason",
+      "placeholder": "Explain the reason for this removal"
+    },
     "description": "Are you sure you want to delete this ticket order? You won't be able to undo this action.",
     "onDelete": {
       "fail": "Unable to delete this ticket order",
@@ -8,6 +12,10 @@
     "title": "Deleting ticket order"
   },
   "detail": {
+    "comment": {
+      "label": "Reason",
+      "placeholder": "Explain the reason for this change"
+    },
     "count": {
       "label": "Number of tickets",
       "unit": "ticket | ticket | tickets"
diff --git a/src/i18n/locales/fr-FR/activity.json b/src/i18n/locales/fr-FR/activity.json
index 52de6a8..fb218c7 100644
--- a/src/i18n/locales/fr-FR/activity.json
+++ b/src/i18n/locales/fr-FR/activity.json
@@ -1,5 +1,9 @@
 {
   "detail": {
+    "comment": {
+      "label": "Motif",
+      "placeholder": "Expliquez la raison de ce changement"
+    },
     "description": "",
     "duration": {
       "label": "Durée",
@@ -25,10 +29,6 @@
       "fail": "Impossible de mettre à jour la présence du {date}",
       "success": "Présence du {date} modifiée"
     },
-    "reason": {
-      "label": "Motif",
-      "placeholder": "Expliquez la raison de ce changement"
-    },
     "title": "Présence du {date}",
     "type": {
       "label": "Type de consommation",
diff --git a/src/i18n/locales/fr-FR/subscriptions.json b/src/i18n/locales/fr-FR/subscriptions.json
index b7f0ab0..2b6207d 100644
--- a/src/i18n/locales/fr-FR/subscriptions.json
+++ b/src/i18n/locales/fr-FR/subscriptions.json
@@ -1,5 +1,9 @@
 {
   "delete": {
+    "comment": {
+      "label": "Motif",
+      "placeholder": "Expliquez la raison de cette suppression"
+    },
     "description": "Êtes-vous sûr de vouloir supprimer cet abonnement ? Vous ne pourrez pas revenir en arrière.",
     "onDelete": {
       "fail": "Impossible de supprimer cet abonnement",
diff --git a/src/i18n/locales/fr-FR/tickets.json b/src/i18n/locales/fr-FR/tickets.json
index 52823c0..98377c9 100644
--- a/src/i18n/locales/fr-FR/tickets.json
+++ b/src/i18n/locales/fr-FR/tickets.json
@@ -1,5 +1,9 @@
 {
   "delete": {
+    "comment": {
+      "label": "Motif",
+      "placeholder": "Expliquez la raison de cette suppression"
+    },
     "description": "Êtes-vous sûr de vouloir supprimer cette commande de tickets ? Vous ne pourrez pas revenir en arrière.",
     "onDelete": {
       "fail": "Impossible de supprimer cette commande de tickets",
@@ -8,6 +12,10 @@
     "title": "Suppression de la commande de tickets"
   },
   "detail": {
+    "comment": {
+      "label": "Motif",
+      "placeholder": "Expliquez la raison de ce changement"
+    },
     "count": {
       "label": "Nombre de tickets",
       "unit": "ticket | ticket | tickets"
diff --git a/src/services/api/members.ts b/src/services/api/members.ts
index 77175c6..53b1978 100644
--- a/src/services/api/members.ts
+++ b/src/services/api/members.ts
@@ -84,7 +84,7 @@ export const getMemberActivity = (id: string): Promise<Attendance[]> => {
 export const updateMemberActivity = (
   memberId: string,
   activityId: string,
-  activity: Attendance & { reason: string },
+  activity: Attendance & { comment: string },
 ): Promise<Attendance> => {
   return HTTP.put(`/api/members/${memberId}/activity/${activityId}`, activity).then(
     ({ data }) => data,
diff --git a/src/services/api/subscriptions.ts b/src/services/api/subscriptions.ts
index 3b7391f..b7ec412 100644
--- a/src/services/api/subscriptions.ts
+++ b/src/services/api/subscriptions.ts
@@ -21,17 +21,17 @@ export const getMemberSubscription = (
   );
 };
 
+export type SubscriptionChange = Pick<Subscription, 'started'> & {
+  comment: string; // comment is mandatory to audit what happened
+};
+
 export const addMemberSubscription = (
   memberId: string,
-  subscription: Subscription,
+  subscription: SubscriptionChange,
 ): Promise<Subscription> => {
   return HTTP.post(`/api/members/${memberId}/subscriptions`, subscription).then(({ data }) => data);
 };
 
-export type SubscriptionChange = Pick<Subscription, 'started'> & {
-  comment: string; // comment is mandatory to audit what happened
-};
-
 export const updateMemberSubscription = (
   memberId: string,
   subscriptionId: string,
@@ -45,6 +45,9 @@ export const updateMemberSubscription = (
 export const deleteMemberSubscription = (
   memberId: string,
   subscriptionId: string,
+  comment: string,
 ): Promise<void> => {
-  return HTTP.delete(`/api/members/${memberId}/subscriptions/${subscriptionId}`);
+  return HTTP.delete(`/api/members/${memberId}/subscriptions/${subscriptionId}`, {
+    data: { comment },
+  });
 };
diff --git a/src/services/api/tickets.ts b/src/services/api/tickets.ts
index ab1da37..1737818 100644
--- a/src/services/api/tickets.ts
+++ b/src/services/api/tickets.ts
@@ -15,18 +15,26 @@ export const getMemberTicket = (memberId: string, ticketId: string): Promise<Tic
   return HTTP.get(`/api/members/${memberId}/tickets/${ticketId}`).then(({ data }) => data);
 };
 
-export const addMemberTicket = (memberId: string, ticket: Ticket): Promise<Ticket> => {
+export type TicketChange = Pick<Ticket, 'count'> & {
+  comment: string; // comment is mandatory to audit what happened
+};
+
+export const addMemberTicket = (memberId: string, ticket: TicketChange): Promise<Ticket> => {
   return HTTP.post(`/api/members/${memberId}/tickets`, ticket).then(({ data }) => data);
 };
 
 export const updateMemberTicket = (
   memberId: string,
   ticketId: string,
-  ticket: Ticket,
+  ticket: TicketChange,
 ): Promise<Ticket> => {
   return HTTP.put(`/api/members/${memberId}/tickets/${ticketId}`, ticket).then(({ data }) => data);
 };
 
-export const deleteMemberTicket = (memberId: string, ticketId: string): Promise<void> => {
-  return HTTP.delete(`/api/members/${memberId}/tickets/${ticketId}`);
+export const deleteMemberTicket = (
+  memberId: string,
+  ticketId: string,
+  comment: string,
+): Promise<void> => {
+  return HTTP.delete(`/api/members/${memberId}/tickets/${ticketId}`, { data: { comment } });
 };
diff --git a/src/views/Private/Members/Detail/Activity/ActivityDetail.vue b/src/views/Private/Members/Detail/Activity/ActivityDetail.vue
index 7556792..7e35c1d 100644
--- a/src/views/Private/Members/Detail/Activity/ActivityDetail.vue
+++ b/src/views/Private/Members/Detail/Activity/ActivityDetail.vue
@@ -203,12 +203,12 @@
           </li>
         </ul>
 
-        <AppTextField
-          id="reason"
-          v-model.number="state.reason"
-          :errors="vuelidate.reason.$errors.map(({ $message }) => $message as string)"
-          :label="$t('activity.detail.reason.label')"
-          :placeholder="$t('activity.detail.reason.placeholder')"
+        <AppTextareaField
+          id="comment"
+          v-model="state.comment"
+          :errors="vuelidate.comment.$errors.map(({ $message }) => $message as string)"
+          :label="$t('activity.detail.comment.label')"
+          :placeholder="$t('activity.detail.comment.placeholder')"
           required />
 
         <AppButton
@@ -228,7 +228,7 @@
 import EmptyState from '@/components/EmptyState.vue';
 import LoadingSpinner from '@/components/LoadingSpinner.vue';
 import AppButton from '@/components/form/AppButton.vue';
-import AppTextField from '@/components/form/AppTextField.vue';
+import AppTextareaField from '@/components/form/AppTextareaField.vue';
 import { handleSilentError, scrollToFirstError } from '@/helpers/errors';
 import { withAppI18nMessage } from '@/i18n';
 import { ROUTE_NAMES } from '@/router/names';
@@ -292,7 +292,7 @@ const props = defineProps({
 const state = reactive({
   type: 'TICKET' as AttendanceType,
   duration: ActivityDuration.NONE as ActivityDuration,
-  reason: null as string | null,
+  comment: null as string | null,
   isSubmitting: false as boolean,
 });
 
@@ -321,7 +321,7 @@ const nonCompliant = computed(() => {
 const rules = computed(() => ({
   type: { required: withAppI18nMessage(required) },
   duration: { required: withAppI18nMessage(required) },
-  reason: { required: withAppI18nMessage(required) },
+  comment: { required: withAppI18nMessage(required) },
 }));
 
 const vuelidate = useVuelidate(rules, state);
@@ -338,7 +338,7 @@ const onSubmit = async () => {
     type: state.type,
     value: state.duration,
     date: props.date,
-    reason: state.reason as string,
+    comment: state.comment as string,
   })
     .then(() => {
       notificationsStore.addNotification({
@@ -376,7 +376,7 @@ watch(
           : activity.value === 0.5
             ? ActivityDuration.HALF
             : ActivityDuration.NONE;
-      state.reason = null;
+      state.comment = null;
     }
   },
   { immediate: true },
diff --git a/src/views/Private/Members/Detail/Subscriptions/SubscriptionsDeleteDialog.vue b/src/views/Private/Members/Detail/Subscriptions/SubscriptionsDeleteDialog.vue
index 96a1b01..b8db9d3 100644
--- a/src/views/Private/Members/Detail/Subscriptions/SubscriptionsDeleteDialog.vue
+++ b/src/views/Private/Members/Detail/Subscriptions/SubscriptionsDeleteDialog.vue
@@ -24,7 +24,9 @@
             leave-from="opacity-100 translate-y-0 sm:scale-100"
             leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
             <DialogPanel
-              class="relative overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+              as="form"
+              class="relative overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
+              @submit.prevent="onDelete">
               <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                 <div class="sm:flex sm:items-start">
                   <div
@@ -35,15 +37,24 @@
                       :path="mdiAlertOutline"
                       type="mdi" />
                   </div>
-                  <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                    <DialogTitle as="h3" class="text-lg font-medium leading-6 text-gray-900">
+                  <div class="mt-2 sm:ml-4">
+                    <DialogTitle
+                      as="h3"
+                      class="text-lg font-medium leading-6 text-gray-900 max-sm:text-center">
                       {{ $t('subscriptions.delete.title') }}
                     </DialogTitle>
-                    <div class="mt-2">
-                      <p class="text-gray-500 sm:text-sm">
-                        {{ $t('subscriptions.delete.description') }}
-                      </p>
-                    </div>
+                    <p class="mt-2 text-gray-500 sm:text-sm">
+                      {{ $t('subscriptions.delete.description') }}
+                    </p>
+
+                    <AppTextareaField
+                      id="comment"
+                      v-model="state.comment"
+                      class="mt-4"
+                      :errors="vuelidate.comment.$errors.map(({ $message }) => $message as string)"
+                      :label="$t('subscriptions.delete.comment.label')"
+                      :placeholder="$t('subscriptions.delete.comment.placeholder')"
+                      required />
                   </div>
                 </div>
               </div>
@@ -52,8 +63,7 @@
                 <AppButton
                   class="w-full border border-transparent bg-red-600 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:ring-red-500 sm:w-auto sm:text-sm"
                   :loading="state.isDeleting"
-                  type="button"
-                  @click="onDelete">
+                  type="submit">
                   {{ $t('action.delete') }}
                 </AppButton>
                 <AppButton
@@ -73,12 +83,17 @@
 
 <script setup lang="ts">
 import AppButton from '@/components/form/AppButton.vue';
-import { handleSilentError } from '@/helpers/errors';
+import AppTextareaField from '@/components/form/AppTextareaField.vue';
+import { handleSilentError, scrollToFirstError } from '@/helpers/errors';
+import { withAppI18nMessage } from '@/i18n';
 import { deleteMemberSubscription } from '@/services/api/subscriptions';
 import { useNotificationsStore } from '@/store/notifications';
 import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
 import { mdiAlertOutline } from '@mdi/js';
-import { reactive } from 'vue';
+import { useQueryClient } from '@tanstack/vue-query';
+import useVuelidate from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { computed, nextTick, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const emit = defineEmits(['update:modelValue', 'deleted']);
@@ -99,19 +114,42 @@ const props = defineProps({
 
 const i18n = useI18n();
 const notificationsStore = useNotificationsStore();
+const queryClient = useQueryClient();
 const state = reactive({
+  comment: null as string | null,
   isDeleting: false,
 });
 
-const onDelete = () => {
+const rules = computed(() => ({
+  comment: { required: withAppI18nMessage(required) },
+}));
+
+const vuelidate = useVuelidate(rules, state);
+
+const onDelete = async () => {
+  const isValid = await vuelidate.value.$validate();
+  if (!isValid) {
+    nextTick(scrollToFirstError);
+    return;
+  }
+
   state.isDeleting = true;
-  deleteMemberSubscription(props.memberId, props.subscriptionId)
+  deleteMemberSubscription(props.memberId, props.subscriptionId, state.comment as string)
     .then(() => {
       notificationsStore.addNotification({
         type: 'success',
         message: i18n.t('subscriptions.delete.onDelete.success'),
         timeout: 3_000,
       });
+      queryClient.invalidateQueries({
+        queryKey: ['members', computed(() => props.memberId), 'history'],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['members', computed(() => props.memberId), 'subscriptions'],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['members', computed(() => props.memberId), 'activity'],
+      });
       emit('update:modelValue', false);
       emit('deleted');
     })
diff --git a/src/views/Private/Members/Detail/Subscriptions/SubscriptionsDetail.vue b/src/views/Private/Members/Detail/Subscriptions/SubscriptionsDetail.vue
index 0ea1935..9c90520 100644
--- a/src/views/Private/Members/Detail/Subscriptions/SubscriptionsDetail.vue
+++ b/src/views/Private/Members/Detail/Subscriptions/SubscriptionsDetail.vue
@@ -66,12 +66,11 @@
         :label="$t('subscriptions.detail.ended.label')"
         :model-value="computedEnded"
         :prepend-icon="mdiCalendarEndOutline"
-        required
         type="date" />
 
-      <AppTextField
+      <AppTextareaField
         id="comment"
-        v-model.number="state.comment"
+        v-model="state.comment"
         :errors="vuelidate.comment.$errors.map(({ $message }) => $message as string)"
         :label="$t('subscriptions.detail.comment.label')"
         :placeholder="$t('subscriptions.detail.comment.placeholder')"
@@ -109,6 +108,7 @@ import EmptyState from '@/components/EmptyState.vue';
 import LoadingSpinner from '@/components/LoadingSpinner.vue';
 import AppButton from '@/components/form/AppButton.vue';
 import AppTextField from '@/components/form/AppTextField.vue';
+import AppTextareaField from '@/components/form/AppTextareaField.vue';
 import { handleSilentError, scrollToFirstError } from '@/helpers/errors';
 import { withAppI18nMessage } from '@/i18n';
 import { ROUTE_NAMES } from '@/router/names';
@@ -202,6 +202,9 @@ const onSubmit = async () => {
       queryClient.invalidateQueries({
         queryKey: ['members', computed(() => props.memberId), 'subscriptions'],
       });
+      queryClient.invalidateQueries({
+        queryKey: ['members', computed(() => props.memberId), 'activity'],
+      });
       return router.replace({ name: ROUTE_NAMES.MEMBERS.DETAIL.INDEX });
     })
     .catch(handleSilentError)
diff --git a/src/views/Private/Members/Detail/Subscriptions/SubscriptionsNew.vue b/src/views/Private/Members/Detail/Subscriptions/SubscriptionsNew.vue
index 88834d6..ac990a6 100644
--- a/src/views/Private/Members/Detail/Subscriptions/SubscriptionsNew.vue
+++ b/src/views/Private/Members/Detail/Subscriptions/SubscriptionsNew.vue
@@ -30,13 +30,21 @@
 
       <AppTextField
         id="subscription-ended"
-        v-model="state.ended"
-        :errors="vuelidate.ended.$errors.map(({ $message }) => $message as string)"
+        disabled
+        :hint="$t('subscriptions.detail.ended.hint')"
         :label="$t('subscriptions.detail.ended.label')"
+        :model-value="computedEnded"
         :prepend-icon="mdiCalendarEndOutline"
-        required
         type="date" />
 
+      <AppTextareaField
+        id="comment"
+        v-model="state.comment"
+        :errors="vuelidate.comment.$errors.map(({ $message }) => $message as string)"
+        :label="$t('subscriptions.detail.comment.label')"
+        :placeholder="$t('subscriptions.detail.comment.placeholder')"
+        required />
+
       <AppButton
         class="mt-1 self-start border border-transparent bg-indigo-600 text-white shadow-sm hover:bg-indigo-700 focus:ring-indigo-500"
         :icon="mdiPlus"
@@ -51,16 +59,19 @@
 <script setup lang="ts">
 import AppButton from '@/components/form/AppButton.vue';
 import AppTextField from '@/components/form/AppTextField.vue';
+import AppTextareaField from '@/components/form/AppTextareaField.vue';
 import { handleSilentError, scrollToFirstError } from '@/helpers/errors';
 import { withAppI18nMessage } from '@/i18n';
 import { ROUTE_NAMES } from '@/router/names';
-import { Subscription, addMemberSubscription } from '@/services/api/subscriptions';
+import { addMemberSubscription } from '@/services/api/subscriptions';
 import { useNotificationsStore } from '@/store/notifications';
 import { DialogTitle } from '@headlessui/vue';
 import { mdiCalendarEndOutline, mdiCalendarStartOutline, mdiPlus, mdiClose } from '@mdi/js';
+import { useQueryClient } from '@tanstack/vue-query';
 import { Head } from '@unhead/vue/components';
 import useVuelidate from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
+import dayjs from 'dayjs';
 import { computed, nextTick, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
@@ -75,19 +86,26 @@ const props = defineProps({
 const router = useRouter();
 const i18n = useI18n();
 const notificationsStore = useNotificationsStore();
+const queryClient = useQueryClient();
 const state = reactive({
   started: null as string | null,
-  ended: null as string | null,
+  comment: null as string | null,
   isSubmitting: false as boolean,
 });
 
 const rules = computed(() => ({
   started: { required: withAppI18nMessage(required) },
-  ended: { required: withAppI18nMessage(required) },
+  comment: { required: withAppI18nMessage(required) },
 }));
 
 const vuelidate = useVuelidate(rules, state);
 
+const computedEnded = computed(() => {
+  return state.started
+    ? dayjs(state.started).add(1, 'month').subtract(1, 'day').format('YYYY-MM-DD')
+    : null;
+});
+
 const onSubmit = async () => {
   const isValid = await vuelidate.value.$validate();
   if (!isValid) {
@@ -97,15 +115,24 @@ const onSubmit = async () => {
 
   state.isSubmitting = true;
   addMemberSubscription(props.memberId, {
-    started: state.started,
-    ended: state.ended,
-  } as Subscription)
+    started: state.started as string,
+    comment: state.comment as string,
+  })
     .then(() => {
       notificationsStore.addNotification({
         type: 'success',
         message: i18n.t('subscriptions.new.onAdd.success'),
         timeout: 3_000,
       });
+      queryClient.invalidateQueries({
+        queryKey: ['members', computed(() => props.memberId), 'history'],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['members', computed(() => props.memberId), 'subscriptions'],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['members', computed(() => props.memberId), 'activity'],
+      });
       router.replace({ name: ROUTE_NAMES.MEMBERS.DETAIL.INDEX });
     })
     .catch(handleSilentError)
diff --git a/src/views/Private/Members/Detail/Tickets/TicketsDeleteDialog.vue b/src/views/Private/Members/Detail/Tickets/TicketsDeleteDialog.vue
index f57c6ad..f791cc9 100644
--- a/src/views/Private/Members/Detail/Tickets/TicketsDeleteDialog.vue
+++ b/src/views/Private/Members/Detail/Tickets/TicketsDeleteDialog.vue
@@ -24,7 +24,9 @@
             leave-from="opacity-100 translate-y-0 sm:scale-100"
             leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
             <DialogPanel
-              class="relative overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+              as="form"
+              class="relative overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
+              @submit.prevent="onDelete">
               <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                 <div class="sm:flex sm:items-start">
                   <div
@@ -35,15 +37,24 @@
                       :path="mdiAlertOutline"
                       type="mdi" />
                   </div>
-                  <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                    <DialogTitle as="h3" class="text-lg font-medium leading-6 text-gray-900">
+                  <div class="mt-2 sm:ml-4">
+                    <DialogTitle
+                      as="h3"
+                      class="text-lg font-medium leading-6 text-gray-900 max-sm:text-center">
                       {{ $t('tickets.delete.title') }}
                     </DialogTitle>
-                    <div class="mt-2">
-                      <p class="text-gray-500 sm:text-sm">
-                        {{ $t('tickets.delete.description') }}
-                      </p>
-                    </div>
+                    <p class="mt-2 text-gray-500 sm:text-sm">
+                      {{ $t('tickets.delete.description') }}
+                    </p>
+
+                    <AppTextareaField
+                      id="comment"
+                      v-model="state.comment"
+                      class="mt-4"
+                      :errors="vuelidate.comment.$errors.map(({ $message }) => $message as string)"
+                      :label="$t('tickets.delete.comment.label')"
+                      :placeholder="$t('tickets.delete.comment.placeholder')"
+                      required />
                   </div>
                 </div>
               </div>
@@ -52,8 +63,7 @@
                 <AppButton
                   class="w-full border border-transparent bg-red-600 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:ring-red-500 sm:w-auto sm:text-sm"
                   :loading="state.isDeleting"
-                  type="button"
-                  @click="onDelete">
+                  type="submit">
                   {{ $t('action.delete') }}
                 </AppButton>
                 <AppButton
@@ -73,12 +83,17 @@
 
 <script setup lang="ts">
 import AppButton from '@/components/form/AppButton.vue';
-import { handleSilentError } from '@/helpers/errors';
+import AppTextareaField from '@/components/form/AppTextareaField.vue';
+import { handleSilentError, scrollToFirstError } from '@/helpers/errors';
+import { withAppI18nMessage } from '@/i18n';
 import { deleteMemberTicket } from '@/services/api/tickets';
 import { useNotificationsStore } from '@/store/notifications';
 import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
 import { mdiAlertOutline } from '@mdi/js';
-import { reactive } from 'vue';
+import { useQueryClient } from '@tanstack/vue-query';
+import useVuelidate from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { computed, nextTick, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const emit = defineEmits(['update:modelValue', 'deleted']);
@@ -99,19 +114,41 @@ const props = defineProps({
 
 const i18n = useI18n();
 const notificationsStore = useNotificationsStore();
+const queryClient = useQueryClient();
 const state = reactive({
+  comment: null as string | null,
   isDeleting: false,
 });
 
-const onDelete = () => {
+const rules = computed(() => ({
+  comment: { required: withAppI18nMessage(required) },
+}));
+
+const vuelidate = useVuelidate(rules, state);
+
+const onDelete = async () => {
+  const isValid = await vuelidate.value.$validate();
+  if (!isValid) {
+    nextTick(scrollToFirstError);
+    return;
+  }
   state.isDeleting = true;
-  deleteMemberTicket(props.memberId, props.ticketId)
+  deleteMemberTicket(props.memberId, props.ticketId, state.comment as string)
     .then(() => {
       notificationsStore.addNotification({
         type: 'success',
         message: i18n.t('tickets.delete.onDelete.success'),
         timeout: 3_000,
       });
+      queryClient.invalidateQueries({
+        queryKey: ['members', computed(() => props.memberId), 'history'],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['members', computed(() => props.memberId), 'tickets'],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['members', computed(() => props.memberId), 'activity'],
+      });
       emit('update:modelValue', false);
       emit('deleted');
     })
diff --git a/src/views/Private/Members/Detail/Tickets/TicketsDetail.vue b/src/views/Private/Members/Detail/Tickets/TicketsDetail.vue
index 1cfa563..ce4914e 100644
--- a/src/views/Private/Members/Detail/Tickets/TicketsDetail.vue
+++ b/src/views/Private/Members/Detail/Tickets/TicketsDetail.vue
@@ -52,13 +52,20 @@
         required
         type="number">
         <template #append>
-          <span
-            class="pointer-events-none absolute inset-y-0 right-0 z-20 mr-3 flex items-center text-gray-400 sm:text-sm">
+          <span class="pointer-events-none z-20 mr-3 flex items-center text-gray-400 sm:text-sm">
             {{ $t('tickets.detail.count.unit', { count: state.count }) }}
           </span>
         </template>
       </AppTextField>
 
+      <AppTextareaField
+        id="comment"
+        v-model="state.comment"
+        :errors="vuelidate.comment.$errors.map(({ $message }) => $message as string)"
+        :label="$t('tickets.detail.comment.label')"
+        :placeholder="$t('tickets.detail.comment.placeholder')"
+        required />
+
       <div class="mt-1 flex flex-row justify-between gap-3">
         <AppButton
           class="border border-transparent bg-indigo-600 text-white shadow-sm hover:bg-indigo-700 focus:ring-indigo-500"
@@ -91,20 +98,23 @@ import EmptyState from '@/components/EmptyState.vue';
 import LoadingSpinner from '@/components/LoadingSpinner.vue';
 import AppButton from '@/components/form/AppButton.vue';
 import AppTextField from '@/components/form/AppTextField.vue';
+import AppTextareaField from '@/components/form/AppTextareaField.vue';
 import { handleSilentError, scrollToFirstError } from '@/helpers/errors';
 import { withAppI18nMessage } from '@/i18n';
 import { ROUTE_NAMES } from '@/router/names';
-import { Ticket } from '@/services/api/tickets';
+import { Ticket, updateMemberTicket } from '@/services/api/tickets';
 import { useNotificationsStore } from '@/store/notifications';
 import { DialogTitle } from '@headlessui/vue';
 import { mdiCheck, mdiClose, mdiDeleteOutline, mdiTicket } from '@mdi/js';
+import { useQueryClient } from '@tanstack/vue-query';
 import { Head } from '@unhead/vue/components';
 import useVuelidate from '@vuelidate/core';
-import { numeric, required } from '@vuelidate/validators';
+import { minValue, numeric, required } from '@vuelidate/validators';
 import dayjs from 'dayjs';
 import { nextTick, reactive } from 'vue';
 import { PropType, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 
 const props = defineProps({
   memberId: {
@@ -125,10 +135,13 @@ const props = defineProps({
   },
 });
 
+const router = useRouter();
 const i18n = useI18n();
 const notificationsStore = useNotificationsStore();
+const queryClient = useQueryClient();
 const state = reactive({
   count: null as null | number,
+  comment: null as string | null,
   isSubmitting: false as boolean,
   isDeleteDialogVisible: false as boolean,
 });
@@ -138,7 +151,12 @@ const selectedTicket = computed<Ticket | null>(() => {
 });
 
 const rules = computed(() => ({
-  count: { required: withAppI18nMessage(required), decimal: withAppI18nMessage(numeric) },
+  count: {
+    required: withAppI18nMessage(required),
+    decimal: withAppI18nMessage(numeric),
+    minValue: withAppI18nMessage(minValue(0.5)),
+  },
+  comment: { required: withAppI18nMessage(required) },
 }));
 
 const vuelidate = useVuelidate(rules, state);
@@ -151,10 +169,30 @@ const onSubmit = async () => {
   }
 
   state.isSubmitting = true;
-  Promise.reject(new Error('Not implemented yet'))
+  updateMemberTicket(props.memberId, props.id, {
+    count: state.count as number,
+    comment: state.comment as string,
+  })
+    .then(() => {
+      notificationsStore.addNotification({
+        type: 'success',
+        message: i18n.t('tickets.new.onUpdate.success'),
+        timeout: 3_000,
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['members', computed(() => props.memberId), 'history'],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['members', computed(() => props.memberId), 'tickets'],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['members', computed(() => props.memberId), 'activity'],
+      });
+      router.replace({ name: ROUTE_NAMES.MEMBERS.DETAIL.INDEX });
+    })
     .catch(handleSilentError)
     .catch((error) => {
-      notificationsStore.addErrorNotification(error, i18n.t('tickets.detail.onFail.message'));
+      notificationsStore.addErrorNotification(error, i18n.t('tickets.detail.onUpdate.fail'));
       return Promise.reject(error);
     })
     .finally(() => {
diff --git a/src/views/Private/Members/Detail/Tickets/TicketsNew.vue b/src/views/Private/Members/Detail/Tickets/TicketsNew.vue
index 4836593..ac726d6 100644
--- a/src/views/Private/Members/Detail/Tickets/TicketsNew.vue
+++ b/src/views/Private/Members/Detail/Tickets/TicketsNew.vue
@@ -30,13 +30,20 @@
         step="0.5"
         type="number">
         <template #append>
-          <span
-            class="pointer-events-none absolute inset-y-0 right-0 z-20 mr-3 flex items-center text-gray-400 sm:text-sm">
+          <span class="pointer-events-none z-20 mr-3 flex items-center text-gray-400 sm:text-sm">
             {{ $t('tickets.detail.count.unit', { count: state.count }) }}
           </span>
         </template>
       </AppTextField>
 
+      <AppTextareaField
+        id="comment"
+        v-model="state.comment"
+        :errors="vuelidate.comment.$errors.map(({ $message }) => $message as string)"
+        :label="$t('tickets.detail.comment.label')"
+        :placeholder="$t('tickets.detail.comment.placeholder')"
+        required />
+
       <AppButton
         class="mt-1 self-start border border-transparent bg-indigo-600 text-white shadow-sm hover:bg-indigo-700 focus:ring-indigo-500"
         :icon="mdiPlus"
@@ -51,14 +58,16 @@
 <script setup lang="ts">
 import AppButton from '@/components/form/AppButton.vue';
 import AppTextField from '@/components/form/AppTextField.vue';
+import AppTextareaField from '@/components/form/AppTextareaField.vue';
 import { handleSilentError, scrollToFirstError } from '@/helpers/errors';
 import { withAppI18nMessage } from '@/i18n';
 import { ROUTE_NAMES } from '@/router/names';
 import { Member } from '@/services/api/members';
-import { Ticket, addMemberTicket } from '@/services/api/tickets';
+import { addMemberTicket } from '@/services/api/tickets';
 import { useNotificationsStore } from '@/store/notifications';
 import { DialogTitle } from '@headlessui/vue';
 import { mdiPlus, mdiClose, mdiTicket } from '@mdi/js';
+import { useQueryClient } from '@tanstack/vue-query';
 import { Head } from '@unhead/vue/components';
 import useVuelidate from '@vuelidate/core';
 import { minValue, numeric, required } from '@vuelidate/validators';
@@ -80,8 +89,10 @@ const props = defineProps({
 const router = useRouter();
 const i18n = useI18n();
 const notificationsStore = useNotificationsStore();
+const queryClient = useQueryClient();
 const state = reactive({
   count: null as null | number,
+  comment: null as string | null,
   isSubmitting: false as boolean,
 });
 
@@ -91,6 +102,7 @@ const rules = computed(() => ({
     decimal: withAppI18nMessage(numeric),
     minValue: withAppI18nMessage(minValue(0.5)),
   },
+  comment: { required: withAppI18nMessage(required) },
 }));
 
 const vuelidate = useVuelidate(rules, state);
@@ -103,13 +115,25 @@ const onSubmit = async () => {
   }
 
   state.isSubmitting = true;
-  addMemberTicket(props.memberId, { count: state.count } as Ticket)
+  addMemberTicket(props.memberId, {
+    count: state.count as number,
+    comment: state.comment as string,
+  })
     .then(() => {
       notificationsStore.addNotification({
         type: 'success',
-        message: i18n.t('subscriptions.new.onAdd.success'),
+        message: i18n.t('tickets.new.onAdd.success'),
         timeout: 3_000,
       });
+      queryClient.invalidateQueries({
+        queryKey: ['members', computed(() => props.memberId), 'history'],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['members', computed(() => props.memberId), 'tickets'],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['members', computed(() => props.memberId), 'activity'],
+      });
       router.replace({ name: ROUTE_NAMES.MEMBERS.DETAIL.INDEX });
     })
     .catch(handleSilentError)