diff --git a/crm/fcrm/doctype/crm_dashboard/crm_dashboard.py b/crm/fcrm/doctype/crm_dashboard/crm_dashboard.py
index 0f6ffaa3..f9a04395 100644
--- a/crm/fcrm/doctype/crm_dashboard/crm_dashboard.py
+++ b/crm/fcrm/doctype/crm_dashboard/crm_dashboard.py
@@ -26,8 +26,9 @@ def create_default_manager_dashboard(force=False):
 		doc.title = "Manager Dashboard"
 		doc.layout = default_manager_dashboard_layout()
 		doc.insert(ignore_permissions=True)
-	elif force:
+	else:
 		doc = frappe.get_doc("CRM Dashboard", "Manager Dashboard")
-		doc.layout = default_manager_dashboard_layout()
-		doc.save(ignore_permissions=True)
+		if force:
+			doc.layout = default_manager_dashboard_layout()
+			doc.save(ignore_permissions=True)
 	return doc.layout
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 8b1b706a..d5b0b176 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -171,9 +171,6 @@ declare module 'vue' {
     LostReasonModal: typeof import('./src/components/Modals/LostReasonModal.vue')['default']
     LucideCalendar: typeof import('~icons/lucide/calendar')['default']
     LucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
-    LucidePenLine: typeof import('~icons/lucide/pen-line')['default']
-    LucideRefreshCcw: typeof import('~icons/lucide/refresh-ccw')['default']
-    LucideX: typeof import('~icons/lucide/x')['default']
     MarkAsDoneIcon: typeof import('./src/components/Icons/MarkAsDoneIcon.vue')['default']
     MaximizeIcon: typeof import('./src/components/Icons/MaximizeIcon.vue')['default']
     MenuIcon: typeof import('./src/components/Icons/MenuIcon.vue')['default']
@@ -188,7 +185,6 @@ declare module 'vue' {
     MultiSelectEmailInput: typeof import('./src/components/Controls/MultiSelectEmailInput.vue')['default']
     MultiSelectUserInput: typeof import('./src/components/Controls/MultiSelectUserInput.vue')['default']
     MuteIcon: typeof import('./src/components/Icons/MuteIcon.vue')['default']
-    NestedPopover: typeof import('./src/components/NestedPopover.vue')['default']
     NewEmailTemplate: typeof import('./src/components/Settings/EmailTemplate/NewEmailTemplate.vue')['default']
     NoteArea: typeof import('./src/components/Activities/NoteArea.vue')['default']
     NoteIcon: typeof import('./src/components/Icons/NoteIcon.vue')['default']
diff --git a/frontend/src/components/Activities/Activities.vue b/frontend/src/components/Activities/Activities.vue
index 2c8d0341..05c0e317 100644
--- a/frontend/src/components/Activities/Activities.vue
+++ b/frontend/src/components/Activities/Activities.vue
@@ -238,12 +238,9 @@
               <Button
                 class="!size-4"
                 variant="ghost"
+                :icon="SelectIcon"
                 @click="activity.show_others = !activity.show_others"
-              >
-                <template #icon>
-                  <SelectIcon />
-                </template>
-              </Button>
+              />
             </div>
             <div
               v-else
diff --git a/frontend/src/components/Activities/ActivityHeader.vue b/frontend/src/components/Activities/ActivityHeader.vue
index 49512204..a762356c 100644
--- a/frontend/src/components/Activities/ActivityHeader.vue
+++ b/frontend/src/components/Activities/ActivityHeader.vue
@@ -9,23 +9,17 @@
     <Button
       v-if="title == 'Emails'"
       variant="solid"
+      :label="__('New Email')"
+      iconLeft="plus"
       @click="emailBox.show = true"
-    >
-      <template #prefix>
-        <FeatherIcon name="plus" class="h-4 w-4" />
-      </template>
-      <span>{{ __('New Email') }}</span>
-    </Button>
+    />
     <Button
       v-else-if="title == 'Comments'"
       variant="solid"
+      :label="__('New Comment')"
+      iconLeft="plus"
       @click="emailBox.showComment = true"
-    >
-      <template #prefix>
-        <FeatherIcon name="plus" class="h-4 w-4" />
-      </template>
-      <span>{{ __('New Comment') }}</span>
-    </Button>
+    />
     <MultiActionButton
       v-else-if="title == 'Calls'"
       variant="solid"
@@ -34,59 +28,45 @@
     <Button
       v-else-if="title == 'Notes'"
       variant="solid"
+      :label="__('New Note')"
+      iconLeft="plus"
       @click="modalRef.showNote()"
-    >
-      <template #prefix>
-        <FeatherIcon name="plus" class="h-4 w-4" />
-      </template>
-      <span>{{ __('New Note') }}</span>
-    </Button>
+    />
     <Button
       v-else-if="title == 'Tasks'"
       variant="solid"
+      :label="__('New Task')"
+      iconLeft="plus"
       @click="modalRef.showTask()"
-    >
-      <template #prefix>
-        <FeatherIcon name="plus" class="h-4 w-4" />
-      </template>
-      <span>{{ __('New Task') }}</span>
-    </Button>
+    />
     <Button
       v-else-if="title == 'Attachments'"
       variant="solid"
+      :label="__('Upload Attachment')"
+      iconLeft="plus"
       @click="showFilesUploader = true"
-    >
-      <template #prefix>
-        <FeatherIcon name="plus" class="h-4 w-4" />
-      </template>
-      <span>{{ __('Upload Attachment') }}</span>
-    </Button>
+    />
     <div class="flex gap-2 shrink-0" v-else-if="title == 'WhatsApp'">
       <Button
         :label="__('Send Template')"
         @click="showWhatsappTemplates = true"
       />
-      <Button variant="solid" @click="whatsappBox.show()">
-        <template #prefix>
-          <FeatherIcon name="plus" class="h-4 w-4" />
-        </template>
-        <span>{{ __('New Message') }}</span>
-      </Button>
+      <Button
+        variant="solid"
+        :label="__('New Message')"
+        iconLeft="plus"
+        @click="whatsappBox.show()"
+      />
     </div>
     <Dropdown v-else :options="defaultActions" @click.stop>
       <template v-slot="{ open }">
-        <Button variant="solid" class="flex items-center gap-1">
-          <template #prefix>
-            <FeatherIcon name="plus" class="h-4 w-4" />
-          </template>
-          <span>{{ __('New') }}</span>
-          <template #suffix>
-            <FeatherIcon
-              :name="open ? 'chevron-up' : 'chevron-down'"
-              class="h-4 w-4"
-            />
-          </template>
-        </Button>
+        <Button
+          variant="solid"
+          class="flex items-center gap-1"
+          :label="__('New')"
+          iconLeft="plus"
+          :iconRight="open ? 'chevron-up' : 'chevron-down'"
+        />
       </template>
     </Dropdown>
   </div>
diff --git a/frontend/src/components/Activities/AttachmentArea.vue b/frontend/src/components/Activities/AttachmentArea.vue
index 7627b5e2..d5ada2aa 100644
--- a/frontend/src/components/Activities/AttachmentArea.vue
+++ b/frontend/src/components/Activities/AttachmentArea.vue
@@ -38,42 +38,31 @@
             </div>
           </Tooltip>
           <div class="flex gap-1">
-            <Tooltip
-              :text="
+            <Button
+              :tooltip="
                 attachment.is_private ? __('Make public') : __('Make private')
               "
+              class="!size-5"
+              @click.stop="
+                togglePrivate(attachment.name, attachment.is_private)
+              "
             >
-              <div>
-                <Button
-                  class="!size-5"
-                  @click.stop="
-                    togglePrivate(attachment.name, attachment.is_private)
-                  "
-                >
-                  <template #icon>
-                    <FeatherIcon
-                      :name="attachment.is_private ? 'lock' : 'unlock'"
-                      class="size-3 text-ink-gray-7"
-                    />
-                  </template>
-                </Button>
-              </div>
-            </Tooltip>
-            <Tooltip :text="__('Delete attachment')">
-              <div>
-                <Button
-                  class="!size-5"
-                  @click.stop="() => deleteAttachment(attachment.name)"
-                >
-                  <template #icon>
-                    <FeatherIcon
-                      name="trash-2"
-                      class="size-3 text-ink-gray-7"
-                    />
-                  </template>
-                </Button>
-              </div>
-            </Tooltip>
+              <template #icon>
+                <FeatherIcon
+                  :name="attachment.is_private ? 'lock' : 'unlock'"
+                  class="size-3 text-ink-gray-7"
+                />
+              </template>
+            </Button>
+            <Button
+              :tooltip="__('Delete attachment')"
+              class="!size-5"
+              @click.stop="() => deleteAttachment(attachment.name)"
+            >
+              <template #icon>
+                <FeatherIcon name="trash-2" class="size-3 text-ink-gray-7" />
+              </template>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/frontend/src/components/Activities/AudioPlayer.vue b/frontend/src/components/Activities/AudioPlayer.vue
index 71b28b1c..ebb62b94 100644
--- a/frontend/src/components/Activities/AudioPlayer.vue
+++ b/frontend/src/components/Activities/AudioPlayer.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="w-full text-sm text-ink-gray-5">
     <div class="flex items-center gap-2">
-      <Button variant="ghost" @click="playPause">
-        <template #icon>
-          <PlayIcon v-if="isPaused" class="size-4 text-ink-gray-5" />
-          <PauseIcon v-else class="size-4 text-ink-gray-5" />
-        </template>
-      </Button>
+      <Button
+        variant="ghost"
+        class="text-ink-gray-5"
+        :icon="isPaused ? PlayIcon : PauseIcon"
+        @click="playPause"
+      />
       <div class="flex gap-2 items-center justify-between flex-1">
         <input
           class="w-full slider !h-[0.5] bg-surface-gray-3 [&::-webkit-slider-thumb]:shadow [&::-webkit-slider-thumb:hover]:outline [&::-webkit-slider-thumb:hover]:outline-[0.5px]"
@@ -61,11 +61,11 @@
           </Button>
         </div>
         <Dropdown :options="options">
-          <Button variant="ghost" @click="showPlaybackSpeed = false">
-            <template #icon>
-              <FeatherIcon class="size-4" name="more-horizontal" />
-            </template>
-          </Button>
+          <Button
+            icon="more-horizontal"
+            variant="ghost"
+            @click="showPlaybackSpeed = false"
+          />
         </Dropdown>
       </div>
     </div>
diff --git a/frontend/src/components/Activities/DataFields.vue b/frontend/src/components/Activities/DataFields.vue
index 5b864ef1..bbe8e16c 100644
--- a/frontend/src/components/Activities/DataFields.vue
+++ b/frontend/src/components/Activities/DataFields.vue
@@ -14,12 +14,10 @@
     <div class="flex gap-1">
       <Button
         v-if="isManager() && !isMobileView"
+        :tooltip="__('Edit fields layout')"
+        :icon="EditIcon"
         @click="showDataFieldsModal = true"
-      >
-        <template #icon>
-          <EditIcon />
-        </template>
-      </Button>
+      />
       <Button
         label="Save"
         :disabled="!document.isDirty"
diff --git a/frontend/src/components/Activities/EmailArea.vue b/frontend/src/components/Activities/EmailArea.vue
index 9fcf5e9c..6aac01aa 100644
--- a/frontend/src/components/Activities/EmailArea.vue
+++ b/frontend/src/components/Activities/EmailArea.vue
@@ -2,7 +2,9 @@
   <div
     class="cursor-pointer flex flex-col rounded-md shadow bg-surface-cards px-3 py-1.5 text-base transition-all duration-300 ease-in-out"
   >
-    <div class="-mb-0.5 flex items-center justify-between gap-2 truncate text-ink-gray-9">
+    <div
+      class="-mb-0.5 flex items-center justify-between gap-2 truncate text-ink-gray-9"
+    >
       <div class="flex items-center gap-2 truncate">
         <span>{{ activity.data.sender_full_name }}</span>
         <span class="sm:flex hidden text-sm text-ink-gray-5">
@@ -28,32 +30,20 @@
           </div>
         </Tooltip>
         <div class="flex gap-0.5">
-          <Tooltip :text="__('Reply')">
-            <div>
-              <Button
-                variant="ghost"
-                class="text-ink-gray-7"
-                @click="reply(activity.data)"
-              >
-                <template #icon>
-                  <ReplyIcon />
-                </template>
-              </Button>
-            </div>
-          </Tooltip>
-          <Tooltip :text="__('Reply All')">
-            <div>
-              <Button
-                variant="ghost"
-                class="text-ink-gray-7"
-                @click="reply(activity.data, true)"
-              >
-                <template #icon>
-                  <ReplyAllIcon />
-                </template>
-              </Button>
-            </div>
-          </Tooltip>
+          <Button
+            :tooltip="__('Reply')"
+            variant="ghost"
+            class="text-ink-gray-7"
+            :icon="ReplyIcon"
+            @click="reply(activity.data)"
+          />
+          <Button
+            :tooltip="__('Reply All')"
+            variant="ghost"
+            :icon="ReplyAllIcon"
+            class="text-ink-gray-7"
+            @click="reply(activity.data, true)"
+          />
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/Activities/TaskArea.vue b/frontend/src/components/Activities/TaskArea.vue
index 1b479e6f..5c2d93b6 100644
--- a/frontend/src/components/Activities/TaskArea.vue
+++ b/frontend/src/components/Activities/TaskArea.vue
@@ -41,13 +41,13 @@
             :options="taskStatusOptions(modalRef.updateTaskStatus, task)"
             @click.stop
           >
-            <Tooltip :text="__('Change Status')">
-              <div>
-                <Button variant="ghosted" class="hover:bg-surface-gray-4">
-                  <TaskStatusIcon :status="task.status" />
-                </Button>
-              </div>
-            </Tooltip>
+            <Button
+              :tooltip="__('Change status')"
+              variant="ghosted"
+              class="hover:bg-surface-gray-4"
+            >
+              <TaskStatusIcon :status="task.status" />
+            </Button>
           </Dropdown>
           <Dropdown
             :options="[
diff --git a/frontend/src/components/AssignTo.vue b/frontend/src/components/AssignTo.vue
index 96d29cb6..a1bc7c98 100644
--- a/frontend/src/components/AssignTo.vue
+++ b/frontend/src/components/AssignTo.vue
@@ -1,7 +1,7 @@
 <template>
-  <NestedPopover>
-    <template #target>
-      <div class="flex items-center">
+  <Popover placement="bottom-end">
+    <template #target="{ togglePopover }">
+      <div class="flex items-center" @click="togglePopover">
         <component
           v-if="assignees?.length"
           :is="assignees?.length == 1 ? 'Button' : 'div'"
@@ -11,24 +11,23 @@
         <Button v-else :label="__('Assign to')" />
       </div>
     </template>
-    <template #body="{ open }">
+    <template #body="{ isOpen }">
       <AssignToBody
-        v-show="open"
+        v-show="isOpen"
         v-model="assignees"
         :docname="docname"
         :doctype="doctype"
-        :open="open"
+        :open="isOpen"
         :onUpdate="ownerField && saveAssignees"
       />
     </template>
-  </NestedPopover>
+  </Popover>
 </template>
 <script setup>
-import NestedPopover from '@/components/NestedPopover.vue'
 import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import AssignToBody from '@/components/AssignToBody.vue'
 import { useDocument } from '@/data/document'
-import { toast } from 'frappe-ui'
+import { toast, Popover } from 'frappe-ui'
 import { computed } from 'vue'
 
 const props = defineProps({
diff --git a/frontend/src/components/AssignToBody.vue b/frontend/src/components/AssignToBody.vue
index e4e226b0..b1d4a80d 100644
--- a/frontend/src/components/AssignToBody.vue
+++ b/frontend/src/components/AssignToBody.vue
@@ -25,23 +25,21 @@
             :key="assignee.name"
             @click.stop
           >
-            <div>
-              <div
-                class="flex items-center text-sm p-0.5 text-ink-gray-6 border border-outline-gray-1 bg-surface-modal rounded-full cursor-pointer"
-                @click.stop
+            <div
+              class="flex items-center text-sm p-0.5 text-ink-gray-6 border border-outline-gray-1 bg-surface-modal rounded-full cursor-pointer"
+              @click.stop
+            >
+              <UserAvatar :user="assignee.name" size="sm" />
+              <div class="ml-1">{{ getUser(assignee.name).full_name }}</div>
+              <Button
+                variant="ghost"
+                class="rounded-full !size-4 m-1"
+                @click.stop="removeValue(assignee.name)"
               >
-                <UserAvatar :user="assignee.name" size="sm" />
-                <div class="ml-1">{{ getUser(assignee.name).full_name }}</div>
-                <Button
-                  variant="ghost"
-                  class="rounded-full !size-4 m-1"
-                  @click.stop="removeValue(assignee.name)"
-                >
-                  <template #icon>
-                    <FeatherIcon name="x" class="h-3 w-3 text-ink-gray-6" />
-                  </template>
-                </Button>
-              </div>
+                <template #icon>
+                  <FeatherIcon name="x" class="h-3 w-3 text-ink-gray-6" />
+                </template>
+              </Button>
             </div>
           </Tooltip>
         </div>
@@ -74,7 +72,7 @@ import UserAvatar from '@/components/UserAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
 import { usersStore } from '@/stores/users'
 import { capture } from '@/telemetry'
-import { Tooltip, Switch, toast, createResource } from 'frappe-ui'
+import { Tooltip, Switch, createResource } from 'frappe-ui'
 import { ref, watch } from 'vue'
 
 const props = defineProps({
diff --git a/frontend/src/components/AttachmentItem.vue b/frontend/src/components/AttachmentItem.vue
index aa4dc2bd..17081ce8 100644
--- a/frontend/src/components/AttachmentItem.vue
+++ b/frontend/src/components/AttachmentItem.vue
@@ -5,11 +5,9 @@
         :label="label"
         theme="gray"
         variant="outline"
+        :iconLeft="getIcon()"
         @click="toggleDialog()"
       >
-        <template #prefix>
-          <component :is="getIcon()" class="h-4 w-4" />
-        </template>
         <template #suffix>
           <slot name="suffix" />
         </template>
diff --git a/frontend/src/components/ColumnSettings.vue b/frontend/src/components/ColumnSettings.vue
index b98792c7..538c054f 100644
--- a/frontend/src/components/ColumnSettings.vue
+++ b/frontend/src/components/ColumnSettings.vue
@@ -1,7 +1,7 @@
 <template>
-  <NestedPopover>
-    <template #target>
-      <Button :label="__('Columns')">
+  <Popover placement="bottom-end">
+    <template #target="{ togglePopover }">
+      <Button :label="__('Columns')" @click="togglePopover">
         <template v-if="hideLabel">
           <ColumnsIcon class="h-4" />
         </template>
@@ -65,37 +65,28 @@
                 <Button
                   class="w-full !justify-start !text-ink-gray-5"
                   variant="ghost"
-                  @click="togglePopover()"
                   :label="__('Add Column')"
-                >
-                  <template #prefix>
-                    <FeatherIcon name="plus" class="h-4" />
-                  </template>
-                </Button>
+                  iconLeft="plus"
+                  @click="togglePopover"
+                />
               </template>
             </Autocomplete>
             <Button
               v-if="columnsUpdated"
               class="w-full !justify-start !text-ink-gray-5"
               variant="ghost"
-              @click="reset(close)"
               :label="__('Reset Changes')"
-            >
-              <template #prefix>
-                <ReloadIcon class="h-4" />
-              </template>
-            </Button>
+              :iconLeft="ReloadIcon"
+              @click="reset(close)"
+            />
             <Button
               v-if="!is_default"
               class="w-full !justify-start !text-ink-gray-5"
               variant="ghost"
-              @click="resetToDefault(close)"
               :label="__('Reset to Default')"
-            >
-              <template #prefix>
-                <ReloadIcon class="h-4" />
-              </template>
-            </Button>
+              :iconLeft="ReloadIcon"
+              @click="resetToDefault(close)"
+            />
           </div>
         </div>
         <div v-else>
@@ -144,7 +135,7 @@
         </div>
       </div>
     </template>
-  </NestedPopover>
+  </Popover>
 </template>
 
 <script setup>
@@ -152,9 +143,8 @@ import ColumnsIcon from '@/components/Icons/ColumnsIcon.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import DragIcon from '@/components/Icons/DragIcon.vue'
 import ReloadIcon from '@/components/Icons/ReloadIcon.vue'
-import NestedPopover from '@/components/NestedPopover.vue'
-import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import { isTouchScreenDevice } from '@/utils'
+import { Autocomplete, Popover } from 'frappe-ui'
 import Draggable from 'vuedraggable'
 import { computed, ref } from 'vue'
 import { watchOnce } from '@vueuse/core'
diff --git a/frontend/src/components/CommentBox.vue b/frontend/src/components/CommentBox.vue
index 86074750..2dbcbcf1 100644
--- a/frontend/src/components/CommentBox.vue
+++ b/frontend/src/components/CommentBox.vue
@@ -45,11 +45,12 @@
               v-slot="{ togglePopover }"
               @update:modelValue="() => appendEmoji()"
             >
-              <Button variant="ghost" @click="togglePopover()">
-                <template #icon>
-                  <SmileIcon class="h-4" />
-                </template>
-              </Button>
+              <Button
+                :tooltip="__('Insert Emoji')"
+                :icon="SmileIcon"
+                variant="ghost"
+                @click="togglePopover()"
+              />
             </IconPicker>
             <FileUploader
               :upload-args="{
@@ -61,14 +62,11 @@
             >
               <template #default="{ openFileSelector }">
                 <Button
-                  theme="gray"
+                  :tooltip="__('Attach a file')"
                   variant="ghost"
+                  :icon="AttachmentIcon"
                   @click="openFileSelector()"
-                >
-                  <template #icon>
-                    <AttachmentIcon class="h-4" />
-                  </template>
-                </Button>
+                />
               </template>
             </FileUploader>
           </div>
diff --git a/frontend/src/components/CommunicationArea.vue b/frontend/src/components/CommunicationArea.vue
index 423adb75..1d5ead77 100644
--- a/frontend/src/components/CommunicationArea.vue
+++ b/frontend/src/components/CommunicationArea.vue
@@ -8,24 +8,18 @@
           showEmailBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '',
         ]"
         :label="__('Reply')"
+        :iconLeft="Email2Icon"
         @click="toggleEmailBox()"
-      >
-        <template #prefix>
-          <Email2Icon class="h-4" />
-        </template>
-      </Button>
+      />
       <Button
         variant="ghost"
         :label="__('Comment')"
         :class="[
           showCommentBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '',
         ]"
+        :iconLeft="CommentIcon"
         @click="toggleCommentBox()"
-      >
-        <template #prefix>
-          <CommentIcon class="h-4" />
-        </template>
-      </Button>
+      />
     </div>
   </div>
   <div
diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
index cce8b245..0eda551e 100644
--- a/frontend/src/components/Controls/Grid.vue
+++ b/frontend/src/components/Controls/Grid.vue
@@ -54,14 +54,12 @@
         </div>
         <div class="w-12">
           <Button
-            class="flex w-full items-center justify-center rounded !bg-surface-gray-2 border-0"
+            :tooltip="__('Edit grid fields')"
+            class="flex w-full items-center justify-center rounded !bg-surface-gray-2 border-0 !text-ink-gray-5"
             variant="outline"
+            icon="settings"
             @click="showGridFieldsEditorModal = true"
-          >
-            <template #icon>
-              <FeatherIcon name="settings" class="size-4 text-ink-gray-7" />
-            </template>
-          </Button>
+          />
         </div>
       </div>
       <!-- Rows -->
@@ -279,14 +277,12 @@
               </div>
               <div class="edit-row w-12">
                 <Button
-                  class="flex w-full items-center justify-center rounded border-0"
+                  :tooltip="__('Edit row')"
+                  class="flex w-full items-center justify-center rounded border-0 !text-ink-gray-7"
                   variant="outline"
+                  :icon="EditIcon"
                   @click="showRowList[index] = true"
-                >
-                  <template #icon>
-                    <EditIcon class="text-ink-gray-7" />
-                  </template>
-                </Button>
+                />
               </div>
               <GridRowModal
                 v-if="showRowList[index]"
diff --git a/frontend/src/components/Controls/GridFieldsEditorModal.vue b/frontend/src/components/Controls/GridFieldsEditorModal.vue
index 544cc22d..c56f56ff 100644
--- a/frontend/src/components/Controls/GridFieldsEditorModal.vue
+++ b/frontend/src/components/Controls/GridFieldsEditorModal.vue
@@ -54,13 +54,10 @@
           <template #target="{ togglePopover }">
             <Button
               class="w-full mt-2"
-              @click="togglePopover()"
               :label="__('Add Field')"
-            >
-              <template #prefix>
-                <FeatherIcon name="plus" class="h-4" />
-              </template>
-            </Button>
+              iconLeft="plus"
+              @click="togglePopover()"
+            />
           </template>
           <template #item-label="{ option }">
             <div class="flex flex-col gap-1 text-ink-gray-9">
diff --git a/frontend/src/components/Controls/GridRowModal.vue b/frontend/src/components/Controls/GridRowModal.vue
index e38dd87c..3e6b5801 100644
--- a/frontend/src/components/Controls/GridRowModal.vue
+++ b/frontend/src/components/Controls/GridRowModal.vue
@@ -11,19 +11,18 @@
           <div class="flex items-center gap-1">
             <Button
               v-if="isManager()"
+              :tooltip="__('Edit fields layout')"
               variant="ghost"
               class="w-7"
+              :icon="EditIcon"
               @click="openGridRowFieldsModal"
-            >
-              <template #icon>
-                <EditIcon />
-              </template>
-            </Button>
-            <Button variant="ghost" class="w-7" @click="show = false">
-              <template #icon>
-                <FeatherIcon name="x" class="size-4" />
-              </template>
-            </Button>
+            />
+            <Button
+              icon="x"
+              variant="ghost"
+              class="w-7"
+              @click="show = false"
+            />
           </div>
         </div>
         <div>
diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
index 633f2b2e..6ccec49e 100644
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -48,24 +48,18 @@
             variant="ghost"
             class="w-full !justify-start"
             :label="__('Create New')"
+            iconLeft="plus"
             @click="() => attrs.onCreate(value, close)"
-          >
-            <template #prefix>
-              <FeatherIcon name="plus" class="h-4" />
-            </template>
-          </Button>
+          />
         </div>
         <div>
           <Button
             variant="ghost"
             class="w-full !justify-start"
             :label="__('Clear')"
+            iconLeft="x"
             @click="() => clearValue(close)"
-          >
-            <template #prefix>
-              <FeatherIcon name="x" class="h-4" />
-            </template>
-          </Button>
+          />
         </div>
       </template>
     </Autocomplete>
diff --git a/frontend/src/components/CustomActions.vue b/frontend/src/components/CustomActions.vue
index 8bb4b6d0..30a98c9c 100644
--- a/frontend/src/components/CustomActions.vue
+++ b/frontend/src/components/CustomActions.vue
@@ -18,14 +18,10 @@
     :key="g.label"
   >
     <Dropdown :options="g.action" v-slot="{ open }">
-      <Button :label="g.label">
-        <template #suffix>
-          <FeatherIcon
-            :name="open ? 'chevron-up' : 'chevron-down'"
-            class="h-4"
-          />
-        </template>
-      </Button>
+      <Button
+        :label="g.label"
+        :iconRight="open ? 'chevron-up' : 'chevron-down'"
+      />
     </Dropdown>
   </div>
 </template>
diff --git a/frontend/src/components/DropdownItem.vue b/frontend/src/components/DropdownItem.vue
index d9592c13..52536afd 100644
--- a/frontend/src/components/DropdownItem.vue
+++ b/frontend/src/components/DropdownItem.vue
@@ -19,53 +19,36 @@
           v-if="editMode"
           variant="ghost"
           :label="__('Save')"
-          size="sm"
           class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
           @click="saveOption"
         />
-        <Tooltip text="Set As Primary" v-if="!isNew && !option.selected">
-          <div>
-            <Button
-              variant="ghost"
-              size="sm"
-              class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
-              @click="option.onClick"
-            >
-              <template #icon>
-                <SuccessIcon />
-              </template>
-            </Button>
-          </div>
-        </Tooltip>
-        <Tooltip v-if="!editMode" text="Edit">
-          <div>
-            <Button
-              variant="ghost"
-              size="sm"
-              class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
-              @click="toggleEditMode"
-            >
-              <template #icon>
-                <EditIcon />
-              </template>
-            </Button>
-          </div>
-        </Tooltip>
-        <Tooltip text="Delete">
-          <div>
-            <Button
-              variant="ghost"
-              icon="x"
-              size="sm"
-              class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
-              @click="() => option.onDelete(option, isNew)"
-            />
-          </div>
-        </Tooltip>
+        <Button
+          v-if="!isNew && !option.selected"
+          :tooltip="__('Set As Primary')"
+          variant="ghost"
+          :icon="SuccessIcon"
+          class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
+          @click="option.onClick"
+        />
+        <Button
+          v-if="!editMode"
+          :tooltip="__('Edit')"
+          variant="ghost"
+          :icon="EditIcon"
+          class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
+          @click="toggleEditMode"
+        />
+        <Button
+          :tooltip="__('Delete')"
+          variant="ghost"
+          icon="x"
+          class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
+          @click="() => option.onDelete(option, isNew)"
+        />
       </div>
     </div>
     <div v-if="option.selected">
-      <FeatherIcon name="check" class="text-ink-gray-5 h-4 w-6" size="sm" />
+      <FeatherIcon name="check" class="text-ink-gray-5 h-4 w-6" />
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/EmailEditor.vue b/frontend/src/components/EmailEditor.vue
index ca468ecc..e59e7837 100644
--- a/frontend/src/components/EmailEditor.vue
+++ b/frontend/src/components/EmailEditor.vue
@@ -123,11 +123,12 @@
               v-slot="{ togglePopover }"
               @update:modelValue="() => appendEmoji()"
             >
-              <Button variant="ghost" @click="togglePopover()">
-                <template #icon>
-                  <SmileIcon class="h-4" />
-                </template>
-              </Button>
+              <Button
+                :tooltip="__('Insert Emoji')"
+                :icon="SmileIcon"
+                variant="ghost"
+                @click="togglePopover()"
+              />
             </IconPicker>
             <FileUploader
               :upload-args="{
@@ -138,21 +139,20 @@
               @success="(f) => attachments.push(f)"
             >
               <template #default="{ openFileSelector }">
-                <Button variant="ghost" @click="openFileSelector()">
-                  <template #icon>
-                    <AttachmentIcon class="h-4" />
-                  </template>
-                </Button>
+                <Button
+                  :tooltip="__('Attach a file')"
+                  :icon="AttachmentIcon"
+                  variant="ghost"
+                  @click="openFileSelector()"
+                />
               </template>
             </FileUploader>
             <Button
+              :tooltip="__('Insert Email Template')"
               variant="ghost"
+              :icon="EmailTemplateIcon"
               @click="showEmailTemplateSelectorModal = true"
-            >
-              <template #icon>
-                <EmailTemplateIcon class="h-4" />
-              </template>
-            </Button>
+            />
           </div>
           <div class="mt-2 flex items-center justify-end space-x-2 sm:mt-0">
             <Button v-bind="discardButtonProps || {}" :label="__('Discard')" />
diff --git a/frontend/src/components/FieldLayout/Field.vue b/frontend/src/components/FieldLayout/Field.vue
index a70ff591..e042a7a1 100644
--- a/frontend/src/components/FieldLayout/Field.vue
+++ b/frontend/src/components/FieldLayout/Field.vue
@@ -89,12 +89,9 @@
         v-if="data[field.fieldname] && field.edit"
         class="shrink-0"
         :label="__('Edit')"
+        :iconLeft="EditIcon"
         @click="field.edit(data[field.fieldname])"
-      >
-        <template #prefix>
-          <EditIcon class="h-4 w-4" />
-        </template>
-      </Button>
+      />
     </div>
 
     <TableMultiselectInput
diff --git a/frontend/src/components/FieldLayoutEditor.vue b/frontend/src/components/FieldLayoutEditor.vue
index df8287db..ae988716 100644
--- a/frontend/src/components/FieldLayoutEditor.vue
+++ b/frontend/src/components/FieldLayoutEditor.vue
@@ -169,13 +169,10 @@
                         <Button
                           class="w-full !h-8 !bg-surface-modal"
                           variant="outline"
-                          @click="togglePopover()"
                           :label="__('Add Field')"
-                        >
-                          <template #prefix>
-                            <FeatherIcon name="plus" class="h-4" />
-                          </template>
-                        </Button>
+                          iconLeft="plus"
+                          @click="togglePopover()"
+                        />
                       </div>
                     </template>
                     <template #item-label="{ option }">
@@ -198,6 +195,7 @@
           class="w-full h-8"
           variant="subtle"
           :label="__('Add Section')"
+          iconLeft="plus"
           @click="
             tabs[tabIndex].sections.push({
               label: __('New Section'),
@@ -206,11 +204,7 @@
               columns: [{ name: 'column_' + getRandom(), fields: [] }],
             })
           "
-        >
-          <template #prefix>
-            <FeatherIcon name="plus" class="h-4" />
-          </template>
-        </Button>
+        />
       </div>
     </div>
   </div>
diff --git a/frontend/src/components/FilesUploader/FilesUploader.vue b/frontend/src/components/FilesUploader/FilesUploader.vue
index 8fd5a08e..d0f27e89 100644
--- a/frontend/src/components/FilesUploader/FilesUploader.vue
+++ b/frontend/src/components/FilesUploader/FilesUploader.vue
@@ -29,6 +29,7 @@
               filesUploaderArea?.showWebLink || filesUploaderArea?.showCamera
             "
             :label="isMobileView ? __('Back') : __('Back to file upload')"
+            iconLeft="arrow-left"
             @click="
               () => {
                 filesUploaderArea.showWebLink = false
@@ -37,11 +38,7 @@
                 filesUploaderArea.cameraImage = null
               }
             "
-          >
-            <template #prefix>
-              <FeatherIcon name="arrow-left" class="size-4" />
-            </template>
-          </Button>
+          />
           <Button
             v-if="
               filesUploaderArea?.showCamera && !filesUploaderArea?.cameraImage
diff --git a/frontend/src/components/Filter.vue b/frontend/src/components/Filter.vue
index bb45fb5b..a682340e 100644
--- a/frontend/src/components/Filter.vue
+++ b/frontend/src/components/Filter.vue
@@ -1,12 +1,13 @@
 <template>
-  <NestedPopover>
-    <template #target>
+  <Popover placement="bottom-end">
+    <template #target="{ togglePopover, close }">
       <div class="flex items-center">
         <Button
           :label="__('Filter')"
           :class="filters?.size ? 'rounded-r-none' : ''"
+          :iconLeft="FilterIcon"
+          @click="togglePopover"
         >
-          <template #prefix><FilterIcon class="h-4" /></template>
           <template v-if="filters?.size" #suffix>
             <div
               class="flex h-5 w-5 items-center justify-center rounded-[5px] bg-surface-white pt-px text-xs font-medium text-ink-gray-8 shadow-sm"
@@ -15,15 +16,13 @@
             </div>
           </template>
         </Button>
-        <Tooltip v-if="filters?.size" :text="__('Clear all Filter')">
-          <div>
-            <Button
-              class="rounded-l-none border-l"
-              icon="x"
-              @click.stop="clearfilter(false)"
-            />
-          </div>
-        </Tooltip>
+        <Button
+          v-if="filters?.size"
+          :tooltip="__('Clear all Filter')"
+          class="rounded-l-none border-l"
+          icon="x"
+          @click.stop="clearfilter(close)"
+        />
       </div>
     </template>
     <template #body="{ close }">
@@ -134,13 +133,10 @@
                 <Button
                   class="!text-ink-gray-5"
                   variant="ghost"
-                  @click="togglePopover()"
                   :label="__('Add Filter')"
-                >
-                  <template #prefix>
-                    <FeatherIcon name="plus" class="h-4" />
-                  </template>
-                </Button>
+                  iconLeft="plus"
+                  @click="togglePopover()"
+                />
               </template>
             </Autocomplete>
             <Button
@@ -154,17 +150,16 @@
         </div>
       </div>
     </template>
-  </NestedPopover>
+  </Popover>
 </template>
 <script setup>
-import NestedPopover from '@/components/NestedPopover.vue'
 import FilterIcon from '@/components/Icons/FilterIcon.vue'
 import Link from '@/components/Controls/Link.vue'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import {
   FormControl,
   createResource,
-  Tooltip,
+  Popover,
   DatePicker,
   DateTimePicker,
   DateRangePicker,
@@ -485,7 +480,7 @@ function removeFilter(index) {
 function clearfilter(close) {
   filters.value.clear()
   apply()
-  close && close()
+  close()
 }
 
 function updateValue(value, filter) {
diff --git a/frontend/src/components/GroupBy.vue b/frontend/src/components/GroupBy.vue
index a71ab9a2..480715f1 100644
--- a/frontend/src/components/GroupBy.vue
+++ b/frontend/src/components/GroupBy.vue
@@ -7,18 +7,10 @@
             ? groupByValue?.label
             : __('Group By: ') + groupByValue?.label
         "
+        :iconLeft="DetailsIcon"
+        :iconRight="isOpen ? 'chevron-up' : 'chevron-down'"
         @click="togglePopover()"
-      >
-        <template #prefix>
-          <DetailsIcon />
-        </template>
-        <template #suffix>
-          <FeatherIcon
-            :name="isOpen ? 'chevron-up' : 'chevron-down'"
-            class="h-4"
-          />
-        </template>
-      </Button>
+      />
     </template>
   </Autocomplete>
 </template>
diff --git a/frontend/src/components/IconPicker.vue b/frontend/src/components/IconPicker.vue
index 8322acaa..64221756 100644
--- a/frontend/src/components/IconPicker.vue
+++ b/frontend/src/components/IconPicker.vue
@@ -69,7 +69,7 @@
   </Popover>
 </template>
 <script setup>
-import Popover from '@/components/frappe-ui/Popover.vue'
+import { Popover } from 'frappe-ui'
 import { gemoji } from 'gemoji'
 import { ref, computed } from 'vue'
 
diff --git a/frontend/src/components/Kanban/KanbanSettings.vue b/frontend/src/components/Kanban/KanbanSettings.vue
index bfe6347d..ea1f3a86 100644
--- a/frontend/src/components/Kanban/KanbanSettings.vue
+++ b/frontend/src/components/Kanban/KanbanSettings.vue
@@ -3,11 +3,8 @@
     :label="__('Kanban Settings')"
     @click="showDialog = true"
     v-bind="$attrs"
-  >
-    <template #prefix>
-      <KanbanIcon class="h-4" />
-    </template>
-  </Button>
+    :iconLeft="KanbanIcon"
+  />
   <Dialog v-model="showDialog" :options="{ title: __('Kanban Settings') }">
     <template #body-content>
       <div>
@@ -23,8 +20,8 @@
           <template #target="{ togglePopover }">
             <Button
               class="w-full !justify-start"
-              @click="togglePopover()"
               :label="columnField.label"
+              @click="togglePopover()"
             />
           </template>
         </Autocomplete>
@@ -80,13 +77,10 @@
           <template #target="{ togglePopover }">
             <Button
               class="w-full mt-2"
-              @click="togglePopover()"
               :label="__('Add Field')"
-            >
-              <template #prefix>
-                <FeatherIcon name="plus" class="h-4" />
-              </template>
-            </Button>
+              iconLeft="plus"
+              @click="togglePopover()"
+            />
           </template>
           <template #item-label="{ option }">
             <div class="flex flex-col gap-1 text-ink-gray-9">
diff --git a/frontend/src/components/Kanban/KanbanView.vue b/frontend/src/components/Kanban/KanbanView.vue
index dbf01962..6129f344 100644
--- a/frontend/src/components/Kanban/KanbanView.vue
+++ b/frontend/src/components/Kanban/KanbanView.vue
@@ -15,17 +15,18 @@
         >
           <div class="flex gap-2 items-center group justify-between">
             <div class="flex items-center text-base">
-              <NestedPopover>
-                <template #target>
+              <Popover>
+                <template #target="{ togglePopover }">
                   <Button
                     variant="ghost"
                     size="sm"
                     class="hover:!bg-surface-gray-2"
+                    @click="togglePopover"
                   >
                     <IndicatorIcon :class="parseColor(column.column.color)" />
                   </Button>
                 </template>
-                <template #body="{ close }">
+                <template #body>
                   <div
                     class="flex flex-col gap-3 px-3 py-2.5 min-w-40 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
                   >
@@ -48,7 +49,7 @@
                     </div>
                   </div>
                 </template>
-              </NestedPopover>
+              </Popover>
               <div class="text-ink-gray-9">{{ column.column.name }}</div>
             </div>
             <div class="flex">
@@ -153,13 +154,10 @@
         <template #target="{ togglePopover }">
           <Button
             class="w-full mt-2.5 mb-1 mr-5"
-            @click="togglePopover()"
             :label="__('Add Column')"
-          >
-            <template #prefix>
-              <FeatherIcon name="plus" class="h-4" />
-            </template>
-          </Button>
+            iconLeft="plus"
+            @click="togglePopover()"
+          />
         </template>
       </Autocomplete>
     </div>
@@ -167,11 +165,10 @@
 </template>
 <script setup>
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
-import NestedPopover from '@/components/NestedPopover.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import { isTouchScreenDevice, colors, parseColor } from '@/utils'
 import Draggable from 'vuedraggable'
-import { Dropdown } from 'frappe-ui'
+import { Dropdown, Popover } from 'frappe-ui'
 import { computed } from 'vue'
 
 const props = defineProps({
diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index d1dc3c82..bd901520 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -3,8 +3,8 @@
     class="relative flex h-full flex-col justify-between transition-all duration-300 ease-in-out"
     :class="isSidebarCollapsed ? 'w-12' : 'w-[220px]'"
   >
-    <div>
-      <UserDropdown class="p-2" :isCollapsed="isSidebarCollapsed" />
+    <div class="p-2">
+      <UserDropdown :isCollapsed="isSidebarCollapsed" />
     </div>
     <div class="flex-1 overflow-y-auto">
       <div class="mb-3 flex flex-col">
@@ -197,51 +197,50 @@ const isSidebarCollapsed = useStorage('isSidebarCollapsed', false)
 const isFCSite = ref(window.is_fc_site)
 const isDemoSite = ref(window.is_demo_site)
 
-const allViews = computed(() => {
-  const links = [
-    {
-      label: 'Dashboard',
-      icon: LucideLayoutDashboard,
-      to: 'Dashboard',
-      condition: () => isManager(),
-    },
-    {
-      label: 'Leads',
-      icon: LeadsIcon,
-      to: 'Leads',
-    },
-    {
-      label: 'Deals',
-      icon: DealsIcon,
-      to: 'Deals',
-    },
-    {
-      label: 'Contacts',
-      icon: ContactsIcon,
-      to: 'Contacts',
-    },
-    {
-      label: 'Organizations',
-      icon: OrganizationsIcon,
-      to: 'Organizations',
-    },
-    {
-      label: 'Notes',
-      icon: NoteIcon,
-      to: 'Notes',
-    },
-    {
-      label: 'Tasks',
-      icon: TaskIcon,
-      to: 'Tasks',
-    },
-    {
-      label: 'Call Logs',
-      icon: PhoneIcon,
-      to: 'Call Logs',
-    },
-  ]
+const links = [
+  {
+    label: 'Dashboard',
+    icon: LucideLayoutDashboard,
+    to: 'Dashboard',
+  },
+  {
+    label: 'Leads',
+    icon: LeadsIcon,
+    to: 'Leads',
+  },
+  {
+    label: 'Deals',
+    icon: DealsIcon,
+    to: 'Deals',
+  },
+  {
+    label: 'Contacts',
+    icon: ContactsIcon,
+    to: 'Contacts',
+  },
+  {
+    label: 'Organizations',
+    icon: OrganizationsIcon,
+    to: 'Organizations',
+  },
+  {
+    label: 'Notes',
+    icon: NoteIcon,
+    to: 'Notes',
+  },
+  {
+    label: 'Tasks',
+    icon: TaskIcon,
+    to: 'Tasks',
+  },
+  {
+    label: 'Call Logs',
+    icon: PhoneIcon,
+    to: 'Call Logs',
+  },
+]
 
+const allViews = computed(() => {
   let _views = [
     {
       name: 'All Views',
diff --git a/frontend/src/components/Modals/AddressModal.vue b/frontend/src/components/Modals/AddressModal.vue
index c1e9ba20..7f270103 100644
--- a/frontend/src/components/Modals/AddressModal.vue
+++ b/frontend/src/components/Modals/AddressModal.vue
@@ -11,19 +11,18 @@
           <div class="flex items-center gap-1">
             <Button
               v-if="isManager() && !isMobileView"
+              :tooltip="__('Edit fields layout')"
               variant="ghost"
+              :icon="EditIcon"
               class="w-7"
               @click="openQuickEntryModal"
-            >
-              <template #icon>
-                <EditIcon />
-              </template>
-            </Button>
-            <Button variant="ghost" class="w-7" @click="show = false">
-              <template #icon>
-                <FeatherIcon name="x" class="size-4" />
-              </template>
-            </Button>
+            />
+            <Button
+              icon="x"
+              variant="ghost"
+              class="w-7"
+              @click="show = false"
+            />
           </div>
         </div>
         <div v-if="tabs.data && _address.doc">
diff --git a/frontend/src/components/Modals/CallLogDetailModal.vue b/frontend/src/components/Modals/CallLogDetailModal.vue
index c7d336e1..991b490a 100644
--- a/frontend/src/components/Modals/CallLogDetailModal.vue
+++ b/frontend/src/components/Modals/CallLogDetailModal.vue
@@ -36,18 +36,17 @@
             <Button
               v-if="!isMobileView"
               variant="ghost"
+              :tooltip="__('Edit call log')"
+              :icon="EditIcon"
               class="w-7"
               @click="openCallLogModal"
-            >
-              <template #icon>
-                <EditIcon />
-              </template>
-            </Button>
-            <Button variant="ghost" class="w-7" @click="show = false">
-              <template #icon>
-                <FeatherIcon name="x" class="size-4" />
-              </template>
-            </Button>
+            />
+            <Button
+              icon="x"
+              variant="ghost"
+              class="w-7"
+              @click="show = false"
+            />
           </div>
         </div>
         <div class="flex flex-col gap-3.5">
diff --git a/frontend/src/components/Modals/CallLogModal.vue b/frontend/src/components/Modals/CallLogModal.vue
index dab2374c..65ad7e8f 100644
--- a/frontend/src/components/Modals/CallLogModal.vue
+++ b/frontend/src/components/Modals/CallLogModal.vue
@@ -13,18 +13,17 @@
             <Button
               v-if="isManager() && !isMobileView"
               variant="ghost"
+              :tooltip="__('Edit fields layout')"
+              :icon="EditIcon"
               class="w-7"
               @click="openQuickEntryModal"
-            >
-              <template #icon>
-                <EditIcon />
-              </template>
-            </Button>
-            <Button variant="ghost" class="w-7" @click="show = false">
-              <template #icon>
-                <FeatherIcon name="x" class="size-4" />
-              </template>
-            </Button>
+            />
+            <Button
+              variant="ghost"
+              class="w-7"
+              @click="show = false"
+              icon="x"
+            />
           </div>
         </div>
         <div v-if="tabs.data">
diff --git a/frontend/src/components/Modals/ContactModal.vue b/frontend/src/components/Modals/ContactModal.vue
index d060d23d..94ae8350 100644
--- a/frontend/src/components/Modals/ContactModal.vue
+++ b/frontend/src/components/Modals/ContactModal.vue
@@ -13,17 +13,16 @@
               v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
+              :tooltip="__('Edit fields layout')"
+              :icon="EditIcon"
               @click="openQuickEntryModal"
-            >
-              <template #icon>
-                <EditIcon />
-              </template>
-            </Button>
-            <Button variant="ghost" class="w-7" @click="show = false">
-              <template #icon>
-                <FeatherIcon name="x" class="size-4" />
-              </template>
-            </Button>
+            />
+            <Button
+              variant="ghost"
+              class="w-7"
+              @click="show = false"
+              icon="x"
+            />
           </div>
         </div>
         <FieldLayout
@@ -90,12 +89,16 @@ const { document: _contact, triggerOnBeforeCreate } = useDocument('Contact')
 
 async function createContact() {
   if (_contact.doc.email_id) {
-    _contact.doc.email_ids = [{ email_id: _contact.doc.email_id, is_primary: 1 }]
+    _contact.doc.email_ids = [
+      { email_id: _contact.doc.email_id, is_primary: 1 },
+    ]
     delete _contact.doc.email_id
   }
 
   if (_contact.doc.mobile_no) {
-    _contact.doc.phone_nos = [{ phone: _contact.doc.mobile_no, is_primary_mobile_no: 1 }]
+    _contact.doc.phone_nos = [
+      { phone: _contact.doc.mobile_no, is_primary_mobile_no: 1 },
+    ]
     delete _contact.doc.mobile_no
   }
 
diff --git a/frontend/src/components/Modals/ConvertToDealModal.vue b/frontend/src/components/Modals/ConvertToDealModal.vue
index 427d688f..e4ab3e3c 100644
--- a/frontend/src/components/Modals/ConvertToDealModal.vue
+++ b/frontend/src/components/Modals/ConvertToDealModal.vue
@@ -23,12 +23,10 @@
           <Button
             v-if="isManager() && !isMobileView"
             variant="ghost"
+            :tooltip="__('Edit deal\'s mandatory fields layout')"
+            :icon="EditIcon"
             @click="openQuickEntryModal"
-          >
-            <template #icon>
-              <EditIcon class="h-4 w-4" />
-            </template>
-          </Button>
+          />
           <Button icon="x" variant="ghost" @click="show = false" />
         </div>
       </div>
diff --git a/frontend/src/components/Modals/CreateDocumentModal.vue b/frontend/src/components/Modals/CreateDocumentModal.vue
index 0a2933a7..464a9e96 100644
--- a/frontend/src/components/Modals/CreateDocumentModal.vue
+++ b/frontend/src/components/Modals/CreateDocumentModal.vue
@@ -13,17 +13,16 @@
               v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
+              :tooltip="__('Edit fields layout')"
+              :icon="EditIcon"
               @click="openQuickEntryModal"
-            >
-              <template #icon>
-                <EditIcon />
-              </template>
-            </Button>
-            <Button variant="ghost" class="w-7" @click="show = false">
-              <template #icon>
-                <FeatherIcon name="x" class="size-4" />
-              </template>
-            </Button>
+            />
+            <Button
+              variant="ghost"
+              class="w-7"
+              icon="x"
+              @click="show = false"
+            />
           </div>
         </div>
         <div v-if="tabs.data">
diff --git a/frontend/src/components/Modals/DealModal.vue b/frontend/src/components/Modals/DealModal.vue
index c9436e76..a1296782 100644
--- a/frontend/src/components/Modals/DealModal.vue
+++ b/frontend/src/components/Modals/DealModal.vue
@@ -13,17 +13,16 @@
               v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
+              :tooltip="__('Edit fields layout')"
+              :icon="EditIcon"
               @click="openQuickEntryModal"
-            >
-              <template #icon>
-                <EditIcon />
-              </template>
-            </Button>
-            <Button variant="ghost" class="w-7" @click="show = false">
-              <template #icon>
-                <FeatherIcon name="x" class="size-4" />
-              </template>
-            </Button>
+            />
+            <Button
+              variant="ghost"
+              class="w-7"
+              icon="x"
+              @click="show = false"
+            />
           </div>
         </div>
         <div>
diff --git a/frontend/src/components/Modals/LeadModal.vue b/frontend/src/components/Modals/LeadModal.vue
index 9eb6ce50..6f315aed 100644
--- a/frontend/src/components/Modals/LeadModal.vue
+++ b/frontend/src/components/Modals/LeadModal.vue
@@ -13,17 +13,16 @@
               v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
+              :tooltip="__('Edit fields layout')"
+              :icon="EditIcon"
               @click="openQuickEntryModal"
-            >
-              <template #icon>
-                <EditIcon />
-              </template>
-            </Button>
-            <Button variant="ghost" class="w-7" @click="show = false">
-              <template #icon>
-                <FeatherIcon name="x" class="size-4" />
-              </template>
-            </Button>
+            />
+            <Button
+              variant="ghost"
+              class="w-7"
+              @click="show = false"
+              icon="x"
+            />
           </div>
         </div>
         <div>
diff --git a/frontend/src/components/Modals/NoteModal.vue b/frontend/src/components/Modals/NoteModal.vue
index 68d6a070..2b1e92e9 100644
--- a/frontend/src/components/Modals/NoteModal.vue
+++ b/frontend/src/components/Modals/NoteModal.vue
@@ -1,41 +1,59 @@
 <template>
-  <Dialog v-model="show" :options="{
-    size: 'xl',
-    actions: [
-      {
-        label: editMode ? __('Update') : __('Create'),
-        variant: 'solid',
-        onClick: () => updateNote(),
-      },
-    ],
-  }">
+  <Dialog
+    v-model="show"
+    :options="{
+      size: 'xl',
+      actions: [
+        {
+          label: editMode ? __('Update') : __('Create'),
+          variant: 'solid',
+          onClick: () => updateNote(),
+        },
+      ],
+    }"
+  >
     <template #body-title>
       <div class="flex items-center gap-3">
         <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
           {{ editMode ? __('Edit Note') : __('Create Note') }}
         </h3>
-        <Button v-if="_note?.reference_docname" size="sm" :label="_note.reference_doctype == 'CRM Deal'
-          ? __('Open Deal')
-          : __('Open Lead')
-          " @click="redirect()">
-          <template #suffix>
-            <ArrowUpRightIcon class="w-4 h-4" />
-          </template>
-        </Button>
+        <Button
+          v-if="_note?.reference_docname"
+          size="sm"
+          :label="
+            _note.reference_doctype == 'CRM Deal'
+              ? __('Open Deal')
+              : __('Open Lead')
+          "
+          :iconRight="ArrowUpRightIcon"
+          @click="redirect()"
+        />
       </div>
     </template>
     <template #body-content>
       <div class="flex flex-col gap-4">
         <div>
-          <FormControl ref="title" :label="__('Title')" v-model="_note.title" :placeholder="__('Call with John Doe')"
-            required />
+          <FormControl
+            ref="title"
+            :label="__('Title')"
+            v-model="_note.title"
+            :placeholder="__('Call with John Doe')"
+            required
+          />
         </div>
         <div>
           <div class="mb-1.5 text-xs text-ink-gray-5">{{ __('Content') }}</div>
-          <TextEditor variant="outline" ref="content"
+          <TextEditor
+            variant="outline"
+            ref="content"
             editor-class="!prose-sm overflow-auto min-h-[180px] max-h-80 py-1.5 px-2 rounded border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors"
-            :bubbleMenu="true" :content="_note.content" @change="(val) => (_note.content = val)" :placeholder="__('Took a call with John Doe and discussed the new project.')
-              " />
+            :bubbleMenu="true"
+            :content="_note.content"
+            @change="(val) => (_note.content = val)"
+            :placeholder="
+              __('Took a call with John Doe and discussed the new project.')
+            "
+          />
         </div>
         <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
       </div>
@@ -92,21 +110,25 @@ async function updateNote() {
       emit('after', d)
     }
   } else {
-    let d = await call('frappe.client.insert', {
-      doc: {
-        doctype: 'FCRM Note',
-        title: _note.value.title,
-        content: _note.value.content,
-        reference_doctype: props.doctype,
-        reference_docname: props.doc || '',
+    let d = await call(
+      'frappe.client.insert',
+      {
+        doc: {
+          doctype: 'FCRM Note',
+          title: _note.value.title,
+          content: _note.value.content,
+          reference_doctype: props.doctype,
+          reference_docname: props.doc || '',
+        },
       },
-    }, {
-      onError: (err) => {
-        if (err.error.exc_type == 'MandatoryError') {
-          error.value = "Title is mandatory"
-        }
-      }
-    })
+      {
+        onError: (err) => {
+          if (err.error.exc_type == 'MandatoryError') {
+            error.value = 'Title is mandatory'
+          }
+        },
+      },
+    )
     if (d.name) {
       updateOnboardingStep('create_first_note')
       capture('note_created')
diff --git a/frontend/src/components/Modals/OrganizationModal.vue b/frontend/src/components/Modals/OrganizationModal.vue
index a8731a5d..37659bcf 100644
--- a/frontend/src/components/Modals/OrganizationModal.vue
+++ b/frontend/src/components/Modals/OrganizationModal.vue
@@ -13,17 +13,16 @@
               v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
+              :tooltip="__('Edit fields layout')"
+              :icon="EditIcon"
               @click="openQuickEntryModal"
-            >
-              <template #icon>
-                <EditIcon />
-              </template>
-            </Button>
-            <Button variant="ghost" class="w-7" @click="show = false">
-              <template #icon>
-                <FeatherIcon name="x" class="size-4" />
-              </template>
-            </Button>
+            />
+            <Button
+              variant="ghost"
+              class="w-7"
+              @click="show = false"
+              icon="x"
+            />
           </div>
         </div>
         <FieldLayout
diff --git a/frontend/src/components/Modals/TaskModal.vue b/frontend/src/components/Modals/TaskModal.vue
index 98c2cd71..6600e7e2 100644
--- a/frontend/src/components/Modals/TaskModal.vue
+++ b/frontend/src/components/Modals/TaskModal.vue
@@ -25,12 +25,9 @@
               ? __('Open Deal')
               : __('Open Lead')
           "
+          :iconRight="ArrowUpRightIcon"
           @click="redirect()"
-        >
-          <template #suffix>
-            <ArrowUpRightIcon class="w-4 h-4" />
-          </template>
-        </Button>
+        />
       </div>
     </template>
     <template #body-content>
diff --git a/frontend/src/components/Modals/ViewModal.vue b/frontend/src/components/Modals/ViewModal.vue
index a3ba26f7..481a3c94 100644
--- a/frontend/src/components/Modals/ViewModal.vue
+++ b/frontend/src/components/Modals/ViewModal.vue
@@ -7,17 +7,6 @@
         : duplicateMode
           ? __('Duplicate View')
           : __('Create View'),
-      actions: [
-        {
-          label: editMode
-            ? __('Save Changes')
-            : duplicateMode
-              ? __('Duplicate')
-              : __('Create'),
-          variant: 'solid',
-          onClick: () => (editMode ? update() : create()),
-        },
-      ],
     }"
   >
     <template #body-content>
@@ -42,6 +31,21 @@
         />
       </div>
     </template>
+    <template #actions>
+      <div class="flex justify-end">
+        <Button
+          variant="solid"
+          :label="
+            editMode
+              ? __('Save Changes')
+              : duplicateMode
+                ? __('Duplicate')
+                : __('Create')
+          "
+          @click="() => (editMode ? update() : create())"
+        />
+      </div>
+    </template>
   </Dialog>
 </template>
 
diff --git a/frontend/src/components/MultiActionButton.vue b/frontend/src/components/MultiActionButton.vue
index 1c77f353..ac191642 100644
--- a/frontend/src/components/MultiActionButton.vue
+++ b/frontend/src/components/MultiActionButton.vue
@@ -9,21 +9,9 @@
         $attrs.class,
         showDropdown ? 'rounded-br-none rounded-tr-none' : '',
       ]"
+      :iconLeft="activeButton.icon"
       @click="() => activeButton.onClick()"
-    >
-      <template #prefix>
-        <FeatherIcon
-          v-if="activeButton.icon && typeof activeButton.icon === 'string'"
-          :name="activeButton.icon"
-          class="h-4 w-4"
-        />
-        <component
-          v-else-if="activeButton.icon"
-          :is="activeButton.icon"
-          class="h-4 w-4"
-        />
-      </template>
-    </Button>
+    />
     <Dropdown
       v-if="showDropdown"
       :options="parsedOptions"
diff --git a/frontend/src/components/NestedPopover.vue b/frontend/src/components/NestedPopover.vue
deleted file mode 100644
index 48e5b3d5..00000000
--- a/frontend/src/components/NestedPopover.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <Popover v-slot="{ open }">
-    <PopoverButton
-      as="div"
-      ref="reference"
-      @click="updatePosition"
-      @focusin="updatePosition"
-      @keydown="updatePosition"
-      v-slot="{ open }"
-    >
-      <slot name="target" v-bind="{ open }" />
-    </PopoverButton>
-    <div v-show="open">
-      <PopoverPanel
-        v-slot="{ open, close }"
-        ref="popover"
-        static
-        class="z-[100]"
-      >
-        <slot name="body" v-bind="{ open, close }" />
-      </PopoverPanel>
-    </div>
-  </Popover>
-</template>
-
-<script setup>
-import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
-import { createPopper } from '@popperjs/core'
-import { nextTick, ref, onBeforeUnmount } from 'vue'
-
-const props = defineProps({
-  placement: {
-    type: String,
-    default: 'bottom-start',
-  },
-})
-
-const reference = ref(null)
-const popover = ref(null)
-
-let popper = ref(null)
-
-function setupPopper() {
-  if (!popper.value) {
-    popper.value = createPopper(reference.value.el, popover.value.el, {
-      placement: props.placement,
-    })
-  } else {
-    popper.value.update()
-  }
-}
-
-function updatePosition() {
-  nextTick(() => setupPopper())
-}
-
-onBeforeUnmount(() => {
-  popper.value?.destroy()
-})
-</script>
diff --git a/frontend/src/components/Notifications.vue b/frontend/src/components/Notifications.vue
index db3281f9..9d5bc14c 100644
--- a/frontend/src/components/Notifications.vue
+++ b/frontend/src/components/Notifications.vue
@@ -16,24 +16,18 @@
       >
         <div class="text-base font-medium">{{ __('Notifications') }}</div>
         <div class="flex gap-1">
-          <Tooltip :text="__('Mark all as read')">
-            <div>
-              <Button variant="ghost" @click="() => markAllAsRead()">
-                <template #icon>
-                  <MarkAsDoneIcon class="h-4 w-4" />
-                </template>
-              </Button>
-            </div>
-          </Tooltip>
-          <Tooltip :text="__('Close')">
-            <div>
-              <Button variant="ghost" @click="() => toggle()">
-                <template #icon>
-                  <FeatherIcon name="x" class="h-4 w-4" />
-                </template>
-              </Button>
-            </div>
-          </Tooltip>
+          <Button
+            :tooltip="__('Mark all as read')"
+            :icon="MarkAsDoneIcon"
+            variant="ghost"
+            @click="markAllAsRead"
+          />
+          <Button
+            :tooltip="__('Close')"
+            icon="x"
+            variant="ghost"
+            @click="() => toggle()"
+          />
         </div>
       </div>
       <div
@@ -100,7 +94,6 @@ import { globalStore } from '@/stores/global'
 import { timeAgo } from '@/utils'
 import { onClickOutside } from '@vueuse/core'
 import { capture } from '@/telemetry'
-import { Tooltip } from 'frappe-ui'
 import { ref, onMounted, onBeforeUnmount } from 'vue'
 
 const { $socket } = globalStore()
diff --git a/frontend/src/components/SLASection.vue b/frontend/src/components/SLASection.vue
index 5d486ab8..ff5b71f4 100644
--- a/frontend/src/components/SLASection.vue
+++ b/frontend/src/components/SLASection.vue
@@ -27,14 +27,10 @@
           :options="s.options"
         >
           <template #default="{ open }">
-            <Button :label="s.value">
-              <template #suffix>
-                <FeatherIcon
-                  :name="open ? 'chevron-up' : 'chevron-down'"
-                  class="h-4"
-                />
-              </template>
-            </Button>
+            <Button
+              :label="s.value"
+              :iconRight="open ? 'chevron-up' : 'chevron-down'"
+            />
           </template>
         </Dropdown>
       </div>
diff --git a/frontend/src/components/Settings/General/CurrencySettings.vue b/frontend/src/components/Settings/General/CurrencySettings.vue
index 69d6ec88..841d2d33 100644
--- a/frontend/src/components/Settings/General/CurrencySettings.vue
+++ b/frontend/src/components/Settings/General/CurrencySettings.vue
@@ -131,7 +131,7 @@
   </div>
 </template>
 <script setup>
-import { ErrorMessage } from 'frappe-ui'
+import { ErrorMessage, toast } from 'frappe-ui'
 import { getSettings } from '@/stores/settings'
 import { globalStore } from '@/stores/global'
 import { showSettings } from '@/composables/settings'
diff --git a/frontend/src/components/Settings/InviteUserPage.vue b/frontend/src/components/Settings/InviteUserPage.vue
index 6402f416..3881cb60 100644
--- a/frontend/src/components/Settings/InviteUserPage.vue
+++ b/frontend/src/components/Settings/InviteUserPage.vue
@@ -80,19 +80,16 @@
                 </span>
               </div>
               <div>
-                <Tooltip text="Delete Invitation">
-                  <div>
-                    <Button
-                      icon="x"
-                      variant="ghost"
-                      :loading="
-                        pendingInvitations.delete.loading &&
-                        pendingInvitations.delete.params.name === user.name
-                      "
-                      @click="pendingInvitations.delete.submit(user.name)"
-                    />
-                  </div>
-                </Tooltip>
+                <Button
+                  :tooltip="__('Delete invitation')"
+                  icon="x"
+                  variant="ghost"
+                  :loading="
+                    pendingInvitations.delete.loading &&
+                    pendingInvitations.delete.params.name === user.name
+                  "
+                  @click="pendingInvitations.delete.submit(user.name)"
+                />
               </div>
             </li>
           </ul>
diff --git a/frontend/src/components/SidePanelLayout.vue b/frontend/src/components/SidePanelLayout.vue
index a209c1da..5e40004d 100644
--- a/frontend/src/components/SidePanelLayout.vue
+++ b/frontend/src/components/SidePanelLayout.vue
@@ -20,12 +20,9 @@
                   v-if="section.showEditButton"
                   variant="ghost"
                   class="w-7 mr-2"
+                  :icon="EditIcon"
                   @click="showSidePanelModal = true"
-                >
-                  <template #icon>
-                    <EditIcon />
-                  </template>
-                </Button>
+                />
               </slot>
             </template>
             <slot v-bind="{ section }">
@@ -83,11 +80,12 @@
                           </Tooltip>
                         </div>
                         <div v-else-if="field.fieldtype === 'Dropdown'">
-                          <NestedPopover>
-                            <template #target="{ open }">
+                          <Popover>
+                            <template #target="{ isOpen, togglePopover }">
                               <Button
                                 :label="doc[field.fieldname]"
                                 class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-surface-gray-2 px-2 py-1.5 text-base text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:bg-surface-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3"
+                                @click="togglePopover"
                               >
                                 <div
                                   v-if="doc[field.fieldname]"
@@ -103,7 +101,9 @@
                                 </div>
                                 <template #suffix>
                                   <FeatherIcon
-                                    :name="open ? 'chevron-up' : 'chevron-down'"
+                                    :name="
+                                      isOpen ? 'chevron-up' : 'chevron-down'
+                                    "
                                     class="h-4 text-ink-gray-5"
                                   />
                                 </template>
@@ -135,16 +135,13 @@
                                     variant="ghost"
                                     class="w-full !justify-start"
                                     :label="__('Create New')"
+                                    iconLeft="plus"
                                     @click="field.create()"
-                                  >
-                                    <template #prefix>
-                                      <FeatherIcon name="plus" class="h-4" />
-                                    </template>
-                                  </Button>
+                                  />
                                 </div>
                               </div>
                             </template>
-                          </NestedPopover>
+                          </Popover>
                         </div>
                         <FormControl
                           v-else-if="field.fieldtype == 'Check'"
@@ -369,7 +366,6 @@
 import Password from '@/components/Controls/Password.vue'
 import FormattedInput from '@/components/Controls/FormattedInput.vue'
 import Section from '@/components/Section.vue'
-import NestedPopover from '@/components/NestedPopover.vue'
 import DropdownItem from '@/components/DropdownItem.vue'
 import FadedScrollableDiv from '@/components/FadedScrollableDiv.vue'
 import ArrowUpRightIcon from '@/components/Icons/ArrowUpRightIcon.vue'
@@ -382,7 +378,7 @@ import { usersStore } from '@/stores/users'
 import { isMobileView } from '@/composables/settings'
 import { getFormat, evaluateDependsOnValue } from '@/utils'
 import { flt } from '@/utils/numberFormat.js'
-import { Tooltip, DateTimePicker, DatePicker } from 'frappe-ui'
+import { Tooltip, DateTimePicker, DatePicker, Popover } from 'frappe-ui'
 import { useDocument } from '@/data/document'
 import { ref, computed, getCurrentInstance } from 'vue'
 
diff --git a/frontend/src/components/SidePanelLayoutEditor.vue b/frontend/src/components/SidePanelLayoutEditor.vue
index 09493c61..c8edc217 100644
--- a/frontend/src/components/SidePanelLayoutEditor.vue
+++ b/frontend/src/components/SidePanelLayoutEditor.vue
@@ -94,13 +94,10 @@
                 <Button
                   class="w-full h-8 mt-1.5 !bg-surface-gray-1"
                   variant="outline"
-                  @click="togglePopover()"
                   :label="__('Add Field')"
-                >
-                  <template #prefix>
-                    <FeatherIcon name="plus" class="h-4" />
-                  </template>
-                </Button>
+                  iconLeft="plus"
+                  @click="togglePopover()"
+                />
               </template>
               <template #item-label="{ option }">
                 <div class="flex flex-col gap-1 text-ink-gray-9">
@@ -128,6 +125,7 @@
         class="w-full h-8"
         variant="subtle"
         :label="__('Add Section')"
+        iconLeft="plus"
         @click="
           sections.push({
             label: __('New Section'),
@@ -136,11 +134,7 @@
             columns: [{ name: 'column_' + getRandom(), fields: [] }],
           })
         "
-      >
-        <template #prefix>
-          <FeatherIcon name="plus" class="h-4" />
-        </template>
-      </Button>
+      />
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/SortBy.vue b/frontend/src/components/SortBy.vue
index 4e7e7fa4..09c3f630 100644
--- a/frontend/src/components/SortBy.vue
+++ b/frontend/src/components/SortBy.vue
@@ -17,13 +17,15 @@
       </Button>
     </template>
   </Autocomplete>
-  <NestedPopover v-else>
-    <template #target="{ open }">
-      <Button v-if="sortValues.size > 1" :label="__('Sort')">
-        <template v-if="hideLabel">
-          <SortIcon class="h-4" />
-        </template>
-        <template v-if="!hideLabel" #prefix><SortIcon class="h-4" /></template>
+  <Popover placement="bottom-end" v-else>
+    <template #target="{ isOpen, togglePopover }">
+      <Button
+        v-if="sortValues.size > 1"
+        :label="__('Sort')"
+        :icon="hideLabel && SortIcon"
+        :iconLeft="!hideLabel && SortIcon"
+        @click="togglePopover"
+      >
         <template v-if="sortValues?.size" #suffix>
           <div
             class="flex h-5 w-5 items-center justify-center rounded-[5px] bg-surface-white pt-px text-xs font-medium text-ink-gray-8 shadow-sm"
@@ -36,6 +38,11 @@
         <Button
           v-if="sortValues.size"
           class="rounded-r-none border-r"
+          :icon="
+            Array.from(sortValues)[0].direction == 'asc'
+              ? AscendingIcon
+              : DesendingIcon
+          "
           @click.stop="
             () => {
               Array.from(sortValues)[0].direction =
@@ -43,28 +50,17 @@
               apply()
             }
           "
-        >
-          <AscendingIcon
-            v-if="Array.from(sortValues)[0].direction == 'asc'"
-            class="h-4"
-          />
-          <DesendingIcon v-else class="h-4" />
-        </Button>
+        />
         <Button
           :label="getSortLabel()"
-          class="shrink-0"
+          class="shrink-0 [&_svg]:text-ink-gray-5"
+          :iconLeft="!hideLabel && !sortValues?.size && SortIcon"
+          :iconRight="
+            sortValues?.size && (isOpen ? 'chevron-up' : 'chevron-down')
+          "
           :class="sortValues.size ? 'rounded-l-none' : ''"
-        >
-          <template v-if="!hideLabel && !sortValues?.size" #prefix>
-            <SortIcon class="h-4" />
-          </template>
-          <template v-if="sortValues?.size" #suffix>
-            <FeatherIcon
-              :name="open ? 'chevron-up' : 'chevron-down'"
-              class="h-4 text-ink-gray-5"
-            />
-          </template>
-        </Button>
+          @click.stop="togglePopover"
+        />
       </div>
     </template>
     <template #body="{ close }">
@@ -85,42 +81,42 @@
               <div class="handle flex h-7 w-7 items-center justify-center">
                 <DragIcon class="h-4 w-4 cursor-grab text-ink-gray-5" />
               </div>
-              <div class="flex flex-1 [&>_div]:w-full">
+              <div class="flex flex-1">
                 <Button
                   size="md"
                   class="rounded-r-none border-r"
+                  :icon="
+                    sort.direction == 'asc' ? AscendingIcon : DesendingIcon
+                  "
                   @click="
                     () => {
                       sort.direction = sort.direction == 'asc' ? 'desc' : 'asc'
                       apply()
                     }
                   "
-                >
-                  <AscendingIcon v-if="sort.direction == 'asc'" class="h-4" />
-                  <DesendingIcon v-else class="h-4" />
-                </Button>
+                />
                 <Autocomplete
+                  class="[&>_div]:w-full"
                   :value="sort.fieldname"
                   :options="sortOptions.data"
                   @change="(e) => updateSort(e, i)"
                   :placeholder="__('First Name')"
                 >
                   <template
-                    #target="{ togglePopover, selectedValue, displayValue }"
+                    #target="{
+                      open,
+                      togglePopover,
+                      selectedValue,
+                      displayValue,
+                    }"
                   >
                     <Button
                       class="flex w-full items-center justify-between rounded-l-none !text-ink-gray-5"
                       size="md"
+                      :label="displayValue(selectedValue)"
+                      :iconRight="open ? 'chevron-down' : 'chevron-up'"
                       @click="togglePopover()"
-                    >
-                      {{ displayValue(selectedValue) }}
-                      <template #suffix>
-                        <FeatherIcon
-                          name="chevron-down"
-                          class="h-4 text-ink-gray-5"
-                        />
-                      </template>
-                    </Button>
+                    />
                   </template>
                 </Autocomplete>
               </div>
@@ -143,14 +139,11 @@
               <template #target="{ togglePopover }">
                 <Button
                   class="!text-ink-gray-5"
-                  variant="ghost"
-                  @click="togglePopover()"
                   :label="__('Add Sort')"
-                >
-                  <template #prefix>
-                    <FeatherIcon name="plus" class="h-4" />
-                  </template>
-                </Button>
+                  variant="ghost"
+                  iconLeft="plus"
+                  @click="togglePopover()"
+                />
               </template>
             </Autocomplete>
             <Button
@@ -164,18 +157,17 @@
         </div>
       </div>
     </template>
-  </NestedPopover>
+  </Popover>
 </template>
 
 <script setup>
 import AscendingIcon from '@/components/Icons/AscendingIcon.vue'
 import DesendingIcon from '@/components/Icons/DesendingIcon.vue'
-import NestedPopover from '@/components/NestedPopover.vue'
 import SortIcon from '@/components/Icons/SortIcon.vue'
 import DragIcon from '@/components/Icons/DragIcon.vue'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import { useSortable } from '@vueuse/integrations/useSortable'
-import { createResource } from 'frappe-ui'
+import { createResource, Popover } from 'frappe-ui'
 import { computed, nextTick, onMounted } from 'vue'
 
 const props = defineProps({
diff --git a/frontend/src/components/Telephony/ExotelCallUI.vue b/frontend/src/components/Telephony/ExotelCallUI.vue
index c1a3d503..a06e36d3 100644
--- a/frontend/src/components/Telephony/ExotelCallUI.vue
+++ b/frontend/src/components/Telephony/ExotelCallUI.vue
@@ -123,13 +123,11 @@
         <div class="flex">
           <Button
             @click="toggleCallPopup"
-            class="bg-surface-gray-7 text-ink-white hover:bg-surface-gray-6 shrink-0"
+            class="bg-surface-gray-7 text-ink-white hover:bg-surface-gray-6 shrink-0 cursor-pointer"
+            :tooltip="__('Minimize')"
+            :icon="MinimizeIcon"
             size="md"
-          >
-            <template #icon>
-              <MinimizeIcon class="h-4 w-4 cursor-pointer" />
-            </template>
-          </Button>
+          />
           <Button
             v-if="callStatus == 'Call ended' || callStatus == 'No answer'"
             @click="closeCallPopup"
@@ -182,33 +180,26 @@
         <div class="flex gap-2">
           <Button
             class="bg-surface-gray-6 text-ink-white hover:bg-surface-gray-5"
+            :tooltip="__('Add a note')"
             size="md"
+            :icon="NoteIcon"
             @click="showNoteWindow"
-          >
-            <template #icon>
-              <NoteIcon class="w-4 h-4" />
-            </template>
-          </Button>
+          />
           <Button
             class="bg-surface-gray-6 text-ink-white hover:bg-surface-gray-5"
             size="md"
+            :tooltip="__('Add a task')"
+            :icon="TaskIcon"
             @click="showTaskWindow"
-          >
-            <template #icon>
-              <TaskIcon class="w-4 h-4" />
-            </template>
-          </Button>
+          />
           <Button
             v-if="contact.deal || contact.lead"
             class="bg-surface-gray-6 text-ink-white hover:bg-surface-gray-5"
             size="md"
+            :iconRight="ArrowUpRightIcon"
             :label="contact.deal ? __('Deal') : __('Lead')"
             @click="openDealOrLead"
-          >
-            <template #suffix>
-              <ArrowUpRightIcon class="w-4 h-4" />
-            </template>
-          </Button>
+          />
         </div>
 
         <Button
diff --git a/frontend/src/components/Telephony/TwilioCallUI.vue b/frontend/src/components/Telephony/TwilioCallUI.vue
index 7738b1d5..7ab67cd0 100644
--- a/frontend/src/components/Telephony/TwilioCallUI.vue
+++ b/frontend/src/components/Telephony/TwilioCallUI.vue
@@ -52,22 +52,18 @@
             <DialpadIcon class="cursor-pointer rounded-full" />
           </template>
         </Button> -->
-          <Button class="rounded-full">
-            <template #icon>
-              <NoteIcon
-                class="h-4 w-4 cursor-pointer rounded-full text-ink-gray-9"
-                @click="showNoteModal = true"
-              />
-            </template>
-          </Button>
-          <Button class="rounded-full bg-surface-red-5 hover:bg-surface-red-6">
-            <template #icon>
-              <PhoneIcon
-                class="h-4 w-4 rotate-[135deg] fill-white text-ink-white"
-                @click="hangUpCall"
-              />
-            </template>
-          </Button>
+          <Button
+            class="cursor-pointer rounded-full"
+            :tooltip="__('Add a note')"
+            :icon="NoteIcon"
+            @click="showNoteModal = true"
+          />
+          <Button
+            class="rounded-full bg-surface-red-5 hover:bg-surface-red-6 rotate-[135deg] text-ink-white"
+            :tooltip="__('Hang up')"
+            :icon="PhoneIcon"
+            @click="hangUpCall"
+          />
         </div>
         <div v-else-if="calling || callStatus == 'initiating'">
           <Button
@@ -76,13 +72,10 @@
             theme="red"
             :label="__('Cancel')"
             @click="cancelCall"
-            class="rounded-lg"
+            class="rounded-lg rotate-[135deg] text-ink-white"
             :disabled="callStatus == 'initiating'"
-          >
-            <template #prefix>
-              <PhoneIcon class="h-4 w-4 rotate-[135deg] fill-white" />
-            </template>
-          </Button>
+            :iconLeft="PhoneIcon"
+          />
         </div>
         <div v-else class="flex gap-2">
           <Button
@@ -90,25 +83,19 @@
             variant="solid"
             theme="green"
             :label="__('Accept')"
-            class="rounded-lg"
+            class="rounded-lg text-ink-white"
+            :iconLeft="PhoneIcon"
             @click="acceptIncomingCall"
-          >
-            <template #prefix>
-              <PhoneIcon class="h-4 w-4 fill-white" />
-            </template>
-          </Button>
+          />
           <Button
             size="md"
             variant="solid"
             theme="red"
             :label="__('Reject')"
-            class="rounded-lg"
+            class="rounded-lg rotate-[135deg] text-ink-white"
+            :iconLeft="PhoneIcon"
             @click="rejectIncomingCall"
-          >
-            <template #prefix>
-              <PhoneIcon class="h-4 w-4 rotate-[135deg] fill-white" />
-            </template>
-          </Button>
+          />
         </div>
       </div>
     </div>
@@ -134,14 +121,13 @@
       <div class="my-1 min-w-[40px] text-center">
         {{ counterUp?.updatedTime }}
       </div>
-      <Button variant="solid" theme="red" class="!h-6 !w-6 rounded-full">
-        <template #icon>
-          <PhoneIcon
-            class="h-4 w-4 rotate-[135deg] fill-white"
-            @click.stop="hangUpCall"
-          />
-        </template>
-      </Button>
+      <Button
+        variant="solid"
+        theme="red"
+        class="!h-6 !w-6 rounded-full rotate-[135deg] text-ink-white"
+        :icon="PhoneIcon"
+        @click.stop="hangUpCall"
+      />
     </div>
     <div v-else-if="calling" class="flex items-center gap-3">
       <div class="my-1">
@@ -150,35 +136,28 @@
       <Button
         variant="solid"
         theme="red"
-        class="!h-6 !w-6 rounded-full"
+        class="!h-6 !w-6 rounded-full rotate-[135deg] text-ink-white"
+        :icon="PhoneIcon"
         @click.stop="cancelCall"
-      >
-        <template #icon>
-          <PhoneIcon class="h-4 w-4 rotate-[135deg] fill-white" />
-        </template>
-      </Button>
+      />
     </div>
     <div v-else class="flex items-center gap-2">
       <Button
         variant="solid"
         theme="green"
-        class="pulse relative !h-6 !w-6 rounded-full"
+        class="pulse relative !h-6 !w-6 rounded-full animate-pulse text-ink-white"
+        :tooltip="__('Accept call')"
+        :icon="PhoneIcon"
         @click.stop="acceptIncomingCall"
-      >
-        <template #icon>
-          <PhoneIcon class="h-4 w-4 animate-pulse fill-white" />
-        </template>
-      </Button>
+      />
       <Button
         variant="solid"
         theme="red"
-        class="!h-6 !w-6 rounded-full"
+        class="!h-6 !w-6 rounded-full rotate-[135deg] text-ink-white"
+        :tooltip="__('Reject call')"
+        :icon="PhoneIcon"
         @click.stop="rejectIncomingCall"
-      >
-        <template #icon>
-          <PhoneIcon class="h-4 w-4 rotate-[135deg] fill-white" />
-        </template>
-      </Button>
+      />
     </div>
   </div>
   <NoteModal
diff --git a/frontend/src/components/ViewBreadcrumbs.vue b/frontend/src/components/ViewBreadcrumbs.vue
index d1b59fbf..ecb67022 100644
--- a/frontend/src/components/ViewBreadcrumbs.vue
+++ b/frontend/src/components/ViewBreadcrumbs.vue
@@ -18,28 +18,25 @@
     >
       /
     </span>
-    <Dropdown v-if="viewControls" :options="viewControls.viewsDropdownOptions">
+    <Dropdown
+      v-if="viewControls"
+      :options="viewControls.viewsDropdownOptions"
+    >
       <template #default="{ open }">
         <Button
           variant="ghost"
           class="text-lg font-medium text-nowrap"
           :label="__(viewControls.currentView.label)"
+          :iconRight="open ? 'chevron-up' : 'chevron-down'"
         >
           <template #prefix>
             <Icon :icon="viewControls.currentView.icon" class="h-4" />
           </template>
-          <template #suffix>
-            <FeatherIcon
-              :name="open ? 'chevron-up' : 'chevron-down'"
-              class="h-4 text-ink-gray-8"
-            />
-          </template>
         </Button>
       </template>
-      <template #item="{ item, active }">
+      <template #item="{ item, close }">
         <button
-          class="group flex text-ink-gray-6 gap-4 h-7 w-full justify-between items-center rounded px-2 text-base"
-          :class="{ 'bg-surface-gray-3': active }"
+          class="group flex text-ink-gray-6 gap-4 h-7 w-full justify-between items-center rounded px-2 text-base hover:bg-surface-gray-3"
           @click="item.onClick"
         >
           <div class="flex items-center">
@@ -63,16 +60,15 @@
             class="flex flex-row-reverse gap-2 items-center min-w-11"
           >
             <Dropdown
-              :class="active ? 'block' : 'hidden'"
               placement="right-start"
-              :options="viewControls.viewActions(item)"
+              :options="viewControls.viewActions(item, close)"
             >
-              <template #default="{ togglePopover }">
+              <template #default>
                 <Button
                   variant="ghost"
-                  class="!size-5"
+                  class="!size-5 hidden group-hover:block"
                   icon="more-horizontal"
-                  @click.stop="togglePopover()"
+                  @click.stop
                 />
               </template>
             </Dropdown>
@@ -89,7 +85,7 @@
 </template>
 <script setup>
 import Icon from '@/components/Icon.vue'
-import Dropdown from '@/components/frappe-ui/Dropdown.vue'
+import { Dropdown } from 'frappe-ui'
 
 const props = defineProps({
   routeName: {
diff --git a/frontend/src/components/ViewControls.vue b/frontend/src/components/ViewControls.vue
index 6ac57f35..36098abf 100644
--- a/frontend/src/components/ViewControls.vue
+++ b/frontend/src/components/ViewControls.vue
@@ -22,11 +22,12 @@
         </div>
 
         <div class="flex gap-2">
-          <Button :label="__('Refresh')" @click="reload()" :loading="isLoading">
-            <template #icon>
-              <RefreshIcon class="h-4 w-4" />
-            </template>
-          </Button>
+          <Button
+            :tooltip="__('Refresh')"
+            :icon="RefreshIcon"
+            :loading="isLoading"
+            @click="reload()"
+          />
           <SortBy
             v-if="route.params.viewType !== 'kanban'"
             v-model="list"
@@ -100,13 +101,10 @@
           <Button
             class="whitespace-nowrap mr-2"
             variant="ghost"
-            @click="togglePopover()"
             :label="__('Add filter')"
-          >
-            <template #prefix>
-              <FeatherIcon name="plus" class="h-4" />
-            </template>
-          </Button>
+            iconLeft="plus"
+            @click="togglePopover()"
+          />
         </template>
         <template #item-label="{ option }">
           <Tooltip :text="option.value" :hover-delay="1">
@@ -124,11 +122,7 @@
         :loading="updateQuickFilters.loading"
         @click="saveQuickFilters"
       />
-      <Button @click="customizeQuickFilter = false">
-        <template #icon>
-          <FeatherIcon name="x" class="h-4 w-4" />
-        </template>
-      </Button>
+      <Button icon="x" @click="customizeQuickFilter = false" />
     </div>
   </div>
   <div v-else class="flex items-center justify-between gap-2 px-5 py-4">
@@ -157,11 +151,12 @@
         <Button :label="__('Save Changes')" @click="saveView" />
       </div>
       <div class="flex items-center gap-2">
-        <Button :label="__('Refresh')" @click="reload()" :loading="isLoading">
-          <template #icon>
-            <RefreshIcon class="h-4 w-4" />
-          </template>
-        </Button>
+        <Button
+          :tooltip="__('Refresh')"
+          :icon="RefreshIcon"
+          :loading="isLoading"
+          @click="reload()"
+        />
         <GroupBy
           v-if="route.params.viewType === 'group_by'"
           v-model="list"
@@ -194,6 +189,7 @@
         />
         <Dropdown
           v-if="route.params.viewType !== 'kanban' || isManager()"
+          placement="right"
           :options="[
             {
               group: __('Options'),
@@ -218,7 +214,7 @@
           ]"
         >
           <template #default>
-            <Button icon="more-horizontal" />
+            <Button :tooltip="__('More Options')" icon="more-horizontal" />
           </template>
         </Dropdown>
       </div>
@@ -1088,7 +1084,7 @@ function updatePageLength(value, loadMore = false) {
 }
 
 // View Actions
-const viewActions = (view) => {
+const viewActions = (view, close) => {
   let isStandard = typeof view.name === 'string'
   let _view = getView(view.name)
 
@@ -1112,7 +1108,7 @@ const viewActions = (view) => {
         {
           label: __('Duplicate'),
           icon: () => h(DuplicateIcon, { class: 'h-4 w-4' }),
-          onClick: () => duplicateView(_view),
+          onClick: () => duplicateView(_view, close),
         },
       ],
     },
@@ -1130,7 +1126,7 @@ const viewActions = (view) => {
     actions[0].items.push({
       label: __('Edit'),
       icon: () => h(EditIcon, { class: 'h-4 w-4' }),
-      onClick: () => editView(_view),
+      onClick: () => editView(_view, close),
     })
 
     if (!_view.public) {
@@ -1213,17 +1209,19 @@ function setAsDefault(v) {
   })
 }
 
-function duplicateView(v) {
+function duplicateView(v, close) {
   v.label = v.label + __(' (New)')
   viewModalObj.value = v
   viewModalObj.value.mode = 'duplicate'
   showViewModal.value = true
+  close()
 }
 
-function editView(v) {
+function editView(v, close) {
   viewModalObj.value = v
   viewModalObj.value.mode = 'edit'
   showViewModal.value = true
+  close()
 }
 
 function publicView(v) {
diff --git a/frontend/src/pages/CallLogs.vue b/frontend/src/pages/CallLogs.vue
index 2f1d6ce6..ec683f3d 100644
--- a/frontend/src/pages/CallLogs.vue
+++ b/frontend/src/pages/CallLogs.vue
@@ -8,9 +8,12 @@
         v-if="callLogsListView?.customListActions"
         :actions="callLogsListView.customListActions"
       />
-      <Button variant="solid" :label="__('Create')" @click="createCallLog">
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      <Button
+        variant="solid"
+        :label="__('Create')"
+        iconLeft="plus"
+        @click="createCallLog"
+      />
     </template>
   </LayoutHeader>
   <ViewControls
diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 27c9a998..00669e60 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -93,17 +93,14 @@
                   v-if="callEnabled && contact.doc.mobile_no"
                   :label="__('Make Call')"
                   size="sm"
+                  :iconLeft="PhoneIcon"
                   @click="callEnabled && makeCall(contact.doc.mobile_no)"
-                >
-                  <template #prefix>
-                    <PhoneIcon class="h-4 w-4" />
-                  </template>
-                </Button>
+                />
                 <Button
                   :label="__('Delete')"
                   theme="red"
                   size="sm"
-                  icon-left="trash-2"
+                  iconLeft="trash-2"
                   @click="deleteContact()"
                 />
               </div>
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index 0044851e..2e758a0d 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -11,10 +11,9 @@
       <Button
         variant="solid"
         :label="__('Create')"
+        iconLeft="plus"
         @click="showContactModal = true"
-      >
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      />
     </template>
   </LayoutHeader>
   <ViewControls
@@ -57,9 +56,11 @@
     >
       <ContactsIcon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Contacts')]) }}</span>
-      <Button :label="__('Create')" @click="showContactModal = true">
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      <Button
+        :label="__('Create')"
+        iconLeft="plus"
+        @click="showContactModal = true"
+      />
     </div>
   </div>
   <ContactModal
diff --git a/frontend/src/pages/Dashboard.vue b/frontend/src/pages/Dashboard.vue
index ecaea290..bec91e92 100644
--- a/frontend/src/pages/Dashboard.vue
+++ b/frontend/src/pages/Dashboard.vue
@@ -8,36 +8,27 @@
         <Button
           v-if="!editing"
           :label="__('Refresh')"
+          :iconLeft="LucideRefreshCcw"
           @click="dashboardItems.reload"
-        >
-          <template #prefix>
-            <LucideRefreshCcw class="size-4" />
-          </template>
-        </Button>
+        />
         <Button
           v-if="!editing && isAdmin()"
           :label="__('Edit')"
+          :iconLeft="LucidePenLine"
           @click="enableEditing"
-        >
-          <template #prefix>
-            <LucidePenLine class="size-4" />
-          </template>
-        </Button>
+        />
         <Button
           v-if="editing"
           :label="__('Chart')"
-          icon-left="plus"
+          iconLeft="plus"
           @click="showAddChartModal = true"
         />
         <Button
           v-if="editing && isAdmin()"
           :label="__('Reset to default')"
+          :iconLeft="LucideUndo2"
           @click="resetToDefault"
-        >
-          <template #prefix>
-            <LucideUndo2 class="size-4" />
-          </template>
-        </Button>
+        />
         <Button v-if="editing" :label="__('Cancel')" @click="cancel" />
         <Button
           v-if="editing"
@@ -65,11 +56,7 @@
           iconRight: 'chevron-down',
           iconLeft: 'calendar',
         }"
-      >
-        <template #prefix>
-          <LucideCalendar class="size-4 text-ink-gray-5 mr-2" />
-        </template>
-      </Dropdown>
+      />
       <DateRangePicker
         v-else
         class="!w-48"
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 14977a2a..c5f3f7ac 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -18,26 +18,19 @@
       />
       <AssignTo v-model="assignees.data" doctype="CRM Deal" :docname="dealId" />
       <Dropdown
-        v-if="doc"
-        :options="
-          statusOptions(
-            'deal',
-            document.statuses?.length ? document.statuses : document._statuses,
-            triggerStatusChange,
-          )
-        "
+        v-if="doc && document.statuses"
+        :options="statuses"
+        placement="right"
       >
         <template #default="{ open }">
-          <Button v-if="doc.status" :label="doc.status">
+          <Button
+            v-if="doc.status"
+            :label="doc.status"
+            :iconRight="open ? 'chevron-up' : 'chevron-down'"
+          >
             <template #prefix>
               <IndicatorIcon :class="getDealStatus(doc.status).color" />
             </template>
-            <template #suffix>
-              <FeatherIcon
-                :name="open ? 'chevron-up' : 'chevron-down'"
-                class="h-4"
-              />
-            </template>
           </Button>
         </template>
       </Dropdown>
@@ -83,54 +76,44 @@
             </div>
           </Tooltip>
           <div class="flex gap-1.5">
-            <Tooltip v-if="callEnabled" :text="__('Make a call')">
-              <div>
-                <Button @click="triggerCall">
-                  <template #icon><PhoneIcon /></template>
-                </Button>
-              </div>
-            </Tooltip>
-            <Tooltip :text="__('Send an email')">
-              <div>
-                <Button
-                  @click="
-                    doc.email ? openEmailBox() : toast.error(__('No email set'))
-                  "
-                >
-                  <template #icon><Email2Icon /></template>
-                </Button>
-              </div>
-            </Tooltip>
-            <Tooltip :text="__('Go to website')">
-              <div>
-                <Button
-                  @click="
-                    doc.website
-                      ? openWebsite(doc.website)
-                      : toast.error(__('No website set'))
-                  "
-                >
-                  <template #icon><LinkIcon /></template>
-                </Button>
-              </div>
-            </Tooltip>
-            <Tooltip :text="__('Attach a file')">
-              <div>
-                <Button @click="showFilesUploader = true">
-                  <template #icon><AttachmentIcon /></template>
-                </Button>
-              </div>
-            </Tooltip>
-            <Tooltip :text="__('Delete')">
-              <div>
-                <Button
-                  @click="deleteDeal"
-                  variant="subtle"
-                  icon="trash-2"
-                  theme="red"
-                />
-              </div>
-            </Tooltip>
+            <Button
+              v-if="callEnabled"
+              :tooltip="__('Make a call')"
+              :icon="PhoneIcon"
+              @click="triggerCall"
+            />
+
+            <Button
+              :tooltip="__('Send an email')"
+              :icon="Email2Icon"
+              @click="
+                doc.email ? openEmailBox() : toast.error(__('No email set'))
+              "
+            />
+
+            <Button
+              :tooltip="__('Go to website')"
+              :icon="LinkIcon"
+              @click="
+                doc.website
+                  ? openWebsite(doc.website)
+                  : toast.error(__('No website set'))
+              "
+            />
+
+            <Button
+              :tooltip="__('Attach a file')"
+              :icon="AttachmentIcon"
+              @click="showFilesUploader = true"
+            />
+
+            <Button
+              :tooltip="__('Delete')"
+              variant="subtle"
+              icon="trash-2"
+              theme="red"
+              @click="deleteDeal"
+            />
           </div>
         </div>
       </div>
@@ -233,26 +216,22 @@
                           </Dropdown>
                           <Button
                             variant="ghost"
+                            :tooltip="__('View contact')"
+                            :icon="ArrowUpRightIcon"
                             @click="
                               router.push({
                                 name: 'Contact',
                                 params: { contactId: contact.name },
                               })
                             "
-                          >
-                            <template #icon>
-                              <ArrowUpRightIcon class="h-4 w-4" />
-                            </template>
-                          </Button>
-                          <Button variant="ghost" @click="toggle()">
-                            <template #icon>
-                              <FeatherIcon
-                                name="chevron-right"
-                                class="h-4 w-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
-                                :class="{ 'rotate-90': opened }"
-                              />
-                            </template>
-                          </Button>
+                          />
+                          <Button
+                            variant="ghost"
+                            class="transition-all duration-300 ease-in-out"
+                            :class="{ 'rotate-90': opened }"
+                            icon="chevron-right"
+                            @click="toggle()"
+                          />
                         </div>
                       </div>
                     </template>
@@ -526,6 +505,13 @@ const title = computed(() => {
   return doc.value?.[t] || props.dealId
 })
 
+const statuses = computed(() => {
+  let customStatuses = document.statuses?.length
+    ? document.statuses
+    : document._statuses || []
+  return statusOptions('deal', customStatuses, triggerStatusChange)
+})
+
 usePageMeta(() => {
   return {
     title: title.value,
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index e7ee7955..17abec8b 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -11,10 +11,9 @@
       <Button
         variant="solid"
         :label="__('Create')"
+        iconLeft="plus"
         @click="showDealModal = true"
-      >
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      />
     </template>
   </LayoutHeader>
   <ViewControls
@@ -233,9 +232,11 @@
     >
       <DealsIcon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Deals')]) }}</span>
-      <Button :label="__('Create')" @click="showDealModal = true">
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      <Button
+        :label="__('Create')"
+        iconLeft="plus"
+        @click="showDealModal = true"
+      />
     </div>
   </div>
   <DealModal
diff --git a/frontend/src/pages/InvalidPage.vue b/frontend/src/pages/InvalidPage.vue
index 875cec2d..29096428 100644
--- a/frontend/src/pages/InvalidPage.vue
+++ b/frontend/src/pages/InvalidPage.vue
@@ -3,11 +3,12 @@
     class="grid h-full place-items-center px-4 py-20 text-center text-lg text-ink-gray-5"
   >
     <div class="space-y-2">
-      <div>Invalid page or not permitted to access</div>
-      <Button :route="{ name: 'Leads' }">
-        <template #prefix><LeadsIcon class="w-4" /></template>
-        Leads
-      </Button>
+      <div>{{ __('Invalid page or not permitted to access') }}</div>
+      <Button
+        :route="{ name: 'Leads' }"
+        :label="__('Leads')"
+        :iconLeft="LeadsIcon"
+      />
     </div>
   </div>
 </template>
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index c2cc4d1f..6548bf4d 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -18,26 +18,19 @@
       />
       <AssignTo v-model="assignees.data" doctype="CRM Lead" :docname="leadId" />
       <Dropdown
-        v-if="doc"
-        :options="
-          statusOptions(
-            'lead',
-            document.statuses?.length ? document.statuses : document._statuses,
-            triggerStatusChange,
-          )
-        "
+        v-if="doc && document.statuses"
+        :options="statuses"
+        placement="right"
       >
         <template #default="{ open }">
-          <Button v-if="doc.status" :label="doc.status">
+          <Button
+            v-if="doc.status"
+            :label="doc.status"
+            :iconRight="open ? 'chevron-up' : 'chevron-down'"
+          >
             <template #prefix>
               <IndicatorIcon :class="getLeadStatus(doc.status).color" />
             </template>
-            <template #suffix>
-              <FeatherIcon
-                :name="open ? 'chevron-up' : 'chevron-down'"
-                class="h-4"
-              />
-            </template>
           </Button>
         </template>
       </Dropdown>
@@ -125,71 +118,48 @@
                 </div>
               </Tooltip>
               <div class="flex gap-1.5">
-                <Tooltip v-if="callEnabled" :text="__('Make a call')">
-                  <div>
-                    <Button
-                      @click="
-                        () =>
-                          doc.mobile_no
-                            ? makeCall(doc.mobile_no)
-                            : toast.error(__('No phone number set'))
-                      "
-                    >
-                      <template #icon>
-                        <PhoneIcon />
-                      </template>
-                    </Button>
-                  </div>
-                </Tooltip>
-                <Tooltip :text="__('Send an email')">
-                  <div>
-                    <Button
-                      @click="
-                        doc.email
-                          ? openEmailBox()
-                          : toast.error(__('No email set'))
-                      "
-                    >
-                      <template #icon>
-                        <Email2Icon />
-                      </template>
-                    </Button>
-                  </div>
-                </Tooltip>
-                <Tooltip :text="__('Go to website')">
-                  <div>
-                    <Button
-                      @click="
-                        doc.website
-                          ? openWebsite(doc.website)
-                          : toast.error(__('No website set'))
-                      "
-                    >
-                      <template #icon>
-                        <LinkIcon />
-                      </template>
-                    </Button>
-                  </div>
-                </Tooltip>
-                <Tooltip :text="__('Attach a file')">
-                  <div>
-                    <Button @click="showFilesUploader = true">
-                      <template #icon>
-                        <AttachmentIcon />
-                      </template>
-                    </Button>
-                  </div>
-                </Tooltip>
-                <Tooltip :text="__('Delete')">
-                  <div>
-                    <Button
-                      @click="deleteLead"
-                      variant="subtle"
-                      theme="red"
-                      icon="trash-2"
-                    />
-                  </div>
-                </Tooltip>
+                <Button
+                  v-if="callEnabled"
+                  :tooltip="__('Make a call')"
+                  :icon="PhoneIcon"
+                  @click="
+                    () =>
+                      doc.mobile_no
+                        ? makeCall(doc.mobile_no)
+                        : toast.error(__('No phone number set'))
+                  "
+                />
+
+                <Button
+                  :tooltip="__('Send an email')"
+                  :icon="Email2Icon"
+                  @click="
+                    doc.email ? openEmailBox() : toast.error(__('No email set'))
+                  "
+                />
+                <Button
+                  :tooltip="__('Go to website')"
+                  :icon="LinkIcon"
+                  @click="
+                    doc.website
+                      ? openWebsite(doc.website)
+                      : toast.error(__('No website set'))
+                  "
+                />
+
+                <Button
+                  :tooltip="__('Attach a file')"
+                  :icon="AttachmentIcon"
+                  @click="showFilesUploader = true"
+                />
+
+                <Button
+                  :tooltip="__('Delete')"
+                  variant="subtle"
+                  theme="red"
+                  icon="trash-2"
+                  @click="deleteLead"
+                />
               </div>
               <ErrorMessage :message="__(error)" />
             </div>
@@ -395,6 +365,13 @@ const title = computed(() => {
   return doc?.[t] || props.leadId
 })
 
+const statuses = computed(() => {
+  let customStatuses = document.statuses?.length
+    ? document.statuses
+    : document._statuses || []
+  return statusOptions('lead', customStatuses, triggerStatusChange)
+})
+
 usePageMeta(() => {
   return { title: title.value, icon: brand.favicon }
 })
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index d099bfea..f931c74f 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -11,10 +11,9 @@
       <Button
         variant="solid"
         :label="__('Create')"
+        iconLeft="plus"
         @click="showLeadModal = true"
-      >
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      />
     </template>
   </LayoutHeader>
   <ViewControls
@@ -259,9 +258,11 @@
     >
       <LeadsIcon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Leads')]) }}</span>
-      <Button :label="__('Create')" @click="showLeadModal = true">
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      <Button
+        :label="__('Create')"
+        iconLeft="plus"
+        @click="showLeadModal = true"
+      />
     </div>
   </div>
   <LeadModal
diff --git a/frontend/src/pages/MobileContact.vue b/frontend/src/pages/MobileContact.vue
index 73dd6afd..18fdc220 100644
--- a/frontend/src/pages/MobileContact.vue
+++ b/frontend/src/pages/MobileContact.vue
@@ -72,12 +72,9 @@
                   v-if="callEnabled && contact.doc.mobile_no"
                   :label="__('Make Call')"
                   size="sm"
+                  :iconLeft="PhoneIcon"
                   @click="callEnabled && makeCall(contact.doc.mobile_no)"
-                >
-                  <template #prefix>
-                    <PhoneIcon class="h-4 w-4" />
-                  </template>
-                </Button>
+                />
                 <Button
                   :label="__('Delete')"
                   theme="red"
diff --git a/frontend/src/pages/MobileDeal.vue b/frontend/src/pages/MobileDeal.vue
index 32d6b4c9..ffb24392 100644
--- a/frontend/src/pages/MobileDeal.vue
+++ b/frontend/src/pages/MobileDeal.vue
@@ -22,16 +22,14 @@
           "
         >
           <template #default="{ open }">
-            <Button v-if="doc.status" :label="doc.status">
+            <Button
+              v-if="doc.status"
+              :label="doc.status"
+              :iconRight="open ? 'chevron-up' : 'chevron-down'"
+            >
               <template #prefix>
                 <IndicatorIcon :class="getDealStatus(doc.status).color" />
               </template>
-              <template #suffix>
-                <FeatherIcon
-                  :name="open ? 'chevron-up' : 'chevron-down'"
-                  class="h-4"
-                />
-              </template>
             </Button>
           </template>
         </Dropdown>
diff --git a/frontend/src/pages/MobileLead.vue b/frontend/src/pages/MobileLead.vue
index 8f6a4cef..82018159 100644
--- a/frontend/src/pages/MobileLead.vue
+++ b/frontend/src/pages/MobileLead.vue
@@ -22,16 +22,14 @@
           "
         >
           <template #default="{ open }">
-            <Button v-if="doc.status" :label="doc.status">
+            <Button
+              v-if="doc.status"
+              :label="doc.status"
+              :iconRight="open ? 'chevron-up' : 'chevron-down'"
+            >
               <template #prefix>
                 <IndicatorIcon :class="getLeadStatus(doc.status).color" />
               </template>
-              <template #suffix>
-                <FeatherIcon
-                  :name="open ? 'chevron-up' : 'chevron-down'"
-                  class="h-4"
-                />
-              </template>
             </Button>
           </template>
         </Dropdown>
diff --git a/frontend/src/pages/MobileNotification.vue b/frontend/src/pages/MobileNotification.vue
index bcf283e5..35eb7a80 100644
--- a/frontend/src/pages/MobileNotification.vue
+++ b/frontend/src/pages/MobileNotification.vue
@@ -8,18 +8,12 @@
       />
     </template>
     <template #right-header>
-      <Tooltip :text="__('Mark all as read')">
-        <div>
-          <Button
-            :label="__('Mark all as read')"
-            @click="() => mark_as_read.reload()"
-          >
-            <template #prefix>
-              <MarkAsDoneIcon class="h-4 w-4" />
-            </template>
-          </Button>
-        </div>
-      </Tooltip>
+      <Button
+        :tooltip="__('Mark all as read')"
+        :label="__('Mark all as read')"
+        :iconLeft="MarkAsDoneIcon"
+        @click="() => mark_as_read.reload()"
+      />
     </template>
   </LayoutHeader>
   <div class="flex flex-col overflow-hidden text-ink-gray-9">
diff --git a/frontend/src/pages/MobileOrganization.vue b/frontend/src/pages/MobileOrganization.vue
index ce4dd57b..087f56d8 100644
--- a/frontend/src/pages/MobileOrganization.vue
+++ b/frontend/src/pages/MobileOrganization.vue
@@ -72,12 +72,9 @@
                   :label="__('Delete')"
                   theme="red"
                   size="sm"
+                  iconLeft="trash-2"
                   @click="deleteOrganization"
-                >
-                  <template #prefix>
-                    <FeatherIcon name="trash-2" class="h-4 w-4" />
-                  </template>
-                </Button>
+                />
               </div>
               <ErrorMessage :message="__(error)" />
             </div>
diff --git a/frontend/src/pages/Notes.vue b/frontend/src/pages/Notes.vue
index 0c111edd..9d5aa03d 100644
--- a/frontend/src/pages/Notes.vue
+++ b/frontend/src/pages/Notes.vue
@@ -4,9 +4,12 @@
       <ViewBreadcrumbs v-model="viewControls" routeName="Notes" />
     </template>
     <template #right-header>
-      <Button variant="solid" :label="__('Create')" @click="createNote">
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      <Button
+        variant="solid"
+        :label="__('Create')"
+        iconLeft="plus"
+        @click="createNote"
+      />
     </template>
   </LayoutHeader>
   <ViewControls
@@ -90,9 +93,7 @@
     >
       <NoteIcon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Notes')]) }}</span>
-      <Button :label="__('Create')" @click="createNote">
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      <Button :label="__('Create')" iconLeft="plus" @click="createNote" />
     </div>
   </div>
   <NoteModal
diff --git a/frontend/src/pages/Organization.vue b/frontend/src/pages/Organization.vue
index ac08cb01..5a40bd89 100644
--- a/frontend/src/pages/Organization.vue
+++ b/frontend/src/pages/Organization.vue
@@ -83,19 +83,14 @@
                   :label="__('Delete')"
                   theme="red"
                   size="sm"
+                  iconLeft="trash-2"
                   @click="deleteOrganization()"
-                >
-                  <template #prefix>
-                    <FeatherIcon name="trash-2" class="h-4 w-4" />
-                  </template>
-                </Button>
-                <Tooltip :text="__('Open website')">
-                  <div>
-                    <Button @click="openWebsite">
-                      <FeatherIcon name="link" class="h-4 w-4" />
-                    </Button>
-                  </div>
-                </Tooltip>
+                />
+                <Button
+                  :tooltip="__('Open website')"
+                  icon="link"
+                  @click="openWebsite"
+                />
               </div>
             </div>
           </template>
diff --git a/frontend/src/pages/Organizations.vue b/frontend/src/pages/Organizations.vue
index 73c0d906..6edcff78 100644
--- a/frontend/src/pages/Organizations.vue
+++ b/frontend/src/pages/Organizations.vue
@@ -11,10 +11,9 @@
       <Button
         variant="solid"
         :label="__('Create')"
+        iconLeft="plus"
         @click="showOrganizationModal = true"
-      >
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      />
     </template>
   </LayoutHeader>
   <ViewControls
@@ -57,9 +56,11 @@
     >
       <OrganizationsIcon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Organizations')]) }}</span>
-      <Button :label="__('Create')" @click="showOrganizationModal = true">
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      <Button
+        :label="__('Create')"
+        iconLeft="plus"
+        @click="showOrganizationModal = true"
+      />
     </div>
   </div>
   <OrganizationModal
diff --git a/frontend/src/pages/Tasks.vue b/frontend/src/pages/Tasks.vue
index 5a2c2f1c..c6e9bcc6 100644
--- a/frontend/src/pages/Tasks.vue
+++ b/frontend/src/pages/Tasks.vue
@@ -8,9 +8,12 @@
         v-if="tasksListView?.customListActions"
         :actions="tasksListView.customListActions"
       />
-      <Button variant="solid" :label="__('Create')" @click="createTask">
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      <Button
+        variant="solid"
+        :label="__('Create')"
+        iconLeft="plus"
+        @click="createTask"
+      />
     </template>
   </LayoutHeader>
   <ViewControls
@@ -120,8 +123,8 @@
       <div class="flex gap-2 items-center justify-between">
         <div>
           <Button
-            class="-ml-2"
             v-if="getRow(itemName, 'reference_docname').label"
+            class="-ml-2"
             variant="ghost"
             size="sm"
             :label="
@@ -129,17 +132,14 @@
                 ? __('Deal')
                 : __('Lead')
             "
+            :iconRight="ArrowUpRightIcon"
             @click.stop="
               redirect(
                 getRow(itemName, 'reference_doctype').label,
                 getRow(itemName, 'reference_docname').label,
               )
             "
-          >
-            <template #suffix>
-              <ArrowUpRightIcon class="h-4 w-4" />
-            </template>
-          </Button>
+          />
         </div>
         <Dropdown
           class="flex items-center gap-2"
@@ -182,9 +182,11 @@
     >
       <Email2Icon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Tasks')]) }}</span>
-      <Button :label="__('Create')" @click="showTaskModal = true">
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      <Button
+        :label="__('Create')"
+        iconLeft="plus"
+        @click="showTaskModal = true"
+      />
     </div>
   </div>
   <TaskModal