diff --git a/src/assets/images/close-icon.svg b/src/assets/images/close-icon.svg
new file mode 100644
index 0000000..27c39de
--- /dev/null
+++ b/src/assets/images/close-icon.svg
@@ -0,0 +1,3 @@
+<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">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+</svg>
\ No newline at end of file
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index 870546a..b261c08 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -16,9 +16,7 @@
         <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">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-            </svg>
+            <img src="@/assets/images/close-icon.svg" class="w-5 h-5" alt="Close" />
           </button>
         </div>
 
@@ -28,11 +26,7 @@
         </div>
 
         <!-- Resize handle -->
-        <div class="absolute bottom-0 right-0 w-4 h-4 cursor-se-resize" @mousedown="startResize" @touchstart="startResize">
-          <svg viewBox="0 0 24 24" class="w-4 h-4 text-gray-400">
-            <path fill="currentColor" d="M22 22H20V20H22V22ZM22 20H20V18H22V20ZM20 22H18V20H20V22ZM18 22H16V20H18V22Z" />
-          </svg>
-        </div>
+        <div class="absolute bottom-0 right-0 w-5 h-5 cursor-se-resize" @mousedown="startResize" @touchstart="startResize"></div>
       </div>
     </div>
   </Teleport>