diff --git a/components/InterestDetailsModal.vue b/components/InterestDetailsModal.vue
index a5371be..f66747a 100644
--- a/components/InterestDetailsModal.vue
+++ b/components/InterestDetailsModal.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-dialog v-model="isOpen" fullscreen hide-overlay transition="dialog-bottom-transition">
+  <v-dialog
+    v-model="isOpen"
+    fullscreen
+    hide-overlay
+    transition="dialog-bottom-transition"
+  >
     <v-card>
       <v-toolbar dark color="primary">
         <v-btn icon dark @click="closeModal">
@@ -11,50 +16,79 @@
         </v-toolbar-title>
         <v-spacer></v-spacer>
         <v-toolbar-items>
-          <v-btn 
-            @click="requestMoreInfoToSales" 
+          <v-btn
+            @click="requestMoreInfoToSales"
             variant="text"
             :loading="isRequestingMoreInfo"
-            :disabled="isRequestingMoreInfo || isRequestingMoreInformation || isSendingEOI"
+            :disabled="
+              isRequestingMoreInfo ||
+              isRequestingMoreInformation ||
+              isSendingEOI
+            "
+            :icon="mobile"
           >
-            <v-icon start>mdi-information-outline</v-icon>
-            Info to Sales
+            <v-icon v-if="mobile">mdi-information-outline</v-icon>
+            <template v-else>
+              <v-icon start>mdi-information-outline</v-icon>
+              Info to Sales
+            </template>
           </v-btn>
-          <v-btn 
-            @click="requestMoreInformation" 
+          <v-btn
+            @click="requestMoreInformation"
             variant="text"
             :loading="isRequestingMoreInformation"
-            :disabled="isRequestingMoreInfo || isRequestingMoreInformation || isSendingEOI"
+            :disabled="
+              isRequestingMoreInfo ||
+              isRequestingMoreInformation ||
+              isSendingEOI
+            "
+            :icon="mobile"
           >
-            <v-icon start>mdi-email-outline</v-icon>
-            Request Info
+            <v-icon v-if="mobile">mdi-email-outline</v-icon>
+            <template v-else>
+              <v-icon start>mdi-email-outline</v-icon>
+              Request Info
+            </template>
           </v-btn>
-          <v-btn 
+          <v-btn
             @click="eoiSendToSales"
             variant="text"
             :loading="isSendingEOI"
-            :disabled="isRequestingMoreInfo || isRequestingMoreInformation || isSendingEOI"
+            :disabled="
+              isRequestingMoreInfo ||
+              isRequestingMoreInformation ||
+              isSendingEOI
+            "
+            :icon="mobile"
           >
-            <v-icon start>mdi-send</v-icon>
-            EOI to Sales
+            <v-icon v-if="mobile">mdi-send</v-icon>
+            <template v-else>
+              <v-icon start>mdi-send</v-icon>
+              EOI to Sales
+            </template>
           </v-btn>
-          <v-btn 
-            variant="flat" 
+          <v-btn
+            variant="flat"
             color="success"
-            size="large"
+            :size="mobile ? 'default' : 'large'"
             @click="saveInterest"
             :loading="isSaving"
             :disabled="isSaving"
             class="ml-2"
+            :icon="mobile"
           >
-            <v-icon start>mdi-content-save</v-icon>
-            Save Changes
+            <v-icon v-if="mobile">mdi-content-save</v-icon>
+            <template v-else>
+              <v-icon start>mdi-content-save</v-icon>
+              Save Changes
+            </template>
           </v-btn>
         </v-toolbar-items>
       </v-toolbar>
 
       <v-card-text v-if="interest">
         <v-stepper
+          v-show="!mobile"
           v-model="currentStep"
           class="mb-6"
           variant="flat"
@@ -91,7 +125,7 @@
                 variant="tonal"
                 prepend-icon="mdi-calendar-clock"
               >
-                Created: {{ formatDate(interest['Created At']) }}
+                Created: {{ formatDate(interest["Created At"]) }}
               </v-chip>
               <v-chip
                 v-if="interest['Request Form Sent']"
