diff --git a/frontend/src/components/Modals/AssignmentModal.vue b/frontend/src/components/Modals/AssignmentModal.vue
index 12e23417..0a0533dd 100644
--- a/frontend/src/components/Modals/AssignmentModal.vue
+++ b/frontend/src/components/Modals/AssignmentModal.vue
@@ -5,59 +5,60 @@
     @close="() => (assignees = [...oldAssignees])"
   >
     <template #body-content>
-      <div class="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>
-        <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 }">
-            <Button
-              :label="__('Add assignee')"
-              variant="subtle"
-              icon-left="plus"
-              @click.stop="togglePopover"
-            />
-          </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 }}
+      <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 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>
-          </template>
-        </Link>
-      </div>
+          </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>
     </template>
     <template #actions>
       <div class="flex justify-between items-center gap-2">
@@ -77,7 +78,6 @@
             variant="solid"
             :label="__('Update')"
             @click="updateAssignees()"
-            :disabled="!assignees.length"
           />
         </div>
       </div>
@@ -142,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),
@@ -156,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),