diff --git a/src/lib/components/InfoModal.svelte b/src/lib/components/InfoModal.svelte
index 0a96713e..4ec96a11 100644
--- a/src/lib/components/InfoModal.svelte
+++ b/src/lib/components/InfoModal.svelte
@@ -8,9 +8,13 @@ export let hide = false;
 </script>
   
 
-<label for={id} class="cursor-pointer ml-1">
-  <svg class="w-5 h-5 {hide ? 'hidden' : ''}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="gray"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="info-circle"> <g> <circle cx="12" cy="12" data-name="--Circle" fill="none" id="_--Circle" r="10" stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle> <line fill="none" stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="12" y2="16"></line> <line fill="none" stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8" y2="8"></line> </g> </g> </g> </g></svg>
+<div class="relative">
+<label for={id} class="absolute bottom-0 -left-1 cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
+  <svg class="h-[10.5px] w-[10.5px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
+      <path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
+  </svg>
 </label>
+</div>
 
   <!-- Desktop modal using dialog component -->
 <input type="checkbox" id={id} class="modal-toggle" />