@@ -99,7 +133,8 @@
                 variant="tonal"
                 prepend-icon="mdi-email-check"
               >
-                Request Form Sent: {{ formatDate(interest['Request Form Sent']) }}
+                Request Form Sent:
+                {{ formatDate(interest["Request Form Sent"]) }}
               </v-chip>
               <v-chip
                 v-if="interest['EOI Time Sent']"
@@ -107,7 +142,7 @@
                 variant="tonal"
                 prepend-icon="mdi-email-fast"
               >
-                EOI Sent: {{ formatDate(interest['EOI Time Sent']) }}
+                EOI Sent: {{ formatDate(interest["EOI Time Sent"]) }}
               </v-chip>
               <v-chip
                 v-if="interest['Time LOI Sent']"
@@ -115,7 +150,7 @@
                 variant="tonal"
                 prepend-icon="mdi-file-document-check"
               >
-                LOI Sent: {{ formatDate(interest['Time LOI Sent']) }}
+                LOI Sent: {{ formatDate(interest["Time LOI Sent"]) }}
               </v-chip>
             </div>
           </v-col>
@@ -277,8 +312,8 @@
                   <v-autocomplete
                     v-model="selectedBerthRecommendations"
                     :items="availableBerths"
-                    :item-title="item => item['Mooring Number']"
-                    :item-value="item => item.Id"
+                    :item-title="(item) => item['Mooring Number']"
+                    :item-value="(item) => item.Id"
                     label="Berth Recommendations"
                     variant="outlined"
                     density="comfortable"
@@ -302,8 +337,8 @@
                   <v-autocomplete
                     v-model="selectedBerths"
                     :items="availableBerths"
-                    :item-title="item => item['Mooring Number']"
-                    :item-value="item => item.Id"
+                    :item-title="(item) => item['Mooring Number']"
+                    :item-value="(item) => item.Id"
                     label="Berths"
                     variant="outlined"
                     density="comfortable"
@@ -353,9 +388,17 @@
                     prepend-inner-icon="mdi-comment-text"
                   ></v-text-field>
                 </v-col>
-                <v-col cols="12" v-if="interest['EOI Document'] && interest['EOI Document'].length > 0">
+                <v-col
+                  cols="12"
+                  v-if="
+                    interest['EOI Document'] &&
+                    interest['EOI Document'].length > 0
+                  "
+                >
                   <div class="d-flex align-center">
-                    <v-icon class="mr-2" color="primary">mdi-file-document</v-icon>
+                    <v-icon class="mr-2" color="primary"
+                      >mdi-file-document</v-icon
+                    >
                     <span class="text-subtitle-1 mr-3">EOI Documents:</span>
                     <div class="d-flex flex-wrap ga-2">
                       <v-chip
@@ -398,16 +441,18 @@ interface Props {
 }
 
 interface Emits {
-  (e: 'update:modelValue', value: boolean): void;
-  (e: 'save', interest: Interest): void;
-  (e: 'requestMoreInfoToSales', interest: Interest): void;
-  (e: 'requestMoreInformation', interest: Interest): void;
-  (e: 'eoiSendToSales', interest: Interest): void;
+  (e: "update:modelValue", value: boolean): void;
+  (e: "save", interest: Interest): void;
+  (e: "requestMoreInfoToSales", interest: Interest): void;
+  (e: "requestMoreInformation", interest: Interest): void;
+  (e: "eoiSendToSales", interest: Interest): void;
 }
 
 const props = defineProps<Props>();
 const emit = defineEmits<Emits>();
 
+const { mobile } = useDisplay();
+
 const user = useDirectusUser();
 
 // Local copy of the interest for editing
@@ -428,24 +473,28 @@ const originalBerths = ref<number[]>([]);
 const originalBerthRecommendations = ref<number[]>([]);
 
 // Sync the local copy with the prop
