diff --git a/frontend/src/components/BulkDeleteLinkedDocModal.vue b/frontend/src/components/BulkDeleteLinkedDocModal.vue
index 40b6cbac..b27273b5 100644
--- a/frontend/src/components/BulkDeleteLinkedDocModal.vue
+++ b/frontend/src/components/BulkDeleteLinkedDocModal.vue
@@ -9,9 +9,7 @@
             </h3>
           </div>
           <div class="flex items-center gap-1">
-            <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="h-4 w-4" />
-            </Button>
+            <Button variant="ghost" icon="x" @click="show = false" />
           </div>
         </div>
         <div>
@@ -26,22 +24,19 @@
       </div>
       <div class="px-4 pb-7 pt-0 sm:px-6">
         <div class="flex flex-row-reverse gap-2">
-          <Button theme="red" variant="solid" @click="confirmDelete()">
-            <div class="flex gap-1">
-              <FeatherIcon name="trash" class="h-4 w-4" />
-              <span>
-                {{ __('Delete {0} items', [props.items.length]) }}
-              </span>
-            </div>
-          </Button>
-          <Button variant="solid" @click="confirmUnlink()">
-            <div class="flex gap-1">
-              <FeatherIcon name="unlock" class="h-4 w-4" />
-              <span>
-                {{ __('Unlink and delete {0} items', [props.items.length]) }}
-              </span>
-            </div>
-          </Button>
+          <Button
+            :label="__('Delete {0} items', [props.items.length])"
+            icon-left="trash-2"
+            variant="solid"
+            theme="red"
+            @click="confirmDelete()"
+          />
+          <Button
+            :label="__('Unlink and delete {0} items', [props.items.length])"
+            icon-left="unlock"
+            variant="solid"
+            @click="confirmUnlink()"
+          />
         </div>
       </div>
     </template>
@@ -54,9 +49,7 @@
             </h3>
           </div>
           <div class="flex items-center gap-1">
-            <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="h-4 w-4" />
-            </Button>
+            <Button variant="ghost" icon="x" @click="show = false" />
           </div>
         </div>
         <div>
@@ -75,24 +68,20 @@
       </div>
       <div class="px-4 pb-7 pt-0 sm:px-6">
         <div class="flex flex-row-reverse gap-2">
-          <Button variant="solid" theme="red" @click="deleteDocs()">
-            <div class="flex gap-1">
-              <span>
-                {{
-                  confirmDeleteInfo.delete
-                    ? __('Delete')
-                    : __('Unlink and delete')
-                }}
-              </span>
-            </div>
-          </Button>
-          <Button variant="subtle" @click="confirmDeleteInfo.show = false">
-            <div class="flex gap-1">
-              <span>
-                {{ __('Cancel') }}
-              </span>
-            </div>
-          </Button>
+          <Button
+            :label="
+              confirmDeleteInfo.delete ? __('Delete') : __('Unlink and delete')
+            "
+            :icon-left="confirmDeleteInfo.delete ? 'trash-2' : 'unlock'"
+            variant="solid"
+            theme="red"
+            @click="deleteDocs()"
+          />
+          <Button
+            :label="__('Cancel')"
+            variant="subtle"
+            @click="confirmDeleteInfo.show = false"
+          />
         </div>
       </div>
     </template>
diff --git a/frontend/src/components/DeleteLinkedDocModal.vue b/frontend/src/components/DeleteLinkedDocModal.vue
index d85548f0..64a24128 100644
--- a/frontend/src/components/DeleteLinkedDocModal.vue
+++ b/frontend/src/components/DeleteLinkedDocModal.vue
@@ -13,9 +13,7 @@
             </h3>
           </div>
           <div class="flex items-center gap-1">
-            <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="h-4 w-4" />
-            </Button>
+            <Button variant="ghost" icon="x" @click="show = false" />
           </div>
         </div>
         <div>
@@ -62,43 +60,32 @@
         <div class="flex flex-row-reverse gap-2">
           <Button
             v-if="linkedDocs?.length > 0"
+            :label="
+              viewControls?.selections?.length == 0
+                ? __('Delete all')
+                : __('Delete {0} item(s)', [viewControls?.selections?.length])
+            "
             theme="red"
             variant="solid"
+            icon-left="trash-2"
             @click="confirmDelete()"
-          >
-            <div class="flex gap-1">
-              <FeatherIcon name="trash" class="h-4 w-4" />
-              <span>
-                {{ __('Delete') }}
-                {{
-                  viewControls?.selections?.length == 0
-                    ? __('all')
-                    : `${viewControls?.selections?.length} item(s)`
-                }}
-              </span>
-            </div>
-          </Button>
+          />
           <Button
             v-if="linkedDocs?.length > 0"
+            :label="
+              viewControls?.selections?.length == 0
+                ? __('Unlink all')
+                : __('Unlink {0} item(s)', [viewControls?.selections?.length])
+            "
             variant="subtle"
             theme="gray"
+            icon-left="unlock"
             @click="confirmUnlink()"
