diff --git a/crm/api/doc.py b/crm/api/doc.py
index 1369a952..4c326b2f 100644
--- a/crm/api/doc.py
+++ b/crm/api/doc.py
@@ -662,7 +662,7 @@ def get_fields_meta(doctype, restricted_fieldtypes=None, as_array=False, only_re
 
 @frappe.whitelist()
 def remove_assignments(doctype, name, assignees, ignore_permissions=False):
-	assignees = json.loads(assignees)
+	assignees = frappe.parse_json(assignees)
 
 	if not assignees:
 		return
diff --git a/crm/api/todo.py b/crm/api/todo.py
index dc9dcf28..685e756b 100644
--- a/crm/api/todo.py
+++ b/crm/api/todo.py
@@ -1,90 +1,79 @@
 import frappe
 from frappe import _
+
 from crm.fcrm.doctype.crm_notification.crm_notification import notify_user
 
 
 def after_insert(doc, method):
-    if (
-        doc.reference_type in ["CRM Lead", "CRM Deal"]
-        and doc.reference_name
-        and doc.allocated_to
-    ):
-        fieldname = "lead_owner" if doc.reference_type == "CRM Lead" else "deal_owner"
-        lead_owner = frappe.db.get_value(
-            doc.reference_type, doc.reference_name, fieldname
-        )
-        if not lead_owner:
-            frappe.db.set_value(
-                doc.reference_type, doc.reference_name, fieldname, doc.allocated_to
-            )
+	if doc.reference_type in ["CRM Lead", "CRM Deal"] and doc.reference_name and doc.allocated_to:
+		fieldname = "lead_owner" if doc.reference_type == "CRM Lead" else "deal_owner"
+		owner = frappe.db.get_value(doc.reference_type, doc.reference_name, fieldname)
+		if not owner:
+			frappe.db.set_value(
+				doc.reference_type, doc.reference_name, fieldname, doc.allocated_to, update_modified=False
+			)
 
-    if (
-        doc.reference_type in ["CRM Lead", "CRM Deal", "CRM Task"]
-        and doc.reference_name
-        and doc.allocated_to
-    ):
-        notify_assigned_user(doc)
+	if doc.reference_type in ["CRM Lead", "CRM Deal", "CRM Task"] and doc.reference_name and doc.allocated_to:
+		notify_assigned_user(doc)
 
 
 def on_update(doc, method):
-    if (
-        doc.has_value_changed("status")
-        and doc.status == "Cancelled"
-        and doc.reference_type in ["CRM Lead", "CRM Deal", "CRM Task"]
-        and doc.reference_name
-        and doc.allocated_to
-    ):
-        notify_assigned_user(doc, is_cancelled=True)
+	if (
+		doc.has_value_changed("status")
+		and doc.status == "Cancelled"
+		and doc.reference_type in ["CRM Lead", "CRM Deal", "CRM Task"]
+		and doc.reference_name
+		and doc.allocated_to
+	):
+		notify_assigned_user(doc, is_cancelled=True)
 
 
 def notify_assigned_user(doc, is_cancelled=False):
-    _doc = frappe.get_doc(doc.reference_type, doc.reference_name)
-    owner = frappe.get_cached_value("User", frappe.session.user, "full_name")
-    notification_text = get_notification_text(owner, doc, _doc, is_cancelled)
+	_doc = frappe.get_doc(doc.reference_type, doc.reference_name)
+	owner = frappe.get_cached_value("User", frappe.session.user, "full_name")
+	notification_text = get_notification_text(owner, doc, _doc, is_cancelled)
 
-    message = (
-        _("Your assignment on {0} {1} has been removed by {2}").format(
-            doc.reference_type, doc.reference_name, owner
-        )
-        if is_cancelled
-        else _("{0} assigned a {1} {2} to you").format(
-            owner, doc.reference_type, doc.reference_name
-        )
-    )
+	message = (
+		_("Your assignment on {0} {1} has been removed by {2}").format(
+			doc.reference_type, doc.reference_name, owner
+		)
+		if is_cancelled
+		else _("{0} assigned a {1} {2} to you").format(owner, doc.reference_type, doc.reference_name)
+	)
 
-    redirect_to_doctype, redirect_to_name = get_redirect_to_doc(doc)
+	redirect_to_doctype, redirect_to_name = get_redirect_to_doc(doc)
 
-    notify_user(
-        {
-            "owner": frappe.session.user,
-            "assigned_to": doc.allocated_to,
-            "notification_type": "Assignment",
-            "message": message,
-            "notification_text": notification_text,
-            "reference_doctype": doc.reference_type,
-            "reference_docname": doc.reference_name,
-            "redirect_to_doctype": redirect_to_doctype,
-            "redirect_to_docname": redirect_to_name,
-        }
-    )
+	notify_user(
+		{
+			"owner": frappe.session.user,
+			"assigned_to": doc.allocated_to,
+			"notification_type": "Assignment",
+			"message": message,
+			"notification_text": notification_text,
+			"reference_doctype": doc.reference_type,
+			"reference_docname": doc.reference_name,
+			"redirect_to_doctype": redirect_to_doctype,
+			"redirect_to_docname": redirect_to_name,
+		}
+	)
 
 
 def get_notification_text(owner, doc, reference_doc, is_cancelled=False):
-    name = doc.reference_name
-    doctype = doc.reference_type
+	name = doc.reference_name
+	doctype = doc.reference_type
 
-    if doctype.startswith("CRM "):
-        doctype = doctype[4:].lower()
+	if doctype.startswith("CRM "):
+		doctype = doctype[4:].lower()
 
-    if doctype in ["lead", "deal"]:
-        name = (
-            reference_doc.lead_name or name
-            if doctype == "lead"
-            else reference_doc.organization or reference_doc.lead_name or name
-        )
+	if doctype in ["lead", "deal"]:
+		name = (
+			reference_doc.lead_name or name
+			if doctype == "lead"
+			else reference_doc.organization or reference_doc.lead_name or name
+		)
 
-        if is_cancelled:
-            return f"""
+		if is_cancelled:
+			return f"""
                 <div class="mb-2 leading-5 text-ink-gray-5">
                     <span>{ _('Your assignment on {0} {1} has been removed by {2}').format(
                         doctype,
@@ -94,7 +83,7 @@ def get_notification_text(owner, doc, reference_doc, is_cancelled=False):
                 </div>
             """
 
-        return f"""
+		return f"""
             <div class="mb-2 leading-5 text-ink-gray-5">
                 <span class="font-medium text-ink-gray-9">{ owner }</span>
                 <span>{ _('assigned a {0} {1} to you').format(
@@ -104,9 +93,9 @@ def get_notification_text(owner, doc, reference_doc, is_cancelled=False):
             </div>
         """
 
-    if doctype == "task":
-        if is_cancelled:
-            return f"""
+	if doctype == "task":
+		if is_cancelled:
+			return f"""
                 <div class="mb-2 leading-5 text-ink-gray-5">
                     <span>{ _('Your assignment on task {0} has been removed by {1}').format(
                         f'<span class="font-medium text-ink-gray-9">{ reference_doc.title }</span>',
@@ -114,7 +103,7 @@ def get_notification_text(owner, doc, reference_doc, is_cancelled=False):
                     ) }</span>
                 </div>
             """
-        return f"""
+		return f"""
             <div class="mb-2 leading-5 text-ink-gray-5">
                 <span class="font-medium text-ink-gray-9">{ owner }</span>
                 <span>{ _('assigned a new task {0} to you').format(
@@ -125,8 +114,8 @@ def get_notification_text(owner, doc, reference_doc, is_cancelled=False):
 
 
 def get_redirect_to_doc(doc):
-    if doc.reference_type == "CRM Task":
-        reference_doc = frappe.get_doc(doc.reference_type, doc.reference_name)
-        return reference_doc.reference_doctype, reference_doc.reference_docname
+	if doc.reference_type == "CRM Task":
+		reference_doc = frappe.get_doc(doc.reference_type, doc.reference_name)
+		return reference_doc.reference_doctype, reference_doc.reference_docname
 
-    return doc.reference_type, doc.reference_name
+	return doc.reference_type, doc.reference_name
diff --git a/frontend/auto-imports.d.ts b/frontend/auto-imports.d.ts
new file mode 100644
index 00000000..9d240079
--- /dev/null
+++ b/frontend/auto-imports.d.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+
+}
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index afedd3ed..8b1b706a 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -25,6 +25,7 @@ declare module 'vue' {
     AscendingIcon: typeof import('./src/components/Icons/AscendingIcon.vue')['default']
     AssignmentModal: typeof import('./src/components/Modals/AssignmentModal.vue')['default']
     AssignTo: typeof import('./src/components/AssignTo.vue')['default']
+    AssignToBody: typeof import('./src/components/AssignToBody.vue')['default']
     AttachmentArea: typeof import('./src/components/Activities/AttachmentArea.vue')['default']
     AttachmentIcon: typeof import('./src/components/Icons/AttachmentIcon.vue')['default']
     AttachmentItem: typeof import('./src/components/AttachmentItem.vue')['default']
@@ -172,6 +173,7 @@ declare module 'vue' {
     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']
diff --git a/frontend/src/components/Activities/Activities.vue b/frontend/src/components/Activities/Activities.vue
index 32528416..2c8d0341 100644
--- a/frontend/src/components/Activities/Activities.vue
+++ b/frontend/src/components/Activities/Activities.vue
@@ -50,11 +50,13 @@
             class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 px-3 sm:gap-4 sm:px-10"
           >
             <div
-              class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-outline-gray-modals"
-              :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
+              class="z-0 relative flex justify-center before:absolute before:left-[50%] before:-z-[1] before:top-0 before:border-l before:border-outline-gray-modals"
+              :class="
+                i != activities.length - 1 ? 'before:h-full' : 'before:h-4'
+              "
             >
               <div
-                class="z-10 flex h-8 w-7 items-center justify-center bg-surface-white"
+                class="flex h-8 w-7 items-center justify-center bg-surface-white"
               >
                 <CommentIcon class="text-ink-gray-8" />
               </div>
@@ -72,11 +74,13 @@
             class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-3 sm:px-10"
           >
             <div
-              class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-outline-gray-modals"
-              :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
+              class="z-0 relative flex justify-center before:absolute before:left-[50%] before:-z-[1] before:top-0 before:border-l before:border-outline-gray-modals"
+              :class="
+                i != activities.length - 1 ? 'before:h-full' : 'before:h-4'
+              "
             >
               <div
-                class="z-10 flex h-8 w-7 items-center justify-center bg-surface-white text-ink-gray-8"
+                class="flex h-8 w-7 items-center justify-center bg-surface-white text-ink-gray-8"
               >
                 <MissedCallIcon
                   v-if="call.status == 'No Answer'"
@@ -116,11 +120,11 @@
       >
         <div
           v-if="['Activity', 'Emails'].includes(title)"
-          class="relative flex justify-center before:absolute before:left-[50%] before:top-0 before:-z-10 before:border-l before:border-outline-gray-modals"
+          class="z-0 relative flex justify-center before:absolute before:left-[50%] before:-z-[1] before:top-0 before:border-l before:border-outline-gray-modals"
           :class="[i != activities.length - 1 ? 'before:h-full' : 'before:h-4']"
         >
           <div
-            class="z-10 flex h-7 w-7 items-center justify-center bg-surface-white"
+            class="flex h-7 w-7 items-center justify-center bg-surface-white"
             :class="{
               'mt-2.5': ['communication'].includes(activity.activity_type),
               'bg-surface-white': ['added', 'removed', 'changed'].includes(
@@ -555,6 +559,7 @@ const all_activities = createResource({
   transform: ([versions, calls, notes, tasks, attachments]) => {
     return { versions, calls, notes, tasks, attachments }
   },
+  onSuccess: () => nextTick(() => scroll()),
 })
 
 const showWhatsappTemplates = ref(false)
diff --git a/frontend/src/components/Activities/CallArea.vue b/frontend/src/components/Activities/CallArea.vue
index d7771879..4a1ae469 100644
--- a/frontend/src/components/Activities/CallArea.vue
+++ b/frontend/src/components/Activities/CallArea.vue
@@ -1,5 +1,5 @@
 <template>
-  <div @click="showCallLogDetailModal = true" class="cursor-pointer">
+  <div>
     <div class="mb-1 flex items-center justify-stretch gap-2 py-1 text-base">
       <div class="inline-flex items-center flex-wrap gap-1 text-ink-gray-5">
         <Avatar
@@ -25,7 +25,8 @@
       </div>
     </div>
     <div
-      class="flex flex-col gap-2 border border-outline-gray-modals rounded-md bg-surface-cards px-3 py-2.5 text-ink-gray-9"
+      @click="showCallLogDetailModal = true"
+      class="flex flex-col gap-2 border cursor-pointer border-outline-gray-modals rounded-md bg-surface-cards px-3 py-2.5 text-ink-gray-9"
     >
       <div class="flex items-center justify-between">
         <div class="inline-flex gap-2 items-center text-base font-medium">
diff --git a/frontend/src/components/AssignTo.vue b/frontend/src/components/AssignTo.vue
index 1f42df3a..96d29cb6 100644
--- a/frontend/src/components/AssignTo.vue
+++ b/frontend/src/components/AssignTo.vue
@@ -1,31 +1,100 @@
 <template>
-  <component
-    v-if="assignees?.length"
-    :is="assignees?.length == 1 ? 'Button' : 'div'"
-  >
-    <MultipleAvatar :avatars="assignees" @click="showAssignmentModal = true" />
-  </component>
-  <Button v-else @click="showAssignmentModal = true">
-    {{ __('Assign to') }}
-  </Button>
-  <AssignmentModal
-    v-if="showAssignmentModal"
-    v-model="showAssignmentModal"
-    v-model:assignees="assignees"
-    :doctype="doctype"
-    :doc="data"
-  />
+  <NestedPopover>
+    <template #target>
+      <div class="flex items-center">
+        <component
+          v-if="assignees?.length"
+          :is="assignees?.length == 1 ? 'Button' : 'div'"
+        >
+          <MultipleAvatar :avatars="assignees" />
+        </component>
+        <Button v-else :label="__('Assign to')" />
+      </div>
+    </template>
+    <template #body="{ open }">
+      <AssignToBody
+        v-show="open"
+        v-model="assignees"
+        :docname="docname"
+        :doctype="doctype"
+        :open="open"
+        :onUpdate="ownerField && saveAssignees"
+      />
+    </template>
+  </NestedPopover>
 </template>
 <script setup>
+import NestedPopover from '@/components/NestedPopover.vue'
 import MultipleAvatar from '@/components/MultipleAvatar.vue'
-import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
-import { ref } from 'vue'
+import AssignToBody from '@/components/AssignToBody.vue'
+import { useDocument } from '@/data/document'
+import { toast } from 'frappe-ui'
+import { computed } from 'vue'
 
 const props = defineProps({
-  data: Object,
   doctype: String,
+  docname: String,
 })
 
-const showAssignmentModal = ref(false)
+const { document } = useDocument(props.doctype, props.docname)
+
 const assignees = defineModel()
+
+const ownerField = computed(() => {
+  if (props.doctype === 'CRM Lead') {
+    return 'lead_owner'
+  } else if (props.doctype === 'CRM Deal') {
+    return 'deal_owner'
+  } else {
+    return null
+  }
+})
+
+async function saveAssignees(
+  addedAssignees,
+  removedAssignees,
+  addAssignees,
+  removeAssignees,
+) {
+  removedAssignees.length && (await removeAssignees.submit(removedAssignees))
+  addedAssignees.length && (await addAssignees.submit(addedAssignees))
+
+  const nextAssignee = assignees.value.find(
+    (a) => a.name !== document.doc[ownerField.value],
+  )
+
+  let owner = ownerField.value.replace('_', ' ')
+
+  if (
+    document.doc[ownerField.value] &&
+    removedAssignees.includes(document.doc[ownerField.value])
+  ) {
+    document.doc[ownerField.value] = nextAssignee ? nextAssignee.name : ''
+    document.save.submit()
+
+    if (nextAssignee) {
+      toast.info(
+        __(
+          'Since you removed {0} from the assignee, the {0} has been changed to the next available assignee {1}.',
+          [owner, nextAssignee.label || nextAssignee.name],
+        ),
+      )
+    } else {
+      toast.info(
+        __(
+          'Since you removed {0} from the assignee, the {0} has also been removed.',
+          [owner],
+        ),
+      )
+    }
+  } else if (!document.doc[ownerField.value] && nextAssignee) {
+    document.doc[ownerField.value] = nextAssignee ? nextAssignee.name : ''
+    toast.info(
+      __('Since you added a new assignee, the {0} has been set to {1}.', [
+        owner,
+        nextAssignee.label || nextAssignee.name,
+      ]),
+    )
+  }
+}
 </script>
diff --git a/frontend/src/components/AssignToBody.vue b/frontend/src/components/AssignToBody.vue
new file mode 100644
index 00000000..e4e226b0
--- /dev/null
+++ b/frontend/src/components/AssignToBody.vue
@@ -0,0 +1,212 @@
+<template>
+  <div
+    class="flex flex-col gap-2 my-2 w-[470px] rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black p-3 ring-opacity-5 focus:outline-none"
+  >
+    <div class="text-base text-ink-gray-5">{{ __('Assign to') }}</div>
+    <Link
+      class="form-control"
+      value=""
+      doctype="User"
+      @change="(option) => addValue(option) && ($refs.input.value = '')"
+      :placeholder="__('John Doe')"
+      :filters="{
+        name: ['in', users.data.crmUsers?.map((user) => user.name)],
+      }"
+      :hideMe="true"
+    >
+      <template #target="{ togglePopover }">
+        <div
+          class="w-full min-h-12 flex flex-wrap items-center gap-1.5 p-1.5 pb-5 rounded-lg bg-surface-gray-2 cursor-text"
+          @click.stop="togglePopover"
+        >
+          <Tooltip
+            :text="assignee.name"
+            v-for="assignee in assignees"
+            :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
+              >
+                <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>
+            </div>
+          </Tooltip>
+        </div>
+      </template>
+      <template #item-prefix="{ option }">
+        <UserAvatar class="mr-2" :user="option.value" size="sm" />
+      </template>
+      <template #item-label="{ option }">
+        <Tooltip :text="option.value">
+          <div class="cursor-pointer text-ink-gray-9">
+            {{ getUser(option.value).full_name }}
+          </div>
+        </Tooltip>
+      </template>
+    </Link>
+    <div class="flex items-center justify-between gap-2">
+      <div
+        class="text-base text-ink-gray-5 cursor-pointer select-none"
+        @click="assignToMe = !assignToMe"
+      >
+        {{ __('Assign to me') }}
+      </div>
+      <Switch v-model="assignToMe" @click.stop />
+    </div>
+  </div>
+</template>
+
+<script setup>
+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 { ref, watch } from 'vue'
+
+const props = defineProps({
+  doctype: {
+    type: String,
+    default: '',
+  },
+  docname: {
+    type: Object,
+    default: null,
+  },
+  open: {
+    type: Boolean,
+    default: false,
+  },
+  onUpdate: {
+    type: Function,
+    default: null,
+  },
+})
+
+const emit = defineEmits(['reload'])
+
+const assignees = defineModel()
+const oldAssignees = ref([])
+const assignToMe = ref(false)
+
+const error = ref('')
+
+const { users, getUser } = usersStore()
+
+const removeValue = (value) => {
+  if (value === getUser('').name) {
+    assignToMe.value = false
+  }
+
+  assignees.value = assignees.value.filter(
+    (assignee) => assignee.name !== value,
+  )
+}
+
+const addValue = (value) => {
+  if (value === getUser('').name) {
+    assignToMe.value = true
+  }
+
+  error.value = ''
+  let obj = {
+    name: value,
+    image: getUser(value).user_image,
+    label: getUser(value).full_name,
+  }
+  if (!assignees.value.find((assignee) => assignee.name === value)) {
+    assignees.value.push(obj)
+  }
+}
+
+watch(assignToMe, (val) => {
+  let user = getUser('')
+  if (val) {
+    addValue(user.name)
+  } else {
+    removeValue(user.name)
+  }
+})
+
+watch(
+  () => props.open,
+  (val) => {
+    if (val) {
+      oldAssignees.value = [...(assignees.value || [])]
+
+      assignToMe.value = assignees.value.some(
+        (assignee) => assignee.name === getUser('').name,
+      )
+    } else {
+      updateAssignees()
+    }
+  },
+)
+
+async function updateAssignees() {
+  if (JSON.stringify(oldAssignees.value) === JSON.stringify(assignees.value))
+    return
+
+  const removedAssignees = oldAssignees.value
+    .filter(
+      (assignee) => !assignees.value.find((a) => a.name === assignee.name),
+    )
+    .map((assignee) => assignee.name)
+
+  const addedAssignees = assignees.value
+    .filter(
+      (assignee) => !oldAssignees.value.find((a) => a.name === assignee.name),
+    )
+    .map((assignee) => assignee.name)
+
+  if (props.onUpdate) {
+    props.onUpdate(
+      addedAssignees,
+      removedAssignees,
+      addAssignees,
+      removeAssignees,
+    )
+  } else {
+    if (removedAssignees.length) {
+      await removeAssignees.submit(removedAssignees)
+    }
+    if (addedAssignees.length) {
+      addAssignees.submit(addedAssignees)
+    }
+  }
+}
+
+const addAssignees = createResource({
+  url: 'frappe.desk.form.assign_to.add',
+  makeParams: (addedAssignees) => ({
+    doctype: props.doctype,
+    name: props.docname,
+    assign_to: addedAssignees,
+  }),
+  onSuccess: () => {
+    capture('assign_to', { doctype: props.doctype })
+  },
+})
+
+const removeAssignees = createResource({
+  url: 'crm.api.doc.remove_assignments',
+  makeParams: (removedAssignees) => ({
+    doctype: props.doctype,
+    name: props.docname,
+    assignees: removedAssignees,
+  }),
+})
+</script>
diff --git a/frontend/src/components/Modals/AssignmentModal.vue b/frontend/src/components/Modals/AssignmentModal.vue
index c6fc6dfd..0a0533dd 100644
--- a/frontend/src/components/Modals/AssignmentModal.vue
+++ b/frontend/src/components/Modals/AssignmentModal.vue
@@ -1,30 +1,8 @@
 <template>
   <Dialog
     v-model="show"
-    :options="{
-      title: __('Assign To'),
-      size: 'xl',
-      actions: [
-        {
-          label: __('Cancel'),
-          variant: 'subtle',
-          onClick: () => {
-            assignees = [...oldAssignees]
-            show = false
-          },
-        },
-        {
-          label: __('Update'),
-          variant: 'solid',
-          onClick: () => updateAssignees(),
-        },
-      ],
-    }"
-    @close="
-      () => {
-        assignees = [...oldAssignees]
-      }
-    "
+    :options="{ title: __('Assign To'), size: 'xl' }"
+    @close="() => (assignees = [...oldAssignees])"
   >
     <template #body-content>
       <Link
@@ -33,9 +11,43 @@
         doctype="User"
         @change="(option) => addValue(option) && ($refs.input.value = '')"
         :placeholder="__('John Doe')"
-        :filters="{ name: ['in', users.data.crmUsers?.map((user) => user.name)] }"
+        :filters="{
+          name: ['in', users.data.crmUsers?.map((user) => user.name)],
+        }"
         :hideMe="true"
       >
+        <template #target="{ togglePopover }">
+          <div
+            class="w-full min-h-12 flex flex-wrap items-center gap-1.5 p-1.5 pb-5 rounded-lg bg-surface-gray-2 cursor-text"
+            @click.stop="togglePopover"
+          >
+            <Tooltip
+              :text="assignee.name"
+              v-for="assignee in assignees"
+              :key="assignee.name"
+              @click.stop
+            >
+              <div>
+                <div
+                  class="flex items-center text-sm text-ink-gray-6 border border-outline-gray-1 bg-surface-white rounded-full hover:bg-surface-white !p-0.5"
+                  @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)"
+                  >
+                    <template #icon>
+                      <FeatherIcon name="x" class="h-3 w-3 text-ink-gray-6" />
+                    </template>
+                  </Button>
+                </div>
+              </div>
+            </Tooltip>
+          </div>
+        </template>
         <template #item-prefix="{ option }">
           <UserAvatar class="mr-2" :user="option.value" size="sm" />
         </template>
@@ -47,30 +59,28 @@
           </Tooltip>
         </template>
       </Link>
-      <div class="mt-3 flex flex-wrap items-center gap-2">
-        <Tooltip
-          :text="assignee.name"
-          v-for="assignee in assignees"
-          :key="assignee.name"
-        >
-          <div>
-            <Button :label="getUser(assignee.name).full_name" theme="gray">
-              <template #prefix>
-                <UserAvatar :user="assignee.name" size="sm" />
-              </template>
-              <template #suffix>
-                <FeatherIcon
-                  v-if="assignee.name !== owner"
-                  class="h-3.5"
-                  name="x"
-                  @click.stop="removeValue(assignee.name)"
-                />
-              </template>
-            </Button>
-          </div>
-        </Tooltip>
+    </template>
+    <template #actions>
+      <div class="flex justify-between items-center gap-2">
+        <div><ErrorMessage :message="__(error)" /></div>
+        <div class="flex items-center justify-end gap-2">
+          <Button
+            variant="subtle"
+            :label="__('Cancel')"
+            @click="
+              () => {
+                assignees = [...oldAssignees]
+                show = false
+              }
+            "
+          />
+          <Button
+            variant="solid"
+            :label="__('Update')"
+            @click="updateAssignees()"
+          />
+        </div>
       </div>
-      <ErrorMessage class="mt-2" v-if="error" :message="__(error)" />
     </template>
   </Dialog>
 </template>
@@ -132,7 +142,7 @@ const addValue = (value) => {
   }
 }
 
-function updateAssignees() {
+async function updateAssignees() {
   const removedAssignees = oldAssignees.value
     .filter(
       (assignee) => !assignees.value.find((a) => a.name === assignee.name),
@@ -146,7 +156,7 @@ function updateAssignees() {
     .map((assignee) => assignee.name)
 
   if (removedAssignees.length) {
-    call('crm.api.doc.remove_assignments', {
+    await call('crm.api.doc.remove_assignments', {
       doctype: props.doctype,
       name: props.doc.name,
       assignees: JSON.stringify(removedAssignees),
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index e4be2857..14977a2a 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -16,7 +16,7 @@
         v-if="document.actions?.length"
         :actions="document.actions"
       />
-      <AssignTo v-model="assignees.data" :data="doc" doctype="CRM Deal" />
+      <AssignTo v-model="assignees.data" doctype="CRM Deal" :docname="dealId" />
       <Dropdown
         v-if="doc"
         :options="
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 7fd52dad..c2cc4d1f 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -16,7 +16,7 @@
         v-if="document.actions?.length"
         :actions="document.actions"
       />
-      <AssignTo v-model="assignees.data" :data="doc" doctype="CRM Lead" />
+      <AssignTo v-model="assignees.data" doctype="CRM Lead" :docname="leadId" />
       <Dropdown
         v-if="doc"
         :options="
diff --git a/frontend/src/pages/MobileDeal.vue b/frontend/src/pages/MobileDeal.vue
index dbe52f54..32d6b4c9 100644
--- a/frontend/src/pages/MobileDeal.vue
+++ b/frontend/src/pages/MobileDeal.vue
@@ -42,7 +42,7 @@
     v-if="doc.name"
     class="flex h-12 items-center justify-between gap-2 border-b px-3 py-2.5"
   >
-    <AssignTo v-model="assignees.data" :data="doc" doctype="CRM Deal" />
+    <AssignTo v-model="assignees.data" doctype="CRM Deal" :docname="dealId" />
     <div class="flex items-center gap-2">
       <CustomActions
         v-if="document._actions?.length"
diff --git a/frontend/src/pages/MobileLead.vue b/frontend/src/pages/MobileLead.vue
index 26669ad0..8f6a4cef 100644
--- a/frontend/src/pages/MobileLead.vue
+++ b/frontend/src/pages/MobileLead.vue
@@ -42,7 +42,7 @@
     v-if="doc.name"
     class="flex h-12 items-center justify-between gap-2 border-b px-3 py-2.5"
   >
-    <AssignTo v-model="assignees.data" :data="doc" doctype="CRM Lead" />
+    <AssignTo v-model="assignees.data" doctype="CRM Lead" :docname="leadId" />
     <div class="flex items-center gap-2">
       <CustomActions
         v-if="document._actions?.length"