diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index 77b48e8..cc0cdfd 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -11,7 +11,7 @@
         class="bg-white rounded-2xl border-2 border-gray-300 shadow-xl max-w-4xl w-full max-h-[90vh] flex flex-col"
       >
         <!-- Header - Make it the drag handle -->
-        <div class="flex justify-between items-center p-6 border-b border-gray-100 cursor-move" @mousedown="startDrag" @touchstart="startDrag">
+        <div class="flex justify-between items-center p-4 border-b border-gray-100 cursor-move" @mousedown="startDrag" @touchstart="startDrag">
           <h3 class="text-2xl font-semibold text-gray-900">{{ title }}</h3>
           <button @click="close" class="p-2 hover:bg-gray-100 rounded-lg transition-colors">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -30,7 +30,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, onUnmounted, watch } from 'vue';
+  import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
 
   const props = defineProps<{
     isOpen: boolean;
@@ -135,7 +135,7 @@
     newValue => {
       if (newValue) {
         // Use nextTick to ensure the modal is mounted
-        Vue.nextTick(() => {
+        nextTick(() => {
           centerModal();
         });
       }