-          >
-            <div class="flex gap-1">
-              <FeatherIcon name="unlock" class="h-4 w-4" />
-              <span>
-                {{ __('Unlink') }}
-                {{
-                  viewControls?.selections?.length == 0
-                    ? __('all')
-                    : `${viewControls?.selections?.length} item(s)`
-                }}
-              </span>
-            </div>
-          </Button>
+          />
           <Button
             v-if="linkedDocs?.length == 0"
             variant="solid"
+            icon-left="trash-2"
             :label="__('Delete')"
             :loading="isDealCreating"
             @click="deleteDoc()"
@@ -116,9 +103,7 @@
             </h3>
           </div>
           <div class="flex items-center gap-1">
-            <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="h-4 w-4" />
-            </Button>
+            <Button variant="ghost" icon="x" @click="show = false" />
           </div>
         </div>
         <div class="text-ink-gray-5 text-base">
diff --git a/frontend/src/components/ListViews/LinkedDocsListView.vue b/frontend/src/components/ListViews/LinkedDocsListView.vue
index 9345846e..2687f5ea 100644
--- a/frontend/src/components/ListViews/LinkedDocsListView.vue
+++ b/frontend/src/components/ListViews/LinkedDocsListView.vue
@@ -37,7 +37,7 @@
               </span>
               <FeatherIcon
                 name="external-link"
-                class="h-4 w-4"
+                class="h-4 w-4 cursor-pointer"
                 @click.stop="viewLinkedDoc(row)"
               />
             </div>
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 1bf054ed..6168b884 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -91,64 +91,52 @@
           <div class="flex gap-1.5">
             <Tooltip v-if="callEnabled" :text="__('Make a call')">
               <div>
-                <Button class="h-7 w-7" @click="triggerCall">
-                  <template #icon>
-                    <PhoneIcon />
-                  </template>
+                <Button @click="triggerCall">
+                  <template #icon><PhoneIcon /></template>
                 </Button>
               </div>
             </Tooltip>
             <Tooltip :text="__('Send an email')">
               <div>
                 <Button
-                  class="h-7 w-7"
                   @click="
                     deal.data.email
                       ? openEmailBox()
                       : toast.error(__('No email set'))
                   "
                 >
-                  <template #icon>
-                    <Email2Icon />
-                  </template>
+                  <template #icon><Email2Icon /></template>
                 </Button>
               </div>
             </Tooltip>
             <Tooltip :text="__('Go to website')">
               <div>
                 <Button
-                  class="h-7 w-7"
                   @click="
                     deal.data.website
                       ? openWebsite(deal.data.website)
                       : toast.error(__('No website set'))
                   "
                 >
-                  <template #icon>
-                    <LinkIcon />
-                  </template>
+                  <template #icon><LinkIcon /></template>
                 </Button>
               </div>
             </Tooltip>
             <Tooltip :text="__('Attach a file')">
               <div>
-                <Button class="size-7" @click="showFilesUploader = true">
-                  <template #icon>
-                    <AttachmentIcon />
-                  </template>
+                <Button @click="showFilesUploader = true">
+                  <template #icon><AttachmentIcon /></template>
                 </Button>
               </div>
             </Tooltip>
             <Tooltip :text="__('Delete')">
               <div>
                 <Button
-                  class="h-7 w-7"
                   @click="deleteDealWithModal(deal.data.name)"
                   variant="subtle"
+                  icon="trash-2"
                   theme="red"
-                >
-                  <FeatherIcon name="trash" class="h-4 w-4" />
-                </Button>
+                />
               </div>
             </Tooltip>
           </div>
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 3c9672b9..8b5cce0e 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -134,7 +134,6 @@
                 <Tooltip v-if="callEnabled" :text="__('Make a call')">
                   <div>
                     <Button
-                      class="h-7 w-7"
                       @click="
                         () =>
                           lead.data.mobile_no
@@ -151,7 +150,6 @@
                 <Tooltip :text="__('Send an email')">
                   <div>
                     <Button
-                      class="h-7 w-7"
                       @click="
                         lead.data.email
                           ? openEmailBox()
@@ -167,7 +165,6 @@
                 <Tooltip :text="__('Go to website')">
                   <div>
                     <Button
-                      class="h-7 w-7"
                       @click="
                         lead.data.website
                           ? openWebsite(lead.data.website)
@@ -182,7 +179,7 @@
                 </Tooltip>
                 <Tooltip :text="__('Attach a file')">
                   <div>
-                    <Button class="h-7 w-7" @click="showFilesUploader = true">
+                    <Button @click="showFilesUploader = true">
                       <template #icon>
                         <AttachmentIcon />
                       </template>
@@ -192,13 +189,11 @@
                 <Tooltip :text="__('Delete')">
                   <div>
                     <Button
-                      class="h-7 w-7"
                       @click="deleteLeadWithModal(lead.data.name)"
                       variant="subtle"
                       theme="red"
-                    >
-                      <FeatherIcon name="trash" class="h-4 w-4" />
-                    </Button>
+                      icon="trash-2"
+                    />
                   </div>
                 </Tooltip>
               </div>