-watch(() => props.selectedInterest, async (newInterest) => {
-  if (newInterest) {
-    interest.value = { ...newInterest };
-    // Load linked berths and recommendations
-    await loadLinkedBerths();
-  } else {
-    interest.value = null;
-    selectedBerths.value = [];
-    selectedBerthRecommendations.value = [];
-    originalBerths.value = [];
-    originalBerthRecommendations.value = [];
-  }
-}, { immediate: true });
+watch(
+  () => props.selectedInterest,
+  async (newInterest) => {
+    if (newInterest) {
+      interest.value = { ...newInterest };
+      // Load linked berths and recommendations
+      await loadLinkedBerths();
+    } else {
+      interest.value = null;
+      selectedBerths.value = [];
+      selectedBerthRecommendations.value = [];
+      originalBerths.value = [];
+      originalBerthRecommendations.value = [];
+    }
+  },
+  { immediate: true }
+);
 
 // Computed property for v-model binding
 const isOpen = computed({
   get: () => props.modelValue,
-  set: (value: boolean) => emit('update:modelValue', value)
+  set: (value: boolean) => emit("update:modelValue", value),
 });
 
 const currentStep = computed(() => {
@@ -465,22 +514,22 @@ const saveInterest = async () => {
       // Create a copy of the interest data without the Berths and Berth Recommendations fields
       const dataToSave = { ...interest.value };
       delete dataToSave.Berths;
-      delete dataToSave['Berth Recommendations'];
-      
+      delete dataToSave["Berth Recommendations"];
+
       // Call the update-interest API
-      await $fetch('/api/update-interest', {
-        method: 'POST',
+      await $fetch("/api/update-interest", {
+        method: "POST",
         headers: {
-          "x-tag": !user.value?.email ? "094ut234" : "pjnvü1230",
+          "x-tag": user.value?.email ? "094ut234" : "pjnvü1230",
         },
         body: {
           id: interest.value.Id.toString(),
-          data: dataToSave
-        }
+          data: dataToSave,
+        },
       });
-      
+
       alert("Interest saved successfully!");
-      emit('save', interest.value);
+      emit("save", interest.value);
       closeModal();
     } catch (error) {
       console.error("Failed to save interest:", error);
@@ -496,18 +545,18 @@ const requestMoreInfoToSales = async () => {
     isRequestingMoreInfo.value = true;
     try {
       // Call the request-more-info-to-sales API
-      await $fetch('/api/request-more-info-to-sales', {
-        method: 'POST',
+      await $fetch("/api/request-more-info-to-sales", {
+        method: "POST",
         headers: {
-          "x-tag": !user.value?.email ? "094ut234" : "pjnvü1230",
+          "x-tag": user.value?.email ? "094ut234" : "pjnvü1230",
         },
         body: {
-          interestId: interest.value.Id.toString()
-        }
+          interestId: interest.value.Id.toString(),
+        },
       });
-      
+
       alert("Request More Info - To Sales sent successfully!");
-      emit('requestMoreInfoToSales', interest.value);
+      emit("requestMoreInfoToSales", interest.value);
     } catch (error) {
       console.error("Failed to send request:", error);
       alert("Failed to send request. Please try again.");
@@ -522,18 +571,18 @@ const requestMoreInformation = async () => {
     isRequestingMoreInformation.value = true;
     try {
       // Call the request-more-information API
-      await $fetch('/api/request-more-information', {
-        method: 'POST',
+      await $fetch("/api/request-more-information", {
+        method: "POST",
         headers: {
-          "x-tag": !user.value?.email ? "094ut234" : "pjnvü1230",
+          "x-tag": user.value?.email ? "094ut234" : "pjnvü1230",
         },
         body: {
-          interestId: interest.value.Id.toString()
-        }
+          interestId: interest.value.Id.toString(),
+        },
       });
-      
+
       alert("Request More Information sent successfully!");
-      emit('requestMoreInformation', interest.value);
+      emit("requestMoreInformation", interest.value);
     } catch (error) {
       console.error("Failed to send request:", error);
       alert("Failed to send request. Please try again.");
@@ -548,18 +597,18 @@ const eoiSendToSales = async () => {
     isSendingEOI.value = true;
     try {
       // Call the eoi-send-to-sales API
-      await $fetch('/api/eoi-send-to-sales', {
-        method: 'POST',
+      await $fetch("/api/eoi-send-to-sales", {
+        method: "POST",
         headers: {
-          "x-tag": !user.value?.email ? "094ut234" : "pjnvü1230",
+          "x-tag": user.value?.email ? "094ut234" : "pjnvü1230",
         },
         body: {
-          interestId: interest.value.Id.toString()
-        }
+          interestId: interest.value.Id.toString(),
+        },
       });
-      
+
       alert("EOI Send to Sales sent successfully!");
-      emit('eoiSendToSales', interest.value);
+      emit("eoiSendToSales", interest.value);
     } catch (error) {
       console.error("Failed to send EOI:", error);
       alert("Failed to send EOI. Please try again.");
@@ -573,9 +622,9 @@ const eoiSendToSales = async () => {
 const loadAvailableBerths = async () => {
   loadingBerths.value = true;
   try {
-    const response = await $fetch<{ list: Berth[] }>('/api/get-berths', {
+    const response = await $fetch<{ list: Berth[] }>("/api/get-berths", {
       headers: {
-        "x-tag": !user.value?.email ? "094ut234" : "pjnvü1230",
+        "x-tag": user.value?.email ? "094ut234" : "pjnvü1230",
       },
     });
     availableBerths.value = response.list || [];
@@ -589,36 +638,45 @@ const loadAvailableBerths = async () => {
 // Load linked berths for the current interest
 const loadLinkedBerths = async () => {
   if (!interest.value) return;
-  
+
   try {
     // Load berths
-    const berthsResponse = await $fetch<{ list: Array<{ Id: number }> }>('/api/get-interest-berths', {
-      headers: {
-        "x-tag": !user.value?.email ? "094ut234" : "pjnvü1230",
-      },
-      params: {
-        interestId: interest.value.Id,
-        linkType: 'berths'
+    const berthsResponse = await $fetch<{ list: Array<{ Id: number }> }>(
+      "/api/get-interest-berths",
+      {
+        headers: {
+          "x-tag": user.value?.email ? "094ut234" : "pjnvü1230",
+        },
+        params: {
+          interestId: interest.value.Id,
+          linkType: "berths",
+        },
       }
-    });
-    
+    );
+
     // Load berth recommendations
-    const recommendationsResponse = await $fetch<{ list: Array<{ Id: number }> }>('/api/get-interest-berths', {
+    const recommendationsResponse = await $fetch<{
+      list: Array<{ Id: number }>;
+    }>("/api/get-interest-berths", {
       headers: {
-        "x-tag": !user.value?.email ? "094ut234" : "pjnvü1230",
+        "x-tag": user.value?.email ? "094ut234" : "pjnvü1230",
       },
       params: {
         interestId: interest.value.Id,
-        linkType: 'recommendations'
-      }
+        linkType: "recommendations",
+      },
     });
-    
-    selectedBerths.value = (berthsResponse.list || []).map(b => b.Id);
-    selectedBerthRecommendations.value = (recommendationsResponse.list || []).map(b => b.Id);
-    
+
+    selectedBerths.value = (berthsResponse.list || []).map((b) => b.Id);
+    selectedBerthRecommendations.value = (
+      recommendationsResponse.list || []
+    ).map((b) => b.Id);
+
     // Store original values to detect changes
     originalBerths.value = [...selectedBerths.value];
-    originalBerthRecommendations.value = [...selectedBerthRecommendations.value];
+    originalBerthRecommendations.value = [
+      ...selectedBerthRecommendations.value,
+    ];
   } catch (error) {
     console.error("Failed to load linked berths:", error);
   }
@@ -627,40 +685,42 @@ const loadLinkedBerths = async () => {
 // Update berths when selection changes
 const updateBerths = async (newBerths: number[]) => {
   if (!interest.value) return;
-  
+
   try {
     // Find berths to add and remove
-    const toAdd = newBerths.filter(id => !originalBerths.value.includes(id));
-    const toRemove = originalBerths.value.filter(id => !newBerths.includes(id));
-    
+    const toAdd = newBerths.filter((id) => !originalBerths.value.includes(id));
+    const toRemove = originalBerths.value.filter(
+      (id) => !newBerths.includes(id)
+    );
+
     // Link new berths
     if (toAdd.length > 0) {
-      await $fetch('/api/link-berths-to-interest', {
-        method: 'POST',
+      await $fetch("/api/link-berths-to-interest", {
+        method: "POST",
         headers: {
-          "x-tag": !user.value?.email ? "094ut234" : "pjnvü1230",
+          "x-tag": user.value?.email ? "094ut234" : "pjnvü1230",
         },
         body: {
           interestId: interest.value.Id,
-          berthIds: toAdd
-        }
+          berthIds: toAdd,
+        },
       });
     }
-    
+
     // Unlink removed berths
     if (toRemove.length > 0) {
-      await $fetch('/api/unlink-berths-from-interest', {
-        method: 'POST',
+      await $fetch("/api/unlink-berths-from-interest", {
+        method: "POST",
         headers: {
-          "x-tag": !user.value?.email ? "094ut234" : "pjnvü1230",
+          "x-tag": user.value?.email ? "094ut234" : "pjnvü1230",
         },
         body: {
           interestId: interest.value.Id,
-          berthIds: toRemove
-        }
+          berthIds: toRemove,
+        },
       });
     }
-    
+
     // Update original values
     originalBerths.value = [...newBerths];
   } catch (error) {
@@ -674,74 +734,84 @@ const updateBerths = async (newBerths: number[]) => {
 // Update berth recommendations when selection changes
 const updateBerthRecommendations = async (newRecommendations: number[]) => {
   if (!interest.value) return;
-  
+
   try {
     // Find recommendations to add and remove
-    const toAdd = newRecommendations.filter(id => !originalBerthRecommendations.value.includes(id));
-    const toRemove = originalBerthRecommendations.value.filter(id => !newRecommendations.includes(id));
-    
+    const toAdd = newRecommendations.filter(
+      (id) => !originalBerthRecommendations.value.includes(id)
+    );
+    const toRemove = originalBerthRecommendations.value.filter(
+      (id) => !newRecommendations.includes(id)
+    );
+
     // Link new recommendations
     if (toAdd.length > 0) {
-      await $fetch('/api/link-berth-recommendations-to-interest', {
-        method: 'POST',
+      await $fetch("/api/link-berth-recommendations-to-interest", {
+        method: "POST",
         headers: {
-          "x-tag": !user.value?.email ? "094ut234" : "pjnvü1230",
+          "x-tag": user.value?.email ? "094ut234" : "pjnvü1230",
         },
         body: {
           interestId: interest.value.Id,
-          berthIds: toAdd
-        }
+          berthIds: toAdd,
+        },
       });
     }
-    
+
     // Unlink removed recommendations
     if (toRemove.length > 0) {
-      await $fetch('/api/unlink-berth-recommendations-from-interest', {
-        method: 'POST',
+      await $fetch("/api/unlink-berth-recommendations-from-interest", {
+        method: "POST",
         headers: {
-          "x-tag": !user.value?.email ? "094ut234" : "pjnvü1230",
+          "x-tag": user.value?.email ? "094ut234" : "pjnvü1230",
         },
         body: {
           interestId: interest.value.Id,
-          berthIds: toRemove
-        }
+          berthIds: toRemove,
+        },
       });
     }
-    
+
     // Update original values
     originalBerthRecommendations.value = [...newRecommendations];
   } catch (error) {
     console.error("Failed to update berth recommendations:", error);
     alert("Failed to update berth recommendations. Please try again.");
     // Revert to original values on error
-    selectedBerthRecommendations.value = [...originalBerthRecommendations.value];
+    selectedBerthRecommendations.value = [
+      ...originalBerthRecommendations.value,
+    ];
   }
 };
 
 // Format date helper function
 const formatDate = (dateString: string | null | undefined) => {
-  if (!dateString) return '';
+  if (!dateString) return "";
   try {
     // Handle DD-MM-YYYY format
-    if (dateString.includes('-')) {
-      const parts = dateString.split('-');
+    if (dateString.includes("-")) {
+      const parts = dateString.split("-");
       if (parts.length === 3) {
         const [day, month, year] = parts;
-        const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
-        return date.toLocaleDateString('en-US', {
-          year: 'numeric',
-          month: 'short',
-          day: 'numeric'
+        const date = new Date(
+          parseInt(year),
+          parseInt(month) - 1,
+          parseInt(day)
+        );
+        return date.toLocaleDateString("en-US", {
+          year: "numeric",
+          month: "short",
+          day: "numeric",
         });
       }
     }
     // Fallback to direct date parsing
     const date = new Date(dateString);
     if (!isNaN(date.getTime())) {
-      return date.toLocaleDateString('en-US', {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric'
+      return date.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
       });
     }
     return dateString;
diff --git a/pages/dashboard/interest-list.vue b/pages/dashboard/interest-list.vue
index b66913f..0a6a7d1 100644
--- a/pages/dashboard/interest-list.vue
+++ b/pages/dashboard/interest-list.vue
@@ -181,9 +181,6 @@
       v-model="showModal"
       :selected-interest="selectedInterest"
       @save="handleSaveInterest"
-      @request-more-info-to-sales="handleRequestMoreInfoToSales"
-      @request-more-information="handleRequestMoreInformation"
-      @eoi-send-to-sales="handleEoiSendToSales"
     />
   </div>
 </template>
@@ -234,21 +231,6 @@ const handleSaveInterest = async (interest: Interest) => {
   loading.value = false;
 };
 
-const handleRequestMoreInfoToSales = (interest: Interest) => {
-  // The modal component already handles the API call
-  // You can add additional logic here if needed
-};
-
-const handleRequestMoreInformation = (interest: Interest) => {
-  // The modal component already handles the API call
-  // You can add additional logic here if needed
-};
-
-const handleEoiSendToSales = (interest: Interest) => {
-  // The modal component already handles the API call
-  // You can add additional logic here if needed
-};
-
 const headers = [
   { title: "Contact", key: "Full Name", sortable: true, width: "25%" },
   { title: "Yacht", key: "Yacht Name", sortable: true },
diff --git a/pages/dashboard/interest-status.vue b/pages/dashboard/interest-status.vue
index b7f8c17..73fa76d 100644
--- a/pages/dashboard/interest-status.vue
+++ b/pages/dashboard/interest-status.vue
@@ -147,9 +147,6 @@
     v-model="showModal"
     :selected-interest="selectedInterest"
     @save="handleSaveInterest"
-    @request-more-info-to-sales="handleRequestMoreInfoToSales"
-    @request-more-information="handleRequestMoreInformation"
-    @eoi-send-to-sales="handleEoiSendToSales"
   />
 </template>
 
@@ -288,21 +285,6 @@ const handleSaveInterest = (interest: Interest) => {
   // You can add additional logic here if needed
 };
 
-const handleRequestMoreInfoToSales = (interest: Interest) => {
-  // The modal component already handles the API call
-  // You can add additional logic here if needed
-};
-
-const handleRequestMoreInformation = (interest: Interest) => {
-  // The modal component already handles the API call
-  // You can add additional logic here if needed
-};
-
-const handleEoiSendToSales = (interest: Interest) => {
-  // The modal component already handles the API call
-  // You can add additional logic here if needed
-};
-
 // Drag and Drop handlers
 const handleDragStart = (event: DragEvent, interest: Interest) => {
   draggedInterest.value = interest;